# Personal banking

Welcome back, Jordan. Here's your money at a glance. <Badge tone="success">All systems normal</Badge>

<Callout tone="info" title="Payment reminder">Your credit card payment of $1,342.10 is due May 12.</Callout>

<Card title="Balances & credit" subtitle="As of May 10, 2025">
<Columns>
<Stat label="Checking" value="$12,480.22" change="+$1,204 this month" icon="bank" />
<Stat label="Savings" value="$28,195.90" change="2.1% APY" icon="piggy-bank" />
<Stat label="Credit card" value="$1,342.10" change="Payment due May 12" icon="credit-card" />
<Stat label="Credit score" value="762" change="Excellent" icon="chart-line" />
</Columns>
</Card>

<Columns>
<Card title="Move money" subtitle="Transfer between your accounts">
<Form name="transfer">
<Input label="Amount" type="number" placeholder="0.00" step="0.01" min="0" />
<Select label="From" placeholder="Choose account" options="Checking •• 4821 | Savings •• 7310 | Credit card •• 2290" />
<Select label="To" placeholder="Choose account" options="Checking •• 4821 | Savings •• 7310 | Credit card •• 2290" />
<Button>Review transfer</Button>
</Form>
</Card>

<Card title="Bills due soon" subtitle="Next 30 days">
| Bill | Due | Amount |
|---|---|---|
| Rent | May 1 | $1,450.00 |
| Electric – SDG&E | May 12 | $96.40 |
| Internet – Xfinity | May 15 | $65.00 |
| Phone – Verizon | May 18 | $58.20 |
</Card>

<Card title="Vacation savings goal" subtitle="Maui trip • November 2025">
<Progress value="6800" max="10000" label="$6,800 of $10,000 saved" />
</Card>
</Columns>

<Columns>
<Card title="Recent transactions" subtitle="Checking account">
| Date | Merchant | Amount |
|---|---|---|
| May 9 | Whole Foods Market | −$86.42 |
| May 8 | Shell Gas | −$54.10 |
| May 8 | Netflix | −$15.99 |
| May 7 | Trader Joe's | −$102.37 |
| May 6 | Acme Corp – Direct deposit | +$2,400.00 |
| May 5 | Uber | −$32.80 |
</Card>

<Card title="Spending by category" subtitle="This month so far">
<Chart type="donut" title="Spending by category">
| Category | Amount |
|---|---|
| Groceries | 428 |
| Dining out | 264 |
| Transport | 217 |
| Utilities | 189 |
| Entertainment | 143 |
| Other | 96 |
</Chart>
</Card>
</Columns>

<Columns>
<Card title="Credit card controls">
<Switch label="Freeze credit line" hint="Blocks new purchases, cash advances and balance transfers" />
</Card>

<Card title="Statements">
<Select label="Statement period" placeholder="Choose a period" options="May 1 – May 31, 2025 | April 1 – April 30, 2025 | March 1 – March 31, 2025 | February 1 – February 28, 2025" />
</Card>

<Card title="Alert preferences" subtitle="Choose what triggers a notification">
<Checkboxes label="Alert me when" options="A purchase is over $500 | An account balance drops below $100 | A bill is due in 3 days | A card-not-present transaction occurs | My credit score changes" />
</Card>
</Columns>

<Card title="Dispute a transaction" subtitle="We'll investigate and credit your account if resolved in your favor">
<Form name="dispute">
<Select label="Transaction" placeholder="Choose a transaction" options="Whole Foods Market — $86.42 | Netflix — $15.99 | Uber — $32.80 | Shell Gas — $54.10" />
<TextArea label="Reason" placeholder="Describe what's wrong with this charge" rows="3" />
<Button>Submit dispute</Button>
</Form>
</Card>

<FollowUps>
- How does my spending this month compare to last month?
- What's driving my credit score up?
- Can I schedule the credit card payment?
</FollowUps>