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,14 +65,15 @@ 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">
+          {!isPDF && (
+            <>
               <i
                 className="bx bx-rotate-right cursor-pointer fs-4"
                 onClick={() => setRotation((prev) => prev + 90)}
@@ -106,11 +94,12 @@ const PreviewDocument = ({ files = [] }) => {
                 onClick={resetAll}
                 title="Reset"
               />
+            </>
+          )}
         </div>
       </div>
 
       <div
-        // onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
@@ -119,14 +108,32 @@ 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>}
 
+        {/* 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={currentImage?.preSignedUrl}
+            src={fileUrl}
             alt="Preview"
             draggable="false"
             style={{
@@ -142,11 +149,14 @@ const PreviewDocument = ({ files = [] }) => {
             }}
             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