@voyant-travel/inventory-react 0.1.0

package/dist/components/product-detail/product-detail-itinerary-section.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@voyant-travel/ui/components";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@voyant-travel/ui/components/alert-dialog";
+import { Copy, MoreHorizontal, Pencil, Plus, Star, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { productsQueryKeys, useProductDayMutation, useProductItineraries, useProductItineraryDays, useProductItineraryMutation, } from "../../index.js";
+import { ProductItineraryDialog } from "../product-itinerary-dialog.js";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { ProductDaySheet } from "./product-day-sheet.js";
+import { ProductDetailDayRow } from "./product-detail-day-row.js";
+import { ActionMenu, EmptyState, Section } from "./product-detail-sections.js";
+import { ServiceDialog } from "./product-service-dialog.js";
+/**
+ * Storage-only upload handler for the day media tray. The tray does its
+ * own DB insert via `useProductMediaMutation.create` after this returns,
+ * so this handler must NOT call the products API — only the R2 upload
+ * endpoint — otherwise we'd write two media rows per file.
+ */
+const uploadDayMediaToStorage = async (file) => {
+    const formData = new FormData();
+    formData.append("file", file);
+    const res = await fetch("/api/v1/uploads", {
+        method: "POST",
+        body: formData,
+        credentials: "include",
+    });
+    if (!res.ok)
+        throw new Error(`Upload failed (${res.status})`);
+    const upload = (await res.json());
+    const mediaType = upload.mimeType.startsWith("video/")
+        ? "video"
+        : upload.mimeType.startsWith("image/")
+            ? "image"
+            : "document";
+    return {
+        url: upload.url,
+        name: file.name,
+        storageKey: upload.key,
+        mimeType: upload.mimeType,
+        fileSize: upload.size,
+        mediaType,
+    };
+};
+export function ProductDetailItinerarySection({ productId }) {
+    const messages = useProductDetailMessages();
+    const api = useProductDetailApi();
+    const productMessages = messages.products.core;
+    const queryClient = useQueryClient();
+    const itineraryQuery = useProductItineraries(productId);
+    const itineraryMutation = useProductItineraryMutation();
+    const dayMutation = useProductDayMutation();
+    const productActionLedgerQueryKey = [...productsQueryKeys.product(productId), "action-ledger"];
+    const invalidateProductActionLedger = () => queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+    const [expandedDayId, setExpandedDayId] = useState(null);
+    const [selectedItineraryId, setSelectedItineraryId] = useState(null);
+    const [dayDialogOpen, setDayDialogOpen] = useState(false);
+    const [editingDay, setEditingDay] = useState();
+    const [serviceDialogOpen, setServiceDialogOpen] = useState(false);
+    const [serviceDialogDayId, setServiceDialogDayId] = useState("");
+    const [editingService, setEditingService] = useState();
+    const [itineraryDialogOpen, setItineraryDialogOpen] = useState(false);
+    const [editingItinerary, setEditingItinerary] = useState();
+    const [deleteItineraryTarget, setDeleteItineraryTarget] = useState(null);
+    const itineraries = useMemo(() => itineraryQuery.data?.data ?? [], [itineraryQuery.data?.data]);
+    const hasMultiple = itineraries.length > 1;
+    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 selectedItinerary = useMemo(() => itineraries.find((itinerary) => itinerary.id === selectedItineraryId), [itineraries, selectedItineraryId]);
+    const daysQuery = useProductItineraryDays(productId, selectedItineraryId, {
+        enabled: Boolean(selectedItineraryId),
+    });
+    const days = useMemo(() => (daysQuery.data?.data ?? []).slice().sort((left, right) => left.dayNumber - right.dayNumber), [daysQuery.data?.data]);
+    const nextDayNumber = days.length > 0 ? Math.max(...days.map((day) => day.dayNumber)) + 1 : 1;
+    const openCreateItinerary = () => {
+        setEditingItinerary(undefined);
+        setItineraryDialogOpen(true);
+    };
+    const openRenameItinerary = (itinerary) => {
+        setEditingItinerary(itinerary);
+        setItineraryDialogOpen(true);
+    };
+    const handleSetDefault = async (itinerary) => {
+        if (itinerary.isDefault)
+            return;
+        await itineraryMutation.update.mutateAsync({
+            productId,
+            itineraryId: itinerary.id,
+            input: { isDefault: true },
+        });
+        void invalidateProductActionLedger();
+    };
+    const handleDuplicate = async (itinerary) => {
+        const result = await itineraryMutation.duplicate.mutateAsync({
+            productId,
+            itineraryId: itinerary.id,
+        });
+        setExpandedDayId(null);
+        setSelectedItineraryId(result.itinerary.id);
+        void invalidateProductActionLedger();
+    };
+    const handleConfirmDelete = async () => {
+        if (!deleteItineraryTarget)
+            return;
+        await itineraryMutation.remove.mutateAsync({
+            productId,
+            itineraryId: deleteItineraryTarget.id,
+        });
+        setDeleteItineraryTarget(null);
+        void invalidateProductActionLedger();
+    };
+    const sectionTitle = hasMultiple
+        ? productMessages.itinerariesTitle
+        : productMessages.itineraryTitle;
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { title: sectionTitle, actions: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", disabled: !selectedItinerary, onClick: () => {
+                                setEditingDay(undefined);
+                                setDayDialogOpen(true);
+                            }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), productMessages.addDay] }), _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: openCreateItinerary, children: [_jsx(Plus, { className: "h-4 w-4" }), productMessages.newItinerary] }), selectedItinerary && !hasMultiple ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => openRenameItinerary(selectedItinerary), children: [_jsx(Pencil, { className: "h-4 w-4" }), productMessages.renameItinerary] }), _jsxs(DropdownMenuItem, { onClick: () => void handleDuplicate(selectedItinerary), children: [_jsx(Copy, { className: "h-4 w-4" }), productMessages.duplicateItinerary] })] })) : null] })] }), children: itineraryQuery.isPending ? (_jsx(EmptyState, { message: "\u2026" })) : itineraryQuery.isError ? (_jsx("p", { className: "py-6 text-center text-sm text-destructive", children: "Failed to load itineraries." })) : itineraries.length === 0 ? (_jsxs("div", { className: "flex flex-col items-start gap-3 rounded-md border border-dashed p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: productMessages.noItinerariesYet }), _jsxs(Button, { variant: "outline", size: "sm", onClick: openCreateItinerary, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), productMessages.newItinerary] })] })) : (_jsxs("div", { className: "flex flex-col gap-4", children: [hasMultiple ? (_jsx("div", { className: "flex flex-wrap items-center gap-1 rounded-md border bg-muted/30 p-1", children: itineraries.map((itinerary) => {
+                                const isSelected = itinerary.id === selectedItineraryId;
+                                return (_jsxs("div", { className: `flex items-center gap-1 rounded-sm pl-2 pr-1 transition-colors ${isSelected ? "bg-background shadow-sm" : "hover:bg-background/60"}`, children: [_jsxs("button", { type: "button", onClick: () => {
+                                                setExpandedDayId(null);
+                                                setSelectedItineraryId(itinerary.id);
+                                            }, className: "flex items-center gap-2 py-1.5 text-sm", children: [_jsx("span", { className: isSelected ? "font-medium" : "text-muted-foreground", children: itinerary.name }), itinerary.isDefault ? (_jsx(Badge, { variant: "secondary", className: "h-5 px-1.5 text-[10px]", children: productMessages.defaultBadge })) : null] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": formatMessage(productMessages.itineraryRowOptionsLabel, {
+                                                            name: itinerary.name,
+                                                        }), className: "h-6 w-6 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "h-3.5 w-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => openRenameItinerary(itinerary), children: [_jsx(Pencil, { className: "h-4 w-4" }), productMessages.renameItinerary] }), _jsxs(DropdownMenuItem, { onClick: () => void handleDuplicate(itinerary), children: [_jsx(Copy, { className: "h-4 w-4" }), productMessages.duplicateItinerary] }), _jsxs(DropdownMenuItem, { disabled: itinerary.isDefault, onClick: () => handleSetDefault(itinerary), children: [_jsx(Star, { className: "h-4 w-4" }), productMessages.setDefaultItinerary] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: itinerary.isDefault && itineraries.length > 1, onClick: () => setDeleteItineraryTarget(itinerary), children: [_jsx(Trash2, { className: "h-4 w-4" }), productMessages.deleteItinerary] })] })] })] }, itinerary.id));
+                            }) })) : null, daysQuery.isPending ? (_jsx(EmptyState, { message: "\u2026" })) : daysQuery.isError ? (_jsx("p", { className: "py-6 text-center text-sm text-destructive", children: messages.products.operations.itineraries.daysLoadFailed })) : days.length === 0 ? (_jsx(EmptyState, { message: productMessages.itineraryEmpty })) : (_jsx("div", { className: "flex flex-col gap-2", children: days.map((day) => (_jsx(ProductDetailDayRow, { day: day, productId: productId, expanded: expandedDayId === day.id, onToggle: () => setExpandedDayId((current) => (current === day.id ? null : day.id)), onEdit: () => {
+                                    setEditingDay(day);
+                                    setDayDialogOpen(true);
+                                }, onDelete: () => {
+                                    if (window.confirm(productMessages.deleteDayConfirm)) {
+                                        dayMutation.remove.mutate({
+                                            productId,
+                                            itineraryId: selectedItineraryId ?? undefined,
+                                            dayId: day.id,
+                                        }, {
+                                            onSuccess: () => void invalidateProductActionLedger(),
+                                        });
+                                    }
+                                }, onAddService: () => {
+                                    setServiceDialogDayId(day.id);
+                                    setEditingService(undefined);
+                                    setServiceDialogOpen(true);
+                                }, onEditService: (service) => {
+                                    setServiceDialogDayId(day.id);
+                                    setEditingService(service);
+                                    setServiceDialogOpen(true);
+                                }, onDeleteService: (serviceId) => {
+                                    if (window.confirm(productMessages.deleteServiceConfirm)) {
+                                        void api
+                                            .delete(`/v1/products/${productId}/days/${day.id}/services/${serviceId}`)
+                                            .then(async () => {
+                                            await queryClient.invalidateQueries({
+                                                queryKey: ["product-day-services", productId, day.id],
+                                            });
+                                            await invalidateProductActionLedger();
+                                        });
+                                    }
+                                } }, day.id))) }))] })) }), _jsx(ProductDaySheet, { open: dayDialogOpen, onOpenChange: setDayDialogOpen, productId: productId, itineraryId: selectedItineraryId ?? "", day: editingDay, nextDayNumber: nextDayNumber, uploadMedia: uploadDayMediaToStorage, onSuccess: () => {
+                    setDayDialogOpen(false);
+                    setEditingDay(undefined);
+                    if (selectedItineraryId) {
+                        void queryClient.invalidateQueries({
+                            queryKey: ["products", productId, "itineraries", selectedItineraryId, "days"],
+                        });
+                    }
+                    void invalidateProductActionLedger();
+                } }), _jsx(ServiceDialog, { open: serviceDialogOpen, onOpenChange: setServiceDialogOpen, productId: productId, dayId: serviceDialogDayId, service: editingService, onSuccess: () => {
+                    setServiceDialogOpen(false);
+                    setEditingService(undefined);
+                    void queryClient.invalidateQueries({
+                        queryKey: ["product-day-services", productId, serviceDialogDayId],
+                    });
+                    void invalidateProductActionLedger();
+                } }), _jsx(ProductItineraryDialog, { open: itineraryDialogOpen, onOpenChange: (open) => {
+                    setItineraryDialogOpen(open);
+                    if (!open)
+                        setEditingItinerary(undefined);
+                }, productId: productId, itinerary: editingItinerary, itineraryCount: itineraries.length, onSuccess: (itineraryId) => {
+                    if (!editingItinerary)
+                        setSelectedItineraryId(itineraryId);
+                    void invalidateProductActionLedger();
+                } }), _jsx(AlertDialog, { open: !!deleteItineraryTarget, onOpenChange: (open) => {
+                    if (!open)
+                        setDeleteItineraryTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: productMessages.deleteItineraryTitle }), _jsx(AlertDialogDescription, { children: deleteItineraryTarget
+                                        ? formatMessage(productMessages.deleteItineraryDescription, {
+                                            name: deleteItineraryTarget.name,
+                                        })
+                                        : null })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: productMessages.cancel }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => void handleConfirmDelete(), children: productMessages.confirmDelete })] })] }) })] }));
+}

package/dist/components/product-detail/product-detail-media-sections.d.ts

@@ -0,0 +1,15 @@
+import type { ProductMediaItem } from "./product-detail-shared.js";
+export declare function ProductBrochureSection({ brochure, isGenerating, onGenerate, }: {
+    brochure: ProductMediaItem | null;
+    isGenerating: boolean;
+    onGenerate: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ProductMediaSection({ productId, media, isUploading, onUpload, onSetCover, onDelete, }: {
+    productId: string;
+    media: ProductMediaItem[];
+    isUploading: boolean;
+    onUpload: (file: File) => void;
+    onSetCover: (mediaId: string) => void;
+    onDelete: (mediaId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-media-sections.d.ts.map

package/dist/components/product-detail/product-detail-media-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-media-sections.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-media-sections.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAGlE,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACjC,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,2CAmDA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC,2CAgBA"}

package/dist/components/product-detail/product-detail-media-sections.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button } from "@voyant-travel/ui/components";
+import { Download, FileText, RefreshCw } from "lucide-react";
+import { useProductDetailMessages } from "./host.js";
+import { formatFileSize, Section } from "./product-detail-section-shell.js";
+import { ProductMediaGallery } from "./product-media-gallery.js";
+export function ProductBrochureSection({ brochure, isGenerating, onGenerate, }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    return (_jsx(Section, { title: productMessages.brochureTitle, children: _jsxs("div", { className: "flex flex-col gap-3", children: [brochure ? (_jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/20 p-3", children: [_jsx("div", { className: "mt-0.5 rounded-md bg-background p-2 text-muted-foreground", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: brochure.name }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: formatMessage(productMessages.brochureMeta, {
+                                        version: brochure.brochureVersion ?? 1,
+                                        size: formatFileSize(brochure.fileSize),
+                                    }) })] })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: productMessages.brochureEmpty })), _jsxs("div", { className: "flex gap-2", children: [brochure ? (_jsx("a", { href: brochure.url, target: "_blank", rel: "noreferrer", className: "flex-1", children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [_jsx(Download, { className: "mr-1.5 h-3.5 w-3.5" }), productMessages.downloadBrochure] }) })) : null, _jsxs(Button, { variant: brochure ? "secondary" : "default", size: "sm", className: "flex-1", disabled: isGenerating, onClick: onGenerate, children: [_jsx(RefreshCw, { className: `mr-1.5 h-3.5 w-3.5 ${isGenerating ? "animate-spin" : ""}` }), brochure ? productMessages.regenerateBrochure : productMessages.generateBrochure] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: productMessages.brochureSizeHint })] }) }));
+}
+export function ProductMediaSection({ productId, media, isUploading, onUpload, onSetCover, onDelete, }) {
+    const messages = useProductDetailMessages();
+    return (_jsx(Section, { title: messages.products.core.mediaTitle, children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx(ProductMediaGallery, { productId: productId, media: media, isUploading: isUploading, onUpload: onUpload, onSetCover: onSetCover, onDelete: onDelete }) }) }));
+}

package/dist/components/product-detail/product-detail-organize-section.d.ts

@@ -0,0 +1,6 @@
+import { type ProductRecord } from "./product-detail-shared.js";
+export declare function ProductOrganizeSection({ product, onEdit, }: {
+    product: ProductRecord;
+    onEdit: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-organize-section.d.ts.map

package/dist/components/product-detail/product-detail-organize-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-organize-section.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-organize-section.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA8B,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAO3F,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,aAAa,CAAA;IACtB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,2CAsDA"}

package/dist/components/product-detail/product-detail-organize-section.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Badge, DropdownMenuItem } from "@voyant-travel/ui/components";
+import { Pencil } from "lucide-react";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { ActionMenu, DetailRow, Section } from "./product-detail-section-shell.js";
+import { getProductBookingModeLabel } from "./product-detail-shared.js";
+export function ProductOrganizeSection({ product, onEdit, }) {
+    const api = useProductDetailApi();
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const taxClassQuery = useQuery({
+        queryKey: ["tax-class", product.taxClassId],
+        enabled: !!product.taxClassId,
+        queryFn: () => api.get(`/v1/admin/finance/tax-classes/${product.taxClassId}`),
+    });
+    return (_jsxs(Section, { title: productMessages.organizeTitle, actions: _jsx(ActionMenu, { children: _jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(Pencil, { className: "h-4 w-4" }), productMessages.edit] }) }), children: [_jsx(DetailRow, { label: productMessages.tagsLabel, value: product.tags.length > 0 ? (_jsx("div", { className: "flex flex-wrap justify-end gap-1", children: product.tags.map((tag) => (_jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag))) })) : (_jsx("span", { className: "text-muted-foreground", children: productMessages.noValue })) }), _jsx(DetailRow, { label: productMessages.typeLabel, value: _jsx("span", { children: getProductBookingModeLabel(product.bookingMode, messages) }) }), _jsx(DetailRow, { label: productMessages.taxClassLabel, value: taxClassQuery.data?.data.label ? (_jsx("span", { children: taxClassQuery.data.data.label })) : (_jsx("span", { className: "text-muted-foreground", children: productMessages.taxClassNone })) })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function ProductDetailPage({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-page.tsx"],"names":[],"mappings":"AAsCA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CA8MvD"}

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+import { Button } from "@voyant-travel/ui/components";
+import { useMemo } from "react";
+import { ProductsUiMessagesProvider } from "../../i18n/index.js";
+import { ProductOptionsSection } from "../product-options-section.js";
+import { useProductDetailApi, useProductDetailHost, useProductDetailMessages, useProductLocale, } from "./host.js";
+import { ProductActivitySection } from "./product-activity-section.js";
+import { DepartureDialog } from "./product-departure-dialog.js";
+import { DeparturePricingOverrideDialog } from "./product-departure-pricing-override-dialog.js";
+import { ProductDialog } from "./product-detail-dialog.js";
+import { ProductDetailHeader } from "./product-detail-header.js";
+import { ProductDetailItinerarySection } from "./product-detail-itinerary-section.js";
+import { ProductBrochureSection, ProductChannelsSection, ProductDeparturesSection, ProductDetailsSection, ProductMediaSection, ProductOrganizeSection, ProductSchedulesSection, } from "./product-detail-sections.js";
+import { ProductDetailSkeleton } from "./product-detail-skeleton.js";
+import { ProductMarketRulesSection } from "./product-market-rules-section.js";
+import { PricingPanel } from "./product-options-pricing.js";
+import { deriveOptionPricingLayout, getDeparturePriceOverridesQueryOptions, } from "./product-options-shared.js";
+import { ProductPaymentPolicySection } from "./product-payment-policy-section.js";
+import { ScheduleDialog } from "./product-schedule-dialog.js";
+import { useProductDetailData } from "./use-product-detail-data.js";
+import { useProductDetailDialogs } from "./use-product-detail-dialogs.js";
+export function ProductDetailPage({ id }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const { navigate, renderOptionExtras } = useProductDetailHost();
+    const resolvedLocale = useProductLocale();
+    const api = useProductDetailApi();
+    const data = useProductDetailData(id);
+    const dialogs = useProductDetailDialogs();
+    const { product, isPending, slots, rules, channels, mappings, media, itineraryNameById } = data;
+    const { mutations, refetch, invalidateProduct } = data;
+    const overrideQueries = useQueries({
+        queries: slots.map((slot) => ({
+            ...getDeparturePriceOverridesQueryOptions(api, slot.id),
+            enabled: !!slot.id,
+        })),
+    });
+    const slotIdsWithOverrides = useMemo(() => {
+        const set = new Set();
+        slots.forEach((slot, index) => {
+            const result = overrideQueries[index];
+            const items = result?.data?.data ?? [];
+            if (items.some((o) => o.active))
+                set.add(slot.id);
+        });
+        return set;
+    }, [slots, overrideQueries]);
+    const brochure = media.find((item) => item.isBrochure && item.isBrochureCurrent) ??
+        media.find((item) => item.isBrochure) ??
+        null;
+    const galleryMedia = media.filter((item) => !item.isBrochure);
+    if (isPending) {
+        return _jsx(ProductDetailSkeleton, {});
+    }
+    if (!product) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: productMessages.detailNotFound }), _jsx(Button, { variant: "outline", onClick: () => navigate.toProducts(), children: productMessages.backToProducts })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsx(ProductDetailHeader, { product: product, isDuplicating: mutations.duplicateProduct.isPending, isDeleting: mutations.deleteProduct.isPending, onEdit: dialogs.edit.openNow, onAddBooking: () => navigate.toNewBooking(id), onDuplicate: () => {
+                    mutations.duplicateProduct.mutate(undefined, {
+                        onSuccess: (result) => {
+                            navigate.toProduct(result.data.id);
+                        },
+                    });
+                }, onDelete: () => {
+                    if (confirm(productMessages.deleteConfirm)) {
+                        mutations.deleteProduct.mutate(undefined, {
+                            onSuccess: () => navigate.toProducts(),
+                        });
+                    }
+                } }), _jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-6", children: [_jsx(ProductDetailsSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductMediaSection, { productId: id, media: galleryMedia, isUploading: mutations.uploadMedia.isPending, onUpload: (file) => mutations.uploadMedia.mutate({ file }), onSetCover: (mediaId) => mutations.setCover.mutate(mediaId), onDelete: (mediaId) => {
+                                    if (confirm(productMessages.deleteMediaConfirm)) {
+                                        mutations.deleteMedia.mutate(mediaId);
+                                    }
+                                } }), _jsx(ProductDeparturesSection, { slots: slots, itineraryNameById: itineraryNameById, slotIdsWithOverrides: slotIdsWithOverrides, onCreate: dialogs.departure.openNew, onEdit: dialogs.departure.openEdit, onOverridePrice: dialogs.departureOverride.openEdit, onManageAvailability: (slot) => navigate.toAvailability(slot.id), onDelete: (slotId) => {
+                                    if (confirm(productMessages.deleteDepartureConfirm)) {
+                                        mutations.deleteSlot.mutate(slotId);
+                                    }
+                                } }), _jsx(ProductSchedulesSection, { rules: rules, onCreate: dialogs.schedule.openNew, onEdit: dialogs.schedule.openEdit, onDelete: (ruleId) => {
+                                    if (confirm(productMessages.deleteScheduleConfirm)) {
+                                        mutations.deleteRule.mutate(ruleId);
+                                    }
+                                } }), _jsx(ProductDetailItinerarySection, { productId: id }), _jsx(ProductsUiMessagesProvider, { locale: resolvedLocale, children: _jsx(ProductOptionsSection, { productId: id, renderOptionDetails: (option) => (_jsx(PricingPanel, { productId: id, optionId: option.id, optionName: option.name, productCurrency: product.sellCurrency, layout: deriveOptionPricingLayout(product.bookingMode), extras: renderOptionExtras?.(id, option.id) })) }) }), _jsx(ProductPaymentPolicySection, { product: product, onSuccess: invalidateProduct }), _jsx(ProductMarketRulesSection, { productId: id })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(ProductChannelsSection, { allChannels: channels, mappings: mappings, onAddChannel: (channelId) => mutations.addChannelMapping.mutate(channelId), onRemoveChannel: (mappingId) => mutations.removeChannelMapping.mutate(mappingId) }), _jsx(ProductOrganizeSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductBrochureSection, { brochure: brochure, isGenerating: mutations.generateBrochure.isPending, onGenerate: () => mutations.generateBrochure.mutate() }), _jsx(ProductActivitySection, { productId: id })] })] }), _jsx(ProductDialog, { open: dialogs.edit.open, onOpenChange: dialogs.edit.setOpen, product: product, onSuccess: () => {
+                    dialogs.edit.close();
+                    invalidateProduct();
+                } }), _jsx(DepartureDialog, { open: dialogs.departure.open, onOpenChange: dialogs.departure.setOpen, productId: id, slot: dialogs.departure.editing, onSuccess: () => {
+                    dialogs.departure.close();
+                    refetch.slots();
+                } }), _jsx(ScheduleDialog, { open: dialogs.schedule.open, onOpenChange: dialogs.schedule.setOpen, productId: id, rule: dialogs.schedule.editing, onSuccess: () => {
+                    dialogs.schedule.close();
+                    refetch.rules();
+                } }), _jsx(DeparturePricingOverrideDialog, { open: dialogs.departureOverride.open, onOpenChange: dialogs.departureOverride.setOpen, departureId: dialogs.departureOverride.editing?.id ?? null, optionId: dialogs.departureOverride.editing?.optionId ?? null, onSuccess: () => {
+                    dialogs.departureOverride.close();
+                } })] }));
+}

package/dist/components/product-detail/product-detail-section-shell.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export declare function Section({ title, actions, children, contentClassName, }: {
+    title: string;
+    actions?: ReactNode;
+    children: ReactNode;
+    contentClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DetailRow({ label, value }: {
+    label: string;
+    value: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ActionMenu({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatFileSize(value: number | null): string;
+//# sourceMappingURL=product-detail-section-shell.d.ts.map

package/dist/components/product-detail/product-detail-section-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-section-shell.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-section-shell.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,2CAWA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,2CAO9E;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAW/D;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CAE1D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAI3D"}

package/dist/components/product-detail/product-detail-section-shell.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "@voyant-travel/ui/components";
+import { Separator } from "@voyant-travel/ui/components/separator";
+import { MoreHorizontal } from "lucide-react";
+export function Section({ title, actions, children, contentClassName, }) {
+    return (_jsxs("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsx("h2", { className: "font-semibold leading-none tracking-tight", children: title }), actions] }), _jsx(Separator, {}), _jsx("div", { className: contentClassName ?? "px-6 py-4", children: children })] }));
+}
+export function DetailRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-center justify-between py-3 text-sm [&:not(:last-child)]:border-b", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { children: value })] }));
+}
+export function ActionMenu({ children }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: children })] }));
+}
+export function EmptyState({ message }) {
+    return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: message });
+}
+export function formatFileSize(value) {
+    if (value == null)
+        return "-";
+    if (value < 1024 * 1024)
+        return `${Math.max(1, Math.round(value / 1024))} KB`;
+    return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}

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

@@ -0,0 +1,7 @@
+export { ProductDeparturesSection, ProductSchedulesSection, } from "./product-detail-availability-sections.js";
+export { ProductChannelsSection } from "./product-detail-channel-section.js";
+export { ProductBrochureSection, ProductMediaSection } from "./product-detail-media-sections.js";
+export { ProductOrganizeSection } from "./product-detail-organize-section.js";
+export { ActionMenu, DetailRow, EmptyState, Section, } from "./product-detail-section-shell.js";
+export { ProductDetailsSection } from "./product-detail-summary-section.js";
+//# sourceMappingURL=product-detail-sections.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-sections.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,2CAA2C,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAC5E,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAChG,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,OAAO,GACR,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA"}

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

@@ -0,0 +1,6 @@
+export { ProductDeparturesSection, ProductSchedulesSection, } from "./product-detail-availability-sections.js";
+export { ProductChannelsSection } from "./product-detail-channel-section.js";
+export { ProductBrochureSection, ProductMediaSection } from "./product-detail-media-sections.js";
+export { ProductOrganizeSection } from "./product-detail-organize-section.js";
+export { ActionMenu, DetailRow, EmptyState, Section, } from "./product-detail-section-shell.js";
+export { ProductDetailsSection } from "./product-detail-summary-section.js";