@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

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

@@ -0,0 +1,345 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowLeft, ArrowRight, Link2 } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { CompanyCard } from "./CompanyCard.js";
+import { useCustomerDictionary } from "./hooks/useCustomerDictionary.js";
+import { LinkEntityDialog } from "../linking/LinkEntityDialog.js";
+import { createCompanyLinkAdapter } from "../linking/adapters/companyAdapter.js";
+const LINKED_PAGE_SIZE = 20;
+function sameIdSet(left, right) {
+  if (left.length !== right.length) return false;
+  const rightSet = new Set(right);
+  return left.every((value) => rightSet.has(value));
+}
+function Pagination({
+  page,
+  totalPages,
+  onPageChange
+}) {
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border/60 pt-3 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Page ",
+      page,
+      " of ",
+      totalPages
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(Math.max(1, page - 1)),
+          disabled: page <= 1,
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-1.5 size-3.5" }),
+            "Previous"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => onPageChange(Math.min(totalPages, page + 1)),
+          disabled: page >= totalPages,
+          children: [
+            "Next",
+            /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1.5 size-3.5" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PersonCompaniesSection({
+  personId,
+  personName: _personName,
+  initialLinkedCompanies = [],
+  onChanged,
+  runGuardedMutation
+}) {
+  const t = useT();
+  const [items, setItems] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [search, setSearch] = React.useState("");
+  const [sort, setSort] = React.useState("name-asc");
+  const [page, setPage] = React.useState(1);
+  const [totalPages, setTotalPages] = React.useState(1);
+  const [linkedCompanies, setLinkedCompanies] = React.useState(
+    initialLinkedCompanies
+  );
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const { data: statusDict } = useCustomerDictionary("statuses");
+  const { data: lifecycleDict } = useCustomerDictionary("lifecycle-stages");
+  const { data: temperatureDict } = useCustomerDictionary("temperature");
+  const { data: renewalQuarterDict } = useCustomerDictionary("renewal-quarters");
+  const { data: roleDict } = useCustomerDictionary("person-company-roles");
+  React.useEffect(() => {
+    setLinkedCompanies(initialLinkedCompanies);
+  }, [initialLinkedCompanies]);
+  const runWriteMutation = React.useCallback(
+    async (operation, mutationPayload) => {
+      if (!runGuardedMutation) {
+        return operation();
+      }
+      return runGuardedMutation(operation, mutationPayload);
+    },
+    [runGuardedMutation]
+  );
+  const loadData = React.useCallback(
+    async (options) => {
+      const showLoading = options?.showLoading ?? true;
+      if (showLoading) setLoading(true);
+      try {
+        const params = new URLSearchParams({
+          page: String(page),
+          pageSize: String(LINKED_PAGE_SIZE),
+          sort
+        });
+        if (search.trim().length > 0) {
+          params.set("search", search.trim());
+        }
+        const payload = await readApiResultOrThrow(
+          `/api/customers/people/${encodeURIComponent(personId)}/companies/enriched?${params.toString()}`,
+          { cache: "no-store" }
+        );
+        const nextItems = Array.isArray(payload?.items) ? payload.items : [];
+        setItems(nextItems);
+        setTotalPages(typeof payload?.totalPages === "number" ? payload.totalPages : 1);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : t("customers.people.detail.companies.loadError", "Failed to load companies.");
+        flash(message, "error");
+        setItems([]);
+        setTotalPages(1);
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [page, personId, search, sort, t]
+  );
+  React.useEffect(() => {
+    void loadData();
+  }, [loadData]);
+  React.useEffect(() => {
+    setPage(1);
+  }, [search, sort]);
+  const linkedIds = React.useMemo(
+    () => linkedCompanies.map((entry) => entry.id),
+    [linkedCompanies]
+  );
+  const linkedPrimaryId = React.useMemo(
+    () => linkedCompanies.find((entry) => entry.isPrimary)?.id ?? linkedCompanies[0]?.id ?? null,
+    [linkedCompanies]
+  );
+  const companyLinkAdapter = React.useMemo(
+    () => createCompanyLinkAdapter({
+      dialogTitle: t("customers.linking.company.dialogTitle", "Link company"),
+      dialogSubtitle: _personName ? t("customers.linking.company.dialogSubtitleFor", "Link an existing company to {{name}}", {
+        name: _personName
+      }) : t("customers.linking.company.dialogSubtitle", "Link an existing company to this person"),
+      sectionLabel: t("customers.linking.company.sectionLabel", "MATCHING COMPANIES"),
+      searchPlaceholder: t(
+        "customers.linking.company.searchPlaceholder",
+        "Search all companies\u2026"
+      ),
+      searchEmptyHint: t(
+        "customers.linking.company.searchEmpty",
+        "No matching companies found."
+      ),
+      selectedEmptyHint: t(
+        "customers.linking.company.selectedEmpty",
+        "No companies selected."
+      ),
+      confirmButtonLabel: t("customers.linking.company.confirmButton", "Link company"),
+      excludeLinkedPersonId: personId
+    }),
+    [_personName, personId, t]
+  );
+  const handleLinkConfirm = React.useCallback(
+    async ({
+      addedIds,
+      removedIds,
+      nextSelectedIds,
+      primaryId,
+      optionsById
+    }) => {
+      const currentPrimaryId = linkedPrimaryId;
+      const nextPrimaryId = nextSelectedIds.length ? primaryId && nextSelectedIds.includes(primaryId) ? primaryId : nextSelectedIds[0] : null;
+      try {
+        for (const companyId of removedIds) {
+          await runWriteMutation(
+            () => apiCallOrThrow(
+              `/api/customers/people/${encodeURIComponent(personId)}/companies/${encodeURIComponent(companyId)}`,
+              { method: "DELETE" }
+            ),
+            { companyId, personId, operation: "removePersonCompanyLink" }
+          );
+        }
+        for (const companyId of addedIds) {
+          await runWriteMutation(
+            () => apiCallOrThrow(
+              `/api/customers/people/${encodeURIComponent(personId)}/companies`,
+              {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                  companyId,
+                  isPrimary: nextPrimaryId === companyId
+                })
+              }
+            ),
+            { companyId, personId, operation: "addPersonCompanyLink" }
+          );
+        }
+        if (nextPrimaryId && nextPrimaryId !== currentPrimaryId && !addedIds.includes(nextPrimaryId)) {
+          await runWriteMutation(
+            () => apiCallOrThrow(
+              `/api/customers/people/${encodeURIComponent(personId)}/companies/${encodeURIComponent(nextPrimaryId)}`,
+              {
+                method: "PATCH",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ isPrimary: true })
+              }
+            ),
+            { companyId: nextPrimaryId, personId, operation: "setPrimaryPersonCompanyLink" }
+          );
+        }
+        const nextLinkedCompanies = nextSelectedIds.map((id) => {
+          const option = optionsById[id];
+          const fromCurrent = linkedCompanies.find((entry) => entry.id === id);
+          return {
+            id,
+            displayName: option?.label ?? fromCurrent?.displayName ?? id,
+            isPrimary: id === nextPrimaryId
+          };
+        });
+        setLinkedCompanies(nextLinkedCompanies);
+        await loadData({ showLoading: false });
+        await onChanged?.();
+        flash(
+          t("customers.people.detail.companies.manageSuccess", "Linked companies updated."),
+          "success"
+        );
+      } catch (error) {
+        const message = error instanceof Error ? error.message : t(
+          "customers.people.detail.companies.manageError",
+          "Failed to update linked companies."
+        );
+        flash(message, "error");
+        throw error;
+      }
+    },
+    [linkedCompanies, linkedPrimaryId, loadData, onChanged, personId, runWriteMutation, t]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-2xl border border-border/70 bg-card px-4 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: t("customers.people.detail.companies.manageTitle", "Manage linked companies") }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: t("customers.people.detail.companies.summary", "{{count}} linked companies", {
+            count: linkedCompanies.length
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: search,
+              onChange: (event) => setSearch(event.target.value),
+              placeholder: t(
+                "customers.people.detail.companies.searchPlaceholder",
+                "Search linked companies\u2026"
+              ),
+              className: "sm:w-[260px]"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => setDialogOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Link2, { className: "mr-2 size-4" }),
+                t("customers.people.detail.companies.manageAction", "Manage links")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: sort,
+          onChange: (event) => setSort(event.target.value),
+          className: "h-10 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "name-asc", children: t("customers.people.detail.companies.sortNameAsc", "Sort: Name A-Z") }),
+            /* @__PURE__ */ jsx("option", { value: "name-desc", children: t("customers.people.detail.companies.sortNameDesc", "Sort: Name Z-A") }),
+            /* @__PURE__ */ jsx("option", { value: "recent", children: t("customers.people.detail.companies.sortRecent", "Sort: Recently active") })
+          ]
+        }
+      ) }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2].map((idx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-[320px] animate-pulse rounded-2xl border border-border/60 bg-muted/30"
+        },
+        idx
+      )) }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-dashed border-border/60 px-6 py-12 text-center text-sm text-muted-foreground", children: search.trim().length ? t(
+        "customers.people.detail.companies.noSearchResults",
+        "No linked companies match your search."
+      ) : t(
+        "customers.people.detail.empty.companies",
+        "No company linked to this person."
+      ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: items.map((item) => /* @__PURE__ */ jsx(
+          CompanyCard,
+          {
+            data: item,
+            personName: _personName,
+            statusMap: statusDict?.map,
+            lifecycleMap: lifecycleDict?.map,
+            temperatureMap: temperatureDict?.map,
+            renewalQuarterMap: renewalQuarterDict?.map,
+            roleMap: roleDict?.map
+          },
+          item.companyId
+        )) }),
+        /* @__PURE__ */ jsx(Pagination, { page, totalPages, onPageChange: setPage })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      LinkEntityDialog,
+      {
+        open: dialogOpen,
+        onOpenChange: setDialogOpen,
+        adapter: companyLinkAdapter,
+        initialSelectedIds: linkedIds,
+        initialPrimaryId: linkedPrimaryId,
+        primarySupported: true,
+        onConfirm: handleLinkConfirm,
+        runGuardedMutation: runWriteMutation
+      }
+    )
+  ] });
+}
+var PersonCompaniesSection_default = PersonCompaniesSection;
+export {
+  PersonCompaniesSection,
+  PersonCompaniesSection_default as default,
+  sameIdSet
+};
+//# sourceMappingURL=PersonCompaniesSection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/PersonCompaniesSection.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { ArrowLeft, ArrowRight, Link2 } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { CompanyCard, type EnrichedCompanyData } from './CompanyCard'\nimport { useCustomerDictionary } from './hooks/useCustomerDictionary'\nimport { LinkEntityDialog, type LinkEntityOption } from '../linking/LinkEntityDialog'\nimport { createCompanyLinkAdapter } from '../linking/adapters/companyAdapter'\n\ntype GuardedMutationRunner = <T,>(\n  operation: () => Promise<T>,\n  mutationPayload?: Record<string, unknown>,\n) => Promise<T>\n\ntype LinkedCompanySummary = {\n  id: string\n  displayName: string\n  isPrimary: boolean\n}\n\ntype PersonCompaniesSectionProps = {\n  personId: string\n  personName: string\n  initialLinkedCompanies?: LinkedCompanySummary[]\n  onChanged?: () => Promise<void> | void\n  runGuardedMutation?: GuardedMutationRunner\n}\n\nconst LINKED_PAGE_SIZE = 20\n\nfunction sameIdSet(left: string[], right: string[]): boolean {\n  if (left.length !== right.length) return false\n  const rightSet = new Set(right)\n  return left.every((value) => rightSet.has(value))\n}\n\nfunction Pagination({\n  page,\n  totalPages,\n  onPageChange,\n}: {\n  page: number\n  totalPages: number\n  onPageChange: (page: number) => void\n}) {\n  if (totalPages <= 1) return null\n  return (\n    <div className=\"flex items-center justify-between border-t border-border/60 pt-3 text-sm text-muted-foreground\">\n      <span>\n        Page {page} of {totalPages}\n      </span>\n      <div className=\"flex items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(Math.max(1, page - 1))}\n          disabled={page <= 1}\n        >\n          <ArrowLeft className=\"mr-1.5 size-3.5\" />\n          Previous\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n          disabled={page >= totalPages}\n        >\n          Next\n          <ArrowRight className=\"ml-1.5 size-3.5\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport function PersonCompaniesSection({\n  personId,\n  personName: _personName,\n  initialLinkedCompanies = [],\n  onChanged,\n  runGuardedMutation,\n}: PersonCompaniesSectionProps) {\n  const t = useT()\n  const [items, setItems] = React.useState<EnrichedCompanyData[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [search, setSearch] = React.useState('')\n  const [sort, setSort] = React.useState<'name-asc' | 'name-desc' | 'recent'>('name-asc')\n  const [page, setPage] = React.useState(1)\n  const [totalPages, setTotalPages] = React.useState(1)\n  const [linkedCompanies, setLinkedCompanies] = React.useState<LinkedCompanySummary[]>(\n    initialLinkedCompanies,\n  )\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n\n  const { data: statusDict } = useCustomerDictionary('statuses')\n  const { data: lifecycleDict } = useCustomerDictionary('lifecycle-stages')\n  const { data: temperatureDict } = useCustomerDictionary('temperature')\n  const { data: renewalQuarterDict } = useCustomerDictionary('renewal-quarters')\n  const { data: roleDict } = useCustomerDictionary('person-company-roles')\n\n  React.useEffect(() => {\n    setLinkedCompanies(initialLinkedCompanies)\n  }, [initialLinkedCompanies])\n\n  const runWriteMutation = React.useCallback(\n    async <T,>(\n      operation: () => Promise<T>,\n      mutationPayload?: Record<string, unknown>,\n    ): Promise<T> => {\n      if (!runGuardedMutation) {\n        return operation()\n      }\n      return runGuardedMutation(operation, mutationPayload)\n    },\n    [runGuardedMutation],\n  )\n\n  const loadData = React.useCallback(\n    async (options?: { showLoading?: boolean }) => {\n      const showLoading = options?.showLoading ?? true\n      if (showLoading) setLoading(true)\n      try {\n        const params = new URLSearchParams({\n          page: String(page),\n          pageSize: String(LINKED_PAGE_SIZE),\n          sort,\n        })\n        if (search.trim().length > 0) {\n          params.set('search', search.trim())\n        }\n        const payload = await readApiResultOrThrow<{\n          items?: EnrichedCompanyData[]\n          totalPages?: number\n        }>(\n          `/api/customers/people/${encodeURIComponent(personId)}/companies/enriched?${params.toString()}`,\n          { cache: 'no-store' },\n        )\n        const nextItems = Array.isArray(payload?.items) ? payload.items : []\n        setItems(nextItems)\n        setTotalPages(typeof payload?.totalPages === 'number' ? payload.totalPages : 1)\n      } catch (error) {\n        const message =\n          error instanceof Error\n            ? error.message\n            : t('customers.people.detail.companies.loadError', 'Failed to load companies.')\n        flash(message, 'error')\n        setItems([])\n        setTotalPages(1)\n      } finally {\n        if (showLoading) setLoading(false)\n      }\n    },\n    [page, personId, search, sort, t],\n  )\n\n  React.useEffect(() => {\n    void loadData()\n  }, [loadData])\n\n  React.useEffect(() => {\n    setPage(1)\n  }, [search, sort])\n\n  const linkedIds = React.useMemo(\n    () => linkedCompanies.map((entry) => entry.id),\n    [linkedCompanies],\n  )\n  const linkedPrimaryId = React.useMemo(\n    () =>\n      linkedCompanies.find((entry) => entry.isPrimary)?.id ??\n      linkedCompanies[0]?.id ??\n      null,\n    [linkedCompanies],\n  )\n\n  const companyLinkAdapter = React.useMemo(\n    () =>\n      createCompanyLinkAdapter({\n        dialogTitle: t('customers.linking.company.dialogTitle', 'Link company'),\n        dialogSubtitle: _personName\n          ? t('customers.linking.company.dialogSubtitleFor', 'Link an existing company to {{name}}', {\n              name: _personName,\n            })\n          : t('customers.linking.company.dialogSubtitle', 'Link an existing company to this person'),\n        sectionLabel: t('customers.linking.company.sectionLabel', 'MATCHING COMPANIES'),\n        searchPlaceholder: t(\n          'customers.linking.company.searchPlaceholder',\n          'Search all companies\u2026',\n        ),\n        searchEmptyHint: t(\n          'customers.linking.company.searchEmpty',\n          'No matching companies found.',\n        ),\n        selectedEmptyHint: t(\n          'customers.linking.company.selectedEmpty',\n          'No companies selected.',\n        ),\n        confirmButtonLabel: t('customers.linking.company.confirmButton', 'Link company'),\n        excludeLinkedPersonId: personId,\n      }),\n    [_personName, personId, t],\n  )\n\n  const handleLinkConfirm = React.useCallback(\n    async ({\n      addedIds,\n      removedIds,\n      nextSelectedIds,\n      primaryId,\n      optionsById,\n    }: {\n      addedIds: string[]\n      removedIds: string[]\n      nextSelectedIds: string[]\n      primaryId?: string | null\n      optionsById: Record<string, LinkEntityOption>\n    }) => {\n      const currentPrimaryId = linkedPrimaryId\n      const nextPrimaryId = nextSelectedIds.length\n        ? primaryId && nextSelectedIds.includes(primaryId)\n          ? primaryId\n          : nextSelectedIds[0]\n        : null\n\n      try {\n        for (const companyId of removedIds) {\n          await runWriteMutation(\n            () =>\n              apiCallOrThrow(\n                `/api/customers/people/${encodeURIComponent(personId)}/companies/${encodeURIComponent(companyId)}`,\n                { method: 'DELETE' },\n              ),\n            { companyId, personId, operation: 'removePersonCompanyLink' },\n          )\n        }\n\n        for (const companyId of addedIds) {\n          await runWriteMutation(\n            () =>\n              apiCallOrThrow(\n                `/api/customers/people/${encodeURIComponent(personId)}/companies`,\n                {\n                  method: 'POST',\n                  headers: { 'content-type': 'application/json' },\n                  body: JSON.stringify({\n                    companyId,\n                    isPrimary: nextPrimaryId === companyId,\n                  }),\n                },\n              ),\n            { companyId, personId, operation: 'addPersonCompanyLink' },\n          )\n        }\n\n        if (\n          nextPrimaryId &&\n          nextPrimaryId !== currentPrimaryId &&\n          !addedIds.includes(nextPrimaryId)\n        ) {\n          await runWriteMutation(\n            () =>\n              apiCallOrThrow(\n                `/api/customers/people/${encodeURIComponent(personId)}/companies/${encodeURIComponent(nextPrimaryId)}`,\n                {\n                  method: 'PATCH',\n                  headers: { 'content-type': 'application/json' },\n                  body: JSON.stringify({ isPrimary: true }),\n                },\n              ),\n            { companyId: nextPrimaryId, personId, operation: 'setPrimaryPersonCompanyLink' },\n          )\n        }\n\n        const nextLinkedCompanies: LinkedCompanySummary[] = nextSelectedIds.map((id) => {\n          const option = optionsById[id]\n          const fromCurrent = linkedCompanies.find((entry) => entry.id === id)\n          return {\n            id,\n            displayName: option?.label ?? fromCurrent?.displayName ?? id,\n            isPrimary: id === nextPrimaryId,\n          }\n        })\n        setLinkedCompanies(nextLinkedCompanies)\n        await loadData({ showLoading: false })\n        await onChanged?.()\n        flash(\n          t('customers.people.detail.companies.manageSuccess', 'Linked companies updated.'),\n          'success',\n        )\n      } catch (error) {\n        const message =\n          error instanceof Error\n            ? error.message\n            : t(\n                'customers.people.detail.companies.manageError',\n                'Failed to update linked companies.',\n              )\n        flash(message, 'error')\n        throw error\n      }\n    },\n    [linkedCompanies, linkedPrimaryId, loadData, onChanged, personId, runWriteMutation, t],\n  )\n\n  return (\n    <>\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-col gap-3 rounded-2xl border border-border/70 bg-card px-4 py-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-1\">\n            <div className=\"text-sm font-semibold text-foreground\">\n              {t('customers.people.detail.companies.manageTitle', 'Manage linked companies')}\n            </div>\n            <div className=\"text-sm text-muted-foreground\">\n              {t('customers.people.detail.companies.summary', '{{count}} linked companies', {\n                count: linkedCompanies.length,\n              })}\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Input\n              value={search}\n              onChange={(event) => setSearch(event.target.value)}\n              placeholder={t(\n                'customers.people.detail.companies.searchPlaceholder',\n                'Search linked companies\u2026',\n              )}\n              className=\"sm:w-[260px]\"\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => setDialogOpen(true)}\n            >\n              <Link2 className=\"mr-2 size-4\" />\n              {t('customers.people.detail.companies.manageAction', 'Manage links')}\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-end\">\n          <select\n            value={sort}\n            onChange={(event) =>\n              setSort(event.target.value as 'name-asc' | 'name-desc' | 'recent')\n            }\n            className=\"h-10 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring\"\n          >\n            <option value=\"name-asc\">\n              {t('customers.people.detail.companies.sortNameAsc', 'Sort: Name A-Z')}\n            </option>\n            <option value=\"name-desc\">\n              {t('customers.people.detail.companies.sortNameDesc', 'Sort: Name Z-A')}\n            </option>\n            <option value=\"recent\">\n              {t('customers.people.detail.companies.sortRecent', 'Sort: Recently active')}\n            </option>\n          </select>\n        </div>\n\n        {loading ? (\n          <div className=\"space-y-4\">\n            {[1, 2].map((idx) => (\n              <div\n                key={idx}\n                className=\"h-[320px] animate-pulse rounded-2xl border border-border/60 bg-muted/30\"\n              />\n            ))}\n          </div>\n        ) : items.length === 0 ? (\n          <div className=\"rounded-2xl border border-dashed border-border/60 px-6 py-12 text-center text-sm text-muted-foreground\">\n            {search.trim().length\n              ? t(\n                  'customers.people.detail.companies.noSearchResults',\n                  'No linked companies match your search.',\n                )\n              : t(\n                  'customers.people.detail.empty.companies',\n                  'No company linked to this person.',\n                )}\n          </div>\n        ) : (\n          <>\n            <div className=\"space-y-4\">\n              {items.map((item) => (\n                <CompanyCard\n                  key={item.companyId}\n                  data={item}\n                  personName={_personName}\n                  statusMap={statusDict?.map}\n                  lifecycleMap={lifecycleDict?.map}\n                  temperatureMap={temperatureDict?.map}\n                  renewalQuarterMap={renewalQuarterDict?.map}\n                  roleMap={roleDict?.map}\n                />\n              ))}\n            </div>\n            <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />\n          </>\n        )}\n      </div>\n\n      <LinkEntityDialog\n        open={dialogOpen}\n        onOpenChange={setDialogOpen}\n        adapter={companyLinkAdapter}\n        initialSelectedIds={linkedIds}\n        initialPrimaryId={linkedPrimaryId}\n        primarySupported\n        onConfirm={handleLinkConfirm}\n        runGuardedMutation={runWriteMutation}\n      />\n    </>\n  )\n}\n\nexport default PersonCompaniesSection\n\nexport { sameIdSet }\n"],
+  "mappings": ";AAqDM,SAgVI,UArUA,KAXJ;AAnDN,YAAY,WAAW;AACvB,SAAS,WAAW,YAAY,aAAa;AAC7C,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,mBAA6C;AACtD,SAAS,6BAA6B;AACtC,SAAS,wBAA+C;AACxD,SAAS,gCAAgC;AAqBzC,MAAM,mBAAmB;AAEzB,SAAS,UAAU,MAAgB,OAA0B;AAC3D,MAAI,KAAK,WAAW,MAAM,OAAQ,QAAO;AACzC,QAAM,WAAW,IAAI,IAAI,KAAK;AAC9B,SAAO,KAAK,MAAM,CAAC,UAAU,SAAS,IAAI,KAAK,CAAC;AAClD;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,cAAc,EAAG,QAAO;AAC5B,SACE,qBAAC,SAAI,WAAU,kGACb;AAAA,yBAAC,UAAK;AAAA;AAAA,MACE;AAAA,MAAK;AAAA,MAAK;AAAA,OAClB;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,UACjD,UAAU,QAAQ;AAAA,UAElB;AAAA,gCAAC,aAAU,WAAU,mBAAkB;AAAA,YAAE;AAAA;AAAA;AAAA,MAE3C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,aAAa,KAAK,IAAI,YAAY,OAAO,CAAC,CAAC;AAAA,UAC1D,UAAU,QAAQ;AAAA,UACnB;AAAA;AAAA,YAEC,oBAAC,cAAW,WAAU,mBAAkB;AAAA;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,KACF;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,yBAAyB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAgC,CAAC,CAAC;AAClE,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAA8C,UAAU;AACtF,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM;AAAA,IAClD;AAAA,EACF;AACA,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAExD,QAAM,EAAE,MAAM,WAAW,IAAI,sBAAsB,UAAU;AAC7D,QAAM,EAAE,MAAM,cAAc,IAAI,sBAAsB,kBAAkB;AACxE,QAAM,EAAE,MAAM,gBAAgB,IAAI,sBAAsB,aAAa;AACrE,QAAM,EAAE,MAAM,mBAAmB,IAAI,sBAAsB,kBAAkB;AAC7E,QAAM,EAAE,MAAM,SAAS,IAAI,sBAAsB,sBAAsB;AAEvE,QAAM,UAAU,MAAM;AACpB,uBAAmB,sBAAsB;AAAA,EAC3C,GAAG,CAAC,sBAAsB,CAAC;AAE3B,QAAM,mBAAmB,MAAM;AAAA,IAC7B,OACE,WACA,oBACe;AACf,UAAI,CAAC,oBAAoB;AACvB,eAAO,UAAU;AAAA,MACnB;AACA,aAAO,mBAAmB,WAAW,eAAe;AAAA,IACtD;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,QAAM,WAAW,MAAM;AAAA,IACrB,OAAO,YAAwC;AAC7C,YAAM,cAAc,SAAS,eAAe;AAC5C,UAAI,YAAa,YAAW,IAAI;AAChC,UAAI;AACF,cAAM,SAAS,IAAI,gBAAgB;AAAA,UACjC,MAAM,OAAO,IAAI;AAAA,UACjB,UAAU,OAAO,gBAAgB;AAAA,UACjC;AAAA,QACF,CAAC;AACD,YAAI,OAAO,KAAK,EAAE,SAAS,GAAG;AAC5B,iBAAO,IAAI,UAAU,OAAO,KAAK,CAAC;AAAA,QACpC;AACA,cAAM,UAAU,MAAM;AAAA,UAIpB,yBAAyB,mBAAmB,QAAQ,CAAC,uBAAuB,OAAO,SAAS,CAAC;AAAA,UAC7F,EAAE,OAAO,WAAW;AAAA,QACtB;AACA,cAAM,YAAY,MAAM,QAAQ,SAAS,KAAK,IAAI,QAAQ,QAAQ,CAAC;AACnE,iBAAS,SAAS;AAClB,sBAAc,OAAO,SAAS,eAAe,WAAW,QAAQ,aAAa,CAAC;AAAA,MAChF,SAAS,OAAO;AACd,cAAM,UACJ,iBAAiB,QACb,MAAM,UACN,EAAE,+CAA+C,2BAA2B;AAClF,cAAM,SAAS,OAAO;AACtB,iBAAS,CAAC,CAAC;AACX,sBAAc,CAAC;AAAA,MACjB,UAAE;AACA,YAAI,YAAa,YAAW,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,QAAQ,MAAM,CAAC;AAAA,EAClC;AAEA,QAAM,UAAU,MAAM;AACpB,SAAK,SAAS;AAAA,EAChB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,MAAM;AACpB,YAAQ,CAAC;AAAA,EACX,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,YAAY,MAAM;AAAA,IACtB,MAAM,gBAAgB,IAAI,CAAC,UAAU,MAAM,EAAE;AAAA,IAC7C,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,kBAAkB,MAAM;AAAA,IAC5B,MACE,gBAAgB,KAAK,CAAC,UAAU,MAAM,SAAS,GAAG,MAClD,gBAAgB,CAAC,GAAG,MACpB;AAAA,IACF,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,qBAAqB,MAAM;AAAA,IAC/B,MACE,yBAAyB;AAAA,MACvB,aAAa,EAAE,yCAAyC,cAAc;AAAA,MACtE,gBAAgB,cACZ,EAAE,+CAA+C,wCAAwC;AAAA,QACvF,MAAM;AAAA,MACR,CAAC,IACD,EAAE,4CAA4C,yCAAyC;AAAA,MAC3F,cAAc,EAAE,0CAA0C,oBAAoB;AAAA,MAC9E,mBAAmB;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AAAA,MACA,iBAAiB;AAAA,QACf;AAAA,QACA;AAAA,MACF;AAAA,MACA,mBAAmB;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AAAA,MACA,oBAAoB,EAAE,2CAA2C,cAAc;AAAA,MAC/E,uBAAuB;AAAA,IACzB,CAAC;AAAA,IACH,CAAC,aAAa,UAAU,CAAC;AAAA,EAC3B;AAEA,QAAM,oBAAoB,MAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,MAMM;AACJ,YAAM,mBAAmB;AACzB,YAAM,gBAAgB,gBAAgB,SAClC,aAAa,gBAAgB,SAAS,SAAS,IAC7C,YACA,gBAAgB,CAAC,IACnB;AAEJ,UAAI;AACF,mBAAW,aAAa,YAAY;AAClC,gBAAM;AAAA,YACJ,MACE;AAAA,cACE,yBAAyB,mBAAmB,QAAQ,CAAC,cAAc,mBAAmB,SAAS,CAAC;AAAA,cAChG,EAAE,QAAQ,SAAS;AAAA,YACrB;AAAA,YACF,EAAE,WAAW,UAAU,WAAW,0BAA0B;AAAA,UAC9D;AAAA,QACF;AAEA,mBAAW,aAAa,UAAU;AAChC,gBAAM;AAAA,YACJ,MACE;AAAA,cACE,yBAAyB,mBAAmB,QAAQ,CAAC;AAAA,cACrD;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,gBAC9C,MAAM,KAAK,UAAU;AAAA,kBACnB;AAAA,kBACA,WAAW,kBAAkB;AAAA,gBAC/B,CAAC;AAAA,cACH;AAAA,YACF;AAAA,YACF,EAAE,WAAW,UAAU,WAAW,uBAAuB;AAAA,UAC3D;AAAA,QACF;AAEA,YACE,iBACA,kBAAkB,oBAClB,CAAC,SAAS,SAAS,aAAa,GAChC;AACA,gBAAM;AAAA,YACJ,MACE;AAAA,cACE,yBAAyB,mBAAmB,QAAQ,CAAC,cAAc,mBAAmB,aAAa,CAAC;AAAA,cACpG;AAAA,gBACE,QAAQ;AAAA,gBACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,gBAC9C,MAAM,KAAK,UAAU,EAAE,WAAW,KAAK,CAAC;AAAA,cAC1C;AAAA,YACF;AAAA,YACF,EAAE,WAAW,eAAe,UAAU,WAAW,8BAA8B;AAAA,UACjF;AAAA,QACF;AAEA,cAAM,sBAA8C,gBAAgB,IAAI,CAAC,OAAO;AAC9E,gBAAM,SAAS,YAAY,EAAE;AAC7B,gBAAM,cAAc,gBAAgB,KAAK,CAAC,UAAU,MAAM,OAAO,EAAE;AACnE,iBAAO;AAAA,YACL;AAAA,YACA,aAAa,QAAQ,SAAS,aAAa,eAAe;AAAA,YAC1D,WAAW,OAAO;AAAA,UACpB;AAAA,QACF,CAAC;AACD,2BAAmB,mBAAmB;AACtC,cAAM,SAAS,EAAE,aAAa,MAAM,CAAC;AACrC,cAAM,YAAY;AAClB;AAAA,UACE,EAAE,mDAAmD,2BAA2B;AAAA,UAChF;AAAA,QACF;AAAA,MACF,SAAS,OAAO;AACd,cAAM,UACJ,iBAAiB,QACb,MAAM,UACN;AAAA,UACE;AAAA,UACA;AAAA,QACF;AACN,cAAM,SAAS,OAAO;AACtB,cAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB,UAAU,WAAW,UAAU,kBAAkB,CAAC;AAAA,EACvF;AAEA,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,4HACb;AAAA,6BAAC,SAAI,WAAU,aACb;AAAA,8BAAC,SAAI,WAAU,yCACZ,YAAE,iDAAiD,yBAAyB,GAC/E;AAAA,UACA,oBAAC,SAAI,WAAU,iCACZ,YAAE,6CAA6C,8BAA8B;AAAA,YAC5E,OAAO,gBAAgB;AAAA,UACzB,CAAC,GACH;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA,cACjD,aAAa;AAAA,gBACX;AAAA,gBACA;AAAA,cACF;AAAA,cACA,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM,cAAc,IAAI;AAAA,cAEjC;AAAA,oCAAC,SAAM,WAAU,eAAc;AAAA,gBAC9B,EAAE,kDAAkD,cAAc;AAAA;AAAA;AAAA,UACrE;AAAA,WACF;AAAA,SACF;AAAA,MAEA,oBAAC,SAAI,WAAU,iCACb;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,UACT,QAAQ,MAAM,OAAO,KAA4C;AAAA,UAEnE,WAAU;AAAA,UAEV;AAAA,gCAAC,YAAO,OAAM,YACX,YAAE,iDAAiD,gBAAgB,GACtE;AAAA,YACA,oBAAC,YAAO,OAAM,aACX,YAAE,kDAAkD,gBAAgB,GACvE;AAAA,YACA,oBAAC,YAAO,OAAM,UACX,YAAE,gDAAgD,uBAAuB,GAC5E;AAAA;AAAA;AAAA,MACF,GACF;AAAA,MAEC,UACC,oBAAC,SAAI,WAAU,aACZ,WAAC,GAAG,CAAC,EAAE,IAAI,CAAC,QACX;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA;AAAA,QADL;AAAA,MAEP,CACD,GACH,IACE,MAAM,WAAW,IACnB,oBAAC,SAAI,WAAU,0GACZ,iBAAO,KAAK,EAAE,SACX;AAAA,QACE;AAAA,QACA;AAAA,MACF,IACA;AAAA,QACE;AAAA,QACA;AAAA,MACF,GACN,IAEA,iCACE;AAAA,4BAAC,SAAI,WAAU,aACZ,gBAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM;AAAA,YACN,YAAY;AAAA,YACZ,WAAW,YAAY;AAAA,YACvB,cAAc,eAAe;AAAA,YAC7B,gBAAgB,iBAAiB;AAAA,YACjC,mBAAmB,oBAAoB;AAAA,YACvC,SAAS,UAAU;AAAA;AAAA,UAPd,KAAK;AAAA,QAQZ,CACD,GACH;AAAA,QACA,oBAAC,cAAW,MAAY,YAAwB,cAAc,SAAS;AAAA,SACzE;AAAA,OAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc;AAAA,QACd,SAAS;AAAA,QACT,oBAAoB;AAAA,QACpB,kBAAkB;AAAA,QAClB,kBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,oBAAoB;AAAA;AAAA,IACtB;AAAA,KACF;AAEJ;AAEA,IAAO,iCAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,220 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { Phone, Mail, Building2, Trash2, Pencil } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { useQueryClient } from "@tanstack/react-query";
+import { PersonTagsDialog } from "./PersonTagsDialog.js";
+import { useCustomerDictionary, invalidateCustomerDictionary } from "./hooks/useCustomerDictionary.js";
+import { renderDictionaryIcon } from "../../../dictionaries/components/dictionaryAppearance.js";
+import { getInitials, formatFallbackLabel } from "./utils.js";
+function DictionaryBadge({ value, map, categoryIcon, className }) {
+  const entry = map?.[value];
+  const color = entry?.color ?? null;
+  const icon = entry?.icon ?? null;
+  const label = entry?.label ?? formatFallbackLabel(value);
+  const colorStyle = color ? { color, borderColor: color, backgroundColor: `${color}1A` } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: "outline",
+      className: cn(
+        "rounded-sm gap-1.5 text-xs font-medium",
+        className
+      ),
+      style: colorStyle,
+      children: [
+        icon ? renderDictionaryIcon(icon, "size-2.5") : categoryIcon ?? null,
+        label
+      ]
+    }
+  );
+}
+function TagBadge({ tag }) {
+  const colorStyle = tag.color ? { color: tag.color, borderColor: tag.color, backgroundColor: `${tag.color}1A` } : void 0;
+  return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "rounded-sm gap-1.5 text-xs font-medium", style: colorStyle, children: tag.label });
+}
+function PersonDetailHeader({
+  data,
+  onTagsChange,
+  tagsSectionControllerRef,
+  onSave,
+  onDelete,
+  isDirty,
+  isSaving,
+  onFocusField,
+  onOpenCompaniesTab,
+  onDataReload
+}) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const [manageTagsOpen, setManageTagsOpen] = React.useState(false);
+  const person = data.person;
+  const profile = data.profile;
+  const displayName = person.displayName || t("customers.people.detail.untitled", "Untitled");
+  const jobTitle = profile?.jobTitle ?? null;
+  const linkedCompanies = React.useMemo(() => {
+    const items = Array.isArray(data.companies) && data.companies.length > 0 ? data.companies : data.company ? [{ ...data.company, isPrimary: Boolean(data.isPrimary) }] : [];
+    return items;
+  }, [data.companies, data.company, data.isPrimary]);
+  const visibleCompanies = React.useMemo(() => linkedCompanies.slice(0, 3), [linkedCompanies]);
+  const hiddenCompaniesCount = Math.max(0, linkedCompanies.length - visibleCompanies.length);
+  const visibleTags = React.useMemo(() => data.tags.slice(0, 6), [data.tags]);
+  const hiddenTagsCount = Math.max(0, data.tags.length - visibleTags.length);
+  const primaryCompany = linkedCompanies.find((entry) => entry.isPrimary) ?? linkedCompanies[0] ?? null;
+  const companyName = primaryCompany?.displayName ?? null;
+  const companyId = primaryCompany?.id ?? profile?.companyEntityId ?? null;
+  const personOrgId = person.organizationId ?? null;
+  const { data: statusDict } = useCustomerDictionary("statuses", 0, personOrgId);
+  const { data: lifecycleDict } = useCustomerDictionary("lifecycle-stages", 0, personOrgId);
+  const { data: sourceDict } = useCustomerDictionary("sources", 0, personOrgId);
+  const { data: temperatureDict } = useCustomerDictionary("temperature", 0, personOrgId);
+  const { data: renewalQuarterDict } = useCustomerDictionary("renewal-quarters", 0, personOrgId);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card px-6 py-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-18 shrink-0 items-center justify-center rounded-full bg-muted text-xl font-bold text-muted-foreground", children: getInitials(displayName) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h1", { className: "truncate text-2xl font-bold text-foreground", children: displayName }),
+          data.isPrimary && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-sm bg-status-warning-bg px-1.5 py-0.5 text-overline font-bold text-status-warning-text", children: t("customers.people.detail.header.primary", "PRIMARY") })
+        ] }),
+        (jobTitle || companyName) && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-sm text-muted-foreground", children: [
+          jobTitle,
+          jobTitle && companyName && ` ${t("customers.people.detail.header.at", "at")} `,
+          companyName && companyId && /* @__PURE__ */ jsx(Link, { href: `/backend/customers/companies-v2/${companyId}`, className: "text-primary hover:underline", children: companyName }),
+          companyName && !companyId && companyName
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-muted-foreground", children: [
+          person.primaryPhone && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Phone, { className: "size-3.5" }),
+            /* @__PURE__ */ jsx("a", { href: `tel:${person.primaryPhone}`, className: "hover:text-foreground", children: person.primaryPhone })
+          ] }),
+          person.primaryEmail && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Mail, { className: "size-3.5" }),
+            /* @__PURE__ */ jsx("a", { href: `mailto:${person.primaryEmail}`, className: "hover:text-foreground", children: person.primaryEmail })
+          ] })
+        ] }),
+        linkedCompanies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Building2, { className: "mr-1 inline size-3.5" }),
+            t("customers.people.detail.header.companies", "Companies"),
+            " (",
+            linkedCompanies.length,
+            "):"
+          ] }),
+          visibleCompanies.map((company) => /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: `/backend/customers/companies-v2/${company.id}`,
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 text-xs font-semibold transition-colors hover:bg-status-info-bg",
+                company.isPrimary ? "border-status-info-border bg-status-info-bg text-status-info-text" : "border-border bg-background text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Building2, { className: "size-3" }),
+                company.displayName,
+                company.isPrimary ? /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-status-info-icon px-1 py-px text-overline font-bold text-white", children: t("customers.people.detail.header.primary", "PRIMARY") }) : null
+              ]
+            },
+            company.id
+          )),
+          hiddenCompaniesCount > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "rounded-sm text-xs font-semibold", children: [
+            "+",
+            hiddenCompaniesCount,
+            " ",
+            t("customers.people.detail.header.more", "more")
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: [
+          person.status && /* @__PURE__ */ jsx(DictionaryBadge, { value: person.status, map: statusDict?.map }),
+          person.lifecycleStage && /* @__PURE__ */ jsx(DictionaryBadge, { value: person.lifecycleStage, map: lifecycleDict?.map }),
+          person.source && /* @__PURE__ */ jsx(DictionaryBadge, { value: person.source, map: sourceDict?.map }),
+          person.temperature && /* @__PURE__ */ jsx(DictionaryBadge, { value: person.temperature, map: temperatureDict?.map }),
+          person.renewalQuarter && /* @__PURE__ */ jsx(DictionaryBadge, { value: person.renewalQuarter, map: renewalQuarterDict?.map }),
+          visibleTags.map((tag) => /* @__PURE__ */ jsx(TagBadge, { tag }, tag.id ?? tag.label)),
+          hiddenTagsCount > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "rounded-sm gap-1.5 text-xs font-medium", children: [
+            "+",
+            hiddenTagsCount,
+            " ",
+            t("customers.people.detail.header.more", "more")
+          ] }) : null,
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "h-auto rounded-sm px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+              onClick: () => setManageTagsOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Pencil, { className: "mr-1 size-3" }),
+                t("customers.people.detail.actions.manageTags", "Edit tags")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full shrink-0 items-center justify-start gap-2 sm:w-auto sm:justify-end", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "outline",
+            size: "sm",
+            type: "button",
+            "aria-label": t("customers.people.detail.actions.delete", "Delete"),
+            onClick: () => {
+              void onDelete();
+            },
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: onSave,
+            disabled: !isDirty || isSaving,
+            children: t("customers.people.detail.actions.save", "Save")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PersonTagsDialog,
+      {
+        open: manageTagsOpen,
+        onClose: () => setManageTagsOpen(false),
+        personId: person.id,
+        personOrganizationId: person.organizationId ?? null,
+        personData: {
+          status: person.status,
+          lifecycleStage: person.lifecycleStage,
+          source: person.source,
+          temperature: person.temperature,
+          renewalQuarter: person.renewalQuarter,
+          jobTitle: data.profile?.jobTitle ?? null,
+          customFields: data.customFields,
+          tags: data.tags
+        },
+        onSaved: () => {
+          void invalidateCustomerDictionary(queryClient, "statuses");
+          void invalidateCustomerDictionary(queryClient, "lifecycle-stages");
+          void invalidateCustomerDictionary(queryClient, "sources");
+          void invalidateCustomerDictionary(queryClient, "temperature");
+          void invalidateCustomerDictionary(queryClient, "renewal-quarters");
+          onDataReload?.();
+        }
+      }
+    )
+  ] });
+}
+export {
+  PersonDetailHeader
+};
+//# sourceMappingURL=PersonDetailHeader.js.map