@contractspec/example.crm-pipeline 1.57.0 → 1.59.0

package/dist/ui/CrmDashboard.js

@@ -1,304 +1,1326 @@
-'use client';
+// @bun
+// 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 } = 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([
+        crm.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)
+        }),
+        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,
+    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/hooks/useDealMutations.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+function useDealMutations(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  const { crm } = handlers;
+  const [createState, setCreateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [moveState, setMoveState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [winState, setWinState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [loseState, setLoseState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const createDeal = useCallback2(async (input) => {
+    setCreateState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.createDeal(input, {
+        projectId,
+        ownerId: "user-1"
+      });
+      setCreateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create deal");
+      setCreateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, projectId, options]);
+  const moveDeal = useCallback2(async (input) => {
+    setMoveState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.moveDeal(input);
+      setMoveState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to move deal");
+      setMoveState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  const winDeal = useCallback2(async (input) => {
+    setWinState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.winDeal(input);
+      setWinState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to mark deal as won");
+      setWinState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  const loseDeal = useCallback2(async (input) => {
+    setLoseState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.loseDeal(input);
+      setLoseState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to mark deal as lost");
+      setLoseState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  return {
+    createDeal,
+    moveDeal,
+    winDeal,
+    loseDeal,
+    createState,
+    moveState,
+    winState,
+    loseState,
+    isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
+  };
+}
+
+// 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: "border-border bg-card cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ")
+        onClick?.();
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("h4", {
+        className: "leading-snug font-medium",
+        children: deal.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-primary mt-2 text-lg font-semibold",
+        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",
+        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"}`,
+            children: deal.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/CrmPipelineBoard.tsx
+import { useState as useState3 } 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] = useState3(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: "bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "border-border flex items-center justify-between 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 \xB7 ",
+                      formatCurrency2(stageValue)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, 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",
+                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: "border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed 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: "bg-background border-border hover:bg-muted flex h-6 w-6 items-center justify-center rounded border text-xs shadow-sm",
+                      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",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2("p", {
+                          className: "text-muted-foreground px-3 py-1 text-xs font-medium",
+                          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: "hover:bg-muted w-full px-3 py-1.5 text-left text-sm",
+                          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);
+}
 
-import { useDealList } from "./hooks/useDealList.js";
-import { useDealMutations } from "./hooks/useDealMutations.js";
-import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
-import { CreateDealModal } from "./modals/CreateDealModal.js";
-import { DealActionsModal } from "./modals/DealActionsModal.js";
-import { useCallback, useState } from "react";
-import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@contractspec/lib.ui-kit-web/ui/tabs";
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/ui/modals/CreateDealModal.tsx
+import { useState as useState4 } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var CURRENCIES = ["USD", "EUR", "GBP", "CAD"];
+var DEFAULT_PIPELINE_ID = "pipeline-1";
+function CreateDealModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  stages,
+  isLoading = false
+}) {
+  const [name, setName] = useState4("");
+  const [value, setValue] = useState4("");
+  const [currency, setCurrency] = useState4("USD");
+  const [stageId, setStageId] = useState4(stages[0]?.id ?? "");
+  const [expectedCloseDate, setExpectedCloseDate] = useState4("");
+  const [error, setError] = useState4(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Deal name is required");
+      return;
+    }
+    const numericValue = parseFloat(value);
+    if (isNaN(numericValue) || numericValue <= 0) {
+      setError("Value must be a positive number");
+      return;
+    }
+    if (!stageId) {
+      setError("Please select a pipeline stage");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        value: numericValue,
+        currency,
+        pipelineId: DEFAULT_PIPELINE_ID,
+        stageId,
+        expectedCloseDate: expectedCloseDate ? new Date(expectedCloseDate) : undefined
+      });
+      setName("");
+      setValue("");
+      setCurrency("USD");
+      setStageId(stages[0]?.id ?? "");
+      setExpectedCloseDate("");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create deal");
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "mb-4 text-xl font-semibold",
+            children: "Create New Deal"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "deal-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Deal Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3(Input, {
+                    id: "deal-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., Enterprise License - Acme Corp",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex gap-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV3("div", {
+                    className: "flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("label", {
+                        htmlFor: "deal-value",
+                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        children: "Value *"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3(Input, {
+                        id: "deal-value",
+                        type: "number",
+                        min: "0",
+                        step: "0.01",
+                        value,
+                        onChange: (e) => setValue(e.target.value),
+                        placeholder: "50000",
+                        disabled: isLoading
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("div", {
+                    className: "w-24",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("label", {
+                        htmlFor: "deal-currency",
+                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        children: "Currency"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("select", {
+                        id: "deal-currency",
+                        value: currency,
+                        onChange: (e) => setCurrency(e.target.value),
+                        disabled: isLoading,
+                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                        children: CURRENCIES.map((c) => /* @__PURE__ */ jsxDEV3("option", {
+                          value: c,
+                          children: c
+                        }, c, false, undefined, this))
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "deal-stage",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Pipeline Stage *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("select", {
+                    id: "deal-stage",
+                    value: stageId,
+                    onChange: (e) => setStageId(e.target.value),
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    children: stages.map((stage) => /* @__PURE__ */ jsxDEV3("option", {
+                      value: stage.id,
+                      children: stage.name
+                    }, stage.id, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("label", {
+                    htmlFor: "deal-close-date",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Expected Close Date"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3(Input, {
+                    id: "deal-close-date",
+                    type: "date",
+                    value: expectedCloseDate,
+                    onChange: (e) => setExpectedCloseDate(e.target.value),
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV3("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV3(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    onPress: onClose,
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3(Button, {
+                    type: "submit",
+                    disabled: isLoading,
+                    children: isLoading ? "Creating..." : "Create Deal"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 
-//#region src/ui/CrmDashboard.tsx
-/**
-* CRM Dashboard
-*
-* Fully integrated with ContractSpec example handlers
-* and design-system components.
-*
-* Commands wired:
-* - CreateDealContract -> Create Deal button + modal
-* - MoveDealContract -> Move deal between stages
-* - WinDealContract -> Mark deal as won
-* - LoseDealContract -> Mark deal as lost
-*/
-function formatCurrency(value, currency = "USD") {
-	return new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency,
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 0
-	}).format(value);
+// src/ui/modals/DealActionsModal.tsx
+import { useState as useState5 } from "react";
+import { Button as Button2 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency3(value, currency) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function DealActionsModal({
+  isOpen,
+  deal,
+  stages,
+  onClose,
+  onWin,
+  onLose,
+  onMove,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState5("menu");
+  const [wonSource, setWonSource] = useState5("");
+  const [lostReason, setLostReason] = useState5("");
+  const [notes, setNotes] = useState5("");
+  const [selectedStageId, setSelectedStageId] = useState5("");
+  const [error, setError] = useState5(null);
+  const resetForm = () => {
+    setMode("menu");
+    setWonSource("");
+    setLostReason("");
+    setNotes("");
+    setSelectedStageId("");
+    setError(null);
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  const handleWin = async () => {
+    if (!deal)
+      return;
+    setError(null);
+    try {
+      await onWin({
+        dealId: deal.id,
+        wonSource: wonSource.trim() || undefined,
+        notes: notes.trim() || undefined
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to mark deal as won");
+    }
+  };
+  const handleLose = async () => {
+    if (!deal)
+      return;
+    setError(null);
+    if (!lostReason.trim()) {
+      setError("Please provide a reason for losing the deal");
+      return;
+    }
+    try {
+      await onLose({
+        dealId: deal.id,
+        lostReason: lostReason.trim(),
+        notes: notes.trim() || undefined
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to mark deal as lost");
+    }
+  };
+  const handleMove = async () => {
+    if (!deal)
+      return;
+    setError(null);
+    if (!selectedStageId) {
+      setError("Please select a stage");
+      return;
+    }
+    if (selectedStageId === deal.stageId) {
+      setError("Deal is already in this stage");
+      return;
+    }
+    try {
+      await onMove({
+        dealId: deal.id,
+        stageId: selectedStageId
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to move deal");
+    }
+  };
+  if (!isOpen || !deal)
+    return null;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("h2", {
+                className: "text-xl font-semibold",
+                children: deal.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-primary text-lg font-medium",
+                children: formatCurrency3(deal.value, deal.currency)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("span", {
+                className: `mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+                children: deal.status
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-3",
+            children: [
+              deal.status === "OPEN" && /* @__PURE__ */ jsxDEV4(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    className: "w-full justify-start",
+                    variant: "ghost",
+                    onPress: () => setMode("win"),
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("span", {
+                        className: "mr-2",
+                        children: "\uD83C\uDFC6"
+                      }, undefined, false, undefined, this),
+                      " Mark as Won"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    className: "w-full justify-start",
+                    variant: "ghost",
+                    onPress: () => setMode("lose"),
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("span", {
+                        className: "mr-2",
+                        children: "\u274C"
+                      }, undefined, false, undefined, this),
+                      " Mark as Lost"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    className: "w-full justify-start",
+                    variant: "ghost",
+                    onPress: () => {
+                      setSelectedStageId(deal.stageId);
+                      setMode("move");
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("span", {
+                        className: "mr-2",
+                        children: "\u27A1\uFE0F"
+                      }, undefined, false, undefined, this),
+                      " Move to Stage"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              deal.status !== "OPEN" && /* @__PURE__ */ jsxDEV4("p", {
+                className: "text-muted-foreground py-4 text-center",
+                children: [
+                  "This deal is already ",
+                  deal.status.toLowerCase(),
+                  ". No actions available."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV4(Button2, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "win" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "won-source",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "How did you win this deal?"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("select", {
+                    id: "won-source",
+                    value: wonSource,
+                    onChange: (e) => setWonSource(e.target.value),
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "",
+                        children: "Select a source..."
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "referral",
+                        children: "Referral"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "cold_outreach",
+                        children: "Cold Outreach"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "inbound",
+                        children: "Inbound Lead"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "upsell",
+                        children: "Upsell"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "other",
+                        children: "Other"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "win-notes",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Notes (optional)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("textarea", {
+                    id: "win-notes",
+                    value: notes,
+                    onChange: (e) => setNotes(e.target.value),
+                    placeholder: "Any additional notes about the win...",
+                    rows: 3,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    onPress: handleWin,
+                    disabled: isLoading,
+                    children: isLoading ? "Processing..." : "\uD83C\uDFC6 Confirm Win"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "lose" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "lost-reason",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Why was this deal lost? *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("select", {
+                    id: "lost-reason",
+                    value: lostReason,
+                    onChange: (e) => setLostReason(e.target.value),
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "",
+                        children: "Select a reason..."
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "price",
+                        children: "Price too high"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "competitor",
+                        children: "Lost to competitor"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "no_budget",
+                        children: "No budget"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "no_decision",
+                        children: "No decision made"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "timing",
+                        children: "Bad timing"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "product_fit",
+                        children: "Product not a fit"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("option", {
+                        value: "other",
+                        children: "Other"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "lose-notes",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Notes (optional)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("textarea", {
+                    id: "lose-notes",
+                    value: notes,
+                    onChange: (e) => setNotes(e.target.value),
+                    placeholder: "Any additional details...",
+                    rows: 3,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    variant: "destructive",
+                    onPress: handleLose,
+                    disabled: isLoading,
+                    children: isLoading ? "Processing..." : "\u274C Confirm Loss"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "move" && /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV4("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV4("label", {
+                    htmlFor: "move-stage",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Move to Stage"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("select", {
+                    id: "move-stage",
+                    value: selectedStageId,
+                    onChange: (e) => setSelectedStageId(e.target.value),
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    children: stages.map((stage) => /* @__PURE__ */ jsxDEV4("option", {
+                      value: stage.id,
+                      children: [
+                        stage.name,
+                        stage.id === deal.stageId ? " (current)" : ""
+                      ]
+                    }, stage.id, true, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV4("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4(Button2, {
+                    onPress: handleMove,
+                    disabled: isLoading,
+                    children: isLoading ? "Moving..." : "\u27A1\uFE0F Move Deal"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/CrmDashboard.tsx
+import { useCallback as useCallback3, useState as useState6 } from "react";
+import {
+  Button as Button3,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup
+} from "@contractspec/lib.design-system";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@contractspec/lib.ui-kit-web/ui/tabs";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency4(value, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
 }
 function CrmDashboard() {
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-	const [selectedDeal, setSelectedDeal] = useState(null);
-	const [isDealActionsOpen, setIsDealActionsOpen] = useState(false);
-	const { data, dealsByStage, stages, loading, error, stats, refetch } = useDealList();
-	const mutations = useDealMutations({ onSuccess: () => {
-		refetch();
-	} });
-	const handleDealClick = useCallback((dealId) => {
-		const deal = dealsByStage ? Object.values(dealsByStage).flat().find((d) => d.id === dealId) : null;
-		if (deal) {
-			setSelectedDeal(deal);
-			setIsDealActionsOpen(true);
-		}
-	}, [dealsByStage]);
-	const handleDealMove = useCallback(async (dealId, toStageId) => {
-		await mutations.moveDeal({
-			dealId,
-			stageId: toStageId
-		});
-	}, [mutations]);
-	if (loading && !data) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading CRM..." });
-	if (error) return /* @__PURE__ */ jsx(ErrorState, {
-		title: "Failed to load CRM",
-		description: error.message,
-		onRetry: refetch,
-		retryLabel: "Retry"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-2xl font-bold",
-					children: "CRM Pipeline"
-				}), /* @__PURE__ */ jsxs(Button, {
-					onClick: () => setIsCreateModalOpen(true),
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "mr-2",
-						children: "+"
-					}), " Create Deal"]
-				})]
-			}),
-			stats && /* @__PURE__ */ jsxs(StatCardGroup, { children: [
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Total Pipeline",
-					value: formatCurrency(stats.totalValue),
-					hint: `${stats.total} deals`
-				}),
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Open Deals",
-					value: formatCurrency(stats.openValue),
-					hint: `${stats.openCount} active`
-				}),
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Won",
-					value: formatCurrency(stats.wonValue),
-					hint: `${stats.wonCount} closed`
-				}),
-				/* @__PURE__ */ jsx(StatCard, {
-					label: "Lost",
-					value: stats.lostCount,
-					hint: "deals lost"
-				})
-			] }),
-			/* @__PURE__ */ jsxs(Tabs, {
-				defaultValue: "pipeline",
-				className: "w-full",
-				children: [
-					/* @__PURE__ */ jsxs(TabsList, { children: [
-						/* @__PURE__ */ jsxs(TabsTrigger, {
-							value: "pipeline",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "mr-2",
-								children: "📊"
-							}), "Pipeline"]
-						}),
-						/* @__PURE__ */ jsxs(TabsTrigger, {
-							value: "list",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "mr-2",
-								children: "📋"
-							}), "All Deals"]
-						}),
-						/* @__PURE__ */ jsxs(TabsTrigger, {
-							value: "metrics",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "mr-2",
-								children: "📈"
-							}), "Metrics"]
-						})
-					] }),
-					/* @__PURE__ */ jsx(TabsContent, {
-						value: "pipeline",
-						className: "min-h-[400px]",
-						children: /* @__PURE__ */ jsx(CrmPipelineBoard, {
-							dealsByStage,
-							stages,
-							onDealClick: handleDealClick,
-							onDealMove: handleDealMove
-						})
-					}),
-					/* @__PURE__ */ jsx(TabsContent, {
-						value: "list",
-						className: "min-h-[400px]",
-						children: /* @__PURE__ */ jsx(DealListTab, {
-							data,
-							onDealClick: handleDealClick
-						})
-					}),
-					/* @__PURE__ */ jsx(TabsContent, {
-						value: "metrics",
-						className: "min-h-[400px]",
-						children: /* @__PURE__ */ jsx(MetricsTab, { stats })
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(CreateDealModal, {
-				isOpen: isCreateModalOpen,
-				onClose: () => setIsCreateModalOpen(false),
-				onSubmit: async (input) => {
-					await mutations.createDeal(input);
-				},
-				stages,
-				isLoading: mutations.createState.loading
-			}),
-			/* @__PURE__ */ jsx(DealActionsModal, {
-				isOpen: isDealActionsOpen,
-				deal: selectedDeal,
-				stages,
-				onClose: () => {
-					setIsDealActionsOpen(false);
-					setSelectedDeal(null);
-				},
-				onWin: async (input) => {
-					await mutations.winDeal(input);
-				},
-				onLose: async (input) => {
-					await mutations.loseDeal(input);
-				},
-				onMove: async (input) => {
-					await mutations.moveDeal(input);
-					refetch();
-				},
-				isLoading: mutations.isLoading
-			})
-		]
-	});
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState6(false);
+  const [selectedDeal, setSelectedDeal] = useState6(null);
+  const [isDealActionsOpen, setIsDealActionsOpen] = useState6(false);
+  const { data, dealsByStage, stages, loading, error, stats, refetch } = useDealList();
+  const mutations = useDealMutations({
+    onSuccess: () => {
+      refetch();
+    }
+  });
+  const handleDealClick = useCallback3((dealId) => {
+    const deal = dealsByStage ? Object.values(dealsByStage).flat().find((d) => d.id === dealId) : null;
+    if (deal) {
+      setSelectedDeal(deal);
+      setIsDealActionsOpen(true);
+    }
+  }, [dealsByStage]);
+  const handleDealMove = useCallback3(async (dealId, toStageId) => {
+    await mutations.moveDeal({ dealId, stageId: toStageId });
+  }, [mutations]);
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV5(LoaderBlock, {
+      label: "Loading CRM..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV5(ErrorState, {
+      title: "Failed to load CRM",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "CRM Pipeline"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Button3, {
+            onClick: () => setIsCreateModalOpen(true),
+            children: [
+              /* @__PURE__ */ jsxDEV5("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " Create Deal"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      stats && /* @__PURE__ */ jsxDEV5(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV5(StatCard, {
+            label: "Total Pipeline",
+            value: formatCurrency4(stats.totalValue),
+            hint: `${stats.total} deals`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(StatCard, {
+            label: "Open Deals",
+            value: formatCurrency4(stats.openValue),
+            hint: `${stats.openCount} active`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(StatCard, {
+            label: "Won",
+            value: formatCurrency4(stats.wonValue),
+            hint: `${stats.wonCount} closed`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(StatCard, {
+            label: "Lost",
+            value: stats.lostCount,
+            hint: "deals lost"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(Tabs, {
+        defaultValue: "pipeline",
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsxDEV5(TabsList, {
+            children: [
+              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+                value: "pipeline",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCCA"
+                  }, undefined, false, undefined, this),
+                  "Pipeline"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+                value: "list",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCCB"
+                  }, undefined, false, undefined, this),
+                  "All Deals"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+                value: "metrics",
+                children: [
+                  /* @__PURE__ */ jsxDEV5("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCC8"
+                  }, undefined, false, undefined, this),
+                  "Metrics"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5(TabsContent, {
+            value: "pipeline",
+            className: "min-h-[400px]",
+            children: /* @__PURE__ */ jsxDEV5(CrmPipelineBoard, {
+              dealsByStage,
+              stages,
+              onDealClick: handleDealClick,
+              onDealMove: handleDealMove
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(TabsContent, {
+            value: "list",
+            className: "min-h-[400px]",
+            children: /* @__PURE__ */ jsxDEV5(DealListTab, {
+              data,
+              onDealClick: handleDealClick
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(TabsContent, {
+            value: "metrics",
+            className: "min-h-[400px]",
+            children: /* @__PURE__ */ jsxDEV5(MetricsTab, {
+              stats
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(CreateDealModal, {
+        isOpen: isCreateModalOpen,
+        onClose: () => setIsCreateModalOpen(false),
+        onSubmit: async (input) => {
+          await mutations.createDeal(input);
+        },
+        stages,
+        isLoading: mutations.createState.loading
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(DealActionsModal, {
+        isOpen: isDealActionsOpen,
+        deal: selectedDeal,
+        stages,
+        onClose: () => {
+          setIsDealActionsOpen(false);
+          setSelectedDeal(null);
+        },
+        onWin: async (input) => {
+          await mutations.winDeal(input);
+        },
+        onLose: async (input) => {
+          await mutations.loseDeal(input);
+        },
+        onMove: async (input) => {
+          await mutations.moveDeal(input);
+          refetch();
+        },
+        isLoading: mutations.isLoading
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 function DealListTab({ data, onDealClick }) {
-	if (!data?.deals.length) return /* @__PURE__ */ jsx("div", {
-		className: "text-muted-foreground flex h-64 items-center justify-center",
-		children: "No deals found"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "border-border rounded-lg border",
-		children: /* @__PURE__ */ jsxs("table", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx("thead", {
-				className: "border-border bg-muted/30 border-b",
-				children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", {
-						className: "px-4 py-3 text-left text-sm font-medium",
-						children: "Deal"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-4 py-3 text-left text-sm font-medium",
-						children: "Value"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-4 py-3 text-left text-sm font-medium",
-						children: "Status"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-4 py-3 text-left text-sm font-medium",
-						children: "Expected Close"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-4 py-3 text-left text-sm font-medium",
-						children: "Actions"
-					})
-				] })
-			}), /* @__PURE__ */ jsx("tbody", {
-				className: "divide-border divide-y",
-				children: data.deals.map((deal) => /* @__PURE__ */ jsxs("tr", {
-					className: "hover:bg-muted/50",
-					children: [
-						/* @__PURE__ */ jsx("td", {
-							className: "px-4 py-3",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "font-medium",
-								children: deal.name
-							})
-						}),
-						/* @__PURE__ */ jsx("td", {
-							className: "px-4 py-3 font-mono",
-							children: formatCurrency(deal.value, deal.currency)
-						}),
-						/* @__PURE__ */ jsx("td", {
-							className: "px-4 py-3",
-							children: /* @__PURE__ */ jsx("span", {
-								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
-								children: deal.status
-							})
-						}),
-						/* @__PURE__ */ jsx("td", {
-							className: "text-muted-foreground px-4 py-3",
-							children: deal.expectedCloseDate?.toLocaleDateString() ?? "-"
-						}),
-						/* @__PURE__ */ jsx("td", {
-							className: "px-4 py-3",
-							children: /* @__PURE__ */ jsx(Button, {
-								variant: "ghost",
-								size: "sm",
-								onPress: () => onDealClick?.(deal.id),
-								children: "Actions"
-							})
-						})
-					]
-				}, deal.id))
-			})]
-		})
-	});
+  if (!data?.deals.length) {
+    return /* @__PURE__ */ jsxDEV5("div", {
+      className: "text-muted-foreground flex h-64 items-center justify-center",
+      children: "No deals found"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "border-border rounded-lg border",
+    children: /* @__PURE__ */ jsxDEV5("table", {
+      className: "w-full",
+      children: [
+        /* @__PURE__ */ jsxDEV5("thead", {
+          className: "border-border bg-muted/30 border-b",
+          children: /* @__PURE__ */ jsxDEV5("tr", {
+            children: [
+              /* @__PURE__ */ jsxDEV5("th", {
+                className: "px-4 py-3 text-left text-sm font-medium",
+                children: "Deal"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("th", {
+                className: "px-4 py-3 text-left text-sm font-medium",
+                children: "Value"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("th", {
+                className: "px-4 py-3 text-left text-sm font-medium",
+                children: "Status"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("th", {
+                className: "px-4 py-3 text-left text-sm font-medium",
+                children: "Expected Close"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("th", {
+                className: "px-4 py-3 text-left text-sm font-medium",
+                children: "Actions"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("tbody", {
+          className: "divide-border divide-y",
+          children: data.deals.map((deal) => /* @__PURE__ */ jsxDEV5("tr", {
+            className: "hover:bg-muted/50",
+            children: [
+              /* @__PURE__ */ jsxDEV5("td", {
+                className: "px-4 py-3",
+                children: /* @__PURE__ */ jsxDEV5("div", {
+                  className: "font-medium",
+                  children: deal.name
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("td", {
+                className: "px-4 py-3 font-mono",
+                children: formatCurrency4(deal.value, deal.currency)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("td", {
+                className: "px-4 py-3",
+                children: /* @__PURE__ */ jsxDEV5("span", {
+                  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+                  children: deal.status
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("td", {
+                className: "text-muted-foreground px-4 py-3",
+                children: deal.expectedCloseDate?.toLocaleDateString() ?? "-"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("td", {
+                className: "px-4 py-3",
+                children: /* @__PURE__ */ jsxDEV5(Button3, {
+                  variant: "ghost",
+                  size: "sm",
+                  onPress: () => onDealClick?.(deal.id),
+                  children: "Actions"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, deal.id, true, undefined, this))
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
-function MetricsTab({ stats }) {
-	if (!stats) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-6",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "border-border bg-card rounded-xl border p-6",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "mb-4 text-lg font-semibold",
-				children: "Pipeline Overview"
-			}), /* @__PURE__ */ jsxs("dl", {
-				className: "grid gap-4 sm:grid-cols-3",
-				children: [
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: "text-muted-foreground text-sm",
-						children: "Win Rate"
-					}), /* @__PURE__ */ jsxs("dd", {
-						className: "text-2xl font-semibold",
-						children: [stats.total > 0 ? (stats.wonCount / stats.total * 100).toFixed(0) : 0, "%"]
-					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: "text-muted-foreground text-sm",
-						children: "Avg Deal Size"
-					}), /* @__PURE__ */ jsx("dd", {
-						className: "text-2xl font-semibold",
-						children: formatCurrency(stats.total > 0 ? stats.totalValue / stats.total : 0)
-					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: "text-muted-foreground text-sm",
-						children: "Conversion"
-					}), /* @__PURE__ */ jsxs("dd", {
-						className: "text-2xl font-semibold",
-						children: [
-							stats.wonCount,
-							" / ",
-							stats.total
-						]
-					})] })
-				]
-			})]
-		})
-	});
+function MetricsTab({
+  stats
+}) {
+  if (!stats)
+    return null;
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: /* @__PURE__ */ jsxDEV5("div", {
+      className: "border-border bg-card rounded-xl border p-6",
+      children: [
+        /* @__PURE__ */ jsxDEV5("h3", {
+          className: "mb-4 text-lg font-semibold",
+          children: "Pipeline Overview"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5("dl", {
+          className: "grid gap-4 sm:grid-cols-3",
+          children: [
+            /* @__PURE__ */ jsxDEV5("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV5("dt", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Win Rate"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dd", {
+                  className: "text-2xl font-semibold",
+                  children: [
+                    stats.total > 0 ? (stats.wonCount / stats.total * 100).toFixed(0) : 0,
+                    "%"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV5("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV5("dt", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Avg Deal Size"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dd", {
+                  className: "text-2xl font-semibold",
+                  children: formatCurrency4(stats.total > 0 ? stats.totalValue / stats.total : 0)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV5("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV5("dt", {
+                  className: "text-muted-foreground text-sm",
+                  children: "Conversion"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dd", {
+                  className: "text-2xl font-semibold",
+                  children: [
+                    stats.wonCount,
+                    " / ",
+                    stats.total
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
-
-//#endregion
-export { CrmDashboard };
-//# sourceMappingURL=CrmDashboard.js.map
+export {
+  CrmDashboard
+};