Implement PDF visualization and professional PDF export for annexes

frontend/components/AgentAnalysis.tsx

@@ -41,6 +41,7 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
   const [activeAnimalId, setActiveAnimalId] = useState<string | null>(null);
   const [generatedAnnexes, setGeneratedAnnexes] = useState<Array<{ name: string, content: string }>>([]);
   const [isGeneratingAnnexes, setIsGeneratingAnnexes] = useState(false);
+  const [pdfUrls, setPdfUrls] = useState<Record<string, string>>({});
 
   // Removed auto-scroll to keep user at the top during demo recordings
   
@@ -92,6 +93,49 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
     }, 2000);
   };
 
+  const downloadAsPDF = async (annex: { name: string, content: string }) => {
+    try {
+      const { jsPDF } = await import("jspdf");
+      const doc = new jsPDF();
+      
+      // Title
+      doc.setFontSize(22);
+      doc.setTextColor(40, 40, 40);
+      doc.text("ANDESOPS AI - COMPLIANCE", 20, 20);
+      
+      doc.setDrawColor(168, 85, 247); // Purple line
+      doc.setLineWidth(1);
+      doc.line(20, 25, 190, 25);
+      
+      // Content
+      doc.setFontSize(16);
+      doc.setTextColor(0, 0, 0);
+      doc.text(annex.name, 20, 40);
+      
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      
+      const splitText = doc.splitTextToSize(annex.content.replace(/# /g, '').replace(/\*\*/g, '').replace(/### /g, ''), 170);
+      doc.text(splitText, 20, 55);
+      
+      // Footer
+      doc.setFontSize(8);
+      doc.setTextColor(150, 150, 150);
+      doc.text(`Document generated by AndesOps AI on ${new Date().toLocaleString()}`, 20, 280);
+      
+      doc.save(`${annex.name.replace(/ /g, '_')}.pdf`);
+    } catch (err) {
+      console.error("PDF Export failed:", err);
+      alert("PDF Export failed. Downloading as Markdown instead.");
+      const blob = new Blob([annex.content], { type: 'text/markdown' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${annex.name.replace(/ /g, '_')}.md`;
+      a.click();
+    }
+  };
+
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
       const filesArray = Array.from(event.target.files);
@@ -108,6 +152,12 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
               analysis: null, 
               id 
           };
+          
+          if (newFile.type === "application/pdf") {
+            const url = URL.createObjectURL(newFile);
+            setPdfUrls(prev => ({ ...prev, [id]: url }));
+          }
+
           setCorral(prev => [...prev, newEntry]);
           setActiveAnimalId(id);
         }
@@ -462,6 +512,29 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
                 </div>
 
                 {isUploading && <p className="text-[10px] text-purple-400 animate-pulse font-bold">✨ Bringing animal to corral...</p>}
+                
+                {/* PDF Viewer for Active Selection */}
+                {activeAnimalId && pdfUrls[activeAnimalId] && (
+                  <div className="mt-6 rounded-2xl overflow-hidden border border-white/10 bg-black/40 h-80 relative group">
+                    <iframe 
+                      src={`${pdfUrls[activeAnimalId]}#toolbar=0&navpanes=0&scrollbar=0`} 
+                      className="w-full h-full border-none opacity-80 group-hover:opacity-100 transition-opacity" 
+                    />
+                    <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black to-transparent flex justify-between items-end">
+                      <p className="text-[9px] font-mono text-slate-400 truncate max-w-[150px]">
+                        {corral.find(a => a.id === activeAnimalId)?.file.name}
+                      </p>
+                      <a 
+                        href={pdfUrls[activeAnimalId]} 
+                        target="_blank" 
+                        rel="noopener noreferrer"
+                        className="text-[9px] font-bold text-cyan hover:underline"
+                      >
+                        Full View ↗
+                      </a>
+                    </div>
+                  </div>
+                )}
              </div>
              
              <label className="flex items-center gap-3 p-4 rounded-2xl bg-white/5 cursor-pointer hover:bg-white/10 transition border border-white/5">
@@ -713,19 +786,27 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
                       <pre className="whitespace-pre-wrap">{annex.content}</pre>
                       <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/60 to-transparent" />
                     </div>
-                    <button 
-                      onClick={() => {
-                        const blob = new Blob([annex.content], { type: 'text/markdown' });
-                        const url = window.URL.createObjectURL(blob);
-                        const a = document.createElement('a');
-                        a.href = url;
-                        a.download = `${annex.name.replace(/ /g, '_')}.md`;
-                        a.click();
-                      }}
-                      className="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-widest"
-                    >
-                      Download .md 📥
-                    </button>
+                    <div className="grid grid-cols-2 gap-2">
+                        <button 
+                             onClick={() => downloadAsPDF(annex)}
+                             className="w-full py-2.5 rounded-xl bg-purple-500/10 border border-purple-500/20 text-[9px] font-bold text-purple-400 hover:bg-purple-500 hover:text-white transition uppercase tracking-widest shadow-lg shadow-purple-500/10"
+                           >
+                             Download PDF 📥
+                           </button>
+                        <button 
+                          onClick={() => {
+                            const blob = new Blob([annex.content], { type: 'text/markdown' });
+                            const url = window.URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = `${annex.name.replace(/ /g, '_')}.md`;
+                            a.click();
+                          }}
+                          className="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-[9px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-widest"
+                        >
+                          Download .md 📥
+                        </button>
+                    </div>
                 </div>
               ))}
             </div>

frontend/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "14.2.5",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "jspdf": "^2.5.1"
   },
   "devDependencies": {
     "@types/node": "20.14.2",