root = Card([header, statusRow, budgetProgress, budgetChart, topExpense, monthNav, addExpense])
header = CardHeader("Personal Budget Check", "Track your spending and stay on budget")
statusRow = Card([statusBadge, budgetText], "sunk", "row", "m", "center")
statusBadge = Tag("On budget", null, "md", "success")
budgetText = TextContent("You have **$320.50** left of your $2,500 budget this month.", "default")
budgetProgress = Progress(87, "Monthly budget used: 87%")
budgetChart = Card([chartHeading, categoryChart], "sunk")
chartHeading = Heading("Spending by category", "h3")
categoryChart = HorizontalBarChart(["Housing", "Food", "Transport", "Utilities", "Entertainment", "Other"], [categorySeries], "grouped", "Amount ($)", "Category")
categorySeries = Series("Spent", [1100, 420, 310, 180, 120, 50])
topExpense = Card([topHeading, topCallout], "clear")
topHeading = Heading("Largest expense this month", "h3")
topCallout = Callout("warning", "Rent — $1,100", "This single expense makes up 44% of your monthly budget. Consider reviewing if this is still the best option.")
monthNav = Card([monthLabel, monthButtons], "sunk", "column", "s")
monthLabel = TextContent("View a different month", "small-heavy")
monthButtons = Buttons([prevMonth, currentMonth, nextMonth])
prevMonth = Button("← May 2025", null, "secondary", null, "small")
currentMonth = Button("June 2025", null, "primary", null, "small")
nextMonth = Button("July 2025 →", null, "secondary", null, "small")
addExpense = Card([addHeading, expenseForm], "clear")
addHeading = Heading("Add an expense", "h3")
expenseForm = Form("add-expense", formButtons, [amountField, categoryField, noteField])
amountField = FormControl("Amount ($)", amountInput)
amountInput = Input("amount", "0.00", "number")
categoryField = FormControl("Category", categorySelect)
categorySelect = Select("category", [catFood, catTransport, catUtilities, catEntertainment, catOther], "Choose a category")
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catUtilities = SelectItem("utilities", "Utilities")
catEntertainment = SelectItem("entertainment", "Entertainment")
catOther = SelectItem("other", "Other")
noteField = FormControl("Note (optional)", noteInput, "e.g. groceries, gas, movie tickets")
noteInput = Input("note", "What was this for?")
formButtons = Buttons([saveBtn, cancelBtn])
saveBtn = Button("Add expense", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")