@voyantjs/crm-ui 0.52.1 → 0.52.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organization-form.d.ts.map +1 -1
- package/dist/components/organization-form.js +2 -1
- package/dist/components/person-addresses-section.d.ts +10 -0
- package/dist/components/person-addresses-section.d.ts.map +1 -0
- package/dist/components/person-addresses-section.js +162 -0
- package/dist/components/person-detail-page.d.ts +1 -1
- package/dist/components/person-detail-page.d.ts.map +1 -1
- package/dist/components/person-detail-page.js +2 -2
- package/dist/components/person-form.d.ts.map +1 -1
- package/dist/components/person-form.js +129 -8
- package/dist/components/person-relationships-section.d.ts +12 -0
- package/dist/components/person-relationships-section.d.ts.map +1 -0
- package/dist/components/person-relationships-section.js +210 -0
- package/dist/i18n/en.d.ts +63 -2
- package/dist/i18n/en.d.ts.map +1 -1
- package/dist/i18n/en.js +63 -2
- package/dist/i18n/messages.d.ts +63 -2
- package/dist/i18n/messages.d.ts.map +1 -1
- package/dist/i18n/provider.d.ts +126 -4
- package/dist/i18n/provider.d.ts.map +1 -1
- package/dist/i18n/ro.d.ts +63 -2
- package/dist/i18n/ro.d.ts.map +1 -1
- package/dist/i18n/ro.js +63 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"organization-form.d.ts","sourceRoot":"","sources":["../../src/components/organization-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"organization-form.d.ts","sourceRoot":"","sources":["../../src/components/organization-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AAkB5B,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAEnF,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAuGD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CA6QpF"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { useOrganizationMutation, } from "@voyantjs/crm-react";
|
|
4
4
|
import { useAddresses, useAddressMutation, useContactPointMutation, useContactPoints, } from "@voyantjs/identity-react";
|
|
5
5
|
import { Button } from "@voyantjs/ui/components/button";
|
|
6
|
+
import { CountryCombobox } from "@voyantjs/ui/components/country-combobox";
|
|
6
7
|
import { Input } from "@voyantjs/ui/components/input";
|
|
7
8
|
import { Label } from "@voyantjs/ui/components/label";
|
|
8
9
|
import { Loader2 } from "lucide-react";
|
|
@@ -193,5 +194,5 @@ export function OrganizationForm({ mode, onSuccess, onCancel }) {
|
|
|
193
194
|
setError(err instanceof Error ? err.message : messages.organizationForm.validation.saveFailed);
|
|
194
195
|
}
|
|
195
196
|
};
|
|
196
|
-
return (_jsxs("form", { "data-slot": "organization-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-name", children: messages.organizationForm.fields.name }), _jsx(Input, { id: "organization-name", required: true, value: state.name, onChange: field("name") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-legal-name", children: messages.organizationForm.fields.legalName }), _jsx(Input, { id: "organization-legal-name", value: state.legalName, onChange: field("legalName") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-vat-number", children: messages.organizationForm.fields.vatNumber }), _jsx(Input, { id: "organization-vat-number", value: state.vatNumber, onChange: field("vatNumber") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-website", children: messages.organizationForm.fields.website }), _jsx(Input, { id: "organization-website", type: "url", value: state.website, onChange: field("website") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-industry", children: messages.organizationForm.fields.industry }), _jsx(Input, { id: "organization-industry", value: state.industry, onChange: field("industry") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-email", children: messages.organizationForm.fields.billingEmail }), _jsx(Input, { id: "organization-billing-email", type: "email", value: state.billingEmail, onChange: field("billingEmail") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-address-line-1", children: messages.organizationForm.fields.billingAddressLine1 }), _jsx(Input, { id: "organization-billing-address-line-1", value: state.billingAddressLine1, onChange: field("billingAddressLine1") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-address-line-2", children: messages.organizationForm.fields.billingAddressLine2 }), _jsx(Input, { id: "organization-billing-address-line-2", value: state.billingAddressLine2, onChange: field("billingAddressLine2") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-city", children: messages.organizationForm.fields.billingCity }), _jsx(Input, { id: "organization-billing-city", value: state.billingCity, onChange: field("billingCity") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-region", children: messages.organizationForm.fields.billingRegion }), _jsx(Input, { id: "organization-billing-region", value: state.billingRegion, onChange: field("billingRegion") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-postal-code", children: messages.organizationForm.fields.billingPostalCode }), _jsx(Input, { id: "organization-billing-postal-code", value: state.billingPostalCode, onChange: field("billingPostalCode") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-country", children: messages.organizationForm.fields.billingCountry }), _jsx(
|
|
197
|
+
return (_jsxs("form", { "data-slot": "organization-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-name", children: messages.organizationForm.fields.name }), _jsx(Input, { id: "organization-name", required: true, value: state.name, onChange: field("name") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-legal-name", children: messages.organizationForm.fields.legalName }), _jsx(Input, { id: "organization-legal-name", value: state.legalName, onChange: field("legalName") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-vat-number", children: messages.organizationForm.fields.vatNumber }), _jsx(Input, { id: "organization-vat-number", value: state.vatNumber, onChange: field("vatNumber") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-website", children: messages.organizationForm.fields.website }), _jsx(Input, { id: "organization-website", type: "url", value: state.website, onChange: field("website") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-industry", children: messages.organizationForm.fields.industry }), _jsx(Input, { id: "organization-industry", value: state.industry, onChange: field("industry") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-email", children: messages.organizationForm.fields.billingEmail }), _jsx(Input, { id: "organization-billing-email", type: "email", value: state.billingEmail, onChange: field("billingEmail") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-address-line-1", children: messages.organizationForm.fields.billingAddressLine1 }), _jsx(Input, { id: "organization-billing-address-line-1", value: state.billingAddressLine1, onChange: field("billingAddressLine1") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "organization-billing-address-line-2", children: messages.organizationForm.fields.billingAddressLine2 }), _jsx(Input, { id: "organization-billing-address-line-2", value: state.billingAddressLine2, onChange: field("billingAddressLine2") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-city", children: messages.organizationForm.fields.billingCity }), _jsx(Input, { id: "organization-billing-city", value: state.billingCity, onChange: field("billingCity") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-region", children: messages.organizationForm.fields.billingRegion }), _jsx(Input, { id: "organization-billing-region", value: state.billingRegion, onChange: field("billingRegion") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-postal-code", children: messages.organizationForm.fields.billingPostalCode }), _jsx(Input, { id: "organization-billing-postal-code", value: state.billingPostalCode, onChange: field("billingPostalCode") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "organization-billing-country", children: messages.organizationForm.fields.billingCountry }), _jsx(CountryCombobox, { value: state.billingCountry || null, onChange: (code) => setState((prev) => ({ ...prev, billingCountry: code ?? "" })) })] })] }), error ? (_jsx("p", { "data-slot": "organization-form-error", className: "text-sm text-destructive", children: error })) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" }), messages.common.saving] })) : mode.kind === "create" ? (messages.organizationForm.actions.create) : (messages.common.saveChanges) })] })] }));
|
|
197
198
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface PersonAddressesSectionProps {
|
|
2
|
+
personId: string;
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* Multi-address management for a Person — inline list with expand-to-edit.
|
|
6
|
+
* Renders inside a Sheet, so add/edit are inline expanding forms rather
|
|
7
|
+
* than nested dialogs.
|
|
8
|
+
*/
|
|
9
|
+
export declare function PersonAddressesSection({ personId }: PersonAddressesSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=person-addresses-section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"person-addresses-section.d.ts","sourceRoot":"","sources":["../../src/components/person-addresses-section.tsx"],"names":[],"mappings":"AAgGA,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,2CAoK/E"}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useAddresses, useAddressMutation } from "@voyantjs/identity-react";
|
|
4
|
+
import { Badge } from "@voyantjs/ui/components/badge";
|
|
5
|
+
import { Button } from "@voyantjs/ui/components/button";
|
|
6
|
+
import { CountryCombobox } from "@voyantjs/ui/components/country-combobox";
|
|
7
|
+
import { Input } from "@voyantjs/ui/components/input";
|
|
8
|
+
import { Label } from "@voyantjs/ui/components/label";
|
|
9
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
|
|
10
|
+
import { Switch } from "@voyantjs/ui/components/switch";
|
|
11
|
+
import { Textarea } from "@voyantjs/ui/components/textarea";
|
|
12
|
+
import { Loader2, MapPin, Pencil, Plus, Trash2, X } from "lucide-react";
|
|
13
|
+
import * as React from "react";
|
|
14
|
+
import { useCrmUiMessagesOrDefault } from "../i18n/index.js";
|
|
15
|
+
const ADDRESS_LABELS = [
|
|
16
|
+
"primary",
|
|
17
|
+
"billing",
|
|
18
|
+
"shipping",
|
|
19
|
+
"mailing",
|
|
20
|
+
"meeting",
|
|
21
|
+
"service",
|
|
22
|
+
"legal",
|
|
23
|
+
"other",
|
|
24
|
+
];
|
|
25
|
+
function emptyAddressFormState() {
|
|
26
|
+
return {
|
|
27
|
+
label: "primary",
|
|
28
|
+
line1: "",
|
|
29
|
+
line2: "",
|
|
30
|
+
city: "",
|
|
31
|
+
region: "",
|
|
32
|
+
postalCode: "",
|
|
33
|
+
country: null,
|
|
34
|
+
isPrimary: false,
|
|
35
|
+
notes: "",
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function fromRecord(address) {
|
|
39
|
+
return {
|
|
40
|
+
label: ADDRESS_LABELS.includes(address.label ?? "")
|
|
41
|
+
? address.label
|
|
42
|
+
: "other",
|
|
43
|
+
line1: address.line1 ?? "",
|
|
44
|
+
line2: address.line2 ?? "",
|
|
45
|
+
city: address.city ?? "",
|
|
46
|
+
region: address.region ?? "",
|
|
47
|
+
postalCode: address.postalCode ?? "",
|
|
48
|
+
country: address.country ?? null,
|
|
49
|
+
isPrimary: address.isPrimary,
|
|
50
|
+
notes: address.notes ?? "",
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
function normalizeNullable(value) {
|
|
54
|
+
const trimmed = value.trim();
|
|
55
|
+
return trimmed ? trimmed : null;
|
|
56
|
+
}
|
|
57
|
+
function formatAddressText(address) {
|
|
58
|
+
if (address.fullText?.trim())
|
|
59
|
+
return address.fullText.trim();
|
|
60
|
+
const locality = [address.city, address.region, address.postalCode]
|
|
61
|
+
.map((part) => part?.trim())
|
|
62
|
+
.filter(Boolean)
|
|
63
|
+
.join(", ");
|
|
64
|
+
const parts = [address.line1, address.line2, locality || null, address.country]
|
|
65
|
+
.map((part) => part?.trim())
|
|
66
|
+
.filter(Boolean);
|
|
67
|
+
return parts.length > 0 ? parts.join(", ") : null;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Multi-address management for a Person — inline list with expand-to-edit.
|
|
71
|
+
* Renders inside a Sheet, so add/edit are inline expanding forms rather
|
|
72
|
+
* than nested dialogs.
|
|
73
|
+
*/
|
|
74
|
+
export function PersonAddressesSection({ personId }) {
|
|
75
|
+
const messages = useCrmUiMessagesOrDefault();
|
|
76
|
+
const labels = messages.personForm.addresses;
|
|
77
|
+
const addressQuery = useAddresses({ entityType: "person", entityId: personId });
|
|
78
|
+
const mutation = useAddressMutation();
|
|
79
|
+
const [editing, setEditing] = React.useState({ kind: "closed" });
|
|
80
|
+
const addresses = addressQuery.data?.data ?? [];
|
|
81
|
+
const sorted = React.useMemo(() => [...addresses].sort((left, right) => {
|
|
82
|
+
if (left.isPrimary === right.isPrimary) {
|
|
83
|
+
return new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime();
|
|
84
|
+
}
|
|
85
|
+
return left.isPrimary ? -1 : 1;
|
|
86
|
+
}), [addresses]);
|
|
87
|
+
const handleSubmit = async (form) => {
|
|
88
|
+
const payload = {
|
|
89
|
+
entityType: "person",
|
|
90
|
+
entityId: personId,
|
|
91
|
+
label: form.label,
|
|
92
|
+
line1: normalizeNullable(form.line1),
|
|
93
|
+
line2: normalizeNullable(form.line2),
|
|
94
|
+
city: normalizeNullable(form.city),
|
|
95
|
+
region: normalizeNullable(form.region),
|
|
96
|
+
postalCode: normalizeNullable(form.postalCode),
|
|
97
|
+
country: form.country?.trim() ? form.country.trim().toUpperCase() : null,
|
|
98
|
+
isPrimary: form.isPrimary,
|
|
99
|
+
notes: normalizeNullable(form.notes),
|
|
100
|
+
fullText: null,
|
|
101
|
+
};
|
|
102
|
+
payload.fullText =
|
|
103
|
+
formatAddressText({
|
|
104
|
+
...payload,
|
|
105
|
+
}) ?? null;
|
|
106
|
+
if (editing.kind === "edit") {
|
|
107
|
+
await mutation.update.mutateAsync({ id: editing.id, input: payload });
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
await mutation.create.mutateAsync(payload);
|
|
111
|
+
}
|
|
112
|
+
setEditing({ kind: "closed" });
|
|
113
|
+
};
|
|
114
|
+
return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: messages.personForm.sections.addresses }), editing.kind === "closed" ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setEditing({ kind: "create" }), children: [_jsx(Plus, { className: "mr-1 size-3.5" }), labels.add] })) : null] }), addressQuery.isPending ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), labels.saving] })) : sorted.length === 0 && editing.kind === "closed" ? (_jsx("p", { className: "text-sm text-muted-foreground", children: labels.empty })) : (_jsx("ul", { className: "flex flex-col gap-2", children: sorted.map((address) => {
|
|
115
|
+
const isEditingThis = editing.kind === "edit" && editing.id === address.id;
|
|
116
|
+
const formatted = formatAddressText(address);
|
|
117
|
+
const typeLabel = addressLabelText(address.label, labels);
|
|
118
|
+
return (_jsxs("li", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 p-3", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: "outline", className: "text-[10px]", children: typeLabel }), address.isPrimary ? (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: labels.primaryToggle })) : null] }), _jsxs("div", { className: "flex items-start gap-1.5 text-sm", children: [_jsx(MapPin, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate", children: formatted ?? labels.noValue }), address.notes ? (_jsx("p", { className: "text-xs text-muted-foreground", children: address.notes })) : null] })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setEditing(isEditingThis ? { kind: "closed" } : { kind: "edit", id: address.id }), "aria-label": labels.edit, children: isEditingThis ? _jsx(X, { className: "size-3.5" }) : _jsx(Pencil, { className: "size-3.5" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-destructive", onClick: () => mutation.remove.mutate(address.id), disabled: mutation.remove.isPending, "aria-label": labels.remove, children: _jsx(Trash2, { className: "size-3.5" }) })] })] }), isEditingThis ? (_jsx("div", { className: "border-t p-3", children: _jsx(AddressInlineForm, { initial: fromRecord(address), pending: mutation.update.isPending, submitLabel: labels.edit, onCancel: () => setEditing({ kind: "closed" }), onSubmit: handleSubmit }) })) : null] }, address.id));
|
|
119
|
+
}) })), editing.kind === "create" ? (_jsx("div", { className: "rounded-md border bg-muted/30 p-3", children: _jsx(AddressInlineForm, { initial: emptyAddressFormState(), pending: mutation.create.isPending, submitLabel: labels.add, onCancel: () => setEditing({ kind: "closed" }), onSubmit: handleSubmit }) })) : null] }));
|
|
120
|
+
}
|
|
121
|
+
function addressLabelText(label, labels) {
|
|
122
|
+
switch (label) {
|
|
123
|
+
case "primary":
|
|
124
|
+
return labels.typePrimary;
|
|
125
|
+
case "billing":
|
|
126
|
+
return labels.typeBilling;
|
|
127
|
+
case "shipping":
|
|
128
|
+
return labels.typeShipping;
|
|
129
|
+
case "mailing":
|
|
130
|
+
return labels.typeMailing;
|
|
131
|
+
case "meeting":
|
|
132
|
+
return labels.typeMeeting;
|
|
133
|
+
case "service":
|
|
134
|
+
return labels.typeService;
|
|
135
|
+
case "legal":
|
|
136
|
+
return labels.typeLegal;
|
|
137
|
+
case "other":
|
|
138
|
+
return labels.typeOther;
|
|
139
|
+
default:
|
|
140
|
+
return label;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
function AddressInlineForm({ initial, pending, submitLabel, onCancel, onSubmit, }) {
|
|
144
|
+
const messages = useCrmUiMessagesOrDefault();
|
|
145
|
+
const labels = messages.personForm.addresses;
|
|
146
|
+
const fields = messages.personForm.fields;
|
|
147
|
+
const [form, setForm] = React.useState(initial);
|
|
148
|
+
const [error, setError] = React.useState(null);
|
|
149
|
+
const updateField = (key, value) => {
|
|
150
|
+
setForm((current) => ({ ...current, [key]: value }));
|
|
151
|
+
};
|
|
152
|
+
const submit = async () => {
|
|
153
|
+
try {
|
|
154
|
+
setError(null);
|
|
155
|
+
await onSubmit(form);
|
|
156
|
+
}
|
|
157
|
+
catch (cause) {
|
|
158
|
+
setError(cause instanceof Error ? cause.message : labels.saveFailed);
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: labels.typeLabel }), _jsxs(Select, { value: form.label, onValueChange: (value) => updateField("label", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ADDRESS_LABELS.map((label) => (_jsx(SelectItem, { value: label, children: addressLabelText(label, labels) }, label))) })] })] }), _jsxs("div", { className: "flex items-center gap-2 sm:pb-2", children: [_jsx(Switch, { checked: form.isPrimary, onCheckedChange: (checked) => updateField("isPrimary", checked) }), _jsx(Label, { className: "text-xs", children: labels.primaryToggle })] })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressLine1 }), _jsx(Input, { value: form.line1, onChange: (event) => updateField("line1", event.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressLine2 }), _jsx(Input, { value: form.line2, onChange: (event) => updateField("line2", event.target.value) })] })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressCity }), _jsx(Input, { value: form.city, onChange: (event) => updateField("city", event.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressRegion }), _jsx(Input, { value: form.region, onChange: (event) => updateField("region", event.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressPostalCode }), _jsx(Input, { value: form.postalCode, onChange: (event) => updateField("postalCode", event.target.value) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: fields.addressCountry }), _jsx(CountryCombobox, { value: form.country, onChange: (code) => updateField("country", code) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs", children: labels.notesLabel }), _jsx(Textarea, { value: form.notes, onChange: (event) => updateField("notes", event.target.value), className: "min-h-[80px]" })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, disabled: pending, children: messages.common.cancel }), _jsxs(Button, { type: "button", size: "sm", onClick: () => void submit(), disabled: pending, children: [pending ? _jsx(Loader2, { className: "mr-2 size-3.5 animate-spin" }) : null, submitLabel] })] })] }));
|
|
162
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ActivityRecord, OpportunityRecord, OrganizationRecord, PersonDocumentRecord, PersonRecord, PersonRelationshipRecord, PersonTravelSnapshotRecord, UpdatePersonInput } from "@voyantjs/crm-react";
|
|
2
2
|
import { type ReactNode } from "react";
|
|
3
3
|
export type PersonDetailTab = "overview" | "opportunities" | "activities" | "relationships" | "documents" | "bookings" | "invoices" | "payments" | "contracts";
|
|
4
|
-
export type PersonData = Pick<PersonRecord, "
|
|
4
|
+
export type PersonData = Pick<PersonRecord, "dateOfBirth" | "createdAt" | "email" | "firstName" | "id" | "jobTitle" | "lastName" | "notes" | "organizationId" | "phone" | "preferredCurrency" | "preferredLanguage" | "relation" | "source" | "status" | "tags" | "updatedAt" | "website">;
|
|
5
5
|
export type PersonOrganization = Pick<OrganizationRecord, "id" | "name" | "website">;
|
|
6
6
|
export type PersonOpportunity = Pick<OpportunityRecord, "expectedCloseDate" | "id" | "status" | "title" | "updatedAt" | "valueAmountCents" | "valueCurrency">;
|
|
7
7
|
export type PersonActivity = Pick<ActivityRecord, "createdAt" | "description" | "dueAt" | "id" | "status" | "subject" | "type" | "updatedAt">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/person-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,YAAY,EACZ,wBAAwB,EACxB,0BAA0B,EAC1B,iBAAiB,EAClB,MAAM,qBAAqB,CAAA;AA4C5B,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAA;AAWpE,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,eAAe,GACf,YAAY,GACZ,eAAe,GACf,WAAW,GACX,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,CAAA;AAEf,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,EACV,
|
|
1
|
+
{"version":3,"file":"person-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/person-detail-page.tsx"],"names":[],"mappings":"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"}
|
|
@@ -109,7 +109,7 @@ export function PersonSidebar({ person, organization, onOrganizationOpen, onUpda
|
|
|
109
109
|
{ value: "inactive", label: messages.common.recordStatusLabels.inactive },
|
|
110
110
|
{ value: "archived", label: messages.common.recordStatusLabels.archived },
|
|
111
111
|
];
|
|
112
|
-
return (_jsxs("aside", { className: "col-span-12 flex flex-col gap-4 lg:col-span-3", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-center gap-3 pt-6 text-center", children: [_jsx(Avatar, { className: "size-20", children: _jsx(AvatarFallback, { className: "text-xl", children: initialsFrom(displayName) }) }), _jsxs("div", { className: "flex max-w-full flex-col gap-1", children: [_jsx("h2", { className: "truncate text-lg font-semibold leading-tight", children: displayName }), person.jobTitle ? (_jsx("p", { className: "truncate text-sm text-muted-foreground", children: person.jobTitle })) : null, organization ? (_jsx("button", { type: "button", onClick: () => onOrganizationOpen?.(organization.id), className: "truncate text-sm text-primary hover:underline", children: organization.name })) : null] }), _jsxs("div", { className: "flex flex-wrap justify-center gap-1", children: [person.relation ? (_jsx(Badge, { variant: "secondary", children: messages.common.relationTypeLabels[person.relation] ?? person.relation })) : null, _jsx(Badge, { variant: "outline", children: messages.common.recordStatusLabels[person.status] ?? person.status })] })] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm font-semibold", children: messages.personDetail.sidebar.about }) }), _jsxs(CardContent, { className: "divide-y text-sm", children: [_jsx(InlineField, { icon: User, label: messages.personDetail.sidebar.fields.firstName, value: person.firstName, onSave: (next) => onUpdateField({ firstName: next ?? person.firstName }) }), _jsx(InlineField, { icon: User, label: messages.personDetail.sidebar.fields.lastName, value: person.lastName, onSave: (next) => onUpdateField({ lastName: next ?? person.lastName }) }), _jsx(InlineField, { icon: BriefcaseBusiness, label: messages.personDetail.sidebar.fields.jobTitle, value: person.jobTitle, onSave: (next) => onUpdateField({ jobTitle: next }) }), _jsx(InlineField, { icon: Mail, label: messages.personDetail.sidebar.fields.email, kind: "email", value: person.email, onSave: (next) => onUpdateField({ email: next }) }), _jsx(InlineField, { icon: Phone, label: messages.personDetail.sidebar.fields.phone, value: person.phone, onSave: (next) => onUpdateField({ phone: next }) }), _jsx(InlineField, { icon: Globe, label: messages.personDetail.sidebar.fields.website, kind: "url", value: person.website, onSave: (next) => onUpdateField({ website: next }) }), _jsx(InlineSelectField, { icon: Users, label: messages.personDetail.sidebar.fields.relation, value: person.relation, options: relationOptions, onSave: (next) => onUpdateField({ relation: next }) }), _jsx(InlineSelectField, { icon: CircleDot, label: messages.personDetail.sidebar.fields.status, value: person.status, options: statusOptions, allowClear: false, onSave: (next) => onUpdateField({ status: next ?? "active" }) }), _jsx(InlineCurrencyField, { label: messages.personDetail.sidebar.fields.preferredCurrency, value: person.preferredCurrency, onSave: (next) => onUpdateField({ preferredCurrency: next }) }), _jsx(InlineLanguageField, { icon: Languages, label: messages.personDetail.sidebar.fields.preferredLanguage, value: person.preferredLanguage, onSave: (next) => onUpdateField({ preferredLanguage: next }) }), _jsx(InlineField, { icon: Calendar, label: messages.personDetail.sidebar.fields.
|
|
112
|
+
return (_jsxs("aside", { className: "col-span-12 flex flex-col gap-4 lg:col-span-3", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-center gap-3 pt-6 text-center", children: [_jsx(Avatar, { className: "size-20", children: _jsx(AvatarFallback, { className: "text-xl", children: initialsFrom(displayName) }) }), _jsxs("div", { className: "flex max-w-full flex-col gap-1", children: [_jsx("h2", { className: "truncate text-lg font-semibold leading-tight", children: displayName }), person.jobTitle ? (_jsx("p", { className: "truncate text-sm text-muted-foreground", children: person.jobTitle })) : null, organization ? (_jsx("button", { type: "button", onClick: () => onOrganizationOpen?.(organization.id), className: "truncate text-sm text-primary hover:underline", children: organization.name })) : null] }), _jsxs("div", { className: "flex flex-wrap justify-center gap-1", children: [person.relation ? (_jsx(Badge, { variant: "secondary", children: messages.common.relationTypeLabels[person.relation] ?? person.relation })) : null, _jsx(Badge, { variant: "outline", children: messages.common.recordStatusLabels[person.status] ?? person.status })] })] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm font-semibold", children: messages.personDetail.sidebar.about }) }), _jsxs(CardContent, { className: "divide-y text-sm", children: [_jsx(InlineField, { icon: User, label: messages.personDetail.sidebar.fields.firstName, value: person.firstName, onSave: (next) => onUpdateField({ firstName: next ?? person.firstName }) }), _jsx(InlineField, { icon: User, label: messages.personDetail.sidebar.fields.lastName, value: person.lastName, onSave: (next) => onUpdateField({ lastName: next ?? person.lastName }) }), _jsx(InlineField, { icon: BriefcaseBusiness, label: messages.personDetail.sidebar.fields.jobTitle, value: person.jobTitle, onSave: (next) => onUpdateField({ jobTitle: next }) }), _jsx(InlineField, { icon: Mail, label: messages.personDetail.sidebar.fields.email, kind: "email", value: person.email, onSave: (next) => onUpdateField({ email: next }) }), _jsx(InlineField, { icon: Phone, label: messages.personDetail.sidebar.fields.phone, value: person.phone, onSave: (next) => onUpdateField({ phone: next }) }), _jsx(InlineField, { icon: Globe, label: messages.personDetail.sidebar.fields.website, kind: "url", value: person.website, onSave: (next) => onUpdateField({ website: next }) }), _jsx(InlineSelectField, { icon: Users, label: messages.personDetail.sidebar.fields.relation, value: person.relation, options: relationOptions, onSave: (next) => onUpdateField({ relation: next }) }), _jsx(InlineSelectField, { icon: CircleDot, label: messages.personDetail.sidebar.fields.status, value: person.status, options: statusOptions, allowClear: false, onSave: (next) => onUpdateField({ status: next ?? "active" }) }), _jsx(InlineCurrencyField, { label: messages.personDetail.sidebar.fields.preferredCurrency, value: person.preferredCurrency, onSave: (next) => onUpdateField({ preferredCurrency: next }) }), _jsx(InlineLanguageField, { icon: Languages, label: messages.personDetail.sidebar.fields.preferredLanguage, value: person.preferredLanguage, onSave: (next) => onUpdateField({ preferredLanguage: next }) }), _jsx(InlineField, { icon: Calendar, label: messages.personDetail.sidebar.fields.dateOfBirth, value: person.dateOfBirth, onSave: (next) => onUpdateField({ dateOfBirth: next }) }), _jsx(InlineField, { icon: Tag, label: messages.personDetail.sidebar.fields.source, value: person.source, onSave: (next) => onUpdateField({ source: next }) })] })] }), websiteHref ? (_jsxs("a", { href: websiteHref, target: "_blank", rel: "noreferrer", className: cn(buttonVariants({ variant: "outline" })), children: [_jsx(Globe, { className: "size-4", "aria-hidden": "true" }), messages.personDetail.sidebar.openWebsite] })) : null, _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm font-semibold", children: messages.personDetail.sidebar.tags }) }), _jsx(CardContent, { children: _jsx(TagsEditor, { tags: person.tags, onChange: (tags) => onUpdateField({ tags }) }) })] }), children] }));
|
|
113
113
|
}
|
|
114
114
|
export function PersonMain({ activeTab, setActiveTab, person, organization, opportunities, activities, relationships, documents, travelSnapshot, opportunitiesPending, activitiesPending, relationshipsPending, documentsPending, travelSnapshotPending, totalOpenValue, primaryCurrency, onUpdateField, slots, }) {
|
|
115
115
|
const i18n = useCrmUiI18nOrDefault();
|
|
@@ -163,7 +163,7 @@ export function PersonOverviewPanel({ person, organization, travelSnapshot, trav
|
|
|
163
163
|
},
|
|
164
164
|
].filter((row) => Boolean(row.value))
|
|
165
165
|
: [], [i18n, messages, travelSnapshot]);
|
|
166
|
-
return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("dl", { className: "grid grid-cols-1 gap-4 text-sm sm:grid-cols-2", children: [_jsx(OverviewTerm, { label: messages.personDetail.sections.created, children: formatCrmDate(i18n, person.createdAt) }), _jsx(OverviewTerm, { label: messages.personDetail.sections.updated, children: formatCrmRelative(i18n, person.updatedAt) }), organization ? (_jsx(OverviewTerm, { label: messages.personDetail.sections.organization, children: organization.name })) : null, person.
|
|
166
|
+
return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("dl", { className: "grid grid-cols-1 gap-4 text-sm sm:grid-cols-2", children: [_jsx(OverviewTerm, { label: messages.personDetail.sections.created, children: formatCrmDate(i18n, person.createdAt) }), _jsx(OverviewTerm, { label: messages.personDetail.sections.updated, children: formatCrmRelative(i18n, person.updatedAt) }), organization ? (_jsx(OverviewTerm, { label: messages.personDetail.sections.organization, children: organization.name })) : null, person.dateOfBirth ? (_jsx(OverviewTerm, { label: messages.personDetail.sections.dateOfBirth, children: formatCrmDate(i18n, person.dateOfBirth) })) : null, person.notes ? (_jsx(OverviewTerm, { label: messages.personDetail.sections.notes, className: "sm:col-span-2", children: _jsx("span", { className: "whitespace-pre-wrap", children: person.notes }) })) : null] }), _jsx(Separator, {}), _jsx(InlineField, { label: messages.personDetail.sections.notes, kind: "textarea", value: person.notes, onSave: (next) => onUpdateField({ notes: next }) }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-sm font-semibold", children: [_jsx(ShieldCheck, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), messages.personDetail.sections.travelProfile] }) }), _jsx(CardContent, { children: travelSnapshotPending ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx(Loader2, { className: "size-5 animate-spin text-muted-foreground" }) })) : snapshotRows.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.personDetail.empty.noTravelProfile })) : (_jsx("dl", { className: "grid grid-cols-1 gap-4 text-sm sm:grid-cols-2", children: snapshotRows.map((row) => (_jsx(OverviewTerm, { label: row.label, children: row.value }, row.label))) })) })] })] }));
|
|
167
167
|
}
|
|
168
168
|
export function OverviewTerm({ label, children, className }) {
|
|
169
169
|
return (_jsxs("div", { className: className, children: [_jsx("dt", { className: "text-xs font-medium uppercase text-muted-foreground", children: label }), _jsx("dd", { className: "mt-0.5", children: children })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person-form.d.ts","sourceRoot":"","sources":["../../src/components/person-form.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"person-form.d.ts","sourceRoot":"","sources":["../../src/components/person-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,YAAY,EAIlB,MAAM,qBAAqB,CAAA;AAsB5B,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,YAAY,CAAA;CAAE,CAAA;AAEvE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAgGD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,2CA8OxE"}
|
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { usePersonMutation } from "@voyantjs/crm-react";
|
|
3
|
+
import { usePersonDocumentMutation, usePersonDocuments, usePersonMutation, } from "@voyantjs/crm-react";
|
|
4
|
+
import { useAddressMutation } from "@voyantjs/identity-react";
|
|
4
5
|
import { Button } from "@voyantjs/ui/components/button";
|
|
6
|
+
import { CountryCombobox } from "@voyantjs/ui/components/country-combobox";
|
|
7
|
+
import { DatePicker } from "@voyantjs/ui/components/date-picker";
|
|
5
8
|
import { Input } from "@voyantjs/ui/components/input";
|
|
6
9
|
import { Label } from "@voyantjs/ui/components/label";
|
|
7
|
-
import {
|
|
10
|
+
import { PhoneInput } from "@voyantjs/ui/components/phone-input";
|
|
11
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
|
|
12
|
+
import { Loader2, Plus, Trash2 } from "lucide-react";
|
|
8
13
|
import * as React from "react";
|
|
9
14
|
import { useCrmUiMessagesOrDefault } from "../i18n/index.js";
|
|
15
|
+
import { PersonAddressesSection } from "./person-addresses-section.js";
|
|
16
|
+
import { PersonRelationshipsSection } from "./person-relationships-section.js";
|
|
17
|
+
const DOCUMENT_TYPES = [
|
|
18
|
+
"passport",
|
|
19
|
+
"id_card",
|
|
20
|
+
"driver_license",
|
|
21
|
+
"visa",
|
|
22
|
+
"other",
|
|
23
|
+
];
|
|
10
24
|
function initialState(mode) {
|
|
11
25
|
if (mode.kind === "edit") {
|
|
12
26
|
const p = mode.person;
|
|
@@ -16,6 +30,13 @@ function initialState(mode) {
|
|
|
16
30
|
email: p.email ?? "",
|
|
17
31
|
phone: p.phone ?? "",
|
|
18
32
|
jobTitle: p.jobTitle ?? "",
|
|
33
|
+
dateOfBirth: p.dateOfBirth ?? null,
|
|
34
|
+
addressLine1: "",
|
|
35
|
+
addressLine2: "",
|
|
36
|
+
addressCity: "",
|
|
37
|
+
addressRegion: "",
|
|
38
|
+
addressPostalCode: "",
|
|
39
|
+
addressCountry: "",
|
|
19
40
|
};
|
|
20
41
|
}
|
|
21
42
|
return {
|
|
@@ -24,6 +45,13 @@ function initialState(mode) {
|
|
|
24
45
|
email: "",
|
|
25
46
|
phone: "",
|
|
26
47
|
jobTitle: "",
|
|
48
|
+
dateOfBirth: null,
|
|
49
|
+
addressLine1: "",
|
|
50
|
+
addressLine2: "",
|
|
51
|
+
addressCity: "",
|
|
52
|
+
addressRegion: "",
|
|
53
|
+
addressPostalCode: "",
|
|
54
|
+
addressCountry: "",
|
|
27
55
|
};
|
|
28
56
|
}
|
|
29
57
|
function toPayload(state) {
|
|
@@ -33,8 +61,33 @@ function toPayload(state) {
|
|
|
33
61
|
email: state.email.trim() || null,
|
|
34
62
|
phone: state.phone.trim() || null,
|
|
35
63
|
jobTitle: state.jobTitle.trim() || null,
|
|
64
|
+
dateOfBirth: state.dateOfBirth || null,
|
|
36
65
|
};
|
|
37
66
|
}
|
|
67
|
+
function hasAddress(state) {
|
|
68
|
+
return [
|
|
69
|
+
state.addressLine1,
|
|
70
|
+
state.addressLine2,
|
|
71
|
+
state.addressCity,
|
|
72
|
+
state.addressRegion,
|
|
73
|
+
state.addressPostalCode,
|
|
74
|
+
state.addressCountry,
|
|
75
|
+
].some((value) => Boolean(value.trim()));
|
|
76
|
+
}
|
|
77
|
+
function formatAddress(state) {
|
|
78
|
+
const text = [
|
|
79
|
+
state.addressLine1,
|
|
80
|
+
state.addressLine2,
|
|
81
|
+
state.addressCity,
|
|
82
|
+
state.addressRegion,
|
|
83
|
+
state.addressPostalCode,
|
|
84
|
+
state.addressCountry,
|
|
85
|
+
]
|
|
86
|
+
.map((value) => value.trim())
|
|
87
|
+
.filter(Boolean)
|
|
88
|
+
.join(", ");
|
|
89
|
+
return text || null;
|
|
90
|
+
}
|
|
38
91
|
/**
|
|
39
92
|
* Create/edit form for a Person. Validates via the server-side Zod schema
|
|
40
93
|
* exposed on `/api/v1/crm/people` — client-side errors surface as toast-
|
|
@@ -43,9 +96,18 @@ function toPayload(state) {
|
|
|
43
96
|
export function PersonForm({ mode, onSuccess, onCancel }) {
|
|
44
97
|
const [state, setState] = React.useState(() => initialState(mode));
|
|
45
98
|
const [error, setError] = React.useState(null);
|
|
99
|
+
// After the operator hits "Create" on a fresh sheet, we flip into an
|
|
100
|
+
// edit-like UI in-place so the addresses (multi) + documents sections
|
|
101
|
+
// become available without closing the sheet. The parent's `onSuccess`
|
|
102
|
+
// is deferred until the operator hits "Done" / "Save changes".
|
|
103
|
+
const [createdPerson, setCreatedPerson] = React.useState(null);
|
|
46
104
|
const { create, update } = usePersonMutation();
|
|
105
|
+
const addressMutation = useAddressMutation();
|
|
47
106
|
const messages = useCrmUiMessagesOrDefault();
|
|
48
|
-
const
|
|
107
|
+
const effectivePerson = createdPerson ?? (mode.kind === "edit" ? mode.person : null);
|
|
108
|
+
const editPersonId = effectivePerson?.id;
|
|
109
|
+
const creating = !effectivePerson;
|
|
110
|
+
const isSubmitting = create.isPending || update.isPending || addressMutation.create.isPending;
|
|
49
111
|
const field = (key) => (e) => {
|
|
50
112
|
setState((prev) => ({ ...prev, [key]: e.target.value }));
|
|
51
113
|
};
|
|
@@ -58,14 +120,73 @@ export function PersonForm({ mode, onSuccess, onCancel }) {
|
|
|
58
120
|
}
|
|
59
121
|
const payload = toPayload(state);
|
|
60
122
|
try {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
123
|
+
if (!effectivePerson) {
|
|
124
|
+
const person = await create.mutateAsync(payload);
|
|
125
|
+
if (hasAddress(state)) {
|
|
126
|
+
await addressMutation.create.mutateAsync({
|
|
127
|
+
entityType: "person",
|
|
128
|
+
entityId: person.id,
|
|
129
|
+
label: "primary",
|
|
130
|
+
fullText: formatAddress(state),
|
|
131
|
+
line1: state.addressLine1.trim() || null,
|
|
132
|
+
line2: state.addressLine2.trim() || null,
|
|
133
|
+
city: state.addressCity.trim() || null,
|
|
134
|
+
region: state.addressRegion.trim() || null,
|
|
135
|
+
postalCode: state.addressPostalCode.trim() || null,
|
|
136
|
+
country: state.addressCountry.trim() || null,
|
|
137
|
+
isPrimary: true,
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
// Stay on the sheet — the operator now sees the multi-address
|
|
141
|
+
// and documents sections and can keep editing before closing.
|
|
142
|
+
setCreatedPerson(person);
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
const updated = await update.mutateAsync({ id: effectivePerson.id, input: payload });
|
|
146
|
+
onSuccess?.(updated);
|
|
147
|
+
}
|
|
65
148
|
}
|
|
66
149
|
catch (err) {
|
|
67
150
|
setError(err instanceof Error ? err.message : messages.personForm.validation.saveFailed);
|
|
68
151
|
}
|
|
69
152
|
};
|
|
70
|
-
|
|
153
|
+
const handleCancel = () => {
|
|
154
|
+
// If we already created the person in this session, treat the close
|
|
155
|
+
// button as "Done" so the picker still selects the new person.
|
|
156
|
+
if (createdPerson) {
|
|
157
|
+
onSuccess?.(createdPerson);
|
|
158
|
+
}
|
|
159
|
+
else {
|
|
160
|
+
onCancel?.();
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
return (_jsxs("form", { "data-slot": "person-form", onSubmit: handleSubmit, className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: messages.personForm.sections.identity }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-first-name", children: messages.personForm.fields.firstName }), _jsx(Input, { id: "person-first-name", required: true, value: state.firstName, onChange: field("firstName") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-last-name", children: messages.personForm.fields.lastName }), _jsx(Input, { id: "person-last-name", required: true, value: state.lastName, onChange: field("lastName") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-job-title", children: messages.personForm.fields.jobTitle }), _jsx(Input, { id: "person-job-title", value: state.jobTitle, onChange: field("jobTitle") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-date-of-birth", children: messages.personForm.fields.dateOfBirth }), _jsx(DatePicker, { value: state.dateOfBirth, onChange: (next) => setState((prev) => ({ ...prev, dateOfBirth: next })) })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: messages.personForm.sections.contact }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-email", children: messages.personForm.fields.email }), _jsx(Input, { id: "person-email", type: "email", value: state.email, onChange: field("email") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-phone", children: messages.personForm.fields.phone }), _jsx(PhoneInput, { id: "person-phone", international: true, defaultCountry: "RO", value: state.phone, onChange: (value) => setState((prev) => ({ ...prev, phone: value ?? "" })) })] })] })] }), editPersonId ? (_jsx(PersonAddressesSection, { personId: editPersonId })) : (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: messages.personForm.sections.address }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "person-address-line-1", children: messages.personForm.fields.addressLine1 }), _jsx(Input, { id: "person-address-line-1", value: state.addressLine1, onChange: field("addressLine1") })] }), _jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [_jsx(Label, { htmlFor: "person-address-line-2", children: messages.personForm.fields.addressLine2 }), _jsx(Input, { id: "person-address-line-2", value: state.addressLine2, onChange: field("addressLine2") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-address-city", children: messages.personForm.fields.addressCity }), _jsx(Input, { id: "person-address-city", value: state.addressCity, onChange: field("addressCity") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-address-region", children: messages.personForm.fields.addressRegion }), _jsx(Input, { id: "person-address-region", value: state.addressRegion, onChange: field("addressRegion") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-address-postal-code", children: messages.personForm.fields.addressPostalCode }), _jsx(Input, { id: "person-address-postal-code", value: state.addressPostalCode, onChange: field("addressPostalCode") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "person-address-country", children: messages.personForm.fields.addressCountry }), _jsx(CountryCombobox, { value: state.addressCountry || null, onChange: (code) => setState((prev) => ({ ...prev, addressCountry: code ?? "" })) })] })] })] })), editPersonId ? _jsx(PersonRelationshipsSection, { personId: editPersonId }) : null, editPersonId ? _jsx(DocumentsSection, { personId: editPersonId }) : null, error ? (_jsx("p", { "data-slot": "person-form-error", className: "text-sm text-destructive", children: error })) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel || createdPerson ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleCancel, disabled: isSubmitting, children: createdPerson ? messages.common.done : messages.common.cancel })) : null, _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" }), messages.common.saving] })) : creating ? (messages.personForm.actions.create) : (messages.common.saveChanges) })] })] }));
|
|
164
|
+
}
|
|
165
|
+
function DocumentsSection({ personId }) {
|
|
166
|
+
const messages = useCrmUiMessagesOrDefault();
|
|
167
|
+
const documentsQuery = usePersonDocuments(personId);
|
|
168
|
+
const mutation = usePersonDocumentMutation(personId);
|
|
169
|
+
const [adding, setAdding] = React.useState(false);
|
|
170
|
+
const [draft, setDraft] = React.useState({
|
|
171
|
+
type: "passport",
|
|
172
|
+
number: "",
|
|
173
|
+
issuingCountry: "",
|
|
174
|
+
expiryDate: null,
|
|
175
|
+
});
|
|
176
|
+
const documents = documentsQuery.data?.data ?? [];
|
|
177
|
+
const typeLabels = messages.personDetail.documentTypeLabels;
|
|
178
|
+
const resetDraft = () => {
|
|
179
|
+
setDraft({ type: "passport", number: "", issuingCountry: "", expiryDate: null });
|
|
180
|
+
setAdding(false);
|
|
181
|
+
};
|
|
182
|
+
const submitDraft = async () => {
|
|
183
|
+
await mutation.createFromPlaintext.mutateAsync({
|
|
184
|
+
type: draft.type,
|
|
185
|
+
number: draft.number?.trim() || null,
|
|
186
|
+
issuingCountry: draft.issuingCountry?.trim() || null,
|
|
187
|
+
expiryDate: draft.expiryDate || null,
|
|
188
|
+
});
|
|
189
|
+
resetDraft();
|
|
190
|
+
};
|
|
191
|
+
return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: messages.personForm.sections.documents }), !adding ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setAdding(true), children: [_jsx(Plus, { className: "mr-1 size-3.5" }), messages.personForm.documents.add] })) : null] }), documentsQuery.isPending ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), messages.common.saving] })) : documents.length === 0 && !adding ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.personForm.documents.empty })) : (_jsx("ul", { className: "divide-y rounded-md border", children: documents.map((doc) => (_jsxs("li", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [_jsxs("div", { className: "min-w-0 flex-1 text-sm", children: [_jsx("p", { className: "font-medium", children: typeLabels[doc.type] ?? doc.type }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: [doc.issuingCountry, doc.expiryDate].filter(Boolean).join(" · ") || "—" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-destructive", onClick: () => mutation.remove.mutate(doc.id), disabled: mutation.remove.isPending, "aria-label": messages.personForm.documents.remove, children: _jsx(Trash2, { className: "size-3.5" }) })] }, doc.id))) })), adding ? (_jsxs("div", { className: "grid grid-cols-1 gap-3 rounded-md border bg-muted/30 p-3 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: messages.personForm.documents.type }), _jsxs(Select, { value: draft.type, onValueChange: (v) => setDraft((prev) => ({ ...prev, type: v })), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DOCUMENT_TYPES.map((t) => (_jsx(SelectItem, { value: t, children: typeLabels[t] ?? t }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: messages.personForm.documents.number }), _jsx(Input, { value: draft.number ?? "", onChange: (e) => setDraft((prev) => ({ ...prev, number: e.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: messages.personForm.documents.issuingCountry }), _jsx(Input, { value: draft.issuingCountry ?? "", onChange: (e) => setDraft((prev) => ({ ...prev, issuingCountry: e.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: messages.personForm.documents.expiryDate }), _jsx(DatePicker, { value: draft.expiryDate ?? null, onChange: (next) => setDraft((prev) => ({ ...prev, expiryDate: next })) })] }), _jsxs("div", { className: "flex items-center justify-end gap-2 sm:col-span-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: resetDraft, children: messages.common.cancel }), _jsxs(Button, { type: "button", size: "sm", onClick: submitDraft, disabled: mutation.createFromPlaintext.isPending, children: [mutation.createFromPlaintext.isPending ? (_jsx(Loader2, { className: "mr-2 size-3.5 animate-spin" })) : null, messages.personForm.documents.save] })] })] })) : null] }));
|
|
71
192
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type PersonRelationshipRecord } from "@voyantjs/crm-react";
|
|
2
|
+
export interface PersonRelationshipsSectionProps {
|
|
3
|
+
personId: string;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Inline list + add/edit form for a Person's relationships, rendered
|
|
7
|
+
* inside the PersonForm sheet. Auto-writes the symmetric edge (the
|
|
8
|
+
* service mirrors `inverseKind`).
|
|
9
|
+
*/
|
|
10
|
+
export declare function PersonRelationshipsSection({ personId }: PersonRelationshipsSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export type { PersonRelationshipRecord };
|
|
12
|
+
//# sourceMappingURL=person-relationships-section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"person-relationships-section.d.ts","sourceRoot":"","sources":["../../src/components/person-relationships-section.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,wBAAwB,EAK9B,MAAM,qBAAqB,CAAA;AAiF5B,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,+BAA+B,2CAsMvF;AA6LD,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
|