root = Card([header, balancesSection, transactionsSection, spendingSection, billsSection, vacationSection, creditScoreSection, transferSection, freezeSection, statementSection, alertsSection, disputeSection], "card", "column", "l")

header = CardHeader("Personal Banking", "Welcome back — here's your financial snapshot")

balancesSection = Card([balancesHeader, balancesTable], "sunk", "column", "m")
balancesHeader = Heading("Account Balances", "h3")
balancesTable = Table([balColAccount, balColType, balColBalance, balColAvailable])
balColAccount = Col("Account", ["Everyday Checking", "High-Yield Savings", "Platinum Credit Card"])
balColType = Col("Type", ["Checking", "Savings", "Credit"])
balColBalance = Col("Current Balance", ["$3,427.18", "$24,850.00", "-$1,243.56"])
balColAvailable = Col("Available", ["$3,427.18", "$24,850.00", "$8,756.44"])

transactionsSection = Card([txnHeader, txnTable], "sunk", "column", "m")
txnHeader = Heading("Recent Transactions", "h3")
txnTable = Table([txnColDate, txnColMerchant, txnColCategory, txnColAmount, txnColStatus])
txnColDate = Col("Date", ["2024-01-15", "2024-01-14", "2024-01-13", "2024-01-12", "2024-01-11"])
txnColMerchant = Col("Merchant", ["Whole Foods Market", "Shell Gas Station", "Netflix", "Amazon", "Starbucks"])
txnColCategory = Col("Category", ["Groceries", "Transport", "Entertainment", "Shopping", "Food & Drink"])
txnColAmount = Col("Amount", ["-$87.43", "-$45.00", "-$15.99", "-$127.89", "-$6.75"])
txnColStatus = Col("Status", ["Posted", "Posted", "Posted", "Pending", "Posted"])

spendingSection = Card([spendHeader, spendChart], "sunk", "column", "m")
spendHeader = Heading("Spending by Category — This Month", "h3")
spendChart = HorizontalBarChart(spendLabels, [spendSeries], "grouped", "Amount ($)", "Category")
spendLabels = ["Groceries", "Transport", "Entertainment", "Shopping", "Food & Drink", "Utilities", "Other"]
spendSeries = Series("Spending", [420.15, 180.50, 95.99, 312.40, 145.20, 180.00, 87.30])

billsSection = Card([billsHeader, billsList], "sunk", "column", "m")
billsHeader = Heading("Bills Due Soon", "h3")
billsList = ListBlock([bill1, bill2, bill3, bill4], "number")
bill1 = ListItem("Electric Bill", "Due Jan 20 • $145.30", null, "Pay")
bill2 = ListItem("Internet", "Due Jan 22 • $79.99", null, "Pay")
bill3 = ListItem("Car Insurance", "Due Jan 25 • $210.00", null, "Pay")
bill4 = ListItem("Phone Bill", "Due Jan 28 • $85.50", null, "Pay")

vacationSection = Card([vacationHeader, vacationProgress, vacationDetails], "sunk", "column", "m")
vacationHeader = Heading("Vacation Savings Goal", "h3")
vacationProgress = Progress(65, "$6,500 of $10,000 saved")
vacationDetails = TextContent("Target date: June 2024 • $3,500 remaining • Auto-transfer: $500/month")

creditScoreSection = Card([creditHeader, creditScore, creditDetails], "sunk", "column", "m", "center")
creditHeader = Heading("Credit Score", "h3")
creditScore = TextContent("742", "large-heavy")
creditDetails = TextContent("Excellent • Updated Jan 10, 2024 • Factors: On-time payments 98%, Credit utilization 12%")

transferSection = Card([transferHeader, transferForm], "sunk", "column", "m")
transferHeader = Heading("Move Money", "h3")
transferForm = Form("transfer-money", transferButtons, [fromField, toField, amountField, noteField])
fromField = FormControl("From Account", fromSelect, "Select source account")
fromSelect = Select("from_account", [fromChecking, fromSavings, fromCredit], "Choose account")
fromChecking = SelectItem("checking", "Everyday Checking • $3,427.18")
fromSavings = SelectItem("savings", "High-Yield Savings • $24,850.00")
fromCredit = SelectItem("credit", "Platinum Credit Card • Avail $8,756.44")
toField = FormControl("To Account", toSelect, "Select destination account")
toSelect = Select("to_account", [toChecking, toSavings, toCredit], "Choose account")
toChecking = SelectItem("checking", "Everyday Checking • $3,427.18")
toSavings = SelectItem("savings", "High-Yield Savings • $24,850.00")
toCredit = SelectItem("credit", "Platinum Credit Card • Avail $8,756.44")
amountField = FormControl("Amount", amountInput, "Minimum $1.00")
amountInput = Input("amount", "0.00", "number", ["required", "min:1"])
noteField = FormControl("Note (optional)", noteInput, "Add a memo for this transfer")
noteInput = TextArea("note", "Vacation fund transfer", 2)
transferButtons = Buttons([transferSubmit, transferCancel])
transferSubmit = Button("Transfer", null, "primary")
transferCancel = Button("Cancel", null, "tertiary")

freezeSection = Card([freezeHeader, freezeDesc, freezeButton], "sunk", "column", "m")
freezeHeader = Heading("Freeze Credit Line", "h3")
freezeDesc = TextContent("Freeze your credit card to prevent new charges. Recurring payments will still process.")
freezeButton = Buttons([freezeBtn])
freezeBtn = Button("Freeze Credit Card", null, "destructive")

statementSection = Card([stmtHeader, stmtSelect], "sunk", "column", "m")
stmtHeader = Heading("Statement Period", "h3")
stmtSelect = Select("statement_period", [stmtCurrent, stmtLast, stmtCustom, stmtYear], "Choose period", null, null, "medium")
stmtCurrent = SelectItem("current", "Current Cycle (Jan 1 – Jan 31)")
stmtLast = SelectItem("last", "Last Cycle (Dec 1 – Dec 31)")
stmtCustom = SelectItem("custom", "Custom Range…")
stmtYear = SelectItem("year", "Year to Date")

alertsSection = Card([alertsHeader, alertsDesc, alertsGroup], "sunk", "column", "m")
alertsHeader = Heading("Alert Preferences", "h3")
alertsDesc = TextContent("Choose which activities trigger notifications.")
alertsGroup = CheckBoxGroup("alert_triggers", [alertLarge, alertLowBal, alertBillDue, alertLogin, alertIntl, alertScore])
alertLarge = CheckBoxItem("Large Transactions", "Notify for transactions over $100", "large_txn", true)
alertLowBal = CheckBoxItem("Low Balance", "Alert when checking falls below $500", "low_bal", true)
alertBillDue = CheckBoxItem("Upcoming Bills", "Remind 3 days before due date", "bill_due", true)
alertLogin = CheckBoxItem("New Login", "Alert on sign-in from new device", "new_login", true)
alertIntl = CheckBoxItem("International Charges", "Flag transactions outside home country", "intl_charge", false)
alertScore = CheckBoxItem("Credit Score Changes", "Notify when score changes", "score_change", false)

disputeSection = Card([disputeHeader, disputeDesc, disputeButton], "sunk", "column", "m")
disputeHeader = Heading("Dispute a Transaction", "h3")
disputeDesc = TextContent("See a charge you don't recognize? Open a dispute and we'll investigate.")
disputeButton = Buttons([disputeBtn])
disputeBtn = Button("Start Dispute", null, "primary")