@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -46,6 +46,9 @@ import { useDataTableState } from '../hooks/useDataTableState';
 import { validateHierarchicalData, sortHierarchicalData } from '../utils/hierarchicalUtils';
 import { sortHierarchicalData as sortHierarchicalDataWithSorting } from '../utils/hierarchicalSorting';
 import { ColumnFactory } from '../core/ColumnFactory';
+import { AccessDeniedPage } from './AccessDeniedPage';
+import { useCan } from '../../../rbac/hooks';
+import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 
 import type { 
   DataRecord,
@@ -63,7 +66,9 @@ import type {
   AggregateConfig,
   DataTableAction,
   HierarchicalConfig,
-  HierarchicalDataRow
+  HierarchicalDataRow,
+  DataTableRBACConfig,
+  RBACContext
 } from '../types';
 import type { ImportModalConfig } from './ImportModal';
 
@@ -76,6 +81,10 @@ export interface DataTableCoreProps<TData extends DataRecord> {
   data: TData[];
   columns: DataTableColumn<TData>[];
   
+  // MANDATORY RBAC - NO OPTIONAL
+  /** RBAC configuration - REQUIRED for all DataTables */
+  rbac: DataTableRBACConfig;
+  
   // Display
   title?: string;
   description?: string;
@@ -105,6 +114,7 @@ export interface DataTableCoreProps<TData extends DataRecord> {
   onDeleteRow?: (row: TData) => void;
   onCreateRow?: (data: Partial<TData>) => void;
   onImport?: (data: TData[]) => void | Promise<void>;
+  onExport?: () => void;
   onRowSelectionChange?: (selection: Record<string, boolean>) => void;
   selection?: Record<string, boolean>;
   onDeleteSelected?: (selectedRows: Record<string, boolean>) => void;
@@ -126,6 +136,7 @@ export interface DataTableCoreProps<TData extends DataRecord> {
 function DataTableInternal<TData extends DataRecord>({
   data,
   columns,
+  rbac, // MANDATORY RBAC
   title,
   description,
   variant = 'default',
@@ -146,6 +157,7 @@ function DataTableInternal<TData extends DataRecord>({
   onDeleteRow,
   onCreateRow,
   onImport,
+  onExport,
   onRowSelectionChange,
   selection,
   onDeleteSelected,
@@ -158,6 +170,65 @@ function DataTableInternal<TData extends DataRecord>({
   columnOrder: externalColumnOrder,
 }: DataTableCoreProps<TData>) {
   
+  // ============================================================================
+  // MANDATORY RBAC ENFORCEMENT
+  // ============================================================================
+  
+  // MANDATORY: Get authenticated user
+  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)
   // ============================================================================
@@ -415,11 +486,14 @@ function DataTableInternal<TData extends DataRecord>({
     // Create a new array to avoid mutating the original
     const result = [...actions];
     
-    // Add actions from event handlers if features are enabled
-    if (features.editing && onEditRow && !result.some(a => a.label === 'Edit')) {
+    // Add Edit action with RBAC check
+    if (secureFeatures.editing && secureHandlers.onEditRow && !result.some(a => a.label === 'Edit')) {
       result.push({
         label: 'Edit',
         onClick: (row: TData) => {
+          if (!permissions.canUpdate.can) {
+            throw new Error('Insufficient permissions to edit this resource');
+          }
           // Get the row ID using the provided getRowId function or fallback to row.id
           const rowId = getRowId ? getRowId(row, 0) : (row as any).id || String(0);
           // Set the row into editing mode with the current row data
@@ -427,21 +501,29 @@ function DataTableInternal<TData extends DataRecord>({
         },
         icon: Edit,
         testId: 'edit',
+        hidden: !permissions.canUpdate.can,
       });
     }
     
-    if (features.deletion && onDeleteRow && !result.some(a => a.label === 'Delete')) {
+    // Add Delete action with RBAC check
+    if (secureFeatures.deletion && secureHandlers.onDeleteRow && !result.some(a => a.label === 'Delete')) {
       result.push({
         label: 'Delete',
-        onClick: onDeleteRow,
+        onClick: (row: TData) => {
+          if (!permissions.canDelete.can) {
+            throw new Error('Insufficient permissions to delete this resource');
+          }
+          secureHandlers.onDeleteRow!(row);
+        },
         icon: Trash,
         testId: 'delete',
         variant: 'destructive' as const,
+        hidden: !permissions.canDelete.can,
       });
     }
 
     return result;
-  }, [actions, features.editing, features.deletion, onEditRow, onDeleteRow, getRowId, tableActions]);
+  }, [actions, secureFeatures, permissions, secureHandlers, getRowId, tableActions]);
 
   // ============================================================================
   // COLUMN PROCESSING
@@ -722,7 +804,7 @@ function DataTableInternal<TData extends DataRecord>({
           )}
           <>
             <DataTableToolbar
-              features={features}
+              features={secureFeatures}
               globalFilter={searchQuery}
               onGlobalFilterChange={handleSearch}
               columns={columns}
@@ -734,15 +816,17 @@ function DataTableInternal<TData extends DataRecord>({
               onColumnVisibilityChange={(columnId, visible) => {
                 setColumnVisibility(prev => ({ ...prev, [columnId]: visible }));
               }}
-              onCreateRow={features.creation && onCreateRow ? () => tableActions.setCreating(true) : undefined}
+              onCreateRow={secureFeatures.creation && secureHandlers.onCreateRow ? () => tableActions.setCreating(true) : undefined}
               onImportClick={() => setShowImportModal(true)}
-              onExport={() => {
+              onExport={secureHandlers.onExport || (() => {
                 // Export logic here
-              }}
+              })}
               rowSelection={rowSelection}
-              onDeleteSelected={onDeleteSelected}
+              onDeleteSelected={secureHandlers.onDeleteSelected}
               onToggleFilterRow={() => setShowFilterRow(!showFilterRow)}
               showFilterRow={showFilterRow}
+              rbac={rbac}
+              permissions={permissions}
             />
           </>
         </caption>
@@ -888,6 +972,8 @@ function DataTableInternal<TData extends DataRecord>({
               hasAnyChildren: (finalTableData as any[]).some(row => row.isParent),
             } : undefined}
             actions={effectiveActions}
+            rbac={rbac}
+            permissions={permissions}
           />
 
         {/* Table footer with pagination */}

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -58,7 +58,7 @@ import { Button } from '../../Button/Button';
 import { Search, Plus, Upload, Download, Settings2, Filter, Trash2 } from 'lucide-react';
 import { GroupingDropdown } from './GroupingDropdown';
 import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
-import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig } from '../types';
+import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig, DataTableRBACConfig } from '../types';
 import type { Column } from '@tanstack/react-table';
 
 /**
@@ -70,6 +70,17 @@ interface DataTableToolbarProps<TData extends DataRecord = DataRecord> {
   /** Feature configuration for the toolbar */
   features: DataTableFeatureConfig;
   
+  // MANDATORY RBAC
+  /** RBAC configuration - REQUIRED for all DataTables */
+  rbac: DataTableRBACConfig;
+  /** Permission states for RBAC enforcement */
+  permissions: {
+    canCreate: { can: boolean; isLoading: boolean };
+    canImport: { can: boolean; isLoading: boolean };
+    canExport: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+  };
+  
   // Data and state
   /** Current global filter value */
   globalFilter: string;
@@ -132,6 +143,8 @@ interface DataTableToolbarProps<TData extends DataRecord = DataRecord> {
  */
 export function DataTableToolbar<TData extends DataRecord>({
   features,
+  rbac,
+  permissions,
   globalFilter,
   onGlobalFilterChange,
   columns,
@@ -198,8 +211,8 @@ export function DataTableToolbar<TData extends DataRecord>({
           </Button>
         )}
 
-        {/* Row Creation */}
-        {features.creation && onCreateRow && (
+        {/* Row Creation - ONLY if user has create permission */}
+        {features.creation && permissions.canCreate.can && onCreateRow && (
           <Button 
             variant="outline" 
             onClick={onCreateRow}
@@ -209,8 +222,8 @@ export function DataTableToolbar<TData extends DataRecord>({
           </Button>
         )}
 
-                {/* Import */}
-        {features.import && (
+        {/* Import - ONLY if user has import permission */}
+        {features.import && permissions.canImport.can && (
           <Button 
             variant="outline" 
             onClick={onImportClick}
@@ -220,8 +233,8 @@ export function DataTableToolbar<TData extends DataRecord>({
           </Button>
         )}
 
-        {/* Export */}
-        {features.export && (
+        {/* Export - ONLY if user has export permission */}
+        {features.export && permissions.canExport.can && (
           <Button 
             variant="outline" 
             onClick={onExport}
@@ -231,9 +244,8 @@ export function DataTableToolbar<TData extends DataRecord>({
           </Button>
         )}
 
-
-        {/* Delete - Only when both deletion and selection are enabled */}
-        {features.deleteSelected && features.deletion && features.selection && (
+        {/* Delete Selected - ONLY if user has delete permission */}
+        {features.deleteSelected && features.deletion && features.selection && permissions.canDelete.can && (
           <Button
             variant="destructive"
             onClick={() => onDeleteSelected?.(rowSelection)}

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -131,6 +131,15 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
     parentLabel?: string;
     childLabel?: string;
   }>;
+  // MANDATORY RBAC
+  rbac?: {
+    resource: string;
+    pageId?: string;
+  };
+  permissions?: {
+    canUpdate: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+  };
 }
 
 // Helper function to render the appropriate input type based on column configuration
@@ -218,7 +227,9 @@ const MemoizedRow = ({
   grouping,
   editingRowId,
   hierarchical,
-  actions
+  actions,
+  rbac,
+  permissions
 }: { 
   row: any; 
   style?: React.CSSProperties;
@@ -257,6 +268,14 @@ const MemoizedRow = ({
     parentLabel?: string;
     childLabel?: string;
   }>;
+  rbac?: {
+    resource: string;
+    pageId?: string;
+  };
+  permissions?: {
+    canUpdate: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+  };
 }) => {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
   
@@ -327,10 +346,12 @@ const MemoizedRow = ({
                   ) : cell.column.id === 'actions' ? (
                     <ActionButtons 
                       row={row} 
-                      actions={actions} 
+                      actions={actions}
                       isEditing={isEditing}
                       isParent={isParent}
                       hierarchical={!!hierarchical}
+                      rbac={rbac}
+                      permissions={permissions}
                     />
                   ) : (
                     flexRender(cell.column.columnDef.cell, {
@@ -467,10 +488,12 @@ const MemoizedRow = ({
                   ) : (
                     <ActionButtons 
                       row={row} 
-                      actions={actions} 
+                      actions={actions}
                       isEditing={isEditing}
                       isParent={isParent}
                       hierarchical={!!hierarchical}
+                      rbac={rbac}
+                      permissions={permissions}
                     />
                   )
                 ) : (
@@ -529,7 +552,9 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   virtualHeight = 600,
   forceVirtualization = false,
   hierarchical,
-  actions = []
+  actions = [],
+  rbac,
+  permissions
 }: UnifiedTableBodyProps<TData>) {
   
   
@@ -602,6 +627,8 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
             editingRowId={editingRowId}
             hierarchical={hierarchical}
             actions={actions}
+            rbac={rbac}
+            permissions={permissions}
             style={{
               position: 'absolute',
               top: 0,
@@ -633,6 +660,8 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
             editingRowId={editingRowId}
             hierarchical={hierarchical}
             actions={actions}
+            rbac={rbac}
+            permissions={permissions}
           />
         );
       });

package/src/components/DataTable/examples/HierarchicalActionsExample.tsx

@@ -378,6 +378,7 @@ export function HierarchicalActionsExample() {
         data={hierarchicalData}
         columns={columns}
         title="Dishes & Ingredients"
+        rbac={{ resource: 'dishes' }}
         features={{
           search: true,
           pagination: true,

package/src/components/DataTable/examples/HierarchicalExample.tsx

@@ -342,6 +342,7 @@ export function HierarchicalExample() {
         columns={columns}
         title="Dishes & Ingredients"
         description="Manage dishes and their recipe ingredients with hierarchical view"
+        rbac={{ resource: 'dishes' }}
         features={{
           search: true,
           pagination: true,
@@ -397,6 +398,7 @@ export function HierarchicalExampleMinimal() {
         data={hierarchicalData}
         columns={columns}
         title="Dishes & Ingredients (Minimal)"
+        rbac={{ resource: 'dishes' }}
         features={{
           search: true,
           pagination: true,
@@ -446,6 +448,7 @@ export function HierarchicalExampleExpanded() {
         data={hierarchicalData}
         columns={columns}
         title="Dishes & Ingredients (Expanded)"
+        rbac={{ resource: 'dishes' }}
         features={{
           search: true,
           pagination: true,

package/src/components/DataTable/examples/InitialPageSizeExample.tsx

@@ -81,6 +81,7 @@ export function InitialPageSizeExample() {
           columns={columns}
           title="Users with Custom Page Size"
           description="This table starts with 25 items per page"
+          rbac={{ resource: 'users' }}
           features={{
             search: true,
             pagination: true,
@@ -113,6 +114,7 @@ export function InitialPageSizeExample() {
           columns={columns}
           title="Users with Default Page Size"
           description="This table uses the default page size of 10"
+          rbac={{ resource: 'users' }}
           features={{
             search: true,
             pagination: true,
@@ -146,6 +148,7 @@ export function InitialPageSizeExample() {
           columns={columns}
           title="Users with Invalid Page Size"
           description="This table tries to use page size 15, but will fallback to 10"
+          rbac={{ resource: 'users' }}
           features={{
             search: true,
             pagination: true,

package/src/components/DataTable/examples/PerformanceExample.tsx

@@ -155,6 +155,7 @@ export function ClientSidePerformanceExample() {
         columns={columns}
         title="Users Management"
         description="High-performance client-side data table"
+        rbac={{ resource: 'users' }}
         features={features}
         
         // All features configured via features prop above
@@ -299,6 +300,7 @@ export function ServerSidePerformanceExample() {
         columns={columns}
         title="Large Dataset Management"
         description="Server-side data processing for maximum performance"
+        rbac={{ resource: 'users' }}
         features={serverFeatures}
         
         // Server-side configuration
@@ -395,6 +397,7 @@ export function HybridPerformanceExample() {
         columns={columns}
         title="Hybrid Data Processing"
         description="Balanced approach for medium-large datasets"
+        rbac={{ resource: 'users' }}
         features={hybridFeatures}
         
         // All features configured via features prop above

package/src/components/DataTable/types.ts

@@ -278,6 +278,8 @@ export interface DataTableAction<TData extends DataRecord> {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
   /** Whether action is disabled */
   disabled?: (row: TData) => boolean;
+  /** Whether action is hidden (for RBAC) */
+  hidden?: boolean;
   /** Test ID for testing */
   testId?: string;
   /** Whether this action should only show for parent rows (hierarchical mode) */
@@ -393,12 +395,44 @@ export interface DataTableFeatureConfig {
 
 
 
+// ============================================================================
+// RBAC TYPES
+// ============================================================================
+
+/**
+ * RBAC configuration for DataTable - MANDATORY for all DataTables
+ */
+export interface DataTableRBACConfig {
+  /** Resource name for permission checking (e.g., 'users', 'events') - REQUIRED */
+  resource: string;
+  /** Optional page ID for granular permissions */
+  pageId?: string;
+}
+
+/**
+ * RBAC context passed to server-side requests
+ */
+export interface RBACContext {
+  /** User ID for permission checking */
+  userId: string;
+  /** Organisation ID for scope isolation */
+  organisationId: string;
+  /** Event ID for event-based apps */
+  eventId?: string;
+  /** App ID for app-specific permissions */
+  appId?: string;
+  /** Resource being accessed */
+  resource: string;
+  /** Page ID for granular permissions */
+  pageId?: string;
+}
+
 // ============================================================================
 // MAIN COMPONENT PROPS
 // ============================================================================
 
 /**
- * Enhanced DataTable props with unified feature configuration
+ * Enhanced DataTable props with unified feature configuration and MANDATORY RBAC
  */
 export interface DataTableProps<TData extends DataRecord> {
   // Core data
@@ -406,6 +440,10 @@ export interface DataTableProps<TData extends DataRecord> {
   data: TData[];
   /** Column definitions - supports both DataTableColumn and SimpleColumn formats */
   columns: (DataTableColumn<TData> | SimpleColumn<TData>)[];
+  
+  // MANDATORY RBAC - NO OPTIONAL
+  /** RBAC configuration - REQUIRED for all DataTables */
+  rbac: DataTableRBACConfig;
 
   // Display
   /** Table title */