F1 component kit/Grids and schedules/GanttDesktop

Gantt

Missing · new34 · gantt

Built in the kit on CSS grid (no library): order ID · customer name · factory (codes, no location — FEEDBACK-B-r1 A07), bars in the real phase colours, red due markers, a today line in steel, weekends shaded, hover detail. Fed by the computed gantt-grid.

Covers: M03. Exports: Gantt.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default · October

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
row hover + detail

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
factory filter

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
loading

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
no orders due

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
中文 · lang=zh-Hans

本月到期

手机：相同订单的到期列表。
4528 · J. Okafor— · 截止 25 Oct●
4525 · A. Fitzwilliam-HartFRR · 截止 30 Oct●
4522 · D. HaugenFRR · 截止 27 Oct●
4521 · S. ChenFRR, FX · 截止 26 Oct●
4519 · L. MoreauFRR · 截止 25 Oct●

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Due this month

Phone: the same orders as a due-date list.
4528 · J. Okafor— · due 25 Oct●
4525 · A. Fitzwilliam-HartFRR · due 30 Oct●
4522 · D. HaugenFRR · due 27 Oct●
4521 · S. ChenFRR, FX · due 26 Oct●
4519 · L. MoreauFRR · due 25 Oct●
permission denied

Not available to your role

Your role is missing view gantt. Nothing here is hidden by mistake: the server sends only what you can do.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
Gantt · @rj/admin-kit
Props
month · year · rows {orderId, customer, factories, segments[{phase, from, to}], due} · legend · onRow
States
loading · ready · hover · filtered · empty · denied
shadcn / Radix
Tooltip + Sheet (drill)
Package underneath
in-kit CSS grid + @tanstack/react-virtual (fallback @svar-ui/react-gantt, MIT core)
Accessibility
each row is a button naming order, customer, phase and due date; the grid has a table alternative
API operations
admin.orders.gantt · admin.orders.gantt-grid (month, year) · admin.orders.gantt.status-legend · admin.orders.gantt-detail
Phone variant
due-date list