Admin-Portal: Tab-Menü statt einer langen Scroll-Seite

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

frontend/src/pages/AdminPage.tsx

@@ -10,6 +10,16 @@ import { ObjekttypSection } from "./admin/ObjekttypSection";
 import { StandortSection } from "./admin/StandortSection";
 import { VorlageSection } from "./admin/VorlageSection";
 
+type Tab = "objekte" | "vorlagen" | "material" | "struktur" | "standorte";
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: "objekte", label: "Objekte" },
+  { key: "vorlagen", label: "Vorlagen" },
+  { key: "material", label: "Material" },
+  { key: "struktur", label: "Struktur" },
+  { key: "standorte", label: "Standorte" },
+];
+
 /**
  * Admin-Seite (Stammdaten/Objekt-Anlage), nachgezogen weil das Frontend
  * bisher nur den Mitarbeiter-Kontrollflow (Sprint 7) abdeckte und
@@ -29,6 +39,7 @@ export function AdminPage() {
   const [materialien, setMaterialien] = useState<Material[]>([]);
   const [fehler, setFehler] = useState<string | null>(null);
   const [laedt, setLaedt] = useState(true);
+  const [tab, setTab] = useState<Tab>("objekte");
 
   async function ladeAlles() {
     const [be, ka, ot, s, v, o, m] = await Promise.all([
@@ -68,32 +79,61 @@ export function AdminPage() {
       <h1>Administration</h1>
       {fehler && <div className="alert alert-danger">{fehler}</div>}
 
-      <BereichSection bereiche={bereiche} onGeaendert={ladeAlles} onFehler={setFehler} />
+      <nav className="row" style={{ marginBottom: "1.25rem", flexWrap: "wrap", gap: "0.5rem" }}>
-      <KategorieSection bereiche={bereiche} kategorien={kategorien} onGeaendert={ladeAlles} onFehler={setFehler} />
+        {TABS.map((t) => (
-      <ObjekttypSection
+          <button
-        bereiche={bereiche}
+            key={t.key}
-        kategorien={kategorien}
+            className={tab === t.key ? "btn btn-primary" : "btn btn-secondary"}
-        objekttypen={objekttypen}
+            onClick={() => setTab(t.key)}
-        onGeaendert={ladeAlles}
+          >
-        onFehler={setFehler}
+            {t.label}
-      />
+          </button>
-      <MaterialSection materialien={materialien} onGeaendert={ladeAlles} onFehler={setFehler} />
+        ))}
-      <VorlageSection
+      </nav>
-        vorlagen={vorlagen}
+
-        objekttypen={objekttypen}
+      {tab === "objekte" && (
-        materialien={materialien}
+        <ObjektSection
-        onGeaendert={ladeAlles}
+          objekte={objekte}
-        onFehler={setFehler}
+          vorlagen={vorlagen.filter((v) => v.status === "aktiv")}
-      />
+          standorte={standorte}
-      <StandortSection standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
+          materialien={materialien}
-      <ObjektSection
+          onGeaendert={ladeAlles}
-        objekte={objekte}
+          onFehler={setFehler}
-        vorlagen={vorlagen.filter((v) => v.status === "aktiv")}
+        />
-        standorte={standorte}
+      )}
-        materialien={materialien}
+      {tab === "vorlagen" && (
-        onGeaendert={ladeAlles}
+        <VorlageSection
-        onFehler={setFehler}
+          vorlagen={vorlagen}
-      />
+          objekttypen={objekttypen}
+          materialien={materialien}
+          onGeaendert={ladeAlles}
+          onFehler={setFehler}
+        />
+      )}
+      {tab === "material" && (
+        <MaterialSection materialien={materialien} onGeaendert={ladeAlles} onFehler={setFehler} />
+      )}
+      {tab === "struktur" && (
+        <>
+          <BereichSection bereiche={bereiche} onGeaendert={ladeAlles} onFehler={setFehler} />
+          <KategorieSection
+            bereiche={bereiche}
+            kategorien={kategorien}
+            onGeaendert={ladeAlles}
+            onFehler={setFehler}
+          />
+          <ObjekttypSection
+            bereiche={bereiche}
+            kategorien={kategorien}
+            objekttypen={objekttypen}
+            onGeaendert={ladeAlles}
+            onFehler={setFehler}
+          />
+        </>
+      )}
+      {tab === "standorte" && (
+        <StandortSection standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
+      )}
     </main>
   );
 }