Sprint 8: modernes Design-System für die React-PWA

Gemeinsames Stylesheet (Tokens, Karten, Buttons, Badges, Formulare) plus
AppShell (Kopfzeile mit Navigation/Logout) statt Inline-Styles je Screen.
Kein UI-Framework als neue Abhängigkeit - schlankes eigenes CSS, damit
Build/Deploy-Weg unverändert bleibt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt

frontend/src/pages/AdminPage.tsx

@@ -15,12 +15,16 @@ export function AdminPage() {
   const [vorlagen, setVorlagen] = useState<Beladungsvorlage[]>([]);
   const [objekte, setObjekte] = useState<Objekt[]>([]);
   const [fehler, setFehler] = useState<string | null>(null);
+  const [laedt, setLaedt] = useState(true);
 
   const [standortName, setStandortName] = useState("");
+  const [standortWirdAngelegt, setStandortWirdAngelegt] = useState(false);
+
   const [objektCode, setObjektCode] = useState("");
   const [objektName, setObjektName] = useState("");
   const [vorlageId, setVorlageId] = useState<number | "">("");
   const [standortId, setStandortId] = useState<number | "">("");
+  const [objektWirdAngelegt, setObjektWirdAngelegt] = useState(false);
 
   async function ladeAlles() {
     const [s, v, o] = await Promise.all([
@@ -34,17 +38,22 @@ export function AdminPage() {
   }
 
   useEffect(() => {
-    ladeAlles().catch(() => setFehler("Stammdaten konnten nicht geladen werden."));
+    ladeAlles()
+      .catch(() => setFehler("Stammdaten konnten nicht geladen werden."))
+      .finally(() => setLaedt(false));
   }, []);
 
   async function standortAnlegen() {
     setFehler(null);
+    setStandortWirdAngelegt(true);
     try {
       await apiRequest("/standorte", { method: "POST", body: { name: standortName } });
       setStandortName("");
       await ladeAlles();
     } catch {
       setFehler("Standort konnte nicht angelegt werden.");
+    } finally {
+      setStandortWirdAngelegt(false);
     }
   }
 
@@ -54,6 +63,7 @@ export function AdminPage() {
       return;
     }
     setFehler(null);
+    setObjektWirdAngelegt(true);
     const vorlage = vorlagen.find((v) => v.id === vorlageId);
     try {
       await apiRequest("/objekte", {
@@ -71,65 +81,123 @@ export function AdminPage() {
       await ladeAlles();
     } catch {
       setFehler("Objekt konnte nicht angelegt werden (Code evtl. schon vergeben).");
+    } finally {
+      setObjektWirdAngelegt(false);
     }
   }
 
+  if (laedt) {
+    return (
+      <main className="page">
+        <p className="text-muted">Lade…</p>
+      </main>
+    );
+  }
+
   return (
-    <div style={{ padding: 16, maxWidth: 640, margin: "0 auto" }}>
+    <main className="page">
       <h1>Administration</h1>
-      {fehler && <p style={{ color: "red" }}>{fehler}</p>}
+      {fehler && <div className="alert alert-danger">{fehler}</div>}
 
-      <section style={{ marginBottom: 32 }}>
+      <section className="section">
         <h2>Standort anlegen</h2>
-        <input
-          value={standortName}
-          onChange={(e) => setStandortName(e.target.value)}
-          placeholder="Name"
-        />
-        <button onClick={standortAnlegen} disabled={!standortName}>
-          Anlegen
-        </button>
-        <ul>
-          {standorte.map((s) => (
-            <li key={s.id}>{s.name}</li>
-          ))}
-        </ul>
-      </section>
-
-      <section>
-        <h2>Objekt aus Vorlage anlegen</h2>
-        <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 320 }}>
-          <select value={vorlageId} onChange={(e) => setVorlageId(Number(e.target.value) || "")}>
-            <option value="">Vorlage wählen…</option>
-            {vorlagen.map((v) => (
-              <option key={v.id} value={v.id}>
-                {v.name} (v{v.version})
-              </option>
-            ))}
-          </select>
-          <select value={standortId} onChange={(e) => setStandortId(Number(e.target.value) || "")}>
-            <option value="">Standort wählen…</option>
-            {standorte.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.name}
-              </option>
-            ))}
-          </select>
-          <input value={objektCode} onChange={(e) => setObjektCode(e.target.value)} placeholder="Code (eindeutig)" />
-          <input value={objektName} onChange={(e) => setObjektName(e.target.value)} placeholder="Name" />
-          <button onClick={objektAnlegen} disabled={!objektCode || !objektName}>
-            Anlegen
-          </button>
+        <div className="card">
+          <div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
+            <input
+              className="input"
+              value={standortName}
+              onChange={(e) => setStandortName(e.target.value)}
+              placeholder="Name des Standorts"
+            />
+            <button
+              className="btn btn-primary"
+              onClick={standortAnlegen}
+              disabled={!standortName || standortWirdAngelegt}
+            >
+              Anlegen
+            </button>
+          </div>
+          {standorte.length > 0 && (
+            <ul className="card-list">
+              {standorte.map((s) => (
+                <li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                  <span>{s.name}</span>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
-
-        <ul>
-          {objekte.map((o) => (
-            <li key={o.id}>
-              {o.name} ({o.code})
-            </li>
-          ))}
-        </ul>
       </section>
-    </div>
+
+      <section className="section">
+        <h2>Objekt aus Vorlage anlegen</h2>
+        <div className="card">
+          {vorlagen.length === 0 ? (
+            <p className="text-muted">
+              Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
+            </p>
+          ) : (
+            <div className="stack">
+              <div className="field">
+                <label>Vorlage</label>
+                <select
+                  className="input"
+                  value={vorlageId}
+                  onChange={(e) => setVorlageId(Number(e.target.value) || "")}
+                >
+                  <option value="">Vorlage wählen…</option>
+                  {vorlagen.map((v) => (
+                    <option key={v.id} value={v.id}>
+                      {v.name} (v{v.version})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="field">
+                <label>Standort</label>
+                <select
+                  className="input"
+                  value={standortId}
+                  onChange={(e) => setStandortId(Number(e.target.value) || "")}
+                >
+                  <option value="">Standort wählen…</option>
+                  {standorte.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="field">
+                <label>Code (eindeutig)</label>
+                <input className="input" value={objektCode} onChange={(e) => setObjektCode(e.target.value)} />
+              </div>
+              <div className="field">
+                <label>Name</label>
+                <input className="input" value={objektName} onChange={(e) => setObjektName(e.target.value)} />
+              </div>
+              <button
+                className="btn btn-primary"
+                onClick={objektAnlegen}
+                disabled={!objektCode || !objektName || objektWirdAngelegt}
+              >
+                Anlegen
+              </button>
+            </div>
+          )}
+
+          {objekte.length > 0 && (
+            <ul className="card-list" style={{ marginTop: "1.25rem" }}>
+              {objekte.map((o) => (
+                <li key={o.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                  <span>{o.name}</span>
+                  <span className="text-muted">{o.code}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+    </main>
   );
 }

frontend/src/pages/KontrollPage.tsx

@@ -170,71 +170,74 @@ export function KontrollPage() {
 
   if (sperre) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+      <main className="page">
         <h1>Objekt gesperrt</h1>
-        <p>
-          Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
-        </p>
-        <button onClick={() => starteKontrolle(true)} style={{ padding: "0.75rem 1.5rem" }}>
-          Trotzdem übernehmen
-        </button>
+        <div className="card">
+          <p>
+            Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
+          </p>
+          <button className="btn btn-primary" onClick={() => starteKontrolle(true)}>
+            Trotzdem übernehmen
+          </button>
+        </div>
       </main>
     );
   }
 
   if (startFehler) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
-        <p style={{ color: "crimson" }}>{startFehler}</p>
-        <button onClick={() => starteKontrolle(false)}>Erneut versuchen</button>
+      <main className="page">
+        <div className="alert alert-danger">{startFehler}</div>
+        <button className="btn btn-secondary" onClick={() => starteKontrolle(false)}>
+          Erneut versuchen
+        </button>
       </main>
     );
   }
 
   return (
-    <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+    <main className="page">
       <h1>{objekt?.name ?? "Kontrolle"}</h1>
       {!online && (
-        <p style={{ background: "#fff3cd", padding: "0.5rem", borderRadius: 4 }}>
-          Kein Netz - Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
-        </p>
+        <div className="alert alert-warning">
+          Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
+        </div>
       )}
-      <ul style={{ listStyle: "none", padding: 0 }}>
+      <ul className="card-list" style={{ marginBottom: "1.25rem" }}>
         {positionen.map((zustand) => (
-          <li
-            key={zustand.position.id}
-            style={{
-              border: "1px solid #ccc",
-              borderRadius: 8,
-              padding: "0.75rem",
-              marginBottom: "0.5rem",
-            }}
-          >
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <li key={zustand.position.id} className="card">
+            <div className="card-title-row">
               <strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
               <StatusBadge status={zustand.status} />
             </div>
-            <div style={{ fontSize: "0.85rem", color: "#666" }}>
+            <div className="card-subtitle">
               Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
             </div>
-            <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+            <div className="row" style={{ marginTop: "0.6rem" }}>
               <input
                 type="number"
+                className="input"
                 value={zustand.eingabe}
                 onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
-                style={{ width: "5rem", fontSize: "1.1rem", padding: "0.5rem" }}
+                style={{ width: "6rem" }}
               />
               <button
+                className="btn btn-primary"
+                style={{ flex: 1 }}
                 onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
-                style={{ flex: 1, fontSize: "1.1rem" }}
               >
                 Bestätigen
               </button>
             </div>
             {zustand.status === "fehler" && (
-              <div style={{ marginTop: "0.5rem" }}>
-                <p style={{ color: "crimson", margin: 0 }}>{zustand.fehlerText}</p>
-                <button onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}>
+              <div style={{ marginTop: "0.6rem" }}>
+                <p className="text-muted" style={{ color: "var(--color-danger)" }}>
+                  {zustand.fehlerText}
+                </p>
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}
+                >
                   Erneut versuchen
                 </button>
               </div>
@@ -243,29 +246,31 @@ export function KontrollPage() {
         ))}
       </ul>
 
-      {abschlussFehler && <p style={{ color: "crimson" }}>{abschlussFehler}</p>}
-      <button
-        onClick={abschliessen}
-        disabled={!alleUebertragen || wirdAbgeschlossen}
-        style={{ width: "100%", padding: "1rem", fontSize: "1.2rem" }}
-      >
-        {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
-      </button>
-      <button onClick={abbrechen} style={{ width: "100%", padding: "0.75rem", marginTop: "0.5rem" }}>
-        Kontrolle abbrechen
-      </button>
+      {abschlussFehler && <div className="alert alert-danger">{abschlussFehler}</div>}
+      <div className="stack">
+        <button
+          className="btn btn-primary btn-block"
+          onClick={abschliessen}
+          disabled={!alleUebertragen || wirdAbgeschlossen}
+        >
+          {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
+        </button>
+        <button className="btn btn-danger btn-block" onClick={abbrechen}>
+          Kontrolle abbrechen
+        </button>
+      </div>
     </main>
   );
 }
 
 function StatusBadge({ status }: { status: PositionStatus }) {
-  const konfiguration: Record<PositionStatus, { text: string; farbe: string }> = {
-    unbestaetigt: { text: "offen", farbe: "#999" },
-    wartet: { text: "nicht gespeichert", farbe: "#e0a800" },
-    wird_uebertragen: { text: "wird übertragen…", farbe: "#e0a800" },
-    gespeichert: { text: "gespeichert", farbe: "#2e7d32" },
-    fehler: { text: "Fehler", farbe: "#c62828" },
+  const konfiguration: Record<PositionStatus, { text: string; klasse: string }> = {
+    unbestaetigt: { text: "offen", klasse: "badge-neutral" },
+    wartet: { text: "nicht gespeichert", klasse: "badge-warning" },
+    wird_uebertragen: { text: "wird übertragen…", klasse: "badge-warning" },
+    gespeichert: { text: "gespeichert", klasse: "badge-success" },
+    fehler: { text: "Fehler", klasse: "badge-danger" },
   };
-  const { text, farbe } = konfiguration[status];
-  return <span style={{ color: farbe, fontWeight: "bold" }}>{text}</span>;
+  const { text, klasse } = konfiguration[status];
+  return <span className={`badge ${klasse}`}>{text}</span>;
 }

frontend/src/pages/LoginPage.tsx

@@ -26,37 +26,41 @@ export function LoginPage() {
   }
 
   return (
-    <main style={{ maxWidth: 320, margin: "4rem auto", padding: "0 1rem" }}>
-      <h1>MABEA</h1>
-      <form onSubmit={handleSubmit}>
-        <label>
-          Login
-          <input
-            style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            autoComplete="username"
-          />
-        </label>
-        <label style={{ display: "block", marginTop: "1rem" }}>
-          Passwort
-          <input
-            style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            autoComplete="current-password"
-          />
-        </label>
-        {fehler && <p style={{ color: "crimson" }}>{fehler}</p>}
-        <button
-          type="submit"
-          disabled={wirdGeladen}
-          style={{ marginTop: "1rem", width: "100%", fontSize: "1.2rem", padding: "0.75rem" }}
-        >
-          {wirdGeladen ? "Wird geprüft…" : "Anmelden"}
-        </button>
-      </form>
+    <main className="page page-narrow" style={{ marginTop: "4rem" }}>
+      <div className="card">
+        <h1 style={{ color: "var(--color-primary)" }}>MABEA</h1>
+        <p className="text-muted" style={{ marginBottom: "1.5rem" }}>
+          Digitales Materialmanagement
+        </p>
+        <form onSubmit={handleSubmit}>
+          <div className="field">
+            <label htmlFor="login">Login</label>
+            <input
+              id="login"
+              className="input"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              autoFocus
+            />
+          </div>
+          <div className="field">
+            <label htmlFor="password">Passwort</label>
+            <input
+              id="password"
+              className="input"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+            />
+          </div>
+          {fehler && <div className="alert alert-danger">{fehler}</div>}
+          <button type="submit" className="btn btn-primary btn-block" disabled={wirdGeladen}>
+            {wirdGeladen ? "Wird geprüft…" : "Anmelden"}
+          </button>
+        </form>
+      </div>
     </main>
   );
 }

frontend/src/pages/ObjektListPage.tsx

@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 
 import { apiRequest } from "../api/client";
 import type { Objekt } from "../api/types";
-import { useAuth } from "../auth/AuthContext";
 
 // Prompt 11 Screen 1: Standort/Objekt wählen. QR-/Barcode-Scan (Karte 10) ist
 // Roadmap - dieser Screen bietet bewusst schon die Code-Suche als Textfeld an,
@@ -12,12 +11,13 @@ export function ObjektListPage() {
   const [objekte, setObjekte] = useState<Objekt[]>([]);
   const [suche, setSuche] = useState("");
   const [ladefehler, setLadefehler] = useState<string | null>(null);
-  const { istAdmin } = useAuth();
+  const [laedt, setLaedt] = useState(true);
 
   useEffect(() => {
     apiRequest<Objekt[]>("/objekte")
       .then(setObjekte)
-      .catch(() => setLadefehler("Objektliste konnte nicht geladen werden."));
+      .catch(() => setLadefehler("Objektliste konnte nicht geladen werden."))
+      .finally(() => setLaedt(false));
   }, []);
 
   const gefiltert = objekte.filter(
@@ -27,36 +27,31 @@ export function ObjektListPage() {
   );
 
   return (
-    <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+    <main className="page">
       <h1>Objekte</h1>
-      {istAdmin && (
-        <Link to="/admin" style={{ display: "inline-block", marginBottom: "1rem" }}>
-          Administration →
-        </Link>
-      )}
       <input
+        className="input input-search"
         placeholder="Suche oder Code scannen…"
         value={suche}
         onChange={(e) => setSuche(e.target.value)}
-        style={{ width: "100%", fontSize: "1.2rem", padding: "0.75rem", marginBottom: "1rem" }}
+        style={{ marginBottom: "1.25rem" }}
       />
-      {ladefehler && <p style={{ color: "crimson" }}>{ladefehler}</p>}
-      <ul style={{ listStyle: "none", padding: 0 }}>
+      {ladefehler && <div className="alert alert-danger">{ladefehler}</div>}
+      {laedt && <p className="text-muted">Lade…</p>}
+      {!laedt && !ladefehler && gefiltert.length === 0 && (
+        <p className="text-muted">
+          {objekte.length === 0 ? "Noch keine Objekte angelegt." : "Keine Treffer."}
+        </p>
+      )}
+      <ul className="card-list">
         {gefiltert.map((objekt) => (
-          <li key={objekt.id} style={{ marginBottom: "0.5rem" }}>
-            <Link
-              to={`/objekte/${objekt.id}/kontrolle`}
-              style={{
-                display: "block",
-                padding: "1rem",
-                border: "1px solid #ccc",
-                borderRadius: 8,
-                textDecoration: "none",
-                color: "inherit",
-              }}
-            >
-              <strong>{objekt.name}</strong>
-              <div style={{ fontSize: "0.9rem", color: "#666" }}>{objekt.code}</div>
+          <li key={objekt.id}>
+            <Link to={`/objekte/${objekt.id}/kontrolle`} className="card card-link">
+              <div className="card-title-row">
+                <strong>{objekt.name}</strong>
+                <span className="badge badge-neutral">{objekt.status}</span>
+              </div>
+              <div className="card-subtitle">{objekt.code}</div>
             </Link>
           </li>
         ))}