278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useParams } from 'next/navigation';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { ArrowLeft, ArrowRight, CreditCard, FileText, Package, Pencil } from 'lucide-react';
|
|
|
|
import { getCsvBooking } from '@/lib/api';
|
|
import { useAuth } from '@/lib/context/auth-context';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Callout } from '@/components/ui/callout';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { PageHeader } from '@/components/ui/PageHeader';
|
|
import { EmptyState, ErrorState, PageSpinner } from '@/components/ui/states';
|
|
import { BookingStatusBadge } from '@/components/bookings/BookingStatusBadge';
|
|
|
|
/**
|
|
* Detail d'une reservation.
|
|
*
|
|
* La page interrogeait `GET /bookings/:id` et affichait un modele — expediteur,
|
|
* destinataire, conteneurs — qui n'existe pas dans ce produit : la table
|
|
* `bookings` n'a jamais ete creee, les reservations vivent dans `csv_bookings`.
|
|
* Elle repondait donc 500 et tournait indefiniment. C'est ce qui donnait
|
|
* l'impression qu'un clic sur une notification « ne faisait rien » : la
|
|
* navigation avait bien lieu, la destination ne s'affichait jamais.
|
|
*
|
|
* Elle lit desormais `GET /csv-bookings/:id`, la meme source que la liste.
|
|
*/
|
|
export default function BookingDetailPage() {
|
|
const t = useTranslations('dashboard.bookingDetail');
|
|
const tList = useTranslations('dashboard.bookingsList');
|
|
const tCommon = useTranslations('common');
|
|
const locale = useLocale();
|
|
const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
|
|
const params = useParams();
|
|
const bookingId = params.id as string;
|
|
const { user } = useAuth();
|
|
|
|
const {
|
|
data: booking,
|
|
isPending,
|
|
isError,
|
|
error,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: ['csv-booking', bookingId],
|
|
queryFn: () => getCsvBooking(bookingId),
|
|
enabled: Boolean(bookingId),
|
|
// Une reservation introuvable ne le deviendra pas en reessayant : trois
|
|
// tentatives ne faisaient que prolonger le tourniquet.
|
|
retry: (failureCount, err) =>
|
|
(err as { statusCode?: number })?.statusCode === 404 ? false : failureCount < 1,
|
|
});
|
|
|
|
const dateTime = (value?: string) =>
|
|
value
|
|
? new Date(value).toLocaleString(dateLocale, { dateStyle: 'long', timeStyle: 'short' })
|
|
: '—';
|
|
|
|
if (isPending) return <PageSpinner label={tCommon('loading')} />;
|
|
|
|
if (isError) {
|
|
const missing = (error as { statusCode?: number })?.statusCode === 404;
|
|
return missing ? (
|
|
<EmptyState
|
|
icon={Package}
|
|
title={t('notFound')}
|
|
description={t('notFoundBody')}
|
|
action={
|
|
<Button asChild variant="outline">
|
|
<Link href="/dashboard/bookings">
|
|
<ArrowLeft />
|
|
{t('back')}
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
) : (
|
|
<ErrorState
|
|
title={t('errorTitle')}
|
|
description={t('errorBody')}
|
|
retryLabel={tCommon('retry')}
|
|
onRetry={() => refetch()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const unpaid = booking.status === 'QUOTE';
|
|
// Un collegue de l'entreprise peut consulter la reservation ; seul son auteur
|
|
// peut la payer (l'API le refuse aux autres).
|
|
const isOwner = booking.userId === (user?.id ?? user?.sub);
|
|
const price = booking.priceEUR
|
|
? `${booking.priceEUR} €`
|
|
: booking.priceUSD
|
|
? `${booking.priceUSD} $`
|
|
: null;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title={booking.bookingNumber ?? `#${booking.id.slice(0, 8).toUpperCase()}`}
|
|
description={t('requestedOn', { date: dateTime(booking.requestedAt) })}
|
|
actions={
|
|
<>
|
|
<BookingStatusBadge status={booking.status} />
|
|
{unpaid && isOwner && (
|
|
<Button asChild>
|
|
<Link href={`/dashboard/booking/${booking.id}/pay`}>
|
|
<CreditCard />
|
|
{tList('detail.payNow')}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</>
|
|
}
|
|
/>
|
|
|
|
{unpaid && (
|
|
<Callout variant="warning" className="mb-4">
|
|
{isOwner
|
|
? tList('detail.quoteNotice')
|
|
: tList('detail.ownerOnly', {
|
|
name: booking.createdByName ?? tList('createdBy.deleted'),
|
|
})}
|
|
</Callout>
|
|
)}
|
|
|
|
{booking.status === 'REJECTED' && booking.rejectionReason && (
|
|
<Callout variant="danger" className="mb-4" title={t('rejected')}>
|
|
{booking.rejectionReason}
|
|
</Callout>
|
|
)}
|
|
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<div className="flex flex-col gap-4 lg:col-span-2">
|
|
{/* La route est ce qu'un transitaire regarde en premier : elle occupe
|
|
la tete de page, pas une ligne de tableau parmi d'autres. */}
|
|
<Card>
|
|
<CardContent className="p-5">
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
|
<span className="font-heading text-h4 text-brand-navy">{booking.origin}</span>
|
|
<span className="flex items-center gap-2 text-neutral-400">
|
|
<ArrowRight className="size-4" aria-hidden="true" />
|
|
{booking.transitDays ? (
|
|
<span className="text-body-xs">
|
|
{t('transitDays', { days: booking.transitDays })}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
<span className="font-heading text-h4 text-brand-navy">{booking.destination}</span>
|
|
</div>
|
|
{booking.carrierName && (
|
|
<p className="mt-2 text-body-sm text-neutral-500">
|
|
{t('carrier', { carrier: booking.carrierName })}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>{tList('detail.cargo')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<dl className="grid gap-4 sm:grid-cols-3">
|
|
<Field label={t('packing')}>
|
|
{booking.palletCount
|
|
? tList('units.palletsCount', { count: booking.palletCount })
|
|
: '—'}
|
|
</Field>
|
|
<Field label={t('volume')}>
|
|
{booking.volumeCBM ? tList('units.cbm', { value: booking.volumeCBM }) : '—'}
|
|
</Field>
|
|
<Field label={t('weight')}>
|
|
{booking.weightKG ? tList('units.kg', { value: booking.weightKG }) : '—'}
|
|
</Field>
|
|
</dl>
|
|
{booking.notes && (
|
|
<p className="mt-4 border-t border-border pt-4 text-body-sm leading-6 text-neutral-600">
|
|
{booking.notes}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>{t('documents', { count: booking.documents?.length ?? 0 })}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{booking.documents?.length ? (
|
|
<ul className="flex flex-col gap-2">
|
|
{booking.documents.map((document, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex items-center gap-3 rounded-md border border-border px-4 py-3"
|
|
>
|
|
<FileText className="size-4 shrink-0 text-neutral-400" aria-hidden="true" />
|
|
<span className="min-w-0 flex-1 truncate text-body-sm text-neutral-700">
|
|
{document.fileName}
|
|
</span>
|
|
<span className="shrink-0 text-body-xs text-neutral-400">
|
|
{document.type}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<EmptyState size="sm" icon={FileText} title={t('noDocuments')} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
{price && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>{tList('detail.price')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="font-heading text-h3 text-brand-navy">{price}</p>
|
|
<dl className="mt-4 flex flex-col gap-3 border-t border-border pt-4">
|
|
{booking.freightTotal ? (
|
|
<Field label={t('freight')}>
|
|
{booking.freightTotal} {booking.freightCurrency}
|
|
</Field>
|
|
) : null}
|
|
{booking.fobTotal ? (
|
|
<Field label={t('destinationCharges')}>
|
|
{booking.fobTotal} {booking.fobCurrency}
|
|
</Field>
|
|
) : null}
|
|
{booking.commissionAmountEur ? (
|
|
<Field label={t('commission')}>{booking.commissionAmountEur} €</Field>
|
|
) : null}
|
|
</dl>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle>{t('timeline')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<dl className="flex flex-col gap-3">
|
|
<Field label={t('requested')}>{dateTime(booking.requestedAt)}</Field>
|
|
{booking.respondedAt && (
|
|
<Field label={t('responded')}>{dateTime(booking.respondedAt)}</Field>
|
|
)}
|
|
<Field label={t('reference')}>{booking.id}</Field>
|
|
</dl>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Button asChild variant="outline">
|
|
<Link href="/dashboard/bookings">
|
|
<ArrowLeft />
|
|
{t('back')}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="min-w-0">
|
|
<dt className="text-label uppercase text-neutral-400">{label}</dt>
|
|
<dd className="mt-1 break-words text-body-sm text-neutral-700">{children}</dd>
|
|
</div>
|
|
);
|
|
}
|