@jmruthers/pace-core 0.5.185 → 0.5.187

package/src/components/AddressField/types.ts

@@ -0,0 +1,65 @@
+/**
+ * @file AddressField Component Types
+ * @package @jmruthers/pace-core
+ * @module Components/AddressField
+ * @since 0.1.0
+ */
+
+import type { ParsedAddress, AutocompleteOptions } from '../../utils/google-places';
+
+/**
+ * Props for AddressField component
+ */
+export interface AddressFieldProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
+  /** Google Places API key (required) */
+  apiKey: string;
+  /** Controlled input value */
+  value?: string;
+  /** Uncontrolled default value */
+  defaultValue?: string;
+  /** Callback when address is selected */
+  onChange?: (address: ParsedAddress | null) => void;
+  /** Callback when input value changes */
+  onInputChange?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Error state styling */
+  error?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Input size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Input variant */
+  variant?: 'default' | 'destructive';
+  /** Google Places API autocomplete options */
+  autocompleteOptions?: AutocompleteOptions;
+  /** Debounce delay in milliseconds */
+  debounceDelay?: number;
+  /** Enable caching (default: true) */
+  cacheEnabled?: boolean;
+  /** Cache TTL configuration */
+  cacheTTL?: {
+    /** Autocomplete cache TTL in seconds */
+    autocomplete?: number;
+    /** Place details cache TTL in seconds */
+    placeDetails?: number;
+  };
+}
+
+/**
+ * Ref type for AddressField component
+ */
+export interface AddressFieldRef {
+  /** Focus the input */
+  focus: () => void;
+  /** Blur the input */
+  blur: () => void;
+  /** Get current input value */
+  getValue: () => string;
+  /** Clear the input and suggestions */
+  clear: () => void;
+}
+
+export type { ParsedAddress, AutocompleteOptions } from '../../utils/google-places';
+

package/src/components/FileDisplay/FileDisplay.test.tsx

@@ -39,6 +39,10 @@ vi.mock('../../hooks/public/usePublicFileDisplay', () => ({
   usePublicFileDisplay: vi.fn()
 }));
 
+vi.mock('../../hooks/useFileUrl', () => ({
+  useFileUrl: vi.fn()
+}));
+
 vi.mock('../../utils/storage/helpers', () => ({
   getPublicUrl: vi.fn((_, path: string) => `https://example.com/${path}`),
   getSignedUrl: vi.fn(async (_: unknown, path: string) => ({ url: `https://signed.example.com/${path}` })),
@@ -104,6 +108,15 @@ describe('[component] FileDisplay', () => {
       fileUrls: new Map(),
       refetch: vi.fn(),
     });
+
+    // Set up default mock for useFileUrl (used in displayOnly mode)
+    const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+    useFileUrl.mockReturnValue({
+      url: null,
+      isLoading: false,
+      error: null,
+      clear: vi.fn(),
+    });
   });
 
   it('renders error state and clears error on retry', async () => {
@@ -458,6 +471,15 @@ describe('[component] FileDisplay', () => {
       refetch: vi.fn(),
     });
 
+    // Mock useFileUrl to return null URL so fallback is shown
+    const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+    useFileUrl.mockReturnValue({
+      url: null,
+      isLoading: false,
+      error: null,
+      clear: vi.fn(),
+    });
+
     const fallbackGenerator = vi.fn(() => 'DOC');
 
     renderWithUnifiedAuth(
@@ -519,4 +541,436 @@ describe('[component] FileDisplay', () => {
     expect(image).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /Delete file/i })).toBeNull();
   });
+
+  describe('Document link rendering in displayOnly mode', () => {
+    it('renders non-image files as clickable links when displayOnly is true and fileUrl exists', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/document.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'document.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/document.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/document.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl to return URL from map (since it's in the map, hook won't be used, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link', { name: /Open document\.pdf in new tab/i });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', 'https://signed.example.com/document.pdf');
+    });
+
+    it('renders link with target="_blank" for new tab', async () => {
+      const docFile = {
+        id: 'fr-doc',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/file.docx',
+        is_public: false,
+        file_metadata: { fileName: 'file.docx', fileSize: 4096, fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/file.docx',
+        fileReference: docFile,
+        fileReferences: [docFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-doc', 'https://signed.example.com/file.docx']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link');
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+
+    it('renders link with rel="noopener noreferrer" for security', async () => {
+      const excelFile = {
+        id: 'fr-xls',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/spreadsheet.xlsx',
+        is_public: false,
+        file_metadata: { fileName: 'spreadsheet.xlsx', fileSize: 8192, fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/spreadsheet.xlsx',
+        fileReference: excelFile,
+        fileReferences: [excelFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-xls', 'https://signed.example.com/spreadsheet.xlsx']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('displays correct filename in link', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/my-document.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'my-document.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/my-document.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/my-document.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link');
+      expect(link).toHaveTextContent('my-document.pdf');
+    });
+
+    it('renders FileText and ExternalLink icons', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/doc.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/doc.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link');
+      // Icons should be present (they have aria-hidden="true")
+      // Icons are mocked as divs with data-testid in tests
+      const fileTextIcon = link.querySelector('[data-testid="lucide-filetext"]');
+      const externalLinkIcon = link.querySelector('[data-testid="lucide-externallink"]');
+      expect(fileTextIcon).toBeInTheDocument();
+      expect(externalLinkIcon).toBeInTheDocument();
+    });
+
+    it('falls back to existing behavior when fileUrl is null', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/doc.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: null,
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl to return null URL so fallback is shown
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showFallback fallbackText="View Document" />);
+
+      // Should show fallback, not a link
+      expect(await screen.findByText('View Document')).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('still renders images inline (no regression)', async () => {
+      const imageFile = {
+        id: 'fr-img',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/image.png',
+        is_public: false,
+        file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/image.png',
+        fileReference: imageFile,
+        fileReferences: [imageFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-img', 'https://signed.example.com/image.png']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const image = await screen.findByRole('img', { name: /image\.png/i });
+      expect(image).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('uses wrapper behavior when showDelete is true', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/doc.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/doc.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showDelete />);
+
+      // Should show wrapper with delete button, not simplified link
+      expect(screen.getByText('doc.pdf')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Delete file/i })).toBeInTheDocument();
+      // Should not be a simplified link (no link with target="_blank" in simplified form)
+      const link = screen.queryByRole('link', { name: /Open.*in new tab/i });
+      expect(link).not.toBeInTheDocument();
+    });
+
+    it('renders document links in public context', async () => {
+      mockUseIsPublicPage.mockReturnValueOnce(true);
+
+      const pdfFile = {
+        id: 'pub-pdf',
+        table_name: 'event',
+        record_id: 'event-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/public-doc.pdf',
+        is_public: true,
+        file_metadata: { fileName: 'public-doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const fileUrlsMap = new Map<string, string>([['pub-pdf', 'https://public.example.com/public-doc.pdf']]);
+      const usePublicFileDisplay = (await import('../../hooks/public/usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
+      usePublicFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://public.example.com/public-doc.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: fileUrlsMap,
+        refetch: vi.fn(),
+      });
+
+      renderWithPublicContext(
+        <FileDisplay {...baseProps} displayOnly />,
+        { supabase }
+      );
+
+      const link = await screen.findByRole('link', { name: /Open public-doc\.pdf in new tab/i });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', 'https://public.example.com/public-doc.pdf');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('includes proper ARIA label for accessibility', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/accessible.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'accessible.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/accessible.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/accessible.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link', { name: /Open accessible\.pdf in new tab/i });
+      expect(link).toHaveAttribute('aria-label', 'Open accessible.pdf in new tab');
+    });
+
+    it('uses fallback text "Document" when fileName is missing', async () => {
+      const pdfFile = {
+        id: 'fr-pdf',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/file.pdf',
+        is_public: false,
+        file_metadata: { fileName: '', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: 'https://signed.example.com/file.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/file.pdf']]),
+        refetch: vi.fn(),
+      });
+
+      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
+      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
+      useFileUrl.mockReturnValue({
+        url: null,
+        isLoading: false,
+        error: null,
+        clear: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const link = await screen.findByRole('link', { name: /Open Document in new tab/i });
+      expect(link).toHaveTextContent('Document');
+    });
+  });
 });

package/src/components/FileDisplay/FileDisplay.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
+import { FileText, ExternalLink } from 'lucide-react';
 import { FileReference, FileCategory } from '../../types/file-reference';
 import { usePublicFileDisplay } from '../../hooks/public/usePublicFileDisplay';
 import { useFileDisplay } from '../../hooks/useFileDisplay';
@@ -312,6 +313,29 @@ 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) {
+      const fileName = fileReference.file_metadata?.fileName || 'Document';
+      const ariaLabel = `Open ${fileName} in new tab`;
+      
+      return (
+        <a
+          href={fileUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={ariaLabel}
+          className={`flex items-center gap-2 p-3 bg-sec-50 border border-sec-200 rounded-lg hover:bg-sec-100 transition-colors text-main-600 hover:text-main-700 focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2 ${className || ''}`.trim()}
+        >
+          <FileText className="h-5 w-5 shrink-0" aria-hidden="true" />
+          <span className="flex-1 font-medium truncate">
+            {fileName}
+          </span>
+          <ExternalLink className="h-5 w-5 shrink-0" aria-hidden="true" />
+        </a>
+      );
+    }
+    
     // 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)) {
@@ -763,7 +787,10 @@ function FileDisplayAuthenticated({
  * - UnifiedAuthProvider context for authenticated pages
  * 
  * @param props - File display configuration
- * @param props.displayOnly - Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering. When true with an image, renders a simplified image-only display without metadata or wrapper divs.
+ * @param props.displayOnly - Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering. When true:
+ *   - **Image files**: Renders a simplified image-only display without metadata or wrapper divs
+ *   - **Non-image files** (PDFs, Word docs, Excel files, etc.): Renders as clickable links that open in a new tab with document icon, filename, and external link icon. Links include proper security attributes (`rel="noopener noreferrer"`) and accessibility features (ARIA labels, keyboard navigation, visible focus states)
+ *   - If `showDelete={true}`, uses standard wrapper behavior instead of simplified display
  * @param props.category - Optional category filter. When specified, only displays files matching this category and uses single file display variant.
  * @returns React element with file display
  */

package/src/components/FileUpload/FileUpload.test.tsx

@@ -71,6 +71,8 @@ describe('[component] FileUpload', () => {
     organisation_id: 'org-1',
     app_id: 'app-123',
     category: FileCategory.PROFILE_PHOTOS,
+    folder: 'profile_photos',
+    pageContext: 'test',
     accept: 'image/*',
   } as const;
 

package/src/components/FileUpload/FileUpload.tsx

@@ -22,7 +22,9 @@ export interface FileUploadProps {
   organisation_id: string;
   app_id?: string; // Optional - will be resolved from app name if not provided
   category: FileCategory;
+  folder: string; // Folder name in storage bucket (e.g., 'profile_photos', 'documents')
   pageContext: string; // The page context where the file upload occurs (e.g., 'configuration', 'forms', 'applications')
+  event_id?: string; // Optional event ID for event-scoped permission checks (required for event-based apps)
   accept?: string;
   maxSize?: number;
   multiple?: boolean;
@@ -51,7 +53,9 @@ export function FileUpload({
   organisation_id,
   app_id,
   category,
+  folder,
   pageContext,
+  event_id,
   accept = '*/*',
   maxSize = 10 * 1024 * 1024, // 10MB default
   multiple = false,
@@ -286,7 +290,9 @@ export function FileUpload({
           organisation_id,
           app_id: resolvedAppId ? assertAppId(resolvedAppId) : assertAppId(''),
           category,
+          folder,
           pageContext,
+          event_id,
           is_public: isPublic
         }, file);
 
@@ -384,7 +390,7 @@ export function FileUpload({
         onUploadError?.(errorMessage, file);
       }
     }
-  }, [uploadFile, table_name, record_id, organisation_id, resolvedAppId, category, isPublic, maxSize, onUploadSuccess, onUploadError, onProgress, validateFile, generatePreview, showPreview, appIdError]);
+  }, [uploadFile, table_name, record_id, organisation_id, resolvedAppId, category, folder, isPublic, maxSize, onUploadSuccess, onUploadError, onProgress, validateFile, generatePreview, showPreview, appIdError]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();

package/src/components/Header/Header.tsx

@@ -260,7 +260,7 @@ export function Header({
       "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
       className
     )} role="banner">
-      <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">
+      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto flex items-center gap-4 h-full">
           {/* Logo */}
           {logo ? (
             logoHref ? (
@@ -318,7 +318,7 @@ export function Header({
         
 
         {/* Right side: Organisation Selector, Event Selector, Actions, and User Menu */}
-        <div className="flex items-center gap-4 justify-end">
+        <div className="flex items-center gap-4 ml-auto">
           {/* Organisation Selector */}
           {showOrgSelector ? (
             <OrganisationSelector 
@@ -337,10 +337,7 @@ export function Header({
               data-testid="event-selector" 
             />
           ) : null}
-        </div>
           
-        {/* Custom Actions and User Menu */}
-        <div className="flex items-center gap-4">
           {/* Custom Actions */}
           {actions}