Schritt 1: Fundament der Lebensmittel-Lagerverwaltung (Pantry)

Backend (FastAPI + PostgreSQL): Chargen mit MHD, FEFO-Auslagern,
Einheiten-Umrechnung (Stueck/g/ml + Packungen), Open-Food-Facts-Lookup
mit lokalem Fallback, JWT-Auth mit Rollen (Admin/Nutzer), erster Admin
beim Setup, Einkaufsliste, Ablaufwarnung, Lagerorte, pytest fuer FEFO.

Web-UI (React/Vite): Login, Dashboard, Ein-/Auslagern, Produkte,
Lagerorte, Benutzerverwaltung, Einkaufsliste - rollenabhaengig.

Deploy: docker-compose + install.sh (Docker-Autoinstall, Secrets),
README und Roadmap fuer Schritt 2 (iOS) und Schritt 3.

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

web/src/pages/ShoppingList.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import { fmt, unitShort } from "../units";
+
+export default function ShoppingList() {
+  const [items, setItems] = useState([]);
+  const [checked, setChecked] = useState({});
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    api.shoppingList().then(setItems).catch((e) => setError(e.message));
+  }, []);
+
+  return (
+    <div>
+      <div className="page-head"><h1>🛒 Einkaufsliste</h1></div>
+      {error && <div className="alert error">{error}</div>}
+      <p className="muted">
+        Produkte, deren Bestand unter dem hinterlegten Mindestbestand liegt.
+      </p>
+      <div className="card">
+        {items.length === 0 ? (
+          <p className="muted">Alle Mindestbestände erreicht. 👍</p>
+        ) : (
+          <ul className="checklist">
+            {items.map((it) => (
+              <li key={it.product_id} className={checked[it.product_id] ? "done" : ""}>
+                <label>
+                  <input type="checkbox" checked={!!checked[it.product_id]}
+                    onChange={(e) => setChecked({ ...checked, [it.product_id]: e.target.checked })} />
+                  <span className="item-name">{it.name}</span>
+                </label>
+                <span className="item-qty">
+                  fehlt <strong>{fmt(it.deficit)} {unitShort(it.base_unit)}</strong>
+                  <span className="muted"> (Bestand {fmt(it.stock)} / min {fmt(it.min_stock)})</span>
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <p className="muted small">
+        Das Abhaken dient hier nur der Übersicht beim Einkaufen und wird (noch) nicht gespeichert.
+      </p>
+    </div>
+  );
+}