@jmruthers/pace-core 0.5.111 → 0.5.112

package/src/components/DataTable/components/DataTableCore.tsx

@@ -911,8 +911,13 @@ function DataTableInternal<TData extends DataRecord>({
     throw new Error('DataTable requires authenticated user for RBAC');
   }
 
+  // Wait for permission check to complete before making access decisions
+  if (permissions.canRead.isLoading) {
+    console.log('[DataTable] ⏳ Permission check in progress - showing loading state');
+    return <LoadingComponent />;
+  }
 
-  // MANDATORY: No data access without read permission
+  // MANDATORY: No data access without read permission (only check after loading completes)
   if (!permissions.canRead.can) {
     console.warn('[DataTable] 🚫 Access denied - no read permission:', {
       canRead: permissions.canRead,

package/src/components/EventSelector/EventSelector.tsx

@@ -215,8 +215,38 @@ export function EventSelector({
   }, [events]);
 
   // Default to the next upcoming event if none selected, fallback to most recent past event
+  // IMPORTANT: Only auto-select if there's no persisted event being restored
   useEffect(() => {
-    if (!selectedEvent && events.length > 0) {
+    // Only auto-select if events are loaded, no event is selected, and not currently loading
+    if (!selectedEvent && events.length > 0 && !isLoading) {
+      // Check if there's a persisted event that should be loaded
+      // If persisted event exists in storage, don't auto-select - let it load first
+      const persistedEventId = localStorage.getItem('pace-core-selected-event') || sessionStorage.getItem('pace-core-selected-event');
+      
+      if (persistedEventId) {
+        // Check if the persisted event is in the available events list
+        const persistedEvent = events.find(e => e.event_id === persistedEventId);
+        
+        if (persistedEvent) {
+          // Persisted event exists in available events - it should have been loaded by EventService
+          // If it's still not selected, there might be an issue, but don't auto-select as a fallback
+          // The EventService should have handled this during initialization
+          console.debug('[EventSelector] Persisted event found in storage but not selected:', persistedEventId);
+          return;
+        } else {
+          // Persisted event ID exists but event is not in available events list
+          // This means the user no longer has access to that event - clear it and auto-select
+          localStorage.removeItem('pace-core-selected-event');
+          sessionStorage.removeItem('pace-core-selected-event');
+          autoSelectEvent();
+        }
+      } else {
+        // No persisted event - safe to auto-select (new user or first visit)
+        autoSelectEvent();
+      }
+    }
+    
+    function autoSelectEvent() {
       const today = new Date();
       const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
       
@@ -245,7 +275,7 @@ export function EventSelector({
         }
       }
     }
-  }, [events, selectedEvent, setSelectedEvent, onEventChange]);
+  }, [events, selectedEvent, setSelectedEvent, onEventChange, isLoading]);
 
   // Loading state
   if (isLoading) {

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -487,11 +487,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -636,11 +650,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -700,11 +728,25 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'dashboard:read': true,
+          // Add page permissions for items with hrefs (NavigationMenu checks these)
+          'read:page.dashboard': true,
+          'read:page.users': true,
+          'read:page.settings': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'dashboard:read'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => p === 'dashboard:read')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return p === 'dashboard:read' || 
+                 p === 'read:page.dashboard' || 
+                 p === 'read:page.users' || 
+                 p === 'read:page.settings';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });
@@ -894,11 +936,17 @@ describe('NavigationMenu Component', () => {
       mockUsePermissions.mockReturnValue({
         permissions: {
           'valid-permission': true,
+          // Add page permission for /test href (NavigationMenu checks this)
+          'read:page.test': true,
         } as any,
         isLoading: false,
         error: null,
-        hasPermission: vi.fn((p: any) => p === 'valid-permission'),
-        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => typeof p === 'string' && p === 'valid-permission')),
+        hasPermission: vi.fn((p: any) => {
+          return p === 'valid-permission' || p === 'read:page.test';
+        }),
+        hasAnyPermission: vi.fn((ps: any[]) => ps.some((p: any) => {
+          return (typeof p === 'string' && p === 'valid-permission') || p === 'read:page.test';
+        })),
         hasAllPermissions: vi.fn(() => true),
         refetch: vi.fn(),
       });

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -446,19 +446,71 @@ export const NavigationMenu = React.forwardRef<
     selectedEventId: selectedEvent?.event_id || null
   });
 
+  // Stabilize scope object to prevent unnecessary permission refetches
+  // This prevents the permission map from being cleared when scope object reference changes
+  const stableScopeRef = React.useRef<{ organisationId: string; eventId?: string; appId?: string }>({
+    organisationId: '',
+    eventId: undefined,
+    appId: undefined
+  });
+
+  // Only update stable scope if values actually changed
+  if (resolvedScope?.organisationId) {
+    const newOrgId = resolvedScope.organisationId;
+    const newEventId = resolvedScope.eventId;
+    const newAppId = resolvedScope.appId;
+    
+    if (stableScopeRef.current.organisationId !== newOrgId ||
+        stableScopeRef.current.eventId !== newEventId ||
+        stableScopeRef.current.appId !== newAppId) {
+      stableScopeRef.current = {
+        organisationId: newOrgId,
+        eventId: newEventId,
+        appId: newAppId
+      };
+    }
+  } else if (!resolvedScope) {
+    // Only reset if we had a previous value - don't clear on initial render
+    if (stableScopeRef.current.organisationId !== '') {
+      stableScopeRef.current = {
+        organisationId: '',
+        eventId: undefined,
+        appId: undefined
+      };
+    }
+  }
+
+  const stableScope = stableScopeRef.current;
+
   // Get permissions map for synchronous permission checks
   const userId = authContext?.user?.id || '';
-  const scope = resolvedScope || { organisationId: '', eventId: undefined, appId: undefined };
-  const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading } = usePermissions(
+  const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading, error: permissionsError } = usePermissions(
     userId as any,
-    scope as any
+    stableScope as any
   );
 
   // NEW: Phase 2 - Enhanced Security Features
   // Filter navigation items based on permissions using RBAC hooks
   const filteredItems = React.useMemo(() => {
-    // If filtering disabled, auth unavailable, RBAC unavailable, scope/permissions loading, or no org context: show all items (except hidden)
-    if (!filterByPermissions || !authContext || !rbacContext || scopeLoading || permissionsLoading || !resolvedScope?.organisationId) {
+    // Security: If filtering is enabled but we're missing required context or still loading, show NO items
+    // This prevents security risk of showing items before permissions are verified
+    if (filterByPermissions) {
+      if (!authContext || !rbacContext || scopeLoading || permissionsLoading || !resolvedScope?.organisationId) {
+        // Still loading - show nothing to prevent security risk
+        return [];
+      }
+      
+      // If there's an error or empty permission map after loading, show nothing
+      // Security: Better to show nothing than risk showing unauthorized items
+      if (permissionsError || !permissionMap || Object.keys(permissionMap).length === 0) {
+        console.warn('[NavigationMenu] Permission map is empty or has error - showing no items for security', {
+          permissionsError: permissionsError?.message,
+          permissionMapSize: permissionMap ? Object.keys(permissionMap).length : 0
+        });
+        return [];
+      }
+    } else {
+      // Filtering disabled - only filter out hidden items
       return (items || []).filter(item => !item.meta?.hidden);
     }
     
@@ -553,25 +605,32 @@ export const NavigationMenu = React.forwardRef<
         }
       }
       
-      // NEW: Auto-check page permissions for items with href but no explicit permissions
-      // If item has an href but no explicit permissions/roles/accessLevel, check page permission
-      if (item.href && !item.permissions && !item.roles && !item.accessLevel) {
+      // NEW: Auto-check page permissions for items with href
+      // Always check page permissions for items with href, even if they have explicit permissions/roles/accessLevel
+      // This ensures that items are filtered out if the user doesn't have access to the page itself
+      if (item.href) {
         const pageId = item.pageId || getPageIdFromHref(item.href);
         if (pageId) {
           // Check for read permission on the page
           const pagePermission: Permission = `read:page.${pageId}` as Permission;
           
           // Check permission map (super admin has access to everything via '*' key)
-          const hasPagePermission = permissionMap['*'] === true || permissionMap[pagePermission] === true;
+          // Only allow if permission is explicitly true (undefined/false means no access)
+          const isSuperAdmin = permissionMap['*'] === true;
+          const hasPagePermission = permissionMap[pagePermission] === true;
+          const finalHasPermission = isSuperAdmin || hasPagePermission;
           
-          if (!hasPagePermission) {
+          if (!finalHasPermission) {
             if (auditLog) {
               console.log(`[NavigationMenu] Filtering out navigation item "${item.label}" - no page permission:`, {
                 itemId: item.id,
                 href: item.href,
                 pageId,
                 permission: pagePermission,
-                hasPermission: hasPagePermission
+                hasPermission: finalHasPermission,
+                isSuperAdmin,
+                permissionMapValue: permissionMap[pagePermission],
+                permissionMapKeys: Object.keys(permissionMap).slice(0, 10) // Show first 10 keys for debugging
               });
             }
             return false;
@@ -610,9 +669,13 @@ export const NavigationMenu = React.forwardRef<
       };
     };
     
-    return (items || [])
+    // Filter items based on permissions - only show items with explicit permission
+    // Security: No fallback - if items don't have permission, they are hidden
+    const filtered = (items || [])
       .map(item => filterItem(item))
       .filter((item): item is NavigationItem => item !== null);
+    
+    return filtered;
   }, [
     items, 
     filterByPermissions, 

package/src/rbac/audit-enhanced.ts

@@ -163,19 +163,31 @@ export class EnhancedRBACAuditManager {
     }
 
     try {
+      // Validate pageId: only include in page_id column if it's a valid UUID
+      // Otherwise, store it in metadata to avoid database errors
+      const rawPageId = 'pageId' in event ? event.pageId : undefined;
+      const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+      const isValidPageIdUuid = rawPageId && uuidRegex.test(rawPageId);
+      const pageIdUuid: UUID | undefined = isValidPageIdUuid ? (rawPageId as UUID) : undefined;
+      const pageIdName: string | undefined = rawPageId && !isValidPageIdUuid ? rawPageId : undefined;
+
       const auditEvent: Omit<RBACAuditEvent, 'id' | 'created_at'> = {
         event_type: event.type,
         user_id: event.userId,
         organisation_id: event.organisationId,
         event_id: 'eventId' in event ? event.eventId : undefined,
         app_id: 'appId' in event ? event.appId : undefined,
-        page_id: 'pageId' in event ? event.pageId : undefined,
+        page_id: pageIdUuid, // Only set if it's a valid UUID
         permission: 'permission' in event ? event.permission : undefined,
         decision: 'decision' in event ? event.decision : undefined,
         source: 'source' in event ? event.source : 'api', // Default to 'api' if not provided
         bypass: 'bypass' in event ? event.bypass : undefined,
         duration_ms: 'duration_ms' in event ? event.duration_ms : undefined,
-        metadata: event.metadata || {},
+        metadata: {
+          ...(event.metadata || {}),
+          // Store page name/identifier in metadata if it's not a UUID
+          page_name: pageIdName,
+        },
       };
 
       const { error } = await (this.supabase as any)

package/src/rbac/audit.test.ts

@@ -68,13 +68,15 @@ describe('RBACAuditManager', () => {
 
   describe('Permission Check Events', () => {
     it('emits permission check events correctly', async () => {
+      // Use a valid UUID format for pageId
+      const validPageId = '01234567-89ab-cdef-0123-456789abcdef' as UUID;
       const event: PermissionCheckAuditEvent = {
         type: 'permission_check',
         userId: 'user-123' as UUID,
         organisationId: 'org-456' as UUID,
         eventId: 'event-789',
         appId: 'app-101' as UUID,
-        pageId: 'page-202' as UUID,
+        pageId: validPageId,
         permission: 'read:users',
         decision: true,
         source: 'api' as AuditEventSource,
@@ -93,13 +95,16 @@ describe('RBACAuditManager', () => {
           organisation_id: 'org-456',
           event_id: 'event-789',
           app_id: 'app-101',
-          page_id: 'page-202',
+          page_id: validPageId,
           permission: 'read:users',
           decision: true,
           source: 'api',
           bypass: false,
           duration_ms: 150,
-          metadata: expect.objectContaining({ ip: '192.168.1.1' })
+          metadata: expect.objectContaining({ 
+            ip: '192.168.1.1',
+            no_organisation_context: false
+          })
         })
       ]
     );
@@ -136,13 +141,15 @@ describe('RBACAuditManager', () => {
 
   describe('Permission Denied Events', () => {
     it('emits permission denied events correctly', async () => {
+      // Use a valid UUID format for pageId
+      const validPageId = '01234567-89ab-cdef-0123-456789abcdef' as UUID;
       const event: PermissionDeniedAuditEvent = {
         type: 'permission_denied',
         userId: 'user-123' as UUID,
         organisationId: 'org-456' as UUID,
         eventId: 'event-789',
         appId: 'app-101' as UUID,
-        pageId: 'page-202' as UUID,
+        pageId: validPageId,
         permission: 'update:users',
         source: 'api' as AuditEventSource,
         metadata: { reason: 'Insufficient role' }
@@ -158,10 +165,13 @@ describe('RBACAuditManager', () => {
             organisation_id: 'org-456',
             event_id: 'event-789',
             app_id: 'app-101',
-            page_id: 'page-202',
+            page_id: validPageId,
             permission: 'update:users',
             source: 'api',
-            metadata: expect.objectContaining({ reason: 'Insufficient role' })
+            metadata: expect.objectContaining({ 
+              reason: 'Insufficient role',
+              no_organisation_context: false
+            })
           })
         ]
       );

package/src/rbac/audit.ts

@@ -173,6 +173,14 @@ export class RBACAuditManager {
         });
       }
 
+      // Validate pageId: only include in page_id column if it's a valid UUID
+      // Otherwise, store it in metadata to avoid database errors
+      const rawPageId = 'pageId' in event ? event.pageId : undefined;
+      const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+      const isValidPageIdUuid = rawPageId && uuidRegex.test(rawPageId);
+      const pageIdUuid: UUID | undefined = isValidPageIdUuid ? (rawPageId as UUID) : undefined;
+      const pageIdName: string | undefined = rawPageId && !isValidPageIdUuid ? rawPageId : undefined;
+
       const auditEvent: Omit<RBACAuditEvent, 'id' | 'created_at'> = {
         event_type: event.type,
         user_id: event.userId,
@@ -181,7 +189,7 @@ export class RBACAuditManager {
         organisation_id: event.organisationId || null, // Explicitly null if missing
         event_id: 'eventId' in event ? event.eventId : undefined,
         app_id: 'appId' in event ? event.appId : undefined,
-        page_id: 'pageId' in event ? event.pageId : undefined,
+        page_id: pageIdUuid, // Only set if it's a valid UUID
         permission: 'permission' in event ? event.permission : undefined,
         decision: 'decision' in event ? event.decision : undefined,
         source: 'source' in event ? event.source : 'api', // Default to 'api' if not provided
@@ -193,6 +201,8 @@ export class RBACAuditManager {
           cache_source: 'cache_source' in event ? event.cache_source : undefined,
           // Explicit flag indicating this event had no organisation context
           no_organisation_context: !event.organisationId,
+          // Store page name/identifier in metadata if it's not a UUID
+          page_name: pageIdName,
         },
       };
 

package/src/rbac/hooks/usePermissions.ts

@@ -83,8 +83,9 @@ export function usePermissions(userId: UUID, scope: Scope) {
 
       // Don't fetch permissions if scope is invalid (e.g., organisationId is null/empty)
       // Wait for organisation context to resolve
+      // IMPORTANT: Don't clear existing permissions here - keep them until we have new ones
       if (!scope.organisationId || scope.organisationId === null || (typeof scope.organisationId === 'string' && scope.organisationId.trim() === '')) {
-        setPermissions({} as PermissionMap);
+        // Keep existing permissions, just mark as loading
         setIsLoading(true);
         setError(null);
         return;
@@ -95,10 +96,17 @@ export function usePermissions(userId: UUID, scope: Scope) {
         setIsLoading(true);
         setError(null);
         
+        // Fetch new permissions - don't clear old ones until we have new ones
         const permissionMap = await getPermissionMap({ userId, scope });
+        
+        // Only update permissions if fetch was successful
         setPermissions(permissionMap);
       } catch (err) {
+        // On error, keep existing permissions but set error state
+        // This prevents the UI from losing all items when there's a transient error
+        console.error('[usePermissions] Failed to fetch permissions:', err);
         setError(err instanceof Error ? err : new Error('Failed to fetch permissions'));
+        // Don't clear permissions on error - keep what we had
       } finally {
         setIsLoading(false);
         isFetchingRef.current = false;
@@ -142,8 +150,9 @@ export function usePermissions(userId: UUID, scope: Scope) {
     }
 
     // Don't fetch permissions if scope is invalid (e.g., organisationId is null/empty)
+    // IMPORTANT: Don't clear existing permissions - keep them until we have new ones
     if (!scope.organisationId || scope.organisationId === null || (typeof scope.organisationId === 'string' && scope.organisationId.trim() === '')) {
-      setPermissions({} as PermissionMap);
+      // Keep existing permissions, just mark as loading
       setIsLoading(true);
       setError(null);
       return;
@@ -154,10 +163,17 @@ export function usePermissions(userId: UUID, scope: Scope) {
       setIsLoading(true);
       setError(null);
       
+      // Fetch new permissions - don't clear old ones until we have new ones
       const permissionMap = await getPermissionMap({ userId, scope });
+      
+      // Only update permissions if fetch was successful
       setPermissions(permissionMap);
     } catch (err) {
+      // On error, keep existing permissions but set error state
+      // This prevents the UI from losing all items when there's a transient error
+      console.error('[usePermissions] Failed to refetch permissions:', err);
       setError(err instanceof Error ? err : new Error('Failed to fetch permissions'));
+      // Don't clear permissions on error - keep what we had
     } finally {
       setIsLoading(false);
       isFetchingRef.current = false;

package/src/services/EventService.ts

@@ -248,8 +248,9 @@ export class EventService extends BaseService implements IEventService {
   // Lifecycle methods
   async initialize(): Promise<void> {
     await super.initialize();
-    // Skip loading persisted event initially - it will be called explicitly after login screen renders
-    await this.fetchEvents(true);
+    // Load persisted event during initialization (don't skip)
+    // This ensures the last viewed event is restored before auto-selection happens
+    await this.fetchEvents(false);
   }
 
   cleanup(): void {