Backup: 2025-07-21 18:13 - I got Claude Code

[Restore from backup: vip-coordinator-backup-2025-07-21-18-13-I got Claude Code]

frontend/src/components/DriverSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { apiCall } from '../utils/api';
+import { apiCall } from '../config/api';
 
 interface DriverAvailability {
   driverId: string;
@@ -60,7 +60,7 @@ const DriverSelector: React.FC<DriverSelectorProps> = ({
     setLoading(true);
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall('/api/drivers/availability', {
+      const response = await apiCall('/api/drivers/availability', {
         method: 'POST',
         headers: {
           'Authorization': `Bearer ${token}`,
@@ -69,7 +69,8 @@ const DriverSelector: React.FC<DriverSelectorProps> = ({
         body: JSON.stringify(eventTime),
       });
       
-      if (data) {
+      if (response.ok) {
+        const data = await response.json();
         setAvailability(data);
       }
     } catch (error) {

frontend/src/components/Login.tsx

@@ -1,58 +1,115 @@
 import React, { useEffect, useState } from 'react';
-import { apiCall } from '../utils/api';
-import GoogleLogin from './GoogleLogin';
+import { apiCall } from '../config/api';
 import './Login.css';
-import { User } from '../types';
 
 interface LoginProps {
-  onLogin: (user: User) => void;
-}
-
-interface SetupStatus {
-  ready: boolean;
-  hasUsers: boolean;
-  missingEnvVars?: string[];
+  onLogin: (user: any) => void;
 }
 
 const Login: React.FC<LoginProps> = ({ onLogin }) => {
-  const [setupStatus, setSetupStatus] = useState<SetupStatus | null>(null);
+  const [setupStatus, setSetupStatus] = useState<any>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     // Check system setup status
     apiCall('/auth/setup')
-      .then(({ data }) => {
+      .then(res => res.json())
+      .then(data => {
         setSetupStatus(data);
         setLoading(false);
       })
       .catch(error => {
         console.error('Error checking setup status:', error);
-        setSetupStatus({ ready: true, hasUsers: false }); // Assume ready if can't check
         setLoading(false);
       });
-  }, []);
 
-  const handleGoogleSuccess = (user: any, token: string) => {
-    // Store the token and user data
-    localStorage.setItem('authToken', token);
-    localStorage.setItem('user', JSON.stringify(user));
-    
-    // Call onLogin with the user data
-    onLogin(user);
-  };
+    // Check for OAuth callback code in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+    const error = urlParams.get('error');
+    const token = urlParams.get('token');
 
-  const handleGoogleError = (errorMessage: string) => {
-    setError(errorMessage);
-    setTimeout(() => setError(null), 5000); // Clear error after 5 seconds
+    if (code && (window.location.pathname === '/auth/google/callback' || window.location.pathname === '/auth/callback')) {
+      // Exchange code for token
+      apiCall('/auth/google/exchange', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ code })
+      })
+      .then(res => {
+        if (!res.ok) {
+          throw new Error('Failed to exchange code for token');
+        }
+        return res.json();
+      })
+      .then(({ token, user }) => {
+        localStorage.setItem('authToken', token);
+        onLogin(user);
+        // Clean up URL and redirect to dashboard
+        window.history.replaceState({}, document.title, '/');
+      })
+      .catch(error => {
+        console.error('OAuth exchange failed:', error);
+        alert('Login failed. Please try again.');
+        // Clean up URL
+        window.history.replaceState({}, document.title, '/');
+      });
+    } else if (token && (window.location.pathname === '/auth/callback' || window.location.pathname === '/auth/google/callback')) {
+      // Direct token from URL (from backend redirect)
+      localStorage.setItem('authToken', token);
+      
+      apiCall('/auth/me', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      })
+      .then(res => {
+        if (!res.ok) {
+          throw new Error(`Failed to get user info: ${res.status} ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then(user => {
+        onLogin(user);
+        // Clean up URL and redirect to dashboard
+        window.history.replaceState({}, document.title, '/');
+      })
+      .catch(error => {
+        console.error('Error getting user info:', error);
+        alert('Login failed. Please try again.');
+        localStorage.removeItem('authToken');
+        // Clean up URL
+        window.history.replaceState({}, document.title, '/');
+      });
+    } else if (error) {
+      console.error('Authentication error:', error);
+      alert(`Login error: ${error}`);
+      // Clean up URL
+      window.history.replaceState({}, document.title, '/');
+    }
+  }, [onLogin]);
+
+  const handleGoogleLogin = async () => {
+    try {
+      // Get OAuth URL from backend
+      const response = await apiCall('/auth/google/url');
+      const { url } = await response.json();
+      
+      // Redirect to Google OAuth
+      window.location.href = url;
+    } catch (error) {
+      console.error('Failed to get OAuth URL:', error);
+      alert('Login failed. Please try again.');
+    }
   };
 
   if (loading) {
     return (
       <div className="login-container">
-        <div className="login-box">
-          <h1 className="login-title">VIP Coordinator</h1>
-          <p>Loading...</p>
+        <div className="login-card">
+          <div className="loading">Loading...</div>
         </div>
       </div>
     );
@@ -60,33 +117,68 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
 
   return (
     <div className="login-container">
-      <div className="login-box">
-        <h1 className="login-title">VIP Coordinator</h1>
-        <p className="login-subtitle">Transportation Management System</p>
-        
-        {error && (
-          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-            {error}
+      <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 log in will become the system administrator.</p>
           </div>
         )}
 
         <div className="login-content">
-          <GoogleLogin 
-            onSuccess={handleGoogleSuccess}
-            onError={handleGoogleError}
-          />
-          
-          <div className="setup-info">
-            {setupStatus && !setupStatus.hasUsers && (
-              <p className="text-sm text-amber-600 mt-4">
-                First user to log in will become an administrator
-              </p>
-            )}
+          <button 
+            className="google-login-btn"
+            onClick={handleGoogleLogin}
+            disabled={false}
+          >
+            <svg className="google-icon" viewBox="0 0 24 24">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+            </svg>
+            Continue with Google
+          </button>
+
+          <div className="login-info">
+            <p>
+              {setupStatus?.firstAdminCreated 
+                ? "Sign in with your Google account to access the VIP Coordinator."
+                : "Sign in with Google to set up your administrator account."
+              }
+            </p>
           </div>
+
+          {setupStatus && !setupStatus.setupCompleted && (
+            <div style={{ 
+              marginTop: '1rem',
+              padding: '1rem', 
+              backgroundColor: '#fff3cd', 
+              borderRadius: '6px',
+              border: '1px solid #ffeaa7',
+              fontSize: '0.9rem'
+            }}>
+              <strong>⚠️ Setup Required:</strong>
+              <p style={{ margin: '0.5rem 0 0 0' }}>
+                Google OAuth credentials need to be configured. If the login doesn't work, 
+                please follow the setup guide in <code>GOOGLE_OAUTH_SETUP.md</code> to configure 
+                your Google Cloud Console credentials in the admin dashboard.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="login-footer">
+          <p>Secure authentication powered by Google OAuth</p>
         </div>
       </div>
     </div>
   );
 };
 
-export default Login;
+export default Login;

frontend/src/components/ScheduleManager.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { apiCall } from '../utils/api';
+import { apiCall } from '../config/api';
 import DriverSelector from './DriverSelector';
 
 interface ScheduleEvent {
@@ -33,14 +33,15 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
   const fetchSchedule = async () => {
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/api/vips/${vipId}/schedule`, {
+      const response = await apiCall(`/api/vips/${vipId}/schedule`, {
         headers: {
           'Authorization': `Bearer ${token}`,
           'Content-Type': 'application/json'
         }
       });
       
-      if (data) {
+      if (response.ok) {
+        const data = await response.json();
         setSchedule(data);
       }
     } catch (error) {
@@ -51,14 +52,15 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
   const fetchDrivers = async () => {
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall('/api/drivers', {
+      const response = await apiCall('/api/drivers', {
         headers: {
           'Authorization': `Bearer ${token}`,
           'Content-Type': 'application/json'
         }
       });
       
-      if (data) {
+      if (response.ok) {
+        const data = await response.json();
         setDrivers(data);
       }
     } catch (error) {
@@ -303,7 +305,7 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
   async function handleAddEvent(eventData: any) {
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/api/vips/${vipId}/schedule`, {
+      const response = await apiCall(`/api/vips/${vipId}/schedule`, {
         method: 'POST',
         headers: {
           'Authorization': `Bearer ${token}`,
@@ -312,11 +314,12 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
         body: JSON.stringify(eventData),
       });
       
-      if (data) {
+      if (response.ok) {
         await fetchSchedule();
         setShowAddForm(false);
       } else {
-        throw new Error('Failed to add event');
+        const errorData = await response.json();
+        throw errorData;
       }
     } catch (error) {
       console.error('Error adding event:', error);
@@ -327,7 +330,7 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
   async function handleEditEvent(eventData: any) {
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/api/vips/${vipId}/schedule/${eventData.id}`, {
+      const response = await apiCall(`/api/vips/${vipId}/schedule/${eventData.id}`, {
         method: 'PUT',
         headers: {
           'Authorization': `Bearer ${token}`,
@@ -336,11 +339,12 @@ const ScheduleManager: React.FC<ScheduleManagerProps> = ({ vipId, vipName }) =>
         body: JSON.stringify(eventData),
       });
       
-      if (data) {
+      if (response.ok) {
         await fetchSchedule();
         setEditingEvent(null);
       } else {
-        throw new Error('Failed to update event');
+        const errorData = await response.json();
+        throw errorData;
       }
     } catch (error) {
       console.error('Error updating event:', error);

frontend/src/components/UserManagement.tsx

@@ -1,458 +1,488 @@
-import React, { useState, useEffect } from 'react';
-import { apiCall } from '../utils/api';
-import { User } from '../types';
-import { useToast } from '../contexts/ToastContext';
-import { LoadingSpinner } from './LoadingSpinner';
+import { useState, useEffect } from 'react';
+import { API_BASE_URL } from '../config/api';
 
-interface UserManagementProps {
-  currentUserId: string;
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  picture: string;
+  role: string;
+  created_at: string;
+  last_sign_in_at?: string;
+  provider: string;
 }
 
-const UserManagement: React.FC<UserManagementProps> = ({ currentUserId }) => {
-  const { showToast } = useToast();
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterRole, setFilterRole] = useState<string>('all');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [showEditModal, setShowEditModal] = useState(false);
+interface UserManagementProps {
+  currentUser: any;
+}
 
-  useEffect(() => {
-    fetchUsers();
-  }, []);
+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 { data } = await apiCall('/auth/users', {
+      const response = await fetch(`${API_BASE_URL}/auth/users`, {
         headers: {
           'Authorization': `Bearer ${token}`,
-        },
+          'Content-Type': 'application/json'
+        }
       });
 
-      if (data) {
-        setUsers(data);
-      } else {
-        showToast('Failed to load users', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to fetch users');
       }
-    } catch (error) {
-      showToast('Error loading users', 'error');
+
+      const userData = await response.json();
+      setUsers(userData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch users');
     } finally {
       setLoading(false);
     }
   };
 
-  const handleApprove = async (userEmail: string, role: string) => {
+  const fetchPendingUsers = async () => {
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/auth/users/${userEmail}/approve`, {
-        method: 'POST',
+      const response = await fetch(`${API_BASE_URL}/auth/users/pending/list`, {
         headers: {
           'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ role }),
+          'Content-Type': 'application/json'
+        }
       });
 
-      if (data) {
-        showToast('User approved successfully!', 'success');
-        fetchUsers();
-      } else {
-        showToast('Failed to approve user', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to fetch pending users');
       }
-    } catch (error) {
-      showToast('Error approving user', 'error');
+
+      const pendingData = await response.json();
+      setPendingUsers(pendingData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch pending users');
     }
   };
 
-  const handleReject = async (userEmail: string) => {
-    if (!confirm('Are you sure you want to reject this user?')) return;
-
+  const updateUserRole = async (userEmail: string, newRole: string) => {
+    setUpdatingUser(userEmail);
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/auth/users/${userEmail}/reject`, {
-        method: 'POST',
+      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 (data) {
-        showToast('User rejected', 'success');
-        fetchUsers();
-      } else {
-        showToast('Failed to reject user', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to update user role');
       }
-    } catch (error) {
-      showToast('Error rejecting user', 'error');
+
+      // Refresh users list
+      await fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update user role');
+    } finally {
+      setUpdatingUser(null);
     }
   };
 
-  const handleDeactivate = async (userEmail: string) => {
-    if (!confirm('Are you sure you want to deactivate this user?')) return;
+  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 { data } = await apiCall(`/auth/users/${userEmail}/deactivate`, {
-        method: 'POST',
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}`, {
+        method: 'DELETE',
         headers: {
           'Authorization': `Bearer ${token}`,
-        },
+          'Content-Type': 'application/json'
+        }
       });
 
-      if (data) {
-        showToast('User deactivated', 'success');
-        fetchUsers();
-      } else {
-        showToast('Failed to deactivate user', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to delete user');
       }
-    } catch (error) {
-      showToast('Error deactivating user', 'error');
+
+      // Refresh users list
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete user');
     }
   };
 
-  const handleReactivate = async (userEmail: string) => {
+  const approveUser = async (userEmail: string) => {
+    setUpdatingUser(userEmail);
     try {
       const token = localStorage.getItem('authToken');
-      const { data } = await apiCall(`/auth/users/${userEmail}/reactivate`, {
-        method: 'POST',
+      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 (data) {
-        showToast('User reactivated', 'success');
-        fetchUsers();
-      } else {
-        showToast('Failed to reactivate user', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to approve user');
       }
-    } catch (error) {
-      showToast('Error reactivating user', 'error');
+
+      // Refresh both lists
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to approve user');
+    } finally {
+      setUpdatingUser(null);
     }
   };
 
-  const handleRoleChange = async (userEmail: string, newRole: string) => {
+  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 { data } = await apiCall(`/auth/users/${userEmail}/role`, {
-        method: 'PUT',
+      const response = await fetch(`${API_BASE_URL}/auth/users/${userEmail}/approval`, {
+        method: 'PATCH',
         headers: {
           'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
+          'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ role: newRole }),
+        body: JSON.stringify({ status: 'denied' })
       });
 
-      if (data) {
-        showToast('Role updated successfully', 'success');
-        fetchUsers();
-        setShowEditModal(false);
-      } else {
-        showToast('Failed to update role', 'error');
+      if (!response.ok) {
+        throw new Error('Failed to deny user');
       }
-    } catch (error) {
-      showToast('Error updating role', 'error');
+
+      // Refresh both lists
+      await fetchUsers();
+      await fetchPendingUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to deny user');
+    } finally {
+      setUpdatingUser(null);
     }
   };
 
-  // Filter users
-  const filteredUsers = users.filter(user => {
-    const matchesSearch = searchTerm === '' || 
-      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      user.organization?.toLowerCase().includes(searchTerm.toLowerCase());
-    
-    const matchesRole = filterRole === 'all' || user.role === filterRole;
-    const matchesStatus = filterStatus === 'all' || user.status === filterStatus;
-    
-    return matchesSearch && matchesRole && matchesStatus;
-  });
+  useEffect(() => {
+    fetchUsers();
+    fetchPendingUsers();
+  }, []);
 
-  // Separate pending users
-  const pendingUsers = filteredUsers.filter(u => u.status === 'pending');
-  const activeUsers = filteredUsers.filter(u => u.status !== 'pending');
+  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="flex justify-center items-center h-64">
-        <LoadingSpinner size="lg" message="Loading users..." />
+      <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="space-y-6">
-      {/* Filters */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div className="md:col-span-2">
-            <input
-              type="text"
-              placeholder="Search users by name, email, or organization..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="form-input w-full"
-            />
-          </div>
-          <div>
-            <select
-              value={filterRole}
-              onChange={(e) => setFilterRole(e.target.value)}
-              className="form-select w-full"
+    <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'
+              }`}
             >
-              <option value="all">All Roles</option>
-              <option value="administrator">Administrator</option>
-              <option value="coordinator">Coordinator</option>
-              <option value="driver">Driver</option>
-              <option value="viewer">Viewer</option>
-            </select>
-          </div>
-          <div>
-            <select
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-              className="form-select w-full"
+              👥 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'
+              }`}
             >
-              <option value="all">All Status</option>
-              <option value="pending">Pending</option>
-              <option value="active">Active</option>
-              <option value="deactivated">Deactivated</option>
-            </select>
-          </div>
+              ⏳ 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>
 
-      {/* Pending Users */}
-      {pendingUsers.length > 0 && (
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200">
-          <div className="p-6 border-b border-slate-200">
-            <h3 className="text-lg font-semibold text-slate-800">
-              Pending Approval ({pendingUsers.length})
+      {/* 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-slate-200">
-            {pendingUsers.map(user => (
-              <div key={user.id} className="p-6 hover:bg-slate-50">
-                <div className="flex items-start justify-between">
-                  <div className="flex items-start space-x-4">
-                    <div className="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
-                      <span className="text-lg font-semibold text-amber-700">
-                        {user.name.charAt(0).toUpperCase()}
-                      </span>
-                    </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="font-semibold text-slate-800">{user.name}</h4>
-                      <p className="text-sm text-slate-600">{user.email}</p>
-                      <div className="mt-2 space-y-1 text-sm">
-                        <p><span className="text-slate-500">Organization:</span> {user.organization || 'Not provided'}</p>
-                        <p><span className="text-slate-500">Phone:</span> {user.phone || 'Not provided'}</p>
-                        <p><span className="text-slate-500">Requested Role:</span> 
-                          <span className="ml-1 font-medium capitalize">{user.onboardingData?.requestedRole}</span>
-                        </p>
-                        <p className="mt-2 p-2 bg-slate-50 rounded text-slate-700">
-                          <span className="font-medium">Reason:</span> {user.onboardingData?.reason}
-                        </p>
-                        {user.onboardingData?.vehicleType && (
-                          <div className="mt-2 p-2 bg-blue-50 rounded">
-                            <p className="font-medium text-blue-900 mb-1">Driver Details:</p>
-                            <p className="text-sm text-blue-800">
-                              Vehicle: {user.onboardingData.vehicleType} 
-                              ({user.onboardingData.vehicleCapacity} passengers) - 
-                              {user.onboardingData.licensePlate}
-                            </p>
-                          </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 space-x-2">
-                    <select
-                      className="form-select text-sm"
-                      defaultValue={user.onboardingData?.requestedRole}
-                      onChange={(e) => {
-                        const role = e.target.value;
-                        if (confirm(`Approve ${user.name} as ${role}?`)) {
-                          handleApprove(user.email, role);
-                        }
-                      }}
-                    >
-                      <option value="">Select role to approve</option>
-                      <option value="administrator">Approve as Administrator</option>
-                      <option value="coordinator">Approve as Coordinator</option>
-                      <option value="driver">Approve as Driver</option>
-                      <option value="viewer">Approve as Viewer</option>
-                    </select>
+
+                  <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={() => handleReject(user.email)}
-                      className="btn btn-danger btn-sm"
+                      onClick={() => approveUser(user.email)}
+                      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' : ''
+                      }`}
                     >
-                      Reject
+                      {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>
       )}
 
-      {/* Active/All Users */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200">
-        <div className="p-6 border-b border-slate-200">
-          <h3 className="text-lg font-semibold text-slate-800">
-            Users ({activeUsers.length})
-          </h3>
-        </div>
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-slate-50 border-b border-slate-200">
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  User
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Role
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Organization
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Status
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Approved By
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-200">
-              {activeUsers.map(user => (
-                <tr key={user.id} className="hover:bg-slate-50">
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center">
-                      <div className="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center">
-                        <span className="text-sm font-semibold text-slate-700">
-                          {user.name.charAt(0).toUpperCase()}
-                        </span>
-                      </div>
-                      <div className="ml-4">
-                        <div className="text-sm font-medium text-slate-900">{user.name}</div>
-                        <div className="text-sm text-slate-500">{user.email}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 capitalize">
-                      {user.role}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                    {user.organization || '-'}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
-                      user.status === 'active' 
-                        ? 'bg-green-100 text-green-800' 
-                        : 'bg-red-100 text-red-800'
-                    }`}>
-                      {user.status}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                    {user.approvedBy || '-'}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                    <button
-                      onClick={() => {
-                        setSelectedUser(user);
-                        setShowEditModal(true);
-                      }}
-                      className="text-amber-600 hover:text-amber-900 mr-3"
-                      disabled={user.id === currentUserId}
-                    >
-                      Edit
-                    </button>
-                    {user.status === 'active' ? (
-                      <button
-                        onClick={() => handleDeactivate(user.email)}
-                        className="text-red-600 hover:text-red-900"
-                        disabled={user.id === currentUserId}
-                      >
-                        Deactivate
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => handleReactivate(user.email)}
-                        className="text-green-600 hover:text-green-900"
-                      >
-                        Reactivate
-                      </button>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </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>
 
-      {/* Edit Modal */}
-      {showEditModal && selectedUser && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-xl max-w-md w-full p-6">
-            <h3 className="text-lg font-semibold text-slate-800 mb-4">
-              Edit User: {selectedUser.name}
-            </h3>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-2">
-                  Role
-                </label>
-                <select
-                  value={selectedUser.role}
-                  onChange={(e) => handleRoleChange(selectedUser.id, e.target.value)}
-                  className="form-select w-full"
-                  disabled={selectedUser.id === currentUserId}
-                >
-                  <option value="administrator">Administrator</option>
-                  <option value="coordinator">Coordinator</option>
-                  <option value="driver">Driver</option>
-                  <option value="viewer">Viewer</option>
-                </select>
-              </div>
-              
-              <div className="bg-slate-50 rounded-lg p-4 text-sm">
-                <h4 className="font-medium text-slate-800 mb-2">Audit Information:</h4>
-                <p className="text-slate-600">Created: {new Date(selectedUser.createdAt || '').toLocaleString()}</p>
-                {selectedUser.approvedBy && (
-                  <p className="text-slate-600">Approved by: {selectedUser.approvedBy}</p>
-                )}
-                {selectedUser.approvedAt && (
-                  <p className="text-slate-600">Approved at: {new Date(selectedUser.approvedAt).toLocaleString()}</p>
-                )}
-                {selectedUser.lastLogin && (
-                  <p className="text-slate-600">Last login: {new Date(selectedUser.lastLogin).toLocaleString()}</p>
-                )}
-              </div>
-            </div>
-            
-            <div className="flex justify-end space-x-3 mt-6">
-              <button
-                onClick={() => setShowEditModal(false)}
-                className="btn btn-secondary"
-              >
-                Close
-              </button>
-            </div>
-          </div>
-        </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;
+export default UserManagement;

frontend/src/components/VipForm.tsx

@@ -1,13 +1,23 @@
 import React, { useState } from 'react';
-import { VipFormData } from '../types';
-import { useToast } from '../contexts/ToastContext';
 
 interface Flight {
   flightNumber: string;
   flightDate: string;
   segment: number;
   validated?: boolean;
-  validationData?: Record<string, unknown>;
+  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 {
@@ -16,7 +26,6 @@ interface VipFormProps {
 }
 
 const VipForm: React.FC<VipFormProps> = ({ onSubmit, onCancel }) => {
-  const { showToast } = useToast();
   const [formData, setFormData] = useState<VipFormData>({
     name: '',
     organization: '',