root = Card([header, kpis, statusFilter, searchField, recentOrders, volumeSection, refundCallout, markFulfilled])
header = CardHeader("Operations Desk", "Today's commerce overview")
kpis = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([kpiName, kpiValue])
kpiName = Col("Metric", ["Orders today", "Revenue today", "Average order value"])
kpiValue = Col("Value", ["128", "$14,820", "$115.78"])
statusFilter = Card([statusHeading, statusButtons], "clear")
statusHeading = Heading("Filter by status", "h3")
statusButtons = Buttons([allBtn, pendingBtn, shippedBtn, fulfilledBtn, cancelledBtn])
allBtn = Button("All", null, "secondary", null, "small")
pendingBtn = Button("Pending", null, "secondary", null, "small")
shippedBtn = Button("Shipped", null, "secondary", null, "small")
fulfilledBtn = Button("Fulfilled", null, "secondary", null, "small")
cancelledBtn = Button("Cancelled", null, "secondary", null, "small")
searchField = Form("search-customer", searchButtons, [searchControl])
searchControl = FormControl("Search by customer name", searchInput, "Type a name to narrow results")
searchInput = Input("customer_search", "e.g. Jane Smith")
searchButtons = Buttons([searchBtn])
searchBtn = Button("Search", null, "primary")
recentOrders = Card([ordersHeading, ordersTable], "sunk")
ordersHeading = Heading("Recent orders", "h3")
ordersTable = Table([orderId, orderCustomer, orderTotal, orderStatus])
orderId = Col("Order ID", ["#10482", "#10481", "#10480", "#10479", "#10478"])
orderCustomer = Col("Customer", ["Jane Smith", "Mark Johnson", "Priya Patel", "Carlos Ruiz", "Emma Wilson"])
orderTotal = Col("Total", ["$249.00", "$89.50", "$156.25", "$420.99", "$74.80"])
orderStatus = Col("Status", ["Pending", "Shipped", "Pending", "Fulfilled", "Cancelled"])
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", [612, 748, 690, 835])
refundCallout = Callout("info", "Refund rate this month", "3.2% of orders this month were refunded, within the 5% target.")
markFulfilled = Card([fulfillHeading, fulfillForm])
fulfillHeading = Heading("Mark an order fulfilled", "h3")
fulfillForm = Form("mark-fulfilled", fulfillButtons, [fulfillControl])
fulfillControl = FormControl("Order ID", fulfillInput, "Enter the order ID to update its status")
fulfillInput = Input("order_id", "#10482")
fulfillButtons = Buttons([fulfillBtn])
fulfillBtn = Button("Mark fulfilled", null, "primary")