Refactor admin panel into categorized navigation

2026-06-17 12:37:17 +02:00
parent 92dd6f7432
commit 953257bcef
11 changed files with 901 additions and 660 deletions
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+
+import Card from '../../components/ui/Card.vue'
+import { useAwardsStore } from '../../stores/awards'
+import { useAuthStore } from '../../stores/auth'
+
+const route = useRoute()
+const store = useAwardsStore()
+const authStore = useAuthStore()
+
+const navItems = [
+  { label: 'Dashboard', to: '/admin/dashboard', description: 'KPIs, Trends, letzte Aktivitaet' },
+  { label: 'Seasons', to: '/admin/seasons', description: 'Season-Status, Kategorien, Limits' },
+  { label: 'Candidates', to: '/admin/candidates', description: 'Kandidatenbasis pro Season pflegen' },
+  { label: 'Reviews', to: '/admin/reviews', description: 'Freitext-Nominierungen bearbeiten' },
+  { label: 'Risk & Audit', to: '/admin/risk', description: 'Flags pruefen, Aktionen nachvollziehen' },
+]
+
+const currentSeason = computed(() => store.adminSeasonDetail)
+
+onMounted(async () => {
+  if (!authStore.isAdmin) return
+  await store.initializeAdminWorkspace()
+})
+</script>
+
+<template>
+  <div class="space-y-8 pb-14">
+    <div class="space-y-4">
+      <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Admin</p>
+      <h1 class="max-w-[13ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">
+        Betriebswerkzeug fuer Awards, Moderation und Risiko-Sichtung
+      </h1>
+      <p class="max-w-3xl text-lg leading-8 text-slate-600">
+        Der Admin-Bereich ist in klar getrennte Arbeitszonen aufgeteilt, damit Season-Pflege, Review und Monitoring nicht mehr auf einer einzigen Seite kollidieren.
+      </p>
+    </div>
+
+    <div class="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]">
+      <Card class="h-fit p-4">
+        <nav class="space-y-2">
+          <RouterLink
+            v-for="item in navItems"
+            :key="item.to"
+            :to="item.to"
+            class="block rounded-[24px] border px-4 py-4 transition"
+            :class="route.path === item.to ? 'border-violet-200 bg-violet-100/80 text-violet-900' : 'border-transparent bg-white/70 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
+          >
+            <p class="text-sm font-semibold uppercase tracking-[0.18em]">{{ item.label }}</p>
+            <p class="mt-2 text-sm leading-6 text-slate-500">{{ item.description }}</p>
+          </RouterLink>
+        </nav>
+
+        <div class="mt-6 rounded-[24px] border border-violet-100 bg-violet-50/60 px-4 py-4">
+          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktive Season</p>
+          <h2 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">
+            {{ currentSeason.year ? `${currentSeason.year}` : 'Keine Season' }}
+          </h2>
+          <p class="mt-2 text-sm text-slate-600">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
+          <p class="mt-3 text-xs uppercase tracking-[0.2em] text-slate-500">{{ currentSeason.currentPhase || 'Kein Status' }}</p>
+        </div>
+      </Card>
+
+      <RouterView />
+    </div>
+  </div>
+</template>