Feat/member (#55)

* update

---------

Co-authored-by: nguyenvanhadncntt <35553635+nguyenvanhadncntt@users.noreply.github.com>

Author: trungvuu188

frontend/.github/copilot-instructions.md

@@ -0,0 +1,205 @@
+# Smart Task Hub Frontend - AI Copilot Instructions
+
+## Project Overview
+**Smart Task Hub** is a collaborative kanban board application built with React + TypeScript. It features real-time collaboration via WebSockets, role-based access control, and drag-and-drop task management.
+
+**Stack**: Vite, React 18, TypeScript, Redux Toolkit, TailwindCSS, @dnd-kit, Axios, WebSockets
+
+---
+
+## Architecture
+
+### State Management (Redux Toolkit with Persistence)
+- **Store**: `src/store/index.ts` - Configured with redux-persist (only `auth` slice persisted)
+- **Auth slice** (`src/store/slices/authSlice.ts`): Handles login, logout, role management
+- **Domain slices**: `columnsSlice`, `tasksSlice`, `membersSlice`, `archiveColumnsSlice`, `archiveTasksSlice`
+- **Pattern**: Async thunks for API calls + normalized state shape (byId/allIds objects)
+- **Selectors** (`src/store/selectors/`): Use reselect-like pattern to avoid redundant renders
+- **Key exports**: `useAppDispatch`, `useAppSelector` from `src/store/index.ts`
+
+### Authentication & Authorization
+- **Custom hook** `useAuth()` (`src/hooks/useAuth.ts`): Returns `isAuthenticated`, `userRole`, `isLoading`, `isInitialized`
+- **Protected routes**: `src/components/guards/ProtectedRoute.tsx` - Guards routes by role, redirects to login if needed
+- **Roles**: `'admin' | 'user'` (stored in Redux, persisted to localStorage)
+- **API**: Auth status checked on app start via `checkAuthStatus()` thunk
+
+### Real-Time Collaboration (WebSocket)
+- **Connection**: `src/services/websocketService.ts` - Connects to `ws://localhost:9000/ws/project/{projectId}`
+- **Message handler**: `src/websocket/boardHandler.ts` - Routes incoming WS messages to Redux actions
+- **Patterns handled**: `COLUMN_MOVED`, `COLUMN_CREATED`, `TASK_MOVED`, `TASK_CREATED`, `COLUMN_STATUS_UPDATED`, `TASK_ASSIGNED`, etc.
+- **Integration**: Board component calls `connectToProjectWS()` on mount, disconnects on unmount
+
+### Service Layer Pattern
+- **Centralized axios client**: `src/services/axiosClient.ts` - Interceptors handle response unwrapping (returns `response.data`)
+- **Service modules**: `boardService.ts`, `taskService.ts`, `authService.ts`, `memberService.ts`, `workspaceService.ts`
+- **Base URL**: From `VITE_API_URL` env var (defaults to `http://localhost:9000/api`)
+- **Naming convention**: Service functions use snake_case (e.g., `fetchBoardDetail`, `updateColumnPosititon`)
+
+### Drag-and-Drop (dnd-kit)
+- **Library**: `@dnd-kit/core` + `@dnd-kit/sortable`
+- **Setup**: `src/components/board/BoardContent.tsx` - Uses `DndContext`, `DragOverlay`, `SortableContext`
+- **Components**: `DroppableColumn` (container), `DraggableItem` (tasks)
+- **Position tracking**: Columns/tasks use numeric `position` field (typically incremented by 1000)
+- **Handlers**: `onDragEnd()` calls `updateColumnPosititon()` or `reorderTasksInColumn()` to sync backend
+
+---
+
+## Key Files & Patterns
+
+### Routing Architecture
+- **File**: `src/router/AppRouter.tsx`
+- **Pattern**: Nested routes with layout wrappers (`AdminLayout`, `UserLayout`)
+- **Guards**: Every non-public route wrapped in `ProtectedRoute` with role check
+- **Fallbacks**: `UnauthorizedFallback`, `NotFound` components for error states
+
+### Type System
+- **Centralized types**: `src/types/` directory with `board.ts`, `user.types.ts`, `workspace.ts`, `collaboration.ts`
+- **Normalized shapes**: 
+  ```tsx
+  // Tasks stored as: { byId: Record<number, Task>, allIds: number[] }
+  // Columns stored similarly
+  // Selectors extract data: selectTaskById(id)(state)
+  ```
+
+### Component Organization
+- **Layout components**: `src/components/layout/` (AuthLayout, MainLayout, SidebarLayout)
+- **Domain components**: `src/components/board/` (BoardContent, DraggableItem, TaskDetailModal)
+- **UI primitives**: `src/components/ui/` (LoadingSpinner, LoadingContent, card.tsx)
+- **Guards**: `src/components/guards/` (ProtectedRoute, RoleRedirect)
+- **Memo optimization**: Used on expensive components like `DraggableItem` to prevent re-renders
+
+### Custom Hooks
+- **`useAuth()`**: Authentication state + login/logout/checkAuth methods
+- **`useBoardData()`**: Fetches board, columns, tasks, members on mount
+- **`useBoardOperations()`**: CRUD operations for columns (create, update, delete, archive)
+
+### Styling
+- **Framework**: TailwindCSS v4 with @tailwindcss/vite plugin
+- **Custom theme**: `tailwind.config.ts` extends colors (primary, gray) and animations
+- **Utility classes**: Use standard Tailwind + custom animations (fade-in, slide-up, spin-slow)
+
+---
+
+## Developer Workflows
+
+### Development
+```bash
+npm run dev              # Start Vite dev server on port 3000
+npm run build           # TypeScript build + Vite bundle
+npm run lint            # ESLint check (4-space indentation, Prettier rules)
+npm run format          # Auto-format with Prettier (80-char line width)
+```
+
+### Testing
+```bash
+npm run test            # Run Vitest in watch mode
+npm run test:ui        # UI dashboard for test execution
+npm run test:run       # Single run (CI mode)
+npm run test:coverage  # Coverage report (v8 provider)
+```
+
+### Type Checking
+```bash
+npx tsc --noEmit       # Check for TypeScript errors without emitting
+tsc -b                 # Used in build script
+```
+
+### Environment Setup
+- **`.env`**: Set `VITE_API_URL` (e.g., `http://localhost:9000/api`)
+- **Port**: Dev server runs on `localhost:3000`
+- **WebSocket**: Connects to same API host (ws:// scheme)
+
+---
+
+## Project-Specific Conventions
+
+### Naming
+- **Services**: Action verbs + nouns (`fetchBoardDetail`, `updateColumnTitle`, `archiveColumn`)
+- **State slices**: Plural domain names (`columns`, `tasks`, `members`, `archiveColumns`)
+- **Actions**: PascalCase (`columnCreated`, `taskMoved`, `taskAssigned`)
+- **Thunks**: Suffix with `Thunk` or `Async` (e.g., `archiveColumnThunk`)
+
+### Imports
+- **Path alias**: `@/` resolves to `src/` (configured in vite.config.ts & tsconfig.json)
+- **Pattern**: Import types separately → `import type { Board } from '@/types'`
+
+### Redux Best Practices (enforced)
+1. **State normalization**: Complex data stored by ID (tasks/columns byId + allIds)
+2. **Selectors for derived data**: Avoid inline selectors in components
+3. **Async thunks**: API calls wrapped in thunks, not in components
+4. **Persist only auth**: Other slices reset on page refresh by design
+5. **Immutable updates**: Redux Toolkit handles this via Immer
+
+### Testing Setup
+- **Config**: `vitest.config.ts` + `src/test/setup.ts`
+- **Mocks**: ResizeObserver, IntersectionObserver, window.matchMedia pre-configured
+- **Provider wrapping**: Tests wrap components in Redux Provider + mocked Router
+- **Coverage exclusions**: node_modules, dist, .d.ts, config files
+
+### ESLint & Formatting
+- **Indentation**: 4 spaces (enforced, not tabs)
+- **Semicolons**: Required at statement ends
+- **Quotes**: Single quotes preferred (except JSX attributes)
+- **Line width**: 80 characters (Prettier)
+- **Config**: `eslint.config.js` (new flat config format)
+
+---
+
+## Common Patterns
+
+### Adding a New Column Type
+1. Create slice in `src/store/slices/myFeatureSlice.ts`
+2. Add to combineReducers in `src/store/index.ts`
+3. Create selectors in `src/store/selectors/myFeatureSelectors.ts`
+4. Use `useAppSelector` + `useAppDispatch` in components
+
+### Creating a Service
+1. Add functions to `src/services/{feature}Service.ts`
+2. Use `axiosClients.get/post/patch/delete` with base URL already set
+3. Type responses with `ApiResponse<T>` wrapper
+4. Call from thunks, not components directly
+
+### Handling Real-Time Updates
+1. Board component establishes WS connection via `connectToProjectWS(boardId, onMessage)`
+2. onMessage handler receives JSON, calls `handleBoardWSMessage()` with store dispatch
+3. WebSocket handler dispatches Redux actions (columnCreated, taskMoved, etc.)
+4. Components re-render automatically via selector changes
+
+### Protected Route Patterns
+```tsx
+<ProtectedRoute adminOnly fallback={<UnauthorizedFallback />}>
+  <AdminDashboard />
+</ProtectedRoute>
+
+// OR with specific role
+<ProtectedRoute requiredRole="user" redirectTo="/login">
+  <UserBoard />
+</ProtectedRoute>
+```
+
+---
+
+## Testing Examples
+- **Unit tests**: Mock Redux store + React Query, test component props/interactions
+- **Integration tests**: Use Redux Provider + mock axios, test data flow
+- **Example**: `src/App.test.tsx` - Mocks AppRouter, renders with store Provider
+
+---
+
+## Quick Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| WebSocket not connecting | Check `ws://` URL format, verify backend on port 9000 |
+| State not persisting | Only `auth` slice persists by design; check redux-persist config |
+| Redux DevTools not opening | Set `NODE_ENV` correctly; uses devTools only in dev |
+| Type errors on async thunks | Import `AppDispatch` from store for dispatch typing |
+| Drag-drop not working | Ensure item has unique `id`, wrapped in `SortableContext` |
+
+---
+
+## External Resources
+- Redux Toolkit: https://redux-toolkit.js.org
+- dnd-kit: https://docs.dndkit.com
+- Vite: https://vitejs.dev
+- TailwindCSS: https://tailwindcss.com

frontend/src/components/layout/components/Sidebar.tsx

@@ -2,7 +2,7 @@ import { notify } from '@/services/toastService';
 import { getWorkspaces } from '@/services/workspaceService';
 import type { WorkSpace } from '@/types/workspace';
 import clsx from 'clsx';
-import { Folders, House, LayoutTemplate, ChevronDown, ChevronRight, Settings } from 'lucide-react';
+import { Folders, House, LayoutTemplate, ChevronDown, ChevronRight, Settings, Users } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -34,12 +34,12 @@ const workspaceItems = [
         title: 'Boards',
         navigate: '/workspace/boards'
     },
-    // {
-    //     id: 'w-item2',
-    //     icon: <Users />,
-    //     title: 'Members',
-    //     navigate: '/workspace/members'
-    // },
+    {
+        id: 'w-item2',
+        icon: <Users />,
+        title: 'Members',
+        navigate: '/workspace/members'
+    },
     {
         id: 'w-item3',
         icon: <Settings />,

frontend/src/pages/workspace/Member.tsx

@@ -0,0 +1,88 @@
+import type { Guest, JoinRequest, Member } from "@/types/collaboration";
+import { UserPlus } from "lucide-react";
+import { useState } from "react";
+import MembersTab from "./member/MembersTab";
+import GuestsTab from "./member/GuestsTab";
+import JoinRequestsTab from "./member/JoinRequestsTab";
+import InviteModal from "./member/InviteModal";
+
+type TabType = 'members' | 'guests' | 'requests';
+
+const sampleMembers: Member[] = [
+    { id: '1', name: 'Ha.NguyenVan', username: '@hanguyenvan9', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
+    { id: '2', name: 'Long.LeVanQuoc', username: '@longlevanquoc1', lastActive: 'October 2025', boardCount: 1, isAdmin: true },
+    { id: '3', name: 'Lâm Nhất Nguyên', username: '@nguyenlamnhat', lastActive: 'November 2025', boardCount: 2, isAdmin: true },
+    { id: '4', name: 'Nhien Tran Duc', username: '@nhientranduc', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
+    { id: '5', name: 'Hiển Lương', username: '@tranhienluong2003', lastActive: 'November 2025', boardCount: 4, isAdmin: true },
+    { id: '6', name: 'Vu Tran', username: '@vutran308', lastActive: 'November 2025', boardCount: 3, isAdmin: true },
+    { id: '7', name: 'NguyenHuuTuan', username: '@tuungnhu12', lastActive: 'September 2025', boardCount: 1, isAdmin: true },
+];
+
+const sampleGuests: Guest[] = [];
+
+const sampleRequests: JoinRequest[] = [];
+
+const WorkspaceCollaborators: React.FC = () => {
+    const [activeTab, setActiveTab] = useState<TabType>('members');
+    const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+    const [members] = useState<Member[]>(sampleMembers);
+    const [guests] = useState<Guest[]>(sampleGuests);
+    const [requests] = useState<JoinRequest[]>(sampleRequests);
+
+    const totalCollaborators = members.length + guests.length;
+
+    return (
+        <div className="h-full bg-[#1F1F21] text-white p-8">
+            <div className="w-full">
+                <div className="flex justify-between items-center mb-6">
+                    <h1 className="text-xl font-bold">
+                        Collaborators <span className="text-gray-400">{totalCollaborators} / 10</span>
+                    </h1>
+                    <button
+                        onClick={() => setIsInviteModalOpen(true)}
+                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2"
+                    >
+                        <UserPlus size={18} />
+                        Invite Workspace members
+                    </button>
+                </div>
+
+                <div className="flex gap-6">
+                    <div className="w-64 space-y-2">
+                        <button
+                            onClick={() => setActiveTab('members')}
+                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'members' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
+                                }`}
+                        >
+                            Workspace members ({members.length})
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('guests')}
+                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'guests' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
+                                }`}
+                        >
+                            Guests ({guests.length})
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('requests')}
+                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'requests' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
+                                }`}
+                        >
+                            Join requests ({requests.length})
+                        </button>
+                    </div>
+
+                    <div className="flex-1">
+                        {activeTab === 'members' && <MembersTab members={members} />}
+                        {activeTab === 'guests' && <GuestsTab guests={guests} />}
+                        {activeTab === 'requests' && <JoinRequestsTab requests={requests} />}
+                    </div>
+                </div>
+            </div>
+
+            <InviteModal isOpen={isInviteModalOpen} onClose={() => setIsInviteModalOpen(false)} />
+        </div>
+    );
+};
+
+export default WorkspaceCollaborators;

frontend/src/pages/workspace/WorkspaceCollaborators.tsx

@@ -0,0 +1,51 @@
+import type { Guest } from "@/types/collaboration";
+import { Users, X } from "lucide-react";
+
+const GuestsTab: React.FC<{ guests: Guest[] }> = ({ guests }) => {
+    return (
+        <div>
+            <div className="mb-6">
+                <h2 className="text-white text-xl font-semibold mb-2">Guests ({guests.length})</h2>
+                <p className="text-gray-400 text-sm bg-neutral-800 border border-neutral-700 rounded p-3">
+                    Guests can only view and edit the boards to which they've been added.
+                </p>
+            </div>
+
+            {guests.length === 0 ? (
+                <div className="text-center py-12">
+                    <Users size={48} className="text-gray-600 mx-auto mb-3" />
+                    <p className="text-gray-400">No guests in this workspace</p>
+                </div>
+            ) : (
+                <div className="space-y-3">
+                    {guests.map((guest) => (
+                        <div key={guest.id} className="flex items-center justify-between py-3 border-b border-neutral-700">
+                            <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center text-white font-semibold">
+                                    {guest.name.substring(0, 2).toUpperCase()}
+                                </div>
+                                <div>
+                                    <div className="text-white font-medium">{guest.name}</div>
+                                    <div className="text-gray-400 text-sm">
+                                        {guest.username} • Last active {guest.lastActive}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-4">
+                                <button className="text-gray-400 hover:text-white text-sm">
+                                    View boards ({guest.boardCount})
+                                </button>
+                                <button className="text-gray-400 hover:text-white">
+                                    <X size={18} />
+                                </button>
+                                <button className="text-gray-400 hover:text-white text-sm">Remove...</button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default GuestsTab;