# Personal Budget Check

<Card title="June 2025 Overview">
<Columns>
<Stat label="Budget" value="$2,500" icon="wallet" />
<Stat label="Spent" value="$1,847.32" icon="shopping-cart" tone="warning" change="+12.4% vs May" />
<Stat label="Remaining" value="$652.68" icon="piggy-bank" tone="success" />
</Columns>

<Progress value="1847.32" max="2500" label="74% of budget used" tone="warning" />

<Callout tone="warning" title="Heads up">You're on pace to exceed your budget by about $180 if spending continues at this rate for the rest of the month.</Callout>
</Card>

<Card title="Spending by category">
<Chart type="donut" title="Where your money went" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Housing | 850.00 |
| Groceries | 342.18 |
| Dining Out | 268.50 |
| Transportation | 156.20 |
| Utilities | 98.44 |
| Entertainment | 72.00 |
| Other | 60.00 |
</Chart>
</Card>

<Card title="Largest expense">
<Callout tone="danger" title="Rent — $850.00">
<Badge tone="danger">46% of total spending</Badge> This single expense accounts for nearly half of what you've spent this month.
</Callout>

<KeyValue title="Details">
| Label | Value |
|---|---|
| Category | Housing |
| Date | June 1, 2025 |
| Paid to | Greenfield Properties |
| Payment method | Checking account |
</KeyValue>
</Card>

<Card title="Monthly comparison">
<Tabs>
<Tab title="June 2025">
<Chart type="line" x="Week" y="Spent ($)">
| Week | Amount |
|---|---|
| Jun 1-7 | 1080.50 |
| Jun 8-14 | 245.20 |
| Jun 15-21 | 312.62 |
| Jun 22-28 | 209.00 |
</Chart>
</Tab>
<Tab title="May 2025">
<Chart type="line" x="Week" y="Spent ($)">
| Week | Amount |
|---|---|
| May 1-7 | 920.15 |
| May 8-14 | 380.42 |
| May 15-21 | 290.18 |
| May 22-28 | 255.30 |
</Chart>
</Tab>
<Tab title="April 2025">
<Chart type="line" x="Week" y="Spent ($)">
| Week | Amount |
|---|---|
| Apr 1-7 | 890.60 |
| Apr 8-14 | 310.75 |
| Apr 15-21 | 275.90 |
| Apr 22-28 | 180.25 |
</Chart>
</Tab>
</Tabs>

<Button variant="secondary" ask="Show me March 2025">View March 2025</Button>
</Card>

<Card title="Add an expense">
<Form name="add-expense">
<Input label="Description" placeholder="e.g. Grocery run at Safeway" required />
<Input label="Amount" type="number" placeholder="0.00" min="0" step="0.01" required hint="In dollars" />
<Select label="Category" options="Housing | Groceries | Dining Out | Transportation | Utilities | Entertainment | Other" placeholder="Choose a category" required />
<Date label="Date" required />
<Input label="Paid to (optional)" placeholder="e.g. Safeway" />
<Select label="Payment method" options="Checking account | Credit card | Cash | Other" placeholder="Choose a method" />
<Checkboxes label="Recurring?" options="Repeat monthly" hint="Check if this happens every month" />
<Button>Add expense</Button>
</Form>
</Card>

<Card title="Quick actions">
<Columns>
<Button variant="primary" ask="Add a new expense">Add expense</Button>
<Button variant="secondary" ask="Show me last month's budget">View previous month</Button>
<Button variant="secondary" ask="Compare my spending across categories">Compare categories</Button>
</Columns>
</Card>

<FollowUps>
- Show me where I can cut back
- What was my biggest expense last month?
- Set a budget alert for next month
</FollowUps>