Update web/past_data.html

web/past_data.html

@@ -92,15 +92,31 @@
       }
     }
 
-    function renderAnalysis(item) {
+    function renderAnalysisWithCustomToggle(item) {
       const d = item.createdAt && item.createdAt.toDate ? item.createdAt.toDate().toLocaleString() : "";
+      const uniqueId = `ocr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; // Generate unique ID
+      
       return `
         <div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
           <div class="flex justify-between mb-2">
-            <div class="font-semibold text-green-700">Report: ${item.reportDate || "N/A"}</div>
             <div class="text-xs text-gray-500">${d}</div>
           </div>
-          <pre class="whitespace-pre-wrap text-sm text-gray-700 mb-2">${item.ocr_text || ""}</pre>
+          
+          <!-- Collapsible OCR Text Section with Custom Toggle -->
+          <div class="mb-4">
+            <div class="font-semibold text-green-700 cursor-pointer hover:text-green-800 py-2 flex justify-between items-center" 
+                 onclick="toggleOCR('${uniqueId}')">
+              <span>Report ${item.reportDate || "N/A"}</span>
+              <span class="arrow transition-transform duration-300" id="arrow-${uniqueId}">▶</span>
+            </div>
+            <div class="ocr-content overflow-hidden transition-all duration-300 max-h-0" id="content-${uniqueId}">
+              <div class="mt-2 p-3 bg-gray-50 rounded border">
+                <pre class="whitespace-pre-wrap text-sm text-gray-700">${item.ocr_text || ""}</pre>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Findings Section -->
           ${(Array.isArray(item.Detected_Anomolies) ? item.Detected_Anomolies : []).map((r,i) => `
             <div class="border-t border-gray-200 pt-2 mt-2">
               <div class="font-medium">Finding ${i+1}: ${r.findings || ""}</div>
@@ -112,6 +128,19 @@
       `;
     }
 
+    function toggleOCR(id) {
+      const content = document.getElementById(`content-${id}`);
+      const arrow = document.getElementById(`arrow-${id}`);
+      
+      if (content.style.maxHeight && content.style.maxHeight !== '0px') {
+        content.style.maxHeight = '0px';
+        arrow.style.transform = 'rotate(0deg)';
+      } else {
+        content.style.maxHeight = content.scrollHeight + 'px';
+        arrow.style.transform = 'rotate(90deg)';
+      }
+    }
+    
     onAuthStateChanged(auth, async (user) => {
       if (user) {
         statusEl.textContent = `Signed in as ${user.email || user.uid}`;