handle action when expense rejected

src/components/Expenses/ViewExpense.jsx

@@ -12,7 +12,7 @@ import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { PROCESS_EXPENSE, REVIEW_EXPENSE } from "../../utils/constants";
+import { EXPENSE_REJECTEDBY, PROCESS_EXPENSE, REVIEW_EXPENSE } from "../../utils/constants";
 import { useProfile } from "../../hooks/useProfile";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
@@ -49,6 +49,9 @@ const ViewExpense = ({ ExpenseId }) => {
   const userPermissions = useSelector(
     (state) => state?.globalVariables?.loginUser?.featurePermissions || []
   );
+  const CurrentUser = useSelector(
+    (state) => state?.globalVariables?.loginUser?.employeeInfo
+  );
 
   const nextStatusWithPermission = useMemo(() => {
     if (!Array.isArray(data?.nextStatus)) return [];
@@ -66,6 +69,14 @@ const ViewExpense = ({ ExpenseId }) => {
     });
   }, [data, userPermissions]);
 
+  const IsRejectedExpense = useMemo(()=>{
+    return EXPENSE_REJECTEDBY.includes(data?.status?.id)
+  },[data])
+
+  const isCreatedBy = useMemo(() => {
+  return data?.createdBy.id === CurrentUser?.id;
+}, [data, CurrentUser]);
+
   const { mutate: MakeAction,isPending } = useActionOnExpense(() => {
     setClickedStatusId(null);
     reset()});
@@ -184,7 +195,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 getColorNameFromHex(data?.status?.color) || "secondary"
               }`}
             >
-              {data?.status?.displayName}
+              {data?.status?.name}
             </span>
           </div>
         </div>
@@ -466,43 +477,49 @@ const ViewExpense = ({ ExpenseId }) => {
               </div>
             </div>
           )}
-          <div className="col-12 mb-3 text-start">
-            {nextStatusWithPermission.length > 0 && (
-              <>
-                <label className="form-label me-2 mb-0 ">Comment:</label>
-                <textarea
-                  className="form-control form-control-sm"
-                  {...register("comment")}
-                  rows="2"
-                />
-                {errors.comment && (
-                  <small className="danger-text">
-                    {errors.comment.message}
-                  </small>
-                )}
-              </>
-            )}
+        <div className="col-12 mb-3 text-start">
+  {(
+    (nextStatusWithPermission.length > 0 && !IsRejectedExpense) || 
+    (IsRejectedExpense && isCreatedBy)
+  ) && (
+    <>
+      <label className="form-label me-2 mb-0">Comment:</label>
+      <textarea
+        className="form-control form-control-sm"
+        {...register("comment")}
+        rows="2"
+      />
+      {errors.comment && (
+        <small className="danger-text">
+          {errors.comment.message}
+        </small>
+      )}
+    </>
+  )}
+
+  {(nextStatusWithPermission?.length > 0 && (!IsRejectedExpense || isCreatedBy)) && (
+    <div className="text-center flex-wrap gap-2 my-2">
+      {nextStatusWithPermission.map((status, index) => (
+        <button
+          key={status.id || index}
+          type="button"
+          onClick={() => {
+            setClickedStatusId(status.id);
+            setValue("statusId", status.id);
+            handleSubmit(onSubmit)();
+          }}
+          disabled={isPending}
+          className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+        >
+          {isPending && clickedStatusId === status.id
+            ? "Please Wait..."
+            : status.displayName || status.name}
+        </button>
+      ))}
+    </div>
+  )}
+</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={() => {
-                      setClickedStatusId(status.id);
-                      setValue("statusId", status.id);
-                      handleSubmit(onSubmit)();
-                    }}
-                    disabled={isPending}
-                    className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-                  >
-                      {(isPending && clickedStatusId === status.id) ? "Please Wait..." : (status.displayName || status.name)}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
         </>
       )}
     </form>

src/utils/constants.jsx

@@ -56,7 +56,9 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11"
 
 export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11"
 
+export const EXPENSE_REJECTEDBY = ["d1ee5eec-24b6-4364-8673-a8f859c60729","965eda62-7907-4963-b4a1-657fb0b2724b"]
 
+export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c"
 // -------------------Application Role------------------------------
 
 // 1 - Expense Manage