@voyantjs/bookings-ui 0.81.14 → 0.81.16

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

@@ -1,13 +1,14 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { bookingStatusBadgeVariant, useBooking, useBookingMutation, } from "@voyantjs/bookings-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBooking, useBookingItems, useBookingMutation, } from "@voyantjs/bookings-react";
 import { useOrganization, usePerson } from "@voyantjs/crm-react";
-import { useInvoiceMutation } from "@voyantjs/finance-react";
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@voyantjs/ui/components";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, cn, } from "@voyantjs/ui/components";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@voyantjs/ui/components/collapsible";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
-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 { Tooltip, TooltipContent, TooltipTrigger } from "@voyantjs/ui/components/tooltip";
+import { Ban, ChevronDown, ChevronRight, CreditCard, Mail, MapPin, Pencil, Phone, Plus, RefreshCw, Trash2, } from "lucide-react";
+import { Fragment, useState } from "react";
+import { formatMessage, 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";
@@ -16,13 +17,13 @@ import { BookingGroupSection } from "./booking-group-section.js";
 import { BookingGuaranteeList } from "./booking-guarantee-list.js";
 import { BookingItemList } from "./booking-item-list.js";
 import { BookingNotes } from "./booking-notes.js";
-import { BookingPaymentReconciliationBanner } from "./booking-payment-reconciliation-banner.js";
 import { BookingPaymentScheduleList } from "./booking-payment-schedule-list.js";
 import { BookingPaymentsSummary, } from "./booking-payments-summary.js";
+import { StatusBadge } from "./status-badge.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, hideBreadcrumb, onBack, onPersonOpen, onOrganizationOpen, onCollectPayment, onRecordPayment, onViewPayment, onEditPayment, onDeletePayment, slots, }) {
+export function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBack, onRecordPayment, recordPaymentDisabledReason, addScheduleDisabledReason, paidAmountCents, onItemResourceOpen, onPersonOpen, onOrganizationOpen, onInvoiceOpen, onViewPayment, onEditPayment, onDeletePayment, slots, }) {
     const i18n = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const detailMessages = messages.bookingDetailPage;
@@ -30,9 +31,24 @@ export function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBac
     const [editOpen, setEditOpen] = useState(false);
     const [statusDialogOpen, setStatusDialogOpen] = useState(false);
     const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const { data: bookingData, isPending } = useBooking(id);
     const { remove } = useBookingMutation();
-    const { convertToInvoice } = useInvoiceMutation();
+    const headerPersonId = bookingData?.data?.personId ?? null;
+    const headerOrganizationId = bookingData?.data?.organizationId ?? null;
+    const headerPerson = usePerson(headerPersonId ?? undefined, {
+        enabled: Boolean(headerPersonId),
+    }).data;
+    const headerOrganization = useOrganization(headerOrganizationId ?? undefined, {
+        enabled: Boolean(headerOrganizationId) && !headerPersonId,
+    }).data;
+    // Pull booking items so the subtitle can link to the primary product
+    // + availability slot. We pick the first item (or the one flagged
+    // `isPrimary` when present) — most bookings only have one product.
+    const headerItems = useBookingItems(id).data?.data ?? [];
+    const primaryItem = headerItems.find((item) => item.isPrimary) ??
+        headerItems[0] ??
+        null;
     if (isPending) {
         return (_jsx("div", { className: cn("flex items-center justify-center py-12", className), children: _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }) }));
     }
@@ -43,15 +59,56 @@ export function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBac
     const canCancel = ["draft", "on_hold", "confirmed", "in_progress"].includes(booking.status);
     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: [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)) {
+        : undefined;
+    const billingPersonName = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ") ||
+        (headerPerson
+            ? [headerPerson.firstName, headerPerson.lastName].filter(Boolean).join(" ")
+            : "") ||
+        headerOrganization?.name ||
+        "";
+    const billingHref = headerPersonId
+        ? () => onPersonOpen?.(headerPersonId)
+        : headerOrganizationId
+            ? () => onOrganizationOpen?.(headerOrganizationId)
+            : null;
+    const billingClickable = billingHref && (headerPersonId ? Boolean(onPersonOpen) : Boolean(onOrganizationOpen));
+    const headerDateRange = booking.startDate
+        ? `${formatDate(booking.startDate, resolvedLocale, detailMessages.noValue)} - ${formatDate(booking.endDate, resolvedLocale, detailMessages.noValue)}`
+        : null;
+    const headerPax = booking.pax != null ? `${booking.pax} PAX` : null;
+    const headerProductTitle = primaryItem?.productNameSnapshot ?? primaryItem?.title ?? null;
+    const headerProductId = primaryItem?.productId ?? null;
+    const headerSlotId = primaryItem?.availabilitySlotId ?? null;
+    const headerSubtitleParts = [
+        billingPersonName ? (billingClickable ? (_jsx("button", { type: "button", onClick: billingHref, className: "hover:text-foreground hover:underline", children: billingPersonName }, "billing")) : (_jsx("span", { children: billingPersonName }, "billing"))) : null,
+        headerProductTitle ? (headerProductId && onItemResourceOpen ? (_jsx("button", { type: "button", onClick: () => onItemResourceOpen("product", headerProductId), className: "inline-block max-w-[18rem] truncate align-bottom hover:text-foreground hover:underline", title: headerProductTitle, children: headerProductTitle }, "product")) : (_jsx("span", { className: "inline-block max-w-[18rem] truncate align-bottom", title: headerProductTitle, children: headerProductTitle }, "product"))) : null,
+        headerDateRange ? (headerSlotId && onItemResourceOpen ? (_jsx("button", { type: "button", onClick: () => onItemResourceOpen("availabilitySlot", headerSlotId), className: "hover:text-foreground hover:underline", children: headerDateRange }, "dates")) : (_jsx("span", { children: headerDateRange }, "dates"))) : null,
+        headerPax ? _jsx("span", { children: headerPax }, "pax") : null,
+    ].filter(Boolean);
+    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-start justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: booking.bookingNumber }), _jsx(StatusBadge, { status: booking.status, children: getBookingStatusLabel(booking.status, messages.common.bookingStatusLabels) })] }), headerSubtitleParts.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground", children: headerSubtitleParts.map((part, idx) => (_jsxs(Fragment, { children: [idx > 0 ? _jsx("span", { className: "text-muted-foreground/60", children: "/" }) : null, part] }, idx))) })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.editAction] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setStatusDialogOpen(true), children: [_jsx(RefreshCw, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.changeStatusAction] }), canCancel ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCancelDialogOpen(true), children: [_jsx(Ban, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.cancelBookingAction] })) : null, _jsxs(Button, { variant: "outline", size: "sm", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", disabled: remove.isPending, onClick: () => setDeleteDialogOpen(true), children: [_jsx(Trash2, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.deleteAction] })] })] }), slots?.header?.(booking), _jsxs("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-4", children: [_jsx(StatCard, { label: detailMessages.summaryTotal, hint: sellHint, children: formatAmount(booking.sellAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue) }), _jsx(StatCard, { label: detailMessages.summaryPaid, badge: paidAmountCents != null && booking.sellAmountCents
+                            ? renderPercentBadge(Math.round((paidAmountCents / booking.sellAmountCents) * 100), paidBadgeClass)
+                            : null, children: paidAmountCents != null
+                            ? formatAmount(paidAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue)
+                            : detailMessages.noValue }), _jsx(StatCard, { label: detailMessages.summaryCostMargin, badge: booking.marginPercent != null
+                            ? renderPercentBadge(booking.marginPercent, marginBadgeClass)
+                            : null, children: formatAmount(booking.costAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue) }), _jsx(StatCard, { label: detailMessages.summaryCreated, children: formatDate(booking.createdAt, 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: "documents", children: detailMessages.tabDocuments }), _jsx(TabsTrigger, { value: "suppliers", children: detailMessages.tabSuppliers }), _jsx(TabsTrigger, { value: "activity", children: detailMessages.tabActivity }), slots?.ledgerTab ? (_jsx(TabsTrigger, { value: "ledger", children: slots.ledgerTab.label ?? detailMessages.tabLedger })) : null, _jsx(TabsTrigger, { value: "meta", children: detailMessages.tabMeta })] }), _jsxs(TabsContent, { value: "overview", className: "mt-4 flex flex-col gap-6", children: [slots?.overviewStart?.(booking), _jsx(BookingItemList, { bookingId: id, onResourceOpen: onItemResourceOpen }), _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, onPersonOpen: onPersonOpen, onOrganizationOpen: onOrganizationOpen }), _jsx(TravelerList, { bookingId: id, autoReveal: true })] }), _jsxs(TabsContent, { value: "finance", className: "mt-4 flex flex-col gap-6", children: [_jsx(BookingPaymentScheduleList, { bookingId: id, addScheduleDisabledReason: addScheduleDisabledReason ?? null }), slots?.paymentsContent ? (renderDetailSlot(slots.paymentsContent, booking)) : (_jsx(BookingPaymentsSummary, { bookingId: id, variant: "admin", onViewPayment: onViewPayment, onInvoiceOpen: onInvoiceOpen, onEditPayment: onEditPayment, onDeletePayment: onDeletePayment, headerAction: onRecordPayment ? (_jsx(RecordPaymentHeaderButton, { label: detailMessages.recordPaymentAction, disabledReason: recordPaymentDisabledReason ?? null, onClick: () => onRecordPayment(booking) })) : null })), slots?.financeStart?.(booking), _jsxs(Collapsible, { children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center justify-between rounded-md border bg-background px-4 py-3 text-sm font-semibold hover:bg-muted/30", children: [messages.bookingGuaranteeList.title, _jsx(ChevronDown, { className: "h-4 w-4 transition-transform group-data-panel-open:rotate-180" })] }), _jsx(CollapsibleContent, { className: "mt-3", children: _jsx(BookingGuaranteeList, { bookingId: id }) })] }), slots?.financeEnd?.(booking)] }), slots?.invoicesTab ? (_jsx(TabsContent, { value: "invoices", className: "mt-4 flex flex-col gap-6", children: renderDetailSlot(slots.invoicesTab.content, booking) })) : null, _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 })) }), _jsx(TabsContent, { value: "suppliers", className: "mt-4", children: _jsx(SupplierStatusList, { bookingId: id }) }), _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: renderDetailSlot(slots.ledgerTab.content, booking) })) : null, _jsx(TabsContent, { value: "meta", className: "mt-4", children: _jsx(Card, { children: _jsx(CardContent, { className: "grid grid-cols-2 gap-6 py-6 sm:grid-cols-4", children: _jsx(SummaryStat, { label: detailMessages.summaryUpdated, value: formatDate(booking.updatedAt, resolvedLocale, detailMessages.noValue) }) }) }) })] }), _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 }), _jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteDialogOpen(false);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: detailMessages.deleteConfirm }), _jsx(AlertDialogDescription, { children: booking.bookingNumber
+                                        ? formatMessage(detailMessages.deleteConfirmDescription, {
+                                            number: booking.bookingNumber,
+                                        })
+                                        : detailMessages.deleteConfirmDescriptionFallback })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: detailMessages.deleteCancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: async () => {
                                         await remove.mutateAsync(id);
+                                        setDeleteDialogOpen(false);
                                         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(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(BookingPaymentReconciliationBanner, { bookingId: id }), slots?.paymentsContent ? (renderDetailSlot(slots.paymentsContent, booking)) : (_jsx(BookingPaymentsSummary, { bookingId: id, variant: "admin", onViewPayment: onViewPayment, onConvertProforma: (row) => convertToInvoice.mutateAsync({ id: row.invoiceId }), onEditPayment: onEditPayment, onDeletePayment: onDeletePayment })), _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: renderDetailSlot(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: renderDetailSlot(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 })] }));
+                                    }, children: detailMessages.deleteConfirmAction })] })] }) })] }));
+}
+function RecordPaymentHeaderButton({ label, disabledReason, onClick, }) {
+    if (disabledReason) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { tabIndex: 0, className: "inline-block" }), children: _jsxs(Button, { variant: "outline", size: "sm", disabled: true, className: "pointer-events-none", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), label] }) }), _jsx(TooltipContent, { children: disabledReason })] }));
+    }
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClick, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), label] }));
 }
 function renderDetailSlot(content, booking) {
     return typeof content === "function" ? content(booking) : content;
@@ -64,7 +121,7 @@ function renderDetailSlot(content, booking) {
  * person / organization so the operator still sees who they're
  * billing.
  */
-export function BookingBillingContextCard({ booking }) {
+export function BookingBillingContextCard({ booking, onPersonOpen, onOrganizationOpen, }) {
     const messages = useBookingsUiMessagesOrDefault().bookingDetailPage;
     const [editOpen, setEditOpen] = useState(false);
     const person = usePerson(booking.personId ?? undefined, {
@@ -89,30 +146,38 @@ export function BookingBillingContextCard({ booking }) {
     ]
         .filter(Boolean)
         .join(", ");
-    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 })] }));
+    return (_jsxs("div", { "data-slot": "booking-billing-context", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": "true" }), messages.billingPayer] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": "true" }), messages.editAction] })] }), _jsxs("div", { className: "flex flex-col gap-4 rounded-md border p-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsx(BillingField, { label: messages.billingPayer, value: payerName ? (booking.personId && onPersonOpen ? (_jsx("button", { type: "button", onClick: () => onPersonOpen(booking.personId), className: "text-left text-primary hover:underline", children: payerName })) : booking.organizationId && !booking.personId && onOrganizationOpen ? (_jsx("button", { type: "button", onClick: () => onOrganizationOpen(booking.organizationId), className: "text-left text-primary hover:underline", children: payerName })) : (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] }));
 }
-function BillingField({ label, value, icon }) {
-    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [icon, label] }), _jsx("div", { className: "truncate text-sm font-medium", children: value })] }));
+function StatCard({ label, children, hint, badge, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "text-xl font-semibold tabular-nums leading-none", children: children }), badge] }), hint ? _jsx("div", { className: "text-xs text-muted-foreground", children: hint }) : null] }) }));
+}
+/**
+ * Traffic-light badge for a percentage value. Color thresholds are
+ * passed in by the caller (Paid uses 0 → red, 0..100 → yellow, 100 →
+ * green; Margin uses <0 → red, 0..10 → yellow, >10 → green).
+ */
+function renderPercentBadge(percent, classFor) {
+    return (_jsxs(Badge, { variant: "outline", className: cn("border-transparent", classFor(percent)), children: [percent, "%"] }));
 }
-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 paidBadgeClass(percent) {
+    if (percent <= 0)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    if (percent >= 100)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
 }
-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 marginBadgeClass(percent) {
+    if (percent < 0)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    if (percent > 10)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
 }
-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 BillingField({ label, value, icon, }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [icon, label] }), _jsx("div", { className: "truncate text-sm font-medium", children: value })] }));
 }
 function getBookingStatusLabel(status, labels) {
     return labels[status] ?? status;
@@ -120,16 +185,26 @@ function getBookingStatusLabel(status, labels) {
 function formatAmount(cents, currency, locale, empty) {
     if (cents == null)
         return empty;
-    return new Intl.NumberFormat(locale, {
+    const amount = cents / 100;
+    const amountText = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 0,
+    }).format(amount);
+    // RON's "symbol" is just the ISO code itself, so a `<symbol> <amount> <code>`
+    // layout would print "RON 1.185 RON" — collapse it back to "1.185 RON".
+    if (currency.toUpperCase() === "RON") {
+        return `${amountText} ${currency}`;
+    }
+    // Extract the locale's native symbol so we can always render
+    // `<symbol> <amount> <code>` regardless of where Intl would otherwise
+    // place the symbol for this locale (e.g. Romanian puts it after).
+    const parts = new Intl.NumberFormat(locale, {
         style: "currency",
         currency,
+        currencyDisplay: "narrowSymbol",
         maximumFractionDigits: 0,
-    }).format(cents / 100);
-}
-function formatMargin(percent, empty) {
-    if (percent == null)
-        return empty;
-    return `${percent.toFixed(0)}%`;
+    }).formatToParts(amount);
+    const symbol = parts.find((p) => p.type === "currency")?.value ?? currency;
+    return `${symbol} ${amountText} ${currency}`;
 }
 function formatDate(iso, locale, empty) {
     if (!iso)

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

@@ -1 +1 @@
-{"version":3,"file":"booking-guarantee-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-list.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAwI5E"}
+{"version":3,"file":"booking-guarantee-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-list.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAkK5E"}

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

@@ -1,48 +1,86 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBookingGuaranteeMutation, useBookingGuarantees, } from "@voyantjs/finance-react";
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyantjs/ui/components";
+import { DataTable } from "@voyantjs/ui/components/data-table";
 import { Pencil, Plus, ShieldCheck, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 import { BookingGuaranteeDialog } from "./booking-guarantee-dialog.js";
-const statusVariant = {
-    pending: "outline",
-    active: "default",
-    released: "secondary",
-    failed: "destructive",
-    cancelled: "destructive",
-    expired: "secondary",
-};
+import { IconActionButton } from "./icon-action-button.js";
+import { StatusBadge } from "./status-badge.js";
 export function BookingGuaranteeList({ bookingId }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editing, setEditing] = React.useState(undefined);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
     const { data } = useBookingGuarantees(bookingId);
     const { remove } = useBookingGuaranteeMutation(bookingId);
     const { formatCurrency, formatDate } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
+    const t = messages.bookingGuaranteeList;
+    const deleteMessages = t.actions.deleteConfirm;
     const guarantees = data?.data ?? [];
-    return (_jsxs(Card, { "data-slot": "booking-guarantee-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(ShieldCheck, { className: "h-4 w-4" }), messages.bookingGuaranteeList.title] }), _jsxs(Button, { size: "sm", onClick: () => {
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    const columns = React.useMemo(() => [
+        {
+            accessorKey: "guaranteeType",
+            header: t.columns.type,
+            cell: ({ row }) => messages.bookingGuaranteeDialog.guaranteeTypeLabels[row.original.guaranteeType],
+        },
+        {
+            accessorKey: "amountCents",
+            header: t.columns.amount,
+            cell: ({ row }) => (_jsx("span", { className: "font-mono", children: row.original.amountCents == null || !row.original.currency
+                    ? t.values.amountUnavailable
+                    : formatCurrency(row.original.amountCents / 100, row.original.currency) })),
+        },
+        {
+            accessorKey: "status",
+            header: t.columns.status,
+            cell: ({ row }) => (_jsx(StatusBadge, { status: row.original.status, children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[row.original.status] })),
+        },
+        {
+            accessorKey: "provider",
+            header: t.columns.provider,
+            cell: ({ row }) => row.original.provider ?? t.values.providerUnavailable,
+        },
+        {
+            accessorKey: "referenceNumber",
+            header: t.columns.reference,
+            cell: ({ row }) => (_jsx("span", { className: "block max-w-[180px] truncate font-mono text-xs", children: row.original.referenceNumber ?? t.values.referenceUnavailable })),
+        },
+        {
+            accessorKey: "expiresAt",
+            header: t.columns.expires,
+            cell: ({ row }) => row.original.expiresAt ? formatDate(row.original.expiresAt) : t.values.expiresUnavailable,
+        },
+        {
+            id: "actions",
+            header: "",
+            cell: ({ row }) => (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(IconActionButton, { label: t.actions.editGuarantee, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                            e.stopPropagation();
+                            setEditing(row.original);
+                            setDialogOpen(true);
+                        } }), _jsx(IconActionButton, { label: t.actions.deleteGuarantee, icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: (e) => {
+                            e.stopPropagation();
+                            setDeleteTarget(row.original);
+                        } })] })),
+        },
+    ], [formatCurrency, formatDate, messages, t]);
+    return (_jsxs("div", { "data-slot": "booking-guarantee-list", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(ShieldCheck, { className: "h-4 w-4" }), t.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingGuaranteeList.addGuarantee] })] }), _jsx(CardContent, { children: guarantees.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingGuaranteeList.empty })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingGuaranteeList.columns.type }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingGuaranteeList.columns.status }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingGuaranteeList.columns.amount }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingGuaranteeList.columns.provider }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingGuaranteeList.columns.reference }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingGuaranteeList.columns.expires }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: guarantees.map((g) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: messages.bookingGuaranteeDialog.guaranteeTypeLabels[g.guaranteeType] }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: statusVariant[g.status] ?? "secondary", children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[g.status] }) }), _jsx("td", { className: "p-2 text-right font-mono", children: g.amountCents == null || !g.currency
-                                                ? messages.bookingGuaranteeList.values.amountUnavailable
-                                                : formatCurrency(g.amountCents / 100, g.currency) }), _jsx("td", { className: "p-2", children: g.provider ?? messages.bookingGuaranteeList.values.providerUnavailable }), _jsx("td", { className: "max-w-[150px] truncate p-2 font-mono text-xs", children: g.referenceNumber ??
-                                                messages.bookingGuaranteeList.values.referenceUnavailable }), _jsx("td", { className: "p-2", children: g.expiresAt
-                                                ? formatDate(g.expiresAt)
-                                                : messages.bookingGuaranteeList.values.expiresUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
-                                                            setEditing(g);
-                                                            setDialogOpen(true);
-                                                        }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => {
-                                                            if (confirm(messages.bookingGuaranteeList.actions.deleteConfirm)) {
-                                                                remove.mutate(g.id);
-                                                            }
-                                                        }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, g.id))) })] }) })) }), _jsx(BookingGuaranteeDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addGuarantee] })] }), _jsx(DataTable, { columns: columns, data: guarantees, emptyMessage: t.empty, showPagination: false }), _jsx(BookingGuaranteeDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
                     setDialogOpen(nextOpen);
-                    if (!nextOpen) {
+                    if (!nextOpen)
                         setEditing(undefined);
-                    }
-                }, bookingId: bookingId, guarantee: editing, onSuccess: () => {
-                    setEditing(undefined);
-                } })] }));
+                }, bookingId: bookingId, guarantee: editing, onSuccess: () => setEditing(undefined) }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: deleteMessages.title }), _jsx(AlertDialogDescription, { children: deleteMessages.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: deleteMessages.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: () => void handleConfirmDelete(), children: deleteMessages.confirm })] })] }) })] }));
 }

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

@@ -1,5 +1,12 @@
+export type BookingItemResourceKind = "product" | "availabilitySlot";
 export interface BookingItemListProps {
     bookingId: string;
+    /**
+     * Open a linked resource (product / availability slot) in the host app.
+     * When omitted, the snapshot sheet renders the names as plain text
+     * instead of clickable links.
+     */
+    onResourceOpen?: (kind: BookingItemResourceKind, id: string) => void;
 }
-export declare function BookingItemList({ bookingId }: BookingItemListProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingItemList({ bookingId, onResourceOpen }: BookingItemListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=booking-item-list.d.ts.map

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":"AAuBA,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAwMlE"}
+{"version":3,"file":"booking-item-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-list.tsx"],"names":[],"mappings":"AAmCA,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,kBAAkB,CAAA;AAEpE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACrE;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,oBAAoB,2CA+NlF"}