@jmruthers/pace-core 0.5.4 → 0.5.6

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

@@ -171,66 +171,15 @@ function DataTableInternal<TData extends DataRecord>({
 }: DataTableCoreProps<TData>) {
   
   // ============================================================================
-  // MANDATORY RBAC ENFORCEMENT
+  // ALL HOOKS MUST BE CALLED IN THE SAME ORDER EVERY RENDER
   // ============================================================================
   
-  // MANDATORY: Get authenticated user
+  // MANDATORY: Get authenticated user - ALWAYS call this hook
   const authResult = useUnifiedAuth();
   const user = authResult.user;
   
-  // MANDATORY: Every DataTable must have a user and RBAC config
-  if (!user) {
-    throw new Error('DataTable requires authenticated user for RBAC');
-  }
-  
-  if (!rbac?.resource) {
-    throw new Error('DataTable requires rbac.resource for permission checking');
-  }
-
-  const scope = {
-    organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
-    eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
-    appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
-  };
-
-  // MANDATORY: Check all permissions upfront - ALWAYS enforce RBAC
-  const permissions = {
-    canRead: useCan(user.id, scope, `read:${rbac.resource}` as any, rbac.pageId),
-    canCreate: useCan(user.id, scope, `create:${rbac.resource}` as any, rbac.pageId),
-    canUpdate: useCan(user.id, scope, `update:${rbac.resource}` as any, rbac.pageId),
-    canDelete: useCan(user.id, scope, `delete:${rbac.resource}` as any, rbac.pageId),
-    canExport: useCan(user.id, scope, `manage:${rbac.resource}` as any, rbac.pageId), // Using manage for export/import
-    canImport: useCan(user.id, scope, `manage:${rbac.resource}` as any, rbac.pageId), // Using manage for export/import
-  };
-
-  // MANDATORY: No data access without read permission
-  if (!permissions.canRead.can) {
-    return <AccessDeniedPage resource={rbac?.resource || 'test-resource'} operation="read" />;
-  }
-
-  // MANDATORY: Features are automatically filtered by permissions
-  const secureFeatures: DataTableFeatureConfig = {
-    ...features,
-    creation: features.creation && permissions.canCreate.can,
-    editing: features.editing && permissions.canUpdate.can,
-    deletion: features.deletion && permissions.canDelete.can,
-    deleteSelected: features.deleteSelected && permissions.canDelete.can,
-    export: features.export && permissions.canExport.can,
-    import: features.import && permissions.canImport.can,
-  };
-
-  // MANDATORY: Handlers are automatically secured
-  const secureHandlers = {
-    onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
-    onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
-    onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
-    onImport: permissions.canImport.can ? onImport : undefined,
-    onExport: permissions.canExport.can ? onExport : undefined,
-    onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
-  };
-  
   // ============================================================================
-  // TABLE STATE MANAGEMENT (Single State Source)
+  // TABLE STATE MANAGEMENT (Single State Source) - ALWAYS call these hooks
   // ============================================================================
   
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -257,7 +206,7 @@ function DataTableInternal<TData extends DataRecord>({
   const [expanded, setExpanded] = useState<ExpandedState>({});
   
   // ============================================================================
-  // PAGINATION STATE MANAGEMENT
+  // PAGINATION STATE MANAGEMENT - ALWAYS call these hooks
   // ============================================================================
   
   const [pagination, setPagination] = useState<PaginationState>({
@@ -266,7 +215,7 @@ function DataTableInternal<TData extends DataRecord>({
   });
   
   // ============================================================================
-  // EDITING STATE MANAGEMENT
+  // EDITING STATE MANAGEMENT - ALWAYS call these hooks
   // ============================================================================
   
   // Use the centralized state management hook
@@ -284,19 +233,19 @@ function DataTableInternal<TData extends DataRecord>({
   const editingData = tableState.editingData;
   
   // ============================================================================
-  // IMPORT MODAL STATE MANAGEMENT
+  // IMPORT MODAL STATE MANAGEMENT - ALWAYS call these hooks
   // ============================================================================
   
   const [showImportModal, setShowImportModal] = useState(false);
   
   // ============================================================================
-  // FILTER ROW VISIBILITY STATE MANAGEMENT
+  // FILTER ROW VISIBILITY STATE MANAGEMENT - ALWAYS call these hooks
   // ============================================================================
   
   const [showFilterRow, setShowFilterRow] = useState(false);
   
   // ============================================================================
-  // PERFORMANCE HOOK
+  // PERFORMANCE HOOK - ALWAYS call this hook
   // ============================================================================
   
   const performanceHook = useDataTablePerformance({
@@ -322,7 +271,7 @@ function DataTableInternal<TData extends DataRecord>({
   } = performanceHook;
 
   // ============================================================================
-  // HIERARCHICAL DATA VALIDATION AND PROCESSING
+  // HIERARCHICAL DATA VALIDATION AND PROCESSING - ALWAYS call these hooks
   // ============================================================================
   
   const hierarchicalValidation = useMemo(() => {
@@ -340,7 +289,7 @@ function DataTableInternal<TData extends DataRecord>({
   }, [features.hierarchical, hierarchical?.enabled, hierarchicalValidation.isValid, data]);
 
   // ============================================================================
-  // HIERARCHICAL STATE MANAGEMENT
+  // HIERARCHICAL STATE MANAGEMENT - ALWAYS call these hooks
   // ============================================================================
   
   const hierarchicalState = useHierarchicalState(
@@ -349,7 +298,7 @@ function DataTableInternal<TData extends DataRecord>({
   );
 
   // ============================================================================
-  // COLUMN ORDER PERSISTENCE
+  // COLUMN ORDER PERSISTENCE - ALWAYS call these hooks
   // ============================================================================
   
   const {
@@ -363,7 +312,45 @@ function DataTableInternal<TData extends DataRecord>({
   });
 
   // ============================================================================
-  // CONFIGURATION RESOLUTION
+  // RBAC PERMISSION CHECKS - ALWAYS call these hooks
+  // ============================================================================
+  
+  // MANDATORY: Check all permissions upfront - ALWAYS enforce RBAC
+  const permissions = {
+    canRead: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `read:${rbac.resource}` as any, rbac.pageId),
+    canCreate: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `create:${rbac.resource}` as any, rbac.pageId),
+    canUpdate: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `update:${rbac.resource}` as any, rbac.pageId),
+    canDelete: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `delete:${rbac.resource}` as any, rbac.pageId),
+    canExport: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `manage:${rbac.resource}` as any, rbac.pageId), // Using manage for export/import
+    canImport: useCan(user?.id || '', {
+      organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+      eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+      appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+    }, `manage:${rbac.resource}` as any, rbac.pageId), // Using manage for export/import
+  };
+
+  // ============================================================================
+  // CONFIGURATION RESOLUTION - ALWAYS call these hooks
   // ============================================================================
   
   const finalPaginationMode = paginationMode || detectedMode;
@@ -393,7 +380,7 @@ function DataTableInternal<TData extends DataRecord>({
   const isLoading = externalIsLoading || performanceLoading;
   
   // ============================================================================
-  // DATA PROCESSING
+  // DATA PROCESSING - ALWAYS call these hooks
   // ============================================================================
   
   // Data comparison utility to prevent unnecessary re-renders
@@ -459,7 +446,7 @@ function DataTableInternal<TData extends DataRecord>({
   }, [finalPaginationMode, serverData?.totalCount, data?.length]);
 
   // ============================================================================
-  // HIERARCHICAL SORTING
+  // HIERARCHICAL SORTING - ALWAYS call these hooks
   // ============================================================================
   
   const sortedTableData = useMemo(() => {
@@ -479,9 +466,101 @@ function DataTableInternal<TData extends DataRecord>({
   const finalDataCount = finalPaginationMode === 'server' ? (serverData?.totalCount || 0) : finalTableData?.length || 0;
 
   // ============================================================================
-  // ACTIONS PROCESSING
+  // ACTIONS PROCESSING - ALWAYS call these hooks
+  // ============================================================================
+
   // ============================================================================
+  // COLUMN PROCESSING - ALWAYS call these hooks
+  // ============================================================================
+
+  // ============================================================================
+  // TABLE CONFIGURATION - ALWAYS call these hooks
+  // ============================================================================
+
+  // ============================================================================
+  // SEARCH HANDLERS - ALWAYS call these hooks
+  // ============================================================================
+  
+  const handleSearch = useCallback((value: string) => {
+    setSearchQuery(value);
+    
+    if (features.pagination) {
+      setPagination(prev => ({ ...prev, pageIndex: 0 }));
+    }
+  }, [setSearchQuery, features.pagination]);
+
+  // ============================================================================
+  // SERVER-SIDE DATA FETCHING - ALWAYS call these hooks
+  // ============================================================================
+  
+  const handleServerSideChange = useCallback(async () => {
+    if (finalPaginationMode !== 'server' || !serverSide) return;
+
+    const params: ServerSideParams = {
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      sorting,
+      columnFilters,
+      globalFilter: searchQuery,
+      grouping,
+    };
+
+    await fetchServerData(params);
+  }, [
+    finalPaginationMode,
+    serverSide,
+    pagination,
+    sorting,
+    columnFilters,
+    searchQuery,
+    grouping,
+    fetchServerData,
+  ]);
+
+  // ============================================================================
+  // EFFECTS - ALWAYS call these hooks
+  // ============================================================================
+  
+  useEffect(() => {
+    if ((tableData?.length || 0) > 0 || finalPaginationMode === 'server') {
+      handleServerSideChange();
+    }
+  }, [handleServerSideChange, tableData?.length, finalPaginationMode]);
 
+  useEffect(() => {
+    return () => {
+      if (typeof cleanup === 'function') {
+        cleanup();
+      }
+    };
+  }, [cleanup]);
+
+  // ============================================================================
+  // RBAC VALIDATION AND SECURE CONFIGURATION - ALWAYS call these hooks
+  // ============================================================================
+  
+  // MANDATORY: Features are automatically filtered by permissions
+  const secureFeatures: DataTableFeatureConfig = useMemo(() => ({
+    ...features,
+    creation: features.creation && permissions.canCreate.can,
+    editing: features.editing && permissions.canUpdate.can,
+    deletion: features.deletion && permissions.canDelete.can,
+    deleteSelected: features.deleteSelected && permissions.canDelete.can,
+    export: features.export && permissions.canExport.can,
+    import: features.import && permissions.canImport.can,
+  }), [features, permissions.canCreate.can, permissions.canUpdate.can, permissions.canDelete.can, permissions.canExport.can, permissions.canImport.can]);
+
+  // MANDATORY: Handlers are automatically secured
+  const secureHandlers = useMemo(() => ({
+    onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
+    onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
+    onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
+    onImport: permissions.canImport.can ? onImport : undefined,
+    onExport: permissions.canExport.can ? onExport : undefined,
+    onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
+  }), [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected]);
+
+  // MANDATORY: Process actions with RBAC checks
   const effectiveActions = useMemo(() => {
     // Create a new array to avoid mutating the original
     const result = [...actions];
@@ -525,10 +604,7 @@ function DataTableInternal<TData extends DataRecord>({
     return result;
   }, [actions, secureFeatures, permissions, secureHandlers, getRowId, tableActions]);
 
-  // ============================================================================
-  // COLUMN PROCESSING
-  // ============================================================================
-  
+  // MANDATORY: Process columns with actions
   const enhancedColumns = useMemo(() => {
     // Create enhanced base columns
     const baseColumns: ColumnDef<TData>[] = [...columns].map(column => ({
@@ -629,16 +705,7 @@ function DataTableInternal<TData extends DataRecord>({
     return finalColumns;
   }, [columns, features, effectiveActions, columnOrder]);
 
-  // ============================================================================
-  // COLUMN WIDTHS
-  // ============================================================================
-  
-
-  // ============================================================================
-  // TABLE CONFIGURATION
-  // ============================================================================
-  
-  // Memoize table configuration to prevent unnecessary re-creation
+  // MANDATORY: Memoize table configuration to prevent unnecessary re-creation
   const tableConfig = useMemo(() => ({
     data: finalTableData as TData[],
     columns: enhancedColumns,
@@ -706,62 +773,28 @@ function DataTableInternal<TData extends DataRecord>({
   const table = useReactTable(tableConfig);
 
   // ============================================================================
-  // SEARCH HANDLERS
+  // RBAC VALIDATION AND EARLY RETURNS - AFTER ALL HOOKS
   // ============================================================================
   
-  const handleSearch = useCallback((value: string) => {
-    setSearchQuery(value);
-    
-    if (features.pagination) {
-      setPagination(prev => ({ ...prev, pageIndex: 0 }));
-    }
-  }, [setSearchQuery, features.pagination]);
-
-  // ============================================================================
-  // SERVER-SIDE DATA FETCHING
-  // ============================================================================
+  // MANDATORY: Every DataTable must have a user and RBAC config
+  if (!user) {
+    throw new Error('DataTable requires authenticated user for RBAC');
+  }
   
-  const handleServerSideChange = useCallback(async () => {
-    if (finalPaginationMode !== 'server' || !serverSide) return;
-
-    const params: ServerSideParams = {
-      pageIndex: pagination.pageIndex,
-      pageSize: pagination.pageSize,
-      sorting,
-      columnFilters,
-      globalFilter: searchQuery,
-      grouping,
-    };
-
-    await fetchServerData(params);
-  }, [
-    finalPaginationMode,
-    serverSide,
-    pagination,
-    sorting,
-    columnFilters,
-    searchQuery,
-    grouping,
-    fetchServerData,
-  ]);
+  if (!rbac?.resource) {
+    throw new Error('DataTable requires rbac.resource for permission checking');
+  }
 
-  // ============================================================================
-  // EFFECTS
-  // ============================================================================
-  
-  useEffect(() => {
-    if ((tableData?.length || 0) > 0 || finalPaginationMode === 'server') {
-      handleServerSideChange();
-    }
-  }, [handleServerSideChange, tableData?.length, finalPaginationMode]);
+  const scope = {
+    organisationId: user?.user_metadata?.organisationId || user?.app_metadata?.organisationId,
+    eventId: user?.user_metadata?.eventId || user?.app_metadata?.eventId,
+    appId: user?.user_metadata?.appId || user?.app_metadata?.appId,
+  };
 
-  useEffect(() => {
-    return () => {
-      if (typeof cleanup === 'function') {
-        cleanup();
-      }
-    };
-  }, [cleanup]);
+  // MANDATORY: No data access without read permission
+  if (!permissions.canRead.can) {
+    return <AccessDeniedPage resource={rbac?.resource || 'test-resource'} operation="read" />;
+  }
 
   // ============================================================================
   // RENDER