kyle
868f7efc23
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>
145 lines
3.8 KiB
Markdown
145 lines
3.8 KiB
Markdown
# 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
|