# Personal Budget Check

<Card title="Budget Overview" subtitle="Select a month to view">
<Columns>
<Select label="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="July 2025" />
</Columns>
</Card>

<Card title="Monthly Budget">
<Columns>
<Stat label="Budget" value="$3,000" icon="wallet" />
<Stat label="Spent" value="$2,147" change="$853 remaining" tone="success" icon="credit-card" />
<Stat label="Progress" value="72%" tone="info" icon="chart-line" />
</Columns>
<Progress value="2147" max="3000" label="Budget used" tone="success" />
</Card>

<Card title="Spending by Category">
<Chart type="donut" title="Category Breakdown" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Housing | 850 |
| Food & Dining | 420 |
| Transportation | 280 |
| Shopping | 195 |
| Entertainment | 150 |
| Utilities | 120 |
| Health | 82 |
| Other | 50 |
</Chart>
</Card>

<Card title="Largest Expense This Month">
<Callout tone="info" title="Rent Payment — $850">
**Category:** Housing  
**Date:** July 1, 2025  
**Payment method:** Bank transfer  
**Recurring:** Yes (monthly)
</Callout>
</Card>

<Card title="Add New Expense">
<Form name="add-expense">
<Columns>
<Input label="Amount" name="amount" type="number" placeholder="0.00" step="0.01" min="0" required="true" />
<Select label="Category" name="category" placeholder="Select category" options="Housing | Food & Dining | Transportation | Shopping | Entertainment | Utilities | Health | Other" required="true" />
</Columns>
<Columns>
<Input label="Description" name="description" placeholder="e.g., Groceries at Whole Foods" required="true" />
<Date label="Date" name="date" value="2025-07-15" required="true" />
</Columns>
<Columns>
<Select label="Payment Method" name="payment" placeholder="Select method" options="Credit Card | Debit Card | Bank Transfer | Cash | Digital Wallet" />
<Switch label="Recurring expense" name="recurring" value="false" hint="Mark if this repeats monthly" />
</Columns>
<Button label="Add Expense" icon="plus" />
<Button variant="secondary" label="Cancel" />
</Form>
</Card>