313 lines
13 KiB
TypeScript
313 lines
13 KiB
TypeScript
/**
|
||
* 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>
|
||
);
|
||
}
|