taskphase crate and delete

src/pages/taskmanager/workspace.tsx

@@ -1,5 +1,6 @@
-import { useMemo, useState, type FC } from "react";
+import { useEffect, useMemo, useState, type FC } from "react";
 import { useParams } from "react-router-dom";
+import PageLoading from "../../components/PageLoading";
 import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
@@ -7,14 +8,29 @@ import TaskDetailModal from "./components/task-detail/TaskDetailModal";
 import tasksData from "./data/tasks.json";
 import { useGetProject } from "./project/hooks/useProjectData";
 import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
-import type { Task, WorkspaceData } from "./types";
+import type { Column as ColumnType, Task } from "./types";
 import { reorderColumns } from "./utils/reorderColumns";
 import { reorderTasks } from "./utils/reorderTasks";
 
 const Workspace: FC = () => {
   const { slug: projectId = "" } = useParams<{ slug: string }>();
-  const { data: project } = useGetProject(projectId);
-  const [columns, setColumns] = useState((tasksData as WorkspaceData).columns);
+  const { data: project, isPending } = useGetProject(projectId);
+  const [columns, setColumns] = useState<ColumnType[]>([]);
+
+  useEffect(() => {
+    if (!project?.data?.taskPhases) return;
+
+    setColumns(
+      [...project.data.taskPhases]
+        .sort((a, b) => a.order - b.order)
+        .map((phase) => ({
+          id: phase.id,
+          title: phase.name,
+          color: phase.color,
+          order: phase.order,
+        })),
+    );
+  }, [project?.data?.taskPhases]);
   const [tasks, setTasks] = useState<Task[]>(tasksData.tasks as Task[]);
   const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
   const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
@@ -77,6 +93,10 @@ const Workspace: FC = () => {
 
   const selectedTaskColumn = selectedTask ? columns.find((column) => column.id === selectedTask.columnId) : null;
 
+  if (isPending) {
+    return <PageLoading />;
+  }
+
   return (
     <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
@@ -86,6 +106,7 @@ const Workspace: FC = () => {
             <Column
               key={column.id}
               column={column}
+              projectId={projectId}
               tasks={tasksByColumn[column.id] ?? []}
               draggedTaskId={draggedTaskId}
               draggedColumnId={draggedColumnId}