root = Card([header, districtSelector, kpiRow, chartsRow, incidentsSection, operationsSection, eventsSection, maintenanceSection, actionButtons])
header = CardHeader("Metro City Operations Center", "Real-time city management dashboard · Last updated: 2026-04-15 14:32")
districtSelector = FormControl("Focus District", districtSelect, "Filter all views to a specific district")
districtSelect = Select("focus-district", [dsAll, dsDowntown, dsNorthside, dsEastport, dsWestend, dsSouthgate, dsRiverside, dsUniversity], "All Districts")
dsAll = SelectItem("all", "All Districts")
dsDowntown = SelectItem("downtown", "Downtown")
dsNorthside = SelectItem("northside", "Northside")
dsEastport = SelectItem("eastport", "Eastport")
dsWestend = SelectItem("westend", "Westend")
dsSouthgate = SelectItem("southgate", "Southgate")
dsRiverside = SelectItem("riverside", "Riverside")
dsUniversity = SelectItem("university", "University District")
kpiRow = SnippetCardBlock([kpiCongestion, kpiTransit, kpiAirQuality, kpiWeather, kpiWater, kpiParking], "grid", true)
kpiCongestion = SnippetCardItem("kpi-congestion", kpiCongestionLhs, kpiCongestionRhs)
kpiCongestionLhs = IconText(kpiCongestionIcon, "warning", "m", "Congestion Index", "City-wide average", false, "horizontal")
kpiCongestionIcon = Icon("car", "transportation")
kpiCongestionRhs = BoldText("number", "78%", "+5% vs 1hr ago", "metric", "lg")
kpiTransit = SnippetCardItem("kpi-transit", kpiTransitLhs, kpiTransitRhs)
kpiTransitLhs = IconText(kpiTransitIcon, "success", "m", "Transit Punctuality", "On-time departures", false, "horizontal")
kpiTransitIcon = Icon("train-front", "transportation")
kpiTransitRhs = BoldText("number", "92.4%", "-0.8% vs target", "metric", "lg")
kpiAirQuality = SnippetCardItem("kpi-air", kpiAirLhs, kpiAirRhs)
kpiAirLhs = IconText(kpiAirIcon, "info", "m", "Air Quality Index", "City average (AQI)", false, "horizontal")
kpiAirIcon = Icon("cloud", "weather")
kpiAirRhs = BoldText("number", "67", "Moderate", "text", "lg")
kpiWeather = SnippetCardItem("kpi-weather", kpiWeatherLhs, kpiWeatherRhs)
kpiWeatherLhs = IconText(kpiWeatherIcon, "neutral", "m", "Current Weather", "Downtown station", false, "horizontal")
kpiWeatherIcon = Icon("sun", "weather")
kpiWeatherRhs = BoldText("text", "22°C · Partly Cloudy", "Humidity 58% · Wind 12 km/h", "text", "md")
kpiWater = SnippetCardItem("kpi-water", kpiWaterLhs, kpiWaterRhs)
kpiWaterLhs = IconText(kpiWaterIcon, "neutral", "m", "Water Use Today", "Residential + commercial", false, "horizontal")
kpiWaterIcon = Icon("droplets", "nature")
kpiWaterRhs = BoldText("number", "487 ML", "+3.2% vs avg", "metric", "lg")
kpiParking = SnippetCardItem("kpi-parking", kpiParkingLhs, kpiParkingRhs)
kpiParkingLhs = IconText(kpiParkingIcon, "success", "m", "Downtown Parking", "Available spaces", false, "horizontal")
kpiParkingIcon = Icon("parking-circle", "transportation")
kpiParkingRhs = BoldText("number", "1,247 / 3,850", "32% available", "text", "lg")
chartsRow = SectionBlock([secEnergy, secAirQuality], false)
secEnergy = SectionItem("energy", "Energy Use — Past 7 Days", [energyChart])
energyChart = AreaChart(energyDays, [energyResidential, energyCommercial, energyIndustrial], "natural", "Day", "Consumption (MWh)")
energyDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
energyResidential = Series("Residential", [1420, 1380, 1450, 1480, 1510, 1650, 1580])
energyCommercial = Series("Commercial", [2180, 2250, 2310, 2290, 2340, 1980, 1720])
energyIndustrial = Series("Industrial", [3450, 3520, 3480, 3550, 3610, 3200, 2980])
secAirQuality = SectionItem("air-district", "Air Quality by District", [airQualityChart])
airQualityChart = HorizontalBarChart(airDistricts, [airSeries], "grouped", "AQI", "District")
airDistricts = ["Downtown", "Northside", "Eastport", "Westend", "Southgate", "Riverside", "University"]
airSeries = Series("AQI", [72, 58, 81, 45, 69, 52, 61])
incidentsSection = SectionBlock([secIncidents, secEmergency, secParking], false)
secIncidents = SectionItem("incidents", "Open Incidents (12 Active)", [incidentsTable])
incidentsTable = Table([colIncidentId, colIncidentType, colIncidentLocation, colIncidentSeverity, colIncidentSince, colIncidentStatus])
colIncidentId = Col("ID", ["INC-2026-0415-001", "INC-2026-0415-002", "INC-2026-0415-003", "INC-2026-0415-004", "INC-2026-0415-005", "INC-2026-0415-006", "INC-2026-0415-007", "INC-2026-0415-008"], "string")
colIncidentType = Col("Type", ["Traffic Collision", "Water Main Break", "Power Outage", "Gas Leak", "Structural Fire", "Hazmat Spill", "Sinkhole", "Signal Failure"], "string")
colIncidentLocation = Col("Location", ["Main St & 5th Ave", "Northside Reservoir", "Eastport Substation", "Westend Industrial", "Southgate Mall", "Riverside Port", "University Ave", "Downtown Grid"], "string")
colIncidentSeverity = Col("Severity", ["Critical", "High", "High", "Critical", "Critical", "Medium", "Medium", "High"], "string")
colIncidentSince = Col("Since", ["14:18", "13:45", "13:22", "12:58", "12:30", "11:45", "10:12", "09:30"], "string")
colIncidentStatus = Col("Status", ["Dispatched", "En Route", "Assessing", "Dispatched", "On Scene", "Contained", "Monitoring", "Dispatched"], "string")
secEmergency = SectionItem("emergency", "Emergency Vehicles Deployed (24 Active)", [emergencyTable])
emergencyTable = Table([colUnitId, colUnitType, colUnitLocation, colUnitIncident, colUnitETA, colUnitStatus])
colUnitId = Col("Unit", ["ENG-12", "LAD-07", "RES-03", "MED-09", "MED-14", "HAZ-02", "BAT-01", "CHF-01", "ENG-05", "LAD-11", "RES-08", "MED-04", "ENG-18", "MED-11", "HAZ-05", "BAT-03", "CHF-02", "ENG-09", "LAD-04", "RES-01", "MED-07", "ENG-15", "MED-18", "HAZ-01"], "string")
colUnitType = Col("Type", ["Engine", "Ladder", "Rescue", "Medic", "Medic", "Hazmat", "Battalion Chief", "Deputy Chief", "Engine", "Ladder", "Rescue", "Medic", "Engine", "Medic", "Hazmat", "Battalion Chief", "Deputy Chief", "Engine", "Ladder", "Rescue", "Medic", "Engine", "Medic", "Hazmat"], "string")
colUnitLocation = Col("Location", ["Main & 5th", "Main & 5th", "Northside Reservoir", "Eastport Substation", "Eastport Substation", "Westend Industrial", "Westend Industrial", "Southgate Mall", "Southgate Mall", "Riverside Port", "University Ave", "Downtown Grid", "Downtown Grid", "Northside Reservoir", "Northside Reservoir", "Riverside Port", "University Ave", "Main & 5th", "Main & 5th", "Eastport Substation", "Westend Industrial", "Southgate Mall", "Downtown Grid"], "string")
colUnitIncident = Col("Incident", ["INC-001", "INC-001", "INC-002", "INC-003", "INC-003", "INC-004", "INC-004", "INC-005", "INC-005", "INC-006", "INC-007", "INC-008", "INC-001", "INC-002", "INC-002", "INC-006", "INC-007", "INC-001", "INC-001", "INC-003", "INC-004", "INC-005", "INC-008"], "string")
colUnitETA = Col("ETA", ["On Scene", "On Scene", "3 min", "5 min", "5 min", "On Scene", "On Scene", "On Scene", "On Scene", "2 min", "4 min", "6 min", "2 min", "4 min", "4 min", "3 min", "5 min", "1 min", "1 min", "3 min", "2 min", "1 min", "4 min", "7 min"], "string")
colUnitStatus = Col("Status", ["Working", "Working", "En Route", "En Route", "En Route", "Working", "Command", "Command", "Working", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route", "En Route"], "string")
secParking = SectionItem("parking", "Downtown Parking Availability by Zone", [parkingTable])
parkingTable = Table([colParkZone, colParkTotal, colParkAvailable, colParkOccupancy, colParkRate, colParkTrend])
colParkZone = Col("Zone", ["Zone A (Core)", "Zone B (Financial)", "Zone C (Arts)", "Zone D (Convention)", "Zone E (Waterfront)", "Zone F (University Edge)"], "string")
colParkTotal = Col("Total Spaces", [850, 720, 640, 980, 460, 200], "number")
colParkAvailable = Col("Available", [187, 234, 312, 298, 145, 71], "number")
colParkOccupancy = Col("Occupancy", ["78%", "68%", "51%", "70%", "68%", "65%"], "string")
colParkRate = Col("Rate/hr", ["$4.50", "$4.00", "$3.00", "$5.00", "$3.50", "$2.50"], "string")
colParkTrend = Col("Trend (1hr)", ["↑ 12", "↑ 8", "↓ 5", "↑ 15", "↑ 3", "↓ 2"], "string")
operationsSection = SectionBlock([secCitizenReports, secServiceRequests], false)
secCitizenReports = SectionItem("citizen-reports", "Citizen Reports — Live Feed (Last 20)", [reportsList])
reportsList = ListBlock([rep1, rep2, rep3, rep4, rep5, rep6, rep7, rep8], "number", "small")
rep1 = ListItem("Pothole on Elm St at 12th", "Reported 2 min ago · Northside · HIGH priority", null, null, { type: "continue_conversation", context: "Show details for pothole report on Elm St at 12th" })
rep2 = ListItem("Streetlight out on Riverside Dr", "Reported 5 min ago · Riverside · MEDIUM priority", null, null, { type: "continue_conversation", context: "Show details for streetlight outage on Riverside Dr" })
rep3 = ListItem("Graffiti on park restroom", "Reported 8 min ago · University · LOW priority", null, null, { type: "continue_conversation", context: "Show details for graffiti report at park restroom" })
rep4 = ListItem("Missed garbage pickup", "Reported 12 min ago · Eastport · MEDIUM priority", null, null, { type: "continue_conversation", context: "Show details for missed garbage pickup in Eastport" })
rep5 = ListItem("Traffic signal malfunction", "Reported 15 min ago · Downtown · HIGH priority", null, null, { type: "continue_conversation", context: "Show details for traffic signal malfunction Downtown" })
rep6 = ListItem("Park bench damaged", "Reported 18 min ago · Westend · LOW priority", null, null, { type: "continue_conversation", context: "Show details for damaged park bench in Westend" })
rep7 = ListItem("Illegal dumping alley behind 400 Block", "Reported 22 min ago · Southgate · HIGH priority", null, null, { type: "continue_conversation", context: "Show details for illegal dumping report Southgate" })
rep8 = ListItem("Crosswalk paint faded", "Reported 28 min ago · University · MEDIUM priority", null, null, { type: "continue_conversation", context: "Show details for faded crosswalk paint University District" })
secServiceRequests = SectionItem("service-backlog", "Service Request Backlog (347 Open)", [backlogTable])
backlogTable = Table([colReqId, colReqCategory, colReqDistrict, colReqPriority, colReqSubmitted, colReqSLA, colReqAssigned])
colReqId = Col("Request ID", ["SR-2026-012451", "SR-2026-012450", "SR-2026-012449", "SR-2026-012448", "SR-2026-012447", "SR-2026-012446", "SR-2026-012445", "SR-2026-012444", "SR-2026-012443", "SR-2026-012442"], "string")
colReqCategory = Col("Category", ["Street Repair", "Streetlight", "Drainage", "Traffic Signal", "Sidewalk", "Park Maintenance", "Tree Trimming", "Signage", "Pavement Marking", "Bridge Inspection"], "string")
colReqDistrict = Col("District", ["Northside", "Downtown", "Eastport", "Southgate", "Westend", "Riverside", "University", "Downtown", "Northside", "Eastport"], "string")
colReqPriority = Col("Priority", ["High", "Medium", "High", "Critical", "Medium", "Low", "Medium", "Low", "Medium", "High"], "string")
colReqSubmitted = Col("Submitted", ["2026-04-10", "2026-04-11", "2026-04-09", "2026-04-12", "2026-04-08", "2026-04-05", "2026-04-11", "2026-04-07", "2026-04-10", "2026-04-09"], "string")
colReqSLA = Col("SLA Due", ["2026-04-17", "2026-04-18", "2026-04-16", "2026-04-15", "2026-04-15", "2026-04-19", "2026-04-18", "2026-04-14", "2026-04-17", "2026-04-16"], "string")
colReqAssigned = Col("Assigned To", ["Streets Team 3", "Electrical Team 1", "Drainage Team 2", "Traffic Team 1", "Streets Team 1", "Parks Team 2", "Forestry Team 1", "Traffic Team 2", "Streets Team 2", "Engineering Team 1"], "string")
eventsSection = SectionBlock([secEvents], false)
secEvents = SectionItem("events", "Public Events This Weekend (Apr 18–19)", [eventsCards])
eventsCards = CompositeCardBlock([evt1, evt2, evt3, evt4], "grid", true)
evt1 = CompositeCardItem("evt-jazz", evt1Header, [evt1Body, evt1Details], { price: evt1Price, button: evt1Btn })
evt1Header = IconText(evt1Icon, "neutral", "m", "Metro Jazz Festival", "Central Park · Apr 18–19 · 12:00–22:00", true, "horizontal")
evt1Icon = Icon("music", "multimedia")
evt1Body = Text("text", "Three stages, 40+ artists, food vendors, family zone. Expected attendance: 45,000/day.", "Major Event · Ticketed")
evt1Details = EntityList([evt1d1, evt1d2, evt1d3], "small")
evt1d1 = { left: "Road Closures", right: "Park Ave (10th–18th)", rightVariant: "text" }
evt1d2 = { left: "Transit Impact", right: "Lines 2, 5, 9 rerouted", rightVariant: "text" }
evt1d3 = { left: "Security", right: "120 officers + 80 private", rightVariant: "text" }
evt1Price = MetricIndicatorWithStrikethrough("Free Entry", "VIP passes from $150", "$180", { direction: "up", value: 15 })
evt1Btn = Button("View Traffic Plan", { type: "continue_conversation", context: "Show traffic management plan for Metro Jazz Festival" }, "secondary")
evt2 = CompositeCardItem("evt-marathon", evt2Header, [evt2Body, evt2Details], { price: evt2Price, button: evt2Btn })
evt2Header = IconText(evt2Icon, "neutral", "m", "City Marathon 2026", "Citywide Course · Apr 19 · 07:00–13:00", true, "horizontal")
evt2Icon = Icon("heart-pulse", "medical")
evt2Body = Text("text", "42.2 km course through all 7 districts. 18,000 registered runners. Rolling road closures.", "Major Event · Free")
evt2Details = EntityList([evt2d1, evt2d2, evt2d3], "small")
evt2d1 = { left: "Road Closures", right: "42 km rolling closures 06:30–13:30", rightVariant: "text" }
evt2d2 = { left: "Transit Impact", right: "All lines modified; extra service", rightVariant: "text" }
evt2d3 = { left: "Medical", right: "14 aid stations + 40 ambulances", rightVariant: "text" }
evt2Price = MetricIndicatorWithStrikethrough("Free", "Charity bibs from $100", "$125", { direction: "up", value: 20 })
evt2Btn = Button("View Course Map", { type: "continue_conversation", context: "Show marathon course map and road closure schedule" }, "secondary")
evt3 = CompositeCardItem("evt-farmers", evt3Header, [evt3Body, evt3Details], { price: evt3Price, button: evt3Btn })
evt3Header = IconText(evt3Icon, "neutral", "m", "Downtown Farmers Market", "Civic Plaza · Apr 19 · 08:00–14:00", true, "horizontal")
evt3Icon = Icon("leaf", "nature")
evt3Body = Text("text", "120+ local vendors, live music, cooking demos. Expected 8,000 visitors.", "Community Event · Free")
evt3Details = EntityList([evt3d1, evt3d2, evt3d3], "small")
evt3d1 = { left: "Road Closures", right: "Plaza St (Main–3rd) 06:00–15:00", rightVariant: "text" }
evt3d2 = { left: "Parking Impact", right: "Zone A & B reduced 40%", rightVariant: "text" }
evt3d3 = { left: "Waste Plan", right: "Extra 20 bins + compost", rightVariant: "text" }
evt3Price = MetricIndicatorWithStrikethrough("Free", "", null, null)
evt3Btn = Button("Vendor List", { type: "continue_conversation", context: "Show vendor list for Downtown Farmers Market" }, "tertiary")
evt4 = CompositeCardItem("evt-artwalk", evt4Header, [evt4Body, evt4Details], { price: evt4Price, button: evt4Btn })
evt4Header = IconText(evt4Icon, "neutral", "m", "Arts District Art Walk", "Arts District · Apr 18 · 17:00–23:00", true, "horizontal")
evt4Icon = Icon("palette", "design")
evt4Body = Text("text", "50+ galleries open late, street performances, food trucks. Expected 12,000 attendees.", "Cultural Event · Free")
evt4Details = EntityList([evt4d1, evt4d2, evt4d3], "small")
evt4d1 = { left: "Road Closures", right: "Gallery Row (5th–12th) 16:00–23:30", rightVariant: "text" }
evt4d2 = { left: "Parking Impact", right: "Zone C reduced 60%", rightVariant: "text" }
evt4d3 = { left: "Noise Permit", right: "Until 23:00 (amplified sound)", rightVariant: "text" }
evt4Price = MetricIndicatorWithStrikethrough("Free", "", null, null)
evt4Btn = Button("Gallery Map", { type: "continue_conversation", context: "Show gallery map for Arts District Art Walk" }, "tertiary")
maintenanceSection = SectionBlock([secRoadworks, secMaintenanceJobs], false)
secRoadworks = SectionItem("roadworks", "Roadworks Planned This Month (April 2026)", [roadworksTable])
roadworksTable = Table([colRwId, colRwProject, colRwLocation, colRwDistrict, colRwStart, colRwEnd, colRwImpact, colRwStatus])
colRwId = Col("ID", ["RW-2026-04-001", "RW-2026-04-002", "RW-2026-04-003", "RW-2026-04-004", "RW-2026-04-005", "RW-2026-04-006", "RW-2026-04-007", "RW-2026-04-008"], "string")
colRwProject = Col("Project", ["Main St Resurfacing", "Bridge Deck Rehab (River Bridge)", "Transit Lane Installation (5th Ave)", "Utility Undergrounding (Eastport)", "Intersection Reconstruction (12th & Oak)", "Bike Lane Protection (University)", "Stormwater Upgrade (Southgate)", "Pavement Preservation (Northside)"], "string")
colRwLocation = Col("Location", ["Main St (1st–20th)", "River Bridge (Hwy 99)", "5th Ave (Main–University)", "Eastport Blvd (Harbor–Industrial)", "12th St & Oak Ave", "University Ave (Campus–Downtown)", "Southgate Blvd (Mall–Hwy)", "Northside Dr (Reservoir–Main)"], "string")
colRwDistrict = Col("District", ["Downtown", "Downtown/Riverside", "Downtown/University", "Eastport", "Westend", "University", "Southgate", "Northside"], "string")
colRwStart = Col("Start", ["2026-04-20", "2026-04-22", "2026-04-25", "2026-04-28", "2026-04-30", "2026-04-21", "2026-04-27", "2026-04-29"], "string")
colRwEnd = Col("End", ["2026-05-15", "2026-06-30", "2026-05-20", "2026-06-15", "2026-06-10", "2026-05-10", "2026-05-25", "2026-05-18"], "string")
colRwImpact = Col("Traffic Impact", ["High (full closure)", "High (lane shifts)", "Medium (lane reduction)", "Medium (lane shifts)", "High (full closure)", "Low (parking loss)", "Medium (lane shifts)", "Low (rolling closures)"], "string")
colRwStatus = Col("Status", ["Permitted", "Permitted", "Planning", "Permitted", "Planning", "Permitted", "Permitted", "Planning"], "string")
secMaintenanceJobs = SectionItem("maintenance-jobs", "Infrastructure Jobs Due for Maintenance (Next 30 Days)", [maintenanceTable])
maintenanceTable = Table([colMjId, colMjAsset, colMjType, colMjLocation, colMjDistrict, colMjDue, colMjPriority, colMjAssigned])
colMjId = Col("Job ID", ["MJ-2026-00847", "MJ-2026-00848", "MJ-2026-00849", "MJ-2026-00850", "MJ-2026-00851", "MJ-2026-00852", "MJ-2026-00853", "MJ-2026-00854", "MJ-2026-00855", "MJ-2026-00856"], "string")
colMjAsset = Col("Asset", ["Pump Station PS-12", "Substation SUB-07", "Bridge BR-044", "Water Tank WT-03", "Traffic Signal TS-218", "Lift Station LS-09", "Transformer TX-412", "Retaining Wall RW-17", "Culvert CV-088", "Streetlight Circuit SL-33"], "string")
colMjType = Col("Type", ["Mechanical", "Electrical", "Structural", "Civil", "Electrical", "Mechanical", "Electrical", "Structural", "Civil", "Electrical"], "string")
colMjLocation = Col("Location", ["Northside Reservoir", "Eastport Industrial", "Riverside Hwy 99", "University Campus", "Downtown 5th & Main", "Southgate Lowlands", "Westend Substation", "Northside Bluff", "Eastport Creek", "University District"], "string")
colMjDistrict = Col("District", ["Northside", "Eastport", "Riverside", "University", "Downtown", "Southgate", "Westend", "Northside", "Eastport", "University"], "string")
colMjDue = Col("Due Date", ["2026-04-18", "2026-04-20", "2026-04-22", "2026-04-25", "2026-04-17", "2026-04-28", "2026-04-30", "2026-05-02", "2026-05-05", "2026-05-08"], "string")
colMjPriority = Col("Priority", ["Critical", "High", "High", "Medium", "Critical", "High", "Medium", "Medium", "Low", "Medium"], "string")
colMjAssigned = Col("Assigned Crew", ["Mech Team 2", "Elec Team 1", "Bridge Crew 1", "Civil Team 3", "Traffic Team 2", "Mech Team 1", "Elec Team 2", "Bridge Crew 2", "Civil Team 1", "Elec Team 3"], "string")
actionButtons = Buttons([btnDispatch, btnAlert, btnRefresh], "row")
btnDispatch = Button("Dispatch Crew", Action([@ToAssistant("Open crew dispatch form for selected incident")]), "primary", "normal", "large")
btnAlert = Button("Send Public Alert", Action([@ToAssistant("Open public alert composer with message template")]), "secondary", "normal", "large")
btnRefresh = Button("Refresh All Data", { type: "continue_conversation", context: "Refresh all dashboard data from city systems" }, "tertiary", "normal", "medium")