Major: Unified Activity System with Multi-VIP Support & Enhanced Search/Filtering

## Overview
Complete architectural overhaul merging dual event systems into a unified activity model
with multi-VIP support, enhanced search capabilities, and improved UX throughout.

## Database & Schema Changes

### Unified Activity Model (Breaking Change)
- Merged Event/EventTemplate/EventAttendance into single ScheduleEvent model
- Dropped duplicate tables: Event, EventAttendance, EventTemplate
- Single source of truth for all activities (transport, meals, meetings, events)
- Migration: 20260131180000_drop_duplicate_event_tables

### Multi-VIP Support (Breaking Change)
- Changed schema from single vipId to vipIds array (String[])
- Enables multiple VIPs per activity (ridesharing, group events)
- Migration: 20260131122613_multi_vip_support
- Updated all backend services to handle multi-VIP queries

### Seed Data Updates
- Rebuilt seed.ts with unified activity model
- Added multi-VIP rideshare examples (3 VIPs in SUV, 4 VIPs in van)
- Includes mix of transport + non-transport activities
- Balanced VIP test data (50% OFFICE_OF_DEVELOPMENT, 50% ADMIN)

## Backend Changes

### Services Cleanup
- Removed deprecated common-events endpoints
- Updated EventsService for multi-VIP support
- Enhanced VipsService with multi-VIP activity queries
- Updated DriversService, VehiclesService for unified model
- Added add-vips-to-event.dto for bulk VIP assignment

### Abilities & Permissions
- Updated ability.factory.ts: Event → ScheduleEvent subject
- Enhanced guards for unified activity permissions
- Maintained RBAC (Administrator, Coordinator, Driver roles)

### DTOs
- Updated create-event.dto: vipId → vipIds array
- Updated update-event.dto: vipId → vipIds array
- Added add-vips-to-event.dto for bulk operations
- Removed obsolete event-template DTOs

## Frontend Changes

### UI/UX Improvements

**Renamed "Schedule" → "Activities" Throughout**
- More intuitive terminology for coordinators
- Updated navigation, page titles, buttons
- Changed "Schedule Events" to "Activities" in Admin Tools

**Activities Page Enhancements**
- Added comprehensive search bar (searches: title, location, description, VIP names, driver, vehicle)
- Added sortable columns: Title, Type, VIPs, Start Time, Status
- Visual sort indicators (↑↓ arrows)
- Real-time result count when searching
- Empty state with helpful messaging

**Admin Tools Updates**
- Balanced VIP test data: 10 OFFICE_OF_DEVELOPMENT + 10 ADMIN
- More BSA-relevant organizations (Coca-Cola, AT&T, Walmart vs generic orgs)
- BSA leadership titles (National President, Chief Scout Executive, Regional Directors)
- Relabeled "Schedule Events" → "Activities"

### Component Updates

**EventList.tsx (Activities Page)**
- Added search state management with real-time filtering
- Implemented multi-field sorting with direction toggle
- Enhanced empty states for search + no data scenarios
- Filter tabs + search work together seamlessly

**VIPSchedule.tsx**
- Updated for multi-VIP schema (vipIds array)
- Shows complete itinerary timeline per VIP
- Displays all activities for selected VIP
- Groups by day with formatted dates

**EventForm.tsx**
- Updated to handle vipIds array instead of single vipId
- Multi-select VIP assignment
- Maintains backward compatibility

**AdminTools.tsx**
- New balanced VIP test data (10/10 split)
- BSA-context organizations
- Updated button labels ("Add Test Activities")

### Routing & Navigation
- Removed /common-events routes
- Updated navigation menu labels
- Maintained protected route structure
- Cleaner URL structure

## New Features

### Multi-VIP Activity Support
- Activities can have multiple VIPs (ridesharing, group events)
- Efficient seat utilization tracking (3/6 seats, 4/12 seats)
- Better coordination for shared transport

### Advanced Search & Filtering
- Full-text search across multiple fields
- Instant filtering as you type
- Search + type filters work together
- Clear visual feedback (result counts)

### Sortable Data Tables
- Click column headers to sort
- Toggle ascending/descending
- Visual indicators for active sort
- Sorts persist with search/filter

### Enhanced Admin Tools
- One-click test data generation
- Realistic BSA Jamboree scenario data
- Balanced department representation
- Complete 3-day itineraries per VIP

## Testing & Validation

### Playwright E2E Tests
- Added e2e/ directory structure
- playwright.config.ts configured
- PLAYWRIGHT_GUIDE.md documentation
- Ready for comprehensive E2E testing

### Manual Testing Performed
- Multi-VIP activity creation ✓
- Search across all fields ✓
- Column sorting (all fields) ✓
- Filter tabs + search combination ✓
- Admin Tools data generation ✓
- Database migrations ✓

## Breaking Changes & Migration

**Database Schema Changes**
1. Run migrations: `npx prisma migrate deploy`
2. Reseed database: `npx prisma db seed`
3. Existing data incompatible (dev environment - safe to nuke)

**API Changes**
- POST /events now requires vipIds array (not vipId string)
- GET /events returns vipIds array
- GET /vips/:id/schedule updated for multi-VIP
- Removed /common-events/* endpoints

**Frontend Type Changes**
- ScheduleEvent.vipIds: string[] (was vipId: string)
- EventFormData updated accordingly
- All pages handle array-based VIP assignment

## File Changes Summary

**Added:**
- backend/prisma/migrations/20260131180000_drop_duplicate_event_tables/
- backend/src/events/dto/add-vips-to-event.dto.ts
- frontend/src/components/InlineDriverSelector.tsx
- frontend/e2e/ (Playwright test structure)
- Documentation: NAVIGATION_UX_IMPROVEMENTS.md, PLAYWRIGHT_GUIDE.md

**Modified:**
- 30+ backend files (schema, services, DTOs, abilities)
- 20+ frontend files (pages, components, types)
- Admin tools, seed data, navigation

**Removed:**
- Event/EventAttendance/EventTemplate database tables
- Common events frontend pages
- Obsolete event template DTOs

## Next Steps

**Pending (Phase 3):**
- Activity Templates for bulk event creation
- Operations Dashboard (today's activities + conflicts)
- Complete workflow testing with real users
- Additional E2E test coverage

## Notes
- Development environment - no production data affected
- Database can be reset anytime: `npx prisma migrate reset`
- All servers tested and running successfully
- HMR working correctly for frontend changes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/e2e/auth-flow.spec.ts

@@ -0,0 +1,238 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Authentication Flow', () => {
+  let consoleMessages: string[] = [];
+  let consoleErrors: string[] = [];
+  let failedRequests: string[] = [];
+
+  test.beforeEach(async ({ page }) => {
+    test.setTimeout(120000);
+
+    // Capture all console messages
+    page.on('console', msg => {
+      const text = `[${msg.type()}] ${msg.text()}`;
+      consoleMessages.push(text);
+
+      if (msg.type() === 'error' || msg.type() === 'warning') {
+        consoleErrors.push(text);
+      }
+    });
+
+    // Capture page errors
+    page.on('pageerror', error => {
+      const text = `[PAGE ERROR] ${error.message}\n${error.stack}`;
+      consoleErrors.push(text);
+    });
+
+    // Capture failed network requests
+    page.on('response', response => {
+      if (response.status() >= 400) {
+        const text = `[${response.status()}] ${response.request().method()} ${response.url()}`;
+        failedRequests.push(text);
+        consoleErrors.push(text);
+      }
+    });
+  });
+
+  test.afterEach(async () => {
+    // Print all console output for debugging
+    if (consoleMessages.length > 0) {
+      console.log('\n=== CONSOLE OUTPUT ===');
+      consoleMessages.forEach(msg => console.log(msg));
+    }
+
+    if (failedRequests.length > 0) {
+      console.log('\n=== FAILED HTTP REQUESTS ===');
+      failedRequests.forEach(req => console.log(req));
+    }
+
+    if (consoleErrors.length > 0) {
+      console.log('\n=== CONSOLE ERRORS/WARNINGS ===');
+      consoleErrors.forEach(err => console.log(err));
+    }
+
+    // Reset for next test
+    consoleMessages = [];
+    consoleErrors = [];
+    failedRequests = [];
+  });
+
+  test('should navigate from root URL to login and authenticate', async ({ page }) => {
+    console.log('\n🔍 Starting from root URL: http://localhost:5173/');
+
+    // Go to root URL (not /login)
+    await page.goto('http://localhost:5173/', { waitUntil: 'networkidle' });
+
+    // Take screenshot of initial page
+    await page.screenshot({ path: 'test-results/auth-flow-01-initial.png', fullPage: true });
+
+    // Wait a moment to see what happens
+    await page.waitForTimeout(2000);
+
+    console.log('📸 Current URL:', page.url());
+    console.log('📄 Page title:', await page.title());
+
+    // Check if we're redirected to login
+    const currentUrl = page.url();
+    if (currentUrl.includes('/login')) {
+      console.log('✅ Automatically redirected to /login');
+    } else if (currentUrl.includes('auth0')) {
+      console.log('✅ Redirected to Auth0 login');
+    } else {
+      console.log('❌ NOT redirected to login. Current URL:', currentUrl);
+
+      // Check what's visible on the page
+      const bodyText = await page.locator('body').textContent();
+      console.log('📝 Page content:', bodyText?.substring(0, 200));
+
+      // Take another screenshot
+      await page.screenshot({ path: 'test-results/auth-flow-02-stuck.png', fullPage: true });
+
+      // Look for specific elements
+      const loadingText = await page.locator('text=Loading').count();
+      if (loadingText > 0) {
+        console.log('⚠️ Found "Loading" text - stuck in loading state');
+      }
+
+      const loginButton = await page.locator('button:has-text("Sign in")').count();
+      if (loginButton > 0) {
+        console.log('✅ Found login button on page');
+      }
+    }
+
+    // Now explicitly navigate to login if not already there
+    if (!currentUrl.includes('/login') && !currentUrl.includes('auth0')) {
+      console.log('🔄 Manually navigating to /login');
+      await page.goto('http://localhost:5173/login');
+      await page.waitForLoadState('networkidle');
+      await page.screenshot({ path: 'test-results/auth-flow-03-login-page.png', fullPage: true });
+    }
+
+    // Click Auth0 login button
+    console.log('🔑 Looking for Auth0 login button');
+    const auth0Button = page.locator('button:has-text("Sign in with Auth0")');
+    await expect(auth0Button).toBeVisible({ timeout: 10000 });
+
+    await page.screenshot({ path: 'test-results/auth-flow-04-before-click.png', fullPage: true });
+    await auth0Button.click();
+
+    console.log('⏳ Waiting for Auth0 page to load');
+    await page.waitForTimeout(2000);
+    await page.screenshot({ path: 'test-results/auth-flow-05-auth0-page.png', fullPage: true });
+
+    // Fill in Auth0 credentials
+    console.log('📝 Filling in credentials');
+    await page.locator('input[name="username"]').fill('test@test.com');
+    await page.locator('input[name="password"]').fill('P@ssw0rd!');
+
+    await page.screenshot({ path: 'test-results/auth-flow-06-credentials-filled.png', fullPage: true });
+
+    // Submit login (use the primary Continue button, not Google)
+    console.log('✉️ Submitting login form');
+    await page.locator('button[type="submit"][data-action-button-primary="true"]').click();
+
+    // Wait for redirect back to app
+    console.log('⏳ Waiting for redirect to dashboard');
+    await page.waitForURL('**/dashboard', { timeout: 30000 });
+
+    await page.screenshot({ path: 'test-results/auth-flow-07-dashboard.png', fullPage: true });
+
+    // Verify we're on the dashboard
+    console.log('✅ Checking dashboard loaded');
+    await expect(page.locator('h1:has-text("Dashboard")')).toBeVisible({ timeout: 10000 });
+
+    console.log('🎉 Authentication flow completed successfully!');
+
+    // Verify user profile loaded
+    const userEmail = await page.locator('text=test@test.com').count();
+    if (userEmail > 0) {
+      console.log('✅ User email visible on page');
+    }
+
+    // Final screenshot
+    await page.screenshot({ path: 'test-results/auth-flow-08-final.png', fullPage: true });
+  });
+
+  test('should show console errors when accessing root URL', async ({ page }) => {
+    console.log('\n🔍 Testing root URL for console errors');
+
+    // Go to root URL
+    await page.goto('http://localhost:5173/', { waitUntil: 'domcontentloaded' });
+
+    // Wait to capture console output
+    await page.waitForTimeout(5000);
+
+    // Take screenshot
+    await page.screenshot({ path: 'test-results/auth-console-errors.png', fullPage: true });
+
+    console.log(`\n📊 Captured ${consoleMessages.length} console messages`);
+    console.log(`📊 Captured ${consoleErrors.length} console errors/warnings`);
+
+    // The afterEach hook will print all console output
+  });
+
+  test('should detect "Loading user profile" stuck state', async ({ page, context }) => {
+    console.log('\n🔍 Testing for stuck "Loading user profile..." state');
+
+    // First, login normally to get Auth0 state
+    await page.goto('http://localhost:5173/login');
+    await page.locator('button:has-text("Sign in with Auth0")').click();
+    await page.waitForTimeout(2000);
+
+    await page.locator('input[name="username"]').fill('test@test.com');
+    await page.locator('input[name="password"]').fill('P@ssw0rd!');
+    await page.locator('button[type="submit"][data-action-button-primary="true"]').click();
+
+    // Wait for successful login
+    await page.waitForURL('**/dashboard', { timeout: 30000 });
+    console.log('✅ Successfully logged in');
+
+    // Now close and reopen to simulate browser refresh
+    await page.close();
+    const newPage = await context.newPage();
+
+    // Set up console capture on new page
+    newPage.on('console', msg => {
+      const text = `[${msg.type()}] ${msg.text()}`;
+      consoleMessages.push(text);
+      if (msg.type() === 'error' || msg.type() === 'warning') {
+        consoleErrors.push(text);
+      }
+    });
+
+    newPage.on('pageerror', error => {
+      const text = `[PAGE ERROR] ${error.message}\n${error.stack}`;
+      consoleErrors.push(text);
+    });
+
+    console.log('🔄 Reopening app (simulating browser refresh)');
+    await newPage.goto('http://localhost:5173/', { waitUntil: 'domcontentloaded' });
+
+    // Check if stuck on loading
+    await newPage.waitForTimeout(3000);
+
+    const loadingVisible = await newPage.locator('text=Loading user profile').isVisible().catch(() => false);
+    if (loadingVisible) {
+      console.log('⚠️ STUCK on "Loading user profile..." screen!');
+      await newPage.screenshot({ path: 'test-results/auth-stuck-loading.png', fullPage: true });
+
+      // Wait longer to see if it resolves
+      await newPage.waitForTimeout(5000);
+
+      const stillLoading = await newPage.locator('text=Loading user profile').isVisible().catch(() => false);
+      if (stillLoading) {
+        console.log('❌ Still stuck after 8 seconds total');
+      } else {
+        console.log('✅ Eventually loaded successfully');
+      }
+    } else {
+      console.log('✅ No loading state detected - app loaded successfully');
+      const dashboardVisible = await newPage.locator('h1:has-text("Dashboard")').isVisible().catch(() => false);
+      if (dashboardVisible) {
+        console.log('✅ Dashboard is visible');
+      }
+    }
+
+    await newPage.screenshot({ path: 'test-results/auth-after-refresh.png', fullPage: true });
+  });
+});