@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/fields-section.js

@@ -0,0 +1,641 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CONTACT_FIELD_TYPE_LABELS, createResourceUid, CRM_COLLECTIONS, CRM_FIELD_OBJECT_LABELS, CRM_FIELD_OBJECTS, isCrmFieldObject, newResourceScopeFields, ORG_SCOPE_TOKEN, pluginDocsHelp } from "@aglyn/aglyn";
+import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
+import { mdiArchiveArrowUpOutline, mdiArchiveOutline, mdiArrowDown, mdiArrowUp, mdiDeleteOutline, mdiPencilOutline } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon, SrOnly, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { Button, Chip, IconButton, Stack, Tab, TableBody, TableCell, TableHead, TableRow, Tabs, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, setDoc, updateDoc, writeBatch } from "firebase/firestore";
+import { useCallback, useState } from "react";
+import { useContactFieldDefinitions } from "../hooks/use-contact-field-definitions.js";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
+import ContactFieldDrawer from "./contact-field-drawer.js";
+import { recomputeAllCrmNextActivity } from "../model/next-activity-api.js";
+import { crmTaskCallScope } from "../model/task-routes.js";
+/** What each tab says the fields are for, above its list. */ const OBJECT_INTRO = {
+    contact: 'The custom fields on a contact — text, number, date, choice, ' + 'checkbox or link. They show on every contact, as columns on the ' + 'list, and a form field can save into one.',
+    company: 'The custom fields on a company. They show on every company’s page ' + 'and its edit form, as columns on the companies list, and a CSV ' + 'import can fill them.',
+    deal: 'The custom fields on a deal. They show on every deal’s page and ' + 'its edit form, and as columns on the deals table.'
+};
+/** The noun each tab's empty state and captions use. */ const OBJECT_NOUN = {
+    contact: 'contact',
+    company: 'company',
+    deal: 'deal'
+};
+/**
+ * `/crm/fields` — the custom fields a holder keeps on a person (AGL-2601),
+ * and since AGL-2661 on a company and a deal too, one tab each.
+ *
+ * Definitions live in `orgs/{orgId}/contactFields`, one document per field,
+ * and the VALUES live under each contact facet's `custom` keyed by the
+ * definition's `key`. That split decides everything this section does:
+ *
+ *  - A field is RETIRED, not deleted, while values may exist under it. A
+ *    retired field leaves every form and every column, but an export can
+ *    still read what was written, and a restore brings it back intact.
+ *    Delete is offered only on a retired field, because retiring is the step
+ *    where the author had to look at what they were losing.
+ *  - The KEY never changes. It is the map key every value sits under; a
+ *    rename is a new field and a retire.
+ *  - Order is a stored `order` on each document, moved with the arrows here,
+ *    and every reader sorts by it — the profile card, the columns, an export.
+ *
+ * ## What is NOT on this page
+ *
+ * How many contacts carry a value under each field. That count is a read of
+ * every contact document in the org — the expensive-read shape this codebase
+ * has a standing rule against — and it would be paid on every visit to a
+ * settings page. The list says so rather than showing a number it cannot
+ * afford to keep true.
+ *
+ * Definitions are ORG-WIDE (`visibleTo: ['org']`): a field is a fact about
+ * how this business describes people, and every site in the org files
+ * people into the same address book. `hostId` records which site defined it.
+ */ export function ContactsFieldsSection(props) {
+    var _ref;
+    const { hostId, org } = props;
+    const firestore = useFirestore();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    // The org root from the one scope hook (AGL-2614), which also answers at
+    // the organization level (AGL-2630). A definition is org-wide either way;
+    // the defining site it records is the mounted one, or the picked one, or
+    // none for a field defined over the whole org before any pick.
+    const { scope, ready: scopeReady, createHostId } = useCrmScope({
+        hostId,
+        org
+    });
+    const orgId = (_ref = scope == null ? void 0 : scope[1]) != null ? _ref : null;
+    /*
+   * ONE TAB PER OBJECT (AGL-2661). The list, the drawer and every write
+   * below are about the tab's object: the hook narrows the org's one
+   * definition list to it, a new field is stamped with it, and the drawer
+   * refuses a key only against the keys THIS object already uses — a
+   * company and a contact may both define `region`.
+   */ const [object, setObject] = useState('contact');
+    const { definitions, ready, fromCache } = useContactFieldDefinitions(orgId, object);
+    const noun = OBJECT_NOUN[object];
+    /*
+   * MAINTENANCE: recompute every record's next activity (AGL-2661). The
+   * figure is kept by every task write, so this is for the records written
+   * before it existed and for whatever a write that could not reach the
+   * route left behind. A console action rather than a script, because the
+   * person who notices a stale column is the person who should be able to
+   * fix it.
+   */ const { data: user } = useUser();
+    const [recomputing, setRecomputing] = useState(false);
+    const recomputeNextActivity = useCallback(async ()=>{
+        const callScope = crmTaskCallScope(hostId, orgId);
+        if (!callScope || recomputing) return;
+        const confirmed = await confirm({
+            title: 'Recompute next activity?',
+            description: 'Every contact, company and deal in this organization gets its ' + '"Next activity" recomputed from its open tasks. Safe to run any time; ' + 'it only rewrites a figure the task list already implies.',
+            confirmationText: 'Recompute'
+        }).then(()=>true).catch(()=>false);
+        if (!confirmed) return;
+        setRecomputing(true);
+        try {
+            var _result_tasks;
+            const result = await recomputeAllCrmNextActivity(user, callScope);
+            enqueueSnackbar(`Next activity recomputed: ${result.records.toLocaleString()} record${result.records === 1 ? '' : 's'} ` + `from ${((_result_tasks = result.tasks) != null ? _result_tasks : 0).toLocaleString()} open task${result.tasks === 1 ? '' : 's'}` + (result.truncated ? ' — the first batch of open tasks only; nothing stale was cleared' : ''), {
+                variant: 'success'
+            });
+        } catch (cause) {
+            enqueueSnackbar(cause instanceof Error ? cause.message : 'The next activity could not be recomputed.', {
+                variant: 'warning'
+            });
+        } finally{
+            setRecomputing(false);
+        }
+    }, [
+        hostId,
+        orgId,
+        recomputing,
+        confirm,
+        user,
+        enqueueSnackbar
+    ]);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [editing, setEditing] = useState(null);
+    const [busyId, setBusyId] = useState('');
+    const fieldRef = useCallback((id)=>{
+        if (!scope) throw new Error('a contact field needs an organization');
+        return doc(firestore, scope[0], scope[1], CRM_COLLECTIONS.contactFields, id);
+    }, [
+        firestore,
+        scope
+    ]);
+    const openCreate = useCallback(()=>{
+        setEditing(null);
+        setDrawerOpen(true);
+    }, []);
+    const openEdit = useCallback((definition)=>{
+        setEditing(definition);
+        setDrawerOpen(true);
+    }, []);
+    /**
+   * Create, or save the editable half of an existing field.
+   *
+   * On create the document carries everything a reader expects: the key,
+   * an `order` past every existing one so it lands last, an explicit
+   * `retiredAt: null` so a `where('retiredAt', '==', null)` can find it, the
+   * defining site, and the org-wide scope stamp the rules require. On edit
+   * only the label, the choices and the required flag move — the key and
+   * the type are the drawer's disabled inputs, and this writer does not
+   * take them either.
+   */ const handleSubmit = useCallback(async (draft)=>{
+        if (!scope) return;
+        const now = new Date();
+        if (editing) {
+            const verdict = await writeGuardedBySeed({
+                subject: 'field',
+                fromCache
+            }, async ()=>{
+                await updateDoc(fieldRef(editing.$id), _extends({
+                    label: draft.label
+                }, editing.type === 'select' ? {
+                    options: draft.options
+                } : {}, {
+                    required: draft.required,
+                    updatedAt: now
+                }));
+            });
+            if (!verdict.ok) {
+                return void enqueueSnackbar(verdict.message, {
+                    variant: 'warning',
+                    persist: false
+                });
+            }
+            enqueueSnackbar('Field saved', {
+                variant: 'success',
+                persist: false
+            });
+        } else {
+            const order = definitions.reduce((highest, definition)=>Math.max(highest, Number(definition.order) || 0), -1) + 1;
+            await setDoc(doc(collection(firestore, scope[0], scope[1], CRM_COLLECTIONS.contactFields), createResourceUid()), _extends({
+                key: draft.key,
+                label: draft.label,
+                type: draft.type
+            }, draft.type === 'select' ? {
+                options: draft.options
+            } : {}, {
+                required: draft.required,
+                order,
+                retiredAt: null,
+                // Which record the field describes — the tab it was made on.
+                object,
+                hostId: createHostId
+            }, newResourceScopeFields([
+                ORG_SCOPE_TOKEN
+            ]), {
+                createdAt: now,
+                updatedAt: now
+            }));
+            enqueueSnackbar(`Field "${draft.label}" added`, {
+                variant: 'success',
+                persist: false
+            });
+        }
+        setDrawerOpen(false);
+        setEditing(null);
+    }, [
+        scope,
+        editing,
+        fromCache,
+        fieldRef,
+        enqueueSnackbar,
+        definitions,
+        firestore,
+        createHostId,
+        object
+    ]);
+    /**
+   * Move a field one place up or down.
+   *
+   * Writes `order` as the POSITION for every row whose stored order is not
+   * already its position, in one batch. Swapping two numbers would be enough
+   * on a list whose orders are already distinct, and wrong on one where they
+   * are not — every field created before this section existed carries the
+   * same `order`, and a swap of two equal numbers moves nothing. Renumbering
+   * what is out of place makes the first move on such a list also the one
+   * that normalizes it, at the cost of a batch that is at most the list.
+   */ const move = useCallback(async (definition, direction)=>{
+        if (!scope || busyId) return;
+        const index = definitions.findIndex((entry)=>entry.$id === definition.$id);
+        const target = index + direction;
+        if (index < 0 || target < 0 || target >= definitions.length) return;
+        const next = [
+            ...definitions
+        ];
+        next[index] = definitions[target];
+        next[target] = definitions[index];
+        setBusyId(definition.$id);
+        try {
+            const verdict = await writeGuardedBySeed({
+                subject: 'field order',
+                fromCache
+            }, async ()=>{
+                const batch = writeBatch(firestore);
+                const now = new Date();
+                next.forEach((entry, position)=>{
+                    if (entry.order === position) return;
+                    batch.update(fieldRef(entry.$id), {
+                        order: position,
+                        updatedAt: now
+                    });
+                });
+                await batch.commit();
+            });
+            if (!verdict.ok) {
+                enqueueSnackbar(verdict.message, {
+                    variant: 'warning',
+                    persist: false
+                });
+            }
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusyId('');
+        }
+    }, [
+        scope,
+        busyId,
+        definitions,
+        fromCache,
+        firestore,
+        fieldRef,
+        enqueueSnackbar
+    ]);
+    /**
+   * Retire a field, or bring one back.
+   *
+   * Retiring is asked about because it takes a control off every contact
+   * form and a column off the list; restoring is not, because it puts a
+   * choice back and is undone by retiring again. Neither touches a value.
+   */ const toggleRetired = useCallback(async (definition)=>{
+        if (!scope || busyId) return;
+        if (!definition.retiredAt) {
+            const accepted = await confirm({
+                title: `Retire “${definition.label}”?`,
+                description: `It leaves every ${noun} form, column and form-field mapping. ` + 'Values already saved under it are kept and still export, and ' + 'you can restore the field at any time.',
+                confirmationText: 'Retire'
+            })// `confirm` resolves with no value and REJECTS on cancel, so gating
+            // on the resolved value alone would always fall through.
+            .then(()=>true).catch(()=>false);
+            if (!accepted) return;
+        }
+        setBusyId(definition.$id);
+        try {
+            await updateDoc(fieldRef(definition.$id), {
+                retiredAt: definition.retiredAt ? null : Date.now(),
+                updatedAt: new Date()
+            });
+            enqueueSnackbar(definition.retiredAt ? 'Field restored' : 'Field retired', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusyId('');
+        }
+    }, [
+        scope,
+        busyId,
+        confirm,
+        fieldRef,
+        enqueueSnackbar,
+        noun
+    ]);
+    /**
+   * Delete a RETIRED field's definition.
+   *
+   * The values under its key are not touched — they sit on contact documents
+   * this page does not read — so what is destroyed is the ability to show
+   * them anywhere. The dialog says exactly that, and the key stays taken for
+   * as long as the list can see it, which after this write it cannot; a new
+   * field with the same key would read the orphaned values back as its own.
+   */ const handleDelete = useCallback(async (definition)=>{
+        if (!scope || busyId || !definition.retiredAt) return;
+        const accepted = await confirm({
+            title: `Delete “${definition.label}”?`,
+            description: 'The definition is removed for good. Values saved under its key ' + `(${definition.key}) stay on the ${noun}s that carry them but ` + 'nothing will show them again — and a new field created with the ' + 'same key would read them as its own.',
+            confirmationText: 'Delete field',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (!accepted) return;
+        setBusyId(definition.$id);
+        try {
+            await deleteDoc(fieldRef(definition.$id));
+            enqueueSnackbar('Field deleted', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusyId('');
+        }
+    }, [
+        scope,
+        busyId,
+        confirm,
+        fieldRef,
+        enqueueSnackbar,
+        noun
+    ]);
+    const rowActions = (definition)=>[
+            {
+                key: 'edit',
+                label: 'Edit field',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPencilOutline.path,
+                    size: 0.8
+                }),
+                onClick: ()=>openEdit(definition)
+            },
+            {
+                key: 'retire',
+                label: definition.retiredAt ? 'Restore' : 'Retire',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: definition.retiredAt ? mdiArchiveArrowUpOutline.path : mdiArchiveOutline.path,
+                    size: 0.8
+                }),
+                destructive: !definition.retiredAt,
+                disabled: Boolean(busyId),
+                disabledReason: busyId ? 'Another field is being saved' : undefined,
+                onClick: ()=>void toggleRetired(definition)
+            },
+            ...definition.retiredAt ? [
+                {
+                    key: 'delete',
+                    label: 'Delete',
+                    icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiDeleteOutline.path,
+                        size: 0.8
+                    }),
+                    destructive: true,
+                    disabled: Boolean(busyId),
+                    disabledReason: busyId ? 'Another field is being saved' : undefined,
+                    onClick: ()=>void handleDelete(definition)
+                }
+            ] : []
+        ];
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Fields',
+        help: pluginDocsHelp('contactFields', {
+            anchor: '#define-a-field'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        contentBordered: "all",
+        HeaderProps: {
+            action: scope ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>void recomputeNextActivity(),
+                        disabled: recomputing,
+                        children: recomputing ? 'Recomputing…' : 'Recompute next activity'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        onClick: openCreate,
+                        children: 'New field'
+                    })
+                ]
+            }) : null
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Tabs, {
+                        value: object,
+                        onChange: (_event, next)=>{
+                            if (isCrmFieldObject(next)) setObject(next);
+                        },
+                        "aria-label": "Fields by record",
+                        children: CRM_FIELD_OBJECTS.map((entry)=>/*#__PURE__*/ _jsx(Tab, {
+                                value: entry,
+                                label: CRM_FIELD_OBJECT_LABELS[entry]
+                            }, entry))
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: `${OBJECT_INTRO[object]} Fields are shared across every site in this ` + 'organization, like the records themselves.'
+                    }),
+                    scopeReady && !scope ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: `This site has no organization, so it has no ${noun} fields.`
+                    }) : !ready ? null : definitions.length === 0 ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                        label: `No custom ${noun} fields yet`,
+                        description: `A field you define here is kept on every ${noun} and shows on its page.`,
+                        action: scope ? /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            onClick: openCreate,
+                            children: 'New field'
+                        }) : undefined
+                    }) : /*#__PURE__*/ _jsxs(ScrollTable, {
+                        size: "small",
+                        children: [
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            sx: {
+                                                width: 96
+                                            },
+                                            children: 'Order'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Field'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Key'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Type'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Required'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            align: "right"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TableBody, {
+                                children: definitions.map((definition, index)=>{
+                                    var _CONTACT_FIELD_TYPE_LABELS_definition_type;
+                                    var _definition_options;
+                                    return /*#__PURE__*/ _jsxs(TableRow, {
+                                        hover: true,
+                                        sx: definition.retiredAt ? {
+                                            opacity: 0.6
+                                        } : undefined,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                                    direction: "row",
+                                                    spacing: 0,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(IconButton, {
+                                                            size: "small",
+                                                            disabled: index === 0 || Boolean(busyId),
+                                                            onClick: ()=>void move(definition, -1),
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                    path: mdiArrowUp.path,
+                                                                    size: 0.7
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(SrOnly, {
+                                                                    children: `Move ${definition.label} up`
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs(IconButton, {
+                                                            size: "small",
+                                                            disabled: index === definitions.length - 1 || Boolean(busyId),
+                                                            onClick: ()=>void move(definition, 1),
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                    path: mdiArrowDown.path,
+                                                                    size: 0.7
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(SrOnly, {
+                                                                    children: `Move ${definition.label} down`
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                                    direction: "row",
+                                                    spacing: 1,
+                                                    sx: {
+                                                        flexWrap: 'wrap',
+                                                        alignItems: 'center'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            children: definition.label
+                                                        }),
+                                                        definition.retiredAt ? /*#__PURE__*/ _jsx(Chip, {
+                                                            size: "small",
+                                                            variant: "outlined",
+                                                            color: "warning",
+                                                            label: "Retired"
+                                                        }) : null
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "body2",
+                                                    color: "text.secondary",
+                                                    sx: {
+                                                        fontFamily: 'monospace'
+                                                    },
+                                                    children: definition.key
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsxs(Typography, {
+                                                    variant: "body2",
+                                                    children: [
+                                                        (_CONTACT_FIELD_TYPE_LABELS_definition_type = CONTACT_FIELD_TYPE_LABELS[definition.type]) != null ? _CONTACT_FIELD_TYPE_LABELS_definition_type : definition.type,
+                                                        definition.type === 'select' && ((_definition_options = definition.options) == null ? void 0 : _definition_options.length) ? ` · ${definition.options.length} choices` : ''
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "body2",
+                                                    color: "text.secondary",
+                                                    children: definition.required ? 'Yes' : '—'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                sx: {
+                                                    width: 56
+                                                },
+                                                children: /*#__PURE__*/ _jsx(RowActionsMenu, {
+                                                    label: definition.label,
+                                                    items: rowActions(definition)
+                                                })
+                                            })
+                                        ]
+                                    }, definition.$id);
+                                })
+                            })
+                        ]
+                    }),
+                    definitions.length ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: `How many ${noun}s carry a value under each field is not ` + `counted — that would read every ${noun} in the organization ` + 'each time this page opened.'
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ContactFieldDrawer, {
+                open: drawerOpen,
+                onClose: ()=>setDrawerOpen(false),
+                definition: editing,
+                object: object,
+                takenKeys: definitions.map((definition)=>definition.key),
+                onSubmit: handleSubmit
+            })
+        ]
+    });
+}
+ContactsFieldsSection.displayName = 'ContactsFieldsSection';
+export default ContactsFieldsSection;
+
+//# sourceMappingURL=fields-section.js.map