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

@@ -0,0 +1,78 @@
+import { NavLink, Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { useAuth } from "./auth";
+import Login from "./pages/Login";
+import Dashboard from "./pages/Dashboard";
+import Products from "./pages/Products";
+import ProductForm from "./pages/ProductForm";
+import CheckIn from "./pages/CheckIn";
+import CheckOut from "./pages/CheckOut";
+import Locations from "./pages/Locations";
+import Users from "./pages/Users";
+import ShoppingList from "./pages/ShoppingList";
+
+function Layout({ children }) {
+  const { user, isAdmin, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate("/login");
+  }
+
+  const link = ({ isActive }) => (isActive ? "nav-link active" : "nav-link");
+
+  return (
+    <div className="app">
+      <header className="topbar">
+        <div className="brand">🥫 Pantry</div>
+        <nav className="nav">
+          <NavLink to="/" end className={link}>Übersicht</NavLink>
+          <NavLink to="/checkin" className={link}>Einlagern</NavLink>
+          <NavLink to="/checkout" className={link}>Auslagern</NavLink>
+          <NavLink to="/products" className={link}>Produkte</NavLink>
+          <NavLink to="/shopping" className={link}>Einkaufsliste</NavLink>
+          {isAdmin && <NavLink to="/locations" className={link}>Lagerorte</NavLink>}
+          {isAdmin && <NavLink to="/users" className={link}>Benutzer</NavLink>}
+        </nav>
+        <div className="userbox">
+          <span className="username">
+            {user?.username} {isAdmin && <span className="badge">Admin</span>}
+          </span>
+          <button className="btn ghost" onClick={handleLogout}>Abmelden</button>
+        </div>
+      </header>
+      <main className="content">{children}</main>
+    </div>
+  );
+}
+
+function Protected({ children, adminOnly = false }) {
+  const { user, isAdmin, loading } = useAuth();
+  if (loading) return <div className="center muted">Lädt…</div>;
+  if (!user) return <Navigate to="/login" replace />;
+  if (adminOnly && !isAdmin) return <Navigate to="/" replace />;
+  return <Layout>{children}</Layout>;
+}
+
+export default function App() {
+  const { user, loading } = useAuth();
+
+  return (
+    <Routes>
+      <Route
+        path="/login"
+        element={loading ? null : user ? <Navigate to="/" replace /> : <Login />}
+      />
+      <Route path="/" element={<Protected><Dashboard /></Protected>} />
+      <Route path="/checkin" element={<Protected><CheckIn /></Protected>} />
+      <Route path="/checkout" element={<Protected><CheckOut /></Protected>} />
+      <Route path="/products" element={<Protected><Products /></Protected>} />
+      <Route path="/products/new" element={<Protected adminOnly><ProductForm /></Protected>} />
+      <Route path="/products/:id" element={<Protected><ProductForm /></Protected>} />
+      <Route path="/shopping" element={<Protected><ShoppingList /></Protected>} />
+      <Route path="/locations" element={<Protected adminOnly><Locations /></Protected>} />
+      <Route path="/users" element={<Protected adminOnly><Users /></Protected>} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}