@voyant-travel/bookings-react 0.119.3

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

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyant-travel/ui/components";
+import { DataTable } from "@voyant-travel/ui/components/data-table";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@voyant-travel/ui/components/sheet";
+import { Eye, Package, Pencil, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingItemMutation, useBookingItems } from "../index.js";
+import { BookingItemDialog } from "./booking-item-dialog.js";
+import { IconActionButton } from "./icon-action-button.js";
+import { StatusBadge } from "./status-badge.js";
+export function BookingItemList({ bookingId, onResourceOpen }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const [viewing, setViewing] = React.useState(null);
+    const { data } = useBookingItems(bookingId);
+    const { remove } = useBookingItemMutation(bookingId);
+    const { formatCurrency, formatDateTime } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const items = data?.data ?? [];
+    const deleteMessages = messages.bookingItemList.actions.deleteConfirm;
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    const columns = React.useMemo(() => [
+        {
+            accessorKey: "title",
+            header: messages.bookingItemList.columns.title,
+            cell: ({ row }) => (_jsx("span", { className: "font-medium", children: row.original.productNameSnapshot ?? row.original.title })),
+        },
+        {
+            id: "option",
+            header: messages.bookingItemList.columns.option,
+            cell: ({ row }) => row.original.optionNameSnapshot ?? "—",
+        },
+        {
+            id: "unit",
+            header: messages.bookingItemList.columns.unit,
+            cell: ({ row }) => {
+                const item = row.original;
+                const unit = item.unitNameSnapshot ?? (item.productNameSnapshot ? item.title : null);
+                return unit ?? "—";
+            },
+        },
+        {
+            accessorKey: "itemType",
+            header: messages.bookingItemList.columns.type,
+            cell: ({ row }) => messages.bookingItemDialog.itemTypeLabels[row.original.itemType],
+        },
+        {
+            accessorKey: "status",
+            header: messages.bookingItemList.columns.status,
+            cell: ({ row }) => (_jsx(StatusBadge, { status: row.original.status, children: messages.bookingItemDialog.itemStatusLabels[row.original.status] })),
+        },
+        {
+            accessorKey: "quantity",
+            header: () => _jsx("div", { className: "text-right", children: messages.bookingItemList.columns.quantity }),
+            cell: ({ row }) => _jsx("div", { className: "text-right font-mono", children: row.original.quantity }),
+        },
+        {
+            accessorKey: "totalSellAmountCents",
+            header: () => _jsx("div", { className: "text-right", children: messages.bookingItemList.columns.total }),
+            cell: ({ row }) => (_jsx("div", { className: "text-right font-mono", children: row.original.totalSellAmountCents == null
+                    ? messages.bookingItemList.values.totalUnavailable
+                    : formatCurrency(row.original.totalSellAmountCents / 100, row.original.sellCurrency) })),
+        },
+        {
+            accessorKey: "totalCostAmountCents",
+            header: messages.bookingItemList.columns.cost,
+            cell: ({ row }) => (_jsx("span", { className: "font-mono text-muted-foreground", children: row.original.totalCostAmountCents == null || !row.original.costCurrency
+                    ? messages.bookingItemList.values.costUnavailable
+                    : formatCurrency(row.original.totalCostAmountCents / 100, row.original.costCurrency) })),
+        },
+        {
+            id: "dates",
+            header: messages.bookingItemList.columns.serviceDate,
+            cell: ({ row }) => (_jsx("span", { className: "text-xs", children: formatItemDateRange(row.original, formatDateTime) ??
+                    messages.bookingItemList.values.serviceDateUnavailable })),
+        },
+        {
+            id: "actions",
+            header: "",
+            cell: ({ row }) => (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(IconActionButton, { label: messages.bookingItemList.actions.viewItem, icon: _jsx(Eye, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                            e.stopPropagation();
+                            setViewing(row.original);
+                        } }), _jsx(IconActionButton, { label: messages.bookingItemList.actions.editItem, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                            e.stopPropagation();
+                            setEditing(row.original);
+                            setDialogOpen(true);
+                        } }), _jsx(IconActionButton, { label: messages.bookingItemList.actions.deleteItem, 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, formatDateTime, messages]);
+    return (_jsxs("div", { "data-slot": "booking-item-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(Package, { className: "h-4 w-4" }), messages.bookingItemList.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingItemList.addItem] })] }), _jsx(DataTable, { columns: columns, data: items, emptyMessage: messages.bookingItemList.empty, showPagination: false }), _jsx(BookingItemDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                    setDialogOpen(nextOpen);
+                    if (!nextOpen) {
+                        setEditing(undefined);
+                    }
+                }, bookingId: bookingId, item: editing, onSuccess: () => {
+                    setEditing(undefined);
+                } }), _jsx(Sheet, { open: Boolean(viewing), onOpenChange: (next) => {
+                    if (!next)
+                        setViewing(null);
+                }, children: _jsxs(SheetContent, { side: "right", className: "sm:max-w-2xl", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: messages.bookingItemList.snapshot.title }), _jsx(SheetDescription, { children: messages.bookingItemList.snapshot.subtitle })] }), viewing ? (_jsx(ItemSnapshotBody, { item: viewing, formatCurrency: formatCurrency, onResourceOpen: onResourceOpen })) : null] }) }), _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 })] })] }) })] }));
+}
+function ItemSnapshotBody({ item, formatCurrency, onResourceOpen, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const { formatDateTime } = useBookingsUiI18nOrDefault();
+    const labels = messages.bookingItemList.snapshot;
+    const empty = labels.empty;
+    const productName = item.productNameSnapshot ?? item.title;
+    const dateRange = formatItemDateRange(item, formatDateTime);
+    const unitSell = item.unitSellAmountCents != null
+        ? formatCurrency(item.unitSellAmountCents / 100, item.sellCurrency)
+        : empty;
+    const totalSell = item.totalSellAmountCents != null
+        ? formatCurrency(item.totalSellAmountCents / 100, item.sellCurrency)
+        : empty;
+    const unitCost = item.unitCostAmountCents != null && item.costCurrency
+        ? formatCurrency(item.unitCostAmountCents / 100, item.costCurrency)
+        : empty;
+    const totalCost = item.totalCostAmountCents != null && item.costCurrency
+        ? formatCurrency(item.totalCostAmountCents / 100, item.costCurrency)
+        : empty;
+    const productLink = item.productId && onResourceOpen
+        ? () => onResourceOpen("product", item.productId)
+        : undefined;
+    const dateLink = item.availabilitySlotId && onResourceOpen
+        ? () => onResourceOpen("availabilitySlot", item.availabilitySlotId)
+        : undefined;
+    return (_jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: [_jsxs(SnapshotSection, { title: labels.sectionSummary, children: [_jsx(SnapshotRow, { label: labels.productLabel, value: _jsx(LinkOrText, { text: productName, onClick: productLink }) }), _jsx(SnapshotRow, { label: labels.optionLabel, value: item.optionNameSnapshot || empty }), _jsx(SnapshotRow, { label: labels.unitLabel, value: item.unitNameSnapshot || empty }), _jsx(SnapshotRow, { label: labels.typeLabel, value: messages.bookingItemDialog.itemTypeLabels[item.itemType] }), _jsx(SnapshotRow, { label: labels.statusLabel, value: _jsx(StatusBadge, { status: item.status, children: messages.bookingItemDialog.itemStatusLabels[item.status] }) }), _jsx(SnapshotRow, { label: labels.datesLabel, value: _jsx(LinkOrText, { text: dateRange ?? empty, onClick: dateLink }) }), _jsx(SnapshotRow, { label: labels.descriptionLabel, value: item.description || empty, multiline: true }), _jsx(SnapshotRow, { label: labels.notesLabel, value: item.notes || empty, multiline: true })] }), _jsxs(SnapshotSection, { title: labels.sectionPricing, children: [_jsx(SnapshotRow, { label: labels.quantityLabel, value: String(item.quantity) }), _jsx(SnapshotRow, { label: labels.unitSellLabel, value: unitSell, mono: true }), _jsx(SnapshotRow, { label: labels.totalSellLabel, value: totalSell, mono: true }), _jsx(SnapshotRow, { label: labels.unitCostLabel, value: unitCost, mono: true }), _jsx(SnapshotRow, { label: labels.totalCostLabel, value: totalCost, mono: true })] }), _jsxs(SnapshotSection, { title: labels.sectionMeta, children: [_jsx(SnapshotRow, { label: labels.createdAtLabel, value: formatTimestampIso(item.createdAt, formatDateTime) ?? empty }), _jsx(SnapshotRow, { label: labels.updatedAtLabel, value: formatTimestampIso(item.updatedAt, formatDateTime) ?? empty })] })] }));
+}
+function LinkOrText({ text, onClick }) {
+    if (!onClick)
+        return _jsx(_Fragment, { children: text });
+    return (_jsx("button", { type: "button", onClick: onClick, className: "text-left text-primary hover:underline", children: text }));
+}
+function SnapshotSection({ title, children }) {
+    return (_jsxs("section", { className: "mb-6", children: [_jsx("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: title }), _jsx("dl", { className: "divide-y divide-border rounded-md border", children: children })] }));
+}
+function SnapshotRow({ label, value, mono, multiline, }) {
+    return (_jsxs("div", { className: "grid grid-cols-[10rem_1fr] items-baseline gap-3 px-3 py-2 text-sm", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: label }), _jsx("dd", { className: mono
+                    ? "font-mono text-sm"
+                    : multiline
+                        ? "whitespace-pre-wrap text-sm"
+                        : "truncate text-sm", children: value })] }));
+}
+function formatTimestampIso(iso, formatDateTime) {
+    if (!iso)
+        return null;
+    const d = new Date(iso);
+    if (!Number.isFinite(d.getTime()))
+        return null;
+    return formatDateTime(d);
+}
+function formatItemDateRange(item, formatDateTime) {
+    // Prefer the explicit start/end timestamps over the snapshot label —
+    // the snapshot was rendered in whatever locale was active when the
+    // booking was created, so it can be stale (English text on a Romanian
+    // dashboard, missing arrival, etc.). We only fall back to the snapshot
+    // when we have nothing better.
+    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 `${formatDateTime(start)} → ${formatDateTime(end)}`;
+        }
+        return formatDateTime(start);
+    }
+    if (item.serviceDate) {
+        const d = new Date(item.serviceDate);
+        if (Number.isFinite(d.getTime())) {
+            return formatDateTime(d, { dateStyle: "medium" });
+        }
+        return item.serviceDate;
+    }
+    return item.departureLabelSnapshot ?? null;
+}

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

@@ -0,0 +1,6 @@
+export interface BookingItemTravelersProps {
+    bookingId: string;
+    itemId: string;
+}
+export declare function BookingItemTravelers({ bookingId, itemId }: BookingItemTravelersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-item-travelers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-item-travelers.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-travelers.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CAwJpF"}

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

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { Plus, Trash2, UserCheck } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingItemTravelerMutation, useBookingItemTravelers, useTravelers, } from "../index.js";
+const roles = [
+    "traveler",
+    "occupant",
+    "primary_contact",
+    "service_assignee",
+    "beneficiary",
+    "other",
+];
+export function BookingItemTravelers({ bookingId, itemId }) {
+    const { data: travelerLinksData } = useBookingItemTravelers(bookingId, itemId);
+    const { data: travelersData } = useTravelers(bookingId);
+    const { add, remove } = useBookingItemTravelerMutation(bookingId, itemId);
+    const messages = useBookingsUiMessagesOrDefault();
+    const [selectedTravelerId, setSelectedTravelerId] = React.useState("");
+    const [selectedRole, setSelectedRole] = React.useState("traveler");
+    const assignedTravelers = travelerLinksData?.data ?? [];
+    const travelers = travelersData?.data ?? [];
+    const assignedIds = new Set(assignedTravelers.map((link) => link.travelerId));
+    const availableTravelers = travelers.filter((traveler) => !assignedIds.has(traveler.id));
+    const travelerItems = React.useMemo(() => availableTravelers.map((t) => ({
+        value: t.id,
+        label: `${t.firstName} ${t.lastName}`,
+    })), [availableTravelers]);
+    const roleItems = React.useMemo(() => roles.map((r) => ({
+        value: r,
+        label: messages.bookingItemTravelers.roleLabels[r],
+    })), [messages.bookingItemTravelers.roleLabels]);
+    const travelerMap = new Map();
+    for (const traveler of travelers) {
+        travelerMap.set(traveler.id, traveler);
+    }
+    const handleAssign = () => {
+        if (!selectedTravelerId)
+            return;
+        add.mutate({ travelerId: selectedTravelerId, role: selectedRole }, {
+            onSuccess: () => {
+                setSelectedTravelerId("");
+                setSelectedRole("traveler");
+            },
+        });
+    };
+    return (_jsxs("div", { className: "space-y-3 rounded-md border bg-muted/30 p-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [_jsx(UserCheck, { className: "h-3.5 w-3.5" }), messages.bookingItemTravelers.title] }), assignedTravelers.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.bookingItemTravelers.empty })) : (_jsx("div", { className: "space-y-1", children: assignedTravelers.map((link) => {
+                    const traveler = travelerMap.get(link.travelerId);
+                    return (_jsxs("div", { className: "flex items-center justify-between rounded px-2 py-1 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: traveler ? `${traveler.firstName} ${traveler.lastName}` : link.travelerId }), _jsx(Badge, { variant: "outline", className: "text-xs", children: messages.bookingItemTravelers.roleLabels[link.role] }), link.isPrimary && (_jsx(Badge, { variant: "default", className: "text-xs", children: messages.bookingItemTravelers.primaryBadge }))] }), _jsx("button", { type: "button", onClick: () => {
+                                    if (confirm(messages.bookingItemTravelers.actions.removeConfirm)) {
+                                        remove.mutate(link.id);
+                                    }
+                                }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, link.id));
+                }) })), availableTravelers.length > 0 && (_jsxs("div", { className: "flex items-end gap-2 border-t pt-3", children: [_jsx("div", { className: "flex-1", children: _jsxs(Select, { items: travelerItems, value: selectedTravelerId, onValueChange: (v) => setSelectedTravelerId(v ?? ""), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, { placeholder: messages.bookingItemTravelers.selectTravelerPlaceholder }) }), _jsx(SelectContent, { children: availableTravelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id))) })] }) }), _jsx("div", { className: "w-36", children: _jsxs(Select, { items: roleItems, value: selectedRole, onValueChange: (v) => setSelectedRole(v ?? "traveler"), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: roles.map((r) => (_jsx(SelectItem, { value: r, children: messages.bookingItemTravelers.roleLabels[r] }, r))) })] }) }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8", onClick: handleAssign, disabled: !selectedTravelerId || add.isPending, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), messages.bookingItemTravelers.actions.assign] })] }))] }));
+}

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

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

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

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

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

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSuppliers } from "@voyant-travel/distribution-react/suppliers";
+import { useProductCategories, useProductOptions, useProducts, } from "@voyant-travel/inventory-react";
+import { useSlots } from "@voyant-travel/operations-react/availability";
+import { useOrganizations, usePeople } from "@voyant-travel/relationships-react";
+import { AsyncCombobox } from "@voyant-travel/ui/components/async-combobox";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { ListFilter, X } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { bookingStatuses } from "../index.js";
+export const BOOKING_STATUS_ALL = "__all__";
+export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, availabilitySlotId, onAvailabilitySlotIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, hasActiveFilters, onClearFilters, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const filterMessages = messages.bookingList.filters;
+    const statusLabels = messages.common.bookingStatusLabels;
+    const [selectedProduct, setSelectedProduct] = React.useState(null);
+    const [productSearch, setProductSearch] = React.useState("");
+    const [selectedOption, setSelectedOption] = React.useState(null);
+    const [selectedSlot, setSelectedSlot] = React.useState(null);
+    const [selectedSupplier, setSelectedSupplier] = React.useState(null);
+    const [supplierSearch, setSupplierSearch] = React.useState("");
+    const [selectedProductCategory, setSelectedProductCategory] = React.useState(null);
+    const [productCategorySearch, setProductCategorySearch] = React.useState("");
+    const [selectedPerson, setSelectedPerson] = React.useState(null);
+    const [personSearch, setPersonSearch] = React.useState("");
+    const [selectedOrganization, setSelectedOrganization] = React.useState(null);
+    const [organizationSearch, setOrganizationSearch] = React.useState("");
+    const { data: productsData } = useProducts({
+        search: productSearch || undefined,
+        limit: 20,
+    });
+    const products = productsData?.data ?? [];
+    const { data: optionsData } = useProductOptions({
+        productId: productId ?? undefined,
+        status: "active",
+        limit: 20,
+        enabled: productId !== null,
+    });
+    const productOptions = optionsData?.data ?? [];
+    // Departure picker is product-scoped. The list endpoint orders
+    // results most-recent-first; capping at 50 keeps the dropdown
+    // workable while still surfacing the active season's slots.
+    const { data: slotsData } = useSlots({
+        productId: productId ?? undefined,
+        limit: 50,
+        enabled: productId !== null,
+    });
+    const slots = slotsData?.data ?? [];
+    const { data: suppliersData } = useSuppliers({
+        search: supplierSearch || undefined,
+        limit: 20,
+    });
+    const suppliers = suppliersData?.data ?? [];
+    const { data: productCategoriesData } = useProductCategories({
+        search: productCategorySearch || undefined,
+        active: true,
+        limit: 20,
+    });
+    const productCategories = productCategoriesData?.data ?? [];
+    const { data: peopleData } = usePeople({
+        search: personSearch || undefined,
+        limit: 20,
+    });
+    const people = peopleData?.data ?? [];
+    const { data: organizationsData } = useOrganizations({
+        search: organizationSearch || undefined,
+        limit: 20,
+    });
+    const organizations = organizationsData?.data ?? [];
+    const markChanged = () => onFiltersChanged();
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4" }), filterMessages.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [hasActiveFilters && (_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                    onClearFilters();
+                                }, children: [_jsx(X, { className: "mr-1 size-4" }), filterMessages.clear] }) })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-status", children: filterMessages.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                        onStatusChange(value ?? BOOKING_STATUS_ALL);
+                                        markChanged();
+                                    }, children: [_jsx(SelectTrigger, { id: "bookings-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: BOOKING_STATUS_ALL, children: filterMessages.statusAll }), bookingStatuses.map((value) => (_jsx(SelectItem, { value: value, children: statusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-product", children: filterMessages.productLabel }), _jsx(AsyncCombobox, { value: productId, onChange: (value) => {
+                                        onProductIdChange(value);
+                                        onOptionIdChange(null);
+                                        setSelectedOption(null);
+                                        if (!value) {
+                                            setSelectedProduct(null);
+                                        }
+                                        else {
+                                            const match = products.find((product) => product.id === value);
+                                            if (match)
+                                                setSelectedProduct(match);
+                                        }
+                                        markChanged();
+                                    }, items: products, selectedItem: selectedProduct, getKey: (product) => product.id, getLabel: (product) => product.name, onSearchChange: setProductSearch, placeholder: filterMessages.product, emptyText: filterMessages.productEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-option", children: filterMessages.optionLabel }), _jsx(AsyncCombobox, { value: optionId, onChange: (value) => {
+                                        onOptionIdChange(value);
+                                        if (!value)
+                                            setSelectedOption(null);
+                                        else {
+                                            const match = productOptions.find((option) => option.id === value);
+                                            if (match)
+                                                setSelectedOption(match);
+                                        }
+                                        markChanged();
+                                    }, items: productOptions, selectedItem: selectedOption, getKey: (option) => option.id, getLabel: (option) => option.name, getSecondary: (option) => option.code ?? undefined, placeholder: filterMessages.option, emptyText: productId ? filterMessages.optionEmpty : filterMessages.optionNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-departure", children: filterMessages.departureLabel }), _jsx(AsyncCombobox, { value: availabilitySlotId, onChange: (value) => {
+                                        onAvailabilitySlotIdChange(value);
+                                        if (!value)
+                                            setSelectedSlot(null);
+                                        else {
+                                            const match = slots.find((slot) => slot.id === value);
+                                            if (match)
+                                                setSelectedSlot(match);
+                                        }
+                                        markChanged();
+                                    }, items: slots, selectedItem: selectedSlot, getKey: (slot) => slot.id, getLabel: (slot) => formatSlotLabel(slot), getSecondary: (slot) => slot.status, placeholder: filterMessages.departure, emptyText: productId ? filterMessages.departureEmpty : filterMessages.departureNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-category", children: filterMessages.categoryLabel }), _jsx(AsyncCombobox, { value: productCategoryId, onChange: (value) => {
+                                        onProductCategoryIdChange(value);
+                                        if (!value)
+                                            setSelectedProductCategory(null);
+                                        else {
+                                            const match = productCategories.find((category) => category.id === value);
+                                            if (match)
+                                                setSelectedProductCategory(match);
+                                        }
+                                        markChanged();
+                                    }, items: productCategories, selectedItem: selectedProductCategory, getKey: (category) => category.id, getLabel: (category) => category.name, onSearchChange: setProductCategorySearch, placeholder: filterMessages.category, emptyText: filterMessages.categoryEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-supplier", children: filterMessages.supplierLabel }), _jsx(AsyncCombobox, { value: supplierId, onChange: (value) => {
+                                        onSupplierIdChange(value);
+                                        if (!value)
+                                            setSelectedSupplier(null);
+                                        else {
+                                            const match = suppliers.find((supplier) => supplier.id === value);
+                                            if (match)
+                                                setSelectedSupplier(match);
+                                        }
+                                        markChanged();
+                                    }, items: suppliers, selectedItem: selectedSupplier, getKey: (supplier) => supplier.id, getLabel: (supplier) => supplier.name, getSecondary: (supplier) => supplier.type, onSearchChange: setSupplierSearch, placeholder: filterMessages.supplier, emptyText: filterMessages.supplierEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-person", children: filterMessages.personLabel }), _jsx(AsyncCombobox, { value: personId, onChange: (value) => {
+                                        onPersonIdChange(value);
+                                        if (!value)
+                                            setSelectedPerson(null);
+                                        else {
+                                            const match = people.find((person) => person.id === value);
+                                            if (match)
+                                                setSelectedPerson(match);
+                                        }
+                                        markChanged();
+                                    }, items: people, selectedItem: selectedPerson, getKey: (person) => person.id, getLabel: formatPersonName, getSecondary: (person) => person.email ?? undefined, onSearchChange: setPersonSearch, placeholder: filterMessages.person, emptyText: filterMessages.personEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-organization", children: filterMessages.organizationLabel }), _jsx(AsyncCombobox, { value: organizationId, onChange: (value) => {
+                                        onOrganizationIdChange(value);
+                                        if (!value)
+                                            setSelectedOrganization(null);
+                                        else {
+                                            const match = organizations.find((organization) => organization.id === value);
+                                            if (match)
+                                                setSelectedOrganization(match);
+                                        }
+                                        markChanged();
+                                    }, items: organizations, selectedItem: selectedOrganization, getKey: (organization) => organization.id, getLabel: (organization) => organization.name, getSecondary: (organization) => organization.taxId ?? undefined, onSearchChange: setOrganizationSearch, placeholder: filterMessages.organization, emptyText: filterMessages.organizationEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-date", children: filterMessages.dateRangeLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: (value) => {
+                                        onDateRangeChange(value);
+                                        markChanged();
+                                    }, placeholder: filterMessages.dateRange, clearable: true, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.paxLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMin, value: paxMin, onChange: (event) => {
+                                                onPaxMinChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.paxMin }), _jsx("span", { className: "text-muted-foreground", children: "-" }), _jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMax, value: paxMax, onChange: (event) => {
+                                                onPaxMaxChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.paxMax })] })] })] }) })] }));
+}
+function formatPersonName(person) {
+    const name = [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+    return name || person.email || person.id;
+}
+/**
+ * Human-friendly departure label. Renders the local date + start time
+ * in the slot's own timezone so the operator sees what the customer
+ * sees, not whatever the admin's browser locale converts it to.
+ */
+function formatSlotLabel(slot) {
+    try {
+        const formatter = new Intl.DateTimeFormat(undefined, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: slot.timezone,
+        });
+        return formatter.format(new Date(slot.startsAt));
+    }
+    catch {
+        return slot.startsAt;
+    }
+}

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { type BookingRecord, type BookingsListSortDir, type BookingsListSortField } from "../index.js";
+/**
+ * Serializable snapshot of the booking-list filter / sort / paging
+ * state. Hosts that want shareable URLs (operator starter) read this
+ * from the URL on mount via `initialFilters` and push changes via
+ * `onFiltersChange`.
+ */
+export interface BookingListFiltersState {
+    search: string;
+    /** `BOOKING_STATUS_ALL` ("all") or any booking status value. */
+    status: string;
+    productId: string | null;
+    optionId: string | null;
+    supplierId: string | null;
+    productCategoryId: string | null;
+    personId: string | null;
+    organizationId: string | null;
+    availabilitySlotId: string | null;
+    dateFrom: string | null;
+    dateTo: string | null;
+    paxMin: string;
+    paxMax: string;
+    sortBy: BookingsListSortField;
+    sortDir: BookingsListSortDir;
+    offset: number;
+}
+export interface BookingListProps {
+    pageSize?: number;
+    onSelectBooking?: (booking: BookingRecord) => void;
+    onCreateBooking?: () => void;
+    /**
+     * Extra action(s) rendered next to the primary "New booking" button in
+     * the filter bar. Templates use this to surface adjacent flows such as
+     * the trips without forking the component.
+     */
+    headerActions?: React.ReactNode;
+    /**
+     * Initial filter / sort / paging state, typically parsed from the URL.
+     * Only specified keys override the defaults — partial input is fine.
+     */
+    initialFilters?: Partial<BookingListFiltersState>;
+    /**
+     * Fires when any filter, sort, or paging value changes. Hosts push
+     * the snapshot into the URL so refresh / share preserves the view.
+     */
+    onFiltersChange?: (filters: BookingListFiltersState) => void;
+}
+export declare function BookingList({ pageSize, onSelectBooking, onCreateBooking, headerActions, initialFilters, onFiltersChange, }?: BookingListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAE3B,MAAM,aAAa,CAAA;AAKpB;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,qBAAqB,CAAA;IAC7B,OAAO,EAAE,mBAAmB,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAA;CACf;AA6BD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAA;CAC7D;AAiBD,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,GAChB,GAAE,gBAAqB,2CA+XvB"}