root = Card([header, budgetProgress, categoryChart, largestExpense, monthNav, addExpense])

header = CardHeader("Personal Budget Check", "March 2025")

budgetProgress = Progress(72, "Spent $1,440 of $2,000 budget")

categoryChart = Card([categoryHeading, chart], "sunk")
categoryHeading = Heading("Spending by Category", "h3")
chart = PieChart(["Housing", "Food", "Transport", "Entertainment", "Utilities", "Other"], [600, 320, 180, 140, 110, 90], "donut")

largestExpense = Callout("warning", "Largest Expense", "Rent — $600 on March 1, the single biggest spend this month.")

monthNav = Card([monthHeading, monthButtons], "sunk")
monthHeading = Heading("View Another Month", "h3")
monthButtons = Buttons([febBtn, marBtn, aprBtn])
febBtn = Button("February 2025", null, "secondary")
marBtn = Button("March 2025", null, "primary")
aprBtn = Button("April 2025", null, "secondary")

addExpense = Form("add-expense", addButtons, [amountField, categoryField, dateField])
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
categoryField = FormControl("Category", categorySelect)
categorySelect = Select("category", [catHousing, catFood, catTransport, catEntertainment, catUtilities, catOther], "Choose a category")
catHousing = SelectItem("housing", "Housing")
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catEntertainment = SelectItem("entertainment", "Entertainment")
catUtilities = SelectItem("utilities", "Utilities")
catOther = SelectItem("other", "Other")
dateField = FormControl("Date", dateInput)
dateInput = DatePicker("date", "single")
addButtons = Buttons([submitBtn])
submitBtn = Button("Add Expense", null, "primary")