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

package/src/modules/customers/components/detail/PersonCard.tsx

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

package/src/modules/customers/components/detail/PersonCompaniesSection.tsx

@@ -0,0 +1,426 @@
+'use client'
+
+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, type EnrichedCompanyData } from './CompanyCard'
+import { useCustomerDictionary } from './hooks/useCustomerDictionary'
+import { LinkEntityDialog, type LinkEntityOption } from '../linking/LinkEntityDialog'
+import { createCompanyLinkAdapter } from '../linking/adapters/companyAdapter'
+
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
+type LinkedCompanySummary = {
+  id: string
+  displayName: string
+  isPrimary: boolean
+}
+
+type PersonCompaniesSectionProps = {
+  personId: string
+  personName: string
+  initialLinkedCompanies?: LinkedCompanySummary[]
+  onChanged?: () => Promise<void> | void
+  runGuardedMutation?: GuardedMutationRunner
+}
+
+const LINKED_PAGE_SIZE = 20
+
+function sameIdSet(left: string[], right: string[]): boolean {
+  if (left.length !== right.length) return false
+  const rightSet = new Set(right)
+  return left.every((value) => rightSet.has(value))
+}
+
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+}: {
+  page: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}) {
+  if (totalPages <= 1) return null
+  return (
+    <div className="flex items-center justify-between border-t border-border/60 pt-3 text-sm text-muted-foreground">
+      <span>
+        Page {page} of {totalPages}
+      </span>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(Math.max(1, page - 1))}
+          disabled={page <= 1}
+        >
+          <ArrowLeft className="mr-1.5 size-3.5" />
+          Previous
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+          disabled={page >= totalPages}
+        >
+          Next
+          <ArrowRight className="ml-1.5 size-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function PersonCompaniesSection({
+  personId,
+  personName: _personName,
+  initialLinkedCompanies = [],
+  onChanged,
+  runGuardedMutation,
+}: PersonCompaniesSectionProps) {
+  const t = useT()
+  const [items, setItems] = React.useState<EnrichedCompanyData[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [search, setSearch] = React.useState('')
+  const [sort, setSort] = React.useState<'name-asc' | 'name-desc' | 'recent'>('name-asc')
+  const [page, setPage] = React.useState(1)
+  const [totalPages, setTotalPages] = React.useState(1)
+  const [linkedCompanies, setLinkedCompanies] = React.useState<LinkedCompanySummary[]>(
+    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 <T,>(
+      operation: () => Promise<T>,
+      mutationPayload?: Record<string, unknown>,
+    ): Promise<T> => {
+      if (!runGuardedMutation) {
+        return operation()
+      }
+      return runGuardedMutation(operation, mutationPayload)
+    },
+    [runGuardedMutation],
+  )
+
+  const loadData = React.useCallback(
+    async (options?: { showLoading?: boolean }) => {
+      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<{
+          items?: EnrichedCompanyData[]
+          totalPages?: number
+        }>(
+          `/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…',
+        ),
+        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,
+    }: {
+      addedIds: string[]
+      removedIds: string[]
+      nextSelectedIds: string[]
+      primaryId?: string | null
+      optionsById: Record<string, LinkEntityOption>
+    }) => {
+      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: LinkedCompanySummary[] = 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 (
+    <>
+      <div className="space-y-4">
+        <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">
+          <div className="space-y-1">
+            <div className="text-sm font-semibold text-foreground">
+              {t('customers.people.detail.companies.manageTitle', 'Manage linked companies')}
+            </div>
+            <div className="text-sm text-muted-foreground">
+              {t('customers.people.detail.companies.summary', '{{count}} linked companies', {
+                count: linkedCompanies.length,
+              })}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={t(
+                'customers.people.detail.companies.searchPlaceholder',
+                'Search linked companies…',
+              )}
+              className="sm:w-[260px]"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setDialogOpen(true)}
+            >
+              <Link2 className="mr-2 size-4" />
+              {t('customers.people.detail.companies.manageAction', 'Manage links')}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end">
+          <select
+            value={sort}
+            onChange={(event) =>
+              setSort(event.target.value as 'name-asc' | 'name-desc' | 'recent')
+            }
+            className="h-10 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            <option value="name-asc">
+              {t('customers.people.detail.companies.sortNameAsc', 'Sort: Name A-Z')}
+            </option>
+            <option value="name-desc">
+              {t('customers.people.detail.companies.sortNameDesc', 'Sort: Name Z-A')}
+            </option>
+            <option value="recent">
+              {t('customers.people.detail.companies.sortRecent', 'Sort: Recently active')}
+            </option>
+          </select>
+        </div>
+
+        {loading ? (
+          <div className="space-y-4">
+            {[1, 2].map((idx) => (
+              <div
+                key={idx}
+                className="h-[320px] animate-pulse rounded-2xl border border-border/60 bg-muted/30"
+              />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <div className="rounded-2xl border border-dashed border-border/60 px-6 py-12 text-center text-sm text-muted-foreground">
+            {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.',
+                )}
+          </div>
+        ) : (
+          <>
+            <div className="space-y-4">
+              {items.map((item) => (
+                <CompanyCard
+                  key={item.companyId}
+                  data={item}
+                  personName={_personName}
+                  statusMap={statusDict?.map}
+                  lifecycleMap={lifecycleDict?.map}
+                  temperatureMap={temperatureDict?.map}
+                  renewalQuarterMap={renewalQuarterDict?.map}
+                  roleMap={roleDict?.map}
+                />
+              ))}
+            </div>
+            <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
+          </>
+        )}
+      </div>
+
+      <LinkEntityDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        adapter={companyLinkAdapter}
+        initialSelectedIds={linkedIds}
+        initialPrimaryId={linkedPrimaryId}
+        primarySupported
+        onConfirm={handleLinkConfirm}
+        runGuardedMutation={runWriteMutation}
+      />
+    </>
+  )
+}
+
+export default PersonCompaniesSection
+
+export { sameIdSet }