@voyant-travel/legal-react 0.119.2

package/dist/admin/contract-dialog.js

@@ -0,0 +1,479 @@
+// agent-quality: file-size exception -- owner: legal-react; #1730 extracted dialog schema/field helpers and attachment dropzone, while the remaining admin shell coordinates related record searches.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useOperatorAdminMessages } from "@voyant-travel/admin";
+import { useChannel, useChannels } from "@voyant-travel/distribution-react";
+import { useSupplier, useSuppliers } from "@voyant-travel/distribution-react/suppliers";
+import { formatMessage } from "@voyant-travel/i18n";
+import { useOrganization, useOrganizations, usePeople, usePerson, } from "@voyant-travel/relationships-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { DateTimePicker } from "@voyant-travel/ui/components/date-time-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { fetchWithValidation, legalContractTemplateVersionRecordSchema, singleEnvelope, useLegalContractAttachmentMutation, useLegalContractMutation, useLegalContractNumberSeries, useLegalContractTemplate, useLegalContractTemplateAuthoring, useLegalContractTemplates, useLegalContractTemplateVersions, useVoyantLegalContext, } from "../index.js";
+import { buildRecordFromPairs, buildVariablesPayload, contractFormSchema, inferTemplateVariableKeys, languageOptions, objectToEntries, SCOPE_VALUES, VariableValueField, } from "./contract-dialog-fields.js";
+import { ContractUploadField } from "./contract-upload-field.js";
+import { mergeUniqueOptions, SearchableSelect } from "./legal-admin-shared.js";
+export function ContractDialog({ open, onOpenChange, contract, onSuccess }) {
+    const isEditing = !!contract;
+    const t = useOperatorAdminMessages().legal.contractDialog;
+    const legalClient = useVoyantLegalContext();
+    const { create, update } = useLegalContractMutation();
+    const { upload } = useLegalContractAttachmentMutation();
+    const { variableCatalog } = useLegalContractTemplateAuthoring();
+    const validationByCode = {
+        titleRequired: t.validation.titleRequired,
+    };
+    const resolveValidation = (code) => (code && validationByCode[code]) || code || "";
+    const [templateSearch, setTemplateSearch] = useState("");
+    const [personSearch, setPersonSearch] = useState("");
+    const [organizationSearch, setOrganizationSearch] = useState("");
+    const [supplierSearch, setSupplierSearch] = useState("");
+    const [templateId, setTemplateId] = useState(null);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [isDraggingFile, setIsDraggingFile] = useState(false);
+    const syncedTemplateVariablesSignatureRef = useRef("");
+    const fileInputRef = useRef(null);
+    const form = useForm({
+        resolver: zodResolver(contractFormSchema),
+        defaultValues: {
+            scope: "customer",
+            title: "",
+            contractNumber: "",
+            language: "en",
+            templateVersionId: "",
+            seriesId: "",
+            personId: "",
+            organizationId: "",
+            supplierId: "",
+            channelId: "",
+            expiresAt: "",
+            templateVariables: [],
+            additionalVariables: [],
+            metadataEntries: [],
+        },
+    });
+    const templateVariablesFieldArray = useFieldArray({
+        control: form.control,
+        name: "templateVariables",
+    });
+    const additionalVariablesFieldArray = useFieldArray({
+        control: form.control,
+        name: "additionalVariables",
+    });
+    const metadataEntriesFieldArray = useFieldArray({
+        control: form.control,
+        name: "metadataEntries",
+    });
+    const selectedScope = form.watch("scope");
+    const selectedLanguage = form.watch("language") || "en";
+    const selectedTemplateVersionId = form.watch("templateVersionId") || null;
+    const selectedSeriesId = form.watch("seriesId") || null;
+    const selectedPersonId = form.watch("personId") || null;
+    const selectedOrganizationId = form.watch("organizationId") || null;
+    const selectedSupplierId = form.watch("supplierId") || null;
+    const selectedChannelId = form.watch("channelId") || null;
+    const templateListQuery = useLegalContractTemplates({
+        search: templateSearch || undefined,
+        scope: selectedScope,
+        limit: 25,
+        offset: 0,
+        enabled: open,
+    });
+    const selectedTemplateQuery = useLegalContractTemplate(templateId ?? "", {
+        enabled: open && !!templateId,
+    });
+    const templateVersionsQuery = useLegalContractTemplateVersions({
+        templateId: templateId ?? "",
+        enabled: open && !!templateId,
+    });
+    const selectedTemplateVersionQuery = useQuery({
+        queryKey: ["legal", "template-version", selectedTemplateVersionId],
+        enabled: open && !!selectedTemplateVersionId,
+        queryFn: async () => {
+            const { data } = await fetchWithValidation(`/v1/admin/legal/contracts/template-versions/${selectedTemplateVersionId}`, singleEnvelope(legalContractTemplateVersionRecordSchema), legalClient);
+            return data;
+        },
+    });
+    const numberSeriesQuery = useLegalContractNumberSeries({ enabled: open });
+    const peopleQuery = usePeople({
+        search: personSearch || undefined,
+        limit: 25,
+        enabled: open,
+    });
+    const selectedPersonQuery = usePerson(selectedPersonId ?? undefined, {
+        enabled: open && !!selectedPersonId,
+    });
+    const organizationsQuery = useOrganizations({
+        search: organizationSearch || undefined,
+        limit: 25,
+        enabled: open,
+    });
+    const selectedOrganizationQuery = useOrganization(selectedOrganizationId ?? undefined, {
+        enabled: open && !!selectedOrganizationId,
+    });
+    const suppliersQuery = useSuppliers({
+        search: supplierSearch || undefined,
+        limit: 25,
+        enabled: open,
+    });
+    const selectedSupplierQuery = useSupplier(selectedSupplierId ?? "", {
+        enabled: open && !!selectedSupplierId,
+    });
+    const channelsQuery = useChannels({ limit: 250, enabled: open });
+    const selectedChannelQuery = useChannel(selectedChannelId, {
+        enabled: open && !!selectedChannelId,
+    });
+    useEffect(() => {
+        if (!open) {
+            setTemplateSearch("");
+            setPersonSearch("");
+            setOrganizationSearch("");
+            setSupplierSearch("");
+            setTemplateId(null);
+            setSelectedFile(null);
+            setIsDraggingFile(false);
+            syncedTemplateVariablesSignatureRef.current = "";
+            return;
+        }
+        if (contract) {
+            form.reset({
+                scope: contract.scope,
+                title: contract.title,
+                contractNumber: contract.contractNumber ?? "",
+                language: contract.language ?? "en",
+                templateVersionId: contract.templateVersionId ?? "",
+                seriesId: contract.seriesId ?? "",
+                personId: contract.personId ?? "",
+                organizationId: contract.organizationId ?? "",
+                supplierId: contract.supplierId ?? "",
+                channelId: contract.channelId ?? "",
+                expiresAt: contract.expiresAt ?? "",
+                templateVariables: [],
+                additionalVariables: objectToEntries(contract.variables),
+                metadataEntries: objectToEntries(contract.metadata),
+            });
+        }
+        else {
+            form.reset({
+                scope: "customer",
+                title: "",
+                contractNumber: "",
+                language: "en",
+                templateVersionId: "",
+                seriesId: "",
+                personId: "",
+                organizationId: "",
+                supplierId: "",
+                channelId: "",
+                expiresAt: "",
+                templateVariables: [],
+                additionalVariables: [],
+                metadataEntries: [],
+            });
+            setSelectedFile(null);
+            setIsDraggingFile(false);
+        }
+    }, [open, contract, form]);
+    useEffect(() => {
+        if (!open)
+            return;
+        if (selectedTemplateVersionQuery.data?.templateId) {
+            setTemplateId((current) => current ?? selectedTemplateVersionQuery.data?.templateId ?? null);
+        }
+    }, [open, selectedTemplateVersionQuery.data]);
+    const templateOptions = useMemo(() => {
+        const listOptions = templateListQuery.data?.data.map((template) => ({
+            value: template.id,
+            label: template.name,
+            description: `${template.slug} · ${template.language} · ${template.scope}`,
+        })) ?? [];
+        const selectedOption = selectedTemplateQuery.data
+            ? [
+                {
+                    value: selectedTemplateQuery.data.id,
+                    label: selectedTemplateQuery.data.name,
+                    description: `${selectedTemplateQuery.data.slug} · ${selectedTemplateQuery.data.language} · ${selectedTemplateQuery.data.scope}`,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [templateListQuery.data?.data, selectedTemplateQuery.data]);
+    const templateVersionOptions = useMemo(() => {
+        const listedOptions = templateVersionsQuery.data?.map((version) => ({
+            value: version.id,
+            label: formatMessage(t.templateVersionLabelFormat, { version: version.version }),
+            description: version.changelog || t.templateVersionMostRecentDraft,
+        })) ?? [];
+        const selectedOption = selectedTemplateVersionQuery.data
+            ? [
+                {
+                    value: selectedTemplateVersionQuery.data.id,
+                    label: formatMessage(t.templateVersionLabelFormat, {
+                        version: selectedTemplateVersionQuery.data.version,
+                    }),
+                    description: selectedTemplateVersionQuery.data.changelog || t.templateVersionSelectedFallback,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listedOptions, selectedOption);
+    }, [
+        selectedTemplateVersionQuery.data,
+        t.templateVersionLabelFormat,
+        t.templateVersionMostRecentDraft,
+        t.templateVersionSelectedFallback,
+        templateVersionsQuery.data,
+    ]);
+    const seriesOptions = useMemo(() => {
+        return (numberSeriesQuery.data?.data
+            .filter((series) => series.scope === selectedScope)
+            .map((series) => ({
+            value: series.id,
+            label: `${series.name} · ${series.prefix}${series.separator || ""}${String((series.currentSequence ?? 0) + 1).padStart(series.padLength, "0")}`,
+            description: `${series.scope} · ${series.active ? t.seriesActive : t.seriesInactive}`,
+        })) ?? []);
+    }, [numberSeriesQuery.data, selectedScope, t.seriesActive, t.seriesInactive]);
+    const personOptions = useMemo(() => {
+        const listOptions = peopleQuery.data?.data.map((person) => ({
+            value: person.id,
+            label: `${person.firstName} ${person.lastName}`.trim(),
+            description: person.email || person.phone || person.id,
+        })) ?? [];
+        const selectedOption = selectedPersonQuery.data
+            ? [
+                {
+                    value: selectedPersonQuery.data.id,
+                    label: `${selectedPersonQuery.data.firstName} ${selectedPersonQuery.data.lastName}`.trim(),
+                    description: selectedPersonQuery.data.email ||
+                        selectedPersonQuery.data.phone ||
+                        selectedPersonQuery.data.id,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [peopleQuery.data?.data, selectedPersonQuery.data]);
+    const organizationOptions = useMemo(() => {
+        const listOptions = organizationsQuery.data?.data.map((organization) => ({
+            value: organization.id,
+            label: organization.name,
+            description: organization.website || organization.legalName || organization.id,
+        })) ?? [];
+        const selectedOption = selectedOrganizationQuery.data
+            ? [
+                {
+                    value: selectedOrganizationQuery.data.id,
+                    label: selectedOrganizationQuery.data.name,
+                    description: selectedOrganizationQuery.data.website ??
+                        selectedOrganizationQuery.data.legalName ??
+                        selectedOrganizationQuery.data.id,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [organizationsQuery.data?.data, selectedOrganizationQuery.data]);
+    const supplierOptions = useMemo(() => {
+        const listOptions = suppliersQuery.data?.data.map((supplier) => ({
+            value: supplier.id,
+            label: supplier.name,
+            description: [supplier.type, supplier.city, supplier.country].filter(Boolean).join(" · "),
+        })) ?? [];
+        const selectedOption = selectedSupplierQuery.data
+            ? [
+                {
+                    value: selectedSupplierQuery.data.data.id,
+                    label: selectedSupplierQuery.data.data.name,
+                    description: [
+                        selectedSupplierQuery.data.data.type,
+                        selectedSupplierQuery.data.data.city,
+                        selectedSupplierQuery.data.data.country,
+                    ]
+                        .filter(Boolean)
+                        .join(" · "),
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [suppliersQuery.data?.data, selectedSupplierQuery.data]);
+    const channelOptions = useMemo(() => {
+        const listOptions = channelsQuery.data?.data.map((channel) => ({
+            value: channel.id,
+            label: channel.name,
+            description: [channel.kind, channel.status, channel.website].filter(Boolean).join(" · "),
+        })) ?? [];
+        const selectedOption = selectedChannelQuery.data
+            ? [
+                {
+                    value: selectedChannelQuery.data.id,
+                    label: selectedChannelQuery.data.name,
+                    description: [
+                        selectedChannelQuery.data.kind,
+                        selectedChannelQuery.data.status,
+                        selectedChannelQuery.data.website,
+                    ]
+                        .filter(Boolean)
+                        .join(" · "),
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [channelsQuery.data?.data, selectedChannelQuery.data]);
+    const flattenedVariableCatalog = useMemo(() => {
+        return variableCatalog.flatMap((group) => group.variables.map((variable) => ({
+            ...variable,
+            groupLabel: group.label,
+        })));
+    }, [variableCatalog]);
+    const selectedTemplateVersion = selectedTemplateVersionQuery.data;
+    const inferredTemplateVariableRows = useMemo(() => {
+        if (!selectedTemplateVersion)
+            return [];
+        const requiredKeys = Array.isArray(selectedTemplateVersion.variableSchema?.required)
+            ? selectedTemplateVersion.variableSchema.required
+            : [];
+        const detectedKeys = inferTemplateVariableKeys(selectedTemplateVersion.body, requiredKeys);
+        return flattenedVariableCatalog
+            .filter((variable) => detectedKeys.has(variable.key))
+            .map((variable) => ({
+            key: variable.key,
+            label: variable.label,
+            type: variable.type,
+            description: variable.description || variable.groupLabel,
+            example: String(variable.example),
+            required: requiredKeys.includes(variable.key),
+            value: "",
+            booleanValue: false,
+        }));
+    }, [flattenedVariableCatalog, selectedTemplateVersion]);
+    const templateVariablesSignature = useMemo(() => `${selectedTemplateVersionId ?? "none"}:${inferredTemplateVariableRows.map((row) => row.key).join("|")}`, [inferredTemplateVariableRows, selectedTemplateVersionId]);
+    useEffect(() => {
+        if (!open)
+            return;
+        if (syncedTemplateVariablesSignatureRef.current === templateVariablesSignature)
+            return;
+        const existingTemplateRows = form.getValues("templateVariables");
+        const existingAdditionalRows = form.getValues("additionalVariables");
+        const currentValues = new Map();
+        for (const row of existingTemplateRows) {
+            currentValues.set(row.key, { value: row.value, booleanValue: row.booleanValue });
+        }
+        for (const row of existingAdditionalRows) {
+            const key = row.key?.trim();
+            if (!key)
+                continue;
+            currentValues.set(key, { value: row.value });
+        }
+        const knownKeys = new Set(inferredTemplateVariableRows.map((row) => row.key));
+        const nextTemplateRows = inferredTemplateVariableRows.map((row) => {
+            const existing = currentValues.get(row.key);
+            return {
+                ...row,
+                value: typeof existing?.value === "string" ? existing.value : "",
+                booleanValue: typeof existing?.booleanValue === "boolean" ? existing.booleanValue : false,
+            };
+        });
+        const nextAdditionalRows = [
+            ...existingAdditionalRows.filter((row) => {
+                const key = row.key?.trim();
+                return key && !knownKeys.has(key);
+            }),
+            ...existingTemplateRows
+                .filter((row) => !knownKeys.has(row.key))
+                .map((row) => ({
+                key: row.key,
+                value: row.type === "boolean" ? String(row.booleanValue) : row.value,
+            })),
+        ];
+        templateVariablesFieldArray.replace(nextTemplateRows);
+        additionalVariablesFieldArray.replace(nextAdditionalRows.filter((row, index, rows) => rows.findIndex((candidate) => candidate.key === row.key && candidate.value === row.value) === index));
+        syncedTemplateVariablesSignatureRef.current = templateVariablesSignature;
+    }, [
+        additionalVariablesFieldArray,
+        form,
+        inferredTemplateVariableRows,
+        open,
+        templateVariablesSignature,
+        templateVariablesFieldArray,
+    ]);
+    const onSubmit = async (values) => {
+        const payload = {
+            scope: values.scope,
+            title: values.title,
+            contractNumber: values.contractNumber?.trim() || null,
+            language: values.language || "en",
+            templateVersionId: values.templateVersionId || undefined,
+            seriesId: values.seriesId || undefined,
+            personId: values.personId || undefined,
+            organizationId: values.organizationId || undefined,
+            supplierId: values.supplierId || undefined,
+            channelId: values.channelId || undefined,
+            expiresAt: values.expiresAt || undefined,
+            variables: buildVariablesPayload(values.templateVariables, values.additionalVariables),
+            metadata: buildRecordFromPairs(values.metadataEntries),
+        };
+        let savedContract;
+        if (isEditing && contract) {
+            savedContract = await update.mutateAsync({ id: contract.id, input: payload });
+        }
+        else {
+            savedContract = await create.mutateAsync(payload);
+        }
+        if (selectedFile) {
+            await upload.mutateAsync({
+                contractId: savedContract.id,
+                input: {
+                    file: selectedFile,
+                    name: selectedFile.name,
+                    kind: "document",
+                },
+            });
+        }
+        onSuccess();
+    };
+    const onSelectedFile = (file) => {
+        setSelectedFile(file);
+        setIsDraggingFile(false);
+    };
+    const isSubmitting = form.formState.isSubmitting || create.isPending || update.isPending || upload.isPending;
+    const submitError = create.error ?? update.error ?? upload.error ?? null;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "xl", className: "h-[calc(100vh-2rem)] max-h-[calc(100vh-2rem)]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? t.titleEdit : t.titleNew }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.setupSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.setupSectionDescription })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.scopeLabel }), _jsxs(Select, { items: SCOPE_VALUES.map((value) => ({
+                                                                value,
+                                                                label: t.scopeOptions[value],
+                                                            })), value: selectedScope, onValueChange: (value) => form.setValue("scope", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SCOPE_VALUES.map((value) => (_jsx(SelectItem, { value: value, children: t.scopeOptions[value] }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.languageLabel }), _jsx(SearchableSelect, { value: selectedLanguage, onChange: (value) => form.setValue("language", value ?? "en", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: languageOptions, placeholder: t.languagePlaceholder, searchPlaceholder: t.languageSearchPlaceholder, emptyLabel: t.languageEmpty, loadingLabel: t.loading })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.titleLabel }), _jsx(Input, { ...form.register("title"), placeholder: t.titlePlaceholder }), form.formState.errors.title ? (_jsx("p", { className: "text-xs text-destructive", children: resolveValidation(form.formState.errors.title.message) })) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.contractNumberLabel }), _jsx(Input, { ...form.register("contractNumber"), placeholder: t.contractNumberPlaceholder, maxLength: 100 })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.expiresAtLabel }), _jsx(DateTimePicker, { value: form.watch("expiresAt") || null, onChange: (next) => form.setValue("expiresAt", next ?? "", {
+                                                                shouldValidate: true,
+                                                                shouldDirty: true,
+                                                            }), placeholder: t.expiresAtPlaceholder, className: "w-full" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.templateLabel }), _jsx(SearchableSelect, { value: templateId, onChange: (value) => {
+                                                                setTemplateId(value);
+                                                                form.setValue("templateVersionId", "", {
+                                                                    shouldDirty: true,
+                                                                    shouldValidate: true,
+                                                                });
+                                                                syncedTemplateVariablesSignatureRef.current = "";
+                                                            }, options: templateOptions, placeholder: t.templatePlaceholder, searchPlaceholder: t.templateSearchPlaceholder, emptyLabel: t.templateEmpty, loading: templateListQuery.isPending || selectedTemplateQuery.isPending, onSearchChange: setTemplateSearch, loadingLabel: t.loading })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.templateVersionLabel }), _jsx(SearchableSelect, { value: selectedTemplateVersionId, onChange: (value) => {
+                                                                form.setValue("templateVersionId", value ?? "", {
+                                                                    shouldDirty: true,
+                                                                    shouldValidate: true,
+                                                                });
+                                                                syncedTemplateVariablesSignatureRef.current = "";
+                                                            }, options: templateVersionOptions, placeholder: t.templateVersionPlaceholder, searchPlaceholder: t.templateVersionSearchPlaceholder, emptyLabel: templateId ? t.templateVersionEmpty : t.templateVersionPickTemplateFirst, loading: templateVersionsQuery.isPending || selectedTemplateVersionQuery.isPending, disabled: !templateId, loadingLabel: t.loading })] })] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.numberSeriesLabel }), _jsx(SearchableSelect, { value: selectedSeriesId, onChange: (value) => form.setValue("seriesId", value ?? "", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: seriesOptions, placeholder: t.numberSeriesPlaceholder, searchPlaceholder: t.numberSeriesSearchPlaceholder, emptyLabel: t.numberSeriesEmpty, loading: numberSeriesQuery.isPending, loadingLabel: t.loading })] }), _jsx(ContractUploadField, { label: t.attachmentLabel, placeholder: t.attachmentPlaceholder, selectedFile: selectedFile, isDraggingFile: isDraggingFile, fileInputRef: fileInputRef, onSelectedFile: onSelectedFile, onDraggingFileChange: setIsDraggingFile })] })] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.linkedSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.linkedSectionDescription })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.personLabel }), _jsx(SearchableSelect, { value: selectedPersonId, onChange: (value) => form.setValue("personId", value ?? "", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: personOptions, placeholder: t.personPlaceholder, searchPlaceholder: t.personSearchPlaceholder, emptyLabel: t.personEmpty, loading: peopleQuery.isPending || selectedPersonQuery.isPending, onSearchChange: setPersonSearch, loadingLabel: t.loading })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.organizationLabel }), _jsx(SearchableSelect, { value: selectedOrganizationId, onChange: (value) => form.setValue("organizationId", value ?? "", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: organizationOptions, placeholder: t.organizationPlaceholder, searchPlaceholder: t.organizationSearchPlaceholder, emptyLabel: t.organizationEmpty, loading: organizationsQuery.isPending, onSearchChange: setOrganizationSearch, loadingLabel: t.loading })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.supplierLabel }), _jsx(SearchableSelect, { value: selectedSupplierId, onChange: (value) => form.setValue("supplierId", value ?? "", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: supplierOptions, placeholder: t.supplierPlaceholder, searchPlaceholder: t.supplierSearchPlaceholder, emptyLabel: t.supplierEmpty, loading: suppliersQuery.isPending || selectedSupplierQuery.isPending, onSearchChange: setSupplierSearch, loadingLabel: t.loading })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.channelLabel }), _jsx(SearchableSelect, { value: selectedChannelId, onChange: (value) => form.setValue("channelId", value ?? "", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: channelOptions, placeholder: t.channelPlaceholder, searchPlaceholder: t.channelSearchPlaceholder, emptyLabel: t.channelEmpty, loading: channelsQuery.isPending || selectedChannelQuery.isPending, loadingLabel: t.loading })] })] })] }), selectedTemplateVersionId || templateVariablesFieldArray.fields.length > 0 ? (_jsxs("div", { className: "grid gap-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: t.templateVariablesSectionTitle }), !selectedTemplateVersionId ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: t.templateVariablesNoVersion })) : templateVariablesFieldArray.fields.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: t.templateVariablesNoneDetected })) : (_jsx("div", { className: "grid gap-4", children: templateVariablesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid gap-2 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-sm font-medium", children: [field.label, field.required ? (_jsx("span", { className: "ml-1 text-destructive", children: "*" })) : null] }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: field.key })] }), field.description ? (_jsx("div", { className: "max-w-sm text-right text-xs text-muted-foreground", children: field.description })) : null] }), _jsx(VariableValueField, { row: field, index: index, setValue: form.setValue, watch: form.watch, messages: t })] }, field.id))) })), _jsxs("div", { className: "grid gap-3 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium", children: t.additionalVariablesTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.additionalVariablesDescription })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => additionalVariablesFieldArray.append({ key: "", value: "" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addVariable] })] }), additionalVariablesFieldArray.fields.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: t.additionalVariablesEmpty })) : (_jsx("div", { className: "grid gap-3", children: additionalVariablesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-3", children: [_jsx(Input, { ...form.register(`additionalVariables.${index}.key`), placeholder: t.variableKeyPlaceholder }), _jsx(Input, { ...form.register(`additionalVariables.${index}.value`), placeholder: t.variableValuePlaceholder }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => additionalVariablesFieldArray.remove(index), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, field.id))) }))] })] })) : null, _jsxs("div", { className: "grid gap-3 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.metadataSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.metadataSectionDescription })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => metadataEntriesFieldArray.append({ key: "", value: "" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addMetadata] })] }), metadataEntriesFieldArray.fields.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: t.metadataEmpty })) : (_jsx("div", { className: "grid gap-3", children: metadataEntriesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] gap-3", children: [_jsx(Input, { ...form.register(`metadataEntries.${index}.key`), placeholder: t.metadataKeyPlaceholder }), _jsx(Input, { ...form.register(`metadataEntries.${index}.value`), placeholder: t.metadataValuePlaceholder }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => metadataEntriesFieldArray.remove(index), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, field.id))) }))] }), 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: t.cancel }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? t.saveChanges : t.createAction] })] })] })] }) }));
+}

package/dist/admin/contract-upload-field.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+export interface ContractUploadFieldProps {
+    label: string;
+    placeholder: string;
+    selectedFile: File | null;
+    isDraggingFile: boolean;
+    fileInputRef: RefObject<HTMLInputElement | null>;
+    onSelectedFile: (file: File) => void;
+    onDraggingFileChange: (dragging: boolean) => void;
+}
+export declare function ContractUploadField({ label, placeholder, selectedFile, isDraggingFile, fileInputRef, onSelectedFile, onDraggingFileChange, }: ContractUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contract-upload-field.d.ts.map

package/dist/admin/contract-upload-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract-upload-field.d.ts","sourceRoot":"","sources":["../../src/admin/contract-upload-field.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;IACvB,YAAY,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAChD,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,WAAW,EACX,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,EAAE,wBAAwB,2CA6D1B"}

package/dist/admin/contract-upload-field.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label } from "@voyant-travel/ui/components";
+import { FileText, Upload } from "lucide-react";
+import { formatUploadSize } from "./contract-dialog-fields.js";
+export function ContractUploadField({ label, placeholder, selectedFile, isDraggingFile, fileInputRef, onSelectedFile, onDraggingFileChange, }) {
+    const onFileDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const file = event.dataTransfer.files?.[0];
+        if (file)
+            onSelectedFile(file);
+    };
+    const onFileDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDraggingFileChange(true);
+    };
+    const onFileDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDraggingFileChange(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: label }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), onDrop: onFileDrop, onDragOver: onFileDragOver, onDragLeave: onFileDragLeave, "data-dragging": isDraggingFile, className: "flex min-h-28 flex-col items-center justify-center gap-2 rounded-md border border-dashed px-4 py-5 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-5 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-5 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-muted-foreground text-sm", children: placeholder })] })) }), _jsx("input", { ref: fileInputRef, type: "file", className: "hidden", onChange: (event) => {
+                    const file = event.currentTarget.files?.[0];
+                    if (!file)
+                        return;
+                    onSelectedFile(file);
+                    event.currentTarget.value = "";
+                } })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Packaged admin host for the operator-grade contracts list page
+ * (packaged-admin RFC Phase 3). Zero-prop: list state stays component-local
+ * (no URL search contract), opening a row resolves through the
+ * `contract.detail` semantic destination, and the create/edit dialog is the
+ * packaged operator-grade {@link ContractDialog} (CRM/supplier/channel
+ * pickers bound to their domain react hooks).
+ */
+export declare function ContractsHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contracts-host.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contracts-host.d.ts","sourceRoot":"","sources":["../../src/admin/contracts-host.tsx"],"names":[],"mappings":"AASA;;;;;;;GAOG;AACH,wBAAgB,aAAa,4CAU5B"}

package/dist/admin/contracts-host.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminNavigate } from "@voyant-travel/admin";
+import { usePerson } from "@voyant-travel/relationships-react";
+import { ContractsPage } from "../components/contracts-page.js";
+import { ContractDialog } from "./contract-dialog.js";
+/**
+ * Packaged admin host for the operator-grade contracts list page
+ * (packaged-admin RFC Phase 3). Zero-prop: list state stays component-local
+ * (no URL search contract), opening a row resolves through the
+ * `contract.detail` semantic destination, and the create/edit dialog is the
+ * packaged operator-grade {@link ContractDialog} (CRM/supplier/channel
+ * pickers bound to their domain react hooks).
+ */
+export function ContractsHost() {
+    const navigateTo = useAdminNavigate();
+    return (_jsx(ContractsPage, { onOpenContract: (id) => navigateTo("contract.detail", { contractId: id }), renderContractDialog: (props) => _jsx(ContractDialog, { ...props }), renderPersonCell: (personId) => _jsx(ContractPersonNameCell, { personId: personId }) }));
+}
+function ContractPersonNameCell({ personId }) {
+    const { data, isLoading } = usePerson(personId ?? undefined, {
+        enabled: Boolean(personId),
+    });
+    if (!personId)
+        return _jsx("span", { className: "text-muted-foreground", children: "-" });
+    if (isLoading)
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "..." });
+    if (!data) {
+        return (_jsxs("span", { className: "font-mono text-xs text-muted-foreground", title: personId, children: [personId.slice(0, 16), "..."] }));
+    }
+    const name = `${data.firstName ?? ""} ${data.lastName ?? ""}`.trim();
+    return _jsx("span", { className: "text-sm", children: name || personId.slice(0, 16) });
+}