@voyantjs/legal-ui 0.33.0 → 0.34.0

package/dist/components/attachment-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/attachment-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,6BAA6B,EAEnC,MAAM,uBAAuB,CAAA;AAkC9B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,6BAA6B,CAAA;IAC1C,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,qBAAqB,2CAkIvB"}
+{"version":3,"file":"attachment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/attachment-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,6BAA6B,EAEnC,MAAM,uBAAuB,CAAA;AA6C9B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,6BAA6B,CAAA;IAC1C,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,qBAAqB,2CA8OvB"}

package/dist/components/attachment-dialog.js

@@ -1,32 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLegalContractAttachmentMutation, } from "@voyantjs/legal-react";
-import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, } from "@voyantjs/ui/components";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
-import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { FileText, Loader2, Upload } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useLegalUiMessagesOrDefault } from "../i18n/index.js";
+const attachmentKindValues = ["document", "appendix", "scan"];
 function createAttachmentFormSchema(messages) {
     return z.object({
         name: z.string().min(1, messages.attachmentDialog.validation.nameRequired),
         kind: z.string().min(1).optional(),
         mimeType: z.string().optional(),
-        fileSize: z.coerce.number().int().optional(),
+        fileSize: z.preprocess((value) => (value === "" || value == null ? undefined : value), z.coerce.number().int().optional()),
         storageKey: z.string().optional(),
         checksum: z.string().optional(),
     });
 }
 export function AttachmentDialog({ open, onOpenChange, contractId, attachment, onSuccess, }) {
     const isEditing = !!attachment;
-    const { create, update } = useLegalContractAttachmentMutation();
+    const { update, upload, replaceFile } = useLegalContractAttachmentMutation();
     const messages = useLegalUiMessagesOrDefault();
     const attachmentFormSchema = createAttachmentFormSchema(messages);
+    const fileInputRef = useRef(null);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [fileError, setFileError] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const kindItems = attachmentKindValues.map((value) => ({
+        value,
+        label: messages.attachmentDialog.kindLabels[value],
+    }));
+    if (attachment?.kind && !attachmentKindValues.includes(attachment.kind)) {
+        kindItems.push({ value: attachment.kind, label: attachment.kind });
+    }
     const form = useForm({
         resolver: zodResolver(attachmentFormSchema),
         defaultValues: {
             name: "",
-            kind: "appendix", // i18n-literal-ok domain default attachment kind
+            kind: "document", // i18n-literal-ok domain attachment kind
             mimeType: "",
             fileSize: undefined,
             storageKey: "",
@@ -43,29 +55,100 @@ export function AttachmentDialog({ open, onOpenChange, contractId, attachment, o
                 storageKey: attachment.storageKey ?? "",
                 checksum: attachment.checksum ?? "",
             });
+            setSelectedFile(null);
+            setFileError(null);
         }
         else if (open) {
             form.reset();
+            setSelectedFile(null);
+            setFileError(null);
         }
+        setIsDragging(false);
     }, [open, attachment, form]);
+    const applySelectedFile = (file) => {
+        setSelectedFile(file);
+        setFileError(null);
+        setIsDragging(false);
+        const currentName = form.getValues("name");
+        if (!currentName || currentName === attachment?.name) {
+            form.setValue("name", file.name, { shouldDirty: true, shouldValidate: true });
+        }
+        form.setValue("mimeType", file.type || "", { shouldDirty: true, shouldValidate: true });
+        form.setValue("fileSize", file.size, { shouldDirty: true, shouldValidate: true });
+    };
+    const onFileChange = (event) => {
+        const file = event.currentTarget.files?.[0];
+        if (!file)
+            return;
+        applySelectedFile(file);
+        event.currentTarget.value = "";
+    };
+    const onFileDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const file = event.dataTransfer.files?.[0];
+        if (file)
+            applySelectedFile(file);
+    };
+    const onFileDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(true);
+    };
+    const onFileDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+    };
     const onSubmit = async (values) => {
-        const payload = {
-            name: values.name,
-            kind: values.kind || "appendix", // i18n-literal-ok domain default attachment kind
-            mimeType: values.mimeType || undefined,
-            fileSize: values.fileSize || undefined,
-            storageKey: values.storageKey || undefined,
-            checksum: values.checksum || undefined,
-        };
-        if (isEditing && attachment) {
-            await update.mutateAsync({ contractId, id: attachment.id, input: payload });
+        const uploadInput = selectedFile
+            ? {
+                file: selectedFile,
+                name: values.name,
+                kind: values.kind || "document", // i18n-literal-ok domain attachment kind
+            }
+            : null;
+        if (uploadInput && isEditing && attachment) {
+            await replaceFile.mutateAsync({ contractId, id: attachment.id, input: uploadInput });
+            onSuccess();
+            return;
         }
-        else {
-            await create.mutateAsync({ contractId, input: payload });
+        if (uploadInput) {
+            await upload.mutateAsync({ contractId, input: uploadInput });
+            onSuccess();
+            return;
         }
+        if (!isEditing) {
+            setFileError(messages.attachmentDialog.validation.fileRequired);
+            return;
+        }
+        await update.mutateAsync({
+            contractId,
+            id: attachment.id,
+            input: {
+                name: values.name,
+                kind: values.kind || "document", // i18n-literal-ok domain attachment kind
+                mimeType: values.mimeType || undefined,
+                fileSize: values.fileSize,
+                storageKey: values.storageKey || undefined,
+                checksum: values.checksum || undefined,
+            },
+        });
         onSuccess();
     };
+    const isSubmitting = form.formState.isSubmitting || update.isPending || upload.isPending || replaceFile.isPending;
+    const submitError = update.error ?? upload.error ?? replaceFile.error ?? null;
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
                             ? messages.attachmentDialog.titles.edit
-                            : messages.attachmentDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.name }), _jsx(Input, { ...form.register("name"), placeholder: messages.attachmentDialog.placeholders.name }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.kind }), _jsx(Input, { ...form.register("kind"), placeholder: messages.attachmentDialog.placeholders.kind })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.mimeType }), _jsx(Input, { ...form.register("mimeType"), placeholder: messages.attachmentDialog.placeholders.mimeType })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.fileSize }), _jsx(Input, { ...form.register("fileSize"), type: "number", placeholder: messages.attachmentDialog.placeholders.fileSize })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.checksum }), _jsx(Input, { ...form.register("checksum"), placeholder: messages.attachmentDialog.placeholders.checksum })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.storageKey }), _jsx(Input, { ...form.register("storageKey"), placeholder: messages.attachmentDialog.placeholders.storageKey })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? messages.common.saveChanges : messages.attachmentDialog.actions.create] })] })] })] }) }));
+                            : messages.attachmentDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx("input", { type: "hidden", ...form.register("mimeType") }), _jsx("input", { type: "hidden", ...form.register("fileSize") }), _jsx("input", { type: "hidden", ...form.register("storageKey") }), _jsx("input", { type: "hidden", ...form.register("checksum") }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.file }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), onDrop: onFileDrop, onDragOver: onFileDragOver, onDragLeave: onFileDragLeave, "data-dragging": isDragging, className: "flex min-h-32 flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-6 text-center transition-colors hover:border-foreground/30 hover:bg-muted/30 data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5", children: selectedFile ? (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "max-w-full truncate font-medium text-sm", children: selectedFile.name }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [formatUploadSize(selectedFile.size), selectedFile.type ? ` - ${selectedFile.type}` : ""] })] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-muted-foreground text-sm", children: messages.attachmentDialog.placeholders.file })] })) }), _jsx("input", { ref: fileInputRef, type: "file", className: "hidden", onChange: onFileChange }), fileError ? _jsx("p", { className: "text-xs text-destructive", children: fileError }) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.name }), _jsx(Input, { ...form.register("name"), placeholder: messages.attachmentDialog.placeholders.name }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.attachmentDialog.fields.kind }), _jsxs(Select, { items: kindItems, value: form.watch("kind"), onValueChange: (value) => form.setValue("kind", value ?? undefined, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: kindItems.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] })] }), submitError ? _jsx("p", { className: "text-xs text-destructive", children: submitError.message }) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? messages.common.saveChanges : messages.attachmentDialog.actions.create] })] })] })] }) }));
+}
+function formatUploadSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }

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

@@ -4,13 +4,20 @@ export interface ContractDetailPageProps {
     id: string;
     onBackToContracts?: () => void;
     renderContractDialog?: (props: ContractDetailDialogRenderProps) => ReactNode;
+    renderReference?: (props: ContractReferenceRenderProps) => ReactNode;
     getAttachmentDownloadHref?: (attachment: LegalContractAttachmentRecord) => string;
 }
+export type ContractReferenceKind = "person" | "organization" | "supplier" | "channel" | "booking" | "order";
+export interface ContractReferenceRenderProps {
+    kind: ContractReferenceKind;
+    id: string;
+    contract: LegalContractRecord;
+}
 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;
+export declare function ContractDetailPage({ id, onBackToContracts, renderContractDialog, renderReference, getAttachmentDownloadHref, }: ContractDetailPageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=contract-detail-page.d.ts.map

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

@@ -1 +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"}
+{"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;AAY9B,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,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IACpE,yBAAyB,CAAC,EAAE,CAAC,UAAU,EAAE,6BAA6B,KAAK,MAAM,CAAA;CAClF;AAED,MAAM,MAAM,qBAAqB,GAC7B,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,qBAAqB,CAAA;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;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,eAAe,EACf,yBAAyB,GAC1B,EAAE,uBAAuB,2CAwVzB"}

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

@@ -2,8 +2,9 @@ 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 { Badge, Button } from "@voyantjs/ui/components";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
 import { ArrowLeft, ExternalLink, FileText, Pencil, Plus, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
@@ -18,7 +19,7 @@ const statusVariant = {
     expired: "destructive",
     void: "destructive",
 };
-export function ContractDetailPage({ id, onBackToContracts, renderContractDialog, getAttachmentDownloadHref, }) {
+export function ContractDetailPage({ id, onBackToContracts, renderContractDialog, renderReference, getAttachmentDownloadHref, }) {
     const queryClient = useQueryClient();
     const i18n = useLegalUiI18nOrDefault();
     const messages = useLegalUiMessagesOrDefault();
@@ -44,7 +45,8 @@ export function ContractDetailPage({ id, onBackToContracts, renderContractDialog
     }
     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: () => {
+    const renderReferenceValue = (kind, referenceId) => renderReference?.({ kind, id: referenceId, contract }) ?? (_jsx("span", { className: "font-mono text-xs", children: referenceId }));
+    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: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: f.title }), _jsx(Badge, { variant: statusVariant[status] ?? "secondary", children: messages.common.contractStatusLabels[status] ?? status }), _jsx(Badge, { variant: "outline", children: messages.common.contractScopeLabels[contract.scope] ?? contract.scope })] }), _jsx("p", { className: "mt-1 truncate font-mono text-muted-foreground text-sm", children: contract.contractNumber ?? contract.title }), contract.contractNumber ? (_jsx("p", { className: "mt-1 truncate text-muted-foreground text-xs", children: contract.title })) : 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);
                                     }
@@ -52,20 +54,22 @@ export function ContractDetailPage({ id, onBackToContracts, renderContractDialog
                                     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 &&
+                                }, disabled: remove.isPending, children: [_jsx(Trash2, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.common.delete] })) : null] })] }), _jsxs(Tabs, { defaultValue: "details", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "details", children: f.sections.details }), _jsx(TabsTrigger, { value: "parties", children: f.sections.parties }), _jsx(TabsTrigger, { value: "signatures", children: f.sections.signatures }), _jsx(TabsTrigger, { value: "documents", children: f.sections.documents })] }), _jsx(TabsContent, { value: "details", className: "mt-4", children: _jsx(ContractSection, { title: f.sections.details, children: _jsxs("div", { 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) })] })] }) }) }), _jsx(TabsContent, { value: "parties", className: "mt-4", children: _jsx(ContractSection, { title: f.sections.parties, children: _jsxs("div", { className: "grid gap-3 text-sm", children: [contract.personId ? (_jsx(DetailRow, { label: f.fields.person, children: renderReferenceValue("person", contract.personId) })) : null, contract.organizationId ? (_jsx(DetailRow, { label: f.fields.organization, children: renderReferenceValue("organization", contract.organizationId) })) : null, contract.supplierId ? (_jsx(DetailRow, { label: f.fields.supplier, children: renderReferenceValue("supplier", contract.supplierId) })) : null, contract.channelId ? (_jsx(DetailRow, { label: f.fields.channel, children: renderReferenceValue("channel", contract.channelId) })) : null, contract.bookingId ? (_jsx(DetailRow, { label: f.fields.booking, children: renderReferenceValue("booking", contract.bookingId) })) : null, contract.orderId ? (_jsx(DetailRow, { label: f.fields.order, children: renderReferenceValue("order", contract.orderId) })) : 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: () => {
+                                        !contract.channelId &&
+                                        !contract.bookingId &&
+                                        !contract.orderId ? (_jsx("p", { className: "text-muted-foreground", children: f.empty.noParties })) : null] }) }) }), _jsx(TabsContent, { value: "signatures", className: "mt-4", children: _jsx(ContractSection, { title: f.sections.signatures, action: canAddSignature ? (_jsxs(Button, { size: "sm", onClick: () => setSignOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.addSignature] })) : null, 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))) })] }) })) }) }), _jsx(TabsContent, { value: "documents", className: "mt-4", children: _jsx(ContractSection, { title: f.sections.documents, action: _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?.({
+                                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), f.actions.addDocument] }), 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,
@@ -86,6 +90,9 @@ export function ContractDetailPage({ id, onBackToContracts, renderContractDialog
 function DetailRow({ label, children }) {
     return (_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [label, ":"] }), " ", _jsx("span", { children: children })] }));
 }
+function ContractSection({ title, action, children, }) {
+    return (_jsxs("section", { className: "rounded-md border bg-background", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("h2", { className: "font-semibold text-sm", children: title }), action] }), _jsx("div", { className: "p-4", children: children })] }));
+}
 function AttachmentRow({ attachment, downloadHref, onEdit, onDelete, }) {
     const messages = useLegalUiMessagesOrDefault();
     const f = messages.contractDetailPage;

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

@@ -4,11 +4,27 @@ export interface ContractDialogRenderProps {
     onOpenChange: (open: boolean) => void;
     onSuccess: () => void;
 }
+export interface ContractPersonSummary {
+    id: string;
+    firstName?: string | null;
+    lastName?: string | null;
+    email?: string | null;
+    phone?: string | null;
+}
+export interface ContractPersonFilterRenderProps {
+    personId: string | null;
+    selectedPerson: ContractPersonSummary | null;
+    onPersonChange: (personId: string | null, person?: ContractPersonSummary | null) => void;
+}
 export interface ContractsPageProps {
     className?: string;
+    defaultPersonId?: string | null;
+    personId?: string | null;
+    onPersonIdChange?: (personId: string | null) => void;
     onOpenContract?: (contractId: string) => void;
     renderContractDialog?: (props: ContractDialogRenderProps) => ReactNode;
-    renderPersonCell?: (personId: string | null) => ReactNode;
+    renderPersonCell?: (personId: string | null, person: ContractPersonSummary | null) => ReactNode;
+    renderPersonFilter?: (props: ContractPersonFilterRenderProps) => ReactNode;
 }
-export declare function ContractsPage({ className, onOpenContract, renderContractDialog, renderPersonCell, }?: ContractsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContractsPage({ className, defaultPersonId, personId, onPersonIdChange, onOpenContract, renderContractDialog, renderPersonCell, renderPersonFilter, }?: ContractsPageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=contracts-page.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"contracts-page.d.ts","sourceRoot":"","sources":["../../src/components/contracts-page.tsx"],"names":[],"mappings":"AAmCA,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,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,cAAc,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC5C,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,qBAAqB,GAAG,IAAI,KAAK,IAAI,CAAA;CACzF;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,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,EAAE,MAAM,EAAE,qBAAqB,GAAG,IAAI,KAAK,SAAS,CAAA;IAC/F,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAA;CAC3E;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,GACnB,GAAE,kBAAuB,2CA6NzB"}

package/dist/components/contracts-page.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePeople } from "@voyantjs/crm-react";
 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 { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@voyantjs/ui/components/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
 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 { ChevronDown, Plus, Search, User, X } from "lucide-react";
+import { useMemo, useState } from "react";
 import { useLegalUiI18nOrDefault, useLegalUiMessagesOrDefault } from "../i18n/index.js";
 import { legalContractScopes, legalContractStatuses } from "../i18n/messages.js";
 const PAGE_SIZE = 25;
@@ -21,19 +24,23 @@ const statusVariant = {
     expired: "destructive",
     void: "destructive",
 };
-export function ContractsPage({ className, onOpenContract, renderContractDialog, renderPersonCell, } = {}) {
+export function ContractsPage({ className, defaultPersonId, personId, onPersonIdChange, onOpenContract, renderContractDialog, renderPersonCell, renderPersonFilter, } = {}) {
     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 [internalPersonId, setInternalPersonId] = useState(() => getInitialPersonId(defaultPersonId));
+    const [selectedPerson, setSelectedPerson] = useState(null);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [pageIndex, setPageIndex] = useState(0);
+    const resolvedPersonId = personId ?? internalPersonId;
     const { data, isPending, isFetching, isError, refetch } = useLegalContracts({
         search,
         scope: scope === SCOPE_ALL ? "all" : scope,
         status: status === STATUS_ALL ? "all" : status,
+        personId: resolvedPersonId || undefined,
         limit: PAGE_SIZE,
         offset: pageIndex * PAGE_SIZE,
     });
@@ -43,6 +50,25 @@ export function ContractsPage({ className, onOpenContract, renderContractDialog,
     const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
     const showSkeleton = isPending || (isFetching && contracts.length === 0);
     const resetPage = () => setPageIndex(0);
+    const contractPersonSummary = useMemo(() => {
+        if (!resolvedPersonId)
+            return null;
+        if (selectedPerson?.id === resolvedPersonId)
+            return selectedPerson;
+        for (const contract of contracts) {
+            const person = getContractPersonSummary(contract);
+            if (person?.id === resolvedPersonId)
+                return person;
+        }
+        return { id: resolvedPersonId };
+    }, [contracts, resolvedPersonId, selectedPerson]);
+    const handlePersonChange = (nextPersonId, person) => {
+        if (personId === undefined)
+            setInternalPersonId(nextPersonId ?? "");
+        setSelectedPerson(person ?? null);
+        onPersonIdChange?.(nextPersonId);
+        resetPage();
+    };
     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();
@@ -52,7 +78,11 @@ export function ContractsPage({ className, onOpenContract, renderContractDialog,
                         }, 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?.({
+                        }, 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)))] })] }), renderPersonFilter ? (renderPersonFilter({
+                        personId: resolvedPersonId || null,
+                        selectedPerson: contractPersonSummary,
+                        onPersonChange: handlePersonChange,
+                    })) : (_jsx(ContractsPersonFilter, { value: resolvedPersonId || null, selectedPerson: contractPersonSummary, onChange: handlePersonChange }))] }), _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: _jsx(ContractPersonCell, { contract: contract, renderPersonCell: renderPersonCell }) }), _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: () => {
@@ -62,6 +92,81 @@ export function ContractsPage({ className, onOpenContract, renderContractDialog,
                 },
             })] }));
 }
+function getInitialPersonId(defaultPersonId) {
+    if (defaultPersonId !== undefined)
+        return defaultPersonId ?? "";
+    if (typeof window === "undefined")
+        return "";
+    return new URLSearchParams(window.location.search).get("personId") ?? "";
+}
+function personSummaryFromRecord(person) {
+    return {
+        id: person.id,
+        firstName: person.firstName,
+        lastName: person.lastName,
+        email: person.email,
+        phone: person.phone,
+    };
+}
+function getContractPersonSummary(contract) {
+    if (!contract.personId)
+        return null;
+    return {
+        id: contract.personId,
+        firstName: contract.personFirstName,
+        lastName: contract.personLastName,
+        email: contract.personEmail,
+        phone: contract.personPhone,
+    };
+}
+function formatPersonName(person) {
+    if (!person)
+        return null;
+    const name = [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+    return name || null;
+}
+function formatPersonLabel(person, fallback) {
+    return formatPersonName(person) ?? person?.email ?? person?.phone ?? fallback ?? null;
+}
+function ContractsPersonFilter({ value, selectedPerson, onChange, }) {
+    const messages = useLegalUiMessagesOrDefault().contractsPage.filters;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const peopleQuery = usePeople({
+        search: search.trim() || undefined,
+        limit: 25,
+        enabled: open,
+    });
+    const people = peopleQuery.data?.data ?? [];
+    const label = formatPersonLabel(selectedPerson, value) ?? messages.allPeople;
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", className: "w-[14rem] justify-between gap-2 px-3" }), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(User, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: label })] }), _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })] }), _jsx(PopoverContent, { className: "w-[20rem] p-0", align: "start", children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: messages.personSearchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: peopleQuery.isLoading ? messages.personSearching : messages.personEmpty }), _jsx(CommandGroup, { children: people.map((person) => {
+                                                const summary = personSummaryFromRecord(person);
+                                                const name = formatPersonName(summary);
+                                                return (_jsx(CommandItem, { value: `${name ?? ""} ${person.email ?? ""} ${person.phone ?? ""}`, onSelect: () => {
+                                                        onChange(person.id, summary);
+                                                        setOpen(false);
+                                                        setSearch("");
+                                                    }, children: _jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [_jsx("span", { className: "truncate font-medium text-sm", children: name ?? person.id }), (person.email || person.phone) && (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: person.email ?? person.phone }))] }) }, person.id));
+                                            }) }), value ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsxs(CommandItem, { value: "__clear_person_filter", onSelect: () => {
+                                                            onChange(null, null);
+                                                            setOpen(false);
+                                                            setSearch("");
+                                                        }, children: [_jsx(X, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.clearPerson] }) })] })) : null] })] }) })] }), value ? (_jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": messages.clearPerson, onClick: () => onChange(null, null), children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })) : null] }));
+}
+function ContractPersonCell({ contract, renderPersonCell, }) {
+    const messages = useLegalUiMessagesOrDefault();
+    const person = getContractPersonSummary(contract);
+    if (renderPersonCell)
+        return renderPersonCell(contract.personId, person);
+    if (!contract.personId) {
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: messages.common.noResultsDash });
+    }
+    const name = formatPersonName(person);
+    if (!name && !person?.email && !person?.phone) {
+        return _jsx("span", { className: "font-mono text-xs", children: contract.personId });
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col leading-tight", children: [_jsx("span", { className: "truncate font-medium text-sm", children: name ?? contract.personId }), (person?.email || person?.phone) && (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: person.email ?? person.phone }))] }));
+}
 function PaginationBar({ shown, total, page, pageCount, onPrevious, onNext, canGoBack, canGoForward, }) {
     const messages = useLegalUiMessagesOrDefault();
     const f = messages.contractsPage.pagination;

package/dist/components/policy-rule-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"policy-rule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/policy-rule-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAA8B,MAAM,uBAAuB,CAAA;AAqD9F,MAAM,MAAM,QAAQ,GAAG,qBAAqB,CAAA;AAE5C,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,qBAAqB,2CAkMvB"}
+{"version":3,"file":"policy-rule-dialog.d.ts","sourceRoot":"","sources":["../../src/components/policy-rule-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAA8B,MAAM,uBAAuB,CAAA;AAsD9F,MAAM,MAAM,QAAQ,GAAG,qBAAqB,CAAA;AAE5C,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,qBAAqB,2CAwMvB"}

package/dist/components/policy-rule-dialog.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLegalPolicyRuleMutation } from "@voyantjs/legal-react";
 import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
 import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
 import { useEffect } from "react";
@@ -93,5 +94,8 @@ export function PolicyRuleDialog({ open, onOpenChange, versionId, rule, onSucces
                             : messages.policyRuleDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.ruleType }), _jsxs(Select, { items: ruleTypeItems, value: form.watch("ruleType"), onValueChange: (v) => form.setValue("ruleType", v, { shouldValidate: true }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ruleTypeItems.map((t) => (_jsx(SelectItem, { value: t.value, children: t.label }, t.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.sortOrder }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.label }), _jsx(Input, { ...form.register("label"), placeholder: messages.policyRuleDialog.placeholders.label })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.daysBeforeDeparture }), _jsx(Input, { ...form.register("daysBeforeDeparture"), type: "number", placeholder: messages.policyRuleDialog.placeholders.daysBeforeDeparture })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.refundPercent }), _jsx(Input, { ...form.register("refundPercent"), type: "number", placeholder: messages.policyRuleDialog.placeholders.refundPercent })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.refundType }), _jsxs(Select, { items: refundTypeItems, value: form.watch("refundType") ?? "", onValueChange: (v) => form.setValue("refundType", (v || undefined)), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: messages.common.selectPlaceholder }) }), _jsx(SelectContent, { children: refundTypeItems.map((t) => (_jsx(SelectItem, { value: t.value, children: t.label }, t.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? "EUR" /* i18n-literal-ok domain default currency */, {
                                                         shouldValidate: true,
                                                         shouldDirty: true,
-                                                    }) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.flatAmountCents }), _jsx(Input, { ...form.register("flatAmountCents"), type: "number", placeholder: messages.policyRuleDialog.placeholders.flatAmountCents })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? messages.common.saveChanges : messages.policyRuleDialog.actions.create] })] })] })] }) }));
+                                                    }) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.policyRuleDialog.fields.flatAmountCents }), _jsx(CurrencyInput, { value: form.watch("flatAmountCents"), onChange: (next) => form.setValue("flatAmountCents", next ?? undefined, {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            }), currency: form.watch("currency"), placeholder: messages.policyRuleDialog.placeholders.flatAmountCents })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? messages.common.saveChanges : messages.policyRuleDialog.actions.create] })] })] })] }) }));
 }