root = Card([header, storeSelector, kpiRow, trafficChart, bestSellersSection, outOfStockSection, shiftSection, basketReturnsRow, promotionsSection, registersSection, reorderForm, weekComparison], "card", "column", "l")

header = CardHeader("Store Manager Console", "Daily overview — updated in real time")

storeSelector = Form("store-select", storeButtons, [storeField])
storeField = FormControl("Select store", storeSelect, "Switch to view another location")
storeSelect = Select("store_id", storeOptions, "Choose store...")
storeOptions = [optMain, optDowntown, optMall, optAirport]
optMain = SelectItem("main", "Main Street — #001")
optDowntown = SelectItem("downtown", "Downtown — #002")
optMall = SelectItem("mall", "Westfield Mall — #003")
optAirport = SelectItem("airport", "Airport Terminal — #004")
storeButtons = Buttons([applyStoreBtn])
applyStoreBtn = Button("Apply", null, "primary")

kpiRow = Card([salesTargetCard, basketCard, returnsCard], "clear", "row", "m", "stretch", "start", true)
salesTargetCard = Card([salesTargetLabel, salesTargetValue, salesTargetProgress], "sunk", "column", "s")
salesTargetLabel = TextContent("Sales today vs target", "small")
salesTargetValue = TextContent("$18,420 / $25,000", "large-heavy")
salesTargetProgress = Progress(74, "74% of target")
basketCard = Card([basketLabel, basketValue, basketTrend], "sunk", "column", "s")
basketLabel = TextContent("Avg basket size", "small")
basketValue = TextContent("$47.80", "large-heavy")
basketTrend = Tag("+3.2% vs yesterday", null, null, "success")
returnsCard = Card([returnsLabel, returnsValue, returnsTrend], "sunk", "column", "s")
returnsLabel = TextContent("Returns this week", "small")
returnsValue = TextContent("23 items", "large-heavy")
returnsTrend = Tag("-2 vs last week", null, null, "info")

trafficChart = Card([trafficHeader, trafficChartComp], "sunk", "column", "m")
trafficHeader = Heading("Foot traffic through the day", "h3")
trafficChartComp = AreaChart(trafficHours, [trafficSeries], "natural", "Hour", "Visitors")
trafficHours = ["6am", "7am", "8am", "9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm"]
trafficSeries = Series("Visitors", [12, 28, 65, 112, 189, 245, 312, 298, 267, 234, 201, 178, 156, 134, 89])

bestSellersSection = Card([bestSellersHeader, bestSellersTable], "sunk", "column", "m")
bestSellersHeader = Heading("Best sellers today", "h3")
bestSellersTable = Table([bsProduct, bsUnits, bsRevenue])
bsProduct = Col("Product", ["Organic Oat Milk 1L", "Sourdough Loaf", "Free-Range Eggs 12pk", "Artisan Coffee 250g", "Greek Yogurt 500g"])
bsUnits = Col("Units sold", [47, 42, 38, 35, 31], "number")
bsRevenue = Col("Revenue", ["$232.65", "$188.58", "$189.62", "$209.65", "$154.69"])

outOfStockSection = Card([oosHeader, oosTable], "sunk", "column", "m")
oosHeader = Heading("Items out of stock", "h3")
oosTable = Table([oosProduct, oosCategory, oosLastRestock, oosAction])
oosProduct = Col("Product", ["Gluten-Free Bread", "Almond Butter 340g", "Kombucha Ginger 330ml", "Vegan Cheese Slices", "Cold Brew Concentrate"])
oosCategory = Col("Category", ["Bakery", "Pantry", "Beverages", "Dairy Alt.", "Beverages"])
oosLastRestock = Col("Last restock", ["3 days ago", "5 days ago", "2 days ago", "7 days ago", "4 days ago"])
oosAction = Col("Action", ["Reorder", "Reorder", "Reorder", "Reorder", "Reorder"], "action")

shiftSection = Card([shiftHeader, shiftList], "sunk", "column", "m")
shiftHeader = Heading("On shift today", "h3")
shiftList = ListBlock(shiftItems, "image")
shiftItems = [shiftSarah, shiftMike, shiftPriya, shiftJames, shiftEmma]
shiftSarah = ListItem("Sarah Chen", "Manager • 8am–4pm", ["https://picsum.photos/seed/sarah/100/100"], null)
shiftMike = ListItem("Mike Torres", "Cashier • 8am–2pm", ["https://picsum.photos/seed/mike/100/100"], null)
shiftPriya = ListItem("Priya Patel", "Stock • 10am–6pm", ["https://picsum.photos/seed/priya/100/100"], null)
shiftJames = ListItem("James Okonkwo", "Cashier • 12pm–8pm", ["https://picsum.photos/seed/james/100/100"], null)
shiftEmma = ListItem("Emma Larson", "Floor Lead • 2pm–10pm", ["https://picsum.photos/seed/emma/100/100"], null)

basketReturnsRow = Card([basketDetail, returnsDetail], "clear", "row", "m", "stretch", "start", true)
basketDetail = Card([basketDetailHeader, basketDetailContent], "sunk", "column", "s")
basketDetailHeader = Heading("Basket insights", "h4")
basketDetailContent = TextContent("Average items per basket: 4.2 • Peak hour avg: $52.10 (12–1pm) • Lowest: $38.40 (8–9am)")
returnsDetail = Card([returnsDetailHeader, returnsDetailContent], "sunk", "column", "s")
returnsDetailHeader = Heading("Returns breakdown", "h4")
returnsDetailContent = TextContent("23 returns • 14 size/fit • 5 damaged • 4 changed mind • Refund rate: 2.1% of transactions")

promotionsSection = Card([promoHeader, promoTable], "sunk", "column", "m")
promoHeader = Heading("Running promotions performance", "h3")
promoTable = Table([promoName, promoType, promoRedemptions, promoRevenue, promoROI])
promoName = Col("Promotion", ["Buy 2 Get 1 Free - Snacks", "20% Off Bakery After 4pm", "Loyalty Double Points", "Student 10% Tuesdays", "Bundle: Coffee + Pastry"])
promoType = Col("Type", ["BOGO", "Time-based", "Loyalty", "Segment", "Bundle"])
promoRedemptions = Col("Redemptions", [89, 156, 234, 67, 112], "number")
promoRevenue = Col("Revenue", ["$1,335", "$2,184", "$4,680", "$871", "$2,016"])
promoROI = Col("ROI", ["+18%", "+22%", "+31%", "+12%", "+25%"])

registersSection = Card([regHeader, regTable], "sunk", "column", "m")
regHeader = Heading("Register status", "h3")
regTable = Table([regNumber, regStatus, regCashier, regSales, regAction])
regNumber = Col("Register", ["#1", "#2", "#3", "#4", "#5"])
regStatus = Col("Status", ["Open", "Open", "Closed", "Open", "Maintenance"])
regCashier = Col("Cashier", ["Mike Torres", "James Okonkwo", "—", "Sarah Chen", "—"])
regSales = Col("Sales today", ["$4,210", "$3,890", "$0", "$5,120", "$0"])
regAction = Col("Action", ["View", "View", "Open", "View", "Repair"], "action")

reorderForm = Card([reorderHeader, reorderFormComp], "sunk", "column", "m")
reorderHeader = Heading("Quick reorder", "h3")
reorderFormComp = Form("reorder", reorderButtons, [reorderItemField, reorderQtyField, reorderNoteField])
reorderItemField = FormControl("Item to reorder", reorderItemSelect, "Select from low-stock or out-of-stock items")
reorderItemSelect = Select("reorder_item", reorderItemOptions, "Choose item...")
reorderItemOptions = [roiBread, roiAlmond, roiKombucha, roiCheese, roiColdBrew]
roiBread = SelectItem("gf-bread", "Gluten-Free Bread (OOS)")
roiAlmond = SelectItem("almond-butter", "Almond Butter 340g (OOS)")
roiKombucha = SelectItem("kombucha-ginger", "Kombucha Ginger 330ml (OOS)")
roiCheese = SelectItem("vegan-cheese", "Vegan Cheese Slices (OOS)")
roiColdBrew = SelectItem("cold-brew", "Cold Brew Concentrate (OOS)")
reorderQtyField = FormControl("Quantity", reorderQtyInput, "Enter number of units")
reorderQtyInput = Input("reorder_qty", "50", "number")
reorderNoteField = FormControl("Note (optional)", reorderNoteArea, "Supplier instructions, urgency, etc.")
reorderNoteArea = TextArea("reorder_note", "Urgent — weekend rush expected", 3)
reorderButtons = Buttons([reorderSubmitBtn, reorderCancelBtn])
reorderSubmitBtn = Button("Place reorder", null, "primary")
reorderCancelBtn = Button("Cancel", null, "tertiary")

weekComparison = Card([wcHeader, wcChart], "sunk", "column", "m")
wcHeader = Heading("This week vs last week", "h3")
wcChart = BarChart(wcDays, [wcThisWeek, wcLastWeek], "grouped", "Day", "Sales ($)")
wcDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
wcThisWeek = Series("This week", [18420, 21100, 19850, 22300, 24100, 28900, 26500])
wcLastWeek = Series("Last week", [17200, 19800, 18900, 20500, 22800, 27100, 24900])