root = Card([headerRow, networkStatus, chartsRow, tablesRow, maintenanceAlertsRow, actionsRow, followUps], "clear", "column", "l")
headerRow = Card([consoleHeader, liveBadge], "clear", "row", "m", "center", "between")
consoleHeader = CardHeader("Grid Control Console", "Northwind Power Network — live operations")
liveBadge = Badge("● LIVE", "destructive")
networkStatus = Card([loadBlock, priceBlock, emissionsBlock], "sunk", "row", "m", "stretch")
loadBlock = Card([loadLabel, loadValue, capacityProgress], "card", "column", "xs")
loadLabel = TextContent("Current network load", "small")
loadValue = TextContent("4,820 MW", "large-heavy")
capacityProgress = Progress(92.7, "92.7% of capacity")
priceBlock = Card([priceLabel, priceValue, priceChange], "card", "column", "xs")
priceLabel = TextContent("Spot price", "small")
priceValue = TextContent("$48.50", "large-heavy")
priceChange = TextContent("/ MWh · ▲ 3.2% vs yesterday", "small")
emissionsBlock = Card([emissionsLabel, emissionsValue, emissionsNote], "card", "column", "xs")
emissionsLabel = TextContent("Emissions today", "small")
emissionsValue = TextContent("12,400 tCO₂", "large-heavy")
emissionsNote = TextContent("▼ 8% vs same day last week", "small")
chartsRow = Card([generationCard, forecastCard], "clear", "row", "m")
generationCard = Card([generationHeading, generationPie], "sunk")
generationHeading = Heading("Generation split by source", "h3")
generationPie = PieChart(["Wind", "Solar", "Gas", "Coal", "Hydro", "Nuclear"], [1450, 820, 1100, 640, 480, 330], "donut")
forecastCard = Card([forecastHeading, forecastChart], "sunk")
forecastHeading = Heading("Demand forecast — next 24 hours", "h3")
forecastChart = AreaChart(forecastLabels, [demandSeries], "natural", "Hour", "MW")
forecastLabels = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"]
demandSeries = Series("Forecast demand", [3900, 3600, 4100, 5300, 5700, 5200, 4800])
tablesRow = Card([plantsCard, outagesCard], "clear", "row", "m")
plantsCard = Card([plantsHeading, plantsTable], "sunk")
plantsHeading = Heading("Plant output and status", "h3")
plantsTable = Table([plantCol, outputCol, statusCol])
plantCol = Col("Plant", ["Larkspur Wind", "Solara PV", "Harbour Gas", "North Coal", "Ridge Hydro", "Aster Nuclear"])
outputCol = Col("Output (MW)", [1450, 820, 1100, 640, 480, 330])
statusCol = Col("Status", ["Online", "Online", "Derated", "Online", "Online", "Online"])
outagesCard = Card([outagesHeading, outagesTable], "sunk")
outagesHeading = Heading("Active outages", "h3")
outagesTable = Table([outageRegionCol, causeCol, affectedCol, sinceCol])
outageRegionCol = Col("Region", ["North", "East", "Southwest"])
causeCol = Col("Cause", ["Storm damage", "Transformer fault", "Line repair"])
affectedCol = Col("Affected", ["12,400 customers", "3,800 customers", "1,250 customers"])
sinceCol = Col("Since", ["09:12", "06:45", "02:30"])
maintenanceAlertsRow = Card([maintenanceCard, alertsCard], "clear", "row", "m")
maintenanceCard = Card([maintenanceHeading, maintenanceList], "sunk")
maintenanceHeading = Heading("Planned maintenance — this month", "h3")
maintenanceList = ListBlock([maint1, maint2, maint3], "number")
maint1 = ListItem("May 12 — Harbour Gas turbine overhaul", "Rated output reduced from 1,200 MW to 1,100 MW")
maint2 = ListItem("May 18 — North substation bearing replacement", "North region supply at 90% during 14:00–18:00")
maint3 = ListItem("May 27 — Solara PV inverter refresh", "No expected load impact")
alertsCard = Card([alertsHeading, alert1, alert2, alert3], "sunk")
alertsHeading = Heading("Live alerts", "h3")
alert1 = Callout("warning", "Overload risk — North", "North corridor at 98% capacity; curtailment may be required.")
alert2 = Callout("info", "Price spike — 18:00", "Spot price forecast to hit $72/MWh during evening peak.")
alert3 = Callout("success", "Solar output recovering", "Solara PV back to 820 MW after morning haze.")
actionsRow = Card([regionFocusCard, curtailmentCard], "clear", "row", "m")
regionFocusCard = Card([regionHeading, regionFocusForm], "sunk")
regionHeading = Heading("Focus on a region", "h3")
regionFocusForm = Form("region-focus", focusButtons, [regionSelectField])
regionSelectField = FormControl("Region", regionSelect)
regionSelect = Select("region", [regionWest, regionNorth, regionEast, regionSouth], "Select a region")
regionWest = SelectItem("west", "West")
regionNorth = SelectItem("north", "North")
regionEast = SelectItem("east", "East")
regionSouth = SelectItem("south", "South")
focusButtons = Buttons([focusButton])
focusButton = Button("Apply focus", null, "primary")
curtailmentCard = Card([curtailHeading, curtailForm], "sunk")
curtailHeading = Heading("Order curtailment", "h3")
curtailForm = Form("curtailment", curtailButtons, [curtailPlantField, curtailAmountField])
curtailPlantField = FormControl("Plant", curtailPlantSelect)
curtailPlantSelect = Select("plant", [curtailPlantNorth, curtailPlantEast], "Choose plant")
curtailPlantNorth = SelectItem("north_plant", "North Gas Unit 1")
curtailPlantEast = SelectItem("east_plant", "East Wind Farm")
curtailAmountField = FormControl("Curtail amount", curtailSlider, "MWh reduction for next dispatch interval")
curtailSlider = Slider("curtail_amount", "continuous", 0, 500, 10, [200], "MW")
curtailButtons = Buttons([orderButton])
orderButton = Button("Order curtailment", null, "primary")
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Show North region details")
followUp2 = FollowUpItem("Order 200 MW curtailment")
followUp3 = FollowUpItem("Compare emissions by source")