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

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

@@ -0,0 +1,49 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { AI_CARD_ACTIONS_BY_TYPE, resolveAiActions } from './aiActionCatalog'
+
+type ActivityAiActionsProps = {
+  activityType: string
+}
+
+export function ActivityAiActions({ activityType }: ActivityAiActionsProps) {
+  const t = useT()
+  const actions = resolveAiActions(activityType, AI_CARD_ACTIONS_BY_TYPE)
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <div className="flex flex-wrap items-center gap-1.5">
+        {actions.map((action) => {
+          const Icon = action.icon
+          return (
+            <Tooltip key={action.key}>
+              <TooltipTrigger asChild>
+                <span>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled
+                    className="h-auto rounded-full px-2 py-1 text-xs text-muted-foreground opacity-100"
+                  >
+                    <Icon className="mr-1 size-3" />
+                    {t(action.i18nKey, action.fallback)}
+                  </Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {t('customers.ai.comingSoon', 'Coming soon')}
+              </TooltipContent>
+            </Tooltip>
+          )
+        })}
+      </div>
+    </TooltipProvider>
+  )
+}
+
+export default ActivityAiActions

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

@@ -0,0 +1,154 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, ExternalLink, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+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 ActivityCardProps = {
+  activity: InteractionSummary
+  onOpen?: (activity: InteractionSummary) => void
+}
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+function formatDayLabel(value: string, t: ReturnType<typeof useT>): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
+  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+  const diffDays = Math.round((today - day) / 86400000)
+  if (diffDays === 0) return t('customers.timeline.date.today', 'today')
+  if (diffDays === 1) return t('customers.timeline.date.yesterday', 'yesterday')
+  return date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+}
+
+function formatTimeLabel(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+}
+
+function trimSnippet(value: string | null | undefined): string | null {
+  const normalized = value?.trim()
+  if (!normalized) return null
+  if (normalized.length <= 200) return normalized
+  return `${normalized.slice(0, 197)}...`
+}
+
+function resolveTarget(activity: InteractionSummary): string | null {
+  const participant = activity.participants?.find((item) => item.name || item.email)
+  if (participant?.name) return participant.name
+  if (participant?.email) return participant.email
+  if (activity.customer?.displayName) return activity.customer.displayName
+  return null
+}
+
+export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
+  const t = useT()
+  const timestamp = activity.occurredAt ?? activity.scheduledAt ?? activity.createdAt
+  const TypeIcon = TYPE_ICONS[activity.interactionType] ?? StickyNote
+  const titleBase = activity.title ?? activity.body ?? activity.interactionType
+  const title = activity.duration ? `${titleBase} (${activity.duration} min)` : titleBase
+  const snippet = trimSnippet(activity.body && activity.title ? activity.body : activity.body ?? null)
+  const actorLabel = activity.authorName ?? activity.authorEmail ?? t('customers.changelog.user.system', 'System')
+  const target = resolveTarget(activity)
+  const direction = activity.interactionType === 'email'
+    ? t('customers.activityLog.direction.to', 'to')
+    : activity.interactionType === 'call' || activity.interactionType === 'meeting'
+      ? t('customers.activityLog.direction.with', 'with')
+      : ''
+  const showExternalLink = Boolean(activity._integrations && Object.keys(activity._integrations).length > 0)
+
+  return (
+    <div
+      className={cn(
+        'grid gap-3',
+        onOpen ? 'cursor-pointer' : '',
+      )}
+      style={{ gridTemplateColumns: '64px 36px minmax(0,1fr)' }}
+      onClick={() => onOpen?.(activity)}
+      role={onOpen ? 'button' : undefined}
+      tabIndex={onOpen ? 0 : undefined}
+      onKeyDown={onOpen ? (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          onOpen(activity)
+        }
+      } : undefined}
+    >
+      <div className="pt-1 text-xs text-muted-foreground">
+        <div className="font-semibold text-foreground">{formatDayLabel(timestamp, t)}</div>
+        <div>{formatTimeLabel(timestamp)}</div>
+      </div>
+
+      <div className="flex size-9 items-center justify-center rounded-lg bg-muted/80">
+        <TypeIcon className="size-4 text-muted-foreground" />
+      </div>
+
+      <div className="rounded-xl border bg-card px-4 py-3 shadow-sm">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-1.5">
+              <h4 className="truncate text-sm font-semibold text-foreground">{title}</h4>
+              {showExternalLink ? <ExternalLink className="size-3.5 text-muted-foreground" /> : null}
+            </div>
+            {activity.location ? (
+              <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
+                <Calendar className="size-3.5" />
+                <span className="truncate">{activity.location}</span>
+              </div>
+            ) : 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>
+
+        <div className="mt-2">
+          <ActivityAiActions activityType={activity.interactionType} />
+        </div>
+
+        {snippet ? (
+          <p className="mt-2 text-sm text-muted-foreground">{snippet}</p>
+        ) : null}
+
+        <div className="mt-3 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+          <span className="inline-flex size-5 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground">
+            {getInitials(actorLabel)}
+          </span>
+          <span className="font-medium text-foreground">{actorLabel}</span>
+          {target && direction ? (
+            <>
+              <span>·</span>
+              <span>{direction}</span>
+              <span className="text-foreground">{target}</span>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ActivityCard

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

@@ -0,0 +1,412 @@
+'use client'
+
+import * as React from 'react'
+import { Clock3, Search } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { ErrorMessage, LoadingMessage, TabEmptyState } from '@open-mercato/ui/backend/detail'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import type { ActivitySummary, InteractionSummary } from './types'
+import { ActivityCard } from './ActivityCard'
+
+type ActivityHistorySectionProps = {
+  entityId: string
+  useCanonicalInteractions?: boolean
+  refreshKey?: number
+  onEditActivity?: (activity: InteractionSummary) => void
+}
+
+type InteractionListResponse = {
+  items?: InteractionSummary[]
+  nextCursor?: string
+}
+
+type InteractionCountsResponse = {
+  ok?: boolean
+  result?: {
+    call: number
+    email: number
+    meeting: number
+    note: number
+    total: number
+  }
+  call?: number
+  email?: number
+  meeting?: number
+  note?: number
+  total?: number
+}
+
+const TYPE_FILTERS = [
+  { value: 'call', labelKey: 'customers.timeline.filter.call', fallback: 'Call' },
+  { value: 'email', labelKey: 'customers.timeline.filter.email', fallback: 'Email' },
+  { value: 'meeting', labelKey: 'customers.timeline.filter.meeting', fallback: 'Meeting' },
+  { value: 'note', labelKey: 'customers.timeline.filter.note', fallback: 'Note' },
+] as const
+
+function computeRangeStart(range: '7d' | '30d' | '90d'): Date {
+  const date = new Date()
+  date.setHours(0, 0, 0, 0)
+  const days = Number.parseInt(range.replace('d', ''), 10) || 30
+  date.setDate(date.getDate() - days)
+  return date
+}
+
+function toTimelineTimestamp(activity: InteractionSummary): string {
+  return activity.occurredAt ?? activity.scheduledAt ?? activity.createdAt
+}
+
+function normalizeLegacyActivity(activity: ActivitySummary): InteractionSummary {
+  return {
+    id: activity.id,
+    interactionType: activity.activityType,
+    title: activity.subject ?? null,
+    body: activity.body ?? null,
+    status: 'done',
+    scheduledAt: null,
+    occurredAt: activity.occurredAt ?? null,
+    priority: null,
+    authorUserId: activity.authorUserId ?? null,
+    ownerUserId: null,
+    appearanceIcon: activity.appearanceIcon ?? null,
+    appearanceColor: activity.appearanceColor ?? null,
+    source: 'legacy-activity',
+    entityId: activity.entityId ?? null,
+    dealId: activity.dealId ?? null,
+    organizationId: null,
+    tenantId: null,
+    authorName: activity.authorName ?? null,
+    authorEmail: activity.authorEmail ?? null,
+    dealTitle: activity.dealTitle ?? null,
+    customValues: activity.customValues ?? null,
+    createdAt: activity.createdAt,
+    updatedAt: activity.createdAt,
+  }
+}
+
+function sortTimelineActivities(items: InteractionSummary[]): InteractionSummary[] {
+  const now = Date.now()
+  return [...items].sort((left, right) => {
+    const leftScheduled = left.scheduledAt ? new Date(left.scheduledAt).getTime() : Number.NaN
+    const rightScheduled = right.scheduledAt ? new Date(right.scheduledAt).getTime() : Number.NaN
+    const leftIsPlanned = left.status === 'planned' && Number.isFinite(leftScheduled)
+    const rightIsPlanned = right.status === 'planned' && Number.isFinite(rightScheduled)
+    const leftIsUpcoming = leftIsPlanned && leftScheduled >= now
+    const rightIsUpcoming = rightIsPlanned && rightScheduled >= now
+
+    if (leftIsUpcoming !== rightIsUpcoming) return leftIsUpcoming ? -1 : 1
+    if (leftIsUpcoming && rightIsUpcoming) return leftScheduled - rightScheduled
+
+    const compare = toTimelineTimestamp(right).localeCompare(toTimelineTimestamp(left))
+    if (compare !== 0) return compare
+    return right.id.localeCompare(left.id)
+  })
+}
+
+function sortActivities(items: InteractionSummary[], sortMode: 'recent' | 'title-asc' | 'title-desc') {
+  if (sortMode === 'recent') return sortTimelineActivities(items)
+  return [...items].sort((left, right) => {
+    const leftTitle = (left.title ?? left.body ?? left.interactionType ?? '').toLowerCase()
+    const rightTitle = (right.title ?? right.body ?? right.interactionType ?? '').toLowerCase()
+    return sortMode === 'title-asc'
+      ? leftTitle.localeCompare(rightTitle)
+      : rightTitle.localeCompare(leftTitle)
+  })
+}
+
+function matchesSearch(activity: InteractionSummary, query: string): boolean {
+  const normalized = query.trim().toLowerCase()
+  if (!normalized) return true
+  const haystack = [
+    activity.title,
+    activity.body,
+    activity.authorName,
+    activity.authorEmail,
+    activity.customer?.displayName,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase()
+  return haystack.includes(normalized)
+}
+
+function isWithinRange(activity: InteractionSummary, start: Date): boolean {
+  const timestamp = new Date(toTimelineTimestamp(activity))
+  if (Number.isNaN(timestamp.getTime())) return false
+  return timestamp >= start
+}
+
+export function ActivityHistorySection({
+  entityId,
+  useCanonicalInteractions = false,
+  refreshKey = 0,
+  onEditActivity,
+}: ActivityHistorySectionProps) {
+  const t = useT()
+  const [searchInput, setSearchInput] = React.useState('')
+  const [search, setSearch] = React.useState('')
+  const [activeTypes, setActiveTypes] = React.useState<string[]>([])
+  const [dateRange, setDateRange] = React.useState<'7d' | '30d' | '90d'>('90d')
+  const [sortMode, setSortMode] = React.useState<'recent' | 'title-asc' | 'title-desc'>('recent')
+  const [activities, setActivities] = React.useState<InteractionSummary[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [counts, setCounts] = React.useState<Record<string, number>>({ call: 0, email: 0, meeting: 0, note: 0, total: 0 })
+  const [hasMore, setHasMore] = React.useState(false)
+  const [loadedPages, setLoadedPages] = React.useState(1)
+
+  React.useEffect(() => {
+    const timeout = window.setTimeout(() => setSearch(searchInput.trim()), 300)
+    return () => window.clearTimeout(timeout)
+  }, [searchInput])
+
+  React.useEffect(() => {
+    const controller = new AbortController()
+    void (async () => {
+      try {
+        const payload = await readApiResultOrThrow<InteractionCountsResponse>(
+          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}&status=done`,
+          { signal: controller.signal },
+        )
+        const result = payload.result ?? payload
+        setCounts({
+          call: result.call ?? 0,
+          email: result.email ?? 0,
+          meeting: result.meeting ?? 0,
+          note: result.note ?? 0,
+          total: result.total ?? 0,
+        })
+      } catch {
+        setCounts({ call: 0, email: 0, meeting: 0, note: 0, total: 0 })
+      }
+    })()
+    return () => controller.abort()
+  }, [entityId, refreshKey])
+
+  const loadHistory = React.useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const rangeStart = computeRangeStart(dateRange).toISOString()
+      const pageSize = 20
+      const canonicalItems: InteractionSummary[] = []
+      let nextCursor: string | undefined
+      let firstPageHasMore = false
+      let pagesLoaded = 0
+
+      do {
+        const params = new URLSearchParams({
+          entityId,
+          status: 'done',
+          excludeInteractionType: 'task',
+          limit: String(pageSize),
+          from: rangeStart,
+        })
+        if (activeTypes.length > 0) params.set('type', activeTypes.join(','))
+        if (search) params.set('search', search)
+        if (sortMode === 'recent') {
+          params.set('sortField', 'occurredAt')
+          params.set('sortDir', 'desc')
+        } else {
+          params.set('sortField', 'title')
+          params.set('sortDir', sortMode === 'title-asc' ? 'asc' : 'desc')
+        }
+        if (nextCursor) params.set('cursor', nextCursor)
+
+        const response = await readApiResultOrThrow<InteractionListResponse>(
+          `/api/customers/interactions?${params.toString()}`,
+        )
+        const pageItems = Array.isArray(response.items) ? response.items : []
+        canonicalItems.push(...pageItems)
+        nextCursor = response.nextCursor
+        if (!firstPageHasMore) firstPageHasMore = Boolean(response.nextCursor)
+        pagesLoaded += 1
+      } while (nextCursor && pagesLoaded < loadedPages)
+
+      let combined = canonicalItems
+
+      if (!useCanonicalInteractions) {
+        const legacyItems: InteractionSummary[] = []
+        let legacyTotalPages = 1
+        for (let legacyPage = 1; legacyPage <= loadedPages; legacyPage += 1) {
+          const legacyPayload = await readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
+            `/api/customers/activities?entityId=${encodeURIComponent(entityId)}&page=${legacyPage}&pageSize=20&sortField=occurredAt&sortDir=desc`,
+          ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 }))
+          legacyItems.push(...(Array.isArray(legacyPayload.items) ? legacyPayload.items.map(normalizeLegacyActivity) : []))
+          legacyTotalPages = typeof legacyPayload.totalPages === 'number' ? legacyPayload.totalPages : legacyTotalPages
+          if (legacyPage >= legacyTotalPages) break
+        }
+        const rangeStartDate = computeRangeStart(dateRange)
+        const filteredLegacy = legacyItems.filter((item) => {
+          if (activeTypes.length > 0 && !activeTypes.includes(item.interactionType)) return false
+          if (!matchesSearch(item, search)) return false
+          return isWithinRange(item, rangeStartDate)
+        })
+        const deduped = new Map<string, InteractionSummary>()
+        ;[...canonicalItems, ...filteredLegacy].forEach((item) => {
+          if (!deduped.has(item.id)) deduped.set(item.id, item)
+        })
+        combined = Array.from(deduped.values())
+        firstPageHasMore = firstPageHasMore || legacyTotalPages > loadedPages
+      }
+
+      setActivities(sortActivities(combined, sortMode))
+      setHasMore(firstPageHasMore)
+    } catch (loadError) {
+      setActivities([])
+      setHasMore(false)
+      setError(t('customers.activityLog.error', 'Failed to load activity history'))
+    } finally {
+      setLoading(false)
+    }
+  }, [activeTypes, dateRange, entityId, loadedPages, search, sortMode, t, useCanonicalInteractions])
+
+  React.useEffect(() => {
+    void loadHistory()
+  }, [loadHistory, refreshKey])
+
+  React.useEffect(() => {
+    setLoadedPages(1)
+  }, [activeTypes, dateRange, entityId, search, sortMode, useCanonicalInteractions])
+
+  const filteredLabel = activeTypes.length > 0
+    ? activeTypes.map((type) => t(`customers.timeline.filter.${type}`, type)).join(', ')
+    : t('customers.timeline.filter.all', 'All')
+
+  const handleTypeToggle = React.useCallback((type: string) => {
+    setActiveTypes((current) => (
+      current.includes(type)
+        ? current.filter((entry) => entry !== type)
+        : [...current, type]
+    ))
+  }, [])
+
+  const handleLoadMore = React.useCallback(() => {
+    setLoadedPages((current) => current + 1)
+  }, [])
+
+  return (
+    <div className="rounded-xl border bg-card">
+      <div className="flex items-center gap-2 border-b px-5 py-4">
+        <Clock3 className="size-4 text-muted-foreground" />
+        <div className="min-w-0">
+          <h3 className="text-base font-semibold text-foreground">
+            {t('customers.activityLog.title', 'Activity history')}
+          </h3>
+          <p className="text-xs text-muted-foreground">
+            {t('customers.timeline.history.filtered', 'filtered: {{types}} · {{count}} results', {
+              types: filteredLabel,
+              count: activities.length,
+            })}
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4 px-5 py-4">
+        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+          <div className="relative w-full max-w-md">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={searchInput}
+              onChange={(event) => {
+                setSearchInput(event.target.value)
+              }}
+              placeholder={t('customers.activityLog.searchPlaceholder', 'Search by title, note, or author')}
+              className="h-9 pl-9"
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+              {t('customers.changelog.filter', 'Filter')}:
+            </span>
+            {TYPE_FILTERS.map((filter) => {
+              const isActive = activeTypes.includes(filter.value)
+              return (
+                <Button
+                  key={filter.value}
+                  type="button"
+                  variant={isActive ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => handleTypeToggle(filter.value)}
+                  className="h-auto rounded-full px-2.5 py-1 text-xs"
+                >
+                  {t(filter.labelKey, filter.fallback)}
+                  <span className={isActive ? 'ml-1 text-primary-foreground/80' : 'ml-1 text-muted-foreground'}>
+                    {counts[filter.value] ?? 0}
+                  </span>
+                </Button>
+              )
+            })}
+
+            <select
+              value={dateRange}
+              onChange={(event) => {
+                setDateRange(event.target.value as '7d' | '30d' | '90d')
+              }}
+              className="h-8 rounded-lg border bg-background px-3 text-xs outline-none ring-offset-background focus:ring-2 focus:ring-ring"
+            >
+              <option value="7d">{t('customers.changelog.last7days', 'Last 7 days')}</option>
+              <option value="30d">{t('customers.changelog.last30days', 'Last 30 days')}</option>
+              <option value="90d">{t('customers.changelog.last90days', 'Last 90 days')}</option>
+            </select>
+
+            <select
+              value={sortMode}
+              onChange={(event) => {
+                setSortMode(event.target.value as 'recent' | 'title-asc' | 'title-desc')
+              }}
+              className="h-8 rounded-lg border bg-background px-3 text-xs outline-none ring-offset-background focus:ring-2 focus:ring-ring"
+            >
+              <option value="recent">{t('customers.activityLog.sort.recent', 'Sort: newest')}</option>
+              <option value="title-asc">{t('customers.activityLog.sort.titleAsc', 'Sort: Name A-Z')}</option>
+              <option value="title-desc">{t('customers.activityLog.sort.titleDesc', 'Sort: Name Z-A')}</option>
+            </select>
+          </div>
+        </div>
+
+        {loading && activities.length === 0 ? (
+          <LoadingMessage label={t('customers.people.detail.activities.loading', 'Loading activities…')} className="min-h-[220px] justify-center" />
+        ) : error ? (
+          <ErrorMessage label={error} />
+        ) : activities.length === 0 ? (
+          <TabEmptyState
+            title={t('customers.timeline.empty', 'No activities match the current filters.')}
+            description={t('customers.activityLog.emptyDescription', 'Try broadening the date range or removing some filters.')}
+          />
+        ) : (
+          <div className="space-y-4">
+            {activities.map((activity, index) => {
+              const currentYear = new Date(toTimelineTimestamp(activity)).getFullYear()
+              const previousYear = index > 0 ? new Date(toTimelineTimestamp(activities[index - 1])).getFullYear() : null
+              const showYearSeparator = previousYear !== null && currentYear !== previousYear
+              return (
+                <React.Fragment key={activity.id}>
+                  {showYearSeparator ? (
+                    <div className="flex items-center gap-3 py-1">
+                      <div className="h-px flex-1 bg-border" />
+                      <span className="text-xs font-semibold text-muted-foreground">· {currentYear} ·</span>
+                      <div className="h-px flex-1 bg-border" />
+                    </div>
+                  ) : null}
+                  <ActivityCard activity={activity} onOpen={onEditActivity} />
+                </React.Fragment>
+              )
+            })}
+
+            {hasMore ? (
+              <div className="pt-2 text-center">
+                <Button type="button" variant="link" size="sm" onClick={handleLoadMore} className="text-sm">
+                  {t('customers.activities.loadMore', 'Load more')}
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ActivityHistorySection

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

@@ -0,0 +1,67 @@
+'use client'
+
+import { InlineActivityComposer } from './InlineActivityComposer'
+import { PlannedActivitiesSection } from './PlannedActivitiesSection'
+import { ActivityHistorySection } from './ActivityHistorySection'
+import type { InteractionSummary } from './types'
+
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
+type ActivityLogTabProps = {
+  entityId: string
+  plannedActivities: InteractionSummary[]
+  onActivityCreated: () => void
+  onScheduleRequested: () => void
+  onMarkDone: (id: string) => void
+  onEditActivity: (activity: InteractionSummary) => void
+  onCancelActivity: (id: string) => void
+  runGuardedMutation?: GuardedMutationRunner
+  refreshKey?: number
+  useCanonicalInteractions?: boolean
+}
+
+export function ActivityLogTab({
+  entityId,
+  plannedActivities,
+  onActivityCreated,
+  onScheduleRequested,
+  onMarkDone,
+  onEditActivity,
+  onCancelActivity,
+  runGuardedMutation,
+  refreshKey = 0,
+  useCanonicalInteractions = false,
+}: ActivityLogTabProps) {
+  return (
+    <div className="space-y-4">
+      <InlineActivityComposer
+        entityType="company"
+        entityId={entityId}
+        onActivityCreated={onActivityCreated}
+        runGuardedMutation={runGuardedMutation}
+        onScheduleRequested={onScheduleRequested}
+        useCanonicalInteractions={useCanonicalInteractions}
+      />
+
+      <PlannedActivitiesSection
+        activities={plannedActivities}
+        onComplete={onMarkDone}
+        onSchedule={onScheduleRequested}
+        onEdit={onEditActivity}
+        onCancel={onCancelActivity}
+      />
+
+      <ActivityHistorySection
+        entityId={entityId}
+        useCanonicalInteractions={useCanonicalInteractions}
+        refreshKey={refreshKey}
+        onEditActivity={onEditActivity}
+      />
+    </div>
+  )
+}
+
+export default ActivityLogTab