@jmruthers/pace-core 0.5.91 → 0.5.93

package/src/components/ProtectedRoute/README.md

@@ -0,0 +1,164 @@
+# ProtectedRoute Component
+
+A route protection component that handles authentication and optional event selection without creating blocking issues.
+
+## Features
+
+- ✅ **Authentication checking** - Automatically redirects to login if user is not authenticated
+- ✅ **Session restoration** - Handles session restoration states automatically
+- ✅ **Event loading management** - Allows rendering during event loading (prevents UI blocking)
+- ✅ **Event selector visibility** - Allows rendering when events exist but none selected (so event selector in header is visible)
+- ✅ **Clear error states** - Shows helpful messages when no events are available
+- ✅ **Flexible configuration** - Optional event requirement, customizable fallbacks
+
+## Problem It Solves
+
+This component solves the **chicken-and-egg problem** where apps check for `selectedEvent` before rendering, which blocks the event selector dropdown (typically in `PaceAppLayout` header) from being visible. This creates a deadlock where users cannot select an event.
+
+**Before (Problem):**
+```tsx
+// ❌ This blocks rendering, preventing event selector from being visible
+function ProtectedRoute({ children }) {
+  const { selectedEvent } = useEvents();
+  
+  if (!selectedEvent) {
+    return <div>No event selected. Please select an event from the dropdown above.</div>;
+  }
+  
+  return <>{children}</>;
+}
+```
+
+**After (Solution):**
+```tsx
+// ✅ ProtectedRoute allows rendering when events exist but none selected
+// Event selector in header is now visible and usable
+import { ProtectedRoute } from '@jmruthers/pace-core';
+
+<Route element={<ProtectedRoute />}>
+  <Route path="/dashboard" element={<DashboardPage />} />
+</Route>
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { ProtectedRoute } from '@jmruthers/pace-core';
+import { Routes, Route } from 'react-router-dom';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<ProtectedRoute />}>
+        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/events" element={<EventsPage />} />
+      </Route>
+    </Routes>
+  );
+}
+```
+
+### Without Event Requirement
+
+```tsx
+<Route element={<ProtectedRoute requireEvent={false} />}>
+  <Route path="/settings" element={<SettingsPage />} />
+</Route>
+```
+
+### Custom Fallbacks
+
+```tsx
+<Route element={
+  <ProtectedRoute
+    requireEvent={true}
+    loginPath="/login"
+    loadingFallback={<CustomLoader />}
+    noEventsFallback={
+      <div>
+        <h2>No Events Available</h2>
+        <p>Contact your administrator for access.</p>
+      </div>
+    }
+  />
+}>
+  <Route path="/dashboard" element={<DashboardPage />} />
+</Route>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `requireEvent` | `boolean` | `true` | Whether an event is required for routes inside this component |
+| `allowSuperAdminBypass` | `boolean` | `false` | Whether super admins can bypass event requirement (deprecated) |
+| `noEventsFallback` | `ReactNode` | - | Custom component to render when no events are available |
+| `loadingFallback` | `ReactNode` | - | Custom component to render while events are loading |
+| `loginPath` | `string` | `'/login'` | Login redirect path when user is not authenticated |
+
+## Behavior
+
+The component follows this logic flow:
+
+1. **Session Restoration** - Shows loader during session restoration
+2. **Authentication Check** - Redirects to login if not authenticated
+3. **Event Requirement Check** - If `requireEvent={false}`, allows rendering
+4. **Event Loading** - Allows rendering during event loading (prevents UI blocking)
+5. **No Events Available** - Shows error message if no events exist
+6. **Events Exist, None Selected** - **KEY FIX**: Allows rendering so event selector is visible
+7. **Event Selected** - Allows rendering normally
+
+## Integration with PaceAppLayout
+
+The `ProtectedRoute` component is designed to work seamlessly with `PaceAppLayout`, which contains the event selector dropdown in its header:
+
+```tsx
+<Route element={<ProtectedRoute />}>
+  <Route element={<PaceAppLayout appName="My App" />}>
+    <Route path="/" element={<DashboardPage />} />
+  </Route>
+</Route>
+```
+
+When events exist but none is selected, `ProtectedRoute` allows rendering, making the `PaceAppLayout` header (and its event selector) visible. Users can then:
+- See the event selector dropdown
+- Manually select an event
+- Or let auto-selection work when events finish loading
+
+## Migration from Custom ProtectedRoute
+
+If you have a custom `ProtectedRoute` that blocks rendering when no event is selected:
+
+**Before:**
+```tsx
+function ProtectedRoute({ children }) {
+  const { isAuthenticated } = useUnifiedAuth();
+  const { selectedEvent } = useEvents();
+  
+  if (!isAuthenticated) return <Navigate to="/login" />;
+  if (!selectedEvent) return <div>Please select an event</div>; // ❌ Blocks UI
+  
+  return <>{children}</>;
+}
+```
+
+**After:**
+```tsx
+import { ProtectedRoute } from '@jmruthers/pace-core';
+
+// Simply replace your custom component
+<Route element={<ProtectedRoute />}>
+  {/* Your routes */}
+</Route>
+```
+
+## Related Documentation
+
+- [Authentication Implementation Guide](../../../../docs/implementation-guides/authentication.md#protected-routes)
+- [Common Patterns](../../../../docs/best-practices/common-patterns.md#protected-routes)
+- [API Reference](../../../../docs/api-reference/components.md#protectedroute)
+- [Component Props Interface](../../../../docs/api/interfaces/ProtectedRouteProps.md)
+

package/src/components/ProtectedRoute/index.ts

@@ -0,0 +1,3 @@
+export { ProtectedRoute } from './ProtectedRoute';
+export type { ProtectedRouteProps } from './ProtectedRoute';
+

package/src/components/PublicLayout/EventLogo.tsx

@@ -223,11 +223,14 @@ function EventLogoPublic({
   }
 
   // Render the actual logo
+  // Apply object-contain to maintain aspect ratio and rounded to match fallback styling
+  const imageClasses = `${sizeClass} object-contain rounded ${className}`.trim();
+  
   return (
     <img
       src={logoUrl}
       alt={`${eventName} logo`}
-      className={`${sizeClass} ${className}`.trim()}
+      className={imageClasses}
       onError={(e) => {
         // If image fails to load, hide it and show fallback
         const target = e.target as HTMLImageElement;
@@ -357,11 +360,14 @@ function EventLogoAuthenticated({
   }
 
   // Render the actual logo
+  // Apply object-contain to maintain aspect ratio and rounded to match fallback styling
+  const imageClasses = `${sizeClass} object-contain rounded ${className}`.trim();
+  
   return (
     <img
       src={logoUrl}
       alt={`${eventName} logo`}
-      className={`${sizeClass} ${className}`.trim()}
+      className={imageClasses}
       onError={(e) => {
         // If image fails to load, hide it and show fallback
         const target = e.target as HTMLImageElement;

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -106,16 +106,11 @@ export function PublicPageHeader({
           {showAppLogo && (
             <div className="flex-shrink-0">
               {customAppLogo || (
-                <div className="flex items-center">
-                  <img
-                    className="h-8 w-auto"
-                    src={`/${appName.toLowerCase()}_logo_wide.svg`}
-                    alt={appName}
-                  />
-                  <span className="ml-2 text-lg font-semibold text-gray-900">
-                    {appName}
-                  </span>
-                </div>
+                <img
+                  className="h-8 w-8 object-contain"
+                  src={`/${appName.toLowerCase()}_logo_square.svg`}
+                  alt={appName}
+                />
               )}
             </div>
           )}
@@ -128,8 +123,8 @@ export function PublicPageHeader({
                   eventId={event.event_id}
                   eventName={event.event_name}
                   organisationId={event.organisation_id}
-                  size="md"
-                  className="h-12 w-12"
+                  size="lg"
+                  validateImage={false}
                 />
               )}
             </div>

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

@@ -104,8 +104,10 @@ describe('[component] PublicPageHeader', () => {
         <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
       );
 
-      expect(screen.getByAltText('Test App')).toBeInTheDocument();
-      expect(screen.getByText('Test App')).toBeInTheDocument();
+      const appLogo = screen.getByAltText('Test App');
+      expect(appLogo).toBeInTheDocument();
+      // App name text was removed - only logo image is displayed
+      expect(appLogo).toHaveAttribute('src', '/test app_logo_square.svg');
     });
 
     it('hides app logo when showAppLogo is false', () => {
@@ -179,7 +181,8 @@ describe('[component] PublicPageHeader', () => {
       expect(eventLogo).toHaveAttribute('data-event-id', 'event-123');
       expect(eventLogo).toHaveAttribute('data-event-name', 'Test Event');
       expect(eventLogo).toHaveAttribute('data-organisation-id', 'org-123');
-      expect(eventLogo).toHaveAttribute('data-size', 'md');
+      // Size was changed from 'md' to 'lg' for better visibility
+      expect(eventLogo).toHaveAttribute('data-size', 'lg');
     });
   });
 

package/src/components/index.ts

@@ -180,9 +180,12 @@ export type { FooterProps } from './Footer';
 export * from './PublicLayout';
 
 // ============================================================================
-// SECURITY COMPONENTS (none currently exported)
+// SECURITY COMPONENTS
 // ============================================================================
 
+export { ProtectedRoute } from './ProtectedRoute';
+export type { ProtectedRouteProps } from './ProtectedRoute';
+
 // ============================================================================
 // NAVIGATION COMPONENTS
 // ============================================================================

package/src/index.ts

@@ -166,6 +166,9 @@ export type { PaceAppLayoutProps } from './components/PaceAppLayout/PaceAppLayou
 export { PaceLoginPage } from './components/PaceLoginPage/PaceLoginPage';
 export type { PaceLoginPageProps } from './components/PaceLoginPage/PaceLoginPage';
 
+export { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute';
+export type { ProtectedRouteProps } from './components/ProtectedRoute/ProtectedRoute';
+
 // UTILITY COMPONENTS
 export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
 export { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner';

package/src/providers/AuthProvider.simplified.tsx

@@ -55,8 +55,10 @@ export interface Event {
   id: string;
   event_id: string;
   name: string;
+  event_name?: string;
   organisation_id: UUID;
-  start_date?: string;
+  event_date?: string; // Date from database for sorting
+  start_date?: string; // Alias for event_date
   end_date?: string;
   status?: string;
   settings?: Record<string, any>;
@@ -347,13 +349,59 @@ export function AuthProvider({
         const orgEvents = (data || []).filter(e => e.organisation_id === selectedOrganisation.id);
         setEvents(orgEvents);
 
-        // Auto-select first event if none selected
+        // Auto-select next event in the future by date if none selected
         if (!selectedEvent && orgEvents.length > 0) {
           const savedEventId = persistState ? localStorage.getItem(`pace_${appName}_event`) : null;
-          const eventToSelect = savedEventId
-            ? orgEvents.find(e => e.event_id === savedEventId) || orgEvents[0]
-            : orgEvents[0];
-          setSelectedEvent(eventToSelect);
+          let eventToSelect: Event | null = null;
+          
+          if (savedEventId) {
+            // Try to restore persisted event
+            eventToSelect = orgEvents.find(e => e.event_id === savedEventId) || null;
+          }
+          
+          // If no persisted event, select the next event in the future by date
+          if (!eventToSelect) {
+            const now = new Date();
+            const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+            const futureEvents = orgEvents
+              .filter((e): e is Event & { event_date: string } => {
+                if (!e.event_date) return false;
+                const eventDate = new Date(e.event_date);
+                const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
+                return startOfEventDate >= startOfToday;
+              })
+              .sort((a, b) => {
+                const dateA = new Date(a.event_date);
+                const dateB = new Date(b.event_date);
+                return dateA.getTime() - dateB.getTime();
+              });
+            
+            eventToSelect = futureEvents.length > 0 ? futureEvents[0] : null;
+          }
+          
+          // Fallback to most recent past event if no future events found
+          if (!eventToSelect && orgEvents.length > 0) {
+            const now = new Date();
+            const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+            const pastEvents = orgEvents
+              .filter((e): e is Event & { event_date: string } => {
+                if (!e.event_date) return false;
+                const eventDate = new Date(e.event_date);
+                const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
+                return startOfEventDate < startOfToday;
+              })
+              .sort((a, b) => {
+                const dateA = new Date(a.event_date);
+                const dateB = new Date(b.event_date);
+                return dateB.getTime() - dateA.getTime(); // Descending order (most recent first)
+              });
+            
+            eventToSelect = pastEvents.length > 0 ? pastEvents[0] : orgEvents[0];
+          }
+          
+          if (eventToSelect) {
+            setSelectedEvent(eventToSelect);
+          }
         }
       } catch (error) {
         console.error('[AuthProvider] Failed to load events:', error);
@@ -759,14 +807,60 @@ export function AuthProvider({
       const orgEvents = (data || []).filter(e => e.organisation_id === selectedOrganisation.id);
       setEvents(orgEvents);
       
-      // Auto-select first event if none selected
-      if (!selectedEvent && orgEvents.length > 0) {
-        const savedEventId = persistState ? localStorage.getItem(`pace_${appName}_event`) : null;
-        const eventToSelect = savedEventId
-          ? orgEvents.find(e => e.event_id === savedEventId) || orgEvents[0]
-          : orgEvents[0];
-        setSelectedEvent(eventToSelect);
-      }
+        // Auto-select next event in the future by date if none selected
+        if (!selectedEvent && orgEvents.length > 0) {
+          const savedEventId = persistState ? localStorage.getItem(`pace_${appName}_event`) : null;
+          let eventToSelect: Event | null = null;
+          
+          if (savedEventId) {
+            // Try to restore persisted event
+            eventToSelect = orgEvents.find(e => e.event_id === savedEventId) || null;
+          }
+          
+          // If no persisted event, select the next event in the future by date
+          if (!eventToSelect) {
+            const now = new Date();
+            const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+            const futureEvents = orgEvents
+              .filter((e): e is Event & { event_date: string } => {
+                if (!e.event_date) return false;
+                const eventDate = new Date(e.event_date);
+                const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
+                return startOfEventDate >= startOfToday;
+              })
+              .sort((a, b) => {
+                const dateA = new Date(a.event_date);
+                const dateB = new Date(b.event_date);
+                return dateA.getTime() - dateB.getTime();
+              });
+            
+            eventToSelect = futureEvents.length > 0 ? futureEvents[0] : null;
+          }
+          
+          // Fallback to most recent past event if no future events found
+          if (!eventToSelect && orgEvents.length > 0) {
+            const now = new Date();
+            const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+            const pastEvents = orgEvents
+              .filter((e): e is Event & { event_date: string } => {
+                if (!e.event_date) return false;
+                const eventDate = new Date(e.event_date);
+                const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
+                return startOfEventDate < startOfToday;
+              })
+              .sort((a, b) => {
+                const dateA = new Date(a.event_date);
+                const dateB = new Date(b.event_date);
+                return dateB.getTime() - dateA.getTime(); // Descending order (most recent first)
+              });
+            
+            eventToSelect = pastEvents.length > 0 ? pastEvents[0] : orgEvents[0];
+          }
+          
+          if (eventToSelect) {
+            setSelectedEvent(eventToSelect);
+          }
+        }
     } catch (error) {
       console.error('[AuthProvider] Failed to refresh events:', error);
       setEventError(error as Error);

package/src/services/EventService.ts

@@ -409,11 +409,16 @@ export class EventService extends BaseService implements IEventService {
       return null;
     }
 
+    // Get start of today (midnight) to compare dates only (ignore time)
     const now = new Date();
+    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    
     const futureEvents = eventsToUse.filter(event => {
       if (!event.event_date) return false;
       const eventDate = new Date(event.event_date);
-      return eventDate >= now;
+      // Compare by date only (start of day), not by time
+      const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
+      return startOfEventDate >= startOfToday;
     });
 
     if (futureEvents.length === 0) {