"use client"; // ═══════════════════════════════════════════════════════════════ // Checklist PDF preview — styled EXACTLY like the QRS NC // (Corrective & Preventive Action) template: logo header table, // #adcff6 label cells, black borders, signature table, green note. // The backend ChecklistPdfService renders the identical layout, so // what the auditor previews here is what the client receives. // ═══════════════════════════════════════════════════════════════ import React, { useRef } from "react"; export interface ChecklistPdfData { auditCode: string; companyName: string; auditLine: string; standardName: string; items: string[]; dueDate?: string | null; leadAuditorName?: string | null; } const LOGO_URL = "https://crm.qrs.ae/qrslogo.jpg"; const DOC_CSS = ` @page { size: A4; margin: 12mm; } * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 0; padding: 15px; color: #333; letter-spacing: .2px; } table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #000; padding: 8px; vertical-align: top; } .hdr .brand { text-align: center; vertical-align: middle; padding: 10px; } .hdr .brand img { height: 60px; vertical-align: middle; } .hdr .brand span { font-size: 20px; font-weight: bold; vertical-align: middle; margin-left: 10px; letter-spacing: 1px; display: inline-block; text-align: center; } .hdr .page { width: 13%; text-align: right; vertical-align: top; font-size: 10px; } .hdr .title { text-align: center; font-weight: bold; font-size: 15px; padding: 10px; } .hdr .form { text-align: right; vertical-align: bottom; font-size: 11px; } .main-table { margin: 15px 0; } .main-table th { background: #adcff6; text-align: left; width: 20%; font-size: 11px; } .main-table td { font-size: 12px; color: #0a0a0a; } .items th { background: #adcff6; font-size: 10px; } .items td { font-size: 11.5px; color: #0a0a0a; } .box { text-align: center; font-family: 'DejaVu Sans', Arial, sans-serif; font-size: 14px; } .sig th { background: none; text-align: left; width: 25%; font-size: 11px; } .sig td { width: 25%; font-size: 11.5px; color: #0a0a0a; } .footer-note { background: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-top: 15px; border: 0; } .page-number { text-align: right; font-size: 10px; margin-top: 10px; } `; export function buildChecklistDocumentHtml(d: ChecklistPdfData): string { const esc = (s: string) => String(s ?? "").replace(/&/g, "&").replace(//g, ">"); const rows = d.items .map( (text, i) => `${i + 1}.${esc(text)}□`, ) .join(""); return `
QRS QUALITY REGISTRAR
SYSTEMS 		Page 1 of 1
DOCUMENT REQUEST CHECKLIST Form
COMPANY${esc(d.companyName)}
AUDIT${esc(d.auditLine || "—")}
STANDARD${esc(d.standardName)}
DOCUMENTS${d.items.length} requested${d.dueDate ? `  ·  Due: ${esc(d.dueDate)}` : ""}
${rows}
S# DOCUMENT REQUIRED PROVIDED REMARKS
Auditor Signature:${esc(d.leadAuditorName || "")} Auditee Signature:
Date: Date:

Please upload each requested document on your QRS client portal${d.dueDate ? ` before ${esc(d.dueDate)}` : ""}. This checklist PDF is attached to your notification email for reference.

Page 1 of 1
`; } export default function ChecklistPdfPreview({ data }: { data: ChecklistPdfData }) { const html = buildChecklistDocumentHtml(data); const printing = useRef(false); const handlePrint = () => { if (printing.current) return; printing.current = true; const iframe = document.createElement("iframe"); iframe.style.position = "fixed"; iframe.style.right = "0"; iframe.style.bottom = "0"; iframe.style.width = "0"; iframe.style.height = "0"; iframe.style.border = "0"; document.body.appendChild(iframe); const doc = iframe.contentWindow?.document; if (doc) { doc.open(); doc.write(html); doc.close(); setTimeout(() => { iframe.contentWindow?.focus(); iframe.contentWindow?.print(); }, 350); } setTimeout(() => { document.body.removeChild(iframe); printing.current = false; }, 1800); }; return (