@voyantjs/bookings-ui 0.35.0 → 0.37.1

package/dist/components/booking-list-filters.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bookingStatuses } from "@voyantjs/bookings-react";
+import { useOrganizations, usePeople } from "@voyantjs/crm-react";
+import { useProductCategories, useProductOptions, useProducts } from "@voyantjs/products-react";
+import { useSuppliers } from "@voyantjs/suppliers-react";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { ListFilter } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+export const BOOKING_STATUS_ALL = "__all__";
+export function BookingListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, optionId, onOptionIdChange, supplierId, onSupplierIdChange, productCategoryId, onProductCategoryIdChange, personId, onPersonIdChange, organizationId, onOrganizationIdChange, dateRange, onDateRangeChange, paxMin, onPaxMinChange, paxMax, onPaxMaxChange, onFiltersChanged, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const filterMessages = messages.bookingList.filters;
+    const statusLabels = messages.common.bookingStatusLabels;
+    const [selectedProduct, setSelectedProduct] = React.useState(null);
+    const [productSearch, setProductSearch] = React.useState("");
+    const [selectedOption, setSelectedOption] = React.useState(null);
+    const [selectedSupplier, setSelectedSupplier] = React.useState(null);
+    const [supplierSearch, setSupplierSearch] = React.useState("");
+    const [selectedProductCategory, setSelectedProductCategory] = React.useState(null);
+    const [productCategorySearch, setProductCategorySearch] = React.useState("");
+    const [selectedPerson, setSelectedPerson] = React.useState(null);
+    const [personSearch, setPersonSearch] = React.useState("");
+    const [selectedOrganization, setSelectedOrganization] = React.useState(null);
+    const [organizationSearch, setOrganizationSearch] = React.useState("");
+    const { data: productsData } = useProducts({
+        search: productSearch || undefined,
+        limit: 20,
+    });
+    const products = productsData?.data ?? [];
+    const { data: optionsData } = useProductOptions({
+        productId: productId ?? undefined,
+        status: "active",
+        limit: 20,
+        enabled: productId !== null,
+    });
+    const productOptions = optionsData?.data ?? [];
+    const { data: suppliersData } = useSuppliers({
+        search: supplierSearch || undefined,
+        limit: 20,
+    });
+    const suppliers = suppliersData?.data ?? [];
+    const { data: productCategoriesData } = useProductCategories({
+        search: productCategorySearch || undefined,
+        active: true,
+        limit: 20,
+    });
+    const productCategories = productCategoriesData?.data ?? [];
+    const { data: peopleData } = usePeople({
+        search: personSearch || undefined,
+        limit: 20,
+    });
+    const people = peopleData?.data ?? [];
+    const { data: organizationsData } = useOrganizations({
+        search: organizationSearch || undefined,
+        limit: 20,
+    });
+    const organizations = organizationsData?.data ?? [];
+    const markChanged = () => onFiltersChanged();
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4" }), filterMessages.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-status", children: filterMessages.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                        onStatusChange(value ?? BOOKING_STATUS_ALL);
+                                        markChanged();
+                                    }, children: [_jsx(SelectTrigger, { id: "bookings-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: BOOKING_STATUS_ALL, children: filterMessages.statusAll }), bookingStatuses.map((value) => (_jsx(SelectItem, { value: value, children: statusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-product", children: filterMessages.productLabel }), _jsx(AsyncCombobox, { value: productId, onChange: (value) => {
+                                        onProductIdChange(value);
+                                        onOptionIdChange(null);
+                                        setSelectedOption(null);
+                                        if (!value) {
+                                            setSelectedProduct(null);
+                                        }
+                                        else {
+                                            const match = products.find((product) => product.id === value);
+                                            if (match)
+                                                setSelectedProduct(match);
+                                        }
+                                        markChanged();
+                                    }, items: products, selectedItem: selectedProduct, getKey: (product) => product.id, getLabel: (product) => product.name, onSearchChange: setProductSearch, placeholder: filterMessages.product, emptyText: filterMessages.productEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-option", children: filterMessages.optionLabel }), _jsx(AsyncCombobox, { value: optionId, onChange: (value) => {
+                                        onOptionIdChange(value);
+                                        if (!value)
+                                            setSelectedOption(null);
+                                        else {
+                                            const match = productOptions.find((option) => option.id === value);
+                                            if (match)
+                                                setSelectedOption(match);
+                                        }
+                                        markChanged();
+                                    }, items: productOptions, selectedItem: selectedOption, getKey: (option) => option.id, getLabel: (option) => option.name, getSecondary: (option) => option.code ?? undefined, placeholder: filterMessages.option, emptyText: productId ? filterMessages.optionEmpty : filterMessages.optionNeedsProduct, disabled: productId === null })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-category", children: filterMessages.categoryLabel }), _jsx(AsyncCombobox, { value: productCategoryId, onChange: (value) => {
+                                                onProductCategoryIdChange(value);
+                                                if (!value)
+                                                    setSelectedProductCategory(null);
+                                                else {
+                                                    const match = productCategories.find((category) => category.id === value);
+                                                    if (match)
+                                                        setSelectedProductCategory(match);
+                                                }
+                                                markChanged();
+                                            }, items: productCategories, selectedItem: selectedProductCategory, getKey: (category) => category.id, getLabel: (category) => category.name, onSearchChange: setProductCategorySearch, placeholder: filterMessages.category, emptyText: filterMessages.categoryEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-supplier", children: filterMessages.supplierLabel }), _jsx(AsyncCombobox, { value: supplierId, onChange: (value) => {
+                                                onSupplierIdChange(value);
+                                                if (!value)
+                                                    setSelectedSupplier(null);
+                                                else {
+                                                    const match = suppliers.find((supplier) => supplier.id === value);
+                                                    if (match)
+                                                        setSelectedSupplier(match);
+                                                }
+                                                markChanged();
+                                            }, items: suppliers, selectedItem: selectedSupplier, getKey: (supplier) => supplier.id, getLabel: (supplier) => supplier.name, getSecondary: (supplier) => supplier.type, onSearchChange: setSupplierSearch, placeholder: filterMessages.supplier, emptyText: filterMessages.supplierEmpty })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-person", children: filterMessages.personLabel }), _jsx(AsyncCombobox, { value: personId, onChange: (value) => {
+                                                onPersonIdChange(value);
+                                                if (!value)
+                                                    setSelectedPerson(null);
+                                                else {
+                                                    const match = people.find((person) => person.id === value);
+                                                    if (match)
+                                                        setSelectedPerson(match);
+                                                }
+                                                markChanged();
+                                            }, items: people, selectedItem: selectedPerson, getKey: (person) => person.id, getLabel: formatPersonName, getSecondary: (person) => person.email ?? undefined, onSearchChange: setPersonSearch, placeholder: filterMessages.person, emptyText: filterMessages.personEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-organization", children: filterMessages.organizationLabel }), _jsx(AsyncCombobox, { value: organizationId, onChange: (value) => {
+                                                onOrganizationIdChange(value);
+                                                if (!value)
+                                                    setSelectedOrganization(null);
+                                                else {
+                                                    const match = organizations.find((organization) => organization.id === value);
+                                                    if (match)
+                                                        setSelectedOrganization(match);
+                                                }
+                                                markChanged();
+                                            }, items: organizations, selectedItem: selectedOrganization, getKey: (organization) => organization.id, getLabel: (organization) => organization.name, getSecondary: (organization) => organization.vatNumber ?? undefined, onSearchChange: setOrganizationSearch, placeholder: filterMessages.organization, emptyText: filterMessages.organizationEmpty })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-date", children: filterMessages.dateRangeLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: (value) => {
+                                        onDateRangeChange(value);
+                                        markChanged();
+                                    }, placeholder: filterMessages.dateRange, clearable: true, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.paxLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMin, value: paxMin, onChange: (event) => {
+                                                onPaxMinChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.paxMin }), _jsx("span", { className: "text-muted-foreground", children: "-" }), _jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMax, value: paxMax, onChange: (event) => {
+                                                onPaxMaxChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.paxMax })] })] })] }) })] }));
+}
+function formatPersonName(person) {
+    const name = [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+    return name || person.email || person.id;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,0BAA0B,CAAA;AAoCjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACnD;AAkBD,wBAAgB,WAAW,CAAC,EAAE,QAAa,EAAE,eAAe,EAAE,GAAE,gBAAqB,2CA4ZpF"}
+{"version":3,"file":"booking-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,0BAA0B,CAAA;AAyBjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACnD;AAgBD,wBAAgB,WAAW,CAAC,EAAE,QAAa,EAAE,eAAe,EAAE,GAAE,gBAAqB,2CAmVpF"}

package/dist/components/booking-list.js

@@ -1,22 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { bookingStatusBadgeVariant, bookingStatuses, useBookings, } from "@voyantjs/bookings-react";
-import { useProducts } from "@voyantjs/products-react";
-import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { bookingStatusBadgeVariant, useBookings, } from "@voyantjs/bookings-react";
 import { Badge } from "@voyantjs/ui/components/badge";
 import { Button } from "@voyantjs/ui/components/button";
-import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
 import { Input } from "@voyantjs/ui/components/input";
 import { Label } from "@voyantjs/ui/components/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
 import { Skeleton } from "@voyantjs/ui/components/skeleton";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
-import { ArrowDown, ArrowUp, ArrowUpDown, ListFilter, Plus, Search, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Plus, Search, X } from "lucide-react";
 import * as React from "react";
 import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
 import { BookingDialog } from "./booking-dialog.js";
-const STATUS_ALL = "__all__";
+import { BOOKING_STATUS_ALL, BookingListFiltersPopover } from "./booking-list-filters.js";
 const SORTABLE_COLUMNS = {
     bookingNumber: "bookingNumber",
     status: "status",
@@ -29,10 +24,13 @@ const SKELETON_ROW_COUNT = 6;
 const TABLE_COLUMN_COUNT = 7;
 export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
     const [search, setSearch] = React.useState("");
-    const [status, setStatus] = React.useState(STATUS_ALL);
+    const [status, setStatus] = React.useState(BOOKING_STATUS_ALL);
     const [productId, setProductId] = React.useState(null);
-    const [selectedProduct, setSelectedProduct] = React.useState(null);
-    const [productSearch, setProductSearch] = React.useState("");
+    const [optionId, setOptionId] = React.useState(null);
+    const [supplierId, setSupplierId] = React.useState(null);
+    const [productCategoryId, setProductCategoryId] = React.useState(null);
+    const [personId, setPersonId] = React.useState(null);
+    const [organizationId, setOrganizationId] = React.useState(null);
     const [dateRange, setDateRange] = React.useState(null);
     const [paxMin, setPaxMin] = React.useState("");
     const [paxMax, setPaxMax] = React.useState("");
@@ -48,8 +46,13 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
     const paxMaxNumber = paxMax === "" ? undefined : Number.parseInt(paxMax, 10);
     const { data, isPending, isFetching, isError } = useBookings({
         search: search || undefined,
-        status: status === STATUS_ALL ? undefined : status,
+        status: status === BOOKING_STATUS_ALL ? undefined : status,
         productId: productId ?? undefined,
+        optionId: optionId ?? undefined,
+        supplierId: supplierId ?? undefined,
+        productCategoryId: productCategoryId ?? undefined,
+        personId: personId ?? undefined,
+        organizationId: organizationId ?? undefined,
         dateFrom: dateRange?.from ?? undefined,
         dateTo: dateRange?.to ?? undefined,
         paxMin: Number.isFinite(paxMinNumber) ? paxMinNumber : undefined,
@@ -59,11 +62,6 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
         limit: pageSize,
         offset,
     });
-    const { data: productsData } = useProducts({
-        search: productSearch || undefined,
-        limit: 20,
-    });
-    const products = productsData?.data ?? [];
     const bookings = data?.data ?? [];
     const total = data?.total ?? 0;
     const page = Math.floor(offset / pageSize) + 1;
@@ -92,17 +90,25 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
         setSortBy("createdAt");
         setSortDir("desc");
     };
-    const activeFilterCount = (status !== STATUS_ALL ? 1 : 0) +
+    const activeFilterCount = (status !== BOOKING_STATUS_ALL ? 1 : 0) +
         (productId !== null ? 1 : 0) +
+        (optionId !== null ? 1 : 0) +
+        (supplierId !== null ? 1 : 0) +
+        (productCategoryId !== null ? 1 : 0) +
+        (personId !== null ? 1 : 0) +
+        (organizationId !== null ? 1 : 0) +
         (dateRange?.from || dateRange?.to ? 1 : 0) +
         (paxMin !== "" || paxMax !== "" ? 1 : 0);
     const hasActiveFilters = activeFilterCount > 0 || search !== "";
     const clearFilters = () => {
         setSearch("");
-        setStatus(STATUS_ALL);
+        setStatus(BOOKING_STATUS_ALL);
         setProductId(null);
-        setSelectedProduct(null);
-        setProductSearch("");
+        setOptionId(null);
+        setSupplierId(null);
+        setProductCategoryId(null);
+        setPersonId(null);
+        setOrganizationId(null);
         setDateRange(null);
         setPaxMin("");
         setPaxMax("");
@@ -114,29 +120,7 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
     return (_jsxs("div", { "data-slot": "booking-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "bookings-search", className: "sr-only", children: messages.bookingList.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: "bookings-search", placeholder: messages.bookingList.searchPlaceholder, value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     resetOffset();
-                                }, className: "pl-9" })] }), _jsxs(Popover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4" }), filterMessages.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-status", children: filterMessages.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
-                                                        setStatus(value ?? STATUS_ALL);
-                                                        resetOffset();
-                                                    }, children: [_jsx(SelectTrigger, { id: "bookings-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: filterMessages.statusAll }), bookingStatuses.map((value) => (_jsx(SelectItem, { value: value, children: statusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-product", children: filterMessages.productLabel }), _jsx(AsyncCombobox, { value: productId, onChange: (value) => {
-                                                        setProductId(value);
-                                                        if (!value)
-                                                            setSelectedProduct(null);
-                                                        else {
-                                                            const match = products.find((p) => p.id === value);
-                                                            if (match)
-                                                                setSelectedProduct(match);
-                                                        }
-                                                        resetOffset();
-                                                    }, items: products, selectedItem: selectedProduct, getKey: (p) => p.id, getLabel: (p) => p.name, onSearchChange: setProductSearch, placeholder: filterMessages.product, emptyText: filterMessages.productEmpty })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "bookings-filter-date", children: filterMessages.dateRangeLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: (value) => {
-                                                        setDateRange(value);
-                                                        resetOffset();
-                                                    }, placeholder: filterMessages.dateRange, clearable: true, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.paxLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMin, value: paxMin, onChange: (event) => {
-                                                                setPaxMin(event.target.value);
-                                                                resetOffset();
-                                                            }, className: "w-full", "aria-label": filterMessages.paxMin }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, placeholder: filterMessages.paxMax, value: paxMax, onChange: (event) => {
-                                                                setPaxMax(event.target.value);
-                                                                resetOffset();
-                                                            }, className: "w-full", "aria-label": filterMessages.paxMax })] })] })] }) })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), filterMessages.clear] })), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => {
+                                }, className: "pl-9" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: setProductId, optionId: optionId, onOptionIdChange: setOptionId, supplierId: supplierId, onSupplierIdChange: setSupplierId, productCategoryId: productCategoryId, onProductCategoryIdChange: setProductCategoryId, personId: personId, onPersonIdChange: setPersonId, organizationId: organizationId, onOrganizationIdChange: setOrganizationId, dateRange: dateRange, onDateRangeChange: setDateRange, paxMin: paxMin, onPaxMinChange: setPaxMin, paxMax: paxMax, onPaxMaxChange: setPaxMax, onFiltersChanged: resetOffset }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), filterMessages.clear] })), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => {
                                 setEditing(undefined);
                                 setDialogOpen(true);
                             }, children: [_jsx(Plus, { className: "mr-2 size-4" }), messages.bookingList.newBooking] }) })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.bookingNumber, field: SORTABLE_COLUMNS.bookingNumber, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.whatBooked }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.endDate, field: SORTABLE_COLUMNS.endDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(BookingTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: messages.bookingList.loadingError }) })) : bookings.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: messages.bookingList.empty }) })) : (bookings.map((booking) => (_jsxs(TableRow, { onClick: () => handleSelect(booking), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: booking.bookingNumber }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore) }), _jsx(TableCell, { children: _jsx(Badge, { variant: bookingStatusBadgeVariant[booking.status], children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
@@ -147,10 +131,10 @@ export function BookingList({ pageSize = 25, onSelectBooking } = {}) {
                                             })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsx(TableCell, { children: formatBookingDateTime(booking.startsAt ?? booking.startDate, formatDateTime) }), _jsx(TableCell, { children: formatBookingDateTime(booking.endsAt ?? booking.endDate, formatDateTime) })] }, booking.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(messages.bookingList.showingSummary, {
                             count: bookings.length,
                             total,
-                        }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: "Previous" }), _jsx("span", { children: formatMessage(messages.bookingList.pageSummary, {
+                        }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: messages.bookingList.previousPage }), _jsx("span", { children: formatMessage(messages.bookingList.pageSummary, {
                                     page,
                                     pageCount,
-                                }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: "Next" })] })] }), _jsx(BookingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, booking: editing, onSuccess: (booking) => {
+                                }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: messages.bookingList.nextPage })] })] }), _jsx(BookingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, booking: editing, onSuccess: (booking) => {
                     onSelectBooking?.(booking);
                 } })] }));
 }

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

@@ -1,4 +1,5 @@
 export type PersonPickerMode = "existing" | "new";
+export type BillingTargetMode = "person" | "organization";
 export interface NewPersonValue {
     firstName: string;
     lastName: string;
@@ -6,6 +7,7 @@ export interface NewPersonValue {
     phone: string;
 }
 export interface PersonPickerValue {
+    billTo?: BillingTargetMode;
     mode: PersonPickerMode;
     /** Set when mode === "existing". */
     personId: string;
@@ -23,10 +25,18 @@ export interface PersonPickerSectionProps {
     showOrganization?: boolean;
     labels?: {
         person?: string;
+        organization?: string;
+        billTo?: string;
+        billToPerson?: string;
+        billToOrganization?: string;
         createNewPerson?: string;
+        createNewOrganization?: string;
+        createPersonSheetTitle?: string;
+        createOrganizationSheetTitle?: string;
         selectExistingPerson?: string;
         personSearchPlaceholder?: string;
         personSelectPlaceholder?: string;
+        personEmpty?: string;
         firstName?: string;
         firstNamePlaceholder?: string;
         lastName?: string;
@@ -35,19 +45,17 @@ export interface PersonPickerSectionProps {
         emailPlaceholder?: string;
         phone?: string;
         phonePlaceholder?: string;
-        organization?: string;
         organizationSearchPlaceholder?: string;
+        organizationSelectPlaceholder?: string;
+        organizationEmpty?: string;
         organizationNone?: string;
     };
 }
 /**
- * Person picker with inline-create + optional organization attachment.
+ * Billing target picker for booking create.
  *
- * 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).
+ * State is fully controlled. The embedded create sheets use the CRM forms and
+ * select the newly-created person or organization after save.
  */
 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

@@ -1 +1 @@
-{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAmBA,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;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,MAAM,GACP,EAAE,wBAAwB,2CA4J1B"}
+{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,CAAA;AACjD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEzD,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,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,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,iBAMpC,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,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAA;QACrC,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,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,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,MAAM,GACP,EAAE,wBAAwB,2CAiQ1B"}

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

@@ -1,11 +1,12 @@
 "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/ui/components";
-import { UserPlus } from "lucide-react";
+import { useOrganization, useOrganizations, usePeople, usePerson, } from "@voyantjs/crm-react";
+import { OrganizationForm, PersonForm } from "@voyantjs/crm-ui";
+import { Button, Label, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import { Building2, User, UserPlus } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
-const ORG_NONE = "__none__";
 export const emptyNewPerson = {
     firstName: "",
     lastName: "",
@@ -13,43 +14,121 @@ export const emptyNewPerson = {
     phone: "",
 };
 export const emptyPersonPickerValue = {
+    billTo: "person",
     mode: "existing",
     personId: "",
     newPerson: emptyNewPerson,
     organizationId: null,
 };
 /**
- * Person picker with inline-create + optional organization attachment.
+ * Billing target picker for booking create.
  *
- * 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).
+ * State is fully controlled. The embedded create sheets use the CRM forms and
+ * select the newly-created person or organization after save.
  */
 export function PersonPickerSection({ value, onChange, enabled = true, showOrganization = true, labels, }) {
     const [personSearch, setPersonSearch] = React.useState("");
     const [orgSearch, setOrgSearch] = React.useState("");
+    const [personInputValue, setPersonInputValue] = React.useState("");
+    const [orgInputValue, setOrgInputValue] = React.useState("");
+    const [personSheetOpen, setPersonSheetOpen] = React.useState(false);
+    const [orgSheetOpen, setOrgSheetOpen] = React.useState(false);
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.personPickerSection.labels, ...labels };
+    const billingTarget = value.billTo ?? "person";
     const { data: peopleData } = usePeople({
         search: personSearch || undefined,
         limit: 20,
-        enabled: enabled && value.mode === "existing",
+        enabled: enabled && billingTarget === "person",
     });
-    const people = peopleData?.data ?? [];
+    const selectedPersonQuery = usePerson(value.personId || undefined, {
+        enabled: enabled && billingTarget === "person" && Boolean(value.personId),
+    });
+    const people = React.useMemo(() => {
+        const map = new Map();
+        for (const person of peopleData?.data ?? [])
+            map.set(person.id, person);
+        if (selectedPersonQuery.data)
+            map.set(selectedPersonQuery.data.id, selectedPersonQuery.data);
+        return Array.from(map.values());
+    }, [peopleData?.data, selectedPersonQuery.data]);
+    const peopleMap = React.useMemo(() => new Map(people.map((person) => [person.id, person])), [people]);
     const { data: orgsData } = useOrganizations({
         search: orgSearch || undefined,
         limit: 20,
-        enabled: enabled && showOrganization,
+        enabled: enabled && showOrganization && billingTarget === "organization",
+    });
+    const selectedOrgQuery = useOrganization(value.organizationId || undefined, {
+        enabled: enabled && billingTarget === "organization" && Boolean(value.organizationId),
     });
-    const orgs = orgsData?.data ?? [];
+    const orgs = React.useMemo(() => {
+        const map = new Map();
+        for (const org of orgsData?.data ?? [])
+            map.set(org.id, org);
+        if (selectedOrgQuery.data)
+            map.set(selectedOrgQuery.data.id, selectedOrgQuery.data);
+        return Array.from(map.values());
+    }, [orgsData?.data, selectedOrgQuery.data]);
+    const orgsMap = React.useMemo(() => new Map(orgs.map((org) => [org.id, org])), [orgs]);
     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)))] })] })] }))] }));
+    const selectedPersonLabel = value.personId ? formatPerson(peopleMap.get(value.personId)) : "";
+    const selectedOrgLabel = value.organizationId
+        ? (orgsMap.get(value.organizationId)?.name ?? "")
+        : "";
+    React.useEffect(() => {
+        if (selectedPersonLabel)
+            setPersonInputValue(selectedPersonLabel);
+    }, [selectedPersonLabel]);
+    React.useEffect(() => {
+        if (selectedOrgLabel)
+            setOrgInputValue(selectedOrgLabel);
+    }, [selectedOrgLabel]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.billTo }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs(Button, { type: "button", variant: billingTarget === "person" ? "default" : "outline", onClick: () => setPerson({ billTo: "person", organizationId: null }), disabled: !enabled, children: [_jsx(User, { className: "mr-2 h-4 w-4" }), merged.billToPerson] }), _jsxs(Button, { type: "button", variant: billingTarget === "organization" ? "default" : "outline", onClick: () => setPerson({ billTo: "organization", personId: "" }), disabled: !enabled || !showOrganization, children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), merged.billToOrganization] })] })] }), billingTarget === "person" ? (_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: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setPersonSheetOpen(true), disabled: !enabled, children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewPerson] })] }), _jsxs(Combobox, { items: people.map((person) => person.id), value: value.personId || null, inputValue: personInputValue, autoHighlight: true, disabled: !enabled, itemToStringValue: (id) => formatPerson(peopleMap.get(id)), onInputValueChange: (next) => {
+                            setPersonInputValue(next);
+                            setPersonSearch(next);
+                            if (!next)
+                                setPerson({ personId: "" });
+                        }, onValueChange: (next) => {
+                            const personId = next ?? "";
+                            setPerson({ personId });
+                            setPersonInputValue(personId ? formatPerson(peopleMap.get(personId)) : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.personSearchPlaceholder, showClear: !!value.personId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.personEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const person = peopleMap.get(id);
+                                                if (!person)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: person.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: formatPersonName(person) }), person.email ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: person.email })) : null] }) }, person.id));
+                                            } }) })] })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.organization, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setOrgSheetOpen(true), disabled: !enabled, children: [_jsx(Building2, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewOrganization] })] }), _jsxs(Combobox, { items: orgs.map((org) => org.id), value: value.organizationId ?? null, inputValue: orgInputValue, autoHighlight: true, disabled: !enabled, itemToStringValue: (id) => orgsMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+                            setOrgInputValue(next);
+                            setOrgSearch(next);
+                            if (!next)
+                                setPerson({ organizationId: null });
+                        }, onValueChange: (next) => {
+                            const organizationId = next ?? null;
+                            setPerson({ organizationId });
+                            setOrgInputValue(organizationId ? (orgsMap.get(organizationId)?.name ?? "") : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.organizationSearchPlaceholder, showClear: !!value.organizationId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.organizationEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const org = orgsMap.get(id);
+                                                if (!org)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: org.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: org.name }), org.legalName ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: org.legalName })) : null] }) }, org.id));
+                                            } }) })] })] })] })), _jsx(Sheet, { open: personSheetOpen, onOpenChange: setPersonSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: merged.createPersonSheetTitle }) }), _jsx(SheetBody, { children: _jsx(PersonForm, { mode: { kind: "create" }, onCancel: () => setPersonSheetOpen(false), onSuccess: (saved) => {
+                                    setPerson({ billTo: "person", personId: saved.id, organizationId: null });
+                                    setPersonInputValue(formatPerson(saved));
+                                    setPersonSheetOpen(false);
+                                } }) })] }) }), _jsx(Sheet, { open: orgSheetOpen, onOpenChange: setOrgSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: merged.createOrganizationSheetTitle }) }), _jsx(SheetBody, { children: _jsx(OrganizationForm, { mode: { kind: "create" }, onCancel: () => setOrgSheetOpen(false), onSuccess: (saved) => {
+                                    setPerson({ billTo: "organization", personId: "", organizationId: saved.id });
+                                    setOrgInputValue(saved.name);
+                                    setOrgSheetOpen(false);
+                                } }) })] }) })] }));
+}
+function formatPersonName(person) {
+    if (!person)
+        return "";
+    return [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+}
+function formatPerson(person) {
+    if (!person)
+        return "";
+    const name = formatPersonName(person);
+    return person.email ? `${name} · ${person.email}` : name;
 }

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

@@ -13,6 +13,14 @@ export interface PriceBreakdownLine {
     tierLabel: string | null;
     isGroupRate: boolean;
 }
+export interface PriceBreakdownValue {
+    catalogAmountCents: number | null;
+    confirmedAmountCents: number | null;
+    currency: string | null;
+    priceOverrideReason: string;
+    isManualOverride: boolean;
+    requiresReason: boolean;
+}
 export interface PriceBreakdownSectionProps {
     productId?: string;
     optionId?: string | null;
@@ -30,7 +38,14 @@ export interface PriceBreakdownSectionProps {
         groupRate?: string;
         empty?: string;
         noPricing?: string;
+        confirmedTotal?: string;
+        manualTotal?: string;
+        useCatalogTotal?: string;
+        overrideReason?: string;
+        overrideReasonPlaceholder?: string;
+        overrideReasonRequired?: string;
     };
+    onChange?: (value: PriceBreakdownValue) => void;
 }
 /**
  * Live price-breakdown preview for booking-create flows. Read-only — uses
@@ -44,5 +59,5 @@ export interface PriceBreakdownSectionProps {
  * - `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;
+export declare function PriceBreakdownSection({ productId, optionId, unitQuantities, catalogId, labels, onChange, }: PriceBreakdownSectionProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=price-breakdown-section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AAOA,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;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,SAAS,EACT,MAAM,GACP,EAAE,0BAA0B,kDAkL5B"}
+{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AAQA,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,mBAAmB;IAClC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;CACxB;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;QAClB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,sBAAsB,CAAC,EAAE,MAAM,CAAA;KAChC,CAAA;IACD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,0BAA0B,kDAoQ5B"}