root = Card([header, kpis, filters, recentOrders, charts, actions])
header = CardHeader("Operations Desk", "Live view of today's orders and revenue")
kpis = Card([kpiTitle, kpiTable], "sunk")
kpiTitle = Heading("Today's KPIs", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Orders placed", "Revenue", "Average order value", "Refund rate (this month)"])
kpiValue = Col("Value", ["142", "$18,430", "$129.79", "3.2%"])
filters = Card([filterTitle, statusFilter, searchField], "sunk")
filterTitle = Heading("Narrow orders", "h3")
statusFilter = FormControl("Status", statusSelect, "Filter by order status")
statusSelect = Select("status", [statusAll, statusPending, statusShipped, statusFulfilled, statusCancelled], "All statuses")
statusAll = SelectItem("all", "All statuses")
statusPending = SelectItem("pending", "Pending")
statusShipped = SelectItem("shipped", "Shipped")
statusFulfilled = SelectItem("fulfilled", "Fulfilled")
statusCancelled = SelectItem("cancelled", "Cancelled")
searchField = FormControl("Search customer", searchInput, "Search by customer name")
searchInput = Input("customer_search", "e.g. Jane Smith")
recentOrders = Card([ordersTitle, ordersTable], "sunk")
ordersTitle = Heading("Recent orders", "h3")
ordersTable = Table([orderId, orderCustomer, orderTotal, orderStatus, orderAction])
orderId = Col("Order ID", ["#1042", "#1041", "#1040", "#1039", "#1038"])
orderCustomer = Col("Customer", ["Jane Smith", "Mark Lee", "Priya Patel", "Carlos Ruiz", "Anna Kim"])
orderTotal = Col("Total", ["$245.00", "$89.50", "$412.75", "$156.20", "$98.00"])
orderStatus = Col("Status", ["Pending", "Shipped", "Fulfilled", "Pending", "Cancelled"])
orderAction = Col("Action", ["Mark fulfilled", "Mark fulfilled", "Done", "Mark fulfilled", "—"], "action")
charts = Card([volumeTitle, volumeChart], "sunk")
volumeTitle = Heading("Order volume — past 4 weeks", "h3")
volumeChart = BarChart(["Week 1", "Week 2", "Week 3", "Week 4"], [volumeSeries], "grouped", "Week", "Orders")
volumeSeries = Series("Orders", [820, 910, 985, 1040])
actions = Buttons([markFulfilledBtn])
markFulfilledBtn = Button("Mark selected order as fulfilled", null, "primary")