@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/dist/ui/CrmDealCard.js

@@ -14,7 +14,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) => {
@@ -23,22 +23,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)
         ]

package/dist/ui/CrmPipelineBoard.js

@@ -14,7 +14,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) => {
@@ -23,22 +23,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)
         ]
@@ -76,10 +76,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: [
@@ -98,7 +98,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)
             ]
@@ -106,7 +106,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",
@@ -124,15 +124,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", {
@@ -141,7 +141,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))
                       ]

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

@@ -1,2 +1,2 @@
-export { useDealList, type UseDealListOptions } from './useDealList';
-export { useDealMutations, type UseDealMutationsOptions, } from './useDealMutations';
+export { type UseDealListOptions, useDealList } from './useDealList';
+export { type UseDealMutationsOptions, useDealMutations, } from './useDealMutations';

package/dist/ui/hooks/index.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/hooks/useDealList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 "use client";
 function useDealList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
@@ -11,8 +11,13 @@ function useDealList(options = {}) {
   const [stages, setStages] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
+  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);
@@ -24,8 +29,10 @@ function useDealList(options = {}) {
           stageId: options.stageId,
           status: options.status === "all" ? undefined : options.status,
           search: options.search,
-          limit: options.limit ?? 50,
-          offset: (page - 1) * (options.limit ?? 50)
+          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 })
@@ -45,8 +52,10 @@ function useDealList(options = {}) {
     options.stageId,
     options.status,
     options.search,
-    options.limit,
-    page
+    pageIndex,
+    pageSize,
+    sortBy,
+    sortDirection
   ]);
   useEffect(() => {
     fetchData();
@@ -74,16 +83,18 @@ function useDealList(options = {}) {
     loading,
     error,
     stats,
-    page,
+    page: pageIndex + 1,
+    pageIndex,
+    pageSize,
     refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1)
+    nextPage: options.pageIndex === undefined ? () => setInternalPage((page) => page + 1) : undefined,
+    prevPage: options.pageIndex === undefined ? () => pageIndex > 0 && setInternalPage((page) => page - 1) : undefined
   };
 }
 
 // src/ui/hooks/useDealMutations.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useDealMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime2();
   const { crm } = handlers;

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

@@ -1,3 +1,4 @@
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
 import { type Deal as RuntimeDeal, type ListDealsOutput as RuntimeListDealsOutput, type Stage } from '../../handlers/crm.handlers';
 export type Deal = RuntimeDeal;
 export type ListDealsOutput = RuntimeListDealsOutput;
@@ -7,6 +8,9 @@ export interface UseDealListOptions {
     status?: 'OPEN' | 'WON' | 'LOST' | 'all';
     search?: string;
     limit?: number;
+    pageIndex?: number;
+    pageSize?: number;
+    sorting?: ContractTableSort[];
 }
 export declare function useDealList(options?: UseDealListOptions): {
     data: RuntimeListDealsOutput | null;
@@ -24,7 +28,9 @@ export declare function useDealList(options?: UseDealListOptions): {
         lostCount: number;
     } | null;
     page: number;
+    pageIndex: number;
+    pageSize: number;
     refetch: () => Promise<void>;
-    nextPage: () => void;
-    prevPage: () => false | void;
+    nextPage: (() => void) | undefined;
+    prevPage: (() => false | void) | undefined;
 };

package/dist/ui/hooks/useDealList.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/hooks/useDealList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 "use client";
 function useDealList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
@@ -11,8 +11,13 @@ function useDealList(options = {}) {
   const [stages, setStages] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
+  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);
@@ -24,8 +29,10 @@ function useDealList(options = {}) {
           stageId: options.stageId,
           status: options.status === "all" ? undefined : options.status,
           search: options.search,
-          limit: options.limit ?? 50,
-          offset: (page - 1) * (options.limit ?? 50)
+          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 })
@@ -45,8 +52,10 @@ function useDealList(options = {}) {
     options.stageId,
     options.status,
     options.search,
-    options.limit,
-    page
+    pageIndex,
+    pageSize,
+    sortBy,
+    sortDirection
   ]);
   useEffect(() => {
     fetchData();
@@ -74,10 +83,12 @@ function useDealList(options = {}) {
     loading,
     error,
     stats,
-    page,
+    page: pageIndex + 1,
+    pageIndex,
+    pageSize,
     refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1)
+    nextPage: options.pageIndex === undefined ? () => setInternalPage((page) => page + 1) : undefined,
+    prevPage: options.pageIndex === undefined ? () => pageIndex > 0 && setInternalPage((page) => page - 1) : undefined
   };
 }
 export {

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

@@ -1,3 +1,12 @@
+/**
+ * Hook for CRM deal mutations (commands)
+ *
+ * Uses runtime-local database-backed handlers for:
+ * - CreateDealContract
+ * - MoveDealContract
+ * - WinDealContract
+ * - LoseDealContract
+ */
 import type { CreateDealInput, Deal, LoseDealInput, MoveDealInput, WinDealInput } from '../../handlers/crm.handlers';
 export interface MutationState<T> {
     loading: boolean;

package/dist/ui/hooks/useDealMutations.js

@@ -1,7 +1,7 @@
 // @bun
 // src/ui/hooks/useDealMutations.ts
-import { useCallback, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useState } from "react";
 function useDealMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { crm } = handlers;

package/dist/ui/index.d.ts

@@ -1,7 +1,7 @@
 export * from './CrmDashboard';
-export * from './CrmPipelineBoard';
 export * from './CrmDealCard';
-export * from './modals';
+export * from './CrmPipelineBoard';
 export * from './hooks';
-export * from './renderers';
+export * from './modals';
 export * from './overlays';
+export * from './renderers';