{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "ai-crm-pipeline-dashboard",
  "title": "Ai Crm Pipeline Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/ai-crm-pipeline-dashboard/AiCrmPipelineDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  BarChart3,\n  Bot,\n  BrainCircuit,\n  CheckCircle2,\n  DollarSign,\n  Download,\n  FileCheck,\n  Kanban,\n  Plus,\n  Search,\n  Sparkles,\n  Table as TableIcon,\n  Timer,\n  TrendingUp,\n  User,\n  Video,\n  Wand2,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type PipelineStageId = 'discovery' | 'demo' | 'proposal' | 'negotiation'\n\nexport interface DealItem {\n  id: string\n  company: string\n  companyInitials: string\n  avatarBg: string\n  dealName: string\n  tier: 'Enterprise' | 'Mid-Market' | 'Growth'\n  value: number\n  valueFormatted: string\n  stageId: PipelineStageId\n  stageName: string\n  stageProgress: number\n  aiWinScore: number\n  contactName: string\n  contactRole: string\n  ownerName: string\n  ownerInitials: string\n  closeDate: string\n  daysToClose: string\n  nextStep: string\n  isWinReady?: boolean\n  activityCount: number\n}\n\nexport interface StageSummary {\n  id: PipelineStageId\n  name: string\n  dealCountText: string\n  totalValueText: string\n  avgAiScoreText: string\n  accentColor: string\n  badgeVariant: string\n  progressValue: number\n  description: string\n}\n\nexport interface MeetingInsight {\n  id: string\n  company: string\n  companyInitials: string\n  avatarBg: string\n  dealName: string\n  meetingTitle: string\n  timeAgo: string\n  duration: string\n  platform: string\n  attendees: string[]\n  buyingIntentScore: number\n  buyingIntentLabel: string\n  sentimentScore: string\n  keyTakeaways: string\n  aiRecommendedAction: string\n  primaryActionLabel: string\n}\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    initialViewMode?: 'kanban' | 'table'\n    initialStageFilter?: 'all' | PipelineStageId\n    initialSearch?: string\n    showInsights?: boolean\n  }>(),\n  {\n    initialViewMode: 'kanban',\n    initialStageFilter: 'all',\n    initialSearch: '',\n    showInsights: true,\n  },\n)\n\nconst viewMode = ref<'kanban' | 'table'>(props.initialViewMode)\nconst stageFilter = ref<'all' | PipelineStageId>(props.initialStageFilter)\nconst searchQuery = ref(props.initialSearch)\nconst selectedDealId = ref<string | null>(null)\n\nconst stages: StageSummary[] = [\n  {\n    id: 'discovery',\n    name: 'Discovery & Qualification',\n    dealCountText: '6 deals',\n    totalValueText: '$240k',\n    avgAiScoreText: 'AI score 42%',\n    accentColor: 'bg-info',\n    badgeVariant: 'bg-info/10 text-info border-info/20',\n    progressValue: 25,\n    description: 'Initial ICP qualification, technical scoping, and business fit discovery',\n  },\n  {\n    id: 'demo',\n    name: 'Technical Demo & Evaluation',\n    dealCountText: '8 deals',\n    totalValueText: '$480k',\n    avgAiScoreText: 'AI score 68%',\n    accentColor: 'bg-chart-1',\n    badgeVariant: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n    progressValue: 50,\n    description: 'Deep-dive sandbox environment, latency benchmarks, and API trials',\n  },\n  {\n    id: 'proposal',\n    name: 'Executive Proposal & Security',\n    dealCountText: '6 deals',\n    totalValueText: '$520k',\n    avgAiScoreText: 'AI score 84%',\n    accentColor: 'bg-warning',\n    badgeVariant: 'bg-warning/10 text-warning border-warning/20',\n    progressValue: 75,\n    description: 'Security & InfoSec clearance, CFO business case, and custom licensing',\n  },\n  {\n    id: 'negotiation',\n    name: 'Contract Negotiation & Closing',\n    dealCountText: '4 deals',\n    totalValueText: '$188k',\n    avgAiScoreText: 'AI score 94%',\n    accentColor: 'bg-success',\n    badgeVariant: 'bg-success/10 text-success border-success/20',\n    progressValue: 100,\n    description: 'Master service agreement redlines, final DPA signoff, and onboarding kickoff',\n  },\n]\n\nconst dealsData: DealItem[] = [\n  // Stage 1: Discovery & Qualification (6 deals total, 3 detailed inline)\n  {\n    id: 'deal-1',\n    company: 'Acme Corp',\n    companyInitials: 'AC',\n    avatarBg: 'bg-info/15 text-info',\n    dealName: 'Acme Corp - Enterprise 500 Seats',\n    tier: 'Enterprise',\n    value: 120000,\n    valueFormatted: '$120,000 ARR',\n    stageId: 'discovery',\n    stageName: 'Discovery & Qualification',\n    stageProgress: 25,\n    aiWinScore: 48,\n    contactName: 'David Chen',\n    contactRole: 'VP Eng',\n    ownerName: 'Sarah Jenkins (AE)',\n    ownerInitials: 'SJ',\n    closeDate: 'Aug 28',\n    daysToClose: '7 days',\n    nextStep: 'Complete Security Questionnaire review',\n    activityCount: 4,\n  },\n  {\n    id: 'deal-2',\n    company: 'HyperScale Cloud',\n    companyInitials: 'HC',\n    avatarBg: 'bg-info/15 text-info',\n    dealName: 'HyperScale Cloud - Infra Observability',\n    tier: 'Growth',\n    value: 75000,\n    valueFormatted: '$75,000 ARR',\n    stageId: 'discovery',\n    stageName: 'Discovery & Qualification',\n    stageProgress: 25,\n    aiWinScore: 42,\n    contactName: 'Elena Rostova',\n    contactRole: 'Head of DevOps',\n    ownerName: 'Michael Chang (AE)',\n    ownerInitials: 'MC',\n    closeDate: 'Sep 14',\n    daysToClose: '24 days',\n    nextStep: 'Deliver architectural scoping document',\n    activityCount: 3,\n  },\n  {\n    id: 'deal-3',\n    company: 'Global Logistics Hub',\n    companyInitials: 'GL',\n    avatarBg: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',\n    dealName: 'Global Logistics - Fleet Telematics',\n    tier: 'Mid-Market',\n    value: 45000,\n    valueFormatted: '$45,000 ARR',\n    stageId: 'discovery',\n    stageName: 'Discovery & Qualification',\n    stageProgress: 25,\n    aiWinScore: 36,\n    contactName: 'Marcus Brody',\n    contactRole: 'Dir. Operations',\n    ownerName: 'Jessica Wu (AE)',\n    ownerInitials: 'JW',\n    closeDate: 'Sep 22',\n    daysToClose: '32 days',\n    nextStep: 'Schedule technical discovery sync',\n    activityCount: 2,\n  },\n\n  // Stage 2: Technical Demo & Evaluation (8 deals total, 3 detailed inline)\n  {\n    id: 'deal-4',\n    company: 'QuantumPay',\n    companyInitials: 'QP',\n    avatarBg: 'bg-chart-1/15 text-chart-1',\n    dealName: 'QuantumPay - Core Banking Modernization',\n    tier: 'Enterprise',\n    value: 160000,\n    valueFormatted: '$160,000 ARR',\n    stageId: 'demo',\n    stageName: 'Technical Demo & Evaluation',\n    stageProgress: 50,\n    aiWinScore: 74,\n    contactName: 'Amina Al-Mansoor',\n    contactRole: 'CTO',\n    ownerName: 'Sarah Jenkins (AE)',\n    ownerInitials: 'SJ',\n    closeDate: 'Sep 08',\n    daysToClose: '18 days',\n    nextStep: 'VPC sandbox load testing & latency trial',\n    activityCount: 6,\n  },\n  {\n    id: 'deal-5',\n    company: 'Orbit Data Systems',\n    companyInitials: 'OD',\n    avatarBg: 'bg-chart-2/15 text-chart-2',\n    dealName: 'Orbit Data - Analytics Fabric 2.0',\n    tier: 'Enterprise',\n    value: 135000,\n    valueFormatted: '$135,000 ARR',\n    stageId: 'demo',\n    stageName: 'Technical Demo & Evaluation',\n    stageProgress: 50,\n    aiWinScore: 68,\n    contactName: 'Liam O’Connor',\n    contactRole: 'VP Data Systems',\n    ownerName: 'Carlos Mendez (AE)',\n    ownerInitials: 'CM',\n    closeDate: 'Sep 18',\n    daysToClose: '28 days',\n    nextStep: 'Deliver custom throughput benchmark report',\n    activityCount: 5,\n  },\n  {\n    id: 'deal-6',\n    company: 'CyberGuard Defense',\n    companyInitials: 'CG',\n    avatarBg: 'bg-chart-3/15 text-chart-3',\n    dealName: 'CyberGuard - SIEM Log Ingestion',\n    tier: 'Enterprise',\n    value: 185000,\n    valueFormatted: '$185,000 ARR',\n    stageId: 'demo',\n    stageName: 'Technical Demo & Evaluation',\n    stageProgress: 50,\n    aiWinScore: 65,\n    contactName: 'Rachel Vance',\n    contactRole: 'CISO',\n    ownerName: 'Michael Chang (AE)',\n    ownerInitials: 'MC',\n    closeDate: 'Sep 30',\n    daysToClose: '40 days',\n    nextStep: 'InfoSec team architecture deep-dive',\n    activityCount: 4,\n  },\n\n  // Stage 3: Executive Proposal & Security (6 deals total, 3 detailed inline)\n  {\n    id: 'deal-7',\n    company: 'Vertex Bio Labs',\n    companyInitials: 'VB',\n    avatarBg: 'bg-warning/15 text-warning',\n    dealName: 'Vertex Bio - C-Suite Platform Rollout',\n    tier: 'Enterprise',\n    value: 210000,\n    valueFormatted: '$210,000 ARR',\n    stageId: 'proposal',\n    stageName: 'Executive Proposal & Security',\n    stageProgress: 75,\n    aiWinScore: 88,\n    contactName: 'Dr. Julian Sterling',\n    contactRole: 'Chief Sci Officer',\n    ownerName: 'Emily Thorne (AE)',\n    ownerInitials: 'ET',\n    closeDate: 'Aug 30',\n    daysToClose: '9 days',\n    nextStep: 'Final CFO 2-year commitment signoff',\n    activityCount: 8,\n  },\n  {\n    id: 'deal-8',\n    company: 'Horizon FinServ',\n    companyInitials: 'HF',\n    avatarBg: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',\n    dealName: 'Horizon FinServ - Wealth Management Suite',\n    tier: 'Enterprise',\n    value: 190000,\n    valueFormatted: '$190,000 ARR',\n    stageId: 'proposal',\n    stageName: 'Executive Proposal & Security',\n    stageProgress: 75,\n    aiWinScore: 84,\n    contactName: 'Nathalie Dupont',\n    contactRole: 'Managing Director',\n    ownerName: 'Sarah Jenkins (AE)',\n    ownerInitials: 'SJ',\n    closeDate: 'Sep 04',\n    daysToClose: '14 days',\n    nextStep: 'Vendor risk committee formal approval',\n    activityCount: 7,\n  },\n  {\n    id: 'deal-9',\n    company: 'Pulse Healthcare',\n    companyInitials: 'PH',\n    avatarBg: 'bg-destructive/15 text-destructive',\n    dealName: 'Pulse Health - Telehealth Core Engine',\n    tier: 'Growth',\n    value: 120000,\n    valueFormatted: '$120,000 ARR',\n    stageId: 'proposal',\n    stageName: 'Executive Proposal & Security',\n    stageProgress: 75,\n    aiWinScore: 82,\n    contactName: 'Dr. Alan Moore',\n    contactRole: 'Chief Med Officer',\n    ownerName: 'Carlos Mendez (AE)',\n    ownerInitials: 'CM',\n    closeDate: 'Sep 12',\n    daysToClose: '22 days',\n    nextStep: 'Execute HIPAA BAA & data privacy rider',\n    activityCount: 5,\n  },\n\n  // Stage 4: Contract Negotiation & Closing (4 deals total, 2 detailed inline)\n  {\n    id: 'deal-10',\n    company: 'Nova Fintech',\n    companyInitials: 'NF',\n    avatarBg: 'bg-success/15 text-success',\n    dealName: 'Nova Fintech - Multi-Region VPC Latency',\n    tier: 'Enterprise',\n    value: 98000,\n    valueFormatted: '$98,000 ARR',\n    stageId: 'negotiation',\n    stageName: 'Contract Negotiation & Closing',\n    stageProgress: 100,\n    aiWinScore: 96,\n    isWinReady: true,\n    contactName: 'Samantha Ray',\n    contactRole: 'Head of Procurement',\n    ownerName: 'Emily Thorne (AE)',\n    ownerInitials: 'ET',\n    closeDate: 'Aug 24',\n    daysToClose: '3 days',\n    nextStep: 'DocuSign envelope awaiting CEO countersignature',\n    activityCount: 11,\n  },\n  {\n    id: 'deal-11',\n    company: 'Apex AI Labs',\n    companyInitials: 'AA',\n    avatarBg: 'bg-teal-500/15 text-teal-600 dark:text-teal-400',\n    dealName: 'Apex AI - Model Orchestration Cluster',\n    tier: 'Growth',\n    value: 90000,\n    valueFormatted: '$90,000 ARR',\n    stageId: 'negotiation',\n    stageName: 'Contract Negotiation & Closing',\n    stageProgress: 100,\n    aiWinScore: 92,\n    isWinReady: true,\n    contactName: 'Vikram Patel',\n    contactRole: 'VP Infrastructure',\n    ownerName: 'Michael Chang (AE)',\n    ownerInitials: 'MC',\n    closeDate: 'Aug 26',\n    daysToClose: '5 days',\n    nextStep: 'Send customer onboarding package & kickoff invite',\n    activityCount: 9,\n  },\n]\n\nconst meetingInsights: MeetingInsight[] = [\n  {\n    id: 'meet-1',\n    company: 'Acme Corp',\n    companyInitials: 'AC',\n    avatarBg: 'bg-info/15 text-info',\n    dealName: 'Acme Corp - Enterprise 500 Seats',\n    meetingTitle: 'Security & Legal Architecture Review',\n    timeAgo: 'Today at 10:30 AM',\n    duration: '45 mins',\n    platform: 'Zoom Meeting',\n    attendees: ['Sarah Jenkins (AE)', 'David Chen (VP Eng)', 'Sarah Lin (Legal Counsel)'],\n    buyingIntentScore: 94,\n    buyingIntentLabel: '94% High Buying Intent',\n    sentimentScore: '+0.88 Positive',\n    keyTakeaways:\n      'SOC2 Type II cleared with zero exceptions. InfoSec approved AWS eu-central-1 data residency. Legal accepted master indemnity terms with 1 minor clarification on 99.95% uptime SLA credit.',\n    aiRecommendedAction:\n      'Dispatch updated Master Services Agreement (MSA) & DPA with revised 99.95% SLA clause before 4:00 PM today.',\n    primaryActionLabel: 'Dispatch MSA & DPA',\n  },\n  {\n    id: 'meet-2',\n    company: 'Vertex Bio Labs',\n    companyInitials: 'VB',\n    avatarBg: 'bg-warning/15 text-warning',\n    dealName: 'Vertex Bio - C-Suite Platform Rollout',\n    meetingTitle: 'CFO Business Case & ROI Alignment',\n    timeAgo: 'Yesterday at 3:15 PM',\n    duration: '30 mins',\n    platform: 'Google Meet',\n    attendees: ['Emily Thorne (AE)', 'Dr. Julian Sterling (CSO)', 'Mark Hansen (CFO)'],\n    buyingIntentScore: 88,\n    buyingIntentLabel: '88% Strong Buying Intent',\n    sentimentScore: '+0.82 Positive',\n    keyTakeaways:\n      'CFO Mark Hansen confirmed budget authorization for 2-year enterprise commitment ($420k TCV). Requested expedited 14-day onboarding plan for 450 laboratory technicians across Cambridge and Basel campuses.',\n    aiRecommendedAction:\n      'Deliver 14-day technical migration blueprint & assign dedicated Customer Success Architect by 12:00 PM tomorrow.',\n    primaryActionLabel: 'Send Onboarding Plan',\n  },\n  {\n    id: 'meet-3',\n    company: 'QuantumPay',\n    companyInitials: 'QP',\n    avatarBg: 'bg-chart-1/15 text-chart-1',\n    dealName: 'QuantumPay - Core Banking Modernization',\n    meetingTitle: 'Technical Sandbox & Latency Benchmark Debrief',\n    timeAgo: 'Aug 19 at 11:00 AM',\n    duration: '60 mins',\n    platform: 'In-Person Executive Sync',\n    attendees: ['Sarah Jenkins (AE)', 'Amina Al-Mansoor (CTO)', '4 Principal Engineers'],\n    buyingIntentScore: 78,\n    buyingIntentLabel: '78% Moderate-High Intent',\n    sentimentScore: '+0.74 Validated',\n    keyTakeaways:\n      'Completed live latency benchmark in us-east-1 and eu-central-1 sandbox with sustained 12,500 req/sec at 11.8ms p99 latency. CTO asked for tiered discount model if expanding to APAC in Q1 2027.',\n    aiRecommendedAction:\n      'Schedule executive sponsor call with VP Engineering and send multi-region Tier-1 SLA pricing options.',\n    primaryActionLabel: 'Generate Tier-1 Quote',\n  },\n]\n\nconst filteredDeals = computed(() => {\n  return dealsData.filter((deal) => {\n    const matchesStage = stageFilter.value === 'all' || deal.stageId === stageFilter.value\n    const query = searchQuery.value.trim().toLowerCase()\n    if (!query) return matchesStage\n\n    const matchesSearch =\n      deal.company.toLowerCase().includes(query) ||\n      deal.dealName.toLowerCase().includes(query) ||\n      deal.contactName.toLowerCase().includes(query) ||\n      deal.ownerName.toLowerCase().includes(query) ||\n      deal.nextStep.toLowerCase().includes(query)\n\n    return matchesStage && matchesSearch\n  })\n})\n\nfunction getStageDeals(stageId: PipelineStageId) {\n  return filteredDeals.value.filter((deal) => deal.stageId === stageId)\n}\n\nfunction getAiScoreClass(score: number) {\n  if (score >= 85) {\n    return 'bg-success/10 text-success border-success/20'\n  }\n  if (score >= 70) {\n    return 'bg-info/10 text-info border-info/20'\n  }\n  if (score >= 50) {\n    return 'bg-warning/10 text-warning border-warning/20'\n  }\n  return 'bg-slate-500/10 text-slate-600 text-muted-foreground border-slate-500/20'\n}\n\nfunction handleSelectDeal(id: string) {\n  selectedDealId.value = selectedDealId.value === id ? null : id\n}\n</script>\n\n<template>\n  <div :class=\"cn('flex w-full flex-col gap-6', props.class)\">\n    <!-- Header Section -->\n    <header class=\"border-border flex flex-col gap-4 border-b pb-6 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Badge wrap variant=\"outline\" class=\"gap-1.5 text-xs font-medium\">\n            <span class=\"bg-success size-2 animate-pulse rounded-full\" />\n            Enterprise Mid-Market Squad · 6 Account Executives\n          </Badge>\n          <Badge wrap variant=\"secondary\" class=\"gap-1 text-xs\">\n            <Sparkles class=\"text-primary size-3\" />\n            Live AI Revenue Intelligence\n          </Badge>\n        </div>\n        <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">Sales Pipeline & Revenue Velocity</h1>\n        <p class=\"text-muted-foreground text-sm\">\n          <span class=\"text-foreground font-semibold tabular-nums\">$1,428,500.00 Pipeline · 24 Deals</span>\n          <span class=\"text-border mx-2\">|</span>\n          <span>Q3 Closed ARR Target: $1.20M (86% on-pace probability)</span>\n        </p>\n      </div>\n\n      <!-- Header Action Controls -->\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <div class=\"border-border bg-muted/40 inline-flex rounded-lg border p-1\">\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                viewMode === 'kanban'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"viewMode = 'kanban'\"\n          >\n            <Kanban class=\"size-3.5\" />\n            Board View\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                viewMode === 'table'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"viewMode = 'table'\"\n          >\n            <TableIcon class=\"size-3.5\" />\n            Table View\n          </button>\n        </div>\n\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-1.5 shadow-xs\">\n          <Download class=\"size-4\" />\n          Export CRM CSV\n        </Button>\n        <Button size=\"sm\" class=\"gap-1.5 shadow-xs\">\n          <Plus class=\"size-4\" />\n          New Deal\n        </Button>\n      </div>\n    </header>\n\n    <!-- 4 CRM Health KPI Cards -->\n    <section aria-label=\"Pipeline Health KPI Summary\" class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- KPI 1: Total Pipeline Value -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Total Pipeline Value\n          </CardTitle>\n          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n            <DollarSign class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">$1.43M</div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Across 24 qualified deals</span>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success gap-1 text-xs font-medium\"\n            >\n              <TrendingUp class=\"size-3\" />\n              +17.6% MoM\n            </Badge>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">\n            Weighted Forecast: <span class=\"text-foreground font-semibold tabular-nums\">$976,500.00</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 2: Win Probability Index -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Win Probability Index\n          </CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-lg\">\n            <Sparkles class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">68.4%</div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">AI Win Probability</span>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success gap-1 text-xs font-medium\"\n            >\n              <BrainCircuit class=\"size-3\" />\n              +5.8% shift\n            </Badge>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">\n            High Confidence: <span class=\"text-foreground font-semibold tabular-nums\">14 deals (>70% score)</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 3: Avg Deal Size -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Avg Deal Size\n          </CardTitle>\n          <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-lg\">\n            <BarChart3 class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">$59,500.00</div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">ARR / deal average</span>\n            <Badge wrap variant=\"outline\" class=\"border-info/20 bg-info/10 text-info gap-1 text-xs font-medium\">\n              <TrendingUp class=\"size-3\" />\n              +$6.2k vs FY25\n            </Badge>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">\n            Median Deal Value: <span class=\"text-foreground font-semibold tabular-nums\">$52,000.00 ARR</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 4: Deal Velocity -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Deal Velocity\n          </CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg\">\n            <Zap class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">22 Days</div>\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground\">Avg sales cycle · -4d vs Q2</span>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success gap-1 text-xs font-medium\"\n            >\n              <Timer class=\"size-3\" />\n              15.4% faster\n            </Badge>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">\n            Fastest Velocity: <span class=\"text-foreground font-semibold tabular-nums\">11d (Nova Fintech)</span>\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n\n    <!-- Search & Stage Filtering Bar -->\n    <div\n      class=\"border-border bg-card flex flex-col gap-3 rounded-xl border p-3.5 shadow-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"relative w-full max-w-sm\">\n        <Search class=\"text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Filter deals, contacts, account executives...\"\n          class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border pr-3 pl-9 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n        />\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <button\n          type=\"button\"\n          :class=\"\n            cn(\n              'focus-visible:ring-ring rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n              stageFilter === 'all'\n                ? 'bg-primary text-primary-foreground'\n                : 'bg-muted/60 text-muted-foreground hover:bg-accent hover:text-foreground',\n            )\n          \"\n          @click=\"stageFilter = 'all'\"\n        >\n          All Stages ({{ dealsData.length }})\n        </button>\n        <button\n          v-for=\"stg in stages\"\n          :key=\"stg.id\"\n          type=\"button\"\n          :class=\"\n            cn(\n              'focus-visible:ring-ring rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n              stageFilter === stg.id\n                ? 'bg-primary text-primary-foreground'\n                : 'bg-muted/60 text-muted-foreground hover:bg-accent hover:text-foreground',\n            )\n          \"\n          @click=\"stageFilter = stg.id\"\n        >\n          {{ stg.name.split(' ')[0] }} ({{ stg.dealCountText.split(' ')[0] }})\n        </button>\n      </div>\n    </div>\n\n    <!-- 4-Stage Kanban / Pipeline Board -->\n    <div v-if=\"viewMode === 'kanban'\" class=\"grid grid-cols-1 items-start gap-4 md:grid-cols-2 xl:grid-cols-4\">\n      <div\n        v-for=\"stg in stages\"\n        :key=\"stg.id\"\n        class=\"border-border/80 bg-muted/30 flex flex-col gap-3 rounded-xl border p-3\"\n      >\n        <!-- Stage Column Header -->\n        <div class=\"border-border/60 bg-card space-y-2 rounded-lg border p-3 shadow-xs\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <span :class=\"cn('size-2.5 rounded-full', stg.accentColor)\" />\n              <h2 class=\"text-foreground line-clamp-1 text-xs font-semibold tracking-tight\">\n                {{ stg.name }}\n              </h2>\n            </div>\n            <Badge wrap variant=\"outline\" :class=\"cn('text-xs font-semibold tabular-nums', stg.badgeVariant)\">\n              {{ stg.dealCountText }}\n            </Badge>\n          </div>\n\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"text-foreground font-bold tabular-nums\">{{ stg.totalValueText }}</span>\n            <span class=\"text-success inline-flex items-center gap-1 font-medium\">\n              <Sparkles class=\"size-3\" />\n              {{ stg.avgAiScoreText }}\n            </span>\n          </div>\n\n          <!-- Stage Progress Meter -->\n          <div class=\"space-y-1 pt-1\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Stage {{ stages.indexOf(stg) + 1 }} of 4</span>\n              <span class=\"text-foreground font-medium tabular-nums\">{{ stg.progressValue }}%</span>\n            </div>\n            <Progress :model-value=\"stg.progressValue\" class=\"h-1.5\" />\n          </div>\n        </div>\n\n        <!-- Stage Deal Cards -->\n        <div class=\"flex flex-col gap-3\">\n          <div\n            v-for=\"deal in getStageDeals(stg.id)\"\n            :key=\"deal.id\"\n            role=\"button\"\n            tabindex=\"0\"\n            :aria-pressed=\"selectedDealId === deal.id\"\n            :class=\"\n              cn(\n                'group border-border bg-card hover:border-primary/50 focus-visible:ring-ring relative flex cursor-pointer flex-col gap-3 rounded-lg border p-3.5 shadow-xs transition-colors duration-150 hover:shadow-sm focus-visible:ring-2 focus-visible:outline-none',\n                selectedDealId === deal.id && 'ring-primary border-primary ring-2',\n              )\n            \"\n            @click=\"handleSelectDeal(deal.id)\"\n            @keydown.enter=\"handleSelectDeal(deal.id)\"\n            @keydown.space.prevent=\"handleSelectDeal(deal.id)\"\n          >\n            <!-- Card Header: Avatar, Company, Tier & Action -->\n            <div class=\"flex flex-wrap items-start justify-between gap-2\">\n              <div class=\"flex items-center gap-2.5\">\n                <Avatar class=\"border-border/50 size-8 rounded-lg border\">\n                  <AvatarFallback :class=\"cn('rounded-lg text-xs font-bold', deal.avatarBg)\">\n                    {{ deal.companyInitials }}\n                  </AvatarFallback>\n                </Avatar>\n                <div>\n                  <h3 class=\"text-foreground text-xs font-bold\">\n                    {{ deal.company }}\n                  </h3>\n                  <p class=\"text-muted-foreground text-xs\">\n                    {{ deal.tier }}\n                  </p>\n                </div>\n              </div>\n\n              <!-- AI Score or Emerald Win Badge -->\n              <div class=\"flex flex-col items-end gap-1\">\n                <Badge\n                  wrap\n                  v-if=\"deal.isWinReady\"\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/15 text-success gap-1 text-xs font-semibold\"\n                >\n                  <CheckCircle2 class=\"text-success size-3\" />\n                  Win Ready\n                </Badge>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  :class=\"cn('gap-1 text-xs font-semibold tabular-nums', getAiScoreClass(deal.aiWinScore))\"\n                >\n                  <Sparkles class=\"size-3\" />\n                  {{ deal.aiWinScore }}% AI Score\n                </Badge>\n              </div>\n            </div>\n\n            <!-- Deal Name & ARR Value -->\n            <div class=\"space-y-1\">\n              <p class=\"text-foreground line-clamp-1 text-xs font-medium tracking-tight\">\n                {{ deal.dealName }}\n              </p>\n              <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <span class=\"text-foreground text-base font-bold tabular-nums\">\n                  {{ deal.valueFormatted }}\n                </span>\n                <span class=\"text-muted-foreground text-xs tabular-nums\">\n                  Close: {{ deal.closeDate }} ({{ deal.daysToClose }})\n                </span>\n              </div>\n            </div>\n\n            <!-- Stage Progress Bar -->\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span>Momentum</span>\n                <span class=\"text-foreground font-medium tabular-nums\">{{ deal.stageProgress }}%</span>\n              </div>\n              <Progress :model-value=\"deal.stageProgress\" class=\"h-1.5\" />\n            </div>\n\n            <!-- Contact & Owner -->\n            <div class=\"text-muted-foreground border-border/60 flex items-center justify-between border-t pt-1 text-xs\">\n              <div class=\"flex items-center gap-1.5\">\n                <User class=\"text-muted-foreground size-3.5\" />\n                <span class=\"max-w-[110px] truncate\">{{ deal.contactName }} ({{ deal.contactRole }})</span>\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <span\n                  class=\"bg-muted text-foreground inline-flex size-5 items-center justify-center rounded-full text-xs font-semibold\"\n                >\n                  {{ deal.ownerInitials }}\n                </span>\n              </div>\n            </div>\n\n            <!-- AI Recommended Next Step -->\n            <div class=\"border-border/60 bg-muted/40 text-muted-foreground rounded-md border p-2 text-xs\">\n              <div class=\"flex items-start gap-1.5\">\n                <Wand2 class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n                <span class=\"line-clamp-2 leading-relaxed\">\n                  <strong class=\"text-foreground font-semibold\">AI Next Action:</strong> {{ deal.nextStep }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div\n            v-if=\"getStageDeals(stg.id).length === 0\"\n            class=\"border-border text-muted-foreground flex flex-col items-center justify-center rounded-lg border border-dashed p-6 text-center text-xs\"\n          >\n            <p>No matching deals in this stage</p>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Table View Mode -->\n    <div v-else class=\"border-border bg-card overflow-hidden rounded-xl border shadow-xs\">\n      <div class=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"min-w-[240px]\">Account & Deal</TableHead>\n              <TableHead>Stage</TableHead>\n              <TableHead class=\"text-right\">ARR Value</TableHead>\n              <TableHead>AI Win Score</TableHead>\n              <TableHead class=\"min-w-[180px]\">Key Contact</TableHead>\n              <TableHead>AE Owner</TableHead>\n              <TableHead>Close Date</TableHead>\n              <TableHead class=\"min-w-[240px]\">AI Next Action</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow\n              v-for=\"deal in filteredDeals\"\n              :key=\"deal.id\"\n              tabindex=\"0\"\n              class=\"hover:bg-muted/40 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              @click=\"handleSelectDeal(deal.id)\"\n              @keydown.enter=\"handleSelectDeal(deal.id)\"\n              @keydown.space.prevent=\"handleSelectDeal(deal.id)\"\n            >\n              <TableCell>\n                <div class=\"flex items-center gap-3\">\n                  <Avatar class=\"border-border/50 size-8 rounded-lg border\">\n                    <AvatarFallback :class=\"cn('rounded-lg text-xs font-bold', deal.avatarBg)\">\n                      {{ deal.companyInitials }}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"space-y-0.5\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"text-foreground text-xs font-semibold\">{{ deal.company }}</span>\n                      <Badge wrap variant=\"secondary\" class=\"px-1.5 py-0 text-xs\">{{ deal.tier }}</Badge>\n                      <Badge\n                        wrap\n                        v-if=\"deal.isWinReady\"\n                        variant=\"outline\"\n                        class=\"border-success/30 bg-success/15 text-success px-1.5 py-0 text-xs font-medium\"\n                      >\n                        Win Ready\n                      </Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">{{ deal.dealName }}</p>\n                  </div>\n                </div>\n              </TableCell>\n\n              <TableCell>\n                <div class=\"space-y-1\">\n                  <span class=\"text-foreground text-xs font-medium\">{{ deal.stageName }}</span>\n                  <Progress :model-value=\"deal.stageProgress\" class=\"h-1.5 w-24\" />\n                </div>\n              </TableCell>\n\n              <TableCell class=\"text-foreground text-right text-xs font-bold tabular-nums\">\n                {{ deal.valueFormatted }}\n              </TableCell>\n\n              <TableCell>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  :class=\"cn('gap-1 text-xs font-semibold tabular-nums', getAiScoreClass(deal.aiWinScore))\"\n                >\n                  <Sparkles class=\"size-3\" />\n                  {{ deal.aiWinScore }}%\n                </Badge>\n              </TableCell>\n\n              <TableCell>\n                <div class=\"text-xs\">\n                  <p class=\"text-foreground font-medium\">{{ deal.contactName }}</p>\n                  <p class=\"text-muted-foreground\">{{ deal.contactRole }}</p>\n                </div>\n              </TableCell>\n\n              <TableCell>\n                <span class=\"text-foreground text-xs font-medium\">{{ deal.ownerName }}</span>\n              </TableCell>\n\n              <TableCell>\n                <div class=\"text-xs tabular-nums\">\n                  <p class=\"text-foreground font-medium\">{{ deal.closeDate }}</p>\n                  <p class=\"text-muted-foreground\">{{ deal.daysToClose }}</p>\n                </div>\n              </TableCell>\n\n              <TableCell>\n                <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                  <Wand2 class=\"text-primary size-3.5 shrink-0\" />\n                  <span class=\"max-w-[220px] truncate\">{{ deal.nextStep }}</span>\n                </div>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n\n      <div class=\"border-border text-muted-foreground flex items-center justify-between border-t p-3 text-xs\">\n        <span\n          >Showing <strong class=\"text-foreground\">{{ filteredDeals.length }}</strong> of\n          {{ dealsData.length }} deals</span\n        >\n        <span>Pipeline Velocity Index: <strong class=\"text-foreground\">68.4% AI Score Average</strong></span>\n      </div>\n    </div>\n\n    <!-- Recent Deal Activities & AI Meeting Insights Card -->\n    <section v-if=\"props.showInsights\" aria-label=\"AI Meeting Insights & Deal Activities\" class=\"space-y-4\">\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader\n          class=\"border-border flex flex-col gap-2 border-b pb-4 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                <BrainCircuit class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-foreground text-base font-bold\">\n                Recent Deal Activities & AI Meeting Insights\n              </CardTitle>\n            </div>\n            <CardDescription class=\"text-muted-foreground text-xs\">\n              Automated multi-speaker transcript intelligence, buyer sentiment scoring, and next-best actions\n            </CardDescription>\n          </div>\n          <Badge\n            wrap\n            variant=\"outline\"\n            class=\"border-success/20 bg-success/10 text-success text-success gap-1.5 self-start text-xs font-semibold sm:self-center\"\n          >\n            <Sparkles class=\"size-3\" />\n            3 Executive Meetings Processed Today\n          </Badge>\n        </CardHeader>\n\n        <CardContent class=\"grid grid-cols-1 gap-4 pt-6 lg:grid-cols-3\">\n          <div\n            v-for=\"insight in meetingInsights\"\n            :key=\"insight.id\"\n            class=\"border-border bg-card hover:border-primary/40 flex flex-col justify-between space-y-4 rounded-xl border p-4 shadow-xs transition-colors\"\n          >\n            <!-- Top meta: Company, Time, Buying Intent -->\n            <div class=\"space-y-3\">\n              <div class=\"flex flex-wrap items-start justify-between gap-2\">\n                <div class=\"flex items-center gap-2.5\">\n                  <Avatar class=\"border-border/60 size-9 rounded-lg border\">\n                    <AvatarFallback :class=\"cn('rounded-lg text-xs font-bold', insight.avatarBg)\">\n                      {{ insight.companyInitials }}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <h4 class=\"text-foreground text-xs font-bold\">\n                      {{ insight.company }}\n                    </h4>\n                    <p class=\"text-muted-foreground text-xs\">{{ insight.platform }} · {{ insight.duration }}</p>\n                  </div>\n                </div>\n\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  class=\"border-success/20 bg-success/10 text-success text-success gap-1 text-xs font-semibold tabular-nums\"\n                >\n                  <Sparkles class=\"text-success size-3\" />\n                  {{ insight.buyingIntentLabel }}\n                </Badge>\n              </div>\n\n              <!-- Meeting Title -->\n              <div>\n                <h5 class=\"text-foreground text-xs font-semibold tracking-tight\">\n                  {{ insight.meetingTitle }}\n                </h5>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">\n                  {{ insight.timeAgo }}\n                </p>\n              </div>\n\n              <!-- Attendees Pill Group -->\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\"\n                  >Stakeholders & Reps</span\n                >\n                <div class=\"flex flex-wrap gap-1\">\n                  <span\n                    v-for=\"att in insight.attendees\"\n                    :key=\"att\"\n                    class=\"bg-muted/60 text-foreground inline-flex items-center rounded-md px-2 py-0.5 text-xs\"\n                  >\n                    {{ att }}\n                  </span>\n                </div>\n              </div>\n\n              <!-- AI Key Takeaways -->\n              <div class=\"bg-muted/40 border-border/50 space-y-1.5 rounded-lg border p-3\">\n                <div class=\"flex items-center justify-between text-xs\">\n                  <span class=\"text-foreground flex items-center gap-1.5 font-semibold\">\n                    <Bot class=\"text-primary size-3.5\" />\n                    AI Detected Sentiment\n                  </span>\n                  <span class=\"text-success text-xs font-semibold\">\n                    {{ insight.sentimentScore }}\n                  </span>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  {{ insight.keyTakeaways }}\n                </p>\n              </div>\n\n              <!-- Recommended Next Step -->\n              <div class=\"bg-primary/5 border-primary/20 space-y-1 rounded-lg border p-3\">\n                <div class=\"text-primary flex items-center gap-1 text-xs font-semibold\">\n                  <Wand2 class=\"size-3.5\" />\n                  AI Next Recommendation\n                </div>\n                <p class=\"text-foreground text-xs leading-relaxed\">\n                  {{ insight.aiRecommendedAction }}\n                </p>\n              </div>\n            </div>\n\n            <!-- Action Buttons Footer -->\n            <div class=\"border-border/60 flex items-center justify-between gap-2 border-t pt-2\">\n              <Button size=\"sm\" variant=\"default\" class=\"min-w-0 flex-1 gap-1.5 text-xs font-medium\">\n                <FileCheck class=\"size-3.5\" />\n                {{ insight.primaryActionLabel }}\n              </Button>\n              <Button size=\"sm\" variant=\"outline\" class=\"shrink-0 gap-1 text-xs\">\n                <Video class=\"size-3.5\" />\n                Recording\n              </Button>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AiCrmPipelineDashboard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "High-craft AI CRM deal pipeline, deal velocity, AI win probability scoring, and sales activity tracker inspired by Wise / revenue intelligence platforms. Features revenue velocity metrics, 4-stage pipeline Kanban board with predictive win scores, deal progress bars, and AI meeting summaries with buying intent detection.",
  "categories": [
    "marketing",
    "dashboard",
    "data"
  ]
}