Ersetze Willkommensnachricht durch Geburtstags-Widget mit dynamischer Anzeige der nächsten Geburtstage

pages/mitgliederbereich/index.vue

@@ -71,54 +71,56 @@
         </NuxtLink>
       </div>
 
-      <!-- Welcome Message -->
-      <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100">
-        <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-          Willkommen, {{ authStore.user?.name || 'Mitglied' }}!
-        </h2>
-        <p class="text-gray-600 mb-6">
-          Hier finden Sie alle wichtigen Informationen und Funktionen für Mitglieder des Harheimer TC.
-        </p>
-        <div class="grid sm:grid-cols-2 gap-4">
-          <div class="flex items-start">
-            <Check
-              :size="20"
-              class="text-primary-600 mr-2 mt-0.5"
-            />
-            <span class="text-gray-700">Zugriff auf Mitgliederliste mit Kontaktdaten</span>
-          </div>
-          <div class="flex items-start">
-            <Check
-              :size="20"
-              class="text-primary-600 mr-2 mt-0.5"
-            />
-            <span class="text-gray-700">Vereinsnews und Ankündigungen</span>
-          </div>
-          <div class="flex items-start">
-            <Check
-              :size="20"
-              class="text-primary-600 mr-2 mt-0.5"
-            />
-            <span class="text-gray-700">Profilverwaltung und Passwort ändern</span>
-          </div>
-          <div class="flex items-start">
-            <Check
-              :size="20"
-              class="text-primary-600 mr-2 mt-0.5"
-            />
-            <span class="text-gray-700">Weitere Funktionen folgen in Kürze</span>
+      <!-- Geburtstage Widget (statt Willkommens-Kachel) -->
+      <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
+        <div class="flex items-center mb-4">
+          <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
+            <Calendar :size="20" class="text-pink-600" />
           </div>
+          <h2 class="ml-4 text-xl font-semibold text-gray-900">Geburtstage (nächste 4 Wochen)</h2>
         </div>
+        <div v-if="loadingBirthdays" class="text-sm text-gray-500">Lade...</div>
+        <ul v-else class="space-y-2">
+          <li v-for="b in birthdays" :key="b.name + b.dayMonth" class="flex items-center justify-between p-3 border border-gray-100 rounded-lg">
+            <div class="min-w-0">
+              <div class="font-medium text-gray-900 truncate">{{ b.name }}</div>
+              <div class="text-xs text-gray-600">{{ b.dayMonth }}</div>
+            </div>
+            <div class="text-sm text-gray-500">{{ b.inDays === 0 ? 'Heute' : (b.inDays === 1 ? 'Morgen' : 'in ' + b.inDays + ' Tagen') }}</div>
+          </li>
+          <li v-if="birthdays.length === 0" class="text-sm text-gray-600">Keine Geburtstage in den nächsten 4 Wochen.</li>
+        </ul>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { User, Users, Newspaper, Check } from 'lucide-vue-next'
+import { User, Users, Newspaper, Check, Calendar } from 'lucide-vue-next'
+import { ref, onMounted } from 'vue'
 
 const authStore = useAuthStore()
 
+const birthdays = ref([])
+const loadingBirthdays = ref(true)
+
+const loadBirthdays = async () => {
+  loadingBirthdays.value = true
+  try {
+    const res = await $fetch('/api/birthdays')
+    birthdays.value = res.birthdays || []
+  } catch (e) {
+    console.error('Fehler beim Laden der Geburtstage', e)
+    birthdays.value = []
+  } finally {
+    loadingBirthdays.value = false
+  }
+}
+
+onMounted(() => {
+  loadBirthdays()
+})
+
 definePageMeta({
   middleware: 'auth',
   layout: 'default'