Füge Ablaufdatum zu Kontaktpersonen hinzu: Implementiere die Möglichkeit, ein Ablaufdatum für Kontaktpersonen zu speichern und anzuzeigen. Aktualisiere die Filterlogik, um nur nicht abgelaufene Kontaktpersonen anzuzeigen, und passe die Benutzeroberfläche an, um das Ablaufdatum darzustellen.

src/components/ContactRender.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="config && config.style === 'box' && contacts && contacts.length && contacts.length > 0">
         <div v-for="contact in contacts" :key="contact.id" class="contact-box bottom-margin">
-            <p>{{ contact.name }}</p>
+            <p>{{ contact.name }} <span v-if="contact.expiryDate" class="expiry-date">(bis {{ formatDate(contact.expiryDate) }})</span></p>
             <p v-if="displayOptions.includes('phone')">Telefon: {{ contact.phone }}</p>
             <p v-if="displayOptions.includes('street')">Straße: {{ contact.street }}</p>
             <p v-if="displayOptions.includes('zipcode')">Postleitzahl: {{ contact.zipcode }}</p>
@@ -13,7 +13,7 @@
     </div>
     <span v-else-if="config.style === 'float' && contacts && contacts.length && contacts.length > 0">
         <span v-for="contact in contacts" :key="contact.id" class="bottom-margin">
-            {{ contact.name }}
+            {{ contact.name }}<span v-if="contact.expiryDate" class="expiry-date"> (bis {{ formatDate(contact.expiryDate) }})</span>
             <span v-if="displayOptions.includes('phone')">, Telefon: {{ contact.phone }}</span>
             <span v-if="displayOptions.includes('street')">, Straße: {{ contact.street }}</span>
             <span v-if="displayOptions.includes('zipcode')">, Postleitzahl: {{ contact.zipcode }}</span>
@@ -58,6 +58,17 @@ export default {
             this.loading = false;
         }
     },
+    methods: {
+        formatDate(dateString) {
+            if (!dateString) return '';
+            const date = new Date(dateString);
+            return date.toLocaleDateString('de-DE', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        }
+    }
 };
 </script>
 
@@ -68,4 +79,9 @@ export default {
 .bottom-margin {
     margin-bottom: 1rem;
 }
+.expiry-date {
+    font-size: 0.9em;
+    color: #666;
+    font-style: italic;
+}
 </style>