harheimertc/pages/cms/index.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">
        Content Management System
      </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">
        <!-- Geburtstage Widget -->
        <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>
        <!-- Inhalte (gruppiert) -->
        <NuxtLink
          to="/cms/inhalte"
          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-indigo-100 rounded-lg flex items-center justify-center group-hover:bg-indigo-600 transition-colors">
              <Newspaper
                :size="24"
                class="text-indigo-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Inhalte
            </h2>
          </div>
          <p class="text-gray-600">
            Über uns, Geschichte, TT-Regeln &amp; Satzung
          </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-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-600 transition-colors">
              <Newspaper
                :size="24"
                class="text-blue-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">
            News erstellen und verwalten (intern und öffentlich)
          </p>
        </NuxtLink>

        <!-- Sportbetrieb (gruppiert) -->
        <NuxtLink
          to="/cms/sportbetrieb"
          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-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-600 transition-colors">
              <Calendar
                :size="24"
                class="text-green-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Sportbetrieb
            </h2>
          </div>
          <p class="text-gray-600">
            Termine, Mannschaften &amp; Spielpläne
          </p>
        </NuxtLink>

        <!-- Mitgliederverwaltung (gruppiert) -->
        <NuxtLink
          to="/cms/mitgliederverwaltung"
          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-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-600 transition-colors">
              <Users
                :size="24"
                class="text-purple-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Mitgliederverwaltung
            </h2>
          </div>
          <p class="text-gray-600">
            Mitgliederliste &amp; Mitgliedschaftsanträge
          </p>
        </NuxtLink>

        <!-- Startseite -->
        <NuxtLink
          to="/cms/startseite"
          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-cyan-100 rounded-lg flex items-center justify-center group-hover:bg-cyan-600 transition-colors">
              <Layout
                :size="24"
                class="text-cyan-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Startseite
            </h2>
          </div>
          <p class="text-gray-600">
            Reihenfolge der Startseiten-Elemente konfigurieren
          </p>
        </NuxtLink>

        <!-- Einstellungen -->
        <NuxtLink
          to="/cms/einstellungen"
          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-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-600 transition-colors">
              <Settings
                :size="24"
                class="text-orange-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Einstellungen
            </h2>
          </div>
          <p class="text-gray-600">
            Training, Trainer, Mitgliedschaft & Vorstand
          </p>
        </NuxtLink>

        <!-- Benutzerverwaltung (Admin ODER Vorstand) -->
        <NuxtLink
          v-if="authStore.hasAnyRole('admin', 'vorstand')"
          to="/cms/benutzer"
          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-yellow-100 rounded-lg flex items-center justify-center group-hover:bg-yellow-600 transition-colors">
              <UserCog
                :size="24"
                class="text-yellow-600 group-hover:text-white"
              />
            </div>
            <h2 class="ml-4 text-xl font-semibold text-gray-900">
              Benutzerverwaltung
            </h2>
          </div>
          <p class="text-gray-600">
            Benutzer freischalten und verwalten
          </p>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Newspaper, Calendar, Users, UserCog, Settings, Layout } 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: 'CMS - Harheimer TC',
})
</script>