@open-mercato/core 0.6.1-develop.3081.21270ec58a → 0.6.1-develop.3090.06ab462170

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

@@ -2,15 +2,25 @@
 
 import * as React from 'react'
 import { Calendar, CalendarClock, Clock, Mail, Phone, StickyNote, Users } from 'lucide-react'
+import { toZonedTime } from 'date-fns-tz'
 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 { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { ActivitiesDayStrip } from './ActivitiesDayStrip'
 import { ActivitiesAddNewMenu, type ActivityKind } from './ActivitiesAddNewMenu'
 import type { InteractionSummary } from './types'
 
 interface ActivitiesCardProps {
   entityId: string
+  /**
+   * Initial planned activities (from the parent route's `plannedActivitiesPreview`).
+   * Used as the seed value before the broader `/api/customers/interactions` fetch
+   * resolves, and as the fallback when the fetch fails. The card always prefers
+   * its own fetched window (issue #1809 — fixes E1 status alignment and E2 type
+   * coverage by sourcing from the same endpoint as the day strip rather than the
+   * 5-item server preview that excluded most types in practice).
+   */
   plannedActivities: InteractionSummary[]
   refreshKey?: number
   onAddNew: (kind: ActivityKind) => void
@@ -29,6 +39,20 @@ const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   note: StickyNote,
 }
 
+const USER_TIMEZONE = (() => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+  } catch {
+    return 'UTC'
+  }
+})()
+
+// Project a UTC instant to the user's local timezone before extracting day/month/year
+// for "same day" comparisons (issue #1809 — E3 timezone drift).
+function toLocalZonedDate(value: string | Date): Date {
+  return toZonedTime(value, USER_TIMEZONE)
+}
+
 function startOfDay(date: Date): Date {
   const next = new Date(date)
   next.setHours(0, 0, 0, 0)
@@ -47,6 +71,11 @@ function isOverdue(activity: InteractionSummary, now: Date): boolean {
   return date.getTime() < now.getTime() && activity.status !== 'done'
 }
 
+// Visible window for the day-strip + activity list. Mirrors `VISIBLE_DAYS = 5`
+// in ActivitiesDayStrip with extra padding so navigation forward/back doesn't
+// race the fetch.
+const FETCH_WINDOW_DAYS = 31
+
 function formatTime(date: Date): string {
   return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
 }
@@ -80,26 +109,83 @@ export function ActivitiesCard({
 }: ActivitiesCardProps) {
   const t = useT()
   const [selectedDate, setSelectedDate] = React.useState<Date>(() => startOfDay(new Date()))
+  // Fetch the same broader window as the day strip via the canonical interactions
+  // endpoint. This single source of truth aligns the day-strip count with the
+  // visible event list (issue #1809 — E1) and surfaces all interaction types
+  // (issue #1809 — E2: the previous reliance on the server-side 5-item preview
+  // produced "Person view shows only Calls" because the limit happened to drop
+  // every non-call entry from the prefix-window).
+  const [fetchedEvents, setFetchedEvents] = React.useState<InteractionSummary[] | null>(null)
+
+  React.useEffect(() => {
+    if (!entityId) {
+      setFetchedEvents(null)
+      return
+    }
+    const controller = new AbortController()
+    const today = startOfDay(new Date())
+    const fromDate = new Date(today)
+    fromDate.setDate(today.getDate() - FETCH_WINDOW_DAYS)
+    const toDate = new Date(today)
+    toDate.setDate(today.getDate() + FETCH_WINDOW_DAYS)
+    toDate.setHours(23, 59, 59, 999)
+    const params = new URLSearchParams({
+      entityId,
+      from: fromDate.toISOString(),
+      to: toDate.toISOString(),
+      // Server caps at 100 (interactions querySchema). 100 is well above what
+      // an active CRM record accumulates in a 31-day window of meetings/calls,
+      // and the day strip + list naturally degrade to truncation if exceeded.
+      limit: '100',
+      sortField: 'scheduledAt',
+      sortDir: 'asc',
+      excludeInteractionType: 'task',
+    })
+    void (async () => {
+      try {
+        const payload = await readApiResultOrThrow<{ items?: InteractionSummary[] }>(
+          `/api/customers/interactions?${params.toString()}`,
+          { signal: controller.signal },
+        )
+        setFetchedEvents(Array.isArray(payload?.items) ? payload.items : [])
+      } catch (err) {
+        if ((err as { name?: string } | null)?.name !== 'AbortError') {
+          console.warn('[ActivitiesCard] failed to load interactions', err)
+          setFetchedEvents(null)
+        }
+      }
+    })()
+    return () => controller.abort()
+  }, [entityId, refreshKey])
+
+  // Prefer the broader fetch when it has resolved; fall back to the seed prop
+  // (route-supplied preview) only while the fetch is in flight or after a
+  // hard failure. This guarantees that the rare prop-only render path keeps
+  // backwards-compat with existing unit tests while live UI uses the broader fetch.
+  const effectiveEvents: InteractionSummary[] = fetchedEvents ?? plannedActivities
 
   const eventsForSelectedDay = React.useMemo(() => {
-    const items = plannedActivities.filter((activity) => {
+    const items = effectiveEvents.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)
+      // Compare in the user's local timezone so a 23:30 local activity stays
+      // on its local-day chip instead of bleeding into the next UTC day
+      // (issue #1809 — E3).
+      return isSameDay(toLocalZonedDate(scheduled), 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])
+  }, [effectiveEvents, selectedDate])
 
   const overdueCount = React.useMemo(() => {
     const now = new Date()
-    return plannedActivities.filter((activity) => isOverdue(activity, now)).length
-  }, [plannedActivities])
+    return effectiveEvents.filter((activity) => isOverdue(activity, now)).length
+  }, [effectiveEvents])
 
   return (
     <div className="flex flex-col gap-3 rounded-lg border border-border bg-card pt-4 pb-4 px-4">
@@ -124,6 +210,7 @@ export function ActivitiesCard({
         selectedDate={selectedDate}
         onSelectDate={setSelectedDate}
         refreshKey={refreshKey}
+        events={fetchedEvents ?? undefined}
       />
 
       {eventsForSelectedDay.length > 0 ? (

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { toZonedTime } from 'date-fns-tz'
 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'
@@ -13,6 +14,29 @@ interface ActivitiesDayStripProps {
   selectedDate: Date
   onSelectDate: (date: Date) => void
   refreshKey?: number
+  /**
+   * Optional pre-fetched events. When provided, the day strip skips its own fetch
+   * and uses the supplied list, ensuring its busyness count agrees with the
+   * activity list rendered alongside it (issue #1809 — E1 status filter alignment).
+   */
+  events?: InteractionSummary[]
+}
+
+const USER_TIMEZONE = (() => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+  } catch {
+    return 'UTC'
+  }
+})()
+
+// Project a UTC ISO timestamp to the user's local timezone before comparing
+// "same day" (issue #1809 — E3). The browser's `new Date(iso)` treats the
+// instant correctly, but `getDate()/getMonth()/getFullYear()` reflect the
+// user's local day, so for activities scheduled at e.g. 23:30 local on a UTC
+// boundary the day-strip and list now agree.
+function toLocalZonedDate(value: string | Date): Date {
+  return toZonedTime(value, USER_TIMEZONE)
 }
 
 const VISIBLE_DAYS = 5
@@ -114,7 +138,10 @@ function computeDayBusyness(events: InteractionSummary[], day: Date): DayBusynes
     if (!startIso) continue
     const start = new Date(startIso)
     if (Number.isNaN(start.getTime())) continue
-    if (!isSameDay(start, day)) continue
+    // Compare in the user's local timezone so an activity at 23:30 local time
+    // doesn't bleed into the next UTC day's chip (issue #1809 — E3).
+    const localStart = toLocalZonedDate(startIso)
+    if (!isSameDay(localStart, day)) continue
     eventCount += 1
     const durationMinutes = typeof event.duration === 'number' && event.duration > 0 ? event.duration : 30
     totalMinutes += durationMinutes
@@ -171,10 +198,14 @@ function formatDayLabel(date: Date, t: TranslateFn): string {
   return entry ? t(entry[1], entry[2]) : ''
 }
 
-export function ActivitiesDayStrip({ entityId, selectedDate, onSelectDate, refreshKey = 0 }: ActivitiesDayStripProps) {
+export function ActivitiesDayStrip({ entityId, selectedDate, onSelectDate, refreshKey = 0, events: providedEvents }: ActivitiesDayStripProps) {
   const t = useT()
   const [anchor, setAnchor] = React.useState<Date>(() => anchorCenteredOn(selectedDate))
-  const [events, setEvents] = React.useState<InteractionSummary[]>([])
+  const [fetchedEvents, setFetchedEvents] = React.useState<InteractionSummary[]>([])
+  // When the parent supplies `events` (preferred path — keeps day strip and
+  // the list in lockstep, fixes #1809 E1), skip the local fetch entirely.
+  const useProvidedEvents = providedEvents !== undefined
+  const events = useProvidedEvents ? providedEvents : fetchedEvents
 
   React.useEffect(() => {
     setAnchor((current) => {
@@ -189,6 +220,7 @@ export function ActivitiesDayStrip({ entityId, selectedDate, onSelectDate, refre
   const headerLabel = React.useMemo(() => formatMonthLabel(visibleDays[0], t), [visibleDays, t])
 
   React.useEffect(() => {
+    if (useProvidedEvents) return
     if (!entityId || visibleDays.length === 0) return
     const controller = new AbortController()
     const fromIso = startOfDay(visibleDays[0]).toISOString()
@@ -208,16 +240,16 @@ export function ActivitiesDayStrip({ entityId, selectedDate, onSelectDate, refre
           `/api/customers/interactions?${params.toString()}`,
           { signal: controller.signal },
         )
-        setEvents(Array.isArray(payload?.items) ? payload.items : [])
+        setFetchedEvents(Array.isArray(payload?.items) ? payload.items : [])
       } catch (err) {
         if ((err as { name?: string } | null)?.name !== 'AbortError') {
           console.warn('[ActivitiesDayStrip] failed to load interactions', err)
         }
-        setEvents([])
+        setFetchedEvents([])
       }
     })()
     return () => controller.abort()
-  }, [entityId, visibleDays, refreshKey])
+  }, [entityId, visibleDays, refreshKey, useProvidedEvents])
 
   const todayDate = React.useMemo(() => startOfDay(new Date()), [])
 

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

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { Clock, Search } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import type { SectionAction, TabEmptyStateConfig } from '@open-mercato/ui/backend/detail'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -105,6 +105,7 @@ export function ActivitiesSection({
   onLoadingChange,
   refreshKey = 0,
   onEditActivity,
+  runGuardedMutation,
 }: ActivitiesSectionProps) {
   const t = useT()
   const [filterTypes, setFilterTypes] = React.useState<string[]>([])
@@ -165,13 +166,17 @@ export function ActivitiesSection({
     setLoading(true)
     try {
       // Always fetch canonical interactions (new activities are always created here)
+      const taskFilterActive = filterTypes.includes('task')
       const canonicalParams = new URLSearchParams({
         entityId,
         limit: '50',
         sortField: 'occurredAt',
         sortDir: 'desc',
-        excludeInteractionType: 'task',
       })
+      // Hide tasks from the activity timeline by default — they have their own tab —
+      // but lift the exclusion when the user explicitly toggled the Task chip on
+      // (mirrors `ActivityHistorySection.tsx` after the #1805 fix).
+      if (!taskFilterActive) canonicalParams.set('excludeInteractionType', 'task')
       if (dealId) canonicalParams.set('dealId', dealId)
       if (filterTypes.length > 0) canonicalParams.set('type', filterTypes.join(','))
       if (filterDateFrom) canonicalParams.set('from', filterDateFrom)
@@ -250,6 +255,31 @@ export function ActivitiesSection({
     setLoadedPages(1)
   }, [dealId, entityId, filterDateFrom, filterDateTo, filterTypes, useCanonicalInteractions])
 
+  const handleMarkDone = React.useCallback(async (activityId: string) => {
+    try {
+      const operation = () =>
+        apiCallOrThrow('/api/customers/interactions/complete', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id: activityId, occurredAt: new Date().toISOString() }),
+        })
+      if (runGuardedMutation) {
+        await runGuardedMutation(operation, {
+          id: activityId,
+          status: 'done',
+          operation: 'completeActivity',
+        })
+      } else {
+        await operation()
+      }
+      flash(t('customers.activities.actions.markDoneSuccess', 'Activity marked done'), 'success')
+      await loadActivities()
+    } catch (err) {
+      console.warn('[customers.activitiesSection] mark done failed', activityId, err)
+      flash(t('customers.activities.actions.markDoneError', 'Could not mark activity as done'), 'error')
+    }
+  }, [loadActivities, runGuardedMutation, t])
+
   const resolvedUserIdsRef = React.useRef(new Set<string>())
 
   // Resolve missing author names from user IDs
@@ -353,7 +383,11 @@ export function ActivitiesSection({
         </div>
       ) : (
         <>
-          <ActivityTimeline activities={visibleActivities} onEdit={onEditActivity} />
+          <ActivityTimeline
+            activities={visibleActivities}
+            onEdit={onEditActivity}
+            onMarkDone={handleMarkDone}
+          />
           {totalCount > 0 ? (
             <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
               <span className="text-xs text-muted-foreground">

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

@@ -1,17 +1,34 @@
 'use client'
 
 import * as React from 'react'
-import { Calendar, ExternalLink, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { Calendar, Check, ExternalLink, ListTodo, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+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'
 import { cn } from '@open-mercato/shared/lib/utils'
 import type { InteractionSummary } from './types'
 import { ActivityAiActions } from './ActivityAiActions'
 import { getInitials } from './utils'
 
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
 type ActivityCardProps = {
   activity: InteractionSummary
   onOpen?: (activity: InteractionSummary) => void
+  /** Called after a successful mark-done so the parent can refresh the timeline. */
+  onChanged?: () => void
+  /**
+   * Optional guarded-mutation runner. When provided, mutations route through the parent's
+   * `useGuardedMutation` so retry-last-mutation and the global injection contract apply.
+   * When omitted, mutations run directly via `apiCallOrThrow` (e.g. read-only contexts
+   * or jest unit tests that don't supply a guarded runner).
+   */
+  runMutation?: GuardedMutationRunner
 }
 
 const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -19,6 +36,7 @@ const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   email: Mail,
   meeting: Users,
   note: StickyNote,
+  task: ListTodo,
 }
 
 function formatDayLabel(value: string, t: ReturnType<typeof useT>): string {
@@ -54,7 +72,7 @@ function resolveTarget(activity: InteractionSummary): string | null {
   return null
 }
 
-export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
+export function ActivityCard({ activity, onOpen, onChanged, runMutation }: ActivityCardProps) {
   const t = useT()
   const timestamp = activity.occurredAt ?? activity.scheduledAt ?? activity.createdAt
   const TypeIcon = TYPE_ICONS[activity.interactionType] ?? StickyNote
@@ -69,6 +87,36 @@ export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
       ? t('customers.activityLog.direction.with', 'with')
       : ''
   const showExternalLink = Boolean(activity._integrations && Object.keys(activity._integrations).length > 0)
+  const [markingDone, setMarkingDone] = React.useState(false)
+
+  const handleMarkDone = React.useCallback(async () => {
+    if (markingDone) return
+    setMarkingDone(true)
+    try {
+      const operation = () =>
+        apiCallOrThrow('/api/customers/interactions/complete', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id: activity.id, occurredAt: new Date().toISOString() }),
+        })
+      if (runMutation) {
+        await runMutation(operation, {
+          id: activity.id,
+          status: 'done',
+          operation: 'completeActivity',
+        })
+      } else {
+        await operation()
+      }
+      flash(t('customers.activities.actions.markDoneSuccess', 'Activity marked done'), 'success')
+      onChanged?.()
+    } catch (err) {
+      console.warn('[customers.activityCard] mark done failed', activity.id, err)
+      flash(t('customers.activities.actions.markDoneError', 'Could not mark activity as done'), 'error')
+    } finally {
+      setMarkingDone(false)
+    }
+  }, [activity.id, markingDone, onChanged, runMutation, t])
 
   return (
     <div
@@ -111,18 +159,35 @@ export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
             ) : null}
           </div>
 
-          <IconButton
-            type="button"
-            variant="ghost"
-            size="sm"
-            aria-label={t('customers.timeline.more', 'More')}
-            onClick={(event) => {
-              event.stopPropagation()
-              onOpen?.(activity)
-            }}
-          >
-            <MoreHorizontal className="size-4" />
-          </IconButton>
+          <div className="flex items-center gap-1.5">
+            {activity.status === 'planned' ? (
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                disabled={markingDone}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  void handleMarkDone()
+                }}
+              >
+                <Check className="size-3.5" />
+                {t('customers.activities.actions.markDone', 'Mark done')}
+              </Button>
+            ) : null}
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-label={t('customers.timeline.more', 'More')}
+              onClick={(event) => {
+                event.stopPropagation()
+                onOpen?.(activity)
+              }}
+            >
+              <MoreHorizontal className="size-4" />
+            </IconButton>
+          </div>
         </div>
 
         <div className="mt-2">