Update templates/results.html

templates/results.html

@@ -40,7 +40,9 @@
           </div>
           <div class="flex items-center gap-3">
             <button
+              id="exportBtn"
               class="inline-flex items-center gap-2 px-4 py-2 border border-slate-300 rounded-lg text-sm bg-white hover:bg-slate-50 transition-colors"
+              onclick="exportToCSV()"
             >
               <svg
                 class="h-4 w-4"
@@ -55,7 +57,7 @@
                   d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                 />
               </svg>
-              Export Report
+               <span id="exportBtnText">Export Report</span>
             </button>
             <a
               href="/"
@@ -355,6 +357,7 @@
               </div>
               <div class="p-6">
                 <div class="flex items-center gap-3">
+                  {% if ocr_status == "Success" %}
                   <svg
                     class="h-8 w-8 text-green-600"
                     fill="none"
@@ -368,6 +371,21 @@
                       d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
+                  {% else %}
+                  <svg
+                    class="h-8 w-8 text-amber-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                  </svg>
+                  {% endif %}
                   <div>
                     <p class="text-2xl text-slate-900">{{ ocr_status }}</p>
                     <p class="text-xs text-slate-500">{{ ocr_message }}</p>
@@ -382,6 +400,21 @@
               </div>
               <div class="p-6">
                 <div class="flex items-center gap-3">
+                  {% if qr_status == "Decoded" %}
+                  <svg
+                    class="h-8 w-8 text-green-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  {% else %}
                   <svg
                     class="h-8 w-8 text-amber-600"
                     fill="none"
@@ -395,6 +428,7 @@
                       d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                     />
                   </svg>
+                  {% endif %}
                   <div>
                     <p class="text-2xl text-slate-900">{{ qr_status }}</p>
                     <p class="text-xs text-slate-500">{{ qr_message }}</p>
@@ -914,4 +948,67 @@
 
     <script src="{{ url_for('static', filename='js/results.js') }}"></script>
   </body>
+  <script>
+    function exportToCSV() {
+      const btn = document.getElementById("exportBtn");
+      const btnText = document.getElementById("exportBtnText");
+
+      // Disable button and show loading state
+      btn.disabled = true;
+      btnText.textContent = "Exporting...";
+      btn.classList.add("opacity-50", "cursor-not-allowed");
+
+      // Send POST request to Flask endpoint
+      fetch("/export_csv", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Export failed");
+          }
+          return response.blob();
+        })
+        .then((blob) => {
+          // Create download link
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.style.display = "none";
+          a.href = url;
+
+          // Generate filename with timestamp
+          const timestamp = new Date()
+            .toISOString()
+            .replace(/[:.]/g, "-")
+            .slice(0, -5);
+          a.download = `aadhaar_analysis_${timestamp}.csv`;
+
+          // Trigger download
+          document.body.appendChild(a);
+          a.click();
+
+          // Cleanup
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+
+          // Show success message (optional)
+          btnText.textContent = "Exported!";
+          setTimeout(() => {
+            btnText.textContent = "Export Report";
+          }, 2000);
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+          alert("Failed to export CSV. Please try again.");
+          btnText.textContent = "Export Report";
+        })
+        .finally(() => {
+          // Re-enable button
+          btn.disabled = false;
+          btn.classList.remove("opacity-50", "cursor-not-allowed");
+        });
+    }
+  </script>
 </html>