gantt

1"use client";
2 
3import {
4  DndContext,
5  MouseSensor,
6  useDraggable,
7  useSensor,
8} from "@dnd-kit/core";
9import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
10import { useMouse, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
11import {
12  addDays,
13  addMonths,
14  differenceInDays,
15  differenceInHours,
16  differenceInMonths,
17  endOfDay,
18  endOfMonth,
19  format,
20  formatDate,
21  formatDistance,
22  getDate,
23  getDaysInMonth,
24  isSameDay,
25  startOfDay,
26  startOfMonth,
27} from "date-fns";
28import { atom, useAtom } from "jotai";
29import throttle from "lodash.throttle";
30import { PlusIcon, TrashIcon } from "lucide-react";
31import type {
32  CSSProperties,
33  FC,
34  KeyboardEventHandler,
35  MouseEventHandler,
36  ReactNode,
37  RefObject,
38} from "react";
39import {
40  createContext,
41  memo,
42  useCallback,
43  useContext,
44  useEffect,
45  useId,
46  useMemo,
47  useRef,
48  useState,
49} from "react";
50import { Card } from "@/components/ui/card";
51import {
52  ContextMenu,
53  ContextMenuContent,
54  ContextMenuItem,
55  ContextMenuTrigger,
56} from "@/components/ui/context-menu";
57import { cn } from "@/lib/utils";
58 
59const draggingAtom = atom(false);
60const scrollXAtom = atom(0);
61 
62export const useGanttDragging = () => useAtom(draggingAtom);
63export const useGanttScrollX = () => useAtom(scrollXAtom);
64 
65export type GanttStatus = {
66  id: string;
67  name: string;
68  color: string;
69};
70 
71export type GanttFeature = {
72  id: string;
73  name: string;
74  startAt: Date;
75  endAt: Date;
76  status: GanttStatus;
77  lane?: string; // Optional: features with the same lane will share a row
78};
79 
80export type GanttMarkerProps = {
81  id: string;
82  date: Date;
83  label: string;
84};
85 
86export type Range = "daily" | "monthly" | "quarterly";
87 
88export type TimelineData = {
89  year: number;
90  quarters: {
91    months: {
92      days: number;
93    }[];
94  }[];
95}[];
96 
97export type GanttContextProps = {
98  zoom: number;
99  range: Range;
100  columnWidth: number;
101  sidebarWidth: number;
102  headerHeight: number;
103  rowHeight: number;
104  onAddItem: ((date: Date) => void) | undefined;
105  placeholderLength: number;
106  timelineData: TimelineData;
107  ref: RefObject<HTMLDivElement | null> | null;
108  scrollToFeature?: (feature: GanttFeature) => void;
109};
110 
111const getsDaysIn = (range: Range) => {
112  // For when range is daily
113  let fn = (_date: Date) => 1;
114 
115  if (range === "monthly" || range === "quarterly") {
116    fn = getDaysInMonth;
117  }
118 
119  return fn;
120};
121 
122const getDifferenceIn = (range: Range) => {
123  let fn = differenceInDays;
124 
125// … truncated