Add member profile page and enhance user navigation

- Implemented MemberProfile component to display user details.
- Integrated user fetching logic based on user ID from URL parameters.
- Updated routing to include member profile navigation.
- Enhanced task list and project pages with improved user interaction.

Author: batdimoiprint

src/components/auth/Register.tsx

@@ -617,6 +617,7 @@ export default function Register() {
                         <Text className={styles.errorText}>{errors.birthDate.message}</Text>
                     )}
                 </div>
+
             </div>
         </div>
     );

src/components/dialogs/CreateMainTaskDialog.tsx

@@ -60,6 +60,27 @@ export interface CreateMainTaskDialogProps {
     onSubTaskCreated?: () => void;
 }
 
+// Helper to convert YYYY-MM-DD string or ISO string to Date object
+function parseFormDate(dateStr: string): Date | undefined {
+    if (!dateStr) return undefined;
+    // If already an ISO string (contains 'T'), parse directly
+    if (dateStr.includes('T')) {
+        const date = new Date(dateStr);
+        return isNaN(date.getTime()) ? undefined : date;
+    }
+    // Otherwise, assume YYYY-MM-DD format
+    const date = new Date(dateStr + 'T00:00:00');
+    return isNaN(date.getTime()) ? undefined : date;
+}
+
+// Helper to convert Date to YYYY-MM-DD string using local timezone
+function formatDateToString(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
 export default function CreateMainTaskDialog({
     open,
     onOpenChange,
@@ -163,6 +184,14 @@ export default function CreateMainTaskDialog({
         }
     }
 
+    function handleStartDateSelect(date: Date): void {
+        onDateChange('startDate', formatDateToString(date));
+    }
+
+    function handleEndDateSelect(date: Date): void {
+        onDateChange('endDate', formatDateToString(date));
+    }
+
     const handleAddSubTask = () => {
         if (!mainTaskId) {
             alert('Please create the Main Task first before adding SubTasks');
@@ -345,17 +374,25 @@ export default function CreateMainTaskDialog({
                         <Field label="Start Date" style={{ flex: '1 1 200px' }}>
                             <DatePicker
                                 placeholder="mm/dd/yyyy"
-                                value={form.startDate ? new Date(form.startDate) : null}
-                                onSelectDate={(date) => onDateChange('startDate', date ? date.toISOString().split('T')[0] : '')}
+                                value={parseFormDate(form.startDate)}
+                                onSelectDate={(date) => {
+                                    if (date) {
+                                        handleStartDateSelect(date);
+                                    }
+                                }}
                                 size="medium"
                                 style={{ width: '100%' }}
                             />
                         </Field>
                         <Field label="End Date" style={{ flex: '1 1 200px' }}>
                             <DatePicker
                                 placeholder="mm/dd/yyyy"
-                                value={form.endDate ? new Date(form.endDate) : null}
-                                onSelectDate={(date) => onDateChange('endDate', date ? date.toISOString().split('T')[0] : '')}
+                                value={parseFormDate(form.endDate)}
+                                onSelectDate={(date) => {
+                                    if (date) {
+                                        handleEndDateSelect(date);
+                                    }
+                                }}
                                 size="medium"
                                 style={{ width: '100%' }}
                             />

src/components/kanban/KanbanBoard.tsx

@@ -151,9 +151,11 @@ export default function KanbanBoard({ projectId }: KanbanBoardProps) {
                     .filter(t => !t.categoryId)
                     .map(mapTaskResponse);
 
-                const cols = uncategorized.length
-                    ? [{ id: 'uncategorized', title: 'Uncategorized', tasks: uncategorized }, ...columnsFromCategories]
-                    : [...columnsFromCategories];
+                // Always show uncategorized column, even if empty
+                const cols = [
+                    { id: 'uncategorized', title: 'Uncategorized', tasks: uncategorized },
+                    ...columnsFromCategories
+                ];
 
                 setColumns(cols);
             })

src/components/kanban/KanbanColumn.tsx

@@ -112,7 +112,11 @@ export default function KanbanColumn({ column, onTaskClick, onDeleteColumn, onUp
                             appearance="transparent"
                             icon={<Delete20Regular />}
                             size="small"
-                            onClick={() => onDeleteColumn(column.id)}
+                            onClick={() => {
+                                if (window.confirm(`Are you sure you want to delete the category "${column.title}"? `)) {
+                                    onDeleteColumn(column.id);
+                                }
+                            }}
                         />
                     )}
                 </div>

src/components/sidebar/ProjectList.tsx

@@ -16,7 +16,6 @@ const useProjectListStyles = makeStyles({
         overflowX: "hidden",
         display: "flex",
         flexDirection: "column",
-        gap: tokens.spacingVerticalXS,
     },
     sectionHeader: {
         display: 'flex',
@@ -29,7 +28,7 @@ const useProjectListStyles = makeStyles({
         paddingBlock: tokens.spacingVerticalS,
         display: 'flex',
         alignItems: 'center',
-        gap: tokens.spacingHorizontalS,
+        background: tokens.colorNeutralBackground2,
     },
     navItemLabel: {
         overflow: 'hidden',
@@ -39,8 +38,9 @@ const useProjectListStyles = makeStyles({
         maxWidth: '100%'
     },
     selectedItem: {
-        backgroundColor: tokens.colorNeutralBackground3,
-        borderRadius: tokens.borderRadiusMedium,
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        color: tokens.colorBrandBackground,
+        fontWeight: tokens.fontWeightBold
     },
 });
 

src/layout/UserLayout.tsx

@@ -21,6 +21,7 @@ export default function UserLayout() {
     const isProjectRoot = normalizedPath === "/home/project";
     const isProjectWithName = /^\/home\/project\/[^/]+(\/.*)?$/.test(normalizedPath);
     const isCreate = normalizedPath === "/home/create";
+    const isMemberProfile = normalizedPath === "/home/member";
 
     return (
         <main className={mergeClasses(s.userLayout,
@@ -32,7 +33,7 @@ export default function UserLayout() {
 
             <section className={mergeClasses(s.contentsLayout)}>
 
-                {!isProfile && !isProjectRoot && !isCreate && (
+                {!isProfile && !isProjectRoot && !isCreate && !isMemberProfile && (
                     <div className={s.largeGap}>
                         {isHome ? (
                             <HomeHeader />
@@ -43,9 +44,9 @@ export default function UserLayout() {
                                 <NavigationHeader />
                             </>
                         )}
-
                     </div>
                 )}
+
                 <Outlet context={{ bumpProjects: () => setProjectsRefreshCounter((c: number) => c + 1), projectsRefreshCounter }} />
             </section >
         </main >

src/pages/project/ProjectListPage.tsx

@@ -68,7 +68,7 @@ export default function ProjectListPage() {
                     <Label>Projects List</Label>
                 </div>
                 <div className={mergeClasses(styles.actionsRight, styles.alignCenter)}>
-                    <Button appearance="primary" onClick={() => navigate('/home/project/create')}>
+                    <Button appearance="primary" onClick={() => navigate('/home/create')}>
                         Create Project
                     </Button>
 

src/pages/project/ProjectPage.tsx

@@ -489,12 +489,15 @@ export default function ProjectPage() {
                   <TableRow>
                     <TableHeaderCell>Member Name</TableHeaderCell>
                     <TableHeaderCell>Email</TableHeaderCell>
-                    <TableHeaderCell>Actions</TableHeaderCell>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {members.map((member) => (
-                    <TableRow key={member.id}>
+                    <TableRow
+                      key={member.id}
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => navigate(`/home/member?userId=${member.id}`)}
+                    >
                       <TableCell>
                         <div className={styles.personaRow}>
                           <Avatar size={32} name={member.displayName} color="colorful" />
@@ -510,7 +513,10 @@ export default function ProjectPage() {
                           <Button
                             appearance="secondary"
                             size="small"
-                            onClick={() => handleRemoveMember(member.id)}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleRemoveMember(member.id);
+                            }}
                             disabled={actionLoading}
                           >
                             Remove Member

src/pages/project/TaskListPage.tsx

@@ -171,16 +171,15 @@ export default function TaskListPage() {
                 const findSlug = (name: string) => encodeURIComponent(name.trim().toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'));
                 const matched = all.find(p => findSlug(p.projectName) === (titleSlug ? titleSlug.replace(/-/g, '-') : ''));
                 if (matched) {
+                    console.log('Project matched:', matched, 'ID:', matched.id);
                     setProject(matched);
-                    // Load categories and users for this project
+                    // Load categories for this project
                     if (matched.id) {
                         setIsLoadingCategories(true);
                         categoriesApi.getCategoriesByProject(matched.id)
                             .then(cats => { if (active) setCategories(cats); })
                             .catch(err => console.error('Failed to load categories:', err))
                             .finally(() => { if (active) setIsLoadingCategories(false); });
-
-                        fetchAssignableUsers();
                     }
                 } else {
                     setError('Project not found');
@@ -197,6 +196,15 @@ export default function TaskListPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [titleSlug]);
 
+    // Fetch assignable users when project is loaded
+    useEffect(() => {
+        if (project?.id) {
+            console.log('Project state updated, fetching assignable users with ID:', project.id);
+            fetchAssignableUsers();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [project?.id]);
+
     useEffect(() => {
         if (project?.id) {
             loadMainTasks();
@@ -353,9 +361,13 @@ export default function TaskListPage() {
         try {
             let unique: User[] = [];
 
+            console.log('fetchAssignableUsers started, project.id:', project?.id);
+
             if (project?.id) {
                 try {
                     const projectMembers = await projectsApi.getProjectMembers(project.id);
+                    console.log('Project members fetched:', projectMembers);
+
                     unique = projectMembers.map(member => ({
                         id: member.id,
                         userName: member.userName,
@@ -365,17 +377,22 @@ export default function TaskListPage() {
                         email: member.email,
                         userIMG: member.userIMG,
                     } as User));
+                    console.log('Project members mapped to User objects:', unique);
                 } catch (projectErr) {
                     console.error('Failed to fetch project members:', projectErr);
                 }
+            } else {
+                console.warn('No project ID available');
             }
 
-            if (user && !unique.some((u) => u.id === user.id)) unique.push(user);
+            console.log('Final assignable users list:', unique);
             setAssignableUsers(unique);
+            console.log('setAssignableUsers state updated');
         } catch (err) {
             console.error('Failed to fetch users:', err);
         } finally {
             setIsLoadingAssignableUsers(false);
+            console.log('fetchAssignableUsers completed, loading state set to false');
         }
     }