root = Card([header, delayCallout, statsRow, searchCard, shipmentsSection, chartsSection, footer], "card", "column", "l")
header = CardHeader("Logistics Coordinator", "42 shipments in transit")
delayCallout = Callout("warning", "Delayed shipments", "2 shipments are running late: Los Angeles → London is 6h behind schedule and Hamburg → New York is 2h behind. Carriers have been notified.")
statsRow = Card([ontimeStat, costStat, volumeStat], "sunk", "row", "xl")
ontimeStat = Card([ontimeTitle, ontimePct, ontimeBar], "clear", "column", "xs")
ontimeTitle = TextContent("On-time rate · June", "small")
ontimePct = TextContent("96%", "large-heavy")
ontimeBar = Progress(96)
costStat = Card([costTitle, costValue], "clear", "column", "xs")
costTitle = TextContent("Avg cost / shipment", "small")
costValue = TextContent("$412", "large-heavy")
volumeStat = Card([transitTitle, transitValue], "clear", "column", "xs")
transitTitle = TextContent("In transit", "small")
transitValue = TextContent("42", "large-heavy")
searchCard = Card([searchTitle, searchForm], "sunk")
searchTitle = Heading("Find a route", "h3")
searchForm = Form("route-search", searchButtons, [routeField])
routeField = FormControl("Route", routeInput, "Type an origin or destination to filter the table below")
routeInput = Input("route", "e.g. Ningbo → Hamburg")
searchButtons = Buttons([searchBtn])
searchBtn = Button("Search routes", null, "primary")
shipmentsSection = Card([shipmentsTitle, shipmentsTable], "sunk")
shipmentsTitle = Heading("Shipments in transit", "h3")
shipmentsTable = Table([originCol, destCol, etaCol, statusCol, flagCol])
originCol = Col("Origin", ["Ningbo", "Rotterdam", "Los Angeles", "Shanghai", "Hamburg", "Singapore"])
destCol = Col("Destination", ["Hamburg", "Chicago", "London", "Rotterdam", "New York", "Rotterdam"])
etaCol = Col("ETA", ["Jun 28", "Jun 30", "Jul 02", "Jul 03", "Jul 05", "Jul 06"])
statusCol = Col("Status", ["On time", "At risk", "Delayed", "On time", "Delayed", "On time"])
flagCol = Col("", ["Flag", "Flag", "Flag", "Flag", "Flag", "Flag"], "action")
chartsSection = Card([carrierCard, volumeCard], "sunk", "row", "xl")
carrierCard = Card([carrierTitle, carrierPie], "clear", "column", "m")
carrierTitle = Heading("Volume by carrier", "h3")
carrierPie = PieChart(["Maersk", "MSC", "CMA CGM", "Hapag-Lloyd"], [38, 27, 19, 16], "donut")
volumeCard = Card([weeklyTitle, weeklyVol], "clear", "column", "m")
weeklyTitle = Heading("Weekly volume · last 8 weeks", "h3")
weeklyVol = BarChart(["May 6", "May 13", "May 20", "May 27", "Jun 3", "Jun 10", "Jun 17", "Jun 24"], [volSeries], "grouped", "Week of", "Shipments")
volSeries = Series("Shipments", [118, 132, 125, 141, 136, 149, 128, 152])
footer = TextContent("_Data last refreshed today at 14:32 UTC · next auto-refresh at 14:37 UTC._", "small")