@voyantjs/bookings-ui 0.81.17 → 0.81.19

package/dist/components/booking-list.js

@@ -4,6 +4,7 @@ import { useBookings, } from "@voyantjs/bookings-react";
 import { Button } from "@voyantjs/ui/components/button";
 import { Input } from "@voyantjs/ui/components/input";
 import { Label } from "@voyantjs/ui/components/label";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@voyantjs/ui/components/pagination";
 import { Skeleton } from "@voyantjs/ui/components/skeleton";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
 import { ArrowDown, ArrowUp, ArrowUpDown, Plus, Search } from "lucide-react";
@@ -12,6 +13,32 @@ import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefau
 import { BookingDialog } from "./booking-dialog.js";
 import { BOOKING_STATUS_ALL, BookingListFiltersPopover } from "./booking-list-filters.js";
 import { StatusBadge } from "./status-badge.js";
+function stripUndefined(input) {
+    const result = {};
+    for (const [key, value] of Object.entries(input)) {
+        if (value !== undefined)
+            result[key] = value;
+    }
+    return result;
+}
+const DEFAULT_FILTERS = {
+    search: "",
+    status: BOOKING_STATUS_ALL,
+    productId: null,
+    optionId: null,
+    supplierId: null,
+    productCategoryId: null,
+    personId: null,
+    organizationId: null,
+    availabilitySlotId: null,
+    dateFrom: null,
+    dateTo: null,
+    paxMin: "",
+    paxMax: "",
+    sortBy: "createdAt",
+    sortDir: "desc",
+    offset: 0,
+};
 const SORTABLE_COLUMNS = {
     bookingNumber: "bookingNumber",
     status: "status",
@@ -23,26 +50,42 @@ const SORTABLE_COLUMNS = {
 };
 const SKELETON_ROW_COUNT = 6;
 const TABLE_COLUMN_COUNT = 8;
-export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, headerActions, } = {}) {
-    const [search, setSearch] = React.useState("");
-    const [status, setStatus] = React.useState(BOOKING_STATUS_ALL);
-    const [productId, setProductId] = React.useState(null);
-    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 [availabilitySlotId, setAvailabilitySlotId] = React.useState(null);
-    const [dateRange, setDateRange] = React.useState(null);
-    const [paxMin, setPaxMin] = React.useState("");
-    const [paxMax, setPaxMax] = React.useState("");
-    const [sortBy, setSortBy] = React.useState("createdAt");
-    const [sortDir, setSortDir] = React.useState("desc");
-    const [offset, setOffset] = React.useState(0);
+export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, headerActions, initialFilters, onFiltersChange, } = {}) {
+    // Single bag of filter / sort / paging state so we can hand the host
+    // a snapshot whenever anything changes. We seed once from
+    // `initialFilters` and don't re-seed if the prop later mutates —
+    // hosts that want to drive controlled changes can just remount.
+    //
+    // Strip `undefined` keys before merging: a host passing
+    // `{ status: undefined }` would otherwise clobber the
+    // `BOOKING_STATUS_ALL` default and show "2" active filters on an
+    // empty URL.
+    const [filters, setFilters] = React.useState(() => ({
+        ...DEFAULT_FILTERS,
+        ...stripUndefined(initialFilters ?? {}),
+    }));
+    const onFiltersChangeRef = React.useRef(onFiltersChange);
+    React.useEffect(() => {
+        onFiltersChangeRef.current = onFiltersChange;
+    });
+    // Notify the host on every state change. Skip the initial render
+    // because the URL already reflects whatever was passed in via
+    // `initialFilters`.
+    const isFirstRender = React.useRef(true);
+    React.useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        onFiltersChangeRef.current?.(filters);
+    }, [filters]);
+    const updateFilters = React.useCallback((patch) => setFilters((prev) => ({ ...prev, ...patch })), []);
+    const { search, status, productId, optionId, supplierId, productCategoryId, personId, organizationId, availabilitySlotId, dateFrom, dateTo, paxMin, paxMax, sortBy, sortDir, offset, } = filters;
+    const dateRange = dateFrom != null || dateTo != null ? { from: dateFrom, to: dateTo } : null;
     const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editing, setEditing] = React.useState(undefined);
-    const { formatDateTime, formatNumber } = useBookingsUiI18nOrDefault();
+    const { formatDate, formatDateTime, formatNumber, locale } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const paxMinNumber = paxMin === "" ? undefined : Number.parseInt(paxMin, 10);
     const paxMaxNumber = paxMax === "" ? undefined : Number.parseInt(paxMax, 10);
@@ -83,20 +126,17 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
         setEditing(booking);
         setDialogOpen(true);
     };
-    const resetOffset = () => setOffset(0);
+    const resetOffset = () => updateFilters({ offset: 0 });
     const handleSort = (field) => {
-        setOffset(0);
         if (sortBy !== field) {
-            setSortBy(field);
-            setSortDir("asc");
+            updateFilters({ offset: 0, sortBy: field, sortDir: "asc" });
             return;
         }
         if (sortDir === "asc") {
-            setSortDir("desc");
+            updateFilters({ offset: 0, sortDir: "desc" });
             return;
         }
-        setSortBy("createdAt");
-        setSortDir("desc");
+        updateFilters({ offset: 0, sortBy: "createdAt", sortDir: "desc" });
     };
     const activeFilterCount = (status !== BOOKING_STATUS_ALL ? 1 : 0) +
         (productId !== null ? 1 : 0) +
@@ -110,51 +150,85 @@ export function BookingList({ pageSize = 25, onSelectBooking, onCreateBooking, h
         (paxMin !== "" || paxMax !== "" ? 1 : 0);
     const hasActiveFilters = activeFilterCount > 0 || search !== "";
     const clearFilters = () => {
-        setSearch("");
-        setStatus(BOOKING_STATUS_ALL);
-        setProductId(null);
-        setOptionId(null);
-        setAvailabilitySlotId(null);
-        setSupplierId(null);
-        setProductCategoryId(null);
-        setPersonId(null);
-        setOrganizationId(null);
-        setDateRange(null);
-        setPaxMin("");
-        setPaxMax("");
-        resetOffset();
+        updateFilters({
+            search: "",
+            status: BOOKING_STATUS_ALL,
+            productId: null,
+            optionId: null,
+            availabilitySlotId: null,
+            supplierId: null,
+            productCategoryId: null,
+            personId: null,
+            organizationId: null,
+            dateFrom: null,
+            dateTo: null,
+            paxMin: "",
+            paxMax: "",
+            offset: 0,
+        });
     };
     const columnMessages = messages.bookingList.columns;
     const statusLabels = messages.common.bookingStatusLabels;
-    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" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: (next) => {
-                            setProductId(next);
-                            // Slot picker is product-scoped; clear when the product changes.
-                            setAvailabilitySlotId(null);
-                        }, optionId: optionId, onOptionIdChange: setOptionId, availabilitySlotId: availabilitySlotId, onAvailabilitySlotIdChange: setAvailabilitySlotId, 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: hasActiveFilters, onClearFilters: clearFilters }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [headerActions, _jsxs(Button, { onClick: () => {
+    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) => updateFilters({ search: event.target.value, offset: 0 }), className: "pl-9" })] }), _jsx(BookingListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: (next) => updateFilters({ status: next }), productId: productId, onProductIdChange: (next) => 
+                        // Slot picker is product-scoped; clear when the product changes.
+                        updateFilters({ productId: next, availabilitySlotId: null }), optionId: optionId, onOptionIdChange: (next) => updateFilters({ optionId: next }), availabilitySlotId: availabilitySlotId, onAvailabilitySlotIdChange: (next) => updateFilters({ availabilitySlotId: next }), supplierId: supplierId, onSupplierIdChange: (next) => updateFilters({ supplierId: next }), productCategoryId: productCategoryId, onProductCategoryIdChange: (next) => updateFilters({ productCategoryId: next }), personId: personId, onPersonIdChange: (next) => updateFilters({ personId: next }), organizationId: organizationId, onOrganizationIdChange: (next) => updateFilters({ organizationId: next }), dateRange: dateRange, onDateRangeChange: (next) => updateFilters({ dateFrom: next?.from ?? null, dateTo: next?.to ?? null }), paxMin: paxMin, onPaxMinChange: (next) => updateFilters({ paxMin: next }), paxMax: paxMax, onPaxMaxChange: (next) => updateFilters({ paxMax: next }), onFiltersChanged: resetOffset, hasActiveFilters: hasActiveFilters, onClearFilters: clearFilters }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [headerActions, _jsxs(Button, { onClick: () => {
                                     if (onCreateBooking) {
                                         onCreateBooking();
                                         return;
                                     }
                                     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.lead }), _jsx(TableHead, { children: _jsx(SortHeader, { label: columnMessages.createdAt, field: SORTABLE_COLUMNS.createdAt, 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(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: formatLead(booking) }), _jsx(TableCell, { children: formatBookingDateTime(booking.createdAt, formatDateTime) }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore) }), _jsx(TableCell, { children: _jsx(StatusBadge, { status: booking.status, children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
+                                }, 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: _jsx(SortHeader, { label: columnMessages.createdAt, field: SORTABLE_COLUMNS.createdAt, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: columnMessages.lead }), _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(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: formatBookingDateTime(booking.createdAt, formatDateTime) }), _jsx(TableCell, { children: formatLead(booking) }), _jsx(TableCell, { children: formatBookingItems(booking, messages.bookingList.itemsMore, messages.bookingList.itemDays) }), _jsx(TableCell, { children: _jsx(StatusBadge, { status: booking.status, children: statusLabels[booking.status] }) }), _jsx(TableCell, { children: booking.sellAmountCents == null
                                             ? "—"
                                             : `${formatNumber(booking.sellAmountCents / 100, {
                                                 minimumFractionDigits: 2,
                                                 maximumFractionDigits: 2,
-                                            })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsxs(TableCell, { children: [formatBookingDateTime(booking.startsAt ?? booking.startDate, formatDateTime), " – ", 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, {
+                                            })} ${booking.sellCurrency}` }), _jsx(TableCell, { children: booking.pax ?? "—" }), _jsx(TableCell, { className: "whitespace-nowrap", children: formatBookingDateRange(booking.startsAt ?? booking.startDate, booking.endsAt ?? booking.endDate, formatDate, locale) })] }, booking.id)))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 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: 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: messages.bookingList.nextPage })] })] }), _jsx(BookingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, booking: editing, onSuccess: (booking) => {
+                        }) }), pageCount > 1 ? (_jsx(BookingListPagination, { page: page, pageCount: pageCount, previousLabel: messages.bookingList.previousPage, nextLabel: messages.bookingList.nextPage, onPageChange: (nextPage) => updateFilters({ offset: (nextPage - 1) * pageSize }) })) : null] }), _jsx(BookingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, booking: editing, onSuccess: (booking) => {
                     onSelectBooking?.(booking);
                 } })] }));
 }
+function BookingListPagination({ page, pageCount, previousLabel, nextLabel, onPageChange, }) {
+    const canPrev = page > 1;
+    const canNext = page < pageCount;
+    const pages = computePageWindow(page, pageCount);
+    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", text: previousLabel, "aria-disabled": !canPrev, tabIndex: canPrev ? 0 : -1, className: canPrev ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canPrev)
+                                onPageChange(page - 1);
+                        } }) }), pages.map((entry, idx) => (_jsx(PaginationItem
+                // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis sentinels collide on value alone
+                , { children: entry === "…" ? (_jsx("span", { className: "px-2 text-muted-foreground", "aria-hidden": true, children: "\u2026" })) : (_jsx(PaginationLink, { href: "#", isActive: entry === page, onClick: (event) => {
+                            event.preventDefault();
+                            if (entry !== page)
+                                onPageChange(entry);
+                        }, children: entry })) }, `${entry}-${idx}`))), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", text: nextLabel, "aria-disabled": !canNext, tabIndex: canNext ? 0 : -1, className: canNext ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canNext)
+                                onPageChange(page + 1);
+                        } }) })] }) }));
+}
+/** Build a 1-indexed page list with ellipses for tables with many
+ * pages. Always shows first, last, current, and one neighbour on
+ * either side. */
+function computePageWindow(page, pageCount) {
+    if (pageCount <= 7) {
+        return Array.from({ length: pageCount }, (_, i) => i + 1);
+    }
+    const out = [1];
+    const start = Math.max(2, page - 1);
+    const end = Math.min(pageCount - 1, page + 1);
+    if (start > 2)
+        out.push("…");
+    for (let i = start; i <= end; i += 1)
+        out.push(i);
+    if (end < pageCount - 1)
+        out.push("…");
+    out.push(pageCount);
+    return out;
+}
 function SortHeader({ label, field, sortBy, sortDir, onSort }) {
     const active = sortBy === field;
     const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
@@ -163,7 +237,7 @@ function SortHeader({ label, field, sortBy, sortDir, onSort }) {
 function BookingTableSkeleton({ rows }) {
     return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-8" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) })] }, `skeleton-${idx}`))) }));
 }
-function formatBookingItems(booking, moreTemplate) {
+function formatBookingItems(booking, moreTemplate, daysTemplate) {
     const items = booking.items ?? [];
     if (items.length === 0)
         return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
@@ -171,8 +245,24 @@ function formatBookingItems(booking, moreTemplate) {
     if (!first)
         return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
     const label = first.productName ?? first.title;
+    const days = computeItemDays(first.startsAt, first.endsAt);
+    const daysSuffix = days > 0 ? ` ${formatMessage(daysTemplate, { count: days })}` : "";
     const moreSuffix = rest.length === 0 ? "" : ` ${formatMessage(moreTemplate, { count: rest.length })}`;
-    return (_jsxs("div", { className: "max-w-[320px] truncate", title: `${label}${moreSuffix}`, children: [label, rest.length > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(moreTemplate, { count: rest.length }) })) : null] }));
+    return (_jsxs("div", { className: "max-w-[320px] truncate", title: `${label}${daysSuffix}${moreSuffix}`, children: [label, days > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(daysTemplate, { count: days }) })) : null, rest.length > 0 ? (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: formatMessage(moreTemplate, { count: rest.length }) })) : null] }));
+}
+/** Inclusive day-count between two ISO timestamps, rounded up so a
+ * trip spanning two calendar days reads "2 days". Returns 0 when
+ * either bound is missing so the caller can drop the tag entirely. */
+function computeItemDays(startValue, endValue) {
+    const start = toDate(startValue);
+    const end = toDate(endValue);
+    if (!start || !end)
+        return 0;
+    const ms = end.getTime() - start.getTime();
+    if (!Number.isFinite(ms) || ms < 0)
+        return 0;
+    const days = Math.ceil(ms / (1000 * 60 * 60 * 24));
+    return Math.max(1, days);
 }
 function formatBookingDateTime(value, formatDateTime) {
     if (!value)
@@ -182,6 +272,77 @@ function formatBookingDateTime(value, formatDateTime) {
     }
     return formatDateTime(value);
 }
+function toDate(value) {
+    if (!value)
+        return null;
+    const iso = /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+/**
+ * Compact date-range formatter for the bookings table — collapses
+ * shared month/year so a 3-day trip reads "Jun 15 – 20, 2026" in
+ * English and "15 – 20 iun., 2026" in Romanian. Output respects the
+ * locale's day/month order.
+ *
+ * NOTE: `Intl.DateTimeFormat` produces nonsense (e.g.
+ * `"2026 (day: 20)"`) for incomplete combinations like `{ day, year }`
+ * without a month. We build the compact range from named parts
+ * instead of asking Intl to skip the month.
+ */
+function formatBookingDateRange(startValue, endValue, formatDate, locale) {
+    const start = toDate(startValue);
+    const end = toDate(endValue);
+    if (!start && !end)
+        return "—";
+    if (start && !end)
+        return formatDate(start, { month: "short", day: "numeric", year: "numeric" });
+    if (!start || !end)
+        return formatDate(end, { month: "short", day: "numeric", year: "numeric" });
+    const s = start;
+    const e = end;
+    const sameDay = s.getFullYear() === e.getFullYear() &&
+        s.getMonth() === e.getMonth() &&
+        s.getDate() === e.getDate();
+    if (sameDay)
+        return formatDate(s, { month: "short", day: "numeric", year: "numeric" });
+    const sameYear = s.getFullYear() === e.getFullYear();
+    const sameMonth = sameYear && s.getMonth() === e.getMonth();
+    // For collapsed ranges we need to know whether the locale puts the
+    // month before or after the day (en-US: "Jun 15", ro-RO: "15 iun.")
+    // so the result reads naturally.
+    const dayFirst = isLocaleDayFirst(locale);
+    const monthShortStart = formatDate(s, { month: "short" });
+    const monthShortEnd = formatDate(e, { month: "short" });
+    const startDay = formatDate(s, { day: "numeric" });
+    const endDay = formatDate(e, { day: "numeric" });
+    if (sameMonth) {
+        const body = dayFirst
+            ? `${startDay} – ${endDay} ${monthShortStart}`
+            : `${monthShortStart} ${startDay} – ${endDay}`;
+        return `${body}, ${e.getFullYear()}`;
+    }
+    if (sameYear) {
+        const body = dayFirst
+            ? `${startDay} ${monthShortStart} – ${endDay} ${monthShortEnd}`
+            : `${monthShortStart} ${startDay} – ${monthShortEnd} ${endDay}`;
+        return `${body}, ${e.getFullYear()}`;
+    }
+    return `${formatDate(s, { month: "short", day: "numeric", year: "numeric" })} – ${formatDate(e, { month: "short", day: "numeric", year: "numeric" })}`;
+}
+/** Detect whether the locale renders the day before the month in a
+ * short date format (e.g. ro-RO: "15 iun." vs en-US: "Jun 15"). */
+function isLocaleDayFirst(locale) {
+    const parts = new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+    }).formatToParts(new Date(2026, 0, 15));
+    const dayIndex = parts.findIndex((p) => p.type === "day");
+    const monthIndex = parts.findIndex((p) => p.type === "month");
+    if (dayIndex === -1 || monthIndex === -1)
+        return false;
+    return dayIndex < monthIndex;
+}
 function formatLead(booking) {
     const name = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ").trim();
     if (name)

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

@@ -0,0 +1,16 @@
+import { type BookingNoteRecord } from "@voyantjs/bookings-react";
+export interface BookingNoteDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    /** When set, the dialog opens in edit mode against this note. */
+    note?: BookingNoteRecord | null;
+    onSuccess?: () => void;
+}
+/**
+ * Add / edit a booking note. Mirrors the supplier-status / traveler
+ * dialog pattern so the activity tab is consistent with the rest of
+ * the booking-detail surface.
+ */
+export declare function BookingNoteDialog({ open, onOpenChange, bookingId, note, onSuccess, }: BookingNoteDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-note-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-note-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-note-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAA0B,MAAM,0BAA0B,CAAA;AAiBzF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,IAAI,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,2CA6DxB"}

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingNoteMutation } from "@voyantjs/bookings-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Textarea, } from "@voyantjs/ui/components";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+/**
+ * Add / edit a booking note. Mirrors the supplier-status / traveler
+ * dialog pattern so the activity tab is consistent with the rest of
+ * the booking-detail surface.
+ */
+export function BookingNoteDialog({ open, onOpenChange, bookingId, note, onSuccess, }) {
+    const [content, setContent] = React.useState("");
+    const messages = useBookingsUiMessagesOrDefault();
+    const dialog = messages.bookingNotes.dialog;
+    const mutation = useBookingNoteMutation(bookingId);
+    const isEditing = Boolean(note);
+    React.useEffect(() => {
+        if (open)
+            setContent(note?.content ?? "");
+    }, [note, open]);
+    const submit = async () => {
+        const trimmed = content.trim();
+        if (!trimmed)
+            return;
+        if (note) {
+            await mutation.update.mutateAsync({ id: note.id, content: trimmed });
+        }
+        else {
+            await mutation.create.mutateAsync({ content: trimmed });
+        }
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    const pending = isEditing ? mutation.update.isPending : mutation.create.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.createTitle }) }), _jsxs("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        void submit();
+                    }, className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "booking-note-content", children: dialog.contentLabel }), _jsx(Textarea, { id: "booking-note-content", placeholder: dialog.contentPlaceholder, value: content, onChange: (e) => setContent(e.target.value), className: "min-h-[120px]" })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: dialog.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: !content.trim() || pending, children: [pending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? dialog.save : dialog.create] })] })] })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"booking-notes.d.ts","sourceRoot":"","sources":["../../src/components/booking-notes.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAqD5D"}
+{"version":3,"file":"booking-notes.d.ts","sourceRoot":"","sources":["../../src/components/booking-notes.tsx"],"names":[],"mappings":"AA6BA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAmG5D"}

package/dist/components/booking-notes.js

@@ -1,19 +1,45 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBookingNoteMutation, useBookingNotes } from "@voyantjs/bookings-react";
-import { Button, Card, CardContent, CardHeader, CardTitle, Textarea } from "@voyantjs/ui/components";
-import { Loader2 } from "lucide-react";
+import { useBookingNoteMutation, useBookingNotes, } from "@voyantjs/bookings-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyantjs/ui/components";
+import { Pencil, Plus, StickyNote, Trash2 } from "lucide-react";
 import * as React from "react";
-import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
+import { BookingNoteDialog } from "./booking-note-dialog.js";
+import { IconActionButton } from "./icon-action-button.js";
 export function BookingNotes({ bookingId }) {
-    const [content, setContent] = React.useState("");
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
     const { data } = useBookingNotes(bookingId);
     const mutation = useBookingNoteMutation(bookingId);
     const { formatDateTime } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
-    const notes = data?.data ?? [];
-    return (_jsxs(Card, { "data-slot": "booking-notes", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.bookingNotes.title }) }), _jsxs(CardContent, { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Textarea, { placeholder: messages.bookingNotes.placeholder, value: content, onChange: (event) => setContent(event.target.value), className: "min-h-[80px]" }), _jsx(Button, { className: "self-end", disabled: !content.trim() || mutation.isPending, onClick: async () => {
-                                    await mutation.mutateAsync({ content: content.trim() });
-                                    setContent("");
-                                }, children: mutation.isPending ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (messages.bookingNotes.add) })] }), notes.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingNotes.empty })) : (notes.map((note) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm", children: note.content }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: formatDateTime(note.createdAt) })] }, note.id))))] })] }));
+    const card = messages.bookingNotes;
+    const notes = (data?.data ?? []);
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await mutation.remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    return (_jsxs("div", { "data-slot": "booking-notes", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(StickyNote, { className: "h-4 w-4 text-muted-foreground" }), card.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(null);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), card.addAction] })] }), notes.length === 0 ? (_jsx("div", { className: "rounded-md border bg-background p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: card.empty }) })) : (_jsx("div", { className: "grid gap-2 md:grid-cols-2", children: notes.map((note) => (_jsx(NoteCard, { note: note, authorTemplate: card.authorLabel, editLabel: card.actions.edit, deleteLabel: card.actions.delete, formatDateTime: formatDateTime, onEdit: () => {
+                        setEditing(note);
+                        setDialogOpen(true);
+                    }, onDelete: () => setDeleteTarget(note) }, note.id))) })), _jsx(BookingNoteDialog, { open: dialogOpen, onOpenChange: (next) => {
+                    setDialogOpen(next);
+                    if (!next)
+                        setEditing(null);
+                }, bookingId: bookingId, note: editing }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !mutation.remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: card.deleteConfirm.title }), _jsx(AlertDialogDescription, { children: card.deleteConfirm.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: mutation.remove.isPending, children: card.deleteConfirm.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: mutation.remove.isPending, onClick: () => void handleConfirmDelete(), children: card.deleteConfirm.confirm })] })] }) })] }));
+}
+function NoteCard({ note, authorTemplate, editLabel, deleteLabel, formatDateTime, onEdit, onDelete, }) {
+    return (_jsxs("div", { className: "group flex flex-col gap-2 rounded-md border bg-background p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm", children: note.content }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: [_jsx(IconActionButton, { label: editLabel, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: onEdit }), _jsx(IconActionButton, { label: deleteLabel, icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), onClick: onDelete })] })] }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [formatMessage(authorTemplate, {
+                        actor: note.authorName || note.authorEmail || note.authorId,
+                    }), " ", "\u00B7 ", formatDateTime(note.createdAt)] })] }));
 }

package/dist/components/bookings-page.d.ts

@@ -1,5 +1,6 @@
 import type { BookingRecord } from "@voyantjs/bookings-react";
 import type * as React from "react";
+import { type BookingListFiltersState } from "./booking-list.js";
 export interface BookingsPageProps {
     pageSize?: number;
     onBookingOpen?: (booking: BookingRecord) => void;
@@ -10,6 +11,9 @@ export interface BookingsPageProps {
      */
     headerActions?: React.ReactNode;
     className?: string;
+    /** Forwarded to `BookingList` — see prop docs there. */
+    initialFilters?: Partial<BookingListFiltersState>;
+    onFiltersChange?: (filters: BookingListFiltersState) => void;
 }
-export declare function BookingsPage({ pageSize, onBookingOpen, onCreateBooking, headerActions, className, }?: BookingsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function BookingsPage({ pageSize, onBookingOpen, onCreateBooking, headerActions, className, initialFilters, onFiltersChange, }?: BookingsPageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=bookings-page.d.ts.map

package/dist/components/bookings-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bookings-page.d.ts","sourceRoot":"","sources":["../../src/components/bookings-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAInC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,aAAa,EACb,SAAS,GACV,GAAE,iBAAsB,2CAkBxB"}
+{"version":3,"file":"bookings-page.d.ts","sourceRoot":"","sources":["../../src/components/bookings-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAE7E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;IACjD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAA;CAC7D;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACd,eAAe,GAChB,GAAE,iBAAsB,2CAoBxB"}

package/dist/components/bookings-page.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@voyantjs/ui/lib/utils";
 import { useBookingsUiMessagesOrDefault } from "../i18n/index.js";
 import { BookingList } from "./booking-list.js";
-export function BookingsPage({ pageSize, onBookingOpen, onCreateBooking, headerActions, className, } = {}) {
+export function BookingsPage({ pageSize, onBookingOpen, onCreateBooking, headerActions, className, initialFilters, onFiltersChange, } = {}) {
     const messages = useBookingsUiMessagesOrDefault().bookingsPage;
-    return (_jsxs("div", { "data-slot": "bookings-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: messages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.description })] }), _jsx(BookingList, { pageSize: pageSize, onSelectBooking: onBookingOpen, onCreateBooking: onCreateBooking, headerActions: headerActions })] }));
+    return (_jsxs("div", { "data-slot": "bookings-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: messages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.description })] }), _jsx(BookingList, { pageSize: pageSize, onSelectBooking: onBookingOpen, onCreateBooking: onCreateBooking, headerActions: headerActions, initialFilters: initialFilters, onFiltersChange: onFiltersChange })] }));
 }

package/dist/components/status-change-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-change-dialog.d.ts","sourceRoot":"","sources":["../../src/components/status-change-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAA;AAgCjC,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,2CAoGzB"}
+{"version":3,"file":"status-change-dialog.d.ts","sourceRoot":"","sources":["../../src/components/status-change-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAA;AAkCjC,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,GACV,EAAE,uBAAuB,2CAkIzB"}

package/dist/components/status-change-dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { bookingStatusOptions, bookingStatusSchema, useBookingStatusMutation, } from "@voyantjs/bookings-react";
-import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
 import { useEffect, useMemo } from "react";
@@ -11,6 +11,7 @@ import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 const statusChangeFormSchema = z.object({
     status: bookingStatusSchema,
     note: z.string().optional().nullable(),
+    suppressNotifications: z.boolean(),
 });
 export function StatusChangeDialog({ open, onOpenChange, bookingId, currentStatus, onSuccess, }) {
     const mutation = useBookingStatusMutation(bookingId);
@@ -24,6 +25,7 @@ export function StatusChangeDialog({ open, onOpenChange, bookingId, currentStatu
         defaultValues: {
             status: "draft",
             note: "",
+            suppressNotifications: false,
         },
     });
     useEffect(() => {
@@ -31,17 +33,25 @@ export function StatusChangeDialog({ open, onOpenChange, bookingId, currentStatu
             form.reset({
                 status: currentStatus,
                 note: "",
+                suppressNotifications: false,
             });
         }
     }, [currentStatus, form, open]);
+    // Suppression only takes effect on the `confirm` verb today (see
+    // status-dispatch.ts), so only show the toggle when the target is
+    // `confirmed`. Hide it otherwise to keep the dialog focused.
+    const targetStatus = form.watch("status");
+    const suppressNotifications = form.watch("suppressNotifications");
+    const showSuppressToggle = targetStatus === "confirmed";
     const onSubmit = async (values) => {
         await mutation.mutateAsync({
             currentStatus,
             status: values.status,
             note: values.note || null,
+            suppressNotifications: values.suppressNotifications || undefined,
         });
         onOpenChange(false);
         onSuccess?.();
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.statusChangeDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.statusChangeDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: bookingStatusOptions.map((status) => (_jsx(SelectItem, { value: status.value, children: messages.common.bookingStatusLabels[status.value] }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.statusChangeDialog.fields.note }), _jsx(Textarea, { ...form.register("note"), placeholder: messages.statusChangeDialog.placeholders.note })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: mutation.isPending, children: [mutation.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.statusChangeDialog.actions.updateStatus] })] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.statusChangeDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.statusChangeDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: bookingStatusOptions.map((status) => (_jsx(SelectItem, { value: status.value, children: messages.common.bookingStatusLabels[status.value] }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.statusChangeDialog.fields.note }), _jsx(Textarea, { ...form.register("note"), placeholder: messages.statusChangeDialog.placeholders.note })] }), showSuppressToggle ? (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/30 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "suppress-notifications", children: messages.statusChangeDialog.fields.suppressNotifications }), _jsx(Switch, { id: "suppress-notifications", checked: suppressNotifications, onCheckedChange: (checked) => form.setValue("suppressNotifications", checked === true) })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: messages.statusChangeDialog.helpers.suppressNotifications })] })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: mutation.isPending, children: [mutation.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.statusChangeDialog.actions.updateStatus] })] })] })] }) }));
 }