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

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

@@ -0,0 +1,91 @@
+'use client'
+
+import * as React from 'react'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type GuardedMutationRunner = <T>(
+  runner: () => Promise<T>,
+  payload?: Record<string, unknown>,
+) => Promise<T>
+
+export type UseInteractionMutationsOptions = {
+  runMutationWithContext: GuardedMutationRunner
+  onAfterChange?: () => void | Promise<void>
+  /** Log prefix used when a mutation throws, e.g. "customers.people-v2". */
+  logContext?: string
+}
+
+export type UseInteractionMutationsResult = {
+  completeInteraction: (interactionId: string) => Promise<void>
+  cancelInteraction: (interactionId: string) => Promise<void>
+}
+
+/**
+ * Shared interaction mutation handlers for deal and entity detail pages.
+ * Centralizes the complete/cancel activity logic so every detail page
+ * uses the same guarded-mutation + flash + refresh contract.
+ */
+export function useInteractionMutations({
+  runMutationWithContext,
+  onAfterChange,
+  logContext = 'customers.interactionMutations',
+}: UseInteractionMutationsOptions): UseInteractionMutationsResult {
+  const t = useT()
+
+  const triggerRefresh = React.useCallback(async () => {
+    if (!onAfterChange) return
+    try {
+      await onAfterChange()
+    } catch (err) {
+      console.warn(`[${logContext}] onAfterChange threw`, err)
+    }
+  }, [logContext, onAfterChange])
+
+  const completeInteraction = React.useCallback(
+    async (interactionId: string) => {
+      try {
+        await runMutationWithContext(
+          () =>
+            apiCallOrThrow('/api/customers/interactions/complete', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ id: interactionId, occurredAt: new Date().toISOString() }),
+            }),
+          { id: interactionId, status: 'done', operation: 'completeActivity' },
+        )
+        flash(t('customers.timeline.planned.completed', 'Activity completed'), 'success')
+        await triggerRefresh()
+      } catch (err) {
+        console.warn(`[${logContext}] complete interaction failed`, interactionId, err)
+        flash(t('customers.timeline.planned.error', 'Failed to complete activity'), 'error')
+      }
+    },
+    [logContext, runMutationWithContext, t, triggerRefresh],
+  )
+
+  const cancelInteraction = React.useCallback(
+    async (interactionId: string) => {
+      try {
+        await runMutationWithContext(
+          () =>
+            apiCallOrThrow('/api/customers/interactions', {
+              method: 'PUT',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ id: interactionId, status: 'canceled' }),
+            }),
+          { id: interactionId, status: 'canceled', operation: 'cancelActivity' },
+        )
+        flash(t('customers.timeline.planned.canceled', 'Activity canceled'), 'success')
+        await triggerRefresh()
+      } catch (err) {
+        console.warn(`[${logContext}] cancel interaction failed`, interactionId, err)
+        flash(t('customers.timeline.planned.cancelError', 'Failed to cancel activity'), 'error')
+      }
+    },
+    [logContext, runMutationWithContext, t, triggerRefresh],
+  )
+
+  return { completeInteraction, cancelInteraction }
+}

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

@@ -5,7 +5,34 @@ import { mapCommentSummary, type NotesDataAdapter } from '@open-mercato/ui/backe
 
 type Translator = (key: string, fallback?: string, params?: Record<string, string | number>) => string
 
-export function createCustomerNotesAdapter(translator: Translator): NotesDataAdapter {
+export type CustomerNotesGuardedMutation = <T>(
+  runner: () => Promise<T>,
+  payload?: Record<string, unknown>,
+) => Promise<T>
+
+export type CreateCustomerNotesAdapterOptions = {
+  /**
+   * Threads writes through a guarded mutation runner (typically
+   * `useGuardedMutation(...).runMutation` wrapped with retry context).
+   * When provided, the runner enables record-lock conflict retry and
+   * ensures global injection modules receive the mutation lifecycle.
+   */
+  runMutation?: CustomerNotesGuardedMutation
+}
+
+export function createCustomerNotesAdapter(
+  translator: Translator,
+  options: CreateCustomerNotesAdapterOptions = {},
+): NotesDataAdapter {
+  const runWrite = async <T>(
+    runner: () => Promise<T>,
+    payload: Record<string, unknown>,
+  ): Promise<T> => {
+    if (options.runMutation) {
+      return options.runMutation(runner, payload)
+    }
+    return runner()
+  }
   return {
     list: async ({ entityId, dealId }) => {
       const params = new URLSearchParams()
@@ -19,21 +46,49 @@ export function createCustomerNotesAdapter(translator: Translator): NotesDataAda
       const items = Array.isArray(payload?.items) ? payload.items : []
       return items.map(mapCommentSummary)
     },
+    listPage: async ({ entityId, dealId, page, pageSize }) => {
+      const params = new URLSearchParams()
+      if (entityId) params.set('entityId', entityId)
+      if (dealId) params.set('dealId', dealId)
+      params.set('page', String(page))
+      params.set('pageSize', String(pageSize))
+      const payload = await readApiResultOrThrow<Record<string, unknown>>(
+        `/api/customers/comments?${params.toString()}`,
+        undefined,
+        { errorMessage: translator('customers.people.detail.notes.loadError', 'Failed to load notes.') },
+      )
+      const items = Array.isArray(payload?.items) ? payload.items.map(mapCommentSummary) : []
+      const total = typeof payload?.total === 'number' ? payload.total : items.length
+      const totalPages = typeof payload?.totalPages === 'number' ? payload.totalPages : Math.max(1, Math.ceil(total / pageSize))
+      const resolvedPage = typeof payload?.page === 'number' ? payload.page : page
+      const resolvedPageSize = typeof payload?.pageSize === 'number' ? payload.pageSize : pageSize
+      return {
+        items,
+        total,
+        page: resolvedPage,
+        pageSize: resolvedPageSize,
+        totalPages,
+      }
+    },
     create: async ({ entityId, body, appearanceIcon, appearanceColor, dealId }) => {
-      const response = await apiCallOrThrow<Record<string, unknown>>(
-        '/api/customers/comments',
-        {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({
-            entityId,
-            body,
-            appearanceIcon: appearanceIcon ?? undefined,
-            appearanceColor: appearanceColor ?? undefined,
-            dealId: dealId ?? undefined,
-          }),
-        },
-        { errorMessage: translator('customers.people.detail.notes.error') },
+      const requestBody = {
+        entityId,
+        body,
+        appearanceIcon: appearanceIcon ?? undefined,
+        appearanceColor: appearanceColor ?? undefined,
+        dealId: dealId ?? undefined,
+      }
+      const response = await runWrite(
+        () => apiCallOrThrow<Record<string, unknown>>(
+          '/api/customers/comments',
+          {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(requestBody),
+          },
+          { errorMessage: translator('customers.people.detail.notes.error') },
+        ),
+        { operation: 'createNote', entityId, dealId: dealId ?? null },
       )
       return response.result ?? {}
     },
@@ -42,24 +97,30 @@ export function createCustomerNotesAdapter(translator: Translator): NotesDataAda
       if (patch.body !== undefined) payload.body = patch.body
       if (patch.appearanceIcon !== undefined) payload.appearanceIcon = patch.appearanceIcon
       if (patch.appearanceColor !== undefined) payload.appearanceColor = patch.appearanceColor
-      await apiCallOrThrow(
-        '/api/customers/comments',
-        {
-          method: 'PUT',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify(payload),
-        },
-        { errorMessage: translator('customers.people.detail.notes.updateError') },
+      await runWrite(
+        () => apiCallOrThrow(
+          '/api/customers/comments',
+          {
+            method: 'PUT',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(payload),
+          },
+          { errorMessage: translator('customers.people.detail.notes.updateError') },
+        ),
+        { operation: 'updateNote', id },
       )
     },
     delete: async ({ id }) => {
-      await apiCallOrThrow(
-        `/api/customers/comments?id=${encodeURIComponent(id)}`,
-        {
-          method: 'DELETE',
-          headers: { 'content-type': 'application/json' },
-        },
-        { errorMessage: translator('customers.people.detail.notes.deleteError', 'Failed to delete note') },
+      await runWrite(
+        () => apiCallOrThrow(
+          `/api/customers/comments?id=${encodeURIComponent(id)}`,
+          {
+            method: 'DELETE',
+            headers: { 'content-type': 'application/json' },
+          },
+          { errorMessage: translator('customers.people.detail.notes.deleteError', 'Failed to delete note') },
+        ),
+        { operation: 'deleteNote', id },
       )
     },
   }

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

@@ -0,0 +1,29 @@
+export function normalizePipelineStageLabel(value: string | null | undefined): string {
+  return typeof value === 'string'
+    ? value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, ' ')
+        .trim()
+    : ''
+}
+
+const TERMINAL_OUTCOME_LABELS = new Set([
+  'won',
+  'win',
+  'closed won',
+  'closed win',
+  'lost',
+  'loose',
+  'closed lost',
+  'closed loose',
+  'stalled',
+  'stale',
+  'closed stalled',
+  'closed stale',
+])
+
+export function isTerminalPipelineOutcomeLabel(value: string | null | undefined): boolean {
+  const normalized = normalizePipelineStageLabel(value)
+  return normalized.length > 0 && TERMINAL_OUTCOME_LABELS.has(normalized)
+}

package/src/modules/customers/components/detail/schedule/DateTimeFields.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, Clock, ChevronDown, Globe, Repeat } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { ActivityType, ScheduleFieldId } from './fieldConfig'
+import { isVisible, getFieldLabel } from './fieldConfig'
+
+const DURATION_OPTIONS = [15, 30, 45, 60, 90, 120]
+const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+interface DateTimeFieldsProps {
+  visible: Set<ScheduleFieldId>
+  activityType: ActivityType
+  date: string
+  setDate: (value: string) => void
+  startTime: string
+  setStartTime: (value: string) => void
+  duration: number
+  setDuration: (value: number) => void
+  allDay: boolean
+  setAllDay: (value: boolean) => void
+  recurrenceEnabled: boolean
+  setRecurrenceEnabled: (value: boolean) => void
+  recurrenceDays: boolean[]
+  toggleRecurrenceDay: (index: number) => void
+  recurrenceEndType: 'never' | 'count' | 'date'
+  setRecurrenceEndType: (value: 'never' | 'count' | 'date') => void
+  recurrenceCount: number
+  setRecurrenceCount: (value: number) => void
+  recurrenceEndDate: string
+  setRecurrenceEndDate: (value: string) => void
+}
+
+export function DateTimeFields({
+  visible,
+  activityType,
+  date,
+  setDate,
+  startTime,
+  setStartTime,
+  duration,
+  setDuration,
+  allDay,
+  setAllDay,
+  recurrenceEnabled,
+  setRecurrenceEnabled,
+  recurrenceDays,
+  toggleRecurrenceDay,
+  recurrenceEndType,
+  setRecurrenceEndType,
+  recurrenceCount,
+  setRecurrenceCount,
+  recurrenceEndDate,
+  setRecurrenceEndDate,
+}: DateTimeFieldsProps) {
+  const t = useT()
+
+  if (!visible.has('date')) return null
+
+  const showStartTime = isVisible(activityType, 'startTime')
+  const showDuration = isVisible(activityType, 'duration')
+  const showAllDay = isVisible(activityType, 'allDay')
+  const showRecurrence = isVisible(activityType, 'recurrence')
+
+  return (
+    <>
+      {/* Date / Time / Duration */}
+      <div className="flex gap-3">
+        <div className="flex flex-[2] flex-col gap-1.5">
+          <label className="text-overline font-semibold text-muted-foreground tracking-wider">
+            {getFieldLabel(activityType, 'date', t, 'customers.schedule.date', 'Date')}
+          </label>
+          <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
+            <Calendar className="size-3.5 text-muted-foreground" />
+            <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="flex-1 bg-transparent text-sm text-foreground focus:outline-none" />
+          </div>
+        </div>
+        {showStartTime && (
+          <div className="flex flex-1 flex-col gap-1.5">
+            <label className="text-overline font-semibold text-muted-foreground tracking-wider">{t('customers.schedule.start', 'Start')}</label>
+            <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
+              <Clock className="size-3.5 text-muted-foreground" />
+              <input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} disabled={allDay} className="flex-1 bg-transparent text-sm text-foreground focus:outline-none disabled:opacity-50" />
+            </div>
+          </div>
+        )}
+        {showDuration && (
+          <div className="flex flex-1 flex-col gap-1.5">
+            <label className="text-overline font-semibold text-muted-foreground tracking-wider">{t('customers.schedule.duration', 'Duration')}</label>
+            <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
+              <select
+                value={duration}
+                onChange={(e) => setDuration(Number(e.target.value))}
+                disabled={allDay}
+                className="flex-1 appearance-none bg-transparent text-sm text-foreground focus:outline-none disabled:opacity-50"
+              >
+                {DURATION_OPTIONS.map((m) => (
+                  <option key={m} value={m}>{m} min</option>
+                ))}
+              </select>
+              <ChevronDown className="size-3.5 text-muted-foreground" />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* All day + timezone + recurrence */}
+      {showAllDay && (
+        <div className="flex flex-wrap items-center gap-3.5 text-xs text-muted-foreground">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" checked={allDay} onChange={(e) => setAllDay(e.target.checked)} className="rounded" />
+            {t('customers.schedule.allDay', 'All day')}
+          </label>
+          <span className="text-muted-foreground">&middot;</span>
+          <span className="flex items-center gap-1.5">
+            <Globe className="size-3.5" />
+            {Intl.DateTimeFormat().resolvedOptions().timeZone} (GMT{new Date().getTimezoneOffset() <= 0 ? '+' : '-'}{String(Math.abs(Math.floor(new Date().getTimezoneOffset() / 60))).padStart(1, '0')})
+          </span>
+          {showRecurrence && (
+            <>
+              <span className="text-muted-foreground">&middot;</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setRecurrenceEnabled(!recurrenceEnabled)}
+                className={cn('h-auto flex items-center gap-1.5', recurrenceEnabled && 'font-medium text-foreground')}
+              >
+                <Repeat className="size-3.5" />
+                {recurrenceEnabled
+                  ? t('customers.schedule.recurrence.active', 'Repeats')
+                  : t('customers.schedule.recurrence.none', 'No repeat')}
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Recurrence config */}
+      {showRecurrence && recurrenceEnabled && (
+        <div className="rounded-lg border border-status-warning-border bg-status-warning-bg p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-2 text-sm font-semibold text-foreground">
+              <Repeat className="size-3.5" />
+              {t('customers.schedule.recurrence.title', 'Recurrence')}
+            </span>
+            <Button type="button" variant="ghost" size="sm" className="h-auto text-xs font-medium text-foreground">
+              {t('customers.schedule.recurrence.edit', 'Edit')}
+            </Button>
+          </div>
+          <div className="flex gap-2">
+            {DAYS_OF_WEEK.map((day, i) => (
+              <Button
+                key={day}
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => toggleRecurrenceDay(i)}
+                className={cn(
+                  'h-auto flex size-8 items-center justify-center rounded-full text-xs font-medium transition-colors p-0',
+                  recurrenceDays[i] ? 'bg-primary text-primary-foreground' : 'border border-border bg-background text-muted-foreground hover:bg-muted',
+                )}
+              >
+                {day.slice(0, 2)}
+              </Button>
+            ))}
+          </div>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>{t('customers.schedule.recurrence.ends', 'Ends')}:</span>
+            <Button type="button" variant="ghost" size="sm" onClick={() => setRecurrenceEndType('never')} className={cn('h-auto rounded-full px-3 py-1 text-xs font-medium', recurrenceEndType === 'never' ? 'bg-background border border-border text-foreground' : 'text-muted-foreground')}>
+              {t('customers.schedule.recurrence.never', 'Never')}
+            </Button>
+            <Button type="button" variant="ghost" size="sm" onClick={() => setRecurrenceEndType('count')} className={cn('h-auto rounded-full px-3 py-1 text-xs font-medium', recurrenceEndType === 'count' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground')}>
+              {t('customers.schedule.recurrence.afterCount', 'After {{count}} occurrences', { count: recurrenceCount })}
+            </Button>
+            <Button type="button" variant="ghost" size="sm" onClick={() => setRecurrenceEndType('date')} className={cn('h-auto rounded-full px-3 py-1 text-xs font-medium', recurrenceEndType === 'date' ? 'bg-background border border-border text-foreground' : 'text-muted-foreground')}>
+              {recurrenceEndDate || t('customers.schedule.recurrence.onDate', 'On date')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/src/modules/customers/components/detail/schedule/FooterFields.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { Bell, Eye, ChevronDown } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ActivityType, ScheduleFieldId } from './fieldConfig'
+import { isVisible, getFieldLabel } from './fieldConfig'
+
+const REMINDER_OPTIONS = [0, 5, 10, 15, 30, 60]
+
+interface FooterFieldsProps {
+  visible: Set<ScheduleFieldId>
+  activityType: ActivityType
+  reminderMinutes: number
+  setReminderMinutes: (value: number) => void
+  visibility: string
+  setVisibility: (value: string) => void
+}
+
+export function FooterFields({
+  visible,
+  activityType,
+  reminderMinutes,
+  setReminderMinutes,
+  visibility,
+  setVisibility,
+}: FooterFieldsProps) {
+  const t = useT()
+
+  const showReminder = isVisible(activityType, 'reminder')
+  const showVisibility = isVisible(activityType, 'visibility')
+
+  if (!showReminder && !showVisibility) return null
+
+  return (
+    <div className="flex gap-3">
+      {showReminder && (
+        <div className="flex flex-1 flex-col gap-1.5">
+          <label className="text-overline font-semibold text-muted-foreground tracking-wider">
+            {getFieldLabel(activityType, 'reminder', t, 'customers.schedule.reminder', 'Reminder')}
+          </label>
+          <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
+            <Bell className="size-3.5 text-muted-foreground" />
+            <select
+              value={reminderMinutes}
+              onChange={(e) => setReminderMinutes(Number(e.target.value))}
+              className="flex-1 appearance-none bg-transparent text-sm text-foreground focus:outline-none"
+            >
+              {REMINDER_OPTIONS.map((m) => (
+                <option key={m} value={m}>
+                  {m === 0 ? t('customers.schedule.reminder.none', 'None') : `${m} min`}
+                </option>
+              ))}
+            </select>
+            <ChevronDown className="size-3.5 text-muted-foreground" />
+          </div>
+        </div>
+      )}
+      {showVisibility && (
+        <div className="flex flex-1 flex-col gap-1.5">
+          <label className="text-overline font-semibold text-muted-foreground tracking-wider">
+            {getFieldLabel(activityType, 'visibility', t, 'customers.schedule.visibility', 'Visibility')}
+          </label>
+          <div className="flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2.5">
+            <Eye className="size-3.5 text-muted-foreground" />
+            <select
+              value={visibility}
+              onChange={(e) => setVisibility(e.target.value)}
+              className="flex-1 appearance-none bg-transparent text-sm text-foreground focus:outline-none"
+            >
+              <option value="team">{t('customers.schedule.visibility.team', 'Team only')}</option>
+              <option value="public">{t('customers.schedule.visibility.public', 'Public')}</option>
+            </select>
+            <ChevronDown className="size-3.5 text-muted-foreground" />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}