Training Compliance Tracker

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface ComplianceCourse {
  id: string
  code: string
  title: string
  category: string
  categoryKey: 'security' | 'ethics' | 'governance' | 'privacy' | 'finance'
  standard: string
  duration: string
  durationHours: number
  score: number
  scoreStatus: string
  completionDate: string
  expirationDate: string
  validityMonths: number
  daysUntilExpiry: number
  credentialId: string
  sha256Digest: string
  verified: boolean
  instructor: string
  accreditationBody: string
  description: string
}

Files installed (1)

• components/blocks/TrainingComplianceTracker.tsx44.1 kB

  Copy

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

Raw manifest:https://uipkge.dev/r/react/training-compliance-tracker.json