added view Paymen request

src/components/PaymentRequest/PaymentRequestSchema.js

@@ -20,7 +20,7 @@ export const PaymentRequestSchema = (expenseTypes) => {
       dueDate: z.string().min(1, { message: "Date is required" }),
       description: z.string().min(1, { message: "Description is required" }),
       payee: z.string().min(1, { message: "Supplier name is required" }),
-      isAdvancePayment: z.boolean(),
+      isAdvancePayment: z.boolean().optional(),
       amount: z.coerce
         .number({
           invalid_type_error: "Amount is required and must be a number",

src/components/PaymentRequest/VewPaymentRequest.jsx

@@ -0,0 +1,452 @@
+import { useMemo } from "react";
+import { useActionOnExpense, usePaymentRequestDetail } from "../../hooks/useExpense";
+import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Avatar from "../common/Avatar";
+import DatePicker from "../common/DatePicker";
+import EmployeeSearchInput from "../common/EmployeeSearchInput";
+import Error from "../common/Error";
+import { defaultActionValues, ExpenseActionScheam } from "../Expenses/ExpenseSchema";
+import { ExpenseDetailsSkeleton } from "../Expenses/ExpenseSkeleton";
+import ExpenseStatusLogs from "../Expenses/ExpenseStatusLogs";
+import { useSelector } from "react-redux";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
+
+const ViewPaymentRequest = ({ RequestId }) => {
+  const { data, isLoading, isError, error, isFetching } = usePaymentRequestDetail(RequestId);
+  const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
+  const [clickedStatusId, setClickedStatusId] = useState(null);
+
+  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
+  const [imageLoaded, setImageLoaded] = useState({});
+  const { setDocumentView } = usePaymentRequestContext();
+  const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
+  const navigate = useNavigate();
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ActionSchema),
+    defaultValues: defaultActionValues,
+  });
+
+  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 [];
+
+    return data.nextStatus.filter((status) => {
+      const permissionIds = Array.isArray(status?.permissionIds)
+        ? status.permissionIds
+        : [];
+
+      if (permissionIds.length === 0) return true;
+      if (permissionIds.includes(PROCESS_EXPENSE)) {
+        setIsPaymentProcess(true);
+      }
+      return permissionIds.some((id) => userPermissions.includes(id));
+    });
+  }, [data, userPermissions]);
+
+  const isRejectedRequest = 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();
+  });
+
+  const onSubmit = (formData) => {
+    const Payload = {
+      ...formData,
+      reimburseDate:localToUtc(formData.reimburseDate),
+      expenseId: ExpenseId,
+      comment: formData.comment,
+    };
+    MakeAction(Payload);
+  };
+
+  if (isLoading) return <ExpenseDetailsSkeleton />;
+  if (isError) return <Error error={error} />;
+  const handleImageLoad = (id) => {
+    setImageLoaded((prev) => ({ ...prev, [id]: true }));
+  };
+
+  return (
+    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
+      <div className="row mb-1">
+        <div className="col-12 mb-1">
+          <h5 className="fw-semibold m-0">Expense Details</h5>
+          <hr />
+        </div>
+         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
+        {/* Row 1 */}
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Transaction Date :
+            </label>
+            <div className="text-muted">
+              {formatUTCToLocalTime(data?.transactionDate)}
+            </div>
+          </div>
+        </div>
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Expense Type :
+            </label>
+            <div className="text-muted">{data?.expensesType?.name}</div>
+          </div>
+        </div>
+
+        {/* Row 2 */}
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Supplier :
+            </label>
+            <div className="text-muted">{data?.supplerName}</div>
+          </div>
+        </div>
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Amount :
+            </label>
+            <div className="text-muted">₹ {data.amount}</div>
+          </div>
+        </div>
+
+        {/* Row 3 */}
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Payment Mode :
+            </label>
+            <div className="text-muted">{data?.paymentMode?.name}</div>
+          </div>
+        </div>
+        {data?.gstNumber && (
+          <div className="col-md-6 mb-3">
+            <div className="d-flex">
+              <label
+                className="form-label me-2 mb-0 fw-semibold text-start"
+                style={{ minWidth: "130px" }}
+              >
+                GST Number :
+              </label>
+              <div className="text-muted">{data?.gstNumber}</div>
+            </div>
+          </div>
+        )}
+
+        {/* Row 4 */}
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Status :
+            </label>
+            <span
+              className={`badge bg-label-${
+                getColorNameFromHex(data?.status?.color) || "secondary"
+              }`}
+            >
+              {data?.status?.name}
+            </span>
+          </div>
+        </div>
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Pre-Approved :
+            </label>
+            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
+          </div>
+        </div>
+
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Project :
+            </label>
+            <div className="text-muted">{data?.project?.name}</div>
+          </div>
+        </div>
+        <div className="col-md-6 mb-3">
+          <div className="d-flex">
+            <label
+              className="form-label me-2 mb-0 fw-semibold text-start"
+              style={{ minWidth: "130px" }}
+            >
+              Created At :
+            </label>
+            <div className="text-muted">
+              {formatUTCToLocalTime(data?.createdAt, true)}
+            </div>
+          </div>
+        </div>
+
+        {/* Row 6 */}
+        {data.createdBy && (
+          <div className="col-md-6 text-start">
+            <div className="d-flex align-items-center">
+              <label
+                className="form-label me-2 mb-0 fw-semibold"
+                style={{ minWidth: "130px" }}
+              >
+                Created By :
+              </label>
+              <div className="d-flex align-items-center">
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0"
+                  firstName={data.createdBy?.firstName}
+                  lastName={data.createdBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data.createdBy?.firstName ?? ""} ${
+                    data.createdBy?.lastName ?? ""
+                  }`.trim() || "N/A"}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="col-md-6 text-start">
+          <div className="d-flex align-items-center">
+            <label
+              className="form-label me-2 mb-0 fw-semibold"
+              style={{ minWidth: "130px" }}
+            >
+              Paid By :
+            </label>
+            <div className="d-flex align-items-center ">
+              <Avatar
+                size="xs"
+                classAvatar="m-0"
+                firstName={data.paidBy?.firstName}
+                lastName={data.paidBy?.lastName}
+              />
+              <span className="text-muted">
+                {`${data.paidBy?.firstName ?? ""} ${
+                  data.paidBy?.lastName ?? ""
+                }`.trim() || "N/A"}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+          <div className="text-start my-1">
+            <label className="fw-semibold form-label">Description : </label>
+          <div className="text-muted">{data?.description}</div>
+        </div>
+      </div>
+
+      <div className="col-12 text-start">
+        <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
+
+        <div className="d-flex flex-wrap gap-2">
+          {data?.documents?.map((doc) => {
+            const isImage = doc.contentType?.includes("image");
+
+            return (
+              <div
+                key={doc.documentId}
+                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                style={{
+                  width: "80px",
+                  cursor: isImage ? "pointer" : "default",
+                }}
+                onClick={() => {
+                  if (isImage) {
+                    setDocumentView({
+                      IsOpen: true,
+                      Image: doc.preSignedUrl,
+                    });
+                  }
+                }}
+              >
+                <i
+                  className={`bx ${getIconByFileType(doc.contentType)}`}
+                  style={{ fontSize: "30px" }}
+                ></i>
+                <small
+                  className="text-center text-tiny text-truncate w-100"
+                  title={doc.fileName}
+                >
+                  {doc.fileName}
+                </small>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {data.expensesReimburse && (
+        <div className="row text-start mt-2">
+          <div className="col-md-6 mb-sm-0 mb-2">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Transaction ID :
+            </label>
+            {data.expensesReimburse.reimburseTransactionId || "N/A"}
+          </div>
+          <div className="col-md-6 ">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Reimburse Date :
+            </label>
+            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
+          </div>
+
+          {data.expensesReimburse && (
+            <>
+              <div className="col-md-6  d-flex align-items-center">
+                <label className="form-label me-2 mb-0 fw-semibold">
+                  Reimburse By :
+                </label>
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0 me-1"
+                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
+                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
+                </span>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      <hr className="divider my-1 border-2 divider-primary my-2" />
+
+      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+        <>
+          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
+            <div className="row">
+              <div className="col-12 col-md-6 text-start">
+                <label className="form-label">Transaction Id </label>
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  {...register("reimburseTransactionId")}
+                />
+                {errors.reimburseTransactionId && (
+                  <small className="danger-text">
+                    {errors.reimburseTransactionId.message}
+                  </small>
+                )}
+              </div>
+              <div className="col-12 col-md-6 text-start">
+                <label className="form-label">Transaction Date </label>
+                <DatePicker
+                  name="reimburseDate"
+                  control={control}
+                  minDate={data?.createdAt}
+                  maxDate={new Date()}
+                />
+                {errors.reimburseDate && (
+                  <small className="danger-text">
+                    {errors.reimburseDate.message}
+                  </small>
+                )}
+              </div>
+              <div className="col-12 col-md-6 text-start">
+                <label className="form-label">Reimburse By </label>
+                <EmployeeSearchInput
+                  control={control}
+                  name="reimburseById"
+                  projectId={null}                
+                />
+              </div>
+            </div>
+          )}
+          <div className="col-12 mb-3 text-start">
+            {((nextStatusWithPermission.length > 0 && !isRejectedRequest) ||
+              (isRejectedRequest && isCreatedBy)) && (
+              <>
+                <Label className="form-label me-2 mb-0" required>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 &&
+              (!isRejectedRequest || isCreatedBy) && (
+                <div className="text-end flex-wrap gap-2 my-2 mt-3">
+                  {nextStatusWithPermission.map((status, index) => (
+                    <button
+                      key={status.id || index}
+                      type="button"
+                      onClick={() => {
+                      setClickedStatusId(status.id);
+                        setValue("statusId", status.id);
+                        handleSubmit(onSubmit)();
+                      }}
+                      disabled={isPending || isFetching}
+                      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>
+        </>
+      )}
+
+      <ExpenseStatusLogs data={data} />
+    </form>
+  );
+};

src/hooks/masterHook/useMaster.js

@@ -158,7 +158,7 @@ export const useExpenseCategory = () => {
   } = useQuery({
     queryKey: ["Expense Category"],
     queryFn: async () => {
-      const res = await MasterRespository.getExpenseCategory
+      const res = await MasterRespository.getExpenseCategory()
       return res.data;
     },
     onError: (error) => {

src/hooks/useExpense.js

@@ -273,7 +273,7 @@ export const usePaymentRequestList = (
   searchString = "",
 ) => {
   return useQuery({
-    queryKey: ["PaymentRequest",pageSize,pageNumber,filter,isActive,searchString],
+    queryKey: ["paymentRequest",pageSize,pageNumber,filter,isActive,searchString],
     queryFn: async()=>{
       const resp = await ExpenseRepository.GetPaymentRequestList(pageSize,pageNumber,filter,isActive,searchString);
       return resp.data;
@@ -321,8 +321,8 @@ export const useUpdatePaymentRequest = (onSuccessCallBack) => {
       return response.data;
     },
     onSuccess: (updatedExpense, variables) => {     
-      queryClient.removeQueries({ queryKey: ["PaymentRequest", variables.id] });
+      queryClient.removeQueries({ queryKey: ["paymentRequest", variables.id] });
-      queryClient.invalidateQueries({ queryKey: ["PaymentRequest"] });
+      queryClient.invalidateQueries({ queryKey: ["paymentRequest"] });
       showToast("PaymentRequest updated Successfully", "success");
 
       if (onSuccessCallBack) onSuccessCallBack();

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -19,6 +19,7 @@ const PaymentRequestPage = () => {
     IsOpen: null,
     RequestId: null,
   });
+  const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
   const { setOffcanvasContent, setShowTrigger } = useFab();
 
   const [search, setSearch] = useState("");
@@ -116,6 +117,17 @@ const PaymentRequestPage = () => {
           </GlobalModel>
         )}
         
+        {ViewRequest.view && (
+          <GlobalModel
+            isOpen
+            size="lg"
+            modalType="top"
+            closeModal={() => setViewExpense({ requestId: null, view: false })}
+          >
+            <ViewRequest ExpenseId={ViewRequest.requestId} />
+          </GlobalModel>
+        )}
+        
       </div>
     </PaymentRequestContext.Provider>
   );