285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getBooking } from '@/lib/api';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { useParams } from 'next/navigation';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
|
|
export default function BookingDetailPage() {
|
|
const t = useTranslations('dashboard.bookingDetail');
|
|
const locale = useLocale();
|
|
const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
|
|
const params = useParams();
|
|
const bookingId = params.id as string;
|
|
|
|
const { data: booking, isLoading } = useQuery({
|
|
queryKey: ['booking', bookingId],
|
|
queryFn: () => getBooking(bookingId),
|
|
enabled: !!bookingId,
|
|
});
|
|
|
|
const getStatusColor = (status: string) => {
|
|
const colors: Record<string, string> = {
|
|
draft: 'bg-gray-100 text-gray-800',
|
|
pending: 'bg-yellow-100 text-yellow-800',
|
|
confirmed: 'bg-green-100 text-green-800',
|
|
in_transit: 'bg-blue-100 text-blue-800',
|
|
delivered: 'bg-purple-100 text-purple-800',
|
|
cancelled: 'bg-red-100 text-red-800',
|
|
};
|
|
return colors[status] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
const key = `status.${status}`;
|
|
try {
|
|
return t(key as any);
|
|
} catch {
|
|
return status;
|
|
}
|
|
};
|
|
|
|
const downloadPDF = async () => {
|
|
try {
|
|
alert(t('pdfNotImplemented'));
|
|
console.log('Download PDF for booking:', bookingId);
|
|
} catch (error) {
|
|
console.error('Failed to download PDF:', error);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!booking) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<h2 className="text-2xl font-semibold text-gray-900">{t('notFound')}</h2>
|
|
<Link
|
|
href="/dashboard/bookings"
|
|
className="mt-4 inline-block text-blue-600 hover:text-blue-700"
|
|
>
|
|
{t('back')}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Link
|
|
href="/dashboard/bookings"
|
|
className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
|
|
>
|
|
{t('back')}
|
|
</Link>
|
|
<div className="flex items-center space-x-4">
|
|
<h1 className="text-2xl font-bold text-gray-900">{booking.bookingNumber}</h1>
|
|
<span
|
|
className={`px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full ${getStatusColor(
|
|
booking.status
|
|
)}`}
|
|
>
|
|
{getStatusLabel(booking.status)}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
{t('createdOn', { date: new Date(booking.createdAt).toLocaleDateString(dateLocale) })}
|
|
</p>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<button
|
|
onClick={downloadPDF}
|
|
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
{t('downloadPdf')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('cargo.title')}</h2>
|
|
<dl className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('cargo.description')}</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{booking.cargoDescription}</dd>
|
|
</div>
|
|
{booking.specialInstructions && (
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
{t('cargo.specialInstructions')}
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{booking.specialInstructions}</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
{t('containers.title', { count: booking.containers?.length || 0 })}
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{booking.containers?.map((container, index) => (
|
|
<div key={container.id || index} className="border rounded-lg p-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500">{t('containers.type')}</p>
|
|
<p className="text-sm text-gray-900">{container.type}</p>
|
|
</div>
|
|
{container.containerNumber && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500">
|
|
{t('containers.number')}
|
|
</p>
|
|
<p className="text-sm text-gray-900">{container.containerNumber}</p>
|
|
</div>
|
|
)}
|
|
{container.sealNumber && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500">{t('containers.seal')}</p>
|
|
<p className="text-sm text-gray-900">{container.sealNumber}</p>
|
|
</div>
|
|
)}
|
|
{container.vgm && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500">{t('containers.vgm')}</p>
|
|
<p className="text-sm text-gray-900">{container.vgm}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('shipper.title')}</h2>
|
|
<dl className="space-y-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('shipper.name')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.shipper.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('shipper.contact')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.shipper.contactName}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('shipper.email')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.shipper.contactEmail}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('shipper.phone')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.shipper.contactPhone}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('consignee.title')}</h2>
|
|
<dl className="space-y-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('consignee.name')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.consignee.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('consignee.contact')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.consignee.contactName}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('consignee.email')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.consignee.contactEmail}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('consignee.phone')}</dt>
|
|
<dd className="text-sm text-gray-900">{booking.consignee.contactPhone}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('timeline.title')}</h2>
|
|
<div className="flow-root">
|
|
<ul className="-mb-8">
|
|
<li>
|
|
<div className="relative pb-8">
|
|
<span
|
|
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
|
|
aria-hidden="true"
|
|
></span>
|
|
<div className="relative flex space-x-3">
|
|
<div>
|
|
<span className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
|
|
<svg
|
|
className="h-5 w-5 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div className="min-w-0 flex-1 pt-1.5">
|
|
<div>
|
|
<p className="text-sm text-gray-900 font-medium">
|
|
{t('timeline.created')}
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{new Date(booking.createdAt).toLocaleString(dateLocale)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('info.title')}</h2>
|
|
<dl className="space-y-3">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('info.bookingId')}</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{booking.id}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">{t('info.lastUpdated')}</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">
|
|
{new Date(booking.updatedAt).toLocaleString(dateLocale)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|