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

successfuuly fetch data and create collection

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-14 10:24:45 +05:30
parent 376a2a397f
commit 9288ac1fbc
9 changed files with 278 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/collections/AddPayment.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const AddPayment = () => {
return (
<div className='row'>
</div>
)
}
export default AddPayment

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

@ -4,6 +4,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
import { formatFigure, localToUtc, useDebounce } from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Pagination from "../common/Pagination";
import { useCollectionContext } from "../../pages/collections/CollectionPage";
const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
const [currentPage, setCurrentPage] = useState(1);
@ -18,6 +19,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
true,
searchDebounce
);
const {setProcessedPayment} = useCollectionContext()
const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
@ -99,7 +101,10 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatFigure(col?.basicAmount, { type: "currency", currency: "INR" }) ?? 0}
{formatFigure(col?.basicAmount, {
type: "currency",
currency: "INR",
}) ?? 0}
</span>
),
align: "text-end",
@ -112,7 +117,10 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
className="text-truncate d-inline-block py-3"
style={{ maxWidth: "200px" }}
>
{formatFigure(col?.balanceAmount, { type: "currency", currency: "INR" }) ?? 0}
{formatFigure(col?.balanceAmount, {
type: "currency",
currency: "INR",
}) ?? 0}
</span>
),
align: "text-end",
@ -155,10 +163,48 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
className="sticky-action-column text-center"
style={{ padding: "12px 8px" }}
>
<div className="d-flex justify-content-center gap-2">
<i className="bx bx-show text-primary cursor-pointer"></i>
<i className="bx bx-edit text-secondary cursor-pointer"></i>
<i className="bx bx-trash text-danger cursor-pointer"></i>
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bx bx-dots-vertical-rounded bx-sm text-muted"
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">
{/* View */}
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-show me-2 text-primary"></i>
<span>View</span>
</a>
</li>
{/* Add Payment */}
<li>
<a className="dropdown-item cursor-pointer">
<i className="bx bx-wallet me-2 text-warning"></i>
<span>Add Payment</span>
</a>
</li>
{/* Mark Payment */}
<li>
<a className="dropdown-item cursor-pointer" onClick={()=>setProcessedPayment({isOpen:true,invoiceId:row.id})}>
<i className="bx bx-check-circle me-2 text-success"></i>
<span>Mark Payment</span>
</a>
</li>
</ul>
</div>
</td>
</tr>

19
src/components/collections/NewCollection.jsx
View File

@ -11,10 +11,9 @@ import DatePicker from "../common/DatePicker";
import { useCreateCollection } from "../../hooks/useCollections";
import { formatFileSize, localToUtc } from "../../utils/appUtils";
const NewCollection = ({ collectionId }) => {
const { onClose, onOpen, isOpen } = useModal("newCollection");
const NewCollection = ({ collectionId, onClose }) => {
const { projectNames, projectLoading } = useProjectName();
console.log(projectNames);
const methods = useForm({
resolver: zodResolver(newCollection),
defaultValues: defaultCollection,
@ -108,12 +107,13 @@ const NewCollection = ({ collectionId }) => {
onClose();
};
const bodyContent = (
<div className="row">
return (
<div className="container pb-3">
<div className="text-black fs-5 mb-2">New Collection</div>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
<div className="row px-md-4 px-0">
<div className="row px-md-1 px-0">
<div className="col-12 col-md-6 mb-2">
<Label required>Title</Label>
<input
@ -382,10 +382,11 @@ const NewCollection = ({ collectionId }) => {
</form>
</FormProvider>
</div>
);
return (
<Modal size="lg" isOpen={isOpen} onClose={onClose} body={bodyContent} />
);
};
export default NewCollection;

28
src/components/collections/collectionSchema.jsx
View File

@ -15,8 +15,15 @@ export const newCollection = z.object({
description: z.string().trim().optional(),
clientSubmitedDate: z.string().min(1, { message: "Date is required" }),
exceptedPaymentDate: z.string().min(1, { message: "Date is required" }),
invoiceNumber: z.string().trim().min(1, { message: "Invoice is required" }).max(17,{message:"Invalid Number"}),
eInvoiceNumber: z.string().trim().min(1, { message: "E-Invoice No is required" }),
invoiceNumber: z
.string()
.trim()
.min(1, { message: "Invoice is required" })
.max(17, { message: "Invalid Number" }),
eInvoiceNumber: z
.string()
.trim()
.min(1, { message: "E-Invoice No is required" }),
taxAmount: z.coerce
.number({
invalid_type_error: "Amount is required and must be a number",
@ -61,7 +68,22 @@ export const defaultCollection = {
invoiceDate: null,
exceptedPaymentDate: null,
taxAmount: "",
basicAmount:"",
basicAmount: "",
description: "",
billAttachments: [],
};
export const paymentSchema = z.object({
invoiceId: z.string().min(1, { message: "Invoice Id required" }),
paymentReceivedDate: z.string().datetime(),
transactionId: z.string().min(1, "Transaction ID is required"),
amount: z.number().min(1, "Amount must be greater than zero"),
});
// Default Value
export const defaultPayment = {
invoiceId: "",
paymentReceivedDate: null,
transactionId: "",
amount: 0,
};

32
src/components/common/ConfirmModal.jsx
View File

@ -13,19 +13,18 @@ const ConfirmModal = ({
if (!isOpen) return null;
const TypeofIcon = () => {
if (type === "delete") {
return (
<i
className="bx bx-x-circle text-danger"
style={{ fontSize: "60px" }}
></i>
);
}
switch (type) {
case "delete":
return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
case "success":
return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
case "warning":
return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
default:
return null;
}
};
const modalSize = type === "delete" ? "sm" : "md";
return (
<div
className="modal fade show"
@ -33,22 +32,24 @@ const ConfirmModal = ({
role="dialog"
aria-modal="true"
>
<div className={`modal-dialog modal-${modalSize} modal-dialog-top`}>
<div className="modal-dialog modal-sm modal-dialog-top">
<div className="modal-content">
<div className="modal-body py-1 px-2">
<div className="d-flex justify-content-between mb-4 pt-2">
{header && <strong className="mb-0">{header}</strong>}
<button
type="button"
className="btn-close "
className="btn-close"
aria-label="Close"
onClick={onClose}
/>
</div>
<div className="row">
<div className="col-4 col-sm-2">{TypeofIcon()}</div>
<div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
<div className="col-4 col-sm-3 d-flex justify-content-center align-items-start">
{TypeofIcon()}
</div>
<div className="col-8 col-sm-9 py-sm-2 py-1 text-sm-start">
<span className="fs-6">{message}</span>
<div className="d-flex justify-content-end mt-4">
<button
@ -59,7 +60,7 @@ const ConfirmModal = ({
{loading ? "Please Wait..." : "Yes"}
</button>
<button
className="btn btn-secondary ms-4 btn-sm"
className="btn btn-secondary ms-3 btn-sm"
onClick={onClose}
disabled={loading}
>
@ -68,6 +69,7 @@ const ConfirmModal = ({
</div>
</div>
</div>
</div>
</div>
</div>

32
src/components/common/DateRangePicker.jsx
View File

@ -88,7 +88,6 @@ export default DateRangePicker;
export const DateRangePicker1 = ({
startField = "startDate",
endField = "endDate",
@ -98,6 +97,7 @@ export const DateRangePicker1 = ({
resetSignal,
defaultRange = true,
maxDate = null,
howManyDay = 6,
...rest
}) => {
const inputRef = useRef(null);
@ -107,12 +107,13 @@ export const DateRangePicker1 = ({
field: { ref },
} = useController({ name: startField, control });
// Apply default range
const applyDefaultDates = () => {
const today = new Date();
const past = new Date();
past.setDate(today.getDate() - 6);
const past = new Date(today.getTime());
past.setDate(today.getDate() - howManyDay);
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
const formattedStart = format(past);
const formattedEnd = format(today);
@ -127,15 +128,19 @@ export const DateRangePicker1 = ({
useEffect(() => {
if (!inputRef.current || inputRef.current._flatpickr) return;
const instance = flatpickr(inputRef.current, {
if (defaultRange && !getValues(startField) && !getValues(endField)) {
applyDefaultDates();
}
const instance = window.flatpickr(inputRef.current, {
mode: "range",
dateFormat: "d-m-Y",
allowInput: allowText,
maxDate ,
maxDate,
onChange: (selectedDates) => {
if (selectedDates.length === 2) {
const [start, end] = selectedDates;
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
setValue(startField, format(start), { shouldValidate: true });
setValue(endField, format(end), { shouldValidate: true });
} else {
@ -148,12 +153,10 @@ export const DateRangePicker1 = ({
const currentStart = getValues(startField);
const currentEnd = getValues(endField);
if (defaultRange && !currentStart && !currentEnd) {
applyDefaultDates();
} else if (currentStart && currentEnd) {
if (currentStart && currentEnd) {
instance.setDate([
flatpickr.parseDate(currentStart, "d-m-Y"),
flatpickr.parseDate(currentEnd, "d-m-Y"),
window.flatpickr.parseDate(currentStart, "d-m-Y"),
window.flatpickr.parseDate(currentEnd, "d-m-Y"),
]);
}
@ -173,8 +176,7 @@ export const DateRangePicker1 = ({
}
}
}
}, [resetSignal, defaultRange, setValue, startField, endField]);
}, [resetSignal, defaultRange, setValue, startField, endField]);
const start = getValues(startField);
const end = getValues(endField);
@ -186,7 +188,7 @@ export const DateRangePicker1 = ({
type="text"
className="form-control form-control-sm"
placeholder={placeholder}
defaultValue={formattedValue}
value={formattedValue}
ref={(el) => {
inputRef.current = el;
ref(el);

24
src/hooks/useCollections.js
View File

@ -1,4 +1,4 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { CollectionRepository } from "../repositories/ColllectionRepository";
import showToast from "../services/toastService";
@ -42,16 +42,36 @@ export const useCollections = (
};
export const useCreateCollection = (onSuccessCallBack) => {
const clinent = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
await CollectionRepository.createNewCollection(payload),
onSuccess: (_, variables) => {
showToast("New Collection created Successfully", "success");
clinent.invalidateQueries({ queryKey: ["collections"] });
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.message || error.response.data.message || "Something Went wrong"
error.response.data.message || error.message || "Something Went wrong"
);
},
});
};
export const useMarkedPaymentReceived = (onSuccessCallBack) => {
const client = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
await CollectionRepository.markPaymentReceived(payload),
onSuccess: async () => {
client.invalidateQueries({ queryKey: ["collections"] });
showToast("Payment Received marked Successfully", "success");
if (onSuccessCallBack) onSuccessCallBack();
},
onError: (error) => {
showToast(
error.response.data.message || error.message || "Something Went wrong"
);
},
});

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

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { createContext, useContext, useState } from "react";
import moment from "moment";
import Breadcrumb from "../../components/common/Breadcrumb";
import CollectionList from "../../components/collections/CollectionList";
@ -7,34 +7,62 @@ import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { DateRangePicker1 } from "../../components/common/DateRangePicker";
import { isPending } from "@reduxjs/toolkit";
import ConfirmModal from "../../components/common/ConfirmModal";
import showToast from "../../services/toastService";
import { useMarkedPaymentReceived } from "../../hooks/useCollections";
import NewCollection from "../../components/collections/NewCollection";
import GlobalModel from "../../components/common/GlobalModel";
const CollectionContext = createContext();
export const useCollectionContext = () => {
const context = useContext(CollectionContext);
if (!context) {
window.location = "/dashboard";
showToast("Out of Context Happend inside Collection Context", "warning");
}
return context;
};
const CollectionPage = () => {
const { onOpen } = useModal("newCollection");
const [makeCollection, setCollection] = useState({
isOpen: false,
invoiceId: null,
});
const [processedPayment, setProcessedPayment] = useState(null);
const [showPending, setShowPending] = useState(false);
const [searchText, setSearchText] = useState("");
const methods = useForm({
defaultValues: {
fromDate: moment().subtract(6, "days").format("DD-MM-YYYY"),
fromDate: moment().subtract(180, "days").format("DD-MM-YYYY"),
toDate: moment().format("DD-MM-YYYY"),
},
});
const { watch } = methods;
const [fromDate, toDate] = watch(["fromDate", "toDate"]);
const handleToggleActive = (e) => setShowPending(e.target.checked);
const contextMassager = {
setProcessedPayment,
};
const { mutate: MarkedReceived, isPending } = useMarkedPaymentReceived(() => {
setProcessedPayment(null);
});
const handleMarkedPayment = () => {};
return (
<CollectionContext.Provider value={contextMassager}>
<div className="container-fluid">
<Breadcrumb
data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
/>
<div className="card my-3 py-2 px-sm-4 px-0">
<div className="row">
<div className="col-3">
<div className="row px-3">
<div className="col-12 col-md-3 mb-1">
<FormProvider {...methods}>
<DateRangePicker1 />
<DateRangePicker1 howManyDay={180} />
</FormProvider>
</div>
<div className="col-3 d-flex align-items-center gap-2 ">
<div className="col-12 col-md-3 d-flex align-items-center gap-2 ">
<div className="form-check form-switch text-start align-items-center">
<input
type="checkbox"
@ -53,7 +81,7 @@ const CollectionPage = () => {
</div>
</div>
<div className="col-6 d-flex justify-content-end gap-4">
<div className="col-12 col-md-6 d-flex justify-content-end gap-4">
<div className="">
{" "}
<input
@ -67,7 +95,7 @@ const CollectionPage = () => {
<button
className="btn btn-sm btn-primary"
type="button"
onClick={onOpen}
onClick={()=>setCollection({isOpen:true,invoiceId:null})}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
@ -84,7 +112,30 @@ const CollectionPage = () => {
isPending={showPending}
searchString={searchText}
/>
{makeCollection.isOpen && (
<GlobalModel
isOpen={makeCollection.isOpen} size="lg"
closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
>
<NewCollection
collectionId={null}
onClose={()=>setCollection({ isOpen: false, invoiceId: null })}
/>
</GlobalModel>
)}
<ConfirmModal
type="success"
header="Payment Successful Received"
message="Your payment has been processed successfully. Do you want to continue?"
isOpen={processedPayment?.isOpen}
loading={isPending}
onSubmit={handleMarkedPayment}
onClose={() => setProcessedPayment(null)}
/>
</div>
</CollectionContext.Provider>
);
};

4
src/repositories/ColllectionRepository.jsx
View File

@ -16,5 +16,9 @@ export const CollectionRepository = {
}
return api.get(url);
},
makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`),
markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`)
};