From e84ab43b366f797a9ab68b5809e3f4c03b1e078d Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Thu, 3 Jul 2025 14:08:09 +0530
Subject: [PATCH] refactor(enhanced-kanban): clean up TaskCard component
 structure

- Reformatted the TaskCard component for improved readability by adjusting indentation and spacing.
- Ensured consistent styling and structure for the drop indicator and task card elements.
- Maintained existing functionality while enhancing code clarity and maintainability.
---
 .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx | 100 +++++++++---------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index f70761c6..45c47d7d 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -4,59 +4,61 @@ import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 
 interface TaskCardProps {
-  task: IProjectTask;
-  onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
-  onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
-  onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
-  groupId: string;
-  isDropIndicator: boolean;
-  idx: number;
+    task: IProjectTask;
+    onTaskDragStart: (e: React.DragEvent, taskId: string, groupId: string) => void;
+    onTaskDragOver: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
+    onTaskDrop: (e: React.DragEvent, groupId: string, taskIdx: number) => void;
+    groupId: string;
+    isDropIndicator: boolean;
+    idx: number;
 }
 
-const TaskCard: React.FC<TaskCardProps> = memo(({ 
-  task, 
-  onTaskDragStart, 
-  onTaskDragOver, 
-  onTaskDrop, 
-  groupId, 
-  isDropIndicator, 
-  idx 
+const TaskCard: React.FC<TaskCardProps> = memo(({
+    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';
+    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: 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, idx)}
-        onDrop={e => onTaskDrop(e, groupId, idx)}
-        style={{ background, color }}
-      >
-        <div className="task-content">
-          <div className="task-title">{task.name}</div>
-          <div className="task-key">{task.task_key}</div>
-          <div className="task-assignees">
-            {task.assignees?.map(a => a.name).join(', ')}
-          </div>
-        </div>
-      </div>
-    </>
-  );
+    return (
+        <>
+            {isDropIndicator && (
+                <div
+                    style={{
+                        height: 80,
+                        background: themeMode === 'dark' ? '#2a2a2a' : '#f0f0f0', 
+                        borderRadius: 6,
+                        border: `5px`
+                    }}
+                    onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
+                    onDragOver={e => onTaskDragOver(e, groupId, idx)}
+                    onDrop={e => onTaskDrop(e, groupId, idx)}
+                />
+            )}
+            <div
+                className="enhanced-kanban-task-card"
+                draggable
+                onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
+                onDragOver={e => onTaskDragOver(e, groupId, idx)}
+                onDrop={e => onTaskDrop(e, groupId, idx)}
+                style={{ background, color }}
+            >
+                <div className="task-content">
+                    <div className="task-title">{task.name}</div>
+                    <div className="task-key">{task.task_key}</div>
+                    <div className="task-assignees">
+                        {task.assignees?.map(a => a.name).join(', ')}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
 });
 
 TaskCard.displayName = 'TaskCard';