@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -194,16 +194,69 @@
 import * as React from "react";
 import { Menu, ChevronDown } from "lucide-react";
 import { cn } from "../../utils/core/cn";
-import { NavigationMenuProps, NavigationItem } from "./types";
 import { Button } from "../Button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select";
-import { useUnifiedAuth } from "../../providers/UnifiedAuthProvider";
+import { useUnifiedAuth } from "../../providers/services/UnifiedAuthProvider";
 import { useRBAC } from "../../rbac/hooks/useRBAC";
 import { useResolvedScope } from "../../rbac/hooks";
 import { usePermissions } from "../../rbac/hooks/usePermissions";
-import type { Permission, AccessLevel as RBACAccessLevel } from "../../rbac/types";
+import type { Permission, AccessLevel as RBACAccessLevel, UUID } from "../../rbac/types";
 import { logger } from "../../utils/core/logger";
 
+/**
+ * Navigation mode type
+ */
+export type NavigationMode = 'dropdown' | 'hierarchical';
+
+/**
+ * Navigation item metadata
+ */
+export interface NavigationItemMeta {
+  hidden?: boolean;
+  [key: string]: unknown;
+}
+
+/**
+ * Navigation item interface
+ */
+export interface NavigationItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  children?: NavigationItem[];
+  permissions?: (Permission | string)[];
+  roles?: string[];
+  accessLevel?: RBACAccessLevel | string;
+  meta?: NavigationItemMeta;
+  pageId?: string;
+}
+
+/**
+ * Navigation menu component props
+ */
+export interface NavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: NavigationItem[];
+  mode?: NavigationMode;
+  currentPath?: string;
+  onNavigate?: (item: NavigationItem) => void;
+  className?: string;
+  disabled?: boolean;
+  buttonText?: string;
+  showIcons?: boolean;
+  navigationLabel?: string;
+  strictMode?: boolean;
+  auditLog?: boolean;
+  onNavigationAccessDenied?: (item: NavigationItem) => void;
+  onStrictModeViolation?: (item: NavigationItem, reason: string) => void;
+  /** 
+   * If true, indicates that items have already been filtered by the parent component (e.g., PaceAppLayout).
+   * When true, NavigationMenu will skip expensive permission checks and trust the provided items.
+   * This significantly improves performance when items are pre-filtered.
+   */
+  itemsPreFiltered?: boolean;
+}
+
 /**
  * Unified NavigationMenu component that supports both dropdown and hierarchical navigation modes.
  * 
@@ -346,7 +399,7 @@ import { logger } from "../../utils/core/logger";
  *       onNavigate={(item) => navigate(item.href)}
  *       buttonText="Navigation"
  *       navigationLabel="Main application navigation"
- *       filterByPermissions={true}
+ *       // Permission filtering is always enabled - no prop needed
  *       auditLog={true}
  *     />
  *   );
@@ -413,7 +466,7 @@ export const NavigationMenu = React.forwardRef<
   auditLog = true,
   onNavigationAccessDenied,
   onStrictModeViolation,
-  filterByPermissions = true,
+  itemsPreFiltered = false,
   ...props 
 }, ref) => {
   const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());
@@ -448,13 +501,14 @@ export const NavigationMenu = React.forwardRef<
 
   // Get resolved scope for permission checks
   // Note: Always call useResolvedScope (hooks must be called unconditionally)
-  // When filterByPermissions is false, we'll simply ignore the resolved scope
+  // However, if itemsPreFiltered is true, we'll skip using the results to avoid blocking
+  // Permission filtering is always enabled - scope is always needed (unless items are pre-filtered)
   const { supabase } = authContext || {};
   const { selectedOrganisation } = authContext || {};
   const { resolvedScope, isLoading: scopeLoading, error: scopeError } = useResolvedScope({
-    supabase: filterByPermissions ? (supabase || null) : null,
-    selectedOrganisationId: filterByPermissions ? (selectedOrganisation?.id || null) : null,
-    selectedEventId: filterByPermissions ? (selectedEvent?.event_id || null) : null
+    supabase: itemsPreFiltered ? null : (supabase || null), // Skip expensive resolution if pre-filtered
+    selectedOrganisationId: itemsPreFiltered ? null : (selectedOrganisation?.id || null),
+    selectedEventId: itemsPreFiltered ? null : (selectedEvent?.event_id || null)
   });
 
   // Resolve appId when useResolvedScope fails but context is ready
@@ -500,13 +554,18 @@ export const NavigationMenu = React.forwardRef<
   // Build scope from resolvedScope if available, otherwise fall back to context values
   // This handles the case where useResolvedScope errored initially but context is now ready
   // IMPORTANT: We need appId for usePermissions to work correctly
+  // CRITICAL: Use selectedOrganisation?.id immediately when available, even during loading
+  // This prevents usePermissions from skipping fetch due to empty organisationId
   const effectiveScope = React.useMemo(() => {
-    if (!scopeLoading && resolvedScope?.organisationId) {
-      // Use resolved scope if available (includes appId)
+    // Prefer resolvedScope if available (includes appId)
+    if (resolvedScope?.organisationId) {
       return resolvedScope;
-    } else if (!scopeLoading && selectedOrganisation?.id) {
-      // Fall back to building scope from context if resolvedScope is null but context is ready
-      // Use resolvedAppId if we've resolved it, otherwise undefined (usePermissions will try to resolve)
+    }
+    
+    // Fall back to building scope from context if resolvedScope is not available yet
+    // Use selectedOrganisation?.id immediately when available, even if scopeLoading is true
+    // This prevents delay in permission fetching
+    if (selectedOrganisation?.id) {
       const fallbackScope = {
         organisationId: selectedOrganisation.id,
         eventId: selectedEvent?.event_id || undefined,
@@ -514,8 +573,9 @@ export const NavigationMenu = React.forwardRef<
       };
       return fallbackScope;
     }
+    
     return null;
-  }, [scopeLoading, resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
+  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
 
   // Create a stable scope object that changes when effectiveScope changes
   // This ensures usePermissions detects scope changes and re-runs
@@ -543,16 +603,21 @@ export const NavigationMenu = React.forwardRef<
   }, [scopeKey, effectiveScope]);
 
   // Get permissions map for synchronous permission checks
-  const userId = authContext?.user?.id || '';
+  // Skip expensive permission fetching if items are pre-filtered
+  const userId = (authContext?.user?.id || '') as UUID;
   
   // Call usePermissions with primitive parameters
+  // If itemsPreFiltered is true, pass null/undefined to skip expensive permission fetching
+  // CRITICAL: Pass null for userId and undefined for organisationId to skip the 3-second timeout
+  // Empty string '' triggers the timeout, but null/undefined allows immediate early return
   const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading, error: permissionsError } = usePermissions(
-    userId as any,
-    stableScope.organisationId,
-    stableScope.eventId,
-    stableScope.appId
+    itemsPreFiltered ? (null as any) : userId, // Pass null to trigger early return (empty string would wait 3s)
+    itemsPreFiltered ? undefined : stableScope.organisationId, // Pass undefined to skip timeout
+    itemsPreFiltered ? undefined : stableScope.eventId, // Skip if pre-filtered
+    itemsPreFiltered ? undefined : stableScope.appId // Skip if pre-filtered
   );
   
+  
 
   // NEW: Phase 2 - Enhanced Security Features
   // Filter navigation items based on permissions using RBAC hooks
@@ -560,10 +625,21 @@ export const NavigationMenu = React.forwardRef<
   const previousFilteredItemsRef = React.useRef<NavigationItem[]>([]);
   
   const filteredItems = React.useMemo(() => {
-    // Security: If filtering is enabled but we're missing required context or still loading, show NO items
+    // PERFORMANCE OPTIMIZATION: If items are pre-filtered, skip all expensive permission checks
+    // This significantly improves load time when PaceAppLayout has already filtered items
+    if (itemsPreFiltered && items && items.length > 0) {
+      // Items are pre-filtered by parent (e.g., PaceAppLayout) - trust them and only filter hidden items
+      const visibleItems = (items || []).filter(item => !item.meta?.hidden);
+      previousFilteredItemsRef.current = visibleItems;
+      // Don't log here - logging happens in useEffect to avoid spam on re-renders
+      return visibleItems;
+    }
+    
+    // SECURITY: Permission filtering is ALWAYS enabled - users only see navigation items they have permission to access
+    // Security: If we're missing required context or still loading, show NO items
     // This prevents security risk of showing items before permissions are verified
-    if (filterByPermissions) {
-      // CRITICAL: Wait for BOTH organisation AND event context to be ready before checking permissions
+    
+    // CRITICAL: Wait for BOTH organisation AND event context to be ready before checking permissions
       // This prevents the error "No organisation or event context available" when event context is still loading
       const isOrgContextReady = orgContextReady && selectedOrganisation?.id;
       // Event context is ready when not loading
@@ -581,7 +657,22 @@ export const NavigationMenu = React.forwardRef<
       const shouldWaitForScope = scopeLoading || (!hasValidContext);
       const shouldRetryAfterError = scopeError && hasValidContext && !scopeLoading;
       
-      // During initial load or when scope/context is loading, show nothing
+      // During initial load or when scope/context is loading, check if we can trust PaceAppLayout's filtering
+      // CRITICAL: If items are provided and we have valid context, trust PaceAppLayout's filtering
+      // This prevents delay - PaceAppLayout already filtered items, so show them immediately
+      // even if scope is still loading or rbacContext is not yet available
+      if (items && items.length > 0 && selectedOrganisation?.id) {
+        // Items are provided by PaceAppLayout - trust its filtering and show immediately
+        // This eliminates delay while usePermissions/useResolvedScope are still loading
+        // Items provided - trusting PaceAppLayout filtering (removed verbose logging)
+        // Filter out hidden items only - PaceAppLayout already did permission filtering
+        const visibleItems = (items || []).filter(item => !item.meta?.hidden);
+        // Store in ref for use during permission refetches
+        previousFilteredItemsRef.current = visibleItems;
+        return visibleItems;
+      }
+      
+      // If no items provided or no valid context, wait for context to be ready
       if (!authContext || !rbacContext || (shouldWaitForScope && !shouldRetryAfterError)) {
         // Still loading - show nothing to prevent security risk
         // Note: We check both org and event context readiness to prevent premature permission checks
@@ -601,24 +692,58 @@ export const NavigationMenu = React.forwardRef<
         if (previousFilteredItemsRef.current.length > 0) {
           return previousFilteredItemsRef.current;
         }
+        // CRITICAL: If items are provided and we have valid scope, trust PaceAppLayout's filtering
+        // This prevents delay - PaceAppLayout already filtered items, so show them immediately
+        // even if usePermissions is still loading
+        if (items && items.length > 0 && stableScope.organisationId) {
+          // Permissions loading but items provided - trusting PaceAppLayout filtering (removed verbose logging)
+          // Filter out hidden items only - PaceAppLayout already did permission filtering
+          return (items || []).filter(item => !item.meta?.hidden);
+        }
         // Otherwise, show nothing during initial load
         return [];
       }
       
-      // If there's an error or empty permission map after loading, show nothing
+      // If there's an error after loading, show nothing
       // Security: Better to show nothing than risk showing unauthorized items
-      if (permissionsError || !permissionMap || Object.keys(permissionMap).length === 0) {
-        logger.warn('NavigationMenu', 'Permission map is empty or has error - showing no items for security', {
-          permissionsError: permissionsError?.message,
-          permissionMapSize: permissionMap ? Object.keys(permissionMap).length : 0
+      if (permissionsError) {
+        logger.warn('NavigationMenu', 'Permission check error - showing no items for security', {
+          permissionsError: permissionsError?.message
         });
         return [];
       }
-    } else {
-      // Filtering disabled - only filter out hidden items
-      return (items || []).filter(item => !item.meta?.hidden);
-    }
+      
+      // If permission map is empty after loading, we need to handle this carefully:
+      // 1. If items were already filtered by PaceAppLayout (which uses getPermissionMap directly),
+      //    we should trust those items and show them (they've already been filtered)
+      // 2. If NavigationMenu is used standalone, we need permissions to filter - show nothing
+      // 
+      // Since PaceAppLayout filters items before passing to NavigationMenu, and NavigationMenu
+      // uses usePermissions hook which may return empty map while PaceAppLayout gets permissions,
+      // we should trust items that are provided if permission map is empty but we have valid scope.
+      // This is safe because PaceAppLayout already filtered them using getPermissionMap.
+      if (!permissionMap || Object.keys(permissionMap).length === 0) {
+        // If we have valid scope and items are provided, they were likely already filtered by PaceAppLayout
+        // In this case, trust the items and show them (they've already been filtered for security)
+        if (stableScope.organisationId && items && items.length > 0) {
+          // Permission map empty but items provided - trusting PaceAppLayout filtering (removed verbose logging)
+          // Items were already filtered by PaceAppLayout - trust them and only filter hidden items
+          return (items || []).filter(item => !item.meta?.hidden);
+        }
+        
+        // If no items provided or no valid scope, show nothing (can't verify permissions)
+        if (stableScope.organisationId) {
+          logger.warn('NavigationMenu', 'Permission map is empty and no items provided - showing nothing', {
+            permissionMapSize: 0,
+            organisationId: stableScope.organisationId,
+            eventId: stableScope.eventId,
+            appId: stableScope.appId
+          });
+        }
+        return [];
+      }
     
+    // SECURITY: Permission filtering is always enabled - filtering cannot be disabled
     // Helper function to derive page ID from href
     const getPageIdFromHref = (href?: string): string | null => {
       if (!href) return null;
@@ -780,7 +905,7 @@ export const NavigationMenu = React.forwardRef<
     return filtered;
   }, [
     items, 
-    filterByPermissions, 
+    itemsPreFiltered, // Add itemsPreFiltered to dependencies
     authContext, 
     rbacContext, 
     permissionMap, 
@@ -799,22 +924,8 @@ export const NavigationMenu = React.forwardRef<
     selectedOrganisation?.id
   ]);
 
-  // Log navigation access attempts for debugging
-  React.useEffect(() => {
-    if (auditLog && authContext) {
-      // Find the current navigation item to log its actual permissions
-      const currentItem = items?.find(item => item.href === currentPath || item.id === 'navigation-menu');
-      logger.debug('NavigationMenu', 'Navigation access attempt:', {
-        itemId: currentItem?.id || 'navigation-menu',
-        label: currentItem?.label || 'Navigation Menu',
-        href: currentPath,
-        permissions: currentItem?.permissions || null,
-        roles: currentItem?.roles || null,
-        accessLevel: currentItem?.accessLevel || null,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [auditLog, authContext, currentPath, items]);
+  // Note: Navigation access attempts are logged in handleItemClick, not here
+  // This prevents excessive logging on every render
 
 
   // Handle keyboard navigation for hierarchical mode
@@ -851,7 +962,7 @@ export const NavigationMenu = React.forwardRef<
   // Handle navigation item click
   const handleItemClick = (item: NavigationItem) => {
     // NEW: Phase 2 - Enhanced Security Features
-    // Log navigation access attempt for audit
+    // Log navigation access attempt for audit (minimal logging)
     if (auditLog) {
       logger.debug('NavigationMenu', 'Navigation access attempt:', {
         itemId: item.id,
@@ -876,12 +987,28 @@ export const NavigationMenu = React.forwardRef<
     }
     
     // Check if item should be visible (already filtered)
+    // If item is in filteredItems, it has already passed permission checks in PaceAppLayout
     const isItemVisible = filteredItems.some(filtered => filtered.id === item.id);
     
+    // If item is not visible, it was filtered out - don't allow navigation
+    if (!isItemVisible) {
+      logger.warn('NavigationMenu', 'Navigation attempt to filtered item blocked', {
+        itemId: item.id,
+        label: item.label,
+        href: item.href
+      });
+      return;
+    }
+    
     // Check permissions if the item requires them using RBAC hooks
+    // Only check if item has explicit permission requirements AND we have permission checking capability
     let hasPermission = true; // Default to true if no permission requirements
     
-    if (item.permissions && item.permissions.length > 0 && rbacContext && hasAnyPermission) {
+    // Only check permissions if:
+    // 1. Item has explicit permission requirements
+    // 2. We have RBAC context
+    // 3. We have hasAnyPermission function AND permission map is loaded (not empty)
+    if (item.permissions && item.permissions.length > 0 && rbacContext && hasAnyPermission && permissionMap && Object.keys(permissionMap).length > 0) {
       // Convert string permissions to Permission type and check
       const permissions = item.permissions
         .filter((p): p is string => typeof p === 'string')
@@ -892,6 +1019,7 @@ export const NavigationMenu = React.forwardRef<
       }
     }
     
+    // If permission check failed, try role-based access
     if (!hasPermission && rbacContext) {
       // Check roles if permissions check failed or item has role requirements
       if (item.roles && item.roles.length > 0) {
@@ -922,10 +1050,19 @@ export const NavigationMenu = React.forwardRef<
       }
     }
     
+    // If permission map is empty but item is in filteredItems, trust PaceAppLayout's filtering
+    // This handles the case where NavigationMenu's usePermissions returns empty map
+    // but PaceAppLayout already filtered items correctly
+    if (!hasPermission && (!permissionMap || Object.keys(permissionMap).length === 0) && isItemVisible) {
+      // Permission map is empty but item passed filtering - trust PaceAppLayout
+      // Permission map empty but item passed filtering - trusting PaceAppLayout (removed verbose logging)
+      hasPermission = true;
+    }
+    
     if (!hasPermission) {
       // Handle access denied
       if (onNavigationAccessDenied) {
-        onNavigationAccessDenied(item.id, 'Insufficient permissions');
+        onNavigationAccessDenied(item);
       }
       
       if (strictMode) {
@@ -940,7 +1077,7 @@ export const NavigationMenu = React.forwardRef<
         });
         
         if (onStrictModeViolation) {
-          onStrictModeViolation(item.id, 'Insufficient permissions');
+          onStrictModeViolation(item, 'Insufficient permissions');
         }
       }
       
@@ -957,7 +1094,6 @@ export const NavigationMenu = React.forwardRef<
 
   // Check if item is currently active
   const isActiveItem = (item: NavigationItem): boolean => {
-    if (item.isActive !== undefined) return item.isActive;
     if (currentPath === item.href) return true;
     if (item.children && item.children.length > 0) {
       return item.children.some(child => isActiveItem(child));

package/src/components/NavigationMenu/index.ts

@@ -7,4 +7,4 @@
  */
 
 export { NavigationMenu } from './NavigationMenu';
-export type { NavigationMenuProps, NavigationItem, NavigationMode } from './types';
+export type { NavigationMenuProps, NavigationItem, NavigationMode } from './NavigationMenu';

package/src/components/OrganisationSelector/OrganisationSelector.test.tsx

@@ -15,10 +15,19 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { OrganisationSelector, OrganisationSelectorProps } from './OrganisationSelector';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import type { Organisation } from '../../types/organisation';
+import type { SelectProps, SelectContentProps, SelectItemProps, SelectTriggerProps, SelectValueProps } from '../Select';
+import type { ButtonProps } from '../Button/Button';
+import type { LoadingSpinnerProps } from '../LoadingSpinner/LoadingSpinner';
+
+// Mock the useOrganisationService hook (used internally by useOrganisations)
+const mockUseOrganisationService = vi.fn();
+vi.mock('../../hooks/services/useOrganisationService', () => ({
+  useOrganisationService: () => mockUseOrganisationService(),
+}));
 
 // Mock the useOrganisations hook
 const mockUseOrganisations = vi.fn();
-vi.mock('../../providers/OrganisationProvider', () => ({
+vi.mock('../../hooks/useOrganisations', () => ({
   useOrganisations: () => mockUseOrganisations(),
 }));
 
@@ -26,19 +35,19 @@ vi.mock('../../providers/OrganisationProvider', () => ({
 let mockOnValueChange: ((value: string) => void) | null = null;
 
 vi.mock('../Select', () => ({
-  Select: ({ children, value, onValueChange, disabled }: any) => {
+  Select: ({ children, value, onValueChange, disabled }: SelectProps & { value?: string; onValueChange?: (value: string) => void; disabled?: boolean }) => {
     // Store the onValueChange callback for SelectItem to use
-    mockOnValueChange = onValueChange;
+    mockOnValueChange = onValueChange || null;
     return (
       <div data-testid="select" data-value={value} data-disabled={disabled}>
         {children}
       </div>
     );
   },
-  SelectContent: ({ children }: any) => (
+  SelectContent: ({ children }: SelectContentProps) => (
     <div data-testid="select-content">{children}</div>
   ),
-  SelectItem: ({ children, value, disabled, className }: any) => (
+  SelectItem: ({ children, value, disabled, className }: SelectItemProps) => (
     <div 
       data-testid={`select-item-${value}`} 
       data-disabled={disabled}
@@ -48,29 +57,29 @@ vi.mock('../Select', () => ({
       {children}
     </div>
   ),
-  SelectTrigger: ({ children, className }: any) => (
+  SelectTrigger: ({ children, className }: SelectTriggerProps) => (
     <button data-testid="select-trigger" className={className}>
       {children}
     </button>
   ),
-  SelectValue: ({ placeholder }: any) => (
+  SelectValue: ({ placeholder }: SelectValueProps) => (
     <span data-testid="select-value">{placeholder}</span>
   ),
 }));
 
 vi.mock('../Alert/Alert', () => ({
-  Alert: ({ children, variant }: any) => (
+  Alert: ({ children, variant }: React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "destructive" | "inline" }) => (
     <div data-testid="alert" data-variant={variant}>
       {children}
     </div>
   ),
-  AlertDescription: ({ children }: any) => (
+  AlertDescription: ({ children }: React.HTMLAttributes<HTMLDivElement>) => (
     <div data-testid="alert-description">{children}</div>
   ),
 }));
 
 vi.mock('../Button/Button', () => ({
-  Button: ({ children, onClick, disabled, variant, size, className }: any) => (
+  Button: ({ children, onClick, disabled, variant, size, className }: ButtonProps) => (
     <button 
       data-testid="button" 
       onClick={onClick} 
@@ -85,7 +94,7 @@ vi.mock('../Button/Button', () => ({
 }));
 
 vi.mock('../LoadingSpinner/LoadingSpinner', () => ({
-  LoadingSpinner: ({ size }: any) => (
+  LoadingSpinner: ({ size }: LoadingSpinnerProps) => (
     <div data-testid="loading-spinner" data-size={size}>Loading...</div>
   ),
 }));

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -59,7 +59,7 @@ import { Alert, AlertDescription } from '../Alert/Alert';
 import { Button } from '../Button/Button';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { RefreshCw, AlertCircle, Building2, Shield } from 'lucide-react';
-import { useOrganisations } from '../../providers/OrganisationProvider';
+import { useOrganisations } from '../../hooks/useOrganisations';
 import type { Organisation } from '../../types/organisation';
 import { logger } from '../../utils/core/logger';