@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.8.1-develop.7441.1.b42958b98c

package/dist/modules/customers/components/detail/LinkedPeopleSection.js

@@ -0,0 +1,342 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Users, Link2, Plus, Filter } from "lucide-react";
+import { EmptyState } from "@open-mercato/ui/backend/EmptyState";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  readVersionedIdSet,
+  writeVersionedIdSet
+} from "@open-mercato/shared/lib/browser/versionedPreference";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { createTranslatorWithFallback } from "@open-mercato/shared/lib/i18n/translate";
+import { PersonCard } from "./PersonCard.js";
+import {
+  LinkEntityDialog
+} from "../linking/LinkEntityDialog.js";
+const ALL_LINKED_PEOPLE_SORTS = ["name-asc", "name-desc", "recent"];
+const LINKED_PEOPLE_PAGE_SIZE = 20;
+const STARRED_PEOPLE_STORAGE_VERSION = 1;
+const SORT_LABELS = {
+  "name-asc": { key: "customers.linkedPeople.sortNameAsc", fallback: "Sort: Name A-Z" },
+  "name-desc": { key: "customers.linkedPeople.sortNameDesc", fallback: "Sort: Name Z-A" },
+  recent: { key: "customers.linkedPeople.sortRecent", fallback: "Sort: Recently linked" }
+};
+function LinkedPeopleSection({
+  scopeId,
+  fallbackPeople,
+  loadPage,
+  onUnlink,
+  linkAdapter,
+  linkDialogOpen: controlledLinkDialogOpen,
+  onLinkDialogOpenChange,
+  linkedIds,
+  onLinkConfirm,
+  sectionTitle,
+  sectionSubtitle,
+  searchPlaceholder,
+  linkActionLabel,
+  addActionLabel,
+  onAddPerson,
+  emptyLabel,
+  emptyState,
+  onEmptyStateAction,
+  availableSorts = ALL_LINKED_PEOPLE_SORTS,
+  showLinkedDate = true,
+  refreshKey = 0,
+  disabled = false,
+  translator,
+  runGuardedMutation,
+  onLoadingChange,
+  header,
+  renderFooter
+}) {
+  const tHook = useT();
+  const fallbackTranslator = React.useMemo(
+    () => createTranslatorWithFallback(tHook),
+    [tHook]
+  );
+  const translate = translator ?? fallbackTranslator;
+  const knownPeople = React.useMemo(() => fallbackPeople ?? [], [fallbackPeople]);
+  const sortOptions = availableSorts.length > 0 ? availableSorts : ALL_LINKED_PEOPLE_SORTS;
+  const [removingId, setRemovingId] = React.useState(null);
+  const [internalLinkDialogOpen, setInternalLinkDialogOpen] = React.useState(false);
+  const linkDialogOpen = controlledLinkDialogOpen ?? internalLinkDialogOpen;
+  const setLinkDialogOpen = React.useCallback(
+    (open) => {
+      setInternalLinkDialogOpen(open);
+      onLinkDialogOpenChange?.(open);
+    },
+    [onLinkDialogOpenChange]
+  );
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [sortMode, setSortMode] = React.useState(sortOptions[0]);
+  const [filtersOpen, setFiltersOpen] = React.useState(true);
+  const [visiblePeople, setVisiblePeople] = React.useState([]);
+  const [listPage, setListPage] = React.useState(1);
+  const [listTotalPages, setListTotalPages] = React.useState(1);
+  const [listTotalCount, setListTotalCount] = React.useState(knownPeople.length);
+  const [listLoading, setListLoading] = React.useState(true);
+  const [starredIds, setStarredIds] = React.useState(
+    () => readVersionedIdSet(`om:starred-people:${scopeId}`, STARRED_PEOPLE_STORAGE_VERSION)
+  );
+  const toggleStar = React.useCallback(
+    (personId) => {
+      setStarredIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(personId)) next.delete(personId);
+        else next.add(personId);
+        writeVersionedIdSet(`om:starred-people:${scopeId}`, STARRED_PEOPLE_STORAGE_VERSION, next);
+        return next;
+      });
+    },
+    [scopeId]
+  );
+  const displayedPeople = React.useMemo(
+    () => visiblePeople.length > 0 ? visiblePeople : knownPeople,
+    [knownPeople, visiblePeople]
+  );
+  const totalLinkedPeople = listTotalCount > 0 ? listTotalCount : displayedPeople.length;
+  const loadVisiblePeople = React.useCallback(async () => {
+    setListLoading(true);
+    try {
+      const payload = await loadPage({
+        page: listPage,
+        pageSize: LINKED_PEOPLE_PAGE_SIZE,
+        sort: sortMode,
+        search: searchQuery.trim()
+      });
+      const nextTotalCount = typeof payload.total === "number" ? payload.total : 0;
+      setVisiblePeople(Array.isArray(payload.items) ? payload.items : []);
+      setListPage(typeof payload.page === "number" ? payload.page : listPage);
+      setListTotalCount(
+        (current) => searchQuery.trim().length > 0 ? Math.max(current, nextTotalCount) : nextTotalCount
+      );
+      setListTotalPages(typeof payload.totalPages === "number" ? payload.totalPages : 1);
+    } catch {
+      setVisiblePeople([]);
+      if (searchQuery.trim().length === 0) {
+        setListTotalCount(0);
+      }
+      setListTotalPages(1);
+    } finally {
+      setListLoading(false);
+    }
+  }, [listPage, loadPage, searchQuery, sortMode]);
+  React.useEffect(() => {
+    void loadVisiblePeople();
+  }, [loadVisiblePeople, refreshKey]);
+  React.useEffect(() => {
+    setListPage(1);
+  }, [searchQuery, sortMode]);
+  const handleLinkConfirm = React.useCallback(
+    async (input) => {
+      onLoadingChange?.(true);
+      try {
+        await onLinkConfirm(input);
+        await loadVisiblePeople();
+      } finally {
+        onLoadingChange?.(false);
+      }
+    },
+    [loadVisiblePeople, onLinkConfirm, onLoadingChange]
+  );
+  const handleRemove = React.useCallback(
+    async (personId) => {
+      if (!personId || removingId) return;
+      setRemovingId(personId);
+      onLoadingChange?.(true);
+      try {
+        await onUnlink(personId);
+        await loadVisiblePeople();
+      } catch {
+      } finally {
+        setRemovingId(null);
+        onLoadingChange?.(false);
+      }
+    },
+    [loadVisiblePeople, onLoadingChange, onUnlink, removingId]
+  );
+  const linkAction = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      onClick: () => setLinkDialogOpen(true),
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(Link2, { className: "mr-1.5 h-4 w-4" }),
+        linkActionLabel
+      ]
+    }
+  );
+  const addPersonAction = onAddPerson && addActionLabel ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onAddPerson, disabled, children: [
+    /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 h-4 w-4" }),
+    addActionLabel
+  ] }) : null;
+  const linkDialog = /* @__PURE__ */ jsx(
+    LinkEntityDialog,
+    {
+      open: linkDialogOpen,
+      onOpenChange: setLinkDialogOpen,
+      adapter: linkAdapter,
+      initialSelectedIds: linkedIds ?? [],
+      onConfirm: handleLinkConfirm,
+      runGuardedMutation
+    }
+  );
+  if (!listLoading && totalLinkedPeople === 0) {
+    const emptyStateAction = onEmptyStateAction ?? onAddPerson;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        EmptyState,
+        {
+          icon: /* @__PURE__ */ jsx(Users, { className: "h-10 w-10 text-muted-foreground" }),
+          title: emptyState.title,
+          actionLabel: emptyStateAction ? emptyState.actionLabel : void 0,
+          onAction: emptyStateAction,
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyLabel }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4", children: linkAction })
+          ]
+        }
+      ),
+      linkDialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      header,
+      /* @__PURE__ */ jsx("section", { className: "rounded-lg border bg-card px-4 py-4 sm:px-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: sectionTitle }),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "rounded-full px-2 py-0 text-xs font-semibold",
+                  children: totalLinkedPeople
+                }
+              )
+            ] }),
+            sectionSubtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: sectionSubtitle }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 xl:justify-end", children: [
+            linkAction,
+            addPersonAction
+          ] })
+        ] }),
+        totalLinkedPeople > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
+          filtersOpen ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              size: "lg",
+              value: searchQuery,
+              onChange: (event) => setSearchQuery(event.target.value),
+              placeholder: searchPlaceholder
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 lg:justify-end", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: () => setFiltersOpen((current) => !current),
+                className: "h-10",
+                children: [
+                  /* @__PURE__ */ jsx(Filter, { className: "mr-1.5 h-4 w-4" }),
+                  translate("customers.linkedPeople.filter", "Filters")
+                ]
+              }
+            ),
+            filtersOpen && sortOptions.length > 1 ? /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: sortMode,
+                onChange: (event) => setSortMode(event.target.value),
+                className: "h-10 min-w-44 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring",
+                children: sortOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: translate(SORT_LABELS[option].key, SORT_LABELS[option].fallback) }, option))
+              }
+            ) : null
+          ] })
+        ] }) : null,
+        listLoading ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: translate("customers.linkedPeople.loading", "Loading people\u2026") }) : visiblePeople.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "grid items-start gap-4",
+              style: {
+                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr))"
+              },
+              children: visiblePeople.map((person) => /* @__PURE__ */ jsx(
+                PersonCard,
+                {
+                  person,
+                  isStarred: starredIds.has(person.id),
+                  onToggleStar: toggleStar,
+                  onUnlink: handleRemove,
+                  showLinkedDate
+                },
+                person.id
+              ))
+            }
+          ),
+          listTotalPages > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border/60 pt-3 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: translate(
+              "customers.linkedPeople.pageSummary",
+              "Page {{page}} of {{total}}",
+              {
+                page: listPage,
+                total: listTotalPages
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setListPage((current) => Math.max(1, current - 1)),
+                  disabled: listPage <= 1,
+                  children: translate("customers.linkedPeople.previous", "Previous")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setListPage((current) => Math.min(listTotalPages, current + 1)),
+                  disabled: listPage >= listTotalPages,
+                  children: translate("customers.linkedPeople.next", "Next")
+                }
+              )
+            ] })
+          ] }) : null
+        ] }) : totalLinkedPeople > 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: translate(
+          "customers.linkedPeople.noSearchResults",
+          "No people match your search."
+        ) }) : null
+      ] }) }),
+      renderFooter?.({ people: displayedPeople, starredIds })
+    ] }),
+    linkDialog
+  ] });
+}
+var LinkedPeopleSection_default = LinkedPeopleSection;
+export {
+  ALL_LINKED_PEOPLE_SORTS,
+  LinkedPeopleSection,
+  LinkedPeopleSection_default as default
+};
+//# sourceMappingURL=LinkedPeopleSection.js.map

package/dist/modules/customers/components/detail/LinkedPeopleSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/LinkedPeopleSection.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Users, Link2, Plus, Filter } from 'lucide-react'\nimport { EmptyState } from '@open-mercato/ui/backend/EmptyState'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport {\n  readVersionedIdSet,\n  writeVersionedIdSet,\n} from '@open-mercato/shared/lib/browser/versionedPreference'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'\nimport type { TabEmptyStateConfig, Translator } from './types'\nimport { PersonCard } from './PersonCard'\nimport {\n  LinkEntityDialog,\n  type LinkEntityAdapter,\n  type LinkEntityConfirmInput,\n} from '../linking/LinkEntityDialog'\n\ntype GuardedMutationRunner = <T>(\n  operation: () => Promise<T>,\n  mutationPayload?: Record<string, unknown>,\n) => Promise<T>\n\nexport type LinkedPersonSummary = {\n  id: string\n  displayName: string\n  primaryEmail?: string | null\n  primaryPhone?: string | null\n  status?: string | null\n  lifecycleStage?: string | null\n  jobTitle?: string | null\n  department?: string | null\n  createdAt?: string | null\n  organizationId?: string | null\n  temperature?: string | null\n  source?: string | null\n  linkedAt?: string | null\n}\n\nexport type LinkedPeopleSortMode = 'name-asc' | 'name-desc' | 'recent'\n\nexport const ALL_LINKED_PEOPLE_SORTS: LinkedPeopleSortMode[] = ['name-asc', 'name-desc', 'recent']\n\nexport type LinkedPeoplePage = {\n  items?: LinkedPersonSummary[]\n  page?: number\n  total?: number\n  totalPages?: number\n}\n\nexport type LinkedPeopleSectionProps<\n  TDetails = unknown,\n  TLinkSettings = Record<string, unknown>,\n> = {\n  /** Stable id of the owning record; scopes browser-local preferences such as starred people. */\n  scopeId: string\n  /** Records the host already knows about, used until the first page load resolves. */\n  fallbackPeople?: LinkedPersonSummary[]\n  loadPage: (params: {\n    page: number\n    pageSize: number\n    sort: LinkedPeopleSortMode\n    search: string\n  }) => Promise<LinkedPeoplePage>\n  /** Owns messaging and optimistic-lock handling for the unlink write. */\n  onUnlink: (personId: string) => Promise<void>\n  linkAdapter: LinkEntityAdapter<TDetails, TLinkSettings>\n  /** Controlled link-dialog state; falls back to internal state when omitted. */\n  linkDialogOpen?: boolean\n  onLinkDialogOpenChange?: (open: boolean) => void\n  linkedIds?: string[]\n  /** Owns messaging for the link write; rejecting keeps the link dialog open. */\n  onLinkConfirm: (input: LinkEntityConfirmInput<TLinkSettings>) => Promise<void>\n  sectionTitle: string\n  sectionSubtitle?: string\n  searchPlaceholder: string\n  linkActionLabel: string\n  addActionLabel?: string\n  onAddPerson?: () => void\n  emptyLabel: string\n  emptyState: TabEmptyStateConfig\n  onEmptyStateAction?: () => void\n  /**\n   * Which sort options to offer, in order. Defaults to all three.\n   *\n   * A host whose `linkedAt` is not trustworthy must omit `recent`: the deal side does so until\n   * `syncDealPeople` stops re-dating every surviving link on each write, because the ordering\n   * would otherwise collapse into an arbitrary label tie-break.\n   */\n  availableSorts?: LinkedPeopleSortMode[]\n  /** Forwarded to `PersonCard`; a host without a durable `linkedAt` passes `false`. */\n  showLinkedDate?: boolean\n  /** Bump to force a reload after the host mutates the links itself. */\n  refreshKey?: number\n  disabled?: boolean\n  translator?: Translator\n  runGuardedMutation?: GuardedMutationRunner\n  onLoadingChange?: (isLoading: boolean) => void\n  header?: React.ReactNode\n  renderFooter?: (ctx: {\n    people: LinkedPersonSummary[]\n    starredIds: Set<string>\n  }) => React.ReactNode\n}\n\nconst LINKED_PEOPLE_PAGE_SIZE = 20\nconst STARRED_PEOPLE_STORAGE_VERSION = 1\n\nconst SORT_LABELS: Record<LinkedPeopleSortMode, { key: string; fallback: string }> = {\n  'name-asc': { key: 'customers.linkedPeople.sortNameAsc', fallback: 'Sort: Name A-Z' },\n  'name-desc': { key: 'customers.linkedPeople.sortNameDesc', fallback: 'Sort: Name Z-A' },\n  recent: { key: 'customers.linkedPeople.sortRecent', fallback: 'Sort: Recently linked' },\n}\n\nexport function LinkedPeopleSection<\n  TDetails = unknown,\n  TLinkSettings = Record<string, unknown>,\n>({\n  scopeId,\n  fallbackPeople,\n  loadPage,\n  onUnlink,\n  linkAdapter,\n  linkDialogOpen: controlledLinkDialogOpen,\n  onLinkDialogOpenChange,\n  linkedIds,\n  onLinkConfirm,\n  sectionTitle,\n  sectionSubtitle,\n  searchPlaceholder,\n  linkActionLabel,\n  addActionLabel,\n  onAddPerson,\n  emptyLabel,\n  emptyState,\n  onEmptyStateAction,\n  availableSorts = ALL_LINKED_PEOPLE_SORTS,\n  showLinkedDate = true,\n  refreshKey = 0,\n  disabled = false,\n  translator,\n  runGuardedMutation,\n  onLoadingChange,\n  header,\n  renderFooter,\n}: LinkedPeopleSectionProps<TDetails, TLinkSettings>) {\n  const tHook = useT()\n  const fallbackTranslator = React.useMemo<Translator>(\n    () => createTranslatorWithFallback(tHook),\n    [tHook],\n  )\n  const translate: Translator = translator ?? fallbackTranslator\n  const knownPeople = React.useMemo(() => fallbackPeople ?? [], [fallbackPeople])\n  const sortOptions = availableSorts.length > 0 ? availableSorts : ALL_LINKED_PEOPLE_SORTS\n\n  const [removingId, setRemovingId] = React.useState<string | null>(null)\n  const [internalLinkDialogOpen, setInternalLinkDialogOpen] = React.useState(false)\n  const linkDialogOpen = controlledLinkDialogOpen ?? internalLinkDialogOpen\n  const setLinkDialogOpen = React.useCallback(\n    (open: boolean) => {\n      setInternalLinkDialogOpen(open)\n      onLinkDialogOpenChange?.(open)\n    },\n    [onLinkDialogOpenChange],\n  )\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [sortMode, setSortMode] = React.useState<LinkedPeopleSortMode>(sortOptions[0])\n  const [filtersOpen, setFiltersOpen] = React.useState(true)\n  const [visiblePeople, setVisiblePeople] = React.useState<LinkedPersonSummary[]>([])\n  const [listPage, setListPage] = React.useState(1)\n  const [listTotalPages, setListTotalPages] = React.useState(1)\n  const [listTotalCount, setListTotalCount] = React.useState(knownPeople.length)\n  const [listLoading, setListLoading] = React.useState(true)\n  const [starredIds, setStarredIds] = React.useState<Set<string>>(\n    () => readVersionedIdSet(`om:starred-people:${scopeId}`, STARRED_PEOPLE_STORAGE_VERSION),\n  )\n\n  const toggleStar = React.useCallback(\n    (personId: string) => {\n      setStarredIds((prev) => {\n        const next = new Set(prev)\n        if (next.has(personId)) next.delete(personId)\n        else next.add(personId)\n        writeVersionedIdSet(`om:starred-people:${scopeId}`, STARRED_PEOPLE_STORAGE_VERSION, next)\n        return next\n      })\n    },\n    [scopeId],\n  )\n\n  const displayedPeople = React.useMemo(\n    () => (visiblePeople.length > 0 ? visiblePeople : knownPeople),\n    [knownPeople, visiblePeople],\n  )\n  const totalLinkedPeople = listTotalCount > 0 ? listTotalCount : displayedPeople.length\n\n  const loadVisiblePeople = React.useCallback(async () => {\n    setListLoading(true)\n    try {\n      const payload = await loadPage({\n        page: listPage,\n        pageSize: LINKED_PEOPLE_PAGE_SIZE,\n        sort: sortMode,\n        search: searchQuery.trim(),\n      })\n      const nextTotalCount = typeof payload.total === 'number' ? payload.total : 0\n      setVisiblePeople(Array.isArray(payload.items) ? payload.items : [])\n      setListPage(typeof payload.page === 'number' ? payload.page : listPage)\n      setListTotalCount((current) =>\n        searchQuery.trim().length > 0 ? Math.max(current, nextTotalCount) : nextTotalCount,\n      )\n      setListTotalPages(typeof payload.totalPages === 'number' ? payload.totalPages : 1)\n    } catch {\n      setVisiblePeople([])\n      if (searchQuery.trim().length === 0) {\n        setListTotalCount(0)\n      }\n      setListTotalPages(1)\n    } finally {\n      setListLoading(false)\n    }\n  }, [listPage, loadPage, searchQuery, sortMode])\n\n  React.useEffect(() => {\n    void loadVisiblePeople()\n  }, [loadVisiblePeople, refreshKey])\n\n  React.useEffect(() => {\n    setListPage(1)\n  }, [searchQuery, sortMode])\n\n  const handleLinkConfirm = React.useCallback(\n    async (input: LinkEntityConfirmInput<TLinkSettings>) => {\n      onLoadingChange?.(true)\n      try {\n        await onLinkConfirm(input)\n        await loadVisiblePeople()\n      } finally {\n        onLoadingChange?.(false)\n      }\n    },\n    [loadVisiblePeople, onLinkConfirm, onLoadingChange],\n  )\n\n  const handleRemove = React.useCallback(\n    async (personId: string) => {\n      if (!personId || removingId) return\n      setRemovingId(personId)\n      onLoadingChange?.(true)\n      try {\n        await onUnlink(personId)\n        await loadVisiblePeople()\n      } catch {\n        // onUnlink owns user-facing error reporting\n      } finally {\n        setRemovingId(null)\n        onLoadingChange?.(false)\n      }\n    },\n    [loadVisiblePeople, onLoadingChange, onUnlink, removingId],\n  )\n\n  const linkAction = (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"sm\"\n      onClick={() => setLinkDialogOpen(true)}\n      disabled={disabled}\n    >\n      <Link2 className=\"mr-1.5 h-4 w-4\" />\n      {linkActionLabel}\n    </Button>\n  )\n  const addPersonAction = onAddPerson && addActionLabel ? (\n    <Button type=\"button\" size=\"sm\" onClick={onAddPerson} disabled={disabled}>\n      <Plus className=\"mr-1.5 h-4 w-4\" />\n      {addActionLabel}\n    </Button>\n  ) : null\n\n  const linkDialog = (\n    <LinkEntityDialog\n      open={linkDialogOpen}\n      onOpenChange={setLinkDialogOpen}\n      adapter={linkAdapter}\n      initialSelectedIds={linkedIds ?? []}\n      onConfirm={handleLinkConfirm}\n      runGuardedMutation={runGuardedMutation}\n    />\n  )\n\n  if (!listLoading && totalLinkedPeople === 0) {\n    const emptyStateAction = onEmptyStateAction ?? onAddPerson\n    return (\n      <>\n        <EmptyState\n          icon={<Users className=\"h-10 w-10 text-muted-foreground\" />}\n          title={emptyState.title}\n          actionLabel={emptyStateAction ? emptyState.actionLabel : undefined}\n          onAction={emptyStateAction}\n        >\n          <p className=\"text-sm text-muted-foreground\">{emptyLabel}</p>\n          <div className=\"mt-4\">{linkAction}</div>\n        </EmptyState>\n        {linkDialog}\n      </>\n    )\n  }\n\n  return (\n    <>\n      <div className=\"space-y-4\">\n        {header}\n\n        <section className=\"rounded-lg border bg-card px-4 py-4 sm:px-5\">\n          <div className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <h3 className=\"text-base font-semibold\">{sectionTitle}</h3>\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"rounded-full px-2 py-0 text-xs font-semibold\"\n                  >\n                    {totalLinkedPeople}\n                  </Badge>\n                </div>\n                {sectionSubtitle ? (\n                  <p className=\"text-xs text-muted-foreground\">{sectionSubtitle}</p>\n                ) : null}\n              </div>\n              <div className=\"flex flex-wrap items-center gap-2 xl:justify-end\">\n                {linkAction}\n                {addPersonAction}\n              </div>\n            </div>\n\n            {totalLinkedPeople > 0 ? (\n              <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center\">\n                {filtersOpen ? (\n                  <div className=\"min-w-0 flex-1\">\n                    <Input\n                      type=\"text\"\n                      size=\"lg\"\n                      value={searchQuery}\n                      onChange={(event) => setSearchQuery(event.target.value)}\n                      placeholder={searchPlaceholder}\n                    />\n                  </div>\n                ) : null}\n                <div className=\"flex flex-wrap items-center gap-2 lg:justify-end\">\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    onClick={() => setFiltersOpen((current) => !current)}\n                    className=\"h-10\"\n                  >\n                    <Filter className=\"mr-1.5 h-4 w-4\" />\n                    {translate('customers.linkedPeople.filter', 'Filters')}\n                  </Button>\n                  {/*\n                    Deliberately a native <select> rather than the DS `Select`. That primitive is\n                    Radix-based (a button + listbox), and this element is the one the extraction\n                    gate runs through: `CompanyPeopleSection.test.tsx` must keep passing\n                    unmodified, and it drives the sort with `getByDisplayValue` + `fireEvent\n                    .change` \u2014 native-select APIs. Swapping it would also change the company\n                    tab's keyboard and mobile-picker behaviour, which is the one thing this PR\n                    asserts it does not do. Worth migrating, but as its own change.\n                  */}\n                  {filtersOpen && sortOptions.length > 1 ? (\n                    <select\n                      value={sortMode}\n                      onChange={(event) =>\n                        setSortMode(event.target.value as LinkedPeopleSortMode)\n                      }\n                      className=\"h-10 min-w-44 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring\"\n                    >\n                      {sortOptions.map((option) => (\n                        <option key={option} value={option}>\n                          {translate(SORT_LABELS[option].key, SORT_LABELS[option].fallback)}\n                        </option>\n                      ))}\n                    </select>\n                  ) : null}\n                </div>\n              </div>\n            ) : null}\n\n            {listLoading ? (\n              <p className=\"py-6 text-center text-sm text-muted-foreground\">\n                {translate('customers.linkedPeople.loading', 'Loading people\u2026')}\n              </p>\n            ) : visiblePeople.length > 0 ? (\n              <>\n                <div\n                  className=\"grid items-start gap-4\"\n                  style={{\n                    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr))',\n                  }}\n                >\n                  {visiblePeople.map((person) => (\n                    <PersonCard\n                      key={person.id}\n                      person={person}\n                      isStarred={starredIds.has(person.id)}\n                      onToggleStar={toggleStar}\n                      onUnlink={handleRemove}\n                      showLinkedDate={showLinkedDate}\n                    />\n                  ))}\n                </div>\n                {listTotalPages > 1 ? (\n                  <div className=\"flex items-center justify-between border-t border-border/60 pt-3 text-sm text-muted-foreground\">\n                    <span>\n                      {translate(\n                        'customers.linkedPeople.pageSummary',\n                        'Page {{page}} of {{total}}',\n                        {\n                          page: listPage,\n                          total: listTotalPages,\n                        },\n                      )}\n                    </span>\n                    <div className=\"flex items-center gap-2\">\n                      <Button\n                        type=\"button\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => setListPage((current) => Math.max(1, current - 1))}\n                        disabled={listPage <= 1}\n                      >\n                        {translate('customers.linkedPeople.previous', 'Previous')}\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() =>\n                          setListPage((current) => Math.min(listTotalPages, current + 1))\n                        }\n                        disabled={listPage >= listTotalPages}\n                      >\n                        {translate('customers.linkedPeople.next', 'Next')}\n                      </Button>\n                    </div>\n                  </div>\n                ) : null}\n              </>\n            ) : totalLinkedPeople > 0 ? (\n              <p className=\"py-6 text-center text-sm text-muted-foreground\">\n                {translate(\n                  'customers.linkedPeople.noSearchResults',\n                  'No people match your search.',\n                )}\n              </p>\n            ) : null}\n          </div>\n        </section>\n\n        {renderFooter?.({ people: displayedPeople, starredIds })}\n      </div>\n\n      {linkDialog}\n    </>\n  )\n}\n\nexport default LinkedPeopleSection\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/detail/PersonCard.js

@@ -43,14 +43,17 @@ function splitSourceTags(source) {
   if (typeof source !== "string") return [];
   return source.split(/[;,|]/).map((entry) => entry.trim()).filter((entry, index, array) => entry.length > 0 && array.indexOf(entry) === index);
 }
-function PersonCard({ person, isStarred, onToggleStar, onUnlink }) {
+function PersonCard({ person, isStarred, onToggleStar, onUnlink, showLinkedDate = true }) {
   const t = useT();
   const sourceTags = React.useMemo(() => splitSourceTags(person.source), [person.source]);
   const temperature = React.useMemo(() => {
     const value = typeof person.temperature === "string" ? person.temperature.trim().toLowerCase() : "";
     return value in temperatureConfig ? temperatureConfig[value] : null;
   }, [person.temperature]);
-  const linkedDate = React.useMemo(() => formatDate(person.linkedAt ?? person.createdAt), [person.createdAt, person.linkedAt]);
+  const linkedDate = React.useMemo(
+    () => showLinkedDate ? formatDate(person.linkedAt ?? person.createdAt) : null,
+    [person.createdAt, person.linkedAt, showLinkedDate]
+  );
   return /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [

package/dist/modules/customers/components/detail/PersonCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/customers/components/detail/PersonCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { Mail, Phone, Star, MoreHorizontal, ArrowUpRight, Unlink } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport type { CompanyPersonSummary } from './CompanyPeopleSection'\nimport { formatDate, formatFallbackLabel } from './utils'\n\nconst sourceColorMap: Record<string, string> = {\n  linkedin: 'border-status-info-icon text-status-info-icon',\n  email: 'border-status-success-icon text-status-success-icon',\n  web_form: 'border-status-info-icon text-status-info-icon',\n  'web form': 'border-status-info-icon text-status-info-icon',\n  referral: 'border-status-warning-icon text-status-warning-icon',\n  customer_referral: 'border-status-warning-icon text-status-warning-icon',\n  'customer referral': 'border-status-warning-icon text-status-warning-icon',\n  partner_referral: 'border-status-warning-icon text-status-warning-icon',\n  'partner referral': 'border-status-warning-icon text-status-warning-icon',\n  event: 'border-status-info-icon text-status-info-icon',\n  'conference/event': 'border-status-info-icon text-status-info-icon',\n  cold_outreach: 'border-status-neutral-icon text-status-neutral-icon',\n  'cold outreach': 'border-status-neutral-icon text-status-neutral-icon',\n  facebook: 'border-status-info-icon text-status-info-icon',\n  typeform: 'border-status-info-icon text-status-info-icon',\n  other: 'border-status-neutral-icon text-status-neutral-icon',\n}\n\nconst temperatureConfig = {\n  hot: { filled: 5, dotClassName: 'bg-status-error-icon', labelKey: 'customers.temperature.hot', fallback: 'Hot Client' },\n  warm: { filled: 4, dotClassName: 'bg-status-warning-icon', labelKey: 'customers.temperature.warm', fallback: 'High Interest' },\n  high: { filled: 4, dotClassName: 'bg-status-warning-icon', labelKey: 'customers.temperature.high', fallback: 'High Interest' },\n  neutral: { filled: 3, dotClassName: 'bg-status-info-icon', labelKey: 'customers.temperature.neutral', fallback: 'Engaged' },\n  medium: { filled: 3, dotClassName: 'bg-status-info-icon', labelKey: 'customers.temperature.medium', fallback: 'Engaged' },\n  cool: { filled: 2, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.cool', fallback: 'Low Activity' },\n  low: { filled: 2, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.low', fallback: 'Low Activity' },\n  cold: { filled: 1, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.cold', fallback: 'At Risk' },\n} as const\n\nfunction splitSourceTags(source: string | null | undefined): string[] {\n  if (typeof source !== 'string') return []\n  return source\n    .split(/[;,|]/)\n    .map((entry) => entry.trim())\n    .filter((entry, index, array) => entry.length > 0 && array.indexOf(entry) === index)\n}\n\ninterface PersonCardProps {\n  person: CompanyPersonSummary\n  isStarred?: boolean\n  onToggleStar?: (personId: string) => void\n  onUnlink?: (personId: string) => void\n}\n\nexport function PersonCard({ person, isStarred, onToggleStar, onUnlink }: PersonCardProps) {\n  const t = useT()\n  const sourceTags = React.useMemo(() => splitSourceTags(person.source), [person.source])\n  const temperature = React.useMemo(() => {\n    const value = typeof person.temperature === 'string' ? person.temperature.trim().toLowerCase() : ''\n    return value in temperatureConfig ? temperatureConfig[value as keyof typeof temperatureConfig] : null\n  }, [person.temperature])\n  const linkedDate = React.useMemo(() => formatDate(person.linkedAt ?? person.createdAt), [person.createdAt, person.linkedAt])\n\n  return (\n    <div className=\"min-w-0 overflow-hidden rounded-lg border bg-card p-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n          <Avatar label={person.displayName} size=\"lg\" variant=\"monochrome\" />\n          <div className=\"min-w-0 flex-1 space-y-1\">\n            <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n              <span className=\"min-w-0 break-words text-sm font-bold leading-5 text-foreground\">{person.displayName}</span>\n              {onToggleStar && (\n                <IconButton\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onToggleStar(person.id)}\n                  className=\"h-auto shrink-0 p-0 text-muted-foreground hover:text-status-warning-icon\"\n                  aria-label={t('customers.people.card.toggleStar', 'Toggle star')}\n                >\n                  <Star className={cn('size-3.5', isStarred && 'fill-status-warning-icon text-status-warning-icon')} />\n                </IconButton>\n              )}\n            </div>\n            <div className=\"flex flex-wrap items-center gap-1.5\">\n              {person.jobTitle && (\n                <Badge variant=\"secondary\" className=\"max-w-full truncate px-2 py-0.5 text-xs font-semibold\">\n                  {person.jobTitle}\n                </Badge>\n              )}\n              {person.status && (\n                <Badge variant=\"outline\" className=\"shrink-0 px-2 py-0.5 text-xs font-medium\">\n                  <span className=\"mr-1 inline-block size-1.5 rounded-full bg-status-success-icon\" />\n                  {person.status}\n                </Badge>\n              )}\n            </div>\n          </div>\n        </div>\n        <Popover>\n          <PopoverTrigger asChild>\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"xs\"\n              className=\"shrink-0\"\n              aria-label={t('customers.people.card.more', 'More')}\n            >\n              <MoreHorizontal className=\"size-3.5\" />\n            </IconButton>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-36 p-1\">\n            {onUnlink && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"w-full justify-start text-xs text-destructive hover:text-destructive\"\n                onClick={() => onUnlink(person.id)}\n              >\n                <Unlink className=\"mr-1.5 size-3\" />\n                {t('customers.people.card.unlink', 'Unlink')}\n              </Button>\n            )}\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      <div className=\"mt-3 space-y-2 border-t pt-3 text-xs text-foreground\">\n        {person.primaryEmail && (\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <Mail className=\"size-3 shrink-0 text-muted-foreground\" />\n            <span className=\"break-all\">{person.primaryEmail}</span>\n          </div>\n        )}\n        {person.primaryPhone && (\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <Phone className=\"size-3 shrink-0 text-muted-foreground\" />\n            <span className=\"break-all\">{person.primaryPhone}</span>\n          </div>\n        )}\n        {(person.lifecycleStage || linkedDate) && (\n          <div className=\"flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted-foreground\">\n            <span className=\"truncate\">{person.lifecycleStage ?? t('customers.people.card.defaultStage', 'customer')}</span>\n            {linkedDate ? (\n              <>\n                <span aria-hidden>&middot;</span>\n                <span className=\"truncate\">{t('customers.people.card.linkedOn', 'Linked {{date}}', { date: linkedDate })}</span>\n              </>\n            ) : null}\n          </div>\n        )}\n      </div>\n\n      {(temperature || sourceTags.length > 0) && (\n        <div className=\"mt-3 flex flex-col gap-3 border-t pt-3 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"min-w-0 flex-1 space-y-1\">\n            {sourceTags.length > 0 ? (\n              <>\n                <p className=\"text-overline font-bold uppercase tracking-wide text-muted-foreground\">\n                  {t('customers.people.card.source', 'Source')}\n                </p>\n                <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n                  {sourceTags.map((sourceTag) => {\n                    const normalized = sourceTag.toLowerCase().replace(/\\s+/g, '_')\n                    return (\n                      <Badge\n                        key={sourceTag}\n                        variant=\"outline\"\n                        className={cn(\n                          'max-w-full truncate px-2 py-0.5 text-xs font-semibold',\n                          sourceColorMap[normalized] ?? sourceColorMap[sourceTag.toLowerCase()] ?? 'border-border text-muted-foreground',\n                        )}\n                      >\n                        {formatFallbackLabel(sourceTag)}\n                      </Badge>\n                    )\n                  })}\n                </div>\n              </>\n            ) : null}\n          </div>\n          {temperature ? (\n            <div className=\"space-y-1 sm:ml-auto sm:text-right\">\n              <div className=\"flex items-center gap-1 text-overline font-bold text-muted-foreground sm:justify-end\">\n                <span>{t(temperature.labelKey, temperature.fallback)}</span>\n              </div>\n              <div className=\"flex items-center gap-1 sm:justify-end\">\n                {Array.from({ length: 5 }).map((_, index) => (\n                  <span\n                    key={index}\n                    className={cn(\n                      'inline-block size-2 rounded-full border border-border/70',\n                      index < temperature.filled ? temperature.dotClassName : 'bg-muted',\n                    )}\n                  />\n                ))}\n              </div>\n            </div>\n          ) : null}\n        </div>\n      )}\n\n      <div className=\"mt-3 flex flex-col gap-2 border-t pt-3 sm:flex-row sm:flex-wrap\">\n        <Button\n          asChild\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 w-full text-xs font-semibold sm:min-w-[9rem] sm:flex-1\"\n        >\n          <Link href={`/backend/customers/people-v2/${person.id}`}>\n            <ArrowUpRight className=\"mr-1 size-3\" />\n            {t('customers.people.card.open', 'Open person')}\n          </Link>\n        </Button>\n        {onUnlink && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-8 w-full border-destructive/30 text-xs font-semibold text-destructive hover:bg-destructive/10 sm:min-w-[7rem] sm:flex-none\"\n            onClick={() => onUnlink(person.id)}\n          >\n            {t('customers.people.card.unlink', 'Unlink')}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { Mail, Phone, Star, MoreHorizontal, ArrowUpRight, Unlink } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport type { LinkedPersonSummary } from './LinkedPeopleSection'\nimport { formatDate, formatFallbackLabel } from './utils'\n\nconst sourceColorMap: Record<string, string> = {\n  linkedin: 'border-status-info-icon text-status-info-icon',\n  email: 'border-status-success-icon text-status-success-icon',\n  web_form: 'border-status-info-icon text-status-info-icon',\n  'web form': 'border-status-info-icon text-status-info-icon',\n  referral: 'border-status-warning-icon text-status-warning-icon',\n  customer_referral: 'border-status-warning-icon text-status-warning-icon',\n  'customer referral': 'border-status-warning-icon text-status-warning-icon',\n  partner_referral: 'border-status-warning-icon text-status-warning-icon',\n  'partner referral': 'border-status-warning-icon text-status-warning-icon',\n  event: 'border-status-info-icon text-status-info-icon',\n  'conference/event': 'border-status-info-icon text-status-info-icon',\n  cold_outreach: 'border-status-neutral-icon text-status-neutral-icon',\n  'cold outreach': 'border-status-neutral-icon text-status-neutral-icon',\n  facebook: 'border-status-info-icon text-status-info-icon',\n  typeform: 'border-status-info-icon text-status-info-icon',\n  other: 'border-status-neutral-icon text-status-neutral-icon',\n}\n\nconst temperatureConfig = {\n  hot: { filled: 5, dotClassName: 'bg-status-error-icon', labelKey: 'customers.temperature.hot', fallback: 'Hot Client' },\n  warm: { filled: 4, dotClassName: 'bg-status-warning-icon', labelKey: 'customers.temperature.warm', fallback: 'High Interest' },\n  high: { filled: 4, dotClassName: 'bg-status-warning-icon', labelKey: 'customers.temperature.high', fallback: 'High Interest' },\n  neutral: { filled: 3, dotClassName: 'bg-status-info-icon', labelKey: 'customers.temperature.neutral', fallback: 'Engaged' },\n  medium: { filled: 3, dotClassName: 'bg-status-info-icon', labelKey: 'customers.temperature.medium', fallback: 'Engaged' },\n  cool: { filled: 2, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.cool', fallback: 'Low Activity' },\n  low: { filled: 2, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.low', fallback: 'Low Activity' },\n  cold: { filled: 1, dotClassName: 'bg-status-neutral-icon', labelKey: 'customers.temperature.cold', fallback: 'At Risk' },\n} as const\n\nfunction splitSourceTags(source: string | null | undefined): string[] {\n  if (typeof source !== 'string') return []\n  return source\n    .split(/[;,|]/)\n    .map((entry) => entry.trim())\n    .filter((entry, index, array) => entry.length > 0 && array.indexOf(entry) === index)\n}\n\ninterface PersonCardProps {\n  person: LinkedPersonSummary\n  isStarred?: boolean\n  onToggleStar?: (personId: string) => void\n  onUnlink?: (personId: string) => void\n  /**\n   * Render the \"Linked {date}\" line. Defaults to `true`; a host whose `linkedAt` is not\n   * durable passes `false` rather than showing a date that is wrong after the first write.\n   */\n  showLinkedDate?: boolean\n}\n\nexport function PersonCard({ person, isStarred, onToggleStar, onUnlink, showLinkedDate = true }: PersonCardProps) {\n  const t = useT()\n  const sourceTags = React.useMemo(() => splitSourceTags(person.source), [person.source])\n  const temperature = React.useMemo(() => {\n    const value = typeof person.temperature === 'string' ? person.temperature.trim().toLowerCase() : ''\n    return value in temperatureConfig ? temperatureConfig[value as keyof typeof temperatureConfig] : null\n  }, [person.temperature])\n  const linkedDate = React.useMemo(\n    () => (showLinkedDate ? formatDate(person.linkedAt ?? person.createdAt) : null),\n    [person.createdAt, person.linkedAt, showLinkedDate],\n  )\n\n  return (\n    <div className=\"min-w-0 overflow-hidden rounded-lg border bg-card p-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n          <Avatar label={person.displayName} size=\"lg\" variant=\"monochrome\" />\n          <div className=\"min-w-0 flex-1 space-y-1\">\n            <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n              <span className=\"min-w-0 break-words text-sm font-bold leading-5 text-foreground\">{person.displayName}</span>\n              {onToggleStar && (\n                <IconButton\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => onToggleStar(person.id)}\n                  className=\"h-auto shrink-0 p-0 text-muted-foreground hover:text-status-warning-icon\"\n                  aria-label={t('customers.people.card.toggleStar', 'Toggle star')}\n                >\n                  <Star className={cn('size-3.5', isStarred && 'fill-status-warning-icon text-status-warning-icon')} />\n                </IconButton>\n              )}\n            </div>\n            <div className=\"flex flex-wrap items-center gap-1.5\">\n              {person.jobTitle && (\n                <Badge variant=\"secondary\" className=\"max-w-full truncate px-2 py-0.5 text-xs font-semibold\">\n                  {person.jobTitle}\n                </Badge>\n              )}\n              {person.status && (\n                <Badge variant=\"outline\" className=\"shrink-0 px-2 py-0.5 text-xs font-medium\">\n                  <span className=\"mr-1 inline-block size-1.5 rounded-full bg-status-success-icon\" />\n                  {person.status}\n                </Badge>\n              )}\n            </div>\n          </div>\n        </div>\n        <Popover>\n          <PopoverTrigger asChild>\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"xs\"\n              className=\"shrink-0\"\n              aria-label={t('customers.people.card.more', 'More')}\n            >\n              <MoreHorizontal className=\"size-3.5\" />\n            </IconButton>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-36 p-1\">\n            {onUnlink && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"w-full justify-start text-xs text-destructive hover:text-destructive\"\n                onClick={() => onUnlink(person.id)}\n              >\n                <Unlink className=\"mr-1.5 size-3\" />\n                {t('customers.people.card.unlink', 'Unlink')}\n              </Button>\n            )}\n          </PopoverContent>\n        </Popover>\n      </div>\n\n      <div className=\"mt-3 space-y-2 border-t pt-3 text-xs text-foreground\">\n        {person.primaryEmail && (\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <Mail className=\"size-3 shrink-0 text-muted-foreground\" />\n            <span className=\"break-all\">{person.primaryEmail}</span>\n          </div>\n        )}\n        {person.primaryPhone && (\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <Phone className=\"size-3 shrink-0 text-muted-foreground\" />\n            <span className=\"break-all\">{person.primaryPhone}</span>\n          </div>\n        )}\n        {(person.lifecycleStage || linkedDate) && (\n          <div className=\"flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted-foreground\">\n            <span className=\"truncate\">{person.lifecycleStage ?? t('customers.people.card.defaultStage', 'customer')}</span>\n            {linkedDate ? (\n              <>\n                <span aria-hidden>&middot;</span>\n                <span className=\"truncate\">{t('customers.people.card.linkedOn', 'Linked {{date}}', { date: linkedDate })}</span>\n              </>\n            ) : null}\n          </div>\n        )}\n      </div>\n\n      {(temperature || sourceTags.length > 0) && (\n        <div className=\"mt-3 flex flex-col gap-3 border-t pt-3 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"min-w-0 flex-1 space-y-1\">\n            {sourceTags.length > 0 ? (\n              <>\n                <p className=\"text-overline font-bold uppercase tracking-wide text-muted-foreground\">\n                  {t('customers.people.card.source', 'Source')}\n                </p>\n                <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">\n                  {sourceTags.map((sourceTag) => {\n                    const normalized = sourceTag.toLowerCase().replace(/\\s+/g, '_')\n                    return (\n                      <Badge\n                        key={sourceTag}\n                        variant=\"outline\"\n                        className={cn(\n                          'max-w-full truncate px-2 py-0.5 text-xs font-semibold',\n                          sourceColorMap[normalized] ?? sourceColorMap[sourceTag.toLowerCase()] ?? 'border-border text-muted-foreground',\n                        )}\n                      >\n                        {formatFallbackLabel(sourceTag)}\n                      </Badge>\n                    )\n                  })}\n                </div>\n              </>\n            ) : null}\n          </div>\n          {temperature ? (\n            <div className=\"space-y-1 sm:ml-auto sm:text-right\">\n              <div className=\"flex items-center gap-1 text-overline font-bold text-muted-foreground sm:justify-end\">\n                <span>{t(temperature.labelKey, temperature.fallback)}</span>\n              </div>\n              <div className=\"flex items-center gap-1 sm:justify-end\">\n                {Array.from({ length: 5 }).map((_, index) => (\n                  <span\n                    key={index}\n                    className={cn(\n                      'inline-block size-2 rounded-full border border-border/70',\n                      index < temperature.filled ? temperature.dotClassName : 'bg-muted',\n                    )}\n                  />\n                ))}\n              </div>\n            </div>\n          ) : null}\n        </div>\n      )}\n\n      <div className=\"mt-3 flex flex-col gap-2 border-t pt-3 sm:flex-row sm:flex-wrap\">\n        <Button\n          asChild\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-8 w-full text-xs font-semibold sm:min-w-[9rem] sm:flex-1\"\n        >\n          <Link href={`/backend/customers/people-v2/${person.id}`}>\n            <ArrowUpRight className=\"mr-1 size-3\" />\n            {t('customers.people.card.open', 'Open person')}\n          </Link>\n        </Button>\n        {onUnlink && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-8 w-full border-destructive/30 text-xs font-semibold text-destructive hover:bg-destructive/10 sm:min-w-[7rem] sm:flex-none\"\n            onClick={() => onUnlink(person.id)}\n          >\n            {t('customers.people.card.unlink', 'Unlink')}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }