@jmruthers/pace-core 0.5.102 → 0.5.103

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.102](README.md) / Exports
+[@jmruthers/pace-core - v0.5.103](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.102
+# @jmruthers/pace-core - v0.5.103
 
 **`File`**
 
@@ -85,13 +85,9 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [UserMenuProps](interfaces/UserMenuProps.md)
 - [UsePublicEventReturn](interfaces/UsePublicEventReturn.md)
 - [UsePublicEventOptions](interfaces/UsePublicEventOptions.md)
-- [UsePublicEventLogoReturn](interfaces/UsePublicEventLogoReturn.md)
-- [UsePublicEventLogoOptions](interfaces/UsePublicEventLogoOptions.md)
 - [UsePublicFileDisplayReturn](interfaces/UsePublicFileDisplayReturn.md)
 - [UsePublicFileDisplayOptions](interfaces/UsePublicFileDisplayOptions.md)
 - [UsePublicRouteParamsReturn](interfaces/UsePublicRouteParamsReturn.md)
-- [UseEventLogoReturn](interfaces/UseEventLogoReturn.md)
-- [UseEventLogoOptions](interfaces/UseEventLogoOptions.md)
 - [UseInactivityTrackerOptions](interfaces/UseInactivityTrackerOptions.md)
 - [UseInactivityTrackerReturn](interfaces/UseInactivityTrackerReturn.md)
 - [UserEventAccess](interfaces/UserEventAccess.md)
@@ -273,9 +269,6 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [usePublicEvent](modules.md#usepublicevent)
 - [clearPublicEventCache](modules.md#clearpubliceventcache)
 - [getPublicEventCacheStats](modules.md#getpubliceventcachestats)
-- [usePublicEventLogo](modules.md#usepubliceventlogo)
-- [clearPublicLogoCache](modules.md#clearpubliclogocache)
-- [getPublicLogoCacheStats](modules.md#getpubliclogocachestats)
 - [usePublicFileDisplay](modules.md#usepublicfiledisplay)
 - [clearPublicFileDisplayCache](modules.md#clearpublicfiledisplaycache)
 - [getPublicFileDisplayCacheStats](modules.md#getpublicfiledisplaycachestats)
@@ -288,9 +281,6 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [useInactivityService](modules.md#useinactivityservice)
 - [useOrganisationService](modules.md#useorganisationservice)
 - [useAppConfig](modules.md#useappconfig)
-- [useEventLogo](modules.md#useeventlogo)
-- [clearEventLogoCache](modules.md#cleareventlogocache)
-- [getEventLogoCacheStats](modules.md#geteventlogocachestats)
 - [useEventTheme](modules.md#useeventtheme)
 - [useEvents](modules.md#useevents)
 - [useFileReference](modules.md#usefilereference)
@@ -3803,74 +3793,6 @@ Get cache statistics for debugging
 
 ___
 
-### usePublicEventLogo
-
-▸ **usePublicEventLogo**(`eventId`, `eventName`, `organisationId`, `options`): [`UsePublicEventLogoReturn`](interfaces/UsePublicEventLogoReturn.md)
-
-Hook for accessing public event logo URLs
-
-This hook provides access to event logo URLs without requiring
-authentication. It includes fallback handling and image validation.
-
-#### Parameters
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `eventId` | `undefined` \| `string` | The event ID to fetch logo for |
-| `eventName` | `undefined` \| `string` | The event name for fallback text generation |
-| `organisationId` | `undefined` \| `string` | The organisation ID for storage path |
-| `options` | [`UsePublicEventLogoOptions`](interfaces/UsePublicEventLogoOptions.md) | Configuration options for caching and behavior |
-
-#### Returns
-
-[`UsePublicEventLogoReturn`](interfaces/UsePublicEventLogoReturn.md)
-
-Object containing logo URL, fallback text, loading state, error, and refetch function
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:127](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L127)
-
-___
-
-### clearPublicLogoCache
-
-▸ **clearPublicLogoCache**(): `void`
-
-Clear all cached public logo data
-Useful for testing or when you need to force refresh all data
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:278](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L278)
-
-___
-
-### getPublicLogoCacheStats
-
-▸ **getPublicLogoCacheStats**(): `Object`
-
-Get cache statistics for debugging
-
-#### Returns
-
-`Object`
-
-| Name | Type |
-| :------ | :------ |
-| `size` | `number` |
-| `keys` | `string`[] |
-
-#### Defined in
-
-[packages/core/src/hooks/public/usePublicEventLogo.ts:289](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/public/usePublicEventLogo.ts#L289)
-
-___
-
 ### usePublicFileDisplay
 
 ▸ **usePublicFileDisplay**(`table_name`, `record_id`, `organisation_id`, `category`, `options`): [`UsePublicFileDisplayReturn`](interfaces/UsePublicFileDisplayReturn.md)
@@ -4116,76 +4038,6 @@ App configuration and loading state
 
 ___
 
-### useEventLogo
-
-▸ **useEventLogo**(`supabase`, `eventId`, `eventName`, `organisationId`, `options?`): [`UseEventLogoReturn`](interfaces/UseEventLogoReturn.md)
-
-Hook for accessing event logo URLs in authenticated contexts
-
-This hook provides access to event logo URLs for authenticated users.
-It supports both public and private logos, generating appropriate URLs
-(public URLs for public files, signed URLs for private files).
-
-#### Parameters
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `supabase` | ``null`` \| `default`\<`any`, ``"public"``, ``"public"``, `any`, `any`\> | Supabase client instance (required) |
-| `eventId` | `undefined` \| `string` | The event ID to fetch logo for |
-| `eventName` | `undefined` \| `string` | The event name for fallback text generation |
-| `organisationId` | `undefined` \| `string` | The organisation ID for storage path |
-| `options` | [`UseEventLogoOptions`](interfaces/UseEventLogoOptions.md) | Configuration options for caching and behavior |
-
-#### Returns
-
-[`UseEventLogoReturn`](interfaces/UseEventLogoReturn.md)
-
-Object containing logo URL, fallback text, loading state, error, and refetch function
-
-#### Defined in
-
-[packages/core/src/hooks/useEventLogo.ts:131](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/useEventLogo.ts#L131)
-
-___
-
-### clearEventLogoCache
-
-▸ **clearEventLogoCache**(): `void`
-
-Clear all cached authenticated event logo data
-Useful for testing or when you need to force refresh all data
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[packages/core/src/hooks/useEventLogo.ts:298](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/useEventLogo.ts#L298)
-
-___
-
-### getEventLogoCacheStats
-
-▸ **getEventLogoCacheStats**(): `Object`
-
-Get cache statistics for debugging
-
-#### Returns
-
-`Object`
-
-| Name | Type |
-| :------ | :------ |
-| `size` | `number` |
-| `keys` | `string`[] |
-
-#### Defined in
-
-[packages/core/src/hooks/useEventLogo.ts:309](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/hooks/useEventLogo.ts#L309)
-
-___
-
 ### useEventTheme
 
 ▸ **useEventTheme**(): `void`

package/docs/implementation-guides/file-reference-system.md

@@ -1,6 +1,6 @@
 ---
-lastUpdated: 2025-10-29T22:43:00+11:00
-version: 0.5.76
+lastUpdated: 2025-11-01T14:58:00+11:00
+version: 0.5.102
 reviewedBy: content-audit
 ---
 
@@ -30,7 +30,7 @@ CREATE TABLE file_references (
   table_name TEXT NOT NULL,           -- Source table (e.g., 'pace_person')
   record_id TEXT NOT NULL,            -- Source record ID
   file_path TEXT NOT NULL,            -- Storage path
-  file_metadata JSONB DEFAULT '{}',   -- File metadata
+  file_metadata JSONB DEFAULT '{}',   -- File metadata (includes category, fileName, fileType, etc.)
   organisation_id UUID NOT NULL,      -- For RLS
   app_id UUID NOT NULL,               -- Application context
   is_public BOOLEAN DEFAULT false,    -- Public vs private
@@ -39,6 +39,8 @@ CREATE TABLE file_references (
 );
 ```
 
+**Important:** The `category` is stored within the `file_metadata` JSONB field as `file_metadata->>'category'`, **not** as a direct column. Category filtering is performed via RPC functions (`data_file_reference_by_category_list`) that properly query the JSONB field. Direct queries filtering on a non-existent `category` column will fail.
+
 ### Storage Structure
 
 **Organisation-First Structure:**
@@ -397,25 +399,33 @@ fileReferences.forEach(fileRef => {
 });
 ```
 
-#### useEventLogo Hook
+**Note:** Category filtering uses the RPC function `data_file_reference_by_category_list`, which filters on `file_metadata->>'category'` (the JSONB field), not a direct column. This hook automatically handles the filtering correctly.
 
-```tsx
-import { useEventLogo } from '@jmruthers/pace-core';
+#### Event Logo Display
 
-const { logoUrl, fallbackText, isLoading, error, refetch } = useEventLogo(
-  supabase,
-  eventId,
-  eventName,
-  organisationId,
-  {
-    validateImage: true,
-    enableCache: true,
-    cacheTtl: 30 * 60 * 1000 // 30 minutes
-  }
-);
+Event logos can be displayed using `FileDisplay` with category filtering:
 
-// Automatically handles both public and private event logos
-// Falls back to event initials if no logo is found
+```tsx
+import { FileDisplay, FileCategory } from '@jmruthers/pace-core';
+
+// Display event logo with fallback
+<FileDisplay
+  table_name="event"
+  record_id={eventId}
+  organisation_id={organisationId}
+  category={FileCategory.EVENT_LOGOS}
+  displayOnly={true}
+  showFallback={true}
+  fallbackSize="lg"
+  generateFallbackText={(fileName) => {
+    if (!eventName) return 'EV';
+    return eventName
+      .split(/[\s\-_]+/)
+      .map(word => word.charAt(0).toUpperCase())
+      .join('')
+      .substring(0, 3);
+  }}
+/>
 ```
 
 #### useFileReferenceForRecord Hook
@@ -500,6 +510,8 @@ SELECT data_file_reference_get(
 );
 
 -- Get files by category
+-- NOTE: Category filtering uses the file_metadata JSONB field (file_metadata->>'category'),
+-- not a direct column. This RPC function properly filters on the JSONB field.
 SELECT data_file_reference_by_category_list(
   p_table_name := 'event',
   p_record_id := 'event-uuid',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.102",
+  "version": "0.5.103",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {

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

@@ -1147,15 +1147,19 @@ function DataTableInternal<TData extends DataRecord>({
 
         {/* Table header */}
         <thead>
-          {table?.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers
-                .filter(header => {
-                  return typeof header.column.getIsVisible === 'function' 
-                    ? header.column.getIsVisible() 
-                    : true;
-                })
-                .map((header) => {
+          {table?.getHeaderGroups().map((headerGroup) => {
+            // Filter visible headers once to determine first and last
+            const visibleHeaders = headerGroup.headers.filter(header => {
+              return typeof header.column.getIsVisible === 'function' 
+                ? header.column.getIsVisible() 
+                : true;
+            });
+            
+            return (
+              <tr key={headerGroup.id}>
+                {visibleHeaders.map((header, index) => {
+                  const isFirst = index === 0;
+                  const isLast = index === visibleHeaders.length - 1;
                   const isSortable = header.column.getCanSort();
                   const ariaSort = isSortable
                     ? (header.column.getIsSorted() === 'asc'
@@ -1205,7 +1209,12 @@ function DataTableInternal<TData extends DataRecord>({
                   return (
                     <th
                       key={header.id}
-                      className={`px-3 py-2 ${isRightAligned ? 'text-right' : 'text-left'}`}
+                      className={cn(
+                        'px-3 py-2 bg-main-200',
+                        isRightAligned ? 'text-right' : 'text-left',
+                        isFirst && 'rounded-l-md',
+                        isLast && 'rounded-r-md'
+                      )}  
                       scope="col"
                       role="columnheader"
                       {...(isSortable ? { 'aria-sort': ariaSort } : {})}
@@ -1215,7 +1224,7 @@ function DataTableInternal<TData extends DataRecord>({
                         isSortable ? (
                           <Button
                             variant="ghost"
-                            className={`h-auto p-0 font-medium hover:bg-transparent ${isRightAligned ? 'justify-end' : 'justify-start'}`}
+                            className={`h-auto p-0 font-bold hover:bg-transparent ${isRightAligned ? 'justify-end' : 'justify-start'}`}
                             onClick={handleSortClick}
                             {...headerKeyboardHandlers}
                             aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
@@ -1241,8 +1250,9 @@ function DataTableInternal<TData extends DataRecord>({
                     </th>
                   );
                 })}
-            </tr>
-          ))}
+              </tr>
+            );
+          })}
         </thead>
 
         {/* Table body */}

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

@@ -50,12 +50,42 @@ export function useTableColumns<TData extends DataRecord>({
 
   const enhancedColumns = useMemo(() => {
     // Create enhanced base columns
-    const baseColumns: ColumnDef<TData>[] = [...columns].map(column => ({
-      ...column,
-      enableSorting: features.sorting && (column.enableSorting !== false),
-      enableColumnFilter: features.filtering && (column.enableColumnFilter !== false),
-      enableGrouping: features.grouping && (column.enableGrouping !== false),
-    }));
+    const baseColumns: ColumnDef<TData>[] = [...columns].map(column => {
+      const baseColumn = {
+        ...column,
+        enableSorting: features.sorting && (column.enableSorting !== false),
+        enableColumnFilter: features.filtering && (column.enableColumnFilter !== false),
+        enableGrouping: features.grouping && (column.enableGrouping !== false),
+      };
+
+      // Automatically set right alignment for numeric columns
+      // Check if column is numeric by:
+      // 1. meta.type === 'number'
+      // 2. fieldType === 'number'
+      // 3. filterType === 'number'
+      // Exclude dates (fieldType === 'date' or meta.type === 'date')
+      const dataTableColumn = column as DataTableColumn<TData>;
+      const isNumericColumn = 
+        column.meta?.type === 'number' ||
+        dataTableColumn.fieldType === 'number' ||
+        dataTableColumn.filterType === 'number';
+      
+      const isDateColumn = 
+        column.meta?.type === 'date' ||
+        dataTableColumn.fieldType === 'date' ||
+        dataTableColumn.filterType === 'date';
+
+      // Set right alignment if numeric and not a date
+      if (isNumericColumn && !isDateColumn) {
+        baseColumn.meta = {
+          ...baseColumn.meta,
+          align: 'right',
+          type: 'number',
+        };
+      }
+
+      return baseColumn;
+    });
 
     // Create selection column if enabled
     const selectionColumn: ColumnDef<TData> | null = features.selection ? {

package/src/components/PublicLayout/PublicPageHeader.tsx

@@ -17,7 +17,7 @@
  *
  * @example
  * ```tsx
- * import { PublicPageHeader, EventLogo } from '@jmruthers/pace-core';
+ * import { PublicPageHeader, FileDisplay } from '@jmruthers/pace-core';
  *
  * function PublicEventPage() {
  *   return (

package/src/components/index.ts

@@ -260,8 +260,6 @@ export type {
   UseFileReferenceReturn, 
   UseFileReferenceForRecordReturn 
 } from '../hooks/useFileReference';
-export { useEventLogo, clearEventLogoCache, getEventLogoCacheStats } from '../hooks/useEventLogo';
-export type { UseEventLogoReturn, UseEventLogoOptions } from '../hooks/useEventLogo';
 
 export { useToast } from '../hooks/useToast';
 

package/src/hooks/public/index.ts

@@ -10,15 +10,14 @@
  * 
  * @example
  * // Import individual hooks
- * import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core/hooks/public';
+ * import { usePublicEvent } from '@jmruthers/pace-core/hooks/public';
  * 
  * // Or import from main package
- * import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core';
+ * import { usePublicEvent } from '@jmruthers/pace-core';
  */
 
 // === PUBLIC DATA ACCESS HOOKS ===
 export { usePublicEvent, clearPublicEventCache, getPublicEventCacheStats } from './usePublicEvent';
-export { usePublicEventLogo, clearPublicLogoCache, getPublicLogoCacheStats } from './usePublicEventLogo';
 export { usePublicFileDisplay, clearPublicFileDisplayCache, getPublicFileDisplayCacheStats } from './usePublicFileDisplay';
 
 // === PUBLIC ROUTE HOOKS ===
@@ -31,6 +30,5 @@ export {
 
 // === PUBLIC TYPES ===
 export type { UsePublicEventReturn, UsePublicEventOptions } from './usePublicEvent';
-export type { UsePublicEventLogoReturn, UsePublicEventLogoOptions } from './usePublicEventLogo';
 export type { UsePublicFileDisplayReturn, UsePublicFileDisplayOptions } from './usePublicFileDisplay';
 export type { UsePublicRouteParamsReturn } from './usePublicRouteParams';

package/src/index.ts

@@ -224,8 +224,6 @@ export type {
   UseFileReferenceReturn, 
   UseFileReferenceForRecordReturn 
 } from './hooks/useFileReference';
-export { useEventLogo, clearEventLogoCache, getEventLogoCacheStats } from './hooks/useEventLogo';
-export type { UseEventLogoReturn, UseEventLogoOptions } from './hooks/useEventLogo';
 export * from './utils/storage';
 
 // Table components

package/src/utils/file-reference.ts

@@ -342,6 +342,9 @@ export class FileReferenceServiceImpl implements FileReferenceService {
     organisation_id: string
   ): Promise<FileReference[]> {
     try {
+      // Use RPC function to get files by category - this correctly filters on file_metadata->>'category'
+      // NOTE: We do NOT filter directly on a 'category' column because it doesn't exist.
+      // The category is stored in the JSONB file_metadata field.
       const { data, error } = await this.supabase
         .rpc('data_file_reference_by_category_list', {
           p_table_name: table_name,
@@ -351,7 +354,16 @@ export class FileReferenceServiceImpl implements FileReferenceService {
         });
 
       if (error) {
-        throw new Error(`Failed to get files by category: ${error.message}`);
+        // Provide clear error message about category filtering
+        console.error('[FileReferenceService] RPC error getting files by category:', {
+          error,
+          table_name,
+          record_id,
+          category,
+          organisation_id,
+          message: 'Category filtering is done via RPC function data_file_reference_by_category_list which filters on file_metadata->>\'category\''
+        });
+        throw new Error(`Failed to get files by category: ${error.message}. Category filtering uses file_metadata JSONB field, not a direct column.`);
       }
 
       // RPC returns partial data, need to fetch full file references
@@ -360,6 +372,7 @@ export class FileReferenceServiceImpl implements FileReferenceService {
       }
 
       // Fetch full file reference data for each ID
+      // Note: This query does NOT filter by category - the RPC already did that filtering
       const ids = data.map((item: any) => item.id);
       const { data: fullData, error: fetchError } = await this.supabase
         .from('file_references')
@@ -370,7 +383,22 @@ export class FileReferenceServiceImpl implements FileReferenceService {
         throw new Error(`Failed to fetch file references: ${fetchError.message}`);
       }
 
-      return (fullData || []) as FileReference[];
+      // Verify that all returned files match the category (defensive check)
+      const filteredFiles = (fullData || []).filter((file: any) => {
+        const fileCategory = file.file_metadata?.category;
+        return fileCategory === category;
+      });
+
+      if (filteredFiles.length !== fullData.length) {
+        console.warn('[FileReferenceService] RPC returned files with mismatched categories. Filtering client-side.', {
+          expected: category,
+          returned: fullData.map((f: any) => f.file_metadata?.category),
+          filtered: filteredFiles.length,
+          total: fullData.length
+        });
+      }
+
+      return filteredFiles as FileReference[];
     } catch (error) {
       console.error('Error getting files by category:', error);
       throw error;

package/src/utils/storage/README.md

@@ -148,29 +148,31 @@ const { fileReferences, fileUrls, isLoading, error } = useFilesByCategory(
 );
 ```
 
-### useEventLogo
+### FileDisplay Component
 
-Fetch event logos for both public and authenticated contexts with automatic fallback.
+Display event logos and other files with automatic fallback support.
 
 ```typescript
-const { logoUrl, fallbackText, isLoading, error, refetch } = useEventLogo(
-  supabase,
-  eventId,
-  eventName,
-  organisationId,
-  {
-    validateImage: true,
-    enableCache: true,
-    cacheTtl: 30 * 60 * 1000 // 30 minutes
-  }
-);
+import { FileDisplay, FileCategory } from '@jmruthers/pace-core';
 
-// Display logo with fallback
-{logoUrl ? (
-  <img src={logoUrl} alt={`${eventName} logo`} />
-) : (
-  <div className="logo-fallback">{fallbackText}</div>
-)}
+// Display event logo with fallback
+<FileDisplay
+  table_name="event"
+  record_id={eventId}
+  organisation_id={organisationId}
+  category={FileCategory.EVENT_LOGOS}
+  displayOnly={true}
+  showFallback={true}
+  fallbackSize="lg"
+  generateFallbackText={(fileName) => {
+    if (!eventName) return 'EV';
+    return eventName
+      .split(/[\s\-_]+/)
+      .map(word => word.charAt(0).toUpperCase())
+      .join('')
+      .substring(0, 3);
+  }}
+/>
 ```
 
 ## File Categories
@@ -331,7 +333,7 @@ await uploadFile({
 6. **Memory leak / "Maximum update depth exceeded"**
    - Ensure proper cleanup in useEffect hooks
    - Check for infinite re-render loops in components
-   - Use `clearEventLogoCache()` when unmounting components
+   - Use `clearFileDisplayCache()` when unmounting components
 
 ### Debug Mode