# Personal Budget Check

<Card title="Month selector" subtitle="Choose a month to review">
<Select label="Select month" name="month" options="January 2025 | February 2025 | March 2025 | April 2025 | May 2025 | June 2025" value="March 2025" />
</Card>

<Card title="March 2025 overview">
<Columns>
<Stat label="Total spent" value="$2,847" change="Budget: $3,500" tone="info" icon="currency-dollar" />
<Stat label="Remaining" value="$653" change="18.7% left" tone="success" icon="wallet" />
<Stat label="Largest expense" value="$420" change="Rent payment" tone="warning" icon="receipt" />
</Columns>
</Card>

<Card title="Spending vs Budget">
<Progress value="2847" max="3500" label="Spent $2,847 of $3,500 budget" tone="info" />
</Card>

<Card title="Spending by category">
<Chart type="pie" title="Category breakdown">
| Category | Amount |
|---|---|
| Housing | 1200 |
| Food | 680 |
| Transport | 340 |
| Utilities | 280 |
| Entertainment | 180 |
| Shopping | 167 |
</Chart>
</Card>

<Card title="Largest expense this month">
<Callout tone="warning" title="$420 — Rent payment">
Paid on March 1st. This is your single largest transaction for March 2025.
</Callout>
</Card>

<Card title="Add an expense" subtitle="Record a new transaction">
<Form name="add-expense">
<Input label="Description" name="description" placeholder="e.g., Groceries at Whole Foods" required="true" />
<Input label="Amount" name="amount" type="number" placeholder="0.00" step="0.01" min="0.01" required="true" />
<Select label="Category" name="category" placeholder="Choose category" options="Housing | Food | Transport | Utilities | Entertainment | Shopping | Other" required="true" />
<Date label="Date" name="date" value="2025-03-15" required="true" />
<Button>Add expense</Button>
<Button variant="secondary">Cancel</Button>
</Form>
</Card>