From 4da74d2bd49982287155afb8e67d9fb88f79bf57 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 22:31:52 +0200
Subject: [PATCH] feat(members): add /members page for organisation-scoped
 member management

---
 apps/app/src/pages/members/index.vue | 437 +++++++++++++++++++++++++++
 apps/app/typed-router.d.ts           |   1 +
 2 files changed, 438 insertions(+)
 create mode 100644 apps/app/src/pages/members/index.vue

diff --git a/apps/app/src/pages/members/index.vue b/apps/app/src/pages/members/index.vue
new file mode 100644
index 00000000..dd45711c
--- /dev/null
+++ b/apps/app/src/pages/members/index.vue
@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import {
+  useMembersList,
+  useRemoveMember,
+  useRevokeInvitation,
+  useUpdateMemberRole,
+} from '@/composables/api/useMembers'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
+import type { Member, OrganisationRole } from '@/types/member'
+
+const authStore = useAuthStore()
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
+
+const isOrgAdmin = computed(() => {
+  const role = authStore.currentOrganisation?.role
+  return role === 'org_admin' || authStore.isSuperAdmin
+})
+
+const { data: memberData, isLoading, isError, refetch } = useMembersList('organisation', orgId)
+
+const members = computed(() => memberData.value?.data ?? [])
+const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
+
+const { mutate: updateRole } = useUpdateMemberRole('organisation', orgId)
+const { mutate: removeMember, isPending: isRemoving } = useRemoveMember('organisation', orgId)
+const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
+
+const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
+  { title: 'Organisatie Beheerder', value: 'org_admin' },
+  { title: 'Organisatie Lid', value: 'org_member' },
+]
+
+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 search = ref('')
+const isInviteDialogOpen = ref(false)
+
+const headers = computed(() => {
+  const h: 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)
+    h.push({ title: 'Acties', key: 'actions', sortable: false, align: 'end' })
+  return h
+})
+
+const sortBy = [{ key: 'full_name', order: 'asc' as const }]
+
+const isRemoveDialogOpen = ref(false)
+const memberToRemove = ref<Member | null>(null)
+
+const isRevokeDialogOpen = ref(false)
+const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
+
+const snackbar = ref({ show: false, message: '', color: 'success' })
+
+function showSnackbar(message: string, color: 'success' | 'error' = 'success') {
+  snackbar.value = { show: true, message, color }
+}
+
+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 onRoleChange(userId: string, newRole: OrganisationRole) {
+  updateRole(
+    { userId, role: newRole },
+    {
+      onSuccess: () => showSnackbar('Rol bijgewerkt'),
+      onError: (err: unknown) => {
+        const data = (err as { response?: { data?: { message?: string } } }).response?.data
+        showSnackbar(data?.message ?? 'Rol kon niet worden bijgewerkt', 'error')
+      },
+    },
+  )
+}
+
+function openRemoveDialog(member: Member) {
+  memberToRemove.value = member
+  isRemoveDialogOpen.value = true
+}
+
+function confirmRemove() {
+  if (!memberToRemove.value) return
+
+  removeMember(memberToRemove.value.id, {
+    onSuccess: () => {
+      isRemoveDialogOpen.value = false
+      memberToRemove.value = null
+      showSnackbar('Lid verwijderd')
+    },
+    onError: (err: unknown) => {
+      const data = (err as { response?: { data?: { message?: string } } }).response?.data
+      showSnackbar(data?.message ?? 'Lid kon niet worden verwijderd', 'error')
+    },
+  })
+}
+
+function openRevokeDialog(invitation: { id: string; email: string }) {
+  invitationToRevoke.value = invitation
+  isRevokeDialogOpen.value = true
+}
+
+function confirmRevoke() {
+  if (!invitationToRevoke.value) return
+
+  revokeInvitation(invitationToRevoke.value.id, {
+    onSuccess: () => {
+      isRevokeDialogOpen.value = false
+      invitationToRevoke.value = null
+      showSnackbar('Uitnodiging ingetrokken')
+    },
+    onError: (err: unknown) => {
+      const data = (err as { response?: { data?: { message?: string } } }).response?.data
+      showSnackbar(data?.message ?? 'Uitnodiging kon niet worden ingetrokken', 'error')
+    },
+  })
+}
+</script>
+
+<template>
+  <div>
+    <!-- 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>
+      <!-- Header -->
+      <div class="d-flex justify-space-between align-center mb-6">
+        <div>
+          <h4 class="text-h4">
+            Leden
+          </h4>
+          <p class="text-body-1 text-disabled mb-0">
+            Beheer de leden van je organisatie
+          </p>
+        </div>
+        <VBtn
+          v-if="isOrgAdmin"
+          prepend-icon="tabler-user-plus"
+          @click="isInviteDialogOpen = true"
+        >
+          Lid uitnodigen
+        </VBtn>
+      </div>
+
+      <!-- Filters -->
+      <div class="d-flex flex-wrap align-center gap-4 mb-4">
+        <AppTextField
+          v-model="search"
+          prepend-inner-icon="tabler-search"
+          placeholder="Zoek op naam of e-mail..."
+          clearable
+          class="min-w-0 flex-fill"
+        />
+      </div>
+
+      <!-- Members table -->
+      <VCard class="mb-6">
+        <VDataTable
+          :headers="headers"
+          :items="members"
+          :search="search"
+          :sort-by="sortBy"
+          :items-per-page="25"
+          hover
+        >
+          <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">
+              <VMenu location="bottom end">
+                <template #activator="{ props: menuProps }">
+                  <VBtn
+                    icon="tabler-edit"
+                    variant="text"
+                    size="small"
+                    title="Rol wijzigen"
+                    v-bind="menuProps"
+                  />
+                </template>
+                <VList density="compact">
+                  <VListItem
+                    v-for="opt in roleOptions"
+                    :key="opt.value"
+                    :active="item.role === opt.value"
+                    @click="onRoleChange(item.id, opt.value)"
+                  >
+                    <VListItemTitle>{{ opt.title }}</VListItemTitle>
+                  </VListItem>
+                </VList>
+              </VMenu>
+              <VTooltip
+                v-if="item.id === authStore.user?.id"
+                location="top"
+                text="Je kunt jezelf niet verwijderen uit de organisatie"
+              >
+                <template #activator="{ props: tooltipProps }">
+                  <span v-bind="tooltipProps">
+                    <VBtn
+                      icon="tabler-trash"
+                      variant="text"
+                      size="small"
+                      disabled
+                    />
+                  </span>
+                </template>
+              </VTooltip>
+              <VBtn
+                v-else
+                icon="tabler-trash"
+                variant="text"
+                size="small"
+                color="error"
+                title="Verwijderen"
+                @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">
+        <VCardTitle>Openstaande uitnodigingen</VCardTitle>
+        <VList v-if="pendingInvitations.length">
+          <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>
+        <VCardText
+          v-else
+          class="text-center text-disabled py-6"
+        >
+          Geen openstaande uitnodigingen
+        </VCardText>
+      </VCard>
+    </template>
+
+    <!-- Invite Dialog -->
+    <InviteMemberDialog
+      v-if="isOrgAdmin"
+      v-model="isInviteDialogOpen"
+      :org-id="orgId"
+    />
+
+    <!-- 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="confirmRemove"
+          >
+            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="confirmRevoke"
+          >
+            Intrekken
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Snackbar -->
+    <VSnackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+    >
+      {{ snackbar.message }}
+    </VSnackbar>
+  </div>
+</template>
diff --git a/apps/app/typed-router.d.ts b/apps/app/typed-router.d.ts
index a84e74df..f281bde5 100644
--- a/apps/app/typed-router.d.ts
+++ b/apps/app/typed-router.d.ts
@@ -36,6 +36,7 @@ declare module 'vue-router/auto-routes' {
     'forgot-password': RouteRecordInfo<'forgot-password', '/forgot-password', Record<never, never>, Record<never, never>>,
     'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
+    'members': RouteRecordInfo<'members', '/members', Record<never, never>, Record<never, never>>,
     'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
     'organisation-companies': RouteRecordInfo<'organisation-companies', '/organisation/companies', Record<never, never>, Record<never, never>>,
     'organisation-settings': RouteRecordInfo<'organisation-settings', '/organisation/settings', Record<never, never>, Record<never, never>>,