Live specimens of the patterns used across CargoHub: navigation, registers, records, feedback and states. Each one uses the real classes, so what you see here is what ships.
Built with ph(crumb, title, sub, actions, extra). Every page uses it.
Every bilty booked across branches, with payment basis, load and dispatch status. 3
The reg() scaffold: filter chips, search, sort, density, bulk bar. Sort a column, switch density, tick rows.
recordPage(): a header with status, tabs on the left, a summary rail on the right. The tabs are live.
Nishat Mills Ltd → Amreli Steels
Every list and widget has all five. Refresh the stale card to see the skeleton.
Book the first consignment. It shows up here with its GR number.
Reversible actions ask once and offer Undo. Actions that can’t be reversed need a typed reason and never offer Undo.
What people see when their role can’t do something. decorateLocks() applies this to real buttons.
Shown under the top bar when CargoHub pauses a workspace. Write actions are locked automatically.
toast(msg, kind, {undo}). Bottom-right on desktop. Inside the phone in the driver app.
A phone mock. Documents, filters and actions open from the bottom, within thumb reach. 48 dp targets.
Hover a GR, vehicle or trip link for 380 ms in the app to see a summary without leaving the page.
flowStrip(kind, record). It shows where a record is in order-to-cash, procure-to-pay or warehouse, and the next step.