From f688a7169e853b66432a959d09d4020a7cf4bf2c Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Tue, 4 Nov 2025 22:54:10 +0530 Subject: [PATCH] spearated component for updated logs Expense and RequestedPayment --- src/components/Expenses/ExpenseStatusLogs.jsx | 50 +- src/components/Expenses/Filelist.jsx | 10 +- src/components/Expenses/ViewExpense.jsx | 720 +++++++++--------- .../PaymentRequest/PaymentStatusLogs.jsx | 93 +++ .../PaymentRequest/ViewPaymentRequest.jsx | 3 +- src/pages/Expense/ExpensePage.jsx | 2 +- 6 files changed, 480 insertions(+), 398 deletions(-) create mode 100644 src/components/PaymentRequest/PaymentStatusLogs.jsx diff --git a/src/components/Expenses/ExpenseStatusLogs.jsx b/src/components/Expenses/ExpenseStatusLogs.jsx index db9ac0cc..83ee2e3a 100644 --- 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,8 +22,8 @@ const ExpenseStatusLogs = ({ data }) => { const timelineData = useMemo(() => { return logsToShow.map((log, index) => ({ id: index + 1, - title: log.nextStatus?.name || "Status Updated", - description: log.nextStatus?.description || "", + 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 (
- {/*
- {logsToShow.map((log) => ( -
- - -
-
-
- {`${log.updatedBy.firstName} ${log.updatedBy.lastName}`} - - {log.action} - - - {formatUTCToLocalTime(log.updateAt, true)} - -
-
- {log.comment} -
-
-
-
- ))} -
- - {sortedLogs.length > visibleCount && ( -
- -
- )} */} +
diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx index e67830b4..41f52bd2 100644 --- 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 ( -
+
{files .filter((file) => { if (expenseToEdit) { @@ -12,7 +13,7 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => { return true; }) .map((file, idx) => ( -
+
{/* File icon and info */}
@@ -34,7 +35,8 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
- + { @@ -42,6 +44,8 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => { removeFile(expenseToEdit ? file.documentId : idx); }} > + +
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx index ac5963cd..3e2a2756 100644 --- a/src/components/Expenses/ViewExpense.jsx +++ b/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,362 +111,379 @@ const ViewExpense = ({ ExpenseId }) => { return (
+
+
Expense Details
+
-
-
Expense Details
-
-
-
{data?.expenseUId}
- {/* Row 1 */} -
-
- -
- {formatUTCToLocalTime(data?.transactionDate)} +
+
+
+ {data?.expenseUId}
-
-
-
-
- -
{data?.expensesType?.name}
-
-
- - {/* Row 2 */} -
-
- -
{data?.supplerName}
-
-
-
-
- -
₹ {data.amount}
-
-
- - {/* Row 3 */} -
-
- -
{data?.paymentMode?.name}
-
-
- {data?.gstNumber && ( -
-
- -
{data?.gstNumber}
-
-
- )} - - {/* Row 4 */} -
-
- - - {data?.status?.name} - -
-
-
-
- -
{data.preApproved ? "Yes" : "No"}
-
-
- -
-
- -
{data?.project?.name}
-
-
-
-
- -
- {formatUTCToLocalTime(data?.createdAt, true)} -
-
-
- - {/* Row 6 */} - {data.createdBy && ( -
-
- -
- - - {`${data.createdBy?.firstName ?? ""} ${ - data.createdBy?.lastName ?? "" - }`.trim() || "N/A"} - -
-
-
- )} -
-
- -
- - - {`${data.paidBy?.firstName ?? ""} ${ - data.paidBy?.lastName ?? "" - }`.trim() || "N/A"} - -
-
-
- -
- -
{data?.description}
-
-
- -
- - -
- {data?.documents?.map((doc) => { - const isImage = doc.contentType?.includes("image"); - - return ( -
{ - if (isImage) { - setDocumentView({ - IsOpen: true, - Image: doc.preSignedUrl, - }); - } - }} - > - - +
+ -
- ); - })} -
-
- - {data.expensesReimburse && ( -
-
- - {data.expensesReimburse.reimburseTransactionId || "N/A"} -
-
- - {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)} -
- - {data.expensesReimburse && ( - <> -
- - - - {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()} - -
- - )} -
- )} -
- - {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && ( - <> - {IsPaymentProcess && nextStatusWithPermission?.length > 0 && ( -
-
- - - {errors.reimburseTransactionId && ( - - {errors.reimburseTransactionId.message} - - )} -
-
- - - {errors.reimburseDate && ( - - {errors.reimburseDate.message} - - )} -
-
- - +
+ {formatUTCToLocalTime(data?.transactionDate)} +
- )} -
- {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) || - (IsRejectedExpense && isCreatedBy)) && ( - <> - -