From 3c25db55a3a7e00930f83128e90b9773d2bd1abf Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Tue, 14 Apr 2026 23:09:02 +0200
Subject: [PATCH 1/2] refactor(admin): flatten to single routed tab bar (#3974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split `admin.content.vue` into four routed views (Users, Organizations,
Readiness, Activity) and mount them as children of the `/admin` parent
route. The admin layout now renders a single flat tab bar combining the
built-ins with the `config.admin.tabs` extras, so downstream modules
contribute siblings instead of being stacked under a separate "General"
bar. Global concerns (error banner + mailer warning) moved to the layout
to stay visible across every admin tab.

- Split `admin.content.vue` → `admin.users.view.vue`,
  `admin.organizations.view.vue`, `admin.readiness.view.vue`,
  `admin.activity.view.vue`
- Update `admin.router.js`: `''` redirects to `Admin Users`; each section
  gets a dedicated child route (`users`, `organizations`, `readiness`,
  `activity`) keeping CASL meta propagation
- Update `admin.layout.vue`: merge built-in + extra tabs in a single
  `<v-tabs>` row, longest-prefix active-tab resolution keeps detail
  routes (`/admin/users/:id`) highlighting the parent tab
- Readiness and Activity fetch on `mounted()` instead of via a nested
  tab-model watcher
- Redispatch unit tests across the four new views + refresh router and
  layout specs for the new structure
- Document the change in `MIGRATIONS.md` (URL-level breaking change;
  downstream config unchanged)
---
 MIGRATIONS.md                                 |  71 +++
 src/lib/helpers/tests/router.unit.tests.js    |   2 +-
 src/modules/admin/router/admin.router.js      |  54 +-
 .../tests/admin.activity.view.unit.tests.js   | 133 ++---
 .../admin/tests/admin.content.unit.tests.js   |  93 ----
 .../admin/tests/admin.layout.unit.tests.js    | 140 ++---
 .../admin.organizations.view.unit.tests.js    |  71 +++
 .../tests/admin.readiness.view.unit.tests.js  |  82 +--
 .../admin/tests/admin.router.unit.tests.js    |  52 +-
 .../tests/admin.users.view.unit.tests.js      | 124 +++++
 .../admin/views/admin.activity.view.vue       | 231 +++++++++
 src/modules/admin/views/admin.content.vue     | 488 ------------------
 src/modules/admin/views/admin.layout.vue      | 107 +++-
 .../admin/views/admin.organizations.view.vue  |  62 +++
 .../admin/views/admin.readiness.view.vue      |  89 ++++
 src/modules/admin/views/admin.users.view.vue  | 170 ++++++
 16 files changed, 1136 insertions(+), 833 deletions(-)
 delete mode 100644 src/modules/admin/tests/admin.content.unit.tests.js
 create mode 100644 src/modules/admin/tests/admin.organizations.view.unit.tests.js
 create mode 100644 src/modules/admin/tests/admin.users.view.unit.tests.js
 create mode 100644 src/modules/admin/views/admin.activity.view.vue
 delete mode 100644 src/modules/admin/views/admin.content.vue
 create mode 100644 src/modules/admin/views/admin.organizations.view.vue
 create mode 100644 src/modules/admin/views/admin.readiness.view.vue
 create mode 100644 src/modules/admin/views/admin.users.view.vue

diff --git a/MIGRATIONS.md b/MIGRATIONS.md
index c26104907..9b352f164 100644
--- a/MIGRATIONS.md
+++ b/MIGRATIONS.md
@@ -4,6 +4,77 @@ Breaking changes and upgrade notes for downstream projects.
 
 ---
 
+## Admin tabs flattened to a single routed row (2026-04-14)
+
+**Breaking change (URL-level).** The admin section now exposes its four
+built-in sections (Users, Organizations, Readiness, Activity) as routed
+siblings of the downstream `config.admin.tabs` extras. There is no more
+nested "General" tab with an internal `v-window` — every tab is a real
+URL and renders through the same `<router-view>`.
+
+### What changed in the stack
+
+- **REMOVED:** `src/modules/admin/views/admin.content.vue` — the inner
+  nested tab bar is gone. Its four window items are now dedicated views.
+- **NEW:**
+  - `src/modules/admin/views/admin.users.view.vue`
+  - `src/modules/admin/views/admin.organizations.view.vue`
+  - `src/modules/admin/views/admin.readiness.view.vue`
+  - `src/modules/admin/views/admin.activity.view.vue`
+- **CHANGED:** `src/modules/admin/router/admin.router.js` — the parent
+  `/admin` route now has dedicated children:
+  - `''` → redirect to `{ name: 'Admin Users' }`
+  - `users` → `Admin Users`
+  - `users/:id` → `Admin User`
+  - `organizations` → `Admin Organizations`
+  - `organizations/:organizationId` → `Admin Organization`
+  - `readiness` → `Admin Readiness`
+  - `activity` → `Admin Activity`
+- **CHANGED:** `src/modules/admin/views/admin.layout.vue` — the tab bar
+  now renders built-in tabs + `config.admin.tabs` extras in one flat row.
+  The global error banner and the mailer warning were moved from the old
+  `admin.content.vue` into the layout so they stay visible across every
+  admin tab (including downstream extras).
+- Readiness and Activity now fetch their data on `mounted()` (previously
+  via a `watch: { tab }` inside the old nested window).
+
+### Action for downstream projects
+
+**No config change is required.** The mechanism for contributing extra
+admin tabs via `config.admin.tabs` + `injectAdminChildren` is unchanged,
+and extras continue to render inline inside the admin layout.
+
+1. Run `/update-stack` to pull the changes.
+2. Verify hard-coded links in your project. The old URL `/admin` used to
+   land on the nested "General" tab; it now 301-redirects to
+   `/admin/users`, so existing links keep working. If you want to point
+   somewhere else, use one of the new stable URLs:
+   - `/admin/users`
+   - `/admin/organizations`
+   - `/admin/readiness`
+   - `/admin/activity`
+   Optional check: `grep -r "/admin" src/`.
+3. Downstream projects that override `admin.content.vue` must delete the
+   override — the file no longer exists. Replace any such override with
+   a dedicated override of `admin.users.view.vue` /
+   `admin.organizations.view.vue` / `admin.readiness.view.vue` /
+   `admin.activity.view.vue`, or attach a custom tab via
+   `config.admin.tabs` + `injectAdminChildren`.
+4. No route-name breakage for downstream extras — `injectAdminChildren`
+   still mounts your routes as children of the same `/admin` parent.
+
+### Why
+
+Two stacked tab bars on `*/admin` (top-level General + extras, nested
+Users / Organizations / Readiness / Activity) was visually noisy and
+duplicated navigation. The original intent of `config.admin.tabs` was
+for downstream extras to live **alongside** the built-ins — not above
+them. Flattening gives every admin section a real URL, preserves
+deep-linking and browser back/forward, and keeps downstream extras
+config-driven with zero migration work.
+
+---
+
 ## Admin extra tabs are now nested routes (2026-04-12)
 
 **Breaking change.** Downstream projects that added admin tabs via
diff --git a/src/lib/helpers/tests/router.unit.tests.js b/src/lib/helpers/tests/router.unit.tests.js
index 72ad5904a..7f2893e9f 100644
--- a/src/lib/helpers/tests/router.unit.tests.js
+++ b/src/lib/helpers/tests/router.unit.tests.js
@@ -10,7 +10,7 @@ const makeAdminRoutes = () => [
     path: '/admin',
     component: { name: 'AdminLayout' },
     children: [
-      { path: '', name: 'Admin', component: { name: 'AdminContent' } },
+      { path: 'users', name: 'Admin Users', component: { name: 'AdminUsers' } },
       { path: 'users/:id', name: 'Admin User', component: { name: 'AdminUser' } },
     ],
   },
diff --git a/src/modules/admin/router/admin.router.js b/src/modules/admin/router/admin.router.js
index afc8f8cdb..b983c3c8b 100644
--- a/src/modules/admin/router/admin.router.js
+++ b/src/modules/admin/router/admin.router.js
@@ -2,7 +2,10 @@
  * Module dependencies.
  */
 import adminLayout from '../views/admin.layout.vue';
-import adminContent from '../views/admin.content.vue';
+import adminUsers from '../views/admin.users.view.vue';
+import adminOrganizations from '../views/admin.organizations.view.vue';
+import adminReadiness from '../views/admin.readiness.view.vue';
+import adminActivity from '../views/admin.activity.view.vue';
 import adminUser from '../views/admin.user.view.vue';
 import adminOrganization from '../views/admin.organization.view.vue';
 
@@ -10,14 +13,17 @@ import adminOrganization from '../views/admin.organization.view.vue';
  * Router configuration.
  *
  * The admin module exports a **parent route** (`/admin`) whose component
- * is the admin layout (page header + tab bar + `<router-view>`). Built-in
- * views (general content, user/organization detail) and any downstream
- * injected child routes are rendered inside that `<router-view>`.
+ * is the admin layout (page header + tab bar + `<router-view>`). Each
+ * built-in section (Users, Organizations, Readiness, Activity) is a
+ * routed child so that the tab bar and the downstream-contributed extras
+ * (`config.admin.tabs`) live in one flat navigation row.
  *
- * Downstream modules should **not** add sibling routes like
- * `/admin/knowledge` anymore. Instead, register them via the
- * `injectAdminChildren` helper in `@/lib/helpers/router` so they become
- * children of this parent route.
+ * Detail views (`users/:id`, `organizations/:organizationId`) are also
+ * children of the same parent — they deep-link inside the layout.
+ *
+ * Downstream modules that contribute an "admin tab" must register their
+ * routes via the `injectAdminChildren` helper in `@/lib/helpers/router`
+ * with **relative** paths (e.g. `'knowledge'`, not `'/admin/knowledge'`).
  */
 export default [
   {
@@ -33,8 +39,12 @@ export default [
     children: [
       {
         path: '',
-        name: 'Admin General',
-        component: adminContent,
+        redirect: { name: 'Admin Users' },
+      },
+      {
+        path: 'users',
+        name: 'Admin Users',
+        component: adminUsers,
         meta: {
           action: 'manage', subject: 'UserAdmin',
         },
@@ -48,6 +58,14 @@ export default [
           action: 'manage', subject: 'UserAdmin',
         },
       },
+      {
+        path: 'organizations',
+        name: 'Admin Organizations',
+        component: adminOrganizations,
+        meta: {
+          action: 'manage', subject: 'UserAdmin',
+        },
+      },
       {
         path: 'organizations/:organizationId',
         name: 'Admin Organization',
@@ -57,6 +75,22 @@ export default [
           action: 'manage', subject: 'UserAdmin',
         },
       },
+      {
+        path: 'readiness',
+        name: 'Admin Readiness',
+        component: adminReadiness,
+        meta: {
+          action: 'manage', subject: 'UserAdmin',
+        },
+      },
+      {
+        path: 'activity',
+        name: 'Admin Activity',
+        component: adminActivity,
+        meta: {
+          action: 'manage', subject: 'UserAdmin',
+        },
+      },
     ],
   },
 ];
diff --git a/src/modules/admin/tests/admin.activity.view.unit.tests.js b/src/modules/admin/tests/admin.activity.view.unit.tests.js
index 6210d11fb..e71719360 100644
--- a/src/modules/admin/tests/admin.activity.view.unit.tests.js
+++ b/src/modules/admin/tests/admin.activity.view.unit.tests.js
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { shallowMount } from '@vue/test-utils';
 import { useAdminStore } from '../stores/admin.store';
-import AdminView from '../views/admin.content.vue';
+import AdminActivity from '../views/admin.activity.view.vue';
 
 // Mock axios
 vi.mock('../../../lib/services/axios', () => ({
@@ -19,49 +19,41 @@ vi.mock('../../../lib/services/config', () => ({
     api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
     cookie: { prefix: 'devkit' },
     vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-    whitelists: { users: { roles: ['user', 'admin'] } },
   },
 }));
 
-// Mock helpers
-vi.mock('../../../lib/helpers/roleColor', () => ({ default: () => 'primary' }));
-vi.mock('../../../lib/helpers/orgColor', () => ({ default: () => 'blue' }));
-
 const vuetifyStubs = {
-  PageHeader: true,
-  coreDataTableComponent: true,
-  'router-link': { template: '<a><slot /></a>' },
   'v-container': { template: '<div><slot /></div>' },
-  'v-row': { template: '<div><slot /></div>' },
-  'v-col': { template: '<div><slot /></div>' },
-  'v-card': { template: '<div><slot /></div>' },
-  'v-tabs': { template: '<div><slot /></div>' },
-  'v-tab': { template: '<div><slot /></div>' },
-  'v-divider': { template: '<div />' },
-  'v-window': { template: '<div><slot /></div>' },
-  'v-window-item': { template: '<div><slot /></div>' },
+  'v-alert': { template: '<div><slot /></div>' },
   'v-table': { template: '<div><slot /></div>' },
   'v-chip': { template: '<span><slot /></span>' },
   'v-icon': { template: '<i />' },
   'v-progress-linear': { template: '<div data-testid="progress" />' },
   'v-btn': { template: '<div><slot /></div>' },
-  'v-menu': { template: '<div><slot /></div>' },
-  'v-list': { template: '<div><slot /></div>' },
-  'v-list-subheader': { template: '<div><slot /></div>' },
-  'v-list-item': { template: '<div><slot /></div>' },
-  'v-list-item-title': { template: '<div><slot /></div>' },
-  'v-alert': { template: '<div><slot /></div>' },
-  'v-dialog': { template: '<div><slot /></div>' },
-  'v-card-title': { template: '<div><slot /></div>' },
-  'v-card-text': { template: '<div><slot /></div>' },
-  'v-card-actions': { template: '<div><slot /></div>' },
-  'v-spacer': { template: '<div />' },
   'v-text-field': { template: '<input />' },
   'v-select': { template: '<select />' },
-  'v-empty-state': { template: '<div />' },
 };
 
-describe('AdminView – Activity tab', () => {
+/**
+ * Mount the activity view with the given config.
+ * @param {object} [config] - config object (merged with vuetify defaults)
+ * @returns {import('@vue/test-utils').VueWrapper}
+ */
+const mountActivity = (config = {}) =>
+  shallowMount(AdminActivity, {
+    global: {
+      mocks: {
+        $router: { push: vi.fn() },
+        config: {
+          vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
+          ...config,
+        },
+      },
+      stubs: vuetifyStubs,
+    },
+  });
+
+describe('admin.activity.view', () => {
   let adminStore;
   let wrapper;
 
@@ -69,79 +61,53 @@ describe('AdminView – Activity tab', () => {
     setActivePinia(createPinia());
     adminStore = useAdminStore();
     adminStore.getAuditLogs = vi.fn().mockResolvedValue();
-
-    wrapper = shallowMount(AdminView, {
-      global: {
-        mocks: {
-          $router: { push: vi.fn() },
-          config: {
-            vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-            whitelists: { users: { roles: ['user', 'admin'] } },
-          },
-        },
-        stubs: vuetifyStubs,
-      },
-    });
-  });
-
-  it('should render the Activity tab', () => {
-    const html = wrapper.html();
-    expect(html).toContain('Activity');
+    wrapper = mountActivity();
   });
 
-  it('should fetch activity logs when tab is switched to activity', async () => {
-    wrapper.vm.tab = 'activity';
-    await wrapper.vm.$nextTick();
-
+  it('should fetch activity logs on mount', () => {
     expect(adminStore.getAuditLogs).toHaveBeenCalled();
   });
 
   it('should show loading state while fetching activity logs', async () => {
     let resolveGet;
     adminStore.getAuditLogs = vi.fn(() => new Promise((r) => { resolveGet = r; }));
-
-    wrapper.vm.tab = 'activity';
+    wrapper.vm.fetchActivityLogs();
     await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.activityLoading).toBe(true);
-
     resolveGet();
     await vi.waitFor(() => expect(wrapper.vm.activityLoading).toBe(false));
   });
 
-  it('should expose audit logs data from store', () => {
+  it('should expose audit logs data from the store', () => {
     const mockData = [
       { _id: '1', action: 'auth.login', userId: 'u1', ip: '127.0.0.1' },
       { _id: '2', action: 'auth.logout', userId: 'u2', ip: '127.0.0.2' },
     ];
     adminStore.auditLogs = mockData;
-
     expect(wrapper.vm.auditLogs).toEqual(mockData);
     expect(wrapper.vm.auditLogs).toHaveLength(2);
   });
 
   it('should have empty audit logs by default', () => {
+    adminStore.auditLogs = [];
     expect(wrapper.vm.auditLogs).toEqual([]);
   });
 
-  it('should reset page when applying filters', async () => {
+  it('should reset page when applying filters', () => {
     wrapper.vm.activityPage = 3;
     wrapper.vm.activityFilterAction = 'auth.login';
     wrapper.vm.applyActivityFilters();
-
     expect(wrapper.vm.activityPage).toBe(1);
     expect(adminStore.getAuditLogs).toHaveBeenCalledWith(
       expect.objectContaining({ action: 'auth.login', page: 1 }),
     );
   });
 
-  it('should clear filters and reset page', async () => {
+  it('should clear filters and reset page', () => {
     wrapper.vm.activityFilterAction = 'auth.login';
     wrapper.vm.activityFilterUserId = 'abc123';
     wrapper.vm.activityPage = 5;
-
     wrapper.vm.clearActivityFilters();
-
     expect(wrapper.vm.activityFilterAction).toBe('');
     expect(wrapper.vm.activityFilterUserId).toBe('');
     expect(wrapper.vm.activityPage).toBe(1);
@@ -152,27 +118,22 @@ describe('AdminView – Activity tab', () => {
     wrapper.vm.activityPage = 1;
     wrapper.vm.activityPerPage = 20;
     expect(wrapper.vm.activityHasNextPage).toBe(true);
-
     wrapper.vm.activityPage = 3;
     expect(wrapper.vm.activityHasNextPage).toBe(false);
   });
 
-  it('should navigate to next page', async () => {
+  it('should navigate to next page', () => {
     adminStore.auditTotal = 50;
     wrapper.vm.activityPage = 1;
     wrapper.vm.activityPerPage = 20;
-
     wrapper.vm.activityNextPage();
-
     expect(wrapper.vm.activityPage).toBe(2);
     expect(adminStore.getAuditLogs).toHaveBeenCalled();
   });
 
-  it('should navigate to previous page', async () => {
+  it('should navigate to previous page', () => {
     wrapper.vm.activityPage = 3;
-
     wrapper.vm.activityPrevPage();
-
     expect(wrapper.vm.activityPage).toBe(2);
     expect(adminStore.getAuditLogs).toHaveBeenCalled();
   });
@@ -180,16 +141,13 @@ describe('AdminView – Activity tab', () => {
   it('should not go below page 1', () => {
     wrapper.vm.activityPage = 1;
     wrapper.vm.activityPrevPage();
-
     expect(wrapper.vm.activityPage).toBe(1);
   });
 
   it('should toggle expanded row', () => {
     expect(wrapper.vm.activityExpandedId).toBeNull();
-
     wrapper.vm.toggleActivityExpand('abc123');
     expect(wrapper.vm.activityExpandedId).toBe('abc123');
-
     wrapper.vm.toggleActivityExpand('abc123');
     expect(wrapper.vm.activityExpandedId).toBeNull();
   });
@@ -204,22 +162,19 @@ describe('AdminView – Activity tab', () => {
     expect(result).toBe('\u2014');
   });
 
-  it('should show disabled info state when audit is disabled via config', () => {
-    const disabledWrapper = shallowMount(AdminView, {
-      global: {
-        mocks: {
-          $router: { push: vi.fn() },
-          config: {
-            vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-            whitelists: { users: { roles: ['user', 'admin'] } },
-            audit: { enabled: false },
-          },
-        },
-        stubs: vuetifyStubs,
-      },
-    });
+  it('should reset page to 1 when perPage changes', async () => {
+    wrapper.vm.activityPage = 4;
+    wrapper.vm.activityPerPage = 50;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.activityPage).toBe(1);
+  });
 
-    const html = disabledWrapper.html();
-    expect(html).toContain('Audit logging is disabled');
+  it('should not fetch activity on mount when audit is disabled via config', () => {
+    const getAuditLogs = vi.fn().mockResolvedValue();
+    setActivePinia(createPinia());
+    const store = useAdminStore();
+    store.getAuditLogs = getAuditLogs;
+    mountActivity({ audit: { enabled: false } });
+    expect(getAuditLogs).not.toHaveBeenCalled();
   });
 });
diff --git a/src/modules/admin/tests/admin.content.unit.tests.js b/src/modules/admin/tests/admin.content.unit.tests.js
deleted file mode 100644
index e334279b0..000000000
--- a/src/modules/admin/tests/admin.content.unit.tests.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
-import { createVuetify } from 'vuetify';
-
-vi.mock('../stores/admin.store', () => ({
-  useAdminStore: () => ({
-    users: [],
-    organizations: [],
-    error: null,
-    auditLogs: [],
-    auditTotal: 0,
-    auditPage: 1,
-    getUsers: vi.fn(),
-    getOrganizations: vi.fn(),
-    getAuditLogs: vi.fn(),
-  }),
-}));
-
-vi.mock('../../auth/stores/auth.store', () => ({
-  useAuthStore: () => ({
-    serverConfig: null,
-  }),
-}));
-
-import AdminContent from '../views/admin.content.vue';
-
-const baseConfig = {
-  vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-  whitelists: { users: { roles: ['user', 'admin'] } },
-};
-
-/**
- * Mount admin content with optional config overrides.
- * @param {object} configOverrides - merged into baseConfig
- * @returns {import('@vue/test-utils').VueWrapper}
- */
-const mountContent = (configOverrides = {}) =>
-  mount(AdminContent, {
-    global: {
-      plugins: [createVuetify()],
-      mocks: {
-        config: { ...baseConfig, ...configOverrides },
-        $router: { push: vi.fn() },
-        $route: { path: '/admin' },
-      },
-      stubs: {
-        RouterLink: true,
-        coreDataTableComponent: { template: '<div />' },
-      },
-    },
-  });
-
-describe('admin.content', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it('should render the four built-in tabs', () => {
-    const wrapper = mountContent();
-    const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(4);
-    expect(tabs[0].text()).toContain('Users');
-    expect(tabs[1].text()).toContain('Organizations');
-    expect(tabs[2].text()).toContain('Readiness');
-    expect(tabs[3].text()).toContain('Activity');
-  });
-
-  it('should not render extra tabs from config (layout owns them now)', () => {
-    const wrapper = mountContent({
-      admin: {
-        tabs: [
-          { value: 'billing', label: 'Billing', icon: 'fa-solid fa-credit-card', route: 'billing' },
-          { value: 'costs', label: 'Costs', route: 'costs' },
-        ],
-      },
-    });
-    const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(4);
-    expect(tabs.every((t) => !t.text().includes('Billing'))).toBe(true);
-  });
-
-  it('should not render the page header (layout provides it)', () => {
-    const wrapper = mountContent();
-    expect(wrapper.findComponent({ name: 'PageHeader' }).exists()).toBe(false);
-  });
-
-  it('should switch the active window when the tab model changes', async () => {
-    const wrapper = mountContent();
-    await wrapper.setData({ tab: 'organizations' });
-    expect(wrapper.vm.tab).toBe('organizations');
-  });
-});
diff --git a/src/modules/admin/tests/admin.layout.unit.tests.js b/src/modules/admin/tests/admin.layout.unit.tests.js
index 791e3e829..0a3db01d2 100644
--- a/src/modules/admin/tests/admin.layout.unit.tests.js
+++ b/src/modules/admin/tests/admin.layout.unit.tests.js
@@ -1,7 +1,20 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
 import { createVuetify } from 'vuetify';
 
+vi.mock('../stores/admin.store', () => ({
+  useAdminStore: () => ({
+    error: null,
+  }),
+}));
+
+vi.mock('../../auth/stores/auth.store', () => ({
+  useAuthStore: () => ({
+    serverConfig: null,
+  }),
+}));
+
 import AdminLayout from '../views/admin.layout.vue';
 
 const baseConfig = {
@@ -9,17 +22,18 @@ const baseConfig = {
 };
 
 /**
- * Mount admin layout with optional config overrides.
+ * Mount admin layout with optional config overrides and $route.path.
  * @param {object} configOverrides - merged into baseConfig
+ * @param {string} [routePath] - current route path (defaults to /admin/users)
  * @returns {import('@vue/test-utils').VueWrapper}
  */
-const mountLayout = (configOverrides = {}) =>
+const mountLayout = (configOverrides = {}, routePath = '/admin/users') =>
   mount(AdminLayout, {
     global: {
       plugins: [createVuetify()],
       mocks: {
         config: { ...baseConfig, ...configOverrides },
-        $route: { path: '/admin' },
+        $route: { path: routePath },
         $router: { push: vi.fn() },
       },
       stubs: {
@@ -31,6 +45,10 @@ const mountLayout = (configOverrides = {}) =>
   });
 
 describe('admin.layout', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
   it('should render the page header', () => {
     const wrapper = mountLayout();
     expect(wrapper.find('.page-header-stub').exists()).toBe(true);
@@ -41,14 +59,17 @@ describe('admin.layout', () => {
     expect(wrapper.find('.router-view-stub').exists()).toBe(true);
   });
 
-  it('should render only the General tab when no extra tabs are configured', () => {
+  it('should render the four built-in tabs when no extras are configured', () => {
     const wrapper = mountLayout();
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(1);
-    expect(tabs[0].text()).toContain('General');
+    expect(tabs.length).toBe(4);
+    expect(tabs[0].text()).toContain('Users');
+    expect(tabs[1].text()).toContain('Organizations');
+    expect(tabs[2].text()).toContain('Readiness');
+    expect(tabs[3].text()).toContain('Activity');
   });
 
-  it('should render extra tabs from config.admin.tabs (relative routes)', () => {
+  it('should render built-in + extra tabs from config.admin.tabs in a single flat row', () => {
     const wrapper = mountLayout({
       admin: {
         tabs: [
@@ -58,9 +79,11 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(3);
-    expect(tabs[1].text()).toContain('Knowledge');
-    expect(tabs[2].text()).toContain('Costs');
+    expect(tabs.length).toBe(6);
+    expect(tabs[0].text()).toContain('Users');
+    expect(tabs[3].text()).toContain('Activity');
+    expect(tabs[4].text()).toContain('Knowledge');
+    expect(tabs[5].text()).toContain('Costs');
   });
 
   it('should resolve relative tab routes under /admin/', () => {
@@ -84,8 +107,8 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(2);
-    expect(tabs[1].text()).toContain('Legacy');
+    expect(tabs.length).toBe(5); // 4 built-in + Legacy
+    expect(tabs[4].text()).toContain('Legacy');
     expect(wrapper.vm.tabTo({ route: '/admin/legacy' })).toBe('/admin/legacy');
     expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining('Legacy absolute tab route'));
     consoleWarnSpy.mockRestore();
@@ -103,8 +126,8 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(2); // General + Ok
-    expect(tabs[1].text()).toContain('Ok');
+    expect(tabs.length).toBe(5); // 4 built-in + Ok
+    expect(tabs[4].text()).toContain('Ok');
     expect(consoleWarnSpy).toHaveBeenCalled();
     consoleWarnSpy.mockRestore();
   });
@@ -123,8 +146,8 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(2); // General + Ok
-    expect(tabs[1].text()).toContain('Ok');
+    expect(tabs.length).toBe(5); // 4 built-in + Ok
+    expect(tabs[4].text()).toContain('Ok');
     expect(consoleWarnSpy).toHaveBeenCalled();
     consoleWarnSpy.mockRestore();
   });
@@ -140,8 +163,8 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(2);
-    expect(tabs[1].text()).toContain('Valid');
+    expect(tabs.length).toBe(5); // 4 built-in + Valid
+    expect(tabs[4].text()).toContain('Valid');
   });
 
   it('should filter out absolute routes outside /admin/ and warn', () => {
@@ -155,7 +178,7 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(2); // General + Safe
+    expect(tabs.length).toBe(5); // 4 built-in + Safe
     expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining('/evil/path'));
     consoleWarnSpy.mockRestore();
   });
@@ -163,62 +186,49 @@ describe('admin.layout', () => {
   it('should gracefully handle non-array admin.tabs', () => {
     const wrapper = mountLayout({ admin: { tabs: 'invalid' } });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    expect(tabs.length).toBe(1);
-  });
-
-  it('should sync activeTab with the current route on deep-link', () => {
-    const wrapper = mount(AdminLayout, {
-      global: {
-        plugins: [createVuetify()],
-        mocks: {
-          config: {
-            ...baseConfig,
-            admin: { tabs: [{ value: 'knowledge', label: 'Knowledge', route: 'knowledge' }] },
-          },
-          $route: { path: '/admin/knowledge' },
-          $router: { push: vi.fn() },
-        },
-        stubs: {
-          RouterLink: true,
-          RouterView: { template: '<div class="router-view-stub" />' },
-          PageHeader: { template: '<div class="page-header-stub" />' },
-        },
-      },
-    });
+    expect(tabs.length).toBe(4);
+  });
+
+  it('should sync activeTab with the current route on deep-link to an extra tab', () => {
+    const wrapper = mountLayout(
+      { admin: { tabs: [{ value: 'knowledge', label: 'Knowledge', route: 'knowledge' }] } },
+      '/admin/knowledge',
+    );
     expect(wrapper.vm.activeTab).toBe('/admin/knowledge');
   });
 
-  it('should fall back to base path when the route does not match any tab', () => {
-    const wrapper = mount(AdminLayout, {
-      global: {
-        plugins: [createVuetify()],
-        mocks: {
-          config: baseConfig,
-          $route: { path: '/admin/users/abc' },
-          $router: { push: vi.fn() },
-        },
-        stubs: {
-          RouterLink: true,
-          RouterView: { template: '<div />' },
-          PageHeader: { template: '<div />' },
-        },
-      },
-    });
-    expect(wrapper.vm.activeTab).toBe('/admin');
+  it('should activate /admin/users by default', () => {
+    const wrapper = mountLayout({}, '/admin/users');
+    expect(wrapper.vm.activeTab).toBe('/admin/users');
+  });
+
+  it('should fall back to /admin/users when the route does not match any tab', () => {
+    const wrapper = mountLayout({}, '/admin/unknown');
+    expect(wrapper.vm.activeTab).toBe('/admin/users');
+  });
+
+  it('should keep the users tab active on detail routes (/admin/users/:id)', () => {
+    const wrapper = mountLayout({}, '/admin/users/abc');
+    expect(wrapper.vm.activeTab).toBe('/admin/users');
+  });
+
+  it('should keep the organizations tab active on detail routes', () => {
+    const wrapper = mountLayout({}, '/admin/organizations/org42');
+    expect(wrapper.vm.activeTab).toBe('/admin/organizations');
   });
 
   it('should update activeTab when the route changes', async () => {
     const wrapper = mountLayout({
       admin: { tabs: [{ value: 'knowledge', label: 'Knowledge', route: 'knowledge' }] },
     });
-    // Initial: $route.path === '/admin'
-    expect(wrapper.vm.activeTab).toBe('/admin');
-    // Simulate navigation
+    // Initial: $route.path === '/admin/users'
+    expect(wrapper.vm.activeTab).toBe('/admin/users');
+    // Simulate navigation to an extra tab
     wrapper.vm.$options.watch.$route.handler.call(wrapper.vm, { path: '/admin/knowledge' });
     expect(wrapper.vm.activeTab).toBe('/admin/knowledge');
   });
 
-  it('should render icons when provided', () => {
+  it('should render icons on both built-in and extra tabs', () => {
     const wrapper = mountLayout({
       admin: {
         tabs: [
@@ -227,7 +237,9 @@ describe('admin.layout', () => {
       },
     });
     const tabs = wrapper.findAllComponents({ name: 'VTab' });
-    const extraIcons = tabs[1].findAllComponents({ name: 'VIcon' });
+    // Each built-in tab has one icon; extras only when `icon` is set.
+    expect(tabs[0].findAllComponents({ name: 'VIcon' }).length).toBeGreaterThanOrEqual(1);
+    const extraIcons = tabs[4].findAllComponents({ name: 'VIcon' });
     expect(extraIcons.length).toBe(1);
     expect(extraIcons[0].props('icon')).toBe('fa-solid fa-book');
   });
diff --git a/src/modules/admin/tests/admin.organizations.view.unit.tests.js b/src/modules/admin/tests/admin.organizations.view.unit.tests.js
new file mode 100644
index 000000000..77e2ad32c
--- /dev/null
+++ b/src/modules/admin/tests/admin.organizations.view.unit.tests.js
@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import { useAdminStore } from '../stores/admin.store';
+import AdminOrganizations from '../views/admin.organizations.view.vue';
+
+// Mock axios
+vi.mock('../../../lib/services/axios', () => ({
+  default: {
+    get: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}));
+
+// Mock config
+vi.mock('../../../lib/services/config', () => ({
+  default: {
+    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
+    cookie: { prefix: 'devkit' },
+    vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
+  },
+}));
+
+const vuetifyStubs = {
+  coreDataTableComponent: true,
+  'router-link': { template: '<a><slot /></a>' },
+  'v-container': { template: '<div><slot /></div>' },
+};
+
+describe('admin.organizations.view', () => {
+  let adminStore;
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    adminStore = useAdminStore();
+    adminStore.getOrganizations = vi.fn().mockResolvedValue();
+
+    wrapper = shallowMount(AdminOrganizations, {
+      global: {
+        mocks: {
+          $router: { push: vi.fn() },
+          config: { vuetify: { theme: { flat: true, rounded: 'rounded-lg' } } },
+        },
+        stubs: vuetifyStubs,
+      },
+    });
+  });
+
+  it('should expose organizations from the admin store', () => {
+    adminStore.organizations = [{ _id: 'o1', name: 'Acme' }];
+    expect(wrapper.vm.organizations).toEqual([{ _id: 'o1', name: 'Acme' }]);
+  });
+
+  it('should fetch organizations via the store action', async () => {
+    await wrapper.vm.fetchOrganizations({ page: 2 });
+    expect(adminStore.getOrganizations).toHaveBeenCalledWith({ page: 2 });
+  });
+
+  it('should declare the expected organization table headers', () => {
+    const headers = wrapper.vm.orgHeaders;
+    expect(headers.map((h) => h.value)).toEqual([
+      'name',
+      'memberCount',
+      'domain',
+      'plan',
+      'createdAt',
+    ]);
+  });
+});
diff --git a/src/modules/admin/tests/admin.readiness.view.unit.tests.js b/src/modules/admin/tests/admin.readiness.view.unit.tests.js
index 9538fe965..ca1d4bf40 100644
--- a/src/modules/admin/tests/admin.readiness.view.unit.tests.js
+++ b/src/modules/admin/tests/admin.readiness.view.unit.tests.js
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { shallowMount } from '@vue/test-utils';
 import { useAdminStore } from '../stores/admin.store';
-import AdminView from '../views/admin.content.vue';
+import AdminReadiness from '../views/admin.readiness.view.vue';
 
 // Mock axios
 vi.mock('../../../lib/services/axios', () => ({
@@ -19,49 +19,18 @@ vi.mock('../../../lib/services/config', () => ({
     api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
     cookie: { prefix: 'devkit' },
     vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-    whitelists: { users: { roles: ['user', 'admin'] } },
   },
 }));
 
-// Mock helpers
-vi.mock('../../../lib/helpers/roleColor', () => ({ default: () => 'primary' }));
-vi.mock('../../../lib/helpers/orgColor', () => ({ default: () => 'blue' }));
-
 const vuetifyStubs = {
-  PageHeader: true,
-  coreDataTableComponent: true,
-  'router-link': { template: '<a><slot /></a>' },
   'v-container': { template: '<div><slot /></div>' },
-  'v-row': { template: '<div><slot /></div>' },
-  'v-col': { template: '<div><slot /></div>' },
-  'v-card': { template: '<div><slot /></div>' },
-  'v-tabs': { template: '<div><slot /></div>' },
-  'v-tab': { template: '<div><slot /></div>' },
-  'v-divider': { template: '<div />' },
-  'v-window': { template: '<div><slot /></div>' },
-  'v-window-item': { template: '<div><slot /></div>' },
   'v-table': { template: '<div><slot /></div>' },
   'v-chip': { template: '<span><slot /></span>' },
   'v-icon': { template: '<i />' },
   'v-progress-linear': { template: '<div data-testid="progress" />' },
-  'v-btn': { template: '<div><slot /></div>' },
-  'v-menu': { template: '<div><slot /></div>' },
-  'v-list': { template: '<div><slot /></div>' },
-  'v-list-subheader': { template: '<div><slot /></div>' },
-  'v-list-item': { template: '<div><slot /></div>' },
-  'v-list-item-title': { template: '<div><slot /></div>' },
-  'v-alert': { template: '<div><slot /></div>' },
-  'v-text-field': { template: '<input />' },
-  'v-select': { template: '<select />' },
-  'v-empty-state': { template: '<div />' },
-  'v-dialog': { template: '<div><slot /></div>' },
-  'v-card-title': { template: '<div><slot /></div>' },
-  'v-card-text': { template: '<div><slot /></div>' },
-  'v-card-actions': { template: '<div><slot /></div>' },
-  'v-spacer': { template: '<div />' },
 };
 
-describe('AdminView – Readiness tab', () => {
+describe('admin.readiness.view', () => {
   let adminStore;
   let wrapper;
 
@@ -70,59 +39,56 @@ describe('AdminView – Readiness tab', () => {
     adminStore = useAdminStore();
     adminStore.getReadiness = vi.fn().mockResolvedValue();
 
-    wrapper = shallowMount(AdminView, {
+    wrapper = shallowMount(AdminReadiness, {
       global: {
         mocks: {
           $router: { push: vi.fn() },
-          config: {
-            vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
-            whitelists: { users: { roles: ['user', 'admin'] } },
-          },
+          config: { vuetify: { theme: { flat: true, rounded: 'rounded-lg' } } },
         },
         stubs: vuetifyStubs,
       },
     });
   });
 
-  it('should render the Readiness tab', () => {
-    const html = wrapper.html();
-    expect(html).toContain('Readiness');
+  it('should fetch readiness on mount', () => {
+    expect(adminStore.getReadiness).toHaveBeenCalled();
   });
 
-  it('should show loading state while fetching readiness', async () => {
+  it('should flip the loading flag around the fetch', async () => {
     let resolveGet;
     adminStore.getReadiness = vi.fn(() => new Promise((r) => { resolveGet = r; }));
-
-    wrapper.vm.tab = 'readiness';
+    wrapper.vm.fetchReadiness();
     await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.readinessLoading).toBe(true);
-
     resolveGet();
     await vi.waitFor(() => expect(wrapper.vm.readinessLoading).toBe(false));
   });
 
-  it('should fetch readiness when tab is switched to readiness', async () => {
-    wrapper.vm.tab = 'readiness';
-    await wrapper.vm.$nextTick();
-
-    expect(adminStore.getReadiness).toHaveBeenCalled();
-  });
-
-  it('should expose readiness data from store', async () => {
+  it('should expose readiness data from the store', () => {
     const mockData = [
       { category: 'config', status: 'ok', message: 'Domain configured' },
       { category: 'security', status: 'warning', message: 'JWT secret is default' },
     ];
     adminStore.readiness = mockData;
-
     expect(wrapper.vm.readiness).toEqual(mockData);
-    expect(wrapper.vm.readiness).toHaveLength(2);
-    expect(wrapper.vm.readiness[0].status).toBe('ok');
-    expect(wrapper.vm.readiness[1].status).toBe('warning');
   });
 
   it('should have empty readiness by default', () => {
+    adminStore.readiness = [];
     expect(wrapper.vm.readiness).toEqual([]);
   });
+
+  it('should map readiness status to icons', () => {
+    expect(wrapper.vm.readinessIcon('ok')).toBe('fa-solid fa-circle-check');
+    expect(wrapper.vm.readinessIcon('error')).toBe('fa-solid fa-circle-xmark');
+    expect(wrapper.vm.readinessIcon('warning')).toBe('fa-solid fa-triangle-exclamation');
+    expect(wrapper.vm.readinessIcon('anything-else')).toBe('fa-solid fa-triangle-exclamation');
+  });
+
+  it('should map readiness status to colors', () => {
+    expect(wrapper.vm.readinessColor('ok')).toBe('success');
+    expect(wrapper.vm.readinessColor('error')).toBe('error');
+    expect(wrapper.vm.readinessColor('warning')).toBe('warning');
+    expect(wrapper.vm.readinessColor('other')).toBe('warning');
+  });
 });
diff --git a/src/modules/admin/tests/admin.router.unit.tests.js b/src/modules/admin/tests/admin.router.unit.tests.js
index b01b60c5c..1ad3cc752 100644
--- a/src/modules/admin/tests/admin.router.unit.tests.js
+++ b/src/modules/admin/tests/admin.router.unit.tests.js
@@ -11,25 +11,35 @@ describe('admin.router (structure)', () => {
     expect(Array.isArray(parent.children)).toBe(true);
   });
 
-  it('should expose the parent and Admin General / User / Organization children', () => {
+  it('should expose the parent and the four built-in + detail children', () => {
     expect(adminRoutes[0].name).toBe('Admin');
-    const names = adminRoutes[0].children.map((r) => r.name);
-    expect(names).toContain('Admin General');
+    const names = adminRoutes[0].children.map((r) => r.name).filter(Boolean);
+    expect(names).toContain('Admin Users');
+    expect(names).toContain('Admin Organizations');
+    expect(names).toContain('Admin Readiness');
+    expect(names).toContain('Admin Activity');
     expect(names).toContain('Admin User');
     expect(names).toContain('Admin Organization');
   });
 
+  it('should redirect the empty child path to Admin Users', () => {
+    const empty = adminRoutes[0].children.find((r) => r.path === '');
+    expect(empty).toBeDefined();
+    expect(empty.redirect).toEqual({ name: 'Admin Users' });
+  });
+
   it('should use relative paths for all children', () => {
     for (const child of adminRoutes[0].children) {
       expect(child.path.startsWith('/')).toBe(false);
     }
   });
 
-  it('should propagate CASL meta (action+subject) to all child routes', () => {
+  it('should propagate CASL meta (action+subject) to all named child routes', () => {
     const parent = adminRoutes[0];
     expect(parent.meta.action).toBe('manage');
     expect(parent.meta.subject).toBe('UserAdmin');
     for (const child of parent.children) {
+      if (!child.name) continue; // skip the redirect-only child
       expect(child.meta.action).toBe('manage');
       expect(child.meta.subject).toBe('UserAdmin');
     }
@@ -71,15 +81,31 @@ describe('admin.router (integration with vue-router)', () => {
     });
   };
 
-  it('should resolve /admin to the nested Admin General child route', async () => {
+  it('should redirect /admin to /admin/users', async () => {
     const router = buildRouter();
     await router.push('/admin');
+    expect(router.currentRoute.value.path).toBe('/admin/users');
+    expect(router.currentRoute.value.name).toBe('Admin Users');
+  });
+
+  it('should resolve /admin/users to the Admin Users child route via the layout parent', async () => {
+    const router = buildRouter();
+    await router.push('/admin/users');
     const matched = router.currentRoute.value.matched;
-    // matched[0] = layout parent (named "Admin"), matched[1] = empty child "Admin General"
     expect(matched.length).toBe(2);
     expect(matched[0].path).toBe('/admin');
     expect(matched[0].name).toBe('Admin');
-    expect(matched[1].name).toBe('Admin General');
+    expect(matched[1].name).toBe('Admin Users');
+  });
+
+  it('should resolve /admin/organizations, /admin/readiness, /admin/activity', async () => {
+    const router = buildRouter();
+    await router.push('/admin/organizations');
+    expect(router.currentRoute.value.name).toBe('Admin Organizations');
+    await router.push('/admin/readiness');
+    expect(router.currentRoute.value.name).toBe('Admin Readiness');
+    await router.push('/admin/activity');
+    expect(router.currentRoute.value.name).toBe('Admin Activity');
   });
 
   it('should resolve /admin/users/:id to Admin User via the layout parent', async () => {
@@ -124,20 +150,20 @@ describe('admin.router (integration with vue-router)', () => {
       { path: 'knowledge', name: 'Admin Knowledge', component: { template: '<div />' } },
     ];
     const router = buildRouter([{ name: 'knowledge', routes: knowledge }]);
-    await router.push('/admin');
+    await router.push('/admin/users');
     const beforeLayout = router.currentRoute.value.matched[0];
     await router.push('/admin/knowledge');
     const afterLayout = router.currentRoute.value.matched[0];
     // Same parent layout component instance => tabs don't unmount
     expect(afterLayout.path).toBe(beforeLayout.path);
     expect(afterLayout.components.default).toBe(beforeLayout.components.default);
-    // Go back — should return to /admin with the same parent layout.
+    // Go back — should return to /admin/users with the same parent layout.
     await new Promise((resolve) => {
       router.back();
       router.afterEach(() => resolve());
     });
-    expect(router.currentRoute.value.path).toBe('/admin');
-    expect(router.currentRoute.value.name).toBe('Admin General');
+    expect(router.currentRoute.value.path).toBe('/admin/users');
+    expect(router.currentRoute.value.name).toBe('Admin Users');
     expect(router.currentRoute.value.matched[0].components.default).toBe(beforeLayout.components.default);
     // Go forward — should return to /admin/knowledge, parent still the same.
     await new Promise((resolve) => {
@@ -167,8 +193,8 @@ describe('admin.router (integration with vue-router)', () => {
 
   it('should still work when no extra tabs are configured (no regression)', async () => {
     const router = buildRouter();
-    await router.push('/admin');
-    expect(router.currentRoute.value.name).toBe('Admin General');
+    await router.push('/admin/users');
+    expect(router.currentRoute.value.name).toBe('Admin Users');
     expect(router.currentRoute.value.matched.length).toBe(2);
     expect(router.currentRoute.value.matched[0].name).toBe('Admin');
   });
diff --git a/src/modules/admin/tests/admin.users.view.unit.tests.js b/src/modules/admin/tests/admin.users.view.unit.tests.js
new file mode 100644
index 000000000..612d8e67e
--- /dev/null
+++ b/src/modules/admin/tests/admin.users.view.unit.tests.js
@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import { useAdminStore } from '../stores/admin.store';
+import AdminUsers from '../views/admin.users.view.vue';
+
+// Mock axios
+vi.mock('../../../lib/services/axios', () => ({
+  default: {
+    get: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}));
+
+// Mock config
+vi.mock('../../../lib/services/config', () => ({
+  default: {
+    api: { protocol: 'http', host: 'localhost', port: '3000', base: 'api' },
+    cookie: { prefix: 'devkit' },
+    vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
+    whitelists: { users: { roles: ['user', 'admin'] } },
+  },
+}));
+
+// Mock helpers
+vi.mock('../../../lib/helpers/roleColor', () => ({ default: () => 'primary' }));
+vi.mock('../../../lib/helpers/orgColor', () => ({ default: () => 'blue' }));
+
+const vuetifyStubs = {
+  coreDataTableComponent: true,
+  'router-link': { template: '<a><slot /></a>' },
+  'v-container': { template: '<div><slot /></div>' },
+  'v-btn': { template: '<div><slot /></div>' },
+  'v-menu': { template: '<div><slot /></div>' },
+  'v-list': { template: '<div><slot /></div>' },
+  'v-list-subheader': { template: '<div><slot /></div>' },
+  'v-list-item': { template: '<div><slot /></div>' },
+  'v-list-item-title': { template: '<div><slot /></div>' },
+  'v-icon': { template: '<i />' },
+  'v-chip': { template: '<span><slot /></span>' },
+  'v-dialog': { template: '<div><slot /></div>' },
+  'v-card': { template: '<div><slot /></div>' },
+  'v-card-title': { template: '<div><slot /></div>' },
+  'v-card-text': { template: '<div><slot /></div>' },
+  'v-card-actions': { template: '<div><slot /></div>' },
+  'v-spacer': { template: '<div />' },
+};
+
+describe('admin.users.view', () => {
+  let adminStore;
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    adminStore = useAdminStore();
+    adminStore.getUsers = vi.fn().mockResolvedValue();
+    adminStore.updateUser = vi.fn().mockResolvedValue();
+    adminStore.deleteUser = vi.fn().mockResolvedValue();
+
+    wrapper = shallowMount(AdminUsers, {
+      global: {
+        mocks: {
+          $router: { push: vi.fn() },
+          config: {
+            vuetify: { theme: { flat: true, rounded: 'rounded-lg' } },
+            whitelists: { users: { roles: ['user', 'admin'] } },
+          },
+        },
+        stubs: vuetifyStubs,
+      },
+    });
+  });
+
+  it('should expose users from the admin store', () => {
+    adminStore.users = [{ _id: '1', firstName: 'Alice' }];
+    expect(wrapper.vm.users).toEqual([{ _id: '1', firstName: 'Alice' }]);
+  });
+
+  it('should fetch users via the store action', async () => {
+    await wrapper.vm.fetchUsers({ page: 1 });
+    expect(adminStore.getUsers).toHaveBeenCalledWith({ page: 1 });
+  });
+
+  it('should detect the active organization of a user', () => {
+    const user = { currentOrganization: 'orgA' };
+    expect(wrapper.vm.isUserActiveOrg(user, { organizationId: 'orgA' })).toBe(true);
+    expect(wrapper.vm.isUserActiveOrg(user, { organizationId: 'orgB' })).toBe(false);
+  });
+
+  it('should handle nested object organizationId in isUserActiveOrg', () => {
+    const user = { currentOrganization: { _id: 'orgA' } };
+    expect(wrapper.vm.isUserActiveOrg(user, { organizationId: { _id: 'orgA' } })).toBe(true);
+  });
+
+  it('should toggle a role on a user (add then remove)', async () => {
+    const user = { _id: 'u1', roles: ['user'] };
+    await wrapper.vm.toggleUserRole(user, 'admin');
+    expect(adminStore.updateUser).toHaveBeenCalledWith({ id: 'u1' }, { roles: ['user', 'admin'] });
+
+    const userWithAdmin = { _id: 'u1', roles: ['user', 'admin'] };
+    await wrapper.vm.toggleUserRole(userWithAdmin, 'admin');
+    expect(adminStore.updateUser).toHaveBeenLastCalledWith({ id: 'u1' }, { roles: ['user'] });
+  });
+
+  it('should open the delete dialog with the user info', () => {
+    wrapper.vm.openDeleteDialog({ _id: 'u1', firstName: 'Alice', lastName: 'Smith' });
+    expect(wrapper.vm.deleteDialog.show).toBe(true);
+    expect(wrapper.vm.deleteDialog.userId).toBe('u1');
+    expect(wrapper.vm.deleteDialog.userName).toBe('Alice Smith');
+  });
+
+  it('should fall back to email when name is empty in openDeleteDialog', () => {
+    wrapper.vm.openDeleteDialog({ _id: 'u2', email: 'alice@example.com' });
+    expect(wrapper.vm.deleteDialog.userName).toBe('alice@example.com');
+  });
+
+  it('should confirm user deletion and close the dialog', async () => {
+    wrapper.vm.deleteDialog = { show: true, userId: 'u1', userName: 'Alice' };
+    await wrapper.vm.confirmDeleteUser();
+    expect(adminStore.deleteUser).toHaveBeenCalledWith({ id: 'u1' });
+    expect(wrapper.vm.deleteDialog.show).toBe(false);
+  });
+});
diff --git a/src/modules/admin/views/admin.activity.view.vue b/src/modules/admin/views/admin.activity.view.vue
new file mode 100644
index 000000000..b1f218145
--- /dev/null
+++ b/src/modules/admin/views/admin.activity.view.vue
@@ -0,0 +1,231 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="pa-4">
+      <!-- Audit disabled info state -->
+      <v-alert
+        v-if="config.audit && config.audit.enabled === false"
+        type="info"
+        variant="tonal"
+        density="compact"
+        :class="config.vuetify.theme.rounded"
+        icon="fa-solid fa-circle-info"
+      >
+        <span class="text-body-medium">Audit logging is disabled. Enable it in configuration to start tracking activity.</span>
+      </v-alert>
+      <template v-else>
+        <div class="d-flex align-center ga-2 flex-wrap mb-4">
+          <v-text-field
+            v-model="activityFilterAction"
+            placeholder="Filter by action"
+            hide-details
+            density="compact"
+            variant="outlined"
+            prepend-inner-icon="fa-solid fa-filter"
+            style="max-width: 240px"
+            :class="config.vuetify.theme.rounded"
+            @keyup.enter="applyActivityFilters"
+          ></v-text-field
+          ><v-text-field
+            v-model="activityFilterUserId"
+            placeholder="Filter by user ID"
+            hide-details
+            density="compact"
+            variant="outlined"
+            prepend-inner-icon="fa-solid fa-user"
+            style="max-width: 240px"
+            :class="config.vuetify.theme.rounded"
+            @keyup.enter="applyActivityFilters"
+          ></v-text-field
+          ><v-btn
+            variant="tonal"
+            color="primary"
+            class="text-none text-body-medium"
+            :class="config.vuetify.theme.rounded"
+            @click="applyActivityFilters"
+            ><v-icon icon="fa-solid fa-magnifying-glass" size="small" class="mr-2"></v-icon>Search</v-btn
+          ><v-btn
+            v-if="activityFilterAction || activityFilterUserId"
+            variant="text"
+            class="text-none text-body-medium"
+            @click="clearActivityFilters"
+            >Clear</v-btn
+          >
+        </div>
+        <v-progress-linear :active="activityLoading" indeterminate color="primary" class="mb-4"></v-progress-linear>
+        <v-table v-if="auditLogs.length" fixed-header
+          ><thead>
+            <tr>
+              <th class="text-left text-label-medium">Date</th>
+              <th class="text-left text-label-medium">Action</th>
+              <th class="text-left text-label-medium">User</th>
+              <th class="text-left text-label-medium">Target</th>
+              <th class="text-left text-label-medium">IP</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="item in auditLogs" :key="item._id || item.id"
+              ><tr style="cursor: pointer" @click="toggleActivityExpand(item._id || item.id)">
+                <td class="text-body-medium">{{ formatActivityDate(item.createdAt) }}</td>
+                <td>
+                  <v-chip size="small" variant="tonal" color="primary">{{ item.action }}</v-chip>
+                </td>
+                <td class="text-body-medium">{{ item.userId || '—' }}</td>
+                <td class="text-body-medium">
+                  <span v-if="item.targetType"
+                    >{{ item.targetType }}<span v-if="item.targetId">:{{ item.targetId }}</span></span
+                  ><span v-else class="text-medium-emphasis">—</span>
+                </td>
+                <td class="text-body-medium">{{ item.ip || '—' }}</td>
+              </tr>
+              <tr v-if="activityExpandedId === (item._id || item.id)">
+                <td colspan="5" class="bg-surface-variant pa-4">
+                  <div class="text-label-small text-medium-emphasis mb-1">Metadata</div>
+                  <pre v-if="item.metadata && Object.keys(item.metadata).length" class="text-body-small">{{
+                    JSON.stringify(item.metadata, null, 2)
+                  }}</pre>
+                  <span v-else class="text-body-small text-medium-emphasis">No metadata</span>
+                  <div v-if="item.userAgent" class="mt-2">
+                    <span class="text-label-small text-medium-emphasis">User Agent: </span
+                    ><span class="text-body-small">{{ item.userAgent }}</span>
+                  </div>
+                </td>
+              </tr></template
+            >
+          </tbody></v-table
+        >
+        <div v-if="!activityLoading && !auditLogs.length" class="text-medium-emphasis text-body-medium">No audit logs found.</div>
+        <div class="d-flex align-center justify-end mt-4 ga-2">
+          <span class="text-body-small text-medium-emphasis mr-2">Per page</span
+          ><v-select
+            v-model="activityPerPage"
+            :items="[10, 20, 50, 100]"
+            density="compact"
+            variant="outlined"
+            hide-details
+            style="max-width: 100px"
+            :class="config.vuetify.theme.rounded"
+          ></v-select
+          ><v-btn :disabled="activityPage <= 1" variant="text" icon size="small" @click="activityPrevPage"
+            ><v-icon icon="fa-solid fa-angle-left" size="small"></v-icon></v-btn
+          ><span class="text-body-medium">{{ activityPage }}</span
+          ><v-btn :disabled="!activityHasNextPage" variant="text" icon size="small" @click="activityNextPage"
+            ><v-icon icon="fa-solid fa-angle-right" size="small"></v-icon
+          ></v-btn>
+        </div>
+      </template>
+    </div>
+  </v-container>
+</template>
+<script>
+/**
+ * Module dependencies.
+ */
+import dayjs from 'dayjs';
+import { useAdminStore } from '../stores/admin.store';
+
+/**
+ * Component definition.
+ *
+ * Activity tab of the admin section — renders the audit-log table with
+ * filters and pagination. Fetches on `mounted()` since it is now a routed
+ * view (no parent tab model to watch). Mounted as a routed child of
+ * `admin.layout.vue` at `/admin/activity`.
+ */
+export default {
+  name: 'AdminActivity',
+  data() {
+    return {
+      activityLoading: false,
+      activityPage: 1,
+      activityPerPage: 20,
+      activityFilterAction: '',
+      activityFilterUserId: '',
+      activityExpandedId: null,
+    };
+  },
+  computed: {
+    auditLogs() {
+      return useAdminStore().auditLogs;
+    },
+    auditTotal() {
+      return useAdminStore().auditTotal;
+    },
+    /**
+     * @desc Whether there are more pages of audit logs to fetch.
+     * @returns {boolean}
+     */
+    activityHasNextPage() {
+      return this.activityPage * this.activityPerPage < this.auditTotal;
+    },
+  },
+  watch: {
+    activityPerPage() {
+      this.activityPage = 1;
+      this.fetchActivityLogs();
+    },
+  },
+  mounted() {
+    if (!(this.config?.audit && this.config.audit.enabled === false)) {
+      this.fetchActivityLogs();
+    }
+  },
+  methods: {
+    /**
+     * @desc Format an ISO date string for display in the activity table.
+     * @param {string|null} date - ISO date string or null
+     * @returns {string} Formatted date or em dash
+     */
+    formatActivityDate(date) {
+      if (!date) return '\u2014';
+      return dayjs(date).format('DD/MM/YY HH:mm:ss');
+    },
+    /**
+     * @desc Toggle the expanded metadata row for an audit log entry.
+     * @param {string} id - The audit log entry ID
+     */
+    toggleActivityExpand(id) {
+      this.activityExpandedId = this.activityExpandedId === id ? null : id;
+    },
+    /**
+     * @desc Fetch audit logs from the store with current filters and pagination.
+     * @returns {Promise<void>}
+     */
+    async fetchActivityLogs() {
+      this.activityLoading = true;
+      await useAdminStore().getAuditLogs({
+        action: this.activityFilterAction || undefined,
+        userId: this.activityFilterUserId || undefined,
+        page: this.activityPage,
+        perPage: this.activityPerPage,
+      });
+      this.activityLoading = false;
+    },
+    /** @desc Apply activity filters and reset to page 1. */
+    applyActivityFilters() {
+      this.activityPage = 1;
+      this.fetchActivityLogs();
+    },
+    /** @desc Clear all activity filters and reset to page 1. */
+    clearActivityFilters() {
+      this.activityFilterAction = '';
+      this.activityFilterUserId = '';
+      this.activityPage = 1;
+      this.fetchActivityLogs();
+    },
+    /** @desc Navigate to the previous page of audit logs. */
+    activityPrevPage() {
+      if (this.activityPage > 1) {
+        this.activityPage -= 1;
+        this.fetchActivityLogs();
+      }
+    },
+    /** @desc Navigate to the next page of audit logs. */
+    activityNextPage() {
+      if (this.activityHasNextPage) {
+        this.activityPage += 1;
+        this.fetchActivityLogs();
+      }
+    },
+  },
+};
+</script>
diff --git a/src/modules/admin/views/admin.content.vue b/src/modules/admin/views/admin.content.vue
deleted file mode 100644
index d192097fb..000000000
--- a/src/modules/admin/views/admin.content.vue
+++ /dev/null
@@ -1,488 +0,0 @@
-<template>
-  <v-container fluid class="pa-0">
-    <v-alert
-      v-if="error"
-      type="error"
-      variant="tonal"
-      density="compact"
-      closable
-      class="mx-2 mt-2"
-      :class="config.vuetify.theme.rounded"
-      icon="fa-solid fa-circle-exclamation"
-      @click:close="clearError"
-      ><span class="text-body-medium">{{ error }}</span></v-alert
-    >
-    <v-row class="pa-2 mt-0"
-      ><v-col cols="12">
-        <v-card color="surface" :flat="config.vuetify.theme.flat" :class="config.vuetify.theme.rounded">
-          <v-tabs v-model="tab" color="primary">
-            <v-tab value="users" class="text-none text-body-medium"><v-icon icon="fa-solid fa-users" size="small" class="mr-2"></v-icon>Users</v-tab>
-            <v-tab value="organizations" class="text-none text-body-medium"
-              ><v-icon icon="fa-solid fa-building" size="small" class="mr-2"></v-icon>Organizations</v-tab
-            >
-            <v-tab value="readiness" class="text-none text-body-medium"
-              ><v-icon icon="fa-solid fa-clipboard-check" size="small" class="mr-2"></v-icon>Readiness</v-tab
-            >
-            <v-tab value="activity" class="text-none text-body-medium"
-              ><v-icon icon="fa-solid fa-clock-rotate-left" size="small" class="mr-2"></v-icon>Activity</v-tab
-            >
-          </v-tabs>
-          <v-divider></v-divider>
-          <v-window v-model="tab">
-            <v-window-item value="users"
-              ><div class="pa-4">
-                <coreDataTableComponent :headers="userHeaders" :items="users" :fetch-action="fetchUsers">
-                  <template #name="{ item }"
-                    ><router-link
-                      :to="'/admin/users/' + (item.id || item._id)"
-                      class="text-capitalize text-primary text-decoration-none font-weight-medium"
-                      >{{ item.firstName }} {{ item.lastName }}</router-link
-                    ></template
-                  >
-                  <template #organizations="{ item }"
-                    ><v-chip
-                      v-for="m in item.memberships || []"
-                      :key="m._id || m.id"
-                      size="small"
-                      :variant="isUserActiveOrg(item, m) ? 'flat' : 'tonal'"
-                      :color="orgColor(m.organizationId)"
-                      class="mr-1 text-capitalize"
-                      style="cursor: pointer"
-                      @click="$router.push('/admin/organizations/' + (m.organizationId?._id || m.organizationId?.id))"
-                      >{{ (m.organizationId && m.organizationId.name) || '—' }} ({{ m.role || '—' }})</v-chip
-                    ><span v-if="!item.memberships || !item.memberships.length" class="text-medium-emphasis">—</span></template
-                  >
-                  <template #roles="{ item }"
-                    ><v-chip
-                      v-for="(role, index) in item.roles || []"
-                      :key="index"
-                      size="small"
-                      variant="tonal"
-                      :color="roleColor(role)"
-                      class="mr-1 text-capitalize"
-                      >{{ role }}</v-chip
-                    ><span v-if="!item.roles || !item.roles.length" class="text-medium-emphasis">—</span></template
-                  >
-                  <template #actions="{ item }"
-                    ><v-menu location="bottom end"
-                      ><template #activator="{ props }"
-                        ><v-btn v-bind="props" icon variant="text" size="small" class="mr-1"
-                          ><v-icon icon="fa-solid fa-user-pen" size="small"></v-icon></v-btn></template
-                      ><v-list density="compact" min-width="160" :class="config.vuetify.theme.rounded"
-                        ><v-list-subheader class="text-label-small">APP ROLES</v-list-subheader
-                        ><v-list-item
-                          v-for="role in config.whitelists.users.roles"
-                          :key="role"
-                          :active="(item.roles || []).includes(role)"
-                          @click="toggleUserRole(item, role)"
-                          ><v-list-item-title class="text-body-medium text-capitalize">{{ role }}</v-list-item-title></v-list-item
-                        ></v-list
-                      ></v-menu
-                    ><v-btn icon variant="text" size="small" color="error" @click="openDeleteDialog(item)"
-                      ><v-icon icon="fa-solid fa-trash" size="small"></v-icon></v-btn
-                  ></template>
-                </coreDataTableComponent></div
-            ></v-window-item>
-            <v-window-item value="organizations"
-              ><div class="pa-4">
-                <coreDataTableComponent :headers="orgHeaders" :items="organizations" :fetch-action="fetchOrganizations"
-                  ><template #orgName="{ item }"
-                    ><router-link
-                      :to="'/admin/organizations/' + (item.id || item._id)"
-                      class="text-capitalize text-primary text-decoration-none font-weight-medium"
-                      >{{ item.name }}</router-link
-                    ></template
-                  ></coreDataTableComponent
-                >
-              </div></v-window-item
-            >
-            <v-window-item value="readiness"
-              ><div class="pa-4">
-                <v-progress-linear v-if="readinessLoading" indeterminate color="primary" class="mb-4"></v-progress-linear>
-                <v-table v-else-if="readiness.length"
-                  ><thead>
-                    <tr>
-                      <th class="text-left text-body-medium">Category</th>
-                      <th class="text-left text-body-medium">Status</th>
-                      <th class="text-left text-body-medium">Message</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="item in readiness" :key="item.category">
-                      <td class="text-body-medium text-capitalize">{{ item.category }}</td>
-                      <td>
-                        <v-icon :icon="readinessIcon(item.status)" :color="readinessColor(item.status)" size="small" class="mr-2"></v-icon
-                        ><v-chip :color="readinessColor(item.status)" size="small" variant="tonal">{{ item.status }}</v-chip>
-                      </td>
-                      <td class="text-body-medium">{{ item.message }}</td>
-                    </tr>
-                  </tbody></v-table
-                >
-                <div v-else class="text-medium-emphasis text-body-medium">No readiness data available.</div>
-              </div></v-window-item
-            >
-            <!-- Activity tab -->
-            <v-window-item value="activity"
-              ><div class="pa-4">
-                <!-- Audit disabled info state -->
-                <v-alert
-                  v-if="config.audit && config.audit.enabled === false"
-                  type="info"
-                  variant="tonal"
-                  density="compact"
-                  :class="config.vuetify.theme.rounded"
-                  icon="fa-solid fa-circle-info"
-                >
-                  <span class="text-body-medium">Audit logging is disabled. Enable it in configuration to start tracking activity.</span>
-                </v-alert>
-                <template v-else>
-                <div class="d-flex align-center ga-2 flex-wrap mb-4">
-                  <v-text-field
-                    v-model="activityFilterAction"
-                    placeholder="Filter by action"
-                    hide-details
-                    density="compact"
-                    variant="outlined"
-                    prepend-inner-icon="fa-solid fa-filter"
-                    style="max-width: 240px"
-                    :class="config.vuetify.theme.rounded"
-                    @keyup.enter="applyActivityFilters"
-                  ></v-text-field
-                  ><v-text-field
-                    v-model="activityFilterUserId"
-                    placeholder="Filter by user ID"
-                    hide-details
-                    density="compact"
-                    variant="outlined"
-                    prepend-inner-icon="fa-solid fa-user"
-                    style="max-width: 240px"
-                    :class="config.vuetify.theme.rounded"
-                    @keyup.enter="applyActivityFilters"
-                  ></v-text-field
-                  ><v-btn
-                    variant="tonal"
-                    color="primary"
-                    class="text-none text-body-medium"
-                    :class="config.vuetify.theme.rounded"
-                    @click="applyActivityFilters"
-                    ><v-icon icon="fa-solid fa-magnifying-glass" size="small" class="mr-2"></v-icon>Search</v-btn
-                  ><v-btn
-                    v-if="activityFilterAction || activityFilterUserId"
-                    variant="text"
-                    class="text-none text-body-medium"
-                    @click="clearActivityFilters"
-                    >Clear</v-btn
-                  >
-                </div>
-                <v-progress-linear :active="activityLoading" indeterminate color="primary" class="mb-4"></v-progress-linear>
-                <v-table v-if="auditLogs.length" fixed-header
-                  ><thead>
-                    <tr>
-                      <th class="text-left text-label-medium">Date</th>
-                      <th class="text-left text-label-medium">Action</th>
-                      <th class="text-left text-label-medium">User</th>
-                      <th class="text-left text-label-medium">Target</th>
-                      <th class="text-left text-label-medium">IP</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <template v-for="item in auditLogs" :key="item._id || item.id"
-                      ><tr style="cursor: pointer" @click="toggleActivityExpand(item._id || item.id)">
-                        <td class="text-body-medium">{{ formatActivityDate(item.createdAt) }}</td>
-                        <td>
-                          <v-chip size="small" variant="tonal" color="primary">{{ item.action }}</v-chip>
-                        </td>
-                        <td class="text-body-medium">{{ item.userId || '—' }}</td>
-                        <td class="text-body-medium">
-                          <span v-if="item.targetType"
-                            >{{ item.targetType }}<span v-if="item.targetId">:{{ item.targetId }}</span></span
-                          ><span v-else class="text-medium-emphasis">—</span>
-                        </td>
-                        <td class="text-body-medium">{{ item.ip || '—' }}</td>
-                      </tr>
-                      <tr v-if="activityExpandedId === (item._id || item.id)">
-                        <td colspan="5" class="bg-surface-variant pa-4">
-                          <div class="text-label-small text-medium-emphasis mb-1">Metadata</div>
-                          <pre v-if="item.metadata && Object.keys(item.metadata).length" class="text-body-small">{{
-                            JSON.stringify(item.metadata, null, 2)
-                          }}</pre>
-                          <span v-else class="text-body-small text-medium-emphasis">No metadata</span>
-                          <div v-if="item.userAgent" class="mt-2">
-                            <span class="text-label-small text-medium-emphasis">User Agent: </span
-                            ><span class="text-body-small">{{ item.userAgent }}</span>
-                          </div>
-                        </td>
-                      </tr></template
-                    >
-                  </tbody></v-table
-                >
-                <div v-if="!activityLoading && !auditLogs.length" class="text-medium-emphasis text-body-medium">No audit logs found.</div>
-                <div class="d-flex align-center justify-end mt-4 ga-2">
-                  <span class="text-body-small text-medium-emphasis mr-2">Per page</span
-                  ><v-select
-                    v-model="activityPerPage"
-                    :items="[10, 20, 50, 100]"
-                    density="compact"
-                    variant="outlined"
-                    hide-details
-                    style="max-width: 100px"
-                    :class="config.vuetify.theme.rounded"
-                  ></v-select
-                  ><v-btn :disabled="activityPage <= 1" variant="text" icon size="small" @click="activityPrevPage"
-                    ><v-icon icon="fa-solid fa-angle-left" size="small"></v-icon></v-btn
-                  ><span class="text-body-medium">{{ activityPage }}</span
-                  ><v-btn :disabled="!activityHasNextPage" variant="text" icon size="small" @click="activityNextPage"
-                    ><v-icon icon="fa-solid fa-angle-right" size="small"></v-icon
-                  ></v-btn>
-                </div>
-                </template></div
-            ></v-window-item>
-          </v-window>
-        </v-card>
-        <v-alert
-          v-if="showMailerWarning"
-          type="warning"
-          variant="tonal"
-          density="compact"
-          class="mt-4"
-          :class="config.vuetify.theme.rounded"
-          icon="fa-solid fa-triangle-exclamation"
-          ><span class="text-body-medium"
-            >No mailer configured. Users can register with any email without verification. Set up SMTP to enable email verification.</span
-          ></v-alert
-        >
-      </v-col></v-row
-    >
-    <v-dialog v-model="deleteDialog.show" max-width="440"
-      ><v-card :class="config.vuetify.theme.rounded" class="pa-4"
-        ><v-card-title class="text-title-large font-weight-medium">Delete this user?</v-card-title
-        ><v-card-text class="text-body-medium"
-          >Are you sure you want to delete <strong>{{ deleteDialog.userName }}</strong
-          >? This action cannot be undone.</v-card-text
-        ><v-card-actions
-          ><v-spacer></v-spacer><v-btn variant="text" class="text-none text-body-medium" @click="deleteDialog.show = false">Cancel</v-btn
-          ><v-btn color="error" variant="flat" :class="config.vuetify.theme.rounded" class="text-none text-body-medium" @click="confirmDeleteUser"
-            >Delete</v-btn
-          ></v-card-actions
-        ></v-card
-      ></v-dialog
-    >
-  </v-container>
-</template>
-<script>
-/**
- * Module dependencies.
- */
-import dayjs from 'dayjs';
-import { useAdminStore } from '../stores/admin.store';
-import { useAuthStore } from '../../auth/stores/auth.store';
-import roleColor from '../../../lib/helpers/roleColor';
-import orgColor from '../../../lib/helpers/orgColor';
-import coreDataTableComponent from '../../core/components/core.datatable.component.vue';
-
-/**
- * Component definition.
- */
-export default {
-  name: 'AdminContent',
-  components: {
-    coreDataTableComponent,
-  },
-  data() {
-    return {
-      tab: 'users',
-      readinessLoading: false,
-      deleteDialog: { show: false, userId: null, userName: '' },
-      activityLoading: false,
-      activityPage: 1,
-      activityPerPage: 20,
-      activityFilterAction: '',
-      activityFilterUserId: '',
-      activityExpandedId: null,
-      userHeaders: [
-        { text: 'Avatar', value: 'avatar', kind: 'avatar' },
-        { text: 'Name', value: 'name', kind: 'slot', slotName: 'name' },
-        { text: 'Email', value: 'email', kind: 'email' },
-        { text: 'Organizations', value: 'memberships', kind: 'slot', slotName: 'organizations' },
-        { text: 'App Roles', value: 'roles', kind: 'slot', slotName: 'roles' },
-        { text: 'Joined', value: 'createdAt', kind: 'date', format: 'DD/MM/YY' },
-        { text: 'Last Login', value: 'lastLoginAt', kind: 'date', format: 'DD/MM/YY HH:mm' },
-        { text: 'Actions', value: 'actions', kind: 'slot', slotName: 'actions' },
-      ],
-      orgHeaders: [
-        { text: 'Name', value: 'name', kind: 'slot', slotName: 'orgName' },
-        { text: 'Members', value: 'memberCount', kind: 'text' },
-        { text: 'Domain', value: 'domain', kind: 'text' },
-        { text: 'Plan', value: 'plan', kind: 'text' },
-        { text: 'Created', value: 'createdAt', kind: 'date', format: 'DD/MM/YY' },
-      ],
-    };
-  },
-  computed: {
-    error() {
-      return useAdminStore().error;
-    },
-    users() {
-      return useAdminStore().users;
-    },
-    organizations() {
-      return useAdminStore().organizations;
-    },
-    readiness() {
-      return useAdminStore().readiness;
-    },
-    auditLogs() {
-      return useAdminStore().auditLogs;
-    },
-    auditTotal() {
-      return useAdminStore().auditTotal;
-    },
-    /**
-     * @desc Whether there are more pages of audit logs to fetch.
-     * @returns {boolean}
-     */
-    activityHasNextPage() {
-      return this.activityPage * this.activityPerPage < this.auditTotal;
-    },
-    /**
-     * @desc Whether to show the mailer warning in admin panel.
-     * @returns {boolean}
-     */
-    showMailerWarning() {
-      return useAuthStore().serverConfig?.mail?.configured === false;
-    },
-  },
-  watch: {
-    tab(val) {
-      if (val === 'readiness') this.fetchReadiness();
-      if (val === 'activity') this.fetchActivityLogs();
-    },
-    activityPerPage() {
-      this.activityPage = 1;
-      this.fetchActivityLogs();
-    },
-  },
-  methods: {
-    roleColor,
-    orgColor,
-    clearError() {
-      useAdminStore().error = null;
-    },
-    isUserActiveOrg(user, membership) {
-      const currentOrg = user.currentOrganization?._id || user.currentOrganization?.id || user.currentOrganization;
-      const orgId = membership.organizationId?._id || membership.organizationId?.id || membership.organizationId;
-      return currentOrg && orgId && String(currentOrg) === String(orgId);
-    },
-    /**
-     * @desc Map readiness status to icon name.
-     * @param {string} status - ok, warning, or error
-     * @returns {string} FontAwesome icon class
-     */
-    readinessIcon(status) {
-      if (status === 'ok') return 'fa-solid fa-circle-check';
-      if (status === 'error') return 'fa-solid fa-circle-xmark';
-      return 'fa-solid fa-triangle-exclamation';
-    },
-    /**
-     * @desc Map readiness status to color.
-     * @param {string} status - ok, warning, or error
-     * @returns {string} Vuetify color name
-     */
-    readinessColor(status) {
-      if (status === 'ok') return 'success';
-      if (status === 'error') return 'error';
-      return 'warning';
-    },
-    /**
-     * @desc Fetch readiness data from admin store.
-     * @returns {Promise<void>}
-     */
-    async fetchReadiness() {
-      this.readinessLoading = true;
-      await useAdminStore().getReadiness();
-      this.readinessLoading = false;
-    },
-    async fetchUsers(params) {
-      await useAdminStore().getUsers(params);
-    },
-    async fetchOrganizations(params) {
-      await useAdminStore().getOrganizations(params);
-    },
-    async toggleUserRole(item, role) {
-      const adminStore = useAdminStore();
-      const currentRoles = item.roles || [];
-      const newRoles = currentRoles.includes(role) ? currentRoles.filter((r) => r !== role) : [...currentRoles, role];
-      await adminStore.updateUser({ id: item.id || item._id }, { roles: newRoles });
-      await this.fetchUsers();
-    },
-    openDeleteDialog(item) {
-      this.deleteDialog = {
-        show: true,
-        userId: item.id || item._id,
-        userName: ((item.firstName || '') + ' ' + (item.lastName || '')).trim() || item.email,
-      };
-    },
-    async confirmDeleteUser() {
-      await useAdminStore().deleteUser({ id: this.deleteDialog.userId });
-      this.deleteDialog.show = false;
-      await this.fetchUsers();
-    },
-    /**
-     * @desc Format an ISO date string for display in the activity table.
-     * @param {string|null} date - ISO date string or null
-     * @returns {string} Formatted date or em dash
-     */
-    formatActivityDate(date) {
-      if (!date) return '\u2014';
-      return dayjs(date).format('DD/MM/YY HH:mm:ss');
-    },
-    /**
-     * @desc Toggle the expanded metadata row for an audit log entry.
-     * @param {string} id - The audit log entry ID
-     */
-    toggleActivityExpand(id) {
-      this.activityExpandedId = this.activityExpandedId === id ? null : id;
-    },
-    /**
-     * @desc Fetch audit logs from the store with current filters and pagination.
-     * @returns {Promise<void>}
-     */
-    async fetchActivityLogs() {
-      this.activityLoading = true;
-      await useAdminStore().getAuditLogs({
-        action: this.activityFilterAction || undefined,
-        userId: this.activityFilterUserId || undefined,
-        page: this.activityPage,
-        perPage: this.activityPerPage,
-      });
-      this.activityLoading = false;
-    },
-    /** @desc Apply activity filters and reset to page 1. */
-    applyActivityFilters() {
-      this.activityPage = 1;
-      this.fetchActivityLogs();
-    },
-    /** @desc Clear all activity filters and reset to page 1. */
-    clearActivityFilters() {
-      this.activityFilterAction = '';
-      this.activityFilterUserId = '';
-      this.activityPage = 1;
-      this.fetchActivityLogs();
-    },
-    /** @desc Navigate to the previous page of audit logs. */
-    activityPrevPage() {
-      if (this.activityPage > 1) {
-        this.activityPage -= 1;
-        this.fetchActivityLogs();
-      }
-    },
-    /** @desc Navigate to the next page of audit logs. */
-    activityNextPage() {
-      if (this.activityHasNextPage) {
-        this.activityPage += 1;
-        this.fetchActivityLogs();
-      }
-    },
-  },
-};
-</script>
diff --git a/src/modules/admin/views/admin.layout.vue b/src/modules/admin/views/admin.layout.vue
index 7651aa56f..4bfe06261 100644
--- a/src/modules/admin/views/admin.layout.vue
+++ b/src/modules/admin/views/admin.layout.vue
@@ -1,9 +1,26 @@
 <template>
   <v-container fluid>
     <PageHeader icon="fa-solid fa-user-tie" title="Admin" />
+    <v-alert
+      v-if="error"
+      type="error"
+      variant="tonal"
+      density="compact"
+      closable
+      class="mx-2 mt-2"
+      :class="config.vuetify.theme.rounded"
+      icon="fa-solid fa-circle-exclamation"
+      @click:close="clearError"
+      ><span class="text-body-medium">{{ error }}</span></v-alert
+    >
     <v-tabs v-model="activeTab" color="primary" class="px-2">
-      <v-tab :to="basePath" :value="basePath" exact class="text-none text-body-medium"
-        ><v-icon icon="fa-solid fa-gauge-high" size="small" class="mr-2"></v-icon>General</v-tab
+      <v-tab
+        v-for="tab in builtInTabs"
+        :key="tab.value"
+        :to="tabTo(tab)"
+        :value="tabTo(tab)"
+        class="text-none text-body-medium"
+        ><v-icon :icon="tab.icon" size="small" class="mr-2"></v-icon>{{ tab.label }}</v-tab
       >
       <v-tab
         v-for="extraTab in extraTabs"
@@ -16,6 +33,18 @@
       >
     </v-tabs>
     <router-view />
+    <v-alert
+      v-if="showMailerWarning"
+      type="warning"
+      variant="tonal"
+      density="compact"
+      class="mx-2 mt-4"
+      :class="config.vuetify.theme.rounded"
+      icon="fa-solid fa-triangle-exclamation"
+      ><span class="text-body-medium"
+        >No mailer configured. Users can register with any email without verification. Set up SMTP to enable email verification.</span
+      ></v-alert
+    >
   </v-container>
 </template>
 <script>
@@ -23,28 +52,52 @@
  * Module dependencies.
  */
 import PageHeader from '../../core/components/core.pageHeader.component.vue';
+import { useAdminStore } from '../stores/admin.store';
+import { useAuthStore } from '../../auth/stores/auth.store';
+
+/**
+ * Built-in admin tabs.
+ *
+ * Each entry maps to a routed child of the admin parent route (see
+ * `admin.router.js`). They are rendered inline alongside the extras from
+ * `config.admin.tabs` to form a single flat tab bar.
+ */
+const BUILT_IN_TABS = Object.freeze([
+  { value: 'users', label: 'Users', icon: 'fa-solid fa-users', route: 'users' },
+  { value: 'organizations', label: 'Organizations', icon: 'fa-solid fa-building', route: 'organizations' },
+  { value: 'readiness', label: 'Readiness', icon: 'fa-solid fa-clipboard-check', route: 'readiness' },
+  { value: 'activity', label: 'Activity', icon: 'fa-solid fa-clock-rotate-left', route: 'activity' },
+]);
 
 /**
  * Component definition.
  *
  * `admin.layout.vue` is the parent layout component for the admin section.
- * It renders the page header plus the top-level tab bar (General + extra
- * tabs from `config.admin.tabs`) and a `<router-view>` that hosts:
+ * It renders the page header, a single flat tab bar (built-in Users /
+ * Organizations / Readiness / Activity + extras from `config.admin.tabs`)
+ * and a `<router-view>` that hosts the active child:
  *
- *  - The base "General" route → `admin.content.vue` (Users / Orgs / ...)
- *  - User / Organization detail views (`/admin/users/:id`, ...)
+ *  - Built-in tabs (`/admin/users`, `/admin/organizations`, …) are routed
+ *    children defined in `admin.router.js`.
+ *  - User / Organization detail views (`/admin/users/:id`, …) are also
+ *    children — they deep-link inside the layout.
  *  - Any child route injected via `injectAdminChildren` (downstream tabs)
+ *    renders through the same `<router-view>`.
  *
  * Extra tabs are config-driven; their `route` may be relative (preferred,
  * e.g. `'knowledge'`) or a legacy absolute path (`'/admin/knowledge'`).
  * Both are supported — relative is resolved against `/admin/`.
+ *
+ * Global concerns (error banner, mailer warning) are rendered here so
+ * they stay visible across all admin tabs, including downstream extras.
  */
 export default {
   name: 'AdminLayout',
   components: { PageHeader },
   data() {
     return {
-      activeTab: '/admin',
+      activeTab: '/admin/users',
+      builtInTabs: BUILT_IN_TABS,
     };
   },
   computed: {
@@ -56,6 +109,20 @@ export default {
     basePath() {
       return '/admin';
     },
+    /**
+     * @desc Global error from the admin store (surfaced on any admin tab).
+     * @returns {string|null}
+     */
+    error() {
+      return useAdminStore().error;
+    },
+    /**
+     * @desc Whether to show the mailer warning across admin tabs.
+     * @returns {boolean}
+     */
+    showMailerWarning() {
+      return useAuthStore().serverConfig?.mail?.configured === false;
+    },
     /**
      * @desc Returns validated extra admin tabs from `config.admin.tabs`.
      *
@@ -92,6 +159,12 @@ export default {
     },
   },
   methods: {
+    /**
+     * @desc Clear the global admin error banner.
+     */
+    clearError() {
+      useAdminStore().error = null;
+    },
     /**
      * @desc Validate a single tab descriptor (shared by `extraTabs`).
      * @param {unknown} tab - Raw entry from `config.admin.tabs`.
@@ -138,7 +211,7 @@ export default {
     /**
      * @desc Resolve a tab descriptor to a concrete absolute path.
      *       Relative paths are joined under `/admin/`.
-     * @param {{ route: string }} tab - The extra tab descriptor.
+     * @param {{ route: string }} tab - The tab descriptor.
      * @returns {string} Absolute path the `<v-tab>` should link to.
      */
     tabTo(tab) {
@@ -147,18 +220,18 @@ export default {
     },
     /**
      * @desc Map a router path to the `v-tab` value it should activate.
-     *       Exact-match for the base path, then prefix-match for extra
-     *       tabs. Falls back to the base path so the indicator never
-     *       leaves a visible tab empty.
+     *       Prefix-match across built-in + extra tabs, longest-match wins
+     *       so detail routes (e.g. `/admin/users/abc`) still light up the
+     *       parent tab (`/admin/users`).
      * @param {string} path - Current route path.
-     * @returns {string} The matching tab's `value`.
+     * @returns {string} The matching tab's `value` (absolute path).
      */
     resolveActiveTab(path) {
-      if (path === this.basePath) return this.basePath;
-      const match = this.extraTabs
-        .map((tab) => this.tabTo(tab))
-        .find((to) => path === to || path.startsWith(`${to}/`));
-      return match || this.basePath;
+      const candidates = [...this.builtInTabs, ...this.extraTabs].map((tab) => this.tabTo(tab));
+      const match = candidates
+        .filter((to) => path === to || path.startsWith(`${to}/`))
+        .sort((a, b) => b.length - a.length)[0];
+      return match || `${this.basePath}/users`;
     },
   },
 };
diff --git a/src/modules/admin/views/admin.organizations.view.vue b/src/modules/admin/views/admin.organizations.view.vue
new file mode 100644
index 000000000..8d1adab1b
--- /dev/null
+++ b/src/modules/admin/views/admin.organizations.view.vue
@@ -0,0 +1,62 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="pa-4">
+      <coreDataTableComponent :headers="orgHeaders" :items="organizations" :fetch-action="fetchOrganizations"
+        ><template #orgName="{ item }"
+          ><router-link
+            :to="'/admin/organizations/' + (item.id || item._id)"
+            class="text-capitalize text-primary text-decoration-none font-weight-medium"
+            >{{ item.name }}</router-link
+          ></template
+        ></coreDataTableComponent
+      >
+    </div>
+  </v-container>
+</template>
+<script>
+/**
+ * Module dependencies.
+ */
+import { useAdminStore } from '../stores/admin.store';
+import coreDataTableComponent from '../../core/components/core.datatable.component.vue';
+
+/**
+ * Component definition.
+ *
+ * Organizations tab of the admin section — renders the organizations list
+ * as a `coreDataTableComponent`. Mounted as a routed child of
+ * `admin.layout.vue` at `/admin/organizations`.
+ */
+export default {
+  name: 'AdminOrganizations',
+  components: {
+    coreDataTableComponent,
+  },
+  data() {
+    return {
+      orgHeaders: [
+        { text: 'Name', value: 'name', kind: 'slot', slotName: 'orgName' },
+        { text: 'Members', value: 'memberCount', kind: 'text' },
+        { text: 'Domain', value: 'domain', kind: 'text' },
+        { text: 'Plan', value: 'plan', kind: 'text' },
+        { text: 'Created', value: 'createdAt', kind: 'date', format: 'DD/MM/YY' },
+      ],
+    };
+  },
+  computed: {
+    organizations() {
+      return useAdminStore().organizations;
+    },
+  },
+  methods: {
+    /**
+     * @desc Fetch the organizations list from the admin store.
+     * @param {object} [params] - Optional query params forwarded to the store.
+     * @returns {Promise<void>}
+     */
+    async fetchOrganizations(params) {
+      await useAdminStore().getOrganizations(params);
+    },
+  },
+};
+</script>
diff --git a/src/modules/admin/views/admin.readiness.view.vue b/src/modules/admin/views/admin.readiness.view.vue
new file mode 100644
index 000000000..818bc1224
--- /dev/null
+++ b/src/modules/admin/views/admin.readiness.view.vue
@@ -0,0 +1,89 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="pa-4">
+      <v-progress-linear v-if="readinessLoading" indeterminate color="primary" class="mb-4"></v-progress-linear>
+      <v-table v-else-if="readiness.length"
+        ><thead>
+          <tr>
+            <th class="text-left text-body-medium">Category</th>
+            <th class="text-left text-body-medium">Status</th>
+            <th class="text-left text-body-medium">Message</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in readiness" :key="item.category">
+            <td class="text-body-medium text-capitalize">{{ item.category }}</td>
+            <td>
+              <v-icon :icon="readinessIcon(item.status)" :color="readinessColor(item.status)" size="small" class="mr-2"></v-icon
+              ><v-chip :color="readinessColor(item.status)" size="small" variant="tonal">{{ item.status }}</v-chip>
+            </td>
+            <td class="text-body-medium">{{ item.message }}</td>
+          </tr>
+        </tbody></v-table
+      >
+      <div v-else class="text-medium-emphasis text-body-medium">No readiness data available.</div>
+    </div>
+  </v-container>
+</template>
+<script>
+/**
+ * Module dependencies.
+ */
+import { useAdminStore } from '../stores/admin.store';
+
+/**
+ * Component definition.
+ *
+ * Readiness tab of the admin section — renders a table of readiness checks
+ * from the admin store. Fetches on `mounted()` since it is now a routed
+ * view (no parent tab model to watch). Mounted as a routed child of
+ * `admin.layout.vue` at `/admin/readiness`.
+ */
+export default {
+  name: 'AdminReadiness',
+  data() {
+    return {
+      readinessLoading: false,
+    };
+  },
+  computed: {
+    readiness() {
+      return useAdminStore().readiness;
+    },
+  },
+  mounted() {
+    this.fetchReadiness();
+  },
+  methods: {
+    /**
+     * @desc Map readiness status to icon name.
+     * @param {string} status - ok, warning, or error
+     * @returns {string} FontAwesome icon class
+     */
+    readinessIcon(status) {
+      if (status === 'ok') return 'fa-solid fa-circle-check';
+      if (status === 'error') return 'fa-solid fa-circle-xmark';
+      return 'fa-solid fa-triangle-exclamation';
+    },
+    /**
+     * @desc Map readiness status to color.
+     * @param {string} status - ok, warning, or error
+     * @returns {string} Vuetify color name
+     */
+    readinessColor(status) {
+      if (status === 'ok') return 'success';
+      if (status === 'error') return 'error';
+      return 'warning';
+    },
+    /**
+     * @desc Fetch readiness data from admin store.
+     * @returns {Promise<void>}
+     */
+    async fetchReadiness() {
+      this.readinessLoading = true;
+      await useAdminStore().getReadiness();
+      this.readinessLoading = false;
+    },
+  },
+};
+</script>
diff --git a/src/modules/admin/views/admin.users.view.vue b/src/modules/admin/views/admin.users.view.vue
new file mode 100644
index 000000000..7c8d62d31
--- /dev/null
+++ b/src/modules/admin/views/admin.users.view.vue
@@ -0,0 +1,170 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="pa-4">
+      <coreDataTableComponent :headers="userHeaders" :items="users" :fetch-action="fetchUsers">
+        <template #name="{ item }"
+          ><router-link
+            :to="'/admin/users/' + (item.id || item._id)"
+            class="text-capitalize text-primary text-decoration-none font-weight-medium"
+            >{{ item.firstName }} {{ item.lastName }}</router-link
+          ></template
+        >
+        <template #organizations="{ item }"
+          ><v-chip
+            v-for="m in item.memberships || []"
+            :key="m._id || m.id"
+            size="small"
+            :variant="isUserActiveOrg(item, m) ? 'flat' : 'tonal'"
+            :color="orgColor(m.organizationId)"
+            class="mr-1 text-capitalize"
+            style="cursor: pointer"
+            @click="$router.push('/admin/organizations/' + (m.organizationId?._id || m.organizationId?.id))"
+            >{{ (m.organizationId && m.organizationId.name) || '—' }} ({{ m.role || '—' }})</v-chip
+          ><span v-if="!item.memberships || !item.memberships.length" class="text-medium-emphasis">—</span></template
+        >
+        <template #roles="{ item }"
+          ><v-chip
+            v-for="(role, index) in item.roles || []"
+            :key="index"
+            size="small"
+            variant="tonal"
+            :color="roleColor(role)"
+            class="mr-1 text-capitalize"
+            >{{ role }}</v-chip
+          ><span v-if="!item.roles || !item.roles.length" class="text-medium-emphasis">—</span></template
+        >
+        <template #actions="{ item }"
+          ><v-menu location="bottom end"
+            ><template #activator="{ props }"
+              ><v-btn v-bind="props" icon variant="text" size="small" class="mr-1"
+                ><v-icon icon="fa-solid fa-user-pen" size="small"></v-icon></v-btn></template
+            ><v-list density="compact" min-width="160" :class="config.vuetify.theme.rounded"
+              ><v-list-subheader class="text-label-small">APP ROLES</v-list-subheader
+              ><v-list-item
+                v-for="role in config.whitelists.users.roles"
+                :key="role"
+                :active="(item.roles || []).includes(role)"
+                @click="toggleUserRole(item, role)"
+                ><v-list-item-title class="text-body-medium text-capitalize">{{ role }}</v-list-item-title></v-list-item
+              ></v-list
+            ></v-menu
+          ><v-btn icon variant="text" size="small" color="error" @click="openDeleteDialog(item)"
+            ><v-icon icon="fa-solid fa-trash" size="small"></v-icon></v-btn
+        ></template>
+      </coreDataTableComponent>
+    </div>
+    <v-dialog v-model="deleteDialog.show" max-width="440"
+      ><v-card :class="config.vuetify.theme.rounded" class="pa-4"
+        ><v-card-title class="text-title-large font-weight-medium">Delete this user?</v-card-title
+        ><v-card-text class="text-body-medium"
+          >Are you sure you want to delete <strong>{{ deleteDialog.userName }}</strong
+          >? This action cannot be undone.</v-card-text
+        ><v-card-actions
+          ><v-spacer></v-spacer><v-btn variant="text" class="text-none text-body-medium" @click="deleteDialog.show = false">Cancel</v-btn
+          ><v-btn color="error" variant="flat" :class="config.vuetify.theme.rounded" class="text-none text-body-medium" @click="confirmDeleteUser"
+            >Delete</v-btn
+          ></v-card-actions
+        ></v-card
+      ></v-dialog
+    >
+  </v-container>
+</template>
+<script>
+/**
+ * Module dependencies.
+ */
+import { useAdminStore } from '../stores/admin.store';
+import roleColor from '../../../lib/helpers/roleColor';
+import orgColor from '../../../lib/helpers/orgColor';
+import coreDataTableComponent from '../../core/components/core.datatable.component.vue';
+
+/**
+ * Component definition.
+ *
+ * Users tab of the admin section — renders the users table, role menu and
+ * deletion dialog. Mounted as a routed child of `admin.layout.vue` at
+ * `/admin/users`.
+ */
+export default {
+  name: 'AdminUsers',
+  components: {
+    coreDataTableComponent,
+  },
+  data() {
+    return {
+      deleteDialog: { show: false, userId: null, userName: '' },
+      userHeaders: [
+        { text: 'Avatar', value: 'avatar', kind: 'avatar' },
+        { text: 'Name', value: 'name', kind: 'slot', slotName: 'name' },
+        { text: 'Email', value: 'email', kind: 'email' },
+        { text: 'Organizations', value: 'memberships', kind: 'slot', slotName: 'organizations' },
+        { text: 'App Roles', value: 'roles', kind: 'slot', slotName: 'roles' },
+        { text: 'Joined', value: 'createdAt', kind: 'date', format: 'DD/MM/YY' },
+        { text: 'Last Login', value: 'lastLoginAt', kind: 'date', format: 'DD/MM/YY HH:mm' },
+        { text: 'Actions', value: 'actions', kind: 'slot', slotName: 'actions' },
+      ],
+    };
+  },
+  computed: {
+    users() {
+      return useAdminStore().users;
+    },
+  },
+  methods: {
+    roleColor,
+    orgColor,
+    /**
+     * @desc Check whether a membership matches the user's active organization.
+     * @param {object} user - The user record.
+     * @param {object} membership - One of `user.memberships`.
+     * @returns {boolean}
+     */
+    isUserActiveOrg(user, membership) {
+      const currentOrg = user.currentOrganization?._id || user.currentOrganization?.id || user.currentOrganization;
+      const orgId = membership.organizationId?._id || membership.organizationId?.id || membership.organizationId;
+      return currentOrg && orgId && String(currentOrg) === String(orgId);
+    },
+    /**
+     * @desc Fetch the users list from the admin store.
+     * @param {object} [params] - Optional query params forwarded to the store.
+     * @returns {Promise<void>}
+     */
+    async fetchUsers(params) {
+      await useAdminStore().getUsers(params);
+    },
+    /**
+     * @desc Toggle an app-level role on a user and refresh the list.
+     * @param {object} item - The user record.
+     * @param {string} role - Role to toggle.
+     * @returns {Promise<void>}
+     */
+    async toggleUserRole(item, role) {
+      const adminStore = useAdminStore();
+      const currentRoles = item.roles || [];
+      const newRoles = currentRoles.includes(role) ? currentRoles.filter((r) => r !== role) : [...currentRoles, role];
+      await adminStore.updateUser({ id: item.id || item._id }, { roles: newRoles });
+      await this.fetchUsers();
+    },
+    /**
+     * @desc Open the deletion confirmation dialog for the given user.
+     * @param {object} item - The user record.
+     */
+    openDeleteDialog(item) {
+      this.deleteDialog = {
+        show: true,
+        userId: item.id || item._id,
+        userName: ((item.firstName || '') + ' ' + (item.lastName || '')).trim() || item.email,
+      };
+    },
+    /**
+     * @desc Confirm and execute deletion of the currently targeted user.
+     * @returns {Promise<void>}
+     */
+    async confirmDeleteUser() {
+      await useAdminStore().deleteUser({ id: this.deleteDialog.userId });
+      this.deleteDialog.show = false;
+      await this.fetchUsers();
+    },
+  },
+};
+</script>

From 1884b0994b6c2e8351bed1670be640ee3e9b5c33 Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Tue, 14 Apr 2026 23:17:29 +0200
Subject: [PATCH 2/2] fix(admin): address CodeRabbit review feedback

- Wrap readiness/activity fetch loading flags in try/finally so the
  progress bars never stay pinned on store rejection.
- Wrap admin.users store mutations in try/catch and guard membership
  chip navigation against undefined organization ids.
- Clarify JSDoc for fetchUsers / fetchOrganizations to reflect the
  pagination query-string contract used by coreDataTableComponent.
- Update unit tests to pass the documented string param to the fetch
  wrappers instead of an ad-hoc object.
- Reword MIGRATIONS.md to describe the /admin redirect as client-side
  via vue-router (it is not an HTTP 301).
---
 MIGRATIONS.md                                 |  6 +-
 .../admin.organizations.view.unit.tests.js    |  4 +-
 .../tests/admin.users.view.unit.tests.js      |  4 +-
 .../admin/views/admin.activity.view.vue       | 19 +++--
 .../admin/views/admin.organizations.view.vue  |  9 ++-
 .../admin/views/admin.readiness.view.vue      | 11 ++-
 src/modules/admin/views/admin.users.view.vue  | 75 ++++++++++++++-----
 7 files changed, 90 insertions(+), 38 deletions(-)

diff --git a/MIGRATIONS.md b/MIGRATIONS.md
index 9b352f164..d3c6b6250 100644
--- a/MIGRATIONS.md
+++ b/MIGRATIONS.md
@@ -46,9 +46,9 @@ and extras continue to render inline inside the admin layout.
 
 1. Run `/update-stack` to pull the changes.
 2. Verify hard-coded links in your project. The old URL `/admin` used to
-   land on the nested "General" tab; it now 301-redirects to
-   `/admin/users`, so existing links keep working. If you want to point
-   somewhere else, use one of the new stable URLs:
+   land on the nested "General" tab; it now redirects to `/admin/users`
+   (client-side via vue-router), so existing links keep working. If you
+   want to point somewhere else, use one of the new stable URLs:
    - `/admin/users`
    - `/admin/organizations`
    - `/admin/readiness`
diff --git a/src/modules/admin/tests/admin.organizations.view.unit.tests.js b/src/modules/admin/tests/admin.organizations.view.unit.tests.js
index 77e2ad32c..9250f1cde 100644
--- a/src/modules/admin/tests/admin.organizations.view.unit.tests.js
+++ b/src/modules/admin/tests/admin.organizations.view.unit.tests.js
@@ -54,8 +54,8 @@ describe('admin.organizations.view', () => {
   });
 
   it('should fetch organizations via the store action', async () => {
-    await wrapper.vm.fetchOrganizations({ page: 2 });
-    expect(adminStore.getOrganizations).toHaveBeenCalledWith({ page: 2 });
+    await wrapper.vm.fetchOrganizations('0&10&acme');
+    expect(adminStore.getOrganizations).toHaveBeenCalledWith('0&10&acme');
   });
 
   it('should declare the expected organization table headers', () => {
diff --git a/src/modules/admin/tests/admin.users.view.unit.tests.js b/src/modules/admin/tests/admin.users.view.unit.tests.js
index 612d8e67e..ebba5b7be 100644
--- a/src/modules/admin/tests/admin.users.view.unit.tests.js
+++ b/src/modules/admin/tests/admin.users.view.unit.tests.js
@@ -78,8 +78,8 @@ describe('admin.users.view', () => {
   });
 
   it('should fetch users via the store action', async () => {
-    await wrapper.vm.fetchUsers({ page: 1 });
-    expect(adminStore.getUsers).toHaveBeenCalledWith({ page: 1 });
+    await wrapper.vm.fetchUsers('0&5&search');
+    expect(adminStore.getUsers).toHaveBeenCalledWith('0&5&search');
   });
 
   it('should detect the active organization of a user', () => {
diff --git a/src/modules/admin/views/admin.activity.view.vue b/src/modules/admin/views/admin.activity.view.vue
index b1f218145..5ee8fdcfd 100644
--- a/src/modules/admin/views/admin.activity.view.vue
+++ b/src/modules/admin/views/admin.activity.view.vue
@@ -188,17 +188,22 @@ export default {
     },
     /**
      * @desc Fetch audit logs from the store with current filters and pagination.
+     *       Loading flag is always cleared, even if the store action rejects,
+     *       so the progress bar does not stay pinned on failure.
      * @returns {Promise<void>}
      */
     async fetchActivityLogs() {
       this.activityLoading = true;
-      await useAdminStore().getAuditLogs({
-        action: this.activityFilterAction || undefined,
-        userId: this.activityFilterUserId || undefined,
-        page: this.activityPage,
-        perPage: this.activityPerPage,
-      });
-      this.activityLoading = false;
+      try {
+        await useAdminStore().getAuditLogs({
+          action: this.activityFilterAction || undefined,
+          userId: this.activityFilterUserId || undefined,
+          page: this.activityPage,
+          perPage: this.activityPerPage,
+        });
+      } finally {
+        this.activityLoading = false;
+      }
     },
     /** @desc Apply activity filters and reset to page 1. */
     applyActivityFilters() {
diff --git a/src/modules/admin/views/admin.organizations.view.vue b/src/modules/admin/views/admin.organizations.view.vue
index 8d1adab1b..099b9e8a8 100644
--- a/src/modules/admin/views/admin.organizations.view.vue
+++ b/src/modules/admin/views/admin.organizations.view.vue
@@ -51,11 +51,14 @@ export default {
   methods: {
     /**
      * @desc Fetch the organizations list from the admin store.
-     * @param {object} [params] - Optional query params forwarded to the store.
+     *       `coreDataTableComponent` forwards a pagination query-string
+     *       (e.g. `'0&5&search'`) that the store interpolates into the
+     *       request URL.
+     * @param {string} [pageRequest] - Optional pagination query-string segment.
      * @returns {Promise<void>}
      */
-    async fetchOrganizations(params) {
-      await useAdminStore().getOrganizations(params);
+    async fetchOrganizations(pageRequest) {
+      await useAdminStore().getOrganizations(pageRequest);
     },
   },
 };
diff --git a/src/modules/admin/views/admin.readiness.view.vue b/src/modules/admin/views/admin.readiness.view.vue
index 818bc1224..20adf555e 100644
--- a/src/modules/admin/views/admin.readiness.view.vue
+++ b/src/modules/admin/views/admin.readiness.view.vue
@@ -76,13 +76,18 @@ export default {
       return 'warning';
     },
     /**
-     * @desc Fetch readiness data from admin store.
+     * @desc Fetch readiness data from admin store. Loading flag is always
+     *       cleared via `finally`, even if the store action rejects, so the
+     *       view never gets stuck on the progress bar.
      * @returns {Promise<void>}
      */
     async fetchReadiness() {
       this.readinessLoading = true;
-      await useAdminStore().getReadiness();
-      this.readinessLoading = false;
+      try {
+        await useAdminStore().getReadiness();
+      } finally {
+        this.readinessLoading = false;
+      }
     },
   },
 };
diff --git a/src/modules/admin/views/admin.users.view.vue b/src/modules/admin/views/admin.users.view.vue
index 7c8d62d31..4c0c5a05b 100644
--- a/src/modules/admin/views/admin.users.view.vue
+++ b/src/modules/admin/views/admin.users.view.vue
@@ -10,16 +10,16 @@
           ></template
         >
         <template #organizations="{ item }"
-          ><v-chip
-            v-for="m in item.memberships || []"
-            :key="m._id || m.id"
-            size="small"
-            :variant="isUserActiveOrg(item, m) ? 'flat' : 'tonal'"
-            :color="orgColor(m.organizationId)"
-            class="mr-1 text-capitalize"
-            style="cursor: pointer"
-            @click="$router.push('/admin/organizations/' + (m.organizationId?._id || m.organizationId?.id))"
-            >{{ (m.organizationId && m.organizationId.name) || '—' }} ({{ m.role || '—' }})</v-chip
+          ><template v-for="m in item.memberships || []" :key="m._id || m.id"
+            ><v-chip
+              size="small"
+              :variant="isUserActiveOrg(item, m) ? 'flat' : 'tonal'"
+              :color="orgColor(m.organizationId)"
+              class="mr-1 text-capitalize"
+              :style="membershipOrgId(m) ? 'cursor: pointer' : ''"
+              @click="navigateToMembershipOrg(m)"
+              >{{ (m.organizationId && m.organizationId.name) || '—' }} ({{ m.role || '—' }})</v-chip
+            ></template
           ><span v-if="!item.memberships || !item.memberships.length" class="text-medium-emphasis">—</span></template
         >
         <template #roles="{ item }"
@@ -124,16 +124,44 @@ export default {
       const orgId = membership.organizationId?._id || membership.organizationId?.id || membership.organizationId;
       return currentOrg && orgId && String(currentOrg) === String(orgId);
     },
+    /**
+     * @desc Extract a usable organization id from a membership entry.
+     * @param {object} membership - A membership record from `user.memberships`.
+     * @returns {string|null} The id or `null` when unavailable.
+     */
+    membershipOrgId(membership) {
+      const raw = membership?.organizationId;
+      if (!raw) return null;
+      const id = raw._id || raw.id;
+      return id ? String(id) : null;
+    },
+    /**
+     * @desc Navigate to the organization detail page for a membership, if
+     *       the organization id is available. No-op otherwise so we never
+     *       push `/admin/organizations/undefined`.
+     * @param {object} membership - A membership record from `user.memberships`.
+     */
+    navigateToMembershipOrg(membership) {
+      const id = this.membershipOrgId(membership);
+      if (!id) return;
+      this.$router.push(`/admin/organizations/${id}`);
+    },
     /**
      * @desc Fetch the users list from the admin store.
-     * @param {object} [params] - Optional query params forwarded to the store.
+     *       `coreDataTableComponent` forwards a pagination query-string
+     *       (e.g. `'0&5&search'`) that the store interpolates into the
+     *       request URL.
+     * @param {string} [pageRequest] - Optional pagination query-string segment.
      * @returns {Promise<void>}
      */
-    async fetchUsers(params) {
-      await useAdminStore().getUsers(params);
+    async fetchUsers(pageRequest) {
+      await useAdminStore().getUsers(pageRequest);
     },
     /**
      * @desc Toggle an app-level role on a user and refresh the list.
+     *       Errors are swallowed locally — the admin store already records
+     *       failure state via its `error` banner, and we must not leak an
+     *       unhandled rejection out of the click handler.
      * @param {object} item - The user record.
      * @param {string} role - Role to toggle.
      * @returns {Promise<void>}
@@ -142,8 +170,12 @@ export default {
       const adminStore = useAdminStore();
       const currentRoles = item.roles || [];
       const newRoles = currentRoles.includes(role) ? currentRoles.filter((r) => r !== role) : [...currentRoles, role];
-      await adminStore.updateUser({ id: item.id || item._id }, { roles: newRoles });
-      await this.fetchUsers();
+      try {
+        await adminStore.updateUser({ id: item.id || item._id }, { roles: newRoles });
+        await this.fetchUsers();
+      } catch {
+        // Admin store surfaces the error via its banner; avoid unhandled rejection.
+      }
     },
     /**
      * @desc Open the deletion confirmation dialog for the given user.
@@ -158,12 +190,19 @@ export default {
     },
     /**
      * @desc Confirm and execute deletion of the currently targeted user.
+     *       On failure the dialog stays open and the admin store surfaces
+     *       the error via its banner — we intentionally catch to avoid an
+     *       unhandled promise rejection from the click handler.
      * @returns {Promise<void>}
      */
     async confirmDeleteUser() {
-      await useAdminStore().deleteUser({ id: this.deleteDialog.userId });
-      this.deleteDialog.show = false;
-      await this.fetchUsers();
+      try {
+        await useAdminStore().deleteUser({ id: this.deleteDialog.userId });
+        this.deleteDialog.show = false;
+        await this.fetchUsers();
+      } catch {
+        // Keep the dialog open so the user can retry; banner shows the error.
+      }
     },
   },
 };