@jmruthers/pace-core 0.5.76 → 0.5.78

package/docs/getting-started/examples/README.md

@@ -1,51 +1,887 @@
+---
+lastUpdated: 2025-10-29T22:43:00+11:00
+version: 0.5.76
+reviewedBy: content-audit
+---
+
 # Examples & Starter Projects
 
-Complete working examples to help you get started with PACE Core.
+> **🚀 Complete Working Examples** | [← Back to Documentation](../README.md) | [Installation Guide](./installation-guide.md)
 
-## 🚀 Quick Examples
+Complete working examples to help you get started with PACE Core, from basic authentication to full-featured applications.
 
-### Basic Authentication App
-A minimal application showing just authentication and basic UI components.
+## Overview
 
-**Features:**
-- User login/logout
-- Basic dashboard
-- Simple navigation
-- Responsive design
+This guide provides comprehensive examples demonstrating all PACE Core features:
 
-**Perfect for:** Learning the basics, simple apps, prototypes
+- **Basic Authentication App** - Minimal setup with login/logout
+- **Full-Featured Application** - Complete meal management app with all features
+- **Component Examples** - Individual component usage patterns
+- **Starter Projects** - Downloadable templates for different frameworks
+
+## 🚀 Quick Examples
 
-[View Example →](./basic-auth-app.md) | [Live Demo](https://codesandbox.io/s/pace-core-basic-auth) | [GitHub](https://github.com/jmruthers/pace-core/tree/main/examples/basic-auth)
+### Basic Authentication App
 
-### NavigationMenu Authentication Fix
-A detailed example showing how to fix NavigationMenu authentication context issues.
+A minimal application showing just authentication and basic UI components.
 
 **Features:**
-- Proper authentication context integration
-- Permission-based navigation filtering
-- Role-based navigation items
-- Audit logging for navigation access
-- Complete working example with bug fixes
+- User login/logout with Supabase
+- Basic dashboard with user info
+- Simple navigation with permission-based filtering
+- Responsive design with Tailwind CSS
+- Permission-based content display
 
-**Perfect for:** Fixing NavigationMenu issues, understanding authentication integration
+**Perfect for:** Learning the basics, simple apps, prototypes
 
-[View Example →](./navigation-menu-auth-fix.md) | [GitHub](https://github.com/jmruthers/pace-core/tree/main/examples/navigation-menu-auth-fix)
+#### Project Setup
+
+```bash
+# Create new React app
+npx create-react-app basic-auth-app --template typescript
+cd basic-auth-app
+
+# Install PACE Core
+npm install @jmruthers/pace-core
+
+# Install additional dependencies
+npm install @supabase/supabase-js react-router-dom
+```
+
+#### Environment Configuration
+
+Create `.env.local`:
+```env
+VITE_SUPABASE_URL=your_supabase_url
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+VITE_APP_NAME=Basic Auth App
+```
+
+#### Supabase Setup
+
+Create a new Supabase project and set up the database:
+
+```sql
+-- Create users table
+CREATE TABLE users (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT UNIQUE NOT NULL,
+  name TEXT,
+  role TEXT DEFAULT 'user',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+
+-- Create policy
+CREATE POLICY "Users can view their own data" ON users
+  FOR SELECT USING (auth.uid() = id);
+```
+
+#### App Structure
+
+```
+src/
+├── components/
+│   ├── Dashboard.tsx
+│   ├── LoginForm.tsx
+│   └── Navigation.tsx
+├── hooks/
+│   └── useSupabase.ts
+├── types/
+│   └── index.ts
+├── App.tsx
+├── main.tsx
+└── index.css
+```
+
+#### Supabase Client Setup
+
+`src/hooks/useSupabase.ts`:
+```tsx
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+```
+
+#### Types Definition
+
+`src/types/index.ts`:
+```tsx
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: 'admin' | 'user';
+}
+
+export interface AuthState {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+}
+```
+
+#### Main App Component
+
+`src/App.tsx`:
+```tsx
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { UnifiedAuthProvider } from '@jmruthers/pace-core';
+import { supabase } from './hooks/useSupabase';
+import LoginForm from './components/LoginForm';
+import Dashboard from './components/Dashboard';
+import '@jmruthers/pace-core/src/styles/core.css';
+
+function App() {
+  return (
+    <UnifiedAuthProvider 
+      supabaseClient={supabase} 
+      appName="Basic Auth App"
+      idleTimeoutMs={30 * 60 * 1000}
+      warnBeforeMs={5 * 60 * 1000}
+      onIdleLogout={() => window.location.href = '/login'}
+    >
+      <Router>
+        <div className="min-h-screen bg-sec-50">
+          <Routes>
+            <Route path="/login" element={<LoginForm />} />
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+          </Routes>
+        </div>
+      </Router>
+    </UnifiedAuthProvider>
+  );
+}
+
+export default App;
+```
+
+#### Login Form Component
+
+`src/components/LoginForm.tsx`:
+```tsx
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Card, Input, Alert } from '@jmruthers/pace-core';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+
+const LoginForm: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+  const { signIn } = useUnifiedAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await signIn({ email, password });
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-sec-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-sec-900">
+            Sign in to your account
+          </h2>
+        </div>
+        
+        <Card className="mt-8 space-y-6 p-8">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {error && (
+              <Alert variant="destructive">
+                {error}
+              </Alert>
+            )}
+            
+            <div>
+              <Input
+                label="Email address"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="Enter your email"
+              />
+            </div>
+            
+            <div>
+              <Input
+                label="Password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                placeholder="Enter your password"
+              />
+            </div>
+            
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading}
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;
+```
+
+#### Dashboard Component
+
+`src/components/Dashboard.tsx`:
+```tsx
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Card, 
+  Button, 
+  Alert,
+  PaceAppLayout,
+  Header,
+  UserMenu
+} from '@jmruthers/pace-core';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+
+const Dashboard: React.FC = () => {
+  const { user, signOut, loading } = useUnifiedAuth();
+  const navigate = useNavigate();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-main-600 mx-auto"></div>
+          <p className="mt-4 text-sec-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    navigate('/login');
+    return null;
+  }
+
+  const handleLogout = async () => {
+    await signOut();
+    navigate('/login');
+  };
+
+  const navigationItems = [
+    { label: 'Dashboard', href: '/dashboard', icon: 'Home' },
+    { label: 'Profile', href: '/profile', icon: 'User' },
+    { label: 'Settings', href: '/settings', icon: 'Settings' }
+  ];
+
+  return (
+    <PaceAppLayout
+      title="Basic Auth App"
+      user={user}
+      onLogout={handleLogout}
+      navigation={navigationItems}
+    >
+      <div className="p-6">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold text-sec-900">Welcome, {user.name || user.email}!</h1>
+          <p className="text-sec-600">This is your basic dashboard.</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-semibold text-sec-900 mb-2">User Info</h3>
+              <p className="text-sec-600 mb-4">Your account details</p>
+              <div className="space-y-2">
+                <p><strong>Email:</strong> {user.email}</p>
+                <p><strong>Role:</strong> {user.role}</p>
+                <p><strong>ID:</strong> {user.id}</p>
+              </div>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-semibold text-sec-900 mb-2">Quick Actions</h3>
+              <p className="text-sec-600 mb-4">Common tasks</p>
+              <div className="space-y-2">
+                <Button variant="outline" className="w-full justify-start">
+                  Edit Profile
+                </Button>
+                <Button variant="outline" className="w-full justify-start">
+                  Change Password
+                </Button>
+                <Button variant="outline" className="w-full justify-start">
+                  View Settings
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-semibold text-sec-900 mb-2">System Status</h3>
+              <p className="text-sec-600 mb-4">Application health</p>
+              <Alert>
+                <div className="flex items-center">
+                  <div className="w-2 h-2 bg-main-500 rounded-full mr-2"></div>
+                  All systems operational
+                </div>
+              </Alert>
+            </div>
+          </Card>
+        </div>
+
+        <div className="mt-8">
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-semibold text-sec-900 mb-4">Recent Activity</h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between py-2 border-b border-sec-200">
+                  <span className="text-sec-600">Logged in successfully</span>
+                  <span className="text-sm text-sec-500">Just now</span>
+                </div>
+                <div className="flex items-center justify-between py-2 border-b border-sec-200">
+                  <span className="text-sec-600">Account created</span>
+                  <span className="text-sm text-sec-500">2 days ago</span>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </PaceAppLayout>
+  );
+};
+
+export default Dashboard;
+```
+
+#### Navigation Component
+
+`src/components/Navigation.tsx`:
+```tsx
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { NavigationMenu } from '@jmruthers/pace-core';
+
+const Navigation: React.FC = () => {
+  const location = useLocation();
+
+  const navigationItems = [
+    { label: 'Dashboard', href: '/dashboard', icon: 'Home' },
+    { label: 'Profile', href: '/profile', icon: 'User' },
+    { label: 'Settings', href: '/settings', icon: 'Settings' }
+  ];
+
+  return (
+    <NavigationMenu
+      items={navigationItems}
+      currentPath={location.pathname}
+      onNavigate={(href) => {
+        // Navigation is handled by React Router
+        window.location.href = href;
+      }}
+    />
+  );
+};
+
+export default Navigation;
+```
+
+#### Vite Configuration
+
+`vite.config.ts`:
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss({
+      content: [
+        './src/**/*.{js,ts,jsx,tsx}',
+        './node_modules/@jmruthers/pace-core/**/*.{js,ts,jsx,tsx}'
+      ]
+    })
+  ],
+  server: {
+    port: 3000,
+    open: true
+  }
+});
+```
+
+#### Package.json Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  }
+}
+```
+
+#### Running the App
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+#### Features Demonstrated
+
+**Authentication:**
+- ✅ User login with email/password
+- ✅ Session management
+- ✅ Automatic redirects
+- ✅ Loading states
+- ✅ Error handling
+
+**UI Components:**
+- ✅ Card layouts
+- ✅ Form inputs
+- ✅ Buttons with variants
+- ✅ Alerts and notifications
+- ✅ Responsive design
+
+**Layout:**
+- ✅ App layout with header
+- ✅ Navigation menu
+- ✅ User menu
+- ✅ Responsive sidebar
+
+**State Management:**
+- ✅ Authentication state
+- ✅ User data
+- ✅ Loading states
+- ✅ Error states
 
 ### Full-Featured Application
-A complete meal management app demonstrating all PACE Core features.
+
+A complete meal management application demonstrating all PACE Core features including authentication, RBAC, data tables, forms, and permission enforcement.
 
 **Features:**
-- Full authentication flow
-- Role-based access control
-- Data tables with CRUD operations
-- Form validation
-- Permission enforcement
-- Event management
+- Complete authentication flow with RBAC
 - Multi-tenant organisation support
-
-**Perfect for:** Production applications, learning advanced features, reference implementation
-
-[View Example →](./full-featured-app.md)
+- Event management and selection
+- Advanced DataTable with CRUD operations
+- Form validation and error handling
+- Permission enforcement at page and component level
+- Responsive layout with navigation
+- Production-ready patterns
+
+#### Project Structure
+
+```
+src/
+├── App.tsx                    # Main app with all providers
+├── lib/
+│   └── supabase.ts           # Supabase client
+├── components/
+│   ├── auth/
+│   │   ├── LoginPage.tsx     # Login form
+│   │   └── ProtectedRoute.tsx # Route protection
+│   ├── layout/
+│   │   ├── AppLayout.tsx     # Main layout
+│   │   └── Navigation.tsx    # Navigation menu
+│   ├── dashboard/
+│   │   └── DashboardPage.tsx # Dashboard with metrics
+│   ├── meals/
+│   │   ├── MealsPage.tsx     # Meals list with DataTable
+│   │   ├── MealForm.tsx      # Add/edit meal form
+│   │   └── MealModal.tsx     # Modal for meal operations
+│   ├── users/
+│   │   ├── UsersPage.tsx     # User management
+│   │   └── UserForm.tsx      # User creation/editing
+│   └── shared/
+│       ├── LoadingSpinner.tsx # Loading states
+│       └── ErrorBoundary.tsx  # Error handling
+├── hooks/
+│   ├── useMeals.ts           # Meals data management
+│   └── useUsers.ts           # Users data management
+├── types/
+│   ├── meal.ts               # Meal type definitions
+│   └── user.ts               # User type definitions
+└── utils/
+    ├── permissions.ts         # Permission checking
+    └── validation.ts          # Form validation schemas
+```
+
+#### App.tsx - Complete Application Setup
+
+```tsx
+import { 
+  UnifiedAuthProvider, 
+  OrganisationProvider,
+  EventProvider,
+  ErrorBoundary 
+} from '@jmruthers/pace-core';
+import { BrowserRouter } from 'react-router-dom';
+import { supabase } from './lib/supabase';
+import { AppRoutes } from './components/AppRoutes';
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <UnifiedAuthProvider 
+        supabaseClient={supabase} 
+        appName="meal-manager"
+        enableRBAC={true}
+        requireOrganisationContext={true}
+        idleTimeoutMs={30 * 60 * 1000}
+        warnBeforeMs={5 * 60 * 1000}
+        onIdleLogout={() => window.location.href = '/login'}
+      >
+        <OrganisationProvider>
+          <EventProvider>
+            <BrowserRouter>
+              <AppRoutes />
+            </BrowserRouter>
+          </EventProvider>
+        </OrganisationProvider>
+      </UnifiedAuthProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;
+```
+
+#### AppRoutes.tsx - Route Configuration
+
+```tsx
+import { Routes, Route } from 'react-router-dom';
+import { LoginPage } from './components/auth/LoginPage';
+import { ProtectedRoute } from './components/auth/ProtectedRoute';
+import { AppLayout } from './components/layout/AppLayout';
+import { DashboardPage } from './components/dashboard/DashboardPage';
+import { MealsPage } from './components/meals/MealsPage';
+import { UsersPage } from './components/users/UsersPage';
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/" element={
+        <ProtectedRoute>
+          <AppLayout>
+            <DashboardPage />
+          </AppLayout>
+        </ProtectedRoute>
+      } />
+      <Route path="/meals" element={
+        <ProtectedRoute>
+          <AppLayout>
+            <MealsPage />
+          </AppLayout>
+        </ProtectedRoute>
+      } />
+      <Route path="/users" element={
+        <ProtectedRoute>
+          <AppLayout>
+            <UsersPage />
+          </AppLayout>
+        </ProtectedRoute>
+      } />
+    </Routes>
+  );
+}
+```
+
+#### MealsPage.tsx - Advanced DataTable Implementation
+
+```tsx
+import { DataTable, type DataTableColumn } from '@jmruthers/pace-core';
+import { useState } from 'react';
+import { useMeals } from '../../hooks/useMeals';
+
+interface Meal {
+  id: string;
+  name: string;
+  category: string;
+  calories: number;
+  date: string;
+  description?: string;
+}
+
+const columns: DataTableColumn<Meal>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Meal Name',
+    sortable: true,
+    features: { search: true },
+  },
+  {
+    accessorKey: 'category',
+    header: 'Category',
+    sortable: true,
+    enableGrouping: true,
+  },
+  {
+    accessorKey: 'calories',
+    header: 'Calories',
+    sortable: true,
+    cell: ({ row }) => (
+      <span className="font-mono">
+        {row.original.calories.toLocaleString()}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    sortable: true,
+    cell: ({ row }) => (
+      <span>
+        {new Date(row.original.date).toLocaleDateString()}
+      </span>
+    ),
+  },
+];
+
+export function MealsPage() {
+  const { meals, loading, error, addMeal, updateMeal, deleteMeal } = useMeals();
+
+  const handleAddMeal = () => {
+    // Open add meal modal
+    console.log('Add meal');
+  };
+
+  const handleEditMeal = (meal: Meal) => {
+    // Open edit meal modal
+    console.log('Edit meal:', meal);
+  };
+
+  const handleDeleteMeal = async (meal: Meal) => {
+    if (confirm(`Delete ${meal.name}?`)) {
+      await deleteMeal(meal.id);
+    }
+  };
+
+  if (loading) return <div>Loading meals...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-sec-900">Meals</h1>
+        <p className="text-sec-600">Manage your meal planning and tracking</p>
+      </div>
+      
+      <DataTable
+        data={meals}
+        columns={columns}
+        rbac={{
+          resource: 'meals',
+          pageId: 'meals-management'
+        }}
+        title="Meals"
+        description="Track and manage your meals"
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          columnVisibility: true,
+          rowActions: true,
+          creation: true,
+          editing: true,
+          deletion: true,
+          export: true,
+          import: true,
+        }}
+        onRowClick={(row) => console.log('Row clicked:', row)}
+        onAddRow={handleAddMeal}
+        onEditRow={handleEditMeal}
+        onDeleteRow={handleDeleteMeal}
+        onExport={() => console.log('Export meals')}
+        onImport={() => console.log('Import meals')}
+        getRowId={(row) => row.id}
+      />
+    </div>
+  );
+}
+```
+
+#### DashboardPage.tsx - Metrics and Overview
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent } from '@jmruthers/pace-core';
+import { useMeals } from '../../hooks/useMeals';
+import { useUsers } from '../../hooks/useUsers';
+
+export function DashboardPage() {
+  const { meals } = useMeals();
+  const { users } = useUsers();
+
+  const totalMeals = meals.length;
+  const totalCalories = meals.reduce((sum, meal) => sum + meal.calories, 0);
+  const averageCalories = totalMeals > 0 ? Math.round(totalCalories / totalMeals) : 0;
+  const totalUsers = users.length;
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-sec-900">Dashboard</h1>
+        <p className="text-sec-600">Overview of your meal management system</p>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <Card>
+          <CardHeader>
+            <CardTitle>Total Meals</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-3xl font-bold text-main-600">{totalMeals}</p>
+            <p className="text-sm text-sec-600">All time</p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Total Calories</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-3xl font-bold text-main-600">{totalCalories.toLocaleString()}</p>
+            <p className="text-sm text-sec-600">All time</p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Average Calories</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-3xl font-bold text-main-600">{averageCalories}</p>
+            <p className="text-sm text-sec-600">Per meal</p>
+          </CardContent>
+        </Card>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Total Users</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-3xl font-bold text-main-600">{totalUsers}</p>
+            <p className="text-sm text-sec-600">Registered</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Meals</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {meals.slice(0, 5).map((meal) => (
+                <div key={meal.id} className="flex justify-between items-center py-2 border-b border-sec-200">
+                  <div>
+                    <p className="font-medium">{meal.name}</p>
+                    <p className="text-sm text-sec-600">{meal.category}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-mono">{meal.calories}</p>
+                    <p className="text-sm text-sec-600">{new Date(meal.date).toLocaleDateString()}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Meal Categories</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {Object.entries(
+                meals.reduce((acc, meal) => {
+                  acc[meal.category] = (acc[meal.category] || 0) + 1;
+                  return acc;
+                }, {} as Record<string, number>)
+              ).map(([category, count]) => (
+                <div key={category} className="flex justify-between items-center py-2 border-b border-sec-200">
+                  <span className="font-medium">{category}</span>
+                  <span className="text-main-600 font-semibold">{count}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+```
+
+#### Features Demonstrated
+
+**Authentication & RBAC:**
+- ✅ Complete authentication flow
+- ✅ Role-based access control
+- ✅ Permission enforcement
+- ✅ Multi-tenant organisation support
+- ✅ Event management
+
+**Data Management:**
+- ✅ Advanced DataTable with all features
+- ✅ CRUD operations
+- ✅ Sorting, filtering, pagination
+- ✅ Search functionality
+- ✅ Export/import capabilities
+
+**UI Components:**
+- ✅ Complete component library usage
+- ✅ Responsive design
+- ✅ Form validation
+- ✅ Error handling
+- ✅ Loading states
+
+**Production Patterns:**
+- ✅ Error boundaries
+- ✅ Custom hooks
+- ✅ Type safety
+- ✅ Performance optimization
+- ✅ Accessibility
 
 ## 📁 Code Samples
 
@@ -70,10 +906,10 @@ See individual components in action:
 ## 🎯 Choose Your Path
 
 ### I'm New to PACE Core
-Start with the [Basic Authentication App](./basic-auth-app.md) to learn the fundamentals.
+Start with the [Basic Authentication App](#basic-authentication-app) to learn the fundamentals.
 
 ### I Want to Build Something Real
-Use the [Full-Featured Application](./full-featured-app.md) as your foundation.
+Use the [Full-Featured Application](#full-featured-application) as your foundation.
 
 ### I Need Specific Examples
 Browse the [API Reference](../api-reference/) for component-specific examples.
@@ -92,8 +928,8 @@ All examples are designed to be easily customizable:
 
 ## 📚 Learning Path
 
-1. **Start Here** → [Installation](../installation.md)
-2. **Quick Start** → [Build Your First App](../quick-start.md)
+1. **Start Here** → [Installation Guide](./installation-guide.md)
+2. **Quick Start** → [Authentication Guide](../implementation-guides/authentication.md)
 3. **Examples** → Choose an example above
 4. **Core Concepts** → [Understand the Fundamentals](../core-concepts/)
 5. **Implementation** → [Advanced Patterns](../implementation-guides/)
@@ -104,3 +940,10 @@ All examples are designed to be easily customizable:
 - **Stuck on an example?** Check [Common Issues](../troubleshooting/common-issues.md)
 - **Want to contribute?** Add your own examples to our community section
 - **Have questions?** Review our [Troubleshooting](../troubleshooting/) guides
+
+## Related Documentation
+
+- [Authentication Implementation Guide](../implementation-guides/authentication.md) - Complete authentication setup
+- [Data Tables Guide](../implementation-guides/data-tables.md) - Advanced data management
+- [API Reference](../api-reference/) - Complete component documentation
+- [Best Practices](../best-practices/) - Production guidelines