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>

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>