root = Card([header, monthSelector, budgetOverview, categoryBreakdown, largestExpense, addExpenseTrigger])
header = CardHeader("Personal Budget Check", "Track your monthly spending")
monthSelector = Card([monthLabel, monthSelect], "clear", "row", "m", "center")
monthLabel = TextContent("Month:", "small-heavy")
monthSelect = Select("month", monthOptions, "Select month", null, "medium")
monthOptions = [optJan, optFeb, optMar, optApr, optMay, optJun, optJul, optAug, optSep, optOct, optNov, optDec]
optJan = SelectItem("2024-01", "January 2024")
optFeb = SelectItem("2024-02", "February 2024")
optMar = SelectItem("2024-03", "March 2024")
optApr = SelectItem("2024-04", "April 2024")
optMay = SelectItem("2024-05", "May 2024")
optJun = SelectItem("2024-06", "June 2024")
optJul = SelectItem("2024-07", "July 2024")
optAug = SelectItem("2024-08", "August 2024")
optSep = SelectItem("2024-09", "September 2024")
optOct = SelectItem("2024-10", "October 2024")
optNov = SelectItem("2024-11", "November 2024")
optDec = SelectItem("2024-12", "December 2024")
budgetOverview = Card([budgetTitle, budgetProgress, budgetDetails], "sunk")
budgetTitle = Heading("Budget Overview", "h3")
budgetProgress = Progress(68, "$2,720 / $4,000")
budgetDetails = Card([spentCard, remainingCard, budgetCard], "clear", "row", "m")
spentCard = Card([spentLabel, spentValue], "card", "column", "xs", "center")
spentLabel = TextContent("Spent", "small")
spentValue = TextContent("$2,720", "large-heavy")
remainingCard = Card([remainingLabel, remainingValue], "card", "column", "xs", "center")
remainingLabel = TextContent("Remaining", "small")
remainingValue = TextContent("$1,280", "large-heavy")
budgetCard = Card([budgetLabel, budgetValue], "card", "column", "xs", "center")
budgetLabel = TextContent("Budget", "small")
budgetValue = TextContent("$4,000", "large-heavy")
categoryBreakdown = Card([categoryTitle, categoryChart], "sunk")
categoryTitle = Heading("Spending by Category", "h3")
categoryChart = HorizontalBarChart(categoryLabels, [categorySeries], "grouped", "Amount ($)", "Category")
categoryLabels = ["Housing", "Food", "Transport", "Entertainment", "Utilities", "Shopping", "Health"]
categorySeries = Series("Spending", [1200, 580, 320, 240, 180, 150, 50])
largestExpense = Callout("warning", "Largest Expense This Month", "Rent payment — $1,200 (44% of total spending)")
addExpenseTrigger = DialogBlock("Add Expense", "Add New Expense", "Record a new transaction for the selected month", addExpenseForm, "primary")
addExpenseForm = Form("add-expense", addExpenseButtons, [expenseNameField, expenseAmountField, expenseCategoryField, expenseDateField])
expenseNameField = FormControl("Expense Name", expenseNameInput, "e.g., Groceries, Rent, Gas")
expenseNameInput = Input("name", "Enter expense name")
expenseAmountField = FormControl("Amount ($)", expenseAmountInput, "Enter the amount spent")
expenseAmountInput = Input("amount", "0.00", "number")
expenseCategoryField = FormControl("Category", expenseCategorySelect, "Select a category")
expenseCategorySelect = Select("category", expenseCategoryOptions, "Choose category", null, "medium")
expenseCategoryOptions = [catHousing, catFood, catTransport, catEntertainment, catUtilities, catShopping, catHealth, catOther]
catHousing = SelectItem("housing", "Housing")
catFood = SelectItem("food", "Food & Dining")
catTransport = SelectItem("transport", "Transportation")
catEntertainment = SelectItem("entertainment", "Entertainment")
catUtilities = SelectItem("utilities", "Utilities")
catShopping = SelectItem("shopping", "Shopping")
catHealth = SelectItem("health", "Health & Medical")
catOther = SelectItem("other", "Other")
expenseDateField = FormControl("Date", expenseDatePicker, "When did this expense occur?")
expenseDatePicker = DatePicker("date", "single")
addExpenseButtons = Buttons([addExpenseSubmit, addExpenseCancel], "row")
addExpenseSubmit = Button("Add Expense", null, "primary")
addExpenseCancel = Button("Cancel", null, "tertiary")