F1 component kit/Actions and confirmation/Record header and action modelPhone

Record header and action model

F1 variant24 · record-header

Order detail's action model (flagship D01): one dark next-step button by status (Assembly ▾ for Ready For Fulfilment …), a Cloud print ▾ split (Cloud: Order bill / Shirt code · Open PDF: Mark-Up / Order / Shirt Tag / QC Tag), Edit, Raise issue (holds live here), and ⋯ grouped by intent. 4–5 controls instead of 8–10; no Hold button. Front matter, ten tabs, a sticky compact header on scroll.

Covers: record-header primitive, record-header designer. Exports: RecordHeader, SplitButton.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

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

Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity

States

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

Manufacturing · Cloud print is the dark button
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
Ready For Fulfilment · Assembly ▾ next step
Orders · Active

Order #4521

Ready For FulfilmentReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
Cloud print ▾ open
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
Cloud print → Shanghai
Order bill2 groups
Shirt code
Open PDF
Mark-Up
Order
Shirt Tag
QC Tag
Order print jobs
⋯ open · grouped by intent
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
Send
Cloud Order
Check
QC photos
Express
FitQ Transform
Undo FitQ
Status proposal
Put on hold without a ticketAPI only
Void order
action running
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
scrolled · sticky compact

Order #4521

ManufacturingS. Chen · Atelier North
Scrolled: the header compacts to one line and sticks under the top bar; actions stay.
loading skeleton

Order #4521

OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
comfortable · data-density=comfortable
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity

English · 中文

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

en
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
中文 · lang=zh-Hans
订单 · 进行中

Order #4521

Manufacturing回头单
创建于 9 Oct 2026 21:02·S. Chen·4521
零售商Atelier North#312 · 以 USD 结算
客户S. ChenSan Francisco
创建9 Oct 21:02零售商 App
付款10 Oct 09:15钱包
开始生产13 Oct 14:40FX · FRR · HF F3.5
状态变更17 Oct 17:31自 Build
概览服装3款式18尺寸3生产价格DR备注2照片6问题1动态

Long string · permission denied

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

long string
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerThe Cambridge Gentleman's Outfitters · Trumpington Street#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
permission denied
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
Not available to your roleSupport role: hidden because they need edit orders · print orders · settle_order_dr/cr_discrepancy orders. Ask a full admin to grant it.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity
DTC admin · data-theme=dtc
Orders · Active

Order #4521

ManufacturingReturning
created 9 Oct 2026 21:02·S. Chen·4521
RetailerAtelier North#312 · settles in USD
CustomerS. ChenSan Francisco
Created9 Oct 21:02by retailer app
Paid10 Oct 09:15Wallet
In production since13 Oct 14:40FX · FRR · HF F3.5
Status changed17 Oct 17:31from Build
OverviewGarments3Designs18Measurements3ProductionPricingDRNotes2Photos6Issues1Activity

Contract

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

Export
RecordHeader · @rj/admin-kit
Props
title · status · badges · sub · facts[] · actions {next, split[], secondary[], overflow: {group, items[]}[]} · tabs · sticky
Variants
full · sticky compact
States
loading · ready · action-busy · denied (actions absent) · long title
shadcn / Radix
DropdownMenu (split + ⋯) · Tabs · Tooltip
Package underneath
nuqs (active tab)
Accessibility
h1 is the record id; split button = two buttons (action + menu) with distinct labels; destructive items last
API operations
admin.orders.show · admin.orders.cloud-print · admin.orders.print-url → admin.signed.orders.print · admin.orders.void (draft / awaiting payment / RFF)
Phone variant
status + facts + scrollable tab chips + Cloud print / Raise issue in thumb reach
Permission
each action renders only with its permission (edit orders, print orders, settle…)
Export
SplitButton · @rj/admin-kit
Props
primary · items (grouped)
shadcn / Radix
Button + DropdownMenu
Accessibility
aria-haspopup=menu on the chevron