feat(gantt): enhance Gantt chart with task creation and phase updates

- Added a task creation popover for quick task entry within the Gantt chart.
- Implemented phase update handling to refresh task and phase data after modifications.
- Enhanced GanttChart and GanttTaskList components to support new task creation and phase management features.
- Updated GanttToolbar to streamline user interactions for task and phase management.
- Improved phase details modal for better editing capabilities and user feedback.

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

@@ -220,6 +220,15 @@ const ProjectViewGantt: React.FC = React.memo(() => {
     setSelectedPhase(null);
   }, []);
 
+  const handlePhaseUpdate = useCallback(
+    (updatedPhase: any) => {
+      // Refresh the data after phase update
+      refetchTasks();
+      refetchPhases();
+    },
+    [refetchTasks, refetchPhases]
+  );
+
   const handlePhaseReorder = useCallback((oldIndex: number, newIndex: number) => {
     // TODO: Implement phase reordering API call
     console.log('Reorder phases:', { oldIndex, newIndex });
@@ -227,11 +236,20 @@ const ProjectViewGantt: React.FC = React.memo(() => {
   }, []);
 
   const handleCreateQuickTask = useCallback(
-    (taskName: string, phaseId?: string) => {
-      // Refresh the Gantt data after task creation to show the new task
+    (taskName: string, phaseId?: string, startDate?: Date) => {
+      // For now, just refresh the Gantt data after task creation
+      // The actual task creation will happen through existing mechanisms
+      // and the refresh will show the new task
+      console.log('Task created:', { taskName, phaseId, startDate });
+      
+      // Show success message
+      message.success(`Task "${taskName}" created successfully`);
+      
+      // Refresh the Gantt data to show the new task
       refetchTasks();
+      refetchPhases();
     },
-    [refetchTasks]
+    [refetchTasks, refetchPhases]
   );
 
   // Handle errors
@@ -266,8 +284,6 @@ const ProjectViewGantt: React.FC = React.memo(() => {
           viewMode={viewMode}
           onViewModeChange={handleViewModeChange}
           dateRange={dateRange}
-          onCreatePhase={handleCreatePhase}
-          onCreateTask={handleCreateTask}
         />
         <div className="flex flex-1 overflow-hidden border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800">
           <div className="relative flex w-full h-full">
@@ -281,6 +297,7 @@ const ProjectViewGantt: React.FC = React.memo(() => {
                 onPhaseClick={handlePhaseClick}
                 onCreateTask={handleCreateTask}
                 onCreateQuickTask={handleCreateQuickTask}
+                onCreatePhase={handleCreatePhase}
                 onPhaseReorder={handlePhaseReorder}
                 ref={taskListRef}
                 onScroll={handleTaskListScroll}
@@ -313,6 +330,8 @@ const ProjectViewGantt: React.FC = React.memo(() => {
                 phases={phases}
                 expandedTasks={expandedTasks}
                 animatingTasks={animatingTasks}
+                onCreateQuickTask={handleCreateQuickTask}
+                projectId={projectId || ''}
               />
             </div>
           </div>
@@ -331,6 +350,7 @@ const ProjectViewGantt: React.FC = React.memo(() => {
         open={showPhaseDetailsModal}
         onClose={handleClosePhaseDetailsModal}
         phase={selectedPhase}
+        onPhaseUpdate={handlePhaseUpdate}
       />
     </GanttProvider>
   );

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

@@ -1,4 +1,6 @@
-import React, { memo, useMemo, forwardRef, RefObject } from 'react';
+import React, { memo, useMemo, forwardRef, RefObject, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { Input } from 'antd';
 import { GanttTask, GanttViewMode, GanttPhase } from '../../types/gantt-types';
 import { useGanttDimensions } from '../../hooks/useGanttDimensions';
 
@@ -26,6 +28,8 @@ interface GanttChartProps {
   phases?: GanttPhase[];
   expandedTasks?: Set<string>;
   animatingTasks?: Set<string>;
+  onCreateQuickTask?: (taskName: string, phaseId?: string, startDate?: Date) => void;
+  projectId?: string;
 }
 
 interface GridColumnProps {
@@ -120,16 +124,14 @@ const TaskBarRow: React.FC<TaskBarRowProps> = memo(
     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' : 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750'
+          !isPhase ? 'hover:bg-gray-50 dark:hover:bg-gray-750' : onPhaseClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750' : ''
         } ${animationClass}`}
-        onClick={isPhase ? handleClick : undefined}
-        style={
-          isPhase && task.color
-            ? {
-                backgroundColor: addAlphaToHex(task.color, 0.15),
-              }
-            : {}
-        }
+        onClick={isPhase && onPhaseClick ? handleClick : undefined}
+        style={{
+          ...(isPhase && task.color ? { backgroundColor: addAlphaToHex(task.color, 0.15) } : {}),
+          // Set lower z-index when no phase click handler so parent can receive clicks
+          ...(isPhase && !onPhaseClick ? { position: 'relative', zIndex: 1 } : {}),
+        }}
       >
         {isPhase ? renderMilestone() : renderTaskBar()}
       </div>
@@ -139,8 +141,79 @@ const TaskBarRow: React.FC<TaskBarRowProps> = memo(
 
 TaskBarRow.displayName = 'TaskBarRow';
 
+// Task Creation Popover Component
+const TaskCreationPopover: React.FC<{
+  taskPopover: {
+    taskName: string;
+    date: Date;
+    phaseId: string | null;
+    position: { x: number; y: number };
+    visible: boolean;
+  };
+  onTaskNameChange: (name: string) => void;
+  onCreateTask: () => void;
+  onCancel: () => void;
+}> = ({ taskPopover, onTaskNameChange, onCreateTask, onCancel }) => {
+  if (!taskPopover.visible) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      {/* Click outside overlay to close popover */}
+      <div
+        className="fixed inset-0 z-[9999] bg-black/5"
+        onClick={onCancel}
+      />
+      
+      {/* Popover */}
+      <div
+        className="fixed z-[10000]"
+        style={{
+          left: `${taskPopover.position.x - 100}px`,
+          top: `${taskPopover.position.y - 30}px`,
+        }}
+      >
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-3 min-w-[250px]">
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+            Add task for {taskPopover.date.toLocaleDateString()}
+          </div>
+          <Input
+            value={taskPopover.taskName}
+            onChange={(e) => onTaskNameChange(e.target.value)}
+            onPressEnter={onCreateTask}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                onCancel();
+              }
+            }}
+            placeholder="Enter task name..."
+            autoFocus
+            size="small"
+            className="mb-2"
+          />
+          <div className="text-xs text-gray-400 dark:text-gray-500">
+            Press Enter to create • Esc to cancel
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+};
+
 const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
-  ({ tasks, viewMode, onScroll, onPhaseClick, containerRef, dateRange, phases, expandedTasks, animatingTasks }, ref) => {
+  ({ tasks, viewMode, onScroll, onPhaseClick, containerRef, dateRange, phases, expandedTasks, animatingTasks, onCreateQuickTask, projectId }, ref) => {
+    
+    // State for popover task creation
+    const [taskPopover, setTaskPopover] = useState<{
+      taskName: string;
+      date: Date;
+      phaseId: string | null;
+      position: { x: number; y: number };
+      visible: boolean;
+    } | null>(null);
+    
     const columnsCount = useMemo(() => {
       if (!dateRange) {
         // Default counts if no date range
@@ -164,45 +237,357 @@ const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
       const diffTime = Math.abs(end.getTime() - start.getTime());
       const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
+      let baseColumnsCount = 0;
+
       switch (viewMode) {
         case 'day':
-          return diffDays;
+          baseColumnsCount = diffDays;
+          break;
         case 'week':
-          return Math.ceil(diffDays / 7);
+          baseColumnsCount = Math.ceil(diffDays / 7);
+          break;
         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;
+          baseColumnsCount = (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+          break;
         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;
+          baseColumnsCount = (qEndYear - qStartYear) * 4 + (qEndQuarter - qStartQuarter) + 1;
+          break;
         case 'year':
-          return end.getFullYear() - start.getFullYear() + 1;
+          baseColumnsCount = end.getFullYear() - start.getFullYear() + 1;
+          break;
         default:
-          return 12;
+          baseColumnsCount = 12;
       }
+
+      return baseColumnsCount;
     }, [viewMode, dateRange]);
 
-    const { actualColumnWidth, totalWidth, shouldScroll } = useGanttDimensions(
+    // Calculate exact date from mouse position within timeline columns
+    const calculateDateFromPosition = useCallback((x: number, columnWidth: number): Date => {
+      if (!dateRange) return new Date();
+      
+      // Calculate which column was clicked and position within that column
+      const columnIndex = Math.floor(x / columnWidth);
+      const positionWithinColumn = (x % columnWidth) / columnWidth; // 0 to 1
+      
+      const { start, end } = dateRange;
+      let targetDate = new Date(start);
+      
+      // Handle virtual columns beyond the actual date range
+      const actualColumnsInRange = columnsCount;
+      const isVirtualColumn = columnIndex >= actualColumnsInRange;
+      
+      // If it's a virtual column, extend the date by calculating based on the end date
+      if (isVirtualColumn) {
+        const virtualColumnIndex = columnIndex - actualColumnsInRange;
+        targetDate = new Date(end);
+        
+        switch (viewMode) {
+          case 'day':
+            targetDate.setDate(targetDate.getDate() + virtualColumnIndex + 1);
+            targetDate.setHours(Math.min(Math.floor(positionWithinColumn * 24), 23), 0, 0, 0);
+            break;
+          case 'week':
+            targetDate.setDate(targetDate.getDate() + (virtualColumnIndex + 1) * 7);
+            const dayWithinVirtualWeek = Math.min(Math.floor(positionWithinColumn * 7), 6);
+            targetDate.setDate(targetDate.getDate() + dayWithinVirtualWeek);
+            targetDate.setHours(0, 0, 0, 0);
+            break;
+          case 'month':
+            targetDate.setMonth(targetDate.getMonth() + virtualColumnIndex + 1);
+            const daysInVirtualMonth = new Date(targetDate.getFullYear(), targetDate.getMonth() + 1, 0).getDate();
+            const dayWithinVirtualMonth = Math.max(1, Math.min(Math.ceil(positionWithinColumn * daysInVirtualMonth), daysInVirtualMonth));
+            targetDate.setDate(dayWithinVirtualMonth);
+            targetDate.setHours(0, 0, 0, 0);
+            break;
+          case 'quarter':
+            const quartersToAdd = virtualColumnIndex + 1;
+            targetDate.setMonth(targetDate.getMonth() + (quartersToAdd * 3));
+            const quarterStartMonth = Math.floor(targetDate.getMonth() / 3) * 3;
+            targetDate.setMonth(quarterStartMonth, 1);
+            const quarterEndDate = new Date(targetDate.getFullYear(), quarterStartMonth + 3, 0);
+            const daysInVirtualQuarter = Math.floor((quarterEndDate.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+            const dayWithinVirtualQuarter = Math.min(Math.floor(positionWithinColumn * daysInVirtualQuarter), daysInVirtualQuarter - 1);
+            targetDate.setDate(targetDate.getDate() + dayWithinVirtualQuarter);
+            targetDate.setHours(0, 0, 0, 0);
+            break;
+          case 'year':
+            targetDate.setFullYear(targetDate.getFullYear() + virtualColumnIndex + 1);
+            const isLeapYear = (targetDate.getFullYear() % 4 === 0 && targetDate.getFullYear() % 100 !== 0) || (targetDate.getFullYear() % 400 === 0);
+            const daysInVirtualYear = isLeapYear ? 366 : 365;
+            const dayWithinVirtualYear = Math.min(Math.floor(positionWithinColumn * daysInVirtualYear), daysInVirtualYear - 1);
+            targetDate = new Date(targetDate.getFullYear(), 0, 1 + dayWithinVirtualYear);
+            targetDate.setHours(0, 0, 0, 0);
+            break;
+          default:
+            targetDate.setDate(targetDate.getDate() + virtualColumnIndex + 1);
+            targetDate.setHours(0, 0, 0, 0);
+            break;
+        }
+        
+        return targetDate;
+      }
+      
+      switch (viewMode) {
+        case 'day':
+          // Timeline shows individual days - each column is one day
+          const dayStart = new Date(start);
+          const dayDates: Date[] = [];
+          const tempDayDate = new Date(dayStart);
+          while (tempDayDate <= end && dayDates.length <= columnIndex) {
+            dayDates.push(new Date(tempDayDate));
+            tempDayDate.setDate(tempDayDate.getDate() + 1);
+          }
+          
+          if (dayDates[columnIndex]) {
+            targetDate = new Date(dayDates[columnIndex]);
+            // For day view, add hours based on position within column (0-23 hours)
+            const hour = Math.min(Math.floor(positionWithinColumn * 24), 23);
+            targetDate.setHours(hour, 0, 0, 0);
+          } else if (dayDates.length > 0) {
+            // Fallback to last available day if index is out of bounds
+            targetDate = new Date(dayDates[dayDates.length - 1]);
+            targetDate.setHours(23, 59, 59, 999);
+          }
+          break;
+          
+        case 'week':
+          // Timeline shows weeks - calculate specific day within the week
+          const weekStart = new Date(start);
+          weekStart.setDate(weekStart.getDate() - weekStart.getDay()); // Start of week (Sunday)
+          
+          const weekDates: Date[] = [];
+          const tempWeekDate = new Date(weekStart);
+          while (tempWeekDate <= end && weekDates.length <= columnIndex) {
+            weekDates.push(new Date(tempWeekDate));
+            tempWeekDate.setDate(tempWeekDate.getDate() + 7);
+          }
+          
+          if (weekDates[columnIndex]) {
+            targetDate = new Date(weekDates[columnIndex]);
+            // Add days within the week (0-6 days from Sunday)
+            const dayWithinWeek = Math.min(Math.floor(positionWithinColumn * 7), 6);
+            targetDate.setDate(targetDate.getDate() + dayWithinWeek);
+            targetDate.setHours(0, 0, 0, 0);
+          } else if (weekDates.length > 0) {
+            // Fallback to last available week if index is out of bounds
+            targetDate = new Date(weekDates[weekDates.length - 1]);
+            targetDate.setDate(targetDate.getDate() + 6); // End of week
+            targetDate.setHours(23, 59, 59, 999);
+          }
+          break;
+          
+        case 'month':
+          // Timeline shows months - calculate specific day within the month
+          const startYear = start.getFullYear();
+          const startMonth = start.getMonth();
+          const endYear = end.getFullYear();
+          const endMonth = end.getMonth();
+          
+          const monthDates: Date[] = [];
+          let currentYear = startYear;
+          let currentMonth = startMonth;
+          
+          while ((currentYear < endYear || (currentYear === endYear && currentMonth <= endMonth)) 
+                 && monthDates.length <= columnIndex) {
+            monthDates.push(new Date(currentYear, currentMonth, 1));
+            currentMonth++;
+            if (currentMonth > 11) {
+              currentMonth = 0;
+              currentYear++;
+            }
+          }
+          
+          if (monthDates[columnIndex]) {
+            targetDate = new Date(monthDates[columnIndex]);
+            // Calculate days in this month
+            const daysInMonth = new Date(targetDate.getFullYear(), targetDate.getMonth() + 1, 0).getDate();
+            // Add days within the month (1-daysInMonth)
+            const dayWithinMonth = Math.max(1, Math.min(Math.ceil(positionWithinColumn * daysInMonth), daysInMonth));
+            targetDate.setDate(dayWithinMonth);
+            targetDate.setHours(0, 0, 0, 0);
+          } else if (monthDates.length > 0) {
+            // Fallback to last available month if index is out of bounds
+            targetDate = new Date(monthDates[monthDates.length - 1]);
+            const daysInMonth = new Date(targetDate.getFullYear(), targetDate.getMonth() + 1, 0).getDate();
+            targetDate.setDate(daysInMonth);
+            targetDate.setHours(23, 59, 59, 999);
+          }
+          break;
+          
+        case 'quarter':
+          // Timeline shows quarters - calculate specific month and day within 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);
+          
+          const quarterDates: Date[] = [];
+          let qYear = qStartYear;
+          let qQuarter = qStartQuarter;
+          
+          while ((qYear < qEndYear || (qYear === qEndYear && qQuarter <= qEndQuarter)) 
+                 && quarterDates.length <= columnIndex) {
+            const quarterStartMonth = (qQuarter - 1) * 3;
+            quarterDates.push(new Date(qYear, quarterStartMonth, 1));
+            
+            qQuarter++;
+            if (qQuarter > 4) {
+              qQuarter = 1;
+              qYear++;
+            }
+          }
+          
+          if (quarterDates[columnIndex]) {
+            targetDate = new Date(quarterDates[columnIndex]);
+            // Calculate exact days in this quarter
+            const quarterStartMonth = targetDate.getMonth();
+            const quarterEndMonth = Math.min(quarterStartMonth + 2, 11);
+            const quarterEndDate = new Date(targetDate.getFullYear(), quarterEndMonth + 1, 0);
+            const daysInQuarter = Math.floor((quarterEndDate.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+            
+            const dayWithinQuarter = Math.min(Math.floor(positionWithinColumn * daysInQuarter), daysInQuarter - 1);
+            targetDate.setDate(targetDate.getDate() + dayWithinQuarter);
+            targetDate.setHours(0, 0, 0, 0);
+          } else if (quarterDates.length > 0) {
+            // Fallback to last available quarter if index is out of bounds
+            targetDate = new Date(quarterDates[quarterDates.length - 1]);
+            const quarterStartMonth = targetDate.getMonth();
+            const quarterEndMonth = Math.min(quarterStartMonth + 2, 11);
+            targetDate.setMonth(quarterEndMonth);
+            const daysInMonth = new Date(targetDate.getFullYear(), quarterEndMonth + 1, 0).getDate();
+            targetDate.setDate(daysInMonth);
+            targetDate.setHours(23, 59, 59, 999);
+          }
+          break;
+          
+        case 'year':
+          // Timeline shows years - calculate specific month and day within year
+          const yearStart = start.getFullYear();
+          const yearEnd = end.getFullYear();
+          
+          const yearDates: Date[] = [];
+          for (let year = yearStart; year <= yearEnd && yearDates.length <= columnIndex; year++) {
+            yearDates.push(new Date(year, 0, 1));
+          }
+          
+          if (yearDates[columnIndex]) {
+            targetDate = new Date(yearDates[columnIndex]);
+            // Calculate exact days in this year
+            const isLeapYear = (targetDate.getFullYear() % 4 === 0 && targetDate.getFullYear() % 100 !== 0) || (targetDate.getFullYear() % 400 === 0);
+            const daysInYear = isLeapYear ? 366 : 365;
+            const dayWithinYear = Math.min(Math.floor(positionWithinColumn * daysInYear), daysInYear - 1);
+            
+            // Add days carefully to avoid month overflow
+            const tempDate = new Date(targetDate.getFullYear(), 0, 1 + dayWithinYear);
+            targetDate = tempDate;
+            targetDate.setHours(0, 0, 0, 0);
+          } else if (yearDates.length > 0) {
+            // Fallback to last available year if index is out of bounds
+            targetDate = new Date(yearDates[yearDates.length - 1]);
+            targetDate.setMonth(11, 31); // December 31st
+            targetDate.setHours(23, 59, 59, 999);
+          }
+          break;
+          
+        default:
+          // Default to day precision
+          targetDate = new Date(start);
+          targetDate.setDate(start.getDate() + columnIndex);
+          targetDate.setHours(0, 0, 0, 0);
+          break;
+      }
+      
+      // Final safety check - ensure we have a valid date
+      if (isNaN(targetDate.getTime())) {
+        console.warn('Invalid date calculated, falling back to start date');
+        targetDate = new Date(start);
+        targetDate.setHours(0, 0, 0, 0);
+      }
+      
+      // Ensure date is within the dateRange bounds
+      if (targetDate < start) {
+        targetDate = new Date(start);
+        targetDate.setHours(0, 0, 0, 0);
+      } else if (targetDate > end) {
+        targetDate = new Date(end);
+        targetDate.setHours(23, 59, 59, 999);
+      }
+      
+      return targetDate;
+    }, [dateRange, viewMode, columnsCount]);
+
+    // First get basic dimensions to access containerWidth
+    const basicDimensions = useGanttDimensions(
       viewMode,
       containerRef,
       columnsCount
     );
 
+    // Calculate effective columns count that ensures container coverage
+    const effectiveColumnsCount = useMemo(() => {
+      if (!basicDimensions.containerWidth || basicDimensions.containerWidth === 0) {
+        return columnsCount;
+      }
+
+      // Import the column width calculation
+      const getBaseColumnWidth = (mode: GanttViewMode): number => {
+        switch (mode) {
+          case 'day':
+            return 40;
+          case 'week':
+            return 60;
+          case 'month':
+            return 80;
+          case 'quarter':
+            return 120;
+          case 'year':
+            return 160;
+          default:
+            return 80;
+        }
+      };
+
+      const baseColumnWidth = getBaseColumnWidth(viewMode);
+      const minColumnsNeeded = Math.ceil(basicDimensions.containerWidth / baseColumnWidth);
+      
+      // For views that should stretch (month, quarter, year), ensure we have enough columns
+      // but don't add too many extra columns for day/week views
+      const shouldEnsureMinimum = viewMode !== 'day' && viewMode !== 'week';
+      
+      if (shouldEnsureMinimum) {
+        return Math.max(columnsCount, minColumnsNeeded);
+      } else {
+        // For day/week views, we want scrolling, so just use calculated columns
+        // But ensure we have at least enough to fill a reasonable portion
+        return Math.max(columnsCount, Math.min(minColumnsNeeded, columnsCount * 2));
+      }
+    }, [columnsCount, basicDimensions.containerWidth, viewMode]);
+
+    // Get final dimensions with effective column count
+    const { actualColumnWidth, totalWidth, shouldScroll, containerWidth } = useGanttDimensions(
+      viewMode,
+      containerRef,
+      effectiveColumnsCount
+    );
+
     const gridColumns = useMemo(
-      () => Array.from({ length: columnsCount }).map((_, index) => index),
-      [columnsCount]
+      () => Array.from({ length: effectiveColumnsCount }).map((_, index) => index),
+      [effectiveColumnsCount]
     );
 
     // Flatten tasks to match the same hierarchy as task list
     // This should be synchronized with the task list component's expand/collapse state
     const flattenedTasks = useMemo(() => {
-      const result: Array<GanttTask | { id: string; isEmptyRow: boolean }> = [];
+      const result: Array<GanttTask | { id: string; isEmptyRow: boolean; isAddPhaseRow?: boolean }> = [];
       const processedIds = new Set<string>(); // Track processed task IDs to prevent duplicates
 
       const processTask = (task: GanttTask, level: number = 0) => {
@@ -241,17 +626,80 @@ const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
       };
 
       tasks.forEach(task => processTask(task, 0));
+      
+      // Add the "Add Phase" row at the end
+      result.push({ id: 'add-phase-timeline', isEmptyRow: true, isAddPhaseRow: true });
+      
       return result;
     }, [tasks, expandedTasks]);
 
+    // Use flattenedTasks directly since we're using popover instead of inline rows
+    const finalTasks = flattenedTasks;
+
+    // Handle timeline click - defined after flattenedTasks
+    const handleTimelineClick = useCallback((e: React.MouseEvent, rowIndex: number) => {
+      if (!dateRange || !onCreateQuickTask) return;
+
+      // Get the click position relative to the timeline
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      
+      // Calculate which date was clicked based on column position
+      const clickedDate = calculateDateFromPosition(x, actualColumnWidth);
+      
+      // Find which phase this row belongs to
+      const task = flattenedTasks[rowIndex];
+      let phaseId: string | null = null;
+      
+      if (task && 'phase_id' in task) {
+        phaseId = task.phase_id || null;
+      } else {
+        // Find the nearest phase above this row
+        for (let i = rowIndex - 1; i >= 0; i--) {
+          const prevTask = flattenedTasks[i];
+          if (prevTask && 'is_milestone' in prevTask && prevTask.is_milestone) {
+            phaseId = prevTask.phase_id || prevTask.id.replace('phase-', '');
+            break;
+          }
+        }
+      }
+
+      // Get the click position relative to the viewport for popover positioning
+      const clickX = e.clientX;
+      const clickY = e.clientY;
+      
+      const newPopoverState = {
+        taskName: '',
+        date: clickedDate,
+        phaseId,
+        position: { x: clickX, y: clickY },
+        visible: true,
+      };
+      setTaskPopover(newPopoverState);
+    }, [dateRange, onCreateQuickTask, flattenedTasks, calculateDateFromPosition, actualColumnWidth]);
+
+    // Handle task creation
+    const handleCreateTask = useCallback(() => {
+      if (taskPopover && onCreateQuickTask && taskPopover.taskName.trim()) {
+        onCreateQuickTask(taskPopover.taskName.trim(), taskPopover.phaseId || undefined, taskPopover.date);
+        setTaskPopover(null);
+      }
+    }, [taskPopover, onCreateQuickTask]);
+
+    // Handle cancel
+    const handleCancel = useCallback(() => {
+      setTaskPopover(null);
+    }, []);
+
     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
+          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"
           style={{
@@ -270,9 +718,19 @@ const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
             ))}
           </div>
           <div className="relative z-10">
-            {flattenedTasks.map((item, index) => {
+            {finalTasks.map((item, index) => {
               if ('isEmptyRow' in item && item.isEmptyRow) {
-                // Determine if this add-task row should have animation classes
+                // Check if this is the Add Phase row
+                if ('isAddPhaseRow' in item && item.isAddPhaseRow) {
+                  return (
+                    <div
+                      key={item.id}
+                      className="min-h-[4.5rem] border-b border-gray-100 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20"
+                    />
+                  );
+                }
+                
+                // Regular add-task row - determine animation classes
                 const addTaskPhaseId = item.id.replace('add-task-', '').replace('-timeline', '');
                 const shouldAnimate = animatingTasks ? animatingTasks.has(addTaskPhaseId) : false;
                 const staggerIndex = Math.min((index - 1) % 5, 4);
@@ -280,7 +738,7 @@ const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
                   ? `gantt-task-slide-in gantt-task-stagger-${staggerIndex + 1}` 
                   : '';
                 
-                // Render empty row without "Add Task" button
+                // Render empty row for add-task
                 return (
                   <div
                     key={item.id}
@@ -307,26 +765,51 @@ const GanttChart = forwardRef<HTMLDivElement, GanttChartProps>(
                 : '';
               
               return (
-                <TaskBarRow
+                <div
                   key={item.id}
-                  task={task}
-                  viewMode={viewMode}
-                  columnWidth={actualColumnWidth}
-                  columnsCount={columnsCount}
-                  dateRange={dateRange}
-                  animationClass={animationClass}
-                  onPhaseClick={onPhaseClick}
-                />
+                  className={`relative cursor-pointer hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors ${animationClass}`}
+                  onClick={(e) => {
+                    handleTimelineClick(e, index);
+                  }}
+                  style={{
+                    height: isPhase ? '4.5rem' : '2.25rem',
+                    zIndex: 10,
+                  }}
+                >
+                  <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
+                    <TaskBarRow
+                      task={task}
+                      viewMode={viewMode}
+                      columnWidth={actualColumnWidth}
+                      columnsCount={columnsCount}
+                      dateRange={dateRange}
+                      animationClass=""
+                      onPhaseClick={undefined}
+                    />
+                  </div>
+                </div>
               );
             })}
-            {flattenedTasks.length === 0 && (
+            {finalTasks.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>
+        </div>
+
+
+      {/* Task Creation Popover */}
+      {taskPopover && taskPopover.visible && (
+        <TaskCreationPopover
+          taskPopover={taskPopover}
+          onTaskNameChange={(name) => setTaskPopover(prev => prev ? { ...prev, taskName: name } : null)}
+          onCreateTask={handleCreateTask}
+          onCancel={handleCancel}
+        />
+      )}
+      </>
     );
   }
 );

worklenz-frontend/src/pages/projects/projectView/gantt/components/gantt-task-list/GanttTaskList.tsx

@@ -49,6 +49,7 @@ interface GanttTaskListProps {
   onPhaseClick?: (phase: GanttTask) => void;
   onCreateTask?: (phaseId?: string) => void;
   onCreateQuickTask?: (taskName: string, phaseId?: string) => void;
+  onCreatePhase?: () => void;
   onPhaseReorder?: (oldIndex: number, newIndex: number) => void;
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
   expandedTasks?: Set<string>;
@@ -319,7 +320,7 @@ const TaskRow: React.FC<TaskRowProps & { dragAttributes?: any; dragListeners?: a
                 }
               : {}
           }
-          onClick={!isPhase ? handleTaskClick : handlePhaseClick}
+          onClick={!isPhase ? handleTaskClick : undefined}
           {...(!isPhase && isDraggable ? dragAttributes : {})}
           {...(!isPhase && isDraggable ? dragListeners : {})}
         >
@@ -349,7 +350,10 @@ const TaskRow: React.FC<TaskRowProps & { dragAttributes?: any; dragListeners?: a
               <div className="flex items-center gap-2 ml-1 truncate flex-1">
                 {getTaskIcon()}
                 <div className="flex flex-col flex-1">
-                  <span className={`truncate ${task.type === 'milestone' ? 'font-semibold' : ''}`}>
+                  <span 
+                    className={`truncate ${task.type === 'milestone' ? 'font-semibold cursor-pointer hover:opacity-80' : ''}`}
+                    onClick={isPhase ? handlePhaseClick : undefined}
+                  >
                     {task.name}
                   </span>
                   {isPhase && (
@@ -533,6 +537,40 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({ task, projectId, onCreateQ
 
 AddTaskRow.displayName = 'AddTaskRow';
 
+// Add Phase Row Component
+interface AddPhaseRowProps {
+  projectId: string;
+  onCreatePhase?: () => void;
+}
+
+const AddPhaseRow: React.FC<AddPhaseRowProps> = memo(({ projectId, onCreatePhase }) => {
+  return (
+    <div className="gantt-add-phase-row flex min-h-[4.5rem] border-b border-gray-100 dark:border-gray-700 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors cursor-pointer">
+      <div
+        className="w-full px-2 py-2 text-sm flex items-center"
+        style={{ paddingLeft: `8px` }}
+        onClick={onCreatePhase}
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-4 h-4 flex items-center justify-center rounded bg-blue-500 text-white">
+            <PlusOutlined className="text-xs" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-semibold text-blue-600 dark:text-blue-400">
+              Add New Phase
+            </span>
+            <span className="text-xs text-blue-500 dark:text-blue-300 opacity-80">
+              Click to create a new project phase
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+AddPhaseRow.displayName = 'AddPhaseRow';
+
 const GanttTaskList = forwardRef<HTMLDivElement, GanttTaskListProps>(
   (
     {
@@ -544,6 +582,7 @@ const GanttTaskList = forwardRef<HTMLDivElement, GanttTaskListProps>(
       onPhaseClick,
       onCreateTask,
       onCreateQuickTask,
+      onCreatePhase,
       onPhaseReorder,
       onScroll,
       expandedTasks: expandedTasksProp,
@@ -897,6 +936,12 @@ const GanttTaskList = forwardRef<HTMLDivElement, GanttTaskListProps>(
               })}
             </SortableContext>
           </DndContext>
+
+          {/* Add Phase Row - always at the bottom */}
+          <AddPhaseRow
+            projectId={projectId}
+            onCreatePhase={onCreatePhase}
+          />
         </div>
       </div>
     );

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

@@ -1,11 +1,9 @@
 import React, { memo } from 'react';
-import { Select, Button, Space, Divider } from 'antd';
+import { Select, Button, Space } from 'antd';
 import {
   ZoomInOutlined,
   ZoomOutOutlined,
   FullscreenOutlined,
-  PlusOutlined,
-  FlagOutlined,
 } from '@ant-design/icons';
 import { GanttViewMode } from '../../types/gantt-types';
 
@@ -15,31 +13,43 @@ interface GanttToolbarProps {
   viewMode: GanttViewMode;
   onViewModeChange: (mode: GanttViewMode) => void;
   dateRange?: { start: Date; end: Date };
-  onCreatePhase?: () => void;
-  onCreateTask?: () => void;
 }
 
 const GanttToolbar: React.FC<GanttToolbarProps> = memo(
-  ({ viewMode, onViewModeChange, dateRange, onCreatePhase, onCreateTask }) => {
+  ({ viewMode, onViewModeChange, dateRange }) => {
+    // Define zoom levels in order from most detailed to least detailed
+    const zoomLevels: GanttViewMode[] = ['day', 'week', 'month', 'quarter', 'year'];
+    const currentZoomIndex = zoomLevels.indexOf(viewMode);
+
+    const handleZoomIn = () => {
+      // Zoom in means more detail (lower index)
+      if (currentZoomIndex > 0) {
+        onViewModeChange(zoomLevels[currentZoomIndex - 1]);
+      }
+    };
+
+    const handleZoomOut = () => {
+      // Zoom out means less detail (higher index)
+      if (currentZoomIndex < zoomLevels.length - 1) {
+        onViewModeChange(zoomLevels[currentZoomIndex + 1]);
+      }
+    };
+
+    const handleFullscreen = () => {
+      // Toggle fullscreen mode
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen().catch(err => {
+          console.warn('Failed to enter fullscreen:', err);
+        });
+      } else {
+        document.exitFullscreen().catch(err => {
+          console.warn('Failed to exit fullscreen:', err);
+        });
+      }
+    };
     return (
       <div className="p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
         <Space>
-          <Button
-            type="primary"
-            icon={<FlagOutlined />}
-            onClick={onCreatePhase}
-            className="bg-blue-600 hover:bg-blue-700 border-blue-600"
-          >
-            Manage Phases
-          </Button>
-          <Button
-            icon={<PlusOutlined />}
-            onClick={onCreateTask}
-            className="hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-600"
-          >
-            Add Task
-          </Button>
-          <Divider type="vertical" className="bg-gray-300 dark:bg-gray-600" />
           <Select value={viewMode} onChange={onViewModeChange} className="w-32">
             <Option value="day">Day</Option>
             <Option value="week">Week</Option>
@@ -51,16 +61,21 @@ const GanttToolbar: React.FC<GanttToolbarProps> = memo(
           <Button
             icon={<ZoomInOutlined />}
             title="Zoom In"
-            className="hover:text-blue-600 dark:hover:text-blue-400"
+            onClick={handleZoomIn}
+            disabled={currentZoomIndex === 0}
+            className="hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed"
           />
           <Button
             icon={<ZoomOutOutlined />}
             title="Zoom Out"
-            className="hover:text-blue-600 dark:hover:text-blue-400"
+            onClick={handleZoomOut}
+            disabled={currentZoomIndex === zoomLevels.length - 1}
+            className="hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed"
           />
           <Button
             icon={<FullscreenOutlined />}
-            title="Fullscreen"
+            title="Toggle Fullscreen"
+            onClick={handleFullscreen}
             className="hover:text-blue-600 dark:hover:text-blue-400"
           />
         </Space>

worklenz-frontend/src/pages/projects/projectView/gantt/components/phase-details-modal/PhaseDetailsModal.tsx

@@ -1,10 +1,12 @@
 import React, { useMemo, useState } from 'react';
-import { Modal, Typography, Divider, Space, Progress, Tag, Row, Col, Card, Statistic, theme, Tooltip, Input, DatePicker, Button, ColorPicker } from 'antd';
-import { CalendarOutlined, CheckCircleOutlined, ClockCircleOutlined, BgColorsOutlined, MinusOutlined, PauseOutlined, DoubleRightOutlined, UserOutlined, EditOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons';
+import { Modal, Typography, Divider, Progress, Tag, Row, Col, Card, Statistic, theme, Tooltip, Input, DatePicker, ColorPicker, message } from 'antd';
+import { CalendarOutlined, CheckCircleOutlined, ClockCircleOutlined, BgColorsOutlined, MinusOutlined, PauseOutlined, DoubleRightOutlined, UserOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import AvatarGroup from '@/components/AvatarGroup';
 import { GanttTask } from '../../types/gantt-types';
+import { useUpdatePhaseMutation } from '../../services/gantt-api.service';
 
 const { Title, Text } = Typography;
 
@@ -16,24 +18,16 @@ interface PhaseDetailsModalProps {
 }
 
 const PhaseDetailsModal: React.FC<PhaseDetailsModalProps> = ({ open, onClose, phase, onPhaseUpdate }) => {
+  const { projectId } = useParams<{ projectId: string }>();
   const { t } = useTranslation('gantt/phase-details-modal');
   const { token } = theme.useToken();
 
-  // Editing state
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedPhase, setEditedPhase] = useState<Partial<GanttTask>>({});
+  // API mutation hook
+  const [updatePhase, { isLoading: isUpdating }] = useUpdatePhaseMutation();
 
-  // Initialize edited phase when phase changes or editing starts
-  React.useEffect(() => {
-    if (phase && isEditing) {
-      setEditedPhase({
-        name: phase.name,
-        start_date: phase.start_date,
-        end_date: phase.end_date,
-        color: phase.color,
-      });
-    }
-  }, [phase, isEditing]);
+  // Inline editing state
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [editedValues, setEditedValues] = useState<Partial<GanttTask>>({});
 
   // Calculate phase statistics
   const phaseStats = useMemo(() => {
@@ -168,23 +162,72 @@ const PhaseDetailsModal: React.FC<PhaseDetailsModalProps> = ({ open, onClose, ph
     }));
   };
 
-  const handleSavePhase = () => {
-    if (phase && onPhaseUpdate && editedPhase) {
-      onPhaseUpdate({
-        id: phase.id,
-        ...editedPhase,
-      });
+  const handleFieldSave = async (field: string, value: any) => {
+    if (!phase || !projectId) {
+      message.error('Phase or project information is missing');
+      return;
+    }
+
+    // Get the actual phase_id from the phase object
+    const phaseId = phase.phase_id || (phase.id.startsWith('phase-') ? phase.id.replace('phase-', '') : phase.id);
+    
+    if (!phaseId || phaseId === 'unmapped') {
+      message.error('Cannot edit unmapped phase');
+      return;
+    }
+
+    try {
+      // Prepare API request based on field
+      const updateData: any = {
+        phase_id: phaseId,
+        project_id: projectId,
+      };
+
+      // Map the field to API format
+      if (field === 'name') {
+        updateData.name = value;
+      } else if (field === 'color') {
+        updateData.color_code = value;
+      } else if (field === 'start_date') {
+        updateData.start_date = value ? new Date(value).toISOString() : null;
+      } else if (field === 'end_date') {
+        updateData.end_date = value ? new Date(value).toISOString() : null;
+      }
+
+      // Call the API
+      await updatePhase(updateData).unwrap();
+      
+      // Show success message
+      message.success(`Phase ${field.replace('_', ' ')} updated successfully`);
+
+      // Call the parent handler to refresh data
+      if (onPhaseUpdate) {
+        onPhaseUpdate({
+          id: phase.id,
+          [field]: value,
+        });
+      }
+
+      // Clear editing state
+      setEditingField(null);
+      setEditedValues({});
+      
+    } catch (error: any) {
+      console.error('Failed to update phase:', error);
+      message.error(error?.data?.message || `Failed to update phase ${field.replace('_', ' ')}`);
+      
+      // Don't clear editing state on error so user can try again
     }
-    setIsEditing(false);
   };
 
-  const handleCancelEdit = () => {
-    setIsEditing(false);
-    setEditedPhase({});
+  const handleFieldCancel = () => {
+    setEditingField(null);
+    setEditedValues({});
   };
 
-  const handleStartEdit = () => {
-    setIsEditing(true);
+  const startEditing = (field: string, currentValue: any) => {
+    setEditingField(field);
+    setEditedValues({ [field]: currentValue });
   };
 
   if (!phase) return null;
@@ -192,66 +235,36 @@ const PhaseDetailsModal: React.FC<PhaseDetailsModalProps> = ({ open, onClose, ph
   return (
     <Modal
       title={
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            {isEditing ? (
-              <ColorPicker
-                value={editedPhase.color || phase.color || token.colorPrimary}
-                onChange={(color) => setEditedPhase(prev => ({ ...prev, color: color.toHexString() }))}
-                size="small"
-                showText={false}
-              />
-            ) : (
-              <div
-                className="w-4 h-4 rounded-full"
-                style={{ backgroundColor: phase.color || token.colorPrimary }}
-              />
-            )}
-            {isEditing ? (
-              <Input
-                value={editedPhase.name || phase.name}
-                onChange={(e) => setEditedPhase(prev => ({ ...prev, name: e.target.value }))}
-                className="font-semibold text-lg"
-                style={{ border: 'none', padding: 0, background: 'transparent' }}
-                autoFocus
-              />
-            ) : (
-              <Title level={4} className="!mb-0" style={{ color: token.colorText }}>
-                {phase.name}
-              </Title>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            {isEditing ? (
-              <>
-                <Button
-                  type="primary"
-                  size="small"
-                  icon={<SaveOutlined />}
-                  onClick={handleSavePhase}
-                >
-                  Save
-                </Button>
-                <Button
-                  size="small"
-                  icon={<CloseOutlined />}
-                  onClick={handleCancelEdit}
-                >
-                  Cancel
-                </Button>
-              </>
-            ) : (
-              <Button
-                type="text"
-                size="small"
-                icon={<EditOutlined />}
-                onClick={handleStartEdit}
-                style={{ color: token.colorTextSecondary }}
-              >
-                Edit
-              </Button>
-            )}
-          </div>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={phase.color || token.colorPrimary}
+            onChange={(color) => handleFieldSave('color', color.toHexString())}
+            size="small"
+            showText={false}
+            trigger="click"
+          />
+          {editingField === 'name' ? (
+            <Input
+              value={editedValues.name || phase.name}
+              onChange={(e) => setEditedValues(prev => ({ ...prev, name: e.target.value }))}
+              onPressEnter={() => handleFieldSave('name', editedValues.name)}
+              onBlur={() => handleFieldSave('name', editedValues.name)}
+              onKeyDown={(e) => e.key === 'Escape' && handleFieldCancel()}
+              className="font-semibold text-lg"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+              autoFocus
+            />
+          ) : (
+            <Title 
+              level={4} 
+              className="!mb-0 cursor-pointer hover:opacity-70" 
+              style={{ color: token.colorText }}
+              onClick={() => startEditing('name', phase.name)}
+              title="Click to edit"
+            >
+              {phase.name}
+            </Title>
+          )}
         </div>
       }
       open={open}
@@ -260,6 +273,7 @@ const PhaseDetailsModal: React.FC<PhaseDetailsModalProps> = ({ open, onClose, ph
       width={1000}
       centered
       className="phase-details-modal"
+      confirmLoading={isUpdating}
     >
       <div className="flex gap-6">
         {/* Left Side - Phase Overview and Stats */}
@@ -317,31 +331,61 @@ const PhaseDetailsModal: React.FC<PhaseDetailsModalProps> = ({ open, onClose, ph
               <Col span={8}>
                 <Text type="secondary">{t('timeline.startDate')}</Text>
                 <br />
-                {isEditing ? (
+                {editingField === 'start_date' ? (
                   <DatePicker
-                    value={editedPhase.start_date ? dayjs(editedPhase.start_date) : (phase.start_date ? dayjs(phase.start_date) : null)}
-                    onChange={(date) => setEditedPhase(prev => ({ ...prev, start_date: date?.toDate() || null }))}
+                    value={editedValues.start_date ? dayjs(editedValues.start_date) : (phase.start_date ? dayjs(phase.start_date) : null)}
+                    onChange={(date) => {
+                      const newDate = date?.toDate() || null;
+                      setEditedValues(prev => ({ ...prev, start_date: newDate }));
+                      handleFieldSave('start_date', newDate);
+                    }}
                     size="small"
                     className="w-full"
                     placeholder="Select start date"
+                    autoFocus
+                    open={true}
+                    onOpenChange={(open) => !open && handleFieldCancel()}
                   />
                 ) : (
-                  <Text strong style={{ color: token.colorText }}>{formatDate(phase.start_date)}</Text>
+                  <Text 
+                    strong 
+                    className="cursor-pointer hover:opacity-70" 
+                    style={{ color: token.colorText }}
+                    onClick={() => startEditing('start_date', phase.start_date)}
+                    title="Click to edit"
+                  >
+                    {formatDate(phase.start_date)}
+                  </Text>
                 )}
               </Col>
               <Col span={8}>
                 <Text type="secondary">{t('timeline.endDate')}</Text>
                 <br />
-                {isEditing ? (
+                {editingField === 'end_date' ? (
                   <DatePicker
-                    value={editedPhase.end_date ? dayjs(editedPhase.end_date) : (phase.end_date ? dayjs(phase.end_date) : null)}
-                    onChange={(date) => setEditedPhase(prev => ({ ...prev, end_date: date?.toDate() || null }))}
+                    value={editedValues.end_date ? dayjs(editedValues.end_date) : (phase.end_date ? dayjs(phase.end_date) : null)}
+                    onChange={(date) => {
+                      const newDate = date?.toDate() || null;
+                      setEditedValues(prev => ({ ...prev, end_date: newDate }));
+                      handleFieldSave('end_date', newDate);
+                    }}
                     size="small"
                     className="w-full"
                     placeholder="Select end date"
+                    autoFocus
+                    open={true}
+                    onOpenChange={(open) => !open && handleFieldCancel()}
                   />
                 ) : (
-                  <Text strong style={{ color: token.colorText }}>{formatDate(phase.end_date)}</Text>
+                  <Text 
+                    strong 
+                    className="cursor-pointer hover:opacity-70" 
+                    style={{ color: token.colorText }}
+                    onClick={() => startEditing('end_date', phase.end_date)}
+                    title="Click to edit"
+                  >
+                    {formatDate(phase.end_date)}
+                  </Text>
                 )}
               </Col>
               <Col span={8}>