Web: Kategorie-Filter mit vollem Pfad (Oberkategorie findet Unterkategorien)

Der Kategorie-Spaltenfilter zeigte nur die Blatt-Kategorien, die an Produkten haengen - die Oberkategorie (z.B. 'Klamotten') fehlte, obwohl darunter (kurze Hosen, T-Shirts) etwas eingelagert ist. Kategorie wird jetzt als voller Pfad 'Klamotten -> kurze Hosen' gefuehrt; Freitext 'Klamotten' findet damit alles darunter. Betrifft Produkt- und Einzelstueckliste. (Lagerorte nutzen den Pfad bereits.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/Products.jsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { api } from "../api";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import DataTable from "../components/DataTable";
 import { ProduktThumb } from "../components/ProduktBild";
+import { categoryPathMap } from "../categoryPath";
 import { fmt, gebinde, unitShort } from "../units";
 
 // Wie viele Basiseinheiten eine "Artikeleinheit" umfasst (Gebinde oder Produkteinheit).
@@ -27,6 +28,7 @@ function einheitText(p) {
 export default function Products() {
   const { isAdmin } = useAuth();
   const [products, setProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
   // "" = alle, sonst "food"/"object": trennt Lebensmittel und Gegenstände.
   const [typ, setTyp] = useState("");
   const [error, setError] = useState(null);
@@ -34,8 +36,11 @@ export default function Products() {
   useEffect(() => {
     // Alle Produkte einmal laden; das Filtern erledigt die Tabelle clientseitig.
     api.listProducts("", "").then(setProducts).catch((err) => setError(err.message));
+    api.listCategories().then(setCategories).catch(() => {});
   }, []);
 
+  // Kategorie als voller Pfad, damit "Klamotten" auch die Unterkategorien findet.
+  const catPfad = useMemo(() => categoryPathMap(categories), [categories]);
   const sichtbar = products.filter((p) => !typ || p.tracking === typ);
 
   const columns = [
@@ -55,8 +60,9 @@ export default function Products() {
       ) },
     { key: "brand", header: "Marke", width: 150, filterText: (p) => p.brand || "",
       render: (p) => <span className="muted">{p.brand || "–"}</span> },
-    { key: "category", header: "Kategorie", width: 180, filterText: (p) => p.category_name || "",
-      render: (p) => <span className="muted">{p.category_name || "–"}</span> },
+    { key: "category", header: "Kategorie", width: 210,
+      filterText: (p) => catPfad.get(p.category_id) || p.category_name || "",
+      render: (p) => <span className="muted">{catPfad.get(p.category_id) || p.category_name || "–"}</span> },
     { key: "unit", header: "Einheit", width: 200, filterText: einheitText,
       render: einheitText },
     { key: "stock", header: "Bestand", width: 130, align: "num",