@hellobetterdigitalnz/betterui 0.0.3-310 → 0.0.3-312

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,33 @@ 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 GanttChartProps = {
   tasks?: GanttTask[];
-  onChange?: (tasks: GanttTask[]) => void;
+  onChange?: (tasks: GanttTask[], change?: GanttTaskChange) => void;
+  dropdown?:ReactNode
 };
 
-// -------------------- Utils --------------------
-
 function dateToMinuteIndex(base: Date, d: Date) {
   return differenceInMinutes(d, base);
 }
@@ -40,60 +53,18 @@ 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 }: 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 [cellSize, setCellSize] = useState<number>(60);
 
   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: "",
-      },
-    ]
+    initialTasks ?? []
   );
 
   const [dragGhost, setDragGhost] = useState<null | {
@@ -101,21 +72,62 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     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]);
+
+  // const timeUnits = useMemo(() => {
+  //   return Array.from({ length: 24 }).map((_, h) => addMinutes(startDate, h * 60));
+  // }, [startDate]);
+
+  // Group tasks by user and maintain all unique users
+  const groupedTasks = useMemo(() => {
+    // Collect all unique users from tasks with their userIds
+    const allUsers = new Map<string, string>();
+    tasks.forEach((task) => {
+      const userName = task.user?.trim() || "";
+      allUsers.set(userName, task.userId || "");
+    });
+
+    const groups = new Map<string, GanttTask[]>();
+
+    // Initialize groups for all users
+    allUsers.forEach((_, userName) => {
+      groups.set(userName, []);
+    });
+
+
+    // Populate groups with tasks
+    tasks.forEach((task) => {
+      const key = task.user?.trim() || "";
+      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 = allUsers.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]);
 
   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 +136,11 @@ 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]);
+  // useEffect(() => {
+  //   // Only call onChange for initial load, not for drag operations
+  //   // Drag operations handle onChange in onPointerUp
+  // }, []);
 
-  // Drag state
   const dragState = useRef<null | {
     mode: "move" | "resize-start" | "resize-end";
     taskId: string;
@@ -137,17 +148,19 @@ 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 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 };
+    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 onPointerDownBar = (
@@ -156,6 +169,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 +186,44 @@ 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);
+              return { ...t, start: formatISO(newStart, { representation: "complete" }) };
+            }
 
-          const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
-          const newEnd = addMinutes(startDate, newRight);
-          return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
-        })
-      );
+            const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
+            const newEnd = addMinutes(startDate, newRight);
+            return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
+          })
+        );
+      }
     };
 
     const onPointerUp = (ev: PointerEvent) => {
@@ -226,30 +231,62 @@ 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) {
+          const rect = daysEl.getBoundingClientRect();
+          const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
+          const dropMinutes = Math.round(pxToMinutes(dropX));
+
+          setTasks((prev) => {
+            const updatedTasks = prev.map((t) => {
+              if (t.id !== ds.taskId) return t;
+              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);
+              return {
+                ...t,
+                start: formatISO(newStart, { representation: "complete" }),
+                end: formatISO(newEnd, { representation: "complete" }),
+                user: dropUser !== undefined ? dropUser : t.user,
+                userId: dropUserId !== undefined ? dropUserId : t.userId,
+              };
+            });
+
+            // 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 +303,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 +319,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 +328,71 @@ 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 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-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 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>
+                  ))}
+                </div>
               </div>
-            </div>
+            ))}
           </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()} />
-                  ))}
-                  {renderBar(task)}
-                </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) => (
+                      <div className={styles.dayHrs} key={h} />
+                    ))}
+                  </div>
+                ))}
+                {userTasks.map((task) => renderBar(task))}
               </div>
-            ))}
+            </div>
+          ))}
         </div>
       </div>
 
@@ -354,15 +402,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>
@@ -371,3 +425,5 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     </>
   );
 }
+
+export default GanttChart

package/src/Components/DataDisplay/index.ts

@@ -85,3 +85,5 @@ export type { default as TableRowProps} from './Table/TableRowProps';
 export  {default as CalendarView} from './Calendar/Calendar.tsx'
 export type {default as CalendarProps} from './Calendar/CalendarProps.tsx'
 
+export {default as GanttChart} from './GanttChart/GanttChart.tsx'
+