detail modal task

src/pages/taskmanager/components/Task.tsx

@@ -1,5 +1,5 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
-import { type FC } from "react";
+import { useRef, type FC } from "react";
 import type { Task as TaskType } from "../types";
 
 type Props = {
@@ -7,14 +7,31 @@ type Props = {
   isDragging?: boolean;
   onDragStart: (taskId: string) => void;
   onDragEnd: () => void;
+  onClick?: (task: TaskType) => void;
 };
 
-const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd }) => {
+const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd, onClick }) => {
+  const hasDraggedRef = useRef(false);
+
+  const handleClick = () => {
+    if (hasDraggedRef.current) return;
+    onClick?.(task);
+  };
+
   return (
     <div
       draggable
-      onDragStart={() => onDragStart(task.id)}
-      onDragEnd={onDragEnd}
+      onDragStart={() => {
+        hasDraggedRef.current = true;
+        onDragStart(task.id);
+      }}
+      onDragEnd={() => {
+        onDragEnd();
+        requestAnimationFrame(() => {
+          hasDraggedRef.current = false;
+        });
+      }}
+      onClick={handleClick}
       className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity ${
         isDragging ? "opacity-40" : ""
       }`}