added ratoted image inside preview documents

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">
+        <div className="text-secondary text-center mb-2">Loading...</div>
-          Loading...
-        </div>
       )}
 
-      <img
+      <div className="mb-3 d-flex justify-content-center align-items-center">
-        src={imageUrl}
+        <img
-        alt="Full View"
+          src={imageUrl}
-        className="img-fluid"
+          alt="Full View"
-        style={{
+          className="img-fluid"
-          maxHeight: "100vh",
+          style={{
-          objectFit: "contain",
+            maxHeight: "80vh",
-          display: loading ? "none" : "block",
+            objectFit: "contain",
-          transform: `rotate(${rotation}deg)`,
+            display: loading ? "none" : "block",
-          transition: "transform 0.3s ease",
+            transform: `rotate(${rotation}deg)`,
-        }}
+            transition: "transform 0.3s ease",
-        onLoad={() => setLoading(false)}
+          }}
-      />
+          onLoad={() => setLoading(false)}
+        />
+      </div>
 
-      {/* Rotate Button  */}
+      <div className="d-flex justify-content-center gap-2">
-      <button
+        <button
-        className="btn btn-secondary mt-3"
+          className="btn btn-outline-secondary"
-        onClick={() => setRotation((prev) => prev + 90)}
+          onClick={() => setRotation(0)}
-      >
+          title="Reset Rotation"
-        Rotate
+        >
-      </button>
+          <i className="bx bx-reset"></i> Reset
+        </button>
+      </div>
     </div>
+   </>
   );
 };
 
 export default PreviewDocument;
-