@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/hooks/useDataTableDataPipeline.ts

@@ -0,0 +1,117 @@
+/**
+ * @file DataTable data pipeline hook
+ * @description Encapsulates hierarchical validation, sorting, and data source
+ * resolution so the main DataTable component can focus on orchestration.
+ */
+
+import { useMemo } from 'react';
+import { useHierarchicalState, type HierarchicalState } from './useHierarchicalState';
+import { validateHierarchicalData } from '../utils/hierarchicalUtils';
+import {
+  sortHierarchicalDataByStructure,
+  sortHierarchicalDataWithSorting,
+} from '../utils/hierarchicalSorting';
+import type {
+  DataRecord,
+  HierarchicalConfig,
+  HierarchicalDataRow,
+  NormalizedDataTableFeatureConfig,
+  PaginationMode,
+  ServerSideResponse,
+} from '../types';
+import type { SortingState } from '@tanstack/react-table';
+
+export interface UseDataTableDataPipelineParams<TData extends DataRecord> {
+  data: TData[];
+  features: NormalizedDataTableFeatureConfig;
+  hierarchical?: HierarchicalConfig;
+  sorting: SortingState;
+  finalPaginationMode: PaginationMode;
+  serverData: ServerSideResponse<TData> | null;
+}
+
+export interface UseDataTableDataPipelineResult<TData extends DataRecord> {
+  finalTableData: TData[];
+  dataCount: number;
+  hierarchicalState?: HierarchicalState<HierarchicalDataRow>;
+  hierarchicalValidation: { isValid: boolean; errors: string[] };
+}
+
+export function useDataTableDataPipeline<TData extends DataRecord>({
+  data,
+  features,
+  hierarchical,
+  sorting,
+  finalPaginationMode,
+  serverData,
+}: UseDataTableDataPipelineParams<TData>): UseDataTableDataPipelineResult<TData> {
+  const hierarchicalEnabled = Boolean(features.hierarchical && hierarchical?.enabled);
+
+  const hierarchicalValidation = useMemo(() => {
+    if (!hierarchicalEnabled) {
+      return { isValid: true, errors: [] as string[] };
+    }
+
+    return validateHierarchicalData(data as unknown as HierarchicalDataRow[]);
+  }, [data, hierarchicalEnabled]);
+
+  const structuredHierarchicalData = useMemo(() => {
+    if (!hierarchicalEnabled || !hierarchicalValidation.isValid) {
+      return data;
+    }
+
+    return sortHierarchicalDataByStructure(data as unknown as HierarchicalDataRow[]) as unknown as TData[];
+  }, [data, hierarchicalEnabled, hierarchicalValidation.isValid]);
+
+  const hierarchicalState = useHierarchicalState<HierarchicalDataRow>(
+    (hierarchicalEnabled && hierarchicalValidation.isValid
+      ? (structuredHierarchicalData as unknown as HierarchicalDataRow[])
+      : []) as HierarchicalDataRow[],
+    hierarchicalEnabled ? hierarchical : undefined
+  );
+
+  const baseData = useMemo(() => {
+    if (finalPaginationMode === 'server') {
+      return serverData?.data ?? [];
+    }
+
+    return structuredHierarchicalData;
+  }, [finalPaginationMode, serverData?.data, structuredHierarchicalData]);
+
+  const tableData = useMemo(() => {
+    if (!hierarchicalEnabled) {
+      return baseData;
+    }
+
+    return (hierarchicalState.visibleRows as unknown as TData[]) ?? [];
+  }, [baseData, hierarchicalEnabled, hierarchicalState.visibleRows]);
+
+  const sortedHierarchicalData = useMemo(() => {
+    if (!hierarchicalEnabled || sorting.length === 0) {
+      return tableData;
+    }
+
+    const visibleRows = hierarchicalState.visibleRows as unknown as HierarchicalDataRow[];
+    return sortHierarchicalDataWithSorting(visibleRows, sorting) as unknown as TData[];
+  }, [hierarchicalEnabled, hierarchicalState.visibleRows, sorting, tableData]);
+
+  const finalTableData = hierarchicalEnabled && sorting.length > 0
+    ? sortedHierarchicalData
+    : tableData;
+
+  const dataCount = useMemo(() => {
+    if (finalPaginationMode === 'server') {
+      return serverData?.totalCount ?? 0;
+    }
+
+    return finalTableData?.length ?? 0;
+  }, [finalPaginationMode, finalTableData?.length, serverData?.totalCount]);
+
+  return {
+    finalTableData,
+    dataCount,
+    hierarchicalState: hierarchicalEnabled ? hierarchicalState : undefined,
+    hierarchicalValidation,
+  };
+}
+

package/src/components/DataTable/hooks/useDataTablePermissions.ts

@@ -12,7 +12,14 @@ import { useMemo, useRef } from 'react';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { useCan, useResolvedScope } from '../../../rbac/hooks';
 import { useToast } from '../../../hooks/useToast';
-import type { DataTableFeatureConfig, DataTableRBACConfig } from '../types';
+import { createLogger } from '../../../utils/logger';
+import {
+  normalizeDataTableFeatures,
+  type DataTableFeatureConfig,
+  type DataTableRBACConfig,
+  type NormalizedDataTableFeatureConfig,
+} from '../types';
+import type { Permission } from '../../../rbac/types';
 
 export interface UseDataTablePermissionsReturn {
   permissions: {
@@ -23,14 +30,15 @@ export interface UseDataTablePermissionsReturn {
     canExport: ReturnType<typeof useCan>;
     canImport: ReturnType<typeof useCan>;
   };
-  secureFeatures: DataTableFeatureConfig;
+  secureFeatures: NormalizedDataTableFeatureConfig;
   effectivePageId: string | undefined;
 }
 
 export function useDataTablePermissions<TData extends Record<string, any>>(
   rbac: DataTableRBACConfig,
-  features: DataTableFeatureConfig
+  features: DataTableFeatureConfig = {}
 ): UseDataTablePermissionsReturn {
+  const logger = createLogger('DataTablePermissions');
   const authResult = useUnifiedAuth();
   const user = authResult.user;
 
@@ -61,11 +69,21 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
    */
 
   // Use shared scope resolution hook for consistent RBAC scoping
-  const { selectedOrganisationId, selectedEventId, supabase } = useUnifiedAuth();
-  const { resolvedScope: rawResolvedScope } = useResolvedScope({
+  const { selectedOrganisation, selectedEvent, supabase, organisations } = useUnifiedAuth();
+  
+  // Debug logging to understand organisation context
+  logger.debug('Organisation context:', {
+    hasSelectedOrg: !!selectedOrganisation,
+    selectedOrgId: selectedOrganisation?.id,
+    hasOrganisations: organisations?.length > 0,
+    organisationCount: organisations?.length,
+    selectedEvent: selectedEvent?.event_id
+  });
+  
+  const { resolvedScope: rawResolvedScope, isLoading: scopeLoading } = useResolvedScope({
     supabase,
-    selectedOrganisationId,
-    selectedEventId
+    selectedOrganisationId: selectedOrganisation?.id || null,
+    selectedEventId: selectedEvent?.event_id || null
   });
 
   /**
@@ -113,32 +131,58 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
   /**
    * Effective scope for permission checks.
    * 
-   * Fallback to empty scope if no organisation resolved yet. This ensures:
-   * - Permission hooks always receive valid scope objects (never undefined/null)
-   * - Components handle loading states gracefully
-   * - No accidental data leakage between organisations (zero-trust model)
+   * Only use the resolved scope if it has a valid organisationId and scope resolution is complete.
+   * This ensures permission checks only happen when we have proper context.
    */
-  const effectiveScope = stableScope.organisationId ? stableScope : { organisationId: '', eventId: undefined, appId: undefined };
+  const effectiveScope = (!scopeLoading && stableScope.organisationId) ? stableScope : null;
+
+  // Always call hooks with consistent parameters to avoid React hooks order violations
+  const userId = user?.id || '';
+  const readPermission = `read:page.${effectivePageId}` as unknown as Permission;
+  const createPermission = `create:page.${effectivePageId}` as unknown as Permission;
+  const updatePermission = `update:page.${effectivePageId}` as unknown as Permission;
+  const deletePermission = `delete:page.${effectivePageId}` as unknown as Permission;
+
+  // Always use a consistent scope object to prevent hooks order violations
+  // When scope is loading or invalid, use empty scope which will cause useCan to return false
+  const consistentScope = effectiveScope || { organisationId: '', eventId: undefined, appId: undefined };
 
   const permissions = {
-    canRead: useCan(user?.id || '', effectiveScope, `read:page.${effectivePageId}` as any, effectivePageId, true),
-    canCreate: useCan(user?.id || '', effectiveScope, `create:page.${effectivePageId}` as any, effectivePageId, true),
-    canUpdate: useCan(user?.id || '', effectiveScope, `update:page.${effectivePageId}` as any, effectivePageId, true),
-    canDelete: useCan(user?.id || '', effectiveScope, `delete:page.${effectivePageId}` as any, effectivePageId, true),
-    canExport: useCan(user?.id || '', effectiveScope, `read:page.${effectivePageId}` as any, effectivePageId, true), // Use read permission for export
-    canImport: useCan(user?.id || '', effectiveScope, `create:page.${effectivePageId}` as any, effectivePageId, true), // Use create permission for import
+    canRead: useCan(userId, consistentScope, readPermission, effectivePageId, true),
+    canCreate: useCan(userId, consistentScope, createPermission, effectivePageId, true),
+    canUpdate: useCan(userId, consistentScope, updatePermission, effectivePageId, true),
+    canDelete: useCan(userId, consistentScope, deletePermission, effectivePageId, true),
+    canExport: useCan(userId, consistentScope, readPermission, effectivePageId, true), // Use read permission for export
+    canImport: useCan(userId, consistentScope, createPermission, effectivePageId, true), // Use create permission for import
   };
+  
+  // Debug logging for permissions
+  logger.debug('Permission check results:', {
+    canRead: permissions.canRead.can,
+    canReadLoading: permissions.canRead.isLoading,
+    canReadError: permissions.canRead.error?.message,
+    canCreate: permissions.canCreate.can,
+    pageName: effectivePageId,
+    scope: consistentScope,
+    hasValidScope: !!effectiveScope,
+    scopeLoading: scopeLoading
+  });
 
   // 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]);
+  const normalizedFeatures = useMemo(
+    () => normalizeDataTableFeatures(features),
+    [features]
+  );
+
+  const secureFeatures: NormalizedDataTableFeatureConfig = useMemo(() => ({
+    ...normalizedFeatures,
+    creation: normalizedFeatures.creation && permissions.canCreate.can,
+    editing: normalizedFeatures.editing && permissions.canUpdate.can,
+    deletion: normalizedFeatures.deletion && permissions.canDelete.can,
+    deleteSelected: normalizedFeatures.deleteSelected && permissions.canDelete.can,
+    export: normalizedFeatures.export && permissions.canExport.can,
+    import: normalizedFeatures.import && permissions.canImport.can,
+  }), [normalizedFeatures, permissions.canCreate.can, permissions.canUpdate.can, permissions.canDelete.can, permissions.canExport.can, permissions.canImport.can]);
 
   return {
     permissions,

package/src/components/DataTable/hooks/useDataTableState.ts

@@ -17,7 +17,10 @@ import type {
   ExpandedState,
   PaginationState 
 } from '@tanstack/react-table';
-import type { DataRecord } from '../types';
+import type { DataRecord, CellValue, RowId } from '../types';
+
+// Re-export types for external use
+export type { DataRecord, CellValue, RowId };
 
 // ============================================================================
 // STATE INTERFACE
@@ -38,9 +41,9 @@ export interface DataTableState<TData extends DataRecord> {
   
   // Editing state
   isCreating: boolean;
-  creationData: Record<string, any>;
-  editingRowId: string | null;
-  editingData: Record<string, any>;
+  creationData: Record<string, CellValue>;
+  editingRowId: RowId | null;
+  editingData: Record<string, CellValue>;
   
   // UI state
   showImportModal: boolean;
@@ -50,6 +53,31 @@ export interface DataTableState<TData extends DataRecord> {
   searchQuery: string;
 }
 
+export interface DataTableStateActions<TData extends DataRecord> {
+  setSorting: (sorting: SortingState) => void;
+  setColumnFilters: (filters: ColumnFiltersState) => void;
+  setColumnVisibility: (visibility: VisibilityState) => void;
+  setGrouping: (grouping: GroupingState) => void;
+  setExpanded: (expanded: ExpandedState) => void;
+  setPagination: (pagination: PaginationState) => void;
+  setColumnOrder: (order: string[]) => void;
+  setRowSelection: (
+    selection: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)
+  ) => void;
+  toggleRowSelection: (rowId: string, selected: boolean) => void;
+  clearRowSelection: () => void;
+  setCreating: (isCreating: boolean) => void;
+  setCreationData: (data: Record<string, CellValue>) => void;
+  clearCreationData: () => void;
+  setEditingRow: (rowId: RowId | null, data: Record<string, CellValue>) => void;
+  clearEditing: () => void;
+  setImportModal: (show: boolean) => void;
+  setFilterRow: (show: boolean) => void;
+  setSearchQuery: (query: string) => void;
+  resetState: () => void;
+  initializeState: (partialState: Partial<DataTableState<TData>>) => void;
+}
+
 // ============================================================================
 // ACTION TYPES
 // ============================================================================
@@ -66,9 +94,9 @@ export type DataTableAction<TData extends DataRecord> =
   | { type: 'TOGGLE_ROW_SELECTION'; payload: { rowId: string; selected: boolean } }
   | { type: 'CLEAR_ROW_SELECTION' }
   | { type: 'SET_CREATING'; payload: boolean }
-  | { type: 'SET_CREATION_DATA'; payload: Record<string, any> }
+  | { type: 'SET_CREATION_DATA'; payload: Record<string, CellValue> }
   | { type: 'CLEAR_CREATION_DATA' }
-  | { type: 'SET_EDITING_ROW'; payload: { rowId: string | null; data: Record<string, any> } }
+  | { type: 'SET_EDITING_ROW'; payload: { rowId: RowId | null; data: Record<string, CellValue> } }
   | { type: 'CLEAR_EDITING' }
   | { type: 'SET_IMPORT_MODAL'; payload: boolean }
   | { type: 'SET_FILTER_ROW'; payload: boolean }
@@ -228,8 +256,8 @@ export function useDataTableState<TData extends DataRecord>({
   // ACTION CREATORS
   // ============================================================================
 
-  const actions = useMemo(() => ({
-    setSorting: (sorting: SortingState) => 
+  const actions = useMemo<DataTableStateActions<TData>>(() => ({
+    setSorting: (sorting: SortingState) =>
       dispatch({ type: 'SET_SORTING', payload: sorting }),
     
     setColumnFilters: (filters: ColumnFiltersState) => 
@@ -270,13 +298,13 @@ export function useDataTableState<TData extends DataRecord>({
     setCreating: (isCreating: boolean) => 
       dispatch({ type: 'SET_CREATING', payload: isCreating }),
     
-    setCreationData: (data: Record<string, any>) => 
+    setCreationData: (data: Record<string, CellValue>) => 
       dispatch({ type: 'SET_CREATION_DATA', payload: data }),
     
     clearCreationData: () => 
       dispatch({ type: 'CLEAR_CREATION_DATA' }),
     
-    setEditingRow: (rowId: string | null, data: Record<string, any>) => 
+    setEditingRow: (rowId: RowId | null, data: Record<string, CellValue>) => 
       dispatch({ type: 'SET_EDITING_ROW', payload: { rowId, data } }),
     
     clearEditing: () => 
@@ -294,7 +322,7 @@ export function useDataTableState<TData extends DataRecord>({
     resetState: () => 
       dispatch({ type: 'RESET_STATE' }),
     
-    initializeState: (partialState: Partial<DataTableState<TData>>) => 
+    initializeState: (partialState: Partial<DataTableState<TData>>) =>
       dispatch({ type: 'INITIALIZE_STATE', payload: partialState })
   }), [state.rowSelection, onRowSelectionChange]);
 

package/src/components/DataTable/hooks/useEffectiveColumnOrder.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import type { DataRecord, DataTableColumn } from '../types';
+
+interface UseEffectiveColumnOrderOptions<TData extends DataRecord> {
+  columns: DataTableColumn<TData>[];
+  externalColumnOrder?: string[];
+  selectionEnabled: boolean;
+}
+
+export function useEffectiveColumnOrder<TData extends DataRecord>({
+  columns,
+  externalColumnOrder,
+  selectionEnabled,
+}: UseEffectiveColumnOrderOptions<TData>): string[] {
+  const baseOrder = useMemo(() => {
+    if (externalColumnOrder && externalColumnOrder.length > 0) {
+      return externalColumnOrder;
+    }
+
+    return columns
+      .map(column => column.id || column.accessorKey || '')
+      .filter((identifier): identifier is string => Boolean(identifier));
+  }, [columns, externalColumnOrder]);
+
+  return useMemo(() => {
+    if (selectionEnabled && !baseOrder.includes('select')) {
+      return ['select', ...baseOrder];
+    }
+
+    return baseOrder;
+  }, [baseOrder, selectionEnabled]);
+}

package/src/components/DataTable/hooks/useHierarchicalState.ts

@@ -8,6 +8,20 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import type { HierarchicalDataRow, HierarchicalConfig } from '../types';
 
+export interface HierarchicalState<TData extends HierarchicalDataRow> {
+  expandedRows: Set<string>;
+  visibleRows: TData[];
+  toggleRow: (rowId: string) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  setExpandedIds: (ids: string[]) => void;
+  isExpanded: (rowId: string) => boolean;
+  hasChildren: (rowId: string) => boolean;
+  getChildrenCount: (rowId: string) => number;
+  getExpandedIds: () => string[];
+  parentChildMap: Map<string, TData[]>;
+}
+
 /**
  * Hook for managing hierarchical expand/collapse state
  * 
@@ -20,7 +34,7 @@ import type { HierarchicalDataRow, HierarchicalConfig } from '../types';
 export function useHierarchicalState<TData extends HierarchicalDataRow>(
   data: TData[],
   config?: HierarchicalConfig
-) {
+): HierarchicalState<TData> {
   // Memoize initial state to prevent recreation
   const initialExpandedState = useMemo(() => {
     if (!config?.defaultExpanded) {