@jmruthers/pace-core 0.5.190 → 0.5.193

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -103,10 +103,10 @@ import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { useEvents } from '../../hooks/useEvents';
 import { useEventTheme } from '../../hooks/useEventTheme';
-import { useCan, useResolvedScope } from '../../rbac/hooks';
+import { useCan, useResolvedScope, useRBAC } from '../../rbac/hooks';
 import { createScopeFromEvent } from '../../rbac/utils/eventContext';
 import { getCurrentAppName } from '../../utils/app/appNameResolver';
-import { isSuperAdmin } from '../../rbac/api';
+import { isSuperAdmin as checkSuperAdminApi } from '../../rbac/api';
 import { logger } from '../../utils/core/logger';
 import type { Permission, Scope } from '../../rbac/types';
 
@@ -372,7 +372,7 @@ export function PaceAppLayout({
   onRouteAccessDenied,
   onRouteStrictModeViolation
 }: PaceAppLayoutProps) {
-  const { user, signOut, updatePassword, supabase, appId: contextAppId } = useUnifiedAuth(); // Get appId from context (resolved on login)
+  const { user, signOut, updatePassword, supabase, appId: contextAppId, selectedOrganisationId } = useUnifiedAuth(); // Get appId from context (resolved on login)
   const { 
     selectedOrganisation, 
     isContextReady, 
@@ -380,6 +380,47 @@ export function PaceAppLayout({
     ensureOrganisationContext,
     isLoading: organisationLoading 
   } = useOrganisations();
+  // Use useRBAC to get super admin status - it's more reliable than async check
+  // Note: isSuperAdmin might be false initially while loading, but that's OK - we'll allow rendering
+  // if organisation loading completes or if we're a super admin
+  const { isSuperAdmin: isSuperAdminFromRBAC, isLoading: rbacLoading } = useRBAC();
+
+  // Also check super admin status directly as a fallback (for ADMIN/PORTAL apps)
+  // This allows super admins to proceed even if RBAC hasn't loaded yet
+  const [isSuperAdminDirect, setIsSuperAdminDirect] = useState<boolean>(false);
+  const [isCheckingSuperAdminDirect, setIsCheckingSuperAdminDirect] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkSuperAdminDirect = async () => {
+      if (!user?.id) {
+        setIsSuperAdminDirect(false);
+        setIsCheckingSuperAdminDirect(false);
+        return;
+      }
+
+      // Only skip if RBAC already confirmed super admin
+      if (isSuperAdminFromRBAC) {
+        setIsCheckingSuperAdminDirect(false);
+        return;
+      }
+
+      setIsCheckingSuperAdminDirect(true);
+      try {
+        const superAdminStatus = await checkSuperAdminApi(user.id);
+        setIsSuperAdminDirect(superAdminStatus);
+      } catch (error) {
+        logger.error('PaceAppLayout', 'Error checking super admin status directly', { userId: user?.id, error });
+        setIsSuperAdminDirect(false);
+      } finally {
+        setIsCheckingSuperAdminDirect(false);
+      }
+    };
+
+    checkSuperAdminDirect();
+  }, [user?.id, isSuperAdminFromRBAC]);
+
+  // Use direct check if RBAC hasn't loaded yet, otherwise use RBAC result
+  const isSuperAdmin = isSuperAdminFromRBAC || isSuperAdminDirect;
   const navigate = useNavigate();
   const location = useLocation();
   
@@ -408,28 +449,25 @@ export function PaceAppLayout({
   
   // Build scope from resolved values
   // Preserve appId from resolvedScope or fallback to resolvedAppId
+  // CRITICAL: Always create a new scope object from primitive values to ensure stable reference
+  // This prevents useCan from re-checking permissions when resolvedScope changes reference but values are the same
+  const scopeOrgId = resolvedScope?.organisationId || selectedOrganisation?.id || '';
+  const scopeEventId = resolvedScope?.eventId || selectedEvent?.event_id || undefined;
+  const scopeAppId = resolvedScope?.appId || resolvedAppId || undefined;
+  
   const scope = useMemo<Scope>(() => {
-    // Prefer resolvedScope if available (includes appId)
-    if (resolvedScope?.organisationId) {
-      return resolvedScope;
+    const newScope: Scope = {};
+    if (scopeOrgId) {
+      newScope.organisationId = scopeOrgId;
     }
-    
-    // Fallback: build scope from context values with resolvedAppId
-    if (selectedOrganisation?.id) {
-      return {
-        organisationId: selectedOrganisation.id,
-        eventId: selectedEvent?.event_id || undefined,
-        appId: resolvedAppId || resolvedScope?.appId || undefined
-      };
+    if (scopeEventId) {
+      newScope.eventId = scopeEventId;
     }
-    
-    // Last resort: return minimal scope
-    return {
-      organisationId: selectedOrganisation?.id || '',
-      eventId: selectedEvent?.event_id || undefined,
-      appId: resolvedAppId || resolvedScope?.appId || undefined
-    };
-  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
+    if (scopeAppId) {
+      newScope.appId = scopeAppId;
+    }
+    return newScope;
+  }, [scopeOrgId, scopeEventId, scopeAppId]);
 
   // Default navigation items if none provided
   const defaultNavItems: NavigationItem[] = useMemo(() => [
@@ -460,61 +498,45 @@ export function PaceAppLayout({
     }
     // Extract first path segment (base page name)
     const pathSegments = currentPath.slice(1).split('/').filter(Boolean);
-    return pathSegments[0] || 'home';
+    // Only return 'home' if there's actually a path segment, otherwise return empty string
+    // This prevents checking permissions for a non-existent "home" page when the index route is used
+    return pathSegments[0] || '';
   }, [location.pathname, pageIdMapping]);
 
   // Build permission string in format: operation:page.pageId
   const currentPermission = useMemo<Permission>(() => {
-    if (!enforcePermissions) {
-      return 'read:page.home' as Permission;
+    // If enforcePermissions is false, don't check any permission (return empty string)
+    // If currentPageId is empty (index route with no path segments), don't check permissions
+    if (!enforcePermissions || !currentPageId) {
+      return '' as Permission;
     }
     const permissionString = `${currentRoutePermission}:page.${currentPageId}`;
     return permissionString as Permission;
   }, [enforcePermissions, currentRoutePermission, currentPageId]);
 
   // Check super admin status before permission enforcement
-  const [isSuperAdminUser, setIsSuperAdminUser] = useState<boolean>(false);
-  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState<boolean>(false);
-
-  useEffect(() => {
-    const checkSuperAdminStatus = async () => {
-      if (!user?.id) {
-        setIsSuperAdminUser(false);
-        setIsCheckingSuperAdmin(false);
-        return;
-      }
-
-      setIsCheckingSuperAdmin(true);
-      try {
-        const superAdminStatus = await isSuperAdmin(user.id);
-        setIsSuperAdminUser(superAdminStatus);
-      } catch (error) {
-        logger.error('PaceAppLayout', 'Error checking super admin status', { userId: user?.id, error });
-        setIsSuperAdminUser(false);
-      } finally {
-        setIsCheckingSuperAdmin(false);
-      }
-    };
-
-    checkSuperAdminStatus();
-  }, [user?.id]);
+  // Removed duplicate super admin check - using useRBAC hook instead
+  // The useRBAC hook provides isSuperAdmin which is more reliable
 
   // Use useCan hook for permission checking (standardized approach)
   // Note: The database function already handles super admin bypass, but we check here
   // as an additional safety layer to prevent unnecessary permission checks
   // Pass appName to useCan so it can be passed to isPermitted for PORTAL/ADMIN special case
+  // Only check permissions if enforcePermissions is true and we have a valid permission string
+  const shouldCheckPermission = enforcePermissions && !!currentPermission && !!currentPageId;
   const { can: canFromHook, isLoading: isCheckingPermission, error: permissionError } = useCan(
     user?.id || '',
     scope,
-    currentPermission,
-    currentPageId,
+    shouldCheckPermission ? currentPermission : ('' as Permission),
+    shouldCheckPermission ? currentPageId : '',
     true, // useCache
     appName // Pass appName for PORTAL/ADMIN special case
   );
 
   // Permission enforcement state - super admin bypasses all checks
   // This ensures super admins never see permission errors even if useCan hasn't completed
-  const can = isSuperAdminUser ? true : canFromHook;
+  // Use combined super admin check (RBAC + direct check)
+  const can = isSuperAdmin ? true : canFromHook;
   const hasPermission = enforcePermissions ? can : true;
 
   // Handle permission check results with audit logging and callbacks
@@ -524,19 +546,20 @@ export function PaceAppLayout({
     }
 
     // Only proceed when permission check is complete (not loading)
-    // Wait for both super admin check and permission check to complete
-    if (isCheckingSuperAdmin || isCheckingPermission) {
+    // Super admin status is checked via useRBAC hook (isSuperAdminFromRBAC)
+    // If RBAC is still loading, allow rendering to proceed (optimistic for super admins)
+    if (isCheckingPermission) {
       return;
     }
 
     // NEW: Phase 1 - Enhanced Security Features
     // Handle strict mode violations - skip for super admins
-    if (strictMode && !isSuperAdminUser && !can) {
+    if (strictMode && !isSuperAdmin && !can) {
       logger.error('PaceAppLayout', 'STRICT MODE VIOLATION: User attempted to access protected page without permission', {
         pageName: currentPageId,
         operation: currentRoutePermission,
         userId: user?.id,
-        isSuperAdmin: isSuperAdminUser,
+        isSuperAdmin: isSuperAdmin,
         timestamp: new Date().toISOString()
       });
       
@@ -546,10 +569,10 @@ export function PaceAppLayout({
     }
     
     // Handle page access denied callback - skip for super admins
-    if (!isSuperAdminUser && !can && onPageAccessDenied) {
+    if (!isSuperAdmin && !can && onPageAccessDenied) {
       onPageAccessDenied(currentPageId, currentRoutePermission);
     }
-  }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
+  }, [enforcePermissions, can, isCheckingPermission, isSuperAdmin, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
 
   // Filter navigation items based on permissions
   // Permission filtering is always enabled - users only see navigation items they have permission to access
@@ -610,8 +633,8 @@ export function PaceAppLayout({
       // For super admins, show all items (they bypass permission checks)
       // Gracefully handle RBAC not being initialized (e.g., in tests)
       try {
-        const { isSuperAdmin } = await import('../../rbac/api');
-        const isSuper = await isSuperAdmin(user.id);
+        const { isSuperAdmin: checkSuperAdminDynamic } = await import('../../rbac/api');
+        const isSuper = await checkSuperAdminDynamic(user.id);
         
         if (isSuper) {
           // Super admins see all navigation items
@@ -825,7 +848,13 @@ export function PaceAppLayout({
   // This is critical - we must wait for organisation context before allowing any data access
   // BUT: Allow rendering to proceed if loading is complete, even if user has no organisations (valid state for profile pages)
   // Only block if we're actively loading - once loading completes (success or error), allow rendering
-  if (user?.id && organisationLoading) {
+  // EXCEPTION: Super admins can proceed even during organisation loading (they can access all orgs)
+  // Use combined super admin check (RBAC + direct check) to allow super admins to proceed immediately
+  // IMPORTANT: If we're still checking super admin status, allow rendering to proceed (optimistic approach)
+  // This prevents blocking super admins while their status is being determined
+  // Also allow rendering if we already have a selectedOrganisationId (even if organisationLoading is still true)
+  // This prevents blank pages when organisation context is available but loading state hasn't cleared yet
+  if (user?.id && organisationLoading && !isSuperAdmin && !isCheckingSuperAdminDirect && !rbacLoading && !selectedOrganisationId) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -841,10 +870,10 @@ export function PaceAppLayout({
   // These pages work with user context only and don't require organisation context
   // The app can check hasValidOrganisationContext() to determine if org context is available for org-specific features
 
-  // Show loading state while checking permissions or super admin status
-  // Keep loading active until BOTH checks complete to prevent exposing protected content
-  // This ensures we don't render the main layout when permission check failed but super admin check is pending
-  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
+  // Show loading state while checking permissions
+  // Keep loading active until permission check completes to prevent exposing protected content
+  // Super admin status is checked via useRBAC hook (isSuperAdminFromRBAC)
+  if (enforcePermissions && isCheckingPermission) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -857,7 +886,7 @@ export function PaceAppLayout({
 
   // Show permission error (only after BOTH checks are complete)
   // Super admins bypass all permission checks, so don't show errors for them
-  if (enforcePermissions && permissionError && !isSuperAdminUser) {
+  if (enforcePermissions && permissionError && !isSuperAdmin) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -871,7 +900,7 @@ export function PaceAppLayout({
 
   // Show permission fallback if user lacks permission
   // Only show this if super admin check is complete and user is not a super admin
-  if (enforcePermissions && hasPermission === false && !isCheckingSuperAdmin && !isSuperAdminUser) {
+  if (enforcePermissions && hasPermission === false && !isCheckingSuperAdminDirect && !isSuperAdmin) {
     // NEW: Phase 1 - Use page permission fallback if available
     if (enforcePagePermissions && pagePermissionFallback) {
       return <>{pagePermissionFallback}</>;

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -208,7 +208,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
       } catch (error) {
         // Service may not be available yet or events not loaded - that's okay
-        logger.debug('PaceLoginPage', 'Could not restore persisted event (service may not be ready):', error);
       }
     };
     
@@ -266,7 +265,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           .eq('app_id', appData.id);
 
         if (pagesError || !pagesData || pagesData.length === 0) {
-          logger.debug('PaceLoginPage', 'No pages configured for app:', appName);
           setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
           setIsCheckingAccess(false);
           return;
@@ -285,7 +283,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         const organisationId = orgRow?.organisation_id;
 
         if (!organisationId) {
-          logger.debug('PaceLoginPage', 'User has no organisation access');
           setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
           setIsCheckingAccess(false);
           return;
@@ -305,8 +302,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
               p_page_id: page.page_name // Page name to resolve to UUID
             });
 
-          logger.debug('PaceLoginPage', 'Permission check for page:', { pageName: page.page_name, hasPermission, error: permError });
-
           if (!permError && hasPermission === true) {
             hasAnyAccess = true;
             break;
@@ -314,14 +309,12 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
 
         if (hasAnyAccess) {
-          logger.debug('PaceLoginPage', 'User has access to app');
           setIsCheckingAccess(false);
           navigate(onSuccessRedirectPath, { replace: true });
           return;
         }
 
         // No access - deny
-        logger.debug('PaceLoginPage', 'Access denied - no permissions');
         setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
         setIsCheckingAccess(false);
       } catch (error) {

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -165,12 +165,8 @@ describe('ProtectedRoute Component', () => {
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
       
-      // Wait a bit for the logger to be called (it's called during render)
-      await waitFor(() => {
-        expect(consoleDebugSpy).toHaveBeenCalledWith(
-          expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-        );
-      }, { timeout: 1000 });
+      // Note: ProtectedRoute no longer logs this debug message - it just allows rendering
+      // The component allows rendering when events exist but none selected to make the selector visible
     });
 
     it('renders session restoration loader when session is restoring', () => {
@@ -461,9 +457,9 @@ describe('ProtectedRoute Component', () => {
       renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(consoleDebugSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-      );
+      
+      // Note: ProtectedRoute no longer logs this debug message - it just allows rendering
+      // The component allows rendering when events exist but none selected to make the selector visible
     });
 
     it('renders outlet when event is selected', () => {

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -359,7 +359,6 @@ export function ProtectedRoute({
   // The event selector will be visible and user can select, or auto-selection will kick in
   if (!selectedEvent) {
     // Log for debugging - this is expected behavior, not an error
-    logger.debug('ProtectedRoute', 'Events available but none selected - allowing render so selector is visible');
     return <Outlet />;
   }
 

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -102,7 +102,6 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
       return null;
     }
     const client = createClient<Database>(supabaseUrl, supabaseKey);
-    logger.info('PublicPageProvider', 'Supabase client created successfully for public pages');
     return client;
   }, [supabaseUrl, supabaseKey]);
 

package/src/components/Select/Select.test.tsx

@@ -465,11 +465,14 @@ describe('Select Component', () => {
       await user.click(screen.getByRole('combobox'));
       expect(screen.getByRole('listbox')).toBeInTheDocument();
       
+      // Wait for the event listener to be added (100ms delay in implementation)
+      await new Promise(resolve => setTimeout(resolve, 150));
+      
       await user.click(document.body);
       
       await waitFor(() => {
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-      });
+      }, { timeout: 2000 });
     });
 
     it('prevents opening when trigger is disabled', async () => {

package/src/components/Select/Select.tsx

@@ -145,7 +145,9 @@ export const useSelectState = ({
   }, [controlledValue, onValueChange, controlledOpen, onOpenChange]);
 
   const setOpen = React.useCallback((newOpen: boolean) => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     
     // Close all other select dropdowns when opening this one
     if (newOpen) {
@@ -210,24 +212,30 @@ export const useSelectEvents = ({ state, actions, selectRef }: UseSelectEventsPr
 
   // Handle click outside to close dropdown
   React.useEffect(() => {
+    if (!state.open) return;
+
     const handleClickOutside = (event: MouseEvent) => {
       const selectElement = selectRef.current;
-      const clickedElement = event.target as Element;
-      const isSelectItem = clickedElement?.closest('[data-testid="select-item"]');
-      const isSearchInput = clickedElement?.closest('[data-testid="select-search-input"]');
-      const isSelectContent = clickedElement?.closest('[data-testid="select-content"]');
+      if (!selectElement) return;
       
-      if (state.open && selectElement && !selectElement.contains(event.target as Node) && !isSelectItem && !isSearchInput && !isSelectContent && !isSelecting) {
+      const target = event.target as Node;
+      
+      // Close if clicking outside the select element
+      if (!selectElement.contains(target) && !isSelecting) {
         actions.setOpen(false);
       }
     };
 
-    if (state.open) {
-      document.addEventListener('mousedown', handleClickOutside);
+    // Add a small delay to avoid closing immediately when opening
+      // The delay ensures the click event that opened the dropdown has fully processed
+      const timeoutId = setTimeout(() => {
+        document.addEventListener('click', handleClickOutside, true); // Use capture phase
+      }, 100); // Small delay to let the opening click complete
+    
       return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
+        clearTimeout(timeoutId);
+        document.removeEventListener('click', handleClickOutside, true);
       };
-    }
   }, [state.open, actions, selectRef, isSelecting]);
 
   // Handle SelectItem mousedown events
@@ -588,6 +596,10 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
         className={cn("relative", className)}
         data-value={state.value}
         data-testid="select-root"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
       >
         <SelectContext.Provider value={contextValue}>
           {children}
@@ -607,9 +619,25 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     const { open, disabled, value, actions, direction = 'down' } = useSelectContext();
     const opensUpward = direction === 'up';
 
-    const handleClick = () => {
+    // Use ref to store the latest handleClick to avoid re-creating the effect
+    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>();
+    
+    const handleClick = React.useCallback((e: React.MouseEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      
+      e.preventDefault();
+      e.stopPropagation();
       actions.setOpen(!open);
-    };
+    }, [disabled, open, actions]);
+
+    // Update ref whenever handleClick changes
+    React.useEffect(() => {
+      handleClickRef.current = handleClick;
+    }, [handleClick]);
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (disabled) return;
@@ -690,9 +718,19 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       });
     }
 
+
+    // Simple ref forwarding
+    const handleRef = React.useCallback((node: HTMLButtonElement | null) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+      }
+    }, [ref]);
+
     return (
       <Button
-        ref={ref}
+        ref={handleRef}
         type="button"
         role="combobox"
         aria-expanded={open}
@@ -713,7 +751,9 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap'
         }}
-        onClick={handleClick}
+        onClick={(e) => {
+          handleClick(e);
+        }}
         onKeyDown={handleKeyDown}
         data-testid="select-trigger"
         data-value={value}
@@ -741,7 +781,12 @@ export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
     const { selectedText } = useSelectContext();
 
     return (
-      <span ref={ref} data-testid="select-value">
+      <span 
+        ref={ref} 
+        data-testid="select-value"
+        style={{ pointerEvents: 'none' }}
+        className="pointer-events-none"
+      >
         {children || (selectedText ? selectedText : placeholder)}
       </span>
     );