From 7dfaacd28e9b9ccb3b39057ef5f629d422f2802e Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Wed, 2 Jul 2025 18:11:31 +0530
Subject: [PATCH] refactor(enhanced-kanban): update drag-and-drop functionality
 in EnhancedKanbanBoardNativeDnD

- Added `idx` prop to TaskCard for better task index management during drag-and-drop.
- Adjusted drop indicator styling for improved visibility.
- Commented out unused drag-and-drop handlers in KanbanGroup for clarity.
---
 .../EnhancedKanbanBoardNativeDnD.tsx             | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index 53cbdae4..9b65f73d 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -22,21 +22,22 @@ const TaskCard: React.FC<{
   onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
   groupId: string;
   isDropIndicator: boolean;
-}> = ({ task, onTaskDragStart, onTaskDragOver, onTaskDrop, groupId, isDropIndicator }) => {
+  idx: number;
+}> = ({ task, onTaskDragStart, onTaskDragOver, onTaskDrop, groupId, isDropIndicator, idx }) => {
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
   const background = themeMode === 'dark' ? '#23272f' : '#fff';
   const color = themeMode === 'dark' ? '#fff' : '#23272f';
   return (
     <>
       {isDropIndicator && (
-        <div style={{ height: 32, margin: '8px 0', background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', borderRadius: 6, border: `2px dashed ${themeMode === 'dark' ? '#555' : '#bbb'}` }} />
+        <div style={{ height: 80, margin: '8px 0', background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', borderRadius: 6, border: `5px` }} />
       )}
       <div
         className="enhanced-kanban-task-card"
         draggable
         onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
-        onDragOver={e => onTaskDragOver(e, groupId, -1)}
-        onDrop={e => onTaskDrop(e, groupId, -1)}
+        onDragOver={e => onTaskDragOver(e, groupId, idx)}
+        onDrop={e => onTaskDrop(e, groupId, idx)}
         style={{ background, color }}
       >
         <div className="task-content">
@@ -86,8 +87,8 @@ const KanbanGroup: React.FC<{
         <span className="task-count">{group.tasks.length}</span>
       </div>
       <div className="enhanced-kanban-group-tasks"
-        onDragOver={e => onTaskDragOver(e, group.id, 0)}
-        onDrop={e => onTaskDrop(e, group.id, 0)}
+        // onDragOver={e => onTaskDragOver(e, group.id, 0)}
+        // onDrop={e => onTaskDrop(e, group.id, 0)}
       >
         {/* Drop indicator at the top of the group */}
         {hoveredGroupId === group.id && hoveredTaskIdx === 0 && (
@@ -101,7 +102,8 @@ const KanbanGroup: React.FC<{
               onTaskDragOver={onTaskDragOver}
               onTaskDrop={onTaskDrop}
               groupId={group.id}
-              isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx + 1}
+              isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
+              idx={idx}
             />
           </React.Fragment>
         ))}