feat(edit-transaction): edit modal with notes, inline tags, and split management

- New EditTransactionModal with scrollable body (sticky header/footer)
- Statement transactions: read-only core fields; manual transactions: editable date/amount/description
- Override fields for all: merchant, category, type, notes (textarea)
- InlineTags sub-component: add/remove tags without dropdown clipping issues
- Live split display via useTransactionSplits, opens SplitModal for editing
- PATCH /api/transactions/:id extended for description/amount/transaction_date (manual only)
- Transactions page: edit button per row, notes shown below description in italic

src/app/api/transactions/[id]/route.ts

@@ -23,13 +23,44 @@ export async function PATCH(
   const transactionId = Number(id);
   const body = await req.json();
 
-  const { category, merchant_normalized, notes, transaction_type } = body as {
+  const { category, merchant_normalized, notes, transaction_type, my_share_percent, description, amount, transaction_date } = body as {
     category?: string;
     merchant_normalized?: string;
     notes?: string;
     transaction_type?: string;
+    my_share_percent?: number | null;
+    description?: string;
+    amount?: number;
+    transaction_date?: string;
   };
 
+  if (my_share_percent !== undefined && my_share_percent !== null) {
+    if (typeof my_share_percent !== "number" || my_share_percent <= 0 || my_share_percent > 100) {
+      return NextResponse.json({ error: "my_share_percent must be between 1 and 100" }, { status: 400 });
+    }
+  }
+
+  // Direct field edits — only allowed for manual transactions (statement_id IS NULL)
+  const directFields = [description, amount, transaction_date].filter((v) => v !== undefined);
+  if (directFields.length > 0) {
+    const txRows = await queryRaw<{ statement_id: number | null }>(
+      `SELECT statement_id FROM transactions WHERE id = $1`,
+      [transactionId]
+    );
+    if (!txRows[0]?.statement_id) {
+      const setClauses: string[] = [];
+      const params: unknown[] = [];
+      let idx = 1;
+      if (description !== undefined) { setClauses.push(`description = $${idx++}`); params.push(description); }
+      if (amount !== undefined) { setClauses.push(`amount = $${idx++}`); params.push(amount); }
+      if (transaction_date !== undefined) { setClauses.push(`transaction_date = $${idx++}`); params.push(transaction_date); }
+      if (setClauses.length) {
+        params.push(transactionId);
+        await queryRaw(`UPDATE transactions SET ${setClauses.join(", ")} WHERE id = $${idx}`, params);
+      }
+    }
+  }
+
   // transaction_type is a direct correction on the transactions table
   if (transaction_type !== undefined) {
     if (!VALID_TYPES.includes(transaction_type)) {
@@ -41,8 +72,8 @@ export async function PATCH(
     );
   }
 
-  // category/merchant/notes go through the overrides table
+  // category/merchant/notes/my_share_percent go through the overrides table
-  const hasOverride = category !== undefined || merchant_normalized !== undefined || notes !== undefined;
+  const hasOverride = category !== undefined || merchant_normalized !== undefined || notes !== undefined || my_share_percent !== undefined;
   if (!hasOverride) {
     return NextResponse.json({ ok: true });
   }
@@ -51,6 +82,7 @@ export async function PATCH(
   if (category !== undefined) data.category_override = category;
   if (merchant_normalized !== undefined) data.merchant_normalized = merchant_normalized;
   if (notes !== undefined) data.notes = notes;
+  if (my_share_percent !== undefined) data.my_share_percent = my_share_percent;
 
   const override = await prisma.transaction_overrides.upsert({
     where: { transaction_id: transactionId },
@@ -60,6 +92,7 @@ export async function PATCH(
       category_override: category || null,
       merchant_normalized: merchant_normalized || null,
       notes: notes || null,
+      my_share_percent: my_share_percent != null ? String(my_share_percent) : null,
     },
   });
 

src/app/transactions/page.tsx

@@ -6,6 +6,9 @@ import { useTransactions, useBanks, useUpdateTransaction, useBulkAction, useTags
 import { CATEGORIES, formatCategory } from "@/lib/categories";
 import { SplitModal } from "@/components/split-modal";
 import { TagPicker } from "@/components/tag-picker";
+import { AddTransactionModal } from "@/components/add-transaction-modal";
+import { EditTransactionModal } from "@/components/edit-transaction-modal";
+import type { TransactionRow } from "@/lib/queries";
 
 function formatDate(d: string) {
   return new Date(d).toLocaleDateString("en-AU", {
@@ -232,6 +235,8 @@ function TransactionsContent() {
   const [bulkCategory, setBulkCategory] = useState("");
   const [bulkTagId, setBulkTagId] = useState("");
   const [splitModal, setSplitModal] = useState<{ transactionId?: number; transactionIds?: number[]; amount?: number; description: string; merchant?: string } | null>(null);
+  const [addModal, setAddModal] = useState<{ prefill?: Parameters<typeof AddTransactionModal>[0]["prefill"]; title?: string } | null>(null);
+  const [editModal, setEditModal] = useState<TransactionRow | null>(null);
   const [rulePrompt, setRulePrompt] = useState<{
     tx: { id: number; effective_merchant: string; description: string; bank_name: string };
     field: "category" | "merchant";
@@ -283,7 +288,15 @@ function TransactionsContent() {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold mb-4">Transactions</h2>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-semibold">Transactions</h2>
+        <button
+          onClick={() => setAddModal({})}
+          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium"
+        >
+          + Add Transaction
+        </button>
+      </div>
 
       {/* Statement context banner */}
       {filters.statement_id && statementInfo && (
@@ -483,7 +496,12 @@ function TransactionsContent() {
                     />
                   </td>
                   <td className="p-2 whitespace-nowrap">{formatDate(t.transaction_date)}</td>
-                  <td className="p-2 max-w-xs truncate" title={t.description}>{t.description}</td>
+                  <td className="p-2 max-w-xs">
+                    <p className="truncate" title={t.description}>{t.description}</p>
+                    {t.notes && (
+                      <p className="truncate text-xs text-zinc-500 italic mt-0.5" title={t.notes}>{t.notes}</p>
+                    )}
+                  </td>
                   <td className="p-2 max-w-[150px]">
                     <div className="relative">
                       <InlineEdit
@@ -540,13 +558,54 @@ function TransactionsContent() {
                       <TagPicker transactionId={t.id} currentTags={t.tags ?? []} />
                     </div>
                   </td>
-                  <td className="p-2">
+                  <td className="p-2 whitespace-nowrap">
+                    <div className="flex items-center gap-1 flex-wrap">
+                      {t.splits?.filter((s) => s.name !== "Me").map((s) => (
+                        <span
+                          key={s.participant_id}
+                          className={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
+                            s.settled ? "bg-zinc-800 text-zinc-500" : "bg-amber-900/40 text-amber-300"
+                          }`}
+                          title={`${s.name}: ${s.share_percent}%${s.settled ? " (settled)" : ""}`}
+                        >
+                          {s.name} {s.share_percent}%
+                        </span>
+                      ))}
+                      <button
+                        onClick={() => setSplitModal({ transactionId: t.id, amount: t.amount, description: t.description, merchant: t.effective_merchant || undefined, transactionIds: undefined })}
+                        className={`text-xs px-2 py-0.5 rounded transition-colors ${
+                          t.splits?.some((s) => s.name !== "Me")
+                            ? "text-amber-400 hover:text-amber-200 hover:bg-zinc-800"
+                            : "text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"
+                        }`}
+                        title="Split this transaction"
+                      >
+                        Split
+                      </button>
+                    </div>
                     <button
-                      onClick={() => setSplitModal({ transactionId: t.id, amount: t.amount, description: t.description, merchant: t.effective_merchant || undefined, transactionIds: undefined })}
+                      onClick={() => setEditModal(t)}
                       className="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-0.5 rounded hover:bg-zinc-800 transition-colors"
-                      title="Split this transaction"
+                      title="Edit this transaction"
                     >
-                      Split
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => setAddModal({
+                        title: "Duplicate Transaction",
+                        prefill: {
+                          date: new Date().toISOString().slice(0, 10),
+                          description: t.description,
+                          amount: t.amount,
+                          transaction_type: t.transaction_type,
+                          merchant_normalized: t.effective_merchant || undefined,
+                          category: t.effective_category || undefined,
+                        },
+                      })}
+                      className="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-0.5 rounded hover:bg-zinc-800 transition-colors"
+                      title="Duplicate this transaction"
+                    >
+                      Dupe
                     </button>
                   </td>
                 </tr>
@@ -568,6 +627,21 @@ function TransactionsContent() {
         />
       )}
 
+      {addModal && (
+        <AddTransactionModal
+          prefill={addModal.prefill}
+          title={addModal.title}
+          onClose={() => setAddModal(null)}
+        />
+      )}
+
+      {editModal && (
+        <EditTransactionModal
+          transaction={editModal}
+          onClose={() => setEditModal(null)}
+        />
+      )}
+
       {rulePrompt && (
         <SaveAsRulePrompt
           tx={rulePrompt.tx}

src/components/edit-transaction-modal.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import { useState } from "react";
+import {
+  useUpdateTransaction,
+  useTags,
+  useAddTransactionTag,
+  useRemoveTransactionTag,
+  useTransactionSplits,
+} from "@/lib/hooks";
+import { SplitModal } from "./split-modal";
+import { CATEGORIES, formatCategory } from "@/lib/categories";
+import type { TransactionRow, TagRow } from "@/lib/queries";
+
+const TRANSACTION_TYPES = ["debit", "credit", "payment", "refund", "fee", "interest", "transfer"];
+const SPEND_TYPES = new Set(["debit", "fee", "interest"]);
+
+function formatAmount(amount: number, type: string) {
+  const formatted = `$${Number(amount).toFixed(2)}`;
+  return SPEND_TYPES.has(type) ? formatted : `+${formatted}`;
+}
+
+function InlineTags({ transactionId, initialTags }: { transactionId: number; initialTags: TagRow[] }) {
+  const { data: allTags = [] } = useTags();
+  const addTag = useAddTransactionTag();
+  const removeTag = useRemoveTransactionTag();
+  const [tags, setTags] = useState<TagRow[]>(initialTags);
+  const [showPicker, setShowPicker] = useState(false);
+
+  const available = allTags.filter((t) => !tags.find((ct) => ct.id === t.id));
+
+  return (
+    <div>
+      <div className="flex flex-wrap gap-1 items-center">
+        {tags.map((tag) => (
+          <span
+            key={tag.id}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium text-white"
+            style={{ backgroundColor: tag.color + "99" }}
+          >
+            {tag.name}
+            <button
+              type="button"
+              onClick={() => {
+                removeTag.mutate({ transactionId, tagId: tag.id });
+                setTags((prev) => prev.filter((t) => t.id !== tag.id));
+              }}
+              className="ml-0.5 text-white/60 hover:text-white leading-none"
+            >
+              ×
+            </button>
+          </span>
+        ))}
+        {available.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setShowPicker((v) => !v)}
+            className="text-xs text-zinc-500 hover:text-zinc-300 px-1.5 py-0.5 rounded hover:bg-zinc-800"
+          >
+            + Add tag
+          </button>
+        )}
+      </div>
+      {showPicker && (
+        <div className="mt-1.5 flex flex-wrap gap-1">
+          {available.map((tag) => (
+            <button
+              key={tag.id}
+              type="button"
+              onClick={() => {
+                addTag.mutate({ transactionId, tagId: tag.id });
+                setTags((prev) => [...prev, tag]);
+                setShowPicker(false);
+              }}
+              className="px-2 py-0.5 rounded text-xs font-medium text-white hover:brightness-125"
+              style={{ backgroundColor: tag.color + "66" }}
+            >
+              {tag.name}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function EditTransactionModal({
+  transaction,
+  onClose,
+}: {
+  transaction: TransactionRow;
+  onClose: () => void;
+}) {
+  const isManual = !transaction.statement_id;
+  const updateTxn = useUpdateTransaction();
+
+  // Editable override fields
+  const [merchant, setMerchant] = useState(transaction.merchant_override ?? transaction.merchant_normalized ?? "");
+  const [category, setCategory] = useState(transaction.effective_category ?? "");
+  const [type, setType] = useState(transaction.transaction_type);
+  const [notes, setNotes] = useState(transaction.notes ?? "");
+
+  // Manual-only direct fields
+  const [date, setDate] = useState(transaction.transaction_date?.slice(0, 10) ?? "");
+  const [description, setDescription] = useState(transaction.description);
+  const [amount, setAmount] = useState(String(transaction.amount));
+
+  // Splits — live via hook so they refresh after SplitModal saves
+  const { data: liveSplits = [] } = useTransactionSplits(transaction.id);
+
+  const [showSplitModal, setShowSplitModal] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSave() {
+    setError("");
+    try {
+      const patch: Parameters<typeof updateTxn.mutateAsync>[0] = { id: transaction.id };
+
+      // Override fields (always)
+      if (merchant !== (transaction.merchant_override ?? transaction.merchant_normalized ?? ""))
+        patch.merchant_normalized = merchant;
+      if (category !== (transaction.effective_category ?? ""))
+        patch.category = category;
+      if (type !== transaction.transaction_type)
+        patch.transaction_type = type;
+      if (notes !== (transaction.notes ?? ""))
+        patch.notes = notes;
+
+      // Direct fields (manual only)
+      if (isManual) {
+        if (date !== transaction.transaction_date?.slice(0, 10))
+          patch.transaction_date = date;
+        if (description !== transaction.description)
+          patch.description = description;
+        if (parseFloat(amount) !== transaction.amount)
+          patch.amount = parseFloat(amount);
+      }
+
+      await updateTxn.mutateAsync(patch);
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save");
+    }
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60" onClick={onClose}>
+        <div
+          className="bg-zinc-900 border border-zinc-700 rounded-xl w-full max-w-lg mx-4 shadow-2xl flex flex-col max-h-[90vh]"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="px-6 pt-5 pb-4 border-b border-zinc-800">
+            <h3 className="font-semibold text-sm text-zinc-300">Edit Transaction</h3>
+            <p className="text-xs text-zinc-500 mt-0.5">{transaction.bank_name}</p>
+          </div>
+
+          <div className="overflow-y-auto flex-1 px-6 py-4 space-y-5">
+
+            {/* Core fields — read-only for statement, editable for manual */}
+            {isManual ? (
+              <div className="space-y-3">
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs text-zinc-500 mb-1">Date</label>
+                    <input
+                      type="date"
+                      value={date}
+                      onChange={(e) => setDate(e.target.value)}
+                      className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-zinc-500 mb-1">Amount</label>
+                    <input
+                      type="number"
+                      step="0.01"
+                      value={amount}
+                      onChange={(e) => setAmount(e.target.value)}
+                      className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs text-zinc-500 mb-1">Description</label>
+                  <input
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="bg-zinc-800/50 rounded-lg px-3 py-2.5 space-y-1">
+                <p className="text-sm font-medium">{transaction.description}</p>
+                <p className={`text-sm font-mono ${SPEND_TYPES.has(transaction.transaction_type) ? "text-red-400" : "text-green-400"}`}>
+                  {formatAmount(transaction.amount, transaction.transaction_type)}
+                </p>
+                <p className="text-xs text-zinc-500">
+                  {new Date(transaction.transaction_date).toLocaleDateString("en-AU", { day: "numeric", month: "short", year: "numeric" })}
+                </p>
+              </div>
+            )}
+
+            {/* Override fields */}
+            <div className="space-y-3">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs text-zinc-500 mb-1">Type</label>
+                  <select
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                  >
+                    {TRANSACTION_TYPES.map((t) => (
+                      <option key={t} value={t}>{t}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs text-zinc-500 mb-1">Category</label>
+                  <select
+                    value={category}
+                    onChange={(e) => setCategory(e.target.value)}
+                    className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                  >
+                    <option value="">— none —</option>
+                    {CATEGORIES.map((c) => (
+                      <option key={c} value={c}>{formatCategory(c)}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs text-zinc-500 mb-1">Merchant</label>
+                <input
+                  value={merchant}
+                  onChange={(e) => setMerchant(e.target.value)}
+                  placeholder="Normalized merchant name"
+                  className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs text-zinc-500 mb-1">Notes</label>
+                <textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  rows={3}
+                  placeholder="Additional context about this transaction…"
+                  className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm resize-none"
+                />
+              </div>
+            </div>
+
+            {/* Tags */}
+            <div>
+              <p className="text-xs text-zinc-500 mb-1.5">Tags</p>
+              <InlineTags transactionId={transaction.id} initialTags={transaction.tags ?? []} />
+            </div>
+
+            {/* Splits */}
+            <div>
+              <div className="flex items-center justify-between mb-1.5">
+                <p className="text-xs text-zinc-500">Splits</p>
+                <button
+                  type="button"
+                  onClick={() => setShowSplitModal(true)}
+                  className="text-xs text-blue-400 hover:text-blue-300"
+                >
+                  {liveSplits.length > 0 ? "Edit splits" : "Add split"}
+                </button>
+              </div>
+              {liveSplits.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {liveSplits.map((s: { participant_id: number; name: string; share_percent: number; settled: boolean }) => (
+                    <span
+                      key={s.participant_id}
+                      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
+                        s.settled ? "bg-zinc-800 text-zinc-500" : "bg-amber-900/40 text-amber-300"
+                      }`}
+                    >
+                      {s.name} {s.share_percent}%
+                      {s.settled && <span className="text-emerald-500">✓</span>}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-zinc-600 italic">No splits</p>
+              )}
+            </div>
+
+          </div>
+
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-zinc-800 flex gap-2">
+            {error && <p className="text-red-400 text-xs flex-1 self-center">{error}</p>}
+            <div className="flex gap-2 ml-auto">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={updateTxn.isPending}
+                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
+              >
+                {updateTxn.isPending ? "Saving…" : "Save"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {showSplitModal && (
+        <SplitModal
+          transactionId={transaction.id}
+          amount={transaction.amount}
+          description={transaction.description}
+          merchant={transaction.effective_merchant || undefined}
+          onClose={() => setShowSplitModal(false)}
+        />
+      )}
+    </>
+  );
+}