Entferne die Sortieroptionen und passe die Mitgliederanzeige an, um die Sortierung direkt aus der Mitgliederliste zu entfernen

pages/mitgliederbereich/mitglieder.vue

@@ -9,18 +9,17 @@
           <div class="w-24 h-1 bg-primary-600 mb-4" />
         </div>
         <div class="flex items-center space-x-3">
-          <!-- ...Buttons ... -->
+          <button
-        </div>
+            class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors"
-      </div>
+            @click="viewMode = viewMode === 'cards' ? 'table' : 'cards'"
-      <!-- Sortieroptionen -->
+          >
-      <div class="mb-4 flex items-center space-x-2">
+            <component
-        <label for="sortMode" class="text-sm text-gray-700">Sortieren nach:</label>
+              :is="viewMode === 'cards' ? Table2 : Grid3x3"
-        <select id="sortMode" v-model="sortMode" class="px-2 py-1 border rounded">
+              :size="20"
-          <option value="name">Name (Vorname Nachname)</option>
+              class="mr-2"
-          <option value="lastname">Nachname (Nachname Vorname)</option>
+            />
-          <option value="birthday">Geburtstag</option>
+            {{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
-        </select>
+          </button>
-                      </div>
           <button
             v-if="canEdit"
             class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
@@ -100,7 +99,7 @@
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
               <tr
-                v-for="member in sortedMembers"
+                v-for="member in members"
                 :key="member.id"
                 class="hover:bg-gray-50"
               >
@@ -108,11 +107,6 @@
                   <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"
@@ -239,7 +233,7 @@
         class="space-y-4"
       >
         <div
-          v-for="member in sortedMembers"
+          v-for="member in members"
           :key="member.id"
           class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
         >
@@ -741,6 +735,8 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -797,37 +793,6 @@ 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
@@ -948,13 +913,6 @@ 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 = () => {