root = Card([header, budgetOverview, categorySplit, largestExpense, monthPicker, addExpenseTrigger], "card", "column", "l")
header = CardHeader("Budget Check", "October 2024")
budgetOverview = Card([budgetTitle, budgetProgress, budgetDetails], "sunk", "column", "m")
budgetTitle = Heading("Monthly Budget", "h3")
budgetProgress = Progress(78, "$2,340 of $3,000 spent")
budgetDetails = TextContent("**Remaining:** $660  •  **Daily avg:** $76  •  **On track** for month-end")
categorySplit = Card([categoryTitle, categoryChart], "sunk", "column", "m")
categoryTitle = Heading("Spending by Category", "h3")
categoryChart = HorizontalBarChart(categoryLabels, [categorySeries], "grouped", "Amount ($)", "Category")
categoryLabels = ["Food", "Transport", "Entertainment", "Shopping", "Utilities", "Other"]
categorySeries = Series("Spent", [800, 450, 320, 280, 250, 240])
largestExpense = Card([largestTitle, largestCard], "clear", "column", "m")
largestTitle = Heading("Largest Expense", "h3")
largestCard = Callout("info", "Grocery run at Whole Foods", "$185  •  Oct 12  •  Food")
monthPicker = Card([monthLabel, monthSelect], "clear", "row", "m", "center")
monthLabel = TextContent("View month:", "small-heavy")
monthSelect = Select("month", monthOptions, "Select month", null, "small")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun, optJul, optAug, optSep, optOct, optNov, optDec]
optJan = SelectItem("2024-01", "January 2024")
optFeb = SelectItem("2024-02", "February 2024")
optMar = SelectItem("2024-03", "March 2024")
optApr = SelectItem("2024-04", "April 2024")
optMay = SelectItem("2024-05", "May 2024")
optJun = SelectItem("2024-06", "June 2024")
optJul = SelectItem("2024-07", "July 2024")
optAug = SelectItem("2024-08", "August 2024")
optSep = SelectItem("2024-09", "September 2024")
optOct = SelectItem("2024-10", "October 2024")
optNov = SelectItem("2024-11", "November 2024")
optDec = SelectItem("2024-12", "December 2024")
addExpenseTrigger = DialogBlock("Add Expense", "Log a new expense", "Fill in the details below", addExpenseForm, "primary")
addExpenseForm = Form("add-expense", addExpenseButtons, [expenseNameField, expenseAmountField, expenseCategoryField, expenseDateField])
expenseNameField = FormControl("Expense name", expenseNameInput, "e.g., Groceries, Uber, Subscription")
expenseNameInput = Input("name", "Whole Foods grocery run")
expenseAmountField = FormControl("Amount ($)", expenseAmountInput, "Enter the cost")
expenseAmountInput = Input("amount", "185", "number")
expenseCategoryField = FormControl("Category", expenseCategorySelect, "Pick a category")
expenseCategorySelect = Select("category", expenseCategoryOptions, "Choose category", null, "small")
expenseCategoryOptions = [catFood, catTransport, catEnt, catShop, catUtil, catOther]
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catEnt = SelectItem("entertainment", "Entertainment")
catShop = SelectItem("shopping", "Shopping")
catUtil = SelectItem("utilities", "Utilities")
catOther = SelectItem("other", "Other")
expenseDateField = FormControl("Date", expenseDatePicker, "When did this happen?")
expenseDatePicker = DatePicker("date", "single")
addExpenseButtons = Buttons([addSubmitBtn, addCancelBtn])
addSubmitBtn = Button("Add expense", null, "primary")
addCancelBtn = Button("Cancel", null, "tertiary")