root = Card([header, storeSwitcher, kpiSection, trafficSection, bestSellersSection, stockSection, shiftSection, promotionsSection, registersSection, reorderSection, comparisonSection, footerActions])
header = CardHeader("Daily Store Console", "Overview for Store #42 — Riverside Mall")
storeSwitcher = Card([storeLabel, storeSelect], "sunk", "row", "m", "center")
storeLabel = TextContent("Store:", "small-heavy")
storeSelect = Select("store", [storeA, storeB, storeC], "Select a store", null, null, "medium")
storeA = SelectItem("42", "Store #42 — Riverside Mall")
storeB = SelectItem("17", "Store #17 — Downtown Plaza")
storeC = SelectItem("88", "Store #88 — Harbor View")
kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key Metrics", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Sales Today", "Sales Target", "Avg Basket Size", "Returns This Week"])
kpiValue = Col("Value", ["$14,280", "$16,000", "$58.40", "$1,120 (7 returns)"])
trafficSection = Card([trafficHeading, trafficChart], "sunk")
trafficHeading = Heading("Foot Traffic Through the Day", "h3")
trafficChart = AreaChart(["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm"], [trafficSeries], "natural", "Hour", "Shoppers")
trafficSeries = Series("Shoppers", [45, 78, 110, 165, 140, 120, 155, 190, 210, 175, 130, 85])
bestSellersSection = Card([bestSellersHeading, bestSellersTable], "sunk")
bestSellersHeading = Heading("Best Sellers", "h3")
bestSellersTable = Table([productCol, unitsCol])
productCol = Col("Product", ["Wireless Earbuds", "Stainless Bottle", "Yoga Mat", "LED Desk Lamp", "Travel Mug"])
unitsCol = Col("Units Sold", [132, 98, 74, 61, 55])
stockSection = Card([stockHeading, stockList], "sunk")
stockHeading = Heading("Items Out of Stock", "h3")
stockList = ListBlock([stockItem1, stockItem2, stockItem3, stockItem4], "number")
stockItem1 = ListItem("Wireless Charger", "SKU 88321 — needs reorder", null, "Reorder")
stockItem2 = ListItem("Bluetooth Speaker", "SKU 44710 — needs reorder", null, "Reorder")
stockItem3 = ListItem("Fitness Tracker", "SKU 90215 — needs reorder", null, "Reorder")
stockItem4 = ListItem("Phone Case (Large)", "SKU 33108 — needs reorder", null, "Reorder")
shiftSection = Card([shiftHeading, shiftList], "sunk")
shiftHeading = Heading("On Shift Today", "h3")
shiftList = ListBlock([shiftItem1, shiftItem2, shiftItem3, shiftItem4], "image")
shiftItem1 = ListItem("Maria Gomez", "Manager — 9:00 AM to 6:00 PM", ["https://picsum.photos/seed/maria/80/80"])
shiftItem2 = ListItem("James Lee", "Sales Associate — 10:00 AM to 7:00 PM", ["https://picsum.photos/seed/james/80/80"])
shiftItem3 = ListItem("Aisha Patel", "Cashier — 11:00 AM to 8:00 PM", ["https://picsum.photos/seed/aisha/80/80"])
shiftItem4 = ListItem("Tom Nguyen", "Stock Clerk — 9:00 AM to 5:00 PM", ["https://picsum.photos/seed/tom/80/80"])
promotionsSection = Card([promoHeading, promoTable], "sunk")
promoHeading = Heading("Running Promotions", "h3")
promoTable = Table([promoCol, promoStatus, promoProgress])
promoCol = Col("Promotion", ["Summer Sale 20%", "Buy 1 Get 1 — Socks", "Free Shipping $50+", "Loyalty Double Points"])
promoStatus = Col("Status", ["On track", "Underperforming", "On track", "Exceeding"])
promoProgress = Col("Progress", ["68% of goal", "42% of goal", "81% of goal", "112% of goal"])
registersSection = Card([registersHeading, registersList], "sunk")
registersHeading = Heading("Registers", "h3")
registersList = ListBlock([registerItem1, registerItem2, registerItem3, registerItem4], "image")
registerItem1 = ListItem("Register 1", "Open — Cashier Aisha Patel", ["https://picsum.photos/seed/reg1/80/80"], "View")
registerItem2 = ListItem("Register 2", "Open — Cashier James Lee", ["https://picsum.photos/seed/reg2/80/80"], "View")
registerItem3 = ListItem("Register 3", "Closed", ["https://picsum.photos/seed/reg3/80/80"], "View")
registerItem4 = ListItem("Register 4", "Open — Cashier Maria Gomez", ["https://picsum.photos/seed/reg4/80/80"], "View")
reorderSection = Card([reorderHeading, reorderForm], "sunk")
reorderHeading = Heading("Reorder an Item", "h3")
reorderForm = Form("reorder", reorderButtons, [reorderItemField, reorderQtyField])
reorderItemField = FormControl("Item", reorderItemInput, "Enter SKU or product name")
reorderItemInput = Input("reorder_item", "e.g. Wireless Charger")
reorderQtyField = FormControl("Quantity", reorderQtyInput)
reorderQtyInput = Input("reorder_qty", "e.g. 50", "number")
reorderButtons = Buttons([submitReorderBtn, cancelReorderBtn])
submitReorderBtn = Button("Submit Reorder", null, "primary")
cancelReorderBtn = Button("Cancel", null, "tertiary")
comparisonSection = Card([comparisonHeading, comparisonChart], "sunk")
comparisonHeading = Heading("This Week vs Last Week", "h3")
comparisonChart = BarChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [thisWeekSeries, lastWeekSeries], "grouped", "Day", "Sales ($)")
thisWeekSeries = Series("This Week", [2100, 2450, 2300, 2800, 3100, 3900, 4300])
lastWeekSeries = Series("Last Week", [1900, 2200, 2100, 2500, 2900, 3600, 4100])
footerActions = Buttons([dashboardBtn, reportsBtn, helpBtn])
dashboardBtn = Button("Dashboard", null, "secondary")
reportsBtn = Button("Reports", null, "secondary")
helpBtn = Button("Help", null, "tertiary")