@jmruthers/pace-core 0.6.2 → 0.6.3

package/src/components/DataTable/hooks/useDataTablePermissions.ts

@@ -284,13 +284,15 @@ export function useDataTablePermissions<TData extends DataRecord>(
     // Otherwise, use the normal permission check results
     const createSuperAdminAwarePermission = (result: ReturnType<typeof useCan>) => ({
       // If super admin check completed and user is super admin, grant all permissions
-      // Otherwise use the normal permission check result
-      // Use === true to distinguish between null (not checked) and false (checked, not super admin)
+      // and mark loading as complete for DataTable gating purposes.
+      // This is not a "hack": super admins *semantically* bypass permission checks, so the
+      // table must not remain blocked behind background permission queries.
       can: isSuperAdminUser === true ? true : result.can,
-      // Show loading if super admin check is in progress (null and checking) OR if the underlying permission check is loading
-      // React 19 fix: Read isLoading directly from the result object to ensure we get the latest state
-      isLoading: (isSuperAdminUser === null && isCheckingSuperAdmin) || result.isLoading,
-      error: result.error,
+      isLoading:
+        isSuperAdminUser === true
+          ? false
+          : (isSuperAdminUser === null && isCheckingSuperAdmin) || result.isLoading,
+      error: isSuperAdminUser === true ? null : result.error,
       refetch: result.refetch,
     });
 

package/src/components/Dialog/Dialog.tsx

@@ -159,7 +159,35 @@ import { X } from 'lucide-react';
 import { cn } from '../../utils/core/cn';
 import { renderSafeHtml } from '../../utils/validation/htmlSanitization';
 import { useState, useEffect } from 'react';
-import { debounce } from 'lodash';
+
+/**
+ * Simple debounce function that matches lodash debounce API
+ * Returns a debounced function with a cancel method
+ */
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): T & { cancel: () => void } {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = ((...args: Parameters<T>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, wait);
+  }) as T & { cancel: () => void };
+
+  debounced.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+
+  return debounced;
+}
 
 /**
  * Dialog size variants

package/src/components/FileDisplay/FileDisplay.tsx

@@ -125,7 +125,7 @@ interface FileDisplayContentProps {
   showMetadata?: boolean;
 }
 
-function FileDisplayContent({
+const FileDisplayContent = React.memo(function FileDisplayContent({
   isLoading,
   error,
   fileUrl,
@@ -156,6 +156,29 @@ function FileDisplayContent({
   const [internalFileUrls, setInternalFileUrls] = useState<Map<string, string>>(new Map(fileUrls));
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const fileReferencesRef = useRef<FileReference[]>([]);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const currentSrcRef = useRef<string | null>(null);
+  const isImageLoadingRef = useRef(false);
+
+  // Stabilize fileUrl to prevent unnecessary image reloads
+  // This prevents NS_BINDING_ABORTED errors when the component re-renders
+  const stableFileUrl = useMemo(() => fileUrl, [fileUrl]);
+
+  // Track when image starts loading to prevent cancellation
+  const handleImageLoadStart = useCallback(() => {
+    isImageLoadingRef.current = true;
+    if (stableFileUrl) {
+      currentSrcRef.current = stableFileUrl;
+    }
+  }, [stableFileUrl]);
+
+  // Track when image finishes loading
+  const handleImageLoad = useCallback(() => {
+    isImageLoadingRef.current = false;
+    if (stableFileUrl) {
+      currentSrcRef.current = stableFileUrl;
+    }
+  }, [stableFileUrl]);
 
   // Compute fallback text
   const computedFallbackText = useMemo(() => {
@@ -328,7 +351,7 @@ function FileDisplayContent({
       }
       
       // Show loading skeleton if URL is not available yet
-      if (!fileUrl) {
+      if (!stableFileUrl) {
         return (
           <figure className={className || "max-w-full h-48"} title="Loading">
             <p className={fallbackClasses}>
@@ -341,10 +364,15 @@ function FileDisplayContent({
       return (
         <figure className={className || ""}>
           <img
-            src={fileUrl}
+            ref={imgRef}
+            key={fileReference.id}
+            src={stableFileUrl || undefined}
             alt={fileReference.file_metadata.fileName || 'File'}
             className={imgClassName || "object-cover size-full"}
             onError={handleImageError}
+            onLoadStart={handleImageLoadStart}
+            onLoad={handleImageLoad}
+            loading="lazy"
           />
         </figure>
       );
@@ -352,14 +380,14 @@ function FileDisplayContent({
     
     // Document link display when displayOnly is true and file is not an image
     // Render non-image files as clickable links that open in a new tab
-    if (displayOnly && !isImage && fileUrl && fileReference && !showDelete) {
+    if (displayOnly && !isImage && stableFileUrl && fileReference && !showDelete) {
       const fileName = fileReference.file_metadata?.fileName || 'Document';
       const ariaLabel = `Open ${fileName} in new tab`;
       
       return (
         <figure className={className}>
           <a
-            href={fileUrl}
+            href={stableFileUrl || undefined}
             target="_blank"
             rel="noopener noreferrer"
             aria-label={ariaLabel}
@@ -385,7 +413,7 @@ function FileDisplayContent({
     
     // Standard single file display with wrapper
     // For displayOnly mode, if fallback is enabled and there's no URL or image error, show fallback instead of folder icon
-    if (displayOnly && showFallback && (!fileUrl || imageError || !isImage)) {
+    if (displayOnly && showFallback && (!stableFileUrl || imageError || !isImage)) {
       return (
         <figure className={className} title={fileReference.file_metadata.fileName || 'File'}>
           <p className={fallbackClasses}>
@@ -397,13 +425,15 @@ function FileDisplayContent({
     
     return (
       <figure className={`relative ${className}`}>
-        {isImage && fileUrl && !imageError ? (
+        {isImage && stableFileUrl && !imageError ? (
           <>
             <img
-              src={fileUrl}
+              key={fileReference.id}
+              src={stableFileUrl}
               alt={fileReference.file_metadata.fileName || 'File'}
               className={imgClassName || "object-cover size-full"}
               onError={handleImageError}
+              loading="lazy"
             />
             {showDelete && (
               <>
@@ -541,10 +571,12 @@ function FileDisplayContent({
           <figure key={fileRef.id} className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
             {isImage && fileUrl ? (
               <img
-                src={fileUrl}
+                key={fileRef.id}
+                src={fileUrl || undefined}
                 alt={fileRef.file_metadata.fileName || 'File'}
                 className={imgClassName || "object-cover size-full"}
                 onError={handleImageError}
+                loading="lazy"
               />
             ) : (
               <span className="text-2xl">
@@ -596,7 +628,7 @@ function FileDisplayContent({
       {children}
     </figure>
   );
-}
+});
 
 /**
  * Internal component for public page context

package/src/components/Header/Header.test.tsx

@@ -52,20 +52,24 @@ vi.mock('../UserMenu', () => ({
   ),
 }));
 
-vi.mock('../EventSelector', () => ({
-  EventSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      <button>{placeholder}</button>
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      <button>{placeholder || 'Select organisation or event'}</button>
     </div>
   ),
 }));
 
-vi.mock('../OrganisationSelector', () => ({
-  OrganisationSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'org-selector'} className={className}>
-      <button>{placeholder}</button>
-    </div>
-  ),
+// Mock useEventService to prevent provider requirement
+vi.mock('../../hooks/services/useEventService', () => ({
+  useEventService: vi.fn(() => ({
+    getEvents: vi.fn(() => []),
+    getSelectedEvent: vi.fn(() => null),
+    isLoading: vi.fn(() => false),
+    getError: vi.fn(() => null),
+    setSelectedEvent: vi.fn(),
+    refreshEvents: vi.fn()
+  }))
 }));
 
 // Mock useOrganisations hook
@@ -90,7 +94,7 @@ vi.mock('../../hooks/useOrganisations', () => ({
     isContextReady: true,
     isLoading: false,
     error: null,
-    selectOrganisation: vi.fn(),
+    switchOrganisation: vi.fn(),
     refreshOrganisations: vi.fn(),
     userMemberships: []
   }))
@@ -314,44 +318,44 @@ describe('Header Component', () => {
     });
   });
 
-  // Event selector tests
-  describe('Event Selector', () => {
-    it('renders event selector when showEventSelector is true', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+  // Context selector tests
+  describe('Context Selector', () => {
+    it('renders context selector by default', () => {
+      renderWithProviders(<Header />);
       
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
     });
 
-    it('does not render event selector when showEventSelector is false', () => {
-      renderWithProviders(<Header showEventSelector={false} />);
+    it('does not render context selector when showContextSelector is false', () => {
+      renderWithProviders(<Header showContextSelector={false} />);
       
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
     });
 
-    it('renders event selector by default', () => {
-      renderWithProviders(<Header />);
+    it('renders context selector when showContextSelector is explicitly true', () => {
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
     });
 
-    it('applies correct className to event selector', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+    it('applies correct className to context selector', () => {
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      const eventSelector = screen.getByTestId('event-selector');
-      expect(eventSelector).toBeInTheDocument();
-      expect(eventSelector).toBeVisible();
+      const contextSelector = screen.getByTestId('context-selector');
+      expect(contextSelector).toBeInTheDocument();
+      expect(contextSelector).toBeVisible();
     });
 
     it('shows correct placeholder text', () => {
-      renderWithProviders(<Header showEventSelector={true} />);
+      renderWithProviders(<Header showContextSelector={true} />);
       
-      expect(screen.getByRole('button', { name: 'Select event' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Select organisation or event' })).toBeInTheDocument();
     });
 
-    it('preserves layout when event selector is hidden', () => {
+    it('preserves layout when context selector is hidden', () => {
       renderWithProviders(
         <Header 
-          showEventSelector={false}
+          showContextSelector={false}
           user={mockUser}
           showUserMenu={true}
         />
@@ -361,47 +365,14 @@ describe('Header Component', () => {
       expect(nav).toBeInTheDocument();
       expect(nav).toBeVisible();
       
-      // Event selector should not be rendered
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      // Context selector should not be rendered
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
       
       // User menu should still be present and positioned correctly
       expect(screen.getByTestId('user-menu')).toBeInTheDocument();
     });
   });
 
-  // Organisation Selector tests
-  describe('Organisation Selector', () => {
-    it('does not render organisation selector by default', () => {
-      renderWithProviders(<Header />);
-      
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
-    });
-
-    it('renders organisation selector when showOrgSelector is true', () => {
-      renderWithProviders(<Header showOrgSelector={true} />);
-      
-      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
-    });
-
-    it('does not render organisation selector when showOrgSelector is false', () => {
-      renderWithProviders(<Header showOrgSelector={false} />);
-      
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
-    });
-
-    it('can render both organisation and event selectors together', () => {
-      renderWithProviders(
-        <Header 
-          showOrgSelector={true}
-          showEventSelector={true}
-        />
-      );
-      
-      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
-    });
-  });
-
   // Custom actions tests
   describe('Custom Actions', () => {
     it('renders custom actions when provided', () => {
@@ -598,7 +569,7 @@ describe('Header Component', () => {
           navItems={mockNavItems}
           user={mockUser}
           actions={customActions}
-          showEventSelector={true}
+          showContextSelector={true}
           showUserMenu={true}
         />
       );
@@ -609,8 +580,8 @@ describe('Header Component', () => {
       // Navigation
       expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
       
-      // Event Selector
-      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      // Context Selector
+      expect(screen.getByTestId('context-selector')).toBeInTheDocument();
       
       // Custom Actions
       expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
@@ -622,7 +593,7 @@ describe('Header Component', () => {
     it('renders minimal configuration', () => {
       renderWithProviders(
         <Header
-          showEventSelector={false}
+          showContextSelector={false}
           showUserMenu={false}
         />
       );
@@ -631,9 +602,8 @@ describe('Header Component', () => {
       expect(screen.getByRole('banner')).toBeInTheDocument();
       expect(screen.getByRole('img', { name: 'Logo' })).toBeInTheDocument();
       expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('context-selector')).not.toBeInTheDocument();
       expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
     });
   });
 
@@ -649,7 +619,7 @@ describe('Header Component', () => {
           navItems={mockNavItems}
           user={mockUser}
           actions={<div>Actions</div>}
-          showEventSelector={true}
+          showContextSelector={true}
           showUserMenu={true}
         />
       );

package/src/components/Header/Header.tsx

@@ -51,11 +51,11 @@
  *   onSignOut={handleSignOut}
  * />
  * 
- * // Header without event selector
+ * // Header without context selector
  * <Header
  *   logoUrl="/logo.svg"
  *   logoHref="/dashboard"
- *   showEventSelector={false}
+ *   showContextSelector={false}
  *   user={currentUser}
  *   onSignOut={handleSignOut}
  * />
@@ -83,21 +83,21 @@
  * - Tailwind CSS - Styling
  * - NavigationMenu component
  * - UserMenu component
- * - OrganisationSelector component
- * - EventSelector component
+ * - ContextSelector component (unified org/event selector)
  */
 
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
 import { cn } from '../../utils/core/cn';
-import { EventSelector } from '../EventSelector';
-import { OrganisationSelector } from '../OrganisationSelector';
+import { ContextSelector } from '../ContextSelector';
 import { UserMenu } from '../UserMenu';
 import { NavigationMenu } from '../NavigationMenu';
 import type { NavigationItem } from '../NavigationMenu';
 import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { useOrganisations } from '../../hooks/useOrganisations';
+import { useEvents } from '../../hooks/useEvents';
+import type { Event } from '../../types/event';
 
 /**
  * Props for the Header component
@@ -123,10 +123,12 @@ export interface HeaderProps {
   userMenu?: React.ReactNode;
   /** Custom className */
   className?: string;
-  /** Show/hide event selector */
-  showEventSelector?: boolean;
-  /** Show/hide organisation selector */
-  showOrgSelector?: boolean;
+  /** Show/hide context selector (unified org/event selector) - default: true */
+  showContextSelector?: boolean;
+  /** Show organisations in context selector - default: true */
+  showOrganisations?: boolean;
+  /** Show events in context selector - default: true */
+  showEvents?: boolean;
   /** Show/hide user menu */
   showUserMenu?: boolean;
   /** Current path for navigation highlighting */
@@ -225,7 +227,7 @@ export interface HeaderProps {
  *     <Header
  *       logoUrl="/simple-logo.svg"
  *       logoAlt="Simple App"
- *       showEventSelector={false}
+ *       showContextSelector={false}
  *       user={currentUser}
  *       onSignOut={handleSignOut}
  *     />
@@ -256,29 +258,20 @@ export function Header({
   actions,
   userMenu,
   className,
-  showEventSelector = true,
-  showOrgSelector = false,
+  showContextSelector = true,
+  showOrganisations = true,
+  showEvents = true,
   showUserMenu = true,
   currentPath,
   onNavigate,
   logoHref
 }: HeaderProps) {
-  // Conditional wrapper for organisation selector - only show if user has organisations
-  const OrganisationSelectorConditional = () => {
-    const { organisations, isContextReady } = useOrganisations();
-    // Only show selector if user has organisations and context is ready
-    if (!isContextReady || !organisations || organisations.length === 0) {
-      return null;
-    }
-    return (
-      <OrganisationSelector 
-        placeholder="Select organisation" 
-        className="w-64" 
-        data-testid="org-selector"
-        compact={true}
-      />
-    );
-  };
+  // Determine if context selector should be shown
+  const shouldShowContextSelector = showContextSelector !== false;
+  
+  // Get hooks for context selector
+  const { switchOrganisation } = useOrganisations();
+  const { events, setSelectedEvent } = useEvents();
 
   return (
     <header className={cn(
@@ -341,25 +334,31 @@ export function Header({
             />
           )}
 
-          {/* Organisation Selector - Only show if user has organisations */}
-          {showOrgSelector ? (
-            <OrganisationSelectorConditional />
-          ) : null}
-
-          {/* Event Selector */}
-          {showEventSelector ? (
-            <EventSelector 
-              placeholder="Select event" 
+          {/* Unified Context Selector - Shows all accessible orgs and events */}
+          {shouldShowContextSelector ? (
+            <ContextSelector
+              placeholder="Select organisation or event"
               className={cn(
                 "w-96",
-                // If both org selector and actions exist, EventSelector uses 1 column
-                // If only one exists, EventSelector spans 2 columns
-                // If neither exists, EventSelector spans 3 columns
-                showOrgSelector && actions ? "col-span-1" :
-                showOrgSelector || actions ? "col-span-2" :
-                "col-span-3"
+                // Adjust width based on whether actions exist
+                actions ? "col-span-1" : "col-span-2"
               )}
-              data-testid="event-selector" 
+              showOrganisations={showOrganisations}
+              showEvents={showEvents}
+              onOrganisationSelect={async (org) => {
+                // When switching to an organisation, clear event selection FIRST
+                // This ensures the userClearedEventRef flag is set before any event refresh
+                // This prevents auto-selection from re-selecting the event
+                setSelectedEvent(null);
+                // Then switch organisation (this may trigger event refresh, but flag is already set)
+                await switchOrganisation(org.id);
+              }}
+              onEventSelect={(event) => {
+                // Find the full event object from the events list
+                const fullEvent = events.find((e: Event) => (e.event_id || e.id) === (event.event_id || event.id));
+                setSelectedEvent(fullEvent || event);
+              }}
+              compact={true}
             />
           ) : null}
           

package/src/components/PaceAppLayout/PaceAppLayout.integration.test.tsx

@@ -162,7 +162,7 @@ vi.mock('../../hooks/services/useEventService', () => ({
   useEventService: mockUseEventService,
 }));
 
-// Mock useEvents hook (used by useEventTheme and EventSelector)
+// Mock useEvents hook (used by useEventTheme and ContextSelector)
 // Use the hoisted mockUseEventService so useEvents can work properly
 // But also provide a direct mock for components that import useEvents directly
 const mockUseEvents = vi.hoisted(() => vi.fn(() => ({
@@ -302,20 +302,11 @@ vi.mock('../../rbac/hooks', () => ({
   })),
 }));
 
-// Mock EventSelector to avoid useEventService requirement
-// Mock both the component file and the index file
-vi.mock('../../EventSelector/EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
-    </div>
-  ))
-}));
-
-vi.mock('../../EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
+// Mock ContextSelector to avoid useEventService requirement
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      {placeholder || 'Select organisation or event'}
     </div>
   ))
 }));
@@ -334,7 +325,7 @@ vi.mock('../Header', () => ({
     userMenu,
     logo,
     logoUrl,
-    showEventSelector,
+    showContextSelector,
     showUserMenu,
     className
   }) => (
@@ -407,7 +398,7 @@ vi.mock('../Header', () => ({
         Change Password
       </button>
       <div data-testid="current-path">{currentPath}</div>
-      <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
+      <div data-testid="show-context-selector">{showContextSelector !== false ? 'true' : 'false'}</div>
     </header>
   ))
 }));
@@ -1054,7 +1045,7 @@ describe('PaceAppLayout Integration', () => {
             headerActions={<HeaderActions />}
             customUserMenu={<CustomUserMenu />}
             customLogo={<CustomLogo />}
-            showEventSelector={false}
+            showContextSelector={false}
             showUserMenu={false}
             headerClassName="complex-header-class"
             enforcePermissions={false}
@@ -1073,7 +1064,7 @@ describe('PaceAppLayout Integration', () => {
       // Verify configuration is applied
       expect(screen.getByTestId('app-name')).toHaveTextContent('Complex App');
       expect(screen.getByTestId('nav-items-count')).toHaveTextContent('2');
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('false');
+      expect(screen.getByTestId('show-context-selector')).toHaveTextContent('false');
       expect(screen.getByTestId('show-user-menu')).toHaveTextContent('false');
       expect(screen.getByTestId('mock-header')).toHaveClass('complex-header-class');
     });

package/src/components/PaceAppLayout/PaceAppLayout.performance.test.tsx

@@ -626,7 +626,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
           <TestWrapper>
             <PaceAppLayout 
               appName={`Test App ${i}`}
-              showEventSelector={i % 2 === 0}
+              showContextSelector={i % 2 === 0}
               showUserMenu={i % 2 === 1}
             />
           </TestWrapper>
@@ -916,7 +916,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
             navItems={customNavItems}
             headerActions={<HeaderActions />}
             customUserMenu={<CustomUserMenu />}
-            showEventSelector={false}
+            showContextSelector={false}
             showUserMenu={true}
             headerClassName="complex-header-class"
             enforcePermissions={false}

package/src/components/PaceAppLayout/PaceAppLayout.security.test.tsx

@@ -296,11 +296,11 @@ vi.mock('../../rbac/hooks', () => ({
   })),
 }));
 
-// Mock EventSelector to avoid useEventService requirement
-vi.mock('../EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
+// Mock ContextSelector to avoid useEventService requirement
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      {placeholder || 'Select organisation or event'}
     </div>
   ))
 }));