300 lines
13 KiB
TypeScript
300 lines
13 KiB
TypeScript
/**
|
|
* 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';
|
|
import { CreditCard, RefreshCw, Users, ClipboardList, FileText, Calendar, DollarSign, ScrollText, Lightbulb, AlertTriangle } from 'lucide-react';
|
|
|
|
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">
|
|
<CreditCard className="w-10 h-10 text-blue-600" />
|
|
<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 flex items-center gap-2"><RefreshCw className="w-5 h-5" /> 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 flex items-center gap-2"><Users className="w-5 h-5" /> 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 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> 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 flex items-center gap-2"><FileText className="w-5 h-5" /> 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 flex items-center gap-2"><Calendar className="w-5 h-5" /> 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 flex items-center gap-2"><DollarSign className="w-5 h-5" /> 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 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> 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 flex items-center gap-2"><ScrollText className="w-5 h-5" /> 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 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> 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>
|
|
);
|
|
}
|