feat: toon leeftijd naast geboortedatum in persoon-detailpanel

Made-with: Cursor

apps/app/src/components/persons/PersonDetailPanel.vue

@@ -64,6 +64,31 @@ function formatDateOfBirth(dateStr: string) {
   return dobFormatter.format(new Date(`${dateStr}T00:00:00`))
 }
 
+/** Age in full years from a YYYY-MM-DD string; null if invalid or out of range. */
+function calculateAge(dateStr: string): number | null {
+  const birth = new Date(`${dateStr}T12:00:00`)
+  if (Number.isNaN(birth.getTime())) {
+    return null
+  }
+  const today = new Date()
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  const dayDiff = today.getDate() - birth.getDate()
+  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+    age--
+  }
+  if (age < 0 || age > 130) {
+    return null
+  }
+  return age
+}
+
+function formatDateOfBirthDisplay(dateStr: string): string {
+  const formatted = formatDateOfBirth(dateStr)
+  const age = calculateAge(dateStr)
+  return age !== null ? `${formatted} (${age} jaar)` : formatted
+}
+
 function getInitials(name: string) {
   return name
     .split(' ')
@@ -385,7 +410,7 @@ function handleManualLink(userId: string) {
                 />
               </template>
               <VListItemTitle>Geboortedatum</VListItemTitle>
-              <VListItemSubtitle>{{ person.date_of_birth ? formatDateOfBirth(person.date_of_birth) : 'Niet opgegeven' }}</VListItemSubtitle>
+              <VListItemSubtitle>{{ person.date_of_birth ? formatDateOfBirthDisplay(person.date_of_birth) : 'Niet opgegeven' }}</VListItemSubtitle>
             </VListItem>
 
             <VListItem>