refactor: move KPI cards into Algemeen tab, Danger Zone into own tab

Platform org detail:
- KPI cards (events, users, persons) moved inside Algemeen tab
- Danger Zone moved from below tabs into a dedicated "Danger Zone" tab
  with red-colored tab icon
- Tab bar now shows: Algemeen | Leden | Danger Zone

Platform user detail:
- Added VTabs with Algemeen (profile info) and Organisaties tabs
- Timestamps moved below title as muted caption
- Content reorganised into tab structure matching org detail pattern

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/app/src/pages/platform/users/[id].vue

@@ -14,10 +14,21 @@ definePage({
 })
 
 const route = useRoute()
+const router = useRouter()
 const impersonationStore = useImpersonationStore()
 
 const userId = computed(() => String((route.params as { id: string }).id))
 
+const activeTab = computed({
+  get: () => {
+    const tab = route.query.tab as string
+    return ['algemeen', 'organisaties'].includes(tab) ? tab : 'algemeen'
+  },
+  set: (value: string) => {
+    router.replace({ query: { ...route.query, tab: value } })
+  },
+})
+
 const { data: user, isLoading, isError, refetch } = useAdminUser(userId)
 
 const roleColorMap: Record<string, string> = {
@@ -123,7 +134,7 @@ function getInitials(name: string): string {
 
     <template v-else-if="user">
       <!-- 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"
@@ -145,21 +156,23 @@ function getInitials(name: string): string {
             <span>{{ getInitials(user.full_name) }}</span>
           </VAvatar>
           <div>
-            <h4 class="text-h4">
-              {{ user.full_name }}
+            <div class="d-flex align-center gap-x-2">
+              <h4 class="text-h4">
+                {{ user.full_name }}
+              </h4>
               <VChip
                 v-for="role in user.roles"
                 :key="role"
                 :color="roleColorMap[role] ?? 'default'"
                 size="small"
-                class="ms-1"
               >
                 {{ role }}
               </VChip>
-            </h4>
-            <p class="text-body-2 text-disabled mb-0">
+            </div>
+            <span class="text-caption text-medium-emphasis">
               {{ user.email }}
-            </p>
+              &middot; Aangemaakt op {{ formatDate(user.created_at) }}
+            </span>
           </div>
         </div>
         <div class="d-flex gap-x-2">
@@ -181,19 +194,36 @@ function getInitials(name: string): string {
         </div>
       </div>
 
-      <!-- User Info -->
-      <VRow class="mb-6">
-        <VCol
-          cols="12"
-          md="6"
+      <!-- Tabs -->
+      <VTabs
+        v-model="activeTab"
+        class="mb-6 mt-4"
+      >
+        <VTab
+          value="algemeen"
+          prepend-icon="tabler-user"
         >
+          Algemeen
+        </VTab>
+        <VTab
+          value="organisaties"
+          prepend-icon="tabler-buildings"
+        >
+          Organisaties
+        </VTab>
+      </VTabs>
+
+      <VWindow
+        v-model="activeTab"
+        class="disable-tab-transition"
+      >
+        <!-- Algemeen tab -->
+        <VWindowItem value="algemeen">
           <VCard>
             <VCardTitle>Profiel</VCardTitle>
             <VCardText>
               <VRow>
-                <VCol
-                  cols="6"
-                >
+                <VCol cols="6">
                   <p class="text-body-2 text-disabled mb-1">
                     Tijdzone
                   </p>
@@ -201,9 +231,7 @@ function getInitials(name: string): string {
                     {{ user.timezone }}
                   </p>
                 </VCol>
-                <VCol
-                  cols="6"
-                >
+                <VCol cols="6">
                   <p class="text-body-2 text-disabled mb-1">
                     Taal
                   </p>
@@ -211,9 +239,7 @@ function getInitials(name: string): string {
                     {{ user.locale === 'nl' ? 'Nederlands' : 'English' }}
                   </p>
                 </VCol>
-                <VCol
-                  cols="6"
-                >
+                <VCol cols="6">
                   <p class="text-body-2 text-disabled mb-1">
                     E-mail geverifieerd
                   </p>
@@ -227,31 +253,17 @@ function getInitials(name: string): string {
                     {{ user.email_verified_at ? formatDate(user.email_verified_at) : 'Niet geverifieerd' }}
                   </p>
                 </VCol>
-                <VCol
-                  cols="6"
-                >
-                  <p class="text-body-2 text-disabled mb-1">
-                    Aangemaakt
-                  </p>
-                  <p class="text-body-1">
-                    {{ formatDate(user.created_at) }}
-                  </p>
-                </VCol>
               </VRow>
             </VCardText>
           </VCard>
-        </VCol>
+        </VWindowItem>
 
-        <!-- Organisations -->
-        <VCol
-          cols="12"
-          md="6"
-        >
+        <!-- Organisaties tab -->
+        <VWindowItem value="organisaties">
           <VCard>
-            <VCardTitle>Organisaties</VCardTitle>
             <VCardText
               v-if="user.organisations.length === 0"
-              class="text-disabled"
+              class="text-center text-disabled"
             >
               Geen organisaties
             </VCardText>
@@ -276,8 +288,8 @@ function getInitials(name: string): string {
               </VListItem>
             </VList>
           </VCard>
-        </VCol>
-      </VRow>
+        </VWindowItem>
+      </VWindow>
     </template>
 
     <!-- Edit Dialog -->