@voyant-travel/operations-react 0.0.0

package/dist/availability/components/availability-dialogs/start-time-dialog.d.ts

@@ -0,0 +1,12 @@
+import type { AvailabilityStartTimeRow, ProductOption } from "../../index.js";
+import { type AvailabilityDialogMessages, type AvailabilityStartTimeSubmitPayload, type SubmitContext } from "./shared.js";
+export declare function AvailabilityStartTimeDialog(props: {
+    messages: AvailabilityDialogMessages;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    startTime?: AvailabilityStartTimeRow;
+    products: ProductOption[];
+    onSubmit: (payload: AvailabilityStartTimeSubmitPayload, context: SubmitContext) => Promise<void>;
+    onSuccess: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=start-time-dialog.d.ts.map

package/dist/availability/components/availability-dialogs/start-time-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-time-dialog.d.ts","sourceRoot":"","sources":["../../../../src/availability/components/availability-dialogs/start-time-dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE7E,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,kCAAkC,EAGvC,KAAK,aAAa,EAEnB,MAAM,aAAa,CAAA;AAiBpB,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IACjD,QAAQ,EAAE,0BAA0B,CAAA;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,wBAAwB,CAAA;IACpC,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAwGA"}

package/dist/availability/components/availability-dialogs/start-time-dialog.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle, Input, Label, } from "@voyant-travel/ui/components";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { zodResolver } from "../../form-resolver.js";
+import { nullableNumber, nullableString } from "../../index.js";
+import { DialogActions, ProductSelect, SwitchField, } from "./shared.js";
+function getStartTimeFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.startTime.validationProductRequired),
+        label: z.string().optional(),
+        startTimeLocal: z.string().min(1, messages.dialogs.startTime.validationStartTimeRequired),
+        durationMinutes: z.string().optional(),
+        sortOrder: z.coerce.number().int(),
+        active: z.boolean(),
+    });
+}
+export function AvailabilityStartTimeDialog(props) {
+    const startTimeMessages = props.messages.dialogs.startTime;
+    const startTimeFormSchema = getStartTimeFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(startTimeFormSchema),
+        defaultValues: {
+            productId: "",
+            label: "",
+            startTimeLocal: "09:00",
+            durationMinutes: "",
+            sortOrder: 0,
+            active: true,
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.startTime) {
+            form.reset({
+                productId: props.startTime.productId,
+                label: props.startTime.label ?? "",
+                startTimeLocal: props.startTime.startTimeLocal,
+                durationMinutes: props.startTime.durationMinutes?.toString() ?? "",
+                sortOrder: props.startTime.sortOrder,
+                active: props.startTime.active,
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.open, props.startTime]);
+    const isEditing = Boolean(props.startTime);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            label: nullableString(values.label),
+            startTimeLocal: values.startTimeLocal,
+            durationMinutes: nullableNumber(values.durationMinutes),
+            sortOrder: values.sortOrder,
+            active: values.active,
+        }, { isEditing, id: props.startTime?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? startTimeMessages.editTitle : startTimeMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: startTimeMessages.productLabel, placeholder: startTimeMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.labelLabel }), _jsx(Input, { ...form.register("label"), placeholder: startTimeMessages.labelPlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.startTimeLabel }), _jsx(Input, { ...form.register("startTimeLocal"), type: "time" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.durationMinutesLabel }), _jsx(Input, { ...form.register("durationMinutes"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] })] }), _jsx(SwitchField, { title: startTimeMessages.activeTitle, description: startTimeMessages.activeDescription, checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) })] }), _jsx(DialogActions, { cancel: startTimeMessages.cancel, save: startTimeMessages.save, create: startTimeMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}

package/dist/availability/components/availability-dialogs.d.ts

@@ -0,0 +1,7 @@
+export { AvailabilityCloseoutDialog } from "./availability-dialogs/closeout-dialog.js";
+export { AvailabilityPickupPointDialog } from "./availability-dialogs/pickup-point-dialog.js";
+export { AvailabilityRuleDialog } from "./availability-dialogs/rule-dialog.js";
+export type { AvailabilityCloseoutSubmitPayload, AvailabilityDialogMessages, AvailabilityPickupPointSubmitPayload, AvailabilityRuleSubmitPayload, AvailabilitySlotSubmitPayload, AvailabilityStartTimeSubmitPayload, } from "./availability-dialogs/shared.js";
+export { AvailabilitySlotDialog } from "./availability-dialogs/slot-dialog.js";
+export { AvailabilityStartTimeDialog } from "./availability-dialogs/start-time-dialog.js";
+//# sourceMappingURL=availability-dialogs.d.ts.map

package/dist/availability/components/availability-dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-dialogs.d.ts","sourceRoot":"","sources":["../../../src/availability/components/availability-dialogs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAA;AACtF,OAAO,EAAE,6BAA6B,EAAE,MAAM,+CAA+C,CAAA;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAA;AAC9E,YAAY,EACV,iCAAiC,EACjC,0BAA0B,EAC1B,oCAAoC,EACpC,6BAA6B,EAC7B,6BAA6B,EAC7B,kCAAkC,GACnC,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAA;AAC9E,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAA"}

package/dist/availability/components/availability-dialogs.js

@@ -0,0 +1,6 @@
+"use client";
+export { AvailabilityCloseoutDialog } from "./availability-dialogs/closeout-dialog.js";
+export { AvailabilityPickupPointDialog } from "./availability-dialogs/pickup-point-dialog.js";
+export { AvailabilityRuleDialog } from "./availability-dialogs/rule-dialog.js";
+export { AvailabilitySlotDialog } from "./availability-dialogs/slot-dialog.js";
+export { AvailabilityStartTimeDialog } from "./availability-dialogs/start-time-dialog.js";

package/dist/availability/components/availability-overview.d.ts

@@ -0,0 +1,54 @@
+import type { AvailabilityPickupPointRow, AvailabilityRuleRow, AvailabilitySlotRow, ProductOption } from "../index.js";
+import { type AvailabilityColumnsMessages } from "./availability-columns.js";
+export interface AvailabilityOverviewMessages extends AvailabilityColumnsMessages {
+    allProducts: string;
+    clearFilters: string;
+    searchPlaceholder: string;
+    overview: {
+        openSlotsTitle: string;
+        openSlotsDescription: string;
+        constrainedSlotsTitle: string;
+        constrainedSlotsDescription: string;
+        activeRulesTitle: string;
+        activeRulesDescription: string;
+        pickupPointsTitle: string;
+        pickupPointsDescription: string;
+        capacityWatchlistTitle: string;
+        capacityWatchlistEmpty: string;
+        coverageGapsTitle: string;
+        coverageGapsEmpty: string;
+        coverageGapDescription: string;
+        actionRequiredTitle: string;
+        actionRequiredBody: string;
+        actionRequiredCta: string;
+        attentionTitle: string;
+        attentionEmpty: string;
+        severityCoverageGap: string;
+        severityClosed: string;
+        severitySoldOut: string;
+    };
+}
+export declare function AvailabilityOverview({ messages, products, constrainedSlots, constrainedSlotsCount: providedConstrainedSlotsCount, openSlotsCount: providedOpenSlotsCount, activeRulesCount: providedActiveRulesCount, activePickupPointsCount: providedActivePickupPointsCount, filteredRules, filteredPickupPoints, productsWithoutUpcomingDepartures, productsWithoutUpcomingDeparturesCount: providedProductsWithoutUpcomingDeparturesCount, search, setSearch, productFilter, setProductFilter, hasFilters, onClearFilters, onOpenSlot, onOpenProduct, onJumpToSlots, showFilters, }: {
+    messages: AvailabilityOverviewMessages;
+    products: ProductOption[];
+    constrainedSlots: AvailabilitySlotRow[];
+    constrainedSlotsCount?: number;
+    openSlotsCount?: number;
+    activeRulesCount?: number;
+    activePickupPointsCount?: number;
+    filteredRules: AvailabilityRuleRow[];
+    filteredPickupPoints: AvailabilityPickupPointRow[];
+    productsWithoutUpcomingDepartures: ProductOption[];
+    productsWithoutUpcomingDeparturesCount?: number;
+    search: string;
+    setSearch: (value: string) => void;
+    productFilter: string;
+    setProductFilter: (value: string) => void;
+    hasFilters: boolean;
+    onClearFilters: () => void;
+    onOpenSlot: (slotId: string) => void;
+    onOpenProduct: (productId: string) => void;
+    onJumpToSlots?: () => void;
+    showFilters?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=availability-overview.d.ts.map

package/dist/availability/components/availability-overview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-overview.d.ts","sourceRoot":"","sources":["../../../src/availability/components/availability-overview.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EACV,0BAA0B,EAC1B,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACd,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,KAAK,2BAA2B,EAAsB,MAAM,2BAA2B,CAAA;AAShG,MAAM,WAAW,4BAA6B,SAAQ,2BAA2B;IAC/E,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE;QACR,cAAc,EAAE,MAAM,CAAA;QACtB,oBAAoB,EAAE,MAAM,CAAA;QAC5B,qBAAqB,EAAE,MAAM,CAAA;QAC7B,2BAA2B,EAAE,MAAM,CAAA;QACnC,gBAAgB,EAAE,MAAM,CAAA;QACxB,sBAAsB,EAAE,MAAM,CAAA;QAC9B,iBAAiB,EAAE,MAAM,CAAA;QACzB,uBAAuB,EAAE,MAAM,CAAA;QAC/B,sBAAsB,EAAE,MAAM,CAAA;QAC9B,sBAAsB,EAAE,MAAM,CAAA;QAC9B,iBAAiB,EAAE,MAAM,CAAA;QACzB,iBAAiB,EAAE,MAAM,CAAA;QACzB,sBAAsB,EAAE,MAAM,CAAA;QAC9B,mBAAmB,EAAE,MAAM,CAAA;QAC3B,kBAAkB,EAAE,MAAM,CAAA;QAC1B,iBAAiB,EAAE,MAAM,CAAA;QACzB,cAAc,EAAE,MAAM,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;QACtB,mBAAmB,EAAE,MAAM,CAAA;QAC3B,cAAc,EAAE,MAAM,CAAA;QACtB,eAAe,EAAE,MAAM,CAAA;KACxB,CAAA;CACF;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EAAE,6BAA6B,EACpD,cAAc,EAAE,sBAAsB,EACtC,gBAAgB,EAAE,wBAAwB,EAC1C,uBAAuB,EAAE,+BAA+B,EACxD,aAAa,EACb,oBAAoB,EACpB,iCAAiC,EACjC,sCAAsC,EAAE,8CAA8C,EACtF,MAAM,EACN,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,4BAA4B,CAAA;IACtC,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,gBAAgB,EAAE,mBAAmB,EAAE,CAAA;IACvC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,aAAa,EAAE,mBAAmB,EAAE,CAAA;IACpC,oBAAoB,EAAE,0BAA0B,EAAE,CAAA;IAClD,iCAAiC,EAAE,aAAa,EAAE,CAAA;IAClD,sCAAsC,CAAC,EAAE,MAAM,CAAA;IAC/C,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,2CA0KA"}

package/dist/availability/components/availability-overview.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, cn, Input, OverviewMetric, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { AlertTriangle, ArrowRight, CalendarDays, CheckCircle2, Clock3, Package, Search, Truck, } from "lucide-react";
+import { useAvailabilityUiMessagesOrDefault } from "../i18n/index.js";
+import { productNameById, slotLocalStart } from "../index.js";
+import { getSlotStatusLabel } from "./availability-columns.js";
+function interpolate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? "" : String(value);
+    });
+}
+export function AvailabilityOverview({ messages, products, constrainedSlots, constrainedSlotsCount: providedConstrainedSlotsCount, openSlotsCount: providedOpenSlotsCount, activeRulesCount: providedActiveRulesCount, activePickupPointsCount: providedActivePickupPointsCount, filteredRules, filteredPickupPoints, productsWithoutUpcomingDepartures, productsWithoutUpcomingDeparturesCount: providedProductsWithoutUpcomingDeparturesCount, search, setSearch, productFilter, setProductFilter, hasFilters, onClearFilters, onOpenSlot, onOpenProduct, onJumpToSlots, showFilters = true, }) {
+    useAvailabilityUiMessagesOrDefault();
+    const openSlotsCount = providedOpenSlotsCount ?? constrainedSlots.filter((slot) => slot.status === "open").length;
+    const constrainedSlotsCount = providedConstrainedSlotsCount ?? constrainedSlots.length;
+    const activeRulesCount = providedActiveRulesCount ?? filteredRules.filter((rule) => rule.active).length;
+    const activePickupPointsCount = providedActivePickupPointsCount ??
+        filteredPickupPoints.filter((pickupPoint) => pickupPoint.active).length;
+    const noDeparturesCount = providedProductsWithoutUpcomingDeparturesCount ?? productsWithoutUpcomingDepartures.length;
+    const hasNoDeparturesProducts = noDeparturesCount > 0;
+    const hasConstrainedSlots = constrainedSlotsCount > 0;
+    const hasAttention = hasNoDeparturesProducts || hasConstrainedSlots;
+    return (_jsxs(_Fragment, { children: [hasNoDeparturesProducts ? (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4 text-amber-900 sm:flex-row sm:items-center sm:justify-between dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-100", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0" }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "font-medium", children: messages.overview.actionRequiredTitle }), _jsx("p", { className: "text-sm text-amber-900/80 dark:text-amber-100/80", children: interpolate(messages.overview.actionRequiredBody, { count: noDeparturesCount }) })] })] }), onJumpToSlots ? (_jsx(Button, { size: "sm", className: "self-start sm:self-auto", onClick: onJumpToSlots, children: messages.overview.actionRequiredCta })) : null] })) : null, _jsxs("div", { className: "grid gap-3 grid-cols-2 xl:grid-cols-4", children: [_jsx(OverviewMetric, { title: messages.overview.openSlotsTitle, value: openSlotsCount, description: messages.overview.openSlotsDescription, icon: CalendarDays }), _jsx(OverviewMetric, { title: messages.overview.constrainedSlotsTitle, value: constrainedSlotsCount, description: messages.overview.constrainedSlotsDescription, icon: Clock3 }), _jsx(OverviewMetric, { title: messages.overview.activeRulesTitle, value: activeRulesCount, description: messages.overview.activeRulesDescription, icon: Package }), _jsx(OverviewMetric, { title: messages.overview.pickupPointsTitle, value: activePickupPointsCount, description: messages.overview.pickupPointsDescription, icon: Truck })] }), _jsxs(Card, { size: "sm", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between gap-3", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-sm", children: [messages.overview.attentionTitle, hasAttention ? (_jsx(Badge, { variant: "secondary", className: "tabular-nums", children: noDeparturesCount + constrainedSlotsCount })) : null] }), !hasAttention ? (_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), messages.overview.attentionEmpty.split(".")[0]] })) : null] }), _jsx(CardContent, { className: "grid gap-3 lg:grid-cols-2", children: hasAttention ? (_jsxs(_Fragment, { children: [_jsx(AttentionColumn, { title: messages.overview.coverageGapsTitle, count: noDeparturesCount, items: productsWithoutUpcomingDepartures.slice(0, 4).map((product) => ({
+                                        id: product.id,
+                                        primary: product.name,
+                                        secondary: messages.overview.coverageGapDescription,
+                                        severityLabel: messages.overview.severityCoverageGap,
+                                        severityTone: "destructive",
+                                        onClick: () => onOpenProduct(product.id),
+                                    })), emptyMessage: messages.overview.coverageGapsEmpty }), _jsx(AttentionColumn, { title: messages.overview.capacityWatchlistTitle, count: constrainedSlotsCount, items: constrainedSlots.slice(0, 4).map((slot) => ({
+                                        id: slot.id,
+                                        primary: `${productNameById(products, slot.productId, slot.productName)} · ${slot.dateLocal}`,
+                                        secondary: `${formatSlotLocalDateTime(slotLocalStart(slot))} · ${messages.remainingPaxLabel}: ${slot.remainingPax ?? messages.details.noValue}`,
+                                        severityLabel: slot.status === "sold_out"
+                                            ? messages.overview.severitySoldOut
+                                            : slot.status === "closed"
+                                                ? messages.overview.severityClosed
+                                                : getSlotStatusLabel(slot.status, messages),
+                                        severityTone: slot.status === "sold_out" ? "default" : "outline",
+                                        onClick: () => onOpenSlot(slot.id),
+                                    })), emptyMessage: messages.overview.capacityWatchlistEmpty })] })) : (_jsx("p", { className: "col-span-full py-6 text-center text-sm text-muted-foreground", children: messages.overview.attentionEmpty })) })] }), showFilters ? (_jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-3 md:flex-row md:items-center", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: messages.searchPlaceholder, value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: productFilter, onValueChange: (value) => setProductFilter(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-full md:w-56", children: _jsx(SelectValue, { placeholder: messages.allProducts }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: messages.allProducts }), products.map((product) => (_jsx(SelectItem, { value: product.id, children: product.name }, product.id)))] })] })] }), hasFilters ? (_jsx(Button, { variant: "outline", onClick: onClearFilters, children: messages.clearFilters })) : null] })) : null] }));
+}
+function formatSlotLocalDateTime(value) {
+    return `${value.date} ${value.time}`;
+}
+function AttentionColumn({ title, count, items, emptyMessage, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }), count > 0 ? (_jsx(Badge, { variant: "outline", className: "tabular-nums", children: count })) : null] }), items.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed px-3 py-4 text-center text-xs text-muted-foreground", children: emptyMessage })) : (_jsx("ul", { className: "flex flex-col gap-1.5", children: items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: item.onClick, className: cn("group flex w-full items-start justify-between gap-3 rounded-md border bg-card px-3 py-2 text-left transition-colors", "hover:border-foreground/30 hover:bg-muted/40", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: item.severityTone, className: "text-[10px] uppercase", children: item.severityLabel }), _jsx("span", { className: "truncate text-sm font-medium", children: item.primary })] }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: item.secondary })] }), _jsx(ArrowRight, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" })] }) }, item.id))) }))] }));
+}

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { type AvailabilitySlotRow } from "../index.js";
+import { type AvailabilitySlotSubmitPayload } from "./availability-dialogs.js";
+import { type AvailabilityBulkDeleteFn, type AvailabilityBulkUpdateFn } from "./availability-tabs.js";
+export type AvailabilityPageView = "list" | "calendar";
+export type AvailabilityPageSlotStatusFilter = "all" | AvailabilitySlotRow["status"];
+export type AvailabilityPageBulkUpdateHandler = AvailabilityBulkUpdateFn;
+export type AvailabilityPageBulkDeleteHandler = AvailabilityBulkDeleteFn;
+type DialogSubmitContext = {
+    isEditing: boolean;
+    id?: string;
+};
+export type AvailabilityPageSlotSubmitHandler = (payload: AvailabilitySlotSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export interface AvailabilityPageSlots {
+    headerEnd?: ReactNode;
+    beforeFilters?: ReactNode;
+    afterFilters?: ReactNode;
+    dialogs?: ReactNode;
+}
+export interface AvailabilityPageProps {
+    className?: string;
+    defaultView?: AvailabilityPageView;
+    bulkActionTarget?: string | null;
+    onBulkUpdate: AvailabilityPageBulkUpdateHandler;
+    onBulkDelete: AvailabilityPageBulkDeleteHandler;
+    onSlotOpen?: (slotId: string) => void;
+    onSlotSubmit?: AvailabilityPageSlotSubmitHandler;
+    slots?: AvailabilityPageSlots;
+}
+export declare function AvailabilityPage({ className, defaultView, bulkActionTarget, onBulkUpdate, onBulkDelete, onSlotOpen, onSlotSubmit, slots: pageSlots, }: AvailabilityPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=availability-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"availability-page.d.ts","sourceRoot":"","sources":["../../../src/availability/components/availability-page.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,EACL,KAAK,mBAAmB,EAUzB,MAAM,aAAa,CAAA;AACpB,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,2BAA2B,CAAA;AAElC,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAA;AAE/B,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,CAAA;AACtD,MAAM,MAAM,gCAAgC,GAAG,KAAK,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;AACpF,MAAM,MAAM,iCAAiC,GAAG,wBAAwB,CAAA;AACxE,MAAM,MAAM,iCAAiC,GAAG,wBAAwB,CAAA;AAExE,KAAK,mBAAmB,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE9D,MAAM,MAAM,iCAAiC,GAAG,CAC9C,OAAO,EAAE,6BAA6B,EACtC,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,IAAI,CAAC,CAAA;AAElB,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,YAAY,EAAE,iCAAiC,CAAA;IAC/C,YAAY,EAAE,iCAAiC,CAAA;IAC/C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,iCAAiC,CAAA;IAChD,KAAK,CAAC,EAAE,qBAAqB,CAAA;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAoB,EACpB,gBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,UAAmB,EACnB,YAAY,EACZ,KAAK,EAAE,SAAS,GACjB,EAAE,qBAAqB,2CAkRvB"}

package/dist/availability/components/availability-page.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, cn, Label } from "@voyant-travel/ui/components";
+import { AsyncCombobox } from "@voyant-travel/ui/components/async-combobox";
+import { CalendarProvider, CalendarView, } from "@voyant-travel/ui/components/big-calendar";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { ToggleGroup, ToggleGroupItem } from "@voyant-travel/ui/components/toggle-group";
+import { CalendarDays, List, Plus } from "lucide-react";
+import { useState } from "react";
+import { useAvailabilityUiMessagesOrDefault } from "../i18n/index.js";
+import { availabilityQueryKeys, useAvailabilitySlotMutation, useProducts, useRules, useSlots, useStartTimes, } from "../index.js";
+import { AvailabilitySlotDialog, } from "./availability-dialogs.js";
+import { AvailabilityBodySkeleton } from "./availability-skeletons.js";
+import { AvailabilitySlotsTab, } from "./availability-tabs.js";
+const noopId = (_id) => undefined;
+export function AvailabilityPage({ className, defaultView = "list", bulkActionTarget = null, onBulkUpdate, onBulkDelete, onSlotOpen = noopId, onSlotSubmit, slots: pageSlots, }) {
+    const messages = useAvailabilityUiMessagesOrDefault();
+    const toolbar = messages.toolbar;
+    const queryClient = useQueryClient();
+    const slotMutation = useAvailabilitySlotMutation();
+    const [productFilter, setProductFilter] = useState("all");
+    const [productSearch, setProductSearch] = useState("");
+    const [slotStatusFilter, setSlotStatusFilter] = useState("all");
+    const [slotDateRange, setSlotDateRange] = useState(null);
+    const [view, setView] = useState(defaultView);
+    const [calendarView, setCalendarView] = useState("month");
+    const [slotSelection, setSlotSelection] = useState({});
+    const [slotDialogOpen, setSlotDialogOpen] = useState(false);
+    const [editingSlot, setEditingSlot] = useState();
+    const productIdFilter = productFilter === "all" ? undefined : productFilter;
+    const slotStatusFilterParam = slotStatusFilter === "all" ? undefined : slotStatusFilter;
+    const productsQuery = useProducts({ search: productSearch || undefined, limit: 25, offset: 0 });
+    // Rules + start times back the slot create/edit dialog. Eager-load so the
+    // dialog opens with full options the first time, but keep the queries cheap
+    // (no filters). Slots query honors the page filters so server returns the
+    // matching first page rather than a stale 25-row prefix.
+    const rulesQuery = useRules({ limit: 25, offset: 0 });
+    const startTimesQuery = useStartTimes({ limit: 25, offset: 0 });
+    // Date range is filtered client-side via matchesDateRange. The server's
+    // startsAtFrom expects an ISO datetime, but the date picker yields a
+    // yyyy-MM-dd string — passing it through gets rejected by the validator.
+    const slotsQuery = useSlots({
+        limit: 25,
+        offset: 0,
+        productId: productIdFilter,
+        status: slotStatusFilterParam,
+    });
+    const products = productsQuery.data?.data ?? [];
+    const rules = rulesQuery.data?.data ?? [];
+    const startTimes = startTimesQuery.data?.data ?? [];
+    const slots = slotsQuery.data?.data ?? [];
+    const matchesProduct = (productId) => productFilter === "all" || productId === productFilter;
+    const matchesDateRange = (date, range) => (!range?.from || date >= range.from) && (!range?.to || date <= range.to); // i18n-literal-ok comparison expression
+    const productFilteredSlots = slots.filter((slot) => matchesProduct(slot.productId));
+    const filteredSlots = productFilteredSlots.filter((slot) => (slotStatusFilter === "all" || slot.status === slotStatusFilter) &&
+        matchesDateRange(slot.dateLocal, slotDateRange));
+    const selectedProduct = products.find((product) => product.id === productFilter) ?? null;
+    const slotStatusToColor = {
+        open: "green",
+        closed: "gray",
+        sold_out: "red",
+        cancelled: "yellow",
+    };
+    const calendarEvents = filteredSlots.map((slot) => {
+        const productName = products.find((product) => product.id === slot.productId)?.name;
+        return {
+            id: slot.id,
+            startDate: slot.startsAt,
+            endDate: slot.endsAt ?? slot.startsAt,
+            title: productName ?? slot.productName ?? messages.slotFallbackTitle,
+            description: slot.notes ?? "",
+            color: slotStatusToColor[slot.status],
+        };
+    });
+    const filtersHaveValues = productFilter !== "all" ||
+        slotStatusFilter !== "all" ||
+        Boolean(slotDateRange?.from) ||
+        Boolean(slotDateRange?.to);
+    const refreshAll = async () => {
+        await queryClient.invalidateQueries({ queryKey: availabilityQueryKeys.all });
+    };
+    const handleSlotSubmit = onSlotSubmit ??
+        (async (payload, context) => {
+            if (context.isEditing) {
+                if (!context.id)
+                    throw new Error("AvailabilityPage slot edit requires an id.");
+                await slotMutation.update.mutateAsync({
+                    id: context.id,
+                    input: payload,
+                });
+                return;
+            }
+            await slotMutation.create.mutateAsync(payload);
+        });
+    const closeSlotDialog = () => {
+        setSlotDialogOpen(false);
+        setEditingSlot(undefined);
+    };
+    const isLoading = productsQuery.isPending ||
+        rulesQuery.isPending ||
+        startTimesQuery.isPending ||
+        slotsQuery.isPending;
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between", 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 })] }), _jsxs("div", { className: "flex items-center gap-2", children: [pageSlots?.headerEnd, _jsxs(Button, { onClick: () => {
+                                    setEditingSlot(undefined);
+                                    setSlotDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4" }), messages.tabs.slots.actionLabel] })] })] }), pageSlots?.beforeFilters, _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "availability-product-filter", className: "text-xs", children: messages.productLabel }), _jsx(AsyncCombobox, { value: productFilter === "all" ? null : productFilter, onChange: (value) => setProductFilter(value ?? "all"), items: products, selectedItem: selectedProduct, getKey: (product) => product.id, getLabel: (product) => product.name, onSearchChange: setProductSearch, placeholder: messages.allProducts, emptyText: productsQuery.isFetching
+                                            ? messages.productsComboboxSearching
+                                            : messages.productsComboboxEmpty, triggerClassName: "w-full sm:w-64" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "availability-slot-status", className: "text-xs", children: messages.statusLabel }), _jsxs(Select, { value: slotStatusFilter, onValueChange: (value) => setSlotStatusFilter(value ?? "all"), children: [_jsx(SelectTrigger, { id: "availability-slot-status", className: "w-full sm:w-44", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: toolbar.statusAll }), _jsx(SelectItem, { value: "open", children: messages.statusOpen }), _jsx(SelectItem, { value: "closed", children: messages.statusClosed }), _jsx(SelectItem, { value: "sold_out", children: messages.statusSoldOut }), _jsx(SelectItem, { value: "cancelled", children: messages.statusCancelled })] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: toolbar.dateRangeLabel }), _jsx(DateRangePicker, { value: slotDateRange, onChange: setSlotDateRange, className: "w-full sm:w-72", placeholder: toolbar.dateRangePlaceholder })] }), filtersHaveValues ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setProductFilter("all");
+                                    setSlotStatusFilter("all");
+                                    setSlotDateRange(null);
+                                }, children: toolbar.reset })) : null] }), _jsxs(ToggleGroup, { value: [view], onValueChange: (values) => {
+                            const next = values[values.length - 1];
+                            if (next === "list" || next === "calendar")
+                                setView(next);
+                        }, variant: "outline", "aria-label": messages.title, children: [_jsxs(ToggleGroupItem, { value: "list", "aria-label": messages.tabSlots, children: [_jsx(List, { className: "mr-2 size-4" }), messages.tabSlots] }), _jsxs(ToggleGroupItem, { value: "calendar", "aria-label": messages.tabCalendar, children: [_jsx(CalendarDays, { className: "mr-2 size-4" }), messages.tabCalendar] })] })] }), pageSlots?.afterFilters, isLoading ? (_jsx(AvailabilityBodySkeleton, {})) : view === "list" ? (_jsx(AvailabilitySlotsTab, { messages: messages, products: products, filteredSlots: filteredSlots, slotSelection: slotSelection, setSlotSelection: setSlotSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: onBulkUpdate, handleBulkDelete: onBulkDelete, onCreate: () => {
+                    setEditingSlot(undefined);
+                    setSlotDialogOpen(true);
+                }, onOpenRoute: onSlotOpen, onEdit: (row) => {
+                    setEditingSlot(row);
+                    setSlotDialogOpen(true);
+                }, hideHeader: true, asPanel: false, hideBulkDelete: true, bulkStatusSelect: true })) : (_jsx(CalendarProvider, { events: calendarEvents, onEventClick: (event) => onSlotOpen(event.id), children: _jsx(CalendarView, { view: calendarView, onViewChange: setCalendarView, onDayClick: () => setCalendarView("day") }) })), _jsx(AvailabilitySlotDialog, { messages: messages, open: slotDialogOpen, onOpenChange: setSlotDialogOpen, slot: editingSlot, products: products, rules: rules, startTimes: startTimes, onSubmit: handleSlotSubmit, onSuccess: () => {
+                    closeSlotDialog();
+                    void refreshAll();
+                } }), pageSlots?.dialogs] }));
+}