root = Card([header, alertsSection, overviewRow, demandSection, fleetSection, opsRow, maintenanceSection], "clear", "column", "l")
header = CardHeader("Grid Operations Console", "UK National Grid · Live view · Updated 13:42")
alertsSection = Card([alertsHeader, alertsLiveBadge, alertsUpdated, alertHighFreq, alertOverloadRisk, alertWindRamp], "sunk")
alertsHeader = Heading("Live alerts", "h3")
alertsLiveBadge = Badge("LIVE", "destructive")
alertsUpdated = TextContent("3 new · Streaming live · updated just now", "small")
alertHighFreq = Alert("High frequency", "North East frequency deviation above threshold", "warning")
alertOverloadRisk = Alert("Overload risk", "South West is at 96% of line rating", "destructive")
alertWindRamp = Alert("Wind ramp", "West Wind Farm output expected to drop 300 MW by 14:00", "info")
overviewRow = Card([loadCard, mixCard, priceCard, emissionCard], "clear", "row", "m")
loadCard = Card([loadHeader, loadValue, capacityProgress, capacityNote], "sunk")
loadHeader = Heading("Network load", "h3")
loadValue = TextContent("8,432 MW", "large-heavy")
capacityProgress = Progress(84, "84% of capacity")
capacityNote = TextContent("Capacity 10,000 MW", "small")
mixCard = Card([mixHeader, mixChart], "sunk")
mixHeader = Heading("Generation by source", "h3")
mixChart = PieChart(["Gas", "Coal", "Wind", "Solar", "Nuclear", "Hydro"], [2750, 1250, 2050, 1300, 650, 432], "donut")
priceCard = Card([priceHeader, priceValue, priceChange], "sunk")
priceHeader = Heading("Price per MWh", "h3")
priceValue = TextContent("£74.20 / MWh", "large-heavy")
priceChange = Tag("▲ 3.1% vs yesterday", null, "sm", "danger")
emissionCard = Card([emissionHeader, emissionValue, emissionProgress], "sunk")
emissionHeader = Heading("Emissions today", "h3")
emissionValue = TextContent("12,480 tCO₂e", "large-heavy")
emissionProgress = Progress(68, "68% of daily budget")
demandSection = Card([demandHeader, demandChart], "sunk")
demandHeader = Heading("Demand forecast — next 24 hours", "h3")
demandLabels = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]
demandSeries = Series("Forecast demand", [6200, 5900, 5700, 5600, 5750, 6100, 6900, 7800, 8600, 8900, 8800, 8500, 8200, 8100, 8300, 8600, 8900, 9100, 9000, 8700, 8400, 7800, 7100, 6500])
demandChart = LineChart(demandLabels, [demandSeries], "natural", "Hour", "MW")
fleetSection = Card([plantsCard, outagesCard], "clear", "row", "m")
plantsCard = Card([plantsHeader, plantsTable], "sunk")
plantsHeader = Heading("Plant output & status", "h3")
plantsTable = Table([plantNameCol, plantOutputCol, plantStatusCol])
plantNameCol = Col("Plant", ["Riverside Gas 1", "Riverside Gas 2", "North Coal 1", "West Wind Farm", "East Solar Park", "Hillside Nuclear", "Tideway Hydro", "Peak Backup"])
plantOutputCol = Col("Output (MW)", [620, 610, 1150, 920, 740, 650, 432, 310])
plantStatusCol = Col("Status", ["Online", "Online", "Online", "Delivering", "Delivering", "Online", "Online", "Standby"])
outagesCard = Card([outagesHeader, outagesTable], "sunk")
outagesHeader = Heading("Active outages", "h3")
outagesTable = Table([outageNameCol, outageRegionCol, outageEtaCol])
outageNameCol = Col("Outage", ["North Interconnector", "Southern Substation", "Coastal Transformer", "East Line 42"])
outageRegionCol = Col("Affected region", ["North East", "South West", "East Coast", "South East"])
outageEtaCol = Col("Restore ETA", ["14:00 today", "17:30 today", "Tomorrow 09:00", "22:00 today"])
opsRow = Card([focusCard, curtailCard], "clear", "row", "m")
focusCard = Card([focusHeader, focusForm], "sunk")
focusHeader = Heading("Focus region", "h3")
focusForm = Form("focus-region", focusButtons, [focusField])
focusField = FormControl("Region", regionSelect)
regionSelect = Select("focus_region", [regionNorth, regionSouth, regionEast, regionWest, regionMid], "Select a region")
regionNorth = SelectItem("north", "North")
regionSouth = SelectItem("south", "South")
regionEast = SelectItem("east", "East")
regionWest = SelectItem("west", "West")
regionMid = SelectItem("midlands", "Midlands")
focusButtons = Buttons([applyFocusBtn])
applyFocusBtn = Button("Apply region focus", null, "primary")
curtailCard = Card([curtailHeader, curtailForm], "sunk")
curtailHeader = Heading("Order curtailment", "h3")
curtailForm = Form("curtailment", curtailButtons, [curtailPlantField, curtailAmountField])
curtailPlantField = FormControl("Plant", curtailPlantSelect)
curtailPlantSelect = Select("curtail_plant", [curtailOptionRiverside, curtailOptionCoal, curtailOptionWind], "Select plant")
curtailOptionRiverside = SelectItem("riverside_gas_1", "Riverside Gas 1")
curtailOptionCoal = SelectItem("north_coal_1", "North Coal 1")
curtailOptionWind = SelectItem("west_wind_farm", "West Wind Farm")
curtailAmountField = FormControl("Reduction amount (MW)", curtailAmountInput, "Maximum reduction is shown on the plant table")
curtailAmountInput = Input("curtail_amount", "e.g. 250", "number")
curtailButtons = Buttons([curtailSubmitBtn])
curtailSubmitBtn = Button("Order curtailment", null, "primary")
maintenanceSection = Card([maintenanceHeader, maintenanceList], "sunk")
maintenanceHeader = Heading("Maintenance planned this month", "h3")
maintenanceList = ListBlock([maintenanceItem1, maintenanceItem2, maintenanceItem3, maintenanceItem4], "number")
maintenanceItem1 = ListItem("Riverside Gas 2", "21 Aug — turbine bearing replacement")
maintenanceItem2 = ListItem("East Solar Park", "26 Aug — inverter inspection")
maintenanceItem3 = ListItem("Tideway Hydro", "28 Aug — gate valve service")
maintenanceItem4 = ListItem("North Coal 1", "30 Aug — boiler tube assessment")