root = Card([header, balancesSection, transactionsSection, spendingSection, billsSection, savingsSection, creditSection, moveMoneySection, freezeSection, statementSection, alertsSection, disputeSection])
header = CardHeader("Personal Banking", "Welcome back, Alex — your money at a glance")
balancesSection = Card([balancesHeading, balancesTable], "sunk")
balancesHeading = Heading("Account balances", "h3")
balancesTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit"])
balanceCol = Col("Balance", ["$4,230.55", "$12,780.10", "$1,950.00"])
transactionsSection = Card([transactionsHeading, transactionsTable], "sunk")
transactionsHeading = Heading("Recent transactions", "h3")
transactionsTable = Table([merchantCol, amountCol])
merchantCol = Col("Merchant", ["Whole Foods", "Netflix", "Shell", "Starbucks", "Amazon"])
amountCol = Col("Amount", ["-$84.20", "-$15.99", "-$48.00", "-$6.75", "-$129.40"])
spendingSection = Card([spendingHeading, spendingPie], "sunk")
spendingHeading = Heading("Spending by category this month", "h3")
spendingPie = PieChart(["Groceries", "Dining", "Transport", "Shopping", "Subscriptions"], [420, 260, 180, 340, 90], "donut")
billsSection = Card([billsHeading, billsList], "sunk")
billsHeading = Heading("Bills due soon", "h3")
billsList = ListBlock([electricBill, internetBill, rentBill], "number")
electricBill = ListItem("Electricity", "Due Apr 15 — $95.20")
internetBill = ListItem("Internet", "Due Apr 18 — $60.00")
rentBill = ListItem("Rent", "Due May 1 — $1,450.00")
savingsSection = Card([savingsHeading, savingsProgress, savingsCallout], "sunk")
savingsHeading = Heading("Vacation savings goal", "h3")
savingsProgress = Progress(68, "$6,800 of $10,000 saved")
savingsCallout = Callout("success", "Almost there!", "You are 68% of the way to your Hawaii trip.")
creditSection = Card([creditHeading, creditScore, creditBadge], "sunk")
creditHeading = Heading("Credit score", "h3")
creditScore = TextContent("742", "large-heavy")
creditBadge = Badge("Excellent", "secondary")
moveMoneySection = Card([moveMoneyHeading, moveMoneyForm], "sunk")
moveMoneyHeading = Heading("Move money", "h3")
moveMoneyForm = Form("transfer", transferButtons, [fromField, toField, amountField])
fromField = FormControl("From", fromSelect)
fromSelect = Select("from", [checkingOption, savingsOption], "Select account")
checkingOption = SelectItem("checking", "Checking")
savingsOption = SelectItem("savings", "Savings")
toField = FormControl("To", toSelect)
toSelect = Select("to", [checkingOption2, savingsOption2], "Select account")
checkingOption2 = SelectItem("checking", "Checking")
savingsOption2 = SelectItem("savings", "Savings")
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
transferButtons = Buttons([transferBtn])
transferBtn = Button("Transfer", null, "primary")
freezeSection = Card([freezeHeading, freezeAlert, freezeButtons], "sunk")
freezeHeading = Heading("Freeze credit line", "h3")
freezeAlert = Alert("Credit line active", "Your credit line is currently active. Freeze it to block new purchases.", "info")
freezeButtons = Buttons([freezeBtn])
freezeBtn = Button("Freeze credit line", null, "destructive")
statementSection = Card([statementHeading, statementForm], "sunk")
statementHeading = Heading("Statement period", "h3")
statementForm = Form("statement", statementButtons, [periodField])
periodField = FormControl("Select statement period", periodSelect)
periodSelect = Select("period", [periodJan, periodFeb, periodMar], "Choose a period")
periodJan = SelectItem("jan", "January 2025")
periodFeb = SelectItem("feb", "February 2025")
periodMar = SelectItem("mar", "March 2025")
statementButtons = Buttons([viewStatementBtn])
viewStatementBtn = Button("View statement", null, "primary")
alertsSection = Card([alertsHeading, alertsGroup], "sunk")
alertsHeading = Heading("Alert triggers", "h3")
alertsGroup = SwitchGroup("alerts", [largePurchaseAlert, lowBalanceAlert, foreignTxAlert])
largePurchaseAlert = SwitchItem("Large purchase", "Notify when a single purchase exceeds $500", "large_purchase", true)
lowBalanceAlert = SwitchItem("Low balance", "Notify when checking drops below $100", "low_balance", true)
foreignTxAlert = SwitchItem("Foreign transaction", "Notify on any international charge", "foreign_tx", false)
disputeSection = Card([disputeHeading, disputeCallout, disputeButtons], "sunk")
disputeHeading = Heading("Dispute a transaction", "h3")
disputeCallout = TextCallout("info", "Have an issue?", "Select a recent transaction to start a dispute.")
disputeButtons = Buttons([disputeBtn])
disputeBtn = Button("Dispute transaction", null, "primary")