added ratoted image inside preview documents

src/components/Expenses/PreviewDocument.jsx

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