UI Component Catalog

Production components rebuilt to match the dashboard reference.

6 JM
v6.2.0 Open Dashboard Reference Source of Truth•Dashboard Shell•Schedule-only design Ready for page rollout

Dashboard Reference System

Build every module from this catalog.

These components now render inside the same sidebar, topbar, panels, pills, shadows, spacing, and dark operational dashboard language used by dashboard-reference.html.

Blue Green Warning Purple Cyan Critical
▥
Metric Card18Operational KPI
✓
Success State92%Coverage healthy
⚠
Warning State5Needs action
◷
Time State12Upcoming items
▣
Draft State3Unpublished

＋ Buttons & Command Bars

Rules
Primary Action
Schedule Builder Command bars sit above dense work areas.

▥ Cards, Alerts & Empty States

Next
Info Card Coverage Rule

Use for settings summaries, non-table context, and workflow explanation.

Action Card Run Validation

Use when the card performs or starts a focused action.

Success Alert Schedule published

Use after completed safe actions.

Warning Alert Coverage gap detected

Use for unresolved conflicts or setup gaps.

No matching records

Use empty states to explain what happened and provide one clear recovery action.

☷ Forms & Filters

Next

🔔 Notification Components

Open Center
▱

Pending Approval

Use for requests, trades, profile edits, and supervisor review queues.

Normal
⚠

Coverage Warning

Use for minimum staffing warnings and operational bypass notices.

High
☷

Open Shift

Use for VOT opportunities, eligibility notices, and deadline reminders.

Eligible
Drawer Pattern6

▤ Tables

Modal
EmployeeAssignmentStatusUpdated
Jordan MillerDispatch 1ActiveToday
Avery BrooksTrainingPendingYesterday
Morgan HayesOpen ShiftReviewThis week

v6.2.0

Employee workspace components

Reusable directory cards, profile metadata blocks, status pills, qualification badges, and activity timeline components.

JM

Jordan Miller

Dispatcher II • Shift B

ActiveEMDInstructor
SupervisorEmily Carter
AssignmentConsole 3

Operations Components

Open Operations Workspace →
Coverage warnings2Reusable dashboard intelligence metric

Conflict warning

Qualification issue

Selected employee lacks required certification.

Assignment chips

EligibleOT watchOpen

Scheduling Engine Components

Open Scheduling Engine →
Candidate score94%Reusable best-fit assignment score.
Coverage gap3Coverage engine summary tile.
Recommended fill

Eligible, qualified, and lowest rotation impact.

Best fit
Validation warning

Overtime advisory requires supervisor review.

Review

Schedule Builder Components

Open builder
Assignment boardGridShift rows, post columns, open gaps, blocked assignments, and ready assignments.
Validation panelLiveBlocking conflicts, warnings, and passing checks rendered alongside the draft.
Recommendation panelRankedEmployee recommendations scored by availability, qualifications, overtime, and rotation.
Coverage panelImpactMinimum staffing, overstaffing, open positions, and publish readiness.