@voyantjs/products-ui 0.30.7 → 0.31.1

package/README.md

@@ -9,9 +9,20 @@ pnpm add @voyantjs/products-ui @voyantjs/products-react @voyantjs/ui @tanstack/r
 ```
 
 `@voyantjs/ui` provides the design-system primitives. `@voyantjs/products-react` provides the data-layer hooks. Both are required peers.
+`ProductTypesPage` also uses `react-hook-form` and `zod` for sheet validation.
 
 All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
 
+## Components
+
+- `ProductsPage` publishes the product list composition.
+- `ProductDetailPage` publishes the complete product detail workspace with
+  overview, media, itinerary, option, and version tabs.
+- `ProductDetailHeader`, `ProductOverviewCard`, `ProductCommercialCard`,
+  `ProductDetailSidebar`, and `ProductItinerarySection` remain exported for
+  consumers that need to compose the detail page manually.
+- Product category, type, and tag pages publish reusable list-management compositions.
+
 ## I18n
 
 Components render English by default. To localize them, wrap your UI in

package/dist/components/product-categories-page.d.ts

@@ -0,0 +1,7 @@
+import { type ProductCategoryListProps } from "./product-category-list.js";
+export interface ProductCategoriesPageProps {
+    pageSize?: ProductCategoryListProps["pageSize"];
+    className?: string;
+}
+export declare function ProductCategoriesPage({ pageSize, className }?: ProductCategoriesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-categories-page.d.ts.map

package/dist/components/product-categories-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-categories-page.d.ts","sourceRoot":"","sources":["../../src/components/product-categories-page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAE/F,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAA;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAE,0BAA+B,2CAa7F"}

package/dist/components/product-categories-page.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+import { ProductCategoryList } from "./product-category-list.js";
+export function ProductCategoriesPage({ pageSize, className } = {}) {
+    const messages = useProductsUiMessagesOrDefault().productCategoriesPage;
+    return (_jsxs("div", { "data-slot": "product-categories-page", className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: messages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.description })] }), _jsx(ProductCategoryList, { pageSize: pageSize })] }));
+}

package/dist/components/product-day-form.js

@@ -4,7 +4,7 @@ import { useProductDayMutation } from "@voyantjs/products-react";
 import { Button } from "@voyantjs/ui/components/button";
 import { Input } from "@voyantjs/ui/components/input";
 import { Label } from "@voyantjs/ui/components/label";
-import { Textarea } from "@voyantjs/ui/components/textarea";
+import { RichTextEditor } from "@voyantjs/ui/components/rich-text-editor";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
 import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
@@ -71,7 +71,7 @@ export function ProductDayForm({ mode, onSuccess, onCancel }) {
                 : messages.productDayForm.validation.saveFailed);
         }
     };
-    return (_jsxs("form", { "data-slot": "product-day-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-number", children: messages.productDayForm.fields.dayNumber }), _jsx(Input, { id: "product-day-number", type: "number", min: "1", autoFocus: true, required: true, value: state.dayNumber, onChange: (event) => field("dayNumber")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-location", children: messages.productDayForm.fields.location }), _jsx(Input, { id: "product-day-location", value: state.location, onChange: (event) => field("location")(event.target.value), placeholder: messages.productDayForm.placeholders.location })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-title", children: messages.productDayForm.fields.title }), _jsx(Input, { id: "product-day-title", value: state.title, onChange: (event) => field("title")(event.target.value), placeholder: messages.productDayForm.placeholders.title })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-description", children: messages.productDayForm.fields.description }), _jsx(Textarea, { id: "product-day-description", value: state.description, onChange: (event) => field("description")(event.target.value), placeholder: messages.productDayForm.placeholders.description })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
+    return (_jsxs("form", { "data-slot": "product-day-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-number", children: messages.productDayForm.fields.dayNumber }), _jsx(Input, { id: "product-day-number", type: "number", min: "1", autoFocus: true, required: true, value: state.dayNumber, onChange: (event) => field("dayNumber")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-location", children: messages.productDayForm.fields.location }), _jsx(Input, { id: "product-day-location", value: state.location, onChange: (event) => field("location")(event.target.value), placeholder: messages.productDayForm.placeholders.location })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-title", children: messages.productDayForm.fields.title }), _jsx(Input, { id: "product-day-title", value: state.title, onChange: (event) => field("title")(event.target.value), placeholder: messages.productDayForm.placeholders.title })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-description", children: messages.productDayForm.fields.description }), _jsx(RichTextEditor, { value: state.description, onChange: field("description"), placeholder: messages.productDayForm.placeholders.description, editorClassName: "max-h-[320px] overflow-y-auto" })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
                                 ? messages.productDayForm.actions.addDay
                                 : messages.productDayForm.actions.saveDay] })] })] }));
 }

package/dist/components/product-detail-page.d.ts

@@ -0,0 +1,63 @@
+import { type ProductDayServiceRecord, type ProductRecord } from "@voyantjs/products-react";
+import * as React from "react";
+import { type ProductItineraryDayRowRenderContext } from "./product-itinerary-day-row.js";
+import { type ProductMediaSectionProps } from "./product-media-section.js";
+import { type ProductOptionsSectionProps } from "./product-options-section.js";
+export type ProductDetailPageTab = "overview" | "media" | "itinerary" | "options" | "versions";
+export interface ProductDetailPageSlots {
+    header?: React.ReactNode;
+    afterHeader?: React.ReactNode;
+    overviewStart?: React.ReactNode;
+    overviewEnd?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    mediaEnd?: React.ReactNode;
+    itineraryEnd?: React.ReactNode;
+    optionsEnd?: React.ReactNode;
+    versionsEnd?: React.ReactNode;
+}
+export interface ProductDetailPageProps {
+    id: string;
+    className?: string;
+    defaultTab?: ProductDetailPageTab;
+    onBack?: () => void;
+    onBookingCreate?: (product: ProductRecord) => void;
+    onDeleted?: () => void;
+    uploadMedia?: ProductMediaSectionProps["uploadMedia"];
+    renderOptionDetails?: ProductOptionsSectionProps["renderOptionDetails"];
+    renderItineraryDayDetails?: (context: ProductItineraryDayRowRenderContext) => React.ReactNode;
+    renderItineraryServiceActions?: (service: ProductDayServiceRecord) => React.ReactNode;
+    slots?: ProductDetailPageSlots;
+}
+export declare function ProductDetailPage({ id, className, defaultTab, onBack, onBookingCreate, onDeleted, uploadMedia, renderOptionDetails, renderItineraryDayDetails, renderItineraryServiceActions, slots, }: ProductDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export interface ProductDetailHeaderProps {
+    product: ProductRecord;
+    onBack?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onBookingCreate?: () => void;
+    deleting?: boolean;
+    actionsSlot?: React.ReactNode;
+    className?: string;
+}
+export declare function ProductDetailHeader({ product, onBack, onEdit, onDelete, onBookingCreate, deleting, actionsSlot, className, }: ProductDetailHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface ProductOverviewCardProps {
+    product: ProductRecord;
+    className?: string;
+}
+export declare function ProductOverviewCard({ product, className }: ProductOverviewCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCommercialCard({ product, className }: ProductOverviewCardProps): import("react/jsx-runtime").JSX.Element;
+export interface ProductDetailSidebarProps {
+    product: ProductRecord;
+    className?: string;
+}
+export declare function ProductDetailSidebar({ product, className }: ProductDetailSidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface ProductItinerarySectionProps {
+    productId: string;
+    title?: string;
+    description?: string;
+    renderDayDetails?: (context: ProductItineraryDayRowRenderContext) => React.ReactNode;
+    renderServiceActions?: (service: ProductDayServiceRecord) => React.ReactNode;
+    className?: string;
+}
+export declare function ProductItinerarySection({ productId, title, description, renderDayDetails, renderServiceActions, className, }: ProductItinerarySectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-page.d.ts.map

package/dist/components/product-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/product-detail-page.tsx"],"names":[],"mappings":"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"}

package/dist/components/product-detail-page.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProduct, useProductDayMutation, useProductItineraries, useProductItineraryDays, useProductItineraryMutation, useProductMutation, } from "@voyantjs/products-react";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyantjs/ui/components/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Edit, FileText, Loader2, Plus, ReceiptText, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useProductsUiI18nOrDefault, useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+import { ProductDayDialog } from "./product-day-dialog.js";
+import { ProductDialog } from "./product-dialog.js";
+import { ProductItineraryDayRow, } from "./product-itinerary-day-row.js";
+import { ProductItineraryDialog } from "./product-itinerary-dialog.js";
+import { ProductMediaSection } from "./product-media-section.js";
+import { ProductOptionsSection, } from "./product-options-section.js";
+import { ProductVersionsSection } from "./product-versions-section.js";
+export function ProductDetailPage({ id, className, defaultTab = "overview", onBack, onBookingCreate, onDeleted, uploadMedia, renderOptionDetails, renderItineraryDayDetails, renderItineraryServiceActions, slots, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productDetailPage;
+    const productQuery = useProduct(id);
+    const { remove } = useProductMutation();
+    const [editOpen, setEditOpen] = React.useState(false);
+    const [deleteError, setDeleteError] = React.useState(null);
+    if (productQuery.isPending) {
+        return _jsx(ProductDetailPageLoading, { className: className });
+    }
+    if (productQuery.isError) {
+        return (_jsx(ProductDetailPageState, { className: className, title: pageMessages.states.loadFailed, description: productQuery.error instanceof Error ? productQuery.error.message : undefined, onBack: onBack }));
+    }
+    const product = productQuery.data;
+    if (!product) {
+        return (_jsx(ProductDetailPageState, { className: className, title: pageMessages.states.notFoundTitle, description: pageMessages.states.notFoundDescription, onBack: onBack }));
+    }
+    const handleDelete = async () => {
+        setDeleteError(null);
+        if (!confirm(pageMessages.states.deleteConfirm.replace("{name}", product.name)))
+            return;
+        try {
+            await remove.mutateAsync(product.id);
+            onDeleted?.();
+        }
+        catch (error) {
+            setDeleteError(error instanceof Error ? error.message : pageMessages.states.deleteFailed);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "product-detail-page", className: cn("flex flex-col gap-6", className), children: [_jsx(ProductDetailHeader, { product: product, onBack: onBack, onEdit: () => setEditOpen(true), onDelete: () => void handleDelete(), onBookingCreate: onBookingCreate ? () => onBookingCreate(product) : undefined, deleting: remove.isPending, actionsSlot: slots?.header }), deleteError ? _jsx("p", { className: "text-sm text-destructive", children: deleteError }) : null, slots?.afterHeader, _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsxs(TabsList, { className: "w-full justify-start overflow-x-auto", children: [_jsx(TabsTrigger, { value: "overview", children: pageMessages.tabs.overview }), _jsx(TabsTrigger, { value: "media", children: pageMessages.tabs.media }), _jsx(TabsTrigger, { value: "itinerary", children: pageMessages.tabs.itinerary }), _jsx(TabsTrigger, { value: "options", children: pageMessages.tabs.options }), _jsx(TabsTrigger, { value: "versions", children: pageMessages.tabs.versions })] }), _jsx(TabsContent, { value: "overview", className: "mt-4", children: _jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [slots?.overviewStart, _jsx(ProductOverviewCard, { product: product }), _jsx(ProductCommercialCard, { product: product }), slots?.overviewEnd] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductDetailSidebar, { product: product }), slots?.sidebar] })] }) }), _jsxs(TabsContent, { value: "media", className: "mt-4 space-y-4", children: [_jsx(ProductMediaSection, { productId: product.id, uploadMedia: uploadMedia }), slots?.mediaEnd] }), _jsxs(TabsContent, { value: "itinerary", className: "mt-4 space-y-4", children: [_jsx(ProductItinerarySection, { productId: product.id, renderDayDetails: renderItineraryDayDetails, renderServiceActions: renderItineraryServiceActions }), slots?.itineraryEnd] }), _jsxs(TabsContent, { value: "options", className: "mt-4 space-y-4", children: [_jsx(ProductOptionsSection, { productId: product.id, renderOptionDetails: renderOptionDetails }), slots?.optionsEnd] }), _jsxs(TabsContent, { value: "versions", className: "mt-4 space-y-4", children: [_jsx(ProductVersionsSection, { productId: product.id }), slots?.versionsEnd] })] }), _jsx(ProductDialog, { open: editOpen, onOpenChange: setEditOpen, product: product, onSuccess: () => setEditOpen(false) })] }));
+}
+export function ProductDetailHeader({ product, onBack, onEdit, onDelete, onBookingCreate, deleting = false, actionsSlot, className, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    return (_jsxs("div", { "data-slot": "product-detail-header", className: cn("flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", className), children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [onBack ? (_jsxs(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onBack, children: [_jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: messages.productDetailPage.actions.back })] })) : null, _jsx(Badge, { variant: product.status === "active"
+                                    ? "default"
+                                    : product.status === "archived"
+                                        ? "secondary"
+                                        : "outline", children: messages.common.productStatusLabels[product.status] }), _jsx(Badge, { variant: "outline", children: messages.common.productBookingModeLabels[product.bookingMode] })] }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: product.name }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: product.id })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [actionsSlot, onBookingCreate ? (_jsxs(Button, { type: "button", variant: "outline", onClick: onBookingCreate, children: [_jsx(ReceiptText, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productDetailPage.actions.createBooking] })) : null, onEdit ? (_jsxs(Button, { type: "button", variant: "outline", onClick: onEdit, children: [_jsx(Edit, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productDetailPage.actions.edit] })) : null, onDelete ? (_jsxs(Button, { type: "button", variant: "destructive", disabled: deleting, onClick: onDelete, children: [deleting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : (_jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" })), messages.productDetailPage.actions.delete] })) : null] })] }));
+}
+export function ProductOverviewCard({ product, className }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productDetailPage;
+    return (_jsxs(Card, { "data-slot": "product-overview-card", className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: pageMessages.sections.overview.title }), _jsx(CardDescription, { children: pageMessages.sections.overview.description })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "whitespace-pre-wrap text-sm leading-6 text-muted-foreground", children: product.description || pageMessages.states.noDescription }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(ProductField, { label: pageMessages.fields.visibility, value: product.visibility }), _jsx(ProductField, { label: pageMessages.fields.capacityMode, value: product.capacityMode }), _jsx(ProductField, { label: pageMessages.fields.timezone, value: product.timezone }), _jsx(ProductField, { label: pageMessages.fields.productType, value: product.productTypeId }), _jsx(ProductField, { label: pageMessages.fields.facility, value: product.facilityId }), _jsx(ProductField, { label: pageMessages.fields.taxClass, value: product.taxClassId }), _jsx(ProductField, { label: pageMessages.fields.startDate, value: product.startDate }), _jsx(ProductField, { label: pageMessages.fields.endDate, value: product.endDate })] })] })] }));
+}
+export function ProductCommercialCard({ product, className }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productDetailPage;
+    const { formatCurrency, formatNumber } = useProductsUiI18nOrDefault();
+    return (_jsxs(Card, { "data-slot": "product-commercial-card", className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: pageMessages.sections.commercial.title }), _jsx(CardDescription, { children: pageMessages.sections.commercial.description })] }), _jsxs(CardContent, { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(ProductField, { label: pageMessages.fields.sellAmount, value: formatMoney(product.sellAmountCents, product.sellCurrency, formatCurrency) }), _jsx(ProductField, { label: pageMessages.fields.costAmount, value: formatMoney(product.costAmountCents, product.sellCurrency, formatCurrency) }), _jsx(ProductField, { label: pageMessages.fields.margin, value: product.marginPercent == null ? null : `${formatNumber(product.marginPercent)}%` }), _jsx(ProductField, { label: pageMessages.fields.pax, value: product.pax == null ? null : formatNumber(product.pax) }), _jsx(ProductField, { label: pageMessages.fields.reservationTimeout, value: product.reservationTimeoutMinutes == null
+                            ? null
+                            : pageMessages.states.minutes.replace("{count}", formatNumber(product.reservationTimeoutMinutes)) })] })] }));
+}
+export function ProductDetailSidebar({ product, className }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productDetailPage;
+    const { formatDateTime } = useProductsUiI18nOrDefault();
+    return (_jsxs(Card, { "data-slot": "product-detail-sidebar", className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: pageMessages.sections.sidebar.title }), _jsx(CardDescription, { children: pageMessages.sections.sidebar.description })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { children: messages.common.productStatusLabels[product.status] }), _jsx(Badge, { variant: "outline", children: messages.common.productBookingModeLabels[product.bookingMode] }), product.activated ? _jsx(Badge, { variant: "secondary", children: messages.common.active }) : null] }), _jsx(ProductField, { label: pageMessages.fields.tags, value: product.tags.join(", ") }), _jsx(ProductField, { label: pageMessages.fields.createdAt, value: formatDateTime(product.createdAt) }), _jsx(ProductField, { label: pageMessages.fields.updatedAt, value: formatDateTime(product.updatedAt) })] })] }));
+}
+export function ProductItinerarySection({ productId, title, description, renderDayDetails, renderServiceActions, className, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productDetailPage;
+    const itinerariesQuery = useProductItineraries(productId);
+    const itineraries = React.useMemo(() => (itinerariesQuery.data?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder), [itinerariesQuery.data?.data]);
+    const [selectedItineraryId, setSelectedItineraryId] = React.useState(null);
+    const selectedItinerary = itineraries.find((itinerary) => itinerary.id === selectedItineraryId) ?? null;
+    const daysQuery = useProductItineraryDays(productId, selectedItineraryId, {
+        enabled: Boolean(selectedItineraryId),
+    });
+    const days = React.useMemo(() => (daysQuery.data?.data ?? []).slice().sort((a, b) => a.dayNumber - b.dayNumber), [daysQuery.data?.data]);
+    const itineraryMutation = useProductItineraryMutation();
+    const dayMutation = useProductDayMutation();
+    const [itineraryDialogOpen, setItineraryDialogOpen] = React.useState(false);
+    const [editingItinerary, setEditingItinerary] = React.useState(null);
+    const [dayDialogOpen, setDayDialogOpen] = React.useState(false);
+    const [editingDay, setEditingDay] = React.useState(null);
+    const [expandedDayId, setExpandedDayId] = React.useState(null);
+    React.useEffect(() => {
+        if (itineraries.length === 0) {
+            setSelectedItineraryId(null);
+            return;
+        }
+        setSelectedItineraryId((current) => {
+            if (current && itineraries.some((itinerary) => itinerary.id === current))
+                return current;
+            return itineraries.find((itinerary) => itinerary.isDefault)?.id ?? itineraries[0]?.id ?? null;
+        });
+    }, [itineraries]);
+    const nextDayNumber = days.length > 0 ? Math.max(...days.map((day) => day.dayNumber)) + 1 : 1;
+    return (_jsxs(Card, { "data-slot": "product-itinerary-section", className: className, children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { children: title ?? pageMessages.sections.itinerary.title }), _jsx(CardDescription, { children: description ?? pageMessages.sections.itinerary.description })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [itineraries.length > 0 ? (_jsxs(Select, { value: selectedItineraryId ?? undefined, onValueChange: (value) => setSelectedItineraryId(value), children: [_jsx(SelectTrigger, { className: "w-[220px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itineraries.map((itinerary) => (_jsx(SelectItem, { value: itinerary.id, children: itinerary.name }, itinerary.id))) })] })) : null, _jsxs(Button, { type: "button", variant: "outline", onClick: () => {
+                                    setEditingItinerary(null);
+                                    setItineraryDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), pageMessages.actions.addItinerary] }), selectedItinerary ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", onClick: () => {
+                                            setEditingItinerary(selectedItinerary);
+                                            setItineraryDialogOpen(true);
+                                        }, children: [_jsx(Edit, { className: "mr-2 size-4", "aria-hidden": "true" }), pageMessages.actions.editItinerary] }), _jsxs(Button, { type: "button", variant: "outline", onClick: () => {
+                                            if (!confirm(pageMessages.states.deleteItineraryConfirm.replace("{name}", selectedItinerary.name))) {
+                                                return;
+                                            }
+                                            void itineraryMutation.remove.mutateAsync({
+                                                productId,
+                                                itineraryId: selectedItinerary.id,
+                                            });
+                                        }, children: [_jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }), pageMessages.actions.deleteItinerary] })] })) : null] })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: itinerariesQuery.isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground", "aria-hidden": "true" }) })) : itinerariesQuery.isError ? (_jsx("p", { className: "text-sm text-destructive", children: pageMessages.states.loadFailed })) : itineraries.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: pageMessages.states.noItineraries })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", onClick: () => {
+                                    setEditingDay(null);
+                                    setDayDialogOpen(true);
+                                }, disabled: !selectedItineraryId, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), pageMessages.actions.addDay] }) }), daysQuery.isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground", "aria-hidden": "true" }) })) : daysQuery.isError ? (_jsx("p", { className: "text-sm text-destructive", children: pageMessages.states.loadFailed })) : days.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: pageMessages.states.noDays })) : (days.map((day) => (_jsx(ProductItineraryDayRow, { productId: productId, day: day, expanded: expandedDayId === day.id, onToggle: () => setExpandedDayId((current) => (current === day.id ? null : day.id)), onEdit: () => {
+                                setEditingDay(day);
+                                setDayDialogOpen(true);
+                            }, onDelete: () => {
+                                if (!confirm(pageMessages.states.deleteDayConfirm.replace("{dayNumber}", String(day.dayNumber)))) {
+                                    return;
+                                }
+                                void dayMutation.remove.mutateAsync({
+                                    productId,
+                                    dayId: day.id,
+                                    itineraryId: day.itineraryId,
+                                });
+                            }, renderDayDetails: renderDayDetails, renderServiceActions: renderServiceActions }, day.id))))] })) }), _jsx(ProductItineraryDialog, { open: itineraryDialogOpen, onOpenChange: setItineraryDialogOpen, productId: productId, itinerary: editingItinerary ?? undefined, itineraryCount: itineraries.length, onSuccess: (itineraryId) => setSelectedItineraryId(itineraryId) }), selectedItineraryId ? (_jsx(ProductDayDialog, { open: dayDialogOpen, onOpenChange: setDayDialogOpen, productId: productId, itineraryId: selectedItineraryId, day: editingDay ?? undefined, nextDayNumber: nextDayNumber, onSuccess: (day) => {
+                    setExpandedDayId(day.id);
+                    setEditingDay(null);
+                } })) : null] }));
+}
+function ProductDetailPageLoading({ className }) {
+    const messages = useProductsUiMessagesOrDefault();
+    return (_jsx("div", { "data-slot": "product-detail-page-loading", className: cn("flex min-h-48 items-center justify-center", className), children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), messages.productDetailPage.states.loading] }) }));
+}
+function ProductDetailPageState({ className, title, description, onBack, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    return (_jsxs("div", { "data-slot": "product-detail-page-state", className: cn("flex flex-col gap-4", className), children: [onBack ? (_jsxs(Button, { type: "button", variant: "ghost", className: "w-fit", onClick: onBack, children: [_jsx(ArrowLeft, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productDetailPage.actions.back] })) : null, _jsx(Card, { children: _jsxs(CardContent, { className: "flex min-h-40 flex-col items-center justify-center gap-2 text-center", children: [_jsx(FileText, { className: "size-5 text-muted-foreground", "aria-hidden": "true" }), _jsx("h2", { className: "text-lg font-semibold", children: title }), description ? _jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null] }) })] }));
+}
+function ProductField({ label, value }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const hasValue = value !== null &&
+        value !== undefined &&
+        !(typeof value === "string" && value.trim().length === 0);
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: label }), _jsx("div", { className: "break-words text-sm", children: hasValue ? value : messages.common.none })] }));
+}
+function formatMoney(amountCents, currency, formatCurrency) {
+    return amountCents == null ? null : formatCurrency(amountCents / 100, currency);
+}

package/dist/components/product-dialog.d.ts

@@ -0,0 +1,9 @@
+import type { ProductRecord } from "@voyantjs/products-react";
+export interface ProductDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    product?: ProductRecord;
+    onSuccess?: (product: ProductRecord) => void;
+}
+export declare function ProductDialog({ open, onOpenChange, product, onSuccess }: ProductDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-dialog.d.ts.map

package/dist/components/product-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAa7D,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CAC7C;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CA0B3F"}

package/dist/components/product-dialog.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+import { ProductForm } from "./product-form.js";
+export function ProductDialog({ open, onOpenChange, product, onSuccess }) {
+    const productMessages = useProductsUiMessagesOrDefault().productDialog;
+    const isEdit = Boolean(product);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-dialog", className: "sm:max-w-[720px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit ? productMessages.titles.edit : productMessages.titles.create }), _jsx(DialogDescription, { children: isEdit ? productMessages.descriptions.edit : productMessages.descriptions.create })] }), _jsx(ProductForm, { mode: product ? { kind: "edit", product } : { kind: "create" }, onSuccess: (saved) => {
+                        onSuccess?.(saved);
+                        onOpenChange(false);
+                    }, onCancel: () => onOpenChange(false) })] }) }));
+}

package/dist/components/product-form.d.ts

@@ -0,0 +1,14 @@
+import { type ProductRecord } from "@voyantjs/products-react";
+export type ProductFormMode = {
+    kind: "create";
+} | {
+    kind: "edit";
+    product: ProductRecord;
+};
+export interface ProductFormProps {
+    mode: ProductFormMode;
+    onSuccess?: (product: ProductRecord) => void;
+    onCancel?: () => void;
+}
+export declare function ProductForm({ mode, onSuccess, onCancel }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-form.d.ts.map

package/dist/components/product-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-form.d.ts","sourceRoot":"","sources":["../../src/components/product-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,0BAA0B,CAAA;AAmBjC,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,aAAa,CAAA;CAAE,CAAA;AAE3F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAA;IACrB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAiED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA+O1E"}

package/dist/components/product-form.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProductMutation, } from "@voyantjs/products-react";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { Textarea } from "@voyantjs/ui/components/textarea";
+import { Loader2, X } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+import { ProductTypeCombobox } from "./product-type-combobox.js";
+function initialState(mode) {
+    if (mode.kind === "edit") {
+        const product = mode.product;
+        return {
+            name: product.name,
+            description: product.description ?? "",
+            status: product.status,
+            bookingMode: product.bookingMode,
+            productTypeId: product.productTypeId ?? "__none__",
+            sellCurrency: product.sellCurrency,
+            sellAmount: product.sellAmountCents != null ? String(product.sellAmountCents / 100) : "",
+            costAmount: product.costAmountCents != null ? String(product.costAmountCents / 100) : "",
+            tags: product.tags ?? [],
+        };
+    }
+    return {
+        name: "",
+        description: "",
+        status: "draft",
+        bookingMode: "itinerary",
+        productTypeId: "__none__",
+        sellCurrency: "EUR",
+        sellAmount: "",
+        costAmount: "",
+        tags: [],
+    };
+}
+function toAmountCents(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    return Math.round(parsed * 100);
+}
+function toPayload(state) {
+    return {
+        name: state.name.trim(),
+        description: state.description.trim() || null,
+        status: state.status,
+        bookingMode: state.bookingMode,
+        productTypeId: state.productTypeId === "__none__" ? null : state.productTypeId,
+        sellCurrency: state.sellCurrency.trim().toUpperCase(),
+        sellAmountCents: toAmountCents(state.sellAmount),
+        costAmountCents: toAmountCents(state.costAmount),
+        tags: state.tags,
+    };
+}
+export function ProductForm({ mode, onSuccess, onCancel }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const productMessages = messages.productForm;
+    const [state, setState] = React.useState(() => initialState(mode));
+    const [tagInput, setTagInput] = React.useState("");
+    const [error, setError] = React.useState(null);
+    const { create, update } = useProductMutation();
+    const isSubmitting = create.isPending || update.isPending;
+    const productStatuses = React.useMemo(() => [
+        { value: "draft", label: messages.common.productStatusLabels.draft },
+        { value: "active", label: messages.common.productStatusLabels.active },
+        { value: "archived", label: messages.common.productStatusLabels.archived },
+    ], [messages]);
+    const bookingModes = React.useMemo(() => [
+        { value: "date", label: messages.common.productBookingModeLabels.date },
+        { value: "date_time", label: messages.common.productBookingModeLabels.date_time },
+        { value: "open", label: messages.common.productBookingModeLabels.open },
+        { value: "stay", label: messages.common.productBookingModeLabels.stay },
+        { value: "transfer", label: messages.common.productBookingModeLabels.transfer },
+        { value: "itinerary", label: messages.common.productBookingModeLabels.itinerary },
+        { value: "other", label: messages.common.productBookingModeLabels.other },
+    ], [messages]);
+    const field = (key) => (value) => {
+        setState((prev) => ({ ...prev, [key]: value }));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setError(null);
+        if (!state.name.trim()) {
+            setError(productMessages.validation.nameRequired);
+            return;
+        }
+        if (state.sellCurrency.trim().length !== 3) {
+            setError(productMessages.validation.sellCurrencyInvalid);
+            return;
+        }
+        const payload = toPayload(state);
+        try {
+            const product = mode.kind === "create"
+                ? await create.mutateAsync(payload)
+                : await update.mutateAsync({ id: mode.product.id, input: payload });
+            onSuccess?.(product);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : productMessages.validation.saveFailed);
+        }
+    };
+    return (_jsxs("form", { "data-slot": "product-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-name", children: productMessages.fields.name }), _jsx(Input, { id: "product-name", required: true, autoFocus: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: productMessages.placeholders.name })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-description", children: productMessages.fields.description }), _jsx(Textarea, { id: "product-description", value: state.description, onChange: (event) => field("description")(event.target.value), placeholder: productMessages.placeholders.description })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.fields.tags }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: state.tags.map((tag) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 text-xs", children: [tag, _jsx("button", { type: "button", className: "ml-0.5 rounded-full hover:text-destructive", onClick: () => field("tags")(state.tags.filter((value) => value !== tag)), children: _jsx(X, { className: "size-3", "aria-hidden": "true" }) })] }, tag))) }), _jsx(Input, { value: tagInput, onChange: (event) => setTagInput(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === ",") {
+                                        event.preventDefault();
+                                        const value = tagInput.trim().replace(/,+$/, "");
+                                        if (value && !state.tags.includes(value)) {
+                                            field("tags")([...state.tags, value]);
+                                        }
+                                        setTagInput("");
+                                    }
+                                }, placeholder: productMessages.placeholders.tagInput })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.fields.status }), _jsxs(Select, { value: state.status, onValueChange: (value) => value && field("status")(value), items: productStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: productStatuses.map((status) => (_jsx(SelectItem, { value: status.value, children: status.label }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.fields.bookingMode }), _jsxs(Select, { items: bookingModes, value: state.bookingMode, onValueChange: (value) => value && field("bookingMode")(value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: bookingModes.map((modeOption) => (_jsx(SelectItem, { value: modeOption.value, children: modeOption.label }, modeOption.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.fields.productType }), _jsx(ProductTypeCombobox, { value: state.productTypeId === "__none__" ? null : state.productTypeId, onChange: (value) => field("productTypeId")(value ?? "__none__"), placeholder: productMessages.placeholders.productTypeSearch })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.fields.sellCurrency }), _jsx(CurrencyCombobox, { value: state.sellCurrency, onChange: (value) => field("sellCurrency")(value ?? ""), placeholder: productMessages.placeholders.currencySearch })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-sell-amount", children: productMessages.fields.sellAmount }), _jsx(Input, { id: "product-sell-amount", type: "number", min: "0", step: "0.01", value: state.sellAmount, onChange: (event) => field("sellAmount")(event.target.value), placeholder: productMessages.placeholders.amount })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-cost-amount", children: productMessages.fields.costAmount }), _jsx(Input, { id: "product-cost-amount", type: "number", min: "0", step: "0.01", value: state.costAmount, onChange: (event) => field("costAmount")(event.target.value), placeholder: productMessages.placeholders.amount })] })] })] }), error ? (_jsx("p", { "data-slot": "product-form-error", className: "text-sm text-destructive", children: error })) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: productMessages.actions.cancel })) : null, _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" }), productMessages.actions.saving] })) : mode.kind === "create" ? (productMessages.actions.create) : (productMessages.actions.saveChanges) })] })] }));
+}

package/dist/components/product-list.d.ts

@@ -0,0 +1,7 @@
+import { type ProductRecord } from "@voyantjs/products-react";
+export interface ProductListProps {
+    pageSize?: number;
+    onSelectProduct?: (product: ProductRecord) => void;
+}
+export declare function ProductList({ pageSize, onSelectProduct }?: ProductListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-list.d.ts","sourceRoot":"","sources":["../../src/components/product-list.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAA;AA4BjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CACnD;AA8BD,wBAAgB,WAAW,CAAC,EAAE,QAAa,EAAE,eAAe,EAAE,GAAE,gBAAqB,2CA2YpF"}