root = Card([header, districtSelector, weatherAlert, topMetricsRow, chartsRow, incidentsSection, emergencyVehicles, parkingEventsRow, citizenReports, backlogRoadworksRow, dispatchAlertActions], "card", "column", "l")
header = CardHeader("City Operations Center", "Real-time dashboard — all districts")
districtSelector = Form("district-focus", focusButtons, [districtField])
districtField = FormControl("Focus District", districtSelect, "Filters all metrics to the selected district")
districtSelect = Select("district", districtOptions, "All districts")
districtOptions = [optAll, optDowntown, optMidtown, optUptown, optRiverside, optHarbor, optHillside]
optAll = SelectItem("all", "All Districts")
optDowntown = SelectItem("downtown", "Downtown")
optMidtown = SelectItem("midtown", "Midtown")
optUptown = SelectItem("uptown", "Uptown")
optRiverside = SelectItem("riverside", "Riverside")
optHarbor = SelectItem("harbor", "Harbor")
optHillside = SelectItem("hillside", "Hillside")
focusButtons = Buttons([focusBtn])
focusBtn = Button("Apply Filter", null, "primary")
weatherAlert = Callout("info", "Current Weather", "18°C, Partly Cloudy, Wind SW 12 km/h, Humidity 62%, AQI 42 (Good)")
topMetricsRow = Card([congestionCard, punctualityCard, waterCard, parkingCard], "clear", "row", "m", "stretch", "start", true)
congestionCard = Card([congestionLabel, congestionValue, congestionTrend], "sunk", "column", "s")
congestionLabel = TextContent("Congestion Right Now", "small-heavy")
congestionValue = TextContent("67% — Heavy", "large-heavy")
congestionTrend = TextContent("↑ 8% vs 1hr ago", "small")
punctualityCard = Card([punctualityLabel, punctualityValue, punctualityTrend], "sunk", "column", "s")
punctualityLabel = TextContent("Transit Punctuality", "small-heavy")
punctualityValue = TextContent("89% On-Time", "large-heavy")
punctualityTrend = TextContent("↓ 2% vs yesterday", "small")
waterCard = Card([waterLabel, waterValue, waterTrend], "sunk", "column", "s")
waterLabel = TextContent("Water Use Today", "small-heavy")
waterValue = TextContent("42.3M gal / 55M gal", "large-heavy")
waterTrend = TextContent("77% of daily capacity", "small")
parkingCard = Card([parkingLabel, parkingValue, parkingTrend], "sunk", "column", "s")
parkingLabel = TextContent("Parking Downtown", "small-heavy")
parkingValue = TextContent("1,240 / 3,800 free", "large-heavy")
parkingTrend = TextContent("33% available", "small")
chartsRow = Card([airQualityChart, energyChart], "clear", "row", "m", "stretch", "start", true)
airQualityChart = Card([aqHeading, aqChart], "sunk", "column", "m")
aqHeading = Heading("Air Quality by District (AQI)", "h3")
aqChart = HorizontalBarChart(aqLabels, [aqSeries], "grouped", "AQI", "District")
aqLabels = ["Downtown", "Midtown", "Uptown", "Riverside", "Harbor", "Hillside"]
aqSeries = Series("AQI", [58, 42, 35, 48, 62, 29])
energyChart = Card([energyHeading, energyChartComp], "sunk", "column", "m")
energyHeading = Heading("Energy Use — Past 7 Days (MWh)", "h3")
energyChartComp = LineChart(energyLabels, [energySeries], "natural", "Day", "MWh")
energyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energySeries = Series("Consumption", [1240, 1180, 1320, 1290, 1350, 1100, 1050])
incidentsSection = Card([incidentsHeading, incidentsTable], "sunk", "column", "m")
incidentsHeading = Heading("Open Incidents", "h3")
incidentsTable = Table([incColId, incColType, incColLocation, incColSeverity, incColStatus, incColSince])
incColId = Col("ID", ["INC-2024-0847", "INC-2024-0846", "INC-2024-0845", "INC-2024-0844", "INC-2024-0843"])
incColType = Col("Type", ["Traffic Collision", "Water Main Break", "Power Outage", "Gas Leak", "Signal Failure"])
incColLocation = Col("Location", ["5th & Main (Downtown)", "Riverside Dr (Riverside)", "Uptown Substation (Uptown)", "Harbor Blvd (Harbor)", "Midtown Ave (Midtown)"])
incColSeverity = Col("Severity", ["Critical", "High", "High", "Critical", "Medium"])
incColStatus = Col("Status", ["Dispatched", "En Route", "Investigating", "Contained", "Queued"])
incColSince = Col("Since", ["14 min ago", "32 min ago", "1 hr 12 min", "2 hr 5 min", "4 hr 22 min"])
emergencyVehicles = Card([evHeading, evList], "sunk", "column", "m")
evHeading = Heading("Emergency Vehicles Deployed", "h3")
evList = ListBlock(evItems, "number")
evItems = [ev1, ev2, ev3, ev4, ev5, ev6]
ev1 = ListItem("Engine 12 — Structure Fire", "Downtown • 3 personnel • En route", null, "Track")
ev2 = ListItem("Medic 7 — MVA", "5th & Main • 2 paramedics • On scene", null, "Track")
ev3 = ListItem("Hazmat 3 — Gas Leak", "Harbor Blvd • 4 specialists • Containing", null, "Track")
ev4 = ListItem("Ladder 5 — High-Rise Alarm", "Uptown Tower • 5 personnel • Investigating", null, "Track")
ev5 = ListItem("Rescue 2 — Water Rescue", "Riverside Park • 3 divers • En route", null, "Track")
ev6 = ListItem("Battalion Chief 1 — Command", "Incident Command Post • Coordinating", null, "Track")
parkingEventsRow = Card([parkingDetail, eventsSection], "clear", "row", "m", "stretch", "start", true)
parkingDetail = Card([parkingDetailHeading, parkingDetailList], "sunk", "column", "m")
parkingDetailHeading = Heading("Parking Availability — Downtown Lots", "h3")
parkingDetailList = ListBlock(parkingItems, "number")
parkingItems = [pk1, pk2, pk3, pk4, pk5]
pk1 = ListItem("Civic Center Garage", "240 / 800 spaces (30%)", null, "Navigate")
pk2 = ListItem("Market Street Lot", "85 / 320 spaces (27%)", null, "Navigate")
pk3 = ListItem("Transit Hub Deck", "410 / 1200 spaces (34%)", null, "Navigate")
pk4 = ListItem("Convention Center", "180 / 650 spaces (28%)", null, "Navigate")
pk5 = ListItem("Waterfront Garage", "325 / 830 spaces (39%)", null, "Navigate")
eventsSection = Card([eventsHeading, eventsList], "sunk", "column", "m")
eventsHeading = Heading("Public Events This Weekend", "h3")
eventsList = ListBlock(eventItems, "number")
eventItems = [evt1, evt2, evt3, evt4]
evt1 = ListItem("Riverfront Jazz Festival", "Sat 14:00–22:00 • Harbor District • Est. 15,000 attendees", null, "Details")
evt2 = ListItem("Marathon & Health Expo", "Sun 07:00–12:00 • Downtown→Uptown • Road closures 05:00–14:00", null, "Details")
evt3 = ListItem("Farmers Market Expansion", "Sat–Sun 08:00–14:00 • Midtown Square • +30% foot traffic", null, "Details")
evt4 = ListItem("Hillside Art Walk", "Sat 16:00–23:00 • Hillside • Local streets closed", null, "Details")
citizenReports = Card([reportsHeading, reportsFeed], "sunk", "column", "m")
reportsHeading = Heading("Citizen Reports (Live)", "h3")
reportsFeed = ListBlock(reportItems, "number")
reportItems = [rpt1, rpt2, rpt3, rpt4, rpt5]
rpt1 = ListItem("Pothole on Elm St", "Downtown • 2 min ago • Severity: Low • Acknowledged", null, "View")
rpt2 = ListItem("Streetlight out at 3rd & Oak", "Midtown • 5 min ago • Severity: Medium • Dispatched", null, "View")
rpt3 = ListItem("Graffiti on Riverside Bridge", "Riverside • 12 min ago • Severity: Low • Queued", null, "View")
rpt4 = ListItem("Noise complaint — construction", "Uptown • 18 min ago • Severity: Low • Under Review", null, "View")
rpt5 = ListItem("Trash overflow at Harbor Park", "Harbor • 25 min ago • Severity: Medium • Crew En Route", null, "View")
backlogRoadworksRow = Card([backlogSection, roadworksSection], "clear", "row", "m", "stretch", "start", true)
backlogSection = Card([backlogHeading, backlogTable], "sunk", "column", "m")
backlogHeading = Heading("Service Request Backlog", "h3")
backlogTable = Table([bkColCat, bkColCount, bkColOldest, bkColSLA])
bkColCat = Col("Category", ["Potholes", "Streetlights", "Signage", "Drainage", "Sidewalks", "Signals"])
bkColCount = Col("Open", [47, 23, 12, 8, 15, 6])
bkColOldest = Col("Oldest (days)", [14, 9, 21, 5, 11, 3])
bkColSLA = Col("SLA Breach Risk", ["High", "Medium", "High", "Low", "Medium", "Low"])
roadworksSection = Card([rwHeading, rwTable], "sunk", "column", "m")
rwHeading = Heading("Roadworks Planned This Month", "h3")
rwTable = Table([rwColProject, rwColLocation, rwColStart, rwColEnd, rwColImpact])
rwColProject = Col("Project", ["Main St Resurfacing", "Bridge Deck Repair", "Transit Lane Install", "Utility Undergrounding", "Intersection Rebuild"])
rwColLocation = Col("Location", ["Main St (Downtown)", "Riverside Bridge", "5th Ave (Midtown)", "Harbor Blvd", "Uptown Circle"])
rwColStart = Col("Start", ["Nov 4", "Nov 11", "Nov 18", "Nov 25", "Nov 12"])
rwColEnd = Col("End", ["Nov 15", "Nov 22", "Dec 6", "Dec 13", "Nov 26"])
rwColImpact = Col("Traffic Impact", ["High — Full Closure", "Medium — Lane Shift", "Low — Shoulder Work", "High — Detour", "Medium — Lane Reduction"])
dispatchAlertActions = Card([maintenanceSection, actionButtons], "clear", "column", "m")
maintenanceSection = Card([maintHeading, maintTable], "sunk", "column", "m")
maintHeading = Heading("Infrastructure Jobs Due for Maintenance", "h3")
maintTable = Table([mtColAsset, mtColType, mtColLocation, mtColDue, mtColPriority])
mtColAsset = Col("Asset", ["Pump Station #3", "Substation 7", "Bridge 12", "Reservoir Valve", "Signal Controller 44", "Water Tower 2"])
mtColType = Col("Type", ["Pump", "Electrical", "Structural", "Valve", "Signal", "Tank"])
mtColLocation = Col("Location", ["Riverside", "Downtown", "Harbor", "Uptown", "Midtown", "Hillside"])
mtColDue = Col("Due Date", ["Nov 2", "Nov 5", "Nov 8", "Nov 10", "Nov 12", "Nov 15"])
mtColPriority = Col("Priority", ["Critical", "High", "High", "Medium", "Medium", "Low"])
actionButtons = Buttons([dispatchBtn, alertBtn], "row")
dispatchBtn = Button("Dispatch Crew", ["dispatch"], "primary", "normal", "medium")
alertBtn = Button("Send Public Alert", ["alert"], "secondary", "normal", "medium")