root = Card([header, kpis, filterForm, recentOrders, volumeSection], "card", "column", "l")
header = CardHeader("E-commerce Operations Desk", "Live overview for today")
kpis = Card([kpiTable], "sunk", "column", "m")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Orders placed today", "Revenue today", "Average order value", "Refund rate (this month)"])
kpiValue = Col("Value", ["186", "$24,920", "$134.00", "2.4%"])
filterForm = Form("filter-orders", filterButtons, [customerField, statusField])
filterButtons = Buttons([applyBtn, resetBtn])
applyBtn = Button("Apply filters", null, "primary")
resetBtn = Button("Reset", null, "secondary")
customerField = FormControl("Customer name", customerInput, "Search by name")
customerInput = Input("customer", "e.g. Jane Smith")
statusField = FormControl("Status", statusSelect)
statusSelect = Select("status", [statusAll, statusPending, statusPaid, statusFulfilled, statusRefunded], "Select a status")
statusAll = SelectItem("all", "All statuses")
statusPending = SelectItem("pending", "Pending")
statusPaid = SelectItem("paid", "Paid")
statusFulfilled = SelectItem("fulfilled", "Fulfilled")
statusRefunded = SelectItem("refunded", "Refunded")
recentOrders = Card([ordersHeading, ordersTable], "sunk")
ordersHeading = Heading("Recent orders", "h3")
ordersTable = Table([orderIdCol, customerCol, totalCol, statusCol, actionCol])
orderIdCol = Col("Order ID", ["#10482", "#10481", "#10480", "#10479", "#10478", "#10477"])
customerCol = Col("Customer", ["Ava Thompson", "Liam Chen", "Maya Patel", "Noah Williams", "Emma Rossi", "Lucas Kim"])
totalCol = Col("Total", ["$129.00", "$89.50", "$245.00", "$58.00", "$320.00", "$74.25"], "number")
statusCol = Col("Status", ["Pending", "Paid", "Fulfilled", "Paid", "Refunded", "Pending"])
actionCol = Col("Action", ["Fulfill", "Fulfill", "Done", "Fulfill", "View", "Fulfill"], "action")
volumeSection = Card([volumeHeading, volumeChart], "sunk")
volumeHeading = Heading("Order volume — past four weeks", "h3")
volumeChart = BarChart(["Week 1", "Week 2", "Week 3", "Week 4"], [volumeSeries], "grouped", "Week", "Orders")
volumeSeries = Series("Orders", [1120, 1285, 1170, 1486])