root = Card([header, balancesHeading, balancesTable, sep1, transactionsHeading, transactionsTable, sep2, spendingHeading, spendingChart, sep3, billsHeading, billsList, sep4, goalsHeading, vacationProgress, sep5, creditHeading, creditText, creditProgress, sep6, moveHeading, moveForm, sep7, statementHeading, statementForm, sep8, alertsHeading, alertsForm, sep9, controlsHeading, controlsButtons, sep10, disputeHeading, disputeDialog], "card", "column", "l")
header = CardHeader("Personal Banking", "Welcome back, Alex")
balancesHeading = CardHeader("Account balances", "Checking · Savings · Credit")
balancesTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit Card"])
balanceCol = Col("Balance", ["$4,280.15", "$12,640.80", "-$1,342.60"])
sep1 = Separator()
transactionsHeading = CardHeader("Recent transactions", "Last 5 activity")
transactionsTable = Table([txnMerchant, txnAmount, txnDate])
txnMerchant = Col("Merchant", ["Whole Foods", "Shell", "Netflix", "Starbucks", "Venmo Transfer"])
txnAmount = Col("Amount", ["-$86.42", "-$45.00", "-$15.49", "-$6.20", "+$120.00"])
txnDate = Col("Date", ["May 12", "May 11", "May 10", "May 9", "May 8"])
sep2 = Separator()
spendingHeading = CardHeader("Spending by category", "This month")
spendingChart = PieChart(catLabels, catValues, "donut")
catLabels = ["Groceries", "Dining", "Transport", "Entertainment", "Utilities", "Other"]
catValues = [420, 260, 180, 120, 150, 90]
sep3 = Separator()
billsHeading = CardHeader("Bills due soon", "Upcoming payments")
billsList = ListBlock([electricBill, internetBill, rentBill], "number")
electricBill = ListItem("Electric — due May 15", "$85.20")
internetBill = ListItem("Internet — due May 18", "$60.00")
rentBill = ListItem("Rent — due Jun 1", "$1,650.00")
sep4 = Separator()
goalsHeading = CardHeader("Vacation savings goal", "Hawaii fund")
vacationProgress = Progress(68, "$6,800 of $10,000 saved")
sep5 = Separator()
creditHeading = CardHeader("Current credit score", "Updated May 1")
creditText = TextContent("742 — Excellent", "large")
creditProgress = Progress(87, "742 out of 850")
sep6 = Separator()
moveHeading = CardHeader("Move money", "Transfer between accounts")
moveForm = Form("move-money", moveButtons, [fromField, toField, amountField])
fromField = FormControl("From", fromSelect, "Account to debit")
fromSelect = Select("from", [fromChecking, fromSavings], "Select account")
fromChecking = SelectItem("checking", "Checking · $4,280.15")
fromSavings = SelectItem("savings", "Savings · $12,640.80")
toField = FormControl("To", toSelect)
toSelect = Select("to", [toSavings, toChecking], "Select account")
toSavings = SelectItem("savings", "Savings")
toChecking = SelectItem("checking", "Checking")
amountField = FormControl("Amount", amountInput, "Enter the amount to transfer")
amountInput = Input("amount", "0.00", "number")
moveButtons = Buttons([transferBtn])
transferBtn = Button("Transfer", null, "primary")
sep7 = Separator()
statementHeading = CardHeader("Statement period", "Pick a billing cycle")
statementForm = Form("statement-period", statementButtons, [statementField])
statementField = FormControl("Statement period", statementSelect, "Choose which cycle to view")
statementSelect = Select("statement_period", [periodCurrent, periodPrevious, periodCustom], "Select period")
periodCurrent = SelectItem("current", "Current period (Apr 12 – May 11)")
periodPrevious = SelectItem("previous", "Previous period (Mar 12 – Apr 11)")
periodCustom = SelectItem("custom", "Custom range")
statementButtons = Buttons([applyStatementBtn])
applyStatementBtn = Button("Apply period", null, "secondary")
sep8 = Separator()
alertsHeading = CardHeader("Alert settings", "Choose what triggers a notification")
alertsForm = Form("alert-settings", alertsButtons, [alertsControl])
alertsControl = FormControl("Triggers", alertsCheckbox, "Events that will send you an alert")
alertsCheckbox = CheckBoxGroup("alert_triggers", [alertLarge, alertForeign, alertLow, alertLogin])
alertLarge = CheckBoxItem("Large purchases", "Over $500", "large_purchases", true)
alertForeign = CheckBoxItem("Foreign transactions", "Outside your home country", "foreign_txns", true)
alertLow = CheckBoxItem("Low balance", "Below $100", "low_balance", false)
alertLogin = CheckBoxItem("New device login", "Sign-in from an unfamiliar device", "new_login", true)
alertsButtons = Buttons([saveAlertsBtn])
saveAlertsBtn = Button("Save alert settings", null, "primary")
sep9 = Separator()
controlsHeading = CardHeader("Credit card controls", "Freeze your credit line")
controlsButtons = Buttons([freezeBtn])
freezeBtn = Button("Freeze credit line", null, "secondary")
sep10 = Separator()
disputeHeading = CardHeader("Dispute a transaction", "Report an unauthorized or incorrect charge")
disputeDialog = DialogBlock("Dispute transaction", "Dispute a transaction", "Select the charge and reason, then submit. Our team typically responds within 10 days.", [disputeForm], "secondary")
disputeForm = Form("dispute", disputeButtons, [disputeTxnField, disputeReasonField, disputeDetailsField])
disputeTxnField = FormControl("Transaction", disputeTxnSelect)
disputeTxnSelect = Select("txn", [disputeTxn1, disputeTxn2, disputeTxn3], "Select transaction")
disputeTxn1 = SelectItem("whole-foods", "Whole Foods — $86.42")
disputeTxn2 = SelectItem("shell", "Shell — $45.00")
disputeTxn3 = SelectItem("netflix", "Netflix — $15.49")
disputeReasonField = FormControl("Reason", disputeReasonSelect)
disputeReasonSelect = Select("reason", [reasonUnauthorized, reasonWrongAmount, reasonDuplicate], "Select reason")
reasonUnauthorized = SelectItem("unauthorized", "Unauthorized charge")
reasonWrongAmount = SelectItem("wrong-amount", "Wrong amount")
reasonDuplicate = SelectItem("duplicate", "Duplicate charge")
disputeDetailsField = FormControl("Details", disputeDetailsInput, "Optional notes")
disputeDetailsInput = Input("details", "Add more context")
disputeButtons = Buttons([submitDisputeBtn, cancelDisputeBtn])
submitDisputeBtn = Button("Submit dispute", null, "primary")
cancelDisputeBtn = Button("Cancel", null, "tertiary")