feat(gantt): enhance Gantt chart functionality with task progress tracking

- Updated GanttController to include task counts by status (todo, doing, done) and total tasks for each project phase.
- Implemented progress percentage calculations for each phase based on task counts.
- Enhanced ProjectViewGantt component to fetch task priorities and manage task data more effectively.
- Improved GanttChart and GanttTaskList components for better rendering of tasks and phases, including drag-and-drop functionality.
- Refactored GanttTimeline to optimize header generation based on view mode and date range.
- Updated GanttToolbar for improved user interaction with task management features.

worklenz-backend/src/controllers/gantt-controller.ts

@@ -194,19 +194,80 @@ export default class GanttController extends WorklenzControllerBase {
     
     const q = `
       SELECT 
-        id,
+        pp.id,
-        name,
+        pp.name,
-        color_code,
+        pp.color_code,
-        start_date,
+        pp.start_date,
-        end_date,
+        pp.end_date,
-        sort_index
+        pp.sort_index,
-      FROM project_phases
+        -- Calculate task counts by status category for progress
-      WHERE project_id = $1
+        COALESCE(
-      ORDER BY sort_index, created_at;
+          (SELECT COUNT(*) 
+           FROM tasks t 
+           JOIN task_phase tp ON t.id = tp.task_id 
+           JOIN task_statuses ts ON t.status_id = ts.id
+           JOIN sys_task_status_categories stsc ON ts.category_id = stsc.id
+           WHERE tp.phase_id = pp.id 
+             AND t.archived = FALSE 
+             AND stsc.is_todo = TRUE), 0
+        ) as todo_count,
+        COALESCE(
+          (SELECT COUNT(*) 
+           FROM tasks t 
+           JOIN task_phase tp ON t.id = tp.task_id 
+           JOIN task_statuses ts ON t.status_id = ts.id
+           JOIN sys_task_status_categories stsc ON ts.category_id = stsc.id
+           WHERE tp.phase_id = pp.id 
+             AND t.archived = FALSE 
+             AND stsc.is_doing = TRUE), 0
+        ) as doing_count,
+        COALESCE(
+          (SELECT COUNT(*) 
+           FROM tasks t 
+           JOIN task_phase tp ON t.id = tp.task_id 
+           JOIN task_statuses ts ON t.status_id = ts.id
+           JOIN sys_task_status_categories stsc ON ts.category_id = stsc.id
+           WHERE tp.phase_id = pp.id 
+             AND t.archived = FALSE 
+             AND stsc.is_done = TRUE), 0
+        ) as done_count,
+        COALESCE(
+          (SELECT COUNT(*) 
+           FROM tasks t 
+           JOIN task_phase tp ON t.id = tp.task_id 
+           WHERE tp.phase_id = pp.id 
+             AND t.archived = FALSE), 0
+        ) as total_count
+      FROM project_phases pp
+      WHERE pp.project_id = $1
+      ORDER BY pp.sort_index, pp.created_at;
     `;
     
     const result = await db.query(q, [projectId]);
-    return res.status(200).send(new ServerResponse(true, result.rows));
+    
+    // Calculate progress percentages for each phase
+    const phasesWithProgress = result.rows.map(phase => {
+      const total = parseInt(phase.total_count) || 0;
+      const todoCount = parseInt(phase.todo_count) || 0;
+      const doingCount = parseInt(phase.doing_count) || 0;
+      const doneCount = parseInt(phase.done_count) || 0;
+      
+      return {
+        id: phase.id,
+        name: phase.name,
+        color_code: phase.color_code,
+        start_date: phase.start_date,
+        end_date: phase.end_date,
+        sort_index: phase.sort_index,
+        // Calculate progress percentages
+        todo_progress: total > 0 ? Math.round((todoCount / total) * 100) : 0,
+        doing_progress: total > 0 ? Math.round((doingCount / total) * 100) : 0,
+        done_progress: total > 0 ? Math.round((doneCount / total) * 100) : 0,
+        total_tasks: total
+      };
+    });
+    
+    return res.status(200).send(new ServerResponse(true, phasesWithProgress));
   }
 
   @HandleExceptions()

worklenz-frontend/src/pages/projects/projectView/gantt/ProjectViewGantt.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { Spin, message } from '@/shared/antd-imports';
 import { useParams } from 'react-router-dom';
 import GanttTimeline from './components/gantt-timeline/GanttTimeline';
@@ -20,7 +20,9 @@ import {
   setShowTaskDrawer,
   setSelectedTaskId,
   setTaskFormViewModel,
+  fetchTask,
 } from '@features/task-drawer/task-drawer.slice';
+import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
 import { DEFAULT_TASK_NAME } from '@/shared/constants';
 import './gantt-styles.css';
 
@@ -62,12 +64,17 @@ const ProjectViewGantt: React.FC = React.memo(() => {
           result.push(task);
 
           // If this phase is expanded, show its children tasks
-          const phaseId = task.id === 'phase-unmapped' ? 'unmapped' : task.phase_id;
+          const phaseId =
-          if (expandedTasks.has(phaseId) && task.children) {
+            task.id === 'phase-unmapped'
+              ? 'unmapped'
+              : task.phase_id || task.id.replace('phase-', '');
+          const isExpanded = expandedTasks.has(phaseId);
+
+          if (isExpanded && task.children) {
             task.children.forEach((child: any) => {
               result.push({
                 ...child,
-                phase_id: task.phase_id // Ensure child has correct phase_id
+                phase_id: task.phase_id, // Ensure child has correct phase_id
               });
             });
           }
@@ -96,6 +103,11 @@ const ProjectViewGantt: React.FC = React.memo(() => {
 
   const loading = tasksLoading || phasesLoading;
 
+  // Load priorities for task drawer functionality
+  useEffect(() => {
+    dispatch(fetchPriorities());
+  }, [dispatch]);
+
   const handleViewModeChange = useCallback((mode: GanttViewMode) => {
     setViewMode(mode);
   }, []);
@@ -156,8 +168,13 @@ const ProjectViewGantt: React.FC = React.memo(() => {
       dispatch(setSelectedTaskId(taskId));
       dispatch(setTaskFormViewModel(null)); // Clear form view model for existing task
       dispatch(setShowTaskDrawer(true));
+
+      // Fetch the complete task data including priorities
+      if (projectId) {
+        dispatch(fetchTask({ taskId, projectId }));
+      }
     },
-    [dispatch]
+    [dispatch, projectId]
   );
 
   const handleClosePhaseModal = useCallback(() => {
@@ -172,14 +189,12 @@ const ProjectViewGantt: React.FC = React.memo(() => {
 
   const handleCreateQuickTask = useCallback(
     (taskName: string, phaseId?: string) => {
-      // Refresh the Gantt data after task creation
+      // Refresh the Gantt data after task creation to show the new task
       refetchTasks();
-      message.success(`Task "${taskName}" created successfully!`);
     },
     [refetchTasks]
   );
 
-
   // Handle errors
   if (tasksError || phasesError) {
     message.error('Failed to load Gantt chart data');

worklenz-frontend/src/pages/projects/projectView/gantt/components/gantt-chart/GanttChart.tsx

@@ -50,215 +50,247 @@ interface TaskBarRowProps {
   dateRange?: { start: Date; end: Date };
 }
 
-const TaskBarRow: React.FC<TaskBarRowProps> = memo(({ task, viewMode, columnWidth, columnsCount, dateRange }) => {
+const TaskBarRow: React.FC<TaskBarRowProps> = memo(
-  const renderMilestone = () => {
+  ({ task, viewMode, columnWidth, columnsCount, dateRange }) => {
-    if (!task.start_date || !dateRange) return null;
+    const renderMilestone = () => {
+      if (!task.start_date || !dateRange) return null;
 
-    // Calculate position for milestone diamond
+      // Calculate position for milestone diamond based on view mode
-    const totalDays = Math.ceil((dateRange.end.getTime() - dateRange.start.getTime()) / (1000 * 60 * 60 * 24));
+      const totalTimeSpan = dateRange.end.getTime() - dateRange.start.getTime();
-    const daysFromStart = Math.floor((task.start_date.getTime() - dateRange.start.getTime()) / (1000 * 60 * 60 * 24));
+      const timeFromStart = task.start_date.getTime() - dateRange.start.getTime();
-    const left = Math.max(0, (daysFromStart / totalDays) * (columnsCount * columnWidth));
+      const left = Math.max(0, (timeFromStart / totalTimeSpan) * (columnsCount * columnWidth));
+
+      return (
+        <div
+          className="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 rotate-45 z-10 shadow-sm"
+          style={{
+            left: `${left}px`,
+            backgroundColor: task.color || '#3b82f6',
+          }}
+          title={`${task.name} - ${task.start_date.toLocaleDateString()}`}
+        />
+      );
+    };
+
+    const renderTaskBar = () => {
+      if (!task.start_date || !task.end_date || !dateRange) return null;
+
+      // Calculate position and width for task bar based on time ratios
+      const totalTimeSpan = dateRange.end.getTime() - dateRange.start.getTime();
+      const timeFromStart = task.start_date.getTime() - dateRange.start.getTime();
+      const taskDuration = task.end_date.getTime() - task.start_date.getTime();
+
+      const totalWidth = columnsCount * columnWidth;
+      const left = Math.max(0, (timeFromStart / totalTimeSpan) * totalWidth);
+      const width = Math.max(10, (taskDuration / totalTimeSpan) * totalWidth);
+
+      return (
+        <div
+          className="absolute top-1/2 transform -translate-y-1/2 h-6 rounded flex items-center px-2 text-xs text-white font-medium shadow-sm"
+          style={{
+            left: `${left}px`,
+            width: `${width}px`,
+            backgroundColor: task.color || '#6b7280',
+          }}
+          title={`${task.name} - ${task.start_date.toLocaleDateString()} to ${task.end_date.toLocaleDateString()}`}
+        >
+          <div className="truncate">{task.name}</div>
+          {task.progress > 0 && (
+            <div
+              className="absolute top-0 left-0 h-full bg-black bg-opacity-20 rounded"
+              style={{ width: `${task.progress}%` }}
+            />
+          )}
+        </div>
+      );
+    };
+
+    const isPhase = task.type === 'milestone' || task.is_milestone;
 
     return (
       <div
-        className="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 rotate-45 z-10 shadow-sm"
+        className={`${isPhase ? 'min-h-[4.5rem]' : 'h-9'} relative border-b border-gray-100 dark:border-gray-700 transition-colors ${
-        style={{ 
+          !isPhase ? 'hover:bg-gray-50 dark:hover:bg-gray-750' : ''
-          left: `${left}px`,
+        }`}
-          backgroundColor: task.color || '#3b82f6'
+        style={
-        }}
+          isPhase && task.color
-        title={`${task.name} - ${task.start_date.toLocaleDateString()}`}
+            ? {
-      />
+                backgroundColor: addAlphaToHex(task.color, 0.15),
-    );
+              }
-  };
+            : {}
-
+        }
-  const renderTaskBar = () => {
-    if (!task.start_date || !task.end_date || !dateRange) return null;
-    
-    // Calculate position and width for task bar
-    const totalDays = Math.ceil((dateRange.end.getTime() - dateRange.start.getTime()) / (1000 * 60 * 60 * 24));
-    const daysFromStart = Math.floor((task.start_date.getTime() - dateRange.start.getTime()) / (1000 * 60 * 60 * 24));
-    const taskDuration = Math.ceil((task.end_date.getTime() - task.start_date.getTime()) / (1000 * 60 * 60 * 24));
-    
-    const left = Math.max(0, (daysFromStart / totalDays) * (columnsCount * columnWidth));
-    const width = Math.max(10, (taskDuration / totalDays) * (columnsCount * columnWidth));
-    
-    return (
-      <div 
-        className="absolute top-1/2 transform -translate-y-1/2 h-6 rounded flex items-center px-2 text-xs text-white font-medium shadow-sm"
-        style={{ 
-          left: `${left}px`,
-          width: `${width}px`,
-          backgroundColor: task.color || '#6b7280'
-        }}
-        title={`${task.name} - ${task.start_date.toLocaleDateString()} to ${task.end_date.toLocaleDateString()}`}
       >
-        <div className="truncate">{task.name}</div>
+        {isPhase ? renderMilestone() : renderTaskBar()}
-        {task.progress > 0 && (
-          <div 
-            className="absolute top-0 left-0 h-full bg-black bg-opacity-20 rounded"
-            style={{ width: `${task.progress}%` }}
-          />
-        )}
       </div>
     );
-  };
+  }
-
+);
-  const isPhase = task.type === 'milestone' || task.is_milestone;
-  
-  return (
-    <div 
-      className={`${isPhase ? 'min-h-[4.5rem]' : 'h-9'} relative border-b border-gray-100 dark:border-gray-700 transition-colors ${
-        !isPhase ? 'hover:bg-gray-50 dark:hover:bg-gray-750' : ''
-      }`}
-      style={isPhase && task.color ? {
-        backgroundColor: addAlphaToHex(task.color, 0.15),
-      } : {}}
-    >
-      {isPhase ? renderMilestone() : renderTaskBar()}
-    </div>
-  );
-});
 
 TaskBarRow.displayName = 'TaskBarRow';
 
-const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(({ tasks, viewMode, onScroll, containerRef, dateRange, phases, expandedTasks }, ref) => {
+const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
-  const columnsCount = useMemo(() => {
+  ({ tasks, viewMode, onScroll, containerRef, dateRange, phases, expandedTasks }, ref) => {
-    if (!dateRange) {
+    const columnsCount = useMemo(() => {
-      // Default counts if no date range
+      if (!dateRange) {
+        // Default counts if no date range
+        switch (viewMode) {
+          case 'day':
+            return 30;
+          case 'week':
+            return 12;
+          case 'month':
+            return 12;
+          case 'quarter':
+            return 8;
+          case 'year':
+            return 5;
+          default:
+            return 12;
+        }
+      }
+
+      const { start, end } = dateRange;
+      const diffTime = Math.abs(end.getTime() - start.getTime());
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
       switch (viewMode) {
-        case 'day': return 30;
+        case 'day':
-        case 'week': return 12;
+          return diffDays;
-        case 'month': return 12;
+        case 'week':
-        case 'quarter': return 8;
+          return Math.ceil(diffDays / 7);
-        case 'year': return 5;
+        case 'month':
-        default: return 12;
+          const startYear = start.getFullYear();
+          const startMonth = start.getMonth();
+          const endYear = end.getFullYear();
+          const endMonth = end.getMonth();
+          return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+        case 'quarter':
+          const qStartYear = start.getFullYear();
+          const qStartQuarter = Math.ceil((start.getMonth() + 1) / 3);
+          const qEndYear = end.getFullYear();
+          const qEndQuarter = Math.ceil((end.getMonth() + 1) / 3);
+          return (qEndYear - qStartYear) * 4 + (qEndQuarter - qStartQuarter) + 1;
+        case 'year':
+          return end.getFullYear() - start.getFullYear() + 1;
+        default:
+          return 12;
       }
-    }
+    }, [viewMode, dateRange]);
 
-    const { start, end } = dateRange;
+    const { actualColumnWidth, totalWidth, shouldScroll } = useGanttDimensions(
-    const diffTime = Math.abs(end.getTime() - start.getTime());
+      viewMode,
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      containerRef,
+      columnsCount
+    );
 
-    switch (viewMode) {
+    const gridColumns = useMemo(
-      case 'day': 
+      () => Array.from({ length: columnsCount }).map((_, index) => index),
-        return diffDays;
+      [columnsCount]
-      case 'week':
+    );
-        return Math.ceil(diffDays / 7);
-      case 'month':
-        const startYear = start.getFullYear();
-        const startMonth = start.getMonth();
-        const endYear = end.getFullYear();
-        const endMonth = end.getMonth();
-        return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
-      case 'quarter':
-        const qStartYear = start.getFullYear();
-        const qStartQuarter = Math.ceil((start.getMonth() + 1) / 3);
-        const qEndYear = end.getFullYear();
-        const qEndQuarter = Math.ceil((end.getMonth() + 1) / 3);
-        return (qEndYear - qStartYear) * 4 + (qEndQuarter - qStartQuarter) + 1;
-      case 'year':
-        return end.getFullYear() - start.getFullYear() + 1;
-      default:
-        return 12;
-    }
-  }, [viewMode, dateRange]);
 
-  const { actualColumnWidth, totalWidth, shouldScroll } = useGanttDimensions(
+    // Flatten tasks to match the same hierarchy as task list
-    viewMode,
+    // This should be synchronized with the task list component's expand/collapse state
-    containerRef,
+    const flattenedTasks = useMemo(() => {
-    columnsCount
+      const result: Array<GanttTask | { id: string; isEmptyRow: boolean }> = [];
-  );
+      const processedIds = new Set<string>(); // Track processed task IDs to prevent duplicates
 
-  const gridColumns = useMemo(() => 
+      const processTask = (task: GanttTask, level: number = 0) => {
-    Array.from({ length: columnsCount }).map((_, index) => index)
+        const isPhase = task.type === 'milestone' || task.is_milestone;
-  , [columnsCount]);
+        const phaseId = isPhase
+          ? task.id === 'phase-unmapped'
+            ? 'unmapped'
+            : task.phase_id || task.id.replace('phase-', '')
+          : task.id;
+        const isExpanded = expandedTasks ? expandedTasks.has(phaseId) : task.expanded !== false;
 
-  // Flatten tasks to match the same hierarchy as task list
+        // Avoid processing the same task multiple times
-  // This should be synchronized with the task list component's expand/collapse state
+        if (processedIds.has(task.id)) {
-  const flattenedTasks = useMemo(() => {
+          return;
-    const result: Array<GanttTask | { id: string; isEmptyRow: boolean }> = [];
+        }
+        processedIds.add(task.id);
 
-    const processTask = (task: GanttTask) => {
+        // Set the correct level for nested tasks
-      result.push(task);
+        const taskWithLevel = { ...task, level };
+        result.push(taskWithLevel);
 
-      // Check if this is an expanded phase with no children
+        if (isPhase && isExpanded) {
-      const isPhase = task.type === 'milestone' || task.is_milestone;
+          // Add children if they exist
-      const isEmpty = isPhase && (!task.children || task.children.length === 0);
+          if (task.children && task.children.length > 0) {
-      const isExpanded = expandedTasks ? expandedTasks.has(task.id) : (task.expanded !== false);
+            task.children.forEach(child => processTask(child, level + 1));
+          }
+          // Add an empty row for the "Add Task" button at the end (only if not already processed)
+          const addTaskId = `add-task-${task.id}-timeline`;
+          if (!processedIds.has(addTaskId)) {
+            processedIds.add(addTaskId);
+            result.push({ id: addTaskId, isEmptyRow: true });
+          }
+        } else if (!isPhase && task.children && expandedTasks && expandedTasks.has(task.id)) {
+          task.children.forEach(child => processTask(child, level + 1));
+        }
+      };
 
-      if (isEmpty && isExpanded) {
+      tasks.forEach(task => processTask(task, 0));
-        // Add an empty row for the "Add Task" button
+      return result;
-        result.push({ id: `${task.id}-empty`, isEmptyRow: true });
+    }, [tasks, expandedTasks]);
-      } else if (task.children && isExpanded) {
-        task.children.forEach(child => processTask(child));
-      }
-    };
 
-    tasks.forEach(processTask);
+    return (
-    return result;
-  }, [tasks, expandedTasks]);
-
-  return (
-    <div 
-      ref={ref}
-      className={`flex-1 relative bg-white dark:bg-gray-800 overflow-y-auto ${
-        shouldScroll ? 'overflow-x-auto' : 'overflow-x-hidden'
-      } gantt-chart-scroll`}
-      onScroll={onScroll}
-    >
       <div
-        className="relative" 
+        ref={ref}
-        style={{ 
+        className={`flex-1 relative bg-white dark:bg-gray-800 overflow-y-auto ${
-          width: `${totalWidth}px`, 
+          shouldScroll ? 'overflow-x-auto' : 'overflow-x-hidden'
-          minHeight: '100%',
+        } gantt-chart-scroll`}
-          minWidth: shouldScroll ? 'auto' : '100%'
+        onScroll={onScroll}
-        }}
       >
         <div
-          className="absolute top-0 left-0 bottom-0 flex pointer-events-none"
+          className="relative"
-          style={{ width: `${totalWidth}px` }}
+          style={{
+            width: `${totalWidth}px`,
+            minHeight: '100%',
+            minWidth: shouldScroll ? 'auto' : '100%',
+          }}
         >
-          {/* Grid columns for timeline */}
+          <div
-          {gridColumns.map(index => (
+            className="absolute top-0 left-0 bottom-0 flex pointer-events-none"
-            <GridColumn 
+            style={{ width: `${totalWidth}px` }}
-              key={`grid-col-${index}`} 
+          >
-              index={index} 
+            {/* Grid columns for timeline */}
-              columnWidth={actualColumnWidth}
+            {gridColumns.map(index => (
-            />
+              <GridColumn key={`grid-col-${index}`} index={index} columnWidth={actualColumnWidth} />
-          ))}
+            ))}
-        </div>
+          </div>
-        <div className="relative z-10">
+          <div className="relative z-10">
-          {flattenedTasks.map(item => {
+            {flattenedTasks.map(item => {
-            if ('isEmptyRow' in item && item.isEmptyRow) {
+              if ('isEmptyRow' in item && item.isEmptyRow) {
-              // Render empty row without "Add Task" button
+                // Render empty row without "Add Task" button
+                return (
+                  <div
+                    key={item.id}
+                    className="h-9 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+                  />
+                );
+              }
               return (
-                <div 
+                <TaskBarRow
                   key={item.id}
-                  className="h-9 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+                  task={item as GanttTask}
+                  viewMode={viewMode}
+                  columnWidth={actualColumnWidth}
+                  columnsCount={columnsCount}
+                  dateRange={dateRange}
                 />
               );
-            }
+            })}
-            return (
+            {flattenedTasks.length === 0 && (
-              <TaskBarRow 
+              <div className="flex items-center justify-center h-64 text-gray-400 dark:text-gray-500">
-                key={item.id} 
+                No tasks to display
-                task={item as GanttTask} 
+              </div>
-                viewMode={viewMode}
+            )}
-                columnWidth={actualColumnWidth}
+          </div>
-                columnsCount={columnsCount}
-                dateRange={dateRange}
-              />
-            );
-          })}
-          {flattenedTasks.length === 0 && (
-            <div className="flex items-center justify-center h-64 text-gray-400 dark:text-gray-500">
-              No tasks to display
-            </div>
-          )}
         </div>
       </div>
-    </div>
+    );
-  );
+  }
-});
+);
 
 GanttChart.displayName = 'GanttChart';
 

worklenz-frontend/src/pages/projects/projectView/gantt/components/gantt-timeline/GanttTimeline.tsx

@@ -9,230 +9,240 @@ interface GanttTimelineProps {
   dateRange?: { start: Date; end: Date };
 }
 
-const GanttTimeline = forwardRef<HTMLDivElement, GanttTimelineProps>(({ viewMode, containerRef, dateRange }, ref) => {
+const GanttTimeline = forwardRef<HTMLDivElement, GanttTimelineProps>(
-  const { topHeaders, bottomHeaders } = useMemo(() => {
+  ({ viewMode, containerRef, dateRange }, ref) => {
-    if (!dateRange) {
+    const { topHeaders, bottomHeaders } = useMemo(() => {
-      return { topHeaders: [], bottomHeaders: [] };
+      if (!dateRange) {
-    }
+        return { topHeaders: [], bottomHeaders: [] };
+      }
 
-    const { start, end } = dateRange;
+      const { start, end } = dateRange;
-    const topHeaders: Array<{ label: string; key: string; span: number }> = [];
+      const topHeaders: Array<{ label: string; key: string; span: number }> = [];
-    const bottomHeaders: Array<{ label: string; key: string }> = [];
+      const bottomHeaders: Array<{ label: string; key: string }> = [];
 
-    switch (viewMode) {
+      switch (viewMode) {
-      case 'month':
+        case 'month':
-        // Top: Years, Bottom: Months
+          // Top: Years, Bottom: Months
-        const startYear = start.getFullYear();
+          const startYear = start.getFullYear();
-        const startMonth = start.getMonth();
+          const startMonth = start.getMonth();
-        const endYear = end.getFullYear();
+          const endYear = end.getFullYear();
-        const endMonth = end.getMonth();
+          const endMonth = end.getMonth();
 
-        // Generate bottom headers (months)
+          // Generate bottom headers (months)
-        let currentYear = startYear;
+          let currentYear = startYear;
-        let currentMonth = startMonth;
+          let currentMonth = startMonth;
 
-        while (currentYear < endYear || (currentYear === endYear && currentMonth <= endMonth)) {
+          while (currentYear < endYear || (currentYear === endYear && currentMonth <= endMonth)) {
-          const date = new Date(currentYear, currentMonth, 1);
+            const date = new Date(currentYear, currentMonth, 1);
-          bottomHeaders.push({
+            bottomHeaders.push({
-            label: date.toLocaleDateString('en-US', { month: 'short' }),
+              label: date.toLocaleDateString('en-US', { month: 'short' }),
-            key: `month-${currentYear}-${currentMonth}`,
+              key: `month-${currentYear}-${currentMonth}`,
-          });
-          
-          currentMonth++;
-          if (currentMonth > 11) {
-            currentMonth = 0;
-            currentYear++;
-          }
-        }
-        
-        // Generate top headers (years)
-        for (let year = startYear; year <= endYear; year++) {
-          const monthsInYear = bottomHeaders.filter(h => h.key.includes(`-${year}-`)).length;
-          if (monthsInYear > 0) {
-            topHeaders.push({
-              label: `${year}`,
-              key: `year-${year}`,
-              span: monthsInYear
             });
-          }
-        }
-        break;
 
-      case 'week':
+            currentMonth++;
-        // Top: Months, Bottom: Weeks
+            if (currentMonth > 11) {
-        const weekStart = new Date(start);
+              currentMonth = 0;
-        const weekEnd = new Date(end);
+              currentYear++;
-        weekStart.setDate(weekStart.getDate() - weekStart.getDay());
-        
-        const weekDates: Date[] = [];
-        const tempDate = new Date(weekStart);
-        while (tempDate <= weekEnd) {
-          weekDates.push(new Date(tempDate));
-          tempDate.setDate(tempDate.getDate() + 7);
-        }
-        
-        // Generate bottom headers (weeks)
-        weekDates.forEach(date => {
-          const weekNum = TimelineUtils.getWeekNumber(date);
-          bottomHeaders.push({
-            label: `W${weekNum}`,
-            key: `week-${date.getFullYear()}-${weekNum}`,
-          });
-        });
-        
-        // Generate top headers (months)
-        const monthGroups = new Map<string, number>();
-        weekDates.forEach(date => {
-          const monthKey = `${date.getFullYear()}-${date.getMonth()}`;
-          monthGroups.set(monthKey, (monthGroups.get(monthKey) || 0) + 1);
-        });
-        
-        monthGroups.forEach((count, monthKey) => {
-          const [year, month] = monthKey.split('-').map(Number);
-          const date = new Date(year, month, 1);
-          topHeaders.push({
-            label: date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
-            key: `month-${monthKey}`,
-            span: count
-          });
-        });
-        break;
-        
-      case 'day':
-        // Top: Months, Bottom: Days
-        const dayStart = new Date(start);
-        const dayEnd = new Date(end);
-        
-        const dayDates: Date[] = [];
-        const tempDayDate = new Date(dayStart);
-        while (tempDayDate <= dayEnd) {
-          dayDates.push(new Date(tempDayDate));
-          tempDayDate.setDate(tempDayDate.getDate() + 1);
-        }
-        
-        // Generate bottom headers (days)
-        dayDates.forEach(date => {
-          bottomHeaders.push({
-            label: date.getDate().toString(),
-            key: `day-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
-          });
-        });
-        
-        // Generate top headers (months)
-        const dayMonthGroups = new Map<string, number>();
-        dayDates.forEach(date => {
-          const monthKey = `${date.getFullYear()}-${date.getMonth()}`;
-          dayMonthGroups.set(monthKey, (dayMonthGroups.get(monthKey) || 0) + 1);
-        });
-        
-        dayMonthGroups.forEach((count, monthKey) => {
-          const [year, month] = monthKey.split('-').map(Number);
-          const date = new Date(year, month, 1);
-          topHeaders.push({
-            label: date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
-            key: `month-${monthKey}`,
-            span: count
-          });
-        });
-        break;
-        
-      default:
-        // Fallback to single row for other view modes
-        const result = [];
-        switch (viewMode) {
-          case 'quarter':
-            const qStartYear = start.getFullYear();
-            const qStartQuarter = Math.ceil((start.getMonth() + 1) / 3);
-            const qEndYear = end.getFullYear();
-            const qEndQuarter = Math.ceil((end.getMonth() + 1) / 3);
-            
-            let qYear = qStartYear;
-            let qQuarter = qStartQuarter;
-            
-            while (qYear < qEndYear || (qYear === qEndYear && qQuarter <= qEndQuarter)) {
-              result.push({
-                label: `Q${qQuarter} ${qYear}`,
-                key: `quarter-${qYear}-${qQuarter}`,
-              });
-              
-              qQuarter++;
-              if (qQuarter > 4) {
-                qQuarter = 1;
-                qYear++;
-              }
             }
-            break;
+          }
-          case 'year':
-            const yearStart = start.getFullYear();
-            const yearEnd = end.getFullYear();
 
-            for (let year = yearStart; year <= yearEnd; year++) {
+          // Generate top headers (years)
-              result.push({
+          for (let year = startYear; year <= endYear; year++) {
+            const monthsInYear = bottomHeaders.filter(h => h.key.includes(`-${year}-`)).length;
+            if (monthsInYear > 0) {
+              topHeaders.push({
                 label: `${year}`,
                 key: `year-${year}`,
+                span: monthsInYear,
               });
             }
-            break;
+          }
-        }
+          break;
 
-        result.forEach(item => {
+        case 'week':
-          bottomHeaders.push(item);
+          // Top: Months, Bottom: Weeks
-        });
+          const weekStart = new Date(start);
-        break;
+          const weekEnd = new Date(end);
-    }
+          weekStart.setDate(weekStart.getDate() - weekStart.getDay());
 
-    return { topHeaders, bottomHeaders };
+          const weekDates: Date[] = [];
-  }, [viewMode, dateRange]);
+          const tempDate = new Date(weekStart);
+          while (tempDate <= weekEnd) {
+            weekDates.push(new Date(tempDate));
+            tempDate.setDate(tempDate.getDate() + 7);
+          }
 
-  const { actualColumnWidth, totalWidth, shouldScroll } = useGanttDimensions(
+          // Generate bottom headers (weeks)
-    viewMode,
+          weekDates.forEach(date => {
-    containerRef,
+            const weekNum = TimelineUtils.getWeekNumber(date);
-    bottomHeaders.length
+            bottomHeaders.push({
-  );
+              label: `W${weekNum}`,
+              key: `week-${date.getFullYear()}-${weekNum}`,
+            });
+          });
 
-  const hasTopHeaders = topHeaders.length > 0;
+          // Generate top headers (months)
+          const monthGroups = new Map<string, number>();
+          weekDates.forEach(date => {
+            const monthKey = `${date.getFullYear()}-${date.getMonth()}`;
+            monthGroups.set(monthKey, (monthGroups.get(monthKey) || 0) + 1);
+          });
 
-  return (
+          monthGroups.forEach((count, monthKey) => {
-    <div 
+            const [year, month] = monthKey.split('-').map(Number);
-      ref={ref}
+            const date = new Date(year, month, 1);
-      className={`${hasTopHeaders ? 'h-20' : 'h-10'} flex-shrink-0 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-y-hidden ${
+            topHeaders.push({
-        shouldScroll ? 'overflow-x-auto' : 'overflow-x-hidden'
+              label: date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
-      } scrollbar-hide flex flex-col`}
+              key: `month-${monthKey}`,
-      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+              span: count,
-    >
+            });
-      {hasTopHeaders && (
+          });
-        <div className="flex h-10 border-b border-gray-200 dark:border-gray-700" style={{ width: `${totalWidth}px`, minWidth: shouldScroll ? 'auto' : '100%' }}>
+          break;
-          {topHeaders.map(header => (
+
+        case 'day':
+          // Top: Months, Bottom: Days
+          const dayStart = new Date(start);
+          const dayEnd = new Date(end);
+
+          const dayDates: Date[] = [];
+          const tempDayDate = new Date(dayStart);
+          while (tempDayDate <= dayEnd) {
+            dayDates.push(new Date(tempDayDate));
+            tempDayDate.setDate(tempDayDate.getDate() + 1);
+          }
+
+          // Generate bottom headers (days)
+          dayDates.forEach(date => {
+            bottomHeaders.push({
+              label: date.getDate().toString(),
+              key: `day-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`,
+            });
+          });
+
+          // Generate top headers (months)
+          const dayMonthGroups = new Map<string, number>();
+          dayDates.forEach(date => {
+            const monthKey = `${date.getFullYear()}-${date.getMonth()}`;
+            dayMonthGroups.set(monthKey, (dayMonthGroups.get(monthKey) || 0) + 1);
+          });
+
+          dayMonthGroups.forEach((count, monthKey) => {
+            const [year, month] = monthKey.split('-').map(Number);
+            const date = new Date(year, month, 1);
+            topHeaders.push({
+              label: date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
+              key: `month-${monthKey}`,
+              span: count,
+            });
+          });
+          break;
+
+        default:
+          // Fallback to single row for other view modes
+          const result = [];
+          switch (viewMode) {
+            case 'quarter':
+              const qStartYear = start.getFullYear();
+              const qStartQuarter = Math.ceil((start.getMonth() + 1) / 3);
+              const qEndYear = end.getFullYear();
+              const qEndQuarter = Math.ceil((end.getMonth() + 1) / 3);
+
+              let qYear = qStartYear;
+              let qQuarter = qStartQuarter;
+
+              while (qYear < qEndYear || (qYear === qEndYear && qQuarter <= qEndQuarter)) {
+                result.push({
+                  label: `Q${qQuarter} ${qYear}`,
+                  key: `quarter-${qYear}-${qQuarter}`,
+                });
+
+                qQuarter++;
+                if (qQuarter > 4) {
+                  qQuarter = 1;
+                  qYear++;
+                }
+              }
+              break;
+            case 'year':
+              const yearStart = start.getFullYear();
+              const yearEnd = end.getFullYear();
+
+              for (let year = yearStart; year <= yearEnd; year++) {
+                result.push({
+                  label: `${year}`,
+                  key: `year-${year}`,
+                });
+              }
+              break;
+          }
+
+          result.forEach(item => {
+            bottomHeaders.push(item);
+          });
+          break;
+      }
+
+      return { topHeaders, bottomHeaders };
+    }, [viewMode, dateRange]);
+
+    const { actualColumnWidth, totalWidth, shouldScroll } = useGanttDimensions(
+      viewMode,
+      containerRef,
+      bottomHeaders.length
+    );
+
+    const hasTopHeaders = topHeaders.length > 0;
+
+    return (
+      <div
+        ref={ref}
+        className={`${hasTopHeaders ? 'h-20' : 'h-10'} flex-shrink-0 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-y-hidden ${
+          shouldScroll ? 'overflow-x-auto' : 'overflow-x-hidden'
+        } scrollbar-hide flex flex-col`}
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      >
+        {hasTopHeaders && (
+          <div
+            className="flex h-10 border-b border-gray-200 dark:border-gray-700"
+            style={{ width: `${totalWidth}px`, minWidth: shouldScroll ? 'auto' : '100%' }}
+          >
+            {topHeaders.map(header => (
+              <div
+                key={header.key}
+                className="py-2.5 text-center border-r border-gray-200 dark:border-gray-700 text-sm font-semibold text-gray-800 dark:text-gray-200 flex-shrink-0 px-2 whitespace-nowrap bg-gray-50 dark:bg-gray-750"
+                style={{ width: `${actualColumnWidth * header.span}px` }}
+                title={header.label}
+              >
+                {header.label}
+              </div>
+            ))}
+          </div>
+        )}
+        <div
+          className="flex h-10"
+          style={{ width: `${totalWidth}px`, minWidth: shouldScroll ? 'auto' : '100%' }}
+        >
+          {bottomHeaders.map(header => (
             <div
               key={header.key}
-              className="py-2.5 text-center border-r border-gray-200 dark:border-gray-700 text-sm font-semibold text-gray-800 dark:text-gray-200 flex-shrink-0 px-2 whitespace-nowrap bg-gray-50 dark:bg-gray-750"
+              className={`py-2.5 text-center border-r border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 flex-shrink-0 ${
-              style={{ width: `${actualColumnWidth * header.span}px` }}
+                viewMode === 'day' ? 'px-1 text-xs' : 'px-2'
+              } ${
+                viewMode === 'day' && actualColumnWidth < 50
+                  ? 'whitespace-nowrap overflow-hidden text-ellipsis'
+                  : 'whitespace-nowrap'
+              }`}
+              style={{ width: `${actualColumnWidth}px` }}
               title={header.label}
             >
               {header.label}
             </div>
           ))}
         </div>
-      )}
-      <div className="flex h-10" style={{ width: `${totalWidth}px`, minWidth: shouldScroll ? 'auto' : '100%' }}>
-        {bottomHeaders.map(header => (
-          <div 
-            key={header.key} 
-            className={`py-2.5 text-center border-r border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 flex-shrink-0 ${
-              viewMode === 'day' ? 'px-1 text-xs' : 'px-2'
-            } ${
-              viewMode === 'day' && actualColumnWidth < 50 ? 'whitespace-nowrap overflow-hidden text-ellipsis' : 'whitespace-nowrap'
-            }`}
-            style={{ width: `${actualColumnWidth}px` }}
-            title={header.label}
-          >
-            {header.label}
-          </div>
-        ))}
       </div>
-    </div>
+    );
-  );
+  }
-});
+);
 
 GanttTimeline.displayName = 'GanttTimeline';
 

worklenz-frontend/src/pages/projects/projectView/gantt/components/gantt-toolbar/GanttToolbar.tsx

@@ -1,6 +1,12 @@
 import React, { memo } from 'react';
 import { Select, Button, Space, Divider } from 'antd';
-import { ZoomInOutlined, ZoomOutOutlined, FullscreenOutlined, PlusOutlined, FlagOutlined } from '@ant-design/icons';
+import {
+  ZoomInOutlined,
+  ZoomOutOutlined,
+  FullscreenOutlined,
+  PlusOutlined,
+  FlagOutlined,
+} from '@ant-design/icons';
 import { GanttViewMode } from '../../types/gantt-types';
 
 const { Option } = Select;
@@ -13,57 +19,55 @@ interface GanttToolbarProps {
   onCreateTask?: () => void;
 }
 
-const GanttToolbar: React.FC<GanttToolbarProps> = memo(({ viewMode, onViewModeChange, dateRange, onCreatePhase, onCreateTask }) => {
+const GanttToolbar: React.FC<GanttToolbarProps> = memo(
-  return (
+  ({ viewMode, onViewModeChange, dateRange, onCreatePhase, onCreateTask }) => {
-    <div className="p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+    return (
-      <Space>
+      <div className="p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-        <Button 
+        <Space>
-          type="primary"
+          <Button
-          icon={<FlagOutlined />}
+            type="primary"
-          onClick={onCreatePhase}
+            icon={<FlagOutlined />}
-          className="bg-blue-600 hover:bg-blue-700 border-blue-600"
+            onClick={onCreatePhase}
-        >
+            className="bg-blue-600 hover:bg-blue-700 border-blue-600"
-          Manage Phases
+          >
-        </Button>
+            Manage Phases
-        <Button 
+          </Button>
-          icon={<PlusOutlined />}
+          <Button
-          onClick={onCreateTask}
+            icon={<PlusOutlined />}
-          className="hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-600"
+            onClick={onCreateTask}
-        >
+            className="hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-600"
-          Add Task
+          >
-        </Button>
+            Add Task
-        <Divider type="vertical" className="bg-gray-300 dark:bg-gray-600" />
+          </Button>
-        <Select
+          <Divider type="vertical" className="bg-gray-300 dark:bg-gray-600" />
-          value={viewMode}
+          <Select value={viewMode} onChange={onViewModeChange} className="w-32">
-          onChange={onViewModeChange}
+            <Option value="day">Day</Option>
-          className="w-32"
+            <Option value="week">Week</Option>
-        >
+            <Option value="month">Month</Option>
-          <Option value="day">Day</Option>
+            <Option value="quarter">Quarter</Option>
-          <Option value="week">Week</Option>
+            <Option value="year">Year</Option>
-          <Option value="month">Month</Option>
+          </Select>
-          <Option value="quarter">Quarter</Option>
-          <Option value="year">Year</Option>
-        </Select>
 
-        <Button 
+          <Button
-          icon={<ZoomInOutlined />} 
+            icon={<ZoomInOutlined />}
-          title="Zoom In" 
+            title="Zoom In"
-          className="hover:text-blue-600 dark:hover:text-blue-400"
+            className="hover:text-blue-600 dark:hover:text-blue-400"
-        />
+          />
-        <Button 
+          <Button
-          icon={<ZoomOutOutlined />} 
+            icon={<ZoomOutOutlined />}
-          title="Zoom Out" 
+            title="Zoom Out"
-          className="hover:text-blue-600 dark:hover:text-blue-400"
+            className="hover:text-blue-600 dark:hover:text-blue-400"
-        />
+          />
-        <Button 
+          <Button
-          icon={<FullscreenOutlined />} 
+            icon={<FullscreenOutlined />}
-          title="Fullscreen" 
+            title="Fullscreen"
-          className="hover:text-blue-600 dark:hover:text-blue-400"
+            className="hover:text-blue-600 dark:hover:text-blue-400"
-        />
+          />
-      </Space>
+        </Space>
-    </div>
+      </div>
-  );
+    );
-});
+  }
+);
 
 GanttToolbar.displayName = 'GanttToolbar';
 

worklenz-frontend/src/pages/projects/projectView/gantt/gantt-styles.css

@@ -5,8 +5,8 @@
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none; /* Firefox */
 }
 
 /* Gantt task list specific styles */
@@ -35,7 +35,6 @@
   display: none;
 }
 
-
 /* Gantt chart scrollbar - show both vertical and horizontal */
 .gantt-chart-scroll::-webkit-scrollbar {
   width: 8px;
@@ -108,7 +107,7 @@
 }
 
 .gantt-phase-row::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -141,7 +140,9 @@
 /* Phase expansion transitions */
 .gantt-phase-children {
   overflow: hidden;
-  transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.2s ease-in-out;
 }
 
 .gantt-phase-children.collapsed {

worklenz-frontend/src/pages/projects/projectView/gantt/hooks/useGanttDimensions.ts

@@ -28,9 +28,10 @@ export const useGanttDimensions = (
   // For month/quarter/year views, stretch to fill container if wider
   const shouldStretch = viewMode !== 'day' && viewMode !== 'week';
 
-  const actualColumnWidth = shouldStretch && containerWidth > minTotalWidth
+  const actualColumnWidth =
-    ? containerWidth / columnsCount
+    shouldStretch && containerWidth > minTotalWidth
-    : baseColumnWidth;
+      ? containerWidth / columnsCount
+      : baseColumnWidth;
 
   const totalWidth = columnsCount * actualColumnWidth;
 
@@ -39,6 +40,6 @@ export const useGanttDimensions = (
     actualColumnWidth,
     totalWidth,
     columnsCount,
-    shouldScroll: totalWidth > containerWidth
+    shouldScroll: totalWidth > containerWidth,
   };
 };

worklenz-frontend/src/pages/projects/projectView/gantt/services/gantt-api.service.ts

@@ -21,7 +21,11 @@ export interface RoadmapTasksResponse {
   priority_name: string;
   priority_value: number;
   priority_color: string;
-  phase_id: string | null;
+  phases: Array<{
+    phase_id: string;
+    phase_name: string;
+    phase_color: string;
+  }>;
   assignees: Array<{
     team_member_id: string;
     assignee_name: string;
@@ -41,7 +45,7 @@ export interface RoadmapTasksResponse {
     progress: number;
     roadmap_sort_order: number;
     parent_task_id: string;
-    phase_id: string | null;
+    phase_id?: string | null; // Keep this for subtasks compatibility
   }>;
 }
 
@@ -52,6 +56,10 @@ export interface ProjectPhaseResponse {
   start_date: string | null;
   end_date: string | null;
   sort_index: number;
+  todo_progress: number;
+  doing_progress: number;
+  done_progress: number;
+  total_tasks: number;
 }
 
 export interface UpdateTaskDatesRequest {
@@ -108,10 +116,7 @@ export const ganttApi = createApi({
   }),
   tagTypes: ['GanttTasks', 'GanttPhases'],
   endpoints: builder => ({
-    getRoadmapTasks: builder.query<
+    getRoadmapTasks: builder.query<IServerResponse<RoadmapTasksResponse[]>, { projectId: string }>({
-      IServerResponse<RoadmapTasksResponse[]>,
-      { projectId: string }
-    >({
       query: ({ projectId }) => {
         const params = new URLSearchParams({
           project_id: projectId,
@@ -124,40 +129,31 @@ export const ganttApi = createApi({
       ],
     }),
 
-    getProjectPhases: builder.query<
+    getProjectPhases: builder.query<IServerResponse<ProjectPhaseResponse[]>, { projectId: string }>(
-      IServerResponse<ProjectPhaseResponse[]>,
+      {
-      { projectId: string }
+        query: ({ projectId }) => {
-    >({
+          const params = new URLSearchParams({
-      query: ({ projectId }) => {
+            project_id: projectId,
-        const params = new URLSearchParams({
+          });
-          project_id: projectId,
+          return `${rootUrl}/project-phases?${params.toString()}`;
-        });
+        },
-        return `${rootUrl}/project-phases?${params.toString()}`;
+        providesTags: (result, error, { projectId }) => [
-      },
+          { type: 'GanttPhases', id: projectId },
-      providesTags: (result, error, { projectId }) => [
+          { type: 'GanttPhases', id: 'LIST' },
-        { type: 'GanttPhases', id: projectId },
+        ],
-        { type: 'GanttPhases', id: 'LIST' },
+      }
-      ],
+    ),
-    }),
 
-    updateTaskDates: builder.mutation<
+    updateTaskDates: builder.mutation<IServerResponse<any>, UpdateTaskDatesRequest>({
-      IServerResponse<any>,
-      UpdateTaskDatesRequest
-    >({
       query: body => ({
         url: `${rootUrl}/update-task-dates`,
         method: 'POST',
         body,
       }),
-      invalidatesTags: (result, error, { task_id }) => [
+      invalidatesTags: (result, error, { task_id }) => [{ type: 'GanttTasks', id: 'LIST' }],
-        { type: 'GanttTasks', id: 'LIST' },
-      ],
     }),
 
-    createPhase: builder.mutation<
+    createPhase: builder.mutation<IServerResponse<ProjectPhaseResponse>, CreatePhaseRequest>({
-      IServerResponse<ProjectPhaseResponse>,
-      CreatePhaseRequest
-    >({
       query: body => ({
         url: `${rootUrl}/create-phase`,
         method: 'POST',
@@ -171,10 +167,7 @@ export const ganttApi = createApi({
       ],
     }),
 
-    createTask: builder.mutation<
+    createTask: builder.mutation<IServerResponse<RoadmapTasksResponse>, CreateTaskRequest>({
-      IServerResponse<RoadmapTasksResponse>,
-      CreateTaskRequest
-    >({
       query: body => ({
         url: `${rootUrl}/create-task`,
         method: 'POST',
@@ -186,10 +179,7 @@ export const ganttApi = createApi({
       ],
     }),
 
-    updatePhase: builder.mutation<
+    updatePhase: builder.mutation<IServerResponse<ProjectPhaseResponse>, UpdatePhaseRequest>({
-      IServerResponse<ProjectPhaseResponse>,
-      UpdatePhaseRequest
-    >({
       query: body => ({
         url: `${rootUrl}/update-phase`,
         method: 'PUT',
@@ -217,17 +207,23 @@ export const {
 /**
  * Transform API response to Gantt task format with phases as milestones
  */
-export const transformToGanttTasks = (apiTasks: RoadmapTasksResponse[], apiPhases: ProjectPhaseResponse[]): GanttTask[] => {
+export const transformToGanttTasks = (
+  apiTasks: RoadmapTasksResponse[],
+  apiPhases: ProjectPhaseResponse[]
+): GanttTask[] => {
   // Group tasks by phase
   const tasksByPhase = new Map<string, RoadmapTasksResponse[]>();
   const unassignedTasks: RoadmapTasksResponse[] = [];
 
   apiTasks.forEach(task => {
-    if (task.phase_id) {
+    // Tasks now have phases array instead of direct phase_id
-      if (!tasksByPhase.has(task.phase_id)) {
+    const taskPhaseId = task.phases.length > 0 ? task.phases[0].phase_id : null;
-        tasksByPhase.set(task.phase_id, []);
+
+    if (taskPhaseId) {
+      if (!tasksByPhase.has(taskPhaseId)) {
+        tasksByPhase.set(taskPhaseId, []);
       }
-      tasksByPhase.get(task.phase_id)!.push(task);
+      tasksByPhase.get(taskPhaseId)!.push(task);
     } else {
       unassignedTasks.push(task);
     }
@@ -254,7 +250,12 @@ export const transformToGanttTasks = (apiTasks: RoadmapTasksResponse[], apiPhase
         type: 'milestone',
         is_milestone: true,
         phase_id: phase.id,
-        children: phaseTasks.map(task => transformTask(task, 1))
+        // Pass through phase progress data from backend
+        todo_progress: phase.todo_progress,
+        doing_progress: phase.doing_progress,
+        done_progress: phase.done_progress,
+        total_tasks: phase.total_tasks,
+        children: phaseTasks.map(task => transformTask(task, 1)),
       };
 
       result.push(phaseMilestone);
@@ -273,7 +274,7 @@ export const transformToGanttTasks = (apiTasks: RoadmapTasksResponse[], apiPhase
     type: 'milestone',
     is_milestone: true,
     phase_id: null,
-    children: unassignedTasks.map(task => transformTask(task, 1))
+    children: unassignedTasks.map(task => transformTask(task, 1)),
   };
 
   result.push(unmappedPhase);
@@ -284,36 +285,40 @@ export const transformToGanttTasks = (apiTasks: RoadmapTasksResponse[], apiPhase
 /**
  * Helper function to transform individual task
  */
-const transformTask = (task: RoadmapTasksResponse, level: number = 0): GanttTask => ({
+const transformTask = (task: RoadmapTasksResponse, level: number = 0): GanttTask => {
-  id: task.id,
+  const taskPhaseId = task.phases.length > 0 ? task.phases[0].phase_id : null;
-  name: task.name,
+
-  start_date: task.start_date ? new Date(task.start_date) : null,
+  return {
-  end_date: task.end_date ? new Date(task.end_date) : null,
+    id: task.id,
-  progress: task.progress,
+    name: task.name,
-  dependencies: task.dependencies.map(dep => dep.related_task_id),
+    start_date: task.start_date ? new Date(task.start_date) : null,
-  dependencyType: task.dependencies[0]?.dependency_type as any || 'blocked_by',
+    end_date: task.end_date ? new Date(task.end_date) : null,
-  parent_id: task.parent_task_id,
+    progress: task.progress,
-  children: task.subtasks.map(subtask => ({
+    dependencies: task.dependencies.map(dep => dep.related_task_id),
-    id: subtask.id,
+    dependencyType: (task.dependencies[0]?.dependency_type as any) || 'blocked_by',
-    name: subtask.name,
+    parent_id: task.parent_task_id,
-    start_date: subtask.start_date ? new Date(subtask.start_date) : null,
+    children: task.subtasks.map(subtask => ({
-    end_date: subtask.end_date ? new Date(subtask.end_date) : null,
+      id: subtask.id,
-    progress: subtask.progress,
+      name: subtask.name,
-    parent_id: subtask.parent_task_id,
+      start_date: subtask.start_date ? new Date(subtask.start_date) : null,
-    level: level + 1,
+      end_date: subtask.end_date ? new Date(subtask.end_date) : null,
+      progress: subtask.progress,
+      parent_id: subtask.parent_task_id,
+      level: level + 1,
+      type: 'task',
+      phase_id: subtask.phase_id, // Subtasks might still use direct phase_id
+    })),
+    level,
+    expanded: true,
+    color: task.status_color || task.priority_color,
+    assignees: task.assignees.map(a => a.assignee_name),
+    priority: task.priority_name,
+    status: task.status_name,
+    phase_id: taskPhaseId,
+    is_milestone: false,
     type: 'task',
-    phase_id: subtask.phase_id
+  };
-  })),
+};
-  level,
-  expanded: true,
-  color: task.status_color || task.priority_color,
-  assignees: task.assignees.map(a => a.assignee_name),
-  priority: task.priority_name,
-  status: task.status_name,
-  phase_id: task.phase_id,
-  is_milestone: false,
-  type: 'task'
-});
 
 /**
  * Transform API response to Gantt phases format
@@ -325,6 +330,10 @@ export const transformToGanttPhases = (apiPhases: ProjectPhaseResponse[]): Gantt
     color_code: phase.color_code,
     start_date: phase.start_date ? new Date(phase.start_date) : null,
     end_date: phase.end_date ? new Date(phase.end_date) : null,
-    sort_index: phase.sort_index
+    sort_index: phase.sort_index,
+    todo_progress: phase.todo_progress,
+    doing_progress: phase.doing_progress,
+    done_progress: phase.done_progress,
+    total_tasks: phase.total_tasks,
   }));
 };

worklenz-frontend/src/pages/projects/projectView/gantt/types/gantt-types.ts

@@ -1,6 +1,11 @@
 export type GanttViewMode = 'day' | 'week' | 'month' | 'quarter' | 'year';
 
-export type DependencyType = 'blocked_by' | 'finish_to_start' | 'start_to_start' | 'finish_to_finish' | 'start_to_finish';
+export type DependencyType =
+  | 'blocked_by'
+  | 'finish_to_start'
+  | 'start_to_start'
+  | 'finish_to_finish'
+  | 'start_to_finish';
 
 export interface GanttTask {
   id: string;
@@ -20,7 +25,9 @@ export interface GanttTask {
   status?: string;
   phase_id?: string;
   is_milestone?: boolean;
-  type?: 'task' | 'milestone' | 'phase';
+  type?: 'task' | 'milestone' | 'phase' | 'add-task-button';
+  // Add task row specific properties
+  parent_phase_id?: string;
 }
 
 export interface GanttPhase {

worklenz-frontend/src/pages/projects/projectView/gantt/utils/timeline-calculator.ts

@@ -18,12 +18,7 @@ export class TimelineCalculator {
   private columnWidth: number;
   private timelineBounds: TimelineBounds;
 
-  constructor(
+  constructor(viewMode: GanttViewMode, columnWidth: number, startDate: Date, endDate: Date) {
-    viewMode: GanttViewMode, 
-    columnWidth: number, 
-    startDate: Date, 
-    endDate: Date
-  ) {
     this.viewMode = viewMode;
     this.columnWidth = columnWidth;
     this.timelineBounds = this.calculateTimelineBounds(startDate, endDate);
@@ -42,7 +37,7 @@ export class TimelineCalculator {
       startDate,
       endDate,
       totalDays,
-      pixelsPerDay
+      pixelsPerDay,
     };
   }
 
@@ -51,12 +46,18 @@ export class TimelineCalculator {
    */
   private getColumnsCount(): number {
     switch (this.viewMode) {
-      case 'day': return 30;
+      case 'day':
-      case 'week': return 12;
+        return 30;
-      case 'month': return 12;
+      case 'week':
-      case 'quarter': return 8;
+        return 12;
-      case 'year': return 5;
+      case 'month':
-      default: return 12;
+        return 12;
+      case 'quarter':
+        return 8;
+      case 'year':
+        return 5;
+      default:
+        return 12;
     }
   }
 
@@ -72,12 +73,18 @@ export class TimelineCalculator {
     const taskEnd = new Date(task.end_date);
 
     // Ensure task dates are within timeline bounds
-    const clampedStart = new Date(Math.max(taskStart.getTime(), this.timelineBounds.startDate.getTime()));
+    const clampedStart = new Date(
+      Math.max(taskStart.getTime(), this.timelineBounds.startDate.getTime())
+    );
     const clampedEnd = new Date(Math.min(taskEnd.getTime(), this.timelineBounds.endDate.getTime()));
 
     // Calculate days from timeline start
-    const daysFromStart = Math.floor((clampedStart.getTime() - this.timelineBounds.startDate.getTime()) / (1000 * 60 * 60 * 24));
+    const daysFromStart = Math.floor(
-    const taskDuration = Math.ceil((clampedEnd.getTime() - clampedStart.getTime()) / (1000 * 60 * 60 * 24));
+      (clampedStart.getTime() - this.timelineBounds.startDate.getTime()) / (1000 * 60 * 60 * 24)
+    );
+    const taskDuration = Math.ceil(
+      (clampedEnd.getTime() - clampedStart.getTime()) / (1000 * 60 * 60 * 24)
+    );
 
     // Calculate pixel positions
     const left = daysFromStart * this.timelineBounds.pixelsPerDay;
@@ -86,7 +93,7 @@ export class TimelineCalculator {
     return {
       left: Math.max(0, left),
       width,
-      isValid: true
+      isValid: true,
     };
   }
 
@@ -101,16 +108,21 @@ export class TimelineCalculator {
     const milestoneDate = new Date(date);
 
     // Check if milestone is within timeline bounds
-    if (milestoneDate < this.timelineBounds.startDate || milestoneDate > this.timelineBounds.endDate) {
+    if (
+      milestoneDate < this.timelineBounds.startDate ||
+      milestoneDate > this.timelineBounds.endDate
+    ) {
       return { left: 0, isValid: false };
     }
 
-    const daysFromStart = Math.floor((milestoneDate.getTime() - this.timelineBounds.startDate.getTime()) / (1000 * 60 * 60 * 24));
+    const daysFromStart = Math.floor(
+      (milestoneDate.getTime() - this.timelineBounds.startDate.getTime()) / (1000 * 60 * 60 * 24)
+    );
     const left = daysFromStart * this.timelineBounds.pixelsPerDay;
 
     return {
       left: Math.max(0, left),
-      isValid: true
+      isValid: true,
     };
   }
 
@@ -144,7 +156,7 @@ export class TimelineCalculator {
       y1: fromY + rowHeight / 2,
       x2: toPosition.left, // Start of target task
       y2: toY + rowHeight / 2,
-      isValid: true
+      isValid: true,
     };
   }
 
@@ -167,7 +179,7 @@ export class TimelineCalculator {
 
     return {
       left: position.left,
-      isVisible: position.isValid
+      isVisible: position.isValid,
     };
   }
 
@@ -185,7 +197,7 @@ export class TimelineCalculator {
         if (position.isValid) {
           weekendAreas.push({
             left: position.left,
-            width: this.timelineBounds.pixelsPerDay
+            width: this.timelineBounds.pixelsPerDay,
           });
         }
       }
@@ -205,7 +217,12 @@ export class TimelineCalculator {
   /**
    * Update calculator with new parameters
    */
-  updateParameters(viewMode: GanttViewMode, columnWidth: number, startDate: Date, endDate: Date): void {
+  updateParameters(
+    viewMode: GanttViewMode,
+    columnWidth: number,
+    startDate: Date,
+    endDate: Date
+  ): void {
     this.viewMode = viewMode;
     this.columnWidth = columnWidth;
     this.timelineBounds = this.calculateTimelineBounds(startDate, endDate);
@@ -316,6 +333,6 @@ export const TimelineUtils = {
     const dayNum = d.getUTCDay() || 7;
     d.setUTCDate(d.getUTCDate() + 4 - dayNum);
     const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-    return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+    return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
-  }
+  },
 };

worklenz-frontend/src/types/advanced-gantt.types.ts

@@ -258,7 +258,14 @@ export interface ExportOptions {
 // Filter and Search
 export interface FilterConfig {
   field: string;
-  operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between';
+  operator:
+    | 'equals'
+    | 'contains'
+    | 'startsWith'
+    | 'endsWith'
+    | 'greaterThan'
+    | 'lessThan'
+    | 'between';
   value: any;
   logic?: 'and' | 'or';
 }

worklenz-frontend/src/utils/gantt-performance.ts

@@ -2,37 +2,37 @@ import { useMemo, useCallback, useRef, useEffect } from 'react';
 import { GanttTask, PerformanceMetrics } from '../types/advanced-gantt.types';
 
 // Debounce utility for drag operations
-export function useDebounce<T extends (...args: any[]) => any>(
+export function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number): T {
-  callback: T,
-  delay: number
-): T {
   const timeoutRef = useRef<NodeJS.Timeout>();
 
-  return useCallback((...args: Parameters<T>) => {
+  return useCallback(
-    if (timeoutRef.current) {
+    (...args: Parameters<T>) => {
-      clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
-    }
+        clearTimeout(timeoutRef.current);
+      }
 
-    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
-      callback(...args);
+        callback(...args);
-    }, delay);
+      }, delay);
-  }, [callback, delay]) as T;
+    },
+    [callback, delay]
+  ) as T;
 }
 
 // Throttle utility for scroll events
-export function useThrottle<T extends (...args: any[]) => any>(
+export function useThrottle<T extends (...args: any[]) => any>(callback: T, delay: number): T {
-  callback: T,
-  delay: number
-): T {
   const lastCall = useRef<number>(0);
 
-  return useCallback((...args: Parameters<T>) => {
+  return useCallback(
-    const now = Date.now();
+    (...args: Parameters<T>) => {
-    if (now - lastCall.current >= delay) {
+      const now = Date.now();
-      lastCall.current = now;
+      if (now - lastCall.current >= delay) {
-      callback(...args);
+        lastCall.current = now;
-    }
+        callback(...args);
-  }, [callback, delay]) as T;
+      }
+    },
+    [callback, delay]
+  ) as T;
 }
 
 // Memoized task calculations
@@ -124,7 +124,9 @@ export const useTimelineVirtualScrolling = (
   overscan: number = 10
 ): TimelineVirtualData => {
   return useMemo(() => {
-    const totalDays = Math.ceil((projectEndDate.getTime() - projectStartDate.getTime()) / (1000 * 60 * 60 * 24));
+    const totalDays = Math.ceil(
+      (projectEndDate.getTime() - projectStartDate.getTime()) / (1000 * 60 * 60 * 24)
+    );
     const totalWidth = totalDays * dayWidth;
 
     const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
@@ -300,17 +302,17 @@ export const useDateCalculations = () => {
 };
 
 // Task position calculations
-export const useTaskPositions = (
+export const useTaskPositions = (tasks: GanttTask[], timelineStart: Date, dayWidth: number) => {
-  tasks: GanttTask[],
-  timelineStart: Date,
-  dayWidth: number
-) => {
   return useMemo(() => {
     const positions = new Map<string, { x: number; width: number; y: number }>();
 
     tasks.forEach((task, index) => {
-      const startDays = Math.floor((task.startDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
+      const startDays = Math.floor(
-      const endDays = Math.floor((task.endDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
+        (task.startDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24)
+      );
+      const endDays = Math.floor(
+        (task.endDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24)
+      );
 
       positions.set(task.id, {
         x: startDays * dayWidth,
@@ -344,27 +346,27 @@ export const useMemoryManagement = () => {
 };
 
 // Batch update utility for multiple task changes
-export const useBatchUpdates = <T>(
+export const useBatchUpdates = <T>(updateFunction: (updates: T[]) => void, delay: number = 100) => {
-  updateFunction: (updates: T[]) => void,
-  delay: number = 100
-) => {
   const batchRef = useRef<T[]>([]);
   const timeoutRef = useRef<NodeJS.Timeout>();
 
-  const addUpdate = useCallback((update: T) => {
+  const addUpdate = useCallback(
-    batchRef.current.push(update);
+    (update: T) => {
+      batchRef.current.push(update);
 
-    if (timeoutRef.current) {
+      if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
+        clearTimeout(timeoutRef.current);
-    }
-    
-    timeoutRef.current = setTimeout(() => {
-      if (batchRef.current.length > 0) {
-        updateFunction([...batchRef.current]);
-        batchRef.current = [];
       }
-    }, delay);
+
-  }, [updateFunction, delay]);
+      timeoutRef.current = setTimeout(() => {
+        if (batchRef.current.length > 0) {
+          updateFunction([...batchRef.current]);
+          batchRef.current = [];
+        }
+      }, delay);
+    },
+    [updateFunction, delay]
+  );
 
   const flushUpdates = useCallback(() => {
     if (timeoutRef.current) {