106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Calculator } from 'lucide-react';
|
|
import { WikiBackLink } from '@/components/wiki/WikiBackLink';
|
|
|
|
export default async function CalculFretPage() {
|
|
const t = await getTranslations('dashboard.wikiPages');
|
|
|
|
const surcharges = t.raw('calculFret.surcharges') as Array<{
|
|
code: string;
|
|
name: string;
|
|
description: string;
|
|
variation: string;
|
|
}>;
|
|
const additionalCosts = t.raw('calculFret.additionalCosts') as Array<{
|
|
name: string;
|
|
description: string;
|
|
typical: string;
|
|
}>;
|
|
const exampleItems = t.raw('calculFret.exampleItems') as Array<{ item: string; amount: string }>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<WikiBackLink />
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Calculator className="w-10 h-10 text-brand-navy" />
|
|
<h1 className="text-3xl font-bold text-brand-navy">{t('calculFret.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-neutral-600 max-w-3xl">{t('calculFret.description')}</p>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('calculFret.surchargesTitle')}</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('calculFret.colCode')}</th>
|
|
<th className="text-left p-3 font-medium">{t('calculFret.colName')}</th>
|
|
<th className="text-left p-3 font-medium">{t('calculFret.colDescription')}</th>
|
|
<th className="text-left p-3 font-medium">{t('calculFret.colVariation')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{surcharges.map(s => (
|
|
<tr key={s.code} className="border-t hover:bg-neutral-50">
|
|
<td className="p-3 font-mono font-bold text-brand-navy">{s.code}</td>
|
|
<td className="p-3 font-medium">{s.name}</td>
|
|
<td className="p-3 text-neutral-600">{s.description}</td>
|
|
<td className="p-3 text-neutral-500 text-xs">{s.variation}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">
|
|
{t('calculFret.additionalCostsTitle')}
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{additionalCosts.map(cost => (
|
|
<Card key={cost.name} className="bg-white">
|
|
<CardContent className="pt-4">
|
|
<h4 className="font-semibold text-brand-navy">{cost.name}</h4>
|
|
<p className="text-sm text-neutral-600 mt-1">{cost.description}</p>
|
|
<p className="text-xs text-neutral-400 mt-2">
|
|
{t('calculFret.colCost')}: {cost.typical}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-neutral-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-4">{t('calculFret.exampleTitle')}</h3>
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2 font-medium">{t('calculFret.colItem')}</th>
|
|
<th className="text-right py-2 font-medium">{t('calculFret.colAmount')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{exampleItems.map((item, i) => (
|
|
<tr
|
|
key={i}
|
|
className={`border-b last:border-0 ${i === exampleItems.length - 1 ? 'font-bold text-brand-navy' : ''}`}
|
|
>
|
|
<td className="py-2">{item.item}</td>
|
|
<td className="py-2 text-right font-mono">{item.amount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|