Improve admin year context toolbar

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,21 +24,43 @@ 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="rounded-[26px] border border-violet-100 bg-white/85 p-4 shadow-[0_18px_46px_rgba(168,145,214,0.09)]">
-    <div class="flex flex-wrap items-center gap-2">
+    <div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-center">
-      <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Jahr</p>
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
-      <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
+        <div class="flex min-w-0 items-center gap-3">
-          {{ currentSeason.currentPhase || 'Kein Status' }}
+          <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
-      </span>
+            <CalendarCog class="h-5 w-5" />
-      <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
+          </div>
-          {{ currentSeason.isCurrent ? 'Oeffentliches Jahr' : 'Nicht aktiv' }}
+          <div class="min-w-0">
-      </span>
+            <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="lg:min-w-[330px]">
+        <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"
@@ -47,4 +70,19 @@ const currentSeason = computed(() => store.adminSeasonDetail)
         />
       </div>
     </div>
+
+    <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>