@contractspec/example.crm-pipeline 3.7.7 → 3.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.crm-pipeline",
-  "version": "3.7.7",
+  "version": "3.7.12",
   "description": "CRM Pipeline - Contacts, Companies, Deals, Tasks",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -312,6 +312,13 @@
       "bun": "./dist/ui/renderers/pipeline.renderer.js",
       "node": "./dist/node/ui/renderers/pipeline.renderer.js",
       "default": "./dist/ui/renderers/pipeline.renderer.js"
+    },
+    "./ui/tables/DealListTab": {
+      "types": "./dist/ui/tables/DealListTab.d.ts",
+      "browser": "./dist/browser/ui/tables/DealListTab.js",
+      "bun": "./dist/ui/tables/DealListTab.js",
+      "node": "./dist/node/ui/tables/DealListTab.js",
+      "default": "./dist/ui/tables/DealListTab.js"
     }
   },
   "scripts": {
@@ -331,24 +338,26 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.contracts-spec": "4.0.0",
-    "@contractspec/lib.design-system": "3.8.0",
-    "@contractspec/lib.example-shared-ui": "6.0.7",
-    "@contractspec/lib.identity-rbac": "3.7.7",
-    "@contractspec/lib.runtime-sandbox": "2.7.6",
-    "@contractspec/lib.schema": "3.7.6",
-    "@contractspec/lib.ui-kit-web": "3.8.0",
-    "@contractspec/module.audit-trail": "3.7.7",
-    "@contractspec/module.notifications": "3.7.7",
+    "@contractspec/lib.contracts-spec": "5.0.0",
+    "@contractspec/lib.design-system": "3.8.5",
+    "@contractspec/lib.example-shared-ui": "6.0.12",
+    "@contractspec/lib.identity-rbac": "3.7.12",
+    "@contractspec/lib.runtime-sandbox": "2.7.10",
+    "@contractspec/lib.schema": "3.7.10",
+    "@contractspec/lib.ui-kit-web": "3.9.4",
+    "@contractspec/module.audit-trail": "3.7.12",
+    "@contractspec/module.notifications": "3.7.12",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "@contractspec/lib.presentation-runtime-core": "3.9.0"
   },
   "devDependencies": {
-    "@contractspec/tool.typescript": "3.7.6",
+    "@contractspec/tool.typescript": "3.7.9",
     "typescript": "^5.9.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.2",
-    "@contractspec/tool.bun": "3.7.6"
+    "@contractspec/tool.bun": "3.7.9",
+    "happy-dom": "^20.8.4"
   },
   "publishConfig": {
     "exports": {
@@ -659,6 +668,13 @@
         "bun": "./dist/ui/renderers/pipeline.renderer.js",
         "node": "./dist/node/ui/renderers/pipeline.renderer.js",
         "default": "./dist/ui/renderers/pipeline.renderer.js"
+      },
+      "./ui/tables/DealListTab": {
+        "types": "./dist/ui/tables/DealListTab.d.ts",
+        "browser": "./dist/browser/ui/tables/DealListTab.js",
+        "bun": "./dist/ui/tables/DealListTab.js",
+        "node": "./dist/node/ui/tables/DealListTab.js",
+        "default": "./dist/ui/tables/DealListTab.js"
       }
     },
     "registry": "https://registry.npmjs.org/",

package/src/docs/crm-pipeline.docblock.ts

@@ -84,7 +84,7 @@ const crmPipelineDocBlocks: DocBlock[] = [
 - deal.created, stage.moved, task.completed, contact.updated.
 
 ## Presentations
-- Pipelines/kanban, deal detail, contact/company profiles, task lists.
+- Pipelines/kanban, deal detail, contact/company profiles, task lists, and a server-mode shared table for the deal list.
 
 ## Notes
 - Stage definitions should be declarative; enforce via spec and regeneration.

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/renderers/pipeline.markdown.ts

@@ -3,7 +3,7 @@
  *
  * Imports handlers from the hooks module to ensure correct build order.
  */
-import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import type { PresentationRenderer } from '@contractspec/lib.presentation-runtime-core/transform-engine';
 import {
 	mockGetPipelineStagesHandler,
 	mockListDealsHandler,

package/src/ui/renderers/pipeline.renderer.tsx

@@ -5,7 +5,7 @@
  * Data is fetched via the CrmPipelineBoard component's internal hooks.
  */
 
-import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import type { PresentationRenderer } from '@contractspec/lib.presentation-runtime-core/transform-engine';
 import * as React from 'react';
 import { CrmPipelineBoard } from '../CrmPipelineBoard';
 import { useDealList } from '../hooks/useDealList';

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();
+		});
+	});
+});