# Personal Budget Check

<Card title="Month Selector">
<Select label="Select Month" name="month" placeholder="Choose month" options="January 2025 | February 2025 | March 2025 | April 2025 | May 2025 | June 2025 | July 2025 | August 2025 | September 2025 | October 2025 | November 2025 | December 2025" value="January 2025" />
</Card>

<Columns>
<Card title="Budget Overview">
<Stat label="Total Spent" value="$2,847" change="Budget: $3,500" tone="info" icon="currency-dollar" />
<Progress value="2847" max="3500" label="Budget used" tone="info" />
<Stat label="Remaining" value="$653" change="18.7% left" tone="success" icon="wallet" />
</Card>

<Card title="Largest Expense">
<Avatar name="Rent Payment" src="find" subtitle="Housing • Jan 3" />
**$1,450** — Monthly rent payment
<Badge tone="warning">Largest this month</Badge>
</Card>
</Columns>

<Card title="Spending by Category">
<Chart type="donut" title="Category Breakdown" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Housing | 1450 |
| Food & Dining | 520 |
| Transportation | 280 |
| Utilities | 180 |
| Entertainment | 150 |
| Shopping | 120 |
| Other | 147 |
</Chart>
</Card>

<Card title="Add Expense" subtitle="Record a new transaction">
<Form name="add-expense">
<Input label="Amount" name="amount" type="number" placeholder="0.00" step="0.01" min="0.01" required="true" />
<Select label="Category" name="category" placeholder="Select category" options="Housing | Food & Dining | Transportation | Utilities | Entertainment | Shopping | Other" required="true" />
<Input label="Description" name="description" placeholder="e.g., Grocery run, Uber ride" required="true" />
<Date label="Date" name="date" value="2025-01-15" required="true" />
<Button>Add Expense</Button>
<Button variant="secondary">Cancel</Button>
</Form>
</Card>

<FollowUps>
- Show me spending trends over the last 6 months
- Set budget alerts for categories
- Export this month's data to CSV
</FollowUps>