root = Card([header, storePicker, kpiSection, salesSection, trafficSection, bestSellersSection, outOfStockSection, shiftSection, returnsSection, promosSection, registersSection, reorderSection, weeklyCompareSection, followUps])
header = CardHeader("Daily Store Console", "Overview for Store #204 · Downtown")
storePicker = Form("store-switcher", storeButtons, [storeField])
storeField = FormControl("View store", storeSelect)
storeSelect = Select("store", [storeA, storeB, storeC], "Store #204 · Downtown")
storeA = SelectItem("204", "Store #204 · Downtown")
storeB = SelectItem("211", "Store #211 · Riverside")
storeC = SelectItem("189", "Store #189 · Uptown")
storeButtons = Buttons([applyStoreBtn])
applyStoreBtn = Button("Switch store", null, "secondary")
kpiSection = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Sales today", "Target", "Avg basket size", "Returns this week"])
kpiValue = Col("Value", ["$8,420", "$9,500", "$54.30", "$1,120"])
salesSection = Card([salesHeading, salesChart, salesCallout], "sunk")
salesHeading = Heading("Sales today vs target", "h3")
salesChart = BarChart(["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm"], [salesActual, salesTarget], "grouped", "Hour", "Sales ($)")
salesActual = Series("Actual", [320, 610, 890, 1150, 980, 1050, 1240, 1180, 950, 1050])
salesTarget = Series("Target", [400, 700, 900, 1200, 1100, 1150, 1300, 1250, 1000, 950])
salesCallout = Callout("warning", "Below target", "Sales are 11% behind today's target. Evening rush may help close the gap.")
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"], [trafficSeries], "natural", "Hour", "Visitors")
trafficSeries = Series("Visitors", [45, 88, 132, 210, 175, 190, 240, 225, 160, 130])
bestSellersSection = Card([bestHeading, bestTable], "sunk")
bestHeading = Heading("Best sellers", "h3")
bestTable = Table([itemCol, unitsCol])
itemCol = Col("Item", ["Cold Brew 12oz", "Butter Croissant", "Avocado Toast", "Blueberry Muffin", "Iced Matcha"])
unitsCol = Col("Units", [142, 118, 96, 87, 74])
outOfStockSection = Card([oosHeading, oosCallout, oosList], "sunk")
oosHeading = Heading("Out of stock", "h3")
oosCallout = Callout("error", "5 items need attention", "Reorder soon to avoid missed sales.")
oosList = ListBlock([oosOne, oosTwo, oosThree, oosFour, oosFive], "number")
oosOne = ListItem("Oat Milk 1L", "Sold out at 2:30pm")
oosTwo = ListItem("Sourdough Loaf", "Sold out at 11:00am")
oosThree = ListItem("Vanilla Syrup", "Sold out at 1:15pm")
oosFour = ListItem("Chocolate Chip Cookie", "Sold out at 3:40pm")
oosFive = ListItem("Cold Brew Concentrate", "Sold out at 10:20am")
shiftSection = Card([shiftHeading, shiftList], "sunk")
shiftHeading = Heading("On shift today", "h3")
shiftList = ListBlock([shiftOne, shiftTwo, shiftThree, shiftFour, shiftFive], "image")
shiftOne = ListItem("Maria Lopez", "Manager · 8am – 4pm", ["https://picsum.photos/seed/maria/80/80"])
shiftTwo = ListItem("James Chen", "Barista · 9am – 5pm", ["https://picsum.photos/seed/james/80/80"])
shiftThree = ListItem("Priya Patel", "Cashier · 10am – 6pm", ["https://picsum.photos/seed/priya/80/80"])
shiftFour = ListItem("Sam Rivera", "Barista · 11am – 7pm", ["https://picsum.photos/seed/sam/80/80"])
shiftFive = ListItem("Alex Kim", "Baker · 6am – 2pm", ["https://picsum.photos/seed/alex/80/80"])
returnsSection = Card([returnsHeading, returnsChart], "sunk")
returnsHeading = Heading("Returns this week", "h3")
returnsChart = LineChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [returnsSeries], "natural", "Day", "Returns ($)")
returnsSeries = Series("Returns", [150, 210, 90, 180, 260, 120, 110])
promosSection = Card([promosHeading, promosTable], "sunk")
promosHeading = Heading("Running promotions", "h3")
promosTable = Table([promoCol, statusCol, liftCol])
promoCol = Col("Promotion", ["Happy Hour 3–5pm", "Buy 1 Get 1 Pastries", "Loyalty Double Points", "Summer Cold Brew Deal"])
statusCol = Col("Status", ["Active", "Active", "Active", "Ends today"])
liftCol = Col("Lift vs baseline", ["+18%", "+12%", "+9%", "+24%"])
registersSection = Card([regHeading, regList], "sunk")
regHeading = Heading("Registers", "h3")
regList = ListBlock([regOne, regTwo, regThree, regFour])
regOne = ListItem("Register 1", "Open · Cashier: Priya")
regTwo = ListItem("Register 2", "Open · Cashier: James")
regThree = ListItem("Register 3", "Closed")
regFour = ListItem("Register 4", "Open · Cashier: Sam")
reorderSection = Card([reorderHeading, reorderForm], "sunk")
reorderHeading = Heading("Reorder an item", "h3")
reorderForm = Form("reorder", reorderButtons, [itemField, qtyField])
itemField = FormControl("Item", itemSelect)
itemSelect = Select("item", [itemOat, itemSourdough, itemVanilla, itemCookie, itemConcentrate], "Select an item")
itemOat = SelectItem("Oat Milk 1L", "Oat Milk 1L")
itemSourdough = SelectItem("Sourdough Loaf", "Sourdough Loaf")
itemVanilla = SelectItem("Vanilla Syrup", "Vanilla Syrup")
itemCookie = SelectItem("Chocolate Chip Cookie", "Chocolate Chip Cookie")
itemConcentrate = SelectItem("Cold Brew Concentrate", "Cold Brew Concentrate")
qtyField = FormControl("Quantity", qtyInput)
qtyInput = Input("quantity", "e.g. 24", "number")
reorderButtons = Buttons([submitOrderBtn])
submitOrderBtn = Button("Place reorder", null, "primary")
weeklyCompareSection = Card([weeklyHeading, weeklyChart], "sunk")
weeklyHeading = Heading("This week vs last week", "h3")
weeklyChart = LineChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [thisWeekSeries, lastWeekSeries], "natural", "Day", "Sales ($)")
thisWeekSeries = Series("This week", [1120, 1340, 980, 1500, 1620, 2400, 1980])
lastWeekSeries = Series("Last week", [1050, 1180, 1020, 1380, 1490, 2210, 1860])
followUps = FollowUpBlock([fu1, fu2, fu3])
fu1 = FollowUpItem("Show top selling items by hour")
fu2 = FollowUpItem("Compare returns across all stores")
fu3 = FollowUpItem("Suggest reorder quantities for out-of-stock items")