root = Card([storeSelector, header, kpiRow, trafficChart, bestSellersSection, stockSection, shiftSection, basketReturnsRow, promoSection, registerSection, reorderForm, weeklyComparison, followUps])
storeSelector = Select("store_select", [storeMain, storeDowntown, storeMall, storeAirport], "Select store", null, "medium")
storeMain = SelectItem("main", "Main Street")
storeDowntown = SelectItem("downtown", "Downtown")
storeMall = SelectItem("mall", "Westfield Mall")
storeAirport = SelectItem("airport", "Airport Terminal")
header = CardHeader("Daily Console", "Main Street • Tuesday, January 21, 2025")
kpiRow = Card([salesTargetCard, basketCard, returnsCard], "clear", "row", "m")
salesTargetCard = Card([salesTargetLabel, salesTargetValue, salesTargetProgress], "sunk", "column", "s")
salesTargetLabel = TextContent("Sales vs Target", "small-heavy")
salesTargetValue = TextContent("$12,840 / $15,000", "large-heavy")
salesTargetProgress = Progress(85.6, "85.6% of daily target")
basketCard = Card([basketLabel, basketValue], "sunk", "column", "s")
basketLabel = TextContent("Avg Basket Size", "small-heavy")
basketValue = TextContent("$42.30", "large-heavy")
returnsCard = Card([returnsLabel, returnsValue], "sunk", "column", "s")
returnsLabel = TextContent("Returns This Week", "small-heavy")
returnsValue = TextContent("23 items • $1,180", "large-heavy")
trafficChart = Card([trafficHeading, trafficArea], "sunk", "column", "m")
trafficHeading = Heading("Foot Traffic Through the Day", "h3")
trafficArea = AreaChart(trafficHours, [trafficSeries], "natural", "Hour", "Visitors")
trafficHours = ["9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM"]
trafficSeries = Series("Visitors", [12, 28, 45, 62, 58, 51, 47, 53, 61, 49, 38, 22])
bestSellersSection = Card([bestSellersHeading, bestSellersTable], "sunk", "column", "m")
bestSellersHeading = Heading("Best Sellers Today", "h3")
bestSellersTable = Table([bsProduct, bsUnits, bsRevenue])
bsProduct = Col("Product", ["Wireless Earbuds", "Phone Case 14 Pro", "USB-C Hub 7-in-1", "Portable Charger 20K", "Screen Protector"])
bsUnits = Col("Units Sold", [18, 34, 12, 9, 27], "number")
bsRevenue = Col("Revenue", ["$1,782", "$1,156", "$714", "$621", "$324"], "string")
stockSection = Card([stockHeading, stockList], "sunk", "column", "m")
stockHeading = Heading("Out of Stock", "h3")
stockList = ListBlock([stockItem1, stockItem2, stockItem3, stockItem4], "number")
stockItem1 = ListItem("Bluetooth Speaker Mini", "SKU: BS-MINI-001 • Last sold 2 days ago", null, "Reorder")
stockItem2 = ListItem("Wireless Mouse Ergonomic", "SKU: WM-ERG-005 • Last sold yesterday", null, "Reorder")
stockItem3 = ListItem("Laptop Stand Aluminum", "SKU: LS-ALU-003 • Last sold 3 days ago", null, "Reorder")
stockItem4 = ListItem("Mechanical Keyboard TKL", "SKU: MK-TKL-002 • Last sold today", null, "Reorder")
shiftSection = Card([shiftHeading, shiftList], "sunk", "column", "m")
shiftHeading = Heading("On Shift Today", "h3")
shiftList = ListBlock([shift1, shift2, shift3, shift4, shift5], "image")
shift1 = ListItem("Sarah Chen", "Manager • 9AM–5PM", ["https://picsum.photos/seed/sarah/100/100"], null)
shift2 = ListItem("Marcus Johnson", "Senior Associate • 9AM–5PM", ["https://picsum.photos/seed/marcus/100/100"], null)
shift3 = ListItem("Priya Patel", "Associate • 12PM–8PM", ["https://picsum.photos/seed/priya/100/100"], null)
shift4 = ListItem("James Wilson", "Associate • 12PM–8PM", ["https://picsum.photos/seed/james/100/100"], null)
shift5 = ListItem("Aisha Hassan", "Cashier • 9AM–5PM", ["https://picsum.photos/seed/aisha/100/100"], null)
basketReturnsRow = Card([basketDetail, returnsDetail], "clear", "row", "m")
basketDetail = Card([basketDetailHeading, basketDetailContent], "sunk", "column", "s")
basketDetailHeading = Heading("Basket Details", "h4")
basketDetailContent = TextContent("Average items per transaction: 2.3\nAverage transaction value: $42.30\nPeak hour avg: $48.20 (12–1PM)")
returnsDetail = Card([returnsDetailHeading, returnsDetailContent], "sunk", "column", "s")
returnsDetailHeading = Heading("Returns Breakdown", "h4")
returnsDetailContent = TextContent("This week: 23 returns ($1,180)\nLast week: 18 returns ($940)\nTop reason: Wrong size (35%)")
promoSection = Card([promoHeading, promoTable], "sunk", "column", "m")
promoHeading = Heading("Active Promotions", "h3")
promoTable = Table([promoName, promoType, promoUsage, promoRevenue, promoRoi])
promoName = Col("Promotion", ["Buy 2 Get 1 Free", "Student 15% Off", "Loyalty Double Points", "Weekend Flash Sale"])
promoType = Col("Type", ["BOGO", "Discount", "Points", "Flash"])
promoUsage = Col("Used", [42, 18, 156, 8], "number")
promoRevenue = Col("Revenue", ["$3,150", "$1,240", "$4,890", "$980"], "string")
promoRoi = Col("ROI", ["+23%", "+18%", "+31%", "+45%"], "string")
registerSection = Card([registerHeading, registerList], "sunk", "column", "m")
registerHeading = Heading("Register Status", "h3")
registerList = ListBlock([reg1, reg2, reg3, reg4], "number")
reg1 = ListItem("Register 1", "Open • Sarah Chen • $3,240 processed", null, null)
reg2 = ListItem("Register 2", "Open • Aisha Hassan • $2,890 processed", null, null)
reg3 = ListItem("Register 3", "Closed • Maintenance scheduled", null, null)
reg4 = ListItem("Register 4 (Mobile)", "Open • Marcus Johnson • $1,150 processed", null, null)
reorderForm = Card([reorderHeading, reorderFormComponent], "sunk", "column", "m")
reorderHeading = Heading("Quick Reorder", "h3")
reorderFormComponent = Form("reorder", reorderButtons, [reorderItemField, reorderQtyField, reorderSupplierField])
reorderItemField = FormControl("Item", reorderItemSelect, "Search or select out-of-stock item")
reorderItemSelect = Select("reorder_item", [reorderOpt1, reorderOpt2, reorderOpt3, reorderOpt4], "Choose item")
reorderOpt1 = SelectItem("bs-mini-001", "Bluetooth Speaker Mini (OOS)")
reorderOpt2 = SelectItem("wm-erg-005", "Wireless Mouse Ergonomic (OOS)")
reorderOpt3 = SelectItem("ls-alu-003", "Laptop Stand Aluminum (OOS)")
reorderOpt4 = SelectItem("mk-tkl-002", "Mechanical Keyboard TKL (OOS)")
reorderQtyField = FormControl("Quantity", reorderQtyInput, "Enter reorder quantity")
reorderQtyInput = Input("reorder_qty", "50", "number")
reorderSupplierField = FormControl("Supplier", reorderSupplierSelect, "Preferred supplier")
reorderSupplierSelect = Select("reorder_supplier", [supplier1, supplier2, supplier3], "Select supplier")
supplier1 = SelectItem("supplier-a", "TechDistro Inc. (2-day lead)")
supplier2 = SelectItem("supplier-b", "GadgetWholesale (5-day lead)")
supplier3 = SelectItem("supplier-c", "ElectroSupply Co. (3-day lead)")
reorderButtons = Buttons([reorderSubmit, reorderCancel])
reorderSubmit = Button("Place Reorder", null, "primary")
reorderCancel = Button("Cancel", null, "tertiary")
weeklyComparison = Card([weeklyHeading, weeklyChart], "sunk", "column", "m")
weeklyHeading = Heading("This Week vs Last Week", "h3")
weeklyChart = BarChart(weeklyDays, [thisWeekSeries, lastWeekSeries], "grouped", "Day", "Sales ($)")
weeklyDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
thisWeekSeries = Series("This Week", [11200, 12840, 13100, 12950, 14200, 18500, 16800])
lastWeekSeries = Series("Last Week", [10800, 11900, 12400, 12100, 13500, 17200, 15900])
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Show me last month's full report")
followUp2 = FollowUpItem("Alert me when Bluetooth Speaker Mini is back in stock")
followUp3 = FollowUpItem("Compare Main Street with Downtown location")