@jmruthers/pace-core 0.2.5 → 0.2.7

package/src/components/RBAC/PagePermissionGuard.tsx

@@ -142,8 +142,12 @@ export function PagePermissionGuard({
 
   // Load permissions for the page
   useEffect(() => {
+    let isMounted = true;
+
     const loadPermissions = async () => {
       try {
+        if (!isMounted) return;
+        
         setPermissions(prev => ({ ...prev, isLoading: true, error: null }));
 
         const permissionChecks: Array<[Operation, string]> = [
@@ -155,6 +159,8 @@ export function PagePermissionGuard({
 
         const results = await checkMultiplePermissions(permissionChecks, cacheTTL);
 
+        if (!isMounted) return;
+
         const newPermissions: PagePermissions = {
           canRead: results.find(r => r.operation === 'read')?.hasPermission || false,
           canCreate: results.find(r => r.operation === 'create')?.hasPermission || false,
@@ -176,6 +182,8 @@ export function PagePermissionGuard({
 
         setPermissions(newPermissions);
       } catch (error) {
+        if (!isMounted) return;
+        
         console.error(`[PagePermissionGuard] Error loading permissions for ${pageId}:`, error);
         setPermissions({
           canRead: false,
@@ -189,6 +197,11 @@ export function PagePermissionGuard({
     };
 
     loadPermissions();
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+    };
   }, [pageId, checkMultiplePermissions, getDebugInfo, enableDebug, cacheTTL]);
 
   // Show loading state

package/src/components/RBAC/__tests__/PagePermissionGuard.unit.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { 
   PagePermissionGuard, 
   ReadPermissionGuard, 
@@ -48,6 +48,15 @@ const TestComponent = ({
 );
 
 describe('PagePermissionGuard', () => {
+  afterEach(() => {
+    // Clean up any pending async operations
+    if (vi.isFakeTimers()) {
+      vi.runOnlyPendingTimers();
+      vi.useRealTimers();
+    }
+    // Clear all mocks
+    vi.clearAllMocks();
+  });
   beforeEach(() => {
     vi.clearAllMocks();
   });

package/src/components/Select/Select.tsx

@@ -179,16 +179,22 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps>(
     // Listen for SelectItem mousedown events to set selecting flag
     React.useEffect(() => {
       let timeoutId: NodeJS.Timeout | null = null;
+      let isMounted = true;
       
       const handleSelectItemMouseDown = () => {
+        if (!isMounted) return;
+        
         setIsSelecting(true);
         timeoutId = setTimeout(() => {
-          setIsSelecting(false);
+          if (isMounted) {
+            setIsSelecting(false);
+          }
         }, 150);
       };
 
       document.addEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
       return () => {
+        isMounted = false;
         document.removeEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
         if (timeoutId) {
           clearTimeout(timeoutId);

package/src/components/__tests__/EdgeCaseTesting.enhanced.test.tsx

@@ -98,7 +98,8 @@ export const edgeCaseUtils = {
     
     // Component should still be functional
     const article = screen.queryByRole('article');
-    const button = screen.queryByRole('button');
+    const buttons = screen.queryAllByRole('button');
+    const button = buttons.length > 0 ? buttons[0] : null;
     const table = screen.queryByRole('table');
     const textbox = screen.queryByRole('textbox');
     const form = screen.queryByRole('form', { hidden: true });

package/src/hooks/__tests__/useRBAC.unit.test.ts

@@ -4,20 +4,16 @@ import { useRBAC } from '../useRBAC';
 import { createMockSupabaseClient, testDataGenerators } from '../../__tests__/shared';
 
 // Mock the providers
-const mockUseUnifiedAuth = vi.fn();
-const mockUseOrganisations = vi.fn();
-const mockUseEvents = vi.fn();
-
 vi.mock('../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockUseUnifiedAuth()
+  useUnifiedAuth: vi.fn()
 }));
 
 vi.mock('../../providers/OrganisationProvider', () => ({
-  useOrganisations: () => mockUseOrganisations()
+  useOrganisations: vi.fn()
 }));
 
 vi.mock('../../providers/EventProvider', () => ({
-  useEvents: () => mockUseEvents()
+  useEvents: vi.fn()
 }));
 
 // Mock Supabase client
@@ -52,7 +48,7 @@ if (mockSupabase.rpc) {
 (mockSupabase as any).from = mockFrom;
 
 describe('useRBAC', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     vi.clearAllMocks();
     
     // Reset the from mock
@@ -80,26 +76,31 @@ describe('useRBAC', () => {
       });
     }
     
-    // Default mock implementations
-    mockUseUnifiedAuth.mockReturnValue({
+    // Mock the actual hook calls
+    const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+    const { useOrganisations } = await import('../../providers/OrganisationProvider');
+    const { useEvents } = await import('../../providers/EventProvider');
+    
+    vi.mocked(useUnifiedAuth).mockReturnValue({
       user: { id: 'test-user-id' },
       session: { access_token: 'test-token' },
       supabase: mockSupabase,
       appName: 'test-app'
     });
     
-    mockUseOrganisations.mockReturnValue({
+    vi.mocked(useOrganisations).mockReturnValue({
       selectedOrganisation: { id: 'test-org-id' }
     });
     
-    mockUseEvents.mockReturnValue({
+    vi.mocked(useEvents).mockReturnValue({
       selectedEvent: { event_id: 'test-event-id' }
     });
   });
 
   describe('Initial State', () => {
-    it('returns initial state when no user is provided', () => {
-      mockUseUnifiedAuth.mockReturnValue({
+    it('returns initial state when no user is provided', async () => {
+      const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+      vi.mocked(useUnifiedAuth).mockReturnValue({
         user: null,
         supabase: null,
         appName: null
@@ -114,8 +115,9 @@ describe('useRBAC', () => {
       expect(result.current.error).toBeNull();
     });
 
-    it('returns initial state when no supabase client is provided', () => {
-      mockUseUnifiedAuth.mockReturnValue({
+    it('returns initial state when no supabase client is provided', async () => {
+      const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+      vi.mocked(useUnifiedAuth).mockReturnValue({
         user: { id: 'test-user-id' },
         supabase: null,
         appName: 'test-app'
@@ -130,8 +132,9 @@ describe('useRBAC', () => {
       expect(result.current.error).toBeNull();
     });
 
-    it('returns initial state when no app name is provided', () => {
-      mockUseUnifiedAuth.mockReturnValue({
+    it('returns initial state when no app name is provided', async () => {
+      const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+      vi.mocked(useUnifiedAuth).mockReturnValue({
         user: { id: 'test-user-id' },
         supabase: mockSupabase,
         appName: null
@@ -758,7 +761,8 @@ describe('useRBAC', () => {
       });
 
       // Change user
-      mockUseUnifiedAuth.mockReturnValue({
+      const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+      vi.mocked(useUnifiedAuth).mockReturnValue({
         user: { id: 'different-user-id' },
         session: { access_token: 'test-token' },
         supabase: mockSupabase,
@@ -794,7 +798,8 @@ describe('useRBAC', () => {
       }, { timeout: 3000 });
 
       // Change organisation
-      mockUseOrganisations.mockReturnValue({
+      const { useOrganisations } = await import('../../providers/OrganisationProvider');
+      vi.mocked(useOrganisations).mockReturnValue({
         selectedOrganisation: { id: 'different-org-id' }
       });
 
@@ -827,7 +832,8 @@ describe('useRBAC', () => {
       });
 
       // Change event
-      mockUseEvents.mockReturnValue({
+      const { useEvents } = await import('../../providers/EventProvider');
+      vi.mocked(useEvents).mockReturnValue({
         selectedEvent: { event_id: 'different-event-id' }
       });
 
@@ -838,11 +844,12 @@ describe('useRBAC', () => {
       });
     });
 
-    it('handles missing EventProvider gracefully', () => {
+    it('handles missing EventProvider gracefully', async () => {
       const consoleSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
       
       // Mock EventProvider to throw error
-      mockUseEvents.mockImplementation(() => {
+      const { useEvents } = await import('../../providers/EventProvider');
+      vi.mocked(useEvents).mockImplementation(() => {
         throw new Error('EventProvider not available');
       });
 
@@ -873,7 +880,8 @@ describe('useRBAC', () => {
     it('includes user in returned context', async () => {
       const mockUser = testDataGenerators.createUser();
       
-      mockUseUnifiedAuth.mockReturnValue({
+      const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+      vi.mocked(useUnifiedAuth).mockReturnValue({
         user: mockUser,
         supabase: mockSupabase,
         appName: 'test-app'

package/src/providers/RBACProvider.tsx

@@ -530,13 +530,25 @@ export function RBACProvider({
 
   // Load user event access when user changes
   useEffect(() => {
+    let isMounted = true;
+
     if (user && session) {
       DebugLogger.log('RBACProvider', 'Loading user event access for authenticated user');
-      loadUserEventAccess();
+      loadUserEventAccess().catch(error => {
+        if (isMounted) {
+          console.error('Error loading user event access:', error);
+        }
+      });
     } else {
       DebugLogger.log('RBACProvider', 'Clearing user event access - no user or session');
-      setUserEventAccess([]);
+      if (isMounted) {
+        setUserEventAccess([]);
+      }
     }
+
+    return () => {
+      isMounted = false;
+    };
   }, [user, session, loadUserEventAccess]);
 
   // Permission methods

package/src/providers/__tests__/UnifiedAuthProvider.unit.test.tsx

@@ -11,7 +11,7 @@ import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
 import { createClient } from '@supabase/supabase-js';
 import { UnifiedAuthProvider, useUnifiedAuth } from '../UnifiedAuthProvider';
-import { renderWithProviders, createMockSupabaseClient } from '../../__tests__/shared';
+import { renderWithProviders, createMockSupabaseClient, resetSharedSupabaseMock } from '../../__tests__/shared';
 import { AccessLevel } from '../../types/unified';
 
 // Mock Supabase client
@@ -25,10 +25,16 @@ describe('UnifiedAuthProvider', () => {
   beforeEach(() => {
     mockSupabaseClient = createMockSupabaseClient();
     (createClient as any).mockReturnValue(mockSupabaseClient);
+    resetSharedSupabaseMock();
   });
 
   afterEach(() => {
     vi.clearAllMocks();
+    // Clean up any pending async operations
+    if (vi.isFakeTimers()) {
+      vi.runOnlyPendingTimers();
+      vi.useRealTimers();
+    }
   });
 
   const TestComponent = () => {
@@ -68,7 +74,8 @@ describe('UnifiedAuthProvider', () => {
 
     it('should handle authentication state changes', async () => {
       let authCallback: any;
-      mockSupabaseClient.auth.onAuthStateChange.mockImplementation((callback: any) => {
+      // Override the mock implementation for this specific test
+      vi.spyOn(mockSupabaseClient.auth, 'onAuthStateChange').mockImplementation((callback: any) => {
         authCallback = callback;
         return { data: { subscription: { unsubscribe: vi.fn() } } };
       });
@@ -118,7 +125,8 @@ describe('UnifiedAuthProvider', () => {
         );
       };
 
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
+      // The mock is already set up in the shared mock, but we can override it for this test
+      vi.spyOn(mockSupabaseClient.auth, 'signInWithPassword').mockResolvedValue({
         data: { user: { id: 'test-user' }, session: {} },
         error: null
       });

package/src/rbac/__tests__/cache-invalidation.test.ts

@@ -135,7 +135,7 @@ describe('Cache & Invalidation', () => {
       };
 
       const generatedKey = RBACCache.generatePermissionKey(key);
-      const expectedKey = 'perm:user-123:org-456:event-789:app-101';
+      const expectedKey = 'perm:user-123:org-456:event-789:app-101:read:events:page-999';
 
       expect(generatedKey).toBe(expectedKey);
     });
@@ -172,7 +172,7 @@ describe('Cache & Invalidation', () => {
       };
 
       const generatedKey = RBACCache.generatePermissionKey(key);
-      const expectedKey = 'perm:user-123:org-456:null:null';
+      const expectedKey = 'perm:user-123:org-456:null:null:null:null';
 
       expect(generatedKey).toBe(expectedKey);
     });

package/src/rbac/__tests__/cache.test.ts

@@ -230,7 +230,7 @@ describe('RBACCache', () => {
           organisationId: 'org-456',
         });
 
-        expect(key1).toBe('perm:user-123:org-456:null:null');
+        expect(key1).toBe('perm:user-123:org-456:null:null:null:null');
 
         const key2 = RBACCache.generatePermissionKey({
           userId: 'user-123',
@@ -239,7 +239,7 @@ describe('RBACCache', () => {
           appId: 'app-101',
         });
 
-        expect(key2).toBe('perm:user-123:org-456:event-789:app-101');
+        expect(key2).toBe('perm:user-123:org-456:event-789:app-101:null:null');
       });
 
       it('should handle missing optional fields', () => {
@@ -247,7 +247,7 @@ describe('RBACCache', () => {
           userId: 'user-123',
         });
 
-        expect(key).toBe('perm:user-123:null:null:null');
+        expect(key).toBe('perm:user-123:null:null:null:null:null');
       });
     });
 

package/src/rbac/hooks.ts

@@ -133,13 +133,6 @@ export function useCan(
     console.log('[useCan] check() called with:', { userId, scope, permission, pageId });
     console.log('[useCan] Hook parameters:', { userId, scope, permission, pageId, useCache });
     
-    // Clear cache for debugging - remove this after fixing
-    if (typeof window !== 'undefined') {
-      console.log('[useCan] Clearing cache for debugging...');
-      const { rbacCache } = await import('./cache');
-      rbacCache.clear();
-    }
-    
     if (!userId) {
       console.log('[useCan] No userId, denying access');
       setCan(false);
@@ -147,6 +140,21 @@ export function useCan(
       return;
     }
 
+    // Check for super admin status first - super admins bypass all scope requirements
+    try {
+      const { isSuperAdmin } = await import('./api');
+      const isSuper = await isSuperAdmin(userId);
+      if (isSuper) {
+        console.log('[useCan] User is super admin, granting access');
+        setCan(true);
+        setIsLoading(false);
+        return;
+      }
+    } catch (error) {
+      console.error('[useCan] Error checking super admin status:', error);
+      // Continue with normal permission check if super admin check fails
+    }
+
     // Check if scope is incomplete (missing required fields)
     if (!scope || !scope.organisationId || !scope.appId) {
       console.log('[useCan] Incomplete scope, waiting for resolution:', scope);

package/src/styles/core.css

@@ -21,7 +21,7 @@
 @theme static {
 
   --app-width: 90rem;
-  
+
   /* MAIN palette - silver */
   --color-main-raw: oklch(0.7 0.057 252.02);
   --color-main-50: oklch(0.98 0.001 252.02);
@@ -35,7 +35,7 @@
   --color-main-800: oklch(0.456 0.034 252.02);
   --color-main-900: oklch(0.332 0.024 252.02);
   --color-main-950: oklch(0.195 0.014 252.02);
-  
+
   /* SEC palette - violet */
   --color-sec-raw: oklch(0.58 0.23 280.75);
   --color-sec-50: oklch(0.98 0.003 280.75);
@@ -49,7 +49,7 @@
   --color-sec-800: oklch(0.456 0.158 280.75);
   --color-sec-900: oklch(0.332 0.099 280.75);
   --color-sec-950: oklch(0.195 0.047 280.75);
-  
+
   /* ACC palette - blood orange */
   --color-acc-raw: oklch(0.64 0.21 37.76);
   --color-acc-50: oklch(0.98 0.003 37.76);
@@ -97,10 +97,14 @@
   --print-first-page-margin: 1in;
   --print-cover-logo-size: 120px;
   --print-cover-title-size: 2.5rem;
-  --print-page-width: 8.27in; /* A4 width */
-  --print-page-height: 11.69in; /* A4 height */
-  --print-landscape-width: 11.69in; /* A4 landscape width */
-  --print-landscape-height: 8.27in; /* A4 landscape height */
+  --print-page-width: 8.27in;
+  /* A4 width */
+  --print-page-height: 11.69in;
+  /* A4 height */
+  --print-landscape-width: 11.69in;
+  /* A4 landscape width */
+  --print-landscape-height: 8.27in;
+  /* A4 landscape height */
 }
 
 @layer base {
@@ -117,47 +121,51 @@
   }
 
   /* Font definitions - Loading from consuming app's public directory with system font fallbacks */
-/* Font definitions */
-@font-face {
-  font-family: "Georama";
-  font-style: normal;
-  font-weight: 100 200 300 400 500 600 700 800 900;
-  font-display: swap;
-  src: url("/fonts/georama.woff2") format("woff2");
-}
+  /* Font definitions */
+  @font-face {
+    font-family: "Georama";
+    font-style: normal;
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    font-display: swap;
+    src: url("/fonts/georama.woff2") format("woff2");
+  }
 
-@font-face {
-  font-family: "Georama";
-  font-style: italic;
-  font-weight: 100 200 300 400 500 600 700 800 900;
-  font-display: swap;
-  src: url("/fonts/georama-italic.woff2") format("woff2");
-}
+  @font-face {
+    font-family: "Georama";
+    font-style: italic;
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    font-display: swap;
+    src: url("/fonts/georama-italic.woff2") format("woff2");
+  }
 
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 100 200 300 400 500 600 700 800 900;
-  font-display: swap;
-  src: url("/fonts/open-sans.woff2") format("woff2");
-}
+  @font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    font-display: swap;
+    src: url("/fonts/open-sans.woff2") format("woff2");
+  }
 
-@font-face {
-  font-family: "Open Sans";
-  font-style: italic;
-  font-weight: 100 200 300 400 500 600 700 800 900;
-  font-display: swap;
-  src: url("/fonts/open-sans-italic.woff2") format("woff2");
-}
+  @font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    font-display: swap;
+    src: url("/fonts/open-sans-italic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Reddit Mono";
+    font-style: normal;
+    font-weight: 200 300 400 500 600 700 800 900;
+    font-display: swap;
+    src: url("/fonts/reddit-mono.woff2") format("woff2");
+  }
 
-@font-face {
-  font-family: "Reddit Mono";
-  font-style: normal;
-  font-weight: 200 300 400 500 600 700 800 900;
-  font-display: swap;
-  src: url("/fonts/reddit-mono.woff2") format("woff2");
 }
 
+@layer components {
+
   /* Elements */
   h1,
   h2,
@@ -301,16 +309,21 @@
   }
 }
 
-@layer components {
-  /* Custom component styles go here */
-}
-
 @layer utilities {
+
   /* Print-specific utilities */
-  .print-break-avoid { page-break-inside: avoid; }
-  .print-break-before { page-break-before: always; }
-  .print-break-after { page-break-after: always; }
-  
+  .print-break-avoid {
+    page-break-inside: avoid;
+  }
+
+  .print-break-before {
+    page-break-before: always;
+  }
+
+  .print-break-after {
+    page-break-after: always;
+  }
+
   /* Print page size controls */
   .print-a4-portrait {
     @media print {
@@ -320,7 +333,7 @@
       }
     }
   }
-  
+
   .print-a4-landscape {
     @media print {
       @page {
@@ -329,7 +342,7 @@
       }
     }
   }
-  
+
   /* First page header styles */
   .print-first-page-header {
     @media print {
@@ -338,7 +351,7 @@
       }
     }
   }
-  
+
   .print-cover-header {
     @media print {
       @page :first {
@@ -346,7 +359,7 @@
       }
     }
   }
-  
+
   .print-subsequent-header {
     @media print {
       @page :not(:first) {
@@ -354,30 +367,38 @@
       }
     }
   }
-  
+
   /* Print-specific layouts */
   @media print {
-    .print-hidden { display: none !important; }
-    .print-visible { display: block !important; }
-    .print-first-page-only { 
+    .print-hidden {
+      display: none !important;
+    }
+
+    .print-visible {
+      display: block !important;
+    }
+
+    .print-first-page-only {
       display: block;
     }
+
     .print-subsequent-pages-only {
       display: none;
     }
   }
-  
+
   @media print {
     @page :not(:first) {
-      .print-first-page-only { 
+      .print-first-page-only {
         display: none !important;
       }
+
       .print-subsequent-pages-only {
         display: block !important;
       }
     }
   }
-  
+
   /* Print typography */
   .print-text {
     @media print {
@@ -386,7 +407,7 @@
       color: var(--print-color);
     }
   }
-  
+
   /* Print layout container */
   .print-layout {
     @media print {