root = Card([topBar, kpiRow, trafficRow, salesRow, opsRow, promoCard], "clear")

topBar = Card([mainHeader, storeForm], "clear", "row", "xl", "center", "between")
mainHeader = CardHeader("Daily Console", "Store #104 · Downtown Mall · Tue, Jun 4")
storeForm = Form("store-switch", storeButtons, [storeField])
storeField = FormControl("View store", storeSelect)
storeSelect = Select("store", [storeOpt1, storeOpt2, storeOpt3], "Choose a store")
storeOpt1 = SelectItem("store-104", "Store #104 · Downtown Mall")
storeOpt2 = SelectItem("store-208", "Store #208 · Riverside Plaza")
storeOpt3 = SelectItem("store-312", "Store #312 · Oakwood Center")
storeButtons = Buttons([storeGo])
storeGo = Button("View store", null, "secondary")

kpiRow = Card([salesCard, basketCard, returnsCard], "card", "row", "m", "stretch")
salesCard = Card([salesHeading, salesAmount, salesProgress], "sunk", "column", "s")
salesHeading = Heading("Sales today vs target", "h3")
salesAmount = TextContent("$8,940", "large")
salesProgress = Progress(75, "$8,940 of $12,000 target")
basketCard = Card([basketHeading, basketAmount, basketTag], "sunk", "column", "s")
basketHeading = Heading("Average basket size", "h3")
basketAmount = TextContent("$42.50", "large")
basketTag = Tag("+4% vs last week", null, null, "success")
returnsCard = Card([returnsHeading, returnsAmount, returnsTag], "sunk", "column", "s")
returnsHeading = Heading("Returns this week", "h3")
returnsAmount = TextContent("12 · $460", "large")
returnsTag = Tag("+2 vs last week", null, null, "warning")

trafficRow = Card([trafficCard, compareCard], "clear", "row", "m", "stretch")
trafficCard = Card([trafficHeading, trafficChart], "sunk")
trafficHeading = Heading("Foot traffic through the day", "h3")
trafficChart = LineChart([trafficHours], [trafficSeries], "natural", "Hour", "Shoppers")
trafficHours = ["9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p"]
trafficSeries = Series("Today", [42, 68, 95, 120, 110, 105, 98, 112, 135, 128, 96, 74, 51])
compareCard = Card([compareHeading, compareChart], "sunk")
compareHeading = Heading("This week vs last week", "h3")
compareChart = BarChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [thisWeekSeries, lastWeekSeries], "grouped", "Day", "Sales ($)")
thisWeekSeries = Series("This week", [8100, 8940, 7600, 8200, 9100, 11500, 10200])
lastWeekSeries = Series("Last week", [7400, 8200, 7100, 7800, 8800, 10800, 9800])

salesRow = Card([bestSellersCard, stockCard], "clear", "row", "m", "stretch")
bestSellersCard = Card([bestSellersHeading, bestSellersTable], "sunk")
bestSellersHeading = Heading("Best sellers today", "h3")
bestSellersTable = Table([bsItem, bsUnits, bsRevenue])
bsItem = Col("Item", ["Wireless Earbuds", "Smart Water Bottle", "Yoga Mat Pro", "Desk Organizer", "LED Strip Kit"])
bsUnits = Col("Units", [38, 27, 22, 19, 17])
bsRevenue = Col("Revenue", ["$2,964", "$648", "$1,826", "$570", "$680"])
stockCard = Card([stockHeading, stockTable, reorderDialog], "sunk")
stockHeading = Heading("Out of stock", "h3")
stockTable = Table([oItem, oSku])
oItem = Col("Item", ["Laundry Pods", "Paper Towels 6pk", "AA Batteries 8pk"])
oSku = Col("SKU", ["LP-220", "PT-661", "AB-118"])
reorderDialog = DialogBlock("Reorder item", "Reorder inventory", "Select an item and quantity to restock.", [reorderForm])
reorderForm = Form("reorder", reorderButtons, [itemField, qtyField])
itemField = FormControl("Item", itemSelect)
itemSelect = Select("item", [itemOpt1, itemOpt2, itemOpt3, itemOpt4], "Select an item")
itemOpt1 = SelectItem("LP-220", "Laundry Pods (LP-220)")
itemOpt2 = SelectItem("PT-661", "Paper Towels 6pk (PT-661)")
itemOpt3 = SelectItem("AB-118", "AA Batteries 8pk (AB-118)")
itemOpt4 = SelectItem("WM-400", "Window Cleaner (WM-400)")
qtyField = FormControl("Quantity", qtyInput)
qtyInput = Input("quantity", "e.g. 24", "number")
reorderButtons = Buttons([reorderSubmit, reorderCancel])
reorderSubmit = Button("Place reorder", null, "primary")
reorderCancel = Button("Cancel", null, "tertiary")

opsRow = Card([shiftsCard, registersCard], "clear", "row", "m", "stretch")
shiftsCard = Card([shiftsHeading, shiftsList], "sunk")
shiftsHeading = Heading("On shift today", "h3")
shiftsList = ListBlock([shift1, shift2, shift3, shift4, shift5], "number")
shift1 = ListItem("Maya Chen", "Manager · 9:00a – 5:30p")
shift2 = ListItem("Derek White", "Cashier · 9:00a – 2:00p")
shift3 = ListItem("Priya Patel", "Cashier · 2:00p – 9:00p")
shift4 = ListItem("Leo Ortiz", "Stock · 10:00a – 6:00p")
shift5 = ListItem("Ana Ruiz", "Floor · 12:00p – 8:00p")
registersCard = Card([registersHeading, registersTable], "sunk")
registersHeading = Heading("Registers", "h3")
registersTable = Table([regName, regStatus, regOperator])
regName = Col("Register", ["Register 1", "Register 2", "Register 3", "Register 4"])
regStatus = Col("Status", ["Open", "Open", "Open", "Closed"])
regOperator = Col("Operator", ["Maya Chen", "Derek White", "Priya Patel", "—"])

promoCard = Card([promoHeading, promoTable], "sunk")
promoHeading = Heading("Running promotions", "h3")
promoTable = Table([promoName, promoStatus, promoLift])
promoName = Col("Promotion", ["Buy 1 Get 1 — Snacks", "20% off Apparel", "Summer Bundle Deal", "Loyalty Double Points"])
promoStatus = Col("Status", ["Running", "Running", "Ends today", "Running"])
promoLift = Col("Sales lift", ["+18%", "+11%", "+23%", "+9%"])