feat: crowd types management UI with create/edit/deactivate

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

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

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/vue-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { Ref } from 'vue'
 import { apiClient } from '@/lib/axios'
 import type { CrowdType } from '@/types/organisation'
@@ -14,6 +14,12 @@ interface PaginatedResponse<T> {
   }
 }
 
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
 export function useCrowdTypeList(orgId: Ref<string>) {
   return useQuery({
     queryKey: ['crowd-types', orgId],
@@ -28,3 +34,50 @@ export function useCrowdTypeList(orgId: Ref<string>) {
     staleTime: Infinity,
   })
 }
+
+export function useCreateCrowdType(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: { name: string; system_type: string; color: string; icon?: string | null }) => {
+      const { data } = await apiClient.post<ApiResponse<CrowdType>>(
+        `/organisations/${orgId.value}/crowd-types`,
+        payload,
+      )
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-types', orgId] })
+    },
+  })
+}
+
+export function useUpdateCrowdType(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: { id: string; name?: string; color?: string; icon?: string | null; is_active?: boolean }) => {
+      const { data } = await apiClient.put<ApiResponse<CrowdType>>(
+        `/organisations/${orgId.value}/crowd-types/${id}`,
+        payload,
+      )
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-types', orgId] })
+    },
+  })
+}
+
+export function useDeleteCrowdType(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await apiClient.delete(`/organisations/${orgId.value}/crowd-types/${id}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crowd-types', orgId] })
+    },
+  })
+}