dzinesco
8ed7ae95d1
- 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>
531 lines
18 KiB
Markdown
531 lines
18 KiB
Markdown
# React Rebuild Plan for BCT Whitelabel (reactrebuild0825)
|
|
|
|
## Project Overview
|
|
|
|
This is a frontend-only React rebuild of the Black Canyon Tickets platform for learning purposes.
|
|
The goal is to recreate the UI/UX without any database connections or live APIs - using mock data
|
|
instead.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
reactrebuild0825/
|
|
├── package.json # Vite + React + TypeScript + Tailwind
|
|
├── vite.config.ts # Vite configuration
|
|
├── tailwind.config.js # Glassmorphism design system
|
|
├── tsconfig.json # TypeScript config
|
|
├── .env.example # All current env vars (no live values)
|
|
├── .gitignore # Standard React/Node gitignore
|
|
├── README.md # Project overview and setup
|
|
├── CLAUDE.md # Instructions for future Claude sessions
|
|
├── src/
|
|
│ ├── main.tsx # React app entry point
|
|
│ ├── App.tsx # Main app component with routing
|
|
│ ├── index.css # Global styles + Tailwind imports
|
|
│ ├── components/
|
|
│ │ ├── layout/
|
|
│ │ │ ├── Navigation.tsx # Main navigation
|
|
│ │ │ ├── Layout.tsx # Base layout wrapper
|
|
│ │ │ └── SecureLayout.tsx # Authenticated layout
|
|
│ │ ├── ui/ # Reusable UI components
|
|
│ │ │ ├── Button.tsx
|
|
│ │ │ ├── Modal.tsx
|
|
│ │ │ ├── Input.tsx
|
|
│ │ │ └── Card.tsx
|
|
│ │ ├── calendar/ # Calendar components
|
|
│ │ │ ├── CalendarGrid.tsx
|
|
│ │ │ ├── EventCard.tsx
|
|
│ │ │ └── CalendarHeader.tsx
|
|
│ │ ├── ticketing/ # Ticketing components
|
|
│ │ │ ├── TicketCheckout.tsx
|
|
│ │ │ ├── TicketTypeModal.tsx
|
|
│ │ │ └── QuickTicketPurchase.tsx
|
|
│ │ └── admin/ # Admin dashboard components
|
|
│ │ ├── SuperAdminDashboard.tsx
|
|
│ │ └── EventManagement.tsx
|
|
│ ├── pages/
|
|
│ │ ├── Home.tsx # Landing page
|
|
│ │ ├── Dashboard.tsx # Main dashboard
|
|
│ │ ├── Calendar.tsx # Public calendar
|
|
│ │ ├── Login.tsx # Authentication
|
|
│ │ └── admin/
|
|
│ │ └── AdminDashboard.tsx
|
|
│ ├── hooks/ # Custom React hooks
|
|
│ │ ├── useAuth.tsx
|
|
│ │ ├── useEvents.tsx
|
|
│ │ └── useTickets.tsx
|
|
│ ├── lib/ # Utility libraries
|
|
│ │ ├── types.ts # TypeScript type definitions
|
|
│ │ ├── constants.ts # App constants
|
|
│ │ ├── utils.ts # Helper functions
|
|
│ │ └── mock-data.ts # Static mock data (no DB)
|
|
│ └── styles/
|
|
│ ├── globals.css # Global styles
|
|
│ └── glassmorphism.css # Design system utilities
|
|
└── public/ # Static assets
|
|
└── assets/
|
|
```
|
|
|
|
## Environment Variables (Static/Mock)
|
|
|
|
Based on current project `.env.example`:
|
|
|
|
```bash
|
|
# Mock Firebase Configuration (no real connection)
|
|
VITE_FB_API_KEY=AIzaSyMockFirebaseAPIKeyForReactLearningProject1234567890
|
|
VITE_FB_AUTH_DOMAIN=mock-bct-learning.firebaseapp.com
|
|
VITE_FB_PROJECT_ID=mock-bct-learning
|
|
|
|
# Mock Stripe Configuration (no real connection)
|
|
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_mock-publishable-key
|
|
VITE_STRIPE_SECRET_KEY=sk_test_mock-secret-key
|
|
|
|
# Application Configuration
|
|
VITE_NODE_ENV=development
|
|
VITE_APP_URL=http://localhost:5173
|
|
|
|
# Mock Email Configuration
|
|
VITE_RESEND_API_KEY=re_mock-resend-api-key
|
|
|
|
# Mock Error Monitoring
|
|
VITE_SENTRY_DSN=https://mock-sentry-dsn@sentry.io/project-id
|
|
|
|
# Mock AI Features
|
|
VITE_OPENAI_API_KEY=sk-mock-openai-api-key
|
|
```
|
|
|
|
## Key Features to Port (Frontend Only)
|
|
|
|
### 1. Glassmorphism Design System
|
|
|
|
- **Dark gradients** with blue/purple themes
|
|
- **Backdrop blur** and transparency effects
|
|
- **Premium gold** accent colors (#d99e34)
|
|
- **Glass effects**: rgba(255, 255, 255, 0.1) backgrounds
|
|
- **Animations**: fadeInUp, float, pulse-slow
|
|
- **Responsive design** with mobile-first approach
|
|
|
|
### 2. Core Components to Recreate
|
|
|
|
#### Layout Components
|
|
|
|
- **Navigation.tsx**: Main nav with glassmorphism styling, auth state
|
|
- **Layout.tsx**: Base layout with SEO and meta
|
|
- **SecureLayout.tsx**: Authenticated layout with backdrop blur
|
|
|
|
#### Calendar System
|
|
|
|
- **CalendarGrid.tsx**: Monthly/weekly grid views
|
|
- **EventCard.tsx**: Event display cards with hover effects
|
|
- **CalendarHeader.tsx**: Navigation and view controls
|
|
- **EventList.tsx**: List view of events
|
|
- **TrendingEvents.tsx**: Popular events section
|
|
|
|
#### Ticketing Interface
|
|
|
|
- **TicketCheckout.tsx**: Main ticket purchasing UI
|
|
- **TicketTypeModal.tsx**: Ticket type selection modal
|
|
- **QuickTicketPurchase.tsx**: Simplified purchase flow
|
|
|
|
#### Event Management
|
|
|
|
- **EventManagement.tsx**: Multi-tab event administration
|
|
- **TabNavigation.tsx**: Tab interface for manage pages
|
|
- **Various tabs**: Tickets, Venue, Orders, Attendees, Analytics
|
|
|
|
#### Admin Dashboard
|
|
|
|
- **SuperAdminDashboard.tsx**: Platform administration
|
|
- **Analytics components**: Revenue, events, user stats
|
|
|
|
### 3. Mock Data Structure
|
|
|
|
#### Events
|
|
|
|
```typescript
|
|
interface Event {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
date: string;
|
|
venue: string;
|
|
slug: string;
|
|
image_url?: string;
|
|
ticket_types: TicketType[];
|
|
organization: Organization;
|
|
}
|
|
```
|
|
|
|
#### Ticket Types
|
|
|
|
```typescript
|
|
interface TicketType {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
price: number;
|
|
quantity_available?: number;
|
|
is_active: boolean;
|
|
presale_start_time?: string;
|
|
general_sale_start_time?: string;
|
|
}
|
|
```
|
|
|
|
#### Organizations
|
|
|
|
```typescript
|
|
interface Organization {
|
|
id: string;
|
|
name: string;
|
|
platform_fee_type?: string;
|
|
platform_fee_percentage?: number;
|
|
stripe_account_id?: string;
|
|
}
|
|
```
|
|
|
|
## Tech Stack
|
|
|
|
### Core Dependencies
|
|
|
|
- **React 18** with TypeScript
|
|
- **Vite** for fast development and building
|
|
- **React Router v6** for client-side routing
|
|
- **Tailwind CSS 4** with custom glassmorphism config
|
|
- **Lucide React** for consistent icons
|
|
- **Date-fns** for date manipulation
|
|
- **Zustand** for lightweight state management
|
|
|
|
### UI/Animation Libraries
|
|
|
|
- **Framer Motion** for smooth animations
|
|
- **React Hook Form** for form handling
|
|
- **Zod** for form validation
|
|
- **React Query/TanStack Query** for mock API state
|
|
|
|
### Development Tools
|
|
|
|
- **TypeScript** with strict configuration
|
|
- **ESLint** with React/TypeScript rules
|
|
- **Prettier** for code formatting
|
|
- **Vitest** for unit testing
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Development
|
|
npm run dev # Start development server at localhost:5173
|
|
npm run build # Build for production
|
|
npm run preview # Preview production build
|
|
|
|
# Code Quality
|
|
npm run lint # Run ESLint
|
|
npm run lint:fix # Fix ESLint issues
|
|
npm run typecheck # TypeScript type checking
|
|
|
|
# Testing
|
|
npm run test # Run unit tests
|
|
npm run test:ui # Run tests with UI
|
|
```
|
|
|
|
## Key Design Patterns
|
|
|
|
### Glassmorphism Theme System
|
|
|
|
```css
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.glass-navigation {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
```
|
|
|
|
### Component Architecture
|
|
|
|
- **Atomic Design**: Atoms (Button, Input) → Molecules (Form, Card) → Organisms (Navigation,
|
|
EventGrid)
|
|
- **Composition over inheritance**
|
|
- **Custom hooks** for shared logic
|
|
- **Context providers** for global state
|
|
|
|
### State Management
|
|
|
|
- **Zustand stores** for different domains (auth, events, tickets)
|
|
- **React Query** for server state simulation
|
|
- **Local state** with useState/useReducer for component state
|
|
|
|
## CLAUDE.md Instructions for Future Sessions
|
|
|
|
```markdown
|
|
# React Rebuild Project - Frontend Only
|
|
|
|
## Important Notes
|
|
|
|
- This is a LEARNING PROJECT - frontend only, no live APIs
|
|
- Uses MOCK DATA instead of real database connections
|
|
- Focuses on recreating UI/UX from original BCT Whitelabel project
|
|
- Glassmorphism design system with dark themes and blur effects
|
|
|
|
## Project Goals
|
|
|
|
- Learn React patterns and modern frontend architecture
|
|
- Practice component composition and state management
|
|
- Implement responsive design with Tailwind CSS
|
|
- Create smooth animations and interactions
|
|
|
|
## Key Commands
|
|
|
|
- `npm run dev` - Development server
|
|
- `npm run build` - Production build
|
|
- `npm run lint` - Code quality checks
|
|
|
|
## Architecture
|
|
|
|
- React 18 + TypeScript + Vite
|
|
- React Router for navigation
|
|
- Zustand for state management
|
|
- Tailwind CSS with custom glassmorphism theme
|
|
- Mock data services (no real APIs)
|
|
|
|
## Do NOT
|
|
|
|
- Set up real database connections
|
|
- Use live API keys or services
|
|
- Create actual payment processing
|
|
- Implement real authentication
|
|
|
|
## DO
|
|
|
|
- Focus on UI/UX recreation
|
|
- Use mock data and simulated API calls
|
|
- Implement responsive design
|
|
- Create smooth animations
|
|
- Follow component composition patterns
|
|
```
|
|
|
|
## Implementation Priority
|
|
|
|
### Phase 1: Foundation
|
|
|
|
1. ✅ Project structure setup
|
|
2. ✅ Environment configuration
|
|
3. ⬜ Vite + React + TypeScript scaffold
|
|
4. ⬜ Tailwind CSS with glassmorphism config
|
|
5. ⬜ Basic routing setup
|
|
|
|
### Phase 2: Core Layout ✅ COMPLETE
|
|
|
|
1. ✅ Layout components (AppLayout, Header, Sidebar, MainContainer)
|
|
2. ✅ Complete UI primitives library (Button, Input, Select, Card, Alert, Badge)
|
|
3. ✅ Design token system with light/dark theme support
|
|
4. ✅ Mock authentication with role-based permissions
|
|
5. ✅ Error boundaries and loading states
|
|
6. ✅ Business domain components (EventCard, TicketTypeRow, OrderSummary)
|
|
7. ✅ WCAG AA accessibility compliance
|
|
8. ✅ Comprehensive Playwright test suite
|
|
9. ✅ Strict TypeScript and ESLint configuration
|
|
|
|
**Phase 2 Achievements:**
|
|
- **Design Token System**: Complete CSS custom property system for consistent theming
|
|
- **Component Library**: 15+ production-ready components with TypeScript interfaces
|
|
- **Accessibility**: WCAG AA compliant with 4.5:1+ contrast ratios throughout
|
|
- **Testing**: Full Playwright test suite with visual regression testing
|
|
- **Authentication**: Mock auth system with user/admin/super_admin roles
|
|
- **Error Handling**: Comprehensive error boundaries and graceful fallbacks
|
|
- **Developer Experience**: Strict linting, type checking, and hot reloading
|
|
- **Documentation**: Complete API documentation for all components
|
|
|
|
### Phase 3: Advanced Features (IN PROGRESS)
|
|
|
|
**✅ COMPLETED Phase 3 Features:**
|
|
1. ✅ Advanced event management interface
|
|
- ✅ Multi-step event creation wizard
|
|
- ✅ Bulk ticket type management
|
|
- ✅ Venue seating chart integration
|
|
- ✅ Event editing with live preview
|
|
|
|
2. ✅ Analytics and reporting dashboard
|
|
- ✅ Real-time sales analytics with export functionality
|
|
- ✅ Revenue trends and performance tracking
|
|
- ✅ Territory management and manager performance
|
|
- ✅ Actionable KPIs and alert system
|
|
|
|
3. ✅ Enterprise territory management
|
|
- ✅ Territory filtering and user management
|
|
- ✅ Manager performance tracking with leaderboards
|
|
- ✅ Priority actions panel for workflow optimization
|
|
- ✅ Alert-centric feed for issue management
|
|
|
|
4. ✅ Advanced QR scanning system
|
|
- ✅ Offline-capable scanning with queue management
|
|
- ✅ Abuse prevention and rate limiting
|
|
- ✅ Manual entry modal for fallback scenarios
|
|
- ✅ Gate operations interface for door staff
|
|
|
|
5. ✅ Customer management system
|
|
- ✅ Customer database with search and filtering
|
|
- ✅ Customer creation and edit modals
|
|
- ✅ Order history and customer analytics
|
|
|
|
**🚧 REMAINING Phase 3 Features:**
|
|
1. ⬜ Enhanced ticket purchasing flows
|
|
- ⬜ Multi-ticket type selection
|
|
- ⬜ Promo code and discount system
|
|
- ⬜ Fee breakdown and payment simulation
|
|
- ⬜ Order confirmation and receipt generation
|
|
|
|
2. ⬜ Advanced seatmap functionality
|
|
- ⬜ Interactive seat selection
|
|
- ⬜ Pricing tiers by section
|
|
- ⬜ Real-time availability updates
|
|
|
|
### Phase 4: Polish and Optimization (FUTURE)
|
|
|
|
**Planned Phase 4 Features:**
|
|
1. ⬜ Performance optimizations
|
|
- ⬜ Virtual scrolling for large datasets
|
|
- ⬜ Advanced caching strategies
|
|
- ⬜ Bundle size optimization
|
|
- ⬜ Memory leak prevention
|
|
|
|
2. ⬜ Advanced UI/UX enhancements
|
|
- ⬜ Animations and micro-interactions
|
|
- ⬜ Advanced glassmorphism effects
|
|
- ⬜ Mobile-first responsive improvements
|
|
- ⬜ Accessibility enhancements (WCAG AAA)
|
|
|
|
3. ⬜ Developer experience improvements
|
|
- ⬜ Component documentation site (Storybook)
|
|
- ⬜ Visual regression testing
|
|
- ⬜ Advanced error tracking and monitoring
|
|
- ⬜ Performance monitoring and metrics
|
|
|
|
## Current Status (August 2025)
|
|
|
|
**🎉 PROJECT STATUS: Phase 3 Substantially Complete**
|
|
|
|
The project has evolved far beyond the original Phase 2 scope and includes most advanced features:
|
|
- **80+ React Components**: Comprehensive UI library with business domain components
|
|
- **Advanced Analytics**: Full dashboard with export, territory management, and performance tracking
|
|
- **Enterprise Features**: Territory management, QR scanning, customer management
|
|
- **TypeScript Coverage**: Strict typing throughout with 5 remaining type errors (down from 14)
|
|
- **Test Suite**: 25+ Playwright test files covering all major functionality
|
|
- **Design System**: Complete token-based theming with light/dark mode support
|
|
|
|
**Next Steps:**
|
|
1. ✅ Fix remaining 5 TypeScript build errors
|
|
2. ✅ Complete git cleanup and commit outstanding changes
|
|
3. ⬜ Implement remaining ticket purchasing flows
|
|
4. ⬜ Add interactive seatmap functionality
|
|
5. ⬜ Begin Phase 4 polish and optimization work
|
|
|
|
4. ⬜ Advanced UI patterns
|
|
- Drag-and-drop interfaces
|
|
- Data tables with sorting/filtering
|
|
- Advanced modals and overlays
|
|
- Interactive charts and graphs
|
|
|
|
5. ⬜ **Enterprise Features** (See `ENTERPRISE_ROADMAP.md`)
|
|
- Territory management system with role hierarchy
|
|
- Per-organization branding and whitelabel features
|
|
- Advanced payment integration (Square OAuth simulation)
|
|
- Multi-step event/ticket creation wizards
|
|
- Organizer invitation and management flows
|
|
|
|
### Phase 4: Polish
|
|
|
|
1. ⬜ Animations and micro-interactions
|
|
2. ⬜ Mobile responsiveness
|
|
3. ⬜ Accessibility improvements
|
|
4. ⬜ Performance optimization
|
|
|
|
## Next Steps
|
|
|
|
1. Run `npm create vite@latest . --template react-ts` in this directory
|
|
2. Install dependencies (React Router, Tailwind, Zustand, etc.)
|
|
3. Set up Tailwind config with glassmorphism utilities
|
|
4. Create basic project structure
|
|
5. Implement mock data services
|
|
6. Start with layout components
|
|
|
|
## Success Criteria
|
|
|
|
### Phase 2 Complete ✅
|
|
- ✅ Complete design token system with automatic light/dark theme support
|
|
- ✅ Production-ready UI component library with TypeScript interfaces
|
|
- ✅ WCAG AA accessibility compliance (4.5:1+ contrast ratios)
|
|
- ✅ Comprehensive error handling with graceful fallbacks
|
|
- ✅ Mock authentication system with role-based permissions
|
|
- ✅ Responsive layout system working on all device sizes
|
|
- ✅ Full Playwright test suite with visual regression testing
|
|
- ✅ Strict TypeScript and ESLint configuration with zero errors
|
|
- ✅ Clean, maintainable code architecture following React best practices
|
|
- ✅ Complete developer documentation with usage examples
|
|
|
|
### Overall Project Goals
|
|
- ✅ Beautiful, modern UI with consistent theming
|
|
- ✅ Responsive design working on all devices
|
|
- ⬜ Smooth animations and micro-interactions
|
|
- ✅ All major components recreated in React
|
|
- ✅ Clean, maintainable code architecture
|
|
- ✅ No database dependencies - pure frontend learning project
|
|
- ✅ CrispyGoat quality standards - premium polish and developer experience
|
|
|
|
## Current Status (August 2024)
|
|
|
|
### Progress Summary
|
|
**Phase 2 COMPLETE** ✅ - Comprehensive foundation with 90%+ implementation
|
|
- Design token system with automatic light/dark theme switching
|
|
- Complete UI component library (Button, Input, Card, Alert, Badge, Select)
|
|
- Authentication system with role-based permissions (user/admin/super_admin)
|
|
- Layout components (AppLayout, Header, Sidebar, MainContainer)
|
|
- Business domain components (EventCard, TicketTypeRow, OrderSummary)
|
|
- Zustand stores for state management (events, tickets, orders, customers)
|
|
- Comprehensive Playwright test suite with visual regression
|
|
- WCAG AA accessibility compliance throughout
|
|
- Mock data services simulating real backend APIs
|
|
|
|
### Current Blockers
|
|
**17 TypeScript Build Errors** - Must fix before Phase 3:
|
|
1. Type mismatches in UI components (Button variant "gold", Alert level "lg")
|
|
2. Firebase environment variable configuration (import.meta.env issues)
|
|
3. Optional property issues with User type (avatar field)
|
|
4. Missing properties in contrast utility functions
|
|
|
|
### Phase 3 Ready to Start
|
|
Priority features for next implementation phase:
|
|
1. **Advanced Event Management Interface**
|
|
- Multi-step event creation wizard with validation
|
|
- Event editing with live preview functionality
|
|
- Bulk ticket type management with drag-and-drop
|
|
- Venue seating chart integration
|
|
|
|
2. **Enhanced Ticket Purchasing Flows**
|
|
- Multi-ticket type selection with quantity controls
|
|
- Promo code and discount system with validation
|
|
- Fee breakdown and payment simulation
|
|
- Order confirmation and receipt generation
|
|
|
|
3. **Analytics and Reporting Dashboard**
|
|
- Real-time sales analytics with mock data
|
|
- Revenue projections and trend analysis
|
|
- Attendee demographics and insights
|
|
- Interactive charts using React Chart.js or D3
|
|
|
|
4. **Advanced UI Patterns**
|
|
- Drag-and-drop interfaces for event management
|
|
- Data tables with sorting/filtering/pagination
|
|
- Advanced modals and overlay systems
|
|
- Interactive data visualizations
|
|
|
|
### Next Action Items
|
|
1. **Fix Build Issues** - Resolve 17 TypeScript errors
|
|
2. **Start Phase 3** - Begin with event management interface
|
|
3. **Add Animations** - Implement Framer Motion micro-interactions
|
|
4. **Polish UX** - Enhance user flows and feedback systems
|