Backup: 2025-06-07 18:32 - Production setup complete

[Restore from backup: vip-coordinator-backup-2025-06-07-18-32-production-setup-complete]

frontend/src/App.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } 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';
@@ -12,102 +11,54 @@ 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;
+    // Check if user is already authenticated
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      apiCall('/auth/me', {
+        headers: {
+          'Authorization': `Bearer ${token}`
         }
-
-        if (!response.ok) {
-          throw new Error(`Failed to load profile (${response.status})`);
+      })
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          // Token is invalid, remove it
+          localStorage.removeItem('authToken');
+          throw new Error('Invalid token');
         }
-
-        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 {
+      })
+      .then(userData => {
+        setUser(userData);
         setLoading(false);
-      }
-    };
-
-    if (!authLoading) {
-      bootstrap();
+      })
+      .catch(error => {
+        console.error('Auth check failed:', error);
+        setLoading(false);
+      });
+    } else {
+      setLoading(false);
     }
-  }, [isAuthenticated, authLoading, getAccessTokenSilently, auth0User]);
+  }, []);
+
+  const handleLogin = (userData: any) => {
+    setUser(userData);
+  };
 
   const handleLogout = () => {
     localStorage.removeItem('authToken');
-    logout({ logoutParams: { returnTo: window.location.origin } });
+    setUser(null);
+    // Optionally call logout endpoint
+    apiCall('/auth/logout', { method: 'POST' })
+      .catch(error => console.error('Logout error:', error));
   };
 
-  if (authLoading || loading) {
+  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">
@@ -118,68 +69,23 @@ function App() {
     );
   }
 
-  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>
-    );
+  // Handle OAuth callback route even when not logged in
+  if (window.location.pathname === '/auth/callback' || window.location.pathname === '/auth/google/callback') {
+    return <Login onLogin={handleLogin} />;
   }
 
-  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}
-      />
-    );
+  if (!user) {
+    return <Login onLogin={handleLogin} />;
   }
 
-  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">
+        {/* Modern Navigation */}
         <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">
+              {/* Logo/Brand */}
               <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>
@@ -189,36 +95,37 @@ function App() {
                 </h1>
               </div>
 
+              {/* Navigation Links */}
               <div className="hidden md:flex items-center space-x-1">
-                <Link
-                  to="/"
+                <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"
+                <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"
+                <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"
+                {(user.role === 'administrator' || user.role === 'coordinator') && (
+                  <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"
+                {user.role === '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
@@ -226,23 +133,20 @@ function App() {
                 )}
               </div>
 
+              {/* User Menu */}
               <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 className="w-8 h-8 bg-gradient-to-br from-slate-400 to-slate-600 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs font-medium">
+                      {user.name.charAt(0).toUpperCase()}
+                    </span>
                   </div>
                   <div className="text-sm">
-                    <div className="font-medium text-slate-900">{displayName}</div>
-                    <div className="text-slate-500 capitalize">{userRole}</div>
+                    <div className="font-medium text-slate-900">{user.name}</div>
+                    <div className="text-slate-500 capitalize">{user.role}</div>
                   </div>
                 </div>
-                <button
+                <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"
                 >
@@ -253,6 +157,7 @@ function App() {
           </div>
         </nav>
 
+        {/* Main Content */}
         <main className="max-w-7xl mx-auto px-6 lg:px-8 py-8">
           <Routes>
             <Route path="/" element={<Dashboard />} />