update

frontend/src/components/ExportButtons.jsx

@@ -175,1209 +175,3 @@ function objectToXML(obj, rootName = "extraction") {
 }
 
 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 { 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

@@ -5,275 +5,3 @@ 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 { 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>
-  );
-}

frontend/src/components/ShareModal.jsx

@@ -5,387 +5,3 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
 export default function ShareModal({ isOpen, onClose, onShare, extractionId }) {
-  const [email, setEmail] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-  const [successMessage, setSuccessMessage] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError("");
-    setSuccess(false);
-
-    // Parse and validate multiple emails (comma or semicolon separated)
-    if (!email.trim()) {
-      setError("Please enter at least one recipient email address");
-      return;
-    }
-
-    // Split by comma or semicolon, trim each email, and filter out empty strings
-    const emailList = email
-      .split(/[,;]/)
-      .map((e) => e.trim())
-      .filter((e) => e.length > 0);
-
-    if (emailList.length === 0) {
-      setError("Please enter at least one recipient email address");
-      return;
-    }
-
-    // Validate each email
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    const invalidEmails = emailList.filter((e) => !emailRegex.test(e));
-    
-    if (invalidEmails.length > 0) {
-      setError(`Invalid email address(es): ${invalidEmails.join(", ")}`);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const result = await onShare(extractionId, emailList);
-      setSuccessMessage(result?.message || `Successfully shared with ${emailList.length} recipient(s)`);
-      setSuccess(true);
-      setEmail("");
-      // Close modal after 2 seconds
-      setTimeout(() => {
-        setSuccess(false);
-        setSuccessMessage("");
-        onClose();
-      }, 2000);
-    } catch (err) {
-      setError(err.message || "Failed to share extraction. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClose = () => {
-    if (!isLoading) {
-      setEmail("");
-      setError("");
-      setSuccess(false);
-      onClose();
-    }
-  };
-
-  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={handleClose}
-        />
-
-        {/* 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">Share Output</h2>
-            <button
-              onClick={handleClose}
-              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">
-            {success ? (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                className="text-center py-8"
-              >
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-100 flex items-center justify-center">
-                  <Send className="h-8 w-8 text-emerald-600" />
-                </div>
-                <h3 className="text-lg font-semibold text-slate-900 mb-2">
-                  Share Sent Successfully!
-                </h3>
-                <p className="text-sm text-slate-600">
-                  {successMessage || "The recipient(s) will receive an email with a link to view the extraction."}
-                </p>
-              </motion.div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div>
-                  <label
-                    htmlFor="recipient-email"
-                    className="block text-sm font-medium text-slate-700 mb-2"
-                  >
-                    Recipient Email(s)
-                  </label>
-                  <p className="text-xs text-slate-500 mb-2">
-                    Separate multiple emails with commas or semicolons
-                  </p>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-                    <Input
-                      id="recipient-email"
-                      type="text"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter email addresses (comma or semicolon separated)"
-                      className="pl-10 h-12 rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500"
-                      disabled={isLoading}
-                      autoFocus
-                    />
-                  </div>
-                  {error && (
-                    <motion.p
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      className="mt-2 text-sm text-red-600"
-                    >
-                      {error}
-                    </motion.p>
-                  )}
-                </div>
-
-                <div className="pt-4 flex gap-3">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleClose}
-                    disabled={isLoading}
-                    className="flex-1 h-11 rounded-xl"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    type="submit"
-                    disabled={isLoading || !email.trim()}
-                    className="flex-1 h-11 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
-                  >
-                    {isLoading ? (
-                      <>
-                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                        Sending...
-                      </>
-                    ) : (
-                      <>
-                        <Send className="h-4 w-4 mr-2" />
-                        Send
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </form>
-            )}
-          </div>
-        </motion.div>
-      </div>
-    </AnimatePresence>
-  );
-}
-import { motion, AnimatePresence } from "framer-motion";
-import { X, Mail, Send, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-export default function ShareModal({ isOpen, onClose, onShare, extractionId }) {
-  const [email, setEmail] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-  const [successMessage, setSuccessMessage] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError("");
-    setSuccess(false);
-
-    // Parse and validate multiple emails (comma or semicolon separated)
-    if (!email.trim()) {
-      setError("Please enter at least one recipient email address");
-      return;
-    }
-
-    // Split by comma or semicolon, trim each email, and filter out empty strings
-    const emailList = email
-      .split(/[,;]/)
-      .map((e) => e.trim())
-      .filter((e) => e.length > 0);
-
-    if (emailList.length === 0) {
-      setError("Please enter at least one recipient email address");
-      return;
-    }
-
-    // Validate each email
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    const invalidEmails = emailList.filter((e) => !emailRegex.test(e));
-    
-    if (invalidEmails.length > 0) {
-      setError(`Invalid email address(es): ${invalidEmails.join(", ")}`);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const result = await onShare(extractionId, emailList);
-      setSuccessMessage(result?.message || `Successfully shared with ${emailList.length} recipient(s)`);
-      setSuccess(true);
-      setEmail("");
-      // Close modal after 2 seconds
-      setTimeout(() => {
-        setSuccess(false);
-        setSuccessMessage("");
-        onClose();
-      }, 2000);
-    } catch (err) {
-      setError(err.message || "Failed to share extraction. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleClose = () => {
-    if (!isLoading) {
-      setEmail("");
-      setError("");
-      setSuccess(false);
-      onClose();
-    }
-  };
-
-  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={handleClose}
-        />
-
-        {/* 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">Share Output</h2>
-            <button
-              onClick={handleClose}
-              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">
-            {success ? (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                className="text-center py-8"
-              >
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-100 flex items-center justify-center">
-                  <Send className="h-8 w-8 text-emerald-600" />
-                </div>
-                <h3 className="text-lg font-semibold text-slate-900 mb-2">
-                  Share Sent Successfully!
-                </h3>
-                <p className="text-sm text-slate-600">
-                  {successMessage || "The recipient(s) will receive an email with a link to view the extraction."}
-                </p>
-              </motion.div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div>
-                  <label
-                    htmlFor="recipient-email"
-                    className="block text-sm font-medium text-slate-700 mb-2"
-                  >
-                    Recipient Email(s)
-                  </label>
-                  <p className="text-xs text-slate-500 mb-2">
-                    Separate multiple emails with commas or semicolons
-                  </p>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-                    <Input
-                      id="recipient-email"
-                      type="text"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter email addresses (comma or semicolon separated)"
-                      className="pl-10 h-12 rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500"
-                      disabled={isLoading}
-                      autoFocus
-                    />
-                  </div>
-                  {error && (
-                    <motion.p
-                      initial={{ opacity: 0, y: -10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      className="mt-2 text-sm text-red-600"
-                    >
-                      {error}
-                    </motion.p>
-                  )}
-                </div>
-
-                <div className="pt-4 flex gap-3">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleClose}
-                    disabled={isLoading}
-                    className="flex-1 h-11 rounded-xl"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    type="submit"
-                    disabled={isLoading || !email.trim()}
-                    className="flex-1 h-11 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700"
-                  >
-                    {isLoading ? (
-                      <>
-                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                        Sending...
-                      </>
-                    ) : (
-                      <>
-                        <Send className="h-4 w-4 mr-2" />
-                        Send
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </form>
-            )}
-          </div>
-        </motion.div>
-      </div>
-    </AnimatePresence>
-  );
-}

frontend/src/components/ocr/DocumentPreview.jsx

@@ -4,454 +4,3 @@ import { FileText, ZoomIn, ZoomOut, RotateCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 export default function DocumentPreview({ file, isProcessing, isFromHistory = false }) {
-  const [previewUrls, setPreviewUrls] = useState([]);
-  const [zoom, setZoom] = useState(100);
-  const [rotation, setRotation] = useState(0);
-  const objectUrlsRef = useRef([]);
-
-  useEffect(() => {
-    if (!file) {
-      // Cleanup previous URLs
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = [];
-      setPreviewUrls([]);
-      return;
-    }
-
-    const loadPreview = async () => {
-      const urls = [];
-      const newObjectUrls = [];
-
-      // Check if it's a PDF
-      if (file.type === "application/pdf" || file.name?.toLowerCase().endsWith(".pdf")) {
-        try {
-          // Use pdf.js to render PDF pages
-          const pdfjsLib = await import("pdfjs-dist");
-          
-          // Configure worker - use jsdelivr CDN which is more reliable
-          // This will use the same version as the installed package
-          const version = pdfjsLib.version || "4.0.379";
-          pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${version}/build/pdf.worker.min.mjs`;
-
-          const arrayBuffer = await file.arrayBuffer();
-          const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-          const numPages = pdf.numPages;
-
-          for (let pageNum = 1; pageNum <= numPages; pageNum++) {
-            const page = await pdf.getPage(pageNum);
-            const viewport = page.getViewport({ scale: 2.0 });
-
-            const canvas = document.createElement("canvas");
-            const context = canvas.getContext("2d");
-            canvas.height = viewport.height;
-            canvas.width = viewport.width;
-
-            await page.render({
-              canvasContext: context,
-              viewport: viewport,
-            }).promise;
-
-            urls.push(canvas.toDataURL("image/jpeg", 0.95));
-          }
-        } catch (error) {
-          console.error("Error loading PDF:", error);
-          // Fallback: show error message
-          urls.push(null);
-        }
-      } else {
-        // For images, create object URL
-        const url = URL.createObjectURL(file);
-        urls.push(url);
-        newObjectUrls.push(url);
-      }
-
-      // Cleanup old object URLs
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = newObjectUrls;
-      setPreviewUrls(urls);
-    };
-
-    loadPreview();
-
-    // Cleanup function - revoke object URLs when component unmounts or file changes
-    return () => {
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = [];
-    };
-  }, [file]);
-
-  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-indigo-50 flex items-center justify-center">
-            <FileText className="h-4 w-4 text-indigo-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-slate-800 text-sm">Document Preview</h3>
-            <p className="text-xs text-slate-400">{file?.name || "No file selected"}</p>
-          </div>
-        </div>
-
-        {file && (
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setZoom(Math.max(50, zoom - 25))}
-            >
-              <ZoomOut className="h-4 w-4" />
-            </Button>
-            <span className="text-xs text-slate-500 w-12 text-center">{zoom}%</span>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setZoom(Math.min(200, zoom + 25))}
-            >
-              <ZoomIn className="h-4 w-4" />
-            </Button>
-            <div className="w-px h-4 bg-slate-200 mx-2" />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setRotation((rotation + 90) % 360)}
-            >
-              <RotateCw className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {/* Preview Area */}
-      <div className="flex-1 p-6 bg-slate-50/50 overflow-auto">
-        {!file ? (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center">
-              <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-400 text-sm">Upload a document to preview</p>
-            </div>
-          </div>
-        ) : previewUrls.length === 0 ? (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center">
-              <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-400 text-sm">Loading preview...</p>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {previewUrls.map((url, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-                className="relative bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex items-center justify-center"
-                style={{
-                  minHeight: "400px",
-                }}
-              >
-                {url ? (
-                  <img
-                    src={url}
-                    alt={`Page ${index + 1}`}
-                    className="w-full h-auto"
-                    style={{
-                      transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
-                      maxWidth: "100%",
-                      objectFit: "contain",
-                      transition: "transform 0.2s ease",
-                    }}
-                  />
-                ) : (
-                  <div className="p-8 text-center">
-                    <p className="text-slate-400 text-sm">
-                      {isFromHistory 
-                        ? "Original document not available for historical extractions" 
-                        : "Unable to load preview"}
-                    </p>
-                  </div>
-                )}
-
-                {/* Processing overlay */}
-                {isProcessing && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    className="absolute inset-0 bg-indigo-600/5 backdrop-blur-[1px] pointer-events-none"
-                  >
-                    <motion.div
-                      initial={{ top: 0 }}
-                      animate={{ top: "100%" }}
-                      transition={{
-                        duration: 2,
-                        repeat: Infinity,
-                        ease: "linear",
-                      }}
-                      className="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
-                    />
-                  </motion.div>
-                )}
-
-                {/* Page number */}
-                {previewUrls.length > 1 && (
-                  <div className="absolute bottom-3 right-3 text-xs text-slate-400 bg-white/90 px-2 py-1 rounded">
-                    Page {index + 1}
-                  </div>
-                )}
-              </motion.div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-import { motion } from "framer-motion";
-import { FileText, ZoomIn, ZoomOut, RotateCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export default function DocumentPreview({ file, isProcessing, isFromHistory = false }) {
-  const [previewUrls, setPreviewUrls] = useState([]);
-  const [zoom, setZoom] = useState(100);
-  const [rotation, setRotation] = useState(0);
-  const objectUrlsRef = useRef([]);
-
-  useEffect(() => {
-    if (!file) {
-      // Cleanup previous URLs
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = [];
-      setPreviewUrls([]);
-      return;
-    }
-
-    const loadPreview = async () => {
-      const urls = [];
-      const newObjectUrls = [];
-
-      // Check if it's a PDF
-      if (file.type === "application/pdf" || file.name?.toLowerCase().endsWith(".pdf")) {
-        try {
-          // Use pdf.js to render PDF pages
-          const pdfjsLib = await import("pdfjs-dist");
-          
-          // Configure worker - use jsdelivr CDN which is more reliable
-          // This will use the same version as the installed package
-          const version = pdfjsLib.version || "4.0.379";
-          pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${version}/build/pdf.worker.min.mjs`;
-
-          const arrayBuffer = await file.arrayBuffer();
-          const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-          const numPages = pdf.numPages;
-
-          for (let pageNum = 1; pageNum <= numPages; pageNum++) {
-            const page = await pdf.getPage(pageNum);
-            const viewport = page.getViewport({ scale: 2.0 });
-
-            const canvas = document.createElement("canvas");
-            const context = canvas.getContext("2d");
-            canvas.height = viewport.height;
-            canvas.width = viewport.width;
-
-            await page.render({
-              canvasContext: context,
-              viewport: viewport,
-            }).promise;
-
-            urls.push(canvas.toDataURL("image/jpeg", 0.95));
-          }
-        } catch (error) {
-          console.error("Error loading PDF:", error);
-          // Fallback: show error message
-          urls.push(null);
-        }
-      } else {
-        // For images, create object URL
-        const url = URL.createObjectURL(file);
-        urls.push(url);
-        newObjectUrls.push(url);
-      }
-
-      // Cleanup old object URLs
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = newObjectUrls;
-      setPreviewUrls(urls);
-    };
-
-    loadPreview();
-
-    // Cleanup function - revoke object URLs when component unmounts or file changes
-    return () => {
-      objectUrlsRef.current.forEach((url) => {
-        if (url && url.startsWith("blob:")) {
-          URL.revokeObjectURL(url);
-        }
-      });
-      objectUrlsRef.current = [];
-    };
-  }, [file]);
-
-  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-indigo-50 flex items-center justify-center">
-            <FileText className="h-4 w-4 text-indigo-600" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-slate-800 text-sm">Document Preview</h3>
-            <p className="text-xs text-slate-400">{file?.name || "No file selected"}</p>
-          </div>
-        </div>
-
-        {file && (
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setZoom(Math.max(50, zoom - 25))}
-            >
-              <ZoomOut className="h-4 w-4" />
-            </Button>
-            <span className="text-xs text-slate-500 w-12 text-center">{zoom}%</span>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setZoom(Math.min(200, zoom + 25))}
-            >
-              <ZoomIn className="h-4 w-4" />
-            </Button>
-            <div className="w-px h-4 bg-slate-200 mx-2" />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-600"
-              onClick={() => setRotation((rotation + 90) % 360)}
-            >
-              <RotateCw className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {/* Preview Area */}
-      <div className="flex-1 p-6 bg-slate-50/50 overflow-auto">
-        {!file ? (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center">
-              <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-400 text-sm">Upload a document to preview</p>
-            </div>
-          </div>
-        ) : previewUrls.length === 0 ? (
-          <div className="h-full flex items-center justify-center">
-            <div className="text-center">
-              <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-400 text-sm">Loading preview...</p>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {previewUrls.map((url, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-                className="relative bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex items-center justify-center"
-                style={{
-                  minHeight: "400px",
-                }}
-              >
-                {url ? (
-                  <img
-                    src={url}
-                    alt={`Page ${index + 1}`}
-                    className="w-full h-auto"
-                    style={{
-                      transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
-                      maxWidth: "100%",
-                      objectFit: "contain",
-                      transition: "transform 0.2s ease",
-                    }}
-                  />
-                ) : (
-                  <div className="p-8 text-center">
-                    <p className="text-slate-400 text-sm">
-                      {isFromHistory 
-                        ? "Original document not available for historical extractions" 
-                        : "Unable to load preview"}
-                    </p>
-                  </div>
-                )}
-
-                {/* Processing overlay */}
-                {isProcessing && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    className="absolute inset-0 bg-indigo-600/5 backdrop-blur-[1px] pointer-events-none"
-                  >
-                    <motion.div
-                      initial={{ top: 0 }}
-                      animate={{ top: "100%" }}
-                      transition={{
-                        duration: 2,
-                        repeat: Infinity,
-                        ease: "linear",
-                      }}
-                      className="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
-                    />
-                  </motion.div>
-                )}
-
-                {/* Page number */}
-                {previewUrls.length > 1 && (
-                  <div className="absolute bottom-3 right-3 text-xs text-slate-400 bg-white/90 px-2 py-1 rounded">
-                    Page {index + 1}
-                  </div>
-                )}
-              </motion.div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -1199,1203 +1199,3 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
     </div>
   );
 }
-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

@@ -46,378 +46,3 @@ const features = [
 ];
 
 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 { 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>
-    );
-}

frontend/src/components/ocr/UploadZone.jsx

@@ -21,481 +21,3 @@ const ALLOWED_EXTENSIONS = [".pdf", ".png", ".jpg", ".jpeg", ".tiff", ".tif"];
 const MAX_FILE_SIZE = 4 * 1024 * 1024; // 4 MB in bytes
 
 export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFields = "", onKeyFieldsChange = () => {} }) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [error, setError] = useState(null);
-
-  const validateFile = (file) => {
-    // Reset error
-    setError(null);
-
-    // Check file type
-    const fileExtension = "." + file.name.split(".").pop().toLowerCase();
-    const isValidType = ALLOWED_TYPES.includes(file.type) || ALLOWED_EXTENSIONS.includes(fileExtension);
-    
-    if (!isValidType) {
-      setError("Only PDF, PNG, JPG, and TIFF files are allowed.");
-      return false;
-    }
-
-    // Check file size
-    if (file.size > MAX_FILE_SIZE) {
-      const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
-      setError(`File size exceeds 4 MB limit. Your file is ${fileSizeMB} MB.`);
-      return false;
-    }
-
-    return true;
-  };
-
-  const handleFileSelect = (file) => {
-    if (validateFile(file)) {
-      setError(null);
-      onFileSelect(file);
-    }
-  };
-
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) {
-      handleFileSelect(file);
-    }
-  };
-
-  const getFileIcon = (type) => {
-    if (type?.includes("image")) return Image;
-    if (type?.includes("spreadsheet") || type?.includes("excel")) return FileSpreadsheet;
-    return FileText;
-  };
-
-  const FileIcon = selectedFile ? getFileIcon(selectedFile.type) : FileText;
-
-  // Clear error when file is cleared
-  useEffect(() => {
-    if (!selectedFile) {
-      setError(null);
-    }
-  }, [selectedFile]);
-
-  return (
-    <div className="w-full">
-      <AnimatePresence mode="wait">
-        {!selectedFile ? (
-          <motion.div
-            key="upload"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{ duration: 0.2 }}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            className={cn(
-              "relative group cursor-pointer",
-              "border-2 border-dashed rounded-2xl",
-              "transition-all duration-300 ease-out",
-              isDragging
-                ? "border-indigo-400 bg-indigo-50/50"
-                : "border-slate-200 hover:border-indigo-300 hover:bg-slate-50/50"
-            )}
-          >
-            <label className="flex flex-col items-center justify-center py-16 px-8 cursor-pointer">
-              <motion.div
-                animate={isDragging ? { scale: 1.1, y: -5 } : { scale: 1, y: 0 }}
-                className={cn(
-                  "h-16 w-16 rounded-2xl flex items-center justify-center mb-6 transition-colors duration-300",
-                  isDragging
-                    ? "bg-indigo-100"
-                    : "bg-gradient-to-br from-slate-100 to-slate-50 group-hover:from-indigo-100 group-hover:to-violet-50"
-                )}
-              >
-                <Upload
-                  className={cn(
-                    "h-7 w-7 transition-colors duration-300",
-                    isDragging ? "text-indigo-600" : "text-slate-400 group-hover:text-indigo-500"
-                  )}
-                />
-              </motion.div>
-
-              <div className="text-center">
-                <p className="text-lg font-semibold text-slate-700 mb-1">
-                  {isDragging ? "Drop your file here" : "Drop your file here, or browse"}
-                </p>
-                <p className="text-sm text-slate-400">
-                  Supports PDF, PNG, JPG, TIFF up to 4MB
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2 mt-6">
-                <div className="flex -space-x-1">
-                  {[
-                    "bg-red-100 text-red-600",
-                    "bg-blue-100 text-blue-600",
-                    "bg-green-100 text-green-600",
-                    "bg-amber-100 text-amber-600",
-                  ].map((color, i) => (
-                    <div
-                      key={i}
-                      className={`h-8 w-8 rounded-lg ${color.split(" ")[0]} flex items-center justify-center border-2 border-white`}
-                    >
-                      <FileText className={`h-4 w-4 ${color.split(" ")[1]}`} />
-                    </div>
-                  ))}
-                </div>
-                <span className="text-xs text-slate-400 ml-2">Multiple formats supported</span>
-              </div>
-
-              <input
-                type="file"
-                className="hidden"
-                accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
-                onChange={(e) => {
-                  const file = e.target.files[0];
-                  if (file) {
-                    handleFileSelect(file);
-                  }
-                  // Reset input so same file can be selected again after error
-                  e.target.value = "";
-                }}
-              />
-            </label>
-
-            {/* Decorative gradient border on hover */}
-            <div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500 opacity-0 group-hover:opacity-10 blur-xl transition-opacity duration-500" />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="selected"
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-3"
-          >
-            {/* File Info Box */}
-            <div className="relative bg-gradient-to-br from-indigo-50 to-violet-50 rounded-xl p-3 border border-indigo-100">
-              <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-lg bg-white shadow-sm flex items-center justify-center flex-shrink-0">
-                  <FileIcon className="h-5 w-5 text-indigo-600" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="font-medium text-slate-800 truncate text-sm">{selectedFile.name}</p>
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
-                    <span>{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</span>
-                    <span className="text-indigo-500">•</span>
-                    <span className="text-indigo-600 flex items-center gap-1">
-                      <Sparkles className="h-3 w-3" />
-                      Ready for extraction
-                    </span>
-                  </div>
-                </div>
-                <button
-                  onClick={onClear}
-                  className="h-8 w-8 rounded-lg bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-            </div>
-
-            {/* Key Fields Box */}
-            <div className="relative bg-white rounded-xl p-3 border border-slate-200">
-              <label className="block text-xs font-medium text-slate-600 mb-1.5">
-                <span className="font-bold">Key Fields</span> <span className="font-normal">(if required)</span>
-              </label>
-              <Input
-                type="text"
-                value={keyFields || ""}
-                onChange={(e) => {
-                  if (onKeyFieldsChange) {
-                    onKeyFieldsChange(e.target.value);
-                  }
-                }}
-                placeholder="Invoice Number, Invoice Date, PO Number, Supplier Name, Total Amount, Payment terms, Additional Notes"
-                className="h-8 text-xs border-slate-200 focus:border-indigo-300 focus:ring-indigo-200"
-              />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          className="mt-3 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2"
-        >
-          <AlertCircle className="h-4 w-4 text-red-600 flex-shrink-0 mt-0.5" />
-          <p className="text-sm text-red-700 flex-1">{error}</p>
-          <button
-            onClick={() => setError(null)}
-            className="text-red-600 hover:text-red-800 transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </motion.div>
-      )}
-    </div>
-  );
-}
-import { motion, AnimatePresence } from "framer-motion";
-import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles, AlertCircle } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
-
-// Allowed file types
-const ALLOWED_TYPES = [
-  "application/pdf",
-  "image/png",
-  "image/jpeg",
-  "image/jpg",
-  "image/tiff",
-  "image/tif"
-];
-
-// Allowed file extensions (for fallback validation)
-const ALLOWED_EXTENSIONS = [".pdf", ".png", ".jpg", ".jpeg", ".tiff", ".tif"];
-
-// Maximum file size: 4 MB
-const MAX_FILE_SIZE = 4 * 1024 * 1024; // 4 MB in bytes
-
-export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFields = "", onKeyFieldsChange = () => {} }) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [error, setError] = useState(null);
-
-  const validateFile = (file) => {
-    // Reset error
-    setError(null);
-
-    // Check file type
-    const fileExtension = "." + file.name.split(".").pop().toLowerCase();
-    const isValidType = ALLOWED_TYPES.includes(file.type) || ALLOWED_EXTENSIONS.includes(fileExtension);
-    
-    if (!isValidType) {
-      setError("Only PDF, PNG, JPG, and TIFF files are allowed.");
-      return false;
-    }
-
-    // Check file size
-    if (file.size > MAX_FILE_SIZE) {
-      const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
-      setError(`File size exceeds 4 MB limit. Your file is ${fileSizeMB} MB.`);
-      return false;
-    }
-
-    return true;
-  };
-
-  const handleFileSelect = (file) => {
-    if (validateFile(file)) {
-      setError(null);
-      onFileSelect(file);
-    }
-  };
-
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) {
-      handleFileSelect(file);
-    }
-  };
-
-  const getFileIcon = (type) => {
-    if (type?.includes("image")) return Image;
-    if (type?.includes("spreadsheet") || type?.includes("excel")) return FileSpreadsheet;
-    return FileText;
-  };
-
-  const FileIcon = selectedFile ? getFileIcon(selectedFile.type) : FileText;
-
-  // Clear error when file is cleared
-  useEffect(() => {
-    if (!selectedFile) {
-      setError(null);
-    }
-  }, [selectedFile]);
-
-  return (
-    <div className="w-full">
-      <AnimatePresence mode="wait">
-        {!selectedFile ? (
-          <motion.div
-            key="upload"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{ duration: 0.2 }}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            className={cn(
-              "relative group cursor-pointer",
-              "border-2 border-dashed rounded-2xl",
-              "transition-all duration-300 ease-out",
-              isDragging
-                ? "border-indigo-400 bg-indigo-50/50"
-                : "border-slate-200 hover:border-indigo-300 hover:bg-slate-50/50"
-            )}
-          >
-            <label className="flex flex-col items-center justify-center py-16 px-8 cursor-pointer">
-              <motion.div
-                animate={isDragging ? { scale: 1.1, y: -5 } : { scale: 1, y: 0 }}
-                className={cn(
-                  "h-16 w-16 rounded-2xl flex items-center justify-center mb-6 transition-colors duration-300",
-                  isDragging
-                    ? "bg-indigo-100"
-                    : "bg-gradient-to-br from-slate-100 to-slate-50 group-hover:from-indigo-100 group-hover:to-violet-50"
-                )}
-              >
-                <Upload
-                  className={cn(
-                    "h-7 w-7 transition-colors duration-300",
-                    isDragging ? "text-indigo-600" : "text-slate-400 group-hover:text-indigo-500"
-                  )}
-                />
-              </motion.div>
-
-              <div className="text-center">
-                <p className="text-lg font-semibold text-slate-700 mb-1">
-                  {isDragging ? "Drop your file here" : "Drop your file here, or browse"}
-                </p>
-                <p className="text-sm text-slate-400">
-                  Supports PDF, PNG, JPG, TIFF up to 4MB
-                </p>
-              </div>
-
-              <div className="flex items-center gap-2 mt-6">
-                <div className="flex -space-x-1">
-                  {[
-                    "bg-red-100 text-red-600",
-                    "bg-blue-100 text-blue-600",
-                    "bg-green-100 text-green-600",
-                    "bg-amber-100 text-amber-600",
-                  ].map((color, i) => (
-                    <div
-                      key={i}
-                      className={`h-8 w-8 rounded-lg ${color.split(" ")[0]} flex items-center justify-center border-2 border-white`}
-                    >
-                      <FileText className={`h-4 w-4 ${color.split(" ")[1]}`} />
-                    </div>
-                  ))}
-                </div>
-                <span className="text-xs text-slate-400 ml-2">Multiple formats supported</span>
-              </div>
-
-              <input
-                type="file"
-                className="hidden"
-                accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
-                onChange={(e) => {
-                  const file = e.target.files[0];
-                  if (file) {
-                    handleFileSelect(file);
-                  }
-                  // Reset input so same file can be selected again after error
-                  e.target.value = "";
-                }}
-              />
-            </label>
-
-            {/* Decorative gradient border on hover */}
-            <div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500 opacity-0 group-hover:opacity-10 blur-xl transition-opacity duration-500" />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="selected"
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-3"
-          >
-            {/* File Info Box */}
-            <div className="relative bg-gradient-to-br from-indigo-50 to-violet-50 rounded-xl p-3 border border-indigo-100">
-              <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-lg bg-white shadow-sm flex items-center justify-center flex-shrink-0">
-                  <FileIcon className="h-5 w-5 text-indigo-600" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="font-medium text-slate-800 truncate text-sm">{selectedFile.name}</p>
-                  <div className="flex items-center gap-2 text-xs text-slate-500">
-                    <span>{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</span>
-                    <span className="text-indigo-500">•</span>
-                    <span className="text-indigo-600 flex items-center gap-1">
-                      <Sparkles className="h-3 w-3" />
-                      Ready for extraction
-                    </span>
-                  </div>
-                </div>
-                <button
-                  onClick={onClear}
-                  className="h-8 w-8 rounded-lg bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-            </div>
-
-            {/* Key Fields Box */}
-            <div className="relative bg-white rounded-xl p-3 border border-slate-200">
-              <label className="block text-xs font-medium text-slate-600 mb-1.5">
-                <span className="font-bold">Key Fields</span> <span className="font-normal">(if required)</span>
-              </label>
-              <Input
-                type="text"
-                value={keyFields || ""}
-                onChange={(e) => {
-                  if (onKeyFieldsChange) {
-                    onKeyFieldsChange(e.target.value);
-                  }
-                }}
-                placeholder="Invoice Number, Invoice Date, PO Number, Supplier Name, Total Amount, Payment terms, Additional Notes"
-                className="h-8 text-xs border-slate-200 focus:border-indigo-300 focus:ring-indigo-200"
-              />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          className="mt-3 p-3 bg-red-50 border border-red-200 rounded-xl flex items-start gap-2"
-        >
-          <AlertCircle className="h-4 w-4 text-red-600 flex-shrink-0 mt-0.5" />
-          <p className="text-sm text-red-700 flex-1">{error}</p>
-          <button
-            onClick={() => setError(null)}
-            className="text-red-600 hover:text-red-800 transition-colors"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </motion.div>
-      )}
-    </div>
-  );
-}

frontend/src/pages/Dashboard.jsx

@@ -474,478 +474,3 @@ export default function Dashboard() {
     </div>
   );
 }
-
-import React, { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
-import { motion } from "framer-motion";
-import { Sparkles, Zap, FileText, TrendingUp, Clock, AlertCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import UploadZone from "@/components/ocr/UploadZone";
-import DocumentPreview from "@/components/ocr/DocumentPreview";
-import ExtractionOutput from "@/components/ocr/ExtractionOutput";
-import ExportButtons from "@/components/ExportButtons";
-import ProcessingStatus from "@/components/ocr/ProcessingStatus";
-import UpgradeModal from "@/components/ocr/UpgradeModal";
-import { extractDocument, getHistory, getExtractionById } from "@/services/api";
-
-export default function Dashboard() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [keyFields, setKeyFields] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [extractionResult, setExtractionResult] = useState(null);
-  const [error, setError] = useState(null);
-  const [processingStage, setProcessingStage] = useState("received"); // received, analysis, extraction, done
-  const [stats, setStats] = useState({ totalExtracted: 0, averageAccuracy: 0 });
-  const [isLoadingFromHistory, setIsLoadingFromHistory] = useState(false);
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-  
-  const TRIAL_LIMIT = 2; // Maximum number of extractions allowed in trial
-
-  const handleFileSelect = (file) => {
-    // Check if user has reached trial limit
-    if (stats.totalExtracted >= TRIAL_LIMIT) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    setSelectedFile(file);
-    setIsComplete(false);
-    setExtractionResult(null);
-    setError(null);
-  };
-
-  const handleClear = () => {
-    setSelectedFile(null);
-    setKeyFields("");
-    setIsProcessing(false);
-    setIsComplete(false);
-    setExtractionResult(null);
-    setError(null);
-    setProcessingStage("received");
-  };
-
-  // Load extraction from history if extractionId is in URL
-  useEffect(() => {
-    const extractionId = searchParams.get("extractionId");
-    console.log("Dashboard useEffect - extractionId:", extractionId, "isLoadingFromHistory:", isLoadingFromHistory, "extractionResult:", extractionResult);
-    
-    if (extractionId && !isLoadingFromHistory) {
-      // Only load if we don't already have this extraction loaded
-      const currentExtractionId = extractionResult?.id;
-      if (currentExtractionId && currentExtractionId === parseInt(extractionId)) {
-        console.log("Extraction already loaded, skipping");
-        return;
-      }
-      
-      const loadExtractionFromHistory = async () => {
-        setIsLoadingFromHistory(true);
-        setError(null);
-        try {
-          console.log("Loading extraction from history, ID:", extractionId);
-          const extraction = await getExtractionById(parseInt(extractionId));
-          console.log("Extraction loaded:", extraction);
-          console.log("Extraction fields:", extraction.fields);
-          console.log("Fields type:", typeof extraction.fields);
-          console.log("Fields keys:", extraction.fields ? Object.keys(extraction.fields) : "none");
-          
-          if (!extraction) {
-            throw new Error("No extraction data received");
-          }
-          
-          // Ensure fields is an object, not a string
-          let fieldsData = extraction.fields || {};
-          if (typeof fieldsData === 'string') {
-            try {
-              fieldsData = JSON.parse(fieldsData);
-            } catch (e) {
-              console.error("Failed to parse fields as JSON:", e);
-              fieldsData = {};
-            }
-          }
-          
-          console.log("Processed fields:", fieldsData);
-          
-          // Create file object from base64 if available, otherwise create empty file
-          let fileForPreview;
-          if (extraction.fileBase64) {
-            // Convert base64 to binary
-            const binaryString = atob(extraction.fileBase64);
-            const bytes = new Uint8Array(binaryString.length);
-            for (let i = 0; i < binaryString.length; i++) {
-              bytes[i] = binaryString.charCodeAt(i);
-            }
-            const fileBlob = new Blob([bytes], { type: extraction.fileType || "application/pdf" });
-            fileForPreview = new File(
-              [fileBlob],
-              extraction.fileName || "document.pdf",
-              { type: extraction.fileType || "application/pdf" }
-            );
-            console.log("Created file from base64:", fileForPreview.name, fileForPreview.size, "bytes");
-          } else {
-            // Fallback: create empty file if base64 not available
-            const fileBlob = new Blob([], { type: extraction.fileType || "application/pdf" });
-            fileForPreview = new File(
-              [fileBlob],
-              extraction.fileName || "document.pdf",
-              { type: extraction.fileType || "application/pdf" }
-            );
-            console.log("No base64 available, created empty file");
-          }
-          
-          // Set the extraction result - match the structure from extractDocument
-          const result = {
-            id: extraction.id,
-            fields: fieldsData,
-            confidence: extraction.confidence || 0,
-            fieldsExtracted: extraction.fieldsExtracted || 0,
-            totalTime: extraction.totalTime || 0,
-            fileName: extraction.fileName,
-            fileType: extraction.fileType,
-            fileSize: extraction.fileSize,
-          };
-          
-          console.log("Setting extraction result:", result);
-          setExtractionResult(result);
-          setSelectedFile(fileForPreview);
-          setIsComplete(true);
-          setIsProcessing(false);
-          setProcessingStage("done");
-          
-          // Remove the extractionId from URL
-          setSearchParams({});
-        } catch (err) {
-          console.error("Failed to load extraction from history:", err);
-          const errorMessage = err.message || "Failed to load extraction from history";
-          setError(errorMessage);
-          // Don't clear the URL params on error so user can see what went wrong
-        } finally {
-          setIsLoadingFromHistory(false);
-        }
-      };
-      
-      loadExtractionFromHistory();
-    }
-  }, [searchParams, isLoadingFromHistory, setSearchParams]);
-
-  // Fetch and calculate stats from history
-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        const history = await getHistory();
-        
-        // Calculate total extracted (only completed extractions)
-        const completedExtractions = history.filter(item => item.status === "completed");
-        const totalExtracted = completedExtractions.length;
-        
-        // Calculate average accuracy from completed extractions
-        const accuracies = completedExtractions
-          .map(item => item.confidence || 0)
-          .filter(acc => acc > 0);
-        
-        const averageAccuracy = accuracies.length > 0
-          ? accuracies.reduce((sum, acc) => sum + acc, 0) / accuracies.length
-          : 0;
-        
-        setStats({
-          totalExtracted,
-          averageAccuracy: Math.round(averageAccuracy * 10) / 10 // Round to 1 decimal place
-        });
-      } catch (err) {
-        console.error("Failed to fetch stats:", err);
-        // Keep default values on error
-      }
-    };
-
-    // Fetch stats on mount and when extraction completes
-    fetchStats();
-  }, [isComplete]);
-
-  const handleExtract = async () => {
-    if (!selectedFile) return;
-    
-    // Check if user has reached trial limit before processing
-    if (stats.totalExtracted >= TRIAL_LIMIT) {
-      setShowUpgradeModal(true);
-      return;
-    }
-
-    setIsProcessing(true);
-    setIsComplete(false);
-    setError(null);
-    setExtractionResult(null);
-    setProcessingStage("received");
-
-    // Move to Analysis stage immediately after starting
-    setTimeout(() => {
-      setProcessingStage("analysis");
-    }, 100);
-
-    // Move to Extraction stage after analysis phase (2.5 seconds)
-    let extractionTimer = setTimeout(() => {
-      setProcessingStage("extraction");
-    }, 2500);
-
-    try {
-      const result = await extractDocument(selectedFile, keyFields);
-      
-      // Clear the extraction timer
-      clearTimeout(extractionTimer);
-      
-      // Move to extraction stage if not already there, then to done
-      setProcessingStage("extraction");
-      
-      // Small delay to show extraction stage, then move to done when results are rendered
-      setTimeout(() => {
-        setProcessingStage("done");
-        setExtractionResult(result);
-        setIsComplete(true);
-        setIsProcessing(false);
-      }, 500); // Give time to see extraction stage
-    } catch (err) {
-      clearTimeout(extractionTimer);
-      console.error("Extraction error:", err);
-      setError(err.message || "Failed to extract document. Please try again.");
-      setIsComplete(false);
-      setProcessingStage("received");
-      setIsProcessing(false);
-    }
-  };
-
-  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 justify-between">
-          <div>
-            <h1 className="text-xl font-bold text-slate-900 tracking-tight leading-tight">
-              Multi-Lingual Document Extraction
-            </h1>
-            <p className="text-sm text-slate-500 leading-tight">
-              Upload any document and extract structured data with VRP (No LLM)
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            {/* Stats Pills */}
-            <div className="hidden lg:flex items-center gap-2">
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg">
-                <FileText className="h-4 w-4 text-slate-500" />
-                <span className="text-sm font-medium text-slate-700">
-                  {stats.totalExtracted}/{TRIAL_LIMIT} Used
-                </span>
-              </div>
-              <div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 rounded-lg">
-                <TrendingUp className="h-4 w-4 text-emerald-600" />
-                <span className="text-sm font-medium text-emerald-700">
-                  {stats.averageAccuracy > 0 ? `${stats.averageAccuracy}%` : "0%"} Accuracy
-                </span>
-              </div>
-            </div>
-
-            <ExportButtons isComplete={isComplete} extractionResult={extractionResult} />
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <div className="p-8">
-        {/* Upload Section */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="max-w-3xl mx-auto mb-4"
-        >
-          <UploadZone
-            onFileSelect={handleFileSelect}
-            selectedFile={selectedFile}
-            onClear={handleClear}
-            keyFields={keyFields}
-            onKeyFieldsChange={setKeyFields}
-          />
-
-          {/* Extract Button */}
-          {selectedFile && !isProcessing && !isComplete && (
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="mt-4 flex justify-center"
-            >
-              <Button
-                onClick={handleExtract}
-                size="lg"
-                className="h-14 px-8 rounded-2xl font-semibold text-base bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 shadow-xl shadow-indigo-500/25 hover:shadow-2xl hover:shadow-indigo-500/30 transition-all duration-300 hover:-translate-y-0.5"
-              >
-                <Sparkles className="h-5 w-5 mr-2" />
-                Start Extraction
-                <Zap className="h-4 w-4 ml-2 opacity-70" />
-              </Button>
-            </motion.div>
-          )}
-        </motion.div>
-
-        {/* Error Message */}
-        {error && (
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="max-w-3xl mx-auto mb-6"
-          >
-            <div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-start gap-3">
-              <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
-              <div className="flex-1">
-                <h3 className="font-semibold text-red-900 mb-1">Extraction Failed</h3>
-                <p className="text-sm text-red-700">{error}</p>
-              </div>
-              <button
-                onClick={() => setError(null)}
-                className="text-red-400 hover:text-red-600 transition-colors"
-              >
-                ×
-              </button>
-            </div>
-          </motion.div>
-        )}
-
-        {/* Loading from History */}
-        {isLoadingFromHistory && (
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="max-w-3xl mx-auto mb-6"
-          >
-            <div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 flex items-center gap-3">
-              <Clock className="h-5 w-5 text-blue-600 animate-spin" />
-              <div className="flex-1">
-                <h3 className="font-semibold text-blue-900 mb-1">Loading extraction...</h3>
-                <p className="text-sm text-blue-700">Retrieving extraction data from history</p>
-              </div>
-            </div>
-          </motion.div>
-        )}
-
-        {/* Processing Status */}
-        {(isProcessing || isComplete) && !isLoadingFromHistory && (
-          <div className="max-w-3xl mx-auto mb-4">
-            <ProcessingStatus
-              isProcessing={isProcessing}
-              isComplete={isComplete}
-              currentStage={processingStage}
-            />
-          </div>
-        )}
-
-        {/* Split View */}
-        {selectedFile && (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-4"
-            style={{ height: "calc(100vh - 320px)", minHeight: "450px" }}
-          >
-            <DocumentPreview 
-              file={selectedFile} 
-              isProcessing={isProcessing}
-              isFromHistory={!!extractionResult?.id}
-            />
-            <ExtractionOutput
-              hasFile={!!selectedFile}
-              isProcessing={isProcessing}
-              isComplete={isComplete}
-              extractionResult={extractionResult}
-              onNewUpload={handleClear}
-            />
-          </motion.div>
-        )}
-
-        {/* Empty State Features */}
-        {!selectedFile && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.3 }}
-            className="max-w-5xl mx-auto mt-12"
-          >
-            <div className="text-center mb-10">
-              <h2 className="text-2xl font-bold text-slate-900 mb-2">
-                Pure Agentic Document Intelligence
-              </h2>
-              <p className="text-slate-500">
-                Extract structured data from any document without LLM using VRP (Visual Resoning Processor)
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              {[
-                {
-                  icon: Zap,
-                  title: "Lightning Fast",
-                  description:
-                    "Process documents faster with our agentic pipeline",
-                  color: "amber",
-                },
-                {
-                  icon: Sparkles,
-                  title: `${stats.averageAccuracy > 0 ? stats.averageAccuracy : "99.8"}% Accuracy`,
-                  description:
-                    "Industry-leading extraction accuracy",
-                  color: "indigo",
-                },
-                {
-                  icon: Clock,
-                  title: "Any Format",
-                  description:
-                    "Support for PDF, images, and scanned documents",
-                  color: "emerald",
-                },
-              ].map((feature, index) => (
-                <motion.div
-                  key={feature.title}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4 + index * 0.1 }}
-                  className="group 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"
-                >
-                  <div
-                    className={`h-12 w-12 rounded-xl bg-${feature.color}-50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}
-                  >
-                    <feature.icon
-                      className={`h-6 w-6 text-${feature.color}-600`}
-                    />
-                  </div>
-                  <h3 className="font-semibold text-slate-900 mb-2">
-                    {feature.title} 
-                  </h3>
-                  <p className="text-sm text-slate-500 leading-relaxed">
-                    {feature.description}
-                  </p>
-                </motion.div>
-              ))}
-            </div>
-
-            {/* Supported Formats */}
-            <div className="mt-12 text-center">
-              <p className="text-xs text-slate-400 uppercase tracking-wider mb-4 font-medium">
-                Supported Formats
-              </p>
-              <div className="flex items-center justify-center gap-6 flex-wrap">
-                {["PDF", "PNG", "JPG", "TIFF", "JPEG"].map((format) => (
-                  <div
-                    key={format}
-                    className="flex items-center gap-2 text-slate-400"
-                  >
-                    <FileText className="h-4 w-4" />
-                    <span className="text-sm font-medium">{format}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </div>
-
-      {/* Upgrade Modal */}
-      <UpgradeModal open={showUpgradeModal} onClose={() => setShowUpgradeModal(false)} />
-    </div>
-  );
-}

frontend/src/pages/History.jsx

@@ -857,859 +857,3 @@ export default function History() {
     </div>
   );
 }
-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>
-  );
-}