Upload statements and edit transactions from the browser

Two browser-facing additions that mirror the CLI workflow:

Upload: a new /upload page with a drop zone and a multi-file picker
posts every selected file to a new /api/upload/ endpoint, which
dispatches by extension -- .pdf goes through pdfplumber and the
statement importer, .csv goes through the Degiro importer. Each file
is processed independently so one bad input cannot abort the batch,
and the per-file results are rendered as coloured cards (created /
skipped / ignored counts, or an error message).

Edit: every row on the Transactions page now has an inline "edit"
button that opens a modal with date, description, amount, balance and
a grouped category dropdown. Saving PATCHes /api/transactions/<id>/
with the new shape and refreshes the page in place. The serializer
exposes category_id as the writable handle while keeping the embedded
brief category for read responses, and a flat /api/categories/
endpoint feeds the dropdown.

Author: xhico

finance/api.py

@@ -7,17 +7,21 @@
 cashflow, accounts, balance snapshots and a filterable transactions list.
 """
 
+import tempfile
 from datetime import date
 
 from django.db.models import Q, Sum
 from django.db.models.functions import TruncMonth
-from rest_framework.generics import ListAPIView
+from rest_framework.generics import ListAPIView, RetrieveUpdateAPIView
 from rest_framework.pagination import PageNumberPagination
+from rest_framework.parsers import MultiPartParser
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
 from finance.models import Account, BalanceSnapshot, Category, PortfolioSnapshot, StatementImport, Transaction
-from finance.serializers import TransactionSerializer
+from finance.parsers import extract_text
+from finance.serializers import CategoryBriefSerializer, TransactionSerializer
+from finance.services import import_degiro_csv, import_statement
 
 
 def _quarter(month):
@@ -627,3 +631,115 @@ def get_queryset(self):
             qs = qs.filter(category__isnull=True)
 
         return qs
+
+
+class TransactionDetailView(RetrieveUpdateAPIView):
+    """
+    Read or update a single transaction.
+
+    - GET returns the same shape as the list view (embedded account/category)
+    - PATCH accepts date, value_date, description, amount, balance, category_id
+    """
+
+    queryset = Transaction.objects.select_related("account", "category")
+    serializer_class = TransactionSerializer
+
+
+class CategoryListView(ListAPIView):
+    """
+    Flat list of categories for the edit dropdown.
+
+    - Ordered by kind then name
+    - Not paginated; the catalogue is small
+    """
+
+    queryset = Category.objects.all().order_by("kind", "name")
+    serializer_class = CategoryBriefSerializer
+    pagination_class = None
+
+
+def _process_uploaded_file(uploaded):
+    """
+    Run the right importer for one uploaded file based on its extension.
+
+    Args:
+        uploaded (UploadedFile): The file from request.FILES
+
+    Returns:
+        dict: A per-file result row including the filename, the importer used
+        and the counts the importer reports. On failure the dict carries an
+        "error" key with a readable message instead.
+    """
+
+    name = uploaded.name
+    lower = name.lower()
+
+    # Bank-statement PDFs go through pdfplumber, so they need a real file on
+    # disk; the CSV is small and decodes fine straight from memory.
+    if lower.endswith(".pdf"):
+        with tempfile.NamedTemporaryFile(suffix=".pdf") as tmp:
+            for chunk in uploaded.chunks():
+                tmp.write(chunk)
+            tmp.flush()
+            text = extract_text(tmp.name)
+        result = import_statement(text, source_file=name)
+        return {
+            "file": name,
+            "type": "statement",
+            "created": result.created,
+            "skipped": result.skipped,
+            "ignored": result.ignored,
+            "accounts": [a.iban for a in result.accounts],
+        }
+
+    if lower.endswith(".csv"):
+        text = uploaded.read().decode("utf-8")
+        result = import_degiro_csv(text, source_file=name)
+        return {
+            "file": name,
+            "type": "degiro_csv",
+            "created": result["created"],
+            "skipped": result["skipped"],
+            "movements": result["movements"],
+        }
+
+    return {"file": name, "error": "Unsupported file type (use .pdf or .csv)"}
+
+
+class UploadView(APIView):
+    """
+    Accept one or more bank-statement PDFs and/or Degiro CSVs.
+
+    - Dispatches by extension: .pdf -> import_statement, .csv -> import_degiro_csv
+    - Each file is processed independently so one bad file does not abort the batch
+    - Returns a per-file result list with counts (or an error message)
+    """
+
+    parser_classes = [MultiPartParser]
+
+    def post(self, request):
+        """
+        Process every uploaded file and report per-file results.
+
+        Args:
+            request (Request): The incoming multipart request; expects one or
+                more files in the "files" field
+
+        Returns:
+            Response: {"results": [...]} with one entry per file
+        """
+
+        uploads = request.FILES.getlist("files")
+        if not uploads:
+            return Response({"results": [], "error": "No files in the request"}, status=400)
+
+        results = []
+        for uploaded in uploads:
+            try:
+                results.append(_process_uploaded_file(uploaded))
+            except Exception as exc:  # noqa: BLE001 -- surface any parser/import error to the caller
+                # We want a single bad file to fail loudly without taking down
+                # the rest of the batch, so the exception is caught and
+                # returned as part of that file's result row.
+                results.append({"file": uploaded.name, "error": str(exc)})
+        return Response({"results": results})

finance/page_urls.py

@@ -17,4 +17,5 @@
     path("investments/", views.investments, name="investments"),
     path("accounts/", views.accounts, name="accounts"),
     path("transactions/", views.transactions, name="transactions"),
+    path("upload/", views.upload, name="upload"),
 ]

finance/serializers.py

@@ -35,12 +35,22 @@ class TransactionSerializer(serializers.ModelSerializer):
     """
     Serializer for a single transaction, with embedded account and category.
 
-    - Used by the transactions list endpoint
-    - Embeds related rows so the frontend renders without extra requests
+    - Used by the transactions list endpoint and the detail PATCH endpoint
+    - Embeds the related account and category as read-only nested objects so
+      the frontend renders without extra requests
+    - Exposes category_id as the writable handle for changing the category
     """
 
     account = AccountBriefSerializer(read_only=True)
     category = CategoryBriefSerializer(read_only=True)
+    # Writable category by primary key; null clears the category
+    category_id = serializers.PrimaryKeyRelatedField(
+        source="category",
+        queryset=Category.objects.all(),
+        write_only=True,
+        allow_null=True,
+        required=False,
+    )
 
     class Meta:
         model = Transaction
@@ -53,5 +63,6 @@ class Meta:
             "balance",
             "account",
             "category",
+            "category_id",
             "statement_id",
         )

finance/templates/finance/base.html

@@ -54,6 +54,7 @@
         <a href="{% url 'pages:investments' %}"  class="{% if request.resolver_match.url_name == 'investments' %}is-active{% endif %}">Investments</a>
         <a href="{% url 'pages:accounts' %}"     class="{% if request.resolver_match.url_name == 'accounts' %}is-active{% endif %}">Accounts</a>
         <a href="{% url 'pages:transactions' %}" class="{% if request.resolver_match.url_name == 'transactions' %}is-active{% endif %}">Transactions</a>
+        <a href="{% url 'pages:upload' %}" class="{% if request.resolver_match.url_name == 'upload' %}is-active{% endif %}">Upload</a>
       </nav>
       <div class="flex items-center gap-2 shrink-0">
         <button type="button" class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">

finance/templates/finance/transactions.html

@@ -52,18 +52,139 @@ <h1 class="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-10
       <tr>
         <th>Date</th><th>Account</th><th>Description</th>
         <th>Category</th><th class="num">Amount</th><th class="num">Balance</th>
+        <th></th>
       </tr>
     </thead>
-    <tbody id="txn-tbody"><tr><td colspan="6" class="empty">Loading…</td></tr></tbody>
+    <tbody id="txn-tbody"><tr><td colspan="7" class="empty">Loading…</td></tr></tbody>
   </table>
   <div class="flex items-center justify-end gap-2 p-3 border-t border-zinc-100 bg-zinc-50/70">
     <button type="button" class="btn-ghost" id="prev-page" onclick="window.loadTxns(window.currentPage - 1)">‹ Prev</button>
     <button type="button" class="btn-ghost" id="next-page" onclick="window.loadTxns(window.currentPage + 1)">Next ›</button>
   </div>
 </div>
 
+<!-- Edit modal: hidden until a row's "edit" button is clicked -->
+<div id="edit-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-zinc-900/60">
+  <div class="bg-white dark:bg-zinc-900 rounded-xl shadow-xl w-full max-w-md mx-4 p-5">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Edit transaction</h2>
+      <button type="button" id="edit-close" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100">✕</button>
+    </div>
+    <form id="edit-form" class="grid gap-3">
+      <input type="hidden" name="id">
+      <label class="filter-field">Date
+        <input name="date" type="date" required>
+      </label>
+      <label class="filter-field">Description
+        <input name="description" type="text" required>
+      </label>
+      <div class="grid grid-cols-2 gap-3">
+        <label class="filter-field">Amount
+          <input name="amount" type="number" step="0.01" required>
+        </label>
+        <label class="filter-field">Balance
+          <input name="balance" type="number" step="0.01">
+        </label>
+      </div>
+      <label class="filter-field">Category
+        <select name="category_id">
+          <option value="">— Uncategorised —</option>
+        </select>
+      </label>
+      <div id="edit-error" class="text-sm text-rose-600 hidden"></div>
+      <div class="flex items-center justify-end gap-2 mt-2">
+        <button type="button" id="edit-cancel" class="px-3 py-1.5 text-sm rounded-md text-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100">Cancel</button>
+        <button type="submit" class="btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <script>
   window.currentPage = 1;
+  window.categories = [];
+  window.txnsById = {};
+
+  function csrfToken() {
+    return (document.cookie.match(/(?:^|; )csrftoken=([^;]+)/) || [])[1] || "";
+  }
+
+  async function loadCategories() {
+    const d = window.dashboard;
+    window.categories = await d.fetchJson("/api/categories/");
+    const select = document.querySelector("#edit-form select[name='category_id']");
+    // Group options by kind for readability
+    const byKind = {};
+    for (const c of window.categories) {
+      (byKind[c.kind] ||= []).push(c);
+    }
+    let html = '<option value="">— Uncategorised —</option>';
+    for (const kind of Object.keys(byKind).sort()) {
+      html += `<optgroup label="${kind}">`;
+      for (const c of byKind[kind]) html += `<option value="${c.id}">${c.name}</option>`;
+      html += "</optgroup>";
+    }
+    select.innerHTML = html;
+  }
+
+  function openEdit(t) {
+    const form = document.getElementById("edit-form");
+    form.elements.id.value          = t.id;
+    form.elements.date.value        = t.date;
+    form.elements.description.value = t.description;
+    form.elements.amount.value      = t.amount;
+    form.elements.balance.value     = t.balance ?? "";
+    form.elements.category_id.value = t.category ? t.category.id : "";
+    document.getElementById("edit-error").classList.add("hidden");
+    document.getElementById("edit-modal").classList.remove("hidden");
+    document.getElementById("edit-modal").classList.add("flex");
+  }
+
+  function closeEdit() {
+    document.getElementById("edit-modal").classList.add("hidden");
+    document.getElementById("edit-modal").classList.remove("flex");
+  }
+
+  document.getElementById("edit-close").addEventListener("click", closeEdit);
+  document.getElementById("edit-cancel").addEventListener("click", closeEdit);
+  document.getElementById("edit-modal").addEventListener("click", e => {
+    // Click on backdrop (the modal container itself) closes; clicks inside the panel bubble up but stop here
+    if (e.target.id === "edit-modal") closeEdit();
+  });
+
+  document.getElementById("edit-form").addEventListener("submit", async e => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    const id = form.elements.id.value;
+    const payload = {
+      date: form.elements.date.value,
+      description: form.elements.description.value,
+      amount: form.elements.amount.value,
+      balance: form.elements.balance.value === "" ? null : form.elements.balance.value,
+      category_id: form.elements.category_id.value === "" ? null : parseInt(form.elements.category_id.value, 10),
+    };
+    const err = document.getElementById("edit-error");
+    err.classList.add("hidden");
+    try {
+      const resp = await fetch(`/api/transactions/${id}/`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json", "X-CSRFToken": csrfToken() },
+        credentials: "same-origin",
+        body: JSON.stringify(payload),
+      });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        err.textContent = JSON.stringify(data) || `HTTP ${resp.status}`;
+        err.classList.remove("hidden");
+        return;
+      }
+      closeEdit();
+      window.loadTxns(window.currentPage);
+    } catch (e) {
+      err.textContent = e.message;
+      err.classList.remove("hidden");
+    }
+  });
 
   window.loadTxns = async function (page) {
     const d = window.dashboard;
@@ -76,11 +197,13 @@ <h1 class="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-10
       else if (el.value) params.set(el.name, el.value);
     }
     const data = await d.fetchJson("/api/transactions/?" + params.toString());
+    window.txnsById = {};
     const tbody = document.getElementById("txn-tbody");
     if (!data.results.length) {
-      tbody.innerHTML = '<tr><td colspan="6" class="empty">No transactions match.</td></tr>';
+      tbody.innerHTML = '<tr><td colspan="7" class="empty">No transactions match.</td></tr>';
     } else {
       tbody.innerHTML = data.results.map(t => {
+        window.txnsById[t.id] = t;
         const amt = parseFloat(t.amount);
         const bal = t.balance !== null ? d.formatCurrency(parseFloat(t.balance), true) : "—";
         const catTag = t.category
@@ -97,8 +220,12 @@ <h1 class="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-10
             <td>${catTag}</td>
             <td class="num font-medium ${amt >= 0 ? "text-emerald-600" : "text-rose-600"}">${d.formatCurrency(amt, true)}</td>
             <td class="num text-zinc-500">${bal}</td>
+            <td class="num"><button type="button" data-edit="${t.id}" class="text-xs text-indigo-600 hover:text-indigo-500">edit</button></td>
           </tr>`;
       }).join("");
+      tbody.querySelectorAll("button[data-edit]").forEach(btn => {
+        btn.addEventListener("click", () => openEdit(window.txnsById[btn.dataset.edit]));
+      });
     }
     const total = data.count;
     const shown = data.results.length;
@@ -108,7 +235,7 @@ <h1 class="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-10
     document.getElementById("next-page").disabled = !data.next;
   };
 
-  window.addEventListener("load", () => {
+  window.addEventListener("load", async () => {
     const scopeSelect = document.querySelector('#filters select[name="scope"]');
     document.querySelectorAll("#view-tabs button").forEach(b => {
       b.addEventListener("click", () => {
@@ -118,6 +245,7 @@ <h1 class="text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-10
         window.loadTxns(1);
       });
     });
+    await loadCategories();
     window.loadTxns(1);
   });
 </script>