root = Card([header, kpiSection, filterSection, ordersSection, volumeSection, followup], "card", "column", "l")
header = CardHeader("Operations Desk", "Orders, revenue, and refunds — today")
kpiSection = Card([ordersValue, ordersLabel, kpiSep1, revenueValue, revenueLabel, kpiSep2, aovValue, aovLabel, kpiSep3, refundValue, refundLabel], "sunk", "row", "l", "center")
ordersValue = TextContent("128", "large-heavy")
ordersLabel = TextContent("orders today", "small")
kpiSep1 = Separator("vertical", true)
revenueValue = TextContent("$12,840", "large-heavy")
revenueLabel = TextContent("revenue today", "small")
kpiSep2 = Separator("vertical", true)
aovValue = TextContent("$98.40", "large-heavy")
aovLabel = TextContent("avg order value", "small")
kpiSep3 = Separator("vertical", true)
refundValue = TextContent("2.4%", "large-heavy")
refundLabel = TextContent("refund rate this month", "small")
filterSection = Card([filterHeading, filtersForm], "sunk", "column", "m")
filterHeading = Heading("Find orders", "h3")
filtersForm = Form("order-filters", filterButtons, [searchControl, statusControl])
searchControl = FormControl("Customer", searchInput, "Search by customer name")
searchInput = Input("customer_search", "e.g. Ava Thompson")
statusControl = FormControl("Status", statusSelect, "Narrow the list to one status")
statusSelect = Select("status", [statusPending, statusPaid, statusFulfilled, statusRefunded], "Any status")
statusPending = SelectItem("pending", "Pending")
statusPaid = SelectItem("paid", "Paid")
statusFulfilled = SelectItem("fulfilled", "Fulfilled")
statusRefunded = SelectItem("refunded", "Refunded")
filterButtons = Buttons([applyBtn, resetBtn])
applyBtn = Button("Apply filters", null, "primary")
resetBtn = Button("Reset", null, "tertiary")
ordersSection = Card([ordersHeading, ordersTable], "sunk", "column", "m")
ordersHeading = Heading("Recent orders", "h3")
ordersTable = Table([orderIdCol, customerCol, totalCol, statusCol, actionCol])
orderIdCol = Col("Order ID", ["#10482", "#10481", "#10480", "#10479", "#10478"])
customerCol = Col("Customer", ["Ava Thompson", "Marcus Lee", "Priya Patel", "Jonas Weber", "Elena Ruiz"])
totalCol = Col("Total", ["$156.20", "$89.90", "$234.00", "$48.50", "$312.75"])
statusCol = Col("Status", ["Paid", "Pending", "Paid", "Fulfilled", "Refunded"])
actionCol = Col("", ["Mark fulfilled", "Mark fulfilled", "Mark fulfilled", "Mark fulfilled", "Mark fulfilled"], "action")
volumeSection = Card([volumeHeading, volumeChart], "sunk", "column", "m")
volumeHeading = Heading("Order volume — past 4 weeks", "h3")
volumeChart = BarChart(["Jan 6–12", "Jan 13–19", "Jan 20–26", "Jan 27–Feb 2"], [volumeSeries], "grouped", "Week", "Orders")
volumeSeries = Series("Orders", [612, 708, 655, 742])
followup = FollowUpBlock([f1, f2, f3])
f1 = FollowUpItem("Show shipments due today")
f2 = FollowUpItem("Export recent orders as CSV")
f3 = FollowUpItem("Which orders need attention?")