@open-mercato/core 0.6.3-develop.3901.1.ddad60693a → 0.6.3

package/dist/modules/workflows/components/WorkflowGraphImpl.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useMemo, useEffect, useState } from "react";
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  ConnectionMode,
+  MarkerType
+} from "@xyflow/react";
+import { StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode } from "./nodes/index.js";
+import { WorkflowTransitionEdge } from "./WorkflowTransitionEdge.js";
+import { STATUS_COLORS } from "../lib/status-colors.js";
+import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Edit3 } from "lucide-react";
+import { useTheme } from "@open-mercato/ui/theme";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function WorkflowGraphImpl({
+  initialNodes = [],
+  initialEdges = [],
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  onNodeClick: onNodeClickProp,
+  onEdgeClick: onEdgeClickProp,
+  onConnect: onConnectProp,
+  editable = false,
+  className = "",
+  height = "600px"
+}) {
+  const t = useT();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const backgroundDotColor = isDark ? "#374151" : "#e5e7eb";
+  const [isCompactViewport, setIsCompactViewport] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 1279px)");
+    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches);
+    updateViewportMode();
+    mediaQuery.addEventListener("change", updateViewportMode);
+    return () => {
+      mediaQuery.removeEventListener("change", updateViewportMode);
+    };
+  }, []);
+  useEffect(() => {
+    setNodes(initialNodes);
+  }, [initialNodes, setNodes]);
+  useEffect(() => {
+    setEdges(initialEdges);
+  }, [initialEdges, setEdges]);
+  const onConnect = useCallback(
+    (connection) => {
+      if (onConnectProp) {
+        onConnectProp(connection);
+      } else {
+        const newEdge = {
+          ...connection,
+          type: "workflowTransition",
+          animated: false,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 16,
+            height: 16,
+            color: "#9ca3af"
+          }
+        };
+        setEdges((eds) => addEdge(newEdge, eds));
+      }
+    },
+    [setEdges, onConnectProp]
+  );
+  const handleNodesChange = useCallback(
+    (changes) => {
+      onNodesChange(changes);
+      if (onNodesChangeProp) {
+        onNodesChangeProp(changes);
+      }
+    },
+    [onNodesChange, onNodesChangeProp]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      onEdgesChange(changes);
+      if (onEdgesChangeProp) {
+        onEdgesChangeProp(changes);
+      }
+    },
+    [onEdgesChange, onEdgesChangeProp]
+  );
+  const nodeTypes = useMemo(
+    () => ({
+      start: StartNode,
+      end: EndNode,
+      userTask: UserTaskNode,
+      automated: AutomatedNode,
+      subWorkflow: SubWorkflowNode,
+      waitForSignal: WaitForSignalNode,
+      waitForTimer: WaitForTimerNode
+    }),
+    []
+  );
+  const edgeTypes = useMemo(
+    () => ({
+      workflowTransition: WorkflowTransitionEdge
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx("div", { className: `workflow-graph-container ${className}`, style: { height }, children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      onNodesChange: handleNodesChange,
+      onEdgesChange: handleEdgesChange,
+      onConnect: editable ? onConnect : void 0,
+      onNodeClick: onNodeClickProp,
+      onEdgeClick: onEdgeClickProp,
+      connectionMode: ConnectionMode.Loose,
+      fitView: true,
+      fitViewOptions: {
+        padding: 0.2,
+        maxZoom: isCompactViewport ? 0.9 : 1
+      },
+      minZoom: 0.1,
+      maxZoom: 2,
+      defaultEdgeOptions: {
+        type: "workflowTransition",
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 16,
+          height: 16,
+          color: "#9ca3af"
+        }
+      },
+      nodesDraggable: editable,
+      nodesConnectable: editable,
+      elementsSelectable: editable,
+      proOptions: { hideAttribution: true },
+      children: [
+        /* @__PURE__ */ jsx(
+          Background,
+          {
+            variant: BackgroundVariant.Dots,
+            gap: 16,
+            size: 1,
+            color: backgroundDotColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controls,
+          {
+            showZoom: true,
+            showFitView: true,
+            showInteractive: false,
+            position: isCompactViewport ? "bottom-right" : "top-right",
+            className: `!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? "scale-90 origin-bottom-right" : ""}`
+          }
+        ),
+        !isCompactViewport && /* @__PURE__ */ jsx(
+          MiniMap,
+          {
+            nodeStrokeWidth: 3,
+            nodeColor: (node) => {
+              const status = node.data?.status || "not_started";
+              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex;
+            },
+            maskColor: "rgba(0, 0, 0, 0.1)",
+            position: "bottom-left",
+            className: "!bg-card !border !border-border !rounded-lg"
+          }
+        ),
+        !editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsx("div", { className: "bg-card rounded-lg shadow-sm border border-border px-4 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-medium", children: t("workflows.graph.visualization") }) }) }),
+        editable && !isCompactViewport && /* @__PURE__ */ jsx(Panel, { position: "top-left", style: { margin: 10 }, children: /* @__PURE__ */ jsxs(Alert, { variant: "info", className: "max-w-sm", children: [
+          /* @__PURE__ */ jsx(Edit3, { className: "size-4" }),
+          /* @__PURE__ */ jsx(AlertDescription, { className: "font-medium", children: t("workflows.graph.editModeInfo") })
+        ] }) })
+      ]
+    }
+  ) });
+}
+export {
+  WorkflowGraphImpl as default
+};
+//# sourceMappingURL=WorkflowGraphImpl.js.map

package/dist/modules/workflows/components/WorkflowGraphImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowGraphImpl.tsx"],
+  "sourcesContent": ["'use client'\n\nimport '@xyflow/react/dist/style.css'\n\nimport { useCallback, useMemo, useEffect, useState } from 'react'\nimport {\n  ReactFlow,\n  Node,\n  Edge,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n  Connection,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode} from './nodes'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { STATUS_COLORS } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useTheme } from '@open-mercato/ui/theme'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport interface WorkflowGraphImplProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nexport default function WorkflowGraphImpl({\n  initialNodes = [],\n  initialEdges = [],\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  onNodeClick: onNodeClickProp,\n  onEdgeClick: onEdgeClickProp,\n  onConnect: onConnectProp,\n  editable = false,\n  className = '',\n  height = '600px',\n}: WorkflowGraphImplProps) {\n  const t = useT()\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)\n\n  const { resolvedTheme } = useTheme()\n  const isDark = resolvedTheme === 'dark'\n  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mediaQuery = window.matchMedia('(max-width: 1279px)')\n    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)\n\n    updateViewportMode()\n    mediaQuery.addEventListener('change', updateViewportMode)\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateViewportMode)\n    }\n  }, [])\n\n  useEffect(() => {\n    setNodes(initialNodes)\n  }, [initialNodes, setNodes])\n\n  useEffect(() => {\n    setEdges(initialEdges)\n  }, [initialEdges, setEdges])\n\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        onConnectProp(connection)\n      } else {\n        const newEdge = {\n          ...connection,\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  const handleNodesChange = useCallback(\n    (changes: any) => {\n      onNodesChange(changes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(changes)\n      }\n    },\n    [onNodesChange, onNodesChangeProp]\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: any) => {\n      onEdgesChange(changes)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(changes)\n      }\n    },\n    [onEdgesChange, onEdgesChangeProp]\n  )\n\n  const nodeTypes = useMemo(\n    () => ({\n      start: StartNode,\n      end: EndNode,\n      userTask: UserTaskNode,\n      automated: AutomatedNode,\n      subWorkflow: SubWorkflowNode,\n      waitForSignal: WaitForSignalNode,\n      waitForTimer: WaitForTimerNode,\n    }),\n    []\n  )\n\n  const edgeTypes = useMemo(\n    () => ({\n      workflowTransition: WorkflowTransitionEdge,\n    }),\n    []\n  )\n\n  return (\n    <div className={`workflow-graph-container ${className}`} style={{ height }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onNodeClick={onNodeClickProp}\n        onEdgeClick={onEdgeClickProp}\n        connectionMode={ConnectionMode.Loose}\n        fitView\n        fitViewOptions={{\n          padding: 0.2,\n          maxZoom: isCompactViewport ? 0.9 : 1,\n        }}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={16}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position={isCompactViewport ? 'bottom-right' : 'top-right'}\n          className={`!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? 'scale-90 origin-bottom-right' : ''}`}\n        />\n\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-left\"\n            className=\"!bg-card !border !border-border !rounded-lg\"\n          />\n        )}\n\n        {!editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <div className=\"bg-card rounded-lg shadow-sm border border-border px-4 py-2\">\n              <p className=\"text-sm text-muted-foreground font-medium\">\n                {t('workflows.graph.visualization')}\n              </p>\n            </div>\n          </Panel>\n        )}\n\n        {editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <Alert variant=\"info\" className=\"max-w-sm\">\n              <Edit3 className=\"size-4\" />\n              <AlertDescription className=\"font-medium\">\n                {t('workflows.graph.editModeInfo')}\n              </AlertDescription>\n            </Alert>\n          </Panel>\n        )}\n      </ReactFlow>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.6.3-develop.3901.1.ddad60693a",
+  "version": "0.6.3",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -243,16 +243,16 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@open-mercato/ai-assistant": "0.6.3-develop.3901.1.ddad60693a",
-    "@open-mercato/shared": "0.6.3-develop.3901.1.ddad60693a",
-    "@open-mercato/ui": "0.6.3-develop.3901.1.ddad60693a",
+    "@open-mercato/ai-assistant": "0.6.3",
+    "@open-mercato/shared": "0.6.3",
+    "@open-mercato/ui": "0.6.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@open-mercato/ai-assistant": "0.6.3-develop.3901.1.ddad60693a",
-    "@open-mercato/shared": "0.6.3-develop.3901.1.ddad60693a",
-    "@open-mercato/ui": "0.6.3-develop.3901.1.ddad60693a",
+    "@open-mercato/ai-assistant": "0.6.3",
+    "@open-mercato/shared": "0.6.3",
+    "@open-mercato/ui": "0.6.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -276,6 +276,5 @@
     "type": "git",
     "url": "https://github.com/open-mercato/open-mercato",
     "directory": "packages/core"
-  },
-  "stableVersion": "0.6.2"
+  }
 }

package/src/global.d.ts

@@ -0,0 +1,9 @@
+// Ambient module declarations for the @open-mercato/core TypeScript context.
+//
+// Next.js apps get these declarations via `next-env.d.ts`, but workspace
+// packages need them locally because they may import CSS side-effects from
+// .tsx files (e.g. `import 'pkg/dist/style.css'` inside a lazy-loaded
+// client component).
+
+declare module '*.css'
+declare module '*.scss'

package/src/modules/catalog/commands/variants.ts

@@ -103,7 +103,12 @@ async function loadVariantSnapshot(
 ): Promise<VariantSnapshot | null> {
   const record = await em.findOne(CatalogProductVariant, { id, deletedAt: null })
   if (!record) return null
-  const prices = options.includePrices ? await loadVariantPriceSnapshots(em, record.id) : null
+  const prices = options.includePrices
+    ? await loadVariantPriceSnapshots(em, record.id, {
+        tenantId: record.tenantId,
+        organizationId: record.organizationId,
+      })
+    : null
   const custom = await loadCustomFieldSnapshot(em, {
     entityId: E.catalog.catalog_product_variant,
     recordId: record.id,
@@ -223,14 +228,15 @@ type VariantPriceSnapshot = {
 
 async function loadVariantPriceSnapshots(
   em: EntityManager,
-  variantId: string
+  variantId: string,
+  scope: { tenantId: string; organizationId: string }
 ): Promise<VariantPriceSnapshot[]> {
   const prices = await findWithDecryption(
     em,
     CatalogProductPrice,
-    { variant: variantId },
+    { variant: variantId, tenantId: scope.tenantId, organizationId: scope.organizationId },
     { populate: ['priceKind', 'product', 'offer'] },
-    { tenantId: null, organizationId: null },
+    { tenantId: scope.tenantId, organizationId: scope.organizationId },
   )
   const snapshots: VariantPriceSnapshot[] = []
   for (const price of prices) {
@@ -904,7 +910,10 @@ const deleteVariantCommand: CommandHandler<
     const priceSnapshots =
       snapshot?.prices && snapshot.prices.length
         ? snapshot.prices
-        : await loadVariantPriceSnapshots(baseEm, id)
+        : await loadVariantPriceSnapshots(baseEm, id, {
+            tenantId: record.tenantId,
+            organizationId: record.organizationId,
+          })
 
     if (priceSnapshots.length) {
       await em.nativeDelete(CatalogProductPrice, { id: { $in: priceSnapshots.map((price) => price.id) } })

package/src/modules/customers/backend/customers/deals/create/page.tsx

@@ -1,13 +1,9 @@
 "use client"
 
 import * as React from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
-import { flash } from '@open-mercato/ui/backend/FlashMessages'
-import { createCrud } from '@open-mercato/ui/backend/utils/crud'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { DealForm, type DealFormSubmitPayload } from '../../../../components/detail/DealForm'
-import { useCurrencyDictionary } from '../../../../components/detail/hooks/useCurrencyDictionary'
+import { CreateDealForm } from '../../../../components/detail/create/CreateDealForm'
 
 const DEFAULT_RETURN_TO = '/backend/customers/deals'
 
@@ -24,73 +20,16 @@ function resolveReturnTo(value: string | null | undefined): string {
 }
 
 export default function CreateDealPage() {
-  const t = useT()
-  const router = useRouter()
   const searchParams = useSearchParams()
   const returnTo = React.useMemo(
     () => resolveReturnTo(searchParams?.get('returnTo') ?? null),
     [searchParams],
   )
-  const [isSubmitting, setIsSubmitting] = React.useState(false)
-  useCurrencyDictionary()
-
-  const handleCancel = React.useCallback(() => {
-    router.push(returnTo)
-  }, [router, returnTo])
-
-  const handleSubmit = React.useCallback(
-    async ({ base, custom }: DealFormSubmitPayload) => {
-      if (isSubmitting) return
-      setIsSubmitting(true)
-      try {
-        const payload: Record<string, unknown> = {
-          title: base.title,
-          status: base.status ?? undefined,
-          pipelineStage: base.pipelineStage ?? undefined,
-          pipelineId: base.pipelineId ?? undefined,
-          pipelineStageId: base.pipelineStageId ?? undefined,
-          valueAmount: typeof base.valueAmount === 'number' ? base.valueAmount : undefined,
-          valueCurrency: base.valueCurrency ?? undefined,
-          probability: typeof base.probability === 'number' ? base.probability : undefined,
-          expectedCloseAt: base.expectedCloseAt ?? undefined,
-          description: base.description ?? undefined,
-          personIds: Array.isArray(base.personIds) && base.personIds.length ? base.personIds : undefined,
-          companyIds: Array.isArray(base.companyIds) && base.companyIds.length ? base.companyIds : undefined,
-        }
-        if (Object.keys(custom).length) payload.customFields = custom
-
-        await createCrud('customers/deals', payload, {
-          errorMessage: t('customers.deals.create.error', 'Failed to create deal.'),
-        })
-        flash(t('customers.people.detail.deals.success', 'Deal created.'), 'success')
-        router.push(returnTo)
-      } catch (err) {
-        const message =
-          err instanceof Error
-            ? err.message
-            : t('customers.deals.create.error', 'Failed to create deal.')
-        flash(message, 'error')
-        throw err instanceof Error ? err : new Error(message)
-      } finally {
-        setIsSubmitting(false)
-      }
-    },
-    [isSubmitting, returnTo, router, t],
-  )
 
   return (
     <Page>
       <PageBody>
-        <DealForm
-          mode="create"
-          onSubmit={handleSubmit}
-          onCancel={handleCancel}
-          isSubmitting={isSubmitting}
-          submitLabel={t('customers.deals.create.submit', 'Create deal')}
-          embedded={false}
-          title={t('customers.deals.create.title', 'Create deal')}
-          backHref={returnTo}
-        />
+        <CreateDealForm returnTo={returnTo} />
       </PageBody>
     </Page>
   )

package/src/modules/customers/components/detail/DealForm.tsx

@@ -177,6 +177,8 @@ const schema = z.object({
   companyIds: z.array(z.string().trim().min(1)).optional(),
 }).passthrough()
 
+export const dealFormSchema = schema
+
 import { toDateInputValue as toDateInputValueOrNull } from '@open-mercato/shared/lib/date/format'
 
 function toDateInputValue(value: string | null | undefined): string {

package/src/modules/customers/components/detail/create/CreateDealForm.tsx

@@ -0,0 +1,254 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Briefcase, Save } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { FormHeader } from '@open-mercato/ui/backend/forms'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { dealFormSchema } from '../DealForm'
+import { createDictionarySelectLabels } from '../utils'
+import { DealSectionCard } from './DealSectionCard'
+import { DealDetailsFields } from './DealDetailsFields'
+import { DealAssociationsSection } from './DealAssociationsSection'
+import { DealCreateSidebar } from './DealCreateSidebar'
+import { useDealPipelines } from './useDealPipelines'
+import { useDealCustomFields } from './useDealCustomFields'
+import { EMPTY_VALUES, type BaseValues } from './dealFormTypes'
+
+const CONTEXT_ID = 'customers.deals.create'
+const DEAL_ENTITY_ID = 'customers:customer_deal'
+const CUSTOM_FIELDS_MANAGE_HREF = `/backend/entities/system/${encodeURIComponent(DEAL_ENTITY_ID)}`
+
+export type CreateDealFormProps = {
+  returnTo: string
+}
+
+export function CreateDealForm({ returnTo }: CreateDealFormProps) {
+  const t = useT()
+  const router = useRouter()
+  const tr = React.useCallback(
+    (key: string, fallback: string, params?: Record<string, string | number>) =>
+      translateWithFallback(t, key, fallback, params),
+    [t],
+  )
+
+  const [values, setValues] = React.useState<BaseValues>(EMPTY_VALUES)
+  const [errors, setErrors] = React.useState<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  const { pipelines, stages, loadStages } = useDealPipelines()
+  const {
+    customValues,
+    customFieldsLoaded,
+    customCount,
+    handleCustomChange,
+    handleCustomAttributesLoaded,
+    validateCustomFields,
+    collectNormalizedCustomValues,
+  } = useDealCustomFields(tr)
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: CONTEXT_ID,
+    blockedMessage: tr('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const statusLabels = React.useMemo(
+    () => createDictionarySelectLabels('deal-statuses', (key, fallback) => tr(key, fallback ?? key)),
+    [tr],
+  )
+
+  const patch = React.useCallback((partial: Partial<BaseValues>) => {
+    setValues((current) => ({ ...current, ...partial }))
+  }, [])
+
+  const handlePipelineChange = React.useCallback(
+    (id: string) => {
+      patch({ pipelineId: id, pipelineStageId: '' })
+      // loadStages resets stages to [] on failure; the rejection is intentionally ignored here.
+      loadStages(id).catch(() => {})
+    },
+    [loadStages, patch],
+  )
+
+  const handleCancel = React.useCallback(() => {
+    router.push(returnTo)
+  }, [returnTo, router])
+
+  const handleSubmit = React.useCallback(async () => {
+    if (isSubmitting) return
+    if (!customFieldsLoaded) {
+      flash(tr('customers.deals.create.sections.custom.loading', 'Loading custom fields...'), 'error')
+      return
+    }
+    const merged = { ...values, ...customValues }
+    const parsed = dealFormSchema.safeParse(merged)
+    if (!parsed.success) {
+      const fieldErrors: Record<string, string> = {}
+      for (const issue of parsed.error.issues) {
+        const key = typeof issue.path[0] === 'string' ? issue.path[0] : undefined
+        if (key && !fieldErrors[key]) fieldErrors[key] = tr(issue.message, issue.message)
+      }
+      setErrors(fieldErrors)
+      const firstMessage = Object.values(fieldErrors)[0]
+      if (firstMessage) flash(firstMessage, 'error')
+      return
+    }
+
+    const customFieldErrors = validateCustomFields(merged)
+    if (Object.keys(customFieldErrors).length) {
+      setErrors(customFieldErrors)
+      const firstMessage = Object.values(customFieldErrors)[0]
+      if (firstMessage) flash(firstMessage, 'error')
+      return
+    }
+
+    setErrors({})
+    setIsSubmitting(true)
+    try {
+      const data = parsed.data
+      const expectedCloseAt =
+        data.expectedCloseAt && data.expectedCloseAt.length
+          ? new Date(data.expectedCloseAt).toISOString()
+          : undefined
+      const payload: Record<string, unknown> = {
+        title: data.title,
+        status: data.status || undefined,
+        pipelineId: data.pipelineId || undefined,
+        pipelineStageId: data.pipelineStageId || undefined,
+        valueAmount: typeof data.valueAmount === 'number' ? data.valueAmount : undefined,
+        valueCurrency: data.valueCurrency || undefined,
+        probability: typeof data.probability === 'number' ? data.probability : undefined,
+        expectedCloseAt,
+        description: data.description && data.description.length ? data.description : undefined,
+        personIds: values.personIds.length ? values.personIds : undefined,
+        companyIds: values.companyIds.length ? values.companyIds : undefined,
+      }
+      const custom = collectNormalizedCustomValues(merged)
+      if (Object.keys(custom).length) payload.customFields = custom
+
+      await runMutation({
+        operation: () =>
+          createCrud('customers/deals', payload, {
+            errorMessage: tr('customers.deals.create.error', 'Failed to create deal.'),
+          }),
+        context: { formId: CONTEXT_ID, resourceKind: 'customers.deal', retryLastMutation },
+        mutationPayload: payload,
+      })
+      flash(tr('customers.people.detail.deals.success', 'Deal created.'), 'success')
+      router.push(returnTo)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : tr('customers.deals.create.error', 'Failed to create deal.')
+      flash(message, 'error')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [
+    collectNormalizedCustomValues,
+    customFieldsLoaded,
+    customValues,
+    isSubmitting,
+    retryLastMutation,
+    returnTo,
+    router,
+    runMutation,
+    tr,
+    validateCustomFields,
+    values,
+  ])
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLFormElement>) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit],
+  )
+
+  const onFormSubmit = React.useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      handleSubmit()
+    },
+    [handleSubmit],
+  )
+
+  const cancelLabel = tr('customers.deals.create.cancel', 'Cancel')
+  const submitLabel = tr('customers.deals.create.submit', 'Create deal')
+  const submitDisabled = !customFieldsLoaded
+
+  return (
+    <form className="mx-auto max-w-screen-2xl" onKeyDown={onKeyDown} onSubmit={onFormSubmit} noValidate>
+      <FormHeader
+        backHref={returnTo}
+        backLabel={tr('customers.deals.create.back', 'Back to deals')}
+      />
+
+      <div className="mt-6 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_330px]">
+        <div className="space-y-4">
+          <DealSectionCard
+            icon={Briefcase}
+            title={tr('customers.deals.create.title', 'Create deal')}
+            subtitle={tr('customers.deals.create.sections.details.subtitle', 'Core opportunity info')}
+            actions={
+              <>
+                <Button type="button" variant="outline" onClick={handleCancel} disabled={isSubmitting}>
+                  {cancelLabel}
+                </Button>
+                <Button type="button" onClick={handleSubmit} disabled={isSubmitting || submitDisabled}>
+                  {isSubmitting ? <Spinner className="size-4" /> : <Save className="size-4" />}
+                  {submitLabel}
+                </Button>
+              </>
+            }
+          >
+            <DealDetailsFields
+              values={values}
+              errors={errors}
+              isSubmitting={isSubmitting}
+              patch={patch}
+              onPipelineChange={handlePipelineChange}
+              pipelines={pipelines}
+              stages={stages}
+              statusLabels={statusLabels}
+              tr={tr}
+            />
+          </DealSectionCard>
+
+          <DealAssociationsSection
+            tr={tr}
+            personIds={values.personIds}
+            companyIds={values.companyIds}
+            onPeopleChange={(next) => patch({ personIds: next })}
+            onCompaniesChange={(next) => patch({ companyIds: next })}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <DealCreateSidebar
+          tr={tr}
+          customValues={customValues}
+          onCustomChange={handleCustomChange}
+          errors={errors}
+          disabled={isSubmitting}
+          customCount={customCount}
+          manageHref={CUSTOM_FIELDS_MANAGE_HREF}
+          onCustomLoaded={handleCustomAttributesLoaded}
+        />
+      </div>
+    </form>
+  )
+}
+
+export default CreateDealForm