@open-mercato/core 0.5.1-develop.2987.9f8c1e0f68 → 0.5.1-develop.3032.01699048cb

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

@@ -25,6 +25,7 @@ import { ActivityLogTab } from '../../../../components/detail/ActivityLogTab'
 import { CompanyPeopleSection, type CompanyPersonSummary } from '../../../../components/detail/CompanyPeopleSection'
 import type { TagSummary } from '../../../../components/detail/types'
 import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
+import { coerceDisplayName } from '../../../../lib/displayName'
 import { CompanyDetailHeader } from '../../../../components/detail/CompanyDetailHeader'
 import { CompanyDetailTabs, resolveLegacyTab, type CompanyTabId } from '../../../../components/detail/CompanyDetailTabs'
 import { CompanyKpiBar } from '../../../../components/detail/CompanyKpiBar'
@@ -103,10 +104,10 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
     blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
   })
 
-  const companyName =
-    data?.company?.displayName && data.company.displayName.trim().length
-      ? data.company.displayName
-      : t('customers.companies.list.deleteFallbackName', 'this company')
+  const companyDisplayName = coerceDisplayName(data?.company?.displayName)
+  const companyName = companyDisplayName.trim().length
+    ? companyDisplayName
+    : t('customers.companies.list.deleteFallbackName', 'this company')
 
   // Data loading
   const initialLoadDoneRef = React.useRef(false)
@@ -218,6 +219,27 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
     setScheduleDialogOpen(true)
   }, [])
 
+  const handleAddActivity = React.useCallback((kind: 'meeting' | 'call' | 'task' | 'email') => {
+    setScheduleEditData({
+      id: '',
+      interactionType: kind,
+      title: null,
+      body: null,
+      scheduledAt: null,
+      durationMinutes: null,
+      location: null,
+      allDay: null,
+      recurrenceRule: null,
+      recurrenceEnd: null,
+      participants: null,
+      reminderMinutes: null,
+      visibility: null,
+      linkedEntities: null,
+      guestPermissions: null,
+    })
+    setScheduleDialogOpen(true)
+  }, [])
+
   // Injected tabs from UMES
   const { widgets: injectedTabWidgets } = useInjectionWidgets('detail:customers.company:tabs', {
     context: injectionContext,
@@ -425,7 +447,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                 {activeTab === 'people' && (
                   <CompanyPeopleSection
                     companyId={companyId}
-                    companyName={data.company?.displayName ?? ''}
+                    companyName={companyDisplayName}
                     initialPeople={[]}
                     addActionLabel={t('customers.companies.detail.people.add', 'Add person')}
                     emptyLabel={t('customers.companies.detail.people.empty', 'No people linked to this company yet.')}
@@ -472,6 +494,7 @@ export default function CompanyDetailV2Page({ params }: { params?: { id?: string
                     plannedActivities={plannedActivities}
                     onActivityCreated={handleActivityCreated}
                     onScheduleRequested={openNewScheduleDialog}
+                    onAddActivity={handleAddActivity}
                     onMarkDone={handleMarkDone}
                     onEditActivity={handleEditActivity}
                     onCancelActivity={handleCancelActivity}

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

@@ -23,18 +23,17 @@ import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuarde
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 
 import { ActivitiesSection } from '../../../../components/detail/ActivitiesSection'
+import { ActivitiesCard } from '../../../../components/detail/ActivitiesCard'
+import type { ActivityKind } from '../../../../components/detail/ActivitiesAddNewMenu'
 import { DealsSection } from '../../../../components/detail/DealsSection'
 import { TasksSection } from '../../../../components/detail/TasksSection'
 import type { TagSummary } from '../../../../components/detail/types'
-import { InlineActivityComposer } from '../../../../components/detail/InlineActivityComposer'
-import { PlannedActivitiesSection } from '../../../../components/detail/PlannedActivitiesSection'
 import { ScheduleActivityDialog, type ScheduleActivityEditData } from '../../../../components/detail/ScheduleActivityDialog'
 import { PersonDetailHeader } from '../../../../components/detail/PersonDetailHeader'
 import { ChangelogTab } from '../../../../components/detail/ChangelogTab'
 import { PersonDetailTabs, resolveLegacyTab, type PersonTabId } from '../../../../components/detail/PersonDetailTabs'
 import { PersonCompaniesSection } from '../../../../components/detail/PersonCompaniesSection'
 import { MobilePersonDetail } from '../../../../components/detail/MobilePersonDetail'
-import { useInteractionMutations } from '../../../../components/detail/hooks/useInteractionMutations'
 import type { TagsSectionController } from '@open-mercato/ui/backend/detail'
 import {
   buildPersonEditPayload,
@@ -45,6 +44,7 @@ import {
   type PersonEditFormValues,
   type PersonOverview,
 } from '../../../../components/formConfig'
+import { coerceDisplayName, coerceDisplayNameOrNull } from '../../../../lib/displayName'
 
 export default function PersonDetailV2Page({ params }: { params?: { id?: string } }) {
   const id = params?.id
@@ -95,15 +95,18 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
     contextId: mutationContextId,
     blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
   })
-  const personName =
-    data?.person?.displayName && data.person.displayName.trim().length
-      ? data.person.displayName
-      : t('customers.people.list.deleteFallbackName', 'this person')
+  const personDisplayName = coerceDisplayName(data?.person?.displayName)
+  const personName = personDisplayName.trim().length
+    ? personDisplayName
+    : 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 personDisplayNameForGroups = personDisplayName.trim().length
+    ? personDisplayName.trim()
+    : null
+
+  const scheduleDialogCompanyName = coerceDisplayNameOrNull(
+    data?.company?.displayName ?? data?.companies?.[0]?.displayName ?? null,
+  )
 
   const groups = React.useMemo(
     () => createPersonPersonalDataGroups(t, { entityName: personDisplayNameForGroups }),
@@ -186,11 +189,26 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
     [injectionContext, runMutation],
   )
 
-  const { completeInteraction: handleMarkDone, cancelInteraction: handleCancelActivity } = useInteractionMutations({
-    runMutationWithContext,
-    onAfterChange: handleActivityCreated,
-    logContext: 'customers.people-v2',
-  })
+  const handleAddActivity = React.useCallback((kind: ActivityKind) => {
+    setScheduleEditData({
+      id: '',
+      interactionType: kind,
+      title: null,
+      body: null,
+      scheduledAt: null,
+      durationMinutes: null,
+      location: null,
+      allDay: null,
+      recurrenceRule: null,
+      recurrenceEnd: null,
+      participants: null,
+      reminderMinutes: null,
+      visibility: null,
+      linkedEntities: null,
+      guestPermissions: null,
+    })
+    setScheduleDialogOpen(true)
+  }, [])
 
   const handleEditActivity = React.useCallback((activity: { id: string; interactionType?: string; title?: string | null; body?: string | null; scheduledAt?: string | null; [key: string]: unknown }) => {
     const raw = activity as Record<string, unknown>
@@ -444,20 +462,13 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
                   if (activeTab === 'activities') {
                     return (
                       <div className="space-y-4">
-                        <InlineActivityComposer
-                          entityType="person"
+                        <ActivitiesCard
                           entityId={personId}
-                          onActivityCreated={handleActivityCreated}
-                          runGuardedMutation={runMutationWithContext}
-                          onScheduleRequested={() => { setScheduleEditData(null); setScheduleDialogOpen(true) }}
-                          useCanonicalInteractions={useCanonicalInteractions}
-                        />
-                        <PlannedActivitiesSection
-                          activities={plannedActivities}
-                          onComplete={handleMarkDone}
-                          onSchedule={() => { setScheduleEditData(null); setScheduleDialogOpen(true) }}
-                          onEdit={handleEditActivity}
-                          onCancel={handleCancelActivity}
+                          plannedActivities={plannedActivities}
+                          refreshKey={activityRefreshKey}
+                          onAddNew={handleAddActivity}
+                          onEditActivity={handleEditActivity}
+                          entityCompanyName={data.company?.displayName ?? data.companies?.[0]?.displayName ?? null}
                         />
                         <ActivitiesSection
                           entityId={personId}
@@ -579,7 +590,7 @@ export default function PersonDetailV2Page({ params }: { params?: { id?: string
             onClose={() => { setScheduleDialogOpen(false); setScheduleEditData(null) }}
             entityId={personId}
             entityName={personName}
-            companyName={data.company?.displayName ?? data.companies?.[0]?.displayName ?? null}
+            companyName={scheduleDialogCompanyName}
             entityType="person"
             onActivityCreated={handleActivityCreated}
             editData={scheduleEditData}

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

@@ -0,0 +1,67 @@
+'use client'
+
+import * as React from 'react'
+import { Check, Phone, Mail, Users, CheckSquare } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+
+export type ActivityKind = 'meeting' | 'call' | 'task' | 'email'
+
+interface ActivitiesAddNewMenuProps {
+  onSelect: (kind: ActivityKind) => void
+  disabled?: boolean
+}
+
+const MENU_ITEMS: ReadonlyArray<{ kind: ActivityKind; icon: React.ComponentType<{ className?: string }>; key: string; fallback: string }> = [
+  { kind: 'meeting', icon: Users, key: 'customers.activities.add.meeting', fallback: 'New meeting' },
+  { kind: 'call', icon: Phone, key: 'customers.activities.add.call', fallback: 'Log call' },
+  { kind: 'task', icon: CheckSquare, key: 'customers.activities.add.task', fallback: 'New task' },
+  { kind: 'email', icon: Mail, key: 'customers.activities.add.email', fallback: 'Compose email' },
+]
+
+export function ActivitiesAddNewMenu({ onSelect, disabled }: ActivitiesAddNewMenuProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+
+  const handleSelect = React.useCallback(
+    (kind: ActivityKind) => {
+      setOpen(false)
+      onSelect(kind)
+    },
+    [onSelect],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={t('customers.activities.addNew', 'Add new')}
+          className="inline-flex items-center gap-1.5 overflow-hidden rounded-md bg-foreground pl-3 pr-3.5 py-2 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:opacity-60"
+        >
+          <Check className="size-3.5" />
+          {t('customers.activities.addNew', 'Add new')}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[180px] p-1">
+        <ul className="flex flex-col">
+          {MENU_ITEMS.map(({ kind, icon: Icon, key, fallback }) => (
+            <li key={kind}>
+              <button
+                type="button"
+                onClick={() => handleSelect(kind)}
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-accent/40"
+              >
+                <Icon className="size-4 text-muted-foreground" />
+                {t(key, fallback)}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ActivitiesAddNewMenu

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

@@ -0,0 +1,231 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, CalendarClock, Clock, Mail, Phone, StickyNote, Users } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { ActivitiesDayStrip } from './ActivitiesDayStrip'
+import { ActivitiesAddNewMenu, type ActivityKind } from './ActivitiesAddNewMenu'
+import type { InteractionSummary } from './types'
+
+interface ActivitiesCardProps {
+  entityId: string
+  plannedActivities: InteractionSummary[]
+  refreshKey?: number
+  onAddNew: (kind: ActivityKind) => void
+  onEditActivity?: (activity: InteractionSummary) => void
+  /**
+   * Optional company name for the parent entity. When the planned activity has no `dealTitle`,
+   * the row subtitle falls back to "{type} · {company}" to mirror Figma 784:809.
+   */
+  entityCompanyName?: string | null
+}
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isOverdue(activity: InteractionSummary, now: Date): boolean {
+  const scheduled = activity.scheduledAt ?? activity.occurredAt
+  if (!scheduled) return false
+  const date = new Date(scheduled)
+  if (Number.isNaN(date.getTime())) return false
+  return date.getTime() < now.getTime() && activity.status !== 'done'
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatRelativeDay(date: Date, t: TranslateFn): string {
+  const now = new Date()
+  const today = startOfDay(now)
+  const target = startOfDay(date)
+  const diff = Math.round((target.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+  if (diff === 0) return t('customers.timeline.date.today', 'today')
+  if (diff === 1) return t('customers.timeline.date.tomorrow', 'tomorrow')
+  if (diff === -1) return t('customers.timeline.date.yesterday', 'yesterday')
+  return target.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+}
+
+function formatDuration(minutes: number, t: TranslateFn): string {
+  if (minutes >= 60) {
+    const hours = Math.round((minutes / 60) * 10) / 10
+    return t('customers.activities.calendar.hoursShort', '{hours}h', { hours })
+  }
+  return t('customers.activities.calendar.minutesShort', '{minutes}m', { minutes })
+}
+
+export function ActivitiesCard({
+  entityId,
+  plannedActivities,
+  refreshKey = 0,
+  onAddNew,
+  onEditActivity,
+  entityCompanyName,
+}: ActivitiesCardProps) {
+  const t = useT()
+  const [selectedDate, setSelectedDate] = React.useState<Date>(() => startOfDay(new Date()))
+
+  const eventsForSelectedDay = React.useMemo(() => {
+    const items = plannedActivities.filter((activity) => {
+      const scheduled = activity.scheduledAt ?? activity.occurredAt
+      if (!scheduled) return false
+      const date = new Date(scheduled)
+      if (Number.isNaN(date.getTime())) return false
+      return isSameDay(date, selectedDate)
+    })
+    return items.sort((left, right) => {
+      const leftTime = new Date(left.scheduledAt ?? left.occurredAt ?? left.createdAt).getTime()
+      const rightTime = new Date(right.scheduledAt ?? right.occurredAt ?? right.createdAt).getTime()
+      return leftTime - rightTime
+    })
+  }, [plannedActivities, selectedDate])
+
+  const overdueCount = React.useMemo(() => {
+    const now = new Date()
+    return plannedActivities.filter((activity) => isOverdue(activity, now)).length
+  }, [plannedActivities])
+
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card pt-4 pb-4 px-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Calendar className="size-4 text-foreground" />
+          <h3 className="text-sm font-semibold leading-none text-foreground">
+            {t('customers.activities.card.title', 'Activities')}
+          </h3>
+          {overdueCount > 0 ? (
+            <span className="inline-flex items-center gap-1 rounded-full bg-status-error-bg px-1.5 py-0.5 text-xs font-medium text-status-error-text">
+              <CalendarClock className="size-3" />
+              {t('customers.activities.card.overdue', '{count} overdue', { count: overdueCount })}
+            </span>
+          ) : null}
+        </div>
+        <ActivitiesAddNewMenu onSelect={onAddNew} />
+      </div>
+
+      <ActivitiesDayStrip
+        entityId={entityId}
+        selectedDate={selectedDate}
+        onSelectDate={setSelectedDate}
+        refreshKey={refreshKey}
+      />
+
+      {eventsForSelectedDay.length > 0 ? (
+        <>
+          <div className="h-px w-full bg-border" />
+          <ul className="flex flex-col">
+            {eventsForSelectedDay.map((activity) => (
+              <PlannedEventRow
+                key={activity.id}
+                activity={activity}
+                onClick={onEditActivity}
+                entityCompanyName={entityCompanyName ?? null}
+                t={t}
+              />
+            ))}
+          </ul>
+        </>
+      ) : (
+        <>
+          <div className="h-px w-full bg-border" />
+          <p className="px-1 py-2 text-xs text-muted-foreground">
+            {t('customers.activities.card.empty', 'Nothing scheduled for this day.')}
+          </p>
+        </>
+      )}
+    </div>
+  )
+}
+
+interface PlannedEventRowProps {
+  activity: InteractionSummary
+  onClick?: (activity: InteractionSummary) => void
+  entityCompanyName: string | null
+  t: TranslateFn
+}
+
+function PlannedEventRow({ activity, onClick, entityCompanyName, t }: PlannedEventRowProps) {
+  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
+  const date = new Date(dateStr)
+  const validDate = !Number.isNaN(date.getTime())
+  const Icon = TYPE_ICONS[activity.interactionType] ?? Users
+  const duration = typeof activity.duration === 'number' && activity.duration > 0 ? activity.duration : null
+  const overdue = validDate && date.getTime() < Date.now() && activity.status !== 'done'
+  const typeLabel = labelForType(activity.interactionType, t)
+  const subtitleSuffix = activity.dealTitle ?? entityCompanyName ?? null
+  const subtitle = subtitleSuffix ? `${typeLabel} · ${subtitleSuffix}` : typeLabel
+  const interactive = !!onClick
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={interactive ? () => onClick?.(activity) : undefined}
+        disabled={!interactive}
+        className={cn(
+          'flex w-full items-start gap-[9px] pt-[8px] text-left transition-colors',
+          interactive ? 'cursor-pointer rounded-md hover:bg-accent/30 px-1' : 'px-1',
+        )}
+      >
+        <div className="flex h-[44px] w-[43px] shrink-0 flex-col gap-[2px] pt-[2px]">
+          <span className="text-xs font-semibold leading-none text-foreground">
+            {validDate ? formatTime(date) : ''}
+          </span>
+          <span className="text-[10px] leading-none font-normal text-muted-foreground">
+            {validDate ? formatRelativeDay(date, t) : ''}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center justify-center rounded-full bg-muted border-4 border-background size-7">
+          <Icon className="size-4 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex flex-1 flex-col gap-[4px]">
+          <span className="text-sm leading-5 tracking-[-0.084px] text-foreground">
+            {activity.title ?? activity.body ?? labelForType(activity.interactionType, t)}
+          </span>
+          {duration ? (
+            <span className={cn(
+              'inline-flex w-fit items-center gap-[2px] rounded-full pl-[4px] pr-[8px] py-[2px] text-xs font-medium leading-[16px]',
+              overdue
+                ? 'bg-status-error-bg text-status-error-text'
+                : 'bg-status-warning-bg text-status-warning-text',
+            )}>
+              <Clock className="size-4" />
+              {formatDuration(duration, t)}
+            </span>
+          ) : null}
+          <span className="text-[11px] font-normal text-muted-foreground">{subtitle}</span>
+        </div>
+      </button>
+    </li>
+  )
+}
+
+function labelForType(type: string, t: TranslateFn): string {
+  const map: Record<string, [string, string]> = {
+    meeting: ['customers.timeline.filter.meeting', 'Meeting'],
+    call: ['customers.timeline.filter.call', 'Call'],
+    email: ['customers.timeline.filter.email', 'Email'],
+    note: ['customers.timeline.filter.note', 'Note'],
+    task: ['customers.timeline.filter.task', 'Task'],
+  }
+  const entry = map[type]
+  return entry ? t(entry[0], entry[1]) : type
+}
+
+export default ActivitiesCard