Füge Sortieroptionen zur Mitgliederliste hinzu und verbessere die Sortierung nach Nachname und Geburtstag

pages/mitgliederbereich/mitglieder.vue

@@ -54,6 +54,16 @@
         </div>
       </div>
 
+      <!-- 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>
+
       <!-- Loading State -->
       <div
         v-if="isLoading"
@@ -99,7 +109,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 +117,9 @@
                   <div class="text-sm font-medium text-gray-900">
                     {{ member.name }}
                   </div>
+                  <div v-if="member.showBirthday && member.birthday" class="text-xs text-gray-500">
+                    🎂 {{ formatBirthday(member.birthday) }}
+                  </div>
                   <div
                     v-if="member.notes"
                     class="text-xs text-gray-500"
@@ -233,7 +246,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"
         >
@@ -242,6 +255,9 @@
               <div class="flex items-center mb-2">
                 <h3 class="text-xl font-semibold text-gray-900">
                   {{ member.name }}
+                  <span v-if="member.showBirthday && member.birthday" class="text-xs text-gray-500 ml-2">
+                    🎂 {{ formatBirthday(member.birthday) }}
+                  </span>
                 </h3>
                 <span
                   v-if="member.hasLogin"
@@ -740,6 +756,47 @@
 </template>
 
 <script setup>
+// ...existing code...
+
+const sortMode = ref('name')
+
+const sortedMembers = computed(() => {
+  if (!Array.isArray(members.value)) return []
+  const arr = [...members.value]
+  if (sortMode.value === 'name') {
+    arr.sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+  } else if (sortMode.value === 'lastname') {
+    arr.sort((a, b) => (a.lastName || '').localeCompare(b.lastName || ''))
+  } else if (sortMode.value === 'birthday') {
+    arr.sort((a, b) => {
+      if (!a.birthday) return 1
+      if (!b.birthday) return -1
+      // Nur Tag und Monat vergleichen
+      const [ay, am, ad] = a.birthday.split('-')
+      const [by, bm, bd] = b.birthday.split('-')
+      return (am + ad).localeCompare(bm + bd)
+    })
+  }
+  return arr
+})
+
+function formatBirthday(dateStr) {
+  // Erwartet YYYY-MM-DD oder DD.MM.YYYY
+  if (!dateStr) return ''
+  if (dateStr.includes('-')) {
+    const [, m, d] = dateStr.split('-')
+    return `${d}.${m}.`
+  } else if (dateStr.includes('.')) {
+    const parts = dateStr.split('.')
+    if (parts.length >= 2) return `${parts[0]}.${parts[1]}.`
+  }
+  return dateStr
+}
+
+// members muss showBirthday und birthday enthalten:
+// showBirthday: true, wenn das Mitglied die Anzeige erlaubt
+// birthday: im Format YYYY-MM-DD oder DD.MM.YYYY
+// Falls die Datenstruktur anders ist, bitte anpassen!
 import { ref, computed, onMounted } from 'vue'
 import { UserPlus, Mail, Phone, MapPin, FileText, Clock, Edit, Trash2, Loader2, AlertCircle, Table2, Grid3x3 } from 'lucide-vue-next'