@voyantjs/bookings-ui 0.52.1 → 0.52.2

package/dist/components/booking-create-page.js

@@ -7,5 +7,5 @@ import { BookingCreateForm } from "./booking-create-dialog.js";
  */
 export function BookingCreatePage({ onCreated, onCancel, defaultProductId, }) {
     const messages = useBookingsUiMessagesOrDefault();
-    return (_jsxs("main", { className: "mx-auto flex w-full max-w-4xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-normal", children: messages.bookingCreatePage.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.bookingCreatePage.description })] }), _jsx("section", { className: "flex flex-col gap-4", children: _jsx(BookingCreateForm, { onCreated: onCreated, onCancel: onCancel, defaultProductId: defaultProductId }) })] }));
+    return (_jsxs("main", { className: "mx-auto flex w-full max-w-screen-2xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-normal", children: messages.bookingCreatePage.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.bookingCreatePage.description })] }), _jsx("section", { className: "flex flex-col gap-4", children: _jsx(BookingCreateForm, { onCreated: onCreated, onCancel: onCancel, defaultProductId: defaultProductId }) })] }));
 }

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

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

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

@@ -5,7 +5,7 @@ import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader,
 import { DatePicker } from "@voyantjs/ui/components/date-picker";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
@@ -31,6 +31,20 @@ export function BookingDocumentDialog({ open, onOpenChange, bookingId, onSuccess
     const travelers = travelersData?.data ?? [];
     const messages = useBookingsUiMessagesOrDefault();
     const documentFormSchema = createDocumentFormSchema(messages);
+    const typeItems = useMemo(() => documentTypes.map((t) => ({
+        value: t,
+        label: messages.bookingDocumentDialog.documentTypeLabels[t],
+    })), [messages.bookingDocumentDialog.documentTypeLabels]);
+    const travelerItems = useMemo(() => [
+        {
+            value: UNASSIGNED,
+            label: messages.bookingDocumentDialog.placeholders.travelerUnassigned,
+        },
+        ...travelers.map((t) => ({
+            value: t.id,
+            label: `${t.firstName} ${t.lastName}`,
+        })),
+    ], [travelers, messages.bookingDocumentDialog.placeholders.travelerUnassigned]);
     const form = useForm({
         resolver: zodResolver(documentFormSchema),
         defaultValues: {
@@ -59,19 +73,7 @@ export function BookingDocumentDialog({ open, onOpenChange, bookingId, onSuccess
         onOpenChange(false);
         onSuccess?.();
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.bookingDocumentDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.bookingDocumentDialog.fields.type }), _jsxs(Select, { items: documentTypes.map((t) => ({
-                                                        label: messages.bookingDocumentDialog.documentTypeLabels[t],
-                                                        value: t,
-                                                    })), value: form.watch("type"), onValueChange: (v) => form.setValue("type", (v ?? "other")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: documentTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingDocumentDialog.documentTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.traveler }), _jsxs(Select, { items: [
-                                                        {
-                                                            label: messages.bookingDocumentDialog.placeholders.travelerUnassigned,
-                                                            value: UNASSIGNED,
-                                                        },
-                                                        ...travelers.map((traveler) => ({
-                                                            label: `${traveler.firstName} ${traveler.lastName}`,
-                                                            value: traveler.id,
-                                                        })),
-                                                    ], value: form.watch("travelerId") ?? UNASSIGNED, onValueChange: (v) => form.setValue("travelerId", v ?? UNASSIGNED), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: UNASSIGNED, children: messages.bookingDocumentDialog.placeholders.travelerUnassigned }), travelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id)))] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.file }), _jsx(FileDropzone, { accept: "application/pdf,image/*", maxSize: 10 * 1024 * 1024, onUploaded: (upload) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.bookingDocumentDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.bookingDocumentDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("type"), onValueChange: (v) => form.setValue("type", (v ?? "other")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: documentTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingDocumentDialog.documentTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.traveler }), _jsxs(Select, { items: travelerItems, value: form.watch("travelerId") ?? UNASSIGNED, onValueChange: (v) => form.setValue("travelerId", v ?? UNASSIGNED), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: UNASSIGNED, children: messages.bookingDocumentDialog.placeholders.travelerUnassigned }), travelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id)))] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.file }), _jsx(FileDropzone, { accept: "application/pdf,image/*", maxSize: 10 * 1024 * 1024, onUploaded: (upload) => {
                                                 form.setValue("fileUrl", upload.url, { shouldValidate: true });
                                                 form.setValue("fileName", upload.name, { shouldValidate: true });
                                             }, helperText: messages.bookingDocumentDialog.placeholders.helperText }), form.formState.errors.fileUrl && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.fileUrl.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.expiresAt }), _jsx(DatePicker, { value: form.watch("expiresAt") || null, onChange: (next) => form.setValue("expiresAt", next ?? "", {

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

@@ -1 +1 @@
-{"version":3,"file":"booking-guarantee-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,sBAAsB,EAA+B,MAAM,yBAAyB,CAAA;AAiElG,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,sBAAsB,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CAqN7B"}
+{"version":3,"file":"booking-guarantee-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,sBAAsB,EAA+B,MAAM,yBAAyB,CAAA;AAiElG,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,sBAAsB,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CA+N7B"}

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

@@ -7,7 +7,7 @@ import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { DateTimePicker } from "@voyantjs/ui/components/date-time-picker";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
@@ -47,6 +47,14 @@ export function BookingGuaranteeDialog({ open, onOpenChange, bookingId, guarante
     const { create, update } = useBookingGuaranteeMutation(bookingId);
     const messages = useBookingsUiMessagesOrDefault();
     const guaranteeFormSchema = createGuaranteeFormSchema();
+    const typeItems = useMemo(() => guaranteeTypes.map((t) => ({
+        value: t,
+        label: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t],
+    })), [messages.bookingGuaranteeDialog.guaranteeTypeLabels]);
+    const statusItems = useMemo(() => guaranteeStatuses.map((s) => ({
+        value: s,
+        label: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s],
+    })), [messages.bookingGuaranteeDialog.guaranteeStatusLabels]);
     const form = useForm({
         resolver: zodResolver(guaranteeFormSchema),
         defaultValues: {
@@ -100,13 +108,7 @@ export function BookingGuaranteeDialog({ open, onOpenChange, bookingId, guarante
     const isSubmitting = create.isPending || update.isPending;
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
                             ? messages.bookingGuaranteeDialog.titles.edit
-                            : messages.bookingGuaranteeDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.bookingGuaranteeDialog.fields.type }), _jsxs(Select, { items: guaranteeTypes.map((t) => ({
-                                                        label: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t],
-                                                        value: t,
-                                                    })), value: form.watch("guaranteeType"), onValueChange: (v) => form.setValue("guaranteeType", (v ?? "deposit")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.status }), _jsxs(Select, { items: guaranteeStatuses.map((s) => ({
-                                                        label: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s],
-                                                        value: s,
-                                                    })), value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? DEFAULT_CURRENCY, {
+                            : messages.bookingGuaranteeDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.bookingGuaranteeDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("guaranteeType"), onValueChange: (v) => form.setValue("guaranteeType", (v ?? "deposit")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? DEFAULT_CURRENCY, {
                                                         shouldValidate: true,
                                                         shouldDirty: true,
                                                     }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.amountCents }), _jsx(CurrencyInput, { value: form.watch("amountCents"), onChange: (next) => form.setValue("amountCents", next, {

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

@@ -1 +1 @@
-{"version":3,"file":"booking-item-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAA0B,MAAM,0BAA0B,CAAA;AAiEzF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,2CA2RxB"}
+{"version":3,"file":"booking-item-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAA0B,MAAM,0BAA0B,CAAA;AAiEzF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,2CA4SxB"}

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

@@ -7,7 +7,7 @@ import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { DatePicker } from "@voyantjs/ui/components/date-picker";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
@@ -47,6 +47,14 @@ export function BookingItemDialog({ open, onOpenChange, bookingId, item, onSucce
     const { create, update } = useBookingItemMutation(bookingId);
     const messages = useBookingsUiMessagesOrDefault();
     const bookingItemFormSchema = createBookingItemFormSchema(messages);
+    const typeItems = useMemo(() => itemTypes.map((t) => ({
+        value: t,
+        label: messages.bookingItemDialog.itemTypeLabels[t],
+    })), [messages.bookingItemDialog.itemTypeLabels]);
+    const statusItems = useMemo(() => itemStatuses.map((s) => ({
+        value: s,
+        label: messages.bookingItemDialog.itemStatusLabels[s],
+    })), [messages.bookingItemDialog.itemStatusLabels]);
     const form = useForm({
         resolver: zodResolver(bookingItemFormSchema),
         defaultValues: {
@@ -65,6 +73,13 @@ export function BookingItemDialog({ open, onOpenChange, bookingId, item, onSucce
             notes: "",
         },
     });
+    // `form` is intentionally omitted from deps — react-hook-form returns
+    // a fresh wrapper object on every render even though the underlying
+    // state lives in a ref. Including `form` here would re-run the effect
+    // on every render and re-trigger reset → re-render → loop. The methods
+    // we call (`reset`) are safe to call from a stale closure since they
+    // dispatch into the form's internal store.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see comment above
     useEffect(() => {
         if (open && item) {
             form.reset({
@@ -86,7 +101,7 @@ export function BookingItemDialog({ open, onOpenChange, bookingId, item, onSucce
         else if (open) {
             form.reset();
         }
-    }, [form, open, item]);
+    }, [open, item]);
     const onSubmit = async (values) => {
         const payload = {
             title: values.title,
@@ -115,13 +130,7 @@ export function BookingItemDialog({ open, onOpenChange, bookingId, item, onSucce
     const isSubmitting = create.isPending || update.isPending;
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
                             ? messages.bookingItemDialog.titles.edit
-                            : messages.bookingItemDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.title }), _jsx(Input, { ...form.register("title"), placeholder: messages.bookingItemDialog.placeholders.title }), form.formState.errors.title && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.title.message }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.type }), _jsxs(Select, { items: itemTypes.map((t) => ({
-                                                        label: messages.bookingItemDialog.itemTypeLabels[t],
-                                                        value: t,
-                                                    })), value: form.watch("itemType"), onValueChange: (v) => form.setValue("itemType", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingItemDialog.itemTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.status }), _jsxs(Select, { items: itemStatuses.map((s) => ({
-                                                        label: messages.bookingItemDialog.itemStatusLabels[s],
-                                                        value: s,
-                                                    })), value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingItemDialog.itemStatusLabels[s] }, s))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.quantity }), _jsx(Input, { ...form.register("quantity"), type: "number", min: 1 })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.sellCurrency }), _jsx(CurrencyCombobox, { value: form.watch("sellCurrency") || null, onChange: (next) => form.setValue("sellCurrency", next ?? DEFAULT_CURRENCY, {
+                            : messages.bookingItemDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.title }), _jsx(Input, { ...form.register("title"), placeholder: messages.bookingItemDialog.placeholders.title }), form.formState.errors.title && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.title.message }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("itemType"), onValueChange: (v) => form.setValue("itemType", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingItemDialog.itemTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingItemDialog.itemStatusLabels[s] }, s))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.quantity }), _jsx(Input, { ...form.register("quantity"), type: "number", min: 1 })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.sellCurrency }), _jsx(CurrencyCombobox, { value: form.watch("sellCurrency") || null, onChange: (next) => form.setValue("sellCurrency", next ?? DEFAULT_CURRENCY, {
                                                         shouldValidate: true,
                                                         shouldDirty: true,
                                                     }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.unitSellAmountCents }), _jsx(CurrencyInput, { value: form.watch("unitSellAmountCents"), onChange: (next) => form.setValue("unitSellAmountCents", next, {

package/dist/components/booking-item-travelers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-item-travelers.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-travelers.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CA6IpF"}
+{"version":3,"file":"booking-item-travelers.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-travelers.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CAwJpF"}

package/dist/components/booking-item-travelers.js

@@ -24,6 +24,14 @@ export function BookingItemTravelers({ bookingId, itemId }) {
     const travelers = travelersData?.data ?? [];
     const assignedIds = new Set(assignedTravelers.map((link) => link.travelerId));
     const availableTravelers = travelers.filter((traveler) => !assignedIds.has(traveler.id));
+    const travelerItems = React.useMemo(() => availableTravelers.map((t) => ({
+        value: t.id,
+        label: `${t.firstName} ${t.lastName}`,
+    })), [availableTravelers]);
+    const roleItems = React.useMemo(() => roles.map((r) => ({
+        value: r,
+        label: messages.bookingItemTravelers.roleLabels[r],
+    })), [messages.bookingItemTravelers.roleLabels]);
     const travelerMap = new Map();
     for (const traveler of travelers) {
         travelerMap.set(traveler.id, traveler);
@@ -45,11 +53,5 @@ export function BookingItemTravelers({ bookingId, itemId }) {
                                         remove.mutate(link.id);
                                     }
                                 }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, link.id));
-                }) })), availableTravelers.length > 0 && (_jsxs("div", { className: "flex items-end gap-2 border-t pt-3", children: [_jsx("div", { className: "flex-1", children: _jsxs(Select, { items: availableTravelers.map((traveler) => ({
-                                label: `${traveler.firstName} ${traveler.lastName}`,
-                                value: traveler.id,
-                            })), value: selectedTravelerId, onValueChange: (v) => setSelectedTravelerId(v ?? ""), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, { placeholder: messages.bookingItemTravelers.selectTravelerPlaceholder }) }), _jsx(SelectContent, { children: availableTravelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id))) })] }) }), _jsx("div", { className: "w-36", children: _jsxs(Select, { items: roles.map((r) => ({
-                                label: messages.bookingItemTravelers.roleLabels[r],
-                                value: r,
-                            })), value: selectedRole, onValueChange: (v) => setSelectedRole(v ?? "traveler"), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: roles.map((r) => (_jsx(SelectItem, { value: r, children: messages.bookingItemTravelers.roleLabels[r] }, r))) })] }) }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8", onClick: handleAssign, disabled: !selectedTravelerId || add.isPending, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), messages.bookingItemTravelers.actions.assign] })] }))] }));
+                }) })), availableTravelers.length > 0 && (_jsxs("div", { className: "flex items-end gap-2 border-t pt-3", children: [_jsx("div", { className: "flex-1", children: _jsxs(Select, { items: travelerItems, value: selectedTravelerId, onValueChange: (v) => setSelectedTravelerId(v ?? ""), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, { placeholder: messages.bookingItemTravelers.selectTravelerPlaceholder }) }), _jsx(SelectContent, { children: availableTravelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id))) })] }) }), _jsx("div", { className: "w-36", children: _jsxs(Select, { items: roleItems, value: selectedRole, onValueChange: (v) => setSelectedRole(v ?? "traveler"), children: [_jsx(SelectTrigger, { className: "w-full h-8 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: roles.map((r) => (_jsx(SelectItem, { value: r, children: messages.bookingItemTravelers.roleLabels[r] }, r))) })] }) }), _jsxs(Button, { size: "sm", variant: "outline", className: "h-8", onClick: handleAssign, disabled: !selectedTravelerId || add.isPending, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), messages.bookingItemTravelers.actions.assign] })] }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"booking-payment-schedule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,4BAA4B,EAElC,MAAM,yBAAyB,CAAA;AAgDhC,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,4BAA4B,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,iCAAiC,2CAsMnC"}
+{"version":3,"file":"booking-payment-schedule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,4BAA4B,EAElC,MAAM,yBAAyB,CAAA;AAgDhC,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,4BAA4B,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,iCAAiC,2CAgNnC"}

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

@@ -7,7 +7,7 @@ import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { DatePicker } from "@voyantjs/ui/components/date-picker";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
@@ -32,6 +32,14 @@ export function BookingPaymentScheduleDialog({ open, onOpenChange, bookingId, sc
     const { create, update } = useBookingPaymentScheduleMutation(bookingId);
     const messages = useBookingsUiMessagesOrDefault();
     const scheduleFormSchema = createScheduleFormSchema(messages);
+    const typeItems = useMemo(() => scheduleTypes.map((t) => ({
+        value: t,
+        label: messages.paymentScheduleDialog.scheduleTypeLabels[t],
+    })), [messages.paymentScheduleDialog.scheduleTypeLabels]);
+    const statusItems = useMemo(() => scheduleStatuses.map((s) => ({
+        value: s,
+        label: messages.paymentScheduleDialog.scheduleStatusLabels[s],
+    })), [messages.paymentScheduleDialog.scheduleStatusLabels]);
     const form = useForm({
         resolver: zodResolver(scheduleFormSchema),
         defaultValues: {
@@ -79,13 +87,7 @@ export function BookingPaymentScheduleDialog({ open, onOpenChange, bookingId, sc
     const isSubmitting = create.isPending || update.isPending;
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
                             ? messages.paymentScheduleDialog.titles.edit
-                            : messages.paymentScheduleDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.paymentScheduleDialog.fields.type }), _jsxs(Select, { items: scheduleTypes.map((t) => ({
-                                                        label: messages.paymentScheduleDialog.scheduleTypeLabels[t],
-                                                        value: t,
-                                                    })), value: form.watch("scheduleType"), onValueChange: (v) => form.setValue("scheduleType", (v ?? "balance")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.paymentScheduleDialog.scheduleTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.status }), _jsxs(Select, { items: scheduleStatuses.map((s) => ({
-                                                        label: messages.paymentScheduleDialog.scheduleStatusLabels[s],
-                                                        value: s,
-                                                    })), value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.paymentScheduleDialog.scheduleStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.dueDate }), _jsx(DatePicker, { value: form.watch("dueDate") || null, onChange: (next) => form.setValue("dueDate", next ?? "", {
+                            : messages.paymentScheduleDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", 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.paymentScheduleDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("scheduleType"), onValueChange: (v) => form.setValue("scheduleType", (v ?? "balance")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.paymentScheduleDialog.scheduleTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: scheduleStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.paymentScheduleDialog.scheduleStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.dueDate }), _jsx(DatePicker, { value: form.watch("dueDate") || null, onChange: (next) => form.setValue("dueDate", next ?? "", {
                                                 shouldValidate: true,
                                                 shouldDirty: true,
                                             }), placeholder: messages.paymentScheduleDialog.placeholders.dueDate, className: "w-full" }), form.formState.errors.dueDate && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.dueDate.message }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.paymentScheduleDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? DEFAULT_CURRENCY, {

package/dist/components/booking-payment-schedule-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"booking-payment-schedule-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-list.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,+BAA+B;IAC9C,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,+BAA+B,2CA8HxF"}
+{"version":3,"file":"booking-payment-schedule-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-payment-schedule-list.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,+BAA+B;IAC9C,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,+BAA+B,2CA4LxF"}

package/dist/components/booking-payment-schedule-list.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBookingPaymentScheduleMutation, useBookingPaymentSchedules, } from "@voyantjs/finance-react";
+import { useBooking } from "@voyantjs/bookings-react";
+import { useBookingPaymentScheduleMutation, useBookingPaymentSchedules, useInvoiceMutation, } from "@voyantjs/finance-react";
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
-import { CalendarClock, Pencil, Plus, Trash2 } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@voyantjs/ui/components/dropdown-menu";
+import { CalendarClock, FileText, Loader2, Pencil, Plus, Receipt, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 import { BookingPaymentScheduleDialog } from "./booking-payment-schedule-dialog.js";
@@ -17,16 +19,43 @@ const statusVariant = {
 export function BookingPaymentScheduleList({ bookingId }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editing, setEditing] = React.useState(undefined);
+    const [generatingInvoiceForId, setGeneratingInvoiceForId] = React.useState(null);
     const { data } = useBookingPaymentSchedules(bookingId);
     const { remove } = useBookingPaymentScheduleMutation(bookingId);
+    const { data: bookingData } = useBooking(bookingId);
+    const booking = bookingData?.data ?? null;
+    const { createFromBooking: createInvoiceFromBooking, render: renderInvoice } = useInvoiceMutation();
     const { formatCurrency } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const schedules = data?.data ?? [];
+    const handleGenerateInvoice = async (schedule, invoiceType) => {
+        if (!booking)
+            return;
+        setGeneratingInvoiceForId(schedule.id);
+        try {
+            const todayIso = new Date().toISOString().slice(0, 10);
+            const dueIso = schedule.dueDate || todayIso;
+            // i18n-literal-ok: invoice number prefix, not user-facing copy
+            const prefix = invoiceType === "proforma" ? "PRO" : "INV";
+            const invoice = await createInvoiceFromBooking.mutateAsync({
+                bookingId: booking.id,
+                invoiceNumber: `${prefix}-${booking.bookingNumber}-${schedule.scheduleType.toUpperCase().slice(0, 3)}`,
+                issueDate: todayIso,
+                dueDate: dueIso,
+                notes: schedule.notes ?? null,
+                invoiceType,
+            });
+            await renderInvoice.mutateAsync({ id: invoice.id, input: { format: "pdf" } });
+        }
+        finally {
+            setGeneratingInvoiceForId(null);
+        }
+    };
     return (_jsxs(Card, { "data-slot": "booking-payment-schedule-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(CalendarClock, { className: "h-4 w-4" }), messages.bookingPaymentScheduleList.title] }), _jsxs(Button, { size: "sm", onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
                         }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingPaymentScheduleList.addSchedule] })] }), _jsx(CardContent, { children: schedules.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingPaymentScheduleList.empty })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentScheduleList.columns.type }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentScheduleList.columns.status }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentScheduleList.columns.dueDate }), _jsx("th", { className: "p-2 text-right font-medium", children: messages.bookingPaymentScheduleList.columns.amount }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingPaymentScheduleList.columns.notes }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: schedules.map((schedule) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: messages.paymentScheduleDialog.scheduleTypeLabels[schedule.scheduleType] }), _jsx("td", { className: "p-2", children: _jsx(Badge, { variant: statusVariant[schedule.status] ?? "secondary", children: messages.paymentScheduleDialog.scheduleStatusLabels[schedule.status] }) }), _jsx("td", { className: "p-2", children: schedule.dueDate }), _jsx("td", { className: "p-2 text-right font-mono", children: formatCurrency(schedule.amountCents / 100, schedule.currency) }), _jsx("td", { className: "max-w-[200px] truncate p-2 text-muted-foreground", children: schedule.notes ??
-                                                messages.bookingPaymentScheduleList.values.notesUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
+                                                messages.bookingPaymentScheduleList.values.notesUnavailable }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { disabled: !booking || generatingInvoiceForId === schedule.id, title: messages.bookingPaymentScheduleList.actions.issueDocument, render: _jsx("button", { type: "button", className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50", children: generatingInvoiceForId === schedule.id ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Receipt, { className: "h-3.5 w-3.5" })) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => void handleGenerateInvoice(schedule, "invoice"), children: [_jsx(FileText, { className: "h-4 w-4" }), messages.bookingPaymentScheduleList.actions.issueInvoice] }), _jsxs(DropdownMenuItem, { onClick: () => void handleGenerateInvoice(schedule, "proforma"), children: [_jsx(FileText, { className: "h-4 w-4" }), messages.bookingPaymentScheduleList.actions.issueProforma] })] })] }), _jsx("button", { type: "button", onClick: () => {
                                                             setEditing(schedule);
                                                             setDialogOpen(true);
                                                         }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => {

package/dist/components/{rooms-stepper-section.d.ts → option-units-stepper-section.d.ts}

@@ -1,20 +1,28 @@
 /** Quantity per option_unit id; omitted ids are treated as 0. */
-export interface RoomsStepperValue {
+export interface OptionUnitsStepperValue {
     quantities: Record<string, number>;
 }
-export declare const emptyRoomsStepperValue: RoomsStepperValue;
-export interface RoomsStepperUnit {
+export declare const emptyOptionUnitsStepperValue: OptionUnitsStepperValue;
+export interface OptionUnitsStepperUnit {
     optionId: string | null;
     optionUnitId: string;
     unitName: string;
+    /** Stable code from the products schema (`ADULT`, `CHILD`, `SENIOR`, …) when present. */
+    unitCode?: string | null;
+    /** Inclusive lower age bound for this unit, when configured. */
+    minAge?: number | null;
+    /** Inclusive upper age bound for this unit, when configured. */
+    maxAge?: number | null;
+    /** Unit category from option_units.unitType — person/group/room/vehicle/service/other. */
+    unitType?: "person" | "group" | "room" | "vehicle" | "service" | "other" | null;
     occupancyMax: number | null;
     initial: number | null;
     reserved: number;
     remaining: number | null;
 }
-export interface RoomsStepperSectionProps {
-    value: RoomsStepperValue;
-    onChange: (value: RoomsStepperValue) => void;
+export interface OptionUnitsStepperSectionProps {
+    value: OptionUnitsStepperValue;
+    onChange: (value: OptionUnitsStepperValue) => void;
     /** Product whose options become selectable room quantity rows. */
     productId?: string;
     /**
@@ -28,7 +36,7 @@ export interface RoomsStepperSectionProps {
      */
     optionId?: string | null;
     enabled?: boolean;
-    onUnitsChange?: (units: RoomsStepperUnit[]) => void;
+    onUnitsChange?: (units: OptionUnitsStepperUnit[]) => void;
     labels?: {
         heading?: string;
         noOption?: string;
@@ -58,5 +66,5 @@ export interface RoomsStepperSectionProps {
  *   disables the "+" button — we don't let the UI submit a request that
  *   would 409 at insert time.
  */
-export declare function RoomsStepperSection({ value, onChange, productId, slotId, optionId, enabled, onUnitsChange, labels, }: RoomsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=rooms-stepper-section.d.ts.map
+export declare function OptionUnitsStepperSection({ value, onChange, productId, slotId, optionId, enabled, onUnitsChange, labels, }: OptionUnitsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=option-units-stepper-section.d.ts.map

package/dist/components/option-units-stepper-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-units-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/option-units-stepper-section.tsx"],"names":[],"mappings":"AAgBA,iEAAiE;AACjE,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,4BAA4B,EAAE,uBAA4C,CAAA;AAEvF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAA;IAC/E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB;AAED,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAClD,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAA;IACzD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAc,EACd,aAAa,EACb,MAAM,GACP,EAAE,8BAA8B,2CAqLhC"}

package/dist/components/option-units-stepper-section.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+import { useSlotUnitAvailability } from "@voyantjs/availability-react";
+import { getOptionUnitsQueryOptions, useProductOptions, useVoyantProductsContext, } from "@voyantjs/products-react";
+import { Button, Label } from "@voyantjs/ui/components";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+export const emptyOptionUnitsStepperValue = { quantities: {} };
+/**
+ * Rooms / per-unit stepper for booking-create flows. Drives
+ * `GET /v1/availability/slots/:id/unit-availability` from #235 when a
+ * departure is selected, and product option-level units before departure
+ * selection, so operators can build "2 double rooms and 1 single" drafts.
+ *
+ * The section only tracks **intent** (how many of each unit the operator
+ * wants to book). Actual hold/reservation happens when the parent submits
+ * the booking — capacity drops the moment the reservation transaction
+ * commits; the next refetch of `useSlotUnitAvailability` reflects it.
+ *
+ * ### Stepper bounds
+ *
+ * - Minimum is 0 (operator can deselect).
+ * - Maximum is the unit's `remaining` count from the server. Unlimited
+ *   pools (`remaining === null`) have no upper bound.
+ * - The server is the truth: entering `3 doubles` when only 2 remain just
+ *   disables the "+" button — we don't let the UI submit a request that
+ *   would 409 at insert time.
+ */
+export function OptionUnitsStepperSection({ value, onChange, productId, slotId, optionId, enabled = true, onUnitsChange, labels, }) {
+    const productsClient = useVoyantProductsContext();
+    const messages = useBookingsUiMessagesOrDefault();
+    const merged = { ...messages.roomsStepperSection.labels, ...labels };
+    const availability = useSlotUnitAvailability({ slotId, enabled: enabled && Boolean(slotId) });
+    // Always fetch option-level units for the product. They're needed
+    // both before a slot is picked AND as a fallback after picking a slot
+    // whose `availability_slots` row has no per-unit allocation rows wired
+    // (the default for product-level slots seeded by the operator).
+    const optionsQuery = useProductOptions({
+        productId,
+        status: "active",
+        limit: 100,
+        enabled: enabled && Boolean(productId),
+    });
+    const productOptions = React.useMemo(() => {
+        const options = optionsQuery.data?.data ?? [];
+        if (!optionId)
+            return options;
+        const selected = options.find((option) => option.id === optionId);
+        const rest = options.filter((option) => option.id !== optionId);
+        return selected ? [selected, ...rest] : options;
+    }, [optionsQuery.data?.data, optionId]);
+    const optionUnitQueries = useQueries({
+        queries: productOptions.map((option) => ({
+            ...getOptionUnitsQueryOptions(productsClient, {
+                optionId: option.id,
+                limit: 100,
+            }),
+            enabled: enabled && Boolean(productId),
+        })),
+    });
+    const optionUnitRows = React.useMemo(() => {
+        const rows = [];
+        productOptions.forEach((option, index) => {
+            const units = optionUnitQueries[index]?.data?.data ?? [];
+            rows.push(...units.map((unit) => optionUnitToStepperUnit(option, unit, units.length)));
+        });
+        return rows;
+    }, [productOptions, optionUnitQueries]);
+    const availabilityUnitRows = React.useMemo(() => (availability.data?.data ?? []).map((unit) => ({
+        ...unit,
+        optionId: optionId ?? null,
+    })), [availability.data?.data, optionId]);
+    // Slot-specific per-unit availability wins when it actually returns
+    // rows; otherwise fall back to the product's option-level units so
+    // the operator can still pick quantities. Product-level slots (no
+    // option_id) report no per-unit availability — but the product's
+    // options still describe the bookable units.
+    const units = slotId && availabilityUnitRows.length > 0 ? availabilityUnitRows : optionUnitRows;
+    React.useEffect(() => {
+        onUnitsChange?.(units);
+    }, [onUnitsChange, units]);
+    // Group the unit rows by option — operators choose how many of each
+    // *option* to book, not how many of each age-banded unit. The age
+    // categorization (Adult / Child / Senior / Infant) is derived from
+    // each traveler's date of birth and resolved on submit, so we route
+    // the per-option quantity through the option's "primary" unit
+    // (preferring `ADULT` by code, otherwise the first unit) here.
+    const optionRows = React.useMemo(() => {
+        const groups = new Map();
+        for (const unit of units) {
+            const key = unit.optionId ?? unit.optionUnitId;
+            const entry = groups.get(key);
+            if (entry) {
+                entry.allUnits.push(unit);
+                // Prefer an explicit ADULT unit as primary; fall back to whatever
+                // arrived first.
+                if (isAdultUnit(unit) && !isAdultUnit(entry.primary))
+                    entry.primary = unit;
+            }
+            else {
+                groups.set(key, { primary: unit, allUnits: [unit] });
+            }
+        }
+        return Array.from(groups.entries()).map(([optionKey, group]) => {
+            const optionName = productOptions.find((option) => option.id === optionKey)?.name ?? group.primary.unitName;
+            const totalRemaining = group.allUnits.reduce((acc, unit) => {
+                if (unit.remaining === null)
+                    return null;
+                if (acc === null)
+                    return null;
+                return acc + unit.remaining;
+            }, 0);
+            return {
+                optionKey,
+                optionName,
+                primary: group.primary,
+                totalRemaining,
+            };
+        });
+    }, [units, productOptions]);
+    if (!slotId && !productId && !optionId) {
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noOption })] }));
+    }
+    // Both data sources need to resolve before declaring an empty result
+    // — slot units may legitimately be empty (product-level slot), and
+    // we don't want to flash the empty state before option-level units
+    // finish loading.
+    const optionsLoaded = optionsQuery.isSuccess && optionUnitQueries.every((query) => query.isSuccess);
+    const loaded = slotId ? availability.isSuccess && optionsLoaded : optionsLoaded;
+    if (loaded && units.length === 0) {
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noUnits })] }));
+    }
+    const setQuantity = (unitId, qty) => {
+        const next = { ...value.quantities };
+        if (qty <= 0) {
+            delete next[unitId];
+        }
+        else {
+            next[unitId] = qty;
+        }
+        onChange({ quantities: next });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-col gap-2", children: optionRows.map(({ optionKey, optionName, primary, totalRemaining }) => {
+                    const qty = value.quantities[primary.optionUnitId] ?? 0;
+                    const remainingLabel = totalRemaining === null ? merged.unlimited : `${totalRemaining} ${merged.remaining}`;
+                    const atMax = totalRemaining !== null && qty >= totalRemaining;
+                    return (_jsxs("div", { className: "flex items-center gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: optionName }), _jsx("div", { className: "text-xs text-muted-foreground", children: remainingLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(primary.optionUnitId, Math.max(0, qty - 1)), disabled: qty <= 0, "aria-label": `${merged.decreaseUnitPrefix} ${optionName}`, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "min-w-[1.5rem] text-center text-sm tabular-nums", children: qty }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(primary.optionUnitId, qty + 1), disabled: atMax, "aria-label": `${merged.increaseUnitPrefix} ${optionName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }, optionKey));
+                }) })] }));
+}
+function isAdultUnit(unit) {
+    // The seed creates ADULT / CHILD / SENIOR unit codes; the stepper
+    // unit object doesn't carry the code, so fall back to name-matching
+    // when the upstream code isn't surfaced.
+    return /\badult\b/i.test(unit.unitName);
+}
+function optionUnitToStepperUnit(option, unit, unitCount) {
+    return {
+        optionId: option.id,
+        optionUnitId: unit.id,
+        unitName: unitCount === 1 ? option.name : `${option.name} - ${unit.name}`,
+        unitCode: unit.code,
+        minAge: unit.minAge,
+        maxAge: unit.maxAge,
+        unitType: unit.unitType,
+        occupancyMax: unit.occupancyMax,
+        initial: null,
+        reserved: 0,
+        remaining: unit.maxQuantity ?? null,
+    };
+}

package/dist/components/payment-schedule-section.d.ts

@@ -1,4 +1,4 @@
-export type PaymentScheduleMode = "unpaid" | "full" | "advance" | "split";
+export type PaymentScheduleMode = "full" | "split";
 export interface PaymentScheduleValue {
     mode: PaymentScheduleMode;
     /** Used when mode === "full" — single due date for the whole amount. */