fix: remove non-existent GET persons endpoint from crowd list detail panel

The backend only has POST (add) and DELETE (remove) for crowd list
persons — no GET to list them. Reworked the detail panel to show
person count from the crowd list data instead of fetching individual
persons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue

@@ -7,7 +7,6 @@ import type { Person } from '@/types/person'
 const props = defineProps<{
   eventId: string
   crowdList: CrowdList
-  existingPersonIds: string[]
 }>()
 
 const modelValue = defineModel<boolean>({ required: true })
@@ -20,24 +19,21 @@ const { mutate: addPerson, isPending } = useAddPersonToCrowdList(eventIdRef)
 const selectedPersonId = ref<string | null>(null)
 const showSuccess = ref(false)
 const successName = ref('')
+const errorMessage = ref('')
 
-const availablePersons = computed(() => {
-  const all = personsResponse.value?.data ?? []
-  const excluded = new Set(props.existingPersonIds)
-
-  return all
-    .filter((p: Person) => !excluded.has(p.id))
-    .map((p: Person) => ({
-      title: p.name,
-      value: p.id,
-      subtitle: p.email,
-    }))
-})
+const personItems = computed(() =>
+  (personsResponse.value?.data ?? []).map((p: Person) => ({
+    title: p.name,
+    value: p.id,
+    subtitle: p.email,
+  })),
+)
 
 function onSubmit() {
   if (!selectedPersonId.value) return
 
-  const personName = availablePersons.value.find(p => p.value === selectedPersonId.value)?.title ?? ''
+  errorMessage.value = ''
+  const personName = personItems.value.find(p => p.value === selectedPersonId.value)?.title ?? ''
 
   addPerson(
     { listId: props.crowdList.id, personId: selectedPersonId.value },
@@ -48,6 +44,10 @@ function onSubmit() {
         modelValue.value = false
         showSuccess.value = true
       },
+      onError: (err: unknown) => {
+        const data = (err as { response?: { data?: { message?: string } } }).response?.data
+        errorMessage.value = data?.message ?? 'Kon persoon niet toevoegen'
+      },
     },
   )
 }
@@ -64,11 +64,22 @@ function onSubmit() {
           Voeg een persoon toe aan <strong>{{ crowdList.name }}</strong>
         </p>
 
+        <VAlert
+          v-if="errorMessage"
+          type="error"
+          variant="tonal"
+          class="mb-4"
+          closable
+          @click:close="errorMessage = ''"
+        >
+          {{ errorMessage }}
+        </VAlert>
+
         <VAutocomplete
           v-model="selectedPersonId"
           label="Selecteer persoon"
-          :items="availablePersons"
-          :no-data-text="availablePersons.length === 0 ? 'Alle personen zijn al toegevoegd' : 'Geen resultaten'"
+          :items="personItems"
+          no-data-text="Geen personen gevonden"
           auto-select-first
           clearable
         />

apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useCrowdListPersons, useRemovePersonFromCrowdList } from '@/composables/api/useCrowdLists'
 import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
 import { useCompanies } from '@/composables/api/useCompanies'
 import AddPersonToCrowdListDialog from '@/components/crowd-lists/AddPersonToCrowdListDialog.vue'
 import { CrowdListType } from '@/types/crowdList'
 import type { CrowdList } from '@/types/crowdList'
-import type { Person } from '@/types/person'
 
 const props = defineProps<{
   eventId: string
@@ -21,12 +19,9 @@ const modelValue = defineModel<boolean>({ required: true })
 
 const eventIdRef = computed(() => props.eventId)
 const orgIdRef = computed(() => props.orgId)
-const listIdRef = computed(() => props.crowdList?.id ?? '')
 
 const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
 const { data: companies } = useCompanies(orgIdRef)
-const { data: persons, isLoading: personsLoading, isError: personsError, refetch: refetchPersons } = useCrowdListPersons(eventIdRef, listIdRef)
-const { mutate: removePerson, isPending: isRemoving } = useRemovePersonFromCrowdList(eventIdRef)
 
 const crowdTypeName = computed(() => {
   if (!props.crowdList) return '-'
@@ -51,48 +46,10 @@ const capacityColor = computed(() => {
   return 'error'
 })
 
-const existingPersonIds = computed(() =>
-  (persons.value ?? []).map((p: Person) => p.id),
-)
-
 const isAddPersonDialogOpen = ref(false)
-const isRemoveDialogOpen = ref(false)
-const removingPerson = ref<Person | null>(null)
 const showSuccess = ref(false)
 const successMessage = ref('')
 
-function onRemoveConfirm(person: Person) {
-  removingPerson.value = person
-  isRemoveDialogOpen.value = true
-}
-
-function onRemoveExecute() {
-  if (!removingPerson.value || !props.crowdList) return
-  const name = removingPerson.value.name
-
-  removePerson(
-    { listId: props.crowdList.id, personId: removingPerson.value.id },
-    {
-      onSuccess: () => {
-        isRemoveDialogOpen.value = false
-        removingPerson.value = null
-        successMessage.value = `${name} verwijderd van lijst`
-        showSuccess.value = true
-        refetchPersons()
-      },
-    },
-  )
-}
-
-function getInitials(name: string) {
-  return name
-    .split(' ')
-    .map(p => p[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2)
-}
-
 const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
   day: '2-digit',
   month: '2-digit',
@@ -119,7 +76,7 @@ function formatDate(iso: string) {
             <h5 class="text-h5 mb-1">
               {{ crowdList.name }}
             </h5>
-            <div class="d-flex gap-x-2">
+            <div class="d-flex gap-x-2 flex-wrap">
               <VChip
                 :color="crowdList.type === CrowdListType.INTERNAL ? 'primary' : 'info'"
                 size="small"
@@ -237,34 +194,9 @@ function formatDate(iso: string) {
           </VBtn>
         </div>
 
-        <!-- Loading -->
-        <VSkeletonLoader
-          v-if="personsLoading"
-          type="list-item-avatar@3"
-        />
-
-        <!-- 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
-            </VBtn>
-          </template>
-        </VAlert>
-
         <!-- Empty -->
         <VCard
-          v-else-if="!persons?.length"
+          v-if="crowdList.persons_count === 0"
           variant="outlined"
           class="text-center pa-6"
         >
@@ -274,43 +206,42 @@ function formatDate(iso: string) {
             class="mb-2 text-disabled"
           />
           <p class="text-body-2 text-disabled mb-0">
-            Nog geen personen op deze lijst
+            Nog geen personen op deze lijst.
+            Voeg personen toe via de knop hierboven.
           </p>
         </VCard>
 
-        <!-- Person list -->
-        <VList
+        <!-- Has persons (count only — no list endpoint yet) -->
+        <VCard
           v-else
-          class="pa-0"
+          variant="outlined"
+          class="pa-4"
         >
-          <VListItem
-            v-for="person in persons"
-            :key="person.id"
-          >
-            <template #prepend>
-              <VAvatar
-                size="32"
-                color="primary"
-                variant="tonal"
-                class="me-3"
-              >
-                <span class="text-caption">{{ getInitials(person.name) }}</span>
-              </VAvatar>
-            </template>
-            <VListItemTitle>{{ person.name }}</VListItemTitle>
-            <VListItemSubtitle>{{ person.email }}</VListItemSubtitle>
-            <template #append>
-              <VBtn
-                icon="tabler-x"
-                variant="text"
-                size="small"
-                color="error"
-                title="Verwijderen van lijst"
-                @click="onRemoveConfirm(person)"
+          <div class="d-flex align-center gap-x-3">
+            <VAvatar
+              color="primary"
+              variant="tonal"
+              size="44"
+              rounded
+            >
+              <VIcon
+                icon="tabler-users"
+                size="24"
               />
-            </template>
-          </VListItem>
-        </VList>
+            </VAvatar>
+            <div>
+              <p class="text-body-1 font-weight-medium mb-0">
+                {{ crowdList.persons_count }} {{ crowdList.persons_count === 1 ? 'persoon' : 'personen' }}
+              </p>
+              <p
+                v-if="!crowdList.max_persons"
+                class="text-body-2 text-disabled mb-0"
+              >
+                Geen limiet ingesteld
+              </p>
+            </div>
+          </div>
+        </VCard>
       </div>
     </template>
 
@@ -320,37 +251,8 @@ function formatDate(iso: string) {
       v-model="isAddPersonDialogOpen"
       :event-id="eventId"
       :crowd-list="crowdList"
-      :existing-person-ids="existingPersonIds"
     />
 
-    <!-- Remove confirmation -->
-    <VDialog
-      v-model="isRemoveDialogOpen"
-      max-width="400"
-    >
-      <VCard title="Persoon verwijderen van lijst">
-        <VCardText>
-          Weet je zeker dat je <strong>{{ removingPerson?.name }}</strong> wilt verwijderen van deze lijst?
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn
-            variant="text"
-            @click="isRemoveDialogOpen = false"
-          >
-            Annuleren
-          </VBtn>
-          <VBtn
-            color="error"
-            :loading="isRemoving"
-            @click="onRemoveExecute"
-          >
-            Verwijderen
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VDialog>
-
     <!-- Success snackbar -->
     <VSnackbar
       v-model="showSuccess"

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

@@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { Ref } from 'vue'
 import { apiClient } from '@/lib/axios'
 import type { CrowdList, CreateCrowdListDto, UpdateCrowdListDto } from '@/types/crowdList'
-import type { Person } from '@/types/person'
 
 interface ApiResponse<T> {
   success: boolean
@@ -24,20 +23,6 @@ export function useCrowdLists(eventId: Ref<string>) {
   })
 }
 
-export function useCrowdListPersons(eventId: Ref<string>, listId: Ref<string>) {
-  return useQuery({
-    queryKey: ['crowd-lists', eventId, 'persons', listId],
-    queryFn: async () => {
-      const { data } = await apiClient.get<{ data: Person[] }>(
-        `/events/${eventId.value}/crowd-lists/${listId.value}/persons`,
-      )
-
-      return data.data
-    },
-    enabled: () => !!eventId.value && !!listId.value,
-  })
-}
-
 export function useCreateCrowdList(eventId: Ref<string>) {
   const queryClient = useQueryClient()