@jmruthers/pace-core 0.5.126 → 0.5.128

package/src/components/DataTable/components/DataTableCore.tsx

@@ -46,6 +46,7 @@ import { useCan, useResolvedScope } from '../../../rbac/hooks';
 // Do NOT set duration or timeout properties - let the toast system use its default.
 import { toast } from '../../../hooks/useToast';
 import { exportToCSV, exportToCSVWithTableRows } from '../utils/exportUtils';
+import type { ExportOptions } from '../types';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { Scope } from '../../../rbac/types';
 import { useDataTablePermissions } from '../hooks/useDataTablePermissions';
@@ -150,7 +151,7 @@ export interface DataTableCoreProps<TData extends DataRecord> {
   onDeleteRow?: (row: TData) => void;
   onCreateRow?: (data: Partial<TData>) => void;
   onImport?: (data: TData[]) => void | Promise<void>;
-  onExport?: () => void;
+  onExport?: (options: import('../types').ExportOptions<TData>) => void | Promise<void>;
   onRowSelectionChange?: (selection: Record<string, boolean>) => void;
   selection?: Record<string, boolean>;
   onDeleteSelected?: (selectedRows: Record<string, boolean>) => void;
@@ -1011,9 +1012,9 @@ function DataTableInternal<TData extends DataRecord>({
                 }
                 stateActions.setImportModal(true);
               }}
-              onExport={secureHandlers.onExport || (async () => {
+              onExport={async () => {
                 try {
-                  // Automatic export: exports exactly what's shown in the table
+                  // Prepare export options with all available data
                   // Get the table rows (which have getValue() that properly evaluates accessorFn)
                   const tableRows = table.getFilteredRowModel().rows;
                   
@@ -1026,16 +1027,8 @@ function DataTableInternal<TData extends DataRecord>({
                     return !isSystemColumn && col.getIsVisible();
                   });
                   
-                  // Map table columns to export columns
-                  // Use TanStack Table's getValue() which properly handles accessorFn
-                  const visibleColumns: Array<{
-                    header?: string;
-                    id?: string;
-                    accessorKey?: string;
-                    accessorFn?: (row: any) => any;
-                    editAccessorKey?: string;
-                    isIdColumn?: boolean;
-                  }> = [];
+                  // Map table columns to visible columns
+                  const visibleColumns: DataTableColumn<TData>[] = [];
                   
                   // Store mapping of column IDs to table column instances for getValue() calls
                   const columnIdToTableColumn = new Map<string, typeof visibleTableColumns[0]>();
@@ -1052,42 +1045,68 @@ function DataTableInternal<TData extends DataRecord>({
                     // Store the table column for getValue() calls
                     columnIdToTableColumn.set(tableCol.id, tableCol);
                     
-                    const hasAccessorFn = 'accessorFn' in originalCol && (originalCol as any).accessorFn;
-                    const editAccessorKey = originalCol.editAccessorKey;
-                    
                     // Add the display column (what's shown in the table)
-                    // For columns with accessorFn, we'll use the table's getValue() method instead of calling accessorFn directly
-                    const displayHeader = typeof originalCol.header === 'string' 
-                      ? originalCol.header 
-                      : originalCol.accessorKey || tableCol.id || 'Column';
-                    
-                    visibleColumns.push({
-                      ...originalCol,
-                      header: displayHeader,
-                      // Store table column ID for getValue() lookup
-                      id: tableCol.id,
-                      // Preserve accessorFn if present (will use getValue() if available)
-                      accessorFn: hasAccessorFn ? (originalCol as any).accessorFn : undefined,
-                    });
-                    
-                    // Note: We do NOT export editAccessorKey fields as separate columns
-                    // Only visible columns (with their display values via accessorFn) are exported
-                    // This ensures exports match what users see in the table
+                    visibleColumns.push(originalCol);
                   });
                   
                   // Generate filename with timestamp
                   const timestamp = new Date().toISOString().split('T')[0];
                   const filename = title ? `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${timestamp}.csv` : `data_export_${timestamp}.csv`;
                   
+                  // Create export options
+                  const exportOptions: ExportOptions<TData> = {
+                    tableRows,
+                    allColumns: columns,
+                    visibleColumns,
+                    columnIdToTableColumn,
+                    data,
+                    filename,
+                    table
+                  };
+                  
+                  // If custom handler provided, call it with options
+                  if (secureHandlers.onExport) {
+                    await secureHandlers.onExport(exportOptions);
+                    return;
+                  }
+                  
+                  // Default export: exports exactly what's shown in the table
+                  // Convert visible columns to ExportColumn format
+                  const exportColumns: Array<{
+                    header?: string;
+                    id?: string;
+                    accessorKey?: string;
+                    accessorFn?: (row: any) => any;
+                    editAccessorKey?: string;
+                    isIdColumn?: boolean;
+                  }> = exportOptions.visibleColumns.map(col => {
+                    const colId = col.id || col.accessorKey;
+                    const hasAccessorFn = 'accessorFn' in col && (col as any).accessorFn;
+                    
+                    return {
+                      ...col,
+                      header: typeof col.header === 'string' 
+                        ? col.header 
+                        : col.accessorKey || colId || 'Column',
+                      id: colId ? String(colId) : undefined,
+                      accessorFn: hasAccessorFn ? (col as any).accessorFn : undefined,
+                    };
+                  });
+                  
                   // Export using table rows with getValue() for proper accessorFn evaluation
                   // This ensures we get the same values that are displayed in the table
-                  await exportToCSVWithTableRows(tableRows, visibleColumns, columnIdToTableColumn, filename);
+                  await exportToCSVWithTableRows(
+                    exportOptions.tableRows, 
+                    exportColumns, 
+                    exportOptions.columnIdToTableColumn, 
+                    exportOptions.filename
+                  );
                   
                   // Show success toast notification
                   // NOTE: Toast notifications use default timeout (5 seconds) - do not set duration property
                   toast({
                     title: "Export Successful",
-                    description: `Data exported to ${filename}`,
+                    description: `Data exported to ${exportOptions.filename}`,
                     variant: "default"
                   });
                   
@@ -1103,7 +1122,7 @@ function DataTableInternal<TData extends DataRecord>({
                     variant: "destructive"
                   });
                 }
-              })}
+              }}
               rowSelection={rowSelection}
               onDeleteSelected={secureHandlers.onDeleteSelected ? async (selectedRows: Record<string, boolean>) => {
                 const selectedCount = Object.values(selectedRows).filter(Boolean).length;

package/src/components/DataTable/components/ImportModal.tsx

@@ -39,6 +39,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../Dialog';
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
+import { Progress } from '../../Progress/Progress';
 import { Upload, FileText, AlertCircle } from 'lucide-react';
 import { createLogger } from '../../../utils/logger';
 
@@ -115,6 +116,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
   const [previewData, setPreviewData] = useState<Array<Record<string, unknown>> | null>(null);
   const [totalCount, setTotalCount] = useState<number>(0);
   const [validationErrors, setValidationErrors] = useState<Array<{row: number; field: string; message: string}>>([]);
+  const [importProgress, setImportProgress] = useState<{ current: number; total: number; stage: 'parsing' | 'importing' } | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isMountedRef = useRef(true);
 
@@ -135,6 +137,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
       setError(null);
       setValidationErrors([]);
       setIsProcessing(false);
+      setImportProgress(null);
       // Reset file input
       if (fileInputRef.current) {
         fileInputRef.current.value = '';
@@ -211,24 +214,126 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
     setIsProcessing(true);
     setError(null);
+    setImportProgress({ current: 0, total: 0, stage: 'parsing' });
 
     try {
+      // Step 1: Parse CSV with progress indication
       const text = await file.text();
-      const data = processCSV(text);
+      const lines = text.split('\n').filter(line => line.trim());
+      const totalLines = lines.length;
+      
+      if (totalLines < 2) {
+        throw new Error('CSV must have at least a header row and one data row');
+      }
+
+      // For large files, process in chunks to show progress
+      const CHUNK_SIZE = 1000; // Process 1000 rows at a time
+      const data: Array<Record<string, unknown>> = [];
+      
+      if (totalLines > CHUNK_SIZE) {
+        // Large file - process in chunks with progress
+        const parseCSVLine = (line: string): string[] => {
+          const result: string[] = [];
+          let current = '';
+          let inQuotes = false;
+          
+          for (let i = 0; i < line.length; i++) {
+            const char = line[i];
+            
+            if (char === '"') {
+              inQuotes = !inQuotes;
+            } else if (char === ',' && !inQuotes) {
+              result.push(current.trim());
+              current = '';
+            } else {
+              current += char;
+            }
+          }
+          result.push(current.trim());
+          return result;
+        };
+
+        const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
+        
+        // Process data rows in chunks
+        for (let i = 1; i < totalLines; i += CHUNK_SIZE) {
+          const chunkEnd = Math.min(i + CHUNK_SIZE, totalLines);
+          const chunk = lines.slice(i, chunkEnd);
+          
+          chunk.forEach((line, index) => {
+            const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
+            const row: Record<string, unknown> = {};
+            headers.forEach((header, colIndex) => {
+              row[header] = values[colIndex] || '';
+            });
+            data.push(row);
+          });
+          
+          // Update progress
+          const processed = Math.min(chunkEnd - 1, totalLines - 1);
+          if (isMountedRef.current) {
+            setImportProgress({ 
+              current: processed, 
+              total: totalLines - 1, 
+              stage: 'parsing' 
+            });
+          }
+          
+          // Yield to browser to update UI
+          await new Promise(resolve => setTimeout(resolve, 0));
+        }
+      } else {
+        // Small file - process normally
+        const parsedData = processCSV(text);
+        data.push(...parsedData);
+        if (isMountedRef.current) {
+          setImportProgress({ 
+            current: totalLines - 1, 
+            total: totalLines - 1, 
+            stage: 'parsing' 
+          });
+        }
+      }
+      
+      // Step 2: Import data with progress indication
+      if (isMountedRef.current) {
+        setImportProgress({ 
+          current: 0, 
+          total: data.length, 
+          stage: 'importing' 
+        });
+      }
       
       // Await the onImport callback in case it returns a promise
       const result = onImport(data);
       if (result && typeof result.then === 'function') {
+        // For async imports, we can't track exact progress, but we show it's processing
+        // The progress will remain at 0 until the import completes
         await result;
       }
+      // Note: For synchronous imports, the progress stays at 0 until we mark it complete
+      
+      // Mark as complete
+      if (isMountedRef.current) {
+        setImportProgress({ 
+          current: data.length, 
+          total: data.length, 
+          stage: 'importing' 
+        });
+      }
+      
+      // Small delay to show completion
+      await new Promise(resolve => setTimeout(resolve, 300));
       
       onClose();
       setFile(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to process file');
+      setImportProgress(null);
     } finally {
       if (isMountedRef.current) {
         setIsProcessing(false);
+        setImportProgress(null);
       }
     }
   };
@@ -239,6 +344,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     setPreviewData(null);
     setTotalCount(0);
     setValidationErrors([]);
+    setImportProgress(null);
     onClose();
   };
   
@@ -338,7 +444,33 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
           )}
 
 
-          {file && previewData && previewData.length > 0 ? (
+          {importProgress && isProcessing && (
+            <div className="space-y-2 p-4 bg-sec-50 rounded-lg border border-sec-200">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-sec-900">
+                  {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
+                </span>
+                <span className="text-sm text-sec-600">
+                  {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
+                </span>
+              </div>
+              <Progress 
+                value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
+                className="h-2 bg-sec-200"
+              />
+              <p className="text-xs text-sec-500">
+                {importProgress.total > 0 && importProgress.current < importProgress.total
+                  ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
+                  : importProgress.stage === 'importing' && importProgress.current === 0
+                  ? 'Processing your data...'
+                  : importProgress.current === importProgress.total
+                  ? 'Complete!'
+                  : 'Processing...'}
+              </p>
+            </div>
+          )}
+
+          {file && previewData && previewData.length > 0 && !isProcessing ? (
             <div className="space-y-3">
               <h4 className="text-sec-900">{previewHeaderText}</h4>
               <div className="border rounded-lg overflow-hidden">

package/src/components/DataTable/index.ts

@@ -44,7 +44,9 @@ export type {
   PerformanceConfig,
   ServerSideConfig,
   ChunkingConfig,
-  SearchIndexConfig
+  SearchIndexConfig,
+  // Export types
+  ExportOptions
 } from './types';
 
 export {

package/src/components/DataTable/types.ts

@@ -604,6 +604,52 @@ export interface RBACContext {
   pageId: string;
 }
 
+// ============================================================================
+// EXPORT TYPES
+// ============================================================================
+
+/**
+ * Options provided to the onExport handler for custom export functionality
+ * 
+ * @example
+ * ```tsx
+ * <DataTable
+ *   onExport={async (options) => {
+ *     // Export only specific columns
+ *     const customColumns = options.allColumns.filter(col => 
+ *       ['name', 'email', 'role'].includes(col.accessorKey || '')
+ *     );
+ *     await exportToCSVWithTableRows(
+ *       options.tableRows,
+ *       customColumns,
+ *       options.columnIdToTableColumn,
+ *       'custom-export.csv'
+ *     );
+ *   }}
+ * />
+ * ```
+ */
+export interface ExportOptions<TData extends DataRecord> {
+  /** Filtered table rows with getValue() method for proper accessorFn evaluation */
+  tableRows: Array<{
+    original: TData;
+    getValue: (columnId: string) => any;
+    id: string;
+  }>;
+  /** All column definitions passed to the DataTable */
+  allColumns: DataTableColumn<TData>[];
+  /** Currently visible columns in the table */
+  visibleColumns: DataTableColumn<TData>[];
+  /** Mapping of column IDs to TanStack table column instances (for getValue() calls) */
+  columnIdToTableColumn: Map<string, any>;
+  /** Raw data array (unfiltered) */
+  data: TData[];
+  /** Default filename generated from table title */
+  filename: string;
+  /** TanStack table instance for advanced operations */
+  table: any; // Using any to avoid tight coupling with TanStack types
+}
+
 // ============================================================================
 // MAIN COMPONENT PROPS
 // ============================================================================
@@ -672,6 +718,28 @@ export interface DataTableProps<TData extends DataRecord> {
   onCreateRow?: (data: Partial<TData>) => void;
   /** Import handler */
   onImport?: (data: TData[]) => void | Promise<void>;
+  /** 
+   * Export handler - allows custom export logic with full control over columns and data
+   * 
+   * If not provided, defaults to exporting all visible columns.
+   * 
+   * @example
+   * ```tsx
+   * // Custom export with specific columns
+   * onExport={async (options) => {
+   *   const exportColumns = options.allColumns.filter(col => 
+   *     ['name', 'email'].includes(col.accessorKey || '')
+   *   );
+   *   await exportToCSVWithTableRows(
+   *     options.tableRows,
+   *     exportColumns,
+   *     options.columnIdToTableColumn,
+   *     'users-export.csv'
+   *   );
+   * }}
+   * ```
+   */
+  onExport?: (options: ExportOptions<TData>) => void | Promise<void>;
   /** Row selection change handler */
   onRowSelectionChange?: (selection: Record<string, boolean>) => void;
   /** Controlled selection state */

package/src/components/Dialog/Dialog.tsx

@@ -617,24 +617,11 @@ const DialogBody = ({
       return null;
     }
 
-    console.log('🔍 Dialog HTML Debug:', {
-      originalHtml: htmlContent,
-      allowHtml,
-      strictSanitization,
-      logWarnings
-    });
-
     const result = renderSafeHtml(htmlContent, {
       strict: strictSanitization,
       logWarnings
     });
 
-    console.log('🔍 Dialog HTML Result:', {
-      sanitizedHtml: result.html,
-      isValid: result.isValid,
-      warnings: result.warnings
-    });
-
     return result.html;
   }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
 

package/src/components/FileDisplay/FileDisplay.tsx

@@ -502,7 +502,51 @@ function FileDisplayPublic({
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
 
+  // Step 4: Log Supabase client context
+  console.log('[FileDisplayPublic] Supabase Client Context:', {
+    hasPublicPageContext: !!publicPageContext,
+    hasSupabaseClient: !!supabase,
+    supabaseUrl: publicPageContext?.environment?.supabaseUrl || 'not available',
+    hasAnonKey: !!publicPageContext?.environment?.supabaseKey,
+    hasAuth: !!supabase?.auth,
+    organisation_id,
+    table_name,
+    record_id,
+    category,
+    context: 'public_page_anonymous_user',
+    note: 'Public pages use anonymous Supabase client (no user session)'
+  });
+
   if (!supabase) {
+    // If fallback is enabled, show fallback UI instead of error
+    if (showFallback) {
+      return (
+        <FileDisplayContent
+          isLoading={false}
+          error={null}
+          fileUrl={null}
+          fileReference={null}
+          fileReferences={[]}
+          fileUrls={new Map()}
+          fileCount={0}
+          category={category}
+          displayOnly={displayOnly}
+          showDelete={false}
+          className={className}
+          children={children}
+          onDelete={undefined}
+          organisation_id={organisation_id}
+          loadingComponent={loadingComponent}
+          errorComponent={errorComponent}
+          showFallback={showFallback}
+          generateFallbackText={generateFallbackText}
+          fallbackText={fallbackText}
+          fallbackSize={fallbackSize}
+        />
+      );
+    }
+    
+    // Only show error if fallback is not enabled
     return (
       <div className={`text-sec-500 text-center p-4 ${className}`}>
         Supabase client not available in public context
@@ -527,6 +571,38 @@ function FileDisplayPublic({
     { supabase }
   );
 
+  // Log errors for debugging public file display issues
+  if (error) {
+    console.error('[FileDisplayPublic] Error fetching file:', {
+      table_name,
+      record_id,
+      organisation_id,
+      category,
+      error: error.message,
+      errorStack: error.stack
+    });
+  }
+
+  // Log when file is successfully loaded
+  if (fileUrl && !isLoading && !error) {
+    console.log('[FileDisplayPublic] File loaded successfully:', {
+      table_name,
+      record_id,
+      category,
+      fileUrl: fileUrl.substring(0, 50) + '...' // Truncate URL for logging
+    });
+  }
+
+  // Log when no file is found (but not an error - might be expected)
+  if (!isLoading && !error && !fileUrl && !fileReference) {
+    console.log('[FileDisplayPublic] No file found (will show fallback if enabled):', {
+      table_name,
+      record_id,
+      category,
+      showFallback
+    });
+  }
+
   // Public context doesn't support delete operations
   const handleDelete = async () => {
     // Delete operations are not available in public context for security reasons

package/src/components/Header/Header.tsx

@@ -137,6 +137,11 @@ export interface HeaderProps {
  * A flexible header component that supports various configurations including custom logos,
  * navigation menus, user authentication, event selection, and custom actions.
  * 
+ * **Logo Display:** When used via PaceAppLayout, the logo URL is automatically constructed
+ * from the appName prop as `/${appName.toLowerCase()}_logo_wide.svg`. The appName should
+ * come from an APP_NAME constant declared in your App.tsx file to ensure consistency across
+ * authenticated and public pages.
+ * 
  * Features:
  * - Customizable logo (URL or custom component)
  * - Clickable logo that automatically routes to dashboard (configurable via logoHref)