feat: frontend fase 2 sessies 1-3

- Member management pagina + invite flow
- Persons module met filters, KPI tiles, detail panel
- Event horizontale tabs navigatie (EventTabsNav component)
- Route conflict opgelost
- OrganisationSwitcher verbeterd (collapsed staat WIP)

apps/app/components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     ConfirmDialog: typeof import('./src/components/dialogs/ConfirmDialog.vue')['default']
     CreateAppDialog: typeof import('./src/components/dialogs/CreateAppDialog.vue')['default']
     CreateEventDialog: typeof import('./src/components/events/CreateEventDialog.vue')['default']
+    CreatePersonDialog: typeof import('./src/components/persons/CreatePersonDialog.vue')['default']
     CustomCheckboxes: typeof import('./src/@core/components/app-form-elements/CustomCheckboxes.vue')['default']
     CustomCheckboxesWithIcon: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithIcon.vue')['default']
     CustomCheckboxesWithImage: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithImage.vue')['default']
@@ -42,14 +43,17 @@ declare module 'vue' {
     EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
     EditMemberRoleDialog: typeof import('./src/components/members/EditMemberRoleDialog.vue')['default']
     EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
+    EditPersonDialog: typeof import('./src/components/persons/EditPersonDialog.vue')['default']
     EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
     ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
+    EventTabsNav: typeof import('./src/components/events/EventTabsNav.vue')['default']
     I18n: typeof import('./src/@core/components/I18n.vue')['default']
     InviteMemberDialog: typeof import('./src/components/members/InviteMemberDialog.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
     OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
     PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
+    PersonDetailPanel: typeof import('./src/components/persons/PersonDetailPanel.vue')['default']
     ProductDescriptionEditor: typeof import('./src/@core/components/ProductDescriptionEditor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

apps/app/src/components/events/EventTabsNav.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useEventDetail } from '@/composables/api/useEvents'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import EditEventDialog from '@/components/events/EditEventDialog.vue'
+import type { EventStatus } from '@/types/event'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const eventId = computed(() => String((route.params as { id: string }).id))
+
+const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
+
+// Set active event in store
+watch(eventId, (id) => {
+  if (id) orgStore.setActiveEvent(id)
+}, { immediate: true })
+
+const isEditDialogOpen = ref(false)
+
+const statusColor: Record<EventStatus, string> = {
+  draft: 'default',
+  published: 'info',
+  registration_open: 'cyan',
+  buildup: 'warning',
+  showday: 'success',
+  teardown: 'warning',
+  closed: 'error',
+}
+
+const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso))
+}
+
+const tabs = [
+  { label: 'Overzicht', icon: 'tabler-layout-dashboard', route: 'events-id' },
+  { label: 'Personen', icon: 'tabler-users', route: 'events-id-persons' },
+  { label: 'Secties & Shifts', icon: 'tabler-layout-grid', route: 'events-id-sections' },
+  { label: 'Artiesten', icon: 'tabler-music', route: 'events-id-artists' },
+  { label: 'Briefings', icon: 'tabler-mail', route: 'events-id-briefings' },
+  { label: 'Instellingen', icon: 'tabler-settings', route: 'events-id-settings' },
+]
+
+const activeTab = computed(() => {
+  const name = route.name as string
+  return tabs.find(t => name === t.route || name?.startsWith(`${t.route}-`))?.route ?? 'events-id'
+})
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <VSkeletonLoader
+      v-if="isLoading"
+      type="card"
+    />
+
+    <!-- Error -->
+    <VAlert
+      v-else-if="isError"
+      type="error"
+      class="mb-4"
+    >
+      Kon evenement niet laden.
+      <template #append>
+        <VBtn
+          variant="text"
+          @click="refetch()"
+        >
+          Opnieuw proberen
+        </VBtn>
+      </template>
+    </VAlert>
+
+    <template v-else-if="event">
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div class="d-flex align-center gap-x-3">
+          <VBtn
+            icon="tabler-arrow-left"
+            variant="text"
+            :to="{ name: 'events' }"
+          />
+          <h4 class="text-h4">
+            {{ event.name }}
+          </h4>
+          <VChip
+            :color="statusColor[event.status]"
+            size="small"
+          >
+            {{ event.status }}
+          </VChip>
+          <span class="text-body-1 text-disabled">
+            {{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
+          </span>
+        </div>
+        <VBtn
+          prepend-icon="tabler-edit"
+          @click="isEditDialogOpen = true"
+        >
+          Bewerken
+        </VBtn>
+      </div>
+
+      <!-- Horizontal tabs -->
+      <VTabs
+        :model-value="activeTab"
+        class="mb-6"
+      >
+        <VTab
+          v-for="tab in tabs"
+          :key="tab.route"
+          :value="tab.route"
+          :prepend-icon="tab.icon"
+          :to="{ name: tab.route, params: { id: eventId } }"
+        >
+          {{ tab.label }}
+        </VTab>
+      </VTabs>
+
+      <!-- Tab content -->
+      <slot :event="event" />
+
+      <EditEventDialog
+        v-model="isEditDialogOpen"
+        :event="event"
+        :org-id="orgId"
+      />
+    </template>
+  </div>
+</template>

apps/app/src/components/layout/OrganisationSwitcher.vue

@@ -1,57 +1,105 @@
 <script setup lang="ts">
+import { layoutConfig } from '@layouts'
+import { useLayoutConfigStore } from '@layouts/stores/config'
 import { useAuthStore } from '@/stores/useAuthStore'
 
 const authStore = useAuthStore()
+const configStore = useLayoutConfigStore()
+const hideTitleAndBadge = configStore.isVerticalNavMini()
 
-const hasMultipleOrgs = computed(() => authStore.organisations.length > 1)
-const currentOrgName = computed(() => authStore.currentOrganisation?.name ?? 'Geen organisatie')
+const organisations = computed(() => authStore.organisations)
+const activeOrg = computed(() => authStore.currentOrganisation)
+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
+})
+
+const isMenuOpen = ref(false)
+
+const roleColor = (role: string) => ({
+  org_admin: 'primary',
+  org_member: 'info',
+  event_manager: 'success',
+  staff_coordinator: 'warning',
+  volunteer_coordinator: 'secondary',
+}[role] ?? 'default')
+
+function toggleMenu() {
+  if (hasMultiple.value)
+    isMenuOpen.value = !isMenuOpen.value
+}
+
+function selectOrg(id: string) {
+  authStore.setActiveOrganisation(id)
+  isMenuOpen.value = false
+}
 </script>
 
 <template>
-  <div class="organisation-switcher mx-4 mb-2">
-    <!-- Single org: just show the name -->
-    <div
-      v-if="!hasMultipleOrgs"
-      class="d-flex align-center gap-x-2 pa-2"
+  <li
+    class="nav-link"
+    style="margin-block-end: 8px;"
   >
-      <VIcon
-        icon="tabler-building"
-        size="20"
-        color="primary"
-      />
-      <span class="text-body-2 font-weight-medium text-truncate">
-        {{ currentOrgName }}
-      </span>
-    </div>
-
-    <!-- Multiple orgs: dropdown -->
-    <VBtn
-      v-else
-      variant="tonal"
-      color="primary"
-      block
-      class="text-none justify-start"
-      prepend-icon="tabler-building"
-    >
-      <span class="text-truncate">{{ currentOrgName }}</span>
-
     <VMenu
-        activator="parent"
-        width="250"
-        location="bottom start"
+      v-model="isMenuOpen"
+      :location="hideTitleAndBadge ? 'end' : 'bottom'"
+      :offset="hideTitleAndBadge ? 8 : 0"
+      :width="hideTitleAndBadge ? undefined : 260"
+      :min-width="hideTitleAndBadge ? 220 : undefined"
+      :disabled="!hasMultiple"
     >
+      <template #activator="{ props: menuProps }">
+        <a
+          v-bind="hasMultiple ? menuProps : undefined"
+          :class="{ 'cursor-pointer': hasMultiple }"
+        >
+          <Component
+            :is="layoutConfig.app.iconRenderer || 'div'"
+            v-bind="{ icon: 'tabler-building' }"
+            class="nav-item-icon"
+          />
+          <TransitionGroup name="transition-slide-x">
+            <span
+              v-show="!hideTitleAndBadge"
+              key="title"
+              class="nav-item-title"
+            >
+              {{ activeOrgName }}
+            </span>
+            <Component
+              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)',
+                'font-size': '18px',
+                'margin-inline-start': 'auto',
+              }"
+            />
+          </TransitionGroup>
+        </a>
+      </template>
       <VList density="compact">
         <VListItem
-            v-for="org in authStore.organisations"
+          v-for="org in organisations"
           :key="org.id"
-            :active="org.id === authStore.currentOrganisation?.id"
-            @click="authStore.setActiveOrganisation(org.id)"
+          :active="org.id === activeOrg?.id"
+          active-color="primary"
+          @click="selectOrg(org.id)"
         >
           <VListItemTitle>{{ org.name }}</VListItemTitle>
           <template #append>
             <VChip
+              :color="roleColor(org.role)"
               size="x-small"
-                variant="text"
+              variant="tonal"
+              label
             >
               {{ org.role }}
             </VChip>
@@ -59,6 +107,5 @@ const currentOrgName = computed(() => authStore.currentOrganisation?.name ?? 'Ge
         </VListItem>
       </VList>
     </VMenu>
-    </VBtn>
-  </div>
+  </li>
 </template>

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

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useCreatePerson } from '@/composables/api/usePersons'
+import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
+import { requiredValidator, emailValidator } from '@core/utils/validators'
+import type { PersonStatus } from '@/types/person'
+
+const props = defineProps<{
+  eventId: string
+  orgId: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const eventIdRef = computed(() => props.eventId)
+const orgIdRef = computed(() => props.orgId)
+
+const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
+
+const form = ref({
+  crowd_type_id: '',
+  name: '',
+  email: '',
+  phone: '',
+  company_id: '',
+  status: 'pending' as PersonStatus,
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+const successName = ref('')
+
+const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
+
+const crowdTypeItems = computed(() =>
+  crowdTypes.value?.map(ct => ({
+    title: ct.name,
+    value: ct.id,
+  })) ?? [],
+)
+
+const statusOptions: { title: string; value: PersonStatus }[] = [
+  { title: 'Pending', value: 'pending' },
+  { title: 'Uitgenodigd', value: 'invited' },
+  { title: 'Aangemeld', value: 'applied' },
+]
+
+function resetForm() {
+  form.value = {
+    crowd_type_id: '',
+    name: '',
+    email: '',
+    phone: '',
+    company_id: '',
+    status: 'pending',
+  }
+  errors.value = {}
+  refVForm.value?.resetValidation()
+}
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    const payload = {
+      crowd_type_id: form.value.crowd_type_id,
+      name: form.value.name,
+      email: form.value.email,
+      ...(form.value.phone ? { phone: form.value.phone } : {}),
+      ...(form.value.company_id ? { company_id: form.value.company_id } : {}),
+      status: form.value.status,
+    }
+
+    createPerson(payload, {
+      onSuccess: () => {
+        successName.value = form.value.name
+        modelValue.value = false
+        showSuccess.value = true
+        resetForm()
+      },
+      onError: (err: any) => {
+        const data = err.response?.data
+        if (data?.errors) {
+          errors.value = Object.fromEntries(
+            Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
+          )
+        }
+        else if (data?.message) {
+          errors.value = { name: data.message }
+        }
+      },
+    })
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="550"
+    @after-leave="resetForm"
+  >
+    <VCard title="Persoon toevoegen">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VRow>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.crowd_type_id"
+                label="Crowd Type"
+                :items="crowdTypeItems"
+                :rules="[requiredValidator]"
+                :error-messages="errors.crowd_type_id"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.email"
+                label="E-mailadres"
+                type="email"
+                :rules="[requiredValidator, emailValidator]"
+                :error-messages="errors.email"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.phone"
+                label="Telefoonnummer"
+                :error-messages="errors.phone"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTooltip location="top">
+                <template #activator="{ props: tooltipProps }">
+                  <div v-bind="tooltipProps">
+                    <AppSelect
+                      model-value=""
+                      label="Bedrijf"
+                      :items="[]"
+                      disabled
+                    />
+                  </div>
+                </template>
+                Komt beschikbaar zodra bedrijven zijn aangemaakt
+              </VTooltip>
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.status"
+                label="Status"
+                :items="statusOptions"
+                :error-messages="errors.status"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Toevoegen
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    {{ successName }} toegevoegd
+  </VSnackbar>
+</template>

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

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useUpdatePerson } from '@/composables/api/usePersons'
+import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
+import { requiredValidator, emailValidator } from '@core/utils/validators'
+import type { Person, PersonStatus } from '@/types/person'
+
+const props = defineProps<{
+  person: Person
+  eventId: string
+  orgId: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const eventIdRef = computed(() => props.eventId)
+const orgIdRef = computed(() => props.orgId)
+
+const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
+const { mutate: updatePerson, isPending } = useUpdatePerson(eventIdRef)
+
+const form = ref({
+  crowd_type_id: '',
+  name: '',
+  email: '',
+  phone: '',
+  status: 'pending' as PersonStatus,
+  admin_notes: '',
+  is_blacklisted: false,
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+
+watch(() => props.person, (p) => {
+  form.value = {
+    crowd_type_id: p.crowd_type?.id ?? '',
+    name: p.name,
+    email: p.email,
+    phone: p.phone ?? '',
+    status: p.status,
+    admin_notes: p.admin_notes ?? '',
+    is_blacklisted: p.is_blacklisted,
+  }
+}, { immediate: true })
+
+const crowdTypeItems = computed(() =>
+  crowdTypes.value?.map(ct => ({
+    title: ct.name,
+    value: ct.id,
+  })) ?? [],
+)
+
+const statusOptions: { title: string; value: PersonStatus }[] = [
+  { title: 'Pending', value: 'pending' },
+  { title: 'Uitgenodigd', value: 'invited' },
+  { title: 'Aangemeld', value: 'applied' },
+  { title: 'Goedgekeurd', value: 'approved' },
+  { title: 'Afgewezen', value: 'rejected' },
+  { title: 'No-show', value: 'no_show' },
+]
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    updatePerson({
+      id: props.person.id,
+      crowd_type_id: form.value.crowd_type_id,
+      name: form.value.name,
+      email: form.value.email,
+      phone: form.value.phone || undefined,
+      status: form.value.status,
+      admin_notes: form.value.admin_notes || undefined,
+      is_blacklisted: form.value.is_blacklisted,
+    }, {
+      onSuccess: () => {
+        modelValue.value = false
+        showSuccess.value = true
+      },
+      onError: (err: any) => {
+        const data = err.response?.data
+        if (data?.errors) {
+          errors.value = Object.fromEntries(
+            Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
+          )
+        }
+        else if (data?.message) {
+          errors.value = { name: data.message }
+        }
+      },
+    })
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="550"
+  >
+    <VCard title="Persoon bewerken">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VRow>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.crowd_type_id"
+                label="Crowd Type"
+                :items="crowdTypeItems"
+                :rules="[requiredValidator]"
+                :error-messages="errors.crowd_type_id"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.email"
+                label="E-mailadres"
+                type="email"
+                :rules="[requiredValidator, emailValidator]"
+                :error-messages="errors.email"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.phone"
+                label="Telefoonnummer"
+                :error-messages="errors.phone"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppSelect
+                v-model="form.status"
+                label="Status"
+                :items="statusOptions"
+                :error-messages="errors.status"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <VSwitch
+                v-model="form.is_blacklisted"
+                label="Geblokkeerd"
+                color="error"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextarea
+                v-model="form.admin_notes"
+                label="Admin notities"
+                variant="outlined"
+                rows="3"
+                :error-messages="errors.admin_notes"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Opslaan
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    Persoon bijgewerkt
+  </VSnackbar>
+</template>

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

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { usePersonDetail, useUpdatePerson } from '@/composables/api/usePersons'
+import type { Person, PersonStatus } from '@/types/person'
+
+const props = defineProps<{
+  eventId: string
+  orgId: string
+  personId: string | null
+}>()
+
+const emit = defineEmits<{
+  edit: [person: Person]
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const eventIdRef = computed(() => props.eventId)
+const personIdRef = computed(() => props.personId ?? '')
+
+const { data: person, isLoading } = usePersonDetail(eventIdRef, personIdRef)
+const { mutate: updatePerson } = useUpdatePerson(eventIdRef)
+
+const activeTab = ref('info')
+
+const statusColor: Record<PersonStatus, string> = {
+  pending: 'default',
+  applied: 'info',
+  invited: 'cyan',
+  approved: 'success',
+  rejected: 'error',
+  no_show: 'warning',
+}
+
+const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso))
+}
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map(p => p[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+// Admin notes inline edit
+const adminNotes = ref('')
+
+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
+
+  updatePerson({
+    id: person.value.id,
+    admin_notes: adminNotes.value || undefined,
+  })
+}
+
+// Blacklisted toggle
+function onBlacklistToggle(val: boolean | null) {
+  if (!person.value) return
+
+  updatePerson({
+    id: person.value.id,
+    is_blacklisted: !!val,
+  })
+}
+</script>
+
+<template>
+  <VNavigationDrawer
+    v-model="modelValue"
+    location="end"
+    temporary
+    :width="480"
+  >
+    <!-- Loading -->
+    <div
+      v-if="isLoading"
+      class="pa-6"
+    >
+      <VSkeletonLoader type="article" />
+    </div>
+
+    <template v-else-if="person">
+      <!-- Header -->
+      <div class="pa-6">
+        <div class="d-flex justify-space-between align-start mb-4">
+          <div class="d-flex align-center gap-x-4">
+            <VAvatar
+              size="56"
+              color="primary"
+              variant="tonal"
+            >
+              <span class="text-h6">{{ getInitials(person.name) }}</span>
+            </VAvatar>
+            <div>
+              <h5 class="text-h5 mb-1">
+                {{ person.name }}
+              </h5>
+              <p class="text-body-2 text-disabled mb-2">
+                {{ person.email }}
+              </p>
+              <div class="d-flex gap-x-2">
+                <VChip
+                  :color="statusColor[person.status]"
+                  size="small"
+                >
+                  {{ person.status }}
+                </VChip>
+                <VChip
+                  v-if="person.crowd_type"
+                  :color="person.crowd_type.color"
+                  size="small"
+                >
+                  {{ person.crowd_type.name }}
+                </VChip>
+              </div>
+            </div>
+          </div>
+          <div class="d-flex gap-x-1">
+            <VBtn
+              icon="tabler-edit"
+              variant="text"
+              size="small"
+              title="Bewerken"
+              @click="emit('edit', person)"
+            />
+            <VBtn
+              icon="tabler-x"
+              variant="text"
+              size="small"
+              title="Sluiten"
+              @click="modelValue = false"
+            />
+          </div>
+        </div>
+      </div>
+
+      <VDivider />
+
+      <!-- Tabs -->
+      <VTabs
+        v-model="activeTab"
+        class="px-6"
+      >
+        <VTab value="info">
+          Informatie
+        </VTab>
+        <VTab value="shifts">
+          Shifts
+        </VTab>
+        <VTab value="accreditation">
+          Accreditatie
+        </VTab>
+      </VTabs>
+
+      <VDivider />
+
+      <VTabsWindow
+        v-model="activeTab"
+        class="pa-6"
+      >
+        <!-- Tab: Informatie -->
+        <VTabsWindowItem value="info">
+          <VList class="pa-0">
+            <VListItem>
+              <template #prepend>
+                <VIcon
+                  icon="tabler-phone"
+                  class="me-3"
+                />
+              </template>
+              <VListItemTitle>Telefoonnummer</VListItemTitle>
+              <VListItemSubtitle>{{ person.phone ?? 'Niet opgegeven' }}</VListItemSubtitle>
+            </VListItem>
+
+            <VListItem>
+              <template #prepend>
+                <VIcon
+                  icon="tabler-building"
+                  class="me-3"
+                />
+              </template>
+              <VListItemTitle>Bedrijf</VListItemTitle>
+              <VListItemSubtitle>{{ person.company?.name ?? 'Geen bedrijf' }}</VListItemSubtitle>
+            </VListItem>
+
+            <VListItem>
+              <template #prepend>
+                <VIcon
+                  icon="tabler-calendar"
+                  class="me-3"
+                />
+              </template>
+              <VListItemTitle>Aangemaakt op</VListItemTitle>
+              <VListItemSubtitle>{{ formatDate(person.created_at) }}</VListItemSubtitle>
+            </VListItem>
+          </VList>
+
+          <VDivider class="my-4" />
+
+          <!-- Admin notes -->
+          <h6 class="text-h6 mb-2">
+            Admin notities
+          </h6>
+          <VTextarea
+            v-model="adminNotes"
+            variant="outlined"
+            rows="3"
+            placeholder="Notities over deze persoon..."
+            @blur="onAdminNotesBlur"
+          />
+
+          <VDivider class="my-4" />
+
+          <!-- Blacklisted toggle -->
+          <VSwitch
+            :model-value="person.is_blacklisted"
+            label="Geblokkeerd"
+            color="error"
+            @update:model-value="onBlacklistToggle"
+          />
+        </VTabsWindowItem>
+
+        <!-- Tab: Shifts (placeholder) -->
+        <VTabsWindowItem value="shifts">
+          <VCard
+            variant="outlined"
+            class="text-center pa-8"
+          >
+            <VIcon
+              icon="tabler-clock"
+              size="48"
+              class="mb-4 text-disabled"
+            />
+            <p class="text-body-1 text-disabled">
+              Shift toewijzingen worden hier getoond zodra de shift planning module beschikbaar is.
+            </p>
+          </VCard>
+        </VTabsWindowItem>
+
+        <!-- Tab: Accreditatie (placeholder) -->
+        <VTabsWindowItem value="accreditation">
+          <VCard
+            variant="outlined"
+            class="text-center pa-8"
+          >
+            <VIcon
+              icon="tabler-id-badge-2"
+              size="48"
+              class="mb-4 text-disabled"
+            />
+            <p class="text-body-1 text-disabled">
+              Accreditatie wordt hier getoond zodra de accreditatie module beschikbaar is.
+            </p>
+          </VCard>
+        </VTabsWindowItem>
+      </VTabsWindow>
+    </template>
+  </VNavigationDrawer>
+</template>

apps/app/src/composables/api/useCrowdTypes.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type { CrowdType } from '@/types/organisation'
+
+interface PaginatedResponse<T> {
+  data: T[]
+  links: Record<string, string | null>
+  meta: {
+    current_page: number
+    per_page: number
+    total: number
+    last_page: number
+  }
+}
+
+export function useCrowdTypeList(orgId: Ref<string>) {
+  return useQuery({
+    queryKey: ['crowd-types', orgId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<PaginatedResponse<CrowdType>>(
+        `/organisations/${orgId.value}/crowd-types`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!orgId.value,
+    staleTime: Infinity,
+  })
+}

apps/app/src/composables/api/usePersons.ts

@@ -0,0 +1,129 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type { CreatePersonPayload, Person, UpdatePersonPayload } from '@/types/person'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+interface PaginatedResponse<T> {
+  data: T[]
+  links: Record<string, string | null>
+  meta: {
+    current_page: number
+    per_page: number
+    total: number
+    last_page: number
+    total_approved: number
+    total_pending: number
+    total_rejected: number
+  }
+}
+
+export function usePersonList(
+  eventId: Ref<string>,
+  filters?: Ref<{ crowd_type_id?: string; status?: string }>,
+) {
+  return useQuery({
+    queryKey: ['persons', eventId, filters],
+    queryFn: async () => {
+      const params: Record<string, string> = {}
+      if (filters?.value?.crowd_type_id)
+        params.crowd_type_id = filters.value.crowd_type_id
+      if (filters?.value?.status)
+        params.status = filters.value.status
+
+      const { data } = await apiClient.get<PaginatedResponse<Person>>(
+        `/events/${eventId.value}/persons`,
+        { params },
+      )
+
+      return data
+    },
+    enabled: () => !!eventId.value,
+  })
+}
+
+export function usePersonDetail(eventId: Ref<string>, id: Ref<string>) {
+  return useQuery({
+    queryKey: ['persons', eventId, 'detail', id],
+    queryFn: async () => {
+      const { data } = await apiClient.get<ApiResponse<Person>>(
+        `/events/${eventId.value}/persons/${id.value}`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!eventId.value && !!id.value,
+  })
+}
+
+export function useCreatePerson(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: CreatePersonPayload) => {
+      const { data } = await apiClient.post<ApiResponse<Person>>(
+        `/events/${eventId.value}/persons`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
+    },
+  })
+}
+
+export function useUpdatePerson(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: UpdatePersonPayload & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<Person>>(
+        `/events/${eventId.value}/persons/${id}`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value, 'detail', variables.id] })
+    },
+  })
+}
+
+export function useApprovePerson(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const { data } = await apiClient.post<ApiResponse<Person>>(
+        `/events/${eventId.value}/persons/${id}/approve`,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
+    },
+  })
+}
+
+export function useDeletePerson(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/events/${eventId.value}/persons/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
+    },
+  })
+}

apps/app/src/navigation/vertical/index.ts

@@ -1,27 +1,27 @@
 export default [
   {
-    title: "Dashboard",
-    to: { name: "dashboard" },
-    icon: { icon: "tabler-smart-home" },
+    title: 'Dashboard',
+    to: { name: 'dashboard' },
+    icon: { icon: 'tabler-smart-home' },
   },
   {
-    title: "Events",
-    to: { name: "events" },
-    icon: { icon: "tabler-calendar-event" },
+    title: 'Events',
+    to: { name: 'events' },
+    icon: { icon: 'tabler-calendar-event' },
   },
   {
-    heading: "Beheer",
+    heading: 'Beheer',
   },
   {
-    title: "Mijn Organisatie",
-    to: { name: "organisation" },
-    icon: { icon: "tabler-building" },
+    title: 'Mijn Organisatie',
+    to: { name: 'organisation' },
+    icon: { icon: 'tabler-building' },
   },
   {
-    title: "Leden",
-    to: { name: "organisation-members" },
-    icon: { icon: "tabler-users-group" },
-    action: "read",
-    subject: "members",
+    title: 'Leden',
+    to: { name: 'organisation-members' },
+    icon: { icon: 'tabler-users-group' },
+    action: 'read',
+    subject: 'members',
   },
-];
+]

apps/app/src/pages/events/[id].vue

@@ -1,241 +0,0 @@
-<script setup lang="ts">
-import { useEventDetail } from '@/composables/api/useEvents'
-import { useAuthStore } from '@/stores/useAuthStore'
-import { useOrganisationStore } from '@/stores/useOrganisationStore'
-import EditEventDialog from '@/components/events/EditEventDialog.vue'
-import type { EventStatus } from '@/types/event'
-
-definePage({
-  meta: {
-    navActiveLink: 'events',
-  },
-})
-
-const route = useRoute()
-const authStore = useAuthStore()
-const orgStore = useOrganisationStore()
-
-const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
-const eventId = computed(() => String((route.params as { id: string }).id))
-
-const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
-
-const isEditDialogOpen = ref(false)
-const activeTab = ref('details')
-
-// Set active event in store
-watch(eventId, (id) => {
-  if (id) orgStore.setActiveEvent(id)
-}, { immediate: true })
-
-const statusColor: Record<EventStatus, string> = {
-  draft: 'default',
-  published: 'info',
-  registration_open: 'cyan',
-  buildup: 'warning',
-  showday: 'success',
-  teardown: 'warning',
-  closed: 'error',
-}
-
-const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-})
-
-function formatDate(iso: string) {
-  return dateFormatter.format(new Date(iso))
-}
-
-const tiles = [
-  { title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary' },
-  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
-  { title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning' },
-  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
-]
-</script>
-
-<template>
-  <div>
-    <!-- Loading -->
-    <VSkeletonLoader
-      v-if="isLoading"
-      type="card"
-    />
-
-    <!-- Error -->
-    <VAlert
-      v-else-if="isError"
-      type="error"
-      class="mb-4"
-    >
-      Kon evenement niet laden.
-      <template #append>
-        <VBtn
-          variant="text"
-          @click="refetch()"
-        >
-          Opnieuw proberen
-        </VBtn>
-      </template>
-    </VAlert>
-
-    <template v-else-if="event">
-      <!-- Header -->
-      <div class="d-flex justify-space-between align-center mb-6">
-        <div class="d-flex align-center gap-x-3">
-          <VBtn
-            icon="tabler-arrow-left"
-            variant="text"
-            :to="{ name: 'events' }"
-          />
-          <h4 class="text-h4">
-            {{ event.name }}
-          </h4>
-          <VChip
-            :color="statusColor[event.status]"
-            size="small"
-          >
-            {{ event.status }}
-          </VChip>
-          <span class="text-body-1 text-disabled">
-            {{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
-          </span>
-        </div>
-        <VBtn
-          prepend-icon="tabler-edit"
-          @click="isEditDialogOpen = true"
-        >
-          Bewerken
-        </VBtn>
-      </div>
-
-      <!-- Stat tiles -->
-      <VRow class="mb-6">
-        <VCol
-          v-for="tile in tiles"
-          :key="tile.title"
-          cols="12"
-          sm="6"
-          md="3"
-        >
-          <VCard>
-            <VCardText class="d-flex align-center gap-x-4">
-              <VAvatar
-                :color="tile.color"
-                variant="tonal"
-                size="44"
-                rounded
-              >
-                <VIcon
-                  :icon="tile.icon"
-                  size="28"
-                />
-              </VAvatar>
-              <div>
-                <p class="text-body-1 mb-0">
-                  {{ tile.title }}
-                </p>
-                <h4 class="text-h4">
-                  {{ tile.value }}
-                </h4>
-              </div>
-            </VCardText>
-          </VCard>
-        </VCol>
-      </VRow>
-
-      <!-- Tabs -->
-      <VTabs
-        v-model="activeTab"
-        class="mb-6"
-      >
-        <VTab value="details">
-          Details
-        </VTab>
-        <VTab value="settings">
-          Instellingen
-        </VTab>
-      </VTabs>
-
-      <VTabsWindow v-model="activeTab">
-        <!-- Tab: Details -->
-        <VTabsWindowItem value="details">
-          <VCard>
-            <VCardText>
-              <VRow>
-                <VCol
-                  cols="12"
-                  md="3"
-                >
-                  <h6 class="text-h6 mb-1">
-                    Slug
-                  </h6>
-                  <p class="text-body-1 text-disabled mb-0">
-                    {{ event.slug }}
-                  </p>
-                </VCol>
-                <VCol
-                  cols="12"
-                  md="3"
-                >
-                  <h6 class="text-h6 mb-1">
-                    Tijdzone
-                  </h6>
-                  <p class="text-body-1 text-disabled mb-0">
-                    {{ event.timezone }}
-                  </p>
-                </VCol>
-                <VCol
-                  cols="12"
-                  md="3"
-                >
-                  <h6 class="text-h6 mb-1">
-                    Organisatie
-                  </h6>
-                  <p class="text-body-1 text-disabled mb-0">
-                    {{ authStore.currentOrganisation?.name ?? '–' }}
-                  </p>
-                </VCol>
-                <VCol
-                  cols="12"
-                  md="3"
-                >
-                  <h6 class="text-h6 mb-1">
-                    Aangemaakt op
-                  </h6>
-                  <p class="text-body-1 text-disabled mb-0">
-                    {{ formatDate(event.created_at) }}
-                  </p>
-                </VCol>
-              </VRow>
-            </VCardText>
-          </VCard>
-        </VTabsWindowItem>
-
-        <!-- Tab: Instellingen -->
-        <VTabsWindowItem value="settings">
-          <VCard>
-            <VCardText class="text-center pa-8">
-              <VIcon
-                icon="tabler-settings"
-                size="48"
-                class="mb-4 text-disabled"
-              />
-              <p class="text-body-1 text-disabled">
-                Komt in een volgende fase
-              </p>
-            </VCardText>
-          </VCard>
-        </VTabsWindowItem>
-      </VTabsWindow>
-
-      <EditEventDialog
-        v-model="isEditDialogOpen"
-        :event="event"
-        :org-id="orgId"
-      />
-    </template>
-  </div>
-</template>

apps/app/src/pages/events/[id]/artists/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+</script>
+
+<template>
+  <EventTabsNav>
+    <VCard class="ma-4">
+      <VCardText>
+        Deze module is binnenkort beschikbaar.
+      </VCardText>
+    </VCard>
+  </EventTabsNav>
+</template>

apps/app/src/pages/events/[id]/briefings/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+</script>
+
+<template>
+  <EventTabsNav>
+    <VCard class="ma-4">
+      <VCardText>
+        Deze module is binnenkort beschikbaar.
+      </VCardText>
+    </VCard>
+  </EventTabsNav>
+</template>

apps/app/src/pages/events/[id]/index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const eventId = computed(() => String((route.params as { id: string }).id))
+
+const tiles = [
+  { title: 'Personen', value: 0, icon: 'tabler-users', color: 'success', route: 'events-id-persons', enabled: true },
+  { title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary', route: null, enabled: false },
+  { title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning', route: null, enabled: false },
+  { title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info', route: null, enabled: false },
+]
+
+function onTileClick(tile: typeof tiles[number]) {
+  if (tile.enabled && tile.route)
+    router.push({ name: tile.route as 'events-id-persons', params: { id: eventId.value } })
+}
+</script>
+
+<template>
+  <EventTabsNav>
+    <VRow class="mb-6">
+      <VCol
+        v-for="tile in tiles"
+        :key="tile.title"
+        cols="12"
+        sm="6"
+        md="3"
+      >
+        <VCard
+          :class="{ 'cursor-pointer': tile.enabled }"
+          :style="!tile.enabled ? 'opacity: 0.5' : ''"
+          @click="onTileClick(tile)"
+        >
+          <VCardText class="d-flex align-center gap-x-4">
+            <VAvatar
+              :color="tile.color"
+              variant="tonal"
+              size="44"
+              rounded
+            >
+              <VIcon
+                :icon="tile.icon"
+                size="28"
+              />
+            </VAvatar>
+            <div>
+              <p class="text-body-1 mb-0">
+                {{ tile.title }}
+              </p>
+              <h4 class="text-h4">
+                {{ tile.value }}
+              </h4>
+            </div>
+          </VCardText>
+        </VCard>
+      </VCol>
+    </VRow>
+  </EventTabsNav>
+</template>

apps/app/src/pages/events/[id]/persons/index.vue

@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import { usePersonList, useApprovePerson, useDeletePerson } from '@/composables/api/usePersons'
+import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
+import { useAuthStore } from '@/stores/useAuthStore'
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+import CreatePersonDialog from '@/components/persons/CreatePersonDialog.vue'
+import EditPersonDialog from '@/components/persons/EditPersonDialog.vue'
+import PersonDetailPanel from '@/components/persons/PersonDetailPanel.vue'
+import type { Person, PersonStatus } from '@/types/person'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+
+const route = useRoute()
+const authStore = useAuthStore()
+
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const eventId = computed(() => String((route.params as { id: string }).id))
+
+// Filters
+const filterCrowdTypeId = ref<string>('')
+const filterStatus = ref<string>('')
+
+const filters = computed(() => ({
+  crowd_type_id: filterCrowdTypeId.value || undefined,
+  status: filterStatus.value || undefined,
+}))
+
+const { data: personsResponse, isLoading, isError, refetch } = usePersonList(eventId, filters)
+const { data: crowdTypes } = useCrowdTypeList(orgId)
+
+const persons = computed(() => personsResponse.value?.data ?? [])
+const meta = computed(() => personsResponse.value?.meta)
+
+// KPI tiles
+const tiles = computed(() => [
+  {
+    title: 'Totaal personen',
+    value: meta.value?.total ?? 0,
+    icon: 'tabler-users',
+    color: 'primary',
+  },
+  {
+    title: 'Goedgekeurd',
+    value: meta.value?.total_approved ?? 0,
+    icon: 'tabler-circle-check',
+    color: 'success',
+  },
+  {
+    title: 'In behandeling',
+    value: meta.value?.total_pending ?? 0,
+    icon: 'tabler-clock',
+    color: 'warning',
+  },
+  {
+    title: 'Afgewezen / No-show',
+    value: meta.value?.total_rejected ?? 0,
+    icon: 'tabler-circle-x',
+    color: 'error',
+  },
+])
+
+// Status options
+const statusOptions = [
+  { title: 'Alle statussen', value: '' },
+  { title: 'Pending', value: 'pending' },
+  { title: 'Goedgekeurd', value: 'approved' },
+  { title: 'Uitgenodigd', value: 'invited' },
+  { title: 'Aangemeld', value: 'applied' },
+  { title: 'Afgewezen', value: 'rejected' },
+  { title: 'No-show', value: 'no_show' },
+]
+
+const statusColor: Record<PersonStatus, string> = {
+  pending: 'default',
+  applied: 'info',
+  invited: 'cyan',
+  approved: 'success',
+  rejected: 'error',
+  no_show: 'warning',
+}
+
+const headers = [
+  { title: 'Naam', key: 'name' },
+  { title: 'E-mail', key: 'email' },
+  { title: 'Crowd Type', key: 'crowd_type' },
+  { title: 'Status', key: 'status' },
+  { title: 'Aangemaakt op', key: 'created_at' },
+  { title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
+]
+
+const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+})
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso))
+}
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map(p => p[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+// Dialogs & panel
+const isCreateDialogOpen = ref(false)
+const isEditDialogOpen = ref(false)
+const editingPerson = ref<Person | null>(null)
+const selectedPersonId = ref<string | null>(null)
+const isDetailPanelOpen = ref(false)
+
+// Delete confirmation
+const isDeleteDialogOpen = ref(false)
+const deletingPerson = ref<Person | null>(null)
+
+// Mutations
+const { mutate: approvePerson } = useApprovePerson(eventId)
+const { mutate: deletePerson, isPending: isDeleting } = useDeletePerson(eventId)
+
+const showSuccess = ref(false)
+const successMessage = ref('')
+
+function onRowClick(_event: Event, row: { item: Person }) {
+  selectedPersonId.value = row.item.id
+  isDetailPanelOpen.value = true
+}
+
+function onApprove(person: Person) {
+  approvePerson(person.id, {
+    onSuccess: () => {
+      successMessage.value = `${person.name} goedgekeurd`
+      showSuccess.value = true
+    },
+  })
+}
+
+function onEdit(person: Person) {
+  editingPerson.value = person
+  isEditDialogOpen.value = true
+}
+
+function onDeleteConfirm(person: Person) {
+  deletingPerson.value = person
+  isDeleteDialogOpen.value = true
+}
+
+function onDeleteExecute() {
+  if (!deletingPerson.value) return
+  const name = deletingPerson.value.name
+
+  deletePerson(deletingPerson.value.id, {
+    onSuccess: () => {
+      isDeleteDialogOpen.value = false
+      deletingPerson.value = null
+      successMessage.value = `${name} verwijderd`
+      showSuccess.value = true
+    },
+  })
+}
+
+// Crowd type filter options
+const crowdTypeOptions = computed(() => [
+  { title: 'Alle types', value: '' },
+  ...(crowdTypes.value?.map(ct => ({ title: ct.name, value: ct.id })) ?? []),
+])
+</script>
+
+<template>
+  <EventTabsNav>
+    <!-- Action bar -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <div class="d-flex gap-x-4">
+        <AppSelect
+          v-model="filterCrowdTypeId"
+          label="Crowd Type"
+          :items="crowdTypeOptions"
+          clearable
+          style="min-inline-size: 180px;"
+        />
+        <AppSelect
+          v-model="filterStatus"
+          label="Status"
+          :items="statusOptions"
+          clearable
+          style="min-inline-size: 180px;"
+        />
+      </div>
+      <VBtn
+        prepend-icon="tabler-plus"
+        @click="isCreateDialogOpen = true"
+      >
+        Persoon toevoegen
+      </VBtn>
+    </div>
+
+    <!-- KPI Tiles -->
+    <VRow class="mb-6">
+      <VCol
+        v-for="tile in tiles"
+        :key="tile.title"
+        cols="12"
+        sm="6"
+        md="3"
+      >
+        <VCard>
+          <VCardText class="d-flex align-center gap-x-4">
+            <VAvatar
+              :color="tile.color"
+              variant="tonal"
+              size="44"
+              rounded
+            >
+              <VIcon
+                :icon="tile.icon"
+                size="28"
+              />
+            </VAvatar>
+            <div>
+              <p class="text-body-1 mb-0">
+                {{ tile.title }}
+              </p>
+              <h4 class="text-h4">
+                {{ tile.value }}
+              </h4>
+            </div>
+          </VCardText>
+        </VCard>
+      </VCol>
+    </VRow>
+
+    <!-- Loading -->
+    <VSkeletonLoader
+      v-if="isLoading"
+      type="table"
+    />
+
+    <!-- Error -->
+    <VAlert
+      v-else-if="isError"
+      type="error"
+      class="mb-4"
+    >
+      Kon personen niet laden.
+      <template #append>
+        <VBtn
+          variant="text"
+          @click="refetch()"
+        >
+          Opnieuw proberen
+        </VBtn>
+      </template>
+    </VAlert>
+
+    <!-- Empty -->
+    <VCard
+      v-else-if="!persons.length"
+      class="text-center pa-8"
+    >
+      <VIcon
+        icon="tabler-users"
+        size="48"
+        class="mb-4 text-disabled"
+      />
+      <p class="text-body-1 text-disabled">
+        Nog geen personen voor dit evenement
+      </p>
+    </VCard>
+
+    <!-- Data table -->
+    <VCard v-else>
+      <VDataTable
+        :headers="headers"
+        :items="persons"
+        item-value="id"
+        hover
+        @click:row="onRowClick"
+      >
+        <template #item.name="{ item }">
+          <div class="d-flex align-center gap-x-3">
+            <VAvatar
+              size="32"
+              color="primary"
+              variant="tonal"
+            >
+              <span class="text-caption">{{ getInitials(item.name) }}</span>
+            </VAvatar>
+            <span>{{ item.name }}</span>
+          </div>
+        </template>
+
+        <template #item.crowd_type="{ item }">
+          <VChip
+            v-if="item.crowd_type"
+            :color="item.crowd_type.color"
+            size="small"
+          >
+            {{ item.crowd_type.name }}
+          </VChip>
+          <span
+            v-else
+            class="text-disabled"
+          >-</span>
+        </template>
+
+        <template #item.status="{ item }">
+          <VChip
+            :color="statusColor[item.status]"
+            size="small"
+          >
+            {{ item.status }}
+          </VChip>
+        </template>
+
+        <template #item.created_at="{ item }">
+          {{ formatDate(item.created_at) }}
+        </template>
+
+        <template #item.actions="{ item }">
+          <div class="d-flex justify-end gap-x-1">
+            <VBtn
+              v-if="item.status === 'pending' || item.status === 'applied'"
+              icon="tabler-circle-check"
+              variant="text"
+              size="small"
+              color="success"
+              title="Goedkeuren"
+              @click.stop="onApprove(item)"
+            />
+            <VBtn
+              icon="tabler-edit"
+              variant="text"
+              size="small"
+              title="Bewerken"
+              @click.stop="onEdit(item)"
+            />
+            <VBtn
+              icon="tabler-trash"
+              variant="text"
+              size="small"
+              color="error"
+              title="Verwijderen"
+              @click.stop="onDeleteConfirm(item)"
+            />
+          </div>
+        </template>
+      </VDataTable>
+    </VCard>
+
+    <!-- Create dialog -->
+    <CreatePersonDialog
+      v-model="isCreateDialogOpen"
+      :event-id="eventId"
+      :org-id="orgId"
+    />
+
+    <!-- Edit dialog -->
+    <EditPersonDialog
+      v-if="editingPerson"
+      v-model="isEditDialogOpen"
+      :person="editingPerson"
+      :event-id="eventId"
+      :org-id="orgId"
+    />
+
+    <!-- Detail panel -->
+    <PersonDetailPanel
+      v-model="isDetailPanelOpen"
+      :event-id="eventId"
+      :org-id="orgId"
+      :person-id="selectedPersonId"
+      @edit="(p: Person) => onEdit(p)"
+    />
+
+    <!-- Delete confirmation -->
+    <VDialog
+      v-model="isDeleteDialogOpen"
+      max-width="400"
+    >
+      <VCard title="Persoon verwijderen">
+        <VCardText>
+          Weet je zeker dat je <strong>{{ deletingPerson?.name }}</strong> wilt verwijderen?
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="isDeleteDialogOpen = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            color="error"
+            :loading="isDeleting"
+            @click="onDeleteExecute"
+          >
+            Verwijderen
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Success snackbar -->
+    <VSnackbar
+      v-model="showSuccess"
+      color="success"
+      :timeout="3000"
+    >
+      {{ successMessage }}
+    </VSnackbar>
+  </EventTabsNav>
+</template>

apps/app/src/pages/events/[id]/sections/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+</script>
+
+<template>
+  <EventTabsNav>
+    <VCard class="ma-4">
+      <VCardText>
+        Deze module is binnenkort beschikbaar.
+      </VCardText>
+    </VCard>
+  </EventTabsNav>
+</template>

apps/app/src/pages/events/[id]/settings/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import EventTabsNav from '@/components/events/EventTabsNav.vue'
+
+definePage({
+  meta: {
+    navActiveLink: 'events',
+  },
+})
+</script>
+
+<template>
+  <EventTabsNav>
+    <VCard class="ma-4">
+      <VCardText>
+        Deze module is binnenkort beschikbaar.
+      </VCardText>
+    </VCard>
+  </EventTabsNav>
+</template>

apps/app/src/types/organisation.ts

@@ -20,3 +20,20 @@ export interface UpdateOrganisationPayload {
   billing_status?: Organisation['billing_status']
   settings?: Record<string, unknown>
 }
+
+export interface CrowdType {
+  id: string
+  name: string
+  system_type: string
+  color: string
+  icon: string | null
+  is_active: boolean
+}
+
+export interface Company {
+  id: string
+  name: string
+  type: string
+  contact_name: string | null
+  contact_email: string | null
+}

apps/app/src/types/person.ts

@@ -0,0 +1,39 @@
+import type { Company, CrowdType } from '@/types/organisation'
+
+export type PersonStatus =
+  | 'invited'
+  | 'applied'
+  | 'pending'
+  | 'approved'
+  | 'rejected'
+  | 'no_show'
+
+export interface Person {
+  id: string
+  name: string
+  email: string
+  phone: string | null
+  status: PersonStatus
+  is_blacklisted: boolean
+  admin_notes: string | null
+  custom_fields: Record<string, unknown> | null
+  event_id: string
+  created_at: string
+  crowd_type: CrowdType | null
+  company: Company | null
+}
+
+export interface CreatePersonPayload {
+  crowd_type_id: string
+  name: string
+  email: string
+  phone?: string
+  company_id?: string
+  status?: PersonStatus
+}
+
+export interface UpdatePersonPayload extends Partial<CreatePersonPayload> {
+  status?: PersonStatus
+  is_blacklisted?: boolean
+  admin_notes?: string
+}

apps/app/typed-router.d.ts

@@ -23,6 +23,11 @@ declare module 'vue-router/auto-routes' {
     'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
     'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
     'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-artists': RouteRecordInfo<'events-id-artists', '/events/:id/artists', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-briefings': RouteRecordInfo<'events-id-briefings', '/events/:id/briefings', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-persons': RouteRecordInfo<'events-id-persons', '/events/:id/persons', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-sections': RouteRecordInfo<'events-id-sections', '/events/:id/sections', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'events-id-settings': RouteRecordInfo<'events-id-settings', '/events/:id/settings', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,