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/Dashboard.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../api";
+import { fmt, unitShort } from "../units";
+
+export default function Dashboard() {
+  const [expiring, setExpiring] = useState([]);
+  const [shopping, setShopping] = useState([]);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [e, s] = await Promise.all([api.expiring(), api.shoppingList()]);
+        setExpiring(e);
+        setShopping(s);
+      } catch (err) {
+        setError(err.message);
+      }
+    }
+    load();
+  }, []);
+
+  return (
+    <div>
+      <div className="page-head">
+        <h1>Übersicht</h1>
+        <div className="actions">
+          <Link className="btn primary" to="/checkin">Einlagern</Link>
+          <Link className="btn" to="/checkout">Auslagern</Link>
+        </div>
+      </div>
+      {error && <div className="alert error">{error}</div>}
+
+      <div className="grid-2">
+        <section className="card">
+          <h2>⏰ Bald ablaufend</h2>
+          {expiring.length === 0 ? (
+            <p className="muted">Nichts läuft demnächst ab. 🎉</p>
+          ) : (
+            <table className="table">
+              <thead>
+                <tr><th>Produkt</th><th>Menge</th><th>MHD</th><th>Tage</th></tr>
+              </thead>
+              <tbody>
+                {expiring.map((it) => (
+                  <tr key={it.lot_id} className={it.days_left < 0 ? "row-danger" : it.days_left <= 2 ? "row-warn" : ""}>
+                    <td>{it.product_name}</td>
+                    <td>{fmt(it.quantity)} {unitShort(it.base_unit)}</td>
+                    <td>{it.best_before}</td>
+                    <td>{it.days_left < 0 ? `${-it.days_left} überf.` : it.days_left}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </section>
+
+        <section className="card">
+          <h2>🛒 Einkaufsliste</h2>
+          {shopping.length === 0 ? (
+            <p className="muted">Alle Mindestbestände erreicht. 👍</p>
+          ) : (
+            <table className="table">
+              <thead>
+                <tr><th>Produkt</th><th>Bestand</th><th>Mindest</th><th>Fehlt</th></tr>
+              </thead>
+              <tbody>
+                {shopping.map((it) => (
+                  <tr key={it.product_id}>
+                    <td>{it.name}</td>
+                    <td>{fmt(it.stock)} {unitShort(it.base_unit)}</td>
+                    <td>{fmt(it.min_stock)}</td>
+                    <td className="strong">{fmt(it.deficit)} {unitShort(it.base_unit)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}