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