Enhance ESLint configuration to include support for .mjs and .cjs file types. Update ignored files patterns to ensure proper linting of project files. Refactor Vue component templates for improved readability and maintainability, including consistent formatting and structure across various components. Update error handling in save functions to prevent silent failures.

pages/cms/index.vue

@@ -11,20 +11,48 @@
         <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" />
+              <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>
+            <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
+            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 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>
-              <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>
+            <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) -->

pages/cms/inhalte.vue

@@ -2,13 +2,20 @@
   <div class="min-h-screen bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div class="mb-6">
-        <h1 class="text-3xl font-display font-bold text-gray-900">Inhalte verwalten</h1>
-        <p class="mt-1 text-sm text-gray-500">Redaktionelle Inhalte der Website bearbeiten</p>
+        <h1 class="text-3xl font-display font-bold text-gray-900">
+          Inhalte verwalten
+        </h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Redaktionelle Inhalte der Website bearbeiten
+        </p>
       </div>
 
       <!-- Tabs -->
       <div class="border-b border-gray-200 mb-6">
-        <nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
+        <nav
+          class="-mb-px flex space-x-8 overflow-x-auto"
+          aria-label="Tabs"
+        >
           <button
             v-for="tab in tabs"
             :key="tab.id"

pages/cms/kontaktanfragen.vue

@@ -28,15 +28,24 @@
         </label>
       </div>
 
-      <div v-if="isLoading" class="text-center py-12 text-gray-600">
+      <div
+        v-if="isLoading"
+        class="text-center py-12 text-gray-600"
+      >
         Lade Kontaktanfragen...
       </div>
 
-      <div v-else-if="filteredRequests.length === 0" class="bg-white rounded-xl shadow p-8 text-center text-gray-600">
+      <div
+        v-else-if="filteredRequests.length === 0"
+        class="bg-white rounded-xl shadow p-8 text-center text-gray-600"
+      >
         {{ showAnswered ? 'Aktuell liegen keine Kontaktanfragen vor.' : 'Aktuell liegen keine offenen Kontaktanfragen vor.' }}
       </div>
 
-      <div v-else class="space-y-4">
+      <div
+        v-else
+        class="space-y-4"
+      >
         <div
           v-for="request in filteredRequests"
           :key="request.id"
@@ -67,7 +76,10 @@
               {{ request.message }}
             </p>
 
-            <div v-if="Array.isArray(request.replies) && request.replies.length > 0" class="mt-5 border-t border-gray-100 pt-4">
+            <div
+              v-if="Array.isArray(request.replies) && request.replies.length > 0"
+              class="mt-5 border-t border-gray-100 pt-4"
+            >
               <h3 class="text-sm font-semibold text-gray-700 mb-2">
                 Antworten
               </h3>
@@ -127,7 +139,10 @@
           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600"
           placeholder="Ihre Antwort..."
         />
-        <div v-if="errorMessage" class="mt-3 text-sm text-red-600">
+        <div
+          v-if="errorMessage"
+          class="mt-3 text-sm text-red-600"
+        >
           {{ errorMessage }}
         </div>
         <div class="mt-5 flex justify-end gap-3">

pages/cms/mitgliederverwaltung.vue

@@ -2,15 +2,25 @@
   <div class="min-h-screen bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div class="mb-6">
-        <h1 class="text-3xl font-display font-bold text-gray-900">Mitgliederverwaltung</h1>
-        <p class="mt-1 text-sm text-gray-500">Anträge und Mitgliederliste verwalten</p>
+        <h1 class="text-3xl font-display font-bold text-gray-900">
+          Mitgliederverwaltung
+        </h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Anträge und Mitgliederliste verwalten
+        </p>
       </div>
 
       <!-- Mitgliedschaftsanträge oben (nur sichtbar wenn Anträge vorhanden) -->
-      <div v-show="antraegeRef?.hasApplications" class="mb-10">
+      <div
+        v-show="antraegeRef?.hasApplications"
+        class="mb-10"
+      >
         <CmsMitgliedschaftsantraege ref="antraegeRef" />
       </div>
-      <div v-if="antraegeRef?.hasApplications" class="border-t border-gray-300 mb-10" />
+      <div
+        v-if="antraegeRef?.hasApplications"
+        class="border-t border-gray-300 mb-10"
+      />
 
       <!-- Mitgliederliste darunter -->
       <CmsMitglieder />

pages/cms/sportbetrieb.vue

@@ -2,13 +2,20 @@
   <div class="min-h-screen bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div class="mb-6">
-        <h1 class="text-3xl font-display font-bold text-gray-900">Sportbetrieb verwalten</h1>
-        <p class="mt-1 text-sm text-gray-500">Termine, Mannschaften und Spielpläne pflegen</p>
+        <h1 class="text-3xl font-display font-bold text-gray-900">
+          Sportbetrieb verwalten
+        </h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Termine, Mannschaften und Spielpläne pflegen
+        </p>
       </div>
 
       <!-- Tabs -->
       <div class="border-b border-gray-200 mb-6">
-        <nav class="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
+        <nav
+          class="-mb-px flex space-x-8 overflow-x-auto"
+          aria-label="Tabs"
+        >
           <button
             v-for="tab in tabs"
             :key="tab.id"

pages/cms/startseite.vue

@@ -58,7 +58,10 @@
           >
             <!-- Drag Handle -->
             <div class="flex flex-col gap-1 cursor-move">
-              <GripVertical :size="16" class="text-gray-400" />
+              <GripVertical
+                :size="16"
+                class="text-gray-400"
+              />
             </div>
 
             <!-- Section Info -->