@voyantjs/finance-ui 0.81.14 → 0.81.16

package/dist/components/booking-invoice-dialog.d.ts

@@ -0,0 +1,44 @@
+import { type InvoiceRecord } from "@voyantjs/finance-react";
+export interface BookingInvoiceDialogUpload {
+    storageKey: string;
+    mimeType: string;
+    fileSize: number;
+}
+export interface BookingInvoiceDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    /** Pre-fill the currency from the booking's sell currency. */
+    defaultCurrency?: string;
+    /** Pre-fill subtotal/total from the booking's sell amount (in cents). */
+    defaultAmountCents?: number | null;
+    /**
+     * Upload a file's bytes to durable storage and return its location so
+     * the dialog can attach it to the newly-created invoice. When omitted,
+     * the attachments dropzone is hidden — the SmartBill-off branch can
+     * still create the invoice, it just won't surface uploads. The
+     * template owns the upload endpoint (e.g. `/api/v1/uploads`) so the
+     * dialog stays transport-agnostic.
+     */
+    uploadFile?: (file: File) => Promise<BookingInvoiceDialogUpload>;
+    /**
+     * Tax % to pre-fill on the schedule-derived line item. The operator
+     * template resolves this from the booking's primary product (e.g. via
+     * `useBookingTaxPreview`) so the dialog mirrors the rate the server
+     * would apply server-side at issuance. Defaults to 0 when omitted.
+     */
+    defaultScheduleTaxRatePercent?: number;
+    onSuccess?: (invoice: InvoiceRecord) => void;
+}
+/**
+ * Modal invoice creator scoped to a single booking. Operators can pick
+ * between a free-form ("custom") invoice and one derived from an
+ * unpaid payment schedule (amounts + due date are locked to the
+ * schedule). Toggles control whether the new invoice is pushed to
+ * SmartBill on issue, whether a fully-paid `payments` row is created
+ * alongside it, and (when sync is off) lets the operator attach
+ * supporting documents.
+ */
+export declare function BookingInvoiceDialog({ open, onOpenChange, bookingId, defaultCurrency, // i18n-literal-ok domain default currency
+defaultAmountCents, uploadFile, defaultScheduleTaxRatePercent, onSuccess, }: BookingInvoiceDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-invoice-dialog.d.ts.map

package/dist/components/booking-invoice-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-invoice-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-invoice-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,yBAAyB,CAAA;AAqChC,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,0BAA0B,CAAC,CAAA;IAChE;;;;;OAKG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CAC7C;AAsDD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAuB,EAAE,0CAA0C;AACnE,kBAAyB,EACzB,UAAU,EACV,6BAAiC,EACjC,SAAS,GACV,EAAE,yBAAyB,2CAuqB3B"}

package/dist/components/booking-invoice-dialog.js

@@ -0,0 +1,349 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingPaymentSchedules, useInvoiceMutation, useVoyantFinanceContext, } from "@voyantjs/finance-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Loader2, Paperclip, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+function generateInvoiceNumber() {
+    const now = new Date();
+    const y = now.getFullYear();
+    const seq = String(Math.floor(Math.random() * 9000) + 1000);
+    return `INV-${y}-${seq}`; // i18n-literal-ok auto-generated id
+}
+function formatScheduleDate(iso, locale) {
+    try {
+        return new Date(iso).toLocaleDateString(locale, { dateStyle: "medium" });
+    }
+    catch {
+        return iso;
+    }
+}
+function formatMoney(cents, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
+}
+const SCHEDULE_DESCRIPTION_FALLBACK = {
+    deposit: "Deposit",
+    installment: "Installment",
+    balance: "Balance",
+    hold: "Hold",
+    other: "Payment",
+};
+function scheduleDescription(scheduleType) {
+    if (!scheduleType)
+        return SCHEDULE_DESCRIPTION_FALLBACK.other ?? "Payment";
+    return SCHEDULE_DESCRIPTION_FALLBACK[scheduleType] ?? scheduleType;
+}
+// CurrencyInput requires `onChange` even when disabled; this placeholder
+// keeps the read-only totals row from needing per-call wrappers.
+const noopCurrencyChange = (_value) => { };
+const PAYMENT_METHODS = [
+    "bank_transfer",
+    "credit_card",
+    "debit_card",
+    "cash",
+    "cheque",
+    "wallet",
+    "direct_bill",
+    "voucher",
+    "other",
+];
+/**
+ * Modal invoice creator scoped to a single booking. Operators can pick
+ * between a free-form ("custom") invoice and one derived from an
+ * unpaid payment schedule (amounts + due date are locked to the
+ * schedule). Toggles control whether the new invoice is pushed to
+ * SmartBill on issue, whether a fully-paid `payments` row is created
+ * alongside it, and (when sync is off) lets the operator attach
+ * supporting documents.
+ */
+export function BookingInvoiceDialog({ open, onOpenChange, bookingId, defaultCurrency = "EUR", // i18n-literal-ok domain default currency
+defaultAmountCents = null, uploadFile, defaultScheduleTaxRatePercent = 0, onSuccess, }) {
+    const { createFromBooking } = useInvoiceMutation();
+    const { baseUrl, fetcher } = useVoyantFinanceContext();
+    const messages = useFinanceUiMessagesOrDefault();
+    const dialog = messages.invoiceDialog;
+    const [invoiceType, setInvoiceType] = useState("invoice");
+    const [source, setSource] = useState("schedule");
+    const [scheduleId, setScheduleId] = useState(null);
+    const [invoiceNumber, setInvoiceNumber] = useState("");
+    const [currency, setCurrency] = useState(defaultCurrency);
+    const [subtotalCents, setSubtotalCents] = useState(defaultAmountCents ?? 0);
+    const [taxCents, setTaxCents] = useState(0);
+    const [totalCents, setTotalCents] = useState(defaultAmountCents ?? 0);
+    const [issueDate, setIssueDate] = useState("");
+    const [dueDate, setDueDate] = useState("");
+    const [notes, setNotes] = useState("");
+    const [lineItems, setLineItems] = useState([]);
+    const [syncToSmartbill, setSyncToSmartbill] = useState(true);
+    const [markAsPaid, setMarkAsPaid] = useState(false);
+    const [markAsPaidMethod, setMarkAsPaidMethod] = useState("bank_transfer");
+    const [markAsPaidDate, setMarkAsPaidDate] = useState("");
+    const [attachments, setAttachments] = useState([]);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    // ---- prefill / reset on open ---------------------------------------------
+    useEffect(() => {
+        if (!open)
+            return;
+        const today = new Date().toISOString().split("T")[0] ?? "";
+        setInvoiceType("invoice");
+        setSource("schedule");
+        setScheduleId(null);
+        setInvoiceNumber(generateInvoiceNumber());
+        setCurrency(defaultCurrency);
+        setSubtotalCents(defaultAmountCents ?? 0);
+        setTaxCents(0);
+        setTotalCents(defaultAmountCents ?? 0);
+        setIssueDate(today);
+        setDueDate("");
+        setNotes("");
+        setLineItems([]);
+        setSyncToSmartbill(true);
+        setMarkAsPaid(false);
+        setMarkAsPaidMethod("bank_transfer");
+        setMarkAsPaidDate(today);
+        setAttachments([]);
+        setSubmitting(false);
+        setError(null);
+    }, [open, defaultCurrency, defaultAmountCents]);
+    // ---- schedules -----------------------------------------------------------
+    const schedulesQuery = useBookingPaymentSchedules(bookingId, { enabled: open });
+    const unpaidSchedules = useMemo(() => (schedulesQuery.data?.data ?? []).filter((s) => s.status === "pending" || s.status === "due"), [schedulesQuery.data]);
+    // When the operator picks a schedule, lock the financial fields to it.
+    // `useMemo` keeps the lookup cheap on every render.
+    const selectedSchedule = useMemo(() => (scheduleId ? (unpaidSchedules.find((s) => s.id === scheduleId) ?? null) : null), [scheduleId, unpaidSchedules]);
+    useEffect(() => {
+        if (source !== "schedule") {
+            // Leaving the schedule branch — wipe the auto-prefilled line items
+            // so the operator's blank "Custom" slate stays blank.
+            setLineItems([]);
+            return;
+        }
+        if (!selectedSchedule) {
+            setLineItems([]);
+            return;
+        }
+        setCurrency(selectedSchedule.currency);
+        setDueDate(selectedSchedule.dueDate);
+        // The schedule amount is the gross (customer-facing) sum, so the
+        // line item's net unit price is `amount / (1 + tax%)`. Without this
+        // back-out the line would compute as `amount + amount * tax%`,
+        // making the invoice exceed what the customer is actually paying.
+        const taxFactor = 1 + Math.max(0, defaultScheduleTaxRatePercent) / 100;
+        const netUnitAmount = taxFactor > 0
+            ? Math.round(selectedSchedule.amountCents / taxFactor)
+            : selectedSchedule.amountCents;
+        setLineItems([
+            {
+                id: `schedule_${selectedSchedule.id}`,
+                description: scheduleDescription(selectedSchedule.scheduleType),
+                quantity: 1,
+                unitAmountCents: netUnitAmount,
+                taxRatePercent: defaultScheduleTaxRatePercent,
+            },
+        ]);
+    }, [source, selectedSchedule, defaultScheduleTaxRatePercent]);
+    // ---- line item totals ----------------------------------------------------
+    // When the operator entered explicit line items, the global Subtotal/Tax/
+    // Total fields become a read-only summary of the sum across rows.
+    const lineItemTotals = useMemo(() => {
+        let subtotal = 0;
+        let tax = 0;
+        for (const line of lineItems) {
+            const lineSubtotal = Math.max(0, Math.round(line.quantity * line.unitAmountCents));
+            const lineTax = Math.max(0, Math.round((lineSubtotal * line.taxRatePercent) / 100));
+            subtotal += lineSubtotal;
+            tax += lineTax;
+        }
+        return { subtotalCents: subtotal, taxCents: tax, totalCents: subtotal + tax };
+    }, [lineItems]);
+    // Subtotal/Tax/Total are always derived from the line items, so reflect
+    // the latest computation on every render (including the empty → 0 case).
+    useEffect(() => {
+        setSubtotalCents(lineItemTotals.subtotalCents);
+        setTaxCents(lineItemTotals.taxCents);
+        setTotalCents(lineItemTotals.totalCents);
+    }, [lineItemTotals]);
+    const scheduleLocked = source === "schedule" && selectedSchedule != null;
+    const linesDriveTotals = source === "custom" && lineItems.length > 0;
+    // ---- submit --------------------------------------------------------------
+    const submit = useCallback(async () => {
+        if (submitting)
+            return;
+        setError(null);
+        if (source === "schedule" && !selectedSchedule) {
+            setError(dialog.schedulePlaceholder);
+            return;
+        }
+        if (!issueDate) {
+            setError(dialog.validation.issueDateRequired);
+            return;
+        }
+        if (!dueDate) {
+            setError(dialog.validation.dueDateRequired);
+            return;
+        }
+        if (linesDriveTotals) {
+            const invalid = lineItems.find((line) => !line.description.trim() || line.quantity < 1);
+            if (invalid) {
+                setError(dialog.validation.lineItemInvalid);
+                return;
+            }
+        }
+        setSubmitting(true);
+        try {
+            // Subtotal/Tax/Total are intentionally omitted — the server
+            // computes them from `lineItems` (custom mode) or from the linked
+            // schedule (schedule mode). Sending the locally-derived numbers
+            // can drift by 1 cent due to rounding and trips the strict
+            // "Invoice tax does not match line items" cross-check.
+            const created = await createFromBooking.mutateAsync({
+                bookingId,
+                bookingPaymentScheduleId: selectedSchedule?.id,
+                invoiceNumber,
+                issueDate,
+                dueDate,
+                currency,
+                notes: notes || null,
+                invoiceType,
+                skipExternalSync: !syncToSmartbill,
+                lineItems: linesDriveTotals
+                    ? lineItems.map((line) => ({
+                        description: line.description.trim(),
+                        quantity: line.quantity,
+                        unitAmountCents: line.unitAmountCents,
+                        taxRateBps: line.taxRatePercent > 0 ? Math.round(line.taxRatePercent * 100) : undefined,
+                    }))
+                    : undefined,
+            });
+            // Fully-paid sibling payment row. Use the totals returned by the
+            // server (which may differ from the locally-derived ones by a cent
+            // due to schedule tax back-out / rounding) — paying the local
+            // figure can leave the invoice short and break the one-click
+            // "Mark as paid" expectation (incl. proforma conversion triggers).
+            if (markAsPaid && created.totalCents > 0) {
+                const paymentDate = markAsPaidDate || new Date().toISOString().split("T")[0] || issueDate;
+                await fetcher(`${baseUrl}/v1/admin/finance/invoices/${created.id}/payments`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        amountCents: created.totalCents,
+                        currency: created.currency,
+                        paymentMethod: markAsPaidMethod,
+                        status: "completed",
+                        paymentDate,
+                    }),
+                });
+            }
+            // Attachments: upload bytes via the template-supplied uploader,
+            // then register each as an `invoice_attachment` row pointing at
+            // the storage key returned by the upload.
+            if (uploadFile && attachments.length > 0) {
+                for (const file of attachments) {
+                    const uploaded = await uploadFile(file);
+                    await fetcher(`${baseUrl}/v1/admin/finance/invoices/${created.id}/attachments`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                            kind: "supporting_document",
+                            name: file.name,
+                            mimeType: uploaded.mimeType || file.type || null,
+                            fileSize: uploaded.fileSize ?? file.size,
+                            storageKey: uploaded.storageKey,
+                        }),
+                    });
+                }
+            }
+            onSuccess?.(created);
+            onOpenChange(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [
+        submitting,
+        source,
+        selectedSchedule,
+        issueDate,
+        dueDate,
+        createFromBooking,
+        bookingId,
+        invoiceNumber,
+        currency,
+        notes,
+        invoiceType,
+        syncToSmartbill,
+        markAsPaid,
+        markAsPaidMethod,
+        markAsPaidDate,
+        attachments,
+        uploadFile,
+        baseUrl,
+        fetcher,
+        onSuccess,
+        onOpenChange,
+        linesDriveTotals,
+        lineItems,
+        dialog,
+    ]);
+    // ---- render --------------------------------------------------------------
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "w-full! max-w-3xl! gap-0 p-0", children: [_jsxs(DialogHeader, { className: "shrink-0 border-b px-6 py-4", children: [_jsx(DialogTitle, { children: dialog.titles.create }), _jsx(DialogDescription, { children: messages.invoicesPage.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: dialog.fields.type }), _jsx(SegmentedChoice, { value: invoiceType, onChange: setInvoiceType, options: [
+                                            { value: "invoice", label: dialog.typeLabels.invoice },
+                                            { value: "proforma", label: dialog.typeLabels.proforma },
+                                        ] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.source }), _jsx(SegmentedChoice, { value: source, onChange: (next) => {
+                                            setSource(next);
+                                            if (next === "custom")
+                                                setScheduleId(null);
+                                        }, options: [
+                                            { value: "schedule", label: dialog.sourceLabels.schedule },
+                                            { value: "custom", label: dialog.sourceLabels.custom },
+                                        ] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border bg-muted/20 px-4 py-3", children: [_jsx(Label, { className: "cursor-pointer", onClick: () => setSyncToSmartbill((v) => !v), children: dialog.fields.syncToSmartbill }), _jsx(Switch, { checked: syncToSmartbill, onCheckedChange: setSyncToSmartbill })] }), source === "schedule" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.schedule }), _jsxs(Select, { value: scheduleId ?? undefined, onValueChange: (v) => setScheduleId(v ?? null), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: dialog.schedulePlaceholder }) }), _jsx(SelectContent, { children: unpaidSchedules.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: dialog.scheduleEmpty })) : (unpaidSchedules.map((s) => (_jsxs(SelectItem, { value: s.id, children: [formatScheduleDate(s.dueDate, undefined), " \u00B7", " ", formatMoney(s.amountCents, s.currency)] }, s.id)))) })] }), scheduleLocked ? (_jsx("p", { className: "text-xs text-muted-foreground", children: dialog.scheduleLockedHint })) : null] })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.invoiceNumber }), _jsx(Input, { value: invoiceNumber, onChange: (e) => setInvoiceNumber(e.target.value), placeholder: dialog.placeholders.invoiceNumber, disabled: syncToSmartbill }), syncToSmartbill ? (_jsx("p", { className: "text-xs text-muted-foreground", children: dialog.invoiceNumberAutoHint })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.currency }), _jsx(CurrencyCombobox, { value: currency, onChange: (next) => setCurrency(next ?? defaultCurrency), disabled: scheduleLocked })] })] }), source === "custom" || lineItems.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: dialog.lineItems.sectionTitle }), source === "custom" ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setLineItems((prev) => [
+                                                    ...prev,
+                                                    {
+                                                        id: `tmp_${Date.now()}_${prev.length}`,
+                                                        description: "",
+                                                        quantity: 1,
+                                                        unitAmountCents: 0,
+                                                        taxRatePercent: 0,
+                                                    },
+                                                ]), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), dialog.lineItems.addRow] })) : null] }), lineItems.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: dialog.lineItems.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: lineItems.map((line, idx) => {
+                                            const lineSubtotal = Math.max(0, Math.round(line.quantity * line.unitAmountCents));
+                                            const lineTotal = lineSubtotal +
+                                                Math.max(0, Math.round((lineSubtotal * line.taxRatePercent) / 100));
+                                            return (_jsxs("div", { className: "grid grid-cols-[1fr_3rem_7rem_4rem_6rem_2rem] items-end gap-2 rounded-md border bg-background p-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [idx === 0 ? (_jsx(Label, { className: "text-xs", children: dialog.lineItems.description })) : null, _jsx(Input, { value: line.description, onChange: (e) => setLineItems((prev) => prev.map((row, i) => i === idx ? { ...row, description: e.target.value } : row)), disabled: scheduleLocked })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [idx === 0 ? (_jsx(Label, { className: "text-xs", children: dialog.lineItems.quantity })) : null, _jsx(Input, { type: "number", min: 1, value: line.quantity, onChange: (e) => setLineItems((prev) => prev.map((row, i) => i === idx
+                                                                    ? {
+                                                                        ...row,
+                                                                        quantity: Math.max(1, Number(e.target.value) || 1),
+                                                                    }
+                                                                    : row)), disabled: scheduleLocked })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [idx === 0 ? (_jsx(Label, { className: "text-xs", children: dialog.lineItems.unitPrice })) : null, _jsx(CurrencyInput, { value: line.unitAmountCents, onChange: (next) => setLineItems((prev) => prev.map((row, i) => i === idx ? { ...row, unitAmountCents: next ?? 0 } : row)), currency: currency, disabled: scheduleLocked })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [idx === 0 ? (_jsx(Label, { className: "text-xs", children: dialog.lineItems.taxPercent })) : null, _jsx(Input, { type: "number", min: 0, max: 100, step: 0.01, value: line.taxRatePercent, onChange: (e) => setLineItems((prev) => prev.map((row, i) => i === idx
+                                                                    ? {
+                                                                        ...row,
+                                                                        taxRatePercent: Math.max(0, Math.min(100, Number(e.target.value) || 0)),
+                                                                    }
+                                                                    : row)), disabled: scheduleLocked })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [idx === 0 ? (_jsx(Label, { className: "text-xs", children: dialog.lineItems.lineTotal })) : null, _jsx("div", { className: "px-2 py-1.5 text-right font-mono text-sm", children: formatMoney(lineTotal, currency) })] }), scheduleLocked ? (_jsx("div", {})) : (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": dialog.lineItems.remove, onClick: () => setLineItems((prev) => prev.filter((_, i) => i !== idx)), children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }, line.id));
+                                        }) }))] })) : null, _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.subtotalCents }), _jsx(CurrencyInput, { value: subtotalCents, onChange: noopCurrencyChange, currency: currency, disabled: true })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.taxCents }), _jsx(CurrencyInput, { value: taxCents, onChange: noopCurrencyChange, currency: currency, disabled: true })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.totalCents }), _jsx(CurrencyInput, { value: totalCents, onChange: noopCurrencyChange, currency: currency, disabled: true })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.issueDate }), _jsx(DatePicker, { value: issueDate || null, onChange: (next) => setIssueDate(next ?? ""), placeholder: dialog.placeholders.issueDate, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.dueDate }), _jsx(DatePicker, { value: dueDate || null, onChange: (next) => setDueDate(next ?? ""), placeholder: dialog.placeholders.dueDate, className: "w-full", disabled: scheduleLocked })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.notes }), _jsx(Textarea, { value: notes, onChange: (e) => setNotes(e.target.value), placeholder: dialog.placeholders.notes })] }), _jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { className: "cursor-pointer", onClick: () => setMarkAsPaid((v) => !v), children: dialog.fields.markAsPaid }), _jsx(Switch, { checked: markAsPaid, onCheckedChange: setMarkAsPaid })] }), markAsPaid ? (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.markAsPaidMethod }), _jsxs(Select, { value: markAsPaidMethod, onValueChange: (v) => setMarkAsPaidMethod((v ?? "bank_transfer")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_METHODS.map((method) => (_jsx(SelectItem, { value: method, children: messages.common.paymentMethodLabels[method] }, method))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.markAsPaidDate }), _jsx(DatePicker, { value: markAsPaidDate || null, onChange: (next) => setMarkAsPaidDate(next ?? ""), placeholder: dialog.placeholders.issueDate, className: "w-full" })] })] })) : null] }), !syncToSmartbill && uploadFile ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.attachments }), _jsx("p", { className: "text-xs text-muted-foreground", children: dialog.attachmentsHint }), _jsx("input", { type: "file", multiple: true, onChange: (e) => {
+                                            const files = Array.from(e.target.files ?? []);
+                                            if (files.length > 0)
+                                                setAttachments((prev) => [...prev, ...files]);
+                                            e.target.value = "";
+                                        }, 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" }), attachments.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: attachments.map((file, idx) => (_jsxs("li", { 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: () => setAttachments((prev) => prev.filter((_, i) => i !== idx)), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }, `${file.name}-${idx}`))) })) : null] })) : 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: messages.common.cancel }), _jsxs(Button, { type: "button", disabled: submitting, onClick: () => void submit(), children: [submitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, dialog.actions.create] })] })] }) }));
+}
+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));
+        }) }));
+}

package/dist/components/record-booking-payment-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-booking-payment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/record-booking-payment-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAOnB,MAAM,yBAAyB,CAAA;AA8BhC,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,aAAa,CAAA;IAC5B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAC/C;AAkED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAuB,EACvB,UAAU,EACV,cAAqB,GACtB,EAAE,+BAA+B,2CAqbjC"}
+{"version":3,"file":"record-booking-payment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/record-booking-payment-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAQnB,MAAM,yBAAyB,CAAA;AA6BhC,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,aAAa,CAAA;IAC5B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAC/C;AAkED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAuB,EACvB,UAAU,EACV,cAAqB,GACtB,EAAE,+BAA+B,2CAsfjC"}

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

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { paymentMethodSchema, paymentStatusSchema, useInvoiceFxRate, useInvoicePaymentMutation, useInvoices, usePaymentMutation, } from "@voyantjs/finance-react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { paymentMethodSchema, paymentStatusSchema, useInvoiceFxRate, useInvoiceMutation, useInvoicePaymentMutation, useInvoices, usePaymentMutation, } from "@voyantjs/finance-react";
 import { formatMessage } from "@voyantjs/i18n";
-import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
 import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
 import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { DatePicker } from "@voyantjs/ui/components/date-picker";
@@ -63,19 +63,25 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
     const isEditing = Boolean(editingPayment);
     const invoicesQuery = useInvoices({ bookingId, enabled: open });
     const invoices = invoicesQuery.data?.data ?? [];
-    const paymentEligibleInvoices = invoices.filter((inv) => inv.status !== "void");
-    const outstandingInvoices = paymentEligibleInvoices.filter((inv) => inv.balanceDueCents > 0);
-    const selectableInvoices = outstandingInvoices.length > 0 ? outstandingInvoices : paymentEligibleInvoices;
+    // Operator records a payment AGAINST money still owed. Paid / voided
+    // invoices have no remaining balance to settle, so they don't belong
+    // in the picker — keep the surface focused on what's actionable.
+    const selectableInvoices = invoices.filter((inv) => inv.status !== "void" && inv.balanceDueCents > 0);
     const [state, setState] = React.useState(() => buildInitialFormState(defaultCurrency));
     const [submitError, setSubmitError] = React.useState(null);
+    const [convertProformaAfter, setConvertProformaAfter] = React.useState(false);
+    const convertProformaTouchedRef = React.useRef(false);
     const initializedRef = React.useRef(false);
-    // When the dialog opens, reset to defaults. Once invoices load, auto-pick
-    // the only outstanding invoice (or the first invoice) and pre-fill the
-    // amount with its balance due — what the operator almost always wants.
+    // Reset on close; in edit mode, prefill from the snapshot once the
+    // invoices list loads. In create mode the operator picks an invoice
+    // explicitly — selecting one fills amount/currency from the row.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: one-shot init guarded by `initializedRef`; we intentionally don't re-fire when the derived `selectableInvoices[0]` reference changes
     React.useEffect(() => {
         if (!open) {
             initializedRef.current = false;
             setSubmitError(null);
+            setConvertProformaAfter(false);
+            convertProformaTouchedRef.current = false;
             return;
         }
         if (!initializedRef.current && !invoicesQuery.isLoading) {
@@ -93,6 +99,10 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
                 });
             }
             else {
+                // Auto-select the first outstanding invoice so the operator
+                // doesn't have to click the picker when there's only one
+                // option (the common case). The user can still re-pick from
+                // the dropdown.
                 const target = selectableInvoices[0];
                 setState({
                     ...buildInitialFormState(defaultCurrency),
@@ -103,7 +113,7 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
             }
             initializedRef.current = true;
         }
-    }, [open, invoicesQuery.isLoading, selectableInvoices, defaultCurrency, editingPayment]);
+    }, [open, invoicesQuery.isLoading, defaultCurrency, editingPayment]);
     const selectedInvoice = invoices.find((inv) => inv.id === state.invoiceId) ?? null;
     const invoiceCurrency = selectedInvoice?.currency ?? "";
     const normalizedInvoiceCurrency = normalizeCurrency(invoiceCurrency);
@@ -112,6 +122,13 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
     const requiresBaseAmount = isCrossCurrency && state.status === "completed";
     const createMutation = useInvoicePaymentMutation(state.invoiceId);
     const { update: updateMutation } = usePaymentMutation();
+    const { convertToInvoice: convertProformaMutation } = useInvoiceMutation();
+    // Only offer the proforma→invoice conversion when (a) recording a
+    // brand-new payment (not editing), (b) the selected invoice is a
+    // proforma, (c) the payment is being marked completed (a pending or
+    // failed payment shouldn't trigger conversion).
+    const isProformaSelected = selectedInvoice?.invoiceType === "proforma";
+    const canConvertProformaAfter = !isEditing && isProformaSelected && state.status === "completed";
     const isPending = isEditing ? updateMutation.isPending : createMutation.isPending;
     const fxRateQuery = useInvoiceFxRate({
         baseCurrency: normalizedInvoiceCurrency || undefined,
@@ -135,6 +152,22 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
         !fxRateQuery.isFetching &&
         !autoEffectiveRate &&
         fxRateQuery.isFetched;
+    // Heuristic: prefill the "Convert proforma to invoice" switch ON
+    // only when this payment will close the proforma — i.e. the entered
+    // amount (in invoice currency, directly or via FX) covers the
+    // invoice's remaining balance. Partial payments stay off since the
+    // proforma still has balance due after recording. The operator can
+    // override either way; once they toggle, we freeze the choice.
+    const fullyCoversInvoiceBalance = selectedInvoice != null &&
+        selectedInvoice.balanceDueCents > 0 &&
+        (isCrossCurrency
+            ? baseAmountCents > 0 && baseAmountCents >= selectedInvoice.balanceDueCents
+            : state.amountCents > 0 && state.amountCents >= selectedInvoice.balanceDueCents);
+    React.useEffect(() => {
+        if (convertProformaTouchedRef.current)
+            return;
+        setConvertProformaAfter(canConvertProformaAfter && fullyCoversInvoiceBalance);
+    }, [canConvertProformaAfter, fullyCoversInvoiceBalance]);
     const set = (key, value) => setState((prev) => ({ ...prev, [key]: value }));
     const setPaymentCurrency = (currency) => {
         const nextCurrency = normalizeCurrency(currency) || normalizedInvoiceCurrency || defaultCurrency;
@@ -198,6 +231,14 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
             }
             else {
                 await createMutation.mutateAsync(payload);
+                // The proforma → final invoice conversion is the last step so a
+                // failure here doesn't roll back the payment (it's already in).
+                // Server-side `convert-to-invoice` voids the proforma, creates
+                // the final invoice, and moves payments onto it — exactly what
+                // the operator would otherwise do by hand from the Invoices tab.
+                if (canConvertProformaAfter && convertProformaAfter && selectedInvoice) {
+                    await convertProformaMutation.mutateAsync({ id: selectedInvoice.id });
+                }
             }
             onOpenChange(false);
             onRecorded?.();
@@ -206,8 +247,8 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
             setSubmitError(err instanceof Error ? err.message : dialog.validation.recordFailed);
         }
     };
-    const descriptionParts = dialog.description.split("{generateLink}");
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.title }) }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(DialogBody, { className: "grid gap-4", children: [isEditing ? null : (_jsxs("p", { className: "text-sm text-muted-foreground", children: [descriptionParts[0], _jsx("span", { className: "font-medium", children: dialog.generateLinkLabel }), descriptionParts[1]] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-invoice", children: dialog.fields.invoice }), invoicesQuery.isLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: dialog.loadingInvoices })) : selectableInvoices.length === 0 ? (_jsx("p", { className: "text-sm text-destructive", children: dialog.noInvoices })) : (_jsxs(Select, { value: state.invoiceId, disabled: isEditing, onValueChange: (value) => {
+    const showEmptyState = !isEditing && !invoicesQuery.isLoading && selectableInvoices.length === 0;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", className: "gap-0 p-0", children: [_jsx(DialogHeader, { className: "border-b px-6 py-4", children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.title }) }), showEmptyState ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-6 py-6", children: _jsx("p", { className: "text-sm text-muted-foreground", children: dialog.noInvoices }) }), _jsx("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: _jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: messages.common.cancel }) })] })) : (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex flex-col gap-5 px-6 py-5", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-invoice", children: dialog.fields.invoice }), invoicesQuery.isLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: dialog.loadingInvoices })) : (_jsxs(Select, { value: state.invoiceId, disabled: isEditing, onValueChange: (value) => {
                                                 const id = value ?? "";
                                                 const next = invoices.find((inv) => inv.id === id);
                                                 setState((prev) => ({
@@ -223,12 +264,7 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
                                                             status: inv.status,
                                                             balance: formatAmount(inv.balanceDueCents),
                                                             currency: inv.currency,
-                                                        }) }, inv.id))) })] })), selectedInvoice ? (_jsx("p", { className: "text-xs text-muted-foreground", children: formatMessage(dialog.invoiceMeta, {
-                                                total: formatAmount(selectedInvoice.totalCents),
-                                                paid: formatAmount(selectedInvoice.paidCents),
-                                                due: formatAmount(selectedInvoice.balanceDueCents),
-                                                currency: selectedInvoice.currency,
-                                            }) })) : null] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-amount", children: dialog.fields.amountCents }), _jsx(CurrencyInput, { id: "record-amount", value: state.amountCents, onChange: (next) => set("amountCents", next ?? 0), currency: state.currency })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.currency }), _jsx(CurrencyCombobox, { value: state.currency || null, onChange: (next) => setPaymentCurrency(next ?? selectedInvoice?.currency ?? defaultCurrency), placeholder: dialog.placeholders.currency })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-date", children: dialog.fields.paymentDate }), _jsx(DatePicker, { value: state.paymentDate || null, onChange: (next) => set("paymentDate", next ?? ""), className: "w-full" })] })] }), isCrossCurrency ? (_jsxs("div", { className: "rounded-md border bg-muted/20 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-sm font-medium", children: dialog.fx.title }), fxRateQuery.isFetching ? (_jsx("p", { className: "text-xs text-muted-foreground", children: dialog.fx.loadingRate })) : autoRateUnavailable ? (_jsx("p", { className: "text-xs text-destructive", children: formatMessage(dialog.fx.rateUnavailable, {
+                                                        }) }, inv.id))) })] }))] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-amount", children: dialog.fields.amountCents }), _jsx(CurrencyInput, { id: "record-amount", value: state.amountCents, onChange: (next) => set("amountCents", next ?? 0), currency: state.currency })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.currency }), _jsx(CurrencyCombobox, { value: state.currency || null, onChange: (next) => setPaymentCurrency(next ?? selectedInvoice?.currency ?? defaultCurrency), placeholder: dialog.placeholders.currency })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-date", children: dialog.fields.paymentDate }), _jsx(DatePicker, { value: state.paymentDate || null, onChange: (next) => set("paymentDate", next ?? ""), className: "w-full" })] })] }), isCrossCurrency ? (_jsxs("div", { className: "rounded-md border bg-muted/20 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-sm font-medium", children: dialog.fx.title }), fxRateQuery.isFetching ? (_jsx("p", { className: "text-xs text-muted-foreground", children: dialog.fx.loadingRate })) : autoRateUnavailable ? (_jsx("p", { className: "text-xs text-destructive", children: formatMessage(dialog.fx.rateUnavailable, {
                                                                 invoiceCurrency,
                                                                 paymentCurrency,
                                                             }) })) : effectiveFxRate && baseAmountCents > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm", children: formatMessage(dialog.fx.summary, {
@@ -255,8 +291,11 @@ export function RecordBookingPaymentDialog({ open, onOpenChange, bookingId, defa
                                                     })), inputMode: "decimal", placeholder: formatMessage(dialog.placeholders.fxRate, {
                                                         invoiceCurrency,
                                                         paymentCurrency,
-                                                    }) })] })) : null] })) : null, _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.status }), _jsxs(Select, { value: state.status, onValueChange: (value) => set("status", (value ?? "completed")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_STATUSES.map((value) => (_jsx(SelectItem, { value: value, children: statusLabels[value] }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.paymentMethod }), _jsxs(Select, { value: state.paymentMethod, onValueChange: (value) => set("paymentMethod", (value ?? "bank_transfer")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_METHODS.map((value) => (_jsx(SelectItem, { value: value, children: methodLabels[value] }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-ref", children: dialog.fields.referenceNumber }), _jsx(Input, { id: "record-ref", value: state.referenceNumber, onChange: (event) => set("referenceNumber", event.target.value), placeholder: dialog.placeholders.referenceNumber })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-notes", children: dialog.fields.notes }), _jsx(Textarea, { id: "record-notes", value: state.notes, onChange: (event) => set("notes", event.target.value), rows: 3 })] }), submitError ? _jsx("p", { className: "text-sm text-destructive", children: submitError }) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: isPending ||
+                                                    }) })] })) : null] })) : null, _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.status }), _jsxs(Select, { value: state.status, onValueChange: (value) => set("status", (value ?? "completed")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_STATUSES.map((value) => (_jsx(SelectItem, { value: value, children: statusLabels[value] }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.fields.paymentMethod }), _jsxs(Select, { value: state.paymentMethod, onValueChange: (value) => set("paymentMethod", (value ?? "bank_transfer")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAYMENT_METHODS.map((value) => (_jsx(SelectItem, { value: value, children: methodLabels[value] }, value))) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-ref", children: dialog.fields.referenceNumber }), _jsx(Input, { id: "record-ref", value: state.referenceNumber, onChange: (event) => set("referenceNumber", event.target.value), placeholder: dialog.placeholders.referenceNumber })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "record-notes", children: dialog.fields.notes }), _jsx(Textarea, { id: "record-notes", value: state.notes, onChange: (event) => set("notes", event.target.value), rows: 3 })] }), canConvertProformaAfter ? (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-md border bg-muted/20 px-4 py-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "record-convert-proforma", className: "cursor-pointer", onClick: () => setConvertProformaAfter((v) => !v), children: dialog.fields.convertProformaAfter }), _jsx("p", { className: "text-xs text-muted-foreground", children: dialog.fields.convertProformaAfterHint })] }), _jsx(Switch, { id: "record-convert-proforma", checked: convertProformaAfter, onCheckedChange: (next) => {
+                                                convertProformaTouchedRef.current = true;
+                                                setConvertProformaAfter(next);
+                                            } })] })) : null, submitError ? _jsx("p", { className: "text-sm text-destructive", children: submitError }) : null] }), _jsxs("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: isPending ||
                                         !state.invoiceId ||
                                         state.amountCents <= 0 ||
-                                        (requiresBaseAmount && baseAmountCents <= 0), children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? dialog.actions.save : dialog.actions.record] })] })] })] }) }));
+                                        (requiresBaseAmount && baseAmountCents <= 0), children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? dialog.actions.save : dialog.actions.record] })] })] }))] }) }));
 }