root = Card([headerBar, salesSection, trafficSection, basketSection, returnsSection, shiftsSection, sellersSection, stockSection, promosSection, registersSection, compareSection], "clear", "column", "l")
headerBar = Card([header, storeForm], "card", "row", "xl", "center", "between")
header = CardHeader("Daily Store Console", "Downtown Store • Tuesday, Feb 18")
storeForm = Form("store-view", storeButtons, [storeField])
storeButtons = Buttons([viewBtn])
viewBtn = Button("View store", null, "secondary")
storeField = FormControl("Store", storeSelect)
storeSelect = Select("store", [store1, store2, store3], "Choose a store")
store1 = SelectItem("downtown", "Downtown (current)")
store2 = SelectItem("uptown", "Uptown")
store3 = SelectItem("airport", "Airport Terminal")
salesSection = Card([salesHeader, salesProgress, salesNumbers], "sunk")
salesHeader = CardHeader("Sales Today vs Target", "Target $10,000")
salesProgress = Progress(82, "82% of target reached")
salesNumbers = Table([salesMetricCol, salesValueCol])
salesMetricCol = Col("Metric", ["Today", "Target", "Remaining"])
salesValueCol = Col("Value", ["$8,240", "$10,000", "$1,760"])
trafficSection = Card([trafficHeader, trafficChart], "sunk")
trafficHeader = CardHeader("Foot Traffic Through the Day", "Customers per hour")
trafficChart = AreaChart(["9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p"], [trafficSeries], "natural", "Time", "Visitors")
trafficSeries = Series("Visitors", [120, 180, 210, 260, 240, 290, 310, 280, 230, 190, 150])
basketSection = Card([basketHeader, basketStat, basketTrend], "sunk")
basketHeader = CardHeader("Average Basket Size", "Items per transaction")
basketStat = TextContent("4.6", "large-heavy")
basketTrend = Tag("Up 5% vs last week", null, "sm", "success")
returnsSection = Card([returnsHeader, returnsTable], "sunk")
returnsHeader = CardHeader("Returns This Week", "Mon–Fri summary")
returnsTable = Table([returnsDayCol, returnsCountCol, returnsValueCol])
returnsDayCol = Col("Day", ["Mon", "Tue", "Wed", "Thu", "Fri"])
returnsCountCol = Col("Returns", [3, 2, 4, 1, 2])
returnsValueCol = Col("Value", ["$85", "$40", "$110", "$25", "$80"])
shiftsSection = Card([shiftsHeader, shiftsTable], "sunk")
shiftsHeader = CardHeader("On Shift Today", "Staff schedule")
shiftsTable = Table([shiftNameCol, shiftRoleCol, shiftTimeCol])
shiftNameCol = Col("Name", ["Maya Chen", "Diego Alvarez", "Sofia Reyes", "Jon Bell", "Priya Patel"])
shiftRoleCol = Col("Role", ["Manager", "Cashier", "Barista", "Barista", "Cashier"])
shiftTimeCol = Col("Time", ["8a–4p", "8a–2p", "9a–5p", "10a–6p", "2p–8p"])
sellersSection = Card([sellersHeader, sellersTable], "sunk")
sellersHeader = CardHeader("Best Sellers", "Units sold today")
sellersTable = Table([sellerProductCol, sellerUnitsCol])
sellerProductCol = Col("Product", ["Espresso Blend 1lb", "Cold Brew Can 12pk", "Oat Milk Half-Gal", "Butter Croissant", "Honey Butter Chips"])
sellerUnitsCol = Col("Units", [86, 72, 54, 49, 41])
stockSection = Card([stockHeader, stockTable, reorderForm], "sunk")
stockHeader = CardHeader("Out of Stock", "Needs reorder")
stockTable = Table([stockItemCol, stockStatusCol])
stockItemCol = Col("Item", ["Almond Milk 1L", "Blueberry Muffin", "Decaf Pods", "Caramel Syrup"])
stockStatusCol = Col("Status", ["Out", "Out", "Out", "Out"])
reorderForm = Form("reorder", reorderButtons, [reorderItemField, reorderQtyField])
reorderButtons = Buttons([reorderBtn])
reorderBtn = Button("Reorder item", null, "primary")
reorderItemField = FormControl("Item", reorderSelect)
reorderSelect = Select("reorder_item", [reorderOpt1, reorderOpt2, reorderOpt3, reorderOpt4], "Select item")
reorderOpt1 = SelectItem("almond", "Almond Milk 1L")
reorderOpt2 = SelectItem("muffin", "Blueberry Muffin")
reorderOpt3 = SelectItem("decaf", "Decaf Pods")
reorderOpt4 = SelectItem("caramel", "Caramel Syrup")
reorderQtyField = FormControl("Quantity", reorderQtyInput, "Cases")
reorderQtyInput = Input("qty", "1", "number")
promosSection = Card([promosHeader, promosTable], "sunk")
promosHeader = CardHeader("Running Promotions", "Performance vs plan")
promosTable = Table([promoNameCol, promoSalesCol, promoChangeCol, promoStatusCol])
promoNameCol = Col("Promotion", ["Spring Bundle 20%", "Buy 2 Get 1 Muffin", "Loyalty Double Points", "Happy Hour 4–6 PM"])
promoSalesCol = Col("Sales", ["$1,240", "$980", "$2,150", "$760"])
promoChangeCol = Col("Lift", ["+18%", "+12%", "+31%", "+9%"])
promoStatusCol = Col("Status", ["On track", "On track", "Exceeding", "Behind"])
registersSection = Card([registersHeader, registersTable], "sunk")
registersHeader = CardHeader("Register Status", "Open or closed")
registersTable = Table([regNameCol, regCashierCol, regStatusCol])
regNameCol = Col("Register", ["Reg 1", "Reg 2", "Reg 3", "Reg 4"])
regCashierCol = Col("Cashier", ["Maya", "Diego", "—", "—"])
regStatusCol = Col("Status", ["Open", "Open", "Closed", "Closed"])
compareSection = Card([compareHeader, compareChart], "sunk")
compareHeader = CardHeader("This Week vs Last Week", "Daily sales")
compareChart = BarChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [thisWeekSeries, lastWeekSeries], "grouped", "Day", "Sales $")
thisWeekSeries = Series("This Week", [1240, 1380, 1120, 1490, 1680, 2100, 1870])
lastWeekSeries = Series("Last Week", [1100, 1250, 1200, 1340, 1520, 1980, 1790])