From 2c9ca3ed3e118c7630b5ca87797c32f887b076e9 Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Fri, 4 Sep 2026 09:29:56 +0200
Subject: [PATCH] =?UTF-8?q?Admin-Portal:=20Tab-Men=C3=BC=20statt=20einer?=
 =?UTF-8?q?=20langen=20Scroll-Seite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt
---
 frontend/src/pages/AdminPage.tsx | 92 +++++++++++++++++++++++---------
 1 file changed, 66 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 540b1d2..c00660a 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/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} />
-      <KategorieSection bereiche={bereiche} kategorien={kategorien} onGeaendert={ladeAlles} onFehler={setFehler} />
-      <ObjekttypSection
-        bereiche={bereiche}
-        kategorien={kategorien}
-        objekttypen={objekttypen}
-        onGeaendert={ladeAlles}
-        onFehler={setFehler}
-      />
-      <MaterialSection materialien={materialien} onGeaendert={ladeAlles} onFehler={setFehler} />
-      <VorlageSection
-        vorlagen={vorlagen}
-        objekttypen={objekttypen}
-        materialien={materialien}
-        onGeaendert={ladeAlles}
-        onFehler={setFehler}
-      />
-      <StandortSection standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
-      <ObjektSection
-        objekte={objekte}
-        vorlagen={vorlagen.filter((v) => v.status === "aktiv")}
-        standorte={standorte}
-        materialien={materialien}
-        onGeaendert={ladeAlles}
-        onFehler={setFehler}
-      />
+      <nav className="row" style={{ marginBottom: "1.25rem", flexWrap: "wrap", gap: "0.5rem" }}>
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            className={tab === t.key ? "btn btn-primary" : "btn btn-secondary"}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </nav>
+
+      {tab === "objekte" && (
+        <ObjektSection
+          objekte={objekte}
+          vorlagen={vorlagen.filter((v) => v.status === "aktiv")}
+          standorte={standorte}
+          materialien={materialien}
+          onGeaendert={ladeAlles}
+          onFehler={setFehler}
+        />
+      )}
+      {tab === "vorlagen" && (
+        <VorlageSection
+          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>
   );
 }