feat: comprehensive project completion and documentation

- Enhanced event creation wizard with multi-step validation - Added advanced QR scanning system with offline support - Implemented comprehensive territory management features - Expanded analytics with export functionality and KPIs - Created complete design token system with theme switching - Added 25+ Playwright test files for comprehensive coverage - Implemented enterprise-grade permission system - Enhanced component library with 80+ React components - Added Firebase integration for deployment - Completed Phase 3 development goals substantially 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-26 15:04:37 -06:00
parent aa81eb5adb
commit 8ed7ae95d1
230 changed files with 24072 additions and 3395 deletions
--- a/reactrebuild0825/tests/seat-map-demo.spec.ts
+++ b/reactrebuild0825/tests/seat-map-demo.spec.ts
@@ -0,0 +1,136 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Seat Map Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/seat-map-demo');
+  });
+
+  test('loads seat map demo page', async ({ page }) => {
+    // Wait for main heading
+    await expect(page.getByRole('heading', { name: 'Seat Map Demo' })).toBeVisible();
+    
+    // Check description
+    await expect(page.getByText('Interactive seat selection system for premium events')).toBeVisible();
+    
+    // Check event selection section
+    await expect(page.getByRole('heading', { name: 'Select an Event' })).toBeVisible();
+  });
+
+  test('displays events with seat map support', async ({ page }) => {
+    // Should show events that support seat maps
+    await expect(page.getByText('Autumn Gala & Silent Auction')).toBeVisible();
+    await expect(page.getByText('Contemporary Dance Showcase')).toBeVisible();
+    
+    // Check venue types are displayed
+    await expect(page.getByText('Banquet Tables')).toBeVisible();
+    await expect(page.getByText('Theater Seating')).toBeVisible();
+    
+    // Check select buttons
+    await expect(page.getByRole('button', { name: 'Select Seats' }).first()).toBeVisible();
+  });
+
+  test('navigates to seat selection for ballroom event', async ({ page }) => {
+    // Click on the first event (Autumn Gala - Banquet Tables)
+    await page.getByRole('button', { name: 'Select Seats' }).first().click();
+    
+    // Should navigate to seat selection step
+    await expect(page.getByText('Autumn Gala & Silent Auction')).toBeVisible();
+    await expect(page.getByText('Banquet Tables')).toBeVisible();
+    
+    // Should show back button
+    await expect(page.getByRole('button', { name: 'Back to Events' })).toBeVisible();
+    
+    // Should show seat map legend
+    await expect(page.getByText('Seat Map Legend')).toBeVisible();
+    await expect(page.getByText('Availability')).toBeVisible();
+  });
+
+  test('navigates to seat selection for theater event', async ({ page }) => {
+    // Click on the theater event (Contemporary Dance Showcase)
+    await page.getByRole('button', { name: 'Select Seats' }).nth(1).click();
+    
+    // Should show theater-specific elements
+    await expect(page.getByText('Contemporary Dance Showcase')).toBeVisible();
+    await expect(page.getByText('Theater Seating')).toBeVisible();
+    
+    // Check for seat map controls
+    await expect(page.getByText('Display Options')).toBeVisible();
+  });
+
+  test('shows selection summary and controls', async ({ page }) => {
+    // Navigate to seat selection
+    await page.getByRole('button', { name: 'Select Seats' }).first().click();
+    
+    // Should show selection summary at bottom
+    await expect(page.getByText('0 selected')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Clear Selection' })).toBeDisabled();
+    await expect(page.getByRole('button', { name: 'Continue to Checkout' })).toBeDisabled();
+  });
+
+  test('can navigate back to event selection', async ({ page }) => {
+    // Navigate to seat selection
+    await page.getByRole('button', { name: 'Select Seats' }).first().click();
+    
+    // Click back button
+    await page.getByRole('button', { name: 'Back to Events' }).click();
+    
+    // Should return to event selection
+    await expect(page.getByRole('heading', { name: 'Select an Event' })).toBeVisible();
+    await expect(page.getByText('Choose an event that supports assigned seating')).toBeVisible();
+  });
+
+  test('displays seat map legend with statistics', async ({ page }) => {
+    // Navigate to seat selection
+    await page.getByRole('button', { name: 'Select Seats' }).first().click();
+    
+    // Wait for seat map to load
+    await page.waitForTimeout(2000);
+    
+    // Check legend components
+    await expect(page.getByText('Seat Map Legend')).toBeVisible();
+    await expect(page.getByText('total seats')).toBeVisible();
+    await expect(page.getByText('available')).toBeVisible();
+    
+    // Check availability status items
+    await expect(page.getByText('Available')).toBeVisible();
+    await expect(page.getByText('Sold')).toBeVisible();
+  });
+
+  test('has responsive design elements', async ({ page }) => {
+    // Test mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+    
+    await expect(page.getByRole('heading', { name: 'Seat Map Demo' })).toBeVisible();
+    
+    // Events should stack on mobile
+    const eventCards = page.locator('[class*="grid"]').filter({ hasText: 'Autumn Gala' });
+    await expect(eventCards).toBeVisible();
+  });
+
+  test('shows loading states and error handling', async ({ page }) => {
+    // Navigate to seat selection
+    await page.getByRole('button', { name: 'Select Seats' }).first().click();
+    
+    // Should show loading state briefly
+    // Note: In a real test, we might want to mock slow network conditions
+    
+    // Eventually shows content
+    await expect(page.getByText('Seat Map Legend')).toBeVisible({ timeout: 10000 });
+  });
+
+  test('seat map canvas renders correctly', async ({ page }) => {
+    // Navigate to theater event for seat map
+    await page.getByRole('button', { name: 'Select Seats' }).nth(1).click();
+    
+    // Wait for seat map to initialize
+    await page.waitForTimeout(3000);
+    
+    // Should show SVG seat map canvas
+    const canvas = page.locator('svg');
+    await expect(canvas).toBeVisible();
+    
+    // Should show zoom controls
+    await expect(page.getByRole('button').filter({ hasText: 'ZoomIn' })).toBeVisible();
+    await expect(page.getByRole('button').filter({ hasText: 'ZoomOut' })).toBeVisible();
+  });
+});