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

2025-11-05 12:04:14 +05:30 · 2025-11-05 12:04:14 +05:30 · 10ec11a828
commit 10ec11a828
parent 3b318a672c fba19f6ead
17 changed files with 1036 additions and 1091 deletions
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/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
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/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" }),
--- a/src/components/Expenses/ExpenseStatusLogs.jsx
+++ b/src/components/Expenses/ExpenseStatusLogs.jsx
@ -8,11 +8,11 @@ const ExpenseStatusLogs = ({ data }) => {
  const [visibleCount, setVisibleCount] = useState(4);

  const sortedLogs = useMemo(() => {
-    if (!data?.updateLogs) return [];
-    return [...data.updateLogs].sort(
+    if (!data?.expenseLogs) return [];
+    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",
-      description: log.nextStatus?.description || "",
-      timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
+      title: log.action || "Status Updated",
+      description: log.comment || "",
+      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>
--- a/src/components/Expenses/Filelist.jsx
+++ b/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(
-                    file?.contentType
-                  )} fs-3`}
+                  className={`bx ${getIconByFileType(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
-                  className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
-                  role="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    removeFile(expenseToEdit ? file.documentId : idx);
-                  }}
-                ></i>
+                <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>
            </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>
+  );
+};
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/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{" "}
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/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">
-          <h5 className="fw-semibold m-0">Expense Details</h5>
-          <hr />
+  <div className="col-12 mb-1">
+    <h5 className="fw-semibold m-0">Expense Details</h5>
+  </div>
+
+  <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
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label 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
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Expense Type :
            </label>
            <div className="text-muted">{data?.expensesType?.name}</div>
@ -141,46 +154,36 @@ const ViewExpense = ({ ExpenseId }) => {
        {/* Row 2 */}
        <div className="col-md-6 mb-3">
          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Supplier :
            </label>
            <div className="text-muted">{data?.supplerName}</div>
          </div>
        </div>
+
        <div className="col-md-6 mb-3">
          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Amount :
            </label>
-            <div className="text-muted">₹ {data.amount}</div>
+            <div 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
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Payment Mode :
            </label>
            <div className="text-muted">{data?.paymentMode?.name}</div>
          </div>
        </div>
+
        {data?.gstNumber && (
          <div className="col-md-6 mb-3">
            <div className="d-flex">
-              <label
-                className="form-label me-2 mb-0 fw-semibold text-start"
-                style={{ minWidth: "130px" }}
-              >
+              <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
                GST Number :
              </label>
              <div className="text-muted">{data?.gstNumber}</div>
@ -188,281 +191,122 @@ const ViewExpense = ({ ExpenseId }) => {
          </div>
        )}

-        {/* Row 4 */}
+     
+
        <div className="col-md-6 mb-3">
          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Status :
-            </label>
-            <span
-              className={`badge bg-label-${
-                getColorNameFromHex(data?.status?.color) || "secondary"
-              }`}
-            >
-              {data?.status?.name}
-            </span>
-          </div>
-        </div>
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <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
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Project :
            </label>
            <div className="text-muted">{data?.project?.name}</div>
          </div>
        </div>
+
        <div className="col-md-6 mb-3">
          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
+            <label className="form-label me-2 mb-0 fw-semibold text-start" style={{ minWidth: "130px" }}>
              Created At :
            </label>
-            <div className="text-muted">
-              {formatUTCToLocalTime(data?.createdAt, true)}
-            </div>
+            <div className="text-muted">{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
-                className="form-label me-2 mb-0 fw-semibold"
-                style={{ minWidth: "130px" }}
-              >
+              <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
                Created By :
              </label>
-              <div className="d-flex align-items-center">
-                <Avatar
-                  size="xs"
-                  classAvatar="m-0"
-                  firstName={data.createdBy?.firstName}
-                  lastName={data.createdBy?.lastName}
-                />
-                <span className="text-muted">
-                  {`${data.createdBy?.firstName ?? ""} ${
-                    data.createdBy?.lastName ?? ""
-                  }`.trim() || "N/A"}
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="col-md-6 text-start">
-          <div className="d-flex align-items-center">
-            <label
-              className="form-label me-2 mb-0 fw-semibold"
-              style={{ minWidth: "130px" }}
-            >
-              Paid By :
-            </label>
-            <div className="d-flex align-items-center ">
              <Avatar
                size="xs"
-                classAvatar="m-0"
-                firstName={data.paidBy?.firstName}
-                lastName={data.paidBy?.lastName}
+                classAvatar="m-0 me-1"
+                firstName={data.createdBy?.firstName}
+                lastName={data.createdBy?.lastName}
              />
              <span className="text-muted">
-                {`${data.paidBy?.firstName ?? ""} ${
-                  data.paidBy?.lastName ?? ""
-                }`.trim() || "N/A"}
+                {`${data.createdBy?.firstName ?? ""} ${data.createdBy?.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">
-            <label className="fw-semibold form-label">Description : </label>
+
+        {/* Description */}
+        <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">
-        <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
-
-        <div className="d-flex flex-wrap gap-2">
-          {data?.documents?.map((doc) => {
-            const isImage = doc.contentType?.includes("image");
-
-            return (
-              <div
-                key={doc.documentId}
-                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                style={{
-                  width: "80px",
-                  cursor: isImage ? "pointer" : "default",
-                }}
-                onClick={() => {
-                  if (isImage) {
-                    setDocumentView({
-                      IsOpen: true,
-                      Image: doc.preSignedUrl,
-                    });
-                  }
-                }}
-              >
-                <i
-                  className={`bx ${getIconByFileType(doc.contentType)}`}
-                  style={{ fontSize: "30px" }}
-                ></i>
-                <small
-                  className="text-center text-tiny text-truncate w-100"
-                  title={doc.fileName}
+        {/* Attachments */}
+        <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">
+            {data?.documents?.map((doc) => {
+              const isImage = doc.contentType?.includes("image");
+              return (
+                <div
+                  key={doc.documentId}
+                  className="d-flex align-items-center cusor-pointer"
+                  onClick={() => {
+                    if (isImage) {
+                      setDocumentView({
+                        IsOpen: true,
+                        Image: doc.preSignedUrl,
+                      });
+                    }
+                  }}
                >
-                  {doc.fileName}
-                </small>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {data.expensesReimburse && (
-        <div className="row text-start mt-2">
-          <div className="col-md-6 mb-sm-0 mb-2">
-            <label className="form-label me-2 mb-0 fw-semibold">
-              Transaction ID :
-            </label>
-            {data.expensesReimburse.reimburseTransactionId || "N/A"}
-          </div>
-          <div className="col-md-6 ">
-            <label className="form-label me-2 mb-0 fw-semibold">
-              Reimburse Date :
-            </label>
-            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
-          </div>
-
-          {data.expensesReimburse && (
-            <>
-              <div className="col-md-6  d-flex align-items-center">
-                <label className="form-label me-2 mb-0 fw-semibold">
-                  Reimburse By :
-                </label>
-                <Avatar
-                  size="xs"
-                  classAvatar="m-0 me-1"
-                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
-                />
-                <span className="text-muted">
-                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
-                </span>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-      <hr className="divider my-1 border-2 divider-primary my-2" />
-
-      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
-        <>
-          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
-            <div className="row">
-              <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Transaction Id </label>
-                <input
-                  type="text"
-                  className="form-control form-control-sm"
-                  {...register("reimburseTransactionId")}
-                />
-                {errors.reimburseTransactionId && (
-                  <small className="danger-text">
-                    {errors.reimburseTransactionId.message}
+                  <i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i>
+                  <small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
+                    {doc.fileName}
                  </small>
-                )}
-              </div>
-              <div 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>

+        {/* ... 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>
+
  );
 };

--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/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>
                            )
                        )}
--- a/src/components/PaymentRequest/PaymentRequestSchema.js
+++ b/src/components/PaymentRequest/PaymentRequestSchema.js
@ -7,56 +7,48 @@ const ALLOWED_TYPES = [
  "image/jpg",
  "image/jpeg",
 ];
-export const PaymentRequestSchema = (expenseTypes,isItself) => {
-  return z
-    .object({
-      title: z.string().min(1, { message: "Project is required" }),
-      projectId: z.string().min(1, { message: "Project is required" }),
-      expenseCategoryId: z
-        .string()
-        .min(1, { message: "Expense Category is required" }),     
-      currencyId: z
-        .string()
-        .min(1, { message: "Currency is required" }),     
-      dueDate: z.string().min(1, { message: "Date is required" }),
-      description: z.string().min(1, { message: "Description is required" }),
-      payee: z.string().min(1, { message: "Supplier name is required" }),
-      isAdvancePayment: z.boolean().optional(),
-      amount: z.coerce
-        .number({
-          invalid_type_error: "Amount is required and must be a number",
+export const PaymentRequestSchema = (expenseTypes, isItself) => {
+  return z.object({
+    title: z.string().min(1, { message: "Project is required" }),
+    projectId: z.string().min(1, { message: "Project is required" }),
+    expenseCategoryId: z
+      .string()
+      .min(1, { message: "Expense Category is required" }),
+    currencyId: z.string().min(1, { message: "Currency is required" }),
+    dueDate: z.string().min(1, { message: "Date is required" }),
+    description: z.string().min(1, { message: "Description is required" }),
+    payee: z.string().min(1, { message: "Supplier name is required" }),
+    isAdvancePayment: z.boolean().optional(),
+    amount: z.coerce
+      .number({
+        invalid_type_error: "Amount is required and must be a number",
+      })
+      .min(1, "Amount must be Enter")
+      .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()), {
-          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();
-          }
-        }),
-    })
-  };
+      )
+      .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,11 +122,11 @@ export const PaymentRequestActionScheam = (
    });
 };

-export const defaultActionValues = {
+export const defaultPaymentRequestActionValues = {
  comment: "",
  statusId: "",

  paidTransactionId: null,
  paidAt: null,
  paidById: null,
-};
+};
--- a/src/components/PaymentRequest/PaymentStatusLogs.jsx
+++ b/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;
--- a/src/components/PaymentRequest/ViewPaymentRequest.jsx
+++ b/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="col-12 col-sm-6 col-md-8">
+      <div className="row  text-start">
+        <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">
-                <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="col-md-12 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="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="col-md-12 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">
-              <label className="form-label me-2 mb-2 fw-semibold">
+            <div className="col-12 text-start mb-2">
+              <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 (
-                      <div
-                        key={doc.documentId}
-                        className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                        style={{
-                          width: "80px",
-                          cursor: isImage ? "pointer" : "default",
-                        }}
-                        onClick={() => {
-                          if (isImage) {
-                            setDocumentView({
-                              IsOpen: true,
-                              Image: doc.preSignedUrl,
-                            });
-                          }
-                        }}
-                      >
-                        <i
-                          className={`bx ${getIconByFileType(doc.contentType)}`}
-                          style={{ fontSize: "30px" }}
-                        ></i>
-                        <small
-                          className="text-center text-tiny text-truncate w-100"
-                          title={doc.fileName}
-                        >
-                          {doc.fileName}
-                        </small>
-                      </div>
-                    );
-                  })
-                ) : (
-                  <p className="m-0">No Attachment</p>
-                )}
+              
+                    {data?.attachments?.length > 0 ? (
+                      <FilelistView files={data?.attachments} viewFile={setDocumentView}/>
+                    ):(<p className="m-0 text-secondary">No Attachment</p>)}
              </div>
            </div>

@ -496,8 +439,12 @@ const ViewPaymentRequest = ({ requestId }) => {
            )}
          </div>
        </div>
-        <div className="col-12 col-sm-6 col-md-4">
-          <ExpenseStatusLogs data={data} />
+        <div className=" col-sm-12 my-2 my-md-0 border-top border-md-none col-md-5">
+          <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>
--- a/src/components/common/TimeLine.jsx
+++ b/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) => (
-        <li
-          key={item.id}
-          className={`timeline-item ${
-            transparent ? "timeline-item-transparent" : ""
-          }`}
-        >
-          <span
-            className={`timeline-point timeline-point-${
-              item.color || "primary"
+      {items &&
+        items?.map((item) => (
+          <li
+            key={item.id}
+            className={`timeline-item ${
+              transparent ? "timeline-item-transparent" : ""
            }`}
-          ></span>
+          >
+            <span
+              className={`timeline-point timeline-point-${
+                item.color || "primary"
+              }`}
+            ></span>

-          <div className="timeline-event">
-            <div className="timeline-header mb-3 d-flex justify-content-between">
-              <h6 className="mb-0 text-body">{item.title}</h6>
-              <small className="text-body-secondary">{item.timeAgo}</small>
-            </div>
-
-            {item.description && <p className="mb-2">{item.description}</p>}
-
-            {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 className="timeline-event">
+              <div className="timeline-header mb-3 d-flex justify-content-between">
+                <h6 className="mb-0 text-body">{item.title}</h6>
+                <small className="text-body-secondary">
+                  <Tooltip text={formatUTCToLocalTime(item.timeAgo, true)}>
+                    {moment.utc(item.timeAgo).local().fromNow()}
+                  </Tooltip>
+                </small>
              </div>
-            )}

-            {item.users && item.users.length > 0 && (
-              <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.users.map((user, i) => (
-                    <li key={i} className="avatar me-1" title={user.name}>
-                      {user.avatar ? (
+              {item.description && <p className="mb-2">{item.description}</p>}
+
+              {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={user.avatar}
-                          alt={user.name}
-                          className="rounded-circle"
-                          width="32"
-                          height="32"
-                        />
-                      ) : (
-                        <Avatar
-                          firstName={user.firstName}
-                          lastName={user.lastName}
+                          src={att.icon}
+                          alt="file"
+                          width="15"
+                          className="me-2"
                        />
                      )}
-                    </li>
+                      <span className="h6 mb-0">{att.name}</span>
+                    </div>
                  ))}
-                </ul>
+                </div>
+              )}

-                {item.users?.length === 1 && (
-                  <div className="m-0">
-                    <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
-                    <small>{item.users[0].role}</small>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </li>
-      ))}
+              {item.users && item.users.length > 0 && (
+                <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.users.map((user, i) => (
+                      <li key={i} className="m-0" title={user.name}>
+                        {user.avatar ? (
+                          <img
+                            src={user.avatar}
+                            alt={user.name}
+                            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>
  );
 };
--- a/src/hooks/useExpense.js
+++ b/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 = () => {
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/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 })}
          >
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/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>
        )}
        
--- a/src/repositories/ExpsenseRepository.jsx
+++ b/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),
-  GetExpenseFilter: () => api.get('/api/Expense/filter'),
+  ActionOnExpense: (data) => api.post("/api/expense/action", data),
+  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;
--- a/src/utils/appUtils.js
+++ b/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,