Update components/ResultsTable.tsx

components/ResultsTable.tsx

@@ -33,51 +33,261 @@ const QAReportModal: React.FC<{ report: DetailedQaReport; onClose: () => void }>
                 <p><span className="font-semibold text-gray-400">Grade:</span> <span className="text-gray-200">{data.grade}</span></p>
                 <p><span className="font-semibold text-gray-400">Pass:</span> <span className={`font-medium ${data.pass ? 'text-green-400' : 'text-red-400'}`}>{data.pass ? 'Yes' : 'No'}</span></p>
             </div>
+            
+            {/* Enhanced Content Display */}
+            {data.detailedAssessment && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Detailed Assessment:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.detailedAssessment}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {data.keyStrengths && data.keyStrengths.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Key Strengths:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.keyStrengths.map((strength, i) => <li key={i}>{strength}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.recommendations && data.recommendations.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Recommendations:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.recommendations.map((rec, i) => <li key={i}>{rec}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.explanations && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Explanations:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.explanations}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
             <div className="pl-9 mt-3 text-sm">
                 <p className="font-semibold text-gray-400">Errors:</p>
                 <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
                     {data.errors.map((err, i) => <li key={i}>{err}</li>)}
                 </ul>
             </div>
-             <div className="pl-9 mt-3 text-sm">
-                 <p className="font-semibold text-gray-400">Content:</p>
-                 <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-48">
-                     <div className="prose prose-sm prose-invert max-w-none">
-                         <ReactMarkdown 
-                             components={{
-                                 // Custom styling for markdown elements
-                                 p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
-                                 ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
-                                 ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
-                                 li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
-                                 code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
-                                 strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
-                                 em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
-                                 h1: ({ children }) => <h1 className="text-lg font-bold mb-2 text-white">{children}</h1>,
-                                 h2: ({ children }) => <h2 className="text-base font-semibold mb-2 text-white">{children}</h2>,
-                                 h3: ({ children }) => <h3 className="text-sm font-semibold mb-1 text-white">{children}</h3>,
-                             }}
-                         >
-                             {data.corrected}
-                         </ReactMarkdown>
-                     </div>
-                 </div>
+            
+            {data.corrected && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Corrected Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-48">
+                        <div className="prose prose-sm prose-invert max-w-none">
+                            <ReactMarkdown 
+                                components={{
+                                    p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                    ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                    ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                    li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                    code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                    strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                    em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                                    h1: ({ children }) => <h1 className="text-lg font-bold mb-2 text-white">{children}</h1>,
+                                    h2: ({ children }) => <h2 className="text-base font-semibold mb-2 text-white">{children}</h2>,
+                                    h3: ({ children }) => <h3 className="text-sm font-semibold mb-1 text-white">{children}</h3>,
+                                }}
+                            >
+                                {data.corrected}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                </div>
+            )}
+            
+            {/* Raw Content for complete transparency */}
+            {data.rawContent && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Raw QA Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                        <pre className="whitespace-pre-wrap text-gray-400">{data.rawContent}</pre>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+
+    const OverallSection: React.FC<{ data: DetailedQaReport['overall'] }> = ({ data }) => (
+        <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+            <h4 className="text-lg font-semibold text-white mb-3 flex items-center gap-3">
+                {data.pass 
+                    ? <CheckCircleIcon className="w-6 h-6 text-green-400 flex-shrink-0" /> 
+                    : <XCircleIcon className="w-6 h-6 text-red-400 flex-shrink-0" />
+                }
+                Overall Assessment
+            </h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm pl-9">
+                <p><span className="font-semibold text-gray-400">Grade:</span> <span className="text-gray-200">{data.grade}</span></p>
+                <p><span className="font-semibold text-gray-400">Pass:</span> <span className={`font-medium ${data.pass ? 'text-green-400' : 'text-red-400'}`}>{data.pass ? 'Yes' : 'No'}</span></p>
             </div>
+            
+            <div className="pl-9 mt-3 text-sm">
+                <p className="font-semibold text-gray-400">Primary Issue:</p>
+                <p className="text-gray-300 mt-1">{data.primaryIssue}</p>
+            </div>
+            
+            {/* Enhanced Overall Content Display */}
+            {data.detailedAssessment && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Detailed Assessment:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.detailedAssessment}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {data.keyStrengths && data.keyStrengths.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Key Strengths:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.keyStrengths.map((strength, i) => <li key={i}>{strength}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.recommendations && data.recommendations.length > 0 && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Recommendations:</p>
+                    <ul className="list-disc list-inside text-gray-300 pl-2 mt-1 space-y-1">
+                        {data.recommendations.map((rec, i) => <li key={i}>{rec}</li>)}
+                    </ul>
+                </div>
+            )}
+            
+            {data.explanations && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Explanations:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50">
+                        <ReactMarkdown 
+                            components={{
+                                p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                            }}
+                        >
+                            {data.explanations}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            )}
+            
+            {/* Raw Content for complete transparency */}
+            {data.rawContent && (
+                <div className="pl-9 mt-3 text-sm">
+                    <p className="font-semibold text-gray-400">Raw Overall Content:</p>
+                    <div className="text-gray-300 text-xs mt-1 bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                        <pre className="whitespace-pre-wrap text-gray-400">{data.rawContent}</pre>
+                    </div>
+                </div>
+            )}
         </div>
     );
 
+    const AdditionalSections: React.FC<{ sections: DetailedQaReport['additionalSections'] }> = ({ sections }) => {
+        if (!sections) return null;
+        
+        return (
+            <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+                <h4 className="text-lg font-semibold text-white mb-3">Additional QA Sections</h4>
+                <div className="space-y-3">
+                    {Object.entries(sections).map(([sectionName, sectionData]) => (
+                        <div key={sectionName} className="border-l-2 border-gray-600 pl-3">
+                            <h5 className="text-sm font-semibold text-gray-300 mb-2 capitalize">{sectionName}</h5>
+                            <div className="text-gray-300 text-xs bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-32">
+                                <ReactMarkdown 
+                                    components={{
+                                        p: ({ children }) => <p className="mb-2 last:mb-0 text-gray-300">{children}</p>,
+                                        ul: ({ children }) => <ul className="list-disc ml-4 mb-2 text-gray-300">{children}</ul>,
+                                        ol: ({ children }) => <ol className="list-decimal ml-4 mb-2 text-gray-300">{children}</ol>,
+                                        li: ({ children }) => <li className="mb-1 text-gray-300">{children}</li>,
+                                        code: ({ children }) => <code className="bg-gray-800 px-1 py-0.5 rounded text-blue-300 text-xs">{children}</code>,
+                                        strong: ({ children }) => <strong className="font-semibold text-white">{children}</strong>,
+                                        em: ({ children }) => <em className="italic text-gray-200">{children}</em>,
+                                    }}
+                                >
+                                    {sectionData.content}
+                                </ReactMarkdown>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
     return (
         <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50" onClick={onClose}>
-            <div className="bg-gray-800 rounded-lg shadow-xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <div className="bg-gray-800 rounded-lg shadow-xl p-6 max-w-6xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
                 <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-700">
-                    <h3 className="text-2xl font-bold text-white">QA Report Details</h3>
+                    <h3 className="text-2xl font-bold text-white">Complete QA Report Details</h3>
                     <button onClick={onClose} className="text-gray-400 hover:text-white text-3xl font-bold">&times;</button>
                 </div>
                 <div className="space-y-2">
+                    <OverallSection data={report.overall} />
                     <Section title="Title" data={report.title} />
                     <Section title="Meta Description" data={report.meta} />
                     <Section title="H1" data={report.h1} />
                     <Section title="Copy" data={report.copy} />
+                    <AdditionalSections sections={report.additionalSections} />
+                    
+                    {/* Complete Raw Report */}
+                    {report.completeRawReport && (
+                        <div className="bg-gray-900/70 p-4 rounded-lg mb-4 border border-gray-700">
+                            <h4 className="text-lg font-semibold text-white mb-3">Complete Raw QA Report</h4>
+                            <div className="text-gray-300 text-xs bg-gray-950/50 p-3 rounded-md border border-gray-600/50 overflow-auto max-h-64">
+                                <pre className="whitespace-pre-wrap text-gray-400">{report.completeRawReport}</pre>
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
@@ -124,19 +334,48 @@ const ResultsTable: React.FC<ResultsTableProps> = ({ results }) => {
                 'Generated Copy': row.generatedCopy,
                 'Overall Pass': row.overallPass,
                 'Overall Grade': row.overallGrade,
+                'Overall Primary Issue': report?.overall.primaryIssue,
+                'Overall Detailed Assessment': report?.overall.detailedAssessment,
+                'Overall Key Strengths': report?.overall.keyStrengths?.join('; '),
+                'Overall Recommendations': report?.overall.recommendations?.join('; '),
+                'Overall Explanations': report?.overall.explanations,
                 'Title Pass': report?.title.pass,
                 'Title Grade': report?.title.grade,
                 'Title Errors': report?.title.errors.join('; '),
+                'Title Detailed Assessment': report?.title.detailedAssessment,
+                'Title Key Strengths': report?.title.keyStrengths?.join('; '),
+                'Title Recommendations': report?.title.recommendations?.join('; '),
+                'Title Explanations': report?.title.explanations,
+                'Title Corrected': report?.title.corrected,
                 'Meta Pass': report?.meta.pass,
                 'Meta Grade': report?.meta.grade,
                 'Meta Errors': report?.meta.errors.join('; '),
+                'Meta Detailed Assessment': report?.meta.detailedAssessment,
+                'Meta Key Strengths': report?.meta.keyStrengths?.join('; '),
+                'Meta Recommendations': report?.meta.recommendations?.join('; '),
+                'Meta Explanations': report?.meta.explanations,
+                'Meta Corrected': report?.meta.corrected,
                 'H1 Pass': report?.h1.pass,
                 'H1 Grade': report?.h1.grade,
                 'H1 Errors': report?.h1.errors.join('; '),
+                'H1 Detailed Assessment': report?.h1.detailedAssessment,
+                'H1 Key Strengths': report?.h1.keyStrengths?.join('; '),
+                'H1 Recommendations': report?.h1.recommendations?.join('; '),
+                'H1 Explanations': report?.h1.explanations,
+                'H1 Corrected': report?.h1.corrected,
                 'Copy Pass': report?.copy.pass,
                 'Copy Grade': report?.copy.grade,
                 'Copy Errors': report?.copy.errors.join('; '),
-                'QA Full Report': row.qaReport,
+                'Copy Detailed Assessment': report?.copy.detailedAssessment,
+                'Copy Key Strengths': report?.copy.keyStrengths?.join('; '),
+                'Copy Recommendations': report?.copy.recommendations?.join('; '),
+                'Copy Explanations': report?.copy.explanations,
+                'Copy Corrected': report?.copy.corrected,
+                'Additional QA Sections': report?.additionalSections ? 
+                    Object.entries(report.additionalSections)
+                        .map(([name, data]) => `${name}: ${data.content}`)
+                        .join(' | ') : '',
+                'Complete Raw QA Report': report?.completeRawReport || row.qaReport,
             };
         });
 
@@ -298,16 +537,124 @@ const ResultsTable: React.FC<ResultsTableProps> = ({ results }) => {
                     pdf.setFont('helvetica', 'normal');
                     currentY = addWrappedText(`Errors: ${section.errors.join(', ')}`, margin + 10, currentY, maxLineWidth - 10, 8);
                     
-                    currentY = ensureMinSpace(20);
-                    pdf.setFont('helvetica', 'italic');
-                    currentY = addWrappedText(`Correction/Analysis: ${section.corrected}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    // Enhanced QA content display
+                    if (section.detailedAssessment) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Detailed Assessment:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(section.detailedAssessment, margin + 15, currentY, maxLineWidth - 15, 7);
+                    }
+                    
+                    if (section.keyStrengths && section.keyStrengths.length > 0) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Key Strengths:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        section.keyStrengths.forEach(strength => {
+                            currentY = addWrappedText(`• ${strength}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                        });
+                    }
+                    
+                    if (section.recommendations && section.recommendations.length > 0) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Recommendations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        section.recommendations.forEach(rec => {
+                            currentY = addWrappedText(`• ${rec}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                        });
+                    }
+                    
+                    if (section.explanations) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText('Explanations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(section.explanations, margin + 15, currentY, maxLineWidth - 15, 7);
+                    }
+                    
+                    if (section.corrected) {
+                        currentY = ensureMinSpace(20);
+                        pdf.setFont('helvetica', 'italic');
+                        currentY = addWrappedText(`Correction/Analysis: ${section.corrected}`, margin + 10, currentY, maxLineWidth - 10, 8);
+                    }
                     currentY += 4;
                 };
 
+                // Add Overall Assessment first
+                const overall = row.detailedQaReport.overall;
+                currentY = ensureMinSpace(40);
+                pdf.setFontSize(11);
+                pdf.setFont('helvetica', 'bold');
+                currentY = addWrappedText('Overall Assessment:', margin + 5, currentY, maxLineWidth - 5, 11);
+                currentY += 2;
+                
+                pdf.setFontSize(9);
+                pdf.setFont('helvetica', 'normal');
+                currentY = addWrappedText(`Primary Issue: ${overall.primaryIssue}`, margin + 10, currentY, maxLineWidth - 10, 9);
+                
+                if (overall.detailedAssessment) {
+                    currentY = ensureMinSpace(20);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Detailed Assessment:', margin + 10, currentY, maxLineWidth - 10, 8);
+                    pdf.setFont('helvetica', 'normal');
+                    currentY = addWrappedText(overall.detailedAssessment, margin + 15, currentY, maxLineWidth - 15, 7);
+                }
+                
+                if (overall.keyStrengths && overall.keyStrengths.length > 0) {
+                    currentY = ensureMinSpace(20);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Key Strengths:', margin + 10, currentY, maxLineWidth - 10, 8);
+                    pdf.setFont('helvetica', 'normal');
+                    overall.keyStrengths.forEach(strength => {
+                        currentY = addWrappedText(`• ${strength}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                    });
+                }
+                
+                if (overall.recommendations && overall.recommendations.length > 0) {
+                    currentY = ensureMinSpace(20);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Recommendations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                    pdf.setFont('helvetica', 'normal');
+                    overall.recommendations.forEach(rec => {
+                        currentY = addWrappedText(`• ${rec}`, margin + 15, currentY, maxLineWidth - 15, 7);
+                    });
+                }
+                
+                if (overall.explanations) {
+                    currentY = ensureMinSpace(20);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Explanations:', margin + 10, currentY, maxLineWidth - 10, 8);
+                    pdf.setFont('helvetica', 'normal');
+                    currentY = addWrappedText(overall.explanations, margin + 15, currentY, maxLineWidth - 15, 7);
+                }
+                
+                currentY += 5;
+
                 addQaSection('Title', row.detailedQaReport.title);
                 addQaSection('Meta', row.detailedQaReport.meta);
                 addQaSection('H1', row.detailedQaReport.h1);
                 addQaSection('Copy', row.detailedQaReport.copy);
+                
+                // Add Additional Sections if available
+                if (row.detailedQaReport.additionalSections) {
+                    currentY = ensureMinSpace(30);
+                    pdf.setFontSize(10);
+                    pdf.setFont('helvetica', 'bold');
+                    currentY = addWrappedText('Additional QA Sections:', margin + 5, currentY, maxLineWidth - 5, 10);
+                    currentY += 2;
+                    
+                    Object.entries(row.detailedQaReport.additionalSections).forEach(([sectionName, sectionData]) => {
+                        currentY = ensureMinSpace(25);
+                        pdf.setFontSize(9);
+                        pdf.setFont('helvetica', 'bold');
+                        currentY = addWrappedText(`${sectionName}:`, margin + 10, currentY, maxLineWidth - 10, 9);
+                        pdf.setFont('helvetica', 'normal');
+                        currentY = addWrappedText(sectionData.content, margin + 15, currentY, maxLineWidth - 15, 7);
+                        currentY += 2;
+                    });
+                }
             }
             
             currentY += sectionSpacing * 2; // Extra spacing between entries