From 230e11cc8ddd22d3b9e34b78db2ea9ca833d4510 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 8 Apr 2026 01:50:38 +0200
Subject: [PATCH] feat: frontend member management

- Leden pagina met VDataTable, rol chips, uitnodigingen sectie
- InviteMemberDialog + EditMemberRoleDialog
- Publieke acceptatiepagina /invitations/[token]
- Router guard uitgebreid met requiresAuth: false support
- MemberCollection backend uitgebreid met volledige pending_invitations lijst
---
 .../Resources/Api/V1/MemberCollection.php     |  11 +-
 ...320000_fix_activity_log_morphs_to_ulid.php |  26 ++
 apps/app/components.d.ts                      |   2 +
 .../members/EditMemberRoleDialog.vue          | 142 +++++++
 .../components/members/InviteMemberDialog.vue | 133 +++++++
 apps/app/src/composables/api/useMembers.ts    | 104 +++++
 apps/app/src/navigation/vertical/index.ts     |   7 +
 apps/app/src/pages/invitations/[token].vue    | 211 ++++++++++
 apps/app/src/pages/organisation/members.vue   | 373 ++++++++++++++++++
 apps/app/src/plugins/1.router/guards.ts       |   2 +-
 apps/app/src/types/member.ts                  |  84 ++++
 apps/app/typed-router.d.ts                    |   2 +
 12 files changed, 1092 insertions(+), 5 deletions(-)
 create mode 100644 api/database/migrations/2026_04_08_320000_fix_activity_log_morphs_to_ulid.php
 create mode 100644 apps/app/src/components/members/EditMemberRoleDialog.vue
 create mode 100644 apps/app/src/components/members/InviteMemberDialog.vue
 create mode 100644 apps/app/src/composables/api/useMembers.ts
 create mode 100644 apps/app/src/pages/invitations/[token].vue
 create mode 100644 apps/app/src/pages/organisation/members.vue
 create mode 100644 apps/app/src/types/member.ts

diff --git a/api/app/Http/Resources/Api/V1/MemberCollection.php b/api/app/Http/Resources/Api/V1/MemberCollection.php
index a541505..295ab6d 100644
--- a/api/app/Http/Resources/Api/V1/MemberCollection.php
+++ b/api/app/Http/Resources/Api/V1/MemberCollection.php
@@ -24,13 +24,16 @@ final class MemberCollection extends ResourceCollection
     {
         $organisation = $request->route('organisation');
 
+        $pendingInvitations = UserInvitation::where('organisation_id', $organisation->id)
+            ->pending()
+            ->where('expires_at', '>', now())
+            ->get();
+
         return [
             'meta' => [
                 'total_members' => $this->collection->count(),
-                'pending_invitations_count' => UserInvitation::where('organisation_id', $organisation->id)
-                    ->pending()
-                    ->where('expires_at', '>', now())
-                    ->count(),
+                'pending_invitations_count' => $pendingInvitations->count(),
+                'pending_invitations' => InvitationResource::collection($pendingInvitations),
             ],
         ];
     }
diff --git a/api/database/migrations/2026_04_08_320000_fix_activity_log_morphs_to_ulid.php b/api/database/migrations/2026_04_08_320000_fix_activity_log_morphs_to_ulid.php
new file mode 100644
index 0000000..77f5fae
--- /dev/null
+++ b/api/database/migrations/2026_04_08_320000_fix_activity_log_morphs_to_ulid.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('activity_log', function (Blueprint $table) {
+            $table->string('subject_id', 26)->nullable()->change();
+            $table->string('causer_id', 26)->nullable()->change();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('activity_log', function (Blueprint $table) {
+            $table->unsignedBigInteger('subject_id')->nullable()->change();
+            $table->unsignedBigInteger('causer_id')->nullable()->change();
+        });
+    }
+};
diff --git a/apps/app/components.d.ts b/apps/app/components.d.ts
index 43bfe24..c581065 100644
--- a/apps/app/components.d.ts
+++ b/apps/app/components.d.ts
@@ -40,10 +40,12 @@ declare module 'vue' {
     DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
     DropZone: typeof import('./src/@core/components/DropZone.vue')['default']
     EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
+    EditMemberRoleDialog: typeof import('./src/components/members/EditMemberRoleDialog.vue')['default']
     EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
     EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
     ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
     I18n: typeof import('./src/@core/components/I18n.vue')['default']
+    InviteMemberDialog: typeof import('./src/components/members/InviteMemberDialog.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
     OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
diff --git a/apps/app/src/components/members/EditMemberRoleDialog.vue b/apps/app/src/components/members/EditMemberRoleDialog.vue
new file mode 100644
index 0000000..85a9cd6
--- /dev/null
+++ b/apps/app/src/components/members/EditMemberRoleDialog.vue
@@ -0,0 +1,142 @@
+<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'
+
+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: any) => {
+          const data = err.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">
+      <VCardText>
+        <VRow class="mb-4">
+          <VCol cols="12">
+            <div class="text-body-1">
+              <strong>{{ member.name }}</strong>
+            </div>
+            <div class="text-body-2 text-disabled">
+              {{ member.email }}
+            </div>
+          </VCol>
+        </VRow>
+
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VSelect
+            v-model="role"
+            label="Rol"
+            :items="roleOptions"
+            :rules="[requiredValidator]"
+            :error-messages="errors.role"
+          />
+        </VForm>
+      </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
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Opslaan
+        </VBtn>
+      </VCardActions>
+    </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
new file mode 100644
index 0000000..78d56e0
--- /dev/null
+++ b/apps/app/src/components/members/InviteMemberDialog.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  orgId: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const orgIdRef = computed(() => props.orgId)
+
+const email = ref('')
+const role = ref<OrganisationRole>('org_member')
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+const showSuccess = ref(false)
+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)
+
+function resetForm() {
+  email.value = ''
+  role.value = 'org_member'
+  errors.value = {}
+  refVForm.value?.reset()
+}
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    inviteMember(
+      { email: email.value, role: role.value },
+      {
+        onSuccess: () => {
+          successEmail.value = email.value
+          modelValue.value = false
+          showSuccess.value = true
+          resetForm()
+        },
+        onError: (err: any) => {
+          const data = err.response?.data
+          if (data?.errors) {
+            errors.value = {
+              email: data.errors.email?.[0] ?? '',
+              role: data.errors.role?.[0] ?? '',
+            }
+          }
+          else if (data?.message) {
+            errors.value = { email: data.message }
+          }
+        },
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="500"
+    @after-leave="resetForm"
+  >
+    <VCard title="Lid uitnodigen">
+      <VCardText>
+        <VForm
+          ref="refVForm"
+          @submit.prevent="onSubmit"
+        >
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="email"
+                label="E-mailadres"
+                type="email"
+                :rules="[requiredValidator, emailValidator]"
+                :error-messages="errors.email"
+                autofocus
+              />
+            </VCol>
+            <VCol cols="12">
+              <VSelect
+                v-model="role"
+                label="Rol"
+                :items="roleOptions"
+                :rules="[requiredValidator]"
+                :error-messages="errors.role"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          variant="text"
+          @click="modelValue = false"
+        >
+          Annuleren
+        </VBtn>
+        <VBtn
+          color="primary"
+          :loading="isPending"
+          @click="onSubmit"
+        >
+          Uitnodigen
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+
+  <VSnackbar
+    v-model="showSuccess"
+    color="success"
+    :timeout="3000"
+  >
+    Uitnodiging verzonden naar {{ successEmail }}
+  </VSnackbar>
+</template>
diff --git a/apps/app/src/composables/api/useMembers.ts b/apps/app/src/composables/api/useMembers.ts
new file mode 100644
index 0000000..cdb64dc
--- /dev/null
+++ b/apps/app/src/composables/api/useMembers.ts
@@ -0,0 +1,104 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Ref } from 'vue'
+import { apiClient } from '@/lib/axios'
+import type {
+  AcceptInvitationPayload,
+  AcceptInvitationResponse,
+  InvitationDetailResponse,
+  InviteMemberPayload,
+  Member,
+  MemberListResponse,
+  UpdateMemberRolePayload,
+} from '@/types/member'
+
+interface ApiResponse<T> {
+  success: boolean
+  data: T
+  message?: string
+}
+
+export function useMemberList(orgId: Ref<string>) {
+  return useQuery({
+    queryKey: ['members', orgId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<MemberListResponse>(`/organisations/${orgId.value}/members`)
+      return data
+    },
+    enabled: () => !!orgId.value,
+  })
+}
+
+export function useInviteMember(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (payload: InviteMemberPayload) => {
+      const { data } = await apiClient.post<ApiResponse<Member>>(`/organisations/${orgId.value}/invite`, payload)
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
+    },
+  })
+}
+
+export function useUpdateMemberRole(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 })
+      return data.data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
+    },
+  })
+}
+
+export function useRemoveMember(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] })
+    },
+  })
+}
+
+export function useRevokeInvitation(orgId: Ref<string>) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (invitationId: string) => {
+      await apiClient.delete(`/organisations/${orgId.value}/invitations/${invitationId}`)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['members', orgId] })
+    },
+  })
+}
+
+export function useInvitationDetail(token: Ref<string>) {
+  return useQuery({
+    queryKey: ['invitation', token],
+    queryFn: async () => {
+      const { data } = await apiClient.get<ApiResponse<InvitationDetailResponse>>(`/invitations/${token.value}`)
+      return data.data
+    },
+    enabled: () => !!token.value,
+    retry: false,
+  })
+}
+
+export function useAcceptInvitation() {
+  return useMutation({
+    mutationFn: async ({ token, ...payload }: AcceptInvitationPayload & { token: string }) => {
+      const { data } = await apiClient.post<AcceptInvitationResponse>(`/invitations/${token}/accept`, payload)
+      return data
+    },
+  })
+}
diff --git a/apps/app/src/navigation/vertical/index.ts b/apps/app/src/navigation/vertical/index.ts
index f447944..4e29633 100644
--- a/apps/app/src/navigation/vertical/index.ts
+++ b/apps/app/src/navigation/vertical/index.ts
@@ -17,4 +17,11 @@ export default [
     to: { name: "organisation" },
     icon: { icon: "tabler-building" },
   },
+  {
+    title: "Leden",
+    to: { name: "organisation-members" },
+    icon: { icon: "tabler-users-group" },
+    action: "read",
+    subject: "members",
+  },
 ];
diff --git a/apps/app/src/pages/invitations/[token].vue b/apps/app/src/pages/invitations/[token].vue
new file mode 100644
index 0000000..aa9382c
--- /dev/null
+++ b/apps/app/src/pages/invitations/[token].vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useInvitationDetail, useAcceptInvitation } from '@/composables/api/useMembers'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { requiredValidator } from '@core/utils/validators'
+import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
+import { themeConfig } from '@themeConfig'
+import type { OrganisationRole } from '@/types/member'
+
+definePage({
+  meta: {
+    layout: 'blank',
+    requiresAuth: false,
+  },
+})
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const token = computed(() => String((route.params as { token: string }).token))
+
+const { data: invitation, isLoading, isError } = useInvitationDetail(token)
+const { mutate: acceptInvitation, isPending: isAccepting } = useAcceptInvitation()
+
+const name = ref('')
+const password = ref('')
+const passwordConfirmation = ref('')
+const isPasswordVisible = ref(false)
+const isPasswordConfirmVisible = ref(false)
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+
+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 passwordMinLength = (value: string) => {
+  return value.length >= 8 || 'Wachtwoord moet minimaal 8 tekens bevatten'
+}
+
+const passwordConfirmed = (value: string) => {
+  return value === password.value || 'Wachtwoorden komen niet overeen'
+}
+
+function onSubmit() {
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    const payload: Record<string, string> = {}
+    if (!invitation.value?.existing_user) {
+      payload.name = name.value
+      payload.password = password.value
+      payload.password_confirmation = passwordConfirmation.value
+    }
+
+    acceptInvitation(
+      { token: token.value, ...payload },
+      {
+        onSuccess: (response) => {
+          authStore.setToken(response.data.token)
+          authStore.setUser(response.data.user)
+          router.replace('/dashboard')
+        },
+        onError: (err: any) => {
+          const data = err.response?.data
+          if (data?.errors) {
+            errors.value = {
+              name: data.errors.name?.[0] ?? '',
+              password: data.errors.password?.[0] ?? '',
+            }
+          }
+          else if (data?.message) {
+            errors.value = { general: data.message }
+          }
+        },
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <div class="d-flex align-center justify-center" style="min-block-size: 100vh;">
+    <VCard
+      max-width="500"
+      class="pa-6"
+      :min-width="400"
+    >
+      <VCardText class="text-center mb-4">
+        <VNodeRenderer :nodes="themeConfig.app.logo" />
+        <h4 class="text-h4 mt-4">
+          {{ themeConfig.app.title }}
+        </h4>
+      </VCardText>
+
+      <!-- Loading -->
+      <VCardText v-if="isLoading">
+        <div class="d-flex justify-center">
+          <VProgressCircular indeterminate />
+        </div>
+      </VCardText>
+
+      <!-- Error: not found -->
+      <VCardText v-else-if="isError">
+        <VAlert type="error">
+          Uitnodiging niet gevonden
+        </VAlert>
+      </VCardText>
+
+      <!-- Expired -->
+      <VCardText v-else-if="invitation?.status === 'expired'">
+        <VAlert type="warning">
+          Deze uitnodiging is verlopen
+        </VAlert>
+      </VCardText>
+
+      <!-- Already accepted -->
+      <VCardText v-else-if="invitation?.status === 'accepted'">
+        <VAlert type="info">
+          Deze uitnodiging is al geaccepteerd
+        </VAlert>
+      </VCardText>
+
+      <!-- Pending: accept form -->
+      <template v-else-if="invitation?.status === 'pending'">
+        <VCardText>
+          <h5 class="text-h5 mb-2">
+            Je bent uitgenodigd voor {{ invitation.organisation.name }}
+          </h5>
+          <p class="text-body-1 mb-4">
+            Rol:
+            <VChip
+              size="small"
+              color="primary"
+            >
+              {{ roleLabelMap[invitation.role] ?? invitation.role }}
+            </VChip>
+          </p>
+
+          <!-- Existing user -->
+          <VAlert
+            v-if="invitation.existing_user"
+            type="info"
+            class="mb-4"
+          >
+            Er bestaat al een account voor {{ invitation.email }}. Log in om te accepteren.
+          </VAlert>
+
+          <VAlert
+            v-if="errors.general"
+            type="error"
+            class="mb-4"
+          >
+            {{ errors.general }}
+          </VAlert>
+
+          <VForm
+            ref="refVForm"
+            @submit.prevent="onSubmit"
+          >
+            <!-- New user fields -->
+            <template v-if="!invitation.existing_user">
+              <AppTextField
+                v-model="name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                class="mb-4"
+              />
+              <AppTextField
+                v-model="password"
+                label="Wachtwoord"
+                :type="isPasswordVisible ? 'text' : 'password'"
+                :rules="[requiredValidator, passwordMinLength]"
+                :error-messages="errors.password"
+                :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+                class="mb-4"
+                @click:append-inner="isPasswordVisible = !isPasswordVisible"
+              />
+              <AppTextField
+                v-model="passwordConfirmation"
+                label="Wachtwoord bevestigen"
+                :type="isPasswordConfirmVisible ? 'text' : 'password'"
+                :rules="[requiredValidator, passwordConfirmed]"
+                :append-inner-icon="isPasswordConfirmVisible ? 'tabler-eye-off' : 'tabler-eye'"
+                class="mb-4"
+                @click:append-inner="isPasswordConfirmVisible = !isPasswordConfirmVisible"
+              />
+            </template>
+
+            <VBtn
+              block
+              type="submit"
+              color="primary"
+              :loading="isAccepting"
+            >
+              Accepteren
+            </VBtn>
+          </VForm>
+        </VCardText>
+      </template>
+    </VCard>
+  </div>
+</template>
diff --git a/apps/app/src/pages/organisation/members.vue b/apps/app/src/pages/organisation/members.vue
new file mode 100644
index 0000000..9141798
--- /dev/null
+++ b/apps/app/src/pages/organisation/members.vue
@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
+import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
+import type { Member } from '@/types/member'
+
+const authStore = useAuthStore()
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
+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(orgId)
+
+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(orgId)
+
+// Revoke invitation
+const isRevokeDialogOpen = ref(false)
+const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
+const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
+
+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 memberHeaders = computed(() => {
+  const headers: Array<{ title: string; key: string; sortable?: boolean }> = [
+    { title: 'Naam', key: 'name' },
+    { title: 'E-mailadres', key: 'email' },
+    { title: 'Rol', key: 'role' },
+  ]
+  if (isOrgAdmin.value) {
+    headers.push({ title: 'Acties', key: 'actions', sortable: false })
+  }
+  return headers
+})
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(p => p[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('nl-NL', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+}
+
+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 confirmRevokeInvitation() {
+  if (!invitationToRevoke.value) return
+
+  revokeInvitation(invitationToRevoke.value.id, {
+    onSuccess: () => {
+      isRevokeDialogOpen.value = false
+      invitationToRevoke.value = null
+      showRevokeSuccess.value = true
+    },
+  })
+}
+</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">
+            {{ orgName }}
+          </p>
+        </div>
+        <VBtn
+          v-if="isOrgAdmin"
+          prepend-icon="tabler-user-plus"
+          @click="isInviteDialogOpen = true"
+        >
+          Lid uitnodigen
+        </VBtn>
+      </div>
+
+      <!-- Members table -->
+      <VCard class="mb-6">
+        <VCardText v-if="members.length === 0">
+          <p class="text-body-1 text-disabled mb-0">
+            Nog geen leden
+          </p>
+        </VCardText>
+        <VDataTable
+          v-else
+          :headers="memberHeaders"
+          :items="members"
+          :items-per-page="-1"
+          hide-default-footer
+        >
+          <template #item.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.name) }}</span>
+              </VAvatar>
+              <span>{{ item.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">
+              <VBtn
+                icon="tabler-edit"
+                variant="text"
+                size="small"
+                @click="openEditRole(item)"
+              />
+              <VBtn
+                icon="tabler-trash"
+                variant="text"
+                size="small"
+                color="error"
+                @click="openRemoveDialog(item)"
+              />
+            </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?.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>
+
+    <!-- Success snackbars -->
+    <VSnackbar
+      v-model="showRemoveSuccess"
+      color="success"
+      :timeout="3000"
+    >
+      Lid verwijderd
+    </VSnackbar>
+    <VSnackbar
+      v-model="showRevokeSuccess"
+      color="success"
+      :timeout="3000"
+    >
+      Uitnodiging ingetrokken
+    </VSnackbar>
+  </div>
+</template>
diff --git a/apps/app/src/plugins/1.router/guards.ts b/apps/app/src/plugins/1.router/guards.ts
index 3be7d65..332f89d 100644
--- a/apps/app/src/plugins/1.router/guards.ts
+++ b/apps/app/src/plugins/1.router/guards.ts
@@ -12,7 +12,7 @@ export function setupGuards(router: Router) {
     }
 
     // Protected pages: redirect to login if not authenticated
-    if (!isPublic && !authStore.isAuthenticated) {
+    if (!isPublic && !authStore.isAuthenticated && to.meta.requiresAuth !== false) {
       return { path: '/login', query: { to: to.fullPath } }
     }
   })
diff --git a/apps/app/src/types/member.ts b/apps/app/src/types/member.ts
new file mode 100644
index 0000000..5161698
--- /dev/null
+++ b/apps/app/src/types/member.ts
@@ -0,0 +1,84 @@
+export interface Member {
+  id: string
+  name: string
+  email: string
+  role: string
+  avatar: string | null
+}
+
+export interface Invitation {
+  id: string
+  email: string
+  role: string
+  status: 'pending' | 'accepted' | 'expired'
+  expires_at: string
+  created_at: string
+}
+
+export type OrganisationRole =
+  | 'org_admin'
+  | 'org_member'
+  | 'event_manager'
+  | 'staff_coordinator'
+  | 'volunteer_coordinator'
+
+export interface MemberListResponse {
+  data: Member[]
+  meta: {
+    total_members: number
+    pending_invitations_count: number
+    pending_invitations: Invitation[]
+  }
+}
+
+export interface InviteMemberPayload {
+  email: string
+  role: OrganisationRole
+}
+
+export interface UpdateMemberRolePayload {
+  userId: string
+  role: OrganisationRole
+}
+
+export interface InvitationDetailResponse {
+  id: string
+  email: string
+  role: string
+  status: 'pending' | 'accepted' | 'expired'
+  organisation: {
+    id: string
+    name: string
+  }
+  existing_user: boolean
+}
+
+export interface AcceptInvitationPayload {
+  name?: string
+  password?: string
+  password_confirmation?: string
+}
+
+export interface AcceptInvitationResponse {
+  success: boolean
+  data: {
+    user: {
+      id: string
+      name: string
+      email: string
+      timezone: string
+      locale: string
+      avatar: string | null
+      organisations: Array<{
+        id: string
+        name: string
+        slug: string
+        role: string
+      }>
+      app_roles: string[]
+      permissions: string[]
+    }
+    token: string
+  }
+  message: string
+}
diff --git a/apps/app/typed-router.d.ts b/apps/app/typed-router.d.ts
index a0d7a81..48d10b7 100644
--- a/apps/app/typed-router.d.ts
+++ b/apps/app/typed-router.d.ts
@@ -23,7 +23,9 @@ declare module 'vue-router/auto-routes' {
     'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
     'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
     'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
+    'organisation-members': RouteRecordInfo<'organisation-members', '/organisation/members', Record<never, never>, Record<never, never>>,
   }
 }