From 64f1e5831ab7520bad9c6140c9ea79e6971526cd Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Fri, 4 Jul 2025 07:50:16 +0530
Subject: [PATCH] feat(task-management): enhance TaskGroupHeader and TaskListV2
 for improved task display and reordering

- Updated TaskGroupHeader to display task count alongside group name for better clarity.
- Refactored task reordering logic in TaskListV2 to streamline drag-and-drop functionality across groups.
- Added TypeScript definitions for Heroicons to improve type safety and component usage.
- Adjusted styling in TaskGroupHeader for a more consistent visual presentation.
---
 .../task-list-v2/TaskGroupHeader.tsx          | 13 ++-----
 .../components/task-list-v2/TaskListV2.tsx    | 39 +++++++------------
 .../src/types/heroicons-react.d.ts            |  8 ++++
 3 files changed, 25 insertions(+), 35 deletions(-)
 create mode 100644 worklenz-frontend/src/types/heroicons-react.d.ts

diff --git a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
index 6a0d5943..b7a0d404 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useCallback } from 'react';
 import { useDroppable } from '@dnd-kit/core';
+// @ts-ignore: Heroicons module types
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Checkbox } from 'antd';
 import { getContrastColor } from '@/utils/colorUtils';
@@ -78,7 +79,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
   return (
     <div
       ref={setNodeRef}
-      className={`flex items-center px-4 py-2 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 ${
+      className={`inline-flex w-max items-center px-4 py-2 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 rounded-t-md ${
         isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
       }`}
       style={{
@@ -127,15 +128,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         {/* Color indicator (removed as full header is colored) */}
         
         {/* Group name and count */}
-        <div className="flex items-center justify-between flex-1">
+        <div className="flex items-center flex-1">
           <span className="text-sm font-medium">
-            {group.name}
-          </span>
-          <span 
-            className="text-xs font-medium px-2 py-0.5 rounded-full"
-            style={{ backgroundColor: getContrastColor(headerTextColor) === '#000000' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.2)', color: headerTextColor }}
-          >
-            {group.count}
+            {group.name} ({group.count})
           </span>
         </div>
       </div>
diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
index a6226170..2d36857d 100644
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
@@ -56,7 +56,6 @@ import { useParams } from 'react-router-dom';
 import ImprovedTaskFilters from '@/components/task-management/improved-task-filters';
 import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
-import { Bars3Icon } from '@heroicons/react/24/outline';
 import { HolderOutlined } from '@ant-design/icons';
 import { COLUMN_KEYS } from '@/features/tasks/tasks.slice';
 
@@ -302,22 +301,13 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
         targetGroupId: targetGroup.id,
       }));
 
-      // If we need to insert at a specific position (not at the end)
-      if (insertIndex < targetGroup.taskIds.length) {
-        const newTaskIds = [...targetGroup.taskIds];
-        // Remove the task if it was already added at the end
-        const taskIndex = newTaskIds.indexOf(activeId as string);
-        if (taskIndex > -1) {
-          newTaskIds.splice(taskIndex, 1);
-        }
-        // Insert at the correct position
-        newTaskIds.splice(insertIndex, 0, activeId as string);
-        
-        dispatch(reorderTasksInGroup({
-          taskIds: newTaskIds,
-          groupId: targetGroup.id,
-        }));
-      }
+      // Reorder task within target group at drop position
+      dispatch(reorderTasksInGroup({
+        sourceTaskId: activeId as string,
+        destinationTaskId: over.id as string,
+        sourceGroupId: activeGroup.id,
+        destinationGroupId: targetGroup.id,
+      }));
     } else {
       // Reordering within the same group
       console.log('Reordering task within same group:', {
@@ -328,15 +318,12 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
       });
 
       if (activeIndex !== insertIndex) {
-        const newTaskIds = [...activeGroup.taskIds];
-        // Remove task from old position
-        newTaskIds.splice(activeIndex, 1);
-        // Insert at new position
-        newTaskIds.splice(insertIndex, 0, activeId as string);
-        
+        // Reorder task within same group at drop position
         dispatch(reorderTasksInGroup({
-          taskIds: newTaskIds,
-          groupId: activeGroup.id,
+          sourceTaskId: activeId as string,
+          destinationTaskId: over.id as string,
+          sourceGroupId: activeGroup.id,
+          destinationGroupId: activeGroup.id,
         }));
       }
     }
@@ -474,7 +461,7 @@ const TaskListV2: React.FC<TaskListV2Props> = ({ projectId }) => {
     const isGroupEmpty = group.count === 0;
     
     return (
-      <div>
+      <div className={groupIndex > 0 ? 'mt-2' : ''}>
         <TaskGroupHeader
           group={{
             id: group.id,
diff --git a/worklenz-frontend/src/types/heroicons-react.d.ts b/worklenz-frontend/src/types/heroicons-react.d.ts
new file mode 100644
index 00000000..2d33b39d
--- /dev/null
+++ b/worklenz-frontend/src/types/heroicons-react.d.ts
@@ -0,0 +1,8 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare module '@heroicons/react/24/outline' {
+  export const ChevronDownIcon: ComponentType<SVGProps<SVGSVGElement>>;
+  export const ChevronRightIcon: ComponentType<SVGProps<SVGSVGElement>>;
+  export const Bars3Icon: ComponentType<SVGProps<SVGSVGElement>>;
+  export const ClockIcon: ComponentType<SVGProps<SVGSVGElement>>;
+} 
\ No newline at end of file