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

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

@@ -0,0 +1,338 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import type { InteractionSummary, ActivitySummary } from './types'
+
+interface MiniWeekCalendarProps {
+  entityId: string
+  useCanonicalInteractions?: boolean
+  refreshRef?: React.RefObject<(() => void) | null>
+}
+
+function getWeekDays(baseDate: Date): Date[] {
+  const day = baseDate.getDay()
+  const monday = new Date(baseDate)
+  monday.setDate(baseDate.getDate() - ((day === 0 ? 7 : day) - 1))
+  monday.setHours(0, 0, 0, 0)
+  const days: Date[] = []
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(monday)
+    d.setDate(monday.getDate() + i)
+    days.push(d)
+  }
+  return days
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function getDayLabels(t: ReturnType<typeof useT>): string[] {
+  return [
+    t('customers.calendar.day.mon', 'MON'),
+    t('customers.calendar.day.tue', 'TUE'),
+    t('customers.calendar.day.wed', 'WED'),
+    t('customers.calendar.day.thu', 'THU'),
+    t('customers.calendar.day.fri', 'FRI'),
+    t('customers.calendar.day.sat', 'SAT'),
+    t('customers.calendar.day.sun', 'SUN'),
+  ]
+}
+
+const INTERACTION_TYPE_COLORS: Record<string, string> = {
+  call: 'bg-chart-orange',
+  email: 'bg-chart-blue',
+  meeting: 'bg-chart-emerald',
+  task: 'bg-chart-violet',
+  note: 'bg-muted-foreground',
+}
+
+const INTERACTION_TYPE_FALLBACK_COLOR = 'bg-chart-orange'
+
+function dotColorForType(type: string, isToday: boolean): string {
+  if (isToday) return 'bg-background'
+  return INTERACTION_TYPE_COLORS[type] ?? INTERACTION_TYPE_FALLBACK_COLOR
+}
+
+export function MiniWeekCalendar({ entityId, useCanonicalInteractions = true, refreshRef }: MiniWeekCalendarProps) {
+  const t = useT()
+  const today = React.useMemo(() => new Date(), [])
+  const [weekOffset, setWeekOffset] = React.useState(0)
+  const [events, setEvents] = React.useState<InteractionSummary[]>([])
+
+  const baseDate = React.useMemo(() => {
+    const d = new Date(today)
+    d.setDate(d.getDate() + weekOffset * 7)
+    return d
+  }, [today, weekOffset])
+
+  const weekDays = React.useMemo(() => getWeekDays(baseDate), [baseDate])
+  const weekStart = weekDays[0]
+  const weekEnd = weekDays[6]
+
+  const monthLabel = React.useMemo(() => {
+    const month = baseDate.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+    return weekOffset === 0
+      ? t('customers.calendar.thisWeek', 'This week') + ' — ' + month
+      : month
+  }, [baseDate, t, weekOffset])
+
+  const [refreshKey, setRefreshKey] = React.useState(0)
+  const refresh = React.useCallback(() => setRefreshKey((k) => k + 1), [])
+
+  React.useEffect(() => {
+    if (refreshRef) (refreshRef as React.MutableRefObject<(() => void) | null>).current = refresh
+  }, [refresh, refreshRef])
+
+  React.useEffect(() => {
+    if (!entityId) return
+    const controller = new AbortController()
+    const rangeStart = new Date(weekStart)
+    rangeStart.setHours(0, 0, 0, 0)
+    const rangeEnd = new Date(weekEnd)
+    rangeEnd.setDate(rangeEnd.getDate() + 2)
+    rangeEnd.setHours(23, 59, 59, 999)
+
+    function isWithinRange(item: InteractionSummary): boolean {
+      const rawDate = item.scheduledAt ?? item.occurredAt ?? item.createdAt
+      if (!rawDate) return false
+      const eventDate = new Date(rawDate)
+      if (Number.isNaN(eventDate.getTime())) return false
+      return eventDate >= rangeStart && eventDate <= rangeEnd
+    }
+
+    async function loadCanonicalInteractions(): Promise<InteractionSummary[]> {
+      const items: InteractionSummary[] = []
+      let cursor: string | undefined
+      do {
+        const params = new URLSearchParams({
+          entityId,
+          sortField: 'occurredAt',
+          sortDir: 'desc',
+          limit: '100',
+          excludeInteractionType: 'task',
+          from: rangeStart.toISOString(),
+          to: rangeEnd.toISOString(),
+        })
+        if (cursor) params.set('cursor', cursor)
+        const payload = await readApiResultOrThrow<{
+          items?: InteractionSummary[]
+          nextCursor?: string
+        }>(`/api/customers/interactions?${params.toString()}`, { signal: controller.signal })
+        const pageItems = Array.isArray(payload?.items) ? payload.items : []
+        items.push(...pageItems)
+        cursor = typeof payload?.nextCursor === 'string' ? payload.nextCursor : undefined
+      } while (cursor)
+      return items.filter(isWithinRange)
+    }
+
+    async function loadLegacyActivities(): Promise<InteractionSummary[]> {
+      const items: InteractionSummary[] = []
+      let page = 1
+      let totalPages = 1
+      do {
+        const payload = await readApiResultOrThrow<{
+          items?: ActivitySummary[]
+          totalPages?: number
+        }>(
+          `/api/customers/activities?entityId=${encodeURIComponent(entityId)}&page=${page}&pageSize=100&sortField=occurredAt&sortDir=desc`,
+          { signal: controller.signal },
+        )
+        const pageItems = Array.isArray(payload?.items) ? payload.items : []
+        const mappedItems: InteractionSummary[] = pageItems.map((activity) => ({
+          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: null,
+          createdAt: activity.createdAt,
+          updatedAt: activity.createdAt,
+        }))
+        items.push(...mappedItems.filter(isWithinRange))
+        totalPages = typeof payload?.totalPages === 'number' ? payload.totalPages : totalPages
+        if (!pageItems.length) break
+        const oldestPageTimestamp = pageItems.reduce<number>((oldest, activity) => {
+          const rawDate = activity.occurredAt ?? activity.createdAt
+          const timestamp = rawDate ? new Date(rawDate).getTime() : Number.NaN
+          if (!Number.isFinite(timestamp)) return oldest
+          return Math.min(oldest, timestamp)
+        }, Number.POSITIVE_INFINITY)
+        if (Number.isFinite(oldestPageTimestamp) && oldestPageTimestamp < rangeStart.getTime()) {
+          break
+        }
+        page += 1
+      } while (page <= totalPages)
+      return items
+    }
+
+    void (async () => {
+      try {
+        const canonicalItems = await loadCanonicalInteractions()
+        if (useCanonicalInteractions) {
+          setEvents(canonicalItems)
+          return
+        }
+        const legacyItems = await loadLegacyActivities()
+        const seen = new Set<string>()
+        const merged: InteractionSummary[] = []
+        for (const item of [...canonicalItems, ...legacyItems]) {
+          if (seen.has(item.id)) continue
+          seen.add(item.id)
+          merged.push(item)
+        }
+        setEvents(merged.filter(isWithinRange))
+      } catch {
+        setEvents([])
+      }
+    })()
+    return () => controller.abort()
+  }, [entityId, weekStart, weekEnd, useCanonicalInteractions, refreshKey])
+
+  const eventsByDay = React.useMemo(() => {
+    const map = new Map<string, InteractionSummary[]>()
+    for (const event of events) {
+      const dateStr = event.scheduledAt ?? event.occurredAt ?? event.createdAt
+      if (!dateStr) continue
+      const key = new Date(dateStr).toDateString()
+      const list = map.get(key) ?? []
+      list.push(event)
+      map.set(key, list)
+    }
+    return map
+  }, [events])
+
+  // Selected day for summary (defaults to today)
+  const [selectedDay, setSelectedDay] = React.useState<Date | null>(null)
+  const activeDay = selectedDay ?? today
+
+  // Collect events for the active day + tomorrow for the summary list
+  const summaryEvents = React.useMemo(() => {
+    const result: Array<{ event: InteractionSummary; dayLabel: string; isToday: boolean }> = []
+    for (let offset = 0; offset <= 2 && result.length < 3; offset++) {
+      const d = new Date(activeDay)
+      d.setDate(d.getDate() + offset)
+      const dayEvents = eventsByDay.get(d.toDateString()) ?? []
+      const isActiveDay = offset === 0
+      const label = isActiveDay
+        ? ''
+        : offset === 1
+          ? t('customers.calendar.tomorrow', 'Tomorrow') + ' '
+          : d.toLocaleDateString(undefined, { weekday: 'short' }) + ' '
+      for (const ev of dayEvents) {
+        if (result.length >= 3) break
+        result.push({ event: ev, dayLabel: label, isToday: isActiveDay })
+      }
+    }
+    return result
+  }, [eventsByDay, activeDay, t])
+
+  const dayLabels = getDayLabels(t)
+
+  return (
+    <div className="rounded-lg border border-border/60 p-4">
+      {/* Header */}
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <Calendar className="size-4 text-muted-foreground" />
+          {monthLabel}
+        </div>
+        <div className="flex items-center gap-1">
+          <IconButton type="button" variant="ghost" size="xs" onClick={() => setWeekOffset((w) => w - 1)} aria-label={t('customers.calendar.previousWeek', 'Previous week')}>
+            <ChevronLeft className="size-3.5" />
+          </IconButton>
+          <IconButton type="button" variant="ghost" size="xs" onClick={() => setWeekOffset((w) => w + 1)} aria-label={t('customers.calendar.nextWeek', 'Next week')}>
+            <ChevronRight className="size-3.5" />
+          </IconButton>
+        </div>
+      </div>
+
+      {/* Day headers */}
+      <div className="grid grid-cols-7 mb-1">
+        {dayLabels.map((label) => (
+          <div key={label} className="text-center text-xs font-medium text-muted-foreground">
+            {label}
+          </div>
+        ))}
+      </div>
+
+      {/* Day cells — bordered grid like Figma */}
+      <div className="grid grid-cols-7 border rounded-lg overflow-hidden">
+        {weekDays.map((day) => {
+          const isToday = isSameDay(day, today)
+          const isSelected = selectedDay ? isSameDay(day, selectedDay) : isToday
+          const dayEvents = eventsByDay.get(day.toDateString()) ?? []
+          const hasEvents = dayEvents.length > 0
+          return (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              key={day.toISOString()}
+              onClick={() => setSelectedDay(isSameDay(day, selectedDay ?? today) ? null : day)}
+              className={cn(
+                'h-auto flex flex-col items-center border-r last:border-r-0 py-3 text-sm transition-colors cursor-pointer rounded-none',
+                isSelected ? 'bg-foreground text-background font-bold' : 'hover:bg-accent/50',
+              )}
+            >
+              <span className="text-base">{day.getDate()}</span>
+              {hasEvents && (
+                <div className="mt-1 flex gap-0.5">
+                  {dayEvents.slice(0, 3).map((ev, i) => (
+                    <span
+                      key={i}
+                      className={cn(
+                        'size-1 rounded-full',
+                        dotColorForType(ev.interactionType, isSelected),
+                      )}
+                    />
+                  ))}
+                </div>
+              )}
+            </Button>
+          )
+        })}
+      </div>
+
+      {/* Day summary — events for selected/active day + upcoming */}
+      {summaryEvents.length > 0 && (
+        <div className="mt-3 space-y-1.5 border-t pt-3">
+          {summaryEvents.map(({ event, dayLabel, isToday: isActiveDay }) => {
+            const dateStr = event.scheduledAt ?? event.occurredAt ?? event.createdAt
+            const time = dateStr ? new Date(dateStr).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }) : ''
+            return (
+              <div key={event.id} className="flex items-center gap-2 text-xs">
+                <span className={cn('size-1.5 rounded-full shrink-0', INTERACTION_TYPE_COLORS[event.interactionType] ?? (isActiveDay ? INTERACTION_TYPE_FALLBACK_COLOR : 'bg-muted-foreground'))} />
+                <span className="font-semibold text-muted-foreground shrink-0">
+                  {dayLabel}{time}
+                </span>
+                <span className="truncate">{event.title ?? event.body ?? event.interactionType}</span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,124 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type MobilePersonZone = 'details' | 'activity'
+
+export type MobilePersonDetailProps = {
+  zone1: React.ReactNode
+  zone2: React.ReactNode
+  defaultZone?: MobilePersonZone
+  /**
+   * Controls whether zone state is synced to the URL `?zone=` query param.
+   * Defaults to true on the page route so deep links round-trip.
+   */
+  syncToUrl?: boolean
+}
+
+const ZONES: Array<{ id: MobilePersonZone; labelKey: string; fallback: string }> = [
+  { id: 'details', labelKey: 'customers.people.mobile.zoneSwitcher.details', fallback: 'Details' },
+  { id: 'activity', labelKey: 'customers.people.mobile.zoneSwitcher.activity', fallback: 'Activity' },
+]
+
+export function MobilePersonDetail({
+  zone1,
+  zone2,
+  defaultZone = 'details',
+  syncToUrl = true,
+}: MobilePersonDetailProps) {
+  const t = useT()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const initialZone = React.useMemo<MobilePersonZone>(() => {
+    if (!syncToUrl) return defaultZone
+    const raw = searchParams?.get('zone')
+    if (raw === 'activity' || raw === 'details') return raw
+    return defaultZone
+    // Intentionally compute only from the initial searchParams snapshot; external URL updates
+    // (browser back, manual edit) are acceptable to be out of sync on mobile — local clicks
+    // own the zone state thereafter.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const [zone, setZone] = React.useState<MobilePersonZone>(initialZone)
+  const lastWrittenZoneRef = React.useRef<MobilePersonZone | null>(null)
+
+  const handleZoneChange = React.useCallback(
+    (next: MobilePersonZone) => {
+      setZone(next)
+      lastWrittenZoneRef.current = next
+      if (!syncToUrl) return
+      const params = new URLSearchParams(searchParams?.toString() ?? '')
+      if (next === defaultZone) {
+        params.delete('zone')
+      } else {
+        params.set('zone', next)
+      }
+      const query = params.toString()
+      router.replace(query.length ? `?${query}` : '?', { scroll: false })
+    },
+    [defaultZone, router, searchParams, syncToUrl],
+  )
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+      event.preventDefault()
+      const currentIndex = ZONES.findIndex((entry) => entry.id === zone)
+      if (currentIndex < 0) return
+      const offset = event.key === 'ArrowRight' ? 1 : -1
+      const nextIndex = (currentIndex + offset + ZONES.length) % ZONES.length
+      handleZoneChange(ZONES[nextIndex].id)
+    },
+    [handleZoneChange, zone],
+  )
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="tablist"
+        aria-label={t(
+          'customers.people.mobile.zoneSwitcher.ariaLabel',
+          'Zone selector',
+        )}
+        className="grid grid-cols-2 gap-1 rounded-lg border border-border/70 bg-muted/20 p-1"
+        onKeyDown={handleKeyDown}
+      >
+        {ZONES.map((entry) => {
+          const isActive = zone === entry.id
+          return (
+            <Button
+              key={entry.id}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`mobile-person-zone-${entry.id}`}
+              variant={isActive ? 'default' : 'ghost'}
+              className={cn(
+                'h-11 rounded-lg text-sm font-semibold',
+                isActive ? '' : 'text-muted-foreground',
+              )}
+              onClick={() => handleZoneChange(entry.id)}
+            >
+              {t(entry.labelKey, entry.fallback)}
+            </Button>
+          )
+        })}
+      </div>
+      <div
+        id={`mobile-person-zone-${zone}`}
+        role="tabpanel"
+        aria-labelledby={`mobile-person-zone-${zone}-tab`}
+      >
+        {zone === 'details' ? zone1 : zone2}
+      </div>
+    </div>
+  )
+}
+
+export default MobilePersonDetail

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

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from 'react'
+import { CalendarClock, Phone, FileText, EyeOff } 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 { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
+
+type NextStepCardProps = {
+  nextInteractionAt?: string | null
+  nextInteractionName?: string | null
+  onHide?: () => void
+}
+
+export function NextStepCard({ nextInteractionAt, nextInteractionName, onHide }: NextStepCardProps) {
+  const t = useT()
+
+  const daysUntil = React.useMemo(() => {
+    if (!nextInteractionAt) return null
+    const diff = new Date(nextInteractionAt).getTime() - Date.now()
+    return Math.ceil(diff / 86_400_000)
+  }, [nextInteractionAt])
+
+  if (!nextInteractionAt) {
+    return (
+      <div className="rounded-lg border bg-card p-5">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <CalendarClock className="size-4" />
+          {t('customers.companies.detail.nextStep.title', 'Next Step')}
+        </h3>
+        <p className="mt-3 text-sm text-muted-foreground">
+          {t('customers.companies.detail.nextStep.none', 'No upcoming interactions scheduled')}
+        </p>
+      </div>
+    )
+  }
+
+  const isOverdue = daysUntil !== null && daysUntil < 0
+  const countdownText = daysUntil !== null
+    ? daysUntil === 0
+      ? t('customers.companies.detail.nextStep.today', 'today')
+      : daysUntil > 0
+        ? t('customers.companies.detail.nextStep.in', 'in {days} days', { days: daysUntil })
+        : t('customers.companies.detail.nextStep.overdue', '{days} days overdue', { days: Math.abs(daysUntil) })
+    : null
+
+  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">
+          <CalendarClock className="size-4" />
+          {t('customers.companies.detail.nextStep.title', 'Next Step')}
+        </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-3">
+        <p className="font-semibold text-foreground">
+          {nextInteractionName || t('customers.companies.detail.nextStep.untitled', 'Scheduled interaction')}
+        </p>
+        {countdownText && (
+          <p className={cn('mt-1 text-sm', isOverdue ? 'font-medium text-destructive' : 'text-muted-foreground')}>
+            {countdownText}
+          </p>
+        )}
+      </div>
+
+      {/* Quick action buttons (disabled stubs) */}
+      <div className="mt-3 flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="button" variant="outline" size="sm" className="h-7 text-xs" disabled>
+              <Phone className="mr-1 size-3" />
+              {t('customers.companies.detail.nextStep.call', 'Call')}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t('customers.ai.comingSoon', 'Coming soon')}</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="button" variant="outline" size="sm" className="h-7 text-xs" disabled>
+              <FileText className="mr-1 size-3" />
+              {t('customers.companies.detail.nextStep.proposal', 'Proposal')}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t('customers.ai.comingSoon', 'Coming soon')}</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}