Patterns
Not a component reference — for one control's API, use the component docs instead. This is every full ERP screen this framework documents, grouped the way a working day actually runs: find something, work one record, correct data, clear a queue, monitor what ran. Every tile's text is generated from its pattern page's own opener, complexity badge and Components-used list, so it cannot drift from the page it describes. Tiles whose screens read at this size also carry a live miniature — a small, inert composition of the same shipped CSS, not an image — while dense screens stay text-only on purpose: a list-report shrunk to a tile is grey noise. Within each group, tiles order simplest first.
enter & find
Who uses it: every user, before anything else — the first screen and, for anyone who forgets a password, a recurring one.…
FormsButtonAlerts
Who uses it: every user, eventually — a stale bookmark, a link shared before a record moved, a permission that changed since yesterday,…
StateButton
Who uses it: everyone, on every screen, before they can do anything else.…
SkeletonStateData table
Who uses it: anyone opening the suite, every session — the first screen after sign-in.…
App shell & gridCardsBadge
Who uses it: power users who know what they want — a dispatcher jumping to PO-88213, a controller running "post period" — without…
DialogComboboxKbdButton
Who uses it: everyone, on every screen — the persistent chrome the whole suite lives inside. How often: it never leaves the screen.…
App shellNavbar & sidebarDropdownButtonBadgeAvatarForm controls
Who uses it: anyone whose work spans modules — a controller touching Finance and Purchasing, an ops lead across Warehouse and Reports;…
App shellSidebar navWidgetsBadgeAvatar
Who uses it: every named role — a buyer, an approver, a warehouse supervisor — each seeing their own version.…
DashboardProgressBadgeBylineButton
Who uses it: AP clerks, all day — the screen they live in.…
Data tableButtonPaginationFiltersBadgeForms
The filter set that outgrew the bar.…
Filter barDropdownChipsData tableForm controls
Who uses it: anyone typing a code they cannot remember — a buyer picking a material out of forty thousand, a clerk choosing a cost…
DialogFiltersData tablePaginationStateForms
work one record
Who uses it: whoever owns this record, checking its status or adding to its history — a buyer, an approver, anyone who clicked in from a…
Key-value factsCardsTimeline & auditByline
M2 of the four data-maintenance patterns (and the most common one in practice): a list of records, and clicking a row opens that…
Data tableCardDialogDrawersKey-value factsBadge
Who uses it: whoever owns the record — a buyer editing a PO, an admin fixing vendor details; occasional, high-stakes edits where losing…
FormsEditable gridValidation summaryCalendarInline editingMoney
A long record, navigated in sections instead of scrolled as one feed.…
WidgetKvBadgeAmountPaginationButtonData tableTimeline
enter & correct data
| Criterion | Acme | Vertex |
|---|---|---|
| Unit price $ | 770.00 | 803.00 |
| Lead time | 14 | 9 |
Who uses it: whoever must choose one of several candidates on stated criteria — a buyer awarding an RFQ, an analyst picking a vendor, a…
Data tableForm controlsBadgeButton
Who uses it: anyone filling a form with more than a couple of required fields — worth it the moment a reader could miss which field failed.…
AlertsFormsinitValidationSummary()Detail form
- ✓Header
- ✓Lines
- 3Approvers
- 4Review
Who uses it: whoever is creating something too long for one screen, guided rather than dropped into a form — most often a first-time or…
StepperFormsButtonValidation summary
Who uses it: whoever maintains data in bulk — an uploaded file, an interface run, a mass posting.…
Data tableAlertsBadge
Who uses it: whoever must prove two independent records agree — an accountant clearing the bank statement against the ledger, AP…
Data tableBadgeAmountButton
Who uses it: anyone who books time — a consultant, a field engineer, a project team member.…
Data tableForm controlsBadgeButton
Who uses it: whoever enters or corrects line items — a buyer building a PO, a warehouse clerk keying a pick list.…
Data tableMoney fieldQuantityComboboxTag input
decide & clear queues
Who uses it: every ERP user, first thing — the screen a working day starts on. How often: continuously; it is the tab that stays open.…
Data tableSegmented controlBadgeButtonKey-value facts
- ✓SubmittedR. Vance
- ●Cost-center approvalwaiting on M. Okafor
- 3Finance release
Who uses it: an approver named in the chain — a manager, a cost-centre owner, finance.…
Timeline & auditBadge
Who uses it: an AP clerk clearing a queue — select many, act once.…
Data tableToolbarAlertsBadgePermissions
Who uses it: whoever needs to see WHERE a batch of things stands, all at once — a production planner watching orders move through…
Dashboard & widgetsDropdownBadgeFormsByline
monitor & output
Who uses it: a manager checking whether this period's AP activity is on track and where the exceptions are.…
Dashboard & cardsGridContainer queries
Who uses it: whoever must answer a specific question with numbers — an accountant at close, a buyer checking open commitments.…
FormsData tableBylineButtonKeyboard key
Who uses it: nobody, on screen — this is the artefact the ERP emits: a purchase order sent to a vendor, an invoice, a delivery note…
Data tableKey-value factsPrint utilities
Who uses it: anyone whose work finishes while they are not watching — a posting run, an export, an approval granted upstream.…
AlertsDropdownBadgeBylineButton
Who uses it: whoever is accountable when unattended work fails — an integrations admin, an ops lead, the person the inbox assigned an…
Data tableBadgeButton
A planner or supervisor scans a month for what is booked — deliveries, maintenance windows, shift cover — several times a day during a…
CalendarCardData tableBadge
Who uses it: a workspace admin, occasionally a first-time setup wizard. How often: rarely per person, but every workspace has one.…
FormsTabs
RF / rugged devices
Who uses it: a warehouse floor worker, first screen after signing into the handheld — every RF shift starts here.…
Dashboard (widget grid)BadgeDensity (spacious)
Who uses it: a warehouse floor worker after picking a task from the RF task menu — "what's next" for that task type.…
Data tableBadgeDensity (spacious)
Who uses it: a picker with a gun in one hand and the other on the rack — the highest-volume RF activity in any warehouse.…
Key-value factsScan feedbackQuantityButtonForm controls
Who uses it: whoever moves what receiving just accepted into its storage bin — the second half of every inbound delivery.…
Key-value factsScan feedbackBadgeButton
Who uses it: whoever walks the aisles for a physical inventory or a cycle count.…
Key-value factsScan feedbackQuantityButton
Who uses it: a warehouse floor worker, one-handed and often gloved, holding a scanner instead of a mouse.…
Scan feedbackQuantityData tableDensity (spacious)