root = Card([header, balancesBlock, creditScoreBlock, vacationGoalBlock, recentTxnsHeader, recentTxnsTable, spendingHeader, spendingChart, billsHeader, billsList, actionsHeader, moveMoneyForm, freezeCreditBtn, statementPeriodForm, alertsForm, disputeForm])
header = CardHeader("Personal Banking", "Welcome back — here's your financial snapshot")
balancesBlock = OverviewCardBlock([checkingCard, savingsCard, creditCard], "grid", true)
checkingCard = OverviewCardItem("checking", checkingTop, checkingBottom)
checkingTop = IconText(checkingIcon, "neutral", "l", "Checking", "Available balance", false, "vertical")
checkingIcon = Icon("credit-card", "finance")
checkingBottom = MetricIndicatorInline("$4,287.50", "Last updated 2 min ago")
savingsCard = OverviewCardItem("savings", savingsTop, savingsBottom)
savingsTop = IconText(savingsIcon, "neutral", "l", "Savings", "Available balance", false, "vertical")
savingsIcon = Icon("piggy-bank", "finance")
savingsBottom = MetricIndicatorInline("$18,450.00", "+$1,200 this month", { direction: "up", value: 6.9 })
creditCard = OverviewCardItem("credit", creditTop, creditBottom)
creditTop = IconText(creditIcon, "neutral", "l", "Credit Card", "Current balance", false, "vertical")
creditIcon = Icon("credit-card", "finance")
creditBottom = MetricIndicatorInline("-$2,340.80", "Limit $10,000 · 76.6% available", { direction: "down", value: 23.4 })
creditScoreBlock = SnippetCardBlock([creditScoreCard], "grid", true)
creditScoreCard = SnippetCardItem("credit-score", creditScoreLhs, creditScoreRhs)
creditScoreLhs = IconText(creditScoreIcon, "success", "l", "Credit Score", "Updated weekly", false, "horizontal")
creditScoreIcon = Icon("shield-check", "security")
creditScoreRhs = BoldText("number", "742", "Good", "metric", "lg")
vacationGoalBlock = OverviewCardBlock([vacationCard], "grid", true)
vacationCard = OverviewCardItem("vacation-goal", vacationTop, vacationBottom)
vacationTop = IconText(vacationIcon, "info", "l", "Vacation Fund", "Goal: $5,000 by Dec 2026", false, "vertical")
vacationIcon = Icon("plane", "travel")
vacationBottom = MetricIndicatorInline("$3,200", "64% complete · $1,800 to go", { direction: "up", value: 12.5 })
recentTxnsHeader = InlineHeader("Recent Transactions", "Last 10 transactions across all accounts")
recentTxnsTable = Table([txnDate, txnMerchant, txnAccount, txnAmount, txnStatus])
txnDate = Col("Date", ["2026-01-15", "2026-01-14", "2026-01-13", "2026-01-12", "2026-01-11", "2026-01-10", "2026-01-09", "2026-01-08", "2026-01-07", "2026-01-06"], "string")
txnMerchant = Col("Merchant", ["Whole Foods", "Shell Gas", "Netflix", "Amazon", "Uber", "Target", "Spotify", "Chipotle", "Apple Store", "Local Coffee"], "string")
txnAccount = Col("Account", ["Checking", "Credit", "Checking", "Credit", "Checking", "Credit", "Checking", "Checking", "Credit", "Checking"], "string")
txnAmount = Col("Amount", [-87.45, -45.00, -15.99, -124.99, -22.50, -67.32, -10.99, -18.75, -899.00, -5.50], "number")
txnStatus = Col("Status", ["Posted", "Posted", "Posted", "Pending", "Posted", "Posted", "Posted", "Posted", "Posted", "Posted"], "string")
spendingHeader = InlineHeader("Spending by Category (Jan 2026)", "Where your money went this month")
spendingChart = HorizontalBarChart(spendCats, [spendSeries], "grouped", "Amount ($)", "Category")
spendCats = ["Groceries", "Dining Out", "Transport", "Shopping", "Subscriptions", "Entertainment", "Other"]
spendSeries = Series("Spent", [420.50, 285.30, 180.00, 340.75, 89.99, 120.00, 95.45])
billsHeader = InlineHeader("Bills Due Soon", "Upcoming payments in the next 14 days")
billsList = ListBlock([bill1, bill2, bill3, bill4], "number")
bill1 = ListItem("Electric Bill", "$142.30 · Due Jan 20 · Auto-pay scheduled", null, null, { type: "continue_conversation", context: "Show details for electric bill" })
bill2 = ListItem("Internet", "$79.99 · Due Jan 22 · Auto-pay scheduled", null, null, { type: "continue_conversation", context: "Show details for internet bill" })
bill3 = ListItem("Credit Card Payment", "$180.00 (min) · Due Jan 25", null, null, { type: "continue_conversation", context: "Show credit card payment options" })
bill4 = ListItem("Car Insurance", "$215.00 · Due Feb 1", null, null, { type: "continue_conversation", context: "Show car insurance payment details" })
actionsHeader = InlineHeader("Quick Actions", "Move money, manage security, and more")
moveMoneyForm = Form("move-money", moveMoneyButtons, [fcFromAccount, fcToAccount, fcAmount, fcMemo])
moveMoneyButtons = Buttons([btnMoveMoney, btnCancelMove], "row")
btnMoveMoney = Button("Transfer", { type: "continue_conversation", context: "Execute transfer between accounts" }, "primary")
btnCancelMove = Button("Cancel", { type: "continue_conversation", context: "Cancel transfer" }, "secondary")
fcFromAccount = FormControl("From Account", fromAccountSelect, "Select source account")
fromAccountSelect = Select("from-account", [fromChk, fromSav, fromCred], "Choose account", { required: true })
fromChk = SelectItem("checking", "Checking · $4,287.50")
fromSav = SelectItem("savings", "Savings · $18,450.00")
fromCred = SelectItem("credit", "Credit Card · -$2,340.80")
fcToAccount = FormControl("To Account", toAccountSelect, "Select destination account")
toAccountSelect = Select("to-account", [toChk, toSav, toCred], "Choose account", { required: true })
toChk = SelectItem("checking", "Checking · $4,287.50")
toSav = SelectItem("savings", "Savings · $18,450.00")
toCred = SelectItem("credit", "Credit Card · -$2,340.80")
fcAmount = FormControl("Amount", amountInput, "Enter transfer amount in USD")
amountInput = Input("amount", "e.g. 500.00", "number", { required: true, numeric: true, min: 1, max: 10000 })
fcMemo = FormControl("Memo (optional)", memoInput, "Add a note for this transfer")
memoInput = Input("memo", "e.g. Rent, savings top-up...", "text")
freezeCreditBtn = Button("Freeze Credit Line", Action([@ToAssistant("Freeze my credit card immediately")]), "destructive", "normal", "medium")
statementPeriodForm = Form("statement-period", statementButtons, [fcStatementPeriod])
statementButtons = Buttons([btnApplyPeriod], "row")
btnApplyPeriod = Button("Apply Period", { type: "continue_conversation", context: "Apply selected statement period" }, "primary")
fcStatementPeriod = FormControl("Statement Period", periodSelect, "Choose a period to view statements")
periodSelect = Select("statement-period", [p1, p2, p3, p4, p5], "Select period", { required: true })
p1 = SelectItem("current", "Current Month (Jan 2026)")
p2 = SelectItem("last", "Last Month (Dec 2025)")
p3 = SelectItem("3m", "Last 3 Months")
p4 = SelectItem("6m", "Last 6 Months")
p5 = SelectItem("custom", "Custom Range...")
alertsForm = Form("alerts", alertsButtons, [fcAlertTypes, fcAlertChannels])
alertsButtons = Buttons([btnSaveAlerts], "row")
btnSaveAlerts = Button("Save Alert Preferences", { type: "continue_conversation", context: "Save my alert preferences" }, "primary")
fcAlertTypes = FormControl("Alert Triggers", alertTypesChips, "Choose what triggers an alert")
alertTypesChips = Chips("alert-types", "multiple", [at1, at2, at3, at4, at5, at6], {}, ["large_txn", "low_bal", "bill_due"])
at1 = ChipItem("large_txn", "Large Transactions (> $100)", at1icon)
at1icon = Icon("dollar-sign", "finance")
at2 = ChipItem("low_bal", "Low Balance (< $500)", at2icon)
at2icon = Icon("alert-triangle", "alerts")
at3 = ChipItem("bill_due", "Bill Due Soon", at3icon)
at3icon = Icon("calendar", "time")
at4 = ChipItem("intl_txn", "International Transactions", at4icon)
at4icon = Icon("globe", "travel")
at5 = ChipItem("login", "New Device Login", at5icon)
at5icon = Icon("shield-alert", "security")
at6 = ChipItem("credit_change", "Credit Score Change", at6icon)
at6icon = Icon("trending-up", "charts")
fcAlertChannels = FormControl("Delivery Channels", alertChannelsChips, "How do you want to receive alerts?")
alertChannelsChips = Chips("alert-channels", "multiple", [ac1, ac2, ac3], {}, ["push", "email"])
ac1 = ChipItem("push", "Push Notification", ac1icon)
ac1icon = Icon("bell", "alerts")
ac2 = ChipItem("email", "Email", ac2icon)
ac2icon = Icon("mail", "communication")
ac3 = ChipItem("sms", "SMS", ac3icon)
ac3icon = Icon("message-square", "communication")
disputeForm = Form("dispute", disputeButtons, [fcDisputeTxn, fcDisputeReason, fcDisputeDetails])
disputeButtons = Buttons([btnSubmitDispute], "row")
btnSubmitDispute = Button("Submit Dispute", { type: "continue_conversation", context: "Submit transaction dispute" }, "primary")
fcDisputeTxn = FormControl("Transaction to Dispute", disputeTxnSelect, "Select the transaction you want to dispute")
disputeTxnSelect = Select("dispute-txn", [dt1, dt2, dt3, dt4, dt5], "Choose transaction", { required: true })
dt1 = SelectItem("txn_001", "Whole Foods · -$87.45 · Jan 15")
dt2 = SelectItem("txn_002", "Shell Gas · -$45.00 · Jan 14")
dt3 = SelectItem("txn_003", "Netflix · -$15.99 · Jan 13")
dt4 = SelectItem("txn_004", "Amazon · -$124.99 · Jan 12")
dt5 = SelectItem("txn_005", "Uber · -$22.50 · Jan 11")
fcDisputeReason = FormControl("Dispute Reason", disputeReasonSelect, "Select the reason for your dispute")
disputeReasonSelect = Select("dispute-reason", [dr1, dr2, dr3, dr4], "Choose reason", { required: true })
dr1 = SelectItem("unauthorized", "Unauthorized Transaction")
dr2 = SelectItem("wrong_amount", "Incorrect Amount Charged")
dr3 = SelectItem("not_received", "Goods/Services Not Received")
dr4 = SelectItem("duplicate", "Duplicate Charge")
fcDisputeDetails = FormControl("Additional Details", disputeDetailsArea, "Provide any supporting information")
disputeDetailsArea = TextArea("dispute-details", "Describe what happened, include dates, merchant communication, etc.", 4, { required: true, minLength: 20 })