@jmruthers/pace-core 0.5.135 → 0.5.137

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

@@ -0,0 +1,273 @@
+/**
+ * @file Grouping Aggregation Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples
+ * @since 0.6.0
+ * 
+ * Complete example demonstrating grouped row aggregation in DataTable.
+ * This example shows how to use aggregation functions to display
+ * totals and averages in grouped rows, similar to the pace-cake diners table use case.
+ */
+
+import React from 'react';
+import { DataTable, sum, average, count, type DataTableColumn, type DataRecord } from '../index';
+
+// ============================================================================
+// DATA INTERFACE
+// ============================================================================
+
+interface DinerData extends DataRecord {
+  id: string;
+  unit_number: string;
+  unit_name: string;
+  diet: string;
+  youth: number;
+  adults: number;
+  cost: number;
+  [key: string]: unknown; // Index signature to satisfy DataRecord constraint
+}
+
+// ============================================================================
+// SAMPLE DATA
+// ============================================================================
+
+const dinerData: DinerData[] = [
+  { id: '1', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Standard', youth: 10, adults: 5, cost: 100.50 },
+  { id: '2', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Standard', youth: 15, adults: 8, cost: 150.75 },
+  { id: '3', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Gluten Free', youth: 5, adults: 3, cost: 75.25 },
+  { id: '4', unit_number: '102', unit_name: 'Beta Unit', diet: 'Standard', youth: 20, adults: 10, cost: 200.00 },
+  { id: '5', unit_number: '102', unit_name: 'Beta Unit', diet: 'Standard', youth: 12, adults: 6, cost: 120.50 },
+  { id: '6', unit_number: '102', unit_name: 'Beta Unit', diet: 'Vegetarian', youth: 8, adults: 4, cost: 90.00 },
+  { id: '7', unit_number: '103', unit_name: 'Gamma Unit', diet: 'Standard', youth: 18, adults: 9, cost: 180.25 },
+  { id: '8', unit_number: '103', unit_name: 'Gamma Unit', diet: 'Gluten Free', youth: 6, adults: 3, cost: 80.50 },
+];
+
+// ============================================================================
+// COLUMN DEFINITIONS
+// ============================================================================
+
+const columns: DataTableColumn<DinerData>[] = [
+  {
+    accessorKey: 'unit_number',
+    header: 'Unit #',
+    sortable: true,
+    enableGrouping: true,
+    size: 100,
+  },
+  {
+    accessorKey: 'unit_name',
+    header: 'Unit Name',
+    sortable: true,
+    enableGrouping: true,
+    size: 150,
+  },
+  {
+    accessorKey: 'diet',
+    header: 'Diet',
+    sortable: true,
+    enableGrouping: true,
+    size: 120,
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <span className="px-2 py-1 rounded text-xs font-medium bg-main-100 text-main-800 border border-main-300">
+        {row.original.diet}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'youth',
+    header: 'Youth',
+    sortable: true,
+    fieldType: 'number',
+    size: 100,
+    aggregateFn: sum('youth'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold">
+        {typeof value === 'number' ? value.toLocaleString() : '0'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right">
+        {row.original.youth.toLocaleString()}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'adults',
+    header: 'Adults',
+    sortable: true,
+    fieldType: 'number',
+    size: 100,
+    aggregateFn: sum('adults'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold">
+        {typeof value === 'number' ? value.toLocaleString() : '0'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right">
+        {row.original.adults.toLocaleString()}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'cost',
+    header: 'Total Cost',
+    sortable: true,
+    fieldType: 'number',
+    size: 120,
+    aggregateFn: sum('cost'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold font-mono">
+        ${typeof value === 'number' ? value.toFixed(2) : '0.00'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right font-mono">
+        ${row.original.cost.toFixed(2)}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'id',
+    header: 'Count',
+    sortable: false,
+    size: 80,
+    aggregateFn: count(),
+    aggregateCell: (value: any) => (
+      <div className="text-center font-semibold">
+        {typeof value === 'number' ? value : '0'}
+      </div>
+    ),
+    cell: () => null as React.ReactNode, // Hide count for individual rows
+  },
+];
+
+// ============================================================================
+// EXAMPLE COMPONENT
+// ============================================================================
+
+export function GroupingAggregationExample() {
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-main-900 mb-2">
+          Grouped Row Aggregation Example
+        </h1>
+        <p className="text-sec-600">
+          This example demonstrates how to use aggregation functions in grouped DataTable rows.
+          When rows are grouped by Unit or Diet, the Youth, Adults, and Cost columns show
+          aggregated totals, and the Count column shows the number of records in each group.
+        </p>
+      </div>
+
+      <div className="bg-main-50 border border-main-200 rounded-md p-4 space-y-2">
+        <p className="font-medium text-sm">How to use:</p>
+        <ol className="list-decimal list-inside text-sm space-y-1 text-sec-700">
+          <li>Use the grouping dropdown to group by Unit #, Unit Name, or Diet</li>
+          <li>Notice how the Youth, Adults, and Cost columns show aggregated totals in grouped rows</li>
+          <li>The Count column shows the number of records in each group</li>
+          <li>Click the expand/collapse arrows to see individual rows within each group</li>
+        </ol>
+      </div>
+
+      <DataTable<DinerData>
+        data={dinerData}
+        columns={columns}
+        title="Diners by Unit and Diet"
+        description="Example showing aggregated values in grouped rows"
+        rbac={{ pageName: 'diners-example' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          grouping: true,
+          columnVisibility: true,
+          columnReordering: false,
+          selection: false,
+          creation: false,
+          editing: false,
+          deletion: false,
+          deleteSelected: false,
+          import: false,
+          export: true,
+        }}
+        getRowId={(row: DinerData) => row.id}
+        variant="default"
+        className="border border-sec-200 rounded-lg"
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// ALTERNATIVE EXAMPLES
+// ============================================================================
+
+/**
+ * Example with custom aggregation function
+ */
+export function CustomAggregationExample() {
+  const customColumns: DataTableColumn<DinerData>[] = [
+    {
+      accessorKey: 'diet',
+      header: 'Diet',
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'youth',
+      header: 'Total Diners',
+      aggregateFn: (rows: DinerData[]) => {
+        // Custom: sum of youth + adults
+        return rows.reduce((total: number, row: DinerData) => total + (row.youth || 0) + (row.adults || 0), 0);
+      },
+      aggregateCell: (value: any) => (
+        <div className="text-right font-semibold">
+          {typeof value === 'number' ? value.toLocaleString() : '0'} total diners
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'cost',
+      header: 'Avg Cost per Diner',
+      aggregateFn: (rows: DinerData[]) => {
+        const totalCost = rows.reduce((sum: number, row: DinerData) => sum + (row.cost || 0), 0);
+        const totalDiners = rows.reduce((sum: number, row: DinerData) => sum + (row.youth || 0) + (row.adults || 0), 0);
+        return totalDiners > 0 ? totalCost / totalDiners : 0;
+      },
+      aggregateCell: (value: any) => (
+        <div className="text-right font-semibold font-mono">
+          ${typeof value === 'number' ? value.toFixed(2) : '0.00'} per diner
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h2 className="text-xl font-bold text-main-900 mb-2">
+          Custom Aggregation Example
+        </h2>
+        <p className="text-sec-600">
+          This example shows custom aggregation functions that calculate
+          total diners and average cost per diner.
+        </p>
+      </div>
+
+      <DataTable<DinerData>
+        data={dinerData}
+        columns={customColumns}
+        rbac={{ pageName: 'diners-custom' }}
+        features={{
+          grouping: true,
+          sorting: true,
+          pagination: true,
+        }}
+        defaultGrouping={['diet']}
+        getRowId={(row: DinerData) => row.id}
+      />
+    </div>
+  );
+}
+

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

@@ -12,7 +12,7 @@ import React from 'react';
 import { DataTable } from '../DataTable';
 import type { DataTableColumn, DataTableAction } from '../types';
 import { Button } from '../../Button';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import { 
   PlusIcon, 
   PencilIcon, 

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

@@ -93,7 +93,7 @@ vi.mock('../../../../rbac/hooks', () => ({
 }));
 
 // Mock logger
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => ({
     debug: vi.fn(),
     info: vi.fn(),

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 interface UseColumnOrderPersistenceProps {
   tableId?: string;

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 interface UseColumnVisibilityPersistenceProps {
   tableId?: string;

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

@@ -12,7 +12,7 @@ import { useMemo, useRef } from 'react';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { useCan, useResolvedScope } from '../../../rbac/hooks';
 import { useToast } from '../../../hooks/useToast';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import {
   normalizeDataTableFeatures,
   type DataTableFeatureConfig,
@@ -69,16 +69,7 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
    */
 
   // Use shared scope resolution hook for consistent RBAC scoping
-  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 { selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
   
   const { resolvedScope: rawResolvedScope, isLoading: scopeLoading } = useResolvedScope({
     supabase,
@@ -155,18 +146,6 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
     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 normalizedFeatures = useMemo(

package/src/components/DataTable/index.ts

@@ -29,6 +29,7 @@ export type { UseDataTablePerformanceOptions, UseDataTablePerformanceReturn } fr
 
 // Type definitions
 export type {
+  DataRecord,
   DataTableColumn,
   DataTableAction,
   DataTableToolbarButton,
@@ -66,6 +67,9 @@ export * from './components';
 // Utility functions
 export * from './utils';
 
+// Aggregation utilities (explicitly exported for convenience)
+export { sum, average, count, min, max } from './utils/aggregationUtils';
+
 // Accessibility utilities
 export { announce } from './utils/a11yUtils';
 

package/src/components/DataTable/styles.ts

@@ -8,7 +8,7 @@
  * This ensures consistent styling across regular and virtualized tables.
  */
 
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 // ============================================================================
 // TABLE BASE STYLES
@@ -148,12 +148,33 @@ export const getTableClasses = (options: {
 } = {}) => {
   const { isFixed = false, variant = 'default', className } = options;
   
-  return cn(
-    isFixed ? tableStyles.tableFixed : tableStyles.table,
-    variant === 'compact' && 'text-sm',
-    variant === 'spacious' && 'text-base',
-    className
-  );
+  if (isFixed) {
+    // For fixed tables, use tableFixed and add variant-specific text size
+    return cn(
+      tableStyles.tableFixed,
+      variant === 'compact' && 'text-sm',
+      variant === 'spacious' && 'text-base',
+      className
+    );
+  }
+  
+  // For regular tables, build classes based on variant
+  // tableStyles.table includes 'text-sm', so we need to handle variants carefully
+  if (variant === 'compact') {
+    // Compact uses text-sm (same as default), so just use base table styles
+    return cn(tableStyles.table, className);
+  }
+  
+  if (variant === 'spacious') {
+    // Spacious uses text-base, so replace text-sm with text-base
+    return cn(
+      tableStyles.table.replace('text-sm', 'text-base'),
+      className
+    );
+  }
+  
+  // Default variant
+  return cn(tableStyles.table, className);
 };
 
 /**

package/src/components/DataTable/types.ts

@@ -328,6 +328,19 @@ export interface DataTableColumn<TData extends DataRecord = DataRecord> extends
   hideForParent?: boolean;
   /** Hide this column for child rows */
   hideForChild?: boolean;
+  
+  // Grouped row aggregation
+  /**
+   * Aggregation function for grouped rows.
+   * Receives all rows in the group and returns the aggregated value.
+   * If not provided, grouped rows will show empty/undefined for this column.
+   */
+  aggregateFn?: (rows: TData[], column: DataTableColumn<TData>) => any;
+  /**
+   * Optional: Custom cell renderer for aggregated values in grouped rows.
+   * If not provided, uses the column's regular cell renderer.
+   */
+  aggregateCell?: (value: any, rows: TData[], column: DataTableColumn<TData>) => React.ReactNode;
 }
 
 /**

package/src/components/DataTable/utils/__tests__/columnUtils.test.ts

@@ -0,0 +1,94 @@
+/**
+ * @file Column Utils Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Utils/__tests__
+ * @since 0.4.0
+ * 
+ * Test suite for column utility functions.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { getColumnHeaderText } from '../columnUtils';
+import type { Column } from '@tanstack/react-table';
+
+const createMockColumn = (overrides: Partial<Column<any, unknown>> = {}): Column<any, unknown> => ({
+  id: 'test-column',
+  columnDef: {
+    header: undefined,
+    accessorKey: undefined,
+  },
+  ...overrides,
+} as unknown as Column<any, unknown>);
+
+describe('getColumnHeaderText', () => {
+  it('returns header text when header is a string', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: 'Bulk Distribution',
+        accessorKey: 'item_bulkdistribution',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('Bulk Distribution');
+  });
+
+  it('returns accessorKey when header is not provided', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: undefined,
+        accessorKey: 'logistics_name',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('logistics_name');
+  });
+
+  it('returns column id when header and accessorKey are not provided', () => {
+    const column = createMockColumn({
+      id: 'fallback-column',
+      columnDef: {
+        header: undefined,
+        accessorKey: undefined,
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('fallback-column');
+  });
+
+  it('returns accessorKey when header is a function', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: () => 'Function Header',
+        accessorKey: 'unit_name',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('unit_name');
+  });
+
+  it('returns accessorKey when header is a React component', () => {
+    const HeaderComponent = () => React.createElement('div', null, 'Header Component');
+    const column = createMockColumn({
+      columnDef: {
+        header: React.createElement(HeaderComponent),
+        accessorKey: 'component_column',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('component_column');
+  });
+
+  it('falls back to column id when header is function and accessorKey is not provided', () => {
+    const column = createMockColumn({
+      id: 'function-header-column',
+      columnDef: {
+        header: () => 'Function Header',
+        accessorKey: undefined,
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('function-header-column');
+  });
+});
+

package/src/components/DataTable/utils/__tests__/exportUtils.test.ts

@@ -17,7 +17,7 @@ const mockLogger = {
   info: vi.fn(),
 };
 
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => mockLogger,
 }));