250 lines
9.9 KiB
TypeScript
250 lines
9.9 KiB
TypeScript
/**
|
|
* Documents de Transport Maritime - Wiki Page
|
|
*
|
|
* Essential documents for maritime shipping
|
|
*/
|
|
|
|
import Link from 'next/link';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
|
|
const documents = [
|
|
{
|
|
name: 'Bill of Lading (B/L)',
|
|
french: 'Connaissement',
|
|
description: 'Document principal du transport maritime. Il fait preuve du contrat de transport, accuse réception des marchandises et constitue un titre de propriété négociable.',
|
|
types: [
|
|
{ name: 'B/L à ordre', desc: 'Négociable, peut être endossé' },
|
|
{ name: 'B/L nominatif', desc: 'Au nom d\'un destinataire précis' },
|
|
{ name: 'B/L au porteur', desc: 'Propriété à celui qui le détient' },
|
|
],
|
|
importance: 'Critique',
|
|
icon: '📄',
|
|
},
|
|
{
|
|
name: 'Sea Waybill',
|
|
french: 'Lettre de transport maritime',
|
|
description: 'Document non négociable servant de preuve du contrat de transport et de reçu. Plus simple que le B/L car pas besoin de présenter l\'original pour retirer les marchandises.',
|
|
types: [
|
|
{ name: 'Standard', desc: 'Pour expéditions entre parties de confiance' },
|
|
{ name: 'Express', desc: 'Libération rapide sans documents originaux' },
|
|
],
|
|
importance: 'Important',
|
|
icon: '📋',
|
|
},
|
|
{
|
|
name: 'Manifest',
|
|
french: 'Manifeste de cargaison',
|
|
description: 'Liste complète de toutes les marchandises chargées à bord d\'un navire. Utilisé par les autorités douanières et portuaires.',
|
|
types: [
|
|
{ name: 'Cargo Manifest', desc: 'Liste détaillée des marchandises' },
|
|
{ name: 'Freight Manifest', desc: 'Inclut les informations de fret' },
|
|
],
|
|
importance: 'Obligatoire',
|
|
icon: '📑',
|
|
},
|
|
{
|
|
name: 'Packing List',
|
|
french: 'Liste de colisage',
|
|
description: 'Document détaillant le contenu de chaque colis, ses dimensions et son poids. Essentiel pour le dédouanement.',
|
|
types: [
|
|
{ name: 'Simple', desc: 'Liste basique des contenus' },
|
|
{ name: 'Détaillée', desc: 'Avec poids, dimensions, marquage' },
|
|
],
|
|
importance: 'Important',
|
|
icon: '📦',
|
|
},
|
|
{
|
|
name: 'Commercial Invoice',
|
|
french: 'Facture commerciale',
|
|
description: 'Facture établie par le vendeur décrivant les marchandises, leur valeur et les conditions de vente. Base pour le calcul des droits de douane.',
|
|
types: [
|
|
{ name: 'Proforma', desc: 'Avant expédition, pour cotation' },
|
|
{ name: 'Définitive', desc: 'Document final de facturation' },
|
|
],
|
|
importance: 'Critique',
|
|
icon: '🧾',
|
|
},
|
|
{
|
|
name: 'Certificate of Origin',
|
|
french: 'Certificat d\'origine',
|
|
description: 'Document certifiant le pays de fabrication ou de transformation des marchandises. Requis pour les préférences tarifaires.',
|
|
types: [
|
|
{ name: 'EUR.1', desc: 'Pour les échanges UE' },
|
|
{ name: 'Form A', desc: 'Système de préférences généralisées' },
|
|
{ name: 'Non préférentiel', desc: 'Attestation simple d\'origine' },
|
|
],
|
|
importance: 'Selon destination',
|
|
icon: '🏭',
|
|
},
|
|
];
|
|
|
|
const additionalDocs = [
|
|
{
|
|
name: 'Dangerous Goods Declaration',
|
|
description: 'Obligatoire pour les marchandises dangereuses (IMDG)',
|
|
},
|
|
{
|
|
name: 'Phytosanitary Certificate',
|
|
description: 'Pour les produits végétaux et alimentaires',
|
|
},
|
|
{
|
|
name: 'Insurance Certificate',
|
|
description: 'Preuve de couverture d\'assurance cargo',
|
|
},
|
|
{
|
|
name: 'Inspection Certificate',
|
|
description: 'Rapport de contrôle qualité avant embarquement',
|
|
},
|
|
{
|
|
name: 'VGM Declaration',
|
|
description: 'Déclaration du poids vérifié du conteneur (SOLAS)',
|
|
},
|
|
];
|
|
|
|
export default function DocumentsTransportPage() {
|
|
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">Documents de Transport Maritime</h1>
|
|
</div>
|
|
<p className="mt-3 text-gray-600 max-w-3xl">
|
|
Le transport maritime international nécessite une documentation précise et complète.
|
|
Ces documents servent de preuve de propriété, de contrat de transport et sont essentiels
|
|
pour le passage en douane.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Importance Warning */}
|
|
<Card className="bg-red-50 border-red-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-red-900 mb-2">Important</h3>
|
|
<p className="text-red-800">
|
|
Une erreur ou un manque de document peut entraîner des retards considérables, des frais
|
|
de surestaries (demurrage) et même le refus d'entrée des marchandises dans le pays de destination.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Main Documents */}
|
|
<h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Principaux</h2>
|
|
<div className="space-y-4">
|
|
{documents.map((doc) => (
|
|
<Card key={doc.name} className="bg-white">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-2xl">{doc.icon}</span>
|
|
<div>
|
|
<span className="text-lg">{doc.name}</span>
|
|
<span className="text-gray-500 text-sm ml-2">({doc.french})</span>
|
|
</div>
|
|
</div>
|
|
<span className={`px-3 py-1 text-xs font-medium rounded-full ${
|
|
doc.importance === 'Critique' ? 'bg-red-100 text-red-800' :
|
|
doc.importance === 'Obligatoire' ? 'bg-orange-100 text-orange-800' :
|
|
'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{doc.importance}
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-600 mb-4">{doc.description}</p>
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-gray-700 mb-2">Types:</p>
|
|
<ul className="space-y-1">
|
|
{doc.types.map((type) => (
|
|
<li key={type.name} className="text-sm flex">
|
|
<span className="font-medium text-gray-900 min-w-[120px]">{type.name}:</span>
|
|
<span className="text-gray-600">{type.desc}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bill of Lading Detail */}
|
|
<Card className="mt-8 bg-blue-50 border-blue-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-blue-900">Focus: Le Bill of Lading (B/L)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-blue-800 mb-4">
|
|
Le B/L remplit trois fonctions essentielles:
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-white p-4 rounded-lg">
|
|
<h4 className="font-semibold text-blue-900 mb-2">1. Reçu</h4>
|
|
<p className="text-sm text-gray-600">
|
|
Confirme que le transporteur a reçu les marchandises dans l'état décrit
|
|
</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg">
|
|
<h4 className="font-semibold text-blue-900 mb-2">2. Contrat</h4>
|
|
<p className="text-sm text-gray-600">
|
|
Preuve du contrat de transport entre le chargeur et le transporteur
|
|
</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg">
|
|
<h4 className="font-semibold text-blue-900 mb-2">3. Titre</h4>
|
|
<p className="text-sm text-gray-600">
|
|
Document de titre permettant le transfert de propriété des marchandises
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Additional Documents */}
|
|
<h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Complémentaires</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{additionalDocs.map((doc) => (
|
|
<div key={doc.name} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
|
<span className="text-green-600">✓</span>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{doc.name}</p>
|
|
<p className="text-sm text-gray-600">{doc.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</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 Pratiques</h3>
|
|
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
|
<li>Vérifiez la cohérence entre tous les documents (noms, adresses, descriptions)</li>
|
|
<li>Conservez des copies de tous les originaux</li>
|
|
<li>Anticipez les délais d'obtention des certificats (origine, sanitaire, etc.)</li>
|
|
<li>En cas de L/C, les documents doivent correspondre exactement aux exigences</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|