spearated component for updated logs Expense and RequestedPayment

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,8 +22,8 @@ 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: 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,7 +13,7 @@ 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" key={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">
@@ -34,6 +35,7 @@ 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"
@@ -42,6 +44,8 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
                     removeFile(expenseToEdit ? file.documentId : idx);
                   }}
                 ></i>
+                </Tooltip>
+                
               </div>
             </div>
           </div>

src/components/Expenses/ViewExpense.jsx

@@ -9,7 +9,11 @@ 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 {
+  getColorNameFromHex,
+  getIconByFileType,
+  localToUtc,
+} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -38,7 +42,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 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate:localToUtc(formData.reimburseDate),
+      reimburseDate: localToUtc(formData.reimburseDate),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -106,12 +111,15 @@ 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">
+        <div className="col-12 col-md-7">
+          <div className="row">
+            <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">
@@ -214,7 +222,9 @@ const ViewExpense = ({ ExpenseId }) => {
                 >
                   Pre-Approved :
                 </label>
-            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
+                <div className="text-muted">
+                  {data.preApproved ? "Yes" : "No"}
+                </div>
               </div>
             </div>
 
@@ -297,10 +307,11 @@ const ViewExpense = ({ ExpenseId }) => {
               <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>
+              <label className="form-label me-2 mb-2 fw-semibold">
+                Attachment :
+              </label>
 
               <div className="d-flex flex-wrap gap-2">
                 {data?.documents?.map((doc) => {
@@ -363,8 +374,12 @@ const ViewExpense = ({ ExpenseId }) => {
                       <Avatar
                         size="xs"
                         classAvatar="m-0 me-1"
-                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
+                        firstName={
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                          data?.expensesReimburse?.reimburseBy?.firstName
+                        }
+                        lastName={
+                          data?.expensesReimburse?.reimburseBy?.lastName
+                        }
                       />
                       <span className="text-muted">
                         {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
@@ -374,8 +389,6 @@ const ViewExpense = ({ ExpenseId }) => {
                 )}
               </div>
             )}
-      <hr className="divider my-1 border-2 divider-primary my-2" />
-
             {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
               <>
                 {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
@@ -418,10 +431,13 @@ const ViewExpense = ({ ExpenseId }) => {
                   </div>
                 )}
                 <div className="col-12 mb-3 text-start">
-            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
+                  {((nextStatusWithPermission.length > 0 &&
+                    !IsRejectedExpense) ||
                     (IsRejectedExpense && isCreatedBy)) && (
                     <>
-                <Label className="form-label me-2 mb-0" required>Comment</Label>
+                      <Label className="form-label me-2 mb-0" required>
+                        Comment
+                      </Label>
                       <textarea
                         className="form-control form-control-sm"
                         {...register("comment")}
@@ -460,8 +476,14 @@ const ViewExpense = ({ ExpenseId }) => {
                 </div>
               </>
             )}
-
+          </div>
+        </div>
+        <div className="col-12 col-md-5">
+          <div className="row">
             <ExpenseStatusLogs data={data} />
+          </div>
+        </div>
+      </div>
     </form>
   );
 };

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

@@ -38,6 +38,7 @@ import {
   defaultPaymentRequestActionValues,
   PaymentRequestActionScheam,
 } from "./PaymentRequestSchema";
+import PaymentStatusLogs from "./PaymentStatusLogs";
 
 const ViewPaymentRequest = ({ requestId }) => {
   const { data, isLoading, isError, error, isFetching } =
@@ -474,7 +475,7 @@ const ViewPaymentRequest = ({ requestId }) => {
             <i className="bx bx-time-five me-2 "></i>{" "}
             <p className="fw-medium">TimeLine</p>
           </div>
-          <ExpenseStatusLogs data={data} />
+          <PaymentStatusLogs data={data} />
         </div>
       </div>
     </form>

src/pages/Expense/ExpensePage.jsx

@@ -196,7 +196,7 @@ const ExpensePage = () => {
         {viewExpense.view && (
           <GlobalModel
             isOpen
-            size="lg"
+            size="xl"
             modalType="top"
             closeModal={() => setViewExpense({ expenseId: null, view: false })}
           >