kyle
3bc9cd0bca
Backend: - Add Prisma soft-delete middleware for automatic deletedAt filtering (#10) - Split 2758-line copilot.service.ts into focused sub-services (#14): - copilot-schedule.service.ts (schedule/event tools) - copilot-reports.service.ts (reporting/analytics tools) - copilot-fleet.service.ts (vehicle/driver tools) - copilot-vip.service.ts (VIP management tools) - copilot.service.ts now thin orchestrator - Remove manual deletedAt: null from 50+ queries Frontend: - Create SortableHeader component for reusable table sorting (#16) - Create useListPage hook for shared search/filter/sort state (#16) - Update VipList, DriverList, EventList to use shared infrastructure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
VIP Coordinator Frontend
React 18 frontend with TypeScript, Tailwind CSS, Auth0, and TanStack Query.
Quick Start
# 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:
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
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
- User clicks "Sign In with Auth0" on login page
- Redirected to Auth0 hosted login
- After authentication, returned to
/callback - Token stored in localStorage
- Axios interceptor attaches token to all API requests
- Protected routes check authentication status
- 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
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
/loginand/callbackrequire authentication - Token refresh handled automatically by Auth0 SDK