added zoom in-out

src/components/Expenses/PreviewDocument.jsx

@@ -1,54 +1,80 @@
 import { useState } from "react";
 
+
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
   const [rotation, setRotation] = useState(0);
+  const [scale, setScale] = useState(1);
+
+  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
+  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
+  const resetAll = () => {
+    setRotation(0);
+    setScale(1);
+  };
 
   return (
-   <>
+    <>
-    <div className="d-flex justify-content-start">
+      <div className="d-flex justify-content-start gap-3 mb-2">
         <i
-          className="bx bx-rotate-right cursor-pointer"
+          className="bx bx-rotate-right cursor-pointer fs-4"
+          title="Rotate"
           onClick={() => setRotation((prev) => prev + 90)}
         ></i>
-      </div>
-    <div
-      className="position-relative d-flex flex-column justify-content-center align-items-center"
-      style={{ minHeight: "80vh" }}
-    >
-      
-      {loading && (
-        <div className="text-secondary text-center mb-2">Loading...</div>
-      )}
 
-      <div className="mb-3 d-flex justify-content-center align-items-center">
+        <i
-        <img
+          className="bx bx-zoom-in cursor-pointer fs-4"
-          src={imageUrl}
+          title="Zoom In"
-          alt="Full View"
+          onClick={zoomIn}
-          className="img-fluid"
+        ></i>
-          style={{
+
-            maxHeight: "80vh",
+        <i
-            objectFit: "contain",
+          className="bx bx-zoom-out cursor-pointer fs-4"
-            display: loading ? "none" : "block",
+          title="Zoom Out"
-            transform: `rotate(${rotation}deg)`,
+          onClick={zoomOut}
-            transition: "transform 0.3s ease",
+        ></i>
-          }}
-          onLoad={() => setLoading(false)}
-        />
       </div>
 
-      <div className="position-absolute bottom-0 start-0 justify-content-center gap-2">
+      <div
-        <button
+        className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
-          className="btn btn-outline-secondary"
+        style={{ minHeight: "80vh" }}
-          onClick={() => setRotation(0)}
+      >
-          title="Reset Rotation"
+        {loading && (
-        >
+          <div className="text-secondary text-center mb-2">
-          <i className="bx bx-reset"></i> Reset
+            Loading...
-        </button>
+          </div>
+        )}
+
+        <div className="mb-3 d-flex justify-content-center align-items-center">
+          <img
+            src={imageUrl}
+            alt="Full View"
+            className="img-fluid"
+            style={{
+              maxHeight: "80vh",
+              objectFit: "contain",
+              display: loading ? "none" : "block",
+              transform: `rotate(${rotation}deg) scale(${scale})`,
+              transition: "transform 0.3s ease",
+              cursor: "grab",
+            }}
+            onLoad={() => setLoading(false)}
+          />
+        </div>
+
+        <div className="position-absolute bottom-0 start-0 m-2">
+          <button
+            className="btn btn-outline-secondary"
+            onClick={resetAll}
+          >
+            <i className="bx bx-reset"></i> Reset
+          </button>
+        </div>
       </div>
-    </div>
+    </>
-   </>
   );
 };
 
+
+
 export default PreviewDocument;