root = Card([header, districtSelector, topMetrics, congestionChart, transitPunctuality, airQualityChart, energyWaterRow, incidentsSection, emergencyVehicles, parkingAvailability, eventsWeekend, citizenReports, serviceBacklog, weatherCard, roadworksSection, maintenanceSection, actionButtons], "card", "column", "l")
header = CardHeader("City Operations Center", "Real-time municipal dashboard — updated live")
districtSelector = Form("district-focus", districtButtons, [districtField])
districtField = FormControl("Focus District", districtSelect, "Filter all panels 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")
topMetrics = Card([metricCongestion, metricTransit, metricAirQuality, metricWeather], "clear", "row", "m", "stretch", "between")
metricCongestion = Card([congestionLabel, congestionValue], "sunk", "column", "s", "center")
congestionLabel = TextContent("Congestion Index", "small")
congestionValue = TextContent("72 / 100", "large-heavy")
metricTransit = Card([transitLabel, transitValue], "sunk", "column", "s", "center")
transitLabel = TextContent("Transit Punctuality", "small")
transitValue = TextContent("87% On-Time", "large-heavy")
metricAirQuality = Card([aqLabel, aqValue], "sunk", "column", "s", "center")
aqLabel = TextContent("Citywide AQI", "small")
aqValue = TextContent("68 Moderate", "large-heavy")
metricWeather = Card([weatherLabel, weatherValue], "sunk", "column", "s", "center")
weatherLabel = TextContent("Current Weather", "small")
weatherValue = TextContent("18°C, Partly Cloudy, Wind 12 km/h", "large-heavy")
congestionChart = Card([congestionHeading, congestionLine], "card", "column", "m")
congestionHeading = Heading("Congestion Right Now — 24h Trend", "h3")
congestionLine = LineChart(congestionLabels, [congestionSeries], "natural", "Hour", "Index (0-100)")
congestionLabels = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "00:00"]
congestionSeries = Series("Congestion Index", [28, 22, 45, 78, 65, 82, 72, 55, 30])
transitPunctuality = Card([transitHeading, transitBar], "card", "column", "m")
transitHeading = Heading("Transit Punctuality by Line", "h3")
transitBar = HorizontalBarChart(transitLines, [transitOnTime, transitDelayed], "grouped", "Percentage", "Line")
transitLines = ["Red Line", "Blue Line", "Green Line", "Orange Line", "Commuter Rail", "Bus Rapid Transit", "Streetcar"]
transitOnTime = Series("On-Time %", [92, 89, 94, 85, 78, 88, 91])
transitDelayed = Series("Delayed %", [8, 11, 6, 15, 22, 12, 9])
airQualityChart = Card([aqHeading, aqRadial], "card", "column", "m")
aqHeading = Heading("Air Quality by District (AQI)", "h3")
aqRadial = RadialChart(aqDistricts, aqValues)
aqDistricts = ["Downtown", "Northside", "Eastside", "Westside", "Harbor", "University", "Industrial"]
aqValues = [72, 58, 65, 52, 81, 48, 89]
energyWaterRow = Card([energyChart, waterChart], "clear", "row", "l", "stretch", "between")
energyChart = Card([energyHeading, energyArea], "card", "column", "m")
energyHeading = Heading("Energy Use — Past 7 Days", "h3")
energyArea = AreaChart(energyDays, [energySeries], "natural", "Day", "MWh")
energyDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energySeries = Series("Consumption", [1420, 1380, 1450, 1510, 1490, 1320, 1280])
waterChart = Card([waterHeading, waterRadial], "card", "column", "m")
waterHeading = Heading("Water Use Today", "h3")
waterRadial = RadialChart(waterSectors, waterUsage)
waterSectors = ["Residential", "Commercial", "Industrial", "Municipal", "Loss/Leakage"]
waterUsage = [18500, 12200, 9800, 4100, 2400]
incidentsSection = Card([incidentsHeading, incidentsTable], "card", "column", "m")
incidentsHeading = Heading("Open Incidents", "h3")
incidentsTable = Table([incIdCol, incTypeCol, incLocationCol, incSeverityCol, incStatusCol, incTimeCol])
incIdCol = Col("ID", ["INC-2024-0847", "INC-2024-0846", "INC-2024-0845", "INC-2024-0844", "INC-2024-0843", "INC-2024-0842", "INC-2024-0841"])
incTypeCol = Col("Type", ["Water Main Break", "Traffic Signal Out", "Gas Leak", "Power Outage", "Sewer Overflow", "Road Collapse", "Bridge Inspection"])
incLocationCol = Col("Location", ["5th & Main (Downtown)", "Northside Blvd & 12th", "Harbor District Warehouse Row", "University District Substation", "Eastside Industrial Park", "Westside Freeway Ramp", "Old Town Bridge"])
incSeverityCol = Col("Severity", ["Critical", "High", "Critical", "High", "Medium", "Critical", "Low"])
incStatusCol = Col("Status", ["Dispatched", "En Route", "Assessing", "Dispatched", "Contained", "Dispatched", "Scheduled"])
incTimeCol = Col("Reported", ["14:22", "14:18", "14:05", "13:55", "13:40", "13:15", "12:30"])
emergencyVehicles = Card([evHeading, evList], "card", "column", "m")
evHeading = Heading("Emergency Vehicles Deployed", "h3")
evList = ListBlock(evItems, "number")
evItems = [ev1, ev2, ev3, ev4, ev5, ev6, ev7]
ev1 = ListItem("Engine 12 — Structure Fire", "Downtown, 5th & Main | Dispatched 14:22 | ETA 3 min", null, "Track")
ev2 = ListItem("Medic 7 — MVA", "Northside Blvd & 12th | En Route 14:18 | ETA 5 min", null, "Track")
ev3 = ListItem("HazMat 3 — Gas Leak", "Harbor District Warehouse Row | On Scene 14:05", null, "Track")
ev4 = ListItem("Engine 9 — Transformer Fire", "University District Substation | Dispatched 13:55 | ETA 7 min", null, "Track")
ev5 = ListItem("Rescue 4 — Trench Rescue", "Eastside Industrial Park | En Route 13:40 | ETA 12 min", null, "Track")
ev6 = ListItem("Engine 15 — Bridge Collapse", "Westside Freeway Ramp | Dispatched 13:15 | ETA 8 min", null, "Track")
ev7 = ListItem("Ladder 2 — Inspection", "Old Town Bridge | Scheduled 12:30", null, "Track")
parkingAvailability = Card([parkHeading, parkBar], "card", "column", "m")
parkHeading = Heading("Parking Availability — Downtown", "h3")
parkBar = HorizontalBarChart(parkZones, [parkAvailable, parkOccupied], "grouped", "Spaces", "Zone")
parkZones = ["Garage A (Civic Center)", "Garage B (Arts District)", "Garage C (Financial)", "Street Metered (Core)", "Lot D (Convention)", "Garage E (Waterfront)", "Lot F (Stadium)"]
parkAvailable = Series("Available", [142, 89, 203, 67, 156, 94, 312])
parkOccupied = Series("Occupied", [358, 211, 197, 183, 244, 206, 88])
eventsWeekend = Card([eventsHeading, eventsList], "card", "column", "m")
eventsHeading = Heading("Public Events This Weekend", "h3")
eventsList = ListBlock(eventItems, "number")
eventItems = [evt1, evt2, evt3, evt4, evt5]
evt1 = ListItem("Riverfront Music Festival", "Sat 10:00–22:00 | Harbor District | Est. 15,000 attendees | Road closures: Harbor Blvd", null, "Details")
evt2 = ListItem("Marathon & 10K Race", "Sun 07:00–12:00 | Citywide Route | Est. 8,000 runners | Rolling street closures", null, "Details")
evt3 = ListItem("University Homecoming Parade", "Sat 14:00–16:00 | University District | Est. 5,000 spectators | College Ave closed", null, "Details")
evt4 = ListItem("Farmers Market Expansion", "Sat 08:00–14:00 | Downtown Plaza | Est. 3,000 visitors | 2 blocks pedestrianized", null, "Details")
evt5 = ListItem("Industrial Job Fair", "Sat 10:00–16:00 | Industrial Zone Expo Center | Est. 2,500 attendees | Shuttle service added", null, "Details")
citizenReports = Card([reportsHeading, reportsFeed], "card", "column", "m")
reportsHeading = Heading("Citizen Reports (Live Feed)", "h3")
reportsFeed = ListBlock(reportItems, "number")
reportItems = [rpt1, rpt2, rpt3, rpt4, rpt5, rpt6]
rpt1 = ListItem("Pothole on 3rd Ave", "Northside | Submitted 14:28 | Photo attached | Triaged: Public Works", null, "View")
rpt2 = ListItem("Graffiti — Park Bridge", "Downtown | Submitted 14:25 | Photo attached | Triaged: Parks Dept", null, "View")
rpt3 = ListItem("Streetlight Outage", "Eastside, Oak St & 7th | Submitted 14:20 | Triaged: Electrical", null, "View")
rpt4 = ListItem("Missed Trash Collection", "Westside, Zone 4 | Submitted 14:15 | Triaged: Sanitation", null, "View")
rpt5 = ListItem("Noise Complaint — Construction", "Harbor District | Submitted 14:10 | Triaged: Code Enforcement", null, "View")
rpt6 = ListItem("Tree Down — Bike Path", "University District | Submitted 14:05 | Photo attached | Triaged: Parks Dept", null, "View")
serviceBacklog = Card([backlogHeading, backlogTable], "card", "column", "m")
backlogHeading = Heading("Service Request Backlog", "h3")
backlogTable = Table([backlogDeptCol, backlogOpenCol, backlogAvgDaysCol, backlogOldestCol])
backlogDeptCol = Col("Department", ["Public Works", "Parks & Rec", "Electrical", "Sanitation", "Water Dept", "Code Enforcement", "Transportation"])
backlogOpenCol = Col("Open Requests", [142, 87, 56, 43, 38, 29, 24])
backlogAvgDaysCol = Col("Avg Days Open", [12.4, 8.7, 15.2, 5.1, 18.6, 22.3, 9.8])
backlogOldestCol = Col("Oldest (Days)", [47, 31, 52, 14, 61, 44, 28])
weatherCard = Card([weatherHeading, weatherDetails], "sunk", "column", "m")
weatherHeading = Heading("Current Weather Details", "h3")
weatherDetails = TextContent("Temperature: 18°C | Feels like: 17°C | Humidity: 62% | Wind: SW 12 km/h | Pressure: 1018 hPa | Visibility: 10 km | UV Index: 4 (Moderate) | Sunrise: 06:42 | Sunset: 19:18 | Precipitation (24h): 0 mm | Forecast: Partly cloudy through evening, low 11°C overnight")
roadworksSection = Card([rwHeading, rwTable], "card", "column", "m")
rwHeading = Heading("Roadworks Planned This Month", "h3")
rwTable = Table([rwProjectCol, rwLocationCol, rwStartCol, rwEndCol, rwImpactCol, rwStatusCol])
rwProjectCol = Col("Project", ["Main St Reconstruction", "Bridge Deck Replacement", "Transit Lane Installation", "Utility Undergrounding", "Intersection Redesign", "Bike Lane Extension", "Pavement Preservation"])
rwLocationCol = Col("Location", ["Main St (1st–10th)", "Old Town Bridge", "Northside Blvd", "Downtown Core", "5th & Oak", "University Ave", "Citywide — Zone 3"])
rwStartCol = Col("Start", ["Oct 7", "Oct 14", "Oct 21", "Oct 28", "Oct 10", "Oct 17", "Oct 3"])
rwEndCol = Col("End", ["Nov 15", "Dec 20", "Nov 30", "Jan 15", "Oct 24", "Nov 10", "Oct 31"])
rwImpactCol = Col("Traffic Impact", ["High — Full Closure", "High — Detour", "Medium — Lane Shift", "Low — Night Work", "Medium — Lane Closure", "Low — Shoulder Work", "Minimal — Rolling"])
rwStatusCol = Col("Status", ["Permitted", "Permitted", "Planning", "Design", "Permitted", "Approved", "Scheduled"])
maintenanceSection = Card([maintHeading, maintTable], "card", "column", "m")
maintHeading = Heading("Infrastructure Jobs Due for Maintenance", "h3")
maintTable = Table([maintAssetCol, maintTypeCol, maintDistrictCol, maintDueCol, maintPriorityCol, maintAssignedCol])
maintAssetCol = Col("Asset", ["Water Pump Station #4", "Substation 12 Transformers", "Bridge 07 Expansion Joints", "Sewer Lift Station #9", "Traffic Signal Cabinet 44", "Reservoir Valve Chamber", "Streetlight Circuit 18"])
maintTypeCol = Col("Maintenance Type", ["Preventive", "Predictive", "Inspection", "Corrective", "Preventive", "Inspection", "Preventive"])
maintDistrictCol = Col("District", ["Industrial", "University", "Downtown", "Harbor", "Eastside", "Northside", "Westside"])
maintDueCol = Col("Due Date", ["Oct 5", "Oct 8", "Oct 12", "Oct 3", "Oct 15", "Oct 10", "Oct 7"])
maintPriorityCol = Col("Priority", ["High", "Critical", "Medium", "Critical", "Medium", "High", "Low"])
maintAssignedCol = Col("Assigned Crew", ["Crew Alpha", "Crew Beta", "Crew Gamma", "Crew Delta", "Crew Epsilon", "Crew Zeta", "Crew Eta"])
actionButtons = Card([dispatchForm, alertForm], "clear", "row", "l", "stretch", "between")
dispatchForm = Form("dispatch-crew", dispatchButtons, [dispatchTypeField, dispatchLocationField, dispatchPriorityField, dispatchNotesField])
dispatchTypeField = FormControl("Crew Type", dispatchTypeSelect)
dispatchTypeSelect = Select("crew_type", dispatchTypeOptions, "Select crew type")
dispatchTypeOptions = [dtFire, dtEMS, dtHazMat, dtPublicWorks, dtElectrical, dtSanitation, dtParks, dtPolice, dtTransport]
dtFire = SelectItem("fire", "Fire / Rescue")
dtEMS = SelectItem("ems", "EMS / Ambulance")
dtHazMat = SelectItem("hazmat", "HazMat")
dtPublicWorks = SelectItem("publicworks", "Public Works")
dtElectrical = SelectItem("electrical", "Electrical")
dtSanitation = SelectItem("sanitation", "Sanitation")
dtParks = SelectItem("parks", "Parks & Forestry")
dtPolice = SelectItem("police", "Police Traffic")
dtTransport = SelectItem("transport", "Transit Operations")
dispatchLocationField = FormControl("Location", dispatchLocationInput, "Address, intersection, or landmark")
dispatchLocationInput = Input("location", "e.g., 5th & Main, Downtown")
dispatchPriorityField = FormControl("Priority", dispatchPriorityRadio)
dispatchPriorityRadio = RadioGroup("priority", dispatchPriorityOptions, "Normal")
dispatchPriorityOptions = [dpLow, dpNormal, dpHigh, dpCritical]
dpLow = RadioItem("Low", "Non-urgent, schedule within 24h", "low")
dpNormal = RadioItem("Normal", "Standard response, within 4h", "normal")
dpHigh = RadioItem("High", "Expedited, within 1h", "high")
dpCritical = RadioItem("Critical", "Immediate, lights & sirens", "critical")
dispatchNotesField = FormControl("Notes", dispatchNotesArea, "Additional details for dispatch")
dispatchNotesArea = TextArea("notes", "Hazards, access codes, contact on scene...", 3)
dispatchButtons = Buttons([dispatchSubmitBtn, dispatchCancelBtn])
dispatchSubmitBtn = Button("Dispatch Crew", null, "primary")
dispatchCancelBtn = Button("Clear", null, "tertiary")
alertForm = Form("public-alert", alertButtons, [alertChannelField, alertSeverityField, alertMessageField])
alertChannelField = FormControl("Channel", alertChannelSelect)
alertChannelSelect = Select("channel", alertChannelOptions, "All Channels")
alertChannelOptions = [acAll, acSMS, acApp, acEmail, acSocial, acRadio, acSigns]
acAll = SelectItem("all", "All Channels")
acSMS = SelectItem("sms", "SMS / Wireless Emergency Alerts")
acApp = SelectItem("app", "City Mobile App Push")
acEmail = SelectItem("email", "Email Subscribers")
acSocial = SelectItem("social", "Social Media (X, Facebook)")
acRadio = SelectItem("radio", "Emergency Alert System (Radio/TV)")
acSigns = SelectItem("signs", "Variable Message Signs")
alertSeverityField = FormControl("Severity", alertSeverityRadio)
alertSeverityRadio = RadioGroup("severity", alertSeverityOptions, "Advisory")
alertSeverityOptions = [asAdvisory, asWatch, asWarning, asEmergency]
asAdvisory = RadioItem("Advisory", "Informational — no immediate action needed", "advisory")
asWatch = RadioItem("Watch", "Conditions favorable — stay informed", "watch")
asWarning = RadioItem("Warning", "Imminent threat — take action now", "warning")
asEmergency = RadioItem("Emergency", "Life safety threat — immediate action required", "emergency")
alertMessageField = FormControl("Message", alertMessageArea, "Plain text, max 360 chars for WEA/SMS")
alertMessageArea = TextArea("message", "Enter alert message here...", 4)
alertButtons = Buttons([alertSendBtn, alertPreviewBtn, alertCancelBtn])
alertSendBtn = Button("Send Alert", null, "primary")
alertPreviewBtn = Button("Preview", null, "secondary")
alertCancelBtn = Button("Cancel", null, "tertiary")