@jmruthers/pace-core 0.5.184 → 0.5.186

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -128,6 +128,8 @@ export interface PaceAppLayoutProps {
   navItems?: NavigationItem[];
   /** Show/hide event selector in the header */
   showEventSelector?: boolean;
+  /** Show/hide organisation selector in the header */
+  showOrgSelector?: boolean;
   /** Custom actions to display in the header (between event selector and user menu) */
   headerActions?: React.ReactNode;
   /** Custom logo component (overrides default logo) */
@@ -344,6 +346,7 @@ export function PaceAppLayout({
   appName, 
   navItems, 
   showEventSelector,
+  showOrgSelector,
   headerActions,
   customLogo,
   logoHref = '/dashboard',
@@ -573,16 +576,25 @@ export function PaceAppLayout({
       const hasOrganisationContext = currentScope.organisationId;
       const hasUser = !!user?.id;
       
-      // If we have user + organisation, show items immediately (optimistic rendering)
-      // Then filter them when permissions are fully loaded
-      if (hasUser && hasOrganisationContext) {
-        // We have minimum required context - proceed with filtering
-        // Don't wait for appId or eventId - we can filter with organisationId alone
-        // Permission checks will work with resource permissions even without appId
-      } else if (!hasUser || !hasOrganisationContext) {
-        // Missing required context - wait for it
+      // BUG FIX: When showOrgSelector is enabled, show navigation optimistically while waiting
+      // for organisation selection. Only hide navigation if user is not loaded.
+      // This prevents navigation from disappearing after initial render while waiting for org selection.
+      if (!hasUser) {
+        // User not loaded yet - show all items until user is ready
+        if (isMounted) {
+          setFilteredMenuItems(baseMenuItems);
+        }
+        return;
+      }
+
+      // If no organisation context yet, show items optimistically if org selector is enabled
+      // This allows users to see navigation while they select an organisation
+      // Only proceed with permission filtering once organisation is selected
+      if (!hasOrganisationContext) {
         if (isMounted) {
-          setFilteredMenuItems([]);
+          // Show items optimistically when org selector is enabled, otherwise show all items
+          // This prevents navigation from disappearing while waiting for organisation selection
+          setFilteredMenuItems(baseMenuItems);
         }
         return;
       }
@@ -612,15 +624,6 @@ export function PaceAppLayout({
         }
       }
 
-      // If no organisation context yet, show all items until context is ready
-      // This prevents navigation from being empty while context loads
-      if (!currentScope.organisationId) {
-        if (isMounted) {
-          setFilteredMenuItems(baseMenuItems);
-        }
-        return;
-      }
-
       // Organisation context is ready - now filter items based on permissions
       // OPTIMIZATION: Use batch permission map instead of individual checks to avoid rate limits
       // This makes 1 call instead of N calls (where N = number of navigation items)
@@ -645,7 +648,9 @@ export function PaceAppLayout({
         const filtered = baseMenuItems.map((item) => {
           if (!item.href) return { item, hasAccess: true };
           
-          const pageId = pageIdMapping[item.href] || item.href.slice(1) || 'home';
+          // Extract page ID from href: remove leading slash, fallback to 'dashboard' for root
+          // This matches database page names in rbac_app_pages
+          const pageId = pageIdMapping[item.href] || (item.href === '/' ? 'dashboard' : item.href.slice(1)) || 'dashboard';
           const permission = routePermissions[item.href] || defaultPermission;
           const fullPermission: Permission = permission.includes(':')
             ? (permission as Permission)
@@ -663,6 +668,9 @@ export function PaceAppLayout({
           .filter(({ hasAccess }) => hasAccess)
           .map(({ item }) => item);
 
+        // SECURITY: Never show all items if permission check fails - this would be a security risk
+        // If all items are filtered out, it means the user doesn't have permission to see any navigation
+        // This is the correct behavior - better to show nothing than show unauthorized items
         setFilteredMenuItems(accessibleItems);
       } catch (error) {
         // On error, fall back to showing all items (graceful degradation)
@@ -679,7 +687,7 @@ export function PaceAppLayout({
     return () => {
       isMounted = false;
     };
-  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId]);
+  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId, selectedOrganisation?.id]);
 
   // NEW: Phase 2 - Enhanced Routing Features
   // Check route access for role-based routing
@@ -883,6 +891,7 @@ export function PaceAppLayout({
           }
         }}
         showEventSelector={showEventSelector}
+        showOrgSelector={showOrgSelector}
         showUserMenu={showUserMenu}
         className={headerClassName || "sticky top-0 z-[40] w-full"}
       />

package/src/components/PaceAppLayout/README.md

@@ -17,6 +17,7 @@ A comprehensive application layout component that provides a consistent structur
 - Flexible content area
 - Branding support
 - **Event selector control** - can be hidden for non-event applications
+- **Organisation selector control** - can be shown for multi-organisation applications
 - **Header customization** - custom logo, actions, user menu, and styling
 - **Clickable logo** - logo automatically routes to dashboard page (configurable)
 
@@ -27,6 +28,7 @@ A comprehensive application layout component that provides a consistent structur
 | `appName` | `string` | required | The name of the application to be displayed in the header |
 | `navItems` | `NavigationItem[]` | optional | Navigation items for the header menu. If not provided, uses default navigation |
 | `showEventSelector` | `boolean` | `true` | Show/hide event selector in the header |
+| `showOrgSelector` | `boolean` | `false` | Show/hide organisation selector in the header |
 | `headerActions` | `React.ReactNode` | optional | Custom actions to display in the header (between event selector and user menu) |
 | `customLogo` | `React.ReactNode` | optional | Custom logo component (overrides default logo) |
 | `logoHref` | `string` | `'/dashboard'` | URL to navigate to when logo is clicked (e.g., '/dashboard', '/home') |
@@ -243,6 +245,13 @@ function App() {
 - Single-tenant applications
 - Administrative dashboards that don't depend on events
 
+### Show Organisation Selector (`showOrgSelector={true}`)
+- Multi-organisation applications
+- Apps where users need to switch between organisations
+- Organisation management tools
+- Multi-tenant applications with organisation context
+- Apps requiring organisation-scoped data access
+
 ### Custom Header Components
 - Applications requiring custom branding
 - Apps with specific header actions (search, notifications, etc.)

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -83,6 +83,7 @@ describe('ProtectedRoute Component', () => {
   const defaultAuthState = {
     isAuthenticated: true,
     authLoading: false,
+    isLoading: false, // Combined loading state used by component
   };
 
   const defaultSessionState = {
@@ -142,7 +143,7 @@ describe('ProtectedRoute Component', () => {
       expect(screen.queryByTestId('navigate')).not.toBeInTheDocument();
     });
 
-    it('renders outlet when events exist but none selected (allows event selector visibility)', () => {
+    it('renders outlet when events exist but none selected (allows event selector visibility)', async () => {
       const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
       
       mockUseEvents.mockReturnValue({
@@ -151,12 +152,25 @@ describe('ProtectedRoute Component', () => {
         isLoading: false,
       });
 
-      renderWithProviders(<ProtectedRoute />);
+      // Wait for logger to be configured
+      await import('../../utils/core/logger').then(({ Logger, LogLevel }) => {
+        Logger.configure({
+          level: LogLevel.DEBUG,
+          includeTimestamp: false,
+          includeComponent: true,
+        });
+      });
+
+      renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(consoleDebugSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-      );
+      
+      // Wait a bit for the logger to be called (it's called during render)
+      await waitFor(() => {
+        expect(consoleDebugSpy).toHaveBeenCalledWith(
+          expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
+        );
+      }, { timeout: 1000 });
     });
 
     it('renders session restoration loader when session is restoring', () => {
@@ -178,6 +192,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true, // Component uses isLoading, not authLoading
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -193,6 +208,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true, // Component uses isLoading, not authLoading
       });
 
       renderWithProviders(<ProtectedRoute loadingFallback={customLoader} />);
@@ -207,6 +223,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -222,6 +239,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute loginPath="/custom-login" />);
@@ -234,6 +252,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -248,6 +267,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -273,6 +293,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -328,6 +349,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -347,6 +369,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -508,6 +531,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -527,6 +551,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: false,
+        isLoading: false,
       });
 
       mockUseSessionRestoration.mockReturnValue({
@@ -546,6 +571,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: true,
         authLoading: true,
+        isLoading: true,
       });
 
       mockUseEvents.mockReturnValue({
@@ -576,7 +602,7 @@ describe('ProtectedRoute Component', () => {
   });
 
   describe('Props Configuration', () => {
-    it('defaults requireEvent to true when not provided', () => {
+    it('defaults requireEvent to false when not provided', () => {
       mockUseEvents.mockReturnValue({
         selectedEvent: null,
         events: [],
@@ -585,8 +611,8 @@ describe('ProtectedRoute Component', () => {
 
       renderWithProviders(<ProtectedRoute />);
 
-      // Should show no events error since requireEvent defaults to true
-      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      // Should render outlet since requireEvent defaults to false
+      expect(screen.getByTestId('outlet')).toBeInTheDocument();
     });
 
     it('respects requireEvent prop when set to false', () => {
@@ -607,6 +633,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute />);
@@ -619,6 +646,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
+        isLoading: false,
       });
 
       renderWithProviders(<ProtectedRoute loginPath="/auth/login" />);
@@ -633,6 +661,7 @@ describe('ProtectedRoute Component', () => {
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: true,
+        isLoading: true,
       });
 
       renderWithProviders(<ProtectedRoute />);

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -68,7 +68,7 @@
  * - LoadingSpinner - Loading state UI
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useSessionRestoration } from '../../hooks/useSessionRestoration';
@@ -77,6 +77,7 @@ import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { SessionRestorationLoader } from '../SessionRestorationLoader';
 import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
 import { logger } from '../../utils/core/logger';
+import { usePreventTabReload } from '../../hooks/usePreventTabReload';
 
 export interface ProtectedRouteProps {
   /**
@@ -131,16 +132,113 @@ export interface ProtectedRouteProps {
  * @returns React element with route protection logic
  */
 export function ProtectedRoute({
-  requireEvent = true,
+  requireEvent = false,
   allowSuperAdminBypass = false,
   noEventsFallback,
   loadingFallback,
   loginPath = '/login'
 }: ProtectedRouteProps) {
-  const { isAuthenticated, authLoading } = useUnifiedAuth();
-  const { selectedEvent, events, isLoading: eventLoading } = useEvents();
+  const { isAuthenticated, isLoading } = useUnifiedAuth();
+  
+  // Always call useEvents() - UnifiedAuthProvider always includes EventServiceProvider
+  // Only use the values when requireEvent is true
+  const eventsContext = useEvents();
+  const selectedEvent = requireEvent ? eventsContext.selectedEvent : null;
+  const events = requireEvent ? (eventsContext.events || []) : [];
+  const eventLoading = requireEvent ? (eventsContext.isLoading || false) : false;
+  
   const sessionRestoration = useSessionRestoration();
 
+  // Prevent full page reloads when switching tabs (handles bfcache and visibility changes)
+  usePreventTabReload({ enabled: true, gracePeriodMs: 2000 });
+
+  // Track if user was previously authenticated to prevent redirects during session refresh
+  const wasAuthenticatedRef = useRef(false);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const tabJustBecameVisibleRef = useRef(false);
+  
+  // Track authentication state to detect when user was previously logged in
+  useEffect(() => {
+    if (isAuthenticated) {
+      wasAuthenticatedRef.current = true;
+      setShouldRedirect(false);
+      tabJustBecameVisibleRef.current = false; // Clear visibility flag when authenticated
+    }
+  }, [isAuthenticated]);
+
+  // Handle tab visibility changes - prevent immediate redirects when tab becomes visible
+  // This prevents the page from refreshing when switching back to the tab
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let wasHidden = document.hidden;
+
+    const handleVisibilityChange = () => {
+      const isNowVisible = !document.hidden;
+      
+      // When tab becomes visible, immediately prevent redirects and give session refresh time
+      if (isNowVisible && wasHidden) {
+        // Tab just became visible - immediately prevent redirects
+        if (!isAuthenticated && wasAuthenticatedRef.current) {
+          tabJustBecameVisibleRef.current = true;
+          setShouldRedirect(false); // Immediately clear redirect flag
+          
+          // Clear any existing timeout
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+          
+          // Wait a bit to see if session refresh completes
+          timeoutId = setTimeout(() => {
+            // Only allow redirect if still not authenticated after delay
+            tabJustBecameVisibleRef.current = false;
+            // Use a function to get the latest state
+            setShouldRedirect((prev) => {
+              // Only set to true if we're still not authenticated
+              // This will be checked again in the render logic
+              return prev;
+            });
+          }, 2000); // 2 second grace period for session refresh
+        }
+      } else if (!isNowVisible) {
+        // Tab became hidden - clear the visibility flag
+        tabJustBecameVisibleRef.current = false;
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+      }
+      
+      wasHidden = !isNowVisible;
+    };
+
+    // Check initial state - if tab is visible and user appears logged out, give grace period
+    if (!document.hidden && !isAuthenticated && wasAuthenticatedRef.current) {
+      tabJustBecameVisibleRef.current = true;
+      setShouldRedirect(false);
+      timeoutId = setTimeout(() => {
+        tabJustBecameVisibleRef.current = false;
+      }, 2000);
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isAuthenticated]);
+
+  // Reset redirect flag when authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      setShouldRedirect(false);
+      tabJustBecameVisibleRef.current = false;
+    }
+  }, [isAuthenticated]);
+
   const isRestoringSession = useMemo(() => {
     return sessionRestoration.isRestoring &&
       !sessionRestoration.restorationComplete &&
@@ -165,7 +263,8 @@ export function ProtectedRoute({
   }
 
   // Show loading state while auth is being determined (but not organisation/event loading)
-  if (authLoading && !sessionRestoration.hasTimedOut) {
+  // Use isLoading (combined loading state) for consistency with simpler implementations
+  if (isLoading && !sessionRestoration.hasTimedOut) {
     return loadingFallback || (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
         <LoadingSpinner />
@@ -174,13 +273,55 @@ export function ProtectedRoute({
   }
 
   // Redirect to login if not authenticated
+  // Priority order:
+  // 1. If session restoration has timed out or errored → redirect immediately (even if loading)
+  // 2. If user was never authenticated → redirect immediately (even if loading)
+  // 3. If tab just became visible → show loading (prevent redirect during grace period)
+  // 4. If we've confirmed they should redirect (after visibility change grace period) → redirect
+  // 5. Otherwise, if loading → show loading spinner (session might be refreshing)
+  // 6. Otherwise → redirect (user is not authenticated and not loading)
   if (!isAuthenticated) {
+    // Session restoration timeout/error always redirects immediately
     if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
       logger.warn('ProtectedRoute', 'Session restoration failed, redirecting to login', {
         timedOut: sessionRestoration.hasTimedOut,
         error: sessionRestoration.restorationError?.message
       });
+      return <Navigate to={loginPath} replace />;
+    }
+
+    // User was never authenticated → redirect immediately
+    if (!wasAuthenticatedRef.current) {
+      return <Navigate to={loginPath} replace />;
+    }
+
+    // Tab just became visible - show loading to prevent redirect during grace period
+    // Also check document visibility state directly as a fallback
+    const isTabVisible = typeof document !== 'undefined' && !document.hidden;
+    if (tabJustBecameVisibleRef.current || (isTabVisible && wasAuthenticatedRef.current && isLoading)) {
+      return loadingFallback || (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+          <LoadingSpinner />
+        </div>
+      );
     }
+
+    // We've confirmed redirect after grace period → redirect
+    if (shouldRedirect) {
+      return <Navigate to={loginPath} replace />;
+    }
+
+    // User was authenticated before but now appears logged out
+    // Show loading state while we wait for session refresh (unless we're not loading)
+    if (isLoading) {
+      return loadingFallback || (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+          <LoadingSpinner />
+        </div>
+      );
+    }
+
+    // Not loading and not authenticated → redirect
     return <Navigate to={loginPath} replace />;
   }
 

package/src/components/index.ts

@@ -126,6 +126,14 @@ export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } fro
 export { Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';
 
+// DateTimeField exports
+export { DateTimeField } from './DateTimeField';
+export type { DateTimeFieldProps } from './DateTimeField';
+
+// DatePickerWithTimezone exports
+export { DatePickerWithTimezone } from './DatePickerWithTimezone';
+export type { DatePickerWithTimezoneProps } from './DatePickerWithTimezone';
+
 // Toast exports
 export {
   Toast,