feat(task-management): enhance task list with improved drag-and-drop functionality and visual feedback

- Integrated droppable areas in TaskGroupHeader for better task organization.
- Implemented drag-over visual feedback to indicate valid drop zones.
- Enhanced TaskListV2 to handle cross-group task movement and reordering.
- Optimized TaskRow for better rendering performance and added memoization for task details.
- Improved Redux state management for task reordering and group handling.

worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useDroppable } from '@dnd-kit/core';
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { getContrastColor } from '@/utils/colorUtils';
 
@@ -17,11 +18,23 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
   const headerBackgroundColor = group.color || '#F0F0F0'; // Default light gray if no color
   const headerTextColor = getContrastColor(headerBackgroundColor);
 
+  // Make the group header droppable
+  const { isOver, setNodeRef } = useDroppable({
+    id: group.id,
+    data: {
+      type: 'group',
+      group,
+    },
+  });
+
   return (
     <div
-      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"
+      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 ${
+        isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
+      }`}
       style={{
-        backgroundColor: headerBackgroundColor,
+        backgroundColor: isOver ? `${headerBackgroundColor}dd` : headerBackgroundColor,
         color: headerTextColor,
         position: 'sticky',
         top: 0,