@voyantjs/travel-composer-react 0.105.7 → 0.105.8

package/dist/admin/trip-list-filters.d.ts

@@ -0,0 +1,33 @@
+import type { TripEnvelopeStatus } from "@voyantjs/travel-composer";
+export declare const TRIP_STATUS_ALL = "__all__";
+export type TripStatusFilter = TripEnvelopeStatus | typeof TRIP_STATUS_ALL;
+export interface TripListFiltersPopoverProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    activeFilterCount: number;
+    status: TripStatusFilter;
+    onStatusChange(value: TripStatusFilter): void;
+    productId: string | null;
+    onProductIdChange(value: string | null): void;
+    accommodationId: string | null;
+    onAccommodationIdChange(value: string | null): void;
+    cruiseId: string | null;
+    onCruiseIdChange(value: string | null): void;
+    hasFlight: boolean;
+    onHasFlightChange(value: boolean): void;
+    totalMin: string;
+    onTotalMinChange(value: string): void;
+    totalMax: string;
+    onTotalMaxChange(value: string): void;
+    createdRange: {
+        from: string | null;
+        to: string | null;
+    } | null;
+    onCreatedRangeChange(value: {
+        from: string | null;
+        to: string | null;
+    } | null): void;
+    onFiltersChanged(): void;
+}
+export declare function TripListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, accommodationId, onAccommodationIdChange, cruiseId, onCruiseIdChange, hasFlight, onHasFlightChange, totalMin, onTotalMinChange, totalMax, onTotalMaxChange, createdRange, onCreatedRangeChange, onFiltersChanged, }: TripListFiltersPopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trip-list-filters.d.ts.map

package/dist/admin/trip-list-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trip-list-filters.d.ts","sourceRoot":"","sources":["../../src/admin/trip-list-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAmBnE,eAAO,MAAM,eAAe,YAAY,CAAA;AACxC,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,OAAO,eAAe,CAAA;AAgE1E,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACjC,iBAAiB,EAAE,MAAM,CAAA;IACzB,MAAM,EAAE,gBAAgB,CAAA;IACxB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC7C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IAC7C,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACnD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAA;IAC/D,oBAAoB,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,GAAG,IAAI,CAAA;IACpF,gBAAgB,IAAI,IAAI,CAAA;CACzB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,GACjB,EAAE,2BAA2B,2CA6L7B"}

package/dist/admin/trip-list-filters.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOperatorAdminMessages as useAdminMessages } from "@voyantjs/admin";
+import { useCatalogSearch } from "@voyantjs/catalog-react";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Checkbox } from "@voyantjs/ui/components/checkbox";
+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 { ListFilter } from "lucide-react";
+import * as React from "react";
+export const TRIP_STATUS_ALL = "__all__";
+function catalogHitLabel(hit) {
+    return (catalogHitStringField(hit, "name") ??
+        catalogHitStringField(hit, "title") ??
+        catalogHitStringField(hit, "hotel.name") ??
+        hit.id);
+}
+function catalogHitStringField(hit, field) {
+    const value = hit.document.fields[field];
+    return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+function CatalogFilterCombobox({ label, value, onValueChange, items, selectedItem, onSelectedItemChange, onSearchChange, placeholder, emptyText, onFiltersChanged, }) {
+    const id = `trips-filter-${label.toLowerCase()}`;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(AsyncCombobox, { value: value, onChange: (nextValue) => {
+                    onValueChange(nextValue);
+                    const match = nextValue ? items.find((hit) => hit.id === nextValue) : null;
+                    onSelectedItemChange(match ?? null);
+                    onFiltersChanged();
+                }, items: items, selectedItem: selectedItem, getKey: (hit) => hit.id, getLabel: catalogHitLabel, getSecondary: (hit) => catalogHitStringField(hit, "source.kind") ?? undefined, onSearchChange: onSearchChange, placeholder: placeholder, emptyText: emptyText })] }));
+}
+export function TripListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, accommodationId, onAccommodationIdChange, cruiseId, onCruiseIdChange, hasFlight, onHasFlightChange, totalMin, onTotalMinChange, totalMax, onTotalMaxChange, createdRange, onCreatedRangeChange, onFiltersChanged, }) {
+    const messages = useAdminMessages().trips;
+    const filterMessages = messages.filters;
+    const statusOptions = [
+        { value: TRIP_STATUS_ALL, label: filterMessages.allStatuses },
+        { value: "draft", label: messages.statuses.draft },
+        { value: "priced", label: messages.statuses.priced },
+        { value: "reserve_in_progress", label: messages.statuses.reserve_in_progress },
+        { value: "reserved", label: messages.statuses.reserved },
+        { value: "checkout_started", label: messages.statuses.checkout_started },
+        { value: "booked", label: messages.statuses.booked },
+        { value: "failed", label: messages.statuses.failed },
+        { value: "cancelled", label: messages.statuses.cancelled },
+    ];
+    const [selectedProduct, setSelectedProduct] = React.useState(null);
+    const [productSearch, setProductSearch] = React.useState("");
+    const [selectedStay, setSelectedStay] = React.useState(null);
+    const [staySearch, setStaySearch] = React.useState("");
+    const [selectedCruise, setSelectedCruise] = React.useState(null);
+    const [cruiseSearch, setCruiseSearch] = React.useState("");
+    const productsQuery = useCatalogSearch({
+        vertical: "products",
+        query: productSearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const productHits = productsQuery.data?.hits ?? [];
+    const staysQuery = useCatalogSearch({
+        vertical: "accommodations",
+        query: staySearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const stayHits = staysQuery.data?.hits ?? [];
+    const cruisesQuery = useCatalogSearch({
+        vertical: "cruises",
+        query: cruiseSearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const cruiseHits = cruisesQuery.data?.hits ?? [];
+    const markChanged = () => onFiltersChanged();
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4" }), filterMessages.trigger, activeFilterCount > 0 ? (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount })) : null] }) }), _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: "trips-filter-status", children: filterMessages.status }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                        onStatusChange((value ?? TRIP_STATUS_ALL));
+                                        markChanged();
+                                    }, children: [_jsx(SelectTrigger, { id: "trips-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: statusOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsx(CatalogFilterCombobox, { label: filterMessages.products, value: productId, onValueChange: onProductIdChange, items: productHits, selectedItem: selectedProduct, onSelectedItemChange: setSelectedProduct, onSearchChange: setProductSearch, placeholder: filterMessages.anyProduct, emptyText: filterMessages.noProducts, onFiltersChanged: markChanged }), _jsx(CatalogFilterCombobox, { label: filterMessages.stays, value: accommodationId, onValueChange: onAccommodationIdChange, items: stayHits, selectedItem: selectedStay, onSelectedItemChange: setSelectedStay, onSearchChange: setStaySearch, placeholder: filterMessages.anyStay, emptyText: filterMessages.noStays, onFiltersChanged: markChanged }), _jsx(CatalogFilterCombobox, { label: filterMessages.cruises, value: cruiseId, onValueChange: onCruiseIdChange, items: cruiseHits, selectedItem: selectedCruise, onSelectedItemChange: setSelectedCruise, onSearchChange: setCruiseSearch, placeholder: filterMessages.anyCruise, emptyText: filterMessages.noCruises, onFiltersChanged: markChanged }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "trips-filter-flight", checked: hasFlight, onCheckedChange: (checked) => {
+                                        onHasFlightChange(checked === true);
+                                        markChanged();
+                                    } }), _jsx(Label, { htmlFor: "trips-filter-flight", className: "font-normal", children: filterMessages.hasFlight })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.total }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: filterMessages.min, value: totalMin, onChange: (event) => {
+                                                onTotalMinChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.totalMinAria }), _jsx("span", { className: "text-muted-foreground", children: "-" }), _jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: filterMessages.max, value: totalMax, onChange: (event) => {
+                                                onTotalMaxChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.totalMaxAria })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.createdAt }), _jsx(DateRangePicker, { value: createdRange, onChange: (value) => {
+                                        onCreatedRangeChange(value);
+                                        markChanged();
+                                    }, placeholder: filterMessages.anyDate, clearable: true, className: "w-full" })] })] }) })] }));
+}

package/dist/admin/trips-host.d.ts

@@ -0,0 +1,15 @@
+import type { ListTripsParams } from "../operations.js";
+/**
+ * Initial list parameters mirrored by the `travel-composer-index`
+ * contribution's loader so the SSR-seeded cache entry and the page's first
+ * `useQuery` line up on the same key.
+ */
+export declare const initialTripsListParams: ListTripsParams;
+/**
+ * Packaged admin host for the trips list page (packaged-admin RFC Phase 3).
+ * Opening a trip (or composing a new one) resolves the `"trip.detail"`
+ * semantic destination (RFC §4.7); the page keeps its filter/sort/paging
+ * state locally (no URL search contract), so the host takes no props.
+ */
+export declare function TripsHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trips-host.d.ts.map

package/dist/admin/trips-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trips-host.d.ts","sourceRoot":"","sources":["../../src/admin/trips-host.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAoBvD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAKpC,CAAA;AAaD;;;;;GAKG;AACH,wBAAgB,SAAS,4CA8RxB"}

package/dist/admin/trips-host.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useOperatorAdminMessages as useAdminMessages, useAdminNavigate } from "@voyantjs/admin";
+import { formatMessage } from "@voyantjs/i18n";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown, Plus, Search, X } from "lucide-react";
+import * as React from "react";
+import { useVoyantTravelComposerContext } from "../provider.js";
+import { listTripsQueryOptions } from "../query-options.js";
+import { componentTitleFor, readComponentSchedule, sortComponentsBySchedule, } from "./trip-component-display.js";
+import { TRIP_STATUS_ALL, TripListFiltersPopover, } from "./trip-list-filters.js";
+const PAGE_SIZE = 25;
+const SKELETON_ROWS = 6;
+const TABLE_COLUMN_COUNT = 7;
+/**
+ * Initial list parameters mirrored by the `travel-composer-index`
+ * contribution's loader so the SSR-seeded cache entry and the page's first
+ * `useQuery` line up on the same key.
+ */
+export const initialTripsListParams = {
+    limit: PAGE_SIZE,
+    offset: 0,
+    sortBy: "updatedAt",
+    sortDir: "desc",
+};
+const statusBadgeVariant = {
+    draft: "secondary",
+    priced: "secondary",
+    reserve_in_progress: "secondary",
+    reserved: "default",
+    checkout_started: "secondary",
+    booked: "default",
+    failed: "destructive",
+    cancelled: "destructive",
+};
+/**
+ * Packaged admin host for the trips list page (packaged-admin RFC Phase 3).
+ * Opening a trip (or composing a new one) resolves the `"trip.detail"`
+ * semantic destination (RFC §4.7); the page keeps its filter/sort/paging
+ * state locally (no URL search contract), so the host takes no props.
+ */
+export function TripsHost() {
+    const messages = useAdminMessages().trips;
+    const listMessages = messages.list;
+    const navigateTo = useAdminNavigate();
+    const { baseUrl, fetcher } = useVoyantTravelComposerContext();
+    const client = React.useMemo(() => ({ baseUrl, fetcher }), [baseUrl, fetcher]);
+    const [search, setSearch] = React.useState("");
+    const [status, setStatus] = React.useState(TRIP_STATUS_ALL);
+    const [productId, setProductId] = React.useState(null);
+    const [accommodationId, setAccommodationId] = React.useState(null);
+    const [cruiseId, setCruiseId] = React.useState(null);
+    const [hasFlight, setHasFlight] = React.useState(false);
+    const [totalMin, setTotalMin] = React.useState("");
+    const [totalMax, setTotalMax] = React.useState("");
+    const [createdRange, setCreatedRange] = React.useState(null);
+    const [sortBy, setSortBy] = React.useState("updatedAt");
+    const [sortDir, setSortDir] = React.useState("desc");
+    const [offset, setOffset] = React.useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+    const totalMinCents = parseAmountCents(totalMin);
+    const totalMaxCents = parseAmountCents(totalMax);
+    const params = React.useMemo(() => ({
+        limit: PAGE_SIZE,
+        offset,
+        sortBy,
+        sortDir,
+        ...(search.trim() ? { search: search.trim() } : {}),
+        ...(status !== TRIP_STATUS_ALL ? { status } : {}),
+        ...(productId ? { productId } : {}),
+        ...(accommodationId ? { accommodationId } : {}),
+        ...(cruiseId ? { cruiseId } : {}),
+        ...(hasFlight ? { hasFlight: true } : {}),
+        ...(totalMinCents !== null ? { totalMinCents } : {}),
+        ...(totalMaxCents !== null ? { totalMaxCents } : {}),
+        ...(createdRange?.from ? { createdFrom: createdRange.from } : {}),
+        ...(createdRange?.to ? { createdTo: createdRange.to } : {}),
+    }), [
+        offset,
+        sortBy,
+        sortDir,
+        search,
+        status,
+        productId,
+        accommodationId,
+        cruiseId,
+        hasFlight,
+        totalMinCents,
+        totalMaxCents,
+        createdRange,
+    ]);
+    const activeFilterCount = (status !== TRIP_STATUS_ALL ? 1 : 0) +
+        (productId ? 1 : 0) +
+        (accommodationId ? 1 : 0) +
+        (cruiseId ? 1 : 0) +
+        (hasFlight ? 1 : 0) +
+        (totalMin !== "" || totalMax !== "" ? 1 : 0) +
+        (createdRange?.from || createdRange?.to ? 1 : 0);
+    const { data, isPending, isFetching, isError } = useQuery(listTripsQueryOptions(client, params));
+    const trips = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = Math.floor(offset / PAGE_SIZE) + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && trips.length === 0);
+    const resetOffset = () => setOffset(0);
+    const handleSort = (field) => {
+        setOffset(0);
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir(field === "status" ? "asc" : "desc");
+            return;
+        }
+        setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
+    };
+    const hasActiveFilters = search.trim() !== "" || activeFilterCount > 0;
+    const clearFilters = () => {
+        setSearch("");
+        setStatus(TRIP_STATUS_ALL);
+        setProductId(null);
+        setAccommodationId(null);
+        setCruiseId(null);
+        setHasFlight(false);
+        setTotalMin("");
+        setTotalMax("");
+        setCreatedRange(null);
+        resetOffset();
+    };
+    return (_jsxs("main", { className: "flex flex-col gap-6 p-6", children: [_jsx("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: _jsxs("div", { children: [_jsx("h1", { className: "font-bold text-2xl tracking-tight", children: listMessages.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: listMessages.description })] }) }), _jsxs("div", { 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: "trips-search", className: "sr-only", children: listMessages.searchLabel }), _jsx(Search, { className: "-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" }), _jsx(Input, { id: "trips-search", placeholder: listMessages.searchPlaceholder, value: search, onChange: (event) => {
+                                            setSearch(event.target.value);
+                                            resetOffset();
+                                        }, className: "pl-9" })] }), _jsx(TripListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: setProductId, accommodationId: accommodationId, onAccommodationIdChange: setAccommodationId, cruiseId: cruiseId, onCruiseIdChange: setCruiseId, hasFlight: hasFlight, onHasFlightChange: setHasFlight, totalMin: totalMin, onTotalMinChange: setTotalMin, totalMax: totalMax, onTotalMaxChange: setTotalMax, createdRange: createdRange, onCreatedRangeChange: setCreatedRange, onFiltersChanged: resetOffset }), hasActiveFilters ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), listMessages.clearFilters] })) : null, _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => navigateTo("trip.detail", { tripId: "new" }), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), listMessages.newTrip] }) })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: listMessages.columns.start }), _jsx(TableHead, { children: listMessages.columns.end }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.status, field: "status", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: listMessages.columns.components }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.total, field: "total", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.created, field: "createdAt", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.updated, field: "updatedAt", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(TripTableSkeleton, { rows: SKELETON_ROWS })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-destructive text-sm", children: listMessages.loadFailed }) })) : trips.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-muted-foreground text-sm", children: hasActiveFilters ? listMessages.emptyFiltered : listMessages.empty }) })) : (trips.map((trip) => (_jsx(TripRow, { trip: trip, messages: messages, onOpen: () => navigateTo("trip.detail", { tripId: trip.envelope.id }) }, trip.envelope.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-muted-foreground text-sm", children: [_jsx("span", { children: total === 0
+                                    ? listMessages.countEmpty
+                                    : formatMessage(listMessages.countRange, {
+                                        start: String(trips.length === 0 ? 0 : offset + 1),
+                                        end: String(offset + trips.length),
+                                        total: String(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 - PAGE_SIZE)), children: listMessages.previous }), _jsx("span", { children: formatMessage(listMessages.pageOf, {
+                                            page: String(page),
+                                            pageCount: String(pageCount),
+                                        }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + PAGE_SIZE >= total, onClick: () => setOffset((prev) => prev + PAGE_SIZE), children: listMessages.next })] })] })] })] }));
+}
+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 TripTableSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) })] }, `skeleton-${idx}`))) }));
+}
+function TripRow({ trip, messages, onOpen, }) {
+    const envelope = trip.envelope;
+    const activeComponents = sortComponentsBySchedule(trip.components.filter((component) => component.status !== "removed"));
+    const schedule = tripScheduleBounds(activeComponents);
+    return (_jsxs(TableRow, { className: "cursor-pointer", onClick: onOpen, children: [_jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-sm", children: formatDate(schedule.start) }) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-sm", children: formatDate(schedule.end) }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusBadgeVariant[envelope.status], children: messages.statuses[envelope.status] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "min-w-0", children: [_jsx("p", { children: componentCountLabel(activeComponents, messages) }), _jsx(TripComponentSummary, { components: activeComponents, messages: messages })] }) }), _jsx(TableCell, { children: formatMoney(envelope.aggregateTotalAmountCents, envelope.aggregateCurrency) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-muted-foreground text-sm", children: formatDate(envelope.createdAt) }) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-muted-foreground text-sm", children: formatDate(envelope.updatedAt) }) })] }));
+}
+function componentCountLabel(components, messages) {
+    const committedBookings = components.filter((component) => component.bookingId).length;
+    const externalRefs = components.filter((component) => component.orderId || component.paymentSessionId).length;
+    const parts = [
+        formatMessage(messages.list.componentCount, {
+            count: String(components.length),
+            label: components.length === 1 ? messages.list.componentSingular : messages.list.componentPlural,
+        }),
+    ];
+    if (committedBookings > 0) {
+        parts.push(formatMessage(messages.list.componentCount, {
+            count: String(committedBookings),
+            label: committedBookings === 1 ? messages.list.bookingSingular : messages.list.bookingPlural,
+        }));
+    }
+    if (externalRefs > 0) {
+        parts.push(`${externalRefs} ${messages.list.external}`);
+    }
+    return parts.join(" · ");
+}
+function TripComponentSummary({ components, messages, }) {
+    const visibleComponents = components.slice(0, 2);
+    if (visibleComponents.length === 0) {
+        return (_jsx("p", { className: "max-w-64 truncate text-muted-foreground text-xs", children: messages.list.noComponents }));
+    }
+    return (_jsxs("p", { className: "max-w-64 truncate text-muted-foreground text-xs", children: [visibleComponents.map((component, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx(TripComponentName, { component: component })] }, component.id))), components.length > visibleComponents.length
+                ? ` +${components.length - visibleComponents.length}`
+                : ""] }));
+}
+function TripComponentName({ component }) {
+    return _jsx(_Fragment, { children: componentTitleFor(component) });
+}
+function tripScheduleBounds(components) {
+    let start = null;
+    let end = null;
+    for (const component of components) {
+        const schedule = readComponentSchedule(component);
+        if (schedule.start && (!start || new Date(schedule.start) < new Date(start))) {
+            start = schedule.start;
+        }
+        const candidateEnd = schedule.end ?? schedule.start;
+        if (candidateEnd && (!end || new Date(candidateEnd) > new Date(end))) {
+            end = candidateEnd;
+        }
+    }
+    return { start, end };
+}
+function parseAmountCents(value) {
+    if (value.trim() === "")
+        return null;
+    const parsed = Number.parseFloat(value);
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    return Math.round(parsed * 100);
+}
+function formatDate(value) {
+    if (!value)
+        return "-";
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "-";
+    return date.toLocaleDateString();
+}
+function formatMoney(amountCents, currency) {
+    if (amountCents == null)
+        return "-";
+    return (amountCents / 100).toLocaleString(undefined, {
+        style: "currency",
+        currency: currency ?? "EUR",
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/travel-composer-react",
-  "version": "0.105.7",
+  "version": "0.105.8",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -34,29 +34,85 @@
       "types": "./dist/query-keys.d.ts",
       "import": "./dist/query-keys.js",
       "default": "./dist/query-keys.js"
+    },
+    "./admin": {
+      "types": "./dist/admin/index.d.ts",
+      "import": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
     }
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.0.0",
-    "@voyantjs/travel-composer": "^0.105.7"
+    "@voyantjs/admin": "^0.110.0",
+    "@voyantjs/bookings-react": "^0.114.0",
+    "@voyantjs/catalog": "^0.112.0",
+    "@voyantjs/catalog-react": "^0.112.0",
+    "@voyantjs/crm-react": "^0.114.0",
+    "@voyantjs/finance": "^0.114.0",
+    "@voyantjs/flights": "^0.114.0",
+    "@voyantjs/flights-react": "^0.114.0",
+    "@voyantjs/travel-composer": "^0.105.8",
+    "@voyantjs/ui": "^0.106.0"
+  },
+  "peerDependenciesMeta": {
+    "@voyantjs/admin": {
+      "optional": true
+    },
+    "@voyantjs/bookings-react": {
+      "optional": true
+    },
+    "@voyantjs/catalog": {
+      "optional": true
+    },
+    "@voyantjs/catalog-react": {
+      "optional": true
+    },
+    "@voyantjs/crm-react": {
+      "optional": true
+    },
+    "@voyantjs/finance": {
+      "optional": true
+    },
+    "@voyantjs/flights": {
+      "optional": true
+    },
+    "@voyantjs/flights-react": {
+      "optional": true
+    },
+    "@voyantjs/ui": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.100.11",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "lucide-react": "^0.475.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
+    "@voyantjs/admin": "^0.110.0",
+    "@voyantjs/bookings-react": "^0.114.0",
+    "@voyantjs/catalog": "^0.112.0",
+    "@voyantjs/catalog-react": "^0.112.0",
+    "@voyantjs/crm-react": "^0.114.0",
+    "@voyantjs/finance": "^0.114.0",
+    "@voyantjs/flights": "^0.114.0",
+    "@voyantjs/flights-react": "^0.114.0",
+    "@voyantjs/i18n": "^0.106.0",
     "@voyantjs/react": "^0.104.1",
-    "@voyantjs/travel-composer": "^0.105.7",
+    "@voyantjs/travel-composer": "^0.105.8",
+    "@voyantjs/ui": "^0.106.0",
     "@voyantjs/voyant-typescript-config": "^0.1.0"
   },
   "dependencies": {
+    "@voyantjs/i18n": "^0.106.0",
     "@voyantjs/react": "^0.104.1"
   },
   "files": [