From 8f0ca4a9ca23c631d60a1e076fe8d7f3abce0ef8 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Fri, 17 Oct 2025 12:26:57 +0530
Subject: [PATCH] added ratoted image inside preview documents

---
 src/components/Expenses/PreviewDocument.jsx | 68 ++++++++++++---------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/Expenses/PreviewDocument.jsx b/src/components/Expenses/PreviewDocument.jsx
index 786cdf64..ce554ca9 100644
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@@ -1,42 +1,54 @@
-import { useState } from 'react';
-
+import { useState } from "react";
 
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
-  const [rotation, setRotation] = useState(0); // Rotation angle
+  const [rotation, setRotation] = useState(0);
 
   return (
-    <div className="d-flex flex-column justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
+   <>
+    <div className="d-flex justify-content-start">
+        <i
+          className="bx bx-rotate-right cursor-pointer"
+          onClick={() => setRotation((prev) => prev + 90)}
+        ></i>
+      </div>
+    <div
+      className="d-flex flex-column justify-content-center align-items-center"
+      style={{ minHeight: "60%" }}
+    >
+      
       {loading && (
-        <div className="text-secondary text-center mb-2">
-          Loading...
-        </div>
+        <div className="text-secondary text-center mb-2">Loading...</div>
       )}
 
-      <img
-        src={imageUrl}
-        alt="Full View"
-        className="img-fluid"
-        style={{
-          maxHeight: "100vh",
-          objectFit: "contain",
-          display: loading ? "none" : "block",
-          transform: `rotate(${rotation}deg)`,
-          transition: "transform 0.3s ease",
-        }}
-        onLoad={() => setLoading(false)}
-      />
+      <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)`,
+            transition: "transform 0.3s ease",
+          }}
+          onLoad={() => setLoading(false)}
+        />
+      </div>
 
-      {/* Rotate Button  */}
-      <button
-        className="btn btn-secondary mt-3"
-        onClick={() => setRotation((prev) => prev + 90)}
-      >
-        Rotate
-      </button>
+      <div className="d-flex justify-content-center gap-2">
+        <button
+          className="btn btn-outline-secondary"
+          onClick={() => setRotation(0)}
+          title="Reset Rotation"
+        >
+          <i className="bx bx-reset"></i> Reset
+        </button>
+      </div>
     </div>
+   </>
   );
 };
 
 export default PreviewDocument;
-