allow view pdf file

src/components/Expenses/PreviewDocument.jsx

@@ -1,3 +1,4 @@
+import { error } from "pdf-lib";
 import { useState, useRef, useEffect } from "react";
 
 const PreviewDocument = ({ files = [] }) => {
@@ -15,9 +16,11 @@ const PreviewDocument = ({ files = [] }) => {
   const MIN_ZOOM = 0.4;
   const MAX_ZOOM = 3;
 
-  const currentImage = images[index];
+  const currentFile = images[index];
+  const fileUrl = currentFile?.preSignedUrl;
+
+  const isPDF = fileUrl?.toLowerCase().endsWith(".pdf");
 
-  // Reset on image change
   useEffect(() => {
     setRotation(0);
     setScale(1);
@@ -25,8 +28,8 @@ const PreviewDocument = ({ files = [] }) => {
     setLoading(true);
   }, [index]);
 
-  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
-  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
+  const zoomIn = () => !isPDF && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
+  const zoomOut = () => !isPDF && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
 
   const resetAll = () => {
     setRotation(0);
@@ -42,24 +45,8 @@ const PreviewDocument = ({ files = [] }) => {
     if (index > 0) setIndex((i) => i - 1);
   };
 
-  const handleWheel = (e) => {
-    e.preventDefault();
-
-    if (e.ctrlKey) {
-      const delta = e.deltaY > 0 ? -0.1 : 0.1;
-      setScale((prev) => {
-        let next = prev + delta;
-        if (next < MIN_ZOOM) next = MIN_ZOOM;
-        if (next > MAX_ZOOM) next = MAX_ZOOM;
-        return next;
-      });
-    } else {
-      if (e.deltaY > 0) nextImage();
-      else prevImage();
-    }
-  };
-
   const handleMouseDown = (e) => {
+    if (isPDF) return;
     setDragging(true);
     startPos.current = {
       x: e.clientX - position.x,
@@ -68,7 +55,7 @@ const PreviewDocument = ({ files = [] }) => {
   };
 
   const handleMouseMove = (e) => {
-    if (!dragging) return;
+    if (!dragging || isPDF) return;
 
     setPosition({
       x: e.clientX - startPos.current.x,
@@ -78,39 +65,41 @@ const PreviewDocument = ({ files = [] }) => {
 
   const handleMouseUp = () => setDragging(false);
 
-  const handleDoubleClick = () => resetAll();
+  const handleDoubleClick = () => !isPDF && resetAll();
 
   return (
     <>
-      {/* Top Controls */}
+      {/* Controls */}
       <div className="d-flex justify-content-start align-items-center mb-2">
-        {/* Left */}
         <div className="d-flex gap-3">
-          <i
-            className="bx bx-rotate-right cursor-pointer fs-4"
-            onClick={() => setRotation((prev) => prev + 90)}
-            title="Rotate"
-          />
-          <i
-            className="bx bx-zoom-in cursor-pointer fs-4"
-            onClick={zoomIn}
-            title="Zoom In"
-          />
-          <i
-            className="bx bx-zoom-out cursor-pointer fs-4"
-            onClick={zoomOut}
-            title="Zoom Out"
-          />
-          <i
-            className="bx bx-reset cursor-pointer fs-4"
-            onClick={resetAll}
-            title="Reset"
-          />
+          {!isPDF && (
+            <>
+              <i
+                className="bx bx-rotate-right cursor-pointer fs-4"
+                onClick={() => setRotation((prev) => prev + 90)}
+                title="Rotate"
+              />
+              <i
+                className="bx bx-zoom-in cursor-pointer fs-4"
+                onClick={zoomIn}
+                title="Zoom In"
+              />
+              <i
+                className="bx bx-zoom-out cursor-pointer fs-4"
+                onClick={zoomOut}
+                title="Zoom Out"
+              />
+              <i
+                className="bx bx-reset cursor-pointer fs-4"
+                onClick={resetAll}
+                title="Reset"
+              />
+            </>
+          )}
         </div>
       </div>
 
       <div
-        // onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
@@ -119,34 +108,55 @@ const PreviewDocument = ({ files = [] }) => {
         className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
         style={{
           minHeight: "70vh",
+          
           userSelect: "none",
           borderRadius: "10px",
         }}
       >
         {loading && <div className="text-secondary">Loading...</div>}
 
-        <img
-          src={currentImage?.preSignedUrl}
-          alt="Preview"
-          draggable="false"
-          style={{
-            maxHeight: "60vh",
-            display: loading ? "none" : "block",
-            transform: `
-              translate(${position.x}px, ${position.y}px)
-              scale(${scale})
-              rotate(${rotation}deg)
-            `,
-            transition: dragging ? "none" : "transform 0.2s ease",
-            cursor: dragging ? "grabbing" : "grab",
-          }}
-          onLoad={() => setLoading(false)}
-        />
+        {/* PDF VIEW */}
+        {isPDF ? (
+          <iframe
+            src={"./Expenses.pdf"}
+            title="PDF Preview"
+            style={{
+              width: "100%",
+              height: "70vh",
+              border: "none",
+            }}
+            onLoad={() => setLoading(false)}
+            onError={(error)=>{
+              console.log(error)
+            }}
+          />
+        ) : (
+          /* IMAGE VIEW */
+          <img
+            src={fileUrl}
+            alt="Preview"
+            draggable="false"
+            style={{
+              maxHeight: "60vh",
+              display: loading ? "none" : "block",
+              transform: `
+                translate(${position.x}px, ${position.y}px)
+                scale(${scale})
+                rotate(${rotation}deg)
+              `,
+              transition: dragging ? "none" : "transform 0.2s ease",
+              cursor: dragging ? "grabbing" : "grab",
+            }}
+            onLoad={() => setLoading(false)}
+          />
+        )}
       </div>
 
+
+
       <div className="d-flex justify-content-between">
         <div className="text-center text-muted mt-2 small">
-          Scroll = change image | Double click = reset
+          Scroll = change file | Double click = reset (images only)
         </div>
         <div className="d-flex align-items-center gap-2">
           <i

src/components/Expenses/ViewExpense.jsx

@@ -390,12 +390,10 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
                       key={doc.documentId}
                       className="d-flex align-items-center cusor-pointer"
                       onClick={() => {
-                        if (isImage) {
                           setDocumentView({
                             IsOpen: true,
                             Images: data?.documents,
                           });
-                        }
                       }}
                     >
                       <i
@@ -620,4 +618,4 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
   );
 };
 
-export default ViewExpense;
+export default ViewExpense;