root = Card([header, kpiRow, filters, ordersSection, volumeSection])
header = CardHeader("E-Commerce Operations Desk", "Real-time order management & metrics")
kpiRow = Card([ordersTodayCard, revenueTodayCard, aovCard, refundRateCard], "clear", "row", "l", "stretch", "start", true)
ordersTodayCard = Card([ordersTodayLabel, ordersTodayValue], "sunk", "column", "m")
ordersTodayLabel = TextContent("Orders Today", "small")
ordersTodayValue = TextContent("247", "large-heavy")
revenueTodayCard = Card([revenueTodayLabel, revenueTodayValue], "sunk", "column", "m")
revenueTodayLabel = TextContent("Revenue Today", "small")
revenueTodayValue = TextContent("$38,420", "large-heavy")
aovCard = Card([aovLabel, aovValue], "sunk", "column", "m")
aovLabel = TextContent("Avg Order Value", "small")
aovValue = TextContent("$155.55", "large-heavy")
refundRateCard = Card([refundRateLabel, refundRateValue], "sunk", "column", "m")
refundRateLabel = TextContent("Refund Rate (Month)", "small")
refundRateValue = TextContent("3.2%", "large-heavy")
filters = Card([statusFilter, searchInput], "clear", "row", "l", "center", "start", true)
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")
searchInput = Input("customer_search", "Search by customer name...", "text", null, "")
ordersSection = Card([ordersHeading, ordersTable, fulfillActions], "card", "column", "m")
ordersHeading = Heading("Recent Orders", "h3")
ordersTable = Table([orderIdCol, customerCol, totalCol, statusCol])
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"])
customerCol = Col("Customer", ["Sarah Chen", "Marcus Johnson", "Emily Davis", "James Wilson", "Lisa Anderson", "Robert Taylor", "Amanda White", "Christopher Lee"])
totalCol = Col("Total", [129.99, 89.50, 245.00, 67.25, 189.99, 45.00, 312.50, 78.75])
statusCol = Col("Status", ["processing", "shipped", "delivered", "pending", "processing", "cancelled", "delivered", "refunded"])
fulfillActions = Buttons([fulfillBtn], "row")
fulfillBtn = Button("Mark Selected Fulfilled", null, "primary")
volumeSection = Card([volumeHeading, volumeChart], "card", "column", "m")
volumeHeading = Heading("Order Volume (Last 4 Weeks)", "h3")
volumeChart = LineChart(weekLabels, [volumeSeries], "natural", "Week", "Orders")
weekLabels = ["Week 1", "Week 2", "Week 3", "Week 4"]
volumeSeries = Series("Orders", [185, 210, 195, 247])