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">
+                <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>
+  );
+};

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

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,
@@ -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>
-         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</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>
+
         {/* 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,132 +191,89 @@ 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"
+                classAvatar="m-0 me-1"
                 firstName={data.createdBy?.firstName}
                 lastName={data.createdBy?.lastName}
               />
               <span className="text-muted">
-                  {`${data.createdBy?.firstName ?? ""} ${
+                {`${data.createdBy?.firstName ?? ""} ${data.createdBy?.lastName ?? ""}`.trim() || "N/A"}
-                    data.createdBy?.lastName ?? ""
-                  }`.trim() || "N/A"}
               </span>
             </div>
           </div>
-          </div>
         )}
-        <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" }}
-            >
               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}
               lastName={data.paidBy?.lastName}
             />
             <span className="text-muted">
-                {`${data.paidBy?.firstName ?? ""} ${
+              {`${data.paidBy?.firstName ?? ""} ${data.paidBy?.lastName ?? ""}`.trim() || "N/A"}
-                  data.paidBy?.lastName ?? ""
-                }`.trim() || "N/A"}
             </span>
           </div>
         </div>
-        </div>
 
-          <div className="text-start my-1">
+        {/* 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">
+        {/* 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="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                  className="d-flex align-items-center cusor-pointer"
-                style={{
-                  width: "80px",
-                  cursor: isImage ? "pointer" : "default",
-                }}
                   onClick={() => {
                     if (isImage) {
                       setDocumentView({
@@ -323,146 +283,30 @@ const ViewExpense = ({ ExpenseId }) => {
                     }
                   }}
                 >
-                <i
+                  <i className={`bx ${getIconByFileType(doc.contentType)}`} style={{ fontSize: "30px" }}></i>
-                  className={`bx ${getIconByFileType(doc.contentType)}`}
+                  <small className="text-center text-tiny text-truncate w-100" title={doc.fileName}>
-                  style={{ fontSize: "30px" }}
-                ></i>
-                <small
-                  className="text-center text-tiny text-truncate w-100"
-                  title={doc.fileName}
-                >
                     {doc.fileName}
                   </small>
                 </div>
               );
             })}
+            
           </div>
         </div>
 
-      {data.expensesReimburse && (
+        {/* ... your remaining conditional sections */}
-        <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-12 col-lg-5 col-xl-4">
-            <>
+      <div className="d-flex align-items-center text-secondary my-2">
-              <div className="col-md-6  d-flex align-items-center">
+       <i className='bx bx-time-five me-2'></i> <p className=" m-0">TimeLine</p>
-                <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>
-        </>
-      )}
-
       <ExpenseStatusLogs data={data} />
+    </div>
+  </div>
 </form>
+
   );
 };
 

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -1,26 +1,47 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
-import { useCurrencies, useProjectName } from '../../hooks/useProjects';
+import { useCurrencies, useProjectName } from "../../hooks/useProjects";
-import Label from '../common/Label';
+import Label from "../common/Label";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
+import { useExpenseCategory } from "../../hooks/masterHook/useMaster";
-import DatePicker from '../common/DatePicker';
+import DatePicker from "../common/DatePicker";
-import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
+import {
+  useCreatePaymentRequest,
+  usePayee,
+  usePaymentRequestDetail,
+  useUpdatePaymentRequest,
+} from "../../hooks/useExpense";
 
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { formatFileSize, localToUtc } from '../../utils/appUtils';
+import { formatFileSize, localToUtc } from "../../utils/appUtils";
-import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
+import {
-import { INR_CURRENCY_CODE } from '../../utils/constants';
+  defaultPaymentRequest,
-import { useProfile } from '../../hooks/useProfile';
+  PaymentRequestSchema,
+} from "./PaymentRequestSchema";
+import { INR_CURRENCY_CODE } from "../../utils/constants";
+import { useProfile } from "../../hooks/useProfile";
+import Filelist from "../Expenses/Filelist";
+import InputSuggestions from "../common/InputSuggestion";
 
 function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
-    const { data, isLoading, isError, error: requestError } = usePaymentRequestDetail(requestToEdit)
+  const {
-    // const data = {}
+    data,
+    isLoading,
+    isError,
+    error: requestError,
+  } = usePaymentRequestDetail(requestToEdit);
 
-    const { projectNames, loading: projectLoading, error, isError: isProjectError,
+  const {
+    projectNames,
+    loading: projectLoading,
+    error,
+    isError: isProjectError,
   } = useProjectName();
 
-    const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
+  const {
-
+    data: currencyData,
+    isLoading: currencyLoading,
+    isError: currencyError,
+  } = useCurrencies();
 
   const {
     ExpenseCategories,
@@ -29,9 +50,17 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   } = useExpenseCategory();
 
   const { profile } = useProfile();
-
+ const {data:Payees,isLoading:isPayeeLoaing,isError:isPayeeError,error:payeeError} = usePayee()
   const schema = PaymentRequestSchema(ExpenseCategories);
-    const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
+  const {
+    register,
+    control,
+    watch,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm({
     resolver: zodResolver(schema),
     defaultValues: defaultPaymentRequest,
   });
@@ -84,6 +113,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
       reader.onerror = (error) => reject(error);
     });
   const removeFile = (index) => {
+    debugger
     if (requestToEdit) {
       const newFiles = files.map((file, i) => {
         if (file.documentId !== index) return file;
@@ -104,13 +134,12 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
     closeModal();
   };
 
-    const { mutate: CreatePaymentRequest, isPending: createPending } = useCreatePaymentRequest(
+  const { mutate: CreatePaymentRequest, isPending: createPending } =
-        () => {
+    useCreatePaymentRequest(() => {
       handleClose();
-        }
+    });
-    );
+  const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(
-    const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
+    () => handleClose()
-        handleClose()
   );
 
   useEffect(() => {
@@ -125,28 +154,25 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         projectId: data.project.id || "",
         expenseCategoryId: data.expenseCategory.id || "",
         isAdvancePayment: data.isAdvancePayment || false,
-                billAttachments: data.documents
+        billAttachments: data.attachments
-                    ? data.documents.map((doc) => ({
+          ? data?.attachments?.map((doc) => ({
               fileName: doc.fileName,
               base64Data: null,
               contentType: doc.contentType,
-                        documentId: doc.documentId,
+              documentId: doc.id,
               fileSize: 0,
               description: "",
               preSignedUrl: doc.preSignedUrl,
               isActive: doc.isActive ?? true,
             }))
           : [],
-
       });
     }
   }, [data, reset]);
 
   useEffect(() => {
     if (!requestToEdit && currencyData && currencyData.length > 0) {
-            const inrCurrency = currencyData.find(
+      const inrCurrency = currencyData.find((c) => c.id === INR_CURRENCY_CODE);
-                (c) => c.id === INR_CURRENCY_CODE
-            );
       if (inrCurrency) {
         setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
       }
@@ -154,14 +180,17 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   }, [currencyData, requestToEdit, setValue]);
 
   const onSubmit = (fromdata) => {
-
     let payload = {
       ...fromdata,
       dueDate: localToUtc(fromdata.dueDate),
-            payee:isItself ? profile?.employeeInfo?.id : fromdata.payee
+      payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
     };
     if (requestToEdit) {
-            const editPayload = { ...payload, id: data.id, payee:isItself ? profile?.employeeInfo?.id : fromdata.payee };
+      const editPayload = {
+        ...payload,
+        id: data.id,
+        payee: isItself ? profile?.employeeInfo?.id : fromdata.payee,
+      };
       PaymentRequestUpdate({ id: data.id, payload: editPayload });
     } else {
       CreatePaymentRequest(payload);
@@ -169,8 +198,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   };
   const handleSetItSelf = (e) => {
     setisItself(e.target.value);
-setValue('payee',profile?.employeeInfo.id)
+    setValue("payee", `${profile?.employeeInfo.firstName} ${profile?.employeeInfo.lastName}`);
-}
+  };
 
   return (
     <div className="container p-3">
@@ -232,7 +261,6 @@ setValue('payee',profile?.employeeInfo.id)
               </small>
             )}
           </div>
-
         </div>
 
         {/* Title and Advance Payment  */}
@@ -248,9 +276,7 @@ setValue('payee',profile?.employeeInfo.id)
               {...register("title")}
             />
             {errors.title && (
-                            <small className="danger-text">
+              <small className="danger-text">{errors.title.message}</small>
-                                {errors.title.message}
-                            </small>
             )}
           </div>
 
@@ -262,7 +288,8 @@ setValue('payee',profile?.employeeInfo.id)
               id="isAdvancePayment"
               className="form-select form-select-sm"
               {...register("isAdvancePayment", {
-                                setValueAs: (v) => v === "true" ? true : v === "false" ? false : undefined,
+                setValueAs: (v) =>
+                  v === "true" ? true : v === "false" ? false : undefined,
               })}
             >
               <option value="">Select Option</option>
@@ -270,14 +297,13 @@ setValue('payee',profile?.employeeInfo.id)
               <option value="false">False</option>
             </select>
             {errors.isAdvancePayment && (
-                            <small className="danger-text">{errors.isAdvancePayment.message}</small>
+              <small className="danger-text">
+                {errors.isAdvancePayment.message}
+              </small>
             )}
           </div>
-
-
         </div>
 
-
         {/* Date and Amount */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
@@ -288,13 +314,11 @@ setValue('payee',profile?.employeeInfo.id)
               name="dueDate"
               control={control}
               minDate={new Date()}
-                            className='w-100'
+              className="w-100"
             />
 
             {errors.dueDate && (
-                            <small className="danger-text">
+              <small className="danger-text">{errors.dueDate.message}</small>
-                                {errors.dueDate.message}
-                            </small>
             )}
           </div>
 
@@ -323,18 +347,17 @@ setValue('payee',profile?.employeeInfo.id)
             <Label htmlFor="payee" className="form-label" required>
               Payee (Supplier Name/Transporter Name/Other)
             </Label>
-                        <input
+            <InputSuggestions
-                            type="text"
+              organizationList={Payees}
-                            id="payee"
+              value={watch("payee") || ""}
-                            className="form-control form-control-sm"
+              onChange={(val) =>
-                            {...register("payee")}
+                setValue("payee", val, { shouldValidate: true })
-                                disabled={isItself}
+              }
-
+              error={errors.payee?.message}
             />
+            
             {errors.payee && (
-                            <small className="danger-text">
+              <small className="danger-text">{errors.payee.message}</small>
-                                {errors.payee.message}
-                            </small>
             )}
 
             {/* Checkbox below input */}
@@ -352,7 +375,6 @@ setValue('payee',profile?.employeeInfo.id)
             </div>
           </div>
 
-
           <div className="col-md-6">
             <Label htmlFor="currencyId" className="form-label" required>
               Currency
@@ -378,7 +400,6 @@ setValue('payee',profile?.employeeInfo.id)
               <small className="danger-text">{errors.currencyId.message}</small>
             )}
           </div>
-
         </div>
 
         {/* Description  */}
@@ -404,7 +425,7 @@ setValue('payee',profile?.employeeInfo.id)
         {/* Upload Document  */}
         <div className="row my-2 text-start">
           <div className="col-md-12">
-                        <Label className="form-label">
+            <Label className="form-label" required>
               Upload Bill{" "}
             </Label>
 
@@ -437,42 +458,12 @@ setValue('payee',profile?.employeeInfo.id)
                 {errors.billAttachments.message}
               </small>
             )}
-                        {Array.isArray(files) && files.length > 0 && (
+            {files.length > 0 && (
-
+              <Filelist
-                            <div className="d-block">
+                files={files}
-                                {files
+                removeFile={removeFile}
-                                    .filter((file) => {
+                expenseToEdit={requestToEdit}
-                                        if (requestToEdit) {
+              />
-                                            return file.isActive;
-                                        }
-                                        return true;
-                                    })
-                                    .map((file, idx) => (
-                                        <a
-                                            key={idx}
-                                            className="d-flex justify-content-between text-start p-1"
-                                            href={file.preSignedUrl || "#"}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            <div>
-                                                <span className="mb-0 text-secondary small d-block">
-                                                    {file.fileName}
-                                                </span>
-                                                <span className="text-body-secondary small d-block">
-                                                    {file.fileSize ? formatFileSize(file.fileSize) : ""}
-                                                </span>
-                                            </div>
-                                            <i
-                                                className="bx bx-trash bx-sm cursor-pointer text-danger"
-                                                onClick={(e) => {
-                                                    e.preventDefault();
-                                                    removeFile(requestToEdit ? file.documentId : idx);
-                                                }}
-                                            ></i>
-                                        </a>
-                                    ))}
-                            </div>
             )}
 
             {Array.isArray(errors.billAttachments) &&
@@ -489,7 +480,6 @@ setValue('payee',profile?.employeeInfo.id)
           </div>
         </div>
         <div className="d-flex justify-content-end gap-3">
-
           <button
             type="reset"
             disabled={createPending || isPending}
@@ -510,10 +500,9 @@ setValue('payee',profile?.employeeInfo.id)
               : "Submit"}
           </button>
         </div>
-
       </form>
     </div>
-    )
+  );
 }
 
-export default ManagePaymentRequest
+export default ManagePaymentRequest;

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

@@ -8,16 +8,13 @@ const ALLOWED_TYPES = [
   "image/jpeg",
 ];
 export const PaymentRequestSchema = (expenseTypes, isItself) => {
-  return z
+  return z.object({
-    .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
+    currencyId: z.string().min(1, { message: "Currency is required" }),
-        .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" }),
@@ -35,9 +32,7 @@ export const PaymentRequestSchema = (expenseTypes,isItself) => {
         z.object({
           fileName: z.string().min(1, { message: "Filename is required" }),
           base64Data: z.string().nullable(),
-            contentType: z
+          contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
-              .string()
-              .refine((val) => ALLOWED_TYPES.includes(val), {
             message: "Only PDF, PNG, JPG, or JPEG files are allowed",
           }),
           documentId: z.string().optional(),
@@ -47,12 +42,9 @@ export const PaymentRequestSchema = (expenseTypes,isItself) => {
           description: z.string().optional(),
           isActive: z.boolean().default(true),
         })
-        ).refine((data)=>{
+      )
-          if(isItself){
+      .optional(),
-            payee.z.string().optional();
+  });
-          }
-        }),
-    })
 };
 
 export const defaultPaymentRequest = {
@@ -68,7 +60,6 @@ export const defaultPaymentRequest = {
   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,7 +11,8 @@ const Timeline = ({ items = [], transparent = true }) => {
         transparent ? "timeline-transparent text-start" : ""
       }`}
     >
-      {items.map((item) => (
+      {items &&
+        items?.map((item) => (
           <li
             key={item.id}
             className={`timeline-item ${
@@ -24,7 +28,11 @@ const Timeline = ({ items = [], transparent = true }) => {
             <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>
+                <small className="text-body-secondary">
+                  <Tooltip text={formatUTCToLocalTime(item.timeAgo, true)}>
+                    {moment.utc(item.timeAgo).local().fromNow()}
+                  </Tooltip>
+                </small>
               </div>
 
               {item.description && <p className="mb-2">{item.description}</p>}
@@ -54,7 +62,7 @@ const Timeline = ({ items = [], transparent = true }) => {
                 <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}>
+                      <li key={i} className="m-0" title={user.name}>
                         {user.avatar ? (
                           <img
                             src={user.avatar}
@@ -65,6 +73,7 @@ const Timeline = ({ items = [], transparent = true }) => {
                           />
                         ) : (
                           <Avatar
+                            size="xs"
                             firstName={user.firstName}
                             lastName={user.lastName}
                           />
@@ -75,7 +84,7 @@ const Timeline = ({ items = [], transparent = true }) => {
 
                   {item.users?.length === 1 && (
                     <div className="m-0">
-                    <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
+                      <p className="mb-0  text-xs fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
                       <small>{item.users[0].role}</small>
                     </div>
                   )}
@@ -84,6 +93,17 @@ const Timeline = ({ items = [], transparent = true }) => {
             </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(() => {
@@ -128,6 +135,17 @@ const PaymentRequestPage = () => {
           </GlobalModel>
         )}
 
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            key={ViewDocument.Image ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+          >
+            <PreviewDocument imageUrl={ViewDocument.Image} />
+          </GlobalModel>
+        )}
+        
       </div>
     </PaymentRequestContext.Provider>
   );

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,