Merge branch 'Feature_Expense' of https://git.marcoaiot.com/admin/marco.pms.web into Feature_Expense

src/components/Expenses/ViewExpense.jsx

@@ -1,5 +1,9 @@
-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,11 +11,18 @@ 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";
+import { useNavigate } from "react-router-dom";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
+  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
+  const navigate = useNavigate();
   const {
     register,
     handleSubmit,
@@ -26,6 +37,24 @@ const ViewExpense = ({ ExpenseId }) => {
     },
   });
 
+  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());
 
   const onSubmit = (formData) => {
@@ -178,7 +207,7 @@ const ViewExpense = ({ ExpenseId }) => {
             if (type.includes("zip") || type.includes("rar"))
               return "bxs-file-archive";
 
-            return "bx bx-file";
+            return "bx bx-file"; // Default
           };
 
           const isImage = doc.contentType?.includes("image");
@@ -216,7 +245,6 @@ const ViewExpense = ({ ExpenseId }) => {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="bx bx-cloud-download cursor-pointer"
-                    title="View PDF"
                   />
                 </div>
               </div>
@@ -227,9 +255,10 @@ const ViewExpense = ({ ExpenseId }) => {
 
       <hr className="divider my-1" />
 
-      {Array.isArray(data.nextStatus) && data.nextStatus.length > 0 && (
+      {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")}
@@ -241,21 +270,23 @@ const ViewExpense = ({ ExpenseId }) => {
 
           <input type="hidden" {...register("selectedStatus")} />
 
-          <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>
+          {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>
       )}
     </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,
@@ -103,6 +105,7 @@ export const useExpenseContext = () => {
 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(
@@ -354,7 +357,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"
@@ -371,6 +375,8 @@ const setDateRange = ({ startDate, endDate }) => {
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
+                )}
+               
               </div>
             </div>
           </div>