refactor(tasks): improve code readability and formatting in tasks-controller-v2

- Refactored import statements for better organization and clarity.
- Enhanced formatting of methods and conditionals for improved readability.
- Updated task filtering methods to maintain consistent formatting and style.
- Added performance logging for deprecated methods to assist in monitoring usage.
- Cleaned up unnecessary comments and improved inline documentation for better understanding.

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

@@ -16,6 +16,7 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
   groupType
 }) => {
   const { t } = useTranslation('task-management');
+  console.log(todoProgress, doingProgress, doneProgress);
   
   // Only show for priority and phase grouping
   if (groupType !== 'priority' && groupType !== 'phase') {

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

@@ -1,15 +1,29 @@
 import React, { useMemo, useCallback, useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 // @ts-ignore: Heroicons module types
-import { ChevronDownIcon, ChevronRightIcon, EllipsisHorizontalIcon, PencilIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+  PencilIcon,
+  ArrowPathIcon,
+} from '@heroicons/react/24/outline';
 import { Checkbox, Dropdown, Menu, Input, Modal, Badge, Flex } from 'antd';
 import GroupProgressBar from './GroupProgressBar';
 import { useTranslation } from 'react-i18next';
 import { getContrastColor } from '@/utils/colorUtils';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { selectSelectedTaskIds, selectTask, deselectTask } from '@/features/task-management/selection.slice';
+import {
-import { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice';
+  selectSelectedTaskIds,
+  selectTask,
+  deselectTask,
+} from '@/features/task-management/selection.slice';
+import {
+  selectGroups,
+  fetchTasksV3,
+  selectAllTasksArray,
+} from '@/features/task-management/task-management.slice';
 import { selectCurrentGrouping } from '@/features/task-management/grouping.slice';
 import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
 import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
@@ -38,7 +52,12 @@ interface TaskGroupHeaderProps {
   projectId: string;
 }
 
-const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, onToggle, projectId }) => {
+const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
+  group,
+  isCollapsed,
+  onToggle,
+  projectId,
+}) => {
   const { t } = useTranslation('task-management');
   const dispatch = useAppDispatch();
   const selectedTaskIds = useAppSelector(selectSelectedTaskIds);
@@ -85,7 +104,8 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     // If we're grouping by status, show progress based on task completion
     if (currentGrouping === 'status') {
       // For status grouping, calculate based on task progress values
-      const progressStats = tasksInCurrentGroup.reduce((acc, task) => {
+      const progressStats = tasksInCurrentGroup.reduce(
+        (acc, task) => {
           const progress = task.progress || 0;
           if (progress === 0) {
             acc.todo += 1;
@@ -95,43 +115,68 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
             acc.doing += 1;
           }
           return acc;
-      }, { todo: 0, doing: 0, done: 0 });
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
 
       return {
-        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
-        doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0,
+        doingProgress:
-        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0,
+          totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) || 0 : 0,
+        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) || 0 : 0,
       };
     } else {
       // For priority/phase grouping, show progress based on status distribution
       // Use a simplified approach based on status names and common patterns
-      const statusCounts = tasksInCurrentGroup.reduce((acc, task) => {
+      const statusCounts = tasksInCurrentGroup.reduce(
+        (acc, task) => {
           // Find the status by ID first
           const statusInfo = statusList.find(s => s.id === task.status);
           const statusName = statusInfo?.name?.toLowerCase() || task.status?.toLowerCase() || '';
 
           // Categorize based on common status name patterns
-        if (statusName.includes('todo') || statusName.includes('to do') || statusName.includes('pending') || statusName.includes('open') || statusName.includes('backlog')) {
+          if (
+            statusName.includes('todo') ||
+            statusName.includes('to do') ||
+            statusName.includes('pending') ||
+            statusName.includes('open') ||
+            statusName.includes('backlog')
+          ) {
             acc.todo += 1;
-        } else if (statusName.includes('doing') || statusName.includes('progress') || statusName.includes('active') || statusName.includes('working') || statusName.includes('development')) {
+          } else if (
+            statusName.includes('doing') ||
+            statusName.includes('progress') ||
+            statusName.includes('active') ||
+            statusName.includes('working') ||
+            statusName.includes('development')
+          ) {
             acc.doing += 1;
-        } else if (statusName.includes('done') || statusName.includes('completed') || statusName.includes('finished') || statusName.includes('closed') || statusName.includes('resolved')) {
+          } else if (
+            statusName.includes('done') ||
+            statusName.includes('completed') ||
+            statusName.includes('finished') ||
+            statusName.includes('closed') ||
+            statusName.includes('resolved')
+          ) {
             acc.done += 1;
           } else {
             // Default unknown statuses to "doing" (in progress)
             acc.doing += 1;
           }
           return acc;
-      }, { todo: 0, doing: 0, done: 0 });
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
 
       return {
-        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
-        doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0,
+        doingProgress:
-        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0,
+          totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) || 0 : 0,
+        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) || 0 : 0,
       };
     }
   }, [currentGroup, allTasks, statusList, currentGrouping]);
@@ -144,13 +189,15 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
 
     const selectedTasksInGroup = tasksInGroup.filter(taskId => selectedTaskIds.includes(taskId));
     const allSelected = selectedTasksInGroup.length === tasksInGroup.length;
-    const partiallySelected = selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
+    const partiallySelected =
+      selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
 
     return { isAllSelected: allSelected, isPartiallySelected: partiallySelected };
   }, [tasksInGroup, selectedTaskIds]);
 
   // Handle select all checkbox change
-  const handleSelectAllChange = useCallback((e: any) => {
+  const handleSelectAllChange = useCallback(
+    (e: any) => {
       e.stopPropagation();
 
       if (isAllSelected) {
@@ -164,7 +211,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           dispatch(selectTask(taskId));
         });
       }
-  }, [dispatch, isAllSelected, tasksInGroup]);
+    },
+    [dispatch, isAllSelected, tasksInGroup]
+  );
 
   // Handle inline name editing
   const handleNameSave = useCallback(async () => {
@@ -188,7 +237,6 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         await statusApiService.updateNameOfStatus(statusId, body, projectId);
         trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Status' });
         dispatch(fetchStatuses(projectId));
-        
       } else if (currentGrouping === 'phase') {
         // Extract phase ID from group ID (format: "phase-{phaseId}")
         const phaseId = group.id.replace('phase-', '');
@@ -201,7 +249,6 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
 
       // Refresh task list to get updated group names
       dispatch(fetchTasksV3(projectId));
-      
     } catch (error) {
       logger.error('Error renaming group:', error);
       setEditingName(group.name);
@@ -209,16 +256,29 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
       setIsEditingName(false);
       setIsRenaming(false);
     }
-  }, [editingName, group.name, group.id, currentGrouping, projectId, dispatch, trackMixpanelEvent, isRenaming]);
+  }, [
+    editingName,
+    group.name,
+    group.id,
+    currentGrouping,
+    projectId,
+    dispatch,
+    trackMixpanelEvent,
+    isRenaming,
+  ]);
 
-  const handleNameClick = useCallback((e: React.MouseEvent) => {
+  const handleNameClick = useCallback(
+    (e: React.MouseEvent) => {
       e.stopPropagation();
       if (!isOwnerOrAdmin) return;
       setIsEditingName(true);
       setEditingName(group.name);
-  }, [group.name, isOwnerOrAdmin]);
+    },
+    [group.name, isOwnerOrAdmin]
+  );
 
-  const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleNameKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
         handleNameSave();
       } else if (e.key === 'Escape') {
@@ -226,7 +286,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         setEditingName(group.name);
       }
       e.stopPropagation();
-  }, [group.name, handleNameSave]);
+    },
+    [group.name, handleNameSave]
+  );
 
   const handleNameBlur = useCallback(() => {
     handleNameSave();
@@ -239,10 +301,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     setEditingName(group.name);
   }, [group.name]);
 
-
-
   // Handle category change
-  const handleCategoryChange = useCallback(async (categoryId: string, e?: React.MouseEvent) => {
+  const handleCategoryChange = useCallback(
+    async (categoryId: string, e?: React.MouseEvent) => {
       e?.stopPropagation();
       if (isChangingCategory) return;
 
@@ -257,13 +318,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         // Refresh status list and tasks
         dispatch(fetchStatuses(projectId));
         dispatch(fetchTasksV3(projectId));
-      
       } catch (error) {
         logger.error('Error changing category:', error);
       } finally {
         setIsChangingCategory(false);
       }
-  }, [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]);
+    },
+    [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]
+  );
 
   // Create dropdown menu items
   const menuItems = useMemo(() => {
@@ -273,7 +335,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
       {
         key: 'rename',
         icon: <PencilIcon className="h-4 w-4" />,
-        label: currentGrouping === 'status' ? t('renameStatus') : currentGrouping === 'phase' ? t('renamePhase') : t('renameGroup'),
+        label:
+          currentGrouping === 'status'
+            ? t('renameStatus')
+            : currentGrouping === 'phase'
+              ? t('renamePhase')
+              : t('renameGroup'),
         onClick: (e: any) => {
           e?.domEvent?.stopPropagation();
           handleRenameGroup();
@@ -283,7 +350,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
 
     // Only show "Change Category" when grouped by status
     if (currentGrouping === 'status') {
-      const categorySubMenuItems = statusCategories.map((category) => ({
+      const categorySubMenuItems = statusCategories.map(category => ({
         key: `category-${category.id}`,
         label: (
           <div className="flex items-center gap-2">
@@ -306,7 +373,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     }
 
     return items;
-  }, [currentGrouping, handleRenameGroup, handleCategoryChange, isOwnerOrAdmin, statusCategories, t]);
+  }, [
+    currentGrouping,
+    handleRenameGroup,
+    handleCategoryChange,
+    isOwnerOrAdmin,
+    statusCategories,
+    t,
+  ]);
 
   // Make the group header droppable
   const { isOver, setNodeRef } = useDroppable({
@@ -332,7 +406,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           zIndex: 25, // Higher than task rows but lower than column headers (z-30)
           height: '36px',
           minHeight: '36px',
-          maxHeight: '36px'
+          maxHeight: '36px',
         }}
         onClick={onToggle}
       >
@@ -342,7 +416,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           <button
             className="p-0 rounded-sm hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out"
             style={{ backgroundColor: 'transparent', color: headerTextColor }}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
               onToggle();
             }}
@@ -351,7 +425,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
               className="transition-transform duration-300 ease-out"
               style={{
                 transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
-                transformOrigin: 'center'
+                transformOrigin: 'center',
               }}
             >
               <ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} />
@@ -365,7 +439,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
             checked={isAllSelected}
             indeterminate={isPartiallySelected}
             onChange={handleSelectAllChange}
-            onClick={(e) => e.stopPropagation()}
+            onClick={e => e.stopPropagation()}
             style={{
               color: headerTextColor,
             }}
@@ -379,7 +453,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
             {isEditingName ? (
               <Input
                 value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
+                onChange={e => setEditingName(e.target.value)}
                 onKeyDown={handleNameKeyDown}
                 onBlur={handleNameBlur}
                 autoFocus
@@ -390,9 +464,9 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
                   minWidth: '100px',
                   backgroundColor: 'rgba(255, 255, 255, 0.1)',
                   color: headerTextColor,
-                border: '1px solid rgba(255, 255, 255, 0.3)'
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
                 }}
-              onClick={(e) => e.stopPropagation()}
+                onClick={e => e.stopPropagation()}
               />
             ) : (
               <span
@@ -423,7 +497,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
               <button
                 className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
                 style={{ color: headerTextColor }}
-              onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   setDropdownVisible(!dropdownVisible);
                 }}
@@ -433,12 +507,11 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
             </Dropdown>
           </div>
         )}
-
       </div>
 
       {/* Progress Bar - sticky to the right edge during horizontal scroll */}
       {(currentGrouping === 'priority' || currentGrouping === 'phase') &&
-       (groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && (
+        !(groupProgressValues.todoProgress === 0 && groupProgressValues.doingProgress === 0 && groupProgressValues.doneProgress === 0) && (
           <div
             className="flex items-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm px-3 py-1.5 ml-auto"
             style={{
@@ -446,7 +519,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
               right: '16px',
               zIndex: 35, // Higher than header
               minWidth: '160px',
-            height: '30px'
+              height: '30px',
             }}
           >
             <GroupProgressBar

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

@@ -89,14 +89,29 @@ const EmptyGroupDropZone: React.FC<{
       className={`relative w-full transition-colors duration-200 ${
         isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
       }`}
-      style={{ minHeight: 80 }}
     >
-      <div className="flex items-center min-w-max px-1 py-2">
+      <div className="flex items-center min-w-max px-1" style={{ height: '40px' }}>
         {visibleColumns.map((column, index) => {
           const emptyColumnStyle = {
             width: column.width,
             flexShrink: 0,
           };
+          
+          // Show text in the title column
+          if (column.id === 'title') {
+            return (
+              <div
+                key={`empty-${column.id}`}
+                className="flex items-center pl-1"
+                style={emptyColumnStyle}
+              >
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  No tasks in this group
+                </span>
+              </div>
+            );
+          }
+          
           return (
             <div
               key={`empty-${column.id}`}
@@ -106,13 +121,6 @@ const EmptyGroupDropZone: React.FC<{
           );
         })}
       </div>
-      {/* Left-aligned visually appealing empty state */}
-      <div className="pl-4 flex items-center">
-        <EmptyListPlaceholder
-          textKey="noTasksInGroup"
-          imageHeight={48}
-        />
-      </div>
       {isOver && active && (
         <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
       )}
@@ -699,9 +707,6 @@ const TaskListV2Section: React.FC = () => {
         startIndex: 0
       };
      
-      
-      const unmappedVirtuosoGroups = [unmappedGroup];
-      
       return (
         <DndContext
           sensors={sensors}

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

@@ -125,9 +125,9 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
         return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
       case 'title':
         return (
-          <div className="flex items-center h-full border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
+          <div className="flex items-center h-full" style={baseStyle}>
             <div className="flex items-center w-full h-full">
-              <div className="w-4 mr-1" />
+              <div className="w-1 mr-1" />
               
               {!isAdding ? (
                 <button