@jmruthers/pace-core 0.5.126 → 0.5.128

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -106,6 +106,7 @@ import { useEventTheme } from '../../hooks/useEventTheme';
 import { useCan, useResolvedScope } from '../../rbac/hooks';
 import { createScopeFromEvent } from '../../rbac/utils/eventContext';
 import { getCurrentAppName } from '../../utils/appNameResolver';
+import { isSuperAdmin } from '../../rbac/api';
 import type { Permission, Scope } from '../../rbac/types';
 
 // Stable empty objects to prevent infinite loops
@@ -202,6 +203,17 @@ export interface PaceAppLayoutProps {
  * Outlet to render child routes. It provides integrated authentication, navigation,
  * and user management functionality.
  * 
+ * **Super Admin Access:** When `enforcePermissions={true}`, PaceAppLayout automatically
+ * checks if the user is a super admin before enforcing permissions. Super admins bypass
+ * all permission checks and can access any route without violations. The component extracts
+ * base page names from route paths (e.g., `/organisation/scouts-victoria` → `"organisation"`)
+ * for permission checking, which can be overridden using `pageIdMapping`.
+ * 
+ * **Important:** The appName prop should use an APP_NAME constant declared in your App.tsx
+ * file. This ensures consistency with public pages (via PublicPageProvider) which should
+ * also receive the same APP_NAME constant. The logo URL is automatically constructed as
+ * `/${appName.toLowerCase()}_logo_wide.svg` from the public folder.
+ * 
  * Features:
  * - React Router v6 integration with nested routing
  * - Unified authentication integration
@@ -213,23 +225,27 @@ export interface PaceAppLayoutProps {
  * - Layout-level permission enforcement
  * - Permission-based navigation filtering
  * - Automatic page permission validation
+ * - Super admin bypass (super admins automatically bypass all permission checks)
  * 
  * @example
  * Basic React Router setup with permission enforcement (RECOMMENDED):
  * ```tsx
  * import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  * import { UnifiedAuthProvider } from '@jmruthers/pace-core/providers';
- * import { PaceAppLayout, PaceLoginPage } from '@jmruthers/pace-core';
+ * import { PaceAppLayout, PaceLoginPage, PublicPageApp } from '@jmruthers/pace-core';
+ * 
+ * const APP_NAME = 'CORE';
  * 
  * function App() {
  *   return (
- *     <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
+ *     <UnifiedAuthProvider supabaseClient={supabase} appName={APP_NAME}>
  *       <Router>
  *         <Routes>
- *           <Route path="/login" element={<PaceLoginPage appName="My App" />} />
+ *           <Route path="/login" element={<PaceLoginPage appName={APP_NAME} />} />
+ *           <Route path="/events/*" element={<PublicPageApp appName={APP_NAME} />} />
  *           <Route path="/" element={
  *             <PaceAppLayout 
- *               appName="My Application"
+ *               appName={APP_NAME}
  *               enforcePermissions={true}
  *               defaultPermission="read"
  *             />
@@ -410,9 +426,17 @@ export function PaceAppLayout({
   }, [location.pathname, routePermissions, defaultPermission]);
 
   // Get current page ID for permission checking
+  // Extract base page name (first path segment) instead of full route path
+  // Example: /organisation/scouts-victoria -> "organisation"
   const currentPageId = useMemo(() => {
     const currentPath = location.pathname;
-    return pageIdMapping[currentPath] || currentPath.slice(1) || 'home';
+    // Use pageIdMapping if provided (takes precedence)
+    if (pageIdMapping[currentPath]) {
+      return pageIdMapping[currentPath];
+    }
+    // Extract first path segment (base page name)
+    const pathSegments = currentPath.slice(1).split('/').filter(Boolean);
+    return pathSegments[0] || 'home';
   }, [location.pathname, pageIdMapping]);
 
   // Build permission string in format: operation:page.pageId
@@ -424,8 +448,37 @@ export function PaceAppLayout({
     return permissionString as Permission;
   }, [enforcePermissions, currentRoutePermission, currentPageId]);
 
+  // Check super admin status before permission enforcement
+  const [isSuperAdminUser, setIsSuperAdminUser] = useState<boolean>(false);
+  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkSuperAdminStatus = async () => {
+      if (!user?.id) {
+        setIsSuperAdminUser(false);
+        setIsCheckingSuperAdmin(false);
+        return;
+      }
+
+      setIsCheckingSuperAdmin(true);
+      try {
+        const superAdminStatus = await isSuperAdmin(user.id);
+        setIsSuperAdminUser(superAdminStatus);
+      } catch (error) {
+        console.error('[PaceAppLayout] Error checking super admin status:', error);
+        setIsSuperAdminUser(false);
+      } finally {
+        setIsCheckingSuperAdmin(false);
+      }
+    };
+
+    checkSuperAdminStatus();
+  }, [user?.id]);
+
   // Use useCan hook for permission checking (standardized approach)
-  const { can, isLoading: isCheckingPermission, error: permissionError } = useCan(
+  // Note: The database function already handles super admin bypass, but we check here
+  // as an additional safety layer to prevent unnecessary permission checks
+  const { can: canFromHook, isLoading: isCheckingPermission, error: permissionError } = useCan(
     user?.id || '',
     scope,
     currentPermission,
@@ -433,7 +486,9 @@ export function PaceAppLayout({
     true // useCache
   );
 
-  // Permission enforcement state - sync from useCan
+  // Permission enforcement state - super admin bypasses all checks
+  // This ensures super admins never see permission errors even if useCan hasn't completed
+  const can = isSuperAdminUser ? true : canFromHook;
   const hasPermission = enforcePermissions ? can : true;
 
   // Handle permission check results with audit logging and callbacks
@@ -443,29 +498,19 @@ export function PaceAppLayout({
     }
 
     // Only proceed when permission check is complete (not loading)
-    if (isCheckingPermission) {
+    // Wait for both super admin check and permission check to complete
+    if (isCheckingSuperAdmin || isCheckingPermission) {
       return;
     }
 
     // NEW: Phase 1 - Enhanced Security Features
-    // Log page access attempt for audit
-    if (auditLog) {
-      console.log(`[PaceAppLayout] Page access attempt:`, {
-        pageName: currentPageId,
-        operation: currentRoutePermission,
-        userId: user?.id,
-        allowed: can,
-        strictMode,
-        timestamp: new Date().toISOString()
-      });
-    }
-    
-    // Handle strict mode violations
-    if (strictMode && !can) {
+    // Handle strict mode violations - skip for super admins
+    if (strictMode && !isSuperAdminUser && !can) {
       console.error(`[PaceAppLayout] STRICT MODE VIOLATION: User attempted to access protected page without permission`, {
         pageName: currentPageId,
         operation: currentRoutePermission,
         userId: user?.id,
+        isSuperAdmin: isSuperAdminUser,
         timestamp: new Date().toISOString()
       });
       
@@ -474,11 +519,11 @@ export function PaceAppLayout({
       }
     }
     
-    // Handle page access denied callback
-    if (!can && onPageAccessDenied) {
+    // Handle page access denied callback - skip for super admins
+    if (!isSuperAdminUser && !can && onPageAccessDenied) {
       onPageAccessDenied(currentPageId, currentRoutePermission);
     }
-  }, [enforcePermissions, can, isCheckingPermission, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
+  }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
 
   // Filter navigation items based on permissions
   // This works independently of route enforcement - navigation filtering doesn't require enforcePermissions
@@ -568,16 +613,6 @@ export function PaceAppLayout({
           // Check permission map (super admin check already handled in getPermissionMap)
           const hasAccess = permissionMap['*'] === true || permissionMap[fullPermission] === true;
           
-          if (auditLog) {
-            console.log(`[PaceAppLayout] Navigation filtering:`, {
-              item: item.label,
-              href: item.href,
-              pageId,
-              permission: fullPermission,
-              hasAccess,
-            });
-          }
-          
           return { item, hasAccess };
         });
 
@@ -692,19 +727,6 @@ export function PaceAppLayout({
         navigate(fallbackRoute, { replace: true });
         return;
       }
-      
-      // Log route access attempt for audit
-      if (auditLog) {
-        console.log(`[PaceAppLayout] Route access attempt:`, {
-          route: currentPath,
-          userId: user?.id,
-          allowed: hasAccess,
-          permissions: currentRoute.permissions,
-          roles: currentRoute.roles,
-          accessLevel: currentRoute.accessLevel,
-          timestamp: new Date().toISOString()
-        });
-      }
     };
     
     checkRouteAccess();
@@ -729,8 +751,8 @@ export function PaceAppLayout({
     return result || { error: null };
   };
 
-  // Show loading state while checking permissions
-  if (enforcePermissions && isCheckingPermission) {
+  // Show loading state while checking permissions or super admin status
+  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">

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

@@ -114,11 +114,13 @@ vi.mock('../../../hooks/useEventTheme', () => ({
 const mockIsPermitted = vi.fn().mockResolvedValue(true);
 const mockCheckPermission = vi.fn().mockResolvedValue(true);
 
+const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
+
 vi.mock('../../../rbac/api', () => ({
   isPermitted: vi.fn().mockResolvedValue(true),
   getPermissionMap: vi.fn().mockResolvedValue({}),
   getAccessLevel: vi.fn().mockResolvedValue('viewer'),
-  isSuperAdmin: vi.fn().mockResolvedValue(false),
+  isSuperAdmin: (...args: any[]) => mockIsSuperAdmin(...args),
   setupRBAC: vi.fn()
 }));
 
@@ -232,6 +234,10 @@ describe('PaceAppLayout Security', () => {
     mockIsPermitted.mockClear();
     mockIsPermitted.mockResolvedValue(true);
     
+    // Reset super admin mock
+    mockIsSuperAdmin.mockClear();
+    mockIsSuperAdmin.mockResolvedValue(false);
+    
     // Reset RBAC hook mocks
     mockHasPermissionRBAC.mockClear();
     mockHasPermissionRBAC.mockResolvedValue(true);
@@ -789,6 +795,80 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
+    it('allows super admin to bypass all permission checks', async () => {
+      // Mock super admin status
+      mockIsSuperAdmin.mockResolvedValueOnce(true);
+      
+      // Mock useCan to return false (would normally deny access)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+      
+      render(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            enforcePermissions={true}
+            routePermissions={{
+              '/test-path': 'read'
+            }}
+          />
+        </TestWrapper>
+      );
+      
+      await waitFor(() => {
+        // Super admin should bypass permission checks and see content
+        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
+        // Should NOT show access denied
+        expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    }, { timeout: 3000 });
+
+    it('does not log strict mode violations for super admins', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      // Mock super admin status
+      mockIsSuperAdmin.mockResolvedValueOnce(true);
+      
+      // Mock useCan to return false (would normally trigger violation)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+      
+      render(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            enforcePermissions={true}
+            strictMode={true}
+            routePermissions={{
+              '/test-path': 'read'
+            }}
+          />
+        </TestWrapper>
+      );
+      
+      await waitFor(() => {
+        // Wait for super admin check to complete
+        expect(mockIsSuperAdmin).toHaveBeenCalled();
+      });
+      
+      // Should not log strict mode violations for super admins
+      const violationLogs = consoleSpy.mock.calls.filter(call => 
+        call[0]?.includes('STRICT MODE VIOLATION')
+      );
+      expect(violationLogs).toHaveLength(0);
+      
+      consoleSpy.mockRestore();
+    }, { timeout: 3000 });
+
     it('prevents privilege escalation', async () => {
       // Test that users cannot escalate their privileges
       // Create a test wrapper with admin path for privilege escalation test

package/src/components/PublicLayout/PublicPageFooter.tsx

@@ -90,7 +90,7 @@ export function PublicPageFooter({
   const copyrightText = copyright || `© Copyright 2022–${year} all rights reserved, ${companyName}.`;
 
   return (
-    <footer className={cn('mt-8 py-6 flex justify-center border-t border-border bg-main-100', className)}>
+    <footer className={cn('mt-8 py-6 flex justify-center', className)}>
       <section className='px-4 w-[min(var(--app-width),100%)] mx-auto text-center'>
         {logo && (
           <img src={logo} alt="Logo" className="h-8 w-auto" />

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -17,40 +17,24 @@
  *
  * @example
  * ```tsx
- * import { PublicPageHeader, FileDisplay } from '@jmruthers/pace-core';
- *
+ * import { PublicPageHeader, PublicPageProvider } from '@jmruthers/pace-core';
+ * 
+ * const APP_NAME = 'CORE';
+ * 
  * function PublicEventPage() {
  *   return (
- *     <PublicPageHeader 
- *       event={event}
- *       title="Event Details"
- *       description="Public information about this event"
- *       showEventLogo={true}
- *     />
+ *     <PublicPageProvider appName={APP_NAME}>
+ *       <PublicPageHeader 
+ *         event={event}
+ *         title="Event Details"
+ *         description="Public information about this event"
+ *         showEventLogo={true}
+ *       />
+ *     </PublicPageProvider>
  *   );
  * }
  * ```
  * 
- * @example
- * ```tsx
- * // Using custom logo URL
- * <PublicPageHeader 
- *   event={event}
- *   logoUrl="/custom-logo.svg"
- *   logoAlt="My Custom Logo"
- *   logoHref="/"
- * />
- * ```
- * 
- * @example
- * ```tsx
- * // Using custom logo component
- * <PublicPageHeader 
- *   event={event}
- *   customAppLogo={<CustomLogoComponent />}
- *   logoHref="/dashboard"
- * />
- * ```
  *
  * @accessibility
  * - WCAG 2.1 AA compliant
@@ -67,7 +51,6 @@
  */
 
 import React, { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
 import type { Event } from '../../types/unified';
 import { FileDisplay } from '../FileDisplay/FileDisplay';
 import { FileCategory } from '../../types/file-reference';
@@ -91,16 +74,8 @@ export interface PublicPageHeaderProps {
   className?: string;
   /** Custom content to display in the header */
   children?: ReactNode;
-  /** Custom app logo component (overrides logoUrl and auto-generated path) */
-  customAppLogo?: ReactNode;
   /** Custom event logo component */
   customEventLogo?: ReactNode;
-  /** URL to the app logo image (overrides auto-generated path, but customAppLogo takes precedence) */
-  logoUrl?: string;
-  /** Alt text for the app logo (defaults to appName from useAppConfig) */
-  logoAlt?: string;
-  /** URL to navigate to when app logo is clicked */
-  logoHref?: string;
 }
 
 /**
@@ -109,14 +84,18 @@ export interface PublicPageHeaderProps {
  * This component displays the app logo, event logo, and event information
  * in a clean, accessible layout suitable for public pages.
  * 
- * Logo handling follows a priority order:
- * 1. customAppLogo prop (if provided) - highest priority
- * 2. logoUrl prop (if provided) - direct URL override
- * 3. Auto-generated path from appName via useAppConfig() - convention-based
- * 4. Default SVG fallback - lowest priority
+ * The app logo is automatically generated from the appName using the pattern:
+ * `/{appName.toLowerCase()}_logo_wide.svg` from the public folder.
  * 
- * The logo can be made clickable by providing the logoHref prop, which will
- * wrap the logo in a Link component for navigation.
+ * **Important:** The appName is obtained from PublicPageProvider context, which should
+ * receive the APP_NAME constant from your App.tsx file. This ensures consistency with
+ * authenticated pages that use the same APP_NAME constant.
+ * 
+ * **Event Logo Requirements:**
+ * - Event logo files must be marked as `is_public = true` in the `file_references` table
+ * - The RPC function `data_file_reference_by_category_list` must be accessible to the anonymous/public role
+ * - Storage bucket must allow public read access for logo files
+ * - If no public logo is available, a fallback UI with event initials will be displayed
  * 
  * @param props - Header configuration and content
  * @returns React element with public page header
@@ -130,83 +109,26 @@ export function PublicPageHeader({
   showAppLogo = true,
   className = '',
   children,
-  customAppLogo,
-  customEventLogo,
-  logoUrl,
-  logoAlt,
-  logoHref
+  customEventLogo
 }: PublicPageHeaderProps) {
   const { appName } = useAppConfig();
 
   return (
     <header className={cn(
-      " px-4 w-[min(var(--app-width),100%)] mx-auto bg-background border-b border-sec-200 grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
+
+      "w-full px-[max(0rem,calc((100vw-var(--app-width))/2-0.5rem))] grid grid-cols-[auto_1fr_auto]  place-items-center gap-2",
       className
     )}>
       
         {/* Top row with logos */}
 
           {/* App Logo */}
-          {showAppLogo && (
-            <>
-              {customAppLogo ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    {customAppLogo}
-                  </Link>
-                ) : (
-                  customAppLogo
-                )
-              ) : logoUrl ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      className="max-w-36 object-contain row-span-2"
-                      src={logoUrl}
-                      alt={logoAlt || appName}
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    className="max-w-36 object-contain row-span-2"
-                    src={logoUrl}
-                    alt={logoAlt || appName}
-                  />
-                )
-              ) : appName ? (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      className="max-w-36 object-contain row-span-2"
-                      src={`/${appName.toLowerCase()}_logo_wide.svg`}
-                      alt={logoAlt || appName}
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    className="max-w-36 object-contain row-span-2"
-                    src={`/${appName.toLowerCase()}_logo_wide.svg`}
-                    alt={logoAlt || appName}
-                  />
-                )
-              ) : (
-                logoHref ? (
-                  <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                    <img
-                      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-                      alt={logoAlt || 'Logo'}
-                      className="max-w-36 object-contain row-span-2"
-                    />
-                  </Link>
-                ) : (
-                  <img
-                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-                    alt={logoAlt || 'Logo'}
-                    className="max-w-36 object-contain row-span-2"
-                  />
-                )
-              )}
-            </>
+          {showAppLogo && appName && (
+            <img
+              className="ml-4 max-w-36 object-contain row-span-2"
+              src={`/${appName.toLowerCase()}_logo_wide.svg`}
+              alt={appName}
+            />
           )}
 
 
@@ -222,24 +144,43 @@ export function PublicPageHeader({
           {showEventLogo && event && (
             <>
               {customEventLogo || (
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  displayOnly={true}
-                  showFallback={true}
-                  fallbackSize="md"
-                  className="max-w-36 row-span-2"
-                  generateFallbackText={(fileName) => {
-                    if (!event.event_name) return 'EV';
-                    return event.event_name
-                      .split(/[\s\-_]+/)
-                      .map(word => word.charAt(0).toUpperCase())
-                      .join('')
-                      .substring(0, 3);
-                  }}
-                />
+                <>
+                  {/* Log organisation_id derivation chain for debugging */}
+                  {(() => {
+                    console.log('[PublicPageHeader] Organisation ID Derivation Chain:', {
+                      eventCode: eventCode,
+                      eventId: event.event_id,
+                      eventName: event.event_name,
+                      organisationId: event.organisation_id,
+                      organisationIdType: typeof event.organisation_id,
+                      organisationIdValid: !!event.organisation_id && event.organisation_id !== '',
+                      derivation: 'URL → eventCode → usePublicEvent → event.organisation_id → FileDisplay',
+                      note: 'Organisation ID is derived from event data fetched using event code from URL'
+                    });
+                    return null;
+                  })()}
+                  <FileDisplay
+                    table_name="event"
+                    record_id={event.event_id}
+                    organisation_id={event.organisation_id}
+                    category={FileCategory.EVENT_LOGOS}
+                    displayOnly={true}
+                    showFallback={true}
+                    fallbackSize="md"
+                    className="mr-4 max-w-36 row-span-2"
+                    generateFallbackText={(fileName) => {
+                      if (!event.event_name) return 'EV';
+                      return event.event_name
+                        .split(/[\s\-_]+/)
+                        .map(word => word.charAt(0).toUpperCase())
+                        .join('')
+                        .substring(0, 3);
+                    }}
+                    // Note: FileDisplay automatically detects public page context
+                    // and uses FileDisplayPublic component which queries only public files (is_public = true)
+                    // If no public logo is found, fallback UI with event initials will be displayed
+                  />
+                </>
               )}
             </>
           )}

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -159,13 +159,13 @@ export function PublicPageLayout({
     }
     return (
       <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-        <div className="text-center">
+
           <h1>Event Not Found</h1>
           <p>
             The event code "{eventCode}" is invalid or the event is not available for public viewing.
           </p>
           <Button onClick={handleRefetch}>Try Again</Button>
-        </div>
+
       </main>
     );
   }
@@ -174,13 +174,13 @@ export function PublicPageLayout({
   if (!event && showValidationErrors) {
     return (
       <main className="flex flex-col items-center justify-center px-4 w-[min(var(--app-width),100%)] mx-auto py-8">
-        <div className="text-center">
+
           <h1>Event Not Available</h1>
           <p>
             This event is not available for public viewing.
           </p>
           {handleRefetch && <Button onClick={handleRefetch}>Try Again</Button>}
-        </div>
+
       </main>
     );
   }