Back to Demos
Interactive Demo
Operations Dashboard
Real-time metrics across 8 locations
Total Orders
1,208
+12%
Avg Capacity
72%
+3%
Active Locations
5
Stable
Name | Region | Status | Orders | Revenue | Capacity | Manager | |
|---|---|---|---|---|---|---|---|
| NYC Hub | Northeast | active | 247 | $45.2K | 89% | Sarah Chen | |
| LA Warehouse | West | active | 189 | $32.8K | 76% | Marcus Diaz | |
| Chicago DC | Midwest | delayed | 156 | $28.3K | 92% | Aisha Patel | |
| Dallas Fulfillment | South | active | 198 | $36.4K | 82% | Tom Rivera | |
| Seattle Center | Northwest | maintenance | 0 | $0 | 0% | Jamie Kim | |
| Atlanta Hub | Southeast | active | 172 | $31.1K | 78% | Chris Johnson | |
| Miami Distribution | Southeast | active | 134 | $24.6K | 70% | Sofia Martinez | |
| Phoenix Ops | Southwest | delayed | 112 | $21.3K | 85% | Derek Wong |
Build Notes
The Problem
Operations teams were juggling 6+ spreadsheets to track fulfillment across regions. No real-time status visibility, manual cross-referencing, and missed capacity alerts led to delayed shipments.
What I Built
- •8-column data table with real-time filtering and sorting
- •Geographic map visualization with status pins
- •Drill-down drawer for location-level details
- •Status-based color coding + alert system
Key Decisions
- ✓Put filters above the table for immediate visibility
- ✓Used traffic-light colors (green/yellow/red) for instant status recognition
- ✓Kept row actions minimal — only essential drill-down
What Dev Gets
Figma with component specs, API contract for data shape, CSV export logic, and responsive breakpoints. Handoff included state management notes for filters/sorting.
Try Another Demo
See how I approach different UI challenges
Next Demo
Permissions & Roles Console
Reduce permission-related support tickets with a clear roles model.