src/pages/Expense/ExpensePage.jsx

@@ -33,7 +33,11 @@ import {
   SearchSchema,
 } from "../../components/Expenses/ExpenseSchema";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { CREATE_EXEPENSE } from "../../utils/constants";
+import {
+  CREATE_EXEPENSE,
+  VIEW_ALL_EXPNESE,
+  VIEW_SELF_EXPENSE,
+} from "../../utils/constants";
 
 const SelectDropdown = ({
   label,
@@ -100,12 +104,12 @@ export const useExpenseContext = () => {
     throw new Error("useExpenseContext must be used within an ExpenseProvider");
   }
   return context;
-}
+};
 
 const ExpensePage = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const [filters,setFilter] = useState()
-  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
+  const [filters, setFilter] = useState();
+  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
   const dropdownRef = useRef(null);
   const shouldCloseOnOutsideClick = useRef(false);
   const selectedProjectId = useSelector(
@@ -123,7 +127,8 @@ const ExpensePage = () => {
     IsOpen: false,
     Image: null,
   });
-
+  const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
+  const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
   const contextValue = {
     setViewExpense,
     setManageExpenseModal,
@@ -155,13 +160,13 @@ const ExpensePage = () => {
   );
 
   const onSubmit = (data) => {
-  setFilter(data)
+    setFilter(data);
   };
-const isValidDate = (date) => {
+  const isValidDate = (date) => {
     return date instanceof Date && !isNaN(date);
-};
+  };
 
-const setDateRange = ({ startDate, endDate }) => {
+  const setDateRange = ({ startDate, endDate }) => {
     const parsedStart = new Date(startDate);
     const parsedEnd = new Date(endDate);
 
@@ -173,8 +178,7 @@ const setDateRange = ({ startDate, endDate }) => {
       "endDate",
       isValidDate(parsedEnd) ? parsedEnd.toISOString().split("T")[0] : null
     );
-};
-
+  };
 
   const toggleDropdown = () => {
     setIsOpen((prev) => {
@@ -199,19 +203,17 @@ const setDateRange = ({ startDate, endDate }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  const clearFilter =()=>{
-    setFilter(
-        {
+  const clearFilter = () => {
+    setFilter({
       projectIds: [],
       statusIds: [],
       createdByIds: [],
       paidById: [],
       startDate: null,
       endDate: null,
-        })
-        reset()
-    
-  }
+    });
+    reset();
+  };
 
   return (
     <ExpenseContext.Provider value={contextValue}>
@@ -222,6 +224,8 @@ const setDateRange = ({ startDate, endDate }) => {
             { label: "Expense", link: null },
           ]}
         />
+        {IsViewAll || IsViewSelf ? (
+          <>
             <div className="card my-1 text-start px-0">
               <div className="card-body py-1 px-1">
                 <div className="row">
@@ -278,10 +282,15 @@ const setDateRange = ({ startDate, endDate }) => {
                                               type="checkbox"
                                               className="form-check-input form-check-input-sm"
                                               value={status.id}
-                                          checked={value.includes(status.id)}
+                                              checked={value.includes(
+                                                status.id
+                                              )}
                                               onChange={(e) => {
                                                 if (e.target.checked) {
-                                              onChange([...value, status.id]);
+                                                  onChange([
+                                                    ...value,
+                                                    status.id,
+                                                  ]);
                                                 } else {
                                                   onChange(
                                                     value.filter(
@@ -337,7 +346,7 @@ const setDateRange = ({ startDate, endDate }) => {
                                   type="button"
                                   className="btn btn-secondary btn-xs"
                                   onClick={() => {
-                               clearFilter()
+                                    clearFilter();
                                     setIsOpen(false);
                                   }}
                                 >
@@ -376,13 +385,21 @@ const setDateRange = ({ startDate, endDate }) => {
                         <i className="bx bx-plus fs-4 text-white"></i>
                       </button>
                     )}
-               
                   </div>
                 </div>
               </div>
             </div>
-
             <ExpenseList filters={filters} />
+          </>
+        ) : (
+          <div className="card text-center py-1">
+            <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+            <p>
+              Access Denied: You don't have permission to perform this action. !
+            </p>
+          </div>
+        )}
+
         {ManageExpenseModal.IsOpen && (
           <GlobalModel
             isOpen={ManageExpenseModal.IsOpen}