root = Card([header, monthNav, summary, categories, largestExpense, addExpense], "card", "column", "l")

header = CardHeader("Budget Check", "Personal spending overview")

monthNav = Card([monthText, monthButtons], "sunk", "row", "m", "center", "between")
monthText = TextContent("**January 2025**", "large")
monthButtons = Buttons([prevMonth, nextMonth])
prevMonth = Button("← December", null, "secondary")
nextMonth = Button("February →", null, "secondary")

summary = Card([summaryHeading, bigTotal, budgetProgress, summaryNote], "sunk")
summaryHeading = Heading("Total spent this month", "h3")
bigTotal = TextContent("$1,438.20", "large-heavy")
budgetProgress = Progress(72, "$1,438.20 of $2,000.00 budget")
summaryNote = TextContent("**$561.80** remaining · 28% of budget left", "small")

categories = Card([categoriesHeading, categoryChart, categoriesNote], "sunk")
categoriesHeading = Heading("Spending by category", "h3")
categoryChart = PieChart(categoryLabels, categoryValues, "donut")
categoryLabels = ["Housing", "Food", "Transport", "Utilities", "Entertainment", "Shopping"]
categoryValues = [780, 320, 145, 95, 62, 36.2]
categoriesNote = TextContent("Largest category: **Housing** at 54.2% of all spending", "small")

largestExpense = Card([expenseHeading, expenseCallout, expenseTable], "sunk")
expenseHeading = Heading("Largest expense", "h3")
expenseCallout = Callout("warning", "Rent · $780.00", "Paid January 1 — your single largest expense this month")
expenseTable = Table([expenseName, expenseCategory, expenseDate, expenseAmount])
expenseName = Col("Expense", ["Rent", "Whole Foods", "Electric bill"])
expenseCategory = Col("Category", ["Housing", "Food", "Utilities"])
expenseDate = Col("Date", ["Jan 1", "Jan 22", "Jan 9"])
expenseAmount = Col("Amount", ["$780.00", "$86.40", "$64.20"])

addExpense = DialogBlock("Add expense", "Add an expense", "Record a new transaction", [expenseForm], "secondary")
expenseForm = Form("add-expense", expenseButtons, [amountField, categoryField, dateField, noteField])
expenseButtons = Buttons([saveBtn, cancelBtn])
saveBtn = Button("Save expense", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
amountField = FormControl("Amount", amountInput, "Enter the amount, e.g. 42.50")
amountInput = Input("amount", "42.50", "number")
categoryField = FormControl("Category", categorySelect)
categorySelect = Select("category", [catFood, catTravel, catHousing, catUtilities, catOther], "Choose a category")
catFood = SelectItem("food", "Food & groceries")
catTravel = SelectItem("travel", "Travel")
catHousing = SelectItem("housing", "Housing")
catUtilities = SelectItem("utilities", "Utilities")
catOther = SelectItem("other", "Other")
dateField = FormControl("Date", datePicker)
datePicker = DatePicker("date", "single")
noteField = FormControl("Note", noteInput, "Optional")
noteInput = Input("note", "What was it for?")