From a9dcee0fc7bcd37e0ffae8ea1713bbe012ede8dd Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sun, 12 Apr 2026 23:44:14 +0200
Subject: [PATCH] feat(app): registration fields management page in event
 settings

Adds a new settings sub-page for managing dynamic registration form fields
per event. Includes sortable field list, create/edit dialog, template picker,
and import-from-event functionality.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../event/ImportFromEventDialog.vue           | 120 +++++
 .../event/RegistrationFieldCard.vue           | 156 +++++++
 .../event/RegistrationFieldFormDialog.vue     | 304 ++++++++++++
 .../components/event/TemplatePickerDialog.vue | 141 ++++++
 .../api/useRegistrationFormFields.ts          | 144 ++++++
 .../src/pages/events/[id]/settings/index.vue  |  27 ++
 .../[id]/settings/registration-fields.vue     | 441 ++++++++++++++++++
 apps/app/src/types/event.ts                   |   4 +
 apps/app/src/types/registration-form-field.ts |  37 ++
 apps/app/typed-router.d.ts                    |   2 +
 10 files changed, 1376 insertions(+)
 create mode 100644 apps/app/src/components/event/ImportFromEventDialog.vue
 create mode 100644 apps/app/src/components/event/RegistrationFieldCard.vue
 create mode 100644 apps/app/src/components/event/RegistrationFieldFormDialog.vue
 create mode 100644 apps/app/src/components/event/TemplatePickerDialog.vue
 create mode 100644 apps/app/src/composables/api/useRegistrationFormFields.ts
 create mode 100644 apps/app/src/pages/events/[id]/settings/registration-fields.vue
 create mode 100644 apps/app/src/types/registration-form-field.ts

diff --git a/apps/app/src/components/event/ImportFromEventDialog.vue b/apps/app/src/components/event/ImportFromEventDialog.vue
new file mode 100644
index 00000000..eee7f276
--- /dev/null
+++ b/apps/app/src/components/event/ImportFromEventDialog.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useEventList } from '@/composables/api/useEvents'
+import { useImportFieldsFromEvent } from '@/composables/api/useRegistrationFormFields'
+
+const props = defineProps<{
+  orgId: string
+  eventId: string
+}>()
+
+const emit = defineEmits<{
+  imported: [count: number, eventName: string]
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+
+const orgIdRef = computed(() => props.orgId)
+const eventIdRef = computed(() => props.eventId)
+
+const { data: events, isLoading: isLoadingEvents } = useEventList(orgIdRef)
+const { mutate: importFields, isPending } = useImportFieldsFromEvent(eventIdRef)
+
+const selectedEventId = ref<string | null>(null)
+
+const eventOptions = computed(() => {
+  if (!events.value) return []
+
+  const options: Array<{ title: string; value: string }> = []
+
+  for (const event of events.value) {
+    if (event.id !== props.eventId) {
+      options.push({ title: event.name, value: event.id })
+    }
+    // Also include children for festivals
+    if (event.children?.length) {
+      for (const child of event.children) {
+        if (child.id !== props.eventId) {
+          options.push({ title: `${event.name} > ${child.name}`, value: child.id })
+        }
+      }
+    }
+  }
+
+  return options
+})
+
+const selectedEventName = computed(() =>
+  eventOptions.value.find(e => e.value === selectedEventId.value)?.title ?? '',
+)
+
+watch(modelValue, (open) => {
+  if (open) {
+    selectedEventId.value = null
+  }
+})
+
+function onImport() {
+  if (!selectedEventId.value) return
+
+  const name = selectedEventName.value
+
+  importFields(selectedEventId.value, {
+    onSuccess: (data) => {
+      const count = Array.isArray(data) ? data.length : 0
+      modelValue.value = false
+      emit('imported', count, name)
+    },
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="500"
+  >
+    <VCard title="Velden importeren van ander event">
+      <VCardText>
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          Kopieer alle registratievelden van een ander event naar dit event. Bestaande velden blijven behouden.
+        </p>
+
+        <AppAutocomplete
+          v-model="selectedEventId"
+          label="Selecteer een event"
+          :items="eventOptions"
+          :loading="isLoadingEvents"
+          placeholder="Zoek een event..."
+          clearable
+        />
+
+        <VAlert
+          v-if="selectedEventId"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mt-4"
+        >
+          De registratievelden van <strong>{{ selectedEventName }}</strong> worden gekopieerd naar het huidige event.
+        </VAlert>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          :disabled="!selectedEventId"
+          @click="onImport"
+        >
+          Importeren
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
diff --git a/apps/app/src/components/event/RegistrationFieldCard.vue b/apps/app/src/components/event/RegistrationFieldCard.vue
new file mode 100644
index 00000000..b7f53175
--- /dev/null
+++ b/apps/app/src/components/event/RegistrationFieldCard.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { RegistrationFormField } from '@/types/registration-form-field'
+import { FIELD_TYPE_LABELS } from '@/types/registration-field-template'
+
+defineProps<{
+  field: RegistrationFormField
+}>()
+
+defineEmits<{
+  edit: [field: RegistrationFormField]
+  delete: [field: RegistrationFormField]
+}>()
+
+function formatOptions(options: string[] | null): string {
+  if (!options?.length) return ''
+  if (options.length <= 5) return options.join(', ')
+  return `${options.slice(0, 5).join(', ')}, +${options.length - 5} meer`
+}
+</script>
+
+<template>
+  <VCard
+    variant="outlined"
+    class="mb-2"
+  >
+    <VCardText class="pa-4">
+      <div class="d-flex align-start gap-3">
+        <!-- Drag handle -->
+        <div class="drag-handle d-flex align-center pt-1 cursor-grab">
+          <VIcon
+            icon="tabler-grip-vertical"
+            size="20"
+            class="text-disabled"
+          />
+        </div>
+
+        <!-- Content -->
+        <div class="flex-grow-1 min-width-0">
+          <div class="d-flex align-center justify-space-between gap-2 mb-1">
+            <span class="text-body-1 font-weight-medium">
+              {{ field.label }}
+            </span>
+            <VChip
+              size="small"
+              variant="tonal"
+              color="default"
+            >
+              {{ FIELD_TYPE_LABELS[field.field_type] ?? field.field_type }}
+            </VChip>
+          </div>
+
+          <!-- Section -->
+          <div
+            v-if="field.section"
+            class="text-body-2 text-medium-emphasis mb-1"
+          >
+            Sectie: {{ field.section }}
+          </div>
+
+          <!-- Options preview -->
+          <div
+            v-if="field.options?.length"
+            class="text-body-2 text-medium-emphasis mb-1"
+          >
+            Opties: {{ formatOptions(field.options) }}
+          </div>
+
+          <!-- Tag category -->
+          <div
+            v-if="field.field_type === 'tag_picker' && field.tag_category"
+            class="text-body-2 text-medium-emphasis mb-1"
+          >
+            Categorie: {{ field.tag_category }}
+          </div>
+
+          <!-- Help text -->
+          <div
+            v-if="field.help_text"
+            class="text-body-2 text-disabled mb-1 text-truncate"
+          >
+            {{ field.help_text }}
+          </div>
+
+          <!-- Status badges -->
+          <div class="d-flex flex-wrap gap-1 mt-2">
+            <VChip
+              v-if="field.is_required"
+              size="x-small"
+              variant="tonal"
+              color="error"
+            >
+              Verplicht
+            </VChip>
+            <VChip
+              v-if="field.is_filterable"
+              size="x-small"
+              variant="tonal"
+              color="info"
+            >
+              Filterbaar
+            </VChip>
+            <VChip
+              v-if="field.is_portal_visible"
+              size="x-small"
+              variant="tonal"
+              color="success"
+            >
+              Zichtbaar
+            </VChip>
+            <VChip
+              v-if="field.is_admin_only"
+              size="x-small"
+              variant="tonal"
+              color="warning"
+            >
+              Admin-only
+            </VChip>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="d-flex align-center gap-x-1 pt-1">
+          <VBtn
+            icon="tabler-edit"
+            variant="text"
+            size="small"
+            title="Bewerken"
+            @click="$emit('edit', field)"
+          />
+          <VBtn
+            icon="tabler-trash"
+            variant="text"
+            size="small"
+            color="error"
+            title="Verwijderen"
+            @click="$emit('delete', field)"
+          />
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>
+
+<style scoped>
+.min-width-0 {
+  min-inline-size: 0;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grab:active {
+  cursor: grabbing;
+}
+</style>
diff --git a/apps/app/src/components/event/RegistrationFieldFormDialog.vue b/apps/app/src/components/event/RegistrationFieldFormDialog.vue
new file mode 100644
index 00000000..c22e29ac
--- /dev/null
+++ b/apps/app/src/components/event/RegistrationFieldFormDialog.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { usePersonTagCategories } from '@/composables/api/usePersonTags'
+import { requiredValidator } from '@core/utils/validators'
+import type { RegistrationFormField } from '@/types/registration-form-field'
+import { FIELD_TYPE_LABELS, FIELD_TYPES_WITH_OPTIONS } from '@/types/registration-field-template'
+
+const props = defineProps<{
+  orgId: string
+  field?: RegistrationFormField | null
+  isSaving: boolean
+}>()
+
+const emit = defineEmits<{
+  save: [payload: Record<string, any>]
+  'update:modelValue': [value: boolean]
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+
+const orgIdRef = computed(() => props.orgId)
+const { data: tagCategories } = usePersonTagCategories(orgIdRef)
+
+const fieldTypeOptions = Object.entries(FIELD_TYPE_LABELS).map(([value, title]) => ({ title, value }))
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+
+const defaultForm = () => ({
+  label: '',
+  field_type: 'text' as string,
+  options: [] as string[],
+  tag_category: null as string | null,
+  is_required: false,
+  is_filterable: false,
+  is_portal_visible: true,
+  is_admin_only: false,
+  section: '',
+  help_text: '',
+})
+
+const form = ref(defaultForm())
+
+const dialogTitle = computed(() =>
+  props.field ? 'Veld bewerken' : 'Nieuw veld',
+)
+
+const showOptions = computed(() =>
+  FIELD_TYPES_WITH_OPTIONS.includes(form.value.field_type as any),
+)
+
+const showTagCategory = computed(() => form.value.field_type === 'tag_picker')
+
+watch(modelValue, (open) => {
+  if (open) {
+    errors.value = {}
+    if (props.field) {
+      form.value = {
+        label: props.field.label,
+        field_type: props.field.field_type,
+        options: props.field.options ? [...props.field.options] : [],
+        tag_category: props.field.tag_category,
+        is_required: props.field.is_required,
+        is_filterable: props.field.is_filterable,
+        is_portal_visible: props.field.is_portal_visible,
+        is_admin_only: props.field.is_admin_only,
+        section: props.field.section ?? '',
+        help_text: props.field.help_text ?? '',
+      }
+    }
+    else {
+      form.value = defaultForm()
+    }
+  }
+})
+
+function addOption() {
+  form.value.options.push('')
+}
+
+function removeOption(index: number) {
+  form.value.options.splice(index, 1)
+}
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+    const payload: Record<string, any> = {
+      label: form.value.label,
+      is_required: form.value.is_required,
+      is_filterable: form.value.is_filterable,
+      is_portal_visible: form.value.is_portal_visible,
+      is_admin_only: form.value.is_admin_only,
+      section: form.value.section || null,
+      help_text: form.value.help_text || null,
+    }
+
+    if (!props.field) {
+      payload.field_type = form.value.field_type
+    }
+
+    if (showOptions.value) {
+      payload.options = form.value.options.filter(o => o.trim() !== '')
+    }
+    else {
+      payload.options = null
+    }
+
+    if (showTagCategory.value) {
+      payload.tag_category = form.value.tag_category || null
+    }
+    else {
+      payload.tag_category = null
+    }
+
+    emit('save', payload)
+  })
+}
+
+function setErrors(err: any) {
+  const data = err.response?.data
+  if (data?.errors) {
+    errors.value = Object.fromEntries(
+      Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
+    )
+  }
+  else if (data?.message) {
+    errors.value = { label: data.message }
+  }
+}
+
+defineExpose({ setErrors })
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="650"
+  >
+    <VCard :title="dialogTitle">
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.label"
+                label="Label"
+                placeholder="Hoe heet dit veld?"
+                :rules="[requiredValidator]"
+                :error-messages="errors.label"
+                autofocus
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.field_type"
+                label="Type"
+                :items="fieldTypeOptions"
+                :rules="[requiredValidator]"
+                :error-messages="errors.field_type"
+                :disabled="!!field"
+                :hint="field ? 'Type kan niet gewijzigd worden na aanmaken' : ''"
+                :persistent-hint="!!field"
+              />
+            </VCol>
+
+            <!-- Options (conditional) -->
+            <VCol
+              v-if="showOptions"
+              cols="12"
+            >
+              <label class="text-body-2 mb-2 d-block">Opties</label>
+              <div
+                v-for="(_, index) in form.options"
+                :key="index"
+                class="d-flex align-center gap-x-2 mb-2"
+              >
+                <AppTextField
+                  v-model="form.options[index]"
+                  :placeholder="`Optie ${index + 1}`"
+                  density="compact"
+                  hide-details
+                />
+                <VBtn
+                  icon="tabler-x"
+                  variant="text"
+                  size="small"
+                  color="error"
+                  @click="removeOption(index)"
+                />
+              </div>
+              <VBtn
+                variant="tonal"
+                size="small"
+                prepend-icon="tabler-plus"
+                @click="addOption"
+              >
+                Optie toevoegen
+              </VBtn>
+              <p
+                v-if="errors.options"
+                class="text-error text-caption mt-1"
+              >
+                {{ errors.options }}
+              </p>
+            </VCol>
+
+            <!-- Tag category (conditional) -->
+            <VCol
+              v-if="showTagCategory"
+              cols="12"
+            >
+              <AppAutocomplete
+                v-model="form.tag_category"
+                label="Tag-categorie"
+                :items="tagCategories ?? []"
+                clearable
+                :error-messages="errors.tag_category"
+                placeholder="Alle tags (laat leeg voor alle categorieën)"
+              />
+            </VCol>
+
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.section"
+                label="Sectie"
+                placeholder="bijv. Over jou"
+                :error-messages="errors.section"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            />
+            <VCol cols="12">
+              <AppTextarea
+                v-model="form.help_text"
+                label="Helptekst"
+                placeholder="Toelichting die onder het veld wordt getoond"
+                :error-messages="errors.help_text"
+                rows="2"
+              />
+            </VCol>
+
+            <!-- Toggles -->
+            <VCol cols="12">
+              <div class="d-flex flex-wrap gap-x-6 gap-y-2">
+                <VSwitch
+                  v-model="form.is_required"
+                  label="Verplicht"
+                  hide-details
+                  density="compact"
+                />
+                <VSwitch
+                  v-model="form.is_filterable"
+                  label="Filterbaar bij inplannen"
+                  hide-details
+                  density="compact"
+                />
+                <VSwitch
+                  v-model="form.is_portal_visible"
+                  label="Zichtbaar voor deelnemer"
+                  hide-details
+                  density="compact"
+                />
+                <VSwitch
+                  v-model="form.is_admin_only"
+                  label="Alleen voor organisator"
+                  hide-details
+                  density="compact"
+                />
+              </div>
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isSaving"
+          >
+            Opslaan
+          </VBtn>
+        </VCardActions>
+      </VForm>
+    </VCard>
+  </VDialog>
+</template>
diff --git a/apps/app/src/components/event/TemplatePickerDialog.vue b/apps/app/src/components/event/TemplatePickerDialog.vue
new file mode 100644
index 00000000..f9c6b6a1
--- /dev/null
+++ b/apps/app/src/components/event/TemplatePickerDialog.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { useRegistrationFieldTemplates } from '@/composables/api/useRegistrationFieldTemplates'
+import { useCreateFieldFromTemplate } from '@/composables/api/useRegistrationFormFields'
+import { FIELD_TYPE_LABELS } from '@/types/registration-field-template'
+import type { RegistrationFormField } from '@/types/registration-form-field'
+
+const props = defineProps<{
+  orgId: string
+  eventId: string
+  existingFields: RegistrationFormField[]
+}>()
+
+const emit = defineEmits<{
+  added: []
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+
+const orgIdRef = computed(() => props.orgId)
+const eventIdRef = computed(() => props.eventId)
+
+const { data: templates, isLoading } = useRegistrationFieldTemplates(orgIdRef)
+const { mutate: createFromTemplate, isPending } = useCreateFieldFromTemplate(eventIdRef)
+
+const existingSlugs = computed(() =>
+  new Set(props.existingFields.map(f => f.slug)),
+)
+
+const activeTemplates = computed(() =>
+  (templates.value ?? []).filter(t => t.is_active),
+)
+
+const addingTemplateId = ref<string | null>(null)
+
+function isAlreadyAdded(slug: string): boolean {
+  return existingSlugs.value.has(slug)
+}
+
+function onAdd(templateId: string) {
+  addingTemplateId.value = templateId
+  createFromTemplate(templateId, {
+    onSuccess: () => {
+      addingTemplateId.value = null
+      emit('added')
+    },
+    onError: () => {
+      addingTemplateId.value = null
+    },
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="600"
+  >
+    <VCard title="Veld uit template toevoegen">
+      <VCardText>
+        <VSkeletonLoader
+          v-if="isLoading"
+          type="list-item@3"
+        />
+
+        <template v-else-if="activeTemplates.length">
+          <VList density="compact">
+            <VListItem
+              v-for="template in activeTemplates"
+              :key="template.id"
+              :disabled="isAlreadyAdded(template.slug)"
+              class="rounded mb-1"
+              :class="{ 'opacity-50': isAlreadyAdded(template.slug) }"
+            >
+              <template #prepend>
+                <VIcon
+                  :icon="isAlreadyAdded(template.slug) ? 'tabler-check' : 'tabler-forms'"
+                  size="20"
+                  :color="isAlreadyAdded(template.slug) ? 'success' : undefined"
+                />
+              </template>
+
+              <VListItemTitle>
+                {{ template.label }}
+                <span
+                  v-if="isAlreadyAdded(template.slug)"
+                  class="text-caption text-disabled ms-2"
+                >(al toegevoegd)</span>
+              </VListItemTitle>
+              <VListItemSubtitle>
+                {{ FIELD_TYPE_LABELS[template.field_type] ?? template.field_type }}
+                <template v-if="template.section">
+                  &middot; {{ template.section }}
+                </template>
+                <template v-if="template.is_required">
+                  &middot; Verplicht
+                </template>
+              </VListItemSubtitle>
+
+              <template #append>
+                <VBtn
+                  v-if="!isAlreadyAdded(template.slug)"
+                  size="small"
+                  variant="tonal"
+                  color="primary"
+                  :loading="isPending && addingTemplateId === template.id"
+                  :disabled="isPending"
+                  @click="onAdd(template.id)"
+                >
+                  Toevoegen
+                </VBtn>
+              </template>
+            </VListItem>
+          </VList>
+        </template>
+
+        <div
+          v-else
+          class="text-center pa-4"
+        >
+          <VIcon
+            icon="tabler-forms"
+            size="40"
+            class="mb-3 text-disabled"
+          />
+          <p class="text-body-2 text-disabled mb-0">
+            Geen actieve templates beschikbaar. Maak eerst templates aan in de organisatie-instellingen.
+          </p>
+        </div>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Sluiten
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
diff --git a/apps/app/src/composables/api/useRegistrationFormFields.ts b/apps/app/src/composables/api/useRegistrationFormFields.ts
new file mode 100644
index 00000000..84adce45
--- /dev/null
+++ b/apps/app/src/composables/api/useRegistrationFormFields.ts
@@ -0,0 +1,144 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type {
+  RegistrationFormField,
+  RegistrationFormFieldCreateDTO,
+  RegistrationFormFieldUpdateDTO,
+} from '@/types/registration-form-field'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+export function useRegistrationFormFields(eventId: Ref<string>) {
+  return useQuery({
+    queryKey: ['registration-form-fields', eventId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ data: RegistrationFormField[] }>(
+        `/events/${eventId.value}/registration-fields`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!eventId.value,
+    staleTime: Infinity,
+  })
+}
+
+export function useCreateRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: RegistrationFormFieldCreateDTO) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useUpdateRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: RegistrationFormFieldUpdateDTO & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields/${id}`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useDeleteRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/events/${eventId.value}/registration-fields/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useReorderRegistrationFormFields(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+  let previousFields: RegistrationFormField[] | undefined
+
+  return useMutation({
+    mutationFn: async (orderedIds: string[]) => {
+      await apiClient.post(`/events/${eventId.value}/registration-fields/reorder`, {
+        ids: orderedIds,
+      })
+    },
+    onMutate: async (orderedIds) => {
+      await queryClient.cancelQueries({ queryKey: ['registration-form-fields', eventId.value] })
+      previousFields = queryClient.getQueryData<RegistrationFormField[]>(['registration-form-fields', eventId.value])
+
+      if (previousFields) {
+        const byId = new Map(previousFields.map(f => [f.id, f]))
+        const reordered = orderedIds
+          .map(id => byId.get(id))
+          .filter((f): f is RegistrationFormField => !!f)
+        queryClient.setQueryData(['registration-form-fields', eventId.value], reordered)
+      }
+    },
+    onError: () => {
+      if (previousFields) {
+        queryClient.setQueryData(['registration-form-fields', eventId.value], previousFields)
+      }
+    },
+  })
+}
+
+export function useCreateFieldFromTemplate(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (templateId: string) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields/from-template`,
+        { template_id: templateId },
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useImportFieldsFromEvent(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (sourceEventId: string) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField[]>>(
+        `/events/${eventId.value}/registration-fields/import-from-event`,
+        { source_event_id: sourceEventId },
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
diff --git a/apps/app/src/pages/events/[id]/settings/index.vue b/apps/app/src/pages/events/[id]/settings/index.vue
index dd0d091b..beabb864 100644
--- a/apps/app/src/pages/events/[id]/settings/index.vue
+++ b/apps/app/src/pages/events/[id]/settings/index.vue
@@ -17,6 +17,12 @@ const authStore = useAuthStore()
 const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
 const eventId = computed(() => String((route.params as { id: string }).id))
 
+const settingsTab = computed(() => {
+  const name = route.name as string
+  if (name?.includes('registration-fields')) return 'registration-fields'
+  return 'branding'
+})
+
 const { mutate: updateEvent, isPending: isUpdating } = useUpdateEvent(orgId, eventId)
 const { mutate: uploadImage, isPending: isUploading } = useUploadEventImage(orgId, eventId)
 
@@ -56,6 +62,27 @@ function onClearImage(event: EventItem, type: 'banner' | 'logo') {
 <template>
   <EventTabsNav v-slot="{ event }">
     <div @vue:mounted="initForm(event)">
+      <!-- Settings sub-navigation -->
+      <VTabs
+        :model-value="settingsTab"
+        class="mb-6"
+      >
+        <VTab
+          value="branding"
+          prepend-icon="tabler-palette"
+          :to="{ name: 'events-id-settings', params: { id: eventId } }"
+        >
+          Registratie-uiterlijk
+        </VTab>
+        <VTab
+          value="registration-fields"
+          prepend-icon="tabler-forms"
+          :to="{ name: 'events-id-settings-registration-fields', params: { id: eventId } }"
+        >
+          Registratievelden
+        </VTab>
+      </VTabs>
+
       <VRow>
         <VCol
           cols="12"
diff --git a/apps/app/src/pages/events/[id]/settings/registration-fields.vue b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
new file mode 100644
index 00000000..e04874ed
--- /dev/null
+++ b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+import RegistrationFieldCard from '@/components/event/RegistrationFieldCard.vue'
+import RegistrationFieldFormDialog from '@/components/event/RegistrationFieldFormDialog.vue'
+import TemplatePickerDialog from '@/components/event/TemplatePickerDialog.vue'
+import ImportFromEventDialog from '@/components/event/ImportFromEventDialog.vue'
+import { useUpdateEvent } from '@/composables/api/useEvents'
+import {
+  useRegistrationFormFields,
+  useCreateRegistrationFormField,
+  useUpdateRegistrationFormField,
+  useDeleteRegistrationFormField,
+  useReorderRegistrationFormFields,
+} from '@/composables/api/useRegistrationFormFields'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useNotificationStore } from '@/stores/useNotificationStore'
+import type { RegistrationFormField } from '@/types/registration-form-field'
+import type { EventItem } from '@/types/event'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+
+const route = useRoute()
+const authStore = useAuthStore()
+const notificationStore = useNotificationStore()
+
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const eventId = computed(() => String((route.params as { id: string }).id))
+
+// Event update for form settings toggles
+const { mutate: updateEvent, isPending: isUpdatingEvent } = useUpdateEvent(orgId, eventId)
+
+// Registration form fields
+const { data: fields, isLoading } = useRegistrationFormFields(eventId)
+const { mutate: createField, isPending: isCreating } = useCreateRegistrationFormField(eventId)
+const { mutate: updateField, isPending: isUpdating } = useUpdateRegistrationFormField(eventId)
+const { mutate: deleteField, isPending: isDeleting } = useDeleteRegistrationFormField(eventId)
+const { mutate: reorderFields } = useReorderRegistrationFormFields(eventId)
+
+// Local draggable list synced from query
+const localFields = ref<RegistrationFormField[]>([])
+
+watch(fields, (newFields) => {
+  if (newFields) {
+    localFields.value = [...newFields]
+  }
+}, { immediate: true })
+
+// Form settings toggles (initialised from event)
+const showSectionPreferences = ref(false)
+const showAvailability = ref(false)
+let initialised = false
+
+function initFormSettings(event: EventItem) {
+  if (initialised) return
+  showSectionPreferences.value = event.registration_show_section_preferences ?? false
+  showAvailability.value = event.registration_show_availability ?? false
+  initialised = true
+}
+
+function onToggleSectionPreferences(val: boolean | null) {
+  updateEvent(
+    { registration_show_section_preferences: !!val },
+    {
+      onSuccess: () => notificationStore.show('Instelling opgeslagen', 'success'),
+    },
+  )
+}
+
+function onToggleAvailability(val: boolean | null) {
+  updateEvent(
+    { registration_show_availability: !!val },
+    {
+      onSuccess: () => notificationStore.show('Instelling opgeslagen', 'success'),
+    },
+  )
+}
+
+// Create / Edit dialog
+const isFieldDialogOpen = ref(false)
+const editingField = ref<RegistrationFormField | null>(null)
+const fieldFormRef = ref<InstanceType<typeof RegistrationFieldFormDialog> | null>(null)
+
+const isSaving = computed(() => isCreating.value || isUpdating.value)
+
+function openCreateDialog() {
+  editingField.value = null
+  isFieldDialogOpen.value = true
+}
+
+function openEditDialog(field: RegistrationFormField) {
+  editingField.value = field
+  isFieldDialogOpen.value = true
+}
+
+function onSaveField(payload: Record<string, any>) {
+  if (editingField.value) {
+    updateField(
+      { id: editingField.value.id, ...payload },
+      {
+        onSuccess: () => {
+          isFieldDialogOpen.value = false
+          notificationStore.show(`${payload.label} bijgewerkt`, 'success')
+        },
+        onError: (err) => fieldFormRef.value?.setErrors(err),
+      },
+    )
+  }
+  else {
+    createField(payload as any, {
+      onSuccess: () => {
+        isFieldDialogOpen.value = false
+        notificationStore.show(`${payload.label} aangemaakt`, 'success')
+      },
+      onError: (err) => fieldFormRef.value?.setErrors(err),
+    })
+  }
+}
+
+// Delete confirmation
+const isDeleteDialogOpen = ref(false)
+const deletingField = ref<RegistrationFormField | null>(null)
+
+function onDeleteConfirm(field: RegistrationFormField) {
+  deletingField.value = field
+  isDeleteDialogOpen.value = true
+}
+
+function onDeleteExecute() {
+  if (!deletingField.value) return
+  const label = deletingField.value.label
+
+  deleteField(deletingField.value.id, {
+    onSuccess: () => {
+      isDeleteDialogOpen.value = false
+      deletingField.value = null
+      notificationStore.show(`${label} verwijderd`, 'success')
+    },
+  })
+}
+
+// Drag reorder
+function onDragEnd() {
+  reorderFields(localFields.value.map(f => f.id))
+}
+
+// Template picker dialog
+const isTemplatePickerOpen = ref(false)
+
+function onTemplateAdded() {
+  notificationStore.show('Veld uit template toegevoegd', 'success')
+}
+
+// Import from event dialog
+const isImportDialogOpen = ref(false)
+
+function onImported(count: number, eventName: string) {
+  notificationStore.show(`${count} velden geïmporteerd van ${eventName}`, 'success')
+}
+
+// Field count
+const fieldCount = computed(() => localFields.value.length)
+
+// Settings sub-navigation tabs
+const settingsTab = computed(() => {
+  const name = route.name as string
+  if (name?.includes('registration-fields')) return 'registration-fields'
+  return 'branding'
+})
+</script>
+
+<template>
+  <EventTabsNav v-slot="{ event }">
+    <div @vue:mounted="initFormSettings(event)">
+      <!-- Settings sub-navigation -->
+      <VTabs
+        :model-value="settingsTab"
+        class="mb-6"
+      >
+        <VTab
+          value="branding"
+          prepend-icon="tabler-palette"
+          :to="{ name: 'events-id-settings', params: { id: eventId } }"
+        >
+          Registratie-uiterlijk
+        </VTab>
+        <VTab
+          value="registration-fields"
+          prepend-icon="tabler-forms"
+          :to="{ name: 'events-id-settings-registration-fields', params: { id: eventId } }"
+        >
+          Registratievelden
+        </VTab>
+      </VTabs>
+
+      <VRow>
+        <VCol
+          cols="12"
+          md="8"
+        >
+          <!-- Section 1: Formulierinstellingen -->
+          <VCard class="mb-6">
+            <VCardTitle class="d-flex align-center gap-2">
+              <VIcon
+                icon="tabler-adjustments"
+                size="20"
+              />
+              Formulierinstellingen
+            </VCardTitle>
+            <VCardSubtitle>
+              Bepaal welke vaste onderdelen in het registratieformulier worden getoond
+            </VCardSubtitle>
+
+            <VCardText>
+              <div class="d-flex flex-column gap-4">
+                <div class="d-flex align-center justify-space-between">
+                  <div>
+                    <p class="text-body-1 font-weight-medium mb-0">
+                      Voorkeurssecties tonen
+                    </p>
+                    <p class="text-body-2 text-medium-emphasis mb-0">
+                      Vrijwilligers kunnen secties kiezen en op prioriteit rangschikken
+                    </p>
+                  </div>
+                  <VSwitch
+                    v-model="showSectionPreferences"
+                    hide-details
+                    :loading="isUpdatingEvent"
+                    @update:model-value="onToggleSectionPreferences"
+                  />
+                </div>
+
+                <VDivider />
+
+                <div class="d-flex align-center justify-space-between">
+                  <div>
+                    <p class="text-body-1 font-weight-medium mb-0">
+                      Beschikbaarheid tonen
+                    </p>
+                    <p class="text-body-2 text-medium-emphasis mb-0">
+                      Vrijwilligers kunnen hun beschikbare tijdsloten selecteren
+                    </p>
+                  </div>
+                  <VSwitch
+                    v-model="showAvailability"
+                    hide-details
+                    :loading="isUpdatingEvent"
+                    @update:model-value="onToggleAvailability"
+                  />
+                </div>
+              </div>
+            </VCardText>
+          </VCard>
+
+          <!-- Section 2: Registratievelden -->
+          <div class="d-flex flex-wrap justify-space-between align-center gap-y-3 mb-4">
+            <div class="d-flex align-center gap-2">
+              <h5 class="text-h5">
+                Registratievelden
+              </h5>
+              <VChip
+                v-if="fieldCount > 0"
+                size="small"
+                variant="tonal"
+              >
+                {{ fieldCount }} {{ fieldCount === 1 ? 'veld' : 'velden' }}
+              </VChip>
+            </div>
+            <div class="d-flex flex-wrap gap-2">
+              <VBtn
+                variant="outlined"
+                prepend-icon="tabler-template"
+                @click="isTemplatePickerOpen = true"
+              >
+                Uit template
+              </VBtn>
+              <VBtn
+                prepend-icon="tabler-plus"
+                @click="openCreateDialog"
+              >
+                Nieuw veld
+              </VBtn>
+              <VBtn
+                variant="outlined"
+                color="secondary"
+                prepend-icon="tabler-download"
+                @click="isImportDialogOpen = true"
+              >
+                Importeer van event
+              </VBtn>
+            </div>
+          </div>
+
+          <!-- Loading -->
+          <VSkeletonLoader
+            v-if="isLoading"
+            type="card@3"
+          />
+
+          <!-- Empty state -->
+          <VCard
+            v-else-if="!localFields.length"
+            class="text-center pa-8"
+          >
+            <VIcon
+              icon="tabler-forms"
+              size="48"
+              class="mb-4 text-disabled"
+            />
+            <p class="text-body-1 text-disabled mb-2">
+              Nog geen registratievelden geconfigureerd.
+            </p>
+            <p class="text-body-2 text-disabled mb-0">
+              Voeg velden toe uit templates of maak een nieuw veld aan.
+            </p>
+          </VCard>
+
+          <!-- Sortable field list -->
+          <draggable
+            v-else
+            v-model="localFields"
+            item-key="id"
+            ghost-class="field-ghost"
+            chosen-class="field-chosen"
+            drag-class="field-drag"
+            handle=".drag-handle"
+            :animation="200"
+            :delay="100"
+            :delay-on-touch-only="true"
+            direction="vertical"
+            @end="onDragEnd"
+          >
+            <template #item="{ element }">
+              <RegistrationFieldCard
+                :field="element"
+                @edit="openEditDialog"
+                @delete="onDeleteConfirm"
+              />
+            </template>
+          </draggable>
+        </VCol>
+
+        <VCol
+          cols="12"
+          md="4"
+        >
+          <!-- Info card -->
+          <VCard variant="tonal">
+            <VCardText>
+              <div class="d-flex align-center gap-2 mb-2">
+                <VIcon
+                  icon="tabler-info-circle"
+                  size="18"
+                />
+                <span class="text-subtitle-2 font-weight-medium">Over registratievelden</span>
+              </div>
+              <p class="text-body-2 text-medium-emphasis mb-2">
+                Registratievelden bepalen welke informatie vrijwilligers invullen bij hun aanmelding.
+              </p>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Versleep velden om de volgorde aan te passen. De volgorde bepaalt hoe het formulier wordt getoond.
+              </p>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
+    </div>
+
+    <!-- Create / Edit dialog -->
+    <RegistrationFieldFormDialog
+      ref="fieldFormRef"
+      v-model="isFieldDialogOpen"
+      :org-id="orgId"
+      :field="editingField"
+      :is-saving="isSaving"
+      @save="onSaveField"
+    />
+
+    <!-- Template picker dialog -->
+    <TemplatePickerDialog
+      v-model="isTemplatePickerOpen"
+      :org-id="orgId"
+      :event-id="eventId"
+      :existing-fields="localFields"
+      @added="onTemplateAdded"
+    />
+
+    <!-- Import from event dialog -->
+    <ImportFromEventDialog
+      v-model="isImportDialogOpen"
+      :org-id="orgId"
+      :event-id="eventId"
+      @imported="onImported"
+    />
+
+    <!-- Delete confirmation -->
+    <VDialog
+      v-model="isDeleteDialogOpen"
+      max-width="400"
+    >
+      <VCard title="Veld verwijderen">
+        <VCardText>
+          Weet je zeker dat je <strong>{{ deletingField?.label }}</strong> wilt verwijderen?
+          Bestaande antwoorden blijven bewaard.
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="isDeleteDialogOpen = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            color="error"
+            :loading="isDeleting"
+            @click="onDeleteExecute"
+          >
+            Verwijderen
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </EventTabsNav>
+</template>
+
+<style scoped>
+.field-ghost {
+  opacity: 0.5;
+  background: rgb(var(--v-theme-primary), 0.05);
+  border-radius: 8px;
+}
+
+.field-chosen {
+  box-shadow: 0 4px 12px rgb(var(--v-theme-on-surface), 0.12);
+}
+</style>
diff --git a/apps/app/src/types/event.ts b/apps/app/src/types/event.ts
index 5419feb0..27019d6e 100644
--- a/apps/app/src/types/event.ts
+++ b/apps/app/src/types/event.ts
@@ -25,6 +25,8 @@ export interface EventItem {
   registration_banner_url: string | null
   registration_welcome_text: string | null
   registration_logo_url: string | null
+  registration_show_section_preferences: boolean
+  registration_show_availability: boolean
   is_festival: boolean
   is_sub_event: boolean
   is_flat_event: boolean
@@ -53,6 +55,8 @@ export interface CreateEventPayload {
 export interface UpdateEventPayload extends Partial<CreateEventPayload> {
   status?: EventStatus
   registration_welcome_text?: string | null
+  registration_show_section_preferences?: boolean
+  registration_show_availability?: boolean
 }
 
 export interface EventStats {
diff --git a/apps/app/src/types/registration-form-field.ts b/apps/app/src/types/registration-form-field.ts
new file mode 100644
index 00000000..ee74492a
--- /dev/null
+++ b/apps/app/src/types/registration-form-field.ts
@@ -0,0 +1,37 @@
+import type { RegistrationFieldType } from './registration-field-template'
+
+export interface RegistrationFormField {
+  id: string
+  event_id: string
+  label: string
+  slug: string
+  field_type: RegistrationFieldType
+  options: string[] | null
+  tag_category: string | null
+  is_required: boolean
+  is_portal_visible: boolean
+  is_admin_only: boolean
+  is_filterable: boolean
+  section: string | null
+  help_text: string | null
+  sort_order: number
+  created_at: string
+  updated_at: string
+  available_tags?: Array<{ id: string; name: string; category: string | null }>
+}
+
+export interface RegistrationFormFieldCreateDTO {
+  label: string
+  field_type: RegistrationFieldType
+  options?: string[] | null
+  tag_category?: string | null
+  is_required?: boolean
+  is_portal_visible?: boolean
+  is_admin_only?: boolean
+  is_filterable?: boolean
+  section?: string | null
+  help_text?: string | null
+  sort_order?: number
+}
+
+export interface RegistrationFormFieldUpdateDTO extends Partial<Omit<RegistrationFormFieldCreateDTO, 'field_type'>> {}
diff --git a/apps/app/typed-router.d.ts b/apps/app/typed-router.d.ts
index f97bed17..6cacb786 100644
--- a/apps/app/typed-router.d.ts
+++ b/apps/app/typed-router.d.ts
@@ -30,12 +30,14 @@ declare module 'vue-router/auto-routes' {
     'events-id-programmaonderdelen': RouteRecordInfo<'events-id-programmaonderdelen', '/events/:id/programmaonderdelen', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'events-id-sections': RouteRecordInfo<'events-id-sections', '/events/:id/sections', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'events-id-settings': RouteRecordInfo<'events-id-settings', '/events/:id/settings', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-settings-registration-fields': RouteRecordInfo<'events-id-settings-registration-fields', '/events/:id/settings/registration-fields', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'events-id-time-slots': RouteRecordInfo<'events-id-time-slots', '/events/:id/time-slots', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
     'organisation-companies': RouteRecordInfo<'organisation-companies', '/organisation/companies', Record<never, never>, Record<never, never>>,
     'organisation-members': RouteRecordInfo<'organisation-members', '/organisation/members', Record<never, never>, Record<never, never>>,
+    'organisation-settings': RouteRecordInfo<'organisation-settings', '/organisation/settings', Record<never, never>, Record<never, never>>,
     'select-organisation': RouteRecordInfo<'select-organisation', '/select-organisation', Record<never, never>, Record<never, never>>,
   }
 }