root = Card([header, districtSelector, statusRow, chartsRow, incidentsRow, parkingEventsRow, reportsBacklogRow, roadworksMaintenanceRow, actionsRow], "card", "column", "l")
header = CardHeader("City Operations Center", "Real-time dashboard — updated live")
districtSelector = Select("district_focus", districtOptions, "Select district to focus", null, null, "medium")
districtOptions = [optAll, optDowntown, optNorthside, optEastside, optWestside, optIndustrial, optHarbor]
optAll = SelectItem("all", "All Districts")
optDowntown = SelectItem("downtown", "Downtown")
optNorthside = SelectItem("northside", "Northside")
optEastSide = SelectItem("eastside", "Eastside")
optWestside = SelectItem("westside", "Westside")
optIndustrial = SelectItem("industrial", "Industrial Zone")
optHarbor = SelectItem("harbor", "Harbor District")
statusRow = Card([congestionCard, punctualityCard, weatherCard], "clear", "row", "m", null, null, true)
congestionCard = Card([congestionTitle, congestionValue, congestionTrend], "sunk", "column", "s")
congestionTitle = Heading("Congestion Right Now", "h4")
congestionValue = TextContent("**Moderate** — 42% above free-flow", "large-heavy")
congestionTrend = TextContent("↑ 3% vs 1hr ago • Peak: 5:30–7:00 PM", "small")
punctualityCard = Card([punctualityTitle, punctualityValue, punctualityBreakdown], "sunk", "column", "s")
punctualityTitle = Heading("Transit Punctuality", "h4")
punctualityValue = TextContent("**87% On-Time**", "large-heavy")
punctualityBreakdown = TextContent("Bus: 84% • Light Rail: 92% • Ferry: 78%", "small")
weatherCard = Card([weatherTitle, weatherMain, weatherDetails], "sunk", "column", "s")
weatherTitle = Heading("Current Weather", "h4")
weatherMain = TextContent("**18°C • Partly Cloudy**", "large-heavy")
weatherDetails = TextContent("Humidity 62% • Wind SW 12 km/h • AQI 42 (Good)", "small")
chartsRow = Card([airQualityChart, energyChart, waterChart], "clear", "row", "m", null, null, true)
airQualityChart = Card([aqTitle, aqChart], "sunk", "column", "s")
aqTitle = Heading("Air Quality by District", "h4")
aqChart = HorizontalBarChart(aqLabels, [aqSeries], "grouped", "AQI", "District")
aqLabels = ["Downtown", "Northside", "Eastside", "Westside", "Industrial", "Harbor"]
aqSeries = Series("AQI", [42, 38, 45, 35, 68, 52])
energyChart = Card([energyTitle, energyChartComp], "sunk", "column", "s")
energyTitle = Heading("Energy Use — Past 7 Days", "h4")
energyChartComp = LineChart(energyLabels, [energySeries], "natural", "Day", "MWh")
energyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energySeries = Series("Consumption", [1420, 1380, 1450, 1490, 1520, 1310, 1250])
waterChart = Card([waterTitle, waterValue, waterChartComp], "sunk", "column", "s")
waterTitle = Heading("Water Use Today", "h4")
waterValue = TextContent("**284 ML** used • 94% of daily capacity", "large-heavy")
waterChartComp = SingleStackedBarChart(waterLabels, waterValues)
waterLabels = ["Residential", "Commercial", "Industrial", "Municipal", "Loss"]
waterValues = [142, 68, 45, 19, 10]
incidentsRow = Card([incidentsCard, vehiclesCard], "clear", "row", "m", null, null, true)
incidentsCard = Card([incidentsTitle, incidentsTable], "sunk", "column", "s")
incidentsTitle = Heading("Open Incidents", "h4")
incidentsTable = Table([incIdCol, incTypeCol, incLocationCol, incSeverityCol, incStatusCol, incSinceCol])
incIdCol = Col("ID", ["INC-0441", "INC-0440", "INC-0439", "INC-0438", "INC-0437"])
incTypeCol = Col("Type", ["Water Main Break", "Power Outage", "Traffic Signal", "Gas Leak", "Sewer Backup"])
incLocationCol = Col("Location", ["5th & Main (Downtown)", "Northside Substation", "Harbor Blvd & 12th", "Industrial Zone B3", "Eastside Park"])
incSeverityCol = Col("Severity", ["Critical", "High", "Medium", "Critical", "High"])
incStatusCol = Col("Status", ["Dispatched", "Assessing", "Monitoring", "Evacuating", "Crew En Route"])
incSinceCol = Col("Since", ["12 min", "38 min", "2 hr", "8 min", "1 hr 15 min"])
vehiclesCard = Card([vehiclesTitle, vehiclesList], "sunk", "column", "s")
vehiclesTitle = Heading("Emergency Vehicles Deployed", "h4")
vehiclesList = ListBlock(vehicleItems, "number")
vehicleItems = [veh1, veh2, veh3, veh4, veh5, veh6]
veh1 = ListItem("Engine 12 — Structure Fire", "Downtown • 3 personnel • On scene", null, null)
veh2 = ListItem("Medic 7 — MVA", "Harbor Blvd • 2 personnel • Transporting", null, null)
veh3 = ListItem("HazMat 3 — Gas Leak", "Industrial Zone B3 • 4 personnel • Containing", null, null)
veh4 = ListItem("Rescue 1 — Water Rescue", "Harbor District • 5 personnel • Searching", null, null)
veh5 = ListItem("Engine 8 — Standby", "Northside Substation • 3 personnel • Staging", null, null)
veh6 = ListItem("Medic 12 — Medical Aid", "Eastside Park • 2 personnel • On scene", null, null)
parkingEventsRow = Card([parkingCard, eventsCard], "clear", "row", "m", null, null, true)
parkingCard = Card([parkingTitle, parkingChart], "sunk", "column", "s")
parkingTitle = Heading("Parking Availability — Downtown", "h4")
parkingChart = HorizontalBarChart(parkingLabels, [parkingAvail, parkingTotal], "grouped", "Spaces", "Zone")
parkingLabels = ["Zone A", "Zone B", "Zone C", "Zone D", "Zone E", "Zone F"]
parkingAvail = Series("Available", [42, 18, 67, 3, 91, 24])
parkingTotal = Series("Capacity", [120, 85, 150, 45, 200, 60])
eventsCard = Card([eventsTitle, eventsList], "sunk", "column", "s")
eventsTitle = Heading("Public Events This Weekend", "h4")
eventsList = ListBlock(eventItems, "number")
eventItems = [evt1, evt2, evt3, evt4, evt5]
evt1 = ListItem("Harbor Festival", "Sat 10:00–22:00 • Harbor District • Est. 15,000 attendees", null, null)
evt2 = ListItem("Downtown Art Walk", "Sat 17:00–23:00 • Downtown • Est. 8,000 attendees", null, null)
evt3 = ListItem("Northside Marathon", "Sun 07:00–12:00 • Northside • Road closures: Main St, Oak Ave", null, null)
evt4 = ListItem("Eastside Farmers Market", "Sat 08:00–14:00 • Eastside Plaza • Est. 3,000 attendees", null, null)
evt5 = ListItem("Industrial Job Fair", "Sat 10:00–16:00 • Industrial Zone • Est. 2,000 attendees", null, null)
reportsBacklogRow = Card([reportsCard, backlogCard], "clear", "row", "m", null, null, true)
reportsCard = Card([reportsTitle, reportsFeed], "sunk", "column", "s")
reportsTitle = Heading("Citizen Reports (Live)", "h4")
reportsFeed = ListBlock(reportItems, "number")
reportItems = [rpt1, rpt2, rpt3, rpt4, rpt5]
rpt1 = ListItem("Pothole — 3rd & Elm", "Submitted 2 min ago • Photos attached • Triaged", null, null)
rpt2 = ListItem("Streetlight Out — Maple Ave", "Submitted 7 min ago • 3 lights affected", null, null)
rpt3 = ListItem("Graffiti — Parking Garage B", "Submitted 15 min ago • Offensive content flagged", null, null)
rpt4 = ListItem("Noise Complaint — Warehouse District", "Submitted 22 min ago • Ongoing construction", null, null)
rpt5 = ListItem("Missed Trash Pickup — Oak St", "Submitted 31 min ago • Entire block", null, null)
backlogCard = Card([backlogTitle, backlogTable], "sunk", "column", "s")
backlogTitle = Heading("Service Request Backlog", "h4")
backlogTable = Table([bkCatCol, bkOpenCol, bkAvgWaitCol, bkOldestCol, bkSLACol])
bkCatCol = Col("Category", ["Potholes", "Streetlights", "Graffiti", "Trash/Recycling", "Signage", "Trees", "Drainage"])
bkOpenCol = Col("Open", [47, 23, 18, 31, 12, 9, 14])
bkAvgWaitCol = Col("Avg Wait (days)", [5.2, 3.1, 4.7, 2.8, 6.3, 8.1, 4.4])
bkOldestCol = Col("Oldest (days)", [14, 9, 11, 7, 18, 22, 10])
bkSLACol = Col("SLA Breach Risk", ["High", "Medium", "Medium", "Low", "High", "High", "Medium"])
roadworksMaintenanceRow = Card([roadworksCard, maintenanceCard], "clear", "row", "m", null, null, true)
roadworksCard = Card([roadworksTitle, roadworksList], "sunk", "column", "s")
roadworksTitle = Heading("Roadworks Planned This Month", "h4")
roadworksList = ListBlock(rwItems, "number")
rwItems = [rw1, rw2, rw3, rw4, rw5]
rw1 = ListItem("Main St Reconstruction (Phase 2)", "May 12–26 • Downtown • Full closure • Detour via 2nd Ave", null, null)
rw2 = ListItem("Harbor Blvd Resurfacing", "May 18–22 • Harbor District • Night work 22:00–05:00", null, null)
rw3 = ListItem("Northside Bridge Deck Repair", "May 5–30 • Northside • Lane shifts • Expect 15-min delays", null, null)
rw4 = ListItem("Eastside Bike Lane Installation", "May 20–Jun 3 • Eastside • Rolling closures", null, null)
rw5 = ListItem("Industrial Zone Utility Trenching", "May 14–28 • Industrial Zone • Intermittent closures", null, null)
maintenanceCard = Card([maintTitle, maintTable], "sunk", "column", "s")
maintTitle = Heading("Infrastructure Jobs Due for Maintenance", "h4")
maintTable = Table([mAssetCol, mTypeCol, mDueCol, mPriorityCol, mStatusCol])
mAssetCol = Col("Asset", ["Pump Station 4", "Substation North", "Water Tower East", "Bridge 12 (Main)", "Treatment Plant 1", "Reservoir West"])
mTypeCol = Col("Type", ["Pump Overhaul", "Transformer Inspect", "Tank Cleaning", "Deck Sealing", "Filter Replacement", "Valve Exercise"])
mDueCol = Col("Due Date", ["May 8", "May 10", "May 15", "May 18", "May 22", "May 25"])
mPriorityCol = Col("Priority", ["Critical", "High", "Medium", "High", "Critical", "Medium"])
mStatusCol = Col("Status", ["Scheduled", "Parts Ordered", "Planning", "Scheduled", "Crew Assigned", "Planning"])
actionsRow = Card([dispatchBtn, alertBtn], "clear", "row", "m", "center")
dispatchBtn = Button("Dispatch Crew", null, "primary", "normal", "large")
alertBtn = Button("Send Public Alert", null, "secondary", "normal", "large")