Füge Sortieroptionen für Mitgliederliste hinzu und implementiere Sortierlogik nach Name, Nachname und Geburtstag

pages/mitgliederbereich/mitglieder.vue

@@ -1,3 +1,12 @@
+      <!-- Sortieroptionen -->
+      <div class="mb-4 flex items-center space-x-2">
+        <label for="sortMode" class="text-sm text-gray-700">Sortieren nach:</label>
+        <select id="sortMode" v-model="sortMode" class="px-2 py-1 border rounded">
+          <option value="name">Name (Vorname Nachname)</option>
+          <option value="lastname">Nachname (Nachname Vorname)</option>
+          <option value="birthday">Geburtstag</option>
+        </select>
+      </div>
 <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">
@@ -99,7 +108,7 @@
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
               <tr
-                v-for="member in members"
+                v-for="member in sortedMembers"
                 :key="member.id"
                 class="hover:bg-gray-50"
               >
@@ -107,6 +116,11 @@
                   <div class="text-sm font-medium text-gray-900">
                     {{ member.name }}
                   </div>
+                    <div v-if="member.birthdateVisible && member.geburtsdatum">
+                      <span class="text-xs text-primary-600">
+                        Geburtstag: {{ formatBirthdate(member.geburtsdatum) }}
+                      </span>
+                    </div>
                   <div
                     v-if="member.notes"
                     class="text-xs text-gray-500"
@@ -233,7 +247,7 @@
         class="space-y-4"
       >
         <div
-          v-for="member in members"
+          v-for="member in sortedMembers"
           :key="member.id"
           class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
         >
@@ -793,6 +807,37 @@ const loadMembers = async () => {
     isLoading.value = false
   }
 }
+// ...existing code...
+const sortMode = ref('name')
+
+const sortedMembers = computed(() => {
+  if (!members.value) return []
+  // Filtere den Admin-Account heraus
+  const arr = members.value.filter(m => m.email !== 'admin@harheimertc.de')
+  if (sortMode.value === 'name') {
+    return arr.sort((a, b) => {
+      const an = (a.firstName || '') + (a.lastName || '')
+      const bn = (b.firstName || '') + (b.lastName || '')
+      return an.localeCompare(bn, 'de', { sensitivity: 'base' })
+    })
+  } else if (sortMode.value === 'lastname') {
+    return arr.sort((a, b) => {
+      const an = (a.lastName || '') + (a.firstName || '')
+      const bn = (b.lastName || '') + (b.firstName || '')
+      return an.localeCompare(bn, 'de', { sensitivity: 'base' })
+    })
+  } else if (sortMode.value === 'birthday') {
+    return arr.sort((a, b) => {
+      const ad = a.geburtsdatum ? new Date(a.geburtsdatum) : new Date(0)
+      const bd = b.geburtsdatum ? new Date(b.geburtsdatum) : new Date(0)
+      return ad.getMonth() !== bd.getMonth()
+        ? ad.getMonth() - bd.getMonth()
+        : ad.getDate() - bd.getDate()
+    })
+  }
+  return arr
+})
+// ...existing code...
 
 const openAddModal = () => {
   editingMember.value = null
@@ -913,6 +958,14 @@ const formatDate = (dateString) => {
     minute: '2-digit'
   })
 }
+}
+const formatBirthdate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  if (isNaN(date.getTime())) return ''
+  // Zeige nur Tag und Monat
+  return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })
+}
 
 // Bulk import functions
 const triggerBulkFileInput = () => {