Hausmasse und Oeffnungsfrist bekommen eine Oberflaeche

Die Endpunkte standen seit dem Backend-Commit, aber eintragen liess sich
nichts - die Mengen gingen nur per API rein. Damit war "2 EL Mehl" im
Verbrauchen-Dialog zwar vorgesehen, aber fuer niemanden erreichbar.

Zwei Stellen dafuer:

Stammdaten > Masse verwaltet nur die NAMEN ("Essloeffel", "Tasse"). Die
Seite ist absichtlich kurz, denn die Mengen gehoeren nicht an das Mass:
Ein Essloeffel Mehl sind etwa 10 g, einer Zucker etwa 12 g, und eine
Tasse Milch ist Milliliter. Ein globaler Wert waere bei jedem zweiten
Artikel falsch.

Kategorien > "Masse & Frist" ist deshalb der Ort, an dem die Arbeit
passiert. Beides steckt in einem Bedienfeld, weil es dieselbe Mechanik
ist: Der Wert gilt fuer die Kategorie und alles darunter, und der
naechste Vorfahr mit einem Eintrag gewinnt. Leere Felder erben - und
zeigen als Platzhalter, WAS sie erben ("erbt 5 Tage (Kategorie: Mehl &
Zucker)", "10 g" mit Abzeichen "geerbt"). Ohne das muesste man den
Kategorienbaum im Kopf verfolgen, um eine leere Eingabe zu verstehen.

Dafuer zwei kleine Ergaenzungen am Backend: CategoryOut nennt die
geerbte Frist samt Herkunft, und /categories/{id}/measures nimmt
?vererbt=true, um neben den eigenen auch die von oben geerbten Mengen zu
liefern. Die Bearbeitungsansicht ohne Flagge bleibt wie sie war.

Von Hand durchgeklickt - und dabei einen echten Fehler gefunden: Der
API-Aufruf im Browser hat das vererbt-Flag verschluckt, weil die
Funktion nur ein Argument annahm. Die Unterkategorie zeigte dadurch
leere Felder, obwohl der Server die geerbten Werte lieferte. Jetzt
stehen dort "10 g" und "3 g" mit der Quelle im Tooltip.

4 neue Tests, Suite bei 516.

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

web/src/pages/Categories.jsx

@@ -24,6 +24,8 @@ export default function Categories() {
   const [error, setError] = useState(null);
   // Kategorie, deren Felder gerade verwaltet werden.
   const [feldKat, setFeldKat] = useState(null);
+  // Welche Kategorie gerade ihre Masse und ihre Oeffnungsfrist zeigt.
+  const [massKat, setMassKat] = useState(null);
   // "" = alle, sonst "food"/"object": trennt Lebensmittel und Gegenstände.
   const [typFilter, setTypFilter] = useState("");
   const [loading, setLoading] = useState(true);
@@ -131,13 +133,17 @@ export default function Categories() {
       } },
     { key: "count", header: "Artikel", width: 90, align: "num", sortValue: (c) => c.product_count,
       render: (c) => <span className="muted">{c.product_count}</span> },
-    { key: "actions", header: "", label: "Aktionen", fixed: true, width: 96, align: "num",
+    { key: "actions", header: "", label: "Aktionen", fixed: true, width: 132, align: "num",
       render: (c) => (
         <span className="cell-row" style={{ justifyContent: "flex-end" }}>
           <button className="btn-icon" title="Felder verwalten"
-            onClick={() => setFeldKat(feldKat && feldKat.id === c.id ? null : c)}>
+            onClick={() => { setMassKat(null); setFeldKat(feldKat && feldKat.id === c.id ? null : c); }}>
             <Icon name="tag" size={16} />
           </button>
+          <button className="btn-icon" title="Maße & Frist"
+            onClick={() => { setFeldKat(null); setMassKat(massKat && massKat.id === c.id ? null : c); }}>
+            <Icon name="split" size={16} />
+          </button>
           {isAdmin && (
             <button className="btn-icon danger" onClick={() => remove(c)} title="Löschen">
               <Icon name="trash" size={16} />
@@ -155,7 +161,8 @@ export default function Categories() {
           <div className="sub">
             Ordnen die Artikelliste und legen die Verwaltungsart fest:
             „Lebensmittel“ (Chargen + MHD) oder „Gegenstand“ (Menge je Lagerort).
-            Je Kategorie lassen sich eigene Felder festlegen, die Unterkategorien erben.
+            Je Kategorie lassen sich eigene Felder festlegen, die Unterkategorien erben –
+            ebenso Küchenmaße („1 EL Mehl = 10 g") und die Haltbarkeit nach dem Anbrechen.
           </div>
         </div>
       </div>
@@ -172,7 +179,9 @@ export default function Categories() {
           <DataTable id="categories" columns={columns}
             rows={categories.filter((c) => !typFilter || c.tracking === typFilter)}
             getRowKey={(c) => c.id}
-            rowClassName={(c) => (feldKat && feldKat.id === c.id ? "row-active" : "")}
+            rowClassName={(c) => (
+              (feldKat && feldKat.id === c.id) || (massKat && massKat.id === c.id)
+                ? "row-active" : "")}
             tree={{ column: "name", idOf: (c) => c.id, parentIdOf: (c) => c.parent_id }}
             loading={loading} empty="Noch keine Kategorien." />
         </div>
@@ -219,6 +228,16 @@ export default function Categories() {
               onClose={() => setFeldKat(null)}
             />
           )}
+
+          {massKat && (
+            <CategoryMasse
+              key={massKat.id}
+              category={massKat}
+              isAdmin={isAdmin}
+              onClose={() => setMassKat(null)}
+              onFrist={() => load()}
+            />
+          )}
         </div>
       </div>
     </div>
@@ -401,3 +420,175 @@ function CategoryFields({ category, isAdmin, onClose }) {
     </div>
   );
 }
+
+const BASIS_LABEL = { gram: "Gramm", milliliter: "Milliliter", piece: "Stück" };
+const BASIS_KURZ = { gram: "g", milliliter: "ml", piece: "Stk" };
+
+/**
+ * Küchenmaße und Öffnungsfrist einer Kategorie.
+ *
+ * Beides steckt hier zusammen, weil es dieselbe Mechanik ist: Der Wert gilt für
+ * die Kategorie und alle darunter, und der nächste Vorfahr mit einem Eintrag
+ * gewinnt. Leere Felder erben – was sie erben, steht als Platzhalter dabei,
+ * sonst müsste man den Baum im Kopf verfolgen.
+ *
+ * Die Mengen gehören an die Kategorie und nicht an das Maß selbst: Ein
+ * Esslöffel Mehl sind etwa 10 g, einer Zucker etwa 12 g. Ein globaler Wert wäre
+ * bei jedem zweiten Artikel falsch.
+ */
+function CategoryMasse({ category, isAdmin, onClose, onFrist }) {
+  const confirm = useConfirm();
+  const [masse, setMasse] = useState([]);       // alle Maß-Namen (global)
+  const [werte, setWerte] = useState([]);       // eigene + geerbte Mengen
+  const [frist, setFrist] = useState(category.open_days ?? "");
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  async function load() {
+    setLoading(true);
+    try {
+      const [alle, eigene] = await Promise.all([
+        api.listMeasures(),
+        api.categoryMeasures(category.id, true),
+      ]);
+      setMasse(alle);
+      setWerte(eigene);
+      setError(null);
+    } catch (err) { setError(err.message); } finally { setLoading(false); }
+  }
+  useEffect(() => { load(); }, [category.id]);
+
+  const wertFuer = (id) => werte.find((w) => w.measure_id === id) || null;
+  const istEigen = (w) => w && w.herkunft === "Kategorie";
+
+  async function speichern(mass, menge, basis) {
+    const zahl = Number(String(menge).replace(",", "."));
+    if (!Number.isFinite(zahl) || zahl <= 0) return;
+    setError(null);
+    try {
+      await api.setCategoryMeasure(category.id, mass.id, { amount: zahl, base: basis });
+      load();
+    } catch (err) { setError(err.message); }
+  }
+
+  async function entfernen(mass) {
+    setError(null);
+    try {
+      await api.deleteCategoryMeasure(category.id, mass.id);
+      load();
+    } catch (err) { setError(err.message); }
+  }
+
+  async function fristSpeichern() {
+    const roh = String(frist).trim();
+    const zahl = roh === "" ? null : Number(roh);
+    if (roh !== "" && (!Number.isFinite(zahl) || zahl <= 0)) {
+      setError("Die Frist ist eine Anzahl Tage größer als 0 – oder leer, dann wird geerbt.");
+      return;
+    }
+    setError(null);
+    try {
+      await api.updateCategory(category.id, { open_days: zahl });
+      onFrist?.();
+    } catch (err) { setError(err.message); }
+  }
+
+  return (
+    <div className="card">
+      <div className="card-head">
+        <Icon name="split" />
+        <h2>Maße &amp; Frist: {category.name}</h2>
+        <button className="btn-icon" onClick={onClose} title="Schließen"
+          style={{ marginLeft: "auto" }}>
+          <Icon name="close" size={16} />
+        </button>
+      </div>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
+      <label>
+        Nach Öffnung haltbar (Tage)
+        <input type="number" min="1" step="1" value={frist} disabled={!isAdmin}
+          placeholder={`erbt ${category.inherited_open_days} Tage (${category.open_days_source})`}
+          onChange={(e) => setFrist(e.target.value)} onBlur={fristSpeichern} />
+      </label>
+      <p className="muted small mt-0">
+        Gilt für angebrochene Packungen dieser Kategorie und aller darunter.
+        Leer lassen heißt erben.
+      </p>
+
+      <div className="card-head" style={{ marginTop: "var(--sp-4)" }}>
+        <Icon name="box" /><h2>Küchenmaße</h2>
+      </div>
+      {loading && <p className="muted small">Wird geladen…</p>}
+      {!loading && masse.length === 0 && (
+        <p className="muted small mt-0">
+          Es gibt noch keine Maße. Angelegt werden sie unter Stammdaten ▸ Maße.
+        </p>
+      )}
+      {!loading && masse.map((m) => {
+        const w = wertFuer(m.id);
+        return (
+          <MassZeile key={m.id} mass={m} wert={w} eigen={istEigen(w)} isAdmin={isAdmin}
+            onSpeichern={(menge, basis) => speichern(m, menge, basis)}
+            onEntfernen={async () => {
+              const ok = await confirm({
+                title: `„${m.name}" hier entfernen?`,
+                message: "Danach erbt die Kategorie den Wert von oben – oder das Maß "
+                  + "gilt hier gar nicht mehr.",
+                confirmLabel: "Entfernen",
+              });
+              if (ok) entfernen(m);
+            }} />
+        );
+      })}
+      <p className="muted small">
+        „1 EL Mehl ≈ 10 g", „1 Tasse Milch ≈ 200 ml". Damit lässt sich beim
+        Verbrauchen „2 EL" buchen, statt Gramm zu schätzen. Die Art (Gramm,
+        Milliliter, Stück) gehört zur Menge, nicht zum Namen: Ein Esslöffel Öl
+        ist Milliliter, einer Mehl ist Gramm.
+      </p>
+    </div>
+  );
+}
+
+/** Eine Maß-Zeile: eigene Menge eintragen, geerbte als Platzhalter zeigen. */
+function MassZeile({ mass, wert, eigen, isAdmin, onSpeichern, onEntfernen }) {
+  const [menge, setMenge] = useState(eigen && wert ? String(wert.amount) : "");
+  const [basis, setBasis] = useState(wert ? wert.base : "gram");
+
+  // Nach dem Neuladen (Speichern, Entfernen) die Felder nachziehen.
+  useEffect(() => {
+    setMenge(eigen && wert ? String(wert.amount) : "");
+    setBasis(wert ? wert.base : "gram");
+  }, [wert?.amount, wert?.base, eigen]);
+
+  const geerbt = wert && !eigen;
+
+  return (
+    <div className="field-inline" style={{ flexWrap: "wrap", alignItems: "flex-end" }}>
+      <label style={{ margin: 0, minWidth: 110, flex: "0 0 auto" }}>
+        <span className="muted small">{mass.short ? `${mass.name} (${mass.short})` : mass.name}</span>
+        <input type="number" step="any" min="0" value={menge} disabled={!isAdmin}
+          placeholder={geerbt ? `${wert.amount} ${BASIS_KURZ[wert.base] || wert.base}` : "–"}
+          onChange={(e) => setMenge(e.target.value)}
+          onBlur={() => { if (menge !== "") onSpeichern(menge, basis); }} />
+      </label>
+      <select value={basis} disabled={!isAdmin} style={{ maxWidth: 130, marginTop: 0 }}
+        onChange={(e) => {
+          setBasis(e.target.value);
+          if (menge !== "") onSpeichern(menge, e.target.value);
+        }}>
+        {Object.entries(BASIS_LABEL).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+      </select>
+      {geerbt && (
+        <span className="badge nowrap" title={`Geerbt von ${wert.herkunft}`}>geerbt</span>
+      )}
+      {eigen && isAdmin && (
+        <button type="button" className="btn-icon danger" title="Hier entfernen"
+          onClick={onEntfernen}>
+          <Icon name="trash" size={16} />
+        </button>
+      )}
+    </div>
+  );
+}

web/src/pages/Masse.jsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import { useConfirm } from "../confirm";
+import Icon from "../components/Icon";
+import DataTable from "../components/DataTable";
+
+/**
+ * Hausmaße – Stammdaten.
+ *
+ * Hier stehen nur die **Namen** („Esslöffel", „Tasse"). Die Mengen gehören
+ * nicht hierher, sondern an die Kategorie oder den Artikel: Ein Esslöffel Mehl
+ * sind etwa 10 g, einer Zucker etwa 12 g, und eine Tasse Milch ist Milliliter.
+ * Ein globaler Wert wäre bei jedem zweiten Artikel falsch.
+ *
+ * Deshalb ist diese Seite absichtlich kurz. Die Arbeit passiert unter
+ * Kategorien ▸ Maße & Frist.
+ */
+export default function Masse() {
+  const confirm = useConfirm();
+  const [masse, setMasse] = useState([]);
+  const [form, setForm] = useState({ name: "", short: "" });
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  async function load() {
+    setLoading(true);
+    try {
+      setMasse(await api.listMeasures());
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => { load(); }, []);
+
+  async function add(e) {
+    e.preventDefault();
+    setError(null);
+    try {
+      await api.createMeasure({
+        name: form.name.trim(),
+        short: form.short.trim() || null,
+        position: masse.length,
+      });
+      setForm({ name: "", short: "" });
+      load();
+    } catch (err) { setError(err.message); }
+  }
+
+  async function patch(mass, body) {
+    setError(null);
+    try {
+      await api.updateMeasure(mass.id, {
+        name: body.name ?? mass.name,
+        short: body.short !== undefined ? body.short : mass.short,
+        position: mass.position,
+      });
+      load();
+    } catch (err) { setError(err.message); load(); }
+  }
+
+  async function remove(mass) {
+    const ok = await confirm({
+      title: `Maß „${mass.name}" löschen?`,
+      message: "Die bei Kategorien und Artikeln hinterlegten Mengen dieses Maßes "
+        + "verschwinden mit. Buchungen, die damit gemacht wurden, bleiben.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
+    try {
+      await api.deleteMeasure(mass.id);
+      load();
+    } catch (err) { setError(err.message); }
+  }
+
+  const columns = [
+    { key: "name", header: "Name", grow: true, min: 160,
+      filterText: (m) => m.name, sortValue: (m) => m.name,
+      render: (m) => (
+        <span className="cell-row">
+          <input defaultValue={m.name} style={{ marginTop: 0, minWidth: 140 }}
+            onBlur={(e) => {
+              const v = e.target.value.trim();
+              if (v && v !== m.name) patch(m, { name: v });
+            }} />
+          {m.is_builtin && <span className="badge nowrap">eingebaut</span>}
+        </span>
+      ) },
+    { key: "short", header: "Kurzform", width: 160,
+      filterText: (m) => m.short || "",
+      render: (m) => (
+        <input defaultValue={m.short || ""} placeholder="z.B. EL"
+          style={{ marginTop: 0, minWidth: 90 }}
+          onBlur={(e) => {
+            const v = e.target.value.trim();
+            if (v !== (m.short || "")) patch(m, { short: v || null });
+          }} />
+      ) },
+    { key: "actions", header: "", label: "Aktionen", fixed: true, width: 56, align: "num",
+      render: (m) => (
+        <button className="btn-icon danger" onClick={() => remove(m)} title="Löschen">
+          <Icon name="trash" size={16} />
+        </button>
+      ) },
+  ];
+
+  return (
+    <div>
+      <div className="page-head">
+        <div>
+          <h1>Maße</h1>
+          <div className="sub">
+            Küchenmaße zum Verbrauchen: „2 EL Mehl", „1 Tasse Milch".
+            Wie viel das ist, steht je Kategorie bzw. Artikel.
+          </div>
+        </div>
+      </div>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
+      <div className="grid-2 wide-aside">
+        <div className="card">
+          <DataTable id="masse" columns={columns} rows={masse} loading={loading}
+            getRowKey={(m) => m.id} empty="Noch keine Maße." />
+        </div>
+
+        <div className="stack">
+          <form className="card" onSubmit={add}>
+            <div className="card-head"><Icon name="box" /><h2>Neues Maß</h2></div>
+            <label>
+              Name
+              <input placeholder="z.B. Schöpfkelle" value={form.name} required
+                onChange={(e) => setForm({ ...form, name: e.target.value })} />
+            </label>
+            <label>
+              Kurzform (freiwillig)
+              <input placeholder="z.B. Kelle" value={form.short} maxLength={10}
+                onChange={(e) => setForm({ ...form, short: e.target.value })} />
+            </label>
+            <button className="btn primary"><Icon name="plus" size={16} />Anlegen</button>
+            <p className="muted small">
+              Ein Name darf nicht mit einer echten Einheit zusammenfallen: Ein
+              Hausmaß namens „Liter" würde die Einheit verdecken, und ein
+              geschätzter Liter wäre etwas anderes als ein gemessener.
+            </p>
+          </form>
+
+          <div className="card">
+            <div className="card-head"><Icon name="alert" /><h2>Wo die Mengen stehen</h2></div>
+            <p className="muted small mt-0">
+              Unter <strong>Kategorien</strong> öffnet der Knopf „Maße &amp; Frist"
+              je Kategorie die Mengen – dort trägst du ein, dass ein Esslöffel bei
+              Mehl 10 g sind. Unterkategorien erben das; der nächste Vorfahr mit
+              einem Eintrag gewinnt. Einzelne Artikel können davon abweichen.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}