@open-mercato/core 0.6.3-develop.3635.1.e4a05c16e8 → 0.6.3-develop.3653.1.b8558737ae

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

@@ -0,0 +1,31 @@
+"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 { DashedTileButton } from './DashedTileButton'
+import { LANE_WIDTH_CLASS } from './constants'
+
+type AddStageLaneProps = {
+  onClick: () => void
+  disabled?: boolean
+}
+
+export function AddStageLane({ onClick, disabled = false }: AddStageLaneProps): React.ReactElement {
+  const t = useT()
+  const label = translateWithFallback(t, 'customers.deals.kanban.cta.newStage', 'New stage')
+
+  return (
+    <DashedTileButton
+      onClick={onClick}
+      disabled={disabled}
+      ariaLabel={label}
+      className={`${LANE_WIDTH_CLASS} flex-none flex-col rounded-xl px-3.5 py-5 text-muted-foreground hover:text-foreground min-h-[60vh]`}
+    >
+      <span className="text-3xl font-bold leading-none">+</span>
+      <span className="text-base font-semibold leading-normal">{label}</span>
+    </DashedTileButton>
+  )
+}
+
+export default AddStageLane

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

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from 'react'
+import { Download, Trash2, Workflow, UserCircle2, 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 BulkActionsBarProps = {
+  count: number
+  totalLabel: string | null
+  onChangeStage: () => void
+  onChangeOwner: () => void
+  onExportCsv: () => void
+  onDelete: () => void
+  onClear: () => void
+}
+
+export function BulkActionsBar({
+  count,
+  totalLabel,
+  onChangeStage,
+  onChangeOwner,
+  onExportCsv,
+  onDelete,
+  onClear,
+}: BulkActionsBarProps): React.ReactElement | null {
+  const t = useT()
+  // Global ESC clears the selection — matches the Gmail/Asana/Notion convention. The
+  // listener is only mounted while at least one deal is selected so we don't intercept
+  // ESC anywhere else on the kanban (e.g. inside dialogs/popovers, which all stopPropagation
+  // before their own ESC handlers fire). `count` is the only thing that gates "is the bar
+  // currently rendered?", and `onClear` is the page-level handler that empties the Set.
+  React.useEffect(() => {
+    if (count === 0) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      // Defer if the focus is inside an editable surface — typing ESC to abort a value
+      // edit shouldn't also clear the bulk selection.
+      const active = document.activeElement as HTMLElement | null
+      if (active) {
+        const tag = active.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || active.isContentEditable) return
+      }
+      event.preventDefault()
+      onClear()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [count, onClear])
+
+  if (count === 0) return null
+
+  return (
+    <div
+      role="region"
+      aria-label={translateWithFallback(
+        t,
+        'customers.deals.kanban.bulk.aria.bar',
+        'Bulk actions',
+      )}
+      className="fixed bottom-6 left-1/2 z-toast flex w-[min(960px,calc(100%-2rem))] -translate-x-1/2 items-center gap-3 rounded-lg bg-foreground px-4 py-3 text-background shadow-xl"
+    >
+      <IconButton
+        variant="ghost"
+        size="xs"
+        onClick={onClear}
+        aria-label={translateWithFallback(
+          t,
+          'customers.deals.kanban.bulk.aria.clear',
+          'Clear selection',
+        )}
+        className="inline-flex size-6 items-center justify-center rounded-md transition-colors hover:bg-background/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-foreground"
+      >
+        <X className="size-4" aria-hidden="true" />
+      </IconButton>
+
+      <span className="inline-flex size-7 items-center justify-center rounded-md bg-background/10 text-xs font-semibold">
+        {count}
+      </span>
+      <span className="text-sm font-medium">
+        {translateWithFallback(
+          t,
+          'customers.deals.kanban.bulk.selectedCount',
+          'selected',
+        )}
+      </span>
+      {totalLabel ? (
+        <span className="hidden text-sm text-background/80 sm:inline">
+          ·{' '}
+          {translateWithFallback(
+            t,
+            'customers.deals.kanban.bulk.totalValue',
+            'Total {value}',
+            { value: totalLabel },
+          )}
+        </span>
+      ) : null}
+
+      <div className="ml-auto flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          onClick={onChangeStage}
+          className="inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-background/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-foreground"
+        >
+          <Workflow className="size-4" aria-hidden="true" />
+          <span>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeStage',
+              'Change stage',
+            )}
+          </span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          onClick={onChangeOwner}
+          className="inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-background/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-foreground"
+        >
+          <UserCircle2 className="size-4" aria-hidden="true" />
+          <span>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeOwner',
+              'Change owner',
+            )}
+          </span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          onClick={onExportCsv}
+          className="inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-background/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-foreground"
+        >
+          <Download className="size-4" aria-hidden="true" />
+          <span>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.exportCsv',
+              'Export CSV',
+            )}
+          </span>
+        </Button>
+        <Button
+          variant="destructive-ghost"
+          size="sm"
+          type="button"
+          onClick={onDelete}
+          className="inline-flex items-center gap-1 rounded-md px-3 py-1 text-sm text-status-error-text transition-colors hover:bg-status-error-bg/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-foreground"
+        >
+          <Trash2 className="size-4" aria-hidden="true" />
+          <span>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.delete',
+              'Delete',
+            )}
+          </span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default BulkActionsBar

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

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from 'react'
+import { UserCircle2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+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 {
+  fetchAssignableStaffMembers,
+  type AssignableStaffMember,
+} from '../../../../../components/detail/assignableStaff'
+
+type ChangeOwnerDialogProps = {
+  open: boolean
+  selectedCount: number
+  isSubmitting: boolean
+  onClose: () => void
+  onConfirm: (userId: string | null) => void
+}
+
+export function ChangeOwnerDialog({
+  open,
+  selectedCount,
+  isSubmitting,
+  onClose,
+  onConfirm,
+}: ChangeOwnerDialogProps): React.ReactElement {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  const [items, setItems] = React.useState<AssignableStaffMember[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [selectedUserId, setSelectedUserId] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    setQuery('')
+    setSelectedUserId(null)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    const controller = new AbortController()
+    setIsLoading(true)
+    fetchAssignableStaffMembers(query, { pageSize: 50, signal: controller.signal })
+      .then((next) => {
+        if (cancelled) return
+        setItems(next)
+        if (!selectedUserId && next.length > 0) setSelectedUserId(next[0].userId)
+      })
+      .catch(() => {
+        if (!cancelled) setItems([])
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false)
+      })
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, query])
+
+  const handleConfirm = () => {
+    onConfirm(selectedUserId)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleConfirm()
+    }
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && !isSubmitting) onClose()
+      }}
+    >
+      <DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserCircle2 className="size-4" aria-hidden="true" />
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeOwner.title',
+              'Change owner for {count} deals',
+              { count: selectedCount },
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeOwner.helper',
+              'Pick a staff member who will own all selected deals.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          <Input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeOwner.search',
+              'Search by name or email…',
+            )}
+            autoFocus
+          />
+          <div className="flex max-h-72 flex-col gap-1 overflow-y-auto pr-1">
+            {isLoading ? (
+              <div className="flex justify-center py-4">
+                <Spinner />
+              </div>
+            ) : items.length === 0 ? (
+              <span className="px-3 py-2 text-sm text-muted-foreground">
+                {translateWithFallback(
+                  t,
+                  'customers.deals.kanban.bulk.changeOwner.empty',
+                  'No staff members found.',
+                )}
+              </span>
+            ) : (
+              items.map((member) => {
+                const isSelected = selectedUserId === member.userId
+                return (
+                  <Button
+                    variant="ghost"
+                    size="default"
+                    key={member.teamMemberId}
+                    type="button"
+                    onClick={() => setSelectedUserId(member.userId)}
+                    // Overrides on the Button base class:
+                    //  - `flex w-full` → row spans the dialog width (default Button is `inline-flex` and content-sized)
+                    //  - `h-auto` → fit avatar + two stacked text lines (default `h-9` clips and leaves the background only covering the first line — that's the "uneven" symptom)
+                    //  - `justify-start` → left-align contents (default Button is `justify-center`, which pushes the avatar+name toward the middle)
+                    //  - `whitespace-normal` → allow long emails to wrap instead of overflowing the button box (default Button is `whitespace-nowrap`)
+                    className={`flex h-auto w-full items-center justify-start gap-3 whitespace-normal rounded-md px-3 py-2 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                      isSelected ? 'bg-muted' : ''
+                    }`}
+                  >
+                    <Avatar label={member.displayName} size="sm" />
+                    <span className="flex min-w-0 flex-1 flex-col items-start">
+                      <span className="truncate text-sm font-medium text-foreground">
+                        {member.displayName}
+                      </span>
+                      {member.email ? (
+                        <span className="truncate text-xs text-muted-foreground">
+                          {member.email}
+                        </span>
+                      ) : null}
+                    </span>
+                  </Button>
+                )
+              })
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} type="button" disabled={isSubmitting}>
+            {translateWithFallback(t, 'customers.deals.kanban.filter.cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleConfirm}
+            disabled={!selectedUserId || isSubmitting}
+          >
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeOwner.confirm',
+              'Reassign {count} deals',
+              { count: selectedCount },
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ChangeOwnerDialog

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

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from 'react'
+import { Workflow } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+
+export type ChangeStageOption = {
+  id: string
+  label: string
+}
+
+type ChangeStageDialogProps = {
+  open: boolean
+  selectedCount: number
+  pipelineName: string
+  stages: ChangeStageOption[]
+  isSubmitting: boolean
+  onClose: () => void
+  onConfirm: (stageId: string) => void
+}
+
+export function ChangeStageDialog({
+  open,
+  selectedCount,
+  pipelineName,
+  stages,
+  isSubmitting,
+  onClose,
+  onConfirm,
+}: ChangeStageDialogProps): React.ReactElement {
+  const t = useT()
+  const [draftStageId, setDraftStageId] = React.useState<string | null>(stages[0]?.id ?? null)
+
+  React.useEffect(() => {
+    if (open) setDraftStageId(stages[0]?.id ?? null)
+  }, [open, stages])
+
+  const handleConfirm = () => {
+    if (draftStageId) onConfirm(draftStageId)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleConfirm()
+    }
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && !isSubmitting) onClose()
+      }}
+    >
+      <DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Workflow className="size-4" aria-hidden="true" />
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeStage.title',
+              'Change stage for {count} deals',
+              { count: selectedCount },
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeStage.context',
+              'Pipeline: {pipeline}',
+              { pipeline: pipelineName },
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-1 py-1">
+          {stages.map((stage) => {
+            const isSelected = draftStageId === stage.id
+            return (
+              <Button
+                variant="ghost"
+                key={stage.id}
+                type="button"
+                onClick={() => setDraftStageId(stage.id)}
+                className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                  isSelected ? 'bg-muted' : ''
+                }`}
+              >
+                <span className="font-medium text-foreground">{stage.label}</span>
+                <span
+                  className={`inline-flex size-4 items-center justify-center rounded-full border ${
+                    isSelected ? 'border-primary bg-primary' : 'border-input'
+                  }`}
+                  aria-hidden="true"
+                >
+                  {isSelected ? (
+                    <span className="size-1.5 rounded-full bg-primary-foreground" />
+                  ) : null}
+                </span>
+              </Button>
+            )
+          })}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} type="button" disabled={isSubmitting}>
+            {translateWithFallback(t, 'customers.deals.kanban.filter.cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleConfirm}
+            disabled={!draftStageId || isSubmitting || stages.length === 0}
+          >
+            {translateWithFallback(
+              t,
+              'customers.deals.kanban.bulk.changeStage.confirm',
+              'Move {count} deals',
+              { count: selectedCount },
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ChangeStageDialog

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

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type ChipButtonProps = {
+  label?: string
+  value: string
+  active?: boolean
+  ariaLabel?: string
+  onClick?: () => void
+  /** Show the chevron-down affordance — true for popover-backed chips, false for plain chips like "+ More" */
+  withChevron?: boolean
+}
+
+export const ChipButton = React.forwardRef<HTMLButtonElement, ChipButtonProps>(
+  function ChipButton(
+    { label, value, active = false, ariaLabel, onClick, withChevron = true },
+    ref,
+  ) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        ref={ref}
+        type="button"
+        onClick={onClick}
+        aria-label={ariaLabel ?? (label ? `${label}: ${value}` : value)}
+        aria-pressed={active}
+        className={`inline-flex items-center gap-1.5 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs leading-normal transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+          active ? 'border-foreground/40 bg-muted text-foreground' : 'text-foreground'
+        }`}
+      >
+        {label ? <span className="font-normal text-muted-foreground">{label}:</span> : null}
+        <span className={label ? 'font-semibold text-foreground' : 'font-normal text-foreground'}>
+          {value}
+        </span>
+        {withChevron ? (
+          <ChevronDown className="size-3 text-muted-foreground" aria-hidden="true" />
+        ) : null}
+      </Button>
+    )
+  },
+)
+
+export default ChipButton