@open-mercato/core 0.6.3-develop.3651.1.d3a548a5f1 → 0.6.3-develop.3660.1.53b73d5aa4

package/src/modules/customers/backend/customers/deals/pipeline/components/DealCard.tsx

@@ -0,0 +1,562 @@
+"use client"
+
+import * as React from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { AlertTriangle, Building2, Calendar, Clock, Mail, Phone, StickyNote } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import type { RowActionItem } from '@open-mercato/ui/backend/RowActions'
+import { DealCardMenu } from './DealCardMenu'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+export type DealCardPipelineState = {
+  openActivitiesCount: number
+  daysInCurrentStage: number
+  isStuck: boolean
+  isOverdue: boolean
+}
+
+export type DealCardAssociation = {
+  id: string
+  label: string
+}
+
+export type DealCardOwner = {
+  userId: string
+  label: string
+}
+
+export type DealCardData = {
+  id: string
+  title: string
+  status: string | null
+  valueAmount: number | null
+  valueCurrency: string | null
+  probability: number | null
+  expectedCloseAt: string | null
+  createdAt: string | null
+  /** ISO timestamp of last update — drives the "Updated (newest/oldest)" client-side sort fallback. */
+  updatedAt: string | null
+  owner: DealCardOwner | null
+  primaryCompany: DealCardAssociation | null
+  pipelineState: DealCardPipelineState
+}
+
+type DealCardProps = {
+  deal: DealCardData
+  selected: boolean
+  /**
+   * `true` whenever at least one deal anywhere on the board is selected. Forces the
+   * checkbox to render even when this card is not yet selected and not currently hovered,
+   * so the operator can multi-select without re-aiming at the small 16px target after
+   * every click. Without this, the second-click had to land precisely on the still-hidden
+   * checkbox area before the `:hover` made it visible, which is what the spec called
+   * "persistent visibility once any card is selected".
+   */
+  bulkSelectionActive?: boolean
+  /** Stable function called once per render to build the row-action items for this deal */
+  buildMenuItems: (deal: DealCardData) => RowActionItem[]
+  extraCompaniesCount?: number
+  extraOwners?: DealCardOwner[]
+  isActiveDrag?: boolean
+  onToggleSelect: (dealId: string) => void
+  onComposeActivity: (dealId: string, type: 'call' | 'email' | 'note') => void
+  onOpenDetail: (dealId: string) => void
+}
+
+const ACTIVITY_BADGE_CAP = 9
+const ACTIVITY_BADGE_WARNING_THRESHOLD = 9
+const AVATAR_STACK_MAX = 3
+
+// Hash-derived avatar accent classes that map to semantic DS tokens (no hardcoded oklch/hex).
+// Each entry uses the saturated `*-icon` background (Figma calls for vivid, not pale, avatars)
+// paired with white-on-tone text since `*-icon` tokens are saturated foreground colors. The
+// choice is deterministic-but-arbitrary — we only need stable visual differentiation between
+// different owners, not semantic mapping to status meanings.
+const AVATAR_ACCENT_CLASSES: string[] = [
+  'bg-status-info-icon text-white',
+  'bg-brand-violet text-brand-violet-foreground',
+  'bg-status-warning-icon text-white',
+  'bg-status-neutral-icon text-white',
+  'bg-status-success-icon text-white',
+  'bg-status-pink-icon text-white',
+]
+
+function hashAccent(seed: string): string {
+  // Deterministic hash (Java string-hash variant). The bit pattern is not cryptographically
+  // meaningful — it only needs to spread inputs across the palette indices.
+  let h = 0
+  for (let i = 0; i < seed.length; i += 1) {
+    h = ((h << 5) - h + seed.charCodeAt(i)) | 0
+  }
+  const idx = Math.abs(h) % AVATAR_ACCENT_CLASSES.length
+  return AVATAR_ACCENT_CLASSES[idx]
+}
+
+function splitCurrencyAmount(amount: number, currency: string | null): { display: string; code: string | null } {
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : null
+  try {
+    const formatter = new Intl.NumberFormat(undefined, {
+      style: 'decimal',
+      maximumFractionDigits: 0,
+      useGrouping: true,
+    })
+    return { display: formatter.format(amount), code }
+  } catch {
+    return { display: String(Math.round(amount)), code }
+  }
+}
+
+function formatProbability(value: number | null): string | null {
+  if (typeof value !== 'number' || Number.isNaN(value)) return null
+  return `${Math.min(Math.max(Math.round(value), 0), 100)}%`
+}
+
+const shortDateFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  day: '2-digit',
+})
+
+function formatShortDate(value: string | null): string | null {
+  if (!value) return null
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return shortDateFormatter.format(date)
+}
+
+function shortDealRef(id: string): string {
+  return `DEAL-${id.slice(0, 6).toUpperCase()}`
+}
+
+function DealCardImpl({
+  deal,
+  selected,
+  bulkSelectionActive = false,
+  buildMenuItems,
+  extraCompaniesCount = 0,
+  extraOwners,
+  isActiveDrag = false,
+  onToggleSelect,
+  onComposeActivity,
+  onOpenDetail,
+}: DealCardProps): React.ReactElement {
+  const menuItems = React.useMemo(() => buildMenuItems(deal), [buildMenuItems, deal])
+  const t = useT()
+  // useDraggable is significantly cheaper than useSortable: dnd-kit doesn't recompute sibling
+  // transforms during a drag. We don't reorder within a lane (sortBy controls order), so we just
+  // need a draggable handle that drops into a Lane droppable.
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: deal.id,
+    data: { type: 'deal' },
+  })
+  const dimmed = isActiveDrag || isDragging
+
+  // Note: no transform CSS — the DragOverlay shows the moving copy, while the source card stays
+  // visually in place (just dimmed). This removes per-frame transform recomputation.
+  const style: React.CSSProperties = {}
+
+  const activityCount = deal.pipelineState.openActivitiesCount
+  const activityBadgeLabel =
+    activityCount > 0
+      ? activityCount > ACTIVITY_BADGE_CAP
+        ? `${ACTIVITY_BADGE_CAP}+`
+        : String(activityCount)
+      : null
+  const activityWarning = activityCount >= ACTIVITY_BADGE_WARNING_THRESHOLD
+
+  const probabilityLabel = formatProbability(deal.probability)
+  const dateLabel = formatShortDate(deal.expectedCloseAt ?? deal.createdAt)
+  const stageDaysLabel = deal.pipelineState.isOverdue
+    ? translateWithFallback(t, 'customers.deals.kanban.card.overdueLabel', 'Overdue')
+    : translateWithFallback(t, 'customers.deals.kanban.card.daysInStage', 'in {days}d', {
+        days: deal.pipelineState.daysInCurrentStage,
+      })
+
+  const showOverdue = deal.pipelineState.isOverdue
+  const showStuck = !showOverdue && deal.pipelineState.isStuck
+
+  const handleSelectChange = (next: boolean | 'indeterminate') => {
+    if (typeof next === 'boolean' && next !== selected) {
+      onToggleSelect(deal.id)
+    }
+  }
+
+  const handleCardClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement
+    if (target.closest('[data-card-action="true"]')) return
+    // Once at least one card is selected the board is in "bulk-select mode" — clicking
+    // anywhere on a card toggles that card's selection rather than navigating to the
+    // detail page. This matches Gmail/Asana selection semantics and rescues the
+    // user-reported failure mode where a slight mis-aim at the 16px checkbox button
+    // navigated to the deal instead of adding it to the selection.
+    if (bulkSelectionActive) {
+      onToggleSelect(deal.id)
+      return
+    }
+    onOpenDetail(deal.id)
+  }
+
+  const handleActionClick = (type: 'call' | 'email' | 'note') => (event: React.MouseEvent) => {
+    event.stopPropagation()
+    onComposeActivity(deal.id, type)
+  }
+
+  // dnd-kit's `useDraggable` listeners set pointer capture on the card when a pointerdown lands
+  // anywhere inside it. With capture active, the subsequent `click` event's `target` is the card
+  // itself rather than the inner button/checkbox the user actually clicked — which made
+  // `handleCardClick`'s `closest('[data-card-action="true"]')` check return null, so every click
+  // inside Select / Call / Email / Note / kebab navigated to the deal detail instead of running
+  // the intended handler.
+  //
+  // We stop propagation of `onPointerDown` at the `data-card-action="true"` boundary so dnd-kit's
+  // listener never sees the pointerdown and never sets capture. React's `onClick` handlers on the
+  // children then run normally with the right `event.target`.
+  const stopPointerDown = React.useCallback((event: React.PointerEvent) => {
+    event.stopPropagation()
+  }, [])
+
+  const ariaLabel = translateWithFallback(t, 'customers.deals.kanban.card.aria', 'Deal: {title}', {
+    title: deal.title,
+  })
+  const ariaRoleDescription = translateWithFallback(
+    t,
+    'customers.deals.kanban.card.aria.roledescription',
+    'deal card',
+  )
+
+  const valuePieces =
+    deal.valueAmount !== null && Number.isFinite(deal.valueAmount)
+      ? splitCurrencyAmount(deal.valueAmount, deal.valueCurrency)
+      : null
+
+  // Probability pill tone tracks the probability VALUE, not stage state. Figma uses three
+  // tiers (nodes 982:369/417/674/745/797/928/1002):
+  //   <40%  → de-emphasized (gray bg + faded text) — Figma `bg-[#f4f5f7] text-[#808794]`
+  //   40-69% → warning tone (orange bg + warning text) — Figma `bg-[#fff2e0] text-[#fe9a00]`
+  //   ≥70%  → emphasized (gray bg + dark text) — Figma `bg-[#f4f5f7] text-[#474c5a]`
+  //
+  // Importantly the high-probability tier is NOT green: Figma keeps the neutral surface and
+  // signals confidence with darker foreground text instead. Stuck/overdue state is already
+  // surfaced by the separate badge above, so coloring this pill by stage state (the previous
+  // behavior) double-stacked the signal and made e.g. "80% on a red background" read as
+  // "80% is bad" — the inverse of intent.
+  const probabilityValue = typeof deal.probability === 'number' ? deal.probability : null
+  const probabilityPillClass =
+    probabilityValue !== null && probabilityValue >= 70
+      ? 'bg-muted text-foreground'
+      : probabilityValue !== null && probabilityValue >= 40
+        ? 'bg-status-warning-bg text-status-warning-text'
+        : 'bg-muted text-muted-foreground'
+
+  const activityBadgeClass = activityWarning
+    ? 'bg-status-warning-bg text-status-warning-text'
+    : 'bg-muted text-foreground'
+
+  const ownersStack: DealCardOwner[] = React.useMemo(() => {
+    if (!deal.owner) return extraOwners ?? []
+    return [deal.owner, ...(extraOwners ?? [])]
+  }, [deal.owner, extraOwners])
+
+  const visibleOwners = ownersStack.slice(0, AVATAR_STACK_MAX)
+  const ownerOverflow = ownersStack.length - visibleOwners.length
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      aria-label={ariaLabel}
+      aria-roledescription={ariaRoleDescription}
+      onClick={handleCardClick}
+      className={`group relative flex w-full flex-col gap-3 rounded-lg border border-border bg-card px-4 py-3.5 shadow-xs transition-shadow ${
+        dimmed
+          ? 'cursor-grabbing opacity-30'
+          : bulkSelectionActive
+            ? 'cursor-pointer hover:shadow-sm'
+            : 'cursor-grab hover:shadow-sm active:cursor-grabbing'
+      } ${selected ? 'ring-2 ring-accent-indigo' : ''}`}
+    >
+      <div className="flex items-start justify-between gap-2.5">
+        <div
+          data-card-action="true"
+          className={`mr-0.5 mt-0.5 flex shrink-0 transition-opacity ${
+            selected || bulkSelectionActive
+              ? 'opacity-100'
+              // `opacity-0` alone leaves the element in the DOM with hit-testable pointer
+              // areas — its `onPointerDown={stopPointerDown}` would then swallow drag
+              // starts whenever the operator grabs the card near the (invisible) checkbox,
+              // and dnd-kit never sees the gesture. Pairing with `pointer-events-none`
+              // lets the drag pass through while preserving tab/focus reachability (focus
+              // events ignore `pointer-events`), and the matching `group-hover` /
+              // `focus-within` variants restore hit testing the moment the affordance
+              // becomes visible. `[@media(hover:none)]` keeps it always-on for touch.
+              : 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto [@media(hover:none)]:opacity-100 [@media(hover:none)]:pointer-events-auto'
+          }`}
+          onClick={(event) => event.stopPropagation()}
+          onPointerDown={stopPointerDown}
+        >
+          <Checkbox
+            checked={selected}
+            onCheckedChange={handleSelectChange}
+            aria-label={translateWithFallback(t, 'customers.deals.kanban.card.aria.select', 'Select deal')}
+          />
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <h3 className="line-clamp-2 text-base font-semibold leading-normal text-foreground">
+            {deal.title}
+          </h3>
+          <span className="text-xs leading-normal text-muted-foreground">{shortDealRef(deal.id)}</span>
+        </div>
+        <div
+          className="flex shrink-0 items-center gap-2"
+          data-card-action="true"
+          onClick={(event) => event.stopPropagation()}
+          onPointerDown={stopPointerDown}
+        >
+          {activityBadgeLabel ? (
+            <span
+              className={`inline-flex items-center justify-center rounded-full px-2 py-px text-xs font-bold leading-normal ${activityBadgeClass}`}
+              aria-label={translateWithFallback(
+                t,
+                'customers.deals.kanban.card.aria.openActivities',
+                '{count} open activities',
+                { count: activityCount },
+              )}
+            >
+              {activityBadgeLabel}
+            </span>
+          ) : null}
+          <DealCardMenu
+            items={menuItems}
+            ariaLabel={translateWithFallback(
+              t,
+              'customers.deals.kanban.card.aria.menu',
+              'Deal actions',
+            )}
+          />
+        </div>
+      </div>
+
+      {showOverdue || showStuck ? (
+        <div>
+          {showOverdue ? (
+            <span className="inline-flex items-center gap-1.5 rounded-md bg-status-error-bg px-2.5 py-1 text-xs font-semibold leading-normal text-status-error-text">
+              <AlertTriangle className="size-3.5" aria-hidden="true" />
+              {translateWithFallback(t, 'customers.deals.kanban.card.statusOverdue', 'OVERDUE')}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1.5 rounded-md bg-status-warning-bg px-2.5 py-1 text-xs font-semibold leading-normal text-status-warning-text">
+              <Clock className="size-3.5" aria-hidden="true" />
+              {translateWithFallback(t, 'customers.deals.kanban.card.statusStuck', 'STUCK')}
+            </span>
+          )}
+        </div>
+      ) : null}
+
+      {/*
+        Quick-log activity actions. `customers.activities` are scoped to a parent entity
+        (person/company), so without a primary company on this deal the activity composer
+        has nowhere to anchor a new record. The page-level handler previously flashed a
+        toast and bailed silently, which was confusing — we surface the same constraint
+        here as a disabled-with-tooltip state so the operator can fix the underlying data.
+      */}
+      <div
+        data-card-action="true"
+        // See note on the checkbox wrapper above — pairing `opacity-0` with `pointer-events-none`
+        // is what restores drag-and-drop. Without it the (invisible) Call/Email/Note row sits in
+        // the middle of the card and intercepts every pointer-down, so dnd-kit never gets the
+        // gesture and the card snaps back to the source lane.
+        className="flex items-center gap-1 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto [@media(hover:none)]:opacity-100 [@media(hover:none)]:pointer-events-auto"
+        onClick={(event) => event.stopPropagation()}
+        onPointerDown={stopPointerDown}
+      >
+        {(() => {
+          const disabled = !deal.primaryCompany
+          const disabledTitle = disabled
+            ? translateWithFallback(
+                t,
+                'customers.deals.kanban.card.action.disabledNoCompany',
+                'Link a company to this deal before logging activities.',
+              )
+            : undefined
+          const baseClass =
+            'inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+          return (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                type="button"
+                onClick={handleActionClick('call')}
+                disabled={disabled}
+                title={disabledTitle}
+                aria-disabled={disabled || undefined}
+                className={baseClass}
+              >
+                <Phone className="size-3.5 shrink-0" aria-hidden="true" />
+                <span>{translateWithFallback(t, 'customers.deals.kanban.card.action.call', 'Call')}</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                type="button"
+                onClick={handleActionClick('email')}
+                disabled={disabled}
+                title={disabledTitle}
+                aria-disabled={disabled || undefined}
+                className={baseClass}
+              >
+                <Mail className="size-3.5 shrink-0" aria-hidden="true" />
+                <span>{translateWithFallback(t, 'customers.deals.kanban.card.action.email', 'Email')}</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                type="button"
+                onClick={handleActionClick('note')}
+                disabled={disabled}
+                title={disabledTitle}
+                aria-disabled={disabled || undefined}
+                className={baseClass}
+              >
+                <StickyNote className="size-3.5 shrink-0" aria-hidden="true" />
+                <span>{translateWithFallback(t, 'customers.deals.kanban.card.action.note', 'Note')}</span>
+              </Button>
+            </>
+          )
+        })()}
+      </div>
+
+      <div className="flex items-center justify-between gap-2.5">
+        {valuePieces ? (
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-lg font-bold leading-normal text-foreground">
+              {valuePieces.display}
+            </span>
+            {valuePieces.code ? (
+              <span className="text-sm font-semibold leading-normal text-muted-foreground">
+                {valuePieces.code}
+              </span>
+            ) : null}
+          </div>
+        ) : (
+          <span className="text-sm text-muted-foreground">
+            {translateWithFallback(t, 'customers.deals.kanban.card.noValue', 'No value')}
+          </span>
+        )}
+        {probabilityLabel ? (
+          <span
+            className={`inline-flex items-center rounded-md px-2.5 py-1 text-sm font-semibold leading-normal ${probabilityPillClass}`}
+            aria-label={translateWithFallback(
+              t,
+              'customers.deals.kanban.card.aria.probability',
+              'Probability: {value}',
+              { value: probabilityLabel },
+            )}
+          >
+            {probabilityLabel}
+          </span>
+        ) : null}
+      </div>
+
+      {deal.primaryCompany || extraCompaniesCount > 0 ? (
+        <div className="flex items-center gap-1.5">
+          {deal.primaryCompany ? (
+            <span className="inline-flex max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-muted px-2.5 py-1 text-sm font-semibold leading-normal text-foreground">
+              <Building2 className="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+              <span className="truncate">{deal.primaryCompany.label}</span>
+            </span>
+          ) : null}
+          {extraCompaniesCount > 0 ? (
+            <span
+              className="inline-flex shrink-0 items-center rounded-md bg-muted px-2.5 py-1 text-sm font-semibold leading-normal text-muted-foreground"
+              aria-label={translateWithFallback(
+                t,
+                'customers.deals.kanban.card.aria.moreCompanies',
+                '{count} more companies',
+                { count: extraCompaniesCount },
+              )}
+            >
+              +{extraCompaniesCount}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="h-px w-full bg-border" aria-hidden="true" />
+
+      <div className="flex items-center justify-between gap-2.5">
+        <div className="flex items-center gap-2 text-sm leading-normal">
+          {dateLabel ? (
+            <span className="inline-flex items-center gap-2">
+              <Calendar
+                className={`size-3.5 ${showOverdue ? 'text-status-error-icon' : 'text-muted-foreground'}`}
+                aria-hidden="true"
+              />
+              <span
+                className={
+                  showOverdue
+                    ? 'font-semibold text-status-error-text'
+                    : 'font-semibold text-foreground'
+                }
+              >
+                {dateLabel}
+              </span>
+            </span>
+          ) : null}
+          <span
+            className={
+              showOverdue
+                ? 'font-semibold text-status-error-text'
+                : 'font-normal text-muted-foreground'
+            }
+          >
+            {stageDaysLabel}
+          </span>
+        </div>
+        {ownersStack.length > 0 ? (
+          <div className="flex items-center">
+            {visibleOwners.map((owner, idx) => {
+              const accentClass = hashAccent(owner.userId)
+              return (
+                <Avatar
+                  key={`${owner.userId}-${idx}`}
+                  label={owner.label || owner.userId.slice(0, 2).toUpperCase()}
+                  size="sm"
+                  className={`size-7 text-xs font-bold ring-2 ring-card ${accentClass} ${idx > 0 ? '-ml-2.5' : ''}`}
+                />
+              )
+            })}
+            {ownerOverflow > 0 ? (
+              <Avatar
+                label={`+${ownerOverflow}`}
+                size="sm"
+                variant="monochrome"
+                className="size-7 -ml-2.5 text-xs font-bold ring-2 ring-card"
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+// Memoize so cards in lanes far from the drag don't re-render on drag-state changes.
+// Custom equality keeps the comparison cheap (we only re-render when something visible changes).
+export const DealCard = React.memo(DealCardImpl, (prev, next) => {
+  if (prev.deal !== next.deal) return false
+  if (prev.selected !== next.selected) return false
+  if (prev.bulkSelectionActive !== next.bulkSelectionActive) return false
+  if (prev.isActiveDrag !== next.isActiveDrag) return false
+  if (prev.buildMenuItems !== next.buildMenuItems) return false
+  if (prev.extraCompaniesCount !== next.extraCompaniesCount) return false
+  if (prev.extraOwners !== next.extraOwners) return false
+  // Callback identity changes do NOT trigger re-renders — they're stable handlers from the page
+  return true
+})
+
+export default DealCard