@voyantjs/bookings-ui 0.108.1 → 0.109.0

package/dist/admin/booking-contract-dialog.d.ts

@@ -0,0 +1,22 @@
+export interface BookingContractDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    bookingNumber?: string | null;
+    onSuccess?: () => void;
+}
+/**
+ * "Add contract" dialog for a booking. Two modes:
+ *
+ *   - **Generate** (default): hits the server-side preview branch of
+ *     `/v1/admin/bookings/:id/generate-contract` (which runs the same
+ *     template + variable build the customer would see at checkout)
+ *     and renders the HTML in a sandboxed iframe. Confirm fires the
+ *     full generate, which creates the contract row + persists the PDF.
+ *
+ *   - **Upload**: operator picks a pre-signed PDF (e.g. countersigned
+ *     copy). The dialog creates a `signed`-status contract row and
+ *     attaches the uploaded file via the legal attachment upload route.
+ */
+export declare function BookingContractDialog({ open, onOpenChange, bookingId, bookingNumber, onSuccess, }: BookingContractDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-contract-dialog.d.ts.map

package/dist/admin/booking-contract-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-contract-dialog.d.ts","sourceRoot":"","sources":["../../src/admin/booking-contract-dialog.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,GACV,EAAE,0BAA0B,2CA8N5B"}

package/dist/admin/booking-contract-dialog.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { useOperatorAdminMessages } from "@voyantjs/admin";
+import { useBookingContractGenerationMutation } from "@voyantjs/bookings-react";
+import { legalQueryKeys, useLegalContractAttachmentMutation, useLegalContractMutation, } from "@voyantjs/legal-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, Skeleton, } from "@voyantjs/ui/components";
+import { FileText, Loader2, Paperclip, X } from "lucide-react";
+import { useEffect, useState } from "react";
+/**
+ * "Add contract" dialog for a booking. Two modes:
+ *
+ *   - **Generate** (default): hits the server-side preview branch of
+ *     `/v1/admin/bookings/:id/generate-contract` (which runs the same
+ *     template + variable build the customer would see at checkout)
+ *     and renders the HTML in a sandboxed iframe. Confirm fires the
+ *     full generate, which creates the contract row + persists the PDF.
+ *
+ *   - **Upload**: operator picks a pre-signed PDF (e.g. countersigned
+ *     copy). The dialog creates a `signed`-status contract row and
+ *     attaches the uploaded file via the legal attachment upload route.
+ */
+export function BookingContractDialog({ open, onOpenChange, bookingId, bookingNumber, onSuccess, }) {
+    const t = useOperatorAdminMessages().bookings.detail.contractDialog;
+    const queryClient = useQueryClient();
+    const { create: createContract } = useLegalContractMutation();
+    const { upload: uploadAttachment } = useLegalContractAttachmentMutation();
+    const { preview, generate } = useBookingContractGenerationMutation(bookingId);
+    const [mode, setMode] = useState("generate");
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    // Upload form state
+    const [title, setTitle] = useState("");
+    const [file, setFile] = useState(null);
+    // Reset on open. Generate is the leading mode so the preview fetch
+    // kicks off immediately.
+    const resetPreview = preview.reset;
+    useEffect(() => {
+        if (!open)
+            return;
+        setMode("generate");
+        setTitle("");
+        setFile(null);
+        setError(null);
+        setUploading(false);
+        resetPreview();
+    }, [open, resetPreview]);
+    // Fetch preview HTML every time the dialog opens (or the mode flips
+    // back to Generate). The preview reflects current booking + template
+    // state so re-fetching is intentional.
+    const fetchPreview = preview.mutate;
+    useEffect(() => {
+        if (!open || mode !== "generate")
+            return;
+        fetchPreview();
+    }, [open, mode, fetchPreview]);
+    const handleGenerate = async () => {
+        setError(null);
+        try {
+            await generate.mutateAsync({});
+            await queryClient.invalidateQueries({ queryKey: legalQueryKeys.contracts() });
+            onSuccess?.();
+            onOpenChange(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    const handleUpload = async () => {
+        if (!file) {
+            setError(t.uploadFileRequired);
+            return;
+        }
+        setUploading(true);
+        setError(null);
+        try {
+            const fallbackTitle = title.trim() ||
+                (bookingNumber
+                    ? `Contract ${bookingNumber}`
+                    : `Contract for booking ${bookingId.slice(-8)}`);
+            const created = await createContract.mutateAsync({
+                scope: "customer",
+                status: "signed",
+                title: fallbackTitle,
+                bookingId,
+                metadata: { uploadedByOperator: true },
+            });
+            await uploadAttachment.mutateAsync({
+                contractId: created.id,
+                input: { file, kind: "document", name: file.name },
+            });
+            onSuccess?.();
+            onOpenChange(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const submitting = generate.isPending || uploading;
+    const previewReady = preview.data != null;
+    const canSubmit = mode === "generate" ? previewReady && !submitting : file != null && !submitting;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "w-full! max-w-4xl! gap-0 p-0", children: [_jsxs(DialogHeader, { className: "shrink-0 border-b px-6 py-4", children: [_jsx(DialogTitle, { children: t.title }), _jsx(DialogDescription, { children: t.description })] }), _jsx("div", { className: "max-h-[70vh] overflow-y-auto", children: _jsxs("div", { className: "flex flex-col gap-4 px-6 py-5", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.modeLabel }), _jsx(SegmentedChoice, { value: mode, onChange: setMode, options: [
+                                            { value: "generate", label: t.modeGenerate },
+                                            { value: "upload", label: t.modeUpload },
+                                        ] })] }), mode === "generate" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.previewLabel }), _jsx("div", { className: "overflow-hidden rounded-md border bg-muted/30", children: preview.isPending ? (_jsxs("div", { className: "flex flex-col gap-3 p-6", children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" }), _jsx(Skeleton, { className: "h-4 w-4/5" }), _jsx(Skeleton, { className: "h-4 w-full" })] })) : preview.isError ? (_jsxs("p", { className: "p-6 text-destructive text-sm", children: [t.previewErrorPrefix, " ", preview.error instanceof Error ? preview.error.message : t.previewFailed] })) : preview.data ? (_jsx("iframe", { title: preview.data.templateName || t.previewIframeFallback, srcDoc: wrapPreviewHtml(preview.data.html), sandbox: "", className: "h-[60vh] w-full border-0 bg-white" })) : null }), preview.data?.templateName ? (_jsxs("p", { className: "text-muted-foreground text-xs", children: [t.previewTemplateLabel, " ", preview.data.templateName] })) : null] })) : (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.uploadTitleLabel }), _jsx(Input, { value: title, onChange: (e) => setTitle(e.target.value), placeholder: bookingNumber ? `Contract ${bookingNumber}` : t.uploadTitlePlaceholder }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.uploadTitleHint })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.uploadFileLabel }), _jsx("input", { type: "file", accept: "application/pdf", onChange: (e) => {
+                                                    const next = e.target.files?.[0] ?? null;
+                                                    setFile(next);
+                                                }, className: "block w-full text-sm file:mr-3 file:rounded-md file:border file:bg-muted file:px-3 file:py-1.5 file:text-sm file:font-medium hover:file:bg-muted/70" }), file ? (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Paperclip, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: file.name })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => setFile(null), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })) : null] })] })), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: submitting, children: t.cancel }), _jsxs(Button, { type: "button", disabled: !canSubmit, onClick: () => {
+                                if (mode === "generate") {
+                                    void handleGenerate();
+                                }
+                                else {
+                                    void handleUpload();
+                                }
+                            }, children: [submitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, mode === "generate" ? (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "mr-1.5 h-3.5 w-3.5" }), t.generateAction] })) : (t.uploadAction)] })] })] }) }));
+}
+function SegmentedChoice({ value, onChange, options, }) {
+    return (_jsx("div", { className: "flex w-full rounded-md border bg-background p-0.5", children: options.map((opt) => {
+            const active = opt.value === value;
+            return (_jsx("button", { type: "button", onClick: () => onChange(opt.value), className: "flex-1 rounded-sm px-3 py-1.5 text-sm font-medium transition-colors " +
+                    (active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"), children: opt.label }, opt.value));
+        }) }));
+}
+/**
+ * Wrap the rendered template body in a light-theme HTML document so
+ * the iframe doesn't inherit the dark dashboard background. Mirrors
+ * the storefront's contract-preview wrapper to keep the WYSIWYG
+ * promise honest.
+ */
+function wrapPreviewHtml(body) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<style>
+  :root { color-scheme: light; }
+  html, body { margin: 0; background: #ffffff; color: #111827; }
+  body {
+    padding: 1.5rem 2rem;
+    font-family: ui-serif, Georgia, "Times New Roman", serif;
+    font-size: 15px;
+    line-height: 1.6;
+  }
+  h1, h2, h3 { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; }
+  h1 { font-size: 1.5rem; margin: 0 0 1rem; }
+  h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
+  p { margin: 0.5rem 0; }
+  ul, ol { padding-left: 1.5rem; }
+  strong { color: #0f172a; }
+  a { color: #2563eb; }
+  table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
+  th, td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
+  th { background: #f9fafb; }
+</style>
+</head>
+<body>${body}</body>
+</html>`;
+}

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

@@ -0,0 +1,123 @@
+import { type BookingRecord } from "@voyantjs/bookings-react";
+import { type ReactNode } from "react";
+import { type BookingDetailPageSlots, type BookingDetailTabValue } from "../components/booking-detail-page.js";
+import type { BookingPaymentsSummaryRow } from "../components/booking-payments-summary.js";
+/**
+ * Widget slot rendered as the booking detail page's Invoices tab
+ * (packaged-admin RFC §4.7 cycle resolution): `@voyantjs/finance-ui` depends
+ * on this package, so the host cannot import the finance-owned invoices card
+ * directly — instead finance's admin extension contributes a widget targeting
+ * this slot and the host mounts the tab whenever a contribution exists.
+ * Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export declare const bookingDetailInvoicesTabSlot = "booking.details.invoices-tab";
+/**
+ * Widget slot rendered at the top of the booking detail page's Finance tab
+ * (same §4.7 cycle resolution as {@link bookingDetailInvoicesTabSlot}).
+ * `@voyantjs/finance-ui` contributes its pending payment-sessions card here.
+ * Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export declare const bookingDetailFinanceStartSlot = "booking.details.finance-start";
+/**
+ * Widget slot rendered at the bottom of the booking detail page's Finance
+ * tab. `@voyantjs/finance-ui` contributes its payment-policy override card
+ * here. Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export declare const bookingDetailFinanceEndSlot = "booking.details.finance-end";
+/**
+ * Render context handed to the host's app-supplied slots AND to widget
+ * contributions targeting {@link bookingDetailInvoicesTabSlot}. Carries the
+ * booking plus the host-computed payment aggregates and the invoice-sheet
+ * opener so contributed cards can participate without re-deriving them.
+ */
+export interface BookingDetailHostSlotContext {
+    booking: BookingRecord;
+    /** Customer payments summed across non-credit-note, non-draft invoices. */
+    paidAmountCents: number | null;
+    /**
+     * Localized "Booking is fully paid" reason when nothing is left to pay,
+     * else `null`. The host already uses it for the Record payment / Add
+     * schedule buttons; payment-link slots reuse it for their own gating.
+     */
+    fullyPaidReason: string | null;
+    /** Open an invoice in the host's side sheet (stays on the booking page). */
+    openInvoiceSheet: (invoiceId: string) => void;
+    /**
+     * Opens the host app's "Generate payment link" flow (a dialog the app
+     * owns — `@voyantjs/checkout-ui` depends on this package, so the host
+     * cannot import it without a cycle). Forwarded from
+     * {@link BookingDetailHostProps.onGenerateLink}; `undefined` when the app
+     * didn't wire one, in which case payment-link widgets hide the button.
+     */
+    onGenerateLink: (() => void) | undefined;
+}
+export type BookingDetailHostSlot = (context: BookingDetailHostSlotContext) => ReactNode;
+/**
+ * App-supplied extension points. The host owns everything package-clean
+ * (the Documents tab, the action-ledger timeline merge, the finance-tab
+ * widget slots); these slots remain for app-local additions on top.
+ */
+export interface BookingDetailHostSlots {
+    /** Top of the Finance tab, rendered before any widget contributions. */
+    financeStart?: BookingDetailHostSlot;
+    /** Bottom of the Finance tab, rendered before any widget contributions. */
+    financeEnd?: BookingDetailHostSlot;
+    /** Mounts a dedicated Invoices tab between Payments and Suppliers. */
+    invoicesTab?: {
+        label?: string;
+        content: BookingDetailHostSlot;
+    };
+    /** Replaces the Documents tab content (default: {@link BookingDocumentsTable}). */
+    documents?: BookingDetailHostSlot;
+    /** Extra events merged into the Activity-tab timeline (the host already
+     *  merges the booking's central action-ledger entries). */
+    activityExtraEvents?: BookingDetailPageSlots["activityExtraEvents"];
+    /** Rendered below the activity timeline events, after the host's
+     *  action-ledger pager. */
+    activityTimelineFooter?: ReactNode;
+}
+export interface BookingDetailHostProps {
+    id: string;
+    /** Controlled tab value; the route file mirrors it into the URL. */
+    activeTab?: BookingDetailTabValue;
+    onTabChange?: (tab: BookingDetailTabValue) => void;
+    /**
+     * Opens the app's record-payment flow (a dialog owned by the host app —
+     * the payment dialogs live app-side because `@voyantjs/finance-ui`
+     * depends on this package, so importing it here would be a cycle).
+     */
+    onRecordPayment?: () => void;
+    /** Opens the app's record-payment flow pre-filled with the row. */
+    onEditPayment?: (row: BookingPaymentsSummaryRow) => void;
+    /**
+     * Opens the app's "Generate payment link" flow (a dialog owned by the
+     * host app — `@voyantjs/checkout-ui` depends on this package, so
+     * importing it here would be a cycle). Forwarded to slot/widget
+     * contributions via {@link BookingDetailHostSlotContext.onGenerateLink}.
+     */
+    onGenerateLink?: () => void;
+    slots?: BookingDetailHostSlots;
+}
+/**
+ * Packaged admin host for the canonical `BookingDetailPage` (packaged-admin
+ * RFC Phase 3). Owns everything package-clean:
+ *
+ *   - Cross-route links resolve through semantic destinations (RFC §4.7):
+ *     `booking.list`, `person.detail`, `organization.detail`,
+ *     `product.detail`, `availabilitySlot.detail`, `payment.detail`,
+ *     `invoice.detail` — no host route tree import.
+ *   - Admin chrome breadcrumbs (`useAdminBreadcrumbs`).
+ *   - Admin widget extension points: the `booking.details.header` and
+ *     `booking.details.after-summary` slots render through the shared
+ *     `AdminWidgetSlotRenderer`, which reads the workspace shell's
+ *     `AdminExtensionsProvider` context.
+ *   - Paid-amount aggregation across the booking's invoices and the
+ *     derived fully-paid disabled reasons.
+ *   - Payment row delete (finance-react mutation) and the in-place
+ *     invoice sheet ({@link BookingInvoiceSheet}).
+ *
+ * App-local cards without package-level data access stay injectable via
+ * {@link BookingDetailHostSlots}.
+ */
+export declare function BookingDetailHost({ id, activeTab, onTabChange, onRecordPayment, onEditPayment, onGenerateLink, slots, }: BookingDetailHostProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-detail-host.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-detail-host.d.ts","sourceRoot":"","sources":["../../src/admin/booking-detail-host.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,aAAa,EAAc,MAAM,0BAA0B,CAAA;AAGzE,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AAK1F;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,iCAAiC,CAAA;AAE1E;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,kCAAkC,CAAA;AAE5E;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,gCAAgC,CAAA;AAExE;;;;;GAKG;AACH,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,aAAa,CAAA;IACtB,2EAA2E;IAC3E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,4EAA4E;IAC5E,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C;;;;;;OAMG;IACH,cAAc,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;CACzC;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,4BAA4B,KAAK,SAAS,CAAA;AAExF;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC,wEAAwE;IACxE,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,2EAA2E;IAC3E,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC,sEAAsE;IACtE,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,qBAAqB,CAAA;KAAE,CAAA;IAChE,mFAAmF;IACnF,SAAS,CAAC,EAAE,qBAAqB,CAAA;IACjC;+DAC2D;IAC3D,mBAAmB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAA;IACnE;+BAC2B;IAC3B,sBAAsB,CAAC,EAAE,SAAS,CAAA;CACnC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,oEAAoE;IACpE,SAAS,CAAC,EAAE,qBAAqB,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAClD;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,mEAAmE;IACnE,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,IAAI,CAAA;IACxD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAA;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,KAAK,GACN,EAAE,sBAAsB,2CA0KxB"}

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

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdminWidgetSlotRenderer, resolveAdminWidgets, useAdminBreadcrumbs, useAdminExtensions, useAdminHref, useAdminNavigate, useLocale, useOperatorAdminMessages, } from "@voyantjs/admin";
+import { useBooking } from "@voyantjs/bookings-react";
+import { useInvoices, usePaymentMutation } from "@voyantjs/finance-react";
+import { Sheet, SheetContent } from "@voyantjs/ui/components/sheet";
+import { useState } from "react";
+import { BookingDetailPage, } from "../components/booking-detail-page.js";
+import { BookingDocumentsTable } from "./booking-documents-table.js";
+import { BookingInvoiceSheet } from "./booking-invoice-sheet.js";
+import { useBookingActionLedgerEvents } from "./use-booking-action-ledger-events.js";
+/**
+ * Widget slot rendered as the booking detail page's Invoices tab
+ * (packaged-admin RFC §4.7 cycle resolution): `@voyantjs/finance-ui` depends
+ * on this package, so the host cannot import the finance-owned invoices card
+ * directly — instead finance's admin extension contributes a widget targeting
+ * this slot and the host mounts the tab whenever a contribution exists.
+ * Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export const bookingDetailInvoicesTabSlot = "booking.details.invoices-tab";
+/**
+ * Widget slot rendered at the top of the booking detail page's Finance tab
+ * (same §4.7 cycle resolution as {@link bookingDetailInvoicesTabSlot}).
+ * `@voyantjs/finance-ui` contributes its pending payment-sessions card here.
+ * Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export const bookingDetailFinanceStartSlot = "booking.details.finance-start";
+/**
+ * Widget slot rendered at the bottom of the booking detail page's Finance
+ * tab. `@voyantjs/finance-ui` contributes its payment-policy override card
+ * here. Widgets receive {@link BookingDetailHostSlotContext} as props.
+ */
+export const bookingDetailFinanceEndSlot = "booking.details.finance-end";
+/**
+ * Packaged admin host for the canonical `BookingDetailPage` (packaged-admin
+ * RFC Phase 3). Owns everything package-clean:
+ *
+ *   - Cross-route links resolve through semantic destinations (RFC §4.7):
+ *     `booking.list`, `person.detail`, `organization.detail`,
+ *     `product.detail`, `availabilitySlot.detail`, `payment.detail`,
+ *     `invoice.detail` — no host route tree import.
+ *   - Admin chrome breadcrumbs (`useAdminBreadcrumbs`).
+ *   - Admin widget extension points: the `booking.details.header` and
+ *     `booking.details.after-summary` slots render through the shared
+ *     `AdminWidgetSlotRenderer`, which reads the workspace shell's
+ *     `AdminExtensionsProvider` context.
+ *   - Paid-amount aggregation across the booking's invoices and the
+ *     derived fully-paid disabled reasons.
+ *   - Payment row delete (finance-react mutation) and the in-place
+ *     invoice sheet ({@link BookingInvoiceSheet}).
+ *
+ * App-local cards without package-level data access stay injectable via
+ * {@link BookingDetailHostSlots}.
+ */
+export function BookingDetailHost({ id, activeTab, onTabChange, onRecordPayment, onEditPayment, onGenerateLink, slots, }) {
+    const detailMessages = useOperatorAdminMessages().bookings.detail;
+    const { resolvedLocale } = useLocale();
+    const resolveHref = useAdminHref();
+    const navigateTo = useAdminNavigate();
+    // Finance (or any extension that may not import this package) contributes
+    // the Invoices-tab content as widget contributions; the tab mounts whenever
+    // an app slot or at least one widget targets it.
+    const adminExtensions = useAdminExtensions();
+    const hasInvoicesTabWidgets = resolveAdminWidgets({ slot: bookingDetailInvoicesTabSlot, extensions: adminExtensions })
+        .length > 0;
+    const [viewingInvoiceId, setViewingInvoiceId] = useState(null);
+    const { remove: removePayment } = usePaymentMutation();
+    // Mirror the booking fetch so the admin chrome can render breadcrumbs
+    // without prop-drilling through the canonical page. TanStack Query
+    // dedupes by key, so this doesn't issue a second network request.
+    const { data: bookingData } = useBooking(id);
+    const booking = bookingData?.data;
+    // Sum customer payments across this booking's non-credit-note,
+    // non-draft invoices.
+    const { data: invoicesData } = useInvoices({ bookingId: id, limit: 20 });
+    const paidAmountCents = invoicesData?.data
+        ? invoicesData.data
+            .filter((inv) => {
+            const type = inv.invoiceType ?? "invoice";
+            return type !== "credit_note" && inv.status !== "draft";
+        })
+            .reduce((sum, inv) => sum + (inv.paidCents ?? 0), 0)
+        : null;
+    const fullyPaidReason = booking &&
+        booking.sellAmountCents != null &&
+        paidAmountCents != null &&
+        paidAmountCents >= booking.sellAmountCents
+        ? detailMessages.generateLinkFullyPaid
+        : null;
+    const bookingsHref = resolveHref("booking.list", {});
+    useAdminBreadcrumbs(booking
+        ? [
+            { label: detailMessages.breadcrumbBookings, href: bookingsHref },
+            { label: booking.bookingNumber },
+        ]
+        : [{ label: detailMessages.breadcrumbBookings, href: bookingsHref }]);
+    const slotContext = (b) => ({
+        booking: b,
+        paidAmountCents,
+        fullyPaidReason,
+        openInvoiceSheet: setViewingInvoiceId,
+        onGenerateLink,
+    });
+    // Central action-ledger entries merged into the Activity timeline —
+    // package-owned since the feed ships from `@voyantjs/bookings-react`.
+    const { events: actionLedgerEvents, footer: actionLedgerFooter } = useBookingActionLedgerEvents(id);
+    const activityExtraEvents = slots?.activityExtraEvents
+        ? [...actionLedgerEvents, ...slots.activityExtraEvents]
+        : actionLedgerEvents;
+    return (_jsxs(_Fragment, { children: [_jsx(BookingDetailPage, { id: id, locale: resolvedLocale, hideBreadcrumb: true, activeTab: activeTab, onTabChange: onTabChange, onBack: () => navigateTo("booking.list", {}), onPersonOpen: (personId) => navigateTo("person.detail", { personId }), onOrganizationOpen: (organizationId) => navigateTo("organization.detail", { organizationId }), onRecordPayment: onRecordPayment ? () => onRecordPayment() : undefined, recordPaymentDisabledReason: fullyPaidReason, addScheduleDisabledReason: fullyPaidReason, paidAmountCents: paidAmountCents, onItemResourceOpen: (kind, resourceId) => {
+                    if (kind === "product") {
+                        navigateTo("product.detail", { productId: resourceId });
+                        return;
+                    }
+                    if (kind === "availabilitySlot") {
+                        navigateTo("availabilitySlot.detail", { slotId: resourceId });
+                    }
+                }, onInvoiceOpen: (invoiceId) => setViewingInvoiceId(invoiceId), onViewPayment: (row) => navigateTo("payment.detail", { paymentId: row.id }), onEditPayment: onEditPayment, onDeletePayment: async (row) => {
+                    await removePayment.mutateAsync(row.id);
+                }, slots: {
+                    header: (b) => (_jsx(AdminWidgetSlotRenderer, { slot: "booking.details.header", props: { booking: b } })),
+                    afterSummary: (b) => (_jsx(AdminWidgetSlotRenderer, { slot: "booking.details.after-summary", props: { booking: b } })),
+                    financeStart: (b) => (_jsxs(_Fragment, { children: [slots?.financeStart?.(slotContext(b)), _jsx(AdminWidgetSlotRenderer, { slot: bookingDetailFinanceStartSlot, props: { ...slotContext(b) } })] })),
+                    financeEnd: (b) => (_jsxs(_Fragment, { children: [slots?.financeEnd?.(slotContext(b)), _jsx(AdminWidgetSlotRenderer, { slot: bookingDetailFinanceEndSlot, props: { ...slotContext(b) } })] })),
+                    invoicesTab: slots?.invoicesTab || hasInvoicesTabWidgets
+                        ? {
+                            label: slots?.invoicesTab?.label,
+                            content: (b) => (_jsxs(_Fragment, { children: [slots?.invoicesTab?.content(slotContext(b)), _jsx(AdminWidgetSlotRenderer, { slot: bookingDetailInvoicesTabSlot, props: { ...slotContext(b) } })] })),
+                        }
+                        : undefined,
+                    documents: slots?.documents
+                        ? (b) => slots.documents?.(slotContext(b))
+                        : () => _jsx(BookingDocumentsTable, { bookingId: id }),
+                    activityExtraEvents,
+                    activityTimelineFooter: actionLedgerFooter || slots?.activityTimelineFooter ? (_jsxs(_Fragment, { children: [actionLedgerFooter, slots?.activityTimelineFooter] })) : undefined,
+                } }), _jsx(Sheet, { open: Boolean(viewingInvoiceId), onOpenChange: (open) => {
+                    if (!open)
+                        setViewingInvoiceId(null);
+                }, children: _jsx(SheetContent, { side: "right", className: "w-full! max-w-5xl!", children: viewingInvoiceId ? (_jsx(BookingInvoiceSheet, { invoiceId: viewingInvoiceId, onOpenInvoice: (invoiceId) => {
+                            setViewingInvoiceId(null);
+                            navigateTo("invoice.detail", { invoiceId });
+                        } })) : null }) })] }));
+}

package/dist/admin/booking-detail-skeleton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Route-level placeholder for the booking detail page. Mirrors the
+ * canonical `BookingDetailPage` layout (header row, summary card, tab
+ * bar, two list cards) so the pending state doesn't shift the page.
+ */
+export declare function BookingDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-detail-skeleton.d.ts.map

package/dist/admin/booking-detail-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-detail-skeleton.d.ts","sourceRoot":"","sources":["../../src/admin/booking-detail-skeleton.tsx"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,qBAAqB,4CAUpC"}

package/dist/admin/booking-detail-skeleton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from "@voyantjs/ui/components/card";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+/**
+ * Route-level placeholder for the booking detail page. Mirrors the
+ * canonical `BookingDetailPage` layout (header row, summary card, tab
+ * bar, two list cards) so the pending state doesn't shift the page.
+ */
+export function BookingDetailSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(Header, {}), _jsx(SummaryCard, {}), _jsx(TabsBar, {}), _jsx(ListCard, { titleWidth: "w-32", rows: 3 }), _jsx(ListCard, { titleWidth: "w-28", rows: 2 })] }));
+}
+function Header() {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-7 w-44" }), _jsx(Skeleton, { className: "h-5 w-20 rounded-full" })] }), _jsx(Skeleton, { className: "h-8 w-8 rounded-md" })] }));
+}
+function SummaryCard() {
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "grid grid-cols-2 gap-6 py-6 sm:grid-cols-4", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3 w-20" }), _jsx(Skeleton, { className: "h-5 w-28" }), _jsx(Skeleton, { className: "h-3 w-12" })] }, i))) }) }));
+}
+function TabsBar() {
+    const widths = ["w-20", "w-20", "w-16", "w-20", "w-24", "w-16"];
+    return (_jsx("div", { className: "flex h-9 w-fit items-center gap-1 rounded-lg bg-muted p-[3px]", children: widths.map((w, i) => (_jsx(Skeleton, { className: `h-7 rounded-md ${w}` }, i))) }));
+}
+function ListCard({ titleWidth, rows }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(Skeleton, { className: `h-5 ${titleWidth}` }), _jsx(Skeleton, { className: "h-8 w-24" })] }), _jsx(CardContent, { className: "space-y-2", children: Array.from({ length: rows }).map((_, i) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-3 w-32" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-16" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] })] }, i))) })] }));
+}

package/dist/admin/booking-documents-table.d.ts

@@ -0,0 +1,13 @@
+export interface BookingDocumentsTableProps {
+    bookingId: string;
+}
+/**
+ * Unified Documents tab for a booking — flattens auto-generated legal
+ * contracts and per-traveler documents (passport, visa, insurance…) into
+ * a single DataTable that matches the rest of the booking detail tabs.
+ * Contracts render first (canonical booking docs), traveler-uploaded
+ * documents below; each contract row owns its own attachments fetch so
+ * we don't need a join endpoint server-side.
+ */
+export declare function BookingDocumentsTable({ bookingId, }: BookingDocumentsTableProps): React.ReactElement;
+//# sourceMappingURL=booking-documents-table.d.ts.map

package/dist/admin/booking-documents-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-documents-table.d.ts","sourceRoot":"","sources":["../../src/admin/booking-documents-table.tsx"],"names":[],"mappings":"AA8CA,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;CAClB;AAmDD;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,GACV,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CA6MjD"}