@voyantjs/distribution-react 0.106.0 → 0.107.0

package/dist/components/channels-page.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+import { useChannelMutation, useChannels, } from "../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":"AAyBA,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"}

package/dist/components/commission-rule-detail-page.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, DollarSign, Loader2, Package } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { distributionQueryKeys, fetchWithValidation, getChannelQueryOptions, getCommissionRuleQueryOptions, getContractQueryOptions, getProductQueryOptions, successEnvelope, useVoyantDistributionContext, } from "../index.js";
+import { formatDistributionDate, formatDistributionDateTime } from "./distribution-shared.js";
+const noop = () => { };
+export function CommissionRuleDetailPage({ id, className, onBack = noop, onDeleted = noop, onContractOpen = noop, onProductOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.commissionRule;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const ruleQuery = useQuery({
+        ...getCommissionRuleQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const rule = ruleQuery.data;
+    const contractQuery = useQuery({
+        ...getContractQueryOptions(client, rule?.contractId),
+        select: (result) => result.data,
+        enabled: Boolean(rule?.contractId),
+    });
+    const contract = contractQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, contract?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(contract?.channelId),
+    });
+    const productQuery = useQuery({
+        ...getProductQueryOptions(client, rule?.productId),
+        select: (result) => result.data,
+        enabled: Boolean(rule?.productId),
+    });
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/commission-rules/${id}`, successEnvelope, client, {
+            method: "DELETE", // i18n-literal-ok HTTP method
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.commissionRules() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.commissionRule(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (ruleQuery.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 (!rule) {
+        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": "commission-rule-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: messages.common.commissionScopeLabels[rule.scope] }), _jsx(Badge, { variant: "secondary", children: messages.common.commissionTypeLabels[rule.commissionType] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => onContractOpen(rule.contractId), children: [_jsx(DollarSign, { className: "mr-2 h-4 w-4" }), detail.openContract] }), rule.productId ? (_jsxs(Button, { variant: "outline", onClick: () => onProductOpen(rule.productId), children: [_jsx(Package, { className: "mr-2 h-4 w-4" }), detail.openProduct] })) : null, _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.contractLabel, ":"] }), " ", _jsx("span", { children: contract?.id ?? rule.contractId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? contract?.channelId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.productLabel, ":"] }), " ", _jsx("span", { children: productQuery.data?.name ?? rule.productId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.amount, ":"] }), " ", _jsx("span", { children: rule.amountCents ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.basisPoints, ":"] }), " ", _jsx("span", { children: rule.percentBasisPoints ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalRate, ":"] }), " ", _jsx("span", { children: rule.externalRateId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalCategory, ":"] }), " ", _jsx("span", { children: rule.externalCategoryId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.valid, ":"] }), " ", _jsxs("span", { children: [rule.validFrom ? formatDistributionDate(rule.validFrom, i18n) : messages.common.none, " to ", rule.validTo ? formatDistributionDate(rule.validTo, i18n) : messages.common.none] })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(rule.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(rule.updatedAt, i18n) })] })] })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"contract-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/contract-detail-page.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,uBAAuB;IACtC,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,oBAAoB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1D;AAID,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,aAAoB,EACpB,oBAA2B,GAC5B,EAAE,uBAAuB,2CAqNzB"}

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, DollarSign, Loader2 } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { distributionQueryKeys, fetchWithValidation, getChannelQueryOptions, getCommissionRulesQueryOptions, getContractQueryOptions, getProductsQueryOptions, getSupplierQueryOptions, successEnvelope, useVoyantDistributionContext, } from "../index.js";
+import { formatDistributionDate, formatDistributionDateTime, getContractStatusLabel, getPaymentOwnerLabel, } from "./distribution-shared.js";
+const noop = () => { };
+export function ContractDetailPage({ id, className, onBack = noop, onDeleted = noop, onChannelOpen = noop, onCommissionRuleOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.contract;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const contractQuery = useQuery({
+        ...getContractQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const contract = contractQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, contract?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(contract?.channelId),
+    });
+    const supplierQuery = useQuery({
+        ...getSupplierQueryOptions(client, contract?.supplierId),
+        select: (result) => result.data,
+        enabled: Boolean(contract?.supplierId),
+    });
+    const commissionRulesQuery = useQuery({
+        ...getCommissionRulesQueryOptions(client, { contractId: id }),
+        enabled: Boolean(id),
+    });
+    const productsQuery = useQuery(getProductsQueryOptions(client, { limit: 50, offset: 0 }));
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/contracts/${id}`, successEnvelope, client, {
+            method: "DELETE", // i18n-literal-ok HTTP method
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.contracts() });
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.commissionRules() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.contract(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (contractQuery.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 (!contract) {
+        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]));
+    return (_jsxs("div", { "data-slot": "contract-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: getContractStatusLabel(contract.status, messages) }), _jsx(Badge, { variant: "secondary", children: formatDistributionDate(contract.startsAt, i18n) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => onChannelOpen(contract.channelId), children: detail.openChannel }), _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("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: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? contract.channelId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.supplier, ":"] }), " ", _jsx("span", { children: supplierQuery.data?.name ?? contract.supplierId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.endsAt, ":"] }), " ", _jsx("span", { children: contract.endsAt
+                                                    ? formatDistributionDate(contract.endsAt, i18n)
+                                                    : messages.common.openEnded })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.paymentOwner, ":"] }), " ", _jsx("span", { children: getPaymentOwnerLabel(contract.paymentOwner, messages) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.cancellationOwner, ":"] }), " ", _jsx("span", { children: messages.common.cancellationOwnerLabels[contract.cancellationOwner] })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(contract.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(contract.updatedAt, i18n) })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.notes }) }), _jsxs(CardContent, { className: "grid gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-muted-foreground", children: detail.labels.settlementTerms }), _jsx("div", { className: "whitespace-pre-wrap", children: contract.settlementTerms ?? messages.common.none })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-muted-foreground", children: detail.labels.notes }), _jsx("div", { className: "whitespace-pre-wrap", children: contract.notes ?? messages.common.none })] })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(DollarSign, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.commissionRules })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (commissionRulesQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.commissionRules })) : (commissionRulesQuery.data?.data.map((rule) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onCommissionRuleOpen(rule.id), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: messages.common.commissionScopeLabels[rule.scope] }), _jsx(Badge, { variant: "secondary", children: messages.common.commissionTypeLabels[rule.commissionType] })] }), _jsxs("div", { className: "mt-2 text-muted-foreground", children: [messages.common.productLabel, ":", " ", productsById.get(rule.productId ?? "")?.name ??
+                                            rule.productId ??
+                                            messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.amount, ": ", rule.amountCents ?? messages.common.none, " - ", detail.labels.basisPoints, ": ", rule.percentBasisPoints ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.rate, ": ", rule.externalRateId ?? messages.common.none, " - ", detail.labels.category, ": ", rule.externalCategoryId ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.valid, ":", " ", rule.validFrom
+                                            ? formatDistributionDate(rule.validFrom, i18n)
+                                            : messages.common.none, " to ", rule.validTo ? formatDistributionDate(rule.validTo, i18n) : messages.common.none] })] }, rule.id)))) })] })] }));
+}

package/dist/components/distribution-overview.d.ts

@@ -0,0 +1,19 @@
+import type { ChannelContractRow, ChannelProductMappingRow, ChannelRow, ChannelWebhookEventRow, SupplierOption } from "./distribution-shared.js";
+export declare function DistributionOverview({ channels, suppliers, filteredChannels, filteredContracts, filteredMappings, syncQueue, contractsNeedingReview, search, setSearch, channelFilter, setChannelFilter, hasFilters, onClearFilters, onOpenWebhookEvent, onOpenContract, }: {
+    channels: ChannelRow[];
+    suppliers: SupplierOption[];
+    filteredChannels: ChannelRow[];
+    filteredContracts: ChannelContractRow[];
+    filteredMappings: ChannelProductMappingRow[];
+    syncQueue: ChannelWebhookEventRow[];
+    contractsNeedingReview: ChannelContractRow[];
+    search: string;
+    setSearch: (value: string) => void;
+    channelFilter: string;
+    setChannelFilter: (value: string) => void;
+    hasFilters: boolean;
+    onClearFilters: () => void;
+    onOpenWebhookEvent: (eventId: string) => void;
+    onOpenContract: (contractId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=distribution-overview.d.ts.map

package/dist/components/distribution-overview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-overview.d.ts","sourceRoot":"","sources":["../../src/components/distribution-overview.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACxB,UAAU,EACV,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAA;AASjC,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,sBAAsB,EACtB,MAAM,EACN,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,UAAU,EAAE,CAAA;IACtB,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,gBAAgB,EAAE,UAAU,EAAE,CAAA;IAC9B,iBAAiB,EAAE,kBAAkB,EAAE,CAAA;IACvC,gBAAgB,EAAE,wBAAwB,EAAE,CAAA;IAC5C,SAAS,EAAE,sBAAsB,EAAE,CAAA;IACnC,sBAAsB,EAAE,kBAAkB,EAAE,CAAA;IAC5C,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,kBAAkB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C,2CAoIA"}

package/dist/components/distribution-overview.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, OverviewMetric, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { DollarSign, ExternalLink, Link2, Search, Webhook } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { formatDistributionDate, formatDistributionDateTime, getContractStatusLabel, getWebhookStatusLabel, labelById, } from "./distribution-shared.js";
+export function DistributionOverview({ channels, suppliers, filteredChannels, filteredContracts, filteredMappings, syncQueue, contractsNeedingReview, search, setSearch, channelFilter, setChannelFilter, hasFilters, onClearFilters, onOpenWebhookEvent, onOpenContract, }) {
+    const activeChannelsCount = filteredChannels.filter((channel) => channel.status === "active").length;
+    const activeContractsCount = filteredContracts.filter((contract) => contract.status === "active").length;
+    const activeMappingsCount = filteredMappings.filter((mapping) => mapping.active).length;
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(OverviewMetric, { title: messages.overview.metrics.activeChannels.title, value: activeChannelsCount, description: messages.overview.metrics.activeChannels.description, icon: Link2 }), _jsx(OverviewMetric, { title: messages.overview.metrics.activeContracts.title, value: activeContractsCount, description: messages.overview.metrics.activeContracts.description, icon: DollarSign }), _jsx(OverviewMetric, { title: messages.overview.metrics.activeMappings.title, value: activeMappingsCount, description: messages.overview.metrics.activeMappings.description, icon: ExternalLink }), _jsx(OverviewMetric, { title: messages.overview.metrics.syncQueue.title, value: syncQueue.length, description: messages.overview.metrics.syncQueue.description, icon: Webhook })] }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-2", children: [_jsxs(Card, { size: "sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.overview.webhookQueue.title }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: syncQueue.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: messages.overview.webhookQueue.empty })) : (syncQueue.slice(0, 4).map((event) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onOpenWebhookEvent(event.id), children: [_jsxs("div", { className: "font-medium", children: [labelById(channels, event.channelId), " \u00B7 ", event.eventType] }), _jsxs("div", { className: "text-muted-foreground", children: [getWebhookStatusLabel(event.status, messages), " \u00B7 ", messages.common.received, " ", formatDistributionDateTime(event.receivedAt, i18n)] })] }, event.id)))) })] }), _jsxs(Card, { size: "sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.overview.contractsToReview.title }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: contractsNeedingReview.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: messages.overview.contractsToReview.empty })) : (contractsNeedingReview.slice(0, 4).map((contract) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onOpenContract(contract.id), children: [_jsxs("div", { className: "font-medium", children: [labelById(channels, contract.channelId), " \u00B7", " ", formatDistributionDate(contract.startsAt, i18n)] }), _jsxs("div", { className: "text-muted-foreground", children: [getContractStatusLabel(contract.status, messages), " \u00B7 ", messages.common.supplier, " ", labelById(suppliers, contract.supplierId)] })] }, contract.id)))) })] })] }), _jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-3 md:flex-row md:items-center", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: messages.common.searchPlaceholder, value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: channelFilter, onValueChange: (value) => setChannelFilter(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-full md:w-64", children: _jsx(SelectValue, { placeholder: messages.overview.filters.allChannelsPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: messages.common.allChannels }), channels.map((channel) => (_jsx(SelectItem, { value: channel.id, children: channel.name }, channel.id)))] })] })] }), hasFilters ? (_jsx(Button, { variant: "outline", onClick: onClearFilters, children: messages.common.clearFilters })) : null] })] }));
+}

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

@@ -0,0 +1,26 @@
+import type { BatchMutationResponse, ChannelBookingLinkRow, ChannelCommissionRuleRow, ChannelContractRow, ChannelProductMappingRow, ChannelRow, ChannelWebhookEventRow } from "./distribution-shared.js";
+export interface DistributionPageProps {
+    className?: string;
+    onChannelOpen?: (channelId: string) => void;
+    onContractOpen?: (contractId: string) => void;
+    onCommissionRuleOpen?: (commissionRuleId: string) => void;
+    onMappingOpen?: (mappingId: string) => void;
+    onBookingLinkOpen?: (bookingLinkId: string) => void;
+    onWebhookEventOpen?: (webhookEventId: string) => void;
+    onChannelCreate?: () => void;
+    onContractCreate?: () => void;
+    onCommissionRuleCreate?: () => void;
+    onMappingCreate?: () => void;
+    onBookingLinkCreate?: () => void;
+    onWebhookEventCreate?: () => void;
+    onChannelEdit?: (channel: ChannelRow) => void;
+    onContractEdit?: (contract: ChannelContractRow) => void;
+    onCommissionRuleEdit?: (commissionRule: ChannelCommissionRuleRow) => void;
+    onMappingEdit?: (mapping: ChannelProductMappingRow) => void;
+    onBookingLinkEdit?: (bookingLink: ChannelBookingLinkRow) => void;
+    onWebhookEventEdit?: (webhookEvent: ChannelWebhookEventRow) => void;
+    onBulkSuccess?: (message: string, result: BatchMutationResponse) => void;
+    onBulkError?: (message: string, error: unknown, result?: BatchMutationResponse) => void;
+}
+export declare function DistributionPage({ className, onChannelOpen, onContractOpen, onCommissionRuleOpen, onMappingOpen, onBookingLinkOpen, onWebhookEventOpen, onChannelCreate, onContractCreate, onCommissionRuleCreate, onMappingCreate, onBookingLinkCreate, onWebhookEventCreate, onChannelEdit, onContractEdit, onCommissionRuleEdit, onMappingEdit, onBookingLinkEdit, onWebhookEventEdit, onBulkSuccess, onBulkError, }?: DistributionPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=distribution-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-page.d.ts","sourceRoot":"","sources":["../../src/components/distribution-page.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,UAAU,EACV,sBAAsB,EACvB,MAAM,0BAA0B,CAAA;AAyBjC,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,oBAAoB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD,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;IACrD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACvD,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,wBAAwB,KAAK,IAAI,CAAA;IACzE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAA;IAC3D,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAChE,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,sBAAsB,KAAK,IAAI,CAAA;IACnE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACxE,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAA;CACxF;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,aAAoB,EACpB,cAAqB,EACrB,oBAA2B,EAC3B,aAAoB,EACpB,iBAAwB,EACxB,kBAAyB,EACzB,eAAsB,EACtB,gBAAuB,EACvB,sBAA6B,EAC7B,eAAsB,EACtB,mBAA0B,EAC1B,oBAA2B,EAC3B,aAAoB,EACpB,cAAqB,EACrB,oBAA2B,EAC3B,aAAoB,EACpB,iBAAwB,EACxB,kBAAyB,EACzB,aAAa,EACb,WAAW,GACZ,GAAE,qBAA0B,2CA6V5B"}

package/dist/components/distribution-page.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tabs, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { formatDistributionCount, formatDistributionSummary } from "../i18n/utils.js";
+import { useBookingLinks, useBookings, useChannels, useCommissionRules, useContracts, useMappings, useProducts, useSuppliers, useVoyantDistributionContext, useWebhookEvents, } from "../index.js";
+import { DistributionOverview } from "./distribution-overview.js";
+import { labelById } from "./distribution-shared.js";
+import { DistributionChannelsTab, DistributionCommissionsTab, DistributionContractsTab, } from "./distribution-tabs-primary.js";
+import { DistributionBookingLinksTab, DistributionMappingsTab, DistributionWebhooksTab, } from "./distribution-tabs-secondary.js";
+const noop = () => { };
+export function DistributionPage({ className, onChannelOpen = noop, onContractOpen = noop, onCommissionRuleOpen = noop, onMappingOpen = noop, onBookingLinkOpen = noop, onWebhookEventOpen = noop, onChannelCreate = noop, onContractCreate = noop, onCommissionRuleCreate = noop, onMappingCreate = noop, onBookingLinkCreate = noop, onWebhookEventCreate = noop, onChannelEdit = noop, onContractEdit = noop, onCommissionRuleEdit = noop, onMappingEdit = noop, onBookingLinkEdit = noop, onWebhookEventEdit = noop, onBulkSuccess, onBulkError, } = {}) {
+    const client = useVoyantDistributionContext();
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const [search, setSearch] = useState("");
+    const [channelFilter, setChannelFilter] = useState("all");
+    const [bulkActionTarget, setBulkActionTarget] = useState(null);
+    const [channelSelection, setChannelSelection] = useState({});
+    const [contractSelection, setContractSelection] = useState({});
+    const [commissionSelection, setCommissionSelection] = useState({});
+    const [mappingSelection, setMappingSelection] = useState({});
+    const [bookingLinkSelection, setBookingLinkSelection] = useState({});
+    const [webhookSelection, setWebhookSelection] = useState({});
+    const suppliersQuery = useSuppliers();
+    const productsQuery = useProducts();
+    const bookingsQuery = useBookings();
+    const channelsQuery = useChannels();
+    const contractsQuery = useContracts();
+    const commissionRulesQuery = useCommissionRules();
+    const mappingsQuery = useMappings();
+    const bookingLinksQuery = useBookingLinks();
+    const webhookEventsQuery = useWebhookEvents();
+    const suppliers = suppliersQuery.data?.data ?? [];
+    const products = productsQuery.data?.data ?? [];
+    const bookings = bookingsQuery.data?.data ?? [];
+    const channels = channelsQuery.data?.data ?? [];
+    const contracts = contractsQuery.data?.data ?? [];
+    const commissionRules = commissionRulesQuery.data?.data ?? [];
+    const mappings = mappingsQuery.data?.data ?? [];
+    const bookingLinks = bookingLinksQuery.data?.data ?? [];
+    const webhookEvents = webhookEventsQuery.data?.data ?? [];
+    const contractsById = new Map(contracts.map((contract) => [contract.id, contract]));
+    const normalizedSearch = search.trim().toLowerCase();
+    const matchesSearch = (...values) => !normalizedSearch ||
+        values.some((value) => String(value ?? "")
+            .toLowerCase()
+            .includes(normalizedSearch));
+    const matchesChannel = (id) => channelFilter === "all" || id === channelFilter;
+    const filteredChannels = channels.filter((channel) => matchesChannel(channel.id) &&
+        matchesSearch(channel.name, channel.kind, channel.status, channel.website, channel.contactName, channel.contactEmail));
+    const filteredContracts = contracts.filter((contract) => matchesChannel(contract.channelId) &&
+        matchesSearch(labelById(channels, contract.channelId), labelById(suppliers, contract.supplierId), contract.status, contract.paymentOwner, contract.startsAt, contract.endsAt, contract.settlementTerms, contract.notes));
+    const filteredCommissionRules = commissionRules.filter((rule) => {
+        const contract = contractsById.get(rule.contractId);
+        return (matchesChannel(contract?.channelId) &&
+            matchesSearch(rule.contractId, labelById(products, rule.productId), rule.scope, rule.commissionType, rule.amountCents, rule.percentBasisPoints, rule.externalRateId, rule.externalCategoryId));
+    });
+    const filteredMappings = mappings.filter((mapping) => matchesChannel(mapping.channelId) &&
+        matchesSearch(labelById(channels, mapping.channelId), labelById(products, mapping.productId), mapping.externalProductId, mapping.externalRateId, mapping.externalCategoryId));
+    const filteredBookingLinks = bookingLinks.filter((bookingLink) => matchesChannel(bookingLink.channelId) &&
+        matchesSearch(labelById(channels, bookingLink.channelId), labelById(bookings, bookingLink.bookingId), bookingLink.externalBookingId, bookingLink.externalReference, bookingLink.externalStatus));
+    const filteredWebhookEvents = webhookEvents.filter((event) => matchesChannel(event.channelId) &&
+        matchesSearch(labelById(channels, event.channelId), event.eventType, event.externalEventId, event.status, event.errorMessage));
+    const syncQueue = filteredWebhookEvents.filter((event) => event.status === "pending" || event.status === "failed");
+    const contractsNeedingReview = filteredContracts.filter((contract) => contract.status !== "active");
+    const hasFilters = search.length > 0 || channelFilter !== "all";
+    const isLoading = suppliersQuery.isPending ||
+        productsQuery.isPending ||
+        bookingsQuery.isPending ||
+        channelsQuery.isPending ||
+        contractsQuery.isPending ||
+        commissionRulesQuery.isPending ||
+        mappingsQuery.isPending ||
+        bookingLinksQuery.isPending ||
+        webhookEventsQuery.isPending;
+    const refreshAll = async () => {
+        await Promise.all([
+            channelsQuery.refetch(),
+            contractsQuery.refetch(),
+            commissionRulesQuery.refetch(),
+            mappingsQuery.refetch(),
+            bookingLinksQuery.refetch(),
+            webhookEventsQuery.refetch(),
+        ]);
+    };
+    const handleBulkUpdate = async ({ ids, endpoint, target, noun, payload, successVerb, clearSelection, }) => {
+        if (ids.length === 0)
+            return;
+        setBulkActionTarget(target);
+        try {
+            const result = await postBatch(client, `${endpoint}/batch-update`, {
+                ids,
+                patch: payload,
+            });
+            await refreshAll();
+            clearSelection();
+            const countLabel = formatDistributionCount(messages, noun, result.succeeded);
+            const totalLabel = formatDistributionCount(messages, noun, result.total);
+            const message = formatDistributionSummary(messages.common.resultSummary, {
+                verb: successVerb,
+                countLabel: result.failed.length === 0 ? countLabel : `${result.succeeded} of ${totalLabel}`,
+            });
+            if (result.failed.length === 0) {
+                onBulkSuccess?.(message, result);
+            }
+            else {
+                onBulkError?.(message, undefined, result);
+            }
+        }
+        catch (error) {
+            onBulkError?.(error instanceof Error ? error.message : String(error), error);
+        }
+        finally {
+            setBulkActionTarget(null);
+        }
+    };
+    const handleBulkDelete = async ({ ids, endpoint, target, noun, clearSelection, }) => {
+        if (ids.length === 0)
+            return;
+        setBulkActionTarget(target);
+        try {
+            const result = await postBatch(client, `${endpoint}/batch-delete`, { ids });
+            await refreshAll();
+            clearSelection();
+            const countLabel = formatDistributionCount(messages, noun, result.succeeded);
+            const totalLabel = formatDistributionCount(messages, noun, result.total);
+            const message = formatDistributionSummary(messages.common.deleteSummary, {
+                countLabel: result.failed.length === 0 ? countLabel : `${result.succeeded} of ${totalLabel}`,
+            });
+            if (result.failed.length === 0) {
+                onBulkSuccess?.(message, result);
+            }
+            else {
+                onBulkError?.(message, undefined, result);
+            }
+        }
+        catch (error) {
+            onBulkError?.(error instanceof Error ? error.message : String(error), error);
+        }
+        finally {
+            setBulkActionTarget(null);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "distribution-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: messages.page.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.page.description })] }), isLoading ? (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : (_jsxs(_Fragment, { children: [_jsx(DistributionOverview, { channels: channels, suppliers: suppliers, filteredChannels: filteredChannels, filteredContracts: filteredContracts, filteredMappings: filteredMappings, syncQueue: syncQueue, contractsNeedingReview: contractsNeedingReview, search: search, setSearch: setSearch, channelFilter: channelFilter, setChannelFilter: setChannelFilter, hasFilters: hasFilters, onClearFilters: () => {
+                            setSearch("");
+                            setChannelFilter("all");
+                        }, onOpenWebhookEvent: onWebhookEventOpen, onOpenContract: onContractOpen }), _jsxs(Tabs, { defaultValue: "channels", children: [_jsxs(TabsList, { variant: "line", children: [_jsx(TabsTrigger, { value: "channels", children: messages.page.tabs.channels }), _jsx(TabsTrigger, { value: "contracts", children: messages.page.tabs.contracts }), _jsx(TabsTrigger, { value: "commissions", children: messages.page.tabs.commissions }), _jsx(TabsTrigger, { value: "mappings", children: messages.page.tabs.mappings }), _jsx(TabsTrigger, { value: "booking-links", children: messages.page.tabs.bookingLinks }), _jsx(TabsTrigger, { value: "webhooks", children: messages.page.tabs.webhooks })] }), _jsx(DistributionChannelsTab, { filteredChannels: filteredChannels, channelSelection: channelSelection, setChannelSelection: setChannelSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: handleBulkUpdate, handleBulkDelete: handleBulkDelete, onCreate: onChannelCreate, onOpenRoute: onChannelOpen, onEdit: onChannelEdit }), _jsx(DistributionContractsTab, { channels: channels, suppliers: suppliers, filteredContracts: filteredContracts, contractSelection: contractSelection, setContractSelection: setContractSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: handleBulkUpdate, handleBulkDelete: handleBulkDelete, onCreate: onContractCreate, onOpenRoute: onContractOpen, onEdit: onContractEdit }), _jsx(DistributionCommissionsTab, { contracts: contracts, products: products, filteredCommissionRules: filteredCommissionRules, commissionSelection: commissionSelection, setCommissionSelection: setCommissionSelection, bulkActionTarget: bulkActionTarget, handleBulkDelete: handleBulkDelete, onCreate: onCommissionRuleCreate, onOpenRoute: onCommissionRuleOpen, onEdit: onCommissionRuleEdit }), _jsx(DistributionMappingsTab, { channels: channels, products: products, filteredMappings: filteredMappings, mappingSelection: mappingSelection, setMappingSelection: setMappingSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: handleBulkUpdate, handleBulkDelete: handleBulkDelete, onCreate: onMappingCreate, onOpenRoute: onMappingOpen, onEdit: onMappingEdit }), _jsx(DistributionBookingLinksTab, { channels: channels, bookings: bookings, filteredBookingLinks: filteredBookingLinks, bookingLinkSelection: bookingLinkSelection, setBookingLinkSelection: setBookingLinkSelection, bulkActionTarget: bulkActionTarget, handleBulkDelete: handleBulkDelete, onCreate: onBookingLinkCreate, onOpenRoute: onBookingLinkOpen, onEdit: onBookingLinkEdit }), _jsx(DistributionWebhooksTab, { channels: channels, filteredWebhookEvents: filteredWebhookEvents, webhookSelection: webhookSelection, setWebhookSelection: setWebhookSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: handleBulkUpdate, handleBulkDelete: handleBulkDelete, onCreate: onWebhookEventCreate, onOpenRoute: onWebhookEventOpen, onEdit: onWebhookEventEdit })] })] }))] }));
+}
+async function postBatch(client, path, body) {
+    const response = await client.fetcher(joinUrl(client.baseUrl, path), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+    });
+    const responseBody = await safeJson(response);
+    if (!response.ok) {
+        throw new Error(extractErrorMessage(response.status, response.statusText, responseBody));
+    }
+    return responseBody;
+}
+async function safeJson(response) {
+    const text = await response.text();
+    if (!text)
+        return undefined;
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return text;
+    }
+}
+function extractErrorMessage(status, statusText, body) {
+    if (typeof body === "object" && body !== null && "error" in body) {
+        const error = body.error;
+        if (typeof error === "string")
+            return error;
+        if (typeof error === "object" && error !== null && "message" in error) {
+            return String(error.message);
+        }
+    }
+    return `Voyant API error: ${status} ${statusText}`;
+}
+function joinUrl(baseUrl, path) {
+    const trimmedBase = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    const trimmedPath = path.startsWith("/") ? path : `/${path}`;
+    return `${trimmedBase}${trimmedPath}`;
+}

package/dist/components/distribution-section-header.d.ts

@@ -0,0 +1,7 @@
+export declare function SectionHeader({ title, description, actionLabel, onAction, }: {
+    title: string;
+    description: string;
+    actionLabel: string;
+    onAction: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=distribution-section-header.d.ts.map

package/dist/components/distribution-section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-section-header.d.ts","sourceRoot":"","sources":["../../src/components/distribution-section-header.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,WAAW,EACX,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,2CAaA"}

package/dist/components/distribution-section-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components";
+import { Plus } from "lucide-react";
+export function SectionHeader({ title, description, actionLabel, onAction, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs(Button, { onClick: onAction, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), actionLabel] })] }));
+}