xpeditis2.0/apps/frontend/app/dashboard/wiki/vgm/page.tsx
2026-01-19 10:48:19 +01:00

269 lines
12 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 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&apos;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&apos;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>
);
}