feat: add date_of_birth field to persons across all layers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -23,6 +23,7 @@ const form = ref({
   crowd_type_id: '',
   first_name: '',
   last_name: '',
+  date_of_birth: '',
   email: '',
   phone: '',
   company_id: '',
@@ -72,6 +73,7 @@ function resetForm() {
     crowd_type_id: '',
     first_name: '',
     last_name: '',
+    date_of_birth: '',
     email: '',
     phone: '',
     company_id: '',
@@ -91,6 +93,7 @@ function onSubmit() {
       crowd_type_id: form.value.crowd_type_id,
       first_name: form.value.first_name,
       last_name: form.value.last_name,
+      ...(form.value.date_of_birth ? { date_of_birth: form.value.date_of_birth } : {}),
       email: form.value.email,
       ...(form.value.phone ? { phone: form.value.phone } : {}),
       ...(form.value.company_id ? { company_id: form.value.company_id } : {}),
@@ -164,6 +167,17 @@ function onSubmit() {
                 :error-messages="errors.last_name"
               />
             </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.date_of_birth"
+                label="Geboortedatum"
+                type="date"
+                :error-messages="errors.date_of_birth"
+              />
+            </VCol>
             <VCol cols="12">
               <AppTextField
                 v-model="form.email"

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

@@ -25,6 +25,7 @@ const form = ref({
   crowd_type_id: '',
   first_name: '',
   last_name: '',
+  date_of_birth: '',
   email: '',
   phone: '',
   company_id: '',
@@ -42,6 +43,7 @@ watch(() => props.person, (p) => {
     crowd_type_id: p.crowd_type?.id ?? '',
     first_name: p.first_name,
     last_name: p.last_name,
+    date_of_birth: p.date_of_birth ?? '',
     email: p.email,
     phone: p.phone ?? '',
     company_id: p.company?.id ?? '',
@@ -96,6 +98,7 @@ function onSubmit() {
       crowd_type_id: form.value.crowd_type_id,
       first_name: form.value.first_name,
       last_name: form.value.last_name,
+      date_of_birth: form.value.date_of_birth || undefined,
       email: form.value.email,
       phone: form.value.phone || undefined,
       company_id: form.value.company_id || undefined,
@@ -167,6 +170,17 @@ function onSubmit() {
                 :error-messages="errors.last_name"
               />
             </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.date_of_birth"
+                label="Geboortedatum"
+                type="date"
+                :error-messages="errors.date_of_birth"
+              />
+            </VCol>
             <VCol cols="12">
               <AppTextField
                 v-model="form.email"

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

@@ -37,10 +37,20 @@ const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
   year: 'numeric',
 })
 
+const dobFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+})
+
 function formatDate(iso: string) {
   return dateFormatter.format(new Date(iso))
 }
 
+function formatDateOfBirth(dateStr: string) {
+  return dobFormatter.format(new Date(`${dateStr}T00:00:00`))
+}
+
 function getInitials(name: string) {
   return name
     .split(' ')
@@ -175,6 +185,17 @@ function onBlacklistToggle(val: boolean | null) {
         <!-- Tab: Informatie -->
         <VTabsWindowItem value="info">
           <VList class="pa-0">
+            <VListItem>
+              <template #prepend>
+                <VIcon
+                  icon="tabler-cake"
+                  class="me-3"
+                />
+              </template>
+              <VListItemTitle>Geboortedatum</VListItemTitle>
+              <VListItemSubtitle>{{ person.date_of_birth ? formatDateOfBirth(person.date_of_birth) : 'Niet opgegeven' }}</VListItemSubtitle>
+            </VListItem>
+
             <VListItem>
               <template #prepend>
                 <VIcon

apps/app/src/types/person.ts

@@ -47,6 +47,7 @@ export interface Person {
   id: string
   first_name: string
   last_name: string
+  date_of_birth: string | null
   full_name: string
   email: string
   phone: string | null
@@ -67,6 +68,7 @@ export interface CreatePersonPayload {
   crowd_type_id: string
   first_name: string
   last_name: string
+  date_of_birth?: string
   email: string
   phone?: string
   company_id?: string