From 47bd533179815a839d20014e946a6d8d08c48760 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 29 Apr 2026 11:04:46 +0200
Subject: [PATCH] style(app): apply eslint --fix to Tier 1 (Vue templates)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WS-3 session 1b-i Tier 1.

Scope: src/components/**, src/pages/**, src/layouts/**, src/views/**
restricted to *.vue files. Mechanical formatting only — predominantly
vue/html-indent (506 fixes in CrowdListDetailPanel.vue alone),
padding-line-between-statements, antfu/if-newline.

Excludes (per session prompt):
- apps/app/vite.config.ts (Tier 3)
- apps/app/themeConfig.ts (Tier 3)
- apps/app/vitest.config.ts (Tier 3)
- All TypeScript-only files in src/composables, src/lib, src/stores,
  src/plugins, src/types (Tier 2 — separate commit)

Includes session 1a layouts (PortalLayout.vue, PublicLayout.vue) where
2 'lines-around-comment' errors were flagged in the previous 1b-i
pre-flight inspection.

Tests + typecheck verified green post-fix:
- apps/app vitest: 49 passed (unchanged)
- apps/app vue-tsc: clean (unchanged)
- apps/portal vitest: 113 passed (unchanged — not touched)
- backend pest: 1486 passed (unchanged — not touched)

Lint baseline progression:
- Pre-Tier-1: 1451 problems
- Post-Tier-1: 422 problems

Visual smoke status:
- NOT YET SMOKED — Bert to verify before merge. This Claude Code
  session has no UI access; cannot run pnpm dev and click through
  affected routes. The high-traffic candidates are
  CrowdListDetailPanel (506 fixes), AssignPersonDialog (44),
  ShiftDetailPanel (36), and the events / form-failures pages.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/app/src/components/AppKpiCard.vue        |    3 +-
 .../account-settings/AccountTab.vue           |   18 +-
 .../account-settings/SecurityTab.vue          |   38 +-
 .../src/components/auth/MfaChallengeCard.vue  |    6 +-
 .../components/auth/PasswordRequirements.vue  |    2 +-
 .../components/common/ImageUploadField.vue    |    8 +-
 .../AddPersonToCrowdListDialog.vue            |    5 +-
 .../crowd-lists/CrowdListDetailPanel.vue      | 1063 +++++++++--------
 .../crowd-lists/CrowdListFormDialog.vue       |    7 +-
 .../event/ImportFromEventDialog.vue           |   21 +-
 .../event/RegistrationFieldCard.vue           |   10 +-
 .../event/RegistrationFieldFormDialog.vue     |   20 +-
 .../components/events/CreateEventDialog.vue   |   14 +-
 .../events/CreateSubEventDialog.vue           |    5 +-
 .../events/DeleteSubEventDialog.vue           |    5 +-
 .../src/components/events/EditEventDialog.vue |   14 +-
 .../components/events/EventMetricCards.vue    |   24 +-
 .../src/components/events/EventTabsNav.vue    |   21 +-
 .../form-failures/DismissFailureDialog.vue    |   12 +-
 .../form-failures/ResolveFailureDialog.vue    |    5 +-
 .../form-failures/RetryFailureDialog.vue      |    8 +-
 .../layout/OrganisationSwitcher.vue           |    7 +-
 .../components/members/InviteMemberDialog.vue |    5 +-
 .../components/organisation/CompanyDialog.vue |   26 +-
 .../organisation/EmailBrandingTab.vue         |   12 +-
 .../components/organisation/EmailLogTab.vue   |   10 +-
 .../organisation/EmailTemplatesTab.vue        |   13 +-
 .../components/organisation/PersonTagsTab.vue |   16 +-
 .../RegistrationFieldTemplatesTab.vue         |   33 +-
 .../organisations/CrowdTypesManager.vue       |    8 +-
 .../organisations/EditOrganisationDialog.vue  |    9 +-
 .../persons/AddMemberAsPersonDialog.vue       |   25 +-
 .../components/persons/CreatePersonDialog.vue |    9 +-
 .../components/persons/EditPersonDialog.vue   |   11 +-
 .../components/persons/PersonDetailPanel.vue  |   35 +-
 .../components/platform/ImpersonateDialog.vue |   11 +-
 .../platform/ImpersonationBanner.vue          |    9 +-
 .../components/sections/AssignShiftDialog.vue |   10 +-
 .../sections/CreateSectionDialog.vue          |    7 +-
 .../components/sections/CreateShiftDialog.vue |   22 +-
 .../sections/CreateTimeSlotDialog.vue         |   19 +-
 .../components/sections/EditSectionDialog.vue |   12 +-
 .../sections/SectionsShiftsPanel.vue          |   72 +-
 .../components/settings/MfaDisableDialog.vue  |    2 +-
 .../settings/MfaEmailSetupDialog.vue          |    4 +-
 .../settings/MfaTotpSetupDialog.vue           |    4 +-
 .../components/shifts/AssignPersonDialog.vue  |   94 +-
 .../components/shifts/ShiftDetailPanel.vue    |   83 +-
 .../DefaultLayoutWithVerticalNav.vue          |   65 +-
 .../src/layouts/components/NavSearchBar.vue   |    1 -
 .../src/layouts/components/UserProfile.vue    |    2 +
 apps/app/src/pages/account-settings/index.vue |    1 +
 .../pages/events/[id]/crowd-lists/index.vue   |   17 +-
 apps/app/src/pages/events/[id]/index.vue      |    2 +-
 .../src/pages/events/[id]/persons/index.vue   |    7 +-
 .../events/[id]/programmaonderdelen/index.vue |    2 +-
 .../src/pages/events/[id]/settings/index.vue  |    4 +-
 .../[id]/settings/registration-fields.vue     |   28 +-
 .../pages/events/[id]/time-slots/index.vue    |   69 +-
 apps/app/src/pages/events/index.vue           |    4 +-
 apps/app/src/pages/forgot-password.vue        |    8 +-
 apps/app/src/pages/index.vue                  |    1 +
 apps/app/src/pages/invitations/[token].vue    |   15 +-
 apps/app/src/pages/login.vue                  |    3 +-
 apps/app/src/pages/members/index.vue          |   15 +-
 apps/app/src/pages/organisation/companies.vue |    9 +-
 apps/app/src/pages/organisation/index.vue     |   38 +-
 apps/app/src/pages/organisation/settings.vue  |    8 +-
 .../src/pages/platform/activity-log/index.vue |   13 +-
 apps/app/src/pages/platform/index.vue         |   11 +-
 .../src/pages/platform/organisations/[id].vue |   20 +-
 .../pages/platform/organisations/index.vue    |    5 +-
 apps/app/src/pages/platform/users/[id].vue    |    6 +-
 apps/app/src/pages/platform/users/index.vue   |    5 +-
 apps/app/src/pages/reset-password.vue         |   12 +-
 apps/app/src/pages/select-organisation.vue    |   10 +-
 apps/app/src/pages/verify-email-change.vue    |   12 +-
 77 files changed, 1277 insertions(+), 993 deletions(-)

diff --git a/apps/app/src/components/AppKpiCard.vue b/apps/app/src/components/AppKpiCard.vue
index c11311b1..4155a0d2 100644
--- a/apps/app/src/components/AppKpiCard.vue
+++ b/apps/app/src/components/AppKpiCard.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
     iconColor?: string
     value: string | number
     title: string
+
     /** Ondertitel; ontbreekt er een, dan blijft één regelhoogte gereserveerd voor gelijke tegelhoogtes. */
     subtitle?: string
     clickable?: boolean
@@ -34,8 +35,8 @@ function onClick() {
 
 <template>
   <VCard
+    class="flex-grow-1 w-100 d-flex flex-column"
     :class="[
-      'flex-grow-1 w-100 d-flex flex-column',
       clickable ? 'cursor-pointer' : '',
       borderAccent ? `card-border-shadow-${borderAccent}` : '',
     ]"
diff --git a/apps/app/src/components/account-settings/AccountTab.vue b/apps/app/src/components/account-settings/AccountTab.vue
index d55a1bfc..1bc6171a 100644
--- a/apps/app/src/components/account-settings/AccountTab.vue
+++ b/apps/app/src/components/account-settings/AccountTab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/useAuthStore'
-import { useUpdateProfile, useChangeEmail } from '@/composables/api/useAccount'
+import { useChangeEmail, useUpdateProfile } from '@/composables/api/useAccount'
 import type { UpdateProfilePayload } from '@/composables/api/useAccount'
 import { avatarText } from '@core/utils/formatters'
 
@@ -15,6 +15,7 @@ const profileForm = ref<UpdateProfilePayload>({
   timezone: 'Europe/Amsterdam',
   locale: 'nl',
 })
+
 const profileFieldErrors = ref<Record<string, string>>({})
 const profileSuccess = ref('')
 
@@ -23,7 +24,7 @@ const updateProfileMutation = useUpdateProfile()
 // Populate form from auth store
 watch(
   () => authStore.user,
-  (user) => {
+  user => {
     if (user) {
       profileForm.value = {
         first_name: user.first_name,
@@ -49,20 +50,20 @@ async function handleProfileSave() {
       date_of_birth: profileForm.value.date_of_birth || null,
     },
     {
-      onSuccess: async (data) => {
+      onSuccess: async data => {
         profileSuccess.value = data.message
 
         // Re-fetch user data to update the store
         const { apiClient } = await import('@/lib/axios')
         const { data: meData } = await apiClient.get<{ success: boolean; data: import('@/types/auth').MeResponse }>('/auth/me')
+
         authStore.setUser(meData.data)
       },
       onError: (err: unknown) => {
         const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
         if (ax.response?.data?.errors) {
-          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+          for (const [key, messages] of Object.entries(ax.response.data.errors))
             profileFieldErrors.value[key] = messages[0]
-          }
         }
       },
     },
@@ -74,6 +75,7 @@ const emailForm = ref({
   new_email: '',
   password: '',
 })
+
 const emailFieldErrors = ref<Record<string, string>>({})
 const emailSuccess = ref('')
 const showEmailPw = ref(false)
@@ -87,16 +89,15 @@ async function handleEmailChange() {
   changeEmailMutation.mutate(
     { ...emailForm.value, app: 'app' },
     {
-      onSuccess: (data) => {
+      onSuccess: data => {
         emailSuccess.value = data.message
         emailForm.value = { new_email: '', password: '' }
       },
       onError: (err: unknown) => {
         const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
         if (ax.response?.data?.errors) {
-          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+          for (const [key, messages] of Object.entries(ax.response.data.errors))
             emailFieldErrors.value[key] = messages[0]
-          }
         }
       },
     },
@@ -111,6 +112,7 @@ const avatarSrc = computed((): string | null => {
   if (raw.startsWith('http://') || raw.startsWith('https://'))
     return raw
   const base = (import.meta.env.VITE_API_URL as string | undefined)?.replace(/\/api\/v1\/?$/, '') ?? ''
+
   return raw.startsWith('/') ? `${base}${raw}` : `${base}/${raw}`
 })
 
diff --git a/apps/app/src/components/account-settings/SecurityTab.vue b/apps/app/src/components/account-settings/SecurityTab.vue
index 83c9c694..f1117527 100644
--- a/apps/app/src/components/account-settings/SecurityTab.vue
+++ b/apps/app/src/components/account-settings/SecurityTab.vue
@@ -3,11 +3,11 @@ import { useAuthStore } from '@/stores/useAuthStore'
 import { useChangePassword } from '@/composables/api/useAccount'
 import {
   useMfaStatus,
-  useTrustedDevices,
-  useRevokeDevice,
-  useRevokeAllDevices,
   useRegenerateBackupCodes,
+  useRevokeAllDevices,
+  useRevokeDevice,
   useSetPreferredMethod,
+  useTrustedDevices,
 } from '@/composables/api/useMfa'
 import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
 import MfaEmailSetupDialog from '@/components/settings/MfaEmailSetupDialog.vue'
@@ -22,6 +22,7 @@ const passwordForm = ref({
   password: '',
   password_confirmation: '',
 })
+
 const passwordFieldErrors = ref<Record<string, string>>({})
 const passwordSuccess = ref('')
 const showCurrentPw = ref(false)
@@ -30,8 +31,11 @@ const showConfirmPw = ref(false)
 const passwordReqsRef = ref<InstanceType<typeof PasswordRequirements>>()
 
 const confirmationError = computed(() => {
-  if (!passwordForm.value.password_confirmation) return ''
-  if (passwordForm.value.password !== passwordForm.value.password_confirmation) return 'Wachtwoorden komen niet overeen'
+  if (!passwordForm.value.password_confirmation)
+    return ''
+  if (passwordForm.value.password !== passwordForm.value.password_confirmation)
+    return 'Wachtwoorden komen niet overeen'
+
   return ''
 })
 
@@ -46,12 +50,13 @@ const canSubmitPassword = computed(() =>
 const changePasswordMutation = useChangePassword()
 
 async function handlePasswordChange() {
-  if (!canSubmitPassword.value) return
+  if (!canSubmitPassword.value)
+    return
   passwordFieldErrors.value = {}
   passwordSuccess.value = ''
 
   changePasswordMutation.mutate(passwordForm.value, {
-    onSuccess: (data) => {
+    onSuccess: data => {
       passwordSuccess.value = data.message
       passwordForm.value = {
         current_password: '',
@@ -62,9 +67,8 @@ async function handlePasswordChange() {
     onError: (err: unknown) => {
       const ax = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
       if (ax.response?.data?.errors) {
-        for (const [key, messages] of Object.entries(ax.response.data.errors)) {
+        for (const [key, messages] of Object.entries(ax.response.data.errors))
           passwordFieldErrors.value[key] = messages[0]
-        }
       }
     },
   })
@@ -98,17 +102,23 @@ function handleSetPreferred(method: 'totp' | 'email') {
 }
 
 const backupCodesRemaining = computed(() => mfaStatus.value?.backup_codes_remaining ?? 0)
+
 const backupCodesColor = computed(() => {
-  if (backupCodesRemaining.value > 5) return 'success'
-  if (backupCodesRemaining.value >= 3) return 'warning'
+  if (backupCodesRemaining.value > 5)
+    return 'success'
+  if (backupCodesRemaining.value >= 3)
+    return 'warning'
+
   return 'error'
 })
 
 function onSetupCompleted() {
   // Refetch MFA status so the method cards update (enabled, method, backup codes)
   refetchMfaStatus()
+
   // Immediately clear the enforcement flag so the router guard unblocks navigation
   authStore.mfaSetupRequired = false
+
   // Refresh the full /auth/me response into the store so the flag stays
   // correct on subsequent navigations (without needing a full page reload)
   authStore.refreshUser()
@@ -252,7 +262,8 @@ function copyRegeneratedCodes() {
         >
           <VCard
             variant="outlined"
-            :class="['mfa-method-card h-100', { 'mfa-method-card--primary': totpConfigured && preferredMethod === 'totp' }]"
+            class="mfa-method-card h-100"
+            :class="[{ 'mfa-method-card--primary': totpConfigured && preferredMethod === 'totp' }]"
           >
             <VCardText>
               <VAvatar
@@ -336,7 +347,8 @@ function copyRegeneratedCodes() {
         >
           <VCard
             variant="outlined"
-            :class="['mfa-method-card h-100', { 'mfa-method-card--primary': emailConfigured && preferredMethod === 'email' }]"
+            class="mfa-method-card h-100"
+            :class="[{ 'mfa-method-card--primary': emailConfigured && preferredMethod === 'email' }]"
           >
             <VCardText>
               <VAvatar
diff --git a/apps/app/src/components/auth/MfaChallengeCard.vue b/apps/app/src/components/auth/MfaChallengeCard.vue
index 7345e59f..d675c28c 100644
--- a/apps/app/src/components/auth/MfaChallengeCard.vue
+++ b/apps/app/src/components/auth/MfaChallengeCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVerifyMfa, useSendMfaEmailCode } from '@/composables/api/useMfa'
+import { useSendMfaEmailCode, useVerifyMfa } from '@/composables/api/useMfa'
 import { generateDeviceFingerprint, getDeviceName } from '@/utils/deviceFingerprint'
 import type { MfaMethod } from '@/types/mfa'
 
@@ -87,9 +87,11 @@ function onOtpFinish(code: string) {
 
 async function handleVerify() {
   errorMessage.value = ''
+
   const code = isBackupMethod.value ? backupCode.value : otpCode.value
 
-  if (!code) return
+  if (!code)
+    return
 
   try {
     const data = await verifyMutation.mutateAsync({
diff --git a/apps/app/src/components/auth/PasswordRequirements.vue b/apps/app/src/components/auth/PasswordRequirements.vue
index 7aeb1e16..1e740c90 100644
--- a/apps/app/src/components/auth/PasswordRequirements.vue
+++ b/apps/app/src/components/auth/PasswordRequirements.vue
@@ -5,7 +5,7 @@ const requirements = computed(() => [
   { label: 'Minimaal 8 tekens', met: props.password.length >= 8 },
   { label: 'Een hoofdletter', met: /[A-Z]/.test(props.password) },
   { label: 'Een kleine letter', met: /[a-z]/.test(props.password) },
-  { label: 'Een cijfer', met: /[0-9]/.test(props.password) },
+  { label: 'Een cijfer', met: /\d/.test(props.password) },
 ])
 
 const allMet = computed(() => requirements.value.every(r => r.met))
diff --git a/apps/app/src/components/common/ImageUploadField.vue b/apps/app/src/components/common/ImageUploadField.vue
index 618c6686..a5b2e93a 100644
--- a/apps/app/src/components/common/ImageUploadField.vue
+++ b/apps/app/src/components/common/ImageUploadField.vue
@@ -30,13 +30,15 @@ function triggerFileInput() {
 async function onFileSelected(event: Event) {
   const input = event.target as HTMLInputElement
   const file = input.files?.[0]
-  if (!file) return
+  if (!file)
+    return
 
   uploading.value = true
   error.value = ''
 
   try {
     const formData = new FormData()
+
     formData.append('file', file)
     formData.append('purpose', props.purpose)
 
@@ -48,11 +50,13 @@ async function onFileSelected(event: Event) {
   }
   catch (e: unknown) {
     const axiosError = e as { response?: { data?: { message?: string } } }
+
     error.value = axiosError.response?.data?.message ?? 'Upload mislukt'
   }
   finally {
     uploading.value = false
-    if (input) input.value = ''
+    if (input)
+      input.value = ''
   }
 }
 
diff --git a/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue b/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue
index 513a529e..7a79a51f 100644
--- a/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue
+++ b/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue
@@ -32,9 +32,11 @@ const personItems = computed(() =>
 )
 
 function onSubmit() {
-  if (!selectedPersonId.value) return
+  if (!selectedPersonId.value)
+    return
 
   errorMessage.value = ''
+
   const personName = personItems.value.find(p => p.value === selectedPersonId.value)?.title ?? ''
 
   addPerson(
@@ -48,6 +50,7 @@ function onSubmit() {
       },
       onError: (err: unknown) => {
         const data = (err as { response?: { data?: { message?: string } } }).response?.data
+
         errorMessage.value = data?.message ?? 'Kon persoon niet toevoegen'
       },
     },
diff --git a/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue b/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
index 8663486f..0db0c9d6 100644
--- a/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
+++ b/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
+  useApproveAllPending,
   useCrowdListPersons,
   useRemovePersonFromCrowdList,
-  useApproveAllPending,
 } from '@/composables/api/useCrowdLists'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useCompanies } from '@/composables/api/useCompanies'
@@ -32,6 +32,7 @@ const crowdListIdRef = computed(() => props.crowdList?.id ?? '')
 // Data fetching
 const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
 const { data: companies } = useCompanies(orgIdRef)
+
 const {
   data: personsResponse,
   isLoading: personsLoading,
@@ -46,12 +47,16 @@ const { mutate: approveAllPending, isPending: isApprovingAll } = useApproveAllPe
 
 // Resolved lookups
 const crowdTypeObj = computed(() => {
-  if (!props.crowdList) return null
+  if (!props.crowdList)
+    return null
+
   return crowdTypes.value?.find(ct => ct.id === props.crowdList!.crowd_type_id) ?? null
 })
 
 const companyName = computed(() => {
-  if (!props.crowdList?.recipient_company_id) return null
+  if (!props.crowdList?.recipient_company_id)
+    return null
+
   return companies.value?.find(c => c.id === props.crowdList!.recipient_company_id)?.name ?? '-'
 })
 
@@ -67,14 +72,14 @@ const filteredPersons = computed(() => {
 
   if (searchQuery.value) {
     const q = searchQuery.value.toLowerCase()
+
     result = result.filter(
       (p: Person) => p.full_name.toLowerCase().includes(q) || p.email.toLowerCase().includes(q),
     )
   }
 
-  if (statusFilter.value) {
+  if (statusFilter.value)
     result = result.filter((p: Person) => p.status === statusFilter.value)
-  }
 
   return result
 })
@@ -83,11 +88,15 @@ const filteredPersons = computed(() => {
 const statusCounts = computed(() => {
   const counts = { approved: 0, pending: 0, rejected: 0, other: 0 }
   for (const p of persons.value) {
-    if (p.status === PersonStatus.APPROVED) counts.approved++
-    else if (p.status === PersonStatus.PENDING || p.status === PersonStatus.APPLIED) counts.pending++
-    else if (p.status === PersonStatus.REJECTED) counts.rejected++
+    if (p.status === PersonStatus.APPROVED)
+      counts.approved++
+    else if (p.status === PersonStatus.PENDING || p.status === PersonStatus.APPLIED)
+      counts.pending++
+    else if (p.status === PersonStatus.REJECTED)
+      counts.rejected++
     else counts.other++
   }
+
   return counts
 })
 
@@ -99,16 +108,23 @@ const pendingPersonIds = computed(() =>
 
 // Capacity
 const capacityPercentage = computed(() => {
-  if (!props.crowdList?.max_persons) return null
+  if (!props.crowdList?.max_persons)
+    return null
+
   return Math.round((props.crowdList.persons_count / props.crowdList.max_persons) * 100)
 })
 
 const capacityColor = computed(() => {
   const pct = capacityPercentage.value
-  if (pct === null) return 'primary'
-  if (pct > 100) return 'purple'
-  if (pct >= 80) return 'success'
-  if (pct >= 50) return 'warning'
+  if (pct === null)
+    return 'primary'
+  if (pct > 100)
+    return 'purple'
+  if (pct >= 80)
+    return 'success'
+  if (pct >= 50)
+    return 'warning'
+
   return 'error'
 })
 
@@ -194,7 +210,8 @@ function onRemoveConfirm(person: Person) {
 }
 
 function onRemoveExecute() {
-  if (!removingPerson.value || !props.crowdList) return
+  if (!removingPerson.value || !props.crowdList)
+    return
   const name = removingPerson.value.full_name
 
   removePerson(
@@ -212,10 +229,11 @@ function onRemoveExecute() {
 }
 
 function onApproveAllExecute() {
-  if (!pendingPersonIds.value.length) return
+  if (!pendingPersonIds.value.length)
+    return
 
   approveAllPending(pendingPersonIds.value, {
-    onSuccess: (result) => {
+    onSuccess: result => {
       isApproveAllDialogOpen.value = false
       successMessage.value = `${result.approved} ${result.approved === 1 ? 'persoon' : 'personen'} goedgekeurd`
       showSuccess.value = true
@@ -241,271 +259,267 @@ function onApproveAllExecute() {
         <div class="flex-shrink-0">
           <!-- ═══ Section 1: Header ═══ -->
           <div class="pa-6 pb-4">
-        <div class="d-flex justify-space-between align-start mb-3">
-          <h5 class="text-h5">
-            {{ crowdList.name }}
-          </h5>
-          <div class="d-flex gap-x-1">
-            <VBtn
-              icon="tabler-edit"
-              variant="text"
-              size="small"
-              title="Bewerken"
-              @click="emit('edit', crowdList)"
-            />
-            <VBtn
-              icon="tabler-x"
-              variant="text"
-              size="small"
-              title="Sluiten"
-              @click="modelValue = false"
-            />
-          </div>
-        </div>
-
-        <div class="d-flex gap-x-2 flex-wrap mb-4">
-          <VChip
-            :color="crowdList.type === CrowdListType.INTERNAL ? 'primary' : 'info'"
-            size="small"
-          >
-            {{ crowdList.type === CrowdListType.INTERNAL ? 'Intern' : 'Extern' }}
-          </VChip>
-          <VChip
-            v-if="crowdList.is_full"
-            color="error"
-            size="small"
-          >
-            Vol
-          </VChip>
-        </div>
-
-        <VList
-          density="compact"
-          class="pa-0"
-        >
-          <VListItem density="compact">
-            <template #prepend>
-              <VIcon
-                icon="tabler-users-group"
-                size="18"
-                class="me-3"
-              />
-            </template>
-            <VListItemTitle class="text-body-2">
-              Crowd Type
-            </VListItemTitle>
-            <template #append>
-              <div class="d-flex align-center gap-x-2">
-                <VIcon
-                  v-if="crowdTypeObj?.color"
-                  icon="tabler-circle-filled"
-                  :color="crowdTypeObj.color"
-                  size="10"
+            <div class="d-flex justify-space-between align-start mb-3">
+              <h5 class="text-h5">
+                {{ crowdList.name }}
+              </h5>
+              <div class="d-flex gap-x-1">
+                <VBtn
+                  icon="tabler-edit"
+                  variant="text"
+                  size="small"
+                  title="Bewerken"
+                  @click="emit('edit', crowdList)"
+                />
+                <VBtn
+                  icon="tabler-x"
+                  variant="text"
+                  size="small"
+                  title="Sluiten"
+                  @click="modelValue = false"
                 />
-                <span class="text-body-2">{{ crowdTypeObj?.name ?? '-' }}</span>
               </div>
-            </template>
-          </VListItem>
+            </div>
 
-          <VListItem
-            v-if="companyName"
-            density="compact"
-          >
-            <template #prepend>
-              <VIcon
-                icon="tabler-building"
-                size="18"
-                class="me-3"
-              />
-            </template>
-            <VListItemTitle class="text-body-2">
-              Bedrijf
-            </VListItemTitle>
-            <template #append>
-              <span class="text-body-2">{{ companyName }}</span>
-            </template>
-          </VListItem>
+            <div class="d-flex gap-x-2 flex-wrap mb-4">
+              <VChip
+                :color="crowdList.type === CrowdListType.INTERNAL ? 'primary' : 'info'"
+                size="small"
+              >
+                {{ crowdList.type === CrowdListType.INTERNAL ? 'Intern' : 'Extern' }}
+              </VChip>
+              <VChip
+                v-if="crowdList.is_full"
+                color="error"
+                size="small"
+              >
+                Vol
+              </VChip>
+            </div>
 
-          <VListItem density="compact">
-            <template #prepend>
-              <VIcon
-                icon="tabler-calendar"
-                size="18"
-                class="me-3"
-              />
-            </template>
-            <VListItemTitle class="text-body-2">
-              Aangemaakt
-            </VListItemTitle>
-            <template #append>
-              <span class="text-body-2">{{ formatLongDate(crowdList.created_at) }}</span>
-            </template>
-          </VListItem>
-        </VList>
-
-        <VRow class="mt-2">
-          <VCol
-            cols="6"
-          >
-            <VCard
-              variant="outlined"
-              class="pa-3 text-center"
+            <VList
+              density="compact"
+              class="pa-0"
             >
-              <VIcon
-                :icon="crowdList.auto_approve ? 'tabler-circle-check' : 'tabler-circle-x'"
-                :color="crowdList.auto_approve ? 'success' : 'default'"
-                size="20"
-                class="mb-1"
-              />
-              <p class="text-caption text-disabled mb-0">
-                Auto-approve
-              </p>
-              <p class="text-body-2 font-weight-medium mb-0">
-                {{ crowdList.auto_approve ? 'Aan' : 'Uit' }}
-              </p>
-            </VCard>
-          </VCol>
-          <VCol
-            cols="6"
-          >
-            <VCard
-              variant="outlined"
-              class="pa-3 text-center"
-            >
-              <VIcon
-                icon="tabler-users"
-                size="20"
-                class="mb-1"
-              />
-              <p class="text-caption text-disabled mb-0">
-                Max personen
-              </p>
-              <p class="text-body-2 font-weight-medium mb-0">
-                {{ crowdList.max_persons ?? 'Geen limiet' }}
-              </p>
-            </VCard>
-          </VCol>
-        </VRow>
+              <VListItem density="compact">
+                <template #prepend>
+                  <VIcon
+                    icon="tabler-users-group"
+                    size="18"
+                    class="me-3"
+                  />
+                </template>
+                <VListItemTitle class="text-body-2">
+                  Crowd Type
+                </VListItemTitle>
+                <template #append>
+                  <div class="d-flex align-center gap-x-2">
+                    <VIcon
+                      v-if="crowdTypeObj?.color"
+                      icon="tabler-circle-filled"
+                      :color="crowdTypeObj.color"
+                      size="10"
+                    />
+                    <span class="text-body-2">{{ crowdTypeObj?.name ?? '-' }}</span>
+                  </div>
+                </template>
+              </VListItem>
+
+              <VListItem
+                v-if="companyName"
+                density="compact"
+              >
+                <template #prepend>
+                  <VIcon
+                    icon="tabler-building"
+                    size="18"
+                    class="me-3"
+                  />
+                </template>
+                <VListItemTitle class="text-body-2">
+                  Bedrijf
+                </VListItemTitle>
+                <template #append>
+                  <span class="text-body-2">{{ companyName }}</span>
+                </template>
+              </VListItem>
+
+              <VListItem density="compact">
+                <template #prepend>
+                  <VIcon
+                    icon="tabler-calendar"
+                    size="18"
+                    class="me-3"
+                  />
+                </template>
+                <VListItemTitle class="text-body-2">
+                  Aangemaakt
+                </VListItemTitle>
+                <template #append>
+                  <span class="text-body-2">{{ formatLongDate(crowdList.created_at) }}</span>
+                </template>
+              </VListItem>
+            </VList>
+
+            <VRow class="mt-2">
+              <VCol cols="6">
+                <VCard
+                  variant="outlined"
+                  class="pa-3 text-center"
+                >
+                  <VIcon
+                    :icon="crowdList.auto_approve ? 'tabler-circle-check' : 'tabler-circle-x'"
+                    :color="crowdList.auto_approve ? 'success' : 'default'"
+                    size="20"
+                    class="mb-1"
+                  />
+                  <p class="text-caption text-disabled mb-0">
+                    Auto-approve
+                  </p>
+                  <p class="text-body-2 font-weight-medium mb-0">
+                    {{ crowdList.auto_approve ? 'Aan' : 'Uit' }}
+                  </p>
+                </VCard>
+              </VCol>
+              <VCol cols="6">
+                <VCard
+                  variant="outlined"
+                  class="pa-3 text-center"
+                >
+                  <VIcon
+                    icon="tabler-users"
+                    size="20"
+                    class="mb-1"
+                  />
+                  <p class="text-caption text-disabled mb-0">
+                    Max personen
+                  </p>
+                  <p class="text-body-2 font-weight-medium mb-0">
+                    {{ crowdList.max_persons ?? 'Geen limiet' }}
+                  </p>
+                </VCard>
+              </VCol>
+            </VRow>
           </div>
 
           <VDivider />
 
           <!-- ═══ Section 2: Capacity Overview ═══ -->
           <div class="pa-6 py-4">
-        <template v-if="crowdList.max_persons">
-          <div class="d-flex justify-space-between align-center mb-2">
-            <span class="text-body-2 font-weight-medium">Bezetting</span>
-            <span class="text-body-2">
-              {{ crowdList.persons_count }} / {{ crowdList.max_persons }}
-              ({{ capacityPercentage }}%)
-            </span>
-          </div>
-          <VProgressLinear
-            :model-value="Math.min(capacityPercentage ?? 0, 100)"
-            :color="capacityColor"
-            rounded
-            height="8"
-            class="mb-3"
-          />
+            <template v-if="crowdList.max_persons">
+              <div class="d-flex justify-space-between align-center mb-2">
+                <span class="text-body-2 font-weight-medium">Bezetting</span>
+                <span class="text-body-2">
+                  {{ crowdList.persons_count }} / {{ crowdList.max_persons }}
+                  ({{ capacityPercentage }}%)
+                </span>
+              </div>
+              <VProgressLinear
+                :model-value="Math.min(capacityPercentage ?? 0, 100)"
+                :color="capacityColor"
+                rounded
+                height="8"
+                class="mb-3"
+              />
 
-          <!-- Status breakdown tiles -->
-          <VRow dense>
-            <VCol cols="3">
-              <VCard
-                variant="tonal"
-                color="success"
-                class="pa-2 text-center"
-              >
-                <p class="text-h6 mb-0">
-                  {{ statusCounts.approved }}
-                </p>
-                <p class="text-caption mb-0">
-                  Goedg.
-                </p>
-              </VCard>
-            </VCol>
-            <VCol cols="3">
-              <VCard
-                variant="tonal"
-                color="warning"
-                class="pa-2 text-center"
-              >
-                <p class="text-h6 mb-0">
-                  {{ statusCounts.pending }}
-                </p>
-                <p class="text-caption mb-0">
-                  Wacht
-                </p>
-              </VCard>
-            </VCol>
-            <VCol cols="3">
-              <VCard
-                variant="tonal"
-                color="error"
-                class="pa-2 text-center"
-              >
-                <p class="text-h6 mb-0">
-                  {{ statusCounts.rejected }}
-                </p>
-                <p class="text-caption mb-0">
-                  Afgew.
-                </p>
-              </VCard>
-            </VCol>
-            <VCol cols="3">
-              <VCard
-                variant="tonal"
-                class="pa-2 text-center"
-              >
-                <p class="text-h6 mb-0">
-                  {{ statusCounts.other }}
-                </p>
-                <p class="text-caption mb-0">
-                  Overig
-                </p>
-              </VCard>
-            </VCol>
-          </VRow>
-        </template>
+              <!-- Status breakdown tiles -->
+              <VRow dense>
+                <VCol cols="3">
+                  <VCard
+                    variant="tonal"
+                    color="success"
+                    class="pa-2 text-center"
+                  >
+                    <p class="text-h6 mb-0">
+                      {{ statusCounts.approved }}
+                    </p>
+                    <p class="text-caption mb-0">
+                      Goedg.
+                    </p>
+                  </VCard>
+                </VCol>
+                <VCol cols="3">
+                  <VCard
+                    variant="tonal"
+                    color="warning"
+                    class="pa-2 text-center"
+                  >
+                    <p class="text-h6 mb-0">
+                      {{ statusCounts.pending }}
+                    </p>
+                    <p class="text-caption mb-0">
+                      Wacht
+                    </p>
+                  </VCard>
+                </VCol>
+                <VCol cols="3">
+                  <VCard
+                    variant="tonal"
+                    color="error"
+                    class="pa-2 text-center"
+                  >
+                    <p class="text-h6 mb-0">
+                      {{ statusCounts.rejected }}
+                    </p>
+                    <p class="text-caption mb-0">
+                      Afgew.
+                    </p>
+                  </VCard>
+                </VCol>
+                <VCol cols="3">
+                  <VCard
+                    variant="tonal"
+                    class="pa-2 text-center"
+                  >
+                    <p class="text-h6 mb-0">
+                      {{ statusCounts.other }}
+                    </p>
+                    <p class="text-caption mb-0">
+                      Overig
+                    </p>
+                  </VCard>
+                </VCol>
+              </VRow>
+            </template>
 
-        <div
-          v-else
-          class="d-flex align-center gap-x-2"
-        >
-          <VIcon
-            icon="tabler-users"
-            size="20"
-          />
-          <span class="text-body-2">
-            {{ crowdList.persons_count }} {{ crowdList.persons_count === 1 ? 'persoon' : 'personen' }}
-            · Geen limiet ingesteld
-          </span>
-        </div>
+            <div
+              v-else
+              class="d-flex align-center gap-x-2"
+            >
+              <VIcon
+                icon="tabler-users"
+                size="20"
+              />
+              <span class="text-body-2">
+                {{ crowdList.persons_count }} {{ crowdList.persons_count === 1 ? 'persoon' : 'personen' }}
+                · Geen limiet ingesteld
+              </span>
+            </div>
           </div>
 
           <VDivider />
 
           <!-- ═══ Section 3: Quick Actions ═══ -->
           <div class="pa-6 py-3 d-flex gap-x-2">
-        <VBtn
-          size="small"
-          prepend-icon="tabler-plus"
-          :disabled="crowdList.is_full"
-          @click="isAddPersonDialogOpen = true"
-        >
-          Persoon toevoegen
-        </VBtn>
-        <VBtn
-          v-if="pendingPersonIds.length > 0"
-          size="small"
-          variant="tonal"
-          color="success"
-          prepend-icon="tabler-circle-check"
-          :loading="isApprovingAll"
-          @click="isApproveAllDialogOpen = true"
-        >
-          Alle pending goedkeuren ({{ pendingPersonIds.length }})
-        </VBtn>
+            <VBtn
+              size="small"
+              prepend-icon="tabler-plus"
+              :disabled="crowdList.is_full"
+              @click="isAddPersonDialogOpen = true"
+            >
+              Persoon toevoegen
+            </VBtn>
+            <VBtn
+              v-if="pendingPersonIds.length > 0"
+              size="small"
+              variant="tonal"
+              color="success"
+              prepend-icon="tabler-circle-check"
+              :loading="isApprovingAll"
+              @click="isApproveAllDialogOpen = true"
+            >
+              Alle pending goedkeuren ({{ pendingPersonIds.length }})
+            </VBtn>
           </div>
 
           <VDivider />
@@ -516,279 +530,282 @@ function onApproveAllExecute() {
           class="pa-6 pt-4 flex-grow-1 overflow-y-auto"
           style="min-height: 0;"
         >
-        <div class="d-flex justify-space-between align-center mb-3">
-          <h6 class="text-h6">
-            Personen ({{ crowdList.persons_count }})
-          </h6>
-        </div>
+          <div class="d-flex justify-space-between align-center mb-3">
+            <h6 class="text-h6">
+              Personen ({{ crowdList.persons_count }})
+            </h6>
+          </div>
 
-        <!-- Search & filter -->
-        <div class="d-flex gap-x-3 mb-4">
-          <AppTextField
-            v-model="searchQuery"
-            placeholder="Zoeken op naam of e-mail..."
-            prepend-inner-icon="tabler-search"
-            density="compact"
-            clearable
-            hide-details
-            style="flex: 1;"
-          />
-          <AppSelect
-            v-model="statusFilter"
-            :items="statusFilterOptions"
-            density="compact"
-            hide-details
-            style="min-inline-size: 140px;"
-          />
-        </div>
+          <!-- Search & filter -->
+          <div class="d-flex gap-x-3 mb-4">
+            <AppTextField
+              v-model="searchQuery"
+              placeholder="Zoeken op naam of e-mail..."
+              prepend-inner-icon="tabler-search"
+              density="compact"
+              clearable
+              hide-details
+              style="flex: 1;"
+            />
+            <AppSelect
+              v-model="statusFilter"
+              :items="statusFilterOptions"
+              density="compact"
+              hide-details
+              style="min-inline-size: 140px;"
+            />
+          </div>
 
-        <!-- Loading -->
-        <div v-if="personsLoading">
-          <VSkeletonLoader
-            type="list-item-three-line"
-            class="mb-2"
-          />
-          <VSkeletonLoader
-            type="list-item-three-line"
-            class="mb-2"
-          />
-          <VSkeletonLoader type="list-item-three-line" />
-        </div>
+          <!-- Loading -->
+          <div v-if="personsLoading">
+            <VSkeletonLoader
+              type="list-item-three-line"
+              class="mb-2"
+            />
+            <VSkeletonLoader
+              type="list-item-three-line"
+              class="mb-2"
+            />
+            <VSkeletonLoader type="list-item-three-line" />
+          </div>
 
-        <!-- Error -->
-        <VAlert
-          v-else-if="personsError"
-          type="error"
-          variant="tonal"
-          class="mb-4"
-        >
-          Kon personen niet laden.
-          <template #append>
-            <VBtn
-              variant="text"
-              size="small"
-              @click="refetchPersons()"
-            >
-              Opnieuw proberen
-            </VBtn>
-          </template>
-        </VAlert>
-
-        <!-- Empty -->
-        <VCard
-          v-else-if="!persons.length"
-          variant="outlined"
-          class="text-center pa-6"
-        >
-          <VIcon
-            icon="tabler-users"
-            size="36"
-            class="mb-2 text-disabled"
-          />
-          <p class="text-body-2 text-disabled mb-0">
-            Nog geen personen op deze lijst.
-            Voeg personen toe om te beginnen.
-          </p>
-        </VCard>
-
-        <!-- No results (search/filter active) -->
-        <VCard
-          v-else-if="!filteredPersons.length"
-          variant="outlined"
-          class="text-center pa-6"
-        >
-          <VIcon
-            icon="tabler-search"
-            size="36"
-            class="mb-2 text-disabled"
-          />
-          <p class="text-body-2 text-disabled mb-0">
-            Geen personen gevonden voor deze zoekopdracht.
-          </p>
-        </VCard>
-
-        <!-- Person list -->
-        <div v-else>
-          <VCard
-            v-for="person in filteredPersons"
-            :key="person.id"
-            variant="outlined"
-            class="mb-2"
+          <!-- Error -->
+          <VAlert
+            v-else-if="personsError"
+            type="error"
+            variant="tonal"
+            class="mb-4"
           >
-            <VCardText class="pa-3">
-              <div class="d-flex justify-space-between align-start">
-                <div class="d-flex gap-x-3 align-start flex-grow-1" style="min-width: 0;">
-                  <VAvatar
-                    size="36"
-                    color="primary"
-                    variant="tonal"
-                  >
-                    <span class="text-caption">{{ getInitials(person.full_name) }}</span>
-                  </VAvatar>
-                  <div style="min-width: 0;">
-                    <p class="text-body-1 font-weight-medium mb-0 text-truncate">
-                      {{ person.full_name }}
-                    </p>
-                    <p class="text-body-2 text-medium-emphasis mb-1 text-truncate">
-                      {{ person.email }}
-                      <template v-if="person.phone">
-                        · {{ person.phone }}
-                      </template>
-                    </p>
-                    <div class="d-flex gap-x-1 flex-wrap mb-1">
-                      <VChip
-                        :color="statusColor[person.status]"
-                        size="x-small"
-                      >
-                        {{ statusLabel[person.status] ?? person.status }}
-                      </VChip>
-                      <VChip
-                        v-if="person.crowd_type"
-                        :color="person.crowd_type.color"
-                        size="x-small"
-                        variant="tonal"
-                      >
-                        {{ person.crowd_type.name }}
-                      </VChip>
-                      <VChip
-                        v-for="tag in (person.tags ?? []).slice(0, 3)"
-                        :key="tag.id"
-                        size="x-small"
-                        variant="outlined"
-                        :color="tag.person_tag.color ?? undefined"
-                      >
-                        {{ tag.person_tag.name }}
-                      </VChip>
-                      <VChip
-                        v-if="person.pending_identity_match"
-                        size="x-small"
-                        color="warning"
-                        variant="tonal"
-                        prepend-icon="tabler-alert-triangle"
-                      >
-                        Mogelijk account gevonden
-                      </VChip>
-                    </div>
-                    <p
-                      v-if="person.crowd_list_pivot"
-                      class="text-caption text-disabled mb-0"
-                    >
-                      Toegevoegd: {{ formatShortDate(person.crowd_list_pivot.added_at) }}
-                    </p>
-                  </div>
-                </div>
+            Kon personen niet laden.
+            <template #append>
+              <VBtn
+                variant="text"
+                size="small"
+                @click="refetchPersons"
+              >
+                Opnieuw proberen
+              </VBtn>
+            </template>
+          </VAlert>
 
-                <!-- Three-dot menu -->
-                <VMenu>
-                  <template #activator="{ props: menuProps }">
-                    <VBtn
-                      icon="tabler-dots-vertical"
-                      variant="text"
-                      size="x-small"
-                      v-bind="menuProps"
-                    />
-                  </template>
-                  <VList density="compact">
-                    <VListItem
-                      v-if="person.status === PersonStatus.PENDING || person.status === PersonStatus.APPLIED"
-                      prepend-icon="tabler-circle-check"
-                      title="Goedkeuren"
-                      @click="onApprove(person)"
-                    />
-                    <VListItem
-                      prepend-icon="tabler-user-minus"
-                      title="Verwijderen van lijst"
-                      base-color="error"
-                      @click="onRemoveConfirm(person)"
-                    />
-                  </VList>
-                </VMenu>
-              </div>
-            </VCardText>
+          <!-- Empty -->
+          <VCard
+            v-else-if="!persons.length"
+            variant="outlined"
+            class="text-center pa-6"
+          >
+            <VIcon
+              icon="tabler-users"
+              size="36"
+              class="mb-2 text-disabled"
+            />
+            <p class="text-body-2 text-disabled mb-0">
+              Nog geen personen op deze lijst.
+              Voeg personen toe om te beginnen.
+            </p>
           </VCard>
-        </div>
+
+          <!-- No results (search/filter active) -->
+          <VCard
+            v-else-if="!filteredPersons.length"
+            variant="outlined"
+            class="text-center pa-6"
+          >
+            <VIcon
+              icon="tabler-search"
+              size="36"
+              class="mb-2 text-disabled"
+            />
+            <p class="text-body-2 text-disabled mb-0">
+              Geen personen gevonden voor deze zoekopdracht.
+            </p>
+          </VCard>
+
+          <!-- Person list -->
+          <div v-else>
+            <VCard
+              v-for="person in filteredPersons"
+              :key="person.id"
+              variant="outlined"
+              class="mb-2"
+            >
+              <VCardText class="pa-3">
+                <div class="d-flex justify-space-between align-start">
+                  <div
+                    class="d-flex gap-x-3 align-start flex-grow-1"
+                    style="min-width: 0;"
+                  >
+                    <VAvatar
+                      size="36"
+                      color="primary"
+                      variant="tonal"
+                    >
+                      <span class="text-caption">{{ getInitials(person.full_name) }}</span>
+                    </VAvatar>
+                    <div style="min-width: 0;">
+                      <p class="text-body-1 font-weight-medium mb-0 text-truncate">
+                        {{ person.full_name }}
+                      </p>
+                      <p class="text-body-2 text-medium-emphasis mb-1 text-truncate">
+                        {{ person.email }}
+                        <template v-if="person.phone">
+                          · {{ person.phone }}
+                        </template>
+                      </p>
+                      <div class="d-flex gap-x-1 flex-wrap mb-1">
+                        <VChip
+                          :color="statusColor[person.status]"
+                          size="x-small"
+                        >
+                          {{ statusLabel[person.status] ?? person.status }}
+                        </VChip>
+                        <VChip
+                          v-if="person.crowd_type"
+                          :color="person.crowd_type.color"
+                          size="x-small"
+                          variant="tonal"
+                        >
+                          {{ person.crowd_type.name }}
+                        </VChip>
+                        <VChip
+                          v-for="tag in (person.tags ?? []).slice(0, 3)"
+                          :key="tag.id"
+                          size="x-small"
+                          variant="outlined"
+                          :color="tag.person_tag.color ?? undefined"
+                        >
+                          {{ tag.person_tag.name }}
+                        </VChip>
+                        <VChip
+                          v-if="person.pending_identity_match"
+                          size="x-small"
+                          color="warning"
+                          variant="tonal"
+                          prepend-icon="tabler-alert-triangle"
+                        >
+                          Mogelijk account gevonden
+                        </VChip>
+                      </div>
+                      <p
+                        v-if="person.crowd_list_pivot"
+                        class="text-caption text-disabled mb-0"
+                      >
+                        Toegevoegd: {{ formatShortDate(person.crowd_list_pivot.added_at) }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <!-- Three-dot menu -->
+                  <VMenu>
+                    <template #activator="{ props: menuProps }">
+                      <VBtn
+                        icon="tabler-dots-vertical"
+                        variant="text"
+                        size="x-small"
+                        v-bind="menuProps"
+                      />
+                    </template>
+                    <VList density="compact">
+                      <VListItem
+                        v-if="person.status === PersonStatus.PENDING || person.status === PersonStatus.APPLIED"
+                        prepend-icon="tabler-circle-check"
+                        title="Goedkeuren"
+                        @click="onApprove(person)"
+                      />
+                      <VListItem
+                        prepend-icon="tabler-user-minus"
+                        title="Verwijderen van lijst"
+                        base-color="error"
+                        @click="onRemoveConfirm(person)"
+                      />
+                    </VList>
+                  </VMenu>
+                </div>
+              </VCardText>
+            </VCard>
+          </div>
         </div>
       </div>
 
-    <!-- Add person dialog -->
-    <AddPersonToCrowdListDialog
-      v-if="crowdList"
-      v-model="isAddPersonDialogOpen"
-      :event-id="eventId"
-      :org-id="orgId"
-      :crowd-list="crowdList"
-    />
+      <!-- Add person dialog -->
+      <AddPersonToCrowdListDialog
+        v-if="crowdList"
+        v-model="isAddPersonDialogOpen"
+        :event-id="eventId"
+        :org-id="orgId"
+        :crowd-list="crowdList"
+      />
 
-    <!-- Remove person confirmation -->
-    <VDialog
-      v-model="isRemoveDialogOpen"
-      max-width="440"
-    >
-      <VCard title="Persoon verwijderen van lijst">
-        <VCardText>
-          Weet je zeker dat je <strong>{{ removingPerson?.full_name }}</strong> van de lijst
-          <strong>{{ crowdList?.name }}</strong> wilt verwijderen?
-          <br><br>
-          <span class="text-medium-emphasis">
-            De persoon wordt niet verwijderd uit het evenement — alleen van deze lijst.
-          </span>
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn
-            variant="text"
-            @click="isRemoveDialogOpen = false"
-          >
-            Annuleren
-          </VBtn>
-          <VBtn
-            color="error"
-            :loading="isRemoving"
-            @click="onRemoveExecute"
-          >
-            Verwijderen
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
+      <!-- Remove person confirmation -->
+      <VDialog
+        v-model="isRemoveDialogOpen"
+        max-width="440"
+      >
+        <VCard title="Persoon verwijderen van lijst">
+          <VCardText>
+            Weet je zeker dat je <strong>{{ removingPerson?.full_name }}</strong> van de lijst
+            <strong>{{ crowdList?.name }}</strong> wilt verwijderen?
+            <br><br>
+            <span class="text-medium-emphasis">
+              De persoon wordt niet verwijderd uit het evenement — alleen van deze lijst.
+            </span>
+          </VCardText>
+          <VCardActions>
+            <VSpacer />
+            <VBtn
+              variant="text"
+              @click="isRemoveDialogOpen = false"
+            >
+              Annuleren
+            </VBtn>
+            <VBtn
+              color="error"
+              :loading="isRemoving"
+              @click="onRemoveExecute"
+            >
+              Verwijderen
+            </VBtn>
+          </VCardActions>
+        </VCard>
+      </VDialog>
 
-    <!-- Approve all confirmation -->
-    <VDialog
-      v-model="isApproveAllDialogOpen"
-      max-width="440"
-    >
-      <VCard title="Alle pending goedkeuren">
-        <VCardText>
-          Weet je zeker dat je <strong>{{ pendingPersonIds.length }}</strong>
-          {{ pendingPersonIds.length === 1 ? 'persoon' : 'personen' }} wilt goedkeuren?
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn
-            variant="text"
-            @click="isApproveAllDialogOpen = false"
-          >
-            Annuleren
-          </VBtn>
-          <VBtn
-            color="success"
-            :loading="isApprovingAll"
-            @click="onApproveAllExecute"
-          >
-            Goedkeuren
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
+      <!-- Approve all confirmation -->
+      <VDialog
+        v-model="isApproveAllDialogOpen"
+        max-width="440"
+      >
+        <VCard title="Alle pending goedkeuren">
+          <VCardText>
+            Weet je zeker dat je <strong>{{ pendingPersonIds.length }}</strong>
+            {{ pendingPersonIds.length === 1 ? 'persoon' : 'personen' }} wilt goedkeuren?
+          </VCardText>
+          <VCardActions>
+            <VSpacer />
+            <VBtn
+              variant="text"
+              @click="isApproveAllDialogOpen = false"
+            >
+              Annuleren
+            </VBtn>
+            <VBtn
+              color="success"
+              :loading="isApprovingAll"
+              @click="onApproveAllExecute"
+            >
+              Goedkeuren
+            </VBtn>
+          </VCardActions>
+        </VCard>
+      </VDialog>
 
-    <!-- Success snackbar -->
-    <VSnackbar
-      v-model="showSuccess"
-      color="success"
-      :timeout="3000"
-    >
-      {{ successMessage }}
-    </VSnackbar>
+      <!-- Success snackbar -->
+      <VSnackbar
+        v-model="showSuccess"
+        color="success"
+        :timeout="3000"
+      >
+        {{ successMessage }}
+      </VSnackbar>
     </template>
   </VNavigationDrawer>
 </template>
diff --git a/apps/app/src/components/crowd-lists/CrowdListFormDialog.vue b/apps/app/src/components/crowd-lists/CrowdListFormDialog.vue
index 083e6e39..18b7a4b5 100644
--- a/apps/app/src/components/crowd-lists/CrowdListFormDialog.vue
+++ b/apps/app/src/components/crowd-lists/CrowdListFormDialog.vue
@@ -3,7 +3,7 @@ import { VForm } from 'vuetify/components/VForm'
 import { useCreateCrowdList, useUpdateCrowdList } from '@/composables/api/useCrowdLists'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useCompanies } from '@/composables/api/useCompanies'
-import { requiredValidator, integerValidator } from '@core/utils/validators'
+import { integerValidator, requiredValidator } from '@core/utils/validators'
 import { CrowdListType } from '@/types/crowdList'
 import type { CrowdList } from '@/types/crowdList'
 
@@ -41,7 +41,7 @@ const refVForm = ref<VForm>()
 const showSuccess = ref(false)
 const successMessage = ref('')
 
-watch(() => props.crowdList, (cl) => {
+watch(() => props.crowdList, cl => {
   if (cl) {
     form.value = {
       name: cl.name,
@@ -113,7 +113,8 @@ function handleError(err: unknown) {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/event/ImportFromEventDialog.vue b/apps/app/src/components/event/ImportFromEventDialog.vue
index 57713954..edeb38ba 100644
--- a/apps/app/src/components/event/ImportFromEventDialog.vue
+++ b/apps/app/src/components/event/ImportFromEventDialog.vue
@@ -22,20 +22,20 @@ const { mutate: importFields, isPending } = useImportFieldsFromEvent(orgIdRef, e
 const selectedEventId = ref<string | null>(null)
 
 const eventOptions = computed(() => {
-  if (!events.value) return []
+  if (!events.value)
+    return []
 
   const options: Array<{ title: string; value: string }> = []
 
   for (const event of events.value) {
-    if (event.id !== props.eventId) {
+    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) {
+        if (child.id !== props.eventId)
           options.push({ title: `${event.name} > ${child.name}`, value: child.id })
-        }
       }
     }
   }
@@ -47,20 +47,21 @@ const selectedEventName = computed(() =>
   eventOptions.value.find(e => e.value === selectedEventId.value)?.title ?? '',
 )
 
-watch(modelValue, (open) => {
-  if (open) {
+watch(modelValue, open => {
+  if (open)
     selectedEventId.value = null
-  }
 })
 
 function onImport() {
-  if (!selectedEventId.value) return
+  if (!selectedEventId.value)
+    return
 
   const name = selectedEventName.value
 
   importFields(selectedEventId.value, {
-    onSuccess: (data) => {
+    onSuccess: data => {
       const count = Array.isArray(data) ? data.length : 0
+
       modelValue.value = false
       emit('imported', count, name)
     },
diff --git a/apps/app/src/components/event/RegistrationFieldCard.vue b/apps/app/src/components/event/RegistrationFieldCard.vue
index 2ddc1e74..bfccd495 100644
--- a/apps/app/src/components/event/RegistrationFieldCard.vue
+++ b/apps/app/src/components/event/RegistrationFieldCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { RegistrationFormField } from '@/types/registration-form-field'
-import type { NormalizedOption } from '@/types/registration-form-field'
+import type { NormalizedOption, RegistrationFormField } from '@/types/registration-form-field'
 import { FIELD_TYPE_LABELS } from '@/types/registration-field-template'
 
 defineProps<{
@@ -13,9 +12,12 @@ defineEmits<{
 }>()
 
 function formatOptions(options: NormalizedOption[] | null): string {
-  if (!options?.length) return ''
+  if (!options?.length)
+    return ''
   const labels = options.map(o => o.label)
-  if (labels.length <= 5) return labels.join(', ')
+  if (labels.length <= 5)
+    return labels.join(', ')
+
   return `${labels.slice(0, 5).join(', ')}, +${labels.length - 5} meer`
 }
 </script>
diff --git a/apps/app/src/components/event/RegistrationFieldFormDialog.vue b/apps/app/src/components/event/RegistrationFieldFormDialog.vue
index 23f1b563..1df5caf8 100644
--- a/apps/app/src/components/event/RegistrationFieldFormDialog.vue
+++ b/apps/app/src/components/event/RegistrationFieldFormDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { usePersonTagCategories } from '@/composables/api/usePersonTags'
 import { requiredValidator } from '@core/utils/validators'
 import type { RegistrationFormField, RegistrationFormFieldCreateDTO } from '@/types/registration-form-field'
-import type { RegistrationFieldType, FieldDisplayWidth } from '@/types/registration-field-template'
+import type { FieldDisplayWidth, RegistrationFieldType } from '@/types/registration-field-template'
 import { FIELD_TYPES_WITH_OPTIONS } from '@/types/registration-field-template'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -75,7 +75,7 @@ const showOptions = computed(() =>
 
 const showTagCategory = computed(() => form.value.field_type === 'tag_picker')
 
-watch(modelValue, (open) => {
+watch(modelValue, open => {
   if (open) {
     errors.value = {}
     if (props.field) {
@@ -110,18 +110,19 @@ function removeOption(index: number) {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
+
     const payload: Partial<RegistrationFormFieldCreateDTO> = {
       label: form.value.label,
       help_text: form.value.help_text || null,
       display_width: form.value.display_width,
     }
 
-    if (!props.field) {
+    if (!props.field)
       payload.field_type = form.value.field_type as RegistrationFieldType
-    }
 
     if (!isHeading.value) {
       payload.is_required = form.value.is_required
@@ -141,12 +142,11 @@ function onSubmit() {
         payload.options = null
       }
 
-      if (showTagCategory.value) {
+      if (showTagCategory.value)
         payload.tag_categories = form.value.tag_categories.length > 0 ? form.value.tag_categories : null
-      }
-      else {
+
+      else
         payload.tag_categories = null
-      }
     }
 
     emit('save', payload)
diff --git a/apps/app/src/components/events/CreateEventDialog.vue b/apps/app/src/components/events/CreateEventDialog.vue
index 76d62509..1fa95346 100644
--- a/apps/app/src/components/events/CreateEventDialog.vue
+++ b/apps/app/src/components/events/CreateEventDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreateEvent } from '@/composables/api/useEvents'
 import { requiredValidator } from '@core/utils/validators'
 import type { EventTypeEnum } from '@/types/event'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -57,7 +57,7 @@ const timezoneOptions = [
   { title: 'UTC', value: 'UTC' },
 ]
 
-watch(() => form.value.name, (name) => {
+watch(() => form.value.name, name => {
   form.value.slug = name
     .toLowerCase()
     .replace(/[^a-z0-9\s-]/g, '')
@@ -67,10 +67,11 @@ watch(() => form.value.name, (name) => {
 })
 
 const endDateRule = (v: string) => {
-  if (!v) return 'Einddatum is verplicht'
-  if (form.value.start_date && v < form.value.start_date) {
+  if (!v)
+    return 'Einddatum is verplicht'
+  if (form.value.start_date && v < form.value.start_date)
     return 'Einddatum moet op of na startdatum liggen'
-  }
+
   return true
 }
 
@@ -91,7 +92,8 @@ function resetForm() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/events/CreateSubEventDialog.vue b/apps/app/src/components/events/CreateSubEventDialog.vue
index d179dcd0..5189563e 100644
--- a/apps/app/src/components/events/CreateSubEventDialog.vue
+++ b/apps/app/src/components/events/CreateSubEventDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreateSubEvent } from '@/composables/api/useEvents'
 import { requiredValidator } from '@core/utils/validators'
 import type { EventItem, EventStatus } from '@/types/event'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -52,7 +52,8 @@ function resetForm() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/events/DeleteSubEventDialog.vue b/apps/app/src/components/events/DeleteSubEventDialog.vue
index 7f49de83..e8f4507f 100644
--- a/apps/app/src/components/events/DeleteSubEventDialog.vue
+++ b/apps/app/src/components/events/DeleteSubEventDialog.vue
@@ -8,18 +8,19 @@ const props = defineProps<{
   parentEventId: string
 }>()
 
-const modelValue = defineModel<boolean>({ required: true })
 const emit = defineEmits<{
   deleted: [name: string]
 }>()
 
+const modelValue = defineModel<boolean>({ required: true })
 const orgIdRef = computed(() => props.orgId)
 const parentEventIdRef = computed(() => props.parentEventId)
 
 const { mutate: deleteEvent, isPending } = useDeleteEvent(orgIdRef, parentEventIdRef)
 
 function onConfirm() {
-  if (!props.event) return
+  if (!props.event)
+    return
 
   const name = props.event.name
 
diff --git a/apps/app/src/components/events/EditEventDialog.vue b/apps/app/src/components/events/EditEventDialog.vue
index 33158189..ed939267 100644
--- a/apps/app/src/components/events/EditEventDialog.vue
+++ b/apps/app/src/components/events/EditEventDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useUpdateEvent } from '@/composables/api/useEvents'
 import { requiredValidator } from '@core/utils/validators'
 import type { EventItem } from '@/types/event'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -53,14 +53,15 @@ const timezoneOptions = [
 ]
 
 const endDateRule = (v: string) => {
-  if (!v) return 'Einddatum is verplicht'
-  if (form.value.start_date && v < form.value.start_date) {
+  if (!v)
+    return 'Einddatum is verplicht'
+  if (form.value.start_date && v < form.value.start_date)
     return 'Einddatum moet op of na startdatum liggen'
-  }
+
   return true
 }
 
-watch(() => props.event, (ev) => {
+watch(() => props.event, ev => {
   form.value = {
     name: ev.name,
     slug: ev.slug,
@@ -74,7 +75,8 @@ watch(() => props.event, (ev) => {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/events/EventMetricCards.vue b/apps/app/src/components/events/EventMetricCards.vue
index 9ff8e882..8d861bf4 100644
--- a/apps/app/src/components/events/EventMetricCards.vue
+++ b/apps/app/src/components/events/EventMetricCards.vue
@@ -20,15 +20,21 @@ function navigateTo(routeName: EventChildRoute) {
 }
 
 const shiftFillColor = computed(() => {
-  if (!stats.value || stats.value.shifts_total === 0) return 'success'
+  if (!stats.value || stats.value.shifts_total === 0)
+    return 'success'
   const rate = stats.value.shifts_filled / stats.value.shifts_total
-  if (rate >= 0.9) return 'success'
-  if (rate >= 0.6) return 'warning'
+  if (rate >= 0.9)
+    return 'success'
+  if (rate >= 0.6)
+    return 'warning'
+
   return 'error'
 })
 
 const shiftFillPercent = computed(() => {
-  if (!stats.value || stats.value.shifts_total === 0) return 0
+  if (!stats.value || stats.value.shifts_total === 0)
+    return 0
+
   return Math.round((stats.value.shifts_filled / stats.value.shifts_total) * 100)
 })
 </script>
@@ -66,7 +72,7 @@ const shiftFillPercent = computed(() => {
       <VBtn
         variant="text"
         size="small"
-        @click="refetch()"
+        @click="refetch"
       >
         Opnieuw proberen
       </VBtn>
@@ -85,8 +91,8 @@ const shiftFillPercent = computed(() => {
       md="3"
     >
       <VCard
+        class="cursor-pointer h-100"
         :class="[
-          'cursor-pointer h-100',
           stats.persons_approved_without_shift > 0 ? 'card-border-shadow-warning' : 'card-border-shadow-success',
         ]"
         @click="navigateTo('events-id-persons')"
@@ -127,8 +133,8 @@ const shiftFillPercent = computed(() => {
       md="3"
     >
       <VCard
+        class="cursor-pointer h-100"
         :class="[
-          'cursor-pointer h-100',
           stats.persons_pending > 0 ? 'card-border-shadow-warning' : 'card-border-shadow-success',
         ]"
         @click="navigateTo('events-id-persons')"
@@ -168,8 +174,8 @@ const shiftFillPercent = computed(() => {
       md="3"
     >
       <VCard
+        class="cursor-pointer h-100"
         :class="[
-          'cursor-pointer h-100',
           stats.pending_identity_matches > 0 ? 'card-border-shadow-info' : 'card-border-shadow-success',
         ]"
         @click="navigateTo('events-id-persons')"
@@ -209,8 +215,8 @@ const shiftFillPercent = computed(() => {
       md="3"
     >
       <VCard
+        class="cursor-pointer h-100"
         :class="[
-          'cursor-pointer h-100',
           `card-border-shadow-${shiftFillColor}`,
         ]"
         @click="navigateTo('events-id-sections')"
diff --git a/apps/app/src/components/events/EventTabsNav.vue b/apps/app/src/components/events/EventTabsNav.vue
index 13a21554..3afe859e 100644
--- a/apps/app/src/components/events/EventTabsNav.vue
+++ b/apps/app/src/components/events/EventTabsNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios from 'axios'
-import { useEventDetail, useEventChildren, useTransitionEventStatus } from '@/composables/api/useEvents'
+import { useEventChildren, useEventDetail, useTransitionEventStatus } from '@/composables/api/useEvents'
 import { dutchPlural } from '@/lib/dutch-plural'
 import { eventStatusLabelNl, transitionVisualKind } from '@/lib/event-status'
 import { useAuthStore } from '@/stores/useAuthStore'
@@ -35,6 +35,7 @@ function transitionButtonColor(current: EventStatus, target: EventStatus): strin
     return 'error'
   if (kind === 'backward')
     return 'secondary'
+
   return 'primary'
 }
 
@@ -74,6 +75,7 @@ async function confirmTransition() {
   catch (err) {
     if (axios.isAxiosError(err) && err.response?.status === 422) {
       const msg = transition422Message(err)
+
       notificationStore.show(msg || 'Status wijzigen is op dit moment niet mogelijk.', 'error')
     }
     else {
@@ -86,8 +88,9 @@ async function confirmTransition() {
 const { data: children } = useEventChildren(orgId, eventId)
 
 // Set active event in store
-watch(eventId, (id) => {
-  if (id) orgStore.setActiveEvent(id)
+watch(eventId, id => {
+  if (id)
+    orgStore.setActiveEvent(id)
 }, { immediate: true })
 
 const isEditDialogOpen = ref(false)
@@ -161,12 +164,15 @@ const programmaonderdelenLabel = computed(() => {
   const label = event.value?.sub_event_label
     ? dutchPlural(event.value.sub_event_label)
     : 'Programmaonderdelen'
+
   const count = children.value?.length ?? event.value?.children_count ?? 0
+
   return `${label} (${count})`
 })
 
 const tabs = computed(() => {
-  if (!event.value?.is_festival) return baseTabs
+  if (!event.value?.is_festival)
+    return baseTabs
 
   // Festival tab order: Overzicht | Programmaonderdelen | Tijdsloten | Secties & Shifts | Personen | Publiekslijsten | Artiesten | Briefings | Instellingen
   const festivalTab = {
@@ -190,13 +196,14 @@ const tabs = computed(() => {
 
 const activeTab = computed(() => {
   const name = route.name as string
+
   return tabs.value.find(t => name === t.route || name?.startsWith(`${t.route}-`))?.route ?? 'events-id'
 })
 
 const backRoute = computed(() => {
-  if (event.value?.is_sub_event && event.value.parent_event_id) {
+  if (event.value?.is_sub_event && event.value.parent_event_id)
     return { name: 'events-id' as const, params: { id: event.value.parent_event_id } }
-  }
+
   return { name: 'events' as const }
 })
 </script>
@@ -219,7 +226,7 @@ const backRoute = computed(() => {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/components/form-failures/DismissFailureDialog.vue b/apps/app/src/components/form-failures/DismissFailureDialog.vue
index ee981d39..1b0dcfc1 100644
--- a/apps/app/src/components/form-failures/DismissFailureDialog.vue
+++ b/apps/app/src/components/form-failures/DismissFailureDialog.vue
@@ -36,14 +36,17 @@ const reasonOptions: Array<{ value: FormFailureDismissalReason; label: string }>
 ]
 
 const noteRequired = computed(() => reason.value === 'other')
+
 const canSubmit = computed(() => {
-  if (reason.value === null) return false
-  if (noteRequired.value && note.value.trim() === '') return false
+  if (reason.value === null)
+    return false
+  if (noteRequired.value && note.value.trim() === '')
+    return false
 
   return true
 })
 
-watch(isDialogOpen, (open) => {
+watch(isDialogOpen, open => {
   if (open) {
     reason.value = null
     note.value = ''
@@ -52,7 +55,8 @@ watch(isDialogOpen, (open) => {
 })
 
 function handleDismiss() {
-  if (!props.failure || !reason.value) return
+  if (!props.failure || !reason.value)
+    return
 
   errorMessage.value = ''
   dismissMutation.mutate(
diff --git a/apps/app/src/components/form-failures/ResolveFailureDialog.vue b/apps/app/src/components/form-failures/ResolveFailureDialog.vue
index 4317b0fa..9b789fda 100644
--- a/apps/app/src/components/form-failures/ResolveFailureDialog.vue
+++ b/apps/app/src/components/form-failures/ResolveFailureDialog.vue
@@ -25,7 +25,7 @@ const isDialogOpen = computed({
   set: (val: boolean) => emit('update:modelValue', val),
 })
 
-watch(isDialogOpen, (open) => {
+watch(isDialogOpen, open => {
   if (open) {
     note.value = ''
     errorMessage.value = ''
@@ -33,7 +33,8 @@ watch(isDialogOpen, (open) => {
 })
 
 function handleResolve() {
-  if (!props.failure) return
+  if (!props.failure)
+    return
 
   errorMessage.value = ''
   resolveMutation.mutate(
diff --git a/apps/app/src/components/form-failures/RetryFailureDialog.vue b/apps/app/src/components/form-failures/RetryFailureDialog.vue
index 05d36edd..d510e1f3 100644
--- a/apps/app/src/components/form-failures/RetryFailureDialog.vue
+++ b/apps/app/src/components/form-failures/RetryFailureDialog.vue
@@ -25,12 +25,14 @@ const isDialogOpen = computed({
   set: (val: boolean) => emit('update:modelValue', val),
 })
 
-watch(isDialogOpen, (open) => {
-  if (open) errorMessage.value = ''
+watch(isDialogOpen, open => {
+  if (open)
+    errorMessage.value = ''
 })
 
 function handleRetry() {
-  if (!props.failure) return
+  if (!props.failure)
+    return
 
   errorMessage.value = ''
   retryMutation.mutate(props.failure.id, {
diff --git a/apps/app/src/components/layout/OrganisationSwitcher.vue b/apps/app/src/components/layout/OrganisationSwitcher.vue
index 07c93232..ceb5a8ec 100644
--- a/apps/app/src/components/layout/OrganisationSwitcher.vue
+++ b/apps/app/src/components/layout/OrganisationSwitcher.vue
@@ -13,6 +13,7 @@ const hasMultiple = computed(() => organisations.value.length > 1)
 
 const activeOrgName = computed(() => {
   const name = activeOrg.value?.name ?? 'Geen organisatie'
+
   return name.length > 18 ? `${name.slice(0, 18)}…` : name
 })
 
@@ -69,15 +70,15 @@ function selectOrg(id: string) {
               {{ activeOrgName }}
             </span>
             <Component
+              :is="layoutConfig.app.iconRenderer || 'div'"
               v-if="hasMultiple"
               v-show="!hideTitleAndBadge"
-              :is="layoutConfig.app.iconRenderer || 'div'"
               v-bind="{ icon: 'tabler-chevron-down' }"
               key="chevron"
               class="nav-item-badge"
               :style="{
-                transition: 'transform 0.2s ease',
-                transform: isMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                'transition': 'transform 0.2s ease',
+                'transform': isMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                 'font-size': '18px',
                 'margin-inline-start': 'auto',
               }"
diff --git a/apps/app/src/components/members/InviteMemberDialog.vue b/apps/app/src/components/members/InviteMemberDialog.vue
index e3ed6f7c..6ac68383 100644
--- a/apps/app/src/components/members/InviteMemberDialog.vue
+++ b/apps/app/src/components/members/InviteMemberDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useInviteMember } from '@/composables/api/useMembers'
 import { emailValidator, requiredValidator } from '@core/utils/validators'
 import type { MemberScope, OrganisationRole } from '@/types/member'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = withDefaults(defineProps<{
@@ -40,7 +40,8 @@ function resetForm() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/organisation/CompanyDialog.vue b/apps/app/src/components/organisation/CompanyDialog.vue
index 64e29844..e4a4324d 100644
--- a/apps/app/src/components/organisation/CompanyDialog.vue
+++ b/apps/app/src/components/organisation/CompanyDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useCreateCompany, useUpdateCompany } from '@/composables/api/useCompanies'
-import { requiredValidator, emailValidator } from '@core/utils/validators'
-import type { Company } from '@/types/organisation'
 import type { AxiosError } from 'axios'
+import { useCreateCompany, useUpdateCompany } from '@/composables/api/useCompanies'
+import { emailValidator, requiredValidator } from '@core/utils/validators'
+import type { Company } from '@/types/organisation'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -11,6 +11,10 @@ const props = defineProps<{
   company?: Company | null
 }>()
 
+const emit = defineEmits<{
+  saved: []
+}>()
+
 const modelValue = defineModel<boolean>({ required: true })
 
 const orgIdRef = computed(() => props.orgId)
@@ -42,7 +46,7 @@ const typeOptions = [
   { title: 'Overig', value: 'other' },
 ]
 
-watch(() => props.company, (c) => {
+watch(() => props.company, c => {
   if (c) {
     form.value = {
       name: c.name,
@@ -68,13 +72,10 @@ function resetForm() {
   refVForm.value?.resetValidation()
 }
 
-const emit = defineEmits<{
-  saved: []
-}>()
-
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -104,12 +105,11 @@ function onSubmit() {
       }
     }
 
-    if (isEdit.value && props.company) {
+    if (isEdit.value && props.company)
       updateCompany({ id: props.company.id, ...payload }, { onSuccess, onError })
-    }
-    else {
+
+    else
       createCompany(payload, { onSuccess, onError })
-    }
   })
 }
 </script>
diff --git a/apps/app/src/components/organisation/EmailBrandingTab.vue b/apps/app/src/components/organisation/EmailBrandingTab.vue
index 3cb5eb56..35d6dcbc 100644
--- a/apps/app/src/components/organisation/EmailBrandingTab.vue
+++ b/apps/app/src/components/organisation/EmailBrandingTab.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useEmailSettings, useUpdateEmailSettings } from '@/composables/api/useEmail'
 import { emailValidator } from '@core/utils/validators'
 import ImageUploadField from '@/components/common/ImageUploadField.vue'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -44,7 +44,7 @@ const hexColorValidator = (value: unknown) => {
   if (!value || (typeof value === 'string' && value.trim() === ''))
     return true
 
-  return /^#[0-9a-fA-F]{6}$/.test(String(value)) || 'Ongeldige hex-kleur (bijv. #6366f1)'
+  return /^#[0-9a-f]{6}$/i.test(String(value)) || 'Ongeldige hex-kleur (bijv. #6366f1)'
 }
 
 const optionalEmailValidator = (value: unknown) => {
@@ -56,7 +56,8 @@ const optionalEmailValidator = (value: unknown) => {
 
 async function onSubmit() {
   const { valid } = await form.value!.validate()
-  if (!valid) return
+  if (!valid)
+    return
 
   serverErrors.value = {}
 
@@ -73,9 +74,8 @@ async function onSubmit() {
     },
     onError: (error: Error) => {
       const axiosError = error as AxiosError<ApiErrorResponse>
-      if (axiosError.response?.status === 422 && axiosError.response?.data?.errors) {
+      if (axiosError.response?.status === 422 && axiosError.response?.data?.errors)
         serverErrors.value = axiosError.response.data.errors
-      }
     },
   })
 }
@@ -100,7 +100,7 @@ function fieldErrors(field: string): string | undefined {
     <template #append>
       <VBtn
         variant="text"
-        @click="refetch()"
+        @click="refetch"
       >
         Opnieuw proberen
       </VBtn>
diff --git a/apps/app/src/components/organisation/EmailLogTab.vue b/apps/app/src/components/organisation/EmailLogTab.vue
index 431929aa..616dfa46 100644
--- a/apps/app/src/components/organisation/EmailLogTab.vue
+++ b/apps/app/src/components/organisation/EmailLogTab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useEmailLogs } from '@/composables/api/useEmail'
-import type { EmailLog, EmailLogFilters } from '@/types/email'
+import type { EmailLogFilters } from '@/types/email'
 
 const props = defineProps<{
   orgId: string
@@ -23,7 +23,8 @@ const searchInput = ref('')
 let searchTimeout: ReturnType<typeof setTimeout> | null = null
 
 watch(searchInput, value => {
-  if (searchTimeout) clearTimeout(searchTimeout)
+  if (searchTimeout)
+    clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
     filters.value = { ...filters.value, search: value, page: 1 }
   }, 300)
@@ -74,7 +75,8 @@ const statusLabel: Record<string, string> = {
 }
 
 function formatDateTime(value: string | null): string {
-  if (!value) return '-'
+  if (!value)
+    return '-'
   const d = new Date(value)
 
   return d.toLocaleDateString('nl-NL', {
@@ -210,7 +212,7 @@ const expanded = ref<string[]>([])
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/components/organisation/EmailTemplatesTab.vue b/apps/app/src/components/organisation/EmailTemplatesTab.vue
index 4e484d52..c0b35d4d 100644
--- a/apps/app/src/components/organisation/EmailTemplatesTab.vue
+++ b/apps/app/src/components/organisation/EmailTemplatesTab.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import {
   useEmailTemplates,
   usePreviewEmailTemplate,
@@ -11,7 +12,6 @@ import { useAuthStore } from '@/stores/useAuthStore'
 import { TEMPLATE_VARIABLES } from '@/types/email'
 import type { EmailTemplate, UpdateEmailTemplatePayload } from '@/types/email'
 import { emailValidator, requiredValidator } from '@core/utils/validators'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -73,7 +73,8 @@ function openEdit(template: EmailTemplate) {
 
 function onEditSubmit() {
   editForm.value?.validate().then(({ valid }) => {
-    if (!valid || !editingTemplate.value) return
+    if (!valid || !editingTemplate.value)
+      return
 
     editErrors.value = {}
 
@@ -93,9 +94,8 @@ function onEditSubmit() {
       },
       onError: (error: Error) => {
         const axiosError = error as AxiosError<ApiErrorResponse>
-        if (axiosError.response?.status === 422 && axiosError.response?.data?.errors) {
+        if (axiosError.response?.status === 422 && axiosError.response?.data?.errors)
           editErrors.value = axiosError.response.data.errors
-        }
       },
     })
   })
@@ -134,7 +134,8 @@ function openReset(template: EmailTemplate) {
 }
 
 function onResetConfirm() {
-  if (!resettingTemplate.value) return
+  if (!resettingTemplate.value)
+    return
 
   resetTemplate(resettingTemplate.value.type, {
     onSuccess: () => {
@@ -165,7 +166,7 @@ function variablesForType(type: string): string[] {
     <template #append>
       <VBtn
         variant="text"
-        @click="refetch()"
+        @click="refetch"
       >
         Opnieuw proberen
       </VBtn>
diff --git a/apps/app/src/components/organisation/PersonTagsTab.vue b/apps/app/src/components/organisation/PersonTagsTab.vue
index bc6326ee..2daadb52 100644
--- a/apps/app/src/components/organisation/PersonTagsTab.vue
+++ b/apps/app/src/components/organisation/PersonTagsTab.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import {
-  usePersonTags,
-  usePersonTagCategories,
   useCreatePersonTag,
-  useUpdatePersonTag,
   useDeletePersonTag,
+  usePersonTagCategories,
+  usePersonTags,
+  useUpdatePersonTag,
 } from '@/composables/api/usePersonTags'
 import { requiredValidator } from '@core/utils/validators'
 import type { PersonTag } from '@/types/person-tag'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -40,12 +40,12 @@ const inactiveTags = computed(() => tags.value?.filter(t => !t.is_active) ?? [])
 const filteredActiveTags = computed(() => {
   let result = activeTags.value
 
-  if (filterCategory.value) {
+  if (filterCategory.value)
     result = result.filter(t => t.category === filterCategory.value)
-  }
 
   if (search.value) {
     const q = search.value.toLowerCase()
+
     result = result.filter(t => t.name.toLowerCase().includes(q))
   }
 
@@ -104,9 +104,11 @@ function openEditDialog(tag: PersonTag) {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
+
     const payload = {
       name: form.value.name,
       category: form.value.category || null,
diff --git a/apps/app/src/components/organisation/RegistrationFieldTemplatesTab.vue b/apps/app/src/components/organisation/RegistrationFieldTemplatesTab.vue
index 602e9896..076e1053 100644
--- a/apps/app/src/components/organisation/RegistrationFieldTemplatesTab.vue
+++ b/apps/app/src/components/organisation/RegistrationFieldTemplatesTab.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import {
-  useRegistrationFieldTemplates,
   useCreateRegistrationFieldTemplate,
-  useUpdateRegistrationFieldTemplate,
   useDeleteRegistrationFieldTemplate,
+  useRegistrationFieldTemplates,
+  useUpdateRegistrationFieldTemplate,
 } from '@/composables/api/useRegistrationFieldTemplates'
 import { usePersonTagCategories } from '@/composables/api/usePersonTags'
 import { requiredValidator } from '@core/utils/validators'
-import type { RegistrationFieldTemplate, RegistrationFieldTemplateCreateDTO, RegistrationFieldType, FieldDisplayWidth } from '@/types/registration-field-template'
-import { FIELD_TYPE_LABELS, FIELD_TYPES_WITH_OPTIONS } from '@/types/registration-field-template'
+import type { FieldDisplayWidth, RegistrationFieldTemplate, RegistrationFieldTemplateCreateDTO, RegistrationFieldType } from '@/types/registration-field-template'
+import { FIELD_TYPES_WITH_OPTIONS, FIELD_TYPE_LABELS } from '@/types/registration-field-template'
+import type { ApiErrorResponse } from '@/types/auth'
+
+const props = defineProps<{
+  orgId: string
+}>()
 
 const fieldTypeItems = [
   { type: 'subheader', title: 'Structuur' },
@@ -26,12 +32,6 @@ const fieldTypeItems = [
   { title: 'Checkbox', value: 'checkbox', props: { prependIcon: 'tabler-checkbox' } },
   { title: 'Tags & Vaardigheden', value: 'tag_picker', props: { prependIcon: 'tabler-tags' } },
 ]
-import type { AxiosError } from 'axios'
-import type { ApiErrorResponse } from '@/types/auth'
-
-const props = defineProps<{
-  orgId: string
-}>()
 
 const orgIdRef = computed(() => props.orgId)
 
@@ -136,9 +136,11 @@ function removeOption(index: number) {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
+
     const payload: Partial<RegistrationFieldTemplateCreateDTO> = {
       label: form.value.label,
       help_text: form.value.help_text || null,
@@ -146,9 +148,8 @@ function onSubmit() {
       display_width: form.value.display_width,
     }
 
-    if (!editingTemplate.value) {
+    if (!editingTemplate.value)
       payload.field_type = form.value.field_type as RegistrationFieldType
-    }
 
     if (!isHeading.value) {
       payload.is_required = form.value.is_required
@@ -168,9 +169,8 @@ function onSubmit() {
         payload.options = null
       }
 
-      if (showTagCategory.value) {
+      if (showTagCategory.value)
         payload.tag_categories = form.value.tag_categories.length > 0 ? form.value.tag_categories : null
-      }
     }
 
     if (editingTemplate.value) {
@@ -217,7 +217,8 @@ function onDeleteConfirm(template: RegistrationFieldTemplate) {
 }
 
 function onDeleteExecute() {
-  if (!deletingTemplate.value) return
+  if (!deletingTemplate.value)
+    return
   const label = deletingTemplate.value.label
 
   deleteTemplate(deletingTemplate.value.id, {
diff --git a/apps/app/src/components/organisations/CrowdTypesManager.vue b/apps/app/src/components/organisations/CrowdTypesManager.vue
index bae61496..a148f1d8 100644
--- a/apps/app/src/components/organisations/CrowdTypesManager.vue
+++ b/apps/app/src/components/organisations/CrowdTypesManager.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useCrowdTypeList, useCreateCrowdType, useUpdateCrowdType, useDeleteCrowdType } from '@/composables/api/useCrowdTypes'
+import type { AxiosError } from 'axios'
+import { useCreateCrowdType, useCrowdTypeList, useDeleteCrowdType, useUpdateCrowdType } from '@/composables/api/useCrowdTypes'
 import { requiredValidator } from '@core/utils/validators'
 import type { CrowdType } from '@/types/organisation'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -94,9 +94,11 @@ function openEditDialog(ct: CrowdType) {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
+
     const payload = {
       name: form.value.name,
       system_type: form.value.system_type,
diff --git a/apps/app/src/components/organisations/EditOrganisationDialog.vue b/apps/app/src/components/organisations/EditOrganisationDialog.vue
index db540e83..a39ea133 100644
--- a/apps/app/src/components/organisations/EditOrganisationDialog.vue
+++ b/apps/app/src/components/organisations/EditOrganisationDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useUpdateOrganisation } from '@/composables/api/useOrganisations'
 import { emailValidator, requiredValidator, urlValidator } from '@core/utils/validators'
 import type { Organisation } from '@/types/organisation'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -61,7 +61,8 @@ function copySlug() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -84,9 +85,9 @@ function onSubmit() {
         const data = (err as AxiosError<ApiErrorResponse>).response?.data
         if (data?.errors) {
           const fieldErrors: Record<string, string> = {}
-          for (const [key, messages] of Object.entries(data.errors)) {
+          for (const [key, messages] of Object.entries(data.errors))
             fieldErrors[key] = messages[0] ?? ''
-          }
+
           errors.value = fieldErrors
         }
       },
diff --git a/apps/app/src/components/persons/AddMemberAsPersonDialog.vue b/apps/app/src/components/persons/AddMemberAsPersonDialog.vue
index 1769baaf..5936e05b 100644
--- a/apps/app/src/components/persons/AddMemberAsPersonDialog.vue
+++ b/apps/app/src/components/persons/AddMemberAsPersonDialog.vue
@@ -38,22 +38,27 @@ const crowdTypeItems = computed(() =>
 watch(crowdTypeItems, items => {
   if (!selectedCrowdTypeId.value && items.length > 0) {
     const crewType = crowdTypes.value?.find(ct => ct.is_active && ct.system_type === 'CREW')
+
     selectedCrowdTypeId.value = crewType?.id ?? items[0].value
   }
 }, { immediate: true })
 
 const filteredMembers = computed(() => {
-  if (!availableMembers.value) return []
-  if (!searchQuery.value) return availableMembers.value
+  if (!availableMembers.value)
+    return []
+  if (!searchQuery.value)
+    return availableMembers.value
 
   const q = searchQuery.value.toLowerCase()
+
   return availableMembers.value.filter(
     m => m.full_name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
   )
 })
 
 function onAddMember(member: AvailableMember) {
-  if (!selectedCrowdTypeId.value) return
+  if (!selectedCrowdTypeId.value)
+    return
 
   creatingMemberId.value = member.id
   errorMessage.value = ''
@@ -68,17 +73,17 @@ function onAddMember(member: AvailableMember) {
       },
       onError: (err: unknown) => {
         creatingMemberId.value = null
+
         const axiosError = err as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } }
         const data = axiosError.response?.data
-        if (data?.errors?.user_id) {
+        if (data?.errors?.user_id)
           errorMessage.value = data.errors.user_id[0]
-        }
-        else if (data?.message) {
+
+        else if (data?.message)
           errorMessage.value = data.message
-        }
-        else {
+
+        else
           errorMessage.value = 'Er ging iets mis bij het toevoegen.'
-        }
       },
     },
   )
@@ -144,7 +149,7 @@ function onClose() {
           <template #append>
             <VBtn
               variant="text"
-              @click="refetch()"
+              @click="refetch"
             >
               Opnieuw proberen
             </VBtn>
diff --git a/apps/app/src/components/persons/CreatePersonDialog.vue b/apps/app/src/components/persons/CreatePersonDialog.vue
index c71c7e35..520b06c3 100644
--- a/apps/app/src/components/persons/CreatePersonDialog.vue
+++ b/apps/app/src/components/persons/CreatePersonDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreatePerson } from '@/composables/api/usePersons'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useCompanies } from '@/composables/api/useCompanies'
-import { requiredValidator, emailValidator } from '@core/utils/validators'
+import { emailValidator, requiredValidator } from '@core/utils/validators'
 import type { PersonStatus } from '@/types/person'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -87,7 +87,8 @@ function resetForm() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -202,7 +203,7 @@ function onSubmit() {
                 label="Bedrijf"
                 :items="companyItems"
                 clearable
-                :no-data-text="'Nog geen bedrijven'"
+                no-data-text="Nog geen bedrijven"
               />
             </VCol>
             <VCol cols="12">
diff --git a/apps/app/src/components/persons/EditPersonDialog.vue b/apps/app/src/components/persons/EditPersonDialog.vue
index 2cf37dab..ba35b64f 100644
--- a/apps/app/src/components/persons/EditPersonDialog.vue
+++ b/apps/app/src/components/persons/EditPersonDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useUpdatePerson } from '@/composables/api/usePersons'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useCompanies } from '@/composables/api/useCompanies'
-import { requiredValidator, emailValidator } from '@core/utils/validators'
+import { emailValidator, requiredValidator } from '@core/utils/validators'
 import type { Person, PersonStatus } from '@/types/person'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -40,7 +40,7 @@ const errors = ref<Record<string, string>>({})
 const refVForm = ref<VForm>()
 const showSuccess = ref(false)
 
-watch(() => props.person, (p) => {
+watch(() => props.person, p => {
   form.value = {
     crowd_type_id: p.crowd_type?.id ?? '',
     first_name: p.first_name,
@@ -91,7 +91,8 @@ const statusOptions: { title: string; value: PersonStatus }[] = [
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -205,7 +206,7 @@ function onSubmit() {
                 label="Bedrijf"
                 :items="companyItems"
                 clearable
-                :no-data-text="'Nog geen bedrijven'"
+                no-data-text="Nog geen bedrijven"
               />
             </VCol>
             <VCol
diff --git a/apps/app/src/components/persons/PersonDetailPanel.vue b/apps/app/src/components/persons/PersonDetailPanel.vue
index 0f0be4c6..4905a33b 100644
--- a/apps/app/src/components/persons/PersonDetailPanel.vue
+++ b/apps/app/src/components/persons/PersonDetailPanel.vue
@@ -67,9 +67,9 @@ function formatDateOfBirth(dateStr: string) {
 /** 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())) {
+  if (Number.isNaN(birth.getTime()))
     return null
-  }
+
   const today = new Date()
   let age = today.getFullYear() - birth.getFullYear()
   const monthDiff = today.getMonth() - birth.getMonth()
@@ -77,15 +77,16 @@ function calculateAge(dateStr: string): number | null {
   if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
     age--
   }
-  if (age < 0 || age > 130) {
+  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
 }
 
@@ -101,13 +102,15 @@ function getInitials(name: string) {
 // Admin notes inline edit
 const adminNotes = ref('')
 
-watch(() => person.value?.admin_notes, (val) => {
+watch(() => person.value?.admin_notes, val => {
   adminNotes.value = val ?? ''
 }, { immediate: true })
 
 function onAdminNotesBlur() {
-  if (!person.value) return
-  if (adminNotes.value === (person.value.admin_notes ?? '')) return
+  if (!person.value)
+    return
+  if (adminNotes.value === (person.value.admin_notes ?? ''))
+    return
 
   updatePerson({
     id: person.value.id,
@@ -117,7 +120,8 @@ function onAdminNotesBlur() {
 
 // Blacklisted toggle
 function onBlacklistToggle(val: boolean | null) {
-  if (!person.value) return
+  if (!person.value)
+    return
 
   updatePerson({
     id: person.value.id,
@@ -127,12 +131,14 @@ function onBlacklistToggle(val: boolean | null) {
 
 // Identity matching handlers
 function handleConfirm() {
-  if (!person.value?.pending_identity_match) return
+  if (!person.value?.pending_identity_match)
+    return
   confirmMatch(person.value.pending_identity_match.match_id)
 }
 
 function handleDismiss() {
-  if (!person.value?.pending_identity_match) return
+  if (!person.value?.pending_identity_match)
+    return
   dismissMatch(person.value.pending_identity_match.match_id)
 }
 
@@ -140,7 +146,8 @@ function handleDismiss() {
 const showUnlinkConfirm = ref(false)
 
 function handleUnlink() {
-  if (!person.value) return
+  if (!person.value)
+    return
   unlinkPerson(person.value.id, {
     onSuccess: () => {
       showUnlinkConfirm.value = false
@@ -156,7 +163,8 @@ const filteredOrgMembers = computed<Member[]>(() => {
   const members = membersResponse.value?.data ?? []
   const query = linkSearchQuery.value.toLowerCase().trim()
 
-  if (!query) return members
+  if (!query)
+    return members
 
   return members.filter(
     m => m.full_name.toLowerCase().includes(query) || m.email.toLowerCase().includes(query),
@@ -164,7 +172,8 @@ const filteredOrgMembers = computed<Member[]>(() => {
 })
 
 function handleManualLink(userId: string) {
-  if (!person.value) return
+  if (!person.value)
+    return
   manualLink(
     { personId: person.value.id, userId },
     {
diff --git a/apps/app/src/components/platform/ImpersonateDialog.vue b/apps/app/src/components/platform/ImpersonateDialog.vue
index b9a26afd..80aaa751 100644
--- a/apps/app/src/components/platform/ImpersonateDialog.vue
+++ b/apps/app/src/components/platform/ImpersonateDialog.vue
@@ -45,10 +45,9 @@ function resetForm() {
   emailCodeSent.value = false
 }
 
-watch(isOpen, (open) => {
-  if (!open) {
+watch(isOpen, open => {
+  if (!open)
     resetForm()
-  }
 })
 
 async function sendEmailCode() {
@@ -61,6 +60,7 @@ async function sendEmailCode() {
   }
   catch (err: unknown) {
     const error = err as { response?: { data?: { message?: string } } }
+
     errorMessage.value = error.response?.data?.message ?? 'Kon e-mailcode niet versturen.'
   }
   finally {
@@ -69,7 +69,8 @@ async function sendEmailCode() {
 }
 
 async function submit() {
-  if (!props.user || !isFormValid.value) return
+  if (!props.user || !isFormValid.value)
+    return
 
   isSubmitting.value = true
   errorMessage.value = ''
@@ -80,10 +81,12 @@ async function submit() {
       mfa_code: mfaCode.value,
       mfa_method: mfaMethod.value,
     })
+
     // start() triggers page reload — no further action needed
   }
   catch (err: unknown) {
     const error = err as { response?: { data?: { message?: string } } }
+
     errorMessage.value = error.response?.data?.message ?? 'Impersonation mislukt.'
     isSubmitting.value = false
   }
diff --git a/apps/app/src/components/platform/ImpersonationBanner.vue b/apps/app/src/components/platform/ImpersonationBanner.vue
index 64ae5d24..28361d26 100644
--- a/apps/app/src/components/platform/ImpersonationBanner.vue
+++ b/apps/app/src/components/platform/ImpersonationBanner.vue
@@ -22,11 +22,11 @@ function updateCountdown() {
   }
 
   const diff = Math.max(0, Math.floor((impersonationStore.expiresAt.getTime() - Date.now()) / 1000))
+
   remainingSeconds.value = diff
 
-  if (diff <= 0) {
+  if (diff <= 0)
     handleExpired()
-  }
 }
 
 function handleExpired() {
@@ -43,7 +43,7 @@ async function handleStop() {
   await impersonationStore.stop()
 }
 
-watch(() => impersonationStore.isImpersonating, (active) => {
+watch(() => impersonationStore.isImpersonating, active => {
   if (active) {
     updateCountdown()
     timerInterval = setInterval(updateCountdown, 1000)
@@ -55,9 +55,8 @@ watch(() => impersonationStore.isImpersonating, (active) => {
 }, { immediate: true })
 
 onUnmounted(() => {
-  if (timerInterval) {
+  if (timerInterval)
     clearInterval(timerInterval)
-  }
 })
 </script>
 
diff --git a/apps/app/src/components/sections/AssignShiftDialog.vue b/apps/app/src/components/sections/AssignShiftDialog.vue
index dda33dc9..a53fa5a8 100644
--- a/apps/app/src/components/sections/AssignShiftDialog.vue
+++ b/apps/app/src/components/sections/AssignShiftDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import type { AxiosError } from 'axios'
 import { useAssignShift } from '@/composables/api/useShifts'
 import { usePersonList } from '@/composables/api/usePersons'
 import { useAuthStore } from '@/stores/useAuthStore'
 import type { Shift } from '@/types/section'
 import type { Person } from '@/types/person'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -32,12 +32,15 @@ const showSuccess = ref(false)
 
 const generalError = computed(() => {
   const keys = Object.keys(errors.value).filter(k => k !== 'person_id')
+
   return keys.length ? errors.value[keys[0]] : ''
 })
 
 // Check for overlap warning
 const hasOverlapWarning = computed(() => {
-  if (!selectedPersonId.value || !props.shift) return false
+  if (!selectedPersonId.value || !props.shift)
+    return false
+
   // This is informational — the backend enforces the actual constraint
   return false
 })
@@ -53,7 +56,8 @@ const personItems = computed(() =>
 )
 
 function onSubmit() {
-  if (!selectedPersonId.value || !props.shift) return
+  if (!selectedPersonId.value || !props.shift)
+    return
 
   errors.value = {}
 
diff --git a/apps/app/src/components/sections/CreateSectionDialog.vue b/apps/app/src/components/sections/CreateSectionDialog.vue
index 36249b37..d1e0f1b0 100644
--- a/apps/app/src/components/sections/CreateSectionDialog.vue
+++ b/apps/app/src/components/sections/CreateSectionDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreateSection, useSectionCategories } from '@/composables/api/useSections'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
 import type { SectionType } from '@/types/section'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = withDefaults(defineProps<{
@@ -69,7 +69,8 @@ function resetForm() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -86,7 +87,7 @@ function onSubmit() {
         registration_description: form.value.registration_description || null,
       },
       {
-        onSuccess: (result) => {
+        onSuccess: result => {
           modelValue.value = false
           emit('created', {
             name: result.section.name,
diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index 583361d6..d6fe2e96 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreateShift, useUpdateShift } from '@/composables/api/useShifts'
 import { useTimeSlotList } from '@/composables/api/useTimeSlots'
 import { useEventDetail } from '@/composables/api/useEvents'
@@ -7,7 +8,6 @@ import { useAuthStore } from '@/stores/useAuthStore'
 import { useTimeSlotDropdown } from '@/composables/useTimeSlotDropdown'
 import { requiredValidator } from '@core/utils/validators'
 import type { FestivalSection, Shift, ShiftStatus } from '@/types/section'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = withDefaults(defineProps<{
@@ -76,7 +76,7 @@ const refVForm = ref<VForm>()
 /** Time-slot hierarchy uitleg (ingeklapt = minder visuele ruis). */
 const timeSlotHelpOpen = ref(false)
 
-watch(modelValue, (open) => {
+watch(modelValue, open => {
   if (open)
     timeSlotHelpOpen.value = false
 })
@@ -88,7 +88,7 @@ function toggleTimeSlotHelp() {
 // Populate form when editing
 watch(
   () => props.shift,
-  (shift) => {
+  shift => {
     if (shift) {
       form.value = {
         time_slot_id: shift.time_slot_id,
@@ -114,6 +114,7 @@ const dropdownItems = computed(() => {
   if (!timeSlots.value?.length) {
     if (props.shift?.time_slot) {
       const ts = props.shift.time_slot
+
       return [{
         id: ts.id,
         name: ts.name,
@@ -123,6 +124,7 @@ const dropdownItems = computed(() => {
         groupName: '',
       }]
     }
+
     return []
   }
 
@@ -133,7 +135,9 @@ const hasTimeSlots = computed(() => dropdownItems.value.length > 0)
 
 // Detect group boundaries: true when the current item starts a new group
 function isNewGroup(index: number): boolean {
-  if (index === 0) return true
+  if (index === 0)
+    return true
+
   return dropdownItems.value[index]?.groupName !== dropdownItems.value[index - 1]?.groupName
 }
 
@@ -178,7 +182,8 @@ function buildPayload() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -196,12 +201,11 @@ function onSubmit() {
       },
     }
 
-    if (isEditing.value && props.shift) {
+    if (isEditing.value && props.shift)
       updateShift({ id: props.shift.id, ...buildPayload() }, callbacks)
-    }
-    else {
+
+    else
       createShift(buildPayload(), callbacks)
-    }
   })
 }
 </script>
diff --git a/apps/app/src/components/sections/CreateTimeSlotDialog.vue b/apps/app/src/components/sections/CreateTimeSlotDialog.vue
index d9f11fea..de58970f 100644
--- a/apps/app/src/components/sections/CreateTimeSlotDialog.vue
+++ b/apps/app/src/components/sections/CreateTimeSlotDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
+import type { AxiosError } from 'axios'
 import { useCreateTimeSlot, useUpdateTimeSlot } from '@/composables/api/useTimeSlots'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
 import type { PersonType, TimeSlot } from '@/types/section'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 interface TimeSlotFormState {
@@ -58,7 +58,7 @@ const personTypeOptions = [
 // Populate form when editing
 watch(
   () => props.timeSlot,
-  (ts) => {
+  ts => {
     if (ts) {
       form.value = {
         name: ts.name,
@@ -76,7 +76,7 @@ watch(
 // Populate form when duplicating
 watch(
   () => props.duplicateFrom,
-  (ts) => {
+  ts => {
     if (ts) {
       form.value = {
         name: `${ts.name} (kopie)`,
@@ -98,7 +98,8 @@ watch(
       const [sh, sm] = start.split(':').map(Number)
       const [eh, em] = end.split(':').map(Number)
       let diff = (eh * 60 + em) - (sh * 60 + sm)
-      if (diff < 0) diff += 24 * 60
+      if (diff < 0)
+        diff += 24 * 60
       form.value.duration_hours = Math.round((diff / 60) * 100) / 100
     }
   },
@@ -130,7 +131,8 @@ function buildPayload() {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -148,12 +150,11 @@ function onSubmit() {
       },
     }
 
-    if (isEditing.value && props.timeSlot) {
+    if (isEditing.value && props.timeSlot)
       updateTimeSlot({ id: props.timeSlot.id, ...buildPayload() }, callbacks)
-    }
-    else {
+
+    else
       createTimeSlot(buildPayload(), callbacks)
-    }
   })
 }
 </script>
diff --git a/apps/app/src/components/sections/EditSectionDialog.vue b/apps/app/src/components/sections/EditSectionDialog.vue
index ea8023d2..ca4c3e0a 100644
--- a/apps/app/src/components/sections/EditSectionDialog.vue
+++ b/apps/app/src/components/sections/EditSectionDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useUpdateSection, useSectionCategories } from '@/composables/api/useSections'
+import type { AxiosError } from 'axios'
+import { useSectionCategories, useUpdateSection } from '@/composables/api/useSections'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
 import type { FestivalSection, SectionType } from '@/types/section'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 const props = defineProps<{
@@ -47,7 +47,7 @@ const typeOptions = [
 // Pre-fill form when section changes or dialog opens
 watch(
   () => props.section,
-  (section) => {
+  section => {
     if (section) {
       form.value = {
         name: section.name,
@@ -70,10 +70,12 @@ function resetForm() {
 }
 
 function onSubmit() {
-  if (!props.section) return
+  if (!props.section)
+    return
 
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
diff --git a/apps/app/src/components/sections/SectionsShiftsPanel.vue b/apps/app/src/components/sections/SectionsShiftsPanel.vue
index cbabca00..264fc644 100644
--- a/apps/app/src/components/sections/SectionsShiftsPanel.vue
+++ b/apps/app/src/components/sections/SectionsShiftsPanel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable'
-import { useSectionList, useDeleteSection, useReorderSections } from '@/composables/api/useSections'
-import { useShiftList, useDeleteShift } from '@/composables/api/useShifts'
+import { useDeleteSection, useReorderSections, useSectionList } from '@/composables/api/useSections'
+import { useDeleteShift, useShiftList } from '@/composables/api/useShifts'
 import { useEventDetail } from '@/composables/api/useEvents'
 import { useAuthStore } from '@/stores/useAuthStore'
 import CreateSectionDialog from '@/components/sections/CreateSectionDialog.vue'
@@ -14,15 +13,15 @@ import InfoTooltip from '@/components/common/InfoTooltip.vue'
 import type { FestivalSection, Shift, ShiftStatus } from '@/types/section'
 import type { EventItem } from '@/types/event'
 
-const shiftDetailStore = useShiftDetailStore()
-const authStore = useAuthStore()
-
 const props = defineProps<{
   eventId: string
   isSubEvent?: boolean
   parentEvent?: EventItem | null
 }>()
 
+const shiftDetailStore = useShiftDetailStore()
+const authStore = useAuthStore()
+
 const orgIdRef = computed(() => authStore.currentOrganisation?.id ?? '')
 const eventIdRef = computed(() => props.eventId)
 
@@ -38,10 +37,9 @@ const { mutate: reorderSections } = useReorderSections(orgIdRef, eventIdRef)
 // Local ref for draggable — synced from query but not overwritten during drag
 const sections = ref<FestivalSection[]>([])
 
-watch(sectionsQuery, (newData) => {
-  if (newData) {
+watch(sectionsQuery, newData => {
+  if (newData)
     sections.value = [...newData]
-  }
 }, { immediate: true })
 
 function onDragEnd() {
@@ -54,19 +52,19 @@ const activeSection = computed(() =>
   sections.value?.find(s => s.id === activeSectionId.value) ?? null,
 )
 
-watch(sections, (list) => {
-  if (list?.length && !activeSectionId.value) {
+watch(sections, list => {
+  if (list?.length && !activeSectionId.value)
     activeSectionId.value = list[0].id
-  }
 }, { immediate: true })
 
 // For cross_event sections, use the section's own event_id (parent festival)
 const activeSectionEventId = computed(() => {
-  if (activeSection.value?.type === 'cross_event') {
+  if (activeSection.value?.type === 'cross_event')
     return activeSection.value.event_id
-  }
+
   return props.eventId
 })
+
 const activeSectionEventIdRef = computed(() => activeSectionEventId.value)
 
 const { mutate: deleteSection } = useDeleteSection(orgIdRef, activeSectionEventIdRef)
@@ -80,7 +78,8 @@ const { mutate: deleteShiftMutation, isPending: isDeleting } = useDeleteShift(or
 
 // Group shifts by time_slot_id
 const shiftsByTimeSlot = computed(() => {
-  if (!shifts.value) return []
+  if (!shifts.value)
+    return []
 
   const groups = new Map<string, { timeSlotName: string; date: string; startTime: string; endTime: string; totalSlots: number; filledSlots: number; shifts: Shift[] }>()
 
@@ -98,6 +97,7 @@ const shiftsByTimeSlot = computed(() => {
       })
     }
     const group = groups.get(tsId)!
+
     group.shifts.push(shift)
     group.totalSlots += shift.slots_total
     group.filledSlots += shift.filled_slots
@@ -126,13 +126,14 @@ function onDeleteSectionConfirm(section: FestivalSection) {
 }
 
 function onDeleteSectionExecute() {
-  if (!deletingSectionId.value) return
+  if (!deletingSectionId.value)
+    return
   deleteSection(deletingSectionId.value, {
     onSuccess: () => {
       isDeleteSectionOpen.value = false
-      if (activeSectionId.value === deletingSectionId.value) {
+      if (activeSectionId.value === deletingSectionId.value)
         activeSectionId.value = sections.value?.[0]?.id ?? null
-      }
+
       deletingSectionId.value = null
     },
   })
@@ -148,7 +149,8 @@ function onDeleteShiftConfirm(shift: Shift) {
 }
 
 function onDeleteShiftExecute() {
-  if (!deletingShiftId.value) return
+  if (!deletingShiftId.value)
+    return
   deleteShiftMutation(deletingShiftId.value, {
     onSuccess: () => {
       isDeleteShiftOpen.value = false
@@ -196,9 +198,13 @@ const statusLabel: Record<ShiftStatus, string> = {
 }
 
 function fillRateColor(shift: Shift): string {
-  if (shift.is_overbooked) return 'warning'
-  if (shift.fill_rate >= 80) return 'success'
-  if (shift.fill_rate >= 40) return 'warning'
+  if (shift.is_overbooked)
+    return 'warning'
+  if (shift.fill_rate >= 80)
+    return 'success'
+  if (shift.fill_rate >= 40)
+    return 'warning'
+
   return 'error'
 }
 
@@ -210,13 +216,17 @@ const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
 })
 
 function formatDate(iso: string) {
-  if (!iso) return ''
+  if (!iso)
+    return ''
+
   return dateFormatter.format(new Date(iso))
 }
 
 // Selected shift for detail panel (resolved from store ID)
 const selectedShift = computed(() => {
-  if (!shiftDetailStore.selectedShiftId || !shifts.value) return null
+  if (!shiftDetailStore.selectedShiftId || !shifts.value)
+    return null
+
   return shifts.value.find(s => s.id === shiftDetailStore.selectedShiftId) ?? null
 })
 
@@ -311,7 +321,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
         </VCardText>
 
         <!-- Section list -->
-        <draggable
+        <Draggable
           v-else
           v-model="sections"
           item-key="id"
@@ -351,7 +361,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
               </VListItemTitle>
             </VListItem>
           </template>
-        </draggable>
+        </Draggable>
       </VCard>
     </VCol>
 
@@ -520,7 +530,10 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
               >
                 <div class="d-flex align-center gap-x-3 py-1 flex-wrap">
                   <!-- Title + lead badge -->
-                  <div class="d-flex align-center gap-x-2" style="min-inline-size: 160px;">
+                  <div
+                    class="d-flex align-center gap-x-2"
+                    style="min-inline-size: 160px;"
+                  >
                     <span class="text-body-1 font-weight-medium">
                       {{ shift.title ?? 'Shift' }}
                     </span>
@@ -534,7 +547,10 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
                   </div>
 
                   <!-- Fill rate -->
-                  <div class="d-flex align-center gap-x-2" style="min-inline-size: 160px;">
+                  <div
+                    class="d-flex align-center gap-x-2"
+                    style="min-inline-size: 160px;"
+                  >
                     <VProgressLinear
                       :model-value="shift.is_overbooked ? 100 : shift.fill_rate"
                       :color="fillRateColor(shift)"
diff --git a/apps/app/src/components/settings/MfaDisableDialog.vue b/apps/app/src/components/settings/MfaDisableDialog.vue
index 4b3ab61b..7845e6ca 100644
--- a/apps/app/src/components/settings/MfaDisableDialog.vue
+++ b/apps/app/src/components/settings/MfaDisableDialog.vue
@@ -22,7 +22,7 @@ const isDialogOpen = computed({
   set: (val: boolean) => emit('update:modelValue', val),
 })
 
-watch(isDialogOpen, (open) => {
+watch(isDialogOpen, open => {
   if (open) {
     code.value = ''
     errorMessage.value = ''
diff --git a/apps/app/src/components/settings/MfaEmailSetupDialog.vue b/apps/app/src/components/settings/MfaEmailSetupDialog.vue
index c76c481a..1d21fe90 100644
--- a/apps/app/src/components/settings/MfaEmailSetupDialog.vue
+++ b/apps/app/src/components/settings/MfaEmailSetupDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSetupEmail, useConfirmEmail } from '@/composables/api/useMfa'
+import { useConfirmEmail, useSetupEmail } from '@/composables/api/useMfa'
 
 const props = defineProps<{
   modelValue: boolean
@@ -26,7 +26,7 @@ const isDialogOpen = computed({
   set: (val: boolean) => emit('update:modelValue', val),
 })
 
-watch(isDialogOpen, (open) => {
+watch(isDialogOpen, open => {
   if (open) {
     step.value = 1
     errorMessage.value = ''
diff --git a/apps/app/src/components/settings/MfaTotpSetupDialog.vue b/apps/app/src/components/settings/MfaTotpSetupDialog.vue
index 26462c00..303c29fc 100644
--- a/apps/app/src/components/settings/MfaTotpSetupDialog.vue
+++ b/apps/app/src/components/settings/MfaTotpSetupDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import QRCode from 'qrcode'
-import { useSetupTotp, useConfirmTotp } from '@/composables/api/useMfa'
+import { useConfirmTotp, useSetupTotp } from '@/composables/api/useMfa'
 
 const props = defineProps<{
   modelValue: boolean
@@ -27,7 +27,7 @@ const isDialogOpen = computed({
   set: (val: boolean) => emit('update:modelValue', val),
 })
 
-watch(isDialogOpen, async (open) => {
+watch(isDialogOpen, async open => {
   if (open) {
     step.value = 1
     errorMessage.value = ''
diff --git a/apps/app/src/components/shifts/AssignPersonDialog.vue b/apps/app/src/components/shifts/AssignPersonDialog.vue
index 9747d6d2..cc5fec6b 100644
--- a/apps/app/src/components/shifts/AssignPersonDialog.vue
+++ b/apps/app/src/components/shifts/AssignPersonDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAssignablePersons, useAssignPersonToShift } from '@/composables/api/useShiftAssignments'
+import { useAssignPersonToShift, useAssignablePersons } from '@/composables/api/useShiftAssignments'
 import { getApiErrorMessage } from '@/lib/apiErrors'
 import { useAuthStore } from '@/stores/useAuthStore'
 import type { AssignablePerson } from '@/types/shiftAssignment'
@@ -40,7 +40,9 @@ const showOverbookConfirm = ref(false)
 const showVolunteerReassignConfirm = ref(false)
 
 const isShiftFull = computed(() => {
-  if (!props.shift) return false
+  if (!props.shift)
+    return false
+
   return props.shift.filled_slots >= props.shift.slots_total
 })
 
@@ -50,8 +52,9 @@ watch([searchQuery, showOnlyAvailable, showRecommendedOnly, selectedCrowdType],
 })
 
 // Cascading auto-filter when data loads
-watch(() => assignableData.value, (data) => {
-  if (!data) return
+watch(() => assignableData.value, data => {
+  if (!data)
+    return
   const { persons, meta } = data
 
   const recommended = persons.filter(p =>
@@ -78,7 +81,7 @@ watch(() => assignableData.value, (data) => {
 }, { immediate: true })
 
 // Reset state when dialog opens
-watch(modelValue, (open) => {
+watch(modelValue, open => {
   if (open) {
     searchQuery.value = ''
     showRecommendedOnly.value = true
@@ -90,12 +93,12 @@ watch(modelValue, (open) => {
 
 // Crowd type filter options (derived from data)
 const crowdTypeOptions = computed(() => {
-  if (!assignableData.value) return []
+  if (!assignableData.value)
+    return []
   const seen = new Map<string, string>()
   for (const p of assignableData.value.persons) {
-    if (p.crowd_type && !seen.has(p.crowd_type.system_type)) {
+    if (p.crowd_type && !seen.has(p.crowd_type.system_type))
       seen.set(p.crowd_type.system_type, p.crowd_type.name)
-    }
   }
 
   return Array.from(seen, ([value, title]) => ({ title, value }))
@@ -103,30 +106,34 @@ const crowdTypeOptions = computed(() => {
 
 // Filtered persons
 const filteredPersons = computed(() => {
-  if (!assignableData.value) return []
+  if (!assignableData.value)
+    return []
   const sectionName = assignableData.value.meta.section_name
 
-  return assignableData.value.persons.filter((person) => {
+  return assignableData.value.persons.filter(person => {
     if (searchQuery.value) {
       const q = searchQuery.value.toLowerCase()
-      if (!person.full_name.toLowerCase().includes(q) && !person.email.toLowerCase().includes(q)) {
+      if (!person.full_name.toLowerCase().includes(q) && !person.email.toLowerCase().includes(q))
         return false
-      }
     }
 
     if (selectedCrowdType.value) {
-      if (person.crowd_type?.system_type !== selectedCrowdType.value) return false
+      if (person.crowd_type?.system_type !== selectedCrowdType.value)
+        return false
     }
 
     if (showOnlyAvailable.value) {
-      if (!person.is_available || person.already_assigned) return false
+      if (!person.is_available || person.already_assigned)
+        return false
     }
 
     if (showRecommendedOnly.value) {
       const hasPreference = person.section_preferences.some(
         sp => sp.section_name === sectionName,
       )
-      if (!hasPreference && !person.has_availability) return false
+
+      if (!hasPreference && !person.has_availability)
+        return false
     }
 
     return true
@@ -138,16 +145,22 @@ const sortedPersons = computed(() => {
   const sectionName = assignableData.value?.meta?.section_name || ''
 
   return [...filteredPersons.value].sort((a, b) => {
-    if (a.already_assigned !== b.already_assigned) return a.already_assigned ? 1 : -1
-    if (a.is_available !== b.is_available) return a.is_available ? -1 : 1
+    if (a.already_assigned !== b.already_assigned)
+      return a.already_assigned ? 1 : -1
+    if (a.is_available !== b.is_available)
+      return a.is_available ? -1 : 1
 
     const aMatch = a.section_preferences.find(p => p.section_name === sectionName)
     const bMatch = b.section_preferences.find(p => p.section_name === sectionName)
-    if (!!aMatch !== !!bMatch) return aMatch ? -1 : 1
-    if (aMatch && bMatch) return aMatch.priority - bMatch.priority
+    if (!!aMatch !== !!bMatch)
+      return aMatch ? -1 : 1
+    if (aMatch && bMatch)
+      return aMatch.priority - bMatch.priority
 
-    if (a.has_availability !== b.has_availability) return a.has_availability ? -1 : 1
-    if (a.tags.length !== b.tags.length) return b.tags.length - a.tags.length
+    if (a.has_availability !== b.has_availability)
+      return a.has_availability ? -1 : 1
+    if (a.tags.length !== b.tags.length)
+      return b.tags.length - a.tags.length
 
     return a.full_name.localeCompare(b.full_name)
   })
@@ -155,15 +168,14 @@ const sortedPersons = computed(() => {
 
 // Empty state reason
 const emptyReason = computed(() => {
-  if (!assignableData.value?.persons?.length) {
+  if (!assignableData.value?.persons?.length)
     return 'Er zijn geen goedgekeurde personen voor dit evenement.'
-  }
-  if (showRecommendedOnly.value && !filteredPersons.value.length) {
+
+  if (showRecommendedOnly.value && !filteredPersons.value.length)
     return 'Geen aanbevolen personen gevonden. Zet \'Aanbevolen\' uit om alle personen te zien.'
-  }
-  if (showOnlyAvailable.value && !filteredPersons.value.length) {
+
+  if (showOnlyAvailable.value && !filteredPersons.value.length)
     return 'Alle personen zijn al ingepland voor dit tijdslot. Zet \'Alleen beschikbaar\' uit om alle personen te zien.'
-  }
 
   return 'Geen personen gevonden voor deze zoekopdracht.'
 })
@@ -179,7 +191,9 @@ function getInitials(name: string) {
 
 function getPreferenceMatch(person: AssignablePerson) {
   const sectionName = assignableData.value?.meta?.section_name
-  if (!sectionName) return null
+  if (!sectionName)
+    return null
+
   return person.section_preferences.find(sp => sp.section_name === sectionName)
 }
 
@@ -190,19 +204,20 @@ function getRecommendationReasons(person: AssignablePerson): string[] {
   const prefMatch = sectionName
     ? person.section_preferences.find(sp => sp.section_name === sectionName)
     : null
-  if (prefMatch) {
-    reasons.push(`Voorkeur voor ${sectionName} (prioriteit #${prefMatch.priority})`)
-  }
 
-  if (person.has_availability) {
+  if (prefMatch)
+    reasons.push(`Voorkeur voor ${sectionName} (prioriteit #${prefMatch.priority})`)
+
+  if (person.has_availability)
     reasons.push(`Beschikbaar voor tijdslot ${assignableData.value?.meta?.time_slot_name}`)
-  }
 
   if (person.tags.length) {
     const proficiencyLabel: Record<string, string> = { beginner: 'beginner', experienced: 'ervaren', expert: 'expert' }
+
     const tagNames = person.tags.map(t =>
       t.proficiency ? `${t.name} (${proficiencyLabel[t.proficiency]})` : t.name,
     )
+
     reasons.push(`Kenmerken: ${tagNames.join(', ')}`)
   }
 
@@ -210,13 +225,15 @@ function getRecommendationReasons(person: AssignablePerson): string[] {
 }
 
 function handleAssign(person: AssignablePerson) {
-  if (!props.shift) return
+  if (!props.shift)
+    return
   assignError.value = null
 
   // Volunteer self-cancelled — extra warning
   if (person.previous_assignment?.cancellation_source === 'volunteer') {
     pendingPerson.value = person
     showVolunteerReassignConfirm.value = true
+
     return
   }
 
@@ -224,6 +241,7 @@ function handleAssign(person: AssignablePerson) {
   if (isShiftFull.value) {
     pendingPerson.value = person
     showOverbookConfirm.value = true
+
     return
   }
 
@@ -231,9 +249,9 @@ function handleAssign(person: AssignablePerson) {
 }
 
 function confirmOverbook() {
-  if (pendingPerson.value) {
+  if (pendingPerson.value)
     executeAssign(pendingPerson.value)
-  }
+
   showOverbookConfirm.value = false
   pendingPerson.value = null
 }
@@ -244,6 +262,7 @@ function confirmVolunteerReassign() {
     if (isShiftFull.value) {
       showVolunteerReassignConfirm.value = false
       showOverbookConfirm.value = true
+
       return
     }
     executeAssign(pendingPerson.value)
@@ -253,7 +272,8 @@ function confirmVolunteerReassign() {
 }
 
 async function executeAssign(person: AssignablePerson) {
-  if (!props.shift) return
+  if (!props.shift)
+    return
 
   try {
     await assignPerson({
diff --git a/apps/app/src/components/shifts/ShiftDetailPanel.vue b/apps/app/src/components/shifts/ShiftDetailPanel.vue
index 5655d55d..2821c6c4 100644
--- a/apps/app/src/components/shifts/ShiftDetailPanel.vue
+++ b/apps/app/src/components/shifts/ShiftDetailPanel.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import {
-  useShiftAssignmentList,
   useApproveAssignment,
-  useRejectAssignment,
-  useCancelAssignment,
-  useBulkApproveAssignments,
   useAssignPersonToShift,
+  useBulkApproveAssignments,
+  useCancelAssignment,
+  useRejectAssignment,
+  useShiftAssignmentList,
 } from '@/composables/api/useShiftAssignments'
 import AssignPersonDialog from '@/components/shifts/AssignPersonDialog.vue'
 import { getApiErrorMessage } from '@/lib/apiErrors'
@@ -57,21 +57,23 @@ function onReassign(assignment: ShiftAssignment) {
   if (assignment.cancellation_source === 'volunteer') {
     reassigningAssignment.value = assignment
     showVolunteerReassignConfirm.value = true
+
     return
   }
   executeReassign(assignment)
 }
 
 function confirmReassign() {
-  if (reassigningAssignment.value) {
+  if (reassigningAssignment.value)
     executeReassign(reassigningAssignment.value)
-  }
+
   showVolunteerReassignConfirm.value = false
   reassigningAssignment.value = null
 }
 
 async function executeReassign(assignment: ShiftAssignment) {
-  if (!store.selectedSectionId) return
+  if (!store.selectedSectionId)
+    return
   reassigning.value = assignment.id
   try {
     await assignPersonMutation({
@@ -100,12 +102,18 @@ const pendingAssignments = computed(() =>
 const statusCounts = computed(() => {
   const counts = { pending: 0, approved: 0, rejected: 0, cancelled: 0, completed: 0 }
   for (const a of assignments.value) {
-    if (a.status === ShiftAssignmentStatus.PENDING_APPROVAL) counts.pending++
-    else if (a.status === ShiftAssignmentStatus.APPROVED) counts.approved++
-    else if (a.status === ShiftAssignmentStatus.REJECTED) counts.rejected++
-    else if (a.status === ShiftAssignmentStatus.CANCELLED) counts.cancelled++
-    else if (a.status === ShiftAssignmentStatus.COMPLETED) counts.completed++
+    if (a.status === ShiftAssignmentStatus.PENDING_APPROVAL)
+      counts.pending++
+    else if (a.status === ShiftAssignmentStatus.APPROVED)
+      counts.approved++
+    else if (a.status === ShiftAssignmentStatus.REJECTED)
+      counts.rejected++
+    else if (a.status === ShiftAssignmentStatus.CANCELLED)
+      counts.cancelled++
+    else if (a.status === ShiftAssignmentStatus.COMPLETED)
+      counts.completed++
   }
+
   return counts
 })
 
@@ -130,7 +138,9 @@ const statusLabel: Record<ShiftAssignmentStatus, string> = {
 const statusFilter = ref<ShiftAssignmentStatus | ''>('')
 
 const filteredAssignments = computed(() => {
-  if (!statusFilter.value) return assignments.value
+  if (!statusFilter.value)
+    return assignments.value
+
   return assignments.value.filter(a => a.status === statusFilter.value)
 })
 
@@ -167,19 +177,20 @@ function getInitials(name: string) {
 
 // Bulk selection
 const isAllPendingSelected = computed(() => {
-  if (!pendingAssignments.value.length) return false
+  if (!pendingAssignments.value.length)
+    return false
+
   return pendingAssignments.value.every(a =>
     store.selectedAssignmentIds.includes(a.id),
   )
 })
 
 function onToggleSelectAll() {
-  if (isAllPendingSelected.value) {
+  if (isAllPendingSelected.value)
     store.clearSelection()
-  }
-  else {
+
+  else
     store.selectAllPending(assignments.value)
-  }
 }
 
 // Snackbar (success + server errors)
@@ -208,6 +219,7 @@ function onApprove(assignment: ShiftAssignment) {
   if (filledSlots >= totalSlots) {
     overbookingAssignment.value = assignment
     isOverbookDialogOpen.value = true
+
     return
   }
 
@@ -215,7 +227,8 @@ function onApprove(assignment: ShiftAssignment) {
 }
 
 function onOverbookConfirm() {
-  if (!overbookingAssignment.value) return
+  if (!overbookingAssignment.value)
+    return
   executeApprove(overbookingAssignment.value)
   isOverbookDialogOpen.value = false
   overbookingAssignment.value = null
@@ -238,7 +251,8 @@ function onCancel(assignment: ShiftAssignment) {
 }
 
 function onCancelExecute() {
-  if (!cancellingAssignment.value) return
+  if (!cancellingAssignment.value)
+    return
   const name = cancellingAssignment.value.person?.full_name ?? 'Toewijzing'
 
   cancelAssignment(cancellingAssignment.value.id, {
@@ -265,7 +279,8 @@ function onReject(assignment: ShiftAssignment) {
 }
 
 function onRejectExecute() {
-  if (!rejectingAssignment.value) return
+  if (!rejectingAssignment.value)
+    return
   const name = rejectingAssignment.value.person?.full_name ?? 'Toewijzing'
 
   rejectAssignment(
@@ -298,6 +313,7 @@ const bulkApproveWillOverbook = computed(() => {
   const filledSlots = props.shift?.filled_slots ?? 0
   const totalSlots = props.shift?.slots_total ?? 0
   const selectedCount = store.selectedAssignmentIds.length
+
   return filledSlots + selectedCount > totalSlots
 })
 
@@ -306,7 +322,8 @@ function onBulkApprove() {
 }
 
 function onBulkApproveExecute() {
-  if (!store.selectedAssignmentIds.length) return
+  if (!store.selectedAssignmentIds.length)
+    return
 
   bulkApprove(store.selectedAssignmentIds, {
     onSuccess: () => {
@@ -329,10 +346,14 @@ function onPersonAssigned() {
 
 // Fill rate color
 function fillRateColor(): string {
-  if (props.shift?.is_overbooked) return 'warning'
+  if (props.shift?.is_overbooked)
+    return 'warning'
   const rate = props.shift?.fill_rate ?? 0
-  if (rate >= 80) return 'success'
-  if (rate >= 40) return 'warning'
+  if (rate >= 80)
+    return 'success'
+  if (rate >= 40)
+    return 'warning'
+
   return 'error'
 }
 </script>
@@ -631,7 +652,7 @@ function fillRateColor(): string {
               <VBtn
                 variant="text"
                 size="small"
-                @click="refetchAssignments()"
+                @click="refetchAssignments"
               >
                 Opnieuw proberen
               </VBtn>
@@ -680,7 +701,10 @@ function fillRateColor(): string {
             >
               <VCardText class="pa-3">
                 <div class="d-flex justify-space-between align-start">
-                  <div class="d-flex gap-x-3 align-center flex-grow-1" style="min-width: 0;">
+                  <div
+                    class="d-flex gap-x-3 align-center flex-grow-1"
+                    style="min-width: 0;"
+                  >
                     <!-- Checkbox for pending items -->
                     <VCheckbox
                       v-if="assignment.is_approvable"
@@ -700,7 +724,10 @@ function fillRateColor(): string {
                       </span>
                     </VAvatar>
 
-                    <div style="min-width: 0;" class="flex-grow-1">
+                    <div
+                      style="min-width: 0;"
+                      class="flex-grow-1"
+                    >
                       <div class="d-flex align-center gap-x-2 flex-wrap">
                         <span class="text-body-2 font-weight-medium text-truncate">
                           {{ assignment.person?.full_name ?? 'Onbekend' }}
diff --git a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index bfdc9934..d9d855ab 100644
--- a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -3,37 +3,6 @@ import { orgNavItems, platformNavItems } from '@/navigation/vertical'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useImpersonationStore } from '@/stores/useImpersonationStore'
 
-const authStore = useAuthStore()
-const impersonationStore = useImpersonationStore()
-
-const hasOrganisation = computed(() => !!authStore.organisations.length)
-
-const navItems = computed(() => {
-  const orgName = authStore.currentOrganisation?.name ?? 'Beheer'
-
-  let orgItems = orgNavItems.map(item => {
-    if ('heading' in item && item.heading === 'Beheer') {
-      return { ...item, heading: orgName }
-    }
-    return item
-  })
-
-  // During impersonation: hide org-dependent items if user has no organisation
-  if (impersonationStore.isImpersonating && !hasOrganisation.value) {
-    orgItems = orgItems.filter(item => {
-      if ('heading' in item) return false
-      return 'to' in item && item.to?.name === 'dashboard'
-    })
-  }
-
-  // Platform items: only for super_admin AND only when NOT impersonating
-  if (authStore.isSuperAdmin && !impersonationStore.isImpersonating) {
-    return [...orgItems, ...platformNavItems]
-  }
-
-  return orgItems
-})
-
 // Components
 import ImpersonationBanner from '@/components/platform/ImpersonationBanner.vue'
 import Footer from '@/layouts/components/Footer.vue'
@@ -46,6 +15,40 @@ import OrganisationSwitcher from '@/components/layout/OrganisationSwitcher.vue'
 
 // @layouts plugin
 import { VerticalNavLayout } from '@layouts'
+
+const authStore = useAuthStore()
+const impersonationStore = useImpersonationStore()
+
+const hasOrganisation = computed(() => !!authStore.organisations.length)
+
+const navItems = computed(() => {
+  const orgName = authStore.currentOrganisation?.name ?? 'Beheer'
+
+  let orgItems = orgNavItems.map(item => {
+    if ('heading' in item && item.heading === 'Beheer') 
+      return { ...item, heading: orgName }
+    
+    
+return item
+  })
+
+  // During impersonation: hide org-dependent items if user has no organisation
+  if (impersonationStore.isImpersonating && !hasOrganisation.value) {
+    orgItems = orgItems.filter(item => {
+      if ('heading' in item) 
+return false
+      
+return 'to' in item && item.to?.name === 'dashboard'
+    })
+  }
+
+  // Platform items: only for super_admin AND only when NOT impersonating
+  if (authStore.isSuperAdmin && !impersonationStore.isImpersonating) 
+    return [...orgItems, ...platformNavItems]
+  
+
+  return orgItems
+})
 </script>
 
 <template>
diff --git a/apps/app/src/layouts/components/NavSearchBar.vue b/apps/app/src/layouts/components/NavSearchBar.vue
index 2fd68bfc..55ead4f8 100644
--- a/apps/app/src/layouts/components/NavSearchBar.vue
+++ b/apps/app/src/layouts/components/NavSearchBar.vue
@@ -128,7 +128,6 @@ const redirectToSuggestedPage = (selected: Suggestion) => {
   router.push(selected.url as string)
   closeSearchBar()
 }
-
 </script>
 
 <template>
diff --git a/apps/app/src/layouts/components/UserProfile.vue b/apps/app/src/layouts/components/UserProfile.vue
index c818ca3c..636c08cb 100644
--- a/apps/app/src/layouts/components/UserProfile.vue
+++ b/apps/app/src/layouts/components/UserProfile.vue
@@ -16,6 +16,7 @@ const initials = computed(() => {
   const parts = name.split(/\s+/).filter(Boolean)
   if (parts.length >= 2)
     return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()
+
   return name.slice(0, 2).toUpperCase()
 })
 
@@ -26,6 +27,7 @@ const avatarSrc = computed((): string | null => {
   if (raw.startsWith('http://') || raw.startsWith('https://'))
     return raw
   const base = (import.meta.env.VITE_API_URL as string | undefined)?.replace(/\/api\/v1\/?$/, '') ?? ''
+
   return raw.startsWith('/') ? `${base}${raw}` : `${base}/${raw}`
 })
 
diff --git a/apps/app/src/pages/account-settings/index.vue b/apps/app/src/pages/account-settings/index.vue
index 958ba25e..0a7e8a0c 100644
--- a/apps/app/src/pages/account-settings/index.vue
+++ b/apps/app/src/pages/account-settings/index.vue
@@ -21,6 +21,7 @@ const tabs = [
 const activeTab = computed({
   get: () => {
     const tab = route.query.tab as string | undefined
+
     return tabs.some(t => t.value === tab) ? tab! : 'account'
   },
   set: (val: string) => {
diff --git a/apps/app/src/pages/events/[id]/crowd-lists/index.vue b/apps/app/src/pages/events/[id]/crowd-lists/index.vue
index 6af8a683..b505eb3c 100644
--- a/apps/app/src/pages/events/[id]/crowd-lists/index.vue
+++ b/apps/app/src/pages/events/[id]/crowd-lists/index.vue
@@ -29,13 +29,17 @@ const { mutate: deleteCrowdList, isPending: isDeleting } = useDeleteCrowdList(or
 // Lookup maps for resolving IDs to names
 const crowdTypeMap = computed(() => {
   const map = new Map<string, string>()
+
   crowdTypes.value?.forEach(ct => map.set(ct.id, ct.name))
+
   return map
 })
 
 const companyMap = computed(() => {
   const map = new Map<string, string>()
+
   companies.value?.forEach(c => map.set(c.id, c.name))
+
   return map
 })
 
@@ -59,8 +63,10 @@ const selectedCrowdList = ref<CrowdList | null>(null)
 /** Sync met TanStack-query na mutaties (verwijderen personen, enz.); anders blijft de zijbalk op oude tellers. */
 const detailPanelCrowdList = computed((): CrowdList | null => {
   const selected = selectedCrowdList.value
-  if (!selected) return null
+  if (!selected)
+    return null
   const fresh = crowdLists.value?.find(cl => cl.id === selected.id)
+
   return fresh ?? selected
 })
 
@@ -92,7 +98,8 @@ function onDeleteConfirm(crowdList: CrowdList) {
 }
 
 function onDeleteExecute() {
-  if (!deletingCrowdList.value) return
+  if (!deletingCrowdList.value)
+    return
   const name = deletingCrowdList.value.name
 
   deleteCrowdList(deletingCrowdList.value.id, {
@@ -111,9 +118,9 @@ function onEditFromPanel(crowdList: CrowdList) {
 }
 
 function formatPersonsCount(item: CrowdList): string {
-  if (item.max_persons) {
+  if (item.max_persons)
     return `${item.persons_count} / ${item.max_persons}`
-  }
+
   return String(item.persons_count)
 }
 </script>
@@ -149,7 +156,7 @@ function formatPersonsCount(item: CrowdList): string {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/events/[id]/index.vue b/apps/app/src/pages/events/[id]/index.vue
index 55879a1c..a6d08552 100644
--- a/apps/app/src/pages/events/[id]/index.vue
+++ b/apps/app/src/pages/events/[id]/index.vue
@@ -4,7 +4,7 @@ import EventTabsNav from '@/components/events/EventTabsNav.vue'
 import { useEventChildren } from '@/composables/api/useEvents'
 import { dutchPlural } from '@/lib/dutch-plural'
 import { useAuthStore } from '@/stores/useAuthStore'
-import type { EventStatus, EventItem } from '@/types/event'
+import type { EventItem, EventStatus } from '@/types/event'
 
 definePage({
   meta: {
diff --git a/apps/app/src/pages/events/[id]/persons/index.vue b/apps/app/src/pages/events/[id]/persons/index.vue
index 1f62584c..5b4c9d80 100644
--- a/apps/app/src/pages/events/[id]/persons/index.vue
+++ b/apps/app/src/pages/events/[id]/persons/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePersonList, useApprovePerson, useDeletePerson } from '@/composables/api/usePersons'
+import { useApprovePerson, useDeletePerson, usePersonList } from '@/composables/api/usePersons'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useAuthStore } from '@/stores/useAuthStore'
 import EventTabsNav from '@/components/events/EventTabsNav.vue'
@@ -156,7 +156,8 @@ function onDeleteConfirm(person: Person) {
 }
 
 function onDeleteExecute() {
-  if (!deletingPerson.value) return
+  if (!deletingPerson.value)
+    return
   const name = deletingPerson.value.full_name
 
   deletePerson(deletingPerson.value.id, {
@@ -264,7 +265,7 @@ const crowdTypeOptions = computed(() => [
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/events/[id]/programmaonderdelen/index.vue b/apps/app/src/pages/events/[id]/programmaonderdelen/index.vue
index 40cfe189..f15931c7 100644
--- a/apps/app/src/pages/events/[id]/programmaonderdelen/index.vue
+++ b/apps/app/src/pages/events/[id]/programmaonderdelen/index.vue
@@ -5,7 +5,7 @@ import DeleteSubEventDialog from '@/components/events/DeleteSubEventDialog.vue'
 import { useEventChildren } from '@/composables/api/useEvents'
 import { dutchPlural } from '@/lib/dutch-plural'
 import { useAuthStore } from '@/stores/useAuthStore'
-import type { EventStatus, EventItem } from '@/types/event'
+import type { EventItem, EventStatus } from '@/types/event'
 
 definePage({
   meta: {
diff --git a/apps/app/src/pages/events/[id]/settings/index.vue b/apps/app/src/pages/events/[id]/settings/index.vue
index 9c21b141..549f6d87 100644
--- a/apps/app/src/pages/events/[id]/settings/index.vue
+++ b/apps/app/src/pages/events/[id]/settings/index.vue
@@ -20,7 +20,9 @@ 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'
+  if (name?.includes('registration-fields'))
+    return 'registration-fields'
+
   return 'branding'
 })
 
diff --git a/apps/app/src/pages/events/[id]/settings/registration-fields.vue b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
index 28dc3e99..d1b84011 100644
--- a/apps/app/src/pages/events/[id]/settings/registration-fields.vue
+++ b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
@@ -1,5 +1,4 @@
 <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'
@@ -7,11 +6,11 @@ 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,
+  useRegistrationFormFields,
   useReorderRegistrationFormFields,
+  useUpdateRegistrationFormField,
 } from '@/composables/api/useRegistrationFormFields'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useNotificationStore } from '@/stores/useNotificationStore'
@@ -44,10 +43,9 @@ const { mutate: reorderFields } = useReorderRegistrationFormFields(orgId, eventI
 // Local draggable list synced from query
 const localFields = ref<RegistrationFormField[]>([])
 
-watch(fields, (newFields) => {
-  if (newFields) {
+watch(fields, newFields => {
+  if (newFields)
     localFields.value = [...newFields]
-  }
 }, { immediate: true })
 
 // Form settings toggles (initialised from event)
@@ -56,7 +54,8 @@ const showAvailability = ref(false)
 let initialised = false
 
 function initFormSettings(event: EventItem) {
-  if (initialised) return
+  if (initialised)
+    return
   showSectionPreferences.value = event.registration_show_section_preferences ?? false
   showAvailability.value = event.registration_show_availability ?? false
   initialised = true
@@ -106,7 +105,7 @@ function onSaveField(payload: Partial<RegistrationFormFieldCreateDTO>) {
           isFieldDialogOpen.value = false
           notificationStore.show(`${payload.label} bijgewerkt`, 'success')
         },
-        onError: (err) => fieldFormRef.value?.setErrors(err),
+        onError: err => fieldFormRef.value?.setErrors(err),
       },
     )
   }
@@ -116,7 +115,7 @@ function onSaveField(payload: Partial<RegistrationFormFieldCreateDTO>) {
         isFieldDialogOpen.value = false
         notificationStore.show(`${payload.label} aangemaakt`, 'success')
       },
-      onError: (err) => fieldFormRef.value?.setErrors(err),
+      onError: err => fieldFormRef.value?.setErrors(err),
     })
   }
 }
@@ -131,7 +130,8 @@ function onDeleteConfirm(field: RegistrationFormField) {
 }
 
 function onDeleteExecute() {
-  if (!deletingField.value) return
+  if (!deletingField.value)
+    return
   const label = deletingField.value.label
 
   deleteField(deletingField.value.id, {
@@ -168,7 +168,9 @@ 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'
+  if (name?.includes('registration-fields'))
+    return 'registration-fields'
+
   return 'branding'
 })
 </script>
@@ -320,7 +322,7 @@ const settingsTab = computed(() => {
           </VCard>
 
           <!-- Sortable field list -->
-          <draggable
+          <Draggable
             v-else
             v-model="localFields"
             item-key="id"
@@ -341,7 +343,7 @@ const settingsTab = computed(() => {
                 @delete="onDeleteConfirm"
               />
             </template>
-          </draggable>
+          </Draggable>
         </VCol>
 
         <VCol
diff --git a/apps/app/src/pages/events/[id]/time-slots/index.vue b/apps/app/src/pages/events/[id]/time-slots/index.vue
index e4bbfbb1..98cc20ae 100644
--- a/apps/app/src/pages/events/[id]/time-slots/index.vue
+++ b/apps/app/src/pages/events/[id]/time-slots/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useTimeSlotList, useDeleteTimeSlot } from '@/composables/api/useTimeSlots'
+import { useDeleteTimeSlot, useTimeSlotList } from '@/composables/api/useTimeSlots'
 import { useEventChildren, useEventDetail } from '@/composables/api/useEvents'
 import { useAuthStore } from '@/stores/useAuthStore'
 import EventTabsNav from '@/components/events/EventTabsNav.vue'
 import CreateTimeSlotDialog from '@/components/sections/CreateTimeSlotDialog.vue'
 import InfoTooltip from '@/components/common/InfoTooltip.vue'
 import { PersonType } from '@/types/timeSlot'
-import type { TimeSlot, PersonType as PersonTypeValue } from '@/types/timeSlot'
+import type { PersonType as PersonTypeValue, TimeSlot } from '@/types/timeSlot'
 import type { EventItem } from '@/types/event'
 
 definePage({
@@ -55,8 +55,11 @@ const personTypeFilters = [
 ]
 
 const filteredSlots = computed(() => {
-  if (!timeSlots.value) return []
-  if (!activeFilter.value) return timeSlots.value
+  if (!timeSlots.value)
+    return []
+  if (!activeFilter.value)
+    return timeSlots.value
+
   return timeSlots.value.filter(s => s.person_type === activeFilter.value)
 })
 
@@ -70,32 +73,40 @@ const dutchDateFormatter = new Intl.DateTimeFormat('nl-NL', {
 
 function formatGroupDate(iso: string): string {
   const formatted = dutchDateFormatter.format(new Date(iso))
+
   return formatted.charAt(0).toUpperCase() + formatted.slice(1)
 }
 
 const groupedByDate = computed(() => {
   const groups = new Map<string, TimeSlot[]>()
+
   filteredSlots.value.forEach(slot => {
     const existing = groups.get(slot.date) || []
+
     existing.push(slot)
     groups.set(slot.date, existing)
   })
+
   return groups
 })
 
 // --- Summary ---
 const summary = computed(() => {
   const slots = timeSlots.value
-  if (!slots?.length) return ''
+  if (!slots?.length)
+    return ''
   const dates = new Set(slots.map(s => s.date))
+
   return `${slots.length} slots · ${dates.size} ${dates.size === 1 ? 'dag' : 'dagen'}`
 })
 
 // --- Time slot context labels (Opbouw / Afbraak / Transitie) ---
 const childDateRange = computed(() => {
-  if (!children.value?.length) return null
+  if (!children.value?.length)
+    return null
   const starts = children.value.map((c: EventItem) => c.start_date).sort()
   const ends = children.value.map((c: EventItem) => c.end_date).sort()
+
   return {
     firstStart: starts[0],
     lastEnd: ends[ends.length - 1],
@@ -104,17 +115,20 @@ const childDateRange = computed(() => {
 })
 
 function getTimeSlotContext(ts: TimeSlot): { label: string; color: string } | null {
-  if (!childDateRange.value) return null
+  if (!childDateRange.value)
+    return null
   const tsDate = ts.date
   const { firstStart, lastEnd, dates } = childDateRange.value
-  if (tsDate < firstStart) return { label: 'Opbouw', color: 'warning' }
-  if (tsDate > lastEnd) return { label: 'Afbraak', color: 'error' }
+  if (tsDate < firstStart)
+    return { label: 'Opbouw', color: 'warning' }
+  if (tsDate > lastEnd)
+    return { label: 'Afbraak', color: 'error' }
   const sorted = [...dates].sort((a, b) => a.start.localeCompare(b.start))
   for (let i = 0; i < sorted.length - 1; i++) {
-    if (tsDate > sorted[i].end && tsDate < sorted[i + 1].start) {
+    if (tsDate > sorted[i].end && tsDate < sorted[i + 1].start)
       return { label: 'Transitie', color: 'info' }
-    }
   }
+
   return null
 }
 
@@ -131,35 +145,46 @@ const { data: festivalTimeSlots } = useTimeSlotList(orgId, parentEventId, {
 })
 
 const festivalTimeSlotsGrouped = computed(() => {
-  if (!festivalTimeSlots.value?.length) return new Map<string, TimeSlot[]>()
+  if (!festivalTimeSlots.value?.length)
+    return new Map<string, TimeSlot[]>()
   const groups = new Map<string, TimeSlot[]>()
   for (const slot of festivalTimeSlots.value) {
     const existing = groups.get(slot.date) || []
+
     existing.push(slot)
     groups.set(slot.date, existing)
   }
+
   return groups
 })
 
 // --- Fill rate ---
 function fillRatePercent(ts: TimeSlot): number {
-  if (ts.total_slots === 0) return 0
+  if (ts.total_slots === 0)
+    return 0
+
   return Math.round((ts.filled_slots / ts.total_slots) * 100)
 }
 
 function fillRateColor(ts: TimeSlot): string {
   const pct = fillRatePercent(ts)
-  if (pct >= 80) return 'success'
-  if (pct >= 50) return 'warning'
+  if (pct >= 80)
+    return 'success'
+  if (pct >= 50)
+    return 'warning'
+
   return 'error'
 }
 
 // --- Duration formatting ---
 function formatDuration(ts: TimeSlot): string {
-  if (ts.duration_hours == null) return ''
+  if (ts.duration_hours == null)
+    return ''
   const h = Math.floor(ts.duration_hours)
   const m = Math.round((ts.duration_hours - h) * 60)
-  if (m === 0) return `${h} uur`
+  if (m === 0)
+    return `${h} uur`
+
   return `${h},${m < 10 ? '0' : ''}${m} uur`
 }
 
@@ -186,8 +211,9 @@ function onDuplicateTimeSlot(ts: TimeSlot) {
   isCreateDialogOpen.value = true
 }
 
-watch(isCreateDialogOpen, (open) => {
-  if (!open) duplicatingTimeSlot.value = null
+watch(isCreateDialogOpen, open => {
+  if (!open)
+    duplicatingTimeSlot.value = null
 })
 
 // --- Delete confirmation ---
@@ -200,7 +226,8 @@ function onDeleteConfirm(ts: TimeSlot) {
 }
 
 function onDeleteExecute() {
-  if (!deletingTimeSlot.value) return
+  if (!deletingTimeSlot.value)
+    return
   deleteTimeSlotMutation(deletingTimeSlot.value.id, {
     onSuccess: () => {
       isDeleteDialogOpen.value = false
@@ -268,7 +295,7 @@ function onDeleteExecute() {
         <template #append>
           <VBtn
             variant="text"
-            @click="refetch()"
+            @click="refetch"
           >
             Opnieuw proberen
           </VBtn>
diff --git a/apps/app/src/pages/events/index.vue b/apps/app/src/pages/events/index.vue
index 662b7637..ae1e0c87 100644
--- a/apps/app/src/pages/events/index.vue
+++ b/apps/app/src/pages/events/index.vue
@@ -3,7 +3,7 @@ import { useEventList } from '@/composables/api/useEvents'
 import { dutchPlural } from '@/lib/dutch-plural'
 import { useAuthStore } from '@/stores/useAuthStore'
 import CreateEventDialog from '@/components/events/CreateEventDialog.vue'
-import type { EventStatus, EventItem } from '@/types/event'
+import type { EventItem, EventStatus } from '@/types/event'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -97,7 +97,7 @@ function navigateToEvent(event: EventItem) {
         <template #append>
           <VBtn
             variant="text"
-            @click="refetch()"
+            @click="refetch"
           >
             Opnieuw proberen
           </VBtn>
diff --git a/apps/app/src/pages/forgot-password.vue b/apps/app/src/pages/forgot-password.vue
index 7894d2f0..ccdbae67 100644
--- a/apps/app/src/pages/forgot-password.vue
+++ b/apps/app/src/pages/forgot-password.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
 import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
 import authV2ForgotPasswordIllustrationDark from '@images/pages/auth-v2-forgot-password-illustration-dark.png'
 import authV2ForgotPasswordIllustrationLight from '@images/pages/auth-v2-forgot-password-illustration-light.png'
@@ -6,8 +7,7 @@ import authV2MaskDark from '@images/pages/misc-mask-dark.png'
 import authV2MaskLight from '@images/pages/misc-mask-light.png'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
-import { requiredValidator, emailValidator } from '@core/utils/validators'
-import { VForm } from 'vuetify/components/VForm'
+import { emailValidator, requiredValidator } from '@core/utils/validators'
 import { apiClient } from '@/lib/axios'
 
 definePage({
@@ -26,11 +26,13 @@ const authThemeImg = useGenerateImageVariant(
   authV2ForgotPasswordIllustrationLight,
   authV2ForgotPasswordIllustrationDark,
 )
+
 const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
 
 async function onSubmit(): Promise<void> {
   const { valid } = await refVForm.value!.validate()
-  if (!valid) return
+  if (!valid)
+    return
 
   isSubmitting.value = true
   try {
diff --git a/apps/app/src/pages/index.vue b/apps/app/src/pages/index.vue
index f1793c39..21d169f1 100644
--- a/apps/app/src/pages/index.vue
+++ b/apps/app/src/pages/index.vue
@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+
 router.replace({ name: 'dashboard' })
 </script>
 
diff --git a/apps/app/src/pages/invitations/[token].vue b/apps/app/src/pages/invitations/[token].vue
index 55e1fa9c..7070f83b 100644
--- a/apps/app/src/pages/invitations/[token].vue
+++ b/apps/app/src/pages/invitations/[token].vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useInvitationDetail, useAcceptInvitation } from '@/composables/api/useMembers'
+import type { AxiosError } from 'axios'
+import { useAcceptInvitation, useInvitationDetail } from '@/composables/api/useMembers'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
-import type { OrganisationRole } from '@/types/member'
-import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
 definePage({
@@ -51,7 +50,8 @@ const passwordConfirmed = (value: string) => {
 
 function onSubmit() {
   refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
+    if (!valid)
+      return
 
     errors.value = {}
 
@@ -65,7 +65,7 @@ function onSubmit() {
     acceptInvitation(
       { token: token.value, ...payload },
       {
-        onSuccess: (response) => {
+        onSuccess: response => {
           // Token is set automatically via httpOnly Set-Cookie header
           authStore.setUser(response.data.user)
           router.replace('/dashboard')
@@ -89,7 +89,10 @@ function onSubmit() {
 </script>
 
 <template>
-  <div class="d-flex align-center justify-center" style="min-block-size: 100vh;">
+  <div
+    class="d-flex align-center justify-center"
+    style="min-block-size: 100vh;"
+  >
     <VCard
       max-width="500"
       class="pa-6"
diff --git a/apps/app/src/pages/login.vue b/apps/app/src/pages/login.vue
index 5cdce684..cd245461 100644
--- a/apps/app/src/pages/login.vue
+++ b/apps/app/src/pages/login.vue
@@ -135,9 +135,8 @@ function onMfaCancelled() {
 function onSubmit() {
   refVForm.value?.validate()
     .then(({ valid: isValid }) => {
-      if (isValid) {
+      if (isValid)
         handleLogin()
-      }
     })
 }
 </script>
diff --git a/apps/app/src/pages/members/index.vue b/apps/app/src/pages/members/index.vue
index dd45711c..a1bcfa3f 100644
--- a/apps/app/src/pages/members/index.vue
+++ b/apps/app/src/pages/members/index.vue
@@ -17,6 +17,7 @@ const orgId = computed(() => orgStore.activeOrganisationId ?? '')
 
 const isOrgAdmin = computed(() => {
   const role = authStore.currentOrganisation?.role
+
   return role === 'org_admin' || authStore.isSuperAdmin
 })
 
@@ -59,8 +60,10 @@ const headers = computed(() => {
     { title: 'E-mailadres', key: 'email', sortable: true },
     { title: 'Rol', key: 'role', sortable: true },
   ]
+
   if (isOrgAdmin.value)
     h.push({ title: 'Acties', key: 'actions', sortable: false, align: 'end' })
+
   return h
 })
 
@@ -92,6 +95,7 @@ function formatDate(iso: string): string {
   const d = new Date(iso)
   const date = d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
   const time = d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
+
   return `${date} om ${time} uur`
 }
 
@@ -102,6 +106,7 @@ function onRoleChange(userId: string, newRole: OrganisationRole) {
       onSuccess: () => showSnackbar('Rol bijgewerkt'),
       onError: (err: unknown) => {
         const data = (err as { response?: { data?: { message?: string } } }).response?.data
+
         showSnackbar(data?.message ?? 'Rol kon niet worden bijgewerkt', 'error')
       },
     },
@@ -114,7 +119,8 @@ function openRemoveDialog(member: Member) {
 }
 
 function confirmRemove() {
-  if (!memberToRemove.value) return
+  if (!memberToRemove.value)
+    return
 
   removeMember(memberToRemove.value.id, {
     onSuccess: () => {
@@ -124,6 +130,7 @@ function confirmRemove() {
     },
     onError: (err: unknown) => {
       const data = (err as { response?: { data?: { message?: string } } }).response?.data
+
       showSnackbar(data?.message ?? 'Lid kon niet worden verwijderd', 'error')
     },
   })
@@ -135,7 +142,8 @@ function openRevokeDialog(invitation: { id: string; email: string }) {
 }
 
 function confirmRevoke() {
-  if (!invitationToRevoke.value) return
+  if (!invitationToRevoke.value)
+    return
 
   revokeInvitation(invitationToRevoke.value.id, {
     onSuccess: () => {
@@ -145,6 +153,7 @@ function confirmRevoke() {
     },
     onError: (err: unknown) => {
       const data = (err as { response?: { data?: { message?: string } } }).response?.data
+
       showSnackbar(data?.message ?? 'Uitnodiging kon niet worden ingetrokken', 'error')
     },
   })
@@ -169,7 +178,7 @@ function confirmRevoke() {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/organisation/companies.vue b/apps/app/src/pages/organisation/companies.vue
index a7687344..638d7ba9 100644
--- a/apps/app/src/pages/organisation/companies.vue
+++ b/apps/app/src/pages/organisation/companies.vue
@@ -45,12 +45,12 @@ const typeColor: Record<string, string> = {
 const filteredCompanies = computed(() => {
   let result = companies.value ?? []
 
-  if (filterType.value) {
+  if (filterType.value)
     result = result.filter(c => c.type === filterType.value)
-  }
 
   if (search.value) {
     const q = search.value.toLowerCase()
+
     result = result.filter(c => c.name.toLowerCase().includes(q))
   }
 
@@ -92,7 +92,8 @@ function onDeleteConfirm(company: Company) {
 }
 
 function onDeleteExecute() {
-  if (!deletingCompany.value) return
+  if (!deletingCompany.value)
+    return
   const name = deletingCompany.value.name
 
   deleteCompany(deletingCompany.value.id, {
@@ -129,7 +130,7 @@ function onSaved() {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/organisation/index.vue b/apps/app/src/pages/organisation/index.vue
index a6b3358e..0ac93292 100644
--- a/apps/app/src/pages/organisation/index.vue
+++ b/apps/app/src/pages/organisation/index.vue
@@ -10,6 +10,7 @@ const router = useRouter()
 const { data: organisation, isLoading: orgLoading, isError: orgError, refetch: refetchOrg } = useMyOrganisation()
 
 const orgId = computed(() => organisation.value?.id ?? '')
+
 const {
   data: stats,
   isLoading: statsLoading,
@@ -19,6 +20,7 @@ const {
 
 const isOrgAdmin = computed(() => {
   const role = authStore.currentOrganisation?.role
+
   return role === 'org_admin' || authStore.isSuperAdmin
 })
 
@@ -33,7 +35,9 @@ const isEditDialogOpen = ref(false)
 
 const activeSubtitle = computed(() => {
   const active = stats.value?.active_events_count ?? 0
-  if (active > 0) return `${active} actief`
+  if (active > 0)
+    return `${active} actief`
+
   return 'Nog geen actieve evenementen'
 })
 
@@ -56,22 +60,30 @@ function goToEvents() {
 }
 
 function formatRelativeTime(iso: string | null): string {
-  if (!iso) return ''
+  if (!iso)
+    return ''
   const date = new Date(iso)
   const diffMs = Date.now() - date.getTime()
   const diffSec = Math.round(diffMs / 1000)
-  if (diffSec < 60) return 'zojuist'
+  if (diffSec < 60)
+    return 'zojuist'
   const diffMin = Math.round(diffSec / 60)
-  if (diffMin < 60) return `${diffMin} min geleden`
+  if (diffMin < 60)
+    return `${diffMin} min geleden`
   const diffHr = Math.round(diffMin / 60)
-  if (diffHr < 24) return `${diffHr} uur geleden`
+  if (diffHr < 24)
+    return `${diffHr} uur geleden`
   const diffDays = Math.round(diffHr / 24)
-  if (diffDays < 7) return `${diffDays} dag${diffDays === 1 ? '' : 'en'} geleden`
+  if (diffDays < 7)
+    return `${diffDays} dag${diffDays === 1 ? '' : 'en'} geleden`
+
   return date.toLocaleDateString('nl-NL', { day: 'numeric', month: 'short', year: 'numeric' })
 }
 
 function avatarInitials(name: string | null | undefined): string {
-  if (!name) return '?'
+  if (!name)
+    return '?'
+
   return name
     .split(' ')
     .filter(Boolean)
@@ -82,6 +94,7 @@ function avatarInitials(name: string | null | undefined): string {
 
 function describeActivity(entry: ActivityLogEntry): string {
   const changed = Object.keys(entry.properties?.attributes ?? {})
+
   const labelMap: Record<string, string> = {
     name: 'naam',
     slug: 'slug',
@@ -90,8 +103,11 @@ function describeActivity(entry: ActivityLogEntry): string {
     phone: 'telefoonnummer',
     website: 'website',
   }
-  if (changed.length === 0) return entry.description
+
+  if (changed.length === 0)
+    return entry.description
   const fields = changed.map(f => labelMap[f] ?? f).join(', ')
+
   return `Wijzigde ${fields}`
 }
 </script>
@@ -114,7 +130,7 @@ function describeActivity(entry: ActivityLogEntry): string {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetchOrg()"
+          @click="refetchOrg"
         >
           Opnieuw proberen
         </VBtn>
@@ -179,7 +195,7 @@ function describeActivity(entry: ActivityLogEntry): string {
           <VBtn
             variant="text"
             size="small"
-            @click="refetchStats()"
+            @click="refetchStats"
           >
             Opnieuw proberen
           </VBtn>
@@ -450,7 +466,7 @@ function describeActivity(entry: ActivityLogEntry): string {
                 <VBtn
                   variant="text"
                   size="small"
-                  @click="refetchStats()"
+                  @click="refetchStats"
                 >
                   Opnieuw proberen
                 </VBtn>
diff --git a/apps/app/src/pages/organisation/settings.vue b/apps/app/src/pages/organisation/settings.vue
index 33fad81e..9bf386ce 100644
--- a/apps/app/src/pages/organisation/settings.vue
+++ b/apps/app/src/pages/organisation/settings.vue
@@ -61,12 +61,11 @@ const legacyGeneralKeys = ['general', 'algemeen', 'gevaarlijke-acties']
 
 onMounted(() => {
   const tab = route.query.tab as string | undefined
-  if (tab === 'general' || tab === 'algemeen') {
+  if (tab === 'general' || tab === 'algemeen')
     router.replace({ path: '/organisation' })
-  }
-  else if (tab === 'gevaarlijke-acties') {
+
+  else if (tab === 'gevaarlijke-acties')
     router.replace({ query: { tab: 'danger-zone' } })
-  }
 })
 
 const activeKey = computed({
@@ -74,6 +73,7 @@ const activeKey = computed({
     const tab = route.query.tab as string | undefined
     if (!tab || legacyGeneralKeys.includes(tab))
       return defaultKey
+
     return allKeys.includes(tab) ? tab : defaultKey
   },
   set: (key: string) => {
diff --git a/apps/app/src/pages/platform/activity-log/index.vue b/apps/app/src/pages/platform/activity-log/index.vue
index 9bc15ad7..6d1a0329 100644
--- a/apps/app/src/pages/platform/activity-log/index.vue
+++ b/apps/app/src/pages/platform/activity-log/index.vue
@@ -28,12 +28,11 @@ const totalItems = computed(() => data.value?.meta?.total ?? 0)
 const expandedRows = ref<Set<number>>(new Set())
 
 function toggleRow(id: number) {
-  if (expandedRows.value.has(id)) {
+  if (expandedRows.value.has(id))
     expandedRows.value.delete(id)
-  }
-  else {
+
+  else
     expandedRows.value.add(id)
-  }
 }
 
 const logNameOptions = [
@@ -61,8 +60,10 @@ function formatDateTime(iso: string): string {
 }
 
 function shortenSubjectType(type: string | null): string {
-  if (!type) return '-'
+  if (!type)
+    return '-'
   const parts = type.split('\\')
+
   return parts[parts.length - 1]
 }
 
@@ -101,7 +102,7 @@ function onUpdateOptions(options: { page: number }) {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/platform/index.vue b/apps/app/src/pages/platform/index.vue
index 7dbbd26a..a39e12d8 100644
--- a/apps/app/src/pages/platform/index.vue
+++ b/apps/app/src/pages/platform/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePlatformStats, useAdminActivityLog } from '@/composables/api/useAdmin'
+import { useAdminActivityLog, usePlatformStats } from '@/composables/api/useAdmin'
 import type { BillingStatus } from '@/types/admin'
 
 definePage({
@@ -23,7 +23,8 @@ const billingStatusColor: Record<BillingStatus, string> = {
 }
 
 const statCards = computed(() => {
-  if (!stats.value) return []
+  if (!stats.value)
+    return []
 
   return [
     {
@@ -68,8 +69,10 @@ function formatDateTime(iso: string): string {
 }
 
 function shortenSubjectType(type: string | null): string {
-  if (!type) return '-'
+  if (!type)
+    return '-'
   const parts = type.split('\\')
+
   return parts[parts.length - 1]
 }
 </script>
@@ -103,7 +106,7 @@ function shortenSubjectType(type: string | null): string {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetchStats()"
+          @click="refetchStats"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/platform/organisations/[id].vue b/apps/app/src/pages/platform/organisations/[id].vue
index 42c47def..7cbb1934 100644
--- a/apps/app/src/pages/platform/organisations/[id].vue
+++ b/apps/app/src/pages/platform/organisations/[id].vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
   useAdminOrganisation,
-  useUpdateAdminOrganisation,
   useDeleteAdminOrganisation,
+  useUpdateAdminOrganisation,
 } from '@/composables/api/useAdmin'
 import {
   useInviteMember,
@@ -76,6 +76,7 @@ const memberHeaders = computed(() => {
     { title: 'Rol', key: 'role', sortable: true },
     { title: 'Acties', key: 'actions', sortable: false, align: 'end' },
   ]
+
   return headers
 })
 
@@ -101,6 +102,7 @@ const tabs = [
 const activeTab = computed({
   get: () => {
     const tab = route.query.tab as string
+
     return tabs.some(t => t.value === tab) ? tab : 'algemeen'
   },
   set: (value: string) => {
@@ -114,7 +116,8 @@ const editForm = ref<UpdateAdminOrganisationPayload>({})
 const { mutate: updateOrg, isPending: isUpdating } = useUpdateAdminOrganisation()
 
 function openEditDialog() {
-  if (!org.value) return
+  if (!org.value)
+    return
   editForm.value = {
     name: org.value.name,
     slug: org.value.slug,
@@ -150,7 +153,8 @@ function openDeleteDialog() {
 }
 
 function confirmDelete() {
-  if (!deleteConfirmValid.value) return
+  if (!deleteConfirmValid.value)
+    return
   deleteOrg(orgId.value, {
     onSuccess: () => {
       router.push({ name: 'platform-organisations' })
@@ -160,7 +164,8 @@ function confirmDelete() {
 
 // ─── Open as organiser ─────────────────────────────────────
 function openAsOrganiser() {
-  if (!org.value) return
+  if (!org.value)
+    return
   orgStore.setActiveOrganisation(org.value.id)
   router.push({ name: 'dashboard' })
 }
@@ -188,6 +193,7 @@ function submitInvite() {
       },
       onError: (err: unknown) => {
         const error = err as { response?: { data?: { message?: string } } }
+
         inviteError.value = error.response?.data?.message ?? 'Er is een fout opgetreden.'
       },
     },
@@ -205,7 +211,8 @@ function openRemoveDialog(member: { id: string; full_name: string }) {
 }
 
 function confirmRemove() {
-  if (!memberToRemove.value) return
+  if (!memberToRemove.value)
+    return
   removeMember(memberToRemove.value.id, {
     onSuccess: () => {
       isRemoveDialogOpen.value = false
@@ -240,6 +247,7 @@ function formatDate(iso: string): string {
   const d = new Date(iso)
   const date = d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
   const time = d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
+
   return `${date} om ${time} uur`
 }
 </script>
@@ -262,7 +270,7 @@ function formatDate(iso: string): string {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/platform/organisations/index.vue b/apps/app/src/pages/platform/organisations/index.vue
index d5f2436e..3481d1f3 100644
--- a/apps/app/src/pages/platform/organisations/index.vue
+++ b/apps/app/src/pages/platform/organisations/index.vue
@@ -104,12 +104,13 @@ function onNameInput(name: string) {
 function submitCreate() {
   createError.value = ''
   createOrganisation(createForm.value, {
-    onSuccess: (org) => {
+    onSuccess: org => {
       isCreateDialogOpen.value = false
       router.push({ name: 'platform-organisations-id', params: { id: org.id } })
     },
     onError: (err: unknown) => {
       const error = err as { response?: { data?: { message?: string } } }
+
       createError.value = error.response?.data?.message ?? 'Er is een fout opgetreden.'
     },
   })
@@ -145,7 +146,7 @@ function submitCreate() {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/platform/users/[id].vue b/apps/app/src/pages/platform/users/[id].vue
index 1241e445..ac7069b7 100644
--- a/apps/app/src/pages/platform/users/[id].vue
+++ b/apps/app/src/pages/platform/users/[id].vue
@@ -21,6 +21,7 @@ const userId = computed(() => String((route.params as { id: string }).id))
 const activeTab = computed({
   get: () => {
     const tab = route.query.tab as string
+
     return ['algemeen', 'organisaties'].includes(tab) ? tab : 'algemeen'
   },
   set: (value: string) => {
@@ -48,7 +49,8 @@ const { mutate: updateUser, isPending: isUpdating } = useUpdateAdminUser()
 const showEditSuccess = ref(false)
 
 function openEditDialog() {
-  if (!user.value) return
+  if (!user.value)
+    return
   editForm.value = {
     first_name: user.value.first_name,
     last_name: user.value.last_name,
@@ -129,7 +131,7 @@ function getInitials(name: string): string {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/platform/users/index.vue b/apps/app/src/pages/platform/users/index.vue
index 7f4d9918..378ec13e 100644
--- a/apps/app/src/pages/platform/users/index.vue
+++ b/apps/app/src/pages/platform/users/index.vue
@@ -73,7 +73,8 @@ function openDeleteDialog(user: AdminUser) {
 }
 
 function confirmDelete() {
-  if (!userToDelete.value) return
+  if (!userToDelete.value)
+    return
 
   deleteUser(userToDelete.value.id, {
     onSuccess: () => {
@@ -135,7 +136,7 @@ function onUpdateOptions(options: { page: number; itemsPerPage: number }) {
       <template #append>
         <VBtn
           variant="text"
-          @click="refetch()"
+          @click="refetch"
         >
           Opnieuw proberen
         </VBtn>
diff --git a/apps/app/src/pages/reset-password.vue b/apps/app/src/pages/reset-password.vue
index cf7cc771..4c613001 100644
--- a/apps/app/src/pages/reset-password.vue
+++ b/apps/app/src/pages/reset-password.vue
@@ -31,8 +31,11 @@ const isSubmitting = ref(false)
 const passwordReqsRef = ref<InstanceType<typeof PasswordRequirements>>()
 
 const confirmationError = computed(() => {
-  if (!passwordConfirmation.value) return ''
-  if (password.value !== passwordConfirmation.value) return 'Wachtwoorden komen niet overeen'
+  if (!passwordConfirmation.value)
+    return ''
+  if (password.value !== passwordConfirmation.value)
+    return 'Wachtwoorden komen niet overeen'
+
   return ''
 })
 
@@ -47,15 +50,18 @@ const authThemeImg = useGenerateImageVariant(
   authV2ResetPasswordIllustrationLight,
   authV2ResetPasswordIllustrationDark,
 )
+
 const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
 
 async function onSubmit(): Promise<void> {
   errorMessage.value = ''
   if (!token.value || !email.value) {
     errorMessage.value = 'Ongeldige resetlink. Vraag een nieuwe link aan.'
+
     return
   }
-  if (!canSubmit.value) return
+  if (!canSubmit.value)
+    return
   isSubmitting.value = true
   try {
     await apiClient.post('/auth/reset-password', {
diff --git a/apps/app/src/pages/select-organisation.vue b/apps/app/src/pages/select-organisation.vue
index 3b5cef07..8c8907ed 100644
--- a/apps/app/src/pages/select-organisation.vue
+++ b/apps/app/src/pages/select-organisation.vue
@@ -17,18 +17,22 @@ const orgStore = useOrganisationStore()
 
 function selectOrganisation(orgId: string) {
   orgStore.setActiveOrganisation(orgId)
+
   const redirectTo = route.query.to ? String(route.query.to) : '/dashboard'
+
   router.replace(redirectTo)
 }
 
 // Auto-select if user has exactly one organisation
-if (authStore.organisations.length === 1) {
+if (authStore.organisations.length === 1)
   selectOrganisation(authStore.organisations[0].id)
-}
 </script>
 
 <template>
-  <div class="auth-wrapper bg-surface d-flex align-center justify-center" style="min-height: 100vh;">
+  <div
+    class="auth-wrapper bg-surface d-flex align-center justify-center"
+    style="min-height: 100vh;"
+  >
     <VCard
       :max-width="500"
       class="pa-6"
diff --git a/apps/app/src/pages/verify-email-change.vue b/apps/app/src/pages/verify-email-change.vue
index 3caf8a17..e2cedff2 100644
--- a/apps/app/src/pages/verify-email-change.vue
+++ b/apps/app/src/pages/verify-email-change.vue
@@ -23,6 +23,7 @@ onMounted(async () => {
   if (!token) {
     errorMessage.value = 'Geen verificatietoken gevonden.'
     isVerifying.value = false
+
     return
   }
   try {
@@ -32,6 +33,7 @@ onMounted(async () => {
   }
   catch (error: unknown) {
     const ax = error as { response?: { data?: { errors?: Record<string, string[]>; message?: string } } }
+
     errorMessage.value = ax.response?.data?.errors?.token?.[0]
       ?? ax.response?.data?.errors?.new_email?.[0]
       ?? ax.response?.data?.message
@@ -44,8 +46,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="auth-wrapper d-flex align-center justify-center pa-4 bg-surface" style="min-height: 100vh;">
-    <div class="auth-logo d-flex align-center gap-x-3 position-absolute" style="inset-block-start: 2rem; inset-inline-start: 2.5rem;">
+  <div
+    class="auth-wrapper d-flex align-center justify-center pa-4 bg-surface"
+    style="min-height: 100vh;"
+  >
+    <div
+      class="auth-logo d-flex align-center gap-x-3 position-absolute"
+      style="inset-block-start: 2rem; inset-inline-start: 2.5rem;"
+    >
       <VNodeRenderer :nodes="themeConfig.app.logo" />
       <h1 class="auth-title">
         {{ themeConfig.app.title }}