refactor(task-management): enhance empty state visuals and improve layout

- Updated the empty state message styling in VirtualizedTaskList and TaskGroup components for better visibility and user experience.
- Adjusted padding and height in various components to create a more consistent and visually appealing layout.
- Removed console log statements from TaskPhaseDropdown to clean up the codebase.

worklenz-frontend/src/components/enhanced-kanban/VirtualizedTaskList.tsx

@@ -73,8 +73,17 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
 
   if (tasks.length === 0) {
     return (
-      <div className="virtualized-empty-state" style={{ height }}>
-        <div className="empty-message">No tasks in this group</div>
+      <div className="virtualized-empty-state" style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div className="empty-message" style={{ 
+          padding: '32px 24px', 
+          color: '#8c8c8c', 
+          fontSize: '14px',
+          backgroundColor: '#fafafa',
+          borderRadius: '8px',
+          border: '1px solid #f0f0f0'
+        }}>
+          No tasks in this group
+        </div>
       </div>
     );
   }

worklenz-frontend/src/components/kanban-board-management-v2/kanbanGroup.tsx

@@ -173,7 +173,7 @@ const KanbanGroup: React.FC<TaskGroupProps> = ({
                 .kanban-group-empty {
                     text-align: center;
                     color: #bfbfbf;
-                    padding: 32px 0;
+                    padding: 48px 16px;
                 }
                 .kanban-group-add-task {
                     padding: 12px;

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

@@ -54,6 +54,7 @@ import {
   setCustomColumnModalAttributes,
   toggleCustomColumnModalOpen,
 } from '@/features/projects/singleProject/task-list-custom-columns/task-list-custom-columns-slice';
+import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/phases.slice';
 
 // Components
 import TaskRowWithSubtasks from './TaskRowWithSubtasks';
@@ -212,6 +213,7 @@ const TaskListV2Section: React.FC = () => {
     if (urlProjectId) {
       dispatch(fetchTasksV3(urlProjectId));
       dispatch(fetchTaskListColumns(urlProjectId));
+      dispatch(fetchPhasesByProjectId(urlProjectId));
     }
   }, [dispatch, urlProjectId]);
 
@@ -463,7 +465,7 @@ const TaskListV2Section: React.FC = () => {
           />
           {isGroupEmpty && !isGroupCollapsed && (
             <div className="relative w-full">
-              <div className="flex items-center min-w-max px-1 py-3">
+              <div className="flex items-center min-w-max px-1 py-6">
                 {visibleColumns.map((column, index) => {
                   const emptyColumnStyle = {
                     width: column.width,
@@ -482,7 +484,7 @@ const TaskListV2Section: React.FC = () => {
                 })}
               </div>
               <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
-                <div className="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
+                <div className="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-4 py-3 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
                   {t('noTasksInGroup')}
                 </div>
               </div>

worklenz-frontend/src/components/task-management/task-group.tsx

@@ -312,7 +312,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
                 {groupTasks.length === 0 ? (
                   <div className="task-group-empty">
                     <div className="task-table-fixed-columns">
-                      <div style={{ width: '380px', padding: '20px 12px' }}>
+                      <div style={{ width: '380px', padding: '32px 12px' }}>
                         <div className="text-center text-gray-500">
                           <Text type="secondary">No tasks in this group</Text>
                           <br />
@@ -487,7 +487,7 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(
 
         .task-group-empty {
           display: flex;
-          height: 80px;
+          height: 120px;
           align-items: center;
           background: var(--task-bg-primary, white);
           transition: background-color 0.3s ease;

worklenz-frontend/src/components/task-management/task-phase-dropdown.tsx

@@ -35,8 +35,6 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
     (phaseId: string, phaseName: string) => {
       if (!task.id || !phaseId || !connected) return;
 
-      console.log('🎯 Phase change initiated:', { taskId: task.id, phaseId, phaseName });
-
       socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
         task_id: task.id,
         phase_id: phaseId,
@@ -51,8 +49,6 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
   const handlePhaseClear = useCallback(() => {
     if (!task.id || !connected) return;
 
-    console.log('🎯 Phase clear initiated:', { taskId: task.id });
-
     socket?.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
       task_id: task.id,
       phase_id: null,