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

Invoice list should display according to the selected date range in Collection module.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-14 15:39:40 +05:30
parent 314dd67118
commit b399977946
4 changed files with 180 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/collections/CollectionList.jsx
View File

@ -29,14 +29,14 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
const searchDebounce = useDebounce(searchString, 500); const searchDebounce = useDebounce(searchString, 500);
const { data, isLoading, isError, error } = useCollections( const { data, isLoading, isError, error } = useCollections(
ITEMS_PER_PAGE, selectedProject,
currentPage, searchDebounce,
localToUtc(fromDate), localToUtc(fromDate),
localToUtc(toDate), localToUtc(toDate),
isPending, ITEMS_PER_PAGE,
currentPage,
true, true,
selectedProject, isPending
searchDebounce
); );
const { setProcessedPayment, setAddPayment, setViewCollection } = const { setProcessedPayment, setAddPayment, setViewCollection } =
useCollectionContext(); useCollectionContext();
@ -186,84 +186,84 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
canViewCollection || canViewCollection ||
canEditCollection || canEditCollection ||
canCreate) && ( canCreate) && (
<td <td
className="sticky-action-column text-center" className="sticky-action-column text-center"
style={{ padding: "12px 8px" }} style={{ padding: "12px 8px" }}
> >
<div className="dropdown z-2"> <div className="dropdown z-2">
<button <button
type="button" type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0" className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
<i <i
className="bx bx-dots-vertical-rounded bx-sm text-muted" className="bx bx-dots-vertical-rounded bx-sm text-muted"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-offset="0,8" data-bs-offset="0,8"
data-bs-placement="top" data-bs-placement="top"
data-bs-custom-class="tooltip-dark" data-bs-custom-class="tooltip-dark"
title="More Action" title="More Action"
></i> ></i>
</button> </button>
<ul className="dropdown-menu dropdown-menu-end"> <ul className="dropdown-menu dropdown-menu-end">
{/* View */} {/* View */}
<li> <li>
<a <a
className="dropdown-item cursor-pointer" className="dropdown-item cursor-pointer"
onClick={() => setViewCollection(row.id)} onClick={() => setViewCollection(row.id)}
> >
<i className="bx bx-show me-2 text-primary"></i> <i className="bx bx-show me-2 text-primary"></i>
<span>View</span> <span>View</span>
</a> </a>
</li> </li>
{/* Only if not completed */} {/* Only if not completed */}
{!row?.markAsCompleted && ( {!row?.markAsCompleted && (
<> <>
{/* Add Payment */} {/* Add Payment */}
{(isAdmin || canAddPayment) && ( {(isAdmin || canAddPayment) && (
<li> <li>
<a <a
className="dropdown-item cursor-pointer" className="dropdown-item cursor-pointer"
onClick={() => onClick={() =>
setAddPayment({ setAddPayment({
isOpen: true, isOpen: true,
invoiceId: row.id, invoiceId: row.id,
}) })
} }
> >
<i className="bx bx-wallet me-2 text-warning"></i> <i className="bx bx-wallet me-2 text-warning"></i>
<span>Add Payment</span> <span>Add Payment</span>
</a> </a>
</li> </li>
)} )}
{/* Mark Payment */} {/* Mark Payment */}
{isAdmin && ( {isAdmin && (
<li> <li>
<a <a
className="dropdown-item cursor-pointer" className="dropdown-item cursor-pointer"
onClick={() => onClick={() =>
setProcessedPayment({ setProcessedPayment({
isOpen: true, isOpen: true,
invoiceId: row.id, invoiceId: row.id,
}) })
} }
> >
<i className="bx bx-check-circle me-2 text-success"></i> <i className="bx bx-check-circle me-2 text-success"></i>
<span>Mark Payment</span> <span>Mark Payment</span>
</a> </a>
</li> </li>
)} )}
</> </>
)} )}
</ul> </ul>
</div> </div>
</td> </td>
)} )}
</tr> </tr>
)) ))
) : ( ) : (

90
src/hooks/useCollections.jsx
View File

@ -2,39 +2,80 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { CollectionRepository } from "../repositories/ColllectionRepository"; import { CollectionRepository } from "../repositories/ColllectionRepository";
import showToast from "../services/toastService"; import showToast from "../services/toastService";
// export const useCollections = (
// pageSize,
// pageNumber,
// fromDate,
// toDate,
// isPending,
// isActive,
// projectId,
// searchString
// ) => {
// return useQuery({
// queryKey: [
// "collections",
// pageSize,
// pageNumber,
// fromDate,
// toDate,
// isPending,
// isActive,
// projectId,
// searchString,
// ],
// queryFn: async () => {
// const response = await CollectionRepository.getCollections(
// pageSize,
// pageNumber,
// fromDate,
// toDate,
// isPending,
// isActive,
// projectId,
// searchString
// );
// return response.data;
// },
// keepPreviousData: true,
// staleTime: 1000 * 60 * 1,
// });
// };
export const useCollections = ( export const useCollections = (
pageSize, projectId,
pageNumber, searchString,
fromDate, fromDate,
toDate, toDate,
isPending, pageSize,
pageNumber,
isActive, isActive,
projectId, isPending
searchString
) => { ) => {
return useQuery({ return useQuery({
queryKey: [ queryKey: [
"collections", "collections",
pageSize,
pageNumber,
fromDate,
toDate,
isPending,
isActive,
projectId, projectId,
searchString, searchString,
fromDate,
toDate,
pageSize,
pageNumber,
isActive,
isPending,
], ],
queryFn: async () => { queryFn: async () => {
const response = await CollectionRepository.getCollections( const response = await CollectionRepository.getCollections(
pageSize, projectId,
pageNumber, searchString,
fromDate, fromDate,
toDate, toDate,
isPending, pageSize,
pageNumber,
isActive, isActive,
projectId, isPending
searchString
); );
return response.data; return response.data;
}, },
@ -44,15 +85,14 @@ export const useCollections = (
}); });
}; };
export const useCollection = (collectionId) => {
export const useCollection =(collectionId)=>{
return useQuery({ return useQuery({
queryKey:["collection",collectionId], queryKey: ["collection", collectionId],
queryFn:async()=> { queryFn: async () => {
const resp = await CollectionRepository.getCollection(collectionId); const resp = await CollectionRepository.getCollection(collectionId);
return resp.data return resp.data
}, },
enabled:!!collectionId enabled: !!collectionId
}) })
} }
@ -133,11 +173,11 @@ export const useAddComment = (onSuccessCallBack) => {
}); });
}; };
export const useUpdateCollection =(onSuccessCallBack)=>{ export const useUpdateCollection = (onSuccessCallBack) => {
const client = useQueryClient(); const client = useQueryClient();
return useMutation({ return useMutation({
mutationFn:async({collectionId,payload})=> await CollectionRepository.updateCollection(collectionId,payload), mutationFn: async ({ collectionId, payload }) => await CollectionRepository.updateCollection(collectionId, payload),
onSuccess: () => { onSuccess: () => {
client.invalidateQueries({ queryKey: ["collections"] }); client.invalidateQueries({ queryKey: ["collections"] });
client.invalidateQueries({ queryKey: ["collection"] }); client.invalidateQueries({ queryKey: ["collection"] });
showToast("Collection Updated Successfully", "success"); showToast("Collection Updated Successfully", "success");

3
src/pages/collections/CollectionPage.jsx
View File

@ -117,7 +117,8 @@ const CollectionPage = () => {
{/* Left side: Date Picker + Show Pending (stacked on mobile) */} {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
<div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start align-md-items-center gap-2 gap-md-3 mb-3 mb-md-0"> <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start align-md-items-center gap-2 gap-md-3 mb-3 mb-md-0">
<FormProvider {...methods}> <FormProvider {...methods}>
<DateRangePicker1 howManyDay={180} /> <DateRangePicker1 howManyDay={180} startField="fromDate"
endField="toDate" />
</FormProvider> </FormProvider>
<div className="form-check form-switch d-flex align-items-center mt-1"> <div className="form-check form-switch d-flex align-items-center mt-1">

46
src/repositories/ColllectionRepository.jsx
View File

@ -4,26 +4,46 @@ import { DirectoryRepository } from "./DirectoryRepository";
export const CollectionRepository = { export const CollectionRepository = {
createNewCollection: (data) => createNewCollection: (data) =>
api.post(`/api/Collection/invoice/create`, data), api.post(`/api/Collection/invoice/create`, data),
updateCollection:(id,data)=>{ updateCollection: (id, data) => {
api.put(`/api/Collection/invoice/edit/${id}`,data) api.put(`/api/Collection/invoice/edit/${id}`, data)
}, },
getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive,projectId, searchString) => { // getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive,projectId, searchString) => {
let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`; // let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
// const params = [];
// if (fromDate) params.push(`fromDate=${fromDate}`);
// if (toDate) params.push(`toDate=${toDate}`);
// if(projectId) params.push(`projectId=${projectId}`)
// if (params.length > 0) {
// url += `&${params.join("&")}`;
// }
// return api.get(url);
// },
getCollections: (projectId, searchString, fromDate, toDate, pageSize, pageNumber, isActive, isPending) => {
let url = `/api/Collection/invoice/list`;
const params = []; const params = [];
if (fromDate) params.push(`fromDate=${fromDate}`);
if (toDate) params.push(`toDate=${toDate}`); if (projectId) params.push(`projectId=${projectId}`);
if(projectId) params.push(`projectId=${projectId}`) if (searchString) params.push(`search=${searchString}`);
if (fromDate) params.push(`dateFrom=${fromDate}`);
if (toDate) params.push(`dateTo=${toDate}`);
if (pageSize) params.push(`pageSize=${pageSize}`);
if (pageNumber) params.push(`pageNumber=${pageNumber}`);
if (isActive) params.push(`isActive=${isActive}`);
if (isPending) params.push(`isPending=${isPending}`);
if (params.length > 0) { if (params.length > 0) {
url += `&${params.join("&")}`; url += "?" + params.join("&");
} }
return api.get(url);
return api.get(url);
}, },
makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`,data), makeReceivePayment: (data) => api.post(`/api/Collection/invoice/payment/received`, data),
markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`), markPaymentReceived: (invoiceId) => api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`),
getCollection:(id)=>api.get(`/api/Collection/invoice/details/${id}`), getCollection: (id) => api.get(`/api/Collection/invoice/details/${id}`),
addComment:(data)=>api.post(`/api/Collection/invoice/add/comment`,data) addComment: (data) => api.post(`/api/Collection/invoice/add/comment`, data)
}; };