root = Card([header, refreshNote, alerts, shipmentSection, kpiSection, carrierSection, searchSection, flagSection, chartSection, footerNote])
header = CardHeader("Logistics Coordination Board", "Live overview of shipments, carriers and performance")
refreshNote = TextCallout("neutral", "Last refreshed", "Data refreshed 12 minutes ago at 09:42 UTC")
alerts = Callout("warning", "3 delayed shipments need attention", "Shipments #SH-2041, #SH-2078 and #SH-2105 are behind schedule. Review flagged routes below.", null)
shipmentSection = Card([shipmentHeading, shipmentTable], "sunk")
shipmentHeading = Heading("Shipments in transit", "h3")
shipmentTable = Table([shipIdCol, originCol, destCol, etaCol, statusCol, flagCol])
shipIdCol = Col("Shipment ID", ["SH-2041", "SH-2078", "SH-2105", "SH-2112", "SH-2144", "SH-2177"])
originCol = Col("Origin", ["Shanghai", "Rotterdam", "Los Angeles", "Hamburg", "Singapore", "Miami"])
destCol = Col("Destination", ["Hamburg", "Chicago", "London", "Tokyo", "Sydney", "Toronto"])
etaCol = Col("ETA", ["2025-06-12", "2025-06-13", "2025-06-10", "2025-06-15", "2025-06-14", "2025-06-16"])
statusCol = Col("Status", ["Delayed", "Delayed", "Delayed", "On time", "On time", "On time"])
flagCol = Col("Flag", ["⚠ Flag", "⚠ Flag", "⚠ Flag", "—", "—", "—"])
kpiSection = Card([kpiHeading, kpiGrid], "sunk")
kpiHeading = Heading("Performance metrics", "h3")
kpiGrid = Card([onTimeCard, costCard], "clear", "row", "l")
onTimeCard = Card([onTimeLabel, onTimeValue, onTimeProgress], "sunk")
onTimeLabel = TextContent("On-time percentage (this month)", "small")
onTimeValue = TextContent("94.2%", "large-heavy")
onTimeProgress = Progress(94.2, "On-time rate")
costCard = Card([costLabel, costValue], "sunk")
costLabel = TextContent("Average cost per shipment", "small")
costValue = TextContent("$1,284", "large-heavy")
carrierSection = Card([carrierHeading, carrierChart], "sunk")
carrierHeading = Heading("Volume split by carrier", "h3")
carrierChart = PieChart(["Maersk", "DHL", "FedEx", "Kuehne+Nagel", "UPS"], [42, 28, 16, 9, 5], "donut")
searchSection = Card([searchHeading, searchForm], "sunk")
searchHeading = Heading("Search by route", "h3")
searchForm = Form("route-search", searchButtons, [originField, destField])
originField = FormControl("Origin", originInput)
originInput = Input("origin", "e.g. Shanghai, Rotterdam")
destField = FormControl("Destination", destInput)
destInput = Input("destination", "e.g. Hamburg, Chicago")
searchButtons = Buttons([searchBtn])
searchBtn = Button("Search routes", null, "primary")
flagSection = Card([flagHeading, flagForm], "sunk")
flagHeading = Heading("Flag a shipment", "h3")
flagForm = Form("flag-shipment", flagButtons, [flagIdField, flagReasonField])
flagIdField = FormControl("Shipment ID", flagIdInput)
flagIdInput = Input("shipment_id", "e.g. SH-2041")
flagReasonField = FormControl("Reason", flagReasonSelect)
flagReasonSelect = Select("flag_reason", [reasonDelayed, reasonDamaged, reasonLost, reasonOther], "Select a reason")
reasonDelayed = SelectItem("delayed", "Delay in transit")
reasonDamaged = SelectItem("damaged", "Damaged goods")
reasonLost = SelectItem("lost", "Lost shipment")
reasonOther = SelectItem("other", "Other")
flagButtons = Buttons([flagBtn])
flagBtn = Button("Flag shipment", null, "secondary")
chartSection = Card([chartHeading, weeklyChart], "sunk")
chartHeading = Heading("Weekly volume — past two months", "h3")
weeklyChart = BarChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"], [volumeSeries], "grouped", "Week", "Shipments")
volumeSeries = Series("Shipments", [320, 345, 298, 410, 388, 372, 429, 451])
footerNote = TextContent("Figures update every 15 minutes. Flagged shipments are reviewed by the operations team.", "small")