353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
/**
|
|
* Booking Detail Page
|
|
*
|
|
* Display full booking information
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { bookingsApi } from '@/lib/api';
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
|
|
export default function BookingDetailPage() {
|
|
const params = useParams();
|
|
const bookingId = params.id as string;
|
|
|
|
const { data: booking, isLoading } = useQuery({
|
|
queryKey: ['booking', bookingId],
|
|
queryFn: () => bookingsApi.getById(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 downloadPDF = async () => {
|
|
try {
|
|
const blob = await bookingsApi.downloadPdf(bookingId);
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `booking-${booking?.bookingNumber}.pdf`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} 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">
|
|
Booking not found
|
|
</h2>
|
|
<Link
|
|
href="/dashboard/bookings"
|
|
className="mt-4 inline-block text-blue-600 hover:text-blue-700"
|
|
>
|
|
← Back to bookings
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<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"
|
|
>
|
|
← Back to bookings
|
|
</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
|
|
)}`}
|
|
>
|
|
{booking.status}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Created on {new Date(booking.createdAt).toLocaleDateString()}
|
|
</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>
|
|
Download PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Cargo Details */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Cargo Details
|
|
</h2>
|
|
<dl className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
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">
|
|
Special Instructions
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">
|
|
{booking.specialInstructions}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
|
|
{/* Containers */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Containers ({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">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">
|
|
Container 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">
|
|
Seal Number
|
|
</p>
|
|
<p className="text-sm text-gray-900">
|
|
{container.sealNumber}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{container.vgm && (
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-500">
|
|
VGM (kg)
|
|
</p>
|
|
<p className="text-sm text-gray-900">{container.vgm}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Shipper & Consignee */}
|
|
<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">
|
|
Shipper
|
|
</h2>
|
|
<dl className="space-y-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Name</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.shipper.name}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
Contact
|
|
</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.shipper.contactName}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Email</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.shipper.contactEmail}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">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">
|
|
Consignee
|
|
</h2>
|
|
<dl className="space-y-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Name</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.consignee.name}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
Contact
|
|
</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.consignee.contactName}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Email</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.consignee.contactEmail}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">Phone</dt>
|
|
<dd className="text-sm text-gray-900">
|
|
{booking.consignee.contactPhone}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Timeline */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Timeline
|
|
</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">
|
|
Booking Created
|
|
</p>
|
|
<p className="text-sm text-gray-500">
|
|
{new Date(booking.createdAt).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Info */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Information
|
|
</h2>
|
|
<dl className="space-y-3">
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
Booking ID
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">{booking.id}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-gray-500">
|
|
Last Updated
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-gray-900">
|
|
{new Date(booking.updatedAt).toLocaleString()}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|