root = Card([header, searchForm, metricsRow, delayedCallout, shipmentsTable, carrierChart, volumeChart, flagSection, footer])
header = CardHeader("Logistics Coordinator Board", "Real-time shipment tracking and performance metrics")
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")
metricsRow = Card([onTimeMetric, avgCostMetric], "clear", "row", "l")
onTimeMetric = Card([onTimeLabel, onTimeValue], "sunk", "column", "m", "center")
onTimeLabel = TextContent("On-Time This Month", "small")
onTimeValue = TextContent("94.2%", "large-heavy")
avgCostMetric = Card([avgCostLabel, avgCostValue], "sunk", "column", "m", "center")
avgCostLabel = TextContent("Avg Cost per Shipment", "small")
avgCostValue = TextContent("$1,847", "large-heavy")
delayedCallout = Callout("warning", "3 Delayed Shipments Require Attention", "Shipments SH-8842, SH-8851, SH-8867 are past ETA. Contact carriers immediately.")
shipmentsTable = Table([colId, colOrigin, colDest, colEta, colStatus, colFlag])
colId = Col("Shipment ID", ["SH-8842", "SH-8851", "SH-8867", "SH-8873", "SH-8889", "SH-8894", "SH-8901", "SH-8912"])
colOrigin = Col("Origin", ["LAX", "ORD", "JFK", "SEA", "DFW", "ATL", "MIA", "SFO"])
colDest = Col("Destination", ["JFK", "LAX", "LHR", "ORD", "SEA", "MIA", "DFW", "ATL"])
colEta = Col("ETA", ["2024-01-15 14:30", "2024-01-15 18:45", "2024-01-16 09:15", "2024-01-16 22:00", "2024-01-17 06:30", "2024-01-17 11:45", "2024-01-17 16:20", "2024-01-18 08:00"])
colStatus = Col("Status", ["Delayed", "Delayed", "Delayed", "In Transit", "In Transit", "In Transit", "In Transit", "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]
volumeChart = Card([volumeHeading, volumeLine], "sunk")
volumeHeading = Heading("Weekly Volume (Past 8 Weeks)", "h3")
volumeLine = LineChart(weekLabels, [volumeSeries], "natural", "Week", "Shipments")
weekLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]
volumeSeries = Series("Shipments", [142, 156, 138, 167, 173, 159, 181, 176])
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_flag", flagShipmentItems, "Select shipment")
flagShipmentItems = [flagItem1, flagItem2, flagItem3, flagItem4, flagItem5, flagItem6, flagItem7, flagItem8]
flagItem1 = SelectItem("SH-8842", "SH-8842 (LAX → JFK)")
flagItem2 = SelectItem("SH-8851", "SH-8851 (ORD → LAX)")
flagItem3 = SelectItem("SH-8867", "SH-8867 (JFK → LHR)")
flagItem4 = SelectItem("SH-8873", "SH-8873 (SEA → ORD)")
flagItem5 = SelectItem("SH-8889", "SH-8889 (DFW → SEA)")
flagItem6 = SelectItem("SH-8894", "SH-8894 (ATL → MIA)")
flagItem7 = SelectItem("SH-8901", "SH-8901 (MIA → DFW)")
flagItem8 = SelectItem("SH-8912", "SH-8912 (SFO → ATL)")
flagReasonField = FormControl("Reason", flagReasonInput, "Brief description for the flag")
flagReasonInput = TextArea("flag_reason", "Enter reason...", 3)
flagButtons = Buttons([flagSubmitBtn, flagCancelBtn])
flagSubmitBtn = Button("Submit Flag", null, "primary", "destructive")
flagCancelBtn = Button("Cancel", null, "secondary")
footer = TextContent("Last refreshed: 2024-01-15 10:23:45 UTC", "small")