root = Card([header, balancesRow, recentTxns, spendingChart, billsDue, vacationProgress, creditScore, actionsSection], "card", "column", "l")
header = CardHeader("Personal Banking", "Welcome back, Alex")
balancesRow = Card([checkingCard, savingsCard, creditCard], "clear", "row", "m", "stretch", "center")
checkingCard = Card([checkingLabel, checkingAmount], "card", "column", "xs", "center")
checkingLabel = TextContent("Checking", "small")
checkingAmount = TextContent("$4,231.58", "large-heavy")
savingsCard = Card([savingsLabel, savingsAmount], "card", "column", "xs", "center")
savingsLabel = TextContent("Savings", "small")
savingsAmount = TextContent("$12,845.20", "large-heavy")
creditCard = Card([creditLabel, creditAmount], "card", "column", "xs", "center")
creditLabel = TextContent("Credit", "small")
creditAmount = TextContent("-$1,247.30", "large-heavy")
recentTxns = Card([txnsHeader, txnsTable], "card", "column", "m")
txnsHeader = Heading("Recent Transactions", "h3")
txnsTable = Table([txnDateCol, txnMerchantCol, txnAmountCol])
txnDateCol = Col("Date", ["2024-01-15", "2024-01-14", "2024-01-13", "2024-01-12", "2024-01-11"])
txnMerchantCol = Col("Merchant", ["Whole Foods", "Shell Gas", "Netflix", "Amazon", "Starbucks"])
txnAmountCol = Col("Amount", ["-$87.42", "-$45.00", "-$15.99", "-$124.99", "-$6.50"])
spendingChart = Card([spendingHeader, spendingPie], "card", "column", "m")
spendingHeader = Heading("Spending by Category (Jan)", "h3")
spendingPie = PieChart(spendingLabels, spendingValues, "donut")
spendingLabels = ["Groceries", "Transport", "Entertainment", "Shopping", "Dining", "Other"]
spendingValues = [420, 180, 95, 310, 145, 85]
billsDue = Card([billsHeader, billsList], "card", "column", "m")
billsHeader = Heading("Bills Due Soon", "h3")
billsList = ListBlock(billItems, "number")
billItems = [bill1, bill2, bill3]
bill1 = ListItem("Electric Bill", "Due Jan 20 • $89.45", null, "Pay")
bill2 = ListItem("Internet", "Due Jan 22 • $65.00", null, "Pay")
bill3 = ListItem("Phone Bill", "Due Jan 25 • $45.00", null, "Pay")
vacationProgress = Card([vacationHeader, vacationBar], "card", "column", "m")
vacationHeader = Heading("Vacation Savings Goal", "h3")
vacationBar = Progress(65, "$3,250 of $5,000 saved")
creditScore = Card([scoreHeader, scoreValue, scoreLabel], "card", "column", "xs", "center")
scoreHeader = TextContent("Credit Score", "small")
scoreValue = TextContent("742", "large-heavy")
scoreLabel = TextContent("Good • Updated Jan 1", "small")
actionsSection = Card([actionsHeader, moveMoneyForm, freezeBtn, statementPicker, alertSettings, disputeBtn], "card", "column", "l")
actionsHeader = Heading("Quick Actions", "h3")
moveMoneyForm = Form("transfer", moveButtons, [fromField, toField, amountField])
fromField = FormControl("From Account", fromSelect)
fromSelect = Select("from_account", fromOptions, "Select account")
fromOptions = [fromCheck, fromSave, fromCred]
fromCheck = SelectItem("checking", "Checking •••• 4231")
fromSave = SelectItem("savings", "Savings •••• 8845")
fromCred = SelectItem("credit", "Credit •••• 1247")
toField = FormControl("To Account", toSelect)
toSelect = Select("to_account", toOptions, "Select account")
toOptions = [toCheck, toSave, toCred]
toCheck = SelectItem("checking", "Checking •••• 4231")
toSave = SelectItem("savings", "Savings •••• 8845")
toCred = SelectItem("credit", "Credit •••• 1247")
amountField = FormControl("Amount", amountInput, "Available balance will be checked")
amountInput = Input("amount", "0.00", "number")
moveButtons = Buttons([transferBtn, cancelBtn])
transferBtn = Button("Transfer", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
freezeBtn = Button("Freeze Credit Line", null, "secondary", "destructive")
statementPicker = Form("statement", statementButtons, [periodField])
periodField = FormControl("Statement Period", periodSelect)
periodSelect = Select("period", periodOptions, "Choose period")
periodOptions = [periodLast, periodThis, periodCustom]
periodLast = SelectItem("last_month", "Last Month (Dec 2024)")
periodThis = SelectItem("this_month", "This Month (Jan 2025)")
periodCustom = SelectItem("custom", "Custom Range")
statementButtons = Buttons([applyBtn])
applyBtn = Button("Apply", null, "primary")
alertSettings = Form("alerts", alertButtons, [alertField])
alertField = FormControl("Alert Triggers", alertChecks, "Choose what notifications you receive")
alertChecks = CheckBoxGroup("alerts", alertItems)
alertItems = [alertLarge, alertLowBal, alertBillDue, alertUnusual, alertDirectDep]
alertLarge = CheckBoxItem("Large Transactions", "Over $100", "large_txn", true)
alertLowBal = CheckBoxItem("Low Balance", "Under $500", "low_bal", true)
alertBillDue = CheckBoxItem("Bill Due", "3 days before due date", "bill_due", true)
alertUnusual = CheckBoxItem("Unusual Activity", "Potential fraud alerts", "unusual", true)
alertDirectDep = CheckBoxItem("Direct Deposit", "When paycheck arrives", "direct_dep", false)
alertButtons = Buttons([saveAlertsBtn])
saveAlertsBtn = Button("Save Settings", null, "primary")
disputeBtn = Button("Dispute a Transaction", null, "tertiary")