Fix Einkaufsliste: Mindestbestand in Packungen angebbar (Einheiten-Missverstaendnis)

Problem: min_stock wird in Basiseinheiten verglichen. Bei einem 190g-Glas (base
gram, package 190) bedeutete "min 2" 2 Gramm statt 2 Glaeser -> Produkt tauchte
nie auf der Einkaufsliste auf.

Fix:
- Produktformular: Mindestbestand wahlweise in Basiseinheit ODER Packungen
  eingebbar (mit Umrechnung); Default Packungen bei Packungsprodukten.
- ShoppingItem liefert package_size; Einkaufsliste/Dashboard zeigen Bedarf in
  Packungen (+ Basiseinheit in Klammern) via amountText().

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

web/src/pages/Dashboard.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { api } from "../api";
 import Icon from "../components/Icon";
-import { fmt, unitShort } from "../units";
+import { amountText, fmt, unitShort } from "../units";
 
 export default function Dashboard() {
   const [expiring, setExpiring] = useState([]);
@@ -115,8 +115,8 @@ export default function Dashboard() {
                   {shopping.map((it) => (
                     <tr key={`p${it.product_id}`}>
                       <td>{it.name}</td>
-                      <td className="num">{fmt(it.stock)} {unitShort(it.base_unit)}</td>
-                      <td className="num strong">{fmt(it.deficit)} {unitShort(it.base_unit)}</td>
+                      <td className="num">{amountText(it.stock, it.package_size, it.base_unit)}</td>
+                      <td className="num strong">{amountText(it.deficit, it.package_size, it.base_unit)}</td>
                     </tr>
                   ))}
                 </tbody>

web/src/pages/ProductForm.jsx

@@ -25,11 +25,23 @@ export default function ProductForm() {
   const [error, setError] = useState(null);
   const [info, setInfo] = useState(null);
   const [busy, setBusy] = useState(false);
+  // Einheit, in der der Mindestbestand eingegeben wird: "base" oder "package".
+  const [minUnit, setMinUnit] = useState("base");
 
   function set(k, v) {
     setForm((f) => ({ ...f, [k]: v }));
   }
 
+  // Wechselt die Mindestbestand-Einheit und rechnet den angezeigten Wert um.
+  function changeMinUnit(newUnit) {
+    const ps = Number(form.package_size);
+    if (form.min_stock !== "" && ps > 0 && newUnit !== minUnit) {
+      const v = Number(form.min_stock);
+      set("min_stock", String(newUnit === "package" ? v / ps : v * ps));
+    }
+    setMinUnit(newUnit);
+  }
+
   function applySuggestion(s, groupsList) {
     const groupGuess = guessGroup(groupsList, s);
     setForm((f) => ({
@@ -42,6 +54,7 @@ export default function ProductForm() {
       package_size: s.package_size != null ? String(s.package_size) : f.package_size,
       group_id: f.group_id || groupGuess,
     }));
+    if (s.package_size != null) setMinUnit("package");
     setInfo(
       "Daten von Open Food Facts übernommen." +
         (s.package_size != null ? "" : " (Füllmenge nicht hinterlegt – bitte Packungsgröße prüfen.)") +
@@ -76,10 +89,19 @@ export default function ProductForm() {
         if (!isNew) {
           const p = await api.getProduct(id);
           setProduct(p);
+          // Mindestbestand ist in Basiseinheiten gespeichert; bei Packungsprodukten
+          // zeigen wir ihn zur besseren Verständlichkeit in Packungen an.
+          let minDisplay = p.min_stock ?? "";
+          if (p.min_stock != null && p.package_size && p.package_size > 0) {
+            minDisplay = p.min_stock / p.package_size;
+            setMinUnit("package");
+          } else {
+            setMinUnit("base");
+          }
           setForm({
             barcode: p.barcode || "", name: p.name, brand: p.brand || "",
             image_url: p.image_url || "", base_unit: p.base_unit,
-            package_size: p.package_size ?? "", min_stock: p.min_stock ?? "",
+            package_size: p.package_size ?? "", min_stock: minDisplay,
             group_id: p.group_id ?? "",
           });
           setLots(await api.listLots(id));
@@ -99,6 +121,12 @@ export default function ProductForm() {
   }, [id]);
 
   function buildPayload() {
+    const ps = Number(form.package_size);
+    let minBase = null;
+    if (form.min_stock !== "") {
+      const v = Number(form.min_stock);
+      minBase = minUnit === "package" && ps > 0 ? v * ps : v;
+    }
     return {
       barcode: form.barcode || null,
       name: form.name,
@@ -106,7 +134,7 @@ export default function ProductForm() {
       image_url: form.image_url || null,
       base_unit: form.base_unit,
       package_size: form.package_size === "" ? null : Number(form.package_size),
-      min_stock: form.min_stock === "" ? null : Number(form.min_stock),
+      min_stock: minBase,
       group_id: form.group_id === "" ? null : Number(form.group_id),
     };
   }
@@ -195,8 +223,16 @@ export default function ProductForm() {
           <div className="row">
             <label className="grow">
               Mindestbestand
-              <input type="number" step="any" value={form.min_stock}
-                onChange={(e) => set("min_stock", e.target.value)} disabled={readOnly} />
+              <div className="field-inline">
+                <input type="number" step="any" value={form.min_stock}
+                  onChange={(e) => set("min_stock", e.target.value)} disabled={readOnly}
+                  placeholder="z.B. 2" />
+                <select value={minUnit} onChange={(e) => changeMinUnit(e.target.value)}
+                  disabled={readOnly} style={{ maxWidth: 140, marginTop: 0 }}>
+                  <option value="base">{unitShort(form.base_unit)}</option>
+                  {form.package_size && <option value="package">Packung(en)</option>}
+                </select>
+              </div>
             </label>
             <label className="grow">
               Gruppe

web/src/pages/ShoppingList.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
-import { fmt, unitShort } from "../units";
+import { amountText, fmt, unitShort } from "../units";
 
 export default function ShoppingList() {
   const [items, setItems] = useState([]);
@@ -60,8 +60,8 @@ export default function ShoppingList() {
                     <span className="item-name">{it.name}</span>
                   </label>
                   <span className="muted small">
-                    fehlt <strong>{fmt(it.deficit)} {unitShort(it.base_unit)}</strong>{" "}
-                    (Bestand {fmt(it.stock)} / min {fmt(it.min_stock)})
+                    fehlt <strong>{amountText(it.deficit, it.package_size, it.base_unit)}</strong>{" "}
+                    (Bestand {amountText(it.stock, it.package_size, it.base_unit)})
                   </span>
                 </li>
               );