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>
   );
 }