EZOFIS-IRP

Sleeping

App Files Files Community

Seth commited on Jan 4

Commit

f21322e

1 Parent(s): d7fe8fb

update

Browse files

Files changed (11) hide show

frontend/index.html +0 -16
frontend/src/components/ShareModal.jsx +194 -200
frontend/src/components/ocr/DocumentPreview.jsx +228 -232
frontend/src/components/ocr/ProcessingStatus.jsx +0 -121
frontend/src/components/ocr/UploadZone.jsx +250 -254
frontend/src/components/ui/separator.jsx +0 -20
frontend/src/config/firebase.js +0 -34
frontend/src/contexts/AuthContext.jsx +0 -119
frontend/src/pages/Dashboard.jsx +475 -479
frontend/src/pages/ShareHandler.jsx +0 -99
frontend/src/services/auth.js +0 -115

frontend/index.html CHANGED Viewed

@@ -1,18 +1,3 @@
-<<<<<<< HEAD
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/logo.png" />
-    <title>EZOFIS AI - VRP Document Intelligence</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body class="bg-[#FAFAFA]">
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
-=======
 <!doctype html>
 <html lang="en">
   <head>
@@ -26,4 +11,3 @@
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 <!doctype html>
 <html lang="en">
   <head>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

frontend/src/components/ShareModal.jsx CHANGED Viewed

@@ -1,202 +1,3 @@
-<<<<<<< HEAD
-import React, { useState } from "react";
-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>
-  );
-}
-=======
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { X, Mail, Send, Loader2 } from "lucide-react";
@@ -393,5 +194,198 @@ export default function ShareModal({ isOpen, onClose, onShare, extractionId }) {
     </AnimatePresence>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { X, Mail, Send, Loader2 } from "lucide-react";
     </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 CHANGED Viewed

@@ -1,234 +1,3 @@
-<<<<<<< HEAD
-import React, { useState, useEffect, useRef } from "react";
-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>
-  );
-}
-=======
 import React, { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { FileText, ZoomIn, ZoomOut, RotateCw } from "lucide-react";
@@ -458,4 +227,231 @@ export default function DocumentPreview({ file, isProcessing, isFromHistory = fa
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React, { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { FileText, ZoomIn, ZoomOut, RotateCw } from "lucide-react";
     </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/ProcessingStatus.jsx CHANGED Viewed

@@ -1,123 +1,3 @@
-<<<<<<< HEAD
-import React from "react";
-import { motion } from "framer-motion";
-import {
-  FileSearch,
-  Cpu,
-  TableProperties,
-  CheckCircle2,
-  Loader2,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-const steps = [
-  { id: "upload", label: "Received", icon: FileSearch },
-  { id: "analyze", label: "Analysis", icon: Cpu },
-  { id: "extract", label: "Extraction", icon: TableProperties },
-  { id: "complete", label: "Done", icon: CheckCircle2 },
-];
-export default function ProcessingStatus({ isProcessing, isComplete, currentStage }) {
-  const getCurrentStep = () => {
-    if (isComplete) return 4; // Done
-    if (!isProcessing) return 0; // Not started
-    // Use provided currentStage or default based on isProcessing
-    if (currentStage === "extraction") return 3; // Extraction
-    if (currentStage === "analysis") return 2; // Analysis
-    if (currentStage === "received") return 1; // Received
-    // Default: if processing, start at Analysis
-    return 2; // Analysis
-  };
-  const currentStep = getCurrentStep();
-  if (!isProcessing && !isComplete) return null;
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: -10 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="bg-white rounded-xl border border-slate-200 px-4 py-3"
-    >
-      <div className="flex items-center justify-between gap-2">
-        {steps.map((step, index) => {
-          const isActive = index + 1 === currentStep;
-          const isCompleted = index + 1 < currentStep || isComplete;
-          const Icon = step.icon;
-          return (
-            <React.Fragment key={step.id}>
-              <div className="flex items-center gap-2">
-                <motion.div
-                  initial={false}
-                  animate={{
-                    scale: (isActive && !isComplete) ? 1.05 : 1,
-                    backgroundColor: isCompleted
-                      ? "rgb(16 185 129)"
-                      : (isActive && !isComplete)
-                      ? "rgb(99 102 241)"
-                      : "rgb(241 245 249)",
-                  }}
-                  className={cn(
-                    "h-8 w-8 rounded-lg flex items-center justify-center transition-colors",
-                    (isCompleted || isActive) && "shadow-md"
-                  )}
-                  style={{
-                    boxShadow: (isActive && !isComplete)
-                      ? "0 4px 8px -2px rgba(99, 102, 241, 0.3)"
-                      : isCompleted
-                      ? "0 4px 8px -2px rgba(16, 185, 129, 0.3)"
-                      : "none",
-                  }}
-                >
-                  {(isActive && !isComplete) ? (
-                    <motion.div
-                      animate={{ rotate: 360 }}
-                      transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
-                    >
-                      <Loader2 className="h-4 w-4 text-white" />
-                    </motion.div>
-                  ) : isCompleted ? (
-                    <CheckCircle2 className="h-4 w-4 text-white" />
-                  ) : (
-                    <Icon className={cn("h-4 w-4 text-slate-400")} />
-                  )}
-                </motion.div>
-                <span
-                  className={cn(
-                    "text-xs font-medium hidden sm:inline",
-                    isActive ? "text-indigo-600" : isCompleted ? "text-emerald-600" : "text-slate-400"
-                  )}
-                >
-                  {step.label}
-                </span>
-              </div>
-              {index < steps.length - 1 && (
-                <div className="flex-1 h-0.5 mx-1 relative overflow-hidden rounded-full bg-slate-100">
-                  <motion.div
-                    initial={{ width: 0 }}
-                    animate={{
-                      width: isCompleted ? "100%" : isActive ? "50%" : "0%",
-                    }}
-                    transition={{ duration: 0.5 }}
-                    className={cn(
-                      "absolute inset-y-0 left-0",
-                      isCompleted ? "bg-emerald-500" : "bg-indigo-500"
-                    )}
-                  />
-                </div>
-              )}
-            </React.Fragment>
-          );
-        })}
-      </div>
-    </motion.div>
-  );
-}
-=======
 import React from "react";
 import { motion } from "framer-motion";
 import {
@@ -236,4 +116,3 @@ export default function ProcessingStatus({ isProcessing, isComplete, currentStag
     </motion.div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React from "react";
 import { motion } from "framer-motion";
 import {
     </motion.div>
   );
 }

frontend/src/components/ocr/UploadZone.jsx CHANGED Viewed

@@ -1,256 +1,3 @@
-<<<<<<< HEAD
-import React, { useState, useEffect } from "react";
-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>
-  );
-}
-=======
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles, AlertCircle } from "lucide-react";
@@ -502,4 +249,253 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear, keyFie
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Upload, FileText, Image, FileSpreadsheet, X, Sparkles, AlertCircle } from "lucide-react";
     </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/components/ui/separator.jsx CHANGED Viewed

@@ -1,21 +1,3 @@
-<<<<<<< HEAD
-import React from "react";
-import { cn } from "@/lib/utils";
-export function Separator({ className, orientation = "horizontal", ...props }) {
-  return (
-    <div
-      className={cn(
-        "shrink-0 bg-slate-200",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-=======
 import React from "react";
 import { cn } from "@/lib/utils";
@@ -31,5 +13,3 @@ export function Separator({ className, orientation = "horizontal", ...props }) {
     />
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React from "react";
 import { cn } from "@/lib/utils";
     />
   );
 }

frontend/src/config/firebase.js CHANGED Viewed

@@ -1,35 +1,3 @@
-<<<<<<< HEAD
-/**
- * Firebase configuration and initialization
- */
-import { initializeApp } from 'firebase/app';
-import { getAuth, GoogleAuthProvider } from 'firebase/auth';
-// Firebase configuration from environment variables
-const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID,
-};
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-// Initialize Firebase Authentication and get a reference to the service
-export const auth = getAuth(app);
-// Configure Google Auth Provider
-export const googleProvider = new GoogleAuthProvider();
-googleProvider.setCustomParameters({
-  prompt: 'select_account'
-});
-export default app;
-=======
 /**
  * Firebase configuration and initialization
  */
@@ -59,5 +27,3 @@ googleProvider.setCustomParameters({
 });
 export default app;
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 /**
  * Firebase configuration and initialization
  */
 });
 export default app;

frontend/src/contexts/AuthContext.jsx CHANGED Viewed

@@ -1,120 +1,3 @@
-<<<<<<< HEAD
-import React, { createContext, useContext, useState, useEffect } from "react";
-import { signInWithPopup, signOut as firebaseSignOut } from "firebase/auth";
-import { auth, googleProvider } from "@/config/firebase";
-import { getCurrentUser, firebaseLogin, requestOTP, verifyOTP, logout as apiLogout } from "@/services/auth";
-const AuthContext = createContext(null);
-export function AuthProvider({ children }) {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [token, setToken] = useState(localStorage.getItem("auth_token"));
-  useEffect(() => {
-    // Check if user is already authenticated
-    if (token) {
-      checkAuth();
-    } else {
-      setLoading(false);
-    }
-  }, [token]);
-  const checkAuth = async () => {
-    try {
-      const userData = await getCurrentUser();
-      setUser(userData);
-    } catch (error) {
-      // Token is invalid, clear it
-      localStorage.removeItem("auth_token");
-      setToken(null);
-      setUser(null);
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleFirebaseLogin = async () => {
-    try {
-      const result = await signInWithPopup(auth, googleProvider);
-      const idToken = await result.user.getIdToken();
-      const response = await firebaseLogin(idToken);
-      handleAuthCallback(response.token);
-    } catch (error) {
-      if (error.code === 'auth/popup-closed' || error.code === 'auth/cancelled-popup-request') {
-        // User closed popup or cancelled - don't show error
-        return;
-      }
-      console.error("Firebase login error:", error);
-      throw new Error(error.message || "Firebase authentication failed");
-    }
-  };
-  const handleOTPRequest = async (email) => {
-    try {
-      await requestOTP(email);
-    } catch (error) {
-      console.error("OTP request error:", error);
-      throw error;
-    }
-  };
-  const handleOTPVerify = async (email, otp) => {
-    try {
-      const response = await verifyOTP(email, otp);
-      handleAuthCallback(response.token);
-    } catch (error) {
-      console.error("OTP verify error:", error);
-      throw error;
-    }
-  };
-  const handleLogout = async () => {
-    try {
-      // Sign out from Firebase if user was using Firebase auth
-      if (auth.currentUser) {
-        await firebaseSignOut(auth);
-      }
-      await apiLogout();
-    } catch (error) {
-      console.error("Logout error:", error);
-    } finally {
-      localStorage.removeItem("auth_token");
-      setToken(null);
-      setUser(null);
-    }
-  };
-  const handleAuthCallback = (newToken) => {
-    localStorage.setItem("auth_token", newToken);
-    setToken(newToken);
-    checkAuth();
-  };
-  const value = {
-    user,
-    token,
-    loading,
-    firebaseLogin: handleFirebaseLogin,
-    requestOTP: handleOTPRequest,
-    verifyOTP: handleOTPVerify,
-    logout: handleLogout,
-    handleAuthCallback,
-    isAuthenticated: !!user,
-  };
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-}
-=======
 import React, { createContext, useContext, useState, useEffect } from "react";
 import { signInWithPopup, signOut as firebaseSignOut } from "firebase/auth";
 import { auth, googleProvider } from "@/config/firebase";
@@ -229,5 +112,3 @@ export function useAuth() {
   }
   return context;
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React, { createContext, useContext, useState, useEffect } from "react";
 import { signInWithPopup, signOut as firebaseSignOut } from "firebase/auth";
 import { auth, googleProvider } from "@/config/firebase";
   }
   return context;
 }

frontend/src/pages/Dashboard.jsx CHANGED Viewed

@@ -1,481 +1,3 @@
-<<<<<<< HEAD
-// frontend/src/pages/Dashboard.jsx
-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/Dashboard.jsx
 import React, { useState, useEffect } from "react";
@@ -952,4 +474,478 @@ export default function Dashboard() {
     </div>
   );
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 // frontend/src/pages/Dashboard.jsx
 import React, { useState, useEffect } from "react";
     </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/ShareHandler.jsx CHANGED Viewed

@@ -1,100 +1,3 @@
-<<<<<<< HEAD
-import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useAuth } from "@/contexts/AuthContext";
-import { accessSharedExtraction } from "@/services/api";
-import LoginForm from "@/components/auth/LoginForm";
-export default function ShareHandler() {
-  const { token } = useParams();
-  const navigate = useNavigate();
-  const { isAuthenticated, loading } = useAuth();
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    const processShare = async () => {
-      if (loading) return; // Wait for auth to load
-      if (!isAuthenticated) {
-        // User not logged in - they'll be shown login form
-        // After login, AuthContext will trigger a re-render and this will run again
-        return;
-      }
-      // User is authenticated, process the share
-      if (isProcessing) return; // Prevent duplicate calls
-      setIsProcessing(true);
-      setError(null);
-      try {
-        const result = await accessSharedExtraction(token);
-        if (result.success && result.extraction_id) {
-          // Redirect to history page with the extraction ID
-          navigate(`/history?extractionId=${result.extraction_id}`);
-        } else {
-          setError("Failed to access shared extraction");
-        }
-      } catch (err) {
-        console.error("Share access error:", err);
-        setError(err.message || "Failed to access shared extraction");
-        // Still redirect to history after 3 seconds
-        setTimeout(() => {
-          navigate("/history");
-        }, 3000);
-      } finally {
-        setIsProcessing(false);
-      }
-    };
-    processShare();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, isAuthenticated, loading]);
-  // Show login form if not authenticated
-  if (!isAuthenticated && !loading) {
-    return <LoginForm />;
-  }
-  // Show loading state while processing
-  if (isProcessing || loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-[#FAFAFA]">
-        <div className="text-center">
-          <div className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4 animate-pulse">
-            <div className="h-8 w-8 rounded-lg bg-indigo-600"></div>
-          </div>
-          <p className="text-slate-600">Loading shared extraction...</p>
-        </div>
-      </div>
-    );
-  }
-  // Show error state
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-[#FAFAFA]">
-        <div className="text-center max-w-md mx-4">
-          <div className="h-16 w-16 mx-auto rounded-2xl bg-red-100 flex items-center justify-center mb-4">
-            <div className="h-8 w-8 rounded-lg bg-red-600"></div>
-          </div>
-          <h2 className="text-xl font-semibold text-slate-900 mb-2">Error</h2>
-          <p className="text-slate-600 mb-4">{error}</p>
-          <button
-            onClick={() => navigate("/history")}
-            className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
-          >
-            Go to History
-          </button>
-        </div>
-      </div>
-    );
-  }
-  return null;
-}
-=======
 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useAuth } from "@/contexts/AuthContext";
@@ -189,5 +92,3 @@ export default function ShareHandler() {
   return null;
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useAuth } from "@/contexts/AuthContext";
   return null;
 }

frontend/src/services/auth.js CHANGED Viewed

@@ -1,116 +1,3 @@
-<<<<<<< HEAD
-/**
- * Authentication service for Firebase and OTP authentication
- */
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "";
-/**
- * Get the current authenticated user
- * @returns {Promise<Object>} User object
- */
-export async function getCurrentUser() {
-  const token = localStorage.getItem("auth_token");
-  if (!token) {
-    throw new Error("No token found");
-  }
-  const response = await fetch(`${API_BASE_URL}/api/auth/me`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  if (!response.ok) {
-    if (response.status === 401) {
-      localStorage.removeItem("auth_token");
-    }
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.detail || "Failed to get user");
-  }
-  return await response.json();
-}
-/**
- * Login with Firebase ID token
- * @param {string} idToken - Firebase ID token
- * @returns {Promise<Object>} Response with token and user
- */
-export async function firebaseLogin(idToken) {
-  const response = await fetch(`${API_BASE_URL}/api/auth/firebase/login`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ id_token: idToken }),
-  });
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.detail || "Firebase login failed");
-  }
-  return await response.json();
-}
-/**
- * Request OTP for email login
- * @param {string} email - Email address
- * @returns {Promise<Object>} Response with success message
- */
-export async function requestOTP(email) {
-  const response = await fetch(`${API_BASE_URL}/api/auth/otp/request`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ email }),
-  });
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.detail || "Failed to send OTP");
-  }
-  return await response.json();
-}
-/**
- * Verify OTP and login
- * @param {string} email - Email address
- * @param {string} otp - OTP code
- * @returns {Promise<Object>} Response with token and user
- */
-export async function verifyOTP(email, otp) {
-  const response = await fetch(`${API_BASE_URL}/api/auth/otp/verify`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ email, otp }),
-  });
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.detail || "OTP verification failed");
-  }
-  return await response.json();
-}
-/**
- * Logout the current user
- * @returns {Promise<void>}
- */
-export async function logout() {
-  // For JWT tokens, logout is handled client-side by removing the token
-  // No server-side logout needed
-  return Promise.resolve();
-}
-=======
 /**
  * Authentication service for Firebase and OTP authentication
  */
@@ -221,5 +108,3 @@ export async function logout() {
   // No server-side logout needed
   return Promise.resolve();
 }
->>>>>>> daae7a900bd14d0802e4f04b99edb85493053f1d

 /**
  * Authentication service for Firebase and OTP authentication
  */
   // No server-side logout needed
   return Promise.resolve();
 }