@contractspec/example.crm-pipeline 0.0.0-canary-20260113170453

package/src/ui/hooks/useDealMutations.ts

@@ -0,0 +1,174 @@
+/**
+ * Hook for CRM deal mutations (commands)
+ *
+ * Uses runtime-local database-backed handlers for:
+ * - CreateDealContract
+ * - MoveDealContract
+ * - WinDealContract
+ * - LoseDealContract
+ */
+import { useCallback, useState } from 'react';
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import type {
+  CreateDealInput,
+  CrmHandlers,
+  Deal,
+  LoseDealInput,
+  MoveDealInput,
+  WinDealInput,
+} from '../../handlers/crm.handlers';
+
+export interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+
+export interface UseDealMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export function useDealMutations(options: UseDealMutationsOptions = {}) {
+  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();
+  const { crm } = handlers;
+
+  const [createState, setCreateState] = useState<MutationState<Deal>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const [moveState, setMoveState] = useState<MutationState<Deal>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const [winState, setWinState] = useState<MutationState<Deal>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const [loseState, setLoseState] = useState<MutationState<Deal>>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  /**
+   * Create a new deal
+   */
+  const createDeal = useCallback(
+    async (input: CreateDealInput): Promise<Deal | null> => {
+      setCreateState({ loading: true, error: null, data: null });
+      try {
+        const result = await crm.createDeal(input, {
+          projectId,
+          ownerId: 'user-1', // Demo user
+        });
+        setCreateState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to create deal');
+        setCreateState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [crm, projectId, options]
+  );
+
+  /**
+   * Move a deal to a different stage
+   */
+  const moveDeal = useCallback(
+    async (input: MoveDealInput): Promise<Deal | null> => {
+      setMoveState({ loading: true, error: null, data: null });
+      try {
+        const result = await crm.moveDeal(input);
+        setMoveState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to move deal');
+        setMoveState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [crm, options]
+  );
+
+  /**
+   * Mark a deal as won
+   */
+  const winDeal = useCallback(
+    async (input: WinDealInput): Promise<Deal | null> => {
+      setWinState({ loading: true, error: null, data: null });
+      try {
+        const result = await crm.winDeal(input);
+        setWinState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to mark deal as won');
+        setWinState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [crm, options]
+  );
+
+  /**
+   * Mark a deal as lost
+   */
+  const loseDeal = useCallback(
+    async (input: LoseDealInput): Promise<Deal | null> => {
+      setLoseState({ loading: true, error: null, data: null });
+      try {
+        const result = await crm.loseDeal(input);
+        setLoseState({ loading: false, error: null, data: result });
+        options.onSuccess?.();
+        return result;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error('Failed to mark deal as lost');
+        setLoseState({ loading: false, error, data: null });
+        options.onError?.(error);
+        return null;
+      }
+    },
+    [crm, options]
+  );
+
+  return {
+    // Mutations
+    createDeal,
+    moveDeal,
+    winDeal,
+    loseDeal,
+
+    // State
+    createState,
+    moveState,
+    winState,
+    loseState,
+
+    // Convenience
+    isLoading:
+      createState.loading ||
+      moveState.loading ||
+      winState.loading ||
+      loseState.loading,
+  };
+}
+
+// Note: Types are re-exported from the handlers package
+// Consumers should import types directly from '@contractspec/example.crm-pipeline/handlers'

package/src/ui/index.ts

@@ -0,0 +1,18 @@
+// Main dashboard
+export * from './CrmDashboard';
+
+// Components
+export * from './CrmPipelineBoard';
+export * from './CrmDealCard';
+
+// Modals
+export * from './modals';
+
+// Hooks
+export * from './hooks';
+
+// Renderers
+export * from './renderers';
+
+// Overlays
+export * from './overlays';

package/src/ui/modals/CreateDealModal.tsx

@@ -0,0 +1,239 @@
+'use client';
+
+/**
+ * CreateDealModal - Form for creating a new deal
+ *
+ * Wires to CreateDealContract via useDealMutations hook.
+ */
+import { useState } from 'react';
+import { Button, Input } from '@contractspec/lib.design-system';
+
+// Local type definition for modal props
+export interface CreateDealInput {
+  name: string;
+  value: number;
+  currency: string;
+  pipelineId: string;
+  stageId: string;
+  expectedCloseDate?: Date;
+  contactId?: string;
+  companyId?: string;
+}
+
+interface CreateDealModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (input: CreateDealInput) => Promise<void>;
+  stages: { id: string; name: string }[];
+  isLoading?: boolean;
+}
+
+const CURRENCIES = ['USD', 'EUR', 'GBP', 'CAD'];
+const DEFAULT_PIPELINE_ID = 'pipeline-1';
+
+export function CreateDealModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  stages,
+  isLoading = false,
+}: CreateDealModalProps) {
+  const [name, setName] = useState('');
+  const [value, setValue] = useState('');
+  const [currency, setCurrency] = useState('USD');
+  const [stageId, setStageId] = useState(stages[0]?.id ?? '');
+  const [expectedCloseDate, setExpectedCloseDate] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validation
+    if (!name.trim()) {
+      setError('Deal name is required');
+      return;
+    }
+
+    const numericValue = parseFloat(value);
+    if (isNaN(numericValue) || numericValue <= 0) {
+      setError('Value must be a positive number');
+      return;
+    }
+
+    if (!stageId) {
+      setError('Please select a pipeline stage');
+      return;
+    }
+
+    try {
+      await onSubmit({
+        name: name.trim(),
+        value: numericValue,
+        currency,
+        pipelineId: DEFAULT_PIPELINE_ID,
+        stageId,
+        expectedCloseDate: expectedCloseDate
+          ? new Date(expectedCloseDate)
+          : undefined,
+      });
+
+      // Reset form
+      setName('');
+      setValue('');
+      setCurrency('USD');
+      setStageId(stages[0]?.id ?? '');
+      setExpectedCloseDate('');
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create deal');
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="bg-background/80 absolute inset-0 backdrop-blur-sm"
+        onClick={onClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') onClose();
+        }}
+        aria-label="Close modal"
+      />
+
+      {/* Modal */}
+      <div className="bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl">
+        <h2 className="mb-4 text-xl font-semibold">Create New Deal</h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Deal Name */}
+          <div>
+            <label
+              htmlFor="deal-name"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Deal Name *
+            </label>
+            <Input
+              id="deal-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., Enterprise License - Acme Corp"
+              disabled={isLoading}
+            />
+          </div>
+
+          {/* Value & Currency */}
+          <div className="flex gap-3">
+            <div className="flex-1">
+              <label
+                htmlFor="deal-value"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Value *
+              </label>
+              <Input
+                id="deal-value"
+                type="number"
+                min="0"
+                step="0.01"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                placeholder="50000"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="w-24">
+              <label
+                htmlFor="deal-currency"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Currency
+              </label>
+              <select
+                id="deal-currency"
+                value={currency}
+                onChange={(e) => setCurrency(e.target.value)}
+                disabled={isLoading}
+                className="border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+              >
+                {CURRENCIES.map((c) => (
+                  <option key={c} value={c}>
+                    {c}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Stage */}
+          <div>
+            <label
+              htmlFor="deal-stage"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Pipeline Stage *
+            </label>
+            <select
+              id="deal-stage"
+              value={stageId}
+              onChange={(e) => setStageId(e.target.value)}
+              disabled={isLoading}
+              className="border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+            >
+              {stages.map((stage) => (
+                <option key={stage.id} value={stage.id}>
+                  {stage.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Expected Close Date */}
+          <div>
+            <label
+              htmlFor="deal-close-date"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Expected Close Date
+            </label>
+            <Input
+              id="deal-close-date"
+              type="date"
+              value={expectedCloseDate}
+              onChange={(e) => setExpectedCloseDate(e.target.value)}
+              disabled={isLoading}
+            />
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onPress={onClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Creating...' : 'Create Deal'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}