@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/dist/ui/renderers/index.js

@@ -23,6 +23,13 @@ function rowToDeal(row) {
     updatedAt: new Date(row.updatedAt)
   };
 }
+var DEAL_SORT_COLUMNS = {
+  name: "name",
+  value: "value",
+  status: "status",
+  expectedCloseDate: "expectedCloseDate",
+  updatedAt: "updatedAt"
+};
 function createCrmHandlers(db) {
   async function listDeals(input) {
     const {
@@ -33,7 +40,9 @@ function createCrmHandlers(db) {
       ownerId,
       search,
       limit = 20,
-      offset = 0
+      offset = 0,
+      sortBy = "value",
+      sortDirection = "desc"
     } = input;
     let whereClause = "WHERE projectId = ?";
     const params = [projectId];
@@ -61,7 +70,9 @@ function createCrmHandlers(db) {
     const total = countResult[0]?.count ?? 0;
     const valueResult = (await db.query(`SELECT COALESCE(SUM(value), 0) as total FROM crm_deal ${whereClause}`, params)).rows;
     const totalValue = valueResult[0]?.total ?? 0;
-    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY value DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    const orderByColumn = DEAL_SORT_COLUMNS[sortBy] ?? DEAL_SORT_COLUMNS.value;
+    const orderByDirection = sortDirection === "asc" ? "ASC" : "DESC";
+    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY ${orderByColumn} ${orderByDirection} LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
     return {
       deals: dealRows.map(rowToDeal),
       total,
@@ -441,88 +452,6 @@ async function mockGetDealsByStageHandler(input) {
 async function mockGetPipelineStagesHandler(input) {
   return MOCK_STAGES.filter((s) => s.pipelineId === input.pipelineId);
 }
-// src/ui/hooks/useDealList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-"use client";
-function useDealList(options = {}) {
-  const { handlers, projectId } = useTemplateRuntime();
-  const { crm: crm2 } = 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([
-        crm2.listDeals({
-          projectId,
-          pipelineId,
-          stageId: options.stageId,
-          status: options.status === "all" ? undefined : options.status,
-          search: options.search,
-          limit: options.limit ?? 50,
-          offset: (page - 1) * (options.limit ?? 50)
-        }),
-        crm2.getDealsByStage({ projectId, pipelineId }),
-        crm2.getPipelineStages({ pipelineId })
-      ]);
-      setData(dealsResult);
-      setDealsByStage(stageDealsResult);
-      setStages(stagesResult);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Unknown error"));
-    } finally {
-      setLoading(false);
-    }
-  }, [
-    crm2,
-    projectId,
-    pipelineId,
-    options.stageId,
-    options.status,
-    options.search,
-    options.limit,
-    page
-  ]);
-  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,
-    refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1)
-  };
-}
-
 // src/ui/CrmDealCard.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -538,7 +467,7 @@ function CrmDealCard({ deal, onClick }) {
   const daysUntilClose = deal.expectedCloseDate ? Math.ceil((deal.expectedCloseDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)) : null;
   return /* @__PURE__ */ jsxDEV("div", {
     onClick,
-    className: "border-border bg-card cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md",
+    className: "cursor-pointer rounded-lg border border-border bg-card p-3 shadow-sm transition-shadow hover:shadow-md",
     role: "button",
     tabIndex: 0,
     onKeyDown: (e) => {
@@ -547,22 +476,22 @@ function CrmDealCard({ deal, onClick }) {
     },
     children: [
       /* @__PURE__ */ jsxDEV("h4", {
-        className: "leading-snug font-medium",
+        className: "font-medium leading-snug",
         children: deal.name
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "text-primary mt-2 text-lg font-semibold",
+        className: "mt-2 font-semibold text-lg text-primary",
         children: formatCurrency(deal.value, deal.currency)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "text-muted-foreground mt-3 flex items-center justify-between text-xs",
+        className: "mt-3 flex items-center justify-between text-muted-foreground text-xs",
         children: [
           daysUntilClose !== null && /* @__PURE__ */ jsxDEV("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`
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("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"}`,
+            className: `rounded px-1.5 py-0.5 font-medium text-xs ${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
           }, undefined, false, undefined, this)
         ]
@@ -572,7 +501,7 @@ function CrmDealCard({ deal, onClick }) {
 }
 
 // src/ui/CrmPipelineBoard.tsx
-import { useState as useState2 } from "react";
+import { useState } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function formatCurrency2(value) {
@@ -588,7 +517,7 @@ function CrmPipelineBoard({
   onDealClick,
   onDealMove
 }) {
-  const [quickMoveOpen, setQuickMoveOpen] = useState2(null);
+  const [quickMoveOpen, setQuickMoveOpen] = useState(null);
   const sortedStages = [...stages].sort((a, b) => a.position - b.position);
   const handleQuickMove = (dealId, toStageId) => {
     onDealMove?.(dealId, toStageId);
@@ -600,10 +529,10 @@ function CrmPipelineBoard({
       const deals = dealsByStage[stage.id] ?? [];
       const stageValue = deals.reduce((sum, d) => sum + d.value, 0);
       return /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg",
+        className: "flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30",
         children: [
           /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border flex items-center justify-between border-b px-3 py-2",
+            className: "flex items-center justify-between border-border border-b px-3 py-2",
             children: [
               /* @__PURE__ */ jsxDEV2("div", {
                 children: [
@@ -622,7 +551,7 @@ function CrmPipelineBoard({
                 ]
               }, undefined, true, undefined, this),
               /* @__PURE__ */ jsxDEV2("span", {
-                className: "bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
+                className: "flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs",
                 children: deals.length
               }, undefined, false, undefined, this)
             ]
@@ -630,7 +559,7 @@ function CrmPipelineBoard({
           /* @__PURE__ */ jsxDEV2("div", {
             className: "flex flex-1 flex-col gap-2 p-2",
             children: deals.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
-              className: "border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed text-xs",
+              className: "flex h-24 items-center justify-center rounded-md border-2 border-muted-foreground/20 border-dashed text-muted-foreground text-xs",
               children: "No deals"
             }, undefined, false, undefined, this) : deals.map((deal) => /* @__PURE__ */ jsxDEV2("div", {
               className: "group relative",
@@ -648,15 +577,15 @@ function CrmPipelineBoard({
                         e.stopPropagation();
                         setQuickMoveOpen(quickMoveOpen === deal.id ? null : deal.id);
                       },
-                      className: "bg-background border-border hover:bg-muted flex h-6 w-6 items-center justify-center rounded border text-xs shadow-sm",
+                      className: "flex h-6 w-6 items-center justify-center rounded border border-border bg-background text-xs shadow-sm hover:bg-muted",
                       title: "Quick move",
                       children: "\u27A1\uFE0F"
                     }, undefined, false, undefined, this),
                     quickMoveOpen === deal.id && /* @__PURE__ */ jsxDEV2("div", {
-                      className: "bg-card border-border absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border py-1 shadow-lg",
+                      className: "absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border border-border bg-card py-1 shadow-lg",
                       children: [
                         /* @__PURE__ */ jsxDEV2("p", {
-                          className: "text-muted-foreground px-3 py-1 text-xs font-medium",
+                          className: "px-3 py-1 font-medium text-muted-foreground text-xs",
                           children: "Move to:"
                         }, undefined, false, undefined, this),
                         sortedStages.filter((s) => s.id !== deal.stageId).map((s) => /* @__PURE__ */ jsxDEV2("button", {
@@ -665,7 +594,7 @@ function CrmPipelineBoard({
                             e.stopPropagation();
                             handleQuickMove(deal.id, s.id);
                           },
-                          className: "hover:bg-muted w-full px-3 py-1.5 text-left text-sm",
+                          className: "w-full px-3 py-1.5 text-left text-sm hover:bg-muted",
                           children: s.name
                         }, s.id, false, undefined, this))
                       ]
@@ -681,27 +610,98 @@ function CrmPipelineBoard({
   }, undefined, false, undefined, this);
 }
 
-// src/ui/renderers/pipeline.renderer.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-function CrmPipelineBoardWrapper() {
-  const { dealsByStage, stages } = useDealList();
-  return /* @__PURE__ */ jsxDEV3(CrmPipelineBoard, {
+// src/ui/hooks/useDealList.ts
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
+"use client";
+function useDealList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime();
+  const { crm: crm2 } = handlers;
+  const [data, setData] = useState2(null);
+  const [dealsByStage, setDealsByStage] = useState2({});
+  const [stages, setStages] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [internalPage, setInternalPage] = useState2(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([
+        crm2.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
+        }),
+        crm2.getDealsByStage({ projectId, pipelineId }),
+        crm2.getPipelineStages({ pipelineId })
+      ]);
+      setData(dealsResult);
+      setDealsByStage(stageDealsResult);
+      setStages(stagesResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    crm2,
+    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
-  }, undefined, false, undefined, this);
+    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
+  };
 }
-var crmPipelineReactRenderer = {
-  target: "react",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component") {
-      throw new Error("Invalid source type");
-    }
-    if (desc.source.componentKey !== "CrmPipelineView") {
-      throw new Error(`Unknown component: ${desc.source.componentKey}`);
-    }
-    return /* @__PURE__ */ jsxDEV3(CrmPipelineBoardWrapper, {}, undefined, false, undefined, this);
-  }
-};
 
 // src/ui/renderers/pipeline.markdown.ts
 function formatCurrency3(value, currency = "USD") {
@@ -821,6 +821,28 @@ var crmDashboardMarkdownRenderer = {
     };
   }
 };
+
+// src/ui/renderers/pipeline.renderer.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function CrmPipelineBoardWrapper() {
+  const { dealsByStage, stages } = useDealList();
+  return /* @__PURE__ */ jsxDEV3(CrmPipelineBoard, {
+    dealsByStage,
+    stages
+  }, undefined, false, undefined, this);
+}
+var crmPipelineReactRenderer = {
+  target: "react",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component") {
+      throw new Error("Invalid source type");
+    }
+    if (desc.source.componentKey !== "CrmPipelineView") {
+      throw new Error(`Unknown component: ${desc.source.componentKey}`);
+    }
+    return /* @__PURE__ */ jsxDEV3(CrmPipelineBoardWrapper, {}, undefined, false, undefined, this);
+  }
+};
 export {
   crmPipelineReactRenderer,
   crmPipelineMarkdownRenderer,

package/dist/ui/renderers/pipeline.markdown.js

@@ -23,6 +23,13 @@ function rowToDeal(row) {
     updatedAt: new Date(row.updatedAt)
   };
 }
+var DEAL_SORT_COLUMNS = {
+  name: "name",
+  value: "value",
+  status: "status",
+  expectedCloseDate: "expectedCloseDate",
+  updatedAt: "updatedAt"
+};
 function createCrmHandlers(db) {
   async function listDeals(input) {
     const {
@@ -33,7 +40,9 @@ function createCrmHandlers(db) {
       ownerId,
       search,
       limit = 20,
-      offset = 0
+      offset = 0,
+      sortBy = "value",
+      sortDirection = "desc"
     } = input;
     let whereClause = "WHERE projectId = ?";
     const params = [projectId];
@@ -61,7 +70,9 @@ function createCrmHandlers(db) {
     const total = countResult[0]?.count ?? 0;
     const valueResult = (await db.query(`SELECT COALESCE(SUM(value), 0) as total FROM crm_deal ${whereClause}`, params)).rows;
     const totalValue = valueResult[0]?.total ?? 0;
-    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY value DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    const orderByColumn = DEAL_SORT_COLUMNS[sortBy] ?? DEAL_SORT_COLUMNS.value;
+    const orderByDirection = sortDirection === "asc" ? "ASC" : "DESC";
+    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY ${orderByColumn} ${orderByDirection} LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
     return {
       deals: dealRows.map(rowToDeal),
       total,

package/dist/ui/renderers/pipeline.renderer.d.ts

@@ -4,6 +4,6 @@
  * Renders the CRM pipeline board component.
  * Data is fetched via the CrmPipelineBoard component's internal hooks.
  */
-import * as React from 'react';
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import * as React from 'react';
 export declare const crmPipelineReactRenderer: PresentationRenderer<React.ReactElement>;