245 lines
10 KiB
TypeScript
245 lines
10 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Clock } from 'lucide-react';
|
|
|
|
export default async function TransitTimePage() {
|
|
const t = await getTranslations('dashboard.wikiPages');
|
|
|
|
const timeline = t.raw('transitTime.timeline') as Array<{
|
|
step: string;
|
|
description: string;
|
|
delay: string;
|
|
responsible: string;
|
|
}>;
|
|
const transitTimes = t.raw('transitTime.transitTimes') as Array<{
|
|
route: string;
|
|
time: string;
|
|
via: string;
|
|
}>;
|
|
const lateFees = t.raw('transitTime.lateFees') as Array<{
|
|
name: string;
|
|
definition: string;
|
|
rate: string;
|
|
location: string;
|
|
}>;
|
|
const potentialDelays = t.raw('transitTime.potentialDelays') as string[];
|
|
const seasonalVariations = t.raw('transitTime.seasonalVariations') as string[];
|
|
const rolloverCauses = t.raw('transitTime.rolloverCauses') as string[];
|
|
const tips = t.raw('transitTime.tips') as string[];
|
|
|
|
const keyTerms = [
|
|
{ key: 'ETD', def: t('transitTime.etd') },
|
|
{ key: 'ETA', def: t('transitTime.eta') },
|
|
{ key: 'Cut-off', def: t('transitTime.cutoff') },
|
|
{ key: 'Free time', def: t('transitTime.freeTime') },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<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>
|
|
{t('backToWiki')}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Clock className="w-10 h-10 text-blue-600" />
|
|
<h1 className="text-3xl font-bold text-gray-900">{t('transitTime.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-gray-600 max-w-3xl">{t('transitTime.description')}</p>
|
|
</div>
|
|
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-blue-900 mb-3">{t('transitTime.keyTermsTitle')}</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{keyTerms.map(term => (
|
|
<div key={term.key}>
|
|
<h4 className="font-medium text-blue-800">{term.key}</h4>
|
|
<p className="text-sm text-blue-700">{term.def}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.timelineTitle')}</h2>
|
|
<div className="space-y-3">
|
|
{timeline.map((item, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`bg-white ${index === 5 || index === 7 ? 'border-blue-300 border-2' : ''}`}
|
|
>
|
|
<CardContent className="py-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
|
|
{index + 1}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex flex-wrap items-center gap-2 mb-1">
|
|
<h4 className="font-medium text-gray-900">{item.step}</h4>
|
|
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
|
|
{item.delay}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600">{item.description}</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{t('transitTime.responsibleLabel')} : {item.responsible}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
|
{t('transitTime.transitTimesTitle')}
|
|
</h2>
|
|
<Card className="bg-white">
|
|
<CardContent className="pt-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="text-left py-2 font-medium">{t('transitTime.colRoute')}</th>
|
|
<th className="text-center py-2 font-medium">{t('transitTime.colTime')}</th>
|
|
<th className="text-right py-2 font-medium">{t('transitTime.colVia')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transitTimes.map(tt => (
|
|
<tr key={tt.route} className="border-b last:border-0 hover:bg-gray-50">
|
|
<td className="py-3 text-gray-900">{tt.route}</td>
|
|
<td className="py-3 text-center font-mono text-blue-600">{tt.time}</td>
|
|
<td className="py-3 text-right text-gray-500">{tt.via}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-3">{t('transitTime.transitNote')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-gray-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.freeTimeTitle')}</h3>
|
|
<p className="text-gray-600 mb-4">{t('transitTime.freeTimeDescription')}</p>
|
|
<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">{t('transitTime.freeTimeStandard')}</h4>
|
|
<p className="text-2xl font-bold text-blue-600">{t('transitTime.freeTimeValue')}</p>
|
|
<p className="text-xs text-gray-500">{t('transitTime.freeTimeNote')}</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-gray-900">{t('transitTime.demurrageStart')}</h4>
|
|
<p className="text-sm text-gray-600">{t('transitTime.demurrageStartDesc')}</p>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-gray-900">{t('transitTime.detentionStart')}</h4>
|
|
<p className="text-sm text-gray-600">{t('transitTime.detentionStartDesc')}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.lateFeesTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{lateFees.map(fee => (
|
|
<Card key={fee.name} className="bg-white border-red-200">
|
|
<CardContent className="pt-4">
|
|
<h4 className="text-lg font-semibold text-red-700 mb-1">{fee.name}</h4>
|
|
<p className="text-gray-600 text-sm mb-2">{fee.definition}</p>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-500">{t('transitTime.colRate')} :</span>
|
|
<span className="font-mono text-red-600">{fee.rate}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm mt-1">
|
|
<span className="text-gray-500">{t('transitTime.colLocation')} :</span>
|
|
<span className="text-gray-700">{fee.location}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-orange-50 border-orange-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-orange-900 mb-3">
|
|
{t('transitTime.delayFactorsTitle')}
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<h4 className="font-medium text-orange-800">
|
|
{t('transitTime.potentialDelaysTitle')}
|
|
</h4>
|
|
<ul className="text-sm text-orange-700 mt-2 space-y-1">
|
|
{potentialDelays.map((d, i) => (
|
|
<li key={i}>• {d}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-orange-800">
|
|
{t('transitTime.seasonalVariationsTitle')}
|
|
</h4>
|
|
<ul className="text-sm text-orange-700 mt-2 space-y-1">
|
|
{seasonalVariations.map((v, i) => (
|
|
<li key={i}>• {v}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-4 bg-gray-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.rolloverTitle')}</h3>
|
|
<p className="text-gray-600 mb-3">{t('transitTime.rolloverDescription')}</p>
|
|
<div className="bg-white p-4 rounded-lg border">
|
|
<h4 className="font-medium text-gray-900">{t('transitTime.rolloverCausesTitle')}</h4>
|
|
<ul className="text-sm text-gray-600 mt-2 space-y-1">
|
|
{rolloverCauses.map((cause, i) => (
|
|
<li key={i}>• {cause}</li>
|
|
))}
|
|
</ul>
|
|
<p className="text-xs text-gray-500 mt-3">{t('transitTime.rolloverImpact')}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-8 bg-amber-50 border-amber-200">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-amber-900 mb-3">{t('transitTime.tipsTitle')}</h3>
|
|
<ul className="list-disc list-inside space-y-2 text-amber-800">
|
|
{tips.map((tip, i) => (
|
|
<li key={i}>{tip}</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|