@voyant-travel/finance-react 0.119.5

package/dist/components/invoices-page-skeleton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+const INVOICE_WIDTHS = ["w-28", "w-16", "w-20", "w-20", "w-20", "w-24"];
+export function InvoicesTableSkeleton({ rows = 8 }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const columns = messages.invoicesPage.columns;
+    return (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: columns.invoiceNumber }), _jsx(TableHead, { children: columns.status }), _jsx(TableHead, { children: columns.total }), _jsx(TableHead, { children: columns.paid }), _jsx(TableHead, { children: columns.balanceDue }), _jsx(TableHead, { children: columns.dueDate })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: 6 }).map((__, columnIndex) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: `h-4 ${INVOICE_WIDTHS[columnIndex] ?? "w-1/2"}` }) }, columnIndex))) }, rowIndex))) })] }) }));
+}
+export function InvoicesPageSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-32" }), _jsx(Skeleton, { className: "h-4 w-80" })] }), _jsx(Skeleton, { className: "h-9 w-36" })] }), _jsx(Skeleton, { className: "h-9 w-full max-w-sm" }), _jsx(InvoicesTableSkeleton, { rows: 8 })] }));
+}

package/dist/components/invoices-page.d.ts

@@ -0,0 +1,6 @@
+export interface InvoicesPageProps {
+    className?: string;
+    onOpenInvoice?: (invoiceId: string) => void;
+}
+export declare function InvoicesPage({ className, onOpenInvoice }?: InvoicesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=invoices-page.d.ts.map

package/dist/components/invoices-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoices-page.d.ts","sourceRoot":"","sources":["../../src/components/invoices-page.tsx"],"names":[],"mappings":"AAmDA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAE,iBAAsB,2CAyYhF"}

package/dist/components/invoices-page.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { ListFilter, Plus, Search, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { invoiceStatuses } from "../i18n/messages.js";
+import { useInvoiceBulkStatusMutation, useInvoices, } from "../index.js";
+import { InvoiceBulkActions } from "./invoice-bulk-actions.js";
+import { InvoiceDialog } from "./invoice-dialog.js";
+import { formatInvoiceAmount, InvoiceRowSkeleton, invoiceStatusVariant, PaginationBar, SortHeader, } from "./invoice-table-parts.js";
+const PAGE_SIZE = 25;
+const STATUS_ALL = "__all__";
+export function InvoicesPage({ className, onOpenInvoice } = {}) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const [invoiceDialogOpen, setInvoiceDialogOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState(STATUS_ALL);
+    const [currency, setCurrency] = useState(null);
+    const [dueDateRange, setDueDateRange] = useState(null);
+    const [sortBy, setSortBy] = useState("createdAt");
+    const [sortDir, setSortDir] = useState("desc");
+    const [pageIndex, setPageIndex] = useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = useState(false);
+    const [selectedInvoiceIds, setSelectedInvoiceIds] = useState(() => new Set());
+    const [bulkResult, setBulkResult] = useState(null);
+    const bulkStatusMutation = useInvoiceBulkStatusMutation();
+    const { data, isPending, isFetching, isError } = useInvoices({
+        search: search || undefined,
+        status: status === STATUS_ALL ? undefined : status,
+        currency: currency ?? undefined,
+        dueDateFrom: dueDateRange?.from ?? undefined,
+        dueDateTo: dueDateRange?.to ?? undefined,
+        sortBy,
+        sortDir,
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+    });
+    const invoices = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = pageIndex + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && invoices.length === 0);
+    const selectedInvoices = invoices.filter((invoice) => selectedInvoiceIds.has(invoice.id));
+    const selectedCount = selectedInvoices.length;
+    const allPageInvoicesSelected = invoices.length > 0 && invoices.every((invoice) => selectedInvoiceIds.has(invoice.id));
+    const somePageInvoicesSelected = invoices.some((invoice) => selectedInvoiceIds.has(invoice.id)) && !allPageInvoicesSelected;
+    useEffect(() => {
+        const visibleInvoiceIds = new Set(invoices.map((invoice) => invoice.id));
+        setSelectedInvoiceIds((previous) => {
+            const next = new Set([...previous].filter((id) => visibleInvoiceIds.has(id)));
+            return next.size === previous.size ? previous : next;
+        });
+    }, [invoices]);
+    const clearInvoiceSelection = () => setSelectedInvoiceIds(new Set());
+    const resetPage = () => {
+        setPageIndex(0);
+        clearInvoiceSelection();
+    };
+    const setInvoiceSelected = (invoiceId, selected) => {
+        setBulkResult(null);
+        setSelectedInvoiceIds((previous) => {
+            const next = new Set(previous);
+            if (selected)
+                next.add(invoiceId);
+            else
+                next.delete(invoiceId);
+            return next;
+        });
+    };
+    const setAllPageInvoicesSelected = (selected) => {
+        setBulkResult(null);
+        setSelectedInvoiceIds((previous) => {
+            const next = new Set(previous);
+            for (const invoice of invoices) {
+                if (selected)
+                    next.add(invoice.id);
+                else
+                    next.delete(invoice.id);
+            }
+            return next;
+        });
+    };
+    const markSelectedInvoicesPaid = async () => {
+        const result = await bulkStatusMutation.mutateAsync({
+            invoices: selectedInvoices,
+            status: "paid",
+        });
+        setBulkResult(result);
+        if (result.failed.length === 0) {
+            clearInvoiceSelection();
+            return;
+        }
+        setSelectedInvoiceIds(new Set(result.failed.map((failure) => failure.id)));
+    };
+    const handleSort = (field) => {
+        resetPage();
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir("asc");
+            return;
+        }
+        if (sortDir === "asc") {
+            setSortDir("desc");
+            return;
+        }
+        setSortBy("createdAt");
+        setSortDir("desc");
+    };
+    const activeFilterCount = (status !== STATUS_ALL ? 1 : 0) +
+        (currency !== null ? 1 : 0) +
+        (dueDateRange?.from || dueDateRange?.to ? 1 : 0);
+    const hasActiveFilters = activeFilterCount > 0 || search !== "";
+    const clearFilters = () => {
+        setSearch("");
+        setStatus(STATUS_ALL);
+        setCurrency(null);
+        setDueDateRange(null);
+        resetPage();
+    };
+    const f = messages.invoicesPage;
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: f.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: f.description })] }) }), _jsxs("div", { 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: "invoices-search", className: "sr-only", children: f.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "invoices-search", placeholder: f.searchPlaceholder, value: search, onChange: (event) => {
+                                            setSearch(event.target.value);
+                                            resetPage();
+                                        }, className: "pl-9" })] }), _jsxs(Popover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4", "aria-hidden": "true" }), f.filters.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[24rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "invoices-filter-status", children: f.filters.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                                                setStatus(value ?? STATUS_ALL);
+                                                                resetPage();
+                                                            }, children: [_jsx(SelectTrigger, { id: "invoices-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: f.filters.statusAll }), invoiceStatuses.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.invoiceStatusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: f.filters.currencyLabel }), _jsx(CurrencyCombobox, { value: currency, onChange: (value) => {
+                                                                setCurrency(value);
+                                                                resetPage();
+                                                            }, placeholder: f.filters.currencyAny })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: f.filters.dueDateLabel }), _jsx(DateRangePicker, { value: dueDateRange, onChange: (value) => {
+                                                                setDueDateRange(value);
+                                                                resetPage();
+                                                            }, placeholder: f.filters.dateAny, clearable: true, className: "w-full" })] })] }) })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4", "aria-hidden": "true" }), f.filters.clear] })), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => setInvoiceDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.newInvoice] }) })] }), _jsx(InvoiceBulkActions, { selectedCount: selectedCount, result: bulkResult, pending: bulkStatusMutation.isPending, onClear: clearInvoiceSelection, onMarkPaid: markSelectedInvoicesPaid }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { "aria-label": f.bulkActions.selectAllOnPage, checked: allPageInvoicesSelected, indeterminate: somePageInvoicesSelected, disabled: showSkeleton || invoices.length === 0, onClickCapture: (event) => event.stopPropagation(), onCheckedChange: (checked) => setAllPageInvoicesSelected(Boolean(checked)) }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.invoiceNumber, field: "invoiceNumber", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.status, field: "status", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.total, field: "totalCents", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.paid, field: "paidCents", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.balanceDue, field: "balanceDueCents", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: f.columns.dueDate, field: "dueDate", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(InvoiceRowSkeleton, { rows: 6 })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "h-24 text-center text-sm text-destructive", children: f.loadFailed }) })) : invoices.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "h-24 text-center text-sm text-muted-foreground", children: f.empty }) })) : (invoices.map((row) => (_jsxs(TableRow, { onClick: () => onOpenInvoice?.(row.id), className: cn(onOpenInvoice && "cursor-pointer"), children: [_jsx(TableCell, { children: _jsx(Checkbox, { "aria-label": f.bulkActions.selectInvoice, checked: selectedInvoiceIds.has(row.id), onClickCapture: (event) => event.stopPropagation(), onCheckedChange: (checked) => setInvoiceSelected(row.id, Boolean(checked)) }) }), _jsx(TableCell, { className: "font-medium", children: row.invoiceNumber }), _jsx(TableCell, { children: _jsx(Badge, { variant: invoiceStatusVariant[row.status] ?? "secondary", className: "capitalize", children: messages.common.invoiceStatusLabels[row.status] ?? row.status }) }), _jsx(TableCell, { className: "font-mono", children: formatInvoiceAmount(row.totalCents, row.currency) }), _jsx(TableCell, { className: "font-mono", children: formatInvoiceAmount(row.paidCents, row.currency) }), _jsx(TableCell, { className: "font-mono", children: formatInvoiceAmount(row.balanceDueCents, row.currency) }), _jsx(TableCell, { children: row.dueDate })] }, row.id)))) })] }) }), _jsx(PaginationBar, { shown: invoices.length, total: total, page: page, pageCount: pageCount, onPrevious: () => {
+                            clearInvoiceSelection();
+                            setPageIndex((prev) => Math.max(0, prev - 1));
+                        }, onNext: () => {
+                            clearInvoiceSelection();
+                            setPageIndex((prev) => prev + 1);
+                        }, canGoBack: pageIndex > 0, canGoForward: (pageIndex + 1) * PAGE_SIZE < total })] }), _jsx(InvoiceDialog, { open: invoiceDialogOpen, onOpenChange: setInvoiceDialogOpen })] }));
+}

package/dist/components/payment-detail-page.d.ts

@@ -0,0 +1,47 @@
+import type * as React from "react";
+import { type UnifiedPaymentRecord } from "../index.js";
+export interface PaymentDetailPageSlots {
+    afterHeader?: React.ReactNode;
+    afterSummary?: React.ReactNode;
+    afterLinks?: React.ReactNode;
+    afterMetadata?: React.ReactNode;
+}
+export interface PaymentDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onInvoiceOpen?: (invoiceId: string, payment: UnifiedPaymentRecord) => void;
+    onBookingOpen?: (bookingId: string, payment: UnifiedPaymentRecord) => void;
+    onPersonOpen?: (personId: string, payment: UnifiedPaymentRecord) => void;
+    onOrganizationOpen?: (organizationId: string, payment: UnifiedPaymentRecord) => void;
+    onSupplierOpen?: (supplierId: string, payment: UnifiedPaymentRecord) => void;
+    onEdit?: (payment: UnifiedPaymentRecord) => void;
+    onDelete?: (paymentId: string) => Promise<void> | void;
+    deletePending?: boolean;
+    slots?: PaymentDetailPageSlots;
+}
+export declare function PaymentDetailPage({ id, className, onBack, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, onEdit, onDelete, deletePending, slots, }: PaymentDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export interface PaymentDetailHeaderProps {
+    payment: UnifiedPaymentRecord;
+    onBack?: () => void;
+    onEdit?: (payment: UnifiedPaymentRecord) => void;
+    onDelete?: (paymentId: string) => Promise<void> | void;
+    deletePending?: boolean;
+    className?: string;
+}
+export declare function PaymentDetailHeader({ payment, onBack, onEdit, onDelete, deletePending, className, }: PaymentDetailHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface PaymentDetailCardProps {
+    payment: UnifiedPaymentRecord;
+    className?: string;
+}
+export declare function PaymentSummaryCard({ payment, className }: PaymentDetailCardProps): import("react/jsx-runtime").JSX.Element;
+export interface PaymentLinksCardProps extends PaymentDetailCardProps {
+    onInvoiceOpen?: (invoiceId: string, payment: UnifiedPaymentRecord) => void;
+    onBookingOpen?: (bookingId: string, payment: UnifiedPaymentRecord) => void;
+    onPersonOpen?: (personId: string, payment: UnifiedPaymentRecord) => void;
+    onOrganizationOpen?: (organizationId: string, payment: UnifiedPaymentRecord) => void;
+    onSupplierOpen?: (supplierId: string, payment: UnifiedPaymentRecord) => void;
+}
+export declare function PaymentLinksCard({ payment, className, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, }: PaymentLinksCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentMetadataCard({ payment, className }: PaymentDetailCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-detail-page.d.ts.map

package/dist/components/payment-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/payment-detail-page.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyant-travel/ui/components";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { ArrowLeft, ExternalLink, Loader2, Pencil } from "lucide-react";
+import { useFinanceUiI18nOrDefault, useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { usePayment } from "../index.js";
+export function PaymentDetailPage({ id, className, onBack, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, onEdit, onDelete, deletePending, slots, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const paymentQuery = usePayment(id);
+    if (paymentQuery.isPending) {
+        return _jsx(PaymentDetailLoading, { className: className });
+    }
+    if (paymentQuery.isError || !paymentQuery.data?.data) {
+        return (_jsx(PaymentDetailState, { className: className, message: paymentQuery.isError
+                ? paymentQuery.error instanceof Error
+                    ? paymentQuery.error.message
+                    : messages.paymentDetailPage.states.loadFailed
+                : messages.paymentDetailPage.states.notFound, onBack: onBack }));
+    }
+    const payment = paymentQuery.data.data;
+    return (_jsxs("div", { "data-slot": "payment-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsx(PaymentDetailHeader, { payment: payment, onBack: onBack, onEdit: onEdit, onDelete: onDelete, deletePending: deletePending }), slots?.afterHeader, _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(PaymentSummaryCard, { payment: payment }), _jsx(PaymentLinksCard, { payment: payment, onInvoiceOpen: onInvoiceOpen, onBookingOpen: onBookingOpen, onPersonOpen: onPersonOpen, onOrganizationOpen: onOrganizationOpen, onSupplierOpen: onSupplierOpen })] }), slots?.afterSummary, slots?.afterLinks, _jsx(PaymentMetadataCard, { payment: payment }), slots?.afterMetadata] }));
+}
+export function PaymentDetailHeader({ payment, onBack, onEdit, onDelete, deletePending, className, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const relatedNumber = payment.kind === "customer" ? payment.invoiceNumber : payment.bookingNumber;
+    return (_jsxs("div", { "data-slot": "payment-detail-header", className: cn("flex items-start gap-4", className), children: [onBack ? (_jsxs(Button, { type: "button", variant: "ghost", size: "icon", onClick: onBack, children: [_jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: messages.paymentDetailPage.actions.back })] })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "truncate font-mono text-lg font-semibold tracking-tight", children: payment.id }), _jsx(Badge, { variant: "outline", children: messages.paymentsPage.kindLabels[payment.kind] })] }), relatedNumber ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: relatedNumber })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 md:justify-end", children: [_jsx(Badge, { variant: paymentStatusVariant[payment.status] ?? "secondary", children: messages.common.supplierPaymentStatusLabels[payment.status] }), onEdit ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onEdit(payment), children: [_jsx(Pencil, { className: "size-4", "aria-hidden": "true" }), messages.paymentDetailPage.actions.edit] })) : null, onDelete ? (_jsx(ConfirmActionButton, { buttonLabel: messages.paymentDetailPage.actions.delete, confirmLabel: messages.paymentDetailPage.actions.delete, cancelLabel: messages.common.cancel, title: messages.paymentDetailPage.actions.deleteTitle, description: messages.paymentDetailPage.actions.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: deletePending, onConfirm: () => onDelete(payment.id) })) : null] })] }));
+}
+export function PaymentSummaryCard({ payment, className }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const { formatCurrency, formatNumber } = useFinanceUiI18nOrDefault();
+    const detail = messages.paymentDetailPage;
+    const fxRateLabel = formatFxRate(payment, formatNumber);
+    return (_jsxs(Card, { "data-slot": "payment-summary-card", className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.titles.summary }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid gap-3 text-sm", children: [_jsx(DetailRow, { label: detail.fields.amount, children: _jsx("span", { className: "font-mono", children: formatCurrency(payment.amountCents / 100, payment.currency) }) }), payment.baseAmountCents !== null && payment.baseCurrency ? (_jsx(DetailRow, { label: detail.fields.baseAmount, children: _jsx("span", { className: "font-mono", children: formatCurrency(payment.baseAmountCents / 100, payment.baseCurrency) }) })) : null, fxRateLabel ? (_jsx(DetailRow, { label: detail.fields.fxRate, children: _jsx("span", { className: "font-mono", children: fxRateLabel }) })) : null, _jsx(DetailRow, { label: detail.fields.status, children: _jsx(Badge, { variant: paymentStatusVariant[payment.status] ?? "secondary", children: messages.common.supplierPaymentStatusLabels[payment.status] }) }), _jsx(DetailRow, { label: detail.fields.method, children: formatPaymentMethod(payment.paymentMethod, messages) }), _jsx(DetailRow, { label: detail.fields.date, children: payment.paymentDate }), _jsx(DetailRow, { label: detail.fields.reference, children: payment.referenceNumber ?? detail.states.noValue }), payment.notes ? (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: detail.fields.notes }), _jsx("dd", { className: "whitespace-pre-wrap text-sm", children: payment.notes })] })) : null] }) })] }));
+}
+function formatFxRate(payment, formatNumber) {
+    if (payment.baseAmountCents === null ||
+        !payment.baseCurrency ||
+        payment.baseAmountCents <= 0 ||
+        payment.currency === payment.baseCurrency) {
+        return null;
+    }
+    const rate = payment.amountCents / payment.baseAmountCents;
+    return `1 ${payment.baseCurrency} = ${formatNumber(rate, { maximumFractionDigits: 6 })} ${payment.currency}`;
+}
+export function PaymentLinksCard({ payment, className, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.paymentDetailPage;
+    return (_jsxs(Card, { "data-slot": "payment-links-card", className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.titles.links }) }), _jsx(CardContent, { children: _jsx("dl", { className: "grid gap-3 text-sm", children: payment.kind === "customer" ? (_jsxs(_Fragment, { children: [_jsx(DetailRow, { label: detail.fields.paidBy, children: payment.personId && payment.personName ? (_jsx(DetailLink, { label: payment.personName, actionLabel: detail.actions.viewPerson, onClick: () => onPersonOpen?.(payment.personId, payment), disabled: !onPersonOpen })) : payment.organizationId && payment.organizationName ? (_jsx(DetailLink, { label: payment.organizationName, actionLabel: detail.actions.viewOrganization, onClick: () => onOrganizationOpen?.(payment.organizationId, payment), disabled: !onOrganizationOpen })) : (detail.states.noValue) }), payment.personId &&
+                                payment.personName &&
+                                payment.organizationId &&
+                                payment.organizationName ? (_jsx(DetailRow, { label: detail.fields.organization, children: _jsx(DetailLink, { label: payment.organizationName, actionLabel: detail.actions.viewOrganization, onClick: () => onOrganizationOpen?.(payment.organizationId, payment), disabled: !onOrganizationOpen }) })) : null, _jsx(DetailRow, { label: detail.fields.invoice, children: payment.invoiceId ? (_jsx(DetailLink, { label: payment.invoiceNumber ?? detail.actions.viewInvoice, actionLabel: detail.actions.viewInvoice, onClick: () => onInvoiceOpen?.(payment.invoiceId, payment), disabled: !onInvoiceOpen })) : (detail.states.noValue) })] })) : (_jsxs(_Fragment, { children: [_jsx(DetailRow, { label: detail.fields.paidTo, children: payment.supplierId && payment.supplierName ? (_jsx(DetailLink, { label: payment.supplierName, actionLabel: detail.actions.viewSupplier, onClick: () => onSupplierOpen?.(payment.supplierId, payment), disabled: !onSupplierOpen })) : ((payment.supplierName ?? detail.states.noValue)) }), _jsx(DetailRow, { label: detail.fields.booking, children: payment.bookingId ? (_jsx(DetailLink, { label: payment.bookingNumber ?? detail.actions.viewBooking, actionLabel: detail.actions.viewBooking, onClick: () => onBookingOpen?.(payment.bookingId, payment), disabled: !onBookingOpen })) : (detail.states.noValue) })] })) }) })] }));
+}
+export function PaymentMetadataCard({ payment, className }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const { formatDateTime } = useFinanceUiI18nOrDefault();
+    const detail = messages.paymentDetailPage;
+    return (_jsxs(Card, { "data-slot": "payment-metadata-card", className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.titles.metadata }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid gap-3 text-sm", children: [_jsx(DetailRow, { label: detail.fields.kind, children: messages.paymentsPage.kindLabels[payment.kind] }), _jsx(DetailRow, { label: detail.fields.createdAt, children: formatDateTime(payment.createdAt) }), _jsx(DetailRow, { label: detail.fields.updatedAt, children: formatDateTime(payment.updatedAt) })] }) })] }));
+}
+function PaymentDetailLoading({ className }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    return (_jsx("div", { className: cn("flex min-h-48 items-center justify-center", className), children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), messages.paymentDetailPage.states.loading] }) }));
+}
+function PaymentDetailState({ className, message, onBack, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 py-12", className), children: [_jsx("p", { className: "text-muted-foreground", children: message }), onBack ? (_jsx(Button, { type: "button", variant: "outline", onClick: onBack, children: messages.paymentDetailPage.actions.back })) : null] }));
+}
+function DetailRow({ label, children }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }), _jsx("dd", { className: "text-right", children: children })] }));
+}
+function DetailLink({ label, actionLabel, onClick, disabled, }) {
+    if (disabled)
+        return label;
+    return (_jsxs(Button, { type: "button", variant: "link", className: "h-auto p-0", onClick: onClick, children: [label, _jsx(ExternalLink, { className: "ml-1 size-3", "aria-label": actionLabel })] }));
+}
+const paymentStatusVariant = {
+    pending: "outline",
+    completed: "default",
+    failed: "destructive",
+    refunded: "secondary",
+};
+function formatPaymentMethod(method, messages) {
+    if (method in messages.common.paymentMethodLabels) {
+        return messages.common.paymentMethodLabels[method];
+    }
+    if (method in messages.common.supplierPaymentMethodLabels) {
+        return messages.common.supplierPaymentMethodLabels[method];
+    }
+    return method.replace(/_/g, " ");
+}

package/dist/components/payment-policy-form.d.ts

@@ -0,0 +1,49 @@
+import { type PaymentPolicy } from "@voyant-travel/finance";
+import * as React from "react";
+/**
+ * Reusable payment-policy editor.
+ *
+ * Renders the deposit kind toggle (None / Percent / Fixed amount), the
+ * conditional deposit value input, and the three day-window controls
+ * (deposit gate, balance offset, balance grace). When `inheritable`
+ * is true (the default for non-operator-default layers), an "Inherit
+ * from parent" toggle is shown — flipping it on writes `null` and
+ * disables the rest of the form.
+ *
+ * Controlled component: parent owns the value via `value` / `onChange`.
+ * The bundled `<PaymentPolicyPreview />` reads the same value so you
+ * can render the live preview alongside the form.
+ */
+export interface PaymentPolicyFormProps {
+    /** Current value. `null` means "inherit from parent". */
+    value: PaymentPolicy | null;
+    onChange: (next: PaymentPolicy | null) => void;
+    /**
+     * When true, shows the "Inherit from parent" toggle. Operator-
+     * default forms set this to false (no parent to inherit from).
+     */
+    inheritable?: boolean;
+    /** Currency used for the fixed-amount deposit input + the preview. */
+    currency?: string;
+    /** Disabled by ancestor (e.g. while the mutation is in flight). */
+    disabled?: boolean;
+    className?: string;
+}
+export declare function PaymentPolicyForm({ value, onChange, inheritable, currency, disabled, className, }: PaymentPolicyFormProps): React.ReactElement;
+/**
+ * Live preview of what the policy will produce on a sample booking.
+ * Pair with `<PaymentPolicyForm />` so the operator sees the
+ * deposit + balance amounts shift in real time as they tweak the
+ * fields.
+ */
+export interface PaymentPolicyPreviewProps {
+    policy: PaymentPolicy | null;
+    currency?: string;
+    /** Total used for the preview math. Default 1,000.00 in major units. */
+    sampleTotalCents?: number;
+    /** Days before departure to use for the preview. Default 60. */
+    sampleDaysBeforeDeparture?: number;
+    className?: string;
+}
+export declare function PaymentPolicyPreview({ policy, currency, sampleTotalCents, sampleDaysBeforeDeparture, className, }: PaymentPolicyPreviewProps): React.ReactElement;
+//# sourceMappingURL=payment-policy-form.d.ts.map

package/dist/components/payment-policy-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-policy-form.d.ts","sourceRoot":"","sources":["../../src/components/payment-policy-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAA;AAsB/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,sBAAsB;IACrC,yDAAyD;IACzD,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAYD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAiK7C;AAwDD;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAgB,EAChB,gBAA0B,EAC1B,yBAA8B,EAC9B,SAAS,GACV,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CA0DhD"}

package/dist/components/payment-policy-form.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computePaymentSchedule, noDepositPolicy, } from "@voyant-travel/finance";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@voyant-travel/ui/components";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { HelpCircle } from "lucide-react";
+import * as React from "react";
+import { useFinanceUiI18nOrDefault } from "../i18n/index.js";
+const DEFAULT_POLICY = {
+    deposit: { kind: "percent", percent: 50 },
+    minDaysBeforeDepartureForDeposit: 30,
+    balanceDueDaysBeforeDeparture: 30,
+    balanceDueMinDaysFromNow: 7,
+};
+const depositKinds = ["none", "percent", "fixed_cents"];
+export function PaymentPolicyForm({ value, onChange, inheritable = true, currency = "EUR", disabled, className, }) {
+    const messages = useFinanceUiI18nOrDefault().messages.paymentPolicy.form;
+    const isInheriting = value === null;
+    const policy = value ?? noDepositPolicy;
+    const setPolicyField = (key, next) => {
+        onChange({ ...(value ?? DEFAULT_POLICY), [key]: next });
+    };
+    const setDepositKind = (kind) => {
+        if (kind === "none") {
+            setPolicyField("deposit", { kind: "none" });
+            return;
+        }
+        if (kind === "percent") {
+            setPolicyField("deposit", {
+                kind: "percent",
+                percent: policy.deposit.kind === "percent" ? (policy.deposit.percent ?? 50) : 50,
+            });
+            return;
+        }
+        setPolicyField("deposit", {
+            kind: "fixed_cents",
+            amountCents: policy.deposit.kind === "fixed_cents" ? (policy.deposit.amountCents ?? 10_000) : 10_000,
+        });
+    };
+    const depositHint = messages.depositHints[policy.deposit.kind];
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { className: cn("space-y-4", className), children: [inheritable ? (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border bg-muted/20 px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Label, { htmlFor: "payment-policy-inherit", className: "text-sm font-medium", children: messages.inherit.label }), _jsx(InfoTooltip, { label: messages.inherit.tooltipLabel, children: messages.inherit.help })] }), _jsx(Switch, { id: "payment-policy-inherit", checked: isInheriting, onCheckedChange: (checked) => onChange(checked ? null : (value ?? DEFAULT_POLICY)), disabled: disabled })] })) : null, _jsxs("fieldset", { disabled: disabled || isInheriting, className: "space-y-4 disabled:opacity-60", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-[minmax(13rem,16rem)_minmax(13rem,1fr)]", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "payment-policy-deposit-kind", children: messages.depositKind.label }), _jsxs(Select, { value: policy.deposit.kind, onValueChange: (kind) => setDepositKind(kind), children: [_jsx(SelectTrigger, { id: "payment-policy-deposit-kind", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: depositKinds.map((kind) => (_jsx(SelectItem, { value: kind, children: messages.depositKind.options[kind] }, kind))) })] })] }), policy.deposit.kind === "percent" ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "payment-policy-percent", children: messages.depositValue.percentLabel }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: "payment-policy-percent", type: "number", min: 0, max: 100, step: 1, value: policy.deposit.percent ?? 50, onChange: (e) => setPolicyField("deposit", {
+                                                        kind: "percent",
+                                                        percent: Number(e.target.value),
+                                                    }) }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: "%" }) })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: depositHint })] })) : null, policy.deposit.kind === "fixed_cents" ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "payment-policy-fixed", children: messages.depositValue.fixedLabel }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: "payment-policy-fixed", type: "number", min: 0, step: 0.01, value: (policy.deposit.amountCents ?? 0) / 100, onChange: (e) => setPolicyField("deposit", {
+                                                        kind: "fixed_cents",
+                                                        amountCents: Math.round(Number(e.target.value) * 100),
+                                                    }) }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: currency }) })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: depositHint })] })) : null, policy.deposit.kind === "none" ? (_jsx("div", { className: "flex items-end pb-2", children: _jsx("p", { className: "text-muted-foreground text-xs", children: depositHint }) })) : null] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsx(DaysInput, { id: "payment-policy-min-days", label: messages.days.minDaysLabel, help: messages.days.minDaysHelp, tooltipLabel: messages.days.tooltipLabel, value: policy.minDaysBeforeDepartureForDeposit, suffix: messages.days.suffix, onChange: (next) => setPolicyField("minDaysBeforeDepartureForDeposit", next) }), _jsx(DaysInput, { id: "payment-policy-balance-days", label: messages.days.balanceDaysLabel, help: messages.days.balanceDaysHelp, tooltipLabel: messages.days.tooltipLabel, value: policy.balanceDueDaysBeforeDeparture, suffix: messages.days.suffix, onChange: (next) => setPolicyField("balanceDueDaysBeforeDeparture", next) }), _jsx(DaysInput, { id: "payment-policy-grace", label: messages.days.graceDaysLabel, help: messages.days.graceDaysHelp, tooltipLabel: messages.days.tooltipLabel, value: policy.balanceDueMinDaysFromNow, suffix: messages.days.suffix, onChange: (next) => setPolicyField("balanceDueMinDaysFromNow", next) })] })] })] }) }));
+}
+function DaysInput({ id, label, help, tooltipLabel, value, suffix, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(InfoTooltip, { label: tooltipLabel, children: help })] }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: id, type: "number", min: 0, step: 1, value: value, onChange: (e) => onChange(Number(e.target.value)) }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: suffix }) })] })] }));
+}
+function InfoTooltip({ label, children }) {
+    return (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-5" }), children: [_jsx(HelpCircle, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: label })] }), _jsx(TooltipContent, { children: children })] }));
+}
+export function PaymentPolicyPreview({ policy, currency = "EUR", sampleTotalCents = 100_000, sampleDaysBeforeDeparture = 60, className, }) {
+    const i18n = useFinanceUiI18nOrDefault();
+    const messages = i18n.messages.paymentPolicy.preview;
+    const today = React.useMemo(() => new Date(), []);
+    const departureDate = React.useMemo(() => {
+        const d = new Date(today.getTime() + sampleDaysBeforeDeparture * 24 * 60 * 60 * 1000);
+        return d.toISOString().slice(0, 10);
+    }, [today, sampleDaysBeforeDeparture]);
+    const schedule = React.useMemo(() => policy
+        ? computePaymentSchedule({ totalCents: sampleTotalCents, currency, departureDate, today }, policy)
+        : [], [sampleTotalCents, currency, departureDate, policy, today]);
+    if (!policy) {
+        return (_jsx("div", { className: cn("self-start rounded-md border border-dashed bg-muted/20 p-3 text-muted-foreground text-xs", className), children: messages.inheriting }));
+    }
+    return (_jsxs("div", { className: cn("self-start space-y-2 rounded-md border bg-muted/20 p-3 text-sm", className), children: [_jsx("div", { className: "text-muted-foreground text-xs", children: formatMessage(messages.sample, {
+                    amount: i18n.formatCurrency(sampleTotalCents / 100, currency),
+                    days: i18n.formatNumber(sampleDaysBeforeDeparture),
+                }) }), _jsx("ul", { className: "space-y-1", children: schedule.map((entry) => (_jsx(ScheduleRow, { entry: entry, currency: currency, labels: messages.scheduleTypes, dueLabel: messages.due, formatCurrency: i18n.formatCurrency, formatDate: i18n.formatDate }, `${entry.scheduleType}-${entry.dueDate}`))) })] }));
+}
+function ScheduleRow({ entry, currency, labels, dueLabel, formatCurrency, formatDate, }) {
+    const label = entry.scheduleType === "deposit"
+        ? labels.deposit
+        : entry.scheduleType === "balance"
+            ? labels.balance
+            : labels.full;
+    return (_jsxs("li", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("span", { className: "font-mono text-xs", children: formatCurrency(entry.amountCents / 100, currency) }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatMessage(dueLabel, { date: formatDate(entry.dueDate) }) })] }));
+}

package/dist/components/payments-page/controls.d.ts

@@ -0,0 +1,23 @@
+interface SortHeaderProps<TField extends string> {
+    label: string;
+    field: TField;
+    sortBy: string;
+    sortDir: "asc" | "desc";
+    onSort: (field: TField) => void;
+}
+export declare function SortHeader<TField extends string>({ label, field, sortBy, sortDir, onSort, }: SortHeaderProps<TField>): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }: {
+    shown: number;
+    total: number;
+    page: number;
+    pageCount: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentRowSkeleton({ rows }: {
+    rows: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=controls.d.ts.map

package/dist/components/payments-page/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../src/components/payments-page/controls.tsx"],"names":[],"mappings":"AAOA,UAAU,eAAe,CAAC,MAAM,SAAS,MAAM;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,UAAU,CAAC,MAAM,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,eAAe,CAAC,MAAM,CAAC,2CAgBzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;CACtB,2CAiBA;AAED,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CA+B5D"}

package/dist/components/payments-page/controls.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button } from "@voyant-travel/ui/components";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { TableCell, TableRow } from "@voyant-travel/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { useFinanceUiMessagesOrDefault } from "../../i18n/index.js";
+export 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 })] }));
+}
+export function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const f = messages.paymentsPage.pagination;
+    return (_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(f.showing, { count: shown, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !canGoBack, onClick: onPrevious, children: f.previous }), _jsx("span", { children: formatMessage(f.page, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: !canGoForward, onClick: onNext, children: f.next })] })] }));
+}
+export function PaymentRowSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) })] }, `skeleton-${idx}`))) }));
+}

package/dist/components/payments-page-skeleton.d.ts

@@ -0,0 +1,5 @@
+export declare function PaymentsTableSkeleton({ rows }: {
+    rows?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentsPageSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payments-page-skeleton.d.ts.map

package/dist/components/payments-page-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/payments-page-skeleton.tsx"],"names":[],"mappings":"AAcA,wBAAgB,qBAAqB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAkCpE;AAED,wBAAgB,oBAAoB,4CAgBnC"}

package/dist/components/payments-page-skeleton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+const PAYMENT_WIDTHS = ["w-20", "w-32", "w-32", "w-24", "w-20", "w-24", "w-24"];
+export function PaymentsTableSkeleton({ rows = 8 }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const columns = messages.paymentsPage.columns;
+    return (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: columns.kind }), _jsx(TableHead, { children: columns.reference }), _jsx(TableHead, { children: columns.party }), _jsx(TableHead, { children: columns.amount }), _jsx(TableHead, { children: columns.status }), _jsx(TableHead, { children: columns.date }), _jsx(TableHead, { children: columns.method })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: 7 }).map((__, columnIndex) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: `h-4 ${PAYMENT_WIDTHS[columnIndex] ?? "w-1/2"}` }) }, columnIndex))) }, rowIndex))) })] }) }));
+}
+export function PaymentsPageSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-32" }), _jsx(Skeleton, { className: "h-4 w-80" })] }), _jsx(Skeleton, { className: "h-9 w-44" })] }), _jsx(Skeleton, { className: "h-9 w-full max-w-sm" }), _jsx(PaymentsTableSkeleton, { rows: 8 })] }));
+}

package/dist/components/payments-page.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { type FinancePaymentKind } from "../index.js";
+export interface PaymentSupplierOption {
+    id: string;
+    name: string;
+}
+export interface RecordPaymentDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    defaultKind: FinancePaymentKind;
+}
+export interface PaymentsPageProps {
+    className?: string;
+    onOpenPayment?: (paymentId: string) => void;
+    supplierOptions?: PaymentSupplierOption[];
+    onSupplierSearchChange?: (search: string) => void;
+    renderRecordPaymentDialog?: (props: RecordPaymentDialogRenderProps) => ReactNode;
+}
+export declare function PaymentsPage({ className, onOpenPayment, supplierOptions, onSupplierSearchChange, renderRecordPaymentDialog, }?: PaymentsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payments-page.d.ts.map

package/dist/components/payments-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page.d.ts","sourceRoot":"","sources":["../../src/components/payments-page.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,aAAa,CAAA;AAWpB,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,WAAW,EAAE,kBAAkB,CAAA;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,eAAe,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACzC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,yBAAyB,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,KAAK,SAAS,CAAA;CACjF;AAaD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,aAAa,EACb,eAAoB,EACpB,sBAAsB,EACtB,yBAAyB,GAC1B,GAAE,iBAAsB,2CA8ZxB"}