# 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