root = Card([header, statusRow, calloutCritical, weatherCard, focusCard, kpiCard, congestionCard, airCard, energyCard, incidentsCard, emergencyCard, eventsCard, reportsCard, roadworksCard, maintCard, dispatchCard, alertCard])
header = CardHeader("City Operations Center", "Live city status · updated just now")
statusRow = Card([badgeCritical, badgeHigh, badgeOpen, badgeVehicles], "sunk", "row", "s")
badgeCritical = Badge("1 critical", "destructive")
badgeHigh = Badge("2 high", "warning")
badgeOpen = Badge("5 open incidents", "secondary")
badgeVehicles = Badge("14 vehicles deployed", "default")
calloutCritical = Callout("error", "Critical incident active", "Water main break at Central Ave / 5th St (INC-2041). Response underway — avoid the area.")
weatherCard = Card([weatherHeading, weatherBody], "sunk")
weatherHeading = Heading("Current weather", "h3")
weatherBody = Card([tempText, condText, windText, humText], "clear", "row", "l")
tempText = TextContent("18°C", "large-heavy")
condText = TextContent("Partly cloudy", "default")
windText = TextContent("Wind 12 km/h", "small")
humText = TextContent("Humidity 45%", "small")
focusCard = Card([focusHeading, focusSelect], "sunk")
focusHeading = Heading("Focus on a district", "h3")
focusSelect = Select("focus_district", [focusAll, focusCentral, focusNorth, focusSouth, focusEast, focusWest], "All districts")
focusAll = SelectItem("all", "All districts")
focusCentral = SelectItem("central", "Central")
focusNorth = SelectItem("north", "North")
focusSouth = SelectItem("south", "South")
focusEast = SelectItem("east", "East")
focusWest = SelectItem("west", "West")
kpiCard = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Live indicators", "h3")
kpiTable = Table([kpiMetric, kpiValue, kpiStatus])
kpiMetric = Col("Indicator", ["Congestion right now", "Transit punctuality", "Water use today", "Parking downtown", "Service request backlog"])
kpiValue = Col("Value", ["82% · critical", "94% on time", "68% of daily budget", "312 spots free", "1,284 open"])
kpiStatus = Col("Status", ["Critical", "Good", "Normal", "Normal", "Watch"])
congestionCard = Card([congHeading, congChart], "sunk")
congHeading = Heading("Congestion right now, by district", "h3")
congSeries = Series("Congestion %", [82, 45, 61, 38, 74])
congChart = HorizontalBarChart(["Central", "North", "South", "East", "West"], [congSeries], "grouped", "Congestion %", "District")
airCard = Card([airHeading, airChart], "sunk")
airHeading = Heading("Air quality by district", "h3")
airSeries = Series("AQI", [85, 42, 63, 71, 38])
airChart = BarChart(["Central", "North", "South", "East", "West"], [airSeries], "grouped", "District", "AQI")
energyCard = Card([energyHeading, energyChart], "sunk")
energyHeading = Heading("Energy use — past 7 days", "h3")
energySeries = Series("MWh used", [4820, 4910, 4760, 5030, 5120, 4980, 5250])
energyChart = LineChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [energySeries], "natural", "Day", "MWh")
incidentsCard = Card([incidentsHeading, incidentsTable], "sunk")
incidentsHeading = Heading("Open incidents", "h3")
incidentsTable = Table([incId, incLocation, incType, incSeverity])
incId = Col("ID", ["INC-2041", "INC-2042", "INC-2043", "INC-2044", "INC-2045"])
incLocation = Col("Location", ["Central Ave / 5th St", "Northgate Mall", "Riverside Park", "Hillview Rd", "Old Town Market"])
incType = Col("Type", ["Water main break", "Traffic signal outage", "Tree down", "Pothole cluster", "Sewer odor"])
incSeverity = Col("Severity", ["Critical", "High", "Medium", "Low", "Medium"])
emergencyCard = Card([emergencyHeading, emergencyList], "sunk")
emergencyHeading = Heading("Emergency vehicles deployed", "h3")
emergencyList = ListBlock([ev1, ev2, ev3, ev4], "number")
ev1 = ListItem("Ambulance A-12", "Central Ave — responding to INC-2041")
ev2 = ListItem("Engine 4", "Northgate Mall — fire standby")
ev3 = ListItem("Rescue 2", "Riverside Park — tree down")
ev4 = ListItem("Patrol 7", "Hillview Rd — traffic control")
eventsCard = Card([eventsHeading, eventsList], "sunk")
eventsHeading = Heading("Public events this weekend", "h3")
eventsList = ListBlock([e1, e2, e3], "number")
e1 = ListItem("Farmers Market", "Sat 08:00–14:00 · Central Plaza")
e2 = ListItem("City Marathon", "Sun 07:00–12:00 · Riverside Route · road closures")
e3 = ListItem("Open-air concert", "Sat 18:00–23:00 · Northgate Field")
reportsCard = Card([reportsHeading, reportsList], "sunk")
reportsHeading = Heading("Citizen reports — live feed", "h3")
reportsList = ListBlock([r1, r2, r3, r4], "number")
r1 = ListItem("Graffiti near bus stop", "2 min ago · Central · ticket 311-8821")
r2 = ListItem("Streetlight flickering", "6 min ago · East · ticket 311-8822")
r3 = ListItem("Blocked storm drain", "11 min ago · South · ticket 311-8823")
r4 = ListItem("Noise complaint", "17 min ago · North · ticket 311-8824")
roadworksCard = Card([roadworksHeading, roadworksTable], "sunk")
roadworksHeading = Heading("Roadworks planned this month", "h3")
roadworksTable = Table([rwRoad, rwDates, rwImpact])
rwRoad = Col("Road", ["Main St", "Oak Ave", "Harbor Blvd", "Cedar Ln"])
rwDates = Col("Dates", ["Mar 3–7", "Mar 10–14", "Mar 17–21", "Mar 24–28"])
rwImpact = Col("Impact", ["Full closure", "Lane reduction", "Night works", "Sidewalk closure"])
maintCard = Card([maintHeading, maintTable], "sunk")
maintHeading = Heading("Infrastructure jobs due for maintenance", "h3")
maintTable = Table([mId, mAsset, mDue, mStatus])
mId = Col("ID", ["MNT-551", "MNT-552", "MNT-553", "MNT-554"])
mAsset = Col("Asset", ["Bridge 7 bearings", "Water pump P-3", "Traffic signal #112", "Street lighting grid"])
mDue = Col("Due", ["Overdue 5d", "Mar 12", "Mar 18", "Mar 26"])
mStatus = Col("Status", ["Scheduled", "Parts ordered", "Awaiting crew", "Planned"])
dispatchCard = Card([dispatchHeading, dispatchForm], "sunk")
dispatchHeading = Heading("Dispatch a crew", "h3")
dispatchForm = Form("dispatch", dispatchButtons, [crewField, distField, priorityField])
crewField = FormControl("Crew type", crewSelect)
crewSelect = Select("crew_type", [crewWater, crewTransport, crewParks, crewPower], "Select crew type")
crewWater = SelectItem("water", "Water & sewer crew")
crewTransport = SelectItem("traffic", "Traffic signal crew")
crewParks = SelectItem("parks", "Parks & trees crew")
crewPower = SelectItem("power", "Electrical crew")
distField = FormControl("District", distSelect)
distSelect = Select("dispatch_district", [distCentral, distNorth, distSouth, distEast, distWest], "Select district")
distCentral = SelectItem("central", "Central")
distNorth = SelectItem("north", "North")
distSouth = SelectItem("south", "South")
distEast = SelectItem("east", "East")
distWest = SelectItem("west", "West")
priorityField = FormControl("Priority", priorityRadio)
priorityRadio = RadioGroup("priority", [prLow, prMed, prHigh])
prLow = RadioItem("Low", "Handle within 48 h", "low")
prMed = RadioItem("Medium", "Handle today", "medium")
prHigh = RadioItem("High", "Immediate response", "high")
dispatchButtons = Buttons([dispatchBtn])
dispatchBtn = Button("Dispatch crew", null, "primary")
alertCard = Card([alertHeading, alertForm], "sunk")
alertHeading = Heading("Send a public alert", "h3")
alertForm = Form("public-alert", alertButtons, [alertMessageField, alertChannelField, alertSeverityField])
alertMessageField = FormControl("Message", alertMessage, "This text is delivered to citizens as-is")
alertMessage = TextArea("message", "Write the alert text citizens will receive…", 3)
alertChannelField = FormControl("Channel", channelRadio)
channelRadio = RadioGroup("channel", [chSMS, chApp, chAll])
chSMS = RadioItem("SMS", "Text to subscribed phones", "sms")
chApp = RadioItem("App", "Push notification to residents", "app")
chAll = RadioItem("All channels", "SMS, app, sirens, and web", "all")
alertSeverityField = FormControl("Severity", severitySelect)
severitySelect = Select("severity", [sevInfo, sevAdvisory, sevWarning], "Select severity")
sevInfo = SelectItem("info", "Info")
sevAdvisory = SelectItem("advisory", "Advisory")
sevWarning = SelectItem("warning", "Warning")
alertButtons = Buttons([sendAlertBtn])
sendAlertBtn = Button("Send alert", null, "primary")