Page frame and shell
The permission-shaped shell built from GET /admin/me/menu: the white RJ HQ corner, a 76px navy rail with the server's label under every icon (wraps to two lines, never shortened), T-a accordion when expanded, T-b / T-d flyouts when collapsed, T-f breadcrumb dropdown, and the header right side (Find order · Jobs · bell · globe · clock).
Covers: page-frame primitive, sidebar designer, menu-item designer, top-bar designer, tab-bar designer. Exports: AppShell, RailItem, Flyout, CrumbSwitcher.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
States
9 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
default · collapsed rail, Orders
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
rail item hover
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
T-d mega flyout (Materials, 13 links)
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
Materials13 pages · grouping illustrative
CodesGuideMaterial setupMaterial TypesUnits of MeasureSystem Values
ComponentsAttributes & RulesComponent Default RulesComponent ListComponent ClassesPT Colours
CatalogueLiningsAccessoriesSpecial Handling
Hover ~140 ms or click; ↑↓ moves, → opens, Esc closes
T-f breadcrumb ▾ (siblings)
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
Orders4 pages
V2Order Print JobsCompletedMeasurement Check
Jobs open · 600px, right edge on the button
Find order/33
314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR | |
| 4521 | S. Chen | Atelier North | Manufacturing | FRR, FX | |
| 4519Plus Size re-check | L. Moreau | Brightwater Bespoke | Manufacturing | FRR |
bell open · 520px
Find order/333
14:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR | |
| 4521 | S. Chen | Atelier North | Manufacturing | FRR, FX | |
| 4519Plus Size re-check | L. Moreau | Brightwater Bespoke | Manufacturing | FRR |
expanded 232px · T-a accordion
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
loading /me + /me/menu
Find order/41314:32 · UTC+8
session expired (Clerk)
Find order/14:32 · UTC+8
Your session has expired
You were signed out after 12 hours. Sign in again with Clerk; this page reopens where you were.
Density
Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
compact · default · data-density=compact
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
comfortable · data-density=comfortable
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
en
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
中文 · lang=zh-Hans
查找订单/41314:32 · UTC+8
订单号或客户名/
| 订单号 | 客户 | 零售商 | 状态 | 工厂 | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | 可以下单 | — | |
| 4527 | R. Lindqvist | Atelier North | 可以下单 | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | 可以下单 | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
long string
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — |
permission denied
Find order/41314:32 · UTC+8
Not available to your role
Your role is missing view pricing. Nothing here is hidden by mistake: the server sends only what you can do.
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
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
DTC admin · data-theme=dtc
Find order/41314:32 · UTC+8
Order number or customer name/
| Order # | Customer | Retailer | Status | Factory | |
|---|---|---|---|---|---|
| 4528 | J. Okafor | Harrow & Vale | Ready For Fulfilment | — | |
| 4527 | R. Lindqvist | Atelier North | Ready For Fulfilment | — | |
| 4526 | 王 先生 | 杭州云裳高级定制 | Ready For Fulfilment | — | |
| 4525R | A. Fitzwilliam-Hart | The Cambridge Gentleman's Outfitters | Build | FRR | |
| 4523 | M. Brennan | Kestrel Tailoring | On Hold | FRR | |
| 4522 | D. Haugen | Atelier North | Manufacturing | FRR |
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
AppShell·@rj/admin-kit- Props
me(GET /admin/me) ·menu(GET /admin/me/menu: sections[].items[] key, label, path, type, badge, disabled, children) ·collapsed(⌘B, persisted) ·crumbs·headerRight- Variants
- collapsed (76px labelled rail) · expanded (232px)
- States
- loading · ready · signed-out · session-expired · menu-error
- shadcn / Radix
- Collapsible · Tooltip · DropdownMenu (crumbs) · Sheet (phone drawer)
- Package underneath
- @clerk/nextjs · @tanstack/react-query (useMe) · next-intl · lucide-react
- Accessibility
navlandmarks; rail items are links with the full label as accessible name; ⌘B toggles; focus returns to the toggle- API operations
- admin.me.show · admin.me.menu
- Phone variant
PhoneShell: app bar (menu · title · search · jobs · bell) + bottom bar of 3–5 permitted tabs + drawer accordion- Permission
- renders only what /me/menu returns; nothing is filtered client-side
- Export
RailItem·@rj/admin-kit- Props
item(menu node) ·active·badge- States
- default · hover · active · disabled (menu
disabled) · badge - shadcn / Radix
- Tooltip (collapsed)
- Package underneath
- lucide-react (stroke 1.5)
- Accessibility
- label always visible; aria-current=page
- Export
Flyout·@rj/admin-kit- Props
node·depth2|3 ·openDelay140ms- Variants
- T-b (one column) · T-d mega (level-2 headings over level-3 links, 1–3 columns)
- shadcn / Radix
- HoverCard-like Popover with click + keyboard twins
- Accessibility
- → opens, ← / Esc closes, ↑↓ moves
- Export
CrumbSwitcher·@rj/admin-kit- Props
siblingsfrom the parent menu node- Variants
- T-f
- shadcn / Radix
- DropdownMenu
- Accessibility
- the crumb is a button with aria-haspopup=menu