kyle
3b0b1205df
## Signal Messaging Integration - Added SignalService for sending messages to drivers via Signal - SignalMessage model for tracking message history - Driver chat modal for real-time messaging - Send schedule via Signal (ICS + PDF attachments) ## AI Copilot - Natural language interface for VIP Coordinator - Capabilities: create VIPs, schedule events, assign drivers - Help and guidance for users - Floating copilot button in UI ## Theme System - Dark/light/system theme support - Color scheme selection (blue, green, purple, orange, red) - ThemeContext for global state - AppearanceMenu in header ## PDF Schedule Export - VIPSchedulePDF component for schedule generation - PDF settings (header, footer, branding) - Preview PDF in browser - Settings stored in database ## Database Migrations - add_signal_messages: SignalMessage model - add_pdf_settings: Settings model for PDF config - add_reminder_tracking: lastReminderSent for events - make_driver_phone_optional: phone field nullable ## Event Management - Event status service for automated updates - IN_PROGRESS/COMPLETED status tracking - Reminder tracking for notifications ## UI/UX Improvements - Driver schedule modal - Improved My Schedule page - Better error handling and loading states - Responsive design improvements ## Other Changes - AGENT_TEAM.md documentation - Seed data improvements - Ability factory updates - Driver profile page Co-Authored-By: Claude Opus 4.5 <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