{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "training-compliance-tracker", "title": "Training Compliance Tracker", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/training-compliance-tracker/TrainingComplianceTracker.tsx", "content": "'use client'\n\nimport * as React from 'react'\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-react'\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\nexport interface TrainingComplianceTrackerProps {\n className?: string\n defaultFilter?: string\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 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\nexport function TrainingComplianceTracker({ className, defaultFilter = 'all' }: TrainingComplianceTrackerProps) {\n const [activeFilter, setActiveFilter] = React.useState(defaultFilter)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedCertificate, setSelectedCertificate] = React.useState(null)\n const [retakeModalCourse, setRetakeModalCourse] = React.useState(null)\n const [isDownloadingAll, setIsDownloadingAll] = React.useState(false)\n const [downloadBannerMessage, setDownloadBannerMessage] = React.useState(null)\n const [copiedCertId, setCopiedCertId] = React.useState(false)\n const [copiedDigest, setCopiedDigest] = React.useState(false)\n const [copiedVerifyUrl, setCopiedVerifyUrl] = React.useState(false)\n const [retakeSuccessMessage, setRetakeSuccessMessage] = React.useState(null)\n\n const filteredCourses = React.useMemo(() => {\n return coursesData.filter((course) => {\n let matchesCategory = true\n if (activeFilter === 'security') {\n matchesCategory = course.categoryKey === 'security' || course.categoryKey === 'privacy'\n } else if (activeFilter === 'ethics') {\n matchesCategory = course.categoryKey === 'ethics'\n } else if (activeFilter === 'governance') {\n matchesCategory = course.categoryKey === 'governance' || course.categoryKey === 'finance'\n } else if (activeFilter === 'finance') {\n matchesCategory = course.categoryKey === 'finance'\n }\n\n const query = searchQuery.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 }, [activeFilter, searchQuery])\n\n function handleDownloadAllPdf() {\n if (isDownloadingAll) return\n setIsDownloadingAll(true)\n setDownloadBannerMessage('Compiling 5 verified compliance certificates into archival PDF...')\n\n setTimeout(() => {\n setIsDownloadingAll(false)\n setDownloadBannerMessage('✓ Download complete: Elena_Rostova_Annual_Compliance_Certificates_2026.pdf (1.8 MB)')\n setTimeout(() => {\n setDownloadBannerMessage(null)\n }, 4500)\n }, 1600)\n }\n\n function openCertificateModal(course: ComplianceCourse) {\n setSelectedCertificate(course)\n setCopiedCertId(false)\n setCopiedDigest(false)\n setCopiedVerifyUrl(false)\n }\n\n function closeCertificateModal() {\n setSelectedCertificate(null)\n }\n\n function openRetakeModal(course: ComplianceCourse) {\n setRetakeModalCourse(course)\n }\n\n function closeRetakeModal() {\n setRetakeModalCourse(null)\n }\n\n function handleConfirmRetake() {\n if (!retakeModalCourse) return\n const title = retakeModalCourse.title\n closeRetakeModal()\n setRetakeSuccessMessage(\n `Interactive refresher environment launched for \"${title}\". Your existing credential remains valid.`,\n )\n setTimeout(() => {\n setRetakeSuccessMessage(null)\n }, 4500)\n }\n\n function copyToClipboard(text: string, type: 'certId' | 'digest' | 'url') {\n navigator.clipboard?.writeText(text)\n if (type === 'certId') {\n setCopiedCertId(true)\n setTimeout(() => setCopiedCertId(false), 2000)\n } else if (type === 'digest') {\n setCopiedDigest(true)\n setTimeout(() => setCopiedDigest(false), 2000)\n } else if (type === 'url') {\n setCopiedVerifyUrl(true)\n setTimeout(() => setCopiedVerifyUrl(false), 2000)\n }\n }\n\n React.useEffect(() => {\n function handleKeyDown(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n if (selectedCertificate) closeCertificateModal()\n if (retakeModalCourse) closeRetakeModal()\n }\n }\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [selectedCertificate, retakeModalCourse])\n\n return (\n
\n {/* Header Card */}\n \n \n
\n {/* Left: Title, Employee Persona, and Department Details */}\n
\n
\n \n Enterprise HRMS & Regulatory Assurance\n \n \n FY 2026–2027 Annual Cycle\n \n
\n\n
\n

\n Mandatory Compliance Training & Certifications\n

\n

\n Official employee regulatory transcripts, verified digital credentials, and annual recertification\n schedules.\n

\n
\n\n {/* Employee Persona Tag */}\n
\n
\n
\n ER\n
\n Elena Rostova · Senior Staff Engineer\n
\n
\n ID:\n EMP-4092\n
\n \n
\n \n Core Platform Infrastructure\n
\n \n
\n San Francisco, CA (HQ)\n
\n
\n
\n\n {/* Right: 100% Compliant Status Pill + Download Action Button */}\n
\n
\n \n
\n 100% Compliant · All 5 Annual Certifications Valid\n \n Zero overdue requirements · Audit attested\n \n
\n
\n\n \n {isDownloadingAll ? (\n \n ) : (\n \n )}\n {isDownloadingAll ? 'Generating PDF Bundle...' : 'Download All Certificates PDF'}\n \n
\n
\n\n {/* Dynamic download notification banner */}\n {downloadBannerMessage && (\n
\n \n {downloadBannerMessage}\n
\n )}\n\n {/* Retake success toast notification */}\n {retakeSuccessMessage && (\n
\n \n {retakeSuccessMessage}\n
\n )}\n \n \n\n {/* 4 Training Overview KPI Cards */}\n
\n {/* Card 1: Completed Certifications */}\n \n \n Completed Certifications\n
\n \n
\n \n \n
\n
\n 5 / 5\n
\n

Modules Completed · 100% Finished

\n
\n
\n \n
\n SOC2 & ISO Ready\n 5/5 passed\n
\n
\n \n \n\n {/* Card 2: Total Training Hours */}\n \n \n Total Training Hours\n
\n \n
\n \n \n
\n
\n 6.5\n Hours\n
\n

6.5 Hours Logged in 2026

\n
\n
\n \n
\n Quota: 6.0h Target\n 108% logged\n
\n
\n \n \n\n {/* Card 3: Next Renewal Due */}\n \n \n Next Renewal Due\n
\n \n
\n \n \n
\n
\n April 15, 2027\n
\n

In 8 months · Earliest Renewal

\n
\n
\n FCPA Anti-Bribery\n \n 237 days\n \n
\n \n \n\n {/* Card 4: Company-Wide Compliance */}\n \n \n Company-Wide Compliance\n
\n \n
\n \n \n
\n
\n 98.4%\n
\n

98.4% Staff Certified (1,420/1,443)

\n
\n
\n \n
\n +1.2% this quarter\n 23 pending\n
\n
\n \n \n
\n\n {/* Filter Toolbar & Search */}\n
\n {/* Category Filter Pills */}\n
\n {filterCategories.map((cat) => {\n const isActive = activeFilter === cat.id\n return (\n setActiveFilter(cat.id)}\n >\n {cat.label}\n \n {cat.count}\n \n \n )\n })}\n
\n\n {/* Search Input */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Filter courses...\"\n className=\"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 {searchQuery && (\n setSearchQuery('')}\n >\n \n \n )}\n
\n
\n\n {/* Mandatory Compliance Modules Table Card */}\n \n \n
\n
\n \n Mandatory Compliance Modules\n \n \n Annual regulatory curriculum required under corporate governance and SOC 2 / ISO 27001 audit controls.\n \n
\n
\n \n Showing{' '}\n {filteredCourses.length} of{' '}\n 5 modules\n \n
\n
\n \n\n \n
\n \n \n \n \n Course Title & Category\n \n \n Duration\n \n \n Score on Final Assessment\n \n \n Completion Date\n \n \n Expiration Date\n \n \n Certificate Badge\n \n \n Actions\n \n \n \n\n \n {filteredCourses.map((course) => (\n \n {/* Course Title & Category */}\n \n
\n
\n {{ ...course }.title}\n
\n
\n \n {course.category}\n \n \n Code: {course.code}\n \n \n {course.standard}\n \n
\n
\n \n\n {/* Duration */}\n \n
\n \n {course.duration}\n
\n \n\n {/* Score on Final Assessment */}\n \n
\n
\n \n {course.scoreStatus}\n
\n
\n Pass threshold: 80%\n
\n
\n \n\n {/* Completion Date */}\n \n
\n {course.completionDate}\n
\n \n\n {/* Expiration Date */}\n \n
\n
\n {course.expirationDate}\n
\n
\n Valid ({course.daysUntilExpiry}d remaining)\n
\n
\n \n\n {/* Certificate Badge */}\n \n
\n
\n \n Verified Credential\n
\n
\n {course.credentialId}\n
\n
\n \n\n {/* Actions */}\n \n
\n openCertificateModal(course)}\n >\n \n View Certificate\n \n\n openRetakeModal(course)}\n >\n \n Retake\n \n
\n \n \n ))}\n\n {filteredCourses.length === 0 && (\n \n \n No compliance modules match your search or filter criteria.\n \n \n )}\n \n
\n
\n \n\n {/* Trust & Accreditation Sub-Footer */}\n \n
\n \n Audited & Attested by Schellman & Co., LLC for SOC 2 Type II & AICPA Security Trust Criteria.\n
\n
\n Ledger Sync: Aug 21, 2026 09:42 UTC\n 100% In-Policy\n
\n \n \n\n {/* Certificate Inspection Modal */}\n {selectedCertificate && (\n {\n if (e.target === e.currentTarget) closeCertificateModal()\n }}\n >\n
\n {/* Modal Top Bar */}\n
\n
\n
\n \n
\n
\n

Verified Compliance Credential

\n

\n Credential ID: {selectedCertificate.credentialId}\n

\n
\n
\n\n \n \n \n
\n\n {/* Certificate Body */}\n
\n {/* Certificate Card Frame */}\n
\n
\n \n
\n\n
\n \n Official Certificate of Mastery & Regulatory Compliance\n \n

{selectedCertificate.title}

\n

{selectedCertificate.standard}

\n
\n\n \n\n
\n

This certifies that

\n

Elena Rostova

\n

Senior Staff Engineer · EMP-4092

\n

\n {selectedCertificate.description}\n

\n
\n\n {/* Verification Metadata Matrix */}\n
\n
\n Exam Score\n

\n {selectedCertificate.scoreStatus}\n

\n
\n
\n Duration\n

\n {selectedCertificate.durationHours} Hours\n

\n
\n
\n Issued Date\n

\n {selectedCertificate.completionDate}\n

\n
\n
\n Valid Until\n

\n {selectedCertificate.expirationDate}\n

\n
\n
\n
\n\n {/* Cryptographic Verification Details */}\n
\n
\n
\n \n Cryptographic Digest (SHA-256)\n
\n copyToClipboard(selectedCertificate.sha256Digest, 'digest')}\n >\n {copiedDigest ? : }\n {copiedDigest ? 'Copied' : 'Copy Hash'}\n \n
\n

{selectedCertificate.sha256Digest}

\n
\n Accreditation: {selectedCertificate.accreditationBody}\n Ledger: OpenAttestation v3\n
\n
\n
\n\n {/* Modal Actions Footer */}\n
\n copyToClipboard(`https://uipkge.dev/verify/${selectedCertificate.credentialId}`, 'url')}\n >\n {copiedVerifyUrl ? : }\n {copiedVerifyUrl ? 'Link Copied!' : 'Copy Verification Link'}\n \n\n
\n \n {\n handleDownloadAllPdf()\n closeCertificateModal()\n }}\n >\n \n Download PDF Certificate\n \n
\n
\n
\n
\n )}\n\n {/* Retake Course Confirmation Modal */}\n {retakeModalCourse && (\n {\n if (e.target === e.currentTarget) closeRetakeModal()\n }}\n >\n
\n
\n
\n
\n \n
\n

Launch Refresher Assessment

\n
\n \n \n \n
\n\n
\n
\n \n Module: {retakeModalCourse.code}\n \n

{retakeModalCourse.title}

\n
\n\n
\n
\n \n
\n

Notice regarding existing valid credential:

\n

\n Your current passing score ({retakeModalCourse.score}%) and verified credential (\n {retakeModalCourse.credentialId}) will remain active and valid in company compliance audits until\n the new assessment is submitted.\n

\n
\n
\n
\n\n
\n
\n Estimated Time:\n

{retakeModalCourse.duration}

\n
\n
\n Passing Threshold:\n

80% or Higher

\n
\n
\n
\n\n
\n \n Cancel\n \n \n
\n
\n \n )}\n \n )\n}\n\nexport default TrainingComplianceTracker\n", "type": "registry:block", "target": "~/components/blocks/TrainingComplianceTracker.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }