root = Card([header, monthPicker, kpiBlock, categoryChart, largestExpense, addExpenseForm])
header = CardHeader("Personal Budget", "Track your spending this month")
monthPicker = Form("month-selector", monthButtons, [monthField])
monthField = FormControl("Select Month", monthSelect, "Choose a month to view")
monthSelect = Select("month", monthOptions, "Current Month")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun, optJul, optAug, optSep, optOct, optNov, optDec]
optJan = SelectItem("2026-01", "January 2026")
optFeb = SelectItem("2026-02", "February 2026")
optMar = SelectItem("2026-03", "March 2026")
optApr = SelectItem("2026-04", "April 2026")
optMay = SelectItem("2026-05", "May 2026")
optJun = SelectItem("2026-06", "June 2026")
optJul = SelectItem("2026-07", "July 2026")
optAug = SelectItem("2026-08", "August 2026")
optSep = SelectItem("2026-09", "September 2026")
optOct = SelectItem("2026-10", "October 2026")
optNov = SelectItem("2026-11", "November 2026")
optDec = SelectItem("2026-12", "December 2026")
monthButtons = Buttons([monthSubmit], "row")
monthSubmit = Button("View Month", { type: "continue_conversation", context: "Show budget for selected month" }, "primary")
kpiBlock = SnippetCardBlock([kpiSpent, kpiBudget, kpiRemaining], "grid", true)
kpiSpent = SnippetCardItem("total-spent", kpiSpentLhs, kpiSpentRhs)
kpiSpentLhs = IconText(kpiSpentIcon, "info", "m", "Total Spent", "This month", false, "horizontal")
kpiSpentIcon = Icon("credit-card", "finance")
kpiSpentRhs = BoldText("number", "$2,847", "of $4,000 budget", "metric")
kpiBudget = SnippetCardItem("budget", kpiBudgetLhs, kpiBudgetRhs)
kpiBudgetLhs = IconText(kpiBudgetIcon, "neutral", "m", "Monthly Budget", "Set limit", false, "horizontal")
kpiBudgetIcon = Icon("target", "shapes")
kpiBudgetRhs = BoldText("number", "$4,000", "100%", "text")
kpiRemaining = SnippetCardItem("remaining", kpiRemainingLhs, kpiRemainingRhs)
kpiRemainingLhs = IconText(kpiRemainingIcon, "success", "m", "Remaining", "Available to spend", false, "horizontal")
kpiRemainingIcon = Icon("circle-check", "shapes")
kpiRemainingRhs = BoldText("number", "$1,153", "28.8% left", "metric")
categoryChart = HorizontalBarChart(catLabels, [catSeries], "grouped", "Amount ($)", "Category")
catLabels = ["Housing", "Food & Dining", "Transport", "Shopping", "Entertainment", "Utilities", "Healthcare", "Other"]
catSeries = Series("Spending", [1200, 580, 320, 290, 180, 150, 85, 42])
largestExpense = CompositeCardBlock([largestCard], "grid", true)
largestCard = CompositeCardItem("largest-expense", largestHeader, [largestMetric, largestDetails], null)
largestHeader = IconText(largestIcon, "warning", "m", "Largest Expense This Month", "Rent payment", true, "horizontal")
largestIcon = Icon("home", "buildings")
largestMetric = MetricIndicatorInline("$1,200", "Single transaction · Apr 1", { direction: "up", value: 0 })
largestDetails = EntityList([det1, det2, det3], "small")
det1 = { left: "Category", right: "Housing", rightVariant: "text" }
det2 = { left: "Date", right: "April 1, 2026", rightVariant: "text" }
det3 = { left: "Payment Method", right: "Bank Transfer", rightVariant: "text" }
addExpenseForm = Form("add-expense", addButtons, [fcCategory, fcAmount, fcDate, fcNote])
addButtons = Buttons([btnAdd, btnCancel], "row")
btnAdd = Button("Add Expense", { type: "continue_conversation", context: "Add this expense to my budget tracker" }, "primary")
btnCancel = Button("Cancel", { type: "continue_conversation", context: "Cancel adding expense" }, "secondary")
fcCategory = FormControl("Category", catSelect, "What type of expense?")
catSelect = Select("category", catItems, "Select category", { required: true })
catItems = [ci1, ci2, ci3, ci4, ci5, ci6, ci7, ci8]
ci1 = SelectItem("housing", "Housing")
ci2 = SelectItem("food", "Food & Dining")
ci3 = SelectItem("transport", "Transport")
ci4 = SelectItem("shopping", "Shopping")
ci5 = SelectItem("entertainment", "Entertainment")
ci6 = SelectItem("utilities", "Utilities")
ci7 = SelectItem("healthcare", "Healthcare")
ci8 = SelectItem("other", "Other")
fcAmount = FormControl("Amount ($)", amtInput, "Enter the expense amount")
amtInput = Input("amount", "e.g. 45.50", "number", { required: true, min: 0.01, max: 10000 })
fcDate = FormControl("Date", datePicker, "When did this expense occur?")
datePicker = DatePicker("date", "single", { required: true })
fcNote = FormControl("Note (optional)", noteInput, "Add a description or merchant name")
noteInput = Input("note", "e.g. Grocery store, rent, gas...", "text")