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

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

@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { isTerminalPipelineOutcomeLabel } from './pipelineStageUtils'
+
+type PipelineStageInfo = {
+  id: string
+  label: string
+  order: number
+  color?: string | null
+  icon?: string | null
+}
+
+type StageTransitionInfo = {
+  stageId: string
+  stageLabel: string
+  stageOrder: number
+  transitionedAt: string
+}
+
+type PipelineStepperProps = {
+  stages: PipelineStageInfo[]
+  transitions: StageTransitionInfo[]
+  currentStageId: string | null
+  pipelineName?: string | null
+  closureOutcome?: 'won' | 'lost' | null
+  footer?: React.ReactNode
+}
+
+function isTerminalOutcomeStage(stage: PipelineStageInfo): boolean {
+  return isTerminalPipelineOutcomeLabel(stage.label)
+}
+
+function formatTransitionDate(value: string, t: ReturnType<typeof useT>): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return t('customers.deals.detail.pipeline.current', 'current')
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+function formatStageSubtitle(
+  transition: StageTransitionInfo | null,
+  isCurrent: boolean,
+  t: ReturnType<typeof useT>,
+): string {
+  if (transition && isCurrent) {
+    return t('customers.deals.detail.pipeline.currentWithDate', '{{date}} · {{state}}', {
+      date: formatTransitionDate(transition.transitionedAt, t),
+      state: t('customers.deals.detail.pipeline.current', 'current'),
+    })
+  }
+  if (transition) return formatTransitionDate(transition.transitionedAt, t)
+  if (isCurrent) return t('customers.deals.detail.pipeline.current', 'current')
+  return '—'
+}
+
+export function PipelineStepper({
+  stages,
+  transitions,
+  currentStageId,
+  pipelineName,
+  closureOutcome = null,
+  footer = null,
+}: PipelineStepperProps) {
+  const t = useT()
+  const allStages = React.useMemo(
+    () => [...stages].sort((left, right) => left.order - right.order),
+    [stages],
+  )
+  const sortedStages = React.useMemo(
+    () => allStages.filter((stage) => !isTerminalOutcomeStage(stage)),
+    [allStages],
+  )
+  const transitionByStageId = React.useMemo(
+    () => new Map(transitions.map((transition) => [transition.stageId, transition])),
+    [transitions],
+  )
+  const lastVisibleTransitionStage = React.useMemo(() => {
+    const transitionedStageIds = new Set(transitions.map((transition) => transition.stageId))
+    const visibleTransitionStages = sortedStages.filter((stage) => transitionedStageIds.has(stage.id))
+    return visibleTransitionStages[visibleTransitionStages.length - 1] ?? null
+  }, [sortedStages, transitions])
+  const currentVisibleStage = React.useMemo(() => {
+    const exactVisibleStage = sortedStages.find((stage) => stage.id === currentStageId) ?? null
+    if (exactVisibleStage) return exactVisibleStage
+    const currentStage = allStages.find((stage) => stage.id === currentStageId) ?? null
+    if (currentStage && isTerminalOutcomeStage(currentStage)) {
+      const earlierVisibleStages = sortedStages.filter((stage) => stage.order < currentStage.order)
+      return earlierVisibleStages[earlierVisibleStages.length - 1] ?? sortedStages[sortedStages.length - 1] ?? null
+    }
+    return lastVisibleTransitionStage
+  }, [allStages, currentStageId, lastVisibleTransitionStage, sortedStages])
+  const currentIndex = currentVisibleStage ? sortedStages.findIndex((stage) => stage.id === currentVisibleStage.id) : -1
+  const compactStage = currentVisibleStage ?? sortedStages[0] ?? null
+  const renderClosedProgress = closureOutcome !== null
+  const progressValue = currentIndex >= 0 ? currentIndex + 1 : 0
+  const progressValueText = renderClosedProgress
+    ? closureOutcome === 'won'
+      ? t('customers.deals.detail.pipeline.ariaClosedWon', 'Pipeline closed — deal won.')
+      : t('customers.deals.detail.pipeline.ariaClosedLost', 'Pipeline closed — deal lost.')
+    : t('customers.deals.detail.pipeline.ariaValueText', 'Stage {{current}} of {{total}}: {{label}}', {
+        current: progressValue,
+        total: sortedStages.length,
+        label: currentVisibleStage?.label ?? t('customers.deals.detail.pipeline.noCurrent', 'no current stage'),
+      })
+  const progressLabel = pipelineName
+    ? t('customers.deals.detail.pipeline.ariaLabelNamed', 'Pipeline progress — {{name}}', { name: pipelineName })
+    : t('customers.deals.detail.pipeline.ariaLabel', 'Pipeline progress')
+
+  if (!sortedStages.length) return null
+
+  return (
+    <div
+      className="rounded-lg border border-border bg-card px-5 py-3.5 sm:px-6"
+      role="progressbar"
+      aria-label={progressLabel}
+      aria-valuemin={0}
+      aria-valuemax={sortedStages.length}
+      aria-valuenow={progressValue}
+      aria-valuetext={progressValueText}
+    >
+      <div className="mb-5 flex flex-wrap items-center gap-2 text-xs leading-none">
+        <p className="font-semibold uppercase tracking-[0.02em] text-muted-foreground">
+          {t('customers.deals.detail.pipeline.label', 'Pipeline stages')}
+        </p>
+        <span className="text-border">·</span>
+        <p className="font-normal text-muted-foreground">
+          {t('customers.deals.detail.pipeline.stageOf', 'Stage {{current}} of {{total}}', {
+            current: currentIndex >= 0 ? currentIndex + 1 : 0,
+            total: sortedStages.length,
+          })}
+        </p>
+        <span className="text-border">·</span>
+        <p className="font-normal text-muted-foreground">
+          {pipelineName ?? t('customers.deals.detail.pipeline.defaultName', 'Current pipeline')}
+        </p>
+      </div>
+
+      <div className="space-y-4 sm:hidden">
+        {compactStage ? (
+          <div
+            className="rounded-lg border border-border bg-muted/20 px-4 py-4"
+            aria-current={!renderClosedProgress && compactStage.id === currentVisibleStage?.id ? 'step' : undefined}
+          >
+            <div className="flex items-center gap-3">
+              <div
+                className={cn(
+                  'flex size-9 items-center justify-center rounded-full border-2 bg-background text-foreground',
+                  renderClosedProgress ? 'border-status-success-icon bg-status-success-icon text-white' : 'border-foreground',
+                )}
+              >
+                {renderClosedProgress ? (
+                  <Check className="size-4 stroke-[2.5]" />
+                ) : (
+                  <span className="text-sm font-semibold leading-none">
+                    {(currentIndex >= 0 ? currentIndex : 0) + 1}
+                  </span>
+                )}
+              </div>
+              <div className="min-w-0">
+                <div className="truncate text-sm font-semibold text-foreground">{compactStage.label}</div>
+                <div className="text-xs text-muted-foreground">
+                  {formatStageSubtitle(transitionByStageId.get(compactStage.id) ?? null, !renderClosedProgress, t)}
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="hidden min-h-[115px] items-start sm:flex">
+        {sortedStages.map((stage, index) => {
+          const transition = transitionByStageId.get(stage.id) ?? null
+          const isCurrent = !renderClosedProgress && currentVisibleStage?.id === stage.id
+          const isCompleted = renderClosedProgress
+            ? currentIndex >= 0 && index <= currentIndex
+            : !isCurrent && (transition !== null || (currentIndex >= 0 && index < currentIndex))
+          const isFuture = !isCurrent && !isCompleted
+          const isFirst = index === 0
+          const isLast = index === sortedStages.length - 1
+          const beforeFilled = renderClosedProgress ? index <= currentIndex : index <= currentIndex
+          const afterFilled = renderClosedProgress ? index < currentIndex : index < currentIndex
+
+          return (
+            <div
+              key={stage.id}
+              className="flex min-w-0 flex-1 flex-col items-center justify-center gap-2"
+              aria-current={isCurrent ? 'step' : undefined}
+            >
+              <div className="flex w-full items-center" aria-hidden="true">
+                <div
+                  className={cn(
+                    'h-[2px] flex-1',
+                    isFirst ? 'bg-transparent' : beforeFilled ? 'bg-status-success-icon' : 'bg-border/60',
+                  )}
+                />
+                <div
+                  className={cn(
+                    'mx-0 flex size-9 items-center justify-center rounded-full border-2 text-sm leading-none transition-colors',
+                    isCurrent && 'border-foreground bg-background font-bold text-foreground',
+                    isCompleted && !isCurrent && 'border-status-success-icon bg-status-success-icon text-white',
+                    isFuture && 'border-border bg-background font-medium text-muted-foreground',
+                  )}
+                >
+                  {isCompleted ? (
+                    <Check className="size-4 stroke-[2.5]" />
+                  ) : (
+                    <span>{index + 1}</span>
+                  )}
+                </div>
+                <div
+                  className={cn(
+                    'h-[2px] flex-1',
+                    isLast ? 'bg-transparent' : afterFilled ? 'bg-status-success-icon' : 'bg-border/60',
+                  )}
+                />
+              </div>
+              <div className="flex max-w-[12rem] flex-col items-center gap-0.5 text-center">
+                <div
+                  className={cn(
+                    'text-xs leading-[1.2]',
+                    isCurrent ? 'font-bold text-foreground' : isFuture ? 'font-medium text-muted-foreground' : 'font-semibold text-foreground',
+                  )}
+                >
+                  {stage.label}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {formatStageSubtitle(transition, isCurrent, t)}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {footer ? (
+        <div className="mt-5 border-t border-border/80 pt-4">
+          {footer}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,255 @@
+'use client'
+import * as React from 'react'
+import { Phone, Mail, Users, StickyNote, Clock, AlertCircle, CalendarClock, Check, MoreHorizontal, Plus } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import type { InteractionSummary } from './types'
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+interface PlannedActivitiesSectionProps {
+  activities: InteractionSummary[]
+  onComplete?: (id: string) => void
+  onSchedule?: () => void
+  onEdit?: (activity: InteractionSummary) => void
+  onCancel?: (id: string) => void
+}
+
+export function PlannedActivitiesSection({ activities, onComplete, onSchedule, onEdit, onCancel }: PlannedActivitiesSectionProps) {
+  const t = useT()
+
+  if (activities.length === 0) return null
+
+  const now = new Date()
+
+  const classified = activities.map((activity) => {
+    const scheduledDate = activity.scheduledAt ? new Date(activity.scheduledAt) : null
+    const isOverdue = scheduledDate ? scheduledDate < now : false
+    return { ...activity, isOverdue }
+  })
+
+  const overdue = classified.filter((a) => a.isOverdue)
+  const upcoming = classified.filter((a) => !a.isOverdue)
+
+  return (
+    <div className="rounded-lg border bg-card">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <CalendarClock className="size-4 text-muted-foreground" />
+          {t('customers.timeline.planned.title', 'Planned activities')}
+          <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+            {activities.length}
+          </span>
+          {overdue.length > 0 && (
+            <span className="flex items-center gap-1 text-xs font-medium text-destructive">
+              <AlertCircle className="size-3" />
+              {overdue.length} {t('customers.timeline.planned.overdueCount', 'overdue')}
+            </span>
+          )}
+        </div>
+        {onSchedule && (
+          <Button type="button" variant="outline" size="sm" className="h-7 text-xs" onClick={onSchedule}>
+            <Plus className="mr-1 size-3" />
+            {t('customers.timeline.planned.schedule', 'Schedule')}
+          </Button>
+        )}
+      </div>
+
+      {/* Items */}
+      <div className="divide-y">
+        {overdue.map((activity) => {
+          const TypeIcon = TYPE_ICONS[activity.interactionType]
+          return (
+            <div
+              key={activity.id}
+              className="flex items-center gap-3 border-l-2 border-l-destructive px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors"
+              onClick={() => onEdit?.(activity)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === 'Enter') onEdit?.(activity) }}
+            >
+              <div className="flex items-center justify-center size-8 rounded-full bg-destructive/10 shrink-0">
+                {TypeIcon ? <TypeIcon className="size-4 text-destructive" /> : <AlertCircle className="size-4 text-destructive" />}
+              </div>
+              <div className="min-w-0 flex-1">
+                <span className="text-sm font-medium block truncate">
+                  {activity.title ?? activity.body ?? activity.interactionType}
+                </span>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span className="inline-flex items-center gap-1 font-medium text-destructive">
+                    {t('customers.timeline.planned.overdue', 'Overdue')}
+                  </span>
+                  <span>
+                    {activity.scheduledAt ? formatRelativeOverdue(activity.scheduledAt, t) : ''}
+                  </span>
+                  {activity.authorName && (
+                    <>
+                      <span>·</span>
+                      <span>{activity.authorName}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              {onComplete && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-7 shrink-0 text-xs"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    onComplete(activity.id)
+                  }}
+                >
+                  <Check className="mr-1 size-3" />
+                  {t('customers.timeline.planned.markDone', 'Mark done')}
+                </Button>
+              )}
+              <Popover>
+                <PopoverTrigger asChild>
+                  <IconButton type="button" variant="ghost" size="xs" aria-label={t('customers.timeline.more', 'More')} onClick={(e) => e.stopPropagation()}>
+                    <MoreHorizontal className="size-3.5" />
+                  </IconButton>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-40 p-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-xs"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onEdit?.(activity)
+                    }}
+                  >
+                    {t('customers.timeline.planned.reschedule', 'Reschedule')}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-xs text-destructive hover:text-destructive"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onCancel?.(activity.id)
+                    }}
+                  >
+                    {t('customers.timeline.planned.cancel', 'Cancel')}
+                  </Button>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )
+        })}
+
+        {upcoming.map((activity) => {
+          const TypeIcon = TYPE_ICONS[activity.interactionType]
+          return (
+            <div
+              key={activity.id}
+              className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors"
+              onClick={() => onEdit?.(activity)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === 'Enter') onEdit?.(activity) }}
+            >
+              <div className="flex items-center justify-center size-8 rounded-full bg-muted shrink-0">
+                {TypeIcon ? <TypeIcon className="size-4 text-muted-foreground" /> : <Clock className="size-4 text-muted-foreground" />}
+              </div>
+              <div className="min-w-0 flex-1">
+                <span className="text-sm font-medium block truncate">
+                  {activity.title ?? activity.body ?? activity.interactionType}
+                </span>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>{activity.scheduledAt ? formatScheduledDate(activity.scheduledAt) : ''}</span>
+                  {activity.authorName && (
+                    <>
+                      <span>·</span>
+                      <span>{activity.authorName}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <IconButton type="button" variant="ghost" size="xs" aria-label={t('customers.timeline.more', 'More')} onClick={(e) => e.stopPropagation()}>
+                    <MoreHorizontal className="size-3.5" />
+                  </IconButton>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-40 p-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-xs"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onEdit?.(activity)
+                    }}
+                  >
+                    {t('customers.timeline.planned.reschedule', 'Reschedule')}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-xs text-destructive hover:text-destructive"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onCancel?.(activity.id)
+                    }}
+                  >
+                    {t('customers.timeline.planned.cancel', 'Cancel')}
+                  </Button>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function formatRelativeOverdue(isoString: string, t: TranslateFn): string {
+  try {
+    const date = new Date(isoString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+    if (diffDays <= 0) return t('customers.timeline.planned.overdueToday', 'due today')
+    if (diffDays === 1) return t('customers.timeline.planned.overdueSince', 'since yesterday')
+    return t('customers.timeline.planned.overdueDays', 'overdue {{days}} days', { days: diffDays })
+  } catch {
+    return ''
+  }
+}
+
+function formatScheduledDate(isoString: string): string {
+  try {
+    const date = new Date(isoString)
+    const now = new Date()
+    const tomorrow = new Date(now)
+    tomorrow.setDate(tomorrow.getDate() + 1)
+
+    const dayName = date.toLocaleDateString(undefined, { weekday: 'short' })
+    const dateStr = date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+    const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+
+    if (date.toDateString() === tomorrow.toDateString()) {
+      return `Tomorrow ${timeStr}`
+    }
+    return `${dayName}, ${dateStr} · ${timeStr}`
+  } catch {
+    return isoString
+  }
+}

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

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { Heart, EyeOff } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import type { InteractionSummary } from '../formConfig'
+import { computeHealthScore, HEALTH_BADGE_CLASSES, HEALTH_ICON_CLASSES } from './healthScoreUtils'
+
+type RelationshipHealthCardProps = {
+  interactions: InteractionSummary[]
+  onHide?: () => void
+}
+
+export function RelationshipHealthCard({ interactions, onHide }: RelationshipHealthCardProps) {
+  const t = useT()
+  const health = React.useMemo(() => computeHealthScore(interactions), [interactions])
+
+  return (
+    <div className="group relative rounded-lg border bg-card p-5">
+      <div className="flex items-center justify-between">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Heart className={cn('size-4', HEALTH_ICON_CLASSES[health.variant])} />
+          {t('customers.companies.detail.health.title', 'Relationship health')}
+        </h3>
+        {onHide && (
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={onHide}
+            className="opacity-0 transition-opacity group-hover:opacity-60"
+            aria-label={t('customers.companies.dashboard.hideTile', 'Hide tile')}
+          >
+            <EyeOff className="size-3.5" />
+          </IconButton>
+        )}
+      </div>
+      <div className="mt-4 flex items-center justify-center">
+        <div className="space-y-2 text-center">
+          <div className="relative inline-flex items-center justify-center">
+            <span className={cn('text-4xl font-bold', HEALTH_ICON_CLASSES[health.variant])}>{health.score}</span>
+            <span className="text-sm text-muted-foreground">/100</span>
+          </div>
+          <div>
+            <Badge className={cn('text-xs', HEALTH_BADGE_CLASSES[health.variant])}>
+              {t(`customers.companies.detail.health.${health.label}`, health.label)}
+            </Badge>
+          </div>
+          {health.lastContactDays !== null && (
+            <p className="text-xs text-muted-foreground">
+              {t('customers.companies.detail.health.lastContact', 'Last contact')}: {health.lastContactDays === 0
+                ? t('customers.health.today', 'today')
+                : t('customers.health.daysAgo', '{days} days ago', { days: health.lastContactDays })}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}