root = Card([header, budgetOverview, categorySection, largestExpense, monthNav, addExpenseSection])
header = CardHeader("Personal Budget", "Track your spending and stay on target")
budgetOverview = Card([budgetTitle, budgetChart, budgetLegend], "sunk")
budgetTitle = Heading("Budget vs. Spent", "h3")
budgetChart = SingleStackedBarChart(["Spent", "Remaining"], [1850, 650])
budgetLegend = Table([budgetCol1, budgetCol2])
budgetCol1 = Col("Category", ["Total budget", "Spent", "Remaining"])
budgetCol2 = Col("Amount", ["$2,500", "$1,850", "$650"])
categorySection = Card([categoryTitle, categoryChart])
categoryTitle = Heading("Spending by Category", "h3")
categoryChart = PieChart(["Housing", "Food", "Transport", "Entertainment", "Utilities"], [1100, 320, 180, 150, 100], "donut")
largestExpense = Callout("warning", "Largest Expense", "Rent — $1,100 on the 1st. That's 59% of your monthly spending.")
monthNav = Card([navLabel, navButtons], "sunk")
navLabel = TextContent("View another month", "small-heavy")
navButtons = Buttons([prevMonth, nextMonth])
prevMonth = Button("← Previous month", null, "secondary")
nextMonth = Button("Next month →", null, "secondary")
addExpenseSection = Card([addTitle, addForm])
addTitle = Heading("Add an Expense", "h3")
addForm = Form("add-expense", formActions, [amountField, categoryField, dateField, noteField])
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
categoryField = FormControl("Category", categorySelect)
categorySelect = Select("category", [catHousing, catFood, catTransport, catEntertainment, catUtilities], "Select a category")
catHousing = SelectItem("housing", "Housing")
catFood = SelectItem("food", "Food")
catTransport = SelectItem("transport", "Transport")
catEntertainment = SelectItem("entertainment", "Entertainment")
catUtilities = SelectItem("utilities", "Utilities")
dateField = FormControl("Date", dateInput)
dateInput = DatePicker("date", "single")
noteField = FormControl("Note (optional)", noteInput)
noteInput = Input("note", "e.g. Grocery run")
formActions = Buttons([saveBtn, clearBtn])
saveBtn = Button("Add expense", null, "primary")
clearBtn = Button("Clear", null, "tertiary")