@voyantjs/legal-ui 0.30.6 → 0.31.0

package/README.md

@@ -25,7 +25,3 @@ import { legalUiRo } from "@voyantjs/legal-ui/i18n/ro"
 
 English-only apps should import only `./i18n/en`. Bilingual apps can import
 `./i18n/en` and `./i18n/ro`.
-
-## Not included (registry-only)
-
-Some components couple to TanStack Router or template-local helpers and remain available only via the shadcn registry: `contract-detail-page`, `contracts-page`, `policies-page`, `policy-detail-page`, `template-detail-page`, `templates-page`. Import via `npx shadcn add @voyant/<component>` and customize per-project.

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

@@ -0,0 +1,16 @@
+import { type LegalContractAttachmentRecord, type LegalContractRecord } from "@voyantjs/legal-react";
+import type { ReactNode } from "react";
+export interface ContractDetailPageProps {
+    id: string;
+    onBackToContracts?: () => void;
+    renderContractDialog?: (props: ContractDetailDialogRenderProps) => ReactNode;
+    getAttachmentDownloadHref?: (attachment: LegalContractAttachmentRecord) => string;
+}
+export interface ContractDetailDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    contract: LegalContractRecord;
+    onSuccess: () => void;
+}
+export declare function ContractDetailPage({ id, onBackToContracts, renderContractDialog, getAttachmentDownloadHref, }: 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":"AAEA,OAAO,EACL,KAAK,6BAA6B,EAClC,KAAK,mBAAmB,EAMzB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAqBtC,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAA;IACV,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAA;IAC5E,yBAAyB,CAAC,EAAE,CAAC,UAAU,EAAE,6BAA6B,KAAK,MAAM,CAAA;CAClF;AAED,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,mBAAmB,CAAA;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,GAC1B,EAAE,uBAAuB,2CA0TzB"}

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatMessage } from "@voyantjs/i18n";
+import { useLegalContract, useLegalContractAttachmentMutation, useLegalContractAttachments, useLegalContractMutation, useLegalContractSignatures, } from "@voyantjs/legal-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { ArrowLeft, ExternalLink, FileText, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { AttachmentDialog } from "./attachment-dialog.js";
+import { SignatureDialog } from "./signature-dialog.js";
+const statusVariant = {
+    draft: "outline",
+    issued: "secondary",
+    sent: "secondary",
+    signed: "default",
+    executed: "default",
+    expired: "destructive",
+    void: "destructive",
+};
+export function ContractDetailPage({ id, onBackToContracts, renderContractDialog, getAttachmentDownloadHref, }) {
+    const queryClient = useQueryClient();
+    const i18n = useLegalUiI18nOrDefault();
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.contractDetailPage;
+    const { remove, issue, voidContract } = useLegalContractMutation();
+    const { remove: removeAttachment } = useLegalContractAttachmentMutation();
+    const [editOpen, setEditOpen] = useState(false);
+    const [signOpen, setSignOpen] = useState(false);
+    const [attachOpen, setAttachOpen] = useState(false);
+    const [editingAttachment, setEditingAttachment] = useState();
+    const { data: contract, isPending } = useLegalContract(id);
+    const { data: signatures, refetch: refetchSignatures } = useLegalContractSignatures({
+        contractId: id,
+    });
+    const { data: attachments, refetch: refetchAttachments } = useLegalContractAttachments({
+        contractId: id,
+    });
+    if (isPending) {
+        return (_jsx("div", { className: "flex flex-col gap-6 p-6", children: _jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }) }) }));
+    }
+    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: f.notFound }), onBackToContracts ? (_jsx(Button, { variant: "outline", onClick: onBackToContracts, children: f.backToContracts })) : null] }));
+    }
+    const status = contract.status;
+    const canAddSignature = status === "issued" || status === "sent" || status === "signed";
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [onBackToContracts ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: onBackToContracts, children: _jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: contract.title }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: messages.common.contractScopeLabels[contract.scope] ?? contract.scope }), _jsx(Badge, { variant: statusVariant[status] ?? "secondary", children: messages.common.contractStatusLabels[status] ?? status }), contract.contractNumber ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: contract.contractNumber })) : null] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [status === "draft" ? (_jsx(Button, { size: "sm", onClick: () => issue.mutate(id), disabled: issue.isPending, children: f.actions.issue })) : null, status !== "void" ? (_jsx(Button, { size: "sm", variant: "destructive", onClick: () => {
+                                    if (confirm(f.voidConfirm)) {
+                                        voidContract.mutate(id);
+                                    }
+                                }, disabled: voidContract.isPending, children: f.actions.void })) : null, renderContractDialog ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.common.edit] })) : null, status === "draft" ? (_jsxs(Button, { variant: "destructive", size: "sm", onClick: () => {
+                                    if (confirm(formatMessage(f.deleteConfirm, { title: contract.title }))) {
+                                        remove.mutate(id, { onSuccess: () => onBackToContracts?.() });
+                                    }
+                                }, disabled: remove.isPending, children: [_jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.common.delete] })) : null] })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: f.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsx(DetailRow, { label: f.fields.language, children: contract.language }), contract.templateVersionId ? (_jsx(DetailRow, { label: f.fields.templateVersion, children: _jsx("span", { className: "font-mono text-xs", children: contract.templateVersionId }) })) : null, contract.seriesId ? (_jsx(DetailRow, { label: f.fields.series, children: _jsx("span", { className: "font-mono text-xs", children: contract.seriesId }) })) : null, contract.expiresAt ? (_jsx(DetailRow, { label: f.fields.expires, children: i18n.formatDate(contract.expiresAt) })) : null, _jsxs("div", { className: "mt-2 border-t pt-3", children: [_jsx(DetailRow, { label: f.fields.created, children: i18n.formatDate(contract.createdAt) }), _jsx(DetailRow, { label: f.fields.updated, children: i18n.formatDate(contract.updatedAt) })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: f.sections.parties }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [contract.personId ? (_jsx(DetailRow, { label: f.fields.person, children: _jsx("span", { className: "font-mono text-xs", children: contract.personId }) })) : null, contract.organizationId ? (_jsx(DetailRow, { label: f.fields.organization, children: _jsx("span", { className: "font-mono text-xs", children: contract.organizationId }) })) : null, contract.supplierId ? (_jsx(DetailRow, { label: f.fields.supplier, children: _jsx("span", { className: "font-mono text-xs", children: contract.supplierId }) })) : null, contract.channelId ? (_jsx(DetailRow, { label: f.fields.channel, children: _jsx("span", { className: "font-mono text-xs", children: contract.channelId }) })) : null, !contract.personId &&
+                                        !contract.organizationId &&
+                                        !contract.supplierId &&
+                                        !contract.channelId ? (_jsx("p", { className: "text-muted-foreground", children: f.empty.noParties })) : null] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: f.sections.signatures }), canAddSignature ? (_jsxs(Button, { size: "sm", onClick: () => setSignOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.addSignature] })) : null] }), _jsx(CardContent, { children: !signatures || signatures.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: f.empty.noSignatures })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.fields.name }), _jsx(TableHead, { children: f.fields.email }), _jsx(TableHead, { children: f.fields.role }), _jsx(TableHead, { children: f.fields.method }), _jsx(TableHead, { children: f.fields.signedAt })] }) }), _jsx(TableBody, { children: signatures.map((signature) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: signature.signerName }), _jsx(TableCell, { children: signature.signerEmail ?? messages.common.noResultsDash }), _jsx(TableCell, { children: signature.signerRole ?? messages.common.noResultsDash }), _jsx(TableCell, { children: signature.method }), _jsx(TableCell, { children: i18n.formatDateTime(signature.signedAt) })] }, signature.id))) })] }) })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: f.sections.attachments }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    setEditingAttachment(undefined);
+                                    setAttachOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.addAttachment] })] }), _jsx(CardContent, { children: !attachments || attachments.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: f.empty.noAttachments })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.fields.name }), _jsx(TableHead, { children: f.fields.kind }), _jsx(TableHead, { children: f.fields.mimeType }), _jsx(TableHead, { children: f.fields.size }), _jsx(TableHead, { className: "w-16" })] }) }), _jsx(TableBody, { children: attachments.map((attachment) => (_jsx(AttachmentRow, { attachment: attachment, downloadHref: getAttachmentDownloadHref?.(attachment), onEdit: () => {
+                                                setEditingAttachment(attachment);
+                                                setAttachOpen(true);
+                                            }, onDelete: () => {
+                                                if (confirm(f.deleteAttachmentConfirm)) {
+                                                    removeAttachment.mutate({ contractId: id, id: attachment.id });
+                                                }
+                                            } }, attachment.id))) })] }) })) })] }), renderContractDialog?.({
+                open: editOpen,
+                onOpenChange: setEditOpen,
+                contract,
+                onSuccess: () => {
+                    setEditOpen(false);
+                    void queryClient.invalidateQueries();
+                },
+            }), _jsx(SignatureDialog, { open: signOpen, onOpenChange: setSignOpen, contractId: id, onSuccess: () => {
+                    setSignOpen(false);
+                    void refetchSignatures();
+                    void queryClient.invalidateQueries();
+                } }), _jsx(AttachmentDialog, { open: attachOpen, onOpenChange: setAttachOpen, contractId: id, attachment: editingAttachment, onSuccess: () => {
+                    setAttachOpen(false);
+                    setEditingAttachment(undefined);
+                    void refetchAttachments();
+                } })] }));
+}
+function DetailRow({ label, children }) {
+    return (_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [label, ":"] }), " ", _jsx("span", { children: children })] }));
+}
+function AttachmentRow({ attachment, downloadHref, onEdit, onDelete, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.contractDetailPage;
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: downloadHref ? (_jsxs("a", { href: downloadHref, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 hover:underline", children: [_jsx(FileText, { className: "size-3.5 shrink-0 opacity-60", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: attachment.name }), _jsx(ExternalLink, { className: "size-3 opacity-60", "aria-hidden": "true" })] })) : (_jsx("span", { children: attachment.name })) }), _jsx(TableCell, { children: attachment.kind }), _jsx(TableCell, { children: attachment.mimeType ?? messages.common.noResultsDash }), _jsx(TableCell, { children: attachment.fileSize != null
+                    ? formatBytes(attachment.fileSize, {
+                        bytes: f.units.bytes,
+                        kilobytes: f.units.kilobytes,
+                        megabytes: f.units.megabytes,
+                    })
+                    : messages.common.noResultsDash }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: onEdit, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "size-3", "aria-hidden": "true" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "size-3", "aria-hidden": "true" }) })] }) })] }));
+}
+function formatBytes(bytes, units) {
+    if (bytes < 1024)
+        return `${bytes} ${units.bytes}`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} ${units.kilobytes}`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} ${units.megabytes}`;
+}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface ContractDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess: () => void;
+}
+export interface ContractsPageProps {
+    className?: string;
+    onOpenContract?: (contractId: string) => void;
+    renderContractDialog?: (props: ContractDialogRenderProps) => ReactNode;
+    renderPersonCell?: (personId: string | null) => ReactNode;
+}
+export declare function ContractsPage({ className, onOpenContract, renderContractDialog, renderPersonCell, }?: ContractsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contracts-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contracts-page.d.ts","sourceRoot":"","sources":["../../src/components/contracts-page.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAoBtC,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAA;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,SAAS,CAAA;CAC1D;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,gBAAgB,GACjB,GAAE,kBAAuB,2CA8LzB"}

package/dist/components/contracts-page.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { useLegalContracts } from "@voyantjs/legal-react";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Plus, Search } from "lucide-react";
+import { useState } from "react";
+import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { legalContractScopes, legalContractStatuses } from "../i18n/messages.js";
+const PAGE_SIZE = 25;
+const SCOPE_ALL = "__all__";
+const STATUS_ALL = "__all__";
+const statusVariant = {
+    draft: "outline",
+    issued: "secondary",
+    sent: "secondary",
+    signed: "default",
+    executed: "default",
+    expired: "destructive",
+    void: "destructive",
+};
+export function ContractsPage({ className, onOpenContract, renderContractDialog, renderPersonCell, } = {}) {
+    const i18n = useLegalUiI18nOrDefault();
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.contractsPage;
+    const [search, setSearch] = useState("");
+    const [scope, setScope] = useState(SCOPE_ALL);
+    const [status, setStatus] = useState(STATUS_ALL);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [pageIndex, setPageIndex] = useState(0);
+    const { data, isPending, isFetching, isError, refetch } = useLegalContracts({
+        search,
+        scope: scope === SCOPE_ALL ? "all" : scope,
+        status: status === STATUS_ALL ? "all" : status,
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+    });
+    const contracts = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = pageIndex + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && contracts.length === 0);
+    const resetPage = () => setPageIndex(0);
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: f.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: f.description })] }), renderContractDialog ? (_jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.create] })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative min-w-[14rem] max-w-sm flex-1", children: [_jsx(Label, { htmlFor: "contracts-search", className: "sr-only", children: f.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "contracts-search", placeholder: f.searchPlaceholder, value: search, onChange: (event) => {
+                                    setSearch(event.target.value);
+                                    resetPage();
+                                }, className: "pl-9" })] }), _jsxs(Select, { value: scope, onValueChange: (value) => {
+                            setScope(value ?? SCOPE_ALL);
+                            resetPage();
+                        }, children: [_jsx(SelectTrigger, { className: "w-[12.5rem]", children: _jsx(SelectValue, { placeholder: f.filters.scope }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: SCOPE_ALL, children: f.filters.allScopes }), legalContractScopes.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.contractScopeLabels[value] }, value)))] })] }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                            setStatus(value ?? STATUS_ALL);
+                            resetPage();
+                        }, children: [_jsx(SelectTrigger, { className: "w-[12.5rem]", children: _jsx(SelectValue, { placeholder: f.filters.status }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: f.filters.allStatuses }), legalContractStatuses.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.contractStatusLabels[value] }, value)))] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.columns.number }), _jsx(TableHead, { children: f.columns.title }), _jsx(TableHead, { children: f.columns.scope }), _jsx(TableHead, { children: f.columns.status }), _jsx(TableHead, { children: f.columns.person }), _jsx(TableHead, { children: f.columns.created })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(ContractRowSkeleton, { rows: 6 })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "h-24 text-center text-sm text-destructive", children: f.loadFailed }) })) : contracts.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "h-24 text-center text-sm text-muted-foreground", children: f.empty }) })) : (contracts.map((contract) => (_jsxs(TableRow, { onClick: () => onOpenContract?.(contract.id), className: cn(onOpenContract && "cursor-pointer"), children: [_jsx(TableCell, { className: "font-mono text-xs", children: contract.contractNumber ?? messages.common.noResultsDash }), _jsx(TableCell, { className: "font-medium", children: contract.title }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: messages.common.contractScopeLabels[contract.scope] ?? contract.scope }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusVariant[contract.status] ?? "secondary", children: messages.common.contractStatusLabels[contract.status] }) }), _jsx(TableCell, { children: renderPersonCell ? (renderPersonCell(contract.personId)) : (_jsx("span", { className: "font-mono text-xs", children: contract.personId ?? messages.common.noResultsDash })) }), _jsx(TableCell, { children: i18n.formatDate(contract.createdAt) })] }, contract.id)))) })] }) }), _jsx(PaginationBar, { shown: contracts.length, total: total, page: page, pageCount: pageCount, onPrevious: () => setPageIndex((prev) => Math.max(0, prev - 1)), onNext: () => setPageIndex((prev) => prev + 1), canGoBack: pageIndex > 0, canGoForward: (pageIndex + 1) * PAGE_SIZE < total }), renderContractDialog?.({
+                open: dialogOpen,
+                onOpenChange: setDialogOpen,
+                onSuccess: () => {
+                    setDialogOpen(false);
+                    setPageIndex(0);
+                    void refetch();
+                },
+            })] }));
+}
+function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.contractsPage.pagination;
+    return (_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(f.showing, { count: shown, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !canGoBack, onClick: onPrevious, children: f.previous }), _jsx("span", { children: formatMessage(f.page, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: !canGoForward, onClick: onNext, children: f.next })] })] }));
+}
+function ContractRowSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-40" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-24 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-28" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, `contract-skeleton-${index}`))) }));
+}

package/dist/components/number-series-page.d.ts

@@ -0,0 +1,13 @@
+import { type LegalContractNumberSeriesRecord } from "@voyantjs/legal-react";
+import type { ReactNode } from "react";
+export interface NumberSeriesDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    series?: LegalContractNumberSeriesRecord;
+    onSuccess: () => void;
+}
+export interface NumberSeriesPageProps {
+    renderNumberSeriesDialog?: (props: NumberSeriesDialogRenderProps) => ReactNode;
+}
+export declare function NumberSeriesPage({ renderNumberSeriesDialog }?: NumberSeriesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=number-series-page.d.ts.map

package/dist/components/number-series-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-series-page.d.ts","sourceRoot":"","sources":["../../src/components/number-series-page.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,+BAA+B,EAGrC,MAAM,uBAAuB,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE,+BAA+B,CAAA;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,SAAS,CAAA;CAC/E;AAED,wBAAgB,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,GAAE,qBAA0B,2CA2HxF"}

package/dist/components/number-series-page.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { useLegalContractNumberSeries, useLegalContractNumberSeriesMutation, } from "@voyantjs/legal-react";
+import { Badge, Button } from "@voyantjs/ui/components";
+import { Loader2, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useLegalUiMessagesOrDefault } from "../i18n/index.js";
+export function NumberSeriesPage({ renderNumberSeriesDialog } = {}) {
+    const messages = useLegalUiMessagesOrDefault();
+    const page = messages.numberSeriesPage;
+    const common = messages.common;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingSeries, setEditingSeries] = useState();
+    const { remove } = useLegalContractNumberSeriesMutation();
+    const { data, isPending, refetch } = useLegalContractNumberSeries();
+    const rows = data?.data ?? [];
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: page.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: page.description })] }), renderNumberSeriesDialog ? (_jsxs(Button, { onClick: () => {
+                            setEditingSeries(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), page.actions.create] })) : null] }), isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : null, !isPending && rows.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: page.empty }) })) : null, !isPending && rows.length > 0 ? (_jsx("div", { className: "rounded border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-3 text-left font-medium", children: page.columns.name }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.prefix }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.separator }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.pad }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.current }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.reset }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.scope }), _jsx("th", { className: "p-3 text-left font-medium", children: page.columns.status }), _jsx("th", { className: "w-20 p-3" })] }) }), _jsx("tbody", { children: rows.map((series) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-3", children: series.name }), _jsx("td", { className: "p-3 font-mono", children: series.prefix }), _jsx("td", { className: "p-3 font-mono", children: series.separator || common.none }), _jsx("td", { className: "p-3", children: series.padLength }), _jsx("td", { className: "p-3 font-mono", children: series.currentSequence }), _jsx("td", { className: "p-3 capitalize", children: series.resetStrategy }), _jsx("td", { className: "p-3", children: _jsx(Badge, { variant: "outline", className: "capitalize", children: series.scope }) }), _jsx("td", { className: "p-3", children: _jsx(Badge, { variant: series.active ? "default" : "secondary", children: series.active ? page.active : page.inactive }) }), _jsx("td", { className: "p-3", children: _jsxs("div", { className: "flex items-center gap-1", children: [renderNumberSeriesDialog ? (_jsx("button", { type: "button", onClick: () => {
+                                                        setEditingSeries(series);
+                                                        setDialogOpen(true);
+                                                    }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) })) : null, _jsx("button", { type: "button", onClick: () => {
+                                                        if (confirm(formatMessage(page.deleteConfirm, { name: series.name }))) {
+                                                            remove.mutate(series.id, { onSuccess: () => void refetch() });
+                                                        }
+                                                    }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, series.id))) })] }) })) : null, renderNumberSeriesDialog?.({
+                open: dialogOpen,
+                onOpenChange: setDialogOpen,
+                series: editingSeries,
+                onSuccess: () => {
+                    setDialogOpen(false);
+                    setEditingSeries(undefined);
+                    void refetch();
+                },
+            })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface PolicyDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess: () => void;
+}
+export interface PoliciesPageProps {
+    className?: string;
+    onOpenPolicy?: (policyId: string) => void;
+    renderPolicyDialog?: (props: PolicyDialogRenderProps) => ReactNode;
+}
+export declare function PoliciesPage({ className, onOpenPolicy, renderPolicyDialog, }?: PoliciesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=policies-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"policies-page.d.ts","sourceRoot":"","sources":["../../src/components/policies-page.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAA;CACnE;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,kBAAkB,GACnB,GAAE,iBAAsB,2CAmJxB"}

package/dist/components/policies-page.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { useLegalPolicies } from "@voyantjs/legal-react";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Plus, Search } from "lucide-react";
+import { useState } from "react";
+import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { legalPolicyKinds } from "../i18n/messages.js";
+const PAGE_SIZE = 25;
+const KIND_ALL = "__all__";
+export function PoliciesPage({ className, onOpenPolicy, renderPolicyDialog, } = {}) {
+    const i18n = useLegalUiI18nOrDefault();
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.policiesPage;
+    const [search, setSearch] = useState("");
+    const [kind, setKind] = useState(KIND_ALL);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [pageIndex, setPageIndex] = useState(0);
+    const { data, isPending, isFetching, isError, refetch } = useLegalPolicies({
+        search,
+        kind: kind === KIND_ALL ? "all" : kind,
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+    });
+    const policies = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = pageIndex + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && policies.length === 0);
+    const resetPage = () => setPageIndex(0);
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: f.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: f.description })] }), renderPolicyDialog ? (_jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.create] })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative min-w-[14rem] max-w-sm flex-1", children: [_jsx(Label, { htmlFor: "policies-search", className: "sr-only", children: f.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "policies-search", placeholder: f.searchPlaceholder, value: search, onChange: (event) => {
+                                    setSearch(event.target.value);
+                                    resetPage();
+                                }, className: "pl-9" })] }), _jsxs(Select, { value: kind, onValueChange: (value) => {
+                            setKind(value ?? KIND_ALL);
+                            resetPage();
+                        }, children: [_jsx(SelectTrigger, { className: "w-[12.5rem]", children: _jsx(SelectValue, { placeholder: f.columns.kind }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: KIND_ALL, children: f.allKinds }), legalPolicyKinds.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.policyKindLabels[value] }, value)))] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.columns.name }), _jsx(TableHead, { children: f.columns.slug }), _jsx(TableHead, { children: f.columns.kind }), _jsx(TableHead, { children: f.columns.language }), _jsx(TableHead, { children: f.columns.created })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(PolicyRowSkeleton, { rows: 6 })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center text-sm text-destructive", children: f.loadFailed }) })) : policies.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center text-sm text-muted-foreground", children: f.empty }) })) : (policies.map((policy) => (_jsx(PolicyRow, { policy: policy, created: i18n.formatDate(policy.createdAt), kindLabel: messages.common.policyKindLabels[policy.kind] ?? policy.kind, onOpenPolicy: onOpenPolicy }, policy.id)))) })] }) }), _jsx(PaginationBar, { shown: policies.length, total: total, page: page, pageCount: pageCount, onPrevious: () => setPageIndex((prev) => Math.max(0, prev - 1)), onNext: () => setPageIndex((prev) => prev + 1), canGoBack: pageIndex > 0, canGoForward: (pageIndex + 1) * PAGE_SIZE < total }), renderPolicyDialog?.({
+                open: dialogOpen,
+                onOpenChange: setDialogOpen,
+                onSuccess: () => {
+                    setDialogOpen(false);
+                    setPageIndex(0);
+                    void refetch();
+                },
+            })] }));
+}
+function PolicyRow({ policy, created, kindLabel, onOpenPolicy, }) {
+    return (_jsxs(TableRow, { onClick: () => onOpenPolicy?.(policy.id), className: cn(onOpenPolicy && "cursor-pointer"), children: [_jsx(TableCell, { className: "font-medium", children: policy.name }), _jsx(TableCell, { className: "font-mono text-xs", children: policy.slug }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: kindLabel }) }), _jsx(TableCell, { children: policy.language }), _jsx(TableCell, { children: created })] }));
+}
+function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.policiesPage.pagination;
+    return (_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(f.showing, { count: shown, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !canGoBack, onClick: onPrevious, children: f.previous }), _jsx("span", { children: formatMessage(f.page, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: !canGoForward, onClick: onNext, children: f.next })] })] }));
+}
+function PolicyRowSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-40" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-28 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-12" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, `policy-skeleton-${index}`))) }));
+}

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

@@ -0,0 +1,23 @@
+import { type LegalPolicyAssignmentRecord, type LegalPolicyRecord } from "@voyantjs/legal-react";
+import type { ReactNode } from "react";
+export interface PolicyDetailPageProps {
+    id: string;
+    onBackToPolicies?: () => void;
+    renderPolicyDialog?: (props: PolicyDetailDialogRenderProps) => ReactNode;
+    renderPolicyAssignmentDialog?: (props: PolicyAssignmentDialogRenderProps) => ReactNode;
+}
+export interface PolicyDetailDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    policy: LegalPolicyRecord;
+    onSuccess: () => void;
+}
+export interface PolicyAssignmentDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    policyId: string;
+    assignment?: LegalPolicyAssignmentRecord;
+    onSuccess: () => void;
+}
+export declare function PolicyDetailPage({ id, onBackToPolicies, renderPolicyDialog, renderPolicyAssignmentDialog, }: PolicyDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=policy-detail-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"policy-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/policy-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,iBAAiB,EAWvB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,SAAS,CAAA;IACxE,4BAA4B,CAAC,EAAE,CAAC,KAAK,EAAE,iCAAiC,KAAK,SAAS,CAAA;CACvF;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,EAAE,iBAAiB,CAAA;IACzB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,2BAA2B,CAAA;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,GAC7B,EAAE,qBAAqB,2CAoSvB"}

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatMessage } from "@voyantjs/i18n";
+import { useLegalPolicy, useLegalPolicyAcceptances, useLegalPolicyAssignmentMutation, useLegalPolicyAssignments, useLegalPolicyMutation, useLegalPolicyRuleMutation, useLegalPolicyRules, useLegalPolicyVersionMutation, useLegalPolicyVersions, } from "@voyantjs/legal-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { ArrowLeft, ChevronDown, ChevronRight, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { PolicyRuleDialog } from "./policy-rule-dialog.js";
+import { PolicyVersionDialog } from "./policy-version-dialog.js";
+const versionStatusVariant = {
+    draft: "outline",
+    published: "default",
+    retired: "secondary",
+};
+export function PolicyDetailPage({ id, onBackToPolicies, renderPolicyDialog, renderPolicyAssignmentDialog, }) {
+    const queryClient = useQueryClient();
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.policyDetailPage;
+    const { remove } = useLegalPolicyMutation();
+    const { publish, retire } = useLegalPolicyVersionMutation();
+    const { remove: removeAssignment } = useLegalPolicyAssignmentMutation();
+    const [editOpen, setEditOpen] = useState(false);
+    const [versionDialogOpen, setVersionDialogOpen] = useState(false);
+    const [editingVersion, setEditingVersion] = useState();
+    const [expandedVersionId, setExpandedVersionId] = useState(null);
+    const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
+    const [ruleDialogVersionId, setRuleDialogVersionId] = useState("");
+    const [editingRule, setEditingRule] = useState();
+    const [assignmentDialogOpen, setAssignmentDialogOpen] = useState(false);
+    const [editingAssignment, setEditingAssignment] = useState();
+    const { data: policy, isPending } = useLegalPolicy(id);
+    const { data: versionsData, refetch: refetchVersions } = useLegalPolicyVersions({ policyId: id });
+    const { data: assignmentsData, refetch: refetchAssignments } = useLegalPolicyAssignments({
+        policyId: id,
+    });
+    const { data: acceptancesData } = useLegalPolicyAcceptances({ limit: 50, offset: 0 });
+    const assignments = assignmentsData?.data ?? [];
+    const acceptances = acceptancesData?.data ?? [];
+    if (isPending) {
+        return (_jsx("div", { className: "flex flex-col gap-6 p-6", children: _jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }) }) }));
+    }
+    if (!policy) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: f.notFound }), onBackToPolicies ? (_jsx(Button, { variant: "outline", onClick: onBackToPolicies, children: f.backToPolicies })) : null] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [onBackToPolicies ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: onBackToPolicies, children: _jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: policy.name }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: messages.common.policyKindLabels[policy.kind] ?? policy.kind }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: policy.slug })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [renderPolicyDialog ? (_jsxs(Button, { variant: "outline", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.common.edit] })) : null, _jsxs(Button, { variant: "destructive", onClick: () => {
+                                    if (confirm(formatMessage(f.deleteConfirm, { name: policy.name }))) {
+                                        remove.mutate(id, { onSuccess: () => onBackToPolicies?.() });
+                                    }
+                                }, disabled: remove.isPending, children: [_jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.common.delete] })] })] }), policy.description ? (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: _jsx("p", { className: "text-sm", children: policy.description }) }) })) : null, _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: f.sections.versions }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    setEditingVersion(undefined);
+                                    setVersionDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.newVersion] })] }), _jsxs(CardContent, { children: [!versionsData || versionsData.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: f.empty.noVersions })) : null, _jsx("div", { className: "flex flex-col gap-2", children: versionsData?.map((version) => (_jsx(PolicyVersionRow, { version: version, expanded: expandedVersionId === version.id, onToggle: () => setExpandedVersionId(expandedVersionId === version.id ? null : version.id), onEdit: () => {
+                                        setEditingVersion(version);
+                                        setVersionDialogOpen(true);
+                                    }, onPublish: () => publish.mutate(version.id), onRetire: () => retire.mutate(version.id), onAddRule: () => {
+                                        setRuleDialogVersionId(version.id);
+                                        setEditingRule(undefined);
+                                        setRuleDialogOpen(true);
+                                    }, onEditRule: (rule) => {
+                                        setRuleDialogVersionId(version.id);
+                                        setEditingRule(rule);
+                                        setRuleDialogOpen(true);
+                                    } }, version.id))) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { children: f.sections.assignments }), renderPolicyAssignmentDialog ? (_jsxs(Button, { size: "sm", onClick: () => {
+                                    setEditingAssignment(undefined);
+                                    setAssignmentDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.addAssignment] })) : null] }), _jsxs(CardContent, { children: [assignments.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: f.empty.noAssignments })) : null, assignments.length > 0 ? (_jsx("div", { className: "rounded border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.fields.scope }), _jsx(TableHead, { children: f.fields.targetId }), _jsx(TableHead, { children: f.fields.priority }), _jsx(TableHead, { children: f.fields.valid }), _jsx(TableHead, { className: "w-16" })] }) }), _jsx(TableBody, { children: assignments.map((assignment) => (_jsx(AssignmentRow, { assignment: assignment, onEdit: renderPolicyAssignmentDialog
+                                                    ? () => {
+                                                        setEditingAssignment(assignment);
+                                                        setAssignmentDialogOpen(true);
+                                                    }
+                                                    : undefined, onDelete: () => {
+                                                    if (confirm(f.deleteAssignmentConfirm)) {
+                                                        removeAssignment.mutate({ policyId: id, id: assignment.id });
+                                                    }
+                                                } }, assignment.id))) })] }) })) : null] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: f.sections.acceptances }) }), _jsxs(CardContent, { children: [acceptances.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: f.empty.noAcceptances })) : null, acceptances.length > 0 ? (_jsx("div", { className: "rounded border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.fields.versionId }), _jsx(TableHead, { children: f.fields.personId }), _jsx(TableHead, { children: f.fields.bookingId }), _jsx(TableHead, { children: f.fields.method }), _jsx(TableHead, { children: f.fields.acceptedAt })] }) }), _jsx(TableBody, { children: acceptances.map((acceptance) => (_jsx(AcceptanceRow, { acceptance: acceptance }, acceptance.id))) })] }) })) : null] })] }), renderPolicyDialog?.({
+                open: editOpen,
+                onOpenChange: setEditOpen,
+                policy,
+                onSuccess: () => {
+                    setEditOpen(false);
+                    void queryClient.invalidateQueries();
+                },
+            }), _jsx(PolicyVersionDialog, { open: versionDialogOpen, onOpenChange: setVersionDialogOpen, policyId: id, version: editingVersion, onSuccess: () => {
+                    setVersionDialogOpen(false);
+                    setEditingVersion(undefined);
+                    void refetchVersions();
+                } }), ruleDialogVersionId ? (_jsx(PolicyRuleDialog, { open: ruleDialogOpen, onOpenChange: setRuleDialogOpen, versionId: ruleDialogVersionId, rule: editingRule, onSuccess: () => {
+                    setRuleDialogOpen(false);
+                    setEditingRule(undefined);
+                    void queryClient.invalidateQueries();
+                } })) : null, renderPolicyAssignmentDialog?.({
+                open: assignmentDialogOpen,
+                onOpenChange: setAssignmentDialogOpen,
+                policyId: id,
+                assignment: editingAssignment,
+                onSuccess: () => {
+                    setAssignmentDialogOpen(false);
+                    setEditingAssignment(undefined);
+                    void refetchAssignments();
+                },
+            })] }));
+}
+function PolicyVersionRow({ version, expanded, onToggle, onEdit, onPublish, onRetire, onAddRule, onEditRule, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.policyDetailPage;
+    const { remove } = useLegalPolicyRuleMutation();
+    const { data: rulesData } = useLegalPolicyRules({
+        versionId: version.id,
+        enabled: expanded,
+    });
+    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground hover:text-foreground", children: expanded ? (_jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" })) : (_jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })) }), _jsx("div", { className: "flex-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["v", version.version] }), _jsx(Badge, { variant: versionStatusVariant[version.status] ?? "secondary", children: f.versionStatusLabels[version.status] ?? version.status }), _jsx("span", { className: "text-sm text-muted-foreground", children: version.title })] }) }), _jsxs("div", { className: "flex items-center gap-1", children: [version.status === "draft" ? (_jsx(Button, { variant: "outline", size: "sm", onClick: onPublish, children: f.actions.publish })) : null, version.status === "published" ? (_jsx(Button, { variant: "outline", size: "sm", onClick: onRetire, children: f.actions.retire })) : null, version.status === "draft" ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onEdit, children: _jsx(Pencil, { className: "size-3.5", "aria-hidden": "true" }) })) : null] })] }), expanded ? (_jsxs("div", { className: "border-t bg-muted/30 p-3", children: [version.body ? (_jsxs("div", { className: "mb-4 rounded border bg-background p-3", children: [_jsx("p", { className: "mb-2 text-xs font-medium uppercase text-muted-foreground", children: f.sections.body }), version.body.trim().startsWith("<") ? (_jsx("div", { className: "prose prose-invert max-w-none text-sm [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_p]:my-2", 
+                                // biome-ignore lint/security/noDangerouslySetInnerHtml: Policy version body is trusted admin-authored HTML rendered for preview.
+                                dangerouslySetInnerHTML: { __html: version.body } })) : (_jsx("pre", { className: "whitespace-pre-wrap text-sm", children: version.body }))] })) : null, _jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: f.sections.rules }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddRule, children: [_jsx(Plus, { className: "mr-1 size-3", "aria-hidden": "true" }), f.actions.addRule] })] }), !rulesData || rulesData.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: f.empty.noRules })) : null, rulesData && rulesData.length > 0 ? (_jsx("div", { className: "rounded border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: f.fields.sort }), _jsx(TableHead, { children: f.fields.type }), _jsx(TableHead, { children: f.fields.label }), _jsx(TableHead, { children: f.fields.days }), _jsx(TableHead, { children: f.fields.refund }), _jsx(TableHead, { children: f.fields.refundType }), _jsx(TableHead, { className: "w-16" })] }) }), _jsx(TableBody, { children: rulesData
+                                        .slice()
+                                        .sort((a, b) => a.sortOrder - b.sortOrder)
+                                        .map((rule) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono", children: rule.sortOrder }), _jsx(TableCell, { children: messages.policyRuleDialog.ruleTypeLabels[rule.ruleType] ?? rule.ruleType }), _jsx(TableCell, { children: rule.label ?? messages.common.noResultsDash }), _jsx(TableCell, { children: rule.daysBeforeDeparture ?? messages.common.noResultsDash }), _jsx(TableCell, { children: formatRuleRefund(rule) }), _jsx(TableCell, { children: rule.refundType
+                                                    ? (messages.policyRuleDialog.refundTypeLabels[rule.refundType] ?? rule.refundType)
+                                                    : messages.common.noResultsDash }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => onEditRule(rule), className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "size-3", "aria-hidden": "true" }) }), _jsx("button", { type: "button", onClick: () => {
+                                                                if (confirm(f.deleteRuleConfirm)) {
+                                                                    remove.mutate({ versionId: version.id, id: rule.id });
+                                                                }
+                                                            }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "size-3", "aria-hidden": "true" }) })] }) })] }, rule.id))) })] }) })) : null] })) : null] }));
+}
+function AssignmentRow({ assignment, onEdit, onDelete, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const f = messages.policyDetailPage;
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: f.assignmentScopeLabels[assignment.scope] ?? assignment.scope }), _jsx(TableCell, { className: "font-mono text-xs", children: getAssignmentTargetId(assignment) }), _jsx(TableCell, { children: assignment.priority }), _jsx(TableCell, { className: "text-xs", children: assignment.validFrom || assignment.validTo
+                    ? `${assignment.validFrom ?? "..."} - ${assignment.validTo ?? "..."}`
+                    : f.always }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [onEdit ? (_jsx("button", { type: "button", onClick: onEdit, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "size-3", "aria-hidden": "true" }) })) : null, _jsx("button", { type: "button", onClick: onDelete, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "size-3", "aria-hidden": "true" }) })] }) })] }));
+}
+function AcceptanceRow({ acceptance }) {
+    const i18n = useLegalUiI18nOrDefault();
+    const messages = useLegalUiMessagesOrDefault();
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-xs", children: acceptance.policyVersionId }), _jsx(TableCell, { className: "font-mono text-xs", children: acceptance.personId ?? messages.common.noResultsDash }), _jsx(TableCell, { className: "font-mono text-xs", children: acceptance.bookingId ?? messages.common.noResultsDash }), _jsx(TableCell, { children: acceptance.method.replace(/_/g, " ") }), _jsx(TableCell, { children: i18n.formatDateTime(acceptance.acceptedAt) })] }));
+}
+function getAssignmentTargetId(assignment) {
+    return (assignment.productId ||
+        assignment.channelId ||
+        assignment.supplierId ||
+        assignment.marketId ||
+        assignment.organizationId ||
+        "-");
+}
+function formatRuleRefund(rule) {
+    if (rule.refundPercent != null)
+        return `${(rule.refundPercent / 100).toFixed(2)}%`;
+    if (rule.flatAmountCents != null) {
+        return `${(rule.flatAmountCents / 100).toFixed(2)} ${rule.currency ?? ""}`;
+    }
+    return "-";
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { TemplateDialogRenderProps, TemplateVersionDialogRenderProps } from "./templates-page.js";
+export interface TemplateDetailPageProps {
+    id: string;
+    onBackToTemplates?: () => void;
+    renderTemplateDialog?: (props: TemplateDialogRenderProps) => ReactNode;
+    renderTemplateVersionDialog?: (props: TemplateVersionDialogRenderProps) => ReactNode;
+}
+export declare function TemplateDetailPage({ id, onBackToTemplates, renderTemplateDialog, renderTemplateVersionDialog, }: TemplateDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=template-detail-page.d.ts.map