From a8a2bc92d1e1e5b0bb39567ebaae240161eb1f37 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 15 Apr 2026 00:59:45 +0200
Subject: [PATCH] feat: refactor organisation pages with tabs, members tab, and
 danger zone

Organizer org page (/organisation):
- Timestamps moved below title as muted caption
- VTabs with Algemeen (details) and Leden (members) tabs
- Members content embedded from separate page with full functionality:
  invite, edit role, change email, remove, pending invitations

Platform org detail (/platform/organisations/[id]):
- Timestamps moved below title alongside slug
- VTabs with Algemeen and Leden tabs
- Danger zone redesigned: type-to-confirm delete dialog, disabled
  Transfer Ownership button with "Nog niet beschikbaar" tooltip

Navigation:
- Removed standalone "Leden" menu item (now a tab on org page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/app/src/navigation/vertical/index.ts     |   7 -
 apps/app/src/pages/organisation/index.vue     | 557 ++++++++++++++++--
 .../src/pages/platform/organisations/[id].vue | 414 ++++++++-----
 3 files changed, 775 insertions(+), 203 deletions(-)

diff --git a/apps/app/src/navigation/vertical/index.ts b/apps/app/src/navigation/vertical/index.ts
index 3f249a2f..2499467f 100644
--- a/apps/app/src/navigation/vertical/index.ts
+++ b/apps/app/src/navigation/vertical/index.ts
@@ -17,13 +17,6 @@ export const orgNavItems = [
     to: { name: 'organisation' },
     icon: { icon: 'tabler-building' },
   },
-  {
-    title: 'Leden',
-    to: { name: 'organisation-members' },
-    icon: { icon: 'tabler-users-group' },
-    action: 'read',
-    subject: 'members',
-  },
   {
     title: 'Bedrijven',
     to: { name: 'organisation-companies' },
diff --git a/apps/app/src/pages/organisation/index.vue b/apps/app/src/pages/organisation/index.vue
index 844c726b..7c7f4923 100644
--- a/apps/app/src/pages/organisation/index.vue
+++ b/apps/app/src/pages/organisation/index.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import { useMyOrganisation } from '@/composables/api/useOrganisations'
+import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
+import { useAdminChangeEmail } from '@/composables/api/useAccount'
 import { useAuthStore } from '@/stores/useAuthStore'
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
 import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
+import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
+import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
 import type { Organisation } from '@/types/organisation'
+import type { Member } from '@/types/member'
 
+const route = useRoute()
+const router = useRouter()
 const authStore = useAuthStore()
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
 
 const { data: organisation, isLoading, isError, refetch } = useMyOrganisation()
 
-const isEditDialogOpen = ref(false)
-
 const isOrgAdmin = computed(() => {
   const role = authStore.currentOrganisation?.role
   return role === 'org_admin' || authStore.isSuperAdmin
@@ -22,6 +31,92 @@ const statusColor: Record<Organisation['billing_status'], string> = {
   cancelled: 'error',
 }
 
+// ─── Tabs ──────────────────────────────────────────────────
+const tabs = [
+  { value: 'algemeen', label: 'Algemeen', icon: 'tabler-building' },
+  { value: 'leden', label: 'Leden', icon: 'tabler-users-group' },
+]
+
+const activeTab = computed({
+  get: () => {
+    const tab = route.query.tab as string
+    return tabs.some(t => t.value === tab) ? tab : 'algemeen'
+  },
+  set: (value: string) => {
+    router.replace({ query: { ...route.query, tab: value } })
+  },
+})
+
+// ─── Edit dialog ───────────────────────────────────────────
+const isEditDialogOpen = ref(false)
+
+// ─── Members ───────────────────────────────────────────────
+const { data: memberData, isLoading: membersLoading, isError: membersError, refetch: refetchMembers } = useMemberList(orgId)
+
+const members = computed(() => memberData.value?.data ?? [])
+const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
+
+const isInviteDialogOpen = ref(false)
+
+const isEditRoleDialogOpen = ref(false)
+const selectedMember = ref<Member | null>(null)
+
+const isRemoveDialogOpen = ref(false)
+const memberToRemove = ref<Member | null>(null)
+const { mutate: removeMember, isPending: isRemoving } = useRemoveMember(orgId)
+
+const isRevokeDialogOpen = ref(false)
+const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
+const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
+
+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(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: 'full_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) {
   return new Date(iso).toLocaleDateString('nl-NL', {
     year: 'numeric',
@@ -29,6 +124,74 @@ function formatDate(iso: string) {
     day: '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 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>
@@ -58,7 +221,7 @@ function formatDate(iso: string) {
 
     <template v-else-if="organisation">
       <!-- Header -->
-      <div class="d-flex justify-space-between align-center mb-6">
+      <div class="d-flex justify-space-between align-center mb-2">
         <div class="d-flex align-center gap-x-3">
           <h4 class="text-h4">
             {{ organisation.name }}
@@ -79,54 +242,356 @@ function formatDate(iso: string) {
         </VBtn>
       </div>
 
-      <!-- Info card -->
-      <VCard>
-        <VCardText>
-          <VRow>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <h6 class="text-h6 mb-1">
-                Slug
-              </h6>
-              <p class="text-body-1 text-disabled mb-0">
-                {{ organisation.slug }}
-              </p>
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <h6 class="text-h6 mb-1">
-                Aangemaakt op
-              </h6>
-              <p class="text-body-1 text-disabled mb-0">
-                {{ formatDate(organisation.created_at) }}
-              </p>
-            </VCol>
-            <VCol
-              cols="12"
-              md="4"
-            >
-              <h6 class="text-h6 mb-1">
-                Status
-              </h6>
-              <VChip
-                :color="statusColor[organisation.billing_status]"
-                size="small"
-              >
-                {{ organisation.billing_status }}
-              </VChip>
-            </VCol>
-          </VRow>
-        </VCardText>
-      </VCard>
+      <!-- Timestamps -->
+      <p class="text-caption text-medium-emphasis mb-6">
+        Aangemaakt op {{ formatDate(organisation.created_at) }}
+      </p>
 
+      <!-- Tabs -->
+      <VTabs
+        v-model="activeTab"
+        class="mb-6"
+      >
+        <VTab
+          v-for="tab in tabs"
+          :key="tab.value"
+          :value="tab.value"
+          :prepend-icon="tab.icon"
+        >
+          {{ tab.label }}
+        </VTab>
+      </VTabs>
+
+      <VWindow
+        v-model="activeTab"
+        class="disable-tab-transition"
+      >
+        <!-- Algemeen tab -->
+        <VWindowItem value="algemeen">
+          <VCard>
+            <VCardText>
+              <VRow>
+                <VCol
+                  cols="12"
+                  md="4"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Slug
+                  </h6>
+                  <p class="text-body-1 text-disabled mb-0">
+                    {{ organisation.slug }}
+                  </p>
+                </VCol>
+                <VCol
+                  cols="12"
+                  md="4"
+                >
+                  <h6 class="text-h6 mb-1">
+                    Status
+                  </h6>
+                  <VChip
+                    :color="statusColor[organisation.billing_status]"
+                    size="small"
+                  >
+                    {{ organisation.billing_status }}
+                  </VChip>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </VCard>
+        </VWindowItem>
+
+        <!-- Leden tab -->
+        <VWindowItem value="leden">
+          <!-- Loading -->
+          <VSkeletonLoader
+            v-if="membersLoading"
+            type="card"
+          />
+
+          <!-- Error -->
+          <VAlert
+            v-else-if="membersError"
+            type="error"
+            class="mb-4"
+          >
+            Kon leden niet laden.
+            <template #append>
+              <VBtn
+                variant="text"
+                @click="refetchMembers()"
+              >
+                Opnieuw proberen
+              </VBtn>
+            </template>
+          </VAlert>
+
+          <template v-else>
+            <!-- Invite button -->
+            <div
+              v-if="isOrgAdmin"
+              class="d-flex justify-end mb-4"
+            >
+              <VBtn
+                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.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">
+                    <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>
+              </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>
+        </VWindowItem>
+      </VWindow>
+
+      <!-- Dialogs -->
       <EditOrganisationDialog
         v-model="isEditDialogOpen"
         :organisation="organisation"
       />
+
+      <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>
   </div>
 </template>
diff --git a/apps/app/src/pages/platform/organisations/[id].vue b/apps/app/src/pages/platform/organisations/[id].vue
index a57441bb..ccdc676c 100644
--- a/apps/app/src/pages/platform/organisations/[id].vue
+++ b/apps/app/src/pages/platform/organisations/[id].vue
@@ -48,7 +48,23 @@ const roleOptions = [
   { title: 'Lid', value: 'org_member' },
 ]
 
-// Edit dialog
+// ─── Tabs ──────────────────────────────────────────────────
+const tabs = [
+  { value: 'algemeen', label: 'Algemeen', icon: 'tabler-building' },
+  { value: 'leden', label: 'Leden', icon: 'tabler-users-group' },
+]
+
+const activeTab = computed({
+  get: () => {
+    const tab = route.query.tab as string
+    return tabs.some(t => t.value === tab) ? tab : 'algemeen'
+  },
+  set: (value: string) => {
+    router.replace({ query: { ...route.query, tab: value } })
+  },
+})
+
+// ─── Edit dialog ───────────────────────────────────────────
 const isEditDialogOpen = ref(false)
 const editForm = ref<UpdateAdminOrganisationPayload>({})
 const { mutate: updateOrg, isPending: isUpdating } = useUpdateAdminOrganisation()
@@ -75,11 +91,22 @@ function submitEdit() {
   )
 }
 
-// Delete
+// ─── Delete (type-to-confirm) ──────────────────────────────
 const isDeleteDialogOpen = ref(false)
+const deleteConfirmName = ref('')
 const { mutate: deleteOrg, isPending: isDeleting } = useDeleteAdminOrganisation()
 
+const deleteConfirmValid = computed(() =>
+  deleteConfirmName.value === org.value?.name,
+)
+
+function openDeleteDialog() {
+  deleteConfirmName.value = ''
+  isDeleteDialogOpen.value = true
+}
+
 function confirmDelete() {
+  if (!deleteConfirmValid.value) return
   deleteOrg(orgId.value, {
     onSuccess: () => {
       router.push({ name: 'platform-organisations' })
@@ -87,14 +114,14 @@ function confirmDelete() {
   })
 }
 
-// Open as organiser
+// ─── Open as organiser ─────────────────────────────────────
 function openAsOrganiser() {
   if (!org.value) return
   orgStore.setActiveOrganisation(org.value.id)
   router.push({ name: 'dashboard' })
 }
 
-// ─── Invite Member ──────────────────────────────────────────
+// ─── Invite Member ─────────────────────────────────────────
 const isInviteDialogOpen = ref(false)
 const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
 const inviteError = ref('')
@@ -123,7 +150,7 @@ function submitInvite() {
   )
 }
 
-// ─── Remove Member ──────────────────────────────────────────
+// ─── Remove Member ─────────────────────────────────────────
 const isRemoveDialogOpen = ref(false)
 const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
 const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
@@ -147,7 +174,7 @@ function confirmRemove() {
   )
 }
 
-// ─── Update Member Role ─────────────────────────────────────
+// ─── Update Member Role ────────────────────────────────────
 const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
 
 function onRoleChange(userId: string, newRole: string) {
@@ -161,7 +188,7 @@ function onRoleChange(userId: string, newRole: string) {
   )
 }
 
-// ─── Snackbar ───────────────────────────────────────────────
+// ─── Snackbar ──────────────────────────────────────────────
 const snackbar = ref({ show: false, message: '', color: 'success' })
 
 function showSnackbar(message: string, color: string) {
@@ -206,7 +233,7 @@ function formatDate(iso: string): string {
 
     <template v-else-if="org">
       <!-- Header -->
-      <div class="d-flex align-center justify-space-between mb-6">
+      <div class="d-flex align-center justify-space-between mb-2">
         <div class="d-flex align-center gap-x-3">
           <VBtn
             icon="tabler-arrow-left"
@@ -215,19 +242,22 @@ function formatDate(iso: string): string {
             :to="{ name: 'platform-organisations' }"
           />
           <div>
-            <h4 class="text-h4">
-              {{ org.name }}
+            <div class="d-flex align-center gap-x-2">
+              <h4 class="text-h4">
+                {{ org.name }}
+              </h4>
               <VChip
                 :color="billingStatusColor[org.billing_status]"
                 size="small"
-                class="ms-2"
               >
                 {{ org.billing_status_label ?? org.billing_status }}
               </VChip>
-            </h4>
-            <p class="text-body-2 text-disabled mb-0">
+            </div>
+            <span class="text-caption text-medium-emphasis">
               {{ org.slug }}
-            </p>
+              &middot; Aangemaakt op {{ formatDate(org.created_at) }}
+              &middot; Gewijzigd op {{ formatDate(org.updated_at) }}
+            </span>
           </div>
         </div>
         <div class="d-flex gap-x-2">
@@ -247,8 +277,8 @@ function formatDate(iso: string): string {
         </div>
       </div>
 
-      <!-- Info Cards -->
-      <VRow class="mb-6">
+      <!-- KPI Cards -->
+      <VRow class="mb-6 mt-4">
         <VCol
           cols="12"
           md="4"
@@ -335,142 +365,212 @@ function formatDate(iso: string): string {
         </VCol>
       </VRow>
 
-      <!-- Details Card -->
-      <VCard class="mb-6">
-        <VCardTitle>Details</VCardTitle>
-        <VCardText>
-          <VRow>
-            <VCol
-              cols="12"
-              sm="6"
-            >
-              <p class="text-body-2 text-disabled mb-1">
-                Aangemaakt
-              </p>
-              <p class="text-body-1">
-                {{ formatDate(org.created_at) }}
-              </p>
-            </VCol>
-            <VCol
-              cols="12"
-              sm="6"
-            >
-              <p class="text-body-2 text-disabled mb-1">
-                Laatste wijziging
-              </p>
-              <p class="text-body-1">
-                {{ formatDate(org.updated_at) }}
-              </p>
-            </VCol>
-          </VRow>
-        </VCardText>
-      </VCard>
+      <!-- Tabs -->
+      <VTabs
+        v-model="activeTab"
+        class="mb-6"
+      >
+        <VTab
+          v-for="tab in tabs"
+          :key="tab.value"
+          :value="tab.value"
+          :prepend-icon="tab.icon"
+        >
+          {{ tab.label }}
+        </VTab>
+      </VTabs>
 
-      <!-- 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"
+      <VWindow
+        v-model="activeTab"
+        class="disable-tab-transition"
+      >
+        <!-- Algemeen tab -->
+        <VWindowItem value="algemeen">
+          <VCard>
+            <VCardTitle>Details</VCardTitle>
+            <VCardText>
+              <VRow>
+                <VCol
+                  cols="12"
+                  sm="6"
+                  md="3"
+                >
+                  <p class="text-body-2 text-disabled mb-1">
+                    Slug
+                  </p>
+                  <p class="text-body-1">
+                    {{ org.slug }}
+                  </p>
+                </VCol>
+                <VCol
+                  cols="12"
+                  sm="6"
+                  md="3"
+                >
+                  <p class="text-body-2 text-disabled mb-1">
+                    Billing status
+                  </p>
+                  <VChip
+                    :color="billingStatusColor[org.billing_status]"
+                    size="small"
                   >
-                    <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"
+                    {{ org.billing_status_label ?? org.billing_status }}
+                  </VChip>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </VCard>
+        </VWindowItem>
+
+        <!-- Leden tab -->
+        <VWindowItem value="leden">
+          <div class="d-flex justify-end mb-4">
+            <VBtn
+              prepend-icon="tabler-user-plus"
+              @click="openInviteDialog"
+            >
+              Lid uitnodigen
+            </VBtn>
+          </div>
+
+          <VCard>
+            <VTable v-if="members.length > 0">
+              <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"
                 >
-                  <template #activator="{ props }">
-                    <span v-bind="props">
-                      <IconBtn
-                        disabled
-                        size="small"
+                  <td>
+                    <div class="d-flex align-center gap-x-3 py-2">
+                      <VAvatar
+                        size="34"
+                        :color="member.avatar ? undefined : 'primary'"
+                        variant="tonal"
                       >
-                        <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>
+                        <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-else
+              class="text-center text-disabled"
+            >
+              Geen leden gevonden.
+            </VCardText>
+          </VCard>
+        </VWindowItem>
+      </VWindow>
 
       <!-- Danger Zone -->
-      <VCard>
-        <VCardTitle class="text-error">
-          Gevarenzone
-        </VCardTitle>
+      <VCard
+        variant="outlined"
+        color="error"
+        class="mt-6"
+      >
+        <VCardTitle>Danger Zone</VCardTitle>
         <VCardText>
-          <VBtn
-            color="error"
-            variant="tonal"
-            prepend-icon="tabler-trash"
-            @click="isDeleteDialogOpen = true"
-          >
-            Organisatie verwijderen
-          </VBtn>
+          <div class="d-flex justify-space-between align-center mb-4">
+            <div>
+              <p class="text-subtitle-1 font-weight-medium mb-1">
+                Verwijder organisatie
+              </p>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Alle gegevens van deze organisatie worden permanent verwijderd.
+                Deze actie kan niet ongedaan worden gemaakt.
+              </p>
+            </div>
+            <VBtn
+              color="error"
+              variant="outlined"
+              class="ms-4 flex-shrink-0"
+              @click="openDeleteDialog"
+            >
+              Verwijder
+            </VBtn>
+          </div>
+
+          <VDivider class="mb-4" />
+
+          <div class="d-flex justify-space-between align-center">
+            <div>
+              <p class="text-subtitle-1 font-weight-medium mb-1">
+                Transfer Ownership
+              </p>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Draag het eigenaarschap van deze organisatie over aan een andere gebruiker.
+              </p>
+            </div>
+            <VTooltip location="top">
+              <template #activator="{ props }">
+                <span v-bind="props">
+                  <VBtn
+                    color="error"
+                    variant="outlined"
+                    class="ms-4 flex-shrink-0"
+                    disabled
+                  >
+                    Transfer
+                  </VBtn>
+                </span>
+              </template>
+              Nog niet beschikbaar
+            </VTooltip>
+          </div>
         </VCardText>
       </VCard>
     </template>
@@ -523,15 +623,28 @@ function formatDate(iso: string): string {
       </VCard>
     </VDialog>
 
-    <!-- Delete Dialog -->
+    <!-- Delete Dialog (type-to-confirm) -->
     <VDialog
       v-model="isDeleteDialogOpen"
-      max-width="400"
+      max-width="480"
     >
       <VCard title="Organisatie verwijderen">
         <VCardText>
-          Weet je zeker dat je <strong>{{ org?.name }}</strong> wilt verwijderen?
-          Dit kan niet ongedaan worden gemaakt.
+          <VAlert
+            type="error"
+            variant="tonal"
+            class="mb-4"
+          >
+            Deze actie kan niet ongedaan worden gemaakt. Alle gegevens van
+            deze organisatie worden permanent verwijderd.
+          </VAlert>
+          <p class="text-body-2 mb-2">
+            Typ <strong>{{ org?.name }}</strong> om te bevestigen:
+          </p>
+          <AppTextField
+            v-model="deleteConfirmName"
+            placeholder="Organisatienaam"
+          />
         </VCardText>
         <VCardActions>
           <VSpacer />
@@ -544,9 +657,10 @@ function formatDate(iso: string): string {
           <VBtn
             color="error"
             :loading="isDeleting"
+            :disabled="!deleteConfirmValid"
             @click="confirmDelete"
           >
-            Verwijderen
+            Definitief verwijderen
           </VBtn>
         </VCardActions>
       </VCard>