Stage 3: Complete expense pages + reports

- 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>
2026-07-15 18:14:14 +01:00
parent 41937ffc15
commit 7cb8d9b5a6
8 changed files with 488 additions and 1 deletions
@@ -0,0 +1,103 @@
+'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>
+  );
+}