@jmruthers/pace-core 0.5.184 → 0.5.185

package/src/components/DateTimeField/README.md

@@ -0,0 +1,148 @@
+# DateTimeField Component
+
+Form input component for datetime values with automatic UTC ↔ timezone conversion.
+
+## Overview
+
+The `DateTimeField` component provides a datetime input field that automatically handles conversion between UTC (for storage) and a specified timezone (for display). It prevents unwanted conversions during user editing and displays timezone information when not using UTC.
+
+## Features
+
+- Automatic UTC ↔ timezone conversion
+- Prevents unwanted conversions during user editing
+- Shows timezone information when not UTC
+- Supports both ISO string and Date object values
+- Uses native `datetime-local` input type
+- Accessible form field with proper labels
+- Error state support
+- Helper text support
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { DateTimeField } from '@jmruthers/pace-core/components';
+import { useState } from 'react';
+
+function EventForm() {
+  const [startTime, setStartTime] = useState<string>();
+
+  return (
+    <DateTimeField
+      label="Start Time"
+      value={startTime}
+      onChange={setStartTime}
+      timezone="America/New_York"
+      required
+    />
+  );
+}
+```
+
+### With Date Object
+
+```tsx
+import { DateTimeField } from '@jmruthers/pace-core/components';
+import { useState } from 'react';
+
+function EventForm() {
+  const [startTime, setStartTime] = useState<Date>();
+
+  return (
+    <DateTimeField
+      label="Start Time"
+      value={startTime}
+      onChange={setStartTime}
+      timezone="America/New_York"
+      returnAsDate
+    />
+  );
+}
+```
+
+### With Error State
+
+```tsx
+<DateTimeField
+  label="Start Time"
+  value={startTime}
+  onChange={setStartTime}
+  timezone="America/New_York"
+  error="Please select a valid start time"
+  required
+/>
+```
+
+### With Helper Text
+
+```tsx
+<DateTimeField
+  label="Start Time"
+  value={startTime}
+  onChange={setStartTime}
+  timezone="America/New_York"
+  helperText="Select the event start time in your local timezone"
+/>
+```
+
+## API
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | **required** | Field label |
+| `value` | `string \| Date \| undefined` | - | UTC date value (ISO string, Date object, or undefined) |
+| `onChange` | `(value: string \| Date \| undefined) => void` | **required** | Change handler that receives UTC value |
+| `timezone` | `string` | `'UTC'` | Target timezone for display (IANA timezone string) |
+| `required` | `boolean` | `false` | Whether the field is required |
+| `className` | `string` | - | Additional CSS classes |
+| `returnAsDate` | `boolean` | `false` | If true, onChange returns Date object instead of ISO string |
+| `id` | `string` | - | Input id (auto-generated if not provided) |
+| `helperText` | `string` | - | Helper text to display below the label |
+| `error` | `string` | - | Error message to display |
+
+## Behavior
+
+### Timezone Conversion
+
+The component automatically converts between UTC (for storage) and the specified timezone (for display):
+
+- **Display**: UTC values are converted to the specified timezone for display in the input
+- **Input**: User-entered values (in the timezone) are converted back to UTC before calling `onChange`
+
+### Editing Prevention
+
+The component tracks editing state to prevent unwanted conversions while the user is typing. Conversions only occur when:
+- The component receives a new `value` prop (controlled component)
+- The user finishes editing (blur event)
+
+### Timezone Display
+
+- When `timezone` is `'UTC'`: No timezone indicator is shown
+- When `timezone` matches the user's browser timezone: Shows "Local"
+- When `timezone` is different: Shows the timezone name (e.g., "America/New_York")
+
+## Accessibility
+
+- Proper label association with `htmlFor`
+- Required field indicators for screen readers
+- Error messages with `role="alert"`
+- Keyboard navigation support
+- Focus management
+
+## Edge Cases
+
+- **Invalid dates**: Returns empty string in input, calls `onChange(undefined)`
+- **Null/undefined values**: Displays empty input
+- **Invalid timezone**: Falls back to UTC behavior
+
+## Dependencies
+
+- `date-fns` - Date formatting and parsing
+- `date-fns-tz` - Timezone conversion
+- `@jmruthers/pace-core/components/Label` - Label component
+- `@jmruthers/pace-core/components/Input` - Input component
+- `@jmruthers/pace-core/utils/timezone` - Timezone utilities
+

package/src/components/DateTimeField/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file DateTimeField Component Exports
+ * @package @jmruthers/pace-core
+ * @module Components/DateTimeField
+ * @since 0.1.0
+ */
+
+export { DateTimeField } from './DateTimeField';
+export type { DateTimeFieldProps } from './DateTimeField';
+

package/src/components/FileUpload/FileUpload.tsx

@@ -22,6 +22,7 @@ export interface FileUploadProps {
   organisation_id: string;
   app_id?: string; // Optional - will be resolved from app name if not provided
   category: FileCategory;
+  pageContext: string; // The page context where the file upload occurs (e.g., 'configuration', 'forms', 'applications')
   accept?: string;
   maxSize?: number;
   multiple?: boolean;
@@ -50,6 +51,7 @@ export function FileUpload({
   organisation_id,
   app_id,
   category,
+  pageContext,
   accept = '*/*',
   maxSize = 10 * 1024 * 1024, // 10MB default
   multiple = false,
@@ -284,6 +286,7 @@ export function FileUpload({
           organisation_id,
           app_id: resolvedAppId ? assertAppId(resolvedAppId) : assertAppId(''),
           category,
+          pageContext,
           is_public: isPublic
         }, file);
 

package/src/components/Header/Header.test.tsx

@@ -60,6 +60,14 @@ vi.mock('../EventSelector', () => ({
   ),
 }));
 
+vi.mock('../OrganisationSelector', () => ({
+  OrganisationSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'org-selector'} className={className}>
+      <button>{placeholder}</button>
+    </div>
+  ),
+}));
+
 // Test data
 const mockUser: User = {
   id: '123',
@@ -312,16 +320,8 @@ describe('Header Component', () => {
       expect(screen.getByRole('button', { name: 'Select event' })).toBeInTheDocument();
     });
 
-    it('renders placeholder when showEventSelector is false', () => {
-      const { container } = renderWithProviders(<Header showEventSelector={false} />);
-      
-      const placeholder = container.querySelector('del.invisible');
-      expect(placeholder).toBeInTheDocument();
-      expect(placeholder).toHaveTextContent('Event Selector N/A');
-    });
-
-    it('preserves grid layout when event selector is hidden', () => {
-      const { container } = renderWithProviders(
+    it('preserves layout when event selector is hidden', () => {
+      renderWithProviders(
         <Header 
           showEventSelector={false}
           user={mockUser}
@@ -333,15 +333,47 @@ describe('Header Component', () => {
       expect(nav).toBeInTheDocument();
       expect(nav).toBeVisible();
       
-      // Placeholder should maintain grid structure
-      const placeholder = container.querySelector('del.invisible');
-      expect(placeholder).toBeInTheDocument();
+      // Event selector should not be rendered
+      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
       
       // User menu should still be present and positioned correctly
       expect(screen.getByTestId('user-menu')).toBeInTheDocument();
     });
   });
 
+  // Organisation Selector tests
+  describe('Organisation Selector', () => {
+    it('does not render organisation selector by default', () => {
+      renderWithProviders(<Header />);
+      
+      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
+    });
+
+    it('renders organisation selector when showOrgSelector is true', () => {
+      renderWithProviders(<Header showOrgSelector={true} />);
+      
+      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
+    });
+
+    it('does not render organisation selector when showOrgSelector is false', () => {
+      renderWithProviders(<Header showOrgSelector={false} />);
+      
+      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
+    });
+
+    it('can render both organisation and event selectors together', () => {
+      renderWithProviders(
+        <Header 
+          showOrgSelector={true}
+          showEventSelector={true}
+        />
+      );
+      
+      expect(screen.getByTestId('org-selector')).toBeInTheDocument();
+      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+    });
+  });
+
   // Custom actions tests
   describe('Custom Actions', () => {
     it('renders custom actions when provided', () => {
@@ -560,7 +592,7 @@ describe('Header Component', () => {
     });
 
     it('renders minimal configuration', () => {
-      const { container } = renderWithProviders(
+      renderWithProviders(
         <Header
           showEventSelector={false}
           showUserMenu={false}
@@ -573,10 +605,7 @@ describe('Header Component', () => {
       expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
       expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
       expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
-      
-      // Should have placeholder for event selector
-      const placeholder = container.querySelector('del.invisible');
-      expect(placeholder).toBeInTheDocument();
+      expect(screen.queryByTestId('org-selector')).not.toBeInTheDocument();
     });
   });
 

package/src/components/Header/Header.tsx

@@ -5,13 +5,14 @@
  * @since 0.1.0
  *
  * A comprehensive header component for application layouts with navigation,
- * user menu, event selector, and customizable branding.
+ * user menu, organisation selector, event selector, and customizable branding.
  *
  * Features:
  * - Customizable logo (URL or component)
  * - Clickable logo that routes to dashboard (configurable)
  * - Navigation menu integration
  * - User menu with authentication
+ * - Organisation selector for multi-organisation applications
  * - Event selector for multi-tenant applications
  * - Custom actions support
  * - Responsive design
@@ -82,6 +83,7 @@
  * - Tailwind CSS - Styling
  * - NavigationMenu component
  * - UserMenu component
+ * - OrganisationSelector component
  * - EventSelector component
  */
 
@@ -90,6 +92,7 @@ import { Link } from 'react-router-dom';
 import { User } from '@supabase/supabase-js';
 import { cn } from '../../utils/core/cn';
 import { EventSelector } from '../EventSelector';
+import { OrganisationSelector } from '../OrganisationSelector';
 import { UserMenu } from '../UserMenu';
 import { NavigationMenu } from '../NavigationMenu';
 import type { NavigationItem } from '../NavigationMenu';
@@ -121,6 +124,8 @@ export interface HeaderProps {
   className?: string;
   /** Show/hide event selector */
   showEventSelector?: boolean;
+  /** Show/hide organisation selector */
+  showOrgSelector?: boolean;
   /** Show/hide user menu */
   showUserMenu?: boolean;
   /** Current path for navigation highlighting */
@@ -244,6 +249,7 @@ export function Header({
   userMenu,
   className,
   showEventSelector = true,
+  showOrgSelector = false,
   showUserMenu = true,
   currentPath,
   onNavigate,
@@ -311,19 +317,30 @@ export function Header({
           )}
         
 
-        {/* Right side: Event Selector, Actions, and User Menu */}
+        {/* Right side: Organisation Selector, Event Selector, Actions, and User Menu */}
+        <div className="flex items-center gap-4 justify-end">
+          {/* Organisation Selector */}
+          {showOrgSelector ? (
+            <OrganisationSelector 
+              placeholder="Select organisation" 
+              className="w-64" 
+              data-testid="org-selector"
+              compact={true}
+            />
+          ) : null}
 
           {/* Event Selector */}
           {showEventSelector ? (
             <EventSelector 
               placeholder="Select event" 
-              className="justify-self-end w-96" 
+              className="w-96" 
               data-testid="event-selector" 
             />
-          ) : (
-            <del className="justify-self-end invisible">Event Selector N/A</del>
-          )}
+          ) : null}
+        </div>
           
+        {/* Custom Actions and User Menu */}
+        <div className="flex items-center gap-4">
           {/* Custom Actions */}
           {actions}
           
@@ -340,6 +357,7 @@ export function Header({
               />
             )
           )}
+        </div>
 
       </nav>
     </header>

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -128,6 +128,8 @@ export interface PaceAppLayoutProps {
   navItems?: NavigationItem[];
   /** Show/hide event selector in the header */
   showEventSelector?: boolean;
+  /** Show/hide organisation selector in the header */
+  showOrgSelector?: boolean;
   /** Custom actions to display in the header (between event selector and user menu) */
   headerActions?: React.ReactNode;
   /** Custom logo component (overrides default logo) */
@@ -344,6 +346,7 @@ export function PaceAppLayout({
   appName, 
   navItems, 
   showEventSelector,
+  showOrgSelector,
   headerActions,
   customLogo,
   logoHref = '/dashboard',
@@ -573,16 +576,25 @@ export function PaceAppLayout({
       const hasOrganisationContext = currentScope.organisationId;
       const hasUser = !!user?.id;
       
-      // If we have user + organisation, show items immediately (optimistic rendering)
-      // Then filter them when permissions are fully loaded
-      if (hasUser && hasOrganisationContext) {
-        // We have minimum required context - proceed with filtering
-        // Don't wait for appId or eventId - we can filter with organisationId alone
-        // Permission checks will work with resource permissions even without appId
-      } else if (!hasUser || !hasOrganisationContext) {
-        // Missing required context - wait for it
+      // BUG FIX: When showOrgSelector is enabled, show navigation optimistically while waiting
+      // for organisation selection. Only hide navigation if user is not loaded.
+      // This prevents navigation from disappearing after initial render while waiting for org selection.
+      if (!hasUser) {
+        // User not loaded yet - show all items until user is ready
+        if (isMounted) {
+          setFilteredMenuItems(baseMenuItems);
+        }
+        return;
+      }
+
+      // If no organisation context yet, show items optimistically if org selector is enabled
+      // This allows users to see navigation while they select an organisation
+      // Only proceed with permission filtering once organisation is selected
+      if (!hasOrganisationContext) {
         if (isMounted) {
-          setFilteredMenuItems([]);
+          // Show items optimistically when org selector is enabled, otherwise show all items
+          // This prevents navigation from disappearing while waiting for organisation selection
+          setFilteredMenuItems(baseMenuItems);
         }
         return;
       }
@@ -612,15 +624,6 @@ export function PaceAppLayout({
         }
       }
 
-      // If no organisation context yet, show all items until context is ready
-      // This prevents navigation from being empty while context loads
-      if (!currentScope.organisationId) {
-        if (isMounted) {
-          setFilteredMenuItems(baseMenuItems);
-        }
-        return;
-      }
-
       // Organisation context is ready - now filter items based on permissions
       // OPTIMIZATION: Use batch permission map instead of individual checks to avoid rate limits
       // This makes 1 call instead of N calls (where N = number of navigation items)
@@ -645,7 +648,9 @@ export function PaceAppLayout({
         const filtered = baseMenuItems.map((item) => {
           if (!item.href) return { item, hasAccess: true };
           
-          const pageId = pageIdMapping[item.href] || item.href.slice(1) || 'home';
+          // Extract page ID from href: remove leading slash, fallback to 'dashboard' for root
+          // This matches database page names in rbac_app_pages
+          const pageId = pageIdMapping[item.href] || (item.href === '/' ? 'dashboard' : item.href.slice(1)) || 'dashboard';
           const permission = routePermissions[item.href] || defaultPermission;
           const fullPermission: Permission = permission.includes(':')
             ? (permission as Permission)
@@ -663,6 +668,9 @@ export function PaceAppLayout({
           .filter(({ hasAccess }) => hasAccess)
           .map(({ item }) => item);
 
+        // SECURITY: Never show all items if permission check fails - this would be a security risk
+        // If all items are filtered out, it means the user doesn't have permission to see any navigation
+        // This is the correct behavior - better to show nothing than show unauthorized items
         setFilteredMenuItems(accessibleItems);
       } catch (error) {
         // On error, fall back to showing all items (graceful degradation)
@@ -679,7 +687,7 @@ export function PaceAppLayout({
     return () => {
       isMounted = false;
     };
-  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId]);
+  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId, selectedOrganisation?.id]);
 
   // NEW: Phase 2 - Enhanced Routing Features
   // Check route access for role-based routing
@@ -883,6 +891,7 @@ export function PaceAppLayout({
           }
         }}
         showEventSelector={showEventSelector}
+        showOrgSelector={showOrgSelector}
         showUserMenu={showUserMenu}
         className={headerClassName || "sticky top-0 z-[40] w-full"}
       />

package/src/components/PaceAppLayout/README.md

@@ -17,6 +17,7 @@ A comprehensive application layout component that provides a consistent structur
 - Flexible content area
 - Branding support
 - **Event selector control** - can be hidden for non-event applications
+- **Organisation selector control** - can be shown for multi-organisation applications
 - **Header customization** - custom logo, actions, user menu, and styling
 - **Clickable logo** - logo automatically routes to dashboard page (configurable)
 
@@ -27,6 +28,7 @@ A comprehensive application layout component that provides a consistent structur
 | `appName` | `string` | required | The name of the application to be displayed in the header |
 | `navItems` | `NavigationItem[]` | optional | Navigation items for the header menu. If not provided, uses default navigation |
 | `showEventSelector` | `boolean` | `true` | Show/hide event selector in the header |
+| `showOrgSelector` | `boolean` | `false` | Show/hide organisation selector in the header |
 | `headerActions` | `React.ReactNode` | optional | Custom actions to display in the header (between event selector and user menu) |
 | `customLogo` | `React.ReactNode` | optional | Custom logo component (overrides default logo) |
 | `logoHref` | `string` | `'/dashboard'` | URL to navigate to when logo is clicked (e.g., '/dashboard', '/home') |
@@ -243,6 +245,13 @@ function App() {
 - Single-tenant applications
 - Administrative dashboards that don't depend on events
 
+### Show Organisation Selector (`showOrgSelector={true}`)
+- Multi-organisation applications
+- Apps where users need to switch between organisations
+- Organisation management tools
+- Multi-tenant applications with organisation context
+- Apps requiring organisation-scoped data access
+
 ### Custom Header Components
 - Applications requiring custom branding
 - Apps with specific header actions (search, notifications, etc.)