root = Card([header, refresh, statusCallout, transitSection, delaySection, performanceSection, volumeChart, weeklyChart, costSection, searchSection, flagSection])
header = CardHeader("Logistics Control Board", "Live shipment overview")
refresh = TextContent("Last refreshed: 14:32 UTC · Auto-refresh every 5 minutes", "small")
statusCallout = Callout("info", "All systems operational", "3,412 shipments tracked this month across 14 carriers")
transitSection = Card([transitHeading, transitTable], "sunk")
transitHeading = Heading("Shipments in transit", "h3")
transitTable = Table([routeCol, etaCol, statusCol])
routeCol = Col("Route", ["SFO → LAX", "JFK → ORD", "SEA → DEN", "MIA → ATL", "DFW → PHX"])
etaCol = Col("ETA", ["14:05", "16:40", "18:15", "21:30", "23:55"])
statusCol = Col("Status", ["On time", "Delayed 2h", "On time", "On time", "Delayed 45m"])
delaySection = Card([delayHeading, delayCallout, delayList], "sunk")
delayHeading = Heading("Delayed shipments", "h3")
delayCallout = Callout("warning", "2 shipments delayed", "JFK → ORD delayed 2h due to weather. DFW → PHX delayed 45m awaiting clearance.")
delayList = ListBlock([delayItem1, delayItem2], "number")
delayItem1 = ListItem("JFK → ORD", "Delayed 2h · Weather at origin · ETA 16:40", null, "Flag")
delayItem2 = ListItem("DFW → PHX", "Delayed 45m · Awaiting clearance · ETA 23:55", null, "Flag")
performanceSection = Card([perfHeading, perfGrid], "sunk")
perfHeading = Heading("Performance this month", "h3")
perfGrid = Card([onTimeMetric, costMetric], "clear", "row", "l")
onTimeMetric = Card([onTimeLabel, onTimeValue], "sunk")
onTimeLabel = TextContent("On-time percentage", "small")
onTimeValue = TextContent("**94.2%**", "large-heavy")
costMetric = Card([costLabel, costValue], "sunk")
costLabel = TextContent("Average cost per shipment", "small")
costValue = TextContent("**$128.40**", "large-heavy")
volumeChart = Card([volumeHeading, carrierChart], "sunk")
volumeHeading = Heading("Volume split by carrier", "h3")
carrierChart = PieChart(["FedEx", "UPS", "DHL", "USPS", "Amazon"], [38, 27, 18, 12, 5], "donut")
weeklyChart = Card([weeklyHeading, weeklyLine], "sunk")
weeklyHeading = Heading("Weekly volume · past 2 months", "h3")
weeklyLine = LineChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"], [weeklySeries], "natural", "Week", "Shipments")
weeklySeries = Series("Shipments", [310, 355, 342, 388, 401, 376, 420, 445])
searchSection = Card([searchHeading, searchHint, searchForm], "sunk")
searchHeading = Heading("Search by route", "h3")
searchHint = TextContent("Find a shipment by origin or destination", "small")
searchForm = Form("route-search", searchButtons, [routeField])
routeField = FormControl("Route", routeInput, "e.g. SFO, LAX, or SFO → LAX")
routeInput = Input("route", "Enter origin or destination")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search", null, "primary")
clearBtn = Button("Clear", null, "tertiary")
flagSection = Card([flagHeading, flagHint, flagForm], "sunk")
flagHeading = Heading("Flag a shipment", "h3")
flagHint = TextContent("Mark a shipment for follow-up by the operations team", "small")
flagForm = Form("flag-shipment", flagButtons, [shipmentField, reasonField])
shipmentField = FormControl("Shipment ID", shipmentInput, "e.g. SHP-2024-8812")
shipmentInput = Input("shipment_id", "Enter shipment ID")
reasonField = FormControl("Reason", reasonSelect)
reasonSelect = Select("reason", [reasonDelay, reasonDamage, reasonOther], "Select a reason")
reasonDelay = SelectItem("delay", "Delayed")
reasonDamage = SelectItem("damage", "Damaged")
reasonOther = SelectItem("other", "Other")
flagButtons = Buttons([flagBtn])
flagBtn = Button("Flag shipment", null, "primary")