@jmruthers/pace-core 0.5.107 → 0.5.108

package/docs/api/interfaces/RouteConfig.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / RouteConfig
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / RouteConfig
 
 # Interface: RouteConfig
 

package/docs/api/interfaces/SecureDataContextType.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / SecureDataContextType
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / SecureDataContextType
 
 # Interface: SecureDataContextType
 

package/docs/api/interfaces/SecureDataProviderProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / SecureDataProviderProps
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / SecureDataProviderProps
 
 # Interface: SecureDataProviderProps
 

package/docs/api/interfaces/StorageConfig.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageConfig
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageConfig
 
 # Interface: StorageConfig
 

package/docs/api/interfaces/StorageFileInfo.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageFileInfo
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageFileInfo
 
 # Interface: StorageFileInfo
 

package/docs/api/interfaces/StorageFileMetadata.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageFileMetadata
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageFileMetadata
 
 # Interface: StorageFileMetadata
 

package/docs/api/interfaces/StorageListOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageListOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageListOptions
 
 # Interface: StorageListOptions
 

package/docs/api/interfaces/StorageListResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageListResult
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageListResult
 
 # Interface: StorageListResult
 

package/docs/api/interfaces/StorageUploadOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageUploadOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageUploadOptions
 
 # Interface: StorageUploadOptions
 

package/docs/api/interfaces/StorageUploadResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageUploadResult
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageUploadResult
 
 # Interface: StorageUploadResult
 

package/docs/api/interfaces/StorageUrlOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StorageUrlOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StorageUrlOptions
 
 # Interface: StorageUrlOptions
 

package/docs/api/interfaces/StyleImport.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / StyleImport
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / StyleImport
 
 # Interface: StyleImport
 

package/docs/api/interfaces/SwitchProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / SwitchProps
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / SwitchProps
 
 # Interface: SwitchProps
 

package/docs/api/interfaces/ToastActionElement.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / ToastActionElement
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / ToastActionElement
 
 # Interface: ToastActionElement
 

package/docs/api/interfaces/ToastProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / ToastProps
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / ToastProps
 
 # Interface: ToastProps
 

package/docs/api/interfaces/UnifiedAuthContextType.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
 
 # Interface: UnifiedAuthContextType
 

package/docs/api/interfaces/UnifiedAuthProviderProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
 
 # Interface: UnifiedAuthProviderProps
 

package/docs/api/interfaces/UseInactivityTrackerOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
 
 # Interface: UseInactivityTrackerOptions
 

package/docs/api/interfaces/UseInactivityTrackerReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
 
 # Interface: UseInactivityTrackerReturn
 

package/docs/api/interfaces/UsePublicEventOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
 
 # Interface: UsePublicEventOptions
 

package/docs/api/interfaces/UsePublicEventReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
 
 # Interface: UsePublicEventReturn
 

package/docs/api/interfaces/UsePublicFileDisplayOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayOptions
 
 # Interface: UsePublicFileDisplayOptions
 

package/docs/api/interfaces/UsePublicFileDisplayReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayReturn
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayReturn
 
 # Interface: UsePublicFileDisplayReturn
 

package/docs/api/interfaces/UsePublicRouteParamsReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
 
 # Interface: UsePublicRouteParamsReturn
 

package/docs/api/interfaces/UseResolvedScopeOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UseResolvedScopeOptions
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UseResolvedScopeOptions
 
 # Interface: UseResolvedScopeOptions
 

package/docs/api/interfaces/UseResolvedScopeReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UseResolvedScopeReturn
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UseResolvedScopeReturn
 
 # Interface: UseResolvedScopeReturn
 

package/docs/api/interfaces/UserEventAccess.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UserEventAccess
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UserEventAccess
 
 # Interface: UserEventAccess
 

package/docs/api/interfaces/UserMenuProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UserMenuProps
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UserMenuProps
 
 # Interface: UserMenuProps
 

package/docs/api/interfaces/UserProfile.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.107](../README.md) / [Exports](../modules.md) / UserProfile
+[@jmruthers/pace-core - v0.5.108](../README.md) / [Exports](../modules.md) / UserProfile
 
 # Interface: UserProfile
 

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.107](README.md) / Exports
+[@jmruthers/pace-core - v0.5.108](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.107
+# @jmruthers/pace-core - v0.5.108
 
 **`File`**
 
@@ -2355,7 +2355,7 @@ function App() {
 
 **`Example`**
 
-Custom navigation items with permission filtering:
+Custom navigation items with permission filtering (works independently of route enforcement):
 ```tsx
 import { NavigationItem } from '@jmruthers/pace-core';
 
@@ -2373,13 +2373,15 @@ function App() {
           <PaceAppLayout 
             appName="My Custom App" 
             navItems={customNavItems}
-            enforcePermissions={true}
+            // Navigation filtering works independently - no need for enforcePermissions
             filterNavigationByPermissions={true}
             routePermissions={{
               '/components': 'read',
               '/styles': 'read',
               '/meals': 'read'
             }}
+            // Optionally enable route-level enforcement (separate from navigation filtering)
+            // enforcePermissions={true}
           />
         }>
           <Route path="components" element={<ComponentsPage />} />
@@ -2433,7 +2435,7 @@ function AdminApp() {
 
 #### Defined in
 
-[packages/core/src/components/PaceAppLayout/PaceAppLayout.tsx:322](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PaceAppLayout/PaceAppLayout.tsx#L322)
+[packages/core/src/components/PaceAppLayout/PaceAppLayout.tsx:324](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/PaceAppLayout/PaceAppLayout.tsx#L324)
 
 ___
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.107",
+  "version": "0.5.108",
   "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.tsx

@@ -243,7 +243,7 @@ export interface PaceAppLayoutProps {
  * 
  * 
  * @example
- * Custom navigation items with permission filtering:
+ * Custom navigation items with permission filtering (works independently of route enforcement):
  * ```tsx
  * import { NavigationItem } from '@jmruthers/pace-core';
  * 
@@ -261,13 +261,15 @@ export interface PaceAppLayoutProps {
  *           <PaceAppLayout 
  *             appName="My Custom App" 
  *             navItems={customNavItems}
- *             enforcePermissions={true}
+ *             // Navigation filtering works independently - no need for enforcePermissions
  *             filterNavigationByPermissions={true}
  *             routePermissions={{
  *               '/components': 'read',
  *               '/styles': 'read',
  *               '/meals': 'read'
  *             }}
+ *             // Optionally enable route-level enforcement (separate from navigation filtering)
+ *             // enforcePermissions={true}
  *           />
  *         }>
  *           <Route path="components" element={<ComponentsPage />} />
@@ -367,12 +369,24 @@ export function PaceAppLayout({
       
       // Check if user is super admin first - super admins can access everything
       // regardless of organisation context
-      const { isSuperAdmin } = await import('../../rbac/api');
-      const isSuper = await isSuperAdmin(user.id);
-      
-      if (isSuper) {
-        // Super admin bypass - allow access regardless of organisation context
-        return true;
+      // Gracefully handle RBAC not being initialized (e.g., in tests)
+      try {
+        const { isSuperAdmin } = await import('../../rbac/api');
+        const isSuper = await isSuperAdmin(user.id);
+        
+        if (isSuper) {
+          // Super admin bypass - allow access regardless of organisation context
+          return true;
+        }
+      } catch (error) {
+        // If RBAC is not initialized (e.g., in tests), continue with normal permission check
+        // This prevents errors from breaking permission checks when RBAC isn't available
+        if (error && typeof error === 'object' && 'code' in error && error.code === 'RBAC_NOT_INITIALIZED') {
+          // RBAC not available - proceed with normal permission check
+        } else {
+          // Re-throw unexpected errors
+          throw error;
+        }
       }
       
       // For non-super admins, ensure we have at least organisationId for RBAC
@@ -498,10 +512,12 @@ export function PaceAppLayout({
   }, [enforcePermissions, currentRoutePermission, currentPageId, strictMode, user?.id]);
 
   // Filter navigation items based on permissions
+  // This works independently of route enforcement - navigation filtering doesn't require enforcePermissions
   const [filteredMenuItems, setFilteredMenuItems] = useState<NavigationItem[]>(baseMenuItems);
 
   useEffect(() => {
-    if (!filterNavigationByPermissions || !enforcePermissions) {
+    // Allow navigation filtering without route enforcement
+    if (!filterNavigationByPermissions) {
       setFilteredMenuItems(baseMenuItems);
       return;
     }
@@ -509,6 +525,58 @@ export function PaceAppLayout({
     let isMounted = true;
 
     const filterItems = async () => {
+      // Wait for organisation context to be ready before filtering
+      // This prevents blocking navigation while context is loading
+      if (!user?.id) {
+        // User not loaded yet - show all items until context is ready
+        if (isMounted) {
+          setFilteredMenuItems(baseMenuItems);
+        }
+        return;
+      }
+
+      // Check if organisation context is available
+      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,
+      };
+
+      // For super admins, show all items (they bypass permission checks)
+      // Gracefully handle RBAC not being initialized (e.g., in tests)
+      try {
+        const { isSuperAdmin } = await import('../../rbac/api');
+        const isSuper = await isSuperAdmin(user.id);
+        
+        if (isSuper) {
+          // Super admins see all navigation items
+          if (isMounted) {
+            setFilteredMenuItems(baseMenuItems);
+          }
+          return;
+        }
+      } catch (error) {
+        // If RBAC is not initialized (e.g., in tests), continue with normal filtering
+        // This prevents errors from breaking navigation when RBAC isn't available
+        if (error && typeof error === 'object' && 'code' in error && error.code === 'RBAC_NOT_INITIALIZED') {
+          // RBAC not available - proceed with normal filtering without super admin check
+          // In this case, we'll filter items normally based on permissions
+        } else {
+          // Re-throw unexpected errors
+          throw error;
+        }
+      }
+
+      // If no organisation context yet, show all items until context is ready
+      // This prevents navigation from being empty while context loads
+      if (!scope.organisationId) {
+        if (isMounted) {
+          setFilteredMenuItems(baseMenuItems);
+        }
+        return;
+      }
+
+      // Organisation context is ready - now filter items based on permissions
       const filtered = await Promise.all(
         baseMenuItems.map(async (item) => {
           if (!item.href) return { item, hasAccess: true };
@@ -520,6 +588,7 @@ export function PaceAppLayout({
             const hasAccess = await checkPermission(permission, pageId);
             return { item, hasAccess };
           } catch {
+            // On error, default to hiding the item (fail-safe)
             return { item, hasAccess: false };
           }
         })
@@ -539,7 +608,7 @@ export function PaceAppLayout({
     return () => {
       isMounted = false;
     };
-  }, [baseMenuItems, filterNavigationByPermissions, enforcePermissions, pageIdMapping, routePermissions, defaultPermission]);
+  }, [baseMenuItems, filterNavigationByPermissions, pageIdMapping, routePermissions, defaultPermission, checkPermission, user?.id, user?.user_metadata, user?.app_metadata]);
 
   // NEW: Phase 2 - Enhanced Routing Features
   // Check route access for role-based routing