Merge pull request #238 from Worklenz/fix/task-drag-and-drop-improvement

Fix/task drag and drop improvement
2025-07-07 07:05:59 +05:30
parent 13ee16452b f9926e7a5d
commit cc618960e6
42 changed files with 1100 additions and 627 deletions
--- a/worklenz-frontend/public/locales/alb/task-list-filters.json
+++ b/worklenz-frontend/public/locales/alb/task-list-filters.json
@@ -55,5 +55,18 @@
  "selectCategory": "Zgjidh një kategori",
  "pleaseEnterAName": "Ju lutemi vendosni një emër",
  "pleaseSelectACategory": "Ju lutemi zgjidhni një kategori",
-  "create": "Krijo"
+  "create": "Krijo",
+
+  "searchTasks": "Kërko detyrat...",
+  "searchPlaceholder": "Kërko...",
+  "fieldsText": "Fushat",
+  "loadingFilters": "Duke ngarkuar filtrat...",
+  "noOptionsFound": "Nuk u gjetën opsione",
+  "filtersActive": "filtra aktiv",
+  "filterActive": "filtër aktiv",
+  "clearAll": "Pastro të gjitha",
+  "clearing": "Duke pastruar...",
+  "cancel": "Anulo",
+  "search": "Kërko",
+  "groupedBy": "Grupuar sipas"
 }
--- a/worklenz-frontend/public/locales/alb/task-list-table.json
+++ b/worklenz-frontend/public/locales/alb/task-list-table.json
@@ -108,5 +108,19 @@
      "key": "Çelësi",
      "formula": "Formula"
    }
+  },
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} nën-detyrë",
+      "subtasks_plural": "{{count}} nën-detyra",
+      "comments": "{{count}} koment",
+      "comments_plural": "{{count}} komente",
+      "attachments": "{{count}} bashkëngjitje",
+      "attachments_plural": "{{count}} bashkëngjitje",
+      "subscribers": "Detyra ka pajtues",
+      "dependencies": "Detyra ka varësi",
+      "recurring": "Detyrë përsëritëse"
+    }
  }
 }
--- a/worklenz-frontend/public/locales/de/task-list-filters.json
+++ b/worklenz-frontend/public/locales/de/task-list-filters.json
@@ -55,5 +55,18 @@
  "selectCategory": "Kategorie auswählen",
  "pleaseEnterAName": "Bitte geben Sie einen Namen ein",
  "pleaseSelectACategory": "Bitte wählen Sie eine Kategorie aus",
-  "create": "Erstellen"
+  "create": "Erstellen",
+
+  "searchTasks": "Aufgaben suchen...",
+  "searchPlaceholder": "Suchen...",
+  "fieldsText": "Felder",
+  "loadingFilters": "Filter werden geladen...",
+  "noOptionsFound": "Keine Optionen gefunden",
+  "filtersActive": "Filter aktiv",
+  "filterActive": "Filter aktiv",
+  "clearAll": "Alle löschen",
+  "clearing": "Löschen...",
+  "cancel": "Abbrechen",
+  "search": "Suchen",
+  "groupedBy": "Gruppiert nach"
 }
--- a/worklenz-frontend/public/locales/de/task-list-table.json
+++ b/worklenz-frontend/public/locales/de/task-list-table.json
@@ -108,5 +108,19 @@
      "key": "Schlüssel",
      "formula": "Formel"
    }
+  },
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} Unteraufgabe",
+      "subtasks_plural": "{{count}} Unteraufgaben",
+      "comments": "{{count}} Kommentar",
+      "comments_plural": "{{count}} Kommentare",
+      "attachments": "{{count}} Anhang",
+      "attachments_plural": "{{count}} Anhänge",
+      "subscribers": "Aufgabe hat Abonnenten",
+      "dependencies": "Aufgabe hat Abhängigkeiten",
+      "recurring": "Wiederkehrende Aufgabe"
+    }
  }
 }
--- a/worklenz-frontend/public/locales/en/task-list-filters.json
+++ b/worklenz-frontend/public/locales/en/task-list-filters.json
@@ -55,5 +55,18 @@
  "selectCategory": "Select a category",
  "pleaseEnterAName": "Please enter a name",
  "pleaseSelectACategory": "Please select a category",
-  "create": "Create"
+  "create": "Create",
+
+  "searchTasks": "Search tasks...",
+  "searchPlaceholder": "Search...",
+  "fieldsText": "Fields",
+  "loadingFilters": "Loading filters...",
+  "noOptionsFound": "No options found",
+  "filtersActive": "filters active",
+  "filterActive": "filter active",
+  "clearAll": "Clear all",
+  "clearing": "Clearing...",
+  "cancel": "Cancel",
+  "search": "Search",
+  "groupedBy": "Grouped by"
 }
--- a/worklenz-frontend/public/locales/en/task-list-table.json
+++ b/worklenz-frontend/public/locales/en/task-list-table.json
@@ -108,5 +108,19 @@
      "key": "Key",
      "formula": "Formula"
    }
+  },
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} subtask",
+      "subtasks_plural": "{{count}} subtasks",
+      "comments": "{{count}} comment",
+      "comments_plural": "{{count}} comments",
+      "attachments": "{{count}} attachment",
+      "attachments_plural": "{{count}} attachments",
+      "subscribers": "Task has subscribers",
+      "dependencies": "Task has dependencies",
+      "recurring": "Recurring task"
+    }
  }
 }
--- a/worklenz-frontend/public/locales/en/task-management.json
+++ b/worklenz-frontend/public/locales/en/task-management.json
@@ -17,5 +17,19 @@
  "renamePhase": "Rename Phase",
  "changeCategory": "Change Category",
  "clickToEditGroupName": "Click to edit group name",
-  "enterGroupName": "Enter group name"
+  "enterGroupName": "Enter group name",
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} subtask",
+      "subtasks_plural": "{{count}} subtasks",
+      "comments": "{{count}} comment",
+      "comments_plural": "{{count}} comments",
+      "attachments": "{{count}} attachment",
+      "attachments_plural": "{{count}} attachments",
+      "subscribers": "Task has subscribers",
+      "dependencies": "Task has dependencies",
+      "recurring": "Recurring task"
+    }
+  }
 }
--- a/worklenz-frontend/public/locales/es/task-list-filters.json
+++ b/worklenz-frontend/public/locales/es/task-list-filters.json
@@ -51,5 +51,18 @@
  "selectCategory": "Seleccionar una categoría",
  "pleaseEnterAName": "Por favor, ingrese un nombre",
  "pleaseSelectACategory": "Por favor, seleccione una categoría",
-  "create": "Crear"
+  "create": "Crear",
+
+  "searchTasks": "Buscar tareas...",
+  "searchPlaceholder": "Buscar...",
+  "fieldsText": "Campos",
+  "loadingFilters": "Cargando filtros...",
+  "noOptionsFound": "No se encontraron opciones",
+  "filtersActive": "filtros activos",
+  "filterActive": "filtro activo",
+  "clearAll": "Limpiar todo",
+  "clearing": "Limpiando...",
+  "cancel": "Cancelar",
+  "search": "Buscar",
+  "groupedBy": "Agrupado por"
 }
--- a/worklenz-frontend/public/locales/es/task-list-table.json
+++ b/worklenz-frontend/public/locales/es/task-list-table.json
@@ -108,5 +108,19 @@
      "key": "Clave",
      "formula": "Fórmula"
    }
+  },
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} subtarea",
+      "subtasks_plural": "{{count}} subtareas",
+      "comments": "{{count}} comentario",
+      "comments_plural": "{{count}} comentarios",
+      "attachments": "{{count}} archivo adjunto",
+      "attachments_plural": "{{count}} archivos adjuntos",
+      "subscribers": "La tarea tiene suscriptores",
+      "dependencies": "La tarea tiene dependencias",
+      "recurring": "Tarea recurrente"
+    }
  }
 }
--- a/worklenz-frontend/public/locales/pt/task-list-filters.json
+++ b/worklenz-frontend/public/locales/pt/task-list-filters.json
@@ -52,5 +52,18 @@
  "selectCategory": "Selecionar uma categoria",
  "pleaseEnterAName": "Por favor, insira um nome",
  "pleaseSelectACategory": "Por favor, selecione uma categoria",
-  "create": "Criar"
+  "create": "Criar",
+
+  "searchTasks": "Pesquisar tarefas...",
+  "searchPlaceholder": "Pesquisar...",
+  "fieldsText": "Campos",
+  "loadingFilters": "Carregando filtros...",
+  "noOptionsFound": "Nenhuma opção encontrada",
+  "filtersActive": "filtros ativos",
+  "filterActive": "filtro ativo",
+  "clearAll": "Limpar tudo",
+  "clearing": "Limpando...",
+  "cancel": "Cancelar",
+  "search": "Pesquisar",
+  "groupedBy": "Agrupado por"
 }
--- a/worklenz-frontend/public/locales/pt/task-list-table.json
+++ b/worklenz-frontend/public/locales/pt/task-list-table.json
@@ -108,5 +108,19 @@
      "key": "Chave",
      "formula": "Fórmula"
    }
+  },
+
+  "indicators": {
+    "tooltips": {
+      "subtasks": "{{count}} subtarefa",
+      "subtasks_plural": "{{count}} subtarefas",
+      "comments": "{{count}} comentário",
+      "comments_plural": "{{count}} comentários",
+      "attachments": "{{count}} anexo",
+      "attachments_plural": "{{count}} anexos",
+      "subscribers": "A tarefa tem assinantes",
+      "dependencies": "A tarefa tem dependências",
+      "recurring": "Tarefa recorrente"
+    }
  }
 }
--- a/worklenz-frontend/src/components/board/taskCard/TaskCard.tsx
+++ b/worklenz-frontend/src/components/board/taskCard/TaskCard.tsx
@@ -284,7 +284,7 @@ const TaskCard: React.FC<taskProps> = ({ task }) => {
                    format={value => formatDate(value)}
                  />
                </div>
-                {task.sub_tasks_count && task.sub_tasks_count > 0 && (
+                {task.sub_tasks_count && task.sub_tasks_count > 1 && (
                  <Button
                    onClick={() => setIsSubTaskShow(!isSubTaskShow)}
                    size="small"
@@ -306,7 +306,7 @@ const TaskCard: React.FC<taskProps> = ({ task }) => {

            {isSubTaskShow &&
              task.sub_tasks_count &&
-              task.sub_tasks_count > 0 &&
+              task.sub_tasks_count > 1 &&
              task.sub_tasks?.map(subtask => <SubTaskCard subtask={subtask} />)}
          </div>
        </div>
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx
@@ -187,7 +187,9 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
            <Flex gap={4} align="center">
              <CustomDueDatePicker task={task} onDateChange={setDueDate} />

-              {/* Subtask Section */}
+              {/* Subtask Section - only show if count > 1 */}
+              {task.sub_tasks_count != null && Number(task.sub_tasks_count) > 1 && (
+                <Tooltip title={t(`indicators.tooltips.subtasks${Number(task.sub_tasks_count) === 1 ? '' : '_plural'}`, { count: Number(task.sub_tasks_count) })}>
                  <Button
                    onClick={handleSubtaskButtonClick}
                    size="small"
@@ -206,10 +208,12 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
                      }}
                    >
                      <ForkOutlined rotate={90} />
-                  <span>{task.sub_tasks_count}</span>
+                      <span>{task.sub_tasks_count || 0}</span>
                      {task.show_sub_tasks ? <CaretDownFilled /> : <CaretRightFilled />}
                    </Tag>
                  </Button>
+                </Tooltip>
+              )}
            </Flex>
          </Flex>
          <Flex vertical gap={8}>
--- a/worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskCard.tsx
+++ b/worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskCard.tsx
@@ -10,6 +10,7 @@ import {
 } from '@ant-design/icons';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
+import { useTranslation } from 'react-i18next';

 const { Text } = Typography;

@@ -36,6 +37,7 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
  onSelect,
  onToggleSubtasks,
 }) => {
+  const { t } = useTranslation('task-list-table');
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: task.id!,
    data: {
@@ -195,15 +197,19 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
                <ClockCircleOutlined /> {task.time_spent_string}
              </span>
            )}
-            {task.comments_count && task.comments_count > 0 && (
+            {task.comments_count && task.comments_count > 1 && (
+              <Tooltip title={t(`indicators.tooltips.comments${task.comments_count === 1 ? '' : '_plural'}`, { count: task.comments_count })}>
                <span className="kanban-task-indicator">
                  <MessageOutlined /> {task.comments_count}
                </span>
+              </Tooltip>
            )}
-            {task.attachments_count && task.attachments_count > 0 && (
+            {task.attachments_count && task.attachments_count > 1 && (
+              <Tooltip title={t(`indicators.tooltips.attachments${task.attachments_count === 1 ? '' : '_plural'}`, { count: task.attachments_count })}>
                <span className="kanban-task-indicator">
                  <PaperClipOutlined /> {task.attachments_count}
                </span>
+              </Tooltip>
            )}
          </div>
        </Space>
--- a/worklenz-frontend/src/components/project-task-filters/create-status-button/create-status-button.tsx
+++ b/worklenz-frontend/src/components/project-task-filters/create-status-button/create-status-button.tsx
@@ -21,7 +21,7 @@ const CreateStatusButton = () => {
        onClick={() => dispatch(toggleDrawer())}
        icon={
          <SettingOutlined
-            style={{ color: themeMode === 'dark' ? colors.white : colors.midBlue }}
+            style={{ color: themeMode === 'dark' ? colors.white : 'black' }}
          />
        }
      />
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/attachments/attachments-preview.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/attachments/attachments-preview.tsx
@@ -15,6 +15,8 @@ import taskAttachmentsApiService from '@/api/tasks/task-attachments.api.service'
 import logger from '@/utils/errorLogger';
 import taskCommentsApiService from '@/api/tasks/task-comments.api.service';
 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';

 interface AttachmentsPreviewProps {
  attachment: ITaskAttachmentViewModel;
@@ -28,6 +30,7 @@ const AttachmentsPreview = ({
  isCommentAttachment = false,
 }: AttachmentsPreviewProps) => {
  const { selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
+  const dispatch = useAppDispatch();
  const [deleting, setDeleting] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [currentFileUrl, setCurrentFileUrl] = useState<string | null>(null);
@@ -88,6 +91,7 @@ const AttachmentsPreview = ({
      if (isCommentAttachment) {
        const res = await taskCommentsApiService.deleteAttachment(id, selectedTaskId);
        if (res.done) {
+          // Let the parent component handle the refetch and Redux update
          document.dispatchEvent(new Event('task-comment-update'));
        }
      } else {
@@ -96,6 +100,7 @@ const AttachmentsPreview = ({
          if (onDelete) {
            onDelete(id);
          }
+          // Parent component will handle the refetch and Redux update
        }
      }
    } catch (e) {
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
@@ -13,12 +13,16 @@ import logger from '@/utils/errorLogger';
 import TaskViewCommentEdit from './task-view-comment-edit';
 import './task-comments.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { colors } from '@/styles/colors';
 import AttachmentsGrid from '../attachments/attachments-grid';
 import { TFunction } from 'i18next';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
 import { sanitizeHtml } from '@/utils/sanitizeInput';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';

 // Helper function to format date for time separators
 const formatDateForSeparator = (date: string) => {
@@ -90,6 +94,8 @@ const TaskComments = ({ taskId, t }: { taskId?: string; t: TFunction }) => {
  const auth = useAuthService();
  const themeMode = useAppSelector(state => state.themeReducer.mode);
  const currentUserId = auth.getCurrentSession()?.id;
+  const { socket, connected } = useSocket();
+  const dispatch = useAppDispatch();

  const getComments = useCallback(
    async (showLoading = true) => {
@@ -115,6 +121,14 @@ const TaskComments = ({ taskId, t }: { taskId?: string; t: TFunction }) => {
          });

          setComments(sortedComments);
+          
+          // Update Redux state with the current comment count
+          dispatch(updateTaskCounts({
+            taskId,
+            counts: {
+              comments_count: sortedComments.length
+            }
+          }));
        }

        setLoading(false);
@@ -123,7 +137,7 @@ const TaskComments = ({ taskId, t }: { taskId?: string; t: TFunction }) => {
        setLoading(false);
      }
    },
-    [taskId]
+    [taskId, dispatch]
  );

  useEffect(() => {
@@ -196,8 +210,11 @@ const TaskComments = ({ taskId, t }: { taskId?: string; t: TFunction }) => {
    try {
      const res = await taskCommentsApiService.delete(id, taskId);
      if (res.done) {
+        // Refresh comments to get updated list
        await getComments(false);
-        document.dispatchEvent(new Event('task-comment-update'));
+        
+        // The comment count will be updated by getComments function
+        // No need to dispatch here as getComments already handles it
      }
    } catch (e) {
      logger.error('Error deleting comment', e);
@@ -227,7 +244,9 @@ const TaskComments = ({ taskId, t }: { taskId?: string; t: TFunction }) => {
        await getComments(false);

        // Dispatch event to notify that an attachment was deleted
-        document.dispatchEvent(new Event('task-comment-update'));
+        document.dispatchEvent(new CustomEvent('task-comment-update', { 
+          detail: { taskId } 
+        }));
      }
    } catch (e) {
      logger.error('Error deleting attachment', e);
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-view-comment-edit.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-view-comment-edit.tsx
@@ -6,6 +6,8 @@ import logger from '@/utils/errorLogger';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { colors } from '@/styles/colors';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';

 interface TaskViewCommentEditProps {
  commentData: ITaskCommentViewModel;
@@ -27,6 +29,7 @@ const TaskViewCommentEdit = ({ commentData, onUpdated }: TaskViewCommentEditProp
  const themeMode = useAppSelector(state => state.themeReducer.mode);
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState('');
+  const { socket, connected } = useSocket();

  // Initialize content when component mounts
  useEffect(() => {
@@ -55,7 +58,9 @@ const TaskViewCommentEdit = ({ commentData, onUpdated }: TaskViewCommentEditProp
        onUpdated(commentData);

        // Dispatch event to notify that a comment was updated
-        document.dispatchEvent(new Event('task-comment-update'));
+        document.dispatchEvent(new CustomEvent('task-comment-update', { 
+          detail: { taskId: commentData.task_id } 
+        }));
      }
    } catch (e) {
      logger.error('Error updating comment', e);
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/dependencies-table.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/dependencies-table.tsx
@@ -14,6 +14,8 @@ import {
 import React, { useState, useEffect } from 'react';
 import { DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { colors } from '@/styles/colors';
 import { TFunction } from 'i18next';
 import { IDependencyType, ITaskDependency } from '@/types/tasks/task-dependency.types';
@@ -40,6 +42,7 @@ const DependenciesTable = ({
  const [hoverRow, setHoverRow] = useState<string | null>(null);
  const [isDependencyInputShow, setIsDependencyInputShow] = useState(false);
  const { projectId } = useAppSelector(state => state.projectReducer);
+  const dispatch = useAppDispatch();
  const [taskList, setTaskList] = useState<{ label: string; value: string }[]>([]);
  const [loadingTaskList, setLoadingTaskList] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
@@ -60,6 +63,14 @@ const DependenciesTable = ({
        setIsDependencyInputShow(false);
        setTaskList([]);
        setSearchTerm('');
+        
+        // Update Redux state with dependency status
+        dispatch(updateTaskCounts({
+          taskId: task.id,
+          counts: {
+            has_dependencies: true
+          }
+        }));
      }
    } catch (error) {
      console.error('Error adding dependency:', error);
@@ -89,6 +100,16 @@ const DependenciesTable = ({
      const res = await taskDependenciesApiService.deleteTaskDependency(dependencyId);
      if (res.done) {
        refreshTaskDependencies();
+        
+        // Update Redux state with dependency status
+        // Check if there are any remaining dependencies
+        const remainingDependencies = taskDependencies.filter(dep => dep.id !== dependencyId);
+        dispatch(updateTaskCounts({
+          taskId: task.id,
+          counts: {
+            has_dependencies: remainingDependencies.length > 0
+          }
+        }));
      }
    } catch (error) {
      console.error('Error deleting dependency:', error);
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-recurring-config/task-drawer-recurring-config.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-recurring-config/task-drawer-recurring-config.tsx
@@ -25,6 +25,7 @@ import { ITaskViewModel } from '@/types/tasks/task.types';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { updateRecurringChange } from '@/features/tasks/tasks.slice';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { taskRecurringApiService } from '@/api/tasks/task-recurring.api.service';
 import logger from '@/utils/errorLogger';
 import { setTaskRecurringSchedule } from '@/features/task-drawer/task-drawer.slice';
@@ -100,6 +101,14 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
          setTaskRecurringSchedule({ schedule_id: schedule.id as string, task_id: task.id })
        );

+        // Update Redux state with recurring task status
+        dispatch(updateTaskCounts({
+          taskId: task.id,
+          counts: {
+            schedule_id: schedule.id as string || null
+          }
+        }));
+
        setRecurring(checked);
        if (!checked) setShowConfig(false);
      }
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
@@ -2,6 +2,8 @@ import { Button, Flex, Form, Mentions, Space, Tooltip, Typography, message } fro
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { PaperClipOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { colors } from '@/styles/colors';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
@@ -47,6 +49,7 @@ const InfoTabFooter = () => {

  const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
  const { projectId } = useAppSelector(state => state.projectReducer);
+  const dispatch = useAppDispatch();

  const [members, setMembers] = useState<ITeamMember[]>([]);
  const [membersLoading, setMembersLoading] = useState<boolean>(false);
@@ -156,8 +159,10 @@ const InfoTabFooter = () => {
        setCommentValue('');

        // Dispatch event to notify that a comment was created
-        // This will trigger scrolling to the new comment
-        document.dispatchEvent(new Event('task-comment-create'));
+        // This will trigger the task comments component to refresh and update Redux
+        document.dispatchEvent(new CustomEvent('task-comment-create', { 
+          detail: { taskId: selectedTaskId } 
+        }));
      }
    } catch (error) {
      logger.error('Failed to create comment:', error);
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/notify-member-selector.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/notify-member-selector.tsx
@@ -15,6 +15,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { TFunction } from 'i18next';

 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { ITaskViewModel } from '@/types/tasks/task.types';
 import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
 import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
@@ -27,7 +29,6 @@ import { useAuthService } from '@/hooks/useAuth';
 import Avatars from '@/components/avatars/avatars';
 import { tasksApiService } from '@/api/tasks/tasks.api.service';
 import { setTaskSubscribers } from '@/features/task-drawer/task-drawer.slice';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
 import { InlineMember } from '@/types/teamMembers/inlineMember.types';
@@ -100,6 +101,14 @@ const NotifyMemberSelector = ({ task, t }: NotifyMemberSelectorProps) => {
      socket?.emit(SocketEvents.TASK_SUBSCRIBERS_CHANGE.toString(), body);
      socket?.once(SocketEvents.TASK_SUBSCRIBERS_CHANGE.toString(), (data: InlineMember[]) => {
        dispatch(setTaskSubscribers(data));
+        
+        // Update Redux state with subscriber status
+        dispatch(updateTaskCounts({
+          taskId: task.id,
+          counts: {
+            has_subscribers: data && data.length > 0
+          }
+        }));
      });
    } catch (error) {
      logger.error('Error notifying member:', error);
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/task-drawer-info-tab.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/task-drawer-info-tab.tsx
@@ -8,6 +8,7 @@ import { useAppSelector } from '@/hooks/useAppSelector';
 import TaskDetailsForm from './task-details-form';
 import { fetchTask } from '@/features/tasks/tasks.slice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { TFunction } from 'i18next';
 import { subTasksApiService } from '@/api/tasks/subtasks.api.service';
 import { ISubTask } from '@/types/tasks/subTask.types';
@@ -24,6 +25,7 @@ import AttachmentsGrid from './attachments/attachments-grid';
 import TaskComments from './comments/task-comments';
 import { ITaskCommentViewModel } from '@/types/tasks/task-comments.types';
 import taskCommentsApiService from '@/api/tasks/task-comments.api.service';
+import { ITaskViewModel } from '@/types/tasks/task.types';

 interface TaskDrawerInfoTabProps {
  t: TFunction;
@@ -148,7 +150,7 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
      label: <Typography.Text strong>{t('taskInfoTab.dependencies.title')}</Typography.Text>,
      children: (
        <DependenciesTable
-          task={taskFormViewModel?.task || {}}
+          task={(taskFormViewModel?.task as ITaskViewModel) || {} as ITaskViewModel}
          t={t}
          taskDependencies={taskDependencies}
          loadingTaskDependencies={loadingTaskDependencies}
@@ -214,6 +216,14 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
      const res = await taskDependenciesApiService.getTaskDependencies(selectedTaskId);
      if (res.done) {
        setTaskDependencies(res.body);
+        
+        // Update Redux state with the current dependency status
+        dispatch(updateTaskCounts({
+          taskId: selectedTaskId,
+          counts: {
+            has_dependencies: res.body.length > 0
+          }
+        }));
      }
    } catch (error) {
      logger.error('Error fetching task dependencies:', error);
@@ -229,6 +239,14 @@ const TaskDrawerInfoTab = ({ t }: TaskDrawerInfoTabProps) => {
      const res = await taskAttachmentsApiService.getTaskAttachments(selectedTaskId);
      if (res.done) {
        setTaskAttachments(res.body);
+        
+        // Update Redux state with the current attachment count
+        dispatch(updateTaskCounts({
+          taskId: selectedTaskId,
+          counts: {
+            attachments_count: res.body.length
+          }
+        }));
      }
    } catch (error) {
      logger.error('Error fetching task attachments:', error);
--- a/worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx
@@ -26,12 +26,17 @@ const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visible
      case 'title':
        return (
          <div style={baseStyle} className="flex items-center">
-            {/* Subtask indentation - tighter spacing */}
            <div className="w-4" />
            <div className="w-2" />
            <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
          </div>
        );
+      case 'description':
+        return (
+          <div style={baseStyle} className="flex items-center px-2">
+            <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
      case 'status':
        return (
          <div style={baseStyle} className="flex items-center">
@@ -60,7 +65,7 @@ const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visible
      case 'progress':
        return (
          <div style={baseStyle} className="flex items-center">
-            <div className="h-2 w-16 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse" />
+            <div className="h-4 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
          </div>
        );
      case 'labels':
@@ -85,7 +90,7 @@ const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visible
      case 'estimation':
        return (
          <div style={baseStyle} className="flex items-center">
-            <div className="h-4 w-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+            <div className="h-4 w-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
          </div>
        );
      case 'startDate':
@@ -126,7 +131,7 @@ const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visible
  return (
    <div className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
      <div className="flex items-center min-w-max px-4 py-2 border-b border-gray-200 dark:border-gray-700">
-        {visibleColumns.map((column) => (
+        {visibleColumns.map((column, index) => (
          <div key={column.id}>
            {renderColumn(column.id, column.width)}
          </div>
--- a/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
@@ -166,8 +166,6 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
    setCategoryModalVisible(true);
  }, []);

-
-
  // Handle category change
  const handleCategoryChange = useCallback(async (categoryId: string, e?: React.MouseEvent) => {
    e?.stopPropagation();
@@ -237,7 +235,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
  return (
    <div
      ref={setNodeRef}
-      className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 rounded-t-md ${
+      className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2 ${
        isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
      }`}
      style={{
@@ -292,108 +290,18 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
      <div className="flex items-center flex-1 ml-1">
        {/* Group name and count */}
        <div className="flex items-center">
-          {isEditingName && isOwnerOrAdmin ? (
-            <Input
-              value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
-              onKeyDown={handleNameKeyDown}
-              onBlur={handleNameBlur}
-              className="text-sm font-semibold px-2 py-1 rounded-md transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
-              style={{ 
-                color: headerTextColor,
-                fontSize: '14px',
-                fontWeight: 600,
-                width: `${Math.max(editingName.length * 8 + 16, 80)}px`,
-                minWidth: '80px',
-                backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                border: `1px solid ${headerTextColor}40`,
-                backdropFilter: 'blur(4px)'
-              }}
-              styles={{
-                input: {
-                  color: headerTextColor,
-                  backgroundColor: 'transparent',
-                  border: 'none',
-                  outline: 'none',
-                  boxShadow: 'none',
-                  padding: '0'
-                }
-              }}
-              autoFocus
-              disabled={isRenaming}
-              placeholder={t('enterGroupName')}
-            />
-          ) : (
          <span 
-              className={`text-sm font-semibold ${isOwnerOrAdmin ? 'cursor-pointer hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10 rounded px-2 py-1 transition-all duration-200 hover:shadow-sm' : ''}`}
-              onClick={handleNameClick}
+            className="text-sm font-semibold pr-2"
            style={{ color: headerTextColor }}
-              title={isOwnerOrAdmin ? t('clickToEditGroupName') : ''}
          >
            {group.name}
          </span>
-          )}
          <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
            ({group.count})
          </span>
        </div>
-        
-        {/* Three dots menu */}
-        <div className="flex items-center justify-center ml-2">
-          <Dropdown
-            menu={{ items: menuItems }}
-            trigger={['click']}
-            open={dropdownVisible}
-            onOpenChange={setDropdownVisible}
-            placement="bottomLeft"
-          >
-            <button
-              className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-all duration-200 ease-out"
-              style={{ color: headerTextColor }}
-              onClick={(e) => {
-                e.stopPropagation();
-                setDropdownVisible(!dropdownVisible);
-              }}
-            >
-              <EllipsisHorizontalIcon className="h-4 w-4" />
-            </button>
-          </Dropdown>
      </div>
    </div>
-
-
-
-      {/* Change Category Modal */}
-      <Modal
-        title="Change Category"
-        open={categoryModalVisible}
-        onCancel={() => setCategoryModalVisible(false)}
-        footer={null}
-        width={400}
-      >
-        <div className="py-4">
-          <div className="space-y-2">
-            {statusCategories?.map((category) => (
-              <div
-                key={category.id}
-                className="flex items-center justify-between p-3 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                onClick={(e) => category.id && handleCategoryChange(category.id, e)}
-              >
-                <Flex align="center" gap={12}>
-                  <Badge color={category.color_code} />
-                  <span className="font-medium">{category.name}</span>
-                </Flex>
-                {isChangingCategory && (
-                  <div className="text-blue-500">
-                    <ArrowPathIcon className="h-4 w-4 animate-spin" />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </Modal>
-    </div>
  );
 };

--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useEffect } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { GroupedVirtuoso } from 'react-virtuoso';
 import {
  DndContext,
@@ -100,6 +100,13 @@ const TaskListV2: React.FC = () => {
  const customColumns = useAppSelector(selectCustomColumns);
  const loadingColumns = useAppSelector(selectLoadingColumns);

+  // Refs for scroll synchronization
+  const headerScrollRef = useRef<HTMLDivElement>(null);
+  const contentScrollRef = useRef<HTMLDivElement>(null);
+
+  // State hooks
+  const [initializedFromDatabase, setInitializedFromDatabase] = useState(false);
+
  // Configure sensors for drag and drop
  const sensors = useSensors(
    useSensor(PointerSensor, {
@@ -156,18 +163,37 @@ const TaskListV2: React.FC = () => {
        const fieldType = column.custom_column_obj?.fieldType;
        let defaultWidth = 160;
        if (fieldType === 'selection') {
-          defaultWidth = 180; // Extra width for selection dropdowns
+          defaultWidth = 150; // Reduced width for selection dropdowns
        } else if (fieldType === 'people') {
          defaultWidth = 170; // Extra width for people with avatars
        }
        
+        // Map the configuration data structure to the expected format
+        const customColumnObj = column.custom_column_obj || (column as any).configuration;
+        
+        // Transform configuration format to custom_column_obj format if needed
+        let transformedColumnObj = customColumnObj;
+        if (customColumnObj && !customColumnObj.fieldType && customColumnObj.field_type) {
+          transformedColumnObj = {
+            ...customColumnObj,
+            fieldType: customColumnObj.field_type,
+            numberType: customColumnObj.number_type,
+            labelPosition: customColumnObj.label_position,
+            previewValue: customColumnObj.preview_value,
+            firstNumericColumn: customColumnObj.first_numeric_column_key,
+            secondNumericColumn: customColumnObj.second_numeric_column_key,
+            selectionsList: customColumnObj.selections_list || customColumnObj.selectionsList || [],
+            labelsList: customColumnObj.labels_list || customColumnObj.labelsList || [],
+          };
+        }
+        
        return {
          id: column.key || column.id || 'unknown',
          label: column.name || t('customColumns.customColumnHeader'),
          width: `${(column as any).width || defaultWidth}px`,
          key: column.key || column.id || 'unknown',
          custom_column: true,
-          custom_column_obj: column.custom_column_obj || (column as any).configuration,
+          custom_column_obj: transformedColumnObj,
          isCustom: true,
          name: column.name,
          uuid: column.id,
@@ -177,36 +203,6 @@ const TaskListV2: React.FC = () => {
    return [...baseVisibleColumns, ...visibleCustomColumns];
  }, [fields, columns, customColumns, t]);

-  // Sync local field changes with backend column configuration (debounced)
-  useEffect(() => {
-    if (!urlProjectId || columns.length === 0 || fields.length === 0) return;
-
-    const timeoutId = setTimeout(() => {
-      const changedFields = fields.filter(field => {
-        const backendColumn = columns.find(c => c.key === field.key);
-        if (backendColumn) {
-          return (backendColumn.pinned ?? false) !== field.visible;
-        }
-        return false;
-      });
-
-      changedFields.forEach(field => {
-        const backendColumn = columns.find(c => c.key === field.key);
-        if (backendColumn) {
-          dispatch(updateColumnVisibility({
-            projectId: urlProjectId,
-            item: {
-              ...backendColumn,
-              pinned: field.visible
-            }
-          }));
-        }
-      });
-    }, 500);
-
-    return () => clearTimeout(timeoutId);
-  }, [fields, columns, urlProjectId, dispatch]);
-
  // Effects
  useEffect(() => {
    if (urlProjectId) {
@@ -215,6 +211,37 @@ const TaskListV2: React.FC = () => {
    }
  }, [dispatch, urlProjectId]);

+  // Initialize field visibility from database when columns are loaded (only once)
+  useEffect(() => {
+    if (columns.length > 0 && fields.length > 0 && !initializedFromDatabase) {
+      // Update local fields to match database state only on initial load
+      import('@/features/task-management/taskListFields.slice').then(({ setFields }) => {
+        // Create updated fields based on database column state
+        const updatedFields = fields.map(field => {
+          const backendColumn = columns.find(c => c.key === field.key);
+          if (backendColumn) {
+            return {
+              ...field,
+              visible: backendColumn.pinned ?? field.visible
+            };
+          }
+          return field;
+        });
+        
+        // Only update if there are actual changes
+        const hasChanges = updatedFields.some((field, index) => 
+          field.visible !== fields[index].visible
+        );
+        
+        if (hasChanges) {
+          dispatch(setFields(updatedFields));
+        }
+        
+        setInitializedFromDatabase(true);
+      });
+    }
+  }, [columns, fields, dispatch, initializedFromDatabase]);
+
  // Event handlers
  const handleTaskSelect = useCallback(
    (taskId: string, event: React.MouseEvent) => {
@@ -256,6 +283,24 @@ const TaskListV2: React.FC = () => {
        project_id: urlProjectId,
      };

+      // Update the Redux store immediately for optimistic updates
+      const currentTask = allTasks.find(task => task.id === taskId);
+      if (currentTask) {
+        const updatedTask = {
+          ...currentTask,
+          custom_column_values: {
+            ...currentTask.custom_column_values,
+            [columnKey]: value,
+          },
+          updated_at: new Date().toISOString(),
+        };
+        
+        // Import and dispatch the updateTask action
+        import('@/features/task-management/task-management.slice').then(({ updateTask }) => {
+          dispatch(updateTask(updatedTask));
+        });
+      }
+
      if (socket && connected) {
        socket.emit(SocketEvents.TASK_CUSTOM_COLUMN_UPDATE.toString(), JSON.stringify(body));
      } else {
@@ -264,7 +309,7 @@ const TaskListV2: React.FC = () => {
    } catch (error) {
      console.error('Error updating custom column value:', error);
    }
-  }, [urlProjectId, socket, connected]);
+  }, [urlProjectId, socket, connected, allTasks, dispatch]);

  // Custom column settings handler
  const handleCustomColumnSettings = useCallback((columnKey: string) => {
@@ -272,9 +317,13 @@ const TaskListV2: React.FC = () => {
    
    const columnData = visibleColumns.find(col => col.key === columnKey || col.id === columnKey);
    
+    // Use the UUID for API calls, not the key (nanoid)
+    // For custom columns, prioritize the uuid field over id field
+    const columnId = (columnData as any)?.uuid || columnData?.id || columnKey;
+    
    dispatch(setCustomColumnModalAttributes({ 
      modalType: 'edit', 
-      columnId: columnKey,
+      columnId: columnId,
      columnData: columnData
    }));
    dispatch(toggleCustomColumnModalOpen(true));
@@ -286,6 +335,11 @@ const TaskListV2: React.FC = () => {
    // The global socket handler will handle the real-time update
  }, []);

+  // Handle scroll synchronization - disabled since header is now sticky inside content
+  const handleContentScroll = useCallback(() => {
+    // No longer needed since header scrolls naturally with content
+  }, []);
+
  // Memoized values for GroupedVirtuoso
  const virtuosoGroups = useMemo(() => {
    let currentTaskIndex = 0;
@@ -344,6 +398,8 @@ const TaskListV2: React.FC = () => {
      const isGroupCollapsed = collapsedGroups.has(group.id);
      const isGroupEmpty = group.actualCount === 0;

+
+
      return (
        <div className={groupIndex > 0 ? 'mt-2' : ''}>
          <TaskGroupHeader
@@ -360,7 +416,7 @@ const TaskListV2: React.FC = () => {
          {isGroupEmpty && !isGroupCollapsed && (
            <div className="relative w-full">
              <div className="flex items-center min-w-max px-1 py-3">
-                {visibleColumns.map((column) => (
+                {visibleColumns.map((column, index) => (
                  <div
                    key={`empty-${column.id}`}
                    style={{ width: column.width, flexShrink: 0 }}
@@ -383,6 +439,8 @@ const TaskListV2: React.FC = () => {
  const renderTask = useCallback(
    (taskIndex: number) => {
      const item = virtuosoItems[taskIndex];
+
+      
      if (!item || !urlProjectId) return null;
      
      if ('isAddTaskRow' in item && item.isAddTaskRow) {
@@ -412,9 +470,9 @@ const TaskListV2: React.FC = () => {

  // Render column headers
  const renderColumnHeaders = useCallback(() => (
-            <div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center px-1 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
-                {visibleColumns.map(column => {
+    <div className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700" style={{ width: '100%', minWidth: 'max-content' }}>
+      <div className="flex items-center px-3 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
+        {visibleColumns.map((column, index) => {
          const columnStyle: ColumnStyle = {
            width: column.width,
            flexShrink: 0,
@@ -449,17 +507,41 @@ const TaskListV2: React.FC = () => {
            </div>
          );
        })}
-                <div className="flex items-center justify-center" style={{ width: '60px', flexShrink: 0 }}>
+        {/* Add Custom Column Button - positioned at the end and scrolls with content */}
+        <div className="flex items-center justify-center ml-2" style={{ width: '50px', flexShrink: 0 }}>
          <AddCustomColumnButton />
        </div>
      </div>
    </div>
  ), [visibleColumns, t, handleCustomColumnSettings]);

+
+
  // Loading and error states
  if (loading || loadingColumns) return <Skeleton active />;
  if (error) return <div>Error: {error}</div>;
  
+  // Show message when no data
+  if (groups.length === 0 && !loading) {
+    return (
+      <div className="flex flex-col bg-white dark:bg-gray-900 h-full">
+        <div className="flex-none px-6 py-4" 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">
+              No task groups found
+            </div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              Tasks will appear here when they are created or when filters are applied.
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
  return (
    <DndContext
      sensors={sensors}
@@ -468,26 +550,35 @@ const TaskListV2: React.FC = () => {
      onDragOver={handleDragOver}
      onDragEnd={handleDragEnd}
    >
-      <div className="flex flex-col bg-white dark:bg-gray-900" style={{ height: '100vh', overflow: 'hidden' }}>
+      <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
        {/* Task Filters */}
-        <div className="flex-none px-4 py-3" style={{ height: '66px', flexShrink: 0 }}>
+        <div className="flex-none px-6 py-4" style={{ height: '74px', flexShrink: 0 }}>
          <ImprovedTaskFilters position="list" />
        </div>

+        {/* Spacing between filters and table */}
+        <div className="flex-none h-4" style={{ flexShrink: 0 }}></div>
+
        {/* Table Container */}
        <div 
-          className="flex-1 overflow-auto border border-gray-200 dark:border-gray-700" 
+          className="border border-gray-200 dark:border-gray-700 mx-6 rounded-lg" 
          style={{ 
-            height: '600px',
-            maxHeight: '600px'
+            height: 'calc(100vh - 140px)',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
          }}
        >
-          <div style={{ minWidth: 'max-content' }}>
-            {/* Column Headers */}
+          {/* Task List Content with Sticky Header */}
+          <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()}
-
-            {/* Task List Content */}
-            <div className="bg-white dark:bg-gray-900">
+            </div>
            <SortableContext
              items={virtuosoItems
                .filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
@@ -495,26 +586,31 @@ const TaskListV2: React.FC = () => {
                .filter((id): id is string => id !== undefined)}
              strategy={verticalListSortingStrategy}
            >
-                <GroupedVirtuoso
-                  style={{ height: '550px' }}
-                  groupCounts={virtuosoGroupCounts}
-                  groupContent={renderGroup}
-                  itemContent={renderTask}
-                  components={{
-                    List: React.forwardRef<
-                      HTMLDivElement,
-                      { style?: React.CSSProperties; children?: React.ReactNode }
-                    >(({ style, children }, ref) => (
-                      <div ref={ref} style={style || {}} className="virtuoso-list-container bg-white dark:bg-gray-900">
-                        {children}
+              <div style={{ minWidth: 'max-content' }}>
+                {/* Render groups manually for debugging */}
+                {virtuosoGroups.map((group, groupIndex) => (
+                  <div key={group.id}>
+                    {/* Group Header */}
+                    {renderGroup(groupIndex)}
+                    
+                    {/* Group Tasks */}
+                    {!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => {
+                      const globalTaskIndex = virtuosoGroups
+                        .slice(0, groupIndex)
+                        .reduce((sum, g) => sum + g.count, 0) + taskIndex;
+                      
+                      return (
+                        <div key={task.id || `add-task-${group.id}-${taskIndex}`}>
+                          {renderTask(globalTaskIndex)}
+                        </div>
+                      );
+                    })}
+                  </div>
+                ))}
              </div>
-                    )),
-                  }}
-                />
            </SortableContext>
          </div>
        </div>
-        </div>

        {/* Drag Overlay */}
        <DragOverlay dropAnimation={null}>
--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useMemo, useCallback, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined, ArrowsAltOutlined } from '@ant-design/icons';
-import { Checkbox, DatePicker } from 'antd';
+import { CheckCircleOutlined, HolderOutlined, CloseOutlined, DownOutlined, RightOutlined, DoubleRightOutlined, ArrowsAltOutlined, CommentOutlined, EyeOutlined, PaperClipOutlined, MinusCircleOutlined, RetweetOutlined } from '@ant-design/icons';
+import { Checkbox, DatePicker, Tooltip } from 'antd';
 import { dayjs, taskManagementAntdConfig } from '@/shared/antd-imports';
 import { Task } from '@/types/task-management.types';
 import { InlineMember } from '@/types/teamMembers/inlineMember.types';
@@ -190,7 +190,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
      name: label.name,
      color_code: label.color,
    })) || [],
-  }), [task.id, task.title, task.name, task.parent_task_id, task.labels]);
+  }), [task.id, task.title, task.name, task.parent_task_id, task.labels, task.labels?.length]);

  // Handle checkbox change
  const handleCheckboxChange = useCallback((e: any) => {
@@ -261,7 +261,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
      case 'dragHandle':
        return (
          <div
-            className={`flex items-center justify-center ${isSubtask ? '' : 'cursor-grab active:cursor-grabbing'}`}
+            className="flex items-center justify-center"
            style={baseStyle}
            {...(isSubtask ? {} : { ...attributes, ...listeners })}
          >
@@ -301,7 +301,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
                <button
                  onClick={handleToggleExpansion}
                  className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out ${
-                    task.sub_tasks_count && Number(task.sub_tasks_count) > 0 
+                    task.sub_tasks_count != null && Number(task.sub_tasks_count) > 0 
                      ? 'opacity-100' 
                      : 'opacity-0 group-hover:opacity-100'
                  }`}
@@ -326,15 +326,74 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
                  {taskDisplayName}
                </span>
                
-                {/* Subtask count indicator */}
-                {!isSubtask && task.sub_tasks_count && Number(task.sub_tasks_count) > 0 && (
+                {/* Subtask count indicator - only show if count > 1 */}
+                {!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count !== 0 && (
+                  <Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
                    <div className="flex items-center gap-1 px-2 py-1 bg-blue-50 dark:bg-blue-900/20 rounded-md">
                      <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
                        {task.sub_tasks_count}
                      </span>
                      <DoubleRightOutlined className="text-xs text-blue-600 dark:text-blue-400" />
                    </div>
+                  </Tooltip>
                )}
+
+                {/* Task indicators */}
+                <div className="flex items-center gap-1 ml-2">
+                  {/* Comments count indicator - only show if count > 1 */}
+                  {task.comments_count != null && task.comments_count !== 0 && (
+                    <Tooltip title={t(`indicators.tooltips.comments${task.comments_count === 1 ? '' : '_plural'}`, { count: task.comments_count })}>
+                      <div className="flex items-center gap-1">
+                        <CommentOutlined 
+                          className="text-gray-500 dark:text-gray-400" 
+                          style={{ fontSize: 14 }} 
+                        />
+                      </div>
+                    </Tooltip>
+                  )}
+
+                  {/* Subscribers indicator */}
+                  {task.has_subscribers && (
+                    <Tooltip title={t('indicators.tooltips.subscribers')}>
+                      <EyeOutlined 
+                        className="text-gray-500 dark:text-gray-400" 
+                        style={{ fontSize: 14 }} 
+                      />
+                    </Tooltip>
+                  )}
+
+                  {/* Attachments count indicator - only show if count > 1 */}
+                  {task.attachments_count != null && task.attachments_count !== 0 && (
+                    <Tooltip title={t(`indicators.tooltips.attachments${task.attachments_count === 1 ? '' : '_plural'}`, { count: task.attachments_count })}>
+                      <div className="flex items-center gap-1">
+                        <PaperClipOutlined 
+                          className="text-gray-500 dark:text-gray-400" 
+                          style={{ fontSize: 14 }} 
+                        />
+                      </div>
+                    </Tooltip>
+                  )}
+
+                  {/* Dependencies indicator */}
+                  {task.has_dependencies && (
+                    <Tooltip title={t('indicators.tooltips.dependencies')}>
+                      <MinusCircleOutlined 
+                        className="text-gray-500 dark:text-gray-400" 
+                        style={{ fontSize: 14 }} 
+                      />
+                    </Tooltip>
+                  )}
+
+                  {/* Recurring task indicator */}
+                  {task.schedule_id && (
+                    <Tooltip title={t('indicators.tooltips.recurring')}>
+                      <RetweetOutlined 
+                        className="text-gray-500 dark:text-gray-400" 
+                        style={{ fontSize: 14 }} 
+                      />
+                    </Tooltip>
+                  )}
+                </div>
              </div>
            </div>
            
@@ -352,6 +411,24 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
          </div>
        );

+      case 'description':
+        return (
+          <div style={baseStyle} className="px-2">
+            <div
+              className="text-sm text-gray-600 dark:text-gray-400 truncate"
+              style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxHeight: '24px',
+                lineHeight: '24px',
+              }}
+              title={task.description || ''}
+              dangerouslySetInnerHTML={{ __html: task.description || '' }}
+            />
+          </div>
+        );
+
      case 'status':
        return (
          <div style={baseStyle}>
@@ -636,8 +713,15 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
    isDarkMode,
    projectId,
    
-    // Task data
+    // Task data - include specific fields that might update via socket
    task,
+    task.labels, // Explicit dependency for labels updates
+    task.phase, // Explicit dependency for phase updates
+    task.comments_count, // Explicit dependency for comments count updates
+    task.has_subscribers, // Explicit dependency for subscribers updates
+    task.attachments_count, // Explicit dependency for attachments count updates
+    task.has_dependencies, // Explicit dependency for dependencies updates
+    task.schedule_id, // Explicit dependency for recurring task updates
    taskDisplayName,
    convertedTask,
    
--- a/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
@@ -93,6 +93,8 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
        return <div style={baseStyle} />;
      case 'taskKey':
        return <div style={baseStyle} />;
+      case 'description':
+        return <div style={baseStyle} />;
      case 'title':
        return (
          <div className="flex items-center h-full" style={baseStyle}>
@@ -119,7 +121,7 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
                  className="w-full h-full border-none shadow-none bg-transparent"
                  style={{ 
                    height: '100%',
-                    minHeight: '42px',
+                    minHeight: '32px',
                    padding: '0',
                    fontSize: '14px'
                  }}
@@ -135,10 +137,12 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
  }, [isAdding, subtaskName, handleAddSubtask, handleCancel, t]);

  return (
-    <div className="flex items-center min-w-max px-1 py-2 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[42px]">
-      {visibleColumns.map((column) =>
-        renderColumn(column.id, column.width)
-      )}
+    <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">
+      {visibleColumns.map((column, index) => (
+        <React.Fragment key={column.id}>
+          {renderColumn(column.id, column.width)}
+        </React.Fragment>
+      ))}
    </div>
  );
 });
--- a/worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx
@@ -92,6 +92,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
      case 'dragHandle':
      case 'checkbox':
      case 'taskKey':
+      case 'description':
        return <div style={baseStyle} />;
      case 'title':
        return (
@@ -134,9 +135,11 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({

  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">
-      {visibleColumns.map((column) =>
-        renderColumn(column.id, column.width)
-      )}
+      {visibleColumns.map((column, index) => (
+        <React.Fragment key={column.id}>
+          {renderColumn(column.id, column.width)}
+        </React.Fragment>
+      ))}
    </div>
  );
 });
--- a/worklenz-frontend/src/components/task-list-v2/components/CustomColumnComponents.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/components/CustomColumnComponents.tsx
@@ -29,7 +29,7 @@ export const AddCustomColumnButton: React.FC = memo(() => {
      <button
        onClick={handleModalOpen}
        className={`
-          group relative w-8 h-8 rounded-lg border-2 border-dashed transition-all duration-200
+          group relative w-9 h-9 rounded-lg border-2 border-dashed transition-all duration-200
          flex items-center justify-center
          ${isDarkMode 
            ? 'border-gray-600 hover:border-blue-500 hover:bg-blue-500/10 text-gray-500 hover:text-blue-400' 
@@ -37,7 +37,7 @@ export const AddCustomColumnButton: React.FC = memo(() => {
          }
        `}
      >
-        <PlusOutlined className="text-xs transition-transform duration-200 group-hover:scale-110" />
+        <PlusOutlined className="text-sm transition-transform duration-200 group-hover:scale-110" />
        
        {/* Subtle glow effect on hover */}
        <div className={`
@@ -60,6 +60,7 @@ export const CustomColumnHeader: React.FC<{
  onSettingsClick: (columnId: string) => void;
 }> = ({ column, onSettingsClick }) => {
  const { t } = useTranslation('task-list-table');
+  const [isHovered, setIsHovered] = useState(false);

  const displayName = column.name || 
                     column.label || 
@@ -68,15 +69,20 @@ export const CustomColumnHeader: React.FC<{
                     t('customColumns.customColumnHeader');

  return (
-    <Flex align="center" justify="space-between" className="w-full px-2">
-      <span title={displayName}>{displayName}</span>
+    <Flex 
+      align="center" 
+      justify="space-between" 
+      className="w-full px-2 group cursor-pointer"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onSettingsClick(column.key || column.id)}
+    >
+      <span title={displayName} className="truncate flex-1 mr-2">{displayName}</span>
      <Tooltip title={t('customColumns.customColumnSettings')}>
        <SettingOutlined
-          className="cursor-pointer hover:text-primary"
-          onClick={e => {
-            e.stopPropagation();
-            onSettingsClick(column.key || column.id);
-          }}
+          className={`hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200 flex-shrink-0 ${
+            isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+          }`}
        />
      </Tooltip>
    </Flex>
@@ -278,14 +284,14 @@ export const DateCustomColumnCell: React.FC<{
  };

  return (
-    <div className={`px-2 relative custom-column-cell ${isOpen ? 'focused' : ''}`}>
+    <div className={`px-2 relative custom-column-cell ${isOpen ? 'custom-column-focused' : ''}`}>
      <div className="relative">
        <DatePicker
          open={isOpen}
          onOpenChange={setIsOpen}
          value={dateValue}
          onChange={handleDateChange}
-          placeholder={dateValue ? "" : "Click to set date"}
+          placeholder={dateValue ? "" : "Set date"}
          format="MMM DD, YYYY"
          suffixIcon={null}
          size="small"
@@ -440,15 +446,22 @@ export const SelectionCustomColumnCell: React.FC<{
  const selectedOption = selectionsList.find((option: any) => option.selection_name === customValue);

  const handleOptionSelect = async (option: any) => {
-    setIsLoading(true);
-    try {
-      if (task.id) {
-        updateTaskCustomColumnValue(task.id, columnKey, option.selection_name);
-      }
+    if (!task.id) return;
+
    setIsDropdownOpen(false);
-    } finally {
-      // Small delay to show loading state
-      setTimeout(() => setIsLoading(false), 200);
+    setIsLoading(true);
+
+    try {
+      // Send the update to the server - Redux store will be updated immediately
+      updateTaskCustomColumnValue(task.id, columnKey, option.selection_name);
+      
+      // Short loading state for visual feedback
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 200);
+    } catch (error) {
+      console.error('Error updating selection:', error);
+      setIsLoading(false);
    }
  };

@@ -468,7 +481,7 @@ export const SelectionCustomColumnCell: React.FC<{
          : 'border-gray-200 text-gray-600 bg-gray-50'
        }
      `}>
-        Select an option
+        Select option
      </div>
      
      {/* Options */}
@@ -521,7 +534,7 @@ export const SelectionCustomColumnCell: React.FC<{
  );

  return (
-    <div className={`px-2 relative custom-column-cell ${isDropdownOpen ? 'focused' : ''}`}>
+    <div className={`px-2 relative custom-column-cell ${isDropdownOpen ? 'custom-column-focused' : ''}`}>
      <Dropdown
        open={isDropdownOpen}
        onOpenChange={setIsDropdownOpen}
@@ -569,7 +582,7 @@ export const SelectionCustomColumnCell: React.FC<{
            <>
              <div className={`w-3 h-3 rounded-full border-2 border-dashed ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`} />
              <span className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>
-                Select option
+                Select
              </span>
              <svg className={`w-4 h-4 ml-auto transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''} ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
--- a/worklenz-frontend/src/components/task-list-v2/constants/columns.ts
+++ b/worklenz-frontend/src/components/task-list-v2/constants/columns.ts
@@ -17,6 +17,7 @@ export const BASE_COLUMNS = [
  { id: 'checkbox', label: '', width: '28px', isSticky: true, key: 'checkbox' },
  { id: 'taskKey', label: 'keyColumn', width: '100px', key: COLUMN_KEYS.KEY, minWidth: '100px', maxWidth: '150px' },
  { id: 'title', label: 'taskColumn', width: '470px', isSticky: true, key: COLUMN_KEYS.NAME },
+  { id: 'description', label: 'descriptionColumn', width: '260px', key: COLUMN_KEYS.DESCRIPTION },
  { id: 'status', label: 'statusColumn', width: '120px', key: COLUMN_KEYS.STATUS },
  { id: 'assignees', label: 'assigneesColumn', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
  { id: 'priority', label: 'priorityColumn', width: '120px', key: COLUMN_KEYS.PRIORITY },
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -20,7 +20,8 @@ import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
 import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
-import { toggleField } from '@/features/task-management/taskListFields.slice';
+import { toggleField, syncFieldWithDatabase } from '@/features/task-management/taskListFields.slice';
+import { selectColumns } from '@/features/task-management/task-management.slice';

 // Import Redux actions
 import {
@@ -372,6 +373,7 @@ const FilterDropdown: React.FC<{
  isDarkMode,
  className = '',
 }) => {
+  const { t } = useTranslation('task-list-filters');
  // Add permission checks for groupBy section
  const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
  const isProjectManager = useIsProjectManager();
@@ -447,7 +449,7 @@ const FilterDropdown: React.FC<{
            selectedCount > 0
              ? isDarkMode
                ? 'bg-gray-600 text-white border-gray-500'
-                : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
              : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
          }
          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
@@ -458,7 +460,14 @@ const FilterDropdown: React.FC<{
      >
        <IconComponent className="w-3.5 h-3.5" />
        <span>{section.label}</span>
-        {selectedCount > 0 && (
+        {/* Show selected option for single-select (group by) */}
+        {section.id === 'groupBy' && selectedCount > 0 && (
+          <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+            {section.options.find(opt => opt.value === section.selectedValues[0])?.label}
+          </span>
+        )}
+        {/* Show count for multi-select filters */}
+        {section.id !== 'groupBy' && selectedCount > 0 && (
          <span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-gray-500 rounded-full">
            {selectedCount}
          </span>
@@ -489,7 +498,7 @@ const FilterDropdown: React.FC<{
                <input
                  value={searchTerm}
                  onChange={e => setSearchTerm(e.target.value)}
-                  placeholder={`Search ${section.label.toLowerCase()}...`}
+                  placeholder={`${t('searchPlaceholder')} ${section.label.toLowerCase()}...`}
                  className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
                    isDarkMode
                      ? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
@@ -504,7 +513,7 @@ const FilterDropdown: React.FC<{
          <div className="max-h-48 overflow-y-auto">
            {filteredOptions.length === 0 ? (
              <div className={`p-2 text-xs text-center ${themeClasses.secondaryText}`}>
-                No options found
+                {t('noOptionsFound')}
              </div>
            ) : (
              <div className="p-0.5">
@@ -522,12 +531,13 @@ const FilterDropdown: React.FC<{
                          isSelected
                            ? isDarkMode
                              ? 'bg-gray-600 text-white'
-                              : 'bg-blue-50 text-blue-800 font-semibold'
+                              : 'bg-gray-200 text-gray-800 font-semibold'
                            : `${themeClasses.optionText} ${themeClasses.optionHover}`
                        }
                      `}
                    >
-                      {/* Checkbox/Radio indicator */}
+                      {/* Checkbox/Radio indicator - hide for group by */}
+                      {section.id !== 'groupBy' && (
                        <div
                          className={`
                          flex items-center justify-center w-3.5 h-3.5 border rounded
@@ -540,6 +550,7 @@ const FilterDropdown: React.FC<{
                        >
                          {isSelected && <CheckOutlined className="w-2.5 h-2.5" />}
                        </div>
+                      )}

                      {/* Color indicator */}
                      {option.color && (
@@ -588,11 +599,21 @@ const SearchFilter: React.FC<{
  placeholder?: string;
  themeClasses: any;
  className?: string;
-}> = ({ value, onChange, placeholder = 'Search tasks...', themeClasses, className = '' }) => {
+}> = ({ value, onChange, placeholder, themeClasses, className = '' }) => {
+  const { t } = useTranslation('task-list-filters');
  const [isExpanded, setIsExpanded] = useState(false);
  const [localValue, setLocalValue] = useState(value);
  const inputRef = useRef<HTMLInputElement>(null);

+  // Sync local value with external value prop
+  useEffect(() => {
+    setLocalValue(value);
+    // Keep expanded if there's a search value
+    if (value) {
+      setIsExpanded(true);
+    }
+  }, [value]);
+
  const handleToggle = useCallback(() => {
    setIsExpanded(!isExpanded);
    if (!isExpanded) {
@@ -611,7 +632,6 @@ const SearchFilter: React.FC<{
  const handleClear = useCallback(() => {
    setLocalValue('');
    onChange('');
-    setIsExpanded(false);
  }, [onChange]);

  // Redux selectors for theme and other state
@@ -619,17 +639,17 @@ const SearchFilter: React.FC<{

  return (
    <div className={`relative ${className}`}>
-      {!isExpanded ? (
+      {!isExpanded && !value ? (
        <button
          onClick={handleToggle}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
+          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
            themeClasses.containerBg === 'bg-gray-800'
              ? 'focus:ring-offset-gray-900'
              : 'focus:ring-offset-white'
          }`}
        >
          <SearchOutlined className="w-3.5 h-3.5" />
-          <span>Search</span>
+          <span>{t('search')}</span>
        </button>
      ) : (
        <form onSubmit={handleSubmit} className="flex items-center gap-1.5">
@@ -640,8 +660,8 @@ const SearchFilter: React.FC<{
              type="text"
              value={localValue}
              onChange={e => setLocalValue(e.target.value)}
-              placeholder={placeholder}
-              className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
+              placeholder={placeholder || t('searchTasks')}
+                                className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-150 ${
                    isDarkMode
                      ? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
                      : 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -651,7 +671,11 @@ const SearchFilter: React.FC<{
              <button
                type="button"
                onClick={handleClear}
-                className={`absolute right-1.5 top-1/2 transform -translate-y-1/2 ${themeClasses.secondaryText} hover:${themeClasses.optionText} transition-colors duration-150`}
+                className={`absolute right-1.5 top-1/2 transform -translate-y-1/2 transition-colors duration-150 ${
+                  isDarkMode 
+                    ? 'text-gray-400 hover:text-gray-200' 
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
              >
                <CloseOutlined className="w-3.5 h-3.5" />
              </button>
@@ -659,16 +683,28 @@ const SearchFilter: React.FC<{
          </div>
          <button
            type="submit"
-            className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
+            className={`px-2.5 py-1.5 text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors duration-200 ${
+              isDarkMode
+                ? 'text-white bg-gray-600 hover:bg-gray-700'
+                : 'text-gray-800 bg-gray-200 hover:bg-gray-300'
+            }`}
                      >
-            Search
+              {t('search')}
            </button>
          <button
            type="button"
-            onClick={() => setIsExpanded(false)}
-            className={`px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 ${themeClasses.secondaryText} hover:${themeClasses.optionText}`}
+            onClick={() => {
+              setLocalValue('');
+              onChange('');
+              setIsExpanded(false);
+            }}
+            className={`px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 ${
+              isDarkMode
+                ? 'text-gray-400 hover:text-gray-200'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
          >
-            Cancel
+            {t('cancel')}
          </button>
        </form>
      )}
@@ -682,8 +718,11 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
  themeClasses,
  isDarkMode,
 }) => {
-  const dispatch = useDispatch();
+  const { t } = useTranslation('task-list-filters');
+  const dispatch = useAppDispatch();
  const fieldsRaw = useSelector((state: RootState) => state.taskManagementFields);
+  const columns = useSelector(selectColumns);
+  const projectId = useAppSelector(state => state.projectReducer.projectId);
  const fields = Array.isArray(fieldsRaw) ? fieldsRaw : [];
  const sortedFields = useMemo(() => [...fields].sort((a, b) => a.order - b.order), [fields]);

@@ -734,17 +773,17 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
            visibleCount > 0
              ? isDarkMode
                ? 'bg-gray-600 text-white border-gray-500'
-                : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
              : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
          }
-          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
          ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
        `}
        aria-expanded={open}
        aria-haspopup="true"
      >
        <EyeOutlined className="w-3.5 h-3.5" />
-        <span>Fields</span>
+        <span>{t('fieldsText')}</span>
        {visibleCount > 0 && (
          <span
            className={`inline-flex items-center justify-center w-4 h-4 text-xs font-bold ${isDarkMode ? 'text-white bg-gray-500' : 'text-gray-800 bg-gray-300'} rounded-full`}
@@ -766,7 +805,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
          <div className="max-h-48 overflow-y-auto">
            {sortedFields.length === 0 ? (
                          <div className={`p-2 text-xs text-center ${themeClasses.secondaryText}`}>
-                No fields available
+              {t('noOptionsFound')}
            </div>
            ) : (
              <div className="p-0.5">
@@ -776,7 +815,20 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
                  return (
                    <button
                      key={field.key}
-                      onClick={() => dispatch(toggleField(field.key))}
+                      onClick={() => {
+                        // Toggle field locally first
+                        dispatch(toggleField(field.key));
+                        
+                        // Sync with database if projectId is available
+                        if (projectId) {
+                          dispatch(syncFieldWithDatabase({
+                            projectId,
+                            fieldKey: field.key,
+                            visible: !field.visible,
+                            columns
+                          }));
+                        }
+                      }}
                      className={`
                        w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded
                        transition-colors duration-150 text-left
@@ -839,9 +891,14 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
  // Use the filter data loader hook
  useFilterDataLoader();

+  // Get search value from Redux based on position
+  const taskReducerSearch = useAppSelector(state => state.taskReducer?.search || '');
+  const kanbanSearch = useAppSelector(state => state.enhancedKanbanReducer?.search || '');
+  
+  const searchValue = position === 'board' ? kanbanSearch : taskReducerSearch;
+
  // Local state for filter sections
  const [filterSections, setFilterSections] = useState<FilterSection[]>([]);
-  const [searchValue, setSearchValue] = useState('');
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
  const [clearingFilters, setClearingFilters] = useState(false);
@@ -858,8 +915,9 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
  const filterSectionsData = useFilterData(position);

  // Check if data is loaded - memoize this computation
+  // Keep filters visible even during refetch if we have any filter sections
  const isDataLoaded = useMemo(() => {
-    return filterSectionsData.some(section => section.options.length > 0);
+    return filterSectionsData.length > 0;
  }, [filterSectionsData]);

  // Initialize filter sections from data - memoize this to prevent unnecessary updates
@@ -881,7 +939,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
  const { projectView } = useTabSearchParam();

  // Theme-aware class names - memoize to prevent unnecessary re-renders
-  // Using task list row colors for consistency: --task-bg-primary: #1f1f1f, --task-bg-secondary: #141414
+  // Using greyish colors for both dark and light modes
  const themeClasses = useMemo(
    () => ({
      containerBg: isDarkMode ? 'bg-[#1f1f1f]' : 'bg-white',
@@ -897,8 +955,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
      dividerBorder: isDarkMode ? 'border-[#404040]' : 'border-gray-200',
      pillBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-100',
      pillText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-700',
-      pillActiveBg: isDarkMode ? 'bg-blue-600' : 'bg-blue-100',
-      pillActiveText: isDarkMode ? 'text-white' : 'text-blue-800',
+      pillActiveBg: isDarkMode ? 'bg-gray-600' : 'bg-gray-200',
+      pillActiveText: isDarkMode ? 'text-white' : 'text-gray-800',
      searchBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-50',
      searchBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-300',
      searchText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-900',
@@ -916,12 +974,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
    // Debounced search change function
    debouncedSearchChangeRef.current = createDebouncedFunction(
      (projectId: string, value: string) => {
-        // Dispatch search action based on current view
-        if (projectView === 'list') {
+        // Always use taskReducer search for list view since that's what we read from
        dispatch(setSearch(value));
-        } else {
-          dispatch(setKanbanSearch(value));
-        }

        // Trigger task refetch with new search value
        dispatch(fetchTasksV3(projectId));
@@ -1052,8 +1106,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla

  const handleSearchChange = useCallback(
    (value: string) => {
-      setSearchValue(value);
-
      if (!projectId) return;

      if (position === 'board') {
@@ -1062,7 +1114,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
          dispatch(fetchEnhancedKanbanGroups(projectId));
        }
      } else {
-        // Use debounced search
+        // Use debounced search for list view
        if (projectId) {
          debouncedSearchChangeRef.current?.(projectId, value);
        }
@@ -1084,9 +1136,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla

      // Batch all state updates together to prevent multiple re-renders
      const batchUpdates = () => {
-        // Clear local state immediately for UI feedback
-        setSearchValue('');
-
        // Update local filter sections state immediately
        setFilterSections(prev =>
          prev.map(section => ({
@@ -1101,12 +1150,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla

      // Prepare all Redux actions to be dispatched together
      const reduxUpdates = () => {
-        // Clear search based on view
-        if (projectView === 'list') {
+        // Clear search - always use taskReducer for list view
        dispatch(setSearch(''));
-        } else {
-          dispatch(setKanbanBoardSearch(''));
-        }

        // Clear label filters
        const clearedLabels = currentTaskLabels.map(label => ({
@@ -1199,8 +1244,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                          <div
                className={`flex items-center gap-2 px-2.5 py-1.5 text-xs ${themeClasses.secondaryText}`}
              >
-              <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-blue-500"></div>
-              <span>Loading filters...</span>
+                <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-gray-500"></div>
+                <span>{t('loadingFilters')}</span>
              </div>
          )}
        </div>
@@ -1211,7 +1256,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
          {activeFiltersCount > 0 && (
            <div className="flex items-center gap-1.5">
              <span className={`text-xs ${themeClasses.secondaryText}`}>
-                {activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
+                {activeFiltersCount} {activeFiltersCount !== 1 ? t('filtersActive') : t('filterActive')}
              </span>
              <button
                onClick={clearAllFilters}
@@ -1220,11 +1265,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                  clearingFilters
                    ?                   'text-gray-400 cursor-not-allowed'
                  : isDarkMode
-                      ? 'text-blue-400 hover:text-blue-300'
-                      : 'text-blue-600 hover:text-blue-700'
+                    ? 'text-gray-400 hover:text-gray-300'
+                    : 'text-gray-600 hover:text-gray-700'
                }`}
              >
-                {clearingFilters ? 'Clearing...' : 'Clear all'}
+                {clearingFilters ? t('clearing') : t('clearAll')}
              </button>
            </div>
          )}
@@ -1236,14 +1281,13 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                type="checkbox"
                checked={showArchived}
                onChange={toggleArchived}
-                className={`w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500 transition-colors duration-150 ${
+                className={`w-3.5 h-3.5 text-gray-600 rounded focus:ring-gray-500 transition-colors duration-150 ${
                  isDarkMode
                    ? 'border-[#303030] bg-[#141414] focus:ring-offset-gray-800'
                    : 'border-gray-300 bg-white focus:ring-offset-white'
                }`}
              />
-              <span className={`text-xs ${themeClasses.optionText}`}>Show archived</span>
-              <InboxOutlined className={`w-3.5 h-3.5 ${themeClasses.secondaryText}`} />
+              <span className={`text-xs ${themeClasses.optionText}`}>{t('showArchivedText')}</span>
            </label>
          )}

@@ -1253,97 +1297,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
          )}
        </div>
      </div>
-
-      {/* Active Filters Pills */}
-      {activeFiltersCount > 0 && (
-        <div
-          className={`flex flex-wrap items-center gap-1.5 mt-2 pt-2 border-t ${themeClasses.dividerBorder}`}
-        >
-          {searchValue && (
-            <div
-              className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded-full ${themeClasses.pillActiveBg} ${themeClasses.pillActiveText}`}
-            >
-              <SearchOutlined className="w-2.5 h-2.5" />
-              <span>"{searchValue}"</span>
-              <button
-                onClick={() => {
-                  setSearchValue('');
-                  if (projectId) {
-                    // Cancel pending search and immediately clear
-                    debouncedSearchChangeRef.current?.cancel();
-                    if (position === 'board') {
-                      dispatch(setKanbanSearch(''));
-                      dispatch(fetchEnhancedKanbanGroups(projectId));
-                    } else {
-                      if (projectView === 'list') {
-                        dispatch(setSearch(''));
-                      } else {
-                        dispatch(setKanbanBoardSearch(''));
-                      }
-                      dispatch(fetchTasksV3(projectId));
-                    }
-                  }
-                }}
-                className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
-                  isDarkMode ? 'hover:bg-blue-800' : 'hover:bg-blue-200'
-                }`}
-              >
-                <CloseOutlined className="w-2.5 h-2.5" />
-              </button>
-            </div>
-          )}
-
-          {filterSectionsData
-            .filter(section => section.id !== 'groupBy') // <-- skip groupBy
-            .flatMap(section =>
-              section.selectedValues
-                .map(value => {
-                  const option = section.options.find(opt => opt.value === value);
-                  if (!option) return null;
-
-                  return (
-                    <div
-                      key={`${section.id}-${value}`}
-                      className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded-full ${themeClasses.pillBg} ${themeClasses.pillText}`}
-                    >
-                      {option.color && (
-                        <div
-                          className="w-2 h-2 rounded-full"
-                          style={{ backgroundColor: option.color }}
-                        />
-                      )}
-                      <span>{option.label}</span>
-                      <button
-                        onClick={() => {
-                          // Update local state immediately for UI feedback
-                          setFilterSections(prev =>
-                            prev.map(s =>
-                              s.id === section.id
-                                ? {
-                                    ...s,
-                                    selectedValues: s.selectedValues.filter(v => v !== value),
-                                  }
-                                : s
-                            )
-                          );
-
-                          // Use debounced API call
-                          const newValues = section.selectedValues.filter(v => v !== value);
-                          handleSelectionChange(section.id, newValues);
-                        }}
-                        className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
-                          isDarkMode ? 'hover:bg-gray-600' : 'hover:bg-gray-200'
-                        }`}
-                      >
-                        <CloseOutlined className="w-2.5 h-2.5" />
-                      </button>
-                    </div>
-                  );
-                })
-                .filter(Boolean)
-            )}
-        </div>
-      )}
    </div>
  );
 };
--- a/worklenz-frontend/src/components/task-management/task-row.tsx
+++ b/worklenz-frontend/src/components/task-management/task-row.tsx
@@ -1017,7 +1017,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(
                      <div className="task-indicators flex items-center gap-2">
                        {/* Comments indicator */}
                        {(task as any).comments_count > 0 && (
-                          <Tooltip title={t('taskManagement.comments', 'Comments')}>
+                          <Tooltip title={t(`task-management:indicators.tooltips.comments${(task as any).comments_count === 1 ? '' : '_plural'}`, { count: (task as any).comments_count })}>
                            <MessageOutlined
                              style={{ fontSize: 14, color: isDarkMode ? '#b0b3b8' : '#888' }}
                            />
@@ -1025,7 +1025,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(
                        )}
                        {/* Attachments indicator */}
                        {(task as any).attachments_count > 0 && (
-                          <Tooltip title={t('taskManagement.attachments', 'Attachments')}>
+                          <Tooltip title={t(`task-management:indicators.tooltips.attachments${(task as any).attachments_count === 1 ? '' : '_plural'}`, { count: (task as any).attachments_count })}>
                            <PaperClipOutlined
                              style={{ fontSize: 14, color: isDarkMode ? '#b0b3b8' : '#888' }}
                            />
@@ -1033,7 +1033,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(
                        )}
                        {/* Dependencies indicator */}
                        {(task as any).has_dependencies && (
-                          <Tooltip title={t('taskManagement.dependencies', 'Dependencies')}>
+                          <Tooltip title={t('task-management:indicators.tooltips.dependencies')}>
                            <MinusCircleOutlined
                              style={{ fontSize: 14, color: isDarkMode ? '#b0b3b8' : '#888' }}
                            />
@@ -1041,7 +1041,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(
                        )}
                        {/* Subscribers indicator */}
                        {(task as any).has_subscribers && (
-                          <Tooltip title={t('taskManagement.subscribers', 'Subscribers')}>
+                          <Tooltip title={t('task-management:indicators.tooltips.subscribers')}>
                            <EyeOutlined
                              style={{ fontSize: 14, color: isDarkMode ? '#b0b3b8' : '#888' }}
                            />
@@ -1049,7 +1049,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(
                        )}
                        {/* Recurring indicator */}
                        {(task as any).schedule_id && (
-                          <Tooltip title={t('taskManagement.recurringTask', 'Recurring Task')}>
+                          <Tooltip title={t('task-management:indicators.tooltips.recurring')}>
                            <RetweetOutlined
                              style={{ fontSize: 14, color: isDarkMode ? '#b0b3b8' : '#888' }}
                            />
--- a/worklenz-frontend/src/features/projects/singleProject/phase/PhaseDrawer.tsx
+++ b/worklenz-frontend/src/features/projects/singleProject/phase/PhaseDrawer.tsx
@@ -37,6 +37,7 @@ import { fetchTaskGroups } from '@/features/tasks/tasks.slice';
 import { updatePhaseLabel } from '@/features/project/project.slice';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
 import { fetchBoardTaskGroups } from '@/features/board/board-slice';
+import { fetchTasksV3 } from '@/features/task-management/task-management.slice';

 interface UpdateSortOrderBody {
  from_index: number;
@@ -67,6 +68,7 @@ const PhaseDrawer = () => {

  const refreshTasks = async () => {
    if (tab === 'tasks-list') {
+      await dispatch(fetchTasksV3(projectId || ''));
      await dispatch(fetchTaskGroups(projectId || ''));
    } else if (tab === 'board') {
      await dispatch(fetchBoardTaskGroups(projectId || ''));
@@ -131,6 +133,8 @@ const PhaseDrawer = () => {
      if (res.done) {
        dispatch(updatePhaseLabel(phaseName));
        setInitialPhaseName(phaseName);
+        // Refresh tasks to update phase label in task list
+        await refreshTasks();
      }
    } catch (error) {
      logger.error('Error updating phase name', error);
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -264,10 +264,10 @@ export const fetchTasksV3 = createAsyncThunk(
          progress: typeof task.complete_ratio === 'number' ? task.complete_ratio : 0,
          assignees: task.assignees?.map((a: { team_member_id: string }) => a.team_member_id) || [],
          assignee_names: task.assignee_names || task.names || [],
-          labels: task.labels?.map((l: { id: string; label_id: string; name: string; color_code: string; end: boolean; names: string[] }) => ({
+          labels: task.labels?.map((l: { id: string; label_id: string; name: string; color: string; end: boolean; names: string[] }) => ({
            id: l.id || l.label_id,
            name: l.name,
-            color: l.color_code || '#1890ff',
+            color: l.color || '#1890ff',
            end: l.end,
            names: l.names,
          })) || [],
@@ -908,6 +908,38 @@ const taskManagementSlice = createSlice({
        return column;
      });
    },
+    // Add action to update task counts (comments, attachments, etc.)
+    updateTaskCounts: (state, action: PayloadAction<{
+      taskId: string;
+      counts: {
+        comments_count?: number;
+        attachments_count?: number;
+        has_subscribers?: boolean;
+        has_dependencies?: boolean;
+        schedule_id?: string | null; // Add schedule_id for recurring tasks
+      };
+    }>) => {
+      const { taskId, counts } = action.payload;
+      const task = state.entities[taskId];
+      if (task) {
+        // Update only the provided count fields
+        if (counts.comments_count !== undefined) {
+          task.comments_count = counts.comments_count;
+        }
+        if (counts.attachments_count !== undefined) {
+          task.attachments_count = counts.attachments_count;
+        }
+        if (counts.has_subscribers !== undefined) {
+          task.has_subscribers = counts.has_subscribers;
+        }
+        if (counts.has_dependencies !== undefined) {
+          task.has_dependencies = counts.has_dependencies;
+        }
+        if (counts.schedule_id !== undefined) {
+          task.schedule_id = counts.schedule_id;
+        }
+      }
+    },
  },
  extraReducers: builder => {
    builder
@@ -1100,6 +1132,7 @@ export const {
  updateCustomColumn,
  deleteCustomColumn,
  syncColumnsWithFields,
+  updateTaskCounts,
 } = taskManagementSlice.actions;

 // Export the selectors
--- a/worklenz-frontend/src/features/task-management/taskListFields.slice.ts
+++ b/worklenz-frontend/src/features/task-management/taskListFields.slice.ts
@@ -1,4 +1,7 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { updateColumnVisibility } from './task-management.slice';
+import { ITaskListColumn } from '@/types/tasks/taskList.types';
+import logger from '@/utils/errorLogger';

 export interface TaskListField {
  key: string;
@@ -37,7 +40,7 @@ function loadFields(): TaskListField[] {
      const parsed = JSON.parse(stored);
      return parsed;
    } catch (error) {
-      console.warn('Failed to parse stored fields, using defaults:', error);
+      logger.error('Failed to parse stored fields, using defaults:', error);
    }
  }

@@ -45,10 +48,74 @@ function loadFields(): TaskListField[] {
 }

 function saveFields(fields: TaskListField[]) {
-  console.log('Saving fields to localStorage:', fields);
  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(fields));
 }

+// Async thunk to sync field visibility with database
+export const syncFieldWithDatabase = createAsyncThunk(
+  'taskManagementFields/syncFieldWithDatabase',
+  async (
+    { projectId, fieldKey, visible, columns }: { 
+      projectId: string; 
+      fieldKey: string; 
+      visible: boolean; 
+      columns: ITaskListColumn[] 
+    },
+    { dispatch }
+  ) => {
+    // Find the corresponding backend column
+    const backendColumn = columns.find(c => c.key === fieldKey);
+    if (backendColumn) {
+      // Update the column visibility in the database
+      await dispatch(updateColumnVisibility({
+        projectId,
+        item: {
+          ...backendColumn,
+          pinned: visible
+        }
+      }));
+    }
+    return { fieldKey, visible };
+  }
+);
+
+// Async thunk to sync all fields with database
+export const syncAllFieldsWithDatabase = createAsyncThunk(
+  'taskManagementFields/syncAllFieldsWithDatabase',
+  async (
+    { projectId, fields, columns }: { 
+      projectId: string; 
+      fields: TaskListField[]; 
+      columns: ITaskListColumn[] 
+    },
+    { dispatch }
+  ) => {
+    // Find fields that need to be synced
+    const fieldsToSync = fields.filter(field => {
+      const backendColumn = columns.find(c => c.key === field.key);
+      return backendColumn && (backendColumn.pinned ?? false) !== field.visible;
+    });
+
+    // Sync each field
+    const syncPromises = fieldsToSync.map(field => {
+      const backendColumn = columns.find(c => c.key === field.key);
+      if (backendColumn) {
+        return dispatch(updateColumnVisibility({
+          projectId,
+          item: {
+            ...backendColumn,
+            pinned: field.visible
+          }
+        }));
+      }
+      return Promise.resolve();
+    });
+
+    await Promise.all(syncPromises);
+    return fieldsToSync.map(f => ({ fieldKey: f.key, visible: f.visible }));
+  }
+);
+
 const initialState: TaskListField[] = loadFields();

 const taskListFieldsSlice = createSlice({
@@ -75,10 +142,42 @@ const taskListFieldsSlice = createSlice({
      saveFields(defaultFields);
      return defaultFields;
    },
+    // New action to update field visibility from database
+    updateFieldVisibilityFromDatabase(state, action: PayloadAction<{ fieldKey: string; visible: boolean }>) {
+      const { fieldKey, visible } = action.payload;
+      const field = state.find(f => f.key === fieldKey);
+      if (field) {
+        field.visible = visible;
+        // Save to localStorage
+        saveFields(state);
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(syncFieldWithDatabase.fulfilled, (state, action) => {
+        // Field visibility has been synced with database
+        const { fieldKey, visible } = action.payload;
+        const field = state.find(f => f.key === fieldKey);
+        if (field) {
+          field.visible = visible;
+          saveFields(state);
+        }
+      })
+      .addCase(syncAllFieldsWithDatabase.fulfilled, (state, action) => {
+        // All fields have been synced with database
+        action.payload.forEach(({ fieldKey, visible }) => {
+          const field = state.find(f => f.key === fieldKey);
+          if (field) {
+            field.visible = visible;
+          }
+        });
+        saveFields(state);
+      });
  },
 });

-export const { toggleField, setFields, resetFields } = taskListFieldsSlice.actions;
+export const { toggleField, setFields, resetFields, updateFieldVisibilityFromDatabase } = taskListFieldsSlice.actions;

 // Utility function to force reset fields (can be called from browser console)
 export const forceResetFields = () => {
--- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
+++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
@@ -91,16 +91,17 @@ export const useTaskSocketHandlers = () => {

      // REAL-TIME UPDATES: Update the task-management slice for immediate UI updates
      if (data.id) {
-        dispatch(
-          updateTask({
-            id: data.id,
-            changes: {
+        const currentTask = store.getState().taskManagement.entities[data.id];
+        if (currentTask) {
+          const updatedTask: Task = {
+            ...currentTask,
            assignees: data.assignees?.map(a => a.team_member_id) || [],
            assignee_names: data.names || [],
            updatedAt: new Date().toISOString(),
-            },
-          })
-        );
+            updated_at: new Date().toISOString(),
+          };
+          dispatch(updateTask(updatedTask));
+        }
      }

      // Update the old task slice (for backward compatibility)
@@ -147,12 +148,12 @@ export const useTaskSocketHandlers = () => {

      // REAL-TIME UPDATES: Update the task-management slice for immediate UI updates
      if (labels.id) {
-        dispatch(
-          updateTask({
-            id: labels.id,
-            changes: {
+        const currentTask = store.getState().taskManagement.entities[labels.id];
+        if (currentTask) {
+          const updatedTask: Task = {
+            ...currentTask,
            labels:
-                labels.labels?.map(l => ({
+              labels.all_labels?.map(l => ({
                id: l.id || '',
                name: l.name || '',
                color: l.color_code || '#1890ff',
@@ -160,9 +161,10 @@ export const useTaskSocketHandlers = () => {
                names: l.names,
              })) || [],
            updatedAt: new Date().toISOString(),
-            },
-          })
-        );
+            updated_at: new Date().toISOString(),
+          };
+          dispatch(updateTask(updatedTask));
+        }
      }

      // Update the old task slice and other related slices (for backward compatibility)
@@ -281,15 +283,16 @@ export const useTaskSocketHandlers = () => {
      // For the task management slice, update task progress
      const taskId = data.parent_task || data.id;
      if (taskId) {
-        dispatch(
-          updateTask({
-            id: taskId,
-            changes: {
+        const currentTask = store.getState().taskManagement.entities[taskId];
+        if (currentTask) {
+          const updatedTask: Task = {
+            ...currentTask,
            progress: data.complete_ratio,
            updatedAt: new Date().toISOString(),
-            },
-          })
-        );
+            updated_at: new Date().toISOString(),
+          };
+          dispatch(updateTask(updatedTask));
+        }
      }

      // Update enhanced kanban slice
@@ -326,15 +329,20 @@ export const useTaskSocketHandlers = () => {
      if (currentTask) {
        // Get priority list to map priority_id to priority name
        const priorityList = state.priorityReducer?.priorities || [];
-        const priority = priorityList.find(p => p.id === response.priority_id);
-
        let newPriorityValue: 'critical' | 'high' | 'medium' | 'low' = 'medium';
+
+        if (response.priority_id) {
+          const priority = priorityList.find(p => p.id === response.priority_id);
          if (priority?.name) {
            const priorityName = priority.name.toLowerCase();
            if (['critical', 'high', 'medium', 'low'].includes(priorityName)) {
              newPriorityValue = priorityName as 'critical' | 'high' | 'medium' | 'low';
            }
          }
+        } else {
+          // No priority selected (cleared) - default to medium or find unmapped
+          newPriorityValue = 'medium';
+        }

        // Update the task entity first
        dispatch(
@@ -353,11 +361,33 @@ export const useTaskSocketHandlers = () => {
          const currentGroup = groups.find(group => group.taskIds.includes(response.id));

          // Find target group based on new priority value
-          const targetGroup = groups.find(
-            group => group.groupValue?.toLowerCase() === newPriorityValue.toLowerCase()
+          let targetGroup: any = null;
+
+          if (response.priority_id) {
+            // Find group by priority name (groupValue should match the priority name)
+            targetGroup = groups.find(
+              group => group.groupValue?.toLowerCase() === newPriorityValue.toLowerCase() ||
+                       group.title?.toLowerCase() === newPriorityValue.toLowerCase()
            );
+          } else {
+            // Find "Unmapped" group for tasks without a priority
+            targetGroup = groups.find(
+              group =>
+                group.groupValue === 'Unmapped' ||
+                group.title === 'Unmapped' ||
+                group.groupValue === '' ||
+                group.title?.toLowerCase().includes('unmapped') ||
+                group.groupValue?.toLowerCase().includes('unmapped')
+            );
+          }

          if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
+            console.log('🔄 Moving task between priority groups:', {
+              taskId: response.id,
+              from: currentGroup.title,
+              to: targetGroup.title,
+              newPriorityValue
+            });
            dispatch(
              moveTaskBetweenGroups({
                taskId: response.id,
@@ -365,6 +395,8 @@ export const useTaskSocketHandlers = () => {
                targetGroupId: targetGroup.id,
              })
            );
+          } else if (!targetGroup && response.priority_id) {
+            console.log('🔧 Target priority group not found for priority:', newPriorityValue);
          } else {
            console.log('🔧 No group movement needed for priority change');
          }
@@ -413,19 +445,24 @@ export const useTaskSocketHandlers = () => {

      // For the task management slice, update task name
      if (data.id) {
-        dispatch(
-          updateTask({
-            id: data.id,
-            changes: {
+        const currentTask = store.getState().taskManagement.entities[data.id];
+        if (currentTask) {
+          const updatedTask: Task = {
+            ...currentTask,
            title: data.name,
            updatedAt: new Date().toISOString(),
-            },
-          })
-        );
+            updated_at: new Date().toISOString(),
+          };
+          dispatch(updateTask(updatedTask));
+        }
      }

-      // Update enhanced kanban slice
-      dispatch(updateEnhancedKanbanTaskName({ task: data }));
+      // Update enhanced kanban slice (add manual_progress property for compatibility)
+      const taskWithProgress = {
+        ...data,
+        manual_progress: false,
+      } as IProjectTask;
+      dispatch(updateEnhancedKanbanTaskName({ task: taskWithProgress }));
    },
    [dispatch]
  );
@@ -460,15 +497,13 @@ export const useTaskSocketHandlers = () => {
          }

          // Update the task entity
-          dispatch(
-            updateTask({
-              id: taskId,
-              changes: {
+          const updatedTask: Task = {
+            ...currentTask,
            phase: newPhaseValue,
            updatedAt: new Date().toISOString(),
-              },
-            })
-          );
+            updated_at: new Date().toISOString(),
+          };
+          dispatch(updateTask(updatedTask));

          // Handle group movement ONLY if grouping by phase
          const groups = state.taskManagement.groups;
@@ -482,31 +517,41 @@ export const useTaskSocketHandlers = () => {
            let targetGroup: any = null;

            if (newPhaseValue && newPhaseValue.trim() !== '') {
-              // Find group by phase name
+              // Find group by phase name (groupValue should match the phase name)
              targetGroup = groups.find(
-                group => group.groupValue === newPhaseValue || group.title === newPhaseValue
+                group => group.groupValue === newPhaseValue || 
+                         group.title === newPhaseValue ||
+                         group.groupValue?.toLowerCase() === newPhaseValue.toLowerCase() ||
+                         group.title?.toLowerCase() === newPhaseValue.toLowerCase()
              );
            } else {
-              // Find "Unmapped" group for tasks without a phase or with default phase
+              // Find "Unmapped" group for tasks without a phase
              targetGroup = groups.find(
                group =>
                  group.groupValue === 'Unmapped' ||
                  group.title === 'Unmapped' ||
-                  group.title.toLowerCase().includes('unmapped')
+                  group.groupValue === '' ||
+                  group.title?.toLowerCase().includes('unmapped') ||
+                  group.groupValue?.toLowerCase().includes('unmapped')
              );
            }

            if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
+              console.log('🔄 Moving task between phase groups:', {
+                taskId,
+                from: currentGroup.title,
+                to: targetGroup.title,
+                newPhaseValue
+              });
              dispatch(
                moveTaskBetweenGroups({
                  taskId: taskId,
-                  fromGroupId: currentGroup.id,
-                  toGroupId: targetGroup.id,
-                  taskUpdate: {
-                    phase: newPhaseValue,
-                  },
+                  sourceGroupId: currentGroup.id,
+                  targetGroupId: targetGroup.id,
                })
              );
+            } else if (!targetGroup && newPhaseValue) {
+              console.log('🔧 Target phase group not found for phase:', newPhaseValue);
            } else {
              console.log('🔧 No group movement needed for phase change');
            }
@@ -534,24 +579,31 @@ export const useTaskSocketHandlers = () => {
      // Update task-management slice for task-list-v2 components
      const currentTask = store.getState().taskManagement.entities[task.id];
      if (currentTask) {
-        dispatch(updateTask({
+        const updatedTask: Task = {
          ...currentTask,
          startDate: task.start_date,
          updatedAt: new Date().toISOString(),
-        }));
+          updated_at: new Date().toISOString(),
+        };
+        dispatch(updateTask(updatedTask));
      }
    },
    [dispatch]
  );

  const handleTaskSubscribersChange = useCallback(
-    (data: InlineMember[]) => {
-      if (!data) return;
-      dispatch(setTaskSubscribers(data));
+    (subscribers: InlineMember[]) => {
+      if (!subscribers) return;
+      dispatch(setTaskSubscribers(subscribers));
+      
+      // Note: We don't have task_id in this event, so we can't update the task-management slice
+      // The has_subscribers field will be updated when the task is refetched
    },
    [dispatch]
  );

+
+
  const handleEstimationChange = useCallback(
    (task: { id: string; parent_task: string | null; estimation: number }) => {
      if (!task) return;
@@ -801,6 +853,7 @@ export const useTaskSocketHandlers = () => {
      { event: SocketEvents.QUICK_TASK.toString(), handler: handleNewTaskReceived },
      { event: SocketEvents.TASK_PROGRESS_UPDATED.toString(), handler: handleTaskProgressUpdated },
      { event: SocketEvents.TASK_CUSTOM_COLUMN_UPDATE.toString(), handler: handleCustomColumnUpdate },
+
    ];

    // Register all event listeners
@@ -832,5 +885,6 @@ export const useTaskSocketHandlers = () => {
    handleNewTaskReceived,
    handleTaskProgressUpdated,
    handleCustomColumnUpdate,
+
  ]);
 };
--- a/worklenz-frontend/src/index.css
+++ b/worklenz-frontend/src/index.css
@@ -153,7 +153,7 @@ tr:hover .action-buttons {
  z-index: 1;
 }

-.custom-column-cell.focused {
+.custom-column-cell.custom-column-focused {
  z-index: 10;
 }

--- a/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal.tsx
@@ -9,7 +9,7 @@ import {
  Select,
  Typography,
  Popconfirm,
-} from 'antd';
+} from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import SelectionTypeColumn from './selection-type-column/selection-type-column';
 import NumberTypeColumn from './number-type-column/number-type-column';
@@ -91,15 +91,7 @@ const CustomColumnModal = () => {
  // Use the column data passed from TaskListV2
  const openedColumn = currentColumnData;

-  // Debug logging
-  console.log('Modal Debug Info:', {
-    customColumnId,
-    customColumnModalType,
-    currentColumnData,
-    openedColumn,
-    openedColumnFound: !!openedColumn,
-    openedColumnId: openedColumn?.id
-  });
+

  // Function to reset all form and Redux state
  const resetModalData = () => {
@@ -110,40 +102,20 @@ const CustomColumnModal = () => {

  // Function to handle deleting a custom column
  const handleDeleteColumn = async () => {
-    console.log('Delete function called with:', {
-      customColumnId,
-      openedColumn,
-      openedColumnId: openedColumn?.id,
-      openedColumnKey: openedColumn?.key,
-      fullColumnData: openedColumn
-    });
-
-    // Try to get UUID from different possible locations in the column data
-    const columnUUID = openedColumn?.id || 
+    // The customColumnId should now be the UUID passed from TaskListV2
+    // But also check the column data as a fallback, prioritizing uuid over id
+    const columnUUID = customColumnId || 
                      openedColumn?.uuid || 
-                      openedColumn?.custom_column_obj?.id ||
-                      openedColumn?.custom_column_obj?.uuid;
-
-    console.log('Extracted UUID candidates:', {
-      'openedColumn?.id': openedColumn?.id,
-      'openedColumn?.uuid': openedColumn?.uuid,
-      'openedColumn?.custom_column_obj?.id': openedColumn?.custom_column_obj?.id,
-      'openedColumn?.custom_column_obj?.uuid': openedColumn?.custom_column_obj?.uuid,
-      'finalColumnUUID': columnUUID
-    });
+                      openedColumn?.id || 
+                      openedColumn?.custom_column_obj?.uuid ||
+                      openedColumn?.custom_column_obj?.id;

    if (!customColumnId || !columnUUID) {
-      console.error('Missing required data for deletion:', {
-        customColumnId,
-        columnUUID,
-        openedColumn
-      });
      message.error('Cannot delete column: Missing UUID');
      return;
    }

    try {
-      console.log('Attempting to delete column with UUID:', columnUUID);
      // Make API request to delete the custom column using the service
      await tasksCustomColumnsService.deleteCustomColumn(columnUUID);

@@ -328,7 +300,14 @@ const CustomColumnModal = () => {
            }
          : null;

-        if (updatedColumn && openedColumn?.id) {
+        // Get the correct UUID for the update operation, prioritizing uuid over id
+        const updateColumnUUID = customColumnId || 
+                                openedColumn?.uuid || 
+                                openedColumn?.id || 
+                                openedColumn?.custom_column_obj?.uuid ||
+                                openedColumn?.custom_column_obj?.id;
+
+        if (updatedColumn && updateColumnUUID) {
          try {
            // Prepare the configuration object
            const configuration = {
@@ -363,7 +342,7 @@ const CustomColumnModal = () => {
            };

            // Make API request to update custom column using the service
-            await tasksCustomColumnsService.updateCustomColumn(openedColumn.id, {
+            await tasksCustomColumnsService.updateCustomColumn(updateColumnUUID, {
              name: value.fieldTitle,
              field_type: value.fieldType,
              width: 150,
@@ -433,16 +412,11 @@ const CustomColumnModal = () => {
          } else if (openedColumn.custom_column_obj?.fieldType === 'selection') {
            // Directly set the selections list in the Redux store
            if (Array.isArray(openedColumn.custom_column_obj?.selectionsList)) {
-              console.log(
-                'Setting selections list:',
-                openedColumn.custom_column_obj.selectionsList
-              );
              dispatch(setSelectionsList(openedColumn.custom_column_obj.selectionsList));
            }
          } else if (openedColumn.custom_column_obj?.fieldType === 'labels') {
            // Directly set the labels list in the Redux store
            if (Array.isArray(openedColumn.custom_column_obj?.labelsList)) {
-              console.log('Setting labels list:', openedColumn.custom_column_obj.labelsList);
              dispatch(setLabelsList(openedColumn.custom_column_obj.labelsList));
            }
          }
--- a/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/selection-type-column/selection-type-column.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/selection-type-column/selection-type-column.tsx
@@ -28,28 +28,19 @@ const SelectionTypeColumn = () => {
  const {
    customColumnModalType,
    customColumnId,
+    currentColumnData,
    selectionsList: storeSelectionsList,
  } = useAppSelector(state => state.taskListCustomColumnsReducer);

-  // Get the opened column data if in edit mode
-  const openedColumn = useAppSelector(state =>
-    state.taskReducer.customColumns.find(col => col.key === customColumnId)
-  );
+  // Use the current column data passed from TaskListV2
+  const openedColumn = currentColumnData;
+

-  console.log('SelectionTypeColumn render:', {
-    customColumnModalType,
-    customColumnId,
-    openedColumn,
-    storeSelectionsList,
-    'openedColumn?.custom_column_obj?.selectionsList':
-      openedColumn?.custom_column_obj?.selectionsList,
-  });

  // Load existing selections when in edit mode
  useEffect(() => {
    if (customColumnModalType === 'edit' && openedColumn?.custom_column_obj?.selectionsList) {
      const existingSelections = openedColumn.custom_column_obj.selectionsList;
-      console.log('Loading existing selections:', existingSelections);

      if (Array.isArray(existingSelections) && existingSelections.length > 0) {
        setSelections(existingSelections);
--- a/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table-cells/task-list-task-cell/task-list-task-cell.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table-cells/task-list-task-cell/task-list-task-cell.tsx
@@ -110,7 +110,7 @@ const TaskListTaskCell = ({
  };

  const renderSubtasksCountLabel = (taskId: string, isSubTask: boolean, subTasksCount: number) => {
-    if (!taskId) return null;
+    if (!taskId || subTasksCount <= 1) return null;
    return (
      <Button
        onClick={() => handleToggleExpansion(taskId)}
--- a/worklenz-frontend/src/types/task-management.types.ts
+++ b/worklenz-frontend/src/types/task-management.types.ts
@@ -36,6 +36,7 @@ export interface Task {
  comments_count?: number;
  attachments_count?: number;
  has_dependencies?: boolean;
+  has_subscribers?: boolean;
  schedule_id?: string | null;
  order?: number;
  reporter?: string; // Reporter field