From e8c23405e79cecc8951d0bb248a5fd240cd57120 Mon Sep 17 00:00:00 2001
From: Vijayakanth Manoharan <vijayakanthmanoharan@gmail.com>
Date: Mon, 23 Mar 2026 17:20:13 -0400
Subject: [PATCH] Add expense editing with inline form and PATCH API route

- Add updateExpense() to lib/expenses.ts
- Add PATCH /expenses/:id route with validation and P2025 not-found handling
- Edit button on each expense card pre-fills form; cancel restores add mode
- Submit dynamically PATCHes or POSTs depending on edit state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/expenses/[id]/route.ts       | 34 ++++++++++-
 src/components/expense-workspace.tsx | 90 +++++++++++++++++++++++-----
 src/lib/expenses.ts                  | 15 +++++
 3 files changed, 123 insertions(+), 16 deletions(-)

diff --git a/src/app/expenses/[id]/route.ts b/src/app/expenses/[id]/route.ts
index 24cff41..3fe2bd0 100644
--- a/src/app/expenses/[id]/route.ts
+++ b/src/app/expenses/[id]/route.ts
@@ -1,12 +1,44 @@
 import { Prisma } from "@prisma/client";
 import { NextResponse } from "next/server";
 
-import { removeExpense } from "@/lib/expenses";
+import { removeExpense, updateExpense } from "@/lib/expenses";
+import { expenseInputSchema } from "@/lib/validation";
 
 type RouteContext = {
   params: Promise<{ id: string }>;
 };
 
+export async function PATCH(request: Request, context: RouteContext) {
+  const { id } = await context.params;
+  const payload = await request.json();
+  const parsed = expenseInputSchema.safeParse(payload);
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: parsed.error.issues[0]?.message ?? "Invalid expense payload." },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const expense = await updateExpense(id, {
+      title: parsed.data.title,
+      amountCents: parsed.data.amount,
+      date: parsed.data.date,
+      category: parsed.data.category,
+    });
+    return NextResponse.json({ expense });
+  } catch (error) {
+    if (
+      error instanceof Prisma.PrismaClientKnownRequestError &&
+      error.code === "P2025"
+    ) {
+      return NextResponse.json({ error: "Expense not found." }, { status: 404 });
+    }
+    throw error;
+  }
+}
+
 export async function DELETE(_: Request, context: RouteContext) {
   const { id } = await context.params;
 
diff --git a/src/components/expense-workspace.tsx b/src/components/expense-workspace.tsx
index 0a7856d..246d23f 100644
--- a/src/components/expense-workspace.tsx
+++ b/src/components/expense-workspace.tsx
@@ -43,6 +43,7 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
     date: new Date().toISOString().slice(0, 10),
     category: (categoryOptions[0]?.value as CategoryValue | undefined) ?? "MISC",
   });
+  const [editingId, setEditingId] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [suggestionMessage, setSuggestionMessage] = useState<string | null>(null);
@@ -96,6 +97,34 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
     setNeedsSuggestionConfirmation(suggestion.requiresConfirmation);
   }
 
+  function handleEdit(expense: ExpenseRecord) {
+    setEditingId(expense.id);
+    setFormState({
+      title: expense.title,
+      amount: (expense.amountCents / 100).toFixed(2),
+      date: expense.date,
+      category: expense.category,
+    });
+    setSuggestionMessage(null);
+    setNeedsSuggestionConfirmation(false);
+    setLastSuggestedMerchant("");
+    setError(null);
+  }
+
+  function handleCancelEdit() {
+    setEditingId(null);
+    setFormState({
+      title: "",
+      amount: "",
+      date: new Date().toISOString().slice(0, 10),
+      category: (categoryOptions[0]?.value as CategoryValue | undefined) ?? "MISC",
+    });
+    setSuggestionMessage(null);
+    setNeedsSuggestionConfirmation(false);
+    setLastSuggestedMerchant("");
+    setError(null);
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
@@ -107,8 +136,9 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
     setBusy(true);
     setError(null);
 
-    const response = await fetch("/expenses", {
-      method: "POST",
+    const isEditing = editingId !== null;
+    const response = await fetch(isEditing ? `/expenses/${editingId}` : "/expenses", {
+      method: isEditing ? "PATCH" : "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(formState),
     });
@@ -117,12 +147,20 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
 
     if (!response.ok) {
       const payload = (await response.json().catch(() => null)) as { error?: string } | null;
-      setError(payload?.error ?? "Could not save the expense.");
+      setError(payload?.error ?? (isEditing ? "Could not update the expense." : "Could not save the expense."));
       return;
     }
 
     const payload = (await response.json()) as { expense: ExpenseRecord };
-    setExpenses((current) => [payload.expense, ...current]);
+
+    if (isEditing) {
+      setExpenses((current) =>
+        current.map((e) => (e.id === editingId ? payload.expense : e)),
+      );
+      setEditingId(null);
+    } else {
+      setExpenses((current) => [payload.expense, ...current]);
+    }
 
     setFormState((current) => ({ ...current, title: "", amount: "" }));
     setSuggestionMessage(null);
@@ -151,8 +189,12 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
       <section className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-[0_24px_60px_rgba(120,90,50,0.08)]">
         <div className="mb-6 flex items-center justify-between gap-4">
           <div>
-            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700">Daily entry</p>
-            <h2 className="mt-2 text-3xl font-semibold text-stone-950">Log today&apos;s spend in seconds</h2>
+            <p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700">
+              {editingId ? "Edit expense" : "Daily entry"}
+            </p>
+            <h2 className="mt-2 text-3xl font-semibold text-stone-950">
+              {editingId ? "Update this entry" : "Log today\u2019s spend in seconds"}
+            </h2>
           </div>
           <div className="rounded-2xl bg-amber-50 px-4 py-3 text-right">
             <p className="text-xs uppercase tracking-[0.2em] text-amber-700">Current list total</p>
@@ -235,13 +277,24 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
 
           <div className="md:col-span-2 flex items-center justify-between gap-3">
             <p className="text-sm text-rose-700">{error}</p>
-            <button
-              type="submit"
-              disabled={busy}
-              className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:bg-stone-400"
-            >
-              {busy ? "Saving..." : "Save expense"}
-            </button>
+            <div className="flex gap-2">
+              {editingId ? (
+                <button
+                  type="button"
+                  onClick={handleCancelEdit}
+                  className="rounded-full border border-stone-300 px-5 py-3 text-sm font-semibold text-stone-700 transition hover:border-stone-900"
+                >
+                  Cancel
+                </button>
+              ) : null}
+              <button
+                type="submit"
+                disabled={busy}
+                className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:bg-stone-400"
+              >
+                {busy ? (editingId ? "Updating..." : "Saving...") : editingId ? "Update expense" : "Save expense"}
+              </button>
+            </div>
           </div>
         </form>
       </section>
@@ -269,8 +322,15 @@ export function ExpenseWorkspace({ categoryOptions }: Props) {
                     {expense.date} · {getCategoryLabel(expense.category)}
                   </p>
                 </div>
-                <div className="flex items-center gap-4">
-                  <p className="font-semibold text-stone-950">{formatCurrencyFromCents(expense.amountCents)}</p>
+                <div className="flex items-center gap-2">
+                  <p className="mr-2 font-semibold text-stone-950">{formatCurrencyFromCents(expense.amountCents)}</p>
+                  <button
+                    type="button"
+                    onClick={() => handleEdit(expense)}
+                    className="rounded-full border border-stone-300 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-stone-600 transition hover:border-stone-900 hover:text-stone-900"
+                  >
+                    Edit
+                  </button>
                   <button
                     type="button"
                     onClick={() => handleDelete(expense.id)}
diff --git a/src/lib/expenses.ts b/src/lib/expenses.ts
index c3529dc..d959066 100644
--- a/src/lib/expenses.ts
+++ b/src/lib/expenses.ts
@@ -29,6 +29,21 @@ export async function removeExpense(id: string) {
   return db.expense.delete({ where: { id } });
 }
 
+export async function updateExpense(
+  id: string,
+  input: { title: string; amountCents: number; date: string; category: Category },
+) {
+  return db.expense.update({
+    where: { id },
+    data: {
+      title: input.title.trim(),
+      amountCents: input.amountCents,
+      date: input.date,
+      category: input.category,
+    },
+  });
+}
+
 export async function getExpenseDashboardPreview(month = getCurrentMonthKey()) {
   const expenses = await listExpenses();
   const monthExpenses = expenses.filter((expense) => isDateInMonth(expense.date, month));