root = Card([header, balanceSection, transactionsSection, spendingSection, billsSection, goalSection, creditSection, actionsSection, transferForm, statementSection, alertSection, disputeSection])
header = CardHeader("Personal Banking", "Welcome back, Alex")
balanceSection = Card([balanceHeading, balanceTable], "sunk")
balanceHeading = Heading("Account Balances", "h2")
balanceTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit"])
balanceCol = Col("Balance", ["$4,320.50", "$12,845.75", "$1,250.00"])
transactionsSection = Card([transactionsHeading, transactionsTable], "sunk")
transactionsHeading = Heading("Recent Transactions", "h2")
transactionsTable = Table([merchantCol, amountCol])
merchantCol = Col("Merchant", ["Whole Foods", "Netflix", "Shell", "Amazon", "Starbucks"])
amountCol = Col("Amount", ["-$86.42", "-$15.99", "-$48.00", "-$132.10", "-$6.75"])
spendingSection = Card([spendingHeading, spendingChart], "sunk")
spendingHeading = Heading("Spending by Category This Month", "h2")
spendingChart = PieChart(["Groceries", "Transport", "Entertainment", "Utilities", "Dining"], [420, 180, 95, 210, 160], "donut")
billsSection = Card([billsHeading, billsTable], "sunk")
billsHeading = Heading("Bills Due Soon", "h2")
billsTable = Table([billNameCol, billDueCol, billAmountCol])
billNameCol = Col("Bill", ["Electric", "Internet", "Rent"])
billDueCol = Col("Due", ["Mar 5", "Mar 8", "Mar 1"])
billAmountCol = Col("Amount", ["$95.00", "$60.00", "$1,400.00"])
goalSection = Card([goalHeading, goalProgress, goalText], "sunk")
goalHeading = Heading("Vacation Savings Goal", "h2")
goalProgress = Progress(65, "65% of $9,000 saved")
goalText = TextContent("You've saved **$5,850** toward your **$9,000** vacation fund. Keep it up!")
creditSection = Card([creditHeading, creditScore, creditText], "sunk")
creditHeading = Heading("Credit Score", "h2")
creditScore = Badge("742", "success")
creditText = TextContent("Excellent — up 12 points this quarter.")
actionsSection = Card([transferButton, freezeButton], "sunk")
transferButton = Button("Move Money Between Accounts", null, "primary")
freezeButton = Button("Freeze Credit Line", null, "destructive")
transferForm = Form("transfer-money", transferButtons, [fromField, toField, amountField])
fromField = FormControl("From", fromSelect)
fromSelect = Select("from_account", [fromChecking, fromSavings], "Select source account")
fromChecking = SelectItem("checking", "Checking")
fromSavings = SelectItem("savings", "Savings")
toField = FormControl("To", toSelect)
toSelect = Select("to_account", [toChecking, toSavings], "Select destination account")
toChecking = SelectItem("checking", "Checking")
toSavings = SelectItem("savings", "Savings")
amountField = FormControl("Amount", amountInput, "Enter the amount to transfer")
amountInput = Input("amount", "0.00", "number")
transferButtons = Buttons([submitTransferBtn, cancelTransferBtn])
submitTransferBtn = Button("Transfer", null, "primary")
cancelTransferBtn = Button("Cancel", null, "tertiary")
statementSection = Card([statementHeading, statementSelect], "sunk")
statementHeading = Heading("Statement Period", "h2")
statementSelect = Select("statement_period", [periodMonthly, periodQuarterly, periodYearly], "Choose a period")
periodMonthly = SelectItem("monthly", "Monthly")
periodQuarterly = SelectItem("quarterly", "Quarterly")
periodYearly = SelectItem("yearly", "Yearly")
alertSection = Card([alertHeading, alertSwitchGroup], "sunk")
alertHeading = Heading("Alert Triggers", "h2")
alertSwitchGroup = SwitchGroup("alert_triggers", [alertLowBalance, alertLargePurchase, alertNewLogin])
alertLowBalance = SwitchItem("Low balance", "Notify when balance drops below $100", "low_balance", true)
alertLargePurchase = SwitchItem("Large purchase", "Notify for purchases over $500", "large_purchase", true)
alertNewLogin = SwitchItem("New login", "Notify on unrecognized device login", "new_login", false)
disputeSection = Card([disputeHeading, disputeSelect, disputeButton], "sunk")
disputeHeading = Heading("Dispute a Transaction", "h2")
disputeSelect = Select("dispute_transaction", [disputeAmazon, disputeNetflix, disputeShell], "Select a transaction")
disputeAmazon = SelectItem("amazon", "Amazon - $132.10")
disputeNetflix = SelectItem("netflix", "Netflix - $15.99")
disputeShell = SelectItem("shell", "Shell - $48.00")
disputeButton = Button("Submit Dispute", null, "secondary")