355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
/**
|
||
* Transit Time et Délais - Wiki Page
|
||
*
|
||
* Comprendre les délais en transport maritime
|
||
*/
|
||
|
||
import Link from 'next/link';
|
||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||
|
||
const etapesTimeline = [
|
||
{
|
||
etape: 'Booking',
|
||
description: 'Réservation de l\'espace sur le navire',
|
||
delai: '1-7 jours avant cut-off',
|
||
responsable: 'Transitaire/Exportateur',
|
||
},
|
||
{
|
||
etape: 'Container pickup',
|
||
description: 'Enlèvement du conteneur vide au dépôt',
|
||
delai: '2-5 jours avant cut-off',
|
||
responsable: 'Transporteur terrestre',
|
||
},
|
||
{
|
||
etape: 'Empotage (Stuffing)',
|
||
description: 'Chargement des marchandises dans le conteneur',
|
||
delai: '1-3 jours avant cut-off',
|
||
responsable: 'Exportateur',
|
||
},
|
||
{
|
||
etape: 'Documentation cut-off',
|
||
description: 'Date limite pour soumettre les documents (B/L, VGM)',
|
||
delai: '24-48h avant ETD',
|
||
responsable: 'Transitaire',
|
||
},
|
||
{
|
||
etape: 'Cargo cut-off',
|
||
description: 'Date limite de dépôt du conteneur au terminal',
|
||
delai: '24-48h avant ETD',
|
||
responsable: 'Transporteur terrestre',
|
||
},
|
||
{
|
||
etape: 'ETD (Estimated Time of Departure)',
|
||
description: 'Départ estimé du navire du port d\'origine',
|
||
delai: 'Jour J',
|
||
responsable: 'Compagnie maritime',
|
||
},
|
||
{
|
||
etape: 'Transit maritime',
|
||
description: 'Traversée maritime (variable selon route)',
|
||
delai: '10-45 jours',
|
||
responsable: 'Compagnie maritime',
|
||
},
|
||
{
|
||
etape: 'ETA (Estimated Time of Arrival)',
|
||
description: 'Arrivée estimée au port de destination',
|
||
delai: 'Jour J + transit',
|
||
responsable: 'Compagnie maritime',
|
||
},
|
||
{
|
||
etape: 'Déchargement',
|
||
description: 'Déchargement du navire et mise à quai',
|
||
delai: '1-3 jours après ETA',
|
||
responsable: 'Terminal portuaire',
|
||
},
|
||
{
|
||
etape: 'Dédouanement',
|
||
description: 'Formalités douanières à destination',
|
||
delai: '1-5 jours',
|
||
responsable: 'Commissionnaire en douane',
|
||
},
|
||
{
|
||
etape: 'Livraison',
|
||
description: 'Acheminement final au destinataire',
|
||
delai: '1-5 jours',
|
||
responsable: 'Transporteur terrestre',
|
||
},
|
||
];
|
||
|
||
const fraisRetard = [
|
||
{
|
||
nom: 'Demurrage',
|
||
definition: 'Frais pour le conteneur resté au terminal au-delà du free time',
|
||
taux: '50-150 USD/jour/conteneur',
|
||
lieu: 'Terminal portuaire',
|
||
},
|
||
{
|
||
nom: 'Detention',
|
||
definition: 'Frais pour le conteneur gardé hors terminal au-delà du free time',
|
||
taux: '30-100 USD/jour/conteneur',
|
||
lieu: 'Chez l\'importateur',
|
||
},
|
||
{
|
||
nom: 'Storage',
|
||
definition: 'Frais de stockage au terminal (séparés du demurrage)',
|
||
taux: 'Variable selon port',
|
||
lieu: 'Terminal portuaire',
|
||
},
|
||
{
|
||
nom: 'Per Diem',
|
||
definition: 'Frais journaliers combinés (parfois utilisé pour demurrage+detention)',
|
||
taux: '50-200 USD/jour',
|
||
lieu: 'Variable',
|
||
},
|
||
];
|
||
|
||
const transitTimes = [
|
||
{ route: 'Shanghai → Rotterdam', temps: '28-32 jours', via: 'Suez' },
|
||
{ route: 'Shanghai → Le Havre', temps: '30-35 jours', via: 'Suez' },
|
||
{ route: 'Shanghai → Los Angeles', temps: '12-15 jours', via: 'Direct Pacifique' },
|
||
{ route: 'Shanghai → New York', temps: '35-40 jours', via: 'Suez ou Panama' },
|
||
{ route: 'Rotterdam → New York', temps: '10-14 jours', via: 'Direct Atlantique' },
|
||
{ route: 'Mumbai → Rotterdam', temps: '18-22 jours', via: 'Suez' },
|
||
{ route: 'Santos → Rotterdam', temps: '18-22 jours', via: 'Direct Atlantique' },
|
||
];
|
||
|
||
export default function TransitTimePage() {
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header with back link */}
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<Link
|
||
href="/dashboard/wiki"
|
||
className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
|
||
>
|
||
<svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
Retour au Wiki
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-4xl">⏱️</span>
|
||
<h1 className="text-3xl font-bold text-gray-900">Transit Time et Délais</h1>
|
||
</div>
|
||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||
La gestion des délais est cruciale en transport maritime. Comprendre les différentes étapes,
|
||
les cut-off dates et les frais de retard permet d'optimiser sa supply chain et d'éviter
|
||
les coûts supplémentaires.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Key Terms */}
|
||
<Card className="bg-blue-50 border-blue-200">
|
||
<CardContent className="pt-6">
|
||
<h3 className="font-semibold text-blue-900 mb-3">📖 Termes Clés</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div>
|
||
<h4 className="font-medium text-blue-800">ETD</h4>
|
||
<p className="text-sm text-blue-700">Estimated Time of Departure - Départ estimé</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-blue-800">ETA</h4>
|
||
<p className="text-sm text-blue-700">Estimated Time of Arrival - Arrivée estimée</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-blue-800">Cut-off</h4>
|
||
<p className="text-sm text-blue-700">Date/heure limite de dépôt</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-blue-800">Free time</h4>
|
||
<p className="text-sm text-blue-700">Jours gratuits avant frais de retard</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Timeline */}
|
||
<div className="mt-8">
|
||
<h2 className="text-xl font-bold text-gray-900 mb-4">📅 Timeline d'une Expédition FCL</h2>
|
||
<div className="space-y-3">
|
||
{etapesTimeline.map((item, index) => (
|
||
<Card key={item.etape} className={`bg-white ${index === 5 || index === 7 ? 'border-blue-300 border-2' : ''}`}>
|
||
<CardContent className="py-4">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
|
||
{index + 1}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex flex-wrap items-center gap-2 mb-1">
|
||
<h4 className="font-medium text-gray-900">{item.etape}</h4>
|
||
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{item.delai}</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">{item.description}</p>
|
||
<p className="text-xs text-gray-400 mt-1">Responsable : {item.responsable}</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Transit Times */}
|
||
<div className="mt-8">
|
||
<h2 className="text-xl font-bold text-gray-900 mb-4">🚢 Transit Times Indicatifs</h2>
|
||
<Card className="bg-white">
|
||
<CardContent className="pt-6">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b">
|
||
<th className="text-left py-2 font-medium">Route</th>
|
||
<th className="text-center py-2 font-medium">Transit Time</th>
|
||
<th className="text-right py-2 font-medium">Via</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{transitTimes.map((tt) => (
|
||
<tr key={tt.route} className="border-b last:border-0 hover:bg-gray-50">
|
||
<td className="py-3 text-gray-900">{tt.route}</td>
|
||
<td className="py-3 text-center font-mono text-blue-600">{tt.temps}</td>
|
||
<td className="py-3 text-right text-gray-500">{tt.via}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-3">
|
||
Note : Ces temps sont indicatifs et varient selon les rotations, transbordements et conditions.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Free Time */}
|
||
<Card className="mt-8 bg-gray-50">
|
||
<CardContent className="pt-6">
|
||
<h3 className="font-semibold text-gray-900 mb-3">⏰ Free Time (Jours Gratuits)</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
Période pendant laquelle le conteneur peut rester au terminal ou chez l'importateur
|
||
sans frais supplémentaires.
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-white p-4 rounded-lg border">
|
||
<h4 className="font-medium text-gray-900">Free time standard</h4>
|
||
<p className="text-2xl font-bold text-blue-600">7-14 jours</p>
|
||
<p className="text-xs text-gray-500">Selon compagnie et port</p>
|
||
</div>
|
||
<div className="bg-white p-4 rounded-lg border">
|
||
<h4 className="font-medium text-gray-900">Demurrage start</h4>
|
||
<p className="text-sm text-gray-600">
|
||
Commence après le free time au terminal
|
||
</p>
|
||
</div>
|
||
<div className="bg-white p-4 rounded-lg border">
|
||
<h4 className="font-medium text-gray-900">Detention start</h4>
|
||
<p className="text-sm text-gray-600">
|
||
Commence à la sortie du terminal (gate-out)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Late Fees */}
|
||
<div className="mt-8">
|
||
<h2 className="text-xl font-bold text-gray-900 mb-4">💸 Frais de Retard</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{fraisRetard.map((frais) => (
|
||
<Card key={frais.nom} className="bg-white border-red-200">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-lg text-red-700">{frais.nom}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 text-sm mb-2">{frais.definition}</p>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-500">Taux indicatif :</span>
|
||
<span className="font-mono text-red-600">{frais.taux}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm mt-1">
|
||
<span className="text-gray-500">Lieu :</span>
|
||
<span className="text-gray-700">{frais.lieu}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Factors affecting transit */}
|
||
<Card className="mt-8 bg-orange-50 border-orange-200">
|
||
<CardContent className="pt-6">
|
||
<h3 className="font-semibold text-orange-900 mb-3">⚡ Facteurs Impactant les Délais</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<h4 className="font-medium text-orange-800">Retards potentiels</h4>
|
||
<ul className="text-sm text-orange-700 mt-2 space-y-1">
|
||
<li>• Congestion portuaire (Los Angeles, Rotterdam)</li>
|
||
<li>• Conditions météorologiques (typhons, tempêtes)</li>
|
||
<li>• Fermeture de canaux (Suez, Panama)</li>
|
||
<li>• Inspection douanière (scanner, contrôle)</li>
|
||
<li>• Blank sailings (annulation de rotation)</li>
|
||
<li>• Grèves (dockers, transporteurs)</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-orange-800">Variations saisonnières</h4>
|
||
<ul className="text-sm text-orange-700 mt-2 space-y-1">
|
||
<li>• Nouvel An Chinois (février) : +2-3 semaines</li>
|
||
<li>• Golden Week (octobre) : congestion Asie</li>
|
||
<li>• Peak Season (août-octobre) : surcharges, retards</li>
|
||
<li>• Fêtes de fin d'année : rush avant Christmas</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Roll-over */}
|
||
<Card className="mt-8 bg-gray-50">
|
||
<CardContent className="pt-6">
|
||
<h3 className="font-semibold text-gray-900 mb-3">🔄 Roll-over (Report)</h3>
|
||
<p className="text-gray-600 mb-3">
|
||
Situation où un conteneur n'est pas chargé sur le navire prévu et est reporté
|
||
sur le prochain départ.
|
||
</p>
|
||
<div className="bg-white p-4 rounded-lg border">
|
||
<h4 className="font-medium text-gray-900">Causes fréquentes :</h4>
|
||
<ul className="text-sm text-gray-600 mt-2 space-y-1">
|
||
<li>• Navire plein (overbooking)</li>
|
||
<li>• Conteneur arrivé après le cargo cut-off</li>
|
||
<li>• Documents manquants ou incorrects</li>
|
||
<li>• VGM non transmis à temps</li>
|
||
<li>• Problème avec la marchandise (DG, inspection)</li>
|
||
</ul>
|
||
<p className="text-xs text-gray-500 mt-3">
|
||
Impact : Généralement +7 jours de délai (service hebdomadaire)
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Tips */}
|
||
<Card className="mt-8 bg-amber-50 border-amber-200">
|
||
<CardContent className="pt-6">
|
||
<h3 className="font-semibold text-amber-900 mb-3">💡 Conseils pour Optimiser les Délais</h3>
|
||
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
||
<li>Réserver tôt, surtout en haute saison (2-3 semaines d'avance)</li>
|
||
<li>Respecter les cut-off avec une marge de sécurité (24h minimum)</li>
|
||
<li>Préparer les documents en parallèle de l'empotage</li>
|
||
<li>Négocier du free time supplémentaire pour les volumes importants</li>
|
||
<li>Tracker activement les navires (AIS, portails compagnies)</li>
|
||
<li>Anticiper le dédouanement (pré-clearing si possible)</li>
|
||
<li>Avoir un plan B en cas de roll-over (service alternatif)</li>
|
||
<li>Éviter les expéditions critiques pendant les périodes à risque</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|