Bay utilisation+9%
86%
Data display operations system
Dark-first primitives for the workshop surfaces that carry real work: supplier ledgers, bay queues, KPI bands, status badges, comparison matrices, activity streams, and media evidence.
Production answer
Data display operations system is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Data display operations system states
Generative search brief
Data display operations system: Dark-first primitives for the workshop surfaces that carry real work: supplier ledgers, bay queues, KPI bands, status badges, comparison matrices, activity streams, and media evidence.
Workshop data stack
From single row to control room
The data-display family is organised by operational job instead of component shape. Each primitive has a live route, a domain example, and a clear integration path for badges, chips, progress meters, stats, and state handling.
- Primitive surfaces
- 11readyfull set
- Operational examples
- 34mapped+12
- State patterns
- 6coveredempty/load/fault
Quote backlog3 due
14jobs
Parts fill rate+4%
92%
Primitive ecosystem
Every route renders at full scale with Oak Flats domain data. The index below calls out the operational example, expected composition pattern, and readiness state.
PrimitiveOperational exampleComposition patternState
01Data tableGeneric typed table with sortable column heads, sticky header, zebra rows, density modes, and row selection.Supplier ledger, job queue, invoice runsRows + controls + status cellsLive02Dashboard cardKPI tile with icon, big value, delta chip, sparkline slot, and footer link across glass / neuo / material surfaces.Today revenue, bay utilisation, SLA riskKPI + delta + spark slotComposable03Metric blockInline dl trio for dense dashboards — label, value, delta — joined as a single bordered band.Open jobs, gross margin, parts fill rateDense summary bandComposable04Activity feedVertical timeline with tone-tinted dots, actor avatar, timestamp, and live polite aria region.Quote approvals, bay handoffs, supplier syncsTimeline + actor + toneLive05Notification inboxThree-tab inbox panel (unread / all / mentions) with status icons, dismiss actions, and footer mark-all-read.Exceptions, mentions, system alertsTabbed stream + actionsLive06Status badge gridCatalogue of every badge style (info / success / warn / error / neutral / brand) at three sizes and three shapes.Booked, complete, on hold, recalledTone + size + shapeReference07Live counter cardAnimated count-up large value with live pulse pill, descriptive subhead, and trailing sparkline.Calls answered, active jobs, quote velocityLive value + trendLive08Comparison tablePlan comparison with multi-column header, popular-column emphasis, ribbon, and check/cross/dot indicators.Service plans, warranty coverage, supplier termsMatrix + indicatorsReference09Pricing tier cardSingle tier card with feature list, currency-aware price, optional highlight ribbon, and primary CTA.Fleet service tiers, care plansOffer + feature listComposable10Kanban boardFour-column board (backlog / progress / review / done) with priority dot, tag chips, and avatar stack.Workshop bays, quote approvals, parts intakeStage columns + cardsLive11Media trayHorizontal snap scroller of figures with hover scale, overlay tag, and figcaption metadata.Vehicle proof shots, install referencesMedia rail + metadataComposableHow the primitives work together
Live
Workshop control room
DashboardCard + MetricBlock + ActivityFeed
Manager sees live bay utilisation, quote risk, and latest handoffs.
Watch
Supplier operations
DataTable + StatusBadge + progress cells
Parts buyers compare spend, fulfilment, risk, and overdue orders.
Sales
Customer plan compare
ComparisonTable + PricingTierCard + badges
Service advisers explain fleet care tiers without custom markup.
Review
Install evidence
MediaTray + ActivityFeed + NotificationInbox
Proof shots, customer approvals, and exception alerts stay together.