From daaebf919de4e643e1fd7b5645adc5f7b59604a4 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Wed, 5 Nov 2025 15:17:07 +0530
Subject: [PATCH] added New Expense after Payment Request done

---
 src/components/Expenses/ExpenseList.jsx       |   2 +-
 src/components/Expenses/ExpenseStatusLogs.jsx |   7 +-
 src/components/Expenses/Filelist.jsx          |  36 +--
 src/components/Expenses/ManageExpense.jsx     |  29 --
 src/components/Expenses/ViewExpense.jsx       | 129 ++++++++-
 src/components/PaymentRequest/MakeExpense.jsx | 247 ++++++++++++++++++
 .../PaymentRequest/PaymentRequestList.jsx     |   2 +-
 .../PaymentRequest/PaymentRequestSchema.js    |  37 ++-
 .../PaymentRequest/PaymentStatusLogs.jsx      |   1 +
 .../PaymentRequest/ViewPaymentRequest.jsx     |  20 +-
 src/hooks/useExpense.js                       |  26 +-
 .../PaymentRequest/PaymentRequestPage.jsx     |  16 +-
 src/repositories/ExpsenseRepository.jsx       |   1 +
 13 files changed, 488 insertions(+), 65 deletions(-)
 create mode 100644 src/components/PaymentRequest/MakeExpense.jsx

diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index a56d340b..474fa374 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -298,7 +298,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                               )
                           )}
                           <td className="sticky-action-column bg-white">
-                            <div className="d-flex justify-content-center gap-2">
+                            <div className="d-flex flex-row gap-2">
                               <i
                                 className="bx bx-show text-primary cursor-pointer"
                                 onClick={() =>
diff --git a/src/components/Expenses/ExpenseStatusLogs.jsx b/src/components/Expenses/ExpenseStatusLogs.jsx
index 83ee2e3a..82ce8593 100644
--- a/src/components/Expenses/ExpenseStatusLogs.jsx
+++ b/src/components/Expenses/ExpenseStatusLogs.jsx
@@ -10,7 +10,7 @@ const ExpenseStatusLogs = ({ data }) => {
   const sortedLogs = useMemo(() => {
     if (!data?.expenseLogs) return [];
     return [...data.expenseLogs].sort(
-      (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
+      (a, b) => new Date(b.updateAt) - new Date(a.updateAt)
     );
   }, [data?.expenseLogs]);
 
@@ -20,11 +20,12 @@ const ExpenseStatusLogs = ({ data }) => {
   );
 
   const timelineData = useMemo(() => {
+   
     return logsToShow.map((log, index) => ({
       id: index + 1,
       title: log.action || "Status Updated",
       description: log.comment || "",
-      timeAgo: log.updatedAt,
+      timeAgo: log.updateAt,
       color: getColorNameFromHex(log.nextStatus?.color) || "primary",
       users: log.updatedBy
         ? [
@@ -44,7 +45,7 @@ const ExpenseStatusLogs = ({ data }) => {
   };
 
   return (
-    <div className="page-min-h overflow-auto">
+    <div className="page-min-h overflow-auto py-1">
      
 
       <Timeline items={timelineData} />
diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx
index 208a596b..51e2f9f3 100644
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@@ -13,17 +13,19 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
           return true;
         })
         .map((file, idx) => (
-          <div className="col-12 col-sm-6 col-md-4  bg-white  " key={idx}>
-            <div className="row align-items-center">
+          <div className="col-12 col-sm-6 col-md-4 mb-2" key={idx}>
+            <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1 ">
               {/* File icon and info */}
-              <div className="col-10 d-flex align-items-center gap-2">
+              <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
                 <i
-                  className={`bx ${getIconByFileType(file?.contentType)} fs-3`}
+                  className={`bx ${getIconByFileType(
+                    file?.contentType
+                  )} fs-3 text-primary`}
                   style={{ minWidth: "30px" }}
                 ></i>
 
                 <div className="d-flex flex-column text-truncate">
-                  <span className="fw-medium small text-truncate">
+                  <span className="fw-semibold small text-truncate">
                     {file.fileName}
                   </span>
                   <span className="text-body-secondary small">
@@ -32,19 +34,17 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
                 </div>
               </div>
 
-              <div className="col-2 text-end">
-                <Tooltip text={"Remove file"}>
-                  <i
-                    className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
-                    role="button"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      debugger;
-                      removeFile(expenseToEdit ? file.documentId : idx);
-                    }}
-                  ></i>
-                </Tooltip>
-              </div>
+              {/* Delete icon */}
+              <Tooltip text="Remove file">
+                <i
+                  className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
+                  role="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    removeFile(expenseToEdit ? file.documentId : idx);
+                  }}
+                ></i>
+              </Tooltip>
             </div>
           </div>
         ))}
diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 4ee1679c..539497ca 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -298,35 +298,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
-
-          {/* <div className="col-md-6">
-            <Label htmlFor="paidById" className="form-label" required>
-              Paid By
-            </Label>
-            <select
-              className="form-select form-select-sm"
-              id="paymentModeId"
-              {...register("paidById")}
-              disabled={!selectedproject}
-            >
-              <option value="" disabled>
-                Select Person
-              </option>
-              {EmpLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                employees?.map((emp) => (
-                  <option key={emp.id} value={emp.id}>
-                    {`${emp.firstName} ${emp.lastName} `}
-                  </option>
-                ))
-              )}
-            </select>
-            {errors.paidById && (
-              <small className="danger-text">{errors.paidById.message}</small>
-            )}
-          </div> */}
-
           <div className="col-12 col-md-6 text-start">
             <label className="form-label">Paid By </label>
             <EmployeeSearchInput
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index e1b87cbb..51138bb3 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -11,6 +11,7 @@ import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   getIconByFileType,
   localToUtc,
@@ -166,7 +167,7 @@ const ViewExpense = ({ ExpenseId }) => {
             <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
               Amount :
             </label>
-            <div className="text-muted"> {formatCurrency(data.amount,data?.curency?.currencyCode)}</div>
+            <div className="text-muted">  {formatFigure(data?.amount,{type:"currency",currency : data?.currency?.currencyCode ?? "INR"} )}</div>
           </div>
         </div>
 
@@ -294,12 +295,134 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        {/* ... your remaining conditional sections */}
+      {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?.transactionDate}
+                  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 && !IsRejectedExpense) ||
+              (IsRejectedExpense && 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 &&
+              (!IsRejectedExpense || 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>
+        </>
+      )}
       </div>
     </div>
 
     <div className="col-12 col-lg-5 col-xl-4">
-      <div className="d-flex align-items-center text-secondary my-2">
+      <div className="d-flex align-items-center text-secondary mb-">
        <i className='bx bx-time-five me-2'></i> <p className=" m-0">TimeLine</p>
       </div>
       <ExpenseStatusLogs data={data} />
diff --git a/src/components/PaymentRequest/MakeExpense.jsx b/src/components/PaymentRequest/MakeExpense.jsx
new file mode 100644
index 00000000..c4264fa4
--- /dev/null
+++ b/src/components/PaymentRequest/MakeExpense.jsx
@@ -0,0 +1,247 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  DefaultRequestedExpense,
+  RequestedExpenseSchema,
+} from "./PaymentRequestSchema";
+import Label from "../common/Label";
+import { usePaymentMode } from "../../hooks/masterHook/useMaster";
+import { useCreatePaymentRequestExpense, useCreateRecurringExpense } from "../../hooks/useExpense";
+import Filelist from "../Expenses/Filelist";
+import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
+
+const MakeExpense = ({ onClose }) => {
+    const {isExpenseGenerate} = usePaymentRequestContext()
+  const {
+    PaymentModes,
+    loading: PaymentModeLoading,
+    error: PaymentModeError,
+  } = usePaymentMode();
+
+  const {
+    setValue,
+    register,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(RequestedExpenseSchema),
+    defaultValues: DefaultRequestedExpense,
+  });
+  const files = watch("billAttachments");
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
+
+    const existingFiles = watch("billAttachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+          isActive: true,
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("billAttachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const removeFile = (index) => {
+   debugger
+    const newFiles = files.filter((_, i) => i !== index);
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+  };
+
+  const { mutate: CreatedExpense, isPending } = useCreatePaymentRequestExpense(
+    () => {
+      handleClose();
+    }
+  );
+  const onSubmit = (formData) => {
+    let payload = {
+        ...formData,
+        paymentRequestId:isExpenseGenerate?.requestId
+    }
+    CreatedExpense(payload)
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+  return (
+    <div className="row px-2 py-3">
+      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
+           <h5 className="m-0">
+         Create New Expense
+      </h5>
+
+        <div className="row my-2 text-start">
+          <div className="col-md-6 mb-2">
+            <Label htmlFor="paymentModeId" className="form-label" required>
+              Payment Mode
+            </Label>
+            <select
+              className="form-select form-select-sm"
+              id="paymentModeId"
+              {...register("paymentModeId")}
+            >
+              <option value="" disabled>
+                Select Mode
+              </option>
+              {PaymentModeLoading ? (
+                <option disabled>Loading...</option>
+              ) : (
+                PaymentModes?.map((payment) => (
+                  <option key={payment.id} value={payment.id}>
+                    {payment.name}
+                  </option>
+                ))
+              )}
+            </select>
+            {errors.paymentModeId && (
+              <small className="danger-text">
+                {errors.paymentModeId.message}
+              </small>
+            )}
+          </div>
+           <div className="col-md-6">
+            <label htmlFor="statusId" className="form-label ">
+              GST Number
+            </label>
+            <input
+              type="text"
+              id="gstNumber"
+              className="form-control form-control-sm"
+              min="1"
+              {...register("gstNumber")}
+            />
+            {errors.gstNumber && (
+              <small className="danger-text">{errors.gstNumber.message}</small>
+            )}
+          </div>
+        </div>
+           <div className="col-md-6 text-start">
+            <Label htmlFor="location" className="form-label" required>
+              Location
+            </Label>
+            <input
+              type="text"
+              id="location"
+              className="form-control form-control-sm"
+              {...register("location")}
+            />
+            {errors.location && (
+              <small className="danger-text">{errors.location.message}</small>
+            )}
+          </div>
+
+
+        <div className="row my-2 text-start">
+          <div className="col-md-12">
+            <Label className="form-label" required>
+              Upload Bill{" "}
+            </Label>
+
+            <div
+              className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+              style={{ cursor: "pointer" }}
+              onClick={() => document.getElementById("billAttachments").click()}
+            >
+              <i className="bx bx-cloud-upload d-block bx-lg"> </i>
+              <span className="text-muted d-block">
+                Click to select or click here to browse
+              </span>
+              <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
+
+              <input
+                type="file"
+                id="billAttachments"
+                accept=".pdf,.jpg,.jpeg,.png"
+                multiple
+                style={{ display: "none" }}
+                {...register("billAttachments")}
+                onChange={(e) => {
+                  onFileChange(e);
+                  e.target.value = "";
+                }}
+              />
+            </div>
+            {errors.billAttachments && (
+              <small className="danger-text">
+                {errors.billAttachments.message}
+              </small>
+            )}
+            {files.length > 0 && (
+              <Filelist
+                files={files}
+                removeFile={removeFile}
+                expenseToEdit={false}
+              />
+            )}
+
+            {Array.isArray(errors.billAttachments) &&
+              errors.billAttachments.map((fileError, index) => (
+                <div key={index} className="danger-text small mt-1">
+                  {
+                    (fileError?.fileSize?.message ||
+                      fileError?.contentType?.message ||
+                      fileError?.base64Data?.message,
+                    fileError?.documentId?.message)
+                  }
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <div className="d-flex justify-content-end gap-3">
+          {" "}
+          <button
+            type="reset"
+            disabled={isPending}
+            onClick={handleClose}
+            className="btn btn-label-secondary btn-sm mt-3"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-primary btn-sm mt-3"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : "Submit"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default MakeExpense;
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index 3e8152d5..84965427 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -279,7 +279,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                             )
                         )}
                         <td className="sticky-action-column bg-white">
-                          <div className="d-flex justify-content-center gap-2">
+                          <div className="d-flex flex-row gap-2">
                             <i
                               className="bx bx-show text-primary cursor-pointer"
                               onClick={() =>
diff --git a/src/components/PaymentRequest/PaymentRequestSchema.js b/src/components/PaymentRequest/PaymentRequestSchema.js
index 018b092f..7e2289fe 100644
--- a/src/components/PaymentRequest/PaymentRequestSchema.js
+++ b/src/components/PaymentRequest/PaymentRequestSchema.js
@@ -125,8 +125,43 @@ export const PaymentRequestActionScheam = (
 export const defaultPaymentRequestActionValues = {
   comment: "",
   statusId: "",
-
   paidTransactionId: null,
   paidAt: null,
   paidById: null,
 };
+
+
+export const RequestedExpenseSchema = 
+
+    z.object({
+      paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
+      location: z.string().min(1, { message: "Location is required" }),
+      gstNumber: z.string().optional(),
+      billAttachments: z
+        .array(
+          z.object({
+            fileName: z.string().min(1, { message: "Filename is required" }),
+            base64Data: z.string().nullable(),
+            contentType: z
+              .string()
+              .refine((val) => ALLOWED_TYPES.includes(val), {
+                message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+              }),
+            documentId: z.string().optional(),
+            fileSize: z.number().max(MAX_FILE_SIZE, {
+              message: "File size must be less than or equal to 5MB",
+            }),
+            description: z.string().optional(),
+            isActive: z.boolean().default(true),
+          })
+        )
+        .nonempty({ message: "At least one file attachment is required" }),
+    })
+
+export const DefaultRequestedExpense = {
+  paymentModeId:"",
+  location:"",
+  gstNumber:"",
+  // amount:"",
+  billAttachments:[]
+}
\ No newline at end of file
diff --git a/src/components/PaymentRequest/PaymentStatusLogs.jsx b/src/components/PaymentRequest/PaymentStatusLogs.jsx
index 9abb3fa5..1793d90e 100644
--- a/src/components/PaymentRequest/PaymentStatusLogs.jsx
+++ b/src/components/PaymentRequest/PaymentStatusLogs.jsx
@@ -20,6 +20,7 @@ const PaymentStatusLogs = ({ data }) => {
   );
 
   const timelineData = useMemo(() => {
+    console.log(logsToShow)
     return logsToShow.map((log, index) => ({
       id: index + 1,
       title: log.nextStatus?.name || "Status Updated",
diff --git a/src/components/PaymentRequest/ViewPaymentRequest.jsx b/src/components/PaymentRequest/ViewPaymentRequest.jsx
index 0d7d280b..db8ac2e0 100644
--- a/src/components/PaymentRequest/ViewPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ViewPaymentRequest.jsx
@@ -50,7 +50,7 @@ const ViewPaymentRequest = ({ requestId }) => {
 
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
-  const { setDocumentView, setModalSize } = usePaymentRequestContext();
+  const { setDocumentView, setModalSize,setVieRequest ,setIsExpenseGenerate} = usePaymentRequestContext();
   const ActionSchema =
     PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
     z.object({});
@@ -118,9 +118,14 @@ const ViewPaymentRequest = ({ requestId }) => {
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
+  const handleExpense = ()=>{
+   
+    setIsExpenseGenerate({IsOpen:true,requestId:requestId})
+     setVieRequest({IsOpen:true,requestId:requestId})
+  }
 
   return (
-    <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
+    <form className="container px-3 py-2 py-md-0" onSubmit={handleSubmit(onSubmit)}>
       <div className="col-12 mb-2 text-center ">
         <h5 className="fw-semibold m-0">Payment Request Details</h5>
       </div>
@@ -350,7 +355,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </div>
             )}
 
-            {Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 && (
+            {Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 ? (
               <>
                 {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
                   <div className="row">
@@ -436,11 +441,14 @@ const ViewPaymentRequest = ({ requestId }) => {
                     )}
                 </div>
               </>
-            )}
+            ):(<div className="text-end flex-wrap gap-2 my-2 mt-3">
+              <button className="btn btn-sm btn-primary" onClick={handleExpense}>Make Expense</button>
+            </div>)}
+            
           </div>
         </div>
-        <div className=" col-sm-12 my-2 my-md-0 border-top border-md-none col-md-5">
-          <div className="d-flex mb-2">
+        <div className=" col-sm-12  my-md-0 border-top border-md-none col-md-5">
+          <div className="d-flex mb-2 py-1">
             <i className="bx bx-time-five me-2 "></i>{" "}
             <p className="fw-medium">TimeLine</p>
           </div>
diff --git a/src/hooks/useExpense.js b/src/hooks/useExpense.js
index 181d9551..9823095f 100644
--- a/src/hooks/useExpense.js
+++ b/src/hooks/useExpense.js
@@ -395,8 +395,27 @@ export const useDeletePaymentRequest = ()=>{
     },
   });
 }
-//#endregion
-
+export const useCreatePaymentRequestExpense = (onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) => {
+      await ExpenseRepository.CreatePaymentRequestExpense(payload);
+    },
+    
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] });
+      queryClient.invalidateQueries({queryKey:["paymentRequest",variables.paymentRequestId]})
+      showToast("Expense Created Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.message || "Something went wrong please try again !",
+        "error"
+      );
+    },
+  });
+};
 export const usePaymentRequestFilter = () => {
   return useQuery({
     queryKey: ["PaymentRequestFilter"],
@@ -408,6 +427,9 @@ export const usePaymentRequestFilter = () => {
       
   });
 };
+//#endregion
+
+
 
 //#region Advance Payment
 export const useExpenseTransactions = (employeeId)=>{
diff --git a/src/pages/PaymentRequest/PaymentRequestPage.jsx b/src/pages/PaymentRequest/PaymentRequestPage.jsx
index 452033e6..e2f3cdf1 100644
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/src/pages/PaymentRequest/PaymentRequestPage.jsx
@@ -9,6 +9,7 @@ import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRe
 import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
 import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import MakeExpense from "../../components/PaymentRequest/MakeExpense";
 
 export const PaymentRequestContext = createContext();
 export const usePaymentRequestContext = () => {
@@ -30,6 +31,8 @@ const PaymentRequestPage = () => {
       IsOpen: false,
       Image: null,
     });
+    const [isExpenseGenerate,setIsExpenseGenerate] = useState({IsOpen: null,
+    RequestId: null,})
     const [modalSize,setModalSize] = useState("md")
   const [search, setSearch] = useState("");
 
@@ -37,7 +40,9 @@ const PaymentRequestPage = () => {
     setManageRequest,
     setVieRequest,
     setDocumentView,
-    setModalSize
+    setModalSize,
+    setIsExpenseGenerate,
+    isExpenseGenerate
   };
 
   useEffect(() => {
@@ -134,6 +139,15 @@ const PaymentRequestPage = () => {
             <ViewPaymentRequest  requestId={ViewRequest?.requestId} />
           </GlobalModel>
         )}
+         {isExpenseGenerate.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
+          >
+            <MakeExpense   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
+          </GlobalModel>
+        )}
 
         {ViewDocument.IsOpen && (
           <GlobalModel
diff --git a/src/repositories/ExpsenseRepository.jsx b/src/repositories/ExpsenseRepository.jsx
index 5d8dfc59..231d8b78 100644
--- a/src/repositories/ExpsenseRepository.jsx
+++ b/src/repositories/ExpsenseRepository.jsx
@@ -41,6 +41,7 @@ const ExpenseRepository = {
   ActionOnPaymentRequest: (data) =>
     api.post("/api/Expense/payment-request/action", data),
   DeletePaymentRequest:()=>api.get("delete here come"),
+  CreatePaymentRequestExpense:(data)=>api.post('/api/Expense/payment-request/expense/create',data),
   //#endregion
 
   //#region Recurring Expense