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

@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react";
+import { api } from "../api";
+import { useAuth } from "../auth";
+
+export default function Users() {
+  const { user: me } = useAuth();
+  const [users, setUsers] = useState([]);
+  const [form, setForm] = useState({ username: "", password: "", role: "user" });
+  const [error, setError] = useState(null);
+  const [info, setInfo] = useState(null);
+
+  async function load() {
+    try {
+      setUsers(await api.listUsers());
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function add(e) {
+    e.preventDefault();
+    setError(null); setInfo(null);
+    try {
+      await api.createUser(form);
+      setForm({ username: "", password: "", role: "user" });
+      setInfo("Benutzer angelegt.");
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  async function changeRole(u, role) {
+    try {
+      await api.updateUser(u.id, { role });
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  async function remove(u) {
+    if (!confirm(`Benutzer "${u.username}" löschen?`)) return;
+    try {
+      await api.deleteUser(u.id);
+      load();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <div>
+      <div className="page-head"><h1>Benutzer</h1></div>
+      {error && <div className="alert error">{error}</div>}
+      {info && <div className="alert info">{info}</div>}
+
+      <div className="grid-2">
+        <div className="card">
+          <h2>Benutzer</h2>
+          <table className="table">
+            <thead><tr><th>Name</th><th>Rolle</th><th></th></tr></thead>
+            <tbody>
+              {users.map((u) => (
+                <tr key={u.id}>
+                  <td>{u.username}{u.id === me.id && <span className="muted"> (du)</span>}</td>
+                  <td>
+                    <select value={u.role} onChange={(e) => changeRole(u, e.target.value)} disabled={u.id === me.id}>
+                      <option value="user">Nutzer</option>
+                      <option value="admin">Admin</option>
+                    </select>
+                  </td>
+                  <td>
+                    {u.id !== me.id && (
+                      <button className="btn ghost danger" onClick={() => remove(u)}>Löschen</button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <form className="card form-narrow" onSubmit={add}>
+          <h2>Neuer Benutzer</h2>
+          <label>
+            Benutzername
+            <input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
+          </label>
+          <label>
+            Passwort
+            <input type="password" value={form.password}
+              onChange={(e) => setForm({ ...form, password: e.target.value })} required minLength={4} />
+          </label>
+          <label>
+            Rolle
+            <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
+              <option value="user">Nutzer (nur ein-/auslagern)</option>
+              <option value="admin">Admin (volle Verwaltung)</option>
+            </select>
+          </label>
+          <button className="btn primary">Anlegen</button>
+        </form>
+      </div>
+    </div>
+  );
+}