@voyantjs/finance-ui 0.30.6 → 0.31.0

package/README.md

@@ -12,6 +12,24 @@ pnpm add @voyantjs/finance-ui @voyantjs/finance-react @voyantjs/ui @tanstack/rea
 
 All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
 
+## Components
+
+- `InvoicesPage`, `InvoiceDetailPage`, and `PaymentsPage` publish
+  list/detail-management compositions.
+- `TaxesPage` publishes the finance-owned tax class, tax regime, and tax policy
+  profile settings composition. It reads `baseUrl` and `fetcher` from
+  `VoyantFinanceProvider`; pass the `api` prop only when an app needs a custom
+  transport adapter.
+- `InvoiceDetailHeader`, `InvoiceSummaryCard`, `InvoiceLinksCard`,
+  `InvoiceLineItemsCard`, `InvoicePaymentsCard`, `InvoiceCreditNotesCard`, and
+  `InvoiceNotesCard` remain exported for consumers that need to compose the
+  invoice detail page manually.
+- `PaymentDetailPage` publishes the customer/supplier payment detail
+  workspace with summary, related record, and metadata cards.
+- `PaymentDetailHeader`, `PaymentSummaryCard`, `PaymentLinksCard`, and
+  `PaymentMetadataCard` remain exported for consumers that need to compose the
+  detail page manually.
+
 ## I18n
 
 Components render English by default. To localize them, wrap your UI in

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

@@ -0,0 +1,113 @@
+import type { CreditNoteRecord, FinanceNoteRecord, InvoiceRecord, LineItemRecord, PaymentRecord } from "@voyantjs/finance-react";
+import { type ReactNode } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+export interface InvoiceDetailPageSlots {
+    afterHeader?: ReactNode;
+    afterSummary?: ReactNode;
+    afterLineItems?: ReactNode;
+    afterPayments?: ReactNode;
+    afterCreditNotes?: ReactNode;
+    afterNotes?: ReactNode;
+    dialogs?: ReactNode;
+}
+export interface InvoiceDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onBookingOpen?: (bookingId: string, invoice: InvoiceRecord) => void;
+    onPersonOpen?: (personId: string, invoice: InvoiceRecord) => void;
+    onOrganizationOpen?: (organizationId: string, invoice: InvoiceRecord) => void;
+    onLineItemCreate?: (invoice: InvoiceRecord) => void;
+    onLineItemEdit?: (lineItem: LineItemRecord, invoice: InvoiceRecord) => void;
+    onPaymentCreate?: (invoice: InvoiceRecord) => void;
+    onCreditNoteCreate?: (invoice: InvoiceRecord) => void;
+    slots?: InvoiceDetailPageSlots;
+}
+export declare function InvoiceDetailPage({ id, className, onBack, onDeleted, onBookingOpen, onPersonOpen, onOrganizationOpen, onLineItemCreate, onLineItemEdit, onPaymentCreate, onCreditNoteCreate, slots, }: InvoiceDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceDetailHeaderProps {
+    invoice: InvoiceRecord;
+    onBack?: () => void;
+    onEdit: () => void;
+    onDelete: () => Promise<void>;
+    deletePending?: boolean;
+    className?: string;
+}
+export declare function InvoiceDetailHeader({ invoice, onBack, onEdit, onDelete, deletePending, className, }: InvoiceDetailHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceDetailCardProps {
+    invoice: InvoiceRecord;
+    className?: string;
+}
+export declare function InvoiceSummaryCard({ invoice, className }: InvoiceDetailCardProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceLinksCardProps extends InvoiceDetailCardProps {
+    onBookingOpen?: (bookingId: string, invoice: InvoiceRecord) => void;
+    onPersonOpen?: (personId: string, invoice: InvoiceRecord) => void;
+    onOrganizationOpen?: (organizationId: string, invoice: InvoiceRecord) => void;
+}
+export declare function InvoiceLinksCard({ invoice, className, onBookingOpen, onPersonOpen, onOrganizationOpen, }: InvoiceLinksCardProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceLineItemsCardProps extends InvoiceDetailCardProps {
+    lineItems: LineItemRecord[];
+    pending?: boolean;
+    deletePending?: boolean;
+    onCreate?: (invoice: InvoiceRecord) => void;
+    onEdit?: (lineItem: LineItemRecord, invoice: InvoiceRecord) => void;
+    onDelete?: (lineItemId: string) => Promise<void>;
+}
+export declare function InvoiceLineItemsCard({ invoice, lineItems, pending, deletePending, onCreate, onEdit, onDelete, className, }: InvoiceLineItemsCardProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoicePaymentsCardProps extends InvoiceDetailCardProps {
+    payments: PaymentRecord[];
+    pending?: boolean;
+    onCreate?: (invoice: InvoiceRecord) => void;
+}
+export declare function InvoicePaymentsCard({ invoice, payments, pending, onCreate, className, }: InvoicePaymentsCardProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceCreditNotesCardProps extends InvoiceDetailCardProps {
+    creditNotes: CreditNoteRecord[];
+    pending?: boolean;
+    onCreate?: (invoice: InvoiceRecord) => void;
+}
+export declare function InvoiceCreditNotesCard({ invoice, creditNotes, pending, onCreate, className, }: InvoiceCreditNotesCardProps): import("react/jsx-runtime").JSX.Element;
+export interface InvoiceNotesCardProps {
+    notes: FinanceNoteRecord[];
+    noteContent: string;
+    pending?: boolean;
+    addPending?: boolean;
+    className?: string;
+    onNoteChange: (value: string) => void;
+    onAddNote: () => Promise<void>;
+}
+export declare function InvoiceNotesCard({ notes, noteContent, pending, addPending, className, onNoteChange, onAddNote, }: InvoiceNotesCardProps): import("react/jsx-runtime").JSX.Element;
+export interface MoneyProps {
+    cents: number;
+    currency: string;
+}
+export declare function Money({ cents, currency }: MoneyProps): import("react/jsx-runtime").JSX.Element;
+export interface DetailRowProps {
+    label: string;
+    children: ReactNode;
+}
+export declare function DetailRow({ label, children }: DetailRowProps): import("react/jsx-runtime").JSX.Element;
+export interface DetailLinkProps {
+    label: string;
+    actionLabel: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare function DetailLink({ label, actionLabel, onClick, disabled }: DetailLinkProps): string | import("react/jsx-runtime").JSX.Element;
+export interface EmptyRowProps {
+    children: ReactNode;
+}
+export declare function EmptyRow({ children }: EmptyRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingRow(): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceDetailLoading({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceDetailState({ className, message, onBack, }: {
+    className?: string;
+    message: string;
+    onBack?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatPaymentMethod(method: string, messages: ReturnType<typeof useFinanceUiMessagesOrDefault>): string;
+export declare const invoiceStatusVariant: Record<string, "default" | "secondary" | "outline" | "destructive">;
+export declare const paymentStatusVariant: Record<string, "default" | "secondary" | "outline" | "destructive">;
+export declare const creditNoteStatusVariant: Record<string, "default" | "secondary" | "outline" | "destructive">;
+//# sourceMappingURL=invoice-detail-page.d.ts.map

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

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

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

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInvoice, useInvoiceCreditNotes, useInvoiceLineItemMutation, useInvoiceLineItems, useInvoiceMutation, useInvoiceNoteMutation, useInvoiceNotes, useInvoicePayments, } from "@voyantjs/finance-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, Textarea, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, ExternalLink, Loader2, Pencil, Plus } from "lucide-react";
+import { useState } from "react";
+import { useFinanceUiI18nOrDefault, useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { InvoiceDialog } from "./invoice-dialog.js";
+export function InvoiceDetailPage({ id, className, onBack, onDeleted, onBookingOpen, onPersonOpen, onOrganizationOpen, onLineItemCreate, onLineItemEdit, onPaymentCreate, onCreditNoteCreate, slots, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const [editOpen, setEditOpen] = useState(false);
+    const [noteContent, setNoteContent] = useState("");
+    const invoiceQuery = useInvoice(id);
+    const invoice = invoiceQuery.data?.data;
+    const lineItemsQuery = useInvoiceLineItems(id, { enabled: Boolean(invoice) });
+    const paymentsQuery = useInvoicePayments(id, { enabled: Boolean(invoice) });
+    const creditNotesQuery = useInvoiceCreditNotes(id, { enabled: Boolean(invoice) });
+    const notesQuery = useInvoiceNotes(id, { enabled: Boolean(invoice) });
+    const { remove: removeInvoice } = useInvoiceMutation();
+    const { remove: removeLineItem } = useInvoiceLineItemMutation(id);
+    const addNote = useInvoiceNoteMutation(id);
+    if (invoiceQuery.isPending) {
+        return _jsx(InvoiceDetailLoading, { className: className });
+    }
+    if (invoiceQuery.isError || !invoice) {
+        return (_jsx(InvoiceDetailState, { className: className, message: invoiceQuery.isError
+                ? invoiceQuery.error instanceof Error
+                    ? invoiceQuery.error.message
+                    : messages.invoiceDetailPage.states.loadFailed
+                : messages.invoiceDetailPage.states.notFound, onBack: onBack }));
+    }
+    const lineItems = lineItemsQuery.data?.data ?? [];
+    const payments = paymentsQuery.data?.data ?? [];
+    const creditNotes = creditNotesQuery.data?.data ?? [];
+    const notes = notesQuery.data?.data ?? [];
+    return (_jsxs("div", { "data-slot": "invoice-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsx(InvoiceDetailHeader, { invoice: invoice, onBack: onBack, onEdit: () => setEditOpen(true), deletePending: removeInvoice.isPending, onDelete: async () => {
+                    await removeInvoice.mutateAsync(id);
+                    onDeleted?.();
+                    onBack?.();
+                } }), slots?.afterHeader, _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(InvoiceSummaryCard, { invoice: invoice }), _jsx(InvoiceLinksCard, { invoice: invoice, onBookingOpen: onBookingOpen, onPersonOpen: onPersonOpen, onOrganizationOpen: onOrganizationOpen })] }), slots?.afterSummary, _jsx(InvoiceLineItemsCard, { invoice: invoice, lineItems: lineItems, pending: lineItemsQuery.isPending, deletePending: removeLineItem.isPending, onCreate: onLineItemCreate, onEdit: onLineItemEdit, onDelete: async (lineItemId) => {
+                    await removeLineItem.mutateAsync(lineItemId);
+                } }), slots?.afterLineItems, _jsx(InvoicePaymentsCard, { invoice: invoice, payments: payments, pending: paymentsQuery.isPending, onCreate: onPaymentCreate }), slots?.afterPayments, _jsx(InvoiceCreditNotesCard, { invoice: invoice, creditNotes: creditNotes, pending: creditNotesQuery.isPending, onCreate: onCreditNoteCreate }), slots?.afterCreditNotes, _jsx(InvoiceNotesCard, { notes: notes, noteContent: noteContent, pending: notesQuery.isPending, addPending: addNote.isPending, onNoteChange: setNoteContent, onAddNote: async () => {
+                    const content = noteContent.trim();
+                    if (!content)
+                        return;
+                    await addNote.mutateAsync({ content });
+                    setNoteContent("");
+                } }), slots?.afterNotes, _jsx(InvoiceDialog, { open: editOpen, onOpenChange: setEditOpen, invoice: invoice }), slots?.dialogs] }));
+}
+export function InvoiceDetailHeader({ invoice, onBack, onEdit, onDelete, deletePending, className, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    const canDelete = invoice.status === "draft";
+    return (_jsxs("div", { "data-slot": "invoice-detail-header", className: cn("flex flex-col gap-4 md:flex-row md:items-start", 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: detail.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 text-2xl font-bold tracking-tight", children: invoice.invoiceNumber }), _jsx(Badge, { variant: "outline", children: invoice.invoiceType ?? "invoice" })] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: invoice.bookingId })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 md:justify-end", children: [_jsx(Badge, { variant: invoiceStatusVariant[invoice.status] ?? "secondary", children: messages.common.invoiceStatusLabels[invoice.status] }), _jsxs(Button, { type: "button", variant: "outline", onClick: onEdit, children: [_jsx(Pencil, { className: "size-4", "aria-hidden": "true" }), detail.actions.edit] }), _jsx(ConfirmActionButton, { buttonLabel: detail.actions.delete, confirmLabel: detail.actions.delete, cancelLabel: messages.common.cancel, title: detail.actions.deleteTitle, description: canDelete ? detail.actions.deleteDescription : detail.actions.deleteOnlyDraft, variant: "destructive", confirmVariant: "destructive", disabled: !canDelete || deletePending, onConfirm: onDelete })] })] }));
+}
+export function InvoiceSummaryCard({ invoice, className }) {
+    const { formatCurrency } = useFinanceUiI18nOrDefault();
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-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.currency, children: invoice.currency }), _jsx(DetailRow, { label: detail.fields.subtotal, children: _jsx(Money, { cents: invoice.subtotalCents, currency: invoice.currency }) }), _jsx(DetailRow, { label: detail.fields.tax, children: _jsx(Money, { cents: invoice.taxCents, currency: invoice.currency }) }), _jsx(DetailRow, { label: detail.fields.total, children: _jsx("span", { className: "font-semibold", children: formatCurrency(invoice.totalCents / 100, invoice.currency) }) }), _jsx(DetailRow, { label: detail.fields.paid, children: _jsx(Money, { cents: invoice.paidCents, currency: invoice.currency }) }), _jsx(DetailRow, { label: detail.fields.balanceDue, children: _jsx("span", { className: "font-semibold", children: formatCurrency(invoice.balanceDueCents / 100, invoice.currency) }) }), _jsx(DetailRow, { label: detail.fields.status, children: _jsx(Badge, { variant: invoiceStatusVariant[invoice.status] ?? "secondary", children: messages.common.invoiceStatusLabels[invoice.status] }) })] }) })] }));
+}
+export function InvoiceLinksCard({ invoice, className, onBookingOpen, onPersonOpen, onOrganizationOpen, }) {
+    const { formatDate, formatDateTime } = useFinanceUiI18nOrDefault();
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-links-card", className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.titles.links }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid gap-3 text-sm", children: [_jsx(DetailRow, { label: detail.fields.issueDate, children: formatDate(invoice.issueDate) }), _jsx(DetailRow, { label: detail.fields.dueDate, children: formatDate(invoice.dueDate) }), _jsx(DetailRow, { label: detail.fields.booking, children: _jsx(DetailLink, { label: invoice.bookingId, actionLabel: detail.actions.viewBooking, onClick: () => onBookingOpen?.(invoice.bookingId, invoice), disabled: !onBookingOpen }) }), invoice.personId ? (_jsx(DetailRow, { label: detail.fields.person, children: _jsx(DetailLink, { label: invoice.personId, actionLabel: detail.actions.viewPerson, onClick: () => onPersonOpen?.(invoice.personId, invoice), disabled: !onPersonOpen }) })) : null, invoice.organizationId ? (_jsx(DetailRow, { label: detail.fields.organization, children: _jsx(DetailLink, { label: invoice.organizationId, actionLabel: detail.actions.viewOrganization, onClick: () => onOrganizationOpen?.(invoice.organizationId, invoice), disabled: !onOrganizationOpen }) })) : null, invoice.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: invoice.notes })] })) : null, _jsx(DetailRow, { label: detail.fields.createdAt, children: formatDateTime(invoice.createdAt) }), _jsx(DetailRow, { label: detail.fields.updatedAt, children: formatDateTime(invoice.updatedAt) })] }) })] }));
+}
+export function InvoiceLineItemsCard({ invoice, lineItems, pending, deletePending, onCreate, onEdit, onDelete, className, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-line-items-card", className: className, children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: detail.titles.lineItems }), onCreate ? (_jsxs(Button, { size: "sm", onClick: () => onCreate(invoice), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), detail.actions.addLineItem] })) : null] }), _jsx(CardContent, { children: pending ? (_jsx(LoadingRow, {})) : lineItems.length === 0 ? (_jsx(EmptyRow, { children: detail.states.noLineItems })) : (_jsx("div", { className: "overflow-hidden rounded border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: detail.columns.description }), _jsx("th", { className: "p-2 text-right font-medium", children: detail.columns.quantity }), _jsx("th", { className: "p-2 text-right font-medium", children: detail.columns.unitPrice }), _jsx("th", { className: "p-2 text-right font-medium", children: detail.columns.total }), _jsx("th", { className: "p-2 text-right font-medium", children: detail.columns.taxRate }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: lineItems.map((lineItem) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: lineItem.description }), _jsx("td", { className: "p-2 text-right", children: lineItem.quantity }), _jsx("td", { className: "p-2 text-right", children: _jsx(Money, { cents: lineItem.unitPriceCents, currency: invoice.currency }) }), _jsx("td", { className: "p-2 text-right", children: _jsx(Money, { cents: lineItem.totalCents, currency: invoice.currency }) }), _jsx("td", { className: "p-2 text-right", children: lineItem.taxRate === null ? detail.states.noValue : `${lineItem.taxRate}%` }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex justify-end gap-1", children: [onEdit ? (_jsxs(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => onEdit(lineItem, invoice), children: [_jsx(Pencil, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: detail.actions.editLineItem })] })) : null, onDelete ? (_jsx(ConfirmActionButton, { buttonLabel: detail.actions.deleteLineItemShort, confirmLabel: detail.actions.delete, cancelLabel: messages.common.cancel, title: detail.actions.deleteLineItemTitle, description: detail.actions.deleteLineItemDescription, disabled: deletePending, variant: "ghost", confirmVariant: "destructive", onConfirm: () => onDelete(lineItem.id) })) : null] }) })] }, lineItem.id))) })] }) })) })] }));
+}
+export function InvoicePaymentsCard({ invoice, payments, pending, onCreate, className, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-payments-card", className: className, children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: detail.titles.payments }), onCreate ? (_jsxs(Button, { size: "sm", onClick: () => onCreate(invoice), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), detail.actions.recordPayment] })) : null] }), _jsx(CardContent, { children: pending ? (_jsx(LoadingRow, {})) : payments.length === 0 ? (_jsx(EmptyRow, { children: detail.states.noPayments })) : (_jsx("ul", { className: "divide-y", children: payments.map((payment) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: formatPaymentMethod(payment.paymentMethod, messages) }), _jsx("p", { className: "text-xs text-muted-foreground", children: payment.paymentDate })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Money, { cents: payment.amountCents, currency: payment.currency }), _jsx(Badge, { variant: paymentStatusVariant[payment.status] ?? "secondary", children: messages.common.supplierPaymentStatusLabels[payment.status] })] })] }, payment.id))) })) })] }));
+}
+export function InvoiceCreditNotesCard({ invoice, creditNotes, pending, onCreate, className, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-credit-notes-card", className: className, children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: detail.titles.creditNotes }), onCreate ? (_jsxs(Button, { size: "sm", onClick: () => onCreate(invoice), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), detail.actions.addCreditNote] })) : null] }), _jsx(CardContent, { children: pending ? (_jsx(LoadingRow, {})) : creditNotes.length === 0 ? (_jsx(EmptyRow, { children: detail.states.noCreditNotes })) : (_jsx("ul", { className: "divide-y", children: creditNotes.map((creditNote) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: creditNote.creditNoteNumber }), _jsx("p", { className: "line-clamp-2 text-xs text-muted-foreground", children: creditNote.reason })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Money, { cents: creditNote.amountCents, currency: creditNote.currency }), _jsx(Badge, { variant: creditNoteStatusVariant[creditNote.status] ?? "secondary", children: detail.creditNoteStatusLabels[creditNote.status] })] })] }, creditNote.id))) })) })] }));
+}
+export function InvoiceNotesCard({ notes, noteContent, pending, addPending, className, onNoteChange, onAddNote, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const detail = messages.invoiceDetailPage;
+    return (_jsxs(Card, { "data-slot": "invoice-notes-card", className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.titles.notes }) }), _jsxs(CardContent, { className: "flex flex-col gap-4", children: [pending ? (_jsx(LoadingRow, {})) : notes.length === 0 ? (_jsx(EmptyRow, { children: detail.states.noNotes })) : (_jsx("ul", { className: "divide-y", children: notes.map((note) => (_jsxs("li", { className: "py-3", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm", children: note.content }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: note.createdAt })] }, note.id))) })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Textarea, { value: noteContent, onChange: (event) => onNoteChange(event.target.value), placeholder: detail.placeholders.note, rows: 3 }), _jsxs(Button, { type: "button", className: "self-end", disabled: addPending || noteContent.trim().length === 0, onClick: () => void onAddNote(), children: [addPending ? _jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }) : null, detail.actions.addNote] })] })] })] }));
+}
+export function Money({ cents, currency }) {
+    const { formatCurrency } = useFinanceUiI18nOrDefault();
+    return _jsx("span", { className: "font-mono", children: formatCurrency(cents / 100, currency) });
+}
+export 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 })] }));
+}
+export 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 })] }));
+}
+export function EmptyRow({ children }) {
+    return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: children });
+}
+export function LoadingRow() {
+    return (_jsx("div", { className: "flex justify-center py-6", children: _jsx(Loader2, { className: "size-5 animate-spin text-muted-foreground" }) }));
+}
+export function InvoiceDetailLoading({ 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.invoiceDetailPage.states.loading] }) }));
+}
+export function InvoiceDetailState({ 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.invoiceDetailPage.actions.back })) : null] }));
+}
+export 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, " ");
+}
+export const invoiceStatusVariant = {
+    draft: "outline",
+    sent: "secondary",
+    partially_paid: "secondary",
+    paid: "default",
+    overdue: "destructive",
+    void: "secondary",
+};
+export const paymentStatusVariant = {
+    pending: "outline",
+    completed: "default",
+    failed: "destructive",
+    refunded: "secondary",
+};
+export const creditNoteStatusVariant = {
+    draft: "outline",
+    issued: "secondary",
+    applied: "default",
+};

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

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

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

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

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 "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/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":"AA0CA,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,2CAgThF"}

package/dist/components/invoices-page.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useInvoices, } from "@voyantjs/finance-react";
+import { formatMessage } from "@voyantjs/i18n";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowDown, ArrowUp, ArrowUpDown, ListFilter, Plus, Search, X } from "lucide-react";
+import { useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { invoiceStatuses } from "../i18n/messages.js";
+import { InvoiceDialog } from "./invoice-dialog.js";
+const PAGE_SIZE = 25;
+const STATUS_ALL = "__all__";
+const invoiceStatusVariant = {
+    draft: "outline",
+    sent: "secondary",
+    partially_paid: "secondary",
+    paid: "default",
+    overdue: "destructive",
+    void: "destructive",
+};
+function formatAmount(cents, currency) {
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+}
+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 { 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 resetPage = () => setPageIndex(0);
+    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("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_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: 6, className: "h-24 text-center text-sm text-destructive", children: f.loadFailed }) })) : invoices.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, 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, { 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: formatAmount(row.totalCents, row.currency) }), _jsx(TableCell, { className: "font-mono", children: formatAmount(row.paidCents, row.currency) }), _jsx(TableCell, { className: "font-mono", children: formatAmount(row.balanceDueCents, row.currency) }), _jsx(TableCell, { children: row.dueDate })] }, row.id)))) })] }) }), _jsx(PaginationBar, { shown: invoices.length, total: total, page: page, pageCount: pageCount, onPrevious: () => setPageIndex((prev) => Math.max(0, prev - 1)), onNext: () => setPageIndex((prev) => prev + 1), canGoBack: pageIndex > 0, canGoForward: (pageIndex + 1) * PAGE_SIZE < total })] }), _jsx(InvoiceDialog, { open: invoiceDialogOpen, onOpenChange: setInvoiceDialogOpen })] }));
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort, }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const f = messages.invoicesPage.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 })] })] }));
+}
+function InvoiceRowSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _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-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, `skeleton-${idx}`))) }));
+}

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

@@ -0,0 +1,41 @@
+import { type UnifiedPaymentRecord } from "@voyantjs/finance-react";
+import type * as React from "react";
+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;
+    slots?: PaymentDetailPageSlots;
+}
+export declare function PaymentDetailPage({ id, className, onBack, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, slots, }: PaymentDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export interface PaymentDetailHeaderProps {
+    payment: UnifiedPaymentRecord;
+    onBack?: () => void;
+    className?: string;
+}
+export declare function PaymentDetailHeader({ payment, onBack, 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":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,yBAAyB,CAAA;AAI/E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAInC,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IACxE,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IACpF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC5E,KAAK,CAAC,EAAE,sBAAsB,CAAA;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,KAAK,GACN,EAAE,sBAAsB,2CAiDxB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,oBAAoB,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CA0B3F;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,oBAAoB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAgDhF;AAED,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;IACnE,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IACxE,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;IACpF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;CAC7E;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,EAAE,qBAAqB,2CA0FvB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAqBjF"}

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

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePayment } from "@voyantjs/finance-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, ExternalLink, Loader2 } from "lucide-react";
+import { useFinanceUiI18nOrDefault, useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+export function PaymentDetailPage({ id, className, onBack, onInvoiceOpen, onBookingOpen, onPersonOpen, onOrganizationOpen, onSupplierOpen, 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 }), 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, 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] }), _jsx(Badge, { variant: paymentStatusVariant[payment.status] ?? "secondary", children: messages.common.supplierPaymentStatusLabels[payment.status] })] }));
+}
+export function PaymentSummaryCard({ payment, className }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const { formatCurrency } = useFinanceUiI18nOrDefault();
+    const detail = messages.paymentDetailPage;
+    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, _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] }) })] }));
+}
+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/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