@contractspec/example.crm-pipeline 1.46.1 → 1.48.0

package/src/ui/CrmDashboard.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+/**
+ * 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
+ */
+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 { type Deal, useDealList } from './hooks/useDealList';
+import { useDealMutations } from './hooks/useDealMutations';
+import { CrmPipelineBoard } from './CrmPipelineBoard';
+import { CreateDealModal } from './modals/CreateDealModal';
+import { DealActionsModal } from './modals/DealActionsModal';
+
+// type Tab = 'pipeline' | 'list' | 'metrics';
+
+function formatCurrency(value: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export function CrmDashboard() {
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [selectedDeal, setSelectedDeal] = useState<Deal | null>(null);
+  const [isDealActionsOpen, setIsDealActionsOpen] = useState(false);
+
+  const { data, dealsByStage, stages, loading, error, stats, refetch } =
+    useDealList();
+
+  const mutations = useDealMutations({
+    onSuccess: () => {
+      refetch();
+    },
+  });
+
+  const handleDealClick = useCallback(
+    (dealId: string) => {
+      // Find deal in data
+      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: string, toStageId: string) => {
+      await mutations.moveDeal({ dealId, stageId: toStageId });
+    },
+    [mutations]
+  );
+
+  if (loading && !data) {
+    return <LoaderBlock label="Loading CRM..." />;
+  }
+
+  if (error) {
+    return (
+      <ErrorState
+        title="Failed to load CRM"
+        description={error.message}
+        onRetry={refetch}
+        retryLabel="Retry"
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header with Create Button */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold">CRM Pipeline</h2>
+        <Button onClick={() => setIsCreateModalOpen(true)}>
+          <span className="mr-2">+</span> Create Deal
+        </Button>
+      </div>
+
+      {/* Stats Row */}
+      {stats && (
+        <StatCardGroup>
+          <StatCard
+            label="Total Pipeline"
+            value={formatCurrency(stats.totalValue)}
+            hint={`${stats.total} deals`}
+          />
+          <StatCard
+            label="Open Deals"
+            value={formatCurrency(stats.openValue)}
+            hint={`${stats.openCount} active`}
+          />
+          <StatCard
+            label="Won"
+            value={formatCurrency(stats.wonValue)}
+            hint={`${stats.wonCount} closed`}
+          />
+          <StatCard label="Lost" value={stats.lostCount} hint="deals lost" />
+        </StatCardGroup>
+      )}
+
+      {/* Tabs */}
+      <Tabs defaultValue="pipeline" className="w-full">
+        <TabsList>
+          <TabsTrigger value="pipeline">
+            <span className="mr-2">📊</span>
+            Pipeline
+          </TabsTrigger>
+          <TabsTrigger value="list">
+            <span className="mr-2">📋</span>
+            All Deals
+          </TabsTrigger>
+          <TabsTrigger value="metrics">
+            <span className="mr-2">📈</span>
+            Metrics
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="pipeline" className="min-h-[400px]">
+          <CrmPipelineBoard
+            dealsByStage={dealsByStage}
+            stages={stages}
+            onDealClick={handleDealClick}
+            onDealMove={handleDealMove}
+          />
+        </TabsContent>
+
+        <TabsContent value="list" className="min-h-[400px]">
+          <DealListTab data={data} onDealClick={handleDealClick} />
+        </TabsContent>
+
+        <TabsContent value="metrics" className="min-h-[400px]">
+          <MetricsTab stats={stats} />
+        </TabsContent>
+      </Tabs>
+
+      {/* Create Deal Modal */}
+      <CreateDealModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSubmit={async (input) => {
+          await mutations.createDeal(input);
+        }}
+        stages={stages}
+        isLoading={mutations.createState.loading}
+      />
+
+      {/* Deal Actions Modal */}
+      <DealActionsModal
+        isOpen={isDealActionsOpen}
+        deal={selectedDeal}
+        stages={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}
+      />
+    </div>
+  );
+}
+
+interface DealListTabProps {
+  data: ReturnType<typeof useDealList>['data'];
+  onDealClick?: (dealId: string) => void;
+}
+
+function DealListTab({ data, onDealClick }: DealListTabProps) {
+  if (!data?.deals.length) {
+    return (
+      <div className="text-muted-foreground flex h-64 items-center justify-center">
+        No deals found
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-border rounded-lg border">
+      <table className="w-full">
+        <thead className="border-border bg-muted/30 border-b">
+          <tr>
+            <th className="px-4 py-3 text-left text-sm font-medium">Deal</th>
+            <th className="px-4 py-3 text-left text-sm font-medium">Value</th>
+            <th className="px-4 py-3 text-left text-sm font-medium">Status</th>
+            <th className="px-4 py-3 text-left text-sm font-medium">
+              Expected Close
+            </th>
+            <th className="px-4 py-3 text-left text-sm font-medium">Actions</th>
+          </tr>
+        </thead>
+        <tbody className="divide-border divide-y">
+          {data.deals.map((deal: Deal) => (
+            <tr key={deal.id} className="hover:bg-muted/50">
+              <td className="px-4 py-3">
+                <div className="font-medium">{deal.name}</div>
+              </td>
+              <td className="px-4 py-3 font-mono">
+                {formatCurrency(deal.value, deal.currency)}
+              </td>
+              <td className="px-4 py-3">
+                <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'
+                  }`}
+                >
+                  {deal.status}
+                </span>
+              </td>
+              <td className="text-muted-foreground px-4 py-3">
+                {deal.expectedCloseDate?.toLocaleDateString() ?? '-'}
+              </td>
+              <td className="px-4 py-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onPress={() => onDealClick?.(deal.id)}
+                >
+                  Actions
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function MetricsTab({
+  stats,
+}: {
+  stats: ReturnType<typeof useDealList>['stats'];
+}) {
+  if (!stats) return null;
+
+  return (
+    <div className="space-y-6">
+      <div className="border-border bg-card rounded-xl border p-6">
+        <h3 className="mb-4 text-lg font-semibold">Pipeline Overview</h3>
+        <dl className="grid gap-4 sm:grid-cols-3">
+          <div>
+            <dt className="text-muted-foreground text-sm">Win Rate</dt>
+            <dd className="text-2xl font-semibold">
+              {stats.total > 0
+                ? ((stats.wonCount / stats.total) * 100).toFixed(0)
+                : 0}
+              %
+            </dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground text-sm">Avg Deal Size</dt>
+            <dd className="text-2xl font-semibold">
+              {formatCurrency(
+                stats.total > 0 ? stats.totalValue / stats.total : 0
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground text-sm">Conversion</dt>
+            <dd className="text-2xl font-semibold">
+              {stats.wonCount} / {stats.total}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}

package/src/ui/CrmDealCard.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+/**
+ * CRM Deal Card - Individual deal card for kanban board
+ */
+import type { Deal } from './hooks/useDealList';
+
+interface CrmDealCardProps {
+  deal: Deal;
+  onClick?: () => void;
+}
+
+function formatCurrency(value: number, currency: string): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export function CrmDealCard({ deal, onClick }: CrmDealCardProps) {
+  const daysUntilClose = deal.expectedCloseDate
+    ? Math.ceil(
+        (deal.expectedCloseDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)
+      )
+    : null;
+
+  return (
+    <div
+      onClick={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?.();
+      }}
+    >
+      {/* Deal Name */}
+      <h4 className="leading-snug font-medium">{deal.name}</h4>
+
+      {/* Deal Value */}
+      <div className="text-primary mt-2 text-lg font-semibold">
+        {formatCurrency(deal.value, deal.currency)}
+      </div>
+
+      {/* Meta Info */}
+      <div className="text-muted-foreground mt-3 flex items-center justify-between text-xs">
+        {/* Expected Close */}
+        {daysUntilClose !== null && (
+          <span
+            className={
+              daysUntilClose < 0
+                ? 'text-red-500'
+                : daysUntilClose <= 7
+                  ? 'text-yellow-600 dark:text-yellow-500'
+                  : ''
+            }
+          >
+            {daysUntilClose < 0
+              ? `${Math.abs(daysUntilClose)}d overdue`
+              : daysUntilClose === 0
+                ? 'Due today'
+                : `${daysUntilClose}d left`}
+          </span>
+        )}
+
+        {/* Status Badge */}
+        <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'
+          }`}
+        >
+          {deal.status}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/ui/CrmPipelineBoard.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * CRM Pipeline Board - Kanban-style deal board
+ *
+ * Features:
+ * - Visual pipeline stages
+ * - Deal cards with click actions
+ * - Quick move dropdown per card
+ * - Drag-and-drop ready (UI only, no lib dependency)
+ */
+import { useState } from 'react';
+// import { Button } from '@contractspec/lib.design-system';
+import type { Deal } from './hooks/useDealList';
+import { CrmDealCard } from './CrmDealCard';
+
+interface CrmPipelineBoardProps {
+  dealsByStage: Record<string, Deal[]>;
+  stages: { id: string; name: string; position: number }[];
+  onDealClick?: (dealId: string) => void;
+  onDealMove?: (dealId: string, toStageId: string) => void;
+}
+
+function formatCurrency(value: number): string {
+  if (value >= 1000000) return `$${(value / 1000000).toFixed(1)}M`;
+  if (value >= 1000) return `$${(value / 1000).toFixed(0)}K`;
+  return `$${value}`;
+}
+
+export function CrmPipelineBoard({
+  dealsByStage,
+  stages,
+  onDealClick,
+  onDealMove,
+}: CrmPipelineBoardProps) {
+  // Track which deal has the quick-move dropdown open
+  const [quickMoveOpen, setQuickMoveOpen] = useState<string | null>(null);
+
+  // Sort stages by position
+  const sortedStages = [...stages].sort((a, b) => a.position - b.position);
+
+  const handleQuickMove = (dealId: string, toStageId: string) => {
+    onDealMove?.(dealId, toStageId);
+    setQuickMoveOpen(null);
+  };
+
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4">
+      {sortedStages.map((stage) => {
+        const deals = dealsByStage[stage.id] ?? [];
+        const stageValue = deals.reduce((sum, d) => sum + d.value, 0);
+
+        return (
+          <div
+            key={stage.id}
+            className="bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg"
+          >
+            {/* Stage Header */}
+            <div className="border-border flex items-center justify-between border-b px-3 py-2">
+              <div>
+                <h3 className="font-medium">{stage.name}</h3>
+                <p className="text-muted-foreground text-xs">
+                  {deals.length} deals · {formatCurrency(stageValue)}
+                </p>
+              </div>
+              <span className="bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium">
+                {deals.length}
+              </span>
+            </div>
+
+            {/* Deals Column */}
+            <div className="flex flex-1 flex-col gap-2 p-2">
+              {deals.length === 0 ? (
+                <div className="border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed text-xs">
+                  No deals
+                </div>
+              ) : (
+                deals.map((deal) => (
+                  <div key={deal.id} className="group relative">
+                    <CrmDealCard
+                      deal={deal}
+                      onClick={() => onDealClick?.(deal.id)}
+                    />
+
+                    {/* Quick Move Button */}
+                    {deal.status === 'OPEN' && onDealMove && (
+                      <div className="absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100">
+                        <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"
+                        >
+                          ➡️
+                        </button>
+
+                        {/* Quick Move Dropdown */}
+                        {quickMoveOpen === deal.id && (
+                          <div className="bg-card border-border absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border py-1 shadow-lg">
+                            <p className="text-muted-foreground px-3 py-1 text-xs font-medium">
+                              Move to:
+                            </p>
+                            {sortedStages
+                              .filter((s) => s.id !== deal.stageId)
+                              .map((s) => (
+                                <button
+                                  key={s.id}
+                                  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"
+                                >
+                                  {s.name}
+                                </button>
+                              ))}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/hooks/index.ts

@@ -0,0 +1,10 @@
+'use client';
+
+export { useDealList, type UseDealListOptions } from './useDealList';
+export {
+  useDealMutations,
+  type UseDealMutationsOptions,
+} from './useDealMutations';
+
+// Note: For deal types (CreateDealInput, MoveDealInput, etc.), import directly from:
+// import type { Deal, CreateDealInput, etc. } from '@contractspec/example.crm-pipeline/handlers';

package/src/ui/hooks/useDealList.ts

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * Hook for fetching and managing deal list data
+ *
+ * Uses runtime-local database-backed handlers.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import {
+  type CrmHandlers,
+  type Deal as RuntimeDeal,
+  type ListDealsOutput as RuntimeListDealsOutput,
+  type Stage,
+} from '../../handlers/crm.handlers';
+
+// Re-export types for convenience
+export type Deal = RuntimeDeal;
+export type ListDealsOutput = RuntimeListDealsOutput;
+
+export interface UseDealListOptions {
+  pipelineId?: string;
+  stageId?: string;
+  status?: 'OPEN' | 'WON' | 'LOST' | 'all';
+  search?: string;
+  limit?: number;
+}
+
+export function useDealList(options: UseDealListOptions = {}) {
+  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();
+  const { crm } = handlers;
+
+  const [data, setData] = useState<ListDealsOutput | null>(null);
+  const [dealsByStage, setDealsByStage] = useState<Record<string, Deal[]>>({});
+  const [stages, setStages] = useState<Stage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(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]);
+
+  // Calculate stats
+  const stats = useMemo(() => {
+    if (!data) return null;
+    const open = data.deals.filter((d: Deal) => d.status === 'OPEN');
+    const won = data.deals.filter((d: Deal) => d.status === 'WON');
+    const lost = data.deals.filter((d: Deal) => d.status === 'LOST');
+
+    return {
+      total: data.total,
+      totalValue: data.totalValue,
+      openCount: open.length,
+      openValue: open.reduce((sum: number, d: Deal) => sum + d.value, 0),
+      wonCount: won.length,
+      wonValue: won.reduce((sum: number, d: Deal) => 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),
+  };
+}