{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "training-compliance-tracker",
  "title": "Training Compliance Tracker",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/training-compliance-tracker/TrainingComplianceTracker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  Award,\n  BadgeCheck,\n  Building2,\n  CalendarClock,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Download,\n  FileCheck,\n  FileDown,\n  PlayCircle,\n  RefreshCw,\n  RotateCcw,\n  Search,\n  Share2,\n  Shield,\n  ShieldCheck,\n  Users,\n  X,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface ComplianceCourse {\n  id: string\n  code: string\n  title: string\n  category: string\n  categoryKey: 'security' | 'ethics' | 'governance' | 'privacy' | 'finance'\n  standard: string\n  duration: string\n  durationHours: number\n  score: number\n  scoreStatus: string\n  completionDate: string\n  expirationDate: string\n  validityMonths: number\n  daysUntilExpiry: number\n  credentialId: string\n  sha256Digest: string\n  verified: boolean\n  instructor: string\n  accreditationBody: string\n  description: string\n}\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  defaultFilter?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  defaultFilter: 'all',\n})\n\nconst coursesData: ComplianceCourse[] = [\n  {\n    id: 'course-sec-201',\n    code: 'SEC-201',\n    title: 'Information Security & Data Protection (SOC2 / ISO 27001)',\n    category: 'Security & Privacy',\n    categoryKey: 'security',\n    standard: 'AICPA SOC 2 Type II (CC6.1–CC6.8) & ISO/IEC 27001:2022 ISMS',\n    duration: '1.5 Hours · Video + Exam',\n    durationHours: 1.5,\n    score: 100,\n    scoreStatus: '100% · Passed',\n    completionDate: 'Aug 10, 2026',\n    expirationDate: 'Aug 10, 2027',\n    validityMonths: 12,\n    daysUntilExpiry: 354,\n    credentialId: 'CERT-SEC-8921',\n    sha256Digest: '7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069',\n    verified: true,\n    instructor: 'Dr. Marcus Vance (Chief Information Security Officer)',\n    accreditationBody: 'AICPA & International Organization for Standardization (ISO)',\n    description:\n      'Covers zero-trust access, threat modeling, cryptographic key storage, cloud security postures, automated patch cycles, and incident response SLAs.',\n  },\n  {\n    id: 'course-eth-104',\n    code: 'ETH-104',\n    title: 'Workplace Harassment Prevention (California AB 1825)',\n    category: 'Ethics & Legal',\n    categoryKey: 'ethics',\n    standard: 'California Government Code § 12950.1 / AB 1825 & SB 1343',\n    duration: '2.0 Hours · Interactive Scenario',\n    durationHours: 2.0,\n    score: 100,\n    scoreStatus: '100% · Passed',\n    completionDate: 'Jul 14, 2026',\n    expirationDate: 'Jul 14, 2027',\n    validityMonths: 12,\n    daysUntilExpiry: 327,\n    credentialId: 'CERT-ETH-4412',\n    sha256Digest: '3d9e8471b0219ca66219f85c18174a10df84b1fa3d677284addd200126d83120',\n    verified: true,\n    instructor: 'Sarah Jenkins, Esq. (Director of People & Legal Compliance)',\n    accreditationBody: 'California Civil Rights Department (CRD / DFEH)',\n    description:\n      'Mandatory supervisory training on workplace culture, protected characteristics, bystander intervention techniques, retaliation prevention, and complaint escalations.',\n  },\n  {\n    id: 'course-gov-302',\n    code: 'GOV-302',\n    title: 'Anti-Bribery & Foreign Corrupt Practices Act (FCPA)',\n    category: 'Corporate Governance',\n    categoryKey: 'governance',\n    standard: 'US Foreign Corrupt Practices Act (15 U.S.C. § 78dd-1) & OECD Guidelines',\n    duration: '1.0 Hour · Case Studies + Exam',\n    durationHours: 1.0,\n    score: 96,\n    scoreStatus: '96% · Passed',\n    completionDate: 'Apr 15, 2026',\n    expirationDate: 'Apr 15, 2027',\n    validityMonths: 12,\n    daysUntilExpiry: 237,\n    credentialId: 'CERT-GOV-3108',\n    sha256Digest: '19fa4429bb56f082c18148a1d65dfc2d4b1fa3d677284addd200126d409218a1',\n    verified: true,\n    instructor: 'David K. Thorne (Global Ethics & Trade Compliance Counsel)',\n    accreditationBody: 'U.S. Department of Justice & OECD Anti-Bribery Directorate',\n    description:\n      'Anti-corruption controls, third-party intermediary vetting, prohibition of facilitation payments, gift/hospitality thresholds, and internal books and records integrity.',\n  },\n  {\n    id: 'course-reg-205',\n    code: 'REG-205',\n    title: 'HIPAA Security & Health Privacy Standards',\n    category: 'Regulatory & Privacy',\n    categoryKey: 'privacy',\n    standard: '45 CFR Part 160 & Part 164 Subparts A, C, and E (ePHI Safeguards)',\n    duration: '1.0 Hour · Video + Assessment',\n    durationHours: 1.0,\n    score: 98,\n    scoreStatus: '98% · Passed',\n    completionDate: 'Jun 02, 2026',\n    expirationDate: 'Jun 02, 2027',\n    validityMonths: 12,\n    daysUntilExpiry: 285,\n    credentialId: 'CERT-HPA-7729',\n    sha256Digest: '55ca0982df43b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200',\n    verified: true,\n    instructor: 'Rachel Sterling (Healthcare Privacy & HIPAA Compliance Officer)',\n    accreditationBody: 'U.S. Department of Health & Human Services (HHS OCR)',\n    description:\n      'Handling of Protected Health Information (PHI/ePHI), minimum necessary standard, physical and technical safeguards, Business Associate Agreements, and breach notifications.',\n  },\n  {\n    id: 'course-fin-401',\n    code: 'FIN-401',\n    title: 'Insider Trading & Fair Disclosure (SEC)',\n    category: 'Financial Compliance',\n    categoryKey: 'finance',\n    standard: 'Securities Exchange Act Rule 10b-5 & SEC Regulation Fair Disclosure (Reg FD)',\n    duration: '1.0 Hour · Video + Exam',\n    durationHours: 1.0,\n    score: 100,\n    scoreStatus: '100% · Passed',\n    completionDate: 'May 19, 2026',\n    expirationDate: 'May 19, 2027',\n    validityMonths: 12,\n    daysUntilExpiry: 271,\n    credentialId: 'CERT-SEC-6043',\n    sha256Digest: '91ea2d4719fa4429bb56f082c18148a1d65dfc2d4b1fa3d677284addd200126d',\n    verified: true,\n    instructor: 'Jonathan Meyer (Chief Legal Officer & General Counsel)',\n    accreditationBody: 'U.S. Securities and Exchange Commission (SEC)',\n    description:\n      'Material Non-Public Information (MNPI) boundaries, pre-clearance procedures, quarterly trading blackouts, Rule 10b5-1 executive trading plans, and non-selective disclosure protocols.',\n  },\n]\n\nconst activeFilter = ref<string>(props.defaultFilter)\nconst searchQuery = ref<string>('')\nconst selectedCertificate = ref<ComplianceCourse | null>(null)\nconst retakeModalCourse = ref<ComplianceCourse | null>(null)\nconst isDownloadingAll = ref(false)\nconst downloadBannerMessage = ref<string | null>(null)\nconst copiedCertId = ref(false)\nconst copiedDigest = ref(false)\nconst copiedVerifyUrl = ref(false)\nconst retakeSuccessMessage = ref<string | null>(null)\n\nconst filterCategories = [\n  { id: 'all', label: 'All Modules', count: 5 },\n  { id: 'security', label: 'Security & Privacy', count: 2 },\n  { id: 'ethics', label: 'Ethics & Legal', count: 1 },\n  { id: 'governance', label: 'Corporate Governance', count: 1 },\n  { id: 'finance', label: 'Financial Compliance', count: 1 },\n]\n\nconst filteredCourses = computed(() => {\n  return coursesData.filter((course) => {\n    // Filter by category\n    let matchesCategory = true\n    if (activeFilter.value === 'security') {\n      matchesCategory = course.categoryKey === 'security' || course.categoryKey === 'privacy'\n    } else if (activeFilter.value === 'ethics') {\n      matchesCategory = course.categoryKey === 'ethics'\n    } else if (activeFilter.value === 'governance') {\n      matchesCategory = course.categoryKey === 'governance' || course.categoryKey === 'finance'\n    } else if (activeFilter.value === 'finance') {\n      matchesCategory = course.categoryKey === 'finance'\n    }\n\n    // Filter by search query\n    const query = searchQuery.value.trim().toLowerCase()\n    if (!query) return matchesCategory\n\n    const matchesSearch =\n      course.title.toLowerCase().includes(query) ||\n      course.code.toLowerCase().includes(query) ||\n      course.category.toLowerCase().includes(query) ||\n      course.standard.toLowerCase().includes(query) ||\n      course.credentialId.toLowerCase().includes(query) ||\n      course.instructor.toLowerCase().includes(query)\n\n    return matchesCategory && matchesSearch\n  })\n})\n\nfunction handleDownloadAllPdf() {\n  if (isDownloadingAll.value) return\n  isDownloadingAll.value = true\n  downloadBannerMessage.value = 'Compiling 5 verified compliance certificates into archival PDF...'\n\n  setTimeout(() => {\n    isDownloadingAll.value = false\n    downloadBannerMessage.value = '✓ Download complete: Elena_Rostova_Annual_Compliance_Certificates_2026.pdf (1.8 MB)'\n    setTimeout(() => {\n      downloadBannerMessage.value = null\n    }, 4500)\n  }, 1600)\n}\n\nfunction openCertificateModal(course: ComplianceCourse) {\n  selectedCertificate.value = course\n  copiedCertId.value = false\n  copiedDigest.value = false\n  copiedVerifyUrl.value = false\n}\n\nfunction handleDownloadAndClose() {\n  handleDownloadAllPdf()\n  closeCertificateModal()\n}\n\nfunction closeCertificateModal() {\n  selectedCertificate.value = null\n}\n\nfunction openRetakeModal(course: ComplianceCourse) {\n  retakeModalCourse.value = course\n}\n\nfunction closeRetakeModal() {\n  retakeModalCourse.value = null\n}\n\nfunction handleConfirmRetake() {\n  if (!retakeModalCourse.value) return\n  const title = retakeModalCourse.value.title\n  closeRetakeModal()\n  retakeSuccessMessage.value = `Interactive refresher environment launched for \"${title}\". Your existing credential remains valid.`\n  setTimeout(() => {\n    retakeSuccessMessage.value = null\n  }, 4500)\n}\n\nfunction copyToClipboard(text: string, type: 'certId' | 'digest' | 'url') {\n  navigator.clipboard?.writeText(text)\n  if (type === 'certId') {\n    copiedCertId.value = true\n    setTimeout(() => (copiedCertId.value = false), 2000)\n  } else if (type === 'digest') {\n    copiedDigest.value = true\n    setTimeout(() => (copiedDigest.value = false), 2000)\n  } else if (type === 'url') {\n    copiedVerifyUrl.value = true\n    setTimeout(() => (copiedVerifyUrl.value = false), 2000)\n  }\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    if (selectedCertificate.value) closeCertificateModal()\n    if (retakeModalCourse.value) closeRetakeModal()\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', handleKeyDown)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', handleKeyDown)\n})\n</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-5 sm:p-6\">\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Left: Title, Employee Persona, and Department Details -->\n          <div class=\"space-y-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"text-muted-foreground text-xs font-medium\"> Enterprise HRMS & Regulatory Assurance </span>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                FY 2026–2027 Annual Cycle\n              </Badge>\n            </div>\n\n            <div>\n              <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                Mandatory Compliance Training & Certifications\n              </h2>\n              <p class=\"text-muted-foreground mt-1 text-sm\">\n                Official employee regulatory transcripts, verified digital credentials, and annual recertification\n                schedules.\n              </p>\n            </div>\n\n            <!-- Employee Persona Tag -->\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 pt-1 text-xs\">\n              <div\n                class=\"border-border bg-muted/40 text-foreground flex items-center gap-2 rounded-md border px-2.5 py-1.5 font-medium\"\n              >\n                <div\n                  class=\"bg-primary/10 text-primary flex size-5 items-center justify-center rounded-full text-xs font-bold\"\n                >\n                  ER\n                </div>\n                <span>Elena Rostova · Senior Staff Engineer</span>\n              </div>\n              <div class=\"flex items-center gap-1.5 font-mono tabular-nums\">\n                <span class=\"text-muted-foreground\">ID:</span>\n                <span class=\"text-foreground font-medium\">EMP-4092</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-3.5\" />\n              <div class=\"flex items-center gap-1\">\n                <Building2 class=\"text-muted-foreground size-3.5\" />\n                <span>Core Platform Infrastructure</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-3.5\" />\n              <div class=\"flex items-center gap-1\">\n                <span>San Francisco, CA (HQ)</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: 100% Compliant Status Pill + Download Action Button -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center lg:flex-col lg:items-end\">\n            <div\n              class=\"border-success/30 bg-success/10 text-success dark:bg-success/10 text-success inline-flex items-center gap-2.5 rounded-lg border px-3.5 py-2 text-xs font-semibold shadow-xs\"\n            >\n              <ShieldCheck class=\"text-success size-4.5 shrink-0\" />\n              <div class=\"flex flex-col\">\n                <span>100% Compliant · All 5 Annual Certifications Valid</span>\n                <span class=\"text-success/90 text-xs font-normal\"> Zero overdue requirements · Audit attested </span>\n              </div>\n            </div>\n\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"hover:bg-accent gap-2 shadow-xs\"\n              :disabled=\"isDownloadingAll\"\n              @click=\"handleDownloadAllPdf\"\n            >\n              <RefreshCw v-if=\"isDownloadingAll\" class=\"size-3.5 animate-spin\" />\n              <FileDown v-else class=\"text-foreground size-3.5\" />\n              <span>{{ isDownloadingAll ? 'Generating PDF Bundle...' : 'Download All Certificates PDF' }}</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Dynamic download notification banner -->\n        <div\n          v-if=\"downloadBannerMessage\"\n          class=\"border-success/30 bg-success/10 text-success dark:bg-success/10 dark:text-foreground mt-4 flex items-center gap-2 rounded-md border p-2.5 text-xs transition-colors\"\n        >\n          <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n          <span>{{ downloadBannerMessage }}</span>\n        </div>\n\n        <!-- Retake success toast notification -->\n        <div\n          v-if=\"retakeSuccessMessage\"\n          class=\"border-info/30 bg-info/10 text-info dark:bg-info/10 dark:text-foreground mt-4 flex items-center gap-2 rounded-md border p-2.5 text-xs transition-colors\"\n        >\n          <RotateCcw class=\"text-info size-4 shrink-0\" />\n          <span>{{ retakeSuccessMessage }}</span>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Training Overview KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Completed Certifications -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Completed Certifications </CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-md\">\n            <Award class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              class=\"text-foreground flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\"\n            >\n              5 / 5\n            </div>\n            <p class=\"text-muted-foreground text-xs\">Modules Completed · 100% Finished</p>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"100\" class=\"bg-success/20 h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"text-success font-medium\">SOC2 & ISO Ready</span>\n              <span class=\"font-mono tabular-nums\">5/5 passed</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Total Training Hours -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Total Training Hours </CardTitle>\n          <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-md\">\n            <Clock class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              class=\"text-foreground flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\"\n            >\n              6.5\n              <span class=\"text-muted-foreground text-sm font-normal\">Hours</span>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">6.5 Hours Logged in 2026</p>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"100\" class=\"bg-info/20 h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"text-info font-medium\">Quota: 6.0h Target</span>\n              <span class=\"font-mono tabular-nums\">108% logged</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Next Renewal Due -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Next Renewal Due </CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n            <CalendarClock class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground font-mono text-lg font-bold tracking-tight tabular-nums sm:text-xl\">\n              April 15, 2027\n            </div>\n            <p class=\"text-warning text-xs font-medium\">In 8 months · Earliest Renewal</p>\n          </div>\n          <div class=\"border-border bg-muted/40 flex items-center justify-between rounded border px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground truncate\">FCPA Anti-Bribery</span>\n            <Badge wrap variant=\"outline\" class=\"border-warning/30 text-warning font-mono text-xs\"> 237 days </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Company-Wide Compliance -->\n      <Card\n        class=\"border-border bg-card shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\"> Company-Wide Compliance </CardTitle>\n          <div class=\"bg-chart-1/10 text-chart-1 flex size-8 items-center justify-center rounded-md\">\n            <Users class=\"size-4.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div\n              class=\"text-foreground flex items-baseline gap-1.5 font-mono text-2xl font-bold tracking-tight tabular-nums\"\n            >\n              98.4%\n            </div>\n            <p class=\"text-muted-foreground text-xs\">98.4% Staff Certified (1,420/1,443)</p>\n          </div>\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"98.4\" class=\"bg-chart-1/20 h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"text-chart-1 font-medium\">+1.2% this quarter</span>\n              <span class=\"font-mono tabular-nums\">23 pending</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Filter Toolbar & Search -->\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <!-- Category Filter Pills -->\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <button\n          v-for=\"cat in filterCategories\"\n          :key=\"cat.id\"\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              activeFilter === cat.id\n                ? 'bg-primary text-primary-foreground shadow-xs'\n                : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground border',\n            )\n          \"\n          @click=\"activeFilter = cat.id\"\n        >\n          <span>{{ cat.label }}</span>\n          <span\n            :class=\"\n              cn(\n                'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n                activeFilter === cat.id\n                  ? 'bg-primary-foreground/20 text-primary-foreground'\n                  : 'bg-muted text-muted-foreground',\n              )\n            \"\n          >\n            {{ cat.count }}\n          </span>\n        </button>\n      </div>\n\n      <!-- Search Input -->\n      <div class=\"relative w-full sm:w-64\">\n        <Search class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Filter courses...\"\n          class=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full min-w-0 rounded-md border pr-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n        />\n        <button\n          aria-label=\"Clear search\"\n          v-if=\"searchQuery\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2\"\n          @click=\"searchQuery = ''\"\n        >\n          <X class=\"size-3.5\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Mandatory Compliance Modules Table Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-foreground text-base font-semibold tracking-tight\">\n              Mandatory Compliance Modules\n            </CardTitle>\n            <CardDescription class=\"text-muted-foreground text-xs\">\n              Annual regulatory curriculum required under corporate governance and SOC 2 / ISO 27001 audit controls.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2 pt-2 sm:pt-0\">\n            <span class=\"text-muted-foreground text-xs\">\n              Showing\n              <span class=\"text-foreground font-mono font-medium tabular-nums\">{{ filteredCourses.length }}</span> of\n              <span class=\"text-foreground font-mono font-medium tabular-nums\">5</span> modules\n            </span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow class=\"hover:bg-transparent\">\n                <TableHead\n                  class=\"text-muted-foreground min-w-[280px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Course Title & Category\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[140px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Duration\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[140px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Score on Final Assessment\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[120px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Completion Date\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[120px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Expiration Date\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[160px] py-3 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Certificate Badge\n                </TableHead>\n                <TableHead\n                  class=\"text-muted-foreground min-w-[180px] py-3 text-right text-xs font-semibold tracking-wider uppercase\"\n                >\n                  Actions\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n\n            <TableBody>\n              <TableRow v-for=\"course in filteredCourses\" :key=\"course.id\" class=\"hover:bg-muted/30 transition-colors\">\n                <!-- Course Title & Category -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-medium\">\n                        {{ course.title }}\n                      </span>\n                    </div>\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <Badge wrap variant=\"secondary\" class=\"text-xs font-medium\">\n                        {{ course.category }}\n                      </Badge>\n                      <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                        Code: {{ course.code }}\n                      </span>\n                      <span class=\"text-muted-foreground max-w-[200px] truncate text-xs\" :title=\"course.standard\">\n                        {{ course.standard }}\n                      </span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Duration -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"text-foreground flex items-center gap-1.5 font-mono text-xs tabular-nums\">\n                    <Clock class=\"text-muted-foreground size-3.5\" />\n                    <span>{{ course.duration }}</span>\n                  </div>\n                </TableCell>\n\n                <!-- Score on Final Assessment -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-1\">\n                    <div\n                      class=\"text-success text-success flex items-center gap-1.5 font-mono text-sm font-semibold tabular-nums\"\n                    >\n                      <CheckCircle2 class=\"size-3.5 shrink-0\" />\n                      <span>{{ course.scoreStatus }}</span>\n                    </div>\n                    <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                      <span>Pass threshold: 80%</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Completion Date -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                    {{ course.completionDate }}\n                  </div>\n                </TableCell>\n\n                <!-- Expiration Date -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                      {{ course.expirationDate }}\n                    </div>\n                    <div class=\"text-success text-success font-mono text-xs tabular-nums\">\n                      Valid ({{ course.daysUntilExpiry }}d remaining)\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Certificate Badge -->\n                <TableCell class=\"py-3.5 align-middle\">\n                  <div class=\"space-y-1\">\n                    <div\n                      class=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold\"\n                    >\n                      <BadgeCheck class=\"text-success size-3.5\" />\n                      <span>Verified Credential</span>\n                    </div>\n                    <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                      {{ course.credentialId }}\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Actions -->\n                <TableCell class=\"py-3.5 text-right align-middle\">\n                  <div class=\"flex items-center justify-end gap-1.5\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"xs\"\n                      class=\"hover:bg-accent h-7 gap-1 px-2.5 text-xs font-medium shadow-2xs\"\n                      @click=\"openCertificateModal(course)\"\n                    >\n                      <FileCheck class=\"text-muted-foreground size-3\" />\n                      <span>View Certificate</span>\n                    </Button>\n\n                    <Button\n                      variant=\"ghost\"\n                      size=\"xs\"\n                      class=\"text-muted-foreground hover:text-foreground h-7 gap-1 px-2 text-xs font-medium\"\n                      @click=\"openRetakeModal(course)\"\n                    >\n                      <RotateCcw class=\"size-3\" />\n                      <span>Retake</span>\n                    </Button>\n                  </div>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredCourses.length === 0\">\n                <TableCell colspan=\"7\" class=\"text-muted-foreground py-8 text-center text-xs\">\n                  No compliance modules match your search or filter criteria.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n\n      <!-- Trust & Accreditation Sub-Footer -->\n      <CardFooter\n        class=\"border-border bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t p-4 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <Shield class=\"text-success size-4 shrink-0\" />\n          <span> Audited & Attested by Schellman & Co., LLC for SOC 2 Type II & AICPA Security Trust Criteria. </span>\n        </div>\n        <div class=\"flex items-center gap-2 font-mono tabular-nums\">\n          <span>Ledger Sync: Aug 21, 2026 09:42 UTC</span>\n          <span class=\"text-success font-medium\">100% In-Policy</span>\n        </div>\n      </CardFooter>\n    </Card>\n\n    <!-- Certificate Inspection Modal -->\n    <div\n      v-if=\"selectedCertificate\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n      @click.self=\"closeCertificateModal\"\n    >\n      <div\n        class=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-2xl overflow-hidden rounded-xl border shadow-sm duration-200\"\n      >\n        <!-- Modal Top Bar -->\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-success/10 text-success flex size-6 items-center justify-center rounded-full\">\n              <BadgeCheck class=\"size-4\" />\n            </div>\n            <div>\n              <h3 class=\"text-foreground text-xs font-semibold\">Verified Compliance Credential</h3>\n              <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                Credential ID: {{ selectedCertificate.credentialId }}\n              </p>\n            </div>\n          </div>\n\n          <button\n            type=\"button\"\n            class=\"text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            aria-label=\"Close modal\"\n            @click=\"closeCertificateModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <!-- Certificate Body -->\n        <div class=\"space-y-5 p-6\">\n          <!-- Certificate Card Frame -->\n          <div\n            class=\"border-success/30 bg-success/5 dark:bg-success/10 relative rounded-lg border-2 border-dashed p-6 text-center\"\n          >\n            <div\n              class=\"border-success/40 bg-success/10 text-success text-success mx-auto flex size-12 items-center justify-center rounded-full border shadow-xs\"\n            >\n              <Award class=\"size-6\" />\n            </div>\n\n            <div class=\"mt-3 space-y-1\">\n              <span class=\"text-success text-xs font-semibold tracking-wide\">\n                Official Certificate of Mastery & Regulatory Compliance\n              </span>\n              <h4 class=\"text-foreground text-lg font-bold\">\n                {{ selectedCertificate.title }}\n              </h4>\n              <p class=\"text-muted-foreground text-xs\">\n                {{ selectedCertificate.standard }}\n              </p>\n            </div>\n\n            <Separator class=\"my-4\" />\n\n            <div class=\"space-y-1.5\">\n              <p class=\"text-muted-foreground text-xs\">This certifies that</p>\n              <p class=\"text-foreground text-base font-bold\">Elena Rostova</p>\n              <p class=\"text-muted-foreground text-xs\">Senior Staff Engineer · EMP-4092</p>\n              <p class=\"text-muted-foreground/90 mx-auto max-w-lg pt-1 text-xs leading-relaxed\">\n                {{ selectedCertificate.description }}\n              </p>\n            </div>\n\n            <!-- Verification Metadata Matrix -->\n            <div class=\"border-border/60 mt-5 grid grid-cols-2 gap-3 border-t pt-4 text-left sm:grid-cols-4\">\n              <div class=\"space-y-0.5\">\n                <span class=\"text-muted-foreground text-xs\">Exam Score</span>\n                <p class=\"text-success text-success font-mono text-xs font-bold tabular-nums\">\n                  {{ selectedCertificate.scoreStatus }}\n                </p>\n              </div>\n              <div class=\"space-y-0.5\">\n                <span class=\"text-muted-foreground text-xs\">Duration</span>\n                <p class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">\n                  {{ selectedCertificate.durationHours }} Hours\n                </p>\n              </div>\n              <div class=\"space-y-0.5\">\n                <span class=\"text-muted-foreground text-xs\">Issued Date</span>\n                <p class=\"text-foreground font-mono text-xs tabular-nums\">\n                  {{ selectedCertificate.completionDate }}\n                </p>\n              </div>\n              <div class=\"space-y-0.5\">\n                <span class=\"text-muted-foreground text-xs\">Valid Until</span>\n                <p class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                  {{ selectedCertificate.expirationDate }}\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Cryptographic Verification Details -->\n          <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <ShieldCheck class=\"text-success size-3.5\" />\n                <span>Cryptographic Digest (SHA-256)</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"text-primary flex items-center gap-1 text-xs hover:underline\"\n                @click=\"copyToClipboard(selectedCertificate.sha256Digest, 'digest')\"\n              >\n                <Check v-if=\"copiedDigest\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copiedDigest ? 'Copied' : 'Copy Hash' }}</span>\n              </button>\n            </div>\n            <p class=\"text-muted-foreground font-mono text-xs break-all\">\n              {{ selectedCertificate.sha256Digest }}\n            </p>\n            <div\n              class=\"border-border/50 text-muted-foreground flex flex-wrap items-center justify-between gap-2 border-t pt-1\"\n            >\n              <span>Accreditation: {{ selectedCertificate.accreditationBody }}</span>\n              <span class=\"font-mono tabular-nums\">Ledger: OpenAttestation v3</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Actions Footer -->\n        <div\n          class=\"border-border bg-muted/40 flex flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"text-xs\"\n            @click=\"copyToClipboard(`https://uipkge.dev/verify/${selectedCertificate.credentialId}`, 'url')\"\n          >\n            <Check v-if=\"copiedVerifyUrl\" class=\"text-success size-3.5\" />\n            <Share2 v-else class=\"size-3.5\" />\n            <span>{{ copiedVerifyUrl ? 'Link Copied!' : 'Copy Verification Link' }}</span>\n          </Button>\n\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"closeCertificateModal\"> Close </Button>\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"default\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs shadow-xs\"\n              @click=\"handleDownloadAndClose\"\n            >\n              <Download class=\"size-3.5\" />\n              <span>Download PDF Certificate</span>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Retake Course Confirmation Modal -->\n    <div\n      v-if=\"retakeModalCourse\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-opacity\"\n      @click.self=\"closeRetakeModal\"\n    >\n      <div\n        class=\"border-border bg-card text-card-foreground animate-in fade-in zoom-in-95 relative w-full max-w-lg overflow-hidden rounded-xl border shadow-sm duration-200\"\n      >\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-5 py-3.5\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-full\">\n              <RotateCcw class=\"size-3.5\" />\n            </div>\n            <h3 class=\"text-foreground text-sm font-bold\">Launch Refresher Assessment</h3>\n          </div>\n          <button\n            aria-label=\"Close retake modal\"\n            type=\"button\"\n            class=\"text-muted-foreground hover:bg-accent hover:text-foreground rounded-md p-1\"\n            @click=\"closeRetakeModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <div class=\"space-y-4 p-5 text-xs\">\n          <div class=\"space-y-1\">\n            <span class=\"text-muted-foreground font-mono text-xs font-medium\"\n              >Module: {{ retakeModalCourse.code }}</span\n            >\n            <h4 class=\"text-foreground text-sm font-semibold\">\n              {{ retakeModalCourse.title }}\n            </h4>\n          </div>\n\n          <div class=\"border-warning/30 bg-warning/10 text-warning rounded-md border p-3\">\n            <div class=\"flex gap-2\">\n              <AlertCircle class=\"text-warning size-4 shrink-0\" />\n              <div class=\"space-y-1 leading-relaxed\">\n                <p class=\"font-semibold\">Notice regarding existing valid credential:</p>\n                <p>\n                  Your current passing score ({{ retakeModalCourse.score }}%) and verified credential ({{\n                    retakeModalCourse.credentialId\n                  }}) will remain active and valid in company compliance audits until the new assessment is submitted.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"border-border bg-muted/30 grid grid-cols-2 gap-2 rounded-md border p-3 font-mono\">\n            <div>\n              <span class=\"text-muted-foreground\">Estimated Time:</span>\n              <p class=\"text-foreground font-semibold\">{{ retakeModalCourse.duration }}</p>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Passing Threshold:</span>\n              <p class=\"text-success font-semibold\">80% or Higher</p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"border-border bg-muted/40 flex items-center justify-end gap-2 border-t p-4\">\n          <Button aria-label=\"Close retake modal\" variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"closeRetakeModal\">\n            Cancel\n          </Button>\n          <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\" @click=\"handleConfirmRetake\">\n            <PlayCircle class=\"size-3.5\" />\n            <span>Launch Course Environment</span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TrainingComplianceTracker.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Annual mandatory employee compliance training dashboard with certification badges, renewal deadlines, assessment scorecards, verified credential preview modal, and certificate export controls.",
  "categories": [
    "hr",
    "app",
    "security"
  ]
}