# Personal budget check

<Columns>
<Card title="This month" subtitle="vs. $2,500 monthly budget">
<Stat label="Total spent" value="$1,860.50" note="Budget: $2,500" icon="chart-line" />
<Progress value="74" max="100" label="$1,860.50 used · 74.4%" tone="info" />
<Stat label="Remaining" value="$639.50" tone="success" icon="wallet" />
</Card>
<Card title="Look at a different month">
<Form name="month-selector">
<Select label="Budget month" name="month" placeholder="Select a month" options="January | February | March | April | May | June | July | August | September | October | November | December" />
<Button>View month</Button>
</Form>
</Card>
</Columns>

<Card title="Spending by category">
<Chart type="donut" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Housing | 900 |
| Food | 350 |
| Transport | 220 |
| Utilities | 180 |
| Entertainment | 160 |
| Other | 50.5 |
</Chart>
</Card>

<Columns>
<Card title="Largest expense">
<Callout tone="danger" title="Rent — $900.00">
Housing · Jan 1 · <Badge tone="danger">48% of monthly spend</Badge>
</Callout>
</Card>
<Card title="Add an expense">
<Form name="add-expense">
<Input label="Description" name="description" placeholder="e.g. Groceries" required />
<Input label="Amount" name="amount" type="number" step="0.01" min="0" placeholder="0.00" required />
<Select label="Category" name="category" placeholder="Choose a category" options="Housing | Food | Transport | Utilities | Entertainment | Other" required />
<Input label="Date" name="date" type="date" />
<Button>Add expense</Button>
<Button variant="secondary">Cancel</Button>
</Form>
</Card>
</Columns>