From adaea5cbce9f43a32d2bc229def98a1d272c653b Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Wed, 17 Jun 2026 14:35:09 +0200
Subject: [PATCH] Improve admin year setup card

---
 frontend/src/views/admin/AdminSeasonsView.vue | 80 +++++++++++++------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/admin/AdminSeasonsView.vue b/frontend/src/views/admin/AdminSeasonsView.vue
index dcf2875..173ff02 100644
--- a/frontend/src/views/admin/AdminSeasonsView.vue
+++ b/frontend/src/views/admin/AdminSeasonsView.vue
@@ -144,42 +144,72 @@ async function createCategory() {
     <AdminSeasonToolbar />
 
     <div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
-      <Card class="p-7">
-        <div class="flex flex-col gap-6">
-          <div>
-            <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Jahres-Einrichtung</h2>
-            <p class="mt-2 text-sm text-slate-500">Phase, aktueller Status und Basiskontext fuer das aktive Award-Jahr.</p>
+      <Card class="overflow-hidden">
+        <div class="border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-[#f7eef8] p-6">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Jahresstatus</p>
+              <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Award-Jahr steuern</h2>
+              <p class="mt-2 max-w-xl text-sm leading-6 text-slate-500">
+                Hier legst du fest, in welcher Phase das Jahr ist und ob genau dieses Jahr oeffentlich fuer Community, Voting und Archiv sichtbar ist.
+              </p>
+            </div>
+            <div class="rounded-2xl border px-4 py-3 text-sm font-semibold" :class="seasonForm.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
+              {{ seasonForm.isCurrent ? 'Oeffentlich aktiv' : 'Intern vorbereitet' }}
+            </div>
           </div>
+        </div>
 
-          <div class="space-y-3">
-            <label class="text-sm font-semibold text-slate-600">Phase</label>
+        <div class="space-y-5 p-6">
+          <label class="block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Aktuelle Phase</span>
             <input
               v-model="seasonForm.currentPhase"
               type="text"
-              class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3"
+              class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
+              placeholder="z.B. Community Voting, Nominierung, Archiviert"
             />
-          </div>
-
-          <label class="flex items-center gap-3 rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-4 text-sm text-slate-700">
-            <input v-model="seasonForm.isCurrent" type="checkbox" class="h-4 w-4 accent-violet-600" />
-            Dieses Jahr ist das aktuell oeffentliche Award-Jahr
+            <span class="block text-xs leading-5 text-slate-500">
+              Diese Phase wird als Orientierung fuer Team und spaeter auch fuer Public-Kommunikation genutzt.
+            </span>
           </label>
 
-          <div class="flex flex-wrap items-center gap-4">
-            <Button :disabled="seasonSaving || !selectedSeasonId" @click="saveSeason">
-              {{ seasonSaving ? 'Speichert ...' : 'Jahr speichern' }}
-            </Button>
-            <span class="text-sm text-slate-500">
-              {{ seasonDetail.year }} · {{ seasonDetail.name }}
+          <label class="flex cursor-pointer gap-4 rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 transition hover:bg-violet-50">
+            <input v-model="seasonForm.isCurrent" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" />
+            <span>
+              <span class="block font-semibold text-slate-800">Dieses Award-Jahr oeffentlich schalten</span>
+              <span class="mt-1 block text-sm leading-6 text-slate-500">
+                Wenn aktiv, gilt dieses Jahr als aktueller Public-Kontext. Nur ein Award-Jahr sollte gleichzeitig oeffentlich sein.
+              </span>
             </span>
+          </label>
+
+          <div class="grid gap-3 sm:grid-cols-3">
+            <div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Jahr</p>
+              <strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.year || '-' }}</strong>
+            </div>
+            <div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Kategorien</p>
+              <strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.categories.length }}</strong>
+            </div>
+            <div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Kandidaten</p>
+              <strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.candidates.length }}</strong>
+            </div>
           </div>
 
-          <p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
-            {{ adminMessage }}
-          </p>
-          <p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-            {{ adminError }}
-          </p>
+          <div class="flex flex-col gap-3 border-t border-violet-100 pt-5 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-sm leading-6 text-slate-500">
+              Speichert Phase und Public-Status fuer <strong class="text-slate-700">{{ seasonDetail.name }}</strong>.
+            </p>
+            <Button :disabled="seasonSaving || !selectedSeasonId" @click="saveSeason">
+              {{ seasonSaving ? 'Speichert ...' : 'Jahresstatus speichern' }}
+            </Button>
+          </div>
+
+          <p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
+          <p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>
         </div>
       </Card>