From 0ca7c0f20f05e13009e1bdb8018adddca621b469 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 22:30:42 +0200
Subject: [PATCH] refactor(members): consolidate Platform Admin + Org members
 into shared useMembers

- useMembers.ts gains a scope param ('organisation' | 'platform') on list,
  invite, update-role, and remove; endpoints branch accordingly.
- Platform Admin's [id].vue now consumes useMembers via scope='platform';
  deleted the duplicated useInviteOrganisationMember / useRemoveOrganisationMember
  / useUpdateOrganisationMemberRole helpers from useAdmin.ts.
- Deduplicated InviteMemberPayload / UpdateMemberRolePayload / AdminOrganisationMember
  from types/admin.ts; Member is now the canonical type.
- SettingsMembers.vue and EditMemberRoleDialog.vue removed (no remaining imports).
- InviteMemberDialog accepts an optional scope prop and is restricted to the
  two organisation-level roles matching the /members UX.
---
 apps/app/components.d.ts                      |   2 +
 .../members/EditMemberRoleDialog.vue          | 144 ------
 .../components/members/InviteMemberDialog.vue |  14 +-
 .../organisation/settings/SettingsMembers.vue | 484 ------------------
 .../components/persons/PersonDetailPanel.vue  |   4 +-
 apps/app/src/composables/api/useAdmin.ts      |  52 --
 apps/app/src/composables/api/useMembers.ts    |  76 ++-
 .../src/pages/platform/organisations/[id].vue |  40 +-
 apps/app/src/types/admin.ts                   |  21 +-
 apps/app/src/types/member.ts                  |   2 +
 10 files changed, 92 insertions(+), 747 deletions(-)
 delete mode 100644 apps/app/src/components/members/EditMemberRoleDialog.vue
 delete mode 100644 apps/app/src/components/organisation/settings/SettingsMembers.vue

diff --git a/apps/app/components.d.ts b/apps/app/components.d.ts
index 55be0420..3d1047a5 100644
--- a/apps/app/components.d.ts
+++ b/apps/app/components.d.ts
@@ -67,6 +67,7 @@ declare module 'vue' {
     EventMetricCards: typeof import('./src/components/events/EventMetricCards.vue')['default']
     EventTabsNav: typeof import('./src/components/events/EventTabsNav.vue')['default']
     I18n: typeof import('./src/@core/components/I18n.vue')['default']
+    ImageUploadField: typeof import('./src/components/common/ImageUploadField.vue')['default']
     ImpersonateDialog: typeof import('./src/components/platform/ImpersonateDialog.vue')['default']
     ImpersonationBanner: typeof import('./src/components/platform/ImpersonationBanner.vue')['default']
     ImportFromEventDialog: typeof import('./src/components/event/ImportFromEventDialog.vue')['default']
@@ -80,6 +81,7 @@ declare module 'vue' {
     Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
     NotificationsTab: typeof import('./src/components/account-settings/NotificationsTab.vue')['default']
     OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
+    PasswordRequirements: typeof import('./src/components/auth/PasswordRequirements.vue')['default']
     PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
     PersonDetailPanel: typeof import('./src/components/persons/PersonDetailPanel.vue')['default']
     PersonTagsTab: typeof import('./src/components/organisation/PersonTagsTab.vue')['default']
diff --git a/apps/app/src/components/members/EditMemberRoleDialog.vue b/apps/app/src/components/members/EditMemberRoleDialog.vue
deleted file mode 100644
index 850181f4..00000000
--- a/apps/app/src/components/members/EditMemberRoleDialog.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { VForm } from 'vuetify/components/VForm'
-import { useUpdateMemberRole } from '@/composables/api/useMembers'
-import { useAuthStore } from '@/stores/useAuthStore'
-import { requiredValidator } from '@core/utils/validators'
-import type { Member, OrganisationRole } from '@/types/member'
-import type { AxiosError } from 'axios'
-import type { ApiErrorResponse } from '@/types/auth'
-
-const props = defineProps<{
-  orgId: string
-  member: Member
-}>()
-
-const modelValue = defineModel<boolean>({ required: true })
-
-const authStore = useAuthStore()
-const orgIdRef = computed(() => props.orgId)
-
-const role = ref<OrganisationRole>(props.member.role as OrganisationRole)
-const errors = ref<Record<string, string>>({})
-const refVForm = ref<VForm>()
-const showSuccess = ref(false)
-
-const isSelf = computed(() => authStore.user?.id === props.member.id)
-
-const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
-  { title: 'Organisatie Beheerder', value: 'org_admin' },
-  { title: 'Organisatie Lid', value: 'org_member' },
-  { title: 'Evenement Manager', value: 'event_manager' },
-  { title: 'Staf Coördinator', value: 'staff_coordinator' },
-  { title: 'Vrijwilliger Coördinator', value: 'volunteer_coordinator' },
-]
-
-const { mutate: updateRole, isPending } = useUpdateMemberRole(orgIdRef)
-
-watch(() => props.member, (m) => {
-  role.value = m.role as OrganisationRole
-}, { immediate: true })
-
-function onSubmit() {
-  if (isSelf.value) return
-
-  refVForm.value?.validate().then(({ valid }) => {
-    if (!valid) return
-
-    errors.value = {}
-
-    updateRole(
-      { userId: props.member.id, role: role.value },
-      {
-        onSuccess: () => {
-          modelValue.value = false
-          showSuccess.value = true
-        },
-        onError: (err: Error) => {
-          const data = (err as AxiosError<ApiErrorResponse>).response?.data
-          if (data?.errors) {
-            errors.value = { role: data.errors.role?.[0] ?? '' }
-          }
-          else if (data?.message) {
-            errors.value = { role: data.message }
-          }
-        },
-      },
-    )
-  })
-}
-</script>
-
-<template>
-  <VDialog
-    v-model="modelValue"
-    max-width="500"
-  >
-    <VCard title="Rol wijzigen">
-      <VForm
-        ref="refVForm"
-        @submit.prevent="onSubmit"
-      >
-        <VCardText>
-          <VRow class="mb-4">
-            <VCol cols="12">
-              <div class="text-body-1">
-                <strong>{{ member.full_name }}</strong>
-              </div>
-              <div class="text-body-2 text-disabled">
-                {{ member.email }}
-              </div>
-            </VCol>
-          </VRow>
-
-          <VSelect
-            v-model="role"
-            label="Rol"
-            :items="roleOptions"
-            :rules="[requiredValidator]"
-            :error-messages="errors.role"
-          />
-        </VCardText>
-        <VCardActions>
-          <VSpacer />
-          <VBtn
-            variant="text"
-            @click="modelValue = false"
-          >
-            Annuleren
-          </VBtn>
-          <VTooltip
-            v-if="isSelf"
-            text="Je kunt je eigen rol niet wijzigen"
-          >
-            <template #activator="{ props: tooltipProps }">
-              <div v-bind="tooltipProps">
-                <VBtn
-                  color="primary"
-                  disabled
-                >
-                  Opslaan
-                </VBtn>
-              </div>
-            </template>
-          </VTooltip>
-          <VBtn
-            v-else
-            type="submit"
-            color="primary"
-            :loading="isPending"
-          >
-            Opslaan
-          </VBtn>
-        </VCardActions>
-      </VForm>
-    </VCard>
-  </VDialog>
-
-  <VSnackbar
-    v-model="showSuccess"
-    color="success"
-    :timeout="3000"
-  >
-    Rol bijgewerkt
-  </VSnackbar>
-</template>
diff --git a/apps/app/src/components/members/InviteMemberDialog.vue b/apps/app/src/components/members/InviteMemberDialog.vue
index 1d4f2a1e..e3ed6f7c 100644
--- a/apps/app/src/components/members/InviteMemberDialog.vue
+++ b/apps/app/src/components/members/InviteMemberDialog.vue
@@ -2,13 +2,16 @@
 import { VForm } from 'vuetify/components/VForm'
 import { useInviteMember } from '@/composables/api/useMembers'
 import { emailValidator, requiredValidator } from '@core/utils/validators'
-import type { OrganisationRole } from '@/types/member'
+import type { MemberScope, OrganisationRole } from '@/types/member'
 import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   orgId: string
-}>()
+  scope?: MemberScope
+}>(), {
+  scope: 'organisation',
+})
 
 const modelValue = defineModel<boolean>({ required: true })
 
@@ -24,12 +27,9 @@ const successEmail = ref('')
 const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
   { title: 'Organisatie Beheerder', value: 'org_admin' },
   { title: 'Organisatie Lid', value: 'org_member' },
-  { title: 'Evenement Manager', value: 'event_manager' },
-  { title: 'Staf Coördinator', value: 'staff_coordinator' },
-  { title: 'Vrijwilliger Coördinator', value: 'volunteer_coordinator' },
 ]
 
-const { mutate: inviteMember, isPending } = useInviteMember(orgIdRef)
+const { mutate: inviteMember, isPending } = useInviteMember(props.scope, orgIdRef)
 
 function resetForm() {
   email.value = ''
diff --git a/apps/app/src/components/organisation/settings/SettingsMembers.vue b/apps/app/src/components/organisation/settings/SettingsMembers.vue
deleted file mode 100644
index 460689c7..00000000
--- a/apps/app/src/components/organisation/settings/SettingsMembers.vue
+++ /dev/null
@@ -1,484 +0,0 @@
-<script setup lang="ts">
-import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
-import { useAdminChangeEmail } from '@/composables/api/useAccount'
-import { useAuthStore } from '@/stores/useAuthStore'
-import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
-import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
-import type { Member } from '@/types/member'
-
-const props = defineProps<{
-  orgId: string
-}>()
-
-const authStore = useAuthStore()
-
-const orgIdRef = computed(() => props.orgId)
-const orgName = computed(() => authStore.currentOrganisation?.name ?? '')
-
-const isOrgAdmin = computed(() => {
-  const role = authStore.currentOrganisation?.role
-  return role === 'org_admin' || authStore.isSuperAdmin
-})
-
-const { data: memberData, isLoading, isError, refetch } = useMemberList(orgIdRef)
-
-const members = computed(() => memberData.value?.data ?? [])
-const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
-
-// Invite dialog
-const isInviteDialogOpen = ref(false)
-
-// Edit role dialog
-const isEditRoleDialogOpen = ref(false)
-const selectedMember = ref<Member | null>(null)
-
-// Remove member
-const isRemoveDialogOpen = ref(false)
-const memberToRemove = ref<Member | null>(null)
-const { mutate: removeMember, isPending: isRemoving } = useRemoveMember(orgIdRef)
-
-// Revoke invitation
-const isRevokeDialogOpen = ref(false)
-const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
-const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgIdRef)
-
-// Change email
-const isEmailChangeDialogOpen = ref(false)
-const memberToChangeEmail = ref<Member | null>(null)
-const newMemberEmail = ref('')
-const adminEmailErrors = ref<Record<string, string>>({})
-const showEmailChangeSuccess = ref(false)
-const { mutate: adminChangeEmail, isPending: isChangingMemberEmail } = useAdminChangeEmail(orgIdRef)
-
-const showRemoveSuccess = ref(false)
-const showRevokeSuccess = ref(false)
-
-const roleColorMap: Record<string, string> = {
-  org_admin: 'purple',
-  org_member: 'info',
-  event_manager: 'cyan',
-  staff_coordinator: 'orange',
-  volunteer_coordinator: 'success',
-}
-
-const roleLabelMap: Record<string, string> = {
-  org_admin: 'Organisatie Beheerder',
-  org_member: 'Organisatie Lid',
-  event_manager: 'Evenement Manager',
-  staff_coordinator: 'Staf Coördinator',
-  volunteer_coordinator: 'Vrijwilliger Coördinator',
-}
-
-const memberSearch = ref('')
-
-const memberHeaders = computed(() => {
-  const headers: Array<{ title: string; key: string; sortable?: boolean; align?: 'start' | 'end' }> = [
-    { title: 'Naam', key: 'full_name', sortable: true },
-    { title: 'E-mailadres', key: 'email', sortable: true },
-    { title: 'Rol', key: 'role', sortable: true },
-  ]
-  if (isOrgAdmin.value) {
-    headers.push({ title: 'Acties', key: 'actions', sortable: false, align: 'end' })
-  }
-  return headers
-})
-
-const memberSortBy = [{ key: 'full_name', order: 'asc' as const }]
-
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .map(p => p[0])
-    .filter(Boolean)
-    .slice(0, 2)
-    .join('')
-    .toUpperCase()
-}
-
-function formatDate(iso: string): string {
-  const d = new Date(iso)
-  const date = d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
-  const time = d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
-  return `${date} om ${time} uur`
-}
-
-function openEditRole(member: Member) {
-  selectedMember.value = member
-  isEditRoleDialogOpen.value = true
-}
-
-function openRemoveDialog(member: Member) {
-  memberToRemove.value = member
-  isRemoveDialogOpen.value = true
-}
-
-function confirmRemoveMember() {
-  if (!memberToRemove.value) return
-
-  removeMember(memberToRemove.value.id, {
-    onSuccess: () => {
-      isRemoveDialogOpen.value = false
-      memberToRemove.value = null
-      showRemoveSuccess.value = true
-    },
-  })
-}
-
-function openRevokeDialog(invitation: { id: string; email: string }) {
-  invitationToRevoke.value = invitation
-  isRevokeDialogOpen.value = true
-}
-
-function openEmailChangeDialog(member: Member) {
-  memberToChangeEmail.value = member
-  newMemberEmail.value = ''
-  adminEmailErrors.value = {}
-  isEmailChangeDialogOpen.value = true
-}
-
-function confirmEmailChange() {
-  if (!memberToChangeEmail.value) return
-  adminEmailErrors.value = {}
-
-  adminChangeEmail(
-    { userId: memberToChangeEmail.value.id, newEmail: newMemberEmail.value },
-    {
-      onSuccess: () => {
-        isEmailChangeDialogOpen.value = false
-        memberToChangeEmail.value = null
-        newMemberEmail.value = ''
-        showEmailChangeSuccess.value = true
-      },
-      onError: (err: unknown) => {
-        const ax = err as { response?: { data?: { errors?: Record<string, string[]> } } }
-        if (ax.response?.data?.errors) {
-          for (const [key, messages] of Object.entries(ax.response.data.errors)) {
-            adminEmailErrors.value[key] = messages[0]
-          }
-        }
-      },
-    },
-  )
-}
-
-function confirmRevokeInvitation() {
-  if (!invitationToRevoke.value) return
-
-  revokeInvitation(invitationToRevoke.value.id, {
-    onSuccess: () => {
-      isRevokeDialogOpen.value = false
-      invitationToRevoke.value = null
-      showRevokeSuccess.value = true
-    },
-  })
-}
-</script>
-
-<template>
-  <!-- Loading -->
-  <VSkeletonLoader
-    v-if="isLoading"
-    type="card"
-  />
-
-  <!-- Error -->
-  <VAlert
-    v-else-if="isError"
-    type="error"
-    class="mb-4"
-  >
-    Kon leden niet laden.
-    <template #append>
-      <VBtn
-        variant="text"
-        @click="refetch()"
-      >
-        Opnieuw proberen
-      </VBtn>
-    </template>
-  </VAlert>
-
-  <template v-else>
-    <!-- Members table -->
-    <VCard class="mb-6">
-      <VCardText>
-        <VRow>
-          <VCol
-            cols="12"
-            md="6"
-          >
-            <AppTextField
-              v-model="memberSearch"
-              placeholder="Zoek op naam of e-mail..."
-              prepend-inner-icon="tabler-search"
-              clearable
-            />
-          </VCol>
-          <VCol
-            v-if="isOrgAdmin"
-            cols="12"
-            md="6"
-            class="d-flex justify-end align-center"
-          >
-            <VBtn
-              prepend-icon="tabler-user-plus"
-              @click="isInviteDialogOpen = true"
-            >
-              Lid uitnodigen
-            </VBtn>
-          </VCol>
-        </VRow>
-      </VCardText>
-
-      <VDataTable
-        :headers="memberHeaders"
-        :items="members"
-        :search="memberSearch"
-        :sort-by="memberSortBy"
-        :items-per-page="10"
-      >
-        <template #item.full_name="{ item }">
-          <div class="d-flex align-center gap-x-3">
-            <VAvatar
-              v-if="item.avatar"
-              size="34"
-              :image="item.avatar"
-            />
-            <VAvatar
-              v-else
-              size="34"
-              color="primary"
-              variant="tonal"
-            >
-              <span class="text-sm">{{ getInitials(item.full_name) }}</span>
-            </VAvatar>
-            <span>{{ item.full_name }}</span>
-          </div>
-        </template>
-
-        <template #item.role="{ item }">
-          <VChip
-            :color="roleColorMap[item.role] ?? 'default'"
-            size="small"
-          >
-            {{ roleLabelMap[item.role] ?? item.role }}
-          </VChip>
-        </template>
-
-        <template #item.actions="{ item }">
-          <div class="d-flex gap-x-1 justify-end">
-            <VBtn
-              icon="tabler-edit"
-              variant="text"
-              size="small"
-              @click="openEditRole(item)"
-            />
-            <VBtn
-              icon="tabler-mail-forward"
-              variant="text"
-              size="small"
-              @click="openEmailChangeDialog(item)"
-            />
-            <VBtn
-              icon="tabler-trash"
-              variant="text"
-              size="small"
-              color="error"
-              @click="openRemoveDialog(item)"
-            />
-          </div>
-        </template>
-
-        <template #no-data>
-          <div class="text-center pa-4 text-disabled">
-            <VIcon
-              icon="tabler-users-minus"
-              size="48"
-              class="mb-2"
-            />
-            <p>Geen leden gevonden</p>
-          </div>
-        </template>
-      </VDataTable>
-    </VCard>
-
-    <!-- Pending invitations -->
-    <VCard
-      v-if="isOrgAdmin && pendingInvitations.length > 0"
-    >
-      <VCardTitle>Openstaande uitnodigingen</VCardTitle>
-      <VList>
-        <VListItem
-          v-for="invitation in pendingInvitations"
-          :key="invitation.id"
-        >
-          <template #prepend>
-            <VAvatar
-              color="warning"
-              variant="tonal"
-              size="34"
-            >
-              <VIcon icon="tabler-mail" />
-            </VAvatar>
-          </template>
-
-          <VListItemTitle>
-            {{ invitation.email }}
-            <VChip
-              :color="roleColorMap[invitation.role] ?? 'default'"
-              size="x-small"
-              class="ms-2"
-            >
-              {{ roleLabelMap[invitation.role] ?? invitation.role }}
-            </VChip>
-          </VListItemTitle>
-          <VListItemSubtitle>
-            Verloopt op {{ formatDate(invitation.expires_at) }}
-          </VListItemSubtitle>
-
-          <template #append>
-            <VBtn
-              variant="text"
-              color="error"
-              size="small"
-              @click="openRevokeDialog(invitation)"
-            >
-              Intrekken
-            </VBtn>
-          </template>
-        </VListItem>
-      </VList>
-    </VCard>
-  </template>
-
-  <!-- Dialogs -->
-  <InviteMemberDialog
-    v-if="isOrgAdmin"
-    v-model="isInviteDialogOpen"
-    :org-id="orgId"
-  />
-
-  <EditMemberRoleDialog
-    v-if="selectedMember"
-    v-model="isEditRoleDialogOpen"
-    :org-id="orgId"
-    :member="selectedMember"
-  />
-
-  <!-- Remove member confirmation -->
-  <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 de organisatie?
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="isRemoveDialogOpen = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="error"
-          :loading="isRemoving"
-          @click="confirmRemoveMember"
-        >
-          Verwijderen
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-
-  <!-- Revoke invitation confirmation -->
-  <VDialog
-    v-model="isRevokeDialogOpen"
-    max-width="400"
-  >
-    <VCard title="Uitnodiging intrekken">
-      <VCardText>
-        Weet je zeker dat je de uitnodiging voor <strong>{{ invitationToRevoke?.email }}</strong> wilt intrekken?
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="isRevokeDialogOpen = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="error"
-          :loading="isRevoking"
-          @click="confirmRevokeInvitation"
-        >
-          Intrekken
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-
-  <!-- Change email dialog -->
-  <VDialog
-    v-model="isEmailChangeDialogOpen"
-    max-width="420"
-  >
-    <VCard title="E-mailadres wijzigen">
-      <VCardText>
-        <p class="text-body-2 text-medium-emphasis mb-4">
-          Wijzig het e-mailadres van <strong>{{ memberToChangeEmail?.full_name }}</strong>.
-          Er wordt een verificatiemail verstuurd naar het nieuwe adres.
-        </p>
-        <AppTextField
-          v-model="newMemberEmail"
-          label="Nieuw e-mailadres"
-          type="email"
-          :error-messages="adminEmailErrors.new_email"
-        />
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="tonal"
-          @click="isEmailChangeDialogOpen = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isChangingMemberEmail"
-          :disabled="!newMemberEmail"
-          @click="confirmEmailChange"
-        >
-          Verificatiemail versturen
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-
-  <!-- Success snackbars -->
-  <VSnackbar
-    v-model="showRemoveSuccess"
-    color="success"
-    :timeout="3000"
-  >
-    Lid verwijderd
-  </VSnackbar>
-  <VSnackbar
-    v-model="showRevokeSuccess"
-    color="success"
-    :timeout="3000"
-  >
-    Uitnodiging ingetrokken
-  </VSnackbar>
-  <VSnackbar
-    v-model="showEmailChangeSuccess"
-    color="success"
-    :timeout="4000"
-  >
-    Verificatiemail verstuurd
-  </VSnackbar>
-</template>
diff --git a/apps/app/src/components/persons/PersonDetailPanel.vue b/apps/app/src/components/persons/PersonDetailPanel.vue
index 35c8ddb6..0f0be4c6 100644
--- a/apps/app/src/components/persons/PersonDetailPanel.vue
+++ b/apps/app/src/components/persons/PersonDetailPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { usePersonDetail, useUpdatePerson } from '@/composables/api/usePersons'
 import { useConfirmMatch, useDismissMatch, useManualLinkPerson, useUnlinkPerson } from '@/composables/api/useIdentityMatches'
-import { useMemberList } from '@/composables/api/useMembers'
+import { useMembersList } from '@/composables/api/useMembers'
 import type { Person, PersonStatus } from '@/types/person'
 import type { Member } from '@/types/member'
 
@@ -31,7 +31,7 @@ const { mutate: manualLink, isPending: isManualLinking } = useManualLinkPerson(o
 const { mutate: unlinkPerson, isPending: isUnlinking } = useUnlinkPerson(orgIdRef, eventIdRef)
 
 // Members for manual link
-const { data: membersResponse } = useMemberList(orgIdRef)
+const { data: membersResponse } = useMembersList('organisation', orgIdRef)
 
 const activeTab = ref('info')
 
diff --git a/apps/app/src/composables/api/useAdmin.ts b/apps/app/src/composables/api/useAdmin.ts
index 8c44e032..5b6a675c 100644
--- a/apps/app/src/composables/api/useAdmin.ts
+++ b/apps/app/src/composables/api/useAdmin.ts
@@ -5,14 +5,11 @@ import type {
   ActivityLogEntry,
   AdminOrganisation,
   AdminOrganisationDetail,
-  AdminOrganisationMember,
   AdminUser,
   CreateOrganisationPayload,
-  InviteMemberPayload,
   PlatformStats,
   UpdateAdminOrganisationPayload,
   UpdateAdminUserPayload,
-  UpdateMemberRolePayload,
 } from '@/types/admin'
 
 interface ApiResponse<T> {
@@ -107,55 +104,6 @@ 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>>) {
diff --git a/apps/app/src/composables/api/useMembers.ts b/apps/app/src/composables/api/useMembers.ts
index cdb64dc8..994c3230 100644
--- a/apps/app/src/composables/api/useMembers.ts
+++ b/apps/app/src/composables/api/useMembers.ts
@@ -8,6 +8,7 @@ import type {
   InviteMemberPayload,
   Member,
   MemberListResponse,
+  MemberScope,
   UpdateMemberRolePayload,
 } from '@/types/member'
 
@@ -17,55 +18,92 @@ interface ApiResponse<T> {
   message?: string
 }
 
-export function useMemberList(orgId: Ref<string>) {
+function memberListKey(scope: MemberScope, orgId: Ref<string>) {
+  return ['members', scope, orgId] as const
+}
+
+function invalidateScopedKeys(scope: MemberScope, orgId: Ref<string>, queryClient: ReturnType<typeof useQueryClient>) {
+  queryClient.invalidateQueries({ queryKey: memberListKey(scope, orgId) })
+  if (scope === 'platform')
+    queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', orgId] })
+}
+
+function endpointList(scope: MemberScope, orgId: string) {
+  return scope === 'platform'
+    ? `/admin/organisations/${orgId}`
+    : `/organisations/${orgId}/members`
+}
+
+function endpointInvite(scope: MemberScope, orgId: string) {
+  return scope === 'platform'
+    ? `/admin/organisations/${orgId}/invite`
+    : `/organisations/${orgId}/invite`
+}
+
+function endpointMember(scope: MemberScope, orgId: string, userId: string) {
+  return scope === 'platform'
+    ? `/admin/organisations/${orgId}/members/${userId}`
+    : `/organisations/${orgId}/members/${userId}`
+}
+
+export function useMembersList(scope: MemberScope, orgId: Ref<string>) {
   return useQuery({
-    queryKey: ['members', orgId],
+    queryKey: memberListKey(scope, orgId),
     queryFn: async () => {
-      const { data } = await apiClient.get<MemberListResponse>(`/organisations/${orgId.value}/members`)
+      const url = endpointList(scope, orgId.value)
+      if (scope === 'platform') {
+        const { data } = await apiClient.get<ApiResponse<{ members: Member[] }>>(url)
+        return {
+          data: data.data.members,
+          meta: {
+            total_members: data.data.members.length,
+            pending_invitations_count: 0,
+            pending_invitations: [],
+          },
+        } satisfies MemberListResponse
+      }
+      const { data } = await apiClient.get<MemberListResponse>(url)
       return data
     },
     enabled: () => !!orgId.value,
   })
 }
 
-export function useInviteMember(orgId: Ref<string>) {
+export function useInviteMember(scope: MemberScope, orgId: Ref<string>) {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (payload: InviteMemberPayload) => {
-      const { data } = await apiClient.post<ApiResponse<Member>>(`/organisations/${orgId.value}/invite`, payload)
+      const { data } = await apiClient.post<ApiResponse<Member>>(endpointInvite(scope, orgId.value), payload)
       return data.data
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
-    },
+    onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
   })
 }
 
-export function useUpdateMemberRole(orgId: Ref<string>) {
+export function useUpdateMemberRole(scope: MemberScope, orgId: Ref<string>) {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async ({ userId, role }: UpdateMemberRolePayload) => {
-      const { data } = await apiClient.put<ApiResponse<Member>>(`/organisations/${orgId.value}/members/${userId}`, { role })
+      const { data } = await apiClient.put<ApiResponse<Member>>(
+        endpointMember(scope, orgId.value, userId),
+        { role },
+      )
       return data.data
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
-    },
+    onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
   })
 }
 
-export function useRemoveMember(orgId: Ref<string>) {
+export function useRemoveMember(scope: MemberScope, orgId: Ref<string>) {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (userId: string) => {
-      await apiClient.delete(`/organisations/${orgId.value}/members/${userId}`)
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
+      await apiClient.delete(endpointMember(scope, orgId.value, userId))
     },
+    onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
   })
 }
 
@@ -77,7 +115,7 @@ export function useRevokeInvitation(orgId: Ref<string>) {
       await apiClient.delete(`/organisations/${orgId.value}/invitations/${invitationId}`)
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
+      queryClient.invalidateQueries({ queryKey: memberListKey('organisation', orgId) })
     },
   })
 }
diff --git a/apps/app/src/pages/platform/organisations/[id].vue b/apps/app/src/pages/platform/organisations/[id].vue
index c842915d..42c47def 100644
--- a/apps/app/src/pages/platform/organisations/[id].vue
+++ b/apps/app/src/pages/platform/organisations/[id].vue
@@ -3,13 +3,16 @@ import {
   useAdminOrganisation,
   useUpdateAdminOrganisation,
   useDeleteAdminOrganisation,
-  useInviteOrganisationMember,
-  useRemoveOrganisationMember,
-  useUpdateOrganisationMemberRole,
 } from '@/composables/api/useAdmin'
+import {
+  useInviteMember,
+  useRemoveMember,
+  useUpdateMemberRole,
+} from '@/composables/api/useMembers'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
-import type { BillingStatus, InviteMemberPayload, UpdateAdminOrganisationPayload } from '@/types/admin'
+import type { BillingStatus, UpdateAdminOrganisationPayload } from '@/types/admin'
+import type { InviteMemberPayload, OrganisationRole } from '@/types/member'
 
 definePage({
   meta: {
@@ -166,7 +169,7 @@ function openAsOrganiser() {
 const isInviteDialogOpen = ref(false)
 const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
 const inviteError = ref('')
-const { mutate: inviteMember, isPending: isInviting } = useInviteOrganisationMember()
+const { mutate: inviteMember, isPending: isInviting } = useInviteMember('platform', orgId)
 
 function openInviteDialog() {
   inviteForm.value = { email: '', role: 'org_member' }
@@ -177,11 +180,11 @@ function openInviteDialog() {
 function submitInvite() {
   inviteError.value = ''
   inviteMember(
-    { organisationId: orgId.value, payload: inviteForm.value },
+    inviteForm.value,
     {
-      onSuccess: (data) => {
+      onSuccess: () => {
         isInviteDialogOpen.value = false
-        showSnackbar(data.message ?? 'Uitnodiging verstuurd', 'success')
+        showSnackbar('Uitnodiging verstuurd', 'success')
       },
       onError: (err: unknown) => {
         const error = err as { response?: { data?: { message?: string } } }
@@ -194,7 +197,7 @@ function submitInvite() {
 // ─── Remove Member ─────────────────────────────────────────
 const isRemoveDialogOpen = ref(false)
 const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
-const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
+const { mutate: removeMember, isPending: isRemoving } = useRemoveMember('platform', orgId)
 
 function openRemoveDialog(member: { id: string; full_name: string }) {
   memberToRemove.value = member
@@ -203,24 +206,21 @@ function openRemoveDialog(member: { id: string; full_name: string }) {
 
 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')
-      },
+  removeMember(memberToRemove.value.id, {
+    onSuccess: () => {
+      isRemoveDialogOpen.value = false
+      memberToRemove.value = null
+      showSnackbar('Lid verwijderd', 'success')
     },
-  )
+  })
 }
 
 // ─── Update Member Role ────────────────────────────────────
-const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
+const { mutate: updateMemberRole } = useUpdateMemberRole('platform', orgId)
 
 function onRoleChange(userId: string, newRole: string) {
   updateMemberRole(
-    { organisationId: orgId.value, userId, payload: { role: newRole } },
+    { userId, role: newRole as OrganisationRole },
     {
       onSuccess: () => {
         showSnackbar('Rol bijgewerkt', 'success')
diff --git a/apps/app/src/types/admin.ts b/apps/app/src/types/admin.ts
index f8003ae1..e4d56e33 100644
--- a/apps/app/src/types/admin.ts
+++ b/apps/app/src/types/admin.ts
@@ -97,28 +97,11 @@ export interface StartImpersonationPayload {
   mfa_method: 'totp' | 'email' | 'backup_code'
 }
 
-export interface AdminOrganisationMember {
-  id: string
-  first_name: string
-  last_name: string
-  full_name: string
-  email: string
-  role: string
-  avatar: string | null
-}
+import type { Member } from './member'
 
 export interface AdminOrganisationDetail {
   organisation: AdminOrganisation
-  members: AdminOrganisationMember[]
-}
-
-export interface InviteMemberPayload {
-  email: string
-  role: string
-}
-
-export interface UpdateMemberRolePayload {
-  role: string
+  members: Member[]
 }
 
 export interface CreateOrganisationPayload {
diff --git a/apps/app/src/types/member.ts b/apps/app/src/types/member.ts
index c3862db6..669de078 100644
--- a/apps/app/src/types/member.ts
+++ b/apps/app/src/types/member.ts
@@ -1,3 +1,5 @@
+export type MemberScope = 'organisation' | 'platform'
+
 export interface Member {
   id: string
   first_name: string