@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/PaceLoginPage/PaceLoginPage.test.tsx

@@ -15,6 +15,7 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { Logger, LogLevel } from '../../utils/core/logger';
 import { clearPalette } from '../../theming/runtime';
 import { EventServiceContext } from '../../providers/services/EventServiceProvider';
+import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
 
 // Mock React Router
 const mockNavigate = vi.fn();
@@ -47,36 +48,66 @@ const mockSupabase = {
 // Mock the UnifiedAuthProvider
 const mockAuthContext = {
   user: null as User | null,
+  session: null,
   isAuthenticated: false,
   isLoading: false,
+  authLoading: false,
   authError: null as Error | null,
+  error: null,
   hasRole: vi.fn(),
   getUserRole: vi.fn(),
   signIn: vi.fn(),
   signOut: vi.fn(),
+  signUp: vi.fn(),
+  resetPassword: vi.fn(),
+  updatePassword: vi.fn(),
   refreshSession: vi.fn(),
   supabase: mockSupabase,
   appName: 'Test App',
+  appId: undefined,
   hasErrors: false,
-  // RBAC context
-  globalRole: null,
-  organisationRole: null,
-  eventAppRole: null,
-  rbacLoading: false,
-  rbacError: null,
+  // Organisation context
+  selectedOrganisation: null,
+  selectedOrganisationId: null,
+  organisations: [],
+  userMemberships: [],
+  organisationLoading: false,
+  organisationError: null,
+  hasValidOrganisationContext: false,
+  isContextReady: false,
+  switchOrganisation: vi.fn(),
+  validateOrganisationAccess: vi.fn(),
+  refreshOrganisations: vi.fn(),
+  ensureOrganisationContext: vi.fn(),
+  isOrganisationSecure: vi.fn(),
+  getPrimaryOrganisation: vi.fn(),
+  // Event context
+  events: [],
+  selectedEvent: null,
+  selectedEventId: null,
+  eventLoading: false,
+  eventError: null,
+  setSelectedEvent: vi.fn(),
+  refreshEvents: vi.fn(),
   // Inactivity context
   isIdle: false,
-  timeUntilIdle: 0,
-  resetInactivityTimer: vi.fn(),
-  inactivityLoading: false,
-  inactivityError: null,
+  timeRemaining: 0,
+  showWarning: false,
+  showInactivityWarning: false,
+  inactivityTimeRemaining: 0,
+  isTracking: false,
+  resetActivity: vi.fn(),
+  startTracking: vi.fn(),
+  stopTracking: vi.fn(),
+  handleIdleLogout: vi.fn(),
+  handleStaySignedIn: vi.fn(),
+  handleSignOutNow: vi.fn(),
+  // Session restoration
+  sessionRestoration: { state: 'idle', error: null },
+  sessionRestorationTimedOut: false,
+  sessionRestorationTimeoutMs: 5000,
 };
 
-// Mock the useUnifiedAuth hook - needs to match the actual import path
-vi.mock('../../providers', () => ({
-  useUnifiedAuth: () => mockAuthContext,
-  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
 
 vi.mock('../../theming/runtime', () => ({
   clearPalette: vi.fn(),
@@ -105,6 +136,16 @@ const resetAuthContext = () => {
   mockAuthContext.supabase = mockSupabase;
 };
 
+// Helper to render with UnifiedAuthContext
+const renderWithAuthContext = (ui: React.ReactElement, options: { withRouter?: boolean } = {}) => {
+  return renderWithProviders(
+    <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+      {ui}
+    </UnifiedAuthContext.Provider>,
+    options
+  );
+};
+
 describe('PaceLoginPage Component', () => {
   let originalMode: string | undefined;
 
@@ -141,7 +182,7 @@ describe('PaceLoginPage Component', () => {
 
   describe('Side Effects', () => {
     it('clears theme palette on mount and when login route is active', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
 
       expect(clearPalette).toHaveBeenCalled();
     });
@@ -151,9 +192,11 @@ describe('PaceLoginPage Component', () => {
       window.history.pushState({}, '', '/login');
 
       renderWithProviders(
-        <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
-          <PaceLoginPage appName="Test App" />
-        </EventServiceContext.Provider>
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
+            <PaceLoginPage appName="Test App" />
+          </EventServiceContext.Provider>
+        </UnifiedAuthContext.Provider>
       );
 
       await waitFor(() => {
@@ -165,19 +208,19 @@ describe('PaceLoginPage Component', () => {
   // Basic rendering tests
   describe('Rendering', () => {
     it('renders with default props', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
 
     it('renders with custom app name', () => {
-      renderWithProviders(<PaceLoginPage appName="My Application" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="My Application" />, { withRouter: false });
       
       expect(screen.getByLabelText('My Application Login Page')).toBeInTheDocument();
     });
 
     it('renders with custom redirect path', () => {
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage 
           appName="Test App" 
           onSuccessRedirectPath="/dashboard" 
@@ -188,7 +231,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders app logo with correct attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toBeInTheDocument();
@@ -197,13 +240,13 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('passes correct props to LoginForm', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm receives the app name
       expect(screen.getByText('Sign in to Test App')).toBeInTheDocument();
@@ -215,7 +258,7 @@ describe('PaceLoginPage Component', () => {
     it('handles loading state', () => {
       mockAuthContext.isLoading = true;
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -225,7 +268,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -233,7 +276,7 @@ describe('PaceLoginPage Component', () => {
     it('handles authentication error', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByText('Authentication failed')).toBeInTheDocument();
       expect(screen.getByText('Authentication failed')).toHaveClass('text-destructive');
@@ -243,7 +286,7 @@ describe('PaceLoginPage Component', () => {
       const errorMessage = 'Invalid credentials';
       mockAuthContext.authError = new Error(errorMessage);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText(errorMessage);
       expect(errorElement).toBeInTheDocument();
@@ -260,7 +303,7 @@ describe('PaceLoginPage Component', () => {
       (authErr as any).code = 'session_missing';
       mockAuthContext.authError = authErr;
 
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
 
       expect(screen.queryByText(/Auth session missing/i)).toBeNull();
     });
@@ -278,11 +321,13 @@ describe('PaceLoginPage Component', () => {
       vi.mocked(isSuperAdmin).mockResolvedValue(true);
       
       renderWithProviders(
-        <PaceLoginPage 
-          appName="Test App" 
-          onSuccessRedirectPath="/admin"
-          requireAppAccess={true}
-        />
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <PaceLoginPage 
+            appName="Test App" 
+            onSuccessRedirectPath="/admin"
+            requireAppAccess={true}
+          />
+        </UnifiedAuthContext.Provider>
       );
       
       await waitFor(() => {
@@ -295,7 +340,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       await waitFor(() => {
         expect(mockNavigate).not.toHaveBeenCalled();
@@ -319,10 +364,12 @@ describe('PaceLoginPage Component', () => {
       console.error = vi.fn();
       
       renderWithProviders(
-        <PaceLoginPage 
-          appName="Test App" 
-          requireAppAccess={true}
-        />
+        <UnifiedAuthContext.Provider value={mockAuthContext as any}>
+          <PaceLoginPage 
+            appName="Test App" 
+            requireAppAccess={true}
+          />
+        </UnifiedAuthContext.Provider>
       );
       
       await waitFor(() => {
@@ -340,7 +387,7 @@ describe('PaceLoginPage Component', () => {
       const user = userEvent.setup();
       mockAuthContext.signIn.mockResolvedValue({ error: null });
       
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage 
           appName="Test App" 
           onSuccessRedirectPath="/dashboard" 
@@ -369,7 +416,7 @@ describe('PaceLoginPage Component', () => {
       const signInError = new Error('Invalid credentials');
       mockAuthContext.signIn.mockResolvedValue({ error: signInError });
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -399,7 +446,7 @@ describe('PaceLoginPage Component', () => {
       
       const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess={false} />, 
         { withRouter: false }
       );
@@ -430,7 +477,7 @@ describe('PaceLoginPage Component', () => {
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -459,14 +506,14 @@ describe('PaceLoginPage Component', () => {
   // Error handling tests
   describe('Error Handling', () => {
     it('handles missing app name gracefully', () => {
-      renderWithProviders(<PaceLoginPage appName="" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="" />, { withRouter: false });
       
       // Check that the component renders even with empty app name
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('handles undefined redirect path', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -478,7 +525,7 @@ describe('PaceLoginPage Component', () => {
       
       const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -502,14 +549,14 @@ describe('PaceLoginPage Component', () => {
   // Accessibility tests
   describe('Accessibility', () => {
     it('has proper ARIA attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveAttribute('aria-label', 'Test App Login Page');
     });
 
     it('has proper semantic structure', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
       expect(screen.getByRole('img')).toBeInTheDocument();
@@ -517,7 +564,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('has accessible form elements', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Email')).toBeInTheDocument();
       expect(screen.getByLabelText('Password')).toBeInTheDocument();
@@ -527,7 +574,7 @@ describe('PaceLoginPage Component', () => {
     it('announces errors to screen readers', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText('Authentication failed');
       expect(errorElement).toBeInTheDocument();
@@ -537,7 +584,7 @@ describe('PaceLoginPage Component', () => {
   // Integration tests
   describe('Integration', () => {
     it('integrates with LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm is rendered with correct props
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
@@ -552,7 +599,7 @@ describe('PaceLoginPage Component', () => {
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -574,21 +621,21 @@ describe('PaceLoginPage Component', () => {
   // Layout and styling tests
   describe('Layout and Styling', () => {
     it('has correct main container classes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveClass('min-h-screen', 'grid', 'mx-auto', 'w-fit', 'content-center', 'justify-items-center', 'gap-y-8');
     });
 
     it('renders logo with correct styling', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toHaveClass('h-48');
     });
 
     it('renders LoginForm with correct width class', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const form = screen.getByTestId('login-form');
       expect(form.closest('.w-md')).toBeInTheDocument();
@@ -600,7 +647,7 @@ describe('PaceLoginPage Component', () => {
     it('handles empty form submission', async () => {
       const user = userEvent.setup();
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const submitButton = screen.getByRole('button', { name: /sign in/i });
       await user.click(submitButton);
@@ -612,7 +659,7 @@ describe('PaceLoginPage Component', () => {
     it('handles very long app names', () => {
       const longAppName = 'A'.repeat(100);
       
-      renderWithProviders(<PaceLoginPage appName={longAppName} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName={longAppName} />, { withRouter: false });
       
       expect(screen.getByLabelText(`${longAppName} Login Page`)).toBeInTheDocument();
     });
@@ -620,7 +667,7 @@ describe('PaceLoginPage Component', () => {
     it('handles special characters in app name', () => {
       const specialAppName = 'Test & Co. (Ltd.)';
 
-      renderWithProviders(<PaceLoginPage appName={specialAppName} />, { withRouter: false });
+      renderWithAuthContext(<PaceLoginPage appName={specialAppName} />, { withRouter: false });
 
       expect(screen.getByLabelText(`${specialAppName} Login Page`)).toBeInTheDocument();
     });
@@ -655,7 +702,7 @@ describe('PaceLoginPage Component', () => {
       };
       mockAuthContext.supabase = missingAppSupabase as any;
 
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess />
       );
 
@@ -727,7 +774,7 @@ describe('PaceLoginPage Component', () => {
 
       mockAuthContext.supabase = supabaseWithNoOrg as any;
 
-      renderWithProviders(
+      renderWithAuthContext(
         <PaceLoginPage appName="Test App" requireAppAccess />
       );
 

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -123,7 +123,7 @@
 
 import React, { useEffect, useState, useContext } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers';
+import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
 import { isSuperAdmin } from '../../rbac/api';
 import { LoginForm } from '../LoginForm';
 import { Button, Input, Label } from '..';
@@ -172,8 +172,11 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   onSuccessRedirectPath = '/',
   requireAppAccess = false
 }) => {
-  const { signIn, isAuthenticated, isLoading, authError, user, supabase } = useUnifiedAuth();
-  
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
+  // Use useContext directly instead of useUnifiedAuth() to avoid throwing
+  // if context isn't available yet (e.g., during initial render)
+  const authContext = useContext(UnifiedAuthContext);
   const navigate = useNavigate();
   const location = useLocation();
   const [isSigningIn, setIsSigningIn] = useState(false);
@@ -185,6 +188,15 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   const eventServiceContext = useContext(EventServiceContext);
   const eventService = eventServiceContext?.eventService || null;
 
+  // Destructure auth context values with defaults to handle missing context
+  // These are used in useEffect dependency arrays, so they must always be defined
+  const signIn = authContext?.signIn || (async () => ({ error: null }));
+  const isAuthenticated = authContext?.isAuthenticated ?? false;
+  const isLoading = authContext?.isLoading ?? false;
+  const authError = authContext?.authError ?? null;
+  const user = authContext?.user ?? null;
+  const supabase = authContext?.supabase ?? null;
+
   // Clear any active event theme when login page mounts
   // This ensures the login screen always uses default colors
   useEffect(() => {
@@ -356,6 +368,18 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
     }
   };
 
+  // Handle missing auth context - show loading state
+  // This check happens after all hooks are called
+  if (!authContext) {
+    return (
+      <main className="min-h-screen flex items-center justify-center">
+        <section className="text-center">
+          <p>Loading...</p>
+        </section>
+      </main>
+    );
+  }
+
   return (
     <main className="min-h-screen grid mx-auto w-fit content-center justify-items-center gap-y-8" aria-label={`${appName} Login Page`}>
       <img

package/src/components/Progress/Progress.tsx

@@ -97,10 +97,8 @@ const Progress = React.forwardRef<
     <progress
       ref={ref}
       className={cn(
-        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-primary',
-        isIndeterminate
-          ? 'bg-gradient-to-r from-primary/10 via-primary/90 to-primary/10'
-          : 'bg-primary/20',
+        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-main-800',
+        !isIndeterminate && 'bg-sec-600/50',
         className
       )}
       {...(isIndeterminate ? {} : { value })}

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -260,9 +260,9 @@ export function ProtectedRoute({
   // 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' }}>
+      <main className="grid place-items-center size-full">
         <LoadingSpinner />
-      </div>
+      </main>
     );
   }
 
@@ -294,9 +294,9 @@ export function ProtectedRoute({
     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' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -309,9 +309,9 @@ export function ProtectedRoute({
     // 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' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -333,14 +333,14 @@ export function ProtectedRoute({
   // If no events are available, show error message
   if (!events || events.length === 0) {
     return noEventsFallback || (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', padding: '2rem' }}>
+      <main className="grid place-items-center text-center min-h-screen p-8">
         <Alert variant="destructive" className="max-w-md">
           <AlertTitle>No Events Available</AlertTitle>
           <AlertDescription>
             You don't have access to any events. Please contact your administrator if you believe this is an error.
           </AlertDescription>
         </Alert>
-      </div>
+      </main>
     );
   }