root = Card([header, refreshInfo, searchForm, kpiRow, delayedAlert, shipmentsTable, carrierChart, weeklyChart, flagAction, followUps])
header = CardHeader("Logistics Coordinator Board", "Live shipment tracking & performance overview")
refreshInfo = TextContent("Last refreshed: 2024-12-19 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_query", "LAX → JFK", "text")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search", null, "primary")
clearBtn = Button("Clear", null, "tertiary")
kpiRow = Card([onTimeCard, avgCostCard], "clear", "row", "m")
onTimeCard = Card([onTimeLabel, onTimeValue], "sunk", "column", "s", "center")
onTimeLabel = TextContent("On-time this month", "small")
onTimeValue = TextContent("87%", "large-heavy")
avgCostCard = Card([avgCostLabel, avgCostValue], "sunk", "column", "s", "center")
avgCostLabel = TextContent("Avg cost per shipment", "small")
avgCostValue = TextContent("$2,450", "large-heavy")
delayedAlert = Alert("3 delayed shipments require attention", "SHIP-4421, SHIP-4435, SHIP-4449 running behind schedule", "warning")
shipmentsTable = Table([colId, colOrigin, colDest, colEta, colStatus, colFlag])
colId = Col("Shipment ID", ["SHIP-4421", "SHIP-4435", "SHIP-4449", "SHIP-4450", "SHIP-4451", "SHIP-4452", "SHIP-4453", "SHIP-4454"])
colOrigin = Col("Origin", ["Shanghai", "Los Angeles", "Hamburg", "Singapore", "Rotterdam", "Dubai", "Tokyo", "New York"])
colDest = Col("Destination", ["Los Angeles", "Shanghai", "New York", "Rotterdam", "Singapore", "Hamburg", "Los Angeles", "Tokyo"])
colEta = Col("ETA", ["2024-12-22", "2024-12-20", "2024-12-25", "2024-12-21", "2024-12-23", "2024-12-24", "2024-12-26", "2024-12-27"])
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 = ["Maersk", "MSC", "CMA CGM", "COSCO", "Hapag-Lloyd", "ONE", "Evergreen", "Other"]
carrierValues = [24, 18, 15, 12, 10, 8, 7, 6]
weeklyChart = Card([weeklyHeading, weeklyBar], "sunk")
weeklyHeading = Heading("Weekly volume (past 8 weeks)", "h3")
weeklyBar = BarChart(weekLabels, [weekSeries], "grouped", "Week", "Shipments")
weekLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]
weekSeries = Series("Shipments", [42, 38, 45, 41, 47, 44, 50, 48])
flagAction = Buttons([flagBtn])
flagBtn = Button("Flag selected shipment", null, "secondary")
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Show me all delayed shipments with root cause")
followUp2 = FollowUpItem("Export this week's shipment manifest")
followUp3 = FollowUpItem("Set up alerts for ETA changes > 24 hours")