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

package/dist/modules/customers/backend/customers/deals/pipeline/components/ActivityComposerDialog.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Mail, Phone, StickyNote } from "lucide-react";
+import { z } from "zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { createCrud } from "@open-mercato/ui/backend/utils/crud";
+import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { translateWithFallback } from "@open-mercato/shared/lib/i18n/translate";
+const ACTIVITY_CONTEXT_ID = "customers-deals-kanban:activity-composer";
+const TYPE_META = {
+  call: {
+    titleKey: "customers.deals.kanban.activityComposer.call",
+    titleFallback: "Log a call",
+    interactionType: "call",
+    icon: Phone
+  },
+  email: {
+    titleKey: "customers.deals.kanban.activityComposer.email",
+    titleFallback: "Send email",
+    interactionType: "email",
+    icon: Mail
+  },
+  note: {
+    titleKey: "customers.deals.kanban.activityComposer.note",
+    titleFallback: "Add a note",
+    interactionType: "note",
+    icon: StickyNote
+  }
+};
+function ActivityComposerDialog({
+  open,
+  context,
+  onClose,
+  onCreated
+}) {
+  const t = useT();
+  const [formInstanceKey, setFormInstanceKey] = React.useState(0);
+  React.useEffect(() => {
+    if (open) setFormInstanceKey((current) => current + 1);
+  }, [open]);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: ACTIVITY_CONTEXT_ID,
+    blockedMessage: translateWithFallback(t, "ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
+  const eitherRequiredMessage = React.useMemo(
+    () => context?.type === "email" ? translateWithFallback(
+      t,
+      "customers.deals.kanban.activityComposer.required.email",
+      "Add a subject or body before saving."
+    ) : translateWithFallback(
+      t,
+      "customers.deals.kanban.activityComposer.required.titleOrBody",
+      "Add a title or body before saving."
+    ),
+    [context?.type, t]
+  );
+  const formSchema = React.useMemo(
+    () => z.object({
+      title: z.string().optional(),
+      phoneNumber: z.string().optional(),
+      body: z.string().optional()
+    }).refine(
+      (values) => values.title?.trim().length || values.body?.trim().length ? true : false,
+      {
+        message: eitherRequiredMessage,
+        path: ["title"]
+      }
+    ),
+    [eitherRequiredMessage]
+  );
+  const initialValues = React.useMemo(
+    () => ({ title: "", phoneNumber: "", body: "" }),
+    []
+  );
+  const isCall = context?.type === "call";
+  const fields = React.useMemo(() => {
+    const list = [
+      {
+        // CrudForm auto-focuses the first field on mount; explicit `autoFocus` is rejected
+        // by CrudBuiltinField's type and would shadow CrudForm's own focus management.
+        id: "title",
+        label: translateWithFallback(t, "customers.deals.kanban.activityComposer.title", "Subject"),
+        type: "text",
+        placeholder: translateWithFallback(
+          t,
+          "customers.deals.kanban.activityComposer.title.placeholder",
+          "Short summary (optional)"
+        )
+      }
+    ];
+    if (isCall) {
+      list.push({
+        id: "phoneNumber",
+        label: translateWithFallback(t, "customers.deals.kanban.activityComposer.phone", "Phone number"),
+        type: "text",
+        placeholder: "+48 ..."
+      });
+    }
+    list.push({
+      id: "body",
+      label: translateWithFallback(t, "customers.deals.kanban.activityComposer.body", "Notes"),
+      type: "textarea",
+      rows: 4,
+      placeholder: translateWithFallback(
+        t,
+        "customers.deals.kanban.activityComposer.body.placeholder",
+        "What happened? Markdown supported."
+      )
+    });
+    return list;
+  }, [isCall, t]);
+  const handleSubmit = React.useCallback(
+    async (values) => {
+      if (!context) return;
+      const trimmedTitle = (values.title ?? "").trim();
+      const trimmedBody = (values.body ?? "").trim();
+      if (!trimmedTitle.length && !trimmedBody.length) {
+        throw createCrudFormError(eitherRequiredMessage, { title: eitherRequiredMessage });
+      }
+      const meta2 = TYPE_META[context.type];
+      const payload = {
+        entityId: context.entityId,
+        interactionType: meta2.interactionType,
+        dealId: context.dealId,
+        status: "planned"
+      };
+      if (trimmedTitle.length) payload.title = trimmedTitle;
+      if (trimmedBody.length) payload.body = trimmedBody;
+      if (context.type === "call" && (values.phoneNumber ?? "").trim().length) {
+        payload.phoneNumber = values.phoneNumber.trim();
+      }
+      const operation = () => createCrud("customers/interactions", payload, {
+        errorMessage: translateWithFallback(
+          t,
+          "customers.deals.kanban.activityComposer.error",
+          "Failed to save activity."
+        )
+      });
+      await runMutation({
+        operation,
+        context: {
+          formId: ACTIVITY_CONTEXT_ID,
+          resourceKind: "customers.interaction",
+          resourceId: context.dealId,
+          retryLastMutation
+        }
+      });
+      flash(
+        translateWithFallback(t, "customers.deals.kanban.activityComposer.success", "Activity saved."),
+        "success"
+      );
+      onCreated();
+      onClose();
+    },
+    [context, eitherRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t]
+  );
+  if (!context) return null;
+  const meta = TYPE_META[context.type];
+  const Icon = meta.icon;
+  const dialogTitle = translateWithFallback(t, meta.titleKey, meta.titleFallback);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+            dialogTitle
+          ] }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: translateWithFallback(
+            t,
+            "customers.deals.kanban.activityComposer.context",
+            "Deal: {title}",
+            { title: context.dealTitle }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CrudForm,
+          {
+            embedded: true,
+            fields,
+            initialValues,
+            schema: formSchema,
+            submitLabel: translateWithFallback(
+              t,
+              "customers.deals.kanban.activityComposer.submit",
+              "Save activity"
+            ),
+            onSubmit: handleSubmit
+          },
+          `${context.dealId}:${context.type}:${formInstanceKey}`
+        )
+      ] })
+    }
+  );
+}
+var ActivityComposerDialog_default = ActivityComposerDialog;
+export {
+  ActivityComposerDialog,
+  ActivityComposerDialog_default as default
+};
+//# sourceMappingURL=ActivityComposerDialog.js.map

package/dist/modules/customers/backend/customers/deals/pipeline/components/ActivityComposerDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/customers/backend/customers/deals/pipeline/components/ActivityComposerDialog.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Mail, Phone, StickyNote, type LucideIcon } from 'lucide-react'\nimport { z } from 'zod'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'\nimport { createCrud } from '@open-mercato/ui/backend/utils/crud'\nimport { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'\nimport { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'\n\nexport type ActivityComposerType = 'call' | 'email' | 'note'\n\nexport type ActivityComposerContext = {\n  dealId: string\n  dealTitle: string\n  type: ActivityComposerType\n  entityId: string\n}\n\ntype ActivityComposerDialogProps = {\n  open: boolean\n  context: ActivityComposerContext | null\n  onClose: () => void\n  onCreated: () => void\n}\n\ntype ActivityComposerFormValues = {\n  title: string\n  phoneNumber: string\n  body: string\n}\n\nconst ACTIVITY_CONTEXT_ID = 'customers-deals-kanban:activity-composer'\n\nconst TYPE_META: Record<\n  ActivityComposerType,\n  {\n    titleKey: string\n    titleFallback: string\n    interactionType: string\n    icon: LucideIcon\n  }\n> = {\n  call: {\n    titleKey: 'customers.deals.kanban.activityComposer.call',\n    titleFallback: 'Log a call',\n    interactionType: 'call',\n    icon: Phone,\n  },\n  email: {\n    titleKey: 'customers.deals.kanban.activityComposer.email',\n    titleFallback: 'Send email',\n    interactionType: 'email',\n    icon: Mail,\n  },\n  note: {\n    titleKey: 'customers.deals.kanban.activityComposer.note',\n    titleFallback: 'Add a note',\n    interactionType: 'note',\n    icon: StickyNote,\n  },\n}\n\nexport function ActivityComposerDialog({\n  open,\n  context,\n  onClose,\n  onCreated,\n}: ActivityComposerDialogProps): React.ReactElement | null {\n  const t = useT()\n  // Re-mount CrudForm whenever the dialog opens, or when the deal/type changes \u2014 these\n  // identify what we're logging activity FOR, and CrudForm's internal state must reset.\n  const [formInstanceKey, setFormInstanceKey] = React.useState(0)\n  React.useEffect(() => {\n    if (open) setFormInstanceKey((current) => current + 1)\n  }, [open])\n\n  const { runMutation, retryLastMutation } = useGuardedMutation<{\n    formId: string\n    resourceKind: string\n    resourceId: string\n    retryLastMutation: () => Promise<boolean>\n  }>({\n    contextId: ACTIVITY_CONTEXT_ID,\n    blockedMessage: translateWithFallback(t, 'ui.forms.flash.saveBlocked', 'Save blocked by validation'),\n  })\n\n  // Email mode shows the field as \"Subject\" (see TYPE_META + the field config below), so\n  // the refine error must reference \"subject\" instead of \"title\" to stay coherent. Call\n  // and Note modes keep the \"title or body\" copy that matches their Subject-labelled field.\n  const eitherRequiredMessage = React.useMemo(\n    () =>\n      context?.type === 'email'\n        ? translateWithFallback(\n            t,\n            'customers.deals.kanban.activityComposer.required.email',\n            'Add a subject or body before saving.',\n          )\n        : translateWithFallback(\n            t,\n            'customers.deals.kanban.activityComposer.required.titleOrBody',\n            'Add a title or body before saving.',\n          ),\n    [context?.type, t],\n  )\n\n  const formSchema = React.useMemo(\n    () =>\n      z\n        .object({\n          title: z.string().optional(),\n          phoneNumber: z.string().optional(),\n          body: z.string().optional(),\n        })\n        // Activity must carry at least a title OR a body \u2014 purely empty saves are\n        // useless and they previously surfaced as a confusing inline error.\n        .refine(\n          (values) => (values.title?.trim().length || values.body?.trim().length) ? true : false,\n          {\n            message: eitherRequiredMessage,\n            path: ['title'],\n          },\n        ),\n    [eitherRequiredMessage],\n  ) as unknown as z.ZodType<ActivityComposerFormValues>\n\n  const initialValues = React.useMemo<Partial<ActivityComposerFormValues>>(\n    () => ({ title: '', phoneNumber: '', body: '' }),\n    [],\n  )\n\n  const isCall = context?.type === 'call'\n\n  const fields = React.useMemo<CrudField[]>(() => {\n    const list: CrudField[] = [\n      {\n        // CrudForm auto-focuses the first field on mount; explicit `autoFocus` is rejected\n        // by CrudBuiltinField's type and would shadow CrudForm's own focus management.\n        id: 'title',\n        label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.title', 'Subject'),\n        type: 'text',\n        placeholder: translateWithFallback(\n          t,\n          'customers.deals.kanban.activityComposer.title.placeholder',\n          'Short summary (optional)',\n        ),\n      },\n    ]\n    if (isCall) {\n      list.push({\n        id: 'phoneNumber',\n        label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.phone', 'Phone number'),\n        type: 'text',\n        placeholder: '+48 ...',\n      })\n    }\n    list.push({\n      id: 'body',\n      label: translateWithFallback(t, 'customers.deals.kanban.activityComposer.body', 'Notes'),\n      type: 'textarea',\n      rows: 4,\n      placeholder: translateWithFallback(\n        t,\n        'customers.deals.kanban.activityComposer.body.placeholder',\n        'What happened? Markdown supported.',\n      ),\n    })\n    return list\n  }, [isCall, t])\n\n  const handleSubmit = React.useCallback(\n    async (values: ActivityComposerFormValues) => {\n      if (!context) return\n      const trimmedTitle = (values.title ?? '').trim()\n      const trimmedBody = (values.body ?? '').trim()\n      if (!trimmedTitle.length && !trimmedBody.length) {\n        // Zod refine already handles this, but we surface a field-level error too so the\n        // inline indicator stays anchored on the Subject input.\n        throw createCrudFormError(eitherRequiredMessage, { title: eitherRequiredMessage })\n      }\n      const meta = TYPE_META[context.type]\n      const payload: Record<string, unknown> = {\n        entityId: context.entityId,\n        interactionType: meta.interactionType,\n        dealId: context.dealId,\n        status: 'planned',\n      }\n      if (trimmedTitle.length) payload.title = trimmedTitle\n      if (trimmedBody.length) payload.body = trimmedBody\n      if (context.type === 'call' && (values.phoneNumber ?? '').trim().length) {\n        payload.phoneNumber = values.phoneNumber!.trim()\n      }\n      const operation = () =>\n        createCrud('customers/interactions', payload, {\n          errorMessage: translateWithFallback(\n            t,\n            'customers.deals.kanban.activityComposer.error',\n            'Failed to save activity.',\n          ),\n        })\n      await runMutation({\n        operation,\n        context: {\n          formId: ACTIVITY_CONTEXT_ID,\n          resourceKind: 'customers.interaction',\n          resourceId: context.dealId,\n          retryLastMutation,\n        },\n      })\n      flash(\n        translateWithFallback(t, 'customers.deals.kanban.activityComposer.success', 'Activity saved.'),\n        'success',\n      )\n      onCreated()\n      onClose()\n    },\n    [context, eitherRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t],\n  )\n\n  if (!context) return null\n  const meta = TYPE_META[context.type]\n  const Icon = meta.icon\n  const dialogTitle = translateWithFallback(t, meta.titleKey, meta.titleFallback)\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) onClose()\n      }}\n    >\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {dialogTitle}\n          </DialogTitle>\n          <DialogDescription>\n            {translateWithFallback(\n              t,\n              'customers.deals.kanban.activityComposer.context',\n              'Deal: {title}',\n              { title: context.dealTitle },\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <CrudForm<ActivityComposerFormValues>\n          key={`${context.dealId}:${context.type}:${formInstanceKey}`}\n          embedded\n          fields={fields}\n          initialValues={initialValues}\n          schema={formSchema}\n          submitLabel={translateWithFallback(\n            t,\n            'customers.deals.kanban.activityComposer.submit',\n            'Save activity',\n          )}\n          onSubmit={handleSubmit}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default ActivityComposerDialog\n"],
+  "mappings": "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",
+  "names": ["meta"]
+}

package/dist/modules/customers/backend/customers/deals/pipeline/components/AddStageDialog.js

@@ -0,0 +1,335 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { z } from "zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { createCrud } from "@open-mercato/ui/backend/utils/crud";
+import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { translateWithFallback } from "@open-mercato/shared/lib/i18n/translate";
+const ADD_STAGE_CONTEXT_ID = "customers-deals-kanban:add-stage";
+const TONE_OPTIONS = [
+  {
+    value: "",
+    swatchClass: "border border-dashed border-border",
+    labelKey: "customers.deals.kanban.addStage.color.none",
+    labelFallback: "No color"
+  },
+  {
+    value: "success",
+    swatchClass: "bg-status-success-icon",
+    labelKey: "customers.deals.kanban.addStage.color.success",
+    labelFallback: "Green"
+  },
+  {
+    value: "warning",
+    swatchClass: "bg-status-warning-icon",
+    labelKey: "customers.deals.kanban.addStage.color.warning",
+    labelFallback: "Amber"
+  },
+  {
+    value: "info",
+    swatchClass: "bg-status-info-icon",
+    labelKey: "customers.deals.kanban.addStage.color.info",
+    labelFallback: "Blue"
+  },
+  {
+    value: "error",
+    swatchClass: "bg-status-error-icon",
+    labelKey: "customers.deals.kanban.addStage.color.error",
+    labelFallback: "Red"
+  },
+  {
+    value: "neutral",
+    swatchClass: "bg-status-neutral-icon",
+    labelKey: "customers.deals.kanban.addStage.color.neutral",
+    labelFallback: "Gray"
+  },
+  {
+    value: "brand",
+    swatchClass: "bg-brand-violet",
+    labelKey: "customers.deals.kanban.addStage.color.brand",
+    labelFallback: "Violet"
+  },
+  {
+    value: "pink",
+    swatchClass: "bg-status-pink-icon",
+    labelKey: "customers.deals.kanban.addStage.color.pink",
+    labelFallback: "Pink"
+  }
+];
+const POSITION_END = "end";
+const POSITION_START = "start";
+const POSITION_AFTER_PREFIX = "after:";
+function resolveInsertOrder(position, existingStages) {
+  if (position === POSITION_END || position === "") return void 0;
+  if (position === POSITION_START) return 0;
+  if (position.startsWith(POSITION_AFTER_PREFIX)) {
+    const afterId = position.slice(POSITION_AFTER_PREFIX.length);
+    const idx = existingStages.findIndex((stage) => stage.id === afterId);
+    if (idx < 0) return void 0;
+    return existingStages[idx].order + 1;
+  }
+  return void 0;
+}
+function AddStageDialog({
+  open,
+  context,
+  onClose,
+  onCreated
+}) {
+  const t = useT();
+  const [formInstanceKey, setFormInstanceKey] = React.useState(0);
+  React.useEffect(() => {
+    if (open) setFormInstanceKey((current) => current + 1);
+  }, [open]);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: ADD_STAGE_CONTEXT_ID,
+    blockedMessage: translateWithFallback(t, "ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
+  const labelRequiredMessage = translateWithFallback(
+    t,
+    "customers.deals.kanban.addStage.label.required",
+    "Stage name is required."
+  );
+  const formSchema = React.useMemo(
+    () => z.object({
+      label: z.string().trim().min(1, labelRequiredMessage),
+      color: z.string().optional(),
+      position: z.string().optional()
+    }),
+    [labelRequiredMessage]
+  );
+  const positionOptions = React.useMemo(() => {
+    const existingStages = context?.existingStages ?? [];
+    const opts = [
+      {
+        value: POSITION_END,
+        label: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.position.end",
+          "At the end (default)"
+        )
+      },
+      {
+        value: POSITION_START,
+        label: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.position.start",
+          "At the start"
+        )
+      }
+    ];
+    for (const stage of existingStages) {
+      opts.push({
+        value: `${POSITION_AFTER_PREFIX}${stage.id}`,
+        label: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.position.after",
+          "After {label}",
+          { label: stage.label }
+        )
+      });
+    }
+    return opts;
+  }, [context?.existingStages, t]);
+  const fields = React.useMemo(
+    () => [
+      {
+        // CrudForm auto-focuses the first field of the first group on mount, so we don't
+        // need an explicit `autoFocus: true` here — and adding one would be a type error
+        // because `autoFocus` is only valid on CrudCustomFieldRenderProps.
+        id: "label",
+        label: translateWithFallback(t, "customers.deals.kanban.addStage.label", "Stage name"),
+        type: "text",
+        required: true,
+        placeholder: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.label.placeholder",
+          "e.g. Discovery"
+        )
+      },
+      {
+        // Custom inline radio-style list instead of a Radix Select — when the dialog sits
+        // near the bottom of the viewport, Radix's Select dropdown clips to the available
+        // vertical space (`--radix-select-content-available-height`), which can leave only
+        // 1–2 visible options and hide the rest behind a small scroll affordance the
+        // operator doesn't notice. Rendering the picker inline inside the dialog body
+        // gives it a deterministic max-height + clearly scrollable area, and "After {label}"
+        // entries are always visible without portal clipping.
+        id: "position",
+        label: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.position",
+          "Position in pipeline"
+        ),
+        type: "custom",
+        description: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.position.help",
+          "Choose where the new stage appears on the kanban. Existing stages after the chosen position shift one step to the right."
+        ),
+        component: ({ value, setValue }) => {
+          const current = typeof value === "string" && value.length > 0 ? value : POSITION_END;
+          return /* @__PURE__ */ jsx("div", { className: "flex max-h-52 flex-col gap-1 overflow-y-auto rounded-md border border-input bg-card p-1", children: positionOptions.map((option) => {
+            const selected = current === option.value;
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                type: "button",
+                onClick: () => setValue(option.value),
+                "aria-pressed": selected,
+                className: `flex items-center justify-between gap-2 rounded-sm px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${selected ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `inline-flex size-4 shrink-0 items-center justify-center rounded-full border ${selected ? "border-primary bg-primary" : "border-input"}`,
+                      "aria-hidden": "true",
+                      children: selected ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary-foreground" }) : null
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          }) });
+        }
+      },
+      {
+        // Custom render — built-in `select` can't render a swatch alongside each label.
+        // Each swatch uses the same DS class the lane bar renders, so the picker is a
+        // true preview of the kanban appearance instead of a separate hex translation.
+        id: "color",
+        label: translateWithFallback(t, "customers.deals.kanban.addStage.color", "Color"),
+        type: "custom",
+        component: ({ value, setValue }) => {
+          const current = typeof value === "string" ? value : "";
+          return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: TONE_OPTIONS.map((option) => {
+            const selected = current === option.value;
+            const label = translateWithFallback(t, option.labelKey, option.labelFallback);
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                type: "button",
+                onClick: () => setValue(option.value),
+                "aria-pressed": selected,
+                title: label,
+                className: `inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${selected ? "border-primary bg-muted text-foreground" : "border-input bg-card text-muted-foreground hover:bg-muted hover:text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `size-3 rounded-sm ${option.swatchClass}`,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: label })
+                ]
+              },
+              option.value || "none"
+            );
+          }) });
+        }
+      }
+    ],
+    [positionOptions, t]
+  );
+  const initialValues = React.useMemo(
+    () => ({ label: "", color: "", position: POSITION_END }),
+    []
+  );
+  const handleSubmit = React.useCallback(
+    async (values) => {
+      if (!context) return;
+      const trimmedLabel = values.label.trim();
+      if (!trimmedLabel.length) {
+        throw createCrudFormError(labelRequiredMessage, { label: labelRequiredMessage });
+      }
+      const payload = {
+        pipelineId: context.pipelineId,
+        label: trimmedLabel
+      };
+      if (values.color) payload.color = values.color;
+      const insertOrder = resolveInsertOrder(values.position ?? POSITION_END, context.existingStages);
+      if (insertOrder !== void 0) payload.order = insertOrder;
+      const operation = () => createCrud("customers/pipeline-stages", payload, {
+        errorMessage: translateWithFallback(
+          t,
+          "customers.deals.kanban.addStage.error",
+          "Failed to add stage."
+        )
+      });
+      await runMutation({
+        operation,
+        context: {
+          formId: ADD_STAGE_CONTEXT_ID,
+          resourceKind: "customers.pipeline_stage",
+          retryLastMutation
+        }
+      });
+      flash(translateWithFallback(t, "customers.deals.kanban.addStage.success", "Stage added."), "success");
+      onCreated();
+      onClose();
+    },
+    [context, labelRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t]
+  );
+  if (!context) return null;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: translateWithFallback(t, "customers.deals.kanban.addStage.title", "New stage") }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: translateWithFallback(
+            t,
+            "customers.deals.kanban.addStage.context",
+            "Pipeline: {pipeline}",
+            { pipeline: context.pipelineName }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CrudForm,
+          {
+            embedded: true,
+            fields,
+            initialValues,
+            schema: formSchema,
+            submitLabel: translateWithFallback(
+              t,
+              "customers.deals.kanban.addStage.submit",
+              "Add stage"
+            ),
+            onSubmit: handleSubmit
+          },
+          `${context.pipelineId}:${formInstanceKey}`
+        )
+      ] })
+    }
+  );
+}
+var AddStageDialog_default = AddStageDialog;
+export {
+  AddStageDialog,
+  AddStageDialog_default as default
+};
+//# sourceMappingURL=AddStageDialog.js.map

package/dist/modules/customers/backend/customers/deals/pipeline/components/AddStageDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/customers/backend/customers/deals/pipeline/components/AddStageDialog.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { z } from 'zod'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'\nimport { createCrud } from '@open-mercato/ui/backend/utils/crud'\nimport { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'\nimport { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'\n\nconst ADD_STAGE_CONTEXT_ID = 'customers-deals-kanban:add-stage'\n\n// Stage color palette \u2014 semantic tone identifiers matching Lane.tsx's ACCENT_TONE_CLASS\n// map. We switched from arbitrary hex values to canonical tones (success / warning / info\n// / error / neutral / brand / pink) so the picker can't silently fall through to gray\n// when the implicit hex\u2192tone mapping doesn't recognise a value. Empty string = no color\n// (lane falls back to the position-based rotation). Forward-only migration 2026-05-19\n// backfills existing hex values to their nearest tone.\nconst TONE_OPTIONS = [\n  {\n    value: '',\n    swatchClass: 'border border-dashed border-border',\n    labelKey: 'customers.deals.kanban.addStage.color.none',\n    labelFallback: 'No color',\n  },\n  {\n    value: 'success',\n    swatchClass: 'bg-status-success-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.success',\n    labelFallback: 'Green',\n  },\n  {\n    value: 'warning',\n    swatchClass: 'bg-status-warning-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.warning',\n    labelFallback: 'Amber',\n  },\n  {\n    value: 'info',\n    swatchClass: 'bg-status-info-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.info',\n    labelFallback: 'Blue',\n  },\n  {\n    value: 'error',\n    swatchClass: 'bg-status-error-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.error',\n    labelFallback: 'Red',\n  },\n  {\n    value: 'neutral',\n    swatchClass: 'bg-status-neutral-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.neutral',\n    labelFallback: 'Gray',\n  },\n  {\n    value: 'brand',\n    swatchClass: 'bg-brand-violet',\n    labelKey: 'customers.deals.kanban.addStage.color.brand',\n    labelFallback: 'Violet',\n  },\n  {\n    value: 'pink',\n    swatchClass: 'bg-status-pink-icon',\n    labelKey: 'customers.deals.kanban.addStage.color.pink',\n    labelFallback: 'Pink',\n  },\n] as const\n\n/**\n * Identifier values for the \"Position\" picker:\n *   - `end` \u2014 append after every existing stage (the default; matches the previous\n *     always-at-end behavior so the dialog stays familiar)\n *   - `start` \u2014 insert at order 0; existing stages shift right\n *   - `after:<stageId>` \u2014 insert directly after the given stage; everything to its right shifts\n *\n * We use a single-string discriminated value rather than a separate \"mode\" + \"afterId\"\n * pair because CrudForm's built-in `select` field type expects scalar option values, and\n * the backend payload computation is trivial off this single string.\n */\nconst POSITION_END = 'end' as const\nconst POSITION_START = 'start' as const\nconst POSITION_AFTER_PREFIX = 'after:'\n\nexport type AddStageContext = {\n  pipelineId: string\n  pipelineName: string\n  /**\n   * Snapshot of every stage already in the pipeline, ordered by their `order` field.\n   * Drives the \"Position\" picker. `order` is the server-side position used to build\n   * the create payload (we send `existingOrder + 1` for \"after this stage\").\n   */\n  existingStages: ReadonlyArray<{ id: string; label: string; order: number }>\n}\n\ntype AddStageDialogProps = {\n  open: boolean\n  context: AddStageContext | null\n  onClose: () => void\n  onCreated: () => void\n}\n\ntype AddStageFormValues = {\n  label: string\n  color: string\n  position: string\n}\n\n/**\n * Resolve the picker's discriminated string to the integer `order` we send to the API.\n * Returns `undefined` when the operator picked \"At end\" \u2014 the backend treats undefined\n * as \"append\" so the legacy default behavior is preserved bit-for-bit.\n */\nfunction resolveInsertOrder(\n  position: string,\n  existingStages: ReadonlyArray<{ id: string; label: string; order: number }>,\n): number | undefined {\n  if (position === POSITION_END || position === '') return undefined\n  if (position === POSITION_START) return 0\n  if (position.startsWith(POSITION_AFTER_PREFIX)) {\n    const afterId = position.slice(POSITION_AFTER_PREFIX.length)\n    const idx = existingStages.findIndex((stage) => stage.id === afterId)\n    if (idx < 0) return undefined\n    // Insert position is the existing stage's order + 1; the backend will shift the\n    // remainder of the stages by +1 to keep ordering dense and unique.\n    return existingStages[idx].order + 1\n  }\n  return undefined\n}\n\nexport function AddStageDialog({\n  open,\n  context,\n  onClose,\n  onCreated,\n}: AddStageDialogProps): React.ReactElement | null {\n  const t = useT()\n  // Re-mount CrudForm whenever the dialog opens so cleared state is consistently fresh and\n  // any stale field errors from a previous open don't carry over.\n  const [formInstanceKey, setFormInstanceKey] = React.useState(0)\n  React.useEffect(() => {\n    if (open) setFormInstanceKey((current) => current + 1)\n  }, [open])\n\n  const { runMutation, retryLastMutation } = useGuardedMutation<{\n    formId: string\n    resourceKind: string\n    retryLastMutation: () => Promise<boolean>\n  }>({\n    contextId: ADD_STAGE_CONTEXT_ID,\n    blockedMessage: translateWithFallback(t, 'ui.forms.flash.saveBlocked', 'Save blocked by validation'),\n  })\n\n  const labelRequiredMessage = translateWithFallback(\n    t,\n    'customers.deals.kanban.addStage.label.required',\n    'Stage name is required.',\n  )\n\n  // Cast widens to AddStageFormValues so CrudForm's TValues generic stays exact \u2014 Zod's\n  // inferred type is structurally identical but the generic parameters carry extra\n  // metadata that doesn't match `z.ZodType<TValues>` literally.\n  const formSchema = React.useMemo(\n    () =>\n      z.object({\n        label: z.string().trim().min(1, labelRequiredMessage),\n        color: z.string().optional(),\n        position: z.string().optional(),\n      }) as unknown as z.ZodType<AddStageFormValues>,\n    [labelRequiredMessage],\n  )\n\n  const positionOptions = React.useMemo(() => {\n    const existingStages = context?.existingStages ?? []\n    const opts: Array<{ value: string; label: string }> = [\n      {\n        value: POSITION_END,\n        label: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.position.end',\n          'At the end (default)',\n        ),\n      },\n      {\n        value: POSITION_START,\n        label: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.position.start',\n          'At the start',\n        ),\n      },\n    ]\n    for (const stage of existingStages) {\n      opts.push({\n        value: `${POSITION_AFTER_PREFIX}${stage.id}`,\n        label: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.position.after',\n          'After {label}',\n          { label: stage.label },\n        ),\n      })\n    }\n    return opts\n  }, [context?.existingStages, t])\n\n  const fields = React.useMemo<CrudField[]>(\n    () => [\n      {\n        // CrudForm auto-focuses the first field of the first group on mount, so we don't\n        // need an explicit `autoFocus: true` here \u2014 and adding one would be a type error\n        // because `autoFocus` is only valid on CrudCustomFieldRenderProps.\n        id: 'label',\n        label: translateWithFallback(t, 'customers.deals.kanban.addStage.label', 'Stage name'),\n        type: 'text',\n        required: true,\n        placeholder: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.label.placeholder',\n          'e.g. Discovery',\n        ),\n      },\n      {\n        // Custom inline radio-style list instead of a Radix Select \u2014 when the dialog sits\n        // near the bottom of the viewport, Radix's Select dropdown clips to the available\n        // vertical space (`--radix-select-content-available-height`), which can leave only\n        // 1\u20132 visible options and hide the rest behind a small scroll affordance the\n        // operator doesn't notice. Rendering the picker inline inside the dialog body\n        // gives it a deterministic max-height + clearly scrollable area, and \"After {label}\"\n        // entries are always visible without portal clipping.\n        id: 'position',\n        label: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.position',\n          'Position in pipeline',\n        ),\n        type: 'custom',\n        description: translateWithFallback(\n          t,\n          'customers.deals.kanban.addStage.position.help',\n          'Choose where the new stage appears on the kanban. Existing stages after the chosen position shift one step to the right.',\n        ),\n        component: ({ value, setValue }) => {\n          const current = typeof value === 'string' && value.length > 0 ? value : POSITION_END\n          return (\n            <div className=\"flex max-h-52 flex-col gap-1 overflow-y-auto rounded-md border border-input bg-card p-1\">\n              {positionOptions.map((option) => {\n                const selected = current === option.value\n                return (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    key={option.value}\n                    type=\"button\"\n                    onClick={() => setValue(option.value)}\n                    aria-pressed={selected}\n                    className={`flex items-center justify-between gap-2 rounded-sm px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${\n                      selected\n                        ? 'bg-muted font-medium text-foreground'\n                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'\n                    }`}\n                  >\n                    <span className=\"flex-1 truncate\">{option.label}</span>\n                    <span\n                      className={`inline-flex size-4 shrink-0 items-center justify-center rounded-full border ${\n                        selected ? 'border-primary bg-primary' : 'border-input'\n                      }`}\n                      aria-hidden=\"true\"\n                    >\n                      {selected ? (\n                        <span className=\"size-1.5 rounded-full bg-primary-foreground\" />\n                      ) : null}\n                    </span>\n                  </Button>\n                )\n              })}\n            </div>\n          )\n        },\n      },\n      {\n        // Custom render \u2014 built-in `select` can't render a swatch alongside each label.\n        // Each swatch uses the same DS class the lane bar renders, so the picker is a\n        // true preview of the kanban appearance instead of a separate hex translation.\n        id: 'color',\n        label: translateWithFallback(t, 'customers.deals.kanban.addStage.color', 'Color'),\n        type: 'custom',\n        component: ({ value, setValue }) => {\n          const current = typeof value === 'string' ? value : ''\n          return (\n            <div className=\"flex flex-wrap gap-2\">\n              {TONE_OPTIONS.map((option) => {\n                const selected = current === option.value\n                const label = translateWithFallback(t, option.labelKey, option.labelFallback)\n                return (\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    key={option.value || 'none'}\n                    type=\"button\"\n                    onClick={() => setValue(option.value)}\n                    aria-pressed={selected}\n                    title={label}\n                    className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${\n                      selected\n                        ? 'border-primary bg-muted text-foreground'\n                        : 'border-input bg-card text-muted-foreground hover:bg-muted hover:text-foreground'\n                    }`}\n                  >\n                    <span\n                      className={`size-3 rounded-sm ${option.swatchClass}`}\n                      aria-hidden=\"true\"\n                    />\n                    <span>{label}</span>\n                  </Button>\n                )\n              })}\n            </div>\n          )\n        },\n      },\n    ],\n    [positionOptions, t],\n  )\n\n  const initialValues = React.useMemo<Partial<AddStageFormValues>>(\n    () => ({ label: '', color: '', position: POSITION_END }),\n    [],\n  )\n\n  const handleSubmit = React.useCallback(\n    async (values: AddStageFormValues) => {\n      if (!context) return\n      const trimmedLabel = values.label.trim()\n      if (!trimmedLabel.length) {\n        // Zod schema should already catch this \u2014 but we re-verify defensively because the\n        // Zod check uses `trim().min(1)` and the field renders trimmed values consistently.\n        throw createCrudFormError(labelRequiredMessage, { label: labelRequiredMessage })\n      }\n      const payload: Record<string, unknown> = {\n        pipelineId: context.pipelineId,\n        label: trimmedLabel,\n      }\n      if (values.color) payload.color = values.color\n      const insertOrder = resolveInsertOrder(values.position ?? POSITION_END, context.existingStages)\n      // Only send `order` when the operator explicitly chose a non-default position. Letting\n      // it stay undefined preserves the legacy \"append to end\" behavior on the backend\n      // (and keeps payloads clean / debugger-friendly for typical add flows).\n      if (insertOrder !== undefined) payload.order = insertOrder\n      const operation = () =>\n        createCrud('customers/pipeline-stages', payload, {\n          errorMessage: translateWithFallback(\n            t,\n            'customers.deals.kanban.addStage.error',\n            'Failed to add stage.',\n          ),\n        })\n      await runMutation({\n        operation,\n        context: {\n          formId: ADD_STAGE_CONTEXT_ID,\n          resourceKind: 'customers.pipeline_stage',\n          retryLastMutation,\n        },\n      })\n      flash(translateWithFallback(t, 'customers.deals.kanban.addStage.success', 'Stage added.'), 'success')\n      onCreated()\n      onClose()\n    },\n    [context, labelRequiredMessage, onClose, onCreated, retryLastMutation, runMutation, t],\n  )\n\n  if (!context) return null\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) onClose()\n      }}\n    >\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>\n            {translateWithFallback(t, 'customers.deals.kanban.addStage.title', 'New stage')}\n          </DialogTitle>\n          <DialogDescription>\n            {translateWithFallback(\n              t,\n              'customers.deals.kanban.addStage.context',\n              'Pipeline: {pipeline}',\n              { pipeline: context.pipelineName },\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <CrudForm<AddStageFormValues>\n          key={`${context.pipelineId}:${formInstanceKey}`}\n          embedded\n          fields={fields}\n          initialValues={initialValues}\n          schema={formSchema}\n          submitLabel={translateWithFallback(\n            t,\n            'customers.deals.kanban.addStage.submit',\n            'Add stage',\n          )}\n          onSubmit={handleSubmit}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default AddStageDialog\n"],
+  "mappings": "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",
+  "names": []
+}