root = Card([header, refreshBadge, delayedAlert, shipmentsSection, statsSection, carrierVolume, weeklyVolume, searchForm, flagForm], "card", "column", "m")
header = CardHeader("Logistics Coordinator Board", "Live shipment operations")
refreshBadge = Badge("Last refreshed: 14:32 EDT", "secondary")
delayedAlert = Callout("warning", "Delayed shipments", "SH-1041, SH-1062, SH-1075, SH-1089 and SH-1093 are past their ETA. Expedite review recommended.")
shipmentsSection = Card([transitHeader, transitTable], "sunk", "column", "m")
transitHeader = CardHeader("Shipments in transit", "Origin → Destination")
transitTable = Table([colID, colOrigin, colDest, colETA, colStatus])
colID = Col("Shipment", ["SH-1041", "SH-1053", "SH-1062", "SH-1067", "SH-1075", "SH-1080", "SH-1089", "SH-1093"])
colOrigin = Col("Origin", ["Newark, NJ", "Los Angeles, CA", "Seattle, WA", "Miami, FL", "Chicago, IL", "Houston, TX", "Atlanta, GA", "Denver, CO"])
colDest = Col("Destination", ["Chicago, IL", "New York, NY", "Portland, OR", "Dallas, TX", "Boston, MA", "Phoenix, AZ", "Kansas City, MO", "Salt Lake City, UT"])
colETA = Col("ETA", ["Mar 14 18:30", "Mar 14 09:00", "Mar 15 22:15", "Mar 14 14:45", "Mar 13 08:30", "Mar 15 11:20", "Mar 13 16:05", "Mar 13 12:50"])
colStatus = Col("Status", ["On time", "On time", "Delayed", "On time", "Delayed", "On time", "Delayed", "Delayed"])
statsSection = Card([onTimeStat, avgCostStat], "sunk", "row", "l")
onTimeStat = Card([onTimeHeading, onTimeBar], "clear")
onTimeHeading = Heading("On-time this month", "h3")
onTimeBar = Progress(92.4, "92.4%")
avgCostStat = Card([costHeading, costValue], "clear")
costHeading = Heading("Average cost per shipment", "h3")
costValue = TextContent("$187.42", "large-heavy")
carrierVolume = Card([carrierHeading, carrierPie], "sunk", "column", "m")
carrierHeading = Heading("Volume split by carrier", "h3")
carrierPie = PieChart(["Carrier A", "Carrier B", "Carrier C"], [34, 41, 25], "donut")
weeklyVolume = Card([weeklyHeading, weeklyChart], "sunk", "column", "m")
weeklyHeading = Heading("Weekly volume — past 8 weeks", "h3")
weeklyChart = BarChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"], [shipmentSeries], "grouped", "Week", "Shipments")
shipmentSeries = Series("Shipments", [118, 124, 131, 120, 142, 135, 148, 153])
searchForm = Form("route-search", searchButtons, [routeField])
routeField = FormControl("Search by route", routeInput, "City pairs, e.g. Newark → Chicago")
routeInput = Input("route", "Origin → Destination")
searchButtons = Buttons([searchButton])
searchButton = Button("Search routes", null, "primary")
flagForm = Form("flag-shipment", flagButtons, [shipmentField])
shipmentField = FormControl("Shipment to flag", shipmentSelect)
shipmentSelect = Select("shipment_id", [shipOpt1, shipOpt2, shipOpt3, shipOpt4], "Select shipment")
shipOpt1 = SelectItem("SH-1041", "SH-1041 · Newark → Chicago")
shipOpt2 = SelectItem("SH-1053", "SH-1053 · Los Angeles → New York")
shipOpt3 = SelectItem("SH-1062", "SH-1062 · Seattle → Portland")
shipOpt4 = SelectItem("SH-1080", "SH-1080 · Houston → Phoenix")
flagButtons = Buttons([flagButton])
flagButton = Button("Flag shipment", null, "secondary")