root = Card([header, budgetOverview, categorySplit, largestExpense, monthPicker, addExpenseTrigger], "card", "column", "l")
header = CardHeader("Personal Budget Check", "Track your monthly spending")
budgetOverview = Card([budgetTitle, budgetProgress, budgetDetails], "sunk", "column", "m")
budgetTitle = Heading("This Month's Budget", "h3")
budgetProgress = Progress(65, "Spent $1,625 of $2,500 budget")
budgetDetails = TextContent("**$1,625** spent · **$875** remaining · 65% used", "default")
categorySplit = Card([categoryTitle, categoryChart], "sunk", "column", "m")
categoryTitle = Heading("Spending by Category", "h3")
categoryChart = PieChart(categoryLabels, categoryValues, "donut", "circular")
categoryLabels = ["Food & Dining", "Transport", "Shopping", "Entertainment", "Utilities", "Other"]
categoryValues = [520, 380, 290, 180, 150, 105]
largestExpense = Callout("warning", "Largest Expense This Month", "Grocery haul at Whole Foods — **$142.50** on March 12 (Food & Dining)")
monthPicker = Card([monthLabel, monthSelect], "clear", "row", "m", "center", "between")
monthLabel = TextContent("View month:", "small-heavy")
monthSelect = Select("month", monthOptions, "Select month", null, "medium")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun]
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")
addExpenseTrigger = DrawerBlock("Add Expense", "Log a new expense", "Fill in the details below to record a transaction", addExpenseForm, "primary")
addExpenseForm = Form("add-expense", formButtons, [categoryField, amountField, descriptionField, dateField])
categoryField = FormControl("Category", categorySelect, "Choose the spending category")
categorySelect = Select("category", catOptions, "Select category", null, "medium")
catOptions = [catFood, catTransport, catShopping, catEnt, catUtil, catOther]
catFood = SelectItem("food", "Food & Dining")
catTransport = SelectItem("transport", "Transport")
catShopping = SelectItem("shopping", "Shopping")
catEnt = SelectItem("entertainment", "Entertainment")
catUtil = SelectItem("utilities", "Utilities")
catOther = SelectItem("other", "Other")
amountField = FormControl("Amount", amountInput, "Enter the expense amount")
amountInput = Input("amount", "0.00", "number")
descriptionField = FormControl("Description (optional)", descInput, "Brief note about this expense")
descInput = Input("description", "e.g., Lunch with team")
dateField = FormControl("Date", datePicker, "When did this expense occur?")
datePicker = DatePicker("date", "single", null, ["2024-03-15"])
formButtons = Buttons([cancelBtn, saveBtn], "row")
cancelBtn = Button("Cancel", null, "tertiary")
saveBtn = Button("Save Expense", null, "primary")