root = Card([header, monthNav, budgetStatus, categorySplit, largestExpense, addExpense])
header = CardHeader("Personal Budget", "March 2025")
monthNav = Buttons([prevMonth, nextMonth])
prevMonth = Button("← February", null, "secondary")
nextMonth = Button("April →", null, "secondary")
budgetStatus = Card([budgetHeading, budgetProgress, budgetKpis], "sunk")
budgetHeading = Heading("Monthly Budget", "h3")
budgetProgress = Progress(72, "Spent $1,442 of $2,000 budget")
budgetKpis = Table([kpiName, kpiValue])
kpiName = Col("Metric", ["Spent", "Budget", "Remaining"])
kpiValue = Col("Value", ["$1,442", "$2,000", "$558"])
categorySplit = Card([categoryHeading, categoryChart], "sunk")
categoryHeading = Heading("Spending by Category", "h3")
categoryChart = PieChart(["Housing", "Groceries", "Transport", "Dining", "Utilities", "Entertainment"], [650, 320, 180, 140, 95, 57])
largestExpense = Card([largestHeading, largestCallout], "sunk")
largestHeading = Heading("Largest Expense", "h3")
largestCallout = Callout("warning", "Rent — $650", "Housing is your largest expense this month, 45% of total spending.")
addExpense = Form("add-expense", addButtons, [expenseName, expenseAmount, expenseCategory])
expenseName = FormControl("Expense name", expenseNameInput)
expenseNameInput = Input("name", "e.g. Grocery run")
expenseAmount = FormControl("Amount", expenseAmountInput, "Enter a dollar amount")
expenseAmountInput = Input("amount", "0.00", "number")
expenseCategory = FormControl("Category", expenseCategorySelect)
expenseCategorySelect = Select("category", [catHousing, catGroceries, catTransport, catDining, catUtilities, catEntertainment], "Select a category")
catHousing = SelectItem("Housing", "Housing")
catGroceries = SelectItem("Groceries", "Groceries")
catTransport = SelectItem("Transport", "Transport")
catDining = SelectItem("Dining", "Dining")
catUtilities = SelectItem("Utilities", "Utilities")
catEntertainment = SelectItem("Entertainment", "Entertainment")
addButtons = Buttons([submitExpense, cancelExpense])
submitExpense = Button("Add expense", null, "primary")
cancelExpense = Button("Cancel", null, "tertiary")