root = Card([header, lastRefreshed, searchForm, kpiRow, delayedAlert, shipmentsTable, volumeByCarrier, weeklyVolumeChart, flagSection], "card", "column", "l")
header = CardHeader("Logistics Coordinator Board", "Real-time shipment tracking & performance")
lastRefreshed = TextContent("Last refreshed: 2024-01-15 14:32 UTC", "small")
searchForm = Form("route-search", searchButtons, [routeSearchField])
routeSearchField = FormControl("Search by route", routeInput, "Enter origin-destination pair (e.g., LAX → JFK)")
routeInput = Input("route_search", "LAX → JFK", "text")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search", null, "primary")
clearBtn = Button("Clear", null, "secondary")
kpiRow = Card([onTimeCard, avgCostCard], "clear", "row", "l")
onTimeCard = Card([onTimeLabel, onTimeValue, onTimeProgress], "sunk", "column", "m")
onTimeLabel = TextContent("On-Time This Month", "small")
onTimeValue = TextContent("87%", "large-heavy")
onTimeProgress = Progress(87, "87% on-time delivery")
avgCostCard = Card([avgCostLabel, avgCostValue], "sunk", "column", "m")
avgCostLabel = TextContent("Avg Cost / Shipment", "small")
avgCostValue = TextContent("$2,840", "large-heavy")
delayedAlert = Alert("3 Shipments Delayed", "SHIP-4421 (LAX→JFK), SHIP-4435 (ORD→MIA), SHIP-4440 (SEA→LAX) — all weather-related", "warning")
shipmentsTable = Table([colId, colOrigin, colDest, colEta, colStatus, colFlag])
colId = Col("Shipment ID", ["SHIP-4418", "SHIP-4421", "SHIP-4429", "SHIP-4435", "SHIP-4440", "SHIP-4448", "SHIP-4452"])
colOrigin = Col("Origin", ["LAX", "LAX", "ORD", "ORD", "SEA", "JFK", "DFW"])
colDest = Col("Destination", ["JFK", "JFK", "MIA", "MIA", "LAX", "LAX", "SEA"])
colEta = Col("ETA", ["2024-01-16 08:00", "2024-01-16 14:30", "2024-01-17 10:00", "2024-01-17 16:45", "2024-01-18 06:00", "2024-01-18 22:00", "2024-01-19 12:00"])
colStatus = Col("Status", ["In Transit", "Delayed", "In Transit", "Delayed", "In Transit", "In Transit", "In Transit"])
colFlag = Col("Action", ["Flag", "Flag", "Flag", "Flag", "Flag", "Flag", "Flag"], "action")
volumeByCarrier = Card([volumeHeader, carrierChart], "sunk", "column", "m")
volumeHeader = Heading("Volume Split by Carrier", "h3")
carrierChart = PieChart(carrierLabels, carrierValues, "donut")
carrierLabels = ["FedEx", "UPS", "DHL", "USPS", "Regional"]
carrierValues = [42, 28, 15, 10, 5]
weeklyVolumeChart = Card([weeklyHeader, weeklyChart], "sunk", "column", "m")
weeklyHeader = Heading("Weekly Volume (Past 8 Weeks)", "h3")
weeklyChart = BarChart(weekLabels, [weeklySeries], "grouped", "Week", "Shipments")
weekLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]
weeklySeries = Series("Shipments", [142, 156, 138, 167, 154, 173, 161, 149])
flagSection = Card([flagHeader, flagForm], "sunk", "column", "m")
flagHeader = Heading("Flag a Shipment", "h3")
flagForm = Form("flag-shipment", flagButtons, [flagShipmentField, flagReasonField])
flagShipmentField = FormControl("Shipment ID", flagShipmentSelect, "Select the shipment to flag")
flagShipmentSelect = Select("flag_shipment", flagShipmentOptions, "Choose shipment...")
flagShipmentOptions = [opt4418, opt4421, opt4429, opt4435, opt4440, opt4448, opt4452]
opt4418 = SelectItem("SHIP-4418", "SHIP-4418 (LAX → JFK)")
opt4421 = SelectItem("SHIP-4421", "SHIP-4421 (LAX → JFK) — Delayed")
opt4429 = SelectItem("SHIP-4429", "SHIP-4429 (ORD → MIA)")
opt4435 = SelectItem("SHIP-4435", "SHIP-4435 (ORD → MIA) — Delayed")
opt4440 = SelectItem("SHIP-4440", "SHIP-4440 (SEA → LAX) — Delayed")
opt4448 = SelectItem("SHIP-4448", "SHIP-4448 (JFK → LAX)")
opt4452 = SelectItem("SHIP-4452", "SHIP-4452 (DFW → SEA)")
flagReasonField = FormControl("Reason", flagReasonInput, "Brief reason for flagging")
flagReasonInput = TextArea("flag_reason", "Enter reason...", 3)
flagButtons = Buttons([flagSubmitBtn, flagCancelBtn])
flagSubmitBtn = Button("Submit Flag", null, "primary", "destructive")
flagCancelBtn = Button("Cancel", null, "secondary")