@open-mercato/core 0.6.4-develop.4371.1.8f3030407e → 0.6.4

package/src/modules/customers/components/detail/hooks/useInteractions.ts

@@ -1,7 +1,9 @@
 "use client"
 
 import * as React from 'react'
-import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { apiCallOrThrow, readApiResultOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { InteractionSummary } from '../types'
 
@@ -226,87 +228,126 @@ export function useInteractions({
   const updateInteraction = React.useCallback(
     async (id: string, payload: InteractionUpdatePayload) => {
       setIsMutating(true)
+      // Send the optimistic-lock header (target's loaded `updatedAt`) so a stale
+      // edit — including a task/activity edited from another tab — surfaces the
+      // conflict bar instead of silently overwriting (#2055). A stale edit after
+      // the record was deleted elsewhere maps to the same 409 via the server's
+      // enforceRecordGoneIsConflict, instead of a bare "Interaction not found" 404.
+      const target = interactions.find((entry) => entry.id === id)
       try {
-        await apiCallOrThrow(
-          '/api/customers/interactions',
-          {
-            method: 'PUT',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ id, ...payload }),
-          },
-          { errorMessage: t('customers.interactions.update.error', 'Failed to update interaction.') },
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(target?.updatedAt ?? null),
+          () => apiCallOrThrow(
+            '/api/customers/interactions',
+            {
+              method: 'PUT',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ id, ...payload }),
+            },
+            { errorMessage: t('customers.interactions.update.error', 'Failed to update interaction.') },
+          ),
         )
         await refresh()
+      } catch (err) {
+        if (surfaceRecordConflict(err, t)) { await refresh(); return }
+        throw err
       } finally {
         setIsMutating(false)
       }
     },
-    [refresh, t],
+    [interactions, refresh, t],
   )
 
   const completeInteraction = React.useCallback(
     async (id: string) => {
       setIsMutating(true)
       setPendingId(id)
+      const target = interactions.find((entry) => entry.id === id)
       try {
-        await apiCallOrThrow(
-          '/api/customers/interactions/complete',
-          {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ id }),
-          },
-          { errorMessage: t('customers.interactions.complete.error', 'Failed to complete interaction.') },
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(target?.updatedAt ?? null),
+          () => apiCallOrThrow(
+            '/api/customers/interactions/complete',
+            {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ id }),
+            },
+            { errorMessage: t('customers.interactions.complete.error', 'Failed to complete interaction.') },
+          ),
         )
         await refresh()
+      } catch (err) {
+        if (surfaceRecordConflict(err, t)) { await refresh(); return }
+        throw err
       } finally {
         setPendingId(null)
         setIsMutating(false)
       }
     },
-    [refresh, t],
+    [interactions, refresh, t],
   )
 
   const cancelInteraction = React.useCallback(
     async (id: string) => {
       setIsMutating(true)
       setPendingId(id)
+      const target = interactions.find((entry) => entry.id === id)
       try {
-        await apiCallOrThrow(
-          '/api/customers/interactions/cancel',
-          {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ id }),
-          },
-          { errorMessage: t('customers.interactions.cancel.error', 'Failed to cancel interaction.') },
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(target?.updatedAt ?? null),
+          () => apiCallOrThrow(
+            '/api/customers/interactions/cancel',
+            {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ id }),
+            },
+            { errorMessage: t('customers.interactions.cancel.error', 'Failed to cancel interaction.') },
+          ),
         )
         await refresh()
+      } catch (err) {
+        if (surfaceRecordConflict(err, t)) { await refresh(); return }
+        throw err
       } finally {
         setPendingId(null)
         setIsMutating(false)
       }
     },
-    [refresh, t],
+    [interactions, refresh, t],
   )
 
   const deleteInteraction = React.useCallback(
     async (id: string) => {
       setIsMutating(true)
+      const target = interactions.find((entry) => entry.id === id)
       try {
-        await apiCallOrThrow(
-          `/api/customers/interactions?id=${encodeURIComponent(id)}`,
-          {
-            method: 'DELETE',
-          },
-          { errorMessage: t('customers.interactions.delete.error', 'Failed to delete interaction.') },
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(target?.updatedAt ?? null),
+          () =>
+            apiCallOrThrow(
+              `/api/customers/interactions?id=${encodeURIComponent(id)}`,
+              {
+                method: 'DELETE',
+              },
+              { errorMessage: t('customers.interactions.delete.error', 'Failed to delete interaction.') },
+            ),
         )
         await refresh()
+      } catch (err) {
+        // A stale delete (the record was changed/deleted in another tab) surfaces
+        // the unified conflict bar and re-syncs the list instead of a raw error (#2055).
+        if (surfaceRecordConflict(err, t)) {
+          await refresh()
+          return
+        }
+        throw err
       } finally {
         setIsMutating(false)
       }
     },
-    [refresh, t],
+    [interactions, refresh, t],
   )
 
   const hasMore = entityId != null && nextCursor != null

package/src/modules/customers/components/detail/hooks/usePersonTasks.ts

@@ -1,7 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { apiCallOrThrow, readApiResultOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
 import { resolveTodoApiPath } from '../utils'
 import type { TodoLinkSummary } from '../types'
 import { generateTempId } from '@open-mercato/core/modules/customers/lib/detailHelpers'
@@ -22,6 +23,7 @@ type CustomerTodoRow = {
   todoDueAt: string | null
   todoCustomValues: Record<string, unknown> | null
   todoOrganizationId: string | null
+  todoUpdatedAt?: string | null
   organizationId: string
   tenantId: string
   createdAt: string
@@ -83,6 +85,7 @@ function mapRowToSummary(row: CustomerTodoRow): TodoLinkSummary {
     description: row.todoDescription ?? null,
     dueAt: row.todoDueAt ?? null,
     todoOrganizationId: row.todoOrganizationId ?? null,
+    updatedAt: row.todoUpdatedAt ?? null,
     customValues: row.todoCustomValues ?? null,
   }
 }
@@ -369,14 +372,21 @@ export function usePersonTasks({
         if (Object.keys(customValues).length) {
           body.customFields = customValues
         }
-        await apiCallOrThrow(
-          apiPath,
-          {
-            method: 'PUT',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify(body),
-          },
-          { errorMessage: 'Failed to update task.' },
+        // Send the optimistic-lock header (task's loaded updatedAt) so a stale
+        // edit — or an edit after the task was deleted in another tab — surfaces
+        // the unified conflict bar (409) instead of silently overwriting or
+        // returning a bare "Interaction not found" 404 (#2055).
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(task.updatedAt ?? null),
+          () => apiCallOrThrow(
+            apiPath,
+            {
+              method: 'PUT',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            },
+            { errorMessage: 'Failed to update task.' },
+          ),
         )
         setTasks((prev) =>
           prev.map((item) => {
@@ -440,14 +450,17 @@ export function usePersonTasks({
       if (!task.id) throw new Error('Task link id missing')
       setIsMutating(true)
     try {
-      await apiCallOrThrow(
-        '/api/customers/todos',
-        {
-          method: 'DELETE',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ id: task.id }),
-        },
-        { errorMessage: 'Failed to remove task.' },
+      await withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(task.updatedAt ?? null),
+        () => apiCallOrThrow(
+          '/api/customers/todos',
+          {
+            method: 'DELETE',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ id: task.id }),
+          },
+          { errorMessage: 'Failed to remove task.' },
+        ),
       )
         setTasks((prev) => prev.filter((item) => item.id !== task.id))
         setPageInfo((prev) => ({

package/src/modules/customers/components/detail/schedule/useScheduleFormState.ts

@@ -19,6 +19,8 @@ export type LinkedEntity = {
 
 export type ScheduleActivityEditData = {
   id: string
+  /** Record version for the OSS optimistic-lock header on edit (#2055). */
+  updatedAt?: string | null
   interactionType?: string
   title?: string | null
   body?: string | null

package/src/modules/customers/components/detail/types.ts

@@ -113,6 +113,7 @@ export type TodoLinkSummary = {
   description?: string | null
   dueAt?: string | null
   todoOrganizationId?: string | null
+  updatedAt?: string | null
   customValues?: Record<string, unknown> | null
   externalHref?: string | null
 }

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

@@ -239,6 +239,7 @@ export function DictionarySelectField({
       allowAppearance={allowAppearance}
       showManage={showManage}
       showLabelInput={showLabelInput}
+      sortOptions="none"
       showActiveAppearance={showActiveAppearance}
     />
   )
@@ -411,7 +412,7 @@ const createPrimaryPhoneField = (t: Translator): CrudField => ({
     return (
       <PhoneNumberField
         value={typeof value === 'string' ? value : null}
-        onValueChange={(next) => setValue(typeof next === 'string' ? next : undefined)}
+        onValueChange={(next) => setValue(typeof next === 'string' ? next : '')}
         externalError={error}
         autoFocus={autoFocus}
         disabled={disabled}
@@ -456,6 +457,12 @@ type CompanySelectFieldProps = {
 
 type CompanyOption = { value: string; label: string }
 
+function mergeCompanyOptions(options: CompanyOption[], selected: CompanyOption | null): CompanyOption[] {
+  if (!selected) return options
+  if (options.some((option) => option.value === selected.value)) return options
+  return [selected, ...options]
+}
+
 function normalizeCompanyOption(raw: unknown): CompanyOption | null {
   if (!raw || typeof raw !== 'object') return null
   const candidate = raw as Record<string, unknown>
@@ -479,6 +486,21 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
   const [saving, setSaving] = React.useState(false)
   const [formError, setFormError] = React.useState<string | null>(null)
 
+  const loadCompanyOption = React.useCallback(
+    async (companyId: string): Promise<CompanyOption | null> => {
+      const payload = await readApiResultOrThrow<{ items?: unknown[] }>(
+        `/api/customers/companies?id=${encodeURIComponent(companyId)}&pageSize=1`,
+        undefined,
+        { errorMessage: labels.errorLoad },
+      )
+      const items = Array.isArray(payload?.items) ? payload.items : []
+      return items
+        .map((item: unknown) => normalizeCompanyOption(item))
+        .find((option): option is CompanyOption => option?.value === companyId) ?? null
+    },
+    [labels.errorLoad],
+  )
+
   const loadOptions = React.useCallback(async () => {
     setLoading(true)
     try {
@@ -494,7 +516,11 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
         .sort((a: CompanyOption, b: CompanyOption) =>
           a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })
         )
-      setOptions(normalized)
+      const selected =
+        value && !normalized.some((option) => option.value === value)
+          ? await loadCompanyOption(value).catch(() => null)
+          : null
+      setOptions(mergeCompanyOptions(normalized, selected))
     } catch (err) {
       const message = err instanceof Error ? err.message : labels.errorLoad
       flash(message, 'error')
@@ -502,12 +528,21 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
     } finally {
       setLoading(false)
     }
-  }, [labels.errorLoad])
+  }, [labels.errorLoad, loadCompanyOption, value])
 
   React.useEffect(() => {
     loadOptions().catch(() => {})
   }, [loadOptions])
 
+  React.useEffect(() => {
+    if (!value || options.some((option) => option.value === value)) return
+    loadCompanyOption(value)
+      .then((selected) => {
+        setOptions((current) => mergeCompanyOptions(current, selected))
+      })
+      .catch(() => {})
+  }, [loadCompanyOption, options, value])
+
   const handleDialogChange = React.useCallback((open: boolean) => {
     setDialogOpen(open)
     if (!open) {
@@ -568,6 +603,7 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
   )
 
   const disabled = loading || saving
+  const selectedOption = value ? options.find((option) => option.value === value) : null
 
   return (
     <div className="space-y-2">
@@ -578,7 +614,7 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
           disabled={loading}
         >
           <SelectTrigger>
-            <SelectValue placeholder={labels.placeholder} />
+            <SelectValue placeholder={labels.placeholder}>{selectedOption?.label}</SelectValue>
           </SelectTrigger>
           <SelectContent>
             {options.map((option) => (
@@ -1198,7 +1234,7 @@ export const createCompanyFormFields = (t: Translator): CrudField[] => {
       component: ({ value, setValue, error, disabled, autoFocus }: CrudCustomFieldRenderProps) => (
         <PhoneNumberField
           value={typeof value === 'string' ? value : null}
-          onValueChange={(next) => setValue(typeof next === 'string' ? next : undefined)}
+          onValueChange={(next) => setValue(typeof next === 'string' ? next : '')}
           externalError={error}
           autoFocus={autoFocus}
           disabled={disabled}
@@ -1426,15 +1462,23 @@ export function buildCompanyPayload(
 // Edit-mode types
 // ---------------------------------------------------------------------------
 
-export type CompanyEditFormValues = Omit<CompanyFormValues, 'addresses'> & {
+// URL/email/phone fields are clearable on edit: blanking a previously-set value transmits null,
+// so the edit-form value types widen to `string | null` to match the edit-schema output. See #2526.
+export type CompanyEditFormValues = Omit<CompanyFormValues, 'addresses' | 'primaryEmail' | 'primaryPhone' | 'websiteUrl' | 'domain'> & {
   id: string
+  primaryEmail?: string | null
+  primaryPhone?: string | null
+  websiteUrl?: string | null
+  domain?: string | null
 }
 
-export type PersonEditFormValues = Omit<PersonFormValues, 'addresses'> & {
+export type PersonEditFormValues = Omit<PersonFormValues, 'addresses' | 'primaryEmail' | 'primaryPhone'> & {
   id: string
   department?: string
-  linkedInUrl?: string
-  twitterUrl?: string
+  primaryEmail?: string | null
+  primaryPhone?: string | null
+  linkedInUrl?: string | null
+  twitterUrl?: string | null
 }
 
 // ---------------------------------------------------------------------------
@@ -1450,31 +1494,70 @@ const optionalString = () =>
     .transform((val) => (val === '' ? undefined : val))
     .optional()
 
+// Edit-mode URL/email/phone fields map to nullable columns and must be clearable: blanking a
+// previously-set value transforms '' → null so the payload builder can transmit an explicit
+// clear (omitting the key can never remove an existing value). Create-mode schemas keep the
+// '' → undefined transform. See #2526.
+const clearableUrlField = () =>
+  z
+    .string()
+    .trim()
+    .url()
+    .optional()
+    .or(z.literal(''))
+    .transform((val) => (val === '' ? null : val))
+    .optional()
+
+const clearableEmailField = () =>
+  z
+    .string()
+    .trim()
+    .email()
+    .optional()
+    .or(z.literal(''))
+    .transform((val) => (val === '' ? null : val))
+    .optional()
+
+// Domain maps to a nullable column; on edit a blanked value must transmit null
+// (not undefined) so it actually clears — mirroring the website field. See #2529.
+const clearableDomainField = () =>
+  z
+    .string()
+    .trim()
+    .max(200)
+    .optional()
+    .or(z.literal(''))
+    .transform((val) => (val === '' ? null : val))
+    .optional()
+
+const clearablePhoneField = () =>
+  z
+    .string()
+    .trim()
+    .max(50)
+    .refine((value) => value === '' || isValidPhoneNumber(value), { message: CUSTOMER_PHONE_INVALID_MESSAGE_KEY })
+    .optional()
+    .or(z.literal(''))
+    .transform((val) => (val === '' ? null : val))
+    .optional()
+
 export const createCompanyEditSchema = () =>
   createCompanyFormSchema().extend({
     id: z.string().uuid(),
+    primaryEmail: clearableEmailField(),
+    primaryPhone: clearablePhoneField(),
+    websiteUrl: clearableUrlField(),
+    domain: clearableDomainField(),
   })
 
 export const createPersonEditSchema = () =>
   createPersonFormSchema().extend({
     id: z.string().uuid(),
     department: optionalString(),
-    linkedInUrl: z
-      .string()
-      .trim()
-      .url()
-      .optional()
-      .or(z.literal(''))
-      .transform((val) => (val === '' ? undefined : val))
-      .optional(),
-    twitterUrl: z
-      .string()
-      .trim()
-      .url()
-      .optional()
-      .or(z.literal(''))
-      .transform((val) => (val === '' ? undefined : val))
-      .optional(),
+    primaryEmail: clearableEmailField(),
+    primaryPhone: clearablePhoneField(),
+    linkedInUrl: clearableUrlField(),
+    twitterUrl: clearableUrlField(),
   })
 
 // ---------------------------------------------------------------------------
@@ -1754,9 +1837,29 @@ export const createPersonPersonalDataGroups = (
 // Edit-mode payload builders
 // ---------------------------------------------------------------------------
 
+// On edit, optional URL/email/phone fields that map to nullable columns must transmit an explicit
+// `null` when the user blanks a previously-set value — omitting the key can never clear it.
+// The base create-mode builders omit blanks (correct for create), so the edit builders
+// override these clearable fields here. See #2526.
+const assignClearable = (payload: Record<string, unknown>, key: string, raw: unknown): void => {
+  if (raw === null) {
+    payload[key] = null
+    return
+  }
+  if (typeof raw !== 'string') return
+  const trimmed = raw.trim()
+  payload[key] = trimmed.length ? trimmed : null
+}
+
 export function buildCompanyEditPayload(values: CompanyEditFormValues, organizationId?: string | null): Record<string, unknown> {
   const payload = buildCompanyPayload(values, organizationId)
   payload.id = values.id
+
+  assignClearable(payload, 'primaryEmail', values.primaryEmail)
+  assignClearable(payload, 'primaryPhone', values.primaryPhone)
+  assignClearable(payload, 'websiteUrl', values.websiteUrl)
+  assignClearable(payload, 'domain', typeof values.domain === 'string' ? values.domain.toLowerCase() : values.domain)
+
   return payload
 }
 
@@ -1767,11 +1870,10 @@ export function buildPersonEditPayload(values: PersonEditFormValues, organizatio
   const department = typeof values.department === 'string' ? values.department.trim() : ''
   if (department.length) payload.department = department
 
-  const linkedInUrl = typeof values.linkedInUrl === 'string' ? values.linkedInUrl.trim() : ''
-  if (linkedInUrl.length) payload.linkedInUrl = linkedInUrl
-
-  const twitterUrl = typeof values.twitterUrl === 'string' ? values.twitterUrl.trim() : ''
-  if (twitterUrl.length) payload.twitterUrl = twitterUrl
+  assignClearable(payload, 'primaryEmail', values.primaryEmail)
+  assignClearable(payload, 'primaryPhone', values.primaryPhone)
+  assignClearable(payload, 'linkedInUrl', values.linkedInUrl)
+  assignClearable(payload, 'twitterUrl', values.twitterUrl)
 
   return payload
 }
@@ -1896,6 +1998,8 @@ export type PersonOverview = {
     nextInteractionIcon?: string | null
     nextInteractionColor?: string | null
     organizationId?: string | null
+    updatedAt?: string | null
+    updated_at?: string | null
   }
   profile: {
     id: string