style(app): apply eslint --fix to Tier 1 (Vue templates)

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/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>

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>

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>

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>

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,

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, {