root = Card([header, weatherHead, weatherText, sep1, congestionHead, congestionChart, sep2, transitHead, transitTable, sep3, aqiHead, aqiChart, sep4, energyHead, energyChart, sep5, waterHead, waterProgress, waterText, sep6, incidentsHead, incidentsTable, sep7, vehiclesHead, vehiclesList, sep8, parkingHead, parkingTable, sep9, eventsHead, eventsList, sep10, reportsHead, reportsList, sep11, backlogHead, backlogTable, sep12, roadworksHead, roadworksTable, sep13, infraHead, infraTable, sep14, actionsHead, focusForm, dispatchForm, alertForm], "card", "column", "l")
header = CardHeader("City Operations Center", "Live view · updated every minute")
weatherHead = Heading("Current Weather", "h3")
weatherText = TextContent("**72°F** Clear · Wind NW 8 mph · Humidity 44%", "large")
sep1 = Separator("horizontal", true)
congestionHead = Heading("Congestion Right Now", "h3")
congestionChart = HorizontalBarChart(congLabels, [congSeries], "grouped", "Index", "Road")
congLabels = ["I-5 Downtown", "Harbor Blvd", "Main St", "Riverside Ave", "MLK Blvd"]
congSeries = Series("Congestion index", [82, 64, 77, 45, 58])
sep2 = Separator("horizontal", true)
transitHead = Heading("Transit Punctuality", "h3")
transitTable = Table([routeCol, onTimeCol])
routeCol = Col("Route", ["Line 1", "Line 4", "Line 7", "Metro A", "Metro B"])
onTimeCol = Col("On-time %", [91, 86, 94, 88, 79])
sep3 = Separator("horizontal", true)
aqiHead = Heading("Air Quality by District", "h3")
aqiChart = BarChart(aqiLabels, [aqiSeries], "grouped", "District", "AQI")
aqiLabels = ["Downtown", "Northside", "East End", "Westlake", "Southgate"]
aqiSeries = Series("AQI", [48, 35, 62, 41, 28])
sep4 = Separator("horizontal", true)
energyHead = Heading("Energy Use — Past Week", "h3")
energyChart = AreaChart(energyLabels, [energySeries], "natural", "Day", "MWh")
energyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energySeries = Series("Energy use", [312, 328, 305, 342, 361, 289, 274])
sep5 = Separator("horizontal", true)
waterHead = Heading("Water Use Today", "h3")
waterProgress = Progress(78, "78% of daily consumption target")
waterText = TextContent("1.41M gallons used today; projected to stay within target.", "small")
sep6 = Separator("horizontal", true)
incidentsHead = Heading("Open Incidents", "h3")
incidentsTable = Table([incLocCol, incTypeCol, incSevCol])
incLocCol = Col("Location", ["300 Main St", "I-5 / Harbor exit", "Ferry Terminal", "Maple & 2nd", "Riverside Park"])
incTypeCol = Col("Incident", ["Traffic collision", "Signal failure", "Medical emergency", "Flooding", "Fire report"])
incSevCol = Col("Severity", ["High", "Medium", "Critical", "Low", "High"])
sep7 = Separator("horizontal", true)
vehiclesHead = Heading("Emergency Vehicles Deployed", "h3")
vehiclesList = ListBlock([veh1, veh2, veh3, veh4], "number")
veh1 = ListItem("Engine 12", "5100 block of Main St — responding")
veh2 = ListItem("Ambulance 4", "Ferry Terminal — on scene")
veh3 = ListItem("Truck 9", "I-5 / Harbor exit — traffic collision")
veh4 = ListItem("Patrol 3", "Downtown loop — mobile unit")
sep8 = Separator("horizontal", true)
parkingHead = Heading("Downtown Parking Availability", "h3")
parkingTable = Table([garageCol, availCol, totalCol])
garageCol = Col("Garage", ["City Center", "Market Square", "Union Lot", "Riverside Deck"])
availCol = Col("Available", [124, 89, 41, 210])
totalCol = Col("Total", [350, 300, 280, 400])
sep9 = Separator("horizontal", true)
eventsHead = Heading("Public Events This Weekend", "h3")
eventsList = ListBlock([event1, event2, event3, event4])
event1 = ListItem("Summer Music Festival", "Sat 2–10 PM · Riverside Park")
event2 = ListItem("Farmers Market", "Sun 8 AM–1 PM · Main Street Plaza")
event3 = ListItem("Night Run 5K", "Sat 7 PM · Starts at Union Lot")
event4 = ListItem("Harbor Fireworks", "Sun 9 PM · Harbor")
sep10 = Separator("horizontal", true)
reportsHead = Heading("Citizen Reports — Live", "h3")
reportsList = ListBlock([rep1, rep2, rep3, rep4], "number")
rep1 = ListItem("Pothole on 5th Ave", "1 min ago · Confirm photo received")
rep2 = ListItem("Streetlight out — Oak St", "4 min ago · Assigned to crews")
rep3 = ListItem("Illegal dumping", "12 min ago · Under review")
rep4 = ListItem("Noise complaint", "17 min ago · Resolved")
sep11 = Separator("horizontal", true)
backlogHead = Heading("Service Request Backlog", "h3")
backlogTable = Table([backlogCatCol, openCol, overdueCol])
backlogCatCol = Col("Category", ["Potholes", "Streetlights", "Graffiti", "Drainage", "Parks"])
openCol = Col("Open", [143, 87, 210, 56, 79])
overdueCol = Col("Overdue", [22, 9, 64, 18, 11])
sep12 = Separator("horizontal", true)
roadworksHead = Heading("Roadworks Planned This Month", "h3")
roadworksTable = Table([roadCol, dateCol, impactCol])
roadCol = Col("Road", ["Harbor Blvd", "5th Ave", "Elm Street", "Southgate Rd"])
dateCol = Col("Dates", ["Aug 5–9", "Aug 8–12", "Aug 12–16", "Aug 19–23"])
impactCol = Col("Impact", ["Lane closures", "Full closure", "Night work", "Lane shifts"])
sep13 = Separator("horizontal", true)
infraHead = Heading("Infrastructure Jobs Due for Maintenance", "h3")
infraTable = Table([assetCol, dueCol, priorityCol])
assetCol = Col("Asset", ["Grayson Bridge", "Union Water Pump", "Tunnel Ventilation", "Northside Substation"])
dueCol = Col("Due", ["Sep 15", "Aug 30", "Oct 2", "Sep 8"])
priorityCol = Col("Priority", ["High", "Critical", "Medium", "High"])
sep14 = Separator("horizontal", true)
actionsHead = Heading("Operations Controls", "h3")
focusForm = Form("district-focus", focusButtons, [focusField])
focusField = FormControl("Focus on district", focusSelect, "Scope operations to one district")
focusSelect = Select("district", [district1, district2, district3, district4, district5], "Choose district")
district1 = SelectItem("downtown", "Downtown")
district2 = SelectItem("northside", "Northside")
district3 = SelectItem("eastend", "East End")
district4 = SelectItem("westlake", "Westlake")
district5 = SelectItem("southgate", "Southgate")
focusButtons = Buttons([focusBtn])
focusBtn = Button("Focus District", null, "primary")
dispatchForm = Form("dispatch-crew", dispatchButtons, [incidentField, crewField])
incidentField = FormControl("Incident", incidentSelect)
incidentSelect = Select("incident", [incident1, incident2, incident3, incident4], "Select incident")
incident1 = SelectItem("inc-flood", "Flooding — Maple & 2nd")
incident2 = SelectItem("inc-collision", "Traffic collision — 300 Main St")
incident3 = SelectItem("inc-medical", "Medical emergency — Ferry Terminal")
incident4 = SelectItem("inc-fire", "Fire report — Riverside Park")
crewField = FormControl("Dispatch crew", crewSelect)
crewSelect = Select("crew", [crew1, crew2, crew3], "Choose unit")
crew1 = SelectItem("engine12", "Engine 12")
crew2 = SelectItem("ambulance4", "Ambulance 4")
crew3 = SelectItem("truck9", "Truck 9")
dispatchButtons = Buttons([dispatchBtn, cancelDispatchBtn])
dispatchBtn = Button("Dispatch Crew", null, "primary")
cancelDispatchBtn = Button("Cancel", null, "tertiary")
alertForm = Form("public-alert", alertButtons, [alertMessageField])
alertMessageField = FormControl("Alert message", alertMessageArea, "Broadcast to all resident channels")
alertMessageArea = TextArea("alert_message", "Enter message...", 4)
alertButtons = Buttons([sendAlertBtn])
sendAlertBtn = Button("Send Public Alert", null, "primary")