drag and drop

src/pages/taskmanager/workspace.tsx

@@ -1,28 +1,54 @@
-import { type FC } from "react";
+import { useMemo, useState, type FC } from "react";
 import AddNewColumn from "./components/AddNewColumn";
 import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
-import Task from "./components/Task";
+import tasksData from "./data/tasks.json";
+import type { Task, WorkspaceData } from "./types";
+import { reorderTasks } from "./utils/reorderTasks";
 
 const Workspace: FC = () => {
+  const { columns } = tasksData as WorkspaceData;
+  const [tasks, setTasks] = useState<Task[]>(tasksData.tasks as Task[]);
+  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
+
+  const tasksByColumn = useMemo(() => {
+    return columns.reduce<Record<string, Task[]>>((acc, column) => {
+      acc[column.id] = tasks
+        .filter((task) => task.columnId === column.id)
+        .sort((a, b) => a.order - b.order);
+      return acc;
+    }, {});
+  }, [columns, tasks]);
+
+  const handleDragStart = (taskId: string) => {
+    setDraggedTaskId(taskId);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedTaskId(null);
+  };
+
+  const handleDrop = (columnId: string, index: number) => {
+    if (!draggedTaskId) return;
+    setTasks((prev) => reorderTasks(prev, draggedTaskId, columnId, index));
+    setDraggedTaskId(null);
+  };
+
   return (
     <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
       <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-auto pb-6 items-start">
-        <Column title="برای انجام">
-          <div className="flex flex-col gap-4">
-            <Task />
-            <Task />
-            <Task />
-          </div>
-        </Column>
-
-        <Column title="درحال انجام" />
-        <Column title="انجام شده">
-          <div className="flex flex-col gap-4">
-            <Task />
-          </div>
-        </Column>
+        {columns.map((column) => (
+          <Column
+            key={column.id}
+            column={column}
+            tasks={tasksByColumn[column.id] ?? []}
+            draggedTaskId={draggedTaskId}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDrop={handleDrop}
+          />
+        ))}
 
         <AddNewColumn />
       </div>