Compare commits

...

3 Commits

10 changed files with 1012 additions and 62 deletions

View File

@ -4,17 +4,20 @@ import OrganizationModal from "./components/Organization/OrganizationModal";
import { useAuthModal, useModal } from "./hooks/useAuth"; import { useAuthModal, useModal } from "./hooks/useAuth";
import SwitchTenant from "./pages/authentication/SwitchTenant"; import SwitchTenant from "./pages/authentication/SwitchTenant";
import ChangePasswordPage from "./pages/authentication/ChangePassword"; import ChangePasswordPage from "./pages/authentication/ChangePassword";
import NewCollection from "./components/collections/NewCollection";
const ModalProvider = () => { const ModalProvider = () => {
const { isOpen, onClose } = useOrganizationModal(); const { isOpen, onClose } = useOrganizationModal();
const { isOpen: isAuthOpen } = useAuthModal(); const { isOpen: isAuthOpen } = useAuthModal();
const {isOpen:isChangePass} = useModal("ChangePassword") const {isOpen:isChangePass} = useModal("ChangePassword")
const {isOpen:isCollectionNew} = useModal("newCollection");
return ( return (
<> <>
{isOpen && <OrganizationModal />} {isOpen && <OrganizationModal />}
{isAuthOpen && <SwitchTenant />} {isAuthOpen && <SwitchTenant />}
{isChangePass && <ChangePasswordPage /> } {isChangePass && <ChangePasswordPage /> }
{isCollectionNew && <NewCollection/>}
</> </>
); );
}; };

View File

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

View File

@ -1,11 +1,239 @@
import React from 'react' import React, { useState } from "react";
import { useCollections } from "../../hooks/useCollections";
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);
const searchDebounce = useDebounce(searchString, 500);
const { data, isLoading, isError, error } = useCollections(
ITEMS_PER_PAGE,
currentPage,
localToUtc(fromDate),
localToUtc(toDate),
isPending,
true,
searchDebounce
);
const {setProcessedPayment} = useCollectionContext()
const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
setCurrentPage(page);
}
};
const collectionColumns = [
{
key: "invoiceDate",
label: "Invoice Date",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatUTCToLocalTime(col.invoiceDate)}
</span>
),
align: "text-start",
},
{
key: "invoiceId",
label: "Invoice Id",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{col?.invoiceNumber ?? "-"}
</span>
),
align: "text-start",
},
{
key: "project",
label: "Project",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{col?.project?.name ?? "-"}
</span>
),
align: "text-start",
},
{
key: "submittedDate",
label: "Submitted Date",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatUTCToLocalTime(col.createdAt)}
</span>
),
align: "text-start",
},
{
key: "expectedSubmittedDate",
label: "Expected Payment Date",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatUTCToLocalTime(col.exceptedPaymentDate) ?? "-"}
</span>
),
align: "text-start",
},
{
key: "amount",
label: "Amount",
getValue: (col) => (
<span
className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }}
>
{formatFigure(col?.basicAmount, {
type: "currency",
currency: "INR",
}) ?? 0}
</span>
),
align: "text-end",
},
{
key: "balance",
label: "Balance",
getValue: (col) => (
<span
className="text-truncate d-inline-block py-3"
style={{ maxWidth: "200px" }}
>
{formatFigure(col?.balanceAmount, {
type: "currency",
currency: "INR",
}) ?? 0}
</span>
),
align: "text-end",
},
];
if (isLoading) return <p>Loading...</p>;
if (isError) return <p>{error.message}</p>;
const CollectionList = () => {
return ( return (
<div> <div className="card ">
<div
</div> className="card-datatable table-responsive page-min-h"
) id="horizontal-example"
} >
<div className="dataTables_wrapper no-footer mx-5 pb-2">
<table className="table dataTable text-nowrap">
<thead>
<tr className="table_header_border">
{collectionColumns.map((col) => (
<th key={col.key} className={col.align}>
{col.label}
</th>
))}
<th className="sticky-action-column bg-white text-center">
Action
</th>
</tr>
</thead>
<tbody>
{Array.isArray(data?.data) && data.data.length > 0 ? (
data.data.map((row, i) => (
<tr key={i}>
{collectionColumns.map((col) => (
<td key={col.key} className={col.align}>
{col.getValue(row)}
</td>
))}
<td
className="sticky-action-column text-center"
style={{ padding: "12px 8px" }}
>
<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>
export default CollectionList <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>
))
) : (
<tr style={{ height: "200px" }}>
<td
colSpan={collectionColumns.length + 1}
className="text-center border-0 align-middle"
>
No Collections Found
</td>
</tr>
)}
</tbody>
</table>
{data?.data?.length > 0 && (
<div className="d-flex justify-content-start mt-2">
<Pagination
currentPage={currentPage}
totalPages={data?.totalPages}
onPageChange={paginate}
/>
</div>
)}
</div>
</div>
</div>
);
};
export default CollectionList;

View File

@ -0,0 +1,392 @@
import React from "react";
import { useModal } from "../../hooks/useAuth";
import Modal from "../common/Modal";
import { FormProvider, useForm } from "react-hook-form";
import Label from "../common/Label";
import { zodResolver } from "@hookform/resolvers/zod";
import { defaultCollection, newCollection } from "./collectionSchema";
import SelectMultiple from "../common/SelectMultiple";
import { useProjectName } from "../../hooks/useProjects";
import DatePicker from "../common/DatePicker";
import { useCreateCollection } from "../../hooks/useCollections";
import { formatFileSize, localToUtc } from "../../utils/appUtils";
const NewCollection = ({ collectionId, onClose }) => {
const { projectNames, projectLoading } = useProjectName();
const methods = useForm({
resolver: zodResolver(newCollection),
defaultValues: defaultCollection,
});
const {
control,
watch,
register,
setValue,
handleSubmit,
reset,
formState: { errors },
} = methods;
const { mutate: createNewCollection, isPending } = useCreateCollection(()=>{
handleClose()
});
const files = watch("billAttachments");
const onFileChange = async (e) => {
const newFiles = Array.from(e.target.files);
if (newFiles.length === 0) return;
const existingFiles = watch("billAttachments") || [];
const parsedFiles = await Promise.all(
newFiles.map(async (file) => {
const base64Data = await toBase64(file);
return {
fileName: file.name,
base64Data,
contentType: file.type,
fileSize: file.size,
description: "",
isActive: true,
};
})
);
const combinedFiles = [
...existingFiles,
...parsedFiles.filter(
(newFile) =>
!existingFiles.some(
(f) =>
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
)
),
];
setValue("billAttachments", combinedFiles, {
shouldDirty: true,
shouldValidate: true,
});
};
const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",")[1]);
reader.onerror = (error) => reject(error);
});
const removeFile = (index) => {
if (collectionId) {
const newFiles = files.map((file, i) => {
if (file.documentId !== index) return file;
return {
...file,
isActive: false,
};
});
setValue("billAttachments", newFiles, { shouldValidate: true });
} else {
const newFiles = files.filter((_, i) => i !== index);
setValue("billAttachments", newFiles, { shouldValidate: true });
}
};
const onSubmit = (formData) => {
const payload = {
...formData,
clientSubmitedDate: localToUtc(formData.clientSubmitedDate),
invoiceDate: localToUtc(formData.invoiceDate),
exceptedPaymentDate: localToUtc(formData.exceptedPaymentDate),
};
createNewCollection(payload);
};
const handleClose = () => {
reset(defaultCollection);
onClose();
};
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-1 px-0">
<div className="col-12 col-md-6 mb-2">
<Label required>Title</Label>
<input
type="text"
className="form-control form-control-sm"
{...register("title")}
/>
{errors.title && (
<small className="danger-text">{errors.title.message}</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Invoice Number</Label>
<input
type="text"
className="form-control form-control-sm"
{...register("invoiceNumber")}
/>
{errors.invoiceId && (
<small className="danger-text">
{errors.invoiceId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>E-Invoice Number</Label>
<input
type="text"
className="form-control form-control-sm"
{...register("eInvoiceNumber")}
/>
{errors.invoiceId && (
<small className="danger-text">
{errors.invoiceId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Invoice Date</Label>
<DatePicker
name="invoiceDate"
control={control}
maxDate={new Date()}
/>
{errors.invoiceDate && (
<small className="danger-text">
{errors.invoiceDate.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Expected Date</Label>
<DatePicker
name="exceptedPaymentDate"
control={control}
minDate={watch("invoiceDate")}
/>
{errors.exceptedPaymentDate && (
<small className="danger-text">
{errors.exceptedPaymentDate.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label required>Submission Date (Client)</Label>
<DatePicker
name="clientSubmitedDate"
control={control}
maxDate={new Date()}
/>
{errors.exceptedPaymentDate && (
<small className="danger-text">
{errors.exceptedPaymentDate.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label className="form-label" required>
Select Project
</Label>
<select
className="form-select form-select-sm"
{...register("projectId")}
>
<option value="">Select Project</option>
{projectLoading ? (
<option>Loading...</option>
) : (
projectNames?.map((project) => (
<option key={project.id} value={project.id}>
{project.name}
</option>
))
)}
</select>
{errors.projectId && (
<small className="danger-text">
{errors.projectId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="basicAmount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="basicAmount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("basicAmount", { valueAsNumber: true })}
/>
{errors.basicAmount && (
<small className="danger-text">
{errors.basicAmount.message}
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="taxAmount" className="form-label" required>
Tax Amount
</Label>
<input
type="number"
id="taxAmount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("taxAmount", { valueAsNumber: true })}
/>
{errors.taxAmount && (
<small className="danger-text">
{errors.taxAmount.message}
</small>
)}
</div>
<div className="col-12 my-2 text-start mb-2">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description
</Label>
<textarea
id="description"
className="form-control form-control-sm"
{...register("description")}
rows="2"
></textarea>
{errors.description && (
<small className="danger-text">
{errors.description.message}
</small>
)}
</div>
</div>
<div className="col-12">
<Label className="form-label" required>
Upload Bill{" "}
</Label>
<div
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative text-black"
style={{ cursor: "pointer" }}
onClick={() =>
document.getElementById("billAttachments").click()
}
>
<i className="bx bx-cloud-upload d-block bx-lg "> </i>
<span className="text-muted d-block">
Click to select or click here to browse
</span>
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
<input
type="file"
id="billAttachments"
accept=".pdf,.jpg,.jpeg,.png"
multiple
style={{ display: "none" }}
{...register("billAttachments")}
onChange={(e) => {
onFileChange(e);
e.target.value = "";
}}
/>
</div>
{errors.billAttachments && (
<small className="danger-text">
{errors.billAttachments.message}
</small>
)}
{files.length > 0 && (
<div className="d-block">
{files
.filter((file) => {
if (collectionId) {
return file.isActive;
}
return true;
})
.map((file, idx) => (
<a
key={idx}
className="d-flex justify-content-between text-start p-1"
href={file.preSignedUrl || "#"}
target="_blank"
rel="noopener noreferrer"
>
<div>
<span className="mb-0 text-secondary small d-block">
{file.fileName}
</span>
<span className="text-body-secondary small d-block">
{file.fileSize ? formatFileSize(file.fileSize) : ""}
</span>
</div>
<i
className="bx bx-trash bx-sm cursor-pointer text-danger"
onClick={(e) => {
e.preventDefault();
removeFile(collectionId ? file.documentId : idx);
}}
></i>
</a>
))}
</div>
)}
{Array.isArray(errors.billAttachments) &&
errors.billAttachments.map((fileError, index) => (
<div key={index} className="danger-text small mt-1">
{
(fileError?.fileSize?.message ||
fileError?.contentType?.message ||
fileError?.base64Data?.message,
fileError?.documentId?.message)
}
</div>
))}
</div>
<div className="d-flex justify-content-end gap-3">
{" "}
<button
type="reset"
className="btn btn-label-secondary btn-sm mt-3"
onClick={handleClose}
disabled={isPending}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm mt-3"
disabled={isPending}
>
{isPending ? "Please Wait..." : "Submit"}
</button>
</div>
</div>
</form>
</FormProvider>
</div>
);
};
export default NewCollection;

View File

@ -0,0 +1,89 @@
import { z } from "zod";
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = [
"application/pdf",
"image/png",
"image/jpg",
"image/jpeg",
];
export const newCollection = z.object({
title: z.string().trim().min(1, { message: "Title is required" }),
projectId: z.string().trim().min(1, { message: "Project is required" }),
invoiceDate: z.string().min(1, { message: "Date is required" }),
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" }),
taxAmount: z.coerce
.number({
invalid_type_error: "Amount is required and must be a number",
})
.min(1, "Amount must be Enter")
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
message: "Amount must have at most 2 decimal places",
}),
basicAmount: z.coerce
.number({
invalid_type_error: "Amount is required and must be a number",
})
.min(1, "Amount must be Enter")
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
message: "Amount must have at most 2 decimal places",
}),
billAttachments: z
.array(
z.object({
fileName: z.string().min(1, { message: "Filename is required" }),
base64Data: z.string().nullable(),
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
}),
documentId: z.string().optional(),
fileSize: z.number().max(MAX_FILE_SIZE, {
message: "File size must be less than or equal to 5MB",
}),
description: z.string().optional(),
isActive: z.boolean().default(true),
})
)
.nonempty({ message: "At least one file attachment is required" }),
});
export const defaultCollection = {
projectId: "",
invoiceNumber: " ",
eInvoiceNumber: "",
title: "",
clientSubmitedDate: null,
invoiceDate: null,
exceptedPaymentDate: null,
taxAmount: "",
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,
};

View File

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

View File

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

View File

@ -0,0 +1,78 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { CollectionRepository } from "../repositories/ColllectionRepository";
import showToast from "../services/toastService";
export const useCollections = (
pageSize,
pageNumber,
fromDate,
toDate,
isPending,
isActive,
searchString
) => {
return useQuery({
queryKey: [
"collections",
pageSize,
pageNumber,
fromDate,
toDate,
isPending,
isActive,
searchString,
],
queryFn: async () => {
const response = await CollectionRepository.getCollections(
pageSize,
pageNumber,
fromDate,
toDate,
isPending,
isActive,
searchString
);
return response.data;
},
keepPreviousData: true,
staleTime: 1000 * 60 * 1,
});
};
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.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"
);
},
});
};

View File

@ -1,21 +1,142 @@
import React from 'react' import React, { createContext, useContext, useState } from "react";
import Breadcrumb from '../../components/common/Breadcrumb' import moment from "moment";
import Breadcrumb from "../../components/common/Breadcrumb";
import CollectionList from "../../components/collections/CollectionList";
import { useModal } from "../../hooks/useAuth";
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 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(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 ( return (
<div className='container-fluid'> <CollectionContext.Provider value={contextMassager}>
<Breadcrumb <div className="container-fluid">
<Breadcrumb
data={[{ label: "Home", link: "/" }, { label: "Collection" }]} data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
/> />
<div className='card px-2 py-1'>
<div className='row'>
<div className='col-12'>
</div>
</div>
</div>
</div>
)
}
export default CollectionPage <div className="card my-3 py-2 px-sm-4 px-0">
<div className="row px-3">
<div className="col-12 col-md-3 mb-1">
<FormProvider {...methods}>
<DateRangePicker1 howManyDay={180} />
</FormProvider>
</div>
<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"
className="form-check-input"
role="switch"
id="inactiveEmployeesCheckbox"
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label
className="form-check-label ms-0"
htmlFor="inactiveEmployeesCheckbox"
>
Show Pending
</label>
</div>
</div>
<div className="col-12 col-md-6 d-flex justify-content-end gap-4">
<div className="">
{" "}
<input
type="search"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
placeholder="search Collection"
className="form-control form-control-sm"
/>
</div>
<button
className="btn btn-sm btn-primary"
type="button"
onClick={()=>setCollection({isOpen:true,invoiceId:null})}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">
Add New Collection
</span>
</button>
</div>
</div>
</div>
<CollectionList
fromDate={fromDate}
toDate={toDate}
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>
);
};
export default CollectionPage;

View File

@ -0,0 +1,24 @@
import { api } from "../utils/axiosClient";
import { DirectoryRepository } from "./DirectoryRepository";
export const CollectionRepository = {
createNewCollection: (data) =>
api.post(`/api/Collection/invoice/create`, data),
getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive, 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 (params.length > 0) {
url += `&${params.join("&")}`;
}
return api.get(url);
},
makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`),
markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`)
};