root = Card([header, storeSwitcherCard, kpiRow, weeklyCard, trafficCard, sellersCard, promosCard, shiftsCard, stockCard, registersCard, reorderCard])
header = CardHeader("Store Manager Console", "Daily overview — Store #42, Downtown")
storeSwitcherCard = Card([storeHeading, storeForm], "sunk")
storeHeading = Heading("View another store", "h3")
storeForm = Form("store-switch", switchButtons, [storeField])
storeField = FormControl("Store", storeSelect)
storeSelect = Select("store", [storeA, storeB, storeC], "Choose a store")
storeA = SelectItem("store42", "Store #42 — Downtown")
storeB = SelectItem("store17", "Store #17 — Mall")
storeC = SelectItem("store08", "Store #08 — Airport")
switchButtons = Buttons([switchBtn])
switchBtn = Button("Switch store", null, "primary")
kpiRow = Card([salesKpi, basketKpi, returnsKpi], "clear", "row", "m")
salesKpi = Card([salesKpiTitle, salesKpiValue, salesKpiProgress], "sunk")
salesKpiTitle = TextContent("Sales today", "small")
salesKpiValue = TextContent("$8,450", "large-heavy")
salesKpiProgress = Progress(84.5, "84.5% of $10,000 target")
basketKpi = Card([basketTitle, basketValue], "sunk")
basketTitle = TextContent("Avg basket", "small")
basketValue = TextContent("$42.50", "large-heavy")
returnsKpi = Card([returnsTitle, returnsValue, returnsTrend], "sunk")
returnsTitle = TextContent("Returns this week", "small")
returnsValue = TextContent("$1,240", "large-heavy")
returnsTrend = Tag("Down 6% vs last week", null, null, "success")
weeklyCard = Card([weeklyHeading, weeklyChart], "sunk")
weeklyHeading = Heading("This week vs last week", "h3")
weeklyChart = BarChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [thisWeekSeries, lastWeekSeries], "grouped", "Day", "Sales")
thisWeekSeries = Series("This week", [7800, 8200, 7900, 8450, 9100, 11300, 10800])
lastWeekSeries = Series("Last week", [7400, 7900, 8100, 8200, 8800, 10500, 10100])
trafficCard = Card([trafficHeading, trafficChart], "sunk")
trafficHeading = Heading("Foot traffic through the day", "h3")
trafficChart = AreaChart(["9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p"], [trafficSeries], "natural", "Hour", "Visitors")
trafficSeries = Series("Visitors", [120, 210, 280, 345, 390, 330, 410, 380, 290, 180, 140, 90])
sellersCard = Card([sellersHeading, sellersChart], "sunk")
sellersHeading = Heading("Best sellers today", "h3")
sellersChart = HorizontalBarChart(["Latte", "Cold Brew", "Pastry", "Sandwich", "Smoothie"], [sellerSeries], "grouped", "Units sold")
sellerSeries = Series("Units", [214, 186, 152, 121, 98])
promosCard = Card([promosHeading, promosTable], "sunk")
promosHeading = Heading("Running promotions", "h3")
promosTable = Table([promoName, promoGoal, promoRevenue, promoStatus])
promoName = Col("Promotion", ["Happy Hour", "Loyalty Double Points", "New Menu Trial"])
promoGoal = Col("Goal", ["Boost 2–4pm sales", "Increase member spend", "Drive sandwich orders"])
promoRevenue = Col("Revenue", ["$1,920", "$3,410", "$1,280"])
promoStatus = Col("Status", ["On track", "Ahead", "Behind"])
shiftsCard = Card([shiftsHeading, shiftsTable], "sunk")
shiftsHeading = Heading("On shift today", "h3")
shiftsTable = Table([shiftName, shiftRole, shiftHours])
shiftName = Col("Name", ["Maya Johnson", "Leo Park", "Ava Chen", "Noah Williams", "Zoe Martinez"])
shiftRole = Col("Role", ["Shift lead", "Barista", "Barista", "Cashier", "Cashier"])
shiftHours = Col("Hours", ["8:00 AM – 4:00 PM", "9:00 AM – 5:00 PM", "10:00 AM – 6:00 PM", "11:00 AM – 7:00 PM", "1:00 PM – 9:00 PM"])
stockCard = Card([stockHeading, stockList], "sunk")
stockHeading = Heading("Out of stock", "h3")
stockList = ListBlock([stockItem1, stockItem2, stockItem3, stockItem4], "number")
stockItem1 = ListItem("Oat milk", "SKU 5512 — par 24, need 30")
stockItem2 = ListItem("Caramel drizzle", "SKU 1130 — par 12, need 15")
stockItem3 = ListItem("Almond croissant", "SKU 8871 — par 20, need 40")
stockItem4 = ListItem("Cups — 12 oz", "SKU 2209 — par 500, need 600")
registersCard = Card([registersHeading, registersTable], "sunk")
registersHeading = Heading("Registers", "h3")
registersTable = Table([regNumber, regStatus, regCashier])
regNumber = Col("Register", ["1", "2", "3", "4"])
regStatus = Col("Status", ["Open", "Open", "Closed", "Open"])
regCashier = Col("Cashier", ["Zoe M.", "Noah W.", "—", "Maya J."])
reorderCard = Card([reorderHeading, reorderDialog], "sunk")
reorderHeading = Heading("Reorder inventory", "h3")
reorderDialog = DialogBlock("Reorder an item", "Reorder inventory", "Select an item and quantity to send a purchase order.", [reorderForm], "outline")
reorderForm = Form("reorder", reorderButtons, [reorderItemField, reorderQtyField])
reorderItemField = FormControl("Item", reorderItemSelect)
reorderItemSelect = Select("item", [stockOat, stockCaramel, stockCroissant], "Choose item")
stockOat = SelectItem("oat", "Oat milk — SKU 5512")
stockCaramel = SelectItem("caramel", "Caramel drizzle — SKU 1130")
stockCroissant = SelectItem("croissant", "Almond croissant — SKU 8871")
reorderQtyField = FormControl("Quantity", reorderQtyInput)
reorderQtyInput = Input("quantity", "e.g. 30", "number")
reorderButtons = Buttons([submitReorderBtn, cancelReorderBtn])
submitReorderBtn = Button("Send order", null, "primary")
cancelReorderBtn = Button("Cancel", null, "tertiary")