From 31137cd8849812f41dc91b565ad7b2c55ad54f5b Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Tue, 28 Jul 2026 11:36:47 +0200
Subject: [PATCH] Web: Spalte "Zuletzt geaendert" in den Produktlisten

Neue sortier- und filterbare Spalte (Datum + Uhrzeit) in Lebensmittel- und
Gegenstaende-Liste, basierend auf Product.updated_at. Nuetzlich, um zuletzt
angelegte/geaenderte Artikel zu finden (z.B. mit fehlender Kategorie). Erscheint
automatisch, laesst sich per Spaltenauswahl aus-/einblenden und umsortieren.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/Products.jsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/pages/Products.jsx b/web/src/pages/Products.jsx
index 21d5cdc..be46fe9 100644
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -25,6 +25,13 @@ function einheitText(p) {
     ? `${basis} · ${p.package_label || "Packung"} ${fmt(p.package_size)} ${unitShort(p.base_unit)}`
     : basis;
 }
+// „Zuletzt geändert" als Datum + Uhrzeit (zum Sortieren/Filtern).
+function fmtDateTime(iso) {
+  if (!iso) return "–";
+  return new Date(iso).toLocaleString("de-DE", {
+    day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit",
+  });
+}
 
 export default function Products({ fixedType = null }) {
   const { isAdmin } = useAuth();
@@ -93,6 +100,10 @@ export default function Products({ fixedType = null }) {
           </span>
         );
       } },
+    { key: "updated", header: "Zuletzt geändert", label: "Zuletzt geändert", width: 170,
+      sortValue: (p) => (p.updated_at ? new Date(p.updated_at).getTime() : 0),
+      filterText: (p) => fmtDateTime(p.updated_at),
+      render: (p) => <span className="muted nowrap">{fmtDateTime(p.updated_at)}</span> },
     { key: "details", header: "", label: "Details", fixed: true, width: 84, align: "num",
       render: (p) => <Link to={`/products/${p.id}`}>Details</Link> },
   ];