@jmruthers/pace-core 0.6.2 → 0.6.3

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

@@ -205,14 +205,14 @@ vi.mock('../Header', () => ({
     onChangePassword, 
     currentPath, 
     onNavigate, 
-    showEventSelector, 
+    showContextSelector, 
     showUserMenu, 
     className 
   }: any) => (
     <header 
       data-testid="header" 
       className={className}
-      data-show-event-selector={showEventSelector !== false ? 'true' : 'false'}
+      data-show-context-selector={showContextSelector !== false ? 'true' : 'false'}
       data-show-user-menu={showUserMenu !== false ? 'true' : 'false'}
     >
       <div data-testid="header-logo" data-logo-url={logoUrl} data-logo-alt={logoAlt}>
@@ -421,29 +421,29 @@ describe('PaceAppLayout Component', () => {
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'true');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'true');
     });
 
-    it('hides event selector when showEventSelector is false', () => {
+    it('hides context selector when showContextSelector is false', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...baseProps} showEventSelector={false} />
+          <PaceAppLayout {...baseProps} showContextSelector={false} />
         </TestWrapper>,
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'false');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'false');
     });
 
-    it('shows event selector when showEventSelector is explicitly true', () => {
+    it('shows context selector when showContextSelector is explicitly true', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...baseProps} showEventSelector={true} />
+          <PaceAppLayout {...baseProps} showContextSelector={true} />
         </TestWrapper>,
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'true');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'true');
     });
   });
 

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -130,10 +130,12 @@ export interface PaceAppLayoutProps {
   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) */
@@ -349,8 +351,9 @@ export interface PaceAppLayoutProps {
 export function PaceAppLayout({ 
   appName, 
   navItems, 
-  showEventSelector,
-  showOrgSelector,
+  showContextSelector = true,
+  showOrganisations = true,
+  showEvents = true,
   headerActions,
   customLogo,
   logoHref = '/dashboard',
@@ -614,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) {
@@ -625,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
@@ -682,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) {
@@ -725,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
@@ -974,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

@@ -117,7 +117,7 @@ export const createMockHeader = () => ({
     onChangePassword, 
     currentPath, 
     onNavigate, 
-    showEventSelector, 
+    showContextSelector, 
     showUserMenu, 
     className 
   }: any) => (
@@ -156,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/index.ts

@@ -215,8 +215,9 @@ export {
 } from './NavigationMenu';
 export type { NavigationMenuProps, NavigationItem } from './NavigationMenu';
 
-export { OrganisationSelector } from './OrganisationSelector';
-export type { OrganisationSelectorProps } from './OrganisationSelector';
+// Unified context selector (replaces separate org/event selectors)
+export { ContextSelector } from './ContextSelector';
+export type { ContextSelectorProps } from './ContextSelector';
 
 export { UserMenu } from './UserMenu';
 
@@ -235,10 +236,9 @@ export { SessionRestorationLoader } from './SessionRestorationLoader';
 export type { SessionRestorationLoaderProps } from './SessionRestorationLoader';
 
 // ============================================================================
-// EVENT MANAGEMENT
+// CONTEXT SELECTION
 // ============================================================================
-
-export { EventSelector } from './EventSelector';
+// Note: EventSelector and OrganisationSelector removed - use ContextSelector instead
 
 // ============================================================================
 // AUTHENTICATION FORMS

package/src/eslint-rules/pace-core-compliance.cjs

@@ -378,6 +378,112 @@ module.exports = {
           }
         };
       }
+    },
+
+    /**
+     * Disallow direct Supabase client creation - must use useSecureSupabase
+     */
+    'no-direct-supabase-client': {
+      meta: {
+        type: 'problem',
+        docs: {
+          description: 'Disallow direct createClient calls from @supabase/supabase-js. Use useSecureSupabase() from pace-core instead to ensure organisation context and RLS policies are enforced.',
+          category: 'Security',
+          recommended: true
+        },
+        messages: {
+          directClientCreation: "Direct Supabase client creation detected. You MUST use useSecureSupabase() from '@jmruthers/pace-core/rbac' instead to ensure organisation context and RLS policies are enforced. This prevents cross-organisation data access.",
+          directClientImport: "Direct import of createClient from @supabase/supabase-js is not allowed. Use useSecureSupabase() from '@jmruthers/pace-core/rbac' instead."
+        },
+        hasSuggestions: true
+      },
+      create(context) {
+        let hasSupabaseImport = false;
+        let createClientImported = false;
+        const filename = context.getFilename();
+        
+        // Allow createClient in specific config files (supabaseClient.ts/js, etc.)
+        const isConfigFile = /(supabase|client)\.(ts|js|tsx|jsx)$/i.test(filename) && 
+                            (filename.includes('supabase') || filename.includes('client'));
+        
+        return {
+          ImportDeclaration(node) {
+            const importSource = node.source.value;
+            
+            // Check for @supabase/supabase-js import
+            if (importSource === '@supabase/supabase-js') {
+              hasSupabaseImport = true;
+              
+              // Check if createClient is imported
+              const hasCreateClient = node.specifiers.some(spec => {
+                if (spec.type === 'ImportSpecifier') {
+                  return spec.imported.name === 'createClient';
+                }
+                if (spec.type === 'ImportNamespaceSpecifier') {
+                  return true; // import * as supabase
+                }
+                return false;
+              });
+              
+              if (hasCreateClient) {
+                createClientImported = true;
+                
+                // Only report if not in a config file
+                if (!isConfigFile) {
+                  context.report({
+                    node: node.source,
+                    messageId: 'directClientImport',
+                    suggest: [{
+                      desc: 'Replace with useSecureSupabase hook',
+                      fix(fixer) {
+                        // Remove the import
+                        return fixer.remove(node);
+                      }
+                    }]
+                  });
+                }
+              }
+            }
+          },
+          
+          CallExpression(node) {
+            // Check for createClient() calls
+            if (node.callee.type === 'Identifier' && node.callee.name === 'createClient') {
+              // Only report if not in a config file
+              if (!isConfigFile) {
+                context.report({
+                  node,
+                  messageId: 'directClientCreation',
+                  suggest: [{
+                    desc: 'Use useSecureSupabase() hook instead',
+                    fix(fixer) {
+                      // This is complex to auto-fix, so we'll just report
+                      return null;
+                    }
+                  }]
+                });
+              }
+            }
+            
+            // Check for supabase.createClient() or similar patterns
+            if (node.callee.type === 'MemberExpression' && 
+                node.callee.property?.name === 'createClient') {
+              if (!isConfigFile) {
+                context.report({
+                  node,
+                  messageId: 'directClientCreation',
+                  suggest: [{
+                    desc: 'Use useSecureSupabase() hook instead',
+                    fix(fixer) {
+                      return null;
+                    }
+                  }]
+                });
+              }
+            }
+          }
+        };
+      }
     }
   }
 };