@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/src/ui/CrmPipelineBoard.tsx

@@ -10,127 +10,127 @@
  * - Drag-and-drop ready (UI only, no lib dependency)
  */
 import { useState } from 'react';
+import { CrmDealCard } from './CrmDealCard';
 // 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;
+	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}`;
+	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,
+	dealsByStage,
+	stages,
+	onDealClick,
+	onDealMove,
 }: CrmPipelineBoardProps) {
-  // Track which deal has the quick-move dropdown open
-  const [quickMoveOpen, setQuickMoveOpen] = useState<string | null>(null);
+	// 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);
+	// 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);
-  };
+	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 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>
+				return (
+					<div
+						key={stage.id}
+						className="flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30"
+					>
+						{/* Stage Header */}
+						<div className="flex items-center justify-between border-border 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="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs">
+								{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)}
-                    />
+						{/* Deals Column */}
+						<div className="flex flex-1 flex-col gap-2 p-2">
+							{deals.length === 0 ? (
+								<div className="flex h-24 items-center justify-center rounded-md border-2 border-muted-foreground/20 border-dashed text-muted-foreground 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 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="flex h-6 w-6 items-center justify-center rounded border border-border bg-background text-xs shadow-sm hover:bg-muted"
+													title="Quick move"
+												>
+													➡️
+												</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>
-  );
+												{/* Quick Move Dropdown */}
+												{quickMoveOpen === deal.id && (
+													<div className="absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border border-border bg-card py-1 shadow-lg">
+														<p className="px-3 py-1 font-medium text-muted-foreground text-xs">
+															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="w-full px-3 py-1.5 text-left text-sm hover:bg-muted"
+																>
+																	{s.name}
+																</button>
+															))}
+													</div>
+												)}
+											</div>
+										)}
+									</div>
+								))
+							)}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
 }

package/src/ui/hooks/index.ts

@@ -1,9 +1,9 @@
 'use client';
 
-export { useDealList, type UseDealListOptions } from './useDealList';
+export { type UseDealListOptions, useDealList } from './useDealList';
 export {
-  useDealMutations,
-  type UseDealMutationsOptions,
+	type UseDealMutationsOptions,
+	useDealMutations,
 } from './useDealMutations';
 
 // Note: For deal types (CreateDealInput, MoveDealInput, etc.), import directly from:

package/src/ui/hooks/useDealList.ts

@@ -1,17 +1,18 @@
 'use client';
 
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
 /**
  * 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,
+	type CrmHandlers,
+	type Deal as RuntimeDeal,
+	type ListDealsOutput as RuntimeListDealsOutput,
+	type Stage,
 } from '../../handlers/crm.handlers';
 
 // Re-export types for convenience
@@ -19,95 +20,122 @@ export type Deal = RuntimeDeal;
 export type ListDealsOutput = RuntimeListDealsOutput;
 
 export interface UseDealListOptions {
-  pipelineId?: string;
-  stageId?: string;
-  status?: 'OPEN' | 'WON' | 'LOST' | 'all';
-  search?: string;
-  limit?: number;
+	pipelineId?: string;
+	stageId?: string;
+	status?: 'OPEN' | 'WON' | 'LOST' | 'all';
+	search?: string;
+	limit?: number;
+	pageIndex?: number;
+	pageSize?: number;
+	sorting?: ContractTableSort[];
 }
 
 export function useDealList(options: UseDealListOptions = {}) {
-  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();
-  const { crm } = handlers;
+	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 [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 [internalPage, setInternalPage] = useState(0);
 
-  const pipelineId = options.pipelineId ?? 'pipeline-1';
+	const pipelineId = options.pipelineId ?? 'pipeline-1';
+	const pageIndex = options.pageIndex ?? internalPage;
+	const pageSize = options.pageSize ?? options.limit ?? 50;
+	const [sort] = options.sorting ?? [];
+	const sortBy = sort?.id;
+	const sortDirection = sort ? (sort.desc ? 'desc' : 'asc') : undefined;
 
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
+	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,
-  ]);
+		try {
+			const [dealsResult, stageDealsResult, stagesResult] = await Promise.all([
+				crm.listDeals({
+					projectId,
+					pipelineId,
+					stageId: options.stageId,
+					status: options.status === 'all' ? undefined : options.status,
+					search: options.search,
+					limit: pageSize,
+					offset: pageIndex * pageSize,
+					sortBy:
+						sortBy === 'name' ||
+						sortBy === 'value' ||
+						sortBy === 'status' ||
+						sortBy === 'expectedCloseDate' ||
+						sortBy === 'updatedAt'
+							? sortBy
+							: undefined,
+					sortDirection,
+				}),
+				crm.getDealsByStage({ projectId, pipelineId }),
+				crm.getPipelineStages({ pipelineId }),
+			]);
+			setData(dealsResult);
+			setDealsByStage(stageDealsResult);
+			setStages(stagesResult);
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error('Unknown error'));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		crm,
+		projectId,
+		pipelineId,
+		options.stageId,
+		options.status,
+		options.search,
+		pageIndex,
+		pageSize,
+		sortBy,
+		sortDirection,
+	]);
 
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+	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');
+	// 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 {
+			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),
-  };
+	return {
+		data,
+		dealsByStage,
+		stages,
+		loading,
+		error,
+		stats,
+		page: pageIndex + 1,
+		pageIndex,
+		pageSize,
+		refetch: fetchData,
+		nextPage:
+			options.pageIndex === undefined
+				? () => setInternalPage((page) => page + 1)
+				: undefined,
+		prevPage:
+			options.pageIndex === undefined
+				? () => pageIndex > 0 && setInternalPage((page) => page - 1)
+				: undefined,
+	};
 }