root = Card([header, alertBar, kpiRow, mainGrid, dispatchSection, alertSection, followups], "card", "column", "l")
header = CardHeader("City Operations Center", "Live status across all districts")
alertBar = Callout("info", "All systems nominal", "No critical alerts. 2 warnings active in the Riverside district.")
kpiRow = Card([weatherKpi, congestionKpi, transitKpi, waterKpi], "sunk", "row", "m")
weatherKpi = Card([weatherTitle, weatherValue, weatherDetail], "clear", "column", "xs")
weatherTitle = TextContent("Current Weather", "small-heavy")
weatherValue = TextContent("18°C / Partly Cloudy", "large")
weatherDetail = TextContent("Wind 12 km/h · Humidity 64%", "small")
congestionKpi = Card([congestionTitle, congestionValue, congestionDetail], "clear", "column", "xs")
congestionTitle = TextContent("Congestion Now", "small-heavy")
congestionValue = TextContent("Moderate", "large")
congestionDetail = TextContent("Avg speed 34 km/h in CBD", "small")
transitKpi = Card([transitTitle, transitValue, transitDetail], "clear", "column", "xs")
transitTitle = TextContent("Transit Punctuality", "small-heavy")
transitValue = TextContent("92.4%", "large")
transitDetail = TextContent("On-time across 412 routes", "small")
waterKpi = Card([waterTitle, waterValue, waterDetail], "clear", "column", "xs")
waterTitle = TextContent("Water Use Today", "small-heavy")
waterValue = TextContent("41.2 ML", "large")
waterDetail = TextContent("3.8% below yesterday", "small")
mainGrid = Card([congestionSection, transitSection, airSection, energySection, incidentsSection, vehiclesSection, parkingSection, eventsSection, reportsSection, backlogSection, roadworksSection, maintenanceSection], "clear", "row", "m")
congestionSection = Card([congestionHeading, congestionChart], "sunk", "column", "m")
congestionHeading = Heading("Congestion by District", "h3")
congestionChart = HorizontalBarChart(["Downtown", "Riverside", "Northgate", "Eastside", "Westfield", "Southport"], [congestionSeries], "grouped", "Congestion index", "District")
congestionSeries = Series("Congestion index", [68, 82, 45, 51, 39, 58])
transitSection = Card([transitHeading, transitChart], "sunk", "column", "m")
transitHeading = Heading("Transit Punctuality by Line", "h3")
transitChart = BarChart(["Bus 12", "Bus 45", "Metro A", "Metro B", "Tram 7"], [transitSeries], "grouped", "Route", "% on time")
transitSeries = Series("On-time %", [95, 88, 97, 91, 89])
airSection = Card([airHeading, airChart], "sunk", "column", "m")
airHeading = Heading("Air Quality by District", "h3")
airChart = RadarChart(["Downtown", "Riverside", "Northgate", "Eastside", "Westfield", "Southport"], [airSeries])
airSeries = Series("AQI", [52, 78, 44, 61, 39, 47])
energySection = Card([energyHeading, energyChart], "sunk", "column", "m")
energyHeading = Heading("Energy Use — Past Week", "h3")
energyChart = AreaChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [energySeries], "natural", "Day", "MWh")
energySeries = Series("Energy use (MWh)", [820, 910, 875, 940, 1020, 760, 690])
incidentsSection = Card([incidentsHeading, incidentsTable], "sunk", "column", "m")
incidentsHeading = Heading("Open Incidents", "h3")
incidentsTable = Table([incidentId, incidentLoc, incidentSev, incidentType])
incidentId = Col("ID", ["INC-1042", "INC-1043", "INC-1044", "INC-1045"])
incidentLoc = Col("Location", ["Riverside Ave", "Northgate Mall", "Eastside Park", "Downtown 5th St"])
incidentSev = Col("Severity", ["High", "Medium", "Low", "Medium"])
incidentType = Col("Type", ["Flooding", "Signal outage", "Tree down", "Water leak"])
vehiclesSection = Card([vehiclesHeading, vehiclesTable], "sunk", "column", "m")
vehiclesHeading = Heading("Emergency Vehicle Deployment", "h3")
vehiclesTable = Table([vehicleId, vehicleType, vehicleLoc, vehicleStatus])
vehicleId = Col("Unit", ["E-12", "E-07", "A-03", "P-21"])
vehicleType = Col("Type", ["Ambulance", "Engine", "Ambulance", "Patrol"])
vehicleLoc = Col("Location", ["Riverside Ave", "Northgate", "Eastside", "Downtown"])
vehicleStatus = Col("Status", ["On scene", "En route", "Available", "En route"])
parkingSection = Card([parkingHeading, parkingChart], "sunk", "column", "m")
parkingHeading = Heading("Parking Availability — Downtown", "h3")
parkingChart = SingleStackedBarChart(["Garage A", "Garage B", "Garage C", "Garage D"], [78, 45, 92, 60])
eventsSection = Card([eventsHeading, eventsList], "sunk", "column", "m")
eventsHeading = Heading("Public Events This Weekend", "h3")
eventsList = ListBlock([event1, event2, event3], "number")
event1 = ListItem("Riverside Food Festival", "Sat 10:00–18:00 · Riverside Park", null, "Details")
event2 = ListItem("City Marathon", "Sun 07:00–12:00 · Downtown route", null, "Details")
event3 = ListItem("Open Air Cinema", "Sat 20:00–23:00 · Southport Pier", null, "Details")
reportsSection = Card([reportsHeading, reportsList], "sunk", "column", "m")
reportsHeading = Heading("Citizen Reports — Live", "h3")
reportsList = ListBlock([report1, report2, report3, report4], "image")
report1 = ListItem("Pothole on Main St", "2 min ago · Downtown", [reportImg1], "View")
report2 = ListItem("Broken streetlight", "7 min ago · Riverside", [reportImg2], "View")
report3 = ListItem("Overflowing bin", "12 min ago · Eastside", [reportImg3], "View")
report4 = ListItem("Noise complaint", "18 min ago · Westfield", [reportImg4], "View")
reportImg1 = "https://picsum.photos/seed/pothole/80/80"
reportImg2 = "https://picsum.photos/seed/streetlight/80/80"
reportImg3 = "https://picsum.photos/seed/bin/80/80"
reportImg4 = "https://picsum.photos/seed/noise/80/80"
backlogSection = Card([backlogHeading, backlogProgress], "sunk", "column", "m")
backlogHeading = Heading("Service Request Backlog", "h3")
backlogProgress = Progress(67, "67% of 1,240 requests resolved")
roadworksSection = Card([roadworksHeading, roadworksList], "sunk", "column", "m")
roadworksHeading = Heading("Roadworks Planned This Month", "h3")
roadworksList = ListBlock([road1, road2, road3], "number")
road1 = ListItem("High St resurfacing", "Jun 12–14 · Full closure 22:00–05:00", null, "Details")
road2 = ListItem("Bridge inspection", "Jun 18 · Lane closure on Riverside Bridge", null, "Details")
road3 = ListItem("Utility works", "Jun 22–26 · Northgate Ave partial closure", null, "Details")
maintenanceSection = Card([maintenanceHeading, maintenanceTable], "sunk", "column", "m")
maintenanceHeading = Heading("Infrastructure Jobs Due", "h3")
maintenanceTable = Table([maintAsset, maintDue, maintPriority])
maintAsset = Col("Asset", ["Pump station #4", "Streetlight grid B", "Water main 12th St", "Traffic signal 5th"])
maintDue = Col("Due", ["Jun 15", "Jun 20", "Jun 24", "Jun 28"])
maintPriority = Col("Priority", ["High", "Medium", "High", "Low"])
dispatchSection = Card([dispatchHeading, dispatchForm], "sunk", "column", "m")
dispatchHeading = Heading("Dispatch a Crew", "h3")
dispatchForm = Form("dispatch-crew", dispatchButtons, [dispatchDistrict, dispatchCrew, dispatchNotes])
dispatchDistrict = FormControl("District", dispatchDistrictSelect)
dispatchDistrictSelect = Select("district", [districtD, districtR, districtN, districtE, districtW, districtS], "Select district")
districtD = SelectItem("Downtown", "Downtown")
districtR = SelectItem("Riverside", "Riverside")
districtN = SelectItem("Northgate", "Northgate")
districtE = SelectItem("Eastside", "Eastside")
districtW = SelectItem("Westfield", "Westfield")
districtS = SelectItem("Southport", "Southport")
dispatchCrew = FormControl("Crew type", dispatchCrewSelect)
dispatchCrewSelect = Select("crew", [crewA, crewB, crewC], "Select crew type")
crewA = SelectItem("Roads", "Roads")
crewB = SelectItem("Utilities", "Utilities")
crewC = SelectItem("Parks", "Parks")
dispatchNotes = FormControl("Notes", dispatchNotesInput, "Optional instructions")
dispatchNotesInput = Input("notes", "e.g. priority, access notes")
dispatchButtons = Buttons([dispatchSubmit])
dispatchSubmit = Button("Dispatch crew", null, "primary")
alertSection = Card([alertHeading, alertForm], "sunk", "column", "m")
alertHeading = Heading("Send Public Alert", "h3")
alertForm = Form("public-alert", alertButtons, [alertMessage, alertChannel])
alertMessage = FormControl("Alert message", alertMessageInput, "Max 280 characters")
alertMessageInput = Input("message", "e.g. Road closure on High St")
alertChannel = FormControl("Channels", alertChannelGroup)
alertChannelGroup = CheckBoxGroup("channels", [channelSms, channelApp, channelEmail])
channelSms = CheckBoxItem("SMS", "Text all residents in affected area", "sms", true)
channelApp = CheckBoxItem("City app", "Push notification to app users", "app", true)
channelEmail = CheckBoxItem("Email", "Email subscribers", "email", false)
alertButtons = Buttons([alertSend])
alertSend = Button("Send alert", null, "primary")
followups = FollowUpBlock([followup1, followup2, followup3])
followup1 = FollowUpItem("Focus on Riverside district")
followup2 = FollowUpItem("Show incident INC-1042 details")
followup3 = FollowUpItem("View weekly energy report")