Gantt timeline

1"use client";
2 
3import * as React from "react";
4 
5import { cn, clamp } from "@/lib/utils";
6 
7export interface GanttTask {
8  id: string;
9  label: string;
10  /** Start position in 0..columns range (inclusive). */
11  start: number;
12  /** End position in 0..columns range (exclusive). end > start. */
13  end: number;
14  tone?: "primary" | "success" | "warning" | "danger" | "info" | "gold" | "neutral";
15  /** Optional dependency task IDs — drawn as connector arrows. */
16  dependsOn?: string[];
17}
18 
19interface GanttTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
20  /** Column labels rendered along the X axis. */
21  columns: string[];
22  tasks: GanttTask[];
23  /** Optional vertical "now" line at column index (can be fractional). */
24  nowAt?: number;
25  /** Row height in px. */
26  rowHeight?: number;
27  /** Width of the leading label column in px. */
28  labelWidth?: number;
29}
30 
31const toneToBg: Record<NonNullable<GanttTask["tone"]>, string> = {
32  primary: "bg-primary/70 border-primary",
33  success: "bg-success/70 border-success",
34  warning: "bg-warning/70 border-warning",
35  danger: "bg-danger/70 border-danger",
36  info: "bg-info/70 border-info",
37  gold: "bg-gold/70 border-gold",
38  neutral: "bg-foreground/40 border-foreground/60",
39};
40 
41const GanttTimeline = React.memo(
42  React.forwardRef<HTMLDivElement, GanttTimelineProps>(
43    ({ className, columns, tasks, nowAt, rowHeight = 28, labelWidth = 160, ...props }, ref) => {
44      const cols = Math.max(columns.length, 1);
45 
46      return (
47        <div
48          ref={ref}
49          className={cn("border-border relative overflow-x-auto border-t", className)}
50          {...props}
51        >
52          {/* Header row */}
53          <div
54            className="border-border bg-background-elevated/60 grid border-b"
55            style={{
56              gridTemplateColumns: `${labelWidth}px repeat(${cols}, minmax(72px, 1fr))`,
57            }}
58          >
59            <div className="h-7" />
60            {columns.map((c) => (
61              <div
62                key={c}
63                className="border-border/60 text-mono text-foreground-muted flex h-7 items-center border-l px-2 text-[10px] tracking-[0.08em] uppercase"
64              >
65                {c}
66              </div>
67            ))}
68          </div>
69 
70          {/* Body */}
71          <div
72            className="relative grid"
73            style={{
74              gridTemplateColumns: `${labelWidth}px repeat(${cols}, minmax(72px, 1fr))`,
75            }}
76          >
77// … truncated