@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/SortByPopover.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from 'react'
+import { Tag } from 'lucide-react'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
+import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
+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 SortOption =
+  | 'updated_desc'
+  | 'updated_asc'
+  | 'created_desc'
+  | 'value_desc'
+  | 'value_asc'
+  | 'probability_desc'
+  | 'close_asc'
+  | 'owner_asc'
+
+export const SORT_LABEL_KEYS: Record<SortOption, { key: string; fallback: string }> = {
+  updated_desc: { key: 'customers.deals.kanban.sort.option.updatedNewest', fallback: 'Updated (newest)' },
+  updated_asc: { key: 'customers.deals.kanban.sort.option.updatedOldest', fallback: 'Updated (oldest)' },
+  created_desc: { key: 'customers.deals.kanban.sort.option.createdNewest', fallback: 'Created (newest)' },
+  value_desc: { key: 'customers.deals.kanban.sort.option.valueHigh', fallback: 'Value (high to low)' },
+  value_asc: { key: 'customers.deals.kanban.sort.option.valueLow', fallback: 'Value (low to high)' },
+  probability_desc: {
+    key: 'customers.deals.kanban.sort.option.probabilityHigh',
+    fallback: 'Probability (high to low)',
+  },
+  close_asc: { key: 'customers.deals.kanban.sort.option.closeSoonest', fallback: 'Close date (soonest)' },
+  owner_asc: { key: 'customers.deals.kanban.sort.option.ownerAsc', fallback: 'Owner (A → Z)' },
+}
+
+const SORT_ORDER: SortOption[] = [
+  'updated_desc',
+  'updated_asc',
+  'created_desc',
+  'value_desc',
+  'value_asc',
+  'probability_desc',
+  'close_asc',
+  'owner_asc',
+]
+
+const DEFAULT_SORT: SortOption = 'updated_desc'
+
+type SortByPopoverProps = {
+  value: SortOption
+  onApply: (next: SortOption) => void
+}
+
+export function SortByPopover({ value, onApply }: SortByPopoverProps): React.ReactElement {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<SortOption>(value)
+
+  React.useEffect(() => {
+    if (open) setDraft(value)
+  }, [open, value])
+
+  const chipLabel = translateWithFallback(t, 'customers.deals.kanban.sort.label', 'Sort')
+  const chipValue = translateWithFallback(t, SORT_LABEL_KEYS[value].key, SORT_LABEL_KEYS[value].fallback)
+
+  const handleApply = () => {
+    onApply(draft)
+    setOpen(false)
+  }
+
+  // Cmd/Ctrl+Enter from anywhere inside the popover confirms — parity with the dialog
+  // primary-action shortcut (`AGENTS.md` UI Interaction rules).
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleApply()
+    }
+  }
+
+  const footerLeft = (
+    <span>
+      {translateWithFallback(
+        t,
+        'customers.deals.kanban.sort.defaultHint',
+        'Default: {label}',
+        {
+          label: translateWithFallback(
+            t,
+            SORT_LABEL_KEYS[DEFAULT_SORT].key,
+            SORT_LABEL_KEYS[DEFAULT_SORT].fallback,
+          ),
+        },
+      )}
+    </span>
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <ChipButton label={chipLabel} value={chipValue} active={value !== DEFAULT_SORT} />
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-96 rounded-2xl border-border bg-transparent p-0 shadow-xl"
+        align="end"
+        onKeyDown={handleKeyDown}
+      >
+        <FilterPopoverShell
+          title={translateWithFallback(t, 'customers.deals.kanban.sort.title', 'Sort by')}
+          leadingIcon={<Tag className="size-4" />}
+          onClose={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+          onApply={handleApply}
+          footerLeft={footerLeft}
+        >
+          <RadioGroup
+            value={draft}
+            onValueChange={(next) => setDraft(next as SortOption)}
+            className="gap-0"
+          >
+            {SORT_ORDER.map((option) => {
+              const isSelected = draft === option
+              const isDefault = option === DEFAULT_SORT
+              const rowClass = isSelected ? 'bg-muted' : 'bg-card'
+              const inputId = `sort-by-${option}`
+              return (
+                <label
+                  key={option}
+                  htmlFor={inputId}
+                  className={`flex w-full cursor-pointer items-center gap-3 rounded-md px-4 py-2.5 text-left transition-colors hover:bg-muted ${rowClass}`}
+                >
+                  <Radio id={inputId} value={option} />
+                  <div className="flex min-w-0 flex-1 flex-col gap-px">
+                    <span
+                      className={`text-sm leading-normal text-foreground ${
+                        isSelected ? 'font-semibold' : 'font-normal'
+                      }`}
+                    >
+                      {translateWithFallback(
+                        t,
+                        SORT_LABEL_KEYS[option].key,
+                        SORT_LABEL_KEYS[option].fallback,
+                      )}
+                    </span>
+                    {isDefault && isSelected ? (
+                      <span className="text-xs font-normal leading-normal text-muted-foreground">
+                        {translateWithFallback(t, 'customers.deals.kanban.sort.default', 'Default')}
+                      </span>
+                    ) : null}
+                  </div>
+                </label>
+              )
+            })}
+          </RadioGroup>
+        </FilterPopoverShell>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default SortByPopover

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

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
+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'
+
+/**
+ * Filter options exposed to the operator.
+ *
+ * The deal `status` column accepts the historical 4-value enum (`open` | `closed` | `win` |
+ * `loose`), but the codebase only ever **writes** `loose` for a lost deal — `closed` was a
+ * latent unused state from an earlier iteration. Exposing a separate "Lost (closed)" filter
+ * option therefore filtered to nothing and confused operators. We display a single "Lost"
+ * choice and intentionally map it to the canonical wire value `loose` so the filter matches
+ * what the rest of the app actually persists. (Renaming the column / migrating the data to
+ * `lost` is a deeper data-model change tracked separately.)
+ */
+const STATUS_OPTIONS: Array<{
+  value: string
+  labelKey: string
+  labelFallback: string
+  /** Tone selects the small ●-dot color on the pill (per Figma: green / amber / gray) */
+  dotClass: string
+}> = [
+  {
+    value: 'open',
+    labelKey: 'customers.deals.kanban.filter.status.open',
+    labelFallback: 'Open',
+    dotClass: 'bg-status-success-icon',
+  },
+  {
+    value: 'win',
+    labelKey: 'customers.deals.kanban.filter.status.won',
+    labelFallback: 'Won',
+    dotClass: 'bg-status-warning-icon',
+  },
+  {
+    value: 'loose',
+    labelKey: 'customers.deals.kanban.filter.status.lost',
+    labelFallback: 'Lost',
+    dotClass: 'bg-status-neutral-icon',
+  },
+]
+
+type StatusFilterPopoverProps = {
+  values: string[]
+  onApply: (next: string[]) => void
+}
+
+export function StatusFilterPopover({ values, onApply }: StatusFilterPopoverProps): React.ReactElement {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<string[]>(values)
+
+  React.useEffect(() => {
+    if (open) setDraft(values)
+  }, [open, values])
+
+  const chipLabel = translateWithFallback(t, 'customers.deals.kanban.filter.status', 'Status')
+  const chipValue =
+    values.length === 0
+      ? translateWithFallback(t, 'customers.deals.kanban.filter.all', 'All')
+      : values
+          .map((value) => {
+            const option = STATUS_OPTIONS.find((entry) => entry.value === value)
+            return option
+              ? translateWithFallback(t, option.labelKey, option.labelFallback)
+              : value
+          })
+          .join(', ')
+
+  const toggleDraft = (value: string) => {
+    setDraft((prev) =>
+      prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value],
+    )
+  }
+
+  const handleApply = () => {
+    onApply(draft)
+    setOpen(false)
+  }
+
+  // Cmd/Ctrl+Enter from anywhere inside the popover confirms — parity with the dialog
+  // primary-action shortcut (`AGENTS.md` UI Interaction rules).
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleApply()
+    }
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <ChipButton label={chipLabel} 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={
+            <>
+              <span className="font-bold">
+                {translateWithFallback(t, 'customers.deals.kanban.filter.status.title.label', 'Filter : ')}
+              </span>
+              <span className="font-normal">
+                {translateWithFallback(t, 'customers.deals.kanban.filter.status', 'Status')}
+              </span>
+            </>
+          }
+          onClose={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+          onApply={handleApply}
+          footerLeft={
+            <span>
+              {draft.length}{' '}
+              {translateWithFallback(t, 'customers.deals.kanban.filter.selected', 'selected')}
+            </span>
+          }
+        >
+          <span className="text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground">
+            {translateWithFallback(t, 'customers.deals.kanban.filter.status', 'Status')}
+          </span>
+          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-2">
+            {STATUS_OPTIONS.map((option) => {
+              const isSelected = draft.includes(option.value)
+              const label = translateWithFallback(t, option.labelKey, option.labelFallback)
+              return (
+                <Button
+                  key={option.value}
+                  type="button"
+                  variant="ghost"
+                  size="2xs"
+                  onClick={() => toggleDraft(option.value)}
+                  aria-pressed={isSelected}
+                  className={`gap-1.5 rounded-full px-2.5 py-1.5 text-xs leading-normal ${
+                    isSelected
+                      ? 'bg-muted font-semibold text-foreground'
+                      : 'border border-border bg-card font-normal text-muted-foreground hover:bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`inline-block size-2 shrink-0 rounded-full ${option.dotClass}`}
+                    aria-hidden="true"
+                  />
+                  <span>{label}</span>
+                  {isSelected ? (
+                    <X className="size-2.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+                  ) : null}
+                </Button>
+              )
+            })}
+          </div>
+        </FilterPopoverShell>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default StatusFilterPopover

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

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+export type KanbanView = 'kanban' | 'list'
+
+type ViewTabsRowProps = {
+  active: KanbanView
+  className?: string
+}
+
+const VIEW_KANBAN_HREF = '/backend/customers/deals/pipeline'
+const VIEW_LIST_HREF = '/backend/customers/deals'
+
+export function ViewTabsRow({ active, className }: ViewTabsRowProps): React.ReactElement {
+  const t = useT()
+  const labels = {
+    kanban: translateWithFallback(t, 'customers.deals.kanban.view.kanban', 'Kanban'),
+    list: translateWithFallback(t, 'customers.deals.kanban.view.list', 'List'),
+  }
+
+  const baseTab =
+    'inline-flex items-center px-3.5 py-2.5 text-sm leading-normal transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+  const activeTab = 'border-b-2 border-foreground font-semibold text-foreground'
+  const inactiveTab = 'border-b-2 border-transparent font-normal text-muted-foreground hover:text-foreground'
+
+  // Renders the active tab as a non-navigating `<span>` and the inactive tab as a `<Link>`,
+  // so the user can always round-trip between kanban and list from either page. Previously
+  // the kanban tab was a hardcoded `<span>` because the row was only rendered on the kanban
+  // page — adding it to the list page (item 7 of the SPEC-048 UX review) requires it to
+  // navigate back to /pipeline.
+  const isKanbanActive = active === 'kanban'
+  const isListActive = active === 'list'
+
+  return (
+    <div
+      role="tablist"
+      aria-label={translateWithFallback(t, 'customers.deals.kanban.view.tablistLabel', 'Deals views')}
+      className={`flex items-end gap-1 border-b border-border ${className ?? ''}`.trim()}
+    >
+      {isKanbanActive ? (
+        <span
+          role="tab"
+          aria-selected={true}
+          className={`${baseTab} ${activeTab}`}
+        >
+          {labels.kanban}
+        </span>
+      ) : (
+        <Link
+          href={VIEW_KANBAN_HREF}
+          role="tab"
+          aria-selected={false}
+          className={`${baseTab} ${inactiveTab}`}
+        >
+          {labels.kanban}
+        </Link>
+      )}
+      {isListActive ? (
+        <span
+          role="tab"
+          aria-selected={true}
+          className={`${baseTab} ${activeTab}`}
+        >
+          {labels.list}
+        </span>
+      ) : (
+        <Link
+          href={VIEW_LIST_HREF}
+          role="tab"
+          aria-selected={false}
+          className={`${baseTab} ${inactiveTab}`}
+        >
+          {labels.list}
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export default ViewTabsRow

package/src/modules/customers/backend/customers/deals/pipeline/components/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * Default kanban lane width in pixels (matches SPEC-048 Figma node 982:335). Operators can
+ * override per-lane via the drag-resize handle; this constant is the fallback used when no
+ * override is recorded.
+ *
+ * Centralised here so the value can't drift between the Lane wrapper, the AddStageLane CTA,
+ * and the page-level DragOverlay — three places that previously hand-wrote `w-[308px]` and
+ * `style={{ width: '308px' }}` independently.
+ */
+export const LANE_WIDTH_PX = 308
+
+/**
+ * Tailwind utility class encoding `LANE_WIDTH_PX`. Use this in `className` templates;
+ * use `LANE_WIDTH_PX` in inline `style` blocks where the width is genuinely dynamic.
+ */
+export const LANE_WIDTH_CLASS = 'w-[308px]'