@contractspec/example.crm-pipeline 3.7.17 → 3.7.18

package/dist/browser/ui/renderers/pipeline.renderer.js

@@ -1,275 +1 @@
-// src/ui/CrmDealCard.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-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()) / (1000 * 60 * 60 * 24)) : null;
-  return /* @__PURE__ */ jsxDEV("div", {
-    onClick,
-    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) => {
-      if (e.key === "Enter" || e.key === " ")
-        onClick?.();
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV("h4", {
-        className: "font-medium leading-snug",
-        children: deal.name
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "mt-2 font-semibold text-lg text-primary",
-        children: formatCurrency(deal.value, deal.currency)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        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 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)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/ui/CrmPipelineBoard.tsx
-import { useState } from "react";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-function formatCurrency2(value) {
-  if (value >= 1e6)
-    return `$${(value / 1e6).toFixed(1)}M`;
-  if (value >= 1000)
-    return `$${(value / 1000).toFixed(0)}K`;
-  return `$${value}`;
-}
-function CrmPipelineBoard({
-  dealsByStage,
-  stages,
-  onDealClick,
-  onDealMove
-}) {
-  const [quickMoveOpen, setQuickMoveOpen] = useState(null);
-  const sortedStages = [...stages].sort((a, b) => a.position - b.position);
-  const handleQuickMove = (dealId, toStageId) => {
-    onDealMove?.(dealId, toStageId);
-    setQuickMoveOpen(null);
-  };
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "flex gap-4 overflow-x-auto pb-4",
-    children: sortedStages.map((stage) => {
-      const deals = dealsByStage[stage.id] ?? [];
-      const stageValue = deals.reduce((sum, d) => sum + d.value, 0);
-      return /* @__PURE__ */ jsxDEV2("div", {
-        className: "flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30",
-        children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex items-center justify-between border-border border-b px-3 py-2",
-            children: [
-              /* @__PURE__ */ jsxDEV2("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV2("h3", {
-                    className: "font-medium",
-                    children: stage.name
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground text-xs",
-                    children: [
-                      deals.length,
-                      " deals · ",
-                      formatCurrency2(stageValue)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV2("span", {
-                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)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex flex-1 flex-col gap-2 p-2",
-            children: deals.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
-              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",
-              children: [
-                /* @__PURE__ */ jsxDEV2(CrmDealCard, {
-                  deal,
-                  onClick: () => onDealClick?.(deal.id)
-                }, undefined, false, undefined, this),
-                deal.status === "OPEN" && onDealMove && /* @__PURE__ */ jsxDEV2("div", {
-                  className: "absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("button", {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setQuickMoveOpen(quickMoveOpen === deal.id ? null : deal.id);
-                      },
-                      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: "➡️"
-                    }, undefined, false, undefined, this),
-                    quickMoveOpen === deal.id && /* @__PURE__ */ jsxDEV2("div", {
-                      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: "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", {
-                          type: "button",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleQuickMove(deal.id, s.id);
-                          },
-                          className: "w-full px-3 py-1.5 text-left text-sm hover:bg-muted",
-                          children: s.name
-                        }, s.id, false, undefined, this))
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, deal.id, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, stage.id, true, undefined, this);
-    })
-  }, undefined, false, undefined, this);
-}
-
-// 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 } = 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([
-        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/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
-};
+import{jsx as P,jsxs as I}from"react/jsx-runtime";function j(A,J){return new Intl.NumberFormat("en-US",{style:"currency",currency:J,minimumFractionDigits:0,maximumFractionDigits:0}).format(A)}function D({deal:A,onClick:J}){let G=A.expectedCloseDate?Math.ceil((A.expectedCloseDate.getTime()-Date.now())/86400000):null;return I("div",{onClick:J,className:"cursor-pointer rounded-lg border border-border bg-card p-3 shadow-sm transition-shadow hover:shadow-md",role:"button",tabIndex:0,onKeyDown:(_)=>{if(_.key==="Enter"||_.key===" ")J?.()},children:[P("h4",{className:"font-medium leading-snug",children:A.name}),P("div",{className:"mt-2 font-semibold text-lg text-primary",children:j(A.value,A.currency)}),I("div",{className:"mt-3 flex items-center justify-between text-muted-foreground text-xs",children:[G!==null&&P("span",{className:G<0?"text-red-500":G<=7?"text-yellow-600 dark:text-yellow-500":"",children:G<0?`${Math.abs(G)}d overdue`:G===0?"Due today":`${G}d left`}),P("span",{className:`rounded px-1.5 py-0.5 font-medium text-xs ${A.status==="WON"?"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400":A.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:A.status})]})]})}import{useState as x}from"react";import{jsx as W,jsxs as V}from"react/jsx-runtime";function g(A){if(A>=1e6)return`$${(A/1e6).toFixed(1)}M`;if(A>=1000)return`$${(A/1000).toFixed(0)}K`;return`$${A}`}function S({dealsByStage:A,stages:J,onDealClick:G,onDealMove:_}){let[K,z]=x(null),E=[...J].sort(($,X)=>$.position-X.position),b=($,X)=>{_?.($,X),z(null)};return W("div",{className:"flex gap-4 overflow-x-auto pb-4",children:E.map(($)=>{let X=A[$.id]??[],w=X.reduce((F,Y)=>F+Y.value,0);return V("div",{className:"flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30",children:[V("div",{className:"flex items-center justify-between border-border border-b px-3 py-2",children:[V("div",{children:[W("h3",{className:"font-medium",children:$.name}),V("p",{className:"text-muted-foreground text-xs",children:[X.length," deals · ",g(w)]})]}),W("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs",children:X.length})]}),W("div",{className:"flex flex-1 flex-col gap-2 p-2",children:X.length===0?W("div",{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"}):X.map((F)=>V("div",{className:"group relative",children:[W(D,{deal:F,onClick:()=>G?.(F.id)}),F.status==="OPEN"&&_&&V("div",{className:"absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100",children:[W("button",{type:"button",onClick:(Y)=>{Y.stopPropagation(),z(K===F.id?null:F.id)},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:"➡️"}),K===F.id&&V("div",{className:"absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border border-border bg-card py-1 shadow-lg",children:[W("p",{className:"px-3 py-1 font-medium text-muted-foreground text-xs",children:"Move to:"}),E.filter((Y)=>Y.id!==F.stageId).map((Y)=>W("button",{type:"button",onClick:(L)=>{L.stopPropagation(),b(F.id,Y.id)},className:"w-full px-3 py-1.5 text-left text-sm hover:bg-muted",children:Y.name},Y.id))]})]})]},F.id))})]},$.id)})})}import{useTemplateRuntime as c}from"@contractspec/lib.example-shared-ui";import{useCallback as u,useEffect as p,useMemo as r,useState as q}from"react";function v(A={}){let{handlers:J,projectId:G}=c(),{crm:_}=J,[K,z]=q(null),[E,b]=q({}),[$,X]=q([]),[w,F]=q(!0),[Y,L]=q(null),[C,B]=q(0),O=A.pipelineId??"pipeline-1",T=A.pageIndex??C,Q=A.pageSize??A.limit??50,[U]=A.sorting??[],N=U?.id,k=U?U.desc?"desc":"asc":void 0,f=u(async()=>{F(!0),L(null);try{let[Z,R,h]=await Promise.all([_.listDeals({projectId:G,pipelineId:O,stageId:A.stageId,status:A.status==="all"?void 0:A.status,search:A.search,limit:Q,offset:T*Q,sortBy:N==="name"||N==="value"||N==="status"||N==="expectedCloseDate"||N==="updatedAt"?N:void 0,sortDirection:k}),_.getDealsByStage({projectId:G,pipelineId:O}),_.getPipelineStages({pipelineId:O})]);z(Z),b(R),X(h)}catch(Z){L(Z instanceof Error?Z:Error("Unknown error"))}finally{F(!1)}},[_,G,O,A.stageId,A.status,A.search,T,Q,N,k]);p(()=>{f()},[f]);let m=r(()=>{if(!K)return null;let Z=K.deals.filter((H)=>H.status==="OPEN"),R=K.deals.filter((H)=>H.status==="WON"),h=K.deals.filter((H)=>H.status==="LOST");return{total:K.total,totalValue:K.totalValue,openCount:Z.length,openValue:Z.reduce((H,M)=>H+M.value,0),wonCount:R.length,wonValue:R.reduce((H,M)=>H+M.value,0),lostCount:h.length}},[K]);return{data:K,dealsByStage:E,stages:$,loading:w,error:Y,stats:m,page:T+1,pageIndex:T,pageSize:Q,refetch:f,nextPage:A.pageIndex===void 0?()=>B((Z)=>Z+1):void 0,prevPage:A.pageIndex===void 0?()=>T>0&&B((Z)=>Z-1):void 0}}import{jsx as y}from"react/jsx-runtime";function i(){let{dealsByStage:A,stages:J}=v();return y(S,{dealsByStage:A,stages:J})}var JA={target:"react",render:async(A,J)=>{if(A.source.type!=="component")throw Error("Invalid source type");if(A.source.componentKey!=="CrmPipelineView")throw Error(`Unknown component: ${A.source.componentKey}`);return y(i,{})}};export{JA as crmPipelineReactRenderer};

package/dist/browser/ui/tables/DealListTab.js

@@ -1,390 +1 @@
-// 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
-};
+import{useTemplateRuntime as j}from"@contractspec/lib.example-shared-ui";import{useCallback as m,useEffect as u,useMemo as c,useState as $}from"react";function D(A={}){let{handlers:Q,projectId:W}=j(),{crm:K}=Q,[J,X]=$(null),[Z,M]=$({}),[w,_]=$([]),[q,C]=$(!0),[T,y]=$(null),[I,B]=$(0),V=A.pipelineId??"pipeline-1",E=A.pageIndex??I,H=A.pageSize??A.limit??50,[v]=A.sorting??[],Y=v?.id,k=v?v.desc?"desc":"asc":void 0,z=m(async()=>{C(!0),y(null);try{let[N,f,L]=await Promise.all([K.listDeals({projectId:W,pipelineId:V,stageId:A.stageId,status:A.status==="all"?void 0:A.status,search:A.search,limit:H,offset:E*H,sortBy:Y==="name"||Y==="value"||Y==="status"||Y==="expectedCloseDate"||Y==="updatedAt"?Y:void 0,sortDirection:k}),K.getDealsByStage({projectId:W,pipelineId:V}),K.getPipelineStages({pipelineId:V})]);X(N),M(f),_(L)}catch(N){y(N instanceof Error?N:Error("Unknown error"))}finally{C(!1)}},[K,W,V,A.stageId,A.status,A.search,E,H,Y,k]);u(()=>{z()},[z]);let S=c(()=>{if(!J)return null;let N=J.deals.filter((U)=>U.status==="OPEN"),f=J.deals.filter((U)=>U.status==="WON"),L=J.deals.filter((U)=>U.status==="LOST");return{total:J.total,totalValue:J.totalValue,openCount:N.length,openValue:N.reduce((U,b)=>U+b.value,0),wonCount:f.length,wonValue:f.reduce((U,b)=>U+b.value,0),lostCount:L.length}},[J]);return{data:J,dealsByStage:Z,stages:w,loading:q,error:T,stats:S,page:E+1,pageIndex:E,pageSize:H,refetch:z,nextPage:A.pageIndex===void 0?()=>B((N)=>N+1):void 0,prevPage:A.pageIndex===void 0?()=>E>0&&B((N)=>N-1):void 0}}import{Button as x,DataTable as g,LoaderBlock as p}from"@contractspec/lib.design-system";import{useContractTable as d}from"@contractspec/lib.presentation-runtime-react";import{Badge as r}from"@contractspec/lib.ui-kit-web/ui/badge";import{HStack as R,VStack as P}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as G}from"@contractspec/lib.ui-kit-web/ui/text";import*as h from"react";import{jsx as F,jsxs as O}from"react/jsx-runtime";function l(A,Q="USD"){return new Intl.NumberFormat("en-US",{style:"currency",currency:Q,minimumFractionDigits:0,maximumFractionDigits:0}).format(A)}function i(A){switch(A){case"WON":return"default";case"LOST":return"destructive";case"STALE":return"outline";default:return"secondary"}}function n({deals:A,totalItems:Q,pageIndex:W,pageSize:K,sorting:J,loading:X,onSortingChange:Z,onPaginationChange:M,onDealClick:w}){let _=d({data:A,columns:[{id:"deal",header:"Deal",label:"Deal",accessor:(q)=>q.name,cell:({item:q})=>O(P,{gap:"xs",children:[F(G,{className:"font-medium text-sm",children:q.name}),F(G,{className:"text-muted-foreground text-xs",children:q.companyId??"Unassigned company"})]}),size:240,minSize:180,canSort:!0,canPin:!0,canResize:!0},{id:"value",header:"Value",label:"Value",accessorKey:"value",cell:({item:q})=>l(q.value,q.currency),align:"right",size:140,canSort:!0,canResize:!0},{id:"status",header:"Status",label:"Status",accessorKey:"status",cell:({value:q})=>F(r,{variant:i(q),children:String(q)}),size:130,canSort:!0,canHide:!0,canPin:!0,canResize:!0},{id:"expectedCloseDate",header:"Expected Close",label:"Expected Close",accessor:(q)=>q.expectedCloseDate?.toISOString()??"",cell:({item:q})=>q.expectedCloseDate?.toLocaleDateString()??"Not scheduled",size:170,canSort:!0,canHide:!0,canResize:!0},{id:"updatedAt",header:"Updated",label:"Updated",accessor:(q)=>q.updatedAt.toISOString(),cell:({item:q})=>q.updatedAt.toLocaleDateString(),size:140,canSort:!0,canHide:!0,canResize:!0},{id:"actions",header:"Actions",label:"Actions",accessor:(q)=>q.id,cell:({item:q})=>F(x,{variant:"ghost",size:"sm",onPress:()=>w?.(q.id),children:"Actions"}),size:120,canSort:!1,canHide:!1,canPin:!1,canResize:!1}],executionMode:"server",selectionMode:"multiple",totalItems:Q,state:{sorting:J,pagination:{pageIndex:W,pageSize:K}},onSortingChange:Z,onPaginationChange:M,initialState:{columnVisibility:{updatedAt:!1},columnPinning:{left:["deal","status"],right:[]}},renderExpandedContent:(q)=>O(P,{gap:"sm",className:"py-2",children:[O(R,{justify:"between",children:[F(G,{className:"font-medium text-sm",children:"Owner"}),F(G,{className:"text-muted-foreground text-sm",children:q.ownerId})]}),O(R,{justify:"between",children:[F(G,{className:"font-medium text-sm",children:"Contact"}),F(G,{className:"text-muted-foreground text-sm",children:q.contactId??"No linked contact"})]}),q.wonSource?O(R,{justify:"between",children:[F(G,{className:"font-medium text-sm",children:"Won Source"}),F(G,{className:"text-muted-foreground text-sm",children:q.wonSource})]}):null,q.lostReason?O(R,{justify:"between",children:[F(G,{className:"font-medium text-sm",children:"Lost Reason"}),F(G,{className:"text-muted-foreground text-sm",children:q.lostReason})]}):null,q.notes?O(P,{gap:"xs",children:[F(G,{className:"font-medium text-sm",children:"Notes"}),F(G,{className:"text-muted-foreground text-sm",children:q.notes})]}):null]}),getCanExpand:()=>!0});return F(g,{controller:_,title:"All Deals",description:"Server-mode table using the shared ContractSpec controller.",loading:X,toolbar:O(R,{gap:"sm",className:"flex-wrap",children:[O(G,{className:"text-muted-foreground text-sm",children:["Selected ",_.selectedRowIds.length]}),O(G,{className:"text-muted-foreground text-sm",children:[Q," total deals"]})]}),footer:`Page ${_.pageIndex+1} of ${_.pageCount}`,emptyState:F("div",{className:"rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",children:"No deals found"})})}function Jq({onDealClick:A}){let[Q,W]=h.useState([{id:"value",desc:!0}]),[K,J]=h.useState({pageIndex:0,pageSize:3}),{data:X,loading:Z}=D({pageIndex:K.pageIndex,pageSize:K.pageSize,sorting:Q});if(Z&&!X)return F(p,{label:"Loading deals..."});return F(n,{deals:X?.deals??[],totalItems:X?.total??0,pageIndex:K.pageIndex,pageSize:K.pageSize,sorting:Q,loading:Z,onSortingChange:(M)=>{W(M),J((w)=>({...w,pageIndex:0}))},onPaginationChange:J,onDealClick:A})}export{Jq as DealListTab,n as DealListDataTable};