Expand admin navigation and pages

2026-06-18 00:21:40 +02:00
parent 178f014a4a
commit 0fa763667d
9 changed files with 1097 additions and 35 deletions
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { BarChart3, CheckCircle2, Tags, Users, Vote } from '@lucide/vue'
+
+import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
+import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
+import Card from '../../components/ui/Card.vue'
+import { useAwardsStore } from '../../stores/awards'
+
+const store = useAwardsStore()
+const seasonDetail = computed(() => store.adminSeasonDetail)
+const totalVotes = computed(() => store.admin.metrics.find((metric) => metric.label === 'Stimmen')?.value ?? 0)
+const maxVotes = computed(() => Math.max(...store.admin.topCategories.map((category) => category.votes), 1))
+const votingReadiness = computed(() =>
+  seasonDetail.value.categories.map((category) => {
+    const candidateCount = seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === category.id).length
+    return {
+      ...category,
+      candidateCount,
+      ready: candidateCount > 0 && seasonDetail.value.currentPhase.toLowerCase().includes('voting'),
+    }
+  }),
+)
+const readyCount = computed(() => votingReadiness.value.filter((category) => category.ready).length)
+const stats = computed(() => [
+  { label: 'Stimmen gesamt', value: totalVotes.value, icon: Vote },
+  { label: 'Voting-ready', value: readyCount.value, icon: CheckCircle2 },
+  { label: 'Kategorien', value: seasonDetail.value.categories.length, icon: Tags },
+  { label: 'Kandidaten', value: seasonDetail.value.candidates.length, icon: Users },
+])
+</script>
+
+<template>
+  <div class="space-y-6">
+    <AdminPageHeader
+      eyebrow="Voting"
+      title="Voting-Status und Rankings"
+      description="Pruefe, ob Kategorien Kandidaten besitzen, ob das Jahr in der richtigen Phase ist und welche Kategorien aktuell die meiste Aktivitaet erzeugen."
+      :icon="Vote"
+    />
+
+    <AdminSeasonToolbar />
+
+    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <Card v-for="stat in stats" :key="stat.label" class="p-5">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">{{ stat.label }}</p>
+            <strong class="mt-3 block text-3xl text-violet-900">{{ stat.value.toLocaleString('de-DE') }}</strong>
+          </div>
+          <div class="grid h-10 w-10 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+            <component :is="stat.icon" class="h-5 w-5" />
+          </div>
+        </div>
+      </Card>
+    </section>
+
+    <section class="grid gap-6 xl:grid-cols-[1.08fr_0.92fr]">
+      <Card class="p-6">
+        <div class="flex items-end justify-between gap-4">
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Ranking</p>
+            <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Top Kategorien</h2>
+          </div>
+          <BarChart3 class="h-6 w-6 text-violet-500" />
+        </div>
+
+        <div class="mt-6 space-y-4">
+          <div v-for="(category, index) in store.admin.topCategories" :key="category.category" class="rounded-[22px] border border-violet-100 bg-white/90 p-4">
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-violet-500">#{{ index + 1 }}</p>
+                <h3 class="mt-1 font-semibold text-slate-900">{{ category.category }}</h3>
+              </div>
+              <strong class="text-violet-800">{{ category.votes.toLocaleString('de-DE') }}</strong>
+            </div>
+            <div class="mt-3 h-3 overflow-hidden rounded-full bg-violet-50">
+              <div class="h-full rounded-full bg-[linear-gradient(90deg,#a78bfa,#f5a9d6)]" :style="{ width: `${(category.votes / maxVotes) * 100}%` }" />
+            </div>
+          </div>
+          <p v-if="store.admin.topCategories.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-5 py-8 text-center text-sm text-slate-500">
+            Noch keine Voting-Daten vorhanden.
+          </p>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-violet-100 p-5">
+          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Readiness</p>
+          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Kategorie-Check</h2>
+        </div>
+        <div class="max-h-[620px] divide-y divide-violet-50 overflow-y-auto">
+          <div v-for="category in votingReadiness" :key="category.id" class="grid grid-cols-[minmax(0,1fr)_auto] gap-4 px-5 py-4">
+            <div class="min-w-0">
+              <p class="truncate font-semibold text-slate-900">{{ category.name }}</p>
+              <p class="mt-1 truncate text-sm text-slate-500">{{ category.groupName }} · {{ category.candidateCount }} Kandidaten</p>
+            </div>
+            <span class="h-fit rounded-full border px-3 py-1 text-xs font-semibold" :class="category.ready ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-amber-100 bg-amber-50 text-amber-700'">
+              {{ category.ready ? 'bereit' : 'pruefen' }}
+            </span>
+          </div>
+        </div>
+      </Card>
+    </section>
+  </div>
+</template>