@voyantjs/bookings-ui 0.20.0 → 0.21.1

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

@@ -1 +1 @@
-{"version":3,"file":"booking-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,0BAA0B,CAAA;AA8CjF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAWD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,gBAAgB,GACjB,EAAE,kBAAkB,2CAoBpB"}
+{"version":3,"file":"booking-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,0BAA0B,CAAA;AAuDjF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAWD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,gBAAgB,GACjB,EAAE,kBAAkB,2CAoBpB"}

package/dist/components/booking-dialog.js

@@ -14,7 +14,16 @@ import { BookingCreateDialog } from "./booking-create-dialog";
 function createBookingFormSchema(messages) {
     return z.object({
         bookingNumber: z.string().min(1, messages.bookingDialog.validation.bookingNumberRequired),
-        status: z.enum(["draft", "confirmed", "in_progress", "completed", "cancelled"]),
+        status: z.enum([
+            "draft",
+            "on_hold",
+            "awaiting_payment",
+            "confirmed",
+            "in_progress",
+            "completed",
+            "expired",
+            "cancelled",
+        ]),
         sellCurrency: z.string().min(3).max(3, messages.bookingDialog.validation.sellCurrencyInvalid),
         sellAmountCents: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
         costAmountCents: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),

package/dist/components/booking-group-section.d.ts

@@ -12,6 +12,16 @@ export interface BookingGroupSectionProps {
      * to override.
      */
     optionUnitId?: string | null;
+    /**
+     * When true (default), the section hides itself when the booking
+     * has no `accommodation` items AND no existing group — shared-room
+     * pairing only makes sense for bookings that include a room. Tours,
+     * ground-transfer, and inquiry bookings see no Shared-Room card.
+     *
+     * Set to `false` to always render the section (e.g. legacy
+     * dashboards that display it for every booking regardless).
+     */
+    hideWithoutAccommodation?: boolean;
 }
-export declare function BookingGroupSection({ bookingId, productId, optionUnitId, }: BookingGroupSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingGroupSection({ bookingId, productId, optionUnitId, hideWithoutAccommodation, }: BookingGroupSectionProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=booking-group-section.d.ts.map

package/dist/components/booking-group-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-group-section.d.ts","sourceRoot":"","sources":["../../src/components/booking-group-section.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,wBAAwB,2CA4H1B"}
+{"version":3,"file":"booking-group-section.d.ts","sourceRoot":"","sources":["../../src/components/booking-group-section.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B;;;;;;;;OAQG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,YAAY,EACZ,wBAA+B,GAChC,EAAE,wBAAwB,kDA2I1B"}

package/dist/components/booking-group-section.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBookingGroup, useBookingGroupForBooking, useBookingGroupMemberMutation, useBookingPrimaryProduct, } from "@voyantjs/bookings-react";
+import { useBookingGroup, useBookingGroupForBooking, useBookingGroupMemberMutation, useBookingItems, useBookingPrimaryProduct, } from "@voyantjs/bookings-react";
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
 import { Link2, Unlink, Users } from "lucide-react";
 import * as React from "react";
 import { formatMessage, useBookingsUiMessagesOrDefault } from "../i18n/provider";
 import { BookingGroupLinkDialog } from "./booking-group-link-dialog";
-export function BookingGroupSection({ bookingId, productId, optionUnitId, }) {
+export function BookingGroupSection({ bookingId, productId, optionUnitId, hideWithoutAccommodation = true, }) {
     const [linkDialogOpen, setLinkDialogOpen] = React.useState(false);
     const messages = useBookingsUiMessagesOrDefault();
     // Auto-resolve product/option-unit from items when the caller hasn't
@@ -15,12 +15,26 @@ export function BookingGroupSection({ bookingId, productId, optionUnitId, }) {
     const autoResolved = useBookingPrimaryProduct(bookingId, { enabled: shouldAutoResolve });
     const effectiveProductId = productId === undefined ? autoResolved.productId : productId;
     const effectiveOptionUnitId = optionUnitId === undefined ? autoResolved.optionUnitId : optionUnitId;
+    // Fetch items to detect whether the booking has accommodation —
+    // shared-room pairing is meaningful only for room-style products.
+    // The `useBookingItems` query is already in cache from
+    // `useBookingPrimaryProduct` above, so this is a free read.
+    const { data: itemsData } = useBookingItems(bookingId);
+    const items = itemsData?.data ?? [];
+    const hasAccommodationItem = items.some((i) => i.itemType === "accommodation");
     const { data: groupForBookingData } = useBookingGroupForBooking(bookingId);
     const group = groupForBookingData?.data ?? null;
     const groupId = group?.id ?? null;
     const { data: groupDetail } = useBookingGroup(groupId, { enabled: Boolean(groupId) });
     const members = groupDetail?.data?.members ?? [];
     const { remove: removeMember } = useBookingGroupMemberMutation();
+    // Hide the section entirely when there's nothing to render or
+    // pair: no group exists yet AND the booking has no accommodation
+    // line item. Operators on tour-only bookings shouldn't see a card
+    // they can't usefully act on.
+    if (hideWithoutAccommodation && !group && !hasAccommodationItem) {
+        return null;
+    }
     const handleRemove = async () => {
         if (!groupId)
             return;

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,2CA6JlE"}
+{"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,2CAiLlE"}

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBookingItemMutation, useBookingItems, } from "@voyantjs/bookings-react";
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
-import { ChevronDown, ChevronRight, Package, Pencil, Plus, Trash2 } from "lucide-react";
+import { Calendar, ChevronDown, ChevronRight, Package, Pencil, Plus, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider";
 import { BookingItemDialog } from "./booking-item-dialog";
@@ -27,19 +27,26 @@ export function BookingItemList({ bookingId }) {
     return (_jsxs(Card, { "data-slot": "booking-item-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4" }), messages.bookingItemList.title] }), _jsxs(Button, { size: "sm", onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingItemList.addItem] })] }), _jsx(CardContent, { children: items.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingItemList.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: "w-8 p-2" }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.title }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.type }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.status }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingItemList.columns.quantity }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingItemList.columns.total }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.serviceDate }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: items.map((item) => {
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingItemList.addItem] })] }), _jsx(CardContent, { children: items.length === 0 ? (_jsx("p", { className: "py-4 text-center text-muted-foreground text-sm", children: messages.bookingItemList.empty })) : (_jsx("div", { className: "overflow-x-auto 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: "w-8 p-2" }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.title }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.type }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.status }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingItemList.columns.quantity }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingItemList.columns.total }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingItemList.columns.cost }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingItemList.columns.serviceDate }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: items.map((item) => {
                                     const isExpanded = expandedItemId === item.id;
-                                    return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: "border-b", children: [_jsx("td", { className: "p-2", children: _jsx("button", { type: "button", onClick: () => setExpandedItemId(isExpanded ? null : item.id), className: "text-muted-foreground hover:text-foreground", 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
+                                    return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: "cursor-pointer border-b hover:bg-muted/30", onClick: () => setExpandedItemId(isExpanded ? null : item.id), children: [_jsx("td", { className: "p-2", children: _jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                setExpandedItemId(isExpanded ? null : item.id);
+                                                            }, className: "text-muted-foreground hover:text-foreground", "aria-label": isExpanded ? "Collapse item" : "Expand item", 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.values.totalUnavailable
-                                                            : formatCurrency(item.totalSellAmountCents / 100, item.sellCurrency) }), _jsx("td", { className: "p-2", children: item.serviceDate ??
-                                                            messages.bookingItemList.values.serviceDateUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
+                                                            : 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
+                                                            : formatCurrency(item.totalCostAmountCents / 100, item.costCurrency) }), _jsx("td", { className: "p-2 text-xs", children: formatItemDateRange(item) ??
+                                                            messages.bookingItemList.values.serviceDateUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: (e) => {
+                                                                        e.stopPropagation();
                                                                         setEditing(item);
                                                                         setDialogOpen(true);
-                                                                    }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => {
+                                                                    }, className: "text-muted-foreground hover:text-foreground", "aria-label": "Edit item", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: (e) => {
+                                                                        e.stopPropagation();
                                                                         if (confirm(messages.bookingItemList.actions.deleteConfirm)) {
                                                                             remove.mutate(item.id);
                                                                         }
-                                                                    }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }), isExpanded && (_jsx("tr", { className: "border-b last:border-b-0", children: _jsx("td", { colSpan: 8, className: "p-2", children: _jsx(BookingItemTravelers, { bookingId: bookingId, itemId: item.id }) }) }))] }, item.id));
+                                                                    }, className: "text-muted-foreground hover:text-destructive", "aria-label": "Delete item", 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));
                                 }) })] }) })) }), _jsx(BookingItemDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
                     setDialogOpen(nextOpen);
                     if (!nextOpen) {
@@ -49,3 +56,60 @@ export function BookingItemList({ bookingId }) {
                     setEditing(undefined);
                 } })] }));
 }
+/**
+ * Expanded panel for one item — shows the metadata an operator
+ * usually needs to act on the line: short description, full date
+ * range (timestamps when present, else just the date), cost
+ * breakdown (unit × qty), the linked product/snapshot ids, and the
+ * per-item travelers list. Compact two-column layout on wide
+ * screens, stacks on narrow ones.
+ */
+function ItemDetailPanel({ bookingId, 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 })] }));
+}
+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 })] }));
+}
+/**
+ * Compose the most informative date label we can from the item:
+ *   - When `startsAt`+`endsAt` differ → "Mar 5 → Mar 8 2026"
+ *   - When only `serviceDate` is set → "Mar 5 2026"
+ *   - When everything is null → null (caller renders the unavailable
+ *     placeholder)
+ *
+ * Uses Intl date formatting against the runtime locale; the booking
+ * detail page renders Romanian by default but the formatter respects
+ * whatever the consumer's locale is.
+ */
+function formatItemDateRange(item) {
+    const start = item.startsAt ? new Date(item.startsAt) : null;
+    const end = item.endsAt ? new Date(item.endsAt) : null;
+    if (start && Number.isFinite(start.getTime())) {
+        if (end && Number.isFinite(end.getTime()) && end.getTime() !== start.getTime()) {
+            return `${formatDate(start)} → ${formatDate(end)}`;
+        }
+        return formatDate(start);
+    }
+    if (item.serviceDate) {
+        const d = new Date(item.serviceDate);
+        if (Number.isFinite(d.getTime()))
+            return formatDate(d);
+        return item.serviceDate;
+    }
+    return null;
+}
+function formatDate(d) {
+    try {
+        return d.toLocaleDateString(undefined, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+        });
+    }
+    catch {
+        return d.toISOString().slice(0, 10);
+    }
+}

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,EAGnB,MAAM,0BAA0B,CAAA;AAsBjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACnD;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAa,EAAE,eAAe,EAAE,GAAE,gBAAqB,2CA+JpF"}
+{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,0BAA0B,CAAA;AAsBjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACnD;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAa,EAAE,eAAe,EAAE,GAAE,gBAAqB,2CAqKpF"}

package/dist/components/booking-list.js

@@ -14,7 +14,7 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
     const [offset, setOffset] = React.useState(0);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editing, setEditing] = React.useState(undefined);
-    const { formatNumber } = useBookingsUiI18nOrDefault();
+    const { formatDateTime, formatNumber } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const { data, isPending, isError } = useBookings({
         search: search || undefined,
@@ -39,12 +39,12 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
                                 }, className: "pl-9" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { onClick: () => {
                                 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: messages.bookingList.columns.bookingNumber }), _jsx(TableHead, { children: messages.bookingList.columns.status }), _jsx(TableHead, { children: messages.bookingList.columns.sellAmount }), _jsx(TableHead, { children: messages.bookingList.columns.pax }), _jsx(TableHead, { children: messages.bookingList.columns.startDate })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, 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: _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: messages.common.bookingStatusLabels[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: messages.bookingList.columns.bookingNumber }), _jsx(TableHead, { children: messages.bookingList.columns.status }), _jsx(TableHead, { children: messages.bookingList.columns.sellAmount }), _jsx(TableHead, { children: messages.bookingList.columns.pax }), _jsx(TableHead, { children: messages.bookingList.columns.startDate }), _jsx(TableHead, { children: messages.bookingList.columns.endDate })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, 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: _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: messages.common.bookingStatusLabels[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: booking.startDate ?? "—" })] }, 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) })] }, 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: "Previous" }), _jsx("span", { children: formatMessage(messages.bookingList.pageSummary, {
@@ -54,3 +54,11 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
                     onSelectBooking?.(booking);
                 } })] }));
 }
+function formatBookingDateTime(value, formatDateTime) {
+    if (!value)
+        return "—";
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        return formatDateTime(`${value}T00:00:00`);
+    }
+    return formatDateTime(value);
+}

package/dist/components/booking-payments-summary.d.ts

@@ -1,5 +1,32 @@
 export interface BookingPaymentsSummaryProps {
     bookingId: string;
+    /**
+     * Which API surface to fetch from. The customer-portal uses
+     * `"public"` (default — hits `/v1/public/finance/bookings/:id/payments`).
+     * The operator dashboard must pass `"admin"` because the
+     * `/v1/public/*` middleware enforces a non-staff actor guard, so
+     * staff sessions get blocked from the public endpoint.
+     */
+    variant?: "admin" | "public";
 }
-export declare function BookingPaymentsSummary({ bookingId }: BookingPaymentsSummaryProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Payment-centric view of the money movements recorded against a
+ * booking's invoices. Sister card to `BookingInvoicesCard` (operator
+ * template) which is invoice-centric — payments and invoices are
+ * different concepts, so each gets its own table with its own lead
+ * column.
+ *
+ * Column order here is operator-tested:
+ *   1. **Suma** — what came in. Largest, bold, currency-formatted.
+ *   2. **Metoda** — how (icon + label).
+ *   3. **Status** — completed/pending/failed/refunded badge.
+ *   4. **Data** — when.
+ *   5. **Referinta** — provider tx id, capture id, etc.
+ *   6. **Pentru** — which invoice this paid (secondary; shown last).
+ *
+ * The invoice number deliberately appears last as a "for" link, not
+ * first as the primary identifier — that's the difference between
+ * "list of payments" and "list of invoice line-items".
+ */
+export declare function BookingPaymentsSummary({ bookingId, variant, }: BookingPaymentsSummaryProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=booking-payments-summary.d.ts.map

package/dist/components/booking-payments-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-payments-summary.d.ts","sourceRoot":"","sources":["../../src/components/booking-payments-summary.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,2BAA2B,2CAgFhF"}
+{"version":3,"file":"booking-payments-summary.d.ts","sourceRoot":"","sources":["../../src/components/booking-payments-summary.tsx"],"names":[],"mappings":"AAkCA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC7B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAkB,GACnB,EAAE,2BAA2B,2CAmH7B"}

package/dist/components/booking-payments-summary.js

@@ -1,22 +1,77 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePublicBookingPayments } from "@voyantjs/finance-react";
+import { useAdminBookingPayments, usePublicBookingPayments } from "@voyantjs/finance-react";
 import { Badge, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
-import { CreditCard } from "lucide-react";
+import { Banknote, CreditCard, Receipt, Ticket, Wallet } from "lucide-react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider";
+/**
+ * Map payment status to a badge variant — completed/pending visible
+ * positively, failed/refunded surface destructive coloring so an
+ * operator scanning the row can spot a chargeback or failure
+ * without reading the label.
+ */
 const statusVariant = {
     pending: "outline",
     completed: "default",
     failed: "destructive",
-    refunded: "secondary",
+    refunded: "destructive",
 };
-import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider";
-export function BookingPaymentsSummary({ bookingId }) {
-    const { data } = usePublicBookingPayments(bookingId);
-    const { formatDate, formatNumber } = useBookingsUiI18nOrDefault();
+/**
+ * Inline icon for the payment method column. Pure cosmetic — the
+ * label still reads alongside, but operators trained on the icons
+ * scan rows much faster than a method-string column.
+ */
+const methodIcon = {
+    card: CreditCard,
+    credit_card: CreditCard,
+    bank_transfer: Banknote,
+    cash: Wallet,
+    voucher: Ticket,
+};
+/**
+ * Payment-centric view of the money movements recorded against a
+ * booking's invoices. Sister card to `BookingInvoicesCard` (operator
+ * template) which is invoice-centric — payments and invoices are
+ * different concepts, so each gets its own table with its own lead
+ * column.
+ *
+ * Column order here is operator-tested:
+ *   1. **Suma** — what came in. Largest, bold, currency-formatted.
+ *   2. **Metoda** — how (icon + label).
+ *   3. **Status** — completed/pending/failed/refunded badge.
+ *   4. **Data** — when.
+ *   5. **Referinta** — provider tx id, capture id, etc.
+ *   6. **Pentru** — which invoice this paid (secondary; shown last).
+ *
+ * The invoice number deliberately appears last as a "for" link, not
+ * first as the primary identifier — that's the difference between
+ * "list of payments" and "list of invoice line-items".
+ */
+export function BookingPaymentsSummary({ bookingId, variant = "public", }) {
+    const publicQuery = usePublicBookingPayments(bookingId, { enabled: variant === "public" });
+    const adminQuery = useAdminBookingPayments(bookingId, { enabled: variant === "admin" });
+    const data = variant === "admin" ? adminQuery.data : publicQuery.data;
+    const { formatDate } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const payments = data?.data?.payments ?? [];
-    return (_jsxs(Card, { "data-slot": "booking-payments-summary", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "h-4 w-4" }), messages.bookingPaymentsSummary.title] }) }), _jsx(CardContent, { children: payments.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingPaymentsSummary.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.bookingPaymentsSummary.columns.invoice }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.method }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.status }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingPaymentsSummary.columns.amount }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.date }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.reference })] }) }), _jsx("tbody", { children: payments.map((payment) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2 font-mono text-xs", children: payment.invoiceNumber }), _jsx("td", { className: "p-2", children: messages.bookingPaymentsSummary.paymentMethodLabels[payment.paymentMethod] ?? payment.paymentMethod }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: statusVariant[payment.status] ?? "secondary", children: messages.bookingPaymentsSummary.paymentStatusLabels[payment.status] ?? payment.status }) }), _jsx("td", { className: "p-2 text-right font-mono", children: `${formatNumber(payment.amountCents / 100, {
-                                                minimumFractionDigits: 2,
-                                                maximumFractionDigits: 2,
-                                            })} ${payment.currency}` }), _jsx("td", { className: "p-2", children: formatDate(payment.paymentDate) }), _jsx("td", { className: "max-w-[150px] truncate p-2 font-mono text-xs", children: payment.referenceNumber ?? "-" })] }, payment.id))) })] }) })) })] }));
+    // Empty-state polish: completed totals across all visible rows so
+    // the card carries useful summary information even when there are
+    // many small partial payments to scan.
+    const totalCompleted = payments
+        .filter((p) => p.status === "completed")
+        .reduce((sum, p) => sum + p.amountCents, 0);
+    const currency = payments[0]?.currency ?? "EUR";
+    return (_jsxs(Card, { "data-slot": "booking-payments-summary", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex flex-wrap items-center gap-2 text-base", children: [_jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }), messages.bookingPaymentsSummary.title, payments.length > 0 ? (_jsx(Badge, { variant: "outline", className: "text-[10px]", children: payments.length })) : null, totalCompleted > 0 ? (_jsxs("span", { className: "ml-auto text-muted-foreground text-xs", children: ["Total received", " ", _jsx("span", { className: "font-medium text-foreground", children: formatMoney(totalCompleted, currency) })] })) : null] }) }), _jsx(CardContent, { className: "overflow-hidden p-0", children: payments.length === 0 ? (_jsx("p", { className: "py-6 text-center text-muted-foreground text-sm", children: messages.bookingPaymentsSummary.empty })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "px-4 py-2 text-right font-medium", children: messages.bookingPaymentsSummary.columns.amount }), _jsx("th", { className: "px-4 py-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.method }), _jsx("th", { className: "px-4 py-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.status }), _jsx("th", { className: "px-4 py-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.date }), _jsx("th", { className: "px-4 py-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.reference }), _jsx("th", { className: "px-4 py-2 text-left font-medium", children: messages.bookingPaymentsSummary.columns.invoice })] }) }), _jsx("tbody", { children: payments.map((payment) => {
+                                    const MethodIcon = methodIcon[payment.paymentMethod] ?? Receipt;
+                                    const methodLabel = messages.bookingPaymentsSummary.paymentMethodLabels[payment.paymentMethod] ?? payment.paymentMethod;
+                                    return (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "px-4 py-2.5 text-right font-mono font-medium", children: formatMoney(payment.amountCents, payment.currency) }), _jsx("td", { className: "px-4 py-2.5", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MethodIcon, { className: "h-3.5 w-3.5 text-muted-foreground" }), methodLabel] }) }), _jsx("td", { className: "px-4 py-2.5", children: _jsx(Badge, { variant: statusVariant[payment.status] ?? "secondary", children: messages.bookingPaymentsSummary.paymentStatusLabels[payment.status] ?? payment.status }) }), _jsx("td", { className: "px-4 py-2.5 text-muted-foreground text-xs", children: formatDate(payment.paymentDate) }), _jsx("td", { className: "px-4 py-2.5", children: _jsx("span", { title: payment.referenceNumber ?? undefined, className: "inline-block max-w-[180px] truncate font-mono text-muted-foreground text-xs", children: payment.referenceNumber ?? "—" }) }), _jsx("td", { className: "px-4 py-2.5 font-mono text-xs", children: payment.invoiceNumber })] }, payment.id));
+                                }) })] }) })) })] }));
+}
+function formatMoney(cents, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
 }

package/dist/components/traveler-list.d.ts

@@ -1,5 +1,6 @@
 export interface TravelerListProps {
     bookingId: string;
+    autoReveal?: boolean;
 }
-export declare function TravelerList({ bookingId }: TravelerListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TravelerList({ bookingId, autoReveal }: TravelerListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=traveler-list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"traveler-list.d.ts","sourceRoot":"","sources":["../../src/components/traveler-list.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CA8G5D"}
+{"version":3,"file":"traveler-list.d.ts","sourceRoot":"","sources":["../../src/components/traveler-list.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,EAAE,iBAAiB,2CA+HhF"}

package/dist/components/traveler-list.js

@@ -1,29 +1,60 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTravelerMutation, useTravelers, } from "@voyantjs/bookings-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBookingTravelerDocuments, useRevealTraveler, useTravelerMutation, useTravelers, } from "@voyantjs/bookings-react";
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
-import { Pencil, Plus, Trash2, Users } from "lucide-react";
+import { Eye, EyeOff, Loader2, Pencil, Plus, Trash2, Users } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider";
 import { TravelerDialog } from "./traveler-dialog";
-export function TravelerList({ bookingId }) {
+export function TravelerList({ bookingId, autoReveal = false }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editing, setEditing] = React.useState(undefined);
+    const [revealedIds, setRevealedIds] = React.useState(new Set());
     const { data } = useTravelers(bookingId);
+    const documentsQuery = useBookingTravelerDocuments(bookingId);
     const { remove } = useTravelerMutation(bookingId);
     const messages = useBookingsUiMessagesOrDefault();
     const travelers = data?.data ?? [];
+    const documentsByTraveler = React.useMemo(() => {
+        const grouped = new Map();
+        for (const document of documentsQuery.data?.data ?? []) {
+            if (!document.travelerId)
+                continue;
+            const bucket = grouped.get(document.travelerId) ?? [];
+            bucket.push(document);
+            grouped.set(document.travelerId, bucket);
+        }
+        return grouped;
+    }, [documentsQuery.data?.data]);
+    // Detect whether the list endpoint already returned unmasked data
+    // (caller has bookings-pii:* scope or similar). If so, don't show
+    // the reveal button — there's nothing to unmask.
+    const allAlreadyRevealed = React.useMemo(() => {
+        if (travelers.length === 0)
+            return true;
+        return travelers.every((t) => !looksRedacted(t));
+    }, [travelers]);
+    const toggleReveal = React.useCallback((travelerId) => {
+        setRevealedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(travelerId))
+                next.delete(travelerId);
+            else
+                next.add(travelerId);
+            return next;
+        });
+    }, []);
     return (_jsxs(Card, { "data-slot": "traveler-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-4 w-4" }), messages.travelerList.title] }), _jsxs(Button, { size: "sm", onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.travelerList.addTraveler] })] }), _jsx(CardContent, { children: travelers.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.travelerList.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.travelerList.columns.name }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.email }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.phone }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: travelers.map((traveler) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "p-2", children: [traveler.firstName, " ", traveler.lastName] }), _jsx("td", { className: "p-2", children: traveler.email ?? messages.travelerList.values.emailUnavailable }), _jsx("td", { className: "p-2", children: traveler.phone ?? messages.travelerList.values.phoneUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
-                                                            setEditing(traveler);
-                                                            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.travelerList.actions.deleteConfirm)) {
-                                                                remove.mutate(traveler.id);
-                                                            }
-                                                        }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, traveler.id))) })] }) })) }), _jsx(TravelerDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.travelerList.addTraveler] })] }), _jsx(CardContent, { children: travelers.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.travelerList.empty })) : (_jsx("div", { className: "overflow-x-auto rounded border bg-background", children: _jsxs("table", { className: "w-full min-w-[980px] 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.travelerList.columns.name }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.email }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.phone }), _jsx("th", { className: "p-2 text-left font-medium", children: "Role" }), _jsx("th", { className: "p-2 text-left font-medium", children: "DOB / age" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Documents" }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: travelers.map((traveler) => (_jsx(TravelerRow, { bookingId: bookingId, traveler: traveler, documents: documentsByTraveler.get(traveler.id) ?? [], revealed: autoReveal || revealedIds.has(traveler.id), onToggleReveal: autoReveal || allAlreadyRevealed ? undefined : () => toggleReveal(traveler.id), emailUnavailable: messages.travelerList.values.emailUnavailable, phoneUnavailable: messages.travelerList.values.phoneUnavailable, onEdit: () => {
+                                        setEditing(traveler);
+                                        setDialogOpen(true);
+                                    }, onDelete: () => {
+                                        if (confirm(messages.travelerList.actions.deleteConfirm)) {
+                                            remove.mutate(traveler.id);
+                                        }
+                                    } }, traveler.id))) })] }) })) }), _jsx(TravelerDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
                     setDialogOpen(nextOpen);
                     if (!nextOpen) {
                         setEditing(undefined);
@@ -32,3 +63,86 @@ export function TravelerList({ bookingId }) {
                     setEditing(undefined);
                 } })] }));
 }
+/**
+ * Single traveler row. Calls `useRevealTraveler` lazily — only fires
+ * when `revealed=true`. The reveal endpoint audit-logs the access on
+ * the server, so toggling the eye button creates a permanent record.
+ */
+function TravelerRow({ bookingId, traveler, documents, revealed, onToggleReveal, emailUnavailable, phoneUnavailable, onEdit, onDelete, }) {
+    const reveal = useRevealTraveler(bookingId, traveler.id, { enabled: revealed });
+    // Use the revealed copy when available; otherwise fall back to
+    // the masked row from the list endpoint. This keeps the UI snappy
+    // — the masked row renders instantly, then swaps to unmasked the
+    // moment the network returns.
+    const revealedTraveler = reveal.data?.data;
+    const display = revealed && revealedTraveler ? revealedTraveler : traveler;
+    const travelDetails = revealed && revealedTraveler ? revealedTraveler.travelDetails : null;
+    const showLoading = revealed && reveal.isLoading;
+    const revealError = revealed && reveal.error;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: "border-b", children: [_jsx("td", { className: "p-2", children: showLoading ? (_jsx(RowLoading, {})) : (`${display.firstName ?? ""} ${display.lastName ?? ""}`.trim()) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.email ?? emailUnavailable) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.phone ?? phoneUnavailable) }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [display.isPrimary ? _jsx(MiniPill, { children: "Primary" }) : null, travelDetails?.isLeadTraveler ? _jsx(MiniPill, { children: "Lead" }) : null, display.travelerCategory ? _jsx(MiniPill, { children: display.travelerCategory }) : null] }) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : formatDobAge(travelDetails?.dateOfBirth) }), _jsx("td", { className: "p-2", children: documents.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [documents.slice(0, 2).map((document) => (_jsx(MiniPill, { children: document.type.replaceAll("_", " ") }, document.id))), documents.length > 2 ? _jsxs(MiniPill, { children: ["+", documents.length - 2] }) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }), _jsxs("td", { className: "p-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [onToggleReveal ? (_jsx("button", { type: "button", onClick: onToggleReveal, className: "text-muted-foreground hover:text-foreground", title: revealed ? "Hide details" : "Reveal contact details", "aria-label": revealed ? "Hide traveler contact details" : "Reveal traveler contact details", children: revealed ? _jsx(EyeOff, { className: "h-3.5 w-3.5" }) : _jsx(Eye, { className: "h-3.5 w-3.5" }) })) : null, _jsx("button", { type: "button", onClick: onEdit, className: "text-muted-foreground hover:text-foreground", "aria-label": "Edit traveler", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "text-muted-foreground hover:text-destructive", "aria-label": "Delete traveler", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), revealError ? (_jsx("div", { className: "mt-1 text-[10px] text-destructive", children: revealError instanceof Error ? revealError.message : "Reveal failed" })) : null] })] }), _jsx("tr", { className: "border-b last:border-b-0", children: _jsx("td", { colSpan: 7, className: "bg-muted/20 px-2 py-3", children: _jsx(TravelerContextGrid, { traveler: display, travelDetails: travelDetails, documents: documents, loading: showLoading }) }) })] }));
+}
+function RowLoading() {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), _jsx("span", { className: "text-xs", children: "Decrypting\u2026" })] }));
+}
+function TravelerContextGrid({ traveler, travelDetails, documents, loading, }) {
+    if (loading)
+        return _jsx(RowLoading, {});
+    const fields = [
+        ["Nationality", travelDetails?.nationality],
+        ["Passport", travelDetails?.passportNumber],
+        ["Passport expiry", formatDateValue(travelDetails?.passportExpiry)],
+        ["Language", traveler.preferredLanguage],
+        ["Dietary", travelDetails?.dietaryRequirements],
+        ["Accessibility", travelDetails?.accessibilityNeeds],
+        ["Special requests", traveler.specialRequests],
+        ["Notes", traveler.notes],
+    ];
+    const visibleFields = fields.filter(([, value]) => Boolean(value));
+    if (visibleFields.length === 0 && documents.length === 0) {
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: "No additional traveler context" });
+    }
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [visibleFields.map(([label, value]) => (_jsx(DetailField, { label: label, value: value ?? "-" }, label))), documents.map((document) => (_jsx(DetailField, { label: `Document · ${document.type.replaceAll("_", " ")}`, value: document.fileName }, document.id)))] }));
+}
+function DetailField({ label, value }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: label }), _jsx("div", { className: "truncate text-xs text-foreground", children: value })] }));
+}
+function MiniPill({ children }) {
+    return (_jsx("span", { className: "inline-flex h-5 items-center rounded-full border px-2 text-[11px] capitalize text-muted-foreground", children: children }));
+}
+function formatDobAge(value) {
+    if (!value)
+        return "-";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    const today = new Date();
+    let age = today.getFullYear() - date.getFullYear();
+    const birthdayPassed = today.getMonth() > date.getMonth() ||
+        (today.getMonth() === date.getMonth() && today.getDate() >= date.getDate());
+    if (!birthdayPassed)
+        age -= 1;
+    return `${formatDateValue(value)} · ${age}`;
+}
+function formatDateValue(value) {
+    if (!value)
+        return null;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+}
+/**
+ * Heuristic check for redaction markers used by `redactTravelerIdentity`
+ * on the API. We can't import the redactor from `@voyantjs/bookings`
+ * at the UI layer (would pull in a server dep), so probe for the
+ * canonical patterns the redactor produces (`***`, `*@`, `***1234`).
+ *
+ * If any field on this traveler shows a redaction marker, treat the
+ * row as redacted and surface the reveal button. Conservative: false
+ * positives (genuine `***` data) just keep the button visible, which
+ * is harmless.
+ */
+function looksRedacted(traveler) {
+    const fields = [traveler.firstName, traveler.lastName, traveler.email, traveler.phone];
+    return fields.some((v) => typeof v === "string" && (v === "***" || /\*\*\*/.test(v) || /\*+@/.test(v)));
+}