root = Card([header, kpiSection, filters, ordersTable, volumeSection, actions])
header = CardHeader("E-commerce Operations Desk", "Today's live overview")
kpiSection = Card([kpiHeading, kpis], "sunk")
kpiHeading = Heading("Today's KPIs", "h3")
kpis = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Orders placed", "Revenue", "Average order value", "Refund rate (this month)"])
kpiValue = Col("Value", ["142", "$8,214", "$57.85", "3.2%"])
filters = Card([filterTitle, statusFilter, searchField], "clear", "column", "m")
filterTitle = Heading("Narrow orders", "h4")
statusFilter = FormControl("Status", statusSelect)
statusSelect = Select("status", [statusAll, statusPending, statusPaid, statusShipped, statusFulfilled, statusRefunded], "Filter by status", null, "pending")
statusAll = SelectItem("all", "All statuses")
statusPending = SelectItem("pending", "Pending")
statusPaid = SelectItem("paid", "Paid")
statusShipped = SelectItem("shipped", "Shipped")
statusFulfilled = SelectItem("fulfilled", "Fulfilled")
statusRefunded = SelectItem("refunded", "Refunded")
searchField = FormControl("Search customer", searchInput)
searchInput = Input("customer_search", "Search by customer name...", "text")
ordersTable = Card([ordersHeading, orders], "sunk")
ordersHeading = Heading("Recent orders", "h3")
orders = Table([orderId, orderCustomer, orderTotal, orderStatus, orderAction])
orderId = Col("Order ID", ["#10482", "#10481", "#10480", "#10479", "#10478", "#10477"])
orderCustomer = Col("Customer", ["Ava Martinez", "Liam Chen", "Sofia Rossi", "Noah Patel", "Emma Wilson", "Lucas Silva"])
orderTotal = Col("Total", ["$128.40", "$64.20", "$221.80", "$45.00", "$92.15", "$310.50"])
orderStatus = Col("Status", ["Pending", "Paid", "Shipped", "Fulfilled", "Pending", "Refunded"])
orderAction = Col("Action", ["Mark fulfilled", "Mark fulfilled", "Mark fulfilled", "Fulfilled", "Mark fulfilled", "Refunded"])
volumeSection = Card([volumeHeading, volumeChart], "sunk")
volumeHeading = Heading("Order volume — past 4 weeks", "h3")
volumeChart = BarChart(["Week 1", "Week 2", "Week 3", "Week 4"], [volumeSeries], "grouped", "Week", "Orders")
volumeSeries = Series("Orders", [720, 835, 910, 1045])
actions = Buttons([exportBtn, refreshBtn])
exportBtn = Button("Export orders", null, "secondary")
refreshBtn = Button("Refresh dashboard", null, "primary")