@jmruthers/pace-core 0.5.127 → 0.5.129

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;
@@ -661,14 +662,24 @@ function DataTableInternal<TData extends DataRecord>({
       onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
     };
     
-    // Debug logging for creation handler
+    // Debug logging for handlers
+    console.log('[DataTableCore] Secure handlers setup:', {
+      'permissions.canExport.can': permissions.canExport.can,
+      'onExport prop provided': !!onExport,
+      'onExport type': typeof onExport,
+      'secureHandlers.onExport': !!handlers.onExport,
+    });
+    
     if (import.meta.env.MODE === 'development') {
-      logger.debug('[DataTableCore] Creation handler check:', {
+      logger.debug('[DataTableCore] Handler check:', {
         'permissions.canCreate.can': permissions.canCreate.can,
         'onCreateRow prop provided': !!onCreateRow,
         'secureHandlers.onCreateRow': !!handlers.onCreateRow,
         'secureFeatures.creation': secureFeatures.creation,
-        'will pass onCreateRow to toolbar': secureFeatures.creation && !!handlers.onCreateRow
+        'will pass onCreateRow to toolbar': secureFeatures.creation && !!handlers.onCreateRow,
+        'permissions.canExport.can': permissions.canExport.can,
+        'onExport prop provided': !!onExport,
+        'secureHandlers.onExport': !!handlers.onExport,
       });
     }
     
@@ -1011,9 +1022,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 +1037,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 +1055,90 @@ 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
+                  console.log('[DataTableCore] Export handler check:', {
+                    'secureHandlers.onExport exists': !!secureHandlers.onExport,
+                    'permissions.canExport.can': permissions.canExport.can,
+                    'onExport prop provided': !!onExport,
+                    'onExport type': typeof onExport,
+                  });
+                  
+                  if (secureHandlers.onExport) {
+                    console.log('[DataTableCore] ✅ Calling custom onExport handler');
+                    logger.debug('[DataTableCore] Calling custom onExport handler');
+                    await secureHandlers.onExport(exportOptions);
+                    console.log('[DataTableCore] ✅ Custom onExport handler completed');
+                    logger.debug('[DataTableCore] Custom onExport handler completed');
+                    return;
+                  } else {
+                    console.warn('[DataTableCore] ⚠️ No custom onExport handler, using default export', {
+                      'secureHandlers.onExport': !!secureHandlers.onExport,
+                      'permissions.canExport.can': permissions.canExport.can,
+                      'onExport prop provided': !!onExport,
+                    });
+                    logger.debug('[DataTableCore] No custom onExport handler, using default export', {
+                      'secureHandlers.onExport': !!secureHandlers.onExport,
+                      'permissions.canExport.can': permissions.canExport.can,
+                      'onExport prop provided': !!onExport,
+                    });
+                  }
+                  
+                  // 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 +1154,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/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/PaceAppLayout/PaceAppLayout.tsx

@@ -106,6 +106,7 @@ import { useEventTheme } from '../../hooks/useEventTheme';
 import { useCan, useResolvedScope } from '../../rbac/hooks';
 import { createScopeFromEvent } from '../../rbac/utils/eventContext';
 import { getCurrentAppName } from '../../utils/appNameResolver';
+import { isSuperAdmin } from '../../rbac/api';
 import type { Permission, Scope } from '../../rbac/types';
 
 // Stable empty objects to prevent infinite loops
@@ -202,6 +203,12 @@ export interface PaceAppLayoutProps {
  * Outlet to render child routes. It provides integrated authentication, navigation,
  * and user management functionality.
  * 
+ * **Super Admin Access:** When `enforcePermissions={true}`, PaceAppLayout automatically
+ * checks if the user is a super admin before enforcing permissions. Super admins bypass
+ * all permission checks and can access any route without violations. The component extracts
+ * base page names from route paths (e.g., `/organisation/scouts-victoria` → `"organisation"`)
+ * for permission checking, which can be overridden using `pageIdMapping`.
+ * 
  * **Important:** The appName prop should use an APP_NAME constant declared in your App.tsx
  * file. This ensures consistency with public pages (via PublicPageProvider) which should
  * also receive the same APP_NAME constant. The logo URL is automatically constructed as
@@ -218,6 +225,7 @@ export interface PaceAppLayoutProps {
  * - Layout-level permission enforcement
  * - Permission-based navigation filtering
  * - Automatic page permission validation
+ * - Super admin bypass (super admins automatically bypass all permission checks)
  * 
  * @example
  * Basic React Router setup with permission enforcement (RECOMMENDED):
@@ -418,9 +426,17 @@ export function PaceAppLayout({
   }, [location.pathname, routePermissions, defaultPermission]);
 
   // Get current page ID for permission checking
+  // Extract base page name (first path segment) instead of full route path
+  // Example: /organisation/scouts-victoria -> "organisation"
   const currentPageId = useMemo(() => {
     const currentPath = location.pathname;
-    return pageIdMapping[currentPath] || currentPath.slice(1) || 'home';
+    // Use pageIdMapping if provided (takes precedence)
+    if (pageIdMapping[currentPath]) {
+      return pageIdMapping[currentPath];
+    }
+    // Extract first path segment (base page name)
+    const pathSegments = currentPath.slice(1).split('/').filter(Boolean);
+    return pathSegments[0] || 'home';
   }, [location.pathname, pageIdMapping]);
 
   // Build permission string in format: operation:page.pageId
@@ -432,8 +448,37 @@ export function PaceAppLayout({
     return permissionString as Permission;
   }, [enforcePermissions, currentRoutePermission, currentPageId]);
 
+  // Check super admin status before permission enforcement
+  const [isSuperAdminUser, setIsSuperAdminUser] = useState<boolean>(false);
+  const [isCheckingSuperAdmin, setIsCheckingSuperAdmin] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkSuperAdminStatus = async () => {
+      if (!user?.id) {
+        setIsSuperAdminUser(false);
+        setIsCheckingSuperAdmin(false);
+        return;
+      }
+
+      setIsCheckingSuperAdmin(true);
+      try {
+        const superAdminStatus = await isSuperAdmin(user.id);
+        setIsSuperAdminUser(superAdminStatus);
+      } catch (error) {
+        console.error('[PaceAppLayout] Error checking super admin status:', error);
+        setIsSuperAdminUser(false);
+      } finally {
+        setIsCheckingSuperAdmin(false);
+      }
+    };
+
+    checkSuperAdminStatus();
+  }, [user?.id]);
+
   // Use useCan hook for permission checking (standardized approach)
-  const { can, isLoading: isCheckingPermission, error: permissionError } = useCan(
+  // Note: The database function already handles super admin bypass, but we check here
+  // as an additional safety layer to prevent unnecessary permission checks
+  const { can: canFromHook, isLoading: isCheckingPermission, error: permissionError } = useCan(
     user?.id || '',
     scope,
     currentPermission,
@@ -441,7 +486,9 @@ export function PaceAppLayout({
     true // useCache
   );
 
-  // Permission enforcement state - sync from useCan
+  // Permission enforcement state - super admin bypasses all checks
+  // This ensures super admins never see permission errors even if useCan hasn't completed
+  const can = isSuperAdminUser ? true : canFromHook;
   const hasPermission = enforcePermissions ? can : true;
 
   // Handle permission check results with audit logging and callbacks
@@ -451,17 +498,19 @@ export function PaceAppLayout({
     }
 
     // Only proceed when permission check is complete (not loading)
-    if (isCheckingPermission) {
+    // Wait for both super admin check and permission check to complete
+    if (isCheckingSuperAdmin || isCheckingPermission) {
       return;
     }
 
     // NEW: Phase 1 - Enhanced Security Features
-    // Handle strict mode violations
-    if (strictMode && !can) {
+    // Handle strict mode violations - skip for super admins
+    if (strictMode && !isSuperAdminUser && !can) {
       console.error(`[PaceAppLayout] STRICT MODE VIOLATION: User attempted to access protected page without permission`, {
         pageName: currentPageId,
         operation: currentRoutePermission,
         userId: user?.id,
+        isSuperAdmin: isSuperAdminUser,
         timestamp: new Date().toISOString()
       });
       
@@ -470,11 +519,11 @@ export function PaceAppLayout({
       }
     }
     
-    // Handle page access denied callback
-    if (!can && onPageAccessDenied) {
+    // Handle page access denied callback - skip for super admins
+    if (!isSuperAdminUser && !can && onPageAccessDenied) {
       onPageAccessDenied(currentPageId, currentRoutePermission);
     }
-  }, [enforcePermissions, can, isCheckingPermission, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
+  }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
 
   // Filter navigation items based on permissions
   // This works independently of route enforcement - navigation filtering doesn't require enforcePermissions
@@ -702,8 +751,8 @@ export function PaceAppLayout({
     return result || { error: null };
   };
 
-  // Show loading state while checking permissions
-  if (enforcePermissions && isCheckingPermission) {
+  // Show loading state while checking permissions or super admin status
+  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">

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

@@ -114,11 +114,13 @@ vi.mock('../../../hooks/useEventTheme', () => ({
 const mockIsPermitted = vi.fn().mockResolvedValue(true);
 const mockCheckPermission = vi.fn().mockResolvedValue(true);
 
+const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
+
 vi.mock('../../../rbac/api', () => ({
   isPermitted: vi.fn().mockResolvedValue(true),
   getPermissionMap: vi.fn().mockResolvedValue({}),
   getAccessLevel: vi.fn().mockResolvedValue('viewer'),
-  isSuperAdmin: vi.fn().mockResolvedValue(false),
+  isSuperAdmin: (...args: any[]) => mockIsSuperAdmin(...args),
   setupRBAC: vi.fn()
 }));
 
@@ -232,6 +234,10 @@ describe('PaceAppLayout Security', () => {
     mockIsPermitted.mockClear();
     mockIsPermitted.mockResolvedValue(true);
     
+    // Reset super admin mock
+    mockIsSuperAdmin.mockClear();
+    mockIsSuperAdmin.mockResolvedValue(false);
+    
     // Reset RBAC hook mocks
     mockHasPermissionRBAC.mockClear();
     mockHasPermissionRBAC.mockResolvedValue(true);
@@ -789,6 +795,80 @@ describe('PaceAppLayout Security', () => {
       });
     });
 
+    it('allows super admin to bypass all permission checks', async () => {
+      // Mock super admin status
+      mockIsSuperAdmin.mockResolvedValueOnce(true);
+      
+      // Mock useCan to return false (would normally deny access)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+      
+      render(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            enforcePermissions={true}
+            routePermissions={{
+              '/test-path': 'read'
+            }}
+          />
+        </TestWrapper>
+      );
+      
+      await waitFor(() => {
+        // Super admin should bypass permission checks and see content
+        expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+        expect(screen.getByTestId('mock-outlet')).toBeInTheDocument();
+        // Should NOT show access denied
+        expect(screen.queryByText('Access Denied')).not.toBeInTheDocument();
+      }, { timeout: 2000 });
+    }, { timeout: 3000 });
+
+    it('does not log strict mode violations for super admins', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      // Mock super admin status
+      mockIsSuperAdmin.mockResolvedValueOnce(true);
+      
+      // Mock useCan to return false (would normally trigger violation)
+      mockUseCan.mockReturnValueOnce({
+        can: false,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn().mockResolvedValue(undefined),
+      });
+      
+      render(
+        <TestWrapper>
+          <PaceAppLayout 
+            appName="Test App" 
+            enforcePermissions={true}
+            strictMode={true}
+            routePermissions={{
+              '/test-path': 'read'
+            }}
+          />
+        </TestWrapper>
+      );
+      
+      await waitFor(() => {
+        // Wait for super admin check to complete
+        expect(mockIsSuperAdmin).toHaveBeenCalled();
+      });
+      
+      // Should not log strict mode violations for super admins
+      const violationLogs = consoleSpy.mock.calls.filter(call => 
+        call[0]?.includes('STRICT MODE VIOLATION')
+      );
+      expect(violationLogs).toHaveLength(0);
+      
+      consoleSpy.mockRestore();
+    }, { timeout: 3000 });
+
     it('prevents privilege escalation', async () => {
       // Test that users cannot escalate their privileges
       // Create a test wrapper with admin path for privilege escalation test