Shadcn Gantt

Custom Shadcn Gantt for React and Tailwind CSS. A headless-first gantt with split tree and timeline panes, day to year scales, zoom, drag and resize scheduling, progress, summary rollups, and an external CRUD contract.

Base UI Radix UI

The gantt package ships a subscribable headless engine (useGanttState) and a composable view layer on top of it: a resizable tree pane for the resource hierarchy, a horizontal timeline with day, week, month, quarter, and year scales, zoom, infinite scrolling, drag and resize scheduling with live validation, per-bar progress fills, and duration-weighted summary rollups on parent rows. The engine never mutates your data on its own; every timing change flows through one proposal funnel (onEventUpdate, canDropEvent) so external CRUD stays in your hands.

The composition contract is <Gantt><GanttNav /><GanttView /></Gantt>. The root provides the calendar instance and the view configuration through context; the nav family, the view, and GanttBar all read from it, so any piece can be replaced with your own markup driven by the same hooks.

Installation


pnpm dlx shadcn@latest add @reui/gantt

Usage

Shadcn Gantt Free Components

Browse 5 production-ready Shadcn Gantt components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 5 Shadcn Gantt components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Shadcn Gantt Pro Blocks

This primitive also powers ready-made ReUI Pro blocks: complete gantt sections assembled on top of the exact component documented here, with realistic data, polished layout details, and production interaction patterns you can copy straight into your app.

Preview all 2 Shadcn Gantt Pro blocks in the ReUI blocks gallery.

Frame Icon Stack

import { Gantt } from "@/components/reui/gantt/gantt"
import { GanttNav, GanttToolbar } from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"

const resources: GanttResource[] = [
  {
    id: "design",
    title: "Design",
    children: [
      { id: "wireframes", title: "Wireframes" },
      { id: "visual-design", title: "Visual design" },
    ],
  },
]
 
const events: GanttEvent[] = [
  {
    id: "1",
    title: "Wireframes",
    start: new Date("2026-07-06"),
    end: new Date("2026-07-10"),
    allDay: true,
    resourceId: "wireframes",
    progress: 60,
  },
]
 
return (
  <Gantt
    defaultEvents={events}
    resources={resources}
    defaultScale="month"
    className="h-[480px]"
  >
    <GanttNav />
    <GanttView />
  </Gantt>
)

Prop	Type	Default	Description
`calendar`	`GanttInstance<TData>`	-	Adopt a hoisted `useGanttState` instance; option props are then ignored.
`apiRef`	`RefObject<GanttApi<TData> \| null>`	-	Imperative escape hatch usable from outside the tree.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the root element.
`className`	`string`	-	Additional CSS classes for the root container.
`children`	`ReactNode`	-	The gantt composition (`GanttNav`, `GanttToolbar`, `GanttView`).

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom nav content; replaces the default composition.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the element.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`children`	`ReactNode`	i18n `today`	Custom button content.
`tooltip`	`ReactNode \| null`	the current date	Hover/focus-visible tooltip; `null` disables it. Never re-triggers from a pointer click.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the button.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`children`	`ReactNode`	chevron icon	Custom button content.
`tooltip`	`ReactNode \| null`	i18n `previous`	Hover/focus-visible tooltip; `null` disables.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the button.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`children`	`ReactNode`	chevron icon	Custom button content.
`tooltip`	`ReactNode \| null`	i18n `next`	Hover/focus-visible tooltip; `null` disables.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the button.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`format`	`(ctx: { title: string }) => ReactNode`	-	Wraps or replaces the formatted title text.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the element.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`scales`	`GanttScale[]`	all five	The offered scales, in menu order.
`children`	`ReactNode`	current scale label	Custom trigger content.
`tooltip`	`ReactNode \| null`	i18n `selectView`	Hover-only tooltip; `null` disables.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the trigger.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Toolbar content.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the element.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`interval`	`number`	`interval` config	Day-scale unit interval in minutes; clamped between 15 and 240.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the element.
`className`	`string`	-	Additional CSS classes.

Prop	Type	Default	Description
`segment`	`GanttSegment<TData>`	-	`Required`. The timeline segment this bar renders.
`children`	`ReactNode`	-	Replaces the default bar content; the interactive wrapper stays gantt-owned.
`labelOutside`	`boolean`	-	The title renders beside the bar (view-owned), so the default inner content is suppressed.
`rowTitle`	`string`	-	The owning row's title for the aria-label; omitting falls back to a memoized tree lookup.
`render`	`useRender.RenderProp`	-	Base UI render prop to replace the button element.
`className`	`string`	-	Additional CSS classes.

Property	Type	Default	Description
`id`	`string`	-	`Required`. Stable event id.
`title`	`string`	-	`Required`. Bar title.
`start`	`Date`	-	`Required`. Plain instant; consumers parse ISO strings themselves.
`end`	`Date`	-	`Required`. Exclusive; must be greater than or equal to `start`.
`allDay`	`boolean`	-	Whether the event is date-based rather than timed.
`recurrence`	`GanttRecurrenceRule \| string`	-	Structured rule or a raw `"RRULE:..."` line.
`recurringEventId`	`string`	-	This event is an edited single occurrence of that series.
`originalStart`	`Date`	-	Which occurrence it replaces (RECURRENCE-ID semantics).
`color`	`string`	-	Token or CSS color; flows to the `--gantt-event-color` CSS variable.
`readOnly`	`boolean`	-	Excluded from drag and resize regardless of interactions state.
`draggable`	`boolean`	-	Per-event override; default comes from `interactions.drag`.
`resizable`	`boolean`	-	Per-event override; default comes from `interactions.resize`.
`priority`	`number`	-	Packing prominence; feeds `getEventPriority` ordering.
`progress`	`number`	-	Completion 0-100; renders as a subtle fill inside the bar.
`zIndex`	`number`	-	Explicit stacking override; wins over the computed z.
`resourceId`	`string`	-	Resource row this bar belongs to.
`data`	`TData`	-	Consumer payload, fully generic.

Property	Type	Default	Description
`id`	`string`	-	`Required`. Stable resource id.
`title`	`string`	-	`Required`. Row title.
`color`	`string`	-	Token or CSS color used for subtle row accents.
`children`	`GanttResource[]`	-	Child rows; presence makes this row a group.

Property	Type	Description
`key`	`string`	Stable per instance: `${event.id}::${startISO}`.
`eventId`	`string`	The source event id.
`event`	`GanttEvent<TData>`	The source event.
`start`	`Date`	Occurrence start.
`end`	`Date`	Occurrence end (exclusive).
`allDay`	`boolean`	Whether the occurrence is date-based.
`isRecurring`	`boolean`	Whether it came from a recurrence expansion.
`recurrenceIndex`	`number`	Index within the series, when recurring.

Property	Type	Description
`occurrence`	`GanttOccurrence<TData>`	The occurrence this segment slices.
`day`	`Date`	Range-start reference instant of the segment's slice.
`isStart`	`boolean`	Whether the segment contains the occurrence start.
`isEnd`	`boolean`	Whether the segment contains the occurrence end.
`continuesBefore`	`boolean`	The occurrence continues before this segment.
`continuesAfter`	`boolean`	The occurrence continues after this segment.
`startMin`	`number`	Minutes from the visible range start, clamped to the range.
`endMin`	`number`	Minutes from the visible range start, clamped to the range.
`column`	`number`	Lane assigned by overlap packing.
`columnCount`	`number`	Total lanes in the overlap cluster.
`columnSpan`	`number`	Lanes this segment may widen into.

Property	Type	Default	Description
`freq`	`"daily" \| "weekly" \| "monthly" \| "yearly"`	-	`Required`. Recurrence frequency.
`interval`	`number`	`1`	Period multiplier.
`count`	`number`	-	Total occurrence cap.
`until`	`Date`	-	Inclusive series end instant.
`byWeekday`	`Array<GanttWeekday \| { day: GanttWeekday; ordinal: number }>`	-	Weekday filter (weekly only, no ordinals).
`byMonthDay`	`number[]`	-	Parsed but not expanded (throws on expansion).
`byMonth`	`number[]`	-	Parsed but not expanded (throws on expansion).
`weekStart`	`GanttWeekday`	-	WKST; parses and round-trips.
`exDates`	`Date[]`	-	Excluded instants; matching occurrences are removed (they still consume their `count` slot).
`rDates`	`Date[]`	-	Extra instants added to the series, each with the event's own duration.

Property	Type	Description
`event`	`GanttEvent<TData>`	The event being updated.
`occurrence`	`GanttOccurrence<TData> \| null`	The gestured occurrence; `null` when `source` is `"api"`.
`start`	`Date`	Proposed start.
`end`	`Date`	Proposed end.
`allDay`	`boolean`	Proposed all-day flag.
`resourceId`	`string`	The bar's own resource (moves stay in-row); set on create/api.
`source`	`"drag" \| "resize-start" \| "resize-end" \| "keyboard" \| "api"`	What produced the proposal.

Property	Type	Description
`date`	`Date`	The clicked instant.
`end`	`Date`	Reserved for future gestures.
`allDay`	`boolean`	Whether the click landed on a date-based surface.
`resourceId`	`string`	Present when the click happened inside a resource row.

Property	Type	Description
`start`	`Date`	Draft start.
`end`	`Date`	Draft end.
`allDay`	`boolean`	Whether the draft is date-based.
`resourceId`	`string`	Present when the slot was selected inside a resource row.

Property	Type	Description
`eventKeys`	`string[]`	Selected occurrence keys.
`slot`	`{ start: Date; end: Date; allDay: boolean } \| null`	Committed slot selection (drafts live in `GanttSlotDraft`).

Property	Type	Description
`resourceId`	`string`	The dragged resource id.
`parentId`	`string \| null`	New parent id, or `null` for the root level.
`index`	`number`	Insertion index among the new parent's children.
`resources`	`GanttResource[]`	The full resource tree with the move applied (convenience).

Property	Type	Description
`range`	`GanttDateRange`	Full rendered axis range.
`activeRange`	`GanttDateRange`	The logical period (the month/week itself).
`scale`	`GanttScale`	Current scale.
`date`	`Date`	Anchor date.
`timeZone`	`string`	Display time zone.

Property	Type	Description
`scale`	`GanttScale`	Horizontal axis scale.
`date`	`Date`	Anchor date.
`visibleRange`	`GanttDateRange`	Full rendered axis range - fetch remote data for this.
`activeRange`	`GanttDateRange`	The logical period (the month/week itself).
`events`	`GanttEvent<TData>[]`	Current events.
`selection`	`GanttSelection`	Committed selection.
`interactions`	`GanttInteractions`	Effective interaction switches.
`loading`	`boolean`	Mirrors the `loading` option.
`drag`	`GanttDragState<TData> \| null`	In-flight drag/resize gesture, or `null`.
`slotDraft`	`GanttSlotDraft \| null`	In-flight drag-create rectangle, or `null`.
`viewportCenter`	`Date \| null`	Instant at the center of the scrolled viewport; the nav title follows it.

Property	Type	Description
`kind`	`"move" \| "resize-start" \| "resize-end"`	Gesture kind.
`occurrence`	`GanttOccurrence<TData>`	The gestured occurrence.
`proposedStart`	`Date`	Current snapped proposal start.
`proposedEnd`	`Date`	Current snapped proposal end.
`proposedAllDay`	`boolean`	Current proposal all-day flag.
`proposedResourceId`	`string`	The bar's own resource; moves are x-axis only and never cross rows.
`valid`	`boolean`	Last `canDropEvent` verdict; drives `data-drop-invalid` styling.

Property	Type	Description
`occurrence`	`GanttOccurrence<TData>`	The bar's occurrence.
`segment`	`GanttSegment<TData>`	The rendered segment.
`isDragging`	`boolean`	Whether a gesture owns this bar.
`isSelected`	`boolean`	Whether the bar is selected.

Property	Type	Description
`resource`	`GanttResource`	The row's resource.
`depth`	`number`	Nesting depth (root = 0).
`isGroup`	`boolean`	Whether the row has children.
`collapsed`	`boolean`	Whether the group is currently collapsed.

Property	Type	Description
`occurrence`	`GanttOccurrence<TData>`	The gestured occurrence.
`kind`	`"move" \| "resize-start" \| "resize-end"`	Gesture kind.
`start`	`Date`	Proposed (snapped) start of the current step.
`end`	`Date`	Proposed (snapped) end of the current step.
`valid`	`boolean`	Last `canDropEvent` verdict.

Property	Type	Description
`start`	`Date`	Snapped hint start.
`end`	`Date`	Snapped hint end.
`resource`	`GanttResource`	The hovered row's resource.

Property	Type	Description
`resource`	`GanttResource`	The group row's resource.
`start`	`Date`	Envelope start of the descendant bars.
`end`	`Date`	Envelope end of the descendant bars.
`progress`	`number \| null`	Duration-weighted progress, or `null` to hide.

Method	Signature	Description
`next`	`() => void`	Step one period forward (clamped to `rangeBounds`).
`prev`	`() => void`	Step one period back (clamped to `rangeBounds`).
`today`	`() => void`	Jump to today.
`goTo`	`(date: Date) => void`	Jump to a date.
`setScale`	`(scale: GanttScale) => void`	Switch the axis scale.
`getEvents`	`() => GanttEvent<TData>[]`	Current events.
`getEvent`	`(id: string) => GanttEvent<TData> \| undefined`	Find one event by id.
`setEvents`	`(events: GanttEvent<TData>[]) => void`	Replace all events.
`addEvent`	`(event: GanttEvent<TData>) => void`	Append an event.
`updateEvent`	`(id: string, patch: Partial<GanttEvent<TData>>) => void`	Patch an event; timing changes route through `onEventUpdate` with source `"api"`.
`removeEvent`	`(id: string) => void`	Remove an event.
`getOccurrences`	`(range?: GanttDateRange) => GanttOccurrence<TData>[]`	Expanded, sorted occurrences; defaults to the visible range.
`findOverlapping`	`(candidate: { start: Date; end: Date; excludeEventId?: string }) => GanttOccurrence<TData>[]`	Occurrences overlapping a candidate range.
`select`	`(selection: Partial<GanttSelection>) => void`	Merge into the selection.
`selectEvent`	`(key: string, opts?: { additive?: boolean }) => void`	Select one occurrence key; `additive` toggles.
`clearSelection`	`() => void`	Clear the selection.
`setInteractions`	`(patch: Partial<GanttInteractions>) => void`	Patch the interaction switches.
`getVisibleRange`	`() => GanttDateRange`	Full rendered axis range.
`getActiveRange`	`() => GanttDateRange`	The logical period range.
`toZoned`	`(date: Date) => Date`	TZDate in the gantt's display time zone.

Hook	Signature	Description
`useGanttState`	`(options?: UseGanttStateOptions<TData>) => GanttInstance<TData>`	Headless root hook: the full engine without any markup. Pass the instance to `<Gantt calendar={...}>` or drive fully custom UI.
`useGantt`	`() => GanttInstance<TData>`	The stable calendar instance; throws outside `<Gantt>`.
`useGanttSelector`	`(selector: (state: GanttState<TData>) => T, options?: { calendar?, isEqual? }) => T`	Fine-grained subscription with equality memoization (`Object.is` default).
`useGanttScale`	`() => { scale, setScale }`	Current scale and setter.
`useGanttNavigation`	`() => { date, title, visibleRange, activeRange, next, prev, today, goTo, isToday }`	Navigation state and actions; `title` follows the viewport center.
`useGanttSelection`	`() => { selection, select, selectEvent, clearSelection }`	Selection state and actions.
`useGanttInteractions`	`() => { interactions, setInteractions }`	Interaction switches and setter.
`useGanttOccurrences`	`(range?: GanttDateRange) => GanttOccurrence<TData>[]`	Expanded, sorted occurrences; defaults to the visible range.
`useGanttSettings`	`() => GanttSettings<TData>`	Resolved settings including merged i18n; re-renders only when settings change.
`useGanttSettingsVersion`	`(instance: GanttInstance<TData>) => number`	Subscribes to settings changes only (version counter, not state).
`useGanttViewConfig`	`() => GanttViewConfig<TData>`	Root-level display props and render overrides, for view components.
`useGanttBarContext`	`() => GanttBarContextValue<TData>`	The bar's subject (`occurrence`, `segment`, `isDragging`, `isSelected`); throws outside `<GanttBar>`.
`useGanttGestures`	`() => { beginMove, beginResize, beginCreate, canDrag, canResize }`	Per-bar and per-row pointer gesture wiring, for custom view compositions.

Function	Signature	Description
`flattenResources`	`(resources: GanttResource[], depth?: number) => Array<{ resource: GanttResource; depth: number }>`	Depth-first flatten of the resource tree (parents included).
`reorderResources`	`(resources, resourceId, parentId, index) => GanttResource[] \| null`	Pure tree move; returns a new tree, or `null` for impossible moves.
`resolveOffDay`	`(day: Date, timeZone: string, config: boolean \| GanttOffDaysConfig \| undefined) => boolean`	Resolves whether a day is an off day in the display zone.
`getGanttDateRange`	`(scale, date, opts: { timeZone, weekStartsOn }) => { visibleRange, activeRange }`	Axis range for the anchor date at the given scale.
`stepGanttDate`	`(scale, date, direction: 1 \| -1, opts: { timeZone }) => Date`	The anchor date stepped one period.
`buildEventIndex`	`(events, visibleRange, opts: { timeZone, eventOrder?, getOccurrences? }) => { occurrences }`	Expands and sorts all occurrences for a range.
`defaultEventOrder`	`(a: GanttOccurrence, b: GanttOccurrence) => number`	Start ascending, longer first, then key.
`packTimedSegments`	`(segments: GanttSegment[]) => void`	Overlap packing for one row's timed segments; mutates `column`/`columnCount`/`columnSpan`.
`eventsOverlap`	`(a: { start, end }, b: { start, end }) => boolean`	Half-open range overlap test.
`rangesIntersect`	`(a: GanttDateRange, b: GanttDateRange) => boolean`	Half-open range intersection test.
`spansMultipleDays`	`(occ: { start, end }) => boolean`	True past 24h (an event ending exactly at the next midnight is single-day).
`getDayKey`	`(date: Date, timeZone: string) => string`	Stable per-day key in the display time zone.
`getDayTotalMinutes`	`(dayStart: Date, timeZone: string) => number`	Day length in minutes; 1380/1500 on DST transition days.
`getRangeKey`	`(range: GanttDateRange) => string`	Cheap cache key for a range.
`snapMinutes`	`(minutes: number, snap: number) => number`	Rounds minutes to the snap grid.
`toZoned`	`(date: Date, timeZone: string) => TZDate`	The instant re-expressed in the display time zone.
`zonedStartOfDay`	`(date: Date, timeZone: string) => TZDate`	Zoned midnight of the day containing the instant.
`mergeGanttI18n`	`(overrides?: GanttI18nOverrides) => GanttI18nConfig`	Deep-partial i18n merge; replaces individual keys, never sections.
`wasRecentDrag`	`() => boolean`	True within 250ms of a gesture end, so click handlers can ignore the click that ends a drag.
`markGestureEnd`	`() => void`	Mark a non-dnd gesture (e.g. a timeline pan) so the click it ends is ignored.

Function	Signature	Description
`parseRRuleString`	`(input: string, timeZone?: string) => GanttRecurrenceRule`	Parses a raw RRULE line (with or without the `RRULE:` prefix); floating `UNTIL` resolves in the display zone.
`formatRRuleString`	`(rule: GanttRecurrenceRule) => string`	Serializes the structured subset back to an RRULE line (without prefix).
`expandRecurrence`	`(event: GanttEvent<TData>, range: GanttDateRange, ctx: { timeZone: string }) => GanttOccurrence<TData>[]`	Expands one event into its occurrences intersecting the range; DST-safe wall-time iteration.
`GanttRecurrenceError`	`class extends Error`	Thrown for unsupported or invalid rules; catch it to fall back or surface a message.

Prop	Type	Default	Description
`events`	`GanttEvent<TData>[]`	-	Controlled events; pairs with `onEventsChange`.
`defaultEvents`	`GanttEvent<TData>[]`	`[]`	Initial events (uncontrolled).
`scale`	`GanttScale`	-	Controlled scale; pairs with `onScaleChange`.
`defaultScale`	`GanttScale`	`"day"`	Initial scale (uncontrolled).
`date`	`Date`	-	Controlled anchor date; pairs with `onDateChange`.
`defaultDate`	`Date`	`new Date()`	Initial anchor date (uncontrolled).
`selection`	`GanttSelection`	-	Controlled selection; pairs with `onSelectionChange`.
`defaultSelection`	`GanttSelection`	empty	Initial selection (uncontrolled).
`interactions`	`Partial<GanttInteractions>`	-	Controlled interaction switches; pairs with `onInteractionsChange`.
`defaultInteractions`	`Partial<GanttInteractions>`	all `true`	Initial interaction switches (uncontrolled).
`loading`	`boolean`	`false`	Loading flag mirrored into state.
`timeZone`	`string`	system zone	IANA display time zone.
`locale`	`Locale`	-	date-fns locale for all formatting.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	locale's, else `0`	First day of the week; defaults from `locale` when one is set.
`slotDuration`	`number`	`30`	Minimum created-slot length in minutes for a bare create click.
`snapDuration`	`number`	`15`	Minute snapping on the day scale; other scales snap to whole zoned days.
`i18n`	`GanttI18nOverrides`	-	Deep-partial label/format/function overrides (see ).
`rangeBounds`	`{ min?: Date; max?: Date }`	-	Hard travel bounds for navigation and infinite scrolling; either side may be omitted.
`activation`	`GanttActivationConfig`	-	Pointer-activation threshold overrides for drag/resize/create.
`maxRangeWindow`	`number`	`12`	Infinite-scroll growth cap in whole periods per side; past it the anchor slides instead.
`resources`	`GanttResource[]`	`[]`	Resource rows of the gantt tree.
`getEventPriority`	`(event: GanttEvent<TData>) => number`	`event.priority ?? 0`	Packing prominence per event.
`eventOrder`	`(a: GanttOccurrence<TData>, b: GanttOccurrence<TData>) => number`	priority-aware	Occurrence sort; the default orders higher `getEventPriority` first, then start/duration/key.
`getOccurrences`	`(event, range, ctx: { timeZone: string }) => Array<{ start: Date; end: Date }> \| null`	-	Escape hatch for exotic recurrence: return the expanded occurrences yourself.

Prop	Type	Description
`onEventClick`	`(occurrence, e: React.MouseEvent) => void`	Bar click (the click that ends a drag is ignored).
`onEventDoubleClick`	`(occurrence, e: React.MouseEvent) => void`	Bar double click.
`onEventUpdate`	`(update: GanttProposedUpdate<TData>) => GanttUpdateResult`	Commit gate for every timing change; return `false` to reject, an object to adjust.
`canDropEvent`	`(update: GanttProposedUpdate<TData>) => boolean`	Live validity predicate while dragging or resizing; drives the destructive indicator.
`onSlotClick`	`(slot: GanttSlotInfo, e: React.MouseEvent) => void`	Click on empty schedulable track (also the schedule-hint activation).
`onSelectSlot`	`(slot: GanttSlotDraft) => void`	Drag-create commit.
`canSelectSlot`	`(slot: GanttSlotDraft) => boolean`	Live validity predicate for the drag-create rectangle.
`onCreateTask`	`(ctx: { parentId: string \| null; index: number }) => void`	Fires when the "add task" hint is activated; create a new tree row.
`canCreateTask`	`(ctx: { parentId: string \| null }) => boolean`	Gates the "add task" hint; the shipped view offers root-level creation only (`parentId = null`).
`onResourceClick`	`(ctx: GanttColumnContext, e: React.MouseEvent) => void`	Click on a tree row's surface (chevron/checkbox/grip clicks excluded).
`onResourceDoubleClick`	`(ctx: GanttColumnContext, e: React.MouseEvent) => void`	Double click on a tree row's surface.
`onRangeChange`	`(info: GanttRangeInfo) => void`	Rendered range changed (fires once on mount); fetch remote data here.
`onScaleChange`	`(scale: GanttScale) => void`	Scale changed.
`onDateChange`	`(date: Date) => void`	Anchor date changed (navigation or an infinite-scroll anchor slide).
`onSelectionChange`	`(selection: GanttSelection) => void`	Selection changed.
`onInteractionsChange`	`(interactions: GanttInteractions) => void`	Interaction switches changed.
`onEventsChange`	`(events: GanttEvent<TData>[]) => void`	Events changed (accepted updates, api mutations).
`onResourceReorder`	`(proposal: GanttResourceReorder) => void \| false`	Commit gate for tree-row drag reorder; adopt `proposal.resources` into your `resources` state, return `false` to reject.
`canReorderResource`	`(proposal: GanttResourceReorder) => boolean`	Live validity predicate while a resource row is being dragged.
`onResourceReorderReject`	`(proposal: GanttResourceReorder) => void`	Fires when a reorder gesture is released on a rejected position; explain the rejection (a toast).

Prop	Type	Default	Description
`nowIndicator`	`boolean`	`true`	Red now-line on the axis.
`interval`	`number`	`60`	Day-scale unit interval in minutes; axis units and gridlines follow it.
`scrollbars`	`"custom" \| "native"`	`"custom"`	Scroll implementation for the gantt body: shadcn ScrollArea or browser scrollbars.
`displayScheduleHint`	`boolean`	`false`	Placement hint over empty timeline track: a validated, snapped tile that opens the schedule flow.
`dragCreate`	`boolean`	`false`	Empty-track presses start a drag-create gesture committing through `onSelectSlot`; off means the panel drags-to-pan.
`displayCreateTaskHint`	`boolean`	`false`	"Add task" affordance at the foot of the tree; shown only when `canCreateTask` allows it.
`zoomControl`	`boolean`	`true`	Floating zoom in/out control over the track.
`navButtonVariant`	`"ghost" \| "outline" \| "secondary" \| "default"`	`"ghost"`	Nav button variant; all nav buttons follow it.
`navButtonSize`	`"sm" \| "default"`	`"sm"`	Nav button size; icon buttons use the icon twin.
`offDays`	`boolean \| GanttOffDaysConfig`	`true`	Off-day marking on day/week/month scales; `true` = weekends with a muted background, an object customizes it.
`columns`	`GanttColumn[]`	-	Extra tree-panel columns after the built-in name column; the panel scrolls horizontally, the name column stays pinned.
`columnsMenu`	`ReactNode`	-	Consumer slot pinned at the end of the tree-panel header, the intended home for a columns dropdown.
`treePanel`	`GanttTreePanelConfig`	-	Tree-panel width, splitter bounds, and resizability.
`timelineLines`	`"vertical" \| "both" \| "none"`	`"vertical"`	Timeline gridlines: unit boundaries only, plus row borders, or bare.
`barLabel`	`"inside" \| "outside" \| "auto"`	`"inside"`	Bar title placement; `"auto"` moves it outside only when the bar is too short.
`offscreenIndicators`	`boolean`	`true`	Edge chips that scroll to bars outside the visible timeline.
`infiniteScroll`	`boolean`	`true`	Extend the timeline into the past/future while scrolling near an edge (the anchor period stays the nav title).
`zoomRange`	`{ min?: number; max?: number; step?: number }`	`0.5 - 3`, step `0.25`	Zoom bounds and button step for the floating control.
`metrics`	`GanttMetrics`	-	Layout metric overrides (row/lane/unit geometry, fades, thresholds).
`stickyNav`	`boolean`	`false`	Sticky nav bar.
`rowCheckboxes`	`boolean`	`true`	Leaf-row selection checkboxes in the tree panel; uncontrolled unless `selectedRows` is passed.
`selectedRows`	`string[]`	-	Controlled selected row ids; pairs with `onSelectedRowsChange`.
`onSelectedRowsChange`	`(ids: string[]) => void`	-	Selected rows changed.
`collapsedGroups`	`string[]`	-	Controlled collapsed group ids; pairs with `onCollapsedGroupsChange`.
`defaultCollapsedGroups`	`string[]`	-	Initial collapsed group ids (uncontrolled).
`onCollapsedGroupsChange`	`(ids: string[]) => void`	-	Collapsed groups changed.
`zoom`	`number`	-	Controlled zoom multiplier; pairs with `onZoomChange`.
`defaultZoom`	`number`	`1`	Initial zoom multiplier (uncontrolled).
`onZoomChange`	`(zoom: number) => void`	-	Zoom changed.
`parentScheduling`	`boolean`	`false`	Allow drag-create and slot clicks on rows that have children; off means parents aggregate their subtree.
`summaryBars`	`boolean`	`true`	Rollup strips on parent rows without bars of their own: descendant envelope with duration-weighted progress.
`classNames`	`GanttClassNames`	-	Class overrides for nav, toolbar, view, and event.
`renderEvent`	`(props: GanttRenderEventProps<TData>) => ReactNode`	-	Replaces the default bar content; the interactive wrapper stays gantt-owned.
`renderEventMenu`	`(props: GanttRenderEventProps<TData>) => ReactNode`	-	Right-click menu for a bar: return shadcn ContextMenu items; omit for no menu.
`renderResourceLabel`	`(props: GanttColumnContext) => ReactNode`	-	Tree-node label; return any rich content (icons, badges). Default is the plain title.
`renderResourceMenu`	`(ctx: GanttColumnContext) => ReactNode`	-	Right-click menu for a tree row (same contract as `renderEventMenu`).
`renderNoResources`	`() => ReactNode`	-	Rendered in the timeline body when there are no resources.
`renderDragPreview`	`(props: GanttDragIndicatorProps<TData>) => ReactNode`	-	Replaces the smooth cursor-following move clone; the gantt owns the wrapper and positions it per pointermove.
`renderResizeIndicator`	`(props: GanttDragIndicatorProps<TData>) => ReactNode`	-	Replaces the resize edge line and status chip; same positioning contract as `renderDragPreview`.
`renderScheduleHint`	`(props: GanttScheduleHintProps) => ReactNode`	-	Replaces the schedule-hint tile and bubble inside the snapped, validated, pointer-transparent wrapper.
`renderSummary`	`(props: GanttSummaryProps) => ReactNode`	-	Replaces the parent rollup strip (the positioned wrapper stays gantt-owned).
`getSummaryProgress`	`(ctx: { resource: GanttResource; events: GanttEvent<TData>[] }) => number \| null`	-	Replaces the rollup math: return 0-100 (or `null` to hide). Default: duration-weighted mean progress.

Property	Type	Default	Description
`drag`	`boolean`	`true`	Horizontal move within the bar's own row; never across rows.
`resize`	`boolean`	`true`	Edge resize on bar segments.
`selectSlot`	`boolean`	`true`	Slot selection (drag-create and slot clicks).

Property	Type	Default	Description
`weekendDays`	`number[]`	`[0, 6]`	Weekday numbers treated as off (0 = Sunday).
`dates`	`Date[]`	-	Additional explicit off dates (compared by day in the display zone).
`isOffDay`	`(day: Date) => boolean`	-	Full custom predicate; runs in addition to `weekendDays`/`dates`.
`className`	`string`	`"bg-muted/40"`	Marker classes.

Property	Type	Default	Description
`width`	`number`	`288`	Initial panel width in px.
`minWidth`	`number`	`180`	Splitter lower bound in px.
`maxWidth`	`number`	`640`	Splitter upper bound in px.
`resizable`	`boolean`	`true`	Drag/keyboard splitter between the panels.
`nameColumnWidth`	`number`	`208`	Width of the sticky name column in px.
`onWidthChange`	`(width: number) => void`	-	Fires after any user resize (drag release, keyboard, double-click reset).

Property	Type	Default	Description
`id`	`string`	-	`Required`. Stable id; doubles as the default header label.
`title`	`ReactNode`	-	Header label.
`width`	`number`	`96`	Fixed column width in px.
`align`	`"start" \| "center" \| "end"`	`"start"`	Cell content alignment.
`render`	`(ctx: GanttColumnContext) => ReactNode`	-	Cell content per row; omit or return `null` for an empty cell.
`className`	`string`	-	Extra classes on every cell of this column (header included).

Property	Type	Default	Description
`laneHeight`	`number`	`1.75`	Bar lane height.
`rowPadding`	`number`	`0.5`	Vertical padding around a row's lane block.
`minRowHeight`	`number`	`2.5`	Minimum row height.
`autoLabelMin`	`number`	`7`	`barLabel` `"auto"` flips the title outside below this bar width.
`unitWidths`	`Partial<Record<GanttScale, number>>`	-	Unit width at zoom 1 per scale (day scale = width per interval unit; defaults: day 5 at a 60-minute interval, week 10, month 4, quarter 8, year 10).
`minTimelineWidth`	`number`	`200`	Minimum timeline pane width in px.
`infiniteScrollEdge`	`number`	`160`	Scroll distance (px) from an edge that grows the range.

Property	Type	Default	Description
`moveDistancePx`	`number`	`5`	Mouse travel (px) before a bar move starts.
`createDistancePx`	`number`	`4`	Mouse travel (px) before a drag-create starts.
`touchDelayMs`	`number`	`250`	Touch long-press delay in ms.
`touchTolerancePx`	`number`	`5`	Touch movement tolerance (px) during the long-press.

Property	Type	Default	Description
`nav`	`string`	-	Classes for `GanttNav`.
`toolbar`	`string`	-	Classes for `GanttToolbar`.
`view`	`string`	-	Classes for the gantt body (tree + track).
`event`	`string`	-	Classes for every bar.

Property	Type	Default
`today`	`string`	`"Today"`
`previous`	`string`	`"Previous"`
`next`	`string`	`"Next"`
`addEvent`	`string`	`"Add event"`
`addTask`	`string`	`"Add task"`
`allDay`	`string`	`"All day"`
`loading`	`string`	`"Loading events"`
`event`	`string`	`"event"`
`events`	`(count: number) => string`	`"1 event"` / `${count} events`
`week`	`(weekNumber: number) => string`	`W${weekNumber}`
`resources`	`string`	`"Resources"`
`goToDate`	`string`	`"Go to date"`
`scheduleHint`	`string`	`"Click to add a schedule"`
`reorder`	`string`	`"Reorder"`
`selectView`	`string`	`"Select view"`
`zoomIn`	`string`	`"Zoom in"`
`zoomOut`	`string`	`"Zoom out"`
`resizePanel`	`string`	`"Resize panel"`
`jumpToBar`	`(title: string) => string`	`Scroll to "${title}"`
`progress`	`(percent: number) => string`	`${percent}% complete`
`durationDays`	`(days: number) => string`	`"1 day"` / `${days} days`
`continues`	`string`	`"continues"`
`scales`	`Record<GanttScale, string>`	`Day`, `Week`, `Month`, `Quarter`, `Year`

Property	Default	Description
`monthTitle`	`"MMMM yyyy"`	Month-scale title.
`dayTitle`	`"EEEE, MMMM d, yyyy"`	Day-scale title and Today tooltip.
`timeGutter`	`"h a"`	Day-scale axis unit labels.
`eventTime`	`"h:mm a"`	Timed event time labels.

Property	Signature	Description
`formatTitle`	`(scale, ctx: { date, activeRange, visibleRange, locale? }) => string`	The nav title per scale (week gets a smart range label).
`formatEventTime`	`(start: Date, end: Date, allDay: boolean, locale?: Locale) => string`	Bar time/range labels; all-day bars show their date range.
`formatDayRange`	`(range: GanttDateRange, locale?: Locale) => string`	Compact day-range label.
`formatEventAriaLabel`	`(parts: { title, timeLabel, rowTitle?, progressLabel?, continues: boolean }) => string`	Composes the bar screen-reader label; appends `labels.continues` when clipped.

"use client"

import { useMemo, useRef, useState } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import type { GanttI18nOverrides } from "@/components/reui/gantt/gantt-i18n"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttInteractions,
  GanttResource,
  GanttSlotDraft,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek, type Locale } from "date-fns"
import { ar, de, es, fr, ja } from "date-fns/locale"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { RotateCcwIcon, SettingsIcon } from 'lucide-react'

/**
 * White-label task tree, tall enough that the panes scroll vertically. The
 * Launch group and "Release prep" ship UNSCHEDULED: hover their empty rows
 * and click the hint tile (or drag a range) to schedule them.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "planning",
    title: "Planning",
    children: [
      { id: "brief", title: "Project brief" },
      { id: "scope", title: "Scope review" },
    ],
  },
  {
    id: "design",
    title: "Design",
    children: [
      { id: "wireframes", title: "Wireframes" },
      { id: "visual-design", title: "Visual design" },
    ],
  },
  {
    id: "build",
    title: "Build",
    children: [
      { id: "frontend", title: "Frontend" },
      { id: "backend", title: "Backend" },
      { id: "qa", title: "QA pass" },
      { id: "release-prep", title: "Release prep" },
    ],
  },
  {
    id: "launch",
    title: "Launch",
    children: [
      { id: "docs", title: "Docs" },
      { id: "marketing-site", title: "Marketing site" },
      { id: "announcement", title: "Announcement" },
    ],
  },
]

/** Leaf id -> title, for naming bars scheduled from empty rows. */
const RESOURCE_TITLES = new Map(
  RESOURCES.flatMap((group) => group.children ?? []).map((leaf) => [
    leaf.id,
    leaf.title,
  ])
)

/** Small white-label fixture built around the current week. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("brief", "Project brief", -9, 3, "var(--color-blue-500)", 100),
    bar("scope", "Scope review", -6, 2, "var(--color-sky-500)", 100),
    bar("wireframes", "Wireframes", -4, 4, "var(--color-violet-500)", 80),
    bar("visual-design", "Visual design", 0, 5, "var(--color-purple-500)", 35),
    bar("frontend", "Frontend", 3, 7, "var(--color-emerald-500)", 10),
    bar("backend", "Backend", 5, 6, "var(--color-teal-500)"),
    bar("qa", "QA pass", 12, 4, "var(--color-amber-500)"),
  ]
}

/**
 * i18n presets - each language ships a date-fns `locale` (localizes the axis
 * headers, the nav title, and bar date labels; it also drives the default
 * week start, so a German timeline starts Monday) plus an `i18n` override map
 * for the static strings the locale can't reach (Today, the scale names, the
 * schedule hint). Arabic also flips the chart to right-to-left. English is the
 * built-in default, so it leaves both undefined.
 */
interface DemoLocale {
  id: string
  /** Native language name, shown in the picker. */
  label: string
  locale: Locale | undefined
  dir: "ltr" | "rtl"
  i18n: GanttI18nOverrides | undefined
}

const LOCALES: DemoLocale[] = [
  {
    id: "en",
    label: "English",
    locale: undefined,
    dir: "ltr",
    i18n: undefined,
  },
  {
    id: "de",
    label: "Deutsch",
    locale: de,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Heute",
        scheduleHint: "Zum Planen klicken",
        reorder: "Neu anordnen",
        scales: {
          day: "Tag",
          week: "Woche",
          month: "Monat",
          quarter: "Quartal",
          year: "Jahr",
        },
      },
    },
  },
  {
    id: "fr",
    label: "Français",
    locale: fr,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Aujourd'hui",
        scheduleHint: "Cliquer pour planifier",
        reorder: "Réorganiser",
        scales: {
          day: "Jour",
          week: "Semaine",
          month: "Mois",
          quarter: "Trimestre",
          year: "Année",
        },
      },
    },
  },
  {
    id: "es",
    label: "Español",
    locale: es,
    dir: "ltr",
    i18n: {
      labels: {
        today: "Hoy",
        scheduleHint: "Clic para programar",
        reorder: "Reordenar",
        scales: {
          day: "Día",
          week: "Semana",
          month: "Mes",
          quarter: "Trimestre",
          year: "Año",
        },
      },
    },
  },
  {
    id: "ja",
    label: "日本語",
    locale: ja,
    dir: "ltr",
    i18n: {
      labels: {
        today: "今日",
        scheduleHint: "クリックして予定を追加",
        reorder: "並べ替え",
        scales: {
          day: "日",
          week: "週",
          month: "月",
          quarter: "四半期",
          year: "年",
        },
      },
    },
  },
  {
    id: "ar",
    label: "العربية",
    locale: ar,
    dir: "rtl",
    i18n: {
      labels: {
        today: "اليوم",
        scheduleHint: "انقر لإضافة جدول",
        reorder: "إعادة ترتيب",
        scales: {
          day: "يوم",
          week: "أسبوع",
          month: "شهر",
          quarter: "ربع سنوي",
          year: "سنة",
        },
      },
    },
  },
]

/** Display time zones - all timeline math and rendering happen in the chosen
 *  zone, so switching it re-anchors every bar to that zone's calendar days. */
const TIME_ZONES: Array<{ id: string; label: string; value?: string }> = [
  { id: "local", label: "Browser" },
  { id: "ny", label: "New York", value: "America/New_York" },
  { id: "london", label: "London", value: "Europe/London" },
  { id: "tokyo", label: "Tokyo", value: "Asia/Tokyo" },
  { id: "kolkata", label: "Kolkata", value: "Asia/Kolkata" },
]

/** Every toggle's default; the Reset button returns the demo here. */
const SETTINGS_DEFAULTS = {
  rowCheckboxes: true,
  summaryBars: true,
  zoomControl: true,
  offscreenIndicators: true,
  infiniteScroll: true,
  nowIndicator: true,
  offDays: false,
  dragCreate: true,
  displayScheduleHint: true,
  barLabel: "inside" as "inside" | "outside" | "auto",
  timelineLines: "vertical" as "vertical" | "both" | "none",
  interactions: { drag: true, resize: true, selectSlot: true },
  localeId: "en",
  timeZoneId: "local",
}

/** One labeled switch row inside a settings tab. */
function SettingSwitch({
  id,
  label,
  checked,
  onCheckedChange,
}: {
  id: string
  label: string
  checked: boolean
  onCheckedChange: (value: boolean) => void
}) {
  return (
    <div className="flex items-center justify-between gap-4 py-1">
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
      <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  )
}

/** One labeled radio row inside a settings tab. */
function SettingRadio({
  id,
  value,
  label,
}: {
  id: string
  value: string
  label: string
}) {
  return (
    <div className="flex items-center gap-2 py-0.5">
      <RadioGroupItem value={value} id={id} />
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
    </div>
  )
}

/** One labeled select row - the language and time-zone pickers. */
function SettingSelect({
  id,
  label,
  value,
  options,
  onValueChange,
}: {
  id: string
  label: string
  value: string
  options: Array<{ value: string; label: string }>
  onValueChange: (value: string) => void
}) {
  return (
    <div className="flex items-center justify-between gap-4 py-1">
      <Label htmlFor={id} className="font-normal">
        {label}
      </Label>
      <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger id={id} size="sm" className="w-36">
          {/* Base UI's Value renders the raw value string by default; the
              selected option's label reads better here. */}
          <SelectValue>
            {options.find((option) => option.value === value)?.label}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

interface SettingsMenuProps {
  rowCheckboxes: boolean
  onRowCheckboxesChange: (value: boolean) => void
  summaryBars: boolean
  onSummaryBarsChange: (value: boolean) => void
  zoomControl: boolean
  onZoomControlChange: (value: boolean) => void
  offscreenIndicators: boolean
  onOffscreenIndicatorsChange: (value: boolean) => void
  infiniteScroll: boolean
  onInfiniteScrollChange: (value: boolean) => void
  nowIndicator: boolean
  onNowIndicatorChange: (value: boolean) => void
  offDays: boolean
  onOffDaysChange: (value: boolean) => void
  dragCreate: boolean
  onDragCreateChange: (value: boolean) => void
  displayScheduleHint: boolean
  onDisplayScheduleHintChange: (value: boolean) => void
  barLabel: "inside" | "outside" | "auto"
  onBarLabelChange: (value: "inside" | "outside" | "auto") => void
  timelineLines: "vertical" | "both" | "none"
  onTimelineLinesChange: (value: "vertical" | "both" | "none") => void
  interactions: GanttInteractions
  onInteractionsChange: (value: GanttInteractions) => void
  localeId: string
  onLocaleChange: (value: string) => void
  timeZoneId: string
  onTimeZoneChange: (value: string) => void
  onReset: () => void
}

function SettingsMenu({
  rowCheckboxes,
  onRowCheckboxesChange,
  summaryBars,
  onSummaryBarsChange,
  zoomControl,
  onZoomControlChange,
  offscreenIndicators,
  onOffscreenIndicatorsChange,
  infiniteScroll,
  onInfiniteScrollChange,
  nowIndicator,
  onNowIndicatorChange,
  offDays,
  onOffDaysChange,
  dragCreate,
  onDragCreateChange,
  displayScheduleHint,
  onDisplayScheduleHintChange,
  barLabel,
  onBarLabelChange,
  timelineLines,
  onTimelineLinesChange,
  interactions,
  onInteractionsChange,
  localeId,
  onLocaleChange,
  timeZoneId,
  onTimeZoneChange,
  onReset,
}: SettingsMenuProps) {
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button variant="outline" size="sm">
            <SettingsIcon  className="size-4" aria-hidden="true" />
            Settings
          </Button>
        }
      />
      <PopoverContent align="end" className="w-80 p-0">
        {/* Tabs keep every group one screen tall - no menu scrolling */}
        <Tabs defaultValue="display">
          <div className="border-b p-2">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="display">Display</TabsTrigger>
              <TabsTrigger value="behavior">Behavior</TabsTrigger>
              <TabsTrigger value="style">Style</TabsTrigger>
              <TabsTrigger value="region">Region</TabsTrigger>
            </TabsList>
          </div>
          <TabsContent value="display" className="space-y-0.5 p-3">
            <SettingSwitch
              id="gantt1-row-checkboxes"
              label="Row checkboxes"
              checked={rowCheckboxes}
              onCheckedChange={onRowCheckboxesChange}
            />
            <SettingSwitch
              id="gantt1-summary-bars"
              label="Summary bars"
              checked={summaryBars}
              onCheckedChange={onSummaryBarsChange}
            />
            <SettingSwitch
              id="gantt1-zoom-control"
              label="Zoom control"
              checked={zoomControl}
              onCheckedChange={onZoomControlChange}
            />
            <SettingSwitch
              id="gantt1-offscreen-chips"
              label="Off-screen chips"
              checked={offscreenIndicators}
              onCheckedChange={onOffscreenIndicatorsChange}
            />
            <SettingSwitch
              id="gantt1-infinite-scroll"
              label="Infinite scroll"
              checked={infiniteScroll}
              onCheckedChange={onInfiniteScrollChange}
            />
            <SettingSwitch
              id="gantt1-now-indicator"
              label="Now indicator"
              checked={nowIndicator}
              onCheckedChange={onNowIndicatorChange}
            />
            <SettingSwitch
              id="gantt1-off-days"
              label="Mark off days"
              checked={offDays}
              onCheckedChange={onOffDaysChange}
            />
          </TabsContent>
          <TabsContent value="behavior" className="space-y-0.5 p-3">
            <SettingSwitch
              id="gantt1-drag"
              label="Drag to move"
              checked={interactions.drag}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, drag: checked })
              }
            />
            <SettingSwitch
              id="gantt1-resize"
              label="Resize"
              checked={interactions.resize}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, resize: checked })
              }
            />
            <SettingSwitch
              id="gantt1-select-slot"
              label="Select slot"
              checked={interactions.selectSlot}
              onCheckedChange={(checked) =>
                onInteractionsChange({ ...interactions, selectSlot: checked })
              }
            />
            <SettingSwitch
              id="gantt1-drag-create"
              label="Drag to create"
              checked={dragCreate}
              onCheckedChange={onDragCreateChange}
            />
            <SettingSwitch
              id="gantt1-schedule-hint"
              label="Schedule hint"
              checked={displayScheduleHint}
              onCheckedChange={onDisplayScheduleHintChange}
            />
          </TabsContent>
          <TabsContent value="style" className="space-y-4 p-3">
            <div className="space-y-1.5">
              <div className="text-muted-foreground text-xs font-medium">
                Bar label
              </div>
              <RadioGroup
                value={barLabel}
                onValueChange={(value) =>
                  onBarLabelChange(value as "inside" | "outside" | "auto")
                }
              >
                <SettingRadio
                  id="gantt1-label-inside"
                  value="inside"
                  label="Inside"
                />
                <SettingRadio
                  id="gantt1-label-outside"
                  value="outside"
                  label="Outside"
                />
                <SettingRadio
                  id="gantt1-label-auto"
                  value="auto"
                  label="Auto"
                />
              </RadioGroup>
            </div>
            <div className="space-y-1.5">
              <div className="text-muted-foreground text-xs font-medium">
                Grid lines
              </div>
              <RadioGroup
                value={timelineLines}
                onValueChange={(value) =>
                  onTimelineLinesChange(value as "vertical" | "both" | "none")
                }
              >
                <SettingRadio
                  id="gantt1-lines-vertical"
                  value="vertical"
                  label="Vertical"
                />
                <SettingRadio
                  id="gantt1-lines-both"
                  value="both"
                  label="Both"
                />
                <SettingRadio
                  id="gantt1-lines-none"
                  value="none"
                  label="None"
                />
              </RadioGroup>
            </div>
          </TabsContent>
          <TabsContent value="region" className="space-y-2 p-3">
            <SettingSelect
              id="gantt1-language"
              label="Language"
              value={localeId}
              options={LOCALES.map((entry) => ({
                value: entry.id,
                label: entry.label,
              }))}
              onValueChange={onLocaleChange}
            />
            <SettingSelect
              id="gantt1-timezone"
              label="Time zone"
              value={timeZoneId}
              options={TIME_ZONES.map((entry) => ({
                value: entry.id,
                label: entry.label,
              }))}
              onValueChange={onTimeZoneChange}
            />
            <p className="text-muted-foreground text-xs leading-relaxed">
              Language switches the date-fns locale, the scale names, and the
              week start. Time zone re-anchors every bar. Arabic also flips the
              chart to right-to-left.
            </p>
          </TabsContent>
        </Tabs>
        <div className="border-t p-2">
          <Button
            variant="outline"
            size="sm"
            className="w-full"
            onClick={onReset}
          >
            <RotateCcwIcon  className="size-3.5" aria-hidden="true" />
            Reset to defaults
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  const [rowCheckboxes, setRowCheckboxes] = useState(
    SETTINGS_DEFAULTS.rowCheckboxes
  )
  const [summaryBars, setSummaryBars] = useState(SETTINGS_DEFAULTS.summaryBars)
  const [zoomControl, setZoomControl] = useState(SETTINGS_DEFAULTS.zoomControl)
  const [offscreenIndicators, setOffscreenIndicators] = useState(
    SETTINGS_DEFAULTS.offscreenIndicators
  )
  const [infiniteScroll, setInfiniteScroll] = useState(
    SETTINGS_DEFAULTS.infiniteScroll
  )
  const [nowIndicator, setNowIndicator] = useState(
    SETTINGS_DEFAULTS.nowIndicator
  )
  const [offDays, setOffDays] = useState(SETTINGS_DEFAULTS.offDays)
  const [dragCreate, setDragCreate] = useState(SETTINGS_DEFAULTS.dragCreate)
  const [displayScheduleHint, setDisplayScheduleHint] = useState(
    SETTINGS_DEFAULTS.displayScheduleHint
  )
  const [barLabel, setBarLabel] = useState<"inside" | "outside" | "auto">(
    SETTINGS_DEFAULTS.barLabel
  )
  const [timelineLines, setTimelineLines] = useState<
    "vertical" | "both" | "none"
  >(SETTINGS_DEFAULTS.timelineLines)
  const [interactions, setInteractions] = useState<GanttInteractions>(
    SETTINGS_DEFAULTS.interactions
  )
  const [localeId, setLocaleId] = useState(SETTINGS_DEFAULTS.localeId)
  const [timeZoneId, setTimeZoneId] = useState(SETTINGS_DEFAULTS.timeZoneId)

  const activeLocale =
    LOCALES.find((entry) => entry.id === localeId) ?? LOCALES[0]
  const activeTimeZone =
    TIME_ZONES.find((entry) => entry.id === timeZoneId) ?? TIME_ZONES[0]

  const resetSettings = () => {
    setRowCheckboxes(SETTINGS_DEFAULTS.rowCheckboxes)
    setSummaryBars(SETTINGS_DEFAULTS.summaryBars)
    setZoomControl(SETTINGS_DEFAULTS.zoomControl)
    setOffscreenIndicators(SETTINGS_DEFAULTS.offscreenIndicators)
    setInfiniteScroll(SETTINGS_DEFAULTS.infiniteScroll)
    setNowIndicator(SETTINGS_DEFAULTS.nowIndicator)
    setOffDays(SETTINGS_DEFAULTS.offDays)
    setDragCreate(SETTINGS_DEFAULTS.dragCreate)
    setDisplayScheduleHint(SETTINGS_DEFAULTS.displayScheduleHint)
    setBarLabel(SETTINGS_DEFAULTS.barLabel)
    setTimelineLines(SETTINGS_DEFAULTS.timelineLines)
    setInteractions(SETTINGS_DEFAULTS.interactions)
    setLocaleId(SETTINGS_DEFAULTS.localeId)
    setTimeZoneId(SETTINGS_DEFAULTS.timeZoneId)
  }

  // Unscheduled rows accept ONE schedule: the hint tile (or a drag-create
  // range) proposes a slot, and the handler turns it into a real bar.
  const canSelectSlot = (slot: GanttSlotDraft) =>
    !!slot.resourceId &&
    !(apiRef.current?.getEvents() ?? []).some(
      (event) => event.resourceId === slot.resourceId
    )
  const handleSelectSlot = (slot: GanttSlotDraft) => {
    const api = apiRef.current
    if (!api || !slot.resourceId) return
    api.addEvent({
      id: `scheduled-${slot.resourceId}`,
      title: RESOURCE_TITLES.get(slot.resourceId) ?? "New schedule",
      start: slot.start,
      end: slot.end,
      allDay: true,
      color: "var(--color-indigo-500)",
      resourceId: slot.resourceId,
    })
  }

  return (
    <div className="w-full p-4" dir={activeLocale.dir}>
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="month"
            apiRef={apiRef}
            locale={activeLocale.locale}
            i18n={activeLocale.i18n}
            timeZone={activeTimeZone.value}
            treePanel={{ width: 200 }}
            rowCheckboxes={rowCheckboxes}
            summaryBars={summaryBars}
            zoomControl={zoomControl}
            offscreenIndicators={offscreenIndicators}
            infiniteScroll={infiniteScroll}
            nowIndicator={nowIndicator}
            offDays={offDays}
            dragCreate={dragCreate}
            displayScheduleHint={displayScheduleHint}
            barLabel={barLabel}
            timelineLines={timelineLines}
            interactions={interactions}
            onInteractionsChange={setInteractions}
            canSelectSlot={canSelectSlot}
            onSelectSlot={handleSelectSlot}
            className="h-[520px] w-full"
          >
            {/* one bordered header row, same look as the plain GanttNav:
                the row owns the border and end padding so the toolbar never
                sits glued to the edge */}
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <SettingsMenu
                  rowCheckboxes={rowCheckboxes}
                  onRowCheckboxesChange={setRowCheckboxes}
                  summaryBars={summaryBars}
                  onSummaryBarsChange={setSummaryBars}
                  zoomControl={zoomControl}
                  onZoomControlChange={setZoomControl}
                  offscreenIndicators={offscreenIndicators}
                  onOffscreenIndicatorsChange={setOffscreenIndicators}
                  infiniteScroll={infiniteScroll}
                  onInfiniteScrollChange={setInfiniteScroll}
                  nowIndicator={nowIndicator}
                  onNowIndicatorChange={setNowIndicator}
                  offDays={offDays}
                  onOffDaysChange={setOffDays}
                  dragCreate={dragCreate}
                  onDragCreateChange={setDragCreate}
                  displayScheduleHint={displayScheduleHint}
                  onDisplayScheduleHintChange={setDisplayScheduleHint}
                  barLabel={barLabel}
                  onBarLabelChange={setBarLabel}
                  timelineLines={timelineLines}
                  onTimelineLinesChange={setTimelineLines}
                  interactions={interactions}
                  onInteractionsChange={setInteractions}
                  localeId={localeId}
                  onLocaleChange={setLocaleId}
                  timeZoneId={timeZoneId}
                  onTimeZoneChange={setTimeZoneId}
                  onReset={resetSettings}
                />
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef, useState } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

/**
 * Yearly roadmap: each workstream is a swimlane group and its multi-month
 * initiatives are the bars. The Backlog group ships with empty rows - the
 * toolbar button schedules the next one onto the timeline.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "platform",
    title: "Platform",
    children: [
      { id: "auth-revamp", title: "Auth Revamp" },
      { id: "api-v2", title: "API v2" },
    ],
  },
  {
    id: "growth",
    title: "Growth",
    children: [
      { id: "onboarding", title: "Onboarding Flow" },
      { id: "referrals", title: "Referral Program" },
    ],
  },
  {
    id: "design-system",
    title: "Design System",
    children: [
      { id: "tokens", title: "Design Tokens" },
      { id: "components", title: "Component Library" },
    ],
  },
  {
    id: "backlog",
    title: "Backlog",
    children: [
      { id: "search", title: "Search Revamp" },
      { id: "billing", title: "Billing v2" },
      { id: "mobile", title: "Mobile App" },
    ],
  },
]

/** Backlog initiatives, scheduled one per click in this order. */
const BACKLOG: Array<{ id: string; title: string; color: string }> = [
  { id: "search", title: "Search Revamp", color: "var(--color-rose-500)" },
  { id: "billing", title: "Billing v2", color: "var(--color-amber-500)" },
  { id: "mobile", title: "Mobile App", color: "var(--color-cyan-500)" },
]

/** Roadmap fixture - initiatives span months so the quarter axis has something
 *  to show, and offsets straddle today so both past and future are visible. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("auth-revamp", "Auth Revamp", -30, 60, "var(--color-blue-500)", 100),
    bar("api-v2", "API v2", 20, 90, "var(--color-sky-500)", 30),
    bar(
      "onboarding",
      "Onboarding Flow",
      -20,
      60,
      "var(--color-emerald-500)",
      80
    ),
    bar("referrals", "Referral Program", 50, 90, "var(--color-teal-500)", 0),
    bar("tokens", "Design Tokens", -60, 70, "var(--color-violet-500)", 100),
    bar(
      "components",
      "Component Library",
      0,
      120,
      "var(--color-purple-500)",
      45
    ),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  // How many backlog initiatives have been scheduled so far.
  const [scheduled, setScheduled] = useState(0)

  // Schedule the next unscheduled backlog initiative onto its (empty) row.
  // The "next" one is derived from the live events, not a captured counter,
  // so it stays correct even if the button is clicked in quick succession.
  const addInitiative = () => {
    const api = apiRef.current
    if (!api) return
    const scheduledIds = new Set(api.getEvents().map((event) => event.id))
    const index = BACKLOG.findIndex(
      (item) => !scheduledIds.has(`bar-${item.id}`)
    )
    if (index === -1) return
    const item = BACKLOG[index]
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    // Land the scheduled bars in the near-future part of the current quarter so
    // each one is visible the moment it drops onto its row.
    const start = addDays(week, 12 + index * 20)
    api.addEvent({
      id: `bar-${item.id}`,
      title: item.title,
      start,
      end: addDays(start, 24),
      allDay: true,
      color: item.color,
      resourceId: item.id,
    })
    setScheduled((count) => count + 1)
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="quarter"
            apiRef={apiRef}
            treePanel={{ width: 200 }}
            className="h-[480px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={addInitiative}
                  disabled={scheduled >= BACKLOG.length}
                >
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add to roadmap
                </Button>
              </GanttToolbar>
            </div>
            {/* Parent workstream rows carry no bars - summaryBars rolls up the
                child initiatives into one envelope on the group row. */}
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef } from "react"
import {
  Gantt,
  type GanttApi,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

/**
 * People-centric capacity board: rows are teammates grouped by squad, and
 * each teammate's bars are the week's assignments. The toolbar drops a fresh
 * assignment onto the next teammate, so a person can hold several at once.
 */
const RESOURCES: GanttResource[] = [
  {
    id: "product-squad",
    title: "Product Squad",
    children: [
      { id: "ada", title: "Ada Lovelace" },
      { id: "alan", title: "Alan Turing" },
    ],
  },
  {
    id: "design-squad",
    title: "Design Squad",
    children: [
      { id: "grace", title: "Grace Hopper" },
      { id: "linus", title: "Linus Torvalds" },
    ],
  },
]

/** Avatar photo + initials keyed by person id - GanttResource carries no
 *  custom fields, so per-row presentation data lives in a lookup of your own.
 *  The initials show while the image loads or if it fails. */
const resourceMeta: Record<string, { initials: string; avatar: string }> = {
  ada: {
    initials: "AL",
    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
  },
  alan: {
    initials: "AT",
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
  },
  grace: {
    initials: "GH",
    avatar: "https://randomuser.me/api/portraits/women/68.jpg",
  },
  linus: {
    initials: "LT",
    avatar: "https://randomuser.me/api/portraits/men/54.jpg",
  },
}

/** Teammates the new assignments cycle through, and a small pool to name and
 *  color them from. */
const PEOPLE = ["ada", "alan", "grace", "linus"]
const TASK_POOL = [
  { title: "Bug triage", color: "var(--color-amber-500)" },
  { title: "Code review", color: "var(--color-rose-500)" },
  { title: "Spec draft", color: "var(--color-teal-500)" },
  { title: "Pairing", color: "var(--color-indigo-500)" },
]

/** This-week assignments per teammate - day-precise bars for a capacity read
 *  (progress omitted; occupancy, not percent-done, is the point here). */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
  })

  return [
    bar("ada", "Checkout API", -1, 3, "var(--color-blue-500)"),
    bar("alan", "Search Indexing", 0, 3, "var(--color-sky-500)"),
    bar("grace", "Dashboard Redesign", 1, 3, "var(--color-violet-500)"),
    bar("linus", "Infra Migration", -2, 3, "var(--color-purple-500)"),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  // A ref (not state) counts the adds, so it advances synchronously and stays
  // correct even when the button is clicked several times in a row.
  const addedRef = useRef(0)

  // Add a 2-day assignment to the next teammate in rotation. Successive adds
  // to the same person overlap and stack into extra lanes on that row.
  const addAssignment = () => {
    const api = apiRef.current
    if (!api) return
    const n = addedRef.current++
    const person = PEOPLE[n % PEOPLE.length]
    const task = TASK_POOL[n % TASK_POOL.length]
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    const start = addDays(week, (n % 5) + 1)
    api.addEvent({
      id: `bar-extra-${n}`,
      title: task.title,
      start,
      end: addDays(start, 2),
      allDay: true,
      color: task.color,
      resourceId: person,
    })
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={RESOURCES}
            defaultScale="week"
            apiRef={apiRef}
            // Weekends shaded so booked working-day capacity is obvious.
            offDays={true}
            treePanel={{ width: 220 }}
            // People rows get an avatar label; group (squad) rows return
            // undefined to keep the default plain-title label.
            renderResourceLabel={({ resource, isGroup }) => {
              if (isGroup) return undefined
              const person = resourceMeta[resource.id]
              return (
                <span className="flex min-w-0 items-center gap-2">
                  <Avatar className="size-5">
                    <AvatarImage src={person?.avatar} alt={resource.title} />
                    <AvatarFallback className="text-[10px]">
                      {person?.initials ?? resource.title.charAt(0)}
                    </AvatarFallback>
                  </Avatar>
                  <span className="truncate">{resource.title}</span>
                </span>
              )
            }}
            className="h-[440px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button variant="outline" size="sm" onClick={addAssignment}>
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add assignment
                </Button>
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

"use client"

import { useMemo, useRef, useState } from "react"
import { Badge, type BadgeProps } from "@/components/reui/badge"
import {
  Gantt,
  type GanttApi,
  type GanttColumn,
} from "@/components/reui/gantt/gantt"
import {
  GanttNav,
  GanttToolbar,
} from "@/components/reui/gantt/gantt-nav"
import type {
  GanttEvent,
  GanttResource,
} from "@/components/reui/gantt/gantt-types"
import { GanttView } from "@/components/reui/gantt/gantt-view"
import { addDays, startOfDay, startOfWeek } from "date-fns"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { PlusIcon } from 'lucide-react'

type TaskMeta = { owner: string; status: string }

/** Owner headshots keyed by name. Missing entries (e.g. "Unassigned") fall
 *  back to initials, and the initials also show while the photo loads. */
const OWNER_AVATARS: Record<string, string> = {
  "Ada Lovelace": "https://randomuser.me/api/portraits/women/44.jpg",
  "Grace Hopper": "https://randomuser.me/api/portraits/women/68.jpg",
  "Alan Turing": "https://randomuser.me/api/portraits/men/32.jpg",
  "Linus Torvalds": "https://randomuser.me/api/portraits/men/54.jpg",
  "Katherine Johnson": "https://randomuser.me/api/portraits/women/90.jpg",
  "Margaret Hamilton": "https://randomuser.me/api/portraits/women/12.jpg",
}

/** First + last initial from an owner name, used as the avatar fallback -
 *  "Ada Lovelace" reads "AL", "Unassigned" reads "UN". */
function ownerInitials(name: string) {
  const parts = name.trim().split(/\s+/).filter(Boolean)
  if (parts.length === 0) return "?"
  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()
  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()
}

/** Status label -> ReUI badge light variant (green done, amber in progress,
 *  neutral not started). */
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
  Done: "success-light",
  "In progress": "warning-light",
  "Not started": "secondary",
}

/**
 * Status report: the left tree panel doubles as a task table with Owner and
 * Status columns beside each phase, every bar carries a progress fill, and the
 * timeline is drag-locked. New tasks are appended as rows from the toolbar.
 */
const INITIAL_RESOURCES: GanttResource[] = [
  {
    id: "planning",
    title: "Planning",
    children: [
      { id: "requirements", title: "Requirements" },
      { id: "design-phase", title: "Design" },
    ],
  },
  {
    id: "build",
    title: "Build",
    children: [
      { id: "frontend", title: "Frontend" },
      { id: "backend", title: "Backend" },
    ],
  },
  {
    id: "launch",
    title: "Launch",
    children: [
      { id: "qa", title: "QA & Testing" },
      { id: "rollout", title: "Rollout" },
    ],
  },
]

/** Owner + status per task, keyed by resource.id - GanttResource has no room
 *  for custom fields, so the extra column data lives in a lookup of your own. */
const INITIAL_META: Record<string, TaskMeta> = {
  requirements: { owner: "Ada Lovelace", status: "Done" },
  "design-phase": { owner: "Grace Hopper", status: "Done" },
  frontend: { owner: "Alan Turing", status: "In progress" },
  backend: { owner: "Linus Torvalds", status: "In progress" },
  qa: { owner: "Katherine Johnson", status: "Not started" },
  rollout: { owner: "Margaret Hamilton", status: "Not started" },
}

/** Status-report fixture - progress descends from finished planning to
 *  not-started launch, and the phases straddle today so the now-line falls
 *  mid-plan. Kept inside a month so every phase reads at a glance. */
function buildBars(anchor: Date): GanttEvent[] {
  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })
  const day = (dayOffset: number) => addDays(week, dayOffset)
  const bar = (
    resourceId: string,
    title: string,
    startOffset: number,
    days: number,
    color: string,
    progress?: number
  ): GanttEvent => ({
    id: `bar-${resourceId}`,
    title,
    start: day(startOffset),
    end: day(startOffset + days),
    allDay: true,
    color,
    resourceId,
    progress,
  })

  return [
    bar("requirements", "Requirements", -10, 8, "var(--color-blue-500)", 100),
    bar("design-phase", "Design", -8, 8, "var(--color-sky-500)", 100),
    bar("frontend", "Frontend", -2, 10, "var(--color-violet-500)", 60),
    bar("backend", "Backend", 0, 10, "var(--color-purple-500)", 45),
    bar("qa", "QA & Testing", 8, 8, "var(--color-amber-500)", 0),
    bar("rollout", "Rollout", 14, 5, "var(--color-emerald-500)", 0),
  ]
}

export function Pattern() {
  const bars = useMemo(() => buildBars(new Date()), [])
  const apiRef = useRef<GanttApi | null>(null)
  const [resources, setResources] = useState<GanttResource[]>(INITIAL_RESOURCES)
  const [meta, setMeta] = useState<Record<string, TaskMeta>>(INITIAL_META)
  // A ref (not state) numbers each appended task, so ids stay unique even when
  // the button is clicked several times before a re-render.
  const addedRef = useRef(0)

  // Extra tree-panel columns after the pinned name column. Built from meta so
  // appended rows pick up their Owner and Status; group rows return null.
  const columns = useMemo<GanttColumn[]>(
    () => [
      {
        id: "owner",
        title: "Owner",
        width: 130,
        align: "start",
        render: ({ resource, isGroup }) => {
          if (isGroup) return null
          const owner = meta[resource.id]?.owner
          if (!owner) return null
          return (
            <span className="flex min-w-0 items-center gap-2">
              <Avatar className="size-5 shrink-0">
                <AvatarImage src={OWNER_AVATARS[owner]} alt={owner} />
                <AvatarFallback className="text-[10px]">
                  {ownerInitials(owner)}
                </AvatarFallback>
              </Avatar>
              <span className="truncate">{owner}</span>
            </span>
          )
        },
      },
      {
        id: "status",
        title: "Status",
        width: 100,
        align: "start",
        render: ({ resource, isGroup }) => {
          if (isGroup) return null
          const status = meta[resource.id]?.status
          return status ? (
            <Badge variant={STATUS_VARIANT[status] ?? "secondary"} size="sm">
              {status}
            </Badge>
          ) : null
        },
      },
    ],
    [meta]
  )

  // Append a new task as its own row under the Launch phase, register its
  // Owner/Status, and drop a not-started bar on its row.
  const addTask = () => {
    const api = apiRef.current
    if (!api) return
    const n = ++addedRef.current
    const id = `task-${n}`
    setResources((prev) =>
      prev.map((group) =>
        group.id === "launch"
          ? {
              ...group,
              children: [
                ...(group.children ?? []),
                { id, title: `New task ${n}` },
              ],
            }
          : group
      )
    )
    setMeta((prev) => ({
      ...prev,
      [id]: { owner: "Unassigned", status: "Not started" },
    }))
    const week = startOfWeek(startOfDay(new Date()), { weekStartsOn: 0 })
    const start = addDays(week, (n % 6) - 2)
    api.addEvent({
      id: `bar-${id}`,
      title: `New task ${n}`,
      start,
      end: addDays(start, 5),
      allDay: true,
      color: "var(--color-slate-400)",
      resourceId: id,
      progress: 0,
    })
  }

  return (
    <div className="w-full p-4">
      <Card className="w-full py-0">
        <CardContent className="p-0">
          <Gantt
            defaultEvents={bars}
            resources={resources}
            defaultScale="month"
            apiRef={apiRef}
            // Read-only timeline: drag, resize and slot-select are off so the
            // plan can't be shifted by dragging; rows are added via the toolbar.
            defaultInteractions={{
              drag: false,
              resize: false,
              selectSlot: false,
            }}
            columns={columns}
            // Wider tree with a tighter name column so the Owner avatar,
            // owner name and Status all fit alongside the task names.
            treePanel={{ width: 400, nameColumnWidth: 150 }}
            className="h-[500px] w-full"
          >
            <div className="flex flex-wrap items-center gap-2 border-b pe-3">
              <GanttNav className="min-w-0 flex-1 border-b-0" />
              <GanttToolbar>
                <Button variant="outline" size="sm" onClick={addTask}>
                  <PlusIcon  className="size-4" aria-hidden="true" />
                  Add task
                </Button>
              </GanttToolbar>
            </div>
            <GanttView />
          </Gantt>
        </CardContent>
      </Card>
    </div>
  )
}

Shadcn Gantt

Installation

Usage

Shadcn Gantt Free Components

Shadcn Gantt Pro Blocks

Examples

Annual Product Roadmap

Team Capacity Schedule

Project Status Report

API Reference

Gantt

GanttNav

GanttNavToday

GanttNavPrev

GanttNavNext

GanttTitle

GanttScaleSwitcher

GanttDatePicker

GanttToolbar

GanttView

GanttBar

GanttEvent

GanttResource

GanttOccurrence

GanttSegment

GanttRecurrenceRule

GanttProposedUpdate

GanttUpdateResult

GanttSlotInfo

GanttSlotDraft

GanttSelection

GanttResourceReorder

GanttRangeInfo

GanttState

GanttDragState

GanttDataAdapter

GanttRenderEventProps

GanttColumnContext

GanttDragIndicatorProps

GanttScheduleHintProps

GanttSummaryProps

GanttApi

Hooks

Helpers

Recurrence

Config

State options

Callbacks and validators

View configuration

GanttInteractions

GanttOffDaysConfig

GanttTreePanelConfig

GanttColumn

GanttMetrics

GanttActivationConfig

GanttClassNames

Internationalization