Initial commit - Current state of vip-coordinator

frontend/src/App.css

@@ -0,0 +1,171 @@
+/* Modern App-specific styles using Tailwind utilities */
+
+/* Enhanced button styles */
+.btn-modern {
+  @apply px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
+}
+
+.btn-gradient-blue {
+  @apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white;
+}
+
+.btn-gradient-green {
+  @apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white;
+}
+
+.btn-gradient-purple {
+  @apply bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white;
+}
+
+.btn-gradient-amber {
+  @apply bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white;
+}
+
+/* Status badges */
+.status-badge {
+  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
+}
+
+.status-scheduled {
+  @apply bg-blue-100 text-blue-800 border border-blue-200;
+}
+
+.status-in-progress {
+  @apply bg-amber-100 text-amber-800 border border-amber-200;
+}
+
+.status-completed {
+  @apply bg-green-100 text-green-800 border border-green-200;
+}
+
+.status-cancelled {
+  @apply bg-red-100 text-red-800 border border-red-200;
+}
+
+/* Card enhancements */
+.card-modern {
+  @apply bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden backdrop-blur-sm;
+}
+
+.card-header {
+  @apply bg-gradient-to-r from-slate-50 to-slate-100 px-6 py-4 border-b border-slate-200/60;
+}
+
+.card-content {
+  @apply p-6;
+}
+
+/* Loading states */
+.loading-spinner {
+  @apply animate-spin rounded-full border-4 border-blue-600 border-t-transparent;
+}
+
+.loading-text {
+  @apply text-slate-600 animate-pulse;
+}
+
+.skeleton {
+  @apply animate-pulse bg-slate-200 rounded;
+}
+
+/* Form enhancements */
+.form-modern {
+  @apply space-y-6;
+}
+
+.form-group-modern {
+  @apply space-y-2;
+}
+
+.form-label-modern {
+  @apply block text-sm font-semibold text-slate-700;
+}
+
+.form-input-modern {
+  @apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
+}
+
+.form-select-modern {
+  @apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white transition-all duration-200;
+}
+
+/* Animation utilities */
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+  .mobile-stack {
+    @apply flex-col space-y-4 space-x-0;
+  }
+  
+  .mobile-full {
+    @apply w-full;
+  }
+  
+  .mobile-text-center {
+    @apply text-center;
+  }
+}
+
+/* Glass morphism effect */
+.glass {
+  @apply bg-white/80 backdrop-blur-lg border border-white/20;
+}
+
+.glass-dark {
+  @apply bg-slate-900/80 backdrop-blur-lg border border-slate-700/20;
+}
+
+/* Hover effects */
+.hover-lift {
+  @apply transition-transform duration-200 hover:-translate-y-1;
+}
+
+.hover-glow {
+  @apply transition-shadow duration-200 hover:shadow-2xl;
+}
+
+.hover-scale {
+  @apply transition-transform duration-200 hover:scale-105;
+}

frontend/src/App.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { useAuth0 } from '@auth0/auth0-react';
+import { apiCall } from './config/api';
+import VipList from './pages/VipList';
+import VipDetails from './pages/VipDetails';
+import DriverList from './pages/DriverList';
+import DriverDashboard from './pages/DriverDashboard';
+import Dashboard from './pages/Dashboard';
+import AdminDashboard from './pages/AdminDashboard';
+import UserManagement from './components/UserManagement';
+import Login from './components/Login';
+import './App.css';
+
+const AUTH0_AUDIENCE = import.meta.env.VITE_AUTH0_AUDIENCE;
+
+function App() {
+  const {
+    isLoading: authLoading,
+    isAuthenticated,
+    loginWithRedirect,
+    logout,
+    getAccessTokenSilently,
+    user: auth0User,
+    error: authError
+  } = useAuth0();
+
+  const [user, setUser] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [pendingApproval, setPendingApproval] = useState(false);
+
+  useEffect(() => {
+    const bootstrap = async () => {
+      if (!isAuthenticated) {
+        setUser(null);
+        setStatusMessage(null);
+        setPendingApproval(false);
+        setLoading(false);
+        return;
+      }
+
+      setLoading(true);
+      setPendingApproval(false);
+      setStatusMessage(null);
+
+      try {
+        const token = await getAccessTokenSilently({
+          authorizationParams: {
+            ...(AUTH0_AUDIENCE ? { audience: AUTH0_AUDIENCE } : {}),
+            scope: 'openid profile email'
+          }
+        });
+
+        localStorage.setItem('authToken', token);
+
+        const response = await apiCall('/auth/me', {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        });
+
+        if (response.status === 403) {
+          const data = await response.json();
+          setUser(null);
+          setPendingApproval(true);
+          setStatusMessage(data.message || 'Your account is pending administrator approval.');
+          return;
+        }
+
+        if (!response.ok) {
+          throw new Error(`Failed to load profile (${response.status})`);
+        }
+
+        const data = await response.json();
+        const userRecord = data.user || data;
+
+        const resolvedName =
+          userRecord.name ||
+          auth0User?.name ||
+          auth0User?.nickname ||
+          auth0User?.email ||
+          userRecord.email;
+
+        setUser({
+          ...userRecord,
+          name: resolvedName,
+          role: userRecord.role,
+          picture: userRecord.picture || auth0User?.picture
+        });
+      } catch (error) {
+        console.error('Authentication bootstrap failed:', error);
+        setUser(null);
+        setStatusMessage('Authentication failed. Please try signing in again.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (!authLoading) {
+      bootstrap();
+    }
+  }, [isAuthenticated, authLoading, getAccessTokenSilently, auth0User]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    logout({ logoutParams: { returnTo: window.location.origin } });
+  };
+
+  if (authLoading || loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex justify-center items-center">
+        <div className="bg-white rounded-2xl shadow-xl p-8 flex items-center space-x-4">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading VIP Coordinator...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (pendingApproval) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-amber-50 to-rose-50 flex justify-center items-center px-4">
+        <div className="bg-white border border-amber-200/60 rounded-2xl shadow-xl max-w-xl w-full p-8 space-y-4 text-center">
+          <div className="flex justify-center">
+            <div className="w-16 h-16 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-3xl">
+              ⏳
+            </div>
+          </div>
+          <h1 className="text-2xl font-bold text-slate-800">Awaiting Administrator Approval</h1>
+          <p className="text-slate-600">
+            {statusMessage ||
+              'Thanks for signing in. An administrator needs to approve your account before you can access the dashboard.'}
+          </p>
+          <button
+            onClick={handleLogout}
+            className="btn btn-secondary mt-4"
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const beginLogin = async () => {
+    try {
+      await loginWithRedirect({
+        authorizationParams: {
+          ...(AUTH0_AUDIENCE ? { audience: AUTH0_AUDIENCE } : {}),
+          scope: 'openid profile email',
+          redirect_uri: `${window.location.origin}/auth/callback`
+        }
+      });
+    } catch (error: any) {
+      console.error('Auth0 login failed:', error);
+      setStatusMessage(error?.message || 'Authentication failed. Please try again.');
+    }
+  };
+
+  if (!isAuthenticated || !user) {
+    return (
+      <Login
+        onLogin={beginLogin}
+        errorMessage={statusMessage || authError?.message}
+      />
+    );
+  }
+
+  const displayName =
+    (user.name && user.name.trim().length > 0)
+      ? user.name
+      : (user.email || 'User');
+  const displayInitial = displayName.trim().charAt(0).toUpperCase();
+  const userRole = user.role || 'user';
+
+  return (
+    <Router>
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
+        <nav className="bg-white/80 backdrop-blur-lg border-b border-slate-200/60 sticky top-0 z-50">
+          <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="flex justify-between items-center h-16">
+              <div className="flex items-center space-x-3">
+                <div className="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">VC</span>
+                </div>
+                <h1 className="text-xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+                  VIP Coordinator
+                </h1>
+              </div>
+
+              <div className="hidden md:flex items-center space-x-1">
+                <Link
+                  to="/"
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
+                >
+                  Dashboard
+                </Link>
+                <Link
+                  to="/vips"
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
+                >
+                  VIPs
+                </Link>
+                <Link
+                  to="/drivers"
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all duration-200"
+                >
+                  Drivers
+                </Link>
+                {userRole === 'administrator' && (
+                  <Link
+                    to="/admin"
+                    className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-all duration-200"
+                  >
+                    Admin
+                  </Link>
+                )}
+                {userRole === 'administrator' && (
+                  <Link
+                    to="/users"
+                    className="px-4 py-2 text-sm font-medium text-slate-700 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-all duration-200"
+                  >
+                    Users
+                  </Link>
+                )}
+              </div>
+
+              <div className="flex items-center space-x-4">
+                <div className="hidden sm:flex items-center space-x-3">
+                  <div className="w-8 h-8 bg-gradient-to-br from-slate-400 to-slate-600 rounded-full flex items-center justify-center overflow-hidden">
+                    {user.picture ? (
+                      <img src={user.picture} alt={displayName} className="w-8 h-8 object-cover" />
+                    ) : (
+                      <span className="text-white text-xs font-medium">
+                        {displayInitial}
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-sm">
+                    <div className="font-medium text-slate-900">{displayName}</div>
+                    <div className="text-slate-500 capitalize">{userRole}</div>
+                  </div>
+                </div>
+                <button
+                  onClick={handleLogout}
+                  className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                >
+                  Logout
+                </button>
+              </div>
+            </div>
+          </div>
+        </nav>
+
+        <main className="max-w-7xl mx-auto px-6 lg:px-8 py-8">
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/vips" element={<VipList />} />
+            <Route path="/vips/:id" element={<VipDetails />} />
+            <Route path="/drivers" element={<DriverList />} />
+            <Route path="/drivers/:driverId" element={<DriverDashboard />} />
+            <Route path="/admin" element={<AdminDashboard />} />
+            <Route path="/users" element={<UserManagement currentUser={user} />} />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

frontend/src/components/DriverForm.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+
+interface DriverFormData {
+  name: string;
+  phone: string;
+  vehicleCapacity: number;
+}
+
+interface DriverFormProps {
+  onSubmit: (driverData: DriverFormData) => void;
+  onCancel: () => void;
+}
+
+const DriverForm: React.FC<DriverFormProps> = ({ onSubmit, onCancel }) => {
+  const [formData, setFormData] = useState<DriverFormData>({
+    name: '',
+    phone: '',
+    vehicleCapacity: 4
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'number' || name === 'vehicleCapacity' ? parseInt(value) || 0 : value
+    }));
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        {/* Modal Header */}
+        <div className="modal-header">
+          <h2 className="text-2xl font-bold text-slate-800">Add New Driver</h2>
+          <p className="text-slate-600 mt-2">Enter driver contact information</p>
+        </div>
+
+        {/* Modal Body */}
+        <div className="modal-body">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="form-group">
+              <label htmlFor="name" className="form-label">Driver Name *</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="form-input"
+                placeholder="Enter driver's full name"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="phone" className="form-label">Phone Number *</label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone}
+                onChange={handleChange}
+                className="form-input"
+                placeholder="Enter phone number"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="vehicleCapacity" className="form-label">Vehicle Capacity *</label>
+              <select
+                id="vehicleCapacity"
+                name="vehicleCapacity"
+                value={formData.vehicleCapacity}
+                onChange={handleChange}
+                className="form-input"
+                required
+              >
+                <option value={2}>2 passengers (Sedan/Coupe)</option>
+                <option value={4}>4 passengers (Standard Car)</option>
+                <option value={6}>6 passengers (SUV/Van)</option>
+                <option value={8}>8 passengers (Large Van)</option>
+                <option value={12}>12 passengers (Mini Bus)</option>
+              </select>
+              <p className="text-sm text-slate-600 mt-1">
+                🚗 Select the maximum number of passengers this vehicle can accommodate
+              </p>
+            </div>
+
+            <div className="form-actions">
+              <button type="button" className="btn btn-secondary" onClick={onCancel}>
+                Cancel
+              </button>
+              <button type="submit" className="btn btn-primary">
+                Add Driver
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DriverForm;

frontend/src/components/DriverSelector.tsx

@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react';
+import { apiCall } from '../config/api';
+
+interface DriverAvailability {
+  driverId: string;
+  driverName: string;
+  vehicleCapacity: number;
+  status: 'available' | 'scheduled' | 'overlapping' | 'tight_turnaround';
+  assignmentCount: number;
+  conflicts: ConflictInfo[];
+  currentAssignments: ScheduleEvent[];
+}
+
+interface ConflictInfo {
+  type: 'overlap' | 'tight_turnaround' | 'back_to_back';
+  severity: 'low' | 'medium' | 'high';
+  message: string;
+  conflictingEvent: ScheduleEvent;
+  timeDifference?: number;
+}
+
+interface ScheduleEvent {
+  id: string;
+  title: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  assignedDriverId?: string;
+  vipId: string;
+  vipName: string;
+}
+
+interface DriverSelectorProps {
+  selectedDriverId: string;
+  onDriverSelect: (driverId: string) => void;
+  eventTime: {
+    startTime: string;
+    endTime: string;
+    location: string;
+  };
+}
+
+const DriverSelector: React.FC<DriverSelectorProps> = ({ 
+  selectedDriverId, 
+  onDriverSelect, 
+  eventTime 
+}) => {
+  const [availability, setAvailability] = useState<DriverAvailability[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showConflictModal, setShowConflictModal] = useState(false);
+  const [selectedDriver, setSelectedDriver] = useState<DriverAvailability | null>(null);
+
+  useEffect(() => {
+    if (eventTime.startTime && eventTime.endTime) {
+      checkDriverAvailability();
+    }
+  }, [eventTime.startTime, eventTime.endTime, eventTime.location]);
+
+  const checkDriverAvailability = async () => {
+    setLoading(true);
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall('/api/drivers/availability', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(eventTime),
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setAvailability(data);
+      }
+    } catch (error) {
+      console.error('Error checking driver availability:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'available': return '🟢';
+      case 'scheduled': return '🟡';
+      case 'tight_turnaround': return '⚡';
+      case 'overlapping': return '🔴';
+      default: return '⚪';
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'available': return 'bg-green-50 border-green-200 text-green-800';
+      case 'scheduled': return 'bg-amber-50 border-amber-200 text-amber-800';
+      case 'tight_turnaround': return 'bg-orange-50 border-orange-200 text-orange-800';
+      case 'overlapping': return 'bg-red-50 border-red-200 text-red-800';
+      default: return 'bg-slate-50 border-slate-200 text-slate-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'available': return 'Available';
+      case 'scheduled': return 'Busy';
+      case 'tight_turnaround': return 'Tight Schedule';
+      case 'overlapping': return 'Conflict';
+      default: return 'Unknown';
+    }
+  };
+
+  const handleDriverClick = (driver: DriverAvailability) => {
+    if (driver.conflicts.length > 0) {
+      setSelectedDriver(driver);
+      setShowConflictModal(true);
+    } else {
+      onDriverSelect(driver.driverId);
+    }
+  };
+
+  const confirmDriverAssignment = () => {
+    if (selectedDriver) {
+      onDriverSelect(selectedDriver.driverId);
+      setShowConflictModal(false);
+      setSelectedDriver(null);
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+        <div className="flex items-center gap-3">
+          <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-slate-700 font-medium">Checking driver availability...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+      <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+        🚗 Assign Driver
+      </h3>
+      
+      {availability.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center mx-auto mb-3">
+            <span className="text-xl">🚗</span>
+          </div>
+          <p className="text-slate-500 font-medium">No drivers available</p>
+          <p className="text-slate-400 text-sm">Check the time and try again</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {availability.map((driver) => (
+            <div
+              key={driver.driverId}
+              className={`relative rounded-xl border-2 p-4 cursor-pointer transition-all duration-200 hover:shadow-lg ${
+                selectedDriverId === driver.driverId 
+                  ? 'border-blue-500 bg-blue-50 shadow-lg' 
+                  : 'border-slate-200 bg-white hover:border-slate-300'
+              }`}
+              onClick={() => handleDriverClick(driver)}
+            >
+              {selectedDriverId === driver.driverId && (
+                <div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                  <span className="text-white text-xs font-bold">✓</span>
+                </div>
+              )}
+              
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <span className="text-xl">{getStatusIcon(driver.status)}</span>
+                    <div>
+                      <h4 className="font-bold text-slate-900">{driver.driverName}</h4>
+                      <div className="flex items-center gap-2 mt-1">
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium border ${getStatusColor(driver.status)}`}>
+                          {getStatusText(driver.status)}
+                        </span>
+                        <span className="bg-slate-100 text-slate-700 px-2 py-1 rounded-full text-xs font-medium">
+                          🚗 {driver.vehicleCapacity} seats
+                        </span>
+                        <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
+                          {driver.assignmentCount} assignments
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  {driver.conflicts.length > 0 && (
+                    <div className="space-y-2 mb-3">
+                      {driver.conflicts.map((conflict, index) => (
+                        <div key={index} className={`p-3 rounded-lg border ${
+                          conflict.severity === 'high' 
+                            ? 'bg-red-50 border-red-200' 
+                            : 'bg-amber-50 border-amber-200'
+                        }`}>
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-sm">
+                              {conflict.type === 'overlap' ? '🔴' : '⚡'}
+                            </span>
+                            <span className={`text-sm font-medium ${
+                              conflict.severity === 'high' ? 'text-red-800' : 'text-amber-800'
+                            }`}>
+                              {conflict.type === 'overlap' ? 'Time Overlap' : 'Tight Turnaround'}
+                            </span>
+                          </div>
+                          <p className={`text-sm ${
+                            conflict.severity === 'high' ? 'text-red-700' : 'text-amber-700'
+                          }`}>
+                            {conflict.message}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  
+                  {driver.currentAssignments.length > 0 && driver.conflicts.length === 0 && (
+                    <div className="bg-slate-100 rounded-lg p-3">
+                      <p className="text-sm font-medium text-slate-700 mb-1">Next Assignment:</p>
+                      <p className="text-sm text-slate-600">
+                        {driver.currentAssignments[0]?.title} at {formatTime(driver.currentAssignments[0]?.startTime)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+                
+                {driver.conflicts.length > 0 && (
+                  <div className="ml-4">
+                    <span className="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-xs font-bold">
+                      ⚠️ CONFLICTS
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+          
+          {selectedDriverId && (
+            <button
+              onClick={() => onDriverSelect('')}
+              className="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-3 rounded-lg font-medium transition-colors border border-slate-200"
+            >
+              ❌ Clear Driver Assignment
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Conflict Resolution Modal */}
+      {showConflictModal && selectedDriver && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-2xl border border-slate-200/60 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div className="bg-gradient-to-r from-amber-50 to-orange-50 px-8 py-6 border-b border-slate-200/60">
+              <h3 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+                ⚠️ Driver Assignment Conflict
+              </h3>
+              <p className="text-slate-600 mt-1">
+                <strong>{selectedDriver.driverName}</strong> has scheduling conflicts that need your attention
+              </p>
+            </div>
+            
+            <div className="p-8 space-y-6">
+              {/* Driver Info */}
+              <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
+                <div className="flex items-center gap-3 mb-2">
+                  <span className="text-2xl">🚗</span>
+                  <div>
+                    <h4 className="font-bold text-slate-900">{selectedDriver.driverName}</h4>
+                    <p className="text-sm text-slate-600">
+                      Vehicle Capacity: {selectedDriver.vehicleCapacity} passengers • 
+                      Current Assignments: {selectedDriver.assignmentCount}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Conflicts */}
+              <div>
+                <h4 className="font-bold text-slate-800 mb-3">Scheduling Conflicts:</h4>
+                <div className="space-y-3">
+                  {selectedDriver.conflicts.map((conflict, index) => (
+                    <div key={index} className={`p-4 rounded-xl border ${
+                      conflict.severity === 'high' 
+                        ? 'bg-red-50 border-red-200' 
+                        : 'bg-amber-50 border-amber-200'
+                    }`}>
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className="text-lg">
+                          {conflict.type === 'overlap' ? '🔴' : '⚡'}
+                        </span>
+                        <span className={`font-bold ${
+                          conflict.severity === 'high' ? 'text-red-800' : 'text-amber-800'
+                        }`}>
+                          {conflict.type === 'overlap' ? 'Time Overlap' : 'Tight Turnaround'}
+                        </span>
+                      </div>
+                      <p className={`mb-2 ${
+                        conflict.severity === 'high' ? 'text-red-700' : 'text-amber-700'
+                      }`}>
+                        {conflict.message}
+                      </p>
+                      <div className="text-sm text-slate-600 bg-white/50 rounded-lg p-2">
+                        <strong>Conflicting event:</strong> {conflict.conflictingEvent.title}<br/>
+                        <strong>Time:</strong> {formatTime(conflict.conflictingEvent.startTime)} - {formatTime(conflict.conflictingEvent.endTime)}<br/>
+                        <strong>VIP:</strong> {conflict.conflictingEvent.vipName}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Current Schedule */}
+              <div>
+                <h4 className="font-bold text-slate-800 mb-3">Current Schedule:</h4>
+                <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
+                  {selectedDriver.currentAssignments.length === 0 ? (
+                    <p className="text-slate-500 text-sm">No current assignments</p>
+                  ) : (
+                    <div className="space-y-2">
+                      {selectedDriver.currentAssignments.map((assignment, index) => (
+                        <div key={index} className="flex items-center gap-2 text-sm">
+                          <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
+                          <span className="font-medium">{assignment.title}</span>
+                          <span className="text-slate-500">
+                            ({formatTime(assignment.startTime)} - {formatTime(assignment.endTime)})
+                          </span>
+                          <span className="text-slate-400">• {assignment.vipName}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-4 p-8 border-t border-slate-200">
+              <button 
+                className="px-6 py-3 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors font-medium"
+                onClick={() => setShowConflictModal(false)}
+              >
+                Choose Different Driver
+              </button>
+              <button 
+                className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                onClick={confirmDriverAssignment}
+              >
+                ⚠️ Assign Anyway
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DriverSelector;

frontend/src/components/EditDriverForm.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+  currentLocation: { lat: number; lng: number };
+  assignedVipIds: string[];
+  vehicleCapacity?: number;
+}
+
+interface EditDriverFormProps {
+  driver: Driver;
+  onSubmit: (driverData: any) => void;
+  onCancel: () => void;
+}
+
+const EditDriverForm: React.FC<EditDriverFormProps> = ({ driver, onSubmit, onCancel }) => {
+  const [formData, setFormData] = useState({
+    name: driver.name,
+    phone: driver.phone,
+    vehicleCapacity: driver.vehicleCapacity || 4,
+    currentLocation: {
+      lat: driver.currentLocation.lat,
+      lng: driver.currentLocation.lng
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit({
+      ...formData,
+      id: driver.id
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    
+    if (name === 'lat' || name === 'lng') {
+      setFormData(prev => ({
+        ...prev,
+        currentLocation: {
+          ...prev.currentLocation,
+          [name]: parseFloat(value) || 0
+        }
+      }));
+    } else if (name === 'vehicleCapacity') {
+      setFormData(prev => ({ ...prev, [name]: parseInt(value) || 0 }));
+    } else {
+      setFormData(prev => ({ ...prev, [name]: value }));
+    }
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        {/* Modal Header */}
+        <div className="modal-header">
+          <h2 className="text-2xl font-bold text-slate-800">Edit Driver</h2>
+          <p className="text-slate-600 mt-2">Update driver information for {driver.name}</p>
+        </div>
+
+        {/* Modal Body */}
+        <div className="modal-body">
+          <form onSubmit={handleSubmit} className="space-y-8">
+            {/* Basic Information Section */}
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Basic Information</h3>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="form-group">
+                  <label htmlFor="name" className="form-label">Driver Name *</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter driver's full name"
+                    required
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="phone" className="form-label">Phone Number *</label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter phone number"
+                    required
+                  />
+                </div>
+              </div>
+              
+              <div className="form-group">
+                <label htmlFor="vehicleCapacity" className="form-label">Vehicle Capacity *</label>
+                <select
+                  id="vehicleCapacity"
+                  name="vehicleCapacity"
+                  value={formData.vehicleCapacity}
+                  onChange={handleChange}
+                  className="form-input"
+                  required
+                >
+                  <option value={2}>2 passengers (Sedan/Coupe)</option>
+                  <option value={4}>4 passengers (Standard Car)</option>
+                  <option value={6}>6 passengers (SUV/Van)</option>
+                  <option value={8}>8 passengers (Large Van)</option>
+                  <option value={12}>12 passengers (Mini Bus)</option>
+                </select>
+                <p className="text-sm text-slate-600 mt-1">
+                  🚗 Select the maximum number of passengers this vehicle can accommodate
+                </p>
+              </div>
+            </div>
+
+            {/* Location Section */}
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Current Location</h3>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="form-group">
+                  <label htmlFor="lat" className="form-label">Latitude *</label>
+                  <input
+                    type="number"
+                    id="lat"
+                    name="lat"
+                    value={formData.currentLocation.lat}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter latitude"
+                    step="any"
+                    required
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="lng" className="form-label">Longitude *</label>
+                  <input
+                    type="number"
+                    id="lng"
+                    name="lng"
+                    value={formData.currentLocation.lng}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter longitude"
+                    step="any"
+                    required
+                  />
+                </div>
+              </div>
+              
+              <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                <p className="text-sm text-blue-700">
+                  <strong>Current coordinates:</strong> {formData.currentLocation.lat.toFixed(6)}, {formData.currentLocation.lng.toFixed(6)}
+                </p>
+                <p className="text-xs text-blue-600 mt-1">
+                  You can use GPS coordinates or get them from a mapping service
+                </p>
+              </div>
+            </div>
+
+            <div className="form-actions">
+              <button type="button" className="btn btn-secondary" onClick={onCancel}>
+                Cancel
+              </button>
+              <button type="submit" className="btn btn-primary">
+                Update Driver
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditDriverForm;

frontend/src/components/EditVipForm.tsx

@@ -0,0 +1,550 @@
+import React, { useState } from 'react';
+
+interface Flight {
+  flightNumber: string;
+  flightDate: string;
+  segment: number;
+  validated?: boolean;
+  validationData?: any;
+}
+
+interface VipData {
+  id: string;
+  name: string;
+  organization: string;
+  transportMode: 'flight' | 'self-driving';
+  flightNumber?: string; // Legacy
+  flightDate?: string; // Legacy
+  flights?: Flight[]; // New
+  expectedArrival?: string;
+  arrivalTime?: string;
+  needsAirportPickup?: boolean;
+  needsVenueTransport: boolean;
+  notes: string;
+}
+
+interface EditVipFormProps {
+  vip: VipData;
+  onSubmit: (vipData: VipData) => void;
+  onCancel: () => void;
+}
+
+const EditVipForm: React.FC<EditVipFormProps> = ({ vip, onSubmit, onCancel }) => {
+  // Convert legacy single flight to new format if needed
+  const initialFlights = vip.flights || (vip.flightNumber ? [{
+    flightNumber: vip.flightNumber,
+    flightDate: vip.flightDate || '',
+    segment: 1
+  }] : [{ flightNumber: '', flightDate: '', segment: 1 }]);
+
+  const [formData, setFormData] = useState<VipData>({
+    id: vip.id,
+    name: vip.name,
+    organization: vip.organization,
+    transportMode: vip.transportMode || 'flight',
+    flights: initialFlights,
+    expectedArrival: vip.expectedArrival ? vip.expectedArrival.slice(0, 16) : '',
+    arrivalTime: vip.arrivalTime ? vip.arrivalTime.slice(0, 16) : '',
+    needsAirportPickup: vip.needsAirportPickup !== false,
+    needsVenueTransport: vip.needsVenueTransport !== false,
+    notes: vip.notes || ''
+  });
+
+  const [flightValidating, setFlightValidating] = useState<{ [key: number]: boolean }>({});
+  const [flightErrors, setFlightErrors] = useState<{ [key: number]: string }>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    try {
+      // Only include flights with flight numbers
+      const validFlights = formData.flights?.filter(f => f.flightNumber) || [];
+      
+      await onSubmit({
+        ...formData,
+        flights: validFlights.length > 0 ? validFlights : undefined
+      });
+    } catch (error) {
+      console.error('Error updating VIP:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      setFormData(prev => ({
+        ...prev,
+        [name]: checked
+      }));
+    } else {
+      setFormData(prev => ({
+        ...prev,
+        [name]: value
+      }));
+    }
+  };
+
+  const handleTransportModeChange = (mode: 'flight' | 'self-driving') => {
+    setFormData(prev => ({
+      ...prev,
+      transportMode: mode,
+      flights: mode === 'flight' ? (prev.flights || [{ flightNumber: '', flightDate: '', segment: 1 }]) : undefined,
+      expectedArrival: mode === 'self-driving' ? prev.expectedArrival : '',
+      needsAirportPickup: mode === 'flight' ? true : false
+    }));
+    
+    // Clear flight errors when switching away from flight mode
+    if (mode !== 'flight') {
+      setFlightErrors({});
+    }
+  };
+
+  const handleFlightChange = (index: number, field: 'flightNumber' | 'flightDate', value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      flights: prev.flights?.map((flight, i) => 
+        i === index ? { ...flight, [field]: value, validated: false } : flight
+      ) || []
+    }));
+    
+    // Clear validation for this flight when it changes
+    setFlightErrors(prev => ({ ...prev, [index]: '' }));
+  };
+
+  const addConnectingFlight = () => {
+    const currentFlights = formData.flights || [];
+    if (currentFlights.length < 3) {
+      setFormData(prev => ({
+        ...prev,
+        flights: [...currentFlights, { 
+          flightNumber: '', 
+          flightDate: currentFlights[currentFlights.length - 1]?.flightDate || '', 
+          segment: currentFlights.length + 1 
+        }]
+      }));
+    }
+  };
+
+  const removeConnectingFlight = (index: number) => {
+    setFormData(prev => ({
+      ...prev,
+      flights: prev.flights?.filter((_, i) => i !== index).map((flight, i) => ({
+        ...flight,
+        segment: i + 1
+      })) || []
+    }));
+    
+    // Clear errors for removed flight
+    setFlightErrors(prev => {
+      const newErrors = { ...prev };
+      delete newErrors[index];
+      return newErrors;
+    });
+  };
+
+  const validateFlight = async (index: number) => {
+    const flight = formData.flights?.[index];
+    if (!flight || !flight.flightNumber || !flight.flightDate) {
+      setFlightErrors(prev => ({ ...prev, [index]: 'Please enter flight number and date' }));
+      return;
+    }
+    
+    setFlightValidating(prev => ({ ...prev, [index]: true }));
+    setFlightErrors(prev => ({ ...prev, [index]: '' }));
+    
+    try {
+      const url = `/api/flights/${flight.flightNumber}?date=${flight.flightDate}`;
+      const response = await fetch(url);
+      
+      if (response.ok) {
+        const data = await response.json();
+        
+        // Update flight with validation data
+        setFormData(prev => ({
+          ...prev,
+          flights: prev.flights?.map((f, i) => 
+            i === index ? { ...f, validated: true, validationData: data } : f
+          ) || []
+        }));
+        
+        setFlightErrors(prev => ({ ...prev, [index]: '' }));
+      } else {
+        const errorData = await response.json();
+        setFlightErrors(prev => ({ 
+          ...prev, 
+          [index]: errorData.error || 'Invalid flight number' 
+        }));
+      }
+    } catch (error) {
+      setFlightErrors(prev => ({ 
+        ...prev, 
+        [index]: 'Error validating flight' 
+      }));
+    } finally {
+      setFlightValidating(prev => ({ ...prev, [index]: false }));
+    }
+  };
+
+  const formatFlightTime = (timeString: string) => {
+    if (!timeString) return '';
+    return new Date(timeString).toLocaleString([], {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200/60 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
+            ✏️ Edit VIP: {vip.name}
+          </h2>
+          <p className="text-slate-600 mt-1">Update VIP information and travel arrangements</p>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="p-8 space-y-8">
+          {/* Basic Information */}
+          <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+              👤 Basic Information
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-2">
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                  placeholder="Enter full name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="organization" className="block text-sm font-medium text-slate-700 mb-2">
+                  Organization
+                </label>
+                <input
+                  type="text"
+                  id="organization"
+                  name="organization"
+                  value={formData.organization}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                  placeholder="Enter organization"
+                  required
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Transportation Mode */}
+          <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+              🚗 Transportation
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-3">
+                  How are you arriving?
+                </label>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <label className={`relative flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all duration-200 ${
+                    formData.transportMode === 'flight' 
+                      ? 'border-blue-500 bg-blue-50' 
+                      : 'border-slate-300 bg-white hover:border-slate-400'
+                  }`}>
+                    <input
+                      type="radio"
+                      name="transportMode"
+                      value="flight"
+                      checked={formData.transportMode === 'flight'}
+                      onChange={() => handleTransportModeChange('flight')}
+                      className="sr-only"
+                    />
+                    <div className="flex items-center gap-3">
+                      <span className="text-2xl">✈️</span>
+                      <div>
+                        <div className="font-semibold text-slate-900">Arriving by Flight</div>
+                        <div className="text-sm text-slate-600">Commercial airline travel</div>
+                      </div>
+                    </div>
+                    {formData.transportMode === 'flight' && (
+                      <div className="absolute top-2 right-2 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
+                        <span className="text-white text-xs">✓</span>
+                      </div>
+                    )}
+                  </label>
+
+                  <label className={`relative flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all duration-200 ${
+                    formData.transportMode === 'self-driving' 
+                      ? 'border-green-500 bg-green-50' 
+                      : 'border-slate-300 bg-white hover:border-slate-400'
+                  }`}>
+                    <input
+                      type="radio"
+                      name="transportMode"
+                      value="self-driving"
+                      checked={formData.transportMode === 'self-driving'}
+                      onChange={() => handleTransportModeChange('self-driving')}
+                      className="sr-only"
+                    />
+                    <div className="flex items-center gap-3">
+                      <span className="text-2xl">🚗</span>
+                      <div>
+                        <div className="font-semibold text-slate-900">Self-Driving</div>
+                        <div className="text-sm text-slate-600">Personal vehicle</div>
+                      </div>
+                    </div>
+                    {formData.transportMode === 'self-driving' && (
+                      <div className="absolute top-2 right-2 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
+                        <span className="text-white text-xs">✓</span>
+                      </div>
+                    )}
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Flight Information */}
+          {formData.transportMode === 'flight' && formData.flights && (
+            <div className="bg-blue-50 rounded-xl p-6 border border-blue-200/60">
+              <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+                ✈️ Flight Information
+              </h3>
+              <div className="space-y-6">
+                {formData.flights.map((flight, index) => (
+                  <div key={index} className="bg-white rounded-xl border border-blue-200 p-6">
+                    <div className="flex justify-between items-center mb-4">
+                      <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+                        {index === 0 ? (
+                          <>✈️ Primary Flight</>
+                        ) : (
+                          <>🔄 Connecting Flight {index}</>
+                        )}
+                      </h4>
+                      {index > 0 && (
+                        <button
+                          type="button"
+                          onClick={() => removeConnectingFlight(index)}
+                          className="text-red-600 hover:text-red-700 font-medium text-sm flex items-center gap-1"
+                        >
+                          ✕ Remove
+                        </button>
+                      )}
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                      <div>
+                        <label htmlFor={`flightNumber-${index}`} className="block text-sm font-medium text-slate-700 mb-2">
+                          Flight Number
+                        </label>
+                        <input
+                          type="text"
+                          id={`flightNumber-${index}`}
+                          value={flight.flightNumber}
+                          onChange={(e) => handleFlightChange(index, 'flightNumber', e.target.value)}
+                          className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                          placeholder="e.g., AA123"
+                          required={index === 0}
+                        />
+                      </div>
+
+                      <div>
+                        <label htmlFor={`flightDate-${index}`} className="block text-sm font-medium text-slate-700 mb-2">
+                          Flight Date
+                        </label>
+                        <input
+                          type="date"
+                          id={`flightDate-${index}`}
+                          value={flight.flightDate}
+                          onChange={(e) => handleFlightChange(index, 'flightDate', e.target.value)}
+                          className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                          required={index === 0}
+                          min={new Date().toISOString().split('T')[0]}
+                        />
+                      </div>
+                    </div>
+
+                    <button
+                      type="button"
+                      onClick={() => validateFlight(index)}
+                      disabled={flightValidating[index] || !flight.flightNumber || !flight.flightDate}
+                      className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 disabled:from-slate-400 disabled:to-slate-500 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:cursor-not-allowed"
+                    >
+                      {flightValidating[index] ? (
+                        <span className="flex items-center justify-center gap-2">
+                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                          🔍 Validating...
+                        </span>
+                      ) : (
+                        '🔍 Validate Flight'
+                      )}
+                    </button>
+
+                    {/* Flight Validation Results */}
+                    {flightErrors[index] && (
+                      <div className="mt-4 bg-red-50 border border-red-200 rounded-xl p-4">
+                        <div className="text-red-800 font-medium flex items-center gap-2">
+                          ❌ {flightErrors[index]}
+                        </div>
+                      </div>
+                    )}
+
+                    {flight.validated && flight.validationData && (
+                      <div className="mt-4 bg-green-50 border border-green-200 rounded-xl p-4">
+                        <div className="text-green-800 font-medium flex items-center gap-2 mb-2">
+                          ✅ Valid Flight: {flight.validationData.airline || 'Flight'} - {flight.validationData.departure?.airport} → {flight.validationData.arrival?.airport}
+                        </div>
+                        {flight.validationData.flightDate !== flight.flightDate && (
+                          <div className="text-green-700 text-sm">
+                            ℹ️ Live tracking starts 4 hours before departure on {new Date(flight.flightDate).toLocaleDateString()}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {formData.flights.length < 3 && (
+                  <button
+                    type="button"
+                    onClick={addConnectingFlight}
+                    className="w-full bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                  >
+                    + Add Connecting Flight
+                  </button>
+                )}
+
+                <div className="bg-white rounded-xl border border-blue-200 p-4">
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      name="needsAirportPickup"
+                      checked={formData.needsAirportPickup || false}
+                      onChange={handleChange}
+                      className="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
+                    />
+                    <div>
+                      <div className="font-medium text-slate-900">✅ Needs Airport Pickup</div>
+                      <div className="text-sm text-slate-600">Pickup from final destination airport</div>
+                    </div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Self-Driving Information */}
+          {formData.transportMode === 'self-driving' && (
+            <div className="bg-green-50 rounded-xl p-6 border border-green-200/60">
+              <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+                🚗 Arrival Information
+              </h3>
+              <div>
+                <label htmlFor="expectedArrival" className="block text-sm font-medium text-slate-700 mb-2">
+                  Expected Arrival Time
+                </label>
+                <input
+                  type="datetime-local"
+                  id="expectedArrival"
+                  name="expectedArrival"
+                  value={formData.expectedArrival}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
+                  required
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Transportation Options */}
+          <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+              🚐 Transportation Options
+            </h3>
+            <div className="bg-white rounded-xl border border-slate-200 p-4">
+              <label className="flex items-center gap-3 cursor-pointer">
+                <input
+                  type="checkbox"
+                  name="needsVenueTransport"
+                  checked={formData.needsVenueTransport}
+                  onChange={handleChange}
+                  className="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
+                />
+                <div>
+                  <div className="font-medium text-slate-900">🚐 Needs Transportation Between Venues</div>
+                  <div className="text-sm text-slate-600">Check this if the VIP needs rides between different event locations</div>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          {/* Additional Notes */}
+          <div className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+              📝 Additional Notes
+            </h3>
+            <div>
+              <label htmlFor="notes" className="block text-sm font-medium text-slate-700 mb-2">
+                Special Requirements
+              </label>
+              <textarea
+                id="notes"
+                name="notes"
+                value={formData.notes}
+                onChange={handleChange}
+                rows={4}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                placeholder="Special requirements, dietary restrictions, accessibility needs, security details, etc."
+              />
+            </div>
+          </div>
+
+          {/* Form Actions */}
+          <div className="flex justify-end gap-4 pt-6 border-t border-slate-200">
+            <button 
+              type="button" 
+              className="px-6 py-3 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors font-medium" 
+              onClick={onCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+            <button 
+              type="submit" 
+              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed" 
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? (
+                <span className="flex items-center gap-2">
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                  Updating VIP...
+                </span>
+              ) : (
+                '✏️ Update VIP'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditVipForm;

frontend/src/components/FlightStatus.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+
+interface FlightData {
+  flightNumber: string;
+  status: string;
+  departure: {
+    airport: string;
+    scheduled: string;
+    estimated?: string;
+    actual?: string;
+  };
+  arrival: {
+    airport: string;
+    scheduled: string;
+    estimated?: string;
+    actual?: string;
+  };
+  delay?: number;
+  gate?: string;
+}
+
+interface FlightStatusProps {
+  flightNumber: string;
+  flightDate?: string;
+}
+
+const FlightStatus: React.FC<FlightStatusProps> = ({ flightNumber, flightDate }) => {
+  const [flightData, setFlightData] = useState<FlightData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchFlightData = async () => {
+      try {
+        setLoading(true);
+        const url = flightDate 
+          ? `/api/flights/${flightNumber}?date=${flightDate}`
+          : `/api/flights/${flightNumber}`;
+        const response = await fetch(url);
+        
+        if (response.ok) {
+          const data = await response.json();
+          setFlightData(data);
+          setError(null);
+        } else {
+          setError('Flight not found');
+        }
+      } catch (err) {
+        setError('Failed to fetch flight data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (flightNumber) {
+      fetchFlightData();
+      
+      // Auto-refresh every 5 minutes
+      const interval = setInterval(fetchFlightData, 5 * 60 * 1000);
+      return () => clearInterval(interval);
+    }
+  }, [flightNumber, flightDate]);
+
+  if (loading) {
+    return <div className="flight-status loading">Loading flight data...</div>;
+  }
+
+  if (error) {
+    return <div className="flight-status error">⚠️ {error}</div>;
+  }
+
+  if (!flightData) {
+    return null;
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'active': return '#2ecc71';
+      case 'scheduled': return '#3498db';
+      case 'delayed': return '#f39c12';
+      case 'cancelled': return '#e74c3c';
+      default: return '#95a5a6';
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <div className="flight-status">
+      <div className="flight-header">
+        <h4>✈️ Flight {flightData.flightNumber}</h4>
+        <span 
+          className="flight-status-badge"
+          style={{ 
+            backgroundColor: getStatusColor(flightData.status),
+            color: 'white',
+            padding: '0.25rem 0.5rem',
+            borderRadius: '4px',
+            fontSize: '0.8rem',
+            textTransform: 'uppercase'
+          }}
+        >
+          {flightData.status}
+        </span>
+      </div>
+
+      <div className="flight-details">
+        <div className="flight-route">
+          <div className="departure">
+            <strong>{flightData.departure.airport}</strong>
+            <div>Scheduled: {formatTime(flightData.departure.scheduled)}</div>
+            {flightData.departure.estimated && (
+              <div>Estimated: {formatTime(flightData.departure.estimated)}</div>
+            )}
+          </div>
+          
+          <div className="route-arrow">→</div>
+          
+          <div className="arrival">
+            <strong>{flightData.arrival.airport}</strong>
+            <div>Scheduled: {formatTime(flightData.arrival.scheduled)}</div>
+            {flightData.arrival.estimated && (
+              <div>Estimated: {formatTime(flightData.arrival.estimated)}</div>
+            )}
+          </div>
+        </div>
+
+        {flightData.delay && flightData.delay > 0 && (
+          <div className="delay-info" style={{ color: '#f39c12', marginTop: '0.5rem' }}>
+            ⚠️ Delayed by {flightData.delay} minutes
+          </div>
+        )}
+
+        {flightData.gate && (
+          <div className="gate-info" style={{ marginTop: '0.5rem' }}>
+            🚪 Gate: {flightData.gate}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FlightStatus;

frontend/src/components/GanttChart.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+
+interface GanttEvent {
+  id: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  type: 'transport' | 'meeting' | 'event' | 'meal' | 'accommodation';
+  vipName: string;
+  location: string;
+  status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+}
+
+interface GanttChartProps {
+  events: GanttEvent[];
+  driverName: string;
+}
+
+const GanttChart: React.FC<GanttChartProps> = ({ events, driverName }) => {
+  // Helper functions
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'transport': return '#3498db';
+      case 'meeting': return '#9b59b6';
+      case 'event': return '#e74c3c';
+      case 'meal': return '#f39c12';
+      case 'accommodation': return '#2ecc71';
+      default: return '#95a5a6';
+    }
+  };
+
+  const getStatusOpacity = (status: string) => {
+    switch (status) {
+      case 'completed': return 0.5;
+      case 'cancelled': return 0.3;
+      case 'in-progress': return 1;
+      case 'scheduled': return 0.8;
+      default: return 0.8;
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'transport': return '🚗';
+      case 'meeting': return '🤝';
+      case 'event': return '🎉';
+      case 'meal': return '🍽️';
+      case 'accommodation': return '🏨';
+      default: return '📅';
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  // Calculate time range for the chart
+  const getTimeRange = () => {
+    if (events.length === 0) return { start: new Date(), end: new Date() };
+    
+    const times = events.flatMap(event => [
+      new Date(event.startTime),
+      new Date(event.endTime)
+    ]);
+    
+    const minTime = new Date(Math.min(...times.map(t => t.getTime())));
+    const maxTime = new Date(Math.max(...times.map(t => t.getTime())));
+    
+    // Add padding (30 minutes before and after)
+    const startTime = new Date(minTime.getTime() - 30 * 60 * 1000);
+    const endTime = new Date(maxTime.getTime() + 30 * 60 * 1000);
+    
+    return { start: startTime, end: endTime };
+  };
+
+  // Calculate position and width for each event
+  const calculateEventPosition = (event: GanttEvent, timeRange: { start: Date; end: Date }) => {
+    const totalDuration = timeRange.end.getTime() - timeRange.start.getTime();
+    const eventStart = new Date(event.startTime);
+    const eventEnd = new Date(event.endTime);
+    
+    const startOffset = eventStart.getTime() - timeRange.start.getTime();
+    const eventDuration = eventEnd.getTime() - eventStart.getTime();
+    
+    const leftPercent = (startOffset / totalDuration) * 100;
+    const widthPercent = (eventDuration / totalDuration) * 100;
+    
+    return { left: leftPercent, width: widthPercent };
+  };
+
+  // Generate time labels
+  const generateTimeLabels = (timeRange: { start: Date; end: Date }) => {
+    const labels = [];
+    const current = new Date(timeRange.start);
+    current.setMinutes(0, 0, 0); // Round to nearest hour
+    
+    while (current <= timeRange.end) {
+      labels.push(new Date(current));
+      current.setHours(current.getHours() + 1);
+    }
+    
+    return labels;
+  };
+
+  if (events.length === 0) {
+    return (
+      <div className="card">
+        <h3>📊 Schedule Gantt Chart</h3>
+        <p>No events to display in Gantt chart.</p>
+      </div>
+    );
+  }
+
+  const timeRange = getTimeRange();
+  const timeLabels = generateTimeLabels(timeRange);
+  const totalDuration = timeRange.end.getTime() - timeRange.start.getTime();
+
+  return (
+    <div className="card">
+      <h3>📊 Schedule Gantt Chart - {driverName}</h3>
+      <div style={{ marginBottom: '1rem', fontSize: '0.9rem', color: '#666' }}>
+        Timeline: {timeRange.start.toLocaleDateString()} {formatTime(timeRange.start.toISOString())} - {formatTime(timeRange.end.toISOString())}
+      </div>
+      
+      <div style={{ 
+        border: '1px solid #ddd', 
+        borderRadius: '6px', 
+        overflow: 'hidden',
+        backgroundColor: '#fff'
+      }}>
+        {/* Time axis */}
+        <div style={{ 
+          display: 'flex', 
+          borderBottom: '2px solid #333',
+          backgroundColor: '#f8f9fa',
+          position: 'relative',
+          height: '40px',
+          alignItems: 'center'
+        }}>
+          {timeLabels.map((time, index) => {
+            const position = ((time.getTime() - timeRange.start.getTime()) / totalDuration) * 100;
+            return (
+              <div
+                key={index}
+                style={{
+                  position: 'absolute',
+                  left: `${position}%`,
+                  transform: 'translateX(-50%)',
+                  fontSize: '0.8rem',
+                  fontWeight: 'bold',
+                  color: '#333',
+                  whiteSpace: 'nowrap'
+                }}
+              >
+                {formatTime(time.toISOString())}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Events */}
+        <div style={{ padding: '1rem 0' }}>
+          {events.map((event, index) => {
+            const position = calculateEventPosition(event, timeRange);
+            return (
+              <div
+                key={event.id}
+                style={{
+                  position: 'relative',
+                  height: '60px',
+                  marginBottom: '8px',
+                  borderRadius: '4px',
+                  border: '1px solid #e9ecef'
+                }}
+              >
+                {/* Event bar */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: `${position.left}%`,
+                    width: `${position.width}%`,
+                    height: '100%',
+                    backgroundColor: getTypeColor(event.type),
+                    opacity: getStatusOpacity(event.status),
+                    borderRadius: '4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '0 8px',
+                    color: 'white',
+                    fontSize: '0.8rem',
+                    fontWeight: 'bold',
+                    overflow: 'hidden',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                    cursor: 'pointer',
+                    transition: 'transform 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.transform = 'scale(1.02)';
+                    e.currentTarget.style.zIndex = '10';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.zIndex = '1';
+                  }}
+                  title={`${event.title}\n${event.location}\n${event.vipName}\n${formatTime(event.startTime)} - ${formatTime(event.endTime)}`}
+                >
+                  <span style={{ marginRight: '4px' }}>{getTypeIcon(event.type)}</span>
+                  <span style={{ 
+                    overflow: 'hidden', 
+                    textOverflow: 'ellipsis', 
+                    whiteSpace: 'nowrap',
+                    flex: 1
+                  }}>
+                    {event.title}
+                  </span>
+                </div>
+
+                {/* Event details (shown to the right of short events) */}
+                {position.width < 15 && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: `${position.left + position.width + 1}%`,
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      fontSize: '0.7rem',
+                      color: '#666',
+                      whiteSpace: 'nowrap',
+                      backgroundColor: '#f8f9fa',
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      border: '1px solid #e9ecef'
+                    }}
+                  >
+                    {getTypeIcon(event.type)} {event.title} - {event.vipName}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Legend */}
+        <div style={{ 
+          borderTop: '1px solid #ddd', 
+          padding: '1rem',
+          backgroundColor: '#f8f9fa'
+        }}>
+          <div style={{ fontSize: '0.8rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
+            Event Types:
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+            {[
+              { type: 'transport', label: 'Transport' },
+              { type: 'meeting', label: 'Meetings' },
+              { type: 'meal', label: 'Meals' },
+              { type: 'event', label: 'Events' },
+              { type: 'accommodation', label: 'Accommodation' }
+            ].map(({ type, label }) => (
+              <div key={type} style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                <div
+                  style={{
+                    width: '16px',
+                    height: '16px',
+                    backgroundColor: getTypeColor(type),
+                    borderRadius: '2px'
+                  }}
+                />
+                <span style={{ fontSize: '0.7rem' }}>{getTypeIcon(type)} {label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GanttChart;

frontend/src/components/Login.css

@@ -0,0 +1,221 @@
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.login-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  max-width: 400px;
+  width: 100%;
+  text-align: center;
+}
+
+.login-header h1 {
+  color: #333;
+  margin: 0 0 8px 0;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.login-header p {
+  color: #666;
+  margin: 0 0 30px 0;
+  font-size: 16px;
+}
+
+.setup-notice {
+  background: #f0f9ff;
+  border: 1px solid #0ea5e9;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+}
+
+.setup-notice h3 {
+  color: #0369a1;
+  margin: 0 0 8px 0;
+  font-size: 18px;
+}
+
+.setup-notice p {
+  color: #0369a1;
+  margin: 0;
+  font-size: 14px;
+}
+
+.login-content {
+  margin-bottom: 30px;
+}
+
+.google-login-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 24px;
+  background: white;
+  border: 2px solid #dadce0;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #3c4043;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 20px;
+}
+
+.google-login-btn:hover:not(:disabled) {
+  border-color: #1a73e8;
+  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.2);
+}
+
+.google-login-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.google-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.login-info p {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dev-login-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 24px 0;
+  color: #94a3b8;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.dev-login-divider::before,
+.dev-login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #e2e8f0;
+}
+
+.dev-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: left;
+}
+
+.dev-login-form h3 {
+  margin: 0;
+  color: #1e293b;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dev-login-hint {
+  margin: 0;
+  font-size: 13px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.dev-login-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 14px;
+  color: #334155;
+}
+
+.dev-login-form input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #cbd5f5;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dev-login-form input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.dev-login-error {
+  background: #fee2e2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.dev-login-button {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dev-login-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
+}
+
+.dev-login-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.login-footer {
+  border-top: 1px solid #eee;
+  padding-top: 20px;
+}
+
+.login-footer p {
+  color: #999;
+  font-size: 12px;
+  margin: 0;
+}
+
+.loading {
+  color: #666;
+  font-size: 16px;
+  padding: 40px;
+}
+
+@media (max-width: 480px) {
+  .login-container {
+    padding: 10px;
+  }
+  
+  .login-card {
+    padding: 30px 20px;
+  }
+  
+  .login-header h1 {
+    font-size: 24px;
+  }
+}

frontend/src/components/Login.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { apiCall } from '../config/api';
+import './Login.css';
+
+interface LoginProps {
+  onLogin: () => void;
+  errorMessage?: string | null | undefined;
+}
+
+const Login: React.FC<LoginProps> = ({ onLogin, errorMessage }) => {
+  const [setupStatus, setSetupStatus] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiCall('/auth/setup')
+      .then(res => res.json())
+      .then(data => {
+        setSetupStatus(data);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error checking setup status:', error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="login-container">
+        <div className="login-card">
+          <div className="loading">Loading...</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+        <div className="login-header">
+          <h1>VIP Coordinator</h1>
+          <p>Secure access required</p>
+        </div>
+
+        {!setupStatus?.firstAdminCreated && (
+          <div className="setup-notice">
+            <h3>🚀 First Time Setup</h3>
+            <p>The first person to sign in will be promoted to administrator automatically.</p>
+          </div>
+        )}
+
+        <div className="login-content">
+          <button
+            className="google-login-btn"
+            onClick={onLogin}
+          >
+            <svg className="google-icon" viewBox="0 0 24 24">
+              <path fill="#635dff" d="M22 12.07c0-5.52-4.48-10-10-10s-10 4.48-10 10a9.97 9.97 0 006.85 9.48.73.73 0 00.95-.7v-3.05c-2.79.61-3.38-1.19-3.38-1.19-.46-1.17-1.12-1.49-1.12-1.49-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.37 1.09 2.96.83.09-.65.35-1.09.63-1.34-2.23-.25-4.57-1.12-4.57-4.96 0-1.1.39-2 1.03-2.7-.1-.25-.45-1.25.1-2.6 0 0 .84-.27 2.75 1.02a9.53 9.53 0 015 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.35.1 2.6.64.7 1.03 1.6 1.03 2.7 0 3.85-2.34 4.71-4.58 4.95.36.31.69.92.69 1.86v2.75c0 .39.27.71.66.79a10 10 0 007.61-9.71z"/>
+            </svg>
+            Continue with Auth0
+          </button>
+
+          <div className="login-info">
+            <p>
+              {setupStatus?.authProvider === 'auth0'
+                ? 'Sign in with your organisation account. We use Auth0 for secure authentication.'
+                : 'Authentication service is being configured. Please try again later.'}
+            </p>
+          </div>
+
+          {errorMessage && (
+            <div className="dev-login-error" style={{ marginTop: '1rem' }}>
+              {errorMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="login-footer">
+          <p>Secure authentication powered by Auth0</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/components/ScheduleManager.tsx

@@ -0,0 +1,605 @@
+import React, { useState, useEffect } from 'react';
+import { apiCall } from '../config/api';
+import DriverSelector from './DriverSelector';
+
+interface ScheduleEvent {
+  id: string;
+  title: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  description?: string;
+  assignedDriverId?: string;
+  status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+  type: 'transport' | 'meeting' | 'event' | 'meal' | 'accommodation';
+}
+
+interface ScheduleManagerProps {
+  vipId: string;
+  vipName: string;
+}
+
+const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) => {
+  const [schedule, setSchedule] = useState<ScheduleEvent[]>([]);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [editingEvent, setEditingEvent] = useState<ScheduleEvent | null>(null);
+  const [drivers, setDrivers] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetchSchedule();
+    fetchDrivers();
+  }, [vipId]);
+
+  const fetchSchedule = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipId}/schedule`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setSchedule(data);
+      }
+    } catch (error) {
+      console.error('Error fetching schedule:', error);
+    }
+  };
+
+  const fetchDrivers = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall('/api/drivers', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setDrivers(data);
+      }
+    } catch (error) {
+      console.error('Error fetching drivers:', error);
+    }
+  };
+
+  const getDriverName = (driverId: string) => {
+    const driver = drivers.find(d => d.id === driverId);
+    return driver ? driver.name : `Driver ID: ${driverId}`;
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'scheduled': return '#3498db';
+      case 'in-progress': return '#f39c12';
+      case 'completed': return '#2ecc71';
+      case 'cancelled': return '#e74c3c';
+      default: return '#95a5a6';
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'transport': return '🚗';
+      case 'meeting': return '🤝';
+      case 'event': return '🎉';
+      case 'meal': return '🍽️';
+      case 'accommodation': return '🏨';
+      default: return '📅';
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    try {
+      const date = new Date(timeString);
+      if (isNaN(date.getTime())) {
+        return 'Invalid Time';
+      }
+      
+      // Safari-compatible time formatting
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      const displayHours = hours % 12 || 12;
+      const displayMinutes = minutes.toString().padStart(2, '0');
+      
+      return `${displayHours}:${displayMinutes} ${ampm}`;
+    } catch (error) {
+      console.error('Error formatting time:', error, timeString);
+      return 'Time Error';
+    }
+  };
+
+  const groupEventsByDay = (events: ScheduleEvent[]) => {
+    const grouped: { [key: string]: ScheduleEvent[] } = {};
+    
+    events.forEach(event => {
+      const date = new Date(event.startTime).toDateString();
+      if (!grouped[date]) {
+        grouped[date] = [];
+      }
+      grouped[date].push(event);
+    });
+
+    // Sort events within each day by start time
+    Object.keys(grouped).forEach(date => {
+      grouped[date].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+    });
+
+    return grouped;
+  };
+
+  const groupedSchedule = groupEventsByDay(schedule);
+
+  return (
+    <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+      <div className="bg-gradient-to-r from-purple-50 to-pink-50 px-8 py-6 border-b border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+              📅 Schedule for {vipName}
+            </h2>
+            <p className="text-slate-600 mt-1">Manage daily events and activities</p>
+          </div>
+          <button 
+            className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+            onClick={() => setShowAddForm(true)}
+          >
+            ➕ Add Event
+          </button>
+        </div>
+      </div>
+
+      <div className="p-8">
+        {Object.keys(groupedSchedule).length === 0 ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <span className="text-2xl">📅</span>
+            </div>
+            <p className="text-slate-500 font-medium mb-2">No scheduled events</p>
+            <p className="text-slate-400 text-sm">Click "Add Event" to get started with scheduling</p>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {Object.entries(groupedSchedule).map(([date, events]) => (
+              <div key={date} className="space-y-4">
+                <div className="bg-gradient-to-r from-slate-600 to-slate-700 text-white px-6 py-3 rounded-xl shadow-lg">
+                  <h3 className="text-lg font-bold">
+                    {new Date(date).toLocaleDateString([], { 
+                      weekday: 'long', 
+                      year: 'numeric', 
+                      month: 'long', 
+                      day: 'numeric' 
+                    })}
+                  </h3>
+                </div>
+                
+                <div className="grid gap-4">
+                  {events.map((event) => (
+                    <div key={event.id} className="bg-gradient-to-r from-slate-50 to-slate-100 rounded-xl border border-slate-200/60 p-6 hover:shadow-lg transition-all duration-200">
+                      <div className="flex items-start gap-6">
+                        {/* Time Column */}
+                        <div className="flex-shrink-0 text-center">
+                          <div className="bg-white rounded-lg border border-slate-200 p-3 shadow-sm">
+                            <div className="text-sm font-bold text-slate-900">
+                              {formatTime(event.startTime)}
+                            </div>
+                            <div className="text-xs text-slate-500 mt-1">
+                              to
+                            </div>
+                            <div className="text-sm font-bold text-slate-900">
+                              {formatTime(event.endTime)}
+                            </div>
+                          </div>
+                        </div>
+                        
+                        {/* Event Content */}
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3 mb-3">
+                            <span className="text-2xl">{getTypeIcon(event.type)}</span>
+                            <h4 className="text-lg font-bold text-slate-900">{event.title}</h4>
+                            <span 
+                              className="px-3 py-1 rounded-full text-xs font-bold text-white shadow-sm"
+                              style={{ backgroundColor: getStatusColor(event.status) }}
+                            >
+                              {event.status.toUpperCase()}
+                            </span>
+                          </div>
+                          
+                          <div className="flex items-center gap-2 text-slate-600 mb-2">
+                            <span>📍</span>
+                            <span className="font-medium">{event.location}</span>
+                          </div>
+                          
+                          {event.description && (
+                            <div className="text-slate-600 mb-3 bg-white/50 rounded-lg p-3 border border-slate-200/50">
+                              {event.description}
+                            </div>
+                          )}
+                          
+                          {event.assignedDriverId ? (
+                            <div className="flex items-center gap-2 text-slate-600 mb-4">
+                              <span>👤</span>
+                              <span className="font-medium">Driver: {getDriverName(event.assignedDriverId)}</span>
+                            </div>
+                          ) : (
+                            <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
+                              <div className="flex items-center gap-2 text-amber-800 mb-2">
+                                <span>⚠️</span>
+                                <span className="font-medium text-sm">No Driver Assigned</span>
+                              </div>
+                              <p className="text-amber-700 text-xs mb-2">This event needs a driver to ensure VIP transportation</p>
+                              <button 
+                                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white px-3 py-1 rounded-lg text-xs font-medium transition-all duration-200 shadow-sm hover:shadow-md"
+                                onClick={() => setEditingEvent(event)}
+                              >
+                                🚗 Assign Driver
+                              </button>
+                            </div>
+                          )}
+                          
+                          <div className="flex items-center gap-3">
+                            <button 
+                              className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                              onClick={() => setEditingEvent(event)}
+                            >
+                              ✏️ Edit
+                            </button>
+                            {event.status === 'scheduled' && (
+                              <button 
+                                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                                onClick={() => updateEventStatus(event.id, 'in-progress')}
+                              >
+                                ▶️ Start
+                              </button>
+                            )}
+                            {event.status === 'in-progress' && (
+                              <button 
+                                className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+                                onClick={() => updateEventStatus(event.id, 'completed')}
+                              >
+                                ✅ Complete
+                              </button>
+                            )}
+                            {event.status === 'completed' && (
+                              <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
+                                ✅ Completed
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showAddForm && (
+        <ScheduleEventForm
+          vipId={vipId}
+          onSubmit={handleAddEvent}
+          onCancel={() => setShowAddForm(false)}
+        />
+      )}
+
+      {editingEvent && (
+        <ScheduleEventForm
+          vipId={vipId}
+          event={editingEvent}
+          onSubmit={handleEditEvent}
+          onCancel={() => setEditingEvent(null)}
+        />
+      )}
+    </div>
+  );
+
+  async function handleAddEvent(eventData: any) {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipId}/schedule`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(eventData),
+      });
+      
+      if (response.ok) {
+        await fetchSchedule();
+        setShowAddForm(false);
+      } else {
+        const errorData = await response.json();
+        throw errorData;
+      }
+    } catch (error) {
+      console.error('Error adding event:', error);
+      throw error;
+    }
+  }
+
+  async function handleEditEvent(eventData: any) {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipId}/schedule/${eventData.id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(eventData),
+      });
+      
+      if (response.ok) {
+        await fetchSchedule();
+        setEditingEvent(null);
+      } else {
+        const errorData = await response.json();
+        throw errorData;
+      }
+    } catch (error) {
+      console.error('Error updating event:', error);
+      throw error;
+    }
+  }
+
+  async function updateEventStatus(eventId: string, status: string) {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipId}/schedule/${eventId}/status`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ status }),
+      });
+      
+      if (response.ok) {
+        await fetchSchedule();
+      }
+    } catch (error) {
+      console.error('Error updating event status:', error);
+    }
+  }
+};
+
+// Modern Schedule Event Form Component
+interface ScheduleEventFormProps {
+  vipId: string;
+  event?: ScheduleEvent;
+  onSubmit: (eventData: any) => void;
+  onCancel: () => void;
+}
+
+const ScheduleEventForm: React.FC<ScheduleEventFormProps> = ({ vipId, event, onSubmit, onCancel }) => {
+  const [formData, setFormData] = useState({
+    title: event?.title || '',
+    location: event?.location || '',
+    startTime: event?.startTime?.slice(0, 16) || '',
+    endTime: event?.endTime?.slice(0, 16) || '',
+    description: event?.description || '',
+    type: event?.type || 'event',
+    assignedDriverId: event?.assignedDriverId || ''
+  });
+  const [validationErrors, setValidationErrors] = useState<any[]>([]);
+  const [warnings, setWarnings] = useState<any[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setValidationErrors([]);
+    setWarnings([]);
+    
+    try {
+      await onSubmit({
+        ...formData,
+        id: event?.id,
+        startTime: new Date(formData.startTime).toISOString(),
+        endTime: new Date(formData.endTime).toISOString(),
+        status: event?.status || 'scheduled'
+      });
+    } catch (error: any) {
+      if (error.validationErrors) {
+        setValidationErrors(error.validationErrors);
+      }
+      if (error.warnings) {
+        setWarnings(error.warnings);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200/60 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800">
+            {event ? '✏️ Edit Event' : '➕ Add New Event'}
+          </h2>
+          <p className="text-slate-600 mt-1">
+            {event ? 'Update event details' : 'Create a new schedule event'}
+          </p>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="p-8 space-y-6">
+          {validationErrors.length > 0 && (
+            <div className="bg-red-50 border border-red-200 rounded-xl p-4">
+              <h4 className="text-red-800 font-semibold mb-2">❌ Validation Errors:</h4>
+              <ul className="text-red-700 space-y-1">
+                {validationErrors.map((error, index) => (
+                  <li key={index} className="text-sm">• {error.message}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          
+          {warnings.length > 0 && (
+            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+              <h4 className="text-amber-800 font-semibold mb-2">⚠️ Warnings:</h4>
+              <ul className="text-amber-700 space-y-1">
+                {warnings.map((warning, index) => (
+                  <li key={index} className="text-sm">• {warning.message}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="md:col-span-2">
+              <label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-2">
+                Event Title
+              </label>
+              <input
+                type="text"
+                id="title"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                placeholder="Enter event title"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="type" className="block text-sm font-medium text-slate-700 mb-2">
+                Event Type
+              </label>
+              <select
+                id="type"
+                name="type"
+                value={formData.type}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                required
+              >
+                <option value="transport">🚗 Transport</option>
+                <option value="meeting">🤝 Meeting</option>
+                <option value="event">🎉 Event</option>
+                <option value="meal">🍽️ Meal</option>
+                <option value="accommodation">🏨 Accommodation</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="location" className="block text-sm font-medium text-slate-700 mb-2">
+                Location
+              </label>
+              <input
+                type="text"
+                id="location"
+                name="location"
+                value={formData.location}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                placeholder="Enter location"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="startTime" className="block text-sm font-medium text-slate-700 mb-2">
+                Start Time
+              </label>
+              <input
+                type="datetime-local"
+                id="startTime"
+                name="startTime"
+                value={formData.startTime}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="endTime" className="block text-sm font-medium text-slate-700 mb-2">
+                End Time
+              </label>
+              <input
+                type="datetime-local"
+                id="endTime"
+                name="endTime"
+                value={formData.endTime}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                required
+              />
+            </div>
+
+            <div className="md:col-span-2">
+              <label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-2">
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                rows={3}
+                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                placeholder="Enter event description (optional)"
+              />
+            </div>
+
+            <div className="md:col-span-2">
+              <DriverSelector
+                selectedDriverId={formData.assignedDriverId}
+                onDriverSelect={(driverId) => setFormData(prev => ({ ...prev, assignedDriverId: driverId }))}
+                eventTime={{
+                  startTime: formData.startTime ? new Date(formData.startTime).toISOString() : '',
+                  endTime: formData.endTime ? new Date(formData.endTime).toISOString() : '',
+                  location: formData.location
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-4 pt-6 border-t border-slate-200">
+            <button 
+              type="button" 
+              className="px-6 py-3 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors font-medium" 
+              onClick={onCancel} 
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+            <button 
+              type="submit" 
+              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed" 
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? (
+                <span className="flex items-center gap-2">
+                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                  {event ? 'Updating...' : 'Creating...'}
+                </span>
+              ) : (
+                event ? '✏️ Update Event' : '➕ Create Event'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleManager;

frontend/src/components/UserManagement.tsx

@@ -0,0 +1,488 @@
+import React, { useState, useEffect } from 'react';
+import { API_BASE_URL } from '../config/api';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  picture: string;
+  role: string;
+  created_at: string;
+  last_sign_in_at?: string;
+  provider: string;
+}
+
+interface UserManagementProps {
+  currentUser: any;
+}
+
+const UserManagement: React.FC<UserManagementProps> = ({ currentUser }) => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [pendingUsers, setPendingUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'all' | 'pending'>('all');
+  const [updatingUser, setUpdatingUser] = useState<string | null>(null);
+
+  // Check if current user is admin
+  if (currentUser?.role !== 'administrator') {
+    return (
+      <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-xl font-semibold text-red-800 mb-2">Access Denied</h2>
+        <p className="text-red-600">You need administrator privileges to access user management.</p>
+      </div>
+    );
+  }
+
+  const fetchUsers = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch users');
+      }
+
+      const userData = await response.json();
+      setUsers(userData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchPendingUsers = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users/pending/list`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch pending users');
+      }
+
+      const pendingData = await response.json();
+      setPendingUsers(pendingData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch pending users');
+    }
+  };
+
+  const updateUserRole = async (userEmail: string, newRole: string) => {
+    setUpdatingUser(userEmail);
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}/role`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ role: newRole })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update user role');
+      }
+
+      // Refresh users list
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update user role');
+    } finally {
+      setUpdatingUser(null);
+    }
+  };
+
+  const deleteUser = async (userEmail: string, userName: string) => {
+    if (!confirm(`Are you sure you want to delete user "${userName}"? This action cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete user');
+      }
+
+      // Refresh users list
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete user');
+    }
+  };
+
+  const approveUser = async (userEmail: string, userName: string) => {
+    setUpdatingUser(userEmail);
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}/approval`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ status: 'approved' })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to approve user');
+      }
+
+      // Refresh both lists
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to approve user');
+    } finally {
+      setUpdatingUser(null);
+    }
+  };
+
+  const denyUser = async (userEmail: string, userName: string) => {
+    if (!confirm(`Are you sure you want to deny access for "${userName}"?`)) {
+      return;
+    }
+
+    setUpdatingUser(userEmail);
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}/approval`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ status: 'denied' })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to deny user');
+      }
+
+      // Refresh both lists
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to deny user');
+    } finally {
+      setUpdatingUser(null);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+    fetchPendingUsers();
+  }, []);
+
+  useEffect(() => {
+    if (activeTab === 'pending') {
+      fetchPendingUsers();
+    }
+  }, [activeTab]);
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const getRoleBadgeColor = (role: string) => {
+    switch (role) {
+      case 'administrator':
+        return 'bg-red-100 text-red-800 border-red-200';
+      case 'coordinator':
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      case 'driver':
+        return 'bg-green-100 text-green-800 border-green-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded-lg w-1/4 mb-6"></div>
+          <div className="space-y-4">
+            {[1, 2, 3].map(i => (
+              <div key={i} className="h-20 bg-gray-200 rounded-lg"></div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">User Management</h2>
+        <p className="text-gray-600">Manage user accounts and permissions (PostgreSQL Database)</p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-600">{error}</p>
+          <button 
+            onClick={() => setError(null)}
+            className="mt-2 text-sm text-red-500 hover:text-red-700"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Tab Navigation */}
+      <div className="mb-6">
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab('all')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'all'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              👥 All Users ({users.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('pending')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'pending'
+                  ? 'border-orange-500 text-orange-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              ⏳ Pending Approval ({pendingUsers.length})
+              {pendingUsers.length > 0 && (
+                <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
+                  {pendingUsers.length}
+                </span>
+              )}
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Content based on active tab */}
+      {activeTab === 'all' && (
+        <div className="bg-white shadow-sm border border-gray-200 rounded-lg overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            <h3 className="text-lg font-medium text-gray-900">
+              All Users ({users.length})
+            </h3>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {users.map((user) => (
+              <div key={user.email} className="p-6 hover:bg-gray-50">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    {user.picture ? (
+                      <img 
+                        src={user.picture} 
+                        alt={user.name}
+                        className="w-12 h-12 rounded-full"
+                      />
+                    ) : (
+                      <div className="w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center">
+                        <span className="text-gray-600 font-medium">
+                          {user.name.charAt(0).toUpperCase()}
+                        </span>
+                      </div>
+                    )}
+                    
+                    <div>
+                      <h4 className="text-lg font-medium text-gray-900">{user.name}</h4>
+                      <p className="text-gray-600">{user.email}</p>
+                      <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                        <span>Joined: {formatDate(user.created_at)}</span>
+                        {user.last_sign_in_at && (
+                          <span>Last login: {formatDate(user.last_sign_in_at)}</span>
+                        )}
+                        <span className="capitalize">via {user.provider}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-4">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm text-gray-600">Role:</span>
+                      <select
+                        value={user.role}
+                        onChange={(e) => updateUserRole(user.email, e.target.value)}
+                        disabled={updatingUser === user.email || user.email === currentUser.email}
+                        className={`px-3 py-1 border rounded-md text-sm font-medium ${getRoleBadgeColor(user.role)} ${
+                          updatingUser === user.email ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-opacity-80'
+                        }`}
+                      >
+                        <option value="coordinator">Coordinator</option>
+                        <option value="administrator">Administrator</option>
+                        <option value="driver">Driver</option>
+                      </select>
+                    </div>
+
+                    {user.email !== currentUser.email && (
+                      <button
+                        onClick={() => deleteUser(user.email, user.name)}
+                        className="px-3 py-1 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md border border-red-200 transition-colors"
+                      >
+                        🗑️ Delete
+                      </button>
+                    )}
+
+                    {user.email === currentUser.email && (
+                      <span className="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-md border border-blue-200">
+                        👤 You
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {users.length === 0 && (
+            <div className="p-6 text-center text-gray-500">
+              No users found.
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Pending Users Tab */}
+      {activeTab === 'pending' && (
+        <div className="bg-white shadow-sm border border-gray-200 rounded-lg overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-200 bg-orange-50">
+            <h3 className="text-lg font-medium text-gray-900">
+              Pending Approval ({pendingUsers.length})
+            </h3>
+            <p className="text-sm text-gray-600 mt-1">
+              Users waiting for administrator approval to access the system
+            </p>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {pendingUsers.map((user) => (
+              <div key={user.email} className="p-6 hover:bg-gray-50">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    {user.picture ? (
+                      <img 
+                        src={user.picture} 
+                        alt={user.name}
+                        className="w-12 h-12 rounded-full"
+                      />
+                    ) : (
+                      <div className="w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center">
+                        <span className="text-gray-600 font-medium">
+                          {user.name.charAt(0).toUpperCase()}
+                        </span>
+                      </div>
+                    )}
+                    
+                    <div>
+                      <h4 className="text-lg font-medium text-gray-900">{user.name}</h4>
+                      <p className="text-gray-600">{user.email}</p>
+                      <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                        <span>Requested: {formatDate(user.created_at)}</span>
+                        <span className="capitalize">via {user.provider}</span>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          getRoleBadgeColor(user.role)
+                        }`}>
+                          {user.role}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-3">
+                    <button
+                      onClick={() => approveUser(user.email, user.name)}
+                      disabled={updatingUser === user.email}
+                      className={`px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors ${
+                        updatingUser === user.email ? 'opacity-50 cursor-not-allowed' : ''
+                      }`}
+                    >
+                      {updatingUser === user.email ? '⏳ Approving...' : '✅ Approve'}
+                    </button>
+                    <button
+                      onClick={() => denyUser(user.email, user.name)}
+                      disabled={updatingUser === user.email}
+                      className={`px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors ${
+                        updatingUser === user.email ? 'opacity-50 cursor-not-allowed' : ''
+                      }`}
+                    >
+                      {updatingUser === user.email ? '⏳ Denying...' : '❌ Deny'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {pendingUsers.length === 0 && (
+            <div className="p-6 text-center text-gray-500">
+              <div className="text-6xl mb-4">✅</div>
+              <p className="text-lg font-medium mb-2">No pending approvals</p>
+              <p className="text-sm">All users have been processed.</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <h4 className="font-medium text-blue-900 mb-2">Role Descriptions:</h4>
+        <ul className="text-sm text-blue-800 space-y-1">
+          <li><strong>Administrator:</strong> Full access to all features including user management</li>
+          <li><strong>Coordinator:</strong> Can manage VIPs, drivers, and schedules</li>
+          <li><strong>Driver:</strong> Can view assigned schedules and update status</li>
+        </ul>
+      </div>
+
+      <div className="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
+        <h4 className="font-medium text-orange-900 mb-2">🔐 User Approval System:</h4>
+        <p className="text-sm text-orange-800">
+          New users (except the first administrator) require approval before accessing the system. 
+          Users with pending approval will see a "pending approval" message when they try to sign in.
+        </p>
+      </div>
+
+      <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+        <h4 className="font-medium text-green-900 mb-2">✅ PostgreSQL Database:</h4>
+        <p className="text-sm text-green-800">
+          User data is stored in your PostgreSQL database with proper indexing and relationships.
+          All user management operations are transactional and fully persistent across server restarts.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default UserManagement;

frontend/src/components/VipForm.tsx

@@ -0,0 +1,459 @@
+import React, { useState } from 'react';
+
+interface Flight {
+  flightNumber: string;
+  flightDate: string;
+  segment: number;
+  validated?: boolean;
+  validationData?: any;
+}
+
+interface VipFormData {
+  name: string;
+  organization: string;
+  department: 'Office of Development' | 'Admin';
+  transportMode: 'flight' | 'self-driving';
+  flights?: Flight[];
+  expectedArrival?: string;
+  needsAirportPickup?: boolean;
+  needsVenueTransport: boolean;
+  notes: string;
+}
+
+interface VipFormProps {
+  onSubmit: (vipData: VipFormData) => void;
+  onCancel: () => void;
+}
+
+const VipForm: React.FC<VipFormProps> = ({ onSubmit, onCancel }) => {
+  const [formData, setFormData] = useState<VipFormData>({
+    name: '',
+    organization: '',
+    department: 'Office of Development',
+    transportMode: 'flight',
+    flights: [{ flightNumber: '', flightDate: '', segment: 1 }],
+    expectedArrival: '',
+    needsAirportPickup: true,
+    needsVenueTransport: true,
+    notes: ''
+  });
+
+  const [flightValidating, setFlightValidating] = useState<{ [key: number]: boolean }>({});
+  const [flightErrors, setFlightErrors] = useState<{ [key: number]: string }>({});
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Only include flights with flight numbers
+    const validFlights = formData.flights?.filter(f => f.flightNumber) || [];
+    
+    onSubmit({
+      ...formData,
+      flights: validFlights.length > 0 ? validFlights : undefined
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      setFormData(prev => ({
+        ...prev,
+        [name]: checked
+      }));
+    } else {
+      setFormData(prev => ({
+        ...prev,
+        [name]: value
+      }));
+    }
+  };
+
+  const handleTransportModeChange = (mode: 'flight' | 'self-driving') => {
+    setFormData(prev => ({
+      ...prev,
+      transportMode: mode,
+      flights: mode === 'flight' ? [{ flightNumber: '', flightDate: '', segment: 1 }] : undefined,
+      expectedArrival: mode === 'self-driving' ? prev.expectedArrival : '',
+      needsAirportPickup: mode === 'flight' ? true : false
+    }));
+    
+    // Clear flight errors when switching away from flight mode
+    if (mode !== 'flight') {
+      setFlightErrors({});
+    }
+  };
+
+  const handleFlightChange = (index: number, field: 'flightNumber' | 'flightDate', value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      flights: prev.flights?.map((flight, i) => 
+        i === index ? { ...flight, [field]: value, validated: false } : flight
+      ) || []
+    }));
+    
+    // Clear validation for this flight when it changes
+    setFlightErrors(prev => ({ ...prev, [index]: '' }));
+  };
+
+  const addConnectingFlight = () => {
+    const currentFlights = formData.flights || [];
+    if (currentFlights.length < 3) {
+      setFormData(prev => ({
+        ...prev,
+        flights: [...currentFlights, { 
+          flightNumber: '', 
+          flightDate: currentFlights[currentFlights.length - 1]?.flightDate || '', 
+          segment: currentFlights.length + 1 
+        }]
+      }));
+    }
+  };
+
+  const removeConnectingFlight = (index: number) => {
+    setFormData(prev => ({
+      ...prev,
+      flights: prev.flights?.filter((_, i) => i !== index).map((flight, i) => ({
+        ...flight,
+        segment: i + 1
+      })) || []
+    }));
+    
+    // Clear errors for removed flight
+    setFlightErrors(prev => {
+      const newErrors = { ...prev };
+      delete newErrors[index];
+      return newErrors;
+    });
+  };
+
+  const validateFlight = async (index: number) => {
+    const flight = formData.flights?.[index];
+    if (!flight || !flight.flightNumber || !flight.flightDate) {
+      setFlightErrors(prev => ({ ...prev, [index]: 'Please enter flight number and date' }));
+      return;
+    }
+    
+    setFlightValidating(prev => ({ ...prev, [index]: true }));
+    setFlightErrors(prev => ({ ...prev, [index]: '' }));
+    
+    try {
+      const url = `/api/flights/${flight.flightNumber}?date=${flight.flightDate}`;
+      const response = await fetch(url);
+      
+      if (response.ok) {
+        const data = await response.json();
+        
+        // Update flight with validation data
+        setFormData(prev => ({
+          ...prev,
+          flights: prev.flights?.map((f, i) => 
+            i === index ? { ...f, validated: true, validationData: data } : f
+          ) || []
+        }));
+        
+        setFlightErrors(prev => ({ ...prev, [index]: '' }));
+      } else {
+        const errorData = await response.json();
+        setFlightErrors(prev => ({ 
+          ...prev, 
+          [index]: errorData.error || 'Invalid flight number' 
+        }));
+      }
+    } catch (error) {
+      setFlightErrors(prev => ({ 
+        ...prev, 
+        [index]: 'Error validating flight' 
+      }));
+    } finally {
+      setFlightValidating(prev => ({ ...prev, [index]: false }));
+    }
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        {/* Modal Header */}
+        <div className="modal-header">
+          <h2 className="text-2xl font-bold text-slate-800">
+            Add New VIP
+          </h2>
+          <p className="text-slate-600 mt-2">Enter VIP details and travel information</p>
+        </div>
+
+        {/* Modal Body */}
+        <div className="modal-body">
+          <form onSubmit={handleSubmit} className="space-y-8">
+            {/* Basic Information Section */}
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Basic Information</h3>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="form-group">
+                  <label htmlFor="name" className="form-label">Full Name *</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter full name"
+                    required
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="organization" className="form-label">Organization *</label>
+                  <input
+                    type="text"
+                    id="organization"
+                    name="organization"
+                    value={formData.organization}
+                    onChange={handleChange}
+                    className="form-input"
+                    placeholder="Enter organization name"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="department" className="form-label">Department *</label>
+                <select
+                  id="department"
+                  name="department"
+                  value={formData.department}
+                  onChange={handleChange}
+                  className="form-select"
+                  required
+                >
+                  <option value="Office of Development">Office of Development</option>
+                  <option value="Admin">Admin</option>
+                </select>
+              </div>
+            </div>
+
+            {/* Transportation Section */}
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Transportation Details</h3>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label">How are you arriving? *</label>
+                <div className="radio-group">
+                  <div 
+                    className={`radio-option ${formData.transportMode === 'flight' ? 'selected' : ''}`}
+                    onClick={() => handleTransportModeChange('flight')}
+                  >
+                    <input
+                      type="radio"
+                      name="transportMode"
+                      value="flight"
+                      checked={formData.transportMode === 'flight'}
+                      onChange={() => handleTransportModeChange('flight')}
+                      className="form-radio mr-3"
+                    />
+                    <span className="font-medium">Arriving by Flight</span>
+                  </div>
+                  <div 
+                    className={`radio-option ${formData.transportMode === 'self-driving' ? 'selected' : ''}`}
+                    onClick={() => handleTransportModeChange('self-driving')}
+                  >
+                    <input
+                      type="radio"
+                      name="transportMode"
+                      value="self-driving"
+                      checked={formData.transportMode === 'self-driving'}
+                      onChange={() => handleTransportModeChange('self-driving')}
+                      className="form-radio mr-3"
+                    />
+                    <span className="font-medium">Self-Driving</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Flight Mode Fields */}
+              {formData.transportMode === 'flight' && formData.flights && (
+                <div className="space-y-6">
+                  {formData.flights.map((flight, index) => (
+                    <div key={index} className="bg-white border-2 border-blue-200 rounded-xl p-6 shadow-sm">
+                      <div className="flex justify-between items-center mb-4">
+                        <h4 className="text-lg font-bold text-slate-800">
+                          {index === 0 ? 'Primary Flight' : `Connecting Flight ${index}`}
+                        </h4>
+                        {index > 0 && (
+                          <button
+                            type="button"
+                            onClick={() => removeConnectingFlight(index)}
+                            className="text-red-500 hover:text-red-700 font-medium text-sm bg-red-50 hover:bg-red-100 px-3 py-1 rounded-lg transition-colors duration-200"
+                          >
+                            Remove
+                          </button>
+                        )}
+                      </div>
+
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                        <div className="form-group">
+                          <label htmlFor={`flightNumber-${index}`} className="form-label">Flight Number *</label>
+                          <input
+                            type="text"
+                            id={`flightNumber-${index}`}
+                            value={flight.flightNumber}
+                            onChange={(e) => handleFlightChange(index, 'flightNumber', e.target.value)}
+                            className="form-input"
+                            placeholder="e.g., AA123"
+                            required={index === 0}
+                          />
+                        </div>
+
+                        <div className="form-group">
+                          <label htmlFor={`flightDate-${index}`} className="form-label">Flight Date *</label>
+                          <input
+                            type="date"
+                            id={`flightDate-${index}`}
+                            value={flight.flightDate}
+                            onChange={(e) => handleFlightChange(index, 'flightDate', e.target.value)}
+                            className="form-input"
+                            required={index === 0}
+                            min={new Date().toISOString().split('T')[0]}
+                          />
+                        </div>
+                      </div>
+
+                      <button
+                        type="button"
+                        className="btn btn-secondary w-full"
+                        onClick={() => validateFlight(index)}
+                        disabled={flightValidating[index] || !flight.flightNumber || !flight.flightDate}
+                      >
+                        {flightValidating[index] ? (
+                          <>
+                            <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>
+                            Validating Flight...
+                          </>
+                        ) : (
+                          <>Validate Flight</>
+                        )}
+                      </button>
+
+                      {/* Flight Validation Results */}
+                      {flightErrors[index] && (
+                        <div className="mt-4 bg-red-50 border border-red-200 rounded-lg p-4">
+                          <div className="text-red-700 font-medium">{flightErrors[index]}</div>
+                        </div>
+                      )}
+
+                      {flight.validated && flight.validationData && (
+                        <div className="mt-4 bg-green-50 border border-green-200 rounded-lg p-4">
+                          <div className="text-green-700 font-medium mb-2">
+                            Valid: {flight.validationData.airline || 'Flight'} - {flight.validationData.departure?.airport} → {flight.validationData.arrival?.airport}
+                          </div>
+                          {flight.validationData.flightDate !== flight.flightDate && (
+                            <div className="text-sm text-green-600">
+                              Live tracking starts 4 hours before departure on {new Date(flight.flightDate).toLocaleDateString()}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+
+                  {formData.flights.length < 3 && (
+                    <button
+                      type="button"
+                      className="btn btn-secondary w-full"
+                      onClick={addConnectingFlight}
+                    >
+                      Add Connecting Flight
+                    </button>
+                  )}
+
+                  <div className="checkbox-option checked">
+                    <input
+                      type="checkbox"
+                      name="needsAirportPickup"
+                      checked={formData.needsAirportPickup || false}
+                      onChange={handleChange}
+                      className="form-checkbox mr-3"
+                    />
+                    <span className="font-medium">Needs Airport Pickup (from final destination)</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Self-Driving Mode Fields */}
+              {formData.transportMode === 'self-driving' && (
+                <div className="form-group">
+                  <label htmlFor="expectedArrival" className="form-label">Expected Arrival *</label>
+                  <input
+                    type="datetime-local"
+                    id="expectedArrival"
+                    name="expectedArrival"
+                    value={formData.expectedArrival}
+                    onChange={handleChange}
+                    className="form-input"
+                    required
+                  />
+                </div>
+              )}
+
+              {/* Universal Transportation Option */}
+              <div className={`checkbox-option ${formData.needsVenueTransport ? 'checked' : ''}`}>
+                <input
+                  type="checkbox"
+                  name="needsVenueTransport"
+                  checked={formData.needsVenueTransport}
+                  onChange={handleChange}
+                  className="form-checkbox mr-3"
+                />
+                <div>
+                  <span className="font-medium">Needs Transportation Between Venues</span>
+                  <div className="text-sm text-slate-500 mt-1">
+                    Check this if the VIP needs rides between different event locations
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Additional Information Section */}
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Additional Information</h3>
+              </div>
+              
+              <div className="form-group">
+                <label htmlFor="notes" className="form-label">Additional Notes</label>
+                <textarea
+                  id="notes"
+                  name="notes"
+                  value={formData.notes}
+                  onChange={handleChange}
+                  rows={4}
+                  className="form-textarea"
+                  placeholder="Special requirements, dietary restrictions, accessibility needs, etc."
+                />
+              </div>
+            </div>
+
+            {/* Form Actions */}
+            <div className="form-actions">
+              <button type="button" className="btn btn-secondary" onClick={onCancel}>
+                Cancel
+              </button>
+              <button type="submit" className="btn btn-primary">
+                Add VIP
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VipForm;

frontend/src/config/api.ts

@@ -0,0 +1,14 @@
+const DEFAULT_API_BASE =
+  typeof window !== 'undefined'
+    ? window.location.origin
+    : 'http://localhost:3000';
+
+export const API_BASE_URL =
+  import.meta.env.VITE_API_URL?.replace(/\/$/, '') || DEFAULT_API_BASE;
+
+export const apiCall = (endpoint: string, options?: RequestInit) => {
+  const url = /^https?:\/\//.test(endpoint)
+    ? endpoint
+    : `${API_BASE_URL}${endpoint}`;
+  return fetch(url, options);
+};

frontend/src/index.css

@@ -0,0 +1,208 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+  :root {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    line-height: 1.6;
+    font-weight: 400;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    color: #1e293b;
+  }
+
+  #root {
+    width: 100%;
+    margin: 0 auto;
+    text-align: left;
+  }
+
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Focus styles */
+  *:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+}
+
+/* Custom base styles */
+@layer base {
+  :root {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    line-height: 1.6;
+    font-weight: 400;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    color: #1e293b;
+  }
+
+  #root {
+    width: 100%;
+    margin: 0 auto;
+    text-align: left;
+  }
+
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Focus styles */
+  *:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+}
+
+/* Custom component styles */
+@layer components {
+  /* Modern Button Styles */
+  .btn {
+    @apply px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
+  }
+  
+  .btn-primary {
+    @apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white focus:ring-blue-500;
+  }
+  
+  .btn-secondary {
+    @apply bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white focus:ring-slate-500;
+  }
+  
+  .btn-danger {
+    @apply bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white focus:ring-red-500;
+  }
+  
+  .btn-success {
+    @apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white focus:ring-green-500;
+  }
+  
+  /* Modern Card Styles */
+  .card {
+    @apply bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden backdrop-blur-sm;
+  }
+  
+  /* Modern Form Styles */
+  .form-group {
+    @apply mb-6;
+  }
+  
+  .form-label {
+    @apply block text-sm font-semibold text-slate-700 mb-3;
+  }
+  
+  .form-input {
+    @apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white;
+  }
+  
+  .form-select {
+    @apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white transition-all duration-200;
+  }
+  
+  .form-textarea {
+    @apply w-full px-4 py-3 border border-slate-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white resize-none;
+  }
+  
+  .form-checkbox {
+    @apply w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500 focus:ring-2;
+  }
+  
+  .form-radio {
+    @apply w-4 h-4 text-blue-600 border-slate-300 focus:ring-blue-500 focus:ring-2;
+  }
+  
+  /* Modal Styles */
+  .modal-overlay {
+    @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50 p-4;
+  }
+  
+  .modal-content {
+    @apply bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto;
+  }
+  
+  .modal-header {
+    @apply bg-gradient-to-r from-blue-50 to-indigo-50 px-8 py-6 border-b border-slate-200/60;
+  }
+  
+  .modal-body {
+    @apply p-8;
+  }
+  
+  .modal-footer {
+    @apply bg-slate-50 px-8 py-6 border-t border-slate-200/60 flex justify-end space-x-4;
+  }
+  
+  /* Form Actions */
+  .form-actions {
+    @apply flex justify-end space-x-4 pt-6 border-t border-slate-200/60 mt-8;
+  }
+  
+  /* Form Sections */
+  .form-section {
+    @apply bg-slate-50 rounded-xl p-6 mb-6 border border-slate-200/60;
+  }
+  
+  .form-section-header {
+    @apply flex items-center justify-between mb-4;
+  }
+  
+  .form-section-title {
+    @apply text-lg font-bold text-slate-800;
+  }
+  
+  /* Radio Group */
+  .radio-group {
+    @apply flex gap-6 mt-3;
+  }
+  
+  .radio-option {
+    @apply flex items-center cursor-pointer bg-white rounded-lg px-4 py-3 border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all duration-200;
+  }
+  
+  .radio-option.selected {
+    @apply border-blue-500 bg-blue-50 ring-2 ring-blue-200;
+  }
+  
+  /* Checkbox Group */
+  .checkbox-option {
+    @apply flex items-center cursor-pointer bg-white rounded-lg px-4 py-3 border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all duration-200;
+  }
+  
+  .checkbox-option.checked {
+    @apply border-blue-500 bg-blue-50;
+  }
+}

frontend/src/main.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Auth0Provider } from '@auth0/auth0-react';
+import App from './App.tsx';
+import './index.css';
+
+const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
+const audience = import.meta.env.VITE_AUTH0_AUDIENCE;
+
+if (!domain || !clientId) {
+  throw new Error('Auth0 environment variables are missing. Please set VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID.');
+}
+
+const authorizationParams: Record<string, string> = {
+  redirect_uri: `${window.location.origin}/auth/callback`,
+  scope: 'openid profile email'
+};
+
+if (audience) {
+  authorizationParams.audience = audience;
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      authorizationParams={authorizationParams}
+      cacheLocation="localstorage"
+      useRefreshTokens={true}
+    >
+      <App />
+    </Auth0Provider>
+  </React.StrictMode>
+);

frontend/src/pages/AdminDashboard.tsx

@@ -0,0 +1,825 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { apiCall, API_BASE_URL } from '../config/api';
+import { generateTestVips, getTestOrganizations, generateVipSchedule } from '../utils/testVipData';
+
+interface ApiKeys {
+  aviationStackKey?: string;
+  googleMapsKey?: string;
+  twilioKey?: string;
+  auth0Domain?: string;
+  auth0ClientId?: string;
+  auth0ClientSecret?: string;
+  auth0Audience?: string;
+}
+
+interface SystemSettings {
+  defaultPickupLocation?: string;
+  defaultDropoffLocation?: string;
+  timeZone?: string;
+  notificationsEnabled?: boolean;
+}
+
+const AdminDashboard: React.FC = () => {
+  const navigate = useNavigate();
+  const [apiKeys, setApiKeys] = useState<ApiKeys>({});
+  const [systemSettings, setSystemSettings] = useState<SystemSettings>({});
+  const [testResults, setTestResults] = useState<{ [key: string]: string }>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<string | null>(null);
+  const [savedKeys, setSavedKeys] = useState<{ [key: string]: boolean }>({});
+  const [maskedKeyHints, setMaskedKeyHints] = useState<{ [key: string]: string }>({});
+  const [testDataLoading, setTestDataLoading] = useState(false);
+  const [testDataStatus, setTestDataStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const buildAuthHeaders = (includeJson = false) => {
+    const headers: Record<string, string> = {};
+    const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null;
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+    if (includeJson) {
+      headers['Content-Type'] = 'application/json';
+    }
+    return headers;
+  };
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await apiCall('/api/admin/settings', {
+        headers: buildAuthHeaders()
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+
+        const saved: { [key: string]: boolean } = {};
+        const maskedHints: { [key: string]: string } = {};
+        const cleanedApiKeys: ApiKeys = {};
+
+        if (data.apiKeys) {
+          Object.entries(data.apiKeys).forEach(([key, value]) => {
+            if (value && (value as string).startsWith('***')) {
+              saved[key] = true;
+              maskedHints[key] = value as string;
+            } else if (value) {
+              cleanedApiKeys[key as keyof ApiKeys] = value as string;
+            }
+          });
+        }
+
+        setSavedKeys(saved);
+        setMaskedKeyHints(maskedHints);
+        setApiKeys(cleanedApiKeys);
+        setSystemSettings(data.systemSettings || {});
+      } else if (response.status === 403) {
+        setError('You need administrator access to view this page.');
+      } else if (response.status === 401) {
+        setError('Authentication required. Please sign in again.');
+      } else {
+        setError('Failed to load admin settings.');
+      }
+    } catch (err) {
+      console.error('Failed to load settings:', err);
+      setError('Failed to load admin settings.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const handleApiKeyChange = (key: keyof ApiKeys, value: string) => {
+    setApiKeys(prev => ({ ...prev, [key]: value }));
+    // If user is typing a new key, mark it as not saved anymore
+    if (value && !value.startsWith('***')) {
+      setSavedKeys(prev => ({ ...prev, [key]: false }));
+      setMaskedKeyHints(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  };
+
+  const handleSettingChange = (key: keyof SystemSettings, value: any) => {
+    setSystemSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  const testApiConnection = async (apiType: string) => {
+    setTestResults(prev => ({ ...prev, [apiType]: 'Testing...' }));
+    
+    try {
+      const response = await apiCall(`/api/admin/test-api/${apiType}`, {
+        method: 'POST',
+        headers: buildAuthHeaders(true),
+        body: JSON.stringify({ 
+          apiKey: apiKeys[apiType as keyof ApiKeys] 
+        })
+      });
+
+      const result = await response.json();
+      
+      if (response.ok) {
+        setTestResults(prev => ({ 
+          ...prev, 
+          [apiType]: `Success: ${result.message}` 
+        }));
+      } else {
+        setTestResults(prev => ({ 
+          ...prev, 
+          [apiType]: `Failed: ${result.error}` 
+        }));
+      }
+    } catch (error) {
+      setTestResults(prev => ({ 
+        ...prev, 
+        [apiType]: 'Connection error' 
+      }));
+    }
+  };
+
+  const saveSettings = async () => {
+    setSaving(true);
+    setSaveStatus(null);
+    
+    try {
+      const response = await apiCall('/api/admin/settings', {
+        method: 'POST',
+        headers: buildAuthHeaders(true),
+        body: JSON.stringify({
+          apiKeys,
+          systemSettings
+        })
+      });
+
+      if (response.ok) {
+        setSaveStatus('Settings saved successfully!');
+        // Refresh the latest settings so saved states/labels stay accurate
+        await loadSettings();
+        setTimeout(() => setSaveStatus(null), 3000);
+      } else {
+        setSaveStatus('Failed to save settings');
+      }
+    } catch (error) {
+      setSaveStatus('Error saving settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('authToken');
+    navigate('/');
+    window.location.reload();
+  };
+
+  // Test VIP functions
+  const createTestVips = async () => {
+    setTestDataLoading(true);
+    setTestDataStatus('Creating test VIPs and schedules...');
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      const testVips = generateTestVips();
+      
+      let vipSuccessCount = 0;
+      let vipErrorCount = 0;
+      let scheduleSuccessCount = 0;
+      let scheduleErrorCount = 0;
+      const createdVipIds: string[] = [];
+      
+      // First, create all VIPs
+      for (const vipData of testVips) {
+        try {
+          const response = await apiCall('/api/vips', {
+            method: 'POST',
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(vipData),
+          });
+          
+          if (response.ok) {
+            const createdVip = await response.json();
+            createdVipIds.push(createdVip.id);
+            vipSuccessCount++;
+          } else {
+            vipErrorCount++;
+            console.error(`Failed to create VIP: ${vipData.name}`);
+          }
+        } catch (error) {
+          vipErrorCount++;
+          console.error(`Error creating VIP ${vipData.name}:`, error);
+        }
+      }
+      
+      setTestDataStatus(`Created ${vipSuccessCount} VIPs, now creating schedules...`);
+      
+      // Then, create schedules for each successfully created VIP
+      for (let i = 0; i < createdVipIds.length; i++) {
+        const vipId = createdVipIds[i];
+        const vipData = testVips[i];
+        
+        try {
+          const scheduleEvents = generateVipSchedule(vipData.name, vipData.department, vipData.transportMode);
+          
+          for (const event of scheduleEvents) {
+            try {
+              const eventWithId = {
+                ...event,
+                id: Date.now().toString() + Math.random().toString(36).substr(2, 9)
+              };
+              
+              const scheduleResponse = await apiCall(`/api/vips/${vipId}/schedule`, {
+                method: 'POST',
+                headers: {
+                  'Authorization': `Bearer ${token}`,
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(eventWithId),
+              });
+              
+              if (scheduleResponse.ok) {
+                scheduleSuccessCount++;
+              } else {
+                scheduleErrorCount++;
+                console.error(`Failed to create schedule event for ${vipData.name}: ${event.title}`);
+              }
+            } catch (error) {
+              scheduleErrorCount++;
+              console.error(`Error creating schedule event for ${vipData.name}:`, error);
+            }
+          }
+        } catch (error) {
+          console.error(`Error generating schedule for ${vipData.name}:`, error);
+        }
+      }
+      
+      setTestDataStatus(`✅ Created ${vipSuccessCount} VIPs with ${scheduleSuccessCount} schedule events! ${vipErrorCount > 0 || scheduleErrorCount > 0 ? `(${vipErrorCount + scheduleErrorCount} failed)` : ''}`);
+    } catch (error) {
+      setTestDataStatus('❌ Failed to create test VIPs and schedules');
+      console.error('Error creating test data:', error);
+    } finally {
+      setTestDataLoading(false);
+      setTimeout(() => setTestDataStatus(null), 8000);
+    }
+  };
+
+  const removeTestVips = async () => {
+    if (!confirm('Are you sure you want to remove all test VIPs? This will delete VIPs from the test organizations.')) {
+      return;
+    }
+    
+    setTestDataLoading(true);
+    setTestDataStatus('Removing test VIPs...');
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      
+      // First, get all VIPs
+      const response = await apiCall('/api/vips', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch VIPs');
+      }
+      
+      const allVips = await response.json();
+      
+      // Filter test VIPs by organization names
+      const testOrganizations = getTestOrganizations();
+      const testVips = allVips.filter((vip: any) => testOrganizations.includes(vip.organization));
+      
+      let successCount = 0;
+      let errorCount = 0;
+      
+      for (const vip of testVips) {
+        try {
+          const deleteResponse = await apiCall(`/api/vips/${vip.id}`, {
+            method: 'DELETE',
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              'Content-Type': 'application/json'
+            }
+          });
+          
+          if (deleteResponse.ok) {
+            successCount++;
+          } else {
+            errorCount++;
+            console.error(`Failed to delete VIP: ${vip.name}`);
+          }
+        } catch (error) {
+          errorCount++;
+          console.error(`Error deleting VIP ${vip.name}:`, error);
+        }
+      }
+      
+      setTestDataStatus(`🗑️ Removed ${successCount} test VIPs successfully! ${errorCount > 0 ? `(${errorCount} failed)` : ''}`);
+    } catch (error) {
+      setTestDataStatus('❌ Failed to remove test VIPs');
+      console.error('Error removing test VIPs:', error);
+    } finally {
+      setTestDataLoading(false);
+      setTimeout(() => setTestDataStatus(null), 5000);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex justify-center items-center">
+        <div className="bg-white rounded-2xl shadow-xl p-8 flex items-center space-x-4 border border-slate-200/60">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading admin settings...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex justify-center items-center">
+        <div className="bg-white rounded-2xl shadow-xl p-8 w-full max-w-xl border border-rose-200/70">
+          <h2 className="text-2xl font-bold text-rose-700 mb-4">Admin access required</h2>
+          <p className="text-slate-600 mb-6">{error}</p>
+          <button
+            className="btn btn-primary"
+            onClick={() => navigate('/')}
+          >
+            Return to dashboard
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+              Admin Dashboard
+            </h1>
+            <p className="text-slate-600 mt-2">System configuration and API management</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <button 
+              className="btn btn-secondary"
+              onClick={() => navigate('/')}
+            >
+              Back to Dashboard
+            </button>
+            <button 
+              className="btn btn-danger"
+              onClick={handleLogout}
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* API Keys Section */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800">API Key Management</h2>
+          <p className="text-slate-600 mt-1">Configure external service integrations</p>
+        </div>
+        
+        <div className="p-8 space-y-8">
+          {/* AviationStack API */}
+          <div className="form-section">
+            <div className="form-section-header">
+              <h3 className="form-section-title">AviationStack API</h3>
+              {savedKeys.aviationStackKey && (
+                <span className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                  Configured
+                </span>
+              )}
+            </div>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 items-end">
+              <div className="lg:col-span-2">
+                <label className="form-label">API Key</label>
+                <input
+                  type="password"
+                  placeholder={savedKeys.aviationStackKey && maskedKeyHints.aviationStackKey
+                    ? `Saved (${maskedKeyHints.aviationStackKey.slice(-4)})`
+                    : 'Enter AviationStack API key'}
+                  value={apiKeys.aviationStackKey || ''}
+                  onChange={(e) => handleApiKeyChange('aviationStackKey', e.target.value)}
+                  className="form-input"
+                />
+                {savedKeys.aviationStackKey && maskedKeyHints.aviationStackKey && !apiKeys.aviationStackKey && (
+                  <p className="text-xs text-slate-500 mt-1">
+                    Currently saved key ends with {maskedKeyHints.aviationStackKey.slice(-4)}. Enter a new value to replace it.
+                  </p>
+                )}
+                <p className="text-xs text-slate-500 mt-1">
+                  Get your key from: https://aviationstack.com/dashboard
+                </p>
+              </div>
+              
+              <div>
+                <button 
+                  className="btn btn-secondary w-full"
+                  onClick={() => testApiConnection('aviationStackKey')}
+                >
+                  Test Connection
+                </button>
+              </div>
+              
+              <div>
+                {testResults.aviationStackKey && (
+                  <div className={`p-3 rounded-lg text-sm ${
+                    testResults.aviationStackKey.includes('Success') 
+                      ? 'bg-green-50 text-green-700 border border-green-200' 
+                      : 'bg-red-50 text-red-700 border border-red-200'
+                  }`}>
+                    {testResults.aviationStackKey}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Auth0 Credentials */}
+          <div className="form-section">
+            <div className="form-section-header">
+              <h3 className="form-section-title">Auth0 Configuration</h3>
+              {(savedKeys.auth0Domain || savedKeys.auth0ClientId || savedKeys.auth0ClientSecret) && (
+                <span className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                  Configured
+                </span>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="form-group">
+                <label className="form-label">Auth0 Domain</label>
+                <input
+                  type="text"
+                  placeholder={savedKeys.auth0Domain && maskedKeyHints.auth0Domain
+                    ? `Saved (${maskedKeyHints.auth0Domain.slice(-4)})`
+                    : 'e.g. dev-1234abcd.us.auth0.com'}
+                  value={apiKeys.auth0Domain || ''}
+                  onChange={(e) => handleApiKeyChange('auth0Domain', e.target.value)}
+                  className="form-input"
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">Client ID</label>
+                <input
+                  type="password"
+                  placeholder={savedKeys.auth0ClientId && maskedKeyHints.auth0ClientId
+                    ? `Saved (${maskedKeyHints.auth0ClientId.slice(-4)})`
+                    : 'Enter Auth0 application Client ID'}
+                  value={apiKeys.auth0ClientId || ''}
+                  onChange={(e) => handleApiKeyChange('auth0ClientId', e.target.value)}
+                  className="form-input"
+                />
+                {savedKeys.auth0ClientId && maskedKeyHints.auth0ClientId && !apiKeys.auth0ClientId && (
+                  <p className="text-xs text-slate-500 mt-1">
+                    Saved client ID ends with {maskedKeyHints.auth0ClientId.slice(-4)}. Provide a new ID to update it.
+                  </p>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">Client Secret</label>
+                <input
+                  type="password"
+                  placeholder={savedKeys.auth0ClientSecret && maskedKeyHints.auth0ClientSecret
+                    ? `Saved (${maskedKeyHints.auth0ClientSecret.slice(-4)})`
+                    : 'Enter Auth0 application Client Secret'}
+                  value={apiKeys.auth0ClientSecret || ''}
+                  onChange={(e) => handleApiKeyChange('auth0ClientSecret', e.target.value)}
+                  className="form-input"
+                />
+                {savedKeys.auth0ClientSecret && maskedKeyHints.auth0ClientSecret && !apiKeys.auth0ClientSecret && (
+                  <p className="text-xs text-slate-500 mt-1">
+                    Saved client secret ends with {maskedKeyHints.auth0ClientSecret.slice(-4)}. Provide a new secret to rotate it.
+                  </p>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">API Audience (Identifier)</label>
+                <input
+                  type="text"
+                  placeholder={apiKeys.auth0Audience || 'https://your-api-identifier'}
+                  value={apiKeys.auth0Audience || ''}
+                  onChange={(e) => handleApiKeyChange('auth0Audience', e.target.value)}
+                  className="form-input"
+                />
+                <p className="text-xs text-slate-500 mt-1">
+                  Create an API in Auth0 and use its Identifier here (e.g. https://vip-coordinator-api).
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
+              <h4 className="font-semibold text-blue-900 mb-2">Setup Instructions</h4>
+              <ol className="text-sm text-blue-800 space-y-1 list-decimal list-inside">
+                <li>Sign in to the Auth0 Dashboard</li>
+                <li>Create a <strong>Single Page Application</strong> for the frontend</li>
+                <li>Set Allowed Callback URL to <code>https://bsa.madeamess.online/auth/callback</code></li>
+                <li>Set Allowed Logout URL to <code>https://bsa.madeamess.online/</code></li>
+                <li>Set Allowed Web Origins to <code>https://bsa.madeamess.online</code></li>
+                <li>Create an <strong>API</strong> in Auth0 for the backend and use its Identifier as the audience</li>
+              </ol>
+            </div>
+          </div>
+
+          {/* Future APIs */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-50">
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Google Maps API</h3>
+                <span className="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                  Coming Soon
+                </span>
+              </div>
+              <input
+                type="password"
+                placeholder="Google Maps API key (not yet implemented)"
+                disabled
+                className="form-input"
+              />
+            </div>
+
+            <div className="form-section">
+              <div className="form-section-header">
+                <h3 className="form-section-title">Twilio API</h3>
+                <span className="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                  Coming Soon
+                </span>
+              </div>
+              <input
+                type="password"
+                placeholder="Twilio API key (not yet implemented)"
+                disabled
+                className="form-input"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* System Settings Section */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800">System Settings</h2>
+          <p className="text-slate-600 mt-1">Configure default system behavior</p>
+        </div>
+        
+        <div className="p-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="form-group">
+              <label htmlFor="defaultPickup" className="form-label">Default Pickup Location</label>
+              <input
+                type="text"
+                id="defaultPickup"
+                value={systemSettings.defaultPickupLocation || ''}
+                onChange={(e) => handleSettingChange('defaultPickupLocation', e.target.value)}
+                placeholder="e.g., JFK Airport Terminal 4"
+                className="form-input"
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="defaultDropoff" className="form-label">Default Dropoff Location</label>
+              <input
+                type="text"
+                id="defaultDropoff"
+                value={systemSettings.defaultDropoffLocation || ''}
+                onChange={(e) => handleSettingChange('defaultDropoffLocation', e.target.value)}
+                placeholder="e.g., Hilton Downtown"
+                className="form-input"
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="timezone" className="form-label">Time Zone</label>
+              <select
+                id="timezone"
+                value={systemSettings.timeZone || 'America/New_York'}
+                onChange={(e) => handleSettingChange('timeZone', e.target.value)}
+                className="form-select"
+              >
+                <option value="America/New_York">Eastern Time</option>
+                <option value="America/Chicago">Central Time</option>
+                <option value="America/Denver">Mountain Time</option>
+                <option value="America/Los_Angeles">Pacific Time</option>
+                <option value="UTC">UTC</option>
+              </select>
+            </div>
+
+            <div className="form-group">
+              <div className="checkbox-option">
+                <input
+                  type="checkbox"
+                  checked={systemSettings.notificationsEnabled || false}
+                  onChange={(e) => handleSettingChange('notificationsEnabled', e.target.checked)}
+                  className="form-checkbox mr-3"
+                />
+                <span className="font-medium">Enable Email/SMS Notifications</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Test VIP Data Section */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-orange-50 to-red-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800">Test VIP Data Management</h2>
+          <p className="text-slate-600 mt-1">Create and manage test VIP data for application testing</p>
+        </div>
+        
+        <div className="p-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-green-50 border border-green-200 rounded-xl p-6">
+              <h3 className="text-lg font-bold text-slate-800 mb-3">Create Test VIPs</h3>
+              <p className="text-slate-600 mb-4">
+                Generate 20 diverse test VIPs (10 Admin department, 10 Office of Development) with realistic data including flights, transport modes, and special requirements.
+              </p>
+              <ul className="text-sm text-slate-600 mb-4 space-y-1">
+                <li>• Mixed flight and self-driving transport modes</li>
+                <li>• Single flights, connecting flights, and multi-segment journeys</li>
+                <li>• Diverse organizations and special requirements</li>
+                <li>• Realistic arrival dates (tomorrow and day after)</li>
+              </ul>
+              <button 
+                className="btn btn-success w-full"
+                onClick={createTestVips}
+                disabled={testDataLoading}
+              >
+                {testDataLoading ? (
+                  <>
+                    <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>
+                    Creating Test VIPs...
+                  </>
+                ) : (
+                  '🎭 Create 20 Test VIPs'
+                )}
+              </button>
+            </div>
+            
+            <div className="bg-red-50 border border-red-200 rounded-xl p-6">
+              <h3 className="text-lg font-bold text-slate-800 mb-3">Remove Test VIPs</h3>
+              <p className="text-slate-600 mb-4">
+                Remove all test VIPs from the system. This will delete VIPs from the following test organizations:
+              </p>
+              <div className="text-xs text-slate-500 mb-4 max-h-20 overflow-y-auto">
+                <div className="grid grid-cols-1 gap-1">
+                  {getTestOrganizations().slice(0, 8).map(org => (
+                    <div key={org}>• {org}</div>
+                  ))}
+                  <div className="text-slate-400">... and 12 more organizations</div>
+                </div>
+              </div>
+              <button 
+                className="btn btn-danger w-full"
+                onClick={removeTestVips}
+                disabled={testDataLoading}
+              >
+                {testDataLoading ? (
+                  <>
+                    <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>
+                    Removing Test VIPs...
+                  </>
+                ) : (
+                  '🗑️ Remove All Test VIPs'
+                )}
+              </button>
+            </div>
+          </div>
+          
+          {testDataStatus && (
+            <div className={`mt-6 p-4 rounded-lg text-center font-medium ${
+              testDataStatus.includes('✅') || testDataStatus.includes('🗑️')
+                ? 'bg-green-50 text-green-700 border border-green-200' 
+                : 'bg-red-50 text-red-700 border border-red-200'
+            }`}>
+              {testDataStatus}
+            </div>
+          )}
+          
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6">
+            <h4 className="font-semibold text-blue-900 mb-2">💡 Test Data Details</h4>
+            <div className="text-sm text-blue-800 space-y-1">
+              <p><strong>Admin Department (10 VIPs):</strong> University officials, ambassadors, ministers, and executives</p>
+              <p><strong>Office of Development (10 VIPs):</strong> Donors, foundation leaders, and philanthropists</p>
+              <p><strong>Transport Modes:</strong> Mix of flights (single, connecting, multi-segment) and self-driving</p>
+              <p><strong>Special Requirements:</strong> Dietary restrictions, accessibility needs, security details, interpreters</p>
+              <p><strong>Full Day Schedules:</strong> Each VIP gets 5-7 realistic events including meetings, meals, tours, and presentations</p>
+              <p><strong>Schedule Types:</strong> Airport pickup, welcome breakfast, department meetings, working lunches, campus tours, receptions</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* API Documentation Section */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-purple-50 to-pink-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800">API Documentation</h2>
+          <p className="text-slate-600 mt-1">Developer resources and API testing</p>
+        </div>
+        
+        <div className="p-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
+              <h3 className="text-lg font-bold text-slate-800 mb-3">Interactive API Documentation</h3>
+              <p className="text-slate-600 mb-4">
+                Explore and test all API endpoints with the interactive Swagger UI documentation.
+              </p>
+              <button 
+                className="btn btn-primary w-full mb-2"
+                onClick={() => window.open(`${API_BASE_URL}/api-docs.html`, '_blank')}
+              >
+                Open API Documentation
+              </button>
+              <p className="text-xs text-slate-500">
+                Opens in a new tab with full endpoint documentation and testing capabilities
+              </p>
+            </div>
+            
+            <div className="bg-green-50 border border-green-200 rounded-xl p-6">
+              <h3 className="text-lg font-bold text-slate-800 mb-3">Quick API Examples</h3>
+              <div className="space-y-2 text-sm">
+                <div>
+                  <span className="font-medium">Health Check:</span>
+                  <code className="ml-2 bg-white px-2 py-1 rounded text-xs">GET /api/health</code>
+                </div>
+                <div>
+                  <span className="font-medium">Get VIPs:</span>
+                  <code className="ml-2 bg-white px-2 py-1 rounded text-xs">GET /api/vips</code>
+                </div>
+                <div>
+                  <span className="font-medium">Get Drivers:</span>
+                  <code className="ml-2 bg-white px-2 py-1 rounded text-xs">GET /api/drivers</code>
+                </div>
+                <div>
+                  <span className="font-medium">Flight Info:</span>
+                  <code className="ml-2 bg-white px-2 py-1 rounded text-xs">GET /api/flights/UA1234</code>
+                </div>
+              </div>
+              <button 
+                className="btn btn-secondary w-full mt-4"
+                onClick={() => window.open('/README-API.md', '_blank')}
+              >
+                View API Guide
+              </button>
+            </div>
+          </div>
+          
+          <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mt-6">
+            <p className="text-amber-800">
+              <strong>Pro Tip:</strong> The interactive documentation allows you to test API endpoints directly in your browser. 
+              Perfect for developers integrating with the VIP Coordinator system!
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Save Button */}
+      <div className="text-center">
+        <button 
+          className="btn btn-success text-lg px-8 py-4"
+          onClick={saveSettings}
+          disabled={saving}
+        >
+          {saving ? 'Saving...' : 'Save All Settings'}
+        </button>
+        
+        {saveStatus && (
+          <div className={`mt-4 p-4 rounded-lg ${
+            saveStatus.includes('successfully') 
+              ? 'bg-green-50 text-green-700 border border-green-200' 
+              : 'bg-red-50 text-red-700 border border-red-200'
+          }`}>
+            {saveStatus}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AdminDashboard;

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,378 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { apiCall } from '../config/api';
+
+interface ScheduleEvent {
+  id: string;
+  title: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+  type: 'transport' | 'meeting' | 'event' | 'meal' | 'accommodation';
+}
+
+interface Vip {
+  id: string;
+  name: string;
+  organization: string;
+  transportMode: 'flight' | 'self-driving';
+  flightNumber?: string;
+  flights?: Array<{
+    flightNumber: string;
+    flightDate: string;
+    segment: number;
+  }>;
+  expectedArrival?: string;
+  arrivalTime?: string;
+  needsAirportPickup?: boolean;
+  needsVenueTransport: boolean;
+  notes?: string;
+  currentEvent?: ScheduleEvent;
+  nextEvent?: ScheduleEvent;
+  nextEventTime?: string;
+}
+
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+  currentLocation: { lat: number; lng: number };
+  assignedVipIds: string[];
+}
+
+const Dashboard: React.FC = () => {
+  const [vips, setVips] = useState<Vip[]>([]);
+  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Helper functions for event management
+  const getCurrentEvent = (events: ScheduleEvent[]) => {
+    const now = new Date();
+    return events.find(event => 
+      new Date(event.startTime) <= now && 
+      new Date(event.endTime) > now && 
+      event.status === 'in-progress'
+    ) || null;
+  };
+
+  const getNextEvent = (events: ScheduleEvent[]) => {
+    const now = new Date();
+    const upcomingEvents = events.filter(event => 
+      new Date(event.startTime) > now && event.status === 'scheduled'
+    ).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+    
+    return upcomingEvents.length > 0 ? upcomingEvents[0] : null;
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleString([], {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem('authToken');
+        const authHeaders = {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        };
+        
+        const [vipsResponse, driversResponse] = await Promise.all([
+          apiCall('/api/vips', { headers: authHeaders }),
+          apiCall('/api/drivers', { headers: authHeaders })
+        ]);
+        
+        if (!vipsResponse.ok || !driversResponse.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        
+        const vipsData = await vipsResponse.json();
+        const driversData = await driversResponse.json();
+        
+        // Fetch schedule for each VIP and determine current/next events
+        const vipsWithSchedules = await Promise.all(
+          vipsData.map(async (vip: Vip) => {
+            try {
+              const scheduleResponse = await apiCall(`/api/vips/${vip.id}/schedule`, {
+                headers: authHeaders
+              });
+              
+              if (scheduleResponse.ok) {
+                const scheduleData = await scheduleResponse.json();
+                
+                const currentEvent = getCurrentEvent(scheduleData);
+                const nextEvent = getNextEvent(scheduleData);
+                
+                return {
+                  ...vip,
+                  currentEvent,
+                  nextEvent,
+                  nextEventTime: nextEvent ? nextEvent.startTime : null
+                };
+              } else {
+                return { ...vip, currentEvent: null, nextEvent: null, nextEventTime: null };
+              }
+            } catch (error) {
+              console.error(`Error fetching schedule for VIP ${vip.id}:`, error);
+              return { ...vip, currentEvent: null, nextEvent: null, nextEventTime: null };
+            }
+          })
+        );
+        
+        // Sort VIPs by next event time (soonest first), then by name
+        const sortedVips = vipsWithSchedules.sort((a, b) => {
+          // VIPs with current events first
+          if (a.currentEvent && !b.currentEvent) return -1;
+          if (!a.currentEvent && b.currentEvent) return 1;
+          
+          // Then by next event time (soonest first)
+          if (a.nextEventTime && b.nextEventTime) {
+            return new Date(a.nextEventTime).getTime() - new Date(b.nextEventTime).getTime();
+          }
+          if (a.nextEventTime && !b.nextEventTime) return -1;
+          if (!a.nextEventTime && b.nextEventTime) return 1;
+          
+          // Finally by name if no events
+          return a.name.localeCompare(b.name);
+        });
+        
+        setVips(sortedVips);
+        setDrivers(driversData);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-64">
+        <div className="bg-white rounded-2xl shadow-lg p-8 flex items-center space-x-4">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading dashboard...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+              VIP Coordinator Dashboard
+            </h1>
+            <p className="text-slate-600 mt-2">Real-time overview of VIP activities and coordination</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
+              {vips.length} Active VIPs
+            </div>
+            <div className="bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
+              {drivers.length} Drivers
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        {/* VIP Status Dashboard */}
+        <div className="xl:col-span-2">
+          <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-slate-200/60">
+              <h2 className="text-xl font-bold text-slate-800 flex items-center">
+                VIP Status Dashboard
+                <span className="ml-2 bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
+                  {vips.length} VIPs
+                </span>
+              </h2>
+            </div>
+            <div className="p-6">
+              {vips.length === 0 ? (
+                <div className="text-center py-12">
+                  <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <div className="w-8 h-8 bg-slate-300 rounded-full"></div>
+                  </div>
+                  <p className="text-slate-500 font-medium">No VIPs currently scheduled</p>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {vips.map((vip) => {
+                    const hasCurrentEvent = !!vip.currentEvent;
+                    const hasNextEvent = !!vip.nextEvent;
+                    
+                    return (
+                      <div key={vip.id} className={`
+                        relative rounded-xl border-2 p-6 transition-all duration-200 hover:shadow-lg
+                        ${hasCurrentEvent 
+                          ? 'border-amber-300 bg-gradient-to-r from-amber-50 to-orange-50' 
+                          : hasNextEvent 
+                          ? 'border-blue-300 bg-gradient-to-r from-blue-50 to-indigo-50' 
+                          : 'border-slate-200 bg-slate-50'
+                        }
+                      `}>
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-3 mb-3">
+                              <h3 className="text-lg font-bold text-slate-900">{vip.name}</h3>
+                              {hasCurrentEvent && (
+                                <span className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-bold animate-pulse">
+                                  ACTIVE
+                                </span>
+                              )}
+                            </div>
+                            <p className="text-slate-600 text-sm mb-4">{vip.organization}</p>
+                            
+                            {/* Current Event */}
+                            {vip.currentEvent && (
+                              <div className="bg-white border border-amber-200 rounded-lg p-4 mb-3 shadow-sm">
+                                <div className="flex items-center gap-2 mb-2">
+                                  <span className="text-amber-600 font-bold text-sm">CURRENT EVENT</span>
+                                </div>
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className="font-semibold text-slate-900">{vip.currentEvent.title}</span>
+                                </div>
+                                <p className="text-slate-600 text-sm mb-1">Location: {vip.currentEvent.location}</p>
+                                <p className="text-slate-500 text-xs">Until {formatTime(vip.currentEvent.endTime)}</p>
+                              </div>
+                            )}
+                            
+                            {/* Next Event */}
+                            {vip.nextEvent && (
+                              <div className="bg-white border border-blue-200 rounded-lg p-4 mb-3 shadow-sm">
+                                <div className="flex items-center gap-2 mb-2">
+                                  <span className="text-blue-600 font-bold text-sm">NEXT EVENT</span>
+                                </div>
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className="font-semibold text-slate-900">{vip.nextEvent.title}</span>
+                                </div>
+                                <p className="text-slate-600 text-sm mb-1">Location: {vip.nextEvent.location}</p>
+                                <p className="text-slate-500 text-xs">{formatTime(vip.nextEvent.startTime)} - {formatTime(vip.nextEvent.endTime)}</p>
+                              </div>
+                            )}
+                            
+                            {/* No Events */}
+                            {!vip.currentEvent && !vip.nextEvent && (
+                              <div className="bg-white border border-slate-200 rounded-lg p-4 mb-3">
+                                <p className="text-slate-500 text-sm italic">No scheduled events</p>
+                              </div>
+                            )}
+                            
+                            {/* Transport Info */}
+                            <div className="flex items-center gap-2 text-xs text-slate-500 bg-white/50 rounded-lg px-3 py-2">
+                              {vip.transportMode === 'flight' ? (
+                                <span>Flight: {vip.flights && vip.flights.length > 0 ? 
+                                  vip.flights.map(f => f.flightNumber).join(' → ') : 
+                                  vip.flightNumber || 'TBD'}
+                                </span>
+                              ) : (
+                                <span>Self-driving | Expected: {vip.expectedArrival ? formatTime(vip.expectedArrival) : 'TBD'}</span>
+                              )}
+                            </div>
+                          </div>
+                          
+                          <div className="flex flex-col gap-2 ml-6">
+                            <Link 
+                              to={`/vips/${vip.id}`} 
+                              className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
+                            >
+                              Details
+                            </Link>
+                            <Link 
+                              to={`/vips/${vip.id}#schedule`} 
+                              className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
+                            >
+                              Schedule
+                            </Link>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Drivers Card */}
+          <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+            <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-slate-200/60">
+              <h2 className="text-lg font-bold text-slate-800 flex items-center">
+                Available Drivers
+                <span className="ml-2 bg-green-100 text-green-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
+                  {drivers.length}
+                </span>
+              </h2>
+            </div>
+            <div className="p-6">
+              {drivers.length === 0 ? (
+                <div className="text-center py-8">
+                  <div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                    <div className="w-6 h-6 bg-slate-300 rounded-full"></div>
+                  </div>
+                  <p className="text-slate-500 text-sm">No drivers available</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {drivers.map((driver) => (
+                    <div key={driver.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <h4 className="font-semibold text-slate-900">{driver.name}</h4>
+                          <p className="text-slate-600 text-sm">{driver.phone}</p>
+                        </div>
+                        <div className="text-right">
+                          <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded-full">
+                            {driver.assignedVipIds.length} VIPs
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Quick Actions Card */}
+          <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+            <div className="bg-gradient-to-r from-purple-50 to-pink-50 px-6 py-4 border-b border-slate-200/60">
+              <h2 className="text-lg font-bold text-slate-800">Quick Actions</h2>
+            </div>
+            <div className="p-6 space-y-3">
+              <Link 
+                to="/vips" 
+                className="block w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
+              >
+                Manage VIPs
+              </Link>
+              <Link 
+                to="/drivers" 
+                className="block w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-3 rounded-lg font-medium transition-all duration-200 text-center shadow-lg hover:shadow-xl"
+              >
+                Manage Drivers
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

frontend/src/pages/DriverDashboard.tsx

@@ -0,0 +1,763 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { apiCall } from '../config/api';
+import GanttChart from '../components/GanttChart';
+
+interface DriverScheduleEvent {
+  id: string;
+  title: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  description?: string;
+  status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+  type: 'transport' | 'meeting' | 'event' | 'meal' | 'accommodation';
+  vipId: string;
+  vipName: string;
+}
+
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+}
+
+interface DriverScheduleData {
+  driver: Driver;
+  schedule: DriverScheduleEvent[];
+}
+
+const DriverDashboard: React.FC = () => {
+  const { driverId } = useParams<{ driverId: string }>();
+  const [scheduleData, setScheduleData] = useState<DriverScheduleData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (driverId) {
+      fetchDriverSchedule();
+    }
+  }, [driverId]);
+
+  const fetchDriverSchedule = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/drivers/${driverId}/schedule`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setScheduleData(data);
+      } else {
+        setError('Driver not found');
+      }
+    } catch (err) {
+      setError('Error loading driver schedule');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'scheduled': return '#3498db';
+      case 'in-progress': return '#f39c12';
+      case 'completed': return '#2ecc71';
+      case 'cancelled': return '#e74c3c';
+      default: return '#95a5a6';
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'transport': return '🚗';
+      case 'meeting': return '🤝';
+      case 'event': return '🎉';
+      case 'meal': return '🍽️';
+      case 'accommodation': return '🏨';
+      default: return '📅';
+    }
+  };
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const formatDate = (timeString: string) => {
+    return new Date(timeString).toLocaleDateString([], {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
+  const getNextEvent = () => {
+    if (!scheduleData?.schedule) return null;
+    
+    const now = new Date();
+    const upcomingEvents = scheduleData.schedule.filter(event => 
+      new Date(event.startTime) > now && event.status === 'scheduled'
+    ).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+    
+    return upcomingEvents.length > 0 ? upcomingEvents[0] : null;
+  };
+
+  const getCurrentEvent = () => {
+    if (!scheduleData?.schedule) return null;
+    
+    const now = new Date();
+    return scheduleData.schedule.find(event => 
+      new Date(event.startTime) <= now && 
+      new Date(event.endTime) > now && 
+      event.status === 'in-progress'
+    ) || null;
+  };
+
+  const groupEventsByDay = (events: DriverScheduleEvent[]) => {
+    const grouped: { [key: string]: DriverScheduleEvent[] } = {};
+    
+    events.forEach(event => {
+      const date = new Date(event.startTime).toDateString();
+      if (!grouped[date]) {
+        grouped[date] = [];
+      }
+      grouped[date].push(event);
+    });
+
+    // Sort events within each day by start time
+    Object.keys(grouped).forEach(date => {
+      grouped[date].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+    });
+
+    return grouped;
+  };
+
+  const handlePrintSchedule = () => {
+    if (!scheduleData) return;
+    
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) return;
+
+    const groupedSchedule = groupEventsByDay(scheduleData.schedule);
+
+    const printContent = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Driver Schedule - ${scheduleData.driver.name}</title>
+          <meta charset="UTF-8">
+          <style>
+            * {
+              margin: 0;
+              padding: 0;
+              box-sizing: border-box;
+            }
+            
+            body {
+              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+              line-height: 1.6;
+              color: #2d3748;
+              background: #ffffff;
+            }
+            
+            .container {
+              max-width: 800px;
+              margin: 0 auto;
+              padding: 40px 30px;
+            }
+            
+            .header {
+              text-align: center;
+              margin-bottom: 40px;
+              padding-bottom: 30px;
+              border-bottom: 3px solid #e2e8f0;
+              background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+              color: white;
+              padding: 40px 30px;
+              border-radius: 15px;
+              margin: -40px -30px 40px -30px;
+            }
+            
+            .header h1 {
+              font-size: 2.5rem;
+              font-weight: 700;
+              margin-bottom: 10px;
+              text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            
+            .header h2 {
+              font-size: 1.8rem;
+              font-weight: 600;
+              margin-bottom: 20px;
+              opacity: 0.95;
+            }
+            
+            .driver-info {
+              background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+              padding: 25px;
+              border-radius: 12px;
+              margin-bottom: 30px;
+              border: 1px solid #e2e8f0;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            }
+            
+            .driver-info p {
+              margin-bottom: 8px;
+              font-size: 1rem;
+            }
+            
+            .driver-info strong {
+              color: #4a5568;
+              font-weight: 600;
+            }
+            
+            .day-section {
+              margin-bottom: 40px;
+              page-break-inside: avoid;
+            }
+            
+            .day-header {
+              background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+              color: white;
+              padding: 20px 25px;
+              font-size: 1.3rem;
+              font-weight: 700;
+              margin-bottom: 20px;
+              border-radius: 10px;
+              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+              text-align: center;
+            }
+            
+            .event {
+              background: white;
+              border: 1px solid #e2e8f0;
+              margin-bottom: 15px;
+              padding: 25px;
+              border-radius: 12px;
+              display: flex;
+              align-items: flex-start;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            }
+            
+            .event-time {
+              min-width: 120px;
+              background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
+              padding: 15px;
+              border-radius: 8px;
+              text-align: center;
+              margin-right: 25px;
+              border: 1px solid #cbd5e0;
+            }
+            
+            .event-time .time {
+              font-weight: 700;
+              font-size: 1rem;
+              color: #2d3748;
+              display: block;
+            }
+            
+            .event-time .separator {
+              font-size: 0.8rem;
+              color: #718096;
+              margin: 5px 0;
+            }
+            
+            .event-details {
+              flex: 1;
+            }
+            
+            .event-title {
+              font-weight: 700;
+              font-size: 1.2rem;
+              margin-bottom: 10px;
+              color: #2d3748;
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            }
+            
+            .event-icon {
+              font-size: 1.3rem;
+            }
+            
+            .event-location {
+              color: #4a5568;
+              margin-bottom: 8px;
+              font-weight: 500;
+              display: flex;
+              align-items: center;
+              gap: 6px;
+            }
+            
+            .event-vip {
+              color: #e53e3e;
+              font-weight: 600;
+              margin-bottom: 8px;
+              display: flex;
+              align-items: center;
+              gap: 6px;
+            }
+            
+            .event-description {
+              background: #f7fafc;
+              padding: 12px 15px;
+              border-radius: 8px;
+              font-style: italic;
+              color: #4a5568;
+              margin-bottom: 10px;
+              border-left: 4px solid #cbd5e0;
+            }
+            
+            .footer {
+              margin-top: 50px;
+              text-align: center;
+              color: #718096;
+              font-size: 0.9rem;
+              padding-top: 20px;
+              border-top: 1px solid #e2e8f0;
+            }
+            
+            .company-logo {
+              width: 60px;
+              height: 60px;
+              background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin: 0 auto 20px;
+              color: white;
+              font-size: 1.5rem;
+              font-weight: bold;
+            }
+            
+            @media print {
+              body {
+                margin: 0;
+                padding: 0;
+              }
+              
+              .container {
+                padding: 20px;
+              }
+              
+              .header {
+                margin: -20px -20px 30px -20px;
+              }
+              
+              .day-section {
+                page-break-inside: avoid;
+              }
+              
+              .event {
+                page-break-inside: avoid;
+              }
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <div class="company-logo">🚗</div>
+              <h1>Driver Schedule</h1>
+              <h2>${scheduleData.driver.name}</h2>
+            </div>
+            
+            <div class="driver-info">
+              <p><strong>Driver:</strong> ${scheduleData.driver.name}</p>
+              <p><strong>Phone:</strong> ${scheduleData.driver.phone}</p>
+              <p><strong>Total Assignments:</strong> ${scheduleData.schedule.length}</p>
+            </div>
+            
+            ${Object.entries(groupedSchedule).map(([date, events]) => `
+              <div class="day-section">
+                <div class="day-header">
+                  ${new Date(date).toLocaleDateString([], { 
+                    weekday: 'long', 
+                    year: 'numeric', 
+                    month: 'long', 
+                    day: 'numeric' 
+                  })}
+                </div>
+                ${events.map(event => `
+                  <div class="event">
+                    <div class="event-time">
+                      <span class="time">${formatTime(event.startTime)}</span>
+                      <div class="separator">to</div>
+                      <span class="time">${formatTime(event.endTime)}</span>
+                    </div>
+                    <div class="event-details">
+                      <div class="event-title">
+                        <span class="event-icon">${getTypeIcon(event.type)}</span>
+                        ${event.title}
+                      </div>
+                      <div class="event-vip">
+                        <span>👤</span>
+                        VIP: ${event.vipName}
+                      </div>
+                      <div class="event-location">
+                        <span>📍</span>
+                        ${event.location}
+                      </div>
+                      ${event.description ? `<div class="event-description">${event.description}</div>` : ''}
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            `).join('')}
+            
+            <div class="footer">
+              <p><strong>VIP Coordinator System</strong></p>
+              <p>Generated on ${new Date().toLocaleDateString([], { 
+                weekday: 'long', 
+                year: 'numeric', 
+                month: 'long', 
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              })}</p>
+            </div>
+          </div>
+        </body>
+      </html>
+    `;
+
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    printWindow.focus();
+    setTimeout(() => {
+      printWindow.print();
+      printWindow.close();
+    }, 250);
+  };
+
+  async function updateEventStatus(eventId: string, status: string) {
+    if (!scheduleData) return;
+    
+    // Find the event to get the VIP ID
+    const event = scheduleData.schedule.find(e => e.id === eventId);
+    if (!event) return;
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${event.vipId}/schedule/${eventId}/status`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ status }),
+      });
+      
+      if (response.ok) {
+        await fetchDriverSchedule(); // Refresh the schedule
+      }
+    } catch (error) {
+      console.error('Error updating event status:', error);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-64">
+        <div className="bg-white rounded-2xl shadow-lg p-8 flex items-center space-x-4">
+          <div className="w-8 h-8 border-4 border-red-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading driver schedule...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !scheduleData) {
+    return (
+      <div className="space-y-8">
+        <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60 text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-2xl">❌</span>
+          </div>
+          <h1 className="text-2xl font-bold text-slate-800 mb-2">Error</h1>
+          <p className="text-slate-600 mb-6">{error || 'Driver not found'}</p>
+          <Link 
+            to="/drivers" 
+            className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+          >
+            Back to Drivers
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const nextEvent = getNextEvent();
+  const currentEvent = getCurrentEvent();
+  const groupedSchedule = groupEventsByDay(scheduleData.schedule);
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent flex items-center gap-3">
+              🚗 Driver Dashboard: {scheduleData.driver.name}
+            </h1>
+            <p className="text-slate-600 mt-2">Real-time schedule and assignment management</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <button 
+              className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+              onClick={handlePrintSchedule}
+            >
+              🖨️ Print Schedule
+            </button>
+            <Link 
+              to="/drivers" 
+              className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+            >
+              Back to Drivers
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Current Status */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+            📍 Current Status
+          </h2>
+          <p className="text-slate-600 mt-1">Real-time driver activity and next assignment</p>
+        </div>
+        
+        <div className="p-8 space-y-6">
+          {currentEvent ? (
+            <div className="bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200 rounded-xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-2xl">{getTypeIcon(currentEvent.type)}</span>
+                <div>
+                  <h3 className="text-lg font-bold text-amber-900">Currently Active</h3>
+                  <p className="text-amber-700 font-semibold">{currentEvent.title}</p>
+                </div>
+                <span 
+                  className="ml-auto px-3 py-1 rounded-full text-xs font-bold text-white"
+                  style={{ backgroundColor: getStatusColor(currentEvent.status) }}
+                >
+                  {currentEvent.status.toUpperCase()}
+                </span>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                <div className="flex items-center gap-2 text-amber-800">
+                  <span>📍</span>
+                  <span>{currentEvent.location}</span>
+                </div>
+                <div className="flex items-center gap-2 text-amber-800">
+                  <span>👤</span>
+                  <span>VIP: {currentEvent.vipName}</span>
+                </div>
+                <div className="flex items-center gap-2 text-amber-800">
+                  <span>⏰</span>
+                  <span>Until {formatTime(currentEvent.endTime)}</span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-6">
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">✅</span>
+                <div>
+                  <h3 className="text-lg font-bold text-green-900">Currently Available</h3>
+                  <p className="text-green-700">Ready for next assignment</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {nextEvent && (
+            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-2xl">{getTypeIcon(nextEvent.type)}</span>
+                <div>
+                  <h3 className="text-lg font-bold text-blue-900">Next Assignment</h3>
+                  <p className="text-blue-700 font-semibold">{nextEvent.title}</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm mb-4">
+                <div className="flex items-center gap-2 text-blue-800">
+                  <span>📍</span>
+                  <span>{nextEvent.location}</span>
+                </div>
+                <div className="flex items-center gap-2 text-blue-800">
+                  <span>👤</span>
+                  <span>VIP: {nextEvent.vipName}</span>
+                </div>
+                <div className="flex items-center gap-2 text-blue-800">
+                  <span>⏰</span>
+                  <span>{formatTime(nextEvent.startTime)} - {formatTime(nextEvent.endTime)}</span>
+                </div>
+              </div>
+              <button 
+                className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+                onClick={() => window.open(`https://maps.google.com/?q=${encodeURIComponent(nextEvent.location)}`, '_blank')}
+              >
+                🗺️ Get Directions
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Full Schedule */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-purple-50 to-pink-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+            📅 Complete Schedule
+            <span className="bg-purple-100 text-purple-800 text-sm font-medium px-2.5 py-0.5 rounded-full">
+              {scheduleData.schedule.length} assignments
+            </span>
+          </h2>
+          <p className="text-slate-600 mt-1">All scheduled events and assignments</p>
+        </div>
+        
+        <div className="p-8">
+          {scheduleData.schedule.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <span className="text-2xl">📅</span>
+              </div>
+              <p className="text-slate-500 font-medium">No assignments scheduled</p>
+            </div>
+          ) : (
+            <div className="space-y-8">
+              {Object.entries(groupedSchedule).map(([date, events]) => (
+                <div key={date} className="space-y-4">
+                  <div className="bg-gradient-to-r from-slate-600 to-slate-700 text-white px-6 py-3 rounded-xl shadow-lg">
+                    <h3 className="text-lg font-bold">
+                      {new Date(date).toLocaleDateString([], { 
+                        weekday: 'long', 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric' 
+                      })}
+                    </h3>
+                  </div>
+                  
+                  <div className="grid gap-4">
+                    {events.map((event) => (
+                      <div key={event.id} className="bg-gradient-to-r from-slate-50 to-slate-100 rounded-xl border border-slate-200/60 p-6 hover:shadow-lg transition-all duration-200">
+                        <div className="flex items-start gap-6">
+                          {/* Time Column */}
+                          <div className="flex-shrink-0 text-center">
+                            <div className="bg-white rounded-lg border border-slate-200 p-3 shadow-sm">
+                              <div className="text-sm font-bold text-slate-900">
+                                {formatTime(event.startTime)}
+                              </div>
+                              <div className="text-xs text-slate-500 mt-1">
+                                to
+                              </div>
+                              <div className="text-sm font-bold text-slate-900">
+                                {formatTime(event.endTime)}
+                              </div>
+                            </div>
+                          </div>
+                          
+                          {/* Event Content */}
+                          <div className="flex-1">
+                            <div className="flex items-center gap-3 mb-3">
+                              <span className="text-2xl">{getTypeIcon(event.type)}</span>
+                              <h4 className="text-lg font-bold text-slate-900">{event.title}</h4>
+                              <span 
+                                className="px-3 py-1 rounded-full text-xs font-bold text-white shadow-sm"
+                                style={{ backgroundColor: getStatusColor(event.status) }}
+                              >
+                                {event.status.toUpperCase()}
+                              </span>
+                            </div>
+                            
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
+                              <div className="flex items-center gap-2 text-slate-600">
+                                <span>📍</span>
+                                <span className="font-medium">{event.location}</span>
+                              </div>
+                              <div className="flex items-center gap-2 text-slate-600">
+                                <span>👤</span>
+                                <span className="font-medium">VIP: {event.vipName}</span>
+                              </div>
+                            </div>
+                            
+                            {event.description && (
+                              <div className="text-slate-600 mb-4 bg-white/50 rounded-lg p-3 border border-slate-200/50">
+                                {event.description}
+                              </div>
+                            )}
+                            
+                            <div className="flex items-center gap-3">
+                              <button 
+                                className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+                                onClick={() => window.open(`https://maps.google.com/?q=${encodeURIComponent(event.location)}`, '_blank')}
+                              >
+                                🗺️ Directions
+                              </button>
+                              
+                              {event.status === 'scheduled' && (
+                                <button 
+                                  className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+                                  onClick={() => updateEventStatus(event.id, 'in-progress')}
+                                >
+                                  ▶️ Start
+                                </button>
+                              )}
+                              
+                              {event.status === 'in-progress' && (
+                                <button 
+                                  className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+                                  onClick={() => updateEventStatus(event.id, 'completed')}
+                                >
+                                  ✅ Complete
+                                </button>
+                              )}
+                              
+                              {event.status === 'completed' && (
+                                <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
+                                  ✅ Completed
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Gantt Chart */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-indigo-50 to-purple-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+            📊 Schedule Timeline
+          </h2>
+          <p className="text-slate-600 mt-1">Visual timeline of all assignments</p>
+        </div>
+        <div className="p-8">
+          <GanttChart 
+            events={scheduleData.schedule} 
+            driverName={scheduleData.driver.name} 
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DriverDashboard;

frontend/src/pages/DriverList.tsx

@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { apiCall } from '../config/api';
+import DriverForm from '../components/DriverForm';
+import EditDriverForm from '../components/EditDriverForm';
+
+interface Driver {
+  id: string;
+  name: string;
+  phone: string;
+  currentLocation: { lat: number; lng: number };
+  assignedVipIds: string[];
+  vehicleCapacity?: number;
+}
+
+const DriverList: React.FC = () => {
+  const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingDriver, setEditingDriver] = useState<Driver | null>(null);
+
+  // Function to extract last name for sorting
+  const getLastName = (fullName: string) => {
+    const nameParts = fullName.trim().split(' ');
+    return nameParts[nameParts.length - 1].toLowerCase();
+  };
+
+  // Function to sort drivers by last name
+  const sortDriversByLastName = (driverList: Driver[]) => {
+    return [...driverList].sort((a, b) => {
+      const lastNameA = getLastName(a.name);
+      const lastNameB = getLastName(b.name);
+      return lastNameA.localeCompare(lastNameB);
+    });
+  };
+
+  useEffect(() => {
+    const fetchDrivers = async () => {
+      try {
+        const token = localStorage.getItem('authToken');
+        const response = await apiCall('/api/drivers', {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+          }
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          const sortedDrivers = sortDriversByLastName(data);
+          setDrivers(sortedDrivers);
+        } else {
+          console.error('Failed to fetch drivers:', response.status);
+        }
+      } catch (error) {
+        console.error('Error fetching drivers:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDrivers();
+  }, []);
+
+  const handleAddDriver = async (driverData: any) => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall('/api/drivers', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(driverData),
+      });
+      
+      if (response.ok) {
+        const newDriver = await response.json();
+        setDrivers(prev => sortDriversByLastName([...prev, newDriver]));
+        setShowForm(false);
+      } else {
+        console.error('Failed to add driver:', response.status);
+      }
+    } catch (error) {
+      console.error('Error adding driver:', error);
+    }
+  };
+
+  const handleEditDriver = async (driverData: any) => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/drivers/${driverData.id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(driverData),
+      });
+      
+      if (response.ok) {
+        const updatedDriver = await response.json();
+        setDrivers(prev => sortDriversByLastName(prev.map(driver => 
+          driver.id === updatedDriver.id ? updatedDriver : driver
+        )));
+        setEditingDriver(null);
+      } else {
+        console.error('Failed to update driver:', response.status);
+      }
+    } catch (error) {
+      console.error('Error updating driver:', error);
+    }
+  };
+
+  const handleDeleteDriver = async (driverId: string) => {
+    if (!confirm('Are you sure you want to delete this driver?')) {
+      return;
+    }
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/drivers/${driverId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        setDrivers(prev => prev.filter(driver => driver.id !== driverId));
+      } else {
+        console.error('Failed to delete driver:', response.status);
+      }
+    } catch (error) {
+      console.error('Error deleting driver:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-64">
+        <div className="bg-white rounded-2xl shadow-lg p-8 flex items-center space-x-4">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading drivers...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+              Driver Management
+            </h1>
+            <p className="text-slate-600 mt-2">Manage driver profiles and assignments</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <div className="bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
+              {drivers.length} Active Drivers
+            </div>
+            <button 
+              className="btn btn-primary"
+              onClick={() => setShowForm(true)}
+            >
+              Add New Driver
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Driver Grid */}
+      {drivers.length === 0 ? (
+        <div className="bg-white rounded-2xl shadow-lg p-12 border border-slate-200/60 text-center">
+          <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <div className="w-8 h-8 bg-slate-300 rounded-full"></div>
+          </div>
+          <h3 className="text-lg font-semibold text-slate-800 mb-2">No Drivers Found</h3>
+          <p className="text-slate-600 mb-6">Get started by adding your first driver</p>
+          <button 
+            className="btn btn-primary"
+            onClick={() => setShowForm(true)}
+          >
+            Add New Driver
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {drivers.map((driver) => (
+            <div key={driver.id} className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden hover:shadow-xl transition-shadow duration-200">
+              <div className="p-6">
+                {/* Driver Header */}
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-xl font-bold text-slate-900">{driver.name}</h3>
+                  <div className="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center">
+                    <span className="text-white text-sm font-bold">
+                      {driver.name.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Driver Information */}
+                <div className="space-y-3 mb-6">
+                  <div className="bg-slate-50 rounded-lg p-3">
+                    <div className="text-sm font-medium text-slate-700 mb-1">Contact</div>
+                    <div className="text-slate-600">{driver.phone}</div>
+                  </div>
+
+                  <div className="bg-slate-50 rounded-lg p-3">
+                    <div className="text-sm font-medium text-slate-700 mb-1">Current Location</div>
+                    <div className="text-slate-600 text-sm">
+                      {driver.currentLocation.lat.toFixed(4)}, {driver.currentLocation.lng.toFixed(4)}
+                    </div>
+                  </div>
+
+                  <div className="bg-slate-50 rounded-lg p-3">
+                    <div className="text-sm font-medium text-slate-700 mb-1">Vehicle Capacity</div>
+                    <div className="flex items-center gap-2 text-slate-600">
+                      <span>🚗</span>
+                      <span className="font-medium">{driver.vehicleCapacity || 4} passengers</span>
+                    </div>
+                  </div>
+
+                  <div className="bg-slate-50 rounded-lg p-3">
+                    <div className="text-sm font-medium text-slate-700 mb-1">Assignments</div>
+                    <div className="flex items-center gap-2">
+                      <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded-full">
+                        {driver.assignedVipIds.length} VIPs
+                      </span>
+                      <span className={`text-xs font-medium px-2 py-1 rounded-full ${
+                        driver.assignedVipIds.length === 0 
+                          ? 'bg-green-100 text-green-800' 
+                          : 'bg-amber-100 text-amber-800'
+                      }`}>
+                        {driver.assignedVipIds.length === 0 ? 'Available' : 'Assigned'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="space-y-3">
+                  <Link 
+                    to={`/drivers/${driver.id}`} 
+                    className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-sm hover:shadow-md w-full text-center block"
+                  >
+                    View Dashboard
+                  </Link>
+                  <div className="flex gap-2">
+                    <button 
+                      className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-all duration-200 shadow-sm hover:shadow-md flex-1" 
+                      onClick={() => setEditingDriver(driver)}
+                    >
+                      Edit
+                    </button>
+                    <button 
+                      className="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-all duration-200 shadow-sm hover:shadow-md flex-1" 
+                      onClick={() => handleDeleteDriver(driver.id)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Modals */}
+      {showForm && (
+        <DriverForm
+          onSubmit={handleAddDriver}
+          onCancel={() => setShowForm(false)}
+        />
+      )}
+
+      {editingDriver && (
+        <EditDriverForm
+          driver={editingDriver}
+          onSubmit={handleEditDriver}
+          onCancel={() => setEditingDriver(null)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DriverList;

frontend/src/pages/VipDetails.tsx

@@ -0,0 +1,683 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { apiCall } from '../config/api';
+import FlightStatus from '../components/FlightStatus';
+import ScheduleManager from '../components/ScheduleManager';
+
+interface Flight {
+  flightNumber: string;
+  flightDate: string;
+  segment: number;
+}
+
+interface Vip {
+  id: string;
+  name: string;
+  organization: string;
+  transportMode: 'flight' | 'self-driving';
+  flightNumber?: string; // Legacy
+  flightDate?: string; // Legacy
+  flights?: Flight[]; // New
+  expectedArrival?: string;
+  arrivalTime?: string; // Legacy
+  needsAirportPickup?: boolean;
+  needsVenueTransport: boolean;
+  notes: string;
+  assignedDriverIds: string[];
+}
+
+const VipDetails: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const [vip, setVip] = useState<Vip | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [schedule, setSchedule] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchVip = async () => {
+      try {
+        const token = localStorage.getItem('authToken');
+        const response = await apiCall('/api/vips', {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+          }
+        });
+        
+        if (response.ok) {
+          const vips = await response.json();
+          const foundVip = vips.find((v: Vip) => v.id === id);
+          
+          if (foundVip) {
+            setVip(foundVip);
+          } else {
+            setError('VIP not found');
+          }
+        } else {
+          setError('Failed to fetch VIP data');
+        }
+      } catch (err) {
+        setError('Error loading VIP data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (id) {
+      fetchVip();
+    }
+  }, [id]);
+
+  // Fetch schedule data
+  useEffect(() => {
+    const fetchSchedule = async () => {
+      if (vip) {
+        try {
+          const token = localStorage.getItem('authToken');
+          const response = await apiCall(`/api/vips/${vip.id}/schedule`, {
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              'Content-Type': 'application/json'
+            }
+          });
+          
+          if (response.ok) {
+            const scheduleData = await response.json();
+            setSchedule(scheduleData);
+          }
+        } catch (error) {
+          console.error('Error fetching schedule:', error);
+        }
+      }
+    };
+
+    fetchSchedule();
+  }, [vip]);
+
+  // Auto-scroll to schedule section if accessed via #schedule anchor
+  useEffect(() => {
+    if (vip && window.location.hash === '#schedule') {
+      setTimeout(() => {
+        const scheduleElement = document.getElementById('schedule-section');
+        if (scheduleElement) {
+          scheduleElement.scrollIntoView({ behavior: 'smooth' });
+        }
+      }, 100);
+    }
+  }, [vip]);
+
+  // Helper function to get flight info
+  const getFlightInfo = () => {
+    if (!vip) return null;
+    
+    if (vip.transportMode === 'flight') {
+      if (vip.flights && vip.flights.length > 0) {
+        return {
+          flights: vip.flights,
+          primaryFlight: vip.flights[0]
+        };
+      } else if (vip.flightNumber) {
+        // Legacy support
+        return {
+          flights: [{
+            flightNumber: vip.flightNumber,
+            flightDate: vip.flightDate || '',
+            segment: 1
+          }],
+          primaryFlight: {
+            flightNumber: vip.flightNumber,
+            flightDate: vip.flightDate || '',
+            segment: 1
+          }
+        };
+      }
+    }
+    return null;
+  };
+
+  const handlePrintSchedule = () => {
+    if (!vip) return;
+    
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) return;
+
+    const groupEventsByDay = (events: any[]) => {
+      const grouped: { [key: string]: any[] } = {};
+      events.forEach(event => {
+        const date = new Date(event.startTime).toDateString();
+        if (!grouped[date]) {
+          grouped[date] = [];
+        }
+        grouped[date].push(event);
+      });
+      Object.keys(grouped).forEach(date => {
+        grouped[date].sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+      });
+      return grouped;
+    };
+
+    const formatTime = (timeString: string) => {
+      return new Date(timeString).toLocaleString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    };
+
+    const getTypeIcon = (type: string) => {
+      switch (type) {
+        case 'transport': return '🚗';
+        case 'meeting': return '🤝';
+        case 'event': return '🎉';
+        case 'meal': return '🍽️';
+        case 'accommodation': return '🏨';
+        default: return '📅';
+      }
+    };
+
+    const groupedSchedule = groupEventsByDay(schedule);
+    const flightInfo = getFlightInfo();
+
+    const printContent = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>VIP Schedule - ${vip.name}</title>
+          <meta charset="UTF-8">
+          <style>
+            * {
+              margin: 0;
+              padding: 0;
+              box-sizing: border-box;
+            }
+            
+            body {
+              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+              line-height: 1.6;
+              color: #2d3748;
+              background: #ffffff;
+            }
+            
+            .container {
+              max-width: 800px;
+              margin: 0 auto;
+              padding: 40px 30px;
+            }
+            
+            .header {
+              text-align: center;
+              margin-bottom: 40px;
+              padding-bottom: 30px;
+              border-bottom: 3px solid #e2e8f0;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              color: white;
+              padding: 40px 30px;
+              border-radius: 15px;
+              margin: -40px -30px 40px -30px;
+            }
+            
+            .header h1 {
+              font-size: 2.5rem;
+              font-weight: 700;
+              margin-bottom: 10px;
+              text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            
+            .header h2 {
+              font-size: 1.8rem;
+              font-weight: 600;
+              margin-bottom: 20px;
+              opacity: 0.95;
+            }
+            
+            .vip-info {
+              background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+              padding: 25px;
+              border-radius: 12px;
+              margin-bottom: 30px;
+              border: 1px solid #e2e8f0;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            }
+            
+            .vip-info p {
+              margin-bottom: 8px;
+              font-size: 1rem;
+            }
+            
+            .vip-info strong {
+              color: #4a5568;
+              font-weight: 600;
+            }
+            
+            .day-section {
+              margin-bottom: 40px;
+              page-break-inside: avoid;
+            }
+            
+            .day-header {
+              background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+              color: white;
+              padding: 20px 25px;
+              font-size: 1.3rem;
+              font-weight: 700;
+              margin-bottom: 20px;
+              border-radius: 10px;
+              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+              text-align: center;
+            }
+            
+            .event {
+              background: white;
+              border: 1px solid #e2e8f0;
+              margin-bottom: 15px;
+              padding: 25px;
+              border-radius: 12px;
+              display: flex;
+              align-items: flex-start;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+              transition: all 0.2s ease;
+            }
+            
+            .event:hover {
+              box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            }
+            
+            .event-time {
+              min-width: 120px;
+              background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
+              padding: 15px;
+              border-radius: 8px;
+              text-align: center;
+              margin-right: 25px;
+              border: 1px solid #cbd5e0;
+            }
+            
+            .event-time .time {
+              font-weight: 700;
+              font-size: 1rem;
+              color: #2d3748;
+              display: block;
+            }
+            
+            .event-time .separator {
+              font-size: 0.8rem;
+              color: #718096;
+              margin: 5px 0;
+            }
+            
+            .event-details {
+              flex: 1;
+            }
+            
+            .event-title {
+              font-weight: 700;
+              font-size: 1.2rem;
+              margin-bottom: 10px;
+              color: #2d3748;
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            }
+            
+            .event-icon {
+              font-size: 1.3rem;
+            }
+            
+            .event-location {
+              color: #4a5568;
+              margin-bottom: 8px;
+              font-weight: 500;
+              display: flex;
+              align-items: center;
+              gap: 6px;
+            }
+            
+            .event-description {
+              background: #f7fafc;
+              padding: 12px 15px;
+              border-radius: 8px;
+              font-style: italic;
+              color: #4a5568;
+              margin-bottom: 10px;
+              border-left: 4px solid #cbd5e0;
+            }
+            
+            .event-driver {
+              color: #3182ce;
+              font-weight: 600;
+              font-size: 0.9rem;
+              background: #ebf8ff;
+              padding: 8px 12px;
+              border-radius: 6px;
+              display: inline-flex;
+              align-items: center;
+              gap: 6px;
+            }
+            
+            .status-badge {
+              display: inline-block;
+              padding: 4px 12px;
+              border-radius: 20px;
+              font-size: 0.8rem;
+              font-weight: 600;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+            
+            .status-scheduled {
+              background: #bee3f8;
+              color: #2b6cb0;
+            }
+            
+            .status-in-progress {
+              background: #fbd38d;
+              color: #c05621;
+            }
+            
+            .status-completed {
+              background: #c6f6d5;
+              color: #276749;
+            }
+            
+            .footer {
+              margin-top: 50px;
+              text-align: center;
+              color: #718096;
+              font-size: 0.9rem;
+              padding-top: 20px;
+              border-top: 1px solid #e2e8f0;
+            }
+            
+            .company-logo {
+              width: 60px;
+              height: 60px;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin: 0 auto 20px;
+              color: white;
+              font-size: 1.5rem;
+              font-weight: bold;
+            }
+            
+            @media print {
+              body {
+                margin: 0;
+                padding: 0;
+              }
+              
+              .container {
+                padding: 20px;
+              }
+              
+              .header {
+                margin: -20px -20px 30px -20px;
+              }
+              
+              .day-section {
+                page-break-inside: avoid;
+              }
+              
+              .event {
+                page-break-inside: avoid;
+              }
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <div class="company-logo">VC</div>
+              <h1>📅 VIP Schedule</h1>
+              <h2>${vip.name}</h2>
+            </div>
+            
+            <div class="vip-info">
+              <p><strong>Organization:</strong> ${vip.organization}</p>
+              ${vip.transportMode === 'flight' && flightInfo ? `
+                <p><strong>Flight Information:</strong> ${flightInfo.flights.map(f => f.flightNumber).join(' → ')}</p>
+                <p><strong>Flight Date:</strong> ${flightInfo.primaryFlight.flightDate ? new Date(flightInfo.primaryFlight.flightDate).toLocaleDateString() : 'TBD'}</p>
+              ` : vip.transportMode === 'self-driving' ? `
+                <p><strong>Transport Mode:</strong> 🚗 Self-Driving</p>
+                <p><strong>Expected Arrival:</strong> ${vip.expectedArrival ? new Date(vip.expectedArrival).toLocaleString() : 'TBD'}</p>
+              ` : ''}
+              <p><strong>Airport Pickup:</strong> ${vip.needsAirportPickup ? '✅ Required' : '❌ Not Required'}</p>
+              <p><strong>Venue Transport:</strong> ${vip.needsVenueTransport ? '✅ Required' : '❌ Not Required'}</p>
+              ${vip.notes ? `<p><strong>Special Notes:</strong> ${vip.notes}</p>` : ''}
+            </div>
+            
+            ${Object.entries(groupedSchedule).map(([date, events]) => `
+              <div class="day-section">
+                <div class="day-header">
+                  ${new Date(date).toLocaleDateString([], { 
+                    weekday: 'long', 
+                    year: 'numeric', 
+                    month: 'long', 
+                    day: 'numeric' 
+                  })}
+                </div>
+                ${events.map(event => `
+                  <div class="event">
+                    <div class="event-time">
+                      <span class="time">${formatTime(event.startTime)}</span>
+                      <div class="separator">to</div>
+                      <span class="time">${formatTime(event.endTime)}</span>
+                    </div>
+                    <div class="event-details">
+                      <div class="event-title">
+                        <span class="event-icon">${getTypeIcon(event.type)}</span>
+                        ${event.title}
+                        <span class="status-badge status-${event.status}">${event.status}</span>
+                      </div>
+                      <div class="event-location">
+                        <span>📍</span>
+                        ${event.location}
+                      </div>
+                      ${event.description ? `<div class="event-description">${event.description}</div>` : ''}
+                      ${event.assignedDriverId ? `<div class="event-driver"><span>👤</span> Driver: ${event.assignedDriverId}</div>` : ''}
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            `).join('')}
+            
+            <div class="footer">
+              <p><strong>VIP Coordinator System</strong></p>
+              <p>Generated on ${new Date().toLocaleDateString([], { 
+                weekday: 'long', 
+                year: 'numeric', 
+                month: 'long', 
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+              })}</p>
+            </div>
+          </div>
+        </body>
+      </html>
+    `;
+
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    printWindow.focus();
+    setTimeout(() => {
+      printWindow.print();
+      printWindow.close();
+    }, 250);
+  };
+
+  if (loading) {
+    return <div>Loading VIP details...</div>;
+  }
+
+  if (error || !vip) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error || 'VIP not found'}</p>
+        <Link to="/vips" className="btn">Back to VIP List</Link>
+      </div>
+    );
+  }
+
+  const flightInfo = getFlightInfo();
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+              VIP Details: {vip.name}
+            </h1>
+            <p className="text-slate-600 mt-2">Complete profile and schedule management</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <button 
+              className="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl flex items-center gap-2"
+              onClick={handlePrintSchedule}
+            >
+              🖨️ Print Schedule
+            </button>
+            <Link 
+              to="/vips" 
+              className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl"
+            >
+              Back to VIP List
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* VIP Information Card */}
+      <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 px-8 py-6 border-b border-slate-200/60">
+          <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+            📋 VIP Information
+          </h2>
+          <p className="text-slate-600 mt-1">Personal details and travel arrangements</p>
+        </div>
+        
+        <div className="p-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-slate-50 rounded-xl p-4 border border-slate-200/60">
+              <div className="text-sm font-medium text-slate-500 mb-1">Name</div>
+              <div className="text-lg font-bold text-slate-900">{vip.name}</div>
+            </div>
+            
+            <div className="bg-slate-50 rounded-xl p-4 border border-slate-200/60">
+              <div className="text-sm font-medium text-slate-500 mb-1">Organization</div>
+              <div className="text-lg font-bold text-slate-900">{vip.organization}</div>
+            </div>
+            
+            {vip.transportMode === 'flight' && flightInfo ? (
+              <>
+                <div className="bg-blue-50 rounded-xl p-4 border border-blue-200/60">
+                  <div className="text-sm font-medium text-blue-600 mb-1">Flight{flightInfo.flights.length > 1 ? 's' : ''}</div>
+                  <div className="text-lg font-bold text-blue-900">{flightInfo.flights.map(f => f.flightNumber).join(' → ')}</div>
+                </div>
+                
+                <div className="bg-blue-50 rounded-xl p-4 border border-blue-200/60">
+                  <div className="text-sm font-medium text-blue-600 mb-1">Flight Date</div>
+                  <div className="text-lg font-bold text-blue-900">
+                    {flightInfo.primaryFlight.flightDate ? new Date(flightInfo.primaryFlight.flightDate).toLocaleDateString() : 'TBD'}
+                  </div>
+                </div>
+              </>
+            ) : vip.transportMode === 'self-driving' ? (
+              <>
+                <div className="bg-green-50 rounded-xl p-4 border border-green-200/60">
+                  <div className="text-sm font-medium text-green-600 mb-1">Transport Mode</div>
+                  <div className="text-lg font-bold text-green-900 flex items-center gap-2">
+                    🚗 Self-Driving
+                  </div>
+                </div>
+                
+                <div className="bg-green-50 rounded-xl p-4 border border-green-200/60">
+                  <div className="text-sm font-medium text-green-600 mb-1">Expected Arrival</div>
+                  <div className="text-lg font-bold text-green-900">
+                    {vip.expectedArrival ? new Date(vip.expectedArrival).toLocaleString() : 'TBD'}
+                  </div>
+                </div>
+              </>
+            ) : null}
+            
+            <div className={`rounded-xl p-4 border ${vip.needsAirportPickup ? 'bg-green-50 border-green-200/60' : 'bg-red-50 border-red-200/60'}`}>
+              <div className={`text-sm font-medium mb-1 ${vip.needsAirportPickup ? 'text-green-600' : 'text-red-600'}`}>Airport Pickup</div>
+              <div className={`text-lg font-bold flex items-center gap-2 ${vip.needsAirportPickup ? 'text-green-900' : 'text-red-900'}`}>
+                {vip.needsAirportPickup ? '✅ Required' : '❌ Not Required'}
+              </div>
+            </div>
+            
+            <div className={`rounded-xl p-4 border ${vip.needsVenueTransport ? 'bg-green-50 border-green-200/60' : 'bg-red-50 border-red-200/60'}`}>
+              <div className={`text-sm font-medium mb-1 ${vip.needsVenueTransport ? 'text-green-600' : 'text-red-600'}`}>Venue Transport</div>
+              <div className={`text-lg font-bold flex items-center gap-2 ${vip.needsVenueTransport ? 'text-green-900' : 'text-red-900'}`}>
+                {vip.needsVenueTransport ? '✅ Required' : '❌ Not Required'}
+              </div>
+            </div>
+          </div>
+          
+          {vip.notes && (
+            <div className="mt-6">
+              <div className="text-sm font-medium text-slate-500 mb-2">Special Notes</div>
+              <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+                <p className="text-amber-800">{vip.notes}</p>
+              </div>
+            </div>
+          )}
+
+          {vip.assignedDriverIds && vip.assignedDriverIds.length > 0 && (
+            <div className="mt-6">
+              <div className="text-sm font-medium text-slate-500 mb-2">Assigned Drivers</div>
+              <div className="flex flex-wrap gap-2">
+                {vip.assignedDriverIds.map(driverId => (
+                  <span 
+                    key={driverId}
+                    className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium flex items-center gap-2"
+                  >
+                    👤 {driverId}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Flight Status */}
+      {vip.transportMode === 'flight' && flightInfo && (
+        <div className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden">
+          <div className="bg-gradient-to-r from-sky-50 to-blue-50 px-8 py-6 border-b border-slate-200/60">
+            <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+              ✈️ Flight Information
+            </h2>
+            <p className="text-slate-600 mt-1">Real-time flight status and details</p>
+          </div>
+          
+          <div className="p-8 space-y-6">
+            {flightInfo.flights.map((flight, index) => (
+              <div key={index} className="bg-slate-50 rounded-xl p-6 border border-slate-200/60">
+                <h3 className="text-lg font-bold text-slate-900 mb-4">
+                  {index === 0 ? 'Primary Flight' : `Connecting Flight ${index}`}: {flight.flightNumber}
+                </h3>
+                <FlightStatus 
+                  flightNumber={flight.flightNumber} 
+                  flightDate={flight.flightDate}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Schedule Management */}
+      <div id="schedule-section">
+        <ScheduleManager vipId={vip.id} vipName={vip.name} />
+      </div>
+    </div>
+  );
+};
+
+export default VipDetails;

frontend/src/pages/VipList.tsx

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { apiCall } from '../config/api';
+import VipForm from '../components/VipForm';
+import EditVipForm from '../components/EditVipForm';
+import FlightStatus from '../components/FlightStatus';
+
+interface Vip {
+  id: string;
+  name: string;
+  organization: string;
+  department: 'Office of Development' | 'Admin';
+  transportMode: 'flight' | 'self-driving';
+  flightNumber?: string; // Legacy
+  flightDate?: string; // Legacy
+  flights?: Array<{
+    flightNumber: string;
+    flightDate: string;
+    segment: number;
+  }>; // New
+  expectedArrival?: string;
+  arrivalTime?: string;
+  needsAirportPickup?: boolean;
+  needsVenueTransport: boolean;
+  notes?: string;
+}
+
+const VipList: React.FC = () => {
+  const [vips, setVips] = useState<Vip[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingVip, setEditingVip] = useState<Vip | null>(null);
+
+  // Function to extract last name for sorting
+  const getLastName = (fullName: string) => {
+    const nameParts = fullName.trim().split(' ');
+    return nameParts[nameParts.length - 1].toLowerCase();
+  };
+
+  // Function to sort VIPs by last name
+  const sortVipsByLastName = (vipList: Vip[]) => {
+    return [...vipList].sort((a, b) => {
+      const lastNameA = getLastName(a.name);
+      const lastNameB = getLastName(b.name);
+      return lastNameA.localeCompare(lastNameB);
+    });
+  };
+
+  useEffect(() => {
+    const fetchVips = async () => {
+      try {
+        const token = localStorage.getItem('authToken');
+        const response = await apiCall('/api/vips', {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+          }
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          const sortedVips = sortVipsByLastName(data);
+          setVips(sortedVips);
+        } else {
+          console.error('Failed to fetch VIPs:', response.status);
+        }
+      } catch (error) {
+        console.error('Error fetching VIPs:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVips();
+  }, []);
+
+  const handleAddVip = async (vipData: any) => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall('/api/vips', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(vipData),
+      });
+      
+      if (response.ok) {
+        const newVip = await response.json();
+        setVips(prev => sortVipsByLastName([...prev, newVip]));
+        setShowForm(false);
+      } else {
+        console.error('Failed to add VIP:', response.status);
+      }
+    } catch (error) {
+      console.error('Error adding VIP:', error);
+    }
+  };
+
+  const handleEditVip = async (vipData: any) => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipData.id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(vipData),
+      });
+      
+      if (response.ok) {
+        const updatedVip = await response.json();
+        setVips(prev => sortVipsByLastName(prev.map(vip => vip.id === updatedVip.id ? updatedVip : vip)));
+        setEditingVip(null);
+      } else {
+        console.error('Failed to update VIP:', response.status);
+      }
+    } catch (error) {
+      console.error('Error updating VIP:', error);
+    }
+  };
+
+  const handleDeleteVip = async (vipId: string) => {
+    if (!confirm('Are you sure you want to delete this VIP?')) {
+      return;
+    }
+    
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await apiCall(`/api/vips/${vipId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        setVips(prev => prev.filter(vip => vip.id !== vipId));
+      } else {
+        console.error('Failed to delete VIP:', response.status);
+      }
+    } catch (error) {
+      console.error('Error deleting VIP:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-64">
+        <div className="bg-white rounded-2xl shadow-lg p-8 flex items-center space-x-4">
+          <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-lg font-medium text-slate-700">Loading VIPs...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200/60">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
+              VIP Management
+            </h1>
+            <p className="text-slate-600 mt-2">Manage VIP profiles and travel arrangements</p>
+          </div>
+          <button 
+            className="btn btn-primary"
+            onClick={() => setShowForm(true)}
+          >
+            Add New VIP
+          </button>
+        </div>
+      </div>
+
+      {/* VIP List */}
+      {vips.length === 0 ? (
+        <div className="bg-white rounded-2xl shadow-lg p-12 border border-slate-200/60 text-center">
+          <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <div className="w-8 h-8 bg-slate-300 rounded-full"></div>
+          </div>
+          <h3 className="text-lg font-semibold text-slate-800 mb-2">No VIPs Found</h3>
+          <p className="text-slate-600 mb-6">Get started by adding your first VIP</p>
+          <button 
+            className="btn btn-primary"
+            onClick={() => setShowForm(true)}
+          >
+            Add New VIP
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {vips.map((vip) => (
+            <div key={vip.id} className="bg-white rounded-2xl shadow-lg border border-slate-200/60 overflow-hidden hover:shadow-xl transition-shadow duration-200">
+              <div className="p-6">
+                <div className="flex justify-between items-start">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-3">
+                      <h3 className="text-xl font-bold text-slate-900">{vip.name}</h3>
+                      <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
+                        {vip.department}
+                      </span>
+                    </div>
+                    
+                    <p className="text-slate-600 text-sm mb-4">{vip.organization}</p>
+                    
+                    {/* Transport Information */}
+                    <div className="bg-slate-50 rounded-lg p-4 mb-4">
+                      {vip.transportMode === 'flight' ? (
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2 text-sm">
+                            <span className="font-medium text-slate-700">Flight:</span>
+                            <span className="text-slate-600">
+                              {vip.flights && vip.flights.length > 0 ? 
+                                vip.flights.map(f => f.flightNumber).join(' → ') : 
+                                vip.flightNumber || 'No flight'}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2 text-sm">
+                            <span className="font-medium text-slate-700">Airport Pickup:</span>
+                            <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                              vip.needsAirportPickup 
+                                ? 'bg-green-100 text-green-800' 
+                                : 'bg-red-100 text-red-800'
+                            }`}>
+                              {vip.needsAirportPickup ? 'Required' : 'Not needed'}
+                            </span>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2 text-sm">
+                          <span className="font-medium text-slate-700">Self-driving, Expected:</span>
+                          <span className="text-slate-600">
+                            {vip.expectedArrival ? new Date(vip.expectedArrival).toLocaleString() : 'TBD'}
+                          </span>
+                        </div>
+                      )}
+                      
+                      <div className="flex items-center gap-2 text-sm mt-2">
+                        <span className="font-medium text-slate-700">Venue Transport:</span>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          vip.needsVenueTransport 
+                            ? 'bg-blue-100 text-blue-800' 
+                            : 'bg-gray-100 text-gray-800'
+                        }`}>
+                          {vip.needsVenueTransport ? 'Required' : 'Not needed'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  {/* Action Buttons */}
+                  <div className="flex flex-col gap-2 ml-6">
+                    <Link 
+                      to={`/vips/${vip.id}`} 
+                      className="btn btn-success text-center"
+                    >
+                      View Details
+                    </Link>
+                    <button 
+                      className="btn btn-secondary" 
+                      onClick={() => setEditingVip(vip)}
+                    >
+                      Edit
+                    </button>
+                    <button 
+                      className="btn btn-danger" 
+                      onClick={() => handleDeleteVip(vip.id)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+                
+                {/* Flight Status */}
+                {vip.transportMode === 'flight' && vip.flightNumber && (
+                  <div className="mt-4 pt-4 border-t border-slate-200">
+                    <FlightStatus flightNumber={vip.flightNumber} />
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Modals */}
+      {showForm && (
+        <VipForm
+          onSubmit={handleAddVip}
+          onCancel={() => setShowForm(false)}
+        />
+      )}
+
+      {editingVip && (
+        <EditVipForm
+          vip={{...editingVip, notes: editingVip.notes || ''}}
+          onSubmit={handleEditVip}
+          onCancel={() => setEditingVip(null)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default VipList;

frontend/src/utils/testVipData.ts

@@ -0,0 +1,386 @@
+// Test VIP data generation utilities
+
+export const generateTestVips = () => {
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  const dayAfter = new Date(today);
+  dayAfter.setDate(dayAfter.getDate() + 2);
+  
+  const formatDate = (date: Date) => date.toISOString().split('T')[0];
+  const formatDateTime = (date: Date) => {
+    const d = new Date(date);
+    d.setHours(14, 30, 0, 0); // 2:30 PM
+    return d.toISOString().slice(0, 16);
+  };
+
+  return [
+    // Admin Department VIPs (10)
+    {
+      name: 'Dr. Sarah Chen',
+      organization: 'Stanford University',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [
+        { flightNumber: 'UA1234', flightDate: formatDate(tomorrow), segment: 1 },
+        { flightNumber: 'DL5678', flightDate: formatDate(tomorrow), segment: 2 }
+      ],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Vegetarian meals, requires wheelchair assistance'
+    },
+    {
+      name: 'Ambassador Michael Rodriguez',
+      organization: 'Embassy of Spain',
+      department: 'Admin',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(tomorrow),
+      needsVenueTransport: true,
+      notes: 'Security detail required, diplomatic immunity'
+    },
+    {
+      name: 'Prof. Aisha Patel',
+      organization: 'MIT Technology Review',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'AA9876', flightDate: formatDate(dayAfter), segment: 1 }],
+      needsAirportPickup: true,
+      needsVenueTransport: false,
+      notes: 'Allergic to shellfish, prefers ground floor rooms'
+    },
+    {
+      name: 'CEO James Thompson',
+      organization: 'TechCorp Industries',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'SW2468', flightDate: formatDate(tomorrow), segment: 1 }],
+      needsAirportPickup: false,
+      needsVenueTransport: true,
+      notes: 'Private jet arrival, has own security team'
+    },
+    {
+      name: 'Dr. Elena Volkov',
+      organization: 'Russian Academy of Sciences',
+      department: 'Admin',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(dayAfter),
+      needsVenueTransport: true,
+      notes: 'Interpreter required, kosher meals'
+    },
+    {
+      name: 'Minister David Kim',
+      organization: 'South Korean Ministry of Education',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [
+        { flightNumber: 'KE0123', flightDate: formatDate(tomorrow), segment: 1 },
+        { flightNumber: 'UA7890', flightDate: formatDate(tomorrow), segment: 2 },
+        { flightNumber: 'DL3456', flightDate: formatDate(tomorrow), segment: 3 }
+      ],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Long international flight, may need rest upon arrival'
+    },
+    {
+      name: 'Dr. Maria Santos',
+      organization: 'University of São Paulo',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'LH4567', flightDate: formatDate(dayAfter), segment: 1 }],
+      needsAirportPickup: true,
+      needsVenueTransport: false,
+      notes: 'Speaks Portuguese and English, lactose intolerant'
+    },
+    {
+      name: 'Sheikh Ahmed Al-Rashid',
+      organization: 'UAE University',
+      department: 'Admin',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(tomorrow),
+      needsVenueTransport: true,
+      notes: 'Halal meals required, prayer room access needed'
+    },
+    {
+      name: 'Prof. Catherine Williams',
+      organization: 'Oxford University',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'BA1357', flightDate: formatDate(tomorrow), segment: 1 }],
+      needsAirportPickup: false,
+      needsVenueTransport: true,
+      notes: 'Prefers tea over coffee, has mobility issues'
+    },
+    {
+      name: 'Dr. Hiroshi Tanaka',
+      organization: 'Tokyo Institute of Technology',
+      department: 'Admin',
+      transportMode: 'flight',
+      flights: [
+        { flightNumber: 'NH0246', flightDate: formatDate(dayAfter), segment: 1 },
+        { flightNumber: 'UA8642', flightDate: formatDate(dayAfter), segment: 2 }
+      ],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Jet lag concerns, prefers Japanese cuisine when available'
+    },
+
+    // Office of Development VIPs (10)
+    {
+      name: 'Ms. Jennifer Walsh',
+      organization: 'Walsh Foundation',
+      department: 'Office of Development',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(tomorrow),
+      needsVenueTransport: false,
+      notes: 'Major donor, prefers informal settings'
+    },
+    {
+      name: 'Mr. Robert Sterling',
+      organization: 'Sterling Philanthropies',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'JB1122', flightDate: formatDate(tomorrow), segment: 1 }],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Potential $10M donation, wine enthusiast'
+    },
+    {
+      name: 'Mrs. Elizabeth Hartwell',
+      organization: 'Hartwell Family Trust',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'AS3344', flightDate: formatDate(dayAfter), segment: 1 }],
+      needsAirportPickup: false,
+      needsVenueTransport: true,
+      notes: 'Alumni donor, interested in scholarship programs'
+    },
+    {
+      name: 'Mr. Charles Montgomery',
+      organization: 'Montgomery Industries',
+      department: 'Office of Development',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(dayAfter),
+      needsVenueTransport: true,
+      notes: 'Corporate partnership opportunity, golf enthusiast'
+    },
+    {
+      name: 'Dr. Patricia Lee',
+      organization: 'Lee Medical Foundation',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [
+        { flightNumber: 'F91234', flightDate: formatDate(tomorrow), segment: 1 },
+        { flightNumber: 'UA5555', flightDate: formatDate(tomorrow), segment: 2 }
+      ],
+      needsAirportPickup: true,
+      needsVenueTransport: false,
+      notes: 'Medical research funding, diabetic dietary needs'
+    },
+    {
+      name: 'Mr. Thomas Anderson',
+      organization: 'Anderson Capital Group',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'VX7788', flightDate: formatDate(tomorrow), segment: 1 }],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Venture capital investor, tech startup focus'
+    },
+    {
+      name: 'Mrs. Grace Chen-Williams',
+      organization: 'Chen-Williams Foundation',
+      department: 'Office of Development',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(tomorrow),
+      needsVenueTransport: true,
+      notes: 'Arts and culture patron, vegan diet'
+    },
+    {
+      name: 'Mr. Daniel Foster',
+      organization: 'Foster Energy Solutions',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [{ flightNumber: 'WN9999', flightDate: formatDate(dayAfter), segment: 1 }],
+      needsAirportPickup: false,
+      needsVenueTransport: false,
+      notes: 'Renewable energy focus, environmental sustainability'
+    },
+    {
+      name: 'Mrs. Victoria Blackstone',
+      organization: 'Blackstone Charitable Trust',
+      department: 'Office of Development',
+      transportMode: 'flight',
+      flights: [
+        { flightNumber: 'B61111', flightDate: formatDate(dayAfter), segment: 1 },
+        { flightNumber: 'AA2222', flightDate: formatDate(dayAfter), segment: 2 }
+      ],
+      needsAirportPickup: true,
+      needsVenueTransport: true,
+      notes: 'Education advocate, prefers luxury accommodations'
+    },
+    {
+      name: 'Mr. Alexander Petrov',
+      organization: 'Petrov International Holdings',
+      department: 'Office of Development',
+      transportMode: 'self-driving',
+      expectedArrival: formatDateTime(dayAfter),
+      needsVenueTransport: true,
+      notes: 'International business, speaks Russian and English'
+    }
+  ];
+};
+
+export const getTestOrganizations = () => [
+  'Stanford University', 'Embassy of Spain', 'MIT Technology Review', 'TechCorp Industries',
+  'Russian Academy of Sciences', 'South Korean Ministry of Education', 'University of São Paulo',
+  'UAE University', 'Oxford University', 'Tokyo Institute of Technology',
+  'Walsh Foundation', 'Sterling Philanthropies', 'Hartwell Family Trust', 'Montgomery Industries',
+  'Lee Medical Foundation', 'Anderson Capital Group', 'Chen-Williams Foundation',
+  'Foster Energy Solutions', 'Blackstone Charitable Trust', 'Petrov International Holdings'
+];
+
+// Generate realistic daily schedules for VIPs
+export const generateVipSchedule = (vipName: string, department: string, transportMode: string) => {
+  const today = new Date();
+  const eventDate = new Date(today);
+  eventDate.setDate(eventDate.getDate() + 1); // Tomorrow
+  
+  const formatDateTime = (hour: number, minute: number = 0) => {
+    const date = new Date(eventDate);
+    date.setHours(hour, minute, 0, 0);
+    return date.toISOString();
+  };
+
+  const baseSchedule = [
+    // Morning arrival and setup
+    {
+      title: transportMode === 'flight' ? 'Airport Pickup' : 'Arrival Check-in',
+      location: transportMode === 'flight' ? 'Airport Terminal' : 'Hotel Lobby',
+      startTime: formatDateTime(8, 0),
+      endTime: formatDateTime(9, 0),
+      description: transportMode === 'flight' ? 'Meet and greet at airport, transport to hotel' : 'Check-in and welcome briefing',
+      type: 'transport',
+      status: 'scheduled'
+    },
+    {
+      title: 'Welcome Breakfast',
+      location: 'Executive Dining Room',
+      startTime: formatDateTime(9, 0),
+      endTime: formatDateTime(10, 0),
+      description: 'Welcome breakfast with key stakeholders and orientation materials',
+      type: 'meal',
+      status: 'scheduled'
+    }
+  ];
+
+  // Department-specific schedules
+  if (department === 'Admin') {
+    return [
+      ...baseSchedule,
+      {
+        title: 'Academic Leadership Meeting',
+        location: 'Board Room A',
+        startTime: formatDateTime(10, 30),
+        endTime: formatDateTime(12, 0),
+        description: 'Strategic planning session with academic leadership team',
+        type: 'meeting',
+        status: 'scheduled'
+      },
+      {
+        title: 'Working Lunch',
+        location: 'Faculty Club',
+        startTime: formatDateTime(12, 0),
+        endTime: formatDateTime(13, 30),
+        description: 'Lunch meeting with department heads and key faculty',
+        type: 'meal',
+        status: 'scheduled'
+      },
+      {
+        title: 'Campus Tour',
+        location: 'Main Campus',
+        startTime: formatDateTime(14, 0),
+        endTime: formatDateTime(15, 30),
+        description: 'Guided tour of campus facilities and research centers',
+        type: 'event',
+        status: 'scheduled'
+      },
+      {
+        title: 'Research Presentation',
+        location: 'Auditorium B',
+        startTime: formatDateTime(16, 0),
+        endTime: formatDateTime(17, 30),
+        description: 'Presentation of current research initiatives and future plans',
+        type: 'meeting',
+        status: 'scheduled'
+      },
+      {
+        title: 'Reception Dinner',
+        location: 'University Club',
+        startTime: formatDateTime(19, 0),
+        endTime: formatDateTime(21, 0),
+        description: 'Formal dinner reception with university leadership',
+        type: 'event',
+        status: 'scheduled'
+      }
+    ];
+  } else {
+    // Office of Development schedule
+    return [
+      ...baseSchedule,
+      {
+        title: 'Donor Relations Meeting',
+        location: 'Development Office',
+        startTime: formatDateTime(10, 30),
+        endTime: formatDateTime(12, 0),
+        description: 'Private meeting with development team about giving opportunities',
+        type: 'meeting',
+        status: 'scheduled'
+      },
+      {
+        title: 'Scholarship Recipients Lunch',
+        location: 'Student Center',
+        startTime: formatDateTime(12, 0),
+        endTime: formatDateTime(13, 30),
+        description: 'Meet with current scholarship recipients and hear their stories',
+        type: 'meal',
+        status: 'scheduled'
+      },
+      {
+        title: 'Facility Naming Ceremony',
+        location: 'New Science Building',
+        startTime: formatDateTime(14, 0),
+        endTime: formatDateTime(15, 0),
+        description: 'Dedication ceremony for newly named facility',
+        type: 'event',
+        status: 'scheduled'
+      },
+      {
+        title: 'Impact Presentation',
+        location: 'Conference Room C',
+        startTime: formatDateTime(15, 30),
+        endTime: formatDateTime(16, 30),
+        description: 'Presentation on the impact of philanthropic giving',
+        type: 'meeting',
+        status: 'scheduled'
+      },
+      {
+        title: 'Private Dinner',
+        location: 'Presidents House',
+        startTime: formatDateTime(18, 30),
+        endTime: formatDateTime(20, 30),
+        description: 'Intimate dinner with university president and spouse',
+        type: 'meal',
+        status: 'scheduled'
+      },
+      {
+        title: 'Evening Cultural Event',
+        location: 'Arts Center',
+        startTime: formatDateTime(21, 0),
+        endTime: formatDateTime(22, 30),
+        description: 'Special performance by university arts programs',
+        type: 'event',
+        status: 'scheduled'
+      }
+    ];
+  }
+};