feat(app): enhanced crowd list detail panel with person management

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

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

@@ -2,6 +2,7 @@ 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
@@ -9,6 +10,17 @@ interface ApiResponse<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
+  }
+}
+
 export function useCrowdLists(eventId: Ref<string>) {
   return useQuery({
     queryKey: ['crowd-lists', eventId],
@@ -23,6 +35,20 @@ export function useCrowdLists(eventId: Ref<string>) {
   })
 }
 
+export function useCrowdListPersons(eventId: Ref<string>, crowdListId: Ref<string>) {
+  return useQuery({
+    queryKey: ['crowd-lists', eventId, 'persons', crowdListId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<PaginatedResponse<Person>>(
+        `/events/${eventId.value}/crowd-lists/${crowdListId.value}/persons`,
+      )
+
+      return data
+    },
+    enabled: () => !!eventId.value && !!crowdListId.value,
+  })
+}
+
 export function useCreateCrowdList(eventId: Ref<string>) {
   const queryClient = useQueryClient()
 
@@ -104,3 +130,27 @@ export function useRemovePersonFromCrowdList(eventId: Ref<string>) {
     },
   })
 }
+
+export function useApproveAllPending(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (personIds: string[]) => {
+      const results = await Promise.allSettled(
+        personIds.map(id =>
+          apiClient.post<ApiResponse<Person>>(
+            `/events/${eventId.value}/persons/${id}/approve`,
+          ),
+        ),
+      )
+
+      const approved = results.filter(r => r.status === 'fulfilled').length
+
+      return { approved, total: personIds.length }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+      queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
+    },
+  })
+}