160 lines
4.4 KiB
TypeScript
160 lines
4.4 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
|
|
import {
|
|
ScrollText,
|
|
ClipboardList,
|
|
Package,
|
|
Scale,
|
|
ShieldCheck,
|
|
Shield,
|
|
Calculator,
|
|
Globe,
|
|
Anchor,
|
|
AlertTriangle,
|
|
CreditCard,
|
|
Timer,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
|
|
type TopicKey =
|
|
| 'incoterms'
|
|
| 'documents'
|
|
| 'containers'
|
|
| 'lclFcl'
|
|
| 'customs'
|
|
| 'insurance'
|
|
| 'freight'
|
|
| 'ports'
|
|
| 'vgm'
|
|
| 'imdg'
|
|
| 'letterOfCredit'
|
|
| 'transitTime';
|
|
|
|
interface WikiTopic {
|
|
key: TopicKey;
|
|
icon: LucideIcon;
|
|
href: string;
|
|
tags: string[];
|
|
}
|
|
|
|
const wikiTopics: WikiTopic[] = [
|
|
{
|
|
key: 'incoterms',
|
|
icon: ScrollText,
|
|
href: '/dashboard/wiki/incoterms',
|
|
tags: ['FOB', 'CIF', 'EXW', 'DDP'],
|
|
},
|
|
{
|
|
key: 'documents',
|
|
icon: ClipboardList,
|
|
href: '/dashboard/wiki/documents-transport',
|
|
tags: ['B/L', 'Sea Waybill', 'Manifest'],
|
|
},
|
|
{
|
|
key: 'containers',
|
|
icon: Package,
|
|
href: '/dashboard/wiki/conteneurs',
|
|
tags: ["20'", "40'", 'Reefer', 'Open Top'],
|
|
},
|
|
{ key: 'lclFcl', icon: Scale, href: '/dashboard/wiki/lcl-vs-fcl', tags: ['LCL', 'FCL'] },
|
|
{
|
|
key: 'customs',
|
|
icon: ShieldCheck,
|
|
href: '/dashboard/wiki/douanes',
|
|
tags: ['HS Code', 'EUR.1', 'AEO'],
|
|
},
|
|
{
|
|
key: 'insurance',
|
|
icon: Shield,
|
|
href: '/dashboard/wiki/assurance',
|
|
tags: ['ICC A', 'ICC B', 'ICC C'],
|
|
},
|
|
{
|
|
key: 'freight',
|
|
icon: Calculator,
|
|
href: '/dashboard/wiki/calcul-fret',
|
|
tags: ['CBM', 'THC', 'BAF', 'CAF'],
|
|
},
|
|
{
|
|
key: 'ports',
|
|
icon: Globe,
|
|
href: '/dashboard/wiki/ports-routes',
|
|
tags: ['Hub', 'Suez', 'Panama'],
|
|
},
|
|
{ key: 'vgm', icon: Anchor, href: '/dashboard/wiki/vgm', tags: ['SOLAS', 'VGM'] },
|
|
{ key: 'imdg', icon: AlertTriangle, href: '/dashboard/wiki/imdg', tags: ['IMDG', 'MSDS', 'DG'] },
|
|
{
|
|
key: 'letterOfCredit',
|
|
icon: CreditCard,
|
|
href: '/dashboard/wiki/lettre-credit',
|
|
tags: ['L/C', 'SWIFT', 'UCP 600'],
|
|
},
|
|
{
|
|
key: 'transitTime',
|
|
icon: Timer,
|
|
href: '/dashboard/wiki/transit-time',
|
|
tags: ['Cut-off', 'Free time', 'Demurrage'],
|
|
},
|
|
];
|
|
|
|
export default async function WikiPage() {
|
|
const t = await getTranslations('dashboard.wiki');
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
|
|
<p className="mt-2 text-gray-600">{t('description')}</p>
|
|
</div>
|
|
|
|
{/* Cards Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{wikiTopics.map(topic => {
|
|
const IconComponent = topic.icon;
|
|
return (
|
|
<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">
|
|
<div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<IconComponent className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<CardTitle className="text-xl mt-3 group-hover:text-blue-600 transition-colors">
|
|
{t(`topics.${topic.key}.title` as any)}
|
|
</CardTitle>
|
|
<CardDescription className="text-gray-600">
|
|
{t(`topics.${topic.key}.description` as any)}
|
|
</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">{t('needHelp')} </span>
|
|
{t('helpText')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|