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

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -0,0 +1,386 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Code2,
+  Copy,
+  Check,
+  Braces,
+  FileCode2,
+  FileText,
+  Sparkles,
+  ChevronDown,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+// Mock extracted data
+const mockData = {
+  document: {
+    type: "Invoice",
+    confidence: 0.98,
+  },
+  vendor: {
+    name: "Acme Corporation",
+    address: "123 Business Ave, Suite 400",
+    city: "San Francisco",
+    state: "CA",
+    zip: "94102",
+    phone: "+1 (555) 123-4567",
+  },
+  invoice: {
+    number: "INV-2024-0847",
+    date: "2024-01-15",
+    due_date: "2024-02-14",
+    po_number: "PO-9823",
+  },
+  items: [
+    { description: "Professional Services", quantity: 40, unit_price: 150.0, total: 6000.0 },
+    { description: "Software License", quantity: 5, unit_price: 299.99, total: 1499.95 },
+    { description: "Support Package", quantity: 1, unit_price: 500.0, total: 500.0 },
+  ],
+  totals: {
+    subtotal: 7999.95,
+    tax_rate: 0.0875,
+    tax_amount: 699.99,
+    total: 8699.94,
+  },
+};
+
+const mockXML = `<?xml version="1.0" encoding="UTF-8"?>
+<extraction>
+  <document type="Invoice" confidence="0.98"/>
+  <vendor>
+    <name>Acme Corporation</name>
+    <address>123 Business Ave, Suite 400</address>
+    <city>San Francisco</city>
+    <state>CA</state>
+    <zip>94102</zip>
+  </vendor>
+  <invoice>
+    <number>INV-2024-0847</number>
+    <date>2024-01-15</date>
+    <due_date>2024-02-14</due_date>
+  </invoice>
+  <items>
+    <item>
+      <description>Professional Services</description>
+      <quantity>40</quantity>
+      <total>6000.00</total>
+    </item>
+  </items>
+  <totals>
+    <subtotal>7999.95</subtotal>
+    <tax>699.99</tax>
+    <total>8699.94</total>
+  </totals>
+</extraction>`;
+
+const mockText = `INVOICE
+
+ACME CORPORATION
+123 Business Ave, Suite 400
+San Francisco, CA 94102
+Phone: +1 (555) 123-4567
+
+Invoice Number: INV-2024-0847
+Invoice Date: January 15, 2024
+Due Date: February 14, 2024
+PO Number: PO-9823
+
+BILL TO:
+Customer Name
+456 Client Street
+New York, NY 10001
+
+ITEMS:
+─────────────────────────────────────────────────────────
+Description                  Qty    Unit Price    Total
+─────────────────────────────────────────────────────────
+Professional Services         40      $150.00    $6,000.00
+Software License               5      $299.99    $1,499.95
+Support Package                1      $500.00      $500.00
+─────────────────────────────────────────────────────────
+
+                              Subtotal:    $7,999.95
+                              Tax (8.75%):   $699.99
+                              ─────────────────────────
+                              TOTAL:       $8,699.94
+
+Payment Terms: Net 30
+Thank you for your business!`;
+
+export default function ExtractionOutput({ hasFile, isProcessing, isComplete }) {
+  const [activeTab, setActiveTab] = useState("text");
+  const [copied, setCopied] = useState(false);
+  const [expandedSections, setExpandedSections] = useState(["vendor", "invoice", "items", "totals"]);
+
+  const handleCopy = () => {
+    const content =
+      activeTab === "json"
+        ? JSON.stringify(mockData, null, 2)
+        : activeTab === "xml"
+        ? mockXML
+        : mockText;
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const toggleSection = (section) => {
+    setExpandedSections((prev) =>
+      prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section]
+    );
+  };
+
+  const renderValue = (value) => {
+    if (typeof value === "number") {
+      return <span className="text-amber-600">{value}</span>;
+    }
+    if (typeof value === "string") {
+      return <span className="text-emerald-600">"{value}"</span>;
+    }
+    return String(value);
+  };
+
+  const renderSection = (key, value, level = 0) => {
+    const isExpanded = expandedSections.includes(key);
+    const isObject = typeof value === "object" && value !== null;
+    const isArray = Array.isArray(value);
+
+    if (!isObject) {
+      return (
+        <div
+          key={key}
+          className="flex items-start gap-2 py-1"
+          style={{ paddingLeft: level * 16 }}
+        >
+          <span className="text-violet-500">"{key}"</span>
+          <span className="text-slate-400">:</span>
+          {renderValue(value)}
+        </div>
+      );
+    }
+
+    return (
+      <div key={key}>
+        <button
+          onClick={() => toggleSection(key)}
+          className="flex items-center gap-2 py-1 hover:bg-slate-50 w-full text-left rounded"
+          style={{ paddingLeft: level * 16 }}
+        >
+          <ChevronDown
+            className={cn(
+              "h-3 w-3 text-slate-400 transition-transform",
+              !isExpanded && "-rotate-90"
+            )}
+          />
+          <span className="text-violet-500">"{key}"</span>
+          <span className="text-slate-400">:</span>
+          <span className="text-slate-400">{isArray ? "[" : "{"}</span>
+          {!isExpanded && (
+            <span className="text-slate-300 text-xs">
+              {isArray ? `${value.length} items` : `${Object.keys(value).length} fields`}
+            </span>
+          )}
+        </button>
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="overflow-hidden"
+            >
+              {isArray ? (
+                value.map((item, idx) => (
+                  <div key={idx} className="border-l border-slate-100 ml-4">
+                    {Object.entries(item).map(([k, v]) => renderSection(k, v, level + 2))}
+                    {idx < value.length - 1 && <div className="h-2" />}
+                  </div>
+                ))
+              ) : (
+                Object.entries(value).map(([k, v]) => renderSection(k, v, level + 1))
+              )}
+              <div style={{ paddingLeft: level * 16 }} className="text-slate-400">
+                {isArray ? "]" : "}"}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-white rounded-2xl border border-slate-200 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-8 rounded-lg bg-emerald-50 flex items-center justify-center">
+            <Code2 className="h-4 w-4 text-emerald-600" />
+          </div>
+          <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"}
+            </p>
+          </div>
+        </div>
+
+        {isComplete && (
+          <div className="flex items-center gap-2">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="h-8 bg-slate-100 p-0.5">
+                <TabsTrigger value="text" className="h-7 text-xs gap-1.5">
+                  <FileText className="h-3 w-3" />
+                  Text
+                </TabsTrigger>
+                <TabsTrigger value="json" className="h-7 text-xs gap-1.5">
+                  <Braces className="h-3 w-3" />
+                  JSON
+                </TabsTrigger>
+                <TabsTrigger value="xml" className="h-7 text-xs gap-1.5">
+                  <FileCode2 className="h-3 w-3" />
+                  XML
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              className="h-8 text-xs gap-1.5"
+            >
+              {copied ? (
+                <>
+                  <Check className="h-3 w-3 text-emerald-500" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <Copy className="h-3 w-3" />
+                  Copy
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Output Area */}
+      <div className="flex-1 overflow-auto">
+        {!hasFile ? (
+          <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-slate-100 flex items-center justify-center mb-4">
+                <Code2 className="h-10 w-10 text-slate-300" />
+              </div>
+              <p className="text-slate-400 text-sm">Extracted data will appear here</p>
+            </div>
+          </div>
+        ) : isProcessing ? (
+          <div className="h-full flex items-center justify-center p-6">
+            <div className="text-center">
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                className="h-16 w-16 mx-auto rounded-2xl bg-gradient-to-br from-indigo-100 to-violet-100 flex items-center justify-center mb-4"
+              >
+                <Sparkles className="h-8 w-8 text-indigo-500" />
+              </motion.div>
+              <p className="text-slate-700 font-medium mb-1">AI is extracting data...</p>
+              <p className="text-slate-400 text-sm">Analyzing document structure</p>
+
+              <div className="mt-6 flex items-center justify-center gap-1">
+                {[0, 1, 2].map((i) => (
+                  <motion.div
+                    key={i}
+                    animate={{ scale: [1, 1.2, 1] }}
+                    transition={{
+                      duration: 0.6,
+                      repeat: Infinity,
+                      delay: i * 0.2,
+                    }}
+                    className="h-2 w-2 rounded-full bg-indigo-400"
+                  />
+                ))}
+              </div>
+            </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}
+              </pre>
+            ) : activeTab === "json" ? (
+              <div className="space-y-1">
+                <span className="text-slate-400">{"{"}</span>
+                {Object.entries(mockData).map(([key, value]) =>
+                  renderSection(key, value, 1)
+                )}
+                <span className="text-slate-400">{"}"}</span>
+              </div>
+            ) : (
+              <pre className="text-sm text-slate-600 whitespace-pre-wrap">
+                {mockXML.split("\n").map((line, i) => (
+                  <div key={i} className="hover:bg-slate-50 px-2 -mx-2 rounded">
+                    {line.includes("<") ? (
+                      <>
+                        {line.split(/(<\/?[\w\s=".-]+>)/g).map((part, j) => {
+                          if (part.startsWith("</")) {
+                            return (
+                              <span key={j} className="text-rose-500">
+                                {part}
+                              </span>
+                            );
+                          }
+                          if (part.startsWith("<")) {
+                            return (
+                              <span key={j} className="text-indigo-500">
+                                {part}
+                              </span>
+                            );
+                          }
+                          return (
+                            <span key={j} className="text-slate-700">
+                              {part}
+                            </span>
+                          );
+                        })}
+                      </>
+                    ) : (
+                      line
+                    )}
+                  </div>
+                ))}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Confidence Footer */}
+      {isComplete && (
+        <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" />
+                <span className="text-slate-500">Confidence:</span>
+                <span className="font-semibold text-slate-700">98%</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>
+              </div>
+            </div>
+            <span className="text-slate-400">Processed in 2.3s</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}