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

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { ChevronRight } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  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'
+
+/**
+ * Action-launcher dialog for the kanban board:
+ *   - "Configure card fields"
+ *   - "Manage pipeline stages"
+ *   - "Reset column widths" (only enabled when at least one lane has been resized)
+ *   - "Reset to default" (clears filters, restores columns)
+ *
+ * NOTE: a hardcoded "Saved views" radio group used to live here (Domyślny widok / Mój
+ * pipeline / Closing this month / Stuck deals). Selecting an item only updated a local
+ * activeViewId — no filters changed, nothing persisted. The reviewer flagged it as
+ * misleading, and the perspectives-backed implementation is not in scope for this PR.
+ * We removed the section entirely; once a real saved-view system lands, restore it with
+ * actual filter application and persistence.
+ */
+type CustomizeViewDialogProps = {
+  open: boolean
+  /** Number of lanes the user has manually resized — displayed alongside the reset action */
+  resizedLanesCount?: number
+  onClose: () => void
+  onResetToDefault: () => void
+  /** Clear all per-stage width overrides so every lane falls back to its default width */
+  onResetColumnWidths?: () => void
+}
+
+export function CustomizeViewDialog({
+  open,
+  resizedLanesCount = 0,
+  onClose,
+  onResetToDefault,
+  onResetColumnWidths,
+}: CustomizeViewDialogProps): React.ReactElement {
+  const t = useT()
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose()
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          {/*
+           * DS Dialog renders the close affordance (X) automatically; we previously rendered
+           * a second manual IconButton X here AND a header-level "Reset to default" button
+           * that duplicated the row-level entry below. Both were removed per the SPEC-048
+           * UX review (item 12).
+           */}
+          <DialogTitle>
+            {translateWithFallback(t, 'customers.deals.kanban.customize.title', 'Customize view')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          <section className="flex flex-col gap-1">
+            <span className="text-overline font-semibold uppercase tracking-wider text-muted-foreground">
+              {translateWithFallback(t, 'customers.deals.kanban.customize.actions', 'Actions')}
+            </span>
+            <Link
+              href="/backend/config/customers/pipeline-stages"
+              className="flex items-center justify-between gap-2 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"
+              onClick={() => onClose()}
+            >
+              <span className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">
+                  {translateWithFallback(
+                    t,
+                    'customers.deals.kanban.customize.manageStages',
+                    'Manage pipeline stages',
+                  )}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {translateWithFallback(
+                    t,
+                    'customers.deals.kanban.customize.manageStages.help',
+                    'Edit names, colors, required fields',
+                  )}
+                </span>
+              </span>
+              <ChevronRight className="size-4 text-muted-foreground" aria-hidden="true" />
+            </Link>
+            {onResetColumnWidths ? (
+              <Button
+                variant="ghost"
+                type="button"
+                disabled={resizedLanesCount === 0}
+                onClick={() => {
+                  onResetColumnWidths()
+                  onClose()
+                }}
+                className="flex items-center justify-between gap-2 rounded-md px-3 py-2 text-left transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              >
+                <span className="flex flex-col">
+                  <span className="text-sm font-medium text-foreground">
+                    {translateWithFallback(
+                      t,
+                      'customers.deals.kanban.customize.resetWidths',
+                      'Reset column widths',
+                    )}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {resizedLanesCount > 0
+                      ? translateWithFallback(
+                          t,
+                          'customers.deals.kanban.customize.resetWidths.helpCount',
+                          'Restore the default width on {count} resized column(s)',
+                          { count: resizedLanesCount },
+                        )
+                      : translateWithFallback(
+                          t,
+                          'customers.deals.kanban.customize.resetWidths.helpEmpty',
+                          'No columns have been resized yet',
+                        )}
+                  </span>
+                </span>
+                <ChevronRight className="size-4 text-muted-foreground" aria-hidden="true" />
+              </Button>
+            ) : null}
+            <Button
+              variant="ghost"
+              type="button"
+              onClick={() => {
+                onResetToDefault()
+                onClose()
+              }}
+              className="flex items-center justify-between gap-2 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"
+            >
+              <span className="flex flex-col">
+                <span className="text-sm font-medium text-foreground">
+                  {translateWithFallback(
+                    t,
+                    'customers.deals.kanban.customize.resetDefault',
+                    'Reset to default',
+                  )}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {translateWithFallback(
+                    t,
+                    'customers.deals.kanban.customize.resetDefault.help',
+                    'Clear filters and restore columns',
+                  )}
+                </span>
+              </span>
+              <ChevronRight className="size-4 text-muted-foreground" aria-hidden="true" />
+            </Button>
+          </section>
+        </div>
+
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default CustomizeViewDialog

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

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type DashedTileButtonProps = {
+  onClick: () => void
+  disabled?: boolean
+  ariaLabel?: string
+  title?: string
+  /**
+   * Extra utility classes appended after the shared dashed-tile chrome. Use this for
+   * width/height/orientation tweaks that vary per consumer (e.g. AddStageLane needs
+   * `min-h-[60vh]` + `flex-col`, quick-add needs `h-11`, show-more needs `px-3 py-2.5`).
+   */
+  className?: string
+  children: React.ReactNode
+}
+
+/**
+ * Shared chrome for the three dashed-outline CTAs on the kanban board:
+ *   - quick-add per lane (Lane.tsx)
+ *   - show-more per lane (Lane.tsx)
+ *   - new-stage lane (AddStageLane.tsx)
+ *
+ * Before extraction each consumer hand-rolled the same 8–10 utility classes plus its own
+ * focus-ring + dashed-border styling; drift between the three was a Figma compliance risk
+ * (and was flagged in the SPEC-048 UX review as item 19). Centralising the styles here
+ * keeps the trio in sync.
+ */
+export function DashedTileButton({
+  onClick,
+  disabled = false,
+  ariaLabel,
+  title,
+  className,
+  children,
+}: DashedTileButtonProps): React.ReactElement {
+  return (
+    <Button
+      variant="ghost"
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      title={title}
+      className={`group flex items-center justify-center gap-2.5 rounded-lg border border-dashed border-muted-foreground/60 bg-muted/40 text-sm font-semibold leading-normal text-foreground transition-colors hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ''}`.trim()}
+    >
+      {children}
+    </Button>
+  )
+}
+
+export default DashedTileButton