@jmruthers/pace-core 0.5.54 → 0.5.56

package/src/components/FileDisplay.tsx

@@ -0,0 +1,233 @@
+// File Display Component
+// Provides a file display interface using the file reference system
+
+import React, { useState, useEffect } from 'react';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { FileReference, FileCategory } from '../types/file-reference';
+import { useFileReferenceForRecord } from '../hooks/useFileReference';
+
+export interface FileDisplayProps {
+  supabase: SupabaseClient;
+  table_name: string;
+  record_id: string;
+  organisation_id: string;
+  category?: FileCategory;
+  showUpload?: boolean;
+  showDelete?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function FileDisplay({
+  supabase,
+  table_name,
+  record_id,
+  organisation_id,
+  category,
+  showUpload = false,
+  showDelete = false,
+  className = '',
+  children
+}: FileDisplayProps) {
+  const {
+    isLoading,
+    error,
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileCount,
+    loadFileReference,
+    loadFileUrl,
+    loadFileReferences,
+    loadFileCount,
+    deleteFile,
+    clearError
+  } = useFileReferenceForRecord(supabase, table_name, record_id, organisation_id);
+
+  const [imageError, setImageError] = useState(false);
+
+  // Load file data on mount
+  useEffect(() => {
+    loadFileCount();
+    if (category) {
+      loadFileReference();
+    } else {
+      loadFileReferences();
+    }
+  }, [loadFileCount, loadFileReference, loadFileReferences, category]);
+
+  // Load file URL when file reference is available
+  useEffect(() => {
+    if (fileReference) {
+      loadFileUrl();
+    }
+  }, [fileReference, loadFileUrl]);
+
+  const handleDelete = async () => {
+    if (window.confirm('Are you sure you want to delete this file?')) {
+      const success = await deleteFile(true);
+      if (success) {
+        setImageError(false);
+      }
+    }
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  const getFileIcon = (fileType: string) => {
+    if (fileType.startsWith('image/')) return '🖼️';
+    if (fileType.startsWith('video/')) return '🎥';
+    if (fileType.startsWith('audio/')) return '🎵';
+    if (fileType.includes('pdf')) return '📄';
+    if (fileType.includes('word')) return '📝';
+    if (fileType.includes('excel') || fileType.includes('spreadsheet')) return '📊';
+    if (fileType.includes('powerpoint') || fileType.includes('presentation')) return '📊';
+    return '📁';
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  if (isLoading) {
+    return (
+      <div className={`flex items-center justify-center p-4 ${className}`}>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
+        <div className="text-acc-600">
+          Error loading file: {error}
+        </div>
+        <button
+          onClick={clearError}
+          className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  if (fileCount === 0) {
+    return (
+      <div className={`text-sec-500 text-center p-4 ${className}`}>
+        No files found
+        {children}
+      </div>
+    );
+  }
+
+  // Single file display (when category is specified)
+  if (category && fileReference) {
+    const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
+    
+    return (
+      <div className={`space-y-2 ${className}`}>
+        {isImage && fileUrl && !imageError ? (
+          <div className="relative">
+            <img
+              src={fileUrl}
+              alt={fileReference.file_metadata.fileName || 'File'}
+              className="max-w-full h-auto rounded-lg border border-sec-200"
+              onError={handleImageError}
+            />
+            {showDelete && (
+              <button
+                onClick={handleDelete}
+                className="absolute top-2 right-2 bg-acc-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-acc-600"
+                title="Delete file"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
+            <span className="text-2xl">
+              {getFileIcon(fileReference.file_metadata.fileType || '')}
+            </span>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-sec-900 truncate">
+                {fileReference.file_metadata.fileName || 'Unknown file'}
+              </div>
+              <div className="text-sm text-sec-500">
+                {fileReference.file_metadata.fileSize && formatFileSize(fileReference.file_metadata.fileSize)}
+                {fileReference.file_metadata.fileType && ` • ${fileReference.file_metadata.fileType}`}
+              </div>
+            </div>
+            {showDelete && (
+              <button
+                onClick={handleDelete}
+                className="text-acc-500 hover:text-acc-700 p-1"
+                title="Delete file"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    );
+  }
+
+  // Multiple files display
+  return (
+    <div className={`space-y-2 ${className}`}>
+      {fileReferences.map((fileRef) => {
+        const isImage = fileRef.file_metadata.fileType?.startsWith('image/');
+        const fileUrl = fileRef.is_public 
+          ? `https://your-supabase-url.supabase.co/storage/v1/object/public/files/${fileRef.file_path}`
+          : null; // Would need to get signed URL for private files
+        
+        return (
+          <div 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}
+                alt={fileRef.file_metadata.fileName || 'File'}
+                className="w-12 h-12 object-cover rounded"
+                onError={handleImageError}
+              />
+            ) : (
+              <span className="text-2xl">
+                {getFileIcon(fileRef.file_metadata.fileType || '')}
+              </span>
+            )}
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-sec-900 truncate">
+                {fileRef.file_metadata.fileName || 'Unknown file'}
+              </div>
+              <div className="text-sm text-sec-500">
+                {fileRef.file_metadata.fileSize && formatFileSize(fileRef.file_metadata.fileSize)}
+                {fileRef.file_metadata.fileType && ` • ${fileRef.file_metadata.fileType}`}
+                {fileRef.file_metadata.category && ` • ${fileRef.file_metadata.category}`}
+              </div>
+            </div>
+            {showDelete && (
+              <button
+                onClick={() => deleteFile(true)}
+                className="text-acc-500 hover:text-acc-700 p-1"
+                title="Delete file"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        );
+      })}
+      {children}
+    </div>
+  );
+}

package/src/components/FileUpload.tsx

@@ -0,0 +1,176 @@
+// File Upload Component
+// Provides a file upload interface using the file reference system
+
+import React, { useState, useCallback, useRef } from 'react';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { FileCategory } from '../types/file-reference';
+import { useFileReference } from '../hooks/useFileReference';
+
+export interface FileUploadProps {
+  supabase: SupabaseClient;
+  table_name: string;
+  record_id: string;
+  organisation_id: string;
+  app_id: string;
+  category: FileCategory;
+  accept?: string;
+  maxSize?: number;
+  multiple?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onUploadSuccess?: (result: any) => void;
+  onUploadError?: (error: string) => void;
+  children?: React.ReactNode;
+}
+
+export function FileUpload({
+  supabase,
+  table_name,
+  record_id,
+  organisation_id,
+  app_id,
+  category,
+  accept = '*/*',
+  maxSize = 10 * 1024 * 1024, // 10MB default
+  multiple = false,
+  disabled = false,
+  className = '',
+  onUploadSuccess,
+  onUploadError,
+  children
+}: FileUploadProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { uploadFile, isLoading, error } = useFileReference(supabase);
+
+  const handleFileSelect = useCallback(async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    const fileArray = Array.from(files);
+    
+    // Validate file sizes
+    const oversizedFiles = fileArray.filter(file => file.size > maxSize);
+    if (oversizedFiles.length > 0) {
+      const errorMessage = `Files exceed maximum size of ${Math.round(maxSize / 1024 / 1024)}MB: ${oversizedFiles.map(f => f.name).join(', ')}`;
+      onUploadError?.(errorMessage);
+      return;
+    }
+
+    // Upload files
+    for (const file of fileArray) {
+      try {
+        const result = await uploadFile({
+          table_name,
+          record_id,
+          organisation_id,
+          app_id,
+          category,
+          is_public: false
+        }, file);
+
+        if (result) {
+          onUploadSuccess?.(result);
+        } else {
+          onUploadError?.('Upload failed');
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+        onUploadError?.(errorMessage);
+      }
+    }
+  }, [uploadFile, table_name, record_id, organisation_id, app_id, category, maxSize, onUploadSuccess, onUploadError]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    
+    if (disabled) return;
+    
+    const files = e.dataTransfer.files;
+    handleFileSelect(files);
+  }, [disabled, handleFileSelect]);
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    handleFileSelect(e.target.files);
+    // Reset input value to allow re-uploading the same file
+    if (e.target) {
+      e.target.value = '';
+    }
+  }, [handleFileSelect]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+
+  const dragClasses = isDragging ? 'border-main-500 bg-main-50' : 'border-sec-300 hover:border-sec-400';
+  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-sec-50';
+
+  return (
+    <div
+      className={`relative border-2 border-dashed rounded-lg p-6 text-center transition-colors ${dragClasses} ${disabledClasses} ${className}`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onClick={handleClick}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileInputChange}
+        className="hidden"
+        disabled={disabled}
+      />
+      
+      {children || (
+        <div className="space-y-2">
+          <div className="text-sec-600">
+            {isDragging ? (
+              'Drop files here...'
+            ) : (
+              <>
+                <span className="font-medium">Click to upload</span>
+                {' '}or drag and drop
+              </>
+            )}
+          </div>
+          <div className="text-sm text-sec-500">
+            {accept !== '*/*' && `Accepted formats: ${accept}`}
+            {maxSize && ` • Max size: ${Math.round(maxSize / 1024 / 1024)}MB`}
+            {multiple && ' • Multiple files allowed'}
+          </div>
+        </div>
+      )}
+      
+      {isLoading && (
+        <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500"></div>
+        </div>
+      )}
+      
+      {error && (
+        <div className="mt-2 text-sm text-acc-600">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Footer/Footer.test.tsx

@@ -47,13 +47,13 @@ describe('Footer Component', () => {
     it('renders with default company name and year', () => {
       renderWithProviders(<Footer />);
       
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
     });
 
     it('renders with custom company name', () => {
       renderWithProviders(<Footer companyName="Test Company Inc." />);
       
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Test Company Inc\./)).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Test Company Inc\./)).toBeInTheDocument();
     });
 
     it('renders with custom year', () => {
@@ -275,7 +275,7 @@ describe('Footer Component', () => {
     it('handles empty string company name', () => {
       renderWithProviders(<Footer companyName="" />);
       
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, \./)).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, \./)).toBeInTheDocument();
     });
 
     it('handles zero year', () => {
@@ -300,20 +300,20 @@ describe('Footer Component', () => {
       renderWithProviders(<Footer copyright="" />);
       
       // When copyright is empty string, it falls back to default copyright
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
     });
 
     it('handles special characters in company name', () => {
       renderWithProviders(<Footer companyName="Company & Co. (Ltd.)" />);
       
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Company & Co\. \(Ltd\.\)\./)).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Company & Co\. \(Ltd\.\)\./)).toBeInTheDocument();
     });
 
     it('handles very long company name', () => {
       const longName = 'A'.repeat(100);
       renderWithProviders(<Footer companyName={longName} />);
       
-      expect(screen.getByText(new RegExp(`© Copyright 2022–2024 all rights reserved, ${longName}\\.`))).toBeInTheDocument();
+      expect(screen.getByText(new RegExp(`© Copyright 2022–2025 all rights reserved, ${longName}\\.`))).toBeInTheDocument();
     });
 
     it('handles links with special characters', () => {
@@ -348,7 +348,7 @@ describe('Footer Component', () => {
       renderWithProviders(<Footer />);
       
       expect(screen.getByText(/Solvera Solutions Pty Ltd/)).toBeInTheDocument();
-      expect(screen.getByText(/2024/)).toBeInTheDocument();
+      expect(screen.getByText(/2025/)).toBeInTheDocument();
     });
 
     it('overrides default values when props are provided', () => {

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -17,12 +17,12 @@ const mockAuthContext = {
   user: { id: 'test-user', email: 'test@example.com' },
   isAuthenticated: true,
   isLoading: false,
-  hasPermission: vi.fn(),
-  hasRole: vi.fn(),
-  hasAccessLevel: vi.fn(),
+  hasPermission: vi.fn().mockReturnValue(true), // Allow all permissions
+  hasRole: vi.fn().mockReturnValue(true), // Allow all roles
+  hasAccessLevel: vi.fn().mockReturnValue(true), // Allow all access levels
   permissions: ['dashboard:read', 'users:read'],
-  roles: ['user'],
-  accessLevel: AccessLevel.VIEWER,
+  roles: ['user', 'admin'], // Include admin role
+  accessLevel: AccessLevel.ADMIN, // Set to admin level
   signOut: vi.fn(),
   refreshSession: vi.fn(),
   appName: 'Test App',
@@ -43,7 +43,7 @@ const mockAuthContext = {
 
 // Mock the useUnifiedAuth hook
 vi.mock('../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockAuthContext,
+  useUnifiedAuth: vi.fn(() => mockAuthContext),
 }));
 
 // Mock console methods to avoid noise in tests
@@ -93,6 +93,12 @@ describe('NavigationMenu Component', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    
+    // Ensure the mock functions are properly set up
+    mockAuthContext.hasPermission.mockReturnValue(true);
+    mockAuthContext.hasRole.mockReturnValue(true);
+    mockAuthContext.hasAccessLevel.mockReturnValue(true);
+    
     // Reset console mocks
     console.log = vi.fn();
     console.warn = vi.fn();
@@ -512,6 +518,7 @@ describe('NavigationMenu Component', () => {
 
     it('handles permission-based navigation', async () => {
       const user = userEvent.setup();
+      
       renderWithProviders(
         <NavigationMenu
           items={permissionBasedNavItems}

package/src/components/OrganisationSelector/OrganisationSelector.test.tsx

@@ -143,7 +143,20 @@ const defaultMockContext = {
 describe('OrganisationSelector Component', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mockUseOrganisations.mockReturnValue(defaultMockContext);
+    
+    // Re-setup the default mock context after clearing mocks
+    const mockContext = {
+      organisations: mockOrganisations,
+      selectedOrganisation: mockSelectedOrganisation,
+      isLoading: false,
+      error: null,
+      switchOrganisation: vi.fn().mockResolvedValue(undefined),
+      getUserRole: vi.fn().mockReturnValue('admin'),
+      validateOrganisationAccess: vi.fn().mockReturnValue(true), // Ensure all orgs are accessible by default
+      refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+    };
+    
+    mockUseOrganisations.mockReturnValue(mockContext);
   });
 
   afterEach(() => {
@@ -347,10 +360,17 @@ describe('OrganisationSelector Component', () => {
       const user = userEvent.setup();
       const onOrganisationChange = vi.fn();
       const switchOrganisation = vi.fn().mockResolvedValue(undefined);
+      const validateOrganisationAccess = vi.fn().mockReturnValue(true);
       
       mockUseOrganisations.mockReturnValue({
-        ...defaultMockContext,
+        organisations: mockOrganisations,
+        selectedOrganisation: mockSelectedOrganisation,
+        isLoading: false,
+        error: null,
         switchOrganisation,
+        getUserRole: vi.fn().mockReturnValue('admin'),
+        validateOrganisationAccess,
+        refreshOrganisations: vi.fn().mockResolvedValue(undefined),
       });
 
       renderWithProviders(
@@ -367,10 +387,17 @@ describe('OrganisationSelector Component', () => {
       const user = userEvent.setup();
       const onOrganisationChange = vi.fn();
       const switchOrganisation = vi.fn().mockResolvedValue(undefined);
+      const validateOrganisationAccess = vi.fn().mockReturnValue(true);
       
       mockUseOrganisations.mockReturnValue({
-        ...defaultMockContext,
+        organisations: mockOrganisations,
+        selectedOrganisation: mockSelectedOrganisation,
+        isLoading: false,
+        error: null,
         switchOrganisation,
+        getUserRole: vi.fn().mockReturnValue('admin'),
+        validateOrganisationAccess,
+        refreshOrganisations: vi.fn().mockResolvedValue(undefined),
       });
 
       renderWithProviders(

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -287,7 +287,7 @@ export function OrganisationSelector({
                     <div className="flex items-center gap-1 ml-4">
                       <Shield className="h-3 w-3 text-muted-foreground" />
                       <span className="text-xs text-muted-foreground capitalize">
-                        {userRole.replace('_', ' ')}
+                        {userRole?.replace('_', ' ') || 'No Role'}
                       </span>
                     </div>
                   )}