@voyantjs/distribution-ui 0.30.7 → 0.31.1

package/README.md

@@ -26,6 +26,14 @@ import { distributionUiRo } from "@voyantjs/distribution-ui/i18n/ro"
 English-only apps should import only `./i18n/en`. Bilingual apps can import
 `./i18n/en` and `./i18n/ro`.
 
+## Components
+
+- `DistributionPage`, `DistributionOverview`
+- `ChannelsPage`, `ChannelSyncPage`
+- `ChannelDetailPage`, `ContractDetailPage`, `CommissionRuleDetailPage`, `MappingDetailPage`, `BookingLinkDetailPage`, `WebhookEventDetailPage`
+- `DistributionChannelsTab`, `DistributionContractsTab`, `DistributionCommissionsTab`
+- `DistributionMappingsTab`, `DistributionBookingLinksTab`, `DistributionWebhooksTab`
+
 ## Not included (registry-only)
 
-Some components couple to TanStack Router or template-local helpers and remain available only via the shadcn registry: `booking-link-detail-page`, `channel-detail-page`, `commission-rule-detail-page`, `contract-detail-page`, `distribution-dialogs-commercial`, `distribution-dialogs-commission`, `distribution-dialogs-sync`, `distribution-dialogs-webhook`, `distribution-page`, `mapping-detail-page`, `webhook-event-detail-page`. Import via `npx shadcn add @voyant/<component>` and customize per-project.
+Some components couple to TanStack Router or template-local helpers and remain available only via the shadcn registry: `distribution-dialogs-commercial`, `distribution-dialogs-commission`, `distribution-dialogs-sync`, `distribution-dialogs-webhook`. Import via `npx shadcn add @voyant/<component>` and customize per-project.

package/dist/components/booking-link-detail-page.d.ts

@@ -0,0 +1,10 @@
+export interface BookingLinkDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onChannelOpen?: (channelId: string) => void;
+    onBookingOpen?: (bookingId: string) => void;
+}
+export declare function BookingLinkDetailPage({ id, className, onBack, onDeleted, onChannelOpen, onBookingOpen, }: BookingLinkDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-link-detail-page.d.ts.map

package/dist/components/booking-link-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-link-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/booking-link-detail-page.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAID,wBAAgB,qBAAqB,CAAC,EACpC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,aAAoB,EACpB,aAAoB,GACrB,EAAE,0BAA0B,2CAwI5B"}

package/dist/components/booking-link-detail-page.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { distributionQueryKeys, fetchWithValidation, getBookingLinkQueryOptions, getBookingQueryOptions, getChannelQueryOptions, successEnvelope, useVoyantDistributionContext, } from "@voyantjs/distribution-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, ReceiptText } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { formatDistributionDateTime } from "./distribution-shared.js";
+const noop = () => { };
+export function BookingLinkDetailPage({ id, className, onBack = noop, onDeleted = noop, onChannelOpen = noop, onBookingOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.bookingLink;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const linkQuery = useQuery({
+        ...getBookingLinkQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const link = linkQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, link?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(link?.channelId),
+    });
+    const bookingQuery = useQuery({
+        ...getBookingQueryOptions(client, link?.bookingId),
+        select: (result) => result.data,
+        enabled: Boolean(link?.bookingId),
+    });
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/booking-links/${id}`, successEnvelope, client, {
+            method: "DELETE",
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.bookingLinks() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.bookingLink(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (linkQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (!link) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    return (_jsxs("div", { "data-slot": "booking-link-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: detail.title }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: link.externalStatus ?? messages.common.unmappedStatus }), _jsx(Badge, { variant: "secondary", children: link.externalReference ?? messages.common.noReference })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => onChannelOpen(link.channelId), children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), detail.openChannel] }), _jsxs(Button, { variant: "outline", onClick: () => onBookingOpen(link.bookingId), children: [_jsx(ReceiptText, { className: "mr-2 h-4 w-4" }), detail.openBooking] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                                    await remove.mutateAsync();
+                                } })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? link.channelId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.bookingLabel, ":"] }), " ", _jsx("span", { children: bookingQuery.data?.bookingNumber ?? link.bookingId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalBooking, ":"] }), " ", _jsx("span", { children: link.externalBookingId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.reference, ":"] }), " ", _jsx("span", { children: link.externalReference ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.bookedAtExternal, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.bookedAtExternal, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.lastSynced, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.lastSyncedAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.updatedAt, i18n) })] })] })] })] }));
+}

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

@@ -0,0 +1,12 @@
+export interface ChannelDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onContractOpen?: (contractId: string) => void;
+    onMappingOpen?: (mappingId: string) => void;
+    onBookingLinkOpen?: (bookingLinkId: string) => void;
+    onWebhookEventOpen?: (webhookEventId: string) => void;
+}
+export declare function ChannelDetailPage({ id, className, onBack, onDeleted, onContractOpen, onMappingOpen, onBookingLinkOpen, onWebhookEventOpen, }: ChannelDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=channel-detail-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"channel-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/channel-detail-page.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;CACtD;AAID,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,cAAqB,EACrB,aAAoB,EACpB,iBAAwB,EACxB,kBAAyB,GAC1B,EAAE,sBAAsB,2CAmRxB"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingLinks, useBookings, useChannel, useChannelMutation, useContracts, useMappings, useProducts, useSuppliers, useWebhookEvents, } from "@voyantjs/distribution-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, Package, Webhook } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { formatDistributionDate, formatDistributionDateTime, getChannelKindLabel, getChannelStatusLabel, getContractStatusLabel, getPaymentOwnerLabel, } from "./distribution-shared.js";
+const noop = () => { };
+export function ChannelDetailPage({ id, className, onBack = noop, onDeleted = noop, onContractOpen = noop, onMappingOpen = noop, onBookingLinkOpen = noop, onWebhookEventOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.channel;
+    const channelQuery = useChannel(id);
+    const contractsQuery = useContracts({ channelId: id, limit: 25, offset: 0 });
+    const mappingsQuery = useMappings({ channelId: id, limit: 25, offset: 0 });
+    const bookingLinksQuery = useBookingLinks({ channelId: id, limit: 25, offset: 0 });
+    const webhookEventsQuery = useWebhookEvents({ channelId: id, limit: 25, offset: 0 });
+    const productsQuery = useProducts({ limit: 25, offset: 0 });
+    const bookingsQuery = useBookings({ limit: 25, offset: 0 });
+    const suppliersQuery = useSuppliers({ limit: 25, offset: 0 });
+    const { remove } = useChannelMutation();
+    if (channelQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    const channel = channelQuery.data;
+    if (!channel) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    const productsById = new Map((productsQuery.data?.data ?? []).map((product) => [product.id, product]));
+    const bookingsById = new Map((bookingsQuery.data?.data ?? []).map((booking) => [booking.id, booking]));
+    const suppliersById = new Map((suppliersQuery.data?.data ?? []).map((supplier) => [supplier.id, supplier]));
+    return (_jsxs("div", { "data-slot": "channel-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: channel.name }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: getChannelKindLabel(channel.kind, messages) }), _jsx(Badge, { variant: channel.status === "active" ? "default" : "secondary", children: getChannelStatusLabel(channel.status, messages) })] })] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                            await remove.mutateAsync(id);
+                            onDeleted();
+                            onBack();
+                        } })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.website, ":"] }), " ", _jsx("span", { children: channel.website ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.contactName, ":"] }), " ", _jsx("span", { children: channel.contactName ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.contactEmail, ":"] }), " ", _jsx("span", { children: channel.contactEmail ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(channel.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(channel.updatedAt, i18n) })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.metadata }) }), _jsx(CardContent, { className: "text-sm", children: channel.metadata ? (_jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-3 text-xs", children: JSON.stringify(channel.metadata, null, 2) })) : (_jsx("p", { className: "text-muted-foreground", children: detail.empty.metadata })) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Link2, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.contracts })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (contractsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.contracts })) : (contractsQuery.data?.data.map((contract) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onContractOpen(contract.id), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: getContractStatusLabel(contract.status, messages) }), _jsxs("span", { children: [formatDistributionDate(contract.startsAt, i18n), " -", " ", contract.endsAt
+                                                    ? formatDistributionDate(contract.endsAt, i18n)
+                                                    : messages.common.openEnded] })] }), _jsxs("div", { className: "mt-2 text-muted-foreground", children: [detail.labels.supplier, ":", " ", suppliersById.get(contract.supplierId ?? "")?.name ??
+                                            contract.supplierId ??
+                                            messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.payment, ": ", getPaymentOwnerLabel(contract.paymentOwner, messages), " - ", detail.labels.cancellation, ":", " ", messages.common.cancellationOwnerLabels[contract.cancellationOwner]] }), contract.settlementTerms ? (_jsx("div", { className: "mt-2 whitespace-pre-wrap", children: contract.settlementTerms })) : null, contract.notes ? (_jsx("div", { className: "mt-2 whitespace-pre-wrap", children: contract.notes })) : null] }, contract.id)))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.mappings })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (mappingsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.mappings })) : (mappingsQuery.data?.data.map((mapping) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onMappingOpen(mapping.id), children: [_jsx("div", { className: "font-medium", children: productsById.get(mapping.productId)?.name ?? mapping.productId }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.externalProduct, ": ", mapping.externalProductId] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.rate, ": ", mapping.externalRateId ?? messages.common.none, " - ", detail.labels.category, ": ", mapping.externalCategoryId ?? messages.common.none] }), _jsx("div", { className: "mt-2", children: _jsx(Badge, { variant: mapping.active ? "default" : "secondary", children: mapping.active ? messages.common.active : messages.common.inactive }) })] }, mapping.id)))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.bookingLinks }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (bookingLinksQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.bookingLinks })) : (bookingLinksQuery.data?.data.map((link) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onBookingLinkOpen(link.id), children: [_jsxs("div", { className: "font-medium", children: [detail.labels.booking, ":", " ", bookingsById.get(link.bookingId)?.bookingNumber ?? link.bookingId] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.externalBooking, ": ", link.externalBookingId ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.reference, ": ", link.externalReference ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.lastSynced, ": ", formatDistributionDateTime(link.lastSyncedAt, i18n)] })] }, link.id)))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Webhook, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.webhooks })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (webhookEventsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.webhooks })) : (webhookEventsQuery.data?.data.map((event) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onWebhookEventOpen(event.id), children: [_jsx("div", { className: "font-medium", children: event.eventType }), _jsxs("div", { className: "text-muted-foreground", children: [messages.common.received, ": ", formatDistributionDateTime(event.receivedAt, i18n)] }), _jsx("div", { className: "mt-2", children: _jsx(Badge, { variant: "outline", children: messages.common.webhookStatusLabels[event.status] }) })] }, event.id)))) })] })] }));
+}

package/dist/components/channel-sync-page.d.ts

@@ -0,0 +1,8 @@
+import { type VoyantFetcher } from "@voyantjs/distribution-react";
+export interface ChannelSyncPageProps {
+    baseUrl?: string;
+    fetcher?: VoyantFetcher;
+    className?: string;
+}
+export declare function ChannelSyncPage({ baseUrl, fetcher, className }?: ChannelSyncPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=channel-sync-page.d.ts.map

package/dist/components/channel-sync-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channel-sync-page.d.ts","sourceRoot":"","sources":["../../src/components/channel-sync-page.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAA;AA8HrC,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8DD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAE,oBAAyB,2CAiWzF"}

package/dist/components/channel-sync-page.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { defaultFetcher, useVoyantDistributionContext, } from "@voyantjs/distribution-react";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Label, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@voyantjs/ui/components/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { AlertTriangle, ChevronDown, Loader2, RotateCw, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+// Fetch helpers
+async function fetchJson(path, options, init) {
+    const res = await options.fetcher(joinUrl(options.baseUrl, path), {
+        ...init,
+        headers: {
+            "Content-Type": "application/json",
+            ...init?.headers,
+        },
+    });
+    const text = await res.text();
+    const body = text
+        ? JSON.parse(text)
+        : {};
+    if (!res.ok) {
+        throw new Error(body.error ?? `Request failed: ${res.status}`);
+    }
+    return body;
+}
+const STATUS_VARIANTS = {
+    pending: "secondary",
+    ok: "default",
+    failed: "destructive",
+    compensated: "outline",
+};
+const STATUS_LABELS = {
+    pending: "Pending",
+    ok: "OK",
+    failed: "Failed",
+    compensated: "Compensated",
+};
+const STATUS_TILES = [
+    { key: "pending", label: "Pending", description: "In flight", tone: "secondary" },
+    { key: "ok", label: "Delivered", description: "Channel acknowledged", tone: "default" },
+    { key: "failed", label: "Failed", description: "Needs attention", tone: "destructive" },
+    {
+        key: "compensated",
+        label: "Compensated",
+        description: "Rolled back",
+        tone: "outline",
+    },
+];
+const LINKS_REFETCH_MS = 15_000;
+const THROTTLING_REFETCH_MS = 60_000;
+// Page
+export function ChannelSyncPage({ baseUrl, fetcher, className } = {}) {
+    const context = useVoyantDistributionContext();
+    const client = {
+        baseUrl: baseUrl ?? context.baseUrl,
+        fetcher: fetcher ?? context.fetcher ?? defaultFetcher,
+    };
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [bookingId, setBookingId] = useState(null);
+    const [bookingSearch, setBookingSearch] = useState("");
+    const [selectedBooking, setSelectedBooking] = useState(null);
+    const [channelId, setChannelId] = useState(null);
+    const [selectedChannel, setSelectedChannel] = useState(null);
+    const [drilldownBookingId, setDrilldownBookingId] = useState(null);
+    const queryClient = useQueryClient();
+    const linksQuery = useQuery({
+        queryKey: ["channel-push-links", statusFilter, bookingId, channelId],
+        queryFn: () => {
+            const params = new URLSearchParams({ limit: "100" });
+            if (statusFilter !== "all")
+                params.set("status", statusFilter);
+            if (bookingId)
+                params.set("bookingId", bookingId);
+            if (channelId)
+                params.set("channelId", channelId);
+            return fetchJson(`/v1/admin/distribution/channel-push/links?${params}`, client);
+        },
+        refetchInterval: LINKS_REFETCH_MS,
+        refetchIntervalInBackground: false,
+    });
+    const throttlingQuery = useQuery({
+        queryKey: ["channel-push-throttling"],
+        queryFn: () => fetchJson("/v1/admin/distribution/channel-push/throttling", client),
+        refetchInterval: THROTTLING_REFETCH_MS,
+    });
+    const debouncedBookingSearch = useDebouncedValue(bookingSearch, 200);
+    const bookingsQuery = useQuery({
+        queryKey: ["channel-sync-booking-options", debouncedBookingSearch],
+        queryFn: () => {
+            const params = new URLSearchParams({ limit: "20" });
+            if (debouncedBookingSearch.trim())
+                params.set("search", debouncedBookingSearch.trim());
+            return fetchJson(`/v1/admin/bookings?${params}`, client);
+        },
+        placeholderData: (prev) => prev,
+    });
+    const channelsQuery = useQuery({
+        queryKey: ["channel-sync-channel-options"],
+        queryFn: () => fetchJson(`/v1/admin/distribution/channels?limit=100`, client),
+        staleTime: 60_000,
+    });
+    const retryMutation = useMutation({
+        mutationFn: (id) => fetchJson(`/v1/admin/distribution/channel-push/retry/${id}`, client, { method: "POST" }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["channel-push-links"] });
+        },
+    });
+    const reconcileMutation = useMutation({
+        mutationFn: (flow) => fetchJson(`/v1/admin/distribution/channel-push/reconcile/${flow}`, client, {
+            method: "POST",
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["channel-push-links"] });
+        },
+    });
+    const counts = linksQuery.data?.counts ?? {};
+    const rows = linksQuery.data?.data ?? [];
+    const throttledChannels = throttlingQuery.data?.data ?? [];
+    const isThrottled = throttledChannels.length > 0;
+    const filtersActive = statusFilter !== "all" || bookingId !== null || channelId !== null;
+    const clearFilters = () => {
+        setStatusFilter("all");
+        setBookingId(null);
+        setBookingSearch("");
+        setSelectedBooking(null);
+        setChannelId(null);
+        setSelectedChannel(null);
+    };
+    const bookingOptions = bookingsQuery.data?.data ?? [];
+    const channelOptions = channelsQuery.data?.data ?? [];
+    return (_jsxs("div", { "data-slot": "channel-sync-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: "Channel sync" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Outbound delivery to syndication channels. Bookings push first; availability and content ride along in the background." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(AutoRefreshIndicator, { isFetching: linksQuery.isFetching, dataUpdatedAt: linksQuery.dataUpdatedAt, intervalMs: LINKS_REFETCH_MS }), _jsx(ReconcileMenu, { onRun: (flow) => reconcileMutation.mutate(flow), isRunning: reconcileMutation.isPending, lastResult: reconcileMutation.data ?? null })] })] }), isThrottled ? (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Throttled." }), " ", _jsxs("span", { children: [throttledChannels.reduce((sum, c) => sum + c.count, 0), " rate-limited deliveries in the last hour across ", throttledChannels.length, " channel", throttledChannels.length === 1 ? "" : "s", ". Lower the per-channel RPS in settings if this persists."] })] })] })) : null, _jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: STATUS_TILES.map((tile) => {
+                    const isActive = statusFilter === tile.key;
+                    const value = counts[tile.key] ?? 0;
+                    return (_jsxs("button", { type: "button", onClick: () => setStatusFilter(isActive ? "all" : tile.key), className: cn("group rounded-lg border bg-card p-4 text-left transition-all", "hover:border-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive && "border-primary ring-2 ring-primary/30"), "aria-pressed": isActive, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: tile.label }), tile.key === "failed" && value > 0 ? (_jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-destructive" })) : null] }), _jsx("div", { className: "mt-1 text-3xl font-semibold tabular-nums", children: value }), _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: tile.description })] }, tile.key));
+                }) }), _jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-end", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "cs-booking", className: "text-xs", children: "Booking" }), _jsx(AsyncCombobox, { value: bookingId, onChange: (value) => {
+                                    setBookingId(value);
+                                    if (!value)
+                                        setSelectedBooking(null);
+                                    else {
+                                        const match = bookingOptions.find((b) => b.id === value);
+                                        if (match)
+                                            setSelectedBooking(match);
+                                    }
+                                }, items: bookingOptions, selectedItem: selectedBooking, getKey: (b) => b.id, getLabel: (b) => b.bookingNumber, getSecondary: (b) => b.status, onSearchChange: setBookingSearch, placeholder: "Search by booking number...", emptyText: bookingsQuery.isFetching ? "Searching..." : "No bookings match that search.", triggerClassName: "w-full" })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "cs-channel", className: "text-xs", children: "Channel" }), _jsx(AsyncCombobox, { value: channelId, onChange: (value) => {
+                                    setChannelId(value);
+                                    if (!value)
+                                        setSelectedChannel(null);
+                                    else {
+                                        const match = channelOptions.find((c) => c.id === value);
+                                        if (match)
+                                            setSelectedChannel(match);
+                                    }
+                                }, items: channelOptions, selectedItem: selectedChannel, getKey: (c) => c.id, getLabel: (c) => c.name, getSecondary: (c) => formatChannelKind(c.kind), placeholder: "Pick a channel...", emptyText: "No channels configured yet.", triggerClassName: "w-full" })] }), filtersActive ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1.5 h-3.5 w-3.5" }), "Clear filters"] })) : null] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-sm", children: "Booking links" }), _jsx(CardDescription, { children: filtersActive
+                                    ? `Showing ${rows.length} of the most recent matching pushes.`
+                                    : "The most recent per-channel push attempts." })] }), _jsx(CardContent, { className: "p-0", children: linksQuery.isPending ? (_jsx("div", { className: "flex items-center justify-center p-12", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })) : rows.length === 0 ? (_jsx(Empty, { className: "border-0", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: filtersActive ? "No matches" : "No links yet" }), _jsx(EmptyDescription, { children: filtersActive
+                                            ? "Try clearing the filters or picking a different booking or channel."
+                                            : "Channel-push booking links show up here as bookings confirm. The page refreshes automatically." })] }) })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Booking" }), _jsx(TableHead, { children: "Channel" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "text-right", children: "Attempts" }), _jsx(TableHead, { children: "Last push" }), _jsx(TableHead, { children: "External ref" }), _jsx(TableHead, { className: "text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: rows.map((row) => {
+                                        const isFailed = row.link.pushStatus === "failed";
+                                        return (_jsxs(TableRow, { className: cn(isFailed && "bg-destructive/5 hover:bg-destructive/10"), children: [_jsxs(TableCell, { className: "font-mono text-xs", children: [_jsx("div", { children: row.link.bookingId }), row.link.bookingItemId ? (_jsxs("div", { className: "text-muted-foreground", children: ["item: ", row.link.bookingItemId] })) : null] }), _jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: row.channelName }), _jsx("div", { className: "text-xs text-muted-foreground", children: formatChannelKind(row.channelKind) })] }), _jsxs(TableCell, { children: [_jsx(Badge, { variant: STATUS_VARIANTS[row.link.pushStatus] ?? "outline", children: STATUS_LABELS[row.link.pushStatus] ?? row.link.pushStatus }), row.link.lastError ? (_jsx("div", { className: "mt-1 max-w-xs truncate text-xs text-destructive", title: row.link.lastError, children: row.link.lastError })) : null] }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.link.pushAttempts }), _jsx(TableCell, { className: "text-xs text-muted-foreground", children: row.link.lastPushAt ? formatRelative(row.link.lastPushAt) : "-" }), _jsx(TableCell, { className: "font-mono text-xs", children: row.link.externalBookingId ?? row.link.externalReference ?? "-" }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDrilldownBookingId(row.link.bookingId), children: "Deliveries" }), _jsxs(Button, { variant: "outline", size: "sm", disabled: retryMutation.isPending &&
+                                                                    retryMutation.variables === row.link.bookingId, onClick: () => retryMutation.mutate(row.link.bookingId), children: [retryMutation.isPending &&
+                                                                        retryMutation.variables === row.link.bookingId ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : null, "Retry"] })] }) })] }, row.link.id));
+                                    }) })] })) })] }), _jsx(DeliveriesDrawer, { bookingId: drilldownBookingId, client: client, onClose: () => setDrilldownBookingId(null) })] }));
+}
+function ReconcileMenu({ onRun, isRunning, lastResult, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "outline", size: "sm", disabled: isRunning, children: [isRunning ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(RotateCw, { className: "mr-1.5 h-3.5 w-3.5" })), "Reconcile", _jsx(ChevronDown, { className: "ml-1.5 h-3.5 w-3.5" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Run reconciler" }), _jsxs(DropdownMenuItem, { onClick: () => onRun("bookings"), children: ["Bookings", _jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "priority" })] }), _jsx(DropdownMenuItem, { onClick: () => onRun("availability"), children: "Availability" }), _jsx(DropdownMenuItem, { onClick: () => onRun("content"), children: "Content" })] }), lastResult ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: ["Last run: scanned ", lastResult.scanned, ", triggered ", lastResult.triggered, "."] })] })) : null] })] }));
+}
+function AutoRefreshIndicator({ isFetching, dataUpdatedAt, intervalMs, }) {
+    // Tick every second so the "Updated Xs ago" stays current.
+    const [, setNow] = useState(Date.now());
+    useEffect(() => {
+        const id = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(id);
+    }, []);
+    if (!dataUpdatedAt) {
+        return (_jsxs("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground md:flex", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Loading..."] }));
+    }
+    const seconds = Math.max(0, Math.round((Date.now() - dataUpdatedAt) / 1000));
+    const intervalSec = Math.round(intervalMs / 1000);
+    return (_jsxs("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground md:flex", title: `Auto-refreshes every ${intervalSec}s`, children: [isFetching ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsxs("span", { className: "relative flex h-2 w-2", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" }), _jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })] })), _jsx("span", { className: "tabular-nums", children: isFetching ? "Refreshing..." : `Updated ${formatShortDuration(seconds)} ago` })] }));
+}
+function useDebouncedValue(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setDebounced(value), delayMs);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [value, delayMs]);
+    return debounced;
+}
+function DeliveriesDrawer({ bookingId, client, onClose, }) {
+    const isOpen = bookingId !== null;
+    const query = useQuery({
+        enabled: isOpen,
+        queryKey: ["channel-push-deliveries", bookingId],
+        queryFn: () => {
+            const params = new URLSearchParams({ bookingId: bookingId ?? "", limit: "200" });
+            return fetchJson(`/v1/admin/distribution/channel-push/deliveries?${params}`, client);
+        },
+    });
+    const rows = query.data?.data ?? [];
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: (open) => (open ? null : onClose()), children: _jsxs(SheetContent, { side: "right", size: "xl", children: [_jsx(SheetHeader, { children: _jsxs(SheetTitle, { children: ["Delivery log - ", bookingId ?? ""] }) }), _jsx(SheetBody, { className: "flex flex-col gap-3", children: query.isPending ? (_jsx("div", { className: "flex items-center justify-center p-12", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })) : rows.length === 0 ? (_jsx(Empty, { children: _jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: "No deliveries yet" }), _jsx(EmptyDescription, { children: "Channel-push attempts log here once they dispatch." })] }) })) : (rows.map((row) => (_jsxs(Card, { className: "text-xs", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: row.status === "succeeded" ? "default" : "destructive", children: row.status }), _jsx("span", { className: "font-mono", children: row.sourceEvent }), _jsxs("span", { className: "text-muted-foreground", children: ["attempt #", row.attemptNumber] })] }), _jsx("span", { className: "text-muted-foreground", children: row.durationMs != null ? `${row.durationMs}ms` : "" })] }), _jsxs(CardDescription, { className: "font-mono", children: [row.requestMethod, " ", row.targetUrl] })] }), _jsxs(CardContent, { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [row.responseStatus != null ? (_jsxs(Badge, { variant: "outline", children: ["HTTP ", row.responseStatus] })) : null, row.errorClass ? _jsx(Badge, { variant: "destructive", children: row.errorClass }) : null, _jsx("span", { className: "text-muted-foreground", children: formatRelative(row.createdAt) })] }), row.errorMessage ? (_jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded bg-destructive/10 p-2 text-destructive", children: row.errorMessage })) : null, row.responseBodyExcerpt ? (_jsx("pre", { className: "overflow-x-auto rounded bg-muted p-2", children: row.responseBodyExcerpt })) : null] })] }, row.id)))) })] }) }));
+}
+function joinUrl(baseUrl, path) {
+    const trimmedBase = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    const trimmedPath = path.startsWith("/") ? path : `/${path}`;
+    return `${trimmedBase}${trimmedPath}`;
+}
+function formatChannelKind(kind) {
+    return kind.replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
+}
+function formatShortDuration(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    const min = Math.round(seconds / 60);
+    if (min < 60)
+        return `${min}m`;
+    const hours = Math.round(min / 60);
+    return `${hours}h`;
+}
+function formatRelative(iso) {
+    const date = new Date(iso);
+    const diffMs = Date.now() - date.getTime();
+    const sec = Math.round(diffMs / 1000);
+    if (sec < 60)
+        return `${sec}s ago`;
+    const min = Math.round(sec / 60);
+    if (min < 60)
+        return `${min}m ago`;
+    const hours = Math.round(min / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.round(hours / 24);
+    return `${days}d ago`;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"channels-page.d.ts","sourceRoot":"","sources":["../../src/components/channels-page.tsx"],"names":[],"mappings":"AAiDA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAWD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAoB,EAAE,GAAE,iBAAsB,2CAgJvF"}

package/dist/components/channels-page.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChannelMutation, useChannels, } from "@voyantjs/distribution-react";
+import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Loader2, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+const PAGE_SIZE = 25;
+const defaultFormValues = {
+    name: "",
+    kind: "direct",
+    status: "active",
+    website: "",
+    contactName: "",
+    contactEmail: "",
+};
+export function ChannelsPage({ className, pageSize = PAGE_SIZE } = {}) {
+    const { messages } = useDistributionUiI18nOrDefault();
+    const page = messages.settings.channelsPage;
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    const [pageIndex, setPageIndex] = useState(0);
+    const { data, isPending, refetch } = useChannels({
+        limit: pageSize,
+        offset: pageIndex * pageSize,
+    });
+    const { remove } = useChannelMutation();
+    const channels = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    return (_jsxs("div", { "data-slot": "channels-page", className: cn("flex flex-col gap-6 p-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: page.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: page.description })] }), _jsxs(Button, { size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setSheetOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }), page.addChannel] })] }), isPending ? (_jsx(ChannelsListSkeleton, {})) : (_jsx("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: channels.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-muted-foreground", children: page.empty })) : (_jsx("div", { className: "flex flex-col divide-y", children: channels.map((channel) => (_jsxs("div", { className: "flex items-center justify-between 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: channel.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: messages.common.channelKindLabels[channel.kind] }), channel.status !== "active" ? (_jsx(Badge, { variant: "secondary", className: "text-xs", children: messages.common.channelStatusLabels[channel.status] })) : null] }), _jsxs("div", { className: "flex flex-wrap gap-3 text-xs text-muted-foreground", children: [channel.website ? _jsx("span", { children: channel.website }) : null, channel.contactName ? _jsx("span", { children: channel.contactName }) : null, channel.contactEmail ? _jsx("span", { children: channel.contactEmail }) : null] })] }), _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" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
+                                                    setEditing(channel);
+                                                    setSheetOpen(true);
+                                                }, children: [_jsx(Pencil, { className: "h-4 w-4" }), page.edit] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: remove.isPending, onClick: () => {
+                                                    if (window.confirm(page.deleteConfirm)) {
+                                                        void remove.mutateAsync(channel.id).then(() => refetch());
+                                                    }
+                                                }, children: [_jsx(Trash2, { className: "h-4 w-4" }), page.delete] })] })] })] }, channel.id))) })) })), _jsxs("div", { className: "flex items-center justify-between gap-4 text-sm text-muted-foreground", children: [_jsx("span", { children: page.paginationShowing
+                            .replace("{count}", String(channels.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: page.paginationPrevious }), _jsx("span", { children: page.paginationPage
+                                    .replace("{page}", String(pageIndex + 1))
+                                    .replace("{pageCount}", String(pageCount)) }), _jsx(Button, { variant: "outline", size: "sm", disabled: (pageIndex + 1) * pageSize >= total, onClick: () => setPageIndex((current) => current + 1), children: page.paginationNext })] })] }), _jsx(ChannelSheet, { open: sheetOpen, onOpenChange: setSheetOpen, channel: editing, onSuccess: () => {
+                    setSheetOpen(false);
+                    setEditing(undefined);
+                    void refetch();
+                } })] }));
+}
+function ChannelSheet({ open, onOpenChange, channel, onSuccess, }) {
+    const { messages } = useDistributionUiI18nOrDefault();
+    const page = messages.settings.channelsPage;
+    const isEditing = !!channel;
+    const { create, update } = useChannelMutation();
+    const [values, setValues] = useState(defaultFormValues);
+    const [errors, setErrors] = useState({});
+    const channelKinds = Object.entries(messages.common.channelKindLabels).map(([value, label]) => ({
+        value: value,
+        label,
+    }));
+    useEffect(() => {
+        if (open && channel) {
+            setValues({
+                name: channel.name,
+                kind: channel.kind,
+                status: channel.status,
+                website: channel.website ?? "",
+                contactName: channel.contactName ?? "",
+                contactEmail: channel.contactEmail ?? "",
+            });
+            setErrors({});
+        }
+        else if (open) {
+            setValues(defaultFormValues);
+            setErrors({});
+        }
+    }, [open, channel]);
+    const isSubmitting = create.isPending || update.isPending;
+    const setValue = (key, value) => setValues((current) => ({ ...current, [key]: value }));
+    const onSubmit = async (event) => {
+        event.preventDefault();
+        const nextErrors = validateChannelForm(values, page);
+        setErrors(nextErrors);
+        if (Object.keys(nextErrors).length > 0)
+            return;
+        const payload = {
+            name: values.name.trim(),
+            kind: values.kind,
+            status: values.status,
+            website: normalizeOptional(values.website),
+            contactName: normalizeOptional(values.contactName),
+            contactEmail: normalizeOptional(values.contactEmail),
+        };
+        if (isEditing) {
+            await update.mutateAsync({ id: channel.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: isEditing ? page.editSheetTitle : page.newSheetTitle }) }), _jsxs("form", { onSubmit: onSubmit, className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(SheetBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.nameLabel }), _jsx(Input, { value: values.name, onChange: (event) => setValue("name", event.target.value), placeholder: page.namePlaceholder, autoFocus: true }), errors.name ? _jsx("p", { className: "text-xs text-destructive", children: errors.name }) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.kindLabel }), _jsxs(Select, { items: channelKinds, value: values.kind, onValueChange: (value) => setValue("kind", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: channelKinds.map((kind) => (_jsx(SelectItem, { value: kind.value, children: kind.label }, kind.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.statusLabel }), _jsxs(Select, { value: values.status, onValueChange: (value) => setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.entries(messages.common.channelStatusLabels).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.websiteLabel }), _jsx(Input, { value: values.website, onChange: (event) => setValue("website", event.target.value), placeholder: page.websitePlaceholder }), errors.website ? _jsx("p", { className: "text-xs text-destructive", children: errors.website }) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.primaryContactLabel }), _jsx(Input, { value: values.contactName, onChange: (event) => setValue("contactName", event.target.value), placeholder: page.primaryContactPlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: page.contactEmailLabel }), _jsx(Input, { value: values.contactEmail, onChange: (event) => setValue("contactEmail", event.target.value), placeholder: page.contactEmailPlaceholder }), errors.contactEmail ? (_jsx("p", { className: "text-xs text-destructive", children: errors.contactEmail })) : null] })] })] }), _jsxs(SheetFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? page.saveChanges : page.createChannel] })] })] })] }) }));
+}
+function ChannelsListSkeleton() {
+    const rows = ["first", "second", "third", "fourth", "fifth"];
+    return (_jsx("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: rows.map((row) => (_jsxs("div", { className: "flex items-center justify-between border-b px-6 py-3 last:border-b-0", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 w-44 rounded bg-muted" }), _jsx("div", { className: "h-3 w-64 rounded bg-muted" })] }), _jsx("div", { className: "h-8 w-8 rounded bg-muted" })] }, row))) }));
+}
+function validateChannelForm(values, page) {
+    const errors = {};
+    if (!values.name.trim())
+        errors.name = page.validationNameRequired;
+    if (values.name.length > 255)
+        errors.name = page.validationNameRequired;
+    if (values.website.trim()) {
+        try {
+            new URL(values.website.trim());
+        }
+        catch {
+            errors.website = page.validationInvalidUrl;
+        }
+    }
+    if (values.contactEmail.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.contactEmail)) {
+        errors.contactEmail = page.validationInvalidEmail;
+    }
+    return errors;
+}
+function normalizeOptional(value) {
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+}

package/dist/components/commission-rule-detail-page.d.ts

@@ -0,0 +1,10 @@
+export interface CommissionRuleDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onContractOpen?: (contractId: string) => void;
+    onProductOpen?: (productId: string) => void;
+}
+export declare function CommissionRuleDetailPage({ id, className, onBack, onDeleted, onContractOpen, onProductOpen, }: CommissionRuleDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=commission-rule-detail-page.d.ts.map

package/dist/components/commission-rule-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commission-rule-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/commission-rule-detail-page.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,6BAA6B;IAC5C,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAID,wBAAgB,wBAAwB,CAAC,EACvC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,cAAqB,EACrB,aAAoB,GACrB,EAAE,6BAA6B,2CAgK/B"}