Patterns catalogue

Adopted #01⌘K command palette

One box that jumps to any page, order or retailer, and runs actions.

Helper: H04 · CommandPalette · ComboboxPhone demo

Adopted #02Find order, always in the header

Type an order number, customer or retailer from any page.

Helper: none · AppShell (header) · CommandPalettePhone demo

Adopted #03Keyboard shortcuts + “?” cheat sheet

j / k move rows, x selects, e edits, ? shows the list.

Helper: none · DataTable · AppShellPhone demo

Adopted #04Recently viewed + pinned records

A strip of the last records you opened; pin the ones you keep going back to.

Helper: H01 · CommandPalette (Recent) · AppShellPhone demo

Adopted #05Saved views & column presets

Save a filter + columns as your own tab.

Helper: H01 · SavedViews · FilterBar · ColumnChooserPhone demo

Adopted #06Filter chips that live in the URL

Every filter is a removable chip, and the link reproduces the list.

Helper: none · FilterBar · PaginationPhone demo

Adopted #07Job tray in the corner

Exports, imports, print runs and vision re-runs keep running while you work.

Helper: none · JobsButton · JobsDropdown · JobRow · JobsSheet · JobToastPhone demo

Adopted #08Bulk action bar with batch progress

Select many rows, act once; big selections go in batches of 100.

Helper: H16 (dry-run improves it) · BulkBar · DataTablePhone demo

Adopted #09Prepare → open PDF, with cloud-print status

Print buttons show “preparing…”, then open the PDF in a new tab.

Helper: none · DocumentLink · PrintJobStatusPhone demo

Adopted #10Peek side-sheet (and pin to split view)

Open a record in a panel over the list; pin it to keep list and record side by side.

Helper: none · SplitPane · RecordHeaderPhone demo

Adopted #11Hover cards

Rest on a retailer or order name to see the key facts, no click.

Helper: none · ColumnTypes · RecordHeaderPhone demo

Adopted #12Copy any ID in one click

Order numbers, fabric codes, batch IDs copy with one click.

Helper: none · ColumnTypes · RecordHeaderPhone demo

Adopted #13Activity side panel

Who changed what and when, before → after, on every record.

Helper: H02 · Timeline · AuditRow · DiffViewerPhone demo

Adopted #14Empty states that offer the next step

An empty list says why, and gives the one button that fixes it.

Helper: none · EmptyState · ErrorState · NotAvailablePhone demo

Adopted #15Density switch

Compact (30px rows) for big tables, comfortable for reading.

Helper: H01 · AppShell (toolbar) · DataTablePhone demo

Adopted #16Inline edit with an undo toast

Change a value in place; it saves, and “Undo” stays on screen.

Helper: none · InlineEditCell · DataTablePhone demo

Adopted #17“Someone else changed this” banner

If a colleague saved first, you see what changed and choose.

Helper: H03 · SaveBar · Banner · MeasurementGrid · DiffViewerPhone demo

Adopted #18Confirmation ladder (typed for the scary ones)

Plain confirm, then confirm with consequences, then type the words.

Helper: none · ConfirmDialog · MoneyInputPhone demo

Adopted #19Floating “unsaved changes” bar

A dark bar slides up: how many changes, Save, Discard.

Helper: none · SaveBar · UnsavedGuard · FormSectionPhone demo

Adopted #20Live / stale / offline banner

A quiet dot says the list is live; if the connection drops, it says so.

Helper: none · Banner · AppShellPhone demo

Adopted #21Times in my timezone, both on hover

“3 h ago” in the list; hover shows the exact time in your zone and UTC.

Helper: none · DateTime · ClockButton · TimezoneSelectPhone demo

Adopted #22English / 中文 switch

Each person picks their language; menu, labels and dates follow.

Helper: none · LocaleToggle · BilingualFieldPhone demo

Adopted #23Motion set

Page change, sheet open, row expand, toast, progress: each with one crisp timing.

Helper: none · tokens.css motion tokens (every overlay)Phone demo

Adopted #24Skeleton loading

The table's shape appears at once, then fills in; no blank screen.

Helper: none · DataTable (loading) · statesPhone demo

Parked #01Who else is here (presence + soft edit lock)

Avatars on a record show who is viewing or editing it; a field someone is editing shows their name.

Helper: H07 (H03 hard guard) · RecordHeader · Banner · SaveBarPhone demo

Parked #02Comments and @mentions on any record

A thread on every order, retailer, design or fabric code; @name notifies.

Helper: H10, H08 · Thread · Combobox (@mention)Phone demo

Parked #03Watch a record → notification inbox

Follow an order, ticket or container; every status change lands in one inbox.

Helper: H11 · NotificationCentre · RecordHeaderPhone demo

Parked #04While you were away (shift hand-over digest)

When London logs in, one card says what Shanghai changed on the orders they follow.

Helper: H12 (H11, H02) · NotificationCentre · TimelinePhone demo

Adopted #05One search across everything

Orders, retailers, fabric codes, tickets and designs from one box: the header search bar / ⌘K.

Frank: Frank: "I thought you'd give me that in the search bar anyway, a really cool search bar." Delivered inside the header search bar / ⌘K, not as a separate page.

Helper: H04 · CommandPalette · Combobox · AppShell (header search)Phone demo

Parked #06Say it in ⌘K (“hold RJ-84213”, “stuck in QC > 5 days”)

Type a sentence; ⌘K turns it into a filter you can open or an action you confirm.

Helper: H05 (H04, H09) · CommandPalettePhone demo

Parked #07Do that again (⌘.)

After holding one order with a reason, ⌘. repeats the same action on the next.

Helper: none · CommandPalette · JobToastPhone demo

Adopted #08My home: pinned numbers

Pin the counts you care about (my on-hold orders, QC late) on your own home.

Helper: H01, H06 · KpiTile · SortableList · FilterBarPhone demo

Parked #09Stuck-in-phase timers

Every order row shows how long it has sat in its phase against the target.

Helper: H09 · DataTable · ColumnTypes · KpiTilePhone demo

Parked #10Why is this order here?

One plain-language timeline: what put the order in this state.

Helper: H13 (H09) · Timeline · RecordHeaderPhone demo

Parked #11Time-travel a record (scrub, diff, restore one value)

Drag back through a record's history, see each change, restore one value.

Helper: H02, H14 · Timeline · DiffViewerPhone demo

Parked #12Do it later (scheduled actions)

“Release this hold at 09:00 Shanghai”: pick a time in any zone.

Helper: H15 · CronBuilder · DateTimePhone demo

Adopted #13See the impact before a bulk write

Every bulk action shows “288 will change, 24 already set, 3 skipped” before you confirm.

Helper: H16 · BulkBar · ConfirmDialogPhone demo

Adopted #14Undo a whole bulk run (10-minute window)

After a bulk change, one button puts every row back the way it was.

Helper: H17 (own before-values; H02 optional) · BulkBar · JobToast · JobRow · TimelinePhone demo

Parked #15Second approver for money (maker–checker)

Wallet credits over a limit, voids and revoke-all wait for a second person.

Helper: H18 · ConfirmDialog · MoneyInput · TimelinePhone demo

Parked #16See the admin as someone else's role

A super admin previews the menu and buttons exactly as a support user sees them.

Helper: H20 · AppShell · BannerPhone demo

Adopted #17Paste from Excel into a grid

Paste 50 rows straight from a sheet; every cell is checked before anything is saved.

Helper: H21 · ImportFlow · ReviewStep · MatrixEditorPhone demo

Maybe #18Import remembers your column mapping

The second time you import a sheet with the same headers, the mapping is already done.

Frank: Cool, use case unconfirmed (Frank).

Helper: H01 · ImportFlowPhone demo

Maybe #19Trends inside the table

A tiny 12-week line next to each retailer (orders) and factory (QC).

Frank: Cool, use case unconfirmed (Frank).

Helper: H22 · ColumnTypes (sparkline) · ChartFramePhone demo

Maybe #20Compare two records side by side

Pick two designs, two retailers' pricing or two orders' measurements and see the differences.

Frank: Cool, use case unconfirmed (Frank).

Helper: none · DiffViewer · SplitPanePhone demo

Adopted #21Totals for the filtered set

A strip under the filters counts the whole filtered set by status, express, factory.

Frank: Frank: "very useful".

Helper: H06 · FilterBar · KpiTile · DataTablePhone demo

Parked #22Scan the QR to open it

Point the phone at an order or accessory QR label and the record opens.

Frank: Frank: exciting tech, needs a clear use case: who and for what.

Helper: H23 · QrDisplayPhone demo

Parked #23Keeps working when Wi-Fi drops

QC ticks and verdicts made offline wait in a queue and send when the connection returns.

Frank: Frank: "we don't need it".

Helper: H24 (H03) · Banner · JobToastPhone demo

Parked #24Swipe photo verdicts

Flagged vision-check photos one at a time: swipe right PASS, left FAIL.

Helper: none · PhotoReview · VerdictButtonPhone demo

Parked #25Ping me when it's done

Start an export or print run, close the tab; your device pings when it finishes.

Frank: Frank: more for a consumer app.

Helper: H25 · JobToast · NotificationCentrePhone demo

Parked #26Ticket summary + suggested next step

Long tickets open with a 3-line summary and one suggested action.

Helper: H26 · Thread · AiSuggestPhone demo

Parked #27Anomaly flags on orders

Small flags where something looks off, such as a chest measurement far from the norm.

Helper: H19 (H09) · Banner · DataTable · ColumnTypesPhone demo

Parked #28Health strip for super admins

One thin line: jobs waiting, jobs failed, late scheduled tasks.

Helper: H27 · KpiTile · AppShellPhone demo

Parked #29Out of stock? Closest cloths in stock

When a cloth is out, show the three nearest in-stock cloths.

Helper: H28 · ClothPicker · SwatchPickerPhone demo