update

frontend/src/components/ExportButtons.jsx

@@ -1,697 +1,3 @@
-<<<<<<< HEAD
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  Download,
-  Braces,
-  FileCode2,
-  Check,
-  Share2,
-  FileText,
-  Link2,
-  Mail,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-import ShareModal from "@/components/ShareModal";
-import ShareLinkModal from "@/components/ShareLinkModal";
-import { shareExtraction, createShareLink } from "@/services/api";
-
-// Helper functions from ExtractionOutput
-function prepareFieldsForOutput(fields, format = "json") {
-  if (!fields || typeof fields !== "object") {
-    return fields;
-  }
-  
-  const output = { ...fields };
-  
-  // Extract Fields from root level if it exists
-  const rootFields = output.Fields;
-  // Remove Fields from output temporarily (will be added back at top)
-  delete output.Fields;
-  
-  // Remove full_text from top-level if pages array exists (to avoid duplication)
-  if (output.pages && Array.isArray(output.pages) && output.pages.length > 0) {
-    delete output.full_text;
-    
-    // Clean up each page: remove full_text from page.fields (it duplicates page.text)
-    output.pages = output.pages.map(page => {
-      const cleanedPage = { ...page };
-      if (cleanedPage.fields && typeof cleanedPage.fields === "object") {
-        const cleanedFields = { ...cleanedPage.fields };
-        // Remove full_text from page fields (duplicates page.text)
-        delete cleanedFields.full_text;
-        cleanedPage.fields = cleanedFields;
-      }
-      return cleanedPage;
-    });
-  }
-  
-  // For JSON and XML: restructure pages into separate top-level fields (page_1, page_2, etc.)
-  if ((format === "json" || format === "xml") && output.pages && Array.isArray(output.pages)) {
-    // Get top-level field keys (these are merged from all pages - avoid duplicating in page fields)
-    const topLevelKeys = new Set(Object.keys(output).filter(k => k !== "pages" && k !== "full_text" && k !== "Fields"));
-    
-    output.pages.forEach((page, idx) => {
-      const pageNum = page.page_number || idx + 1;
-      const pageFields = page.fields || {};
-      
-      // Remove duplicate fields from page.fields:
-      // 1. Remove full_text (duplicates page.text)
-      // 2. Remove fields that match top-level fields (already shown at root)
-      const cleanedPageFields = {};
-      for (const [key, value] of Object.entries(pageFields)) {
-        // Skip full_text and fields that match top-level exactly
-        if (key !== "full_text" && (!topLevelKeys.has(key) || (value !== output[key]))) {
-          cleanedPageFields[key] = value;
-        }
-      }
-      
-      const pageObj = {
-        text: page.text || "",
-        confidence: page.confidence || 0,
-        doc_type: page.doc_type || "other"
-      };
-      
-      // Add table and footer_notes if they exist
-      if (page.table && Array.isArray(page.table) && page.table.length > 0) {
-        pageObj.table = page.table;
-      }
-      if (page.footer_notes && Array.isArray(page.footer_notes) && page.footer_notes.length > 0) {
-        pageObj.footer_notes = page.footer_notes;
-      }
-      
-      // Only add fields if there are unique page-specific fields
-      if (Object.keys(cleanedPageFields).length > 0) {
-        pageObj.fields = cleanedPageFields;
-      }
-      
-      output[`page_${pageNum}`] = pageObj;
-    });
-    // Remove pages array - we now have page_1, page_2, etc. as separate fields
-    delete output.pages;
-  }
-  
-  // Handle page_X structure (from backend) - remove Fields from page objects if they exist
-  if (output && typeof output === "object") {
-    const pageKeys = Object.keys(output).filter(k => k.startsWith("page_"));
-    for (const pageKey of pageKeys) {
-      const pageData = output[pageKey];
-      if (pageData && typeof pageData === "object") {
-        // Remove Fields from page objects (it's now at root level)
-        delete pageData.Fields;
-        delete pageData.metadata;
-      }
-    }
-  }
-  
-  // Rebuild output with Fields at the top (only if it exists and is not empty)
-  const finalOutput = {};
-  if (rootFields && typeof rootFields === "object" && Object.keys(rootFields).length > 0) {
-    finalOutput.Fields = rootFields;
-  }
-  
-  // Add all other keys
-  Object.keys(output).forEach(key => {
-    finalOutput[key] = output[key];
-  });
-  
-  return finalOutput;
-}
-
-function escapeXML(str) {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&apos;");
-}
-
-function objectToXML(obj, rootName = "extraction") {
-  // Prepare fields - remove full_text if pages exist
-  const preparedObj = prepareFieldsForOutput(obj, "xml");
-  
-  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;
-      
-      // Skip full_text if pages exist (already handled in prepareFieldsForOutput)
-      if (key === "full_text" && obj.pages && Array.isArray(obj.pages) && obj.pages.length > 0) {
-        continue;
-      }
-      
-      if (Array.isArray(value)) {
-        value.forEach((item) => {
-          xml += `${indent}<${key}>\n`;
-          if (typeof item === "object") {
-            convert(item, indent + "  ");
-          } else {
-            xml += `${indent}  ${escapeXML(String(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}>${escapeXML(String(value))}</${key}>\n`;
-      }
-    }
-  };
-  
-  convert(preparedObj);
-  xml += `</${rootName}>`;
-  return xml;
-}
-
-export default function ExportButtons({ isComplete, extractionResult }) {
-  const [downloading, setDownloading] = useState(null);
-  const [copied, setCopied] = useState(false);
-  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
-  const [isShareLinkModalOpen, setIsShareLinkModalOpen] = useState(false);
-  const [shareLink, setShareLink] = useState("");
-  const [isGeneratingLink, setIsGeneratingLink] = useState(false);
-
-  // Helper function to extract text from fields (same as in ExtractionOutput)
-  const extractTextFromFields = (fields) => {
-    if (!fields || typeof fields !== "object") {
-      return "";
-    }
-    
-    // Check for page_X structure first (preferred format)
-    const pageKeys = Object.keys(fields).filter(key => key.startsWith("page_"));
-    if (pageKeys.length > 0) {
-      // Get text from first page (or combine all pages)
-      const pageTexts = pageKeys.map(key => {
-        const page = fields[key];
-        if (page && page.text) {
-          return page.text;
-        }
-        return "";
-      }).filter(text => text);
-      
-      if (pageTexts.length > 0) {
-        return pageTexts.join("\n\n");
-      }
-    }
-    
-    // Fallback to full_text
-    if (fields.full_text) {
-      return fields.full_text;
-    }
-    
-    return "";
-  };
-
-  // Helper function to escape HTML
-  const escapeHtml = (text) => {
-    if (!text) return '';
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  };
-
-  // Helper function to convert pipe-separated tables to HTML tables
-  const convertPipeTablesToHTML = (text) => {
-    if (!text) return text;
-    
-    const lines = text.split('\n');
-    const result = [];
-    let i = 0;
-    
-    while (i < lines.length) {
-      const line = lines[i];
-      
-      // Check if this line looks like a table row (has multiple pipes)
-      if (line.includes('|') && line.split('|').length >= 3) {
-        // Check if it's a separator line (only |, -, :, spaces)
-        const isSeparator = /^[\s|\-:]+$/.test(line.trim());
-        
-        if (!isSeparator) {
-          // Start of a table - collect all table rows
-          const tableRows = [];
-          let j = i;
-          
-          // Collect header row
-          const headerLine = lines[j];
-          const headerCells = headerLine.split('|').map(cell => cell.trim()).filter(cell => cell || cell === '');
-          // Remove empty cells at start/end
-          if (headerCells.length > 0 && !headerCells[0]) headerCells.shift();
-          if (headerCells.length > 0 && !headerCells[headerCells.length - 1]) headerCells.pop();
-          
-          if (headerCells.length >= 2) {
-            tableRows.push(headerCells);
-            j++;
-            
-            // Skip separator line if present
-            if (j < lines.length && /^[\s|\-:]+$/.test(lines[j].trim())) {
-              j++;
-            }
-            
-            // Collect data rows
-            while (j < lines.length) {
-              const rowLine = lines[j];
-              if (!rowLine.trim()) break; // Empty line ends table
-              
-              // Check if it's still a table row
-              if (rowLine.includes('|') && rowLine.split('|').length >= 2) {
-                const isRowSeparator = /^[\s|\-:]+$/.test(rowLine.trim());
-                if (!isRowSeparator) {
-                  const rowCells = rowLine.split('|').map(cell => cell.trim());
-                  // Remove empty cells at start/end
-                  if (rowCells.length > 0 && !rowCells[0]) rowCells.shift();
-                  if (rowCells.length > 0 && !rowCells[rowCells.length - 1]) rowCells.pop();
-                  tableRows.push(rowCells);
-                  j++;
-                } else {
-                  j++;
-                }
-              } else {
-                break; // Not a table row anymore
-              }
-            }
-            
-            // Convert to HTML table
-            if (tableRows.length > 0) {
-              let htmlTable = '<table class="border-collapse border border-gray-300 w-full my-4">\n<thead>\n<tr>';
-              
-              // Header row
-              tableRows[0].forEach(cell => {
-                htmlTable += `<th class="border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left">${escapeHtml(cell)}</th>`;
-              });
-              htmlTable += '</tr>\n</thead>\n<tbody>\n';
-              
-              // Data rows
-              for (let rowIdx = 1; rowIdx < tableRows.length; rowIdx++) {
-                htmlTable += '<tr>';
-                tableRows[rowIdx].forEach((cell, colIdx) => {
-                  // Use header cell count to ensure alignment
-                  const cellContent = cell || '';
-                  htmlTable += `<td class="border border-gray-300 px-4 py-2">${escapeHtml(cellContent)}</td>`;
-                });
-                htmlTable += '</tr>\n';
-              }
-              
-              htmlTable += '</tbody>\n</table>';
-              result.push(htmlTable);
-              i = j;
-              continue;
-            }
-          }
-        }
-      }
-      
-      // Not a table row, add as-is
-      result.push(line);
-      i++;
-    }
-    
-    return result.join('\n');
-  };
-
-  // Helper function to render markdown to HTML (same as in ExtractionOutput)
-  const renderMarkdownToHTML = (text) => {
-    if (!text) return "";
-    
-    let html = text;
-    
-    // FIRST: Convert pipe-separated tables to HTML tables
-    html = convertPipeTablesToHTML(html);
-    
-    // Convert LaTeX-style superscripts/subscripts FIRST
-    html = html.replace(/\$\s*\^\s*\{([^}]+)\}\s*\$/g, '<sup>$1</sup>');
-    html = html.replace(/\$\s*\^\s*([^\s$<>]+)\s*\$/g, '<sup>$1</sup>');
-    html = html.replace(/\$\s*_\s*\{([^}]+)\}\s*\$/g, '<sub>$1</sub>');
-    html = html.replace(/\$\s*_\s*([^\s$<>]+)\s*\$/g, '<sub>$1</sub>');
-    
-    // Protect HTML table blocks
-    const htmlBlocks = [];
-    let htmlBlockIndex = 0;
-    
-    html = html.replace(/<table[\s\S]*?<\/table>/gi, (match) => {
-      const placeholder = `__HTML_BLOCK_${htmlBlockIndex}__`;
-      htmlBlocks[htmlBlockIndex] = match;
-      htmlBlockIndex++;
-      return placeholder;
-    });
-    
-    // Convert markdown headers
-    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
-    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
-    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
-    
-    // Convert markdown bold/italic
-    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
-    
-    // Convert markdown links
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
-    
-    // Process line breaks
-    const parts = html.split(/(__HTML_BLOCK_\d+__)/);
-    const processedParts = parts.map((part) => {
-      if (part.match(/^__HTML_BLOCK_\d+__$/)) {
-        const blockIndex = parseInt(part.match(/\d+/)[0]);
-        return htmlBlocks[blockIndex];
-      } else {
-        let processed = part;
-        processed = processed.replace(/\n\n+/g, '</p><p>');
-        processed = processed.replace(/([^\n>])\n([^\n<])/g, '$1<br>$2');
-        if (processed.trim() && !processed.trim().startsWith('<')) {
-          processed = '<p>' + processed + '</p>';
-        }
-        return processed;
-      }
-    });
-    
-    html = processedParts.join('');
-    html = html.replace(/<p><\/p>/g, '');
-    html = html.replace(/<p>\s*<br>\s*<\/p>/g, '');
-    html = html.replace(/<p>\s*<\/p>/g, '');
-    
-    return html;
-  };
-
-  const handleDownload = async (format) => {
-    if (!extractionResult || !extractionResult.fields) {
-      console.error("No extraction data available");
-      return;
-    }
-
-    setDownloading(format);
-    
-    try {
-      const fields = extractionResult.fields;
-      let content = "";
-      let filename = "";
-      let mimeType = "";
-
-      if (format === "json") {
-        const preparedFields = prepareFieldsForOutput(fields, "json");
-        content = JSON.stringify(preparedFields, null, 2);
-        filename = `extraction_${new Date().toISOString().split('T')[0]}.json`;
-        mimeType = "application/json";
-      } else if (format === "xml") {
-        content = objectToXML(fields);
-        filename = `extraction_${new Date().toISOString().split('T')[0]}.xml`;
-        mimeType = "application/xml";
-      } else if (format === "docx") {
-        // For DOCX, create a Word-compatible HTML document that preserves layout
-        // Extract text and convert to HTML (same as text viewer)
-        const textContent = extractTextFromFields(fields);
-        const htmlContent = renderMarkdownToHTML(textContent);
-        
-        // Create a Word-compatible HTML document with proper MIME type
-        // Word can open HTML files with .docx extension if we use the right MIME type
-        const wordHTML = `<!DOCTYPE html>
-<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
-<head>
-  <meta charset="UTF-8">
-  <meta name="ProgId" content="Word.Document">
-  <meta name="Generator" content="Microsoft Word">
-  <meta name="Originator" content="Microsoft Word">
-  <!--[if gte mso 9]><xml>
-   <w:WordDocument>
-    <w:View>Print</w:View>
-    <w:Zoom>100</w:Zoom>
-    <w:DoNotOptimizeForBrowser/>
-   </w:WordDocument>
-  </xml><![endif]-->
-  <title>Document Extraction</title>
-  <style>
-    @page {
-      size: 8.5in 11in;
-      margin: 1in;
-    }
-    body {
-      font-family: 'Calibri', 'Arial', sans-serif;
-      font-size: 11pt;
-      line-height: 1.6;
-      margin: 0;
-      color: #333;
-    }
-    h1 {
-      font-size: 18pt;
-      font-weight: bold;
-      color: #0f172a;
-      margin-top: 24pt;
-      margin-bottom: 12pt;
-      page-break-after: avoid;
-    }
-    h2 {
-      font-size: 16pt;
-      font-weight: 600;
-      color: #0f172a;
-      margin-top: 20pt;
-      margin-bottom: 10pt;
-      page-break-after: avoid;
-    }
-    h3 {
-      font-size: 14pt;
-      font-weight: 600;
-      color: #1e293b;
-      margin-top: 16pt;
-      margin-bottom: 8pt;
-      page-break-after: avoid;
-    }
-    p {
-      margin-top: 6pt;
-      margin-bottom: 6pt;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 12pt 0;
-      font-size: 10pt;
-      page-break-inside: avoid;
-    }
-    table th {
-      background-color: #f8fafc;
-      border: 1pt solid #cbd5e1;
-      padding: 6pt;
-      text-align: left;
-      font-weight: 600;
-      color: #0f172a;
-    }
-    table td {
-      border: 1pt solid #cbd5e1;
-      padding: 6pt;
-      color: #334155;
-    }
-    table tr:nth-child(even) {
-      background-color: #f8fafc;
-    }
-    sup {
-      font-size: 0.75em;
-      vertical-align: super;
-      line-height: 0;
-    }
-    sub {
-      font-size: 0.75em;
-      vertical-align: sub;
-      line-height: 0;
-    }
-    strong {
-      font-weight: 600;
-    }
-    em {
-      font-style: italic;
-    }
-    a {
-      color: #4f46e5;
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-${htmlContent}
-</body>
-</html>`;
-        
-        content = wordHTML;
-        filename = `extraction_${new Date().toISOString().split('T')[0]}.doc`;
-        mimeType = "application/msword";
-      }
-
-      // Create blob and download
-      const blob = new Blob([content], { type: mimeType });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-
-      setDownloading(null);
-    } catch (error) {
-      console.error("Download error:", error);
-      setDownloading(null);
-    }
-  };
-
-  const handleCopyLink = async () => {
-    if (!extractionResult?.id) return;
-    
-    setIsGeneratingLink(true);
-    setIsShareLinkModalOpen(true);
-    setShareLink("");
-    
-    try {
-      const result = await createShareLink(extractionResult.id);
-      if (result.success && result.share_link) {
-        setShareLink(result.share_link);
-      } else {
-        throw new Error("Failed to generate share link");
-      }
-    } catch (err) {
-      console.error("Failed to create share link:", err);
-      setShareLink("");
-      // Still show modal but with error state
-    } finally {
-      setIsGeneratingLink(false);
-    }
-  };
-
-  const handleShare = async (extractionId, recipientEmail) => {
-    await shareExtraction(extractionId, recipientEmail);
-  };
-
-  if (!isComplete) return null;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="flex items-center gap-3"
-    >
-      {/* Export Options Dropdown */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button 
-            variant="ghost" 
-            className="h-11 w-11 rounded-xl hover:bg-slate-100"
-            disabled={downloading !== null}
-          >
-            {downloading ? (
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              >
-                <Download className="h-4 w-4" />
-              </motion.div>
-            ) : (
-              <Share2 className="h-4 w-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-56 rounded-xl p-2">
-          <DropdownMenuItem
-            className="rounded-lg cursor-pointer"
-            onClick={() => setIsShareModalOpen(true)}
-          >
-            <Mail className="h-4 w-4 mr-2 text-indigo-600" />
-            Share output
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="rounded-lg cursor-pointer"
-            onClick={handleCopyLink}
-          >
-            <Link2 className="h-4 w-4 mr-2 text-indigo-600" />
-            Copy share link
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            className="rounded-lg cursor-pointer"
-            onClick={() => handleDownload("docx")}
-            disabled={downloading === "docx"}
-          >
-            {downloading === "docx" ? (
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-                className="h-4 w-4 mr-2"
-              >
-                <Download className="h-4 w-4" />
-              </motion.div>
-            ) : (
-              <FileText className="h-4 w-4 mr-2 text-blue-600" />
-            )}
-            Download Docx
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="rounded-lg cursor-pointer"
-            onClick={() => handleDownload("json")}
-            disabled={downloading === "json"}
-          >
-            {downloading === "json" ? (
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-                className="h-4 w-4 mr-2"
-              >
-                <Download className="h-4 w-4" />
-              </motion.div>
-            ) : (
-              <Braces className="h-4 w-4 mr-2 text-indigo-600" />
-            )}
-            Download JSON
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="rounded-lg cursor-pointer"
-            onClick={() => handleDownload("xml")}
-            disabled={downloading === "xml"}
-          >
-            {downloading === "xml" ? (
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-                className="h-4 w-4 mr-2"
-              >
-                <Download className="h-4 w-4" />
-              </motion.div>
-            ) : (
-              <FileCode2 className="h-4 w-4 mr-2 text-slate-600" />
-            )}
-            Download XML
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* Share Modal */}
-      <ShareModal
-        isOpen={isShareModalOpen}
-        onClose={() => setIsShareModalOpen(false)}
-        onShare={handleShare}
-        extractionId={extractionResult?.id}
-      />
-
-      {/* Share Link Modal */}
-      <ShareLinkModal
-        isOpen={isShareLinkModalOpen}
-        onClose={() => {
-          setIsShareLinkModalOpen(false);
-          setShareLink("");
-        }}
-        shareLink={shareLink}
-        isLoading={isGeneratingLink}
-      />
-    </motion.div>
-  );
-}
-=======
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
@@ -1384,4 +690,694 @@ ${htmlContent}
     </motion.div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Download,
+  Braces,
+  FileCode2,
+  Check,
+  Share2,
+  FileText,
+  Link2,
+  Mail,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import ShareModal from "@/components/ShareModal";
+import ShareLinkModal from "@/components/ShareLinkModal";
+import { shareExtraction, createShareLink } from "@/services/api";
+
+// Helper functions from ExtractionOutput
+function prepareFieldsForOutput(fields, format = "json") {
+  if (!fields || typeof fields !== "object") {
+    return fields;
+  }
+  
+  const output = { ...fields };
+  
+  // Extract Fields from root level if it exists
+  const rootFields = output.Fields;
+  // Remove Fields from output temporarily (will be added back at top)
+  delete output.Fields;
+  
+  // Remove full_text from top-level if pages array exists (to avoid duplication)
+  if (output.pages && Array.isArray(output.pages) && output.pages.length > 0) {
+    delete output.full_text;
+    
+    // Clean up each page: remove full_text from page.fields (it duplicates page.text)
+    output.pages = output.pages.map(page => {
+      const cleanedPage = { ...page };
+      if (cleanedPage.fields && typeof cleanedPage.fields === "object") {
+        const cleanedFields = { ...cleanedPage.fields };
+        // Remove full_text from page fields (duplicates page.text)
+        delete cleanedFields.full_text;
+        cleanedPage.fields = cleanedFields;
+      }
+      return cleanedPage;
+    });
+  }
+  
+  // For JSON and XML: restructure pages into separate top-level fields (page_1, page_2, etc.)
+  if ((format === "json" || format === "xml") && output.pages && Array.isArray(output.pages)) {
+    // Get top-level field keys (these are merged from all pages - avoid duplicating in page fields)
+    const topLevelKeys = new Set(Object.keys(output).filter(k => k !== "pages" && k !== "full_text" && k !== "Fields"));
+    
+    output.pages.forEach((page, idx) => {
+      const pageNum = page.page_number || idx + 1;
+      const pageFields = page.fields || {};
+      
+      // Remove duplicate fields from page.fields:
+      // 1. Remove full_text (duplicates page.text)
+      // 2. Remove fields that match top-level fields (already shown at root)
+      const cleanedPageFields = {};
+      for (const [key, value] of Object.entries(pageFields)) {
+        // Skip full_text and fields that match top-level exactly
+        if (key !== "full_text" && (!topLevelKeys.has(key) || (value !== output[key]))) {
+          cleanedPageFields[key] = value;
+        }
+      }
+      
+      const pageObj = {
+        text: page.text || "",
+        confidence: page.confidence || 0,
+        doc_type: page.doc_type || "other"
+      };
+      
+      // Add table and footer_notes if they exist
+      if (page.table && Array.isArray(page.table) && page.table.length > 0) {
+        pageObj.table = page.table;
+      }
+      if (page.footer_notes && Array.isArray(page.footer_notes) && page.footer_notes.length > 0) {
+        pageObj.footer_notes = page.footer_notes;
+      }
+      
+      // Only add fields if there are unique page-specific fields
+      if (Object.keys(cleanedPageFields).length > 0) {
+        pageObj.fields = cleanedPageFields;
+      }
+      
+      output[`page_${pageNum}`] = pageObj;
+    });
+    // Remove pages array - we now have page_1, page_2, etc. as separate fields
+    delete output.pages;
+  }
+  
+  // Handle page_X structure (from backend) - remove Fields from page objects if they exist
+  if (output && typeof output === "object") {
+    const pageKeys = Object.keys(output).filter(k => k.startsWith("page_"));
+    for (const pageKey of pageKeys) {
+      const pageData = output[pageKey];
+      if (pageData && typeof pageData === "object") {
+        // Remove Fields from page objects (it's now at root level)
+        delete pageData.Fields;
+        delete pageData.metadata;
+      }
+    }
+  }
+  
+  // Rebuild output with Fields at the top (only if it exists and is not empty)
+  const finalOutput = {};
+  if (rootFields && typeof rootFields === "object" && Object.keys(rootFields).length > 0) {
+    finalOutput.Fields = rootFields;
+  }
+  
+  // Add all other keys
+  Object.keys(output).forEach(key => {
+    finalOutput[key] = output[key];
+  });
+  
+  return finalOutput;
+}
+
+function escapeXML(str) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+function objectToXML(obj, rootName = "extraction") {
+  // Prepare fields - remove full_text if pages exist
+  const preparedObj = prepareFieldsForOutput(obj, "xml");
+  
+  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;
+      
+      // Skip full_text if pages exist (already handled in prepareFieldsForOutput)
+      if (key === "full_text" && obj.pages && Array.isArray(obj.pages) && obj.pages.length > 0) {
+        continue;
+      }
+      
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          xml += `${indent}<${key}>\n`;
+          if (typeof item === "object") {
+            convert(item, indent + "  ");
+          } else {
+            xml += `${indent}  ${escapeXML(String(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}>${escapeXML(String(value))}</${key}>\n`;
+      }
+    }
+  };
+  
+  convert(preparedObj);
+  xml += `</${rootName}>`;
+  return xml;
+}
+
+export default function ExportButtons({ isComplete, extractionResult }) {
+  const [downloading, setDownloading] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const [isShareLinkModalOpen, setIsShareLinkModalOpen] = useState(false);
+  const [shareLink, setShareLink] = useState("");
+  const [isGeneratingLink, setIsGeneratingLink] = useState(false);
+
+  // Helper function to extract text from fields (same as in ExtractionOutput)
+  const extractTextFromFields = (fields) => {
+    if (!fields || typeof fields !== "object") {
+      return "";
+    }
+    
+    // Check for page_X structure first (preferred format)
+    const pageKeys = Object.keys(fields).filter(key => key.startsWith("page_"));
+    if (pageKeys.length > 0) {
+      // Get text from first page (or combine all pages)
+      const pageTexts = pageKeys.map(key => {
+        const page = fields[key];
+        if (page && page.text) {
+          return page.text;
+        }
+        return "";
+      }).filter(text => text);
+      
+      if (pageTexts.length > 0) {
+        return pageTexts.join("\n\n");
+      }
+    }
+    
+    // Fallback to full_text
+    if (fields.full_text) {
+      return fields.full_text;
+    }
+    
+    return "";
+  };
+
+  // Helper function to escape HTML
+  const escapeHtml = (text) => {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  };
+
+  // Helper function to convert pipe-separated tables to HTML tables
+  const convertPipeTablesToHTML = (text) => {
+    if (!text) return text;
+    
+    const lines = text.split('\n');
+    const result = [];
+    let i = 0;
+    
+    while (i < lines.length) {
+      const line = lines[i];
+      
+      // Check if this line looks like a table row (has multiple pipes)
+      if (line.includes('|') && line.split('|').length >= 3) {
+        // Check if it's a separator line (only |, -, :, spaces)
+        const isSeparator = /^[\s|\-:]+$/.test(line.trim());
+        
+        if (!isSeparator) {
+          // Start of a table - collect all table rows
+          const tableRows = [];
+          let j = i;
+          
+          // Collect header row
+          const headerLine = lines[j];
+          const headerCells = headerLine.split('|').map(cell => cell.trim()).filter(cell => cell || cell === '');
+          // Remove empty cells at start/end
+          if (headerCells.length > 0 && !headerCells[0]) headerCells.shift();
+          if (headerCells.length > 0 && !headerCells[headerCells.length - 1]) headerCells.pop();
+          
+          if (headerCells.length >= 2) {
+            tableRows.push(headerCells);
+            j++;
+            
+            // Skip separator line if present
+            if (j < lines.length && /^[\s|\-:]+$/.test(lines[j].trim())) {
+              j++;
+            }
+            
+            // Collect data rows
+            while (j < lines.length) {
+              const rowLine = lines[j];
+              if (!rowLine.trim()) break; // Empty line ends table
+              
+              // Check if it's still a table row
+              if (rowLine.includes('|') && rowLine.split('|').length >= 2) {
+                const isRowSeparator = /^[\s|\-:]+$/.test(rowLine.trim());
+                if (!isRowSeparator) {
+                  const rowCells = rowLine.split('|').map(cell => cell.trim());
+                  // Remove empty cells at start/end
+                  if (rowCells.length > 0 && !rowCells[0]) rowCells.shift();
+                  if (rowCells.length > 0 && !rowCells[rowCells.length - 1]) rowCells.pop();
+                  tableRows.push(rowCells);
+                  j++;
+                } else {
+                  j++;
+                }
+              } else {
+                break; // Not a table row anymore
+              }
+            }
+            
+            // Convert to HTML table
+            if (tableRows.length > 0) {
+              let htmlTable = '<table class="border-collapse border border-gray-300 w-full my-4">\n<thead>\n<tr>';
+              
+              // Header row
+              tableRows[0].forEach(cell => {
+                htmlTable += `<th class="border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left">${escapeHtml(cell)}</th>`;
+              });
+              htmlTable += '</tr>\n</thead>\n<tbody>\n';
+              
+              // Data rows
+              for (let rowIdx = 1; rowIdx < tableRows.length; rowIdx++) {
+                htmlTable += '<tr>';
+                tableRows[rowIdx].forEach((cell, colIdx) => {
+                  // Use header cell count to ensure alignment
+                  const cellContent = cell || '';
+                  htmlTable += `<td class="border border-gray-300 px-4 py-2">${escapeHtml(cellContent)}</td>`;
+                });
+                htmlTable += '</tr>\n';
+              }
+              
+              htmlTable += '</tbody>\n</table>';
+              result.push(htmlTable);
+              i = j;
+              continue;
+            }
+          }
+        }
+      }
+      
+      // Not a table row, add as-is
+      result.push(line);
+      i++;
+    }
+    
+    return result.join('\n');
+  };
+
+  // Helper function to render markdown to HTML (same as in ExtractionOutput)
+  const renderMarkdownToHTML = (text) => {
+    if (!text) return "";
+    
+    let html = text;
+    
+    // FIRST: Convert pipe-separated tables to HTML tables
+    html = convertPipeTablesToHTML(html);
+    
+    // Convert LaTeX-style superscripts/subscripts FIRST
+    html = html.replace(/\$\s*\^\s*\{([^}]+)\}\s*\$/g, '<sup>$1</sup>');
+    html = html.replace(/\$\s*\^\s*([^\s$<>]+)\s*\$/g, '<sup>$1</sup>');
+    html = html.replace(/\$\s*_\s*\{([^}]+)\}\s*\$/g, '<sub>$1</sub>');
+    html = html.replace(/\$\s*_\s*([^\s$<>]+)\s*\$/g, '<sub>$1</sub>');
+    
+    // Protect HTML table blocks
+    const htmlBlocks = [];
+    let htmlBlockIndex = 0;
+    
+    html = html.replace(/<table[\s\S]*?<\/table>/gi, (match) => {
+      const placeholder = `__HTML_BLOCK_${htmlBlockIndex}__`;
+      htmlBlocks[htmlBlockIndex] = match;
+      htmlBlockIndex++;
+      return placeholder;
+    });
+    
+    // Convert markdown headers
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+    
+    // Convert markdown bold/italic
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    
+    // Convert markdown links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+    
+    // Process line breaks
+    const parts = html.split(/(__HTML_BLOCK_\d+__)/);
+    const processedParts = parts.map((part) => {
+      if (part.match(/^__HTML_BLOCK_\d+__$/)) {
+        const blockIndex = parseInt(part.match(/\d+/)[0]);
+        return htmlBlocks[blockIndex];
+      } else {
+        let processed = part;
+        processed = processed.replace(/\n\n+/g, '</p><p>');
+        processed = processed.replace(/([^\n>])\n([^\n<])/g, '$1<br>$2');
+        if (processed.trim() && !processed.trim().startsWith('<')) {
+          processed = '<p>' + processed + '</p>';
+        }
+        return processed;
+      }
+    });
+    
+    html = processedParts.join('');
+    html = html.replace(/<p><\/p>/g, '');
+    html = html.replace(/<p>\s*<br>\s*<\/p>/g, '');
+    html = html.replace(/<p>\s*<\/p>/g, '');
+    
+    return html;
+  };
+
+  const handleDownload = async (format) => {
+    if (!extractionResult || !extractionResult.fields) {
+      console.error("No extraction data available");
+      return;
+    }
+
+    setDownloading(format);
+    
+    try {
+      const fields = extractionResult.fields;
+      let content = "";
+      let filename = "";
+      let mimeType = "";
+
+      if (format === "json") {
+        const preparedFields = prepareFieldsForOutput(fields, "json");
+        content = JSON.stringify(preparedFields, null, 2);
+        filename = `extraction_${new Date().toISOString().split('T')[0]}.json`;
+        mimeType = "application/json";
+      } else if (format === "xml") {
+        content = objectToXML(fields);
+        filename = `extraction_${new Date().toISOString().split('T')[0]}.xml`;
+        mimeType = "application/xml";
+      } else if (format === "docx") {
+        // For DOCX, create a Word-compatible HTML document that preserves layout
+        // Extract text and convert to HTML (same as text viewer)
+        const textContent = extractTextFromFields(fields);
+        const htmlContent = renderMarkdownToHTML(textContent);
+        
+        // Create a Word-compatible HTML document with proper MIME type
+        // Word can open HTML files with .docx extension if we use the right MIME type
+        const wordHTML = `<!DOCTYPE html>
+<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+  <meta charset="UTF-8">
+  <meta name="ProgId" content="Word.Document">
+  <meta name="Generator" content="Microsoft Word">
+  <meta name="Originator" content="Microsoft Word">
+  <!--[if gte mso 9]><xml>
+   <w:WordDocument>
+    <w:View>Print</w:View>
+    <w:Zoom>100</w:Zoom>
+    <w:DoNotOptimizeForBrowser/>
+   </w:WordDocument>
+  </xml><![endif]-->
+  <title>Document Extraction</title>
+  <style>
+    @page {
+      size: 8.5in 11in;
+      margin: 1in;
+    }
+    body {
+      font-family: 'Calibri', 'Arial', sans-serif;
+      font-size: 11pt;
+      line-height: 1.6;
+      margin: 0;
+      color: #333;
+    }
+    h1 {
+      font-size: 18pt;
+      font-weight: bold;
+      color: #0f172a;
+      margin-top: 24pt;
+      margin-bottom: 12pt;
+      page-break-after: avoid;
+    }
+    h2 {
+      font-size: 16pt;
+      font-weight: 600;
+      color: #0f172a;
+      margin-top: 20pt;
+      margin-bottom: 10pt;
+      page-break-after: avoid;
+    }
+    h3 {
+      font-size: 14pt;
+      font-weight: 600;
+      color: #1e293b;
+      margin-top: 16pt;
+      margin-bottom: 8pt;
+      page-break-after: avoid;
+    }
+    p {
+      margin-top: 6pt;
+      margin-bottom: 6pt;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 12pt 0;
+      font-size: 10pt;
+      page-break-inside: avoid;
+    }
+    table th {
+      background-color: #f8fafc;
+      border: 1pt solid #cbd5e1;
+      padding: 6pt;
+      text-align: left;
+      font-weight: 600;
+      color: #0f172a;
+    }
+    table td {
+      border: 1pt solid #cbd5e1;
+      padding: 6pt;
+      color: #334155;
+    }
+    table tr:nth-child(even) {
+      background-color: #f8fafc;
+    }
+    sup {
+      font-size: 0.75em;
+      vertical-align: super;
+      line-height: 0;
+    }
+    sub {
+      font-size: 0.75em;
+      vertical-align: sub;
+      line-height: 0;
+    }
+    strong {
+      font-weight: 600;
+    }
+    em {
+      font-style: italic;
+    }
+    a {
+      color: #4f46e5;
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+${htmlContent}
+</body>
+</html>`;
+        
+        content = wordHTML;
+        filename = `extraction_${new Date().toISOString().split('T')[0]}.doc`;
+        mimeType = "application/msword";
+      }
+
+      // Create blob and download
+      const blob = new Blob([content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      setDownloading(null);
+    } catch (error) {
+      console.error("Download error:", error);
+      setDownloading(null);
+    }
+  };
+
+  const handleCopyLink = async () => {
+    if (!extractionResult?.id) return;
+    
+    setIsGeneratingLink(true);
+    setIsShareLinkModalOpen(true);
+    setShareLink("");
+    
+    try {
+      const result = await createShareLink(extractionResult.id);
+      if (result.success && result.share_link) {
+        setShareLink(result.share_link);
+      } else {
+        throw new Error("Failed to generate share link");
+      }
+    } catch (err) {
+      console.error("Failed to create share link:", err);
+      setShareLink("");
+      // Still show modal but with error state
+    } finally {
+      setIsGeneratingLink(false);
+    }
+  };
+
+  const handleShare = async (extractionId, recipientEmail) => {
+    await shareExtraction(extractionId, recipientEmail);
+  };
+
+  if (!isComplete) return null;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex items-center gap-3"
+    >
+      {/* Export Options Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button 
+            variant="ghost" 
+            className="h-11 w-11 rounded-xl hover:bg-slate-100"
+            disabled={downloading !== null}
+          >
+            {downloading ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <Share2 className="h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56 rounded-xl p-2">
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => setIsShareModalOpen(true)}
+          >
+            <Mail className="h-4 w-4 mr-2 text-indigo-600" />
+            Share output
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={handleCopyLink}
+          >
+            <Link2 className="h-4 w-4 mr-2 text-indigo-600" />
+            Copy share link
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("docx")}
+            disabled={downloading === "docx"}
+          >
+            {downloading === "docx" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <FileText className="h-4 w-4 mr-2 text-blue-600" />
+            )}
+            Download Docx
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("json")}
+            disabled={downloading === "json"}
+          >
+            {downloading === "json" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <Braces className="h-4 w-4 mr-2 text-indigo-600" />
+            )}
+            Download JSON
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("xml")}
+            disabled={downloading === "xml"}
+          >
+            {downloading === "xml" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <FileCode2 className="h-4 w-4 mr-2 text-slate-600" />
+            )}
+            Download XML
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Share Modal */}
+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        onShare={handleShare}
+        extractionId={extractionResult?.id}
+      />
+
+      {/* Share Link Modal */}
+      <ShareLinkModal
+        isOpen={isShareLinkModalOpen}
+        onClose={() => {
+          setIsShareLinkModalOpen(false);
+          setShareLink("");
+        }}
+        shareLink={shareLink}
+        isLoading={isGeneratingLink}
+      />
+    </motion.div>
+  );
+}

frontend/src/components/ShareLinkModal.jsx

@@ -1,146 +1,3 @@
-<<<<<<< HEAD
-import React, { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { X, Copy, Check, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-export default function ShareLinkModal({ isOpen, onClose, shareLink, isLoading }) {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setCopied(false);
-    }
-  }, [isOpen]);
-
-  const handleCopy = async () => {
-    if (!shareLink) return;
-    
-    try {
-      await navigator.clipboard.writeText(shareLink);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      // Fallback for older browsers
-      const textArea = document.createElement("textarea");
-      textArea.value = shareLink;
-      textArea.style.position = "fixed";
-      textArea.style.opacity = "0";
-      document.body.appendChild(textArea);
-      textArea.select();
-      try {
-        document.execCommand("copy");
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } catch (fallbackErr) {
-        console.error("Failed to copy:", fallbackErr);
-      }
-      document.body.removeChild(textArea);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <AnimatePresence>
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        {/* Backdrop */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-          onClick={onClose}
-        />
-
-        {/* Modal */}
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95, y: 20 }}
-          animate={{ opacity: 1, scale: 1, y: 0 }}
-          exit={{ opacity: 0, scale: 0.95, y: 20 }}
-          className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
-            <h2 className="text-xl font-semibold text-slate-900">Copy Share Link</h2>
-            <button
-              onClick={onClose}
-              disabled={isLoading}
-              className="p-2 rounded-lg hover:bg-slate-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <X className="h-5 w-5 text-slate-500" />
-            </button>
-          </div>
-
-          {/* Content */}
-          <div className="px-6 py-6">
-            {isLoading ? (
-              <div className="text-center py-8">
-                <Loader2 className="h-8 w-8 mx-auto mb-4 text-indigo-600 animate-spin" />
-                <p className="text-sm text-slate-600">Generating share link...</p>
-              </div>
-            ) : shareLink ? (
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-2">
-                    Share Link
-                  </label>
-                  <div className="flex gap-2">
-                    <Input
-                      type="text"
-                      value={shareLink}
-                      readOnly
-                      className="flex-1 h-12 rounded-xl border-slate-200 bg-slate-50 text-sm font-mono"
-                    />
-                    <Button
-                      onClick={handleCopy}
-                      className="h-12 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
-                    >
-                      {copied ? (
-                        <>
-                          <Check className="h-4 w-4 mr-2" />
-                          Copied!
-                        </>
-                      ) : (
-                        <>
-                          <Copy className="h-4 w-4 mr-2" />
-                          Copy
-                        </>
-                      )}
-                    </Button>
-                  </div>
-                </div>
-                <p className="text-xs text-slate-500">
-                  Share this link with anyone you want to give access to this extraction. They'll need to sign in to view it.
-                </p>
-              </div>
-            ) : (
-              <div className="text-center py-8">
-                <p className="text-sm text-slate-600">No share link available</p>
-              </div>
-            )}
-
-            <div className="pt-4 mt-6 border-t border-slate-200">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onClose}
-                disabled={isLoading}
-                className="w-full h-11 rounded-xl"
-              >
-                Close
-              </Button>
-            </div>
-          </div>
-        </motion.div>
-      </div>
-    </AnimatePresence>
-  );
-}
-
-=======
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { X, Copy, Check, Loader2 } from "lucide-react";
@@ -281,5 +138,142 @@ export default function ShareLinkModal({ isOpen, onClose, shareLink, isLoading }
     </AnimatePresence>
   );
 }
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Copy, Check, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function ShareLinkModal({ isOpen, onClose, shareLink, isLoading }) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setCopied(false);
+    }
+  }, [isOpen]);
+
+  const handleCopy = async () => {
+    if (!shareLink) return;
+    
+    try {
+      await navigator.clipboard.writeText(shareLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for older browsers
+      const textArea = document.createElement("textarea");
+      textArea.value = shareLink;
+      textArea.style.position = "fixed";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        document.execCommand("copy");
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (fallbackErr) {
+        console.error("Failed to copy:", fallbackErr);
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        {/* Backdrop */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={onClose}
+        />
+
+        {/* Modal */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 20 }}
+          className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
+            <h2 className="text-xl font-semibold text-slate-900">Copy Share Link</h2>
+            <button
+              onClick={onClose}
+              disabled={isLoading}
+              className="p-2 rounded-lg hover:bg-slate-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <X className="h-5 w-5 text-slate-500" />
+            </button>
+          </div>
 
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+          {/* Content */}
+          <div className="px-6 py-6">
+            {isLoading ? (
+              <div className="text-center py-8">
+                <Loader2 className="h-8 w-8 mx-auto mb-4 text-indigo-600 animate-spin" />
+                <p className="text-sm text-slate-600">Generating share link...</p>
+              </div>
+            ) : shareLink ? (
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-2">
+                    Share Link
+                  </label>
+                  <div className="flex gap-2">
+                    <Input
+                      type="text"
+                      value={shareLink}
+                      readOnly
+                      className="flex-1 h-12 rounded-xl border-slate-200 bg-slate-50 text-sm font-mono"
+                    />
+                    <Button
+                      onClick={handleCopy}
+                      className="h-12 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
+                    >
+                      {copied ? (
+                        <>
+                          <Check className="h-4 w-4 mr-2" />
+                          Copied!
+                        </>
+                      ) : (
+                        <>
+                          <Copy className="h-4 w-4 mr-2" />
+                          Copy
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+                <p className="text-xs text-slate-500">
+                  Share this link with anyone you want to give access to this extraction. They'll need to sign in to view it.
+                </p>
+              </div>
+            ) : (
+              <div className="text-center py-8">
+                <p className="text-sm text-slate-600">No share link available</p>
+              </div>
+            )}
+
+            <div className="pt-4 mt-6 border-t border-slate-200">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={onClose}
+                disabled={isLoading}
+                className="w-full h-11 rounded-xl"
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}

frontend/src/components/auth/LoginForm.jsx

@@ -1,517 +1,3 @@
-<<<<<<< HEAD
-import React, { useState } from "react";
-import { motion } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-  Zap,
-  Target,
-  Upload,
-  CheckCircle2,
-  ArrowRight,
-  Mail,
-  Sparkles,
-  Shield,
-  Globe,
-  AlertCircle,
-  Loader2,
-} from "lucide-react";
-import { useAuth } from "@/contexts/AuthContext";
-
-export default function LoginForm() {
-  const { firebaseLogin, requestOTP, verifyOTP } = useAuth();
-  const [email, setEmail] = useState("");
-  const [showOtp, setShowOtp] = useState(false);
-  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  // Business email validation
-  const PERSONAL_EMAIL_DOMAINS = [
-    "gmail.com",
-    "yahoo.com",
-    "hotmail.com",
-    "outlook.com",
-    "aol.com",
-    "icloud.com",
-    "mail.com",
-    "protonmail.com",
-    "yandex.com",
-    "zoho.com",
-    "gmx.com",
-    "live.com",
-    "msn.com",
-  ];
-
-  const isBusinessEmail = (email) => {
-    if (!email || !email.includes("@")) return false;
-    const domain = email.split("@")[1].toLowerCase();
-    return !PERSONAL_EMAIL_DOMAINS.includes(domain);
-  };
-
-  const handleGoogleLogin = async () => {
-    setLoading(true);
-    setError("");
-    try {
-      await firebaseLogin();
-    } catch (err) {
-      setError(err.message || "Failed to sign in with Google");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleEmailSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    if (!email) {
-      setError("Please enter your email address");
-      setLoading(false);
-      return;
-    }
-
-    if (!isBusinessEmail(email)) {
-      setError("Only business email addresses are allowed. Personal email accounts (Gmail, Yahoo, etc.) are not permitted.");
-      setLoading(false);
-      return;
-    }
-
-    try {
-      await requestOTP(email);
-      setShowOtp(true);
-    } catch (err) {
-      setError(err.message || "Failed to send OTP");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleOtpChange = (index, value) => {
-    if (value.length <= 1 && /^\d*$/.test(value)) {
-      const newOtp = [...otp];
-      newOtp[index] = value;
-      setOtp(newOtp);
-      setError("");
-
-      // Auto-focus next input
-      if (value && index < 5) {
-        const nextInput = document.getElementById(`otp-${index + 1}`);
-        nextInput?.focus();
-      }
-    }
-  };
-
-  const handleOtpPaste = (e, startIndex = 0) => {
-    e.preventDefault();
-    const pastedData = e.clipboardData.getData("text");
-    // Extract only digits from pasted content
-    const digits = pastedData.replace(/\D/g, "").slice(0, 6);
-    
-    if (digits.length > 0) {
-      const newOtp = [...otp];
-      // Fill the OTP array with pasted digits starting from the current field
-      for (let i = 0; i < digits.length && (startIndex + i) < 6; i++) {
-        newOtp[startIndex + i] = digits[i];
-      }
-      setOtp(newOtp);
-      setError("");
-      
-      // Focus on the next empty input or the last input if all are filled
-      const nextEmptyIndex = Math.min(startIndex + digits.length, 5);
-      const nextInput = document.getElementById(`otp-${nextEmptyIndex}`);
-      nextInput?.focus();
-    }
-  };
-
-  const handleOtpKeyDown = (index, e) => {
-    if (e.key === "Backspace" && !otp[index] && index > 0) {
-      const prevInput = document.getElementById(`otp-${index - 1}`);
-      prevInput?.focus();
-    }
-  };
-
-  const handleOtpVerify = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    const otpString = otp.join("");
-    if (otpString.length !== 6) {
-      setError("Please enter a valid 6-digit OTP");
-      setLoading(false);
-      return;
-    }
-
-    try {
-      await verifyOTP(email, otpString);
-      // Success - user will be redirected by AuthContext
-    } catch (err) {
-      setError(err.message || "Invalid OTP. Please try again.");
-      setOtp(["", "", "", "", "", ""]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const features = [
-    {
-      icon: Zap,
-      title: "Lightning Fast",
-      description: "Process documents in seconds and get outputs for ERP ingestion",
-      color: "text-amber-500",
-      bg: "bg-amber-50",
-    },
-    {
-      icon: Target,
-      title: "100% Accuracy",
-      description: "Industry-leading extraction with Visual Reasoning Processor",
-      color: "text-emerald-500",
-      bg: "bg-emerald-50",
-    },
-    {
-      icon: Globe,
-      title: "Any Format, Any Language",
-      description: "PDF, images, scanned docs — multi-lingual support included",
-      color: "text-blue-500",
-      bg: "bg-blue-50",
-    },
-  ];
-
-  const supportedFormats = [
-    { ext: "PDF", color: "bg-red-500" },
-    { ext: "PNG", color: "bg-blue-500" },
-    { ext: "JPG", color: "bg-green-500" },
-    { ext: "TIFF", color: "bg-purple-500" },
-  ];
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex">
-      {/* Left Side - Product Showcase */}
-      <div className="hidden lg:flex lg:w-[56%] flex-col justify-between p-8 relative overflow-hidden">
-        {/* Background Elements */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-blue-100/40 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
-        <div className="absolute bottom-0 left-0 w-80 h-80 bg-emerald-100/40 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
-
-        {/* Logo & Brand */}
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="relative z-10 mb-6"
-        >
-          <div className="flex items-center gap-3">
-            <div className="h-12 w-12 flex items-center justify-center flex-shrink-0">
-              <img 
-                src="/logo.png"
-                alt="EZOFIS AI Logo" 
-                className="h-full w-full object-contain"
-                onError={(e) => {
-                  // Fallback: hide image if logo not found
-                  e.target.style.display = 'none';
-                }}
-              />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-slate-900 tracking-tight">EZOFISOCR</h1>
-              <p className="text-sm text-slate-500 font-medium">VRP Intelligence</p>
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Main Content */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1 }}
-          className="relative z-10 space-y-5 flex-1 flex flex-col justify-center ml-24 xl:ml-36"
-        >
-          <div className="space-y-3">
-            <h2 className="text-3xl xl:text-4xl font-bold text-slate-900 leading-tight">
-              Pure Agentic
-              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
-                Document Intelligence
-              </span>
-            </h2>
-            <p className="text-base text-slate-600 max-w-lg leading-relaxed">
-              Deterministic, layout-aware extraction (without LLM) using our proprietary{" "}
-              <span className="font-semibold text-slate-800">Visual Reasoning Processor (VRP)</span>
-            </p>
-          </div>
-
-          {/* Product Preview Card */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ delay: 0.3 }}
-            className="bg-white rounded-2xl border border-slate-200/80 shadow-xl shadow-slate-200/50 p-4 max-w-lg"
-          >
-            <div className="border-2 border-dashed border-slate-200 rounded-xl p-5 text-center bg-slate-50/50">
-              <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-3">
-                <Upload className="w-5 h-5 text-slate-400" />
-              </div>
-              <p className="text-slate-700 font-medium mb-1 text-sm">Drop a document to extract data</p>
-              <p className="text-xs text-slate-400">Invoices, purchase orders, delivery notes, receipts, and operational documents</p>
-              
-              <div className="flex items-center justify-center gap-2 mt-3">
-                {supportedFormats.map((format, i) => (
-                  <span key={i} className={`${format.color} text-white text-xs font-bold px-2 py-1 rounded`}>
-                    {format.ext}
-                  </span>
-                ))}
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between mt-3 pt-3 border-t border-slate-100">
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-                <span className="text-xs text-slate-600">Ready to extract</span>
-              </div>
-              <div className="flex items-center gap-1 text-emerald-600">
-                <CheckCircle2 className="w-3.5 h-3.5" />
-                <span className="text-xs font-semibold">99.8% Accuracy</span>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Features */}
-          <div className="grid gap-3">
-            {features.map((feature, index) => (
-              <motion.div
-                key={feature.title}
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: 0.4 + index * 0.1 }}
-                className="flex items-start gap-3 group"
-              >
-                <div
-                  className={`w-9 h-9 rounded-xl ${feature.bg} flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}
-                >
-                  <feature.icon className={`w-4 h-4 ${feature.color}`} />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-slate-900 text-sm">{feature.title}</h3>
-                  <p className="text-xs text-slate-500">{feature.description}</p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </motion.div>
-
-        {/* Trust Badge */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.6 }}
-          className="relative z-10 flex items-center gap-3 text-xs text-slate-500 mt-6"
-        >
-          <Shield className="w-4 h-4" />
-          <span>Enterprise-grade security • SOC 2 Compliant • GDPR Ready</span>
-        </motion.div>
-      </div>
-
-      {/* Right Side - Sign In Form */}
-      <div className="w-full lg:w-[44%] flex items-center justify-center p-6 sm:p-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
-          className="w-full max-w-md"
-        >
-          {/* Mobile Logo */}
-          <div className="lg:hidden flex items-center justify-center gap-3 mb-8">
-            <div className="h-12 w-12 flex items-center justify-center flex-shrink-0">
-              <img 
-                src="/logo.png"
-                alt="EZOFIS AI Logo" 
-                className="h-full w-full object-contain"
-                onError={(e) => {
-                  // Fallback: hide image if logo not found
-                  e.target.style.display = 'none';
-                }}
-              />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-slate-900 tracking-tight">EZOFISOCR</h1>
-              <p className="text-sm text-slate-500 font-medium">VRP Intelligence</p>
-            </div>
-          </div>
-
-          <div className="bg-white rounded-3xl border border-slate-200/80 shadow-2xl shadow-slate-200/50 p-8 sm:p-10">
-            <div className="text-center mb-8">
-              <h2 className="text-2xl font-bold text-slate-900 mb-2">
-                {showOtp ? "Enter verification code" : "Secure Access"}
-              </h2>
-              <p className="text-slate-500">
-                {showOtp ? `We sent a code to ${email}` : "Access your document intelligence workspace"}
-              </p>
-            </div>
-
-            {/* Error Message */}
-            {error && (
-              <motion.div
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                className="mb-6 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2 text-sm text-red-700"
-              >
-                <AlertCircle className="h-4 w-4 flex-shrink-0 mt-0.5" />
-                <p>{error}</p>
-              </motion.div>
-            )}
-
-            {!showOtp ? (
-              <>
-                {/* Google Sign In */}
-                <Button
-                  onClick={handleGoogleLogin}
-                  disabled={loading}
-                  variant="outline"
-                  className="w-full h-12 text-base font-medium border-slate-200 hover:bg-slate-50 hover:border-slate-300 transition-all group"
-                >
-                  {loading ? (
-                    <Loader2 className="w-5 h-5 mr-3 animate-spin" />
-                  ) : (
-                    <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24">
-                      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
-                      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
-                      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
-                      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
-                    </svg>
-                  )}
-                  Continue with Google
-                  <ArrowRight className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
-                </Button>
-
-                <div className="relative my-8">
-                  <Separator />
-                  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-4 text-sm text-slate-400">
-                    or continue with email
-                  </span>
-                </div>
-
-                {/* Email Input */}
-                <form onSubmit={handleEmailSubmit} className="space-y-4">
-                  <div className="relative">
-                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
-                    <Input
-                      type="email"
-                      placeholder="name@company.com"
-                      value={email}
-                      onChange={(e) => {
-                        setEmail(e.target.value);
-                        setError("");
-                      }}
-                      className="h-12 pl-12 text-base border-slate-200 focus:border-blue-500 focus:ring-blue-500"
-                    />
-                  </div>
-                  <Button
-                    type="submit"
-                    disabled={loading}
-                    className="w-full h-12 text-base font-medium bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25 transition-all"
-                  >
-                    {loading ? (
-                      <>
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                        Sending...
-                      </>
-                    ) : (
-                      <>
-                        Continue with Email
-                        <ArrowRight className="w-4 h-4 ml-2" />
-                      </>
-                    )}
-                  </Button>
-                </form>
-              </>
-            ) : (
-              /* OTP Input */
-              <form onSubmit={handleOtpVerify} className="space-y-6">
-                <div className="flex justify-center gap-2">
-                  {otp.map((digit, index) => (
-                    <Input
-                      key={index}
-                      id={`otp-${index}`}
-                      type="text"
-                      inputMode="numeric"
-                      maxLength={1}
-                      value={digit}
-                      onChange={(e) => handleOtpChange(index, e.target.value)}
-                      onKeyDown={(e) => handleOtpKeyDown(index, e)}
-                      onPaste={(e) => handleOtpPaste(e, index)}
-                      className="w-12 h-14 text-center text-xl font-semibold border-slate-200 focus:border-blue-500 focus:ring-blue-500"
-                    />
-                  ))}
-                </div>
-
-                <Button
-                  type="submit"
-                  disabled={loading || otp.join("").length !== 6}
-                  className="w-full h-12 text-base font-medium bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25"
-                >
-                  {loading ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Verifying...
-                    </>
-                  ) : (
-                    <>
-                      Verify & Sign In
-                      <ArrowRight className="w-4 h-4 ml-2" />
-                    </>
-                  )}
-                </Button>
-
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowOtp(false);
-                    setOtp(["", "", "", "", "", ""]);
-                    setError("");
-                  }}
-                  className="w-full text-sm text-slate-500 hover:text-slate-700 transition-colors"
-                >
-                  ← Back to sign in options
-                </button>
-              </form>
-            )}
-
-            {/* Notice */}
-            <div className="mt-8 pt-6 border-t border-slate-100">
-              <div className="flex items-start gap-2 text-xs text-slate-400 mb-4">
-                <Shield className="w-4 h-4 flex-shrink-0 mt-0.5" />
-                <span>Only business email addresses are allowed</span>
-              </div>
-              <p className="text-xs text-slate-400 text-center leading-relaxed">
-                By signing in, you agree to our{" "}
-                <a href="#" className="text-blue-600 hover:underline">
-                  Terms of Service
-                </a>{" "}
-                and{" "}
-                <a href="#" className="text-blue-600 hover:underline">
-                  Privacy Policy
-                </a>
-              </p>
-            </div>
-          </div>
-
-          {/* Mobile Features */}
-          <div className="lg:hidden mt-8 space-y-4">
-            {features.map((feature) => (
-              <div key={feature.title} className="flex items-center gap-3 text-sm">
-                <div className={`w-8 h-8 rounded-lg ${feature.bg} flex items-center justify-center`}>
-                  <feature.icon className={`w-4 h-4 ${feature.color}`} />
-                </div>
-                <span className="text-slate-600">{feature.title}</span>
-              </div>
-            ))}
-          </div>
-        </motion.div>
-      </div>
-    </div>
-  );
-}
-=======
 import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
@@ -1024,4 +510,514 @@ export default function LoginForm() {
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Zap,
+  Target,
+  Upload,
+  CheckCircle2,
+  ArrowRight,
+  Mail,
+  Sparkles,
+  Shield,
+  Globe,
+  AlertCircle,
+  Loader2,
+} from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+
+export default function LoginForm() {
+  const { firebaseLogin, requestOTP, verifyOTP } = useAuth();
+  const [email, setEmail] = useState("");
+  const [showOtp, setShowOtp] = useState(false);
+  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // Business email validation
+  const PERSONAL_EMAIL_DOMAINS = [
+    "gmail.com",
+    "yahoo.com",
+    "hotmail.com",
+    "outlook.com",
+    "aol.com",
+    "icloud.com",
+    "mail.com",
+    "protonmail.com",
+    "yandex.com",
+    "zoho.com",
+    "gmx.com",
+    "live.com",
+    "msn.com",
+  ];
+
+  const isBusinessEmail = (email) => {
+    if (!email || !email.includes("@")) return false;
+    const domain = email.split("@")[1].toLowerCase();
+    return !PERSONAL_EMAIL_DOMAINS.includes(domain);
+  };
+
+  const handleGoogleLogin = async () => {
+    setLoading(true);
+    setError("");
+    try {
+      await firebaseLogin();
+    } catch (err) {
+      setError(err.message || "Failed to sign in with Google");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEmailSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    if (!email) {
+      setError("Please enter your email address");
+      setLoading(false);
+      return;
+    }
+
+    if (!isBusinessEmail(email)) {
+      setError("Only business email addresses are allowed. Personal email accounts (Gmail, Yahoo, etc.) are not permitted.");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await requestOTP(email);
+      setShowOtp(true);
+    } catch (err) {
+      setError(err.message || "Failed to send OTP");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOtpChange = (index, value) => {
+    if (value.length <= 1 && /^\d*$/.test(value)) {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      setError("");
+
+      // Auto-focus next input
+      if (value && index < 5) {
+        const nextInput = document.getElementById(`otp-${index + 1}`);
+        nextInput?.focus();
+      }
+    }
+  };
+
+  const handleOtpPaste = (e, startIndex = 0) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text");
+    // Extract only digits from pasted content
+    const digits = pastedData.replace(/\D/g, "").slice(0, 6);
+    
+    if (digits.length > 0) {
+      const newOtp = [...otp];
+      // Fill the OTP array with pasted digits starting from the current field
+      for (let i = 0; i < digits.length && (startIndex + i) < 6; i++) {
+        newOtp[startIndex + i] = digits[i];
+      }
+      setOtp(newOtp);
+      setError("");
+      
+      // Focus on the next empty input or the last input if all are filled
+      const nextEmptyIndex = Math.min(startIndex + digits.length, 5);
+      const nextInput = document.getElementById(`otp-${nextEmptyIndex}`);
+      nextInput?.focus();
+    }
+  };
+
+  const handleOtpKeyDown = (index, e) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      const prevInput = document.getElementById(`otp-${index - 1}`);
+      prevInput?.focus();
+    }
+  };
+
+  const handleOtpVerify = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    const otpString = otp.join("");
+    if (otpString.length !== 6) {
+      setError("Please enter a valid 6-digit OTP");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await verifyOTP(email, otpString);
+      // Success - user will be redirected by AuthContext
+    } catch (err) {
+      setError(err.message || "Invalid OTP. Please try again.");
+      setOtp(["", "", "", "", "", ""]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const features = [
+    {
+      icon: Zap,
+      title: "Lightning Fast",
+      description: "Process documents in seconds and get outputs for ERP ingestion",
+      color: "text-amber-500",
+      bg: "bg-amber-50",
+    },
+    {
+      icon: Target,
+      title: "100% Accuracy",
+      description: "Industry-leading extraction with Visual Reasoning Processor",
+      color: "text-emerald-500",
+      bg: "bg-emerald-50",
+    },
+    {
+      icon: Globe,
+      title: "Any Format, Any Language",
+      description: "PDF, images, scanned docs — multi-lingual support included",
+      color: "text-blue-500",
+      bg: "bg-blue-50",
+    },
+  ];
+
+  const supportedFormats = [
+    { ext: "PDF", color: "bg-red-500" },
+    { ext: "PNG", color: "bg-blue-500" },
+    { ext: "JPG", color: "bg-green-500" },
+    { ext: "TIFF", color: "bg-purple-500" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex">
+      {/* Left Side - Product Showcase */}
+      <div className="hidden lg:flex lg:w-[56%] flex-col justify-between p-8 relative overflow-hidden">
+        {/* Background Elements */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-blue-100/40 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
+        <div className="absolute bottom-0 left-0 w-80 h-80 bg-emerald-100/40 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
+
+        {/* Logo & Brand */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="relative z-10 mb-6"
+        >
+          <div className="flex items-center gap-3">
+            <div className="h-12 w-12 flex items-center justify-center flex-shrink-0">
+              <img 
+                src="/logo.png"
+                alt="EZOFIS AI Logo" 
+                className="h-full w-full object-contain"
+                onError={(e) => {
+                  // Fallback: hide image if logo not found
+                  e.target.style.display = 'none';
+                }}
+              />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900 tracking-tight">EZOFISOCR</h1>
+              <p className="text-sm text-slate-500 font-medium">VRP Intelligence</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Main Content */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="relative z-10 space-y-5 flex-1 flex flex-col justify-center ml-24 xl:ml-36"
+        >
+          <div className="space-y-3">
+            <h2 className="text-3xl xl:text-4xl font-bold text-slate-900 leading-tight">
+              Pure Agentic
+              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
+                Document Intelligence
+              </span>
+            </h2>
+            <p className="text-base text-slate-600 max-w-lg leading-relaxed">
+              Deterministic, layout-aware extraction (without LLM) using our proprietary{" "}
+              <span className="font-semibold text-slate-800">Visual Reasoning Processor (VRP)</span>
+            </p>
+          </div>
+
+          {/* Product Preview Card */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.3 }}
+            className="bg-white rounded-2xl border border-slate-200/80 shadow-xl shadow-slate-200/50 p-4 max-w-lg"
+          >
+            <div className="border-2 border-dashed border-slate-200 rounded-xl p-5 text-center bg-slate-50/50">
+              <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-3">
+                <Upload className="w-5 h-5 text-slate-400" />
+              </div>
+              <p className="text-slate-700 font-medium mb-1 text-sm">Drop a document to extract data</p>
+              <p className="text-xs text-slate-400">Invoices, purchase orders, delivery notes, receipts, and operational documents</p>
+              
+              <div className="flex items-center justify-center gap-2 mt-3">
+                {supportedFormats.map((format, i) => (
+                  <span key={i} className={`${format.color} text-white text-xs font-bold px-2 py-1 rounded`}>
+                    {format.ext}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between mt-3 pt-3 border-t border-slate-100">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                <span className="text-xs text-slate-600">Ready to extract</span>
+              </div>
+              <div className="flex items-center gap-1 text-emerald-600">
+                <CheckCircle2 className="w-3.5 h-3.5" />
+                <span className="text-xs font-semibold">99.8% Accuracy</span>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Features */}
+          <div className="grid gap-3">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.4 + index * 0.1 }}
+                className="flex items-start gap-3 group"
+              >
+                <div
+                  className={`w-9 h-9 rounded-xl ${feature.bg} flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}
+                >
+                  <feature.icon className={`w-4 h-4 ${feature.color}`} />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-slate-900 text-sm">{feature.title}</h3>
+                  <p className="text-xs text-slate-500">{feature.description}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Trust Badge */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6 }}
+          className="relative z-10 flex items-center gap-3 text-xs text-slate-500 mt-6"
+        >
+          <Shield className="w-4 h-4" />
+          <span>Enterprise-grade security • SOC 2 Compliant • GDPR Ready</span>
+        </motion.div>
+      </div>
+
+      {/* Right Side - Sign In Form */}
+      <div className="w-full lg:w-[44%] flex items-center justify-center p-6 sm:p-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="w-full max-w-md"
+        >
+          {/* Mobile Logo */}
+          <div className="lg:hidden flex items-center justify-center gap-3 mb-8">
+            <div className="h-12 w-12 flex items-center justify-center flex-shrink-0">
+              <img 
+                src="/logo.png"
+                alt="EZOFIS AI Logo" 
+                className="h-full w-full object-contain"
+                onError={(e) => {
+                  // Fallback: hide image if logo not found
+                  e.target.style.display = 'none';
+                }}
+              />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900 tracking-tight">EZOFISOCR</h1>
+              <p className="text-sm text-slate-500 font-medium">VRP Intelligence</p>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-3xl border border-slate-200/80 shadow-2xl shadow-slate-200/50 p-8 sm:p-10">
+            <div className="text-center mb-8">
+              <h2 className="text-2xl font-bold text-slate-900 mb-2">
+                {showOtp ? "Enter verification code" : "Secure Access"}
+              </h2>
+              <p className="text-slate-500">
+                {showOtp ? `We sent a code to ${email}` : "Access your document intelligence workspace"}
+              </p>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="mb-6 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2 text-sm text-red-700"
+              >
+                <AlertCircle className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                <p>{error}</p>
+              </motion.div>
+            )}
+
+            {!showOtp ? (
+              <>
+                {/* Google Sign In */}
+                <Button
+                  onClick={handleGoogleLogin}
+                  disabled={loading}
+                  variant="outline"
+                  className="w-full h-12 text-base font-medium border-slate-200 hover:bg-slate-50 hover:border-slate-300 transition-all group"
+                >
+                  {loading ? (
+                    <Loader2 className="w-5 h-5 mr-3 animate-spin" />
+                  ) : (
+                    <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24">
+                      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+                      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+                    </svg>
+                  )}
+                  Continue with Google
+                  <ArrowRight className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
+                </Button>
+
+                <div className="relative my-8">
+                  <Separator />
+                  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-4 text-sm text-slate-400">
+                    or continue with email
+                  </span>
+                </div>
+
+                {/* Email Input */}
+                <form onSubmit={handleEmailSubmit} className="space-y-4">
+                  <div className="relative">
+                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                    <Input
+                      type="email"
+                      placeholder="name@company.com"
+                      value={email}
+                      onChange={(e) => {
+                        setEmail(e.target.value);
+                        setError("");
+                      }}
+                      className="h-12 pl-12 text-base border-slate-200 focus:border-blue-500 focus:ring-blue-500"
+                    />
+                  </div>
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full h-12 text-base font-medium bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25 transition-all"
+                  >
+                    {loading ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Sending...
+                      </>
+                    ) : (
+                      <>
+                        Continue with Email
+                        <ArrowRight className="w-4 h-4 ml-2" />
+                      </>
+                    )}
+                  </Button>
+                </form>
+              </>
+            ) : (
+              /* OTP Input */
+              <form onSubmit={handleOtpVerify} className="space-y-6">
+                <div className="flex justify-center gap-2">
+                  {otp.map((digit, index) => (
+                    <Input
+                      key={index}
+                      id={`otp-${index}`}
+                      type="text"
+                      inputMode="numeric"
+                      maxLength={1}
+                      value={digit}
+                      onChange={(e) => handleOtpChange(index, e.target.value)}
+                      onKeyDown={(e) => handleOtpKeyDown(index, e)}
+                      onPaste={(e) => handleOtpPaste(e, index)}
+                      className="w-12 h-14 text-center text-xl font-semibold border-slate-200 focus:border-blue-500 focus:ring-blue-500"
+                    />
+                  ))}
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading || otp.join("").length !== 6}
+                  className="w-full h-12 text-base font-medium bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25"
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      Verify & Sign In
+                      <ArrowRight className="w-4 h-4 ml-2" />
+                    </>
+                  )}
+                </Button>
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowOtp(false);
+                    setOtp(["", "", "", "", "", ""]);
+                    setError("");
+                  }}
+                  className="w-full text-sm text-slate-500 hover:text-slate-700 transition-colors"
+                >
+                  ← Back to sign in options
+                </button>
+              </form>
+            )}
+
+            {/* Notice */}
+            <div className="mt-8 pt-6 border-t border-slate-100">
+              <div className="flex items-start gap-2 text-xs text-slate-400 mb-4">
+                <Shield className="w-4 h-4 flex-shrink-0 mt-0.5" />
+                <span>Only business email addresses are allowed</span>
+              </div>
+              <p className="text-xs text-slate-400 text-center leading-relaxed">
+                By signing in, you agree to our{" "}
+                <a href="#" className="text-blue-600 hover:underline">
+                  Terms of Service
+                </a>{" "}
+                and{" "}
+                <a href="#" className="text-blue-600 hover:underline">
+                  Privacy Policy
+                </a>
+              </p>
+            </div>
+          </div>
+
+          {/* Mobile Features */}
+          <div className="lg:hidden mt-8 space-y-4">
+            {features.map((feature) => (
+              <div key={feature.title} className="flex items-center gap-3 text-sm">
+                <div className={`w-8 h-8 rounded-lg ${feature.bg} flex items-center justify-center`}>
+                  <feature.icon className={`w-4 h-4 ${feature.color}`} />
+                </div>
+                <span className="text-slate-600">{feature.title}</span>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -1,1206 +1,3 @@
-<<<<<<< HEAD
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  Code2,
-  Copy,
-  Check,
-  Braces,
-  FileCode2,
-  FileText,
-  Sparkles,
-  ChevronDown,
-  Upload,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
-
-// Helper function to convert pipe-separated tables to HTML tables
-function convertPipeTablesToHTML(text) {
-  if (!text) return text;
-  
-  const lines = text.split('\n');
-  const result = [];
-  let i = 0;
-  
-  while (i < lines.length) {
-    const line = lines[i];
-    
-    // Check if this line looks like a table row (has multiple pipes)
-    if (line.includes('|') && line.split('|').length >= 3) {
-      // Check if it's a separator line (only |, -, :, spaces)
-      const isSeparator = /^[\s|\-:]+$/.test(line.trim());
-      
-      if (!isSeparator) {
-        // Start of a table - collect all table rows
-        const tableRows = [];
-        let j = i;
-        
-        // Collect header row
-        const headerLine = lines[j];
-        const headerCells = headerLine.split('|').map(cell => cell.trim()).filter(cell => cell || cell === '');
-        // Remove empty cells at start/end
-        if (headerCells.length > 0 && !headerCells[0]) headerCells.shift();
-        if (headerCells.length > 0 && !headerCells[headerCells.length - 1]) headerCells.pop();
-        
-        if (headerCells.length >= 2) {
-          tableRows.push(headerCells);
-          j++;
-          
-          // Skip separator line if present
-          if (j < lines.length && /^[\s|\-:]+$/.test(lines[j].trim())) {
-            j++;
-          }
-          
-          // Collect data rows
-          while (j < lines.length) {
-            const rowLine = lines[j];
-            if (!rowLine.trim()) break; // Empty line ends table
-            
-            // Check if it's still a table row
-            if (rowLine.includes('|') && rowLine.split('|').length >= 2) {
-              const isRowSeparator = /^[\s|\-:]+$/.test(rowLine.trim());
-              if (!isRowSeparator) {
-                const rowCells = rowLine.split('|').map(cell => cell.trim());
-                // Remove empty cells at start/end
-                if (rowCells.length > 0 && !rowCells[0]) rowCells.shift();
-                if (rowCells.length > 0 && !rowCells[rowCells.length - 1]) rowCells.pop();
-                tableRows.push(rowCells);
-                j++;
-              } else {
-                j++;
-              }
-            } else {
-              break; // Not a table row anymore
-            }
-          }
-          
-          // Convert to HTML table
-          if (tableRows.length > 0) {
-            let htmlTable = '<table class="border-collapse border border-gray-300 w-full my-4">\n<thead>\n<tr>';
-            
-            // Header row
-            tableRows[0].forEach(cell => {
-              htmlTable += `<th class="border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left">${escapeHtml(cell)}</th>`;
-            });
-            htmlTable += '</tr>\n</thead>\n<tbody>\n';
-            
-            // Data rows
-            for (let rowIdx = 1; rowIdx < tableRows.length; rowIdx++) {
-              htmlTable += '<tr>';
-              tableRows[rowIdx].forEach((cell, colIdx) => {
-                // Use header cell count to ensure alignment
-                const cellContent = cell || '';
-                htmlTable += `<td class="border border-gray-300 px-4 py-2">${escapeHtml(cellContent)}</td>`;
-              });
-              htmlTable += '</tr>\n';
-            }
-            
-            htmlTable += '</tbody>\n</table>';
-            result.push(htmlTable);
-            i = j;
-            continue;
-          }
-        }
-      }
-    }
-    
-    // Not a table row, add as-is
-    result.push(line);
-    i++;
-  }
-  
-  return result.join('\n');
-}
-
-// Helper function to escape HTML
-function escapeHtml(text) {
-  if (!text) return '';
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-// Helper function to convert markdown/HTML text to safe HTML
-function renderMarkdownToHTML(text) {
-  if (!text) return "";
-  
-  let html = text;
-  
-  // FIRST: Convert pipe-separated tables to HTML tables
-  html = convertPipeTablesToHTML(html);
-  
-  // Convert LaTeX-style superscripts/subscripts FIRST (before protecting tables)
-  // This ensures they're converted everywhere, including inside tables
-  
-  // Convert LaTeX-style superscripts: $^{text}$ or $^text$ to <sup>text</sup>
-  html = html.replace(/\$\s*\^\s*\{([^}]+)\}\s*\$/g, '<sup>$1</sup>');
-  html = html.replace(/\$\s*\^\s*([^\s$<>]+)\s*\$/g, '<sup>$1</sup>');
-  
-  // Convert LaTeX-style subscripts: $_{text}$ or $_text$ to <sub>text</sub>
-  html = html.replace(/\$\s*_\s*\{([^}]+)\}\s*\$/g, '<sub>$1</sub>');
-  html = html.replace(/\$\s*_\s*([^\s$<>]+)\s*\$/g, '<sub>$1</sub>');
-  
-  // Split by HTML tags to preserve existing HTML (like tables)
-  // Process markdown only in non-HTML sections
-  
-  // First, protect existing HTML blocks (tables, etc.)
-  const htmlBlocks = [];
-  let htmlBlockIndex = 0;
-  
-  // Extract and protect HTML table blocks
-  html = html.replace(/<table[\s\S]*?<\/table>/gi, (match) => {
-    const placeholder = `__HTML_BLOCK_${htmlBlockIndex}__`;
-    htmlBlocks[htmlBlockIndex] = match;
-    htmlBlockIndex++;
-    return placeholder;
-  });
-  
-  // Convert markdown headers (only if not inside HTML)
-  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
-  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
-  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
-  
-  // Convert markdown bold/italic (but not inside HTML tags)
-  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
-  
-  // Convert markdown links
-  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-  
-  // Convert line breaks to paragraphs (but preserve structure around HTML blocks)
-  const parts = html.split(/(__HTML_BLOCK_\d+__)/);
-  const processedParts = parts.map((part, index) => {
-    if (part.match(/^__HTML_BLOCK_\d+__$/)) {
-      // Restore HTML block
-      const blockIndex = parseInt(part.match(/\d+/)[0]);
-      return htmlBlocks[blockIndex];
-    } else {
-      // Process markdown in this part
-      let processed = part;
-      
-      // Convert double line breaks to paragraph breaks
-      processed = processed.replace(/\n\n+/g, '</p><p>');
-      // Convert single line breaks to <br> (but not if already in a tag)
-      processed = processed.replace(/([^\n>])\n([^\n<])/g, '$1<br>$2');
-      
-      // Wrap in paragraph if there's content
-      if (processed.trim() && !processed.trim().startsWith('<')) {
-        processed = '<p>' + processed + '</p>';
-      }
-      
-      return processed;
-    }
-  });
-  
-  html = processedParts.join('');
-  
-  // Process LaTeX notation in restored HTML blocks (tables) as well
-  // This handles any LaTeX that might be in table cells
-  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*\^\s*\{([^}]+)\}\s*\$([^<]*)(<\/td>|<\/th>)/gi, 
-    (match, openTag, before, supText, after, closeTag) => {
-      return openTag + before + '<sup>' + supText + '</sup>' + after + closeTag;
-    });
-  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*\^\s*([^\s$<>]+)\s*\$([^<]*)(<\/td>|<\/th>)/gi,
-    (match, openTag, before, supText, after, closeTag) => {
-      return openTag + before + '<sup>' + supText + '</sup>' + after + closeTag;
-    });
-  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*_\s*\{([^}]+)\}\s*\$([^<]*)(<\/td>|<\/th>)/gi,
-    (match, openTag, before, subText, after, closeTag) => {
-      return openTag + before + '<sub>' + subText + '</sub>' + after + closeTag;
-    });
-  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*_\s*([^\s$<>]+)\s*\$([^<]*)(<\/td>|<\/th>)/gi,
-    (match, openTag, before, subText, after, closeTag) => {
-      return openTag + before + '<sub>' + subText + '</sub>' + after + closeTag;
-    });
-  
-  // Clean up empty paragraphs and fix paragraph structure
-  html = html.replace(/<p><\/p>/g, '');
-  html = html.replace(/<p>\s*<br>\s*<\/p>/g, '');
-  html = html.replace(/<p>\s*<\/p>/g, '');
-  
-  // Ensure proper spacing around HTML blocks
-  html = html.replace(/(<\/table>)\s*(<h[1-3])/g, '$1</p><p>$2');
-  html = html.replace(/(<\/h[1-3]>)\s*(<table)/g, '$1<p>$2');
-  html = html.replace(/(<\/table>)\s*(<p>)/g, '$1$2');
-  
-  return html;
-}
-
-// 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!`;
-
-// Helper function to convert object to XML
-// Prepare fields for JSON/XML output - remove duplicates and restructure
-function prepareFieldsForOutput(fields, format = "json") {
-  if (!fields || typeof fields !== "object") {
-    return fields;
-  }
-  
-  const output = { ...fields };
-  
-  // Extract Fields from root level if it exists
-  const rootFields = output.Fields;
-  // Remove Fields from output temporarily (will be added back at top)
-  delete output.Fields;
-  
-  // Remove full_text from top-level if pages array exists (to avoid duplication)
-  if (output.pages && Array.isArray(output.pages) && output.pages.length > 0) {
-    delete output.full_text;
-    
-    // Clean up each page: remove full_text from page.fields (it duplicates page.text)
-    output.pages = output.pages.map(page => {
-      const cleanedPage = { ...page };
-      if (cleanedPage.fields && typeof cleanedPage.fields === "object") {
-        const cleanedFields = { ...cleanedPage.fields };
-        // Remove full_text from page fields (duplicates page.text)
-        delete cleanedFields.full_text;
-        cleanedPage.fields = cleanedFields;
-      }
-      return cleanedPage;
-    });
-  }
-  
-  // For JSON and XML: restructure pages into separate top-level fields (page_1, page_2, etc.)
-  if ((format === "json" || format === "xml") && output.pages && Array.isArray(output.pages)) {
-    // Get top-level field keys (these are merged from all pages - avoid duplicating in page fields)
-    const topLevelKeys = new Set(Object.keys(output).filter(k => k !== "pages" && k !== "full_text" && k !== "Fields"));
-    
-    output.pages.forEach((page, idx) => {
-      const pageNum = page.page_number || idx + 1;
-      const pageFields = page.fields || {};
-      
-      // Remove duplicate fields from page.fields:
-      // 1. Remove full_text (duplicates page.text)
-      // 2. Remove fields that match top-level fields (already shown at root)
-      const cleanedPageFields = {};
-      for (const [key, value] of Object.entries(pageFields)) {
-        // Skip full_text and fields that match top-level exactly
-        if (key !== "full_text" && (!topLevelKeys.has(key) || (value !== output[key]))) {
-          cleanedPageFields[key] = value;
-        }
-      }
-      
-      const pageObj = {
-        text: page.text || "",
-        confidence: page.confidence || 0,
-        doc_type: page.doc_type || "other"
-      };
-      
-      // Add table and footer_notes if they exist
-      if (page.table && Array.isArray(page.table) && page.table.length > 0) {
-        pageObj.table = page.table;
-      }
-      if (page.footer_notes && Array.isArray(page.footer_notes) && page.footer_notes.length > 0) {
-        pageObj.footer_notes = page.footer_notes;
-      }
-      
-      // Only add fields if there are unique page-specific fields
-      if (Object.keys(cleanedPageFields).length > 0) {
-        pageObj.fields = cleanedPageFields;
-      }
-      
-      output[`page_${pageNum}`] = pageObj;
-    });
-    // Remove pages array - we now have page_1, page_2, etc. as separate fields
-    delete output.pages;
-  }
-  
-  // Handle page_X structure (from backend) - remove Fields from page objects if they exist
-  if (output && typeof output === "object") {
-    const pageKeys = Object.keys(output).filter(k => k.startsWith("page_"));
-    for (const pageKey of pageKeys) {
-      const pageData = output[pageKey];
-      if (pageData && typeof pageData === "object") {
-        // Remove Fields from page objects (it's now at root level)
-        delete pageData.Fields;
-        delete pageData.metadata;
-      }
-    }
-  }
-  
-  // Rebuild output with Fields at the top (only if it exists and is not empty)
-  const finalOutput = {};
-  if (rootFields && typeof rootFields === "object" && Object.keys(rootFields).length > 0) {
-    finalOutput.Fields = rootFields;
-  }
-  
-  // Add all other keys
-  Object.keys(output).forEach(key => {
-    finalOutput[key] = output[key];
-  });
-  
-  return finalOutput;
-}
-
-function objectToXML(obj, rootName = "extraction") {
-  // Prepare fields - remove full_text if pages exist
-  const preparedObj = prepareFieldsForOutput(obj, "xml");
-  
-  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;
-      
-      // Skip full_text if pages exist (already handled in prepareFieldsForOutput)
-      if (key === "full_text" && obj.pages && Array.isArray(obj.pages) && obj.pages.length > 0) {
-        continue;
-      }
-      
-      if (Array.isArray(value)) {
-        value.forEach((item) => {
-          xml += `${indent}<${key}>\n`;
-          if (typeof item === "object") {
-            convert(item, indent + "  ");
-          } else {
-            xml += `${indent}  ${escapeXML(String(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}>${escapeXML(String(value))}</${key}>\n`;
-      }
-    }
-  };
-  
-  convert(preparedObj);
-  xml += `</${rootName}>`;
-  return xml;
-}
-
-function escapeXML(str) {
-  return str
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&apos;");
-}
-
-// Helper function to extract text from page structure
-function extractTextFromFields(fields) {
-  if (!fields || typeof fields !== "object") {
-    return "";
-  }
-  
-  // Check for page_X structure first (preferred format)
-  const pageKeys = Object.keys(fields).filter(key => key.startsWith("page_"));
-  if (pageKeys.length > 0) {
-    // Get text from first page (or combine all pages)
-    const pageTexts = pageKeys.map(key => {
-      const page = fields[key];
-      if (page && page.text) {
-        return page.text;
-      }
-      return "";
-    }).filter(text => text);
-    
-    if (pageTexts.length > 0) {
-      return pageTexts.join("\n\n");
-    }
-  }
-  
-  // Fallback to full_text
-  if (fields.full_text) {
-    return fields.full_text;
-  }
-  
-  return "";
-}
-
-// Helper function to format fields as readable text
-function fieldsToText(fields) {
-  if (!fields || typeof fields !== "object") {
-    return "No data extracted.";
-  }
-  
-  // Extract text from page structure or full_text
-  const extractedText = extractTextFromFields(fields);
-  
-  if (extractedText) {
-    return extractedText;
-    
-    // Don't show pages array separately if full_text already contains page markers
-    // (full_text from backend already includes "=== PAGE 1 ===" etc.)
-    const hasPageMarkers = fields.full_text.includes("=== PAGE") || fields.full_text.includes("--- Page");
-    
-    // Only show pages array if full_text doesn't already have page breakdown
-    if (!hasPageMarkers && fields.pages && Array.isArray(fields.pages)) {
-      text += "\n\n=== TEXT BY PAGE ===\n\n";
-      fields.pages.forEach((page, idx) => {
-        text += `--- Page ${page.page_number || idx + 1} ---\n`;
-        text += page.text || "";
-        text += "\n\n";
-      });
-    }
-    
-    // Then show other structured fields
-    const otherFields = { ...fields };
-    delete otherFields.full_text;
-    delete otherFields.pages;
-    
-    if (Object.keys(otherFields).length > 0) {
-      text += "\n\n=== STRUCTURED FIELDS ===\n\n";
-      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(otherFields).forEach(([key, value]) => {
-        formatValue(key, value);
-        text += "\n";
-      });
-    }
-    
-    return text.trim();
-  }
-  
-  // Fallback: format all fields normally
-  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, onNewUpload }) {
-  const [activeTab, setActiveTab] = useState("json");
-  const [copied, setCopied] = useState(false);
-  const [statusMessage, setStatusMessage] = useState("Preparing document...");
-  
-  // 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;
-
-  // Dynamic status messages that rotate during processing
-  const statusMessages = [
-    "Preparing document...",
-    "Converting pages to images...",
-    "Visual Reasoning...",
-    "Reading text from document...",
-    "Identifying document structure...",
-    "Extracting tables and data...",
-    "Analyzing content...",
-    "Processing pages...",
-    "Organizing extracted information...",
-    "Finalizing results...",
-  ];
-
-  // Rotate status messages during processing
-  const messageIndexRef = useRef(0);
-  
-  useEffect(() => {
-    if (!isProcessing) {
-      setStatusMessage("Analyzing document structure");
-      messageIndexRef.current = 0;
-      return;
-    }
-
-    setStatusMessage(statusMessages[0]);
-    messageIndexRef.current = 0;
-
-    const interval = setInterval(() => {
-      messageIndexRef.current = (messageIndexRef.current + 1) % statusMessages.length;
-      setStatusMessage(statusMessages[messageIndexRef.current]);
-    }, 2500); // Change message every 2.5 seconds
-
-    return () => clearInterval(interval);
-  }, [isProcessing]);
-  
-  // Initialize expanded sections based on available fields
-  const [expandedSections, setExpandedSections] = useState(() => 
-    Object.keys(fields).slice(0, 5) // Expand first 5 sections by default
-  );
-
-  // Helper function to convert HTML to formatted plain text with layout preserved
-  const htmlToFormattedText = (html) => {
-    if (!html) return "";
-    
-    // Create a temporary div to parse HTML
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = html;
-    
-    let text = "";
-    
-    // Process each element
-    const processNode = (node) => {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent;
-      }
-      
-      if (node.nodeType !== Node.ELEMENT_NODE) {
-        return "";
-      }
-      
-      const tagName = node.tagName?.toLowerCase();
-      const children = Array.from(node.childNodes);
-      
-      switch (tagName) {
-        case "h1":
-          return "\n\n" + processChildren(children).trim() + "\n\n";
-        case "h2":
-          return "\n\n" + processChildren(children).trim() + "\n\n";
-        case "h3":
-          return "\n" + processChildren(children).trim() + "\n";
-        case "p":
-          return processChildren(children) + "\n\n";
-        case "br":
-          return "\n";
-        case "strong":
-        case "b":
-          return processChildren(children);
-        case "em":
-        case "i":
-          return processChildren(children);
-        case "sup":
-          return processChildren(children);
-        case "sub":
-          return processChildren(children);
-        case "table":
-          return "\n" + processTable(node) + "\n\n";
-        case "ul":
-        case "ol":
-          return "\n" + processList(node) + "\n\n";
-        case "li":
-          return "  • " + processChildren(children).trim() + "\n";
-        default:
-          return processChildren(children);
-      }
-    };
-    
-    const processChildren = (children) => {
-      return children.map(processNode).join("");
-    };
-    
-    const processTable = (table) => {
-      let tableText = "";
-      const rows = table.querySelectorAll("tr");
-      
-      if (rows.length === 0) return "";
-      
-      // First pass: calculate column widths
-      const allRows = Array.from(rows);
-      const columnCount = Math.max(...allRows.map(row => row.querySelectorAll("td, th").length));
-      const columnWidths = new Array(columnCount).fill(0);
-      
-      allRows.forEach(row => {
-        const cells = row.querySelectorAll("td, th");
-        cells.forEach((cell, colIndex) => {
-          const cellText = processChildren(Array.from(cell.childNodes)).trim().replace(/\s+/g, " ");
-          columnWidths[colIndex] = Math.max(columnWidths[colIndex] || 0, cellText.length, 10);
-        });
-      });
-      
-      // Second pass: format rows
-      allRows.forEach((row, rowIndex) => {
-        const cells = row.querySelectorAll("td, th");
-        const cellTexts = Array.from(cells).map(cell => {
-          let cellContent = processChildren(Array.from(cell.childNodes)).trim();
-          cellContent = cellContent.replace(/\s+/g, " ");
-          return cellContent;
-        });
-        
-        // Pad cells to column widths
-        const paddedCells = cellTexts.map((text, i) => {
-          const width = columnWidths[i] || 10;
-          return text.padEnd(width);
-        });
-        
-        tableText += paddedCells.join(" | ") + "\n";
-        
-        // Add separator after header row
-        if (rowIndex === 0 && row.querySelector("th")) {
-          tableText += columnWidths.map(w => "-".repeat(w)).join("-|-") + "\n";
-        }
-      });
-      
-      return tableText;
-    };
-    
-    const processList = (list) => {
-      const items = list.querySelectorAll("li");
-      return Array.from(items).map(item => {
-        return "  • " + processChildren(Array.from(item.childNodes)).trim();
-      }).join("\n");
-    };
-    
-    text = processChildren(Array.from(tempDiv.childNodes));
-    
-    // Clean up extra newlines
-    text = text.replace(/\n{3,}/g, "\n\n");
-    text = text.trim();
-    
-    return text;
-  };
-
-  const handleCopy = () => {
-    let content = "";
-    if (activeTab === "json") {
-      const preparedFields = prepareFieldsForOutput(fields, "json");
-      content = JSON.stringify(preparedFields, null, 2);
-    } else if (activeTab === "xml") {
-      content = objectToXML(fields);
-    } else {
-      // For text tab, get the formatted HTML and convert to plain text with layout
-      const textContent = extractTextFromFields(fields);
-      const htmlContent = renderMarkdownToHTML(textContent);
-      content = htmlToFormattedText(htmlContent);
-    }
-    
-    navigator.clipboard.writeText(content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-  
-  // Get prepared fields for display
-  const preparedFields = React.useMemo(() => {
-    return prepareFieldsForOutput(fields, "json");
-  }, [fields]);
-  
-  // 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) =>
-      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 
-                ? `${fieldsExtracted} field${fieldsExtracted !== 1 ? 's' : ''} extracted`
-                : "Waiting for extraction"}
-            </p>
-          </div>
-          {isComplete && onNewUpload && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onNewUpload}
-              className="h-8 ml-auto text-xs gap-1.5 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50"
-              title="Upload new document"
-            >
-              <Upload className="h-3.5 w-3.5" />
-              New
-            </Button>
-          )}
-        </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">Extracting data...</p>
-              <p className="text-slate-400 text-sm">{statusMessage}</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>
-        ) : 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" ? (
-              <div 
-                className="text-sm text-slate-700 leading-relaxed"
-                style={{
-                  fontFamily: 'system-ui, -apple-system, sans-serif'
-                }}
-              >
-                <div
-                  className="markdown-content"
-                  dangerouslySetInnerHTML={{ __html: renderMarkdownToHTML(fieldsToText(fields)) }}
-                  style={{
-                    lineHeight: '1.6'
-                  }}
-                />
-                <style>{`
-                  .markdown-content h1 {
-                    font-size: 1.5rem;
-                    font-weight: 700;
-                    color: #0f172a;
-                    margin-top: 1.5rem;
-                    margin-bottom: 1rem;
-                    line-height: 1.3;
-                  }
-                  .markdown-content h2 {
-                    font-size: 1.25rem;
-                    font-weight: 600;
-                    color: #0f172a;
-                    margin-top: 1.25rem;
-                    margin-bottom: 0.75rem;
-                    line-height: 1.3;
-                  }
-                  .markdown-content h3 {
-                    font-size: 1.125rem;
-                    font-weight: 600;
-                    color: #1e293b;
-                    margin-top: 1rem;
-                    margin-bottom: 0.5rem;
-                    line-height: 1.3;
-                  }
-                  .markdown-content p {
-                    margin-top: 0.75rem;
-                    margin-bottom: 0.75rem;
-                    color: #334155;
-                  }
-                  .markdown-content table {
-                    width: 100%;
-                    border-collapse: collapse;
-                    margin: 1.5rem 0;
-                    font-size: 0.875rem;
-                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-                  }
-                  .markdown-content table caption {
-                    font-weight: 600;
-                    margin-bottom: 0.5rem;
-                    text-align: left;
-                  }
-                  .markdown-content table th {
-                    background-color: #f8fafc;
-                    border: 1px solid #cbd5e1;
-                    padding: 0.75rem;
-                    text-align: left;
-                    font-weight: 600;
-                    color: #0f172a;
-                  }
-                  .markdown-content table td {
-                    border: 1px solid #cbd5e1;
-                    padding: 0.75rem;
-                    color: #334155;
-                  }
-                  .markdown-content table tr:nth-child(even) {
-                    background-color: #f8fafc;
-                  }
-                  .markdown-content table tr:hover {
-                    background-color: #f1f5f9;
-                  }
-                  .markdown-content strong {
-                    font-weight: 600;
-                    color: #0f172a;
-                  }
-                  .markdown-content em {
-                    font-style: italic;
-                  }
-                  .markdown-content a {
-                    color: #4f46e5;
-                    text-decoration: underline;
-                  }
-                  .markdown-content a:hover {
-                    color: #4338ca;
-                  }
-                  .markdown-content sup {
-                    font-size: 0.75em;
-                    vertical-align: super;
-                    line-height: 0;
-                    position: relative;
-                    top: -0.5em;
-                  }
-                  .markdown-content sub {
-                    font-size: 0.75em;
-                    vertical-align: sub;
-                    line-height: 0;
-                    position: relative;
-                    bottom: -0.25em;
-                  }
-                  .markdown-content ul, .markdown-content ol {
-                    margin: 0.75rem 0;
-                    padding-left: 1.5rem;
-                  }
-                  .markdown-content li {
-                    margin: 0.25rem 0;
-                  }
-                `}</style>
-              </div>
-            ) : activeTab === "json" ? (
-              <div className="space-y-1">
-                <span className="text-slate-400">{"{"}</span>
-                {Object.keys(preparedFields).length > 0 ? (
-                  Object.entries(preparedFields).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">
-                {objectToXML(fields).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 && 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={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">
-                  {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">{fieldsExtracted}</span>
-              </div>
-            </div>
-            <span className="text-slate-400">
-              Processed in {totalTime >= 1000 ? `${(totalTime / 1000).toFixed(1)}s` : `${totalTime}ms`}
-            </span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-=======
 import React, { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
@@ -2402,4 +1199,1203 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Code2,
+  Copy,
+  Check,
+  Braces,
+  FileCode2,
+  FileText,
+  Sparkles,
+  ChevronDown,
+  Upload,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+// Helper function to convert pipe-separated tables to HTML tables
+function convertPipeTablesToHTML(text) {
+  if (!text) return text;
+  
+  const lines = text.split('\n');
+  const result = [];
+  let i = 0;
+  
+  while (i < lines.length) {
+    const line = lines[i];
+    
+    // Check if this line looks like a table row (has multiple pipes)
+    if (line.includes('|') && line.split('|').length >= 3) {
+      // Check if it's a separator line (only |, -, :, spaces)
+      const isSeparator = /^[\s|\-:]+$/.test(line.trim());
+      
+      if (!isSeparator) {
+        // Start of a table - collect all table rows
+        const tableRows = [];
+        let j = i;
+        
+        // Collect header row
+        const headerLine = lines[j];
+        const headerCells = headerLine.split('|').map(cell => cell.trim()).filter(cell => cell || cell === '');
+        // Remove empty cells at start/end
+        if (headerCells.length > 0 && !headerCells[0]) headerCells.shift();
+        if (headerCells.length > 0 && !headerCells[headerCells.length - 1]) headerCells.pop();
+        
+        if (headerCells.length >= 2) {
+          tableRows.push(headerCells);
+          j++;
+          
+          // Skip separator line if present
+          if (j < lines.length && /^[\s|\-:]+$/.test(lines[j].trim())) {
+            j++;
+          }
+          
+          // Collect data rows
+          while (j < lines.length) {
+            const rowLine = lines[j];
+            if (!rowLine.trim()) break; // Empty line ends table
+            
+            // Check if it's still a table row
+            if (rowLine.includes('|') && rowLine.split('|').length >= 2) {
+              const isRowSeparator = /^[\s|\-:]+$/.test(rowLine.trim());
+              if (!isRowSeparator) {
+                const rowCells = rowLine.split('|').map(cell => cell.trim());
+                // Remove empty cells at start/end
+                if (rowCells.length > 0 && !rowCells[0]) rowCells.shift();
+                if (rowCells.length > 0 && !rowCells[rowCells.length - 1]) rowCells.pop();
+                tableRows.push(rowCells);
+                j++;
+              } else {
+                j++;
+              }
+            } else {
+              break; // Not a table row anymore
+            }
+          }
+          
+          // Convert to HTML table
+          if (tableRows.length > 0) {
+            let htmlTable = '<table class="border-collapse border border-gray-300 w-full my-4">\n<thead>\n<tr>';
+            
+            // Header row
+            tableRows[0].forEach(cell => {
+              htmlTable += `<th class="border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left">${escapeHtml(cell)}</th>`;
+            });
+            htmlTable += '</tr>\n</thead>\n<tbody>\n';
+            
+            // Data rows
+            for (let rowIdx = 1; rowIdx < tableRows.length; rowIdx++) {
+              htmlTable += '<tr>';
+              tableRows[rowIdx].forEach((cell, colIdx) => {
+                // Use header cell count to ensure alignment
+                const cellContent = cell || '';
+                htmlTable += `<td class="border border-gray-300 px-4 py-2">${escapeHtml(cellContent)}</td>`;
+              });
+              htmlTable += '</tr>\n';
+            }
+            
+            htmlTable += '</tbody>\n</table>';
+            result.push(htmlTable);
+            i = j;
+            continue;
+          }
+        }
+      }
+    }
+    
+    // Not a table row, add as-is
+    result.push(line);
+    i++;
+  }
+  
+  return result.join('\n');
+}
+
+// Helper function to escape HTML
+function escapeHtml(text) {
+  if (!text) return '';
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Helper function to convert markdown/HTML text to safe HTML
+function renderMarkdownToHTML(text) {
+  if (!text) return "";
+  
+  let html = text;
+  
+  // FIRST: Convert pipe-separated tables to HTML tables
+  html = convertPipeTablesToHTML(html);
+  
+  // Convert LaTeX-style superscripts/subscripts FIRST (before protecting tables)
+  // This ensures they're converted everywhere, including inside tables
+  
+  // Convert LaTeX-style superscripts: $^{text}$ or $^text$ to <sup>text</sup>
+  html = html.replace(/\$\s*\^\s*\{([^}]+)\}\s*\$/g, '<sup>$1</sup>');
+  html = html.replace(/\$\s*\^\s*([^\s$<>]+)\s*\$/g, '<sup>$1</sup>');
+  
+  // Convert LaTeX-style subscripts: $_{text}$ or $_text$ to <sub>text</sub>
+  html = html.replace(/\$\s*_\s*\{([^}]+)\}\s*\$/g, '<sub>$1</sub>');
+  html = html.replace(/\$\s*_\s*([^\s$<>]+)\s*\$/g, '<sub>$1</sub>');
+  
+  // Split by HTML tags to preserve existing HTML (like tables)
+  // Process markdown only in non-HTML sections
+  
+  // First, protect existing HTML blocks (tables, etc.)
+  const htmlBlocks = [];
+  let htmlBlockIndex = 0;
+  
+  // Extract and protect HTML table blocks
+  html = html.replace(/<table[\s\S]*?<\/table>/gi, (match) => {
+    const placeholder = `__HTML_BLOCK_${htmlBlockIndex}__`;
+    htmlBlocks[htmlBlockIndex] = match;
+    htmlBlockIndex++;
+    return placeholder;
+  });
+  
+  // Convert markdown headers (only if not inside HTML)
+  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+  
+  // Convert markdown bold/italic (but not inside HTML tags)
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+  
+  // Convert markdown links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+  
+  // Convert line breaks to paragraphs (but preserve structure around HTML blocks)
+  const parts = html.split(/(__HTML_BLOCK_\d+__)/);
+  const processedParts = parts.map((part, index) => {
+    if (part.match(/^__HTML_BLOCK_\d+__$/)) {
+      // Restore HTML block
+      const blockIndex = parseInt(part.match(/\d+/)[0]);
+      return htmlBlocks[blockIndex];
+    } else {
+      // Process markdown in this part
+      let processed = part;
+      
+      // Convert double line breaks to paragraph breaks
+      processed = processed.replace(/\n\n+/g, '</p><p>');
+      // Convert single line breaks to <br> (but not if already in a tag)
+      processed = processed.replace(/([^\n>])\n([^\n<])/g, '$1<br>$2');
+      
+      // Wrap in paragraph if there's content
+      if (processed.trim() && !processed.trim().startsWith('<')) {
+        processed = '<p>' + processed + '</p>';
+      }
+      
+      return processed;
+    }
+  });
+  
+  html = processedParts.join('');
+  
+  // Process LaTeX notation in restored HTML blocks (tables) as well
+  // This handles any LaTeX that might be in table cells
+  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*\^\s*\{([^}]+)\}\s*\$([^<]*)(<\/td>|<\/th>)/gi, 
+    (match, openTag, before, supText, after, closeTag) => {
+      return openTag + before + '<sup>' + supText + '</sup>' + after + closeTag;
+    });
+  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*\^\s*([^\s$<>]+)\s*\$([^<]*)(<\/td>|<\/th>)/gi,
+    (match, openTag, before, supText, after, closeTag) => {
+      return openTag + before + '<sup>' + supText + '</sup>' + after + closeTag;
+    });
+  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*_\s*\{([^}]+)\}\s*\$([^<]*)(<\/td>|<\/th>)/gi,
+    (match, openTag, before, subText, after, closeTag) => {
+      return openTag + before + '<sub>' + subText + '</sub>' + after + closeTag;
+    });
+  html = html.replace(/(<td[^>]*>|<th[^>]*>)([^<]*)\$\s*_\s*([^\s$<>]+)\s*\$([^<]*)(<\/td>|<\/th>)/gi,
+    (match, openTag, before, subText, after, closeTag) => {
+      return openTag + before + '<sub>' + subText + '</sub>' + after + closeTag;
+    });
+  
+  // Clean up empty paragraphs and fix paragraph structure
+  html = html.replace(/<p><\/p>/g, '');
+  html = html.replace(/<p>\s*<br>\s*<\/p>/g, '');
+  html = html.replace(/<p>\s*<\/p>/g, '');
+  
+  // Ensure proper spacing around HTML blocks
+  html = html.replace(/(<\/table>)\s*(<h[1-3])/g, '$1</p><p>$2');
+  html = html.replace(/(<\/h[1-3]>)\s*(<table)/g, '$1<p>$2');
+  html = html.replace(/(<\/table>)\s*(<p>)/g, '$1$2');
+  
+  return html;
+}
+
+// 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!`;
+
+// Helper function to convert object to XML
+// Prepare fields for JSON/XML output - remove duplicates and restructure
+function prepareFieldsForOutput(fields, format = "json") {
+  if (!fields || typeof fields !== "object") {
+    return fields;
+  }
+  
+  const output = { ...fields };
+  
+  // Extract Fields from root level if it exists
+  const rootFields = output.Fields;
+  // Remove Fields from output temporarily (will be added back at top)
+  delete output.Fields;
+  
+  // Remove full_text from top-level if pages array exists (to avoid duplication)
+  if (output.pages && Array.isArray(output.pages) && output.pages.length > 0) {
+    delete output.full_text;
+    
+    // Clean up each page: remove full_text from page.fields (it duplicates page.text)
+    output.pages = output.pages.map(page => {
+      const cleanedPage = { ...page };
+      if (cleanedPage.fields && typeof cleanedPage.fields === "object") {
+        const cleanedFields = { ...cleanedPage.fields };
+        // Remove full_text from page fields (duplicates page.text)
+        delete cleanedFields.full_text;
+        cleanedPage.fields = cleanedFields;
+      }
+      return cleanedPage;
+    });
+  }
+  
+  // For JSON and XML: restructure pages into separate top-level fields (page_1, page_2, etc.)
+  if ((format === "json" || format === "xml") && output.pages && Array.isArray(output.pages)) {
+    // Get top-level field keys (these are merged from all pages - avoid duplicating in page fields)
+    const topLevelKeys = new Set(Object.keys(output).filter(k => k !== "pages" && k !== "full_text" && k !== "Fields"));
+    
+    output.pages.forEach((page, idx) => {
+      const pageNum = page.page_number || idx + 1;
+      const pageFields = page.fields || {};
+      
+      // Remove duplicate fields from page.fields:
+      // 1. Remove full_text (duplicates page.text)
+      // 2. Remove fields that match top-level fields (already shown at root)
+      const cleanedPageFields = {};
+      for (const [key, value] of Object.entries(pageFields)) {
+        // Skip full_text and fields that match top-level exactly
+        if (key !== "full_text" && (!topLevelKeys.has(key) || (value !== output[key]))) {
+          cleanedPageFields[key] = value;
+        }
+      }
+      
+      const pageObj = {
+        text: page.text || "",
+        confidence: page.confidence || 0,
+        doc_type: page.doc_type || "other"
+      };
+      
+      // Add table and footer_notes if they exist
+      if (page.table && Array.isArray(page.table) && page.table.length > 0) {
+        pageObj.table = page.table;
+      }
+      if (page.footer_notes && Array.isArray(page.footer_notes) && page.footer_notes.length > 0) {
+        pageObj.footer_notes = page.footer_notes;
+      }
+      
+      // Only add fields if there are unique page-specific fields
+      if (Object.keys(cleanedPageFields).length > 0) {
+        pageObj.fields = cleanedPageFields;
+      }
+      
+      output[`page_${pageNum}`] = pageObj;
+    });
+    // Remove pages array - we now have page_1, page_2, etc. as separate fields
+    delete output.pages;
+  }
+  
+  // Handle page_X structure (from backend) - remove Fields from page objects if they exist
+  if (output && typeof output === "object") {
+    const pageKeys = Object.keys(output).filter(k => k.startsWith("page_"));
+    for (const pageKey of pageKeys) {
+      const pageData = output[pageKey];
+      if (pageData && typeof pageData === "object") {
+        // Remove Fields from page objects (it's now at root level)
+        delete pageData.Fields;
+        delete pageData.metadata;
+      }
+    }
+  }
+  
+  // Rebuild output with Fields at the top (only if it exists and is not empty)
+  const finalOutput = {};
+  if (rootFields && typeof rootFields === "object" && Object.keys(rootFields).length > 0) {
+    finalOutput.Fields = rootFields;
+  }
+  
+  // Add all other keys
+  Object.keys(output).forEach(key => {
+    finalOutput[key] = output[key];
+  });
+  
+  return finalOutput;
+}
+
+function objectToXML(obj, rootName = "extraction") {
+  // Prepare fields - remove full_text if pages exist
+  const preparedObj = prepareFieldsForOutput(obj, "xml");
+  
+  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;
+      
+      // Skip full_text if pages exist (already handled in prepareFieldsForOutput)
+      if (key === "full_text" && obj.pages && Array.isArray(obj.pages) && obj.pages.length > 0) {
+        continue;
+      }
+      
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          xml += `${indent}<${key}>\n`;
+          if (typeof item === "object") {
+            convert(item, indent + "  ");
+          } else {
+            xml += `${indent}  ${escapeXML(String(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}>${escapeXML(String(value))}</${key}>\n`;
+      }
+    }
+  };
+  
+  convert(preparedObj);
+  xml += `</${rootName}>`;
+  return xml;
+}
+
+function escapeXML(str) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+// Helper function to extract text from page structure
+function extractTextFromFields(fields) {
+  if (!fields || typeof fields !== "object") {
+    return "";
+  }
+  
+  // Check for page_X structure first (preferred format)
+  const pageKeys = Object.keys(fields).filter(key => key.startsWith("page_"));
+  if (pageKeys.length > 0) {
+    // Get text from first page (or combine all pages)
+    const pageTexts = pageKeys.map(key => {
+      const page = fields[key];
+      if (page && page.text) {
+        return page.text;
+      }
+      return "";
+    }).filter(text => text);
+    
+    if (pageTexts.length > 0) {
+      return pageTexts.join("\n\n");
+    }
+  }
+  
+  // Fallback to full_text
+  if (fields.full_text) {
+    return fields.full_text;
+  }
+  
+  return "";
+}
+
+// Helper function to format fields as readable text
+function fieldsToText(fields) {
+  if (!fields || typeof fields !== "object") {
+    return "No data extracted.";
+  }
+  
+  // Extract text from page structure or full_text
+  const extractedText = extractTextFromFields(fields);
+  
+  if (extractedText) {
+    return extractedText;
+    
+    // Don't show pages array separately if full_text already contains page markers
+    // (full_text from backend already includes "=== PAGE 1 ===" etc.)
+    const hasPageMarkers = fields.full_text.includes("=== PAGE") || fields.full_text.includes("--- Page");
+    
+    // Only show pages array if full_text doesn't already have page breakdown
+    if (!hasPageMarkers && fields.pages && Array.isArray(fields.pages)) {
+      text += "\n\n=== TEXT BY PAGE ===\n\n";
+      fields.pages.forEach((page, idx) => {
+        text += `--- Page ${page.page_number || idx + 1} ---\n`;
+        text += page.text || "";
+        text += "\n\n";
+      });
+    }
+    
+    // Then show other structured fields
+    const otherFields = { ...fields };
+    delete otherFields.full_text;
+    delete otherFields.pages;
+    
+    if (Object.keys(otherFields).length > 0) {
+      text += "\n\n=== STRUCTURED FIELDS ===\n\n";
+      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(otherFields).forEach(([key, value]) => {
+        formatValue(key, value);
+        text += "\n";
+      });
+    }
+    
+    return text.trim();
+  }
+  
+  // Fallback: format all fields normally
+  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, onNewUpload }) {
+  const [activeTab, setActiveTab] = useState("json");
+  const [copied, setCopied] = useState(false);
+  const [statusMessage, setStatusMessage] = useState("Preparing document...");
+  
+  // 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;
+
+  // Dynamic status messages that rotate during processing
+  const statusMessages = [
+    "Preparing document...",
+    "Converting pages to images...",
+    "Visual Reasoning...",
+    "Reading text from document...",
+    "Identifying document structure...",
+    "Extracting tables and data...",
+    "Analyzing content...",
+    "Processing pages...",
+    "Organizing extracted information...",
+    "Finalizing results...",
+  ];
+
+  // Rotate status messages during processing
+  const messageIndexRef = useRef(0);
+  
+  useEffect(() => {
+    if (!isProcessing) {
+      setStatusMessage("Analyzing document structure");
+      messageIndexRef.current = 0;
+      return;
+    }
+
+    setStatusMessage(statusMessages[0]);
+    messageIndexRef.current = 0;
+
+    const interval = setInterval(() => {
+      messageIndexRef.current = (messageIndexRef.current + 1) % statusMessages.length;
+      setStatusMessage(statusMessages[messageIndexRef.current]);
+    }, 2500); // Change message every 2.5 seconds
+
+    return () => clearInterval(interval);
+  }, [isProcessing]);
+  
+  // Initialize expanded sections based on available fields
+  const [expandedSections, setExpandedSections] = useState(() => 
+    Object.keys(fields).slice(0, 5) // Expand first 5 sections by default
+  );
+
+  // Helper function to convert HTML to formatted plain text with layout preserved
+  const htmlToFormattedText = (html) => {
+    if (!html) return "";
+    
+    // Create a temporary div to parse HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    
+    let text = "";
+    
+    // Process each element
+    const processNode = (node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent;
+      }
+      
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return "";
+      }
+      
+      const tagName = node.tagName?.toLowerCase();
+      const children = Array.from(node.childNodes);
+      
+      switch (tagName) {
+        case "h1":
+          return "\n\n" + processChildren(children).trim() + "\n\n";
+        case "h2":
+          return "\n\n" + processChildren(children).trim() + "\n\n";
+        case "h3":
+          return "\n" + processChildren(children).trim() + "\n";
+        case "p":
+          return processChildren(children) + "\n\n";
+        case "br":
+          return "\n";
+        case "strong":
+        case "b":
+          return processChildren(children);
+        case "em":
+        case "i":
+          return processChildren(children);
+        case "sup":
+          return processChildren(children);
+        case "sub":
+          return processChildren(children);
+        case "table":
+          return "\n" + processTable(node) + "\n\n";
+        case "ul":
+        case "ol":
+          return "\n" + processList(node) + "\n\n";
+        case "li":
+          return "  • " + processChildren(children).trim() + "\n";
+        default:
+          return processChildren(children);
+      }
+    };
+    
+    const processChildren = (children) => {
+      return children.map(processNode).join("");
+    };
+    
+    const processTable = (table) => {
+      let tableText = "";
+      const rows = table.querySelectorAll("tr");
+      
+      if (rows.length === 0) return "";
+      
+      // First pass: calculate column widths
+      const allRows = Array.from(rows);
+      const columnCount = Math.max(...allRows.map(row => row.querySelectorAll("td, th").length));
+      const columnWidths = new Array(columnCount).fill(0);
+      
+      allRows.forEach(row => {
+        const cells = row.querySelectorAll("td, th");
+        cells.forEach((cell, colIndex) => {
+          const cellText = processChildren(Array.from(cell.childNodes)).trim().replace(/\s+/g, " ");
+          columnWidths[colIndex] = Math.max(columnWidths[colIndex] || 0, cellText.length, 10);
+        });
+      });
+      
+      // Second pass: format rows
+      allRows.forEach((row, rowIndex) => {
+        const cells = row.querySelectorAll("td, th");
+        const cellTexts = Array.from(cells).map(cell => {
+          let cellContent = processChildren(Array.from(cell.childNodes)).trim();
+          cellContent = cellContent.replace(/\s+/g, " ");
+          return cellContent;
+        });
+        
+        // Pad cells to column widths
+        const paddedCells = cellTexts.map((text, i) => {
+          const width = columnWidths[i] || 10;
+          return text.padEnd(width);
+        });
+        
+        tableText += paddedCells.join(" | ") + "\n";
+        
+        // Add separator after header row
+        if (rowIndex === 0 && row.querySelector("th")) {
+          tableText += columnWidths.map(w => "-".repeat(w)).join("-|-") + "\n";
+        }
+      });
+      
+      return tableText;
+    };
+    
+    const processList = (list) => {
+      const items = list.querySelectorAll("li");
+      return Array.from(items).map(item => {
+        return "  • " + processChildren(Array.from(item.childNodes)).trim();
+      }).join("\n");
+    };
+    
+    text = processChildren(Array.from(tempDiv.childNodes));
+    
+    // Clean up extra newlines
+    text = text.replace(/\n{3,}/g, "\n\n");
+    text = text.trim();
+    
+    return text;
+  };
+
+  const handleCopy = () => {
+    let content = "";
+    if (activeTab === "json") {
+      const preparedFields = prepareFieldsForOutput(fields, "json");
+      content = JSON.stringify(preparedFields, null, 2);
+    } else if (activeTab === "xml") {
+      content = objectToXML(fields);
+    } else {
+      // For text tab, get the formatted HTML and convert to plain text with layout
+      const textContent = extractTextFromFields(fields);
+      const htmlContent = renderMarkdownToHTML(textContent);
+      content = htmlToFormattedText(htmlContent);
+    }
+    
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  
+  // Get prepared fields for display
+  const preparedFields = React.useMemo(() => {
+    return prepareFieldsForOutput(fields, "json");
+  }, [fields]);
+  
+  // 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) =>
+      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 
+                ? `${fieldsExtracted} field${fieldsExtracted !== 1 ? 's' : ''} extracted`
+                : "Waiting for extraction"}
+            </p>
+          </div>
+          {isComplete && onNewUpload && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onNewUpload}
+              className="h-8 ml-auto text-xs gap-1.5 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50"
+              title="Upload new document"
+            >
+              <Upload className="h-3.5 w-3.5" />
+              New
+            </Button>
+          )}
+        </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">Extracting data...</p>
+              <p className="text-slate-400 text-sm">{statusMessage}</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>
+        ) : 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" ? (
+              <div 
+                className="text-sm text-slate-700 leading-relaxed"
+                style={{
+                  fontFamily: 'system-ui, -apple-system, sans-serif'
+                }}
+              >
+                <div
+                  className="markdown-content"
+                  dangerouslySetInnerHTML={{ __html: renderMarkdownToHTML(fieldsToText(fields)) }}
+                  style={{
+                    lineHeight: '1.6'
+                  }}
+                />
+                <style>{`
+                  .markdown-content h1 {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                    margin-top: 1.5rem;
+                    margin-bottom: 1rem;
+                    line-height: 1.3;
+                  }
+                  .markdown-content h2 {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    color: #0f172a;
+                    margin-top: 1.25rem;
+                    margin-bottom: 0.75rem;
+                    line-height: 1.3;
+                  }
+                  .markdown-content h3 {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: #1e293b;
+                    margin-top: 1rem;
+                    margin-bottom: 0.5rem;
+                    line-height: 1.3;
+                  }
+                  .markdown-content p {
+                    margin-top: 0.75rem;
+                    margin-bottom: 0.75rem;
+                    color: #334155;
+                  }
+                  .markdown-content table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin: 1.5rem 0;
+                    font-size: 0.875rem;
+                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+                  }
+                  .markdown-content table caption {
+                    font-weight: 600;
+                    margin-bottom: 0.5rem;
+                    text-align: left;
+                  }
+                  .markdown-content table th {
+                    background-color: #f8fafc;
+                    border: 1px solid #cbd5e1;
+                    padding: 0.75rem;
+                    text-align: left;
+                    font-weight: 600;
+                    color: #0f172a;
+                  }
+                  .markdown-content table td {
+                    border: 1px solid #cbd5e1;
+                    padding: 0.75rem;
+                    color: #334155;
+                  }
+                  .markdown-content table tr:nth-child(even) {
+                    background-color: #f8fafc;
+                  }
+                  .markdown-content table tr:hover {
+                    background-color: #f1f5f9;
+                  }
+                  .markdown-content strong {
+                    font-weight: 600;
+                    color: #0f172a;
+                  }
+                  .markdown-content em {
+                    font-style: italic;
+                  }
+                  .markdown-content a {
+                    color: #4f46e5;
+                    text-decoration: underline;
+                  }
+                  .markdown-content a:hover {
+                    color: #4338ca;
+                  }
+                  .markdown-content sup {
+                    font-size: 0.75em;
+                    vertical-align: super;
+                    line-height: 0;
+                    position: relative;
+                    top: -0.5em;
+                  }
+                  .markdown-content sub {
+                    font-size: 0.75em;
+                    vertical-align: sub;
+                    line-height: 0;
+                    position: relative;
+                    bottom: -0.25em;
+                  }
+                  .markdown-content ul, .markdown-content ol {
+                    margin: 0.75rem 0;
+                    padding-left: 1.5rem;
+                  }
+                  .markdown-content li {
+                    margin: 0.25rem 0;
+                  }
+                `}</style>
+              </div>
+            ) : activeTab === "json" ? (
+              <div className="space-y-1">
+                <span className="text-slate-400">{"{"}</span>
+                {Object.keys(preparedFields).length > 0 ? (
+                  Object.entries(preparedFields).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">
+                {objectToXML(fields).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 && 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={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">
+                  {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">{fieldsExtracted}</span>
+              </div>
+            </div>
+            <span className="text-slate-400">
+              Processed in {totalTime >= 1000 ? `${(totalTime / 1000).toFixed(1)}s` : `${totalTime}ms`}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ocr/UpgradeModal.jsx

@@ -1,218 +1,3 @@
-<<<<<<< HEAD
-import React from "react";
-import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-import { 
-    X, 
-    Sparkles, 
-    Zap, 
-    Shield, 
-    Cloud, 
-    BarChart3, 
-    Bot,
-    Globe,
-    Lock,
-    Rocket,
-    Users,
-    CheckCircle2,
-    ArrowRight
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-const features = [
-    {
-        icon: Zap,
-        title: "Production-Scale Processing",
-        description: "Remove trial limits and run live AP and operations workflows",
-        color: "amber",
-        cta: "Explore with a demo",
-        gradient: "from-amber-500 to-orange-500"
-    },
-    {
-        icon: Bot,
-        title: "Advanced Agentic Processing",
-        description: "You can customize your own agentic pipeline with your own data",
-        color: "indigo",
-        cta: "Talk to Sales",
-        gradient: "from-indigo-500 to-violet-500"
-    },
-    {
-        icon: Cloud,
-        title: "API Access",
-        description: "Integrate EZOFIS into your workflow with our REST API",
-        color: "blue",
-        cta: "Talk to a Techie!",
-        gradient: "from-blue-500 to-cyan-500"
-    }
-];
-
-export default function UpgradeModal({ open, onClose }) {
-    if (!open) return null;
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-            {/* Backdrop */}
-            <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-                onClick={onClose}
-            />
-
-            {/* Modal */}
-            <motion.div
-                initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                animate={{ opacity: 1, scale: 1, y: 0 }}
-                exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                className="relative z-10 w-full max-w-6xl max-h-[90vh] mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* Header */}
-                <div className="sticky top-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 text-white px-8 py-6 z-10">
-                    <button 
-                        onClick={onClose}
-                        className="absolute right-6 top-6 h-8 w-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
-                    >
-                        <X className="h-4 w-4" />
-                    </button>
-                    
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        className="text-center"
-                    >
-                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm mb-4">
-                            <Sparkles className="h-4 w-4" />
-                            <span className="text-sm font-medium">Trial Limit Reached</span>
-                        </div>
-                        <h2 className="text-3xl font-bold mb-2">You've processed 2 documents</h2>
-                        <p className="text-white/80 text-lg">Continue with production-ready document intelligence</p>
-                    </motion.div>
-                </div>
-
-                {/* Stats Bar */}
-                <div className="grid grid-cols-3 gap-6 px-8 py-6 bg-slate-50 border-b border-slate-200">
-                    {[
-                        { label: "Accuracy Rate", value: "99.8%", icon: CheckCircle2 },
-                        { label: "Processing Speed", value: "< 10s", icon: Zap },
-                        { label: "Operational Users", value: "10,000+", icon: Users }
-                    ].map((stat, i) => (
-                        <motion.div
-                            key={stat.label}
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            transition={{ delay: i * 0.1 }}
-                            className="text-center"
-                        >
-                            <div className="flex items-center justify-center gap-2 mb-1">
-                                <stat.icon className="h-4 w-4 text-indigo-600" />
-                                <span className="text-2xl font-bold text-slate-900">{stat.value}</span>
-                            </div>
-                            <p className="text-sm text-slate-500">{stat.label}</p>
-                        </motion.div>
-                    ))}
-                </div>
-
-                {/* Features Grid - Scrollable */}
-                <div className="flex-1 overflow-auto px-8 py-8">
-                    <div className="text-center mb-8">
-                        <h3 className="text-2xl font-bold text-slate-900 mb-2">
-                        Continue to Production Use
-                        </h3>
-
-                    </div>
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {features.map((feature, index) => (
-                            <motion.div
-                                key={feature.title}
-                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ delay: 0.2 + index * 0.1 }}
-                                className="group relative bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 hover:-translate-y-1 overflow-hidden"
-                            >
-                                {/* Gradient Background on Hover */}
-                                <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
-                                
-                                <div className="relative">
-                                    <div className={cn(
-                                        "h-12 w-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300",
-                                        feature.color === "amber" && "bg-amber-50",
-                                        feature.color === "indigo" && "bg-indigo-50",
-                                        feature.color === "blue" && "bg-blue-50",
-                                        feature.color === "emerald" && "bg-emerald-50",
-                                        feature.color === "slate" && "bg-slate-50",
-                                        feature.color === "purple" && "bg-purple-50"
-                                    )}>
-                                        <feature.icon className={cn(
-                                            "h-6 w-6",
-                                            feature.color === "amber" && "text-amber-600",
-                                            feature.color === "indigo" && "text-indigo-600",
-                                            feature.color === "blue" && "text-blue-600",
-                                            feature.color === "emerald" && "text-emerald-600",
-                                            feature.color === "slate" && "text-slate-600",
-                                            feature.color === "purple" && "text-purple-600"
-                                        )} />
-                                    </div>
-                                    <h4 className="font-semibold text-slate-900 mb-2">{feature.title}</h4>
-                                    <p className="text-sm text-slate-600 mb-4 leading-relaxed">{feature.description}</p>
-                                    
-                                    <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        className={cn(
-                                            "w-full h-9 border transition-all group-hover:shadow-md",
-                                            feature.color === "amber" && "text-amber-600 hover:bg-amber-50 border-amber-200 hover:border-amber-300",
-                                            feature.color === "indigo" && "text-indigo-600 hover:bg-indigo-50 border-indigo-200 hover:border-indigo-300",
-                                            feature.color === "blue" && "text-blue-600 hover:bg-blue-50 border-blue-200 hover:border-blue-300",
-                                            feature.color === "emerald" && "text-emerald-600 hover:bg-emerald-50 border-emerald-200 hover:border-emerald-300",
-                                            feature.color === "slate" && "text-slate-600 hover:bg-slate-50 border-slate-200 hover:border-slate-300",
-                                            feature.color === "purple" && "text-purple-600 hover:bg-purple-50 border-purple-200 hover:border-purple-300"
-                                        )}
-                                    >
-                                        {feature.cta}
-                                        <ArrowRight className="h-3.5 w-3.5 ml-2 group-hover:translate-x-1 transition-transform" />
-                                    </Button>
-                                </div>
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-
-                {/* CTA Footer */}
-                <div className="sticky bottom-0 bg-white border-t border-slate-200 px-8 py-6">
-                    <div className="flex items-center justify-between gap-6">
-                        <div className="flex-1">
-                            <h4 className="font-semibold text-slate-900 mb-1">Ready to scale?</h4>
-                            <p className="text-sm text-slate-600">No commitment. We’ll tailor the demo to your documents and workflows.</p>
-                        </div>
-                        <div className="flex items-center gap-3">
-                            <Button
-                                variant="outline"
-                                size="lg"
-                                className="h-11 border-slate-300"
-                            >
-                                <Users className="h-4 w-4 mr-2" />
-                                Talk to Sales
-                            </Button>
-                            <Button
-                                size="lg"
-                                className="h-11 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30"
-                            >
-                                <Rocket className="h-4 w-4 mr-2" />
-                                Start a production evaluation
-                                <Sparkles className="h-4 w-4 ml-2" />
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </motion.div>
-        </div>
-    );
-}
-
-=======
 import React from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
@@ -425,5 +210,214 @@ export default function UpgradeModal({ open, onClose }) {
         </div>
     );
 }
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { 
+    X, 
+    Sparkles, 
+    Zap, 
+    Shield, 
+    Cloud, 
+    BarChart3, 
+    Bot,
+    Globe,
+    Lock,
+    Rocket,
+    Users,
+    CheckCircle2,
+    ArrowRight
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const features = [
+    {
+        icon: Zap,
+        title: "Production-Scale Processing",
+        description: "Remove trial limits and run live AP and operations workflows",
+        color: "amber",
+        cta: "Explore with a demo",
+        gradient: "from-amber-500 to-orange-500"
+    },
+    {
+        icon: Bot,
+        title: "Advanced Agentic Processing",
+        description: "You can customize your own agentic pipeline with your own data",
+        color: "indigo",
+        cta: "Talk to Sales",
+        gradient: "from-indigo-500 to-violet-500"
+    },
+    {
+        icon: Cloud,
+        title: "API Access",
+        description: "Integrate EZOFIS into your workflow with our REST API",
+        color: "blue",
+        cta: "Talk to a Techie!",
+        gradient: "from-blue-500 to-cyan-500"
+    }
+];
+
+export default function UpgradeModal({ open, onClose }) {
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={onClose}
+            />
+
+            {/* Modal */}
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                className="relative z-10 w-full max-w-6xl max-h-[90vh] mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="sticky top-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 text-white px-8 py-6 z-10">
+                    <button 
+                        onClick={onClose}
+                        className="absolute right-6 top-6 h-8 w-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                    
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="text-center"
+                    >
+                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm mb-4">
+                            <Sparkles className="h-4 w-4" />
+                            <span className="text-sm font-medium">Trial Limit Reached</span>
+                        </div>
+                        <h2 className="text-3xl font-bold mb-2">You've processed 2 documents</h2>
+                        <p className="text-white/80 text-lg">Continue with production-ready document intelligence</p>
+                    </motion.div>
+                </div>
+
+                {/* Stats Bar */}
+                <div className="grid grid-cols-3 gap-6 px-8 py-6 bg-slate-50 border-b border-slate-200">
+                    {[
+                        { label: "Accuracy Rate", value: "99.8%", icon: CheckCircle2 },
+                        { label: "Processing Speed", value: "< 10s", icon: Zap },
+                        { label: "Operational Users", value: "10,000+", icon: Users }
+                    ].map((stat, i) => (
+                        <motion.div
+                            key={stat.label}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.1 }}
+                            className="text-center"
+                        >
+                            <div className="flex items-center justify-center gap-2 mb-1">
+                                <stat.icon className="h-4 w-4 text-indigo-600" />
+                                <span className="text-2xl font-bold text-slate-900">{stat.value}</span>
+                            </div>
+                            <p className="text-sm text-slate-500">{stat.label}</p>
+                        </motion.div>
+                    ))}
+                </div>
 
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+                {/* Features Grid - Scrollable */}
+                <div className="flex-1 overflow-auto px-8 py-8">
+                    <div className="text-center mb-8">
+                        <h3 className="text-2xl font-bold text-slate-900 mb-2">
+                        Continue to Production Use
+                        </h3>
+
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {features.map((feature, index) => (
+                            <motion.div
+                                key={feature.title}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: 0.2 + index * 0.1 }}
+                                className="group relative bg-white rounded-2xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all duration-300 hover:-translate-y-1 overflow-hidden"
+                            >
+                                {/* Gradient Background on Hover */}
+                                <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
+                                
+                                <div className="relative">
+                                    <div className={cn(
+                                        "h-12 w-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300",
+                                        feature.color === "amber" && "bg-amber-50",
+                                        feature.color === "indigo" && "bg-indigo-50",
+                                        feature.color === "blue" && "bg-blue-50",
+                                        feature.color === "emerald" && "bg-emerald-50",
+                                        feature.color === "slate" && "bg-slate-50",
+                                        feature.color === "purple" && "bg-purple-50"
+                                    )}>
+                                        <feature.icon className={cn(
+                                            "h-6 w-6",
+                                            feature.color === "amber" && "text-amber-600",
+                                            feature.color === "indigo" && "text-indigo-600",
+                                            feature.color === "blue" && "text-blue-600",
+                                            feature.color === "emerald" && "text-emerald-600",
+                                            feature.color === "slate" && "text-slate-600",
+                                            feature.color === "purple" && "text-purple-600"
+                                        )} />
+                                    </div>
+                                    <h4 className="font-semibold text-slate-900 mb-2">{feature.title}</h4>
+                                    <p className="text-sm text-slate-600 mb-4 leading-relaxed">{feature.description}</p>
+                                    
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className={cn(
+                                            "w-full h-9 border transition-all group-hover:shadow-md",
+                                            feature.color === "amber" && "text-amber-600 hover:bg-amber-50 border-amber-200 hover:border-amber-300",
+                                            feature.color === "indigo" && "text-indigo-600 hover:bg-indigo-50 border-indigo-200 hover:border-indigo-300",
+                                            feature.color === "blue" && "text-blue-600 hover:bg-blue-50 border-blue-200 hover:border-blue-300",
+                                            feature.color === "emerald" && "text-emerald-600 hover:bg-emerald-50 border-emerald-200 hover:border-emerald-300",
+                                            feature.color === "slate" && "text-slate-600 hover:bg-slate-50 border-slate-200 hover:border-slate-300",
+                                            feature.color === "purple" && "text-purple-600 hover:bg-purple-50 border-purple-200 hover:border-purple-300"
+                                        )}
+                                    >
+                                        {feature.cta}
+                                        <ArrowRight className="h-3.5 w-3.5 ml-2 group-hover:translate-x-1 transition-transform" />
+                                    </Button>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* CTA Footer */}
+                <div className="sticky bottom-0 bg-white border-t border-slate-200 px-8 py-6">
+                    <div className="flex items-center justify-between gap-6">
+                        <div className="flex-1">
+                            <h4 className="font-semibold text-slate-900 mb-1">Ready to scale?</h4>
+                            <p className="text-sm text-slate-600">No commitment. We’ll tailor the demo to your documents and workflows.</p>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <Button
+                                variant="outline"
+                                size="lg"
+                                className="h-11 border-slate-300"
+                            >
+                                <Users className="h-4 w-4 mr-2" />
+                                Talk to Sales
+                            </Button>
+                            <Button
+                                size="lg"
+                                className="h-11 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30"
+                            >
+                                <Rocket className="h-4 w-4 mr-2" />
+                                Start a production evaluation
+                                <Sparkles className="h-4 w-4 ml-2" />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

frontend/src/pages/History.jsx

@@ -1,864 +1,3 @@
-<<<<<<< HEAD
-// frontend/src/pages/History.jsx
-
-import React, { useState, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  FileText,
-  Clock,
-  CheckCircle2,
-  ChevronRight,
-  Download,
-  Eye,
-  Trash2,
-  Search,
-  Filter,
-  Calendar,
-  Upload,
-  Cpu,
-  TableProperties,
-  MonitorPlay,
-  TrendingUp,
-  TrendingDown,
-  Minus,
-  AlertCircle,
-  X,
-  FileSpreadsheet,
-  Table2,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-import { getHistory } from "@/services/api";
-
-// minimal "toast"
-const toastSuccess = (msg) => {
-  console.log(msg);
-};
-
-const stageConfig = {
-  uploading: { label: "Uploading", icon: Upload, color: "blue" },
-  aiAnalysis: { label: "AI Analysis", icon: Cpu, color: "violet" },
-  dataExtraction: { label: "Data Extraction", icon: TableProperties, color: "emerald" },
-  outputRendering: { label: "Output Rendering", icon: MonitorPlay, color: "amber" },
-};
-
-const variationConfig = {
-  fast: { icon: TrendingDown, color: "text-emerald-500", label: "Faster than avg" },
-  normal: { icon: Minus, color: "text-slate-400", label: "Normal" },
-  slow: { icon: TrendingUp, color: "text-amber-500", label: "Slower than avg" },
-  error: { icon: AlertCircle, color: "text-red-500", label: "Error" },
-  skipped: { icon: Minus, color: "text-slate-300", label: "Skipped" },
-};
-
-export default function History() {
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedStatus, setSelectedStatus] = useState("all");
-  const [expandedReport, setExpandedReport] = useState(null);
-  const [isExporting, setIsExporting] = useState(false);
-  const [history, setHistory] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  // Fetch history on component mount
-  useEffect(() => {
-    const fetchHistory = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const data = await getHistory();
-        setHistory(data);
-        
-        // Check if there's an extractionId in URL (from share link)
-        const extractionId = searchParams.get("extractionId");
-        if (extractionId) {
-          // Clear the query param and navigate to dashboard
-          setSearchParams({});
-          // Small delay to ensure history is loaded
-          setTimeout(() => {
-            navigate(`/?extractionId=${extractionId}`);
-          }, 100);
-        }
-      } catch (err) {
-        console.error("Failed to fetch history:", err);
-        setError(err.message || "Failed to load history");
-        setHistory([]); // Fallback to empty array
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchHistory();
-  }, [searchParams, setSearchParams, navigate]);
-
-  const filteredHistory = history.filter((item) => {
-    const matchesSearch = item.fileName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false;
-    const matchesStatus = selectedStatus === "all" || item.status === selectedStatus;
-    return matchesSearch && matchesStatus;
-  });
-
-  const formatTime = (ms) => {
-    if (ms >= 1000) {
-      return `${(ms / 1000).toFixed(2)}s`;
-    }
-    return `${ms}ms`;
-  };
-
-  const formatTimeForExport = (ms) => {
-    return ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${ms}ms`;
-  };
-
-  const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  };
-
-  const formatDateForExport = (dateString) => {
-    const date = new Date(dateString);
-    return date.toISOString().replace("T", " ").slice(0, 19);
-  };
-
-  const generateCSV = (data) => {
-    const headers = [
-      "File Name",
-      "File Type",
-      "File Size",
-      "Extracted At",
-      "Status",
-      "Confidence (%)",
-      "Fields Extracted",
-      "Total Time (ms)",
-      "Upload Time (ms)",
-      "Upload Status",
-      "Upload Variation",
-      "AI Analysis Time (ms)",
-      "AI Analysis Status",
-      "AI Analysis Variation",
-      "Data Extraction Time (ms)",
-      "Data Extraction Status",
-      "Data Extraction Variation",
-      "Output Rendering Time (ms)",
-      "Output Rendering Status",
-      "Output Rendering Variation",
-      "Error Message",
-    ];
-
-    const rows = data.map((item) => [
-      item.fileName,
-      item.fileType,
-      item.fileSize,
-      formatDateForExport(item.extractedAt),
-      item.status,
-      item.confidence,
-      item.fieldsExtracted,
-      item.totalTime,
-      item.stages.uploading.time,
-      item.stages.uploading.status,
-      item.stages.uploading.variation,
-      item.stages.aiAnalysis.time,
-      item.stages.aiAnalysis.status,
-      item.stages.aiAnalysis.variation,
-      item.stages.dataExtraction.time,
-      item.stages.dataExtraction.status,
-      item.stages.dataExtraction.variation,
-      item.stages.outputRendering.time,
-      item.stages.outputRendering.status,
-      item.stages.outputRendering.variation,
-      item.errorMessage || "",
-    ]);
-
-    const csvContent = [
-      headers.join(","),
-      ...rows.map((row) => row.map((cell) => `"${cell}"`).join(",")),
-    ].join("\n");
-
-    return csvContent;
-  };
-
-  const downloadFile = (content, fileName, mimeType) => {
-    const blob = new Blob([content], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleExportCSV = () => {
-    setIsExporting(true);
-    setTimeout(() => {
-      const csvContent = generateCSV(filteredHistory);
-      downloadFile(
-        csvContent,
-        `extraction_history_${new Date().toISOString().slice(0, 10)}.csv`,
-        "text/csv;charset=utf-8;"
-      );
-      toastSuccess("CSV exported successfully");
-      setIsExporting(false);
-    }, 500);
-  };
-
-  const generateExcelXML = (data) => {
-    const headers = [
-      "File Name",
-      "File Type",
-      "File Size",
-      "Extracted At",
-      "Status",
-      "Confidence (%)",
-      "Fields Extracted",
-      "Total Time (ms)",
-      "Upload Time (ms)",
-      "Upload Status",
-      "Upload Variation",
-      "AI Analysis Time (ms)",
-      "AI Analysis Status",
-      "AI Analysis Variation",
-      "Data Extraction Time (ms)",
-      "Data Extraction Status",
-      "Data Extraction Variation",
-      "Output Rendering Time (ms)",
-      "Output Rendering Status",
-      "Output Rendering Variation",
-      "Error Message",
-    ];
-
-    const rows = data.map((item) => [
-      item.fileName,
-      item.fileType,
-      item.fileSize,
-      formatDateForExport(item.extractedAt),
-      item.status,
-      item.confidence,
-      item.fieldsExtracted,
-      item.totalTime,
-      item.stages.uploading.time,
-      item.stages.uploading.status,
-      item.stages.uploading.variation,
-      item.stages.aiAnalysis.time,
-      item.stages.aiAnalysis.status,
-      item.stages.aiAnalysis.variation,
-      item.stages.dataExtraction.time,
-      item.stages.dataExtraction.status,
-      item.stages.dataExtraction.variation,
-      item.stages.outputRendering.time,
-      item.stages.outputRendering.status,
-      item.stages.outputRendering.variation,
-      item.errorMessage || "",
-    ]);
-
-    let xml = `<?xml version="1.0" encoding="UTF-8"?>
-<?mso-application progid="Excel.Sheet"?>
-<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
- xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
-<Worksheet ss:Name="Extraction History">
-<Table>
-<Row>`;
-
-    headers.forEach((header) => {
-      xml += `<Cell><Data ss:Type="String">${header}</Data></Cell>`;
-    });
-    xml += `</Row>`;
-
-    rows.forEach((row) => {
-      xml += `<Row>`;
-      row.forEach((cell) => {
-        const type = typeof cell === "number" ? "Number" : "String";
-        xml += `<Cell><Data ss:Type="${type}">${cell}</Data></Cell>`;
-      });
-      xml += `</Row>`;
-    });
-
-    xml += `</Table></Worksheet></Workbook>`;
-    return xml;
-  };
-
-  const handleExportExcel = () => {
-    setIsExporting(true);
-    setTimeout(() => {
-      const excelContent = generateExcelXML(filteredHistory);
-      downloadFile(
-        excelContent,
-        `extraction_history_${new Date().toISOString().slice(0, 10)}.xls`,
-        "application/vnd.ms-excel"
-      );
-      toastSuccess("Excel file exported successfully");
-      setIsExporting(false);
-    }, 500);
-  };
-
-  const handleExportSingleReport = (item, format) => {
-    if (format === "csv") {
-      const csvContent = generateCSV([item]);
-      downloadFile(
-        csvContent,
-        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.csv`,
-        "text/csv;charset=utf-8;"
-      );
-      toastSuccess("Report exported as CSV");
-    } else {
-      const excelContent = generateExcelXML([item]);
-      downloadFile(
-        excelContent,
-        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.xls`,
-        "application/vnd.ms-excel"
-      );
-      toastSuccess("Report exported as Excel");
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[#FAFAFA]">
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200/80 sticky top-0 z-40 h-16">
-        <div className="px-8 h-full flex items-center">
-          <div>
-            <h1 className="text-xl font-bold text-slate-900 tracking-tight leading-tight">
-              Extraction History
-            </h1>
-            <p className="text-sm text-slate-500 leading-tight">
-              View detailed reports and performance metrics for all extractions
-            </p>
-          </div>
-        </div>
-      </header>
-
-      {/* Content */}
-      <div className="p-8">
-        {/* Filters */}
-        <div className="flex items-center gap-4 mb-6">
-          <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
-            <Input
-              placeholder="Search by file name..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 h-11 rounded-xl border-slate-200"
-            />
-          </div>
-          <Select
-            value={selectedStatus}
-            onValueChange={(value) => setSelectedStatus(value)}
-          >
-            <SelectTrigger className="w-40 h-11 rounded-xl border-slate-200">
-              <Filter className="h-4 w-4 mr-2 text-slate-400" />
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Status</SelectItem>
-              <SelectItem value="completed">Completed</SelectItem>
-              <SelectItem value="failed">Failed</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {/* Export All Button */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                className="h-11 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25"
-                disabled={isExporting || filteredHistory.length === 0}
-              >
-                {isExporting ? (
-                  <motion.div
-                    animate={{ rotate: 360 }}
-                    transition={{
-                      duration: 1,
-                      repeat: Infinity,
-                      ease: "linear",
-                    }}
-                    className="mr-2"
-                  >
-                    <Download className="h-4 w-4" />
-                  </motion.div>
-                ) : (
-                  <Download className="h-4 w-4 mr-2" />
-                )}
-                Export All
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="w-48 rounded-xl p-2"
-            >
-              <DropdownMenuItem
-                className="rounded-lg cursor-pointer"
-                onClick={handleExportCSV}
-              >
-                <Table2 className="h-4 w-4 mr-2 text-emerald-600" />
-                Export as CSV
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="rounded-lg cursor-pointer"
-                onClick={handleExportExcel}
-              >
-                <FileSpreadsheet className="h-4 w-4 mr-2 text-green-600" />
-                Export as Excel
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <div className="px-2 py-1.5 text-xs text-slate-500">
-                {filteredHistory.length} records will be exported
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        {/* Stats Overview */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-          {(() => {
-            const total = history.length;
-            const completed = history.filter((h) => h.status === "completed").length;
-            const successRate = total > 0 ? ((completed / total) * 100).toFixed(1) : 0;
-            const avgTime = history.length > 0
-              ? history.reduce((sum, h) => sum + (h.totalTime || 0), 0) / history.length
-              : 0;
-            const totalFields = history.reduce((sum, h) => sum + (h.fieldsExtracted || 0), 0);
-
-            return [
-              {
-                label: "Total Extractions",
-                value: total.toString(),
-                change: "",
-                color: "indigo",
-              },
-              {
-                label: "Success Rate",
-                value: `${successRate}%`,
-                change: total > 0 ? `${completed}/${total} successful` : "No data",
-                color: "emerald",
-              },
-              {
-                label: "Avg. Processing Time",
-                value: avgTime >= 1000 ? `${(avgTime / 1000).toFixed(1)}s` : `${Math.round(avgTime)}ms`,
-                change: "",
-                color: "violet",
-              },
-              {
-                label: "Fields Extracted",
-                value: totalFields.toLocaleString(),
-                change: "",
-                color: "amber",
-              },
-            ].map((stat, index) => (
-            <motion.div
-              key={stat.label}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
-              className="bg-white rounded-2xl border border-slate-200 p-5"
-            >
-              <p className="text-sm text-slate-500 mb-1">{stat.label}</p>
-              <p className="text-2xl font-bold text-slate-900">{stat.value}</p>
-              <p className={`text-xs text-${stat.color}-600 mt-1`}>
-                {stat.change}
-              </p>
-            </motion.div>
-            ));
-          })()}
-        </div>
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className="text-center py-16">
-            <motion.div
-              animate={{ rotate: 360 }}
-              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4"
-            >
-              <Cpu className="h-8 w-8 text-indigo-600" />
-            </motion.div>
-            <p className="text-slate-500">Loading extraction history...</p>
-          </div>
-        )}
-
-        {/* History List */}
-        {!isLoading && (
-          <div className="space-y-4">
-          {filteredHistory.map((item, index) => (
-            <motion.div
-              key={item.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.05 }}
-              className="bg-white rounded-2xl border border-slate-200 overflow-hidden"
-            >
-              {/* Main Row */}
-              <div
-                className="p-5 cursor-pointer hover:bg-slate-50/50 transition-colors"
-                onClick={() =>
-                  setExpandedReport(
-                    expandedReport === item.id ? null : item.id
-                  )
-                }
-              >
-                <div className="flex items-center gap-4">
-                  {/* File Icon */}
-                  <div
-                    className={cn(
-                      "h-12 w-12 rounded-xl flex items-center justify-center",
-                      item.status === "completed" ? "bg-indigo-50" : "bg-red-50"
-                    )}
-                  >
-                    <FileText
-                      className={cn(
-                        "h-6 w-6",
-                        item.status === "completed"
-                          ? "text-indigo-600"
-                          : "text-red-500"
-                      )}
-                    />
-                  </div>
-
-                  {/* File Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-semibold text-slate-900 truncate">
-                        {item.fileName}
-                      </h3>
-                      <Badge variant="secondary" className="text-xs">
-                        {item.fileType}
-                      </Badge>
-                    </div>
-                    <div className="flex items-center gap-4 mt-1 text-sm text-slate-500">
-                      <span>{item.fileSize}</span>
-                      <span className="flex items-center gap-1">
-                        <Calendar className="h-3 w-3" />
-                        {formatDate(item.extractedAt)}
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Stats */}
-                  <div className="hidden md:flex items-center gap-6">
-                    <div className="text-center">
-                      <p className="text-xs text-slate-400">Time</p>
-                      <p className="font-semibold text-slate-700">
-                        {formatTime(item.totalTime)}
-                      </p>
-                    </div>
-                    <div className="text-center">
-                      <p className="text-xs text-slate-400">Fields</p>
-                      <p className="font-semibold text-slate-700">
-                        {item.fieldsExtracted}
-                      </p>
-                    </div>
-                    <div className="text-center">
-                      <p className="text-xs text-slate-400">Confidence</p>
-                      <p
-                        className={cn(
-                          "font-semibold",
-                          item.confidence >= 95
-                            ? "text-emerald-600"
-                            : item.confidence >= 90
-                            ? "text-amber-600"
-                            : "text-red-600"
-                        )}
-                      >
-                        {item.confidence > 0 ? `${item.confidence}%` : "-"}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Status & Actions */}
-                  <div className="flex items-center gap-3">
-                    <Badge
-                      className={cn(
-                        "capitalize",
-                        item.status === "completed"
-                          ? "bg-emerald-50 text-emerald-700 border-emerald-200"
-                          : "bg-red-50 text-red-700 border-red-200"
-                      )}
-                    >
-                      {item.status === "completed" ? (
-                        <CheckCircle2 className="h-3 w-3 mr-1" />
-                      ) : (
-                        <AlertCircle className="h-3 w-3 mr-1" />
-                      )}
-                      {item.status}
-                    </Badge>
-                    <ChevronRight
-                      className={cn(
-                        "h-5 w-5 text-slate-400 transition-transform",
-                        expandedReport === item.id && "rotate-90"
-                      )}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {/* Expanded Report */}
-              <AnimatePresence>
-                {expandedReport === item.id && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="overflow-hidden"
-                  >
-                    <div className="px-5 pb-5 pt-2 border-t border-slate-100">
-                      {/* Error Message */}
-                      {item.errorMessage && (
-                        <div className="mb-4 p-4 bg-red-50 border border-red-100 rounded-xl">
-                          <div className="flex items-center gap-2 text-red-700">
-                            <AlertCircle className="h-4 w-4" />
-                            <span className="font-medium">Error Details</span>
-                          </div>
-                          <p className="text-sm text-red-600 mt-1">
-                            {item.errorMessage}
-                          </p>
-                        </div>
-                      )}
-
-                      {/* Performance Report Header */}
-                      <div className="flex items-center justify-between mb-4">
-                        <h4 className="font-semibold text-slate-800">
-                          Performance Report
-                        </h4>
-                        <div className="flex items-center gap-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8 text-xs"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              navigate(`/?extractionId=${item.id}`);
-                            }}
-                          >
-                            <Eye className="h-3 w-3 mr-1" />
-                            View Output
-                          </Button>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                className="h-8 text-xs"
-                              >
-                                <Download className="h-3 w-3 mr-1" />
-                                Export Report
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent
-                              align="end"
-                              className="w-44 rounded-xl p-2"
-                            >
-                              <DropdownMenuItem
-                                className="rounded-lg cursor-pointer text-xs"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleExportSingleReport(item, "csv");
-                                }}
-                              >
-                                <Table2 className="h-3 w-3 mr-2 text-emerald-600" />
-                                Download CSV
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                className="rounded-lg cursor-pointer text-xs"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleExportSingleReport(item, "excel");
-                                }}
-                              >
-                                <FileSpreadsheet className="h-3 w-3 mr-2 text-green-600" />
-                                Download Excel
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </div>
-
-                      {/* Stage Timing Cards */}
-                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                        {Object.entries(item.stages).map(
-                          ([stageKey, stageData]) => {
-                            const config = stageConfig[stageKey];
-                            const variationInfo =
-                              variationConfig[stageData.variation];
-                            const Icon = config.icon;
-                            const VariationIcon = variationInfo.icon;
-
-                            return (
-                              <div
-                                key={stageKey}
-                                className={cn(
-                                  "relative p-4 rounded-xl border",
-                                  stageData.status === "completed"
-                                    ? "bg-slate-50 border-slate-200"
-                                    : stageData.status === "failed"
-                                    ? "bg-red-50 border-red-200"
-                                    : "bg-slate-50/50 border-slate-100"
-                                )}
-                              >
-                                <div className="flex items-center gap-2 mb-3">
-                                  <div
-                                    className={cn(
-                                      "h-8 w-8 rounded-lg flex items-center justify-center",
-                                      `bg-${config.color}-100`
-                                    )}
-                                  >
-                                    <Icon
-                                      className={cn(
-                                        "h-4 w-4",
-                                        `text-${config.color}-600`
-                                      )}
-                                    />
-                                  </div>
-                                  <span className="text-sm font-medium text-slate-700">
-                                    {config.label}
-                                  </span>
-                                </div>
-
-                                <div className="flex items-end justify-between">
-                                  <div>
-                                    <p
-                                      className={cn(
-                                        "text-2xl font-bold",
-                                        stageData.status === "skipped"
-                                          ? "text-slate-300"
-                                          : stageData.status === "failed"
-                                          ? "text-red-600"
-                                          : "text-slate-900"
-                                      )}
-                                    >
-                                      {stageData.status === "skipped"
-                                        ? "-"
-                                        : formatTime(stageData.time)}
-                                    </p>
-                                    {stageData.status !== "skipped" && (
-                                      <div className="flex items-center gap-1 mt-1">
-                                        <VariationIcon
-                                          className={cn(
-                                            "h-3 w-3",
-                                            variationInfo.color
-                                          )}
-                                        />
-                                        <span
-                                          className={cn(
-                                            "text-xs",
-                                            variationInfo.color
-                                          )}
-                                        >
-                                          {variationInfo.label}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </div>
-
-                                  {stageData.status === "completed" && (
-                                    <CheckCircle2 className="h-5 w-5 text-emerald-500" />
-                                  )}
-                                  {stageData.status === "failed" && (
-                                    <X className="h-5 w-5 text-red-500" />
-                                  )}
-                                </div>
-
-                                {/* Progress bar */}
-                                <div className="mt-3 h-1.5 bg-slate-200 rounded-full overflow-hidden">
-                                  <motion.div
-                                    initial={{ width: 0 }}
-                                    animate={{
-                                      width:
-                                        stageData.status === "completed"
-                                          ? "100%"
-                                          : stageData.status === "failed"
-                                          ? "60%"
-                                          : "0%",
-                                    }}
-                                    transition={{ duration: 0.5, delay: 0.2 }}
-                                    className={cn(
-                                      "h-full rounded-full",
-                                      stageData.status === "failed"
-                                        ? "bg-red-500"
-                                        : `bg-${config.color}-500`
-                                    )}
-                                  />
-                                </div>
-                              </div>
-                            );
-                          }
-                        )}
-                      </div>
-
-                      {/* Total Time Summary */}
-                      <div className="mt-4 flex items-center justify-between p-4 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-xl border border-indigo-100">
-                        <div className="flex items-center gap-3">
-                          <Clock className="h-5 w-5 text-indigo-600" />
-                          <div>
-                            <p className="text-sm font-medium text-slate-700">
-                              Total Processing Time
-                            </p>
-                            <p className="text-xs text-slate-500">
-                              From upload to output ready
-                            </p>
-                          </div>
-                        </div>
-                        <div className="text-right">
-                          <p className="text-2xl font-bold text-indigo-600">
-                            {formatTime(item.totalTime)}
-                          </p>
-                          <p className="text-xs text-slate-500">
-                            {item.status === "completed"
-                              ? "Completed successfully"
-                              : "Process failed"}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </motion.div>
-          ))}
-          {filteredHistory.length === 0 && !error && (
-            <div className="text-center py-16">
-              <div className="h-20 w-20 mx-auto rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
-                <FileText className="h-10 w-10 text-slate-300" />
-              </div>
-              <p className="text-slate-500 mb-2">
-                {history.length === 0
-                  ? "No extraction history yet"
-                  : "No extractions match your filters"}
-              </p>
-              {history.length === 0 && (
-                <p className="text-sm text-slate-400">
-                  Upload a document to get started
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-        )}
-      </div>
-    </div>
-  );
-}
-=======
 // frontend/src/pages/History.jsx
 
 import React, { useState, useEffect } from "react";
@@ -1718,4 +857,859 @@ export default function History() {
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  FileText,
+  Clock,
+  CheckCircle2,
+  ChevronRight,
+  Download,
+  Eye,
+  Trash2,
+  Search,
+  Filter,
+  Calendar,
+  Upload,
+  Cpu,
+  TableProperties,
+  MonitorPlay,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  AlertCircle,
+  X,
+  FileSpreadsheet,
+  Table2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { getHistory } from "@/services/api";
+
+// minimal "toast"
+const toastSuccess = (msg) => {
+  console.log(msg);
+};
+
+const stageConfig = {
+  uploading: { label: "Uploading", icon: Upload, color: "blue" },
+  aiAnalysis: { label: "AI Analysis", icon: Cpu, color: "violet" },
+  dataExtraction: { label: "Data Extraction", icon: TableProperties, color: "emerald" },
+  outputRendering: { label: "Output Rendering", icon: MonitorPlay, color: "amber" },
+};
+
+const variationConfig = {
+  fast: { icon: TrendingDown, color: "text-emerald-500", label: "Faster than avg" },
+  normal: { icon: Minus, color: "text-slate-400", label: "Normal" },
+  slow: { icon: TrendingUp, color: "text-amber-500", label: "Slower than avg" },
+  error: { icon: AlertCircle, color: "text-red-500", label: "Error" },
+  skipped: { icon: Minus, color: "text-slate-300", label: "Skipped" },
+};
+
+export default function History() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedStatus, setSelectedStatus] = useState("all");
+  const [expandedReport, setExpandedReport] = useState(null);
+  const [isExporting, setIsExporting] = useState(false);
+  const [history, setHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch history on component mount
+  useEffect(() => {
+    const fetchHistory = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await getHistory();
+        setHistory(data);
+        
+        // Check if there's an extractionId in URL (from share link)
+        const extractionId = searchParams.get("extractionId");
+        if (extractionId) {
+          // Clear the query param and navigate to dashboard
+          setSearchParams({});
+          // Small delay to ensure history is loaded
+          setTimeout(() => {
+            navigate(`/?extractionId=${extractionId}`);
+          }, 100);
+        }
+      } catch (err) {
+        console.error("Failed to fetch history:", err);
+        setError(err.message || "Failed to load history");
+        setHistory([]); // Fallback to empty array
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchHistory();
+  }, [searchParams, setSearchParams, navigate]);
+
+  const filteredHistory = history.filter((item) => {
+    const matchesSearch = item.fileName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false;
+    const matchesStatus = selectedStatus === "all" || item.status === selectedStatus;
+    return matchesSearch && matchesStatus;
+  });
+
+  const formatTime = (ms) => {
+    if (ms >= 1000) {
+      return `${(ms / 1000).toFixed(2)}s`;
+    }
+    return `${ms}ms`;
+  };
+
+  const formatTimeForExport = (ms) => {
+    return ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${ms}ms`;
+  };
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const formatDateForExport = (dateString) => {
+    const date = new Date(dateString);
+    return date.toISOString().replace("T", " ").slice(0, 19);
+  };
+
+  const generateCSV = (data) => {
+    const headers = [
+      "File Name",
+      "File Type",
+      "File Size",
+      "Extracted At",
+      "Status",
+      "Confidence (%)",
+      "Fields Extracted",
+      "Total Time (ms)",
+      "Upload Time (ms)",
+      "Upload Status",
+      "Upload Variation",
+      "AI Analysis Time (ms)",
+      "AI Analysis Status",
+      "AI Analysis Variation",
+      "Data Extraction Time (ms)",
+      "Data Extraction Status",
+      "Data Extraction Variation",
+      "Output Rendering Time (ms)",
+      "Output Rendering Status",
+      "Output Rendering Variation",
+      "Error Message",
+    ];
+
+    const rows = data.map((item) => [
+      item.fileName,
+      item.fileType,
+      item.fileSize,
+      formatDateForExport(item.extractedAt),
+      item.status,
+      item.confidence,
+      item.fieldsExtracted,
+      item.totalTime,
+      item.stages.uploading.time,
+      item.stages.uploading.status,
+      item.stages.uploading.variation,
+      item.stages.aiAnalysis.time,
+      item.stages.aiAnalysis.status,
+      item.stages.aiAnalysis.variation,
+      item.stages.dataExtraction.time,
+      item.stages.dataExtraction.status,
+      item.stages.dataExtraction.variation,
+      item.stages.outputRendering.time,
+      item.stages.outputRendering.status,
+      item.stages.outputRendering.variation,
+      item.errorMessage || "",
+    ]);
+
+    const csvContent = [
+      headers.join(","),
+      ...rows.map((row) => row.map((cell) => `"${cell}"`).join(",")),
+    ].join("\n");
+
+    return csvContent;
+  };
+
+  const downloadFile = (content, fileName, mimeType) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleExportCSV = () => {
+    setIsExporting(true);
+    setTimeout(() => {
+      const csvContent = generateCSV(filteredHistory);
+      downloadFile(
+        csvContent,
+        `extraction_history_${new Date().toISOString().slice(0, 10)}.csv`,
+        "text/csv;charset=utf-8;"
+      );
+      toastSuccess("CSV exported successfully");
+      setIsExporting(false);
+    }, 500);
+  };
+
+  const generateExcelXML = (data) => {
+    const headers = [
+      "File Name",
+      "File Type",
+      "File Size",
+      "Extracted At",
+      "Status",
+      "Confidence (%)",
+      "Fields Extracted",
+      "Total Time (ms)",
+      "Upload Time (ms)",
+      "Upload Status",
+      "Upload Variation",
+      "AI Analysis Time (ms)",
+      "AI Analysis Status",
+      "AI Analysis Variation",
+      "Data Extraction Time (ms)",
+      "Data Extraction Status",
+      "Data Extraction Variation",
+      "Output Rendering Time (ms)",
+      "Output Rendering Status",
+      "Output Rendering Variation",
+      "Error Message",
+    ];
+
+    const rows = data.map((item) => [
+      item.fileName,
+      item.fileType,
+      item.fileSize,
+      formatDateForExport(item.extractedAt),
+      item.status,
+      item.confidence,
+      item.fieldsExtracted,
+      item.totalTime,
+      item.stages.uploading.time,
+      item.stages.uploading.status,
+      item.stages.uploading.variation,
+      item.stages.aiAnalysis.time,
+      item.stages.aiAnalysis.status,
+      item.stages.aiAnalysis.variation,
+      item.stages.dataExtraction.time,
+      item.stages.dataExtraction.status,
+      item.stages.dataExtraction.variation,
+      item.stages.outputRendering.time,
+      item.stages.outputRendering.status,
+      item.stages.outputRendering.variation,
+      item.errorMessage || "",
+    ]);
+
+    let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
+<Worksheet ss:Name="Extraction History">
+<Table>
+<Row>`;
+
+    headers.forEach((header) => {
+      xml += `<Cell><Data ss:Type="String">${header}</Data></Cell>`;
+    });
+    xml += `</Row>`;
+
+    rows.forEach((row) => {
+      xml += `<Row>`;
+      row.forEach((cell) => {
+        const type = typeof cell === "number" ? "Number" : "String";
+        xml += `<Cell><Data ss:Type="${type}">${cell}</Data></Cell>`;
+      });
+      xml += `</Row>`;
+    });
+
+    xml += `</Table></Worksheet></Workbook>`;
+    return xml;
+  };
+
+  const handleExportExcel = () => {
+    setIsExporting(true);
+    setTimeout(() => {
+      const excelContent = generateExcelXML(filteredHistory);
+      downloadFile(
+        excelContent,
+        `extraction_history_${new Date().toISOString().slice(0, 10)}.xls`,
+        "application/vnd.ms-excel"
+      );
+      toastSuccess("Excel file exported successfully");
+      setIsExporting(false);
+    }, 500);
+  };
+
+  const handleExportSingleReport = (item, format) => {
+    if (format === "csv") {
+      const csvContent = generateCSV([item]);
+      downloadFile(
+        csvContent,
+        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.csv`,
+        "text/csv;charset=utf-8;"
+      );
+      toastSuccess("Report exported as CSV");
+    } else {
+      const excelContent = generateExcelXML([item]);
+      downloadFile(
+        excelContent,
+        `${item.fileName.replace(/\.[^/.]+$/, "")}_report.xls`,
+        "application/vnd.ms-excel"
+      );
+      toastSuccess("Report exported as Excel");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAFAFA]">
+      {/* Header */}
+      <header className="bg-white border-b border-slate-200/80 sticky top-0 z-40 h-16">
+        <div className="px-8 h-full flex items-center">
+          <div>
+            <h1 className="text-xl font-bold text-slate-900 tracking-tight leading-tight">
+              Extraction History
+            </h1>
+            <p className="text-sm text-slate-500 leading-tight">
+              View detailed reports and performance metrics for all extractions
+            </p>
+          </div>
+        </div>
+      </header>
+
+      {/* Content */}
+      <div className="p-8">
+        {/* Filters */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+            <Input
+              placeholder="Search by file name..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 h-11 rounded-xl border-slate-200"
+            />
+          </div>
+          <Select
+            value={selectedStatus}
+            onValueChange={(value) => setSelectedStatus(value)}
+          >
+            <SelectTrigger className="w-40 h-11 rounded-xl border-slate-200">
+              <Filter className="h-4 w-4 mr-2 text-slate-400" />
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="failed">Failed</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Export All Button */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                className="h-11 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-lg shadow-indigo-500/25"
+                disabled={isExporting || filteredHistory.length === 0}
+              >
+                {isExporting ? (
+                  <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{
+                      duration: 1,
+                      repeat: Infinity,
+                      ease: "linear",
+                    }}
+                    className="mr-2"
+                  >
+                    <Download className="h-4 w-4" />
+                  </motion.div>
+                ) : (
+                  <Download className="h-4 w-4 mr-2" />
+                )}
+                Export All
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-48 rounded-xl p-2"
+            >
+              <DropdownMenuItem
+                className="rounded-lg cursor-pointer"
+                onClick={handleExportCSV}
+              >
+                <Table2 className="h-4 w-4 mr-2 text-emerald-600" />
+                Export as CSV
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="rounded-lg cursor-pointer"
+                onClick={handleExportExcel}
+              >
+                <FileSpreadsheet className="h-4 w-4 mr-2 text-green-600" />
+                Export as Excel
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <div className="px-2 py-1.5 text-xs text-slate-500">
+                {filteredHistory.length} records will be exported
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Stats Overview */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+          {(() => {
+            const total = history.length;
+            const completed = history.filter((h) => h.status === "completed").length;
+            const successRate = total > 0 ? ((completed / total) * 100).toFixed(1) : 0;
+            const avgTime = history.length > 0
+              ? history.reduce((sum, h) => sum + (h.totalTime || 0), 0) / history.length
+              : 0;
+            const totalFields = history.reduce((sum, h) => sum + (h.fieldsExtracted || 0), 0);
+
+            return [
+              {
+                label: "Total Extractions",
+                value: total.toString(),
+                change: "",
+                color: "indigo",
+              },
+              {
+                label: "Success Rate",
+                value: `${successRate}%`,
+                change: total > 0 ? `${completed}/${total} successful` : "No data",
+                color: "emerald",
+              },
+              {
+                label: "Avg. Processing Time",
+                value: avgTime >= 1000 ? `${(avgTime / 1000).toFixed(1)}s` : `${Math.round(avgTime)}ms`,
+                change: "",
+                color: "violet",
+              },
+              {
+                label: "Fields Extracted",
+                value: totalFields.toLocaleString(),
+                change: "",
+                color: "amber",
+              },
+            ].map((stat, index) => (
+            <motion.div
+              key={stat.label}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="bg-white rounded-2xl border border-slate-200 p-5"
+            >
+              <p className="text-sm text-slate-500 mb-1">{stat.label}</p>
+              <p className="text-2xl font-bold text-slate-900">{stat.value}</p>
+              <p className={`text-xs text-${stat.color}-600 mt-1`}>
+                {stat.change}
+              </p>
+            </motion.div>
+            ));
+          })()}
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="text-center py-16">
+            <motion.div
+              animate={{ rotate: 360 }}
+              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+              className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4"
+            >
+              <Cpu className="h-8 w-8 text-indigo-600" />
+            </motion.div>
+            <p className="text-slate-500">Loading extraction history...</p>
+          </div>
+        )}
+
+        {/* History List */}
+        {!isLoading && (
+          <div className="space-y-4">
+          {filteredHistory.map((item, index) => (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="bg-white rounded-2xl border border-slate-200 overflow-hidden"
+            >
+              {/* Main Row */}
+              <div
+                className="p-5 cursor-pointer hover:bg-slate-50/50 transition-colors"
+                onClick={() =>
+                  setExpandedReport(
+                    expandedReport === item.id ? null : item.id
+                  )
+                }
+              >
+                <div className="flex items-center gap-4">
+                  {/* File Icon */}
+                  <div
+                    className={cn(
+                      "h-12 w-12 rounded-xl flex items-center justify-center",
+                      item.status === "completed" ? "bg-indigo-50" : "bg-red-50"
+                    )}
+                  >
+                    <FileText
+                      className={cn(
+                        "h-6 w-6",
+                        item.status === "completed"
+                          ? "text-indigo-600"
+                          : "text-red-500"
+                      )}
+                    />
+                  </div>
+
+                  {/* File Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-slate-900 truncate">
+                        {item.fileName}
+                      </h3>
+                      <Badge variant="secondary" className="text-xs">
+                        {item.fileType}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center gap-4 mt-1 text-sm text-slate-500">
+                      <span>{item.fileSize}</span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="h-3 w-3" />
+                        {formatDate(item.extractedAt)}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Stats */}
+                  <div className="hidden md:flex items-center gap-6">
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Time</p>
+                      <p className="font-semibold text-slate-700">
+                        {formatTime(item.totalTime)}
+                      </p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Fields</p>
+                      <p className="font-semibold text-slate-700">
+                        {item.fieldsExtracted}
+                      </p>
+                    </div>
+                    <div className="text-center">
+                      <p className="text-xs text-slate-400">Confidence</p>
+                      <p
+                        className={cn(
+                          "font-semibold",
+                          item.confidence >= 95
+                            ? "text-emerald-600"
+                            : item.confidence >= 90
+                            ? "text-amber-600"
+                            : "text-red-600"
+                        )}
+                      >
+                        {item.confidence > 0 ? `${item.confidence}%` : "-"}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Status & Actions */}
+                  <div className="flex items-center gap-3">
+                    <Badge
+                      className={cn(
+                        "capitalize",
+                        item.status === "completed"
+                          ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                          : "bg-red-50 text-red-700 border-red-200"
+                      )}
+                    >
+                      {item.status === "completed" ? (
+                        <CheckCircle2 className="h-3 w-3 mr-1" />
+                      ) : (
+                        <AlertCircle className="h-3 w-3 mr-1" />
+                      )}
+                      {item.status}
+                    </Badge>
+                    <ChevronRight
+                      className={cn(
+                        "h-5 w-5 text-slate-400 transition-transform",
+                        expandedReport === item.id && "rotate-90"
+                      )}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Expanded Report */}
+              <AnimatePresence>
+                {expandedReport === item.id && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-5 pb-5 pt-2 border-t border-slate-100">
+                      {/* Error Message */}
+                      {item.errorMessage && (
+                        <div className="mb-4 p-4 bg-red-50 border border-red-100 rounded-xl">
+                          <div className="flex items-center gap-2 text-red-700">
+                            <AlertCircle className="h-4 w-4" />
+                            <span className="font-medium">Error Details</span>
+                          </div>
+                          <p className="text-sm text-red-600 mt-1">
+                            {item.errorMessage}
+                          </p>
+                        </div>
+                      )}
+
+                      {/* Performance Report Header */}
+                      <div className="flex items-center justify-between mb-4">
+                        <h4 className="font-semibold text-slate-800">
+                          Performance Report
+                        </h4>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              navigate(`/?extractionId=${item.id}`);
+                            }}
+                          >
+                            <Eye className="h-3 w-3 mr-1" />
+                            View Output
+                          </Button>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-8 text-xs"
+                              >
+                                <Download className="h-3 w-3 mr-1" />
+                                Export Report
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                              align="end"
+                              className="w-44 rounded-xl p-2"
+                            >
+                              <DropdownMenuItem
+                                className="rounded-lg cursor-pointer text-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleExportSingleReport(item, "csv");
+                                }}
+                              >
+                                <Table2 className="h-3 w-3 mr-2 text-emerald-600" />
+                                Download CSV
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                className="rounded-lg cursor-pointer text-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleExportSingleReport(item, "excel");
+                                }}
+                              >
+                                <FileSpreadsheet className="h-3 w-3 mr-2 text-green-600" />
+                                Download Excel
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </div>
+
+                      {/* Stage Timing Cards */}
+                      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        {Object.entries(item.stages).map(
+                          ([stageKey, stageData]) => {
+                            const config = stageConfig[stageKey];
+                            const variationInfo =
+                              variationConfig[stageData.variation];
+                            const Icon = config.icon;
+                            const VariationIcon = variationInfo.icon;
+
+                            return (
+                              <div
+                                key={stageKey}
+                                className={cn(
+                                  "relative p-4 rounded-xl border",
+                                  stageData.status === "completed"
+                                    ? "bg-slate-50 border-slate-200"
+                                    : stageData.status === "failed"
+                                    ? "bg-red-50 border-red-200"
+                                    : "bg-slate-50/50 border-slate-100"
+                                )}
+                              >
+                                <div className="flex items-center gap-2 mb-3">
+                                  <div
+                                    className={cn(
+                                      "h-8 w-8 rounded-lg flex items-center justify-center",
+                                      `bg-${config.color}-100`
+                                    )}
+                                  >
+                                    <Icon
+                                      className={cn(
+                                        "h-4 w-4",
+                                        `text-${config.color}-600`
+                                      )}
+                                    />
+                                  </div>
+                                  <span className="text-sm font-medium text-slate-700">
+                                    {config.label}
+                                  </span>
+                                </div>
+
+                                <div className="flex items-end justify-between">
+                                  <div>
+                                    <p
+                                      className={cn(
+                                        "text-2xl font-bold",
+                                        stageData.status === "skipped"
+                                          ? "text-slate-300"
+                                          : stageData.status === "failed"
+                                          ? "text-red-600"
+                                          : "text-slate-900"
+                                      )}
+                                    >
+                                      {stageData.status === "skipped"
+                                        ? "-"
+                                        : formatTime(stageData.time)}
+                                    </p>
+                                    {stageData.status !== "skipped" && (
+                                      <div className="flex items-center gap-1 mt-1">
+                                        <VariationIcon
+                                          className={cn(
+                                            "h-3 w-3",
+                                            variationInfo.color
+                                          )}
+                                        />
+                                        <span
+                                          className={cn(
+                                            "text-xs",
+                                            variationInfo.color
+                                          )}
+                                        >
+                                          {variationInfo.label}
+                                        </span>
+                                      </div>
+                                    )}
+                                  </div>
+
+                                  {stageData.status === "completed" && (
+                                    <CheckCircle2 className="h-5 w-5 text-emerald-500" />
+                                  )}
+                                  {stageData.status === "failed" && (
+                                    <X className="h-5 w-5 text-red-500" />
+                                  )}
+                                </div>
+
+                                {/* Progress bar */}
+                                <div className="mt-3 h-1.5 bg-slate-200 rounded-full overflow-hidden">
+                                  <motion.div
+                                    initial={{ width: 0 }}
+                                    animate={{
+                                      width:
+                                        stageData.status === "completed"
+                                          ? "100%"
+                                          : stageData.status === "failed"
+                                          ? "60%"
+                                          : "0%",
+                                    }}
+                                    transition={{ duration: 0.5, delay: 0.2 }}
+                                    className={cn(
+                                      "h-full rounded-full",
+                                      stageData.status === "failed"
+                                        ? "bg-red-500"
+                                        : `bg-${config.color}-500`
+                                    )}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+                      </div>
+
+                      {/* Total Time Summary */}
+                      <div className="mt-4 flex items-center justify-between p-4 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-xl border border-indigo-100">
+                        <div className="flex items-center gap-3">
+                          <Clock className="h-5 w-5 text-indigo-600" />
+                          <div>
+                            <p className="text-sm font-medium text-slate-700">
+                              Total Processing Time
+                            </p>
+                            <p className="text-xs text-slate-500">
+                              From upload to output ready
+                            </p>
+                          </div>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-2xl font-bold text-indigo-600">
+                            {formatTime(item.totalTime)}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            {item.status === "completed"
+                              ? "Completed successfully"
+                              : "Process failed"}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          ))}
+          {filteredHistory.length === 0 && !error && (
+            <div className="text-center py-16">
+              <div className="h-20 w-20 mx-auto rounded-2xl bg-slate-100 flex items-center justify-center mb-4">
+                <FileText className="h-10 w-10 text-slate-300" />
+              </div>
+              <p className="text-slate-500 mb-2">
+                {history.length === 0
+                  ? "No extraction history yet"
+                  : "No extractions match your filters"}
+              </p>
+              {history.length === 0 && (
+                <p className="text-sm text-slate-400">
+                  Upload a document to get started
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+        )}
+      </div>
+    </div>
+  );
+}