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/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] })
+    },
+  })
+}