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

src/components/Expenses/ExpenseList.jsx

@@ -12,6 +12,7 @@ import {
 } from "../../utils/constants";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   useDebounce,
 } from "../../utils/appUtils";
@@ -166,7 +167,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     {
       key: "amount",
       label: "Amount",
-      getValue: (e) => <>{formatCurrency(e?.amount)}</>,
+      getValue: (e) => <>{formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode ?? "INR"} )}</>,
       isAlwaysVisible: true,
       align: "text-end",
     },
@@ -288,11 +289,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell  ${col.align ?? ""}`}
+                                  className={`d-table-cell ml-2  ${col.align ?? ""}`}
                                 >
-                                  {col.customRender
+                                 <div className="d-flex px-2">{col.customRender
                                     ? col.customRender(expense)
-                                    : col.getValue(expense)}
+                                    : col.getValue(expense)}</div>
                                 </td>
                               )
                           )}
@@ -307,7 +308,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                   })
                                 }
                               ></i>
-                              {canDetetExpense(expense) &&
+                              {
                                 canEditExpense(expense) && (
                                   <div className="dropdown z-2">
                                     <button

src/components/Expenses/ExpenseSchema.js

@@ -13,7 +13,7 @@ export const ExpenseSchema = (expenseTypes) => {
   return z
     .object({
       projectId: z.string().min(1, { message: "Project is required" }),
-      expensesCategoryId: z
+      expenseCategoryId: z
         .string()
         .min(1, { message: "Expense type is required" }),
       paymentModeId: z.string().min(1, { message: "Payment mode is required" }),

src/components/Expenses/ExpenseStatusLogs.jsx

@@ -8,11 +8,11 @@ const ExpenseStatusLogs = ({ data }) => {
   const [visibleCount, setVisibleCount] = useState(4);
 
   const sortedLogs = useMemo(() => {
-    if (!data?.updateLogs) return [];
+    if (!data?.expenseLogs) return [];
-    return [...data.updateLogs].sort(
+    return [...data.expenseLogs].sort(
       (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
     );
-  }, [data?.updateLogs]);
+  }, [data?.expenseLogs]);
 
   const logsToShow = useMemo(
     () => sortedLogs.slice(0, visibleCount),
@@ -22,9 +22,9 @@ const ExpenseStatusLogs = ({ data }) => {
   const timelineData = useMemo(() => {
     return logsToShow.map((log, index) => ({
       id: index + 1,
-      title: log.nextStatus?.name || "Status Updated",
+      title: log.action || "Status Updated",
-      description: log.nextStatus?.description || "",
+      description: log.comment || "",
-      timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
+      timeAgo: log.updatedAt,
       color: getColorNameFromHex(log.nextStatus?.color) || "primary",
       users: log.updatedBy
         ? [
@@ -45,45 +45,7 @@ const ExpenseStatusLogs = ({ data }) => {
 
   return (
     <div className="page-min-h overflow-auto">
-      {/* <div className="row g-2">
-        {logsToShow.map((log) => (
-          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
-            <Avatar
-              size="xs"
-              firstName={log.updatedBy.firstName}
-              lastName={log.updatedBy.lastName}
-            />
      
-            <div className="flex-grow-1">
-              <div className="text-start">
-                <div className="flex">
-                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
-                  <small className="text-secondary text-tiny ms-2">
-                    <em>{log.action}</em>
-                  </small>
-                  <span className="text-tiny text-secondary d-block">
-                    {formatUTCToLocalTime(log.updateAt, true)}
-                  </span>
-                </div>
-                <div className="d-flex align-items-center text-muted small mt-1">
-                  <span>{log.comment}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {sortedLogs.length > visibleCount && (
-        <div className="text-center my-1">
-          <button
-            className="btn btn-xs btn-outline-primary"
-            onClick={handleShowMore}
-          >
-            Show More
-          </button>
-        </div>
-      )} */}
 
       <Timeline items={timelineData} />
     </div>

src/components/Expenses/Filelist.jsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
+import Tooltip from "../common/Tooltip";
 
 const Filelist = ({ files, removeFile, expenseToEdit }) => {
   return (
-    <div className="d-block">
+    <div className="d-flex flex-wrap gap-2 mt-2">
       {files
         .filter((file) => {
           if (expenseToEdit) {
@@ -12,14 +13,12 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
           return true;
         })
         .map((file, idx) => (
-          <div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
+          <div className="col-12 col-sm-6 col-md-4  bg-white  " key={idx}>
             <div className="row align-items-center">
               {/* File icon and info */}
               <div className="col-10 d-flex align-items-center gap-2">
                 <i
-                  className={`bx ${getIconByFileType(
+                  className={`bx ${getIconByFileType(file?.contentType)} fs-3`}
-                    file?.contentType
-                  )} fs-3`}
                   style={{ minWidth: "30px" }}
                 ></i>
 
@@ -34,14 +33,17 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
               </div>
 
               <div className="col-2 text-end">
-                <i
+                <Tooltip text={"Remove file"}>
-                  className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
+                  <i
-                  role="button"
+                    className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
-                  onClick={(e) => {
+                    role="button"
-                    e.preventDefault();
+                    onClick={(e) => {
-                    removeFile(expenseToEdit ? file.documentId : idx);
+                      e.preventDefault();
-                  }}
+                      debugger;
-                ></i>
+                      removeFile(expenseToEdit ? file.documentId : idx);
+                    }}
+                  ></i>
+                </Tooltip>
               </div>
             </div>
           </div>
@@ -51,3 +53,44 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
 };
 
 export default Filelist;
+
+export const FilelistView = ({ files, viewFile }) => {
+  return (
+    <div className="d-flex flex-wrap gap-2 mt-2">
+      {files?.map((file, idx) => (
+        <div className="col-12 col-sm-6 col-md-4  bg-white  " key={idx}>
+          <div className="row align-items-center">
+            {/* File icon and info */}
+            <div className="col-10 d-flex align-items-center gap-2">
+              <i
+                className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
+                style={{ minWidth: "30px" }}
+              ></i>
+
+              <div
+                className="d-flex flex-column text-truncate"
+                onClick={(e) => {
+                  e.preventDefault();
+                  viewFile({
+                    IsOpen: true,
+                    Image: file.preSignedUrl,
+                  });
+                }}
+              >
+                <span className="fw-medium small text-truncate">
+                  {file.fileName}
+                </span>
+                <span className="text-body-secondary small">
+                  <Tooltip text={"Click on file"}>
+                    {" "}
+                    {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                  </Tooltip>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/Expenses/ManageExpense.jsx

@@ -31,6 +31,7 @@ import Label from "../common/Label";
 import EmployeeSearchInput from "../common/EmployeeSearchInput";
 import Filelist from "./Filelist";
 
+
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
     data,
@@ -128,7 +129,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
       reader.onload = () => resolve(reader.result.split(",")[1]);
       reader.onerror = (error) => reject(error);
     });
-  const removeFile = (index) => {
+  const removeFile = (index) => {documentId
     if (expenseToEdit) {
       const newFiles = files.map((file, i) => {
         if (file.documentId !== index) return file;
@@ -148,7 +149,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     if (expenseToEdit && data) {
       reset({
         projectId: data.project.id || "",
-        expensesCategoryId: data.expensesType.id || "",
+        expenseCategoryId: data.expensesCategory?.id || "",
         paymentModeId: data.paymentMode.id || "",
         paidById: data.paidBy.id || "",
         transactionDate: data.transactionDate?.slice(0, 10) || "",
@@ -245,7 +246,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <select
               className="form-select form-select-sm"
               id="expensesCategoryId"
-              {...register("expensesCategoryId")}
+              {...register("expenseCategoryId")}
             >
               <option value="" disabled>
                 Select Type
@@ -480,7 +481,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+      <div className="row my-2 text-start">
           <div className="col-md-12">
             <Label className="form-label" required>
               Upload Bill{" "}

src/components/Expenses/ViewExpense.jsx

@@ -9,7 +9,12 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
+import {
+  formatCurrency,
+  getColorNameFromHex,
+  getIconByFileType,
+  localToUtc,
+} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -38,7 +43,8 @@ const ViewExpense = ({ ExpenseId }) => {
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-  const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
+  const ActionSchema =
+    ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
   const navigate = useNavigate();
   const {
     register,
@@ -91,7 +97,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate:localToUtc(formData.reimburseDate),
+      reimburseDate: localToUtc(formData.reimburseDate),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -106,19 +112,28 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="row mb-1">
+  <div className="col-12 mb-1">
-        <div className="col-12 mb-1">
+    <h5 className="fw-semibold m-0">Expense Details</h5>
-          <h5 className="fw-semibold m-0">Expense Details</h5>
+  </div>
-          <hr />
+
+  <div className="row mb-1 border-top border-2 border-light-subtle">
+    <div className="col-12 col-lg-7 col-xl-8 border-end border-2 border-light-subtle mb-3">
+      <div className="row">
+        <div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
+          <span>{data?.expenseUId}</span>
+           <span
+              className={`badge bg-label-${
+                getColorNameFromHex(data?.status?.color) || "secondary"
+              }`}t
+            >
+              {data?.status?.name}
+            </span>
         </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
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
               Transaction Date :
             </label>
             <div className="text-muted">
@@ -126,12 +141,10 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         </div>
+
         <div className="col-md-6 mb-3">
           <div className="d-flex">
-            <label
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              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>
@@ -141,46 +154,36 @@ const ViewExpense = ({ ExpenseId }) => {
         {/* Row 2 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
-            <label
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              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
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
               Amount :
             </label>
-            <div className="text-muted">₹ {data.amount}</div>
+            <div className="text-muted"> {formatCurrency(data.amount,data.curency.currencyCode)}</div>
           </div>
         </div>
 
         {/* Row 3 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
-            <label
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              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
+              <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-                className="form-label me-2 mb-0 fw-semibold text-start"
-                style={{ minWidth: "130px" }}
-              >
                 GST Number :
               </label>
               <div className="text-muted">{data?.gstNumber}</div>
@@ -188,281 +191,122 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         )}
 
-        {/* Row 4 */}
+     
+
         <div className="col-md-6 mb-3">
           <div className="d-flex">
-            <label
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              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>
 
+        {/* Row 5 */}
         <div className="col-md-6 mb-3">
           <div className="d-flex">
-            <label
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              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
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
               Created At :
             </label>
-            <div className="text-muted">
+            <div className="text-muted">{formatUTCToLocalTime(data?.createdAt, true)}</div>
-              {formatUTCToLocalTime(data?.createdAt, true)}
-            </div>
           </div>
         </div>
 
-        {/* Row 6 */}
+        {/* Created & Paid By */}
         {data.createdBy && (
-          <div className="col-md-6 text-start">
+          <div className="col-md-6 text-start mb-3">
             <div className="d-flex align-items-center">
-              <label
+              <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
-                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"
+                classAvatar="m-0 me-1"
-                firstName={data.paidBy?.firstName}
+                firstName={data.createdBy?.firstName}
-                lastName={data.paidBy?.lastName}
+                lastName={data.createdBy?.lastName}
               />
               <span className="text-muted">
-                {`${data.paidBy?.firstName ?? ""} ${
+                {`${data.createdBy?.firstName ?? ""} ${data.createdBy?.lastName ?? ""}`.trim() || "N/A"}
-                  data.paidBy?.lastName ?? ""
-                }`.trim() || "N/A"}
               </span>
             </div>
           </div>
+        )}
+
+        <div className="col-md-6 text-start mb-3">
+          <div className="d-flex align-items-center">
+            <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
+              Paid By :
+            </label>
+            <Avatar
+              size="xs"
+              classAvatar="m-0 me-1"
+              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 className="text-start my-1">
+        {/* Description */}
-            <label className="fw-semibold form-label">Description : </label>
+        <div className="col-12 text-start mb-2">
+          <label className="fw-semibold form-label">Description : </label>
           <div className="text-muted">{data?.description}</div>
         </div>
-      </div>
 
-      <div className="col-12 text-start">
+        {/* Attachments */}
-        <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
+        <div className="col-12 text-start mb-2">
-
+          <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
-        <div className="d-flex flex-wrap gap-2">
+          <div className="d-flex flex-wrap gap-2">
-          {data?.documents?.map((doc) => {
+            {data?.documents?.map((doc) => {
-            const isImage = doc.contentType?.includes("image");
+              const isImage = doc.contentType?.includes("image");
-
+              return (
-            return (
+                <div
-              <div
+                  key={doc.documentId}
-                key={doc.documentId}
+                  className="d-flex align-items-center cusor-pointer"
-                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                  onClick={() => {
-                style={{
+                    if (isImage) {
-                  width: "80px",
+                      setDocumentView({
-                  cursor: isImage ? "pointer" : "default",
+                        IsOpen: true,
-                }}
+                        Image: doc.preSignedUrl,
-                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}
+                  <i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i>
-                </small>
+                  <small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
-              </div>
+                    {doc.fileName}
-            );
-          })}
-        </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 && !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>
+
+        {/* ... your remaining conditional sections */}
+      </div>
+    </div>
+
+    <div className="col-12 col-lg-5 col-xl-4">
+      <div className="d-flex align-items-center text-secondary my-2">
+       <i className='bx bx-time-five me-2'></i> <p className=" m-0">TimeLine</p>
+      </div>
       <ExpenseStatusLogs data={data} />
-    </form>
+    </div>
+  </div>
+</form>
+
   );
 };
 

src/components/PaymentRequest/PaymentRequestList.jsx

@@ -6,6 +6,7 @@ import {
 } from "../../utils/constants";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   useDebounce,
 } from "../../utils/appUtils";
@@ -131,7 +132,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-start",
       getValue: (e) => (
         <>
-          {formatCurrency(e?.amount)}&nbsp;{e.currency.currencyCode}
+          {formatFigure(e?.amount,{type:"currency",currency : e?.currency?.currencyCode})}
         </>
       ),
 
@@ -253,7 +254,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                       <td colSpan={8} className="text-start">
                         <div className="d-flex align-items-center">
                           {" "}
-                          <small className="fs-6 py-1">
+                          <small className="fs-6 py-1 ms-2">
                             {displayField} :{" "}
                           </small>{" "}
                           <small className="fs-6  ms-3">
@@ -271,9 +272,9 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                                 key={col.key}
                                 className={`d-table-cell ${col.align ?? ""}`}
                               >
-                                {col?.customRender
+                               <div className="ms-2"> {col?.customRender
                                   ? col?.customRender(paymentRequest)
-                                  : col?.getValue(paymentRequest)}
+                                  : col?.getValue(paymentRequest)}</div>
                               </td>
                             )
                         )}

src/components/PaymentRequest/PaymentRequestSchema.js

@@ -7,56 +7,48 @@ const ALLOWED_TYPES = [
   "image/jpg",
   "image/jpeg",
 ];
-export const PaymentRequestSchema = (expenseTypes,isItself) => {
+export const PaymentRequestSchema = (expenseTypes, isItself) => {
-  return z
+  return z.object({
-    .object({
+    title: z.string().min(1, { message: "Project is required" }),
-      title: z.string().min(1, { message: "Project is required" }),
+    projectId: z.string().min(1, { message: "Project is required" }),
-      projectId: z.string().min(1, { message: "Project is required" }),
+    expenseCategoryId: z
-      expenseCategoryId: z
+      .string()
-        .string()
+      .min(1, { message: "Expense Category is required" }),
-        .min(1, { message: "Expense Category is required" }),     
+    currencyId: z.string().min(1, { message: "Currency is required" }),
-      currencyId: z
+    dueDate: z.string().min(1, { message: "Date is required" }),
-        .string()
+    description: z.string().min(1, { message: "Description is required" }),
-        .min(1, { message: "Currency is required" }),     
+    payee: z.string().min(1, { message: "Supplier name is required" }),
-      dueDate: z.string().min(1, { message: "Date is required" }),
+    isAdvancePayment: z.boolean().optional(),
-      description: z.string().min(1, { message: "Description is required" }),
+    amount: z.coerce
-      payee: z.string().min(1, { message: "Supplier name is required" }),
+      .number({
-      isAdvancePayment: z.boolean().optional(),
+        invalid_type_error: "Amount is required and must be a number",
-      amount: z.coerce
+      })
-        .number({
+      .min(1, "Amount must be Enter")
-          invalid_type_error: "Amount is required and must be a number",
+      .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+        message: "Amount must have at most 2 decimal places",
+      }),
+    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),
         })
-        .min(1, "Amount must be Enter")
+      )
-        .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+      .optional(),
-          message: "Amount must have at most 2 decimal places",
+  });
-        }),
+};
-      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),
-          })
-        ).refine((data)=>{
-          if(isItself){
-            payee.z.string().optional();
-          }
-        }),
-    })
-  };
 
 export const defaultPaymentRequest = {
-  title:"",
+  title: "",
   description: "",
   payee: "",
   currencyId: "",
@@ -64,11 +56,10 @@ export const defaultPaymentRequest = {
   dueDate: "",
   projectId: "",
   expenseCategoryId: "",
-  isAdvancePayment:boolean,
+  isAdvancePayment: boolean,
   billAttachments: [],
 };
 
-
 export const SearchPaymentRequestSchema = z.object({
   projectIds: z.array(z.string()).optional(),
   statusIds: z.array(z.string()).optional(),
@@ -91,7 +82,6 @@ export const defaultPaymentRequestFilter = {
   endDate: null,
 };
 
-
 export const PaymentRequestActionScheam = (
   isTransaction = false,
   transactionDate
@@ -100,17 +90,16 @@ export const PaymentRequestActionScheam = (
     .object({
       comment: z.string().min(1, { message: "Please leave comment" }),
       statusId: z.string().min(1, { message: "Please select a status" }),
-      paymentRequestId: z.string().nullable().optional(),
+      paidTransactionId: z.string().nullable().optional(),
       paidAt: z.string().nullable().optional(),
       paidById: z.string().nullable().optional(),
-
     })
     .superRefine((data, ctx) => {
       if (isTransaction) {
-        if (!data.paymentRequestId?.trim()) {
+        if (!data.paidTransactionId?.trim()) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            path: ["reimburseTransactionId"],
+            path: ["paidTransactionId"],
             message: "Reimburse Transaction ID is required",
           });
         }
@@ -121,15 +110,7 @@ export const PaymentRequestActionScheam = (
             message: "Transacion Date is required",
           });
         }
-        // let reimburse_Date = localToUtc(data.reimburseDate);
+       
-        // if (transactionDate > reimburse_Date) {
-        //   ctx.addIssue({
-        //     code: z.ZodIssueCode.custom,
-        //     path: ["reimburseDate"],
-        //     message:
-        //       "Reimburse Date must be greater than or equal to Expense created Date",
-        //   });
-        // }
         if (!data.paidById) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
@@ -141,7 +122,7 @@ export const PaymentRequestActionScheam = (
     });
 };
 
-export const defaultActionValues = {
+export const defaultPaymentRequestActionValues = {
   comment: "",
   statusId: "",
 

src/components/PaymentRequest/PaymentStatusLogs.jsx

@@ -0,0 +1,93 @@
+import { useState, useMemo } from "react";
+import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Timeline from "../common/TimeLine";
+import moment from "moment";
+import { getColorNameFromHex } from "../../utils/appUtils";
+const PaymentStatusLogs = ({ data }) => {
+  const [visibleCount, setVisibleCount] = useState(4);
+
+  const sortedLogs = useMemo(() => {
+    if (!data?.updateLogs) return [];
+    return [...data.updateLogs].sort(
+      (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
+    );
+  }, [data?.updateLogs]);
+
+  const logsToShow = useMemo(
+    () => sortedLogs.slice(0, visibleCount),
+    [sortedLogs, visibleCount]
+  );
+
+  const timelineData = useMemo(() => {
+    return logsToShow.map((log, index) => ({
+      id: index + 1,
+      title: log.nextStatus?.name || "Status Updated",
+      description: log.nextStatus?.description || "",
+      timeAgo: log.updatedAt,
+      color: getColorNameFromHex(log.nextStatus?.color) || "primary",
+      users: log.updatedBy
+        ? [
+            {
+              firstName: log.updatedBy.firstName || "",
+              lastName: log?.updatedBy?.lastName || "",
+              role: log.updatedBy.jobRoleName || "",
+              avatar: log.updatedBy.photo,
+            },
+          ]
+        : [],
+    }));
+  }, [logsToShow]);
+
+  const handleShowMore = () => {
+    setVisibleCount((prev) => prev + 4);
+  };
+
+  return (
+    <div className="page-min-h overflow-auto">
+      {/* <div className="row g-2">
+        {logsToShow.map((log) => (
+          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
+            <Avatar
+              size="xs"
+              firstName={log.updatedBy.firstName}
+              lastName={log.updatedBy.lastName}
+            />
+
+            <div className="flex-grow-1">
+              <div className="text-start">
+                <div className="flex">
+                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
+                  <small className="text-secondary text-tiny ms-2">
+                    <em>{log.action}</em>
+                  </small>
+                  <span className="text-tiny text-secondary d-block">
+                    {formatUTCToLocalTime(log.updateAt, true)}
+                  </span>
+                </div>
+                <div className="d-flex align-items-center text-muted small mt-1">
+                  <span>{log.comment}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {sortedLogs.length > visibleCount && (
+        <div className="text-center my-1">
+          <button
+            className="btn btn-xs btn-outline-primary"
+            onClick={handleShowMore}
+          >
+            Show More
+          </button>
+        </div>
+      )} */}
+
+      <Timeline items={timelineData} />
+    </div>
+  );
+};
+
+export default PaymentStatusLogs;

src/components/PaymentRequest/ViewPaymentRequest.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   useActionOnExpense,
   useActionOnPaymentRequest,
@@ -6,6 +6,7 @@ import {
 } from "../../hooks/useExpense";
 import {
   formatCurrency,
+  formatFigure,
   getColorNameFromHex,
   getIconByFileType,
   localToUtc,
@@ -28,11 +29,18 @@ import { useNavigate } from "react-router-dom";
 import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
+  EXPENSE_DRAFT,
   EXPENSE_REJECTEDBY,
   PROCESS_EXPENSE,
   REVIEW_EXPENSE,
 } from "../../utils/constants";
 import Label from "../common/Label";
+import {
+  defaultPaymentRequestActionValues,
+  PaymentRequestActionScheam,
+} from "./PaymentRequestSchema";
+import PaymentStatusLogs from "./PaymentStatusLogs";
+import { FilelistView } from "../Expenses/Filelist";
 
 const ViewPaymentRequest = ({ requestId }) => {
   const { data, isLoading, isError, error, isFetching } =
@@ -42,9 +50,10 @@ const ViewPaymentRequest = ({ requestId }) => {
 
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
-  const { setDocumentView } = usePaymentRequestContext();
+  const { setDocumentView, setModalSize } = usePaymentRequestContext();
   const ActionSchema =
-    ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
+    PaymentRequestActionScheam(IsPaymentProcess, data?.createdAt) ??
+    z.object({});
   const navigate = useNavigate();
   const {
     register,
@@ -55,7 +64,7 @@ const ViewPaymentRequest = ({ requestId }) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ActionSchema),
-    defaultValues: defaultActionValues,
+    defaultValues: defaultPaymentRequestActionValues,
   });
 
   const userPermissions = useSelector(
@@ -97,7 +106,7 @@ const ViewPaymentRequest = ({ requestId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      paidAt: localToUtc(formData.reimburseDate),
+      paidAt: localToUtc(formData.paidAt),
       paymentRequestId: data.id,
       comment: formData.comment,
     };
@@ -112,17 +121,24 @@ const ViewPaymentRequest = ({ requestId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 mb-1">
+      <div className="col-12 mb-2 text-center ">
         <h5 className="fw-semibold m-0">Payment Request Details</h5>
-        <hr />
       </div>
-      <div className="row mb-1">
+      <div className="row  text-start">
-        <div className="col-12 col-sm-6 col-md-8">
+        <div className=" col-sm-12 col-md-7 border-none border-md-end">
           <div className="row">
-            <div className="col-12 text-start fw-semibold mb-2">
+            <div className="col-12 d-flex justify-content-between text-start fw-semibold mb-2">
               {data?.paymentRequestUID}
+
+              <span
+                className={`badge bg-label-${
+                  getColorNameFromHex(data?.expenseStatus?.color) || "secondary"
+                }`}
+              >
+                {data?.expenseStatus?.name}
+              </span>
             </div>
-            <div className="col-md-6 mb-3">
+            <div className="col-md-12 mb-3">
               <div className="d-block d-md-flex align-items-center">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -134,7 +150,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </div>
             </div>
 
-            <div className="col-md-6 mb-3">
+            <div className="col-md-12 mb-3">
               <div className="d-flex">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -147,7 +163,7 @@ const ViewPaymentRequest = ({ requestId }) => {
                 </div>
               </div>
             </div>
-            <div className="col-md-6 mb-3">
+            <div className="col-md-12 mb-3">
               <div className="d-flex">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -160,7 +176,7 @@ const ViewPaymentRequest = ({ requestId }) => {
             </div>
 
             {/* Row 2 */}
-            <div className="col-md-6 mb-3">
+            <div className="col-md-12 mb-3">
               <div className="d-flex">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -171,7 +187,7 @@ const ViewPaymentRequest = ({ requestId }) => {
                 <div className="text-muted">{data?.payee}</div>
               </div>
             </div>
-            <div className="col-md-6 mb-3">
+            <div className="col-md-1 mb-3">
               <div className="d-flex">
                 <label
                   className="form-label me-2 mb-0 fw-semibold text-start"
@@ -180,25 +196,13 @@ const ViewPaymentRequest = ({ requestId }) => {
                   Amount :
                 </label>
                 <div className="text-muted">
-                  {formatCurrency(data?.amount, data?.currency?.currencyCode)}
+                  {formatFigure(data?.amount,{type:"currency",currency : data?.currency?.currencyCode})}
                 </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="col-md-12 mb-3">
                 <div className="d-flex">
                   <label
                     className="form-label me-2 mb-0 fw-semibold text-start"
@@ -212,25 +216,8 @@ const ViewPaymentRequest = ({ requestId }) => {
             )}
 
             {/* Row 4 */}
-            <div className="col-md-6 mb-3">
+
-              <div className="d-flex">
+            <div className="col-md-12 mb-3">
-                <label
-                  className="form-label me-2 mb-0 fw-semibold text-start"
-                  style={{ minWidth: "130px" }}
-                >
-                  Status :
-                </label>
-                <span
-                  className={`badge bg-label-${
-                    getColorNameFromHex(data?.expenseStatus?.color) ||
-                    "secondary"
-                  }`}
-                >
-                  {data?.expenseStatus?.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"
@@ -244,18 +231,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </div>
             </div>
 
-            <div className="col-md-6 mb-3">
+            <div className="col-md-12 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"
@@ -271,7 +247,7 @@ const ViewPaymentRequest = ({ requestId }) => {
 
             {/* Row 6 */}
             {data?.createdBy && (
-              <div className="col-md-6 text-start">
+              <div className="col-md-12 text-start">
                 <div className="d-flex align-items-center">
                   <label
                     className="form-label me-2 mb-0 fw-semibold"
@@ -296,7 +272,7 @@ const ViewPaymentRequest = ({ requestId }) => {
               </div>
             )}
             {data?.paidBy && (
-              <div className="col-md-6 text-start">
+              <div className="col-md-12 text-start">
                 <div className="d-flex align-items-center">
                   <label
                     className="form-label me-2 mb-0 fw-semibold"
@@ -325,49 +301,16 @@ const ViewPaymentRequest = ({ requestId }) => {
               <label className="fw-semibold form-label">Description : </label>
               <div className="text-muted">{data?.description}</div>
             </div>
-            <div className="col-6 text-start">
+            <div className="col-12 text-start mb-2">
-              <label className="form-label me-2 mb-2 fw-semibold">
+              <label className="form-label me-2 mb-1 fw-semibold">
                 Attachment :
               </label>
 
               <div className="d-flex flex-wrap gap-2">
-                {data?.documents?.length > 0 ? (
-                  data?.documents?.map((doc) => {
-                    const isImage = doc?.contentType?.includes("image");
               
-                    return (
+                    {data?.attachments?.length > 0 ? (
-                      <div
+                      <FilelistView files={data?.attachments} viewFile={setDocumentView}/>
-                        key={doc.documentId}
+                    ):(<p className="m-0 text-secondary">No Attachment</p>)}
-                        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>
-                    );
-                  })
-                ) : (
-                  <p className="m-0">No Attachment</p>
-                )}
               </div>
             </div>
 
@@ -496,8 +439,12 @@ const ViewPaymentRequest = ({ requestId }) => {
             )}
           </div>
         </div>
-        <div className="col-12 col-sm-6 col-md-4">
+        <div className=" col-sm-12 my-2 my-md-0 border-top border-md-none col-md-5">
-          <ExpenseStatusLogs data={data} />
+          <div className="d-flex mb-2">
+            <i className="bx bx-time-five me-2 "></i>{" "}
+            <p className="fw-medium">TimeLine</p>
+          </div>
+          <PaymentStatusLogs data={data} />
         </div>
       </div>
     </form>

src/components/common/TimeLine.jsx

@@ -1,5 +1,8 @@
 import React from "react";
 import Avatar from "./Avatar";
+import Tooltip from "./Tooltip";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import moment from "moment";
 
 const Timeline = ({ items = [], transparent = true }) => {
   return (
@@ -8,82 +11,99 @@ const Timeline = ({ items = [], transparent = true }) => {
         transparent ? "timeline-transparent text-start" : ""
       }`}
     >
-      {items.map((item) => (
+      {items &&
-        <li
+        items?.map((item) => (
-          key={item.id}
+          <li
-          className={`timeline-item ${
+            key={item.id}
-            transparent ? "timeline-item-transparent" : ""
+            className={`timeline-item ${
-          }`}
+              transparent ? "timeline-item-transparent" : ""
-        >
-          <span
-            className={`timeline-point timeline-point-${
-              item.color || "primary"
             }`}
-          ></span>
+          >
+            <span
+              className={`timeline-point timeline-point-${
+                item.color || "primary"
+              }`}
+            ></span>
 
-          <div className="timeline-event">
+            <div className="timeline-event">
-            <div className="timeline-header mb-3 d-flex justify-content-between">
+              <div className="timeline-header mb-3 d-flex justify-content-between">
-              <h6 className="mb-0 text-body">{item.title}</h6>
+                <h6 className="mb-0 text-body">{item.title}</h6>
-              <small className="text-body-secondary">{item.timeAgo}</small>
+                <small className="text-body-secondary">
-            </div>
+                  <Tooltip text={formatUTCToLocalTime(item.timeAgo, true)}>
-
+                    {moment.utc(item.timeAgo).local().fromNow()}
-            {item.description && <p className="mb-2">{item.description}</p>}
+                  </Tooltip>
-
+                </small>
-            {item.attachments && item.attachments.length > 0 && (
-              <div className="d-flex align-items-center mb-2">
-                {item.attachments.map((att, i) => (
-                  <div
-                    key={i}
-                    className="badge bg-lighter rounded d-flex align-items-center gap-2 p-2"
-                  >
-                    {att.icon && (
-                      <img
-                        src={att.icon}
-                        alt="file"
-                        width="15"
-                        className="me-2"
-                      />
-                    )}
-                    <span className="h6 mb-0">{att.name}</span>
-                  </div>
-                ))}
               </div>
-            )}
 
-            {item.users && item.users.length > 0 && (
+              {item.description && <p className="mb-2">{item.description}</p>}
-              <div className="d-flex flex-wrap align-items-center mb-2">
+
-                <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
+              {item.attachments && item.attachments.length > 0 && (
-                  {item.users.map((user, i) => (
+                <div className="d-flex align-items-center mb-2">
-                    <li key={i} className="avatar me-1" title={user.name}>
+                  {item.attachments.map((att, i) => (
-                      {user.avatar ? (
+                    <div
+                      key={i}
+                      className="badge bg-lighter rounded d-flex align-items-center gap-2 p-2"
+                    >
+                      {att.icon && (
                         <img
-                          src={user.avatar}
+                          src={att.icon}
-                          alt={user.name}
+                          alt="file"
-                          className="rounded-circle"
+                          width="15"
-                          width="32"
+                          className="me-2"
-                          height="32"
-                        />
-                      ) : (
-                        <Avatar
-                          firstName={user.firstName}
-                          lastName={user.lastName}
                         />
                       )}
-                    </li>
+                      <span className="h6 mb-0">{att.name}</span>
+                    </div>
                   ))}
-                </ul>
+                </div>
+              )}
 
-                {item.users?.length === 1 && (
+              {item.users && item.users.length > 0 && (
-                  <div className="m-0">
+                <div className="d-flex flex-wrap align-items-center mb-2">
-                    <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
+                  <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
-                    <small>{item.users[0].role}</small>
+                    {item.users.map((user, i) => (
-                  </div>
+                      <li key={i} className="m-0" title={user.name}>
-                )}
+                        {user.avatar ? (
-              </div>
+                          <img
-            )}
+                            src={user.avatar}
-          </div>
+                            alt={user.name}
-        </li>
+                            className="rounded-circle"
-      ))}
+                            width="32"
+                            height="32"
+                          />
+                        ) : (
+                          <Avatar
+                            size="xs"
+                            firstName={user.firstName}
+                            lastName={user.lastName}
+                          />
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+
+                  {item.users?.length === 1 && (
+                    <div className="m-0">
+                      <p className="mb-0  text-xs fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
+                      <small>{item.users[0].role}</small>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+
+      {!items ||
+        (items.length == 0 && (
+          <li
+            className={`timeline-item text-center ${
+              transparent ? "timeline-item-transparent" : ""
+            }`}
+          >
+            Not action yet.
+          </li>
+        ))}
     </ul>
   );
 };

src/hooks/useExpense.js

@@ -5,6 +5,19 @@ import { queryClient } from "../layouts/AuthLayout";
 import { useSelector } from "react-redux";
 import moment from "moment";
 
+
+
+export const usePayee =()=>{
+  return useQuery({
+    queryKey:["payee"],
+    queryFn:async()=>{
+      const resp = await ExpenseRepository.GetPayee();
+      return resp.data;
+    }
+  })
+}
+
+
 // -------------------Query------------------------------------------------------
 
 const cleanFilter = (filter) => {
@@ -358,6 +371,30 @@ export const useActionOnPaymentRequest = (onSuccessCallBack) => {
     },
   });
 };
+export const useDeletePaymentRequest = ()=>{
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) => {
+   
+      return response.data;
+    },
+    onSuccess: (updatedExpense, variables) => {
+      showToast("Request processed successfully.", "success");
+
+      queryClient.invalidateQueries({queryKey:["paymentRequestList"]})
+
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
+  });
+}
 //#endregion
 
 export const usePaymentRequestFilter = () => {

src/pages/Expense/ExpensePage.jsx

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+} from "react";
 import { useForm, useFormContext } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
@@ -19,7 +25,10 @@ import {
   VIEW_SELF_EXPENSE,
 } from "../../utils/constants";
 
-import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
+import {
+  defaultFilter,
+  SearchSchema,
+} from "../../components/Expenses/ExpenseSchema";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 // Context
@@ -102,7 +111,7 @@ const ExpensePage = () => {
     setManageExpenseModal,
     setDocumentView,
     filterData,
-    removeFilterChip
+    removeFilterChip,
   };
 
   return (
@@ -128,7 +137,6 @@ const ExpensePage = () => {
                   </div>
 
                   <div className="col-6 text-end mt-2 mt-sm-0">
-
                     {IsCreatedAble && (
                       <button
                         className="btn btn-sm btn-primary"
@@ -151,8 +159,6 @@ const ExpensePage = () => {
               </div>
             </div>
 
-
-
             <ExpenseList
               filters={filters}
               groupBy={groupBy}
@@ -190,7 +196,7 @@ const ExpensePage = () => {
         {viewExpense.view && (
           <GlobalModel
             isOpen
-            size="lg"
+            size="xl"
             modalType="top"
             closeModal={() => setViewExpense({ expenseId: null, view: false })}
           >

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -8,12 +8,13 @@ import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestLi
 import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
 import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
 import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 export const PaymentRequestContext = createContext();
 export const usePaymentRequestContext = () => {
   const context = useContext(PaymentRequestContext);
   if (!context) {
-    throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
+    throw new Error("usePaymentRequestContext must be used within an RequestPaymentProvider");
   }
   return context;
 };
@@ -25,12 +26,18 @@ const PaymentRequestPage = () => {
   const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const [filters, setFilters] = useState(defaultPaymentRequestFilter);
-
+   const [ViewDocument, setDocumentView] = useState({
+      IsOpen: false,
+      Image: null,
+    });
+    const [modalSize,setModalSize] = useState("md")
   const [search, setSearch] = useState("");
 
   const contextValue = {
     setManageRequest,
-    setVieRequest
+    setVieRequest,
+    setDocumentView,
+    setModalSize
   };
 
   useEffect(() => {
@@ -124,7 +131,18 @@ const PaymentRequestPage = () => {
             modalType="top"
             closeModal={() => setVieRequest({ requestId: null, view: false })}
           >
-            <ViewPaymentRequest  requestId={ViewRequest?.requestId}/>
+            <ViewPaymentRequest  requestId={ViewRequest?.requestId} />
+          </GlobalModel>
+        )}
+
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            key={ViewDocument.Image ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+          >
+            <PreviewDocument imageUrl={ViewDocument.Image} />
           </GlobalModel>
         )}
         

src/repositories/ExpsenseRepository.jsx

@@ -1,18 +1,20 @@
 import { api } from "../utils/axiosClient";
 
-
 const ExpenseRepository = {
+  GetPayee: () => api.get("/api/Expense/payment-request/payee"),
   //#region Expense
   GetExpenseList: (pageSize, pageNumber, filter, searchString) => {
     const payloadJsonString = JSON.stringify(filter);
-    return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
+    return api.get(
+      `/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
+    );
   },
   GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`),
   CreateExpense: (data) => api.post("/api/Expense/create", data),
   UpdateExpense: (id, data) => api.put(`/api/Expense/edit/${id}`, data),
   DeleteExpense: (id) => api.delete(`/api/Expense/delete/${id}`),
-  ActionOnExpense: (data) => api.post('/api/expense/action', data),
+  ActionOnExpense: (data) => api.post("/api/expense/action", data),
-  GetExpenseFilter: () => api.get('/api/Expense/filter'),
+  GetExpenseFilter: () => api.get("/api/Expense/filter"),
 
   //#endregion
 
@@ -41,8 +43,8 @@ const ExpenseRepository = {
 
 
   //#region Advance Payment
-  GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
+  GetTranctionList: () => api.get(`/get/transactions/${employeeId}`),
   //#endregion
-}
+};
 
 export default ExpenseRepository;

src/utils/appUtils.js

@@ -108,7 +108,7 @@ export function localToUtc(dateString) {
 export const formatCurrency = (amount, currency = "INR", locale = "en-US") => {
   return new Intl.NumberFormat(locale, {
     style: "currency",
-    notation: "compact",
+    notation: "compact", // standard or compact
     compactDisplay: "short",
     currency: currency,
     minimumFractionDigits: 0,