root = Card([header, kpiRow, filtersSection, ordersTable, volumeChart])
header = CardHeader("E-Commerce Operations Desk", "Real-time order management and metrics")
kpiRow = Card([ordersTodayCard, revenueTodayCard, aovCard, refundRateCard], "clear", "row", "m", "stretch", "between")
ordersTodayCard = Card([ordersTodayLabel, ordersTodayValue], "sunk", "column", "s", "center")
ordersTodayLabel = TextContent("Orders Today", "small")
ordersTodayValue = TextContent("1,247", "large-heavy")
revenueTodayCard = Card([revenueTodayLabel, revenueTodayValue], "sunk", "column", "s", "center")
revenueTodayLabel = TextContent("Revenue Today", "small")
revenueTodayValue = TextContent("$89,432", "large-heavy")
aovCard = Card([aovLabel, aovValue], "sunk", "column", "s", "center")
aovLabel = TextContent("Avg Order Value", "small")
aovValue = TextContent("$71.72", "large-heavy")
refundRateCard = Card([refundRateLabel, refundRateValue], "sunk", "column", "s", "center")
refundRateLabel = TextContent("Refund Rate (Month)", "small")
refundRateValue = TextContent("3.2%", "large-heavy")
filtersSection = Card([statusFilter, customerSearch], "clear", "row", "m", "center", "between")
statusFilter = Select("status_filter", statusOptions, "All Statuses", null, "medium")
statusOptions = [statusAll, statusPending, statusProcessing, statusShipped, statusDelivered, statusCancelled, statusRefunded]
statusAll = SelectItem("all", "All Statuses")
statusPending = SelectItem("pending", "Pending")
statusProcessing = SelectItem("processing", "Processing")
statusShipped = SelectItem("shipped", "Shipped")
statusDelivered = SelectItem("delivered", "Delivered")
statusCancelled = SelectItem("cancelled", "Cancelled")
statusRefunded = SelectItem("refunded", "Refunded")
customerSearch = Input("customer_search", "Search by customer name...", "text", null, "")
ordersTable = Card([ordersHeading, ordersTableComponent], "card", "column", "m")
ordersHeading = Heading("Recent Orders", "h3")
ordersTableComponent = Table([orderIdCol, customerCol, totalCol, statusCol, actionCol])
orderIdCol = Col("Order ID", ["ORD-2024-001", "ORD-2024-002", "ORD-2024-003", "ORD-2024-004", "ORD-2024-005", "ORD-2024-006", "ORD-2024-007", "ORD-2024-008", "ORD-2024-009", "ORD-2024-010"])
customerCol = Col("Customer", ["Sarah Chen", "Marcus Johnson", "Emily Rodriguez", "David Kim", "Lisa Thompson", "James Wilson", "Maria Garcia", "Robert Brown", "Jennifer Lee", "Christopher Davis"])
totalCol = Col("Total", ["$127.50", "$89.99", "$245.00", "$67.25", "$198.75", "$45.00", "$312.40", "$78.90", "$156.30", "$203.60"])
statusCol = Col("Status", ["delivered", "processing", "shipped", "pending", "delivered", "cancelled", "processing", "shipped", "delivered", "refunded"])
actionCol = Col("Action", [fulfillBtn1, fulfillBtn2, fulfillBtn3, fulfillBtn4, fulfillBtn5, fulfillBtn6, fulfillBtn7, fulfillBtn8, fulfillBtn9, fulfillBtn10])
fulfillBtn1 = Button("Fulfill", ["fulfill:ORD-2024-001"], "primary", "normal", "small")
fulfillBtn2 = Button("Fulfill", ["fulfill:ORD-2024-002"], "primary", "normal", "small")
fulfillBtn3 = Button("Fulfill", ["fulfill:ORD-2024-003"], "primary", "normal", "small")
fulfillBtn4 = Button("Fulfill", ["fulfill:ORD-2024-004"], "primary", "normal", "small")
fulfillBtn5 = Button("Fulfill", ["fulfill:ORD-2024-005"], "primary", "normal", "small")
fulfillBtn6 = Button("Fulfill", ["fulfill:ORD-2024-006"], "primary", "normal", "small")
fulfillBtn7 = Button("Fulfill", ["fulfill:ORD-2024-007"], "primary", "normal", "small")
fulfillBtn8 = Button("Fulfill", ["fulfill:ORD-2024-008"], "primary", "normal", "small")
fulfillBtn9 = Button("Fulfill", ["fulfill:ORD-2024-009"], "primary", "normal", "small")
fulfillBtn10 = Button("Fulfill", ["fulfill:ORD-2024-010"], "primary", "normal", "small")
volumeChart = Card([volumeHeading, volumeChartComponent], "card", "column", "m")
volumeHeading = Heading("Order Volume (Past 4 Weeks)", "h3")
volumeChartComponent = BarChart(volumeLabels, [volumeSeries], "grouped", "Week", "Orders")
volumeLabels = ["Week 1", "Week 2", "Week 3", "Week 4"]
volumeSeries = Series("Orders", [892, 1156, 1034, 1247])