@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/src/ui/CrmDashboard.tsx

@@ -1,5 +1,18 @@
 'use client';
 
+import {
+	Button,
+	ErrorState,
+	LoaderBlock,
+	StatCard,
+	StatCardGroup,
+} from '@contractspec/lib.design-system';
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from '@contractspec/lib.ui-kit-web/ui/tabs';
 /**
  * CRM Dashboard
  *
@@ -13,299 +26,217 @@
  * - 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 { CrmPipelineBoard } from './CrmPipelineBoard';
 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';
+import { DealListTab } from './tables/DealListTab';
 
 // 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);
+	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>
-  );
+	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="font-bold text-2xl">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 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>
+	);
 }
 
 function MetricsTab({
-  stats,
+	stats,
 }: {
-  stats: ReturnType<typeof useDealList>['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>
-  );
+	if (!stats) return null;
+
+	return (
+		<div className="space-y-6">
+			<div className="rounded-xl border border-border bg-card p-6">
+				<h3 className="mb-4 font-semibold text-lg">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="font-semibold text-2xl">
+							{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="font-semibold text-2xl">
+							{formatCurrency(
+								stats.total > 0 ? stats.totalValue / stats.total : 0
+							)}
+						</dd>
+					</div>
+					<div>
+						<dt className="text-muted-foreground text-sm">Conversion</dt>
+						<dd className="font-semibold text-2xl">
+							{stats.wonCount} / {stats.total}
+						</dd>
+					</div>
+				</dl>
+			</div>
+		</div>
+	);
 }

package/src/ui/CrmDealCard.tsx

@@ -6,78 +6,78 @@
 import type { Deal } from './hooks/useDealList';
 
 interface CrmDealCardProps {
-  deal: Deal;
-  onClick?: () => void;
+	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);
+	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;
+	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>
+	return (
+		<div
+			onClick={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?.();
+			}}
+		>
+			{/* Deal Name */}
+			<h4 className="font-medium leading-snug">{deal.name}</h4>
 
-      {/* Deal Value */}
-      <div className="text-primary mt-2 text-lg font-semibold">
-        {formatCurrency(deal.value, deal.currency)}
-      </div>
+			{/* Deal Value */}
+			<div className="mt-2 font-semibold text-lg text-primary">
+				{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>
-        )}
+			{/* Meta Info */}
+			<div className="mt-3 flex items-center justify-between text-muted-foreground 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>
-  );
+				{/* Status Badge */}
+				<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'
+					}`}
+				>
+					{deal.status}
+				</span>
+			</div>
+		</div>
+	);
 }