@voyant-travel/bookings-react 0.119.3

package/dist/components/booking-list.js

@@ -0,0 +1,352 @@
+// agent-quality: file-size exception -- owner: bookings-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@voyant-travel/ui/components/pagination";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown, Plus, Search } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
+import { useBookings, } from "../index.js";
+import { BookingDialog } from "./booking-dialog.js";
+import { BOOKING_STATUS_ALL, BookingListFiltersPopover } from "./booking-list-filters.js";
+import { StatusBadge } from "./status-badge.js";
+function stripUndefined(input) {
+    const result = {};
+    for (const [key, value] of Object.entries(input)) {
+        if (value !== undefined)
+            result[key] = value;
+    }
+    return result;
+}
+const DEFAULT_FILTERS = {
+    search: "",
+    status: BOOKING_STATUS_ALL,
+    productId: null,
+    optionId: null,
+    supplierId: null,
+    productCategoryId: null,
+    personId: null,
+    organizationId: null,
+    availabilitySlotId: null,
+    dateFrom: null,
+    dateTo: null,
+    paxMin: "",
+    paxMax: "",
+    sortBy: "createdAt",
+    sortDir: "desc",
+    offset: 0,
+};
+const SORTABLE_COLUMNS = {
+    bookingNumber: "bookingNumber",
+    status: "status",
+    sellAmount: "sellAmount",
+    pax: "pax",
+    startDate: "startDate",
+    endDate: "endDate",
+    createdAt: "createdAt",
+};
+const SKELETON_ROW_COUNT = 6;
+const TABLE_COLUMN_COUNT = 8;
+export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, headerActions, initialFilters, onFiltersChange, } = {}) {
+    // Single bag of filter / sort / paging state so we can hand the host
+    // a snapshot whenever anything changes. We seed once from
+    // `initialFilters` and don't re-seed if the prop later mutates —
+    // hosts that want to drive controlled changes can just remount.
+    //
+    // Strip `undefined` keys before merging: a host passing
+    // `{ status: undefined }` would otherwise clobber the
+    // `BOOKING_STATUS_ALL` default and show "2" active filters on an
+    // empty URL.
+    const [filters, setFilters] = React.useState(() => ({
+        ...DEFAULT_FILTERS,
+        ...stripUndefined(initialFilters ?? {}),
+    }));
+    const onFiltersChangeRef = React.useRef(onFiltersChange);
+    React.useEffect(() => {
+        onFiltersChangeRef.current = onFiltersChange;
+    });
+    // Notify the host on every state change. Skip the initial render
+    // because the URL already reflects whatever was passed in via
+    // `initialFilters`.
+    const isFirstRender = React.useRef(true);
+    React.useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        onFiltersChangeRef.current?.(filters);
+    }, [filters]);
+    const updateFilters = React.useCallback((patch) => setFilters((prev) => ({ ...prev, ...patch })), []);
+    const { search, status, productId, optionId, supplierId, productCategoryId, personId, organizationId, availabilitySlotId, dateFrom, dateTo, paxMin, paxMax, sortBy, sortDir, offset, } = filters;
+    const dateRange = dateFrom != null || dateTo != null ? { from: dateFrom, to: dateTo } : null;
+    const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const { formatDate, formatDateTime, formatNumber, locale } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const paxMinNumber = paxMin === "" ? undefined : Number.parseInt(paxMin, 10);
+    const paxMaxNumber = paxMax === "" ? undefined : Number.parseInt(paxMax, 10);
+    // "All" hides drafts + expired by default — they're rarely actionable
+    // and crowd the operator's queue. Explicit selection of either status
+    // (or any other) opts back in.
+    const excludeStatuses = status === BOOKING_STATUS_ALL ? ["draft", "expired"] : undefined;
+    const { data, isPending, isFetching, isError } = useBookings({
+        search: search || undefined,
+        status: status === BOOKING_STATUS_ALL ? undefined : status,
+        excludeStatuses,
+        productId: productId ?? undefined,
+        optionId: optionId ?? undefined,
+        availabilitySlotId: availabilitySlotId ?? undefined,
+        supplierId: supplierId ?? undefined,
+        productCategoryId: productCategoryId ?? undefined,
+        personId: personId ?? undefined,
+        organizationId: organizationId ?? undefined,
+        dateFrom: dateRange?.from ?? undefined,
+        dateTo: dateRange?.to ?? undefined,
+        paxMin: Number.isFinite(paxMinNumber) ? paxMinNumber : undefined,
+        paxMax: Number.isFinite(paxMaxNumber) ? paxMaxNumber : undefined,
+        sortBy,
+        sortDir,
+        limit: pageSize,
+        offset,
+    });
+    const bookings = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = Math.floor(offset / pageSize) + 1;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const showSkeleton = isPending || (isFetching && bookings.length === 0);
+    const handleSelect = (booking) => {
+        if (onSelectBooking) {
+            onSelectBooking(booking);
+            return;
+        }
+        setEditing(booking);
+        setDialogOpen(true);
+    };
+    const resetOffset = () => updateFilters({ offset: 0 });
+    const handleSort = (field) => {
+        if (sortBy !== field) {
+            updateFilters({ offset: 0, sortBy: field, sortDir: "asc" });
+            return;
+        }
+        if (sortDir === "asc") {
+            updateFilters({ offset: 0, sortDir: "desc" });
+            return;
+        }
+        updateFilters({ offset: 0, sortBy: "createdAt", sortDir: "desc" });
+    };
+    const activeFilterCount = (status !== BOOKING_STATUS_ALL ? 1 : 0) +
+        (productId !== null ? 1 : 0) +
+        (optionId !== null ? 1 : 0) +
+        (availabilitySlotId !== null ? 1 : 0) +
+        (supplierId !== null ? 1 : 0) +
+        (productCategoryId !== null ? 1 : 0) +
+        (personId !== null ? 1 : 0) +
+        (organizationId !== null ? 1 : 0) +
+        (dateRange?.from || dateRange?.to ? 1 : 0) +
+        (paxMin !== "" || paxMax !== "" ? 1 : 0);
+    const hasActiveFilters = activeFilterCount > 0 || search !== "";
+    const clearFilters = () => {
+        updateFilters({
+            search: "",
+            status: BOOKING_STATUS_ALL,
+            productId: null,
+            optionId: null,
+            availabilitySlotId: null,
+            supplierId: null,
+            productCategoryId: null,
+            personId: null,
+            organizationId: null,
+            dateFrom: null,
+            dateTo: null,
+            paxMin: "",
+            paxMax: "",
+            offset: 0,
+        });
+    };
+    const columnMessages = messages.bookingList.columns;
+    const statusLabels = messages.common.bookingStatusLabels;
+    return (_jsxs("div", { "data-slot": "booking-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "bookings-search", className: "sr-only", children: messages.bookingList.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: "bookings-search", placeholder: messages.bookingList.searchPlaceholder, value: search, onChange: (event) => updateFilters({ search: event.target.value, offset: 0 }), className: "pl-9" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: (next) => updateFilters({ status: next }), productId: productId, onProductIdChange: (next) => 
+                        // Slot picker is product-scoped; clear when the product changes.
+                        updateFilters({ productId: next, availabilitySlotId: null }), optionId: optionId, onOptionIdChange: (next) => updateFilters({ optionId: next }), availabilitySlotId: availabilitySlotId, onAvailabilitySlotIdChange: (next) => updateFilters({ availabilitySlotId: next }), supplierId: supplierId, onSupplierIdChange: (next) => updateFilters({ supplierId: next }), productCategoryId: productCategoryId, onProductCategoryIdChange: (next) => updateFilters({ productCategoryId: next }), personId: personId, onPersonIdChange: (next) => updateFilters({ personId: next }), organizationId: organizationId, onOrganizationIdChange: (next) => updateFilters({ organizationId: next }), dateRange: dateRange, onDateRangeChange: (next) => updateFilters({ dateFrom: next?.from ?? null, dateTo: next?.to ?? null }), paxMin: paxMin, onPaxMinChange: (next) => updateFilters({ paxMin: next }), paxMax: paxMax, onPaxMaxChange: (next) => updateFilters({ paxMax: next }), onFiltersChanged: resetOffset, hasActiveFilters: hasActiveFilters, onClearFilters: clearFilters }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [headerActions, _jsxs(Button, { onClick: () => {
+                                    if (onCreateBooking) {
+                                        onCreateBooking();
+                                        return;
+                                    }
+                                    setEditing(undefined);
+                                    setDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4" }), messages.bookingList.newBooking] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.bookingNumber, field: SORTABLE_COLUMNS.bookingNumber, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.createdAt, field: SORTABLE_COLUMNS.createdAt, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.lead }), _jsx(TableHead, { children: columnMessages.whatBooked }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(BookingTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: messages.bookingList.empty }) })) : (bookings.map((booking) => (_jsxs(TableRow, { onClick: () => handleSelect(booking), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: booking.bookingNumber }), _jsx(TableCell, { children: formatBookingDateTime(booking.createdAt, formatDateTime) }), _jsx(TableCell, { children: formatLead(booking) }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore, messages.bookingList.itemDays) }), _jsx(TableCell, { children: _jsx(StatusBadge, { status: booking.status, children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
+                                            ? "—"
+                                            : `${formatNumber(booking.sellAmountCents / 100, {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsx(TableCell, { className: "whitespace-nowrap", children: formatBookingDateRange(booking.startsAt ?? booking.startDate, booking.endsAt ?? booking.endDate, formatDate, locale) })] }, booking.id)))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(messages.bookingList.showingSummary, {
+                            count: bookings.length,
+                            total,
+                        }) }), pageCount > 1 ? (_jsx(BookingListPagination, { page: page, pageCount: pageCount, previousLabel: messages.bookingList.previousPage, nextLabel: messages.bookingList.nextPage, onPageChange: (nextPage) => updateFilters({ offset: (nextPage - 1) * pageSize }) })) : null] }), _jsx(BookingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, booking: editing, onSuccess: (booking) => {
+                    onSelectBooking?.(booking);
+                } })] }));
+}
+function BookingListPagination({ page, pageCount, previousLabel, nextLabel, onPageChange, }) {
+    const canPrev = page > 1;
+    const canNext = page < pageCount;
+    const pages = computePageWindow(page, pageCount);
+    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", text: previousLabel, "aria-disabled": !canPrev, tabIndex: canPrev ? 0 : -1, className: canPrev ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canPrev)
+                                onPageChange(page - 1);
+                        } }) }), pages.map((entry, idx) => (_jsx(PaginationItem
+                // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis sentinels collide on value alone -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+                , { children: entry === "…" ? (_jsx("span", { className: "px-2 text-muted-foreground", "aria-hidden": true, children: "\u2026" })) : (_jsx(PaginationLink, { href: "#", isActive: entry === page, onClick: (event) => {
+                            event.preventDefault();
+                            if (entry !== page)
+                                onPageChange(entry);
+                        }, children: entry })) }, `${entry}-${idx}`))), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", text: nextLabel, "aria-disabled": !canNext, tabIndex: canNext ? 0 : -1, className: canNext ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canNext)
+                                onPageChange(page + 1);
+                        } }) })] }) }));
+}
+/** Build a 1-indexed page list with ellipses for tables with many
+ * pages. Always shows first, last, current, and one neighbour on
+ * either side. */
+function computePageWindow(page, pageCount) {
+    if (pageCount <= 7) {
+        return Array.from({ length: pageCount }, (_, i) => i + 1);
+    }
+    const out = [1];
+    const start = Math.max(2, page - 1);
+    const end = Math.min(pageCount - 1, page + 1);
+    if (start > 2)
+        out.push("…");
+    for (let i = start; i <= end; i += 1)
+        out.push(i);
+    if (end < pageCount - 1)
+        out.push("…");
+    out.push(pageCount);
+    return out;
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function BookingTableSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-8" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) })] }, `skeleton-${idx}`))) }));
+}
+function formatBookingItems(booking, moreTemplate, daysTemplate) {
+    const items = booking.items ?? [];
+    if (items.length === 0)
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    const [first, ...rest] = items;
+    if (!first)
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    const label = first.productName ?? first.title;
+    const days = computeItemDays(first.startsAt, first.endsAt);
+    const daysSuffix = days > 0 ? ` ${formatMessage(daysTemplate, { count: days })}` : "";
+    const moreSuffix = rest.length === 0 ? "" : ` ${formatMessage(moreTemplate, { count: rest.length })}`;
+    return (_jsxs("div", { className: "max-w-[320px] truncate", title: `${label}${daysSuffix}${moreSuffix}`, children: [label, days > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(daysTemplate, { count: days }) })) : null, rest.length > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(moreTemplate, { count: rest.length }) })) : null] }));
+}
+/** Inclusive day-count between two ISO timestamps, rounded up so a
+ * trip spanning two calendar days reads "2 days". Returns 0 when
+ * either bound is missing so the caller can drop the tag entirely. */
+function computeItemDays(startValue, endValue) {
+    const start = toDate(startValue);
+    const end = toDate(endValue);
+    if (!start || !end)
+        return 0;
+    const ms = end.getTime() - start.getTime();
+    if (!Number.isFinite(ms) || ms < 0)
+        return 0;
+    const days = Math.ceil(ms / (1000 * 60 * 60 * 24));
+    return Math.max(1, days);
+}
+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);
+}
+function toDate(value) {
+    if (!value)
+        return null;
+    const iso = /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+/**
+ * Compact date-range formatter for the bookings table — collapses
+ * shared month/year so a 3-day trip reads "Jun 15 – 20, 2026" in
+ * English and "15 – 20 iun., 2026" in Romanian. Output respects the
+ * locale's day/month order.
+ *
+ * NOTE: `Intl.DateTimeFormat` produces nonsense (e.g.
+ * `"2026 (day: 20)"`) for incomplete combinations like `{ day, year }`
+ * without a month. We build the compact range from named parts
+ * instead of asking Intl to skip the month.
+ */
+function formatBookingDateRange(startValue, endValue, formatDate, locale) {
+    const start = toDate(startValue);
+    const end = toDate(endValue);
+    if (!start && !end)
+        return "—";
+    if (start && !end)
+        return formatDate(start, { month: "short", day: "numeric", year: "numeric" });
+    if (!start || !end)
+        return formatDate(end, { month: "short", day: "numeric", year: "numeric" });
+    const s = start;
+    const e = end;
+    const sameDay = s.getFullYear() === e.getFullYear() &&
+        s.getMonth() === e.getMonth() &&
+        s.getDate() === e.getDate();
+    if (sameDay)
+        return formatDate(s, { month: "short", day: "numeric", year: "numeric" });
+    const sameYear = s.getFullYear() === e.getFullYear();
+    const sameMonth = sameYear && s.getMonth() === e.getMonth();
+    // For collapsed ranges we need to know whether the locale puts the
+    // month before or after the day (en-US: "Jun 15", ro-RO: "15 iun.")
+    // so the result reads naturally.
+    const dayFirst = isLocaleDayFirst(locale);
+    const monthShortStart = formatDate(s, { month: "short" });
+    const monthShortEnd = formatDate(e, { month: "short" });
+    const startDay = formatDate(s, { day: "numeric" });
+    const endDay = formatDate(e, { day: "numeric" });
+    if (sameMonth) {
+        const body = dayFirst
+            ? `${startDay} – ${endDay} ${monthShortStart}`
+            : `${monthShortStart} ${startDay} – ${endDay}`;
+        return `${body}, ${e.getFullYear()}`;
+    }
+    if (sameYear) {
+        const body = dayFirst
+            ? `${startDay} ${monthShortStart} – ${endDay} ${monthShortEnd}`
+            : `${monthShortStart} ${startDay} – ${monthShortEnd} ${endDay}`;
+        return `${body}, ${e.getFullYear()}`;
+    }
+    return `${formatDate(s, { month: "short", day: "numeric", year: "numeric" })} – ${formatDate(e, { month: "short", day: "numeric", year: "numeric" })}`;
+}
+/** Detect whether the locale renders the day before the month in a
+ * short date format (e.g. ro-RO: "15 iun." vs en-US: "Jun 15"). */
+function isLocaleDayFirst(locale) {
+    const parts = new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+    }).formatToParts(new Date(2026, 0, 15));
+    const dayIndex = parts.findIndex((p) => p.type === "day");
+    const monthIndex = parts.findIndex((p) => p.type === "month");
+    if (dayIndex === -1 || monthIndex === -1)
+        return false;
+    return dayIndex < monthIndex;
+}
+function formatLead(booking) {
+    const name = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ").trim();
+    if (name)
+        return name;
+    return booking.contactEmail ?? "—";
+}

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

@@ -0,0 +1,16 @@
+import { type BookingNoteRecord } from "../index.js";
+export interface BookingNoteDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    /** When set, the dialog opens in edit mode against this note. */
+    note?: BookingNoteRecord | null;
+    onSuccess?: () => void;
+}
+/**
+ * Add / edit a booking note. Mirrors the supplier-status / traveler
+ * dialog pattern so the activity tab is consistent with the rest of
+ * the booking-detail surface.
+ */
+export declare function BookingNoteDialog({ open, onOpenChange, bookingId, note, onSuccess, }: BookingNoteDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-note-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-note-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-note-dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,KAAK,iBAAiB,EAA0B,MAAM,aAAa,CAAA;AAE5E,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,IAAI,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,2CA6DxB"}

package/dist/components/booking-note-dialog.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Textarea, } from "@voyant-travel/ui/components";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingNoteMutation } from "../index.js";
+/**
+ * Add / edit a booking note. Mirrors the supplier-status / traveler
+ * dialog pattern so the activity tab is consistent with the rest of
+ * the booking-detail surface.
+ */
+export function BookingNoteDialog({ open, onOpenChange, bookingId, note, onSuccess, }) {
+    const [content, setContent] = React.useState("");
+    const messages = useBookingsUiMessagesOrDefault();
+    const dialog = messages.bookingNotes.dialog;
+    const mutation = useBookingNoteMutation(bookingId);
+    const isEditing = Boolean(note);
+    React.useEffect(() => {
+        if (open)
+            setContent(note?.content ?? "");
+    }, [note, open]);
+    const submit = async () => {
+        const trimmed = content.trim();
+        if (!trimmed)
+            return;
+        if (note) {
+            await mutation.update.mutateAsync({ id: note.id, content: trimmed });
+        }
+        else {
+            await mutation.create.mutateAsync({ content: trimmed });
+        }
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    const pending = isEditing ? mutation.update.isPending : mutation.create.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.createTitle }) }), _jsxs("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        void submit();
+                    }, className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "booking-note-content", children: dialog.contentLabel }), _jsx(Textarea, { id: "booking-note-content", placeholder: dialog.contentPlaceholder, value: content, onChange: (e) => setContent(e.target.value), className: "min-h-[120px]" })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: dialog.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: !content.trim() || pending, children: [pending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? dialog.save : dialog.create] })] })] })] }) }));
+}

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

@@ -0,0 +1,5 @@
+export interface BookingNotesProps {
+    bookingId: string;
+}
+export declare function BookingNotes({ bookingId }: BookingNotesProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-notes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-notes.d.ts","sourceRoot":"","sources":["../../src/components/booking-notes.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAmG5D"}

package/dist/components/booking-notes.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyant-travel/ui/components";
+import { Pencil, Plus, StickyNote, Trash2 } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
+import { useBookingNoteMutation, useBookingNotes } from "../index.js";
+import { BookingNoteDialog } from "./booking-note-dialog.js";
+import { IconActionButton } from "./icon-action-button.js";
+export function BookingNotes({ bookingId }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const { data } = useBookingNotes(bookingId);
+    const mutation = useBookingNoteMutation(bookingId);
+    const { formatDateTime } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const card = messages.bookingNotes;
+    const notes = (data?.data ?? []);
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await mutation.remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    return (_jsxs("div", { "data-slot": "booking-notes", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(StickyNote, { className: "h-4 w-4 text-muted-foreground" }), card.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(null);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), card.addAction] })] }), notes.length === 0 ? (_jsx("div", { className: "rounded-md border bg-background p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: card.empty }) })) : (_jsx("div", { className: "grid gap-2 md:grid-cols-2", children: notes.map((note) => (_jsx(NoteCard, { note: note, authorTemplate: card.authorLabel, editLabel: card.actions.edit, deleteLabel: card.actions.delete, formatDateTime: formatDateTime, onEdit: () => {
+                        setEditing(note);
+                        setDialogOpen(true);
+                    }, onDelete: () => setDeleteTarget(note) }, note.id))) })), _jsx(BookingNoteDialog, { open: dialogOpen, onOpenChange: (next) => {
+                    setDialogOpen(next);
+                    if (!next)
+                        setEditing(null);
+                }, bookingId: bookingId, note: editing }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !mutation.remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: card.deleteConfirm.title }), _jsx(AlertDialogDescription, { children: card.deleteConfirm.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: mutation.remove.isPending, children: card.deleteConfirm.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: mutation.remove.isPending, onClick: () => void handleConfirmDelete(), children: card.deleteConfirm.confirm })] })] }) })] }));
+}
+function NoteCard({ note, authorTemplate, editLabel, deleteLabel, formatDateTime, onEdit, onDelete, }) {
+    return (_jsxs("div", { className: "group flex flex-col gap-2 rounded-md border bg-background p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm", children: note.content }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: [_jsx(IconActionButton, { label: editLabel, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: onEdit }), _jsx(IconActionButton, { label: deleteLabel, icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), onClick: onDelete })] })] }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [formatMessage(authorTemplate, {
+                        actor: note.authorName || note.authorEmail || note.authorId,
+                    }), " ", "\u00B7 ", formatDateTime(note.createdAt)] })] }));
+}

package/dist/components/booking-payment-reconciliation-banner.d.ts

@@ -0,0 +1,5 @@
+export interface BookingPaymentReconciliationBannerProps {
+    bookingId: string;
+}
+export declare function BookingPaymentReconciliationBanner({ bookingId, }: BookingPaymentReconciliationBannerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-payment-reconciliation-banner.d.ts.map

package/dist/components/booking-payment-reconciliation-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-payment-reconciliation-banner.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-reconciliation-banner.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,uCAAuC;IACtD,SAAS,EAAE,MAAM,CAAA;CAClB;AAID,wBAAgB,kCAAkC,CAAC,EACjD,SAAS,GACV,EAAE,uCAAuC,2CA4FzC"}

package/dist/components/booking-payment-reconciliation-banner.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminBookingPayments, useBookingPaymentSchedules, useInvoices, } from "@voyant-travel/finance-react";
+import { Badge, cn } from "@voyant-travel/ui/components";
+import { AlertTriangle, CheckCircle2, Loader2 } from "lucide-react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+export function BookingPaymentReconciliationBanner({ bookingId, }) {
+    const invoicesQuery = useInvoices({ bookingId, limit: 50 });
+    const paymentsQuery = useAdminBookingPayments(bookingId);
+    const schedulesQuery = useBookingPaymentSchedules(bookingId);
+    const { formatCurrency } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault().bookingPaymentReconciliationBanner;
+    const invoices = invoicesQuery.data?.data ?? [];
+    const payments = paymentsQuery.data?.data?.payments ?? [];
+    const schedules = schedulesQuery.data?.data ?? [];
+    const isLoading = invoicesQuery.isLoading || paymentsQuery.isLoading || schedulesQuery.isLoading;
+    const billedTotals = sumInvoiceTotals(invoices, "totalCents");
+    const invoicePaidTotals = sumInvoiceTotals(invoices, "paidCents");
+    const completedPaymentTotals = sumCompletedPayments(payments);
+    const paidScheduleTotals = sumPaidSchedules(schedules);
+    const driftTotals = calculateDriftTotals([
+        invoicePaidTotals,
+        completedPaymentTotals,
+        paidScheduleTotals,
+    ]);
+    const hasRecords = invoices.length > 0 || payments.length > 0 || schedules.length > 0;
+    const hasDrift = Array.from(driftTotals.values()).some((cents) => cents > 0);
+    if (isLoading && !hasRecords) {
+        return (_jsx("section", { className: "rounded-md border bg-muted/30 p-4", "aria-live": "polite", children: _jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }), messages.loading] }) }));
+    }
+    return (_jsxs("section", { className: cn("rounded-md border p-4", hasDrift
+            ? "border-amber-300 bg-amber-50 text-amber-950 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100"
+            : "bg-muted/30"), children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [hasDrift ? (_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-600", "aria-hidden": "true" })) : (_jsx(CheckCircle2, { className: "mt-0.5 h-4 w-4 shrink-0 text-emerald-600", "aria-hidden": "true" })), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-sm", children: messages.title }), _jsx("p", { className: "mt-1 max-w-3xl text-sm opacity-80", children: !hasRecords
+                                            ? messages.empty
+                                            : hasDrift
+                                                ? messages.driftDescription
+                                                : messages.reconciledDescription })] })] }), _jsx(Badge, { variant: hasDrift ? "destructive" : "outline", children: hasDrift ? messages.driftBadge : messages.reconciledBadge })] }), _jsxs("dl", { className: "mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: [_jsx(ReconciliationMetric, { label: messages.billed, value: formatMoneyTotals(billedTotals, formatCurrency, messages.emptyValue) }), _jsx(ReconciliationMetric, { label: messages.invoicePaid, value: formatMoneyTotals(invoicePaidTotals, formatCurrency, messages.emptyValue) }), _jsx(ReconciliationMetric, { label: messages.recordedPayments, value: formatMoneyTotals(completedPaymentTotals, formatCurrency, messages.emptyValue) }), _jsx(ReconciliationMetric, { label: messages.schedulePaid, value: formatMoneyTotals(paidScheduleTotals, formatCurrency, messages.emptyValue) }), _jsx(ReconciliationMetric, { label: messages.drift, value: formatMoneyTotals(driftTotals, formatCurrency, messages.emptyValue), emphasis: hasDrift })] })] }));
+}
+function ReconciliationMetric({ label, value, emphasis = false, }) {
+    return (_jsxs("div", { children: [_jsx("dt", { className: "text-muted-foreground text-xs", children: label }), _jsx("dd", { className: emphasis ? "mt-1 font-mono font-semibold text-sm" : "mt-1 font-mono text-sm", children: value })] }));
+}
+function sumInvoiceTotals(invoices, field) {
+    const totals = new Map();
+    for (const invoice of invoices) {
+        if (invoice.status === "void" || invoice.invoiceType === "credit_note")
+            continue;
+        addMoney(totals, invoice.currency, invoice[field]);
+    }
+    return totals;
+}
+function sumCompletedPayments(payments) {
+    const totals = new Map();
+    for (const payment of payments) {
+        if (payment.status !== "completed")
+            continue;
+        addMoney(totals, payment.currency, payment.amountCents);
+    }
+    return totals;
+}
+function sumPaidSchedules(schedules) {
+    const totals = new Map();
+    for (const schedule of schedules) {
+        if (schedule.status !== "paid")
+            continue;
+        addMoney(totals, schedule.currency, schedule.amountCents);
+    }
+    return totals;
+}
+function calculateDriftTotals(sources) {
+    const currencies = new Set(sources.flatMap((source) => Array.from(source.keys())));
+    const drift = new Map();
+    for (const currency of currencies) {
+        const amounts = sources.map((source) => source.get(currency) ?? 0);
+        drift.set(currency, Math.max(...amounts) - Math.min(...amounts));
+    }
+    return drift;
+}
+function addMoney(totals, currency, cents) {
+    if (cents === 0)
+        return;
+    totals.set(currency, (totals.get(currency) ?? 0) + cents);
+}
+function formatMoneyTotals(totals, formatCurrency, emptyValue) {
+    const entries = Array.from(totals.entries()).filter(([, cents]) => cents > 0);
+    if (entries.length === 0)
+        return emptyValue;
+    return entries
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([currency, cents]) => formatCurrency(cents / 100, currency))
+        .join(" / ");
+}

package/dist/components/booking-payment-schedule-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type BookingPaymentScheduleRecord } from "@voyant-travel/finance-react";
+export interface BookingPaymentScheduleDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    schedule?: BookingPaymentScheduleRecord;
+    onSuccess?: () => void;
+}
+export declare function BookingPaymentScheduleDialog({ open, onOpenChange, bookingId, schedule, onSuccess, }: BookingPaymentScheduleDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-payment-schedule-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-payment-schedule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,4BAA4B,EAElC,MAAM,8BAA8B,CAAA;AAgDrC,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,4BAA4B,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,iCAAiC,2CAuOnC"}