feat(app): event status transitions on detail header

Add transition buttons from allowed_transitions with Dutch labels,
confirmation dialog, TanStack mutation + cache invalidation, and
422/generic error handling via notification store.

Made-with: Cursor

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

@@ -5,6 +5,7 @@ import type {
   CreateEventPayload,
   EventItem,
   EventStats,
+  EventStatus,
   UpdateEventPayload,
 } from '@/types/event'
 
@@ -132,6 +133,25 @@ export function useUpdateEvent(orgId: Ref<string>, id: Ref<string>) {
   })
 }
 
+export function useTransitionEventStatus(orgId: Ref<string>, eventId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (status: EventStatus) => {
+      const { data } = await apiClient.post<ApiResponse<EventItem>>(
+        `/organisations/${orgId.value}/events/${eventId.value}/transition`,
+        { status },
+      )
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value] })
+      queryClient.invalidateQueries({ queryKey: ['events', orgId.value, eventId.value] })
+      queryClient.invalidateQueries({ queryKey: ['event-children', eventId.value] })
+    },
+  })
+}
+
 export function useUploadEventImage(orgId: Ref<string>, eventId: Ref<string>) {
   const queryClient = useQueryClient()