Certificate - ${student.name}

/* eslint-disable @next/next/no-img-element */ "use client"; import { X, ZoomIn, ZoomOut, Download, Eye } from "lucide-react"; import { useState } from "react"; import { Student } from "../admin-students/types/admin-students.types"; import { CertificateQR, CertificateQRHidden } from "../QR/CertificateQR"; export const CertificateModal = ({ student, onClose, }: { student: Student; onClose: () => void; }) => { const [scale, setScale] = useState(1); const slNo = student.studentId?.replace("STU-", "") || "—"; const today = new Date().toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric", }); const monthName = (m: string | number) => { const months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const idx = parseInt(String(m)) - 1; return months[idx] ?? m; }; const P = { slNo: { top: "37.9%", left: "17%" }, regNo: { top: "37.2%", left: "74.5%" }, session: { top: "41.8%", left: "70.5%" }, name: { top: "43.7%", left: "32.0%" }, father: { top: "48.3%", left: "28.0%" }, mother: { top: "53.4%", left: "18.5%" }, institute: { top: "58%", left: "19.5%" }, roll: { top: "63.2%", left: "27.0%" }, qual: { top: "63.2%", left: "50.0%" }, exam: { top: "67.8%", left: "41.5%" }, cgpa: { top: "68%", left: "77.5%" }, date1: { top: "80.2%", left: "25.0%" }, date2: { top: "82%", left: "18.5%" }, qr: { top: "23%", left: "80%" }, }; const handleDownload = () => { const printWindow = window.open("", "_blank"); if (!printWindow) return; const qrSvgEl = document.getElementById("certificate-qr-code"); const qrSvgString = qrSvgEl ? qrSvgEl.outerHTML : ""; printWindow.document.write(` Certificate - ${student.name}

${slNo}

${student.regNumber || "—"}

${monthName(student.month1)} - ${monthName(student.month2)} ${student.year1}

${student.name || "—"}

${student.fatherName || "—"}

${student.motherName || "—"}

${student.institute || "—"}

${student.roll || "—"}

${student.educationQualification || "—"}

${monthName(student.month1)} ${student.year1}

—

${today}

${qrSvgString} Verify Online

`); printWindow.document.close(); }; const fieldStyle = ( top: string, left: string, extra?: React.CSSProperties, ): React.CSSProperties => ({ position: "absolute" as const, top, left, fontSize: "0.9vw", fontWeight: 700, fontStyle: "italic" as const, color: "#000", ...extra, }); return (

{/* ── Header ── */}

Certificate Preview

{student.name} · {student.regNumber}

{Math.round(scale * 100)}%

{/* ── Preview ── */}

{/* SL No */}

{slNo}

{/* Registration No */}

{student.regNumber || "—"}

{/* Session */}

{monthName(student.month1)} - {monthName(student.month2)}{" "} {student.year1}

{/* Name */}

{student.name || "—"}

{/* Father */}

{student.fatherName || "—"}

{/* Mother */}

{student.motherName || "—"}

{/* Institute */}

{student.institute || "—"}

{/* Roll */}

{student.roll || "—"}

{/* Qualification */}

{student.educationQualification || "—"}

{/* Exam month year */}

{monthName(student.month1)} {student.year1}

{/* CGPA */}

—

{/* Dates */}

{today}

{/* QR Code */}

{/* ── Footer ── */}

{/* Hidden QR for PDF download – must stay in DOM */}

); };