@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/rbac/components/EnhancedNavigationMenu.tsx

@@ -1,294 +0,0 @@
-/**
- * @file Enhanced Navigation Menu Component
- * @package @jmruthers/pace-core
- * @module RBAC/Components/EnhancedNavigationMenu
- * @since 2.0.0
- *
- * An enhanced navigation menu component that integrates with the RBAC system to provide
- * secure navigation with automatic permission filtering and enforcement.
- *
- * Features:
- * - Automatic permission-based filtering
- * - Strict mode enforcement
- * - Audit logging for navigation access
- * - Integration with existing RBAC system
- * - Customizable navigation items
- * - Error handling and recovery
- *
- * @example
- * ```tsx
- * // Basic enhanced navigation menu
- * <EnhancedNavigationMenu
- *   items={navigationItems}
- *   strictMode={true}
- *   auditLog={true}
- * />
- * 
- * // With custom configuration
- * <EnhancedNavigationMenu
- *   items={navigationItems}
- *   strictMode={true}
- *   auditLog={true}
- *   onNavigationAccess={(item, allowed) => {
- *     console.log(`Navigation access: ${item.id} - ${allowed ? 'allowed' : 'denied'}`);
- *   }}
- * />
- * ```
- *
- * @security
- * - Enforces navigation-level permissions
- * - Prevents apps from bypassing navigation permission checks
- * - Automatic audit logging for all navigation access attempts
- * - Integration with existing RBAC system
- * - Clear error messages for unauthorized navigation
- *
- * @performance
- * - Optimized with useMemo and useCallback
- * - Cached permission checks
- * - Minimal re-renders
- * - Efficient filtering
- *
- * @dependencies
- * - React 18+ - Component framework
- * - NavigationProvider - Navigation permission context
- * - NavigationGuard - Individual navigation item protection
- * - RBAC types - Type definitions
- */
-
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import { useNavigationPermissions, NavigationItem } from './NavigationProvider';
-import NavigationGuard from './NavigationGuard';
-
-export interface EnhancedNavigationMenuProps {
-  /** Navigation items to display */
-  items: NavigationItem[];
-  
-  /** Enable strict mode to prevent bypassing (default: true) */
-  strictMode?: boolean;
-  
-  /** Enable audit logging (default: true) */
-  auditLog?: boolean;
-  
-  /** Callback when navigation access is attempted */
-  onNavigationAccess?: (item: NavigationItem, allowed: boolean) => void;
-  
-  /** Callback when strict mode violation occurs */
-  onStrictModeViolation?: (item: NavigationItem) => void;
-  
-  /** Custom className for the navigation menu */
-  className?: string;
-  
-  /** Custom className for navigation items */
-  itemClassName?: string;
-  
-  /** Custom className for active navigation items */
-  activeItemClassName?: string;
-  
-  /** Custom className for disabled navigation items */
-  disabledItemClassName?: string;
-  
-  /** Show/hide navigation items that user doesn't have permission for */
-  hideUnauthorizedItems?: boolean;
-  
-  /** Custom render function for navigation items */
-  renderItem?: (item: NavigationItem, isAuthorized: boolean) => React.ReactNode;
-  
-  /** Current active path for highlighting */
-  activePath?: string;
-  
-  /** Navigation item click handler */
-  onItemClick?: (item: NavigationItem) => void;
-}
-
-/**
- * EnhancedNavigationMenu - Secure navigation menu with RBAC integration
- * 
- * This component provides a navigation menu that automatically filters items based on
- * user permissions and enforces strict security controls.
- * 
- * @param props - Component props
- * @returns React element with enhanced navigation menu
- */
-export function EnhancedNavigationMenu({
-  items,
-  strictMode = true,
-  auditLog = true,
-  onNavigationAccess,
-  onStrictModeViolation,
-  className = 'flex flex-col space-y-1',
-  itemClassName = 'px-3 py-2 rounded-md text-sm font-medium transition-colors',
-  activeItemClassName = 'bg-main-100 text-main-700',
-  disabledItemClassName = 'text-sec-400 cursor-not-allowed',
-  hideUnauthorizedItems = false,
-  renderItem,
-  activePath,
-  onItemClick
-}: EnhancedNavigationMenuProps) {
-  const { 
-    hasNavigationPermission, 
-    getFilteredNavigationItems,
-    isEnabled,
-    isStrictMode,
-    isAuditLogEnabled 
-  } = useNavigationPermissions();
-  
-  const [navigationHistory, setNavigationHistory] = useState<NavigationItem[]>([]);
-
-  // Get filtered navigation items based on permissions
-  const filteredItems = useMemo((): NavigationItem[] => {
-    if (!isEnabled) return items;
-    
-    return getFilteredNavigationItems(items);
-  }, [isEnabled, items, getFilteredNavigationItems]);
-
-  // Handle navigation item click
-  const handleItemClick = useCallback((item: NavigationItem) => {
-    if (onItemClick) {
-      onItemClick(item);
-    }
-    
-    // Record navigation attempt
-    if (auditLog) {
-      console.log(`[EnhancedNavigationMenu] Navigation item clicked:`, {
-        item: item.id,
-        path: item.path,
-        permissions: item.permissions,
-        timestamp: new Date().toISOString()
-      });
-    }
-    
-    // Add to navigation history
-    setNavigationHistory(prev => {
-      const newHistory = [item, ...prev.filter(i => i.id !== item.id)];
-      return newHistory.slice(0, 10); // Keep last 10 items
-    });
-  }, [onItemClick, auditLog]);
-
-  // Handle navigation access attempt
-  const handleNavigationAccess = useCallback((item: NavigationItem, allowed: boolean) => {
-    if (onNavigationAccess) {
-      onNavigationAccess(item, allowed);
-    }
-    
-    if (auditLog) {
-      console.log(`[EnhancedNavigationMenu] Navigation access attempt:`, {
-        item: item.id,
-        allowed,
-        strictMode,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [onNavigationAccess, auditLog, strictMode]);
-
-  // Handle strict mode violation
-  const handleStrictModeViolation = useCallback((item: NavigationItem) => {
-    if (onStrictModeViolation) {
-      onStrictModeViolation(item);
-    }
-    
-    if (strictMode) {
-      console.error(`[EnhancedNavigationMenu] STRICT MODE VIOLATION: User attempted to access protected navigation item without permission`, {
-        item: item.id,
-        path: item.path,
-        permissions: item.permissions,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [onStrictModeViolation, strictMode]);
-
-  // Default render function for navigation items
-  const defaultRenderItem = useCallback((item: NavigationItem, isAuthorized: boolean) => {
-    const isActive = activePath === item.path;
-    const isDisabled = !isAuthorized;
-    
-    return (
-      <NavigationGuard
-        key={item.id}
-        navigationItem={item}
-        strictMode={strictMode}
-        auditLog={auditLog}
-        onDenied={handleStrictModeViolation}
-        fallback={
-          hideUnauthorizedItems ? null : (
-            <div className={`${itemClassName} ${disabledItemClassName}`}>
-              <div className="flex items-center space-x-2">
-                {item.meta?.icon && (
-                  <span className="text-sm">{item.meta.icon}</span>
-                )}
-                <span>{item.label}</span>
-                <span className="text-xs text-sec-400">(Access Denied)</span>
-              </div>
-            </div>
-          )
-        }
-      >
-        <button
-          onClick={() => handleItemClick(item)}
-          className={`${itemClassName} ${
-            isActive ? activeItemClassName : ''
-          } ${
-            isDisabled ? disabledItemClassName : 'hover:bg-sec-100'
-          }`}
-          disabled={isDisabled}
-        >
-          <div className="flex items-center space-x-2">
-            {item.meta?.icon && (
-              <span className="text-sm">{item.meta.icon}</span>
-            )}
-            <span>{item.label}</span>
-            {item.meta?.description && (
-              <span className="text-xs text-sec-500 ml-auto">
-                {item.meta.description}
-              </span>
-            )}
-          </div>
-        </button>
-      </NavigationGuard>
-    );
-  }, [
-    activePath,
-    itemClassName,
-    activeItemClassName,
-    disabledItemClassName,
-    hideUnauthorizedItems,
-    strictMode,
-    auditLog,
-    handleStrictModeViolation,
-    handleItemClick
-  ]);
-
-  // Log strict mode violations
-  useEffect(() => {
-    if (strictMode && auditLog) {
-      console.log(`[EnhancedNavigationMenu] Strict mode enabled - all navigation access attempts will be logged and enforced`);
-    }
-  }, [strictMode, auditLog]);
-
-  // Log navigation menu initialization
-  useEffect(() => {
-    if (auditLog) {
-      console.log(`[EnhancedNavigationMenu] Navigation menu initialized:`, {
-        totalItems: items.length,
-        filteredItems: filteredItems.length,
-        strictMode,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [items.length, filteredItems.length, strictMode, auditLog]);
-
-  return (
-    <nav className={className}>
-      {filteredItems.map(item => {
-        const isAuthorized = hasNavigationPermission(item);
-        
-        if (renderItem) {
-          return renderItem(item, isAuthorized);
-        }
-        
-        return defaultRenderItem(item, isAuthorized);
-      })}
-    </nav>
-  );
-}
-
-export default EnhancedNavigationMenu;

package/src/rbac/components/NavigationGuard.tsx

@@ -1,294 +0,0 @@
-/**
- * @file Navigation Guard Component
- * @package @jmruthers/pace-core
- * @module RBAC/Components/NavigationGuard
- * @since 2.0.0
- *
- * A component that enforces navigation-level permissions and prevents apps from bypassing
- * navigation permission checks. This is a critical security component that ensures all
- * navigation items are properly protected.
- *
- * Features:
- * - Navigation-level permission enforcement
- * - Strict mode to prevent bypassing
- * - Automatic audit logging
- * - Integration with existing RBAC system
- * - Clear error messages for unauthorized navigation
- * - TypeScript support with strict typing
- *
- * @example
- * ```tsx
- * // Basic navigation protection
- * <NavigationGuard
- *   navigationItem={navItem}
- *   fallback={<AccessDeniedNavItem />}
- * >
- *   <NavigationLink />
- * </NavigationGuard>
- * 
- * // Strict mode (prevents bypassing)
- * <NavigationGuard
- *   navigationItem={adminNavItem}
- *   strictMode={true}
- *   fallback={<AccessDeniedNavItem />}
- * >
- *   <AdminNavigationLink />
- * </NavigationGuard>
- * 
- * // With custom fallback
- * <NavigationGuard
- *   navigationItem={settingsNavItem}
- *   fallback={<div>You don't have permission to access settings</div>}
- * >
- *   <SettingsNavigationLink />
- * </NavigationGuard>
- * ```
- *
- * @security
- * - Enforces navigation-level permissions
- * - Prevents apps from bypassing navigation permission checks
- * - Automatic audit logging for all navigation access attempts
- * - Integration with existing RBAC system
- * - Clear error messages for unauthorized navigation
- *
- * @performance
- * - Optimized with useMemo and useCallback
- * - Cached permission checks
- * - Minimal re-renders
- * - Efficient error handling
- *
- * @dependencies
- * - React 18+ - Component framework
- * - useCan hook - Permission checking
- * - useUnifiedAuth - Authentication context
- * - RBAC types - Type definitions
- */
-
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import { useCan } from '../hooks';
-import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
-import { UUID, Permission, Scope } from '../types';
-import { createScopeFromEvent } from '../utils/eventContext';
-import { NavigationItem } from './NavigationProvider';
-
-export interface NavigationGuardProps {
-  /** Navigation item being protected */
-  navigationItem: NavigationItem;
-  
-  /** Content to render when user has permission */
-  children: React.ReactNode;
-  
-  /** Content to render when user lacks permission */
-  fallback?: React.ReactNode;
-  
-  /** Enable strict mode to prevent bypassing (default: true) */
-  strictMode?: boolean;
-  
-  /** Force audit logging for this navigation access (default: true) */
-  auditLog?: boolean;
-  
-  /** Custom scope for permission checking */
-  scope?: Scope;
-  
-  /** Callback when access is denied */
-  onDenied?: (item: NavigationItem) => void;
-  
-  /** Loading state content */
-  loading?: React.ReactNode;
-  
-  /** Require all permissions (AND) or any permission (OR) */
-  requireAll?: boolean;
-}
-
-/**
- * NavigationGuard - Enforces navigation-level permissions
- * 
- * This component ensures that users can only access navigation items they have permission for.
- * It integrates with the existing RBAC system and provides strict enforcement to
- * prevent apps from bypassing navigation permission checks.
- * 
- * @param props - Component props
- * @returns React element with navigation permission enforcement
- */
-export function NavigationGuard({
-  navigationItem,
-  children,
-  fallback = <DefaultAccessDenied />,
-  strictMode = true,
-  auditLog = true,
-  scope,
-  onDenied,
-  loading = <DefaultLoading />,
-  requireAll = true
-}: NavigationGuardProps) {
-  const { user, selectedOrganisationId, selectedEventId, supabase } = useUnifiedAuth();
-  const [hasChecked, setHasChecked] = useState(false);
-  const [checkError, setCheckError] = useState<Error | null>(null);
-  const [resolvedScope, setResolvedScope] = useState<Scope | null>(null);
-
-  // Resolve scope - either use provided scope or resolve from context
-  useEffect(() => {
-    const resolveScope = async () => {
-      if (scope) {
-        setResolvedScope(scope);
-        return;
-      }
-
-      // If we have both organisation and event, use them directly
-      if (selectedOrganisationId && selectedEventId) {
-        setResolvedScope({
-          organisationId: selectedOrganisationId,
-          eventId: selectedEventId,
-          appId: undefined
-        });
-        return;
-      }
-
-      // If we only have organisation, use it
-      if (selectedOrganisationId) {
-        setResolvedScope({
-          organisationId: selectedOrganisationId,
-          eventId: selectedEventId || undefined,
-          appId: undefined
-        });
-        return;
-      }
-
-      // If we only have event, resolve organisation from event
-      if (selectedEventId && supabase) {
-        try {
-          const eventScope = await createScopeFromEvent(supabase, selectedEventId);
-          if (!eventScope) {
-            setCheckError(new Error('Could not resolve organization from event context'));
-            return;
-          }
-          setResolvedScope(eventScope);
-        } catch (error) {
-          setCheckError(error as Error);
-        }
-        return;
-      }
-
-      // No context available
-      setCheckError(new Error('Either organisation context or event context is required for navigation permission checking'));
-    };
-
-    resolveScope();
-  }, [scope, selectedOrganisationId, selectedEventId, supabase]);
-
-  // Check permissions using the first permission as a representative
-  // For multiple permissions, we'll check them sequentially
-  const representativePermission = navigationItem.permissions[0];
-  const { can, isLoading, error } = useCan(
-    user?.id || '',
-    resolvedScope || { eventId: selectedEventId || undefined },
-    representativePermission,
-    navigationItem.pageId,
-    true // Use cache
-  );
-
-  // Determine if user has required permissions
-  const hasRequiredPermissions = useMemo((): boolean => {
-    if (navigationItem.permissions.length === 0) return true;
-    
-    // For now, use the representative permission result
-    // In a future enhancement, we could check all permissions
-    // but this would require multiple useCan hooks or a custom hook
-    return can;
-  }, [navigationItem.permissions, can]);
-
-  // Handle permission check completion
-  useEffect(() => {
-    if (!isLoading && !error) {
-      setHasChecked(true);
-      setCheckError(null);
-      
-      if (!hasRequiredPermissions && onDenied) {
-        onDenied(navigationItem);
-      }
-    } else if (error) {
-      setCheckError(error);
-      setHasChecked(true);
-    }
-  }, [hasRequiredPermissions, isLoading, error, navigationItem, onDenied]);
-
-  // Log navigation access attempt for audit
-  useEffect(() => {
-    if (auditLog && hasChecked && !isLoading) {
-      console.log(`[NavigationGuard] Navigation access attempt:`, {
-        navigationItem: navigationItem.id,
-        permissions: navigationItem.permissions,
-        userId: user?.id,
-        scope: resolvedScope,
-        allowed: hasRequiredPermissions,
-        requireAll,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [auditLog, hasChecked, isLoading, navigationItem, user?.id, resolvedScope, hasRequiredPermissions, requireAll]);
-
-  // Handle strict mode violations
-  useEffect(() => {
-    if (strictMode && hasChecked && !isLoading && !hasRequiredPermissions) {
-      console.error(`[NavigationGuard] STRICT MODE VIOLATION: User attempted to access protected navigation item without permission`, {
-        navigationItem: navigationItem.id,
-        permissions: navigationItem.permissions,
-        userId: user?.id,
-        scope: resolvedScope,
-        requireAll,
-        timestamp: new Date().toISOString()
-      });
-    }
-  }, [strictMode, hasChecked, isLoading, hasRequiredPermissions, navigationItem, user?.id, resolvedScope, requireAll]);
-
-  // Show loading state
-  if (isLoading || !resolvedScope || !hasChecked) {
-    return <>{loading}</>;
-  }
-
-  // Show error state
-  if (checkError) {
-    console.error(`[NavigationGuard] Permission check failed for navigation item ${navigationItem.id}:`, checkError);
-    return <>{fallback}</>;
-  }
-
-  // Show access denied
-  if (!hasRequiredPermissions) {
-    return <>{fallback}</>;
-  }
-
-  // Show protected content
-  return <>{children}</>;
-}
-
-/**
- * Default access denied component
- */
-function DefaultAccessDenied() {
-  return (
-    <div className="flex items-center justify-center p-2 text-center">
-      <div className="flex items-center space-x-2">
-        <svg className="w-4 h-4 text-acc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-        </svg>
-        <span className="text-sm text-sec-600">Access Denied</span>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Default loading component
- */
-function DefaultLoading() {
-  return (
-    <div className="flex items-center justify-center p-2">
-      <div className="flex items-center space-x-2">
-        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-main-600"></div>
-        <span className="text-sm text-sec-600">Checking...</span>
-      </div>
-    </div>
-  );
-}
-
-export default NavigationGuard;