first commit
This commit is contained in:
David
commit
15d43ee2bd
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
.env
|
||||||
|
.idea
|
||||||
60
Dockerfile
Normal file
60
Dockerfile
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# Multi-stage build pour le frontend React
|
||||||
|
FROM node:18-alpine AS base
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Installer pnpm
|
||||||
|
RUN npm install -g pnpm
|
||||||
|
|
||||||
|
# Copier les fichiers de dépendances
|
||||||
|
COPY package.json pnpm-lock.yaml* ./
|
||||||
|
|
||||||
|
# Installer les dépendances
|
||||||
|
RUN pnpm install
|
||||||
|
|
||||||
|
# Stage de développement
|
||||||
|
FROM base AS development
|
||||||
|
|
||||||
|
# Copier le code source
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Exposer le port de développement
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
# Commande de développement avec hot reload
|
||||||
|
CMD ["pnpm", "dev", "--host", "0.0.0.0"]
|
||||||
|
|
||||||
|
# Stage de build pour la production
|
||||||
|
FROM base AS build
|
||||||
|
|
||||||
|
# Copier le code source
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Variables d'environnement pour le build
|
||||||
|
ARG VITE_API_URL
|
||||||
|
ENV VITE_API_URL=$VITE_API_URL
|
||||||
|
|
||||||
|
# Construire l'application
|
||||||
|
RUN pnpm build
|
||||||
|
|
||||||
|
# Stage de production avec Nginx
|
||||||
|
FROM nginx:alpine AS production
|
||||||
|
|
||||||
|
# Copier la configuration Nginx personnalisée
|
||||||
|
COPY infrastructure/nginx/frontend.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Copier les fichiers buildés
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Copier le script d'entrée pour les variables d'environnement
|
||||||
|
COPY infrastructure/docker/frontend-entrypoint.sh /docker-entrypoint.d/40-frontend-config.sh
|
||||||
|
RUN chmod +x /docker-entrypoint.d/40-frontend-config.sh
|
||||||
|
|
||||||
|
# Exposer le port
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# Health check
|
||||||
|
HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
|
||||||
|
CMD curl -f http://localhost/ || exit 1
|
||||||
|
|
||||||
|
# Nginx démarre automatiquement
|
||||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
46
index.html
Normal file
46
index.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#0066CC" />
|
||||||
|
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Xpeditis - Plateforme SaaS pour le transport maritime international. Devis instantané, suivi en temps réel, gestion des expéditions. Simplifiez votre logistique maritime."
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="keywords"
|
||||||
|
content="transport maritime, logistique, SaaS, expédition, fret maritime, devis transport, suivi cargaison, commerce international, Xpeditis"
|
||||||
|
/>
|
||||||
|
<meta name="author" content="Xpeditis" />
|
||||||
|
|
||||||
|
<!-- Open Graph pour un meilleur affichage sur les réseaux sociaux -->
|
||||||
|
<meta property="og:title" content="Xpeditis - Plateforme Maritime SaaS" />
|
||||||
|
<meta property="og:description" content="Révolutionnez votre transport maritime avec notre plateforme SaaS. Devis instantané, suivi en temps réel et gestion simplifiée." />
|
||||||
|
<meta property="og:image" content="/vite.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://www.xpeditis.com" />
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" href="/vite.svg" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
|
||||||
|
<title>Xpeditis - Plateforme Maritime SaaS | Transport & Logistique</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>Vous devez activer JavaScript pour utiliser cette application.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
manifest.json
Normal file
25
manifest.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
50
package.json
Normal file
50
package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "xpeditis-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^3.3.2",
|
||||||
|
"@radix-ui/react-dialog": "^1.0.5",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||||
|
"@radix-ui/react-select": "^2.0.0",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@radix-ui/react-tabs": "^1.0.4",
|
||||||
|
"@radix-ui/react-toast": "^1.1.5",
|
||||||
|
"@tanstack/react-query": "^5.8.4",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"date-fns": "^2.30.0",
|
||||||
|
"lucide-react": "^0.294.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.48.2",
|
||||||
|
"react-router-dom": "^6.20.1",
|
||||||
|
"tailwind-merge": "^2.0.0",
|
||||||
|
"zod": "^3.22.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.37",
|
||||||
|
"@types/react-dom": "^18.2.15",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||||
|
"@typescript-eslint/parser": "^6.10.0",
|
||||||
|
"@vitejs/plugin-react": "^4.1.1",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.4",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"tailwindcss": "^3.3.5",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
3818
pnpm-lock.yaml
generated
Normal file
3818
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
3
robots.txt
Normal file
3
robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
41
src/App.tsx
Normal file
41
src/App.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import { Routes, Route } from 'react-router-dom'
|
||||||
|
import { AuthProvider } from './contexts/AuthContext'
|
||||||
|
import ProtectedRoute from './components/auth/ProtectedRoute'
|
||||||
|
import Layout from './components/layout/Layout'
|
||||||
|
import LandingPage from './pages/LandingPage'
|
||||||
|
import HomePage from './pages/HomePage'
|
||||||
|
import QuotePage from './pages/QuotePage'
|
||||||
|
import BookingPage from './pages/BookingPage'
|
||||||
|
import TrackingPage from './pages/TrackingPage'
|
||||||
|
import DashboardPage from './pages/DashboardPage'
|
||||||
|
import ShipSchedulePage from './pages/ShipSchedulePage'
|
||||||
|
import LoginPage from './pages/LoginPage'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<Routes>
|
||||||
|
{/* Landing page publique */}
|
||||||
|
<Route path="/" element={<LandingPage />} />
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
|
||||||
|
{/* Application avec layout (dashboard) - Routes protégées */}
|
||||||
|
<Route path="/app" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<Layout />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}>
|
||||||
|
<Route index element={<DashboardPage />} />
|
||||||
|
<Route path="home" element={<HomePage />} />
|
||||||
|
<Route path="quote" element={<QuotePage />} />
|
||||||
|
<Route path="bookings" element={<BookingPage />} />
|
||||||
|
<Route path="tracking" element={<TrackingPage />} />
|
||||||
|
<Route path="dashboard" element={<DashboardPage />} />
|
||||||
|
<Route path="schedule" element={<ShipSchedulePage />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</AuthProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
38
src/components/auth/ProtectedRoute.tsx
Normal file
38
src/components/auth/ProtectedRoute.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { Navigate, useLocation } from 'react-router-dom';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import { Ship } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ProtectedRouteProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
||||||
|
const { isAuthenticated, isLoading } = useAuth();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
// Afficher un loader pendant la vérification de l'authentification
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-white flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
|
<div className="flex items-center justify-center mb-2">
|
||||||
|
<Ship className="h-6 w-6 text-blue-600 mr-2" />
|
||||||
|
<span className="text-lg font-semibold text-gray-900">Xpeditis</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600">Vérification de l'authentification...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si pas authentifié, rediriger vers la page de connexion
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return <Navigate to="/login" state={{ from: location }} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si authentifié, afficher le contenu protégé
|
||||||
|
return <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProtectedRoute;
|
||||||
340
src/components/layout/Layout.tsx
Normal file
340
src/components/layout/Layout.tsx
Normal file
@ -0,0 +1,340 @@
|
|||||||
|
import { Link, useLocation, Outlet } from 'react-router-dom';
|
||||||
|
import { Ship, Menu, X, Home, FileText, Package, MapPin, BarChart3, User, LogOut, Bell, Settings, Globe } from 'lucide-react';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import {FC, ReactNode, useEffect, useState} from "react";
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Layout: FC<LayoutProps> = () => {
|
||||||
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||||
|
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||||
|
const [isNotificationOpen, setIsNotificationOpen] = useState(false);
|
||||||
|
const [isLanguageOpen, setIsLanguageOpen] = useState(false);
|
||||||
|
const [currentLanguage, setCurrentLanguage] = useState('fr');
|
||||||
|
const location = useLocation();
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: 'Accueil', href: '/app/home', icon: Home },
|
||||||
|
{ name: 'Tableau de bord', href: '/app', icon: BarChart3 },
|
||||||
|
{ name: 'Devis', href: '/app/quote', icon: FileText },
|
||||||
|
{ name: 'Réservations', href: '/app/bookings', icon: Package },
|
||||||
|
{ name: 'Suivi', href: '/app/tracking', icon: MapPin }
|
||||||
|
];
|
||||||
|
|
||||||
|
const isActive = (path: string) => location.pathname === path;
|
||||||
|
|
||||||
|
// Fermer le menu utilisateur quand on clique ailleurs
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (isUserMenuOpen) {
|
||||||
|
setIsUserMenuOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [isUserMenuOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header fixe en haut */}
|
||||||
|
<header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 shadow-sm">
|
||||||
|
<div className="flex items-center justify-between h-16 px-6">
|
||||||
|
{/* Logo à gauche */}
|
||||||
|
<Link to="/" className="flex items-center">
|
||||||
|
<Ship className="h-8 w-8 text-blue-600" />
|
||||||
|
<span className="ml-2 text-xl font-bold text-gray-900">Xpeditis</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Actions et User Menu tout à droite */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{/* Centre de notifications */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsNotificationOpen(!isNotificationOpen)}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-100 transition-colors relative"
|
||||||
|
>
|
||||||
|
<Bell className="h-5 w-5 text-gray-600" />
|
||||||
|
{/* Badge de notification */}
|
||||||
|
<span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown Notifications */}
|
||||||
|
{isNotificationOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200">
|
||||||
|
<div className="px-4 py-2 text-sm font-medium text-gray-900 border-b border-gray-100">
|
||||||
|
Notifications
|
||||||
|
</div>
|
||||||
|
<div className="max-h-64 overflow-y-auto">
|
||||||
|
<div className="px-4 py-3 hover:bg-gray-50 border-b border-gray-100">
|
||||||
|
<div className="text-sm font-medium text-gray-900">Nouvelle expédition</div>
|
||||||
|
<div className="text-xs text-gray-500">Votre expédition XPD-2025-003 a été confirmée</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">Il y a 2 heures</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-3 hover:bg-gray-50 border-b border-gray-100">
|
||||||
|
<div className="text-sm font-medium text-gray-900">Devis approuvé</div>
|
||||||
|
<div className="text-xs text-gray-500">Le devis QT-2025-012 a été accepté</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">Il y a 4 heures</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-3 hover:bg-gray-50">
|
||||||
|
<div className="text-sm font-medium text-gray-900">Livraison terminée</div>
|
||||||
|
<div className="text-xs text-gray-500">L'expédition XPD-2025-001 a été livrée</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">Il y a 1 jour</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 py-2 border-t border-gray-100">
|
||||||
|
<button className="text-sm text-blue-600 hover:text-blue-800">Voir toutes les notifications</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Paramètres */}
|
||||||
|
<button className="p-2 rounded-lg hover:bg-gray-100 transition-colors">
|
||||||
|
<Settings className="h-5 w-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Sélecteur de langue */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsLanguageOpen(!isLanguageOpen)}
|
||||||
|
className="flex items-center space-x-1 px-2 py-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Globe className="h-4 w-4 text-gray-600" />
|
||||||
|
<span className="text-sm font-medium text-gray-700 uppercase">{currentLanguage}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown Langue */}
|
||||||
|
{isLanguageOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentLanguage('fr');
|
||||||
|
setIsLanguageOpen(false);
|
||||||
|
}}
|
||||||
|
className={`flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 transition-colors ${
|
||||||
|
currentLanguage === 'fr' ? 'bg-blue-50 text-blue-700' : 'text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
🇫🇷 Français
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentLanguage('en');
|
||||||
|
setIsLanguageOpen(false);
|
||||||
|
}}
|
||||||
|
className={`flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 transition-colors ${
|
||||||
|
currentLanguage === 'en' ? 'bg-blue-50 text-blue-700' : 'text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
🇬🇧 English
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User Menu */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
|
||||||
|
className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<User className="h-5 w-5 text-gray-600" />
|
||||||
|
<span className="text-sm font-medium text-gray-700">{user?.name || user?.email}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown Menu */}
|
||||||
|
{isUserMenuOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200">
|
||||||
|
<div className="px-4 py-2 text-sm text-gray-700 border-b border-gray-100">
|
||||||
|
<div className="font-medium">{user?.name || 'Utilisateur'}</div>
|
||||||
|
<div className="text-gray-500">{user?.email}</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
logout();
|
||||||
|
setIsUserMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4 mr-2" />
|
||||||
|
Déconnexion
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Contenu principal avec sidebar */}
|
||||||
|
<div className="flex pt-16 min-h-screen"> {/* pt-16 pour compenser le header fixe */}
|
||||||
|
{/* Sidebar rétractable */}
|
||||||
|
<div className="hidden md:flex md:flex-col group justify-center" style={{height: 'calc(100vh - 4rem)'}}>
|
||||||
|
<div className="flex flex-col bg-white border border-gray-200 rounded-lg shadow-sm transition-all duration-300 ease-in-out w-16 group-hover:w-64 overflow-hidden">
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="py-4 px-2 space-y-1">
|
||||||
|
{navigation.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.href}
|
||||||
|
className={`group/item flex items-center px-2 py-3 text-sm font-medium rounded-md transition-all duration-200 relative ${
|
||||||
|
isActive(item.href)
|
||||||
|
? 'bg-blue-100 text-blue-900'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
title={item.name}
|
||||||
|
>
|
||||||
|
<Icon className={`flex-shrink-0 h-6 w-6 transition-colors ${
|
||||||
|
isActive(item.href) ? 'text-blue-500' : 'text-gray-400 group-hover/item:text-gray-500'
|
||||||
|
}`} />
|
||||||
|
<span className={`ml-3 whitespace-nowrap transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 translate-x-2 ${
|
||||||
|
isActive(item.href) ? 'text-blue-900' : 'text-gray-600 group-hover/item:text-gray-900'
|
||||||
|
}`}>
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Zone de contenu principal */}
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden transition-all duration-300">
|
||||||
|
<main className="flex-1 relative overflow-y-auto focus:outline-none">
|
||||||
|
<div className="py-6">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header mobile */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="fixed top-0 left-0 right-0 z-40 bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="flex justify-between items-center h-16 px-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||||
|
className="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
{isSidebarOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||||
|
</button>
|
||||||
|
<Link to="/" className="flex items-center">
|
||||||
|
<Ship className="h-8 w-8 text-blue-600" />
|
||||||
|
<span className="ml-2 text-xl font-bold text-gray-900">Xpeditis</span>
|
||||||
|
</Link>
|
||||||
|
{/* User menu mobile */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
|
||||||
|
className="flex items-center p-2 rounded-full hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<User className="h-5 w-5 text-gray-600" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown Menu Mobile */}
|
||||||
|
{isUserMenuOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-200">
|
||||||
|
<div className="px-4 py-2 text-sm text-gray-700 border-b border-gray-100">
|
||||||
|
<div className="font-medium">{user?.name || 'Utilisateur'}</div>
|
||||||
|
<div className="text-gray-500">{user?.email}</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
logout();
|
||||||
|
setIsUserMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4 mr-2" />
|
||||||
|
Déconnexion
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Sidebar */}
|
||||||
|
{isSidebarOpen && (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="fixed inset-0 z-40 flex">
|
||||||
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setIsSidebarOpen(false)} />
|
||||||
|
<div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
|
||||||
|
<div className="absolute top-0 right-0 -mr-12 pt-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsSidebarOpen(false)}
|
||||||
|
className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||||
|
>
|
||||||
|
<X className="h-6 w-6 text-white" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
|
||||||
|
<nav className="mt-5 px-2 space-y-1">
|
||||||
|
{navigation.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.href}
|
||||||
|
onClick={() => setIsSidebarOpen(false)}
|
||||||
|
className={`group flex items-center px-2 py-2 text-base font-medium rounded-md ${
|
||||||
|
isActive(item.href)
|
||||||
|
? 'text-blue-600 bg-blue-50'
|
||||||
|
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="mr-4 h-6 w-6" />
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-white border-t border-gray-200 mt-auto">
|
||||||
|
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Ship className="h-6 w-6 text-blue-600" />
|
||||||
|
<span className="ml-2 text-sm text-gray-600">
|
||||||
|
© 2025 Xpeditis. Plateforme maritime SaaS.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-6">
|
||||||
|
<a href="#" className="text-sm text-gray-600 hover:text-gray-900">
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-sm text-gray-600 hover:text-gray-900">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-sm text-gray-600 hover:text-gray-900">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
10
src/components/quote/QuoteForm.tsx
Normal file
10
src/components/quote/QuoteForm.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
function QuoteForm({ customerId }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
19
src/components/quote/QuoteResults.tsx
Normal file
19
src/components/quote/QuoteResults.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import {QuoteResponse} from "../../lib/api";
|
||||||
|
|
||||||
|
|
||||||
|
interface QuoteResultsProps {
|
||||||
|
quotes: QuoteResponse[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function QuoteResults({ quotes }: QuoteResultsProps) {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-lg font-semibold">Offres disponibles</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
127
src/components/ui/toast.tsx
Normal file
127
src/components/ui/toast.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
import { X } from "lucide-react"
|
||||||
|
import {cn} from "../../lib/utils";
|
||||||
|
|
||||||
|
|
||||||
|
const ToastProvider = ToastPrimitives.Provider
|
||||||
|
|
||||||
|
const ToastViewport = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Viewport
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||||
|
|
||||||
|
const toastVariants = cva(
|
||||||
|
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "border bg-background text-foreground",
|
||||||
|
destructive:
|
||||||
|
"destructive border-destructive bg-destructive text-destructive-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const Toast = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||||
|
VariantProps<typeof toastVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<ToastPrimitives.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(toastVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
Toast.displayName = ToastPrimitives.Root.displayName
|
||||||
|
|
||||||
|
const ToastAction = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Action
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||||
|
|
||||||
|
const ToastClose = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Close
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
toast-close=""
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</ToastPrimitives.Close>
|
||||||
|
))
|
||||||
|
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||||
|
|
||||||
|
const ToastTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||||
|
|
||||||
|
const ToastDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm opacity-90", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||||
|
|
||||||
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||||
|
|
||||||
|
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||||
|
|
||||||
|
export {
|
||||||
|
type ToastProps,
|
||||||
|
type ToastActionElement,
|
||||||
|
ToastProvider,
|
||||||
|
ToastViewport,
|
||||||
|
Toast,
|
||||||
|
ToastTitle,
|
||||||
|
ToastDescription,
|
||||||
|
ToastClose,
|
||||||
|
ToastAction,
|
||||||
|
}
|
||||||
28
src/components/ui/toaster.tsx
Normal file
28
src/components/ui/toaster.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
|
||||||
|
import {useToast} from "../../hooks/use-toast";
|
||||||
|
import {Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport} from "./toast";
|
||||||
|
|
||||||
|
export function Toaster() {
|
||||||
|
const { toasts } = useToast()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToastProvider>
|
||||||
|
{toasts.map(function ({ id, title, description, action, ...props }) {
|
||||||
|
return (
|
||||||
|
<Toast key={id} {...props}>
|
||||||
|
<div className="grid gap-1">
|
||||||
|
{title && <ToastTitle>{title}</ToastTitle>}
|
||||||
|
{description && (
|
||||||
|
<ToastDescription>{description}</ToastDescription>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{action}
|
||||||
|
<ToastClose />
|
||||||
|
</Toast>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<ToastViewport />
|
||||||
|
</ToastProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
78
src/contexts/AuthContext.tsx
Normal file
78
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import { createContext, useContext, useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AuthContextType {
|
||||||
|
user: User | null;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
login: (email: string, password: string) => Promise<boolean>;
|
||||||
|
logout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
// Vérifier si l'utilisateur est déjà connecté au chargement
|
||||||
|
useEffect(() => {
|
||||||
|
const savedUser = localStorage.getItem('xpeditis_user');
|
||||||
|
if (savedUser) {
|
||||||
|
try {
|
||||||
|
setUser(JSON.parse(savedUser));
|
||||||
|
} catch (error) {
|
||||||
|
localStorage.removeItem('xpeditis_user');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setIsLoading(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const login = async (email: string, password: string): Promise<boolean> => {
|
||||||
|
// Simulation d'authentification
|
||||||
|
if (email === 'demo@xpeditis.com' && password === 'demo123') {
|
||||||
|
const userData: User = {
|
||||||
|
id: '1',
|
||||||
|
email: 'demo@xpeditis.com',
|
||||||
|
name: 'Utilisateur Demo'
|
||||||
|
};
|
||||||
|
|
||||||
|
setUser(userData);
|
||||||
|
localStorage.setItem('xpeditis_user', JSON.stringify(userData));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
setUser(null);
|
||||||
|
localStorage.removeItem('xpeditis_user');
|
||||||
|
};
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
user,
|
||||||
|
isAuthenticated: !!user,
|
||||||
|
isLoading,
|
||||||
|
login,
|
||||||
|
logout
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
186
src/hooks/use-toast.ts
Normal file
186
src/hooks/use-toast.ts
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import {ToastActionElement, ToastProps} from "../components/ui/toast";
|
||||||
|
|
||||||
|
|
||||||
|
const TOAST_LIMIT = 1
|
||||||
|
const TOAST_REMOVE_DELAY = 1000000
|
||||||
|
|
||||||
|
type ToasterToast = ToastProps & {
|
||||||
|
id: string
|
||||||
|
title?: React.ReactNode
|
||||||
|
description?: React.ReactNode
|
||||||
|
action?: ToastActionElement
|
||||||
|
}
|
||||||
|
|
||||||
|
const actionTypes = {
|
||||||
|
ADD_TOAST: "ADD_TOAST",
|
||||||
|
UPDATE_TOAST: "UPDATE_TOAST",
|
||||||
|
DISMISS_TOAST: "DISMISS_TOAST",
|
||||||
|
REMOVE_TOAST: "REMOVE_TOAST",
|
||||||
|
} as const
|
||||||
|
|
||||||
|
let count = 0
|
||||||
|
|
||||||
|
function genId() {
|
||||||
|
count = (count + 1) % Number.MAX_SAFE_INTEGER
|
||||||
|
return count.toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
type ActionType = typeof actionTypes
|
||||||
|
|
||||||
|
type Action =
|
||||||
|
| {
|
||||||
|
type: ActionType["ADD_TOAST"]
|
||||||
|
toast: ToasterToast
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: ActionType["UPDATE_TOAST"]
|
||||||
|
toast: Partial<ToasterToast>
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: ActionType["DISMISS_TOAST"]
|
||||||
|
toastId?: ToasterToast["id"]
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: ActionType["REMOVE_TOAST"]
|
||||||
|
toastId?: ToasterToast["id"]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
toasts: ToasterToast[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
||||||
|
|
||||||
|
const addToRemoveQueue = (toastId: string) => {
|
||||||
|
if (toastTimeouts.has(toastId)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
toastTimeouts.delete(toastId)
|
||||||
|
dispatch({
|
||||||
|
type: "REMOVE_TOAST",
|
||||||
|
toastId: toastId,
|
||||||
|
})
|
||||||
|
}, TOAST_REMOVE_DELAY)
|
||||||
|
|
||||||
|
toastTimeouts.set(toastId, timeout)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const reducer = (state: State, action: Action): State => {
|
||||||
|
switch (action.type) {
|
||||||
|
case "ADD_TOAST":
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||||
|
}
|
||||||
|
|
||||||
|
case "UPDATE_TOAST":
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toasts: state.toasts.map((t) =>
|
||||||
|
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||||
|
),
|
||||||
|
}
|
||||||
|
|
||||||
|
case "DISMISS_TOAST": {
|
||||||
|
const { toastId } = action
|
||||||
|
|
||||||
|
if (toastId) {
|
||||||
|
addToRemoveQueue(toastId)
|
||||||
|
} else {
|
||||||
|
state.toasts.forEach((toast) => {
|
||||||
|
addToRemoveQueue(toast.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toasts: state.toasts.map((t) =>
|
||||||
|
t.id === toastId || toastId === undefined
|
||||||
|
? {
|
||||||
|
...t,
|
||||||
|
open: false,
|
||||||
|
}
|
||||||
|
: t
|
||||||
|
),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case "REMOVE_TOAST":
|
||||||
|
if (action.toastId === undefined) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toasts: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const listeners: Array<(state: State) => void> = []
|
||||||
|
|
||||||
|
let memoryState: State = { toasts: [] }
|
||||||
|
|
||||||
|
function dispatch(action: Action) {
|
||||||
|
memoryState = reducer(memoryState, action)
|
||||||
|
listeners.forEach((listener) => {
|
||||||
|
listener(memoryState)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
type Toast = Omit<ToasterToast, "id">
|
||||||
|
|
||||||
|
function toast({ ...props }: Toast) {
|
||||||
|
const id = genId()
|
||||||
|
|
||||||
|
const update = (props: ToasterToast) =>
|
||||||
|
dispatch({
|
||||||
|
type: "UPDATE_TOAST",
|
||||||
|
toast: { ...props, id },
|
||||||
|
})
|
||||||
|
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type: "ADD_TOAST",
|
||||||
|
toast: {
|
||||||
|
...props,
|
||||||
|
id,
|
||||||
|
open: true,
|
||||||
|
onOpenChange: (open) => {
|
||||||
|
if (!open) dismiss()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
dismiss,
|
||||||
|
update,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function useToast() {
|
||||||
|
const [state, setState] = React.useState<State>(memoryState)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
listeners.push(setState)
|
||||||
|
return () => {
|
||||||
|
const index = listeners.indexOf(setState)
|
||||||
|
if (index > -1) {
|
||||||
|
listeners.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [state])
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toast,
|
||||||
|
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { useToast, toast }
|
||||||
86
src/index.css
Normal file
86
src/index.css
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
--primary: 221.2 83.2% 53.3%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
--secondary: 210 40% 96%;
|
||||||
|
--secondary-foreground: 222.2 84% 4.9%;
|
||||||
|
--muted: 210 40% 96%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
--accent: 210 40% 96%;
|
||||||
|
--accent-foreground: 222.2 84% 4.9%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 221.2 83.2% 53.3%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
--chart-1: 12 76% 61%;
|
||||||
|
--chart-2: 173 58% 39%;
|
||||||
|
--chart-3: 197 37% 24%;
|
||||||
|
--chart-4: 43 74% 66%;
|
||||||
|
--chart-5: 27 87% 67%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
|
--popover-foreground: 210 40% 98%;
|
||||||
|
--primary: 217.2 91.2% 59.8%;
|
||||||
|
--primary-foreground: 222.2 84% 4.9%;
|
||||||
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--accent-foreground: 210 40% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 224.3 76.3% 94.1%;
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 340 75% 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles spécifiques pour le thème maritime */
|
||||||
|
.maritime-gradient {
|
||||||
|
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.maritime-card {
|
||||||
|
@apply bg-white/95 backdrop-blur-sm border border-blue-100 shadow-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maritime-button {
|
||||||
|
@apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-2 rounded-lg transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maritime-input {
|
||||||
|
@apply border-blue-200 focus:border-blue-500 focus:ring-blue-500/20;
|
||||||
|
}
|
||||||
120
src/lib/api.ts
Normal file
120
src/lib/api.ts
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const API_BASE_URL = process.env.VITE_API_URL || '/api'
|
||||||
|
|
||||||
|
export const api = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Request interceptor pour ajouter le token JWT
|
||||||
|
api.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = localStorage.getItem('auth_token')
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// Response interceptor pour gérer les erreurs
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
(error) => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
localStorage.removeItem('auth_token')
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// Types pour les API calls
|
||||||
|
export interface QuoteRequest {
|
||||||
|
originPort: string
|
||||||
|
destinationPort: string
|
||||||
|
originCountry?: string
|
||||||
|
destinationCountry?: string
|
||||||
|
transportType: 'MARITIME' | 'ROAD' | 'MULTIMODAL'
|
||||||
|
containerType: 'FCL_20' | 'FCL_40' | 'FCL_40HC' | 'LCL'
|
||||||
|
quantity: number
|
||||||
|
totalWeight?: number
|
||||||
|
totalVolume?: number
|
||||||
|
customerId?: string
|
||||||
|
cargoItems?: CargoItem[]
|
||||||
|
additionalServiceCodes?: string[]
|
||||||
|
isHazardous?: boolean
|
||||||
|
requiresInsurance?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CargoItem {
|
||||||
|
description: string
|
||||||
|
quantity: number
|
||||||
|
weight: number
|
||||||
|
volume: number
|
||||||
|
hsCode?: string
|
||||||
|
value?: number
|
||||||
|
currency?: string
|
||||||
|
isHazardous?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface QuoteResponse {
|
||||||
|
id: string
|
||||||
|
originPort: string
|
||||||
|
destinationPort: string
|
||||||
|
originCountry?: string
|
||||||
|
destinationCountry?: string
|
||||||
|
transportType: string
|
||||||
|
serviceType: 'EXPRESS' | 'STANDARD' | 'ECO'
|
||||||
|
containerType: string
|
||||||
|
quantity: number
|
||||||
|
totalWeight?: number
|
||||||
|
totalVolume?: number
|
||||||
|
price: number
|
||||||
|
currency: string
|
||||||
|
transitDays: number
|
||||||
|
validUntil: string
|
||||||
|
createdAt: string
|
||||||
|
status: string
|
||||||
|
customerId?: string
|
||||||
|
additionalServices?: AdditionalService[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AdditionalService {
|
||||||
|
code: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
price: number
|
||||||
|
currency: string
|
||||||
|
mandatory: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// API functions
|
||||||
|
export const quoteApi = {
|
||||||
|
generateInstantQuote: (request: QuoteRequest): Promise<QuoteResponse[]> =>
|
||||||
|
api.post('/quotes/instant', request).then(res => res.data),
|
||||||
|
|
||||||
|
getQuoteById: (quoteId: string): Promise<QuoteResponse> =>
|
||||||
|
api.get(`/quotes/${quoteId}`).then(res => res.data),
|
||||||
|
|
||||||
|
getQuotesByCustomer: (customerId: string): Promise<QuoteResponse[]> =>
|
||||||
|
api.get(`/quotes/customer/${customerId}`).then(res => res.data),
|
||||||
|
|
||||||
|
acceptQuote: (quoteId: string, customerId: string): Promise<QuoteResponse> =>
|
||||||
|
api.post(`/quotes/${quoteId}/accept?customerId=${customerId}`).then(res => res.data),
|
||||||
|
|
||||||
|
rejectQuote: (quoteId: string, customerId: string): Promise<QuoteResponse> =>
|
||||||
|
api.post(`/quotes/${quoteId}/reject?customerId=${customerId}`).then(res => res.data),
|
||||||
|
|
||||||
|
isQuoteValid: (quoteId: string): Promise<boolean> =>
|
||||||
|
api.get(`/quotes/${quoteId}/valid`).then(res => res.data),
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { type ClassValue, clsx } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
25
src/main.tsx
Normal file
25
src/main.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
||||||
|
retry: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
219
src/pages/BookingPage.tsx
Normal file
219
src/pages/BookingPage.tsx
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Package, MapPin, Calendar, Clock, Eye, Download } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Booking {
|
||||||
|
id: string;
|
||||||
|
reference: string;
|
||||||
|
origin: string;
|
||||||
|
destination: string;
|
||||||
|
departureDate: string;
|
||||||
|
arrivalDate: string;
|
||||||
|
status: 'confirmed' | 'in-transit' | 'delivered' | 'pending';
|
||||||
|
service: string;
|
||||||
|
price: number;
|
||||||
|
cargoType: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const BookingPage: React.FC = () => {
|
||||||
|
const [bookings] = useState<Booking[]>([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
reference: 'XPD-2025-001',
|
||||||
|
origin: 'Le Havre, France',
|
||||||
|
destination: 'Shanghai, Chine',
|
||||||
|
departureDate: '2025-01-15',
|
||||||
|
arrivalDate: '2025-02-05',
|
||||||
|
status: 'in-transit',
|
||||||
|
service: 'Standard',
|
||||||
|
price: 1950,
|
||||||
|
cargoType: 'Conteneur FCL',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
reference: 'XPD-2025-002',
|
||||||
|
origin: 'Marseille, France',
|
||||||
|
destination: 'New York, États-Unis',
|
||||||
|
departureDate: '2025-01-20',
|
||||||
|
arrivalDate: '2025-02-12',
|
||||||
|
status: 'confirmed',
|
||||||
|
service: 'Express',
|
||||||
|
price: 2850,
|
||||||
|
cargoType: 'Marchandise générale',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
reference: 'XPD-2024-156',
|
||||||
|
origin: 'Rotterdam, Pays-Bas',
|
||||||
|
destination: 'Hamburg, Allemagne',
|
||||||
|
departureDate: '2024-12-10',
|
||||||
|
arrivalDate: '2024-12-15',
|
||||||
|
status: 'delivered',
|
||||||
|
service: 'Économique',
|
||||||
|
price: 1450,
|
||||||
|
cargoType: 'Groupage LCL',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'confirmed':
|
||||||
|
return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'in-transit':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'delivered':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'pending':
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'confirmed':
|
||||||
|
return 'Confirmé';
|
||||||
|
case 'in-transit':
|
||||||
|
return 'En transit';
|
||||||
|
case 'delivered':
|
||||||
|
return 'Livré';
|
||||||
|
case 'pending':
|
||||||
|
return 'En attente';
|
||||||
|
default:
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Mes réservations</h1>
|
||||||
|
<p className="text-gray-600 mt-2">
|
||||||
|
Gérez et suivez toutes vos expéditions maritimes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button className="maritime-button">
|
||||||
|
Nouvelle réservation
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistiques rapides */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-blue-600 mb-2">3</div>
|
||||||
|
<div className="text-sm text-gray-600">Réservations actives</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-yellow-600 mb-2">1</div>
|
||||||
|
<div className="text-sm text-gray-600">En transit</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-green-600 mb-2">1</div>
|
||||||
|
<div className="text-sm text-gray-600">Livré ce mois</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-gray-900 mb-2">6,250€</div>
|
||||||
|
<div className="text-sm text-gray-600">Total expédié</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des réservations */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{bookings.map((booking) => (
|
||||||
|
<div key={booking.id} className="maritime-card p-6 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
|
||||||
|
{/* Informations principales */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center space-x-4 mb-3">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
{booking.reference}
|
||||||
|
</h3>
|
||||||
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(booking.status)}`}>
|
||||||
|
{getStatusText(booking.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<MapPin className="h-4 w-4 mr-2 text-blue-600" />
|
||||||
|
<span>{booking.origin} → {booking.destination}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Package className="h-4 w-4 mr-2 text-blue-600" />
|
||||||
|
<span>{booking.cargoType} - {booking.service}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Calendar className="h-4 w-4 mr-2 text-blue-600" />
|
||||||
|
<span>Départ: {new Date(booking.departureDate).toLocaleDateString('fr-FR')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Clock className="h-4 w-4 mr-2 text-blue-600" />
|
||||||
|
<span>Arrivée: {new Date(booking.arrivalDate).toLocaleDateString('fr-FR')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Prix et actions */}
|
||||||
|
<div className="flex flex-col lg:flex-row items-start lg:items-center space-y-3 lg:space-y-0 lg:space-x-6">
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-2xl font-bold text-gray-900">
|
||||||
|
{booking.price.toLocaleString()}€
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">Prix total</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<button className="flex items-center px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
|
||||||
|
<Eye className="h-4 w-4 mr-1" />
|
||||||
|
Détails
|
||||||
|
</button>
|
||||||
|
<button className="flex items-center px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
|
||||||
|
<Download className="h-4 w-4 mr-1" />
|
||||||
|
Documents
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Barre de progression pour les expéditions en transit */}
|
||||||
|
{booking.status === 'in-transit' && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||||
|
<div className="flex justify-between text-sm text-gray-600 mb-2">
|
||||||
|
<span>Progression de l'expédition</span>
|
||||||
|
<span>65%</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||||
|
<div className="bg-blue-600 h-2 rounded-full" style={{ width: '65%' }}></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>Départ</span>
|
||||||
|
<span>En mer</span>
|
||||||
|
<span>Arrivée</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message si aucune réservation */}
|
||||||
|
{bookings.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Package className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||||
|
Aucune réservation
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Vous n'avez pas encore de réservation. Commencez par demander un devis.
|
||||||
|
</p>
|
||||||
|
<button className="maritime-button">
|
||||||
|
Demander un devis
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BookingPage;
|
||||||
260
src/pages/DashboardPage.tsx
Normal file
260
src/pages/DashboardPage.tsx
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
import { BarChart3, TrendingUp, Ship, Package, DollarSign, Clock, MapPin, AlertTriangle } from 'lucide-react';
|
||||||
|
|
||||||
|
const DashboardPage: React.FC = () => {
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
name: 'Expéditions ce mois',
|
||||||
|
value: '24',
|
||||||
|
change: '+12%',
|
||||||
|
changeType: 'positive',
|
||||||
|
icon: Ship,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chiffre d\'affaires',
|
||||||
|
value: '45,230€',
|
||||||
|
change: '+8.2%',
|
||||||
|
changeType: 'positive',
|
||||||
|
icon: DollarSign,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Temps moyen de transit',
|
||||||
|
value: '18.5j',
|
||||||
|
change: '-2.1j',
|
||||||
|
changeType: 'positive',
|
||||||
|
icon: Clock,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Taux de livraison',
|
||||||
|
value: '98.2%',
|
||||||
|
change: '+0.8%',
|
||||||
|
changeType: 'positive',
|
||||||
|
icon: Package,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const recentShipments = [
|
||||||
|
{
|
||||||
|
id: 'XPD-2025-001',
|
||||||
|
origin: 'Le Havre',
|
||||||
|
destination: 'Shanghai',
|
||||||
|
status: 'En transit',
|
||||||
|
progress: 65,
|
||||||
|
eta: '2025-02-05',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'XPD-2025-002',
|
||||||
|
origin: 'Marseille',
|
||||||
|
destination: 'New York',
|
||||||
|
status: 'Confirmé',
|
||||||
|
progress: 0,
|
||||||
|
eta: '2025-02-12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'XPD-2025-003',
|
||||||
|
origin: 'Rotterdam',
|
||||||
|
destination: 'Hamburg',
|
||||||
|
status: 'Livré',
|
||||||
|
progress: 100,
|
||||||
|
eta: '2024-12-15',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const alerts = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
type: 'warning',
|
||||||
|
message: 'Retard possible sur XPD-2025-001 dû aux conditions météo',
|
||||||
|
time: 'Il y a 2h',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
type: 'info',
|
||||||
|
message: 'Nouveau devis disponible pour la route Le Havre-Singapore',
|
||||||
|
time: 'Il y a 4h',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Confirmé':
|
||||||
|
return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'En transit':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'Livré':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Tableau de bord</h1>
|
||||||
|
<p className="text-gray-600 mt-2">
|
||||||
|
Vue d'ensemble de vos activités maritimes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistiques principales */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{stats.map((stat) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div key={stat.name} className="maritime-card p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-600">{stat.name}</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 mt-1">
|
||||||
|
{stat.value}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Icon className="h-8 w-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex items-center">
|
||||||
|
<TrendingUp className={`h-4 w-4 mr-1 ${
|
||||||
|
stat.changeType === 'positive' ? 'text-green-600' : 'text-red-600'
|
||||||
|
}`} />
|
||||||
|
<span className={`text-sm font-medium ${
|
||||||
|
stat.changeType === 'positive' ? 'text-green-600' : 'text-red-600'
|
||||||
|
}`}>
|
||||||
|
{stat.change}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-gray-600 ml-1">vs mois dernier</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Expéditions récentes */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
Expéditions récentes
|
||||||
|
</h2>
|
||||||
|
<button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
|
||||||
|
Voir tout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentShipments.map((shipment) => (
|
||||||
|
<div key={shipment.id} className="border border-gray-200 rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<h3 className="font-medium text-gray-900">{shipment.id}</h3>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(shipment.status)}`}>
|
||||||
|
{shipment.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
ETA: {new Date(shipment.eta).toLocaleDateString('fr-FR')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center text-sm text-gray-600 mb-3">
|
||||||
|
<MapPin className="h-4 w-4 mr-1" />
|
||||||
|
<span>{shipment.origin} → {shipment.destination}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{shipment.status === 'En transit' && (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-sm text-gray-600 mb-1">
|
||||||
|
<span>Progression</span>
|
||||||
|
<span>{shipment.progress}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||||
|
<div
|
||||||
|
className="bg-blue-600 h-2 rounded-full"
|
||||||
|
style={{ width: `${shipment.progress}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alertes et notifications */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Alertes récentes
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{alerts.map((alert) => (
|
||||||
|
<div key={alert.id} className="flex items-start space-x-3 p-3 bg-yellow-50 rounded-lg">
|
||||||
|
<AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-sm text-gray-900">{alert.message}</p>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">{alert.time}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions rapides */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Actions rapides
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<button className="w-full maritime-button text-left">
|
||||||
|
Nouvelle expédition
|
||||||
|
</button>
|
||||||
|
<button className="w-full border border-gray-300 text-gray-700 hover:bg-gray-50 p-3 rounded-lg font-medium transition-colors text-left">
|
||||||
|
Demander un devis
|
||||||
|
</button>
|
||||||
|
<button className="w-full border border-gray-300 text-gray-700 hover:bg-gray-50 p-3 rounded-lg font-medium transition-colors text-left">
|
||||||
|
Suivre une expédition
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Graphique des performances */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Performances mensuelles
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-gray-600">Janvier</span>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-24 bg-gray-200 rounded-full h-2">
|
||||||
|
<div className="bg-blue-600 h-2 rounded-full" style={{ width: '85%' }}></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium">85%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-gray-600">Décembre</span>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-24 bg-gray-200 rounded-full h-2">
|
||||||
|
<div className="bg-blue-600 h-2 rounded-full" style={{ width: '92%' }}></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium">92%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-sm text-gray-600">Novembre</span>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-24 bg-gray-200 rounded-full h-2">
|
||||||
|
<div className="bg-blue-600 h-2 rounded-full" style={{ width: '78%' }}></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium">78%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardPage;
|
||||||
157
src/pages/HomePage.tsx
Normal file
157
src/pages/HomePage.tsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Ship, FileText, MapPin, BarChart3, Clock, Globe, Shield, Zap } from 'lucide-react';
|
||||||
|
|
||||||
|
const HomePage: React.FC = () => {
|
||||||
|
const stats = [
|
||||||
|
{ name: 'Expéditions traitées', value: '12,543', icon: Ship },
|
||||||
|
{ name: 'Devis générés', value: '8,921', icon: FileText },
|
||||||
|
{ name: 'Ports desservis', value: '450+', icon: Globe },
|
||||||
|
{ name: 'Clients satisfaits', value: '2,100+', icon: BarChart3 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
name: 'Devis instantané',
|
||||||
|
description: 'Obtenez un devis en quelques secondes pour vos expéditions maritimes.',
|
||||||
|
icon: Zap,
|
||||||
|
href: '/quote',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Suivi en temps réel',
|
||||||
|
description: 'Suivez vos expéditions en temps réel avec notre système de tracking avancé.',
|
||||||
|
icon: MapPin,
|
||||||
|
href: '/tracking',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Gestion simplifiée',
|
||||||
|
description: 'Gérez toutes vos expéditions depuis un tableau de bord unifié.',
|
||||||
|
icon: BarChart3,
|
||||||
|
href: '/dashboard',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sécurité garantie',
|
||||||
|
description: 'Vos données et expéditions sont protégées par nos systèmes sécurisés.',
|
||||||
|
icon: Shield,
|
||||||
|
href: '#',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-12">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
<div className="maritime-gradient rounded-2xl px-8 py-16 text-center text-white">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||||||
|
Votre plateforme maritime
|
||||||
|
<span className="block text-blue-200">nouvelle génération</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
|
||||||
|
Simplifiez vos expéditions maritimes avec notre solution SaaS complète :
|
||||||
|
devis instantané, suivi en temps réel et gestion centralisée.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
to="/quote"
|
||||||
|
className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 rounded-lg font-semibold text-lg transition-colors inline-flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<FileText className="h-5 w-5 mr-2" />
|
||||||
|
Demander un devis
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/tracking"
|
||||||
|
className="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg transition-colors inline-flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<MapPin className="h-5 w-5 mr-2" />
|
||||||
|
Suivre une expédition
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{stats.map((stat) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div key={stat.name} className="maritime-card p-6 text-center">
|
||||||
|
<Icon className="h-8 w-8 text-blue-600 mx-auto mb-4" />
|
||||||
|
<div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
|
||||||
|
<div className="text-gray-600">{stat.name}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<div>
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Pourquoi choisir Xpeditis ?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Notre plateforme vous offre tous les outils nécessaires pour optimiser
|
||||||
|
vos opérations de transport maritime.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{features.map((feature) => {
|
||||||
|
const Icon = feature.icon;
|
||||||
|
return (
|
||||||
|
<div key={feature.name} className="maritime-card p-8 hover:shadow-xl transition-shadow">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Icon className="h-8 w-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div className="ml-6">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">
|
||||||
|
{feature.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
{feature.href !== '#' && (
|
||||||
|
<Link
|
||||||
|
to={feature.href}
|
||||||
|
className="text-blue-600 hover:text-blue-700 font-medium inline-flex items-center"
|
||||||
|
>
|
||||||
|
En savoir plus
|
||||||
|
<svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<div className="maritime-card p-8 text-center">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||||
|
Prêt à optimiser vos expéditions ?
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 mb-6 max-w-2xl mx-auto">
|
||||||
|
Rejoignez plus de 2,100 entreprises qui font confiance à Xpeditis
|
||||||
|
pour leurs opérations de transport maritime.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
to="/quote"
|
||||||
|
className="maritime-button"
|
||||||
|
>
|
||||||
|
Commencer maintenant
|
||||||
|
</Link>
|
||||||
|
<button className="border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-lg font-medium transition-colors">
|
||||||
|
Planifier une démo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
459
src/pages/LandingPage.tsx
Normal file
459
src/pages/LandingPage.tsx
Normal file
@ -0,0 +1,459 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Ship,
|
||||||
|
Globe,
|
||||||
|
Clock,
|
||||||
|
Shield,
|
||||||
|
BarChart3,
|
||||||
|
Users,
|
||||||
|
MapPin,
|
||||||
|
FileText,
|
||||||
|
ArrowRight,
|
||||||
|
CheckCircle,
|
||||||
|
Star,
|
||||||
|
Phone,
|
||||||
|
Mail,
|
||||||
|
MapPin as LocationIcon,
|
||||||
|
Search,
|
||||||
|
Calendar,
|
||||||
|
Package,
|
||||||
|
Anchor,
|
||||||
|
TrendingUp,
|
||||||
|
Award,
|
||||||
|
Truck
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const LandingPage: React.FC = () => {
|
||||||
|
const [searchData, setSearchData] = useState({
|
||||||
|
origin: '',
|
||||||
|
destination: '',
|
||||||
|
departureDate: '',
|
||||||
|
cargoType: 'FCL'
|
||||||
|
});
|
||||||
|
|
||||||
|
const popularRoutes = [
|
||||||
|
{ from: 'Le Havre', to: 'New York', price: '€2,450', duration: '12-15 jours' },
|
||||||
|
{ from: 'Marseille', to: 'Shanghai', price: '€1,890', duration: '18-22 jours' },
|
||||||
|
{ from: 'Rotterdam', to: 'Los Angeles', price: '€2,180', duration: '14-18 jours' },
|
||||||
|
{ from: 'Hamburg', to: 'Singapore', price: '€1,650', duration: '16-20 jours' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const ports = [
|
||||||
|
'Le Havre, France', 'Marseille, France', 'Rotterdam, Pays-Bas', 'Hamburg, Allemagne',
|
||||||
|
'Shanghai, Chine', 'New York, États-Unis', 'Los Angeles, États-Unis', 'Singapore',
|
||||||
|
'Dubai, EAU', 'Hong Kong', 'Anvers, Belgique', 'Barcelone, Espagne'
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ value: '2M+', label: 'Conteneurs expédiés', icon: Ship },
|
||||||
|
{ value: '140', label: 'Pays desservis', icon: Globe },
|
||||||
|
{ value: '35%', label: 'Économies moyennes', icon: TrendingUp },
|
||||||
|
{ value: '450+', label: 'Ports connectés', icon: Anchor }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
// Rediriger vers la page de devis avec les paramètres de recherche
|
||||||
|
window.location.href = `/app/quote?origin=${searchData.origin}&destination=${searchData.destination}&date=${searchData.departureDate}&type=${searchData.cargoType}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white shadow-sm sticky top-0 z-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex justify-between items-center h-16">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Ship className="h-8 w-8 text-blue-600 mr-2" />
|
||||||
|
<span className="text-2xl font-bold text-gray-900">Xpeditis</span>
|
||||||
|
</div>
|
||||||
|
<nav className="hidden md:flex space-x-8">
|
||||||
|
<a href="#services" className="text-gray-700 hover:text-blue-600 font-medium">Expéditions</a>
|
||||||
|
<a href="#tracking" className="text-gray-700 hover:text-blue-600 font-medium">Suivi</a>
|
||||||
|
<a href="#about" className="text-gray-700 hover:text-blue-600 font-medium">Solutions</a>
|
||||||
|
<a href="#contact" className="text-gray-700 hover:text-blue-600 font-medium">Support</a>
|
||||||
|
</nav>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Link
|
||||||
|
to="/login"
|
||||||
|
className="text-blue-600 hover:text-blue-700 font-medium"
|
||||||
|
>
|
||||||
|
Se connecter
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/app/quote"
|
||||||
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
||||||
|
>
|
||||||
|
Obtenir un devis
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Section avec moteur de recherche */}
|
||||||
|
<section className="relative bg-gradient-to-br from-blue-50 to-white py-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||||
|
Recherchez et comparez les tarifs de
|
||||||
|
<span className="text-blue-600"> transport maritime</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Trouvez les meilleures offres parmi des centaines de transporteurs maritimes.
|
||||||
|
Comparez les prix, les délais et réservez en quelques clics.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Moteur de recherche principal */}
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
|
||||||
|
<div className="flex flex-wrap items-center gap-4 mb-4">
|
||||||
|
<button className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg font-medium">
|
||||||
|
<Ship className="h-4 w-4 mr-2" />
|
||||||
|
Expédition maritime
|
||||||
|
</button>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="cargoType"
|
||||||
|
value="FCL"
|
||||||
|
checked={searchData.cargoType === 'FCL'}
|
||||||
|
onChange={(e) => setSearchData({...searchData, cargoType: e.target.value})}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium">FCL (Conteneur complet)</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="cargoType"
|
||||||
|
value="LCL"
|
||||||
|
checked={searchData.cargoType === 'LCL'}
|
||||||
|
onChange={(e) => setSearchData({...searchData, cargoType: e.target.value})}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium">LCL (Groupage)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||||
|
<div className="relative">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Port d'origine</label>
|
||||||
|
<select
|
||||||
|
value={searchData.origin}
|
||||||
|
onChange={(e) => setSearchData({...searchData, origin: e.target.value})}
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner un port</option>
|
||||||
|
{ports.map(port => (
|
||||||
|
<option key={port} value={port}>{port}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Port de destination</label>
|
||||||
|
<select
|
||||||
|
value={searchData.destination}
|
||||||
|
onChange={(e) => setSearchData({...searchData, destination: e.target.value})}
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner un port</option>
|
||||||
|
{ports.map(port => (
|
||||||
|
<option key={port} value={port}>{port}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Date de départ</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={searchData.departureDate}
|
||||||
|
onChange={(e) => setSearchData({...searchData, departureDate: e.target.value})}
|
||||||
|
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-end">
|
||||||
|
<button
|
||||||
|
onClick={handleSearch}
|
||||||
|
className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<Search className="h-5 w-5 mr-2" />
|
||||||
|
Rechercher
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Routes populaires */}
|
||||||
|
<div className="mt-12">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-6 text-center">Routes populaires</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{popularRoutes.map((route, index) => (
|
||||||
|
<div key={index} className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-gray-900">{route.from}</div>
|
||||||
|
<ArrowRight className="h-4 w-4 text-gray-400 my-1" />
|
||||||
|
<div className="font-medium text-gray-900">{route.to}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-lg font-bold text-blue-600">{route.price}</div>
|
||||||
|
<div className="text-sm text-gray-500">{route.duration}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div key={index} className="text-center">
|
||||||
|
<Icon className="h-8 w-8 text-blue-600 mx-auto mb-3" />
|
||||||
|
<div className="text-3xl font-bold text-gray-900 mb-1">{stat.value}</div>
|
||||||
|
<div className="text-sm text-gray-600">{stat.label}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<section id="services" className="py-16 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Nos solutions de transport maritime
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Des services complets pour tous vos besoins d'expédition internationale
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-6">
|
||||||
|
<Ship className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">Transport FCL/LCL</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Solutions flexibles pour conteneurs complets ou groupage selon vos besoins.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Conteneurs 20' et 40'
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Groupage optimisé
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Suivi en temps réel
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-6">
|
||||||
|
<Truck className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">Logistique Intégrée</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Gestion complète de votre chaîne logistique de bout en bout.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Transport terrestre
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Entreposage sécurisé
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Dédouanement
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-6">
|
||||||
|
<FileText className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">Devis Instantané</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Obtenez vos tarifs en temps réel et comparez les meilleures offres.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-600">
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Prix transparents
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Comparaison automatique
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500 mr-2" />
|
||||||
|
Réservation en ligne
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* About Section */}
|
||||||
|
<section id="about" className="py-20 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl font-bold text-gray-900 mb-6">
|
||||||
|
21 ans d'expertise maritime
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 mb-6">
|
||||||
|
Depuis plus de deux décennies, Xpeditis accompagne les entreprises
|
||||||
|
dans leurs défis logistiques internationaux. Notre expertise et notre
|
||||||
|
réseau mondial nous permettent d'offrir des solutions sur mesure.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<div className="text-3xl font-bold text-blue-600 mb-2">99.8%</div>
|
||||||
|
<div className="text-gray-600">Taux de livraison</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-3xl font-bold text-blue-600 mb-2">24/7</div>
|
||||||
|
<div className="text-gray-600">Support client</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="/api/placeholder/500/400"
|
||||||
|
alt="Port maritime"
|
||||||
|
className="rounded-lg shadow-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 bg-blue-600">
|
||||||
|
<div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 className="text-4xl font-bold text-white mb-6">
|
||||||
|
Prêt à expédier avec Xpeditis ?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-blue-100 mb-8">
|
||||||
|
Rejoignez plus de 15,000 entreprises qui nous font confiance pour leurs expéditions maritimes
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
to="/app/quote"
|
||||||
|
className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-blue-50 transition-colors inline-flex items-center justify-center"
|
||||||
|
>
|
||||||
|
Obtenir un devis gratuit
|
||||||
|
<ArrowRight className="ml-2 h-5 w-5" />
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/app"
|
||||||
|
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors inline-flex items-center justify-center"
|
||||||
|
>
|
||||||
|
Accéder au dashboard
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer id="contact" className="bg-gray-900 text-white py-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<Ship className="h-8 w-8 text-blue-400 mr-2" />
|
||||||
|
<span className="text-2xl font-bold">Xpeditis</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 mb-4">
|
||||||
|
Votre partenaire de confiance pour le transport maritime international.
|
||||||
|
</p>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-xs">f</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-xs">in</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-xs">tw</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Services</h3>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><a href="#" className="hover:text-white">Transport Maritime</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Logistique</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Douanes</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Assurance</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Entreprise</h3>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><a href="#" className="hover:text-white">À propos</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Carrières</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Actualités</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white">Partenaires</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Contact</h3>
|
||||||
|
<div className="space-y-3 text-gray-400">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Phone className="h-4 w-4 mr-2" />
|
||||||
|
<span>+33 1 23 45 67 89</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Mail className="h-4 w-4 mr-2" />
|
||||||
|
<span>contact@xpeditis.com</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<LocationIcon className="h-4 w-4 mr-2" />
|
||||||
|
<span>Paris, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
|
||||||
|
<p>© 2024 Xpeditis. Tous droits réservés.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LandingPage;
|
||||||
231
src/pages/LoginPage.tsx
Normal file
231
src/pages/LoginPage.tsx
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Eye, EyeOff, Ship, Mail, Lock, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
|
||||||
|
const LoginPage: React.FC = () => {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const { login, isAuthenticated } = useAuth();
|
||||||
|
|
||||||
|
// Rediriger si déjà connecté
|
||||||
|
useEffect(() => {
|
||||||
|
if (isAuthenticated) {
|
||||||
|
const from = (location.state as any)?.from?.pathname || '/app';
|
||||||
|
navigate(from, { replace: true });
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, navigate, location]);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const success = await login(email, password);
|
||||||
|
if (success) {
|
||||||
|
const from = (location.state as any)?.from?.pathname || '/app';
|
||||||
|
navigate(from, { replace: true });
|
||||||
|
} else {
|
||||||
|
setError('Email ou mot de passe incorrect');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setError('Une erreur est survenue lors de la connexion');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
||||||
|
<div className="max-w-md w-full space-y-8">
|
||||||
|
{/* Logo et titre */}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="flex items-center justify-center mb-6">
|
||||||
|
<div className="bg-blue-600 p-3 rounded-xl">
|
||||||
|
<Ship className="h-8 w-8 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">
|
||||||
|
Connexion à Xpeditis
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Accédez à votre plateforme maritime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Formulaire de connexion */}
|
||||||
|
<div className="maritime-card p-8">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Email */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Adresse email
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="votre@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mot de passe */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Mot de passe
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="••••••••"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Options */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember-me"
|
||||||
|
type="checkbox"
|
||||||
|
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
|
||||||
|
Se souvenir de moi
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
to="/forgot-password"
|
||||||
|
className="text-sm text-blue-600 hover:text-blue-700 font-medium"
|
||||||
|
>
|
||||||
|
Mot de passe oublié ?
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message d'erreur */}
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-3">
|
||||||
|
<p className="text-sm text-red-600">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bouton de connexion */}
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full maritime-button py-3 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
||||||
|
Connexion en cours...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
Se connecter
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Informations de démonstration */}
|
||||||
|
<div className="mt-6 p-4 bg-blue-50 rounded-lg">
|
||||||
|
<h4 className="text-sm font-medium text-blue-800 mb-2">
|
||||||
|
Compte de démonstration
|
||||||
|
</h4>
|
||||||
|
<div className="text-sm text-blue-700 space-y-1">
|
||||||
|
<p><strong>Email :</strong> demo@xpeditis.com</p>
|
||||||
|
<p><strong>Mot de passe :</strong> demo123</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lien d'inscription */}
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
Pas encore de compte ?{' '}
|
||||||
|
<Link
|
||||||
|
to="/register"
|
||||||
|
className="text-blue-600 hover:text-blue-700 font-medium"
|
||||||
|
>
|
||||||
|
Créer un compte
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fonctionnalités */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Ship className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900">Suivi en temps réel</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
Suivez vos expéditions 24h/24
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Mail className="h-6 w-6 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900">Devis instantané</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
Obtenez vos prix en quelques clics
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||||
|
<Lock className="h-6 w-6 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900">Sécurisé</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
Vos données sont protégées
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center text-xs text-gray-500">
|
||||||
|
<p>
|
||||||
|
© 2025 Xpeditis. Tous droits réservés.{' '}
|
||||||
|
<Link to="/privacy" className="hover:text-gray-700">
|
||||||
|
Politique de confidentialité
|
||||||
|
</Link>
|
||||||
|
{' • '}
|
||||||
|
<Link to="/terms" className="hover:text-gray-700">
|
||||||
|
Conditions d'utilisation
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
320
src/pages/QuotePage.tsx
Normal file
320
src/pages/QuotePage.tsx
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { ArrowRight, MapPin, Package, Truck, Ship, CheckCircle, DollarSign, Calendar } from 'lucide-react';
|
||||||
|
|
||||||
|
interface QuoteForm {
|
||||||
|
operation: 'import' | 'export' | '';
|
||||||
|
incoterm: 'dock-to-door' | 'door-to-dock' | 'door-to-door' | '';
|
||||||
|
originPort: string;
|
||||||
|
originWarehouse: string;
|
||||||
|
destinationPort: string;
|
||||||
|
destinationWarehouse: string;
|
||||||
|
cargoType: string;
|
||||||
|
departureDate: string;
|
||||||
|
weight: string;
|
||||||
|
volume: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Quote {
|
||||||
|
id: string;
|
||||||
|
serviceType: string;
|
||||||
|
price: number;
|
||||||
|
transitTime: string;
|
||||||
|
carrier: string;
|
||||||
|
features: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const QuotePage: React.FC = () => {
|
||||||
|
const [currentStep, setCurrentStep] = useState(1);
|
||||||
|
const [formData, setFormData] = useState<QuoteForm>({
|
||||||
|
operation: '',
|
||||||
|
incoterm: '',
|
||||||
|
originPort: '',
|
||||||
|
originWarehouse: '',
|
||||||
|
destinationPort: '',
|
||||||
|
destinationWarehouse: '',
|
||||||
|
cargoType: '',
|
||||||
|
departureDate: '',
|
||||||
|
weight: '',
|
||||||
|
volume: ''
|
||||||
|
});
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [quotes, setQuotes] = useState<Quote[]>([]);
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ id: 1, name: 'General Info', completed: false },
|
||||||
|
{ id: 2, name: 'Conditionnement', completed: false },
|
||||||
|
{ id: 3, name: 'téléchargement', completed: false }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentStep < 3) {
|
||||||
|
setCurrentStep(currentStep + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOperationSelect = (operation: 'import' | 'export') => {
|
||||||
|
setFormData({ ...formData, operation });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleIncotermSelect = (incoterm: 'dock-to-door' | 'door-to-dock' | 'door-to-door') => {
|
||||||
|
setFormData({ ...formData, incoterm });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData({ ...formData, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
// Simulation d'appel API
|
||||||
|
setTimeout(() => {
|
||||||
|
const mockQuotes = [
|
||||||
|
{
|
||||||
|
id: 'quote-express-001',
|
||||||
|
serviceType: 'Express',
|
||||||
|
price: 2850,
|
||||||
|
transitTime: '12-15 jours',
|
||||||
|
carrier: 'Maritime Express Line',
|
||||||
|
features: ['Priorité d\'embarquement', 'Suivi premium', 'Assurance incluse'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'quote-standard-001',
|
||||||
|
serviceType: 'Standard',
|
||||||
|
price: 1950,
|
||||||
|
transitTime: '18-22 jours',
|
||||||
|
carrier: 'Global Shipping Co.',
|
||||||
|
features: ['Suivi standard', 'Service client 24/7', 'Documentation complète'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'quote-economy-001',
|
||||||
|
serviceType: 'Économique',
|
||||||
|
price: 1450,
|
||||||
|
transitTime: '25-30 jours',
|
||||||
|
carrier: 'Budget Maritime',
|
||||||
|
features: ['Prix compétitif', 'Suivi de base', 'Flexibilité des dates'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
setQuotes(mockQuotes);
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ports = [
|
||||||
|
'Le Havre, France',
|
||||||
|
'Marseille, France',
|
||||||
|
'Rotterdam, Pays-Bas',
|
||||||
|
'Hamburg, Allemagne',
|
||||||
|
'Shanghai, Chine',
|
||||||
|
'New York, États-Unis',
|
||||||
|
'Los Angeles, États-Unis',
|
||||||
|
'Singapore',
|
||||||
|
'Dubai, EAU',
|
||||||
|
'Hong Kong',
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Demande de devis maritime
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Obtenez instantanément les meilleurs tarifs pour vos expéditions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Formulaire de devis */}
|
||||||
|
<div className="maritime-card p-8">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Port d'origine */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<MapPin className="inline h-4 w-4 mr-1" />
|
||||||
|
Port d'origine
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="originPort"
|
||||||
|
value={formData.originPort}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner un port</option>
|
||||||
|
{ports.map(port => (
|
||||||
|
<option key={port} value={port}>{port}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Port de destination */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<MapPin className="inline h-4 w-4 mr-1" />
|
||||||
|
Port de destination
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="destinationPort"
|
||||||
|
value={formData.destinationPort}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner un port</option>
|
||||||
|
{ports.map(port => (
|
||||||
|
<option key={port} value={port}>{port}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Type de marchandise */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Package className="inline h-4 w-4 mr-1" />
|
||||||
|
Type de marchandise
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="cargoType"
|
||||||
|
value={formData.cargoType}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner le type</option>
|
||||||
|
<option value="general">Marchandise générale</option>
|
||||||
|
<option value="container">Conteneur FCL</option>
|
||||||
|
<option value="lcl">Groupage LCL</option>
|
||||||
|
<option value="dangerous">Matières dangereuses</option>
|
||||||
|
<option value="refrigerated">Produits réfrigérés</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date de départ */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Calendar className="inline h-4 w-4 mr-1" />
|
||||||
|
Date de départ souhaitée
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
name="departureDate"
|
||||||
|
value={formData.departureDate}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Poids */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Poids (kg)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="weight"
|
||||||
|
value={formData.weight}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
placeholder="Ex: 1500"
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Volume */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Volume (m³)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="volume"
|
||||||
|
value={formData.volume}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
required
|
||||||
|
placeholder="Ex: 2.5"
|
||||||
|
step="0.1"
|
||||||
|
className="w-full maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full maritime-button py-4 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
||||||
|
Recherche en cours...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DollarSign className="inline h-5 w-5 mr-2" />
|
||||||
|
Obtenir mes devis
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Résultats des devis */}
|
||||||
|
{quotes.length > 0 && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">
|
||||||
|
Vos devis personnalisés
|
||||||
|
</h2>
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{quotes.map((quote) => (
|
||||||
|
<div key={quote.id} className="maritime-card p-6 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-1">
|
||||||
|
Service {quote.serviceType}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">{quote.carrier}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-3xl font-bold text-blue-600">
|
||||||
|
{quote.price.toLocaleString()}€
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
Transit: {quote.transitTime}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<h4 className="font-medium text-gray-900 mb-2">Services inclus:</h4>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{quote.features.map((feature, index) => (
|
||||||
|
<li key={index} className="text-sm text-gray-600 flex items-center">
|
||||||
|
<div className="w-2 h-2 bg-blue-600 rounded-full mr-2"></div>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button className="maritime-button flex-1">
|
||||||
|
Réserver maintenant
|
||||||
|
</button>
|
||||||
|
<button className="border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-lg font-medium transition-colors">
|
||||||
|
Détails
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QuotePage;
|
||||||
326
src/pages/ShipSchedulePage.tsx
Normal file
326
src/pages/ShipSchedulePage.tsx
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Ship, Calendar, MapPin, Clock, Filter, Search } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Schedule {
|
||||||
|
id: string;
|
||||||
|
vesselName: string;
|
||||||
|
route: string;
|
||||||
|
departure: {
|
||||||
|
port: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
arrival: {
|
||||||
|
port: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
};
|
||||||
|
transitTime: string;
|
||||||
|
capacity: {
|
||||||
|
available: number;
|
||||||
|
total: number;
|
||||||
|
};
|
||||||
|
price: number;
|
||||||
|
service: 'Express' | 'Standard' | 'Économique';
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShipSchedulePage: React.FC = () => {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [selectedService, setSelectedService] = useState<string>('all');
|
||||||
|
|
||||||
|
const schedules: Schedule[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
vesselName: 'MSC Bellissima',
|
||||||
|
route: 'Europe - Asie',
|
||||||
|
departure: {
|
||||||
|
port: 'Le Havre, France',
|
||||||
|
date: '2025-01-15',
|
||||||
|
time: '08:00',
|
||||||
|
},
|
||||||
|
arrival: {
|
||||||
|
port: 'Shanghai, Chine',
|
||||||
|
date: '2025-02-05',
|
||||||
|
time: '14:00',
|
||||||
|
},
|
||||||
|
transitTime: '21 jours',
|
||||||
|
capacity: {
|
||||||
|
available: 45,
|
||||||
|
total: 120,
|
||||||
|
},
|
||||||
|
price: 1950,
|
||||||
|
service: 'Standard',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
vesselName: 'CMA CGM Antoine de Saint Exupéry',
|
||||||
|
route: 'Europe - Amérique du Nord',
|
||||||
|
departure: {
|
||||||
|
port: 'Marseille, France',
|
||||||
|
date: '2025-01-20',
|
||||||
|
time: '12:00',
|
||||||
|
},
|
||||||
|
arrival: {
|
||||||
|
port: 'New York, États-Unis',
|
||||||
|
date: '2025-02-12',
|
||||||
|
time: '09:00',
|
||||||
|
},
|
||||||
|
transitTime: '23 jours',
|
||||||
|
capacity: {
|
||||||
|
available: 28,
|
||||||
|
total: 80,
|
||||||
|
},
|
||||||
|
price: 2850,
|
||||||
|
service: 'Express',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
vesselName: 'Hapag-Lloyd Berlin Express',
|
||||||
|
route: 'Europe - Europe',
|
||||||
|
departure: {
|
||||||
|
port: 'Rotterdam, Pays-Bas',
|
||||||
|
date: '2025-01-18',
|
||||||
|
time: '16:00',
|
||||||
|
},
|
||||||
|
arrival: {
|
||||||
|
port: 'Hamburg, Allemagne',
|
||||||
|
date: '2025-01-20',
|
||||||
|
time: '10:00',
|
||||||
|
},
|
||||||
|
transitTime: '2 jours',
|
||||||
|
capacity: {
|
||||||
|
available: 67,
|
||||||
|
total: 100,
|
||||||
|
},
|
||||||
|
price: 1450,
|
||||||
|
service: 'Économique',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
vesselName: 'COSCO Shipping Universe',
|
||||||
|
route: 'Asie - Europe',
|
||||||
|
departure: {
|
||||||
|
port: 'Singapore',
|
||||||
|
date: '2025-01-25',
|
||||||
|
time: '20:00',
|
||||||
|
},
|
||||||
|
arrival: {
|
||||||
|
port: 'Rotterdam, Pays-Bas',
|
||||||
|
date: '2025-02-18',
|
||||||
|
time: '06:00',
|
||||||
|
},
|
||||||
|
transitTime: '24 jours',
|
||||||
|
capacity: {
|
||||||
|
available: 89,
|
||||||
|
total: 150,
|
||||||
|
},
|
||||||
|
price: 2200,
|
||||||
|
service: 'Standard',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredSchedules = schedules.filter(schedule => {
|
||||||
|
const matchesSearch = schedule.vesselName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
schedule.route.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
schedule.departure.port.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
schedule.arrival.port.toLowerCase().includes(searchTerm.toLowerCase());
|
||||||
|
|
||||||
|
const matchesService = selectedService === 'all' || schedule.service === selectedService;
|
||||||
|
|
||||||
|
return matchesSearch && matchesService;
|
||||||
|
});
|
||||||
|
|
||||||
|
const getServiceColor = (service: string) => {
|
||||||
|
switch (service) {
|
||||||
|
case 'Express':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
case 'Standard':
|
||||||
|
return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'Économique':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCapacityColor = (available: number, total: number) => {
|
||||||
|
const percentage = (available / total) * 100;
|
||||||
|
if (percentage > 60) return 'text-green-600';
|
||||||
|
if (percentage > 30) return 'text-yellow-600';
|
||||||
|
return 'text-red-600';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Planning des navires</h1>
|
||||||
|
<p className="text-gray-600 mt-2">
|
||||||
|
Consultez les horaires et disponibilités des navires
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtres et recherche */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Rechercher par navire, route ou port..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<select
|
||||||
|
value={selectedService}
|
||||||
|
onChange={(e) => setSelectedService(e.target.value)}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="all">Tous les services</option>
|
||||||
|
<option value="Express">Express</option>
|
||||||
|
<option value="Standard">Standard</option>
|
||||||
|
<option value="Économique">Économique</option>
|
||||||
|
</select>
|
||||||
|
<button className="flex items-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
|
||||||
|
<Filter className="h-4 w-4 mr-2" />
|
||||||
|
Plus de filtres
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistiques rapides */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-blue-600 mb-2">{schedules.length}</div>
|
||||||
|
<div className="text-sm text-gray-600">Navires programmés</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-green-600 mb-2">
|
||||||
|
{schedules.reduce((acc, s) => acc + s.capacity.available, 0)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">Places disponibles</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-yellow-600 mb-2">12</div>
|
||||||
|
<div className="text-sm text-gray-600">Routes actives</div>
|
||||||
|
</div>
|
||||||
|
<div className="maritime-card p-6 text-center">
|
||||||
|
<div className="text-2xl font-bold text-gray-900 mb-2">18j</div>
|
||||||
|
<div className="text-sm text-gray-600">Transit moyen</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des horaires */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{filteredSchedules.map((schedule) => (
|
||||||
|
<div key={schedule.id} className="maritime-card p-6 hover:shadow-lg transition-shadow">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
|
||||||
|
{/* Informations du navire */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center space-x-4 mb-3">
|
||||||
|
<Ship className="h-6 w-6 text-blue-600" />
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
{schedule.vesselName}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600">{schedule.route}</p>
|
||||||
|
</div>
|
||||||
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getServiceColor(schedule.service)}`}>
|
||||||
|
{schedule.service}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{/* Départ */}
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<div className="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full mt-2"></div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-gray-600">Départ</div>
|
||||||
|
<div className="font-medium">{schedule.departure.port}</div>
|
||||||
|
<div className="text-sm text-gray-600 flex items-center mt-1">
|
||||||
|
<Calendar className="h-4 w-4 mr-1" />
|
||||||
|
{new Date(schedule.departure.date).toLocaleDateString('fr-FR')} à {schedule.departure.time}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrivée */}
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<div className="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2"></div>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-gray-600">Arrivée</div>
|
||||||
|
<div className="font-medium">{schedule.arrival.port}</div>
|
||||||
|
<div className="text-sm text-gray-600 flex items-center mt-1">
|
||||||
|
<Calendar className="h-4 w-4 mr-1" />
|
||||||
|
{new Date(schedule.arrival.date).toLocaleDateString('fr-FR')} à {schedule.arrival.time}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informations de capacité et prix */}
|
||||||
|
<div className="flex flex-col lg:flex-row items-start lg:items-center space-y-4 lg:space-y-0 lg:space-x-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-gray-600">Durée de transit</div>
|
||||||
|
<div className="font-semibold text-gray-900 flex items-center">
|
||||||
|
<Clock className="h-4 w-4 mr-1" />
|
||||||
|
{schedule.transitTime}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-gray-600">Disponibilité</div>
|
||||||
|
<div className={`font-semibold ${getCapacityColor(schedule.capacity.available, schedule.capacity.total)}`}>
|
||||||
|
{schedule.capacity.available}/{schedule.capacity.total}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">conteneurs</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-gray-600">À partir de</div>
|
||||||
|
<div className="text-2xl font-bold text-gray-900">
|
||||||
|
{schedule.price.toLocaleString()}€
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="maritime-button whitespace-nowrap">
|
||||||
|
Réserver
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message si aucun résultat */}
|
||||||
|
{filteredSchedules.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Ship className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||||
|
Aucun navire trouvé
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Aucun navire ne correspond à vos critères de recherche.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSearchTerm('');
|
||||||
|
setSelectedService('all');
|
||||||
|
}}
|
||||||
|
className="maritime-button"
|
||||||
|
>
|
||||||
|
Réinitialiser les filtres
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShipSchedulePage;
|
||||||
294
src/pages/TrackingPage.tsx
Normal file
294
src/pages/TrackingPage.tsx
Normal file
@ -0,0 +1,294 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Search, MapPin, Ship, Package, Clock, CheckCircle, AlertCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
interface TrackingEvent {
|
||||||
|
id: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
location: string;
|
||||||
|
description: string;
|
||||||
|
status: 'completed' | 'current' | 'pending';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TrackingInfo {
|
||||||
|
reference: string;
|
||||||
|
origin: string;
|
||||||
|
destination: string;
|
||||||
|
currentLocation: string;
|
||||||
|
estimatedArrival: string;
|
||||||
|
progress: number;
|
||||||
|
events: TrackingEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const TrackingPage: React.FC = () => {
|
||||||
|
const [trackingNumber, setTrackingNumber] = useState('');
|
||||||
|
const [trackingInfo, setTrackingInfo] = useState<TrackingInfo | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const handleSearch = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!trackingNumber.trim()) return;
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
// Simulation d'appel API
|
||||||
|
setTimeout(() => {
|
||||||
|
if (trackingNumber === 'XPD-2025-001') {
|
||||||
|
setTrackingInfo({
|
||||||
|
reference: 'XPD-2025-001',
|
||||||
|
origin: 'Le Havre, France',
|
||||||
|
destination: 'Shanghai, Chine',
|
||||||
|
currentLocation: 'En mer - Océan Indien',
|
||||||
|
estimatedArrival: '2025-02-05',
|
||||||
|
progress: 65,
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
date: '2025-01-15',
|
||||||
|
time: '08:30',
|
||||||
|
location: 'Le Havre, France',
|
||||||
|
description: 'Conteneur chargé à bord du navire MSC Bellissima',
|
||||||
|
status: 'completed',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
date: '2025-01-16',
|
||||||
|
time: '14:00',
|
||||||
|
location: 'Manche',
|
||||||
|
description: 'Navire en route vers la Méditerranée',
|
||||||
|
status: 'completed',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
date: '2025-01-20',
|
||||||
|
time: '09:15',
|
||||||
|
location: 'Canal de Suez, Égypte',
|
||||||
|
description: 'Passage du canal de Suez',
|
||||||
|
status: 'completed',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
date: '2025-01-25',
|
||||||
|
time: '16:45',
|
||||||
|
location: 'Océan Indien',
|
||||||
|
description: 'Navigation en cours vers l\'Asie',
|
||||||
|
status: 'current',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
date: '2025-02-02',
|
||||||
|
time: '--:--',
|
||||||
|
location: 'Détroit de Malacca',
|
||||||
|
description: 'Passage prévu du détroit de Malacca',
|
||||||
|
status: 'pending',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '6',
|
||||||
|
date: '2025-02-05',
|
||||||
|
time: '--:--',
|
||||||
|
location: 'Shanghai, Chine',
|
||||||
|
description: 'Arrivée prévue au port de Shanghai',
|
||||||
|
status: 'pending',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setError('Numéro de suivi non trouvé. Vérifiez votre référence.');
|
||||||
|
setTrackingInfo(null);
|
||||||
|
}
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getEventIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'completed':
|
||||||
|
return <CheckCircle className="h-5 w-5 text-green-600" />;
|
||||||
|
case 'current':
|
||||||
|
return <AlertCircle className="h-5 w-5 text-blue-600" />;
|
||||||
|
case 'pending':
|
||||||
|
return <Clock className="h-5 w-5 text-gray-400" />;
|
||||||
|
default:
|
||||||
|
return <Clock className="h-5 w-5 text-gray-400" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Suivi d'expédition
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Suivez votre expédition en temps réel
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Formulaire de recherche */}
|
||||||
|
<div className="maritime-card p-8">
|
||||||
|
<form onSubmit={handleSearch} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Numéro de suivi
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={trackingNumber}
|
||||||
|
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||||
|
placeholder="Ex: XPD-2025-001"
|
||||||
|
className="flex-1 maritime-input p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="maritime-button px-8 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||||
|
Recherche...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Search className="h-4 w-4 mr-2" />
|
||||||
|
Suivre
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<div className="text-red-600 text-sm mt-2">{error}</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Exemple de numéros */}
|
||||||
|
<div className="mt-6 p-4 bg-blue-50 rounded-lg">
|
||||||
|
<p className="text-sm text-blue-800 mb-2">
|
||||||
|
<strong>Numéro d'exemple pour test :</strong>
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setTrackingNumber('XPD-2025-001')}
|
||||||
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
|
>
|
||||||
|
XPD-2025-001
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informations de suivi */}
|
||||||
|
{trackingInfo && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Résumé de l'expédition */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
|
Expédition {trackingInfo.reference}
|
||||||
|
</h2>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="text-sm text-gray-600">Progression</div>
|
||||||
|
<div className="text-2xl font-bold text-blue-600">
|
||||||
|
{trackingInfo.progress}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<MapPin className="h-5 w-5 text-blue-600 mr-3" />
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-gray-600">Origine</div>
|
||||||
|
<div className="font-medium">{trackingInfo.origin}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Ship className="h-5 w-5 text-blue-600 mr-3" />
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-gray-600">Position actuelle</div>
|
||||||
|
<div className="font-medium">{trackingInfo.currentLocation}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Package className="h-5 w-5 text-blue-600 mr-3" />
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-gray-600">Destination</div>
|
||||||
|
<div className="font-medium">{trackingInfo.destination}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Barre de progression */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex justify-between text-sm text-gray-600 mb-2">
|
||||||
|
<span>Progression du voyage</span>
|
||||||
|
<span>Arrivée prévue: {new Date(trackingInfo.estimatedArrival).toLocaleDateString('fr-FR')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-3">
|
||||||
|
<div
|
||||||
|
className="bg-blue-600 h-3 rounded-full transition-all duration-500"
|
||||||
|
style={{ width: `${trackingInfo.progress}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Historique des événements */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-6">
|
||||||
|
Historique de l'expédition
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{trackingInfo.events.map((event, index) => (
|
||||||
|
<div key={event.id} className="flex items-start space-x-4">
|
||||||
|
<div className="flex-shrink-0 mt-1">
|
||||||
|
{getEventIcon(event.status)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className={`text-sm font-medium ${
|
||||||
|
event.status === 'completed' ? 'text-gray-900' :
|
||||||
|
event.status === 'current' ? 'text-blue-600' : 'text-gray-500'
|
||||||
|
}`}>
|
||||||
|
{event.description}
|
||||||
|
</p>
|
||||||
|
<div className="text-right text-sm text-gray-500">
|
||||||
|
<div>{new Date(event.date).toLocaleDateString('fr-FR')}</div>
|
||||||
|
{event.time !== '--:--' && <div>{event.time}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
{event.location}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="maritime-card p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||||
|
Actions disponibles
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
<button className="maritime-button">
|
||||||
|
Recevoir des notifications
|
||||||
|
</button>
|
||||||
|
<button className="border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-colors">
|
||||||
|
Télécharger le rapport
|
||||||
|
</button>
|
||||||
|
<button className="border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-lg font-medium transition-colors">
|
||||||
|
Partager le suivi
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TrackingPage;
|
||||||
78
tailwind.config.js
Normal file
78
tailwind.config.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: [
|
||||||
|
'./pages/**/*.{ts,tsx}',
|
||||||
|
'./components/**/*.{ts,tsx}',
|
||||||
|
'./app/**/*.{ts,tsx}',
|
||||||
|
'./src/**/*.{ts,tsx}',
|
||||||
|
'./index.html',
|
||||||
|
],
|
||||||
|
prefix: "",
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: "2rem",
|
||||||
|
screens: {
|
||||||
|
"2xl": "1400px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: "hsl(var(--border))",
|
||||||
|
input: "hsl(var(--input))",
|
||||||
|
ring: "hsl(var(--ring))",
|
||||||
|
background: "hsl(var(--background))",
|
||||||
|
foreground: "hsl(var(--foreground))",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary))",
|
||||||
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted))",
|
||||||
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent))",
|
||||||
|
foreground: "hsl(var(--accent-foreground))",
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover))",
|
||||||
|
foreground: "hsl(var(--popover-foreground))",
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card))",
|
||||||
|
foreground: "hsl(var(--card-foreground))",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: "var(--radius)",
|
||||||
|
md: "calc(var(--radius) - 2px)",
|
||||||
|
sm: "calc(var(--radius) - 4px)",
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
"accordion-down": {
|
||||||
|
from: { height: "0" },
|
||||||
|
to: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
},
|
||||||
|
"accordion-up": {
|
||||||
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
to: { height: "0" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
35
vite.config.ts
Normal file
35
vite.config.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false,
|
||||||
|
configure: (proxy, _options) => {
|
||||||
|
proxy.on('error', (err, _req, _res) => {
|
||||||
|
console.log('proxy error', err);
|
||||||
|
});
|
||||||
|
proxy.on('proxyReq', (proxyReq, req, _res) => {
|
||||||
|
console.log('Sending Request to the Target:', req.method, req.url);
|
||||||
|
});
|
||||||
|
proxy.on('proxyRes', (proxyRes, req, _res) => {
|
||||||
|
console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
sourcemap: true,
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user