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

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

@@ -0,0 +1,158 @@
+'use client'
+import * as React from 'react'
+import { Phone, Mail, Users, StickyNote, User } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { AiActionChips } from './AiActionChips'
+import type { InteractionSummary } from './types'
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+interface ActivityTimelineProps {
+  activities: InteractionSummary[]
+  onEdit?: (activity: InteractionSummary) => void
+}
+
+export function ActivityTimeline({ activities, onEdit }: ActivityTimelineProps) {
+  const t = useT()
+
+  if (activities.length === 0) {
+    return (
+      <div className="py-6 text-center text-sm text-muted-foreground">
+        {t('customers.timeline.empty', 'No activities match the current filters.')}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {activities.map((activity, index) => {
+        const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
+        const activityYear = dateStr ? new Date(dateStr).getFullYear() : null
+        const prevDateStr = index > 0 ? (activities[index - 1].scheduledAt ?? activities[index - 1].occurredAt ?? activities[index - 1].createdAt) : null
+        const prevYear = prevDateStr ? new Date(prevDateStr).getFullYear() : null
+        const showYearSeparator = activityYear !== null && prevYear !== null && activityYear !== prevYear
+
+        return (
+          <React.Fragment key={activity.id}>
+            {showYearSeparator && (
+              <div className="flex items-center gap-3 py-3 px-5">
+                <div className="h-px flex-1 bg-border" />
+                <span className="text-xs font-semibold text-muted-foreground">
+                  {t('customers.activities.yearSeparator', '{year}', { year: activityYear })}
+                </span>
+                <div className="h-px flex-1 bg-border" />
+              </div>
+            )}
+            <TimelineEntry
+              activity={activity}
+              t={t}
+              withBorder={index < activities.length - 1}
+              onEdit={onEdit}
+            />
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+function TimelineEntry({
+  activity,
+  t,
+  withBorder,
+  onEdit,
+}: {
+  activity: InteractionSummary
+  t: TranslateFn
+  withBorder: boolean
+  onEdit?: (activity: InteractionSummary) => void
+}) {
+  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
+  const TypeIcon = TYPE_ICONS[activity.interactionType]
+  const title = activity.title ?? activity.body ?? activity.interactionType
+  const duration = activity.duration ? ` (${activity.duration} min)` : ''
+
+  return (
+    <div
+      className={`px-5 py-4 ${withBorder ? 'border-b border-border/60' : ''} ${onEdit ? 'cursor-pointer hover:bg-accent/50 transition-colors' : ''}`}
+      onClick={() => onEdit?.(activity)}
+      role={onEdit ? 'button' : undefined}
+      tabIndex={onEdit ? 0 : undefined}
+      onKeyDown={onEdit ? (e) => { if (e.key === 'Enter') onEdit(activity) } : undefined}
+    >
+      <div className="grid items-start gap-3" style={{ gridTemplateColumns: '72px 40px 1fr' }}>
+        {/* Column 1: Date */}
+        <div className="shrink-0 pt-0.5">
+          <span className="block text-xs font-bold leading-tight">
+            {formatRelativeDate(dateStr, t)}
+          </span>
+          <span className="block text-xs leading-tight text-muted-foreground">
+            {formatTime(dateStr)}
+          </span>
+        </div>
+
+        {/* Column 2: Type icon */}
+        <div className="flex size-10 items-center justify-center rounded-lg bg-muted shrink-0">
+          {TypeIcon ? <TypeIcon className="size-4 text-muted-foreground" /> : null}
+        </div>
+
+        {/* Column 3: Content */}
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm font-semibold leading-5">
+              {title}{duration}
+            </span>
+          </div>
+
+          {activity.body && activity.title && (
+            <p className="mt-1 text-sm text-muted-foreground">
+              {activity.body}
+            </p>
+          )}
+
+          {activity.authorName && (
+            <div className="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground">
+              <User className="size-3 shrink-0" />
+              <span>{t('customers.timeline.author', 'by {{name}}', { name: activity.authorName })}</span>
+            </div>
+          )}
+
+          <div className="mt-2">
+            <AiActionChips activityType={activity.interactionType} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatRelativeDate(isoString: string, t: TranslateFn): string {
+  try {
+    const date = new Date(isoString)
+    const now = new Date()
+    // Compare calendar dates (not time-based diff) to correctly handle same-day future times
+    const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+    const nowDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    const diffDays = Math.round((nowDay.getTime() - dateDay.getTime()) / (1000 * 60 * 60 * 24))
+
+    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' })
+  } catch {
+    return ''
+  }
+}
+
+function formatTime(isoString: string): string {
+  try {
+    return new Date(isoString).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  } catch {
+    return ''
+  }
+}

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

@@ -0,0 +1,163 @@
+'use client'
+import * as React from 'react'
+import { Phone, Mail, Users, StickyNote, SlidersHorizontal } 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 { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+
+const FILTER_TYPES = [
+  { type: 'call', icon: Phone },
+  { type: 'email', icon: Mail },
+  { type: 'meeting', icon: Users },
+  { type: 'note', icon: StickyNote },
+] as const
+
+type InteractionCounts = {
+  call: number
+  email: number
+  meeting: number
+  note: number
+  total: number
+}
+
+interface ActivityTimelineFiltersProps {
+  entityId: string | null
+  activeTypes: string[]
+  dateFrom: string
+  dateTo: string
+  onTypesChange: (types: string[]) => void
+  onDateFromChange: (value: string) => void
+  onDateToChange: (value: string) => void
+  onReset: () => void
+}
+
+export function ActivityTimelineFilters({
+  entityId,
+  activeTypes,
+  dateFrom,
+  dateTo,
+  onTypesChange,
+  onDateFromChange,
+  onDateToChange,
+  onReset,
+}: ActivityTimelineFiltersProps) {
+  const t = useT()
+  const hasActiveFilters = activeTypes.length > 0 || dateFrom || dateTo
+  const [counts, setCounts] = React.useState<InteractionCounts | null>(null)
+
+  React.useEffect(() => {
+    if (!entityId) return
+    const controller = new AbortController()
+    void (async () => {
+      try {
+        const nextCounts = await readApiResultOrThrow<InteractionCounts>(
+          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,
+          { signal: controller.signal },
+        )
+        setCounts(nextCounts)
+      } catch {
+        setCounts(null)
+      }
+    })()
+    return () => controller.abort()
+  }, [entityId])
+
+  const handleTypeToggle = React.useCallback((type: string) => {
+    if (activeTypes.includes(type)) {
+      onTypesChange(activeTypes.filter((filterType) => filterType !== type))
+    } else {
+      onTypesChange([...activeTypes, type])
+    }
+  }, [activeTypes, onTypesChange])
+
+  return (
+    <div className="flex flex-col gap-3 border-b border-border/60 pb-4 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-overline font-bold uppercase tracking-wider text-muted-foreground">
+          {t('customers.people.detail.activities.filterLabel', 'FILTER:')}
+        </span>
+
+        {FILTER_TYPES.map(({ type, icon: Icon }) => {
+          const isActive = activeTypes.includes(type)
+          const count = counts?.[type as keyof InteractionCounts]
+          return (
+            <Button
+              key={type}
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => handleTypeToggle(type)}
+              className={cn(
+                'h-7 rounded-full px-2.5 text-xs gap-1.5',
+                isActive
+                  ? 'border-foreground bg-background text-foreground'
+                  : 'border-border bg-background text-muted-foreground',
+              )}
+              aria-pressed={isActive}
+            >
+              <Icon className="size-2.5" />
+              <span className="font-semibold">{t(`customers.timeline.filter.${type}`, type)}</span>
+              {typeof count === 'number' && count > 0 ? (
+                <span className="rounded-full bg-muted px-1 text-overline leading-4 text-muted-foreground">
+                  {count}
+                </span>
+              ) : null}
+            </Button>
+          )
+        })}
+      </div>
+
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 rounded-md px-2.5 text-xs text-muted-foreground"
+          >
+            <SlidersHorizontal className="size-2.5" />
+            {t('customers.people.detail.activities.moreFilters', 'More')}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-72 space-y-3">
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium">
+              {t('customers.activities.filters.dateRange', 'Date range')}
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="date"
+                value={dateFrom}
+                onChange={(event) => onDateFromChange(event.target.value)}
+                className="h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                aria-label={t('customers.timeline.filter.from', 'From date')}
+              />
+              <span className="shrink-0 text-xs text-muted-foreground">—</span>
+              <input
+                type="date"
+                value={dateTo}
+                onChange={(event) => onDateToChange(event.target.value)}
+                className="h-8 w-full rounded-md border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                aria-label={t('customers.timeline.filter.to', 'To date')}
+              />
+            </div>
+          </div>
+
+          {hasActiveFilters ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onReset}
+              className="h-7 w-full text-xs"
+            >
+              {t('customers.activities.filters.clearAll', 'Clear filters')}
+            </Button>
+          ) : null}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+'use client'
+import * as React from 'react'
+import { Phone, Mail, Users, StickyNote } 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'
+
+const ACTIVITY_TYPES = [
+  { type: 'call', icon: Phone, labelKey: 'customers.activityComposer.types.call', fallback: 'Call' },
+  { type: 'email', icon: Mail, labelKey: 'customers.activityComposer.types.email', fallback: 'Email' },
+  { type: 'meeting', icon: Users, labelKey: 'customers.activityComposer.types.meeting', fallback: 'Meeting' },
+  { type: 'note', icon: StickyNote, labelKey: 'customers.activityComposer.types.note', fallback: 'Note' },
+] as const
+
+export type ActivityType = (typeof ACTIVITY_TYPES)[number]['type']
+
+interface ActivityTypeSelectorProps {
+  selectedType: ActivityType | null
+  onSelect: (type: ActivityType) => void
+}
+
+export function ActivityTypeSelector({ selectedType, onSelect }: ActivityTypeSelectorProps) {
+  const t = useT()
+
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      {ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {
+        const isSelected = selectedType === type
+        return (
+          <Button
+            key={type}
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onSelect(type)}
+            aria-pressed={isSelected}
+            className={cn(
+              'h-10 gap-2 rounded-lg',
+              isSelected
+                ? 'border-foreground bg-background text-foreground shadow-sm'
+                : 'border-border text-muted-foreground',
+            )}
+          >
+            <Icon className="size-4" />
+            {t(labelKey, fallback)}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { ACTIVITY_TYPES }

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

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import { Sparkles } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
+import { AI_TIMELINE_ACTIONS_BY_TYPE, resolveAiActions } from './aiActionCatalog'
+
+interface AiActionChipsProps {
+  activityType: string
+}
+
+export function AiActionChips({ activityType }: AiActionChipsProps) {
+  const t = useT()
+  const actions = resolveAiActions(activityType, AI_TIMELINE_ACTIONS_BY_TYPE)
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="flex items-center gap-0.5">
+        <span className="mr-1 text-xs text-muted-foreground">
+          {t('customers.ai.prefix', 'AI:')}
+        </span>
+        {actions.map((action, index) => (
+          <React.Fragment key={action.key}>
+            {index > 0 && <span className="text-xs text-muted-foreground/40">|</span>}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-auto inline-flex items-center gap-0.5 px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                >
+                  <Sparkles className="size-2.5" />
+                  {t(action.i18nKey, action.fallback)}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {t('customers.ai.comingSoon', 'Coming soon')}
+              </TooltipContent>
+            </Tooltip>
+          </React.Fragment>
+        ))}
+      </div>
+    </TooltipProvider>
+  )
+}