implement feature permission checks for expense status actions

src/components/Expenses/ViewExpense.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useActionOnExpense, useExpense } from "../../hooks/useExpense";
+import React, { useState, useMemo } from "react";
+import { useActionOnExpense, useExpense, useHasAnyPermission } from "../../hooks/useExpense";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -7,9 +7,14 @@ import { ActionSchema } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REVIEW_EXPENSE } from "../../utils/constants";
+import { useProfile } from "../../hooks/useProfile";
+import { useSelector } from "react-redux";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
+  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
   const {
@@ -25,6 +30,27 @@ const ViewExpense = ({ ExpenseId }) => {
       selectedStatus: "",
     },
   });
+ 
+const userPermissions = useSelector(
+  (state) => state?.globalVariables?.loginUser?.featurePermissions || []
+);
+
+
+const nextStatusWithPermission = useMemo(() => {
+  if (!Array.isArray(data?.nextStatus)) return [];
+
+  return data.nextStatus.filter((status) => {
+    const permissionIds = Array.isArray(status?.permissionIds)
+      ? status.permissionIds
+      : [];
+
+    if (permissionIds.length === 0) return true;
+
+    return permissionIds.some((id) => userPermissions.includes(id));
+  });
+}, [data, userPermissions]);
+
+
 
   const { mutate: MakeAction } = useActionOnExpense(() => reset());
 
@@ -226,37 +252,41 @@ const ViewExpense = ({ ExpenseId }) => {
 
       <hr className="divider my-1" />
 
-      {Array.isArray(data.nextStatus) && data.nextStatus.length > 0 && (
-        <div className="col-12 mb-3 text-start">
-          <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
-          <textarea
-            className="form-control form-control-sm"
-            {...register("comment")}
-            rows="2"
-          />
-          {errors.comment && (
-            <small className="danger-text">{errors.comment.message}</small>
-          )}
+    {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+  <div className="col-12 mb-3 text-start">
+    <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
 
-          <input type="hidden" {...register("selectedStatus")} />
+    <textarea
+      className="form-control form-control-sm"
+      {...register("comment")}
+      rows="2"
+    />
+    {errors.comment && (
+      <small className="danger-text">{errors.comment.message}</small>
+    )}
+
+    <input type="hidden" {...register("selectedStatus")} />
+
+    {nextStatusWithPermission?.length > 0 && (
+      <div className="text-center flex-wrap gap-2 my-2">
+        {nextStatusWithPermission?.map((status, index) => (
+          <button
+            key={status.id || index}
+            type="button"
+            onClick={() => {
+              setValue("selectedStatus", status.id);
+              handleSubmit(onSubmit)();
+            }}
+            className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+          >
+            {status.displayName || status.name}
+          </button>
+        ))}
+      </div>
+    )}
+  </div>
+)}
 
-          <div className="text-center flex-wrap gap-2 my-2">
-            {data.nextStatus.map((status, index) => (
-              <button
-                key={index}
-                type="button"
-                onClick={() => {
-                  setValue("selectedStatus", status.id);
-                  handleSubmit(onSubmit)();
-                }}
-                className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-              >
-                {status.displayName || status.name}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
     </form>
   );
 };

src/hooks/useExpense.js

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import ExpenseRepository from "../repositories/ExpsenseRepository";
 import showToast from "../services/toastService";
 import { queryClient } from "../layouts/AuthLayout";
+import { useSelector } from "react-redux";
 
 // -------------------Query------------------------------------------------------
 export const useExpenseList = (pageSize, pageNumber, filter) => {
@@ -196,3 +197,21 @@ export const useDeleteExpense = () => {
     },
   });
 }
+
+
+
+
+export const useHasAnyPermission = (permissionIdsInput) => {
+  const permissions = useSelector(
+    (state) => state?.profile?.permissions || []
+  );
+
+  const permissionIds = Array.isArray(permissionIdsInput)
+    ? permissionIdsInput
+    : [];
+
+  // No permission needed
+  if (permissionIds.length === 0) return true;
+
+  return permissionIds.some((id) => permissions.includes(id));
+};

src/pages/Expense/ExpensePage.jsx

@@ -32,6 +32,8 @@ import {
   defaultFilter,
   SearchSchema,
 } from "../../components/Expenses/ExpenseSchema";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { CREATE_EXEPENSE } from "../../utils/constants";
 
 const SelectDropdown = ({
   label,
@@ -97,6 +99,7 @@ export const useExpenseContext = () => useContext(ExpenseContext);
 const ExpensePage = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [filters,setFilter] = useState()
+  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
   const dropdownRef = useRef(null);
   const shouldCloseOnOutsideClick = useRef(false);
   const selectedProjectId = useSelector(
@@ -348,7 +351,8 @@ const setDateRange = ({ startDate, endDate }) => {
                 </div>
               </div>
               <div className="col-7 col-sm-8 text-end gap-2">
-                <button
+                {IsCreatedAble && (
+                  <button
                   type="button"
                   data-bs-toggle="tooltip"
                   data-bs-offset="0,8"
@@ -365,6 +369,8 @@ const setDateRange = ({ startDate, endDate }) => {
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
+                )}
+               
               </div>
             </div>
           </div>