root = Card([headerRow, kpiSection, filtersSection, volumeSection, ordersSection], "card", "column", "xl")
headerRow = Card([headerTitle, liveBadge], "clear", "row", "m", "center")
headerTitle = CardHeader("Operations Desk", "E-commerce command center")
liveBadge = Tag("Live", null, "sm", "success")
kpiSection = Card([kpiHeader, kpiTable], "sunk")
kpiHeader = CardHeader("Today's numbers", "Orders, revenue and refunds")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Orders placed today", "Revenue today", "Average order value", "Refund rate this month"])
kpiValue = Col("Value", ["128", "$12,480", "$97.50", "3.2%"])
filtersSection = Card([filtersHeader, filterForm], "sunk")
filtersHeader = CardHeader("Find orders", "Search by customer or narrow by status")
filterForm = Form("filters", filterButtons, [searchField, statusField])
searchField = FormControl("Search", searchInput, "Match by customer name")
searchInput = Input("search", "Search by customer name...")
statusField = FormControl("Status", statusSelect)
statusSelect = Select("status", [statusAll, statusPending, statusPaid, statusFulfilled, statusRefunded], "Filter by status")
statusAll = SelectItem("all", "All statuses")
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")
volumeSection = Card([volumeHeader, volumeChart], "sunk")
volumeHeader = CardHeader("Order volume", "Past four weeks")
volumeChart = BarChart(["Week 1", "Week 2", "Week 3", "Week 4"], [orderVolumeSeries], "grouped", "Week", "Orders")
orderVolumeSeries = Series("Orders", [312, 358, 394, 441])
ordersSection = Card([ordersHeader, ordersTable], "sunk")
ordersHeader = CardHeader("Recent orders", "Latest transactions")
ordersTable = Table([orderCol, customerCol, totalCol, statusCol, actionCol])
orderCol = Col("Order", ["#1042", "#1041", "#1040", "#1039", "#1038"])
customerCol = Col("Customer", ["Jane Cooper", "Floyd Miles", "Esther Howard", "Cody Fisher", "Jenny Wilson"])
totalCol = Col("Total", ["$189.00", "$94.50", "$212.00", "$45.99", "$158.75"])
statusCol = Col("Status", ["Paid", "Pending", "Fulfilled", "Refunded", "Paid"])
actionCol = Col("", ["Fulfill", "Fulfill", "Fulfilled", "Fulfill", "Fulfill"], "action")