| import React, { useState } from 'react'; | |
| import { LegalCase } from '../types'; | |
| import { exportLegalCaseToPDF } from '../services/pdfService'; | |
| interface PDFExportModalProps { | |
| legalCase: LegalCase; | |
| onClose: () => void; | |
| } | |
| export const PDFExportModal: React.FC<PDFExportModalProps> = ({ legalCase, onClose }) => { | |
| const [downloading, setDownloading] = useState(false); | |
| const handleDownloadDirectPDF = () => { | |
| setDownloading(true); | |
| try { | |
| exportLegalCaseToPDF(legalCase); | |
| } catch (err) { | |
| console.error('Error generating PDF:', err); | |
| } finally { | |
| setDownloading(false); | |
| } | |
| }; | |
| const handlePrint = () => { | |
| window.print(); | |
| }; | |
| return ( | |
| <div | |
| onClick={onClose} | |
| className="fixed inset-0 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200 cursor-pointer" | |
| > | |
| <div | |
| onClick={(e) => e.stopPropagation()} | |
| className="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] flex flex-col shadow-2xl border border-[#E2E8F0] overflow-hidden cursor-default" | |
| > | |
| {/* Modal Top Bar */} | |
| <div className="p-4 sm:p-5 border-b border-[#E2E8F0] flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-[#F8FAFC]"> | |
| <div className="flex items-center gap-2.5"> | |
| <div className="w-10 h-10 rounded-xl bg-[#006c4a]/10 text-[#006c4a] flex items-center justify-center"> | |
| <span className="material-symbols-outlined text-[24px]">picture_as_pdf</span> | |
| </div> | |
| <div> | |
| <h3 className="font-headline font-bold text-[18px] text-[#0F172A]"> | |
| Download Official Legal Notice | |
| </h3> | |
| <p className="text-[12px] text-[#64748B]"> | |
| Compliant with Statutory Filing Standards | |
| </p> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <button | |
| onClick={handleDownloadDirectPDF} | |
| disabled={downloading} | |
| className="bg-[#006c4a] hover:bg-[#005137] text-white text-[13px] font-semibold px-4 py-2 rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer shadow-sm disabled:opacity-50" | |
| > | |
| <span className="material-symbols-outlined text-[17px]"> | |
| {downloading ? 'sync' : 'download'} | |
| </span> | |
| <span>{downloading ? 'Generating...' : 'Download PDF'}</span> | |
| </button> | |
| <button | |
| onClick={handlePrint} | |
| className="bg-slate-100 hover:bg-slate-200 text-[#0F172A] border border-slate-300 text-[13px] font-semibold px-3 py-2 rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer" | |
| title="Open System Print Dialog" | |
| > | |
| <span className="material-symbols-outlined text-[17px]">print</span> | |
| <span>Print</span> | |
| </button> | |
| <button | |
| onClick={onClose} | |
| className="text-[#64748B] hover:text-[#0F172A] p-2 rounded-xl hover:bg-[#E2E8F0] cursor-pointer" | |
| > | |
| <span className="material-symbols-outlined text-[20px]">close</span> | |
| </button> | |
| </div> | |
| </div> | |
| {/* Document Preview Box with Print ID Container */} | |
| <div className="p-6 overflow-y-auto bg-[#F1F5F9] flex justify-center items-start flex-grow"> | |
| <div | |
| id="legal-document-print-area" | |
| className="bg-white border border-[#CBD5E1] shadow-md p-8 sm:p-10 w-full max-w-[620px] font-serif-legal text-[13.5px] leading-relaxed text-[#1E293B] flex flex-col gap-5 rounded-md" | |
| > | |
| {/* Header Stamps */} | |
| <div className="flex justify-between items-start border-b-2 border-[#0F172A] pb-4"> | |
| <div> | |
| <div className="font-bold text-[16px] text-[#0F172A] uppercase tracking-wider"> | |
| Formal Legal Notice & Records Request | |
| </div> | |
| <div className="text-[11px] font-sans text-[#64748B] uppercase tracking-widest mt-0.5"> | |
| Case Reference: {legalCase.caseNumber} • Electronic Vault Verified | |
| </div> | |
| </div> | |
| <div className="text-right"> | |
| <div className="text-[12px] font-bold text-[#0F172A]">{legalCase.filedDate || 'Current Filing'}</div> | |
| <div className="text-[11px] font-sans text-[#006c4a] font-bold bg-[#DCFCE7] px-2 py-0.5 rounded mt-1 inline-block"> | |
| Statutory {legalCase.daysRemaining || 30}-Day Clock | |
| </div> | |
| </div> | |
| </div> | |
| {/* Recipient */} | |
| <div className="text-[13px] leading-snug"> | |
| <p className="font-bold text-[#0F172A]">To: {legalCase.officer?.name || 'Authorized Officer'}</p> | |
| <p className="text-[#475569]">{legalCase.officer?.title || 'Designated Officer'}</p> | |
| <p className="text-[#475569]">{legalCase.officer?.department || 'Grievance Redressal Division'}</p> | |
| <p className="text-[#475569]">{legalCase.officer?.jurisdiction || 'Local Jurisdiction'}</p> | |
| </div> | |
| {/* RE Line */} | |
| <div className="bg-[#F8FAFC] border-l-4 border-[#0F172A] p-3 text-[13.5px]"> | |
| <span className="font-bold text-[#0F172A]">RE: Formal Notice regarding {legalCase.title} pursuant to {legalCase.statute}</span> | |
| </div> | |
| {/* Body */} | |
| <div className="flex flex-col gap-3 font-sans text-[13px] leading-relaxed text-[#334155]"> | |
| {legalCase.description && legalCase.description.trim().length > 30 ? ( | |
| <div className="whitespace-pre-line font-mono text-[12.5px] bg-[#F8FAFC] p-4 rounded border border-[#E2E8F0] text-[#0F172A]"> | |
| {legalCase.description} | |
| </div> | |
| ) : ( | |
| <> | |
| <p>Dear {legalCase.officer?.name || 'Public Officer'},</p> | |
| <p> | |
| I am formally submitting this legal notice regarding the matter detailed below: | |
| </p> | |
| <div className="bg-[#F8FAFC] p-3.5 rounded border border-[#E2E8F0] flex flex-col gap-2"> | |
| <p className="font-bold text-[#0F172A]">1. Particulars & Facts:</p> | |
| <ul className="list-disc pl-5 flex flex-col gap-1 text-[12.5px]"> | |
| {(legalCase.facts || []).map((fact) => ( | |
| <li key={fact.id}> | |
| <strong>{fact.label}:</strong> {fact.value} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div className="bg-[#F8FAFC] p-3.5 rounded border border-[#E2E8F0]"> | |
| <p className="font-bold text-[#0F172A] mb-1">2. Requested Relief / Records:</p> | |
| <p>{legalCase.requestScope || 'Full resolution and statutory compliance.'}</p> | |
| </div> | |
| </> | |
| )} | |
| {legalCase.hasHardshipClause && ( | |
| <div className="bg-[#FFFBEB] border border-[#FEF3C7] p-3 rounded text-[12.5px] text-[#92400E]"> | |
| <strong>Statutory Fee Waiver:</strong> The requester hereby requests that all search and duplication fees be waived as disclosure is in the public interest. | |
| </div> | |
| )} | |
| <p> | |
| Pursuant to statutory mandates, should any portions of these records contain exempt material, you are required to segregate and redact only the exempt material and release all non-exempt portions without delay. | |
| </p> | |
| </div> | |
| {/* Sign-off */} | |
| <div className="pt-6 border-t border-[#E2E8F0] mt-auto flex justify-between items-end"> | |
| <div> | |
| <p className="text-[13px] text-[#64748B]">Respectfully submitted,</p> | |
| <p className="font-bold text-[14px] text-[#0F172A] mt-1"> | |
| {legalCase.autoRedactEnabled ? '[REDACTED REQUESTER]' : 'Authorized Citizen / Requester'} | |
| </p> | |
| <p className="text-[11px] font-sans text-[#64748B]">CaseLoop Verified Electronic Identity</p> | |
| </div> | |
| <div className="text-right text-[11px] font-sans text-[#94A3B8]"> | |
| <div>Verified Case: {legalCase.caseNumber}</div> | |
| <div>Statutory Notice v1</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Footer */} | |
| <div className="p-4 border-t border-[#E2E8F0] bg-[#F8FAFC] flex justify-between items-center text-[12px] text-[#64748B]"> | |
| <span>Includes cryptographic timestamp & auto-redacted personal data.</span> | |
| <button | |
| onClick={onClose} | |
| className="px-4 py-1.5 bg-[#E2E8F0] hover:bg-[#CBD5E1] text-[#0F172A] rounded-lg font-medium cursor-pointer" | |
| > | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |