@voyant-travel/finance-react 0.119.5

package/dist/admin/index.js

@@ -0,0 +1,286 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { adminRoutePageModule, defineAdminExtension, } from "@voyant-travel/admin";
+// Importing the slot id also binds the bookings-ui `AdminDestinations`
+// augmentation (`booking.detail`, `person.detail`, `organization.detail`,
+// `invoice.detail`, `payment.detail`, ...) into this program — the finance
+// pages navigate through those shared keys, and this package already
+// peer-depends on `@voyant-travel/bookings-react/ui`, so re-declaring them here would
+// just duplicate the contract.
+import { bookingDetailFinanceEndSlot, bookingDetailFinanceStartSlot, bookingDetailInvoicesTabSlot, } from "@voyant-travel/bookings-react/admin";
+// Importing the slot id also binds the suppliers-ui `AdminDestinations`
+// augmentation (`supplier.list`, `supplier.detail`) — this package already
+// peer-depends on `@voyant-travel/distribution-react/suppliers/ui`.
+import { supplierDetailPaymentPolicySlot } from "@voyant-travel/distribution-react/suppliers/admin";
+import { defaultFetcher } from "@voyant-travel/react";
+import * as React from "react";
+// Skeletons are deliberately the ONLY page-adjacent statics this factory
+// touches: they ship from their own light modules, so attaching them as
+// `pendingComponent` doesn't pull the heavy page chunks into the factory.
+// Query options resolve via dynamic import inside the loaders, and the
+// widgets mount through Suspense-wrapped `React.lazy` loaders — both keep
+// the finance data layer (client + response schemas + the payment-policy
+// engine) out of the workspace-chrome chunk that evaluates this factory.
+import { InvoicesPageSkeleton } from "../components/invoices-page-skeleton.js";
+import { PaymentsPageSkeleton } from "../components/payments-page-skeleton.js";
+import { InvoiceDetailSkeleton } from "./invoice-detail-skeleton.js";
+import { PaymentDetailSkeleton } from "./payment-detail-skeleton.js";
+/** The host runtime as the package's query-option client (`fetchWithValidation`). */
+function runtimeClient(runtime) {
+    return { baseUrl: runtime.baseUrl, fetcher: runtime.fetcher ?? defaultFetcher };
+}
+/**
+ * Suspense-wrapped lazy widget mount: the widget registry takes a sync
+ * component, but the finance cards (and the payment-policy/schedule stack
+ * behind them) must not load with workspace chrome — each widget chunk
+ * fetches when its slot actually renders on a detail page.
+ */
+function lazyWidget(load) {
+    const Lazy = React.lazy(load);
+    return function LazyFinanceAdminWidget(props) {
+        return (_jsx(React.Suspense, { fallback: null, children: _jsx(Lazy, { ...props }) }));
+    };
+}
+const LazyBookingInvoicesWidget = lazyWidget(() => import("./booking-invoices-widget.js").then((module) => ({
+    default: module.BookingInvoicesWidget,
+})));
+const LazyBookingPendingPaymentSessionsWidget = lazyWidget(() => import("./booking-pending-payment-sessions-widget.js").then((module) => ({
+    default: module.BookingPendingPaymentSessionsWidget,
+})));
+const LazyBookingPaymentPolicyWidget = lazyWidget(() => import("./booking-payment-policy-widget.js").then((module) => ({
+    default: module.BookingPaymentPolicyWidget,
+})));
+const LazySupplierPaymentPolicyWidget = lazyWidget(() => import("./supplier-payment-policy-widget.js").then((module) => ({
+    default: module.SupplierPaymentPolicyWidget,
+})));
+export { InvoiceDetailSkeleton } from "./invoice-detail-skeleton.js";
+export { PaymentDetailSkeleton } from "./payment-detail-skeleton.js";
+/**
+ * The finance admin contribution (packaged-admin RFC Phase 3,
+ * `@voyant-travel/<domain>-ui/admin` convention).
+ *
+ * NAVIGATION: deliberately none. The Finance nav group (invoices, number
+ * series, payments, supplier invoices, profitability) is part of the BASE
+ * operator navigation — see `createOperatorAdminNavigation` in
+ * `@voyant-travel/admin` — so contributing nav entries here would duplicate them.
+ * If the base nav ever drops the finance group, this extension is where the
+ * entries move.
+ *
+ * ROUTES: all eight contributions carry the FULL route implementation
+ * (packaged-admin RFC §4.8 endgame) — a lazy `page` module loader, a data
+ * loader fed by the host runtime (`baseUrl` + cookie-forwarding fetcher),
+ * `ssr: "data-only"`, and the pending skeleton where the operator route had
+ * one — so the host needs no per-route files for them. Pages stay
+ * code-split: this factory never references a page component statically;
+ * each `page:` dynamically imports its specific module (never a barrel), and
+ * param-taking pages read the matched `$id` off `AdminRoutePageProps` and
+ * bind it onto {@link InvoiceDetailHost} / {@link PaymentDetailHost}.
+ * Cross-route links resolve through the semantic destinations declared
+ * above. The supplier-invoices pages carry their previously app-owned wiring
+ * package-side now: attachment uploads post to the starter-level
+ * `/v1/uploads` route through the shared finance provider context (the
+ * `BookingInvoicesWidget` precedent), inline supplier creation rides the
+ * suppliers package's `useSupplierMutation`, and the allocation dialog's
+ * cross-domain target search composes the bookings / products /
+ * availability packages' query options through the same context client.
+ *
+ * WIDGETS: the cycle-resolution piece (RFC §4.7). The booking detail page
+ * needs the finance-owned invoices card, but this package peer-depends on
+ * `@voyant-travel/bookings-react/ui`, so the bookings host cannot import it. Instead
+ * this extension contributes {@link BookingInvoicesWidget} on the
+ * `booking.details.invoices-tab` slot the bookings host exposes; the host
+ * mounts its Invoices tab whenever a contribution targets that slot and
+ * hands the widget its typed slot context as props. The Finance tab's
+ * payment-links card ({@link BookingPendingPaymentSessionsWidget}) and
+ * payment-policy override card ({@link BookingPaymentPolicyWidget}) travel
+ * the same way on `booking.details.finance-start` / `…finance-end`. The
+ * same pattern resolves the finance-ui ↔ suppliers-ui cycle: the supplier detail page's
+ * customer-payment-policy card ships as {@link SupplierPaymentPolicyWidget}
+ * on the `supplier.details.payment-policy` slot the supplier host exposes.
+ */
+export function createFinanceAdminExtension(options = {}) {
+    const { basePath = "/finance", labels = {} } = options;
+    const { invoices = "Invoices", invoiceNumberSeries = "Number Series", payments = "Payments", supplierInvoices = "Supplier invoices", profitability = "Profitability", } = labels;
+    return defineAdminExtension({
+        id: "finance",
+        routes: [
+            {
+                // Index redirect (formerly the host's `finance/index.tsx` file
+                // route): `/finance` lands on the invoices page.
+                id: "finance-index",
+                path: basePath,
+                title: invoices,
+                redirectTo: `${basePath}/invoices`,
+            },
+            {
+                id: "finance-invoices-index",
+                path: `${basePath}/invoices`,
+                title: invoices,
+                // Route-backed destination (RFC §4.7 endgame): the key resolves by
+                // pure path interpolation of this route, so the host's resolver is
+                // generated (`voyant admin generate --destinations`).
+                destination: "invoice.list",
+                ssr: "data-only",
+                page: () => import("./pages/invoices-index.js"),
+                // Dynamic import on purpose: the query options pull the finance
+                // data layer (client + response schemas), and a static import here
+                // would pin it into the workspace-chrome chunk that evaluates this
+                // factory.
+                loader: async ({ queryClient, runtime }) => {
+                    const { getInvoicesQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getInvoicesQueryOptions(runtimeClient(runtime)));
+                },
+                pendingComponent: InvoicesPageSkeleton,
+            },
+            {
+                id: "finance-invoices-detail",
+                path: `${basePath}/invoices/$id`,
+                title: invoices,
+                // Key declared by @voyant-travel/bookings-react/admin (bound above).
+                destination: "invoice.detail",
+                destinationParams: { id: "invoiceId" },
+                ssr: "data-only",
+                page: () => import("./pages/invoice-detail.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose — see the invoices index loader above.
+                    const { getInvoiceCreditNotesQueryOptions, getInvoiceLineItemsQueryOptions, getInvoiceNotesQueryOptions, getInvoicePaymentsQueryOptions, getInvoiceQueryOptions, } = await import("../query-options.js");
+                    const client = runtimeClient(runtime);
+                    await queryClient.ensureQueryData(getInvoiceQueryOptions(client, id));
+                    void queryClient.prefetchQuery(getInvoiceLineItemsQueryOptions(client, id));
+                    void queryClient.prefetchQuery(getInvoicePaymentsQueryOptions(client, id));
+                    void queryClient.prefetchQuery(getInvoiceCreditNotesQueryOptions(client, id));
+                    void queryClient.prefetchQuery(getInvoiceNotesQueryOptions(client, id));
+                },
+                pendingComponent: InvoiceDetailSkeleton,
+            },
+            {
+                id: "finance-invoice-number-series",
+                path: `${basePath}/invoice-number-series`,
+                title: invoiceNumberSeries,
+                ssr: "data-only",
+                // `InvoiceNumberSeriesPage` takes an all-optional props bag, which
+                // TypeScript's weak-type rule rejects as a route page component
+                // despite being safe to mount — hence `adminRoutePageModule`.
+                page: () => import("../components/invoice-number-series-page.js").then((module) => adminRoutePageModule(module.InvoiceNumberSeriesPage)),
+                // Dynamic import on purpose — see the invoices index loader above.
+                loader: async ({ queryClient, runtime }) => {
+                    const { getInvoiceNumberSeriesQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getInvoiceNumberSeriesQueryOptions(runtimeClient(runtime), {
+                        limit: 100,
+                        offset: 0,
+                    }));
+                },
+            },
+            {
+                id: "finance-payments-index",
+                path: `${basePath}/payments`,
+                title: payments,
+                destination: "payment.list",
+                ssr: "data-only",
+                page: () => import("./pages/payments-index.js"),
+                // Dynamic import on purpose — see the invoices index loader above.
+                loader: async ({ queryClient, runtime }) => {
+                    const { getAllPaymentsQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getAllPaymentsQueryOptions(runtimeClient(runtime)));
+                },
+                pendingComponent: PaymentsPageSkeleton,
+            },
+            {
+                id: "finance-payments-detail",
+                path: `${basePath}/payments/$id`,
+                title: payments,
+                // Key declared by @voyant-travel/bookings-react/admin (bound above).
+                destination: "payment.detail",
+                destinationParams: { id: "paymentId" },
+                ssr: "data-only",
+                page: () => import("./pages/payment-detail.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose — see the invoices index loader above.
+                    const { getPaymentQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getPaymentQueryOptions(runtimeClient(runtime), id));
+                },
+                pendingComponent: PaymentDetailSkeleton,
+            },
+            {
+                id: "finance-supplier-invoices-index",
+                path: `${basePath}/supplier-invoices`,
+                title: supplierInvoices,
+                destination: "supplierInvoice.list",
+                ssr: "data-only",
+                page: () => import("./pages/supplier-invoices-index.js"),
+                // Dynamic import on purpose — see the invoices index loader above.
+                loader: async ({ queryClient, runtime }) => {
+                    const { getSupplierInvoicesQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getSupplierInvoicesQueryOptions(runtimeClient(runtime)));
+                },
+            },
+            {
+                id: "finance-supplier-invoices-detail",
+                path: `${basePath}/supplier-invoices/$id`,
+                title: supplierInvoices,
+                destination: "supplierInvoice.detail",
+                destinationParams: { id: "supplierInvoiceId" },
+                ssr: "data-only",
+                page: () => import("./pages/supplier-invoice-detail.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose — see the invoices index loader above.
+                    const { getSupplierInvoiceQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getSupplierInvoiceQueryOptions(runtimeClient(runtime), id));
+                },
+            },
+            {
+                id: "finance-profitability",
+                path: `${basePath}/profitability`,
+                title: profitability,
+                ssr: "data-only",
+                page: () => import("./pages/profitability.js"),
+                // Dynamic import on purpose — see the invoices index loader above.
+                loader: async ({ queryClient, runtime }) => {
+                    const { getDepartureProfitabilityQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getDepartureProfitabilityQueryOptions(runtimeClient(runtime)));
+                },
+            },
+        ],
+        widgets: [
+            {
+                id: "finance-booking-invoices",
+                slot: bookingDetailInvoicesTabSlot,
+                // The widget registry is untyped (`Record<string, unknown>` props);
+                // the typed contract is `BookingDetailHostSlotContext`, which the
+                // bookings host passes verbatim to this slot's widgets.
+                component: LazyBookingInvoicesWidget,
+            },
+            {
+                id: "finance-booking-pending-payment-sessions",
+                slot: bookingDetailFinanceStartSlot,
+                // Same untyped-registry cast; the typed contract is
+                // `BookingDetailHostSlotContext`, which the bookings host passes
+                // verbatim to this slot's widgets.
+                component: LazyBookingPendingPaymentSessionsWidget,
+            },
+            {
+                id: "finance-booking-payment-policy",
+                slot: bookingDetailFinanceEndSlot,
+                // Same untyped-registry cast; the typed contract is
+                // `BookingDetailHostSlotContext`.
+                component: LazyBookingPaymentPolicyWidget,
+            },
+            {
+                id: "finance-supplier-payment-policy",
+                slot: supplierDetailPaymentPolicySlot,
+                // Same untyped-registry cast; the typed contract is
+                // `SupplierDetailHostSlotContext`, which the supplier detail host
+                // passes verbatim to this slot's widgets.
+                component: LazySupplierPaymentPolicyWidget,
+            },
+        ],
+    });
+}

package/dist/admin/invoice-detail-host.d.ts

@@ -0,0 +1,19 @@
+export interface InvoiceDetailHostProps {
+    id: string;
+}
+/**
+ * Packaged admin host for the operator-grade invoice detail page
+ * (packaged-admin RFC Phase 3). Owns everything package-clean:
+ *
+ *   - Data access through `@voyant-travel/finance-react` hooks (shared finance
+ *     provider context — no app RPC client).
+ *   - Cross-route links resolve through semantic destinations (RFC §4.7):
+ *     `invoice.list` (back/after delete), `invoice.detail` (after a proforma
+ *     converts), `booking.detail` — no host route tree import.
+ *   - Admin widget extension points: the `invoice.details.header` and
+ *     `invoice.details.after-summary` slots render through the shared
+ *     `AdminWidgetSlotRenderer`, which reads the workspace shell's
+ *     `AdminExtensionsProvider` context.
+ */
+export declare function InvoiceDetailHost({ id }: InvoiceDetailHostProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=invoice-detail-host.d.ts.map

package/dist/admin/invoice-detail-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoice-detail-host.d.ts","sourceRoot":"","sources":["../../src/admin/invoice-detail-host.tsx"],"names":[],"mappings":"AAqEA,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;CACX;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,sBAAsB,2CAmS/D"}

package/dist/admin/invoice-detail-host.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdminWidgetSlotRenderer, useAdminNavigate, useOperatorAdminMessages, } from "@voyant-travel/admin";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Textarea, } from "@voyant-travel/ui/components";
+import { ArrowLeft, ArrowRightLeft, Ban, Loader2, Pencil, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { InvoiceActionLedgerCard } from "../components/invoice-action-ledger-card.js";
+import { InvoiceDialog } from "../components/invoice-dialog.js";
+import { useInvoice, useInvoiceCreditNotes, useInvoiceLineItemMutation, useInvoiceLineItems, useInvoiceMutation, useInvoiceNoteMutation, useInvoiceNotes, useInvoicePayments, } from "../index.js";
+import { CreditNoteDialog } from "./credit-note-dialog.js";
+import { invoiceStatusVariant } from "./finance-shared.js";
+import { InvoiceAttachmentsCard, InvoiceCreditNotesCard, InvoiceInfoCards, InvoiceLineItemsCard, InvoiceNotesCard, InvoicePaymentsCard, } from "./invoice-detail-sections.js";
+import { InvoiceDetailSkeleton } from "./invoice-detail-skeleton.js";
+import { LineItemDialog } from "./line-item-dialog.js";
+import { PaymentDialog } from "./payment-dialog.js";
+function getInvoiceStatusLabel(messages, status) {
+    switch (status) {
+        case "draft":
+            return messages.finance.invoiceStatusDraft;
+        case "issued":
+            return messages.finance.invoiceStatusIssued;
+        case "partially_paid":
+            return messages.finance.invoiceStatusPartiallyPaid;
+        case "paid":
+            return messages.finance.invoiceStatusPaid;
+        case "overdue":
+            return messages.finance.invoiceStatusOverdue;
+        case "void":
+            return messages.finance.invoiceStatusVoid;
+        default:
+            return status.replace(/_/g, " ");
+    }
+}
+/**
+ * Packaged admin host for the operator-grade invoice detail page
+ * (packaged-admin RFC Phase 3). Owns everything package-clean:
+ *
+ *   - Data access through `@voyant-travel/finance-react` hooks (shared finance
+ *     provider context — no app RPC client).
+ *   - Cross-route links resolve through semantic destinations (RFC §4.7):
+ *     `invoice.list` (back/after delete), `invoice.detail` (after a proforma
+ *     converts), `booking.detail` — no host route tree import.
+ *   - Admin widget extension points: the `invoice.details.header` and
+ *     `invoice.details.after-summary` slots render through the shared
+ *     `AdminWidgetSlotRenderer`, which reads the workspace shell's
+ *     `AdminExtensionsProvider` context.
+ */
+export function InvoiceDetailHost({ id }) {
+    const messages = useOperatorAdminMessages();
+    const navigateTo = useAdminNavigate();
+    const [editOpen, setEditOpen] = useState(false);
+    const [lineItemDialogOpen, setLineItemDialogOpen] = useState(false);
+    const [editingLineItem, setEditingLineItem] = useState();
+    const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+    const [creditNoteDialogOpen, setCreditNoteDialogOpen] = useState(false);
+    const [noteContent, setNoteContent] = useState("");
+    const [actionError, setActionError] = useState(null);
+    const [voidDialogOpen, setVoidDialogOpen] = useState(false);
+    const [voidReason, setVoidReason] = useState("");
+    const { data: invoiceData, isPending } = useInvoice(id);
+    const { data: lineItemsData } = useInvoiceLineItems(id);
+    const { data: paymentsData } = useInvoicePayments(id);
+    const { data: creditNotesData } = useInvoiceCreditNotes(id);
+    const { data: notesData } = useInvoiceNotes(id);
+    const { convertToInvoice, remove: deleteInvoice, voidInvoice } = useInvoiceMutation();
+    const { remove: deleteLineItem } = useInvoiceLineItemMutation(id);
+    const addNoteMutation = useInvoiceNoteMutation(id);
+    if (isPending) {
+        return _jsx(InvoiceDetailSkeleton, {});
+    }
+    const invoice = invoiceData?.data;
+    if (!invoice) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: messages.finance.detailPage.notFound }), _jsx(Button, { variant: "outline", onClick: () => navigateTo("invoice.list", {}), children: messages.finance.detailPage.backToFinance })] }));
+    }
+    const lineItems = lineItemsData?.data ?? [];
+    const payments = paymentsData?.data ?? [];
+    const creditNotes = creditNotesData?.data ?? [];
+    const notes = notesData?.data ?? [];
+    const canVoidInvoice = ["pending_external_allocation", "issued", "overdue"].includes(invoice.status);
+    const canConvertProforma = invoice.invoiceType === "proforma" && invoice.status !== "void";
+    const getMutationErrorMessage = (fallback) => (error) => error instanceof Error ? error.message : fallback;
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigateTo("invoice.list", {}), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: invoice.invoiceNumber }), _jsx("div", { className: "mt-1 flex items-center gap-2", children: _jsx(Badge, { variant: invoiceStatusVariant[invoice.status] ?? "secondary", className: "capitalize", children: getInvoiceStatusLabel(messages, invoice.status) }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [canConvertProforma ? (_jsxs(Button, { variant: "outline", disabled: convertToInvoice.isPending, onClick: () => {
+                                    if (!confirm(messages.finance.convertConfirm))
+                                        return;
+                                    setActionError(null);
+                                    convertToInvoice.mutate({ id }, {
+                                        onSuccess: (converted) => {
+                                            navigateTo("invoice.detail", { invoiceId: converted.id });
+                                        },
+                                        onError: (error) => {
+                                            setActionError(getMutationErrorMessage(messages.finance.detailPage.convertFailed)(error));
+                                        },
+                                    });
+                                }, children: [convertToInvoice.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin", "aria-hidden": "true" })) : (_jsx(ArrowRightLeft, { className: "mr-2 h-4 w-4" })), messages.finance.convertToInvoice] })) : null, _jsxs(Button, { variant: "outline", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), messages.finance.detailPage.edit] }), _jsxs(AlertDialog, { open: voidDialogOpen, onOpenChange: (open) => {
+                                    setVoidDialogOpen(open);
+                                    if (!open)
+                                        setVoidReason("");
+                                }, children: [_jsxs(AlertDialogTrigger, { disabled: !canVoidInvoice || voidInvoice.isPending, render: _jsx(Button, { type: "button", variant: "outline" }), children: [_jsx(Ban, { className: "mr-2 h-4 w-4" }), messages.finance.detailPage.void] }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: messages.finance.detailPage.voidConfirm }), _jsx(AlertDialogDescription, { children: messages.finance.detailPage.voidDescription })] }), _jsx(Textarea, { value: voidReason, onChange: (event) => setVoidReason(event.target.value), placeholder: messages.finance.detailPage.voidReasonPlaceholder, className: "min-h-24" }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: voidInvoice.isPending, children: messages.finance.detailPage.cancel }), _jsxs(AlertDialogAction, { variant: "destructive", disabled: voidInvoice.isPending, onClick: () => {
+                                                            setActionError(null);
+                                                            voidInvoice.mutate({ id, input: { reason: voidReason.trim() || null } }, {
+                                                                onSuccess: () => {
+                                                                    setVoidDialogOpen(false);
+                                                                    setVoidReason("");
+                                                                },
+                                                                onError: (error) => {
+                                                                    setActionError(getMutationErrorMessage(messages.finance.detailPage.voidFailed)(error));
+                                                                },
+                                                            });
+                                                        }, children: [voidInvoice.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin", "aria-hidden": "true" })) : null, messages.finance.detailPage.void] })] })] })] }), _jsxs(Button, { variant: "destructive", onClick: () => {
+                                    if (invoice.status !== "draft") {
+                                        alert(messages.finance.detailPage.deleteOnlyDraftAlert);
+                                        return;
+                                    }
+                                    if (confirm(messages.finance.detailPage.deleteConfirm)) {
+                                        setActionError(null);
+                                        deleteInvoice.mutate(id, {
+                                            onSuccess: () => {
+                                                navigateTo("invoice.list", {});
+                                            },
+                                            onError: (error) => {
+                                                setActionError(getMutationErrorMessage(messages.finance.detailPage.deleteOnlyDraftAlert)(error));
+                                            },
+                                        });
+                                    }
+                                }, disabled: deleteInvoice.isPending, children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), messages.finance.detailPage.delete] })] })] }), actionError ? (_jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-destructive text-sm", children: actionError })) : null, _jsx(AdminWidgetSlotRenderer, { slot: "invoice.details.header", props: { invoice } }), _jsx(InvoiceInfoCards, { invoice: invoice, onOpenBooking: () => navigateTo("booking.detail", { bookingId: invoice.bookingId }) }), _jsx(AdminWidgetSlotRenderer, { slot: "invoice.details.after-summary", props: { invoice, lineItems, payments, creditNotes, notes } }), _jsx(InvoiceLineItemsCard, { lineItems: lineItems, onCreate: () => {
+                    setEditingLineItem(undefined);
+                    setLineItemDialogOpen(true);
+                }, onEdit: (lineItem) => {
+                    setEditingLineItem(lineItem);
+                    setLineItemDialogOpen(true);
+                }, onDelete: (lineId) => {
+                    if (confirm(messages.finance.detailPage.deleteLineItemConfirm)) {
+                        setActionError(null);
+                        deleteLineItem.mutate(lineId, {
+                            onError: (error) => {
+                                setActionError(getMutationErrorMessage(messages.finance.detailPage.deleteLineItemFailed)(error));
+                            },
+                        });
+                    }
+                } }), _jsx(InvoiceAttachmentsCard, { invoiceId: id }), _jsx(InvoicePaymentsCard, { payments: payments, onCreate: () => setPaymentDialogOpen(true), canCreate: invoice.status !== "void" }), _jsx(InvoiceCreditNotesCard, { creditNotes: creditNotes, onCreate: () => setCreditNoteDialogOpen(true) }), _jsx(InvoiceNotesCard, { noteContent: noteContent, isAdding: addNoteMutation.isPending, notes: notes, onNoteChange: setNoteContent, onAddNote: () => addNoteMutation.mutate({ content: noteContent.trim() }, {
+                    onSuccess: () => {
+                        setNoteContent("");
+                    },
+                }) }), _jsx(InvoiceActionLedgerCard, { invoiceId: invoice.id }), _jsx(InvoiceDialog, { open: editOpen, onOpenChange: setEditOpen, invoice: invoice }), _jsx(LineItemDialog, { open: lineItemDialogOpen, onOpenChange: setLineItemDialogOpen, invoiceId: id, lineItem: editingLineItem, onSuccess: () => {
+                    setEditingLineItem(undefined);
+                } }), _jsx(PaymentDialog, { open: paymentDialogOpen, onOpenChange: setPaymentDialogOpen, invoiceId: id, invoiceCurrency: invoice.currency }), _jsx(CreditNoteDialog, { open: creditNoteDialogOpen, onOpenChange: setCreditNoteDialogOpen, invoiceId: id, invoiceCurrency: invoice.currency })] }));
+}

package/dist/admin/invoice-detail-sections.d.ts

@@ -0,0 +1,31 @@
+import { type CreditNoteRow, type FinanceNote, type InvoiceDetail, type LineItem, type PaymentRow } from "./finance-shared.js";
+export declare function InvoiceInfoCards({ invoice, onOpenBooking, }: {
+    invoice: InvoiceDetail;
+    onOpenBooking: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceLineItemsCard({ lineItems, onCreate, onEdit, onDelete, }: {
+    lineItems: LineItem[];
+    onCreate: () => void;
+    onEdit: (lineItem: LineItem) => void;
+    onDelete: (lineId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoicePaymentsCard({ payments, onCreate, canCreate, }: {
+    payments: PaymentRow[];
+    onCreate: () => void;
+    canCreate?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceCreditNotesCard({ creditNotes, onCreate, }: {
+    creditNotes: CreditNoteRow[];
+    onCreate: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceAttachmentsCard({ invoiceId }: {
+    invoiceId: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceNotesCard({ notes, noteContent, isAdding, onNoteChange, onAddNote, }: {
+    notes: FinanceNote[];
+    noteContent: string;
+    isAdding: boolean;
+    onNoteChange: (value: string) => void;
+    onAddNote: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=invoice-detail-sections.d.ts.map

package/dist/admin/invoice-detail-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoice-detail-sections.d.ts","sourceRoot":"","sources":["../../src/admin/invoice-detail-sections.tsx"],"names":[],"mappings":"AAoBA,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,WAAW,EAGhB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,UAAU,EAEhB,MAAM,qBAAqB,CAAA;AA+C5B,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,aAAa,GACd,EAAE;IACD,OAAO,EAAE,aAAa,CAAA;IACtB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,2CA2HA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,2CAkFA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,SAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,UAAU,EAAE,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,2CAmEA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,aAAa,EAAE,CAAA;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,2CAyDA;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,2CAsD1E;AAyBD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAyCA"}

package/dist/admin/invoice-detail-sections.js

@@ -0,0 +1,109 @@
+// agent-quality: file-size exception -- owner: finance-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocale, useOperatorAdminMessages, } from "@voyant-travel/admin";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Textarea, } from "@voyant-travel/ui/components";
+import { Download, FileText, Pencil, Plus, Trash2 } from "lucide-react";
+import { useInvoiceAttachments, useVoyantFinanceContext } from "../index.js";
+import { creditNoteStatusVariant, formatAmount, formatMethod, paymentStatusVariant, } from "./finance-shared.js";
+function getPaymentStatusLabel(messages, status) {
+    switch (status) {
+        case "pending":
+            return messages.finance.paymentStatusPending;
+        case "completed":
+            return messages.finance.paymentStatusCompleted;
+        case "failed":
+            return messages.finance.paymentStatusFailed;
+        case "refunded":
+            return messages.finance.paymentStatusRefunded;
+        default:
+            return status.replace(/_/g, " ");
+    }
+}
+function getPaymentMethodLabel(messages, method) {
+    switch (method) {
+        case "bank_transfer":
+            return messages.finance.paymentMethodBankTransfer;
+        case "credit_card":
+            return messages.finance.paymentMethodCreditCard;
+        case "cash":
+            return messages.finance.paymentMethodCash;
+        case "cheque":
+            return messages.finance.paymentMethodCheque;
+        case "other":
+            return messages.finance.paymentMethodOther;
+        default:
+            return formatMethod(method);
+    }
+}
+function getCreditNoteStatusLabel(messages, status) {
+    switch (status) {
+        case "draft":
+            return messages.finance.creditNoteStatusDraft;
+        case "issued":
+            return messages.finance.creditNoteStatusIssued;
+        case "applied":
+            return messages.finance.creditNoteStatusApplied;
+        default:
+            return status.replace(/_/g, " ");
+    }
+}
+export function InvoiceInfoCards({ invoice, onOpenBooking, }) {
+    const messages = useOperatorAdminMessages();
+    const { resolvedLocale } = useLocale();
+    return (_jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.finance.detailSections.invoiceDetailsTitle }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.currencyLabel, ":"] }), " ", _jsx("span", { children: invoice.currency })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.subtotalLabel, ":"] }), " ", _jsx("span", { className: "font-mono", children: formatAmount(invoice.subtotalCents, invoice.currency) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.taxLabel, ":"] }), " ", _jsx("span", { className: "font-mono", children: formatAmount(invoice.taxCents, invoice.currency) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.totalLabel, ":"] }), " ", _jsx("span", { className: "font-mono font-semibold", children: formatAmount(invoice.totalCents, invoice.currency) })] }), _jsxs("div", { className: "mt-2 border-t pt-3", children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.paidLabel, ":"] }), " ", _jsx("span", { className: "font-mono", children: formatAmount(invoice.paidCents, invoice.currency) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.balanceDueLabel, ":"] }), " ", _jsx("span", { className: "font-mono font-semibold", children: formatAmount(invoice.balanceDueCents, invoice.currency) })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.finance.detailSections.datesLinksTitle }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.issueDateLabel, ":"] }), " ", _jsx("span", { children: invoice.issueDate })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.dueDateLabel, ":"] }), " ", _jsx("span", { children: invoice.dueDate })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.bookingLabel, ":"] }), " ", _jsx("button", { type: "button", className: "text-primary underline", onClick: onOpenBooking, children: messages.finance.detailSections.viewBooking })] }), invoice.personId ? (_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.personLabel, ":"] }), " ", _jsx("span", { className: "font-mono text-xs", children: invoice.personId })] })) : null, invoice.organizationId ? (_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.organizationLabel, ":"] }), " ", _jsx("span", { className: "font-mono text-xs", children: invoice.organizationId })] })) : null, invoice.notes ? (_jsxs("div", { className: "mt-2 border-t pt-3", children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.notesLabel, ":"] }), _jsx("p", { className: "mt-1 whitespace-pre-wrap", children: invoice.notes })] })) : null, _jsxs("div", { className: "mt-2 border-t pt-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.createdLabel, ":"] }), " ", _jsx("span", { children: new Date(invoice.createdAt).toLocaleDateString(resolvedLocale) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.finance.detailSections.updatedLabel, ":"] }), " ", _jsx("span", { children: new Date(invoice.updatedAt).toLocaleDateString(resolvedLocale) })] })] })] })] })] }));
+}
+export function InvoiceLineItemsCard({ lineItems, onCreate, onEdit, onDelete, }) {
+    const messages = useOperatorAdminMessages();
+    const noValue = messages.finance.detailSections.noValue;
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: messages.finance.detailSections.lineItemsTitle }), _jsxs(Button, { size: "sm", onClick: onCreate, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.finance.detailSections.addLineItem] })] }), _jsx(CardContent, { children: lineItems.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.finance.detailSections.noLineItems })) : (_jsx("div", { className: "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: messages.finance.detailSections.descriptionColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.detailSections.quantityColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.detailSections.unitPriceColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.totalColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.detailSections.taxRateColumn }), _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 font-mono", children: (lineItem.unitPriceCents / 100).toFixed(2) }), _jsx("td", { className: "p-2 text-right font-mono", children: (lineItem.totalCents / 100).toFixed(2) }), _jsx("td", { className: "p-2 text-right", children: lineItem.taxRate != null
+                                                ? `${(lineItem.taxRate / 100).toFixed(2)}%`
+                                                : noValue }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => onEdit(lineItem), className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => onDelete(lineItem.id), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, lineItem.id))) })] }) })) })] }));
+}
+export function InvoicePaymentsCard({ payments, onCreate, canCreate = true, }) {
+    const messages = useOperatorAdminMessages();
+    const noValue = messages.finance.detailSections.noValue;
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: messages.finance.detailSections.paymentsTitle }), canCreate ? (_jsxs(Button, { size: "sm", onClick: onCreate, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.finance.detailSections.recordPayment] })) : null] }), _jsx(CardContent, { children: payments.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.finance.detailSections.noPayments })) : (_jsx("div", { className: "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: messages.finance.dateColumn }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.finance.detailSections.methodColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.amountColumn }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.finance.statusColumn }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.finance.referenceColumn })] }) }), _jsx("tbody", { children: payments.map((payment) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: payment.paymentDate }), _jsx("td", { className: "p-2 capitalize", children: getPaymentMethodLabel(messages, payment.paymentMethod) }), _jsxs("td", { className: "p-2 text-right font-mono", children: [_jsx("div", { children: formatAmount(payment.amountCents, payment.currency) }), payment.baseAmountCents !== null && payment.baseCurrency ? (_jsx("div", { className: "text-muted-foreground text-xs", children: formatAmount(payment.baseAmountCents, payment.baseCurrency) })) : null] }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: paymentStatusVariant[payment.status] ?? "secondary", className: "text-xs capitalize", children: getPaymentStatusLabel(messages, payment.status) }) }), _jsx("td", { className: "p-2", children: payment.referenceNumber ?? noValue })] }, payment.id))) })] }) })) })] }));
+}
+export function InvoiceCreditNotesCard({ creditNotes, onCreate, }) {
+    const messages = useOperatorAdminMessages();
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: messages.finance.detailSections.creditNotesTitle }), _jsxs(Button, { size: "sm", onClick: onCreate, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.finance.detailSections.addCreditNote] })] }), _jsx(CardContent, { children: creditNotes.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.finance.detailSections.noCreditNotes })) : (_jsx("div", { className: "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: messages.finance.detailSections.creditNoteNumberColumn }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.finance.amountColumn }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.finance.detailSections.reasonColumn }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.finance.statusColumn })] }) }), _jsx("tbody", { children: creditNotes.map((creditNote) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: creditNote.creditNoteNumber }), _jsx("td", { className: "p-2 text-right font-mono", children: formatAmount(creditNote.amountCents, creditNote.currency) }), _jsx("td", { className: "p-2", children: creditNote.reason }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: creditNoteStatusVariant[creditNote.status] ?? "secondary", className: "text-xs capitalize", children: getCreditNoteStatusLabel(messages, creditNote.status) }) })] }, creditNote.id))) })] }) })) })] }));
+}
+export function InvoiceAttachmentsCard({ invoiceId }) {
+    const messages = useOperatorAdminMessages().finance.detailSections;
+    const { resolvedLocale } = useLocale();
+    const { data } = useInvoiceAttachments(invoiceId);
+    const attachments = data?.data ?? [];
+    // Download links hit the admin API directly — base URL from the shared
+    // finance provider context, not a host-app env helper.
+    const { baseUrl } = useVoyantFinanceContext();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }), messages.attachmentsTitle, attachments.length > 0 ? (_jsx(Badge, { variant: "outline", className: "text-[10px]", children: attachments.length })) : null] }) }), _jsx(CardContent, { className: "p-0", children: attachments.length === 0 ? (_jsx("p", { className: "px-6 py-6 text-center text-muted-foreground text-sm", children: messages.noAttachments })) : (_jsx("ul", { className: "divide-y", children: attachments.map((attachment) => (_jsxs("li", { className: "flex items-center justify-between gap-3 px-6 py-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: attachment.name }), _jsx("p", { className: "text-muted-foreground text-xs", children: formatAttachmentMeta(attachment, resolvedLocale) })] }), _jsxs("a", { href: `${baseUrl}/v1/admin/finance/invoice-attachments/${attachment.id}/download`, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": messages.downloadAttachment, children: [_jsx(Download, { className: "h-3.5 w-3.5" }), messages.downloadAttachment] })] }, attachment.id))) })) })] }));
+}
+function formatAttachmentMeta(attachment, locale) {
+    const parts = [];
+    if (attachment.mimeType)
+        parts.push(attachment.mimeType);
+    if (typeof attachment.fileSize === "number")
+        parts.push(formatBytes(attachment.fileSize));
+    if (attachment.createdAt) {
+        try {
+            parts.push(new Date(attachment.createdAt).toLocaleDateString(locale));
+        }
+        catch {
+            // ignore — locale parse failures fall through silently
+        }
+    }
+    return parts.join(" · ");
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function InvoiceNotesCard({ notes, noteContent, isAdding, onNoteChange, onAddNote, }) {
+    const messages = useOperatorAdminMessages();
+    const { resolvedLocale } = useLocale();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.finance.detailSections.notesTitle }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Textarea, { value: noteContent, onChange: (event) => onNoteChange(event.target.value), placeholder: messages.finance.detailSections.addInternalNotePlaceholder }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { disabled: isAdding || !noteContent.trim(), onClick: onAddNote, children: messages.finance.detailSections.addNote }) })] }), notes.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.finance.detailSections.noNotes })) : (_jsx("div", { className: "space-y-3", children: notes.map((note) => (_jsxs("div", { className: "rounded border p-3", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm", children: note.content }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: new Date(note.createdAt).toLocaleString(resolvedLocale) })] }, note.id))) }))] })] }));
+}