@contractspec/example.crm-pipeline 3.7.7 → 3.7.10

package/src/handlers/crm.handlers.ts

@@ -76,6 +76,8 @@ export interface ListDealsInput {
 	search?: string;
 	limit?: number;
 	offset?: number;
+	sortBy?: 'name' | 'value' | 'status' | 'expectedCloseDate' | 'updatedAt';
+	sortDirection?: 'asc' | 'desc';
 }
 
 export interface ListDealsOutput {
@@ -142,6 +144,17 @@ function rowToDeal(row: DealRow): Deal {
 
 // ============ Handler Factory ============
 
+const DEAL_SORT_COLUMNS: Record<
+	NonNullable<ListDealsInput['sortBy']>,
+	string
+> = {
+	name: 'name',
+	value: 'value',
+	status: 'status',
+	expectedCloseDate: 'expectedCloseDate',
+	updatedAt: 'updatedAt',
+};
+
 export function createCrmHandlers(db: DatabasePort) {
 	/**
 	 * List deals with filtering
@@ -156,6 +169,8 @@ export function createCrmHandlers(db: DatabasePort) {
 			search,
 			limit = 20,
 			offset = 0,
+			sortBy = 'value',
+			sortDirection = 'desc',
 		} = input;
 
 		let whereClause = 'WHERE projectId = ?';
@@ -205,9 +220,11 @@ export function createCrmHandlers(db: DatabasePort) {
 		const totalValue = (valueResult[0]?.total as number) ?? 0;
 
 		// Get paginated deals
+		const orderByColumn = DEAL_SORT_COLUMNS[sortBy] ?? DEAL_SORT_COLUMNS.value;
+		const orderByDirection = sortDirection === 'asc' ? 'ASC' : 'DESC';
 		const dealRows = (
 			await db.query(
-				`SELECT * FROM crm_deal ${whereClause} ORDER BY value DESC LIMIT ? OFFSET ?`,
+				`SELECT * FROM crm_deal ${whereClause} ORDER BY ${orderByColumn} ${orderByDirection} LIMIT ? OFFSET ?`,
 				[...params, limit, offset]
 			)
 		).rows as unknown as DealRow[];

package/src/ui/CrmDashboard.tsx

@@ -31,6 +31,7 @@ import { type Deal, useDealList } from './hooks/useDealList';
 import { useDealMutations } from './hooks/useDealMutations';
 import { CreateDealModal } from './modals/CreateDealModal';
 import { DealActionsModal } from './modals/DealActionsModal';
+import { DealListTab } from './tables/DealListTab';
 
 // type Tab = 'pipeline' | 'list' | 'metrics';
 
@@ -155,7 +156,7 @@ export function CrmDashboard() {
 				</TabsContent>
 
 				<TabsContent value="list" className="min-h-[400px]">
-					<DealListTab data={data} onDealClick={handleDealClick} />
+					<DealListTab onDealClick={handleDealClick} />
 				</TabsContent>
 
 				<TabsContent value="metrics" className="min-h-[400px]">
@@ -199,76 +200,6 @@ export function CrmDashboard() {
 	);
 }
 
-interface DealListTabProps {
-	data: ReturnType<typeof useDealList>['data'];
-	onDealClick?: (dealId: string) => void;
-}
-
-function DealListTab({ data, onDealClick }: DealListTabProps) {
-	if (!data?.deals.length) {
-		return (
-			<div className="flex h-64 items-center justify-center text-muted-foreground">
-				No deals found
-			</div>
-		);
-	}
-
-	return (
-		<div className="rounded-lg border border-border">
-			<table className="w-full">
-				<thead className="border-border border-b bg-muted/30">
-					<tr>
-						<th className="px-4 py-3 text-left font-medium text-sm">Deal</th>
-						<th className="px-4 py-3 text-left font-medium text-sm">Value</th>
-						<th className="px-4 py-3 text-left font-medium text-sm">Status</th>
-						<th className="px-4 py-3 text-left font-medium text-sm">
-							Expected Close
-						</th>
-						<th className="px-4 py-3 text-left font-medium text-sm">Actions</th>
-					</tr>
-				</thead>
-				<tbody className="divide-y divide-border">
-					{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 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>
-							</td>
-							<td className="px-4 py-3 text-muted-foreground">
-								{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,
 }: {

package/src/ui/hooks/useDealList.ts

@@ -1,6 +1,7 @@
 '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
  *
@@ -24,6 +25,9 @@ export interface UseDealListOptions {
 	status?: 'OPEN' | 'WON' | 'LOST' | 'all';
 	search?: string;
 	limit?: number;
+	pageIndex?: number;
+	pageSize?: number;
+	sorting?: ContractTableSort[];
 }
 
 export function useDealList(options: UseDealListOptions = {}) {
@@ -35,9 +39,14 @@ export function useDealList(options: UseDealListOptions = {}) {
 	const [stages, setStages] = useState<Stage[]>([]);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<Error | null>(null);
-	const [page, setPage] = useState(1);
+	const [internalPage, setInternalPage] = useState(0);
 
 	const pipelineId = options.pipelineId ?? 'pipeline-1';
+	const pageIndex = options.pageIndex ?? internalPage;
+	const pageSize = options.pageSize ?? options.limit ?? 50;
+	const [sort] = options.sorting ?? [];
+	const sortBy = sort?.id;
+	const sortDirection = sort ? (sort.desc ? 'desc' : 'asc') : undefined;
 
 	const fetchData = useCallback(async () => {
 		setLoading(true);
@@ -51,8 +60,17 @@ export function useDealList(options: UseDealListOptions = {}) {
 					stageId: options.stageId,
 					status: options.status === 'all' ? undefined : options.status,
 					search: options.search,
-					limit: options.limit ?? 50,
-					offset: (page - 1) * (options.limit ?? 50),
+					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 }),
@@ -72,8 +90,10 @@ export function useDealList(options: UseDealListOptions = {}) {
 		options.stageId,
 		options.status,
 		options.search,
-		options.limit,
-		page,
+		pageIndex,
+		pageSize,
+		sortBy,
+		sortDirection,
 	]);
 
 	useEffect(() => {
@@ -105,9 +125,17 @@ export function useDealList(options: UseDealListOptions = {}) {
 		loading,
 		error,
 		stats,
-		page,
+		page: pageIndex + 1,
+		pageIndex,
+		pageSize,
 		refetch: fetchData,
-		nextPage: () => setPage((p) => p + 1),
-		prevPage: () => page > 1 && setPage((p) => p - 1),
+		nextPage:
+			options.pageIndex === undefined
+				? () => setInternalPage((page) => page + 1)
+				: undefined,
+		prevPage:
+			options.pageIndex === undefined
+				? () => pageIndex > 0 && setInternalPage((page) => page - 1)
+				: undefined,
 	};
 }

package/src/ui/tables/DealListTab.smoke.test.tsx

@@ -0,0 +1,149 @@
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import Window from 'happy-dom/lib/window/Window.js';
+import * as React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MOCK_DEALS } from '../../handlers/mock-data';
+import type { Deal } from '../hooks/useDealList';
+import { DealListDataTable } from './DealListTab';
+
+const TEST_DEALS: Deal[] = MOCK_DEALS.map((deal) => ({
+	...deal,
+	projectId: 'project-1',
+}));
+
+beforeAll(() => {
+	const windowInstance = new Window({
+		url: 'https://sandbox.contractspec.local/sandbox?template=crm-pipeline',
+	});
+	Object.defineProperty(windowInstance, 'SyntaxError', {
+		value: SyntaxError,
+		configurable: true,
+	});
+	Object.assign(globalThis, {
+		window: windowInstance,
+		document: windowInstance.document,
+		navigator: windowInstance.navigator,
+		HTMLElement: windowInstance.HTMLElement,
+		HTMLButtonElement: windowInstance.HTMLButtonElement,
+		Node: windowInstance.Node,
+		Event: windowInstance.Event,
+		MouseEvent: windowInstance.MouseEvent,
+		MutationObserver: windowInstance.MutationObserver,
+		getComputedStyle: windowInstance.getComputedStyle.bind(windowInstance),
+		requestAnimationFrame: (callback: FrameRequestCallback) =>
+			setTimeout(() => callback(Date.now()), 0),
+		cancelAnimationFrame: (id: number) => clearTimeout(id),
+		IS_REACT_ACT_ENVIRONMENT: true,
+	});
+});
+
+afterEach(() => {
+	document.body.innerHTML = '';
+});
+
+function sortDeals(
+	pageIndex: number,
+	pageSize: number,
+	sorting: { id: string; desc: boolean }[]
+) {
+	const [sort] = sorting;
+	const sorted = [...TEST_DEALS].sort((left, right) => {
+		const leftValue =
+			sort?.id === 'deal'
+				? left.name
+				: sort?.id === 'status'
+					? left.status
+					: sort?.id === 'expectedCloseDate'
+						? (left.expectedCloseDate?.toISOString() ?? '')
+						: sort?.id === 'updatedAt'
+							? left.updatedAt.toISOString()
+							: left.value;
+		const rightValue =
+			sort?.id === 'deal'
+				? right.name
+				: sort?.id === 'status'
+					? right.status
+					: sort?.id === 'expectedCloseDate'
+						? (right.expectedCloseDate?.toISOString() ?? '')
+						: sort?.id === 'updatedAt'
+							? right.updatedAt.toISOString()
+							: right.value;
+		if (leftValue === rightValue) return 0;
+		const comparison = leftValue > rightValue ? 1 : -1;
+		return sort?.desc ? comparison * -1 : comparison;
+	});
+	return sorted.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize);
+}
+
+function Harness() {
+	const [sorting, setSorting] = React.useState([{ id: 'value', desc: true }]);
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0,
+		pageSize: 3,
+	});
+	return (
+		<DealListDataTable
+			deals={sortDeals(pagination.pageIndex, pagination.pageSize, sorting)}
+			totalItems={TEST_DEALS.length}
+			pageIndex={pagination.pageIndex}
+			pageSize={pagination.pageSize}
+			sorting={sorting}
+			onSortingChange={setSorting}
+			onPaginationChange={setPagination}
+		/>
+	);
+}
+
+async function renderTable() {
+	const container = document.createElement('div');
+	document.body.append(container);
+	const root: Root = createRoot(container);
+
+	await act(async () => {
+		root.render(<Harness />);
+	});
+
+	return { container, root };
+}
+
+async function click(element: Element | null | undefined) {
+	if (!element) {
+		throw new Error('Expected clickable element.');
+	}
+	await act(async () => {
+		if ('click' in element && typeof element.click === 'function') {
+			element.click();
+			return;
+		}
+		element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+	});
+}
+
+describe('DealListDataTable', () => {
+	test('renders the shared table and supports selection plus expansion', async () => {
+		const { container, root } = await renderTable();
+
+		expect(container.textContent).toContain('All Deals');
+		expect(container.textContent).toContain('6 total deals');
+
+		await click(container.querySelector('[aria-label="Select row deal-5"]'));
+		expect(container.textContent).toContain('Selected 1');
+
+		await click(container.querySelector('[aria-label="Expand row deal-5"]'));
+		expect(container.textContent).toContain('user-1');
+
+		await click(
+			[...container.getElementsByTagName('button')].find(
+				(button) => button.textContent?.trim() === '2'
+			)
+		);
+		expect(container.textContent).toContain(
+			'Affichage de 4 à 6 sur 6 résultats'
+		);
+
+		await act(async () => {
+			root.unmount();
+		});
+	});
+});

package/src/ui/tables/DealListTab.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import {
+	Button,
+	DataTable,
+	LoaderBlock,
+} from '@contractspec/lib.design-system';
+import type { ContractTableSort } from '@contractspec/lib.presentation-runtime-core';
+import { useContractTable } from '@contractspec/lib.presentation-runtime-react';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { Text } from '@contractspec/lib.ui-kit-web/ui/text';
+import * as React from 'react';
+import { type Deal, useDealList } from '../hooks/useDealList';
+
+function formatCurrency(value: number, currency = 'USD') {
+	return new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency,
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0,
+	}).format(value);
+}
+
+function statusVariant(status: Deal['status']) {
+	switch (status) {
+		case 'WON':
+			return 'default';
+		case 'LOST':
+			return 'destructive';
+		case 'STALE':
+			return 'outline';
+		default:
+			return 'secondary';
+	}
+}
+
+export interface DealListDataTableProps {
+	deals: Deal[];
+	totalItems: number;
+	pageIndex: number;
+	pageSize: number;
+	sorting: ContractTableSort[];
+	loading?: boolean;
+	onSortingChange: (sorting: ContractTableSort[]) => void;
+	onPaginationChange: (pagination: {
+		pageIndex: number;
+		pageSize: number;
+	}) => void;
+	onDealClick?: (dealId: string) => void;
+}
+
+export function DealListDataTable({
+	deals,
+	totalItems,
+	pageIndex,
+	pageSize,
+	sorting,
+	loading,
+	onSortingChange,
+	onPaginationChange,
+	onDealClick,
+}: DealListDataTableProps) {
+	const controller = useContractTable<Deal>({
+		data: deals,
+		columns: [
+			{
+				id: 'deal',
+				header: 'Deal',
+				label: 'Deal',
+				accessor: (deal) => deal.name,
+				cell: ({ item }) => (
+					<VStack gap="xs">
+						<Text className="font-medium text-sm">{item.name}</Text>
+						<Text className="text-muted-foreground text-xs">
+							{item.companyId ?? 'Unassigned company'}
+						</Text>
+					</VStack>
+				),
+				size: 240,
+				minSize: 180,
+				canSort: true,
+				canPin: true,
+				canResize: true,
+			},
+			{
+				id: 'value',
+				header: 'Value',
+				label: 'Value',
+				accessorKey: 'value',
+				cell: ({ item }) => formatCurrency(item.value, item.currency),
+				align: 'right',
+				size: 140,
+				canSort: true,
+				canResize: true,
+			},
+			{
+				id: 'status',
+				header: 'Status',
+				label: 'Status',
+				accessorKey: 'status',
+				cell: ({ value }) => (
+					<Badge variant={statusVariant(value as Deal['status'])}>
+						{String(value)}
+					</Badge>
+				),
+				size: 130,
+				canSort: true,
+				canHide: true,
+				canPin: true,
+				canResize: true,
+			},
+			{
+				id: 'expectedCloseDate',
+				header: 'Expected Close',
+				label: 'Expected Close',
+				accessor: (deal) => deal.expectedCloseDate?.toISOString() ?? '',
+				cell: ({ item }) =>
+					item.expectedCloseDate?.toLocaleDateString() ?? 'Not scheduled',
+				size: 170,
+				canSort: true,
+				canHide: true,
+				canResize: true,
+			},
+			{
+				id: 'updatedAt',
+				header: 'Updated',
+				label: 'Updated',
+				accessor: (deal) => deal.updatedAt.toISOString(),
+				cell: ({ item }) => item.updatedAt.toLocaleDateString(),
+				size: 140,
+				canSort: true,
+				canHide: true,
+				canResize: true,
+			},
+			{
+				id: 'actions',
+				header: 'Actions',
+				label: 'Actions',
+				accessor: (deal) => deal.id,
+				cell: ({ item }) => (
+					<Button
+						variant="ghost"
+						size="sm"
+						onPress={() => onDealClick?.(item.id)}
+					>
+						Actions
+					</Button>
+				),
+				size: 120,
+				canSort: false,
+				canHide: false,
+				canPin: false,
+				canResize: false,
+			},
+		],
+		executionMode: 'server',
+		selectionMode: 'multiple',
+		totalItems,
+		state: {
+			sorting,
+			pagination: {
+				pageIndex,
+				pageSize,
+			},
+		},
+		onSortingChange: onSortingChange,
+		onPaginationChange: onPaginationChange,
+		initialState: {
+			columnVisibility: { updatedAt: false },
+			columnPinning: { left: ['deal', 'status'], right: [] },
+		},
+		renderExpandedContent: (deal) => (
+			<VStack gap="sm" className="py-2">
+				<HStack justify="between">
+					<Text className="font-medium text-sm">Owner</Text>
+					<Text className="text-muted-foreground text-sm">{deal.ownerId}</Text>
+				</HStack>
+				<HStack justify="between">
+					<Text className="font-medium text-sm">Contact</Text>
+					<Text className="text-muted-foreground text-sm">
+						{deal.contactId ?? 'No linked contact'}
+					</Text>
+				</HStack>
+				{deal.wonSource ? (
+					<HStack justify="between">
+						<Text className="font-medium text-sm">Won Source</Text>
+						<Text className="text-muted-foreground text-sm">
+							{deal.wonSource}
+						</Text>
+					</HStack>
+				) : null}
+				{deal.lostReason ? (
+					<HStack justify="between">
+						<Text className="font-medium text-sm">Lost Reason</Text>
+						<Text className="text-muted-foreground text-sm">
+							{deal.lostReason}
+						</Text>
+					</HStack>
+				) : null}
+				{deal.notes ? (
+					<VStack gap="xs">
+						<Text className="font-medium text-sm">Notes</Text>
+						<Text className="text-muted-foreground text-sm">{deal.notes}</Text>
+					</VStack>
+				) : null}
+			</VStack>
+		),
+		getCanExpand: () => true,
+	});
+
+	return (
+		<DataTable
+			controller={controller}
+			title="All Deals"
+			description="Server-mode table using the shared ContractSpec controller."
+			loading={loading}
+			toolbar={
+				<HStack gap="sm" className="flex-wrap">
+					<Text className="text-muted-foreground text-sm">
+						Selected {controller.selectedRowIds.length}
+					</Text>
+					<Text className="text-muted-foreground text-sm">
+						{totalItems} total deals
+					</Text>
+				</HStack>
+			}
+			footer={`Page ${controller.pageIndex + 1} of ${controller.pageCount}`}
+			emptyState={
+				<div className="rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm">
+					No deals found
+				</div>
+			}
+		/>
+	);
+}
+
+export function DealListTab({
+	onDealClick,
+}: {
+	onDealClick?: (dealId: string) => void;
+}) {
+	const [sorting, setSorting] = React.useState<ContractTableSort[]>([
+		{ id: 'value', desc: true },
+	]);
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0,
+		pageSize: 3,
+	});
+	const { data, loading } = useDealList({
+		pageIndex: pagination.pageIndex,
+		pageSize: pagination.pageSize,
+		sorting,
+	});
+
+	if (loading && !data) {
+		return <LoaderBlock label="Loading deals..." />;
+	}
+
+	return (
+		<DealListDataTable
+			deals={data?.deals ?? []}
+			totalItems={data?.total ?? 0}
+			pageIndex={pagination.pageIndex}
+			pageSize={pagination.pageSize}
+			sorting={sorting}
+			loading={loading}
+			onSortingChange={(nextSorting) => {
+				setSorting(nextSorting);
+				setPagination((current) => ({ ...current, pageIndex: 0 }));
+			}}
+			onPaginationChange={setPagination}
+			onDealClick={onDealClick}
+		/>
+	);
+}