@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/examples/PublicPageUsageExample.tsx

@@ -0,0 +1,216 @@
+/**
+ * @file Public Page Usage Example
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * A complete example showing the correct usage pattern for public pages.
+ * This example demonstrates how to properly implement public pages without
+ * authentication context conflicts.
+ *
+ * @example
+ * ```tsx
+ * import { PublicPageUsageExample } from '@jmruthers/pace-core/examples';
+ * 
+ * function App() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Routes>
+ *         <Route path="/events/:eventCode/recipe-grid-report" element={<PublicPageUsageExample />} />
+ *       </Routes>
+ *     </BrowserRouter>
+ *   );
+ * }
+ * ```
+ */
+
+import React from 'react';
+import { 
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner,
+  PublicErrorBoundary
+} from '../index';
+
+/**
+ * Correct usage pattern for public pages
+ * 
+ * This component demonstrates the proper way to implement public pages:
+ * 1. Use usePublicRouteParams to get the eventCode from URL
+ * 2. Use usePublicEvent to fetch event data
+ * 3. Pass event data to PublicPageLayout
+ * 4. No authentication context is triggered
+ */
+export function PublicPageUsageExample() {
+  // Step 1: Extract event code from URL parameters
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  
+  // Step 2: Fetch event data using the event code
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+
+  // Step 3: Handle loading state
+  if (isLoading) {
+    return (
+      <PublicLoadingSpinner 
+        message="Loading event details..."
+      />
+    );
+  }
+
+  // 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">
+              Event Not Found
+            </h1>
+            <p className="text-gray-600 mb-6">
+              The event code "{eventCode}" is invalid or the event 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">
+            Event Not Available
+          </h1>
+          <p className="text-gray-600 mb-6">
+            This event 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 with event data
+  return (
+    <PublicErrorBoundary>
+      <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">
+          {/* Event Overview */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            {/* Event Information */}
+            <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>
+                  
+                  {event.event_news && (
+                    <div>
+                      <h3 className="font-semibold text-gray-700 mb-2">Event News</h3>
+                      <p className="text-gray-900">{event.event_news}</p>
+                    </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>
+
+          {/* 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 Footer Information */}
+          {event.event_footer && (
+            <div className="bg-gray-50 rounded-lg p-6">
+              <h3 className="font-semibold text-gray-900 mb-2">Additional Information</h3>
+              <p className="text-gray-700">{event.event_footer}</p>
+            </div>
+          )}
+        </main>
+
+        <PublicPageFooter event={event} />
+      </PublicPageLayout>
+    </PublicErrorBoundary>
+  );
+}
+
+export default PublicPageUsageExample;

package/src/hooks/__tests__/useOrganisationPermissions.unit.test.tsx

@@ -15,6 +15,17 @@ vi.mock('../../providers/OrganisationProvider', () => ({
   useOrganisations: vi.fn(() => mockUseOrganisations)
 }));
 
+// Mock useOrganisationSecurity to avoid provider dependencies
+vi.mock('../useOrganisationSecurity', () => ({
+  useOrganisationSecurity: vi.fn(() => ({
+    superAdminContext: {
+      isSuperAdmin: false,
+      hasGlobalAccess: false,
+      canManageAllOrganisations: false
+    }
+  }))
+}));
+
 describe('useOrganisationPermissions', () => {
     describe('Basic functionality', () => {
     it('should return default values when no organisation context', () => {
@@ -108,7 +119,7 @@ describe('useOrganisationPermissions', () => {
       const { result } = renderHook(() => useOrganisationPermissions());
 
       expect(result.current.isOrgAdmin).toBe(true);
-      expect(result.current.isSuperAdmin).toBe(true);
+      expect(result.current.isSuperAdmin).toBe(false); // Super admin requires database query, not role-based
       expect(result.current.canModerate).toBe(true);
       expect(result.current.canManageMembers).toBe(true);
       expect(result.current.canManageSettings).toBe(true);

package/src/hooks/__tests__/useOrganisationSecurity.unit.test.tsx

@@ -40,6 +40,20 @@ const mockUseOrganisations = {
   validateOrganisationAccess: vi.fn()
 };
 
+// Mock Supabase client for database queries
+const mockSupabaseQuery = {
+  select: vi.fn().mockReturnThis(),
+  eq: vi.fn().mockReturnThis(),
+  lte: vi.fn().mockReturnThis(),
+  or: vi.fn().mockReturnThis(),
+  single: vi.fn(),
+  limit: vi.fn()
+};
+
+const mockSupabase = {
+  from: vi.fn().mockReturnValue(mockSupabaseQuery)
+};
+
 // Legacy useRBAC mock removed - global role now derived from user metadata
 
 describe('useOrganisationSecurity', () => {
@@ -47,24 +61,49 @@ describe('useOrganisationSecurity', () => {
     vi.clearAllMocks();
     vi.mocked(useUnifiedAuth).mockReturnValue(mockUseUnifiedAuth as any);
     vi.mocked(useOrganisations).mockReturnValue(mockUseOrganisations as any);
-    // Legacy useRBAC hook removed - global role now derived from user metadata
+    
+    // Reset Supabase mock chain
+    mockSupabaseQuery.select.mockClear().mockReturnThis();
+    mockSupabaseQuery.eq.mockClear().mockReturnThis();
+    mockSupabaseQuery.lte.mockClear().mockReturnThis();
+    mockSupabaseQuery.or.mockClear().mockReturnThis();
+    mockSupabaseQuery.single.mockClear();
+    mockSupabaseQuery.limit.mockClear();
+    mockSupabase.from.mockClear().mockReturnValue(mockSupabaseQuery);
+    
+    // Default: not a super admin
+    mockSupabaseQuery.limit.mockResolvedValue({ data: [], error: null });
+    mockSupabaseQuery.single.mockResolvedValue({ data: null, error: { message: 'No rows found' } });
   });
 
   describe('Super admin context', () => {
-    it('should detect super admin from user metadata', () => {
+    it('should detect super admin from user metadata', async () => {
       const mockUser = {
         id: 'user-123',
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
+      
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
-        user: mockUser
+        user: mockUser,
+        session: { access_token: 'token' },
+        supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
       
-      console.log('User metadata:', result.current);
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+      
       expect(result.current.superAdminContext.isSuperAdmin).toBe(true);
       expect(result.current.superAdminContext.hasGlobalAccess).toBe(true);
       expect(result.current.superAdminContext.canManageAllOrganisations).toBe(true);
@@ -111,17 +150,26 @@ describe('useOrganisationSecurity', () => {
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
-      const mockSession = { access_token: 'test-token' };
-      const mockSupabase = { from: vi.fn() };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
         user: mockUser,
-        session: mockSession,
+        session: { access_token: 'token' },
         supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       const hasAccess = await result.current.validateOrganisationAccess('org-123');
 
@@ -220,18 +268,32 @@ describe('useOrganisationSecurity', () => {
   });
 
   describe('hasMinimumRole', () => {
-    it('should return true for super admin regardless of role', () => {
+    it('should return true for super admin regardless of role', async () => {
       const mockUser = {
         id: 'user-123',
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
+      
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
-        user: mockUser
+        user: mockUser,
+        session: { access_token: 'token' },
+        supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       expect(result.current.hasMinimumRole('org_admin')).toBe(true);
       expect(result.current.hasMinimumRole('member')).toBe(true);
@@ -280,18 +342,32 @@ describe('useOrganisationSecurity', () => {
   });
 
   describe('canAccessChildOrganisations', () => {
-    it('should return true for super admin', () => {
+    it('should return true for super admin', async () => {
       const mockUser = {
         id: 'user-123',
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
+      
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
-        user: mockUser
+        user: mockUser,
+        session: { access_token: 'token' },
+        supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       expect(result.current.canAccessChildOrganisations()).toBe(true);
     });
@@ -344,15 +420,26 @@ describe('useOrganisationSecurity', () => {
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
-      const mockSupabase = { rpc: vi.fn() };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
         user: mockUser,
+        session: { access_token: 'token' },
         supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       const hasPermission = await result.current.hasPermission('view_basic');
 
@@ -489,15 +576,26 @@ describe('useOrganisationSecurity', () => {
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
-      const mockSupabase = { rpc: vi.fn() };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
         user: mockUser,
+        session: { access_token: 'token' },
         supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       const permissions = await result.current.getUserPermissions();
 
@@ -511,9 +609,12 @@ describe('useOrganisationSecurity', () => {
       // Mock the RBAC API
       const { getPermissionMap } = await import('../../rbac/api');
       const mockPermissions = {
-        'page1': ['view_basic', 'view_details'],
-        'page2': ['moderate_content', 'manage_events'],
-        'page3': ['manage_members', 'manage_settings']
+        'view_basic': true,
+        'view_details': true,
+        'moderate_content': true,
+        'manage_events': true,
+        'manage_members': true,
+        'manage_settings': true
       };
       vi.mocked(getPermissionMap).mockResolvedValue(mockPermissions);
       
@@ -757,15 +858,26 @@ describe('useOrganisationSecurity', () => {
         user_metadata: { globalRole: 'super_admin' },
         app_metadata: { globalRole: 'super_admin' }
       };
-      const mockSupabase = { from: vi.fn() };
+      
+      // Mock database query to return super admin role
+      mockSupabaseQuery.limit.mockResolvedValue({
+        data: [{ role: 'super_admin' }],
+        error: null
+      });
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
         user: mockUser,
+        session: { access_token: 'token' },
         supabase: mockSupabase
       } as any);
 
       const { result } = renderHook(() => useOrganisationSecurity());
+      
+      // Wait for async super admin check to complete
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
 
       const hasAccess = await result.current.validateUserAccess('other-user', 'org-123');