@contractspec/example.crm-pipeline 1.46.0 → 1.47.0

package/dist/ui/CrmPipelineBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmPipelineBoard.js","names":[],"sources":["../../src/ui/CrmPipelineBoard.tsx"],"sourcesContent":["'use client';\n\n/**\n * CRM Pipeline Board - Kanban-style deal board\n *\n * Features:\n * - Visual pipeline stages\n * - Deal cards with click actions\n * - Quick move dropdown per card\n * - Drag-and-drop ready (UI only, no lib dependency)\n */\nimport { useState } from 'react';\n// import { Button } from '@contractspec/lib.design-system';\nimport type { Deal } from './hooks/useDealList';\nimport { CrmDealCard } from './CrmDealCard';\n\ninterface CrmPipelineBoardProps {\n  dealsByStage: Record<string, Deal[]>;\n  stages: { id: string; name: string; position: number }[];\n  onDealClick?: (dealId: string) => void;\n  onDealMove?: (dealId: string, toStageId: string) => void;\n}\n\nfunction formatCurrency(value: number): string {\n  if (value >= 1000000) return `$${(value / 1000000).toFixed(1)}M`;\n  if (value >= 1000) return `$${(value / 1000).toFixed(0)}K`;\n  return `$${value}`;\n}\n\nexport function CrmPipelineBoard({\n  dealsByStage,\n  stages,\n  onDealClick,\n  onDealMove,\n}: CrmPipelineBoardProps) {\n  // Track which deal has the quick-move dropdown open\n  const [quickMoveOpen, setQuickMoveOpen] = useState<string | null>(null);\n\n  // Sort stages by position\n  const sortedStages = [...stages].sort((a, b) => a.position - b.position);\n\n  const handleQuickMove = (dealId: string, toStageId: string) => {\n    onDealMove?.(dealId, toStageId);\n    setQuickMoveOpen(null);\n  };\n\n  return (\n    <div className=\"flex gap-4 overflow-x-auto pb-4\">\n      {sortedStages.map((stage) => {\n        const deals = dealsByStage[stage.id] ?? [];\n        const stageValue = deals.reduce((sum, d) => sum + d.value, 0);\n\n        return (\n          <div\n            key={stage.id}\n            className=\"bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg\"\n          >\n            {/* Stage Header */}\n            <div className=\"border-border flex items-center justify-between border-b px-3 py-2\">\n              <div>\n                <h3 className=\"font-medium\">{stage.name}</h3>\n                <p className=\"text-muted-foreground text-xs\">\n                  {deals.length} deals · {formatCurrency(stageValue)}\n                </p>\n              </div>\n              <span className=\"bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium\">\n                {deals.length}\n              </span>\n            </div>\n\n            {/* Deals Column */}\n            <div className=\"flex flex-1 flex-col gap-2 p-2\">\n              {deals.length === 0 ? (\n                <div className=\"border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed text-xs\">\n                  No deals\n                </div>\n              ) : (\n                deals.map((deal) => (\n                  <div key={deal.id} className=\"group relative\">\n                    <CrmDealCard\n                      deal={deal}\n                      onClick={() => onDealClick?.(deal.id)}\n                    />\n\n                    {/* Quick Move Button */}\n                    {deal.status === 'OPEN' && onDealMove && (\n                      <div className=\"absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100\">\n                        <button\n                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            setQuickMoveOpen(\n                              quickMoveOpen === deal.id ? null : deal.id\n                            );\n                          }}\n                          className=\"bg-background border-border hover:bg-muted flex h-6 w-6 items-center justify-center rounded border text-xs shadow-sm\"\n                          title=\"Quick move\"\n                        >\n                          ➡️\n                        </button>\n\n                        {/* Quick Move Dropdown */}\n                        {quickMoveOpen === deal.id && (\n                          <div className=\"bg-card border-border absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border py-1 shadow-lg\">\n                            <p className=\"text-muted-foreground px-3 py-1 text-xs font-medium\">\n                              Move to:\n                            </p>\n                            {sortedStages\n                              .filter((s) => s.id !== deal.stageId)\n                              .map((s) => (\n                                <button\n                                  key={s.id}\n                                  type=\"button\"\n                                  onClick={(e) => {\n                                    e.stopPropagation();\n                                    handleQuickMove(deal.id, s.id);\n                                  }}\n                                  className=\"hover:bg-muted w-full px-3 py-1.5 text-left text-sm\"\n                                >\n                                  {s.name}\n                                </button>\n                              ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,SAAS,eAAe,OAAuB;AAC7C,KAAI,SAAS,IAAS,QAAO,KAAK,QAAQ,KAAS,QAAQ,EAAE,CAAC;AAC9D,KAAI,SAAS,IAAM,QAAO,KAAK,QAAQ,KAAM,QAAQ,EAAE,CAAC;AACxD,QAAO,IAAI;;AAGb,SAAgB,iBAAiB,EAC/B,cACA,QACA,aACA,cACwB;CAExB,MAAM,CAAC,eAAe,oBAAoB,SAAwB,KAAK;CAGvE,MAAM,eAAe,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS;CAExE,MAAM,mBAAmB,QAAgB,cAAsB;AAC7D,eAAa,QAAQ,UAAU;AAC/B,mBAAiB,KAAK;;AAGxB,QACE,oBAAC;EAAI,WAAU;YACZ,aAAa,KAAK,UAAU;GAC3B,MAAM,QAAQ,aAAa,MAAM,OAAO,EAAE;GAC1C,MAAM,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,EAAE;AAE7D,UACE,qBAAC;IAEC,WAAU;eAGV,qBAAC;KAAI,WAAU;gBACb,qBAAC,oBACC,oBAAC;MAAG,WAAU;gBAAe,MAAM;OAAU,EAC7C,qBAAC;MAAE,WAAU;;OACV,MAAM;OAAO;OAAU,eAAe,WAAW;;OAChD,IACA,EACN,oBAAC;MAAK,WAAU;gBACb,MAAM;OACF;MACH,EAGN,oBAAC;KAAI,WAAU;eACZ,MAAM,WAAW,IAChB,oBAAC;MAAI,WAAU;gBAAmI;OAE5I,GAEN,MAAM,KAAK,SACT,qBAAC;MAAkB,WAAU;iBAC3B,oBAAC;OACO;OACN,eAAe,cAAc,KAAK,GAAG;QACrC,EAGD,KAAK,WAAW,UAAU,cACzB,qBAAC;OAAI,WAAU;kBACb,oBAAC;QACC,MAAK;QACL,UAAU,MAAM;AACd,WAAE,iBAAiB;AACnB,0BACE,kBAAkB,KAAK,KAAK,OAAO,KAAK,GACzC;;QAEH,WAAU;QACV,OAAM;kBACP;SAEQ,EAGR,kBAAkB,KAAK,MACtB,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAE,WAAU;mBAAsD;UAE/D,EACH,aACE,QAAQ,MAAM,EAAE,OAAO,KAAK,QAAQ,CACpC,KAAK,MACJ,oBAAC;SAEC,MAAK;SACL,UAAU,MAAM;AACd,YAAE,iBAAiB;AACnB,0BAAgB,KAAK,IAAI,EAAE,GAAG;;SAEhC,WAAU;mBAET,EAAE;WARE,EAAE,GASA,CACT;SACA;QAEJ;QA9CA,KAAK,GAgDT,CACN;MAEA;MA3ED,MAAM,GA4EP;IAER;GACE"}

package/dist/ui/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { UseDealListOptions, useDealList } from "./useDealList.js";
+import { UseDealMutationsOptions, useDealMutations } from "./useDealMutations.js";
+export { type UseDealListOptions, type UseDealMutationsOptions, useDealList, useDealMutations };

package/dist/ui/hooks/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import { useDealList } from "./useDealList.js";
+import { useDealMutations } from "./useDealMutations.js";
+
+export { useDealList, useDealMutations };

package/dist/ui/hooks/useDealList.d.ts

@@ -0,0 +1,35 @@
+import { Deal as Deal$1, ListDealsOutput as ListDealsOutput$1, Stage } from "../../handlers/crm.handlers.js";
+
+//#region src/ui/hooks/useDealList.d.ts
+type Deal = Deal$1;
+type ListDealsOutput = ListDealsOutput$1;
+interface UseDealListOptions {
+  pipelineId?: string;
+  stageId?: string;
+  status?: 'OPEN' | 'WON' | 'LOST' | 'all';
+  search?: string;
+  limit?: number;
+}
+declare function useDealList(options?: UseDealListOptions): {
+  data: ListDealsOutput$1 | null;
+  dealsByStage: Record<string, Deal$1[]>;
+  stages: Stage[];
+  loading: boolean;
+  error: Error | null;
+  stats: {
+    total: number;
+    totalValue: number;
+    openCount: number;
+    openValue: number;
+    wonCount: number;
+    wonValue: number;
+    lostCount: number;
+  } | null;
+  page: number;
+  refetch: () => Promise<void>;
+  nextPage: () => void;
+  prevPage: () => false | void;
+};
+//#endregion
+export { Deal, ListDealsOutput, UseDealListOptions, useDealList };
+//# sourceMappingURL=useDealList.d.ts.map

package/dist/ui/hooks/useDealList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealList.d.ts","names":[],"sources":["../../../src/ui/hooks/useDealList.ts"],"sourcesContent":[],"mappings":";;;KAiBY,IAAA,GAAO;KACP,eAAA,GAAkB;AADlB,UAGK,kBAAA,CAHa;EAClB,UAAA,CAAA,EAAA,MAAe;EAEV,OAAA,CAAA,EAAA,MAAA;EAQD,MAAA,CAAA,EAAA,MAAW,GAAA,KAAA,GAAA,MAAA,GAAA,KAAA;EAAU,MAAA,CAAA,EAAA,MAAA;;;iBAArB,WAAA,WAAqB"}

package/dist/ui/hooks/useDealList.js

@@ -0,0 +1,94 @@
+'use client';
+
+import "../../handlers/crm.handlers.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useDealList.ts
+/**
+* Hook for fetching and managing deal list data
+*
+* Uses runtime-local database-backed handlers.
+*/
+function useDealList(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { crm } = handlers;
+	const [data, setData] = useState(null);
+	const [dealsByStage, setDealsByStage] = useState({});
+	const [stages, setStages] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [page, setPage] = useState(1);
+	const pipelineId = options.pipelineId ?? "pipeline-1";
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const [dealsResult, stageDealsResult, stagesResult] = await Promise.all([
+				crm.listDeals({
+					projectId,
+					pipelineId,
+					stageId: options.stageId,
+					status: options.status === "all" ? void 0 : options.status,
+					search: options.search,
+					limit: options.limit ?? 50,
+					offset: (page - 1) * (options.limit ?? 50)
+				}),
+				crm.getDealsByStage({
+					projectId,
+					pipelineId
+				}),
+				crm.getPipelineStages({ pipelineId })
+			]);
+			setData(dealsResult);
+			setDealsByStage(stageDealsResult);
+			setStages(stagesResult);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Unknown error"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		crm,
+		projectId,
+		pipelineId,
+		options.stageId,
+		options.status,
+		options.search,
+		options.limit,
+		page
+	]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		data,
+		dealsByStage,
+		stages,
+		loading,
+		error,
+		stats: useMemo(() => {
+			if (!data) return null;
+			const open = data.deals.filter((d) => d.status === "OPEN");
+			const won = data.deals.filter((d) => d.status === "WON");
+			const lost = data.deals.filter((d) => d.status === "LOST");
+			return {
+				total: data.total,
+				totalValue: data.totalValue,
+				openCount: open.length,
+				openValue: open.reduce((sum, d) => sum + d.value, 0),
+				wonCount: won.length,
+				wonValue: won.reduce((sum, d) => sum + d.value, 0),
+				lostCount: lost.length
+			};
+		}, [data]),
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1)
+	};
+}
+
+//#endregion
+export { useDealList };
+//# sourceMappingURL=useDealList.js.map

package/dist/ui/hooks/useDealList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealList.js","names":[],"sources":["../../../src/ui/hooks/useDealList.ts"],"sourcesContent":["'use client';\n\n/**\n * Hook for fetching and managing deal list data\n *\n * Uses runtime-local database-backed handlers.\n */\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport {\n  type CrmHandlers,\n  type Deal as RuntimeDeal,\n  type ListDealsOutput as RuntimeListDealsOutput,\n  type Stage,\n} from '../../handlers/crm.handlers';\n\n// Re-export types for convenience\nexport type Deal = RuntimeDeal;\nexport type ListDealsOutput = RuntimeListDealsOutput;\n\nexport interface UseDealListOptions {\n  pipelineId?: string;\n  stageId?: string;\n  status?: 'OPEN' | 'WON' | 'LOST' | 'all';\n  search?: string;\n  limit?: number;\n}\n\nexport function useDealList(options: UseDealListOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();\n  const { crm } = handlers;\n\n  const [data, setData] = useState<ListDealsOutput | null>(null);\n  const [dealsByStage, setDealsByStage] = useState<Record<string, Deal[]>>({});\n  const [stages, setStages] = useState<Stage[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [page, setPage] = useState(1);\n\n  const pipelineId = options.pipelineId ?? 'pipeline-1';\n\n  const fetchData = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const [dealsResult, stageDealsResult, stagesResult] = await Promise.all([\n        crm.listDeals({\n          projectId,\n          pipelineId,\n          stageId: options.stageId,\n          status: options.status === 'all' ? undefined : options.status,\n          search: options.search,\n          limit: options.limit ?? 50,\n          offset: (page - 1) * (options.limit ?? 50),\n        }),\n        crm.getDealsByStage({ projectId, pipelineId }),\n        crm.getPipelineStages({ pipelineId }),\n      ]);\n      setData(dealsResult);\n      setDealsByStage(stageDealsResult);\n      setStages(stagesResult);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error'));\n    } finally {\n      setLoading(false);\n    }\n  }, [\n    crm,\n    projectId,\n    pipelineId,\n    options.stageId,\n    options.status,\n    options.search,\n    options.limit,\n    page,\n  ]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  // Calculate stats\n  const stats = useMemo(() => {\n    if (!data) return null;\n    const open = data.deals.filter((d: Deal) => d.status === 'OPEN');\n    const won = data.deals.filter((d: Deal) => d.status === 'WON');\n    const lost = data.deals.filter((d: Deal) => d.status === 'LOST');\n\n    return {\n      total: data.total,\n      totalValue: data.totalValue,\n      openCount: open.length,\n      openValue: open.reduce((sum: number, d: Deal) => sum + d.value, 0),\n      wonCount: won.length,\n      wonValue: won.reduce((sum: number, d: Deal) => sum + d.value, 0),\n      lostCount: lost.length,\n    };\n  }, [data]);\n\n  return {\n    data,\n    dealsByStage,\n    stages,\n    loading,\n    error,\n    stats,\n    page,\n    refetch: fetchData,\n    nextPage: () => setPage((p) => p + 1),\n    prevPage: () => page > 1 && setPage((p) => p - 1),\n  };\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,YAAY,UAA8B,EAAE,EAAE;CAC5D,MAAM,EAAE,UAAU,cAAc,oBAA0C;CAC1E,MAAM,EAAE,QAAQ;CAEhB,MAAM,CAAC,MAAM,WAAW,SAAiC,KAAK;CAC9D,MAAM,CAAC,cAAc,mBAAmB,SAAiC,EAAE,CAAC;CAC5E,MAAM,CAAC,QAAQ,aAAa,SAAkB,EAAE,CAAC;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CAEnC,MAAM,aAAa,QAAQ,cAAc;CAEzC,MAAM,YAAY,YAAY,YAAY;AACxC,aAAW,KAAK;AAChB,WAAS,KAAK;AAEd,MAAI;GACF,MAAM,CAAC,aAAa,kBAAkB,gBAAgB,MAAM,QAAQ,IAAI;IACtE,IAAI,UAAU;KACZ;KACA;KACA,SAAS,QAAQ;KACjB,QAAQ,QAAQ,WAAW,QAAQ,SAAY,QAAQ;KACvD,QAAQ,QAAQ;KAChB,OAAO,QAAQ,SAAS;KACxB,SAAS,OAAO,MAAM,QAAQ,SAAS;KACxC,CAAC;IACF,IAAI,gBAAgB;KAAE;KAAW;KAAY,CAAC;IAC9C,IAAI,kBAAkB,EAAE,YAAY,CAAC;IACtC,CAAC;AACF,WAAQ,YAAY;AACpB,mBAAgB,iBAAiB;AACjC,aAAU,aAAa;WAChB,KAAK;AACZ,YAAS,eAAe,QAAQ,sBAAM,IAAI,MAAM,gBAAgB,CAAC;YACzD;AACR,cAAW,MAAM;;IAElB;EACD;EACA;EACA;EACA,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR;EACD,CAAC;AAEF,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAoBf,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,OAvBY,cAAc;AAC1B,OAAI,CAAC,KAAM,QAAO;GAClB,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,OAAO;GAChE,MAAM,MAAM,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,MAAM;GAC9D,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,OAAO;AAEhE,UAAO;IACL,OAAO,KAAK;IACZ,YAAY,KAAK;IACjB,WAAW,KAAK;IAChB,WAAW,KAAK,QAAQ,KAAa,MAAY,MAAM,EAAE,OAAO,EAAE;IAClE,UAAU,IAAI;IACd,UAAU,IAAI,QAAQ,KAAa,MAAY,MAAM,EAAE,OAAO,EAAE;IAChE,WAAW,KAAK;IACjB;KACA,CAAC,KAAK,CAAC;EASR;EACA,SAAS;EACT,gBAAgB,SAAS,MAAM,IAAI,EAAE;EACrC,gBAAgB,OAAO,KAAK,SAAS,MAAM,IAAI,EAAE;EAClD"}

package/dist/ui/hooks/useDealMutations.d.ts

@@ -0,0 +1,26 @@
+import { CreateDealInput, Deal, LoseDealInput, MoveDealInput, WinDealInput } from "../../handlers/crm.handlers.js";
+
+//#region src/ui/hooks/useDealMutations.d.ts
+interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+interface UseDealMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+declare function useDealMutations(options?: UseDealMutationsOptions): {
+  createDeal: (input: CreateDealInput) => Promise<Deal | null>;
+  moveDeal: (input: MoveDealInput) => Promise<Deal | null>;
+  winDeal: (input: WinDealInput) => Promise<Deal | null>;
+  loseDeal: (input: LoseDealInput) => Promise<Deal | null>;
+  createState: MutationState<Deal>;
+  moveState: MutationState<Deal>;
+  winState: MutationState<Deal>;
+  loseState: MutationState<Deal>;
+  isLoading: boolean;
+};
+//#endregion
+export { MutationState, UseDealMutationsOptions, useDealMutations };
+//# sourceMappingURL=useDealMutations.d.ts.map

package/dist/ui/hooks/useDealMutations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealMutations.d.ts","names":[],"sources":["../../../src/ui/hooks/useDealMutations.ts"],"sourcesContent":[],"mappings":";;;UAoBiB;;EAAA,KAAA,EAER,KAFQ,GAAA,IAAa;EAMb,IAAA,EAHT,CAGS,GAAA,IAAA;AAKjB;AAA0C,UALzB,uBAAA,CAKyB;EAgCxB,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA0B,OAAA,CAAA,EAAA,CAAA,KAAA,EAnCxB,KAmCwB,EAAA,GAAA,IAAA;;AAyB1B,iBAzDF,gBAAA,CAyDE,OAAA,CAAA,EAzDwB,uBAyDxB,CAAA,EAAA;EAAwB,UAAA,EAAA,CAAA,KAAA,EAzBxB,eAyBwB,EAAA,GAzBN,OAyBM,CAzBE,IAyBF,GAAA,IAAA,CAAA;EAAR,QAAA,EAAA,CAAA,KAAA,EAAhB,aAAgB,EAAA,GAAA,OAAA,CAAQ,IAAR,GAAA,IAAA,CAAA;EAsBhB,OAAA,EAAA,CAAA,KAAA,EAAA,YAAA,EAAA,GAAe,OAAf,CAAuB,IAAvB,GAAA,IAAA,CAAA;EAAuB,QAAA,EAAA,CAAA,KAAA,EAsBvB,aAtBuB,EAAA,GAsBP,OAtBO,CAsBC,IAtBD,GAAA,IAAA,CAAA;EAAR,WAAA,eAAA,KAAA,CAAA;EAsBf,SAAA,eAAA,KAAA,CAAA;EAAwB,QAAA,eAAA,KAAA,CAAA;EAAR,SAAA,eAAA,KAAA,CAAA"}

package/dist/ui/hooks/useDealMutations.js

@@ -0,0 +1,159 @@
+import { useCallback, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useDealMutations.ts
+/**
+* Hook for CRM deal mutations (commands)
+*
+* Uses runtime-local database-backed handlers for:
+* - CreateDealContract
+* - MoveDealContract
+* - WinDealContract
+* - LoseDealContract
+*/
+function useDealMutations(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { crm } = handlers;
+	const [createState, setCreateState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [moveState, setMoveState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [winState, setWinState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [loseState, setLoseState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	return {
+		createDeal: useCallback(async (input) => {
+			setCreateState({
+				loading: true,
+				error: null,
+				data: null
+			});
+			try {
+				const result = await crm.createDeal(input, {
+					projectId,
+					ownerId: "user-1"
+				});
+				setCreateState({
+					loading: false,
+					error: null,
+					data: result
+				});
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to create deal");
+				setCreateState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [
+			crm,
+			projectId,
+			options
+		]),
+		moveDeal: useCallback(async (input) => {
+			setMoveState({
+				loading: true,
+				error: null,
+				data: null
+			});
+			try {
+				const result = await crm.moveDeal(input);
+				setMoveState({
+					loading: false,
+					error: null,
+					data: result
+				});
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to move deal");
+				setMoveState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		winDeal: useCallback(async (input) => {
+			setWinState({
+				loading: true,
+				error: null,
+				data: null
+			});
+			try {
+				const result = await crm.winDeal(input);
+				setWinState({
+					loading: false,
+					error: null,
+					data: result
+				});
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to mark deal as won");
+				setWinState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		loseDeal: useCallback(async (input) => {
+			setLoseState({
+				loading: true,
+				error: null,
+				data: null
+			});
+			try {
+				const result = await crm.loseDeal(input);
+				setLoseState({
+					loading: false,
+					error: null,
+					data: result
+				});
+				options.onSuccess?.();
+				return result;
+			} catch (err) {
+				const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to mark deal as lost");
+				setLoseState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		createState,
+		moveState,
+		winState,
+		loseState,
+		isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
+	};
+}
+
+//#endregion
+export { useDealMutations };
+//# sourceMappingURL=useDealMutations.js.map

package/dist/ui/hooks/useDealMutations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealMutations.js","names":[],"sources":["../../../src/ui/hooks/useDealMutations.ts"],"sourcesContent":["/**\n * Hook for CRM deal mutations (commands)\n *\n * Uses runtime-local database-backed handlers for:\n * - CreateDealContract\n * - MoveDealContract\n * - WinDealContract\n * - LoseDealContract\n */\nimport { useCallback, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport type {\n  CreateDealInput,\n  CrmHandlers,\n  Deal,\n  LoseDealInput,\n  MoveDealInput,\n  WinDealInput,\n} from '../../handlers/crm.handlers';\n\nexport interface MutationState<T> {\n  loading: boolean;\n  error: Error | null;\n  data: T | null;\n}\n\nexport interface UseDealMutationsOptions {\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n}\n\nexport function useDealMutations(options: UseDealMutationsOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();\n  const { crm } = handlers;\n\n  const [createState, setCreateState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [moveState, setMoveState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [winState, setWinState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [loseState, setLoseState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  /**\n   * Create a new deal\n   */\n  const createDeal = useCallback(\n    async (input: CreateDealInput): Promise<Deal | null> => {\n      setCreateState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.createDeal(input, {\n          projectId,\n          ownerId: 'user-1', // Demo user\n        });\n        setCreateState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to create deal');\n        setCreateState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, projectId, options]\n  );\n\n  /**\n   * Move a deal to a different stage\n   */\n  const moveDeal = useCallback(\n    async (input: MoveDealInput): Promise<Deal | null> => {\n      setMoveState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.moveDeal(input);\n        setMoveState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to move deal');\n        setMoveState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  /**\n   * Mark a deal as won\n   */\n  const winDeal = useCallback(\n    async (input: WinDealInput): Promise<Deal | null> => {\n      setWinState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.winDeal(input);\n        setWinState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to mark deal as won');\n        setWinState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  /**\n   * Mark a deal as lost\n   */\n  const loseDeal = useCallback(\n    async (input: LoseDealInput): Promise<Deal | null> => {\n      setLoseState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.loseDeal(input);\n        setLoseState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to mark deal as lost');\n        setLoseState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  return {\n    // Mutations\n    createDeal,\n    moveDeal,\n    winDeal,\n    loseDeal,\n\n    // State\n    createState,\n    moveState,\n    winState,\n    loseState,\n\n    // Convenience\n    isLoading:\n      createState.loading ||\n      moveState.loading ||\n      winState.loading ||\n      loseState.loading,\n  };\n}\n\n// Note: Types are re-exported from the handlers package\n// Consumers should import types directly from '@contractspec/example.crm-pipeline/handlers'\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAAiB,UAAmC,EAAE,EAAE;CACtE,MAAM,EAAE,UAAU,cAAc,oBAA0C;CAC1E,MAAM,EAAE,QAAQ;CAEhB,MAAM,CAAC,aAAa,kBAAkB,SAA8B;EAClE,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,SAA8B;EAC9D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,UAAU,eAAe,SAA8B;EAC5D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,SAA8B;EAC9D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;AA6FF,QAAO;EAEL,YA1FiB,YACjB,OAAO,UAAiD;AACtD,kBAAe;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AAC1D,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,WAAW,OAAO;KACzC;KACA,SAAS;KACV,CAAC;AACF,mBAAe;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC7D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,wBAAwB;AACjE,mBAAe;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACrD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX;GAAC;GAAK;GAAW;GAAQ,CAC1B;EAuEC,UAlEe,YACf,OAAO,UAA+C;AACpD,gBAAa;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACxD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,SAAS,MAAM;AACxC,iBAAa;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC3D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,sBAAsB;AAC/D,iBAAa;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACnD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EAkDC,SA7Cc,YACd,OAAO,UAA8C;AACnD,eAAY;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACvD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,QAAQ,MAAM;AACvC,gBAAY;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC1D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,6BAA6B;AACtE,gBAAY;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AAClD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EA6BC,UAxBe,YACf,OAAO,UAA+C;AACpD,gBAAa;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACxD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,SAAS,MAAM;AACxC,iBAAa;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC3D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,8BAA8B;AACvE,iBAAa;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACnD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EAUC;EACA;EACA;EACA;EAGA,WACE,YAAY,WACZ,UAAU,WACV,SAAS,WACT,UAAU;EACb"}

package/dist/ui/index.d.ts

@@ -0,0 +1,14 @@
+import { CrmDashboard } from "./CrmDashboard.js";
+import { UseDealListOptions, useDealList } from "./hooks/useDealList.js";
+import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
+import { CrmDealCard } from "./CrmDealCard.js";
+import { CreateDealModal } from "./modals/CreateDealModal.js";
+import { DealActionsModal } from "./modals/DealActionsModal.js";
+import "./modals/index.js";
+import { UseDealMutationsOptions, useDealMutations } from "./hooks/useDealMutations.js";
+import "./hooks/index.js";
+import { crmPipelineReactRenderer } from "./renderers/pipeline.renderer.js";
+import { crmDashboardMarkdownRenderer, crmPipelineMarkdownRenderer } from "./renderers/pipeline.markdown.js";
+import "./renderers/index.js";
+import { crmDemoOverlay, crmOverlays, crmSalesRepOverlay } from "./overlays/demo-overlays.js";
+export { CreateDealModal, CrmDashboard, CrmDealCard, CrmPipelineBoard, DealActionsModal, UseDealListOptions, UseDealMutationsOptions, crmDashboardMarkdownRenderer, crmDemoOverlay, crmOverlays, crmPipelineMarkdownRenderer, crmPipelineReactRenderer, crmSalesRepOverlay, useDealList, useDealMutations };

package/dist/ui/index.js

@@ -0,0 +1,15 @@
+import { useDealList } from "./hooks/useDealList.js";
+import { useDealMutations } from "./hooks/useDealMutations.js";
+import { CrmDealCard } from "./CrmDealCard.js";
+import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
+import { CreateDealModal } from "./modals/CreateDealModal.js";
+import { DealActionsModal } from "./modals/DealActionsModal.js";
+import { CrmDashboard } from "./CrmDashboard.js";
+import "./modals/index.js";
+import "./hooks/index.js";
+import { crmPipelineReactRenderer } from "./renderers/pipeline.renderer.js";
+import { crmDashboardMarkdownRenderer, crmPipelineMarkdownRenderer } from "./renderers/pipeline.markdown.js";
+import "./renderers/index.js";
+import { crmDemoOverlay, crmOverlays, crmSalesRepOverlay } from "./overlays/demo-overlays.js";
+
+export { CreateDealModal, CrmDashboard, CrmDealCard, CrmPipelineBoard, DealActionsModal, crmDashboardMarkdownRenderer, crmDemoOverlay, crmOverlays, crmPipelineMarkdownRenderer, crmPipelineReactRenderer, crmSalesRepOverlay, useDealList, useDealMutations };

package/dist/ui/modals/CreateDealModal.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/ui/modals/CreateDealModal.d.ts
+interface CreateDealInput {
+  name: string;
+  value: number;
+  currency: string;
+  pipelineId: string;
+  stageId: string;
+  expectedCloseDate?: Date;
+  contactId?: string;
+  companyId?: string;
+}
+interface CreateDealModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (input: CreateDealInput) => Promise<void>;
+  stages: {
+    id: string;
+    name: string;
+  }[];
+  isLoading?: boolean;
+}
+declare function CreateDealModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  stages,
+  isLoading
+}: CreateDealModalProps): react_jsx_runtime2.JSX.Element | null;
+//#endregion
+export { CreateDealInput, CreateDealModal };
+//# sourceMappingURL=CreateDealModal.d.ts.map

package/dist/ui/modals/CreateDealModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateDealModal.d.ts","names":[],"sources":["../../../src/ui/modals/CreateDealModal.tsx"],"sourcesContent":[],"mappings":";;;UAWiB,eAAA;;;EAAA,QAAA,EAAA,MAAA;EAWP,UAAA,EAAA,MAAA;EAWM,OAAA,EAAA,MAAA;EACd,iBAAA,CAAA,EAjBoB,IAiBpB;EACA,SAAA,CAAA,EAAA,MAAA;EACA,SAAA,CAAA,EAAA,MAAA;;UAdQ,oBAAA,CAgBR;EACC,MAAA,EAAA,OAAA;EAAoB,OAAA,EAAA,GAAA,GAAA,IAAA;EAAA,QAAA,EAAA,CAAA,KAAA,EAdH,eAcG,EAAA,GAdiB,OAcjB,CAAA,IAAA,CAAA;;;;;;;iBANP,eAAA;;;;;;GAMb,uBAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/modals/CreateDealModal.js

@@ -0,0 +1,183 @@
+'use client';
+
+import { useState } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/modals/CreateDealModal.tsx
+/**
+* CreateDealModal - Form for creating a new deal
+*
+* Wires to CreateDealContract via useDealMutations hook.
+*/
+const CURRENCIES = [
+	"USD",
+	"EUR",
+	"GBP",
+	"CAD"
+];
+const DEFAULT_PIPELINE_ID = "pipeline-1";
+function CreateDealModal({ isOpen, onClose, onSubmit, stages, isLoading = false }) {
+	const [name, setName] = useState("");
+	const [value, setValue] = useState("");
+	const [currency, setCurrency] = useState("USD");
+	const [stageId, setStageId] = useState(stages[0]?.id ?? "");
+	const [expectedCloseDate, setExpectedCloseDate] = useState("");
+	const [error, setError] = useState(null);
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError(null);
+		if (!name.trim()) {
+			setError("Deal name is required");
+			return;
+		}
+		const numericValue = parseFloat(value);
+		if (isNaN(numericValue) || numericValue <= 0) {
+			setError("Value must be a positive number");
+			return;
+		}
+		if (!stageId) {
+			setError("Please select a pipeline stage");
+			return;
+		}
+		try {
+			await onSubmit({
+				name: name.trim(),
+				value: numericValue,
+				currency,
+				pipelineId: DEFAULT_PIPELINE_ID,
+				stageId,
+				expectedCloseDate: expectedCloseDate ? new Date(expectedCloseDate) : void 0
+			});
+			setName("");
+			setValue("");
+			setCurrency("USD");
+			setStageId(stages[0]?.id ?? "");
+			setExpectedCloseDate("");
+			onClose();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to create deal");
+		}
+	};
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+			onClick: onClose,
+			role: "button",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") onClose();
+			},
+			"aria-label": "Close modal"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "mb-4 text-xl font-semibold",
+				children: "Create New Deal"
+			}), /* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "deal-name",
+						className: "text-muted-foreground mb-1 block text-sm font-medium",
+						children: "Deal Name *"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: "deal-name",
+						value: name,
+						onChange: (e) => setName(e.target.value),
+						placeholder: "e.g., Enterprise License - Acme Corp",
+						disabled: isLoading
+					})] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "deal-value",
+								className: "text-muted-foreground mb-1 block text-sm font-medium",
+								children: "Value *"
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "deal-value",
+								type: "number",
+								min: "0",
+								step: "0.01",
+								value,
+								onChange: (e) => setValue(e.target.value),
+								placeholder: "50000",
+								disabled: isLoading
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "w-24",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "deal-currency",
+								className: "text-muted-foreground mb-1 block text-sm font-medium",
+								children: "Currency"
+							}), /* @__PURE__ */ jsx("select", {
+								id: "deal-currency",
+								value: currency,
+								onChange: (e) => setCurrency(e.target.value),
+								disabled: isLoading,
+								className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+								children: CURRENCIES.map((c) => /* @__PURE__ */ jsx("option", {
+									value: c,
+									children: c
+								}, c))
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "deal-stage",
+						className: "text-muted-foreground mb-1 block text-sm font-medium",
+						children: "Pipeline Stage *"
+					}), /* @__PURE__ */ jsx("select", {
+						id: "deal-stage",
+						value: stageId,
+						onChange: (e) => setStageId(e.target.value),
+						disabled: isLoading,
+						className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+						children: stages.map((stage) => /* @__PURE__ */ jsx("option", {
+							value: stage.id,
+							children: stage.name
+						}, stage.id))
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "deal-close-date",
+						className: "text-muted-foreground mb-1 block text-sm font-medium",
+						children: "Expected Close Date"
+					}), /* @__PURE__ */ jsx(Input, {
+						id: "deal-close-date",
+						type: "date",
+						value: expectedCloseDate,
+						onChange: (e) => setExpectedCloseDate(e.target.value),
+						disabled: isLoading
+					})] }),
+					error && /* @__PURE__ */ jsx("div", {
+						className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+						children: error
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-end gap-3 pt-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							onPress: onClose,
+							disabled: isLoading,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							disabled: isLoading,
+							children: isLoading ? "Creating..." : "Create Deal"
+						})]
+					})
+				]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { CreateDealModal };
+//# sourceMappingURL=CreateDealModal.js.map

package/dist/ui/modals/CreateDealModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateDealModal.js","names":[],"sources":["../../../src/ui/modals/CreateDealModal.tsx"],"sourcesContent":["'use client';\n\n/**\n * CreateDealModal - Form for creating a new deal\n *\n * Wires to CreateDealContract via useDealMutations hook.\n */\nimport { useState } from 'react';\nimport { Button, Input } from '@contractspec/lib.design-system';\n\n// Local type definition for modal props\nexport interface CreateDealInput {\n  name: string;\n  value: number;\n  currency: string;\n  pipelineId: string;\n  stageId: string;\n  expectedCloseDate?: Date;\n  contactId?: string;\n  companyId?: string;\n}\n\ninterface CreateDealModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onSubmit: (input: CreateDealInput) => Promise<void>;\n  stages: { id: string; name: string }[];\n  isLoading?: boolean;\n}\n\nconst CURRENCIES = ['USD', 'EUR', 'GBP', 'CAD'];\nconst DEFAULT_PIPELINE_ID = 'pipeline-1';\n\nexport function CreateDealModal({\n  isOpen,\n  onClose,\n  onSubmit,\n  stages,\n  isLoading = false,\n}: CreateDealModalProps) {\n  const [name, setName] = useState('');\n  const [value, setValue] = useState('');\n  const [currency, setCurrency] = useState('USD');\n  const [stageId, setStageId] = useState(stages[0]?.id ?? '');\n  const [expectedCloseDate, setExpectedCloseDate] = useState('');\n  const [error, setError] = useState<string | null>(null);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    // Validation\n    if (!name.trim()) {\n      setError('Deal name is required');\n      return;\n    }\n\n    const numericValue = parseFloat(value);\n    if (isNaN(numericValue) || numericValue <= 0) {\n      setError('Value must be a positive number');\n      return;\n    }\n\n    if (!stageId) {\n      setError('Please select a pipeline stage');\n      return;\n    }\n\n    try {\n      await onSubmit({\n        name: name.trim(),\n        value: numericValue,\n        currency,\n        pipelineId: DEFAULT_PIPELINE_ID,\n        stageId,\n        expectedCloseDate: expectedCloseDate\n          ? new Date(expectedCloseDate)\n          : undefined,\n      });\n\n      // Reset form\n      setName('');\n      setValue('');\n      setCurrency('USD');\n      setStageId(stages[0]?.id ?? '');\n      setExpectedCloseDate('');\n      onClose();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to create deal');\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"bg-background/80 absolute inset-0 backdrop-blur-sm\"\n        onClick={onClose}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') onClose();\n        }}\n        aria-label=\"Close modal\"\n      />\n\n      {/* Modal */}\n      <div className=\"bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl\">\n        <h2 className=\"mb-4 text-xl font-semibold\">Create New Deal</h2>\n\n        <form onSubmit={handleSubmit} className=\"space-y-4\">\n          {/* Deal Name */}\n          <div>\n            <label\n              htmlFor=\"deal-name\"\n              className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n            >\n              Deal Name *\n            </label>\n            <Input\n              id=\"deal-name\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"e.g., Enterprise License - Acme Corp\"\n              disabled={isLoading}\n            />\n          </div>\n\n          {/* Value & Currency */}\n          <div className=\"flex gap-3\">\n            <div className=\"flex-1\">\n              <label\n                htmlFor=\"deal-value\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Value *\n              </label>\n              <Input\n                id=\"deal-value\"\n                type=\"number\"\n                min=\"0\"\n                step=\"0.01\"\n                value={value}\n                onChange={(e) => setValue(e.target.value)}\n                placeholder=\"50000\"\n                disabled={isLoading}\n              />\n            </div>\n            <div className=\"w-24\">\n              <label\n                htmlFor=\"deal-currency\"\n                className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n              >\n                Currency\n              </label>\n              <select\n                id=\"deal-currency\"\n                value={currency}\n                onChange={(e) => setCurrency(e.target.value)}\n                disabled={isLoading}\n                className=\"border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50\"\n              >\n                {CURRENCIES.map((c) => (\n                  <option key={c} value={c}>\n                    {c}\n                  </option>\n                ))}\n              </select>\n            </div>\n          </div>\n\n          {/* Stage */}\n          <div>\n            <label\n              htmlFor=\"deal-stage\"\n              className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n            >\n              Pipeline Stage *\n            </label>\n            <select\n              id=\"deal-stage\"\n              value={stageId}\n              onChange={(e) => setStageId(e.target.value)}\n              disabled={isLoading}\n              className=\"border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50\"\n            >\n              {stages.map((stage) => (\n                <option key={stage.id} value={stage.id}>\n                  {stage.name}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Expected Close Date */}\n          <div>\n            <label\n              htmlFor=\"deal-close-date\"\n              className=\"text-muted-foreground mb-1 block text-sm font-medium\"\n            >\n              Expected Close Date\n            </label>\n            <Input\n              id=\"deal-close-date\"\n              type=\"date\"\n              value={expectedCloseDate}\n              onChange={(e) => setExpectedCloseDate(e.target.value)}\n              disabled={isLoading}\n            />\n          </div>\n\n          {/* Error Message */}\n          {error && (\n            <div className=\"bg-destructive/10 text-destructive rounded-md p-3 text-sm\">\n              {error}\n            </div>\n          )}\n\n          {/* Actions */}\n          <div className=\"flex justify-end gap-3 pt-2\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              onPress={onClose}\n              disabled={isLoading}\n            >\n              Cancel\n            </Button>\n            <Button type=\"submit\" disabled={isLoading}>\n              {isLoading ? 'Creating...' : 'Create Deal'}\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}