From 3b318a672c8055c181ec18e2a4c69fcf07db4847 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 5 Nov 2025 12:01:05 +0530 Subject: [PATCH] Implementing Get and Correct API in Recurring. --- .../ManageRecurringExpense.jsx | 28 +- .../RecurringExpense/RecurringExpenseList.jsx | 336 ++++++++---------- src/hooks/useExpense.js | 4 +- src/utils/constants.jsx | 9 + 4 files changed, 179 insertions(+), 198 deletions(-) diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx index 4afe79c1..5d35d811 100644 --- a/src/components/RecurringExpense/ManageRecurringExpense.jsx +++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx @@ -5,7 +5,7 @@ import { useExpenseCategory, useRecurringStatus } from '../../hooks/masterHook/u import DatePicker from '../common/DatePicker'; import { zodResolver } from '@hookform/resolvers/zod'; import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema'; -import { INR_CURRENCY_CODE } from '../../utils/constants'; +import { FREQUENCY_FOR_RECURRING, INR_CURRENCY_CODE } from '../../utils/constants'; import { useCurrencies, useProjectName } from '../../hooks/useProjects'; import { useCreateRecurringExpense, useUpdateRecurringExpense } from '../../hooks/useExpense'; @@ -332,7 +332,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) { {/* Payment Buffer Days and Number of Iteration */}
-
+ {/* Frequency */} + + +
+ + + {errors.frequency && ( + {errors.frequency.message} + )} +
+ + {/* Description */}
diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx index b430d30e..c0504bfa 100644 --- a/src/components/RecurringExpense/RecurringExpenseList.jsx +++ b/src/components/RecurringExpense/RecurringExpenseList.jsx @@ -2,15 +2,14 @@ import React, { useState } from "react"; import { EXPENSE_DRAFT, EXPENSE_REJECTEDBY, + FREQUENCY_FOR_RECURRING, ITEMS_PER_PAGE, } from "../../utils/constants"; import { formatCurrency, - getColorNameFromHex, useDebounce, } from "../../utils/appUtils"; -import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils"; -import Avatar from "../common/Avatar"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton"; import ConfirmModal from "../common/ConfirmModal"; import { useNavigate } from "react-router-dom"; @@ -19,100 +18,92 @@ import Error from "../common/Error"; import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage"; import { useRecurringExpenseList } from "../../hooks/useExpense"; -const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => { +const RecurringExpenseList = ({ search }) => { const { setManageRequest, setVieRequest } = useRecurringExpenseContext(); const navigate = useNavigate(); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [deletingId, setDeletingId] = useState(null); + const SelfId = useSelector( (store) => store?.globalVariables?.loginUser?.employeeInfo?.id ); - - const groupByField = (items, field) => { - return items.reduce((acc, item) => { - let key; - let displayField; - - switch (field) { - case "transactionDate": - key = item?.transactionDate?.split("T")[0]; - displayField = "Transaction Date"; - break; - case "status": - key = item?.status?.displayName || "Unknown"; - displayField = "Status"; - break; - case "submittedBy": - key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? "" - }`.trim(); - displayField = "Submitted By"; - break; - case "project": - key = item?.project?.name || "Unknown Project"; - displayField = "Project"; - break; - case "paymentMode": - key = item?.paymentMode?.name || "Unknown Mode"; - displayField = "Payment Mode"; - break; - case "expensesType": - key = item?.expensesType?.name || "Unknown Type"; - displayField = "Expense Category"; - break; - case "createdAt": - key = item?.createdAt?.split("T")[0] || "Unknown Date"; - displayField = "Created Date"; - break; - default: - key = "Others"; - displayField = "Others"; - } - - const groupKey = `${field}_${key}`; // unique key for object property - if (!acc[groupKey]) { - acc[groupKey] = { key, displayField, items: [] }; - } - - acc[groupKey].items.push(item); - return acc; - }, {}); - }; - const recurringExpenseColumns = [ + { + key: "recurringPaymentUId", + label: "Recurring Payment ID", + align: "text-start ps-2", + getValue: (e) => e?.recurringPaymentUId || "N/A", + }, + { + key: "expenseCategory", + label: "Category", + align: "text-start", + getValue: (e) => e?.expenseCategory?.name || "N/A", + }, { key: "title", - label: "Template Name", - align: "text-start mx-2", - getValue: (e) => e.title || "N/A", + label: "Title", + align: "text-start", + getValue: (e) => e?.title || "N/A", + }, + { + key: "strikeDate", + label: "Strike Date", + align: "text-start", + getValue: (e) => + e?.strikeDate ? formatUTCToLocalTime(e.strikeDate) : "N/A", + }, + { + key: "amount", + label: "Amount", + align: "text-start", + getValue: (e) => + e?.amount + ? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}` + : "N/A", + }, + { + key: "payee", + label: "Payee", + align: "text-start", + getValue: (e) => e?.payee || "N/A", }, { key: "frequency", label: "Frequency", align: "text-start", - getValue: (e) => e.frequency || "N/A", - }, - { - key: "createdAt", - label: "Next Generation Date", - align: "text-start", - getValue: (e) => formatUTCToLocalTime(e?.createdAt), + getValue: (e) => + e?.frequency !== undefined && e?.frequency !== null + ? FREQUENCY_FOR_RECURRING[e.frequency] || "N/A" + : "N/A", }, { key: "latestPRGeneratedAt", label: "Last Generation Date", align: "text-start", - getValue: (e) => formatUTCToLocalTime(e?.latestPRGeneratedAt), + getValue: (e) => + e?.latestPRGeneratedAt + ? formatUTCToLocalTime(e.latestPRGeneratedAt) + : "N/A", + }, + { + key: "createdAt", + label: "Next Generation Date", + align: "text-start", + getValue: (e) => + e?.createdAt ? formatUTCToLocalTime(e.createdAt) : "N/A", }, { key: "status", label: "Status", align: "text-start", - getValue: (e) => formatUTCToLocalTime(e?.status), + getValue: (e) => e?.status?.name || "N/A", }, - + ]; + const [currentPage, setCurrentPage] = useState(1); const debouncedSearch = useDebounce(search, 500); @@ -125,40 +116,33 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => { debouncedSearch ); - const recurringExpenseData= data?.data || []; - const totalPages = data?.data?.totalPages || 1; + const recurringExpenseData = data?.data || []; + const totalPages = data?.totalPages || 1; -console.log("Sharma",recurringExpenseData) if (isError) { return ; } + const header = [ - "Request ID", - "Request Title", - "Submitted By", - "Submitted On", - "Amount", + "Template Name", + "Frequency", + "Next Generation Date", + "Last Generation Date", "Status", "Action", ]; + if (isLoading) return ; - const grouped = groupBy - ? groupByField(data?.data ?? [], groupBy) - : { All: data?.data ?? [] }; - const IsGroupedByDate = [ - { key: "transactionDate", displayField: "Transaction Date" }, - { key: "createdAt", displayField: "created Date" }, - ]?.includes(groupBy); - const canEditExpense = (recurringExpense) => { - return ( - (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT || - EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) && - recurringExpense?.createdBy?.id === SelfId - ); + // return ( + // (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT || + // EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) && + // recurringExpense?.createdBy?.id === SelfId + // ); }; - const canDetetExpense = (request) => { + + const canDeleteExpense = (request) => { return ( request?.expenseStatus?.id === EXPENSE_DRAFT && request?.createdBy?.id === SelfId @@ -184,14 +168,14 @@ console.log("Sharma",recurringExpenseData) setIsDeleteModalOpen(false)} - // loading={isPending} paramData={deletingId} /> )} +
@@ -207,116 +191,81 @@ console.log("Sharma",recurringExpenseData) - {Object.keys(grouped).length > 0 ? ( - Object.values(grouped).map(({ key, displayField, items }) => ( - - - + {recurringExpenseColumns.map((col) => ( + - - {items?.map((recurringExpense) => ( - - {recurringExpenseColumns.map( - (col) => - (col.isAlwaysVisible || groupBy !== col.key) && ( - - ) - )} - - - ))} - +
  • { + setIsDeleteModalOpen(true); + setDeletingId(recurringExpense.id); + }} + > + + + Delete + +
    • + + + + + + + )) ) : ( - )} -
    -
    - {" "} - - {displayField} :{" "} - {" "} - - {IsGroupedByDate ? formatUTCToLocalTime(key) : key} - -
    + {recurringExpenseData.length > 0 ? ( + recurringExpenseData.map((recurringExpense) => ( +
    + {col?.customRender + ? col?.customRender(recurringExpense) + : col?.getValue(recurringExpense)}
    - {col?.customRender - ? col?.customRender(recurringExpense) - : col?.getValue(recurringExpense)} - -
    - +
    + + // setVieRequest({ + // requestId: recurringExpense.id, + // view: true, + // }) + // } + > + {/* Uncomment for edit/delete actions */} + +
    + +
      +
    • - setVieRequest({ - requestId: recurringExpense.id, - view: true, + setManageRequest({ + IsOpen: true, + RequestId: recurringExpense.id, }) } - > - {/* {canEditExpense(recurringExpense) && ( -
      - -
        -
      • - setManageRequest({ - IsOpen: true, - RequestId: recurringExpense.id, - }) - } - > - - - - Modify - - -
        • + > + + + Modify + + - {canDetetExpense(recurringExpense) && ( -
      • { - setIsDeleteModalOpen(true); - setDeletingId(recurringExpense.id); - }} - > - - - - Delete - - -
        • - )} -
      -
      - )} */} -
    -
    -
    -

    No Request Found

    -
    +     		+

    No Recurring Expense Found
    @@ -329,8 +278,7 @@ console.log("Sharma",recurringExpenseData) {[...Array(totalPages)].map((_, index) => (