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

frontend/src/components/ocr/DocumentPreview.jsx

@@ -1,11 +1,92 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { FileText, ZoomIn, ZoomOut, RotateCw, Maximize2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 export default function DocumentPreview({ file, isProcessing }) {
-  // Mock preview - in real app would show actual document
-  const mockPages = [1, 2, 3];
+  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");
+          pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
+
+          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">
@@ -27,14 +108,16 @@ export default function DocumentPreview({ file, isProcessing }) {
               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">100%</span>
+            <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>
@@ -43,6 +126,7 @@ export default function DocumentPreview({ file, isProcessing }) {
               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>
@@ -50,6 +134,10 @@ export default function DocumentPreview({ file, isProcessing }) {
               variant="ghost"
               size="icon"
               className="h-8 w-8 text-slate-400 hover:text-slate-600"
+              onClick={() => {
+                setZoom(100);
+                setRotation(0);
+              }}
             >
               <Maximize2 className="h-4 w-4" />
             </Button>
@@ -68,61 +156,52 @@ export default function DocumentPreview({ file, isProcessing }) {
               <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">
-            {mockPages.map((page, index) => (
+            {previewUrls.map((url, index) => (
               <motion.div
-                key={page}
+                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 aspect-[8.5/11] overflow-hidden"
+                className="relative bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex items-center justify-center"
+                style={{
+                  minHeight: "400px",
+                }}
               >
-                {/* Mock document content */}
-                <div className="absolute inset-0 p-8">
-                  {/* Header simulation */}
-                  <div className="flex items-center gap-4 mb-8">
-                    <div className="h-12 w-12 rounded-lg bg-slate-100" />
-                    <div className="space-y-2">
-                      <div className="h-3 w-32 bg-slate-100 rounded" />
-                      <div className="h-2 w-24 bg-slate-50 rounded" />
-                    </div>
-                  </div>
-
-                  {/* Text lines simulation */}
-                  <div className="space-y-3">
-                    {[...Array(12)].map((_, i) => (
-                      <div
-                        key={i}
-                        className="h-2 bg-slate-100 rounded"
-                        style={{ width: `${Math.random() * 40 + 60}%` }}
-                      />
-                    ))}
-                  </div>
-
-                  {/* Table simulation */}
-                  <div className="mt-6 border border-slate-100 rounded-lg overflow-hidden">
-                    {[...Array(4)].map((_, i) => (
-                      <div key={i} className="flex border-b border-slate-50 last:border-0">
-                        {[...Array(3)].map((_, j) => (
-                          <div
-                            key={j}
-                            className="flex-1 p-3 border-r border-slate-50 last:border-0"
-                          >
-                            <div className="h-2 bg-slate-100 rounded w-3/4" />
-                          </div>
-                        ))}
-                      </div>
-                    ))}
+                {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">Unable to load preview</p>
                   </div>
-                </div>
+                )}
 
                 {/* Processing overlay */}
                 {isProcessing && (
                   <motion.div
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
-                    className="absolute inset-0 bg-indigo-600/5 backdrop-blur-[1px]"
+                    className="absolute inset-0 bg-indigo-600/5 backdrop-blur-[1px] pointer-events-none"
                   >
                     <motion.div
                       initial={{ top: 0 }}
@@ -138,9 +217,11 @@ export default function DocumentPreview({ file, isProcessing }) {
                 )}
 
                 {/* Page number */}
-                <div className="absolute bottom-3 right-3 text-xs text-slate-400 bg-white/90 px-2 py-1 rounded">
-                  Page {page}
-                </div>
+                {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>