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/user-workflow.spec.ts

@@ -0,0 +1,358 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * User Workflow Test
+ *
+ * Tests complete user workflow:
+ * 1. Login with Auth0
+ * 2. Refresh browser
+ * 3. Create a VIP entry
+ * 4. Save it
+ * 5. Refresh browser
+ */
+
+test.describe('User Workflow', () => {
+  test('login, refresh, create VIP, save, refresh', async ({ page }) => {
+    // Increase timeout to 5 minutes for manual login + workflow
+    test.setTimeout(300000);
+    // ========================================
+    // SETUP: Comprehensive logging
+    // ========================================
+    const logs: string[] = [];
+    const errors: string[] = [];
+    const networkErrors: any[] = [];
+
+    page.on('console', (msg) => {
+      const text = `[BROWSER ${msg.type()}]: ${msg.text()}`;
+      logs.push(text);
+      console.log(text);
+    });
+
+    page.on('pageerror', (error) => {
+      const text = `[PAGE ERROR]: ${error.message}\n${error.stack}`;
+      errors.push(text);
+      console.error(text);
+    });
+
+    page.on('request', (request) => {
+      const text = `[→ REQUEST] ${request.method()} ${request.url()}`;
+      console.log(text);
+    });
+
+    page.on('response', async (response) => {
+      const request = response.request();
+      const text = `[← RESPONSE] ${response.status()} ${request.method()} ${request.url()}`;
+      console.log(text);
+
+      // Log failed requests
+      if (response.status() >= 400) {
+        const errorInfo = {
+          status: response.status(),
+          url: request.url(),
+          method: request.method(),
+        };
+        networkErrors.push(errorInfo);
+        console.error(`[NETWORK ERROR] ${response.status()} ${request.url()}`);
+
+        // Try to log response body for API errors
+        if (request.url().includes('/api/')) {
+          try {
+            const body = await response.text();
+            console.error(`[ERROR BODY] ${body}`);
+          } catch (e) {
+            // Can't read body
+          }
+        }
+      }
+    });
+
+    // ========================================
+    // STEP 1: Navigate to Login Page
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 1: Navigate to Login Page');
+    console.log('========================================\n');
+
+    await page.goto('/login');
+    await page.waitForLoadState('networkidle');
+
+    // Take screenshot of login page
+    await page.screenshot({ path: 'test-results/01-login-page.png', fullPage: true });
+    console.log('Screenshot saved: 01-login-page.png');
+
+    // Check if we see the login button
+    const loginButton = page.locator('button:has-text("Sign in with Auth0")');
+    await expect(loginButton).toBeVisible({ timeout: 10000 });
+    console.log('✓ Login button is visible');
+
+    // ========================================
+    // STEP 2: Click Login and Authenticate
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 2: Click Login (Auth0)');
+    console.log('========================================\n');
+
+    // Click login button
+    await loginButton.click();
+    console.log('Clicked "Sign in with Auth0" button');
+
+    // Wait for Auth0 redirect or dashboard
+    // This will either go to Auth0 login page or directly to dashboard if already logged in
+    await page.waitForTimeout(3000);
+
+    await page.screenshot({ path: 'test-results/02-after-login-click.png', fullPage: true });
+    console.log('Screenshot saved: 02-after-login-click.png');
+
+    // Check current URL
+    const currentUrl = page.url();
+    console.log(`Current URL: ${currentUrl}`);
+
+    // If we're on Auth0 login page, we need to authenticate
+    if (currentUrl.includes('auth0.com') || currentUrl.includes('login')) {
+      console.log('⚠ Auth0 login page detected - attempting automatic login');
+
+      try {
+        // Fill in email
+        const emailInput = page.locator('input[name="username"], input[type="email"]').first();
+        await emailInput.fill('test@test.com');
+        console.log('✓ Entered email');
+
+        // Fill in password
+        const passwordInput = page.locator('input[name="password"], input[type="password"]').first();
+        await passwordInput.fill('P@ssw0rd!');
+        console.log('✓ Entered password');
+
+        // Click submit button
+        const submitButton = page.locator('button[type="submit"], button:has-text("Continue"), button:has-text("Log in")').first();
+        await submitButton.click();
+        console.log('✓ Clicked login button');
+
+        // Wait for navigation to dashboard (indicating successful login)
+        await page.waitForURL('**/dashboard', { timeout: 30000 });
+        console.log('✓ Successfully logged in - redirected to dashboard');
+      } catch (error) {
+        console.error('❌ Automatic login failed:', error);
+        console.log('\n🔵 PAUSING TEST - Please log in manually in the browser window');
+        console.log('🔵 After logging in, the test will continue automatically\n');
+        await page.waitForURL('**/dashboard', { timeout: 180000 });
+      }
+    } else if (currentUrl.includes('dashboard')) {
+      console.log('✓ Already authenticated - on dashboard');
+    } else if (currentUrl.includes('pending-approval')) {
+      console.log('⚠ User is not approved yet - on pending approval page');
+      throw new Error('User needs to be approved by an administrator first');
+    }
+
+    await page.screenshot({ path: 'test-results/03-logged-in.png', fullPage: true });
+    console.log('Screenshot saved: 03-logged-in.png');
+
+    // ========================================
+    // STEP 3: Refresh Browser
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 3: Refresh Browser');
+    console.log('========================================\n');
+
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    console.log('✓ Browser refreshed');
+
+    await page.screenshot({ path: 'test-results/04-after-refresh.png', fullPage: true });
+    console.log('Screenshot saved: 04-after-refresh.png');
+
+    // Verify we're still logged in by checking for Sign Out button
+    const signOutButton = page.locator('button:has-text("Sign Out")');
+    await expect(signOutButton).toBeVisible({ timeout: 10000 });
+    console.log('✓ Still logged in after refresh');
+
+    // ========================================
+    // STEP 4: Navigate to VIPs Page
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 4: Navigate to VIPs Page');
+    console.log('========================================\n');
+
+    // Click on VIPs in navigation
+    const vipsLink = page.locator('a:has-text("VIPs")').first();
+    await vipsLink.click();
+    console.log('Clicked VIPs navigation link');
+
+    await page.waitForLoadState('networkidle');
+    await page.screenshot({ path: 'test-results/05-vips-page.png', fullPage: true });
+    console.log('Screenshot saved: 05-vips-page.png');
+
+    // ========================================
+    // STEP 5: Create New VIP
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 5: Create New VIP');
+    console.log('========================================\n');
+
+    // Look for "Add VIP" or "New VIP" button
+    const addVipButton = page.locator('button').filter({ hasText: /Add VIP|New VIP|Create VIP|\+/i }).first();
+    await expect(addVipButton).toBeVisible({ timeout: 10000 });
+    console.log('✓ Found Add VIP button');
+
+    await addVipButton.click();
+    console.log('Clicked Add VIP button');
+
+    await page.waitForTimeout(1000);
+    await page.screenshot({ path: 'test-results/06-vip-form.png', fullPage: true });
+    console.log('Screenshot saved: 06-vip-form.png');
+
+    // ========================================
+    // STEP 6: Fill Out VIP Form
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 6: Fill Out VIP Form');
+    console.log('========================================\n');
+
+    // Generate unique test data
+    const timestamp = Date.now();
+    const testVipName = `Test VIP ${timestamp}`;
+    const testVipOrg = `Test Organization ${timestamp}`;
+
+    console.log(`Creating VIP: ${testVipName}`);
+
+    // Fill in the form fields
+    // Note: Adjust selectors based on your actual form structure
+
+    // Name field
+    const nameInput = page.locator('input[name="name"], input[id="name"]').first();
+    await nameInput.fill(testVipName);
+    console.log(`✓ Filled name: ${testVipName}`);
+
+    // Organization field (if exists)
+    const orgInput = page.locator('input[name="organization"], input[id="organization"]').first();
+    if (await orgInput.count() > 0) {
+      await orgInput.fill(testVipOrg);
+      console.log(`✓ Filled organization: ${testVipOrg}`);
+    }
+
+    // Contact Info field (if exists)
+    const contactInput = page.locator('input[name="contactInfo"], input[id="contactInfo"], input[placeholder*="contact" i]').first();
+    if (await contactInput.count() > 0) {
+      await contactInput.fill('test@example.com');
+      console.log('✓ Filled contact info');
+    }
+
+    // Arrival Mode dropdown (if exists)
+    const arrivalSelect = page.locator('select[name="arrivalMode"], select[id="arrivalMode"]').first();
+    if (await arrivalSelect.count() > 0) {
+      await arrivalSelect.selectOption('FLIGHT');
+      console.log('✓ Selected arrival mode: FLIGHT');
+    }
+
+    // Expected Arrival date (if exists)
+    const arrivalDateInput = page.locator('input[name="expectedArrival"], input[id="expectedArrival"], input[type="datetime-local"]').first();
+    if (await arrivalDateInput.count() > 0) {
+      const futureDate = new Date();
+      futureDate.setDate(futureDate.getDate() + 7);
+      const dateString = futureDate.toISOString().slice(0, 16);
+      await arrivalDateInput.fill(dateString);
+      console.log(`✓ Set expected arrival: ${dateString}`);
+    }
+
+    await page.screenshot({ path: 'test-results/07-vip-form-filled.png', fullPage: true });
+    console.log('Screenshot saved: 07-vip-form-filled.png');
+
+    // ========================================
+    // STEP 7: Save VIP
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 7: Save VIP');
+    console.log('========================================\n');
+
+    // Find and click Save button
+    const saveButton = page.locator('button').filter({ hasText: /Save|Create|Submit/i }).first();
+    await expect(saveButton).toBeVisible({ timeout: 5000 });
+    console.log('✓ Found Save button');
+
+    await saveButton.click();
+    console.log('Clicked Save button');
+
+    // Wait for save to complete (look for success message or redirect)
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({ path: 'test-results/08-after-save.png', fullPage: true });
+    console.log('Screenshot saved: 08-after-save.png');
+
+    // Check for success message or new VIP in list
+    const successIndicators = [
+      page.locator('text=/success/i'),
+      page.locator('text=/created/i'),
+      page.locator(`text="${testVipName}"`),
+    ];
+
+    let saveSuccess = false;
+    for (const indicator of successIndicators) {
+      if (await indicator.count() > 0) {
+        saveSuccess = true;
+        console.log('✓ VIP save appears successful');
+        break;
+      }
+    }
+
+    if (!saveSuccess) {
+      console.log('⚠ Could not confirm VIP was saved - check screenshots');
+    }
+
+    // ========================================
+    // STEP 8: Final Browser Refresh
+    // ========================================
+    console.log('\n========================================');
+    console.log('STEP 8: Final Browser Refresh');
+    console.log('========================================\n');
+
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    console.log('✓ Browser refreshed');
+
+    await page.screenshot({ path: 'test-results/09-final-refresh.png', fullPage: true });
+    console.log('Screenshot saved: 09-final-refresh.png');
+
+    // Verify VIP is still visible after refresh
+    const vipInList = page.locator(`text="${testVipName}"`);
+    if (await vipInList.count() > 0) {
+      console.log('✓ VIP still visible after refresh - data persisted!');
+    } else {
+      console.log('⚠ VIP not visible after refresh - may need to navigate back to VIPs list');
+    }
+
+    // ========================================
+    // FINAL REPORT
+    // ========================================
+    console.log('\n========================================');
+    console.log('TEST COMPLETE - FINAL REPORT');
+    console.log('========================================\n');
+
+    console.log(`Total console logs: ${logs.length}`);
+    console.log(`Page errors: ${errors.length}`);
+    console.log(`Network errors: ${networkErrors.length}`);
+
+    if (errors.length > 0) {
+      console.log('\n❌ PAGE ERRORS FOUND:');
+      errors.forEach((error, i) => {
+        console.log(`\n${i + 1}. ${error}`);
+      });
+    }
+
+    if (networkErrors.length > 0) {
+      console.log('\n❌ NETWORK ERRORS FOUND:');
+      networkErrors.forEach((error, i) => {
+        console.log(`\n${i + 1}. ${error.status} ${error.method} ${error.url}`);
+      });
+    }
+
+    if (errors.length === 0 && networkErrors.length === 0) {
+      console.log('\n✅ NO ERRORS DETECTED - Test completed successfully!');
+    }
+
+    console.log('\n📸 Screenshots saved in test-results/ directory');
+    console.log('========================================\n');
+
+    // Fail test if there were errors
+    expect(errors.length).toBe(0);
+    expect(networkErrors.length).toBe(0);
+  });
+});