@voyant-travel/bookings-react 0.119.3

package/dist/components/booking-payment-schedule-dialog.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingPaymentScheduleMutation, } from "@voyant-travel/finance-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+const scheduleTypes = ["deposit", "installment", "balance", "hold", "other"];
+const scheduleStatuses = ["pending", "due", "paid", "waived", "cancelled", "expired"];
+const DEFAULT_CURRENCY = "EUR"; // i18n-literal-ok ISO default currency
+function createScheduleFormSchema(messages) {
+    return z.object({
+        scheduleType: z.enum(scheduleTypes).default("balance"),
+        status: z.enum(scheduleStatuses).default("pending"),
+        dueDate: z.string().min(1, messages.paymentScheduleDialog.validation.dueDateRequired),
+        currency: z.string().min(3).max(3).default("EUR"),
+        amountCents: z.coerce
+            .number()
+            .int()
+            .min(0, messages.paymentScheduleDialog.validation.amountRequired),
+        notes: z.string().optional().nullable(),
+    });
+}
+export function BookingPaymentScheduleDialog({ open, onOpenChange, bookingId, schedule, onSuccess, }) {
+    const isEditing = Boolean(schedule);
+    const { create, update } = useBookingPaymentScheduleMutation(bookingId);
+    const messages = useBookingsUiMessagesOrDefault();
+    const scheduleFormSchema = createScheduleFormSchema(messages);
+    const typeItems = useMemo(() => scheduleTypes.map((t) => ({
+        value: t,
+        label: messages.paymentScheduleDialog.scheduleTypeLabels[t],
+    })), [messages.paymentScheduleDialog.scheduleTypeLabels]);
+    const statusItems = useMemo(() => scheduleStatuses.map((s) => ({
+        value: s,
+        label: messages.paymentScheduleDialog.scheduleStatusLabels[s],
+    })), [messages.paymentScheduleDialog.scheduleStatusLabels]);
+    const form = useForm({
+        resolver: zodResolver(scheduleFormSchema),
+        defaultValues: {
+            scheduleType: "balance",
+            status: "pending",
+            dueDate: "",
+            currency: DEFAULT_CURRENCY,
+            amountCents: 0,
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open && schedule) {
+            form.reset({
+                scheduleType: schedule.scheduleType,
+                status: schedule.status,
+                dueDate: schedule.dueDate,
+                currency: schedule.currency,
+                amountCents: schedule.amountCents,
+                notes: schedule.notes ?? "",
+            });
+        }
+        else if (open) {
+            form.reset();
+        }
+    }, [form, open, schedule]);
+    const [submitError, setSubmitError] = useState(null);
+    const onSubmit = async (values) => {
+        const payload = {
+            scheduleType: values.scheduleType,
+            status: values.status,
+            dueDate: values.dueDate,
+            currency: values.currency,
+            amountCents: values.amountCents,
+            notes: values.notes || null,
+        };
+        setSubmitError(null);
+        try {
+            if (isEditing) {
+                await update.mutateAsync({ id: schedule.id, input: payload });
+            }
+            else {
+                await create.mutateAsync(payload);
+            }
+            onOpenChange(false);
+            onSuccess?.();
+        }
+        catch (err) {
+            // Server-side validation (e.g. "Cannot mark booking payment
+            // schedule as paid without linked completed payment coverage")
+            // would otherwise bubble into an unhandled promise rejection and
+            // leave the operator staring at a closed dialog with no signal.
+            setSubmitError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    useEffect(() => {
+        if (!open)
+            setSubmitError(null);
+    }, [open]);
+    const isSubmitting = create.isPending || update.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
+                            ? messages.paymentScheduleDialog.titles.edit
+                            : messages.paymentScheduleDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("scheduleType"), onValueChange: (v) => form.setValue("scheduleType", (v ?? "balance")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.paymentScheduleDialog.scheduleTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.paymentScheduleDialog.scheduleStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.dueDate }), _jsx(DatePicker, { value: form.watch("dueDate") || null, onChange: (next) => form.setValue("dueDate", next ?? "", {
+                                                shouldValidate: true,
+                                                shouldDirty: true,
+                                            }), placeholder: messages.paymentScheduleDialog.placeholders.dueDate, className: "w-full" }), form.formState.errors.dueDate && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.dueDate.message }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? DEFAULT_CURRENCY, {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.amountCents }), _jsx(CurrencyInput, { value: form.watch("amountCents"), onChange: (next) => form.setValue("amountCents", next ?? 0, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("currency") }), form.formState.errors.amountCents && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.amountCents.message }))] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.notes }), _jsx(Textarea, { ...form.register("notes"), placeholder: messages.paymentScheduleDialog.placeholders.notes })] }), submitError ? (_jsx("p", { role: "alert", className: "rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: submitError })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing
+                                            ? messages.common.saveChanges
+                                            : messages.paymentScheduleDialog.actions.addSchedule] })] })] })] }) }));
+}

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

@@ -0,0 +1,10 @@
+export interface BookingPaymentScheduleListProps {
+    /**
+     * When set, the Add schedule button renders disabled and its tooltip
+     * shows this reason (e.g. "Booking is fully paid.").
+     */
+    addScheduleDisabledReason?: string | null;
+    bookingId: string;
+}
+export declare function BookingPaymentScheduleList({ bookingId, addScheduleDisabledReason, }: BookingPaymentScheduleListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-payment-schedule-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-payment-schedule-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-list.tsx"],"names":[],"mappings":"AAsFA,MAAM,WAAW,+BAA+B;IAC9C;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,yBAAyB,GAC1B,EAAE,+BAA+B,2CA4TjC"}

package/dist/components/booking-payment-schedule-list.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { financeQueryKeys, useBookingPaymentScheduleMutation, useBookingPaymentSchedules, useInvoiceMutation, useInvoices, } from "@voyant-travel/finance-react";
+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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@voyant-travel/ui/components/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@voyant-travel/ui/components/tooltip";
+import { CalendarClock, FileText, Loader2, Pencil, Plus, Receipt, Trash2 } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBooking } from "../index.js";
+import { BookingPaymentScheduleDialog } from "./booking-payment-schedule-dialog.js";
+import { IconActionButton } from "./icon-action-button.js";
+import { StatusBadge } from "./status-badge.js";
+const issueDocumentAllocationErrorCodes = [
+    "invoice_number_series_not_found",
+    "invoice_number_series_inactive",
+    "invoice_number_series_scope_mismatch",
+    "no_active_series_for_scope",
+];
+function isIssueDocumentAllocationErrorCode(value) {
+    return (typeof value === "string" &&
+        issueDocumentAllocationErrorCodes.includes(value));
+}
+function extractIssueDocumentAllocationErrorCode(error) {
+    if (typeof error === "object" && error !== null && "body" in error) {
+        const body = error.body;
+        if (typeof body === "object" && body !== null && "error" in body) {
+            const apiError = body.error;
+            if (isIssueDocumentAllocationErrorCode(apiError))
+                return apiError;
+        }
+    }
+    if (error instanceof Error && isIssueDocumentAllocationErrorCode(error.message)) {
+        return error.message;
+    }
+    return null;
+}
+function getIssueDocumentErrorMessage(error, messages) {
+    const code = extractIssueDocumentAllocationErrorCode(error);
+    if (code) {
+        return messages.bookingPaymentScheduleList.actions.issueDocumentErrors[code];
+    }
+    return error instanceof Error ? error.message : null;
+}
+export function BookingPaymentScheduleList({ bookingId, addScheduleDisabledReason, }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const [generatingInvoiceForId, setGeneratingInvoiceForId] = React.useState(null);
+    const { data } = useBookingPaymentSchedules(bookingId);
+    const { remove } = useBookingPaymentScheduleMutation(bookingId);
+    const { data: bookingData } = useBooking(bookingId);
+    const booking = bookingData?.data ?? null;
+    // Track which schedules already have an invoice / proforma so the
+    // per-row action menu can hide the irrelevant choices and the new
+    // Invoice column can link to the doc.
+    const { data: invoicesData } = useInvoices({ bookingId, limit: 50 });
+    const docsByScheduleId = React.useMemo(() => {
+        const map = new Map();
+        const invoices = invoicesData?.data ?? [];
+        for (const invoice of invoices) {
+            if (invoice.status === "void")
+                continue;
+            const scheduleIds = invoice.bookingPaymentScheduleIds ?? [];
+            for (const scheduleId of scheduleIds) {
+                const existing = map.get(scheduleId) ?? { invoice: null, proforma: null };
+                const ref = { id: invoice.id, invoiceNumber: invoice.invoiceNumber };
+                if (invoice.invoiceType === "proforma") {
+                    if (!existing.proforma)
+                        existing.proforma = ref;
+                }
+                else if (invoice.invoiceType !== "credit_note") {
+                    if (!existing.invoice)
+                        existing.invoice = ref;
+                }
+                map.set(scheduleId, existing);
+            }
+        }
+        return map;
+    }, [invoicesData]);
+    const { createFromBooking: createInvoiceFromBooking, render: renderInvoice } = useInvoiceMutation();
+    const queryClient = useQueryClient();
+    const { formatCurrency, formatDate } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const t = messages.bookingPaymentScheduleList;
+    const deleteMessages = t.actions.deleteConfirm;
+    const schedules = data?.data ?? [];
+    const handleGenerateInvoice = React.useCallback(async (schedule, invoiceType) => {
+        if (!booking)
+            return;
+        setGeneratingInvoiceForId(schedule.id);
+        try {
+            const todayIso = new Date().toISOString().slice(0, 10);
+            const dueIso = schedule.dueDate || todayIso;
+            const invoice = await createInvoiceFromBooking.mutateAsync({
+                bookingId: booking.id,
+                bookingPaymentScheduleId: schedule.id,
+                issueDate: todayIso,
+                dueDate: dueIso,
+                notes: schedule.notes ?? null,
+                invoiceType,
+            });
+            await renderInvoice.mutateAsync({ id: invoice.id, input: { format: "pdf" } });
+            await queryClient.invalidateQueries({ queryKey: financeQueryKeys.invoices() });
+            toast.success(t.actions.issueDocumentSuccess);
+        }
+        catch (err) {
+            const errorMessage = getIssueDocumentErrorMessage(err, messages);
+            toast.error(errorMessage
+                ? `${t.actions.issueDocumentFailure}: ${errorMessage}`
+                : t.actions.issueDocumentFailure);
+        }
+        finally {
+            setGeneratingInvoiceForId(null);
+        }
+    }, [booking, createInvoiceFromBooking, renderInvoice, queryClient, t, messages]);
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    const columns = React.useMemo(() => [
+        {
+            accessorKey: "dueDate",
+            header: t.columns.dueDate,
+            cell: ({ row }) => row.original.dueDate
+                ? formatDate(`${row.original.dueDate}T00:00:00`, { dateStyle: "medium" })
+                : "—",
+        },
+        {
+            accessorKey: "amountCents",
+            header: t.columns.amount,
+            cell: ({ row }) => (_jsx("span", { className: "font-mono", children: formatCurrency(row.original.amountCents / 100, row.original.currency) })),
+        },
+        {
+            accessorKey: "scheduleType",
+            header: t.columns.type,
+            cell: ({ row }) => messages.paymentScheduleDialog.scheduleTypeLabels[row.original.scheduleType],
+        },
+        {
+            accessorKey: "status",
+            header: t.columns.status,
+            cell: ({ row }) => (_jsx(StatusBadge, { status: row.original.status, children: messages.paymentScheduleDialog.scheduleStatusLabels[row.original.status] })),
+        },
+        {
+            id: "invoice",
+            header: t.columns.invoice,
+            cell: ({ row }) => {
+                const docs = docsByScheduleId.get(row.original.id);
+                const doc = docs?.invoice ?? docs?.proforma ?? null;
+                if (!doc)
+                    return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+                return (_jsxs("span", { className: "font-mono text-xs", children: [doc.invoiceNumber, docs?.proforma && !docs.invoice ? (_jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", t.values.proformaSuffix, ")"] })) : null] }));
+            },
+        },
+        {
+            accessorKey: "notes",
+            header: t.columns.notes,
+            cell: ({ row }) => (_jsx("span", { className: "block max-w-[200px] truncate text-muted-foreground", children: row.original.notes ?? t.values.notesUnavailable })),
+        },
+        {
+            id: "actions",
+            header: "",
+            cell: ({ row }) => {
+                const schedule = row.original;
+                const issuing = generatingInvoiceForId === schedule.id;
+                // Once a schedule is settled (paid / waived / cancelled / expired)
+                // there's nothing left to bill, so hide the issue-document menu.
+                const canIssue = schedule.status === "pending" || schedule.status === "due";
+                const docs = docsByScheduleId.get(schedule.id);
+                // Idempotency: a schedule already covered by a final invoice
+                // accepts no more documents; a covering proforma blocks new
+                // proformas (a final invoice path is still open via the
+                // proforma's Convert action). A final invoice always wins
+                // over a proforma in the same slot.
+                const canIssueInvoice = canIssue && !docs?.invoice;
+                const canIssueProforma = canIssue && !docs?.invoice && !docs?.proforma;
+                const hasAnyIssueAction = canIssueInvoice || canIssueProforma;
+                return (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [hasAnyIssueAction ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { disabled: !booking || issuing, render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t.actions.issueDocument, title: t.actions.issueDocument }), children: issuing ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Receipt, { className: "h-3.5 w-3.5" })) }), _jsxs(DropdownMenuContent, { align: "end", children: [canIssueInvoice ? (_jsxs(DropdownMenuItem, { onClick: () => void handleGenerateInvoice(schedule, "invoice"), children: [_jsx(FileText, { className: "h-4 w-4" }), t.actions.issueInvoice] })) : null, canIssueProforma ? (_jsxs(DropdownMenuItem, { onClick: () => void handleGenerateInvoice(schedule, "proforma"), children: [_jsx(FileText, { className: "h-4 w-4" }), t.actions.issueProforma] })) : null] })] })) : null, _jsx(IconActionButton, { label: t.actions.editSchedule, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                setEditing(schedule);
+                                setDialogOpen(true);
+                            } }), _jsx(IconActionButton, { label: t.actions.deleteSchedule, 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(schedule);
+                            } })] }));
+            },
+        },
+    ], [
+        booking,
+        formatCurrency,
+        formatDate,
+        generatingInvoiceForId,
+        handleGenerateInvoice,
+        messages,
+        t,
+        docsByScheduleId,
+    ]);
+    return (_jsxs("div", { "data-slot": "booking-payment-schedule-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(CalendarClock, { className: "h-4 w-4" }), t.title] }), addScheduleDisabledReason ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { tabIndex: 0, className: "inline-block" }), children: _jsxs(Button, { variant: "outline", size: "sm", disabled: true, className: "pointer-events-none", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addSchedule] }) }), _jsx(TooltipContent, { children: addScheduleDisabledReason })] })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addSchedule] }))] }), _jsx(DataTable, { columns: columns, data: schedules, emptyMessage: t.empty, showPagination: false }), _jsx(BookingPaymentScheduleDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                    setDialogOpen(nextOpen);
+                    if (!nextOpen) {
+                        setEditing(undefined);
+                    }
+                }, bookingId: bookingId, schedule: editing, onSuccess: () => {
+                    setEditing(undefined);
+                } }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: deleteMessages.title }), _jsx(AlertDialogDescription, { children: deleteMessages.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: deleteMessages.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: () => void handleConfirmDelete(), children: deleteMessages.confirm })] })] }) })] }));
+}

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

@@ -0,0 +1,83 @@
+import { type PaymentMethod, type PaymentStatus } from "@voyant-travel/finance-react";
+import * as React from "react";
+export interface BookingPaymentsSummaryRow {
+    id: string;
+    invoiceId: string;
+    invoiceNumber: string;
+    invoiceType?: "invoice" | "proforma" | "credit_note";
+    amountCents: number;
+    currency: string;
+    /** When the customer paid in a different currency than the invoice. */
+    baseCurrency?: string | null;
+    baseAmountCents?: number | null;
+    status: PaymentStatus;
+    paymentMethod: PaymentMethod;
+    paymentDate: string;
+    referenceNumber: string | null;
+    notes: string | null;
+}
+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";
+    /**
+     * Open the linked invoice in-place (typically a Sheet that renders
+     * the invoice detail page). When omitted, the invoice number cell
+     * renders as plain text.
+     */
+    onInvoiceOpen?: (invoiceId: string, row: BookingPaymentsSummaryRow) => void;
+    /**
+     * Optional invoice href for hosts that navigate with route links
+     * instead of an in-place invoice panel.
+     */
+    getInvoiceHref?: (row: BookingPaymentsSummaryRow) => string;
+    /**
+     * Optional handler for the "View" action in the row menu. Consumers
+     * typically call their router's navigate(). Middle-click isn't useful
+     * on menu items, so this is a click handler rather than an href.
+     */
+    onViewPayment?: (row: BookingPaymentsSummaryRow) => void;
+    /** Convert a proforma invoice attached to the payment into a final invoice. */
+    onConvertProforma?: (row: BookingPaymentsSummaryRow) => Promise<unknown> | unknown;
+    /** Edit handler — typically opens a dialog pre-filled with the row. */
+    onEditPayment?: (row: BookingPaymentsSummaryRow) => void;
+    /**
+     * Delete handler. Must resolve when the deletion is complete (the
+     * card closes the confirm dialog on resolve). Throw or reject to
+     * keep the dialog open with an error.
+     */
+    onDeletePayment?: (row: BookingPaymentsSummaryRow) => Promise<void> | void;
+    /**
+     * Extra content rendered on the right of the card header (e.g. a
+     * `Record payment` button). Keeps section-level actions co-located
+     * with the section instead of floating at the top of the tab.
+     */
+    headerAction?: React.ReactNode;
+}
+/**
+ * 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, onInvoiceOpen, getInvoiceHref, onViewPayment, onConvertProforma, onEditPayment, onDeletePayment, headerAction, }: BookingPaymentsSummaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-payments-summary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-payments-summary.d.ts","sourceRoot":"","sources":["../../src/components/booking-payments-summary.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAGnB,MAAM,8BAA8B,CAAA;AAarC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,aAAa,CAAA;IACpD,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,MAAM,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAC3E;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,MAAM,CAAA;IAC3D;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,IAAI,CAAA;IACxD,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAA;IAClF,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,IAAI,CAAA;IACxD;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC1E;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAkB,EAClB,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,YAAY,GACb,EAAE,2BAA2B,2CAwQ7B"}

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

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminBookingPayments, usePublicBookingPayments, } from "@voyant-travel/finance-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@voyant-travel/ui/components";
+import { DataTable } from "@voyant-travel/ui/components/data-table";
+import { ArrowUpRight, CreditCard, Eye, Pencil, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { IconActionButton } from "./icon-action-button.js";
+import { StatusBadge } from "./status-badge.js";
+/**
+ * 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", onInvoiceOpen, getInvoiceHref, onViewPayment, onConvertProforma, onEditPayment, onDeletePayment, headerAction, }) {
+    const publicQuery = usePublicBookingPayments(bookingId, { enabled: variant === "public" });
+    const adminQuery = useAdminBookingPayments(bookingId, { enabled: variant === "admin" });
+    const data = variant === "admin" ? adminQuery.data : publicQuery.data;
+    const { formatDateTime } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const card = messages.bookingPaymentsSummary;
+    const payments = data?.data?.payments ?? [];
+    const showActionsColumn = Boolean(onViewPayment || onConvertProforma || onEditPayment || onDeletePayment);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const [deletePending, setDeletePending] = React.useState(false);
+    const handleDeleteConfirm = async () => {
+        if (!deleteTarget || !onDeletePayment)
+            return;
+        setDeletePending(true);
+        try {
+            await onDeletePayment(deleteTarget);
+            setDeleteTarget(null);
+        }
+        finally {
+            setDeletePending(false);
+        }
+    };
+    const paymentRows = React.useMemo(() => payments.map((payment) => ({
+        id: payment.id,
+        invoiceId: payment.invoiceId,
+        invoiceNumber: payment.invoiceNumber,
+        invoiceType: payment.invoiceType,
+        amountCents: payment.amountCents,
+        currency: payment.currency,
+        baseCurrency: payment.baseCurrency ?? null,
+        baseAmountCents: payment.baseAmountCents ?? null,
+        status: payment.status,
+        paymentMethod: payment.paymentMethod,
+        paymentDate: payment.paymentDate,
+        referenceNumber: payment.referenceNumber,
+        notes: payment.notes,
+    })), [payments]);
+    const columns = React.useMemo(() => {
+        const cols = [
+            {
+                accessorKey: "paymentDate",
+                header: card.columns.date,
+                cell: ({ row }) => formatDateTime(row.original.paymentDate),
+            },
+            {
+                accessorKey: "amountCents",
+                header: card.columns.amount,
+                cell: ({ row }) => (_jsx("span", { className: "font-mono font-medium", children: formatMoney(row.original.amountCents, row.original.currency) })),
+            },
+            {
+                id: "fx",
+                header: card.columns.fx,
+                cell: ({ row }) => {
+                    const { baseCurrency, baseAmountCents, currency } = row.original;
+                    if (!baseCurrency ||
+                        baseAmountCents == null ||
+                        baseCurrency.toUpperCase() === currency.toUpperCase()) {
+                        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+                    }
+                    return (_jsxs("span", { className: "font-mono text-xs", children: ["\u2248 ", formatMoney(baseAmountCents, baseCurrency)] }));
+                },
+            },
+            {
+                accessorKey: "paymentMethod",
+                header: card.columns.method,
+                cell: ({ row }) => card.paymentMethodLabels[row.original.paymentMethod] ?? row.original.paymentMethod,
+            },
+            {
+                accessorKey: "status",
+                header: card.columns.status,
+                cell: ({ row }) => (_jsx(StatusBadge, { status: row.original.status, children: card.paymentStatusLabels[row.original.status] ?? row.original.status })),
+            },
+            {
+                accessorKey: "referenceNumber",
+                header: card.columns.reference,
+                cell: ({ row }) => (_jsx("span", { title: row.original.referenceNumber ?? undefined, className: "inline-block max-w-[180px] truncate font-mono text-muted-foreground text-xs", children: row.original.referenceNumber ?? "—" })),
+            },
+            {
+                accessorKey: "invoiceNumber",
+                header: card.columns.invoice,
+                cell: ({ row }) => {
+                    if (onInvoiceOpen) {
+                        return (_jsxs("button", { type: "button", onClick: (e) => {
+                                e.stopPropagation();
+                                onInvoiceOpen(row.original.invoiceId, row.original);
+                            }, className: "inline-flex items-center gap-1 font-mono text-primary text-xs hover:underline", children: [row.original.invoiceNumber, _jsx(ArrowUpRight, { className: "h-3 w-3" })] }));
+                    }
+                    if (getInvoiceHref) {
+                        return (_jsxs("a", { href: getInvoiceHref(row.original), onClick: (e) => e.stopPropagation(), className: "inline-flex items-center gap-1 font-mono text-primary text-xs hover:underline", children: [row.original.invoiceNumber, _jsx(ArrowUpRight, { className: "h-3 w-3" })] }));
+                    }
+                    return _jsx("span", { className: "font-mono text-xs", children: row.original.invoiceNumber });
+                },
+            },
+        ];
+        if (showActionsColumn) {
+            cols.push({
+                id: "actions",
+                header: () => _jsx("span", { className: "sr-only", children: card.columns.actions }),
+                cell: ({ row }) => (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [onViewPayment ? (_jsx(IconActionButton, { label: card.actions.view, icon: _jsx(Eye, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                onViewPayment(row.original);
+                            } })) : null, onConvertProforma && row.original.invoiceType === "proforma" ? (_jsx(IconActionButton, { label: card.actions.convertToInvoice, icon: _jsx(ArrowUpRight, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                void onConvertProforma(row.original);
+                            } })) : null, onEditPayment ? (_jsx(IconActionButton, { label: card.actions.edit, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                onEditPayment(row.original);
+                            } })) : null, onDeletePayment ? (_jsx(IconActionButton, { label: card.actions.delete, 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);
+                            } })) : null] })),
+            });
+        }
+        return cols;
+    }, [
+        card,
+        formatDateTime,
+        getInvoiceHref,
+        onInvoiceOpen,
+        onConvertProforma,
+        onDeletePayment,
+        onEditPayment,
+        onViewPayment,
+        showActionsColumn,
+    ]);
+    return (_jsxs("div", { "data-slot": "booking-payments-summary", 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(CreditCard, { className: "h-4 w-4 text-muted-foreground" }), messages.bookingPaymentsSummary.title] }), headerAction] }), _jsx(DataTable, { columns: columns, data: paymentRows, emptyMessage: messages.bookingPaymentsSummary.empty, showPagination: false }), onDeletePayment ? (_jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !deletePending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: card.deleteConfirm.title }), _jsx(AlertDialogDescription, { children: deleteTarget
+                                        ? card.deleteConfirm.description.replace("{amount}", formatMoney(deleteTarget.amountCents, deleteTarget.currency))
+                                        : "" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: deletePending, children: card.deleteConfirm.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: deletePending, onClick: () => void handleDeleteConfirm(), children: card.deleteConfirm.confirm })] })] }) })) : null] }));
+}
+function formatMoney(cents, currency) {
+    if (!currency) {
+        return new Intl.NumberFormat(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(cents / 100);
+    }
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
+}

package/dist/components/booking-quick-view-sheet.d.ts

@@ -0,0 +1,14 @@
+import { type BookingRecord } from "../index.js";
+export interface BookingQuickViewSheetProps {
+    bookingId: string | null | undefined;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Wired to the "View full booking" footer button. Receives the booking
+     * so the host can route to its detail page. When omitted, the footer
+     * action is suppressed. */
+    onViewFull?: (booking: BookingRecord) => void;
+    /** Optional locale override; defaults to the active i18n locale. */
+    locale?: string;
+}
+export declare function BookingQuickViewSheet({ bookingId, open, onOpenChange, onViewFull, locale, }: BookingQuickViewSheetProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-quick-view-sheet.d.ts.map

package/dist/components/booking-quick-view-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-quick-view-sheet.d.ts","sourceRoot":"","sources":["../../src/components/booking-quick-view-sheet.tsx"],"names":[],"mappings":"AAuDA,OAAO,EACL,KAAK,aAAa,EAQnB,MAAM,aAAa,CAAA;AAEpB,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC;;+BAE2B;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,GACP,EAAE,0BAA0B,2CA6D5B"}