root = Card([header, districtSelector, metricsRow, chartsRow, incidentsSection, emergencySection, parkingEventsRow, reportsBacklogRow, roadworksMaintenanceRow, actionsRow], "card", "column", "l")

header = CardHeader("City Operations Center", "Real-time dashboard — updated live")

districtSelector = Form("district-focus", districtButtons, [districtField])
districtField = FormControl("Focus District", districtSelect, "Filter all views to a single district")
districtSelect = Select("district", districtOptions, "All districts")
districtOptions = [optAll, optDowntown, optNorthside, optEastside, optWestside, optHarbor, optUniversity, optIndustrial]
optAll = SelectItem("all", "All Districts")
optDowntown = SelectItem("downtown", "Downtown")
optNorthside = SelectItem("northside", "Northside")
optEastside = SelectItem("eastside", "Eastside")
optWestside = SelectItem("westside", "Westside")
optHarbor = SelectItem("harbor", "Harbor District")
optUniversity = SelectItem("university", "University District")
optIndustrial = SelectItem("industrial", "Industrial Zone")
districtButtons = Buttons([applyDistrictBtn])
applyDistrictBtn = Button("Apply Filter", null, "primary")

metricsRow = Card([congestionCard, transitCard, airQualityCard, weatherCard], "clear", "row", "m", "stretch", "start", true)

congestionCard = Card([congestionHeader, congestionValue, congestionTrend], "sunk", "column", "s")
congestionHeader = Heading("Congestion Right Now", "h3")
congestionValue = TextContent("**67%** — Heavy", "large-heavy")
congestionTrend = TextContent("↑ 12% vs 1hr ago • Peak: 89% at 08:15", "small")

transitCard = Card([transitHeader, transitValue, transitDetail], "sunk", "column", "s")
transitHeader = Heading("Transit Punctuality", "h3")
transitValue = TextContent("**84%** On-time", "large-heavy")
transitDetail = TextContent("Bus: 81% • Rail: 92% • Tram: 78%", "small")

airQualityCard = Card([aqHeader, aqChart], "sunk", "column", "s")
aqHeader = Heading("Air Quality by District", "h3")
aqChart = HorizontalBarChart(aqLabels, [aqSeries], "grouped", "AQI", "District")
aqLabels = ["Downtown", "Northside", "Eastside", "Westside", "Harbor", "University", "Industrial"]
aqSeries = Series("AQI", [72, 45, 58, 51, 63, 38, 89])

weatherCard = Card([weatherHeader, weatherMain, weatherDetails], "sunk", "column", "s")
weatherHeader = Heading("Current Weather", "h3")
weatherMain = TextContent("**18°C** • Partly Cloudy • Feels like 17°C", "large-heavy")
weatherDetails = TextContent("Humidity 62% • Wind SW 14 km/h • UV Index 4 • Precip: 10%", "small")

chartsRow = Card([energyCard, waterCard], "clear", "row", "m", "stretch", "start", true)

energyCard = Card([energyHeader, energyChart], "sunk", "column", "s")
energyHeader = Heading("Energy Use — Past 7 Days", "h3")
energyChart = LineChart(energyLabels, [energySeries], "natural", "Day", "MWh")
energyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energySeries = Series("Consumption", [1420, 1380, 1450, 1490, 1510, 1320, 1280])

waterCard = Card([waterHeader, waterValue, waterChart], "sunk", "column", "s")
waterHeader = Heading("Water Use Today", "h3")
waterValue = TextContent("**284 ML** consumed • 92% of daily capacity", "large-heavy")
waterChart = SingleStackedBarChart(waterLabels, waterValues)
waterLabels = ["Residential", "Commercial", "Industrial", "Municipal", "Losses"]
waterValues = [142, 68, 45, 19, 10]

incidentsSection = Card([incidentsHeader, incidentsTable], "sunk", "column", "m")
incidentsHeader = Heading("Open Incidents", "h3")
incidentsTable = Table([incIdCol, incTypeCol, incLocationCol, incSeverityCol, incStatusCol, incSinceCol])
incIdCol = Col("ID", ["INC-2024-0847", "INC-2024-0846", "INC-2024-0845", "INC-2024-0844", "INC-2024-0843", "INC-2024-0842"])
incTypeCol = Col("Type", ["Water Main Break", "Power Outage", "Traffic Signal Failure", "Gas Leak", "Sewer Overflow", "Road Collapse"])
incLocationCol = Col("Location", ["5th & Main (Downtown)", "Northside Substation", "Eastside Blvd & 12th", "Harbor Industrial Park", "University Ave", "Industrial Zone Sector 4"])
incSeverityCol = Col("Severity", ["Critical", "High", "Medium", "Critical", "High", "Medium"])
incStatusCol = Col("Status", ["Dispatched", "Investigating", "Queued", "Dispatched", "En Route", "Assessing"])
incSinceCol = Col("Since", ["14 min ago", "32 min ago", "1 hr 12 min", "8 min ago", "45 min ago", "2 hr 5 min"])

emergencySection = Card([emergencyHeader, emergencyList], "sunk", "column", "m")
emergencyHeader = Heading("Emergency Vehicles Deployed", "h3")
emergencyList = ListBlock(emergencyItems, "number")
emergencyItems = [emg1, emg2, emg3, emg4, emg5, emg6, emg7]
emg1 = ListItem("Engine 12 — Structure Fire", "Downtown • 5th & Main • Dispatched 14 min ago", null, "Track")
emg2 = ListItem("Medic 7 — MVA", "Eastside Blvd • En route • ETA 4 min", null, "Track")
emg3 = ListItem("HazMat 3 — Gas Leak", "Harbor Industrial Park • On scene", null, "Track")
emg4 = ListItem("Engine 21 — Water Rescue", "Harbor District • Standby", null, "Track")
emg5 = ListItem("Medic 14 — Cardiac", "University District • Transporting", null, "Track")
emg6 = ListItem("Truck 5 — Road Collapse", "Industrial Zone • On scene", null, "Track")
emg7 = ListItem("Battalion Chief 2 — Incident Command", "Downtown • Managing INC-0847", null, "Track")

parkingEventsRow = Card([parkingCard, eventsCard], "clear", "row", "m", "stretch", "start", true)

parkingCard = Card([parkingHeader, parkingGrid], "sunk", "column", "s")
parkingHeader = Heading("Parking Availability — Downtown", "h3")
parkingGrid = Card([parkingRow1, parkingRow2], "clear", "column", "xs")
parkingRow1 = Card([pk1, pk2, pk3], "clear", "row", "s", "stretch", "start", true)
parkingRow2 = Card([pk4, pk5, pk6], "clear", "row", "s", "stretch", "start", true)
pk1 = Card([Tag("Main St Garage", null, null, "info"), TextContent("**23 / 380** free (6%)", "default")], "sunk", "column", "xs")
pk2 = Card([Tag("Civic Center", null, null, "warning"), TextContent("**87 / 520** free (17%)", "default")], "sunk", "column", "xs")
pk3 = Card([Tag("Riverfront Lot", null, null, "success"), TextContent("**156 / 290** free (54%)", "default")], "sunk", "column", "xs")
pk4 = Card([Tag("Transit Hub", null, null, "danger"), TextContent("**12 / 410** free (3%)", "default")], "sunk", "column", "xs")
pk5 = Card([Tag("Market Square", null, null, "info"), TextContent("**45 / 180** free (25%)", "default")], "sunk", "column", "xs")
pk6 = Card([Tag("University Edge", null, null, "success"), TextContent("**198 / 350** free (57%)", "default")], "sunk", "column", "xs")

eventsCard = Card([eventsHeader, eventsList], "sunk", "column", "s")
eventsHeader = Heading("Public Events — This Weekend", "h3")
eventsList = ListBlock(eventItems, "number")
eventItems = [evt1, evt2, evt3, evt4, evt5]
evt1 = ListItem("Riverfront Jazz Festival", "Sat 14:00–23:00 • Harbor District • Est. 15,000 attendees", null, "Details")
evt2 = ListItem("Marathon — City Championship", "Sun 07:00–12:00 • Downtown loop • Road closures 05:00–14:00", null, "Details")
evt3 = ListItem("University Homecoming Parade", "Sat 10:00–12:00 • University Ave • Expect congestion", null, "Details")
evt4 = ListItem("Food Truck Rally", "Sat–Sun 11:00–21:00 • Market Square • Parking impact high", null, "Details")
evt5 = ListItem("Industrial Job Fair", "Sat 09:00–16:00 • Industrial Zone • Transit surge expected", null, "Details")

reportsBacklogRow = Card([reportsCard, backlogCard], "clear", "row", "m", "stretch", "start", true)

reportsCard = Card([reportsHeader, reportsFeed], "sunk", "column", "s")
reportsHeader = Heading("Citizen Reports — Live Feed", "h3")
reportsFeed = ListBlock(reportItems, "number")
reportItems = [rpt1, rpt2, rpt3, rpt4, rpt5, rpt6]
rpt1 = ListItem("Pothole — 3rd & Elm", "Northside • Submitted 2 min ago • Photo attached", null, "Acknowledge")
rpt2 = ListItem("Streetlight out — Oak & 14th", "Eastside • Submitted 5 min ago", null, "Acknowledge")
rpt3 = ListItem("Illegal dumping — Alley behind 400 Block", "Downtown • Submitted 12 min ago", null, "Acknowledge")
rpt4 = ListItem("Traffic signal stuck red — Harbor Blvd", "Harbor • Submitted 18 min ago", null, "Acknowledge")
rpt5 = ListItem("Water pressure drop — University Heights", "University • Submitted 22 min ago", null, "Acknowledge")
rpt6 = ListItem("Graffiti — Transit tunnel entrance", "Westside • Submitted 35 min ago", null, "Acknowledge")

backlogCard = Card([backlogHeader, backlogStats, backlogTable], "sunk", "column", "s")
backlogHeader = Heading("Service Request Backlog", "h3")
backlogStats = TextContent("**1,247** open requests • **312** overdue • Avg resolution: 4.2 days", "default")
backlogTable = Table([blCatCol, blOpenCol, blOverdueCol, blAvgDaysCol])
blCatCol = Col("Category", ["Roads & Sidewalks", "Water & Sewer", "Traffic Signals", "Street Lighting", "Parks & Trees", "Code Enforcement", "Other"])
blOpenCol = Col("Open", [384, 267, 156, 134, 98, 112, 96])
blOverdueCol = Col("Overdue", [89, 62, 41, 33, 27, 38, 22])
blAvgDaysCol = Col("Avg Days", [5.1, 4.8, 3.2, 2.9, 6.4, 3.7, 4.1])

roadworksMaintenanceRow = Card([roadworksCard, maintenanceCard], "clear", "row", "m", "stretch", "start", true)

roadworksCard = Card([rwHeader, rwTable], "sunk", "column", "s")
rwHeader = Heading("Roadworks Planned — This Month", "h3")
rwTable = Table([rwIdCol, rwLocationCol, rwTypeCol, rwStartCol, rwEndCol, rwImpactCol])
rwIdCol = Col("ID", ["RW-2024-112", "RW-2024-115", "RW-2024-118", "RW-2024-121", "RW-2024-124", "RW-2024-127"])
rwLocationCol = Col("Location", ["Main St (1st–5th)", "University Ave Bridge", "Harbor Tunnel Approach", "Northside Blvd", "Eastside Industrial Access", "Westside Resurfacing"])
rwTypeCol = Col("Type", ["Resurfacing", "Bridge Deck Repair", "Tunnel Lighting", "Utility Relocation", "New Construction", "Resurfacing"])
rwStartCol = Col("Start", ["Nov 4", "Nov 11", "Nov 18", "Nov 25", "Nov 18", "Nov 25"])
rwEndCol = Col("End", ["Nov 15", "Nov 29", "Dec 6", "Dec 13", "Dec 20", "Dec 6"])
rwImpactCol = Col("Traffic Impact", ["High — Full closure", "Medium — Lane shifts", "Low — Night only", "High — Detour", "Medium — Lane closure", "Low — Rolling closure"])

maintenanceCard = Card([mntHeader, mntTable], "sunk", "column", "s")
mntHeader = Heading("Infrastructure Jobs Due for Maintenance", "h3")
mntTable = Table([mntAssetCol, mntTypeCol, mntLocationCol, mntDueCol, mntPriorityCol, mntStatusCol])
mntAssetCol = Col("Asset", ["Pump Station #4", "Substation North", "Water Tower East", "Bridge 7 (Main St)", "Treatment Plant Clarifier", "Traffic Control Center", "Harbor Seawall Section 3"])
mntTypeCol = Col("Type", ["Mechanical", "Electrical", "Structural", "Structural", "Mechanical", "IT/SCADA", "Structural"])
mntLocationCol = Col("Location", ["Northside", "Northside", "Eastside", "Downtown", "Harbor", "Downtown", "Harbor"])
mntDueCol = Col("Due Date", ["Oct 28", "Oct 30", "Nov 5", "Nov 12", "Nov 15", "Nov 20", "Nov 25"])
mntPriorityCol = Col("Priority", ["Critical", "High", "High", "Medium", "Critical", "Medium", "High"])
mntStatusCol = Col("Status", ["Scheduled", "Parts Ordered", "Scheduled", "Planning", "Scheduled", "Deferred", "Planning"])

actionsRow = Card([dispatchCard, alertCard], "clear", "row", "m", "stretch", "start", true)

dispatchCard = Card([dispatchHeader, dispatchForm], "sunk", "column", "s")
dispatchHeader = Heading("Dispatch a Crew", "h3")
dispatchForm = Form("dispatch-crew", dispatchButtons, [dispTypeField, dispLocationField, dispPriorityField, dispNotesField])
dispTypeField = FormControl("Crew Type", dispTypeSelect)
dispTypeSelect = Select("crew_type", dispTypeOptions, "Select crew type")
dispTypeOptions = [dt1, dt2, dt3, dt4, dt5, dt6]
dt1 = SelectItem("roads", "Roads & Sidewalks")
dt2 = SelectItem("water", "Water & Sewer")
dt3 = SelectItem("electrical", "Electrical / Signals")
dt4 = SelectItem("parks", "Parks & Forestry")
dt5 = SelectItem("facilities", "Facilities")
dt6 = SelectItem("emergency", "Emergency Response")
dispLocationField = FormControl("Location", dispLocationInput, "Address, intersection, or asset ID")
dispLocationInput = Input("location", "e.g., 5th & Main / Pump Station #4")
dispPriorityField = FormControl("Priority", dispPrioritySelect)
dispPrioritySelect = Select("priority", dispPriorityOptions, "Normal")
dispPriorityOptions = [dp1, dp2, dp3]
dp1 = SelectItem("low", "Low — Schedule next shift")
dp2 = SelectItem("normal", "Normal — Within 4 hours")
dp3 = SelectItem("urgent", "Urgent — Immediate dispatch")
dispNotesField = FormControl("Notes", dispNotesArea, "Special instructions, hazards, access info")
dispNotesArea = TextArea("notes", "Additional details...", 3)
dispatchButtons = Buttons([dispatchSubmitBtn, dispatchClearBtn])
dispatchSubmitBtn = Button("Dispatch Crew", null, "primary")
dispatchClearBtn = Button("Clear", null, "tertiary")

alertCard = Card([alertHeader, alertForm], "sunk", "column", "s")
alertHeader = Heading("Send Public Alert", "h3")
alertForm = Form("public-alert", alertButtons, [alertTypeField, alertChannelsField, alertMessageField, alertDistrictField, alertDurationField])
alertTypeField = FormControl("Alert Type", alertTypeSelect)
alertTypeSelect = Select("alert_type", alertTypeOptions, "Select type")
alertTypeOptions = [at1, at2, at3, at4, at5]
at1 = SelectItem("emergency", "Emergency Alert")
at2 = SelectItem("traffic", "Traffic Advisory")
at3 = SelectItem("utility", "Utility Disruption")
at4 = SelectItem("weather", "Weather Warning")
at5 = SelectItem("event", "Event / Closure Notice")
alertChannelsField = FormControl("Channels", alertChannelsGroup, "Hold Ctrl/Cmd to select multiple")
alertChannelsGroup = CheckBoxGroup("channels", alertChannelItems)
alertChannelItems = [ac1, ac2, ac3, ac4, ac5]
ac1 = CheckBoxItem("SMS", "Text message to opted-in residents", "sms", true)
ac2 = CheckBoxItem("Push Notification", "Mobile app push", "push", true)
ac3 = CheckBoxItem("Email", "Email to subscribers", "email", false)
ac4 = CheckBoxItem("Social Media", "Post to city accounts", "social", true)
ac5 = CheckBoxItem("Road Signs", "Variable message signs", "signs", false)
alertMessageField = FormControl("Message", alertMessageArea, "Max 160 chars for SMS; be concise and actionable")
alertMessageArea = TextArea("message", "e.g., Water main break at 5th & Main. Avoid area. Expect delays. Crews dispatched.", 4)
alertDistrictField = FormControl("Target Districts", alertDistrictSelect, "Leave blank for city-wide")
alertDistrictSelect = Select("target_districts", alertDistrictOptions, "All districts", null, null, "large")
alertDistrictOptions = [ad1, ad2, ad3, ad4, ad5, ad6, ad7, ad8]
ad1 = SelectItem("all", "All Districts")
ad2 = SelectItem("downtown", "Downtown")
ad3 = SelectItem("northside", "Northside")
ad4 = SelectItem("eastside", "Eastside")
ad5 = SelectItem("westside", "Westside")
ad6 = SelectItem("harbor", "Harbor District")
ad7 = SelectItem("university", "University District")
ad8 = SelectItem("industrial", "Industrial Zone")
alertDurationField = FormControl("Auto-expire", alertDurationSelect, "Alert will be withdrawn automatically")
alertDurationSelect = Select("duration", alertDurationOptions, "2 hours")
alertDurationOptions = [dur1, dur2, dur3, dur4, dur5]
dur1 = SelectItem("30min", "30 minutes")
dur2 = SelectItem("1hr", "1 hour")
dur3 = SelectItem("2hr", "2 hours")
dur4 = SelectItem("4hr", "4 hours")
dur5 = SelectItem("8hr", "8 hours")
alertButtons = Buttons([alertSendBtn, alertPreviewBtn, alertCancelBtn])
alertSendBtn = Button("Send Alert", null, "primary")
alertPreviewBtn = Button("Preview", null, "secondary")
alertCancelBtn = Button("Cancel", null, "tertiary")