@open-mercato/core 0.5.1-develop.2912.8d7b1fef24 → 0.5.1-develop.2924.d13908516e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.5.1-develop.2912.8d7b1fef24",
+  "version": "0.5.1-develop.2924.d13908516e",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -237,10 +237,10 @@
     "ts-pattern": "^5.0.0"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2912.8d7b1fef24"
+    "@open-mercato/shared": "0.5.1-develop.2924.d13908516e"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2912.8d7b1fef24",
+    "@open-mercato/shared": "0.5.1-develop.2924.d13908516e",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/modules/customers/api/companies/[id]/people/route.ts

@@ -13,7 +13,10 @@ import {
   CustomerPersonCompanyLink,
   CustomerPersonProfile,
 } from '../../../../data/entities'
-import { withActiveCustomerPersonCompanyLinkFilter } from '../../../../lib/personCompanyLinkTable'
+import {
+  filterActivePersonCompanyLinks,
+  withActiveCustomerPersonCompanyLinkFilter,
+} from '../../../../lib/personCompanyLinkTable'
 
 const paramsSchema = z.object({
   id: z.string().uuid(),
@@ -129,12 +132,14 @@ export async function GET(req: Request, ctx: { params?: { id?: string } }) {
       },
       'customers.companies.people.GET',
     )
-    const links = await findWithDecryption(
-      em,
-      CustomerPersonCompanyLink,
-      linkWhere,
-      { populate: ['person'] },
-      entityScope,
+    const links = filterActivePersonCompanyLinks(
+      await findWithDecryption(
+        em,
+        CustomerPersonCompanyLink,
+        linkWhere,
+        { populate: ['person'] },
+        entityScope,
+      ),
     )
 
     const personIds = links

package/src/modules/customers/backend/customers/companies-v2/[id]/page.tsx

@@ -255,7 +255,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
 
   // Section action (for tabs that expose add/create buttons)
   const handleSectionActionChange = React.useCallback((action: SectionAction | null) => {
-    setSectionAction(action)
+    setSectionAction((prev) => (action !== null ? action : prev))
   }, [])
 
   const handleSectionAction = React.useCallback(() => {
@@ -420,6 +420,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                 peopleCount={data.counts?.people ?? 0}
                 dealsCount={dealCount}
                 activitiesCount={data.counts?.activities ?? 0}
+                sectionAction={sectionAction}
               >
                 {activeTab === 'people' && (
                   <CompanyPeopleSection

package/src/modules/customers/backend/customers/people-v2/[id]/page.tsx

@@ -59,7 +59,6 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
 
   const formSchema = React.useMemo(() => createPersonEditSchema(), [])
   const fields = React.useMemo(() => createPersonEditFields(t), [t])
-  const groups = React.useMemo(() => createPersonPersonalDataGroups(t), [t])
 
   const [data, setData] = React.useState<PersonOverview | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
@@ -101,6 +100,16 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
       ? data.person.displayName
       : t('customers.people.list.deleteFallbackName', 'this person')
 
+  const personDisplayNameForGroups =
+    typeof data?.person?.displayName === 'string' && data.person.displayName.trim().length
+      ? data.person.displayName.trim()
+      : null
+
+  const groups = React.useMemo(
+    () => createPersonPersonalDataGroups(t, { entityName: personDisplayNameForGroups }),
+    [t, personDisplayNameForGroups],
+  )
+
   const zoneSections = React.useMemo<ZoneSectionDescriptor[]>(() => [
     { id: 'personalData', icon: User, label: t('customers.people.form.groups.personalData', 'Personal data') },
     { id: 'companyRole', icon: Building2, label: t('customers.people.form.groups.companyRole', 'Company & role') },
@@ -249,7 +258,7 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
 
   // Section action (for tabs that expose add/create buttons)
   const handleSectionActionChange = React.useCallback((action: SectionAction | null) => {
-    setSectionAction(action)
+    setSectionAction((prev) => (action !== null ? action : prev))
   }, [])
 
   React.useEffect(() => {
@@ -424,6 +433,7 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                 dealsCount={dealCount}
                 companiesCount={companyCount}
                 tasksCount={todoCount}
+                sectionAction={sectionAction}
               >
                 <div className="min-w-0">
                 {(() => {

package/src/modules/customers/commands/companies.ts

@@ -22,6 +22,7 @@ import {
   CustomerInteraction,
   CustomerTodoLink,
   CustomerEntity,
+  CustomerPersonCompanyLink,
   CustomerPersonProfile,
   CustomerTagAssignment,
 } from '../data/entities'
@@ -49,7 +50,7 @@ import {
 } from '@open-mercato/shared/lib/commands/customFieldSnapshots'
 import type { CrudIndexerConfig, CrudEventsConfig } from '@open-mercato/shared/lib/crud/types'
 import { E } from '#generated/entities.ids.generated'
-import { findWithDecryption } from '@open-mercato/shared/lib/encryption/find'
+import { findOneWithDecryption, findWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { CUSTOMER_ENTITY_ID } from '../lib/customFieldRouting'
 import { CustomFieldValue } from '@open-mercato/core/modules/entities/data/entities'
 
@@ -72,6 +73,41 @@ const companyCrudEvents: CrudEventsConfig<CustomerEntity> = {
   }),
 }
 
+type CompanyDeleteBlockerCounts = {
+  personLinks: number
+  dealLinks: number
+  directPeople: number
+}
+
+function buildCompanyHasDependentsError(
+  translate: (key: string, fallback?: string, params?: Record<string, string | number>) => string,
+  counts: CompanyDeleteBlockerCounts,
+): CrudHttpError {
+  const blockers: string[] = []
+  if (counts.personLinks > 0) {
+    blockers.push(
+      translate('customers.companies.delete.blockers.persons', 'linked persons ({{count}})', { count: counts.personLinks }),
+    )
+  }
+  if (counts.dealLinks > 0) {
+    blockers.push(
+      translate('customers.companies.delete.blockers.deals', 'linked deals ({{count}})', { count: counts.dealLinks }),
+    )
+  }
+  if (counts.directPeople > 0) {
+    blockers.push(
+      translate('customers.companies.delete.blockers.directPeople', 'persons whose primary company is this one ({{count}})', { count: counts.directPeople }),
+    )
+  }
+  const summary = blockers.join(', ')
+  const message = translate(
+    'customers.companies.delete.blocked',
+    'Cannot delete company: {{blockers}}. Please unlink or reassign first.',
+    { blockers: summary },
+  )
+  return new CrudHttpError(422, { error: message, code: 'COMPANY_HAS_DEPENDENTS' })
+}
+
 function companyEntityIndexEntry(entity: CustomerEntity): QueryIndexEventEntry {
   return {
     entityType: E.customers.customer_entity,
@@ -781,28 +817,80 @@ const deleteCompanyCommand: CommandHandler<{ body?: Record<string, unknown>; que
     },
     async execute(input, ctx) {
       const id = requireId(input, 'Company id required')
-      const em = (ctx.container.resolve('em') as EntityManager).fork()
-      const snapshot = await loadCompanySnapshot(em, id)
-      const entity = await em.findOne(CustomerEntity, { id, deletedAt: null })
+      const baseEm = (ctx.container.resolve('em') as EntityManager).fork()
+      const snapshot = await loadCompanySnapshot(baseEm, id)
+      const entity = await baseEm.findOne(CustomerEntity, { id, deletedAt: null })
       const record = assertFound(entity, 'Company not found')
       ensureTenantScope(ctx, record.tenantId)
       ensureOrganizationScope(ctx, record.organizationId)
-      const profile = await em.findOne(CustomerCompanyProfile, { entity: record })
-      await em.nativeUpdate(CustomerPersonProfile, { company: record }, { company: null })
-      await em.nativeDelete(CustomerDealCompanyLink, { company: record })
-      await em.nativeDelete(CustomerActivity, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerInteraction, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerTodoLink, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerCompanyProfile, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerAddress, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerComment, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      await em.nativeDelete(CustomerTagAssignment, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
-      if (profile) {
-        await em.nativeDelete(CustomFieldValue, { entityId: COMPANY_ENTITY_ID, recordId: profile.id })
+
+      const dependentScope = {
+        organizationId: record.organizationId,
+        tenantId: record.tenantId,
       }
-      await em.nativeDelete(CustomFieldValue, { entityId: CUSTOMER_ENTITY_ID, recordId: record.id })
-      em.remove(record)
-      await em.flush()
+      const personLinks = await baseEm.count(CustomerPersonCompanyLink, {
+        company: record,
+        deletedAt: null,
+        ...dependentScope,
+      })
+      const dealLinks = await baseEm.count(CustomerDealCompanyLink, {
+        company: record,
+      })
+      const directPeople = await baseEm.count(CustomerPersonProfile, {
+        company: record,
+        ...dependentScope,
+      })
+      if (personLinks > 0 || dealLinks > 0 || directPeople > 0) {
+        const { translate } = await resolveTranslations()
+        throw buildCompanyHasDependentsError(translate, { personLinks, dealLinks, directPeople })
+      }
+
+      const profile = await baseEm.findOne(CustomerCompanyProfile, { entity: record })
+
+      await baseEm.transactional(async (em) => {
+        const recheckPersonLinks = await em.count(CustomerPersonCompanyLink, {
+          company: record,
+          deletedAt: null,
+          ...dependentScope,
+        })
+        const recheckDealLinks = await em.count(CustomerDealCompanyLink, {
+          company: record,
+        })
+        const recheckDirectPeople = await em.count(CustomerPersonProfile, {
+          company: record,
+          ...dependentScope,
+        })
+        if (recheckPersonLinks > 0 || recheckDealLinks > 0 || recheckDirectPeople > 0) {
+          const { translate } = await resolveTranslations()
+          throw buildCompanyHasDependentsError(translate, {
+            personLinks: recheckPersonLinks,
+            dealLinks: recheckDealLinks,
+            directPeople: recheckDirectPeople,
+          })
+        }
+
+        await em.nativeUpdate(CustomerPersonProfile, { company: record }, { company: null })
+        await em.nativeDelete(CustomerDealCompanyLink, { company: record })
+        await em.nativeDelete(CustomerActivity, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerInteraction, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerTodoLink, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerCompanyProfile, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerAddress, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerComment, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        await em.nativeDelete(CustomerTagAssignment, { entity: record, organizationId: record.organizationId, tenantId: record.tenantId })
+        if (profile) {
+          await em.nativeDelete(CustomFieldValue, { entityId: COMPANY_ENTITY_ID, recordId: profile.id })
+        }
+        await em.nativeDelete(CustomFieldValue, { entityId: CUSTOMER_ENTITY_ID, recordId: record.id })
+        const txEntity = await findOneWithDecryption(
+          em,
+          CustomerEntity,
+          { id: record.id },
+          undefined,
+          { tenantId: record.tenantId, organizationId: record.organizationId },
+        )
+        if (txEntity) em.remove(txEntity)
+      })
 
       const indexDeletes: QueryIndexEventEntry[] = []
       const memberUpserts: QueryIndexEventEntry[] = []

package/src/modules/customers/commands/people.ts

@@ -54,6 +54,7 @@ import {
 import type { CrudIndexerConfig, CrudEventsConfig } from '@open-mercato/shared/lib/crud/types'
 import { E } from '#generated/entities.ids.generated'
 import { findWithDecryption, findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
+import { deriveDisplayName, isDerivedDisplayName } from '../lib/displayName'
 import {
   loadPersonCompanyLinks,
   summarizePersonCompanies,
@@ -523,7 +524,10 @@ const createPersonCommand: CommandHandler<PersonCreateInput, { entityId: string;
     const timezone = normalizeOptionalString(parsed.timezone)
     const linkedInUrl = normalizeOptionalString(parsed.linkedInUrl)
     const twitterUrl = normalizeOptionalString(parsed.twitterUrl)
-    const displayName = parsed.displayName?.trim() ?? ''
+    const displayNameInput = parsed.displayName?.trim() ?? ''
+    const displayName = displayNameInput.length > 0
+      ? displayNameInput
+      : deriveDisplayName(firstName, lastName)
     const nextInteractionName = parsed.nextInteraction?.name ? parsed.nextInteraction.name.trim() : null
     const nextInteractionRefId = normalizeOptionalString(parsed.nextInteraction?.refId)
     const nextInteractionIcon = normalizeOptionalString(parsed.nextInteraction?.icon)
@@ -715,6 +719,17 @@ const updatePersonCommand: CommandHandler<PersonUpdateInput, { entityId: string
       }
     }
 
+    if (
+      parsed.displayName === undefined
+      && (parsed.firstName !== undefined || parsed.lastName !== undefined)
+      && isDerivedDisplayName(record.displayName, profile.firstName, profile.lastName)
+    ) {
+      const nextFirst = parsed.firstName !== undefined ? parsed.firstName : profile.firstName
+      const nextLast = parsed.lastName !== undefined ? parsed.lastName : profile.lastName
+      const derived = deriveDisplayName(nextFirst, nextLast)
+      if (derived.length > 0) parsed.displayName = derived
+    }
+
     await withAtomicFlush(em, [
       () => {
         if (parsed.description !== undefined) record.description = normalizeOptionalString(parsed.description)

package/src/modules/customers/commands/personCompanyLinks.ts

@@ -535,14 +535,15 @@ const deletePersonCompanyLinkCommand: CommandHandler<PersonCompanyLinkDeleteInpu
     const profile = await requirePersonProfile(em, person)
     const linkWasPrimary = link.isPrimary
 
+    const existingLinks = await loadPersonCompanyLinks(em, person)
+    const remainingLinks = existingLinks.filter((entry) => entry.id !== link.id)
+
     await withAtomicFlush(em, [
       () => {
         link.isPrimary = false
         link.deletedAt = new Date()
       },
       async () => {
-        const existingLinks = await loadPersonCompanyLinks(em, person)
-        const remainingLinks = existingLinks.filter((entry) => entry.id !== link.id)
         if (linkWasPrimary) {
           await promoteFallbackPrimaryLink(em, person, profile, remainingLinks, companyId)
         } else if (profile.company && typeof profile.company !== 'string' && profile.company.id === companyId) {

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

@@ -10,6 +10,7 @@ import {
   ExternalLink,
   FileText,
   Hash,
+  Link2Off,
   MapPin,
   TrendingUp,
   Zap,
@@ -17,6 +18,7 @@ import {
   Users,
 } from 'lucide-react'
 import { Badge } from '@open-mercato/ui/primitives/badge'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -67,6 +69,9 @@ type CompanyCardProps = {
   temperatureMap?: CustomerDictionaryMap | undefined
   renewalQuarterMap?: CustomerDictionaryMap | undefined
   roleMap?: CustomerDictionaryMap | undefined
+  onUnlink?: () => void | Promise<void>
+  unlinkLabel?: string
+  unlinkDisabled?: boolean
 }
 
 function copyToClipboard(text: string, t: ReturnType<typeof useT>) {
@@ -208,8 +213,12 @@ export function CompanyCard({
   temperatureMap,
   renewalQuarterMap,
   roleMap,
+  onUnlink,
+  unlinkLabel,
+  unlinkDisabled,
 }: CompanyCardProps) {
   const t = useT()
+  const resolvedUnlinkLabel = unlinkLabel ?? t('customers.people.detail.companies.unlinkAction', 'Unlink')
 
   const hasBillingSection =
     data.profile?.legalName ||
@@ -236,9 +245,12 @@ export function CompanyCard({
             <div className="flex flex-wrap items-center gap-2">
               <span className="break-words text-base font-bold">{data.displayName}</span>
               {data.isPrimary && (
-                <Badge variant="default" className="rounded-sm px-1.5 py-0 text-overline font-bold uppercase tracking-wider">
-                  PRIMARY
-                </Badge>
+                <StatusBadge
+                  variant="info"
+                  className="rounded-sm px-1.5 py-0 text-overline font-bold uppercase tracking-wider"
+                >
+                  {t('customers.people.detail.companies.primaryBadge', 'Primary')}
+                </StatusBadge>
               )}
             </div>
             {data.subtitle && (
@@ -246,7 +258,19 @@ export function CompanyCard({
             )}
           </div>
         </div>
-        <div className="self-start sm:self-auto">
+        <div className="flex items-center gap-1 self-start sm:self-auto">
+          {onUnlink ? (
+            <IconButton
+              variant="ghost"
+              size="sm"
+              type="button"
+              aria-label={resolvedUnlinkLabel}
+              disabled={unlinkDisabled}
+              onClick={() => { void onUnlink() }}
+            >
+              <Link2Off className="size-4" />
+            </IconButton>
+          ) : null}
           <Link href={`/backend/customers/companies-v2/${data.companyId}`}>
             <IconButton variant="ghost" size="sm" type="button">
               <ExternalLink className="size-4" />

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

@@ -11,7 +11,9 @@ import {
   Clock,
   History,
   Paperclip,
+  Plus,
 } from 'lucide-react'
+import type { SectionAction } from '@open-mercato/ui/backend/detail'
 
 export type CompanyTabId =
   | 'people'
@@ -36,6 +38,7 @@ type CompanyDetailTabsProps = {
   dealsCount?: number
   activitiesCount?: number
   filesCount?: number
+  sectionAction?: SectionAction | null
   children: React.ReactNode
 }
 
@@ -80,6 +83,7 @@ export function CompanyDetailTabs({
   dealsCount = 0,
   activitiesCount = 0,
   filesCount = 0,
+  sectionAction = null,
   children,
 }: CompanyDetailTabsProps) {
   const t = useT()
@@ -134,8 +138,8 @@ export function CompanyDetailTabs({
   return (
     <div>
       {/* Tab navigation */}
-      <div className="border-b" role="tablist" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>
-        <nav className="-mb-px flex gap-1 overflow-x-auto px-1">
+      <div className="flex items-end justify-between gap-2 border-b" role="tablist" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>
+        <nav className="-mb-px flex flex-1 gap-1 overflow-x-auto px-1">
           {allTabs.map((tab) => {
             const isActive = activeTab === tab.id
             return (
@@ -161,6 +165,18 @@ export function CompanyDetailTabs({
             )
           })}
         </nav>
+        {sectionAction ? (
+          <Button
+            type="button"
+            size="sm"
+            onClick={sectionAction.onClick}
+            disabled={sectionAction.disabled}
+            className="mb-1.5 mr-1 shrink-0"
+          >
+            <Plus className="mr-1.5 h-4 w-4" />
+            {sectionAction.label}
+          </Button>
+        ) : null}
       </div>
 
       {/* Tab content */}

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

@@ -13,6 +13,7 @@ import {
 } from '@open-mercato/shared/lib/browser/safeLocalStorage'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
 import type { SectionAction, TabEmptyStateConfig, Translator } from './types'
 import { CreatePersonDialog } from './CreatePersonDialog'
 import { PersonCard } from './PersonCard'
@@ -319,6 +320,13 @@ export function CompanyPeopleSection({
     void loadVisiblePeople()
   }, [loadVisiblePeople])
 
+  useAppEvent('customers.person_company_link.deleted', (event) => {
+    const payload = event.payload as { companyEntityId?: string | null } | null | undefined
+    if (payload && payload.companyEntityId === companyId) {
+      void loadVisiblePeople()
+    }
+  }, [companyId, loadVisiblePeople])
+
   React.useEffect(() => {
     setListPage(1)
   }, [searchQuery, sortMode])
@@ -520,9 +528,6 @@ export function CompanyPeopleSection({
             companyId,
           },
         )
-        applyPeopleChange((current) => current.filter((entry) => entry.id !== personId))
-        setVisiblePeople((current) => current.filter((entry) => entry.id !== personId))
-        setListTotalCount((current) => Math.max(0, current - 1))
         await loadVisiblePeople()
         flash(
           translate(
@@ -546,7 +551,6 @@ export function CompanyPeopleSection({
       }
     },
     [
-      applyPeopleChange,
       companyId,
       loadVisiblePeople,
       onLoadingChange,

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

@@ -7,6 +7,8 @@ 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 { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
 import { CompanyCard, type EnrichedCompanyData } from './CompanyCard'
 import { useCustomerDictionary } from './hooks/useCustomerDictionary'
 import { LinkEntityDialog, type LinkEntityOption } from '../linking/LinkEntityDialog'
@@ -88,8 +90,10 @@ export function PersonCompaniesSection({
   runGuardedMutation,
 }: PersonCompaniesSectionProps) {
   const t = useT()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const [items, setItems] = React.useState<EnrichedCompanyData[]>([])
   const [loading, setLoading] = React.useState(true)
+  const [unlinkingId, setUnlinkingId] = React.useState<string | null>(null)
   const [search, setSearch] = React.useState('')
   const [sort, setSort] = React.useState<'name-asc' | 'name-desc' | 'recent'>('name-asc')
   const [page, setPage] = React.useState(1)
@@ -309,6 +313,64 @@ export function PersonCompaniesSection({
     [linkedCompanies, linkedPrimaryId, loadData, onChanged, personId, runWriteMutation, t],
   )
 
+  const handleUnlink = React.useCallback(
+    async (companyId: string, displayName: string) => {
+      if (!companyId || unlinkingId) return
+      const confirmed = await confirm({
+        title: t('customers.people.detail.companies.unlinkConfirmTitle', 'Unlink company'),
+        description: t(
+          'customers.people.detail.companies.unlinkConfirm',
+          'Unlink {{company}} from {{person}}?',
+          { company: displayName, person: _personName },
+        ),
+        confirmText: t('customers.people.detail.companies.unlinkAction', 'Unlink'),
+        cancelText: t('customers.linking.actions.cancel', 'Cancel'),
+      })
+      if (!confirmed) return
+      setUnlinkingId(companyId)
+      try {
+        await runWriteMutation(
+          () =>
+            apiCallOrThrow(
+              `/api/customers/people/${encodeURIComponent(personId)}/companies/${encodeURIComponent(companyId)}`,
+              { method: 'DELETE' },
+              {
+                errorMessage: t(
+                  'customers.people.detail.companies.unlinkError',
+                  'Failed to unlink company.',
+                ),
+              },
+            ),
+          { companyId, personId, operation: 'unlinkPersonCompanyLink' },
+        )
+        await loadData({ showLoading: false })
+        await onChanged?.()
+        flash(
+          t('customers.people.detail.companies.unlinkSuccess', 'Company unlinked.'),
+          'success',
+        )
+      } catch (error) {
+        const message = error instanceof Error
+          ? error.message
+          : t(
+              'customers.people.detail.companies.unlinkError',
+              'Failed to unlink company.',
+            )
+        flash(message, 'error')
+      } finally {
+        setUnlinkingId(null)
+      }
+    },
+    [_personName, confirm, loadData, onChanged, personId, runWriteMutation, t, unlinkingId],
+  )
+
+  useAppEvent('customers.person_company_link.deleted', (event) => {
+    const payload = event.payload as { personEntityId?: string | null } | null | undefined
+    if (payload && payload.personEntityId === personId) {
+      void loadData({ showLoading: false })
+    }
+  }, [personId, loadData])
+
   return (
     <>
       <div className="space-y-4">
@@ -399,6 +461,9 @@ export function PersonCompaniesSection({
                   temperatureMap={temperatureDict?.map}
                   renewalQuarterMap={renewalQuarterDict?.map}
                   roleMap={roleDict?.map}
+                  onUnlink={() => handleUnlink(item.companyId, item.displayName)}
+                  unlinkLabel={t('customers.people.detail.companies.unlinkAction', 'Unlink')}
+                  unlinkDisabled={unlinkingId === item.companyId}
                 />
               ))}
             </div>
@@ -417,6 +482,7 @@ export function PersonCompaniesSection({
         onConfirm={handleLinkConfirm}
         runGuardedMutation={runWriteMutation}
       />
+      {ConfirmDialogElement}
     </>
   )
 }

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

@@ -11,7 +11,9 @@ import {
   Check,
   History,
   Paperclip,
+  Plus,
 } from 'lucide-react'
+import type { SectionAction } from '@open-mercato/ui/backend/detail'
 
 export type PersonTabId =
   | 'activities'
@@ -38,6 +40,7 @@ type PersonDetailTabsProps = {
   companiesCount?: number
   tasksCount?: number
   filesCount?: number
+  sectionAction?: SectionAction | null
   children: React.ReactNode
 }
 
@@ -74,6 +77,7 @@ export function PersonDetailTabs({
   companiesCount = 0,
   tasksCount = 0,
   filesCount = 0,
+  sectionAction = null,
   children,
 }: PersonDetailTabsProps) {
   const t = useT()
@@ -134,8 +138,8 @@ export function PersonDetailTabs({
   return (
     <div>
       {/* Tab navigation — full width above both zones */}
-      <div className="border-b" role="tablist" aria-label={t('customers.people.detail.tabs.label', 'Person detail sections')}>
-        <nav className="-mb-px flex gap-1 overflow-x-auto px-1">
+      <div className="flex items-end justify-between gap-2 border-b" role="tablist" aria-label={t('customers.people.detail.tabs.label', 'Person detail sections')}>
+        <nav className="-mb-px flex flex-1 gap-1 overflow-x-auto px-1">
           {allTabs.map((tab) => {
             const isActive = activeTab === tab.id
             return (
@@ -161,6 +165,18 @@ export function PersonDetailTabs({
             )
           })}
         </nav>
+        {sectionAction ? (
+          <Button
+            type="button"
+            size="sm"
+            onClick={sectionAction.onClick}
+            disabled={sectionAction.disabled}
+            className="mb-1.5 mr-1 shrink-0"
+          >
+            <Plus className="mr-1.5 h-4 w-4" />
+            {sectionAction.label}
+          </Button>
+        ) : null}
       </div>
 
       {/* Two-column content below tabs */}

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

@@ -431,14 +431,7 @@ export function TasksSection({
         ) : null}
 
         {!isInitialLoading && !hasTasks ? (
-          <TabEmptyState
-            title={emptyState.title}
-            action={{
-              label: emptyState.actionLabel,
-              onClick: openCreateDialog,
-              disabled: isMutating || !entityId,
-            }}
-          />
+          <TabEmptyState title={emptyState.title} />
         ) : null}
 
         {!isInitialLoading && hasTasks ? (