root = Card([header, accountsSection, transactionsSection, spendingSection, billsSection, goalSection, creditSection, actionsSection, statementSection, alertSection, disputeSection])
header = CardHeader("Personal Banking", "Welcome back, Alex")
accountsSection = Card([accountsHeading, accountsTable], "sunk")
accountsHeading = Heading("Account Balances", "h3")
accountsTable = Table([acctName, acctBalance])
acctName = Col("Account", ["Checking", "Savings", "Credit Line"])
acctBalance = Col("Balance", ["$4,250.80", "$12,740.55", "$1,850.00"])
transactionsSection = Card([transactionsHeading, transactionsTable], "sunk")
transactionsHeading = Heading("Recent Transactions", "h3")
transactionsTable = Table([txnMerchant, txnAmount])
txnMerchant = Col("Merchant", ["Whole Foods", "Netflix", "Shell", "Starbucks", "Target"])
txnAmount = Col("Amount", ["-$84.20", "-$15.99", "-$42.00", "-$6.75", "-$120.40"])
spendingSection = Card([spendingHeading, spendingChart], "sunk")
spendingHeading = Heading("Spending by Category This Month", "h3")
spendingChart = PieChart(["Groceries", "Dining", "Transport", "Entertainment", "Shopping"], [420, 180, 150, 90, 240], "donut")
billsSection = Card([billsHeading, billsTable], "sunk")
billsHeading = Heading("Bills Due Soon", "h3")
billsTable = Table([billName, billDue, billAmount])
billName = Col("Bill", ["Electric", "Internet", "Phone"])
billDue = Col("Due", ["Mar 28", "Apr 1", "Apr 3"])
billAmount = Col("Amount", ["$95.00", "$60.00", "$45.00"])
goalSection = Card([goalHeading, goalProgress, goalText], "sunk")
goalHeading = Heading("Vacation Savings Goal", "h3")
goalProgress = Progress(72, "$7,200 of $10,000")
goalText = TextContent("You're 72% of the way to your Hawaii trip!")
creditSection = Card([creditHeading, creditScore, creditText], "sunk")
creditHeading = Heading("Credit Score", "h3")
creditScore = Badge("742", "outline")
creditText = TextContent("Excellent — up 12 points this quarter.")
actionsSection = Card([moveHeading, moveForm], "sunk")
moveHeading = Heading("Move Money", "h3")
moveForm = Form("transfer", transferButtons, [amountField, fromField, toField])
amountField = FormControl("Amount", amountInput)
amountInput = Input("amount", "0.00", "number")
fromField = FormControl("From", fromSelect)
fromSelect = Select("from", [fromChecking, fromSavings], "Select account")
fromChecking = SelectItem("checking", "Checking")
fromSavings = SelectItem("savings", "Savings")
toField = FormControl("To", toSelect)
toSelect = Select("to", [toSavings, toChecking, toCredit], "Select account")
toSavings = SelectItem("savings", "Savings")
toChecking = SelectItem("checking", "Checking")
toCredit = SelectItem("credit", "Credit Line")
transferButtons = Buttons([transferBtn])
transferBtn = Button("Transfer", null, "primary")
statementSection = Card([statementHeading, statementSelect], "sunk")
statementHeading = Heading("Statement Period", "h3")
statementSelect = Select("statement", [stmtJan, stmtFeb, stmtMar], "Choose period")
stmtJan = SelectItem("jan", "January 2025")
stmtFeb = SelectItem("feb", "February 2025")
stmtMar = SelectItem("mar", "March 2025")
alertSection = Card([alertHeading, alertGroup], "sunk")
alertHeading = Heading("Alert Triggers", "h3")
alertGroup = SwitchGroup("alerts", [alertLow, alertLarge, alertFraud])
alertLow = SwitchItem("Low balance", "Alert when balance drops below $100", "low_balance")
alertLarge = SwitchItem("Large transactions", "Alert on purchases over $500", "large_txn")
alertFraud = SwitchItem("Suspicious activity", "Alert on unusual spending patterns", "fraud")
disputeSection = Card([disputeHeading, disputeButtons], "sunk")
disputeHeading = Heading("Dispute a Transaction", "h3")
disputeButtons = Buttons([disputeBtn, freezeBtn])
disputeBtn = Button("Dispute transaction", null, "secondary")
freezeBtn = Button("Freeze credit line", null, "destructive")