From d89104f49ef747103f045dbfaaa0519c14a4c8e0 Mon Sep 17 00:00:00 2001
From: David <darnaud2@myges.fr>
Date: Mon, 7 Sep 2026 21:40:56 +0200
Subject: [PATCH] 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
---
 .../[locale]/dashboard/bookings/[id]/page.tsx | 367 ++++++++++--------
 1 file changed, 198 insertions(+), 169 deletions(-)

diff --git a/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
index 8b94282..717f55f 100644
--- a/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
@@ -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>
+  );
+}