Iron Logistics Dashboard
A utilitarian, industrial-themed logistics operations dashboard for fleet and shipment management.
Features
- Metric cards — Active shipments, packages tracked, on-time delivery rate, delivery zones
- Shipments table — 8 rows with ID, route, carrier, weight, ETA, and status columns
- Fleet status panel — Progress bars showing active vs maintenance vehicles by type
- Status badges — Color-coded: green (delivered), amber (in transit), red (delayed)
- Maintenance alert — Warning card for scheduled vehicle inspections
- Bold borders — Industrial 2px borders with squared corners (rounded-sm)
- Grid pattern — Subtle CSS grid overlay for blueprint/industrial feel
- Barlow typography — Barlow for headings, Barlow Condensed for data labels
- Tabular numbers — Monospaced numerals for aligned data columns
- Dark mode — Near-black (#0c0c0e) with preserved amber/orange warning accents
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/table — Table, TableBody, TableCell, TableHead, TableHeader, TableRow@/components/vue-ui/separator — Separator@/components/vue-ui/progress — Progress@/components/vue-ui/button — Buttonlucide-vue-next — Truck, Package, MapPin, Clock, AlertTriangle, CheckCircle, ArrowRight
Customization
- Shipments: Replace the
shipments array with live tracking data
