{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "training-compliance-tracker", "title": "Training Compliance Tracker", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/training-compliance-tracker/training-compliance-tracker.component.ts", "content": "// Annual mandatory employee compliance training dashboard with certification badges,\n// renewal deadlines, assessment scorecards, verified credential preview modal, and\n// certificate export controls. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, HostListener, Input, computed, signal } from '@angular/core'\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 LucideAngularModule,\n PlayCircle,\n RefreshCw,\n RotateCcw,\n Search,\n Share2,\n Shield,\n ShieldCheck,\n Users,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-training-compliance-tracker, [ui-training-compliance-tracker]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n Enterprise HRMS & Regulatory Assurance \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
\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
\n \n \n
\n 100% Compliant · All 5 Annual Certifications Valid\n Zero overdue requirements · Audit attested\n
\n
\n\n \n @if (isDownloadingAll()) {\n \n } @else {\n \n }\n {{ isDownloadingAll() ? 'Generating PDF Bundle...' : 'Download All Certificates PDF' }}\n \n
\n
\n\n @if (downloadBannerMessage()) {\n \n \n {{ downloadBannerMessage() }}\n
\n }\n\n @if (retakeSuccessMessage()) {\n \n \n {{ retakeSuccessMessage() }}\n \n }\n \n \n\n \n
\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 \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 \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 \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 \n
\n
\n @for (cat of categories; track cat.id) {\n \n }\n
\n\n
\n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n
\n\n \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 }}\n 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 @for (course of filteredCourses(); track course.id) {\n \n \n\n \n\n \n\n \n\n \n\n \n\n \n \n }\n\n @if (filteredCourses().length === 0) {\n \n \n \n }\n \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 \n {{ course.duration }}\n
\n 		\n
\n \n \n {{ course.scoreStatus }}\n
\n
\n Pass threshold: 80%\n
\n \n 		\n
\n {{ course.completionDate }}\n
\n 		\n
\n
\n {{ course.expirationDate }}\n
\n
\n Valid ({{ course.daysUntilExpiry }}d remaining)\n
\n
\n 		\n
\n \n \n Verified Credential\n
\n
\n {{ course.credentialId }}\n
\n \n 		\n
\n \n \n View Certificate\n \n\n \n \n Retake\n \n
\n
\n No compliance modules match your search or filter criteria.\n
\n
\n
\n\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 \n @if (selectedCertificate(); as cert) {\n \n \n
\n
\n
\n \n
\n
\n

Verified Compliance Credential

\n

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

\n
\n
\n\n \n \n \n
\n\n
\n \n \n \n
\n\n
\n \n Official Certificate of Mastery & Regulatory Compliance\n \n

{{ cert.title }}

\n

{{ cert.standard }}

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

This certifies that

\n

Elena Rostova

\n

Senior Staff Engineer · EMP-4092

\n

\n {{ cert.description }}\n

\n
\n\n
\n
\n Exam Score\n

{{ cert.scoreStatus }}

\n
\n
\n Duration\n

\n {{ cert.durationHours }} Hours\n

\n
\n
\n Issued Date\n

{{ cert.completionDate }}

\n
\n
\n Valid Until\n

{{ cert.expirationDate }}

\n
\n
\n \n\n
\n
\n
\n \n Cryptographic Digest (SHA-256)\n
\n \n @if (copiedDigest()) {\n \n } @else {\n \n }\n {{ copiedDigest() ? 'Copied' : 'Copy Hash' }}\n \n
\n

{{ cert.sha256Digest }}

\n \n Accreditation: {{ cert.accreditationBody }}\n Ledger: OpenAttestation v3\n
\n \n \n\n \n \n @if (copiedVerifyUrl()) {\n \n } @else {\n \n }\n {{ copiedVerifyUrl() ? 'Link Copied!' : 'Copy Verification Link' }}\n \n\n
\n \n \n \n Download PDF Certificate\n \n
\n \n \n \n }\n\n \n @if (retakeModalCourse(); as retake) {\n \n \n
\n
\n
\n \n
\n

Launch Refresher Assessment

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

{{ retake.title }}

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

Notice regarding existing valid credential:

\n

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

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

{{ retake.duration }}

\n
\n
\n Passing Threshold:\n

80% or Higher

\n
\n
\n
\n\n
\n \n Cancel\n \n \n \n Launch Course Environment\n \n
\n \n \n }\n \n `,\n})\nexport class UiTrainingComplianceTrackerComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Award = Award\n protected readonly BadgeCheck = BadgeCheck\n protected readonly Building2 = Building2\n protected readonly CalendarClock = CalendarClock\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly FileCheck = FileCheck\n protected readonly FileDown = FileDown\n protected readonly PlayCircle = PlayCircle\n protected readonly RefreshCw = RefreshCw\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly Share2 = Share2\n protected readonly Shield = Shield\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Users = Users\n protected readonly X = X\n\n protected readonly categories = filterCategories\n\n @Input() set defaultFilter(v: string | undefined) {\n if (v !== undefined) this.activeFilter.set(v)\n }\n @Input('class') className?: string\n\n readonly activeFilter = signal('all')\n readonly searchQuery = signal('')\n readonly selectedCertificate = signal(null)\n readonly retakeModalCourse = signal(null)\n readonly isDownloadingAll = signal(false)\n readonly downloadBannerMessage = signal(null)\n readonly copiedCertId = signal(false)\n readonly copiedDigest = signal(false)\n readonly copiedVerifyUrl = signal(false)\n readonly retakeSuccessMessage = signal(null)\n\n readonly filteredCourses = computed(() => {\n const filter = this.activeFilter()\n const query = this.searchQuery().trim().toLowerCase()\n return coursesData.filter((course) => {\n let matchesCategory = true\n if (filter === 'security') {\n matchesCategory = course.categoryKey === 'security' || course.categoryKey === 'privacy'\n } else if (filter === 'ethics') {\n matchesCategory = course.categoryKey === 'ethics'\n } else if (filter === 'governance') {\n matchesCategory = course.categoryKey === 'governance' || course.categoryKey === 'finance'\n } else if (filter === 'finance') {\n matchesCategory = course.categoryKey === 'finance'\n }\n if (!query) return matchesCategory\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 return matchesCategory && matchesSearch\n })\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n filterPillClass(id: string): string {\n const isActive = this.activeFilter() === id\n return 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 isActive\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\n filterCountClass(id: string): string {\n const isActive = this.activeFilter() === id\n return cn(\n 'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n isActive ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-muted text-muted-foreground',\n )\n }\n\n handleDownloadAllPdf(): void {\n if (this.isDownloadingAll()) return\n this.isDownloadingAll.set(true)\n this.downloadBannerMessage.set('Compiling 5 verified compliance certificates into archival PDF...')\n setTimeout(() => {\n this.isDownloadingAll.set(false)\n this.downloadBannerMessage.set(\n '✓ Download complete: Elena_Rostova_Annual_Compliance_Certificates_2026.pdf (1.8 MB)',\n )\n setTimeout(() => this.downloadBannerMessage.set(null), 4500)\n }, 1600)\n }\n\n downloadFromCertificate(): void {\n this.handleDownloadAllPdf()\n this.closeCertificateModal()\n }\n\n openCertificateModal(course: ComplianceCourse): void {\n this.selectedCertificate.set(course)\n this.copiedCertId.set(false)\n this.copiedDigest.set(false)\n this.copiedVerifyUrl.set(false)\n }\n\n closeCertificateModal(): void {\n this.selectedCertificate.set(null)\n }\n\n openRetakeModal(course: ComplianceCourse): void {\n this.retakeModalCourse.set(course)\n }\n\n closeRetakeModal(): void {\n this.retakeModalCourse.set(null)\n }\n\n handleConfirmRetake(): void {\n const course = this.retakeModalCourse()\n if (!course) return\n const title = course.title\n this.closeRetakeModal()\n this.retakeSuccessMessage.set(\n `Interactive refresher environment launched for \"${title}\". Your existing credential remains valid.`,\n )\n setTimeout(() => this.retakeSuccessMessage.set(null), 4500)\n }\n\n copyToClipboard(text: string, type: 'certId' | 'digest' | 'url'): void {\n try {\n void navigator.clipboard?.writeText(text)\n } catch {\n // Clipboard unavailable — still show copied feedback.\n }\n if (type === 'certId') {\n this.copiedCertId.set(true)\n setTimeout(() => this.copiedCertId.set(false), 2000)\n } else if (type === 'digest') {\n this.copiedDigest.set(true)\n setTimeout(() => this.copiedDigest.set(false), 2000)\n } else if (type === 'url') {\n this.copiedVerifyUrl.set(true)\n setTimeout(() => this.copiedVerifyUrl.set(false), 2000)\n }\n }\n\n onOverlayClick(event: MouseEvent, which: 'certificate' | 'retake'): void {\n if (event.target === event.currentTarget) {\n if (which === 'certificate') this.closeCertificateModal()\n else this.closeRetakeModal()\n }\n }\n\n @HostListener('window:keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n if (this.selectedCertificate()) this.closeCertificateModal()\n if (this.retakeModalCourse()) this.closeRetakeModal()\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/training-compliance-tracker/training-compliance-tracker.component.ts" }, { "path": "packages/registry-angular/blocks/training-compliance-tracker/index.ts", "content": "export { UiTrainingComplianceTrackerComponent, type ComplianceCourse } from './training-compliance-tracker.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/training-compliance-tracker/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }