@hellobetterdigitalnz/betterui 0.0.3-310 → 0.0.3-313

package/src/Components/DataDisplay/GanttChart/GanttChart.tsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useMemo, useRef, useState, useEffect } from "react";
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
 import {
   addDays,
   addMinutes,
@@ -7,27 +14,43 @@ import {
   formatISO,
   startOfDay,
 } from "date-fns";
-import "./GanttChart.scss";
+import styles from "./GanttChart.module.scss";
 import { DotsSixVertical } from "../../Icons";
-
-// -------------------- Types --------------------
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft.tsx";
+import CaretRight from "../../Icons/Arrows/CaretRight/CaretRight.tsx";
 
 type GanttTask = {
   id: string;
   name: string;
-  start: string; // ISO
-  end: string;   // ISO
+  start: string;
+  end: string;
   color?: string;
   user?: string;
+  userId?: string;
+};
+
+type GanttTaskChange = {
+  task: GanttTask;
+  previousTask: GanttTask;
+  changeType: "move" | "resize-start" | "resize-end";
+};
+
+type WorkingHours = {
+  userId: string;
+  date: string; // ISO date string (YYYY-MM-DD)
+  startTime: string; // HH:mm format (e.g., "09:00")
+  endTime: string; // HH:mm format (e.g., "17:00")
 };
 
 type GanttChartProps = {
   tasks?: GanttTask[];
-  onChange?: (tasks: GanttTask[]) => void;
+  onChange?: (tasks: GanttTask[], change?: GanttTaskChange) => void;
+  dropdown?: ReactNode;
+  lockTime?: boolean; // When true, dragging only changes user, time stays fixed
+  preventOverlap?: boolean; // When true, tasks cannot overlap
+  workingHours?: WorkingHours[]; // Optional working hours configuration
 };
 
-// -------------------- Utils --------------------
-
 function dateToMinuteIndex(base: Date, d: Date) {
   return differenceInMinutes(d, base);
 }
@@ -40,82 +63,140 @@ function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
 
-// -------------------- Component --------------------
-
-export default function GanttChart({ tasks: initialTasks, onChange }: GanttChartProps) {
+const GanttChart = ({ tasks: initialTasks, onChange, dropdown, lockTime, preventOverlap, workingHours }: GanttChartProps) => {
   const [currentDay, setCurrentDay] = useState<Date>(startOfDay(new Date()));
   const startDate = startOfDay(currentDay);
-  const totalDays = 1;
+  const totalDays = 7;
 
-  // Use header hours for sizing (stable across rows). Avoid a shared ref across many rows.
   const headerHoursRef = useRef<HTMLDivElement>(null);
-  const [cellSize, setCellSize] = useState<number>(60); // default aligns with CSS min-width
-
-  const [tasks, setTasks] = useState<GanttTask[]>(
-    initialTasks ?? [
-      {
-        id: "1",
-        name: "Design",
-        start: "2025-08-27T05:30:00",
-        end: "2025-08-27T10:30:00",
-        color: "blue",
-        user: "Alice",
-      },
-      {
-        id: "2",
-        name: "Development",
-        start: "2025-08-27T09:45:00",
-        end: "2025-08-27T17:30:00", // FIX: valid 24h time and correct date
-        color: "green",
-        user: "Bob",
-      },
-      {
-        id: "3",
-        name: "QA",
-        start: "2025-08-27T08:10:00",
-        end: "2025-08-27T09:40:00",
-        color: "orange",
-        user: "Charlie",
-      },
-      {
-        id: "4",
-        name: "QA",
-        start: "2025-08-27T08:10:00",
-        end: "2025-08-27T09:40:00",
-        color: "red",
-        user: "Mamudu",
-      },
-      {
-        id: "5",
-        name: "QA",
-        start: "2025-08-27T08:10:00",
-        end: "2025-08-27T09:40:00",
-        color: "black",
-        user: "",
-      },
-    ]
-  );
+  const [cellSize, setCellSize] = useState<number>(60);
+
+  const [tasks, setTasks] = useState<GanttTask[]>(initialTasks ?? []);
 
   const [dragGhost, setDragGhost] = useState<null | {
     taskId: string;
     x: number;
     y: number;
     rowUser: string;
+    rowUserId: string;
   }>(null);
 
   const minuteWidth = useMemo(() => (cellSize > 0 ? cellSize / 60 : 1), [cellSize]);
   const pxToMinutes = useCallback((px: number) => px / minuteWidth, [minuteWidth]);
   const minutesToPx = useCallback((minutes: number) => minutes * minuteWidth, [minuteWidth]);
 
-  const timeUnits = useMemo(() => {
-    return Array.from({ length: 24 }).map((_, h) => addMinutes(startDate, h * 60));
-  }, [startDate]);
+  const daysArray = useMemo(() => {
+    return Array.from({ length: totalDays }).map((_, i) => addDays(startDate, i));
+  }, [startDate, totalDays]);
+
+  // Keep track of all users that have ever been seen
+  const [allKnownUsers, setAllKnownUsers] = useState<Map<string, string>>(new Map());
+
+  useEffect(() => {
+    // Update known users whenever tasks change
+    setAllKnownUsers((prevUsers) => {
+      const newUsers = new Map(prevUsers);
+      tasks.forEach((task) => {
+        const userName = task.user?.trim() || "";
+        const userId = task.userId || "";
+        if (!newUsers.has(userName)) {
+          newUsers.set(userName, userId);
+        }
+      });
+      return newUsers;
+    });
+  }, [tasks]);
+
+  // Group tasks by user and maintain all unique users
+  const groupedTasks = useMemo(() => {
+    const groups = new Map<string, GanttTask[]>();
+
+    // Initialize groups for all known users (including those without tasks)
+    allKnownUsers.forEach((_, userName) => {
+      groups.set(userName, []);
+    });
+
+    // Populate groups with tasks
+    tasks.forEach((task) => {
+      const key = task.user?.trim() || "";
+      if (groups.has(key)) {
+        groups.get(key)!.push(task);
+      }
+    });
+
+    // Sort so unassigned ("") comes first, and store userId alongside
+    const sorted = Array.from(groups.entries())
+      .map(([userName, tasks]) => {
+        const userId = allKnownUsers.get(userName) || "";
+        return { userName, userId, tasks };
+      })
+      .sort((a, b) => {
+        if (!a.userName) return -1;
+        if (!b.userName) return 1;
+        return a.userName.localeCompare(b.userName);
+      });
+
+    return sorted;
+  }, [tasks, allKnownUsers]);
+
+  // Helper to check if a specific time slot is within working hours
+  const isWithinWorkingHours = useCallback(
+    (userId: string, date: Date, hour: number): boolean => {
+      if (!workingHours || workingHours.length === 0) return true;
+
+      const dateStr = format(date, "yyyy-MM-dd");
+      const userWorkingHours = workingHours.filter(
+        (wh) => wh.userId === userId && wh.date === dateStr
+      );
+
+      if (userWorkingHours.length === 0) return true; // No restrictions for this user/date
+
+      return userWorkingHours.some((wh) => {
+        const [startHour, startMin] = wh.startTime.split(":").map(Number);
+        const [endHour, endMin] = wh.endTime.split(":").map(Number);
+        const startMinutes = startHour * 60 + startMin;
+        const endMinutes = endHour * 60 + endMin;
+        const currentMinutes = hour * 60;
+
+        return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+      });
+    },
+    [workingHours]
+  );
+
+  // Check if a time range is valid for a user (all minutes within working hours)
+  const isTimeRangeValid = useCallback(
+    (userId: string, startTime: Date, endTime: Date): boolean => {
+      if (!workingHours || workingHours.length === 0) return true;
+
+      const startMinutes = dateToMinuteIndex(startOfDay(startTime), startTime);
+      const endMinutes = dateToMinuteIndex(startOfDay(endTime), endTime);
+      const dateStr = format(startTime, "yyyy-MM-dd");
+
+      const userWorkingHours = workingHours.filter(
+        (wh) => wh.userId === userId && wh.date === dateStr
+      );
+
+      if (userWorkingHours.length === 0) return true;
+
+      // Check if entire range falls within any working hours period
+      return userWorkingHours.some((wh) => {
+        const [startHour, startMin] = wh.startTime.split(":").map(Number);
+        const [endHour, endMin] = wh.endTime.split(":").map(Number);
+        const whStartMinutes = startHour * 60 + startMin;
+        const whEndMinutes = endHour * 60 + endMin;
+
+        return startMinutes >= whStartMinutes && endMinutes <= whEndMinutes;
+      });
+    },
+    [workingHours]
+  );
 
   useEffect(() => {
     const updateSize = () => {
-      const firstHour = headerHoursRef.current?.querySelector<HTMLDivElement>(".hour");
+      const firstHour = headerHoursRef.current?.querySelector(`.${styles.hour}`);
       if (firstHour) {
-        setCellSize(firstHour.offsetWidth);
+        setCellSize((firstHour as HTMLElement).offsetWidth);
       }
     };
 
@@ -124,12 +205,6 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     return () => window.removeEventListener("resize", updateSize);
   }, []);
 
-  // Keep consumer in sync without stale closures
-  useEffect(() => {
-    if (onChange) onChange(tasks);
-  }, [tasks, onChange]);
-
-  // Drag state
   const dragState = useRef<null | {
     mode: "move" | "resize-start" | "resize-end";
     taskId: string;
@@ -137,17 +212,35 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     originLeftMin: number;
     originRightMin: number;
     originUser?: string;
+    originalTask?: GanttTask;
   }>(null);
 
-  function getRowInfoFromPoint(x: number, y: number): { user: string; daysEl: HTMLElement | null } {
+  function getRowInfoFromPoint(x: number, y: number): { user: string; userId: string; daysEl: HTMLElement | null } {
     const el = document.elementFromPoint(x, y) as HTMLElement | null;
-    const row = el?.closest(".gantt-row") as HTMLElement | null;
-    if (!row) return { user: "", daysEl: null };
+    const row = el?.closest(`.${styles.ganttRow}`) as HTMLElement | null;
+    if (!row) return { user: "", userId: "", daysEl: null };
+
+    const label = row.querySelector(`.${styles.taskColLabel}`)?.textContent?.trim();
+    const user = label && label !== "Unassigned" ? label : "";
+    const userId = row.getAttribute("data-user-id") || "";
+    const daysEl = row.querySelector(`.${styles.days}`) as HTMLElement | null;
+    return { user, userId, daysEl };
+  }
 
-    const label = row.querySelector(".task-column-label")?.textContent?.trim();
-    const user = label && label !== "Unassigned" ? label : ""; // empty string is our Unassigned key
-    const daysEl = row.querySelector(".days") as HTMLElement | null;
-    return { user, daysEl };
+  // Check if a task overlaps with any other tasks for the same user
+  function checkOverlap(taskId: string, user: string, newStart: Date, newEnd: Date): boolean {
+    if (!preventOverlap) return false;
+
+    return tasks.some((t) => {
+      if (t.id === taskId) return false; // Don't check against itself
+      if ((t.user?.trim() || "") !== user) return false; // Only check same user
+
+      const tStart = new Date(t.start);
+      const tEnd = new Date(t.end);
+
+      // Check if there's any overlap
+      return newStart < tEnd && newEnd > tStart;
+    });
   }
 
   const onPointerDownBar = (
@@ -156,6 +249,7 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     mode: "move" | "resize-start" | "resize-end"
   ) => {
     e.preventDefault();
+    e.stopPropagation();
     const task = tasks.find((t) => t.id === taskId);
     if (!task) return;
 
@@ -172,53 +266,68 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
       originLeftMin: dateToMinuteIndex(startDate, taskStart),
       originRightMin: dateToMinuteIndex(startDate, taskEnd),
       originUser: task.user ?? "",
+      originalTask: { ...task },
     };
 
     if (mode === "move") {
-      setDragGhost({ taskId, x: e.clientX, y: e.clientY, rowUser: task.user ?? "" });
+      setDragGhost({ taskId, x: e.clientX, y: e.clientY, rowUser: task.user ?? "", rowUserId: task.userId ?? "" });
     }
 
     const onPointerMove = (ev: PointerEvent) => {
       if (!dragState.current) return;
       if (minuteWidth <= 0) return;
       const ds = dragState.current;
-      const dx = ev.clientX - ds.originX;
-      const deltaMinutes = Math.round(pxToMinutes(dx));
 
       if (ds.mode === "move") {
-        const { user: hoverUser } = getRowInfoFromPoint(ev.clientX, ev.clientY);
+        const { user: hoverUser, userId: hoverUserId } = getRowInfoFromPoint(ev.clientX, ev.clientY);
         setDragGhost((ghost) =>
-          ghost ? { ...ghost, x: ev.clientX, y: ev.clientY, rowUser: hoverUser } : null
+          ghost ? { ...ghost, x: ev.clientX, y: ev.clientY, rowUser: hoverUser, rowUserId: hoverUserId } : null
         );
-      }
+      } else {
+        // Only update task position for resize operations
+        const dx = ev.clientX - ds.originX;
+        const deltaMinutes = Math.round(pxToMinutes(dx));
 
-      setTasks((prev) =>
-        prev.map((t) => {
-          if (t.id !== ds.taskId) return t;
-
-          if (ds.mode === "move") {
-            const widthMinutes = minutesBetween(new Date(t.start), new Date(t.end));
-            const newLeft = clamp(ds.originLeftMin + deltaMinutes, 0, totalDays * 24 * 60 - widthMinutes);
-            const newStart = addMinutes(startDate, newLeft);
-            const newEnd = addMinutes(startDate, newLeft + widthMinutes);
-            return {
-              ...t,
-              start: formatISO(newStart, { representation: "complete" }),
-              end: formatISO(newEnd, { representation: "complete" }),
-            };
-          }
+        setTasks((prev) =>
+          prev.map((t) => {
+            if (t.id !== ds.taskId) return t;
 
-          if (ds.mode === "resize-start") {
-            const newLeft = clamp(ds.originLeftMin + deltaMinutes, 0, ds.originRightMin - 1);
-            const newStart = addMinutes(startDate, newLeft);
-            return { ...t, start: formatISO(newStart, { representation: "complete" }) };
-          }
+            if (ds.mode === "resize-start") {
+              const newLeft = clamp(ds.originLeftMin + deltaMinutes, 0, ds.originRightMin - 1);
+              const newStart = addMinutes(startDate, newLeft);
+              const currentEnd = new Date(t.end);
 
-          const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
-          const newEnd = addMinutes(startDate, newRight);
-          return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
-        })
-      );
+              // Check working hours
+              if (!isTimeRangeValid(t.userId || "", newStart, currentEnd)) {
+                return t;
+              }
+
+              // Check for overlap
+              if (checkOverlap(t.id, t.user?.trim() || "", newStart, currentEnd)) {
+                return t; // Don't update if it would cause overlap
+              }
+
+              return { ...t, start: formatISO(newStart, { representation: "complete" }) };
+            }
+
+            const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
+            const newEnd = addMinutes(startDate, newRight);
+            const currentStart = new Date(t.start);
+
+            // Check working hours
+            if (!isTimeRangeValid(t.userId || "", currentStart, newEnd)) {
+              return t;
+            }
+
+            // Check for overlap
+            if (checkOverlap(t.id, t.user?.trim() || "", currentStart, newEnd)) {
+              return t; // Don't update if it would cause overlap
+            }
+
+            return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
+          })
+        );
+      }
     };
 
     const onPointerUp = (ev: PointerEvent) => {
@@ -226,30 +335,98 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         target.releasePointerCapture(e.pointerId);
       } catch {}
 
-      const { user: dropUser, daysEl } = dragGhost
-        ? getRowInfoFromPoint(dragGhost.x, dragGhost.y)
-        : getRowInfoFromPoint(ev.clientX, ev.clientY);
-
       const ds = dragState.current;
-      if (ds && daysEl) {
-        const rect = daysEl.getBoundingClientRect();
-        const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
-        const dropMinutes = Math.round(pxToMinutes(dropX));
 
-        setTasks((prev) => {
-          return prev.map((t) => {
-            if (t.id !== ds.taskId) return t;
-            const duration = minutesBetween(new Date(t.start), new Date(t.end));
-            const newStart = addMinutes(startDate, clamp(dropMinutes, 0, 24 * 60 - duration));
-            const newEnd = addMinutes(newStart, duration);
-            return {
-              ...t,
-              start: formatISO(newStart, { representation: "complete" }),
-              end: formatISO(newEnd, { representation: "complete" }),
-              user: dropUser ?? t.user,
-            };
+      if (ds && ds.mode === "move") {
+        const { user: dropUser, userId: dropUserId, daysEl } = dragGhost
+          ? getRowInfoFromPoint(dragGhost.x, dragGhost.y)
+          : getRowInfoFromPoint(ev.clientX, ev.clientY);
+
+        if (daysEl) {
+          setTasks((prev) => {
+            const updatedTasks = prev.map((t) => {
+              if (t.id !== ds.taskId) return t;
+
+              if (lockTime) {
+                // Only update user assignment, keep original start/end times
+                const newUser = dropUser !== undefined ? dropUser : t.user;
+                const newUserId = dropUserId !== undefined ? dropUserId : t.userId;
+
+                // Check working hours for new user
+                if (!isTimeRangeValid(newUserId || "", new Date(t.start), new Date(t.end))) {
+                  return t;
+                }
+
+                // Check for overlap when moving to new user
+                if (checkOverlap(t.id, newUser?.trim() || "", new Date(t.start), new Date(t.end))) {
+                  return t; // Don't update if it would cause overlap
+                }
+
+                return {
+                  ...t,
+                  user: newUser,
+                  userId: newUserId,
+                };
+              }
+
+              // Original behavior: update both time and user based on drop position
+              const rect = daysEl.getBoundingClientRect();
+              const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
+              const dropMinutes = Math.round(pxToMinutes(dropX));
+              const duration = minutesBetween(new Date(t.start), new Date(t.end));
+              const maxMinutes = totalDays * 24 * 60 - duration;
+              const newLeft = clamp(dropMinutes, 0, maxMinutes);
+              const newStart = addMinutes(startDate, newLeft);
+              const newEnd = addMinutes(newStart, duration);
+              const newUser = dropUser !== undefined ? dropUser : t.user;
+              const newUserId = dropUserId !== undefined ? dropUserId : t.userId;
+
+              // Check working hours
+              if (!isTimeRangeValid(newUserId || "", newStart, newEnd)) {
+                return t;
+              }
+
+              // Check for overlap
+              if (checkOverlap(t.id, newUser?.trim() || "", newStart, newEnd)) {
+                return t; // Don't update if it would cause overlap
+              }
+
+              return {
+                ...t,
+                start: formatISO(newStart, { representation: "complete" }),
+                end: formatISO(newEnd, { representation: "complete" }),
+                user: newUser,
+                userId: newUserId,
+              };
+            });
+
+            // Call onChange with change details
+            if (onChange && ds.originalTask) {
+              const updatedTask = updatedTasks.find((t) => t.id === ds.taskId);
+              if (updatedTask) {
+                onChange(updatedTasks, {
+                  task: updatedTask,
+                  previousTask: ds.originalTask,
+                  changeType: ds.mode,
+                });
+              }
+            }
+
+            return updatedTasks;
           });
-        });
+        }
+      } else if (ds && (ds.mode === "resize-start" || ds.mode === "resize-end")) {
+        // For resize operations, call onChange
+        if (onChange && ds.originalTask) {
+          const currentTask = tasks.find((t) => t.id === ds.taskId);
+          if (currentTask) {
+            onChange(tasks, {
+              task: currentTask,
+              previousTask: ds.originalTask,
+              changeType: ds.mode,
+            });
+          }
+        }
       }
 
       setDragGhost(null);
@@ -266,15 +443,15 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     const taskStart = new Date(task.start);
     const taskEnd = new Date(task.end);
 
-    const dayStart = startOfDay(currentDay);
-    const dayEnd = addMinutes(dayStart, 24 * 60);
+    const rangeStart = startDate;
+    const rangeEnd = addDays(startDate, totalDays);
 
-    const displayStart = taskStart < dayStart ? dayStart : taskStart;
-    const displayEnd = taskEnd > dayEnd ? dayEnd : taskEnd;
+    const displayStart = taskStart < rangeStart ? rangeStart : taskStart;
+    const displayEnd = taskEnd > rangeEnd ? rangeEnd : taskEnd;
 
     if (displayStart >= displayEnd) return null;
 
-    const minutesFromStart = dateToMinuteIndex(dayStart, displayStart);
+    const minutesFromStart = dateToMinuteIndex(rangeStart, displayStart);
     const minutesWidth = minutesBetween(displayStart, displayEnd);
 
     const leftPx = minutesToPx(minutesFromStart);
@@ -282,7 +459,8 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
 
     return (
       <div
-        className="task-bar"
+        key={task.id}
+        className={styles.taskBar}
         style={{
           left: leftPx,
           width: widthPx,
@@ -290,61 +468,75 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
           opacity: dragGhost?.taskId === task.id ? 0.4 : 1,
         }}
       >
-        {/* <div className="resize-handle left" onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-start")} /> */}
-        <div className="bar">
-          <div onPointerDown={(e) => onPointerDownBar(e, task.id, "move")} className={"bar-drag"}>
+        <div className={styles.bar}>
+          <div onPointerDown={(e) => onPointerDownBar(e, task.id, "move")} className={styles.barDrag}>
             <DotsSixVertical />
           </div>
           <span>{task.name}</span>
         </div>
-        {/* <div className="resize-handle right" onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-end")} /> */}
       </div>
     );
   };
 
   return (
     <>
-      <div className="month-controls">
-        <button onClick={() => setCurrentDay((d) => addDays(d, -1))}>Prev</button>
-        <span>{format(currentDay, "MMMM dd, yyyy")}</span>
-        <button onClick={() => setCurrentDay((d) => addDays(d, 1))}>Next</button>
-      </div>
-
-      <div className="gantt-chart">
-        <div className="gantt-header">
-          <div className="task-column"></div>
-          <div className="days">
-            <div className="date-day-view current-day">
-              <div className="single-date">{format(currentDay, "MM/dd")}</div>
-              <div className="hours" ref={headerHoursRef}>
-                {Array.from({ length: 24 }).map((_, h) => (
-                  <div className="hour" key={h}>
-                    {`${String(h).padStart(2, "0")}:00`}
-                  </div>
-                ))}
-              </div>
-            </div>
+      <div className={styles.monthControls}>
+        <div className={styles.monthControlLeft}>
+          <div className={styles.prevBtn} onClick={() => setCurrentDay((d) => addDays(d, -1))}>
+            <CaretLeft />
           </div>
+          <div className={styles.nxtBtn} onClick={() => setCurrentDay((d) => addDays(d, 1))}>
+            <CaretRight />
+          </div>
+          <span className={styles.period}>{format(currentDay, "MMMM dd, yyyy")}</span>
         </div>
+        <div className={styles.monthControlRight}>{dropdown}</div>
+      </div>
 
-        <div className="gantt-body">
-          {[...tasks]
-            .sort((a, b) => {
-              if (!a.user) return -1;
-              if (!b.user) return 1;
-              return 0;
-            })
-            .map((task) => (
-              <div key={task.id} className="gantt-row">
-                <div className="task-column-label">{task.user?.trim() || "Unassigned"}</div>
-                <div className="days">
-                  {timeUnits.map((d) => (
-                    <div date-cell={d.toISOString()} key={d.toISOString()} />
+      <div className={styles.ganttChart}>
+        <div className={styles.ganttHeader}>
+          <div className={styles.taskCol}></div>
+          <div className={styles.days}>
+            {daysArray.map((day, idx) => (
+              <div
+                key={day.toISOString()}
+                className={`${styles.dateDayView} ${idx === 0 ? styles.currentDay : ""}`}
+              >
+                <div className={styles.singleDate}>{format(day, "MM/dd")}</div>
+                <div className={styles.hours} ref={idx === 0 ? headerHoursRef : null}>
+                  {Array.from({ length: 24 }).map((_, h) => (
+                    <div className={styles.hour} key={h}>
+                      {`${String(h).padStart(2, "0")}:00`}
+                    </div>
                   ))}
-                  {renderBar(task)}
                 </div>
               </div>
             ))}
+          </div>
+        </div>
+
+        <div className={styles.ganttBody}>
+          {groupedTasks.map(({ userName, userId, tasks: userTasks }) => (
+            <div key={userName || "unassigned"} className={styles.ganttRow} data-user-id={userId}>
+              <div className={styles.taskColLabel}>{userName || "Unassigned"}</div>
+              <div className={styles.days}>
+                {daysArray.map((day) => (
+                  <div key={day.toISOString()} className={styles.dayColumn}>
+                    {Array.from({ length: 24 }).map((_, h) => {
+                      const isWorking = isWithinWorkingHours(userId, day, h);
+                      return (
+                        <div
+                          className={`${styles.dayHrs} ${!isWorking && workingHours ? styles.disabled : ""}`}
+                          key={h}
+                        />
+                      );
+                    })}
+                  </div>
+                ))}
+                {userTasks.map((task) => renderBar(task))}
+              </div>
+            </div>
+          ))}
         </div>
       </div>
 
@@ -354,15 +546,21 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
           style={{
             position: "fixed",
             left: dragGhost.x,
-            top: dragGhost.y,
+            top: dragGhost.y - 12,
             pointerEvents: "none",
-            opacity: 0.8,
+            opacity: 0.9,
             background: tasks.find((t) => t.id === dragGhost.taskId)?.color ?? "gray",
-            padding: "0px 6px",
+            padding: "4px 8px",
             height: "24px",
-            width: "100px",
+            minWidth: "100px",
             borderRadius: 4,
             zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            fontSize: "12px",
+            color: "white",
+            fontWeight: 500,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
           }}
         >
           <span>{tasks.find((t) => t.id === dragGhost.taskId)?.name}</span>
@@ -370,4 +568,6 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
       )}
     </>
   );
-}
+};
+
+export default GanttChart;