root = Card([header, budgetOverview, categoryBreakdown, largestExpense, addExpenseTrigger, monthSelector])
header = CardHeader("Personal Budget Check", "January 2025")
budgetOverview = Card([budgetTitle, budgetProgress, budgetDetails], "sunk", "column", "m")
budgetTitle = Heading("Budget Overview", "h3")
budgetProgress = Progress(72.5, "Spent $1,450 of $2,000 budget (72.5%)")
budgetDetails = Card([spentTag, remainingTag], "clear", "row", "m", "center", "between")
spentTag = Tag("Spent: $1,450", null, "md", "danger")
remainingTag = Tag("Remaining: $550", null, "md", "success")
categoryBreakdown = Card([categoryTitle, categoryChart], "sunk", "column", "m")
categoryTitle = Heading("Spending by Category", "h3")
categoryChart = HorizontalBarChart(categoryLabels, [categorySeries], "grouped", "Amount ($)", "Category")
categoryLabels = ["Food", "Transport", "Entertainment", "Shopping", "Utilities"]
categorySeries = Series("Spending", [450, 300, 200, 350, 150])
largestExpense = Callout("info", "Largest Expense This Month", "Weekly grocery shop — $120 (Food category, Jan 12)")
addExpenseTrigger = DialogBlock("Add Expense", "Add New Expense", "Record a new transaction", addExpenseForm, "primary")
addExpenseForm = Form("add-expense", formButtons, [categoryField, amountField, descriptionField, dateField])
categoryField = FormControl("Category", categorySelect, "Select spending category")
categorySelect = Select("category", [catFood, catTransport, catEntertainment, catShopping, catUtilities], "Choose category")
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catEntertainment = SelectItem("entertainment", "Entertainment")
catShopping = SelectItem("shopping", "Shopping")
catUtilities = SelectItem("utilities", "Utilities")
amountField = FormControl("Amount ($)", amountInput, "Enter expense amount")
amountInput = Input("amount", "0.00", "number")
descriptionField = FormControl("Description", descriptionInput, "Optional note")
descriptionInput = Input("description", "e.g. Grocery shopping")
dateField = FormControl("Date", datePicker, "When did this expense occur?")
datePicker = DatePicker("date", "single")
formButtons = Buttons([submitBtn, cancelBtn], "row")
submitBtn = Button("Add Expense", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
monthSelector = Card([monthLabel, monthSelect], "clear", "row", "m", "center", "between")
monthLabel = TextContent("View month:", "small-heavy")
monthSelect = Select("month", [monthJan, monthDec, monthNov, monthOct], "January 2025", null, "small")
monthJan = SelectItem("2025-01", "January 2025")
monthDec = SelectItem("2024-12", "December 2024")
monthNov = SelectItem("2024-11", "November 2024")
monthOct = SelectItem("2024-10", "October 2024")