root = Card([header, refreshInfo, statsRow, alertBanner, transitSection, searchSection, chartSection, carrierSection, flagSection, footerActions])
header = CardHeader("Logistics Coordination Board", "Live view of shipments, carriers, and costs")
refreshInfo = TextContent("Last refreshed: 09:42 UTC · Auto-refresh every 5 minutes", "small")
statsRow = Card([statHeading, statTable], "sunk")
statHeading = Heading("Key metrics — October", "h3")
statTable = Table([metricCol, valueCol])
metricCol = Col("Metric", ["On-time percentage", "Average cost / shipment", "Shipments in transit", "Delayed shipments"])
valueCol = Col("Value", ["94.2%", "$186.40", "128", "7"])
alertBanner = Callout("warning", "7 shipments delayed", "3 shipments are over 6 hours late. See the list below and consider flagging them for follow-up.")
transitSection = Card([transitHeading, transitTable], "sunk")
transitHeading = Heading("Shipments in transit", "h3")
transitTable = Table([shipIdCol, originCol, destCol, etaCol, statusCol])
shipIdCol = Col("Shipment", ["SHP-1042", "SHP-1043", "SHP-1044", "SHP-1045", "SHP-1046", "SHP-1047", "SHP-1048"])
originCol = Col("Origin", ["Chicago, IL", "Dallas, TX", "Seattle, WA", "Miami, FL", "Denver, CO", "Atlanta, GA", "Phoenix, AZ"])
destCol = Col("Destination", ["New York, NY", "Los Angeles, CA", "Boston, MA", "Houston, TX", "San Francisco, CA", "Nashville, TN", "Portland, OR"])
etaCol = Col("ETA", ["Oct 14, 14:30", "Oct 14, 18:00", "Oct 15, 09:00", "Oct 15, 11:30", "Oct 15, 16:45", "Oct 16, 08:15", "Oct 16, 13:20"])
statusCol = Col("Status", ["On time", "Delayed", "On time", "Delayed", "On time", "Delayed", "On time"])
searchSection = Card([searchHeading, searchForm])
searchHeading = Heading("Search by route", "h3")
searchForm = Form("route-search", searchButtons, [originField, destField])
originField = FormControl("Origin", originInput)
originInput = Input("origin", "e.g. Chicago, IL")
destField = FormControl("Destination", destInput)
destInput = Input("destination", "e.g. New York, NY")
searchButtons = Buttons([searchBtn, clearBtn])
searchBtn = Button("Search routes", null, "primary")
clearBtn = Button("Clear", null, "tertiary")
chartSection = Card([volumeHeading, volumeChart], "sunk")
volumeHeading = Heading("Weekly shipment volume — past 2 months", "h3")
volumeChart = BarChart(["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"], [volSeries], "grouped", "Week", "Shipments")
volSeries = Series("Shipments", [142, 158, 151, 169, 175, 162, 184, 178])
carrierSection = Card([carrierHeading, carrierPie], "sunk")
carrierHeading = Heading("Volume split by carrier", "h3")
carrierPie = PieChart(["FastTrack", "HaulLine", "CargoPlus", "ShipRight"], [42, 31, 17, 10], "donut")
flagSection = Card([flagHeading, flagForm], "sunk")
flagHeading = Heading("Flag a shipment", "h3")
flagForm = Form("flag-shipment", flagButtons, [flagIdField, flagReasonField])
flagIdField = FormControl("Shipment ID", flagIdInput)
flagIdInput = Input("shipment_id", "e.g. SHP-1042")
flagReasonField = FormControl("Reason", flagReasonSelect)
flagReasonSelect = Select("flag_reason", [reasonLate, reasonDamage, reasonReroute], "Select a reason")
reasonLate = SelectItem("late", "Late delivery")
reasonDamage = SelectItem("damage", "Damage reported")
reasonReroute = SelectItem("reroute", "Needs rerouting")
flagButtons = Buttons([flagBtn])
flagBtn = Button("Flag shipment", null, "primary")
footerActions = Buttons([exportBtn, refreshBtn])
exportBtn = Button("Export report", null, "secondary")
refreshBtn = Button("Refresh now", null, "secondary")