@voyantjs/products-ui 0.30.6 → 0.31.0

package/dist/components/product-list.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { useProducts, } from "@voyantjs/products-react";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown, ListFilter, Plus, Search, X } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+import { ProductDialog } from "./product-dialog.js";
+const STATUS_ALL = "__all__";
+const PRODUCT_STATUSES = ["draft", "active", "archived"];
+const SORTABLE_COLUMNS = {
+    name: "name",
+    status: "status",
+    sellAmount: "sellAmount",
+    pax: "pax",
+    startDate: "startDate",
+};
+const SKELETON_ROW_COUNT = 6;
+const TABLE_COLUMN_COUNT = 5;
+const statusVariant = {
+    draft: "outline",
+    active: "default",
+    archived: "secondary",
+};
+function formatAmount(cents, currency, fallback) {
+    if (cents == null)
+        return fallback;
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+}
+export function ProductList({ pageSize = 25, onSelectProduct } = {}) {
+    const messages = useProductsUiMessagesOrDefault();
+    const productMessages = messages.productList;
+    const [search, setSearch] = React.useState("");
+    const [status, setStatus] = React.useState(STATUS_ALL);
+    const [dateRange, setDateRange] = React.useState(null);
+    const [paxMin, setPaxMin] = React.useState("");
+    const [paxMax, setPaxMax] = React.useState("");
+    const [sellAmountMin, setSellAmountMin] = React.useState("");
+    const [sellAmountMax, setSellAmountMax] = React.useState("");
+    const [sortBy, setSortBy] = React.useState("createdAt");
+    const [sortDir, setSortDir] = React.useState("desc");
+    const [offset, setOffset] = React.useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const paxMinNumber = paxMin === "" ? undefined : Number.parseInt(paxMin, 10);
+    const paxMaxNumber = paxMax === "" ? undefined : Number.parseInt(paxMax, 10);
+    const sellAmountMinCents = sellAmountMin === "" ? undefined : Math.round(Number.parseFloat(sellAmountMin) * 100);
+    const sellAmountMaxCents = sellAmountMax === "" ? undefined : Math.round(Number.parseFloat(sellAmountMax) * 100);
+    const { data, isPending, isFetching, isError } = useProducts({
+        search: search || undefined,
+        status: status === STATUS_ALL ? undefined : status,
+        dateFrom: dateRange?.from ?? undefined,
+        dateTo: dateRange?.to ?? undefined,
+        paxMin: Number.isFinite(paxMinNumber) ? paxMinNumber : undefined,
+        paxMax: Number.isFinite(paxMaxNumber) ? paxMaxNumber : undefined,
+        sellAmountMin: Number.isFinite(sellAmountMinCents) ? sellAmountMinCents : undefined,
+        sellAmountMax: Number.isFinite(sellAmountMaxCents) ? sellAmountMaxCents : undefined,
+        sortBy,
+        sortDir,
+        limit: pageSize,
+        offset,
+    });
+    const products = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = Math.floor(offset / pageSize) + 1;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const showSkeleton = isPending || (isFetching && products.length === 0);
+    const resetOffset = () => setOffset(0);
+    const handleSort = (field) => {
+        setOffset(0);
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir("asc");
+            return;
+        }
+        if (sortDir === "asc") {
+            setSortDir("desc");
+            return;
+        }
+        setSortBy("createdAt");
+        setSortDir("desc");
+    };
+    const activeFilterCount = (status !== STATUS_ALL ? 1 : 0) +
+        (dateRange?.from || dateRange?.to ? 1 : 0) +
+        (paxMin !== "" || paxMax !== "" ? 1 : 0) +
+        (sellAmountMin !== "" || sellAmountMax !== "" ? 1 : 0);
+    const hasActiveFilters = activeFilterCount > 0 || search !== "";
+    const clearFilters = () => {
+        setSearch("");
+        setStatus(STATUS_ALL);
+        setDateRange(null);
+        setPaxMin("");
+        setPaxMax("");
+        setSellAmountMin("");
+        setSellAmountMax("");
+        resetOffset();
+    };
+    const handleEdit = (product) => {
+        if (onSelectProduct) {
+            onSelectProduct(product);
+            return;
+        }
+        setEditing(product);
+        setDialogOpen(true);
+    };
+    const handleCreate = () => {
+        setEditing(undefined);
+        setDialogOpen(true);
+    };
+    return (_jsxs("div", { "data-slot": "product-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "products-search", className: "sr-only", children: productMessages.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "products-search", placeholder: productMessages.searchPlaceholder, value: search, onChange: (event) => {
+                                    setSearch(event.target.value);
+                                    resetOffset();
+                                }, className: "pl-9" })] }), _jsxs(Popover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4", "aria-hidden": "true" }), productMessages.filters.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "products-filter-status", children: productMessages.filters.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                                        setStatus(value ?? STATUS_ALL);
+                                                        resetOffset();
+                                                    }, children: [_jsx(SelectTrigger, { id: "products-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: productMessages.filters.statusAll }), PRODUCT_STATUSES.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.productStatusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.dateLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: (value) => {
+                                                        setDateRange(value);
+                                                        resetOffset();
+                                                    }, placeholder: productMessages.filters.datePlaceholder, clearable: true, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.paxLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, placeholder: productMessages.filters.min, value: paxMin, onChange: (event) => {
+                                                                setPaxMin(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.paxLabel} ${productMessages.filters.min}` }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, placeholder: productMessages.filters.max, value: paxMax, onChange: (event) => {
+                                                                setPaxMax(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.paxLabel} ${productMessages.filters.max}` })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.sellAmountLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: productMessages.filters.min, value: sellAmountMin, onChange: (event) => {
+                                                                setSellAmountMin(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.sellAmountLabel} ${productMessages.filters.min}` }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: productMessages.filters.max, value: sellAmountMax, onChange: (event) => {
+                                                                setSellAmountMax(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.sellAmountLabel} ${productMessages.filters.max}` })] })] })] }) })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4", "aria-hidden": "true" }), productMessages.filters.clear] })), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: handleCreate, "data-slot": "product-list-create", children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), productMessages.newProduct] }) })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.name, field: SORTABLE_COLUMNS.name, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(ProductTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: productMessages.loadFailed }) })) : products.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: productMessages.empty }) })) : (products.map((product) => (_jsxs(TableRow, { onClick: () => handleEdit(product), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: product.name }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusVariant[product.status] ?? "secondary", children: messages.common.productStatusLabels[product.status] }) }), _jsx(TableCell, { children: formatAmount(product.sellAmountCents, product.sellCurrency, productMessages.noValue) }), _jsx(TableCell, { children: product.pax ?? productMessages.noValue }), _jsx(TableCell, { children: product.startDate ?? productMessages.noValue })] }, product.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(productMessages.paginationShowing, { count: products.length, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: productMessages.paginationPrevious }), _jsx("span", { children: formatMessage(productMessages.paginationPage, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: productMessages.paginationNext })] })] }), _jsx(ProductDialog, { open: dialogOpen, onOpenChange: setDialogOpen, product: editing, onSuccess: (product) => {
+                    if (onSelectProduct) {
+                        onSelectProduct(product);
+                    }
+                } })] }));
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function ProductTableSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-16 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-8" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, `skeleton-${idx}`))) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-tags-page.d.ts","sourceRoot":"","sources":["../../src/components/product-tags-page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEhF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAE,oBAAyB,2CAajF"}

package/dist/components/product-tags-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 { ProductTagList } from "./product-tag-list.js";
+export function ProductTagsPage({ pageSize, className } = {}) {
+    const messages = useProductsUiMessagesOrDefault().productTagsPage;
+    return (_jsxs("div", { "data-slot": "product-tags-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(ProductTagList, { pageSize: pageSize })] }));
+}

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

@@ -0,0 +1,6 @@
+export interface ProductTypesPageProps {
+    pageSize?: number;
+    className?: string;
+}
+export declare function ProductTypesPage({ pageSize, className, }?: ProductTypesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-types-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-types-page.d.ts","sourceRoot":"","sources":["../../src/components/product-types-page.tsx"],"names":[],"mappings":"AAuCA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,wBAAgB,gBAAgB,CAAC,EAC/B,QAA4B,EAC5B,SAAS,GACV,GAAE,qBAA0B,2CAyI5B"}

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

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductTypeMutation, useProductTypes, } from "@voyantjs/products-react";
+import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, Switch, Textarea, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
+import { Loader2, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+const DEFAULT_PAGE_SIZE = 25;
+function getFormSchema(messages) {
+    return z.object({
+        name: z.string().min(1, messages.validation.nameRequired).max(255),
+        code: z.string().min(1, messages.validation.codeRequired).max(100),
+        description: z.string().optional().nullable(),
+        sortOrder: z.coerce.number().int().default(0),
+        active: z.boolean().default(true),
+    });
+}
+export function ProductTypesPage({ pageSize = DEFAULT_PAGE_SIZE, className, } = {}) {
+    const messages = useProductsUiMessagesOrDefault();
+    const pageMessages = messages.productTypesPage;
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    const [pageIndex, setPageIndex] = useState(0);
+    const { data, isPending, refetch } = useProductTypes({
+        limit: pageSize,
+        offset: pageIndex * pageSize,
+    });
+    const { remove } = useProductTypeMutation();
+    const items = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    return (_jsxs("div", { "data-slot": "product-types-page", className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: pageMessages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: pageMessages.description })] }), _jsxs(Button, { size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setSheetOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-1.5 size-3.5" }), pageMessages.addType] })] }), isPending ? (_jsx(ProductTypesListLoading, { loadingLabel: messages.common.loading })) : (_jsx("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: items.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-muted-foreground", children: pageMessages.empty })) : (_jsx("div", { className: "flex flex-col divide-y", children: items.map((item) => (_jsxs("div", { className: "flex items-center justify-between gap-4 px-6 py-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: item.name }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: item.code }), !item.active ? (_jsx(Badge, { variant: "secondary", className: "text-xs", children: messages.common.inactive })) : null] }), item.description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: item.description })) : null] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
+                                                    setEditing(item);
+                                                    setSheetOpen(true);
+                                                }, children: [_jsx(Pencil, { className: "size-4" }), pageMessages.edit] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => {
+                                                    if (confirm(pageMessages.deleteConfirm)) {
+                                                        remove.mutate(item.id, { onSuccess: () => void refetch() });
+                                                    }
+                                                }, children: [_jsx(Trash2, { className: "size-4" }), pageMessages.delete] })] })] })] }, item.id))) })) })), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: pageMessages.showingSummary
+                            .replace("{count}", String(items.length))
+                            .replace("{total}", String(total)) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: pageIndex === 0, onClick: () => setPageIndex((current) => Math.max(0, current - 1)), children: messages.common.previous }), _jsxs("span", { children: [messages.common.page, " ", pageIndex + 1, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: (pageIndex + 1) * pageSize >= total, onClick: () => setPageIndex((current) => current + 1), children: messages.common.next })] })] }), _jsx(ProductTypeSheet, { open: sheetOpen, onOpenChange: setSheetOpen, item: editing, onSuccess: () => {
+                    setSheetOpen(false);
+                    setEditing(undefined);
+                    void refetch();
+                } })] }));
+}
+function ProductTypesListLoading({ loadingLabel }) {
+    return (_jsx("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: _jsxs("div", { className: "flex h-32 items-center justify-center text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "mr-2 size-4 animate-spin" }), loadingLabel] }) }));
+}
+function ProductTypeSheet({ open, onOpenChange, item, onSuccess, }) {
+    const messages = useProductsUiMessagesOrDefault().productTypesPage;
+    const { create, update } = useProductTypeMutation();
+    const formSchema = useMemo(() => getFormSchema(messages), [messages]);
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            code: "",
+            description: "",
+            sortOrder: 0,
+            active: true,
+        },
+    });
+    useEffect(() => {
+        if (open && item) {
+            form.reset({
+                name: item.name,
+                code: item.code,
+                description: item.description ?? "",
+                sortOrder: item.sortOrder,
+                active: item.active,
+            });
+        }
+        else if (open) {
+            form.reset();
+        }
+    }, [open, item, form]);
+    const isSubmitting = create.isPending || update.isPending;
+    const onSubmit = async (values) => {
+        const payload = {
+            name: values.name,
+            code: values.code,
+            description: values.description || null,
+            sortOrder: values.sortOrder,
+            active: values.active,
+        };
+        if (item) {
+            await update.mutateAsync({ id: item.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: item ? messages.editSheetTitle : messages.newSheetTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(SheetBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: messages.namePlaceholder, autoFocus: true }), form.formState.errors.name ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.codeLabel }), _jsx(Input, { ...form.register("code"), placeholder: messages.codePlaceholder }), form.formState.errors.code ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.code.message })) : null] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.descriptionLabel }), _jsx(Textarea, { ...form.register("description"), placeholder: messages.descriptionPlaceholder })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] }), _jsxs("div", { className: "flex items-center gap-2 pt-6", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) }), _jsx(Label, { children: messages.activeLabel })] })] })] }), _jsxs(SheetFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 size-4 animate-spin" }) : null, item ? messages.saveChanges : messages.createType] })] })] })] }) }));
+}

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

@@ -0,0 +1,8 @@
+import type { ProductRecord } from "@voyantjs/products-react";
+export interface ProductsPageProps {
+    pageSize?: number;
+    onProductOpen?: (product: ProductRecord) => void;
+    className?: string;
+}
+export declare function ProductsPage({ pageSize, onProductOpen, className }?: ProductsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=products-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"products-page.d.ts","sourceRoot":"","sources":["../../src/components/products-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAK7D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAE,iBAAsB,2CAa1F"}

package/dist/components/products-page.js

@@ -0,0 +1,8 @@
+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 { ProductList } from "./product-list.js";
+export function ProductsPage({ pageSize, onProductOpen, className } = {}) {
+    const productMessages = useProductsUiMessagesOrDefault().productsPage;
+    return (_jsxs("div", { "data-slot": "products-page", className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: productMessages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: productMessages.description })] }), _jsx(ProductList, { pageSize: pageSize, onSelectProduct: onProductOpen })] }));
+}

package/dist/i18n/en.d.ts

@@ -29,6 +29,20 @@ export declare const productsUiEn: {
             active: string;
             archived: string;
         };
+        productStatusLabels: {
+            draft: string;
+            active: string;
+            archived: string;
+        };
+        productBookingModeLabels: {
+            date: string;
+            date_time: string;
+            open: string;
+            stay: string;
+            transfer: string;
+            itinerary: string;
+            other: string;
+        };
     };
     comboboxes: {
         productCategory: {
@@ -40,6 +54,161 @@ export declare const productsUiEn: {
             empty: string;
         };
     };
+    productCategoriesPage: {
+        title: string;
+        description: string;
+    };
+    productsPage: {
+        title: string;
+        description: string;
+    };
+    productDetailPage: {
+        actions: {
+            back: string;
+            edit: string;
+            delete: string;
+            createBooking: string;
+            addItinerary: string;
+            editItinerary: string;
+            deleteItinerary: string;
+            addDay: string;
+        };
+        tabs: {
+            overview: string;
+            media: string;
+            itinerary: string;
+            options: string;
+            versions: string;
+        };
+        sections: {
+            overview: {
+                title: string;
+                description: string;
+            };
+            details: {
+                title: string;
+                description: string;
+            };
+            commercial: {
+                title: string;
+                description: string;
+            };
+            itinerary: {
+                title: string;
+                description: string;
+            };
+            sidebar: {
+                title: string;
+                description: string;
+            };
+        };
+        fields: {
+            status: string;
+            bookingMode: string;
+            visibility: string;
+            capacityMode: string;
+            timezone: string;
+            productType: string;
+            facility: string;
+            taxClass: string;
+            sellAmount: string;
+            costAmount: string;
+            margin: string;
+            pax: string;
+            startDate: string;
+            endDate: string;
+            reservationTimeout: string;
+            tags: string;
+            createdAt: string;
+            updatedAt: string;
+        };
+        states: {
+            loading: string;
+            loadFailed: string;
+            notFoundTitle: string;
+            notFoundDescription: string;
+            noDescription: string;
+            noItineraries: string;
+            noDays: string;
+            deleteConfirm: string;
+            deleteItineraryConfirm: string;
+            deleteDayConfirm: string;
+            deleteFailed: string;
+            minutes: string;
+        };
+    };
+    productDialog: {
+        titles: {
+            create: string;
+            edit: string;
+        };
+        descriptions: {
+            create: string;
+            edit: string;
+        };
+    };
+    productForm: {
+        fields: {
+            name: string;
+            description: string;
+            tags: string;
+            status: string;
+            bookingMode: string;
+            productType: string;
+            sellCurrency: string;
+            sellAmount: string;
+            costAmount: string;
+        };
+        placeholders: {
+            name: string;
+            description: string;
+            tagInput: string;
+            productTypeSearch: string;
+            currencySearch: string;
+            amount: string;
+        };
+        validation: {
+            nameRequired: string;
+            sellCurrencyInvalid: string;
+            saveFailed: string;
+        };
+        actions: {
+            cancel: string;
+            saving: string;
+            create: string;
+            saveChanges: string;
+        };
+    };
+    productList: {
+        searchPlaceholder: string;
+        newProduct: string;
+        filters: {
+            button: string;
+            statusLabel: string;
+            statusAll: string;
+            dateLabel: string;
+            datePlaceholder: string;
+            paxLabel: string;
+            sellAmountLabel: string;
+            min: string;
+            max: string;
+            clear: string;
+        };
+        columns: {
+            name: string;
+            status: string;
+            sellAmount: string;
+            pax: string;
+            startDate: string;
+        };
+        loadFailed: string;
+        empty: string;
+        noValue: string;
+        paginationShowing: string;
+        paginationPage: string;
+        paginationPrevious: string;
+        paginationNext: string;
+    };
     productCategoryDialog: {
         titles: {
             create: string;
@@ -130,6 +299,37 @@ export declare const productsUiEn: {
         deleteConfirm: string;
         showingSummary: string;
     };
+    productTagsPage: {
+        title: string;
+        description: string;
+    };
+    productTypesPage: {
+        title: string;
+        description: string;
+        addType: string;
+        empty: string;
+        edit: string;
+        delete: string;
+        deleteConfirm: string;
+        showingSummary: string;
+        editSheetTitle: string;
+        newSheetTitle: string;
+        nameLabel: string;
+        namePlaceholder: string;
+        codeLabel: string;
+        codePlaceholder: string;
+        descriptionLabel: string;
+        descriptionPlaceholder: string;
+        sortOrderLabel: string;
+        activeLabel: string;
+        cancel: string;
+        saveChanges: string;
+        createType: string;
+        validation: {
+            nameRequired: string;
+            codeRequired: string;
+        };
+    };
     productMediaDialog: {
         titles: {
             create: string;

package/dist/i18n/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAocK,CAAA"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6oBK,CAAA"}