@jmruthers/pace-core 0.5.187 → 0.5.189

package/docs/implementation-guides/public-pages.md

@@ -1,1304 +1,214 @@
 ---
-lastUpdated: 2025-11-18T14:00:00+11:00
+lastUpdated: 2025-01-28T00:00:00+11:00
 version: 0.5.181
 reviewedBy: documentation-standards-audit
 ---
 
 # Public Pages Implementation Guide
 
-> **🌐 Public Pages** | [← Back to Documentation](../README.md) | [↑ Table of Contents](#table-of-contents)
+## Overview
 
-Complete guide for implementing public pages that work independently of your main application's authentication context.
+This guide explains how to implement public pages that are accessible to anonymous users without authentication. Public pages use the `public_recipe_details` view and respect the `public_readable` flag on events.
 
-## 🚨 **CRITICAL: Architecture Requirements**
+## Public Event Configuration
 
-**Public pages MUST be completely separate from your main app's authentication context.** This is the #1 reason consuming apps struggle with this feature.
+### Enabling Public Access
 
-### ❌ **WRONG - This Will Break**
-```tsx
-// DON'T DO THIS - Public pages inside auth context
-<UnifiedAuthProvider>
-  <OrganisationProvider>
-    <EventProvider>
-      <Routes>
-        <Route path="/events/:eventCode" element={<PublicPage />} /> {/* ❌ BREAKS */}
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
-    </EventProvider>
-  </OrganisationProvider>
-</UnifiedAuthProvider>
-```
-
-### ✅ **CORRECT - Separate Applications**
-```tsx
-// DO THIS - Public pages completely separate
-<BrowserRouter>
-  <Routes>
-    {/* Public routes - NO authentication context */}
-    <Route path="/events/*" element={<PublicPageApp />} />
-    <Route path="/public/*" element={<PublicPageApp />} />
-    
-    {/* Authenticated routes - WITH authentication context */}
-    <Route path="/*" element={<AuthenticatedApp />} />
-  </Routes>
-</BrowserRouter>
-```
-
-## 🏗️ **Required Architecture**
-
-### 1. **Two Separate Applications**
+To make an event publicly accessible:
 
-You need to create **two completely separate applications**:
-
-1. **`AuthenticatedApp`** - Your main app with authentication
-2. **`PublicPageApp`** - Public pages with no authentication
-
-### 2. **Root Router Decision**
-
-Your root component decides which app to render based on the route:
-
-```tsx
-function RootApp() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        {/* Public routes - completely isolated */}
-        <Route path="/events/*" element={<PublicPageApp />} />
-        <Route path="/public/*" element={<PublicPageApp />} />
-        <Route path="/reports/*" element={<PublicPageApp />} />
-        
-        {/* Authenticated routes - normal app */}
-        <Route path="/*" element={<AuthenticatedApp />} />
-      </Routes>
-    </BrowserRouter>
-  );
-}
+```sql
+UPDATE event 
+SET public_readable = true 
+WHERE event_id = 'YOUR_EVENT_ID';
 ```
 
-## 🚀 **Quick Start Implementation**
+**Security Note**: Only events with `public_readable = true` AND `is_visible = true` are accessible on public pages.
 
-### Step 1: Create Public Page App
+### Checking Public Access
 
-```tsx
-// PublicPageApp.tsx
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { 
-  PublicPageProvider,
-  PublicPageLayout, 
-  PublicPageHeader, 
-  PublicPageFooter,
-  usePublicEvent,
-  usePublicRouteParams,
-  PublicLoadingSpinner
-} from '@jmruthers/pace-core';
+The `check_public_event_access()` helper function automatically checks:
+- Event is visible (`is_visible = true`)
+- Event is publicly readable (`public_readable = true`)
+- Super admins always have access
 
-export function PublicPageApp() {
-  return (
-    <PublicPageProvider>
-      <Routes>
-        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipePage />} />
-        <Route path="/events/:eventCode" element={<PublicEventPage />} />
-        <Route path="/reports/:reportId" element={<PublicReportPage />} />
-      </Routes>
-    </PublicPageProvider>
-  );
-}
-```
+## Using the Public Recipe View
 
-### Step 2: Create Individual Public Pages
+### Querying the View
 
-```tsx
-// PublicRecipePage.tsx
-import React from 'react';
-import { 
-  PublicPageLayout, 
-  PublicPageHeader, 
-  PublicPageFooter,
-  usePublicEvent,
-  usePublicRouteParams,
-  PublicLoadingSpinner
-} from '@jmruthers/pace-core';
+```typescript
+import { useSupabase } from '@jmruthers/pace-core';
 
-export function PublicRecipePage() {
-  // Step 1: Get event code from URL
-  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+function RecipeDetailsPage() {
+  const { supabase } = useSupabase();
+  const { eventCode } = usePublicRouteParams();
   
-  // Step 2: Fetch event data
-  const { event, isLoading, error } = usePublicEvent(eventCode || '');
+  // Query public recipe view
+  const { data: recipes, error } = await supabase
+    .from('public_recipe_details')
+    .select('*')
+    .eq('event_id', eventId)
+    .order('dish_name');
   
-  // Step 3: Handle loading
-  if (isLoading) {
-    return <PublicLoadingSpinner message="Loading recipe grid report..." />;
-  }
-  
-  // Step 4: Handle error
-  if (error || !event) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-sec-900 mb-4">
-            Recipe Grid Report Not Found
-          </h1>
-          <p className="text-sec-600">
-            The event code "{eventCode}" is invalid or not available for public viewing.
-          </p>
-        </div>
-      </div>
-    );
+  if (error) {
+    console.error('Error fetching recipes:', error);
+    return <ErrorPage />;
   }
   
-  // Step 5: Render public page
-  return (
-    <PublicPageLayout eventCode={eventCode || ''} event={event}>
-      <PublicPageHeader 
-        event={event}
-        eventCode={eventCode || ''}
-        title="Recipe Grid Report"
-        description="Public recipe grid report for this event"
-      />
-      
-      <main className="max-w-6xl mx-auto px-4 py-8">
-        {/* Your public page content here */}
-        <div className="bg-background rounded-lg shadow p-6">
-          <h2 className="text-xl font-semibold mb-4">Recipe Grid Report</h2>
-          <p>Event: {event.event_name}</p>
-          <p>Code: {event.event_code}</p>
-          {/* Add your recipe grid content */}
-        </div>
-      </main>
-      
-      <PublicPageFooter event={event} />
-    </PublicPageLayout>
-  );
-}
-```
-
-### Step 3: Update Your Main App
-
-```tsx
-// App.tsx
-import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { UnifiedAuthProvider, OrganisationProvider, EventProvider } from '@jmruthers/pace-core';
-import { PublicPageApp } from './PublicPageApp';
-import { AuthenticatedApp } from './AuthenticatedApp';
-
-function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        {/* Public routes - completely separate */}
-        <Route path="/events/*" element={<PublicPageApp />} />
-        <Route path="/public/*" element={<PublicPageApp />} />
-        <Route path="/reports/*" element={<PublicPageApp />} />
-        
-        {/* Authenticated routes */}
-        <Route path="/*" element={
-          <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
-            <OrganisationProvider>
-              <EventProvider>
-                <AuthenticatedApp />
-              </EventProvider>
-            </OrganisationProvider>
-          </UnifiedAuthProvider>
-        } />
-      </Routes>
-    </BrowserRouter>
-  );
+  return <RecipeGrid recipes={recipes} />;
 }
-
-export default App;
-```
-
-## 🧩 **Core Components**
-
-### PublicPageProvider
-
-**Required wrapper for all public pages.** Provides environment variables and context without authentication.
-
-```tsx
-import { PublicPageProvider } from '@jmruthers/pace-core';
-
-<PublicPageProvider>
-  {/* All your public pages go here */}
-</PublicPageProvider>
 ```
 
-### PublicPageLayout
-
-**Main layout component for public pages.** Handles event data and provides consistent styling.
+### Available Columns
 
-```tsx
-import { PublicPageLayout } from '@jmruthers/pace-core';
-
-<PublicPageLayout 
-  eventCode="EVENT123" 
-  event={eventData}
-  showFooter={true}
->
-  {/* Your page content */}
-</PublicPageLayout>
-```
+The `public_recipe_details` view exposes:
 
-**Props:**
-- `eventCode` (required) - The event code from the URL
-- `children` (required) - Child components to render
-- `event` (optional) - Event data object (if not provided, will be fetched by parent component)
-- `isLoading` (optional) - Loading state (if true, shows loading spinner)
-- `error` (optional) - Error state (if provided, shows error message)
-- `refetch` (optional) - Function to retry loading event data
-- `showFooter` (optional) - Show/hide footer (default: true)
-- `className` (optional, deprecated) - Custom CSS classes (deprecated, no longer used as wrapper div was removed)
-- `errorFallback` (optional) - Custom error component
-- `loadingFallback` (optional) - Custom loading component
-- `customHeader` (optional) - Custom header component
-- `customFooter` (optional) - Custom footer component
-- `showValidationErrors` (optional) - Whether to show event validation errors (default: true)
-- `loadingMessage` (optional) - Custom loading message
-
-### PublicPageHeader
-
-**Header component with event branding and information.**
-
-```tsx
-import { PublicPageHeader } from '@jmruthers/pace-core';
-
-<PublicPageHeader 
-  event={event}
-  eventCode="EVENT123"
-  title="Recipe Grid Report"
-  description="Public recipe grid report for this event"
-  showEventLogo={true}
-  showAppLogo={true}
-/>
-```
+- **Dish Information**: `dish_id`, `dish_name`, `dish_code`, `dish_description`, `dish_equipment`, `dish_dietnote`, `dish_prep`, `dish_step1-5`
+- **Meal Type**: `mealtype_name`, `dish_mealtype_id`
+- **Event Information**: `event_id`, `event_name`, `event_code`, `organisation_id`
+- **Recipe Information**: `recipe_id` (if available)
 
-**Props:**
-- `eventCode` (required) - Event code from URL
-- `event` (optional) - Event data object
-- `title` (optional) - Page title
-- `description` (optional) - Page description
-- `showEventLogo` (optional) - Show event logo (default: true)
-- `showAppLogo` (optional) - Show app logo (default: true)
-- `className` (optional) - Custom CSS classes for the header
-- `children` (optional) - Custom content to display in the header
-- `customEventLogo` (optional) - Custom event logo component
+**Note**: Sensitive columns like `created_by`, `updated_by` are NOT exposed in the public view.
 
-### PublicPageFooter
+### Filtering
 
-**Footer component with event and app information.**
-
-```tsx
-import { PublicPageFooter } from '@jmruthers/pace-core';
+```typescript
+// Filter by meal type
+const { data: breakfastRecipes } = await supabase
+  .from('public_recipe_details')
+  .select('*')
+  .eq('event_id', eventId)
+  .eq('mealtype_name', 'Breakfast');
 
-<PublicPageFooter 
-  event={event}
-  showEventInfo={true}
-  showCopyright={true}
-  showAppBranding={true}
-/>
+// Filter by diet requirements
+const { data: vegetarianRecipes } = await supabase
+  .from('public_recipe_details')
+  .select('*')
+  .eq('event_id', eventId)
+  .eq('dish_dietnote', 'Vegetarian');
 ```
 
-## 🔗 **Hooks for Public Pages**
-
-### usePublicRouteParams
+## Performance Considerations
 
-**Extract parameters from public page URLs.**
+### View Performance
 
-```tsx
-import { usePublicRouteParams } from '@jmruthers/pace-core';
+The `public_recipe_details` view:
+- Uses performance-optimized helper functions (`check_public_event_access()`)
+- Automatically filters to `public_readable = true` events
+- Joins only necessary tables
+- Should complete queries in < 500ms
 
-function MyPublicPage() {
-  const { eventCode, reportId, pageId } = usePublicRouteParams({ 
-    fetchEventData: false // Don't auto-fetch event data
-  });
-  
-  // Use the parameters
-  console.log('Event Code:', eventCode);
-  console.log('Report ID:', reportId);
-}
-```
+### Indexes
 
-### usePublicEvent
+The view benefits from indexes created in Phase 0.5:
+- `idx_event_public_readable` on `event(public_readable, is_visible)`
+- Foreign key indexes on `cake_dish` and related tables
 
-**Fetch event data for public pages.**
+## Implementation Example
 
-```tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
+### Complete Public Recipe Page
 
-function MyPublicPage() {
-  const { event, isLoading, error, refetch } = usePublicEvent('EVENT123');
-  
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-  
-  return <div>Event: {event.event_name}</div>;
-}
-```
-
-### useIsPublicPage
-
-**Check if current page is a public page.**
-
-```tsx
-import { useIsPublicPage } from '@jmruthers/pace-core';
-
-function MyComponent() {
-  const isPublicPage = useIsPublicPage();
-  
-  if (isPublicPage) {
-    return <div>This is a public page</div>;
-  }
-  
-  return <div>This is an authenticated page</div>;
-}
-```
-
-## 📋 **Common Implementation Patterns**
-
-### Pattern 1: Event-Based Public Pages
+```typescript
+import { usePublicEvent, usePublicRouteParams } from '@jmruthers/pace-core';
+import { PublicPageLayout } from '@jmruthers/pace-core';
 
-```tsx
-// /events/:eventCode/recipe-grid-report
-function PublicRecipePage() {
+function PublicRecipeDetailsPage() {
   const { eventCode } = usePublicRouteParams({ fetchEventData: false });
   const { event, isLoading, error } = usePublicEvent(eventCode || '');
+  const { supabase } = useSupabase();
   
-  if (isLoading) return <PublicLoadingSpinner message="Loading..." />;
-  if (error || !event) return <PublicErrorPage eventCode={eventCode} />;
-  
-  return (
-    <PublicPageLayout eventCode={eventCode || ''} event={event}>
-      <PublicPageHeader 
-        event={event}
-        eventCode={eventCode || ''}
-        title="Recipe Grid Report"
-      />
-      
-      <main>
-        {/* Your recipe grid content */}
-      </main>
-      
-      <PublicPageFooter event={event} />
-    </PublicPageLayout>
-  );
-}
-```
-
-### Pattern 2: Report-Based Public Pages
-
-```tsx
-// /reports/:reportId
-function PublicReportPage() {
-  const { reportId } = usePublicRouteParams({ fetchEventData: false });
-  const [report, setReport] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [recipes, setRecipes] = useState([]);
+  const [selectedMealType, setSelectedMealType] = useState<string | null>(null);
   
   useEffect(() => {
-    // Fetch report data
-    fetchReport(reportId).then(setReport).finally(() => setLoading(false));
-  }, [reportId]);
-  
-  if (loading) return <PublicLoadingSpinner message="Loading report..." />;
-  if (!report) return <div>Report not found</div>;
-  
-  return (
-    <PublicPageLayout eventCode={report.eventCode} event={report.event}>
-      <PublicPageHeader 
-        event={report.event}
-        eventCode={report.eventCode}
-        title={report.title}
-        description={report.description}
-      />
-      
-      <main>
-        {/* Your report content */}
-      </main>
-      
-      <PublicPageFooter event={report.event} />
-    </PublicPageLayout>
-  );
-}
-```
-
-### Pattern 3: Simple Public Info Pages
-
-```tsx
-// /public/:pageId
-function PublicInfoPage() {
-  const { pageId } = usePublicRouteParams({ fetchEventData: false });
-  
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Public Information</h1>
-        <p>Page ID: {pageId}</p>
-        {/* Your content */}
-      </div>
-    </div>
-  );
-}
-```
-
-## ⚠️ **Common Mistakes & Solutions**
-
-### Mistake 1: Public Pages Inside Auth Context
-
-**❌ Problem:**
-```tsx
-<UnifiedAuthProvider>
-  <Route path="/events/:eventCode" element={<PublicPage />} />
-</UnifiedAuthProvider>
-```
-
-**✅ Solution:**
-```tsx
-<Routes>
-  <Route path="/events/*" element={<PublicPageApp />} />
-  <Route path="/*" element={
-    <UnifiedAuthProvider>
-      <AuthenticatedApp />
-    </UnifiedAuthProvider>
-  } />
-</Routes>
-```
-
-### Mistake 2: Using Auth Hooks in Public Pages
-
-**❌ Problem:**
-```tsx
-function PublicPage() {
-  const { user } = useUnifiedAuth(); // ❌ This will break
-  // ...
-}
-```
-
-**✅ Solution:**
-```tsx
-function PublicPage() {
-  const { event } = usePublicEvent(eventCode); // ✅ Use public hooks
-  // ...
-}
-```
-
-### Mistake 3: Missing PublicPageProvider
-
-**❌ Problem:**
-```tsx
-<Route path="/events/:eventCode" element={<PublicPage />} />
-```
-
-**✅ Solution:**
-```tsx
-<Route path="/events/*" element={
-  <PublicPageProvider>
-    <Routes>
-      <Route path=":eventCode" element={<PublicPage />} />
-    </Routes>
-  </PublicPageProvider>
-} />
-```
-
-### Mistake 4: Not Handling Loading/Error States
-
-**❌ Problem:**
-```tsx
-function PublicPage() {
-  const { event } = usePublicEvent(eventCode);
-  return <div>{event.event_name}</div>; // ❌ No loading/error handling
-}
-```
-
-**✅ Solution:**
-```tsx
-function PublicPage() {
-  const { event, isLoading, error } = usePublicEvent(eventCode);
-  
-  if (isLoading) return <PublicLoadingSpinner message="Loading..." />;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-  
-  return <div>{event.event_name}</div>;
-}
-```
-
-## 🔧 **Environment Setup**
-
-### Required Environment Variables
-
-```env
-# .env.local
-VITE_SUPABASE_URL=your_supabase_url
-VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-VITE_APP_NAME=Your App Name
-```
-
-### Database Setup
-
-Public pages need access to event data. Ensure your database has:
-
-1. **Events table** with public event data
-2. **RLS policies** that allow public access to specific events
-3. **Event codes** that are publicly accessible
-
-```sql
--- Example RLS policy for public events
-CREATE POLICY "Public events are viewable by anyone" ON events
-  FOR SELECT USING (is_public = true);
-```
-
-## 🧪 **Testing Public Pages**
-
-### Unit Testing
-
-```tsx
-import { render, screen } from '@testing-library/react';
-import { PublicPageProvider } from '@jmruthers/pace-core';
-import { PublicRecipePage } from './PublicRecipePage';
-
-test('renders public recipe page', () => {
-  render(
-    <PublicPageProvider>
-      <PublicRecipePage />
-    </PublicPageProvider>
-  );
-  
-  expect(screen.getByText('Recipe Grid Report')).toBeInTheDocument();
-});
-```
-
-### Integration Testing
-
-```tsx
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
-import { PublicPageApp } from './PublicPageApp';
-
-test('public page app routing works', () => {
-  render(
-    <BrowserRouter>
-      <PublicPageApp />
-    </BrowserRouter>
-  );
-  
-  // Test routing to public pages
-  expect(screen.getByText('Recipe Grid Report')).toBeInTheDocument();
-});
-```
-
-## 🚀 **Deployment Considerations**
-
-### Build Configuration
-
-Ensure your build process handles both authenticated and public routes:
-
-```tsx
-// vite.config.ts
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss({
-      content: [
-        './src/**/*.{js,ts,jsx,tsx}',
-        './node_modules/@jmruthers/pace-core/**/*.{js,ts,jsx,tsx}'
-      ]
-    })
-  ],
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          // Separate chunks for public and authenticated apps
-          'public-app': ['./src/PublicPageApp.tsx'],
-          'auth-app': ['./src/AuthenticatedApp.tsx']
-        }
-      }
+    if (!event?.event_id) return;
+    
+    let query = supabase
+      .from('public_recipe_details')
+      .select('*')
+      .eq('event_id', event.event_id);
+    
+    if (selectedMealType) {
+      query = query.eq('mealtype_name', selectedMealType);
     }
-  }
-});
-```
-
-### Server Configuration
-
-Configure your server to handle both route types:
-
-```nginx
-# nginx.conf
-location /events/ {
-  try_files $uri $uri/ /index.html; # SPA routing for public pages
-}
-
-location /public/ {
-  try_files $uri $uri/ /index.html; # SPA routing for public pages
-}
-
-location / {
-  try_files $uri $uri/ /index.html; # SPA routing for authenticated pages
-}
-```
-
-## 📚 **Complete Example**
-
-Here's a complete working example:
-
-```tsx
-// App.tsx - Root application
-import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { UnifiedAuthProvider, OrganisationProvider, EventProvider } from '@jmruthers/pace-core';
-import { PublicPageApp } from './PublicPageApp';
-import { AuthenticatedApp } from './AuthenticatedApp';
-
-function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        {/* Public routes - completely separate */}
-        <Route path="/events/*" element={<PublicPageApp />} />
-        <Route path="/public/*" element={<PublicPageApp />} />
-        <Route path="/reports/*" element={<PublicPageApp />} />
-        
-        {/* Authenticated routes */}
-        <Route path="/*" element={
-          <UnifiedAuthProvider supabaseClient={supabase} appName="My App">
-            <OrganisationProvider>
-              <EventProvider>
-                <AuthenticatedApp />
-              </EventProvider>
-            </OrganisationProvider>
-          </UnifiedAuthProvider>
-        } />
-      </Routes>
-    </BrowserRouter>
-  );
-}
-
-export default App;
-```
-
-```tsx
-// PublicPageApp.tsx - Public pages application
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { PublicPageProvider } from '@jmruthers/pace-core';
-import { PublicRecipePage } from './pages/PublicRecipePage';
-import { PublicEventPage } from './pages/PublicEventPage';
-
-export function PublicPageApp() {
-  return (
-    <PublicPageProvider>
-      <Routes>
-        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipePage />} />
-        <Route path="/events/:eventCode" element={<PublicEventPage />} />
-      </Routes>
-    </PublicPageProvider>
-  );
-}
-```
-
-```tsx
-// pages/PublicRecipePage.tsx - Individual public page
-import React from 'react';
-import { 
-  PublicPageLayout, 
-  PublicPageHeader, 
-  PublicPageFooter,
-  usePublicEvent,
-  usePublicRouteParams,
-  PublicLoadingSpinner
-} from '@jmruthers/pace-core';
-
-export function PublicRecipePage() {
-  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
-  const { event, isLoading, error } = usePublicEvent(eventCode || '');
-  
-  if (isLoading) {
-    return <PublicLoadingSpinner message="Loading recipe grid report..." />;
-  }
+    
+    query.order('dish_name').then(({ data, error }) => {
+      if (error) {
+        console.error('Error fetching recipes:', error);
+        return;
+      }
+      setRecipes(data || []);
+    });
+  }, [event?.event_id, selectedMealType, supabase]);
   
-  if (error || !event) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-sec-900 mb-4">
-            Recipe Grid Report Not Found
-          </h1>
-          <p className="text-sec-600">
-            The event code "{eventCode}" is invalid or not available for public viewing.
-          </p>
-        </div>
-      </div>
-    );
-  }
+  if (isLoading) return <LoadingSpinner />;
+  if (error || !event) return <ErrorPage />;
   
   return (
     <PublicPageLayout eventCode={eventCode || ''} event={event}>
-      <PublicPageHeader 
-        event={event}
-        eventCode={eventCode || ''}
-        title="Recipe Grid Report"
-        description="Public recipe grid report for this event"
+      <RecipeGrid 
+        recipes={recipes}
+        mealTypes={['Breakfast', 'Lunch', 'Dinner']}
+        onMealTypeChange={setSelectedMealType}
       />
-      
-      <main className="max-w-6xl mx-auto px-4 py-8">
-        <div className="bg-background rounded-lg shadow p-6">
-          <h2 className="text-xl font-semibold mb-4">Recipe Grid Report</h2>
-          <p>Event: {event.event_name}</p>
-          <p>Code: {event.event_code}</p>
-          {/* Add your recipe grid content here */}
-        </div>
-      </main>
-      
-      <PublicPageFooter event={event} />
     </PublicPageLayout>
   );
 }
 ```
 
-## 🔗 **Related Documentation**
-
-- **[API Reference - Public Components](../api-reference/components.md#public-components)** - Complete component API
-- **[Troubleshooting - Public Pages](../troubleshooting/common-issues.md#public-pages)** - Common issues and solutions
-- **[Examples - Public Page App](../getting-started/examples/)** - Complete working examples
-- **[Migration Guide - Public Pages](../migration/README.md#public-pages)** - Migration from other approaches
-
----
-
-## 🚀 **Advanced Topics**
-
-This section covers advanced topics for public pages, including event logos, caching strategies, SEO optimization, and performance tuning.
-
-### EventLogo Component
-
-A component for displaying event logos with automatic loading and caching.
-
-#### Props
-
-```typescript
-interface EventLogoProps {
-  eventId: string;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  variant?: 'default' | 'square' | 'wide';
-  className?: string;
-  fallback?: React.ReactNode;
-  showLoading?: boolean;
-}
-```
-
-#### Usage Examples
-
-**Basic Logo:**
-```tsx
-<EventLogo eventId={eventId} size="medium" />
-```
-
-**Custom Styling:**
-```tsx
-<EventLogo 
-  eventId={eventId} 
-  size="large"
-  variant="square"
-  className="rounded-lg shadow-lg"
-/>
-```
-
-**With Fallback:**
-```tsx
-<EventLogo 
-  eventId={eventId} 
-  size="medium"
-  fallback={
-    <div className="bg-sec-200 text-sec-500 p-4 rounded">
-      No Logo Available
-    </div>
-  }
-/>
-```
-
-### usePublicEventLogo Hook
-
-Hook for loading and caching event logos.
-
-#### Interface
-
-```typescript
-interface UsePublicEventLogoReturn {
-  logoUrl: string | null;
-  loading: boolean;
-  error: Error | null;
-  refetch: () => Promise<void>;
-  clearCache: () => void;
-}
-```
-
-#### Usage Examples
-
-> **Storage path formats**
->
-> When configuring `event_logo` for an event, Pace supports multiple formats:
->
-> - A fully qualified `https://` URL will be used directly.
-> - A storage path like `public-files/org-123/logo.png` automatically resolves against the standard buckets configured via `pace-core`.
-> - If your deployment stores logos in a different bucket, prefix the path with the bucket name using `custombucket/org-123/logo.png` (alphanumeric names) or `custom-bucket::org-123/logo.png` (bucket names containing hyphens).
->
-> The double colon form helps when your folders start with numbers (for example `2024/`), ensuring they are not mistaken for bucket names.
-
-**Basic Logo Loading:**
-```tsx
-import { usePublicEventLogo } from '@jmruthers/pace-core';
-
-function EventLogoDisplay({ eventId }: { eventId: string }) {
-  const { logoUrl, loading, error } = usePublicEventLogo(eventId, 'large');
-
-  if (loading) {
-    return <div className="animate-pulse bg-sec-200 w-32 h-32 rounded"></div>;
-  }
-
-  if (error) {
-    return <div className="text-sec-500">Logo unavailable</div>;
-  }
-
-  if (!logoUrl) {
-    return <div className="bg-sec-200 text-sec-500 p-4 rounded">No logo</div>;
-  }
-
-  return (
-    <img 
-      src={logoUrl} 
-      alt="Event logo" 
-      className="w-32 h-32 object-contain"
-    />
-  );
-}
-```
-
-**With Caching Control:**
-```tsx
-import { usePublicEventLogo } from '@jmruthers/pace-core';
+## Security Considerations
 
-function LogoWithCacheControl({ eventId }: { eventId: string }) {
-  const { 
-    logoUrl, 
-    loading, 
-    error, 
-    refetch, 
-    clearCache 
-  } = usePublicEventLogo(eventId, 'medium');
+### What's Protected
 
-  const handleRefresh = async () => {
-    await refetch();
-  };
+- **Organisation Data**: Only public event data is exposed
+- **User Data**: No user information is accessible
+- **Internal Data**: Internal notes, audit logs, etc. are not exposed
+- **RLS Enforcement**: View respects RLS policies on underlying tables
 
-  const handleClearCache = () => {
-    clearCache();
-  };
+### What's Exposed
 
-  return (
-    <div className="space-y-4">
-      {loading && <div>Loading logo...</div>}
-      {error && <div>Error: {error.message}</div>}
-      {logoUrl && (
-        <img 
-          src={logoUrl} 
-          alt="Event logo" 
-          className="w-16 h-16 object-contain"
-        />
-      )}
-      
-      <div className="space-x-2">
-        <Button onClick={handleRefresh} size="sm">
-          Refresh Logo
-        </Button>
-        <Button onClick={handleClearCache} size="sm" variant="outline">
-          Clear Cache
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
+- **Event Information**: Public event details (name, date, venue, etc.)
+- **Recipe Information**: Dish names, descriptions, preparation steps
+- **Diet Information**: Diet notes and requirements
+- **Meal Types**: Available meal types for the event
 
-### Caching Strategies
+## Troubleshooting
 
-#### Client-Side Caching
+### View Returns Empty Results
 
-```tsx
-import { usePublicEvent, clearPublicEventCache } from '@jmruthers/pace-core';
+1. **Check Event Configuration**:
+   ```sql
+   SELECT event_id, event_name, public_readable, is_visible
+   FROM event
+   WHERE event_id = 'YOUR_EVENT_ID';
+   ```
 
-function CachedEventPage({ eventId }: { eventId: string }) {
-  const { event, loading } = usePublicEvent(eventId);
+2. **Verify View Exists**:
+   ```sql
+   SELECT * FROM information_schema.views
+   WHERE table_name = 'public_recipe_details';
+   ```
 
-  // Cache management
-  const handleClearCache = () => {
-    clearPublicEventCache();
-    console.log('Event cache cleared');
-  };
+3. **Check RLS Policies**: Ensure underlying tables have correct RLS policies
 
-  return (
-    <div>
-      <h1>{event?.name}</h1>
-      
-      <div className="space-x-2">
-        <Button onClick={handleClearCache}>
-          Clear Cache
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
+### Performance Issues
 
-#### Cache Statistics
+1. **Check Indexes**:
+   ```sql
+   SELECT * FROM pg_indexes
+   WHERE tablename = 'event' AND indexname LIKE '%public%';
+   ```
 
-```tsx
-import { getPublicEventCacheStats, getPublicLogoCacheStats } from '@jmruthers/pace-core';
+2. **Use EXPLAIN ANALYZE**:
+   ```sql
+   EXPLAIN ANALYZE
+   SELECT * FROM public_recipe_details
+   WHERE event_id = 'YOUR_EVENT_ID';
+   ```
 
-function CacheStats() {
-  const eventStats = getPublicEventCacheStats();
-  const logoStats = getPublicLogoCacheStats();
+3. **Verify Helper Functions**: Ensure `check_public_event_access()` is STABLE SECURITY DEFINER
 
-  return (
-    <div className="bg-sec-50 p-4 rounded">
-      <h3>Cache Statistics</h3>
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <h4>Event Cache</h4>
-          <p>Entries: {eventStats.entryCount}</p>
-          <p>Hit Rate: {eventStats.hitRate}%</p>
-          <p>Memory Usage: {eventStats.memoryUsage} bytes</p>
-        </div>
-        <div>
-          <h4>Logo Cache</h4>
-          <p>Entries: {logoStats.entryCount}</p>
-          <p>Hit Rate: {logoStats.hitRate}%</p>
-          <p>Memory Usage: {logoStats.memoryUsage} bytes</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-### SEO Optimization
-
-#### Meta Tags and Structured Data
-
-```tsx
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-function SEOEventPage({ eventId }: { eventId: string }) {
-  const { event } = usePublicEvent(eventId);
-
-  // Generate structured data for search engines
-  const structuredData = event ? {
-    "@context": "https://schema.org",
-    "@type": "Event",
-    "name": event.name,
-    "description": event.description,
-    "startDate": event.start_date,
-    "endDate": event.end_date,
-    "location": {
-      "@type": "Place",
-      "name": event.location
-    },
-    "url": event.public_url,
-    "image": event.logo_url
-  } : null;
-
-  return (
-    <>
-      {/* Meta tags */}
-      <head>
-        <title>{event?.name || 'Event'}</title>
-        <meta name="description" content={event?.description} />
-        <meta property="og:title" content={event?.name} />
-        <meta property="og:description" content={event?.description} />
-        <meta property="og:image" content={event?.logo_url} />
-        <meta property="og:type" content="event" />
-        <meta name="twitter:card" content="summary_large_image" />
-        
-        {/* Structured data */}
-        {structuredData && (
-          <script
-            type="application/ld+json"
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(structuredData)
-            }}
-          />
-        )}
-      </head>
-
-      <main>
-        <h1>{event?.name}</h1>
-        <p>{event?.description}</p>
-        {/* Event content */}
-      </main>
-    </>
-  );
-}
-```
-
-### Performance Optimization
-
-#### Lazy Loading
-
-```tsx
-import { lazy, Suspense } from 'react';
-import { usePublicEvent } from '@jmruthers/pace-core';
-
-// Lazy load heavy components
-const EventSchedule = lazy(() => import('./EventSchedule'));
-const EventSpeakers = lazy(() => import('./EventSpeakers'));
-
-function OptimizedEventPage({ eventId }: { eventId: string }) {
-  const { event, loading } = usePublicEvent(eventId);
-
-  if (loading) return <div>Loading...</div>;
-  if (!event) return <div>Event not found</div>;
-
-  return (
-    <PublicPageLayout>
-      <header>
-        <h1>{event.name}</h1>
-        <p>{event.description}</p>
-      </header>
-      
-      <main>
-        {/* Critical content loads immediately */}
-        <section>
-          <h2>Event Details</h2>
-          <p>Date: {new Date(event.start_date).toLocaleDateString()}</p>
-          <p>Location: {event.location}</p>
-        </section>
-        
-        {/* Non-critical content loads lazily */}
-        <Suspense fallback={<div>Loading schedule...</div>}>
-          <EventSchedule eventId={eventId} />
-        </Suspense>
-        
-        <Suspense fallback={<div>Loading speakers...</div>}>
-          <EventSpeakers eventId={eventId} />
-        </Suspense>
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-#### Image Optimization
-
-```tsx
-import { EventLogo } from '@jmruthers/pace-core';
-
-function OptimizedEventLogo({ eventId }: { eventId: string }) {
-  return (
-    <EventLogo 
-      eventId={eventId}
-      size="large"
-      className="w-full h-auto max-w-md mx-auto"
-      // The component handles:
-      // - WebP format when supported
-      // - Responsive sizing
-      // - Lazy loading
-      // - Error fallbacks
-    />
-  );
-}
-```
-
-### Advanced Error Handling
-
-#### Graceful Degradation
-
-```tsx
-import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core';
-
-function RobustEventPage({ eventId }: { eventId: string }) {
-  const { 
-    event, 
-    loading: eventLoading, 
-    error: eventError 
-  } = usePublicEvent(eventId);
-  
-  const { 
-    logoUrl, 
-    loading: logoLoading, 
-    error: logoError 
-  } = usePublicEventLogo(eventId, 'large');
-
-  // Graceful degradation for missing data
-  const displayName = event?.name || 'Event';
-  const displayDescription = event?.description || 'Event details coming soon';
-  const displayLogo = logoUrl || '/default-event-logo.png';
-
-  if (eventLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-main-600 mx-auto"></div>
-          <p className="mt-4 text-sec-600">Loading event...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (eventError) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-sec-800 mb-2">
-            Unable to load event
-          </h1>
-          <p className="text-sec-600 mb-4">
-            {eventError.message}
-          </p>
-          <Button onClick={() => window.location.reload()}>
-            Try Again
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <PublicPageLayout>
-      <header className="bg-main-50 py-8">
-        <div className="container mx-auto px-4 text-center">
-          {logoLoading ? (
-            <div className="animate-pulse bg-sec-200 h-32 w-32 mx-auto rounded"></div>
-          ) : logoError ? (
-            <div className="bg-sec-200 text-sec-500 h-32 w-32 mx-auto rounded flex items-center justify-center">
-              No Logo
-            </div>
-          ) : (
-            <img 
-              src={displayLogo} 
-              alt={`${displayName} logo`}
-              className="h-32 w-32 mx-auto object-contain"
-            />
-          )}
-          
-          <h1 className="text-3xl font-bold text-main-900 mt-4">
-            {displayName}
-          </h1>
-          <p className="text-main-700 mt-2">
-            {displayDescription}
-          </p>
-        </div>
-      </header>
-      
-      <main className="container mx-auto px-4 py-8">
-        {/* Event content */}
-      </main>
-    </PublicPageLayout>
-  );
-}
-```
-
-### Advanced Troubleshooting
-
-#### Common Issues
-
-**Issue: Event not loading**
-- Check that event exists and is published
-- Verify `is_public` flag is set to true
-- Check RLS policies allow public access
-
-**Issue: Logo not displaying**
-- Verify logo file exists in storage bucket
-- Check storage bucket policies
-- Ensure logo URL is correct
-
-**Issue: Cache not working**
-- Check browser storage permissions
-- Verify cache configuration
-- Clear browser cache and test
-
-#### Debug Mode
-
-```tsx
-import { usePublicEvent, usePublicEventLogo } from '@jmruthers/pace-core';
-
-function DebugPublicPage({ eventId }: { eventId: string }) {
-  const { event, loading, error } = usePublicEvent(eventId);
-  const { logoUrl, loading: logoLoading, error: logoError } = usePublicEventLogo(eventId, 'large');
-
-  console.log('Event data:', { event, loading, error });
-  console.log('Logo data:', { logoUrl, logoLoading, logoError });
-
-  return (
-    <div>
-      <h1>Debug Information</h1>
-      <pre>{JSON.stringify({ event, loading, error }, null, 2)}</pre>
-      <pre>{JSON.stringify({ logoUrl, logoLoading, logoError }, null, 2)}</pre>
-    </div>
-  );
-}
-```
-
-## ♿ Accessibility
-
-Public pages components are designed with accessibility in mind:
-
-- **WCAG 2.1 AA compliant** - All components meet accessibility standards
-- **Semantic HTML** - Proper use of `<header>`, `<main>`, `<footer>` elements
-- **Screen reader friendly** - All interactive elements have proper ARIA labels
-- **Keyboard navigation** - Full keyboard support for all interactive elements
-- **High contrast support** - Colors meet WCAG contrast requirements
-- **Clear content hierarchy** - Proper heading structure and content organization
-
-### Accessibility Best Practices
-
-1. **Always provide alt text** for event logos and images
-2. **Use semantic HTML** - Prefer `<h1>`, `<h2>`, `<nav>`, etc. over generic `<div>` elements
-3. **Ensure keyboard navigation** - All interactive elements should be keyboard accessible
-4. **Test with screen readers** - Verify content is properly announced
-5. **Maintain focus management** - Ensure focus is properly managed during loading states
-
-## ⚠️ Edge Cases
-
-### Missing Event Data
-
-When event data is not available:
-- `PublicPageLayout` automatically shows an error message
-- Error message includes the event code for debugging
-- Provides a "Try Again" button to retry loading
-- Can be customized with `errorFallback` prop
-
-### Invalid Event Codes
-
-When an invalid event code is provided:
-- `usePublicRouteParams` validates event code format
-- Invalid codes trigger error states
-- Error messages are user-friendly
-- Validation errors can be hidden with `showValidationErrors={false}`
-
-### Network Failures
-
-When network requests fail:
-- All hooks provide error states
-- Error objects include descriptive messages
-- Retry mechanisms are available via `refetch` functions
-- Graceful degradation with fallback UI
-
-### Missing Logos
-
-When event logos are not available:
-- Components show fallback UI with event initials
-- No broken image icons
-- Consistent styling regardless of logo availability
-- Custom fallback can be provided via `customEventLogo` prop
-
-### Loading States
-
-During data loading:
-- Loading spinners are shown automatically
-- Custom loading messages can be provided
-- Loading fallback components can be customized
-- Prevents layout shifts during loading
-
----
+## Related Documentation
 
-**Remember**: Public pages are completely separate from your main app. Keep them isolated and they'll work perfectly!
+- [RBAC and RLS Standard](../../standards/07-rbac-and-rls-standard.md)
+- [Public Pages Examples](../../examples/PublicPages/)
+- [RLS Policy Remediation Plan](../troubleshooting/rls-policy-remediation-plan-combined.md)