feat(app): registration fields management page in event settings

Adds a new settings sub-page for managing dynamic registration form fields
per event. Includes sortable field list, create/edit dialog, template picker,
and import-from-event functionality.

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

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

@@ -0,0 +1,144 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type {
+  RegistrationFormField,
+  RegistrationFormFieldCreateDTO,
+  RegistrationFormFieldUpdateDTO,
+} from '@/types/registration-form-field'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+export function useRegistrationFormFields(eventId: Ref<string>) {
+  return useQuery({
+    queryKey: ['registration-form-fields', eventId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<{ data: RegistrationFormField[] }>(
+        `/events/${eventId.value}/registration-fields`,
+      )
+
+      return data.data
+    },
+    enabled: () => !!eventId.value,
+    staleTime: Infinity,
+  })
+}
+
+export function useCreateRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: RegistrationFormFieldCreateDTO) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useUpdateRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: RegistrationFormFieldUpdateDTO & { id: string }) => {
+      const { data } = await apiClient.put<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields/${id}`,
+        payload,
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useDeleteRegistrationFormField(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/events/${eventId.value}/registration-fields/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useReorderRegistrationFormFields(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+  let previousFields: RegistrationFormField[] | undefined
+
+  return useMutation({
+    mutationFn: async (orderedIds: string[]) => {
+      await apiClient.post(`/events/${eventId.value}/registration-fields/reorder`, {
+        ids: orderedIds,
+      })
+    },
+    onMutate: async (orderedIds) => {
+      await queryClient.cancelQueries({ queryKey: ['registration-form-fields', eventId.value] })
+      previousFields = queryClient.getQueryData<RegistrationFormField[]>(['registration-form-fields', eventId.value])
+
+      if (previousFields) {
+        const byId = new Map(previousFields.map(f => [f.id, f]))
+        const reordered = orderedIds
+          .map(id => byId.get(id))
+          .filter((f): f is RegistrationFormField => !!f)
+        queryClient.setQueryData(['registration-form-fields', eventId.value], reordered)
+      }
+    },
+    onError: () => {
+      if (previousFields) {
+        queryClient.setQueryData(['registration-form-fields', eventId.value], previousFields)
+      }
+    },
+  })
+}
+
+export function useCreateFieldFromTemplate(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (templateId: string) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField>>(
+        `/events/${eventId.value}/registration-fields/from-template`,
+        { template_id: templateId },
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}
+
+export function useImportFieldsFromEvent(eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (sourceEventId: string) => {
+      const { data } = await apiClient.post<ApiResponse<RegistrationFormField[]>>(
+        `/events/${eventId.value}/registration-fields/import-from-event`,
+        { source_event_id: sourceEventId },
+      )
+
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['registration-form-fields', eventId] })
+    },
+  })
+}