root = Card([header, kpiSection, chartSection, filterSection, ordersSection, actionsSection, followUp])
header = CardHeader("Operations Desk", "Today's sales and order management")
kpiSection = Card([kpiHeading, kpis], "sunk")
kpiHeading = Heading("Today at a glance", "h3")
kpis = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Orders placed", "Revenue", "Avg. order value", "Refund rate (month)"])
kpiValue = Col("Value", ["42", "$8,410", "$200.24", "3.1%"])
chartSection = Card([chartHeading, volumeChart], "sunk")
chartHeading = Heading("Order volume — past 4 weeks", "h3")
volumeChart = BarChart(["Week 1", "Week 2", "Week 3", "Week 4"], [volumeSeries], "grouped", "Week", "Orders")
volumeSeries = Series("Orders", [185, 212, 198, 236])
filterSection = Card([filterHeading, statusFilter, searchField], "sunk")
filterHeading = Heading("Narrow orders", "h3")
statusFilter = FormControl("Status", statusSelect)
statusSelect = Select("status", [statusAll, statusPending, statusShipped, statusFulfilled, statusRefunded], "All statuses")
statusAll = SelectItem("all", "All statuses")
statusPending = SelectItem("pending", "Pending")
statusShipped = SelectItem("shipped", "Shipped")
statusFulfilled = SelectItem("fulfilled", "Fulfilled")
statusRefunded = SelectItem("refunded", "Refunded")
searchField = FormControl("Search by customer", searchInput)
searchInput = Input("customer_search", "e.g. Jane Smith")
ordersSection = Card([ordersHeading, ordersTable])
ordersHeading = Heading("Recent orders", "h3")
ordersTable = Table([orderId, orderCustomer, orderTotal, orderStatus, orderAction])
orderId = Col("Order ID", ["#10482", "#10481", "#10480", "#10479", "#10478"])
orderCustomer = Col("Customer", ["Jane Smith", "Carlos Rivera", "Aisha Khan", "Tom Becker", "Lena Ortiz"])
orderTotal = Col("Total", ["$245.00", "$89.50", "$512.30", "$176.20", "$98.75"])
orderStatus = Col("Status", ["Pending", "Shipped", "Fulfilled", "Pending", "Refunded"])
orderAction = Col("Action", ["Mark fulfilled", "Mark fulfilled", "—", "Mark fulfilled", "—"], "action")
actionsSection = Card([markBtn], "clear")
markBtn = Buttons([fulfillBtn])
fulfillBtn = Button("Mark selected orders fulfilled", null, "primary")
followUp = FollowUpBlock([followUp1, followUp2])
followUp1 = FollowUpItem("Show orders with high refund risk")
followUp2 = FollowUpItem("Compare revenue by product category")