@jmruthers/pace-core 0.5.107 → 0.5.109

package/docs/api-reference/hooks.md

@@ -76,6 +76,59 @@ function App() {
 }
 ```
 
+> **Note**: Login and logout tracking is automatically handled by `UnifiedAuthProvider`. No manual intervention is required.
+
+### useSessionTracking
+
+Utility hook for manual session tracking of event switches and session expiration. **Note**: Login and logout are automatically tracked by `UnifiedAuthProvider`, so those methods are not available here.
+
+```typescript
+function useSessionTracking(
+  supabaseClient: SupabaseClient,
+  appName?: string
+): {
+  trackEventSwitch: (eventId: string) => Promise<void>;
+  trackSessionExpired: () => Promise<void>;
+}
+```
+
+#### Usage
+
+```tsx
+import { useSessionTracking } from '@jmruthers/pace-core';
+import { supabase } from './lib/supabase';
+
+function MyComponent() {
+  const { trackEventSwitch, trackSessionExpired } = useSessionTracking(
+    supabase,
+    'MY_APP'
+  );
+
+  const handleEventSwitch = async (eventId: string) => {
+    await trackEventSwitch(eventId);
+    // Event switch logic...
+  };
+
+  const handleSessionExpiration = async () => {
+    await trackSessionExpired();
+    // Session expiration logic...
+  };
+
+  return (
+    // Component JSX
+  );
+}
+```
+
+#### Methods
+
+| Method | Description |
+|--------|-------------|
+| `trackEventSwitch(eventId)` | Track when a user switches to a different event. |
+| `trackSessionExpired()` | Track when a session expires. |
+
+> **Automatic Tracking**: When using `UnifiedAuthProvider`, login and logout events are **automatically tracked**. You only need to use this hook for event switches or session expirations, which are not automatically tracked.
+
 
 ## Event Management Hooks
 

package/docs/api-reference/providers.md

@@ -206,6 +206,66 @@ The inactivity tracker monitors the following user interactions:
 - **Automatic cleanup**: All timers and listeners are properly cleaned up
 - **Error handling**: Graceful fallback if localStorage or BroadcastChannel fail
 
+#### Automatic Login History Tracking
+
+The `UnifiedAuthProvider` automatically tracks all user logins for security auditing and compliance:
+
+- **Automatic Tracking** - No manual intervention required, tracking happens automatically on login/logout
+- **Complete Audit Trail** - Records user ID, email, timestamp, IP address, user agent, and application context
+- **Database Storage** - All login events are stored in `rbac_user_login_history` table
+- **Application Context** - Tracks which application the user logged into (when `appName` is provided)
+- **Non-Blocking** - Tracking failures don't prevent authentication from succeeding
+- **Privacy Compliant** - Users can only view their own login history (RLS enforced)
+
+Login history is tracked automatically when you use `UnifiedAuthProvider`. No additional configuration is required:
+
+```tsx
+<UnifiedAuthProvider
+  supabaseClient={supabase}
+  appName="MY_APP"  // Enables app-specific tracking in login history
+  // ... other props
+>
+  <AppContent />
+</UnifiedAuthProvider>
+```
+
+**What Gets Tracked:**
+
+- User ID and email
+- Login timestamp
+- Session ID
+- IP address (if available)
+- User agent string
+- Application ID (if `appName` is provided)
+- Organisation ID
+- Event ID (if applicable)
+
+**Querying Login History:**
+
+Login history can be queried directly from the database using RLS-protected queries:
+
+```sql
+-- Get user's login history
+SELECT 
+  login_timestamp,
+  email,
+  ip_address,
+  user_agent,
+  app_id,
+  event_id
+FROM rbac_user_login_history
+WHERE user_id = auth.uid()
+ORDER BY login_timestamp DESC
+LIMIT 100;
+```
+
+**Security Notes:**
+
+- Login history insertion uses `SECURITY DEFINER` functions (bypasses RLS)
+- RLS policies ensure users can only view their own login history
+- Failed tracking attempts are logged as warnings but don't break authentication
+- All tracking is asynchronous and non-blocking
+
 ## OrganisationProvider
 
 Manages multi-tenant organisation context and user organisation memberships. **Automatically sets database organisation context** to ensure RLS policies work correctly.

package/docs/core-concepts/authentication.md

@@ -77,6 +77,7 @@ sequenceDiagram
 - **Persistent State** - Authentication state persists across page reloads
 - **Multi-Tab Support** - Authentication state synchronized across tabs
 - **Graceful Degradation** - Handles network issues and token expiry
+- **Automatic Login History** - User login events are automatically tracked in `rbac_user_login_history` table
 
 ### Security Features
 
@@ -84,6 +85,7 @@ sequenceDiagram
 - **JWT Tokens** - Secure, stateless authentication
 - **CSRF Protection** - Cross-site request forgery prevention
 - **Audit Logging** - Complete action tracking for compliance
+- **Login History Tracking** - Automatic tracking of all user logins with timestamps, IP addresses, user agents, and application context
 
 ## Multi-Tenancy
 

package/docs/implementation-guides/authentication.md

@@ -23,6 +23,7 @@ PACE Core provides a comprehensive authentication system built on Supabase that
 - **🔒 Session Persistence** - Secure session management with auto-refresh
 - **🎯 Permission Integration** - Built-in RBAC integration
 - **📊 Debug Support** - Comprehensive debugging and monitoring
+- **📝 Automatic Login History** - All user logins automatically tracked for audit trails
 
 ## Quick Start
 

package/docs/security/README.md

@@ -16,6 +16,7 @@ PACE Core is designed with security as a first-class concern, providing:
 - **Comprehensive RBAC system** with fine-grained permissions
 - **Secure data access** with row-level security
 - **Audit logging** for compliance and monitoring
+- **Automatic login history tracking** for security audits and compliance
 - **Input validation** and sanitization
 - **XSS protection** and secure coding practices
 - **Auto-logout on inactivity** for enhanced security
@@ -59,6 +60,64 @@ Sessions are automatically managed by PACE Core:
 - **Session validation** on every request
 - **Automatic logout** on token expiration
 - **Inactivity auto-logout** after 30 minutes of inactivity (configurable)
+- **Automatic login history tracking** - All user logins are automatically recorded
+
+### 2.1 Login History Tracking
+
+PACE Core **automatically tracks all user logins** for security auditing and compliance - no manual intervention required.
+
+- **Fully Automatic** - Simply use `UnifiedAuthProvider` with `appName` prop - tracking happens automatically
+- **No Configuration Needed** - No calls to tracking functions, no setup code, no manual intervention
+- **Complete Audit Trail** - Records user ID, email, timestamp, IP address, user agent, and application context
+- **Database Storage** - All login events are stored in `rbac_user_login_history` table automatically
+- **Application Context** - Tracks which application the user logged into (when `appName` is provided)
+- **Non-Blocking** - Tracking failures don't prevent authentication from succeeding
+- **Privacy Compliant** - Users can only view their own login history (RLS enforced)
+
+**How It Works:**
+
+Login history tracking is **completely automatic** when you use `UnifiedAuthProvider`. Simply provide the `appName` prop (which is already required) and tracking happens automatically:
+
+```tsx
+import { UnifiedAuthProvider } from '@jmruthers/pace-core';
+
+function App() {
+  return (
+    <UnifiedAuthProvider
+      supabaseClient={supabaseClient}
+      appName="MY_APP"  // Optional: Enables app-specific tracking
+      // ... other props
+    >
+      <YourApp />
+    </UnifiedAuthProvider>
+  );
+}
+```
+
+**Querying Login History:**
+
+Login history can be queried directly from the database:
+
+```sql
+-- Get user's login history
+SELECT 
+  login_timestamp,
+  email,
+  ip_address,
+  user_agent,
+  app_id
+FROM rbac_user_login_history
+WHERE user_id = auth.uid()
+ORDER BY login_timestamp DESC
+LIMIT 100;
+```
+
+**Security Notes:**
+
+- Login history insertion uses `SECURITY DEFINER` functions (bypasses RLS)
+- RLS policies ensure users can only view their own login history
+- Failed tracking attempts are logged but don't break authentication
+- All tracking is asynchronous and non-blocking
 
 ```tsx
 import { useUnifiedAuth } from '@jmruthers/pace-core';

package/package.json

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

package/src/components/DataTable/components/ColumnFilter.tsx

@@ -62,13 +62,14 @@ export function ColumnFilter({
         );
       
       case 'number':
+        // Always hide spinner arrows for number filter inputs (cleaner UX)
         return (
           <Input
             type="number"
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
             placeholder={placeholder || `Filter ${column.id}...`}
-            className="h-8"
+            className="h-8 datatable-number-no-spinners"
           />
         );
       

package/src/components/DataTable/components/EditableRow.tsx

@@ -44,7 +44,10 @@ function SelectEditField<TData extends DataRecord>({
   onChange: (value: CellValue) => void;
   className?: string;
 }) {
-  const isSearchable = columnDef.selectSearchable !== false; // Default to true for better UX
+  // Determine if searchable - explicitly check for true to ensure visible search input appears
+  // When selectSearchable is true or undefined, show the visible search input box
+  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
+  const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
   const selectRef = React.useRef<HTMLFormElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -137,7 +140,7 @@ function SelectEditField<TData extends DataRecord>({
         <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
       </SelectTrigger>
       <SelectContent 
-        searchable={isSearchable}
+        searchable={Boolean(isSearchable)}
         searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
         maxHeight={columnDef.selectMaxHeight}
         className={columnDef.selectContentClassName}
@@ -232,6 +235,8 @@ const renderEditField = <TData extends DataRecord>(
   }
 
   if (columnDef.fieldType === 'number') {
+    // Hide spinner arrows by default for number, currency, and percentage fields
+    // Only show spinners if explicitly set to false
     const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input

package/src/components/DataTable/components/FilterRow.tsx

@@ -12,7 +12,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
   const { columnFilters } = getState();
 
   // Get unique values for select filters
-  const getColumnOptions = (columnId: string) => {
+  const getColumnOptions = React.useCallback((columnId: string) => {
     const column = table.getColumn(columnId);
     if (!column) return [];
 
@@ -40,44 +40,55 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
     return Array.from(uniqueValues)
       .sort()
       .map((value) => ({ value, label: value }));
-  };
+  }, [table]);
 
   // Determine filter type based on column data
-  const getFilterType = (columnId: string) => {
+  // IMPORTANT: Explicit filterType always takes priority - auto-detection only runs if filterType is not set
+  const getFilterType = React.useCallback((columnId: string) => {
     const column = table.getColumn(columnId);
     if (!column) return 'text';
 
     const columnDef = column.columnDef as any;
     
-    // Check if column has explicit filter type configuration
-    if (columnDef.filterType) {
-      return columnDef.filterType;
+    // PRIORITY 1: Check if column has explicit filter type configuration
+    // This MUST be checked first and must respect any explicit value, including 'text'
+    // Use explicit !== undefined && !== null check to ensure 'text' is not treated as falsy
+    // This prevents auto-detection from overriding explicit filterType settings
+    const explicitFilterType = columnDef.filterType;
+    if (explicitFilterType !== undefined && explicitFilterType !== null && explicitFilterType !== '') {
+      // Explicit filterType set - return it immediately (no auto-detection)
+      // This ensures filterType: 'text' is always respected, even for columns with ≤10 unique values
+      return explicitFilterType as 'text' | 'select' | 'number' | 'date';
     }
     
-    // Auto-detect select filter if filterSelectOptions is provided
+    // Only proceed with auto-detection if filterType was NOT explicitly set
+    
+    // PRIORITY 2: Auto-detect select filter if filterSelectOptions is explicitly provided
     if (columnDef.filterSelectOptions && Array.isArray(columnDef.filterSelectOptions)) {
       return 'select';
     }
 
-    // Check if it's a date column
+    // PRIORITY 3: Check if it's a date column (by column ID pattern)
     if (columnId.toLowerCase().includes('date') || columnId.toLowerCase().includes('time')) {
       return 'date';
     }
 
-    // Check if it's a number column
+    // PRIORITY 4: Check if it's a number column (by data type)
     const firstValue = table.getRowModel().rows[0]?.getValue(columnId);
     if (typeof firstValue === 'number') {
       return 'number';
     }
 
-    // Check if it has limited unique values (good for select)
+    // PRIORITY 5: Auto-detect select filter if limited unique values (≤10)
+    // Only runs if filterType was NOT explicitly set (checked above)
     const uniqueValues = getColumnOptions(columnId);
     if (uniqueValues.length <= 10 && uniqueValues.length > 1) {
       return 'select';
     }
 
+    // Default to text filter
     return 'text';
-  };
+  }, [table, getColumnOptions]);
 
   return (
     <tr className="border-b bg-sec-50/50">

package/src/components/DataTable/components/PaginationControls.tsx

@@ -259,7 +259,7 @@ export function EnhancedPaginationControls<TData extends DataRecord>({
               max={pageCount}
               value={jumpToPage}
               onChange={(e) => setJumpToPage(e.target.value)}
-              className="w-16 h-6 px-2 border rounded text-xs"
+              className="w-16 h-6 px-2 border rounded text-xs datatable-number-no-spinners"
               placeholder="1"
             />
             <Button type="submit" size="sm" variant="outline" className="h-6 px-2 text-xs">

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

@@ -134,7 +134,10 @@ function SelectEditField<TData extends DataRecord>({
   placeholder?: string;
   onChange: (value: CellValue) => void;
 }) {
-  const isSearchable = columnDef.selectSearchable !== false; // Default to true for better UX
+  // Determine if searchable - explicitly check for true to ensure visible search input appears
+  // When selectSearchable is true or undefined, show the visible search input box
+  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
+  const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
   const selectRef = React.useRef<HTMLFormElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -227,7 +230,7 @@ function SelectEditField<TData extends DataRecord>({
         <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
       </SelectTrigger>
       <SelectContent 
-        searchable={isSearchable}
+        searchable={Boolean(isSearchable)}
         searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
         maxHeight={columnDef.selectMaxHeight}
         className={columnDef.selectContentClassName}
@@ -312,8 +315,11 @@ const renderEditField = <TData extends DataRecord>(
     );
   }
   
-  // Check for number type
+  // Check for number type (applies to number, currency, and percentage fields)
   if (columnDef.fieldType === 'number') {
+    // Hide spinner arrows by default for all number-related fields
+    // Currency and percentage columns use fieldType: 'number' with formatting in cell renderer
+    // Only show spinners if explicitly set to false
     const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input
@@ -879,6 +885,26 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
               }
               
               // Render edit fields for data columns
+              // Determine the correct key to use for creationData
+              // Priority: editAccessorKey > accessorKey > column.id
+              const columnDef = header.column.columnDef as EditableColumnDef<TData>;
+              const dataKey = columnDef.editAccessorKey || columnDef.accessorKey || header.column.id;
+              
+              // Always render a cell to maintain alignment - renderEditField always returns something
+              const editField = renderEditField(
+                header.column, 
+                creationData[dataKey] ?? creationData[header.column.id] ?? '', 
+                (value) => {
+                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                    onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
+                  } else {
+                    // Use the determined dataKey for consistent data access
+                    onCreationDataChange({ ...creationData, [dataKey]: value as CellValue });
+                  }
+                }, 
+                creationData
+              );
+              
               return (
                 <td 
                   key={header.column.id} 
@@ -887,13 +913,16 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                     className: "px-3 py-2"
                   })}
                 >
-                  {renderEditField(header.column, creationData[header.column.id], (value) => {
-                    if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
-                      onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
-                    } else {
-                      onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
-                    }
-                  }, creationData)}
+                  {editField || (
+                    // Fallback: render a text input if renderEditField somehow returns nothing
+                    <Input
+                      type="text"
+                      value={String(creationData[dataKey] ?? creationData[header.column.id] ?? '')}
+                      onChange={(e) => onCreationDataChange({ ...creationData, [dataKey]: e.target.value as CellValue })}
+                      placeholder={`Enter ${columnDef.header || header.column.id}...`}
+                      className="h-8"
+                    />
+                  )}
                 </td>
               );
             })}

package/src/components/PaceAppLayout/PaceAppLayout.test.tsx

@@ -540,7 +540,7 @@ describe('PaceAppLayout Component', () => {
             eventId: 'event-123',
             appId: 'app-123',
           },
-          permission: 'update',
+          permission: 'update:page.dashboard-page',
           pageId: 'dashboard-page',
         });
       }, { timeout: 3000 });
@@ -571,7 +571,7 @@ describe('PaceAppLayout Component', () => {
             eventId: 'event-123',
             appId: 'app-123',
           },
-          permission: 'create',
+          permission: 'create:page.dashboard',
           pageId: 'dashboard',
         });
       }, { timeout: 3000 });