@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/dist/ui/tables/DealListTab.js

@@ -0,0 +1,391 @@
+// @bun
+// src/ui/hooks/useDealList.ts
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+"use client";
+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 [internalPage, setInternalPage] = useState(0);
+  const pipelineId = options.pipelineId ?? "pipeline-1";
+  const pageIndex = options.pageIndex ?? internalPage;
+  const pageSize = options.pageSize ?? options.limit ?? 50;
+  const [sort] = options.sorting ?? [];
+  const sortBy = sort?.id;
+  const sortDirection = sort ? sort.desc ? "desc" : "asc" : undefined;
+  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" ? undefined : options.status,
+          search: options.search,
+          limit: pageSize,
+          offset: pageIndex * pageSize,
+          sortBy: sortBy === "name" || sortBy === "value" || sortBy === "status" || sortBy === "expectedCloseDate" || sortBy === "updatedAt" ? sortBy : undefined,
+          sortDirection
+        }),
+        crm.getDealsByStage({ projectId, pipelineId }),
+        crm.getPipelineStages({ pipelineId })
+      ]);
+      setData(dealsResult);
+      setDealsByStage(stageDealsResult);
+      setStages(stagesResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    crm,
+    projectId,
+    pipelineId,
+    options.stageId,
+    options.status,
+    options.search,
+    pageIndex,
+    pageSize,
+    sortBy,
+    sortDirection
+  ]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const 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]);
+  return {
+    data,
+    dealsByStage,
+    stages,
+    loading,
+    error,
+    stats,
+    page: pageIndex + 1,
+    pageIndex,
+    pageSize,
+    refetch: fetchData,
+    nextPage: options.pageIndex === undefined ? () => setInternalPage((page) => page + 1) : undefined,
+    prevPage: options.pageIndex === undefined ? () => pageIndex > 0 && setInternalPage((page) => page - 1) : undefined
+  };
+}
+
+// src/ui/tables/DealListTab.tsx
+import {
+  Button,
+  DataTable,
+  LoaderBlock
+} from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
+import * as React from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency(value, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function statusVariant(status) {
+  switch (status) {
+    case "WON":
+      return "default";
+    case "LOST":
+      return "destructive";
+    case "STALE":
+      return "outline";
+    default:
+      return "secondary";
+  }
+}
+function DealListDataTable({
+  deals,
+  totalItems,
+  pageIndex,
+  pageSize,
+  sorting,
+  loading,
+  onSortingChange,
+  onPaginationChange,
+  onDealClick
+}) {
+  const controller = useContractTable({
+    data: deals,
+    columns: [
+      {
+        id: "deal",
+        header: "Deal",
+        label: "Deal",
+        accessor: (deal) => deal.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-xs",
+              children: item.companyId ?? "Unassigned company"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "value",
+        header: "Value",
+        label: "Value",
+        accessorKey: "value",
+        cell: ({ item }) => formatCurrency(item.value, item.currency),
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV(Badge, {
+          variant: statusVariant(value),
+          children: String(value)
+        }, undefined, false, undefined, this),
+        size: 130,
+        canSort: true,
+        canHide: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "expectedCloseDate",
+        header: "Expected Close",
+        label: "Expected Close",
+        accessor: (deal) => deal.expectedCloseDate?.toISOString() ?? "",
+        cell: ({ item }) => item.expectedCloseDate?.toLocaleDateString() ?? "Not scheduled",
+        size: 170,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "updatedAt",
+        header: "Updated",
+        label: "Updated",
+        accessor: (deal) => deal.updatedAt.toISOString(),
+        cell: ({ item }) => item.updatedAt.toLocaleDateString(),
+        size: 140,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        label: "Actions",
+        accessor: (deal) => deal.id,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV(Button, {
+          variant: "ghost",
+          size: "sm",
+          onPress: () => onDealClick?.(item.id),
+          children: "Actions"
+        }, undefined, false, undefined, this),
+        size: 120,
+        canSort: false,
+        canHide: false,
+        canPin: false,
+        canResize: false
+      }
+    ],
+    executionMode: "server",
+    selectionMode: "multiple",
+    totalItems,
+    state: {
+      sorting,
+      pagination: {
+        pageIndex,
+        pageSize
+      }
+    },
+    onSortingChange,
+    onPaginationChange,
+    initialState: {
+      columnVisibility: { updatedAt: false },
+      columnPinning: { left: ["deal", "status"], right: [] }
+    },
+    renderExpandedContent: (deal) => /* @__PURE__ */ jsxDEV(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Owner"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal.ownerId
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Contact"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal.contactId ?? "No linked contact"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        deal.wonSource ? /* @__PURE__ */ jsxDEV(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Won Source"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal.wonSource
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null,
+        deal.lostReason ? /* @__PURE__ */ jsxDEV(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Lost Reason"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal.lostReason
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null,
+        deal.notes ? /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Notes"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal.notes
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV(DataTable, {
+    controller,
+    title: "All Deals",
+    description: "Server-mode table using the shared ContractSpec controller.",
+    loading,
+    toolbar: /* @__PURE__ */ jsxDEV(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Selected ",
+            controller.selectedRowIds.length
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            totalItems,
+            " total deals"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    footer: `Page ${controller.pageIndex + 1} of ${controller.pageCount}`,
+    emptyState: /* @__PURE__ */ jsxDEV("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No deals found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function DealListTab({
+  onDealClick
+}) {
+  const [sorting, setSorting] = React.useState([
+    { id: "value", desc: true }
+  ]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 3
+  });
+  const { data, loading } = useDealList({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting
+  });
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading deals..."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV(DealListDataTable, {
+    deals: data?.deals ?? [],
+    totalItems: data?.total ?? 0,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting,
+    loading,
+    onSortingChange: (nextSorting) => {
+      setSorting(nextSorting);
+      setPagination((current) => ({ ...current, pageIndex: 0 }));
+    },
+    onPaginationChange: setPagination,
+    onDealClick
+  }, undefined, false, undefined, this);
+}
+export {
+  DealListTab,
+  DealListDataTable
+};

package/dist/ui/tables/DealListTab.smoke.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.crm-pipeline",
-  "version": "3.7.6",
+  "version": "3.7.10",
   "description": "CRM Pipeline - Contacts, Companies, Deals, Tasks",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -312,6 +312,13 @@
       "bun": "./dist/ui/renderers/pipeline.renderer.js",
       "node": "./dist/node/ui/renderers/pipeline.renderer.js",
       "default": "./dist/ui/renderers/pipeline.renderer.js"
+    },
+    "./ui/tables/DealListTab": {
+      "types": "./dist/ui/tables/DealListTab.d.ts",
+      "browser": "./dist/browser/ui/tables/DealListTab.js",
+      "bun": "./dist/ui/tables/DealListTab.js",
+      "node": "./dist/node/ui/tables/DealListTab.js",
+      "default": "./dist/ui/tables/DealListTab.js"
     }
   },
   "scripts": {
@@ -323,32 +330,33 @@
     "dev": "contractspec-bun-build dev",
     "clean": "rimraf dist .turbo",
     "lint": "bun lint:fix",
-    "lint:fix": "eslint src --fix",
-    "lint:check": "eslint src",
+    "lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
+    "lint:check": "biome check .",
     "test": "bun test --pass-with-no-tests",
     "validate": "contractspec validate \"src/**/*\"",
     "prebuild": "contractspec-bun-build prebuild",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.contracts-spec": "3.7.6",
-    "@contractspec/lib.design-system": "3.7.6",
-    "@contractspec/lib.example-shared-ui": "6.0.6",
-    "@contractspec/lib.identity-rbac": "3.7.6",
-    "@contractspec/lib.runtime-sandbox": "2.7.6",
-    "@contractspec/lib.schema": "3.7.6",
-    "@contractspec/lib.ui-kit-web": "3.7.6",
-    "@contractspec/module.audit-trail": "3.7.6",
-    "@contractspec/module.notifications": "3.7.6",
+    "@contractspec/lib.contracts-spec": "4.1.2",
+    "@contractspec/lib.design-system": "3.8.3",
+    "@contractspec/lib.example-shared-ui": "6.0.10",
+    "@contractspec/lib.identity-rbac": "3.7.10",
+    "@contractspec/lib.runtime-sandbox": "2.7.9",
+    "@contractspec/lib.schema": "3.7.8",
+    "@contractspec/lib.ui-kit-web": "3.9.2",
+    "@contractspec/module.audit-trail": "3.7.10",
+    "@contractspec/module.notifications": "3.7.10",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "@contractspec/tool.typescript": "3.7.6",
+    "@contractspec/tool.typescript": "3.7.8",
     "typescript": "^5.9.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.2",
-    "@contractspec/tool.bun": "3.7.6"
+    "@contractspec/tool.bun": "3.7.8",
+    "happy-dom": "^20.8.4"
   },
   "publishConfig": {
     "exports": {
@@ -659,6 +667,13 @@
         "bun": "./dist/ui/renderers/pipeline.renderer.js",
         "node": "./dist/node/ui/renderers/pipeline.renderer.js",
         "default": "./dist/ui/renderers/pipeline.renderer.js"
+      },
+      "./ui/tables/DealListTab": {
+        "types": "./dist/ui/tables/DealListTab.d.ts",
+        "browser": "./dist/browser/ui/tables/DealListTab.js",
+        "bun": "./dist/ui/tables/DealListTab.js",
+        "node": "./dist/node/ui/tables/DealListTab.js",
+        "default": "./dist/ui/tables/DealListTab.js"
       }
     },
     "registry": "https://registry.npmjs.org/",

package/src/crm-pipeline.feature.ts

@@ -10,100 +10,100 @@ import { defineFeature } from '@contractspec/lib.contracts-spec';
  * pipeline operations, and contact management into an installable feature.
  */
 export const CrmPipelineFeature = defineFeature({
-  meta: {
-    key: 'crm-pipeline',
-    title: 'CRM Pipeline',
-    description:
-      'CRM and sales pipeline management with deals, contacts, and companies',
-    domain: 'crm',
-    owners: ['@crm-team'],
-    tags: ['crm', 'sales', 'pipeline', 'deals'],
-    stability: 'experimental',
-    version: '1.0.0',
-  },
+	meta: {
+		key: 'crm-pipeline',
+		title: 'CRM Pipeline',
+		description:
+			'CRM and sales pipeline management with deals, contacts, and companies',
+		domain: 'crm',
+		owners: ['@crm-team'],
+		tags: ['crm', 'sales', 'pipeline', 'deals'],
+		stability: 'experimental',
+		version: '1.0.0',
+	},
 
-  // All contract operations included in this feature
-  operations: [
-    // Deal operations
-    { key: 'crm.deal.create', version: '1.0.0' },
-    { key: 'crm.deal.move', version: '1.0.0' },
-    { key: 'crm.deal.win', version: '1.0.0' },
-    { key: 'crm.deal.lose', version: '1.0.0' },
-    { key: 'crm.deal.list', version: '1.0.0' },
-  ],
+	// All contract operations included in this feature
+	operations: [
+		// Deal operations
+		{ key: 'crm.deal.create', version: '1.0.0' },
+		{ key: 'crm.deal.move', version: '1.0.0' },
+		{ key: 'crm.deal.win', version: '1.0.0' },
+		{ key: 'crm.deal.lose', version: '1.0.0' },
+		{ key: 'crm.deal.list', version: '1.0.0' },
+	],
 
-  // Events emitted by this feature
-  events: [
-    // Deal events
-    { key: 'deal.created', version: '1.0.0' },
-    { key: 'deal.moved', version: '1.0.0' },
-    { key: 'deal.won', version: '1.0.0' },
-    { key: 'deal.lost', version: '1.0.0' },
+	// Events emitted by this feature
+	events: [
+		// Deal events
+		{ key: 'deal.created', version: '1.0.0' },
+		{ key: 'deal.moved', version: '1.0.0' },
+		{ key: 'deal.won', version: '1.0.0' },
+		{ key: 'deal.lost', version: '1.0.0' },
 
-    // Contact events
-    { key: 'contact.created', version: '1.0.0' },
+		// Contact events
+		{ key: 'contact.created', version: '1.0.0' },
 
-    // Task events
-    { key: 'task.completed', version: '1.0.0' },
-  ],
+		// Task events
+		{ key: 'task.completed', version: '1.0.0' },
+	],
 
-  // Presentations associated with this feature
-  presentations: [
-    { key: 'crm.dashboard', version: '1.0.0' },
-    { key: 'crm.pipeline.kanban', version: '1.0.0' },
-    { key: 'crm.deal.viewList', version: '1.0.0' },
-    { key: 'crm.deal.detail', version: '1.0.0' },
-    { key: 'crm.deal.card', version: '1.0.0' },
-    { key: 'crm.pipeline.metrics', version: '1.0.0' },
-  ],
+	// Presentations associated with this feature
+	presentations: [
+		{ key: 'crm.dashboard', version: '1.0.0' },
+		{ key: 'crm.pipeline.kanban', version: '1.0.0' },
+		{ key: 'crm.deal.viewList', version: '1.0.0' },
+		{ key: 'crm.deal.detail', version: '1.0.0' },
+		{ key: 'crm.deal.card', version: '1.0.0' },
+		{ key: 'crm.pipeline.metrics', version: '1.0.0' },
+	],
 
-  // Link operations to their primary presentations
-  opToPresentation: [
-    {
-      op: { key: 'crm.deal.list', version: '1.0.0' },
-      pres: { key: 'crm.pipeline.kanban', version: '1.0.0' },
-    },
-    {
-      op: { key: 'crm.deal.move', version: '1.0.0' },
-      pres: { key: 'crm.pipeline.kanban', version: '1.0.0' },
-    },
-  ],
+	// Link operations to their primary presentations
+	opToPresentation: [
+		{
+			op: { key: 'crm.deal.list', version: '1.0.0' },
+			pres: { key: 'crm.pipeline.kanban', version: '1.0.0' },
+		},
+		{
+			op: { key: 'crm.deal.move', version: '1.0.0' },
+			pres: { key: 'crm.pipeline.kanban', version: '1.0.0' },
+		},
+	],
 
-  // Target requirements for multi-surface rendering
-  presentationsTargets: [
-    { key: 'crm.dashboard', version: '1.0.0', targets: ['react', 'markdown'] },
-    {
-      key: 'crm.pipeline.kanban',
-      version: '1.0.0',
-      targets: ['react', 'markdown'],
-    },
-    {
-      key: 'crm.deal.viewList',
-      version: '1.0.0',
-      targets: ['react', 'markdown', 'application/json'],
-    },
-    {
-      key: 'crm.pipeline.metrics',
-      version: '1.0.0',
-      targets: ['react', 'markdown'],
-    },
-  ],
+	// Target requirements for multi-surface rendering
+	presentationsTargets: [
+		{ key: 'crm.dashboard', version: '1.0.0', targets: ['react', 'markdown'] },
+		{
+			key: 'crm.pipeline.kanban',
+			version: '1.0.0',
+			targets: ['react', 'markdown'],
+		},
+		{
+			key: 'crm.deal.viewList',
+			version: '1.0.0',
+			targets: ['react', 'markdown', 'application/json'],
+		},
+		{
+			key: 'crm.pipeline.metrics',
+			version: '1.0.0',
+			targets: ['react', 'markdown'],
+		},
+	],
 
-  // Capability requirements
-  capabilities: {
-    requires: [
-      { key: 'identity', version: '1.0.0' },
-      { key: 'audit-trail', version: '1.0.0' },
-      { key: 'notifications', version: '1.0.0' },
-    ],
-  },
+	// Capability requirements
+	capabilities: {
+		requires: [
+			{ key: 'identity', version: '1.0.0' },
+			{ key: 'audit-trail', version: '1.0.0' },
+			{ key: 'notifications', version: '1.0.0' },
+		],
+	},
 
-  telemetry: [{ key: 'crm-pipeline.telemetry', version: '1.0.0' }],
+	telemetry: [{ key: 'crm-pipeline.telemetry', version: '1.0.0' }],
 
-  docs: [
-    'docs.examples.crm-pipeline.goal',
-    'docs.examples.crm-pipeline.usage',
-    'docs.examples.crm-pipeline.reference',
-    'docs.examples.crm-pipeline.constraints',
-  ],
+	docs: [
+		'docs.examples.crm-pipeline.goal',
+		'docs.examples.crm-pipeline.usage',
+		'docs.examples.crm-pipeline.reference',
+		'docs.examples.crm-pipeline.constraints',
+	],
 });