@open-mercato/core 0.10.1-develop.7761.1.9dfaf470ed → 0.10.1-develop.7762.1.657bb7236b

package/src/modules/customers/components/detail/create/CreateDealForm.tsx

@@ -8,10 +8,13 @@ import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { createCrud } from '@open-mercato/ui/backend/utils/crud'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { useCurrentUserId } from '@open-mercato/ui/backend/utils/useCurrentUserId'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { E } from '#generated/entities.ids.generated'
+import { extensionPoints } from '../../../extension-points'
 import { dealFormSchema } from '../DealForm'
 import { createDictionarySelectLabels } from '../utils'
 import { DealSectionCard } from './DealSectionCard'
@@ -32,6 +35,20 @@ export type CreateDealFormProps = {
   initialValues?: Partial<BaseValues>
 }
 
+function readCreateValues(values: Record<string, unknown>): BaseValues {
+  const result = { ...EMPTY_VALUES }
+  for (const key of Object.keys(EMPTY_VALUES) as Array<keyof BaseValues>) {
+    if (key === 'personIds' || key === 'companyIds') {
+      const raw = values[key]
+      result[key] = Array.isArray(raw) ? raw.filter((value): value is string => typeof value === 'string') : []
+    } else {
+      const raw = values[key]
+      result[key] = typeof raw === 'string' || typeof raw === 'number' ? String(raw) : ''
+    }
+  }
+  return result
+}
+
 export function CreateDealForm({ returnTo, initialValues }: CreateDealFormProps) {
   const t = useT()
   const router = useRouter()
@@ -40,18 +57,10 @@ export function CreateDealForm({ returnTo, initialValues }: CreateDealFormProps)
       translateWithFallback(t, key, fallback, params),
     [t],
   )
-
-  const [values, setValues] = React.useState<BaseValues>(() => {
-    const definedSeedEntries = Object.entries(initialValues ?? {}).filter(([, seedValue]) => seedValue !== undefined)
-    return { ...EMPTY_VALUES, ...Object.fromEntries(definedSeedEntries) }
-  })
-  const [errors, setErrors] = React.useState<Record<string, string>>({})
-  const [isSubmitting, setIsSubmitting] = React.useState(false)
-
   // Default the owner to the current user, matching the pipeline quick-create dialog so a
   // deal created here does not start unowned (an unowned deal notifies nobody when it closes).
-  // useCurrentUserId resolves asynchronously, so this seeds once the id arrives and never
-  // overrides an explicit seed or a choice the user has already made.
+  // useCurrentUserId resolves asynchronously; CrudForm merges the late seed without touching
+  // an explicit seed or a field the user has already edited.
   const currentUserId = useCurrentUserId()
   // Seeds the picker for the self-assigned id, which may not be on the assignable roster
   // (an admin who is not a staff team member, or any user when the `staff` module is off).
@@ -61,228 +70,136 @@ export function CreateDealForm({ returnTo, initialValues }: CreateDealFormProps)
       : null),
     [currentUserId, tr],
   )
-  const ownerSeeded = React.useRef(false)
-  React.useEffect(() => {
-    if (ownerSeeded.current || !currentUserId) return
-    ownerSeeded.current = true
-    if (initialValues?.ownerUserId) return
-    setValues((current) => (current.ownerUserId ? current : { ...current, ownerUserId: currentUserId }))
-  }, [currentUserId, initialValues?.ownerUserId])
-
+  const seedValues = React.useMemo(() => {
+    const seeded: BaseValues = {
+      ...EMPTY_VALUES,
+      ...Object.fromEntries(Object.entries(initialValues ?? {}).filter(([, value]) => value !== undefined)),
+    }
+    return seeded.ownerUserId || !currentUserId ? seeded : { ...seeded, ownerUserId: currentUserId }
+  }, [initialValues, currentUserId])
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const { runMutation, retryLastMutation } = useGuardedMutation({ contextId: CONTEXT_ID, blockedMessage: tr('ui.forms.flash.saveBlocked', 'Save blocked by validation') })
   const { pipelines, stages, loadStages } = useDealPipelines()
-  const {
-    customValues,
-    customFieldsLoaded,
-    customCount,
-    handleCustomChange,
-    handleCustomAttributesLoaded,
-    validateCustomFields,
-    collectNormalizedCustomValues,
-  } = useDealCustomFields(tr)
-
-  const { runMutation, retryLastMutation } = useGuardedMutation<{
-    formId: string
-    resourceKind: string
-    retryLastMutation: () => Promise<boolean>
-  }>({
-    contextId: CONTEXT_ID,
-    blockedMessage: tr('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
-  })
-
+  const { customFieldsLoaded, customCount, handleCustomAttributesLoaded, collectNormalizedCustomValues } = useDealCustomFields(tr)
   const statusLabels = React.useMemo(
     () => createDictionarySelectLabels('deal-statuses', (key, fallback) => tr(key, fallback ?? key)),
     [tr],
   )
-
-  const patch = React.useCallback((partial: Partial<BaseValues>) => {
-    // A user touching the owner before useCurrentUserId resolves must not be overridden by
-    // the seeding effect below.
-    if ('ownerUserId' in partial) ownerSeeded.current = true
-    setValues((current) => ({ ...current, ...partial }))
-  }, [])
-
-  const handlePipelineChange = React.useCallback(
-    (id: string) => {
-      patch({ pipelineId: id, pipelineStageId: '' })
-      // loadStages resets stages to [] on failure; the rejection is intentionally ignored here.
-      loadStages(id).catch(() => {})
-    },
-    [loadStages, patch],
-  )
-
-  const handleCancel = React.useCallback(() => {
-    router.push(returnTo)
-  }, [returnTo, router])
-
-  const handleSubmit = React.useCallback(async () => {
-    if (isSubmitting) return
-    if (!customFieldsLoaded) {
-      flash(tr('customers.deals.create.sections.custom.loading', 'Loading custom fields...'), 'error')
-      return
+  const handleCancel = React.useCallback(() => router.push(returnTo), [returnTo, router])
+  const handleSubmit = React.useCallback(async (values: Record<string, unknown>) => {
+    const data = dealFormSchema.parse(values)
+    const payload: Record<string, unknown> = {
+      title: data.title,
+      status: data.status || undefined,
+      pipelineId: data.pipelineId || undefined,
+      pipelineStageId: data.pipelineStageId || undefined,
+      valueAmount: typeof data.valueAmount === 'number' ? data.valueAmount : undefined,
+      valueCurrency: data.valueCurrency || undefined,
+      probability: typeof data.probability === 'number' ? data.probability : undefined,
+      expectedCloseAt: data.expectedCloseAt ? new Date(data.expectedCloseAt).toISOString() : undefined,
+      description: data.description || undefined,
+      // `null`, not omitted — matching DealForm, so both create surfaces send the same
+      // shape. `dealCreateSchema.ownerUserId` is `.optional().nullable()` and
+      // createDealCommand maps null to null.
+      ownerUserId: data.ownerUserId && data.ownerUserId.length ? data.ownerUserId : null,
+      personIds: data.personIds?.length ? data.personIds : undefined,
+      companyIds: data.companyIds?.length ? data.companyIds : undefined,
     }
-    const merged = { ...values, ...customValues }
-    const parsed = dealFormSchema.safeParse(merged)
-    if (!parsed.success) {
-      const fieldErrors: Record<string, string> = {}
-      for (const issue of parsed.error.issues) {
-        const key = typeof issue.path[0] === 'string' ? issue.path[0] : undefined
-        if (key && !fieldErrors[key]) fieldErrors[key] = tr(issue.message, issue.message)
-      }
-      setErrors(fieldErrors)
-      const firstMessage = Object.values(fieldErrors)[0]
-      if (firstMessage) flash(firstMessage, 'error')
-      return
-    }
-
-    const customFieldErrors = validateCustomFields(merged)
-    if (Object.keys(customFieldErrors).length) {
-      setErrors(customFieldErrors)
-      const firstMessage = Object.values(customFieldErrors)[0]
-      if (firstMessage) flash(firstMessage, 'error')
-      return
-    }
-
-    setErrors({})
+    const custom = collectNormalizedCustomValues(values)
+    if (Object.keys(custom).length) payload.customFields = custom
     setIsSubmitting(true)
     try {
-      const data = parsed.data
-      const expectedCloseAt =
-        data.expectedCloseAt && data.expectedCloseAt.length
-          ? new Date(data.expectedCloseAt).toISOString()
-          : undefined
-      const payload: Record<string, unknown> = {
-        title: data.title,
-        status: data.status || undefined,
-        pipelineId: data.pipelineId || undefined,
-        pipelineStageId: data.pipelineStageId || undefined,
-        valueAmount: typeof data.valueAmount === 'number' ? data.valueAmount : undefined,
-        valueCurrency: data.valueCurrency || undefined,
-        probability: typeof data.probability === 'number' ? data.probability : undefined,
-        expectedCloseAt,
-        description: data.description && data.description.length ? data.description : undefined,
-        // `null`, not omitted — matching DealForm, so both create surfaces send the same
-        // shape. `dealCreateSchema.ownerUserId` is `.optional().nullable()` (validators.ts:183)
-        // and createDealCommand maps null to null (commands/deals.ts:591).
-        ownerUserId: data.ownerUserId && data.ownerUserId.length ? data.ownerUserId : null,
-        personIds: values.personIds.length ? values.personIds : undefined,
-        companyIds: values.companyIds.length ? values.companyIds : undefined,
-      }
-      const custom = collectNormalizedCustomValues(merged)
-      if (Object.keys(custom).length) payload.customFields = custom
-
-      await runMutation({
-        operation: () =>
-          createCrud('customers/deals', payload, {
-            errorMessage: tr('customers.deals.create.error', 'Failed to create deal.'),
-          }),
+      const { result } = await runMutation({
+        operation: () => createCrud<{ id?: string; entityId?: string }>('customers/deals', payload, {
+          errorMessage: tr('customers.deals.create.error', 'Failed to create deal.'),
+        }),
         context: { formId: CONTEXT_ID, resourceKind: 'customers.deal', retryLastMutation },
         mutationPayload: payload,
       })
       flash(tr('customers.people.detail.deals.success', 'Deal created.'), 'success')
-      router.push(returnTo)
-    } catch (err) {
-      const message = err instanceof Error ? err.message : tr('customers.deals.create.error', 'Failed to create deal.')
-      flash(message, 'error')
+      return { resourceId: result?.id ?? result?.entityId }
     } finally {
       setIsSubmitting(false)
     }
-  }, [
-    collectNormalizedCustomValues,
-    customFieldsLoaded,
-    customValues,
-    isSubmitting,
-    retryLastMutation,
-    returnTo,
-    router,
-    runMutation,
-    tr,
-    validateCustomFields,
-    values,
-  ])
-
-  const onKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLFormElement>) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-        event.preventDefault()
-        handleSubmit()
-      }
-    },
-    [handleSubmit],
-  )
-
-  const onFormSubmit = React.useCallback(
-    (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-      handleSubmit()
-    },
-    [handleSubmit],
-  )
-
-  const cancelLabel = tr('customers.deals.create.cancel', 'Cancel')
-  const submitLabel = tr('customers.deals.create.submit', 'Create deal')
-  const submitDisabled = !customFieldsLoaded
-
-  return (
-    <form className="mx-auto max-w-screen-2xl" onKeyDown={onKeyDown} onSubmit={onFormSubmit} noValidate>
-      <FormHeader
-        backHref={returnTo}
-        backLabel={tr('customers.deals.create.back', 'Back to deals')}
-      />
-
-      <div className="mt-6 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_330px]">
-        <div className="space-y-4">
+  }, [collectNormalizedCustomValues, tr, runMutation, retryLastMutation])
+  const handleSubmitSuccess = React.useCallback(() => {
+    router.push(returnTo)
+  }, [router, returnTo])
+  const fields = React.useMemo<CrudField[]>(() => Object.keys(EMPTY_VALUES).map((id) => ({
+    id,
+    label: tr(`customers.people.detail.deals.fields.${id}`, id),
+    type: 'text',
+    required: id === 'title',
+  })), [tr])
+  const groups = React.useMemo<CrudFormGroup[]>(() => [
+    {
+      id: 'details',
+      bare: true,
+      column: 1,
+      fields: Object.keys(EMPTY_VALUES).filter((id) => id !== 'personIds' && id !== 'companyIds'),
+      component: ({ values, setValue, errors, injectedFields }) => {
+        const patch = (partial: Partial<BaseValues>) => {
+          for (const [key, value] of Object.entries(partial)) setValue(key, value)
+        }
+        return (
           <DealSectionCard
             icon={Briefcase}
             title={tr('customers.deals.create.title', 'Create deal')}
             subtitle={tr('customers.deals.create.sections.details.subtitle', 'Core opportunity info')}
-            actions={
-              <>
-                <Button type="button" variant="outline" onClick={handleCancel} disabled={isSubmitting}>
-                  {cancelLabel}
-                </Button>
-                <Button type="button" onClick={handleSubmit} disabled={isSubmitting || submitDisabled}>
-                  {isSubmitting ? <Spinner className="size-4" /> : <Save className="size-4" />}
-                  {submitLabel}
-                </Button>
-              </>
-            }
+            actions={<>
+              <Button type="button" variant="outline" onClick={handleCancel} disabled={isSubmitting}>{tr('customers.deals.create.cancel', 'Cancel')}</Button>
+              <Button type="submit" form={CONTEXT_ID} disabled={isSubmitting || !customFieldsLoaded}>
+                {isSubmitting ? <Spinner className="size-4" /> : <Save className="size-4" />}
+                {tr('customers.deals.create.submit', 'Create deal')}
+              </Button>
+            </>}
           >
-            <DealDetailsFields
-              values={values}
-              errors={errors}
-              isSubmitting={isSubmitting}
-              patch={patch}
-              onPipelineChange={handlePipelineChange}
-              pipelines={pipelines}
-              stages={stages}
-              statusLabels={statusLabels}
-              ownerInitialOption={ownerInitialOption}
-              tr={tr}
-            />
+            <DealDetailsFields values={readCreateValues(values)} errors={errors} isSubmitting={isSubmitting} patch={patch}
+              onPipelineChange={(pipelineId) => { patch({ pipelineId, pipelineStageId: '' }); void loadStages(pipelineId).catch(() => {}) }}
+              pipelines={pipelines} stages={stages} statusLabels={statusLabels} ownerInitialOption={ownerInitialOption} tr={tr} />
+            {injectedFields}
           </DealSectionCard>
+        )
+      },
+    },
+    {
+      id: 'associations',
+      bare: true,
+      column: 1,
+      fields: ['personIds', 'companyIds'],
+      component: ({ values, setValue, injectedFields }) => <>
+        <DealAssociationsSection tr={tr} personIds={readCreateValues(values).personIds} companyIds={readCreateValues(values).companyIds}
+          onPeopleChange={(next) => setValue('personIds', next)} onCompaniesChange={(next) => setValue('companyIds', next)} disabled={isSubmitting} />
+        {injectedFields}
+      </>,
+    },
+    {
+      id: 'custom',
+      bare: true,
+      column: 2,
+      component: ({ values, setValue, errors, injectedFields }) => <>
+        <DealCreateSidebar tr={tr} customValues={values} onCustomChange={setValue} errors={errors} disabled={isSubmitting}
+          customCount={customCount} manageHref={CUSTOM_FIELDS_MANAGE_HREF} onCustomLoaded={handleCustomAttributesLoaded} />
+        {injectedFields}
+      </>,
+    },
+  ], [tr, handleCancel, isSubmitting, customFieldsLoaded, loadStages, pipelines, stages, statusLabels, ownerInitialOption, customCount, handleCustomAttributesLoaded])
 
-          <DealAssociationsSection
-            tr={tr}
-            personIds={values.personIds}
-            companyIds={values.companyIds}
-            onPeopleChange={(next) => patch({ personIds: next })}
-            onCompaniesChange={(next) => patch({ companyIds: next })}
-            disabled={isSubmitting}
-          />
-        </div>
-
-        <DealCreateSidebar
-          tr={tr}
-          customValues={customValues}
-          onCustomChange={handleCustomChange}
-          errors={errors}
-          disabled={isSubmitting}
-          customCount={customCount}
-          manageHref={CUSTOM_FIELDS_MANAGE_HREF}
-          onCustomLoaded={handleCustomAttributesLoaded}
-        />
+  return (
+    <div className="mx-auto max-w-screen-2xl" onKeyDown={(event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        if (!isSubmitting && customFieldsLoaded) document.getElementById(CONTEXT_ID)?.closest('form')?.requestSubmit()
+      }
+    }}>
+      <FormHeader backHref={returnTo} backLabel={tr('customers.deals.create.back', 'Back to deals')} />
+      <div className="mt-6">
+        <CrudForm<Record<string, unknown>> embedded hideFooterActions formId={CONTEXT_ID}
+          entityId="customers.deal" resourceKind="customers.deal" entityIds={[E.customers.customer_deal]}
+          injectionSpotId={extensionPoints.hosts.dealForm.spotId} fields={fields} groups={groups}
+          initialValues={seedValues} schema={dealFormSchema} onSubmit={handleSubmit} onSubmitSuccess={handleSubmitSuccess} />
       </div>
-    </form>
+    </div>
   )
 }
 

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

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { InjectionSpot, useInjectionWidgets, type LoadedInjectionSpotWidget } from '@open-mercato/ui/backend/injection/InjectionSpot'
+
+export type CustomerInjectedTab = {
+  id: string
+  label: string
+  priority: number
+  widgets: LoadedInjectionSpotWidget[]
+}
+
+export function groupCustomerInjectedTabs(
+  widgets: LoadedInjectionSpotWidget[],
+  translate: (key: string, fallback: string) => string,
+): CustomerInjectedTab[] {
+  const groups = new Map<string, CustomerInjectedTab>()
+  const seen = new Set<string>()
+  for (const widget of widgets) {
+    if (seen.has(widget.widgetId) || widget.placement?.kind === 'stack') continue
+    seen.add(widget.widgetId)
+    const id = widget.placement?.groupId ?? widget.widgetId
+    const declaredPriority = widget.placement?.priority ?? widget.module.metadata.priority
+    const priority = typeof declaredPriority === 'number' ? declaredPriority : 0
+    const group = groups.get(id)
+    if (group) {
+      group.widgets.push(widget)
+      group.priority = Math.max(group.priority, priority)
+    } else {
+      const label = widget.placement?.groupLabel ?? widget.module.metadata.title ?? id
+      groups.set(id, { id, label: translate(label, label), priority, widgets: [widget] })
+    }
+  }
+  return Array.from(groups.values()).sort((left, right) => right.priority - left.priority)
+}
+
+export function useCustomerInjectedTabs<TData>({
+  spotId,
+  context,
+  data,
+  onDataChange,
+  nativeTabIds,
+}: {
+  spotId: string
+  context: unknown
+  data: TData
+  onDataChange?: (data: TData) => void
+  nativeTabIds: readonly string[]
+}) {
+  const t = useT()
+  const { widgets, loading } = useInjectionWidgets(spotId, { context, triggerOnLoad: true })
+  const groups = React.useMemo(() => groupCustomerInjectedTabs(widgets, t), [widgets, t])
+  const injectedTabs = React.useMemo(
+    () => groups.filter((group) => !nativeTabIds.includes(group.id)),
+    [groups, nativeTabIds],
+  )
+  const injectedTabMap = React.useMemo(() => new Map(groups.map((group) => [group.id, () => (
+    <div className="space-y-4">
+      <InjectionSpot spotId={spotId} context={context} data={data} onDataChange={onDataChange} widgetsOverride={group.widgets} />
+    </div>
+  )])), [groups, spotId, context, data, onDataChange])
+  return { injectedTabs, injectedTabMap, loading }
+}

package/src/modules/customers/components/formConfig.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { extractResponseEnricherNamespaces } from '@open-mercato/shared/lib/crud/response-enricher-namespaces'
 import * as React from 'react'
 import { z } from 'zod'
 import Link from 'next/link'
@@ -2189,6 +2190,7 @@ export function mapCompanyOverviewToFormValues(overview: CompanyOverview): Parti
   const rawPhone = overview.company.primaryPhone
   const phoneValue = rawPhone == null ? '' : String(rawPhone)
   return {
+    ...extractResponseEnricherNamespaces(overview.company),
     id: overview.company.id,
     organizationId: overview.company.organizationId ?? null,
     displayName: coerceDisplayName(overview.company.displayName),
@@ -2213,6 +2215,7 @@ export function mapPersonOverviewToFormValues(overview: PersonOverview): Partial
   const rawPhone = overview.person.primaryPhone
   const phoneValue = rawPhone == null ? '' : String(rawPhone)
   return {
+    ...extractResponseEnricherNamespaces(overview.person),
     id: overview.person.id,
     organizationId: overview.person.organizationId ?? null,
     displayName: coerceDisplayName(overview.person.displayName),

package/src/modules/customers/extension-points.ts

@@ -6,11 +6,12 @@ import {
   injectionExtensionHost,
 } from '@open-mercato/shared/modules/widgets/extension-points'
 
-const detailHost = (spotId: string, source: string) => injectionExtensionHost({
+const detailHost = (spotId: string, source: string, dataContract?: string) => injectionExtensionHost({
   family: 'detail',
   spotId,
   supported: ['render-widget'],
   contextContract: 'customers.detail.v1',
+  dataContract,
   source,
 })
 
@@ -21,9 +22,9 @@ export const extensionPoints = defineModuleExtensionPoints({
     dealsTable: dataTableExtensionHost({ tableId: 'customers.deals.list', source: 'backend/customers/deals/page.tsx' }),
     peopleTable: dataTableExtensionHost({ tableId: 'customers.people.list', source: 'backend/customers/people/page.tsx' }),
     todosTable: dataTableExtensionHost({ tableId: 'customers.todos.list', source: 'components/CustomerTodosTable.tsx' }),
-    companyForm: crudFormExtensionHost({ entityId: 'customers.company', spotId: 'crud-form:customers.company', source: 'backend/customers/companies-v2/[id]/page.tsx' }),
-    dealForm: crudFormExtensionHost({ entityId: 'customers.deal', spotId: 'crud-form:customers.deal', source: 'backend/customers/deals/[id]/page.tsx' }),
-    personForm: crudFormExtensionHost({ entityId: 'customers.person', spotId: 'crud-form:customers.person', source: 'backend/customers/people-v2/[id]/page.tsx' }),
+    companyForm: crudFormExtensionHost({ entityId: 'customers.company', spotId: 'crud-form:customers.company', source: ['backend/customers/companies-v2/[id]/page.tsx', 'backend/customers/companies/create/page.tsx'] }),
+    dealForm: crudFormExtensionHost({ entityId: 'customers.deal', spotId: 'crud-form:customers.deal', source: ['backend/customers/deals/[id]/page.tsx', 'components/detail/create/CreateDealForm.tsx', 'backend/customers/deals/pipeline/components/QuickDealDialog.tsx'] }),
+    personForm: crudFormExtensionHost({ entityId: 'customers.person', spotId: 'crud-form:customers.person', source: ['backend/customers/people-v2/[id]/page.tsx', 'backend/customers/people/create/page.tsx', 'components/detail/CreatePersonDialog.tsx'] }),
     calendarEventTypes: injectionExtensionHost({
       family: 'generic',
       spotId: 'calendar:customers.event-types',
@@ -36,13 +37,22 @@ export const extensionPoints = defineModuleExtensionPoints({
       propsContract: 'customers.calendar.event-type-panel.v1',
       source: 'components/calendar/editor/EventTypePanel.tsx',
     }),
+    companyHeaderActions: detailHost('detail:customers.company:header-actions', 'backend/customers/companies-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
+    companySidebar: detailHost('detail:customers.company:sidebar', 'backend/customers/companies-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
+    companyTabs: detailHost('detail:customers.company:tabs', 'backend/customers/companies-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
     companyHeader: detailHost('detail:customers.company:header', 'backend/customers/companies-v2/[id]/page.tsx'),
     companyStatusBadges: detailHost('detail:customers.company:status-badges', 'backend/customers/companies-v2/[id]/page.tsx'),
     companyFooter: detailHost('detail:customers.company:footer', 'backend/customers/companies-v2/[id]/page.tsx'),
     companyLegacyDetails: detailHost('customers.company.detail:details', 'backend/customers/companies/[id]/page.tsx'),
+    dealHeaderActions: detailHost('detail:customers.deal:header-actions', 'backend/customers/deals/[id]/page.tsx', 'customers.detail.overview.v1'),
+    dealSidebar: detailHost('detail:customers.deal:sidebar', 'backend/customers/deals/[id]/page.tsx', 'customers.detail.overview.v1'),
+    dealTabs: detailHost('detail:customers.deal:tabs', 'backend/customers/deals/[id]/hooks/useDealInjectedTabs.tsx', 'customers.detail.overview.v1'),
     dealHeader: detailHost('detail:customers.deal:header', 'backend/customers/deals/[id]/page.tsx'),
     dealStatusBadges: detailHost('detail:customers.deal:status-badges', 'backend/customers/deals/[id]/page.tsx'),
     dealFooter: detailHost('detail:customers.deal:footer', 'backend/customers/deals/[id]/page.tsx'),
+    personHeaderActions: detailHost('detail:customers.person:header-actions', 'backend/customers/people-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
+    personSidebar: detailHost('detail:customers.person:sidebar', 'backend/customers/people-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
+    personTabs: detailHost('detail:customers.person:tabs', 'backend/customers/people-v2/[id]/page.tsx', 'customers.detail.overview.v1'),
     personHeader: detailHost('detail:customers.person:header', 'backend/customers/people-v2/[id]/page.tsx'),
     personStatusBadges: detailHost('detail:customers.person:status-badges', 'backend/customers/people-v2/[id]/page.tsx'),
     personFooter: detailHost('detail:customers.person:footer', 'backend/customers/people-v2/[id]/page.tsx'),

package/src/modules/customers/lib/detailResponseEnrichment.ts

@@ -0,0 +1,53 @@
+import type { EntityManager } from '@mikro-orm/postgresql'
+import type { AuthContext } from '@open-mercato/shared/lib/auth/server'
+import type { AppContainer } from '@open-mercato/shared/lib/di/container'
+import { getEnrichersForEntity } from '@open-mercato/shared/lib/crud/enricher-registry'
+import { applyResponseEnricherToRecord } from '@open-mercato/shared/lib/crud/enricher-runner'
+import { extractResponseEnricherNamespaces } from '@open-mercato/shared/lib/crud/response-enricher-namespaces'
+import type { RbacService } from '@open-mercato/core/modules/auth/services/rbacService'
+
+type DetailRecordKey = 'person' | 'company' | 'deal'
+
+type DetailEnrichmentContext = {
+  auth: NonNullable<AuthContext>
+  container: AppContainer
+  em: EntityManager
+  tenantId: string | null
+  organizationId: string | null
+}
+
+export async function enrichCustomerDetailResponse<T extends Record<string, unknown>>(
+  payload: T,
+  recordKey: DetailRecordKey,
+  context: DetailEnrichmentContext,
+): Promise<T> {
+  if (getEnrichersForEntity(`customers.${recordKey}`).length === 0) return payload
+  const clonedPayload = structuredClone(payload)
+  const mainRecord = clonedPayload[recordKey]
+  if (!context.tenantId || !context.organizationId || !mainRecord || typeof mainRecord !== 'object' || Array.isArray(mainRecord)) {
+    return clonedPayload
+  }
+  let userFeatures: string[] | undefined
+  try {
+    const rbac = context.container.resolve<RbacService>('rbacService')
+    if (rbac?.getGrantedFeatures) {
+      userFeatures = await rbac.getGrantedFeatures(context.auth.sub, {
+        tenantId: context.tenantId,
+        organizationId: context.organizationId,
+      })
+    }
+  } catch {
+    userFeatures = undefined
+  }
+  const record = mainRecord as Record<string, unknown>
+  const result = await applyResponseEnricherToRecord(structuredClone(record), `customers.${recordKey}`, {
+    tenantId: context.tenantId,
+    organizationId: context.organizationId,
+    userId: context.auth.sub,
+    em: context.em,
+    container: context.container,
+    userFeatures,
+  })
+  const namespaces = extractResponseEnricherNamespaces(result.record)
+  return { ...clonedPayload, ...namespaces, [recordKey]: { ...record, ...namespaces } }
+}

package/src/modules/integrations/widgets/injection/external-ids/widget.client.tsx

@@ -22,7 +22,7 @@ function SyncStatusBadge({ status, lastSynced }: { status: ExternalIdMapping['sy
   const label = t(config.label, status)
 
   return (
-    <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+    <span className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
       <span className={cn('inline-block size-1.5 rounded-full', config.dot)} aria-hidden="true" />
       <span>{label}</span>
       {lastSynced && (
@@ -60,11 +60,11 @@ export default function ExternalIdsWidget({ data }: InjectionWidgetComponentProp
             key={integrationId}
             className="flex items-center justify-between gap-2 rounded-md bg-muted/50 px-3 py-2"
           >
-            <div className="flex items-center gap-2 min-w-0">
+            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
               <span className="text-sm font-medium truncate">
                 {getIntegrationTitle(integrationId)}
               </span>
-              <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground">
+              <code className="min-w-0 max-w-full break-all rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground">
                 {mapping.externalId}
               </code>
               {mapping.externalUrl && (
@@ -72,7 +72,7 @@ export default function ExternalIdsWidget({ data }: InjectionWidgetComponentProp
                   href={mapping.externalUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
                   aria-label={t('integrations.externalIds.openExternal', 'Open in external system')}
                 >
                   <ExternalLinkIcon />