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

Implementing Get and Update API in Recurring Expense.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-04 18:34:00 +05:30
parent 7a749b14e9
commit e868d27d5f
7 changed files with 130 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react'
import Label from '../common/Label';
import { useForm } from 'react-hook-form';
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
import { useExpenseCategory, useRecurringStatus } from '../../hooks/masterHook/useMaster';
import DatePicker from '../common/DatePicker';
import { zodResolver } from '@hookform/resolvers/zod';
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
import { INR_CURRENCY_CODE } from '../../utils/constants';
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
import { useCreateRecurringExpense } from '../../hooks/useExpense';
import { useCreateRecurringExpense, useUpdateRecurringExpense } from '../../hooks/useExpense';
function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
@ -17,7 +17,9 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
const { data: statusData, isLoading: statusLoading, isError: statusError } = useRecurringStatus();
console.log("Tanish", statusData)
const {
ExpenseCategories,
loading: ExpenseLoading,
@ -40,9 +42,9 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
handleClose();
}
);
// const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
// handleClose()
// );
const { mutate: RecurringExpenseUpdate, isPending } = useUpdateRecurringExpense(() =>
handleClose()
);
useEffect(() => {
if (requestToEdit && data) {
@ -66,22 +68,30 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
}
}, [data, reset]);
// console.log("Veer",data)
useEffect(() => {
if (!requestToEdit && currencyData && currencyData.length > 0) {
const inrCurrency = currencyData.find(
(c) => c.id === INR_CURRENCY_CODE
);
if (inrCurrency) {
setValue("currencyId", INR_CURRENCY_CODE, { shouldValidate: true });
}
}
}, [currencyData, requestToEdit, setValue]);
const onSubmit = (fromdata) => {
let payload = {
...fromdata,
// strikeDate: localToUtc(fromdata.strikeDate),
strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null,
};
if (requestToEdit) {
const editPayload = { ...payload, id: data.id};
PaymentRequestUpdate({ id: data.id, payload: editPayload });
const editPayload = { ...payload, id: data.id };
RecurringExpenseUpdate({ id: data.id, payload: editPayload });
} else {
CreateRecurringExpense(payload);
}
console.log("Kartik", payload)
};
return (
@ -294,10 +304,8 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
{errors.notifyTo.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="statusId" className="form-label" required>
Status
@ -307,17 +315,13 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
className="form-select form-select-sm"
{...register("statusId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
<option value="">Select Status</option>
{statusLoading && <option>Loading...</option>}
{!statusLoading && !statusError && statusData?.data?.map((status) => (
<option key={status.id} value={status.id}>
{status.name}
</option>
))}
</select>
{errors.statusId && (
<small className="danger-text">{errors.statusId.message}</small>

72
src/components/RecurringExpense/RecurringRexpenseList.jsx → src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -9,15 +9,15 @@ import {
getColorNameFromHex,
useDebounce,
} from "../../utils/appUtils";
import { usePaymentRequestList } from "../../hooks/useExpense";
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../../components/common/Avatar";
import Avatar from "../common/Avatar";
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import Error from "../common/Error";
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
import { useRecurringExpenseList } from "../../hooks/useExpense";
const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
@ -27,6 +27,8 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
);
const groupByField = (items, field) => {
return items.reduce((acc, item) => {
let key;
@ -77,18 +79,18 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
}, {});
};
const paymentRequestColumns = [
{
key: "paymentRequestUID",
label: "Template Name",
align: "text-start mx-2",
getValue: (e) => e.paymentRequestUID || "N/A",
},
const recurringExpenseColumns = [
{
key: "title",
label: "Template Name",
align: "text-start mx-2",
getValue: (e) => e.title || "N/A",
},
{
key: "frequency",
label: "Frequency",
align: "text-start",
getValue: (e) => e.title || "N/A",
getValue: (e) => e.frequency || "N/A",
},
{
key: "createdAt",
@ -97,10 +99,16 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
},
{
key: "createdAt",
key: "latestPRGeneratedAt",
label: "Last Generation Date",
align: "text-start",
getValue: (e) => formatUTCToLocalTime(e?.latestPRGeneratedAt),
},
{
key: "status",
label: "Status",
align: "text-start",
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
getValue: (e) => formatUTCToLocalTime(e?.status),
},
];
@ -109,17 +117,18 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
const debouncedSearch = useDebounce(search, 500);
const { data, isLoading, isError, error, isRefetching, refetch } =
usePaymentRequestList(
useRecurringExpenseList(
ITEMS_PER_PAGE,
currentPage,
filters,
{},
true,
debouncedSearch
);
const paymentRequestData = data?.data || [];
const recurringExpenseData= data?.data || [];
const totalPages = data?.data?.totalPages || 1;
console.log("Sharma",recurringExpenseData)
if (isError) {
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
}
@ -142,11 +151,11 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
{ key: "createdAt", displayField: "created Date" },
]?.includes(groupBy);
const canEditExpense = (paymentRequest) => {
const canEditExpense = (recurringExpense) => {
return (
(paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus.id)) &&
paymentRequest?.createdBy?.id === SelfId
(recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) &&
recurringExpense?.createdBy?.id === SelfId
);
};
const canDetetExpense = (request) => {
@ -188,7 +197,7 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
<table className="table border-top dataTable text-nowrap align-middle">
<thead>
<tr>
{paymentRequestColumns.map((col) => (
{recurringExpenseColumns.map((col) => (
<th key={col.key} className={`sorting ${col.align}`}>
{col.label}
</th>
@ -214,9 +223,9 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
</div>
</td>
</tr>
{items?.map((paymentRequest) => (
<tr key={paymentRequest.id}>
{paymentRequestColumns.map(
{items?.map((recurringExpense) => (
<tr key={recurringExpense.id}>
{recurringExpenseColumns.map(
(col) =>
(col.isAlwaysVisible || groupBy !== col.key) && (
<td
@ -224,8 +233,8 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
className={`d-table-cell ${col.align ?? ""}`}
>
{col?.customRender
? col?.customRender(paymentRequest)
: col?.getValue(paymentRequest)}
? col?.customRender(recurringExpense)
: col?.getValue(recurringExpense)}
</td>
)
)}
@ -235,12 +244,12 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
className="bx bx-show text-primary cursor-pointer"
onClick={() =>
setVieRequest({
requestId: paymentRequest.id,
requestId: recurringExpense.id,
view: true,
})
}
></i>
{canEditExpense(paymentRequest) && (
{/* {canEditExpense(recurringExpense) && (
<div className="dropdown z-2">
<button
type="button"
@ -262,7 +271,7 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
onClick={() =>
setManageRequest({
IsOpen: true,
RequestId: paymentRequest.id,
RequestId: recurringExpense.id,
})
}
>
@ -274,11 +283,11 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
</a>
</li>
{canDetetExpense(paymentRequest) && (
{canDetetExpense(recurringExpense) && (
<li
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(paymentRequest.id);
setDeletingId(recurringExpense.id);
}}
>
<a className="dropdown-item px-2 cursor-pointer py-1">
@ -291,7 +300,7 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
)}
</ul>
</div>
)}
)} */}
</div>
</td>
</tr>
@ -307,6 +316,7 @@ const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
</td>
</tr>
)}
</tbody>
</table>
</div>

8
src/hooks/masterHook/useMaster.js
View File

@ -57,6 +57,14 @@ export const useMasterMenu = () => {
});
};
export const useRecurringStatus = () => {
return useQuery({
queryKey: ["recurringExpense"],
queryFn: async () =>
await MasterRespository.getRecurringStatus(),
});
};
export const useActivitiesMaster = () => {
const {
data: activities = [],

37
src/hooks/useExpense.js
View File

@ -408,3 +408,40 @@ export const useCreateRecurringExpense = (onSuccessCallBack) => {
},
});
};
export const useUpdateRecurringExpense = (onSuccessCallBack) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ id, payload }) => {
const response = await ExpenseRepository.UpdateRecurringExpense(id, payload);
return response.data;
},
onSuccess: (updatedExpense, variables) => {
queryClient.removeQueries({ queryKey: ["RecurringExpense", variables.id] });
queryClient.invalidateQueries({ queryKey: ["RecurringExpenseList"] });
showToast("Recurring Expense updated Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast("Something went wrong.Please try again later.", "error");
},
});
};
export const useRecurringExpenseList = (
pageSize,
pageNumber,
filter,
isActive,
searchString = "",
) => {
return useQuery({
queryKey: ["paymentRequestList",pageSize,pageNumber,filter,isActive,searchString],
queryFn: async()=>{
const resp = await ExpenseRepository.GetRecurringExpenseList(pageSize,pageNumber,filter,isActive,searchString);
return resp.data;
},
keepPreviousData: true,
});
};

13
src/pages/RecurringExpense/RecurringExpensePage.jsx
View File

@ -2,9 +2,8 @@ import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext";
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringRexpenseList";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => {
@ -17,7 +16,7 @@ export const useRecurringExpenseContext = () => {
const RecurringExpensePage = () => {
const [ManageRequest, setManageRequest] = useState({
IsOpen: null,
RequestId: null,
RecurringId: null,
});
const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
const { setOffcanvasContent, setShowTrigger } = useFab();
@ -93,7 +92,7 @@ const RecurringExpensePage = () => {
search={search}
filters={filters}
/> */}
<RecurringExpenseList/>
<RecurringExpenseList />
{/* Add/Edit Modal */}
{ManageRequest.IsOpen && (
@ -105,10 +104,10 @@ const RecurringExpensePage = () => {
}
>
<ManageRecurringExpense
key={ManageRequest.RequestId ?? "new"}
requestToEdit={ManageRequest.RequestId}
key={ManageRequest.RecurringId ?? "new"}
requestToEdit={ManageRequest.RecurringId}
closeModal={() =>
setManageRequest({ IsOpen: null, RequestId: null })
setManageRequest({ IsOpen: null, RecurringId: null })
}
/>
</GlobalModel>

5
src/repositories/ExpsenseRepository.jsx
View File

@ -30,7 +30,12 @@ const ExpenseRepository = {
//#region Recurring Expense
GetRecurringExpenseList: (pageSize, pageNumber, filter, isActive, searchString) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/Expense/get/recurring-payment/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
},
CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data),
UpdateRecurringExpense: (id, data) => api.put(`/api/Expense/recurring-payment/edit/${id}`, data),
//#endregion

2
src/repositories/MastersRepository.jsx
View File

@ -141,4 +141,6 @@ export const MasterRespository = {
api.post(`/api/Master/payment-adjustment-head`, data),
updatePaymentAjustmentHead: (id, data) =>
api.put(`/api/Master/payment-adjustment-head/edit/${id}`, data),
getRecurringStatus: () => api.get(`/api/master/recurring-status/list`),
};