Compare commits
No commits in common. "301684a12bb0307e523593e288ec3a5cb057e663" and "58c2fbdf1b5d681abf2ba42ade0966024cc8753f" have entirely different histories.
301684a12b
...
58c2fbdf1b
@ -4,20 +4,17 @@ import OrganizationModal from "./components/Organization/OrganizationModal";
|
||||
import { useAuthModal, useModal } from "./hooks/useAuth";
|
||||
import SwitchTenant from "./pages/authentication/SwitchTenant";
|
||||
import ChangePasswordPage from "./pages/authentication/ChangePassword";
|
||||
import NewCollection from "./components/collections/NewCollection";
|
||||
|
||||
const ModalProvider = () => {
|
||||
const { isOpen, onClose } = useOrganizationModal();
|
||||
const { isOpen: isAuthOpen } = useAuthModal();
|
||||
const {isOpen:isChangePass} = useModal("ChangePassword")
|
||||
const {isOpen:isCollectionNew} = useModal("newCollection");
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && <OrganizationModal />}
|
||||
{isAuthOpen && <SwitchTenant />}
|
||||
{isChangePass && <ChangePasswordPage /> }
|
||||
{isCollectionNew && <NewCollection/>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const AddPayment = () => {
|
||||
return (
|
||||
<div className='row'>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddPayment
|
||||
@ -1,239 +1,11 @@
|
||||
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>;
|
||||
import React from 'react'
|
||||
|
||||
const CollectionList = () => {
|
||||
return (
|
||||
<div className="card ">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default CollectionList;
|
||||
export default CollectionList
|
||||
|
||||
@ -1,392 +0,0 @@
|
||||
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;
|
||||
@ -1,89 +0,0 @@
|
||||
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,
|
||||
};
|
||||
@ -13,18 +13,19 @@ const ConfirmModal = ({
|
||||
if (!isOpen) return null;
|
||||
|
||||
const TypeofIcon = () => {
|
||||
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;
|
||||
if (type === "delete") {
|
||||
return (
|
||||
<i
|
||||
className="bx bx-x-circle text-danger"
|
||||
style={{ fontSize: "60px" }}
|
||||
></i>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const modalSize = type === "delete" ? "sm" : "md";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal fade show"
|
||||
@ -32,24 +33,22 @@ const ConfirmModal = ({
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div className="modal-dialog modal-sm modal-dialog-top">
|
||||
<div className={`modal-dialog modal-${modalSize} 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-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">
|
||||
<div className="col-4 col-sm-2">{TypeofIcon()}</div>
|
||||
<div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
|
||||
<span className="fs-6">{message}</span>
|
||||
<div className="d-flex justify-content-end mt-4">
|
||||
<button
|
||||
@ -60,7 +59,7 @@ const ConfirmModal = ({
|
||||
{loading ? "Please Wait..." : "Yes"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary ms-3 btn-sm"
|
||||
className="btn btn-secondary ms-4 btn-sm"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
@ -69,7 +68,6 @@ const ConfirmModal = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -88,6 +88,7 @@ export default DateRangePicker;
|
||||
|
||||
|
||||
|
||||
|
||||
export const DateRangePicker1 = ({
|
||||
startField = "startDate",
|
||||
endField = "endDate",
|
||||
@ -97,7 +98,6 @@ export const DateRangePicker1 = ({
|
||||
resetSignal,
|
||||
defaultRange = true,
|
||||
maxDate = null,
|
||||
howManyDay = 6,
|
||||
...rest
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
@ -107,13 +107,12 @@ export const DateRangePicker1 = ({
|
||||
field: { ref },
|
||||
} = useController({ name: startField, control });
|
||||
|
||||
// Apply default range
|
||||
const applyDefaultDates = () => {
|
||||
const today = new Date();
|
||||
const past = new Date(today.getTime());
|
||||
past.setDate(today.getDate() - howManyDay);
|
||||
const past = new Date();
|
||||
past.setDate(today.getDate() - 6);
|
||||
|
||||
const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
|
||||
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
|
||||
const formattedStart = format(past);
|
||||
const formattedEnd = format(today);
|
||||
|
||||
@ -128,19 +127,15 @@ export const DateRangePicker1 = ({
|
||||
useEffect(() => {
|
||||
if (!inputRef.current || inputRef.current._flatpickr) return;
|
||||
|
||||
if (defaultRange && !getValues(startField) && !getValues(endField)) {
|
||||
applyDefaultDates();
|
||||
}
|
||||
|
||||
const instance = window.flatpickr(inputRef.current, {
|
||||
const instance = 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) => window.flatpickr.formatDate(d, "d-m-Y");
|
||||
const format = (d) => flatpickr.formatDate(d, "d-m-Y");
|
||||
setValue(startField, format(start), { shouldValidate: true });
|
||||
setValue(endField, format(end), { shouldValidate: true });
|
||||
} else {
|
||||
@ -153,10 +148,12 @@ export const DateRangePicker1 = ({
|
||||
|
||||
const currentStart = getValues(startField);
|
||||
const currentEnd = getValues(endField);
|
||||
if (currentStart && currentEnd) {
|
||||
if (defaultRange && !currentStart && !currentEnd) {
|
||||
applyDefaultDates();
|
||||
} else if (currentStart && currentEnd) {
|
||||
instance.setDate([
|
||||
window.flatpickr.parseDate(currentStart, "d-m-Y"),
|
||||
window.flatpickr.parseDate(currentEnd, "d-m-Y"),
|
||||
flatpickr.parseDate(currentStart, "d-m-Y"),
|
||||
flatpickr.parseDate(currentEnd, "d-m-Y"),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -164,19 +161,20 @@ export const DateRangePicker1 = ({
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (resetSignal !== undefined) {
|
||||
if (defaultRange) {
|
||||
applyDefaultDates();
|
||||
} else {
|
||||
setValue(startField, "", { shouldValidate: true });
|
||||
setValue(endField, "", { shouldValidate: true });
|
||||
if (resetSignal !== undefined) {
|
||||
if (defaultRange) {
|
||||
applyDefaultDates();
|
||||
} else {
|
||||
setValue(startField, "", { shouldValidate: true });
|
||||
setValue(endField, "", { shouldValidate: true });
|
||||
|
||||
if (inputRef.current?._flatpickr) {
|
||||
inputRef.current._flatpickr.clear();
|
||||
}
|
||||
if (inputRef.current?._flatpickr) {
|
||||
inputRef.current._flatpickr.clear();
|
||||
}
|
||||
}
|
||||
}, [resetSignal, defaultRange, setValue, startField, endField]);
|
||||
}
|
||||
}, [resetSignal, defaultRange, setValue, startField, endField]);
|
||||
|
||||
|
||||
const start = getValues(startField);
|
||||
const end = getValues(endField);
|
||||
@ -188,7 +186,7 @@ export const DateRangePicker1 = ({
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder={placeholder}
|
||||
value={formattedValue}
|
||||
defaultValue={formattedValue}
|
||||
ref={(el) => {
|
||||
inputRef.current = el;
|
||||
ref(el);
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
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"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,142 +1,21 @@
|
||||
import React, { createContext, useContext, useState } from "react";
|
||||
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";
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../components/common/Breadcrumb'
|
||||
|
||||
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(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
|
||||
<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 px-3">
|
||||
<div className="col-12 col-md-3 mb-1">
|
||||
<FormProvider {...methods}>
|
||||
<DateRangePicker1 howManyDay={180} />
|
||||
</FormProvider>
|
||||
<div className='card px-2 py-1'>
|
||||
<div className='row'>
|
||||
<div className='col-12'>
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</CollectionContext.Provider>
|
||||
);
|
||||
};
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CollectionPage;
|
||||
export default CollectionPage
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
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}`)
|
||||
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user