Implementing Get and Correct API in Recurring.

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 */}
                 <div className="row my-2 text-start">
-
                     <div className="col-md-6">
                         <Label htmlFor="paymentBufferDays" className="form-label" required>
                             Payment Buffer Days
@@ -367,6 +366,31 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
                     </div>
                 </div>
 
+                {/* Frequency */}
+
+
+                <div className="col-md-6 text-start">
+                    <Label htmlFor="frequency" className="form-label" required>
+                        Frequency
+                    </Label>
+                    <select
+                        id="frequency"
+                        className="form-select form-select-sm"
+                        {...register("frequency", { valueAsNumber: true })}
+                    >
+                        <option value="">Select Frequency</option>
+                        {Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
+                            <option key={key} value={key}>
+                                {label}
+                            </option>
+                        ))}
+                    </select>
+                    {errors.frequency && (
+                        <small className="danger-text">{errors.frequency.message}</small>
+                    )}
+                </div>
+
+
                 {/* Description  */}
                 <div className="row my-2 text-start">
                     <div className="col-md-12">

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 { formatUTCToLocalTime } from "../../utils/dateUtils";
-import Avatar from "../common/Avatar";
 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",
+            label: "Title",
-            align: "text-start mx-2",
+            align: "text-start",
-            getValue: (e) => e.title || "N/A",
+            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",
+            getValue: (e) =>
-        },
+                e?.frequency !== undefined && e?.frequency !== null
-        {
+                    ? FREQUENCY_FOR_RECURRING[e.frequency] || "N/A"
-            key: "createdAt",
+                    : "N/A",
-            label: "Next Generation Date",
-            align: "text-start",
-            getValue: (e) => formatUTCToLocalTime(e?.createdAt),
         },
         {
             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);
 
@@ -126,39 +117,32 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
         );
 
     const recurringExpenseData = data?.data || [];
-    const totalPages = data?.data?.totalPages || 1;
+    const totalPages = data?.totalPages || 1;
 
-console.log("Sharma",recurringExpenseData)
     if (isError) {
         return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
     }
+
     const header = [
-        "Request ID",
+        "Template Name",
-        "Request Title",
+        "Frequency",
-        "Submitted By",
+        "Next Generation Date",
-        "Submitted On",
+        "Last Generation Date",
-        "Amount",
         "Status",
         "Action",
     ];
+
     if (isLoading) return <ExpenseTableSkeleton headers={header} />;
 
-    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 (
+        // return (
-            (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT ||
+        //     (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT ||
-                EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) &&
+        //         EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) &&
-            recurringExpense?.createdBy?.id === SelfId
+        //     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)
                 <ConfirmModal
                     isOpen={IsDeleteModalOpen}
                     type="delete"
-                    header="Delete Expense"
+                    header="Delete Recurring Expense"
-                    message="Are you sure you want delete?"
+                    message="Are you sure you want to delete?"
                     onSubmit={handleDelete}
                     onClose={() => setIsDeleteModalOpen(false)}
-                    // loading={isPending}
                     paramData={deletingId}
                 />
             )}
+
             <div className="card page-min-h table-responsive px-sm-4">
                 <div className="card-datatable" id="payment-request-table">
                     <table className="table border-top dataTable text-nowrap align-middle">
@@ -207,27 +191,10 @@ console.log("Sharma",recurringExpenseData)
                         </thead>
 
                         <tbody>
-                            {Object.keys(grouped).length > 0 ? (
+                            {recurringExpenseData.length > 0 ? (
-                                Object.values(grouped).map(({ key, displayField, items }) => (
+                                recurringExpenseData.map((recurringExpense) => (
-                                    <React.Fragment key={key}>
-                                        <tr className="tr-group text-dark">
-                                            <td colSpan={8} className="text-start">
-                                                <div className="d-flex align-items-center">
-                                                    {" "}
-                                                    <small className="fs-6 py-1">
-                                                        {displayField} :{" "}
-                                                    </small>{" "}
-                                                    <small className="fs-6  ms-3">
-                                                        {IsGroupedByDate ? formatUTCToLocalTime(key) : key}
-                                                    </small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        {items?.map((recurringExpense) => (
                                     <tr key={recurringExpense.id}>
-                                                {recurringExpenseColumns.map(
+                                        {recurringExpenseColumns.map((col) => (
-                                                    (col) =>
-                                                        (col.isAlwaysVisible || groupBy !== col.key) && (
                                             <td
                                                 key={col.key}
                                                 className={`d-table-cell ${col.align ?? ""}`}
@@ -236,35 +203,27 @@ console.log("Sharma",recurringExpenseData)
                                                     ? col?.customRender(recurringExpense)
                                                     : col?.getValue(recurringExpense)}
                                             </td>
-                                                        )
+                                        ))}
-                                                )}
                                         <td className="sticky-action-column bg-white">
                                             <div className="d-flex justify-content-center gap-2">
                                                 <i
                                                     className="bx bx-show text-primary cursor-pointer"
-                                                            onClick={() =>
+                                                // onClick={() =>
-                                                                setVieRequest({
+                                                //     setVieRequest({
-                                                                    requestId: recurringExpense.id,
+                                                //         requestId: recurringExpense.id,
-                                                                    view: true,
+                                                //         view: true,
-                                                                })
+                                                //     })
-                                                            }
+                                                // }
                                                 ></i>
-                                                        {/* {canEditExpense(recurringExpense) && (
+                                                {/* Uncomment for edit/delete actions */}
+
                                                 <div className="dropdown z-2">
                                                     <button
                                                         type="button"
                                                         className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
                                                         data-bs-toggle="dropdown"
-                                                                    aria-expanded="false"
                                                     >
-                                                                    <i
+                                                        <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                                                                        className="bx bx-dots-vertical-rounded text-muted p-0"
-                                                                        data-bs-toggle="tooltip"
-                                                                        data-bs-offset="0,8"
-                                                                        data-bs-placement="top"
-                                                                        data-bs-custom-class="tooltip-dark"
-                                                                        title="More Action"
-                                                                    ></i>
                                                     </button>
                                                     <ul className="dropdown-menu dropdown-menu-end w-auto">
                                                         <li
@@ -277,13 +236,10 @@ console.log("Sharma",recurringExpenseData)
                                                         >
                                                             <a className="dropdown-item px-2 cursor-pointer py-1">
                                                                 <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                                                            <span className="align-left ">
                                                                 Modify
-                                                                            </span>
                                                             </a>
                                                         </li>
 
-                                                                    {canDetetExpense(recurringExpense) && (
                                                         <li
                                                             onClick={() => {
                                                                 setIsDeleteModalOpen(true);
@@ -292,31 +248,24 @@ console.log("Sharma",recurringExpenseData)
                                                         >
                                                             <a className="dropdown-item px-2 cursor-pointer py-1">
                                                                 <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                                                                <span className="align-left">
                                                                 Delete
-                                                                                </span>
                                                             </a>
                                                         </li>
-                                                                    )}
+
                                                     </ul>
                                                 </div>
-                                                        )} */}
+
                                             </div>
                                         </td>
                                     </tr>
-                                        ))}
-                                    </React.Fragment>
                                 ))
                             ) : (
                                 <tr>
-                                    <td colSpan={8} className="text-center border-0 ">
+                                    <td colSpan={recurringExpenseColumns.length + 1} className="text-center border-0 py-8">
-                                        <div className="py-8">
+                                        <p>No Recurring Expense Found</p>
-                                            <p>No Request Found</p>
-                                        </div>
                                     </td>
                                 </tr>
                             )}
-
                         </tbody>
                     </table>
                 </div>
@@ -329,8 +278,7 @@ console.log("Sharma",recurringExpenseData)
                                 {[...Array(totalPages)].map((_, index) => (
                                     <li
                                         key={index}
-                                        className={`page-item ${currentPage === index + 1 ? "active" : ""
+                                        className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
-                                            }`}
                                     >
                                         <button
                                             className="page-link"

src/hooks/useExpense.js

@@ -396,7 +396,7 @@ export const useCreateRecurringExpense = (onSuccessCallBack) => {
     },
     
     onSuccess: (_, variables) => {
-      queryClient.invalidateQueries({ queryKey: ["recurringExpense"] });
+      queryClient.invalidateQueries({ queryKey: ["recurringExpenseList"] });
       showToast("Recurring Expense Created Successfully", "success");
       if (onSuccessCallBack) onSuccessCallBack();
     },
@@ -437,7 +437,7 @@ export const useRecurringExpenseList = (
   searchString = "",
 ) => {
   return useQuery({
-    queryKey: ["paymentRequestList",pageSize,pageNumber,filter,isActive,searchString],
+    queryKey: ["recurringExpenseList",pageSize,pageNumber,filter,isActive,searchString],
     queryFn: async()=>{
       const resp = await ExpenseRepository.GetRecurringExpenseList(pageSize,pageNumber,filter,isActive,searchString);
       return resp.data;

src/utils/constants.jsx

@@ -177,4 +177,13 @@ export const ALLOW_PROJECTSTATUS_ID = [
 
 export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
 
+export const FREQUENCY_FOR_RECURRING = {
+  0: "Monthly",
+  1: "Quarterly",
+  2: "Half-Yearly",
+  3: "Yearly",
+  4:"Dailty",
+  5:"Weekly"
+};
+