Web: Chargenliste (mit Sammel-Lagerort) + Ladezustand auf allen Tabellen

Neue Seite "Chargen": alle Chargen ueber alle Artikel (Artikel, Menge, MHD,
Lagerort, eingelagert). Lagerort je Zeile direkt aenderbar; alle Chargen ohne
Ort per Klick zuweisbar (bulk-location) - gut, wenn der Lagerort erst spaeter
angelegt wurde.

DataTable bekommt einen loading-Prop: waehrend des Ladens steht "Wird geladen..."
statt der Leer-Meldung. Auf ALLEN Tabellen angewendet (Produkte, Mindestbestaende,
Kategorien, Gruppen, Einheiten, Gebinde, Einzelstuecke, Chargen).

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

web/src/pages/Categories.jsx

@@ -26,12 +26,16 @@ export default function Categories() {
   const [feldKat, setFeldKat] = useState(null);
   // "" = alle, sonst "food"/"object": trennt Lebensmittel und Gegenstände.
   const [typFilter, setTypFilter] = useState("");
+  const [loading, setLoading] = useState(true);
 
   async function load() {
+    setLoading(true);
     try {
       setCategories(await api.listCategories());
     } catch (err) {
       setError(err.message);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -170,7 +174,7 @@ export default function Categories() {
             getRowKey={(c) => c.id}
             rowClassName={(c) => (feldKat && feldKat.id === c.id ? "row-active" : "")}
             tree={{ column: "name", idOf: (c) => c.id, parentIdOf: (c) => c.parent_id }}
-            empty="Noch keine Kategorien." />
+            loading={loading} empty="Noch keine Kategorien." />
         </div>
 
         <div className="stack">

web/src/pages/Charges.jsx

@@ -0,0 +1,147 @@
+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 { useSettings } from "../settings";
+import { locationOptions, locationPathById } from "../locationPath";
+import { fmt, gebinde, unitShort } from "../units";
+
+// Artikeleinheit einer Charge (Gebinde, sonst Produkteinheit).
+const artFactor = (l) => (l.package_size && l.package_size > 0 ? l.package_size : (l.unit_factor || 1));
+function mengeText(l) {
+  const menge = l.quantity / artFactor(l);
+  const label = l.package_size && l.package_size > 0
+    ? gebinde(menge, l.package_label)
+    : (l.unit_name || unitShort(l.base_unit));
+  return `${fmt(menge)} ${label}`;
+}
+
+/**
+ * Übergreifende Chargenliste (wie die Einzelstückliste, aber für Chargen). Zeigt
+ * je Charge Artikel, Menge, MHD und Lagerort; der Lagerort ist je Zeile direkt
+ * änderbar, und alle Chargen ohne Ort lassen sich in einem Klick zuordnen.
+ */
+export default function Charges() {
+  const { isAdmin } = useAuth();
+  const { formatBestBefore } = useSettings();
+  const [lots, setLots] = useState([]);
+  const [locations, setLocations] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [bulkLoc, setBulkLoc] = useState("");
+
+  async function load() {
+    setLoading(true);
+    try {
+      const [ls, locs] = await Promise.all([api.listAllLots(), api.listLocations()]);
+      setLots(ls);
+      setLocations(locs);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => { load(); }, []);
+
+  const ohneOrt = useMemo(() => lots.filter((l) => !l.location_id), [lots]);
+
+  async function setLocation(lotId, locId) {
+    setError(null);
+    try {
+      await api.updateLot(lotId, { location_id: locId || null });
+      setLots((ls) => ls.map((l) => (l.id === lotId ? { ...l, location_id: locId || null } : l)));
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  async function applyBulk() {
+    if (!bulkLoc || ohneOrt.length === 0) return;
+    setError(null);
+    try {
+      await api.bulkLotLocation(ohneOrt.map((l) => l.id), bulkLoc);
+      setBulkLoc("");
+      await load();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  const columns = [
+    { key: "thumb", header: "", label: "Bild", fixed: true, width: 56,
+      render: (l) => <ProduktThumb productId={l.product_id} alt={l.product_name} /> },
+    { key: "product", header: "Artikel", grow: true, min: 180,
+      filterText: (l) => `${l.product_name} ${l.product_brand || ""}`, sortValue: (l) => l.product_name,
+      render: (l) => (
+        <span className="cell-row">
+          <span className="strong">{l.product_name}</span>
+          {l.product_brand && <span className="muted small">{l.product_brand}</span>}
+        </span>
+      ) },
+    { key: "menge", header: "Menge", width: 150, align: "num",
+      sortValue: (l) => l.quantity / artFactor(l), render: mengeText },
+    { key: "mhd", header: "MHD", width: 150,
+      filterText: (l) => (l.best_before ? formatBestBefore(l.best_before, l.best_before_precision) : ""),
+      sortValue: (l) => l.best_before || "9999-99-99",
+      render: (l) => (l.best_before ? formatBestBefore(l.best_before, l.best_before_precision) : <span className="muted">–</span>) },
+    { key: "location", header: "Lagerort", width: 240,
+      filterText: (l) => (l.location_id ? (locationPathById(l.location_id, locations) || "") : "(ohne)"),
+      filterValues: (l) => [l.location_id ? (locationPathById(l.location_id, locations) || "?") : "(ohne)"],
+      render: (l) => (isAdmin ? (
+        <select value={l.location_id || ""} style={{ marginTop: 0, minWidth: 150 }}
+          onChange={(e) => setLocation(l.id, e.target.value)}>
+          <option value="">– ohne –</option>
+          {locationOptions(locations).map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
+        </select>
+      ) : (
+        l.location_id ? (locationPathById(l.location_id, locations) || "?") : <span className="muted">– ohne –</span>
+      )) },
+    { key: "created", header: "Eingelagert", width: 130,
+      sortValue: (l) => new Date(l.created_at).getTime(),
+      render: (l) => <span className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</span> },
+    { key: "details", header: "", label: "Artikel", fixed: true, width: 84, align: "num",
+      render: (l) => <Link to={`/products/${l.product_id}`}>Artikel</Link> },
+  ];
+
+  return (
+    <div>
+      <div className="page-head">
+        <div>
+          <h1>Chargen</h1>
+          <div className="sub">
+            {loading ? "Wird geladen…" : `${lots.length} Chargen · ${ohneOrt.length} ohne Lagerort`}
+          </div>
+        </div>
+      </div>
+
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
+      {isAdmin && ohneOrt.length > 0 && (
+        <div className="card" style={{ marginBottom: "var(--sp-3)" }}>
+          <div className="card-head"><Icon name="location" /><h2>Lagerort für alle ohne Ort setzen</h2></div>
+          <p className="muted small mt-0">
+            {ohneOrt.length} Charge(n) haben noch keinen Lagerort. Ort wählen und in einem Klick allen zuweisen.
+          </p>
+          <div className="field-inline">
+            <select value={bulkLoc} onChange={(e) => setBulkLoc(e.target.value)} style={{ maxWidth: 360 }}>
+              <option value="">– Lagerort wählen –</option>
+              {locationOptions(locations).map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
+            </select>
+            <button className="btn primary" disabled={!bulkLoc} onClick={applyBulk}>
+              <Icon name="check" size={16} />Auf alle {ohneOrt.length} anwenden
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="card">
+        <DataTable id="charges" columns={columns} rows={lots} loading={loading}
+          getRowKey={(l) => l.id} empty="Keine Chargen im Bestand." />
+      </div>
+    </div>
+  );
+}

web/src/pages/Groups.jsx

@@ -17,8 +17,10 @@ export default function Groups() {
   const [form, setForm] = useState({ name: "", min_stock: "", min_stock_unit_id: "" });
   const [selectedId, setSelectedId] = useState(null);
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   async function load() {
+    setLoading(true);
     try {
       const [gs, us, ls] = await Promise.all([
         api.listGroups(), api.listUnits(), api.listLocations(),
@@ -28,6 +30,8 @@ export default function Groups() {
       setLocations(ls);
     } catch (err) {
       setError(err.message);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -138,7 +142,7 @@ export default function Groups() {
 
       <div className="grid-2 wide-aside">
         <div className="card">
-          <DataTable id="groups" columns={columns} rows={groups}
+          <DataTable id="groups" columns={columns} rows={groups} loading={loading}
             getRowKey={(g) => g.id} empty="Noch keine Gruppen." />
         </div>
 

web/src/pages/ItemList.jsx

@@ -21,14 +21,16 @@ export default function ItemList() {
   const [shops, setShops] = useState([]);
   const [categories, setCategories] = useState([]);
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   async function load() {
+    setLoading(true);
     try {
       const [is, ls, ss, cs] = await Promise.all([
         api.listAllItems(), api.listLocations(), api.listShops(), api.listCategories(),
       ]);
       setItems(is); setLocations(ls); setShops(ss); setCategories(cs);
-    } catch (err) { setError(err.message); }
+    } catch (err) { setError(err.message); } finally { setLoading(false); }
   }
   useEffect(() => { load(); }, []);
 
@@ -100,7 +102,7 @@ export default function ItemList() {
       </div>
       {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
       <div className="card">
-        <DataTable id="items" columns={columns} rows={items}
+        <DataTable id="items" columns={columns} rows={items} loading={loading}
           getRowKey={(it) => it.id} empty="Noch keine Einzelstücke." />
       </div>
     </div>

web/src/pages/MinStock.jsx

@@ -35,17 +35,19 @@ export default function MinStock() {
   const [locations, setLocations] = useState([]);
   const [categories, setCategories] = useState([]);
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
   // „+ hinzufügen"-Dialog: Ziel (Produkt/Gruppe) → Geltung (Gesamt/Lagerort) → Menge.
   const [showAdd, setShowAdd] = useState(false);
   const [draft, setDraft] = useState(EMPTY_DRAFT);
 
   async function load() {
+    setLoading(true);
     try {
       const [ps, gs, ls, cs] = await Promise.all([
         api.listProducts("", ""), api.listGroups(), api.listLocations(), api.listCategories(),
       ]);
       setProducts(ps); setGroups(gs); setLocations(ls); setCategories(cs);
-    } catch (err) { setError(err.message); }
+    } catch (err) { setError(err.message); } finally { setLoading(false); }
   }
   useEffect(() => { load(); }, []);
 
@@ -285,7 +287,7 @@ export default function MinStock() {
       )}
 
       <div className="card">
-        <DataTable id="min-stock" columns={columns} rows={rows}
+        <DataTable id="min-stock" columns={columns} rows={rows} loading={loading}
           getRowKey={(r) => r.key} empty="Noch keine Mindestbestände." />
       </div>
     </div>

web/src/pages/PackageTypes.jsx

@@ -19,8 +19,10 @@ export default function PackageTypes() {
   const [form, setForm] = useState({ singular: "", plural: "" });
   const [bearbeitung, setBearbeitung] = useState(null);   // { id, singular, plural }
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   async function load() {
+    setLoading(true);
     try {
       setArten(await api.listPackageTypes());
       // Die Mehrzahlformen stecken in einer Modulvariablen, die beim Login
@@ -29,6 +31,8 @@ export default function PackageTypes() {
       reloadSettings();
     } catch (err) {
       setError(err.message);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -136,7 +140,7 @@ export default function PackageTypes() {
 
       <div className="grid-2 wide-aside">
         <div className="card">
-          <DataTable id="package-types" columns={columns} rows={arten}
+          <DataTable id="package-types" columns={columns} rows={arten} loading={loading}
             getRowKey={(a) => a.id} empty="Noch keine Gebinde." />
         </div>
 

web/src/pages/Products.jsx

@@ -153,8 +153,7 @@ export default function Products({ fixedType = null }) {
 
       <div className="card">
         <DataTable id={fixedType ? `products-${fixedType}` : "products"} columns={columns} rows={sichtbar}
-          getRowKey={(p) => p.id}
-          empty={loading ? "Produkte werden geladen…" : "Keine Produkte gefunden."} />
+          getRowKey={(p) => p.id} loading={loading} empty="Keine Produkte gefunden." />
       </div>
     </div>
   );

web/src/pages/Units.jsx

@@ -12,12 +12,16 @@ export default function Units() {
   const [units, setUnits] = useState([]);
   const [form, setForm] = useState({ name: "", kind: "weight", factor: "" });
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   async function load() {
+    setLoading(true);
     try {
       setUnits(await api.listUnits());
     } catch (err) {
       setError(err.message);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -87,7 +91,7 @@ export default function Units() {
 
       <div className="grid-2 wide-aside">
         <div className="card">
-          <DataTable id="units" columns={columns} rows={units}
+          <DataTable id="units" columns={columns} rows={units} loading={loading}
             getRowKey={(u) => u.id} empty="Noch keine Einheiten." />
         </div>