133 lines
4.6 KiB
Vue
133 lines
4.6 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
|
|
Mitgliederbereich
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-8" />
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
<!-- Mein Profil -->
|
|
<NuxtLink
|
|
to="/mitgliederbereich/profil"
|
|
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
|
|
<User
|
|
:size="24"
|
|
class="text-primary-600 group-hover:text-white"
|
|
/>
|
|
</div>
|
|
<h2 class="ml-4 text-xl font-semibold text-gray-900">
|
|
Mein Profil
|
|
</h2>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Persönliche Daten und Passwort verwalten
|
|
</p>
|
|
</NuxtLink>
|
|
|
|
<!-- Mitgliederliste -->
|
|
<NuxtLink
|
|
to="/mitgliederbereich/mitglieder"
|
|
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
|
|
<Users
|
|
:size="24"
|
|
class="text-primary-600 group-hover:text-white"
|
|
/>
|
|
</div>
|
|
<h2 class="ml-4 text-xl font-semibold text-gray-900">
|
|
Mitglieder
|
|
</h2>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Kontaktdaten der Vereinsmitglieder
|
|
</p>
|
|
</NuxtLink>
|
|
|
|
<!-- News -->
|
|
<NuxtLink
|
|
to="/mitgliederbereich/news"
|
|
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center group-hover:bg-primary-600 transition-colors">
|
|
<Newspaper
|
|
:size="24"
|
|
class="text-primary-600 group-hover:text-white"
|
|
/>
|
|
</div>
|
|
<h2 class="ml-4 text-xl font-semibold text-gray-900">
|
|
News
|
|
</h2>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Neuigkeiten und Ankündigungen
|
|
</p>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- 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, 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'
|
|
})
|
|
|
|
useHead({
|
|
title: 'Mitgliederbereich - Harheimer TC',
|
|
})
|
|
</script>
|