React Operations Dashboard

A complete dashboard page block: header with environment badge and time-range switch, a KPI strip with monospaced values and signed deltas, a work-in-progress table, and a subsystem status rail. One bordered surface, hairline dividers, no shadows — the way MES, SCADA, and fab-monitoring screens are actually built. Copy the block and replace the demo data with your own source.

Fab 2 — Operations

PROD
Wafer Yield
94.2%+1.8%
Lots Completed
38+4
Equipment Uptime
99.97%±0.0%
Scrap Rate
0.41%-0.07%
LotStageToolETAStatus
LOT-24A118Metal 2 EtchETCH-0402:10In line
LOT-24A121CMP OxideCMP-0204:35In line
LOT-24A104Implant WellIMP-01—Hold
LOT-24A097Final TestTST-1100:20In line
LOT-24A089Wafer SortSRT-03doneComplete

Installation

npx shadcn@latest add dashboard.json

Structure

The block is one <section> with four regions, each easy to detach:

  1. Header — title, environment badge (PROD), last-updated stamp, 24h / 7d / 30d range tabs (the demo switches KPI data per range).
  2. KPI strip — a divide-x grid of stat tiles; values in mono with tabular numerals so refreshes don't shift layout.
  3. WIP table — lot, stage, tool, ETA, and a dot-plus-label status badge per row.
  4. Status rail — subsystem list with LED dots and mono state codes.

For standalone pieces, see Metric Card, Data Table, and Status Indicator.

Design notes

  • One surface — regions are separated by hairline borders, not nested cards; density reads as competence in operations software.
  • State is never color-alone — every status pairs a dot with text; deltas carry their sign.
  • Light-first — designed on white; the dark theme derives from the same tokens.