From f85a0d7c82b0533a47135d93d3a94861a5b0e39d Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Wed, 17 Jun 2026 14:29:37 +0200
Subject: [PATCH] Improve admin year context toolbar

---
 .../components/admin/AdminSeasonToolbar.vue   | 72 ++++++++++++++-----
 1 file changed, 55 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/admin/AdminSeasonToolbar.vue b/frontend/src/components/admin/AdminSeasonToolbar.vue
index 5690d87..e8a0661 100644
--- a/frontend/src/components/admin/AdminSeasonToolbar.vue
+++ b/frontend/src/components/admin/AdminSeasonToolbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import Select from 'primevue/select'
+import { CalendarCog, CheckCircle2, Clock3, Sparkles, Tags, Users } from '@lucide/vue'
 
 import { useAwardsStore } from '../../stores/awards'
 
@@ -23,28 +24,65 @@ const seasonOptions = computed(() =>
 )
 
 const currentSeason = computed(() => store.adminSeasonDetail)
+const yearStats = computed(() => [
+  { label: 'Kategorien', value: currentSeason.value.categories.length, icon: Tags },
+  { label: 'Kandidaten', value: currentSeason.value.candidates.length, icon: Users },
+  { label: 'Reviews', value: currentSeason.value.pendingNominations.length, icon: Sparkles },
+])
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 rounded-lg border border-violet-100 bg-white/80 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
-    <div class="flex flex-wrap items-center gap-2">
-      <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Jahr</p>
-      <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
-          {{ currentSeason.currentPhase || 'Kein Status' }}
-      </span>
-      <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
-          {{ currentSeason.isCurrent ? 'Oeffentliches Jahr' : 'Nicht aktiv' }}
-      </span>
+  <div class="rounded-[26px] border border-violet-100 bg-white/85 p-4 shadow-[0_18px_46px_rgba(168,145,214,0.09)]">
+    <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-center">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
+        <div class="flex min-w-0 items-center gap-3">
+          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
+            <CalendarCog class="h-5 w-5" />
+          </div>
+          <div class="min-w-0">
+            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktuelles Award-Jahr</p>
+            <h2 class="truncate text-xl font-semibold text-slate-900">
+              {{ currentSeason.year || 'Kein Jahr' }} · {{ currentSeason.name || 'Bitte Jahr auswaehlen' }}
+            </h2>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap gap-2 lg:ml-auto">
+          <span class="inline-flex items-center gap-2 rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-700">
+            <Clock3 class="h-3.5 w-3.5 text-violet-600" />
+            {{ currentSeason.currentPhase || 'Kein Status' }}
+          </span>
+          <span class="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold" :class="currentSeason.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
+            <CheckCircle2 class="h-3.5 w-3.5" />
+            {{ currentSeason.isCurrent ? 'Oeffentlich sichtbar' : 'Nicht oeffentlich' }}
+          </span>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <label class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Jahr wechseln</label>
+        <Select
+          v-model="selectedSeasonId"
+          :options="seasonOptions"
+          option-label="label"
+          option-value="value"
+          class="w-full"
+        />
+      </div>
     </div>
 
-    <div class="lg:min-w-[330px]">
-      <Select
-        v-model="selectedSeasonId"
-        :options="seasonOptions"
-        option-label="label"
-        option-value="value"
-        class="w-full"
-      />
+    <div class="mt-4 grid gap-2 sm:grid-cols-3">
+      <div
+        v-for="item in yearStats"
+        :key="item.label"
+        class="flex items-center justify-between rounded-2xl border border-violet-50 bg-violet-50/40 px-3 py-2"
+      >
+        <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
+          <component :is="item.icon" class="h-3.5 w-3.5 text-violet-500" />
+          {{ item.label }}
+        </span>
+        <strong class="text-violet-800">{{ item.value }}</strong>
+      </div>
     </div>
   </div>
 </template>