fix(ui): la page de detail lit csv-bookings, la table bookings n existe pas
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018BAUeCFpDkRD6tU5wGsc1C
This commit is contained in:
David
parent
abe3bfe9ae
commit
d89104f49e
@ -3,61 +3,68 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { ArrowLeft, Download, FileText, Package } from 'lucide-react';
|
||||
import { ArrowLeft, ArrowRight, CreditCard, FileText, Package, Pencil } from 'lucide-react';
|
||||
|
||||
import { getBooking } from '@/lib/api';
|
||||
import { getCsvBooking } from '@/lib/api';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { Badge, type BadgeProps } from '@/components/ui/badge';
|
||||
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, PageSpinner } from '@/components/ui/states';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import { DescriptionList } from '@/components/data/description-list';
|
||||
|
||||
const STATUS_VARIANT: Record<string, NonNullable<BadgeProps['variant']>> = {
|
||||
draft: 'neutral',
|
||||
pending: 'warning',
|
||||
confirmed: 'info',
|
||||
in_transit: 'info',
|
||||
delivered: 'success',
|
||||
cancelled: 'danger',
|
||||
};
|
||||
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 { toast } = useToast();
|
||||
|
||||
const { data: booking, isLoading } = useQuery({
|
||||
queryKey: ['booking', bookingId],
|
||||
queryFn: () => getBooking(bookingId),
|
||||
enabled: !!bookingId,
|
||||
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 statusLabel = (status: string) => {
|
||||
try {
|
||||
return t(`status.${status}` as any);
|
||||
} catch {
|
||||
return status;
|
||||
}
|
||||
};
|
||||
const dateTime = (value?: string) =>
|
||||
value
|
||||
? new Date(value).toLocaleString(dateLocale, { dateStyle: 'long', timeStyle: 'short' })
|
||||
: '—';
|
||||
|
||||
// Le telechargement PDF n'est pas encore branche cote back : on le signale
|
||||
// par une notification plutot que par une alerte bloquante du navigateur.
|
||||
const downloadPDF = () => toast.info(t('pdfNotImplemented'));
|
||||
if (isPending) return <PageSpinner label={tCommon('loading')} />;
|
||||
|
||||
if (isLoading) return <PageSpinner label={tCommon('loading')} />;
|
||||
|
||||
if (!booking) {
|
||||
return (
|
||||
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">
|
||||
@ -67,173 +74,195 @@ export default function BookingDetailPage() {
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ErrorState
|
||||
title={t('errorTitle')}
|
||||
description={t('errorBody')}
|
||||
retryLabel={tCommon('retry')}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const unpaid = booking.status === 'PENDING_PAYMENT';
|
||||
const price = booking.priceEUR
|
||||
? `${booking.priceEUR} €`
|
||||
: booking.priceUSD
|
||||
? `${booking.priceUSD} $`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={booking.bookingNumber}
|
||||
description={t('createdOn', {
|
||||
date: new Date(booking.createdAt).toLocaleDateString(dateLocale),
|
||||
})}
|
||||
title={booking.bookingNumber ?? `#${booking.id.slice(0, 8).toUpperCase()}`}
|
||||
description={t('requestedOn', { date: dateTime(booking.requestedAt) })}
|
||||
actions={
|
||||
<>
|
||||
<Badge variant={STATUS_VARIANT[booking.status] ?? 'neutral'}>
|
||||
{statusLabel(booking.status)}
|
||||
</Badge>
|
||||
<Button variant="outline" onClick={downloadPDF}>
|
||||
<Download />
|
||||
{t('downloadPdf')}
|
||||
</Button>
|
||||
<BookingStatusBadge status={booking.status} />
|
||||
{unpaid && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/booking/${booking.id}/pay`}>
|
||||
<CreditCard />
|
||||
{tList('detail.payNow')}
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{unpaid && (
|
||||
<Callout variant="warning" className="mb-4">
|
||||
{tList('detail.pendingPaymentNotice')}
|
||||
</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>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>{t('cargo.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DescriptionList
|
||||
columns={1}
|
||||
items={[
|
||||
{ label: t('cargo.description'), value: booking.cargoDescription },
|
||||
...(booking.specialInstructions
|
||||
? [
|
||||
{
|
||||
label: t('cargo.specialInstructions'),
|
||||
value: booking.specialInstructions,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>
|
||||
{t('containers.title', { count: booking.containers?.length || 0 })}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{booking.containers && booking.containers.length > 0 ? (
|
||||
<ul className="flex flex-col gap-3">
|
||||
{booking.containers.map((container, index) => (
|
||||
<li
|
||||
key={container.id || index}
|
||||
className="rounded-md border border-border p-4"
|
||||
>
|
||||
<DescriptionList
|
||||
items={[
|
||||
{ label: t('containers.type'), value: container.type },
|
||||
...(container.containerNumber
|
||||
? [{ label: t('containers.number'), value: container.containerNumber }]
|
||||
: []),
|
||||
...(container.sealNumber
|
||||
? [{ label: t('containers.seal'), value: container.sealNumber }]
|
||||
: []),
|
||||
...(container.vgm
|
||||
? [{ label: t('containers.vgm'), value: container.vgm }]
|
||||
: []),
|
||||
]}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptyState size="sm" icon={Package} title={t('containers.title', { count: 0 })} />
|
||||
<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>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>{t('shipper.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DescriptionList
|
||||
columns={1}
|
||||
items={[
|
||||
{ label: t('shipper.name'), value: booking.shipper.name, emphasis: true },
|
||||
{ label: t('shipper.contact'), value: booking.shipper.contactName },
|
||||
{ label: t('shipper.email'), value: booking.shipper.contactEmail },
|
||||
{ label: t('shipper.phone'), value: booking.shipper.contactPhone },
|
||||
]}
|
||||
/>
|
||||
</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('consignee.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DescriptionList
|
||||
columns={1}
|
||||
items={[
|
||||
{ label: t('consignee.name'), value: booking.consignee.name, emphasis: true },
|
||||
{ label: t('consignee.contact'), value: booking.consignee.contactName },
|
||||
{ label: t('consignee.email'), value: booking.consignee.contactEmail },
|
||||
{ label: t('consignee.phone'), value: booking.consignee.contactPhone },
|
||||
]}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<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">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle>{t('timeline.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="relative flex flex-col gap-4">
|
||||
<li className="flex gap-3">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-brand-blue/10"
|
||||
>
|
||||
<FileText className="size-3 text-brand-blue" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-body-sm font-medium text-brand-navy">
|
||||
{t('timeline.created')}
|
||||
</p>
|
||||
<p className="mt-0.5 text-body-xs text-neutral-500">
|
||||
{new Date(booking.createdAt).toLocaleString(dateLocale)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{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('info.title')}</CardTitle>
|
||||
<CardTitle>{t('timeline')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DescriptionList
|
||||
columns={1}
|
||||
items={[
|
||||
{ label: t('info.bookingId'), value: booking.id },
|
||||
{
|
||||
label: t('info.lastUpdated'),
|
||||
value: new Date(booking.updatedAt).toLocaleString(dateLocale),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user