@jmruthers/pace-core 0.5.90 → 0.5.92

package/src/components/Header/Header.tsx

@@ -9,6 +9,7 @@
  *
  * Features:
  * - Customizable logo (URL or component)
+ * - Clickable logo that routes to dashboard (configurable)
  * - Navigation menu integration
  * - User menu with authentication
  * - Event selector for multi-tenant applications
@@ -20,10 +21,11 @@
  *
  * @example
  * ```tsx
- * // Basic header with logo and user menu
+ * // Basic header with logo and user menu (logo routes to /dashboard by default)
  * <Header
  *   logoUrl="/logo.svg"
  *   logoAlt="My App"
+ *   logoHref="/dashboard"
  *   user={currentUser}
  *   onSignOut={handleSignOut}
  * />
@@ -31,6 +33,7 @@
  * // Header with navigation and custom actions
  * <Header
  *   logo={<CustomLogo />}
+ *   logoHref="/home"
  *   navItems={[
  *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
  *     { id: 'users', label: 'Users', href: '/users' },
@@ -50,6 +53,7 @@
  * // Header without event selector
  * <Header
  *   logoUrl="/logo.svg"
+ *   logoHref="/dashboard"
  *   showEventSelector={false}
  *   user={currentUser}
  *   onSignOut={handleSignOut}
@@ -58,6 +62,7 @@
  * // Header with custom user menu
  * <Header
  *   logoUrl="/logo.svg"
+ *   logoHref="/home"
  *   userMenu={<CustomUserMenu user={currentUser} />}
  *   showUserMenu={true}
  * />
@@ -81,6 +86,7 @@
  */
 
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
 import { cn } from '../../utils/cn';
 import { EventSelector } from '../EventSelector';
@@ -120,6 +126,8 @@ export interface HeaderProps {
   currentPath?: string;
   /** Custom navigation handler */
   onNavigate?: (item: NavigationItem) => void;
+  /** URL to navigate to when logo is clicked (e.g., '/dashboard') */
+  logoHref?: string;
 }
 
 /**
@@ -131,6 +139,7 @@ export interface HeaderProps {
  * 
  * Features:
  * - Customizable logo (URL or custom component)
+ * - Clickable logo that automatically routes to dashboard (configurable via logoHref)
  * - Navigation menu integration with highlighting
  * - User menu with authentication and password management
  * - Event selector for multi-tenant applications
@@ -139,9 +148,9 @@ export interface HeaderProps {
  * - Accessibility compliant with proper ARIA attributes
  * - Backdrop blur effects for modern UI
  * - Flexible layout with configurable sections
- * 
+ *
  * @example
- * Basic header with logo and navigation:
+ * Basic header with logo and navigation (logo routes to /dashboard when clicked):
  * ```tsx
  * import { Header } from '@jmruthers/pace-core';
  * import { useNavigate, useLocation } from 'react-router-dom';
@@ -160,6 +169,7 @@ export interface HeaderProps {
  *     <Header
  *       logoUrl="/company-logo.svg"
  *       logoAlt="My Company"
+ *       logoHref="/dashboard"
  *       navItems={navItems}
  *       currentPath={location.pathname}
  *       onNavigate={(item) => navigate(item.href)}
@@ -230,7 +240,8 @@ export function Header({
   showEventSelector = true,
   showUserMenu = true,
   currentPath,
-  onNavigate
+  onNavigate,
+  logoHref
 }: HeaderProps) {
   return (
     <header className={cn(
@@ -240,19 +251,45 @@ export function Header({
       <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto grid grid-cols-[auto_auto_1fr_auto] gap-4 h-full items-center">
           {/* Logo */}
           {logo ? (
-            logo
+            logoHref ? (
+              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                {logo}
+              </Link>
+            ) : (
+              logo
+            )
           ) : logoUrl ? (
-            <img
-              src={logoUrl}
-              alt={logoAlt || 'Logo'}
-              className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
-            />
+            logoHref ? (
+              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                <img
+                  src={logoUrl}
+                  alt={logoAlt || 'Logo'}
+                  className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
+                />
+              </Link>
+            ) : (
+              <img
+                src={logoUrl}
+                alt={logoAlt || 'Logo'}
+                className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
+              />
+            )
           ) : (
-            <img
-              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-              alt={logoAlt || 'Logo'}
-              className="h-8 w-8 shadow-md"
-            />
+            logoHref ? (
+              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+                <img
+                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                  alt={logoAlt || 'Logo'}
+                  className="h-8 w-8 shadow-md"
+                />
+              </Link>
+            ) : (
+              <img
+                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                alt={logoAlt || 'Logo'}
+                className="h-8 w-8 shadow-md"
+              />
+            )
           )}
 
           {/* Navigation Menu */}

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -125,6 +125,8 @@ export interface PaceAppLayoutProps {
   headerActions?: React.ReactNode;
   /** Custom logo component (overrides default logo) */
   customLogo?: React.ReactNode;
+  /** URL to navigate to when logo is clicked (defaults to '/dashboard') */
+  logoHref?: string;
   /** Custom user menu component (overrides default user menu) */
   customUserMenu?: React.ReactNode;
   /** Custom className for the header */
@@ -323,6 +325,7 @@ export function PaceAppLayout({
   showEventSelector,
   headerActions,
   customLogo,
+  logoHref = '/dashboard',
   customUserMenu,
   headerClassName,
   showUserMenu = true,
@@ -709,6 +712,7 @@ export function PaceAppLayout({
         logo={customLogo || undefined}
         logoUrl={!customLogo ? `/${appName.toLowerCase()}_logo_wide.svg` : undefined}
         logoAlt={`${appName} Logo`}
+        logoHref={logoHref}
         navItems={filteredMenuItems}
         actions={headerActions}
         userMenu={customUserMenu}

package/src/components/PaceAppLayout/README.md

@@ -18,6 +18,7 @@ A comprehensive application layout component that provides a consistent structur
 - Branding support
 - **Event selector control** - can be hidden for non-event applications
 - **Header customization** - custom logo, actions, user menu, and styling
+- **Clickable logo** - logo automatically routes to dashboard page (configurable)
 
 ## Props
 
@@ -28,6 +29,7 @@ A comprehensive application layout component that provides a consistent structur
 | `showEventSelector` | `boolean` | `true` | Show/hide event 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') |
 | `customUserMenu` | `React.ReactNode` | optional | Custom user menu component (overrides default user menu) |
 | `headerClassName` | `string` | optional | Custom className for the header |
 | `showUserMenu` | `boolean` | `true` | Show/hide user menu |
@@ -101,6 +103,7 @@ function App() {
             appName="My Application"
             navItems={navItems}
             customLogo={<CustomLogo />}
+            logoHref="/dashboard"  // Logo clicks navigate to dashboard
             headerActions={headerActions}
             customUserMenu={<CustomUserMenu />}
             headerClassName="custom-header-styles"
@@ -116,6 +119,27 @@ function App() {
 }
 ```
 
+### Logo Navigation
+
+The logo in the header is automatically clickable and routes to the dashboard page. You can customize the destination:
+
+```tsx
+// Default: routes to '/dashboard'
+<PaceAppLayout appName="My App" />
+
+// Custom route: routes to '/home'
+<PaceAppLayout 
+  appName="My App" 
+  logoHref="/home"
+/>
+
+// Event-specific dashboard: routes to current event's dashboard
+<PaceAppLayout 
+  appName="My App" 
+  logoHref={`/events/${currentEventId}/dashboard`}
+/>
+```
+
 ### App Layout Without Event Selector (Perfect for TEAM-style apps)
 
 ```tsx
@@ -226,6 +250,12 @@ function App() {
 - Apps needing custom header styling
 - Applications with context-specific header content
 
+### Logo Navigation
+- The logo automatically routes to the dashboard when clicked (default: `/dashboard`)
+- Customize the destination with the `logoHref` prop
+- Works with both default logo and custom logo components
+- Provides visual feedback with hover opacity transition
+
 ## Integration with UnifiedAuthProvider
 
 The PaceAppLayout works seamlessly with the UnifiedAuthProvider. When `showEventSelector={false}`, the provider will:

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -0,0 +1,224 @@
+/**
+ * @file Protected Route Component
+ * @package @jmruthers/pace-core
+ * @module Components/ProtectedRoute
+ * @since 0.6.0
+ *
+ * A route protection component that handles authentication and optional event selection
+ * without creating a chicken-and-egg problem where users cannot see the event selector.
+ *
+ * Features:
+ * - Authentication checking with redirect to login
+ * - Session restoration handling
+ * - Event loading state management
+ * - Smart event selection logic (allows rendering when events exist but none selected)
+ * - Optional event requirement (can be disabled for apps that don't need events)
+ * - Super admin bypass support
+ * - Clear error states for no events available
+ *
+ * @example
+ * Basic protected route:
+ * ```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>
+ *     </Routes>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Protected route without event requirement:
+ * ```tsx
+ * <Route element={<ProtectedRoute requireEvent={false} />}>
+ *   <Route path="/settings" element={<SettingsPage />} />
+ * </Route>
+ * ```
+ *
+ * @example
+ * Protected route with custom no events message:
+ * ```tsx
+ * <Route element={
+ *   <ProtectedRoute
+ *     requireEvent={true}
+ *     noEventsFallback={<CustomNoEventsMessage />}
+ *   />
+ * }>
+ *   <Route path="/dashboard" element={<DashboardPage />} />
+ * </Route>
+ * ```
+ *
+ * @accessibility
+ * - Proper loading states with screen reader support
+ * - Clear error messages
+ * - Keyboard navigation support
+ *
+ * @dependencies
+ * - React Router v6 - Routing functionality
+ * - useUnifiedAuth - Authentication context
+ * - useEvents - Event context
+ * - SessionRestorationLoader - Session restoration UI
+ * - LoadingSpinner - Loading state UI
+ */
+
+import React, { useMemo } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { useSessionRestoration } from '../../hooks/useSessionRestoration';
+import { useEvents } from '../../hooks/useEvents';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { SessionRestorationLoader } from '../SessionRestorationLoader';
+import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
+
+export interface ProtectedRouteProps {
+  /**
+   * Whether an event is required for routes inside this component.
+   * When true, routes will only render if an event is selected or can be selected.
+   * When false, routes render regardless of event state.
+   * @default true
+   */
+  requireEvent?: boolean;
+
+  /**
+   * Whether super admins can bypass event requirement.
+   * Note: This feature requires additional RBAC setup. For simple bypass, set requireEvent={false} instead.
+   * @default false
+   * @deprecated Use requireEvent={false} for routes that don't need events
+   */
+  allowSuperAdminBypass?: boolean;
+
+  /**
+   * Custom component to render when no events are available.
+   * If not provided, a default message is shown.
+   */
+  noEventsFallback?: React.ReactNode;
+
+  /**
+   * Custom component to render while events are loading.
+   * If not provided, a default loading spinner is shown.
+   */
+  loadingFallback?: React.ReactNode;
+
+  /**
+   * Login redirect path when user is not authenticated.
+   * @default '/login'
+   */
+  loginPath?: string;
+}
+
+/**
+ * ProtectedRoute component that handles authentication and optional event selection.
+ *
+ * This component solves the chicken-and-egg problem where apps check for `selectedEvent`
+ * before rendering, which blocks the event selector (typically in the header) from being visible.
+ *
+ * Strategy:
+ * 1. Check authentication first - redirect to login if not authenticated
+ * 2. Allow rendering during event loading - prevents blocking UI
+ * 3. If events exist but none selected - allow rendering so selector is visible
+ * 4. If no events available - show error message
+ * 5. Individual pages should handle "no selected event" state gracefully
+ *
+ * @param props - Configuration for route protection
+ * @returns React element with route protection logic
+ */
+export function ProtectedRoute({
+  requireEvent = true,
+  allowSuperAdminBypass = false,
+  noEventsFallback,
+  loadingFallback,
+  loginPath = '/login'
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useUnifiedAuth();
+  const { selectedEvent, events, isLoading: eventLoading } = useEvents();
+  const sessionRestoration = useSessionRestoration();
+
+  const isRestoringSession = useMemo(() => {
+    return sessionRestoration.isRestoring &&
+      !sessionRestoration.restorationComplete &&
+      !sessionRestoration.restorationError &&
+      !sessionRestoration.hasTimedOut;
+  }, [
+    sessionRestoration.isRestoring,
+    sessionRestoration.restorationComplete,
+    sessionRestoration.restorationError,
+    sessionRestoration.hasTimedOut
+  ]);
+
+  // Show session restoration loader during restoration
+  if (isRestoringSession) {
+    return <SessionRestorationLoader />;
+  }
+
+  // Show loading state while auth is being determined
+  if (isLoading && !sessionRestoration.hasTimedOut) {
+    return loadingFallback || (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  // Redirect to login if not authenticated
+  if (!isAuthenticated) {
+    if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
+      console.warn('[ProtectedRoute] Session restoration failed, redirecting to login', {
+        timedOut: sessionRestoration.hasTimedOut,
+        error: sessionRestoration.restorationError?.message
+      });
+    }
+    return <Navigate to={loginPath} replace />;
+  }
+
+  // If event is not required, allow rendering
+  if (!requireEvent) {
+    return <Outlet />;
+  }
+
+  // Note: Super admin bypass would require useRBAC hook which adds complexity
+  // Apps that need super admin access without events should set requireEvent={false}
+  // For now, we keep it simple and always require events when requireEvent=true
+
+  // Allow rendering during event loading - prevents blocking UI while events load
+  if (eventLoading) {
+    return <Outlet />;
+  }
+
+  // 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' }}>
+        <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>
+    );
+  }
+
+  // KEY FIX: Allow rendering when events exist but none selected
+  // This allows the event selector (typically in PaceAppLayout header) to be visible
+  // Individual pages should handle "no selected event" state gracefully
+  // Auto-selection will handle selecting the next event, or user can manually select
+  
+  // If no event selected but events exist, allow rendering
+  // The event selector will be visible and user can select, or auto-selection will kick in
+  if (!selectedEvent) {
+    // Log for debugging - this is expected behavior, not an error
+    console.debug('[ProtectedRoute] Events available but none selected - allowing render so selector is visible');
+    return <Outlet />;
+  }
+
+  // Event is selected - allow rendering
+  return <Outlet />;
+}
+

package/src/components/ProtectedRoute/index.ts

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

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) {