Initial commit - Current state of vip-coordinator
This commit is contained in:
272
frontend/src/App.tsx
Normal file
272
frontend/src/App.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user