CREATE AND DELETE column

src/pages/taskmanager/workspace.tsx

@@ -1,14 +1,17 @@
 import { useMemo, useState, type FC } from "react";
+import { useParams } from "react-router-dom";
 import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
 import TaskDetailModal from "./components/task-detail/TaskDetailModal";
 import tasksData from "./data/tasks.json";
+import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
 import type { Task, WorkspaceData } from "./types";
 import { reorderColumns } from "./utils/reorderColumns";
 import { reorderTasks } from "./utils/reorderTasks";
 
 const Workspace: FC = () => {
+  const { slug: projectId = "" } = useParams<{ slug: string }>();
   const [columns, setColumns] = useState(
     (tasksData as WorkspaceData).columns,
   );
@@ -54,6 +57,26 @@ const Workspace: FC = () => {
     setDraggedColumnId(null);
   };
 
+  const handleColumnCreated = (phase: TaskPhaseItemType) => {
+    setColumns((prev) => [
+      ...prev,
+      {
+        id: phase.id,
+        title: phase.name,
+        color: phase.color,
+        order: phase.order,
+      },
+    ]);
+  };
+
+  const handleColumnDeleted = (columnId: string) => {
+    setColumns((prev) => prev.filter((column) => column.id !== columnId));
+    setTasks((prev) => prev.filter((task) => task.columnId !== columnId));
+    if (selectedTask?.columnId === columnId) {
+      setSelectedTask(null);
+    }
+  };
+
   const selectedTaskColumn = selectedTask
     ? columns.find((column) => column.id === selectedTask.columnId)
     : null;
@@ -77,10 +100,15 @@ const Workspace: FC = () => {
               onColumnDragEnd={handleColumnDragEnd}
               onColumnDrop={handleColumnDrop}
               onTaskClick={setSelectedTask}
+              onColumnDeleted={handleColumnDeleted}
             />
           ))}
 
-          <AddNewColumn />
+          <AddNewColumn
+            projectId={projectId}
+            nextOrder={columns.length}
+            onColumnCreated={handleColumnCreated}
+          />
         </div>
       </div>