added viewer for pdf type document

src/components/Expenses/ViewExpense.jsx

@@ -1,5 +1,9 @@
 import React, { useState, useMemo } from "react";
-import { useActionOnExpense, useExpense, useHasAnyPermission } from "../../hooks/useExpense";
+import {
+  useActionOnExpense,
+  useExpense,
+  useHasAnyPermission,
+} from "../../hooks/useExpense";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -11,12 +15,14 @@ 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,
@@ -30,27 +36,24 @@ const ViewExpense = ({ ExpenseId }) => {
       selectedStatus: "",
     },
   });
- 
-const userPermissions = useSelector(
-  (state) => state?.globalVariables?.loginUser?.featurePermissions || []
-);
 
+  const userPermissions = useSelector(
+    (state) => state?.globalVariables?.loginUser?.featurePermissions || []
+  );
 
-const nextStatusWithPermission = useMemo(() => {
-  if (!Array.isArray(data?.nextStatus)) return [];
+  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]);
+    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());
 
@@ -253,41 +256,40 @@ const nextStatusWithPermission = useMemo(() => {
 
       <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>
+      {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>
-    )}
+          <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>
-)}
+          <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>
+      )}
     </form>
   );
 };