admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Implementing Get and Correct API in Recurring.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-05 12:01:05 +05:30
parent e868d27d5f
commit 3b318a672c
4 changed files with 179 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/RecurringExpense/ManageRecurringExpense.jsx
View File

@ -5,7 +5,7 @@ import { useExpenseCategory, useRecurringStatus } from '../../hooks/masterHook/u
import DatePicker from '../common/DatePicker'; import DatePicker from '../common/DatePicker';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema'; 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 { useCurrencies, useProjectName } from '../../hooks/useProjects';
import { useCreateRecurringExpense, useUpdateRecurringExpense } from '../../hooks/useExpense'; import { useCreateRecurringExpense, useUpdateRecurringExpense } from '../../hooks/useExpense';
@ -332,7 +332,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
{/* Payment Buffer Days and Number of Iteration */} {/* Payment Buffer Days and Number of Iteration */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-6"> <div className="col-md-6">
<Label htmlFor="paymentBufferDays" className="form-label" required> <Label htmlFor="paymentBufferDays" className="form-label" required>
Payment Buffer Days Payment Buffer Days
@ -367,6 +366,31 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
</div> </div>
</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 */} {/* Description */}
<div className="row my-2 text-start"> <div className="row my-2 text-start">
<div className="col-md-12"> <div className="col-md-12">

336
src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -2,15 +2,14 @@ import React, { useState } from "react";
import { import {
EXPENSE_DRAFT, EXPENSE_DRAFT,
EXPENSE_REJECTEDBY, EXPENSE_REJECTEDBY,
FREQUENCY_FOR_RECURRING,
ITEMS_PER_PAGE, ITEMS_PER_PAGE,
} from "../../utils/constants"; } from "../../utils/constants";
import { import {
formatCurrency, formatCurrency,
getColorNameFromHex,
useDebounce, useDebounce,
} from "../../utils/appUtils"; } 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 { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal"; import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -19,100 +18,92 @@ import Error from "../common/Error";
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage"; import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
import { useRecurringExpenseList } from "../../hooks/useExpense"; import { useRecurringExpenseList } from "../../hooks/useExpense";
const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => { const RecurringExpenseList = ({ search }) => {
const { setManageRequest, setVieRequest } = useRecurringExpenseContext(); const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [deletingId, setDeletingId] = useState(null); const [deletingId, setDeletingId] = useState(null);
const SelfId = useSelector( const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id (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 = [ 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", 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", key: "frequency",
label: "Frequency", label: "Frequency",
align: "text-start", 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", key: "latestPRGeneratedAt",
label: "Last Generation Date", label: "Last Generation Date",
align: "text-start", 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", key: "status",
label: "Status", label: "Status",
align: "text-start", align: "text-start",
getValue: (e) => formatUTCToLocalTime(e?.status), getValue: (e) => e?.status?.name || "N/A",
}, },
]; ];
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const debouncedSearch = useDebounce(search, 500); const debouncedSearch = useDebounce(search, 500);
@ -125,40 +116,33 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
debouncedSearch debouncedSearch
); );
const recurringExpenseData= data?.data || []; const recurringExpenseData = data?.data || [];
const totalPages = data?.data?.totalPages || 1; const totalPages = data?.totalPages || 1;
console.log("Sharma",recurringExpenseData)
if (isError) { if (isError) {
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />; return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
} }
const header = [ const header = [
"Request ID", "Template Name",
"Request Title", "Frequency",
"Submitted By", "Next Generation Date",
"Submitted On", "Last Generation Date",
"Amount",
"Status", "Status",
"Action", "Action",
]; ];
if (isLoading) return <ExpenseTableSkeleton headers={header} />; 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) => { 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 ( return (
request?.expenseStatus?.id === EXPENSE_DRAFT && request?.expenseStatus?.id === EXPENSE_DRAFT &&
request?.createdBy?.id === SelfId request?.createdBy?.id === SelfId
@ -184,14 +168,14 @@ console.log("Sharma",recurringExpenseData)
<ConfirmModal <ConfirmModal
isOpen={IsDeleteModalOpen} isOpen={IsDeleteModalOpen}
type="delete" 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} onSubmit={handleDelete}
onClose={() => setIsDeleteModalOpen(false)} onClose={() => setIsDeleteModalOpen(false)}
// loading={isPending}
paramData={deletingId} paramData={deletingId}
/> />
)} )}
<div className="card page-min-h table-responsive px-sm-4"> <div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table"> <div className="card-datatable" id="payment-request-table">
<table className="table border-top dataTable text-nowrap align-middle"> <table className="table border-top dataTable text-nowrap align-middle">
@ -207,116 +191,81 @@ console.log("Sharma",recurringExpenseData)
</thead> </thead>
<tbody> <tbody>
{Object.keys(grouped).length > 0 ? ( {recurringExpenseData.length > 0 ? (
Object.values(grouped).map(({ key, displayField, items }) => ( recurringExpenseData.map((recurringExpense) => (
<React.Fragment key={key}> <tr key={recurringExpense.id}>
<tr className="tr-group text-dark"> {recurringExpenseColumns.map((col) => (
<td colSpan={8} className="text-start"> <td
<div className="d-flex align-items-center"> key={col.key}
{" "} className={`d-table-cell ${col.align ?? ""}`}
<small className="fs-6 py-1"> >
{displayField} :{" "} {col?.customRender
</small>{" "} ? col?.customRender(recurringExpense)
<small className="fs-6 ms-3"> : col?.getValue(recurringExpense)}
{IsGroupedByDate ? formatUTCToLocalTime(key) : key}
</small>
</div>
</td> </td>
</tr> ))}
{items?.map((recurringExpense) => ( <td className="sticky-action-column bg-white">
<tr key={recurringExpense.id}> <div className="d-flex justify-content-center gap-2">
{recurringExpenseColumns.map( <i
(col) => className="bx bx-show text-primary cursor-pointer"
(col.isAlwaysVisible || groupBy !== col.key) && ( // onClick={() =>
<td // setVieRequest({
key={col.key} // requestId: recurringExpense.id,
className={`d-table-cell ${col.align ?? ""}`} // view: true,
> // })
{col?.customRender // }
? col?.customRender(recurringExpense) ></i>
: col?.getValue(recurringExpense)} {/* Uncomment for edit/delete actions */}
</td>
) <div className="dropdown z-2">
)} <button
<td className="sticky-action-column bg-white"> type="button"
<div className="d-flex justify-content-center gap-2"> className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
<i data-bs-toggle="dropdown"
className="bx bx-show text-primary cursor-pointer" >
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end w-auto">
<li
onClick={() => onClick={() =>
setVieRequest({ setManageRequest({
requestId: recurringExpense.id, IsOpen: true,
view: true, RequestId: recurringExpense.id,
}) })
} }
></i> >
{/* {canEditExpense(recurringExpense) && ( <a className="dropdown-item px-2 cursor-pointer py-1">
<div className="dropdown z-2"> <i className="bx bx-edit text-primary bx-xs me-2"></i>
<button Modify
type="button" </a>
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0" </li>
data-bs-toggle="dropdown"
aria-expanded="false"
>
<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
onClick={() =>
setManageRequest({
IsOpen: true,
RequestId: recurringExpense.id,
})
}
>
<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
<li onClick={() => {
onClick={() => { setIsDeleteModalOpen(true);
setIsDeleteModalOpen(true); setDeletingId(recurringExpense.id);
setDeletingId(recurringExpense.id); }}
}} >
> <a className="dropdown-item px-2 cursor-pointer py-1">
<a className="dropdown-item px-2 cursor-pointer py-1"> <i className="bx bx-trash text-danger bx-xs me-2"></i>
<i className="bx bx-trash text-danger bx-xs me-2"></i> Delete
<span className="align-left"> </a>
Delete </li>
</span>
</a> </ul>
</li> </div>
)}
</ul> </div>
</div> </td>
)} */} </tr>
</div>
</td>
</tr>
))}
</React.Fragment>
)) ))
) : ( ) : (
<tr> <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> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -329,8 +278,7 @@ console.log("Sharma",recurringExpenseData)
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${currentPage === index + 1 ? "active" : "" className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
}`}
> >
<button <button
className="page-link" className="page-link"

4
src/hooks/useExpense.js
View File

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

9
src/utils/constants.jsx
View File

@ -177,4 +177,13 @@ export const ALLOW_PROJECTSTATUS_ID = [
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000"; 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"
};