@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -121,15 +121,21 @@ import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeFo
 // Define Operation type locally since old RBAC types are removed
 type Operation = 'read' | 'create' | 'update' | 'delete' | 'manage';
 
+/**
+ * Props for the PaceAppLayout component.
+ * Configures the application layout including navigation, header, and footer.
+ */
 export interface PaceAppLayoutProps {
   /** The name of the application to be displayed in the header. */
   appName: string;
   /** Optional navigation items for the header menu. If not provided, uses default navigation. */
   navItems?: NavigationItem[];
-  /** Show/hide event selector in the header */
-  showEventSelector?: boolean;
-  /** Show/hide organisation selector in the header */
-  showOrgSelector?: boolean;
+  /** Show/hide unified context selector (shows all accessible orgs and events) - default: true */
+  showContextSelector?: boolean;
+  /** Show organisations in context selector - default: true */
+  showOrganisations?: boolean;
+  /** Show events in context selector - default: true */
+  showEvents?: boolean;
   /** Custom actions to display in the header (between event selector and user menu) */
   headerActions?: React.ReactNode;
   /** Custom logo component (overrides default logo) */
@@ -345,8 +351,9 @@ export interface PaceAppLayoutProps {
 export function PaceAppLayout({ 
   appName, 
   navItems, 
-  showEventSelector,
-  showOrgSelector,
+  showContextSelector = true,
+  showOrganisations = true,
+  showEvents = true,
   headerActions,
   customLogo,
   logoHref = '/dashboard',
@@ -524,12 +531,15 @@ export function PaceAppLayout({
   // 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;
+  // Pass super admin status to avoid duplicate check - use null if still checking, false/true if known
+  const superAdminStatus = isSuperAdminFromRBAC ? true : (isCheckingSuperAdminDirect ? null : isSuperAdminDirect);
   const { can: canFromHook, isLoading: isCheckingPermission, error: permissionError } = useCan(
     user?.id || '',
     scope,
     shouldCheckPermission ? currentPermission : ('' as Permission),
     shouldCheckPermission ? currentPageId : '',
     true, // useCache
+    superAdminStatus, // Pass super admin status to avoid duplicate check
     appName // Pass appName for PORTAL/ADMIN special case
   );
 
@@ -607,9 +617,9 @@ export function PaceAppLayout({
       const hasOrganisationContext = currentScope.organisationId;
       const hasUser = !!user?.id;
       
-      // BUG FIX: When showOrgSelector is enabled, show navigation optimistically while waiting
-      // for organisation selection. Only hide navigation if user is not loaded.
-      // This prevents navigation from disappearing after initial render while waiting for org selection.
+      // Show navigation optimistically while waiting for context selection.
+      // Only hide navigation if user is not loaded.
+      // This prevents navigation from disappearing after initial render while waiting for context.
       if (!hasUser) {
         // User not loaded yet - show all items until user is ready
         if (isMounted) {
@@ -618,9 +628,9 @@ export function PaceAppLayout({
         return;
       }
 
-      // If no organisation context yet, show items optimistically if org selector is enabled
-      // This allows users to see navigation while they select an organisation
-      // Only proceed with permission filtering once organisation is selected
+      // If no organisation context yet, show items optimistically
+      // This allows users to see navigation while they select a context
+      // Only proceed with permission filtering once context is selected
       if (!hasOrganisationContext) {
         if (isMounted) {
           // Show items optimistically when org selector is enabled, otherwise show all items
@@ -675,32 +685,130 @@ export function PaceAppLayout({
           scope: permissionScope,
         });
 
-        // Filter items using the permission map (synchronous, no rate limit issues)
-        const filtered = baseMenuItems.map((item) => {
-          if (!item.href) return { item, hasAccess: true };
-          
-          // Extract page ID from href: remove leading slash, fallback to 'dashboard' for root
-          // This matches database page names in rbac_app_pages
-          const pageId = pageIdMapping[item.href] || (item.href === '/' ? 'dashboard' : item.href.slice(1)) || 'dashboard';
-          const permission = routePermissions[item.href] || defaultPermission;
-          const fullPermission: Permission = permission.includes(':')
-            ? (permission as Permission)
-            : (pageId ? `${permission}:page.${pageId}` : permission) as Permission;
-          
-          // Check permission map (super admin check already handled in getPermissionMap)
-          const hasAccess = permissionMap['*'] === true || permissionMap[fullPermission] === true;
-          
-          return { item, hasAccess };
-        });
+        // Filter items using the permission map and scope type
+        // First, get scope types for all pages (batch if possible, or individual)
+        const { getPageScopeType } = await import('../../rbac/api');
+        const effectiveAppId = currentScope.appId || resolvedAppId;
+        const effectiveAppName = appName;
+        
+        // Determine current context type for scope filtering
+        const hasEventContext = !!currentScope.eventId;
+        const hasOrgContext = !!currentScope.organisationId;
+        
+        // Filter items using both permission map and scope type
+        const filtered = await Promise.all(
+          baseMenuItems.map(async (item) => {
+            if (!item.href) return { item, hasAccess: true, matchesScope: true, scopeCheckError: false };
+            
+            // Extract page ID from href: remove leading slash, fallback to 'dashboard' for root
+            // This matches database page names in rbac_app_pages
+            const pageId = pageIdMapping[item.href] || (item.href === '/' ? 'dashboard' : item.href.slice(1)) || 'dashboard';
+            const permission = routePermissions[item.href] || defaultPermission;
+            const fullPermission: Permission = permission.includes(':')
+              ? (permission as Permission)
+              : (pageId ? `${permission}:page.${pageId}` : permission) as Permission;
+            
+            // Check permission map (super admin check already handled in getPermissionMap)
+            const hasAccess = permissionMap['*'] === true || permissionMap[fullPermission] === true;
+            
+            // Check scope type compatibility
+            let matchesScope = true;
+            let scopeCheckError = false;
+            if (effectiveAppId || effectiveAppName) {
+              try {
+                const pageScopeType = await getPageScopeType(
+                  pageId,
+                  effectiveAppId,
+                  effectiveAppName
+                );
+                
+                // Filter based on current context:
+                // - If event is selected: show only 'event' or 'both' pages
+                // - If only org is selected: show only 'organisation' or 'both' pages
+                if (hasEventContext) {
+                  // Event context: show 'event' or 'both' pages only
+                  matchesScope = pageScopeType === 'event' || pageScopeType === 'both';
+                } else if (hasOrgContext) {
+                  // Organisation context only: show 'organisation' or 'both' pages only
+                  matchesScope = pageScopeType === 'organisation' || pageScopeType === 'both';
+                } else {
+                  // No context: show all pages (shouldn't happen, but safe fallback)
+                  matchesScope = true;
+                }
+              } catch (error) {
+                // If we can't get scope type, allow the page (graceful degradation)
+                // This prevents navigation from disappearing if there's a database issue
+                scopeCheckError = true;
+                logger.warn('PaceAppLayout', 'Failed to get page scope type for navigation filtering', {
+                  pageId,
+                  href: item.href,
+                  contextType: hasEventContext ? 'event' : (hasOrgContext ? 'organisation' : 'none'),
+                  error: error instanceof Error ? error.message : String(error),
+                  note: 'Allowing page to prevent navigation from disappearing - this may indicate missing scope_type in database'
+                });
+                matchesScope = true; // Default to allowing if we can't check
+              }
+            } else {
+              // No appId/appName available - can't check scope, allow the page
+              // This happens during initial load before app context is resolved
+              matchesScope = true;
+            }
+            
+            return { item, hasAccess, matchesScope, scopeCheckError };
+          })
+        );
 
         if (!isMounted) return;
 
         const accessibleItems = filtered
-          .filter(({ hasAccess }) => hasAccess)
+          .filter(({ hasAccess, matchesScope }) => hasAccess && matchesScope)
           .map(({ item }) => item);
 
+        // If all items were filtered out, check if it's due to scope filtering
+        // This can happen if:
+        // 1. All pages are scoped for the other context type (expected behavior)
+        // 2. Scope type lookup failed for all pages (should fallback to showing items with permissions)
+        if (accessibleItems.length === 0 && filtered.length > 0) {
+          const itemsWithPermissions = filtered.filter(({ hasAccess }) => hasAccess);
+          const itemsFilteredByScope = filtered.filter(({ hasAccess, matchesScope }) => hasAccess && !matchesScope);
+          const itemsWithScopeErrors = filtered.filter(({ hasAccess, scopeCheckError }) => hasAccess && scopeCheckError);
+          
+          // If scope checking failed for ALL items with permissions, fall back to showing them
+          // This prevents navigation from disappearing due to database/API issues
+          if (itemsWithPermissions.length > 0 && 
+              itemsWithScopeErrors.length === itemsWithPermissions.length) {
+            logger.warn('PaceAppLayout', 'Scope checking failed for all items - falling back to permission-only filtering', {
+              contextType: hasEventContext ? 'event' : (hasOrgContext ? 'organisation' : 'none'),
+              totalItems: baseMenuItems.length,
+              itemsWithPermissions: itemsWithPermissions.length,
+              scopeCheckErrorCount: itemsWithScopeErrors.length,
+              note: 'Showing items based on permissions only - scope filtering disabled due to errors. This may indicate database issues or missing scope_type values.'
+            });
+            
+            // Fall back to showing items that have permissions (ignore scope check)
+            const fallbackItems = filtered
+              .filter(({ hasAccess }) => hasAccess)
+              .map(({ item }) => item);
+            
+            if (isMounted && fallbackItems.length > 0) {
+              setFilteredMenuItems(fallbackItems);
+              return;
+            }
+          } else if (itemsWithPermissions.length > 0 && itemsFilteredByScope.length === itemsWithPermissions.length) {
+            // All items were filtered by scope (not errors) - this is expected if all pages are scoped for other context
+            logger.info('PaceAppLayout', 'All navigation items filtered out by scope type', {
+              contextType: hasEventContext ? 'event' : (hasOrgContext ? 'organisation' : 'none'),
+              totalItems: baseMenuItems.length,
+              itemsWithPermissions: itemsWithPermissions.length,
+              itemsFilteredByScope: itemsFilteredByScope.length,
+              note: 'All pages appear to be scoped for a different context type - this is expected behavior. Navigation will be empty until user selects the appropriate context.'
+            });
+          }
+        }
+
         // SECURITY: Never show all items if permission check fails - this would be a security risk
         // If all items are filtered out, it means the user doesn't have permission to see any navigation
+        // OR all pages are scoped for a different context type
         // This is the correct behavior - better to show nothing than show unauthorized items
         setFilteredMenuItems(accessibleItems);
       } catch (error) {
@@ -718,7 +826,7 @@ export function PaceAppLayout({
     return () => {
       isMounted = false;
     };
-  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId, selectedOrganisation?.id]);
+  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId, selectedOrganisation?.id, selectedEvent?.event_id, appName]);
 
   // NEW: Phase 2 - Enhanced Routing Features
   // Check route access for role-based routing
@@ -817,25 +925,39 @@ export function PaceAppLayout({
   }, [roleBasedRouting, routeConfig, location.pathname, strictMode, user?.id, fallbackRoute, scope, navigate, auditLog, onRouteAccessDenied, onRouteStrictModeViolation]);
 
   const handleSignOut = async () => {
-    await signOut();
+    try {
+      await signOut();
+    } catch (error) {
+      logger.error('PaceAppLayout', 'Failed to sign out', { error: error instanceof Error ? error.message : String(error) });
+    }
   };
 
   const handleChangePassword = async (newPassword: string, confirmPassword: string) => {
-    // The form component in UserMenu already checks for matching passwords
-    const result = await updatePassword(newPassword);
-    if (result?.error) {
-      // The form will display the error message
-      logger.error('PaceAppLayout', 'Failed to change password', { error: result.error.message });
-      // Convert AuthError to PasswordChangeFormError
+    try {
+      // The form component in UserMenu already checks for matching passwords
+      const result = await updatePassword(newPassword);
+      if (result?.error) {
+        // The form will display the error message
+        logger.error('PaceAppLayout', 'Failed to change password', { error: result.error.message });
+        // Convert AuthError to PasswordChangeFormError
+        return {
+          error: {
+            message: result.error.message,
+            code: result.error.name || 'PASSWORD_UPDATE_ERROR'
+          }
+        };
+      }
+      // The form will handle closing the modal on success
+      return {};
+    } catch (error) {
+      logger.error('PaceAppLayout', 'Failed to change password', { error: error instanceof Error ? error.message : String(error) });
       return {
         error: {
-          message: result.error.message,
-          code: result.error.name || 'PASSWORD_UPDATE_ERROR'
+          message: error instanceof Error ? error.message : 'An unexpected error occurred',
+          code: 'PASSWORD_UPDATE_ERROR'
         }
       };
     }
-    // The form will handle closing the modal on success
-    return {};
   };
 
   // CRITICAL: Wait for organisation context to be ready before proceeding
@@ -953,8 +1075,9 @@ export function PaceAppLayout({
             navigate(item.href);
           }
         }}
-        showEventSelector={showEventSelector}
-        showOrgSelector={showOrgSelector}
+        showContextSelector={showContextSelector}
+        showOrganisations={showOrganisations}
+        showEvents={showEvents}
         showUserMenu={showUserMenu}
         className={headerClassName || "sticky top-0 z-[40] w-full"}
       />

package/src/components/PaceAppLayout/README.md

@@ -27,8 +27,7 @@ A comprehensive application layout component that provides a consistent structur
 |------|------|---------|-------------|
 | `appName` | `string` | required | The name of the application to be displayed in the header |
 | `navItems` | `NavigationItem[]` | optional | Navigation items for the header menu. If not provided, uses default navigation |
-| `showEventSelector` | `boolean` | `true` | Show/hide event selector in the header |
-| `showOrgSelector` | `boolean` | `false` | Show/hide organisation selector in the header |
+| `showContextSelector` | `boolean` | `true` | Show/hide unified context selector (organisations and events) in the header |
 | `headerActions` | `React.ReactNode` | optional | Custom actions to display in the header (between event selector and user menu) |
 | `customLogo` | `React.ReactNode` | optional | Custom logo component (overrides default logo) |
 | `logoHref` | `string` | `'/dashboard'` | URL to navigate to when logo is clicked (e.g., '/dashboard', '/home') |
@@ -162,7 +161,7 @@ function TeamApp() {
           <PaceAppLayout 
             appName="TEAM" 
             navItems={teamNavItems}
-            showEventSelector={false} // Hide event selector
+            showContextSelector={false} // Hide context selector
           />
         }>
           <Route index element={<ProfilePage />} />
@@ -231,26 +230,24 @@ function App() {
 
 ## When to Use Each Feature
 
-### Show Event Selector (`showEventSelector={true}`)
+### Show Context Selector (`showContextSelector={true}`) - Default
 - Event management applications
 - Apps with multi-tenant event contexts
-- Applications where users need to switch between events
+- Multi-organisation applications
+- Applications where users need to switch between events or organisations
 - Event planning tools
 - Event registration systems
+- Hybrid apps (like pace-mint) that support both event and organisation contexts
+- Organisation management tools
+- Multi-tenant applications with organisation context
+- Apps requiring organisation-scoped data access
 
-### Hide Event Selector (`showEventSelector={false}`)
+### Hide Context Selector (`showContextSelector={false}`)
 - Personal profile management apps (like TEAM)
 - User account settings applications
-- Non-event specific tools
+- Apps that don't require event or organisation context
 - Single-tenant applications
-- Administrative dashboards that don't depend on events
-
-### Show Organisation Selector (`showOrgSelector={true}`)
-- Multi-organisation applications
-- Apps where users need to switch between organisations
-- Organisation management tools
-- Multi-tenant applications with organisation context
-- Apps requiring organisation-scoped data access
+- Administrative dashboards that don't depend on events or organisations
 
 ### Custom Header Components
 - Applications requiring custom branding
@@ -267,7 +264,7 @@ function App() {
 
 ## Integration with UnifiedAuthProvider
 
-The PaceAppLayout works seamlessly with the UnifiedAuthProvider. When `showEventSelector={false}`, the provider will:
+The PaceAppLayout works seamlessly with the UnifiedAuthProvider. When `showContextSelector={false}`, the provider will:
 
 - Still handle user authentication
 - Provide user profile access
@@ -285,7 +282,7 @@ function App() {
           <Route path="/" element={
             <PaceAppLayout 
               appName="TEAM" 
-              showEventSelector={false}  // No events needed
+              showContextSelector={false}  // No context selection needed
             />
           }>
             <Route index element={<ProfilePage />} />

package/src/components/PaceAppLayout/test-setup.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vitest/globals" />
 /**
  * @file Shared Test Setup for PaceAppLayout Tests
  * @package @jmruthers/pace-core
@@ -10,8 +11,6 @@
  * provides the shared mock data and reset functions that can be imported and used
  * in the vi.mock() factory functions.
  */
-
-import { vi } from 'vitest';
 import React from 'react';
 
 // === MOCK DATA ===
@@ -118,7 +117,7 @@ export const createMockHeader = () => ({
     onChangePassword, 
     currentPath, 
     onNavigate, 
-    showEventSelector, 
+    showContextSelector, 
     showUserMenu, 
     className 
   }: any) => (
@@ -157,7 +156,7 @@ export const createMockHeader = () => ({
         Navigate
       </button>
       <div data-testid="current-path">{currentPath}</div>
-      <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
+      <div data-testid="show-context-selector">{showContextSelector !== false ? 'true' : 'false'}</div>
     </header>
   )
 });

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -131,6 +131,9 @@ import { clearPalette } from '../../theming/runtime';
 import { EventServiceContext } from '../../providers/services/EventServiceProvider';
 import { logger } from '../../utils/core/logger';
 
+/**
+ * Props for the PaceLoginPage component.
+ */
 export interface PaceLoginPageProps {
   /** The name of the application to be displayed on the login form. */
   appName: string;

package/src/components/PasswordChange/PasswordChangeForm.tsx

@@ -103,16 +103,25 @@ import { Input } from '../Input/Input';
 import { Label } from '../Label';
 import { cn } from '../../utils/core/cn';
 
+/**
+ * Form values for password change.
+ */
 export interface PasswordChangeFormValues {
   newPassword: string;
   confirmPassword: string;
 }
 
+/**
+ * Error structure for password change form.
+ */
 export interface PasswordChangeFormError {
   message?: string;
   code?: string;
 }
 
+/**
+ * Props for the PasswordChangeForm component.
+ */
 export interface PasswordChangeFormProps {
   onSubmit: (values: PasswordChangeFormValues) => Promise<{ error?: PasswordChangeFormError }>;
   className?: string;

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -79,6 +79,9 @@ import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
 import { logger } from '../../utils/core/logger';
 import { usePreventTabReload } from '../../hooks/usePreventTabReload';
 
+/**
+ * Props for the ProtectedRoute component.
+ */
 export interface ProtectedRouteProps {
   /**
    * Whether an event is required for routes inside this component.
@@ -88,14 +91,6 @@ export interface ProtectedRouteProps {
    */
   requireEvent?: boolean;
 
-  /**
-   * Whether super admins can bypass event requirement.
-   * Note: This feature requires additional RBAC setup. For simple bypass, set requireEvent={false} instead.
-   * @default false
-   * @deprecated Use requireEvent={false} for routes that don't need events
-   */
-  allowSuperAdminBypass?: boolean;
-
   /**
    * Custom component to render when no events are available.
    * If not provided, a default message is shown.
@@ -133,7 +128,6 @@ export interface ProtectedRouteProps {
  */
 export function ProtectedRoute({
   requireEvent = false,
-  allowSuperAdminBypass = false,
   noEventsFallback,
   loadingFallback,
   loginPath = '/login'

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -35,9 +35,9 @@
  *       refetch={refetch}
  *     >
  *       <h1>Event Details</h1>
- *       <div className="content">
+ *       <main className="content">
  *         Your public page content
- *       </div>
+ *       </main>
  *     </PublicPageLayout>
  *   );
  * }
@@ -90,8 +90,6 @@ export interface PublicPageLayoutProps {
   refetch?: () => Promise<void> | void;
   /** Whether to show the footer (default: true) */
   showFooter?: boolean;
-  /** @deprecated Custom CSS classes for the layout - no longer used as wrapper div was removed */
-  className?: string;
   /** Custom error fallback component */
   errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
   /** Custom loading fallback component */
@@ -294,7 +292,6 @@ export function PublicPageLayout({
   error = null,
   refetch,
   showFooter = true,
-  className = '',
   errorFallback: ErrorFallback,
   loadingFallback: LoadingFallback,
   customHeader,

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -50,6 +50,10 @@ interface PublicPageContextType {
   };
 }
 
+/**
+ * Context for public pages.
+ * Provides isolated context for public pages without authentication requirements.
+ */
 export const PublicPageContext = createContext<PublicPageContextType | undefined>(undefined);
 
 export interface PublicPageProviderProps {