added properly permissions

public/assets/css/core-extend.css

@@ -10,7 +10,21 @@
 .table_header_border {
  border-bottom:2px solid var(--bs-table-border-color) ;
 }
+.text-gary-80 {
+color:var(--bs-gray-500)
+}
 
+.text-royalblue{
+color: #1796e3;
+}
+
+.text-md {
+font-size: 2rem;
+}
+
+.text-md-b {
+font-weight: normal;
+}
 
 .text-xxs { font-size: 0.55rem; }       /* 8px */
 .text-xs { font-size: 0.75rem; }       /* 12px */

src/components/Expenses/PreviewDocument.jsx

@@ -1,15 +1,18 @@
 import { useState } from 'react';
 
+
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
+  const [rotation, setRotation] = useState(0); // Rotation angle
 
   return (
-    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
+    <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>
       )}
+
       <img
         src={imageUrl}
         alt="Full View"
@@ -18,11 +21,22 @@ const PreviewDocument = ({ imageUrl }) => {
           maxHeight: "100vh",
           objectFit: "contain",
           display: loading ? "none" : "block",
+          transform: `rotate(${rotation}deg)`,
+          transition: "transform 0.3s ease",
         }}
         onLoad={() => setLoading(false)}
       />
+
+      {/* Rotate Button  */}
+      <button
+        className="btn btn-secondary mt-3"
+        onClick={() => setRotation((prev) => prev + 90)}
+      >
+        Rotate
+      </button>
     </div>
   );
 };
 
 export default PreviewDocument;
+

src/components/collections/ManageCollection.jsx

@@ -138,7 +138,6 @@ const ManageCollection = ({ collectionId, onClose }) => {
         taxAmount: data?.taxAmount,
         basicAmount: data?.basicAmount,
         description: data?.description,
-        attachments: data?.attachments,
         attachments: data.attachments
           ? data.attachments.map((doc) => ({
               fileName: doc.fileName,

src/components/common/AccessDenied.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Breadcrumb from "./Breadcrumb";
+
+const AccessDenied = ({data}) => {
+  return (
+    <div className="container-fluid">
+      <Breadcrumb
+        data={data}
+      />
+
+        <div className="card text-center py-1">
+          <i className="fa-solid fa-triangle-exclamation fs-5" />
+          <p>
+            Access Denied: You don't have permission to perform this action !
+          </p>
+        </div>
+
+    </div>
+  );
+};
+
+export default AccessDenied;

src/pages/collections/CollectionPage.jsx

@@ -23,6 +23,7 @@ import {
   EDIT_COLLECTION,
   VIEW_COLLECTION,
 } from "../../utils/constants";
+import AccessDenied from "../../components/common/AccessDenied";
 
 const CollectionContext = createContext();
 export const useCollectionContext = () => {
@@ -81,13 +82,20 @@ const CollectionPage = () => {
   const handleMarkedPayment = (payload) => {
     MarkedReceived(payload);
   };
+ if (isAdmin === undefined || 
+    canAddPayment === undefined || 
+    canEditCollection === undefined || 
+    canViewCollection === undefined || 
+    canCreate === undefined
+) {
+  return <div className="text-center py-5">Checking access...</div>;
+}
+
+if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) {
+  return <AccessDenied data={[{ label: "Home", link: "/" }, { label: "Collection" }]} />;
+}
   return (
     <CollectionContext.Provider value={contextMassager}>
-      {isAdmin ||
-      canAddPayment ||
-      canEditCollection ||
-      canViewCollection ||
-      canCreate ? (
       <div className="container-fluid">
         <Breadcrumb
           data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
@@ -130,21 +138,17 @@ const CollectionPage = () => {
                   className="form-control form-control-sm"
                 />
               </div>
-                {isAdmin ||
+          { (canCreate || isAdmin) && (
-                  (isCanCreate && (
   <button
     className="btn btn-sm btn-primary"
     type="button"
-                      onClick={() =>
+    onClick={() => setCollection({ isOpen: true, invoiceId: null })}
-                        setCollection({ isOpen: true, invoiceId: null })
-                      }
   >
     <i className="bx bx-plus-circle me-2"></i>
-                      <span className="d-none d-md-inline-block">
+    <span className="d-none d-md-inline-block">Add New Collection</span>
-                        Add New Collection
-                      </span>
   </button>
-                  ))}
+)}
+
             </div>
           </div>
         </div>
@@ -160,15 +164,11 @@ const CollectionPage = () => {
           <GlobalModel
             isOpen={makeCollection.isOpen}
             size="lg"
-              closeModal={() =>
+            closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
-                setCollection({ isOpen: false, invoiceId: null })
-              }
           >
             <ManageCollection
               collectionId={makeCollection?.invoiceId ?? null}
-                onClose={() =>
+              onClose={() => setCollection({ isOpen: false, invoiceId: null })}
-                  setCollection({ isOpen: false, invoiceId: null })
-                }
             />
           </GlobalModel>
         )}
@@ -177,14 +177,10 @@ const CollectionPage = () => {
           <GlobalModel
             size="lg"
             isOpen={addPayment.isOpen}
-              closeModal={() =>
+            closeModal={() => setAddPayment({ isOpen: false, invoiceId: null })}
-                setAddPayment({ isOpen: false, invoiceId: null })
-              }
           >
             <AddPayment
-                onClose={() =>
+              onClose={() => setAddPayment({ isOpen: false, invoiceId: null })}
-                  setAddPayment({ isOpen: false, invoiceId: null })
-                }
             />
           </GlobalModel>
         )}
@@ -220,16 +216,6 @@ const CollectionPage = () => {
           onClose={() => setProcessedPayment(null)}
         />
       </div>
-      ) : (
-        <div className="container-fluid">
-          <div className="card text-center py-1">
-            <i className="fa-solid fa-triangle-exclamation fs-5" />
-            <p>
-              Access Denied: You don't have permission to perform this action !
-            </p>
-          </div>
-        </div>
-      )}
     </CollectionContext.Provider>
   );
 };