outside click tab

src/pages/taskmanager/components/Column.tsx

@@ -1,3 +1,4 @@
+import { Draggable, Droppable } from "@hello-pangea/dnd";
 import { Add, AddCircle, CloseCircle } from "iconsax-react";
 import { useMemo, useRef, useState, type FC } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,11 +16,7 @@ import Task from "./Task";
 type Props = {
   column: ColumnType;
   projectId: string;
-  draggedTaskId: string | null;
   draggedColumnId: string | null;
-  onDragStart: (task: TaskType) => void;
-  onDragEnd: () => void;
-  onDrop: (columnId: string, index: number) => void;
   onColumnDragStart: (columnId: string) => void;
   onColumnDragEnd: () => void;
   onColumnDrop: (overColumnId: string) => void;
@@ -30,11 +27,7 @@ type Props = {
 const Column: FC<Props> = ({
   column,
   projectId,
-  draggedTaskId,
   draggedColumnId,
-  onDragStart,
-  onDragEnd,
-  onDrop,
   onColumnDragStart,
   onColumnDragEnd,
   onColumnDrop,
@@ -63,7 +56,6 @@ const Column: FC<Props> = ({
   const [isAdding, setIsAdding] = useState(false);
   const [title, setTitle] = useState("");
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
-  const [isDragOver, setIsDragOver] = useState(false);
   const [isColumnDragOver, setIsColumnDragOver] = useState(false);
   const columnRef = useRef<HTMLDivElement>(null);
   const dragImageRef = useRef<HTMLElement | null>(null);
@@ -94,11 +86,7 @@ const Column: FC<Props> = ({
       dragImageRef.current = clone;
 
       const rect = columnEl.getBoundingClientRect();
-      e.dataTransfer.setDragImage(
-        clone,
-        e.clientX - rect.left,
-        e.clientY - rect.top,
-      );
+      e.dataTransfer.setDragImage(clone, e.clientX - rect.left, e.clientY - rect.top);
       e.dataTransfer.effectAllowed = "move";
     }
 
@@ -113,28 +101,6 @@ const Column: FC<Props> = ({
     onColumnDragEnd();
   };
 
-  const handleDragOver = (e: React.DragEvent) => {
-    if (draggedColumnId) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    setIsDragOver(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    if (draggedColumnId) return;
-    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-      setIsDragOver(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent, index: number) => {
-    if (draggedColumnId) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-    onDrop(column.id, index);
-  };
-
   const handleColumnDragOver = (e: React.DragEvent) => {
     if (!draggedColumnId || draggedColumnId === column.id) return;
     e.preventDefault();
@@ -204,25 +170,12 @@ const Column: FC<Props> = ({
   return (
     <div
       ref={columnRef}
-      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col max-h-[calc(100dvh-140px)] sm:max-h-[calc(100dvh-152px)] xl:max-h-[calc(100dvh-220px)] transition-colors ${
-        isDragOver ? "ring-2 ring-primary/40" : ""
-      } ${isColumnDragOver ? "ring-2 ring-black/30" : ""} ${
-        isDraggingColumn ? "opacity-50" : ""
-      }`}
-      onDragOver={(e) => {
-        handleColumnDragOver(e);
-        handleDragOver(e);
-      }}
-      onDragLeave={(e) => {
-        handleColumnDragLeave(e);
-        handleDragLeave(e);
-      }}
-      onDrop={(e) => {
-        handleColumnDrop(e);
-        if (!draggedColumnId) {
-          handleDrop(e, tasks.length);
-        }
-      }}
+      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col h-full min-h-0 transition-colors ${
+        isColumnDragOver ? "ring-2 ring-black/30" : ""
+      } ${isDraggingColumn ? "opacity-50" : ""}`}
+      onDragOver={handleColumnDragOver}
+      onDragLeave={handleColumnDragLeave}
+      onDrop={handleColumnDrop}
     >
       <div className="flex justify-between items-center shrink-0 gap-2">
         <div
@@ -244,35 +197,49 @@ const Column: FC<Props> = ({
         label={t("taskmanager.delete_column_confirm")}
       />
 
-      <div
-        className="mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-0 overflow-y-auto overscroll-y-contain flex flex-col gap-3 sm:gap-4"
-        onScroll={handleTasksScroll}
-      >
-        {isTasksPending
-          ? null
-          : tasks.map((task, index) => (
-              <div
-                key={task.id}
-                onDragOver={(e) => {
-                  if (draggedColumnId) return;
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onDrop={(e) => handleDrop(e, index)}
-              >
-                <Task
-                  task={task}
-                  isDragging={draggedTaskId === task.id}
-                  onDragStart={onDragStart}
-                  onDragEnd={onDragEnd}
-                  onClick={onTaskClick}
-                />
-              </div>
-            ))}
-        {isFetchingNextPage ? (
-          <div className="text-center text-description text-xs py-2">{t("loading")}</div>
-        ) : null}
-      </div>
+      <Droppable droppableId={column.id} type="TASK" isDropDisabled={!!draggedColumnId}>
+        {(provided, snapshot) => (
+          <div
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+            onScroll={handleTasksScroll}
+            className={`mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-[80px] overflow-y-auto overscroll-y-contain rounded-lg transition-colors ${
+              snapshot.isDraggingOver ? "bg-primary/5 ring-2 ring-primary/30" : ""
+            }`}
+          >
+            {isTasksPending
+              ? null
+              : tasks.map((task, index) => (
+                  <Draggable
+                    key={task.id}
+                    draggableId={task.id}
+                    index={index}
+                    isDragDisabled={!!draggedColumnId}
+                  >
+                    {(dragProvided, dragSnapshot) => (
+                      <div
+                        ref={dragProvided.innerRef}
+                        {...dragProvided.draggableProps}
+                        {...dragProvided.dragHandleProps}
+                        className="mb-3 sm:mb-4"
+                        style={dragProvided.draggableProps.style}
+                      >
+                        <Task
+                          task={task}
+                          isDragging={dragSnapshot.isDragging}
+                          onClick={onTaskClick}
+                        />
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+            {provided.placeholder}
+            {isFetchingNextPage ? (
+              <div className="text-center text-description text-xs py-2">{t("loading")}</div>
+            ) : null}
+          </div>
+        )}
+      </Droppable>
 
       {isAdding ? (
         <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">

src/pages/taskmanager/components/Task.tsx

@@ -1,39 +1,35 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
-import { useRef, type FC } from "react";
+import { useEffect, useRef, type FC } from "react";
 import type { Task as TaskType } from "../types";
 
 type Props = {
   task: TaskType;
   isDragging?: boolean;
-  onDragStart: (task: TaskType) => void;
-  onDragEnd: () => void;
   onClick?: (task: TaskType) => void;
 };
 
-const Task: FC<Props> = ({ task, isDragging, onDragStart, onDragEnd, onClick }) => {
-  const hasDraggedRef = useRef(false);
+const Task: FC<Props> = ({ task, isDragging, onClick }) => {
+  const suppressClickRef = useRef(false);
+
+  useEffect(() => {
+    if (isDragging) {
+      suppressClickRef.current = true;
+    }
+  }, [isDragging]);
 
   const handleClick = () => {
-    if (hasDraggedRef.current) return;
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
     onClick?.(task);
   };
 
   return (
     <div
-      draggable
-      onDragStart={() => {
-        hasDraggedRef.current = true;
-        onDragStart(task);
-      }}
-      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" : ""
+      className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity touch-manipulation ${
+        isDragging ? "opacity-40 shadow-lg" : ""
       }`}
     >
       {task.color ? <div className="h-10 rounded-lg" style={{ backgroundColor: task.color }} /> : null}

src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx

@@ -84,7 +84,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
 
       {(Object.keys(popoverByTab) as PopoverTab[]).map((tab) =>
         popoverByTab[tab] ? (
-          <TaskDetailPopoverPanel key={tab} anchorRef={anchorRefs.current[tab]}>
+          <TaskDetailPopoverPanel key={tab} anchorRef={anchorRefs.current[tab]} onClose={() => onTabChange(tab)}>
             {popoverByTab[tab]}
           </TaskDetailPopoverPanel>
         ) : null,

src/pages/taskmanager/components/task-detail/TaskDetailPopoverPanel.tsx

@@ -1,4 +1,4 @@
-import { type FC, type ReactNode, useLayoutEffect, useState } from "react";
+import { type FC, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { clx } from "../../../../helpers/utils";
 
@@ -7,10 +7,12 @@ type Props = {
   children: ReactNode;
   className?: string;
   width?: number;
+  onClose?: () => void;
 };
 
-const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, width = 300 }) => {
+const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, width = 300, onClose }) => {
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     const updatePosition = () => {
@@ -38,10 +40,25 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
     };
   }, [anchorRef, width]);
 
+  useEffect(() => {
+    if (!onClose) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (panelRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [anchorRef, onClose]);
+
   if (!position) return null;
 
   return createPortal(
     <div
+      ref={panelRef}
       style={{ top: position.top, left: position.left, width }}
       className={clx("fixed z-[80] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80", className)}
     >

src/pages/taskmanager/workspace.tsx

@@ -1,3 +1,4 @@
+import { DragDropContext, type DragStart, type DropResult } from "@hello-pangea/dnd";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState, type FC } from "react";
 import { useParams } from "react-router-dom";
@@ -12,6 +13,8 @@ import { useGetProject } from "./project/hooks/useProjectData";
 import { useUpdateTaskPhase } from "./task-phase/hooks/useTaskPhaseData";
 import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes";
 import { useChangeTaskPhase, useChangeTaskPriority } from "./task/hooks/useTaskData";
+import type { TaskItemType } from "./task/types/TaskTypes";
+import { mapTaskItemToTask } from "./task/utils/mapTaskItemToTask";
 import type { Column as ColumnType, Task } from "./types";
 import { getPriorityDestinationTaskId } from "./utils/getPriorityDestinationTaskId";
 import { reorderColumns } from "./utils/reorderColumns";
@@ -45,22 +48,21 @@ const Workspace: FC = () => {
     );
   }, [project?.data?.taskPhases]);
 
-  const handleDragStart = (task: Task) => {
-    setDraggedTask(task);
+  const handleTaskDragStart = (start: DragStart) => {
+    if (start.type !== "TASK") return;
+
+    const sourceColumnId = start.source.droppableId;
+    const previousData = queryClient.getQueryData<TasksByTaskPhaseInfiniteData>(["tasks-by-task-phase", sourceColumnId]);
+    const items = getTaskPhaseItems(previousData);
+    const item = items.find((task) => task.id === start.draggableId);
+    if (!item) return;
+
+    setDraggedTask(mapTaskItemToTask(item as TaskItemType, sourceColumnId, start.source.index));
   };
 
-  const handleDragEnd = () => {
-    setDraggedTask(null);
-  };
-
-  const handleDrop = (columnId: string, index: number) => {
-    if (!draggedTask) return;
-
-    const sourceColumnId = draggedTask.columnId;
+  const handleDrop = (columnId: string, index: number, activeTask: Task) => {
+    const sourceColumnId = activeTask.columnId;
     const columnChanged = sourceColumnId !== columnId;
-    const activeTask = draggedTask;
-
-    setDraggedTask(null);
 
     if (!columnChanged) {
       const previousData = queryClient.getQueryData<TasksByTaskPhaseInfiniteData>(["tasks-by-task-phase", columnId]);
@@ -69,7 +71,9 @@ const Workspace: FC = () => {
 
       if (!destTaskId) return;
 
-      queryClient.setQueryData<TasksByTaskPhaseInfiniteData>(["tasks-by-task-phase", columnId], (current) => updateTaskPhaseItems(current, (items) => reorderTaskItems(items, activeTask.id, index)));
+      queryClient.setQueryData<TasksByTaskPhaseInfiniteData>(["tasks-by-task-phase", columnId], (current) =>
+        updateTaskPhaseItems(current, (items) => reorderTaskItems(items, activeTask.id, index)),
+      );
 
       changeTaskPriority.mutate(
         { srcId: activeTask.id, destId: destTaskId, taskPhaseId: columnId, projectId },
@@ -155,6 +159,18 @@ const Workspace: FC = () => {
     );
   };
 
+  const handleTaskDragEnd = (result: DropResult) => {
+    const activeTask = draggedTask;
+    setDraggedTask(null);
+
+    if (!activeTask || !result.destination || result.type !== "TASK") return;
+
+    const { source, destination } = result;
+    if (source.droppableId === destination.droppableId && source.index === destination.index) return;
+
+    handleDrop(destination.droppableId, destination.index, activeTask);
+  };
+
   const handleTaskPhaseChanged = (taskId: string, taskPhaseId: string) => {
     const sourceColumnId = selectedTask?.columnId;
 
@@ -216,34 +232,34 @@ const Workspace: FC = () => {
   }
 
   return (
-    <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
+    <div className="bg-[#01347A] h-full min-h-0 rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace projectName={project?.data?.name ?? ""} />
-      <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
-        <div className="flex gap-3 sm:gap-4 xl:gap-7 px-3 sm:px-4 xl:px-8 pt-4 xl:pt-6 pb-4 xl:pb-6 h-full items-start w-max min-w-full">
-          {columns.map((column) => (
-            <Column
-              key={column.id}
-              column={column}
-              projectId={projectId}
-              draggedTaskId={draggedTask?.id ?? null}
-              draggedColumnId={draggedColumnId}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-              onDrop={handleDrop}
-              onColumnDragStart={handleColumnDragStart}
-              onColumnDragEnd={handleColumnDragEnd}
-              onColumnDrop={handleColumnDrop}
-              onTaskClick={setSelectedTask}
-              onColumnDeleted={handleColumnDeleted}
-            />
-          ))}
+      <div className="flex-1 min-h-0 flex flex-col px-3 sm:px-4 xl:px-8 py-4 xl:py-6">
+        <DragDropContext onDragStart={handleTaskDragStart} onDragEnd={handleTaskDragEnd}>
+          <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
+            <div className="flex gap-3 sm:gap-4 xl:gap-7 h-full min-h-0 items-stretch w-max min-w-full">
+              {columns.map((column) => (
+                <Column
+                  key={column.id}
+                  column={column}
+                  projectId={projectId}
+                  draggedColumnId={draggedColumnId}
+                  onColumnDragStart={handleColumnDragStart}
+                  onColumnDragEnd={handleColumnDragEnd}
+                  onColumnDrop={handleColumnDrop}
+                  onTaskClick={setSelectedTask}
+                  onColumnDeleted={handleColumnDeleted}
+                />
+              ))}
 
-          <AddNewColumn
-            projectId={projectId}
-            nextOrder={nextColumnOrder}
-            onColumnCreated={handleColumnCreated}
-          />
-        </div>
+              <AddNewColumn
+                projectId={projectId}
+                nextOrder={nextColumnOrder}
+                onColumnCreated={handleColumnCreated}
+              />
+            </div>
+          </div>
+        </DragDropContext>
       </div>
 
       <TaskDetailModal

src/router/Main.tsx

@@ -114,8 +114,8 @@ const MainRouter: FC = () => {
       {!isWorkspace && <SideBar />}
       <Header />
       <div className={clx("flex-1 mt-[68px] xl:mt-[81px]", !isWorkspace && "xl:ms-[269px]", !isWorkspace && hasSubMenu && "xl:ms-[305px]")}>
-        <div className={clx("flex flex-col", isWorkspace ? "h-[calc(100dvh-68px)] xl:h-[calc(100dvh-97px)] overflow-hidden" : "overflow-auto h-[calc(100vh-113px)]")}>
-          <div className={clx("flex-1 min-h-0", isWorkspace && "overflow-hidden")}>
+        <div className={clx("flex flex-col", isWorkspace ? "h-[calc(100dvh-68px)] xl:h-[calc(100dvh-113px)] overflow-hidden" : "overflow-auto h-[calc(100vh-113px)]")}>
+          <div className={clx("flex-1 min-h-0", isWorkspace && "overflow-hidden h-full")}>
             <Routes>
               <Route
                 path={Pages.dashboard}