"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; export type GanttTask = { id: string; name: string; /** Inclusive start / end, as Date or ISO date. */ start: Date | string; end: Date | string; /** 0–100. */ progress?: number; color?: string; group?: string; /** Show as a diamond on its start date. */ milestone?: boolean; }; export type GanttProps = { tasks: GanttTask[]; /** Pixels per day. */ dayWidth?: number; today?: Date | string; onTaskClick?: (task: GanttTask) => void; className?: string; }; const DAY = 86_400_000; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const day0 = (d: Date | string) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; }; /** Project timeline with progress bars, milestones and a today marker. */ export function Gantt({ tasks, dayWidth = 28, today, onTaskClick, className }: GanttProps) { const starts = tasks.map((t) => day0(t.start).getTime()); const ends = tasks.map((t) => day0(t.end).getTime()); const min = Math.min(...starts) - DAY * 2; const max = Math.max(...ends) + DAY * 3; const days = Math.round((max - min) / DAY); const x = (d: Date | string) => ((day0(d).getTime() - min) / DAY) * dayWidth; const todayX = today ? x(today) : null; const rowH = 40; return (

Task

{tasks.map((t) => (

{t.name}

))}

{Array.from({ length: days }, (_, i) => { const d = new Date(min + i * DAY); const weekend = d.getDay() === 0 || d.getDay() === 6; return (

{d.getDate() === 1 || (i === 0 && d.getDate() < 26) ? {MONTHS[d.getMonth()]} : null} {d.getDate()}

); })}

{Array.from({ length: days }, (_, i) => { const d = new Date(min + i * DAY); return

; })}

{todayX !== null ? (

TODAY

) : null} {tasks.map((t, i) => { const left = x(t.start); const width = x(t.end) - left + dayWidth; const color = t.color ?? "var(--kn-accent)"; return (

{t.milestone ? (

); })}

); }

Gantt

Installation

Exports