intergrated collection managment
This commit is contained in:
parent
78b721dad7
commit
0091b1064e
266
src/components/collections/AddPayment.jsx
Normal file
266
src/components/collections/AddPayment.jsx
Normal file
@ -0,0 +1,266 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React, { useState } from "react";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { defaultPayment, paymentSchema } from "./collectionSchema";
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { formatDate } from "date-fns";
|
||||
import { useCollectionContext } from "../../pages/collections/CollectionPage";
|
||||
import { useAddPayment, useCollection } from "../../hooks/useCollections";
|
||||
import { formatFigure, localToUtc } from "../../utils/appUtils";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
|
||||
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
||||
|
||||
const AddPayment = ({ onClose }) => {
|
||||
const { addPayment } = useCollectionContext();
|
||||
const { data, isLoading, isError, error } = useCollection(
|
||||
addPayment?.invoiceId
|
||||
);
|
||||
const {
|
||||
data: paymentTypes,
|
||||
isLoading: isPaymentTypeLoading,
|
||||
isError: isPaymentTypeError,
|
||||
error: paymentError,
|
||||
} = usePaymentAjustmentHead(true);
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(paymentSchema),
|
||||
defaultValues: defaultPayment,
|
||||
});
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
const { mutate: AddPayment, isPending } = useAddPayment(() => {
|
||||
handleClose();
|
||||
});
|
||||
const onSubmit = (formData) => {
|
||||
const payload = {
|
||||
...formData,
|
||||
paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
|
||||
invoiceId: addPayment.invoiceId,
|
||||
};
|
||||
AddPayment(payload);
|
||||
};
|
||||
const handleClose = (formData) => {
|
||||
reset(defaultPayment);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container pb-3">
|
||||
<div className="text-black fs-5 mb-2">Add Payment</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>TransanctionId</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("transactionId")}
|
||||
/>
|
||||
{errors.transactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.transactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label required>Transaction Date </Label>
|
||||
<DatePicker
|
||||
name="paymentReceivedDate"
|
||||
control={control}
|
||||
minDate={
|
||||
data?.clientSubmitedDate
|
||||
? new Date(
|
||||
new Date(data?.clientSubmitedDate).setDate(
|
||||
new Date(data?.clientSubmitedDate).getDate() + 1
|
||||
)
|
||||
)
|
||||
: null
|
||||
}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.paymentReceivedDate && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentReceivedDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label
|
||||
htmlFor="paymentAdjustmentHeadId"
|
||||
className="form-label"
|
||||
required
|
||||
>
|
||||
Payment Adjustment Head
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
{...register("paymentAdjustmentHeadId")}
|
||||
>
|
||||
{isPaymentTypeLoading ? (
|
||||
<option>Loading..</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Payment Head</option>
|
||||
{paymentTypes?.data
|
||||
?.sort((a, b) => a.name.localeCompare(b.name))
|
||||
?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.paymentAdjustmentHeadId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentAdjustmentHeadId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="amount" className="form-label" required>
|
||||
Amount
|
||||
</Label>
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
{...register("amount", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.amount && (
|
||||
<small className="danger-text">{errors.amount.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 mb-2">
|
||||
<Label htmlFor="comment" className="form-label" required>
|
||||
Comment
|
||||
</Label>
|
||||
<textarea
|
||||
id="comment"
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">{errors.comment.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end gap-3">
|
||||
{" "}
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-label-secondary btn-sm mt-3"
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
onClose();
|
||||
}}
|
||||
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>
|
||||
|
||||
{isLoading ? (
|
||||
<PaymentHistorySkeleton />
|
||||
) : (
|
||||
data?.receivedInvoicePayments?.length > 0 && (
|
||||
<div className="mt-1 text-start">
|
||||
<div className="mb-2 text-secondry fs-6">
|
||||
<i className="bx bx-history bx-sm me-1"></i>History
|
||||
</div>
|
||||
|
||||
<div className="row text-start mx-2">
|
||||
{data.receivedInvoicePayments
|
||||
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
|
||||
.map((payment, index) => (
|
||||
<div className="col-12 mb-2" key={payment.id}>
|
||||
<div className=" p-2 border-start border-warning">
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
|
||||
<div>
|
||||
<small className="fw-semibold me-1">
|
||||
Transaction Date:
|
||||
</small>{" "}
|
||||
{formatUTCToLocalTime(payment.paymentReceivedDate)}
|
||||
</div>
|
||||
<span className="fs-semibold d-block d-md-none">
|
||||
{formatFigure(payment.amount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
|
||||
<small className="fw-semibold me-2">
|
||||
Updated By:
|
||||
</small>{" "}
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={payment?.createdBy?.firstName}
|
||||
lastName={payment?.createdBy?.lastName}
|
||||
/>{" "}
|
||||
{payment?.createdBy?.firstName}{" "}
|
||||
{payment.createdBy?.lastName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<p className="mb-1">
|
||||
<small className="fw-semibold">
|
||||
Transaction ID:
|
||||
</small>{" "}
|
||||
{payment.transactionId}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<div className="d-flex justify-content-between">
|
||||
<span>{payment?.paymentAdjustmentHead?.name}</span>
|
||||
<span className="fs-semibold d-none d-md-block">
|
||||
{formatFigure(payment.amount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-tiny m-0 mt-1">
|
||||
{payment?.comment}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddPayment;
|
||||
296
src/components/collections/CollectionList.jsx
Normal file
296
src/components/collections/CollectionList.jsx
Normal file
@ -0,0 +1,296 @@
|
||||
import React, { useState } from "react";
|
||||
import { useCollections } from "../../hooks/useCollections";
|
||||
import {
|
||||
ADDPAYMENT_COLLECTION,
|
||||
ADMIN_COLLECTION,
|
||||
CREATE_COLLECTION,
|
||||
EDIT_COLLECTION,
|
||||
ITEMS_PER_PAGE,
|
||||
VIEW_COLLECTION,
|
||||
} 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";
|
||||
import { CollectionTableSkeleton } from "./CollectionSkeleton";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
|
||||
const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
|
||||
const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
|
||||
const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
|
||||
const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
|
||||
const canCreate = useHasUserPermission(CREATE_COLLECTION);
|
||||
|
||||
const selectedProject = useSelectedProject();
|
||||
const searchDebounce = useDebounce(searchString, 500);
|
||||
|
||||
const { data, isLoading, isError, error } = useCollections(
|
||||
ITEMS_PER_PAGE,
|
||||
currentPage,
|
||||
localToUtc(fromDate),
|
||||
localToUtc(toDate),
|
||||
isPending,
|
||||
true,
|
||||
selectedProject,
|
||||
searchDebounce
|
||||
);
|
||||
const { setProcessedPayment, setAddPayment, setViewCollection } =
|
||||
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 No",
|
||||
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: "Submission Date",
|
||||
getValue: (col) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
{formatUTCToLocalTime(col.createdAt)}
|
||||
</span>
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
{
|
||||
key: "expectedSubmittedDate",
|
||||
label: "Expected Payment Date",
|
||||
getValue: (col) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
{formatUTCToLocalTime(col.exceptedPaymentDate) ?? "-"}
|
||||
</span>
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Total Amount",
|
||||
getValue: (col) => (
|
||||
<span
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
{formatFigure(col?.basicAmount + col?.taxAmount, {
|
||||
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 <CollectionTableSkeleton />;
|
||||
if (isError) return <p>{error.message}</p>;
|
||||
|
||||
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>
|
||||
))}
|
||||
{(isAdmin ||
|
||||
canAddPayment ||
|
||||
canViewCollection ||
|
||||
canEditCollection ||
|
||||
canCreate) && <th>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>
|
||||
))}
|
||||
{(isAdmin ||
|
||||
canAddPayment ||
|
||||
canViewCollection ||
|
||||
canEditCollection ||
|
||||
canCreate) && (
|
||||
<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"
|
||||
onClick={() => setViewCollection(row.id)}
|
||||
>
|
||||
<i className="bx bx-show me-2 text-primary"></i>
|
||||
<span>View</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{/* Only if not completed */}
|
||||
{!row?.markAsCompleted && (
|
||||
<>
|
||||
{/* Add Payment */}
|
||||
{(isAdmin || canAddPayment) && (
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() =>
|
||||
setAddPayment({
|
||||
isOpen: true,
|
||||
invoiceId: row.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-wallet me-2 text-warning"></i>
|
||||
<span>Add Payment</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
|
||||
{/* Mark Payment */}
|
||||
{isAdmin && (
|
||||
<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;
|
||||
85
src/components/collections/Comment.jsx
Normal file
85
src/components/collections/Comment.jsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { CommentSchema } from "./collectionSchema";
|
||||
import { useAddComment } from "../../hooks/useCollections";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import moment from "moment";
|
||||
|
||||
const Comment = ({ invoice }) => {
|
||||
const {
|
||||
register,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(CommentSchema),
|
||||
defaultValues: { comment: "" },
|
||||
});
|
||||
|
||||
const { mutate: AddComment, isPending } = useAddComment(() => {
|
||||
reset();
|
||||
});
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const payload = { ...formData, invoiceId: invoice?.id };
|
||||
AddComment(payload);
|
||||
};
|
||||
return (
|
||||
<div className="row pt-1 px-2">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12">
|
||||
<textarea
|
||||
className="form-control "
|
||||
rows={3}
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">{errors.comment.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-end p-2">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please wait..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{invoice?.comments?.length > 0 ? (
|
||||
invoice.comments.map((comment, index) => (
|
||||
<div
|
||||
className="border-start border-primary ps-1 py-2 mb-3"
|
||||
key={comment.id || index}
|
||||
>
|
||||
<div className="d-flex justify-content-between align-items-center mb-1">
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={comment?.createdBy?.firstName}
|
||||
lastName={comment?.createdBy?.lastName}
|
||||
/>
|
||||
<span className="ms-1 fw-semibold">
|
||||
{comment?.createdBy?.firstName} {comment?.createdBy?.lastName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<small className="text-secondary">
|
||||
{moment.utc(comment?.createdAt).local().fromNow()}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="ms-9"> <p className="mb-1">{comment?.comment}</p></div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-2"> <p className="text-muted">No comments yet.</p></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comment;
|
||||
445
src/components/collections/ManageCollection.jsx
Normal file
445
src/components/collections/ManageCollection.jsx
Normal file
@ -0,0 +1,445 @@
|
||||
import React, { useEffect } 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 {
|
||||
useCollection,
|
||||
useCreateCollection,
|
||||
useUpdateCollection,
|
||||
} from "../../hooks/useCollections";
|
||||
import { formatFileSize, localToUtc } from "../../utils/appUtils";
|
||||
import { useCollectionContext } from "../../pages/collections/CollectionPage";
|
||||
import { formatDate } from "../../utils/dateUtils";
|
||||
|
||||
const ManageCollection = ({ collectionId, onClose }) => {
|
||||
const { data, isError, isLoading, error } = useCollection(collectionId);
|
||||
const { projectNames, projectLoading } = useProjectName(true);
|
||||
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 { mutate: UpdateCollection } = useUpdateCollection(() => {
|
||||
handleClose();
|
||||
});
|
||||
|
||||
const files = watch("attachments");
|
||||
const onFileChange = async (e) => {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
if (newFiles.length === 0) return;
|
||||
|
||||
const existingFiles = watch("attachments") || [];
|
||||
|
||||
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("attachments", 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("attachments", newFiles, { shouldValidate: true });
|
||||
} else {
|
||||
const newFiles = files.filter((_, i) => i !== index);
|
||||
setValue("attachments", newFiles, { shouldValidate: true });
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const payload = {
|
||||
...formData,
|
||||
clientSubmitedDate: localToUtc(formData.clientSubmitedDate),
|
||||
invoiceDate: localToUtc(formData.invoiceDate),
|
||||
exceptedPaymentDate: localToUtc(formData.exceptedPaymentDate),
|
||||
};
|
||||
|
||||
if (collectionId) {
|
||||
UpdateCollection({
|
||||
collectionId,
|
||||
payload: { ...payload, id: collectionId },
|
||||
});
|
||||
} else {
|
||||
createNewCollection(payload);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
reset(defaultCollection);
|
||||
onClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data && collectionId) {
|
||||
reset({
|
||||
projectId: data?.project?.id,
|
||||
invoiceNumber: data?.invoiceNumber,
|
||||
eInvoiceNumber: data?.eInvoiceNumber,
|
||||
title: data?.title,
|
||||
clientSubmitedDate: formatDate(data?.clientSubmitedDate),
|
||||
invoiceDate: formatDate(data?.invoiceDate),
|
||||
exceptedPaymentDate: formatDate(data?.exceptedPaymentDate),
|
||||
taxAmount: data?.taxAmount,
|
||||
basicAmount: data?.basicAmount,
|
||||
description: data?.description,
|
||||
attachments: data.attachments
|
||||
? data.attachments.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.documentId,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
: [],
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
if (isLoading) return <div>Loading....</div>;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
return (
|
||||
<div className="container pb-3">
|
||||
<div className="text-black fs-5 mb-2">
|
||||
{collectionId ? "Update" : "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 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 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 Payment 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 htmlFor="basicAmount" className="form-label" required>
|
||||
Basic 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("attachments").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,Doc,docx,xls,xlsx max 5MB)
|
||||
</small>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="attachments"
|
||||
accept="
|
||||
.pdf,
|
||||
.doc,
|
||||
.docx,
|
||||
.xls,
|
||||
.xlsx,
|
||||
.jpg,
|
||||
.jpeg,
|
||||
.png
|
||||
"
|
||||
multiple
|
||||
style={{ display: "none" }}
|
||||
{...register("attachments")}
|
||||
onChange={(e) => {
|
||||
onFileChange(e);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{errors.attachments && (
|
||||
<small className="danger-text">
|
||||
{errors.attachments.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.attachments) &&
|
||||
errors.attachments.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 ManageCollection;
|
||||
53
src/components/collections/PaymentHistoryTable.jsx
Normal file
53
src/components/collections/PaymentHistoryTable.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react'
|
||||
import { formatUTCToLocalTime } from '../../utils/dateUtils'
|
||||
import { formatFigure } from '../../utils/appUtils'
|
||||
import Avatar from '../common/Avatar'
|
||||
|
||||
const PaymentHistoryTable = ({data}) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
{data?.receivedInvoicePayments?.length > 0 ? (
|
||||
<div className="pt-1 data-tabe table-responsive">
|
||||
<table className="table table-bordered table-responsive mt-2">
|
||||
<thead className="table-light">
|
||||
<tr>
|
||||
<th className="text-center">Sr.No</th>
|
||||
<th className="text-center">Transaction ID</th>
|
||||
<th className="text-center"> Received Date</th>
|
||||
<th className="text-center"> Payment Adjustment-Head</th>
|
||||
<th className="text-center">Amount</th>
|
||||
<th className="text-center">Updated By</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.receivedInvoicePayments.map((payment, index) => (
|
||||
<tr key={payment.id}>
|
||||
<td className="text-center">{index + 1}</td>
|
||||
<td ><span className="mx-2">{payment.transactionId}</span></td>
|
||||
<td className="text-center">{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
|
||||
<td className="text-start">{payment?.paymentAdjustmentHead?.name ?? "--"}</td>
|
||||
<td className="text-end">
|
||||
<span className="px-1">{formatFigure(payment.amount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="d-flex align-items-center mx-2 py-1">
|
||||
|
||||
{payment.createdBy?.firstName}{" "}
|
||||
{payment.createdBy?.lastName}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
):(<div className='text-center py-2'><p>No History</p></div>)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentHistoryTable
|
||||
258
src/components/collections/ViewCollection.jsx
Normal file
258
src/components/collections/ViewCollection.jsx
Normal file
@ -0,0 +1,258 @@
|
||||
import React, { useState } from "react";
|
||||
import { useCollectionContext } from "../../pages/collections/CollectionPage";
|
||||
import { useCollection } from "../../hooks/useCollections";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { formatFigure, getIconByFileType } from "../../utils/appUtils";
|
||||
import Avatar from "../common/Avatar";
|
||||
import PaymentHistoryTable from "./PaymentHistoryTable";
|
||||
import Comment from "./Comment";
|
||||
import { CollectionDetailsSkeleton } from "./CollectionSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { ADMIN_COLLECTION, EDIT_COLLECTION } from "../../utils/constants";
|
||||
|
||||
const ViewCollection = ({ onClose }) => {
|
||||
const [activeTab, setActiveTab] = useState("payments");
|
||||
const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
|
||||
const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
|
||||
const { viewCollection, setCollection, setDocumentView } =
|
||||
useCollectionContext();
|
||||
const { data, isLoading, isError, error } = useCollection(viewCollection);
|
||||
|
||||
const handleEdit = () => {
|
||||
setCollection({ isOpen: true, invoiceId: viewCollection });
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (isLoading) return <CollectionDetailsSkeleton />;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<p className="fs-5 fw-semibold">Collection Details</p>
|
||||
<div className="row text-start ">
|
||||
<div className="col-12 mb-3 d-flex justify-content-between">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className=" me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
data?.isActive ? "primary" : "danger"
|
||||
}`}
|
||||
>
|
||||
{data?.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
{(isAdmin || canEditCollection) &&
|
||||
!data?.receivedInvoicePayments && (
|
||||
<span onClick={handleEdit} className="ms-2 cursor-pointer">
|
||||
<i className="bx bx-edit text-primary bx-sm"></i>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-2 text-wrap">
|
||||
<div className="col-4 fw-semibold">Title :</div>
|
||||
<div className="col-8 text-wrap">{data?.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Invoice Number:</div>
|
||||
<div className="col-8">{data?.invoiceNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 2: E-Invoice Number + Project */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">E-Invoice Number:</div>
|
||||
<div className="col-8">{data?.eInvoiceNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Invoice Date + Client Submitted Date */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Invoice Date:</div>
|
||||
<div className="col-8">
|
||||
{formatUTCToLocalTime(data?.invoiceDate)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Client Submission Date:</div>
|
||||
<div className="col-8">
|
||||
{formatUTCToLocalTime(data?.clientSubmitedDate)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 4: Expected Payment Date + Mark as Completed */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Expected Payment Date:</div>
|
||||
<div className="col-8">
|
||||
{formatUTCToLocalTime(data?.exceptedPaymentDate)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5: Basic Amount + Tax Amount */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Basic Amount :</div>
|
||||
<div className="col-8">
|
||||
{formatFigure(data?.basicAmount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Tax Amount :</div>
|
||||
<div className="col-8">
|
||||
{formatFigure(data?.taxAmount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 6: Balance Amount + Created At */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Balance Amount :</div>
|
||||
<div className="col-8">
|
||||
{formatFigure(data?.balanceAmount, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-end">
|
||||
<div className="col-4 fw-semibold">Created At :</div>
|
||||
<div className="col-8">{formatUTCToLocalTime(data?.createdAt)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 7: Created By */}
|
||||
<div className="col-md-6">
|
||||
<div className="row mb-4 align-items-center">
|
||||
<div className="col-4 fw-semibold">Created By :</div>
|
||||
<div className="col-8 d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={data.createdBy?.firstName}
|
||||
lastName={data.createdBy?.lastName}
|
||||
/>
|
||||
<span className="ms-1 text-muted">
|
||||
{data?.createdBy?.firstName} {data?.createdBy?.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<div className="col-12 my-1 mb-2">
|
||||
<div className=" me-2 mb-0 fw-semibold">Description :</div>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className=" me-2 mb-2 fw-semibold">Attachment :</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.attachments?.map((doc) => {
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
||||
style={{
|
||||
width: "80px",
|
||||
cursor: isImage ? "pointer" : "default",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
}) ?? "No Attachment"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container px-1">
|
||||
{/* Tabs Navigation */}
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${
|
||||
activeTab === "payments" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("payments")}
|
||||
type="button"
|
||||
>
|
||||
<i className="bx bx-history bx-sm me-1"></i> Payments History
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${
|
||||
activeTab === "details" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("details")}
|
||||
type="button"
|
||||
>
|
||||
<i className="bx bx-message-dots bx-sm me-2"></i> Comments (
|
||||
{data?.comments?.length ?? "0"})
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="tab-content px-1 py-0 border-top-0">
|
||||
{activeTab === "payments" && (
|
||||
<div className="tab-pane fade show active">
|
||||
<PaymentHistoryTable data={data} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "details" && (
|
||||
<div className="tab-pane fade show active">
|
||||
<Comment invoice={data} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewCollection;
|
||||
101
src/components/collections/collectionSchema.jsx
Normal file
101
src/components/collections/collectionSchema.jsx
Normal file
@ -0,0 +1,101 @@
|
||||
import { z } from "zod";
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
const ALLOWED_TYPES = [
|
||||
"application/pdf",
|
||||
"application/doc",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
"image/png",
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
"application/vnd.ms-excel",
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
];
|
||||
|
||||
|
||||
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",
|
||||
}),
|
||||
attachments: 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: "",
|
||||
attachments: [],
|
||||
};
|
||||
|
||||
export const paymentSchema = z.object({
|
||||
paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
|
||||
transactionId: z.string().min(1, "Transaction ID is required"),
|
||||
amount: z.number().min(1, "Amount must be greater than zero"),
|
||||
comment:z.string().min(1,{message:"Comment required"}),
|
||||
paymentAdjustmentHeadId:z.string().min(1,{message:"Payment Type required"})
|
||||
});
|
||||
|
||||
// Default Value
|
||||
export const defaultPayment = {
|
||||
paymentReceivedDate: null,
|
||||
transactionId: "",
|
||||
amount: 0,
|
||||
comment:"",
|
||||
paymentAdjustmentHeadId:""
|
||||
};
|
||||
|
||||
|
||||
export const CommentSchema = z.object({
|
||||
comment:z.string().min(1,{message:"Comment required"})
|
||||
})
|
||||
22
src/components/common/AccessDenied.jsx
Normal file
22
src/components/common/AccessDenied.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import Breadcrumb from "./Breadcrumb";
|
||||
|
||||
const AccessDenied = ({data}) => {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={data}
|
||||
/>
|
||||
|
||||
<div className="card text-center py-1">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5" />
|
||||
<p>
|
||||
Access Denied: You don't have permission to perform this action !
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessDenied;
|
||||
223
src/pages/collections/CollectionPage.jsx
Normal file
223
src/pages/collections/CollectionPage.jsx
Normal file
@ -0,0 +1,223 @@
|
||||
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 GlobalModel from "../../components/common/GlobalModel";
|
||||
import AddPayment from "../../components/collections/AddPayment";
|
||||
import ViewCollection from "../../components/collections/ViewCollection";
|
||||
import ManageCollection from "../../components/collections/ManageCollection";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
ADDPAYMENT_COLLECTION,
|
||||
ADMIN_COLLECTION,
|
||||
CREATE_COLLECTION,
|
||||
EDIT_COLLECTION,
|
||||
VIEW_COLLECTION,
|
||||
} from "../../utils/constants";
|
||||
import AccessDenied from "../../components/common/AccessDenied";
|
||||
|
||||
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 [viewCollection, setViewCollection] = useState(null);
|
||||
const [makeCollection, setCollection] = useState({
|
||||
isOpen: false,
|
||||
invoiceId: null,
|
||||
});
|
||||
const [ViewDocument, setDocumentView] = useState({
|
||||
IsOpen: false,
|
||||
Image: null,
|
||||
});
|
||||
const [processedPayment, setProcessedPayment] = useState(null);
|
||||
const [addPayment, setAddPayment] = useState({
|
||||
isOpen: false,
|
||||
invoiceId: null,
|
||||
});
|
||||
const [showPending, setShowPending] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const isAdmin = useHasUserPermission(ADMIN_COLLECTION);
|
||||
const canViewCollection = useHasUserPermission(VIEW_COLLECTION);
|
||||
const canCreate = useHasUserPermission(CREATE_COLLECTION);
|
||||
const canEditCollection = useHasUserPermission(EDIT_COLLECTION);
|
||||
const canAddPayment = useHasUserPermission(ADDPAYMENT_COLLECTION);
|
||||
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,
|
||||
setCollection,
|
||||
setAddPayment,
|
||||
addPayment,
|
||||
setViewCollection,
|
||||
viewCollection,
|
||||
setDocumentView,
|
||||
};
|
||||
const { mutate: MarkedReceived, isPending } = useMarkedPaymentReceived(() => {
|
||||
setProcessedPayment(null);
|
||||
});
|
||||
const handleMarkedPayment = (payload) => {
|
||||
MarkedReceived(payload);
|
||||
};
|
||||
if (isAdmin === undefined ||
|
||||
canAddPayment === undefined ||
|
||||
canEditCollection === undefined ||
|
||||
canViewCollection === undefined ||
|
||||
canCreate === undefined
|
||||
) {
|
||||
return <div className="text-center py-5">Checking access...</div>;
|
||||
}
|
||||
|
||||
if (!isAdmin && !canAddPayment && !canEditCollection && !canViewCollection && !canCreate) {
|
||||
return <AccessDenied data={[{ label: "Home", link: "/" }, { label: "Collection" }]} />;
|
||||
}
|
||||
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 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=" w-md-auto">
|
||||
{" "}
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
placeholder="search Collection"
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
</div>
|
||||
{ (canCreate || isAdmin) && (
|
||||
<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 })}
|
||||
>
|
||||
<ManageCollection
|
||||
collectionId={makeCollection?.invoiceId ?? null}
|
||||
onClose={() => setCollection({ isOpen: false, invoiceId: null })}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{addPayment.isOpen && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={addPayment.isOpen}
|
||||
closeModal={() => setAddPayment({ isOpen: false, invoiceId: null })}
|
||||
>
|
||||
<AddPayment
|
||||
onClose={() => setAddPayment({ isOpen: false, invoiceId: null })}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{viewCollection && (
|
||||
<GlobalModel
|
||||
size="lg"
|
||||
isOpen={viewCollection}
|
||||
closeModal={() => setViewCollection(null)}
|
||||
>
|
||||
<ViewCollection onClose={() => setViewCollection(null)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{ViewDocument.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
key={ViewDocument.Image ?? "doc"}
|
||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||
>
|
||||
<PreviewDocument imageUrl={ViewDocument.Image} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<ConfirmModal
|
||||
type="success"
|
||||
header="Payment Successful Received"
|
||||
message="Payment has been recored successfully."
|
||||
isOpen={processedPayment?.isOpen}
|
||||
loading={isPending}
|
||||
onSubmit={() => handleMarkedPayment(processedPayment?.invoiceId)}
|
||||
onClose={() => setProcessedPayment(null)}
|
||||
/>
|
||||
</div>
|
||||
</CollectionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollectionPage;
|
||||
@ -53,6 +53,7 @@ import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
|
||||
import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
|
||||
import ProjectPage from "../pages/project/ProjectPage";
|
||||
import { ComingSoonPage } from "../pages/Misc/ComingSoonPage";
|
||||
import CollectionPage from "../pages/collections/CollectionPage";
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
@ -95,6 +96,7 @@ const router = createBrowserRouter(
|
||||
{ path: "/activities/reports", element: <Reports /> },
|
||||
{ path: "/gallary", element: <ComingSoonPage /> },
|
||||
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
||||
{ path: "/collection", element: <CollectionPage /> },
|
||||
{ path: "/expenses", element: <ExpensePage /> },
|
||||
{ path: "/masters", element: <MasterPage /> },
|
||||
{ path: "/tenants", element: <TenantPage /> },
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
|
||||
export const THRESH_HOLD = 48; // hours
|
||||
export const DURATION_TIME = 10; // minutes
|
||||
export const ITEMS_PER_PAGE = 20;
|
||||
export const OTP_EXPIRY_SECONDS = 300; // OTP time
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||
|
||||
export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||
|
||||
export const VIEW_MASTER = "5ffbafe0-7ab0-48b1-bb50-c1bf76b65f9d";
|
||||
@ -50,7 +49,7 @@ export const DIRECTORY_ADMIN = "4286a13b-bb40-4879-8c6d-18e9e393beda";
|
||||
export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5";
|
||||
|
||||
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb";
|
||||
|
||||
// ========================Finance=========================================================
|
||||
// -----------------------Expense----------------------------------------
|
||||
export const VIEW_SELF_EXPENSE = "385be49f-8fde-440e-bdbc-3dffeb8dd116";
|
||||
|
||||
@ -66,6 +65,16 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
|
||||
|
||||
export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
|
||||
|
||||
// --------------------------------Collection----------------------------
|
||||
|
||||
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
|
||||
export const VIEW_COLLECTION = "c8d7eea5-4033-4aad-9ebe-76de49896830";
|
||||
export const CREATE_COLLECTION = "b93141fd-dbd3-4051-8f57-bf25d18e3555";
|
||||
export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
|
||||
export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
|
||||
|
||||
// ==========================================================================================
|
||||
|
||||
export const EXPENSE_REJECTEDBY = [
|
||||
"d1ee5eec-24b6-4364-8673-a8f859c60729",
|
||||
"965eda62-7907-4963-b4a1-657fb0b2724b",
|
||||
@ -145,26 +154,4 @@ export const PROJECT_STATUS = [
|
||||
label: "Completed",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const EXPENSE_STATUS = {
|
||||
daft:"297e0d8f-f668-41b5-bfea-e03b354251c8",
|
||||
review_pending:"6537018f-f4e9-4cb3-a210-6c3b2da999d7",
|
||||
payment_pending:"f18c5cfd-7815-4341-8da2-2c2d65778e27",
|
||||
approve_pending:"4068007f-c92f-4f37-a907-bc15fe57d4d8",
|
||||
process_pending:"61578360-3a49-4c34-8604-7b35a3787b95"
|
||||
|
||||
}
|
||||
|
||||
export const UUID_REGEX =
|
||||
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
|
||||
|
||||
export const ALLOW_PROJECTSTATUS_ID = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
];
|
||||
|
||||
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
|
||||
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
Loading…
x
Reference in New Issue
Block a user