@contractspec/example.crm-pipeline 1.46.0 → 1.47.0

package/src/ui/modals/DealActionsModal.tsx

@@ -0,0 +1,424 @@
+'use client';
+
+/**
+ * DealActionsModal - Actions for a specific deal (Win, Lose, Move)
+ *
+ * Wires to WinDealContract, LoseDealContract, MoveDealContract
+ * via useDealMutations hook.
+ */
+import { useState } from 'react';
+import { Button } from '@contractspec/lib.design-system';
+
+// Local type definitions for modal props
+export interface Deal {
+  id: string;
+  name: string;
+  value: number;
+  currency: string;
+  stageId: string;
+  status: 'OPEN' | 'WON' | 'LOST' | 'STALE';
+}
+
+export interface WinDealInput {
+  dealId: string;
+  wonSource?: string;
+  notes?: string;
+}
+
+export interface LoseDealInput {
+  dealId: string;
+  lostReason: string;
+  notes?: string;
+}
+
+export interface MoveDealInput {
+  dealId: string;
+  stageId: string;
+}
+
+type ActionMode = 'menu' | 'win' | 'lose' | 'move';
+
+interface DealActionsModalProps {
+  isOpen: boolean;
+  deal: Deal | null;
+  stages: { id: string; name: string }[];
+  onClose: () => void;
+  onWin: (input: WinDealInput) => Promise<void>;
+  onLose: (input: LoseDealInput) => Promise<void>;
+  onMove: (input: MoveDealInput) => Promise<void>;
+  isLoading?: boolean;
+}
+
+function formatCurrency(value: number, currency: string): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export function DealActionsModal({
+  isOpen,
+  deal,
+  stages,
+  onClose,
+  onWin,
+  onLose,
+  onMove,
+  isLoading = false,
+}: DealActionsModalProps) {
+  const [mode, setMode] = useState<ActionMode>('menu');
+  const [wonSource, setWonSource] = useState('');
+  const [lostReason, setLostReason] = useState('');
+  const [notes, setNotes] = useState('');
+  const [selectedStageId, setSelectedStageId] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setMode('menu');
+    setWonSource('');
+    setLostReason('');
+    setNotes('');
+    setSelectedStageId('');
+    setError(null);
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleWin = async () => {
+    if (!deal) return;
+    setError(null);
+
+    try {
+      await onWin({
+        dealId: deal.id,
+        wonSource: wonSource.trim() || undefined,
+        notes: notes.trim() || undefined,
+      });
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to mark deal as won'
+      );
+    }
+  };
+
+  const handleLose = async () => {
+    if (!deal) return;
+    setError(null);
+
+    if (!lostReason.trim()) {
+      setError('Please provide a reason for losing the deal');
+      return;
+    }
+
+    try {
+      await onLose({
+        dealId: deal.id,
+        lostReason: lostReason.trim(),
+        notes: notes.trim() || undefined,
+      });
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to mark deal as lost'
+      );
+    }
+  };
+
+  const handleMove = async () => {
+    if (!deal) return;
+    setError(null);
+
+    if (!selectedStageId) {
+      setError('Please select a stage');
+      return;
+    }
+
+    if (selectedStageId === deal.stageId) {
+      setError('Deal is already in this stage');
+      return;
+    }
+
+    try {
+      await onMove({
+        dealId: deal.id,
+        stageId: selectedStageId,
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to move deal');
+    }
+  };
+
+  if (!isOpen || !deal) 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={handleClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') handleClose();
+        }}
+        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">
+        {/* Deal Header */}
+        <div className="border-border mb-4 border-b pb-4">
+          <h2 className="text-xl font-semibold">{deal.name}</h2>
+          <p className="text-primary text-lg font-medium">
+            {formatCurrency(deal.value, deal.currency)}
+          </p>
+          <span
+            className={`mt-2 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>
+        </div>
+
+        {/* Main Menu */}
+        {mode === 'menu' && (
+          <div className="space-y-3">
+            {deal.status === 'OPEN' && (
+              <>
+                <Button
+                  className="w-full justify-start"
+                  variant="ghost"
+                  onPress={() => setMode('win')}
+                >
+                  <span className="mr-2">🏆</span> Mark as Won
+                </Button>
+                <Button
+                  className="w-full justify-start"
+                  variant="ghost"
+                  onPress={() => setMode('lose')}
+                >
+                  <span className="mr-2">❌</span> Mark as Lost
+                </Button>
+                <Button
+                  className="w-full justify-start"
+                  variant="ghost"
+                  onPress={() => {
+                    setSelectedStageId(deal.stageId);
+                    setMode('move');
+                  }}
+                >
+                  <span className="mr-2">➡️</span> Move to Stage
+                </Button>
+              </>
+            )}
+            {deal.status !== 'OPEN' && (
+              <p className="text-muted-foreground py-4 text-center">
+                This deal is already {deal.status.toLowerCase()}. No actions
+                available.
+              </p>
+            )}
+            <div className="border-border border-t pt-3">
+              <Button
+                className="w-full"
+                variant="outline"
+                onPress={handleClose}
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Win Form */}
+        {mode === 'win' && (
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="won-source"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                How did you win this deal?
+              </label>
+              <select
+                id="won-source"
+                value={wonSource}
+                onChange={(e) => setWonSource(e.target.value)}
+                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"
+              >
+                <option value="">Select a source...</option>
+                <option value="referral">Referral</option>
+                <option value="cold_outreach">Cold Outreach</option>
+                <option value="inbound">Inbound Lead</option>
+                <option value="upsell">Upsell</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+
+            <div>
+              <label
+                htmlFor="win-notes"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Notes (optional)
+              </label>
+              <textarea
+                id="win-notes"
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="Any additional notes about the win..."
+                rows={3}
+                className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              />
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button onPress={handleWin} disabled={isLoading}>
+                {isLoading ? 'Processing...' : '🏆 Confirm Win'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Lose Form */}
+        {mode === 'lose' && (
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="lost-reason"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Why was this deal lost? *
+              </label>
+              <select
+                id="lost-reason"
+                value={lostReason}
+                onChange={(e) => setLostReason(e.target.value)}
+                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"
+              >
+                <option value="">Select a reason...</option>
+                <option value="price">Price too high</option>
+                <option value="competitor">Lost to competitor</option>
+                <option value="no_budget">No budget</option>
+                <option value="no_decision">No decision made</option>
+                <option value="timing">Bad timing</option>
+                <option value="product_fit">Product not a fit</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+
+            <div>
+              <label
+                htmlFor="lose-notes"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Notes (optional)
+              </label>
+              <textarea
+                id="lose-notes"
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="Any additional details..."
+                rows={3}
+                className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              />
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button
+                variant="destructive"
+                onPress={handleLose}
+                disabled={isLoading}
+              >
+                {isLoading ? 'Processing...' : '❌ Confirm Loss'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Move Form */}
+        {mode === 'move' && (
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="move-stage"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Move to Stage
+              </label>
+              <select
+                id="move-stage"
+                value={selectedStageId}
+                onChange={(e) => setSelectedStageId(e.target.value)}
+                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"
+              >
+                {stages.map((stage) => (
+                  <option key={stage.id} value={stage.id}>
+                    {stage.name}
+                    {stage.id === deal.stageId ? ' (current)' : ''}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button onPress={handleMove} disabled={isLoading}>
+                {isLoading ? 'Moving...' : '➡️ Move Deal'}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/modals/index.ts

@@ -0,0 +1,2 @@
+export { CreateDealModal } from './CreateDealModal';
+export { DealActionsModal } from './DealActionsModal';

package/src/ui/overlays/demo-overlays.ts

@@ -0,0 +1,68 @@
+/**
+ * Demo Overlay Definitions for CRM Pipeline
+ *
+ * These overlays customize the presentation for different contexts
+ * (e.g., demo users, different roles).
+ */
+import type { OverlayDefinition } from '../../shared/overlay-types';
+
+/**
+ * Demo user overlay - sample data mode
+ */
+export const crmDemoOverlay: OverlayDefinition = {
+  overlayId: 'crm-pipeline.demo-user',
+  version: '1.0.0',
+  description: 'Demo mode with sample data',
+  appliesTo: {
+    feature: 'crm-pipeline',
+    role: 'demo',
+  },
+  modifications: [
+    {
+      type: 'hideField',
+      field: 'importButton',
+      reason: 'Not available in demo',
+    },
+    {
+      type: 'hideField',
+      field: 'exportButton',
+      reason: 'Not available in demo',
+    },
+    {
+      type: 'addBadge',
+      position: 'header',
+      label: 'Demo Mode',
+      variant: 'warning',
+    },
+  ],
+};
+
+/**
+ * Sales rep overlay - focused view for sales
+ */
+export const crmSalesRepOverlay: OverlayDefinition = {
+  overlayId: 'crm-pipeline.sales-rep',
+  version: '1.0.0',
+  description: 'Sales rep focused view',
+  appliesTo: {
+    feature: 'crm-pipeline',
+    role: 'sales-rep',
+  },
+  modifications: [
+    {
+      type: 'hideField',
+      field: 'teamMetrics',
+      reason: 'Team metrics for managers only',
+    },
+    { type: 'hideField', field: 'pipelineSettings', reason: 'Admin only' },
+    { type: 'renameLabel', field: 'deals', newLabel: 'My Deals' },
+  ],
+};
+
+/**
+ * All overlays for crm-pipeline
+ */
+export const crmOverlays: OverlayDefinition[] = [
+  crmDemoOverlay,
+  crmSalesRepOverlay,
+];

package/src/ui/overlays/index.ts

@@ -0,0 +1 @@
+export * from './demo-overlays';

package/src/ui/renderers/index.ts

@@ -0,0 +1,6 @@
+// CRM Pipeline renderers
+export { crmPipelineReactRenderer } from './pipeline.renderer';
+export {
+  crmPipelineMarkdownRenderer,
+  crmDashboardMarkdownRenderer,
+} from './pipeline.markdown';

package/src/ui/renderers/pipeline.markdown.ts

@@ -0,0 +1,198 @@
+/**
+ * Markdown renderer for CRM Pipeline presentation
+ *
+ * Imports handlers from the hooks module to ensure correct build order.
+ */
+import type { PresentationRenderer } from '@contractspec/lib.contracts';
+import {
+  mockListDealsHandler,
+  mockGetPipelineStagesHandler,
+} from '@contractspec/example.crm-pipeline/handlers';
+
+interface DealItem {
+  id: string;
+  name: string;
+  value: number;
+  currency: string;
+  stageId: string;
+  status: string;
+}
+
+interface StageItem {
+  id: string;
+  name: string;
+  position: number;
+}
+
+function formatCurrency(value: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+  }).format(value);
+}
+
+/**
+ * Markdown renderer for CRM Pipeline Kanban view (crm-pipeline.deal.pipeline)
+ * Only handles PipelineKanbanView component
+ */
+export const crmPipelineMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}> = {
+  target: 'markdown',
+  render: async (desc, _ctx) => {
+    // Only handle PipelineKanbanView
+    if (
+      desc.source.type !== 'component' ||
+      desc.source.componentKey !== 'PipelineKanbanView'
+    ) {
+      throw new Error('crmPipelineMarkdownRenderer: not PipelineKanbanView');
+    }
+
+    const pipelineId = 'pipeline-1';
+    const [dealsResult, stages] = await Promise.all([
+      mockListDealsHandler({ pipelineId, limit: 50 }),
+      mockGetPipelineStagesHandler({ pipelineId }),
+    ]);
+
+    const deals = dealsResult.deals as DealItem[];
+    const stageList = stages as StageItem[];
+
+    // Group deals by stage
+    const dealsByStage: Record<string, DealItem[]> = {};
+    for (const stage of stageList) {
+      dealsByStage[stage.id] = deals.filter(
+        (d) => d.stageId === stage.id && d.status === 'OPEN'
+      );
+    }
+
+    // Build Markdown
+    const lines: string[] = [
+      '# CRM Pipeline',
+      '',
+      `**Total Value**: ${formatCurrency(dealsResult.totalValue)}`,
+      `**Total Deals**: ${dealsResult.total}`,
+      '',
+    ];
+
+    for (const stage of stageList.sort((a, b) => a.position - b.position)) {
+      const stageDeals = dealsByStage[stage.id] ?? [];
+      const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
+
+      lines.push(`## ${stage.name}`);
+      lines.push(
+        `_${stageDeals.length} deals · ${formatCurrency(stageValue)}_`
+      );
+      lines.push('');
+
+      if (stageDeals.length === 0) {
+        lines.push('_No deals_');
+      } else {
+        for (const deal of stageDeals) {
+          lines.push(
+            `- **${deal.name}** - ${formatCurrency(deal.value, deal.currency)}`
+          );
+        }
+      }
+
+      lines.push('');
+    }
+
+    return {
+      mimeType: 'text/markdown',
+      body: lines.join('\n'),
+    };
+  },
+};
+
+/**
+ * Markdown renderer for CRM Dashboard (crm-pipeline.dashboard)
+ * Only handles CrmDashboard component
+ */
+export const crmDashboardMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}> = {
+  target: 'markdown',
+  render: async (desc, _ctx) => {
+    // Only handle CrmDashboard
+    if (
+      desc.source.type !== 'component' ||
+      desc.source.componentKey !== 'CrmDashboard'
+    ) {
+      throw new Error('crmDashboardMarkdownRenderer: not CrmDashboard');
+    }
+
+    const pipelineId = 'pipeline-1';
+    const [dealsResult, stages] = await Promise.all([
+      mockListDealsHandler({ pipelineId, limit: 100 }),
+      mockGetPipelineStagesHandler({ pipelineId }),
+    ]);
+
+    const deals = dealsResult.deals as DealItem[];
+    const stageList = stages as StageItem[];
+
+    // Calculate stats
+    const openDeals = deals.filter((d) => d.status === 'OPEN');
+    const wonDeals = deals.filter((d) => d.status === 'WON');
+    const lostDeals = deals.filter((d) => d.status === 'LOST');
+    const openValue = openDeals.reduce((sum, d) => sum + d.value, 0);
+    const wonValue = wonDeals.reduce((sum, d) => sum + d.value, 0);
+
+    // Build dashboard markdown
+    const lines: string[] = [
+      '# CRM Dashboard',
+      '',
+      '> Sales pipeline overview and key metrics',
+      '',
+      '## Summary',
+      '',
+      '| Metric | Value |',
+      '|--------|-------|',
+      `| Total Deals | ${dealsResult.total} |`,
+      `| Pipeline Value | ${formatCurrency(dealsResult.totalValue)} |`,
+      `| Open Deals | ${openDeals.length} (${formatCurrency(openValue)}) |`,
+      `| Won Deals | ${wonDeals.length} (${formatCurrency(wonValue)}) |`,
+      `| Lost Deals | ${lostDeals.length} |`,
+      '',
+      '## Pipeline Stages',
+      '',
+    ];
+
+    // Stage summary table
+    lines.push('| Stage | Deals | Value |');
+    lines.push('|-------|-------|-------|');
+    for (const stage of stageList.sort((a, b) => a.position - b.position)) {
+      const stageDeals = openDeals.filter((d) => d.stageId === stage.id);
+      const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
+      lines.push(
+        `| ${stage.name} | ${stageDeals.length} | ${formatCurrency(stageValue)} |`
+      );
+    }
+
+    lines.push('');
+    lines.push('## Recent Deals');
+    lines.push('');
+
+    // Top 10 recent deals
+    const recentDeals = deals.slice(0, 10);
+    if (recentDeals.length === 0) {
+      lines.push('_No deals yet._');
+    } else {
+      lines.push('| Deal | Value | Stage | Status |');
+      lines.push('|------|-------|-------|--------|');
+      for (const deal of recentDeals) {
+        const stage = stageList.find((s) => s.id === deal.stageId);
+        lines.push(
+          `| ${deal.name} | ${formatCurrency(deal.value, deal.currency)} | ${stage?.name ?? '-'} | ${deal.status} |`
+        );
+      }
+    }
+
+    return {
+      mimeType: 'text/markdown',
+      body: lines.join('\n'),
+    };
+  },
+};