@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -124,6 +124,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useUnifiedAuth } from '../../providers';
+import { isSuperAdmin } from '../../rbac/api';
 import { LoginForm } from '../LoginForm';
 import { Button, Input, Label } from '..';
 
@@ -132,6 +133,8 @@ export interface PaceLoginPageProps {
   appName: string;
   /** The path to redirect to upon successful login. Defaults to `/`. */
   onSuccessRedirectPath?: string;
+  /** Whether to check app access using RBAC. Defaults to false. */
+  requireAppAccess?: boolean;
 }
 
 /**
@@ -141,6 +144,7 @@ export interface PaceLoginPageProps {
  * 
  * Recent enhancements:
  * - Role-based redirection: Admin users are automatically redirected
+ * - RBAC-based app access control: Checks if user has permission to access the app
  * - Enhanced error handling with navigation error recovery
  * - Dual loading states: auth loading + form submission loading
  * - Error persistence: Auth errors are displayed below the form
@@ -159,33 +163,144 @@ export interface PaceLoginPageProps {
  */
 export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   appName = 'Pace',
-  onSuccessRedirectPath = '/'
+  onSuccessRedirectPath = '/',
+  requireAppAccess = false
 }) => {
-  const { signIn, isAuthenticated, isLoading, authError, hasRole } = useUnifiedAuth();
+  const { signIn, isAuthenticated, isLoading, authError, user, supabase } = useUnifiedAuth();
+  
   const navigate = useNavigate();
   const [isSigningIn, setIsSigningIn] = useState(false);
+  const [accessError, setAccessError] = useState<string | null>(null);
+  const [isCheckingAccess, setIsCheckingAccess] = useState(false);
 
+  // Check app access after authentication using RBAC
   useEffect(() => {
-    // Only redirect super admin users automatically
-    if (isAuthenticated && !isLoading && hasRole('super_admin')) {
+    if (!requireAppAccess || !isAuthenticated || isLoading || !user || !supabase) {
+      return;
+    }
+
+    const checkAccess = async () => {
+      setIsCheckingAccess(true);
+      setAccessError(null);
+
       try {
-        navigate(onSuccessRedirectPath, { replace: true });
+        const userId = user.id;
+        console.log('[PaceLoginPage] Checking app access using RBAC:', { appName, userId });
+
+        // Step 1: Check if user is super admin (they have unrestricted access)
+        const superAdminCheck = await isSuperAdmin(userId);
+        
+        if (superAdminCheck) {
+          console.log('[PaceLoginPage] User is super admin, granting access');
+          setIsCheckingAccess(false);
+          navigate(onSuccessRedirectPath, { replace: true });
+          return;
+        }
+
+        // Step 2: Get the app ID
+        const { data: appData, error: appError } = await supabase
+          .from('rbac_apps')
+          .select('id, name, is_active')
+          .eq('name', appName)
+          .eq('is_active', true)
+          .single();
+
+        if (appError || !appData) {
+          console.error('[PaceLoginPage] App not found:', appName, appError);
+          setAccessError(`Application "${appName}" is not configured. Please contact your administrator.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        // Step 3: Get all pages for this app
+        const { data: pagesData, error: pagesError } = await supabase
+          .from('rbac_app_pages')
+          .select('id, page_name')
+          .eq('app_id', appData.id);
+
+        if (pagesError || !pagesData || pagesData.length === 0) {
+          console.log('[PaceLoginPage] No pages configured for app:', appName);
+          setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        // Step 4: Get user's first organisation
+        const { data: orgData } = await supabase
+          .from('rbac_organisation_roles')
+          .select('organisation_id')
+          .eq('user_id', userId)
+          .eq('status', 'active')
+          .is('revoked_at', null)
+          .limit(1)
+          .single();
+
+        if (!orgData) {
+          console.log('[PaceLoginPage] User has no organisation access');
+          setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        // Step 5: Check if user has ANY read permission on ANY page in this app
+        // We check each page and see if user has the 'read' operation allowed
+        let hasAnyAccess = false;
+        for (const page of pagesData) {
+          const { data: hasPermission, error: permError } = await supabase
+            .rpc('rbac_check_permission_simplified', {
+              p_user_id: userId,
+              p_permission: `read:page.${page.page_name}`, // Permission format: operation:resource
+              p_organisation_id: orgData.organisation_id,
+              p_event_id: null,
+              p_app_id: appData.id,
+              p_page_id: page.page_name // Page name to resolve to UUID
+            });
+
+          console.log('[PaceLoginPage] Permission check for page:', page.page_name, { hasPermission, error: permError });
+
+          if (!permError && hasPermission === true) {
+            hasAnyAccess = true;
+            break;
+          }
+        }
+
+        if (hasAnyAccess) {
+          console.log('[PaceLoginPage] User has access to app');
+          setIsCheckingAccess(false);
+          navigate(onSuccessRedirectPath, { replace: true });
+          return;
+        }
+
+        // No access - deny
+        console.log('[PaceLoginPage] Access denied - no permissions');
+        setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
+        setIsCheckingAccess(false);
       } catch (error) {
-        console.error('Navigation error:', error);
+        console.error('[PaceLoginPage] Error checking app access:', error);
+        setAccessError('An error occurred while checking your permissions. Please try again or contact support.');
+        setIsCheckingAccess(false);
       }
-    }
-  }, [isAuthenticated, isLoading, navigate, onSuccessRedirectPath, hasRole]);
+    };
+
+    checkAccess();
+  }, [isAuthenticated, isLoading, user, supabase, appName, requireAppAccess, navigate, onSuccessRedirectPath]);
 
   const handleSubmit = async (data: { email: string; password: string }) => {
     setIsSigningIn(true);
+    setAccessError(null); // Clear previous access errors
+    
     try {
       const { error } = await signIn(data.email, data.password);
 
       if (!error) {
-        try {
-          navigate(onSuccessRedirectPath, { replace: true });
-        } catch (navError) {
-          console.error('Navigation error after sign-in:', navError);
+        // Navigation will be handled by the useEffect that checks app access
+        // Don't navigate here if requireAppAccess is true
+        if (!requireAppAccess) {
+          try {
+            navigate(onSuccessRedirectPath, { replace: true });
+          } catch (navError) {
+            console.error('Navigation error after sign-in:', navError);
+          }
         }
       }
     } finally {
@@ -215,7 +330,16 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
             {authError.message}
           </em>
         )}
-
+        {accessError && (
+          <em className="mt-4 text-destructive text-center">
+            {accessError}
+          </em>
+        )}
+        {isCheckingAccess && (
+          <em className="mt-4 text-muted-foreground text-center">
+            Checking permissions...
+          </em>
+        )}
     </main>
   );
 } 

package/src/components/PublicLayout/__tests__/PublicPageHeader.test.tsx

@@ -271,7 +271,7 @@ describe('[component] PublicPageHeader', () => {
         <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
-      const eventInfo = screen.getByRole('banner').querySelector('div > div:last-child');
+      const eventInfo = screen.getByRole('banner').querySelector('div.pb-4');
       expect(eventInfo).toHaveClass('pb-4');
     });
   });

package/src/components/Select/Select.tsx

@@ -447,6 +447,7 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
         data-disabled={disabled ? "true" : undefined}
         role="option"
         aria-selected={isSelected}
+        tabIndex={disabled ? -1 : 0}
       >
         {children}
         {isSelected && (

package/src/components/examples/PermissionExample.tsx

@@ -0,0 +1,173 @@
+/**
+ * @file Permission System Example
+ * @package @jmruthers/pace-core
+ * @module Components/Examples
+ * @since 0.4.0
+ *
+ * Example component demonstrating the hybrid permission system
+ * that supports both direct app access and event-based permissions.
+ */
+
+import React from 'react';
+import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { useAppConfig } from '../../hooks/useAppConfig';
+import { usePermissions, useAccessLevel } from '../../rbac/hooks';
+import { AccessLevel } from '../../types/unified';
+
+export function PermissionExample() {
+  const { 
+    user, 
+    isAuthenticated,
+    selectedEvent,
+    selectedOrganisation
+  } = useUnifiedAuth();
+  
+  const { hasPermission } = usePermissions(user?.id || '', { 
+    organisationId: selectedOrganisation?.id || '', 
+    appId: undefined 
+  });
+  const { accessLevel } = useAccessLevel(user?.id || '', { 
+    organisationId: selectedOrganisation?.id || '', 
+    appId: undefined 
+  });
+  
+  // Helper function to check if user has required access level
+  const hasAccessLevel = (requiredLevel: AccessLevel): boolean => {
+    const levelOrder = {
+      [AccessLevel.NONE]: 0,
+      [AccessLevel.VIEWER]: 1,
+      [AccessLevel.PARTICIPANT]: 2,
+      [AccessLevel.EDITOR]: 3,
+      [AccessLevel.PLANNER]: 4,
+      [AccessLevel.ADMIN]: 5,
+      [AccessLevel.SUPER_ADMIN]: 6,
+      [AccessLevel.SUPER]: 7
+    };
+    
+    return levelOrder[accessLevel] >= levelOrder[requiredLevel];
+  };
+  
+  const { supportsDirectAccess, requiresEvent, isLoading, appName } = useAppConfig();
+
+  if (!isAuthenticated) {
+    return <div>Please log in to see permissions</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading app configuration...</div>;
+  }
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h2>Permission System Example</h2>
+      
+      {/* App Configuration Info */}
+              <div className="mb-6 p-4 bg-sec-100 rounded-lg">
+        <h3>App Configuration: {appName}</h3>
+        <div className="space-y-1">
+          <div>Supports Direct Access: {supportsDirectAccess ? '✅' : '❌'}</div>
+          <div>Requires Event: {requiresEvent ? '✅' : '❌'}</div>
+          <div>Current Access Level: {accessLevel}</div>
+        </div>
+      </div>
+
+      {/* Event Selection */}
+      {requiresEvent && (
+        <div className="mb-6 p-4 border rounded-lg">
+          <h3>Event Context</h3>
+          <div className="space-y-2">
+            <div>Selected Event: {selectedEvent?.event_id || 'None'}</div>
+            <div className="space-x-2">
+              <button 
+                onClick={() => {/* Event selection logic would go here */}}
+                className="px-3 py-1 bg-main-500 text-main-50 rounded"
+              >
+                Select Event 123
+              </button>
+              <button 
+                onClick={() => {/* Clear event logic would go here */}}
+                className="px-3 py-1 bg-sec-500 text-main-50 rounded"
+              >
+                Clear Event
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Permission Examples */}
+      <div className="space-y-4">
+        <h3>Permission Examples</h3>
+        
+        <div className="grid gap-4 md:grid-cols-2">
+          {/* Basic Permissions */}
+          <div className="p-4 border rounded-lg">
+            <h4>Basic Permissions</h4>
+            <div className="space-y-1 text-sm">
+              <div>Can Read: {hasPermission('read:app') ? '✅' : '❌'}</div>
+              <div>Can Write: {hasPermission('create:app') ? '✅' : '❌'}</div>
+              <div>Can Delete: {hasPermission('delete:app') ? '✅' : '❌'}</div>
+            </div>
+          </div>
+
+          {/* Access Level Checks */}
+          <div className="p-4 border rounded-lg">
+            <h4>Access Level Checks</h4>
+            <div className="space-y-1 text-sm">
+              <div>Is Editor+: {hasAccessLevel(AccessLevel.EDITOR) ? '✅' : '❌'}</div>
+              <div>Is Planner+: {hasAccessLevel(AccessLevel.PLANNER) ? '✅' : '❌'}</div>
+              <div>Is Admin: {hasAccessLevel(AccessLevel.ADMIN) ? '✅' : '❌'}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Conditional Rendering Examples */}
+        <div className="p-4 border rounded-lg">
+          <h4>Conditional UI Elements</h4>
+          <div className="space-y-2">
+            {hasPermission('read:app') && (
+              <div className="p-2 bg-main-100 text-main-800 rounded">
+                ✅ You can see this because you have read permission
+              </div>
+            )}
+            
+            {hasPermission('create:app') && (
+              <button className="px-4 py-2 bg-main-500 text-main-50 rounded">
+                Edit (Available with write permission)
+              </button>
+            )}
+            
+            {hasAccessLevel(AccessLevel.ADMIN) && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                🔒 Admin-only content visible
+              </div>
+            )}
+            
+            {!hasPermission('delete:app') && (
+              <div className="p-2 bg-acc-100 text-acc-800 rounded">
+                ⚠️ Delete functionality not available for your access level
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Status Summary */}
+        <div className="p-4 bg-main-50 rounded-lg">
+          <h4>Current Status</h4>
+          <div className="text-sm space-y-1">
+            <div>User: {user?.email}</div>
+            <div>App: {appName}</div>
+            <div>Event: {selectedEvent?.event_id || 'Direct Access'}</div>
+            <div>
+              Permission Model: {
+                selectedEvent?.event_id ? 'Event-based' : 
+                supportsDirectAccess ? 'Direct Access' : 
+                'No Access (requires event)'
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 

package/src/examples/CorrectPublicPageImplementation.tsx

@@ -0,0 +1,301 @@
+/**
+ * @file Correct Public Page Implementation
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * This example shows the CORRECT way to implement public pages
+ * that are completely isolated from the authentication context.
+ *
+ * CRITICAL: Public pages MUST be completely separate from the main app's
+ * authentication context. They cannot be rendered inside the same component
+ * tree as UnifiedAuthProvider, OrganisationProvider, or EventProvider.
+ */
+
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { 
+  PublicPageProvider,
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner
+} from '../index';
+
+/**
+ * MAIN APPLICATION - This is your main app with authentication
+ * 
+ * This should be completely separate from public pages.
+ * All authenticated routes go here.
+ */
+function MainApp() {
+  return (
+    <div>
+      <h1>Main Application (Requires Authentication)</h1>
+      <p>This is your main app with all the authenticated features.</p>
+      {/* Your main app content here */}
+    </div>
+  );
+}
+
+/**
+ * PUBLIC PAGE APPLICATION - This is completely separate
+ * 
+ * This handles ALL public pages and is completely isolated
+ * from the main application's authentication context.
+ */
+function PublicPageApp() {
+  return (
+    <PublicPageProvider>
+      <Routes>
+        {/* All public routes go here */}
+        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipeGridReportPage />} />
+        <Route path="/events/:eventCode" element={<PublicEventPage />} />
+        <Route path="/public-info/:pageId" element={<PublicInfoPage />} />
+      </Routes>
+    </PublicPageProvider>
+  );
+}
+
+/**
+ * ROOT APPLICATION - This decides which app to render
+ * 
+ * This is the key: public pages and authenticated pages
+ * are completely separate applications.
+ */
+function RootApp() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public routes - NO authentication context */}
+        <Route path="/events/*" element={<PublicPageApp />} />
+        <Route path="/public-info/*" element={<PublicPageApp />} />
+        
+        {/* Authenticated routes - WITH authentication context */}
+        <Route path="/*" element={<MainApp />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+/**
+ * Public Recipe Grid Report Page
+ * 
+ * This demonstrates the correct usage pattern.
+ * Notice: NO authentication context is triggered.
+ */
+function PublicRecipeGridReportPage() {
+  // Step 1: Extract event code from URL
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  
+  // Step 2: Fetch event data
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+  
+  // Step 3: Handle loading state
+  if (isLoading) {
+    return (
+      <PublicLoadingSpinner 
+        message="Loading recipe grid report..."
+      />
+    );
+  }
+
+  // Step 4: Handle error state
+  if (error) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <div className="mb-6">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
+              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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>
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+              Recipe Grid Report Not Found
+            </h1>
+            <p className="text-gray-600 mb-6">
+              The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
+            </p>
+            <button
+              onClick={refetch}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 5: Handle missing event
+  if (!event) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+            Recipe Grid Report Not Available
+          </h1>
+          <p className="text-gray-600 mb-6">
+            This recipe grid report is not available for public viewing.
+          </p>
+          <button
+            onClick={refetch}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 6: Render the public page
+  return (
+    <PublicPageLayout eventCode={eventCode || ''} event={event}>
+      <PublicPageHeader 
+        event={event}
+        eventCode={eventCode || ''}
+        title="Recipe Grid Report"
+        description="Public recipe grid report for this event"
+      />
+      
+      <main className="max-w-6xl mx-auto px-4 py-8">
+        {/* Recipe Grid Report Content */}
+        <div className="mb-12">
+          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+            <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
+            <p className="text-green-800">
+              This is where your recipe grid report content would go. 
+              The public page is now working correctly without authentication context conflicts.
+            </p>
+            <div className="mt-4 text-sm text-green-700">
+              <p><strong>Event Code:</strong> {eventCode}</p>
+              <p><strong>Event ID:</strong> {event.event_id}</p>
+              <p><strong>Event Name:</strong> {event.event_name}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Event Information */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+          <div className="lg:col-span-2 space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
+              <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <h3 className="font-semibold text-gray-700">Date</h3>
+                    <p className="text-gray-900">
+                      {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric'
+                      }) : 'TBA'}
+                    </p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-gray-700">Venue</h3>
+                    <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-gray-700">Participants</h3>
+                    <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-gray-700">Event Code</h3>
+                    <p className="text-gray-900 font-mono">{event.event_code}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Event Logo */}
+          <div className="flex justify-center lg:justify-start">
+            <div className="text-center">
+              <EventLogo
+                eventId={event.event_id}
+                eventName={event.event_name}
+                organisationId={event.organisation_id}
+                size="2xl"
+                className="rounded-lg shadow-lg"
+              />
+              <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <PublicPageFooter event={event} />
+    </PublicPageLayout>
+  );
+}
+
+/**
+ * Generic public event page
+ */
+function PublicEventPage() {
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+
+  if (isLoading) return <PublicLoadingSpinner message="Loading event..." />;
+  if (error) return <div>Error: {error.message}</div>;
+  if (!event) return <div>Event not found</div>;
+
+  return (
+    <PublicPageLayout eventCode={eventCode || ''} event={event}>
+      <PublicPageHeader 
+        event={event}
+        eventCode={eventCode || ''}
+        title="Event Details"
+        description="Public information about this event"
+      />
+      
+      <main className="max-w-4xl mx-auto px-4 py-6">
+        <div className="text-center mb-6">
+          <EventLogo
+            eventId={event.event_id}
+            eventName={event.event_name}
+            organisationId={event.organisation_id}
+            size="xl"
+            className="mx-auto mb-4"
+          />
+          <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
+          {event.event_date && (
+            <p className="text-gray-600 mt-2">
+              {new Date(event.event_date).toLocaleDateString('en-AU')}
+            </p>
+          )}
+        </div>
+      </main>
+
+      <PublicPageFooter event={event} />
+    </PublicPageLayout>
+  );
+}
+
+/**
+ * Generic public info page
+ */
+function PublicInfoPage() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="max-w-md mx-auto text-center px-4">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          Public Information Page
+        </h1>
+        <p className="text-gray-600">
+          This is a public information page that doesn't require authentication.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default RootApp;