refactor(task-list): enhance styling and structure in TaskListV2 and TaskRow components

- Consolidated import statements for better readability. - Improved layout and styling consistency by adding border styles to various elements in TaskRow and AddTaskRow components. - Updated TaskListV2Table to enhance the rendering logic and maintainability. - Adjusted custom column handling and task estimation display for improved user experience.
2025-07-09 14:58:54 +05:30
parent 9cc19460bd
commit 399a01904a
5 changed files with 396 additions and 300 deletions
--- a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx
@@ -62,10 +62,7 @@ import ImprovedTaskFilters from '@/components/task-management/improved-task-filt
 import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
 import CustomColumnModal from '@/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal';
 import AddTaskRow from './components/AddTaskRow';
-import {
-  AddCustomColumnButton,
-  CustomColumnHeader,
-} from './components/CustomColumnComponents';
+import { AddCustomColumnButton, CustomColumnHeader } from './components/CustomColumnComponents';

 // Hooks and utilities
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -126,7 +123,10 @@ const TaskListV2Section: React.FC = () => {
  );

  // Custom hooks
-  const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(allTasks, groups);
+  const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
+    allTasks,
+    groups
+  );
  const bulkActions = useBulkActions();

  // Enable real-time updates via socket handlers
@@ -156,7 +156,8 @@ const TaskListV2Section: React.FC = () => {
    });

    // Add visible custom columns
-    const visibleCustomColumns = customColumns
+    const visibleCustomColumns =
+      customColumns
        ?.filter(column => column.pinned)
        ?.map(column => {
          // Give selection columns more width for dropdown content
@@ -182,7 +183,8 @@ const TaskListV2Section: React.FC = () => {
              previewValue: customColumnObj.preview_value,
              firstNumericColumn: customColumnObj.first_numeric_column_key,
              secondNumericColumn: customColumnObj.second_numeric_column_key,
-            selectionsList: customColumnObj.selections_list || customColumnObj.selectionsList || [],
+              selectionsList:
+                customColumnObj.selections_list || customColumnObj.selectionsList || [],
              labelsList: customColumnObj.labels_list || customColumnObj.labelsList || [],
            };
          }
@@ -222,15 +224,15 @@ const TaskListV2Section: React.FC = () => {
          if (backendColumn) {
            return {
              ...field,
-              visible: backendColumn.pinned ?? field.visible
+              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
+        const hasChanges = updatedFields.some(
+          (field, index) => field.visible !== fields[index].visible
        );

        if (hasChanges) {
@@ -269,7 +271,8 @@ const TaskListV2Section: React.FC = () => {
  );

  // Function to update custom column values
-  const updateTaskCustomColumnValue = useCallback((taskId: string, columnKey: string, value: string) => {
+  const updateTaskCustomColumnValue = useCallback(
+    (taskId: string, columnKey: string, value: string) => {
      try {
        if (!urlProjectId) {
          console.error('Project ID is missing');
@@ -309,10 +312,13 @@ const TaskListV2Section: React.FC = () => {
      } catch (error) {
        console.error('Error updating custom column value:', error);
      }
-  }, [urlProjectId, socket, connected, allTasks, dispatch]);
+    },
+    [urlProjectId, socket, connected, allTasks, dispatch]
+  );

  // Custom column settings handler
-  const handleCustomColumnSettings = useCallback((columnKey: string) => {
+  const handleCustomColumnSettings = useCallback(
+    (columnKey: string) => {
      if (!columnKey) return;

      const columnData = visibleColumns.find(col => col.key === columnKey || col.id === columnKey);
@@ -321,13 +327,17 @@ const TaskListV2Section: React.FC = () => {
      // For custom columns, prioritize the uuid field over id field
      const columnId = (columnData as any)?.uuid || columnData?.id || columnKey;

-    dispatch(setCustomColumnModalAttributes({
+      dispatch(
+        setCustomColumnModalAttributes({
          modalType: 'edit',
          columnId: columnId,
-      columnData: columnData
-    }));
+          columnData: columnData,
+        })
+      );
      dispatch(toggleCustomColumnModalOpen(true));
-  }, [dispatch, visibleColumns]);
+    },
+    [dispatch, visibleColumns]
+  );

  // Add callback for task added
  const handleTaskAdded = useCallback(() => {
@@ -358,7 +368,8 @@ const TaskListV2Section: React.FC = () => {
        originalIndex: allTasks.indexOf(task),
      }));

-      const itemsWithAddTask = !isCurrentGroupCollapsed ? [
+      const itemsWithAddTask = !isCurrentGroupCollapsed
+        ? [
            ...tasksForVirtuoso,
            {
              id: `add-task-${group.id}`,
@@ -367,8 +378,9 @@ const TaskListV2Section: React.FC = () => {
              groupType: currentGrouping || 'status',
              groupValue: group.id, // Use the actual database ID from backend
              projectId: urlProjectId,
-        }
-      ] : tasksForVirtuoso;
+            },
+          ]
+        : tasksForVirtuoso;

      const groupData = {
        ...group,
@@ -398,8 +410,6 @@ const TaskListV2Section: React.FC = () => {
      const isGroupCollapsed = collapsedGroups.has(group.id);
      const isGroupEmpty = group.actualCount === 0;

-
-
      return (
        <div className={groupIndex > 0 ? 'mt-2' : ''}>
          <TaskGroupHeader
@@ -416,12 +426,22 @@ const TaskListV2Section: React.FC = () => {
          {isGroupEmpty && !isGroupCollapsed && (
            <div className="relative w-full">
              <div className="flex items-center min-w-max px-1 py-3">
-                {visibleColumns.map((column, index) => (
+                {visibleColumns.map((column, index) => {
+                  const emptyColumnStyle = {
+                    width: column.width,
+                    flexShrink: 0,
+                    ...(column.id === 'labels' && column.width === 'auto'
+                      ? { minWidth: '200px', flexGrow: 1 }
+                      : {}),
+                  };
+                  return (
                    <div
                      key={`empty-${column.id}`}
-                    style={{ width: column.width, flexShrink: 0 }}
+                      className="border-r border-gray-200 dark:border-gray-700"
+                      style={emptyColumnStyle}
                    />
-                ))}
+                  );
+                })}
              </div>
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="text-sm italic text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-900 px-4 py-1 rounded-md border border-gray-200 dark:border-gray-700">
@@ -440,7 +460,6 @@ const TaskListV2Section: React.FC = () => {
    (taskIndex: number) => {
      const item = virtuosoItems[taskIndex];

-
      if (!item || !urlProjectId) return null;

      if ('isAddTaskRow' in item && item.isAddTaskRow) {
@@ -469,9 +488,16 @@ const TaskListV2Section: React.FC = () => {
  );

  // Render column headers
-  const renderColumnHeaders = useCallback(() => (
-    <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-1 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
+  const renderColumnHeaders = useCallback(
+    () => (
+      <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-1 py-3 w-full"
+          style={{ minWidth: 'max-content', height: '44px' }}
+        >
          {visibleColumns.map((column, index) => {
            const columnStyle: ColumnStyle = {
              width: column.width,
@@ -489,7 +515,8 @@ const TaskListV2Section: React.FC = () => {
            return (
              <div
                key={column.id}
-              className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${column.id === 'dragHandle'
+                className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${
+                  column.id === 'dragHandle'
                    ? 'flex items-center justify-center'
                    : column.id === 'checkbox'
                      ? 'flex items-center justify-center'
@@ -521,18 +548,26 @@ const TaskListV2Section: React.FC = () => {
            );
          })}
          {/* Add Custom Column Button - positioned at the end and scrolls with content */}
-        <div className="flex items-center justify-center px-2" style={{ width: '50px', flexShrink: 0 }}>
+          <div
+            className="flex items-center justify-center px-2"
+            style={{ width: '50px', flexShrink: 0 }}
+          >
            <AddCustomColumnButton />
          </div>
        </div>
      </div>
-  ), [visibleColumns, t, handleCustomColumnSettings]);
-
-
+    ),
+    [visibleColumns, t, handleCustomColumnSettings]
+  );

  // Loading and error states
  if (loading || loadingColumns) return <Skeleton style={{ marginTop: 8 }} active />;
-  if (error) return <div>{t('emptyStates.errorPrefix')} {error}</div>;
+  if (error)
+    return (
+      <div>
+        {t('emptyStates.errorPrefix')} {error}
+      </div>
+    );

  // Show message when no data
  if (groups.length === 0 && !loading) {
@@ -564,7 +599,6 @@ const TaskListV2Section: React.FC = () => {
      onDragEnd={handleDragEnd}
    >
      <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
-
        {/* Table Container */}
        <div
          className="border border-gray-200 dark:border-gray-700 rounded-lg"
@@ -572,7 +606,7 @@ const TaskListV2Section: React.FC = () => {
            height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
            display: 'flex',
            flexDirection: 'column',
-              overflow: 'hidden'
+            overflow: 'hidden',
          }}
        >
          {/* Task List Content with Sticky Header */}
@@ -582,11 +616,14 @@ const TaskListV2Section: React.FC = () => {
            style={{
              overflowX: 'auto',
              overflowY: 'auto',
-                minHeight: 0
+              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' }}>
+            <div
+              className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800"
+              style={{ width: '100%', minWidth: 'max-content' }}
+            >
              {renderColumnHeaders()}
            </div>
            <SortableContext
@@ -604,10 +641,11 @@ const TaskListV2Section: React.FC = () => {
                    {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;
+                    {!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}`}>
@@ -653,17 +691,27 @@ const TaskListV2Section: React.FC = () => {
              totalSelected={selectedTaskIds.length}
              projectId={urlProjectId}
              onClearSelection={bulkActions.handleClearSelection}
-                onBulkStatusChange={(statusId) => bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)}
-                onBulkPriorityChange={(priorityId) => bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)}
-                onBulkPhaseChange={(phaseId) => bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)}
+              onBulkStatusChange={statusId =>
+                bulkActions.handleBulkStatusChange(statusId, selectedTaskIds)
+              }
+              onBulkPriorityChange={priorityId =>
+                bulkActions.handleBulkPriorityChange(priorityId, selectedTaskIds)
+              }
+              onBulkPhaseChange={phaseId =>
+                bulkActions.handleBulkPhaseChange(phaseId, selectedTaskIds)
+              }
              onBulkAssignToMe={() => bulkActions.handleBulkAssignToMe(selectedTaskIds)}
-                onBulkAssignMembers={(memberIds) => bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)}
-                onBulkAddLabels={(labelIds) => bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)}
+              onBulkAssignMembers={memberIds =>
+                bulkActions.handleBulkAssignMembers(memberIds, selectedTaskIds)
+              }
+              onBulkAddLabels={labelIds =>
+                bulkActions.handleBulkAddLabels(labelIds, selectedTaskIds)
+              }
              onBulkArchive={() => bulkActions.handleBulkArchive(selectedTaskIds)}
              onBulkDelete={() => bulkActions.handleBulkDelete(selectedTaskIds)}
              onBulkDuplicate={() => bulkActions.handleBulkDuplicate(selectedTaskIds)}
              onBulkExport={() => bulkActions.handleBulkExport(selectedTaskIds)}
-                onBulkSetDueDate={(date) => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)}
+              onBulkSetDueDate={date => bulkActions.handleBulkSetDueDate(date, selectedTaskIds)}
            />
          </div>
        )}
--- a/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
@@ -271,7 +271,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'checkbox':
        return (
-          <div className="flex items-center justify-center" style={baseStyle}>
+          <div className="flex items-center justify-center dark:border-gray-700" style={baseStyle}>
            <Checkbox
              checked={isSelected}
              onChange={handleCheckboxChange}
@@ -282,7 +282,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'taskKey':
        return (
-          <div className="flex items-center pl-3" style={baseStyle}>
+          <div className="flex items-center pl-3 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <span className="text-xs font-medium px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 whitespace-nowrap border border-gray-200 dark:border-gray-600">
              {task.task_key || 'N/A'}
            </span>
@@ -291,7 +291,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'title':
        return (
-          <div className="flex items-center justify-between group" style={baseStyle}>
+          <div className="flex items-center justify-between group pl-1 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <div className="flex items-center flex-1 min-w-0">
              {/* Indentation for subtasks - tighter spacing */}
              {isSubtask && <div className="w-4 flex-shrink-0" />}
@@ -417,7 +417,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'description':
        return (
-          <div className="flex items-center px-2" style={baseStyle}>
+          <div className="flex items-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <div
              className="text-sm text-gray-600 dark:text-gray-400 truncate w-full"
              style={{
@@ -435,7 +435,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'status':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <TaskStatusDropdown
              task={task}
              projectId={projectId}
@@ -446,7 +446,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'assignees':
        return (
-          <div className="flex items-center gap-1 px-2" style={baseStyle}>
+          <div className="flex items-center gap-1 px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <AvatarGroup
              members={task.assignee_names || []}
              maxCount={3}
@@ -463,7 +463,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'priority':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <TaskPriorityDropdown
              task={task}
              projectId={projectId}
@@ -474,7 +474,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'dueDate':
        return (
-          <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 relative group border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {activeDatePicker === 'dueDate' ? (
              <div className="w-full relative">
                <DatePicker
@@ -532,7 +532,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'progress':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {task.progress !== undefined &&
              task.progress >= 0 &&
              (task.progress === 100 ? (
@@ -555,8 +555,13 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
        );

      case 'labels':
+        const labelsColumn = visibleColumns.find(col => col.id === 'labels');
+        const labelsStyle = {
+          ...baseStyle,
+          ...(labelsColumn?.width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
+        };
        return (
-          <div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}>
+          <div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2 border-r border-gray-200 dark:border-gray-700" style={labelsStyle}>
            <TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} />
            <LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} />
          </div>
@@ -564,7 +569,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'phase':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <TaskPhaseDropdown
              task={task}
              projectId={projectId}
@@ -575,21 +580,42 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'timeTracking':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
          </div>
        );

      case 'estimation':
+        // Use timeTracking.estimated which is the converted value from backend's total_minutes
+        const estimationDisplay = (() => {
+          const estimatedHours = task.timeTracking?.estimated;
+          
+          if (estimatedHours && estimatedHours > 0) {
+            // Convert decimal hours to hours and minutes for display
+            const hours = Math.floor(estimatedHours);
+            const minutes = Math.round((estimatedHours - hours) * 60);
+            
+            if (hours > 0 && minutes > 0) {
+              return `${hours}h ${minutes}m`;
+            } else if (hours > 0) {
+              return `${hours}h`;
+            } else if (minutes > 0) {
+              return `${minutes}m`;
+            }
+          }
+          
+          return null;
+        })();
+        
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
-            {task.timeTracking?.estimated ? (
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
+            {estimationDisplay ? (
              <span className="text-sm text-gray-500 dark:text-gray-400">
-                {task.timeTracking.estimated}h
+                {estimationDisplay}
              </span>
            ) : (
              <span className="text-sm text-gray-400 dark:text-gray-500">
-                0
+                -
              </span>
            )}
          </div>
@@ -597,7 +623,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'startDate':
        return (
-          <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 relative group border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {activeDatePicker === 'startDate' ? (
              <div className="w-full relative">
                <DatePicker
@@ -655,7 +681,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'completedDate':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {formattedDates.completed ? (
              <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                {formattedDates.completed}
@@ -668,7 +694,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'createdDate':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {formattedDates.created ? (
              <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                {formattedDates.created}
@@ -680,9 +706,8 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
        );

      case 'lastUpdated':
-        console.log('formattedDates.updated', formattedDates.updated);
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {formattedDates.updated ? (
              <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                {formattedDates.updated}
@@ -695,7 +720,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn

      case 'reporter':
        return (
-          <div className="flex items-center justify-center px-2" style={baseStyle}>
+          <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            {task.reporter ? (
              <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{task.reporter}</span>
            ) : (
@@ -709,7 +734,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
        const column = visibleColumns.find(col => col.id === columnId);
        if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
          return (
-            <div className="flex items-center justify-center px-2" style={baseStyle}>
+            <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
              <CustomColumnCell
                column={column}
                task={task}
--- a/worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx
+++ b/worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx
@@ -93,10 +93,16 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
      case 'checkbox':
      case 'taskKey':
      case 'description':
-        return <div style={baseStyle} />;
+        return <div className="border-r border-gray-200 dark:border-gray-700" style={baseStyle} />;
+      case 'labels':
+        const labelsStyle = {
+          ...baseStyle,
+          ...(width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
+        };
+        return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
      case 'title':
        return (
-          <div className="flex items-center h-full" style={baseStyle}>
+          <div className="flex items-center h-full border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
            <div className="flex items-center w-full h-full">
              <div className="w-4 mr-1" />
              
@@ -129,7 +135,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
          </div>
        );
      default:
-        return <div style={baseStyle} />;
+        return <div className="border-r border-gray-200 dark:border-gray-700" style={baseStyle} />;
    }
  }, [isAdding, taskName, handleAddTask, handleCancel, t]);

--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -281,8 +281,8 @@ export const fetchTasksV3 = createAsyncThunk(
          dueDate: task.dueDate,
          startDate: task.startDate,
          timeTracking: {
-            estimated: convertTimeValue(task.total_time),
-            logged: convertTimeValue(task.time_spent),
+            estimated: task.timeTracking?.estimated || 0,
+            logged: task.timeTracking?.logged || 0,
          },
          customFields: {},
          custom_column_values: task.custom_column_values || {},
--- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
+++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
@@ -670,15 +670,32 @@ export const useTaskSocketHandlers = () => {


  const handleEstimationChange = useCallback(
-    (task: { id: string; parent_task: string | null; estimation: number }) => {
-      if (!task) return;
+    (data: { id: string; parent_task: string | null; total_hours: number; total_minutes: number }) => {
+      if (!data) return;

+      // Update the old task slice (for backward compatibility)
      const taskWithProgress = {
-        ...task,
+        ...data,
        manual_progress: false,
      } as IProjectTask;

      dispatch(updateTaskEstimation({ task: taskWithProgress }));
+
+      // Update task-management slice for task-list-v2 components
+      const currentTask = store.getState().taskManagement.entities[data.id];
+      if (currentTask) {
+        const estimatedHours = (data.total_hours || 0) + (data.total_minutes || 0) / 60;
+        const updatedTask: Task = {
+          ...currentTask,
+          timeTracking: {
+            ...currentTask.timeTracking,
+            estimated: estimatedHours,
+          },
+          updatedAt: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        };
+        dispatch(updateTask(updatedTask));
+      }
    },
    [dispatch]
  );