detail modal task

src/pages/taskmanager/workspace.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState, type FC } from "react";
 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 { Task, WorkspaceData } from "./types";
 import { reorderTasks } from "./utils/reorderTasks";
@@ -10,6 +11,7 @@ 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 [selectedTask, setSelectedTask] = useState<Task | null>(null);
 
   const tasksByColumn = useMemo(() => {
     return columns.reduce<Record<string, Task[]>>((acc, column) => {
@@ -34,6 +36,10 @@ const Workspace: FC = () => {
     setDraggedTaskId(null);
   };
 
+  const selectedTaskColumn = selectedTask
+    ? columns.find((column) => column.id === selectedTask.columnId)
+    : null;
+
   return (
     <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
@@ -47,11 +53,19 @@ const Workspace: FC = () => {
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
             onDrop={handleDrop}
+            onTaskClick={setSelectedTask}
           />
         ))}
 
         <AddNewColumn />
       </div>
+
+      <TaskDetailModal
+        open={selectedTask !== null}
+        task={selectedTask}
+        statusLabel={selectedTaskColumn?.title ?? ""}
+        onClose={() => setSelectedTask(null)}
+      />
     </div>
   );
 };