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,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+
+import Card from '../../components/ui/Card.vue'
+import { useAwardsStore } from '../../stores/awards'
+
+const store = useAwardsStore()
+
+const metrics = computed(() => store.admin.metrics)
+const activities = computed(() => store.admin.activities)
+const topCategories = computed(() => store.admin.topCategories)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="grid gap-5 lg:grid-cols-4">
+      <Card
+        v-for="metric in metrics"
+        :key="metric.label"
+        class="p-7"
+      >
+        <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ metric.label }}</p>
+        <strong class="mt-4 block text-4xl text-violet-800">{{ metric.value.toLocaleString('de-DE') }}</strong>
+        <p class="mt-2 text-sm text-slate-500">{{ metric.note }}</p>
+      </Card>
+    </div>
+
+    <div class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
+      <Card class="p-7">
+        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Top Kategorien nach Votes</h2>
+        <DataTable :value="topCategories" class="mt-6" striped-rows>
+          <Column field="category" header="Kategorie" />
+          <Column field="votes" header="Votes">
+            <template #body="{ data }">
+              {{ Number(data.votes).toLocaleString('de-DE') }}
+            </template>
+          </Column>
+        </DataTable>
+      </Card>
+
+      <Card class="p-7">
+        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Letzte Aktivitaeten</h2>
+        <div class="mt-6 space-y-4">
+          <div
+            v-for="activity in activities"
+            :key="activity.label"
+            class="rounded-[26px] border border-violet-100 bg-violet-50/60 px-5 py-5"
+          >
+            <p class="font-semibold text-slate-800">{{ activity.label }}</p>
+            <p class="mt-1 text-sm text-slate-500">{{ activity.age }}</p>
+          </div>
+          <p v-if="activities.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
+            Noch keine aktuellen Audit-Aktivitaeten vorhanden.
+          </p>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>