fix wiki
This commit is contained in:
David
parent
de4126a657
commit
dd5d806180
@ -25,6 +25,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
{ name: 'Dashboard', href: '/dashboard', icon: '📊' },
|
||||
{ name: 'Bookings', href: '/dashboard/bookings', icon: '📦' },
|
||||
{ name: 'Documents', href: '/dashboard/documents', icon: '📄' },
|
||||
{ name: 'Wiki', href: '/dashboard/wiki', icon: '📚' },
|
||||
{ name: 'My Profile', href: '/dashboard/profile', icon: '👤' },
|
||||
{ name: 'Organization', href: '/dashboard/settings/organization', icon: '🏢' },
|
||||
// ADMIN and MANAGER only navigation items
|
||||
|
||||
210
apps/frontend/app/dashboard/wiki/assurance/page.tsx
Normal file
210
apps/frontend/app/dashboard/wiki/assurance/page.tsx
Normal file
@ -0,0 +1,210 @@
|
||||
/**
|
||||
* Assurance Maritime - Wiki Page
|
||||
*
|
||||
* Protection des marchandises en transit
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const clausesICC = [
|
||||
{
|
||||
code: 'ICC A',
|
||||
name: 'All Risks',
|
||||
coverage: 'Tous risques',
|
||||
description: 'Couverture la plus complète. Couvre tous les risques de perte ou dommage sauf exclusions spécifiques.',
|
||||
includes: ['Vol', 'Casse', 'Mouille', 'Manquants', 'Chute', 'Écrasement'],
|
||||
excludes: ['Vice propre', 'Emballage insuffisant', 'Guerre', 'Grèves'],
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
code: 'ICC B',
|
||||
name: 'With Average',
|
||||
coverage: 'Risques majeurs',
|
||||
description: 'Couverture intermédiaire incluant les événements majeurs de transport.',
|
||||
includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Jet à la mer', 'Avarie commune'],
|
||||
excludes: ['Vol', 'Mouille', 'Manquants (hors avarie commune)', 'Casse isolée'],
|
||||
recommended: false,
|
||||
},
|
||||
{
|
||||
code: 'ICC C',
|
||||
name: 'Free of Particular Average',
|
||||
coverage: 'Risques minimaux',
|
||||
description: 'Couverture de base pour les sinistres majeurs uniquement.',
|
||||
includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Avarie commune'],
|
||||
excludes: ['Vol', 'Mouille', 'Casse', 'Manquants', 'Perte partielle'],
|
||||
recommended: false,
|
||||
},
|
||||
];
|
||||
|
||||
const extensionsGaranties = [
|
||||
{ name: 'Guerre et grèves', description: 'Extension pour couvrir les risques de guerre, grèves, émeutes.' },
|
||||
{ name: 'Magasin à magasin', description: 'Couverture étendue incluant les phases de stockage.' },
|
||||
{ name: 'Frais de réexpédition', description: 'Couvre les frais en cas de changement de destination.' },
|
||||
{ name: 'Pertes financières', description: 'Perte de marge, frais supplémentaires liés au sinistre.' },
|
||||
{ name: 'Transport frigorifique', description: 'Risques spécifiques liés au froid (panne, variation).' },
|
||||
];
|
||||
|
||||
export default function AssurancePage() {
|
||||
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">Assurance Maritime (Cargo Insurance)</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
L'assurance transport maritime protège les marchandises contre les risques de perte ou de dommage
|
||||
pendant le transit. Elle est régie par les Institute Cargo Clauses (ICC) de l'Institute of London Underwriters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Why insure */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Pourquoi s'assurer ?</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-blue-800">
|
||||
<li><strong>Responsabilité limitée du transporteur</strong> : Maximum ~2 DTS/kg (Convention de Bruxelles)</li>
|
||||
<li><strong>Délai de réclamation court</strong> : 3 jours pour les réserves au transporteur</li>
|
||||
<li><strong>Preuves difficiles</strong> : Charge de la preuve souvent sur l'expéditeur</li>
|
||||
<li><strong>Exigence bancaire</strong> : Souvent requise pour les lettres de crédit (CIF, CIP)</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ICC Clauses */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Clauses ICC (Institute Cargo Clauses)</h2>
|
||||
<div className="space-y-4">
|
||||
{clausesICC.map((clause) => (
|
||||
<Card key={clause.code} className={`bg-white ${clause.recommended ? 'border-green-300 border-2' : ''}`}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-3">
|
||||
<span className={`px-3 py-1 text-white rounded-md font-mono ${clause.recommended ? 'bg-green-600' : 'bg-gray-600'}`}>
|
||||
{clause.code}
|
||||
</span>
|
||||
<span className="text-lg">{clause.name}</span>
|
||||
{clause.recommended && (
|
||||
<span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">{clause.description}</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-green-700 mb-2">✓ Couvert</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
{clause.includes.map((item) => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-red-700 mb-2">✗ Non couvert</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
{clause.excludes.map((item) => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Valeur assurée */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">💰 Calcul de la Valeur Assurée</h3>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<div className="text-center mb-4">
|
||||
<p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
|
||||
Valeur assurée = (CIF + 10%) × Taux de change
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-medium">CIF</h4>
|
||||
<p className="text-gray-600">Coût + Assurance + Fret jusqu'au port de destination</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">+ 10%</h4>
|
||||
<p className="text-gray-600">Majoration standard pour couvrir le profit espéré</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">Taux de prime</h4>
|
||||
<p className="text-gray-600">0.1% à 1% selon marchandise, trajet, clause</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Extensions */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">➕ Extensions de Garantie</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{extensionsGaranties.map((ext) => (
|
||||
<Card key={ext.name} className="bg-white">
|
||||
<CardContent className="pt-4">
|
||||
<h4 className="font-medium text-gray-900">{ext.name}</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">{ext.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Process */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">📝 En Cas de Sinistre</h3>
|
||||
<ol className="list-decimal list-inside space-y-3 text-gray-700">
|
||||
<li><strong>Constater</strong> : Émettre des réserves précises sur le bon de livraison</li>
|
||||
<li><strong>Préserver</strong> : Ne pas modifier l'état des marchandises (photos, témoins)</li>
|
||||
<li><strong>Notifier</strong> : Informer l'assureur sous 5 jours ouvrés</li>
|
||||
<li><strong>Documenter</strong> : Rassembler tous les documents (B/L, facture, expertise)</li>
|
||||
<li><strong>Réclamer</strong> : Déposer une réclamation formelle avec justificatifs</li>
|
||||
</ol>
|
||||
</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>Toujours opter pour ICC A (All Risks) sauf marchandises très résistantes</li>
|
||||
<li>Vérifier les exclusions et souscrire les extensions nécessaires</li>
|
||||
<li>Photographier la marchandise avant expédition</li>
|
||||
<li>Conserver tous les documents originaux</li>
|
||||
<li>Ne jamais signer "reçu conforme" sans avoir vérifié</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
269
apps/frontend/app/dashboard/wiki/calcul-fret/page.tsx
Normal file
269
apps/frontend/app/dashboard/wiki/calcul-fret/page.tsx
Normal file
@ -0,0 +1,269 @@
|
||||
/**
|
||||
* Calcul du Fret Maritime - Wiki Page
|
||||
*
|
||||
* Comment sont calculés les coûts de transport
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const surcharges = [
|
||||
{
|
||||
code: 'BAF',
|
||||
name: 'Bunker Adjustment Factor',
|
||||
description: 'Surcharge carburant liée aux fluctuations du prix du fuel maritime.',
|
||||
variation: 'Mensuelle',
|
||||
},
|
||||
{
|
||||
code: 'CAF',
|
||||
name: 'Currency Adjustment Factor',
|
||||
description: 'Ajustement monétaire pour compenser les variations de taux de change.',
|
||||
variation: 'Mensuelle',
|
||||
},
|
||||
{
|
||||
code: 'THC',
|
||||
name: 'Terminal Handling Charges',
|
||||
description: 'Frais de manutention au terminal portuaire (chargement/déchargement).',
|
||||
variation: 'Par port',
|
||||
},
|
||||
{
|
||||
code: 'ISPS',
|
||||
name: 'International Ship & Port Security',
|
||||
description: 'Surcharge sécurité conforme au code ISPS (post 11 septembre).',
|
||||
variation: 'Fixe',
|
||||
},
|
||||
{
|
||||
code: 'LSS',
|
||||
name: 'Low Sulphur Surcharge',
|
||||
description: 'Surcharge carburant bas soufre (réglementation IMO 2020).',
|
||||
variation: 'Mensuelle',
|
||||
},
|
||||
{
|
||||
code: 'PSS',
|
||||
name: 'Peak Season Surcharge',
|
||||
description: 'Surcharge haute saison (généralement août-octobre vers l\'Europe).',
|
||||
variation: 'Saisonnière',
|
||||
},
|
||||
{
|
||||
code: 'GRI',
|
||||
name: 'General Rate Increase',
|
||||
description: 'Augmentation générale des tarifs, généralement annoncée à l\'avance.',
|
||||
variation: 'Variable',
|
||||
},
|
||||
{
|
||||
code: 'EBS',
|
||||
name: 'Emergency Bunker Surcharge',
|
||||
description: 'Surcharge d\'urgence en cas de hausse brutale du carburant.',
|
||||
variation: 'Exceptionnelle',
|
||||
},
|
||||
];
|
||||
|
||||
const fraisAdditionnels = [
|
||||
{ name: 'Documentation Fee', description: 'Frais d\'émission du B/L ou autres documents', typical: '35-75 USD' },
|
||||
{ name: 'Seal Fee', description: 'Coût du plomb de sécurité du conteneur', typical: '10-25 USD' },
|
||||
{ name: 'VGM Fee', description: 'Frais de certification du poids vérifié', typical: '25-50 USD' },
|
||||
{ name: 'Container Cleaning', description: 'Nettoyage du conteneur si requis', typical: '50-150 USD' },
|
||||
{ name: 'Customs Clearance', description: 'Frais de dédouanement (honoraires)', typical: '50-200 USD' },
|
||||
{ name: 'Inspection Fee', description: 'Frais d\'inspection (scanner, phytosanitaire)', typical: '50-300 USD' },
|
||||
];
|
||||
|
||||
export default function CalculFretPage() {
|
||||
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">Calcul du Fret Maritime</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Le coût du transport maritime se compose du fret de base et de nombreuses surcharges.
|
||||
Comprendre ces éléments est essentiel pour bien estimer ses coûts logistiques.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Base Calculation */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">📐 Principes de Base</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-medium text-blue-800">FCL (Conteneur Complet)</h4>
|
||||
<p className="text-sm text-blue-700 mt-1">
|
||||
Prix forfaitaire par conteneur (20', 40', 40'HC), indépendant du poids (dans les limites).
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-2">Ex: 1,500 USD/20' Shanghai → Rotterdam</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-blue-800">LCL (Groupage)</h4>
|
||||
<p className="text-sm text-blue-700 mt-1">
|
||||
Prix au mètre cube (CBM) ou à la tonne, selon le plus avantageux pour le transporteur.
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-2">Ex: 45 USD/CBM (minimum 1 CBM)</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Weight Calculation */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">⚖️ Poids Taxable (LCL)</h3>
|
||||
<div className="bg-white p-4 rounded-lg border mb-4">
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
|
||||
Poids taxable = MAX (Volume CBM × 1000, Poids brut kg)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium">Exemple 1 : Marchandise légère</h4>
|
||||
<ul className="text-gray-600 mt-2 space-y-1">
|
||||
<li>Volume : 2 CBM</li>
|
||||
<li>Poids : 500 kg</li>
|
||||
<li>Volume équivalent : 2 × 1000 = 2000 kg</li>
|
||||
<li className="font-medium text-blue-700">→ Taxé sur 2 CBM (ou 2 tonnes)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium">Exemple 2 : Marchandise lourde</h4>
|
||||
<ul className="text-gray-600 mt-2 space-y-1">
|
||||
<li>Volume : 1 CBM</li>
|
||||
<li>Poids : 2000 kg</li>
|
||||
<li>Volume équivalent : 1 × 1000 = 1000 kg</li>
|
||||
<li className="font-medium text-blue-700">→ Taxé sur 2 tonnes (poids réel)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Ratio standard : 1 CBM = 1 tonne (1000 kg). Certaines compagnies utilisent 1 CBM = 333 kg pour l'aérien.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Surcharges */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Surcharges Courantes</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{surcharges.map((sur) => (
|
||||
<Card key={sur.code} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span className="px-3 py-1 bg-purple-600 text-white rounded-md font-mono text-sm">
|
||||
{sur.code}
|
||||
</span>
|
||||
<span className="text-base">{sur.name}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 text-sm">{sur.description}</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Variation : {sur.variation}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional fees */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">💵 Frais Additionnels</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">Frais</th>
|
||||
<th className="text-left py-2 font-medium">Description</th>
|
||||
<th className="text-right py-2 font-medium">Montant typique</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{fraisAdditionnels.map((frais) => (
|
||||
<tr key={frais.name} className="border-b last:border-0">
|
||||
<td className="py-3 font-medium text-gray-900">{frais.name}</td>
|
||||
<td className="py-3 text-gray-600">{frais.description}</td>
|
||||
<td className="py-3 text-right font-mono text-gray-700">{frais.typical}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Example calculation */}
|
||||
<Card className="mt-8 bg-green-50 border-green-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-green-900 mb-3">📊 Exemple de Devis FCL</h3>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<p className="text-sm text-gray-600 mb-3">Conteneur 40' Shanghai → Le Havre</p>
|
||||
<div className="space-y-2 font-mono text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>Ocean Freight (base)</span>
|
||||
<span>1,800 USD</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>BAF</span>
|
||||
<span>450 USD</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>LSS</span>
|
||||
<span>180 USD</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>THC Origin</span>
|
||||
<span>150 USD</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>THC Destination</span>
|
||||
<span>280 EUR</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>ISPS</span>
|
||||
<span>12 USD</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Documentation</span>
|
||||
<span>45 USD</span>
|
||||
</div>
|
||||
<div className="border-t pt-2 flex justify-between font-bold">
|
||||
<span>Total estimé</span>
|
||||
<span>~2,637 USD + 280 EUR</span>
|
||||
</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 pour Optimiser</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
||||
<li>Demandez des devis "All-in" pour éviter les surprises de surcharges</li>
|
||||
<li>Comparez les transitaires sur le total, pas seulement le fret de base</li>
|
||||
<li>Anticipez la haute saison (septembre-novembre) avec des réservations précoces</li>
|
||||
<li>Optimisez le remplissage des conteneurs pour réduire le coût unitaire</li>
|
||||
<li>Vérifiez les surcharges qui peuvent changer entre devis et facture</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
315
apps/frontend/app/dashboard/wiki/conteneurs/page.tsx
Normal file
315
apps/frontend/app/dashboard/wiki/conteneurs/page.tsx
Normal file
@ -0,0 +1,315 @@
|
||||
/**
|
||||
* Conteneurs et Types de Cargo - Wiki Page
|
||||
*
|
||||
* Complete guide to container types
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const containers = [
|
||||
{
|
||||
type: '20\' Standard (20\' DRY)',
|
||||
code: '20DC',
|
||||
dimensions: {
|
||||
external: '6.06m x 2.44m x 2.59m',
|
||||
internal: '5.90m x 2.35m x 2.39m',
|
||||
door: '2.34m x 2.28m',
|
||||
},
|
||||
capacity: {
|
||||
volume: '33 m³',
|
||||
payload: '28,200 kg',
|
||||
tare: '2,300 kg',
|
||||
},
|
||||
usage: 'Marchandises générales sèches',
|
||||
icon: '📦',
|
||||
},
|
||||
{
|
||||
type: '40\' Standard (40\' DRY)',
|
||||
code: '40DC',
|
||||
dimensions: {
|
||||
external: '12.19m x 2.44m x 2.59m',
|
||||
internal: '12.03m x 2.35m x 2.39m',
|
||||
door: '2.34m x 2.28m',
|
||||
},
|
||||
capacity: {
|
||||
volume: '67 m³',
|
||||
payload: '26,680 kg',
|
||||
tare: '3,800 kg',
|
||||
},
|
||||
usage: 'Marchandises générales, cargo volumineux',
|
||||
icon: '📦',
|
||||
},
|
||||
{
|
||||
type: '40\' High Cube (40\' HC)',
|
||||
code: '40HC',
|
||||
dimensions: {
|
||||
external: '12.19m x 2.44m x 2.90m',
|
||||
internal: '12.03m x 2.35m x 2.69m',
|
||||
door: '2.34m x 2.58m',
|
||||
},
|
||||
capacity: {
|
||||
volume: '76 m³',
|
||||
payload: '26,460 kg',
|
||||
tare: '4,020 kg',
|
||||
},
|
||||
usage: 'Cargo léger mais volumineux',
|
||||
icon: '📦',
|
||||
},
|
||||
{
|
||||
type: 'Reefer (Réfrigéré)',
|
||||
code: '20RF / 40RF',
|
||||
dimensions: {
|
||||
external: 'Comme standard',
|
||||
internal: 'Légèrement réduit (isolation)',
|
||||
door: 'Standard',
|
||||
},
|
||||
capacity: {
|
||||
volume: '28 m³ (20\') / 60 m³ (40\')',
|
||||
payload: '27,400 kg / 26,500 kg',
|
||||
temperature: '-30°C à +30°C',
|
||||
},
|
||||
usage: 'Produits périssables, pharmaceutiques',
|
||||
icon: '❄️',
|
||||
},
|
||||
{
|
||||
type: 'Open Top',
|
||||
code: '20OT / 40OT',
|
||||
dimensions: {
|
||||
external: 'Comme standard',
|
||||
internal: 'Comme standard',
|
||||
door: 'Toit amovible + portes arrière',
|
||||
},
|
||||
capacity: {
|
||||
volume: 'Comme standard',
|
||||
payload: '28,100 kg / 26,400 kg',
|
||||
tare: '2,400 kg / 4,100 kg',
|
||||
},
|
||||
usage: 'Cargo hors gabarit en hauteur, machinerie',
|
||||
icon: '📭',
|
||||
},
|
||||
{
|
||||
type: 'Flat Rack',
|
||||
code: '20FR / 40FR',
|
||||
dimensions: {
|
||||
external: 'Comme standard (sans parois)',
|
||||
internal: 'Plateau sans côtés',
|
||||
door: 'N/A',
|
||||
},
|
||||
capacity: {
|
||||
volume: 'N/A',
|
||||
payload: '31,000 kg / 40,000 kg',
|
||||
tare: '2,700 kg / 4,700 kg',
|
||||
},
|
||||
usage: 'Cargo très lourd ou surdimensionné',
|
||||
icon: '🚛',
|
||||
},
|
||||
{
|
||||
type: 'Tank Container',
|
||||
code: '20TK',
|
||||
dimensions: {
|
||||
external: 'Cadre standard 20\'',
|
||||
internal: 'Citerne 21,000-26,000 L',
|
||||
door: 'Valves et trappes',
|
||||
},
|
||||
capacity: {
|
||||
volume: '21,000-26,000 litres',
|
||||
payload: '26,000 kg',
|
||||
tare: '3,500 kg',
|
||||
},
|
||||
usage: 'Liquides, gaz, produits chimiques',
|
||||
icon: '🛢️',
|
||||
},
|
||||
];
|
||||
|
||||
const specialEquipment = [
|
||||
{ name: 'Flexitank', desc: 'Poche flexible pour liquides non dangereux dans un 20\' standard', capacity: '16,000-24,000 L' },
|
||||
{ name: 'Garment on Hanger (GOH)', desc: 'Barres pour vêtements suspendus', capacity: 'Variable' },
|
||||
{ name: 'Ventilated Container', desc: 'Aération naturelle pour café, cacao, oignons', capacity: 'Standard' },
|
||||
{ name: 'Insulated Container', desc: 'Isolation thermique sans réfrigération active', capacity: 'Standard' },
|
||||
];
|
||||
|
||||
export default function ConteneursPage() {
|
||||
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">Conteneurs et Types de Cargo</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Les conteneurs maritimes sont standardisés selon les normes ISO. Comprendre les différents
|
||||
types permet de choisir le conteneur adapté à votre marchandise et d'optimiser les coûts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Reference */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Codes ISO Courants</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ code: '20DC', name: '20\' Dry' },
|
||||
{ code: '40DC', name: '40\' Dry' },
|
||||
{ code: '40HC', name: '40\' High Cube' },
|
||||
{ code: '45HC', name: '45\' High Cube' },
|
||||
{ code: '20RF', name: '20\' Reefer' },
|
||||
{ code: '40RF', name: '40\' Reefer' },
|
||||
{ code: '20OT', name: '20\' Open Top' },
|
||||
{ code: '20FR', name: '20\' Flat Rack' },
|
||||
].map((item) => (
|
||||
<div key={item.code} className="bg-white p-2 rounded text-center">
|
||||
<span className="font-mono font-bold text-blue-700">{item.code}</span>
|
||||
<p className="text-xs text-gray-600">{item.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Container Types */}
|
||||
<h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Types de Conteneurs</h2>
|
||||
<div className="space-y-4">
|
||||
{containers.map((container) => (
|
||||
<Card key={container.code} 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">{container.icon}</span>
|
||||
<div>
|
||||
<span className="text-lg">{container.type}</span>
|
||||
<span className="ml-2 px-2 py-1 bg-gray-100 text-gray-700 text-xs font-mono rounded">
|
||||
{container.code}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">{container.usage}</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">Dimensions</p>
|
||||
<ul className="space-y-1 text-sm">
|
||||
<li className="flex justify-between">
|
||||
<span className="text-gray-500">Externe:</span>
|
||||
<span className="text-gray-900">{container.dimensions.external}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span className="text-gray-500">Interne:</span>
|
||||
<span className="text-gray-900">{container.dimensions.internal}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span className="text-gray-500">Porte:</span>
|
||||
<span className="text-gray-900">{container.dimensions.door}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">Capacité</p>
|
||||
<ul className="space-y-1 text-sm">
|
||||
{Object.entries(container.capacity).map(([key, value]) => (
|
||||
<li key={key} className="flex justify-between">
|
||||
<span className="text-gray-500 capitalize">{key}:</span>
|
||||
<span className="text-gray-900">{value}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Special Equipment */}
|
||||
<h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Équipements Spéciaux</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{specialEquipment.map((equip) => (
|
||||
<div key={equip.name} className="p-4 bg-gray-50 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-900">{equip.name}</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">{equip.desc}</p>
|
||||
<p className="text-sm text-blue-600 mt-2">Capacité: {equip.capacity}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Container Selection Guide */}
|
||||
<Card className="mt-8 bg-green-50 border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-900">Guide de Sélection</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">📦</span>
|
||||
<div>
|
||||
<p className="font-medium text-green-900">Marchandises générales</p>
|
||||
<p className="text-sm text-green-800">→ 20' ou 40' Standard (DRY)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">❄️</span>
|
||||
<div>
|
||||
<p className="font-medium text-green-900">Produits réfrigérés/congelés</p>
|
||||
<p className="text-sm text-green-800">→ Reefer 20' ou 40'</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">📭</span>
|
||||
<div>
|
||||
<p className="font-medium text-green-900">Cargo hors gabarit (hauteur)</p>
|
||||
<p className="text-sm text-green-800">→ Open Top</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">🚛</span>
|
||||
<div>
|
||||
<p className="font-medium text-green-900">Machinerie lourde/surdimensionnée</p>
|
||||
<p className="text-sm text-green-800">→ Flat Rack</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-xl">🛢️</span>
|
||||
<div>
|
||||
<p className="font-medium text-green-900">Liquides en vrac</p>
|
||||
<p className="text-sm text-green-800">→ Tank Container ou Flexitank</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>Un 40' HC offre 30% de volume en plus qu'un 20' mais coûte rarement le double</li>
|
||||
<li>Les Reefer nécessitent une alimentation électrique au port et sur le navire</li>
|
||||
<li>Les conteneurs spéciaux (OT, FR, Tank) ont une disponibilité limitée - réservez à l'avance</li>
|
||||
<li>Vérifiez le poids maximum autorisé sur les routes du pays de destination</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
249
apps/frontend/app/dashboard/wiki/documents-transport/page.tsx
Normal file
249
apps/frontend/app/dashboard/wiki/documents-transport/page.tsx
Normal file
@ -0,0 +1,249 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
218
apps/frontend/app/dashboard/wiki/douanes/page.tsx
Normal file
218
apps/frontend/app/dashboard/wiki/douanes/page.tsx
Normal file
@ -0,0 +1,218 @@
|
||||
/**
|
||||
* Procédures Douanières - Wiki Page
|
||||
*
|
||||
* Guide des formalités douanières import/export
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const regimesDouaniers = [
|
||||
{
|
||||
code: 'IM4',
|
||||
name: 'Mise en libre pratique',
|
||||
description: 'Importation définitive avec paiement des droits et taxes. La marchandise entre dans le circuit économique.',
|
||||
},
|
||||
{
|
||||
code: 'IM5',
|
||||
name: 'Admission temporaire',
|
||||
description: 'Importation temporaire avec suspension des droits. Pour les marchandises réexportées en l\'état.',
|
||||
},
|
||||
{
|
||||
code: 'IM6',
|
||||
name: 'Perfectionnement actif',
|
||||
description: 'Importation pour transformation et réexportation. Suspension des droits sur les intrants.',
|
||||
},
|
||||
{
|
||||
code: 'IM7',
|
||||
name: 'Entrepôt douanier',
|
||||
description: 'Stockage sous douane sans paiement des droits jusqu\'à la mise en consommation.',
|
||||
},
|
||||
{
|
||||
code: 'EX1',
|
||||
name: 'Exportation définitive',
|
||||
description: 'Sortie définitive des marchandises du territoire douanier.',
|
||||
},
|
||||
{
|
||||
code: 'EX2',
|
||||
name: 'Exportation temporaire',
|
||||
description: 'Sortie temporaire avec réimportation prévue en l\'état.',
|
||||
},
|
||||
{
|
||||
code: 'EX3',
|
||||
name: 'Perfectionnement passif',
|
||||
description: 'Exportation pour transformation à l\'étranger et réimportation.',
|
||||
},
|
||||
];
|
||||
|
||||
const documentsDouane = [
|
||||
{
|
||||
name: 'DAU (Document Administratif Unique)',
|
||||
description: 'Formulaire standard pour toutes les déclarations douanières dans l\'UE.',
|
||||
obligatoire: true,
|
||||
},
|
||||
{
|
||||
name: 'Facture commerciale',
|
||||
description: 'Document de base indiquant la valeur des marchandises.',
|
||||
obligatoire: true,
|
||||
},
|
||||
{
|
||||
name: 'Liste de colisage',
|
||||
description: 'Détail du contenu de chaque colis (poids, dimensions, contenu).',
|
||||
obligatoire: true,
|
||||
},
|
||||
{
|
||||
name: 'Certificat d\'origine',
|
||||
description: 'Atteste l\'origine des marchandises pour les accords préférentiels.',
|
||||
obligatoire: false,
|
||||
},
|
||||
{
|
||||
name: 'Licence d\'importation/exportation',
|
||||
description: 'Autorisation pour certaines marchandises réglementées.',
|
||||
obligatoire: false,
|
||||
},
|
||||
{
|
||||
name: 'Certificat sanitaire/phytosanitaire',
|
||||
description: 'Pour les produits alimentaires, animaux et végétaux.',
|
||||
obligatoire: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DouanesPage() {
|
||||
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">Procédures Douanières</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Les formalités douanières sont obligatoires pour toute marchandise traversant une frontière.
|
||||
Elles permettent le contrôle des échanges, la perception des droits et taxes, et l'application
|
||||
des réglementations commerciales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Concepts */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Concepts Clés</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
|
||||
<div>
|
||||
<h4 className="font-medium">Valeur en douane</h4>
|
||||
<p className="text-sm">Base de calcul des droits, généralement la valeur CIF (coût + assurance + fret).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">Code SH / NC</h4>
|
||||
<p className="text-sm">Classification tarifaire harmonisée des marchandises (6 ou 8 chiffres).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">Origine</h4>
|
||||
<p className="text-sm">Pays de fabrication ou de transformation substantielle de la marchandise.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">OEA (Opérateur Économique Agréé)</h4>
|
||||
<p className="text-sm">Statut de confiance accordé par les douanes pour des procédures simplifiées.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Régimes douaniers */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Régimes Douaniers</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{regimesDouaniers.map((regime) => (
|
||||
<Card key={regime.code} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span className="px-3 py-1 bg-green-600 text-white rounded-md font-mono text-sm">
|
||||
{regime.code}
|
||||
</span>
|
||||
<span className="text-lg">{regime.name}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">{regime.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Documents requis */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📄 Documents Requis</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
{documentsDouane.map((doc) => (
|
||||
<div key={doc.name} className="flex items-start gap-3 pb-4 border-b last:border-0">
|
||||
<span className={`px-2 py-1 text-xs rounded ${doc.obligatoire ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}`}>
|
||||
{doc.obligatoire ? 'Obligatoire' : 'Selon cas'}
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{doc.name}</h4>
|
||||
<p className="text-sm text-gray-600">{doc.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Droits et taxes */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">💰 Droits et Taxes</h3>
|
||||
<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">Droits de douane</h4>
|
||||
<p className="text-sm text-gray-600">Pourcentage appliqué sur la valeur en douane selon le code SH.</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Ex: 0% à 17% selon les produits</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">TVA import</h4>
|
||||
<p className="text-sm text-gray-600">Taxe sur la valeur ajoutée calculée sur (valeur + droits).</p>
|
||||
<p className="text-xs text-gray-500 mt-2">France: 20%, 10%, 5.5% ou 2.1%</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Droits antidumping</h4>
|
||||
<p className="text-sm text-gray-600">Droits additionnels pour protéger contre la concurrence déloyale.</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Variable selon origine et produit</p>
|
||||
</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">⚠️ Points d'Attention</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
||||
<li>Toujours vérifier le classement tarifaire avant l'importation</li>
|
||||
<li>Conserver tous les documents 3 ans minimum (contrôle a posteriori)</li>
|
||||
<li>Anticiper les contrôles : certificats, licences, normes</li>
|
||||
<li>Utiliser les accords de libre-échange pour réduire les droits</li>
|
||||
<li>Attention aux marchandises à double usage (exportation)</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
312
apps/frontend/app/dashboard/wiki/imdg/page.tsx
Normal file
312
apps/frontend/app/dashboard/wiki/imdg/page.tsx
Normal file
@ -0,0 +1,312 @@
|
||||
/**
|
||||
* Marchandises Dangereuses (IMDG) - Wiki Page
|
||||
*
|
||||
* Transport de matières dangereuses par mer
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const classesIMDG = [
|
||||
{
|
||||
class: '1',
|
||||
name: 'Explosifs',
|
||||
description: 'Matières et objets explosibles',
|
||||
examples: 'Munitions, feux d\'artifice, détonateurs',
|
||||
color: 'bg-orange-500',
|
||||
},
|
||||
{
|
||||
class: '2',
|
||||
name: 'Gaz',
|
||||
description: 'Gaz comprimés, liquéfiés ou dissous',
|
||||
examples: 'Propane, aérosols, oxygène, extincteurs',
|
||||
color: 'bg-green-500',
|
||||
subdivisions: ['2.1 Inflammables', '2.2 Non inflammables', '2.3 Toxiques'],
|
||||
},
|
||||
{
|
||||
class: '3',
|
||||
name: 'Liquides inflammables',
|
||||
description: 'Liquides à point d\'éclair bas',
|
||||
examples: 'Essence, peintures, alcools, solvants',
|
||||
color: 'bg-red-500',
|
||||
},
|
||||
{
|
||||
class: '4',
|
||||
name: 'Solides inflammables',
|
||||
description: 'Solides facilement inflammables ou auto-réactifs',
|
||||
examples: 'Allumettes, soufre, métaux en poudre',
|
||||
color: 'bg-red-400',
|
||||
subdivisions: ['4.1 Inflammables', '4.2 Auto-inflammables', '4.3 Réagissent avec l\'eau'],
|
||||
},
|
||||
{
|
||||
class: '5',
|
||||
name: 'Comburants et peroxydes',
|
||||
description: 'Matières qui favorisent la combustion',
|
||||
examples: 'Engrais, peroxydes, agents de blanchiment',
|
||||
color: 'bg-yellow-500',
|
||||
subdivisions: ['5.1 Comburants', '5.2 Peroxydes organiques'],
|
||||
},
|
||||
{
|
||||
class: '6',
|
||||
name: 'Matières toxiques et infectieuses',
|
||||
description: 'Matières nocives pour la santé',
|
||||
examples: 'Pesticides, échantillons médicaux, cyanures',
|
||||
color: 'bg-purple-500',
|
||||
subdivisions: ['6.1 Toxiques', '6.2 Infectieuses'],
|
||||
},
|
||||
{
|
||||
class: '7',
|
||||
name: 'Matières radioactives',
|
||||
description: 'Matières émettant des radiations',
|
||||
examples: 'Isotopes médicaux, sources industrielles',
|
||||
color: 'bg-yellow-300',
|
||||
},
|
||||
{
|
||||
class: '8',
|
||||
name: 'Matières corrosives',
|
||||
description: 'Matières attaquant les tissus ou métaux',
|
||||
examples: 'Acide sulfurique, soude caustique, batteries',
|
||||
color: 'bg-gray-700',
|
||||
},
|
||||
{
|
||||
class: '9',
|
||||
name: 'Matières dangereuses diverses',
|
||||
description: 'Autres matières présentant un danger',
|
||||
examples: 'Batteries lithium, amiante, glace carbonique',
|
||||
color: 'bg-gray-400',
|
||||
},
|
||||
];
|
||||
|
||||
const documentsRequired = [
|
||||
{ name: 'DGD (Dangerous Goods Declaration)', description: 'Déclaration obligatoire signée par l\'expéditeur' },
|
||||
{ name: 'Multimodal Dangerous Goods Form', description: 'Formulaire standard OMI/OIT pour le transport multimodal' },
|
||||
{ name: 'Fiche de Données de Sécurité (FDS/SDS)', description: 'Document technique détaillant les risques et mesures' },
|
||||
{ name: 'Certificat d\'empotage', description: 'Attestation de bon chargement du conteneur' },
|
||||
{ name: 'Approval/Exemption', description: 'Autorisations spécifiques pour certaines matières' },
|
||||
];
|
||||
|
||||
const packagingGroups = [
|
||||
{ group: 'I', danger: 'Élevé', description: 'Matières très dangereuses' },
|
||||
{ group: 'II', danger: 'Moyen', description: 'Matières moyennement dangereuses' },
|
||||
{ group: 'III', danger: 'Faible', description: 'Matières légèrement dangereuses' },
|
||||
];
|
||||
|
||||
export default function IMDGPage() {
|
||||
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">Marchandises Dangereuses (Code IMDG)</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Le Code IMDG (International Maritime Dangerous Goods) est le référentiel international pour
|
||||
le transport maritime de marchandises dangereuses. Publié par l'OMI, il est mis à jour tous
|
||||
les deux ans et est obligatoire depuis janvier 2004.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Info */}
|
||||
<Card className="bg-red-50 border-red-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-red-900 mb-3">⚠️ Responsabilités de l'Expéditeur</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-red-800">
|
||||
<li>Classer correctement la marchandise selon le Code IMDG</li>
|
||||
<li>Utiliser des emballages homologués UN</li>
|
||||
<li>Étiqueter et marquer conformément aux exigences</li>
|
||||
<li>Remplir la déclaration de marchandises dangereuses (DGD)</li>
|
||||
<li>S'assurer de la formation du personnel impliqué</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Classes */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Les 9 Classes de Danger</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{classesIMDG.map((cls) => (
|
||||
<Card key={cls.class} className="bg-white overflow-hidden">
|
||||
<div className={`h-2 ${cls.color}`}></div>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-3">
|
||||
<span className={`w-10 h-10 flex items-center justify-center text-white font-bold rounded ${cls.color}`}>
|
||||
{cls.class}
|
||||
</span>
|
||||
<span className="text-base">{cls.name}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 text-sm mb-2">{cls.description}</p>
|
||||
<p className="text-xs text-gray-500">Ex: {cls.examples}</p>
|
||||
{cls.subdivisions && (
|
||||
<div className="mt-2 pt-2 border-t">
|
||||
<p className="text-xs text-gray-400">Subdivisions:</p>
|
||||
<ul className="text-xs text-gray-500">
|
||||
{cls.subdivisions.map((sub) => (
|
||||
<li key={sub}>• {sub}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* UN Number */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">🔢 Numéro ONU (UN Number)</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Chaque matière dangereuse est identifiée par un numéro ONU à 4 chiffres.
|
||||
Ce numéro permet de retrouver toutes les informations dans le Code IMDG.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<p className="font-mono text-lg text-blue-600">UN 1203</p>
|
||||
<p className="text-gray-600">Essence</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<p className="font-mono text-lg text-blue-600">UN 2794</p>
|
||||
<p className="text-gray-600">Batteries acide/plomb</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<p className="font-mono text-lg text-blue-600">UN 3481</p>
|
||||
<p className="text-gray-600">Batteries lithium-ion</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Packaging Groups */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📦 Groupes d'Emballage</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
{packagingGroups.map((pg) => (
|
||||
<div key={pg.group} className="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
|
||||
<span className={`w-12 h-12 flex items-center justify-center rounded-full font-bold text-white ${
|
||||
pg.group === 'I' ? 'bg-red-600' : pg.group === 'II' ? 'bg-orange-500' : 'bg-yellow-500'
|
||||
}`}>
|
||||
{pg.group}
|
||||
</span>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Groupe {pg.group} - Danger {pg.danger}</p>
|
||||
<p className="text-sm text-gray-600">{pg.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Documents */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📄 Documents Requis</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-3">
|
||||
{documentsRequired.map((doc) => (
|
||||
<div key={doc.name} className="flex items-start gap-3 pb-3 border-b last:border-0">
|
||||
<span className="mt-1 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{doc.name}</h4>
|
||||
<p className="text-sm text-gray-600">{doc.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Labeling */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">🏷️ Marquage et Étiquetage</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Colis</h4>
|
||||
<ul className="text-sm text-gray-600 mt-2 space-y-1">
|
||||
<li>• Étiquette(s) de danger (losanges)</li>
|
||||
<li>• Numéro ONU précédé de "UN"</li>
|
||||
<li>• Nom technique de la matière</li>
|
||||
<li>• Marque d'homologation UN de l'emballage</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Conteneur</h4>
|
||||
<ul className="text-sm text-gray-600 mt-2 space-y-1">
|
||||
<li>• Plaques-étiquettes (4 faces)</li>
|
||||
<li>• Numéro ONU en grands caractères</li>
|
||||
<li>• Certificat d'empotage affiché</li>
|
||||
<li>• Marine Pollutant si applicable</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Segregation */}
|
||||
<Card className="mt-8 bg-orange-50 border-orange-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-orange-900 mb-3">🔀 Ségrégation</h3>
|
||||
<p className="text-orange-800 mb-3">
|
||||
Certaines classes de marchandises dangereuses ne peuvent pas être chargées ensemble.
|
||||
Le Code IMDG définit des règles strictes de ségrégation :
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
|
||||
<div className="bg-white p-2 rounded text-center">
|
||||
<p className="font-medium">1</p>
|
||||
<p className="text-xs text-gray-600">Away from</p>
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded text-center">
|
||||
<p className="font-medium">2</p>
|
||||
<p className="text-xs text-gray-600">Separated from</p>
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded text-center">
|
||||
<p className="font-medium">3</p>
|
||||
<p className="text-xs text-gray-600">Separated by compartment</p>
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded text-center">
|
||||
<p className="font-medium">4</p>
|
||||
<p className="text-xs text-gray-600">Separated longitudinally</p>
|
||||
</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érifier l'acceptation par la compagnie maritime (certaines refusent certaines classes)</li>
|
||||
<li>Anticiper les surcharges DG (dangerous goods) qui peuvent être significatives</li>
|
||||
<li>Former le personnel aux procédures d'urgence</li>
|
||||
<li>Utiliser un transitaire spécialisé en marchandises dangereuses</li>
|
||||
<li>Consulter les réglementations locales (certains ports ont des restrictions)</li>
|
||||
<li>Batteries lithium : attention aux réglementations très strictes (UN 3480, 3481)</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
224
apps/frontend/app/dashboard/wiki/incoterms/page.tsx
Normal file
224
apps/frontend/app/dashboard/wiki/incoterms/page.tsx
Normal file
@ -0,0 +1,224 @@
|
||||
/**
|
||||
* Incoterms 2020 - Wiki Page
|
||||
*
|
||||
* Detailed information about international commercial terms
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const incoterms = [
|
||||
{
|
||||
code: 'EXW',
|
||||
name: 'Ex Works',
|
||||
description: 'Le vendeur met la marchandise à disposition dans ses locaux. L\'acheteur assume tous les risques et coûts.',
|
||||
risk: 'Acheteur',
|
||||
transport: 'Tous modes',
|
||||
category: 'Départ',
|
||||
},
|
||||
{
|
||||
code: 'FCA',
|
||||
name: 'Free Carrier',
|
||||
description: 'Le vendeur livre la marchandise au transporteur désigné par l\'acheteur.',
|
||||
risk: 'Transfert à la livraison au transporteur',
|
||||
transport: 'Tous modes',
|
||||
category: 'Départ',
|
||||
},
|
||||
{
|
||||
code: 'CPT',
|
||||
name: 'Carriage Paid To',
|
||||
description: 'Le vendeur paie le transport jusqu\'à destination. Le risque est transféré à la remise au transporteur.',
|
||||
risk: 'Transfert à la livraison au transporteur',
|
||||
transport: 'Tous modes',
|
||||
category: 'Arrivée',
|
||||
},
|
||||
{
|
||||
code: 'CIP',
|
||||
name: 'Carriage and Insurance Paid To',
|
||||
description: 'Comme CPT mais le vendeur doit aussi assurer la marchandise.',
|
||||
risk: 'Transfert à la livraison au transporteur',
|
||||
transport: 'Tous modes',
|
||||
category: 'Arrivée',
|
||||
},
|
||||
{
|
||||
code: 'DAP',
|
||||
name: 'Delivered at Place',
|
||||
description: 'Le vendeur livre la marchandise prête à être déchargée au lieu convenu.',
|
||||
risk: 'Vendeur jusqu\'à destination',
|
||||
transport: 'Tous modes',
|
||||
category: 'Arrivée',
|
||||
},
|
||||
{
|
||||
code: 'DPU',
|
||||
name: 'Delivered at Place Unloaded',
|
||||
description: 'Le vendeur livre et décharge la marchandise au lieu de destination.',
|
||||
risk: 'Vendeur jusqu\'au déchargement',
|
||||
transport: 'Tous modes',
|
||||
category: 'Arrivée',
|
||||
},
|
||||
{
|
||||
code: 'DDP',
|
||||
name: 'Delivered Duty Paid',
|
||||
description: 'Le vendeur assume tous les risques et coûts, y compris les droits de douane.',
|
||||
risk: 'Vendeur (maximum)',
|
||||
transport: 'Tous modes',
|
||||
category: 'Arrivée',
|
||||
},
|
||||
{
|
||||
code: 'FAS',
|
||||
name: 'Free Alongside Ship',
|
||||
description: 'Le vendeur livre la marchandise le long du navire au port d\'embarquement.',
|
||||
risk: 'Transfert le long du navire',
|
||||
transport: 'Maritime uniquement',
|
||||
category: 'Maritime',
|
||||
},
|
||||
{
|
||||
code: 'FOB',
|
||||
name: 'Free On Board',
|
||||
description: 'Le vendeur livre la marchandise à bord du navire. Très utilisé en maritime.',
|
||||
risk: 'Transfert à bord du navire',
|
||||
transport: 'Maritime uniquement',
|
||||
category: 'Maritime',
|
||||
},
|
||||
{
|
||||
code: 'CFR',
|
||||
name: 'Cost and Freight',
|
||||
description: 'Le vendeur paie le fret jusqu\'au port de destination. Le risque passe à bord.',
|
||||
risk: 'Transfert à bord du navire',
|
||||
transport: 'Maritime uniquement',
|
||||
category: 'Maritime',
|
||||
},
|
||||
{
|
||||
code: 'CIF',
|
||||
name: 'Cost, Insurance and Freight',
|
||||
description: 'Comme CFR mais le vendeur doit aussi assurer la marchandise.',
|
||||
risk: 'Transfert à bord du navire',
|
||||
transport: 'Maritime uniquement',
|
||||
category: 'Maritime',
|
||||
},
|
||||
];
|
||||
|
||||
export default function IncotermsPage() {
|
||||
const categories = ['Départ', 'Arrivée', 'Maritime'];
|
||||
|
||||
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">Incoterms 2020</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Les Incoterms (International Commercial Terms) sont des règles publiées par la Chambre de Commerce
|
||||
Internationale (ICC) qui définissent les responsabilités des vendeurs et acheteurs dans les transactions
|
||||
internationales. La version 2020 est entrée en vigueur le 1er janvier 2020.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Points */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Points Clés</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-blue-800">
|
||||
<li>11 Incoterms au total : 7 multimodaux et 4 maritimes</li>
|
||||
<li>Définissent le transfert des risques et des coûts</li>
|
||||
<li>Ne définissent PAS le transfert de propriété</li>
|
||||
<li>Doivent être suivis de la version (ex: FOB Incoterms 2020)</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Incoterms by category */}
|
||||
{categories.map((category) => (
|
||||
<div key={category} className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||
{category === 'Maritime' ? '🚢 Incoterms Maritimes' :
|
||||
category === 'Départ' ? '📤 Incoterms de Départ' : '📥 Incoterms d\'Arrivée'}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{incoterms
|
||||
.filter((term) => term.category === category)
|
||||
.map((term) => (
|
||||
<Card key={term.code} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span className="px-3 py-1 bg-blue-600 text-white rounded-md font-mono">
|
||||
{term.code}
|
||||
</span>
|
||||
<span className="text-lg">{term.name}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-3">{term.description}</p>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Risque:</span>
|
||||
<span className="font-medium text-gray-900">{term.risk}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Transport:</span>
|
||||
<span className="font-medium text-gray-900">{term.transport}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Visual diagram placeholder */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">Transfert des Risques - Schéma</h3>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="font-medium">Vendeur</span>
|
||||
<span className="font-medium">Acheteur</span>
|
||||
</div>
|
||||
<div className="relative h-8 bg-gradient-to-r from-blue-500 to-green-500 rounded-full">
|
||||
<div className="absolute inset-0 flex items-center justify-around text-white text-xs font-medium">
|
||||
<span>EXW</span>
|
||||
<span>FCA</span>
|
||||
<span>FOB</span>
|
||||
<span>CFR/CIF</span>
|
||||
<span>DAP</span>
|
||||
<span>DDP</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2 text-center">
|
||||
Plus on va vers la droite, plus le vendeur assume de responsabilités
|
||||
</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 Pratiques</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
||||
<li>Utilisez FOB ou CIF pour le maritime, FCA ou CIP pour le multimodal</li>
|
||||
<li>Précisez toujours le lieu exact (ex: FOB Shanghai Port)</li>
|
||||
<li>Vérifiez la cohérence entre l'Incoterm et la lettre de crédit</li>
|
||||
<li>EXW et DDP sont les termes extrêmes - à utiliser avec précaution</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
283
apps/frontend/app/dashboard/wiki/lcl-vs-fcl/page.tsx
Normal file
283
apps/frontend/app/dashboard/wiki/lcl-vs-fcl/page.tsx
Normal file
@ -0,0 +1,283 @@
|
||||
/**
|
||||
* LCL vs FCL - Wiki Page
|
||||
*
|
||||
* Comparison between Less than Container Load and Full Container Load
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
export default function LclVsFclPage() {
|
||||
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">LCL vs FCL</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Choisir entre LCL (Less than Container Load) et FCL (Full Container Load) est une décision
|
||||
cruciale qui impacte les coûts, les délais et la sécurité de vos marchandises.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Definitions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-900 flex items-center gap-2">
|
||||
<span className="text-2xl">📦</span>
|
||||
LCL - Groupage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-blue-800 mb-4">
|
||||
<strong>Less than Container Load</strong> - Vos marchandises partagent un conteneur
|
||||
avec d'autres expéditeurs. Vous payez uniquement pour l'espace utilisé.
|
||||
</p>
|
||||
<div className="bg-white p-3 rounded-lg">
|
||||
<p className="text-sm font-medium text-blue-900 mb-2">Caractéristiques:</p>
|
||||
<ul className="text-sm text-blue-800 space-y-1">
|
||||
<li>• Volume: généralement < 15 m³</li>
|
||||
<li>• Consolidation en entrepôt (CFS)</li>
|
||||
<li>• Facturation au m³ ou tonne</li>
|
||||
<li>• Délai transit plus long (+3-7 jours)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-50 border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-900 flex items-center gap-2">
|
||||
<span className="text-2xl">🚛</span>
|
||||
FCL - Complet
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-800 mb-4">
|
||||
<strong>Full Container Load</strong> - Vous réservez un conteneur entier, même s'il
|
||||
n'est pas plein. Vos marchandises ne sont pas mélangées.
|
||||
</p>
|
||||
<div className="bg-white p-3 rounded-lg">
|
||||
<p className="text-sm font-medium text-green-900 mb-2">Caractéristiques:</p>
|
||||
<ul className="text-sm text-green-800 space-y-1">
|
||||
<li>• Volume: 20', 40' ou 40'HC</li>
|
||||
<li>• Chargement direct porte-à-porte</li>
|
||||
<li>• Facturation par conteneur</li>
|
||||
<li>• Transit direct (plus rapide)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Comparison Table */}
|
||||
<h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Comparaison Détaillée</h2>
|
||||
<Card className="bg-white overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-gray-900">Critère</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-blue-700">LCL</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-green-700">FCL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Coût</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Payez au m³/tonne</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Prix fixe par conteneur</td>
|
||||
</tr>
|
||||
<tr className="bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Seuil de rentabilité</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">< 10-15 m³</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">> 15 m³</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Transit time</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">+3-7 jours (consolidation)</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Direct, plus rapide</td>
|
||||
</tr>
|
||||
<tr className="bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Manutention</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Multiple (risque de dommage)</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Minimale</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Sécurité</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Marchandises mélangées</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Conteneur scellé</td>
|
||||
</tr>
|
||||
<tr className="bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Flexibilité</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Haute (petits volumes)</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Moyenne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Documentation</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Plus complexe</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">Simplifiée</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Cost Calculation */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-gray-900">Calcul du Seuil de Rentabilité</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Le point où FCL devient plus économique que LCL dépend de la route et des tarifs.
|
||||
Voici un exemple de calcul:
|
||||
</p>
|
||||
<div className="bg-white p-4 rounded-lg space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-3 border rounded-lg">
|
||||
<p className="font-medium text-blue-700">LCL</p>
|
||||
<p className="text-sm text-gray-600">Tarif: 80 €/m³</p>
|
||||
<p className="text-sm text-gray-600">Pour 15 m³: 15 × 80 = <strong>1,200 €</strong></p>
|
||||
</div>
|
||||
<div className="p-3 border rounded-lg">
|
||||
<p className="font-medium text-green-700">FCL 20'</p>
|
||||
<p className="text-sm text-gray-600">Tarif conteneur: 1,100 €</p>
|
||||
<p className="text-sm text-gray-600">Capacité: ~28 m³ pour <strong>1,100 €</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 bg-amber-50 p-3 rounded">
|
||||
<strong>Conclusion:</strong> Dans cet exemple, le FCL devient rentable à partir de ~14 m³.
|
||||
Demandez toujours des cotations LCL et FCL pour comparer.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* When to Choose */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-blue-900">Choisissez LCL si:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600">✓</span>
|
||||
<span className="text-blue-800">Volume inférieur à 10-15 m³</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600">✓</span>
|
||||
<span className="text-blue-800">Expéditions régulières de petites quantités</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600">✓</span>
|
||||
<span className="text-blue-800">Test de nouveaux marchés</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600">✓</span>
|
||||
<span className="text-blue-800">Marchandises non fragiles</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600">✓</span>
|
||||
<span className="text-blue-800">Flexibilité sur les délais</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-50 border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-900">Choisissez FCL si:</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600">✓</span>
|
||||
<span className="text-green-800">Volume supérieur à 15 m³</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600">✓</span>
|
||||
<span className="text-green-800">Marchandises de valeur ou fragiles</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600">✓</span>
|
||||
<span className="text-green-800">Délais de livraison critiques</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600">✓</span>
|
||||
<span className="text-green-800">Sécurité renforcée requise</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600">✓</span>
|
||||
<span className="text-green-800">Marchandises incompatibles avec d'autres</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* LCL Process */}
|
||||
<Card className="mt-8 bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-gray-900">Processus LCL (Groupage)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
||||
{[
|
||||
{ step: '1', title: 'Collecte', desc: 'Enlèvement chez l\'expéditeur' },
|
||||
{ step: '2', title: 'CFS Origine', desc: 'Consolidation en entrepôt' },
|
||||
{ step: '3', title: 'Transport', desc: 'Acheminement maritime' },
|
||||
{ step: '4', title: 'CFS Destination', desc: 'Dégroupage' },
|
||||
{ step: '5', title: 'Livraison', desc: 'Livraison finale' },
|
||||
].map((item, index) => (
|
||||
<div key={item.step} className="flex flex-col md:flex-row items-center">
|
||||
<div className="text-center">
|
||||
<div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mb-2">
|
||||
{item.step}
|
||||
</div>
|
||||
<p className="font-medium text-sm">{item.title}</p>
|
||||
<p className="text-xs text-gray-500">{item.desc}</p>
|
||||
</div>
|
||||
{index < 4 && (
|
||||
<div className="hidden md:block text-gray-400 mx-2">→</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>Demandez toujours des cotations LCL ET FCL pour comparer</li>
|
||||
<li>En LCL, emballez solidement car vos marchandises seront manipulées plusieurs fois</li>
|
||||
<li>Vérifiez les frais additionnels (CFS, manutention) qui peuvent surprendre en LCL</li>
|
||||
<li>Un conteneur 40' n'est pas le double du prix d'un 20' - parfois 20-30% plus cher seulement</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
298
apps/frontend/app/dashboard/wiki/lettre-credit/page.tsx
Normal file
298
apps/frontend/app/dashboard/wiki/lettre-credit/page.tsx
Normal file
@ -0,0 +1,298 @@
|
||||
/**
|
||||
* Lettre de Crédit (L/C) - Wiki Page
|
||||
*
|
||||
* Instrument de paiement international sécurisé
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const typesLC = [
|
||||
{
|
||||
type: 'Irrévocable',
|
||||
description: 'Ne peut être modifiée ou annulée sans l\'accord de toutes les parties',
|
||||
usage: 'Standard depuis UCP 600',
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
type: 'Confirmée',
|
||||
description: 'Une banque (généralement dans le pays du vendeur) ajoute sa garantie',
|
||||
usage: 'Recommandé pour les pays à risque',
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
type: 'Transférable',
|
||||
description: 'Peut être transférée à un second bénéficiaire (sous-traitant)',
|
||||
usage: 'Négoce, intermédiaires',
|
||||
recommended: false,
|
||||
},
|
||||
{
|
||||
type: 'Revolving',
|
||||
description: 'Se reconstitue automatiquement après chaque utilisation',
|
||||
usage: 'Commandes répétitives',
|
||||
recommended: false,
|
||||
},
|
||||
{
|
||||
type: 'Stand-by',
|
||||
description: 'Garantie de paiement en cas de défaillance (rarement utilisée)',
|
||||
usage: 'Garantie bancaire',
|
||||
recommended: false,
|
||||
},
|
||||
{
|
||||
type: 'Red/Green Clause',
|
||||
description: 'Permet un paiement anticipé avant expédition',
|
||||
usage: 'Préfinancement du vendeur',
|
||||
recommended: false,
|
||||
},
|
||||
];
|
||||
|
||||
const parties = [
|
||||
{ role: 'Donneur d\'ordre (Applicant)', description: 'L\'acheteur/importateur qui demande l\'ouverture de la L/C' },
|
||||
{ role: 'Bénéficiaire', description: 'Le vendeur/exportateur qui recevra le paiement' },
|
||||
{ role: 'Banque émettrice', description: 'Banque de l\'acheteur qui émet la L/C' },
|
||||
{ role: 'Banque notificatrice', description: 'Banque du vendeur qui notifie la L/C (sans engagement)' },
|
||||
{ role: 'Banque confirmatrice', description: 'Banque qui ajoute sa propre garantie (optionnel)' },
|
||||
];
|
||||
|
||||
const documentsTypiques = [
|
||||
{ document: 'Facture commerciale', obligatoire: true },
|
||||
{ document: 'Bill of Lading (connaissement)', obligatoire: true },
|
||||
{ document: 'Liste de colisage', obligatoire: true },
|
||||
{ document: 'Certificat d\'origine', obligatoire: false },
|
||||
{ document: 'Certificat d\'assurance', obligatoire: false },
|
||||
{ document: 'Certificat d\'inspection', obligatoire: false },
|
||||
{ document: 'Certificat phytosanitaire', obligatoire: false },
|
||||
];
|
||||
|
||||
const erreursFrequentes = [
|
||||
'Nom du bénéficiaire mal orthographié',
|
||||
'Dates d\'expédition ou d\'expiration dépassées',
|
||||
'Description des marchandises ne correspondant pas exactement',
|
||||
'Documents présentés en retard (au-delà du délai de présentation)',
|
||||
'Incoterm incohérent avec les documents',
|
||||
'Montant des documents différent de la L/C',
|
||||
'Connaissement avec réserves (claused B/L)',
|
||||
];
|
||||
|
||||
export default function LettreCreditPage() {
|
||||
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">Lettre de Crédit (L/C)</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
La lettre de crédit documentaire (L/C ou Documentary Credit) est un engagement de paiement
|
||||
émis par une banque pour le compte de l'acheteur, garantissant au vendeur d'être payé
|
||||
contre présentation de documents conformes. Elle est régie par les Règles UCP 600 de la CCI.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* How it works */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">🔄 Fonctionnement Simplifié</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-2">
|
||||
{[
|
||||
{ step: '1', title: 'Demande', desc: 'Acheteur demande l\'ouverture à sa banque' },
|
||||
{ step: '2', title: 'Émission', desc: 'Banque émettrice envoie la L/C' },
|
||||
{ step: '3', title: 'Notification', desc: 'Banque du vendeur notifie la L/C' },
|
||||
{ step: '4', title: 'Expédition', desc: 'Vendeur expédie et présente les documents' },
|
||||
{ step: '5', title: 'Paiement', desc: 'Banque paie après vérification' },
|
||||
].map((item) => (
|
||||
<div key={item.step} className="text-center">
|
||||
<div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto font-bold">
|
||||
{item.step}
|
||||
</div>
|
||||
<p className="font-medium text-blue-900 mt-2">{item.title}</p>
|
||||
<p className="text-xs text-blue-700">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Parties */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">👥 Parties Impliquées</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
{parties.map((p) => (
|
||||
<div key={p.role} className="flex items-start gap-3 pb-4 border-b last:border-0">
|
||||
<span className="mt-1 w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{p.role}</h4>
|
||||
<p className="text-sm text-gray-600">{p.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Types */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Types de Lettres de Crédit</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{typesLC.map((lc) => (
|
||||
<Card key={lc.type} className={`bg-white ${lc.recommended ? 'border-green-300 border-2' : ''}`}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span className="text-lg">{lc.type}</span>
|
||||
{lc.recommended && (
|
||||
<span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 text-sm">{lc.description}</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Usage : {lc.usage}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Documents */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📄 Documents Typiquement Requis</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{documentsTypiques.map((doc) => (
|
||||
<div key={doc.document} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<span className={`px-2 py-1 text-xs rounded ${doc.obligatoire ? 'bg-red-100 text-red-700' : 'bg-gray-200 text-gray-700'}`}>
|
||||
{doc.obligatoire ? 'Toujours' : 'Selon L/C'}
|
||||
</span>
|
||||
<span className="text-gray-900">{doc.document}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Key Dates */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">📅 Dates Clés à Surveiller</h3>
|
||||
<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">Date d'expédition</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Date limite pour expédier les marchandises (Latest Shipment Date)
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Délai de présentation</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Généralement 21 jours après expédition pour présenter les documents
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Date de validité</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Date limite absolue de la L/C (Expiry Date)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Costs */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">💰 Coûts Typiques</h3>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-medium">Côté Acheteur</h4>
|
||||
<ul className="text-gray-600 mt-2 space-y-1">
|
||||
<li>• Commission d'ouverture : 0.1% - 0.5%</li>
|
||||
<li>• Frais de modification : fixes</li>
|
||||
<li>• Commission d'engagement : si non utilisée</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">Côté Vendeur</h4>
|
||||
<ul className="text-gray-600 mt-2 space-y-1">
|
||||
<li>• Frais de notification : fixes</li>
|
||||
<li>• Commission de confirmation : 0.1% - 2%+</li>
|
||||
<li>• Frais de négociation : variable</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Note : Les frais de confirmation peuvent être très élevés pour les pays à risque.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Common Errors */}
|
||||
<Card className="mt-8 bg-red-50 border-red-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-red-900 mb-3">⚠️ Erreurs Fréquentes (Réserves)</h3>
|
||||
<p className="text-red-800 mb-3">
|
||||
Ces erreurs entraînent des "réserves" de la banque et peuvent bloquer le paiement :
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-red-700">
|
||||
{erreursFrequentes.map((err) => (
|
||||
<li key={err}>{err}</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* UCP 600 */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">📜 Règles UCP 600</h3>
|
||||
<p className="text-gray-600">
|
||||
Les Règles et Usances Uniformes (UCP 600) de la Chambre de Commerce Internationale (CCI)
|
||||
régissent les lettres de crédit documentaires depuis 2007. Points clés :
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-gray-700 mt-3">
|
||||
<li>Délai standard d'examen des documents : 5 jours ouvrés bancaires</li>
|
||||
<li>La L/C est irrévocable par défaut (même si non mentionné)</li>
|
||||
<li>Les banques examinent les documents, pas les marchandises</li>
|
||||
<li>Les documents doivent être "conformes en apparence"</li>
|
||||
</ul>
|
||||
</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érifier minutieusement les termes de la L/C dès réception</li>
|
||||
<li>Demander des modifications AVANT expédition si nécessaire</li>
|
||||
<li>Préparer les documents exactement comme demandé (virgules, orthographe)</li>
|
||||
<li>Respecter les délais avec marge de sécurité</li>
|
||||
<li>Travailler avec un transitaire expérimenté en documentaire</li>
|
||||
<li>Conserver des copies de tous les documents</li>
|
||||
<li>Envisager une L/C confirmée pour les nouveaux clients ou pays risqués</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
apps/frontend/app/dashboard/wiki/page.tsx
Normal file
149
apps/frontend/app/dashboard/wiki/page.tsx
Normal file
@ -0,0 +1,149 @@
|
||||
/**
|
||||
* Wiki Page - Maritime Import/Export Knowledge Base
|
||||
*
|
||||
* Main page displaying cards for all wiki topics
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
|
||||
|
||||
const wikiTopics = [
|
||||
{
|
||||
title: 'Incoterms 2020',
|
||||
description: 'Les règles internationales pour l\'interprétation des termes commerciaux',
|
||||
icon: '📜',
|
||||
href: '/dashboard/wiki/incoterms',
|
||||
tags: ['FOB', 'CIF', 'EXW', 'DDP'],
|
||||
},
|
||||
{
|
||||
title: 'Documents de Transport',
|
||||
description: 'Les documents essentiels pour le transport maritime',
|
||||
icon: '📋',
|
||||
href: '/dashboard/wiki/documents-transport',
|
||||
tags: ['B/L', 'Sea Waybill', 'Manifest'],
|
||||
},
|
||||
{
|
||||
title: 'Conteneurs et Types de Cargo',
|
||||
description: 'Guide complet des types de conteneurs maritimes',
|
||||
icon: '📦',
|
||||
href: '/dashboard/wiki/conteneurs',
|
||||
tags: ['20\'', '40\'', 'Reefer', 'Open Top'],
|
||||
},
|
||||
{
|
||||
title: 'LCL vs FCL',
|
||||
description: 'Différences entre groupage et conteneur complet',
|
||||
icon: '⚖️',
|
||||
href: '/dashboard/wiki/lcl-vs-fcl',
|
||||
tags: ['Groupage', 'Complet', 'Coûts'],
|
||||
},
|
||||
{
|
||||
title: 'Procédures Douanières',
|
||||
description: 'Guide des formalités douanières import/export',
|
||||
icon: '🛃',
|
||||
href: '/dashboard/wiki/douanes',
|
||||
tags: ['Déclaration', 'Tarifs', 'Régimes'],
|
||||
},
|
||||
{
|
||||
title: 'Assurance Maritime',
|
||||
description: 'Protection des marchandises en transit',
|
||||
icon: '🛡️',
|
||||
href: '/dashboard/wiki/assurance',
|
||||
tags: ['ICC A', 'ICC B', 'ICC C'],
|
||||
},
|
||||
{
|
||||
title: 'Calcul du Fret Maritime',
|
||||
description: 'Comment sont calculés les coûts de transport',
|
||||
icon: '🧮',
|
||||
href: '/dashboard/wiki/calcul-fret',
|
||||
tags: ['CBM', 'THC', 'BAF', 'CAF'],
|
||||
},
|
||||
{
|
||||
title: 'Ports et Routes Maritimes',
|
||||
description: 'Les principales routes commerciales mondiales',
|
||||
icon: '🌍',
|
||||
href: '/dashboard/wiki/ports-routes',
|
||||
tags: ['Hub', 'Détroits', 'Canaux'],
|
||||
},
|
||||
{
|
||||
title: 'VGM (Verified Gross Mass)',
|
||||
description: 'Obligation de pesée des conteneurs (SOLAS)',
|
||||
icon: '⚓',
|
||||
href: '/dashboard/wiki/vgm',
|
||||
tags: ['SOLAS', 'Pesée', 'Certification'],
|
||||
},
|
||||
{
|
||||
title: 'Marchandises Dangereuses (IMDG)',
|
||||
description: 'Transport de matières dangereuses par mer',
|
||||
icon: '⚠️',
|
||||
href: '/dashboard/wiki/imdg',
|
||||
tags: ['Classes', 'Étiquetage', 'Sécurité'],
|
||||
},
|
||||
{
|
||||
title: 'Lettre de Crédit (L/C)',
|
||||
description: 'Instrument de paiement international sécurisé',
|
||||
icon: '💳',
|
||||
href: '/dashboard/wiki/lettre-credit',
|
||||
tags: ['Banque', 'Paiement', 'Sécurité'],
|
||||
},
|
||||
{
|
||||
title: 'Transit Time et Délais',
|
||||
description: 'Comprendre les délais en transport maritime',
|
||||
icon: '⏱️',
|
||||
href: '/dashboard/wiki/transit-time',
|
||||
tags: ['Cut-off', 'Free time', 'Demurrage'],
|
||||
},
|
||||
];
|
||||
|
||||
export default function WikiPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Wiki Maritime</h1>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Base de connaissances sur l'import/export maritime. Cliquez sur un sujet pour en savoir plus.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{wikiTopics.map((topic) => (
|
||||
<Link key={topic.href} href={topic.href} className="block group">
|
||||
<Card className="h-full transition-all duration-200 hover:shadow-lg hover:border-blue-300 bg-white">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-4xl">{topic.icon}</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl mt-3 group-hover:text-blue-600 transition-colors">
|
||||
{topic.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-gray-600">
|
||||
{topic.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{topic.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer info */}
|
||||
<div className="mt-8 p-4 bg-blue-50 rounded-lg">
|
||||
<p className="text-sm text-blue-800">
|
||||
<span className="font-semibold">Besoin d'aide ?</span> Ces guides sont régulièrement mis à jour avec les dernières réglementations et bonnes pratiques du secteur maritime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
301
apps/frontend/app/dashboard/wiki/ports-routes/page.tsx
Normal file
301
apps/frontend/app/dashboard/wiki/ports-routes/page.tsx
Normal file
@ -0,0 +1,301 @@
|
||||
/**
|
||||
* Ports et Routes Maritimes - Wiki Page
|
||||
*
|
||||
* Les principales routes commerciales mondiales
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const majorRoutes = [
|
||||
{
|
||||
name: 'Asie - Europe',
|
||||
description: 'La plus importante route commerciale mondiale',
|
||||
transitTime: '28-35 jours',
|
||||
volume: '~24 millions TEU/an',
|
||||
keyPorts: ['Shanghai', 'Singapour', 'Rotterdam', 'Hambourg', 'Anvers'],
|
||||
passages: ['Canal de Suez', 'Détroit de Malacca'],
|
||||
},
|
||||
{
|
||||
name: 'Asie - Amérique du Nord (Pacifique)',
|
||||
description: 'Deuxième route la plus importante',
|
||||
transitTime: '12-18 jours',
|
||||
volume: '~26 millions TEU/an',
|
||||
keyPorts: ['Shanghai', 'Busan', 'Los Angeles', 'Long Beach', 'Seattle'],
|
||||
passages: ['Traversée Pacifique directe'],
|
||||
},
|
||||
{
|
||||
name: 'Europe - Amérique du Nord (Atlantique)',
|
||||
description: 'Route transatlantique historique',
|
||||
transitTime: '8-12 jours',
|
||||
volume: '~8 millions TEU/an',
|
||||
keyPorts: ['Rotterdam', 'Anvers', 'New York', 'Savannah', 'Charleston'],
|
||||
passages: ['Traversée Atlantique directe'],
|
||||
},
|
||||
{
|
||||
name: 'Asie - Méditerranée',
|
||||
description: 'Variante de la route Asie-Europe via Med',
|
||||
transitTime: '18-25 jours',
|
||||
volume: '~6 millions TEU/an',
|
||||
keyPorts: ['Shanghai', 'Pirée', 'Gênes', 'Barcelone', 'Tanger Med'],
|
||||
passages: ['Canal de Suez', 'Détroit de Gibraltar'],
|
||||
},
|
||||
];
|
||||
|
||||
const strategicPassages = [
|
||||
{
|
||||
name: 'Canal de Suez',
|
||||
location: 'Égypte',
|
||||
opened: '1869',
|
||||
length: '193.3 km',
|
||||
transitTime: '12-16 heures',
|
||||
traffic: '~20,000 navires/an',
|
||||
importance: 'Relie la Méditerranée à la Mer Rouge. Raccourcit de 7,000 km la route Europe-Asie.',
|
||||
},
|
||||
{
|
||||
name: 'Canal de Panama',
|
||||
location: 'Panama',
|
||||
opened: '1914',
|
||||
length: '82 km',
|
||||
transitTime: '8-10 heures',
|
||||
traffic: '~14,000 navires/an',
|
||||
importance: 'Relie l\'Atlantique au Pacifique. Crucial pour le commerce Asie-Côte Est USA.',
|
||||
},
|
||||
{
|
||||
name: 'Détroit de Malacca',
|
||||
location: 'Malaisie/Indonésie',
|
||||
opened: 'Naturel',
|
||||
length: '800 km',
|
||||
transitTime: '12 heures',
|
||||
traffic: '~90,000 navires/an',
|
||||
importance: 'Point de passage obligé entre Océan Indien et Mer de Chine. 25% du commerce mondial.',
|
||||
},
|
||||
{
|
||||
name: 'Détroit de Gibraltar',
|
||||
location: 'Espagne/Maroc',
|
||||
opened: 'Naturel',
|
||||
length: '60 km',
|
||||
transitTime: '2-3 heures',
|
||||
traffic: '~100,000 navires/an',
|
||||
importance: 'Entrée en Méditerranée depuis l\'Atlantique.',
|
||||
},
|
||||
];
|
||||
|
||||
const majorPorts = [
|
||||
{ name: 'Shanghai', country: 'Chine', volume: '47.0', rank: 1 },
|
||||
{ name: 'Singapour', country: 'Singapour', volume: '37.2', rank: 2 },
|
||||
{ name: 'Ningbo-Zhoushan', country: 'Chine', volume: '33.0', rank: 3 },
|
||||
{ name: 'Shenzhen', country: 'Chine', volume: '30.0', rank: 4 },
|
||||
{ name: 'Guangzhou', country: 'Chine', volume: '24.2', rank: 5 },
|
||||
{ name: 'Busan', country: 'Corée du Sud', volume: '22.7', rank: 6 },
|
||||
{ name: 'Qingdao', country: 'Chine', volume: '22.0', rank: 7 },
|
||||
{ name: 'Rotterdam', country: 'Pays-Bas', volume: '14.5', rank: 8 },
|
||||
{ name: 'Dubai/Jebel Ali', country: 'EAU', volume: '14.1', rank: 9 },
|
||||
{ name: 'Tianjin', country: 'Chine', volume: '14.0', rank: 10 },
|
||||
];
|
||||
|
||||
export default function PortsRoutesPage() {
|
||||
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">Ports et Routes Maritimes</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Le transport maritime assure plus de 80% du commerce mondial en volume.
|
||||
Comprendre les grandes routes et les ports stratégiques est essentiel pour optimiser sa supply chain.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Stats */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">📊 Chiffres Clés du Maritime Mondial</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-blue-700">80%</p>
|
||||
<p className="text-sm text-blue-600">du commerce mondial (volume)</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-blue-700">~800M</p>
|
||||
<p className="text-sm text-blue-600">TEU transportés/an</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-blue-700">~60,000</p>
|
||||
<p className="text-sm text-blue-600">navires marchands</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-blue-700">~14B</p>
|
||||
<p className="text-sm text-blue-600">tonnes de marchandises/an</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Major Routes */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">🛳️ Routes Commerciales Majeures</h2>
|
||||
<div className="space-y-4">
|
||||
{majorRoutes.map((route) => (
|
||||
<Card key={route.name} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg">{route.name}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-3">{route.description}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Transit time:</span>
|
||||
<p className="font-medium">{route.transitTime}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Volume annuel:</span>
|
||||
<p className="font-medium">{route.volume}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Ports clés:</span>
|
||||
<p className="font-medium">{route.keyPorts.slice(0, 3).join(', ')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Passages:</span>
|
||||
<p className="font-medium">{route.passages.join(', ')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Strategic Passages */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">⚓ Passages Stratégiques</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{strategicPassages.map((passage) => (
|
||||
<Card key={passage.name} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<span className="text-lg">{passage.name}</span>
|
||||
<span className="text-xs bg-gray-100 px-2 py-1 rounded">{passage.location}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 text-sm mb-3">{passage.importance}</p>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="bg-gray-50 p-2 rounded">
|
||||
<span className="text-gray-500">Longueur:</span>
|
||||
<p className="font-medium">{passage.length}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded">
|
||||
<span className="text-gray-500">Transit:</span>
|
||||
<p className="font-medium">{passage.transitTime}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded">
|
||||
<span className="text-gray-500">Trafic:</span>
|
||||
<p className="font-medium">{passage.traffic}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded">
|
||||
<span className="text-gray-500">Ouverture:</span>
|
||||
<p className="font-medium">{passage.opened}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Ports */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">🏆 Top 10 Ports Mondiaux (TEU)</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">Rang</th>
|
||||
<th className="text-left py-2 font-medium">Port</th>
|
||||
<th className="text-left py-2 font-medium">Pays</th>
|
||||
<th className="text-right py-2 font-medium">Volume (M TEU)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{majorPorts.map((port) => (
|
||||
<tr key={port.name} className="border-b last:border-0 hover:bg-gray-50">
|
||||
<td className="py-3">
|
||||
<span className={`inline-block w-6 h-6 text-center rounded-full text-white text-xs leading-6 ${
|
||||
port.rank <= 3 ? 'bg-yellow-500' : 'bg-gray-400'
|
||||
}`}>
|
||||
{port.rank}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 font-medium text-gray-900">{port.name}</td>
|
||||
<td className="py-3 text-gray-600">{port.country}</td>
|
||||
<td className="py-3 text-right font-mono">{port.volume}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-3">Source: World Shipping Council, données approximatives</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Hub Ports Info */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">🔄 Ports Hub vs Ports Régionaux</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Ports Hub (Transbordement)</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Grands ports où les conteneurs sont transférés entre navires mères et feeders.
|
||||
Ex: Singapour, Tanger Med, Algésiras.
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Avantage: Desserte mondiale, fréquence élevée</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Ports Régionaux (Gateway)</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Ports desservant directement un hinterland économique.
|
||||
Ex: Le Havre, Marseille, Hambourg.
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Avantage: Proximité du marché final, moins de manutention</p>
|
||||
</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>Privilégiez les routes directes pour réduire les délais et risques</li>
|
||||
<li>Anticipez les congestions portuaires (Los Angeles, Rotterdam en haute saison)</li>
|
||||
<li>Surveillez les perturbations géopolitiques (Canal de Suez, Détroit d'Ormuz)</li>
|
||||
<li>Comparez les transbordements vs les services directs selon vos priorités (coût vs délai)</li>
|
||||
<li>Vérifiez les connexions ferroviaires/fluviales depuis les ports</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
354
apps/frontend/app/dashboard/wiki/transit-time/page.tsx
Normal file
354
apps/frontend/app/dashboard/wiki/transit-time/page.tsx
Normal file
@ -0,0 +1,354 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
268
apps/frontend/app/dashboard/wiki/vgm/page.tsx
Normal file
268
apps/frontend/app/dashboard/wiki/vgm/page.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
/**
|
||||
* VGM (Verified Gross Mass) - Wiki Page
|
||||
*
|
||||
* Obligation de pesée des conteneurs (SOLAS)
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
|
||||
const methodesPesee = [
|
||||
{
|
||||
method: 'Méthode 1',
|
||||
name: 'Pesée du conteneur complet',
|
||||
description: 'Pesée du conteneur chargé et scellé sur une balance étalonnée.',
|
||||
process: [
|
||||
'Empotage du conteneur',
|
||||
'Scellage du conteneur',
|
||||
'Pesée sur pont-bascule certifié',
|
||||
'Transmission du VGM',
|
||||
],
|
||||
advantages: ['Plus précis', 'Moins de calculs'],
|
||||
disadvantages: ['Nécessite un pont-bascule', 'Conteneur déjà scellé'],
|
||||
},
|
||||
{
|
||||
method: 'Méthode 2',
|
||||
name: 'Calcul par addition',
|
||||
description: 'Addition de la tare du conteneur et du poids de tous les éléments chargés.',
|
||||
process: [
|
||||
'Pesée de chaque colis individuellement',
|
||||
'Addition de tous les poids',
|
||||
'Ajout des matériaux d\'arrimage',
|
||||
'Addition de la tare conteneur',
|
||||
],
|
||||
advantages: ['Pas besoin de pont-bascule', 'Peut être fait progressivement'],
|
||||
disadvantages: ['Plus complexe', 'Risque d\'erreur cumulative'],
|
||||
},
|
||||
];
|
||||
|
||||
const sanctions = [
|
||||
{ region: 'France', sanction: 'Amende jusqu\'à 7,500€ et refus d\'embarquement' },
|
||||
{ region: 'USA', sanction: 'Refus d\'embarquement, amende par la garde côtière' },
|
||||
{ region: 'Chine', sanction: 'Refus d\'embarquement, pénalités portuaires' },
|
||||
{ region: 'Union Européenne', sanction: 'Application variable selon pays membre' },
|
||||
];
|
||||
|
||||
const elementsVGM = [
|
||||
{ element: 'Tare conteneur', description: 'Poids à vide du conteneur (inscrit sur la porte)', example: '2,200 kg (20\')' },
|
||||
{ element: 'Marchandises', description: 'Poids brut de toutes les marchandises', example: 'Variable' },
|
||||
{ element: 'Emballages', description: 'Palettes, cartons, film plastique...', example: '200-500 kg' },
|
||||
{ element: 'Matériaux d\'arrimage', description: 'Bois de calage, sangles, airbags...', example: '50-200 kg' },
|
||||
];
|
||||
|
||||
export default function VGMPage() {
|
||||
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">VGM (Verified Gross Mass)</h1>
|
||||
</div>
|
||||
<p className="mt-3 text-gray-600 max-w-3xl">
|
||||
Depuis le 1er juillet 2016, la Convention SOLAS (Safety of Life at Sea) exige que le poids
|
||||
vérifié de tout conteneur soit transmis avant embarquement. Cette obligation vise à prévenir
|
||||
les accidents liés aux conteneurs mal déclarés.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Why VGM */}
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Pourquoi le VGM ?</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
|
||||
<div>
|
||||
<h4 className="font-medium">🛡️ Sécurité</h4>
|
||||
<p className="text-sm">Les conteneurs mal déclarés causent des accidents graves (chute de conteneurs, navires instables).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">⚖️ Stabilité du navire</h4>
|
||||
<p className="text-sm">Le capitaine doit connaître le poids exact pour calculer le plan de chargement.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">🏗️ Équipements portuaires</h4>
|
||||
<p className="text-sm">Les grues et portiques sont dimensionnés pour des charges maximales.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">🚛 Transport terrestre</h4>
|
||||
<p className="text-sm">Évite les surcharges sur les camions et wagons de pré/post-acheminement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* VGM Components */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">📋 Composants du VGM</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-gray-50 p-4 rounded-lg border mb-4">
|
||||
<p className="text-center font-mono text-lg">
|
||||
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">VGM</span> = Tare + Marchandises + Emballages + Arrimage
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{elementsVGM.map((item) => (
|
||||
<div key={item.element} className="flex items-center justify-between py-3 border-b last:border-0">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{item.element}</h4>
|
||||
<p className="text-sm text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
<span className="text-sm font-mono bg-gray-100 px-3 py-1 rounded">{item.example}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Methods */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">🔬 Méthodes de Détermination</h2>
|
||||
<div className="space-y-4">
|
||||
{methodesPesee.map((method) => (
|
||||
<Card key={method.method} className="bg-white">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-3">
|
||||
<span className="px-3 py-1 bg-green-600 text-white rounded-md">
|
||||
{method.method}
|
||||
</span>
|
||||
<span className="text-lg">{method.name}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-4">{method.description}</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-700 mb-2">Processus</h4>
|
||||
<ol className="list-decimal list-inside text-sm text-gray-600 space-y-1">
|
||||
{method.process.map((step, idx) => (
|
||||
<li key={idx}>{step}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-green-700 mb-2">✓ Avantages</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
{method.advantages.map((adv) => (
|
||||
<li key={adv} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||
{adv}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-red-700 mb-2">✗ Inconvénients</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
{method.disadvantages.map((dis) => (
|
||||
<li key={dis} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
|
||||
{dis}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Responsibility */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">👤 Responsabilités</h3>
|
||||
<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">Expéditeur (Shipper)</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Responsable légal du VGM. Doit obtenir, certifier et transmettre le poids vérifié.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Transitaire</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Peut transmettre le VGM pour le compte de l'expéditeur. Reste un intermédiaire.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<h4 className="font-medium text-gray-900">Compagnie maritime</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Ne peut embarquer un conteneur sans VGM. Peut refuser un VGM manifestement erroné.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tolerances */}
|
||||
<Card className="mt-8 bg-gray-50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-3">📏 Tolérances</h3>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<p className="text-gray-600 mb-3">
|
||||
Les tolérances varient selon les compagnies maritimes et les ports, mais généralement :
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Tolérance typique :</span>
|
||||
<p className="text-gray-600">± 5% du poids déclaré ou ± 500 kg (le plus petit des deux)</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Conséquence si dépassement :</span>
|
||||
<p className="text-gray-600">Nouvelle pesée à la charge de l'expéditeur, retard possible</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sanctions */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">⚠️ Sanctions par Région</h2>
|
||||
<Card className="bg-white">
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-3">
|
||||
{sanctions.map((s) => (
|
||||
<div key={s.region} className="flex items-center justify-between py-3 border-b last:border-0">
|
||||
<span className="font-medium text-gray-900">{s.region}</span>
|
||||
<span className="text-sm text-red-600">{s.sanction}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tips */}
|
||||
<Card className="mt-8 bg-amber-50 border-amber-200">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold text-amber-900 mb-3">💡 Bonnes Pratiques</h3>
|
||||
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
||||
<li>Transmettre le VGM au moins 24-48h avant le cut-off</li>
|
||||
<li>Utiliser des balances étalonnées et certifiées</li>
|
||||
<li>Conserver les preuves de pesée pendant 3 ans minimum</li>
|
||||
<li>Vérifier les exigences spécifiques de chaque compagnie maritime</li>
|
||||
<li>Former le personnel aux procédures VGM</li>
|
||||
<li>Ne jamais sous-estimer le poids intentionnellement</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user