root = Card([header, kpis, delayedAlert, transitSection, toolsSection, analytics], "card", "column", "l")
header = Card([headerText, refreshBadge], "clear", "row", "m", "center", "between")
headerText = CardHeader("Logistics Board", "Live overview of shipments in transit")
refreshBadge = Badge("Last refreshed 09:41 UTC", "secondary")
kpis = Card([onTimeKpi, costKpi, weeklyKpi], "clear", "row", "l")
onTimeKpi = Card([onTimeHeading, onTimeChart, onTimeCaption], "sunk", "column", "xs")
onTimeHeading = Heading("On-time rate · Sep", "h3")
onTimeChart = RadialChart(["On time", "Delayed"], [94, 6])
onTimeCaption = TextContent("94% on-time across 1,284 shipments", "small")
costKpi = Card([costHeading, costValue, costCaption], "sunk", "column", "xs")
costHeading = Heading("Avg cost / shipment", "h3")
costValue = TextContent("$412", "large-heavy")
costCaption = TextContent("All carriers, monthly average", "small")
weeklyKpi = Card([weeklyHeading, weeklyValue, weeklyCaption], "sunk", "column", "xs")
weeklyHeading = Heading("Shipments this week", "h3")
weeklyValue = TextContent("312", "large-heavy")
weeklyCaption = TextContent("Currently in transit", "small")
delayedAlert = Callout("warning", "Delayed shipments", "SH-2077 and SH-2102 are behind schedule and their ETAs have been revised. Review both in the transit table below and flag if intervention is needed.")
transitSection = Card([transitHeading, transitTable], "sunk", "column", "m")
transitHeading = Heading("Shipments in transit", "h2")
transitTable = Table([idCol, originCol, destCol, etaCol, statusCol])
idCol = Col("ID", ["SH-2041", "SH-2077", "SH-2102", "SH-2120", "SH-2145"])
originCol = Col("Origin", ["Shenzhen, CN", "Ho Chi Minh City, VN", "Long Beach, US", "Shanghai, CN", "Singapore, SG"])
destCol = Col("Destination", ["Rotterdam, NL", "Hamburg, DE", "Chicago, US", "Los Angeles, US", "Dubai, AE"])
etaCol = Col("ETA", ["Oct 3", "Oct 1 (revised)", "Oct 4 (revised)", "Oct 2", "Oct 5"])
statusCol = Col("Status", ["On time", "Delayed", "Delayed", "On time", "On time"])
toolsSection = Card([toolsHeading, toolsRow], "sunk", "column", "m")
toolsHeading = Heading("Route tools", "h2")
toolsRow = Card([searchForm, flagForm], "clear", "row", "l")
searchForm = Form("route-search", searchButtons, [searchField])
searchField = FormControl("Search by route", searchInput, "e.g. Shenzhen → Rotterdam")
searchInput = Input("route", "Origin → Destination", "text")
searchButtons = Buttons([searchBtn])
searchBtn = Button("Search routes", null, "primary")
flagForm = Form("flag-shipment", flagButtons, [shipmentField])
shipmentField = FormControl("Flag a shipment", shipmentSelect, "Pick a shipment to flag for review")
shipmentSelect = Select("shipment_id", [s1, s2, s3, s4, s5], "Select shipment ID")
s1 = SelectItem("SH-2041", "SH-2041 · Shenzhen → Rotterdam · On time")
s2 = SelectItem("SH-2077", "SH-2077 · Ho Chi Minh City → Hamburg · Delayed")
s3 = SelectItem("SH-2102", "SH-2102 · Long Beach → Chicago · Delayed")
s4 = SelectItem("SH-2120", "SH-2120 · Shanghai → Los Angeles · On time")
s5 = SelectItem("SH-2145", "SH-2145 · Singapore → Dubai · On time")
flagButtons = Buttons([flagBtn])
flagBtn = Button("Flag for review", null, "secondary")
analytics = Card([analyticsHeading, analyticsRow], "sunk", "column", "m")
analyticsHeading = Heading("Volume & performance", "h2")
analyticsRow = Card([carrierSplit, weeklyVolume], "clear", "row", "l")
carrierSplit = Card([carrierHeading, carrierPie], "sunk", "column", "xs")
carrierHeading = Heading("Volume by carrier", "h3")
carrierPie = PieChart(["NorthStar", "TransOcean", "BlueLine", "Apex"], [418, 352, 289, 225], "donut")
weeklyVolume = Card([weeklyHeading2, weeklyBar], "sunk", "column", "xs")
weeklyHeading2 = Heading("Weekly volume · Aug–Sep", "h3")
weeklyBar = BarChart(["Aug W1", "Aug W2", "Aug W3", "Aug W4", "Sep W1", "Sep W2", "Sep W3", "Sep W4"], [volSeries], "grouped", "Week", "Shipments")
volSeries = Series("Shipments", [286, 302, 271, 318, 296, 312, 284, 329])