root = Card([header, monthCard, budgetCard, categoryCard, largestCallout, addExpenseDialog])
header = CardHeader("Budget Check", "Personal budget · August 2025")
monthCard = Card([monthHeader, monthForm], "sunk")
monthHeader = Heading("View another month", "h3")
monthForm = Form("month-select", monthButtons, [monthField])
monthField = FormControl("Month", monthSelect)
monthSelect = Select("month", [monthAug, monthJul, monthJun, monthMay], "Choose a month", null, "2025-08")
monthAug = SelectItem("2025-08", "August 2025")
monthJul = SelectItem("2025-07", "July 2025")
monthJun = SelectItem("2025-06", "June 2025")
monthMay = SelectItem("2025-05", "May 2025")
monthButtons = Buttons([goButton])
goButton = Button("Go", null, "primary")
budgetCard = Card([budgetHeader, budgetProgress, budgetRemaining], "sunk")
budgetHeader = Heading("Total spent this month", "h3")
budgetProgress = Progress(81, "$3,240 of $4,000 used")
budgetRemaining = TextContent("**Remaining:** $760 until Aug 31", "small")
categoryCard = Card([categoryHeader, categoryChart, categoryNote], "sunk")
categoryHeader = Heading("Spending by category", "h3")
categoryChart = PieChart(["Housing", "Food", "Transport", "Entertainment", "Other"], [1400, 680, 350, 260, 550], "donut")
categoryNote = TextContent("Housing is 43% of August spending.", "small")
largestCallout = Callout("warning", "Largest expense", "Rent — $1,400 on Aug 1")
addExpenseDialog = DialogBlock("Add expense", "Add expense", "Record a new transaction.", [expenseForm])
expenseForm = Form("add-expense", formButtons, [expenseName, expenseAmount, expenseCategory, expenseDate])
expenseName = FormControl("Name", nameInput, "e.g. Groceries")
nameInput = Input("name", "Groceries")
expenseAmount = FormControl("Amount", amountInput, "In USD")
amountInput = Input("amount", "0.00", "number")
expenseCategory = FormControl("Category", categorySelect)
categorySelect = Select("category", [catHousing, catFood, catTransport, catEntertainment, catOther], "Choose a category")
catHousing = SelectItem("housing", "Housing")
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catEntertainment = SelectItem("entertainment", "Entertainment")
catOther = SelectItem("other", "Other")
expenseDate = FormControl("Date", dateInput)
dateInput = DatePicker("date")
formButtons = Buttons([saveButton, cancelButton])
saveButton = Button("Save expense", null, "primary")
cancelButton = Button("Cancel", null, "tertiary")