xpeditis2.0/apps/frontend/app/[locale]/dashboard/wiki/douanes/page.tsx
2026-08-13 12:26:46 +02:00

96 lines
3.7 KiB
TypeScript

import { getTranslations } from 'next-intl/server';
import { Card, CardContent } from '@/components/ui/card';
import { ShieldCheck } from 'lucide-react';
import { WikiBackLink } from '@/components/wiki/WikiBackLink';
export default async function DouanesPage() {
const t = await getTranslations('dashboard.wikiPages');
const regimes = t.raw('douanes.regimes') as Array<{
code: string;
name: string;
description: string;
}>;
const documents = t.raw('douanes.documents') as Array<{
name: string;
mandatory: boolean;
description: string;
}>;
const duties = t.raw('douanes.duties') as Array<{ type: string; description: string }>;
return (
<div className="space-y-6">
<WikiBackLink />
<div className="mb-8">
<div className="flex items-center gap-3">
<ShieldCheck className="w-10 h-10 text-brand-navy" />
<h1 className="text-3xl font-bold text-brand-navy">{t('douanes.title')}</h1>
</div>
<p className="mt-3 text-neutral-600 max-w-3xl">{t('douanes.description')}</p>
</div>
<div className="mt-8">
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('douanes.regimesTitle')}</h2>
<div className="overflow-x-auto">
<table className="w-full text-sm bg-white rounded-lg border">
<thead className="bg-neutral-50">
<tr>
<th className="text-left p-3 font-medium">{t('douanes.colCode')}</th>
<th className="text-left p-3 font-medium">{t('douanes.colName')}</th>
<th className="text-left p-3 font-medium">{t('douanes.colDescription')}</th>
</tr>
</thead>
<tbody>
{regimes.map(r => (
<tr key={r.code} className="border-t hover:bg-neutral-50">
<td className="p-3 font-mono font-bold text-brand-navy">{r.code}</td>
<td className="p-3 font-medium">{r.name}</td>
<td className="p-3 text-neutral-600">{r.description}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="mt-8">
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('douanes.documentsTitle')}</h2>
<div className="space-y-3">
{documents.map(doc => (
<Card key={doc.name} className="bg-white">
<CardContent className="py-3">
<div className="flex items-center gap-3">
<span
className={`px-2 py-0.5 text-xs rounded font-medium ${doc.mandatory ? 'bg-red-100 text-red-700' : 'bg-neutral-100 text-neutral-600'}`}
>
{doc.mandatory ? t('mandatoryLabel') : t('optionalLabel')}
</span>
<div>
<span className="font-medium text-brand-navy">{doc.name}</span>
<span className="text-sm text-neutral-500 ml-2">— {doc.description}</span>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
<div className="mt-8">
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('douanes.dutiesTitle')}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{duties.map(d => (
<Card key={d.type} className="bg-white">
<CardContent className="pt-4">
<h4 className="font-semibold text-brand-navy mb-2">{d.type}</h4>
<p className="text-sm text-neutral-600">{d.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</div>
);
}