@voyant-travel/finance-react 0.119.5

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, } from "@voyant-travel/ui/components";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@voyant-travel/ui/components/alert-dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Download, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { useCostCategories, useSupplierInvoice, useSupplierInvoiceAttachments, useSupplierInvoiceMutation, useSupplierInvoicePayments, } from "../index.js";
+import { formatInvoiceAmount } from "./invoice-table-parts.js";
+import { AllocationDialog, LineDialog, PaymentDialog, } from "./supplier-invoice-detail-page/dialogs.js";
+import { allocationToInput, Field, formatFileSize, lineToInput, STATUS_VARIANT, } from "./supplier-invoice-detail-page/shared.js";
+import { SupplierInvoiceFormDialog } from "./supplier-invoice-form-dialog.js";
+export function SupplierInvoiceDetailPage({ id, className, onBack, onDownloadDocument, uploadFile, onDownloadAttachment, searchTargets, listDeparturesForProduct, extractFromFile, searchSuppliers, createSupplier, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const t = messages.supplierInvoiceDetail;
+    const statusLabels = messages.supplierInvoicesPage.statusLabels;
+    const { data, isPending, isError } = useSupplierInvoice(id);
+    const paymentsQuery = useSupplierInvoicePayments(id);
+    const attachmentsQuery = useSupplierInvoiceAttachments(id);
+    const costCategories = useCostCategories().data?.data ?? [];
+    const categoryNameById = new Map(costCategories.map((c) => [c.id, c.name]));
+    const { setAllocations, setLines, recordPayment, remove, addAttachment, removeAttachment } = useSupplierInvoiceMutation();
+    const [uploading, setUploading] = useState(false);
+    const invoice = data?.data ?? null;
+    const currency = invoice?.currency ?? "";
+    const [editOpen, setEditOpen] = useState(false);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [lineDialog, setLineDialog] = useState(null);
+    const [allocationDialog, setAllocationDialog] = useState(null);
+    const [paymentOpen, setPaymentOpen] = useState(false);
+    if (isPending)
+        return _jsx("div", { className: "p-6 text-muted-foreground", children: t.loading });
+    if (isError || !invoice)
+        return _jsx("div", { className: "p-6 text-destructive", children: t.notFound });
+    // Whole-invoice allocations (per-line allocation is a future mode).
+    const allocationList = invoice.allocations.filter((a) => a.supplierInvoiceLineId == null);
+    const allocatedCents = allocationList.reduce((sum, a) => sum + a.amountCents, 0);
+    const remainderCents = invoice.totalCents - allocatedCents;
+    const overAllocated = remainderCents < 0;
+    // Lines + allocations are edited via the full-replace mutations.
+    const persistLines = (lines) => setLines.mutate({ id, lines });
+    const removeLine = (lineId) => persistLines(invoice.lines.filter((l) => l.id !== lineId).map(lineToInput));
+    const persistAllocations = (allocations) => setAllocations.mutate({ id, allocations });
+    const removeAllocation = (allocationId) => persistAllocations(allocationList.filter((a) => a.id !== allocationId).map(allocationToInput));
+    const allocationTargetId = (a) => a.departureId ?? a.productId ?? a.bookingId ?? a.travelerId ?? "";
+    const methodLabel = (method) => t.payments.methodLabels[method] ?? method;
+    const payments = paymentsQuery.data?.data ?? [];
+    const attachments = attachmentsQuery.data?.data ?? [];
+    const handleUpload = async (files) => {
+        if (!uploadFile || !files || files.length === 0)
+            return;
+        setUploading(true);
+        try {
+            for (const file of Array.from(files)) {
+                const uploaded = await uploadFile(file);
+                await addAttachment.mutateAsync({
+                    id,
+                    input: {
+                        name: file.name,
+                        mimeType: uploaded.mimeType ?? file.type ?? null,
+                        fileSize: uploaded.fileSize ?? file.size,
+                        storageKey: uploaded.storageKey,
+                    },
+                });
+            }
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "size-4" }), t.actions.edit] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setDeleteOpen(true), children: [_jsx(Trash2, { className: "size-4" }), t.actions.delete] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg", children: invoice.supplierInvoiceNo }), _jsx("p", { className: "text-sm text-muted-foreground", children: invoice.supplierId })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: STATUS_VARIANT[invoice.status], children: statusLabels[invoice.status] }), invoice.storageKey ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onDownloadDocument, children: [_jsx(Download, { className: "size-4" }), t.document] })) : null] })] }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5", children: [_jsx(Field, { label: t.summary.subtotal, value: formatInvoiceAmount(invoice.subtotalCents, currency) }), _jsx(Field, { label: t.summary.tax, value: formatInvoiceAmount(invoice.taxCents, currency) }), _jsx(Field, { label: t.summary.total, value: formatInvoiceAmount(invoice.totalCents, currency) }), _jsx(Field, { label: t.summary.paid, value: formatInvoiceAmount(invoice.paidCents, currency) }), _jsx(Field, { label: t.summary.balanceDue, value: formatInvoiceAmount(invoice.balanceDueCents, currency) }), _jsx(Field, { label: t.summary.issueDate, value: invoice.issueDate }), _jsx(Field, { label: t.summary.dueDate, value: invoice.dueDate ?? t.summary.noValue })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: t.lines.title }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLineDialog({ line: null }), children: [_jsx(Plus, { className: "size-4" }), t.lines.add] })] }), _jsx(CardContent, { children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t.lines.description }), _jsx(TableHead, { children: t.lines.service }), _jsx(TableHead, { className: "text-right", children: t.lines.qty }), _jsx(TableHead, { className: "text-right", children: t.lines.unit }), _jsx(TableHead, { className: "text-right", children: t.lines.tax }), _jsx(TableHead, { className: "text-right", children: t.lines.total }), _jsx(TableHead, { className: "w-20" })] }) }), _jsx(TableBody, { children: invoice.lines.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-center text-muted-foreground", children: t.lines.empty }) })) : (invoice.lines.map((line) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: line.description }), _jsx(TableCell, { className: "text-muted-foreground", children: (line.costCategoryId && categoryNameById.get(line.costCategoryId)) ??
+                                                    t.lineForm.serviceTypeLabels[line.serviceType] }), _jsx(TableCell, { className: "text-right tabular-nums", children: line.quantity }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(line.unitAmountCents, currency) }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(line.taxAmountCents, currency) }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(line.totalAmountCents, currency) }), _jsxs(TableCell, { className: "text-right", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setLineDialog({ line }), "aria-label": t.lines.edit, children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeLine(line.id), "aria-label": t.lines.remove, children: _jsx(Trash2, { className: "size-4" }) })] })] }, line.id)))) })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: t.allocation.title }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setAllocationDialog({ allocation: null }), children: [_jsx(Plus, { className: "size-4" }), t.allocation.add] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t.allocation.target }), _jsx(TableHead, { children: t.allocation.reference }), _jsx(TableHead, { className: "text-right", children: t.payments.amount }), _jsx(TableHead, { className: "w-20" })] }) }), _jsx(TableBody, { children: allocationList.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "text-center text-muted-foreground", children: t.allocation.none }) })) : (allocationList.map((allocation) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: t.allocation.targetTypeLabels[allocation.targetType] }), _jsx(TableCell, { className: "text-muted-foreground", children: allocation.targetLabel ?? allocationTargetId(allocation) ?? "—" }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(allocation.amountCents, currency) }), _jsxs(TableCell, { className: "text-right", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setAllocationDialog({ allocation }), "aria-label": t.actions.edit, children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeAllocation(allocation.id), "aria-label": t.lines.remove, children: _jsx(Trash2, { className: "size-4" }) })] })] }, allocation.id)))) })] }), _jsx("div", { className: "border-t pt-3 text-sm", children: _jsx("span", { className: cn("text-muted-foreground", overAllocated && "text-destructive"), children: overAllocated
+                                        ? formatMessage(t.allocation.overAllocated, {
+                                            amount: formatInvoiceAmount(-remainderCents, currency),
+                                        })
+                                        : formatMessage(t.allocation.remainder, {
+                                            amount: formatInvoiceAmount(remainderCents, currency),
+                                        }) }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: t.payments.title }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setPaymentOpen(true), children: [_jsx(Plus, { className: "size-4" }), t.payments.record] })] }), _jsx(CardContent, { children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t.payments.date }), _jsx(TableHead, { children: t.payments.method }), _jsx(TableHead, { children: t.payments.status }), _jsx(TableHead, { className: "text-right", children: t.payments.amount })] }) }), _jsx(TableBody, { children: payments.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "text-center text-muted-foreground", children: t.payments.empty }) })) : (payments.map((payment) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: payment.paymentDate }), _jsx(TableCell, { className: "text-muted-foreground", children: methodLabel(payment.paymentMethod) }), _jsx(TableCell, { children: payment.status }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(payment.amountCents, payment.currency) })] }, payment.id)))) })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: t.attachments.title }), uploadFile ? (_jsxs("label", { className: "cursor-pointer", children: [_jsxs("span", { className: "inline-flex h-8 items-center gap-2 rounded-md border px-3 text-sm font-medium hover:bg-muted", children: [_jsx(Plus, { className: "size-4" }), uploading ? t.attachments.uploading : t.attachments.upload] }), _jsx("input", { type: "file", multiple: true, className: "sr-only", disabled: uploading, onChange: (e) => {
+                                            void handleUpload(e.target.files);
+                                            e.target.value = "";
+                                        } })] })) : null] }), _jsx(CardContent, { children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t.attachments.name }), _jsx(TableHead, { className: "text-right", children: t.attachments.size }), _jsx(TableHead, { className: "w-28" })] }) }), _jsx(TableBody, { children: attachments.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, className: "text-center text-muted-foreground", children: t.attachments.empty }) })) : (attachments.map((attachment) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: attachment.name }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatFileSize(attachment.fileSize) }), _jsxs(TableCell, { className: "text-right", children: [onDownloadAttachment && attachment.storageKey ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => onDownloadAttachment(attachment.id), "aria-label": t.attachments.download, children: _jsx(Download, { className: "size-4" }) })) : null, _jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeAttachment.mutate({ id, attachmentId: attachment.id }), "aria-label": t.attachments.remove, children: _jsx(Trash2, { className: "size-4" }) })] })] }, attachment.id)))) })] }) })] }), _jsx(SupplierInvoiceFormDialog, { open: editOpen, onOpenChange: setEditOpen, invoice: invoice, extractFromFile: extractFromFile, searchSuppliers: searchSuppliers, createSupplier: createSupplier }), _jsx(LineDialog, { open: lineDialog != null, line: lineDialog?.line ?? null, currency: currency, pending: setLines.isPending, onOpenChange: (open) => setLineDialog(open ? (lineDialog ?? { line: null }) : null), onSubmit: (input) => {
+                    const existing = invoice.lines.map(lineToInput);
+                    const editing = lineDialog?.line;
+                    const next = editing
+                        ? invoice.lines.map((l) => (l.id === editing.id ? input : lineToInput(l)))
+                        : [...existing, input];
+                    persistLines(next);
+                    setLineDialog(null);
+                } }), _jsx(AllocationDialog, { open: allocationDialog != null, allocation: allocationDialog?.allocation ?? null, currency: currency, pending: setAllocations.isPending, searchTargets: searchTargets, listDeparturesForProduct: listDeparturesForProduct, onOpenChange: (open) => setAllocationDialog(open ? (allocationDialog ?? { allocation: null }) : null), onSubmit: (input) => {
+                    const editing = allocationDialog?.allocation;
+                    const next = editing
+                        ? allocationList.map((a) => (a.id === editing.id ? input : allocationToInput(a)))
+                        : [...allocationList.map(allocationToInput), input];
+                    persistAllocations(next);
+                    setAllocationDialog(null);
+                } }), _jsx(PaymentDialog, { open: paymentOpen, currency: currency, pending: recordPayment.isPending, onOpenChange: setPaymentOpen, onSubmit: (input) => {
+                    recordPayment.mutate({ id, input: { ...input, currency } }, { onSuccess: () => setPaymentOpen(false) });
+                } }), _jsx(AlertDialog, { open: deleteOpen, onOpenChange: setDeleteOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t.deleteDialog.title }), _jsx(AlertDialogDescription, { children: t.deleteDialog.body })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t.deleteDialog.cancel }), _jsx(AlertDialogAction, { onClick: () => remove.mutate(id, { onSuccess: () => onBack?.() }), disabled: remove.isPending, children: t.deleteDialog.confirm })] })] }) })] }));
+}

package/dist/components/supplier-invoice-form-dialog.d.ts

@@ -0,0 +1,45 @@
+import { type SupplierInvoiceRecord, type SupplierInvoiceStatus } from "../index.js";
+import { type AsyncComboboxOption } from "./async-combobox.js";
+/**
+ * Header fields an extractor may return to prefill the form. All optional —
+ * the operator only overrides the fields it could resolve; the user confirms
+ * before saving.
+ */
+export interface SupplierInvoiceExtraction {
+    supplierInvoiceNo?: string | null;
+    supplierId?: string | null;
+    status?: SupplierInvoiceStatus | null;
+    currency?: string | null;
+    issueDate?: string | null;
+    dueDate?: string | null;
+    internalRef?: string | null;
+    notes?: string | null;
+}
+export interface SupplierInvoiceFormDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Present → edit mode; absent → create mode. */
+    invoice?: SupplierInvoiceRecord;
+    onSaved?: (id: string) => void;
+    /**
+     * Extension point: extract header fields from an uploaded invoice file
+     * (AI/OCR/whatever the deployment wires). When provided, an upload control
+     * appears that prefills the form for the user to confirm. Omit it (the
+     * default) and no extraction UI is shown.
+     */
+    extractFromFile?: (file: File) => Promise<SupplierInvoiceExtraction>;
+    /**
+     * Search the suppliers module for the supplier picker. The selected option's
+     * value is stored as the invoice's `supplierId` (a loose text reference — no
+     * cross-module FK). When omitted, a plain text input is shown instead.
+     */
+    searchSuppliers?: (query: string) => Promise<AsyncComboboxOption[]>;
+    /**
+     * Create a supplier inline from the picker. Receives the typed name, returns
+     * the new option (whose value becomes the stored `supplierId`). Only offered
+     * when both this and `searchSuppliers` are provided.
+     */
+    createSupplier?: (name: string) => Promise<AsyncComboboxOption | null>;
+}
+export declare function SupplierInvoiceFormDialog({ open, onOpenChange, invoice, onSaved, extractFromFile, searchSuppliers, createSupplier, }: SupplierInvoiceFormDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=supplier-invoice-form-dialog.d.ts.map

package/dist/components/supplier-invoice-form-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supplier-invoice-form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/supplier-invoice-form-dialog.tsx"],"names":[],"mappings":"AAwBA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAE3B,MAAM,aAAa,CAAA;AACpB,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAY7E;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,MAAM,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,iDAAiD;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,yBAAyB,CAAC,CAAA;IACpE;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAA;IACnE;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CACvE;AA0BD,wBAAgB,yBAAyB,CAAC,EACxC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,OAAO,EACP,eAAe,EACf,eAAe,EACf,cAAc,GACf,EAAE,8BAA8B,2CA4KhC"}

package/dist/components/supplier-invoice-form-dialog.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Upload } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { useSupplierInvoiceMutation, } from "../index.js";
+import { AsyncCombobox } from "./async-combobox.js";
+const STATUS_ORDER = [
+    "draft",
+    "received",
+    "approved",
+    "partially_paid",
+    "paid",
+    "disputed",
+    "void",
+];
+function seed(invoice) {
+    return {
+        supplierInvoiceNo: invoice?.supplierInvoiceNo ?? "",
+        supplierId: invoice?.supplierId ?? "",
+        status: invoice?.status ?? "received",
+        currency: invoice?.currency ?? "EUR",
+        issueDate: invoice?.issueDate ?? "",
+        dueDate: invoice?.dueDate ?? "",
+        internalRef: invoice?.internalRef ?? "",
+        notes: invoice?.notes ?? "",
+    };
+}
+export function SupplierInvoiceFormDialog({ open, onOpenChange, invoice, onSaved, extractFromFile, searchSuppliers, createSupplier, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const t = messages.supplierInvoiceDetail.form;
+    const statusLabels = messages.supplierInvoicesPage.statusLabels;
+    const { create, update } = useSupplierInvoiceMutation();
+    const isEdit = Boolean(invoice);
+    const pending = create.isPending || update.isPending;
+    const [form, setForm] = useState(() => seed(invoice));
+    const [extracting, setExtracting] = useState(false);
+    const handleExtract = async (file) => {
+        if (!file || !extractFromFile)
+            return;
+        setExtracting(true);
+        try {
+            const x = await extractFromFile(file);
+            setForm((prev) => ({
+                supplierInvoiceNo: x.supplierInvoiceNo ?? prev.supplierInvoiceNo,
+                supplierId: x.supplierId ?? prev.supplierId,
+                status: x.status ?? prev.status,
+                currency: x.currency ?? prev.currency,
+                issueDate: x.issueDate ?? prev.issueDate,
+                dueDate: x.dueDate ?? prev.dueDate,
+                internalRef: x.internalRef ?? prev.internalRef,
+                notes: x.notes ?? prev.notes,
+            }));
+        }
+        finally {
+            setExtracting(false);
+        }
+    };
+    // Re-seed when the dialog opens or the target invoice changes.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-seed on open/target change only -- owner: finance-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        if (open)
+            setForm(seed(invoice));
+    }, [open, invoice?.id]);
+    const set = (patch) => setForm((prev) => ({ ...prev, ...patch }));
+    const canSave = form.supplierInvoiceNo.trim() && form.supplierId.trim() && form.issueDate;
+    const submit = () => {
+        if (!canSave)
+            return;
+        const payload = {
+            supplierId: form.supplierId.trim(),
+            supplierInvoiceNo: form.supplierInvoiceNo.trim(),
+            status: form.status,
+            currency: form.currency.trim().toUpperCase(),
+            issueDate: form.issueDate,
+            dueDate: form.dueDate || null,
+            internalRef: form.internalRef.trim() || null,
+            notes: form.notes.trim() || null,
+        };
+        const onDone = (id) => {
+            onOpenChange(false);
+            onSaved?.(id);
+        };
+        if (invoice) {
+            update.mutate({ id: invoice.id, input: payload }, { onSuccess: (row) => onDone(row?.id ?? invoice.id) });
+        }
+        else {
+            create.mutate(payload, { onSuccess: (row) => row && onDone(row.id) });
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEdit ? t.editTitle : messages.supplierInvoicesPage.recordInvoice }) }), _jsxs(DialogBody, { className: "grid grid-cols-2 gap-3", children: [extractFromFile ? (_jsxs("label", { className: "col-span-2 cursor-pointer", children: [_jsxs("span", { className: "inline-flex h-9 items-center gap-2 rounded-md border border-dashed px-3 text-sm font-medium hover:bg-muted", children: [_jsx(Upload, { className: "size-4" }), extracting ? t.extracting : t.extractUpload] }), _jsx("input", { type: "file", className: "sr-only", disabled: extracting, onChange: (e) => {
+                                        void handleExtract(e.target.files?.[0]);
+                                        e.target.value = "";
+                                    } })] })) : null, _jsx(Field, { label: t.supplierInvoiceNo, children: _jsx(Input, { value: form.supplierInvoiceNo, onChange: (e) => set({ supplierInvoiceNo: e.target.value }) }) }), _jsx(Field, { label: t.supplierId, children: searchSuppliers ? (_jsx(AsyncCombobox, { value: form.supplierId || null, onChange: (v) => set({ supplierId: v ?? "" }), search: searchSuppliers, onCreate: createSupplier, createLabel: (name) => formatMessage(t.supplierCreate, { name }), placeholder: t.supplierSearchPlaceholder })) : (_jsx(Input, { value: form.supplierId, onChange: (e) => set({ supplierId: e.target.value }) })) }), _jsx(Field, { label: t.status, children: _jsxs(Select, { value: form.status, onValueChange: (v) => set({ status: v ?? "received" }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: STATUS_ORDER.map((s) => (_jsx(SelectItem, { value: s, children: statusLabels[s] }, s))) })] }) }), _jsx(Field, { label: t.currency, children: _jsx(CurrencyCombobox, { value: form.currency || null, onChange: (v) => set({ currency: v ?? "" }), className: "w-full" }) }), _jsx(Field, { label: t.issueDate, children: _jsx(DatePicker, { value: form.issueDate || null, onChange: (v) => set({ issueDate: v ?? "" }), className: "w-full" }) }), _jsx(Field, { label: t.dueDate, children: _jsx(DatePicker, { value: form.dueDate || null, onChange: (v) => set({ dueDate: v ?? "" }), className: "w-full" }) }), _jsx(Field, { label: t.internalRef, className: "col-span-2", children: _jsx(Input, { value: form.internalRef, onChange: (e) => set({ internalRef: e.target.value }) }) }), _jsx(Field, { label: t.notes, className: "col-span-2", children: _jsx(Textarea, { value: form.notes, onChange: (e) => set({ notes: e.target.value }) }) })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "button", disabled: !canSave || pending, onClick: submit, children: pending ? t.saving : t.save }) })] }) }));
+}
+function Field({ label, className, children, }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsx(Label, { children: label }), children] }));
+}

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

@@ -0,0 +1,14 @@
+import type { AsyncComboboxOption } from "./async-combobox.js";
+import { type SupplierInvoiceExtraction } from "./supplier-invoice-form-dialog.js";
+export interface SupplierInvoicesPageProps {
+    className?: string;
+    onOpenSupplierInvoice?: (id: string) => void;
+    /** Optional invoice-extraction extension point for the create dialog. */
+    extractFromFile?: (file: File) => Promise<SupplierInvoiceExtraction>;
+    /** Search suppliers for the create dialog's supplier picker. */
+    searchSuppliers?: (query: string) => Promise<AsyncComboboxOption[]>;
+    /** Create a supplier inline from the create dialog's supplier picker. */
+    createSupplier?: (name: string) => Promise<AsyncComboboxOption | null>;
+}
+export declare function SupplierInvoicesPage({ className, onOpenSupplierInvoice, extractFromFile, searchSuppliers, createSupplier, }?: SupplierInvoicesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=supplier-invoices-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"supplier-invoices-page.d.ts","sourceRoot":"","sources":["../../src/components/supplier-invoices-page.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAO9D,OAAO,EACL,KAAK,yBAAyB,EAE/B,MAAM,mCAAmC,CAAA;AA4B1C,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,yEAAyE;IACzE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,yBAAyB,CAAC,CAAA;IACpE,gEAAgE;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAA;IACnE,yEAAyE;IACzE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CACvE;AAID,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,GACf,GAAE,yBAA8B,2CAwLhC"}

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Plus, Search } from "lucide-react";
+import { useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { useSupplierInvoices, } from "../index.js";
+import { formatInvoiceAmount, InvoiceRowSkeleton, PaginationBar, SortHeader, } from "./invoice-table-parts.js";
+import { SupplierInvoiceFormDialog, } from "./supplier-invoice-form-dialog.js";
+const PAGE_SIZE = 25;
+const STATUS_ALL = "__all__";
+const STATUS_ORDER = [
+    "draft",
+    "received",
+    "approved",
+    "partially_paid",
+    "paid",
+    "disputed",
+    "void",
+];
+const STATUS_VARIANT = {
+    draft: "outline",
+    received: "secondary",
+    approved: "secondary",
+    partially_paid: "default",
+    paid: "default",
+    disputed: "destructive",
+    void: "outline",
+};
+export function SupplierInvoicesPage({ className, onOpenSupplierInvoice, extractFromFile, searchSuppliers, createSupplier, } = {}) {
+    const t = useFinanceUiMessagesOrDefault().supplierInvoicesPage;
+    const [createOpen, setCreateOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState(STATUS_ALL);
+    const [sortBy, setSortBy] = useState("createdAt");
+    const [sortDir, setSortDir] = useState("desc");
+    const [pageIndex, setPageIndex] = useState(0);
+    const { data, isPending, isFetching, isError } = useSupplierInvoices({
+        search: search || undefined,
+        status: status === STATUS_ALL ? undefined : status,
+        sortBy,
+        sortDir,
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+    });
+    const invoices = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = pageIndex + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && invoices.length === 0);
+    const onSort = (field) => {
+        if (sortBy === field) {
+            setSortDir((dir) => (dir === "asc" ? "desc" : "asc"));
+        }
+        else {
+            setSortBy(field);
+            setSortDir("desc");
+        }
+        setPageIndex(0);
+    };
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: t.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.description })] }), _jsxs(Button, { onClick: () => setCreateOpen(true), children: [_jsx(Plus, { className: "size-4" }), t.recordInvoice] })] }), _jsx(SupplierInvoiceFormDialog, { open: createOpen, onOpenChange: setCreateOpen, onSaved: (id) => onOpenSupplierInvoice?.(id), extractFromFile: extractFromFile, searchSuppliers: searchSuppliers, createSupplier: createSupplier }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative max-w-sm flex-1", children: [_jsx(Search, { className: "absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t.searchPlaceholder, value: search, onChange: (event) => {
+                                    setSearch(event.target.value);
+                                    setPageIndex(0);
+                                } })] }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                            setStatus(value ?? STATUS_ALL);
+                            setPageIndex(0);
+                        }, children: [_jsx(SelectTrigger, { className: "w-48", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: t.statusAll }), STATUS_ORDER.map((value) => (_jsx(SelectItem, { value: value, children: t.statusLabels[value] }, value)))] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t.columns.invoiceNo }), _jsx(TableHead, { children: t.columns.supplier }), _jsx(TableHead, { children: t.columns.status }), _jsx(TableHead, { className: "text-right", children: _jsx(SortHeader, { label: t.columns.total, field: "totalCents", sortBy: sortBy, sortDir: sortDir, onSort: onSort }) }), _jsx(TableHead, { className: "text-right", children: _jsx(SortHeader, { label: t.columns.balanceDue, field: "balanceDueCents", sortBy: sortBy, sortDir: sortDir, onSort: onSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: t.columns.dueDate, field: "dueDate", sortBy: sortBy, sortDir: sortDir, onSort: onSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(InvoiceRowSkeleton, { rows: 6 })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "text-center text-destructive", children: t.loadFailed }) })) : invoices.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "text-center text-muted-foreground", children: t.empty }) })) : (invoices.map((invoice) => (_jsxs(TableRow, { className: onOpenSupplierInvoice ? "cursor-pointer" : undefined, onClick: onOpenSupplierInvoice ? () => onOpenSupplierInvoice(invoice.id) : undefined, children: [_jsx(TableCell, { className: "font-medium", children: invoice.supplierInvoiceNo }), _jsx(TableCell, { className: "text-muted-foreground", children: invoice.supplierId }), _jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[invoice.status], children: t.statusLabels[invoice.status] }) }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(invoice.totalCents, invoice.currency) }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatInvoiceAmount(invoice.balanceDueCents, invoice.currency) }), _jsx(TableCell, { children: invoice.dueDate ?? t.noDueDate })] }, invoice.id)))) })] }) }), _jsx(PaginationBar, { shown: invoices.length, total: total, page: page, pageCount: pageCount, onPrevious: () => setPageIndex((index) => Math.max(0, index - 1)), onNext: () => setPageIndex((index) => Math.min(pageCount - 1, index + 1)), canGoBack: page > 1, canGoForward: page < pageCount })] }));
+}

package/dist/components/supplier-payment-dialog.d.ts

@@ -0,0 +1,7 @@
+export interface SupplierPaymentDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess?: () => void;
+}
+export declare function SupplierPaymentDialog({ open, onOpenChange, onSuccess, }: SupplierPaymentDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=supplier-payment-dialog.d.ts.map

package/dist/components/supplier-payment-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supplier-payment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/supplier-payment-dialog.tsx"],"names":[],"mappings":"AAsDA,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,GACV,EAAE,0BAA0B,2CA0O5B"}

package/dist/components/supplier-payment-dialog.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookingCombobox } from "@voyant-travel/bookings-react/ui";
+import { SupplierCombobox } from "@voyant-travel/distribution-react/suppliers/ui";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useFinanceUiMessagesOrDefault } from "../i18n/index.js";
+import { supplierPaymentMethods, supplierPaymentStatuses } from "../i18n/messages.js";
+import { useSupplierPaymentMutation } from "../index.js";
+function createSupplierPaymentFormSchema(messages) {
+    return z.object({
+        bookingId: z.string().min(1, messages.supplierPaymentDialog.validation.bookingIdRequired),
+        supplierId: z.string().optional().nullable(),
+        amountCents: z.coerce
+            .number()
+            .int()
+            .min(1, messages.supplierPaymentDialog.validation.amountMinimum),
+        currency: z.string().min(3).max(3),
+        paymentMethod: z.enum(supplierPaymentMethods),
+        status: z.enum(supplierPaymentStatuses),
+        referenceNumber: z.string().optional().nullable(),
+        paymentDate: z.string().min(1, messages.supplierPaymentDialog.validation.paymentDateRequired),
+        notes: z.string().optional().nullable(),
+    });
+}
+export function SupplierPaymentDialog({ open, onOpenChange, onSuccess, }) {
+    const { create } = useSupplierPaymentMutation();
+    const messages = useFinanceUiMessagesOrDefault();
+    const supplierPaymentFormSchema = createSupplierPaymentFormSchema(messages);
+    const form = useForm({
+        resolver: zodResolver(supplierPaymentFormSchema),
+        defaultValues: {
+            bookingId: "",
+            supplierId: "",
+            amountCents: 0,
+            currency: "EUR", // i18n-literal-ok domain default currency
+            paymentMethod: "bank_transfer",
+            status: "completed",
+            referenceNumber: "",
+            paymentDate: "",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open) {
+            const today = new Date().toISOString().split("T")[0];
+            form.reset({
+                bookingId: "",
+                supplierId: "",
+                amountCents: 0,
+                currency: "EUR", // i18n-literal-ok domain default currency
+                paymentMethod: "bank_transfer",
+                status: "completed",
+                referenceNumber: "",
+                paymentDate: today,
+                notes: "",
+            });
+        }
+    }, [open, form]);
+    const onSubmit = async (values) => {
+        await create.mutateAsync({
+            bookingId: values.bookingId,
+            supplierId: values.supplierId || null,
+            amountCents: values.amountCents,
+            currency: values.currency,
+            paymentMethod: values.paymentMethod,
+            status: values.status,
+            referenceNumber: values.referenceNumber || null,
+            paymentDate: values.paymentDate,
+            notes: values.notes || null,
+        });
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.supplierPaymentDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.bookingId }), _jsx(BookingCombobox, { value: form.watch("bookingId") || null, onChange: (next) => form.setValue("bookingId", next ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: messages.supplierPaymentDialog.placeholders.bookingId }), form.formState.errors.bookingId ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.bookingId.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.supplierId }), _jsx(SupplierCombobox, { value: form.watch("supplierId") || null, onChange: (next) => form.setValue("supplierId", next ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: messages.supplierPaymentDialog.placeholders.supplierId })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.amountCents }), _jsx(CurrencyInput, { value: form.watch("amountCents"), onChange: (next) => form.setValue("amountCents", next ?? 0, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("currency") }), form.formState.errors.amountCents ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.amountCents.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? "EUR" /* i18n-literal-ok domain default currency */, {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.paymentDate }), _jsx(DatePicker, { value: form.watch("paymentDate") || null, onChange: (next) => form.setValue("paymentDate", next ?? "", {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }), placeholder: messages.supplierPaymentDialog.placeholders.paymentDate, className: "w-full" }), form.formState.errors.paymentDate ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.paymentDate.message })) : null] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.paymentMethod }), _jsxs(Select, { items: supplierPaymentMethods.map((value) => ({
+                                                        label: messages.common.supplierPaymentMethodLabels[value],
+                                                        value,
+                                                    })), value: form.watch("paymentMethod"), onValueChange: (value) => form.setValue("paymentMethod", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: supplierPaymentMethods.map((method) => (_jsx(SelectItem, { value: method, children: messages.common.supplierPaymentMethodLabels[method] }, method))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.status }), _jsxs(Select, { items: supplierPaymentStatuses.map((value) => ({
+                                                        label: messages.common.supplierPaymentStatusLabels[value],
+                                                        value,
+                                                    })), value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: supplierPaymentStatuses.map((status) => (_jsx(SelectItem, { value: status, children: messages.common.supplierPaymentStatusLabels[status] }, status))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.referenceNumber }), _jsx(Input, { ...form.register("referenceNumber"), placeholder: messages.supplierPaymentDialog.placeholders.referenceNumber })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.supplierPaymentDialog.fields.notes }), _jsx(Textarea, { ...form.register("notes"), placeholder: messages.supplierPaymentDialog.placeholders.notes })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: create.isPending, children: [create.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, messages.supplierPaymentDialog.actions.create] })] })] })] }) }));
+}

package/dist/components/taxes-page/policy-profile-sheet.d.ts

@@ -0,0 +1,8 @@
+import type { TaxPolicyProfileRecord } from "./shared.js";
+export declare function PolicyProfileSheet({ open, onOpenChange, profile, onSuccess, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    profile?: TaxPolicyProfileRecord;
+    onSuccess: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=policy-profile-sheet.d.ts.map

package/dist/components/taxes-page/policy-profile-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"policy-profile-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/taxes-page/policy-profile-sheet.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAA0B,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAGjF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAgHA"}

package/dist/components/taxes-page/policy-profile-sheet.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button, Input, Label, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Switch, Textarea, } from "@voyant-travel/ui/components";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFinanceUiMessagesOrDefault } from "../../i18n/index.js";
+import { initialPolicyProfileForm, toSlug, useTaxesPageApi } from "./shared.js";
+export function PolicyProfileSheet({ open, onOpenChange, profile, onSuccess, }) {
+    const messages = useFinanceUiMessagesOrDefault();
+    const taxMessages = messages.taxesPage;
+    const api = useTaxesPageApi();
+    const [form, setForm] = useState(() => initialPolicyProfileForm(profile));
+    const [error, setError] = useState(null);
+    const isEditing = !!profile;
+    useEffect(() => {
+        setForm(initialPolicyProfileForm(profile));
+        setError(null);
+    }, [profile]);
+    const mutation = useMutation({
+        mutationFn: async () => {
+            if (!form.name.trim())
+                throw new Error(taxMessages.validationPolicyProfileNameRequired);
+            const input = {
+                name: form.name.trim(),
+                code: form.code.trim() || toSlug(form.name),
+                jurisdiction: form.jurisdiction.trim() || null,
+                description: form.description.trim() || null,
+                active: form.active,
+            };
+            if (profile) {
+                await api.patch(`/v1/admin/finance/tax-policy-profiles/${profile.id}`, input);
+            }
+            else {
+                await api.post("/v1/admin/finance/tax-policy-profiles", input);
+            }
+        },
+        onSuccess,
+        onError: (err) => setError(err instanceof Error ? err.message : taxMessages.savePolicyProfileFailed),
+    });
+    const setField = (key) => (value) => setForm((current) => ({ ...current, [key]: value }));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing
+                            ? taxMessages.editPolicyProfileSheetTitle
+                            : taxMessages.newPolicyProfileSheetTitle }) }), _jsx(SheetBody, { children: _jsxs("form", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: taxMessages.policyProfileNameLabel }), _jsx(Input, { value: form.name, onChange: (event) => {
+                                                    const next = event.target.value;
+                                                    setForm((current) => ({
+                                                        ...current,
+                                                        name: next,
+                                                        code: current.code || toSlug(next),
+                                                    }));
+                                                }, placeholder: taxMessages.policyProfileNamePlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: taxMessages.policyProfileCodeLabel }), _jsx(Input, { value: form.code, onChange: (event) => setField("code")(event.target.value), placeholder: taxMessages.policyProfileCodePlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: taxMessages.jurisdictionLabel }), _jsx(Input, { value: form.jurisdiction, onChange: (event) => setField("jurisdiction")(event.target.value.toUpperCase()), placeholder: "RO" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: taxMessages.policyProfileDescriptionLabel }), _jsx(Textarea, { value: form.description, onChange: (event) => setField("description")(event.target.value), placeholder: taxMessages.policyProfileDescriptionPlaceholder })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.active, onCheckedChange: setField("active") }), _jsx(Label, { children: taxMessages.activeLabel })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }) }), _jsxs(SheetFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: taxMessages.cancel }), _jsxs(Button, { onClick: () => mutation.mutate(), disabled: mutation.isPending, children: [mutation.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? taxMessages.saveChanges : taxMessages.createPolicyProfile] })] })] }) }));
+}

package/dist/components/taxes-page/policy-rule-sheet.d.ts

@@ -0,0 +1,10 @@
+import type { TaxPolicyRuleRecord, TaxRegimeRecord } from "./shared.js";
+export declare function PolicyRuleSheet({ open, onOpenChange, rule, profileId, taxRegimes, onSuccess, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    rule?: TaxPolicyRuleRecord;
+    profileId: string;
+    taxRegimes: TaxRegimeRecord[];
+    onSuccess: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=policy-rule-sheet.d.ts.map

package/dist/components/taxes-page/policy-rule-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"policy-rule-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/taxes-page/policy-rule-sheet.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAMV,mBAAmB,EAEnB,eAAe,EAChB,MAAM,aAAa,CAAA;AAapB,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAwYA"}