@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/PaceAppLayout/PaceAppLayout.edge-cases.test.tsx

@@ -0,0 +1,1322 @@
+/**
+ * @file PaceAppLayout Edge Cases and Complex Scenarios Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PaceAppLayout/EdgeCases
+ * @since 0.1.0
+ *
+ * Comprehensive edge case and complex scenario tests for PaceAppLayout component.
+ * These tests focus on:
+ * - Scope-based navigation filtering
+ * - Page ID extraction edge cases
+ * - Scope resolution and memoization
+ * - Logo href functionality
+ * - Context selector integration
+ * - Organisation loading edge cases
+ * - Permission map batch loading
+ * - Scope type checking failures
+ * - Route config for role-based routing
+ * - Audit logging
+ * - Index route handling
+ * - Scope error handling
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
+import { PaceAppLayout } from './PaceAppLayout';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import { logger } from '../../utils/core/logger';
+import { OrganisationContextRequiredError } from '../../rbac/types';
+import {
+  mockNavigate,
+  mockLocation,
+  mockUser,
+  mockSignOut,
+  mockUpdatePassword,
+  mockOrganisation,
+  mockOrganisationContext,
+  mockUseRBAC,
+  mockUseCan,
+  resetPaceAppLayoutMocks,
+} from './test-setup.tsx';
+
+// Import the hoisted mock for isSuperAdmin
+let _mockIsSuperAdmin: ReturnType<typeof vi.fn>;
+
+// Override mockLocation pathname for this test file
+mockLocation.pathname = '/dashboard';
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useLocation: () => mockLocation,
+    Outlet: () => <div data-testid="outlet">Page Content</div>,
+  };
+});
+
+// Mock UnifiedAuth hook
+const mockUnifiedAuth = {
+  user: { ...mockUser, id: 'user-123', user_metadata: { ...mockUser.user_metadata, is_admin: false }, app_metadata: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' } },
+  signOut: mockSignOut,
+  updatePassword: mockUpdatePassword,
+  supabase: {},
+  appId: 'app-123',
+  selectedOrganisationId: 'org-123',
+};
+
+const mockUseUnifiedAuthFn = vi.fn(() => mockUnifiedAuth);
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+// Mock useOrganisations hook
+const mockSelectedOrganisation = { ...mockOrganisation, id: 'org-123', slug: 'test-org' };
+
+vi.mock('../../hooks/useOrganisations', () => ({
+  useOrganisations: vi.fn(() => ({
+    ...mockOrganisationContext,
+    selectedOrganisation: mockSelectedOrganisation,
+    organisations: [mockSelectedOrganisation],
+    userMemberships: [],
+    isLoading: false,
+  })),
+}));
+
+// Mock useEvents and useOptionalEvents (PaceAppLayout uses useOptionalEvents for event context)
+vi.mock('../../hooks/useEvents', () => ({
+  useEvents: vi.fn(() => ({
+    selectedEvent: { event_id: 'event-123' },
+    events: [],
+    isLoading: false,
+    error: null,
+  })),
+  useOptionalEvents: vi.fn(() => ({
+    selectedEvent: { event_id: 'event-123' },
+  })),
+}));
+
+// Mock useEventTheme to avoid EventServiceProvider requirement
+vi.mock('../../hooks/useEventTheme', () => ({
+  useEventTheme: vi.fn(),
+}));
+
+// Mock logger
+vi.mock('../../utils/core/logger', () => {
+  const mockLogger = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    createScopedLogger: vi.fn(() => mockLogger),
+    configure: vi.fn(),
+  };
+  
+  return {
+    logger: mockLogger,
+    createLogger: () => mockLogger,
+    Logger: {
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+      configure: vi.fn(),
+      createScopedLogger: vi.fn(() => mockLogger),
+    },
+    LogLevel: {
+      DEBUG: 0,
+      INFO: 1,
+      WARN: 2,
+      ERROR: 3,
+    },
+  };
+});
+
+// Mock Supabase client for RBAC engine
+vi.mock('@supabase/supabase-js', () => {
+  const createMockQueryBuilder = () => ({
+    select: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    single: vi.fn().mockResolvedValue({ data: null, error: null }),
+  });
+
+  const mockSupabaseClient = {
+    from: vi.fn(() => createMockQueryBuilder()),
+    rpc: vi.fn().mockResolvedValue({ data: null, error: null }),
+  };
+
+  return {
+    createClient: vi.fn(() => mockSupabaseClient),
+  };
+});
+
+// Mock RBAC functions
+const mockIsSuperAdminAPI = vi.hoisted(() => vi.fn().mockResolvedValue({ ok: true, data: false }));
+
+vi.mock('../../rbac/api', () => ({
+  isPermitted: vi.fn().mockResolvedValue({ ok: true, data: true }),
+  isPermittedCached: vi.fn().mockResolvedValue({ ok: true, data: true }),
+  isSuperAdmin: mockIsSuperAdminAPI,
+  setupRBAC: vi.fn(),
+  getPermissionMap: vi.fn().mockResolvedValue({ ok: true, data: {} }),
+  getPageScopeType: vi.fn().mockResolvedValue({ ok: true, data: 'both' }),
+  getAccessLevel: vi.fn().mockResolvedValue({ ok: true, data: 'viewer' }),
+}));
+
+// Mock RBAC hooks
+vi.mock('../../rbac/hooks/useRBAC', () => ({
+  useRBAC: vi.fn(() => ({
+    hasPermission: vi.fn().mockResolvedValue(true),
+    isLoading: false,
+    error: null,
+    hasGlobalPermission: vi.fn().mockResolvedValue(true),
+    hasOrganisationPermission: vi.fn().mockResolvedValue(true),
+    hasEventPermission: vi.fn().mockResolvedValue(true),
+    globalRole: null,
+    organisationRoles: [],
+    eventRoles: [],
+    permissionMap: {},
+  })),
+}));
+
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: { organisationId: 'org-123', eventId: 'event-123', appId: 'app-123' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+vi.mock('../../rbac/hooks/usePermissions', async () => {
+  const testSetup = await import('./test-setup.tsx');
+  return {
+    useCan: (...args: any[]) => testSetup.mockUseCan(...args),
+  };
+});
+
+// Mock Header component
+vi.mock('../Header', () => ({
+  Header: ({ 
+    logoUrl, 
+    logoAlt, 
+    logoHref,
+    navItems, 
+    actions, 
+    userMenu, 
+    user, 
+    onSignOut, 
+    onChangePassword, 
+    currentPath: _currentPath, 
+    onNavigate, 
+    showContextSelector, 
+    showOrganisations,
+    showEvents,
+    showUserMenu, 
+    className 
+  }: any) => (
+    <header 
+      data-testid="header" 
+      className={className}
+      data-logo-href={logoHref}
+      data-show-context-selector={showContextSelector !== false ? 'true' : 'false'}
+      data-show-organisations={showOrganisations !== false ? 'true' : 'false'}
+      data-show-events={showEvents !== false ? 'true' : 'false'}
+      data-show-user-menu={showUserMenu !== false ? 'true' : 'false'}
+    >
+      <div data-testid="header-logo" data-logo-url={logoUrl} data-logo-alt={logoAlt} data-logo-href={logoHref}>
+        {logoUrl || 'Default Logo'}
+      </div>
+      <nav data-testid="header-nav">
+        {navItems?.map((item: any) => (
+          <button
+            key={item.id}
+            data-testid={`nav-item-${item.id}`}
+            onClick={() => onNavigate?.(item)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </nav>
+      <div data-testid="header-actions">{actions}</div>
+      <div data-testid="header-user-menu">
+        {userMenu || (
+          <div>
+            <span data-testid="user-email">{user?.email}</span>
+            <button data-testid="sign-out-btn" onClick={onSignOut}>
+              Sign Out
+            </button>
+            <button data-testid="change-password-btn" onClick={() => onChangePassword?.('newpassword')}>
+              Change Password
+            </button>
+          </div>
+        )}
+      </div>
+    </header>
+  ),
+}));
+
+// Mock Footer component
+vi.mock('../Footer', () => ({
+  Footer: () => (
+    <footer data-testid="footer">
+      <div>Footer Content</div>
+    </footer>
+  ),
+}));
+
+// Mock Button component
+vi.mock('../Button', () => ({
+  Button: ({ children, onClick, ...props }: any) => (
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+// Test wrapper with router
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MemoryRouter initialEntries={['/dashboard']}>
+    {children}
+  </MemoryRouter>
+);
+
+describe('PaceAppLayout Edge Cases and Complex Scenarios', () => {
+  const baseProps = {
+    appName: 'Test App',
+  };
+
+  beforeEach(async () => {
+    resetPaceAppLayoutMocks();
+    mockLocation.pathname = '/dashboard';
+    const rbacApi = await import('../../rbac/api');
+    _mockIsSuperAdmin = vi.mocked(rbacApi.isSuperAdmin);
+    mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+    const { isPermitted, isPermittedCached, getPermissionMap, getPageScopeType } = await import('../../rbac/api');
+    vi.mocked(isPermitted).mockReset();
+    vi.mocked(isPermitted).mockResolvedValue({ ok: true, data: true });
+    vi.mocked(isPermittedCached).mockReset();
+    vi.mocked(isPermittedCached).mockResolvedValue({ ok: true, data: true });
+    vi.mocked(getPermissionMap).mockReset();
+    vi.mocked(getPermissionMap).mockResolvedValue({ ok: true, data: {} });
+    vi.mocked(getPageScopeType).mockReset();
+    vi.mocked(getPageScopeType).mockResolvedValue({ ok: true, data: 'both' });
+    mockUseCan.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn().mockResolvedValue(undefined),
+    });
+  });
+
+  describe('Page ID Extraction', () => {
+    it('extracts page ID from simple path', async () => {
+      mockLocation.pathname = '/dashboard';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          expect.any(String),
+          expect.any(Object),
+          'read:page.dashboard',
+          'dashboard',
+          expect.any(Boolean),
+          expect.any(Boolean),
+          expect.any(String)
+        );
+      }, { timeout: 2000 });
+    });
+
+    it('extracts page ID from nested path', async () => {
+      mockLocation.pathname = '/organisation/scouts-victoria';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          expect.any(String),
+          expect.any(Object),
+          'read:page.organisation',
+          'organisation',
+          expect.any(Boolean),
+          expect.any(Boolean),
+          expect.any(String)
+        );
+      }, { timeout: 2000 });
+    });
+
+    it('uses pageIdMapping when provided', async () => {
+      mockLocation.pathname = '/dashboard';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            pageIdMapping={{
+              '/dashboard': 'custom-dashboard-id'
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockUseCan).toHaveBeenCalledWith(
+          expect.any(String),
+          expect.any(Object),
+          'read:page.custom-dashboard-id',
+          'custom-dashboard-id',
+          expect.any(Boolean),
+          expect.any(Boolean),
+          expect.any(String)
+        );
+      }, { timeout: 2000 });
+    });
+
+    it('handles index route (empty path) correctly', async () => {
+      mockLocation.pathname = '/';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Index route should not trigger permission check (currentPageId is empty)
+        expect(mockUseCan).toHaveBeenCalledWith(
+          expect.any(String),
+          expect.any(Object),
+          '',
+          '',
+          expect.any(Boolean),
+          expect.any(Boolean),
+          expect.any(String)
+        );
+      }, { timeout: 2000 });
+    });
+
+    it('handles root path with trailing slash', async () => {
+      mockLocation.pathname = '/';
+      
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Scope-Based Navigation Filtering', () => {
+    it('filters navigation items by event scope when event context is selected', async () => {
+      const { getPageScopeType, getPermissionMap } = await import('../../rbac/api');
+      vi.mocked(getPermissionMap).mockResolvedValue({
+        ok: true,
+        data: {
+          'read:page.event-page': true,
+          'read:page.org-page': true,
+          'read:page.both-page': true,
+          '*': false,
+        },
+      });
+      vi.mocked(getPageScopeType)
+        .mockResolvedValueOnce({ ok: true, data: 'event' })
+        .mockResolvedValueOnce({ ok: true, data: 'organisation' })
+        .mockResolvedValueOnce({ ok: true, data: 'both' });
+
+      const navItems = [
+        { id: 'event-page', label: 'Event Page', href: '/event-page', icon: 'Calendar' },
+        { id: 'org-page', label: 'Org Page', href: '/org-page', icon: 'Building' },
+        { id: 'both-page', label: 'Both Page', href: '/both-page', icon: 'Home' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+            routePermissions={{
+              '/event-page': 'read',
+              '/org-page': 'read',
+              '/both-page': 'read',
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Wait for navigation filtering to complete
+        // With event context, should show event-scoped and both-scoped items
+        const eventPage = screen.queryByTestId('nav-item-event-page');
+        const bothPage = screen.queryByTestId('nav-item-both-page');
+        const orgPage = screen.queryByTestId('nav-item-org-page');
+        
+        // At least verify the filtering logic was called
+        expect(getPermissionMap).toHaveBeenCalled();
+        expect(getPageScopeType).toHaveBeenCalled();
+        
+        // The actual filtering result depends on the async logic
+        // Verify that items are either shown or filtered correctly
+        if (eventPage) {
+          expect(bothPage).toBeInTheDocument();
+          expect(orgPage).not.toBeInTheDocument();
+        }
+      }, { timeout: 10000 });
+    });
+
+    it('filters navigation items by organisation scope when only org context is selected', async () => {
+      // Mock no event context: useOptionalEvents returns selectedEvent null
+      const { useOptionalEvents } = await import('../../hooks/useEvents');
+      const originalUseOptionalEvents = vi.mocked(useOptionalEvents);
+      vi.mocked(useOptionalEvents).mockImplementation(() => ({
+        selectedEvent: null,
+      }));
+
+      const { getPageScopeType, getPermissionMap } = await import('../../rbac/api');
+      vi.mocked(getPermissionMap).mockResolvedValue({
+        ok: true,
+        data: {
+          'read:page.event-page': true,
+          'read:page.org-page': true,
+          'read:page.both-page': true,
+          '*': false,
+        },
+      });
+      vi.mocked(getPageScopeType)
+        .mockResolvedValueOnce({ ok: true, data: 'event' })
+        .mockResolvedValueOnce({ ok: true, data: 'organisation' })
+        .mockResolvedValueOnce({ ok: true, data: 'both' });
+
+      const navItems = [
+        { id: 'event-page', label: 'Event Page', href: '/event-page', icon: 'Calendar' },
+        { id: 'org-page', label: 'Org Page', href: '/org-page', icon: 'Building' },
+        { id: 'both-page', label: 'Both Page', href: '/both-page', icon: 'Home' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+            routePermissions={{
+              '/event-page': 'read',
+              '/org-page': 'read',
+              '/both-page': 'read',
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Wait for navigation filtering to complete
+        // Verify that filtering logic was called
+        expect(getPermissionMap).toHaveBeenCalled();
+        expect(getPageScopeType).toHaveBeenCalled();
+        
+        // The actual filtering result depends on the async logic
+        // With org context only, should show org-scoped and both-scoped items
+        const orgPage = screen.queryByTestId('nav-item-org-page');
+        const bothPage = screen.queryByTestId('nav-item-both-page');
+        const eventPage = screen.queryByTestId('nav-item-event-page');
+        
+        // Verify filtering occurred (items are either shown or filtered)
+        if (orgPage) {
+          expect(bothPage).toBeInTheDocument();
+          expect(eventPage).not.toBeInTheDocument();
+        }
+      }, { timeout: 10000 });
+
+      // Restore original mock
+      vi.mocked(useOptionalEvents).mockImplementation(originalUseOptionalEvents);
+    });
+
+    it('falls back to permission-only filtering when scope type check fails', async () => {
+      const { getPageScopeType, getPermissionMap } = await import('../../rbac/api');
+      vi.mocked(getPermissionMap).mockResolvedValue({
+        ok: true,
+        data: {
+          'read:page.event-page': true,
+          'read:page.org-page': true,
+        },
+      });
+      vi.mocked(getPageScopeType)
+        .mockResolvedValueOnce({ ok: false, error: { code: 'RBAC_ERROR', message: 'Database error' } })
+        .mockResolvedValueOnce({ ok: false, error: { code: 'RBAC_ERROR', message: 'Database error' } });
+
+      const navItems = [
+        { id: 'event-page', label: 'Event Page', href: '/event-page', icon: 'Calendar' },
+        { id: 'org-page', label: 'Org Page', href: '/org-page', icon: 'Building' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should fall back to showing items with permissions when scope check fails
+        expect(screen.getByTestId('nav-item-event-page')).toBeInTheDocument();
+        expect(screen.getByTestId('nav-item-org-page')).toBeInTheDocument();
+        expect(logger.warn).toHaveBeenCalledWith(
+          'PaceAppLayout',
+          'Failed to get page scope type for navigation filtering',
+          expect.any(Object)
+        );
+      }, { timeout: 5000 });
+    });
+
+    it('handles empty navigation when all items are filtered by scope', async () => {
+      // Mock no event context: useOptionalEvents returns selectedEvent null
+      const { useOptionalEvents } = await import('../../hooks/useEvents');
+      const originalUseOptionalEvents = vi.mocked(useOptionalEvents);
+      vi.mocked(useOptionalEvents).mockImplementation(() => ({
+        selectedEvent: null,
+      }));
+
+      const { getPageScopeType, getPermissionMap } = await import('../../rbac/api');
+      vi.mocked(getPermissionMap).mockResolvedValue({
+        ok: true,
+        data: {
+          'read:page.event-page': true,
+          '*': false,
+        },
+      });
+      vi.mocked(getPageScopeType).mockResolvedValue({ ok: true, data: 'event' });
+
+      const navItems = [
+        { id: 'event-page', label: 'Event Page', href: '/event-page', icon: 'Calendar' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+            routePermissions={{
+              '/event-page': 'read',
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Verify filtering logic was called
+        expect(getPermissionMap).toHaveBeenCalled();
+        expect(getPageScopeType).toHaveBeenCalled();
+        
+        // Should show empty navigation (all items filtered by scope)
+        // OR log the info message about all items being filtered
+        const eventPage = screen.queryByTestId('nav-item-event-page');
+        if (!eventPage) {
+          // If item is filtered, verify the info log was called
+          expect(logger.info).toHaveBeenCalledWith(
+            'PaceAppLayout',
+            'All navigation items filtered out by scope type',
+            expect.any(Object)
+          );
+        }
+      }, { timeout: 10000 });
+
+      // Restore original mock
+      vi.mocked(useOptionalEvents).mockImplementation(originalUseOptionalEvents);
+    });
+  });
+
+  describe('Logo Href Functionality', () => {
+    it('uses default logoHref when not provided', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const logo = screen.getByTestId('header-logo');
+      expect(logo).toHaveAttribute('data-logo-href', '/dashboard');
+    });
+
+    it('uses custom logoHref when provided', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} logoHref="/home" />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const logo = screen.getByTestId('header-logo');
+      expect(logo).toHaveAttribute('data-logo-href', '/home');
+    });
+
+    it('passes logoHref to Header component', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} logoHref="/custom-route" />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-logo-href', '/custom-route');
+    });
+  });
+
+  describe('Context Selector Integration', () => {
+    it('shows organisations and events by default', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-show-organisations', 'true');
+      expect(header).toHaveAttribute('data-show-events', 'true');
+    });
+
+    it('hides organisations when showOrganisations is false', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} showOrganisations={false} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-show-organisations', 'false');
+      expect(header).toHaveAttribute('data-show-events', 'true');
+    });
+
+    it('hides events when showEvents is false', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} showEvents={false} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-show-organisations', 'true');
+      expect(header).toHaveAttribute('data-show-events', 'false');
+    });
+
+    it('hides both organisations and events when both are false', () => {
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} showOrganisations={false} showEvents={false} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('data-show-organisations', 'false');
+      expect(header).toHaveAttribute('data-show-events', 'false');
+    });
+  });
+
+  describe('Organisation Loading Edge Cases', () => {
+    it('allows super admin to proceed during organisation loading', async () => {
+      const { useOrganisations } = await import('../../hooks/useOrganisations');
+      const mockedUseOrganisations = vi.mocked(useOrganisations);
+      mockedUseOrganisations.mockReturnValue({
+        ...mockOrganisationContext,
+        selectedOrganisation: null,
+        isLoading: true,
+        isContextReady: false,
+        hasValidOrganisationContext: false,
+      });
+
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: true });
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true,
+        isLoading: false,
+        hasPermission: vi.fn(),
+        hasAnyPermission: vi.fn(),
+        hasRole: vi.fn(),
+        hasAnyRole: vi.fn(),
+        permissionMap: {},
+        roleMap: {},
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Super admin should see content even during loading
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.queryByText('Loading organisation context...')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('shows loading state for non-super-admin during organisation loading', async () => {
+      const { useOrganisations } = await import('../../hooks/useOrganisations');
+      const mockedUseOrganisations = vi.mocked(useOrganisations);
+      mockedUseOrganisations.mockReturnValue({
+        ...mockOrganisationContext,
+        selectedOrganisation: null,
+        isLoading: true,
+        isContextReady: false,
+        hasValidOrganisationContext: false,
+      });
+
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        isLoading: false,
+        hasPermission: vi.fn(),
+        hasAnyPermission: vi.fn(),
+        hasRole: vi.fn(),
+        hasAnyRole: vi.fn(),
+        permissionMap: {},
+        roleMap: {},
+      });
+
+      // Ensure no selectedOrganisationId in auth context
+      mockUseUnifiedAuthFn.mockReturnValue({
+        ...mockUnifiedAuth,
+        selectedOrganisationId: undefined, // No selected org ID
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Loading organisation context...')).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('allows rendering when selectedOrganisationId exists even if loading', async () => {
+      const { useOrganisations } = await import('../../hooks/useOrganisations');
+      const mockedUseOrganisations = vi.mocked(useOrganisations);
+      mockedUseOrganisations.mockReturnValue({
+        ...mockOrganisationContext,
+        selectedOrganisation: mockSelectedOrganisation,
+        isLoading: true, // Still loading
+        isContextReady: true,
+        hasValidOrganisationContext: true,
+      });
+
+      mockUseUnifiedAuthFn.mockReturnValue({
+        ...mockUnifiedAuth,
+        selectedOrganisationId: 'org-123', // Has selected org ID
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should render even if loading is true but selectedOrganisationId exists
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.queryByText('Loading organisation context...')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Permission Map Batch Loading', () => {
+    it('uses batch permission map for navigation filtering', async () => {
+      const { getPermissionMap } = await import('../../rbac/api');
+      const mockPermissionMap = {
+        'read:page.dashboard': true,
+        'read:page.settings': true,
+        'read:page.admin': false,
+      };
+      vi.mocked(getPermissionMap).mockResolvedValue({ ok: true, data: mockPermissionMap });
+
+      const navItems = [
+        { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+        { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' },
+        { id: 'admin', label: 'Admin', href: '/admin', icon: 'Shield' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should call getPermissionMap once (batch loading)
+        expect(getPermissionMap).toHaveBeenCalledTimes(1);
+        expect(getPermissionMap).toHaveBeenCalledWith({
+          userId: 'user-123',
+          scope: expect.objectContaining({
+            organisationId: 'org-123',
+          }),
+        });
+      }, { timeout: 5000 });
+    });
+
+    it('filters navigation items based on permission map', async () => {
+      const { getPermissionMap } = await import('../../rbac/api');
+      const mockPermissionMap = {
+        'read:page.dashboard': true,
+        'read:page.settings': false, // No permission
+        'read:page.admin': true,
+      };
+      vi.mocked(getPermissionMap).mockResolvedValue({ ok: true, data: mockPermissionMap });
+
+      const navItems = [
+        { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+        { id: 'settings', label: 'Settings', href: '/settings', icon: 'Settings' },
+        { id: 'admin', label: 'Admin', href: '/admin', icon: 'Shield' },
+      ];
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            navItems={navItems}
+            enforcePermissions={false}
+            routePermissions={{
+              '/dashboard': 'read',
+              '/settings': 'read',
+              '/admin': 'read',
+            }}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Should show items with permissions
+        expect(screen.getByTestId('nav-item-dashboard')).toBeInTheDocument();
+        expect(screen.getByTestId('nav-item-admin')).toBeInTheDocument();
+        // Should hide items without permissions
+        expect(screen.queryByTestId('nav-item-settings')).not.toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Audit Logging', () => {
+    it('logs strict mode violations when enabled', async () => {
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            strictMode={true}
+            auditLog={true}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(logger.error).toHaveBeenCalledWith(
+          'PaceAppLayout',
+          'STRICT MODE VIOLATION: User attempted to access protected page without permission',
+          expect.objectContaining({
+            pageName: 'dashboard',
+            operation: 'read',
+            userId: 'user-123',
+            isSuperAdmin: false,
+          })
+        );
+      }, { timeout: 3000 });
+    });
+
+    it('calls onStrictModeViolation callback when provided', async () => {
+      const onStrictModeViolation = vi.fn();
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            strictMode={true}
+            onStrictModeViolation={onStrictModeViolation}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(onStrictModeViolation).toHaveBeenCalledWith('dashboard', 'read');
+      }, { timeout: 3000 });
+    });
+
+    it('calls onPageAccessDenied callback when access is denied', async () => {
+      const onPageAccessDenied = vi.fn();
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            onPageAccessDenied={onPageAccessDenied}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(onPageAccessDenied).toHaveBeenCalledWith('dashboard', 'read');
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Permission Fallback Priority', () => {
+    it('uses pagePermissionFallback when enforcePagePermissions is true', async () => {
+      const pageFallback = <div data-testid="page-fallback">Page Access Denied</div>;
+      const generalFallback = <div data-testid="general-fallback">General Access Denied</div>;
+      
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            enforcePagePermissions={true}
+            pagePermissionFallback={pageFallback}
+            permissionFallback={generalFallback}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('page-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('general-fallback')).not.toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
+    it('uses permissionFallback when enforcePagePermissions is false', async () => {
+      const pageFallback = <div data-testid="page-fallback">Page Access Denied</div>;
+      const generalFallback = <div data-testid="general-fallback">General Access Denied</div>;
+      
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: false });
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            enforcePermissions={true}
+            enforcePagePermissions={false}
+            pagePermissionFallback={pageFallback}
+            permissionFallback={generalFallback}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+      }, { timeout: 2000 });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('general-fallback')).toBeInTheDocument();
+        expect(screen.queryByTestId('page-fallback')).not.toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Super Admin Direct Check Fallback', () => {
+    it('uses direct super admin check when RBAC is not loaded', async () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: false,
+        isLoading: true, // RBAC still loading
+        hasPermission: vi.fn(),
+        hasAnyPermission: vi.fn(),
+        hasRole: vi.fn(),
+        hasAnyRole: vi.fn(),
+        permissionMap: {},
+        roleMap: {},
+      });
+
+      mockIsSuperAdminAPI.mockResolvedValue({ ok: true, data: true }); // Direct check returns true
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(mockIsSuperAdminAPI).toHaveBeenCalled();
+        // Should render normally (super admin bypass)
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
+    it('skips direct check when RBAC already confirmed super admin', async () => {
+      mockUseRBAC.mockReturnValue({
+        isSuperAdmin: true, // Already confirmed
+        isLoading: false,
+        hasPermission: vi.fn(),
+        hasAnyPermission: vi.fn(),
+        hasRole: vi.fn(),
+        hasAnyRole: vi.fn(),
+        permissionMap: {},
+        roleMap: {},
+      });
+
+      // Clear any previous calls
+      mockIsSuperAdminAPI.mockClear();
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      // The direct check might still be called initially before RBAC loads
+      // But the component should use RBAC result when available
+      // This test verifies the component renders correctly with RBAC super admin
+      expect(screen.getByTestId('header')).toBeInTheDocument();
+    });
+  });
+
+  describe('Scope Resolution and Memoization', () => {
+    it('creates stable scope object to prevent unnecessary re-renders', async () => {
+      const { useResolvedScope } = await import('../../rbac/hooks/useResolvedScope');
+      const mockedUseResolvedScope = vi.mocked(useResolvedScope);
+      
+      let callCount = 0;
+      mockedUseResolvedScope.mockImplementation(() => {
+        callCount++;
+        return {
+          resolvedScope: { 
+            organisationId: 'org-123', 
+            eventId: 'event-123', 
+            appId: 'app-123' 
+          },
+          isLoading: false,
+          error: null,
+        };
+      });
+
+      const { rerender } = renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const _initialCallCount = callCount;
+
+      // Re-render with same props
+      rerender(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} />
+        </TestWrapper>
+      );
+
+      // Scope should be memoized and not cause additional calls
+      // (Note: This is a behavioral test - actual memoization is tested in the component)
+      expect(screen.getByTestId('header')).toBeInTheDocument();
+    });
+  });
+
+  describe('Route Config for Role-Based Routing', () => {
+    it('handles route config with permissions and roles', async () => {
+      const onRouteAccessDenied = vi.fn();
+      const routeConfig = [
+        {
+          path: '/dashboard',
+          component: () => <div>Dashboard</div>,
+          permissions: ['read:page.dashboard'],
+          roles: ['user'],
+          pageId: 'dashboard',
+        },
+      ];
+
+      const { isPermittedCached } = await import('../../rbac/api');
+      vi.mocked(isPermittedCached).mockResolvedValue({ ok: true, data: true });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+            routeConfig={routeConfig}
+            onRouteAccessDenied={onRouteAccessDenied}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        // Should not call onRouteAccessDenied when permission check passes
+        expect(onRouteAccessDenied).not.toHaveBeenCalled();
+      }, { timeout: 2000 });
+    });
+
+    it('handles route not found in config with strict mode', async () => {
+      const onRouteStrictModeViolation = vi.fn();
+      const routeConfig = [
+        {
+          path: '/other',
+          component: () => <div>Other</div>,
+          permissions: ['read'],
+        },
+      ];
+
+      mockLocation.pathname = '/unknown';
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout 
+            {...baseProps} 
+            roleBasedRouting={true}
+            routeConfig={routeConfig}
+            strictMode={true}
+            onRouteStrictModeViolation={onRouteStrictModeViolation}
+          />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        expect(onRouteStrictModeViolation).toHaveBeenCalledWith(
+          '/unknown',
+          'Route not found in configuration'
+        );
+        expect(logger.error).toHaveBeenCalledWith(
+          'PaceAppLayout',
+          'STRICT MODE VIOLATION: Route not found in configuration',
+          expect.objectContaining({
+            route: '/unknown',
+          })
+        );
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Context Error Handling', () => {
+    it('allows rendering when OrganisationContextRequiredError occurs', async () => {
+      mockUseCan.mockReturnValue({
+        can: false,
+        isLoading: false,
+        error: new OrganisationContextRequiredError(),
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+
+      renderWithProviders(
+        <TestWrapper>
+          <PaceAppLayout {...baseProps} enforcePermissions={true} />
+        </TestWrapper>,
+        { withRouter: false }
+      );
+
+      await waitFor(() => {
+        // Context errors should allow page to render (so it can show helpful messaging)
+        expect(screen.getByTestId('header')).toBeInTheDocument();
+        expect(screen.getByTestId('outlet')).toBeInTheDocument();
+        expect(screen.queryByText('Permission Error')).not.toBeInTheDocument();
+        expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+});