root = Card([header, balancesSection, txSection, spendingSection, billsSection, goalSection, creditSection, transferSection, freezeSection, statementSection, alertsSection, disputeSection, followUp], "card", "column", "l")
header = CardHeader("Personal Banking", "Accounts overview")
balancesSection = Card([balancesHeader, balancesTable], "sunk")
balancesHeader = Heading("Account balances", "h2")
balancesTable = Table([accountCol, balanceCol])
accountCol = Col("Account", ["Checking", "Savings", "Credit Card"])
balanceCol = Col("Balance", ["$4,280.50", "$12,750.00", "$1,340.20"])
txSection = Card([txHeader, txTable], "sunk")
txHeader = Heading("Recent transactions", "h2")
txTable = Table([txMerchantCol, txAmountCol, txDateCol])
txMerchantCol = Col("Merchant", ["Whole Foods", "Shell", "Netflix", "Transfer to Savings", "Starbucks"])
txAmountCol = Col("Amount", ["-$86.20", "-$45.00", "-$15.99", "-$500.00", "-$6.75"])
txDateCol = Col("Date", ["Mar 18", "Mar 17", "Mar 16", "Mar 15", "Mar 14"])
spendingSection = Card([spendingHeader, spendingChart], "sunk")
spendingHeader = Heading("Spending this month", "h2")
spendingChart = PieChart(["Groceries", "Dining", "Transport", "Bills", "Shopping", "Other"], [620, 340, 180, 420, 260, 140], "donut")
billsSection = Card([billsHeader, billsTable], "sunk")
billsHeader = Heading("Bills due soon", "h2")
billsTable = Table([billNameCol, billAmountCol, billDueCol])
billNameCol = Col("Bill", ["Electric", "Internet", "Phone", "Rent"])
billAmountCol = Col("Amount", ["$78.40", "$49.99", "$35.00", "$1,200.00"])
billDueCol = Col("Due", ["Mar 22", "Mar 24", "Mar 26", "Apr 1"])
goalSection = Card([goalHeader, goalProgress], "sunk")
goalHeader = Heading("Vacation savings goal", "h2")
goalProgress = Progress(72, "$2,160 of $3,000 saved")
creditSection = Card([creditHeader, creditScore, creditStatus], "sunk")
creditHeader = Heading("Credit score", "h2")
creditScore = TextContent("742", "large-heavy")
creditStatus = Tag("Excellent", null, null, "success")
transferSection = Card([transferHeader, transferForm], "sunk")
transferHeader = Heading("Move money", "h2")
transferForm = Form("transfer", transferButtons, [transferAmountField, transferFromField, transferToField])
transferAmountField = FormControl("Amount", transferAmountInput)
transferAmountInput = Input("amount", "0.00", "number")
transferFromField = FormControl("From", transferFromSelect)
transferFromSelect = Select("from_account", [fromChecking, fromSavings], "Select account")
fromChecking = SelectItem("checking", "Checking")
fromSavings = SelectItem("savings", "Savings")
transferToField = FormControl("To", transferToSelect)
transferToSelect = Select("to_account", [toChecking, toSavings], "Select account")
toChecking = SelectItem("checking", "Checking")
toSavings = SelectItem("savings", "Savings")
transferButtons = Buttons([transferSubmitBtn])
transferSubmitBtn = Button("Transfer", null, "primary")
freezeSection = Card([freezeHeader, freezeAction], "sunk")
freezeHeader = Heading("Card controls", "h2")
freezeAction = AlertDialogBlock("Freeze credit line", "Freeze your credit card?", "New purchases and cash advances will be declined. Recurring payments will still go through.", "Freeze card", "Keep it active", "destructive")
statementSection = Card([statementHeader, statementForm], "sunk")
statementHeader = Heading("Statements", "h2")
statementForm = Form("statement-picker", statementButtons, [statementField])
statementField = FormControl("Statement period", statementSelect)
statementSelect = Select("statement_period", [statementCurrent, statementPrevious, statementJan], "Choose a period")
statementCurrent = SelectItem("current", "Current period (Feb 19 – Mar 18)")
statementPrevious = SelectItem("previous", "Previous period (Jan 20 – Feb 18)")
statementJan = SelectItem("january", "January (Dec 20 – Jan 19)")
statementButtons = Buttons([statementBtn])
statementBtn = Button("View statement", null, "secondary")
alertsSection = Card([alertsHeader, alertsForm], "sunk")
alertsHeader = Heading("Alert preferences", "h2")
alertsForm = Form("alert-prefs", alertButtons, [alertTriggersField])
alertTriggersField = FormControl("Notify me when", alertCheckboxes)
alertCheckboxes = CheckBoxGroup("alert_triggers", [alertLarge, alertLow, alertLogin, alertCard])
alertLarge = CheckBoxItem("Large purchase", "Over $500", "large_purchase", true)
alertLow = CheckBoxItem("Low balance", "Under $200", "low_balance", true)
alertLogin = CheckBoxItem("New device login", "Sign-in from a new device", "new_login", false)
alertCard = CheckBoxItem("Card not present", "Online transactions", "card_not_present", false)
alertButtons = Buttons([saveAlertsBtn])
saveAlertsBtn = Button("Save preferences", null, "primary")
disputeSection = Card([disputeHeader, disputeDialog], "sunk")
disputeHeader = Heading("Transaction issues", "h2")
disputeDialog = DialogBlock("Dispute a transaction", "Start a dispute", "We’ll review your claim and respond within 10 business days.", [disputeForm])
disputeForm = Form("dispute", disputeButtons, [disputeTxField, disputeReasonField, disputeDetailsField])
disputeTxField = FormControl("Transaction", disputeTxSelect)
disputeTxSelect = Select("dispute_tx", [disputeTx1, disputeTx2], "Select transaction")
disputeTx1 = SelectItem("whole-foods", "Whole Foods – $86.20")
disputeTx2 = SelectItem("shell", "Shell – $45.00")
disputeReasonField = FormControl("Reason", disputeReasonSelect)
disputeReasonSelect = Select("dispute_reason", [reason1, reason2, reason3], "Select a reason")
reason1 = SelectItem("unauthorized", "Unauthorized charge")
reason2 = SelectItem("duplicate", "Duplicate charge")
reason3 = SelectItem("wrong-amount", "Wrong amount")
disputeDetailsField = FormControl("Details", disputeDetailsArea)
disputeDetailsArea = TextArea("details", "Describe what happened", 4)
disputeButtons = Buttons([disputeSubmitBtn])
disputeSubmitBtn = Button("Submit dispute", null, "primary")
followUp = FollowUpBlock([follow1, follow2, follow3])
follow1 = FollowUpItem("Show latest statement")
follow2 = FollowUpItem("Pay credit card balance")
follow3 = FollowUpItem("What transactions were flagged?")