root = Card([header, searchSection, kpiRow, delayedAlert, shipmentsTable, carrierChart, weeklyVolumeChart, flagSection, refreshNote])
header = CardHeader("Logistics Coordinator Board", "Real-time shipment tracking & performance")
searchSection = Form("route-search", searchButtons, [routeSearchField])
routeSearchField = FormControl("Search by route", routeInput, "Enter origin → destination (e.g. LAX → JFK)")
routeInput = Input("route_search", "LAX → JFK", "text")
searchButtons = Buttons([searchBtn])
searchBtn = Button("Search", null, "primary")
kpiRow = Card([onTimeCard, avgCostCard], "clear", "row", "m")
onTimeCard = Card([onTimeLabel, onTimeValue], "sunk", "column", "xs", "center")
onTimeLabel = TextContent("On-time this month", "small")
onTimeValue = TextContent("94.2%", "large-heavy")
avgCostCard = Card([avgCostLabel, avgCostValue], "sunk", "column", "xs", "center")
avgCostLabel = TextContent("Avg cost / shipment", "small")
avgCostValue = TextContent("$1,247", "large-heavy")
delayedAlert = Alert("3 shipments delayed", "LAX→JFK (2 days), ORD→DFW (1 day), SEA→LAX (4 hours)", "warning")
shipmentsTable = Table([colId, colOrigin, colDest, colEta, colStatus, colFlag])
colId = Col("ID", ["SHP-001", "SHP-002", "SHP-003", "SHP-004", "SHP-005", "SHP-006", "SHP-007", "SHP-008"])
colOrigin = Col("Origin", ["LAX", "ORD", "SEA", "JFK", "ATL", "MIA", "DFW", "SFO"])
colDest = Col("Destination", ["JFK", "DFW", "LAX", "LAX", "ORD", "JFK", "SEA", "ORD"])
colEta = Col("ETA", ["2024-01-15 14:30", "2024-01-16 09:00", "2024-01-15 18:45", "2024-01-17 11:20", "2024-01-16 16:00", "2024-01-18 08:30", "2024-01-15 22:10", "2024-01-19 10:00"])
colStatus = Col("Status", ["In Transit", "Delayed", "In Transit", "In Transit", "In Transit", "In Transit", "Delayed", "In Transit"])
colFlag = Col("Action", ["Flag", "Flag", "Flag", "Flag", "Flag", "Flag", "Flag", "Flag"], "action")
carrierChart = Card([carrierHeading, carrierPie], "sunk")
carrierHeading = Heading("Volume split by carrier", "h3")
carrierPie = PieChart(carrierLabels, carrierValues, "donut")
carrierLabels = ["FedEx", "UPS", "DHL", "USPS", "Regional"]
carrierValues = [42, 28, 15, 10, 5]
weeklyVolumeChart = Card([weeklyHeading, weeklyBar], "sunk")
weeklyHeading = Heading("Weekly volume (past 8 weeks)", "h3")
weeklyBar = BarChart(weekLabels, [weeklySeries], "grouped", "Week", "Shipments")
weekLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]
weeklySeries = Series("Shipments", [142, 156, 138, 167, 151, 173, 159, 164])
flagSection = Card([flagHeading, flagForm], "sunk")
flagHeading = Heading("Flag a shipment", "h3")
flagForm = Form("flag-shipment", flagButtons, [flagShipmentField, flagReasonField])
flagShipmentField = FormControl("Shipment ID", flagShipmentSelect)
flagShipmentSelect = Select("shipment_id", flagShipmentOptions, "Select shipment")
flagShipmentOptions = [opt1, opt2, opt3, opt4, opt5, opt6, opt7, opt8]
opt1 = SelectItem("SHP-001", "SHP-001 — LAX → JFK")
opt2 = SelectItem("SHP-002", "SHP-002 — ORD → DFW")
opt3 = SelectItem("SHP-003", "SHP-003 — SEA → LAX")
opt4 = SelectItem("SHP-004", "SHP-004 — JFK → LAX")
opt5 = SelectItem("SHP-005", "SHP-005 — ATL → ORD")
opt6 = SelectItem("SHP-006", "SHP-006 — MIA → JFK")
opt7 = SelectItem("SHP-007", "SHP-007 — DFW → SEA")
opt8 = SelectItem("SHP-008", "SHP-008 — SFO → ORD")
flagReasonField = FormControl("Reason", flagReasonInput)
flagReasonInput = TextArea("flag_reason", "Enter reason for flagging...", 3)
flagButtons = Buttons([flagSubmitBtn, flagCancelBtn])
flagSubmitBtn = Button("Submit flag", null, "primary")
flagCancelBtn = Button("Cancel", null, "tertiary")
refreshNote = TextContent("Last refreshed: 2024-01-15 10:23 UTC", "small")