@contractspec/example.crm-pipeline 1.46.1 → 1.47.0

package/dist/presentations/pipeline.presentation.js

@@ -1,11 +1,14 @@
 import { DealModel } from "../deal/deal.schema.js";
-import { StabilityEnum } from "@contractspec/lib.contracts";
+import { StabilityEnum, definePresentation } from "@contractspec/lib.contracts";
 
 //#region src/presentations/pipeline.presentation.ts
 /**
+* Pipeline Presentation Descriptors
+*/
+/**
 * Kanban board presentation for the sales pipeline.
 */
-const PipelineKanbanPresentation = {
+const PipelineKanbanPresentation = definePresentation({
 	meta: {
 		key: "crm.pipeline.kanban",
 		version: "1.0.0",
@@ -30,11 +33,11 @@ const PipelineKanbanPresentation = {
 	},
 	targets: ["react", "markdown"],
 	policy: { flags: ["crm.pipeline.enabled"] }
-};
+});
 /**
 * List view of deals with filtering.
 */
-const DealListPresentation = {
+const DealListPresentation = definePresentation({
 	meta: {
 		key: "crm.deal.list",
 		version: "1.0.0",
@@ -59,11 +62,11 @@ const DealListPresentation = {
 		"application/json"
 	],
 	policy: { flags: ["crm.deals.enabled"] }
-};
+});
 /**
 * Deal detail presentation.
 */
-const DealDetailPresentation = {
+const DealDetailPresentation = definePresentation({
 	meta: {
 		key: "crm.deal.detail",
 		version: "1.0.0",
@@ -83,11 +86,11 @@ const DealDetailPresentation = {
 	},
 	targets: ["react", "markdown"],
 	policy: { flags: ["crm.deals.enabled"] }
-};
+});
 /**
 * Deal card for kanban board.
 */
-const DealCardPresentation = {
+const DealCardPresentation = definePresentation({
 	meta: {
 		key: "crm.deal.card",
 		version: "1.0.0",
@@ -112,7 +115,7 @@ const DealCardPresentation = {
 	},
 	targets: ["react"],
 	policy: { flags: ["crm.deals.enabled"] }
-};
+});
 
 //#endregion
 export { DealCardPresentation, DealDetailPresentation, DealListPresentation, PipelineKanbanPresentation };

package/dist/presentations/pipeline.presentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline.presentation.js","names":["PipelineKanbanPresentation: PresentationSpec","DealListPresentation: PresentationSpec","DealDetailPresentation: PresentationSpec","DealCardPresentation: PresentationSpec"],"sources":["../../src/presentations/pipeline.presentation.ts"],"sourcesContent":["/**\n * Pipeline Presentation Descriptors\n */\nimport type { PresentationSpec } from '@contractspec/lib.contracts';\nimport { StabilityEnum } from '@contractspec/lib.contracts';\nimport { DealModel } from '../deal/deal.schema';\n\n/**\n * Kanban board presentation for the sales pipeline.\n */\nexport const PipelineKanbanPresentation: PresentationSpec = {\n  meta: {\n    key: 'crm.pipeline.kanban',\n    version: '1.0.0',\n    title: 'Pipeline Kanban',\n    description: 'Kanban board view of deals organized by stage',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['pipeline', 'kanban', 'deals'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Visualize the sales pipeline status and deal distribution across stages.',\n    context: 'Used in the sales dashboard and management reports.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'PipelineKanbanView',\n    props: DealModel,\n  },\n  targets: ['react', 'markdown'],\n  policy: {\n    flags: ['crm.pipeline.enabled'],\n  },\n};\n\n/**\n * List view of deals with filtering.\n */\nexport const DealListPresentation: PresentationSpec = {\n  meta: {\n    key: 'crm.deal.list',\n    version: '1.0.0',\n    title: 'Deal List',\n    description: 'List view of deals with value, status, and owner info',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'list'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Search, filter, and review deal lists.',\n    context: 'Standard view for deal management and bulk actions.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealListView',\n    props: DealModel,\n  },\n  targets: ['react', 'markdown', 'application/json'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n};\n\n/**\n * Deal detail presentation.\n */\nexport const DealDetailPresentation: PresentationSpec = {\n  meta: {\n    key: 'crm.deal.detail',\n    version: '1.0.0',\n    title: 'Deal Details',\n    description:\n      'Detailed view of a deal with activities, contacts, and history',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'detail'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Deep dive into deal details and historical activities.',\n    context: 'The main workspace for managing a single deal execution.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealDetailView',\n  },\n  targets: ['react', 'markdown'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n};\n\n/**\n * Deal card for kanban board.\n */\nexport const DealCardPresentation: PresentationSpec = {\n  meta: {\n    key: 'crm.deal.card',\n    version: '1.0.0',\n    title: 'Deal Card',\n    description: 'Compact deal card for kanban board display',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'card', 'kanban'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Provide a quick overview of deal status in the pipeline view.',\n    context: 'Condensed representation used within the Pipeline Kanban board.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealCard',\n    props: DealModel,\n  },\n  targets: ['react'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n};\n"],"mappings":";;;;;;;AAUA,MAAaA,6BAA+C;CAC1D,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM;GAAC;GAAY;GAAU;GAAQ;EACrC,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS,CAAC,SAAS,WAAW;CAC9B,QAAQ,EACN,OAAO,CAAC,uBAAuB,EAChC;CACF;;;;AAKD,MAAaC,uBAAyC;CACpD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM,CAAC,QAAQ,OAAO;EACtB,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS;EAAC;EAAS;EAAY;EAAmB;CAClD,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF;;;;AAKD,MAAaC,yBAA2C;CACtD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aACE;EACF,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM,CAAC,QAAQ,SAAS;EACxB,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACf;CACD,SAAS,CAAC,SAAS,WAAW;CAC9B,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF;;;;AAKD,MAAaC,uBAAyC;CACpD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM;GAAC;GAAQ;GAAQ;GAAS;EAChC,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS,CAAC,QAAQ;CAClB,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF"}
+{"version":3,"file":"pipeline.presentation.js","names":[],"sources":["../../src/presentations/pipeline.presentation.ts"],"sourcesContent":["/**\n * Pipeline Presentation Descriptors\n */\nimport { definePresentation, StabilityEnum } from '@contractspec/lib.contracts';\nimport { DealModel } from '../deal/deal.schema';\n\n/**\n * Kanban board presentation for the sales pipeline.\n */\nexport const PipelineKanbanPresentation = definePresentation({\n  meta: {\n    key: 'crm.pipeline.kanban',\n    version: '1.0.0',\n    title: 'Pipeline Kanban',\n    description: 'Kanban board view of deals organized by stage',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['pipeline', 'kanban', 'deals'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Visualize the sales pipeline status and deal distribution across stages.',\n    context: 'Used in the sales dashboard and management reports.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'PipelineKanbanView',\n    props: DealModel,\n  },\n  targets: ['react', 'markdown'],\n  policy: {\n    flags: ['crm.pipeline.enabled'],\n  },\n});\n\n/**\n * List view of deals with filtering.\n */\nexport const DealListPresentation = definePresentation({\n  meta: {\n    key: 'crm.deal.list',\n    version: '1.0.0',\n    title: 'Deal List',\n    description: 'List view of deals with value, status, and owner info',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'list'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Search, filter, and review deal lists.',\n    context: 'Standard view for deal management and bulk actions.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealListView',\n    props: DealModel,\n  },\n  targets: ['react', 'markdown', 'application/json'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n});\n\n/**\n * Deal detail presentation.\n */\nexport const DealDetailPresentation = definePresentation({\n  meta: {\n    key: 'crm.deal.detail',\n    version: '1.0.0',\n    title: 'Deal Details',\n    description:\n      'Detailed view of a deal with activities, contacts, and history',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'detail'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Deep dive into deal details and historical activities.',\n    context: 'The main workspace for managing a single deal execution.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealDetailView',\n  },\n  targets: ['react', 'markdown'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n});\n\n/**\n * Deal card for kanban board.\n */\nexport const DealCardPresentation = definePresentation({\n  meta: {\n    key: 'crm.deal.card',\n    version: '1.0.0',\n    title: 'Deal Card',\n    description: 'Compact deal card for kanban board display',\n    domain: 'crm-pipeline',\n    owners: ['@crm-team'],\n    tags: ['deal', 'card', 'kanban'],\n    stability: StabilityEnum.Experimental,\n    goal: 'Provide a quick overview of deal status in the pipeline view.',\n    context: 'Condensed representation used within the Pipeline Kanban board.',\n  },\n  source: {\n    type: 'component',\n    framework: 'react',\n    componentKey: 'DealCard',\n    props: DealModel,\n  },\n  targets: ['react'],\n  policy: {\n    flags: ['crm.deals.enabled'],\n  },\n});\n"],"mappings":";;;;;;;;;;AASA,MAAa,6BAA6B,mBAAmB;CAC3D,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM;GAAC;GAAY;GAAU;GAAQ;EACrC,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS,CAAC,SAAS,WAAW;CAC9B,QAAQ,EACN,OAAO,CAAC,uBAAuB,EAChC;CACF,CAAC;;;;AAKF,MAAa,uBAAuB,mBAAmB;CACrD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM,CAAC,QAAQ,OAAO;EACtB,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS;EAAC;EAAS;EAAY;EAAmB;CAClD,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF,CAAC;;;;AAKF,MAAa,yBAAyB,mBAAmB;CACvD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aACE;EACF,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM,CAAC,QAAQ,SAAS;EACxB,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACf;CACD,SAAS,CAAC,SAAS,WAAW;CAC9B,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF,CAAC;;;;AAKF,MAAa,uBAAuB,mBAAmB;CACrD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;EACR,QAAQ,CAAC,YAAY;EACrB,MAAM;GAAC;GAAQ;GAAQ;GAAS;EAChC,WAAW,cAAc;EACzB,MAAM;EACN,SAAS;EACV;CACD,QAAQ;EACN,MAAM;EACN,WAAW;EACX,cAAc;EACd,OAAO;EACR;CACD,SAAS,CAAC,QAAQ;CAClB,QAAQ,EACN,OAAO,CAAC,oBAAoB,EAC7B;CACF,CAAC"}

package/dist/seeders/index.d.ts

@@ -0,0 +1,10 @@
+import { DatabasePort } from "@contractspec/lib.runtime-sandbox";
+
+//#region src/seeders/index.d.ts
+declare function seedCrmPipeline(params: {
+  projectId: string;
+  db: DatabasePort;
+}): Promise<void>;
+//#endregion
+export { seedCrmPipeline };
+//# sourceMappingURL=index.d.ts.map

package/dist/seeders/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/seeders/index.ts"],"sourcesContent":[],"mappings":";;;iBAEsB,eAAA;;EAAA,EAAA,EAEhB,YAFgB;IAGrB"}

package/dist/seeders/index.js

@@ -0,0 +1,47 @@
+//#region src/seeders/index.ts
+async function seedCrmPipeline(params) {
+	const { projectId, db } = params;
+	if ((await db.query(`SELECT COUNT(*) as count FROM crm_pipeline WHERE "projectId" = $1`, [projectId])).rows[0]?.count > 0) return;
+	const pipelineId = "pipeline_sales";
+	await db.execute(`INSERT INTO crm_pipeline (id, "projectId", name) VALUES ($1, $2, $3)`, [
+		pipelineId,
+		projectId,
+		"Sales Pipeline"
+	]);
+	for (const stage of [
+		{
+			id: "stage_lead",
+			name: "Lead",
+			position: 1
+		},
+		{
+			id: "stage_contact",
+			name: "Contact Made",
+			position: 2
+		},
+		{
+			id: "stage_proposal",
+			name: "Proposal",
+			position: 3
+		},
+		{
+			id: "stage_negotiation",
+			name: "Negotiation",
+			position: 4
+		},
+		{
+			id: "stage_closed",
+			name: "Closed",
+			position: 5
+		}
+	]) await db.execute(`INSERT INTO crm_stage (id, "pipelineId", name, position) VALUES ($1, $2, $3, $4)`, [
+		stage.id,
+		pipelineId,
+		stage.name,
+		stage.position
+	]);
+}
+
+//#endregion
+export { seedCrmPipeline };
+//# sourceMappingURL=index.js.map

package/dist/seeders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/seeders/index.ts"],"sourcesContent":["import type { DatabasePort } from '@contractspec/lib.runtime-sandbox';\n\nexport async function seedCrmPipeline(params: {\n  projectId: string;\n  db: DatabasePort;\n}) {\n  const { projectId, db } = params;\n\n  const existing = await db.query(\n    `SELECT COUNT(*) as count FROM crm_pipeline WHERE \"projectId\" = $1`,\n    [projectId]\n  );\n  if ((existing.rows[0]?.count as number) > 0) return;\n\n  const pipelineId = 'pipeline_sales';\n  await db.execute(\n    `INSERT INTO crm_pipeline (id, \"projectId\", name) VALUES ($1, $2, $3)`,\n    [pipelineId, projectId, 'Sales Pipeline']\n  );\n\n  const stages = [\n    { id: 'stage_lead', name: 'Lead', position: 1 },\n    { id: 'stage_contact', name: 'Contact Made', position: 2 },\n    { id: 'stage_proposal', name: 'Proposal', position: 3 },\n    { id: 'stage_negotiation', name: 'Negotiation', position: 4 },\n    { id: 'stage_closed', name: 'Closed', position: 5 },\n  ];\n\n  for (const stage of stages) {\n    await db.execute(\n      `INSERT INTO crm_stage (id, \"pipelineId\", name, position) VALUES ($1, $2, $3, $4)`,\n      [stage.id, pipelineId, stage.name, stage.position]\n    );\n  }\n}\n"],"mappings":";AAEA,eAAsB,gBAAgB,QAGnC;CACD,MAAM,EAAE,WAAW,OAAO;AAM1B,MAJiB,MAAM,GAAG,MACxB,qEACA,CAAC,UAAU,CACZ,EACa,KAAK,IAAI,QAAmB,EAAG;CAE7C,MAAM,aAAa;AACnB,OAAM,GAAG,QACP,wEACA;EAAC;EAAY;EAAW;EAAiB,CAC1C;AAUD,MAAK,MAAM,SARI;EACb;GAAE,IAAI;GAAc,MAAM;GAAQ,UAAU;GAAG;EAC/C;GAAE,IAAI;GAAiB,MAAM;GAAgB,UAAU;GAAG;EAC1D;GAAE,IAAI;GAAkB,MAAM;GAAY,UAAU;GAAG;EACvD;GAAE,IAAI;GAAqB,MAAM;GAAe,UAAU;GAAG;EAC7D;GAAE,IAAI;GAAgB,MAAM;GAAU,UAAU;GAAG;EACpD,CAGC,OAAM,GAAG,QACP,oFACA;EAAC,MAAM;EAAI;EAAY,MAAM;EAAM,MAAM;EAAS,CACnD"}

package/dist/shared/overlay-types.d.ts

@@ -0,0 +1,34 @@
+//#region src/shared/overlay-types.d.ts
+interface OverlayDefinition {
+  overlayId: string;
+  version: string;
+  description: string;
+  appliesTo: Record<string, string>;
+  modifications: OverlayModification[];
+}
+type OverlayModification = HideFieldModification | RenameLabelModification | AddBadgeModification | SetLimitModification;
+interface HideFieldModification {
+  type: 'hideField';
+  field: string;
+  reason?: string;
+}
+interface RenameLabelModification {
+  type: 'renameLabel';
+  field: string;
+  newLabel: string;
+}
+interface AddBadgeModification {
+  type: 'addBadge';
+  position: 'header' | 'footer';
+  label: string;
+  variant: 'warning' | 'info' | 'error' | 'success' | 'default';
+}
+interface SetLimitModification {
+  type: 'setLimit';
+  field: string;
+  max: number;
+  message: string;
+}
+//#endregion
+export { AddBadgeModification, HideFieldModification, OverlayDefinition, OverlayModification, RenameLabelModification, SetLimitModification };
+//# sourceMappingURL=overlay-types.d.ts.map

package/dist/shared/overlay-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-types.d.ts","names":[],"sources":["../../src/shared/overlay-types.ts"],"sourcesContent":[],"mappings":";UAAiB,iBAAA;EAAA,SAAA,EAAA,MAAA;EAQL,OAAA,EAAA,MAAA;EACR,WAAA,EAAA,MAAA;EACA,SAAA,EANS,MAMT,CAAA,MAAA,EAAA,MAAA,CAAA;EACA,aAAA,EANa,mBAMb,EAAA;;AACoB,KAJZ,mBAAA,GACR,qBAGoB,GAFpB,uBAEoB,GADpB,oBACoB,GAApB,oBAAoB;AAEP,UAAA,qBAAA,CAAqB;EAMrB,IAAA,EAAA,WAAA;EAMA,KAAA,EAAA,MAAA;EAOA,MAAA,CAAA,EAAA,MAAA;;UAbA,uBAAA;;;;;UAMA,oBAAA;;;;;;UAOA,oBAAA"}

package/dist/ui/CrmDashboard.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/CrmDashboard.d.ts
+declare function CrmDashboard(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CrmDashboard };
+//# sourceMappingURL=CrmDashboard.d.ts.map

package/dist/ui/CrmDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmDashboard.d.ts","names":[],"sources":["../../src/ui/CrmDashboard.tsx"],"sourcesContent":[],"mappings":";;;iBA6CgB,YAAA,CAAA,GAAY,kBAAA,CAAA,GAAA,CAAA"}

package/dist/ui/CrmDashboard.js

@@ -0,0 +1,304 @@
+'use client';
+
+import { useDealList } from "./hooks/useDealList.js";
+import { useDealMutations } from "./hooks/useDealMutations.js";
+import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
+import { CreateDealModal } from "./modals/CreateDealModal.js";
+import { DealActionsModal } from "./modals/DealActionsModal.js";
+import { useCallback, useState } from "react";
+import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@contractspec/lib.ui-kit-web/ui/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/CrmDashboard.tsx
+/**
+* CRM Dashboard
+*
+* Fully integrated with ContractSpec example handlers
+* and design-system components.
+*
+* Commands wired:
+* - CreateDealContract -> Create Deal button + modal
+* - MoveDealContract -> Move deal between stages
+* - WinDealContract -> Mark deal as won
+* - LoseDealContract -> Mark deal as lost
+*/
+function formatCurrency(value, currency = "USD") {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0
+	}).format(value);
+}
+function CrmDashboard() {
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [selectedDeal, setSelectedDeal] = useState(null);
+	const [isDealActionsOpen, setIsDealActionsOpen] = useState(false);
+	const { data, dealsByStage, stages, loading, error, stats, refetch } = useDealList();
+	const mutations = useDealMutations({ onSuccess: () => {
+		refetch();
+	} });
+	const handleDealClick = useCallback((dealId) => {
+		const deal = dealsByStage ? Object.values(dealsByStage).flat().find((d) => d.id === dealId) : null;
+		if (deal) {
+			setSelectedDeal(deal);
+			setIsDealActionsOpen(true);
+		}
+	}, [dealsByStage]);
+	const handleDealMove = useCallback(async (dealId, toStageId) => {
+		await mutations.moveDeal({
+			dealId,
+			stageId: toStageId
+		});
+	}, [mutations]);
+	if (loading && !data) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading CRM..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load CRM",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "CRM Pipeline"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onClick: () => setIsCreateModalOpen(true),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2",
+						children: "+"
+					}), " Create Deal"]
+				})]
+			}),
+			stats && /* @__PURE__ */ jsxs(StatCardGroup, { children: [
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Total Pipeline",
+					value: formatCurrency(stats.totalValue),
+					hint: `${stats.total} deals`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Open Deals",
+					value: formatCurrency(stats.openValue),
+					hint: `${stats.openCount} active`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Won",
+					value: formatCurrency(stats.wonValue),
+					hint: `${stats.wonCount} closed`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Lost",
+					value: stats.lostCount,
+					hint: "deals lost"
+				})
+			] }),
+			/* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: "pipeline",
+				className: "w-full",
+				children: [
+					/* @__PURE__ */ jsxs(TabsList, { children: [
+						/* @__PURE__ */ jsxs(TabsTrigger, {
+							value: "pipeline",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: "📊"
+							}), "Pipeline"]
+						}),
+						/* @__PURE__ */ jsxs(TabsTrigger, {
+							value: "list",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: "📋"
+							}), "All Deals"]
+						}),
+						/* @__PURE__ */ jsxs(TabsTrigger, {
+							value: "metrics",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: "📈"
+							}), "Metrics"]
+						})
+					] }),
+					/* @__PURE__ */ jsx(TabsContent, {
+						value: "pipeline",
+						className: "min-h-[400px]",
+						children: /* @__PURE__ */ jsx(CrmPipelineBoard, {
+							dealsByStage,
+							stages,
+							onDealClick: handleDealClick,
+							onDealMove: handleDealMove
+						})
+					}),
+					/* @__PURE__ */ jsx(TabsContent, {
+						value: "list",
+						className: "min-h-[400px]",
+						children: /* @__PURE__ */ jsx(DealListTab, {
+							data,
+							onDealClick: handleDealClick
+						})
+					}),
+					/* @__PURE__ */ jsx(TabsContent, {
+						value: "metrics",
+						className: "min-h-[400px]",
+						children: /* @__PURE__ */ jsx(MetricsTab, { stats })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(CreateDealModal, {
+				isOpen: isCreateModalOpen,
+				onClose: () => setIsCreateModalOpen(false),
+				onSubmit: async (input) => {
+					await mutations.createDeal(input);
+				},
+				stages,
+				isLoading: mutations.createState.loading
+			}),
+			/* @__PURE__ */ jsx(DealActionsModal, {
+				isOpen: isDealActionsOpen,
+				deal: selectedDeal,
+				stages,
+				onClose: () => {
+					setIsDealActionsOpen(false);
+					setSelectedDeal(null);
+				},
+				onWin: async (input) => {
+					await mutations.winDeal(input);
+				},
+				onLose: async (input) => {
+					await mutations.loseDeal(input);
+				},
+				onMove: async (input) => {
+					await mutations.moveDeal(input);
+					refetch();
+				},
+				isLoading: mutations.isLoading
+			})
+		]
+	});
+}
+function DealListTab({ data, onDealClick }) {
+	if (!data?.deals.length) return /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground flex h-64 items-center justify-center",
+		children: "No deals found"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-border rounded-lg border",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "border-border bg-muted/30 border-b",
+				children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						className: "px-4 py-3 text-left text-sm font-medium",
+						children: "Deal"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-4 py-3 text-left text-sm font-medium",
+						children: "Value"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-4 py-3 text-left text-sm font-medium",
+						children: "Status"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-4 py-3 text-left text-sm font-medium",
+						children: "Expected Close"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-4 py-3 text-left text-sm font-medium",
+						children: "Actions"
+					})
+				] })
+			}), /* @__PURE__ */ jsx("tbody", {
+				className: "divide-border divide-y",
+				children: data.deals.map((deal) => /* @__PURE__ */ jsxs("tr", {
+					className: "hover:bg-muted/50",
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: "px-4 py-3",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "font-medium",
+								children: deal.name
+							})
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-4 py-3 font-mono",
+							children: formatCurrency(deal.value, deal.currency)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-4 py-3",
+							children: /* @__PURE__ */ jsx("span", {
+								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+								children: deal.status
+							})
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "text-muted-foreground px-4 py-3",
+							children: deal.expectedCloseDate?.toLocaleDateString() ?? "-"
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-4 py-3",
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								onPress: () => onDealClick?.(deal.id),
+								children: "Actions"
+							})
+						})
+					]
+				}, deal.id))
+			})]
+		})
+	});
+}
+function MetricsTab({ stats }) {
+	if (!stats) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "border-border bg-card rounded-xl border p-6",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "mb-4 text-lg font-semibold",
+				children: "Pipeline Overview"
+			}), /* @__PURE__ */ jsxs("dl", {
+				className: "grid gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground text-sm",
+						children: "Win Rate"
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "text-2xl font-semibold",
+						children: [stats.total > 0 ? (stats.wonCount / stats.total * 100).toFixed(0) : 0, "%"]
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground text-sm",
+						children: "Avg Deal Size"
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "text-2xl font-semibold",
+						children: formatCurrency(stats.total > 0 ? stats.totalValue / stats.total : 0)
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground text-sm",
+						children: "Conversion"
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "text-2xl font-semibold",
+						children: [
+							stats.wonCount,
+							" / ",
+							stats.total
+						]
+					})] })
+				]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { CrmDashboard };
+//# sourceMappingURL=CrmDashboard.js.map

package/dist/ui/CrmDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmDashboard.js","names":[],"sources":["../../src/ui/CrmDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * CRM Dashboard\n *\n * Fully integrated with ContractSpec example handlers\n * and design-system components.\n *\n * Commands wired:\n * - CreateDealContract -> Create Deal button + modal\n * - MoveDealContract -> Move deal between stages\n * - WinDealContract -> Mark deal as won\n * - LoseDealContract -> Mark deal as lost\n */\nimport { useCallback, useState } from 'react';\nimport {\n  Button,\n  ErrorState,\n  LoaderBlock,\n  StatCard,\n  StatCardGroup,\n} from '@contractspec/lib.design-system';\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@contractspec/lib.ui-kit-web/ui/tabs';\nimport { type Deal, useDealList } from './hooks/useDealList';\nimport { useDealMutations } from './hooks/useDealMutations';\nimport { CrmPipelineBoard } from './CrmPipelineBoard';\nimport { CreateDealModal } from './modals/CreateDealModal';\nimport { DealActionsModal } from './modals/DealActionsModal';\n\n// type Tab = 'pipeline' | 'list' | 'metrics';\n\nfunction formatCurrency(value: number, currency = 'USD'): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  }).format(value);\n}\n\nexport function CrmDashboard() {\n  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);\n  const [selectedDeal, setSelectedDeal] = useState<Deal | null>(null);\n  const [isDealActionsOpen, setIsDealActionsOpen] = useState(false);\n\n  const { data, dealsByStage, stages, loading, error, stats, refetch } =\n    useDealList();\n\n  const mutations = useDealMutations({\n    onSuccess: () => {\n      refetch();\n    },\n  });\n\n  const handleDealClick = useCallback(\n    (dealId: string) => {\n      // Find deal in data\n      const deal = dealsByStage\n        ? Object.values(dealsByStage)\n            .flat()\n            .find((d) => d.id === dealId)\n        : null;\n\n      if (deal) {\n        setSelectedDeal(deal);\n        setIsDealActionsOpen(true);\n      }\n    },\n    [dealsByStage]\n  );\n\n  const handleDealMove = useCallback(\n    async (dealId: string, toStageId: string) => {\n      await mutations.moveDeal({ dealId, stageId: toStageId });\n    },\n    [mutations]\n  );\n\n  if (loading && !data) {\n    return <LoaderBlock label=\"Loading CRM...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load CRM\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header with Create Button */}\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">CRM Pipeline</h2>\n        <Button onClick={() => setIsCreateModalOpen(true)}>\n          <span className=\"mr-2\">+</span> Create Deal\n        </Button>\n      </div>\n\n      {/* Stats Row */}\n      {stats && (\n        <StatCardGroup>\n          <StatCard\n            label=\"Total Pipeline\"\n            value={formatCurrency(stats.totalValue)}\n            hint={`${stats.total} deals`}\n          />\n          <StatCard\n            label=\"Open Deals\"\n            value={formatCurrency(stats.openValue)}\n            hint={`${stats.openCount} active`}\n          />\n          <StatCard\n            label=\"Won\"\n            value={formatCurrency(stats.wonValue)}\n            hint={`${stats.wonCount} closed`}\n          />\n          <StatCard label=\"Lost\" value={stats.lostCount} hint=\"deals lost\" />\n        </StatCardGroup>\n      )}\n\n      {/* Tabs */}\n      <Tabs defaultValue=\"pipeline\" className=\"w-full\">\n        <TabsList>\n          <TabsTrigger value=\"pipeline\">\n            <span className=\"mr-2\">📊</span>\n            Pipeline\n          </TabsTrigger>\n          <TabsTrigger value=\"list\">\n            <span className=\"mr-2\">📋</span>\n            All Deals\n          </TabsTrigger>\n          <TabsTrigger value=\"metrics\">\n            <span className=\"mr-2\">📈</span>\n            Metrics\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"pipeline\" className=\"min-h-[400px]\">\n          <CrmPipelineBoard\n            dealsByStage={dealsByStage}\n            stages={stages}\n            onDealClick={handleDealClick}\n            onDealMove={handleDealMove}\n          />\n        </TabsContent>\n\n        <TabsContent value=\"list\" className=\"min-h-[400px]\">\n          <DealListTab data={data} onDealClick={handleDealClick} />\n        </TabsContent>\n\n        <TabsContent value=\"metrics\" className=\"min-h-[400px]\">\n          <MetricsTab stats={stats} />\n        </TabsContent>\n      </Tabs>\n\n      {/* Create Deal Modal */}\n      <CreateDealModal\n        isOpen={isCreateModalOpen}\n        onClose={() => setIsCreateModalOpen(false)}\n        onSubmit={async (input) => {\n          await mutations.createDeal(input);\n        }}\n        stages={stages}\n        isLoading={mutations.createState.loading}\n      />\n\n      {/* Deal Actions Modal */}\n      <DealActionsModal\n        isOpen={isDealActionsOpen}\n        deal={selectedDeal}\n        stages={stages}\n        onClose={() => {\n          setIsDealActionsOpen(false);\n          setSelectedDeal(null);\n        }}\n        onWin={async (input) => {\n          await mutations.winDeal(input);\n        }}\n        onLose={async (input) => {\n          await mutations.loseDeal(input);\n        }}\n        onMove={async (input) => {\n          await mutations.moveDeal(input);\n          refetch();\n        }}\n        isLoading={mutations.isLoading}\n      />\n    </div>\n  );\n}\n\ninterface DealListTabProps {\n  data: ReturnType<typeof useDealList>['data'];\n  onDealClick?: (dealId: string) => void;\n}\n\nfunction DealListTab({ data, onDealClick }: DealListTabProps) {\n  if (!data?.deals.length) {\n    return (\n      <div className=\"text-muted-foreground flex h-64 items-center justify-center\">\n        No deals found\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"border-border rounded-lg border\">\n      <table className=\"w-full\">\n        <thead className=\"border-border bg-muted/30 border-b\">\n          <tr>\n            <th className=\"px-4 py-3 text-left text-sm font-medium\">Deal</th>\n            <th className=\"px-4 py-3 text-left text-sm font-medium\">Value</th>\n            <th className=\"px-4 py-3 text-left text-sm font-medium\">Status</th>\n            <th className=\"px-4 py-3 text-left text-sm font-medium\">\n              Expected Close\n            </th>\n            <th className=\"px-4 py-3 text-left text-sm font-medium\">Actions</th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-border divide-y\">\n          {data.deals.map((deal: Deal) => (\n            <tr key={deal.id} className=\"hover:bg-muted/50\">\n              <td className=\"px-4 py-3\">\n                <div className=\"font-medium\">{deal.name}</div>\n              </td>\n              <td className=\"px-4 py-3 font-mono\">\n                {formatCurrency(deal.value, deal.currency)}\n              </td>\n              <td className=\"px-4 py-3\">\n                <span\n                  className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${\n                    deal.status === 'WON'\n                      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'\n                      : deal.status === 'LOST'\n                        ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'\n                        : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n                  }`}\n                >\n                  {deal.status}\n                </span>\n              </td>\n              <td className=\"text-muted-foreground px-4 py-3\">\n                {deal.expectedCloseDate?.toLocaleDateString() ?? '-'}\n              </td>\n              <td className=\"px-4 py-3\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onPress={() => onDealClick?.(deal.id)}\n                >\n                  Actions\n                </Button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction MetricsTab({\n  stats,\n}: {\n  stats: ReturnType<typeof useDealList>['stats'];\n}) {\n  if (!stats) return null;\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"border-border bg-card rounded-xl border p-6\">\n        <h3 className=\"mb-4 text-lg font-semibold\">Pipeline Overview</h3>\n        <dl className=\"grid gap-4 sm:grid-cols-3\">\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Win Rate</dt>\n            <dd className=\"text-2xl font-semibold\">\n              {stats.total > 0\n                ? ((stats.wonCount / stats.total) * 100).toFixed(0)\n                : 0}\n              %\n            </dd>\n          </div>\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Avg Deal Size</dt>\n            <dd className=\"text-2xl font-semibold\">\n              {formatCurrency(\n                stats.total > 0 ? stats.totalValue / stats.total : 0\n              )}\n            </dd>\n          </div>\n          <div>\n            <dt className=\"text-muted-foreground text-sm\">Conversion</dt>\n            <dd className=\"text-2xl font-semibold\">\n              {stats.wonCount} / {stats.total}\n            </dd>\n          </div>\n        </dl>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/CrmDealCard.d.ts

@@ -0,0 +1,15 @@
+import { Deal } from "./hooks/useDealList.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/CrmDealCard.d.ts
+interface CrmDealCardProps {
+  deal: Deal;
+  onClick?: () => void;
+}
+declare function CrmDealCard({
+  deal,
+  onClick
+}: CrmDealCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CrmDealCard };
+//# sourceMappingURL=CrmDealCard.d.ts.map

package/dist/ui/CrmDealCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmDealCard.d.ts","names":[],"sources":["../../src/ui/CrmDealCard.tsx"],"sourcesContent":[],"mappings":";;;;AAKgD,UAEtC,gBAAA,CAAgB;EAcV,IAAA,EAbR,IAaQ;EAAc,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;;AAAiB,iBAA/B,WAAA,CAA+B;EAAA,IAAA;EAAA;AAAA,CAAA,EAAA,gBAAA,CAAA,EAAgB,kBAAA,CAAA,GAAA,CAAA,OAAhB"}

package/dist/ui/CrmDealCard.js

@@ -0,0 +1,49 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/CrmDealCard.tsx
+function formatCurrency(value, currency) {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0
+	}).format(value);
+}
+function CrmDealCard({ deal, onClick }) {
+	const daysUntilClose = deal.expectedCloseDate ? Math.ceil((deal.expectedCloseDate.getTime() - Date.now()) / (1e3 * 60 * 60 * 24)) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		onClick,
+		className: "border-border bg-card cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md",
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") onClick?.();
+		},
+		children: [
+			/* @__PURE__ */ jsx("h4", {
+				className: "leading-snug font-medium",
+				children: deal.name
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-primary mt-2 text-lg font-semibold",
+				children: formatCurrency(deal.value, deal.currency)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground mt-3 flex items-center justify-between text-xs",
+				children: [daysUntilClose !== null && /* @__PURE__ */ jsx("span", {
+					className: daysUntilClose < 0 ? "text-red-500" : daysUntilClose <= 7 ? "text-yellow-600 dark:text-yellow-500" : "",
+					children: daysUntilClose < 0 ? `${Math.abs(daysUntilClose)}d overdue` : daysUntilClose === 0 ? "Due today" : `${daysUntilClose}d left`
+				}), /* @__PURE__ */ jsx("span", {
+					className: `rounded px-1.5 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+					children: deal.status
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { CrmDealCard };
+//# sourceMappingURL=CrmDealCard.js.map

package/dist/ui/CrmDealCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmDealCard.js","names":[],"sources":["../../src/ui/CrmDealCard.tsx"],"sourcesContent":["'use client';\n\n/**\n * CRM Deal Card - Individual deal card for kanban board\n */\nimport type { Deal } from './hooks/useDealList';\n\ninterface CrmDealCardProps {\n  deal: Deal;\n  onClick?: () => void;\n}\n\nfunction formatCurrency(value: number, currency: string): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  }).format(value);\n}\n\nexport function CrmDealCard({ deal, onClick }: CrmDealCardProps) {\n  const daysUntilClose = deal.expectedCloseDate\n    ? Math.ceil(\n        (deal.expectedCloseDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)\n      )\n    : null;\n\n  return (\n    <div\n      onClick={onClick}\n      className=\"border-border bg-card cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md\"\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') onClick?.();\n      }}\n    >\n      {/* Deal Name */}\n      <h4 className=\"leading-snug font-medium\">{deal.name}</h4>\n\n      {/* Deal Value */}\n      <div className=\"text-primary mt-2 text-lg font-semibold\">\n        {formatCurrency(deal.value, deal.currency)}\n      </div>\n\n      {/* Meta Info */}\n      <div className=\"text-muted-foreground mt-3 flex items-center justify-between text-xs\">\n        {/* Expected Close */}\n        {daysUntilClose !== null && (\n          <span\n            className={\n              daysUntilClose < 0\n                ? 'text-red-500'\n                : daysUntilClose <= 7\n                  ? 'text-yellow-600 dark:text-yellow-500'\n                  : ''\n            }\n          >\n            {daysUntilClose < 0\n              ? `${Math.abs(daysUntilClose)}d overdue`\n              : daysUntilClose === 0\n                ? 'Due today'\n                : `${daysUntilClose}d left`}\n          </span>\n        )}\n\n        {/* Status Badge */}\n        <span\n          className={`rounded px-1.5 py-0.5 text-xs font-medium ${\n            deal.status === 'WON'\n              ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'\n              : deal.status === 'LOST'\n                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'\n                : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n          }`}\n        >\n          {deal.status}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAS,eAAe,OAAe,UAA0B;AAC/D,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,OAAO;EACP;EACA,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;;AAGlB,SAAgB,YAAY,EAAE,MAAM,WAA6B;CAC/D,MAAM,iBAAiB,KAAK,oBACxB,KAAK,MACF,KAAK,kBAAkB,SAAS,GAAG,KAAK,KAAK,KAAK,MAAO,KAAK,KAAK,IACrE,GACD;AAEJ,QACE,qBAAC;EACU;EACT,WAAU;EACV,MAAK;EACL,UAAU;EACV,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IAAK,YAAW;;;GAIrD,oBAAC;IAAG,WAAU;cAA4B,KAAK;KAAU;GAGzD,oBAAC;IAAI,WAAU;cACZ,eAAe,KAAK,OAAO,KAAK,SAAS;KACtC;GAGN,qBAAC;IAAI,WAAU;eAEZ,mBAAmB,QAClB,oBAAC;KACC,WACE,iBAAiB,IACb,iBACA,kBAAkB,IAChB,yCACA;eAGP,iBAAiB,IACd,GAAG,KAAK,IAAI,eAAe,CAAC,aAC5B,mBAAmB,IACjB,cACA,GAAG,eAAe;MACnB,EAIT,oBAAC;KACC,WAAW,6CACT,KAAK,WAAW,QACZ,yEACA,KAAK,WAAW,SACd,iEACA;eAGP,KAAK;MACD;KACH;;GACF"}

package/dist/ui/CrmPipelineBoard.d.ts

@@ -0,0 +1,23 @@
+import { Deal } from "./hooks/useDealList.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/ui/CrmPipelineBoard.d.ts
+interface CrmPipelineBoardProps {
+  dealsByStage: Record<string, Deal[]>;
+  stages: {
+    id: string;
+    name: string;
+    position: number;
+  }[];
+  onDealClick?: (dealId: string) => void;
+  onDealMove?: (dealId: string, toStageId: string) => void;
+}
+declare function CrmPipelineBoard({
+  dealsByStage,
+  stages,
+  onDealClick,
+  onDealMove
+}: CrmPipelineBoardProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { CrmPipelineBoard };
+//# sourceMappingURL=CrmPipelineBoard.d.ts.map