@voyantjs/bookings-ui 0.62.2 → 0.63.0

package/README.md

@@ -18,40 +18,37 @@ that spacing when a shell owns the page chrome.
 
 ## Components
 
-- `BookingsPage`, `BookingDetailPage`, `BookingWorkspacePage`
+- `BookingsPage`, `BookingDetailPage`
 - `BookingList`, `BookingDialog`, `BookingCreateDialog`, `BookingCancellationDialog`, `StatusChangeDialog`
 - `TravelerList`, `TravelerDialog`, `BookingItemList`, `BookingGroupSection`
 - `BookingPaymentsSummary`, `BookingPaymentScheduleList`, `BookingGuaranteeList`
 - `SupplierStatusList`, `BookingActivityTimeline`, `BookingNotes`
 
-`BookingWorkspacePage` wraps the existing `BookingDetailPage` in a reusable
-operator workspace shell. It publishes cross-module navigation for booking,
-finance, legal, travelers, and activity work while keeping module-specific
-surfaces app-owned through typed slots:
+`BookingDetailPage` is the canonical multi-tab booking surface (Overview,
+Travelers, Payments, Suppliers, Documents, Activity, plus optional `Invoices`
+and `Ledger` tabs). Templates inject template-owned cards via the `slots`
+prop and wire router navigation through `onBack`, `onPersonOpen`,
+`onOrganizationOpen`, `onCollectPayment`, and `onRecordPayment` callbacks:
 
 ```tsx
-<BookingWorkspacePage
+<BookingDetailPage
   id={bookingId}
+  hideBreadcrumb
+  onBack={() => router.push("/bookings")}
+  onPersonOpen={(personId) => router.push(`/people/${personId}`)}
+  onCollectPayment={() => setCollectOpen(true)}
+  onRecordPayment={() => setRecordOpen(true)}
   slots={{
-    actionBar: ({ booking }) => <button type="button">Assign {booking.bookingNumber}</button>,
-    bookingTab: ({ booking }) => <BookingOverviewPanel booking={booking} />,
-    financeSidebar: ({ bookingId }) => <FinanceStatusCard bookingId={bookingId} />,
-    legalTab: ({ bookingId }) => <ContractChecklist bookingId={bookingId} />,
-    travelersTabExtensions: ({ bulkActions }) => (
-      <BatchTravelerTools selectedTravelerIds={bulkActions.selectedTravelerIds} />
-    ),
-    activityTab: ({ bookingId }) => <OperatorTimeline bookingId={bookingId} />,
+    header: (booking) => <WidgetSlot slot="booking.header" props={{ booking }} />,
+    overviewStart: () => <CatalogSourceCard bookingId={bookingId} />,
+    financeStart: () => <PendingPaymentSessions bookingId={bookingId} />,
+    invoicesTab: { content: (booking) => <InvoicesCard booking={booking} /> },
+    ledgerTab: { content: <ActionLedgerPanel bookingId={bookingId} /> },
+    documents: () => <DocumentsTable bookingId={bookingId} />,
   }}
 />
 ```
 
-Slot render functions receive the booking, active workspace section, section
-setter, and bulk-action state for traveler and finance selections. Use
-`bookingTab` when an app wants to use top-level finance, legal, traveler, or
-activity tabs without nesting the default `BookingDetailPage` tabs. When
-`bookingTab` is omitted, the workspace keeps mounting `BookingDetailPage`; use
-`bookingDetailSlots` to pass slots through to that default detail page.
-
 ## I18n
 
 Components render English by default. To localize them, wrap your UI in

package/dist/components/booking-detail-page.d.ts

@@ -1,7 +1,20 @@
 import { type BookingRecord } from "@voyantjs/bookings-react";
 import { type ReactNode } from "react";
+/**
+ * Optional extra tab. When provided, the canonical layout renders a
+ * trigger and a content panel. Modeled after PersonDetailPage's
+ * commercial-tab slot shape. The trigger label falls back to the i18n
+ * default (`messages.bookingDetailPage.tabInvoices` etc.).
+ */
+export interface BookingDetailTabSlot {
+    label?: string;
+    /** Receives the loaded booking so the slot can use sell amount, ids, etc. */
+    content: ReactNode | ((booking: BookingRecord) => ReactNode);
+}
 export interface BookingDetailPageSlots {
+    /** Rendered between the title row and the summary card. */
     header?: (booking: BookingRecord) => ReactNode;
+    /** Rendered between the summary card and the tabs. */
     afterSummary?: (booking: BookingRecord) => ReactNode;
     overviewStart?: (booking: BookingRecord) => ReactNode;
     overviewEnd?: (booking: BookingRecord) => ReactNode;
@@ -10,18 +23,36 @@ export interface BookingDetailPageSlots {
     financeEnd?: (booking: BookingRecord) => ReactNode;
     documents?: (booking: BookingRecord) => ReactNode;
     activityEnd?: (booking: BookingRecord) => ReactNode;
+    /** Mounts a dedicated `Invoices` tab between Payments and Suppliers. */
+    invoicesTab?: BookingDetailTabSlot;
+    /** Mounts a dedicated `Ledger` tab at the far right. */
+    ledgerTab?: BookingDetailTabSlot;
 }
 export interface BookingDetailPageProps {
     id: string;
     className?: string;
     locale?: string;
+    /** When true, the inline `Bookings > #` breadcrumb is suppressed
+     * (use when the host shell already renders breadcrumbs). */
+    hideBreadcrumb?: boolean;
     onBack?: () => void;
     onPersonOpen?: (personId: string) => void;
     onOrganizationOpen?: (organizationId: string) => void;
+    /** Wired to a primary `Generate payment link` button on the Payments tab. */
     onCollectPayment?: (booking: BookingRecord) => void;
+    /** Wired to a secondary `Record payment` button on the Payments tab. */
+    onRecordPayment?: (booking: BookingRecord) => void;
     slots?: BookingDetailPageSlots;
 }
-export declare function BookingDetailPage({ id, className, locale, onBack, onPersonOpen, onOrganizationOpen, onCollectPayment, slots, }: BookingDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBack, onPersonOpen, onOrganizationOpen, onCollectPayment, onRecordPayment, slots, }: BookingDetailPageProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Billing/contact card for the Travelers tab. Snapshot fields on the
+ * booking row are the source of truth (they capture contact info at
+ * the time of booking). When they're empty — typically for bookings
+ * created via flows that don't snapshot — fall back to the linked CRM
+ * person / organization so the operator still sees who they're
+ * billing.
+ */
 export declare function BookingBillingContextCard({ booking }: {
     booking: BookingRecord;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/booking-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/booking-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAA;AA2BjC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAgBhD,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACpD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACrD,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACnD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACpD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IAClD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACjD,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;CACpD;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IACnD,KAAK,CAAC,EAAE,sBAAsB,CAAA;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,MAAM,EACN,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,KAAK,GACN,EAAE,sBAAsB,2CA4PxB;AAED,wBAAgB,yBAAyB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,2CAmChF"}
+{"version":3,"file":"booking-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/booking-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAA;AA+BjC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAiBhD;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,OAAO,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,sBAAsB;IACrC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IAC9C,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACpD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACrD,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACnD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACpD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IAClD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACjD,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,SAAS,CAAA;IACnD,wEAAwE;IACxE,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,wDAAwD;IACxD,SAAS,CAAC,EAAE,oBAAoB,CAAA;CACjC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;gEAC4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IACnD,wEAAwE;IACxE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAClD,KAAK,CAAC,EAAE,sBAAsB,CAAA;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,KAAK,GACN,EAAE,sBAAsB,2CA2RxB;AASD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,2CA8DhF"}

package/dist/components/booking-detail-page.js

@@ -1,12 +1,14 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { bookingStatusBadgeVariant, useBooking, useBookingMutation, } from "@voyantjs/bookings-react";
-import { Badge, Button, Card, CardContent, cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@voyantjs/ui/components";
+import { useOrganization, usePerson } from "@voyantjs/crm-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@voyantjs/ui/components";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
-import { Ban, Calendar, ChevronRight, Mail, MapPin, MoreHorizontal, Pencil, Phone, RefreshCw, Trash2, Users, } from "lucide-react";
+import { Ban, Calendar, ChevronRight, CreditCard, Mail, MapPin, MoreHorizontal, Pencil, Phone, RefreshCw, Trash2, Users, } from "lucide-react";
 import { useState } from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/index.js";
 import { BookingActivityTimeline } from "./booking-activity-timeline.js";
+import { BookingBillingDialog } from "./booking-billing-dialog.js";
 import { BookingCancellationDialog } from "./booking-cancellation-dialog.js";
 import { BookingDialog } from "./booking-dialog.js";
 import { BookingGroupSection } from "./booking-group-section.js";
@@ -18,7 +20,7 @@ import { BookingPaymentsSummary } from "./booking-payments-summary.js";
 import { StatusChangeDialog } from "./status-change-dialog.js";
 import { SupplierStatusList } from "./supplier-status-list.js";
 import { TravelerList } from "./traveler-list.js";
-export function BookingDetailPage({ id, className, locale, onBack, onPersonOpen, onOrganizationOpen, onCollectPayment, slots, }) {
+export function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBack, onPersonOpen, onOrganizationOpen, onCollectPayment, onRecordPayment, slots, }) {
     const i18n = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const detailMessages = messages.bookingDetailPage;
@@ -39,18 +41,41 @@ export function BookingDetailPage({ id, className, locale, onBack, onPersonOpen,
     const sellHint = booking.priceOverride?.isManual
         ? `${detailMessages.summaryPriceOverride}: ${booking.priceOverride.reason}`
         : booking.sellCurrency;
-    return (_jsxs("div", { "data-slot": "booking-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, className: "transition-colors hover:text-foreground", children: detailMessages.breadcrumbBookings })) : (_jsx("span", { children: detailMessages.breadcrumbBookings })), _jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { className: "font-normal text-foreground", children: booking.bookingNumber })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: booking.bookingNumber }), _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: getBookingStatusLabel(booking.status, messages.common.bookingStatusLabels) })] }), _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.editAction] }), _jsxs(DropdownMenuItem, { onClick: () => setStatusDialogOpen(true), children: [_jsx(RefreshCw, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.changeStatusAction] }), canCancel ? (_jsxs(DropdownMenuItem, { onClick: () => setCancelDialogOpen(true), children: [_jsx(Ban, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.cancelBookingAction] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: remove.isPending, onClick: async () => {
+    return (_jsxs("div", { "data-slot": "booking-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [hideBreadcrumb ? null : (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, className: "transition-colors hover:text-foreground", children: detailMessages.breadcrumbBookings })) : (_jsx("span", { children: detailMessages.breadcrumbBookings })), _jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { className: "font-normal text-foreground", children: booking.bookingNumber })] })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: booking.bookingNumber }), _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: getBookingStatusLabel(booking.status, messages.common.bookingStatusLabels) })] }), _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.editAction] }), _jsxs(DropdownMenuItem, { onClick: () => setStatusDialogOpen(true), children: [_jsx(RefreshCw, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.changeStatusAction] }), canCancel ? (_jsxs(DropdownMenuItem, { onClick: () => setCancelDialogOpen(true), children: [_jsx(Ban, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.cancelBookingAction] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: remove.isPending, onClick: async () => {
                                     if (confirm(detailMessages.deleteConfirm)) {
                                         await remove.mutateAsync(id);
                                         onBack?.();
                                     }
                                 }, children: [_jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" }), detailMessages.deleteAction] })] })] }), slots?.header?.(booking), _jsx(Card, { children: _jsxs(CardContent, { className: "grid grid-cols-2 gap-6 py-6 sm:grid-cols-4", children: [_jsx(SummaryStat, { label: detailMessages.summarySell, value: formatAmount(booking.sellAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue), hint: sellHint }), _jsx(SummaryStat, { label: detailMessages.summaryCostMargin, value: formatAmount(booking.costAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue), hint: formatMargin(booking.marginPercent, detailMessages.noValue) }), _jsx(SummaryStat, { label: detailMessages.summaryDates, value: booking.startDate
                                 ? `${formatDate(booking.startDate, resolvedLocale, detailMessages.noValue)} - ${formatDate(booking.endDate, resolvedLocale, detailMessages.noValue)}`
-                                : detailMessages.tbd, icon: _jsx(Calendar, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(SummaryStat, { label: detailMessages.summaryTravelers, value: booking.pax != null ? String(booking.pax) : detailMessages.noValue, icon: _jsx(Users, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), booking.personId ? (_jsx(SummaryLink, { label: detailMessages.summaryPerson, id: booking.personId, onOpen: onPersonOpen })) : null, booking.organizationId ? (_jsx(SummaryLink, { label: detailMessages.summaryOrganization, id: booking.organizationId, onOpen: onOrganizationOpen })) : null, _jsx(SummaryStat, { label: detailMessages.summaryCreated, value: formatDate(booking.createdAt, resolvedLocale, detailMessages.noValue) }), _jsx(SummaryStat, { label: detailMessages.summaryUpdated, value: formatDate(booking.updatedAt, resolvedLocale, detailMessages.noValue) })] }) }), slots?.afterSummary?.(booking), _jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { className: "w-full justify-start", children: [_jsx(TabsTrigger, { value: "overview", children: detailMessages.tabOverview }), _jsx(TabsTrigger, { value: "travelers", children: detailMessages.tabTravelers }), _jsx(TabsTrigger, { value: "finance", children: detailMessages.tabFinance }), _jsx(TabsTrigger, { value: "suppliers", children: detailMessages.tabSuppliers }), _jsx(TabsTrigger, { value: "documents", children: detailMessages.tabDocuments }), _jsx(TabsTrigger, { value: "activity", children: detailMessages.tabActivity })] }), _jsxs(TabsContent, { value: "overview", className: "mt-4 flex flex-col gap-6", children: [slots?.overviewStart?.(booking), _jsx(BookingItemList, { bookingId: id }), _jsx(BookingGroupSection, { bookingId: id }), visibleInternalNotes(booking.internalNotes) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "py-5", children: [_jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: detailMessages.internalNotesLabel }), _jsx("p", { className: "whitespace-pre-wrap text-sm", children: visibleInternalNotes(booking.internalNotes) })] }) })) : null, slots?.overviewEnd?.(booking)] }), _jsxs(TabsContent, { value: "travelers", className: "mt-4 flex flex-col gap-6", children: [slots?.travelersStart?.(booking), _jsx(BookingBillingContextCard, { booking: booking }), _jsx(TravelerList, { bookingId: id, autoReveal: true })] }), _jsxs(TabsContent, { value: "finance", className: "mt-4 flex flex-col gap-6", children: [onCollectPayment ? (_jsx("div", { className: "flex items-center justify-end", children: _jsx(Button, { onClick: () => onCollectPayment(booking), children: detailMessages.collectPaymentAction }) })) : null, slots?.financeStart?.(booking), _jsx(BookingPaymentsSummary, { bookingId: id, variant: "admin" }), _jsx(BookingPaymentScheduleList, { bookingId: id }), _jsx(BookingGuaranteeList, { bookingId: id }), slots?.financeEnd?.(booking)] }), _jsx(TabsContent, { value: "suppliers", className: "mt-4", children: _jsx(SupplierStatusList, { bookingId: id }) }), _jsx(TabsContent, { value: "documents", className: "mt-4 flex flex-col gap-4", children: slots?.documents ? (slots.documents(booking)) : (_jsx("p", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: detailMessages.documentsSlotEmpty })) }), _jsxs(TabsContent, { value: "activity", className: "mt-4 flex flex-col gap-6", children: [_jsx(BookingActivityTimeline, { bookingId: id }), _jsx(BookingNotes, { bookingId: id }), slots?.activityEnd?.(booking)] })] }), _jsx(BookingDialog, { open: editOpen, onOpenChange: setEditOpen, booking: booking }), _jsx(StatusChangeDialog, { open: statusDialogOpen, onOpenChange: setStatusDialogOpen, bookingId: id, currentStatus: booking.status }), _jsx(BookingCancellationDialog, { open: cancelDialogOpen, onOpenChange: setCancelDialogOpen, booking: booking })] }));
+                                : detailMessages.tbd, icon: _jsx(Calendar, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(SummaryStat, { label: detailMessages.summaryTravelers, value: booking.pax != null ? String(booking.pax) : detailMessages.noValue, icon: _jsx(Users, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), booking.personId ? (_jsx(SummaryPersonLink, { label: detailMessages.summaryPerson, personId: booking.personId, onOpen: onPersonOpen })) : null, booking.organizationId ? (_jsx(SummaryOrganizationLink, { label: detailMessages.summaryOrganization, organizationId: booking.organizationId, onOpen: onOrganizationOpen })) : null, _jsx(SummaryStat, { label: detailMessages.summaryCreated, value: formatDate(booking.createdAt, resolvedLocale, detailMessages.noValue) }), _jsx(SummaryStat, { label: detailMessages.summaryUpdated, value: formatDate(booking.updatedAt, resolvedLocale, detailMessages.noValue) })] }) }), slots?.afterSummary?.(booking), _jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { className: "w-full justify-start", children: [_jsx(TabsTrigger, { value: "overview", children: detailMessages.tabOverview }), _jsx(TabsTrigger, { value: "travelers", children: detailMessages.tabTravelers }), _jsx(TabsTrigger, { value: "finance", children: detailMessages.tabFinance }), slots?.invoicesTab ? (_jsx(TabsTrigger, { value: "invoices", children: slots.invoicesTab.label ?? detailMessages.tabInvoices })) : null, _jsx(TabsTrigger, { value: "suppliers", children: detailMessages.tabSuppliers }), _jsx(TabsTrigger, { value: "documents", children: detailMessages.tabDocuments }), _jsx(TabsTrigger, { value: "activity", children: detailMessages.tabActivity }), slots?.ledgerTab ? (_jsx(TabsTrigger, { value: "ledger", children: slots.ledgerTab.label ?? detailMessages.tabLedger })) : null] }), _jsxs(TabsContent, { value: "overview", className: "mt-4 flex flex-col gap-6", children: [slots?.overviewStart?.(booking), _jsx(BookingItemList, { bookingId: id }), _jsx(BookingGroupSection, { bookingId: id }), visibleInternalNotes(booking.internalNotes) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "py-5", children: [_jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: detailMessages.internalNotesLabel }), _jsx("p", { className: "whitespace-pre-wrap text-sm", children: visibleInternalNotes(booking.internalNotes) })] }) })) : null, slots?.overviewEnd?.(booking)] }), _jsxs(TabsContent, { value: "travelers", className: "mt-4 flex flex-col gap-6", children: [slots?.travelersStart?.(booking), _jsx(BookingBillingContextCard, { booking: booking }), _jsx(TravelerList, { bookingId: id, autoReveal: true })] }), _jsxs(TabsContent, { value: "finance", className: "mt-4 flex flex-col gap-6", children: [onCollectPayment || onRecordPayment ? (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [onRecordPayment ? (_jsx(Button, { variant: "outline", onClick: () => onRecordPayment(booking), children: detailMessages.recordPaymentAction })) : null, onCollectPayment ? (_jsx(Button, { onClick: () => onCollectPayment(booking), children: detailMessages.collectPaymentAction })) : null] })) : null, slots?.financeStart?.(booking), _jsx(BookingPaymentsSummary, { bookingId: id, variant: "admin" }), _jsx(BookingPaymentScheduleList, { bookingId: id }), _jsx(BookingGuaranteeList, { bookingId: id }), slots?.financeEnd?.(booking)] }), slots?.invoicesTab ? (_jsx(TabsContent, { value: "invoices", className: "mt-4 flex flex-col gap-6", children: renderTabSlot(slots.invoicesTab.content, booking) })) : null, _jsx(TabsContent, { value: "suppliers", className: "mt-4", children: _jsx(SupplierStatusList, { bookingId: id }) }), _jsx(TabsContent, { value: "documents", className: "mt-4 flex flex-col gap-4", children: slots?.documents ? (slots.documents(booking)) : (_jsx("p", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: detailMessages.documentsSlotEmpty })) }), _jsxs(TabsContent, { value: "activity", className: "mt-4 flex flex-col gap-6", children: [_jsx(BookingActivityTimeline, { bookingId: id }), _jsx(BookingNotes, { bookingId: id }), slots?.activityEnd?.(booking)] }), slots?.ledgerTab ? (_jsx(TabsContent, { value: "ledger", className: "mt-4 flex flex-col gap-6", children: renderTabSlot(slots.ledgerTab.content, booking) })) : null] }), _jsx(BookingDialog, { open: editOpen, onOpenChange: setEditOpen, booking: booking }), _jsx(StatusChangeDialog, { open: statusDialogOpen, onOpenChange: setStatusDialogOpen, bookingId: id, currentStatus: booking.status }), _jsx(BookingCancellationDialog, { open: cancelDialogOpen, onOpenChange: setCancelDialogOpen, booking: booking })] }));
 }
+function renderTabSlot(content, booking) {
+    return typeof content === "function" ? content(booking) : content;
+}
+/**
+ * Billing/contact card for the Travelers tab. Snapshot fields on the
+ * booking row are the source of truth (they capture contact info at
+ * the time of booking). When they're empty — typically for bookings
+ * created via flows that don't snapshot — fall back to the linked CRM
+ * person / organization so the operator still sees who they're
+ * billing.
+ */
 export function BookingBillingContextCard({ booking }) {
     const messages = useBookingsUiMessagesOrDefault().bookingDetailPage;
-    const payerName = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ");
+    const [editOpen, setEditOpen] = useState(false);
+    const person = usePerson(booking.personId ?? undefined, {
+        enabled: Boolean(booking.personId),
+    }).data;
+    const organization = useOrganization(booking.organizationId ?? undefined, {
+        enabled: Boolean(booking.organizationId) && !booking.personId,
+    }).data;
+    const payerName = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ") ||
+        (person ? [person.firstName, person.lastName].filter(Boolean).join(" ") : "") ||
+        organization?.name ||
+        "";
+    const email = booking.contactEmail ?? person?.email ?? null;
+    const phone = booking.contactPhone ?? person?.phone ?? null;
     const address = [
         booking.contactAddressLine1,
         booking.contactCity,
@@ -60,7 +85,7 @@ export function BookingBillingContextCard({ booking }) {
     ]
         .filter(Boolean)
         .join(", ");
-    return (_jsx(Card, { children: _jsxs(CardContent, { className: "grid gap-4 py-5 md:grid-cols-4", children: [_jsx(BillingField, { label: messages.billingPayer, value: payerName || messages.noValue }), _jsx(BillingField, { label: messages.billingEmail, value: booking.contactEmail ?? messages.noValue, icon: _jsx(Mail, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(BillingField, { label: messages.billingPhone, value: booking.contactPhone ?? messages.noValue, icon: _jsx(Phone, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(BillingField, { label: messages.billingAddress, value: address || messages.noValue, icon: _jsx(MapPin, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })] }) }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between pb-3", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": "true" }), messages.billingPayer] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": "true" }), messages.editAction] })] }), _jsxs(CardContent, { className: "grid gap-4 md:grid-cols-4", children: [_jsx(BillingField, { label: messages.billingPayer, value: payerName || messages.noValue }), _jsx(BillingField, { label: messages.billingEmail, value: email ?? messages.noValue, icon: _jsx(Mail, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(BillingField, { label: messages.billingPhone, value: phone ?? messages.noValue, icon: _jsx(Phone, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(BillingField, { label: messages.billingAddress, value: address || messages.noValue, icon: _jsx(MapPin, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })] })] }), _jsx(BookingBillingDialog, { open: editOpen, onOpenChange: setEditOpen, booking: booking })] }));
 }
 function SummaryStat({ label, value, hint, icon, }) {
     return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [icon, label] }), _jsx("div", { className: "text-base font-semibold tabular-nums", children: value }), hint ? _jsx("div", { className: "text-xs text-muted-foreground", children: hint }) : null] }));
@@ -71,8 +96,19 @@ function BillingField({ label, value, icon }) {
 function ActionMenu({ children }) {
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: children })] }));
 }
-function SummaryLink({ label, id, onOpen, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(id), className: "truncate text-left font-mono text-primary text-xs hover:underline", children: id })) : (_jsx("span", { className: "truncate font-mono text-xs", children: id }))] }));
+function SummaryPersonLink({ label, personId, onOpen, }) {
+    // Hydrate the CRM person so the header shows a human name with a
+    // link to the detail page, falling back to the raw id while the
+    // record is in flight (or when the person was hard-deleted).
+    const person = usePerson(personId).data;
+    const name = person ? [person.firstName, person.lastName].filter(Boolean).join(" ").trim() : "";
+    const display = name || personId;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(personId), className: "truncate text-left text-sm font-medium text-primary hover:underline", children: display })) : (_jsx("span", { className: "truncate text-sm font-medium", children: display }))] }));
+}
+function SummaryOrganizationLink({ label, organizationId, onOpen, }) {
+    const organization = useOrganization(organizationId).data;
+    const display = organization?.name || organizationId;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(organizationId), className: "truncate text-left text-sm font-medium text-primary hover:underline", children: display })) : (_jsx("span", { className: "truncate text-sm font-medium", children: display }))] }));
 }
 function getBookingStatusLabel(status, labels) {
     return labels[status] ?? status;
@@ -100,6 +136,13 @@ function formatDate(iso, locale, empty) {
         year: "numeric",
     });
 }
+/**
+ * Strip internal markers (`__contract_acceptance__:`,
+ * `__payment_policy_source__:`) before rendering — those are
+ * server-side relays, not human-readable notes. Their canonical home
+ * is on the contract signature row / schedule history; surfacing them
+ * here just confuses operators with raw JSON.
+ */
 function visibleInternalNotes(notes) {
     if (!notes)
         return null;

package/dist/components/booking-item-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-item-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-list.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAqLlE"}
+{"version":3,"file":"booking-item-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-list.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAwMlE"}

package/dist/components/booking-item-list.js

@@ -6,7 +6,6 @@ import { Calendar, ChevronDown, ChevronRight, Package, Pencil, Plus, Trash2 } fr
 import * as React from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 import { BookingItemDialog } from "./booking-item-dialog.js";
-import { BookingItemTravelers } from "./booking-item-travelers.js";
 const statusVariant = {
     draft: "outline",
     on_hold: "secondary",
@@ -34,7 +33,16 @@ export function BookingItemList({ bookingId }) {
                                                                 setExpandedItemId(isExpanded ? null : item.id);
                                                             }, className: "text-muted-foreground hover:text-foreground", "aria-label": isExpanded
                                                                 ? messages.bookingItemList.actions.collapseItem
-                                                                : messages.bookingItemList.actions.expandItem, children: isExpanded ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })) }) }), _jsx("td", { className: "p-2 font-medium", children: item.title }), _jsx("td", { className: "p-2", children: messages.bookingItemDialog.itemTypeLabels[item.itemType] }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: statusVariant[item.status] ?? "secondary", children: messages.bookingItemDialog.itemStatusLabels[item.status] }) }), _jsx("td", { className: "p-2 text-right font-mono", children: item.quantity }), _jsx("td", { className: "p-2 text-right font-mono", children: item.totalSellAmountCents == null
+                                                                : messages.bookingItemList.actions.expandItem, children: isExpanded ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })) }) }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: item.productNameSnapshot ?? item.title }), (() => {
+                                                                    const subtitleParts = [
+                                                                        item.optionNameSnapshot,
+                                                                        item.unitNameSnapshot ??
+                                                                            (item.productNameSnapshot ? item.title : null),
+                                                                    ].filter((part) => Boolean(part));
+                                                                    if (subtitleParts.length === 0)
+                                                                        return null;
+                                                                    return (_jsx("span", { className: "text-muted-foreground text-xs", children: subtitleParts.join(" · ") }));
+                                                                })()] }) }), _jsx("td", { className: "p-2", children: messages.bookingItemDialog.itemTypeLabels[item.itemType] }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: statusVariant[item.status] ?? "secondary", children: messages.bookingItemDialog.itemStatusLabels[item.status] }) }), _jsx("td", { className: "p-2 text-right font-mono", children: item.quantity }), _jsx("td", { className: "p-2 text-right font-mono", children: item.totalSellAmountCents == null
                                                             ? messages.bookingItemList.values.totalUnavailable
                                                             : formatCurrency(item.totalSellAmountCents / 100, item.sellCurrency) }), _jsx("td", { className: "p-2 text-right font-mono text-muted-foreground", children: item.totalCostAmountCents == null || !item.costCurrency
                                                             ? messages.bookingItemList.values.costUnavailable
@@ -48,7 +56,7 @@ export function BookingItemList({ bookingId }) {
                                                                         if (confirm(messages.bookingItemList.actions.deleteConfirm)) {
                                                                             remove.mutate(item.id);
                                                                         }
-                                                                    }, className: "text-muted-foreground hover:text-destructive", "aria-label": messages.bookingItemList.actions.deleteItem, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }), isExpanded && (_jsxs("tr", { className: "border-b last:border-b-0 bg-muted/10", children: [_jsx("td", {}), _jsx("td", { colSpan: 8, className: "p-3", children: _jsx(ItemDetailPanel, { bookingId: bookingId, item: item }) })] }))] }, item.id));
+                                                                    }, className: "text-muted-foreground hover:text-destructive", "aria-label": messages.bookingItemList.actions.deleteItem, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }), isExpanded && (_jsxs("tr", { className: "border-b last:border-b-0 bg-muted/10", children: [_jsx("td", {}), _jsx("td", { colSpan: 8, className: "p-3", children: _jsx(ItemDetailPanel, { item: item }) })] }))] }, item.id));
                                 }) })] }) })) }), _jsx(BookingItemDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
                     setDialogOpen(nextOpen);
                     if (!nextOpen) {
@@ -66,11 +74,11 @@ export function BookingItemList({ bookingId }) {
  * per-item travelers list. Compact two-column layout on wide
  * screens, stacks on narrow ones.
  */
-function ItemDetailPanel({ bookingId, item, }) {
+function ItemDetailPanel({ item }) {
     const messages = useBookingsUiMessagesOrDefault();
     const { formatCurrency } = useBookingsUiI18nOrDefault();
     const dateRange = formatItemDateRange(item);
-    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(DetailBlock, { label: messages.bookingItemList.detail.description, children: item.description ? (_jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.description })) : (_jsx("p", { className: "text-muted-foreground text-xs italic", children: messages.bookingItemList.detail.noDescription })) }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(DetailBlock, { label: messages.bookingItemList.detail.dates, children: _jsxs("div", { className: "flex items-baseline gap-1.5 text-sm", children: [_jsx(Calendar, { className: "h-3.5 w-3.5 self-center text-muted-foreground" }), dateRange ?? (_jsx("span", { className: "text-muted-foreground text-xs", children: messages.bookingItemList.values.serviceDateUnavailable }))] }) }), _jsx(DetailBlock, { label: messages.bookingItemList.detail.cost, children: item.totalCostAmountCents != null && item.costCurrency ? (_jsxs("div", { className: "text-sm", children: [_jsx("span", { className: "font-mono", children: formatCurrency(item.totalCostAmountCents / 100, item.costCurrency) }), item.unitCostAmountCents != null && item.quantity > 1 ? (_jsxs("span", { className: "ml-1.5 text-muted-foreground text-xs", children: ["(", formatCurrency(item.unitCostAmountCents / 100, item.costCurrency), " \u00D7", " ", item.quantity, ")"] })) : null] })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: messages.bookingItemList.values.costUnavailable })) })] })] }), _jsx(BookingItemTravelers, { bookingId: bookingId, itemId: item.id })] }));
+    return (_jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(DetailBlock, { label: messages.bookingItemList.detail.description, children: item.description ? (_jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.description })) : (_jsx("p", { className: "text-muted-foreground text-xs italic", children: messages.bookingItemList.detail.noDescription })) }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(DetailBlock, { label: messages.bookingItemList.detail.dates, children: _jsxs("div", { className: "flex items-baseline gap-1.5 text-sm", children: [_jsx(Calendar, { className: "h-3.5 w-3.5 self-center text-muted-foreground" }), dateRange ?? (_jsx("span", { className: "text-muted-foreground text-xs", children: messages.bookingItemList.values.serviceDateUnavailable }))] }) }), _jsx(DetailBlock, { label: messages.bookingItemList.detail.cost, children: item.totalCostAmountCents != null && item.costCurrency ? (_jsxs("div", { className: "text-sm", children: [_jsx("span", { className: "font-mono", children: formatCurrency(item.totalCostAmountCents / 100, item.costCurrency) }), item.unitCostAmountCents != null && item.quantity > 1 ? (_jsxs("span", { className: "ml-1.5 text-muted-foreground text-xs", children: ["(", formatCurrency(item.unitCostAmountCents / 100, item.costCurrency), " \u00D7", " ", item.quantity, ")"] })) : null] })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: messages.bookingItemList.values.costUnavailable })) })] })] }) }));
 }
 function DetailBlock({ label, children, }) {
     return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-muted-foreground text-xs uppercase tracking-wide", children: label }), _jsx("div", { children: children })] }));
@@ -87,6 +95,11 @@ function DetailBlock({ label, children, }) {
  * whatever the consumer's locale is.
  */
 function formatItemDateRange(item) {
+    // Pre-rendered departure label wins — it carries timezone + any
+    // start-point context the operator entered at booking time. The
+    // structured fields are still rendered as fallback for legacy rows.
+    if (item.departureLabelSnapshot)
+        return item.departureLabelSnapshot;
     const start = item.startsAt ? new Date(item.startsAt) : null;
     const end = item.endsAt ? new Date(item.endsAt) : null;
     if (start && Number.isFinite(start.getTime())) {

package/dist/components/booking-list-filters.d.ts

@@ -9,6 +9,12 @@ export interface BookingListFiltersPopoverProps {
     onProductIdChange: (productId: string | null) => void;
     optionId: string | null;
     onOptionIdChange: (optionId: string | null) => void;
+    /**
+     * Filter to bookings on a specific departure (availability slot).
+     * Picker is only populated when a product is selected.
+     */
+    availabilitySlotId: string | null;
+    onAvailabilitySlotIdChange: (availabilitySlotId: string | null) => void;
     supplierId: string | null;
     onSupplierIdChange: (supplierId: string | null) => void;
     productCategoryId: string | null;
@@ -31,5 +37,5 @@ export interface BookingListFiltersPopoverProps {
     onPaxMaxChange: (paxMax: string) => void;
     onFiltersChanged: () => void;
 }
-export declare function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, }: BookingListFiltersPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, availabilitySlotId, onAvailabilitySlotIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, }: BookingListFiltersPopoverProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=booking-list-filters.d.ts.map

package/dist/components/booking-list-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-list-filters.d.ts","sourceRoot":"","sources":["../../src/components/booking-list-filters.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,kBAAkB,YAAY,CAAA;AAE3C,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,yBAAyB,EAAE,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,sBAAsB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/D,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAA;IAC5D,iBAAiB,EAAE,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAA;IACzF,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,yBAAyB,CAAC,EACxC,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,sBAAsB,EACtB,SAAS,EACT,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,MAAM,EACN,cAAc,EACd,gBAAgB,GACjB,EAAE,8BAA8B,2CAiShC"}
+{"version":3,"file":"booking-list-filters.d.ts","sourceRoot":"","sources":["../../src/components/booking-list-filters.tsx"],"names":[],"mappings":"AAkCA,eAAO,MAAM,kBAAkB,YAAY,CAAA;AAE3C,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD;;;OAGG;IACH,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,0BAA0B,EAAE,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,yBAAyB,EAAE,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,sBAAsB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/D,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAA;IAC5D,iBAAiB,EAAE,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAA;IACzF,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,yBAAyB,CAAC,EACxC,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,EAC1B,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,sBAAsB,EACtB,SAAS,EACT,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,MAAM,EACN,cAAc,EACd,gBAAgB,GACjB,EAAE,8BAA8B,2CAqUhC"}

package/dist/components/booking-list-filters.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSlots } from "@voyantjs/availability-react";
 import { bookingStatuses } from "@voyantjs/bookings-react";
 import { useOrganizations, usePeople } from "@voyantjs/crm-react";
 import { useProductCategories, useProductOptions, useProducts } from "@voyantjs/products-react";
@@ -16,13 +17,14 @@ import { ListFilter } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 export const BOOKING_STATUS_ALL = "__all__";
-export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, }) {
+export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, availabilitySlotId, onAvailabilitySlotIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, }) {
     const messages = useBookingsUiMessagesOrDefault();
     const filterMessages = messages.bookingList.filters;
     const statusLabels = messages.common.bookingStatusLabels;
     const [selectedProduct, setSelectedProduct] = React.useState(null);
     const [productSearch, setProductSearch] = React.useState("");
     const [selectedOption, setSelectedOption] = React.useState(null);
+    const [selectedSlot, setSelectedSlot] = React.useState(null);
     const [selectedSupplier, setSelectedSupplier] = React.useState(null);
     const [supplierSearch, setSupplierSearch] = React.useState("");
     const [selectedProductCategory, setSelectedProductCategory] = React.useState(null);
@@ -43,6 +45,15 @@ export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCoun
         enabled: productId !== null,
     });
     const productOptions = optionsData?.data ?? [];
+    // Departure picker is product-scoped. The list endpoint orders
+    // results most-recent-first; capping at 50 keeps the dropdown
+    // workable while still surfacing the active season's slots.
+    const { data: slotsData } = useSlots({
+        productId: productId ?? undefined,
+        limit: 50,
+        enabled: productId !== null,
+    });
+    const slots = slotsData?.data ?? [];
     const { data: suppliersData } = useSuppliers({
         search: supplierSearch || undefined,
         limit: 20,
@@ -91,7 +102,17 @@ export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCoun
                                                 setSelectedOption(match);
                                         }
                                         markChanged();
-                                    }, items: productOptions, selectedItem: selectedOption, getKey: (option) => option.id, getLabel: (option) => option.name, getSecondary: (option) => option.code ?? undefined, placeholder: filterMessages.option, emptyText: productId ? filterMessages.optionEmpty : filterMessages.optionNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-category", children: filterMessages.categoryLabel }), _jsx(AsyncCombobox, { value: productCategoryId, onChange: (value) => {
+                                    }, items: productOptions, selectedItem: selectedOption, getKey: (option) => option.id, getLabel: (option) => option.name, getSecondary: (option) => option.code ?? undefined, placeholder: filterMessages.option, emptyText: productId ? filterMessages.optionEmpty : filterMessages.optionNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-departure", children: filterMessages.departureLabel }), _jsx(AsyncCombobox, { value: availabilitySlotId, onChange: (value) => {
+                                        onAvailabilitySlotIdChange(value);
+                                        if (!value)
+                                            setSelectedSlot(null);
+                                        else {
+                                            const match = slots.find((slot) => slot.id === value);
+                                            if (match)
+                                                setSelectedSlot(match);
+                                        }
+                                        markChanged();
+                                    }, items: slots, selectedItem: selectedSlot, getKey: (slot) => slot.id, getLabel: (slot) => formatSlotLabel(slot), getSecondary: (slot) => slot.status, placeholder: filterMessages.departure, emptyText: productId ? filterMessages.departureEmpty : filterMessages.departureNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-category", children: filterMessages.categoryLabel }), _jsx(AsyncCombobox, { value: productCategoryId, onChange: (value) => {
                                         onProductCategoryIdChange(value);
                                         if (!value)
                                             setSelectedProductCategory(null);
@@ -146,3 +167,24 @@ function formatPersonName(person) {
     const name = [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
     return name || person.email || person.id;
 }
+/**
+ * Human-friendly departure label. Renders the local date + start time
+ * in the slot's own timezone so the operator sees what the customer
+ * sees, not whatever the admin's browser locale converts it to.
+ */
+function formatSlotLabel(slot) {
+    try {
+        const formatter = new Intl.DateTimeFormat(undefined, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: slot.timezone,
+        });
+        return formatter.format(new Date(slot.startsAt));
+    }
+    catch {
+        return slot.startsAt;
+    }
+}

package/dist/components/booking-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,0BAA0B,CAAA;AAejC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAgBD,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,GACd,GAAE,gBAAqB,2CAwVvB"}
+{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,0BAA0B,CAAA;AAejC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAiBD,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,GACd,GAAE,gBAAqB,2CA8WvB"}

package/dist/components/booking-list.js

@@ -19,9 +19,10 @@ const SORTABLE_COLUMNS = {
     pax: "pax",
     startDate: "startDate",
     endDate: "endDate",
+    createdAt: "createdAt",
 };
 const SKELETON_ROW_COUNT = 6;
-const TABLE_COLUMN_COUNT = 7;
+const TABLE_COLUMN_COUNT = 9;
 export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, headerActions, } = {}) {
     const [search, setSearch] = React.useState("");
     const [status, setStatus] = React.useState(BOOKING_STATUS_ALL);
@@ -31,6 +32,7 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
     const [productCategoryId, setProductCategoryId] = React.useState(null);
     const [personId, setPersonId] = React.useState(null);
     const [organizationId, setOrganizationId] = React.useState(null);
+    const [availabilitySlotId, setAvailabilitySlotId] = React.useState(null);
     const [dateRange, setDateRange] = React.useState(null);
     const [paxMin, setPaxMin] = React.useState("");
     const [paxMax, setPaxMax] = React.useState("");
@@ -49,6 +51,7 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
         status: status === BOOKING_STATUS_ALL ? undefined : status,
         productId: productId ?? undefined,
         optionId: optionId ?? undefined,
+        availabilitySlotId: availabilitySlotId ?? undefined,
         supplierId: supplierId ?? undefined,
         productCategoryId: productCategoryId ?? undefined,
         personId: personId ?? undefined,
@@ -93,6 +96,7 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
     const activeFilterCount = (status !== BOOKING_STATUS_ALL ? 1 : 0) +
         (productId !== null ? 1 : 0) +
         (optionId !== null ? 1 : 0) +
+        (availabilitySlotId !== null ? 1 : 0) +
         (supplierId !== null ? 1 : 0) +
         (productCategoryId !== null ? 1 : 0) +
         (personId !== null ? 1 : 0) +
@@ -105,6 +109,7 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
         setStatus(BOOKING_STATUS_ALL);
         setProductId(null);
         setOptionId(null);
+        setAvailabilitySlotId(null);
         setSupplierId(null);
         setProductCategoryId(null);
         setPersonId(null);
@@ -120,19 +125,23 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
     return (_jsxs("div", { "data-slot": "booking-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "bookings-search", className: "sr-only", children: messages.bookingList.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: "bookings-search", placeholder: messages.bookingList.searchPlaceholder, value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     resetOffset();
-                                }, className: "pl-9" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: setProductId, optionId: optionId, onOptionIdChange: setOptionId, supplierId: supplierId, onSupplierIdChange: setSupplierId, productCategoryId: productCategoryId, onProductCategoryIdChange: setProductCategoryId, personId: personId, onPersonIdChange: setPersonId, organizationId: organizationId, onOrganizationIdChange: setOrganizationId, dateRange: dateRange, onDateRangeChange: setDateRange, paxMin: paxMin, onPaxMinChange: setPaxMin, paxMax: paxMax, onPaxMaxChange: setPaxMax, onFiltersChanged: resetOffset }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), filterMessages.clear] })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [headerActions, _jsxs(Button, { onClick: () => {
+                                }, className: "pl-9" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: (next) => {
+                            setProductId(next);
+                            // Slot picker is product-scoped; clear when the product changes.
+                            setAvailabilitySlotId(null);
+                        }, optionId: optionId, onOptionIdChange: setOptionId, availabilitySlotId: availabilitySlotId, onAvailabilitySlotIdChange: setAvailabilitySlotId, supplierId: supplierId, onSupplierIdChange: setSupplierId, productCategoryId: productCategoryId, onProductCategoryIdChange: setProductCategoryId, personId: personId, onPersonIdChange: setPersonId, organizationId: organizationId, onOrganizationIdChange: setOrganizationId, dateRange: dateRange, onDateRangeChange: setDateRange, paxMin: paxMin, onPaxMinChange: setPaxMin, paxMax: paxMax, onPaxMaxChange: setPaxMax, onFiltersChanged: resetOffset }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), filterMessages.clear] })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [headerActions, _jsxs(Button, { onClick: () => {
                                     if (onCreateBooking) {
                                         onCreateBooking();
                                         return;
                                     }
                                     setEditing(undefined);
                                     setDialogOpen(true);
-                                }, children: [_jsx(Plus, { className: "mr-2 size-4" }), messages.bookingList.newBooking] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.bookingNumber, field: SORTABLE_COLUMNS.bookingNumber, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.whatBooked }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.endDate, field: SORTABLE_COLUMNS.endDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(BookingTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: messages.bookingList.empty }) })) : (bookings.map((booking) => (_jsxs(TableRow, { onClick: () => handleSelect(booking), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: booking.bookingNumber }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore) }), _jsx(TableCell, { children: _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4" }), messages.bookingList.newBooking] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.bookingNumber, field: SORTABLE_COLUMNS.bookingNumber, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.whatBooked }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.endDate, field: SORTABLE_COLUMNS.endDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.lead }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.createdAt, field: SORTABLE_COLUMNS.createdAt, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(BookingTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: messages.bookingList.empty }) })) : (bookings.map((booking) => (_jsxs(TableRow, { onClick: () => handleSelect(booking), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: booking.bookingNumber }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore) }), _jsx(TableCell, { children: _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
                                             ? "—"
                                             : `${formatNumber(booking.sellAmountCents / 100, {
                                                 minimumFractionDigits: 2,
                                                 maximumFractionDigits: 2,
-                                            })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsx(TableCell, { children: formatBookingDateTime(booking.startsAt ?? booking.startDate, formatDateTime) }), _jsx(TableCell, { children: formatBookingDateTime(booking.endsAt ?? booking.endDate, formatDateTime) })] }, booking.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(messages.bookingList.showingSummary, {
+                                            })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsx(TableCell, { children: formatBookingDateTime(booking.startsAt ?? booking.startDate, formatDateTime) }), _jsx(TableCell, { children: formatBookingDateTime(booking.endsAt ?? booking.endDate, formatDateTime) }), _jsx(TableCell, { children: formatLead(booking) }), _jsx(TableCell, { children: formatBookingDateTime(booking.createdAt, formatDateTime) })] }, booking.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(messages.bookingList.showingSummary, {
                             count: bookings.length,
                             total,
                         }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: messages.bookingList.previousPage }), _jsx("span", { children: formatMessage(messages.bookingList.pageSummary, {
@@ -158,9 +167,8 @@ function formatBookingItems(booking, moreTemplate) {
     if (!first)
         return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
     const label = first.productName ?? first.title;
-    if (rest.length === 0)
-        return label;
-    return (_jsxs("span", { children: [label, _jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(moreTemplate, { count: rest.length }) })] }));
+    const moreSuffix = rest.length === 0 ? "" : ` ${formatMessage(moreTemplate, { count: rest.length })}`;
+    return (_jsxs("div", { className: "max-w-[320px] truncate", title: `${label}${moreSuffix}`, children: [label, rest.length > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(moreTemplate, { count: rest.length }) })) : null] }));
 }
 function formatBookingDateTime(value, formatDateTime) {
     if (!value)
@@ -170,3 +178,9 @@ function formatBookingDateTime(value, formatDateTime) {
     }
     return formatDateTime(value);
 }
+function formatLead(booking) {
+    const name = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ").trim();
+    if (name)
+        return name;
+    return booking.contactEmail ?? "—";
+}

package/dist/components/supplier-status-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"supplier-status-list.d.ts","sourceRoot":"","sources":["../../src/components/supplier-status-list.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAA;CAClB;AASD,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CA+GxE"}
+{"version":3,"file":"supplier-status-list.d.ts","sourceRoot":"","sources":["../../src/components/supplier-status-list.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAA;CAClB;AASD,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAyIxE"}