Implementing Get and Correct API in Recurring.
This commit is contained in:
parent
e868d27d5f
commit
3b318a672c
@ -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">
|
||||
|
||||
@ -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 <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
||||
}
|
||||
|
||||
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 <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 (
|
||||
(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)
|
||||
<ConfirmModal
|
||||
isOpen={IsDeleteModalOpen}
|
||||
type="delete"
|
||||
header="Delete Expense"
|
||||
message="Are you sure you want delete?"
|
||||
header="Delete Recurring Expense"
|
||||
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 ? (
|
||||
Object.values(grouped).map(({ key, displayField, items }) => (
|
||||
<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) => (
|
||||
{recurringExpenseData.length > 0 ? (
|
||||
recurringExpenseData.map((recurringExpense) => (
|
||||
<tr key={recurringExpense.id}>
|
||||
{recurringExpenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<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={() =>
|
||||
setVieRequest({
|
||||
requestId: recurringExpense.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
// onClick={() =>
|
||||
// setVieRequest({
|
||||
// requestId: recurringExpense.id,
|
||||
// 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
|
||||
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>
|
||||
<i className="bx bx-dots-vertical-rounded text-muted p-0"></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 ">
|
||||
<div className="py-8">
|
||||
<p>No Request Found</p>
|
||||
</div>
|
||||
<td colSpan={recurringExpenseColumns.length + 1} className="text-center border-0 py-8">
|
||||
<p>No Recurring Expense Found</p>
|
||||
</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"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user