Merge branch 'fix/release-v2.1.3' of https://github.com/Worklenz/worklenz into test/invitation-process

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

@@ -1,17 +1,24 @@
 import { Empty, Typography } from 'antd';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type EmptyListPlaceholderProps = {
   imageSrc?: string;
   imageHeight?: number;
-  text: string;
+  text?: string;
+  textKey?: string;
+  i18nNs?: string;
 };
 
 const EmptyListPlaceholder = ({
   imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
   imageHeight = 60,
   text,
+  textKey,
+  i18nNs = 'task-list-table',
 }: EmptyListPlaceholderProps) => {
+  const { t } = useTranslation(i18nNs);
+  const description = textKey ? t(textKey) : text;
   return (
     <Empty
       image={imageSrc}
@@ -22,7 +29,7 @@ const EmptyListPlaceholder = ({
         alignItems: 'center',
         marginBlockStart: 24,
       }}
-      description={<Typography.Text type="secondary">{text}</Typography.Text>}
+      description={<Typography.Text type="secondary">{description}</Typography.Text>}
     />
   );
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'antd';
 
 interface GroupProgressBarProps {
   todoProgress: number;
@@ -15,24 +16,34 @@ 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') {
     return null;
   }
 
-  const total = todoProgress + doingProgress + doneProgress;
+  const total = (todoProgress || 0) + (doingProgress || 0) + (doneProgress || 0);
   
   // Don't show if no progress values exist
   if (total === 0) {
     return null;
   }
 
+  // Tooltip content with all values in rows
+  const tooltipContent = (
+    <div>
+      <div>{t('todo')}: {todoProgress || 0}%</div>
+      <div>{t('inProgress')}: {doingProgress || 0}%</div>
+      <div>{t('done')}: {doneProgress || 0}%</div>
+    </div>
+  );
+
   return (
     <div className="flex items-center gap-2">
       {/* Compact progress text */}
       <span className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap font-medium">
-        {doneProgress}% {t('done')}
+        {doneProgress || 0}% {t('done')}
       </span>
       
       {/* Compact progress bar */}
@@ -40,27 +51,30 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
         <div className="h-full flex">
           {/* Todo section - light green */}
           {todoProgress > 0 && (
-            <div
-              className="bg-green-200 dark:bg-green-800 transition-all duration-300"
-              style={{ width: `${(todoProgress / total) * 100}%` }}
-              title={`${t('todo')}: ${todoProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-200 dark:bg-green-800 transition-all duration-300"
+                style={{ width: `${(todoProgress / total) * 100}%` }}
+              />
+            </Tooltip>
           )}
           {/* Doing section - medium green */}
           {doingProgress > 0 && (
-            <div
-              className="bg-green-400 dark:bg-green-600 transition-all duration-300"
-              style={{ width: `${(doingProgress / total) * 100}%` }}
-              title={`${t('inProgress')}: ${doingProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-400 dark:bg-green-600 transition-all duration-300"
+                style={{ width: `${(doingProgress / total) * 100}%` }}
+              />
+            </Tooltip>
           )}
           {/* Done section - dark green */}
           {doneProgress > 0 && (
-            <div
-              className="bg-green-600 dark:bg-green-400 transition-all duration-300"
-              style={{ width: `${(doneProgress / total) * 100}%` }}
-              title={`${t('done')}: ${doneProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-600 dark:bg-green-400 transition-all duration-300"
+                style={{ width: `${(doneProgress / total) * 100}%` }}
+              />
+            </Tooltip>
           )}
         </div>
       </div>
@@ -68,22 +82,25 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
       {/* Small legend dots with better spacing */}
       <div className="flex items-center gap-1">
         {todoProgress > 0 && (
-          <div 
-            className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
-            title={`${t('todo')}: ${todoProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
+            />
+          </Tooltip>
         )}
         {doingProgress > 0 && (
-          <div 
-            className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
-            title={`${t('inProgress')}: ${doingProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
+            />
+          </Tooltip>
         )}
         {doneProgress > 0 && (
-          <div 
-            className="w-1.5 h-1.5 bg-green-600 dark:bg-green-400 rounded-full" 
-            title={`${t('done')}: ${doneProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              className="w-1.5 h-1.5 bg-green-600 dark:bg-green-400 rounded-full" 
+            />
+          </Tooltip>
         )}
       </div>
     </div>

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 { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice';
+import {
+  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);
@@ -48,14 +67,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
   const { statusCategories, status: statusList } = useAppSelector(state => state.taskStatusReducer);
   const { trackMixpanelEvent } = useMixpanelTracking();
   const { isOwnerOrAdmin } = useAuthService();
-  
+
   const [dropdownVisible, setDropdownVisible] = useState(false);
 
   const [isRenaming, setIsRenaming] = useState(false);
   const [isChangingCategory, setIsChangingCategory] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [editingName, setEditingName] = useState(group.name);
-  
+
   const headerBackgroundColor = group.color || '#F0F0F0'; // Default light gray if no color
   const headerTextColor = getContrastColor(headerBackgroundColor);
 
@@ -85,53 +104,79 @@ 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 progress = task.progress || 0;
-        if (progress === 0) {
-          acc.todo += 1;
-        } else if (progress === 100) {
-          acc.done += 1;
-        } else {
-          acc.doing += 1;
-        }
-        return acc;
-      }, { todo: 0, doing: 0, done: 0 });
+      const progressStats = tasksInCurrentGroup.reduce(
+        (acc, task) => {
+          const progress = task.progress || 0;
+          if (progress === 0) {
+            acc.todo += 1;
+          } else if (progress === 100) {
+            acc.done += 1;
+          } else {
+            acc.doing += 1;
+          }
+          return acc;
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
-      
+
       return {
-        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0,
-        doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0,
-        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
+        doingProgress:
+          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) => {
-        // 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')) {
-          acc.todo += 1;
-        } 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')) {
-          acc.done += 1;
-        } else {
-          // Default unknown statuses to "doing" (in progress)
-          acc.doing += 1;
-        }
-        return acc;
-      }, { todo: 0, doing: 0, done: 0 });
+      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')
+          ) {
+            acc.todo += 1;
+          } 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')
+          ) {
+            acc.done += 1;
+          } else {
+            // Default unknown statuses to "doing" (in progress)
+            acc.doing += 1;
+          }
+          return acc;
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
-      
+
       return {
-        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) : 0,
-        doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0,
-        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
+        doingProgress:
+          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]);
@@ -141,30 +186,34 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     if (tasksInGroup.length === 0) {
       return { isAllSelected: false, isPartiallySelected: false };
     }
-    
+
     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) => {
-    e.stopPropagation();
-    
-    if (isAllSelected) {
-      // Deselect all tasks in this group
-      tasksInGroup.forEach(taskId => {
-        dispatch(deselectTask(taskId));
-      });
-    } else {
-      // Select all tasks in this group
-      tasksInGroup.forEach(taskId => {
-        dispatch(selectTask(taskId));
-      });
-    }
-  }, [dispatch, isAllSelected, tasksInGroup]);
+  const handleSelectAllChange = useCallback(
+    (e: any) => {
+      e.stopPropagation();
+
+      if (isAllSelected) {
+        // Deselect all tasks in this group
+        tasksInGroup.forEach(taskId => {
+          dispatch(deselectTask(taskId));
+        });
+      } else {
+        // Select all tasks in this group
+        tasksInGroup.forEach(taskId => {
+          dispatch(selectTask(taskId));
+        });
+      }
+    },
+    [dispatch, isAllSelected, tasksInGroup]
+  );
 
   // Handle inline name editing
   const handleNameSave = useCallback(async () => {
@@ -184,24 +233,22 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           name: editingName.trim(),
           project_id: projectId,
         };
-        
+
         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-', '');
         const body = { id: phaseId, name: editingName.trim() };
-        
+
         await phasesApiService.updateNameOfPhase(phaseId, body as ITaskPhase, projectId);
         trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' });
         dispatch(fetchPhasesByProjectId(projectId));
       }
-      
+
       // Refresh task list to get updated group names
       dispatch(fetchTasksV3(projectId));
-      
     } catch (error) {
       logger.error('Error renaming group:', error);
       setEditingName(group.name);
@@ -209,24 +256,39 @@ 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) => {
-    e.stopPropagation();
-    if (!isOwnerOrAdmin) return;
-    setIsEditingName(true);
-    setEditingName(group.name);
-  }, [group.name, isOwnerOrAdmin]);
-
-  const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleNameSave();
-    } else if (e.key === 'Escape') {
-      setIsEditingName(false);
+  const handleNameClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!isOwnerOrAdmin) return;
+      setIsEditingName(true);
       setEditingName(group.name);
-    }
-    e.stopPropagation();
-  }, [group.name, handleNameSave]);
+    },
+    [group.name, isOwnerOrAdmin]
+  );
+
+  const handleNameKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleNameSave();
+      } else if (e.key === 'Escape') {
+        setIsEditingName(false);
+        setEditingName(group.name);
+      }
+      e.stopPropagation();
+    },
+    [group.name, handleNameSave]
+  );
 
   const handleNameBlur = useCallback(() => {
     handleNameSave();
@@ -239,31 +301,31 @@ 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) => {
-    e?.stopPropagation();
-    if (isChangingCategory) return;
+  const handleCategoryChange = useCallback(
+    async (categoryId: string, e?: React.MouseEvent) => {
+      e?.stopPropagation();
+      if (isChangingCategory) return;
 
-    setIsChangingCategory(true);
-    try {
-      // Extract status ID from group ID (format: "status-{statusId}")
-      const statusId = group.id.replace('status-', '');
-      
-      await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
-      trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
-      
-      // 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]);
+      setIsChangingCategory(true);
+      try {
+        // Extract status ID from group ID (format: "status-{statusId}")
+        const statusId = group.id.replace('status-', '');
+
+        await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
+        trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
+
+        // 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]
+  );
 
   // 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">
@@ -297,16 +364,23 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         },
       }));
 
-              items.push({
-          key: 'changeCategory',
-          icon: <ArrowPathIcon className="h-4 w-4" />,
-          label: t('changeCategory'),
-          children: categorySubMenuItems,
-        } as any);
+      items.push({
+        key: 'changeCategory',
+        icon: <ArrowPathIcon className="h-4 w-4" />,
+        label: t('changeCategory'),
+        children: categorySubMenuItems,
+      } as any);
     }
 
     return items;
-  }, [currentGrouping, handleRenameGroup, handleCategoryChange, isOwnerOrAdmin, statusCategories, t]);
+  }, [
+    currentGrouping,
+    handleRenameGroup,
+    handleCategoryChange,
+    isOwnerOrAdmin,
+    statusCategories,
+    t,
+  ]);
 
   // Make the group header droppable
   const { isOver, setNodeRef } = useDroppable({
@@ -317,7 +391,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     },
   });
 
-    return (
+  return (
     <div className="relative flex items-center">
       <div
         ref={setNodeRef}
@@ -332,26 +406,26 @@ 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}
       >
         {/* Drag Handle Space - ultra minimal width */}
         <div style={{ width: '20px' }} className="flex items-center justify-center">
           {/* Chevron button */}
-          <button 
+          <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();
             }}
           >
-            <div 
+            <div
               className="transition-transform duration-300 ease-out"
-              style={{ 
+              style={{
                 transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
-                transformOrigin: 'center'
+                transformOrigin: 'center',
               }}
             >
               <ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} />
@@ -365,100 +439,99 @@ 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,
             }}
           />
         </div>
 
-              {/* Group indicator and name - no gap at all */}
-      <div className="flex items-center flex-1 ml-1">
-        {/* Group name and count */}
-        <div className="flex items-center">
-          {isEditingName ? (
-            <Input
-              value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
-              onKeyDown={handleNameKeyDown}
-              onBlur={handleNameBlur}
-              autoFocus
-              size="small"
-              className="text-sm font-semibold"
-              style={{ 
-                width: 'auto',
-                minWidth: '100px',
-                backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                color: headerTextColor,
-                border: '1px solid rgba(255, 255, 255, 0.3)'
-              }}
-              onClick={(e) => e.stopPropagation()}
-            />
-          ) : (
-            <span 
-              className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
-              style={{ color: headerTextColor }}
-              onClick={handleNameClick}
-            >
-              {group.name}
+        {/* Group indicator and name - no gap at all */}
+        <div className="flex items-center flex-1 ml-1">
+          {/* Group name and count */}
+          <div className="flex items-center">
+            {isEditingName ? (
+              <Input
+                value={editingName}
+                onChange={e => setEditingName(e.target.value)}
+                onKeyDown={handleNameKeyDown}
+                onBlur={handleNameBlur}
+                autoFocus
+                size="small"
+                className="text-sm font-semibold"
+                style={{
+                  width: 'auto',
+                  minWidth: '100px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  color: headerTextColor,
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
+                }}
+                onClick={e => e.stopPropagation()}
+              />
+            ) : (
+              <span
+                className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
+                style={{ color: headerTextColor }}
+                onClick={handleNameClick}
+              >
+                {group.name}
+              </span>
+            )}
+            <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
+              ({group.count})
             </span>
-          )}
-          <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
-            ({group.count})
-          </span>
+          </div>
         </div>
+
+        {/* Three-dot menu - only show for status and phase grouping */}
+        {menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
+          <div className="flex items-center ml-2">
+            <Dropdown
+              menu={{ items: menuItems }}
+              trigger={['click']}
+              open={dropdownVisible}
+              onOpenChange={setDropdownVisible}
+              placement="bottomRight"
+              overlayStyle={{ zIndex: 1000 }}
+            >
+              <button
+                className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
+                style={{ color: headerTextColor }}
+                onClick={e => {
+                  e.stopPropagation();
+                  setDropdownVisible(!dropdownVisible);
+                }}
+              >
+                <EllipsisHorizontalIcon className="h-4 w-4" />
+              </button>
+            </Dropdown>
+          </div>
+        )}
       </div>
 
-      {/* Three-dot menu - only show for status and phase grouping */}
-      {menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
-        <div className="flex items-center ml-2">
-          <Dropdown
-            menu={{ items: menuItems }}
-            trigger={['click']}
-            open={dropdownVisible}
-            onOpenChange={setDropdownVisible}
-            placement="bottomRight"
-            overlayStyle={{ zIndex: 1000 }}
-          >
-            <button
-              className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
-              style={{ color: headerTextColor }}
-              onClick={(e) => {
-                e.stopPropagation();
-                setDropdownVisible(!dropdownVisible);
-              }}
-            >
-              <EllipsisHorizontalIcon className="h-4 w-4" />
-            </button>
-          </Dropdown>
-        </div>
-      )}
-
-    </div>
-    
       {/* Progress Bar - sticky to the right edge during horizontal scroll */}
-      {(currentGrouping === 'priority' || currentGrouping === 'phase') && 
-       (groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && (
-        <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={{ 
-            position: 'sticky',
-            right: '16px',
-            zIndex: 35, // Higher than header
-            minWidth: '160px',
-            height: '30px'
-          }}
-        >
-          <GroupProgressBar
-            todoProgress={groupProgressValues.todoProgress}
-            doingProgress={groupProgressValues.doingProgress}
-            doneProgress={groupProgressValues.doneProgress}
-            groupType={group.groupType || currentGrouping || ''}
-          />
-        </div>
-      )}
+      {(currentGrouping === 'priority' || currentGrouping === 'phase') &&
+        !(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={{
+              position: 'sticky',
+              right: '16px',
+              zIndex: 35, // Higher than header
+              minWidth: '160px',
+              height: '30px',
+            }}
+          >
+            <GroupProgressBar
+              todoProgress={groupProgressValues.todoProgress}
+              doingProgress={groupProgressValues.doingProgress}
+              doneProgress={groupProgressValues.doneProgress}
+              groupType={group.groupType || currentGrouping || ''}
+            />
+          </div>
+        )}
     </div>
   );
 };
 
-export default TaskGroupHeader; 
+export default TaskGroupHeader;

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

@@ -60,13 +60,13 @@ import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/
 // Components
 import TaskRowWithSubtasks from './TaskRowWithSubtasks';
 import TaskGroupHeader from './TaskGroupHeader';
-import ImprovedTaskFilters from '@/components/task-management/improved-task-filters';
 import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
 import CustomColumnModal from '@/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal';
 import AddTaskRow from './components/AddTaskRow';
 import { AddCustomColumnButton, CustomColumnHeader } from './components/CustomColumnComponents';
 import TaskListSkeleton from './components/TaskListSkeleton';
 import ConvertToSubtaskDrawer from '@/components/task-list-common/convert-to-subtask-drawer/convert-to-subtask-drawer';
+import EmptyListPlaceholder from '@/components/EmptyListPlaceholder';
 
 // Empty Group Drop Zone Component
 const EmptyGroupDropZone: React.FC<{
@@ -90,12 +90,28 @@ const EmptyGroupDropZone: React.FC<{
         isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
       }`}
     >
-      <div className="flex items-center min-w-max px-1 py-6">
+      <div className="flex items-center min-w-max px-1 border-t border-b border-gray-200 dark:border-gray-700" 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}`}
@@ -105,17 +121,6 @@ const EmptyGroupDropZone: React.FC<{
           );
         })}
       </div>
-      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
-        <div 
-          className={`text-sm px-4 py-3 rounded-md border shadow-sm transition-colors duration-200 ${
-            isOver && active 
-              ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-600'
-              : 'text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700'
-          }`}
-        >
-          {isOver && active ? t('dropTaskHere') || 'Drop task here' : t('noTasksInGroup')}
-        </div>
-      </div>
       {isOver && active && (
         <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
       )}
@@ -179,6 +184,8 @@ const TaskListV2Section: React.FC = () => {
   const { projectId: urlProjectId } = useParams();
   const { t } = useTranslation('task-list-table');
   const { socket, connected } = useSocket();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
 
   // Redux state selectors
   const allTasks = useAppSelector(selectAllTasksArray);
@@ -492,7 +499,7 @@ const TaskListV2Section: React.FC = () => {
               isAddTaskRow: true,
               groupId: group.id,
               groupType: currentGrouping || 'status',
-              groupValue: group.id, // Use the actual database ID from backend
+              groupValue: group.id, // Send the UUID that backend expects
               projectId: urlProjectId,
               rowId: `add-task-${group.id}-0`,
               autoFocus: false,
@@ -503,7 +510,7 @@ const TaskListV2Section: React.FC = () => {
               isAddTaskRow: true,
               groupId: group.id,
               groupType: currentGrouping || 'status',
-              groupValue: group.id,
+              groupValue: group.id, // Send the UUID that backend expects
               projectId: urlProjectId,
               rowId: rowId,
               autoFocus: index === groupAddRows.length - 1, // Auto-focus the latest row
@@ -536,6 +543,7 @@ const TaskListV2Section: React.FC = () => {
     return virtuosoGroups.flatMap(group => group.tasks);
   }, [virtuosoGroups]);
 
+
   // Render functions
   const renderGroup = useCallback(
     (groupIndex: number) => {
@@ -550,11 +558,7 @@ const TaskListV2Section: React.FC = () => {
               id: group.id,
               name: group.title,
               count: group.actualCount,
-              color: group.color,
-              todo_progress: group.todo_progress,
-              doing_progress: group.doing_progress,
-              done_progress: group.done_progress,
-              groupType: group.groupType,
+              color: isDarkMode ? group.color_code_dark : group.color,
             }}
             isCollapsed={isGroupCollapsed}
             onToggle={() => handleGroupCollapse(group.id)}
@@ -685,13 +689,94 @@ const TaskListV2Section: React.FC = () => {
       </div>
     );
 
-  // Show message when no data
+  // Show message when no data - but for phase grouping, create an unmapped group
   if (groups.length === 0 && !loading) {
+    // If grouped by phase, show an unmapped group to allow task creation
+    if (currentGrouping === 'phase') {
+      const unmappedGroup = {
+        id: 'Unmapped',
+        title: 'Unmapped',
+        groupType: 'phase',
+        groupValue: 'Unmapped', // Use same ID as groupValue for consistency
+        collapsed: false,
+        tasks: [],
+        taskIds: [],
+        color: '#fbc84c69',
+        actualCount: 0,
+        count: 1, // For the add task row
+        startIndex: 0
+      };
+     
+      return (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+        >
+          <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
+            <div
+              className="border border-gray-200 dark:border-gray-700 rounded-lg"
+              style={{
+                height: 'calc(100vh - 240px)',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                ref={contentScrollRef}
+                className="flex-1 bg-white dark:bg-gray-900 relative"
+                style={{
+                  overflowX: 'auto',
+                  overflowY: 'auto',
+                  minHeight: 0,
+                }}
+              >
+                {/* Sticky Column Headers */}
+                <div
+                  className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800"
+                  style={{ width: '100%', minWidth: 'max-content' }}
+                >
+                  {renderColumnHeaders()}
+                </div>
+                
+                <div style={{ minWidth: 'max-content' }}>
+                  <div className="mt-2">
+                    <TaskGroupHeader
+                      group={{
+                        id: 'Unmapped',
+                        name: 'Unmapped',
+                        count: 0,
+                        color: '#fbc84c69',
+                      }}
+                      isCollapsed={false}
+                      onToggle={() => {}}
+                      projectId={urlProjectId || ''}
+                    />
+                    <AddTaskRow
+                      groupId="Unmapped"
+                      groupType="phase"
+                      groupValue="Unmapped"
+                      projectId={urlProjectId || ''}
+                      visibleColumns={visibleColumns}
+                      onTaskAdded={handleTaskAdded}
+                      rowId="add-task-Unmapped-0"
+                      autoFocus={false}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DndContext>
+      );
+    }
+    
+    // For other groupings, show the empty state message
     return (
       <div className="flex flex-col bg-white dark:bg-gray-900 h-full">
-        <div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
-          <ImprovedTaskFilters position="list" />
-        </div>
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center">
             <div className="text-lg font-medium text-gray-900 dark:text-white mb-2">
@@ -812,19 +897,17 @@ const TaskListV2Section: React.FC = () => {
         {/* Drag Overlay */}
         <DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
           {activeId ? (
-            <div className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg border-2 border-blue-500 dark:border-blue-400 scale-105">
-              <div className="px-4 py-3">
-                <div className="flex items-center gap-3">
-                  <HolderOutlined className="text-blue-500 dark:text-blue-400" />
-                  <div>
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">
-                      {allTasks.find(task => task.id === activeId)?.name ||
-                        allTasks.find(task => task.id === activeId)?.title ||
-                        t('emptyStates.dragTaskFallback')}
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      {allTasks.find(task => task.id === activeId)?.task_key}
-                    </div>
+            <div 
+              className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
+              style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
+            >
+              <div className="px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
+                  <div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
+                    {allTasks.find(task => task.id === activeId)?.name ||
+                      allTasks.find(task => task.id === activeId)?.title ||
+                      t('emptyStates.dragTaskFallback')}
                   </div>
                 </div>
               </div>

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
@@ -165,7 +165,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
   }, [isAdding, taskName, handleAddTask, handleCancel, handleKeyDown, t]);
 
   return (
-    <div className="flex items-center min-w-max px-1 py-0.5 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[36px] border-b border-gray-200 dark:border-gray-700">
+    <div className="flex items-center min-w-max px-1 py-0.5 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[36px]">
       {visibleColumns.map((column, index) => (
         <React.Fragment key={column.id}>
           {renderColumn(column.id, column.width)}