Major Enhancement: NestJS Migration + CASL Authorization + Error Handling
Some checks failed
CI/CD Pipeline / Backend Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Tests (push) Has been cancelled
CI/CD Pipeline / Build Docker Images (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled

Complete rewrite from Express to NestJS with enterprise-grade features:

## Backend Improvements
- Migrated from Express to NestJS 11.0.1 with TypeScript
- Implemented Prisma ORM 7.3.0 for type-safe database access
- Added CASL authorization system replacing role-based guards
- Created global exception filters with structured logging
- Implemented Auth0 JWT authentication with Passport.js
- Added vehicle management with conflict detection
- Enhanced event scheduling with driver/vehicle assignment
- Comprehensive error handling and logging

## Frontend Improvements
- Upgraded to React 19.2.0 with Vite 7.2.4
- Implemented CASL-based permission system
- Added AbilityContext for declarative permissions
- Created ErrorHandler utility for consistent error messages
- Enhanced API client with request/response logging
- Added War Room (Command Center) dashboard
- Created VIP Schedule view with complete itineraries
- Implemented Vehicle Management UI
- Added mock data generators for testing (288 events across 20 VIPs)

## New Features
- Vehicle fleet management (types, capacity, status tracking)
- Complete 3-day Jamboree schedule generation
- Individual VIP schedule pages with PDF export (planned)
- Real-time War Room dashboard with auto-refresh
- Permission-based navigation filtering
- First user auto-approval as administrator

## Documentation
- Created CASL_AUTHORIZATION.md (comprehensive guide)
- Created ERROR_HANDLING.md (error handling patterns)
- Updated CLAUDE.md with new architecture
- Added migration guides and best practices

## Technical Debt Resolved
- Removed custom authentication in favor of Auth0
- Replaced role checks with CASL abilities
- Standardized error responses across API
- Implemented proper TypeScript typing
- Added comprehensive logging

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-31 08:50:25 +01:00
parent 8ace1ab2c1
commit 868f7efc23
351 changed files with 44997 additions and 6276 deletions

144
frontend/README.md Normal file
View File

@@ -0,0 +1,144 @@
# VIP Coordinator Frontend
React 18 frontend with TypeScript, Tailwind CSS, Auth0, and TanStack Query.
## Quick Start
```bash
# Install dependencies
npm install
# Configure Auth0
# Edit .env with your Auth0 credentials
# Start development server
npm run dev
```
Frontend will be available at: **http://localhost:5173**
## Tech Stack
- **React** 18.2.0
- **TypeScript** 5.3+
- **Vite** 5.x (build tool)
- **Tailwind CSS** 3.4+ (styling)
- **Auth0 React SDK** (authentication)
- **TanStack Query** v5 (data fetching)
- **React Router** 6.x (routing)
- **Axios** (HTTP client)
- **Lucide React** (icons)
## Features
- ✅ Auth0 authentication with automatic token management
- ✅ Protected routes
- ✅ Role-based access control
- ✅ Modern, responsive UI with Tailwind CSS
- ✅ Automatic API token injection
- ✅ Real-time data with TanStack Query
- ✅ Dashboard with stats
- ✅ VIP management
- ✅ Driver management
- ✅ Schedule/event management
- ✅ Flight tracking
- ✅ User management (admin)
## Pages
- `/login` - Auth0 login page
- `/callback` - Auth0 callback handler
- `/dashboard` - Main dashboard with stats
- `/vips` - VIP list and management
- `/drivers` - Driver list and management
- `/events` - Schedule and event management
- `/flights` - Flight tracking
- `/users` - User management (admin only)
## Environment Variables
Create `.env` file:
```env
VITE_API_URL=http://localhost:3000/api/v1
VITE_AUTH0_DOMAIN=your-tenant.us.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
VITE_AUTH0_AUDIENCE=https://your-api-identifier
```
## Development
```bash
npm run dev # Start dev server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
```
## Project Structure
```
src/
├── components/
│ ├── Layout.tsx # Main layout with navigation
│ └── ProtectedRoute.tsx # Route protection component
├── contexts/
│ └── AuthContext.tsx # Auth context wrapper
├── lib/
│ ├── api.ts # Axios client with interceptors
│ └── utils.ts # Utility functions
├── pages/
│ ├── Login.tsx # Login page
│ ├── Callback.tsx # Auth callback
│ ├── Dashboard.tsx # Main dashboard
│ ├── VIPList.tsx # VIP management
│ ├── DriverList.tsx # Driver management
│ ├── EventList.tsx # Schedule management
│ ├── FlightList.tsx # Flight tracking
│ └── UserList.tsx # User management
├── types/
│ └── index.ts # TypeScript interfaces
├── App.tsx # Root component
├── main.tsx # Entry point
└── index.css # Global styles
```
## Authentication Flow
1. User clicks "Sign In with Auth0" on login page
2. Redirected to Auth0 hosted login
3. After authentication, returned to `/callback`
4. Token stored in localStorage
5. Axios interceptor attaches token to all API requests
6. Protected routes check authentication status
7. User redirected to dashboard
## API Integration
The frontend communicates with the backend API at `http://localhost:3000/api/v1`.
All API calls use the Axios client in `lib/api.ts` which:
- Automatically adds JWT token to requests
- Handles errors globally
- Logs all requests in development
## Building for Production
```bash
npm run build
```
This creates optimized production files in `dist/` directory.
Deploy to:
- Digital Ocean App Platform
- Netlify
- Vercel
- Any static hosting service
## Notes
- First user to register becomes administrator automatically
- Subsequent users require admin approval
- All routes except `/login` and `/callback` require authentication
- Token refresh handled automatically by Auth0 SDK