feat: platform admin member management — invite, remove, role update

Add member management to the platform admin organisation detail page: - Backend: invite (creates invitation or directly adds existing user), remove member, update member role endpoints on AdminOrganisationController - Backend: show endpoint now returns members alongside organisation data - Frontend: members table with inline role editing, invite dialog, remove confirmation dialog on /platform/organisations/[id] - Tests: 7 new tests covering happy paths and edge cases (self-removal, existing member, non-super_admin denied) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-15 00:37:29 +02:00
parent b6ef6ec383
commit f2614f2b48
8 changed files with 631 additions and 16 deletions
--- a/apps/app/src/composables/api/useAdmin.ts
+++ b/apps/app/src/composables/api/useAdmin.ts
@@ -4,11 +4,15 @@ import { apiClient } from '@/lib/axios'
 import type {
  ActivityLogEntry,
  AdminOrganisation,
+  AdminOrganisationDetail,
+  AdminOrganisationMember,
  AdminUser,
  ImpersonationResponse,
+  InviteMemberPayload,
  PlatformStats,
  UpdateAdminOrganisationPayload,
  UpdateAdminUserPayload,
+  UpdateMemberRolePayload,
 } from '@/types/admin'

 interface ApiResponse<T> {
@@ -47,7 +51,7 @@ export function useAdminOrganisation(id: Ref<string>) {
  return useQuery({
    queryKey: ['admin', 'organisations', id],
    queryFn: async () => {
-      const { data } = await apiClient.get<ApiResponse<AdminOrganisation>>(
+      const { data } = await apiClient.get<ApiResponse<AdminOrganisationDetail>>(
        `/admin/organisations/${id.value}`,
      )
      return data.data
@@ -86,6 +90,55 @@ export function useDeleteAdminOrganisation() {
  })
 }

+// ─── Organisation Members ──────────────────────────────────
+
+export function useInviteOrganisationMember() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ organisationId, payload }: { organisationId: string; payload: InviteMemberPayload }) => {
+      const { data } = await apiClient.post<ApiResponse<AdminOrganisationMember | null>>(
+        `/admin/organisations/${organisationId}/invite`,
+        payload,
+      )
+      return data
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
+    },
+  })
+}
+
+export function useRemoveOrganisationMember() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ organisationId, userId }: { organisationId: string; userId: string }) => {
+      await apiClient.delete(`/admin/organisations/${organisationId}/members/${userId}`)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
+    },
+  })
+}
+
+export function useUpdateOrganisationMemberRole() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ organisationId, userId, payload }: { organisationId: string; userId: string; payload: UpdateMemberRolePayload }) => {
+      const { data } = await apiClient.put<ApiResponse<AdminOrganisationMember>>(
+        `/admin/organisations/${organisationId}/members/${userId}`,
+        payload,
+      )
+      return data.data
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
+    },
+  })
+}
+
 // ─── Users ──────────────────────────────────────────────────

 export function useAdminUsers(params: Ref<Record<string, string | number | undefined>>) {
--- a/apps/app/src/pages/platform/organisations/[id].vue
+++ b/apps/app/src/pages/platform/organisations/[id].vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
-import { useAdminOrganisation, useUpdateAdminOrganisation, useDeleteAdminOrganisation } from '@/composables/api/useAdmin'
+import {
+  useAdminOrganisation,
+  useUpdateAdminOrganisation,
+  useDeleteAdminOrganisation,
+  useInviteOrganisationMember,
+  useRemoveOrganisationMember,
+  useUpdateOrganisationMemberRole,
+} from '@/composables/api/useAdmin'
+import { useAuthStore } from '@/stores/useAuthStore'
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
-import type { BillingStatus, UpdateAdminOrganisationPayload } from '@/types/admin'
+import type { BillingStatus, InviteMemberPayload, UpdateAdminOrganisationPayload } from '@/types/admin'

 definePage({
  meta: {
@@ -11,11 +19,15 @@ definePage({

 const route = useRoute()
 const router = useRouter()
+const authStore = useAuthStore()
 const orgStore = useOrganisationStore()

 const orgId = computed(() => String((route.params as { id: string }).id))

-const { data: org, isLoading, isError, refetch } = useAdminOrganisation(orgId)
+const { data: orgData, isLoading, isError, refetch } = useAdminOrganisation(orgId)
+
+const org = computed(() => orgData.value?.organisation)
+const members = computed(() => orgData.value?.members ?? [])

 const billingStatusColor: Record<BillingStatus, string> = {
  trial: 'info',
@@ -31,6 +43,11 @@ const billingStatusOptions = [
  { title: 'Cancelled', value: 'cancelled' },
 ]

+const roleOptions = [
+  { title: 'Admin', value: 'org_admin' },
+  { title: 'Lid', value: 'org_member' },
+]
+
 // Edit dialog
 const isEditDialogOpen = ref(false)
 const editForm = ref<UpdateAdminOrganisationPayload>({})
@@ -52,7 +69,7 @@ function submitEdit() {
    {
      onSuccess: () => {
        isEditDialogOpen.value = false
-        showEditSuccess.value = true
+        showSnackbar('Organisatie bijgewerkt', 'success')
      },
    },
  )
@@ -77,7 +94,79 @@ function openAsOrganiser() {
  router.push({ name: 'dashboard' })
 }

-const showEditSuccess = ref(false)
+// ─── Invite Member ──────────────────────────────────────────
+const isInviteDialogOpen = ref(false)
+const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
+const inviteError = ref('')
+const { mutate: inviteMember, isPending: isInviting } = useInviteOrganisationMember()
+
+function openInviteDialog() {
+  inviteForm.value = { email: '', role: 'org_member' }
+  inviteError.value = ''
+  isInviteDialogOpen.value = true
+}
+
+function submitInvite() {
+  inviteError.value = ''
+  inviteMember(
+    { organisationId: orgId.value, payload: inviteForm.value },
+    {
+      onSuccess: (data) => {
+        isInviteDialogOpen.value = false
+        showSnackbar(data.message ?? 'Uitnodiging verstuurd', 'success')
+      },
+      onError: (err: unknown) => {
+        const error = err as { response?: { data?: { message?: string } } }
+        inviteError.value = error.response?.data?.message ?? 'Er is een fout opgetreden.'
+      },
+    },
+  )
+}
+
+// ─── Remove Member ──────────────────────────────────────────
+const isRemoveDialogOpen = ref(false)
+const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
+const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
+
+function openRemoveDialog(member: { id: string; full_name: string }) {
+  memberToRemove.value = member
+  isRemoveDialogOpen.value = true
+}
+
+function confirmRemove() {
+  if (!memberToRemove.value) return
+  removeMember(
+    { organisationId: orgId.value, userId: memberToRemove.value.id },
+    {
+      onSuccess: () => {
+        isRemoveDialogOpen.value = false
+        memberToRemove.value = null
+        showSnackbar('Lid verwijderd', 'success')
+      },
+    },
+  )
+}
+
+// ─── Update Member Role ─────────────────────────────────────
+const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
+
+function onRoleChange(userId: string, newRole: string) {
+  updateMemberRole(
+    { organisationId: orgId.value, userId, payload: { role: newRole } },
+    {
+      onSuccess: () => {
+        showSnackbar('Rol bijgewerkt', 'success')
+      },
+    },
+  )
+}
+
+// ─── Snackbar ───────────────────────────────────────────────
+const snackbar = ref({ show: false, message: '', color: 'success' })
+
+function showSnackbar(message: string, color: string) {
+  snackbar.value = { show: true, message, color }
+}

 function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('nl-NL', {
@@ -277,6 +366,97 @@ function formatDate(iso: string): string {
        </VCardText>
      </VCard>

+      <!-- Members Card -->
+      <VCard class="mb-6">
+        <VCardTitle class="d-flex align-center justify-space-between">
+          <span>Leden</span>
+          <VBtn
+            size="small"
+            prepend-icon="tabler-user-plus"
+            @click="openInviteDialog"
+          >
+            Lid uitnodigen
+          </VBtn>
+        </VCardTitle>
+        <VTable>
+          <thead>
+            <tr>
+              <th>Naam</th>
+              <th>Email</th>
+              <th>Rol</th>
+              <th class="text-end">
+                Acties
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="member in members"
+              :key="member.id"
+            >
+              <td>
+                <div class="d-flex align-center gap-x-3 py-2">
+                  <VAvatar
+                    size="34"
+                    :color="member.avatar ? undefined : 'primary'"
+                    variant="tonal"
+                  >
+                    <VImg
+                      v-if="member.avatar"
+                      :src="member.avatar"
+                    />
+                    <span v-else>{{ member.first_name.charAt(0) }}{{ member.last_name.charAt(0) }}</span>
+                  </VAvatar>
+                  <span>{{ member.full_name }}</span>
+                </div>
+              </td>
+              <td>{{ member.email }}</td>
+              <td>
+                <AppSelect
+                  :model-value="member.role"
+                  :items="roleOptions"
+                  density="compact"
+                  hide-details
+                  style="max-inline-size: 160px;"
+                  @update:model-value="(val: string) => onRoleChange(member.id, val)"
+                />
+              </td>
+              <td class="text-end">
+                <VTooltip
+                  v-if="member.id === authStore.user?.id"
+                  location="top"
+                >
+                  <template #activator="{ props }">
+                    <span v-bind="props">
+                      <IconBtn
+                        disabled
+                        size="small"
+                      >
+                        <VIcon icon="tabler-trash" />
+                      </IconBtn>
+                    </span>
+                  </template>
+                  Je kunt jezelf niet verwijderen
+                </VTooltip>
+                <IconBtn
+                  v-else
+                  size="small"
+                  color="error"
+                  @click="openRemoveDialog(member)"
+                >
+                  <VIcon icon="tabler-trash" />
+                </IconBtn>
+              </td>
+            </tr>
+          </tbody>
+        </VTable>
+        <VCardText v-if="members.length === 0">
+          <p class="text-body-2 text-disabled text-center mb-0">
+            Geen leden gevonden.
+          </p>
+        </VCardText>
+      </VCard>
+
      <!-- Danger Zone -->
      <VCard>
        <VCardTitle class="text-error">
@@ -372,13 +552,94 @@ function formatDate(iso: string): string {
      </VCard>
    </VDialog>

-    <!-- Success snackbar -->
+    <!-- Invite Dialog -->
+    <VDialog
+      v-model="isInviteDialogOpen"
+      max-width="500"
+    >
+      <VCard title="Lid uitnodigen">
+        <VCardText>
+          <VAlert
+            v-if="inviteError"
+            type="error"
+            variant="tonal"
+            class="mb-4"
+            density="comfortable"
+          >
+            {{ inviteError }}
+          </VAlert>
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="inviteForm.email"
+                label="Email"
+                type="email"
+                placeholder="naam@voorbeeld.nl"
+              />
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="inviteForm.role"
+                :items="roleOptions"
+                label="Rol"
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="tonal"
+            @click="isInviteDialogOpen = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            color="primary"
+            :loading="isInviting"
+            @click="submitInvite"
+          >
+            Uitnodigen
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Remove Member Dialog -->
+    <VDialog
+      v-model="isRemoveDialogOpen"
+      max-width="400"
+    >
+      <VCard title="Lid verwijderen">
+        <VCardText>
+          Weet je zeker dat je <strong>{{ memberToRemove?.full_name }}</strong> wilt verwijderen uit deze organisatie?
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="isRemoveDialogOpen = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            color="error"
+            :loading="isRemoving"
+            @click="confirmRemove"
+          >
+            Verwijderen
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Snackbar -->
    <VSnackbar
-      v-model="showEditSuccess"
-      color="success"
+      v-model="snackbar.show"
+      :color="snackbar.color"
      :timeout="3000"
    >
-      Organisatie bijgewerkt
+      {{ snackbar.message }}
    </VSnackbar>
  </div>
 </template>
--- a/apps/app/src/types/admin.ts
+++ b/apps/app/src/types/admin.ts
@@ -72,6 +72,30 @@ export interface ImpersonationResponse {
  admin_id: string
 }

+export interface AdminOrganisationMember {
+  id: string
+  first_name: string
+  last_name: string
+  full_name: string
+  email: string
+  role: string
+  avatar: string | null
+}
+
+export interface AdminOrganisationDetail {
+  organisation: AdminOrganisation
+  members: AdminOrganisationMember[]
+}
+
+export interface InviteMemberPayload {
+  email: string
+  role: string
+}
+
+export interface UpdateMemberRolePayload {
+  role: string
+}
+
 export interface UpdateAdminOrganisationPayload {
  name?: string
  slug?: string