@open-mercato/core 0.6.3-develop.3651.1.d3a548a5f1 → 0.6.3-develop.3653.1.b8558737ae

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

@@ -0,0 +1,214 @@
+"use client"
+
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { MoreVertical } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import type { RowActionItem } from '@open-mercato/ui/backend/RowActions'
+
+type DealCardMenuProps = {
+  items: RowActionItem[]
+  ariaLabel: string
+}
+
+const MENU_GAP = 6
+
+// Right-aligned shortcut hint inside a menu row. Mirrors the Figma deal-card menu
+// (node 1045:12254), which shows ⏎ for Open, E for Edit, ⌘D for Duplicate.
+// `aria-hidden="true"` keeps the kbd out of the menu item's accessible name —
+// without this the menu item reads as "Open deal ↵" instead of "Open deal" and
+// `getByRole('menuitem', { name: 'Open deal', exact: true })` fails in tests.
+function MenuShortcut({ children }: { children: React.ReactNode }): React.ReactElement {
+  return (
+    <kbd
+      aria-hidden="true"
+      className="ml-auto inline-flex items-center rounded border border-border bg-muted px-1.5 py-px font-mono text-[10px] font-medium leading-none text-muted-foreground"
+    >
+      {children}
+    </kbd>
+  )
+}
+
+// Map of menu-item id → keyboard shortcut hint. Stay in sync with `buildMenuItems` in
+// `pipeline/page.tsx` and with `matchesShortcut` below.
+const ITEM_SHORTCUTS: Record<string, React.ReactNode> = {
+  open: '↵',
+  edit: 'E',
+  duplicate: '⌘D',
+}
+
+function matchesShortcut(itemId: string, event: KeyboardEvent): boolean {
+  if (itemId === 'open' && event.key === 'Enter') return true
+  if (itemId === 'edit' && (event.key === 'e' || event.key === 'E') && !event.metaKey && !event.ctrlKey) return true
+  if (itemId === 'duplicate' && (event.key === 'd' || event.key === 'D') && (event.metaKey || event.ctrlKey)) return true
+  return false
+}
+
+export function DealCardMenu({ items, ariaLabel }: DealCardMenuProps): React.ReactElement | null {
+  const [open, setOpen] = React.useState(false)
+  const [anchor, setAnchor] = React.useState<DOMRect | null>(null)
+  const [direction, setDirection] = React.useState<'down' | 'up'>('down')
+  const btnRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+
+  const updatePosition = React.useCallback(() => {
+    if (!btnRef.current) return
+    const rect = btnRef.current.getBoundingClientRect()
+    setAnchor(rect)
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    setDirection(spaceBelow < 220 && spaceAbove > spaceBelow ? 'up' : 'down')
+  }, [])
+
+  React.useEffect(() => {
+    if (!open) return
+    updatePosition()
+    // Autofocus the first menu item once the portal has painted. We schedule this on the
+    // next frame so the `createPortal` render has actually mounted the buttons in the DOM.
+    requestAnimationFrame(() => {
+      const first = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]')
+      first?.focus()
+    })
+    function onDocClick(e: MouseEvent) {
+      const target = e.target as Node
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(target) &&
+        btnRef.current &&
+        !btnRef.current.contains(target)
+      ) {
+        setOpen(false)
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false)
+        btnRef.current?.focus()
+        return
+      }
+      // Hotkey wiring: when the menu is open and focus is inside it, ⏎/E/⌘D trigger
+      // the matching action. Skip when an editable surface owns focus.
+      const active = document.activeElement as HTMLElement | null
+      if (active) {
+        const tag = active.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || active.isContentEditable) return
+      }
+      if (!menuRef.current?.contains(active)) return
+      for (const item of items) {
+        if (item.id && matchesShortcut(item.id, e)) {
+          e.preventDefault()
+          setOpen(false)
+          item.onSelect?.()
+          return
+        }
+      }
+    }
+    function onScrollOrResize() {
+      updatePosition()
+    }
+    document.addEventListener('mousedown', onDocClick)
+    document.addEventListener('keydown', onKey)
+    window.addEventListener('scroll', onScrollOrResize, true)
+    window.addEventListener('resize', onScrollOrResize)
+    return () => {
+      document.removeEventListener('mousedown', onDocClick)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', onScrollOrResize, true)
+      window.removeEventListener('resize', onScrollOrResize)
+    }
+  }, [open, updatePosition])
+
+  // Arrow-key navigation between menu items. Scoped to the menu so it doesn't fight with
+  // global shortcuts when something else is focused.
+  const handleMenuKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const items = Array.from(
+      menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [],
+    )
+    if (items.length === 0) return
+    const currentIdx = items.findIndex((el) => el === document.activeElement)
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      const next = items[(currentIdx + 1 + items.length) % items.length]
+      next?.focus()
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      const prev = items[(currentIdx - 1 + items.length) % items.length]
+      prev?.focus()
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      items[0]?.focus()
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      items[items.length - 1]?.focus()
+    }
+  }, [])
+
+  if (!items.length) return null
+
+  return (
+    <div className="relative inline-flex" data-card-action="true" onClick={(event) => event.stopPropagation()}>
+      <IconButton
+        ref={btnRef}
+        variant="ghost"
+        size="xs"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={(event) => {
+          event.stopPropagation()
+          setOpen((previous) => !previous)
+          requestAnimationFrame(updatePosition)
+        }}
+        className="inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <MoreVertical className="size-3.5" aria-hidden="true" />
+      </IconButton>
+      {open && anchor && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={menuRef}
+              role="menu"
+              onKeyDown={handleMenuKeyDown}
+              className="fixed z-dropdown w-52 max-w-[calc(100vw-1rem)] rounded-md border border-border bg-background p-1.5 shadow-md"
+              style={{
+                top:
+                  direction === 'down'
+                    ? anchor.bottom + MENU_GAP
+                    : anchor.top - MENU_GAP,
+                left: Math.min(anchor.right, window.innerWidth - 8),
+                transform: `translate(-100%, ${direction === 'down' ? '0' : '-100%'})`,
+              }}
+            >
+              {items.map((item, idx) => {
+                const shortcut = item.id ? ITEM_SHORTCUTS[item.id] : null
+                return (
+                  <Button
+                    variant={item.destructive ? 'destructive-ghost' : 'ghost'}
+                    size="sm"
+                    key={item.id ?? `${item.label}-${idx}`}
+                    type="button"
+                    role="menuitem"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      setOpen(false)
+                      item.onSelect?.()
+                    }}
+                    className={`flex w-full items-center justify-start rounded-sm px-3 py-2 text-left text-sm leading-5 transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none ${
+                      item.destructive ? 'text-status-error-text hover:bg-status-error-bg/30' : 'text-foreground'
+                    }`}
+                  >
+                    <span className="flex-1 truncate">{item.label}</span>
+                    {shortcut ? <MenuShortcut>{shortcut}</MenuShortcut> : null}
+                  </Button>
+                )
+              })}
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  )
+}
+
+export default DealCardMenu

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

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from 'react'
+import { Check, Search } from 'lucide-react'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { ChipButton } from './ChipButton'
+import { FilterPopoverShell } from './FilterPopoverShell'
+
+export type EntityFilterOption = {
+  value: string
+  label: string
+}
+
+type EntityFilterPopoverProps = {
+  /** Chip label (e.g. "Owner") */
+  label: string
+  /** Currently selected ids */
+  values: string[]
+  /** Apply selected ids back to parent */
+  onApply: (next: string[]) => void
+  /** Optional initial set of options to show before the user types */
+  initialOptions?: EntityFilterOption[]
+  /** Async loader called whenever the search query changes (debounced) */
+  loadOptions: (query: string, signal: AbortSignal) => Promise<EntityFilterOption[]>
+  /** Labels for selected ids — used to display the chip value when only ids are known */
+  labelById?: Record<string, string>
+  /** Placeholder shown when nothing is selected */
+  anyLabel?: string
+  /** Title for the popover header */
+  title?: string
+}
+
+const DEBOUNCE_MS = 250
+
+/**
+ * Reusable async-search multi-select popover used by Owner / People / Companies kanban filter
+ * chips. Wraps the shared FilterPopoverShell so the chrome (rounded-2xl container, white header
+ * with bold title, muted footer with Cancel + Apply) matches the SPEC-048 mock surfaces for the
+ * Status (1045:11861) and Pipeline (1045:11917) popovers.
+ */
+export function EntityFilterPopover({
+  label,
+  values,
+  onApply,
+  initialOptions,
+  loadOptions,
+  labelById,
+  anyLabel,
+  title,
+}: EntityFilterPopoverProps): React.ReactElement {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<string[]>(values)
+  const [query, setQuery] = React.useState('')
+  const [options, setOptions] = React.useState<EntityFilterOption[]>(initialOptions ?? [])
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  // Reset draft to current applied state whenever the popover opens
+  React.useEffect(() => {
+    if (open) {
+      setDraft(values)
+      setQuery('')
+      setOptions(initialOptions ?? [])
+    }
+  }, [open, values, initialOptions])
+
+  // Debounced async option loader
+  React.useEffect(() => {
+    if (!open) return
+    const controller = new AbortController()
+    const handle = window.setTimeout(async () => {
+      setIsLoading(true)
+      try {
+        const items = await loadOptions(query, controller.signal)
+        setOptions(items)
+      } catch (err) {
+        if (controller.signal.aborted) return
+      } finally {
+        setIsLoading(false)
+      }
+    }, DEBOUNCE_MS)
+    return () => {
+      window.clearTimeout(handle)
+      controller.abort()
+    }
+  }, [open, query, loadOptions])
+
+  const chipValue = React.useMemo(() => {
+    if (values.length === 0) {
+      return anyLabel ?? translateWithFallback(t, 'customers.deals.kanban.filter.any', 'Any')
+    }
+    if (values.length === 1) {
+      const id = values[0]
+      const fromLabels = labelById?.[id]
+      if (fromLabels) return fromLabels
+      const fromOptions = options.find((option) => option.value === id)?.label
+      if (fromOptions) return fromOptions
+      return id.slice(0, 8)
+    }
+    return translateWithFallback(
+      t,
+      'customers.deals.kanban.filter.multipleSelected',
+      '{count} selected',
+      { count: values.length },
+    )
+  }, [values, anyLabel, labelById, options, t])
+
+  const toggleDraft = (id: string) => {
+    setDraft((prev) => (prev.includes(id) ? prev.filter((value) => value !== id) : [...prev, id]))
+  }
+
+  const handleApply = () => {
+    onApply(draft)
+    setOpen(false)
+  }
+  const handleClear = () => {
+    setDraft([])
+  }
+
+  // Cmd/Ctrl+Enter from anywhere inside the popover confirms — parity with the dialog
+  // primary-action shortcut (`AGENTS.md` UI Interaction rules). Also works while typing
+  // in the search box because keydown bubbles up to the PopoverContent root.
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleApply()
+    }
+  }
+
+  const headerTitle = title ?? translateWithFallback(
+    t,
+    'customers.deals.kanban.filter.title',
+    'Filter · {label}',
+    { label },
+  )
+
+  const footerLeft = (
+    <div className="flex items-center gap-3">
+      <span>
+        {draft.length === 0
+          ? translateWithFallback(t, 'customers.deals.kanban.filter.noneSelected', 'None selected')
+          : translateWithFallback(
+              t,
+              'customers.deals.kanban.filter.countSelected',
+              '{count} selected',
+              { count: draft.length },
+            )}
+      </span>
+      {draft.length > 0 ? (
+        <Button
+          type="button"
+          variant="link"
+          size="2xs"
+          onClick={handleClear}
+          className="h-auto px-0 text-xs font-medium leading-normal text-muted-foreground hover:text-foreground"
+        >
+          {translateWithFallback(t, 'customers.deals.kanban.filter.clear', 'Clear')}
+        </Button>
+      ) : null}
+    </div>
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <ChipButton label={label} value={chipValue} active={values.length > 0} />
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-96 rounded-2xl border-border bg-transparent p-0 shadow-xl"
+        align="start"
+        onKeyDown={handleKeyDown}
+      >
+        <FilterPopoverShell
+          title={headerTitle}
+          onClose={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+          onApply={handleApply}
+          footerLeft={footerLeft}
+          bodyClassName="flex flex-col bg-card"
+        >
+          <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+            <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={translateWithFallback(
+                t,
+                'customers.deals.kanban.filter.searchPlaceholder',
+                'Search…',
+              )}
+              className="h-7 w-full bg-transparent text-sm leading-normal text-foreground outline-none placeholder:text-muted-foreground"
+              autoFocus
+            />
+            {isLoading ? <Spinner className="size-3" /> : null}
+          </div>
+
+          <div className="max-h-64 overflow-y-auto">
+            {options.length === 0 && !isLoading ? (
+              <div className="px-4 py-6 text-center text-xs text-muted-foreground">
+                {translateWithFallback(t, 'customers.deals.kanban.filter.noResults', 'No matches')}
+              </div>
+            ) : (
+              <ul className="py-1">
+                {options.map((option) => {
+                  const checked = draft.includes(option.value)
+                  return (
+                    <li key={option.value}>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        role="checkbox"
+                        aria-checked={checked}
+                        onClick={() => toggleDraft(option.value)}
+                        className={`h-auto w-full justify-start gap-3 rounded-none px-4 py-2.5 text-left font-normal ${
+                          checked ? 'bg-muted/60' : 'bg-card'
+                        }`}
+                      >
+                        <span
+                          className={`flex size-4 shrink-0 items-center justify-center rounded-sm border ${
+                            checked
+                              ? 'border-accent-indigo bg-accent-indigo text-accent-indigo-foreground'
+                              : 'border-input bg-card'
+                          }`}
+                          aria-hidden="true"
+                        >
+                          {checked ? <Check className="size-3" /> : null}
+                        </span>
+                        <span
+                          className={`truncate text-sm leading-normal text-foreground ${
+                            checked ? 'font-semibold' : 'font-normal'
+                          }`}
+                        >
+                          {option.label}
+                        </span>
+                      </Button>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </div>
+        </FilterPopoverShell>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default EntityFilterPopover

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

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { ChipButton } from './ChipButton'
+
+export type KanbanFilterChip = {
+  id: 'owner' | 'people' | 'companies' | 'close'
+  label: string
+  value: string
+}
+
+type FilterBarRowProps = {
+  /** Popover-backed chips (Status, Pipeline) rendered first, in order */
+  leadingChips: React.ReactNode
+  /** Static (Phase-5-stubbed) chips */
+  chips: KanbanFilterChip[]
+  /** Right-aligned sort chip (popover-backed) */
+  sortNode: React.ReactNode
+  onChipClick: (chipId: KanbanFilterChip['id']) => void
+}
+
+export function FilterBarRow({
+  leadingChips,
+  chips,
+  sortNode,
+  onChipClick,
+}: FilterBarRowProps): React.ReactElement {
+  const t = useT()
+  // Note: the Figma mock includes a "+ Add filter" chip (1045:11987) that opens a picker for
+  // Tags / Source / Currency / Created date / Updated date / Last activity / custom fields.
+  // That picker is not wired up in this slice (it would need AdvancedFilterPanel integration),
+  // so the affordance is intentionally omitted instead of shipping a "coming next" toast.
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-y-2 rounded-lg bg-muted/40 px-3.5 py-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-overline font-bold uppercase leading-normal text-muted-foreground">
+          {translateWithFallback(t, 'customers.deals.kanban.filter.label', 'Filter')}:
+        </span>
+        {leadingChips}
+        {chips.map((chip) => (
+          <ChipButton
+            key={chip.id}
+            label={chip.label}
+            value={chip.value}
+            onClick={() => onChipClick(chip.id)}
+            ariaLabel={translateWithFallback(
+              t,
+              'customers.deals.kanban.filter.aria.chip',
+              'Filter by {label}',
+              { label: chip.label },
+            )}
+          />
+        ))}
+      </div>
+      <div className="ml-auto">{sortNode}</div>
+    </div>
+  )
+}
+
+export default FilterBarRow

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

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+type FilterPopoverShellProps = {
+  /** Title rendered in the header (e.g. "Filter · Status", "Sort by") */
+  title: React.ReactNode
+  /** Optional icon rendered before the title (Sort by uses a tag icon per Figma) */
+  leadingIcon?: React.ReactNode
+  /** Body content — sits between header and footer */
+  children: React.ReactNode
+  /** Footer left content — usually a "N selected" hint or "Default: …" subtitle */
+  footerLeft?: React.ReactNode
+  /** Called when the X close button is clicked */
+  onClose: () => void
+  /** Called when Cancel is clicked */
+  onCancel: () => void
+  /** Called when Apply (primary CTA) is clicked */
+  onApply: () => void
+  /** Override the primary CTA label (e.g. "Add" on the +Add-filter popover) */
+  applyLabel?: string
+  /** Body wrapper className override — defaults to standard padded white block */
+  bodyClassName?: string
+}
+
+/**
+ * Shared chrome for every kanban filter popover (Status, Pipeline, Sort, Owner, People,
+ * Companies, Close). Matches the SPEC-048 Figma popover surfaces (nodes 1045:11861,
+ * 1045:11917, 1045:12090): rounded-2xl outer, white header w/ bold title + close button,
+ * white body, muted footer with Cancel + Apply.
+ *
+ * Each consumer renders its own body — checkboxes, pills, radio rows, date picker, etc. —
+ * inside this shell, so the chrome stays identical across every filter surface and the
+ * styling delta lives only inside `children`.
+ */
+export function FilterPopoverShell({
+  title,
+  leadingIcon,
+  children,
+  footerLeft,
+  onClose,
+  onCancel,
+  onApply,
+  applyLabel,
+  bodyClassName,
+}: FilterPopoverShellProps): React.ReactElement {
+  const t = useT()
+  return (
+    <div className="flex flex-col overflow-hidden rounded-2xl bg-card">
+      <div className="flex items-center justify-between border-b border-border bg-card px-5 py-4">
+        <div className="flex items-center gap-2">
+          {leadingIcon ? (
+            <span className="flex size-4 items-center justify-center text-muted-foreground" aria-hidden="true">
+              {leadingIcon}
+            </span>
+          ) : null}
+          <span className="text-base font-bold leading-normal text-foreground">{title}</span>
+        </div>
+        <IconButton
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onClose}
+          aria-label={translateWithFallback(t, 'customers.deals.kanban.filter.close', 'Close')}
+        >
+          <X className="size-3.5" aria-hidden="true" />
+        </IconButton>
+      </div>
+
+      <div className={bodyClassName ?? 'flex flex-col gap-4 bg-card px-5 py-4'}>{children}</div>
+
+      <div className="flex items-center justify-between border-t border-border bg-muted px-5 py-3.5">
+        <div className="text-xs leading-normal text-muted-foreground">{footerLeft ?? null}</div>
+        <div className="flex items-center gap-6">
+          <Button
+            variant="outline"
+            type="button"
+            onClick={onCancel}
+            className="h-auto rounded-lg border-input bg-card px-4 py-2 text-sm font-semibold text-foreground"
+          >
+            {translateWithFallback(t, 'customers.deals.kanban.filter.cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={onApply}
+            className="h-auto rounded-lg bg-foreground px-5 py-2 text-sm font-semibold text-background hover:bg-foreground/90"
+          >
+            {applyLabel ?? translateWithFallback(t, 'customers.deals.kanban.filter.apply', 'Apply')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FilterPopoverShell