AndymickandClaude Haiku 4.5
7cb8d9b5a6
- Add Expense CRUD pages (/expenses list, /new form, /[id] detail) + actions - Expense form: date/description/category/amount/receipt, auto-create from purchases - Reports page: 3 tabs (monthly profit, expense breakdown, cash flow) with tables - Add Expenses + Reports to AccountsNav tabs All expense features wired. Reports skeleton ready for data integration. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { createExpense } from '@/app/admin/accounts/expenses/actions';
|
|
|
|
function todayInput() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
export default function ExpenseForm() {
|
|
return (
|
|
<form action={createExpense} className="mt-10 space-y-6 max-w-2xl" encType="multipart/form-data">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="date" className="tag-label mb-2 block">
|
|
Date
|
|
</label>
|
|
<input
|
|
id="date"
|
|
name="date"
|
|
type="date"
|
|
defaultValue={todayInput()}
|
|
required
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="category" className="tag-label mb-2 block">
|
|
Category
|
|
</label>
|
|
<select
|
|
id="category"
|
|
name="category"
|
|
defaultValue="Stock purchases"
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
>
|
|
<option>Stock purchases</option>
|
|
<option>Postage</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="description" className="tag-label mb-2 block">
|
|
Description
|
|
</label>
|
|
<input
|
|
id="description"
|
|
name="description"
|
|
required
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
placeholder="e.g. Monthly internet bill, Royal Mail postage"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="amount" className="tag-label mb-2 block">
|
|
Amount (£)
|
|
</label>
|
|
<input
|
|
id="amount"
|
|
name="amount"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
required
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
placeholder="0.00"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="receipt" className="tag-label mb-2 block">
|
|
Receipt (optional)
|
|
</label>
|
|
<input
|
|
id="receipt"
|
|
name="receipt"
|
|
type="file"
|
|
accept="application/pdf,image/*"
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
/>
|
|
<p className="mt-1 text-xs text-muted">PDF or photo, up to 8 MB.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="notes" className="tag-label mb-2 block">
|
|
Notes (optional)
|
|
</label>
|
|
<input
|
|
id="notes"
|
|
name="notes"
|
|
className="w-full border border-line bg-paper px-3 py-2 text-sm"
|
|
placeholder="Any additional details"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
|
|
Record expense
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|