@voyantjs/bookings-ui 0.13.0

package/dist/components/file-dropzone.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { File as FileIcon, Loader2, Upload, X } from "lucide-react";
+import * as React from "react";
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function FileDropzone({ uploadUrl = "/api/v1/uploads", accept, maxSize, onUploaded, onError, helperText = "Drag and drop a file here, or click to select", disabled, }) {
+    const inputRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [isUploading, setIsUploading] = React.useState(false);
+    const [uploaded, setUploaded] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const reportError = (message) => {
+        setError(message);
+        onError?.(message);
+    };
+    const handleFile = async (file) => {
+        setError(null);
+        if (maxSize && file.size > maxSize) {
+            reportError(`File too large (max ${formatSize(maxSize)})`);
+            return;
+        }
+        setIsUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append("file", file);
+            const res = await fetch(uploadUrl, {
+                method: "POST",
+                body: formData,
+                credentials: "include",
+            });
+            if (!res.ok) {
+                const body = await res.text();
+                reportError(body || `Upload failed (${res.status})`);
+                return;
+            }
+            const data = (await res.json());
+            const result = { ...data, name: file.name };
+            setUploaded(result);
+            onUploaded(result);
+        }
+        catch (err) {
+            reportError(err instanceof Error ? err.message : "Upload failed");
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (disabled || isUploading)
+            return;
+        const file = e.dataTransfer.files?.[0];
+        if (file) {
+            void handleFile(file);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled && !isUploading) {
+            setIsDragging(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleChange = (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            void handleFile(file);
+        }
+        e.target.value = "";
+    };
+    const reset = () => {
+        setUploaded(null);
+        setError(null);
+    };
+    if (uploaded) {
+        return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border bg-muted/30 p-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: uploaded.name }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [formatSize(uploaded.size), " \u00B7 ", uploaded.mimeType] })] })] }), _jsx("button", { type: "button", onClick: reset, className: "text-muted-foreground hover:text-destructive", "aria-label": "Remove file", children: _jsx(X, { className: "h-4 w-4" }) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("button", { type: "button", onClick: () => inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, disabled: disabled || isUploading, "data-dragging": isDragging, className: "flex flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-8 text-center transition-colors hover:border-foreground/30 hover:bg-muted/30 data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5 disabled:cursor-not-allowed disabled:opacity-60", children: isUploading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading..." })] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "h-6 w-6 text-muted-foreground" }), _jsx("p", { className: "text-sm text-muted-foreground", children: helperText }), accept && _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Accepted: ", accept] })] })) }), _jsx("input", { ref: inputRef, type: "file", className: "hidden", accept: accept, onChange: handleChange, disabled: disabled || isUploading }), error && _jsx("p", { className: "text-xs text-destructive", children: error })] }));
+}

package/dist/components/passengers-section.d.ts

@@ -0,0 +1,72 @@
+export type PassengerRole = "lead" | "adult" | "child" | "infant";
+export interface PassengerEntry {
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: PassengerRole;
+    /** option_unit_id the passenger is assigned to (matches RoomsStepper units). */
+    roomUnitId: string | null;
+}
+export interface PassengerListValue {
+    passengers: PassengerEntry[];
+}
+export declare const emptyPassengerListValue: PassengerListValue;
+/** Factory for a blank row — `role` defaults to `adult` unless the list is empty. */
+export declare function createBlankPassenger(role?: PassengerRole): PassengerEntry;
+export interface RoomUnitOption {
+    unitId: string;
+    unitName: string;
+    /**
+     * How many more passengers can be assigned to this unit. Decremented by
+     * the parent based on the stepper's quantity × occupancy capacity minus
+     * passengers already assigned to that unit.
+     */
+    remainingCapacity: number;
+}
+export interface PassengersSectionProps {
+    value: PassengerListValue;
+    onChange: (value: PassengerListValue) => void;
+    /**
+     * Rooms the operator has selected (from RoomsStepperSection + occupancy).
+     * When provided, each passenger gets a room-assignment dropdown.
+     */
+    roomUnits?: RoomUnitOption[];
+    labels?: {
+        heading?: string;
+        addPassenger?: string;
+        firstName?: string;
+        lastName?: string;
+        email?: string;
+        role?: string;
+        roleLead?: string;
+        roleAdult?: string;
+        roleChild?: string;
+        roleInfant?: string;
+        room?: string;
+        noRoom?: string;
+        remove?: string;
+        empty?: string;
+    };
+}
+/**
+ * Passenger list for booking-create flows. Each row carries name + optional
+ * email + role + optional room assignment. Inline-create only for now —
+ * operators who want to pick an existing CRM person can do so from the
+ * booking detail page afterwards, consistent with the lead-person picker's
+ * edit-after-create story.
+ *
+ * ### Parent contract
+ *
+ * At submit time, the parent:
+ * 1. Creates a CRM person for each row that doesn't match an existing one
+ *    (email match + name, or skip when the operator intentionally left
+ *    email blank).
+ * 2. Inserts a `booking_travelers` row per passenger with `participantType`
+ *    derived from the role (`lead` / `adult` → traveler; `child` / `infant`
+ *    → traveler with travelerCategory set).
+ * 3. Exactly one row should have `role: "lead"` — enforced at submit, not
+ *    here. The UI lets the operator pick whichever layout they want, then
+ *    the submit handler errors if the invariant isn't met.
+ */
+export declare function PassengersSection({ value, onChange, roomUnits, labels }: PassengersSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=passengers-section.d.ts.map

package/dist/components/passengers-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passengers-section.d.ts","sourceRoot":"","sources":["../../src/components/passengers-section.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAIjE,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,aAAa,CAAA;IACnB,gFAAgF;IAChF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,cAAc,EAAE,CAAA;CAC7B;AAED,eAAO,MAAM,uBAAuB,EAAE,kBAAuC,CAAA;AAE7E,qFAAqF;AACrF,wBAAgB,oBAAoB,CAAC,IAAI,GAAE,aAAuB,GAAG,cAAc,CAElF;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC7C;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAqBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CA2I/F"}

package/dist/components/passengers-section.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/voyant-ui/components";
+import { Trash2 } from "lucide-react";
+const ALL_ROLES = ["lead", "adult", "child", "infant"];
+export const emptyPassengerListValue = { passengers: [] };
+/** Factory for a blank row — `role` defaults to `adult` unless the list is empty. */
+export function createBlankPassenger(role = "adult") {
+    return { firstName: "", lastName: "", email: "", role, roomUnitId: null };
+}
+const DEFAULT_LABELS = {
+    heading: "Passengers",
+    addPassenger: "Add passenger",
+    firstName: "First name",
+    lastName: "Last name",
+    email: "Email",
+    role: "Role",
+    roleLead: "Lead",
+    roleAdult: "Adult",
+    roleChild: "Child",
+    roleInfant: "Infant",
+    room: "Room",
+    noRoom: "Unassigned",
+    remove: "Remove passenger",
+    empty: "No passengers yet. Add at least one.",
+};
+const NO_ROOM = "__unassigned__";
+/**
+ * Passenger list for booking-create flows. Each row carries name + optional
+ * email + role + optional room assignment. Inline-create only for now —
+ * operators who want to pick an existing CRM person can do so from the
+ * booking detail page afterwards, consistent with the lead-person picker's
+ * edit-after-create story.
+ *
+ * ### Parent contract
+ *
+ * At submit time, the parent:
+ * 1. Creates a CRM person for each row that doesn't match an existing one
+ *    (email match + name, or skip when the operator intentionally left
+ *    email blank).
+ * 2. Inserts a `booking_travelers` row per passenger with `participantType`
+ *    derived from the role (`lead` / `adult` → traveler; `child` / `infant`
+ *    → traveler with travelerCategory set).
+ * 3. Exactly one row should have `role: "lead"` — enforced at submit, not
+ *    here. The UI lets the operator pick whichever layout they want, then
+ *    the submit handler errors if the invariant isn't met.
+ */
+export function PassengersSection({ value, onChange, roomUnits, labels }) {
+    const merged = { ...DEFAULT_LABELS, ...labels };
+    const roleLabels = {
+        lead: merged.roleLead,
+        adult: merged.roleAdult,
+        child: merged.roleChild,
+        infant: merged.roleInfant,
+    };
+    const updateAt = (index, patch) => {
+        const next = value.passengers.map((p, i) => (i === index ? { ...p, ...patch } : p));
+        onChange({ passengers: next });
+    };
+    const removeAt = (index) => {
+        onChange({ passengers: value.passengers.filter((_, i) => i !== index) });
+    };
+    const addRow = () => {
+        // First passenger defaults to `lead` so the operator doesn't have to
+        // remember to flip the role on the initial row.
+        const role = value.passengers.length === 0 ? "lead" : "adult";
+        onChange({ passengers: [...value.passengers, createBlankPassenger(role)] });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: merged.heading }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: addRow, children: merged.addPassenger })] }), value.passengers.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: value.passengers.map((passenger, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { placeholder: merged.firstName, value: passenger.firstName, onChange: (e) => updateAt(index, { firstName: e.target.value }) }), _jsx(Input, { placeholder: merged.lastName, value: passenger.lastName, onChange: (e) => updateAt(index, { lastName: e.target.value }) })] }), _jsx(Input, { type: "email", placeholder: merged.email, value: passenger.email, onChange: (e) => updateAt(index, { email: e.target.value }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.role }), _jsxs(Select, { value: passenger.role, onValueChange: (v) => updateAt(index, { role: (v ?? "adult") }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ALL_ROLES.map((role) => (_jsx(SelectItem, { value: role, children: roleLabels[role] }, role))) })] })] }), roomUnits && roomUnits.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.room }), _jsxs(Select, { value: passenger.roomUnitId ?? NO_ROOM, onValueChange: (v) => updateAt(index, { roomUnitId: v === NO_ROOM ? null : (v ?? null) }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_ROOM, children: merged.noRoom }), roomUnits.map((unit) => (_jsx(SelectItem, { value: unit.unitId, 
+                                                            // Only disable other rooms at-capacity — the room the
+                                                            // passenger is *already* in should stay selectable so
+                                                            // re-renders don't strip the selection.
+                                                            disabled: unit.remainingCapacity <= 0 && passenger.roomUnitId !== unit.unitId, children: unit.unitName }, unit.unitId)))] })] })] })) : null] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-destructive", onClick: () => removeAt(index), "aria-label": merged.remove, children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), merged.remove] }) })] }, index))) }))] }));
+}

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

@@ -0,0 +1,62 @@
+export type PaymentScheduleMode = "unpaid" | "full" | "advance" | "split";
+export interface PaymentScheduleValue {
+    mode: PaymentScheduleMode;
+    /** Used when mode === "full" — single due date for the whole amount. */
+    fullDueDate: string | null;
+    /** Used when mode === "advance" — deposit amount collected up front. */
+    advanceAmountCents: number | null;
+    advanceDueDate: string | null;
+    /** Used when mode === "split" — two installments. */
+    splitFirstAmountCents: number | null;
+    splitFirstDueDate: string | null;
+    splitSecondAmountCents: number | null;
+    splitSecondDueDate: string | null;
+}
+export declare const emptyPaymentScheduleValue: PaymentScheduleValue;
+export interface PaymentScheduleSectionProps {
+    value: PaymentScheduleValue;
+    onChange: (value: PaymentScheduleValue) => void;
+    /**
+     * Booking total in cents. Enables the 50/50 preset in split mode and the
+     * "Use balance" helper in advance mode. When unset the section still works
+     * — operator types the amounts.
+     */
+    totalAmountCents?: number;
+    /** Used only for display formatting (e.g., "EUR"). No server-side effect. */
+    currency?: string;
+    labels?: {
+        heading?: string;
+        modeUnpaid?: string;
+        modeFull?: string;
+        modeAdvance?: string;
+        modeSplit?: string;
+        dueDate?: string;
+        amount?: string;
+        firstInstallment?: string;
+        secondInstallment?: string;
+        preset5050?: string;
+        unpaidHint?: string;
+    };
+}
+/**
+ * Payment schedule picker for booking-create flows. Operators choose one of
+ * four modes; only the relevant fields render for the selected mode, so the
+ * UI stays narrow.
+ *
+ * The section produces a controlled `PaymentScheduleValue` — actually
+ * creating `booking_payment_schedules` rows happens in the parent at submit
+ * time, after the booking exists (schedules have a FK to `bookings.id`).
+ *
+ * ### Mapping guide for the parent
+ *
+ * - `unpaid`  → no schedules created.
+ * - `full`    → one schedule with `scheduleType: "balance"`, dueDate =
+ *               fullDueDate, amountCents = bookingTotalAmountCents.
+ * - `advance` → two schedules: { type: "deposit", dueDate = advanceDueDate,
+ *               amountCents = advanceAmountCents } + { type: "balance",
+ *               dueDate = fullDueDate ?? sensible-default, amountCents =
+ *               total - advanceAmountCents }.
+ * - `split`   → two schedules with `scheduleType: "installment"`.
+ */
+export declare function PaymentScheduleSection({ value, onChange, totalAmountCents, currency, labels, }: PaymentScheduleSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-schedule-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payment-schedule-section.d.ts","sourceRoot":"","sources":["../../src/components/payment-schedule-section.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,mBAAmB,CAAA;IACzB,wEAAwE;IACxE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,wEAAwE;IACxE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,qDAAqD;IACrD,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAA;IACpC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;CAClC;AAED,eAAO,MAAM,yBAAyB,EAAE,oBASvC,CAAA;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,oBAAoB,CAAA;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC/C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAkCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CAmI7B"}

package/dist/components/payment-schedule-section.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Label } from "@voyantjs/voyant-ui/components";
+export const emptyPaymentScheduleValue = {
+    mode: "unpaid",
+    fullDueDate: null,
+    advanceAmountCents: null,
+    advanceDueDate: null,
+    splitFirstAmountCents: null,
+    splitFirstDueDate: null,
+    splitSecondAmountCents: null,
+    splitSecondDueDate: null,
+};
+const DEFAULT_LABELS = {
+    heading: "Payment schedule",
+    modeUnpaid: "Unpaid",
+    modeFull: "Full",
+    modeAdvance: "Advance",
+    modeSplit: "Split",
+    dueDate: "Due date",
+    amount: "Amount",
+    firstInstallment: "First installment",
+    secondInstallment: "Second installment",
+    preset5050: "50 / 50",
+    unpaidHint: "No payment schedule will be created. Operator will invoice manually.",
+};
+/**
+ * Converts an `<input type="number">` string value to minor units (cents).
+ * Accepts `""` / `NaN` → `null`. Multiplies by 100 and rounds to avoid
+ * floating-point garbage (`19.99 * 100` → `1999`, not `1998.99999...`).
+ */
+function majorStringToCents(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    return Math.round(parsed * 100);
+}
+function centsToMajorString(cents) {
+    if (cents == null)
+        return "";
+    return (cents / 100).toFixed(2);
+}
+/**
+ * Payment schedule picker for booking-create flows. Operators choose one of
+ * four modes; only the relevant fields render for the selected mode, so the
+ * UI stays narrow.
+ *
+ * The section produces a controlled `PaymentScheduleValue` — actually
+ * creating `booking_payment_schedules` rows happens in the parent at submit
+ * time, after the booking exists (schedules have a FK to `bookings.id`).
+ *
+ * ### Mapping guide for the parent
+ *
+ * - `unpaid`  → no schedules created.
+ * - `full`    → one schedule with `scheduleType: "balance"`, dueDate =
+ *               fullDueDate, amountCents = bookingTotalAmountCents.
+ * - `advance` → two schedules: { type: "deposit", dueDate = advanceDueDate,
+ *               amountCents = advanceAmountCents } + { type: "balance",
+ *               dueDate = fullDueDate ?? sensible-default, amountCents =
+ *               total - advanceAmountCents }.
+ * - `split`   → two schedules with `scheduleType: "installment"`.
+ */
+export function PaymentScheduleSection({ value, onChange, totalAmountCents, currency, labels, }) {
+    const merged = { ...DEFAULT_LABELS, ...labels };
+    const set = (patch) => onChange({ ...value, ...patch });
+    const currencySuffix = currency ? ` ${currency}` : "";
+    const modes = [
+        { id: "unpaid", label: merged.modeUnpaid },
+        { id: "full", label: merged.modeFull },
+        { id: "advance", label: merged.modeAdvance },
+        { id: "split", label: merged.modeSplit },
+    ];
+    const handlePreset5050 = () => {
+        if (!totalAmountCents)
+            return;
+        const half = Math.floor(totalAmountCents / 2);
+        // Floor + remainder assignment avoids rounding-off-by-one: a total of
+        // 9999 cents splits into 4999 + 5000 rather than 4999 + 4999.
+        set({
+            splitFirstAmountCents: half,
+            splitSecondAmountCents: totalAmountCents - half,
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: modes.map((mode) => (_jsx(Button, { type: "button", size: "sm", variant: value.mode === mode.id ? "default" : "ghost", onClick: () => set({ mode: mode.id }), children: mode.label }, mode.id))) }), value.mode === "unpaid" && (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.unpaidHint })), value.mode === "full" && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs(Label, { className: "text-xs", children: [merged.dueDate, currencySuffix] }), _jsx(Input, { type: "date", value: value.fullDueDate ?? "", onChange: (e) => set({ fullDueDate: e.target.value || null }) })] })), value.mode === "advance" && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs(Label, { className: "text-xs", children: [merged.amount, currencySuffix] }), _jsx(Input, { type: "number", min: "0", step: "0.01", value: centsToMajorString(value.advanceAmountCents), onChange: (e) => set({ advanceAmountCents: majorStringToCents(e.target.value) }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(Input, { type: "date", value: value.advanceDueDate ?? "", onChange: (e) => set({ advanceDueDate: e.target.value || null }) })] })] })), value.mode === "split" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: merged.firstInstallment }), totalAmountCents ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handlePreset5050, children: merged.preset5050 })) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { type: "number", min: "0", step: "0.01", placeholder: merged.amount, value: centsToMajorString(value.splitFirstAmountCents), onChange: (e) => set({ splitFirstAmountCents: majorStringToCents(e.target.value) }) }), _jsx(Input, { type: "date", value: value.splitFirstDueDate ?? "", onChange: (e) => set({ splitFirstDueDate: e.target.value || null }) })] }), _jsx("div", { className: "text-xs font-medium", children: merged.secondInstallment }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { type: "number", min: "0", step: "0.01", placeholder: merged.amount, value: centsToMajorString(value.splitSecondAmountCents), onChange: (e) => set({ splitSecondAmountCents: majorStringToCents(e.target.value) }) }), _jsx(Input, { type: "date", value: value.splitSecondDueDate ?? "", onChange: (e) => set({ splitSecondDueDate: e.target.value || null }) })] })] }))] }));
+}

package/dist/components/person-picker-section.d.ts

@@ -0,0 +1,53 @@
+export type PersonPickerMode = "existing" | "new";
+export interface NewPersonValue {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+}
+export interface PersonPickerValue {
+    mode: PersonPickerMode;
+    /** Set when mode === "existing". */
+    personId: string;
+    /** Used when mode === "new". */
+    newPerson: NewPersonValue;
+    /** `null` = no organization attached. */
+    organizationId: string | null;
+}
+export declare const emptyNewPerson: NewPersonValue;
+export declare const emptyPersonPickerValue: PersonPickerValue;
+export interface PersonPickerSectionProps {
+    value: PersonPickerValue;
+    onChange: (value: PersonPickerValue) => void;
+    enabled?: boolean;
+    showOrganization?: boolean;
+    labels?: {
+        person?: string;
+        createNewPerson?: string;
+        selectExistingPerson?: string;
+        personSearchPlaceholder?: string;
+        personSelectPlaceholder?: string;
+        firstName?: string;
+        firstNamePlaceholder?: string;
+        lastName?: string;
+        lastNamePlaceholder?: string;
+        email?: string;
+        emailPlaceholder?: string;
+        phone?: string;
+        phonePlaceholder?: string;
+        organization?: string;
+        organizationSearchPlaceholder?: string;
+        organizationNone?: string;
+    };
+}
+/**
+ * Person picker with inline-create + optional organization attachment.
+ *
+ * State is fully controlled — the caller owns both existing-person selection
+ * and the inline-create form. The section does *not* call any mutation itself;
+ * the parent decides when to commit a newly-created person (typically at
+ * submit time, so we don't leak orphan CRM records when the dialog is
+ * cancelled).
+ */
+export declare function PersonPickerSection({ value, onChange, enabled, showOrganization, labels, }: PersonPickerSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=person-picker-section.d.ts.map

package/dist/components/person-picker-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,CAAA;AAEjD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAA;IACtB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,SAAS,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,cAK5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAKpC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,MAAM,GACP,EAAE,wBAAwB,2CA2J1B"}

package/dist/components/person-picker-section.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useOrganizations, usePeople } from "@voyantjs/crm-react";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/voyant-ui/components";
+import { UserPlus } from "lucide-react";
+import * as React from "react";
+const ORG_NONE = "__none__";
+export const emptyNewPerson = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+};
+export const emptyPersonPickerValue = {
+    mode: "existing",
+    personId: "",
+    newPerson: emptyNewPerson,
+    organizationId: null,
+};
+const DEFAULT_LABELS = {
+    person: "Person",
+    createNewPerson: "Create new",
+    selectExistingPerson: "Select existing",
+    personSearchPlaceholder: "Search people by name or email...",
+    personSelectPlaceholder: "Select a person...",
+    firstName: "First Name",
+    firstNamePlaceholder: "John",
+    lastName: "Last Name",
+    lastNamePlaceholder: "Smith",
+    email: "Email",
+    emailPlaceholder: "john@example.com",
+    phone: "Phone",
+    phonePlaceholder: "+44 7911 123456",
+    organization: "Organization (optional)",
+    organizationSearchPlaceholder: "Search organizations...",
+    organizationNone: "No organization",
+};
+/**
+ * Person picker with inline-create + optional organization attachment.
+ *
+ * State is fully controlled — the caller owns both existing-person selection
+ * and the inline-create form. The section does *not* call any mutation itself;
+ * the parent decides when to commit a newly-created person (typically at
+ * submit time, so we don't leak orphan CRM records when the dialog is
+ * cancelled).
+ */
+export function PersonPickerSection({ value, onChange, enabled = true, showOrganization = true, labels, }) {
+    const [personSearch, setPersonSearch] = React.useState("");
+    const [orgSearch, setOrgSearch] = React.useState("");
+    const merged = { ...DEFAULT_LABELS, ...labels };
+    const { data: peopleData } = usePeople({
+        search: personSearch || undefined,
+        limit: 20,
+        enabled: enabled && value.mode === "existing",
+    });
+    const people = peopleData?.data ?? [];
+    const { data: orgsData } = useOrganizations({
+        search: orgSearch || undefined,
+        limit: 20,
+        enabled: enabled && showOrganization,
+    });
+    const orgs = orgsData?.data ?? [];
+    const setPerson = (patch) => onChange({ ...value, ...patch });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.person, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setPerson({ mode: value.mode === "existing" ? "new" : "existing" }), children: value.mode === "existing" ? (_jsxs(_Fragment, { children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewPerson] })) : (merged.selectExistingPerson) })] }), value.mode === "existing" ? (_jsxs(_Fragment, { children: [_jsx(Input, { placeholder: merged.personSearchPlaceholder, value: personSearch, onChange: (e) => setPersonSearch(e.target.value) }), _jsxs(Select, { items: people.map((p) => ({
+                                    label: `${p.firstName} ${p.lastName}${p.email ? ` · ${p.email}` : ""}`,
+                                    value: p.id,
+                                })), value: value.personId, onValueChange: (v) => setPerson({ personId: v ?? "" }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: merged.personSelectPlaceholder }) }), _jsx(SelectContent, { children: people.map((p) => (_jsxs(SelectItem, { value: p.id, children: [p.firstName, " ", p.lastName, p.email ? ` · ${p.email}` : ""] }, p.id))) })] })] })) : (_jsxs("div", { className: "grid grid-cols-2 gap-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.firstName }), _jsx(Input, { value: value.newPerson.firstName, onChange: (e) => setPerson({ newPerson: { ...value.newPerson, firstName: e.target.value } }), placeholder: merged.firstNamePlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.lastName }), _jsx(Input, { value: value.newPerson.lastName, onChange: (e) => setPerson({ newPerson: { ...value.newPerson, lastName: e.target.value } }), placeholder: merged.lastNamePlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.email }), _jsx(Input, { type: "email", value: value.newPerson.email, onChange: (e) => setPerson({ newPerson: { ...value.newPerson, email: e.target.value } }), placeholder: merged.emailPlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.phone }), _jsx(Input, { value: value.newPerson.phone, onChange: (e) => setPerson({ newPerson: { ...value.newPerson, phone: e.target.value } }), placeholder: merged.phonePlaceholder })] })] }))] }), showOrganization && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.organization }), _jsx(Input, { placeholder: merged.organizationSearchPlaceholder, value: orgSearch, onChange: (e) => setOrgSearch(e.target.value) }), _jsxs(Select, { items: [
+                            { label: merged.organizationNone, value: ORG_NONE },
+                            ...orgs.map((o) => ({ label: o.name, value: o.id })),
+                        ], value: value.organizationId ?? ORG_NONE, onValueChange: (v) => setPerson({ organizationId: v === ORG_NONE ? null : (v ?? null) }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: merged.organizationNone }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ORG_NONE, children: merged.organizationNone }), orgs.map((o) => (_jsx(SelectItem, { value: o.id, children: o.name }, o.id)))] })] })] }))] }));
+}

package/dist/components/price-breakdown-section.d.ts

@@ -0,0 +1,48 @@
+export interface PriceBreakdownLine {
+    unitId: string;
+    label: string;
+    quantity: number;
+    /** Per-unit price for the matched tier/row. `null` = on-request pricing. */
+    unitAmountCents: number | null;
+    /** `unitAmountCents * quantity` or null when on-request. */
+    totalAmountCents: number | null;
+    /**
+     * Populated when a non-default tier matched — operator-visible "N × 100 EUR
+     * — group rate" kind of hint. Null for the default tier / single-price row.
+     */
+    tierLabel: string | null;
+    isGroupRate: boolean;
+}
+export interface PriceBreakdownSectionProps {
+    productId?: string;
+    optionId?: string | null;
+    /** Quantity per option_unit id, typically from RoomsStepperSection. */
+    unitQuantities: Record<string, number>;
+    /**
+     * Force a specific catalog. Defaults to the public catalog the storefront
+     * uses — matches what a customer would see.
+     */
+    catalogId?: string | null;
+    labels?: {
+        heading?: string;
+        total?: string;
+        onRequest?: string;
+        groupRate?: string;
+        empty?: string;
+        noPricing?: string;
+    };
+}
+/**
+ * Live price-breakdown preview for booking-create flows. Read-only — uses
+ * `usePricingPreview` (#237) to fetch the catalog-resolved snapshot the
+ * storefront also uses, then computes lines against the operator's current
+ * unit quantities so the operator sees the same numbers the customer would.
+ *
+ * ### Pricing mode handling
+ *
+ * - `per_unit` — multiply the matched tier's `sellAmountCents` by quantity.
+ * - `free` / `included` — render 0.00 without an on-request badge.
+ * - `on_request` / anything else — render "On request"; total excludes it.
+ */
+export declare function PriceBreakdownSection({ productId, optionId, unitQuantities, catalogId, labels, }: PriceBreakdownSectionProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=price-breakdown-section.d.ts.map

package/dist/components/price-breakdown-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,4DAA4D;IAC5D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,uEAAuE;IACvE,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAsCD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,SAAS,EACT,MAAM,GACP,EAAE,0BAA0B,kDAsK5B"}