root = Card([header, statusRow, loadSection, capacitySection, genSplit, plantTable, outagesSection, forecastSection, priceSection, maintenanceSection, alertsSection, regionFocus, curtailmentSection, emissionsSection])
header = CardHeader("Power Network Console", "Live operational view")
statusRow = Card([statusBadge, statusText], "sunk", "row", "m", "center")
statusBadge = Tag("STABLE", null, "md", "success")
statusText = TextContent("**All systems nominal** — load within safe operating envelope", "small")
loadSection = Card([loadHeading, loadValue, loadBar], "clear", "column", "s")
loadHeading = Heading("Current Load", "h3")
loadValue = TextContent("**4,320 MW**", "large")
loadBar = Progress(72, "72% of peak capacity")
capacitySection = Card([capHeading, capCallout], "clear", "column", "s")
capHeading = Heading("Capacity Headroom", "h3")
capCallout = TextCallout("warning", "Approaching limit", "Network at 72% of 6,000 MW peak capacity. Headroom: 1,680 MW.")
genSplit = Card([genHeading, genChart], "clear", "column", "s")
genHeading = Heading("Generation Split by Source", "h3")
genChart = PieChart(["Coal", "Gas", "Wind", "Solar", "Hydro", "Nuclear"], [35, 25, 18, 12, 6, 4], "donut")
plantTable = Card([plantHeading, plantCols], "clear", "column", "s")
plantHeading = Heading("Plant Output & Status", "h3")
plantCols = Table([plantName, plantSource, plantOutput, plantStatus])
plantName = Col("Plant", ["Northbridge Coal", "Riverside Gas", "Hilltop Wind", "Desert Solar", "Canyon Hydro", "Atlas Nuclear"])
plantSource = Col("Source", ["Coal", "Gas", "Wind", "Solar", "Hydro", "Nuclear"])
plantOutput = Col("Output (MW)", [980, 720, 540, 360, 180, 120])
plantStatus = Col("Status", ["Online", "Online", "Online", "Partial", "Online", "Maintenance"])
outagesSection = Card([outageHeading, outageList], "clear", "column", "s")
outageHeading = Heading("Active Outages", "h3")
outageList = ListBlock([outage1, outage2])
outage1 = ListItem("Riverside Substation Fault", "Affected: Riverside District — 12,400 customers", ["https://picsum.photos/seed/outage1/80/80"], "View")
outage2 = ListItem("Coastal Cable Damage", "Affected: Harbor Zone — 3,100 customers", ["https://picsum.photos/seed/outage2/80/80"], "View")
forecastSection = Card([forecastHeading, forecastChart], "clear", "column", "s")
forecastHeading = Heading("Demand Forecast — Next 24 Hours", "h3")
forecastChart = AreaChart(["0h", "3h", "6h", "9h", "12h", "15h", "18h", "21h", "24h"], [forecastSeries], "natural", "Hours", "MW")
forecastSeries = Series("Forecasted Demand", [4100, 3900, 3800, 4200, 4800, 5200, 5400, 5000, 4600])
priceSection = Card([priceHeading, priceValue, priceTrend], "clear", "row", "m", "between", "center")
priceHeading = Heading("Current Price", "h3")
priceValue = TextContent("**$86.40 / MWh**", "large")
priceTrend = Badge("+2.1% vs 24h avg", "secondary")
maintenanceSection = Card([maintHeading, maintList], "clear", "column", "s")
maintHeading = Heading("Maintenance Planned This Month", "h3")
maintList = ListBlock([maint1, maint2, maint3])
maint1 = ListItem("Atlas Nuclear — Core Inspection", "Scheduled: Mar 14–16 · Unit 2 offline")
maint2 = ListItem("Riverside Gas — Turbine Overhaul", "Scheduled: Mar 22–24 · 300 MW reduced")
maint3 = ListItem("Hilltop Wind — Blade Replacement", "Scheduled: Mar 28–30 · 8 turbines offline")
alertsSection = Card([alertsHeading, alert1, alert2, alert3], "clear", "column", "s")
alertsHeading = Heading("Live Alerts", "h3")
alert1 = Alert("Overload warning", "Northbridge line at 95% capacity — monitor closely", "warning")
alert2 = Alert("Outage reported", "Riverside Substation fault — crews dispatched", "destructive")
alert3 = Alert("Resolved", "Desert Solar inverter issue cleared at 14:05", "success")
regionFocus = Card([regionHeading, regionSelect, regionNote], "clear", "column", "s")
regionHeading = Heading("Focus on a Region", "h3")
regionSelect = Select("region", [regionNorth, regionSouth, regionEast, regionWest], "Choose a region")
regionNorth = SelectItem("north", "Northern Grid")
regionSouth = SelectItem("south", "Southern Grid")
regionEast = SelectItem("east", "Eastern Grid")
regionWest = SelectItem("west", "Western Grid")
regionNote = TextCallout("info", "Region filter", "Selecting a region will narrow load, outage, and plant views to that area.")
curtailmentSection = Card([curtailHeading, curtailForm], "clear", "column", "s")
curtailHeading = Heading("Order Curtailment", "h3")
curtailForm = Form("curtailment", curtailButtons, [curtailPlant, curtailAmount])
curtailPlant = FormControl("Plant", curtailPlantSelect)
curtailPlantSelect = Select("curtail_plant", [plantCoal, plantGas, plantWind], "Select plant")
plantCoal = SelectItem("northbridge", "Northbridge Coal")
plantGas = SelectItem("riverside", "Riverside Gas")
plantWind = SelectItem("hilltop", "Hilltop Wind")
curtailAmount = FormControl("Reduction (MW)", curtailSlider)
curtailSlider = Slider("curtail_mw", "discrete", 0, 500, 50, [100], "MW reduction")
curtailButtons = Buttons([curtailSubmit, curtailCancel])
curtailSubmit = Button("Confirm curtailment", null, "primary")
curtailCancel = Button("Cancel", null, "tertiary")
emissionsSection = Card([emissionsHeading, emissionsValue, emissionsCallout], "clear", "column", "s")
emissionsHeading = Heading("Emissions Today", "h3")
emissionsValue = TextContent("**1,284 t CO₂e**", "large")
emissionsCallout = TextCallout("neutral", "Daily budget", "62% of the 2,070 t CO₂e daily budget consumed so far.")