root = Card([header, refreshBadge, searchPanel, alerts, kpis, chartsRow, transitSection, followups], "card", "column", "l")
header = CardHeader("Logistics Coordinator Board", "North America operations · Live overview")
refreshBadge = Badge("Last refreshed 14:32 UTC · 12 min ago", "secondary")
searchPanel = Card([searchHeading, searchForm], "sunk")
searchHeading = Heading("Search by route", "h3")
searchForm = Form("route-search", searchButtons, [originField, destField])
originField = FormControl("Origin", originInput, "e.g. Dallas, TX")
originInput = Input("origin", "Origin city or code")
destField = FormControl("Destination", destInput, "e.g. Chicago, IL")
destInput = Input("destination", "Destination city or code")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search routes", null, "primary")
clearBtn = Button("Clear", null, "tertiary")
alerts = Callout("warning", "Delayed shipments", "3 loads are running behind schedule. #1042 Austin → Phoenix is 4h late, #1045 Denver → Kansas City is 3h late, and #1047 Chicago → New York departed 2h late. Use the Flag action on any row to escalate it to the dispatcher queue.")
kpis = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("This month at a glance", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["On-time delivery", "Average cost per shipment", "Shipments in transit", "Delayed loads"])
kpiValue = Col("Value", ["94%", "$412", "6", "3"])
chartsRow = Card([carrierCard, weeklyCard], "clear", "column", "l")
carrierCard = Card([carrierHeader, carrierPie], "sunk")
carrierHeader = Heading("Volume split by carrier", "h3")
carrierPie = PieChart(["Freightly", "HaulMart", "SwiftLine", "NorthBridge"], [38, 27, 22, 13], "donut")
weeklyCard = Card([weeklyHeader, weeklyChart], "sunk")
weeklyHeader = Heading("Weekly volume · past 2 months", "h3")
weeklyChart = BarChart(["Jun 15", "Jun 22", "Jun 29", "Jul 6", "Jul 13", "Jul 20", "Jul 27", "Aug 3"], [weeklySeries], "grouped", "Week", "Shipments")
weeklySeries = Series("Shipments", [182, 204, 196, 221, 238, 245, 231, 254])
transitSection = Card([transitHeader, shipmentsTable], "sunk")
transitHeader = CardHeader("Shipments in transit", "6 active loads · select Flag on a row to escalate it")
shipmentsTable = Table([shipId, shipOrigin, shipDest, shipEta, shipStatus, shipFlag])
shipId = Col("ID", ["#1042", "#1043", "#1044", "#1045", "#1046", "#1047"])
shipOrigin = Col("Origin", ["Austin", "Seattle", "Dallas", "Atlanta", "Denver", "Chicago"])
shipDest = Col("Destination", ["Phoenix", "Portland", "Chicago", "Miami", "Kansas City", "New York"])
shipEta = Col("ETA", ["Aug 9 · 18:30", "Aug 9 · 22:00", "Aug 10 · 09:15", "Aug 10 · 14:40", "Aug 11 · 08:05", "Aug 11 · 16:20"])
shipStatus = Col("Status", ["Delayed", "On time", "On time", "Delayed", "On time", "Delayed"])
shipFlag = Col("Flag", ["Flag", "Flag", "Flag", "Flag", "Flag", "Flag"], "action")
followups = FollowUpBlock([f1, f2, f3])
f1 = FollowUpItem("Show only delayed shipments")
f2 = FollowUpItem("Compare carrier on-time rates")
f3 = FollowUpItem("Export transit board as CSV")