Update frontend/src/components/ocr/ExtractionOutput.jsx

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   Code2,
@@ -110,22 +110,110 @@ Support Package                1      $500.00      $500.00
 Payment Terms: Net 30
 Thank you for your business!`;
 
-export default function ExtractionOutput({ hasFile, isProcessing, isComplete }) {
-  const [activeTab, setActiveTab] = useState("text");
+// Helper function to convert object to XML
+function objectToXML(obj, rootName = "extraction") {
+  let xml = `<?xml version="1.0" encoding="UTF-8"?>\n<${rootName}>\n`;
+  
+  const convert = (obj, indent = "  ") => {
+    for (const [key, value] of Object.entries(obj)) {
+      if (value === null || value === undefined) continue;
+      
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          xml += `${indent}<${key}>\n`;
+          if (typeof item === "object") {
+            convert(item, indent + "  ");
+          } else {
+            xml += `${indent}  ${item}\n`;
+          }
+          xml += `${indent}</${key}>\n`;
+        });
+      } else if (typeof value === "object") {
+        xml += `${indent}<${key}>\n`;
+        convert(value, indent + "  ");
+        xml += `${indent}</${key}>\n`;
+      } else {
+        xml += `${indent}<${key}>${value}</${key}>\n`;
+      }
+    }
+  };
+  
+  convert(obj);
+  xml += `</${rootName}>`;
+  return xml;
+}
+
+// Helper function to format fields as readable text
+function fieldsToText(fields) {
+  if (!fields || typeof fields !== "object") {
+    return "No data extracted.";
+  }
+  
+  let text = "";
+  
+  const formatValue = (key, value, indent = "") => {
+    if (Array.isArray(value)) {
+      text += `${indent}${key}:\n`;
+      value.forEach((item, idx) => {
+        if (typeof item === "object") {
+          text += `${indent}  Item ${idx + 1}:\n`;
+          Object.entries(item).forEach(([k, v]) => formatValue(k, v, indent + "    "));
+        } else {
+          text += `${indent}  - ${item}\n`;
+        }
+      });
+    } else if (typeof value === "object" && value !== null) {
+      text += `${indent}${key}:\n`;
+      Object.entries(value).forEach(([k, v]) => formatValue(k, v, indent + "  "));
+    } else {
+      text += `${indent}${key}: ${value}\n`;
+    }
+  };
+  
+  Object.entries(fields).forEach(([key, value]) => {
+    formatValue(key, value);
+    text += "\n";
+  });
+  
+  return text.trim() || "No data extracted.";
+}
+
+export default function ExtractionOutput({ hasFile, isProcessing, isComplete, extractionResult }) {
+  const [activeTab, setActiveTab] = useState("json");
   const [copied, setCopied] = useState(false);
-  const [expandedSections, setExpandedSections] = useState(["vendor", "invoice", "items", "totals"]);
+  
+  // Get fields from extraction result, default to empty object
+  const fields = extractionResult?.fields || {};
+  const confidence = extractionResult?.confidence || 0;
+  const fieldsExtracted = extractionResult?.fieldsExtracted || 0;
+  const totalTime = extractionResult?.totalTime || 0;
+  
+  // Initialize expanded sections based on available fields
+  const [expandedSections, setExpandedSections] = useState(() => 
+    Object.keys(fields).slice(0, 5) // Expand first 5 sections by default
+  );
 
   const handleCopy = () => {
-    const content =
-      activeTab === "json"
-        ? JSON.stringify(mockData, null, 2)
-        : activeTab === "xml"
-        ? mockXML
-        : mockText;
+    let content = "";
+    if (activeTab === "json") {
+      content = JSON.stringify(fields, null, 2);
+    } else if (activeTab === "xml") {
+      content = objectToXML(fields);
+    } else {
+      content = fieldsToText(fields);
+    }
+    
     navigator.clipboard.writeText(content);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
+  
+  // Update expanded sections when fields change
+  React.useEffect(() => {
+    if (extractionResult?.fields) {
+      setExpandedSections(Object.keys(extractionResult.fields).slice(0, 5));
+    }
+  }, [extractionResult]);
 
   const toggleSection = (section) => {
     setExpandedSections((prev) =>
@@ -224,7 +312,9 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete })
           <div>
             <h3 className="font-semibold text-slate-800 text-sm">Extracted Data</h3>
             <p className="text-xs text-slate-400">
-              {isComplete ? "25 fields extracted" : "Waiting for extraction"}
+              {isComplete 
+                ? `${fieldsExtracted} field${fieldsExtracted !== 1 ? 's' : ''} extracted`
+                : "Waiting for extraction"}
             </p>
           </div>
         </div>
@@ -309,23 +399,37 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete })
               </div>
             </div>
           </div>
+        ) : isComplete && Object.keys(fields).length === 0 ? (
+          <div className="h-full flex items-center justify-center p-6">
+            <div className="text-center">
+              <div className="h-20 w-20 mx-auto rounded-2xl bg-amber-100 flex items-center justify-center mb-4">
+                <Code2 className="h-10 w-10 text-amber-600" />
+              </div>
+              <p className="text-slate-600 font-medium mb-1">No data extracted</p>
+              <p className="text-slate-400 text-sm">The document may not contain extractable fields</p>
+            </div>
+          </div>
         ) : (
           <div className="p-4 font-mono text-sm">
             {activeTab === "text" ? (
               <pre className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
-                {mockText}
+                {fieldsToText(fields)}
               </pre>
             ) : activeTab === "json" ? (
               <div className="space-y-1">
                 <span className="text-slate-400">{"{"}</span>
-                {Object.entries(mockData).map(([key, value]) =>
-                  renderSection(key, value, 1)
+                {Object.keys(fields).length > 0 ? (
+                  Object.entries(fields).map(([key, value]) =>
+                    renderSection(key, value, 1)
+                  )
+                ) : (
+                  <div className="pl-4 text-slate-400 italic">No fields extracted</div>
                 )}
                 <span className="text-slate-400">{"}"}</span>
               </div>
             ) : (
               <pre className="text-sm text-slate-600 whitespace-pre-wrap">
-                {mockXML.split("\n").map((line, i) => (
+                {objectToXML(fields).split("\n").map((line, i) => (
                   <div key={i} className="hover:bg-slate-50 px-2 -mx-2 rounded">
                     {line.includes("<") ? (
                       <>
@@ -363,21 +467,28 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete })
       </div>
 
       {/* Confidence Footer */}
-      {isComplete && (
+      {isComplete && extractionResult && (
         <div className="px-5 py-3 border-t border-slate-100 bg-slate-50/50">
           <div className="flex items-center justify-between text-xs">
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-1.5">
-                <div className="h-2 w-2 rounded-full bg-emerald-500" />
+                <div className={cn(
+                  "h-2 w-2 rounded-full",
+                  confidence >= 90 ? "bg-emerald-500" : confidence >= 70 ? "bg-amber-500" : "bg-red-500"
+                )} />
                 <span className="text-slate-500">Confidence:</span>
-                <span className="font-semibold text-slate-700">98%</span>
+                <span className="font-semibold text-slate-700">
+                  {confidence > 0 ? `${confidence.toFixed(1)}%` : "N/A"}
+                </span>
               </div>
               <div className="flex items-center gap-1.5">
                 <span className="text-slate-500">Fields:</span>
-                <span className="font-semibold text-slate-700">25</span>
+                <span className="font-semibold text-slate-700">{fieldsExtracted}</span>
               </div>
             </div>
-            <span className="text-slate-400">Processed in 2.3s</span>
+            <span className="text-slate-400">
+              Processed in {totalTime >= 1000 ? `${(totalTime / 1000).toFixed(1)}s` : `${totalTime}ms`}
+            </span>
           </div>
         </div>
       )}