feat: Add category deletion functionality in Kanban board

Author: batdimoiprint

src/components/kanban/KanbanBoard.tsx

@@ -401,6 +401,26 @@ export default function KanbanBoard({ projectId }: KanbanBoardProps) {
         }
     };
 
+    const handleDeleteCategory = async (categoryId: string) => {
+        if (!projectId) {
+            setError('No project selected');
+            return;
+        }
+
+        try {
+            setLoading(true);
+            await categoriesApi.deleteCategory(categoryId);
+
+            // Remove column from state
+            setColumns(cols => cols.filter(col => col.id !== categoryId));
+        } catch (e: unknown) {
+            const msg = (e as Error)?.message || 'Failed to delete category';
+            setError(msg);
+        } finally {
+            setLoading(false);
+        }
+    };
+
     const handleTaskClick = async (task: Task) => {
         console.log('Task clicked:', task);
         setSelectedTask(task);
@@ -480,6 +500,7 @@ export default function KanbanBoard({ projectId }: KanbanBoardProps) {
                             column={column}
                             onAddTask={handleAddTask}
                             onTaskClick={handleTaskClick}
+                            onDeleteColumn={handleDeleteCategory}
                         />
                     ))}
                     <div className={styles.kanbanAddColumn}>

src/components/kanban/KanbanColumn.tsx

@@ -1,7 +1,7 @@
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Button, Text } from '@fluentui/react-components';
-import { Add20Regular } from '@fluentui/react-icons';
+import { Add20Regular, Delete20Regular } from '@fluentui/react-icons';
 import { mainLayoutStyles } from '../styles/Styles';
 import KanbanCard, { type Task } from './KanbanCard';
 
@@ -15,9 +15,10 @@ interface KanbanColumnProps {
     column: Column;
     onAddTask?: (columnId: string) => void;
     onTaskClick?: (task: Task) => void;
+    onDeleteColumn?: (columnId: string) => void;
 }
 
-export default function KanbanColumn({ column, onAddTask, onTaskClick }: KanbanColumnProps) {
+export default function KanbanColumn({ column, onAddTask, onTaskClick, onDeleteColumn }: KanbanColumnProps) {
     const styles = mainLayoutStyles();
     const { setNodeRef, isOver } = useDroppable({
         id: column.id,
@@ -34,14 +35,24 @@ export default function KanbanColumn({ column, onAddTask, onTaskClick }: KanbanC
                 <Text className={styles.kanbanColumnTitle}>
                     {column.title} ({column.tasks.length})
                 </Text>
-                {onAddTask && (
-                    <Button
-                        appearance="transparent"
-                        icon={<Add20Regular />}
-                        size="small"
-                        onClick={() => onAddTask(column.id)}
-                    />
-                )}
+                <div style={{ display: 'flex', gap: '4px' }}>
+                    {onAddTask && (
+                        <Button
+                            appearance="transparent"
+                            icon={<Add20Regular />}
+                            size="small"
+                            onClick={() => onAddTask(column.id)}
+                        />
+                    )}
+                    {onDeleteColumn && (
+                        <Button
+                            appearance="transparent"
+                            icon={<Delete20Regular />}
+                            size="small"
+                            onClick={() => onDeleteColumn(column.id)}
+                        />
+                    )}
+                </div>
             </div>
 
             <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>

src/pages/project/KanbanPage.tsx

@@ -28,11 +28,8 @@ export default function KanbanPage() {
             .finally(() => setLoadingProject(false));
     }, [decodedName]);
 
-    const title = decodedName || 'Project';
-
     return (
         <Card className={`${styles.artifCard} ${styles.layoutPadding} ${styles.flexColFit} ${styles.gap}`}>
-            <h1 className={styles.pageTitle}>{title} - Kanban</h1>
             {projectError && (
                 <div style={{ color: tokens.colorPaletteRedForeground3 }}>{projectError}</div>
             )}

src/pages/project/ProjectPage.tsx

@@ -20,7 +20,7 @@ import {
   Dropdown,
   Option,
 } from '@fluentui/react-components';
-import { AddCircle20Regular, ChevronDown12Regular } from '@fluentui/react-icons';
+import { AddCircle20Regular } from '@fluentui/react-icons';
 import { useParams, useNavigate, useOutletContext } from 'react-router-dom';
 import { projectsApi, type Project } from '../../components/apis/projects';
 import { usersApi } from '../../components/apis/users';
@@ -411,7 +411,7 @@ export default function ProjectPage() {
                       {/* Permission access not shown */}
                       <TableCell>
                         <div className={styles.personaRow} style={{ gap: tokens.spacingHorizontalXXS }}>
-                          <ChevronDown12Regular />
+
                           <span>{formatDate(member.joinedAt)}</span>
                         </div>
                       </TableCell>