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 DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
|
||||||
import ProjectPage from "../pages/project/ProjectPage";
|
import ProjectPage from "../pages/project/ProjectPage";
|
||||||
import { ComingSoonPage } from "../pages/Misc/ComingSoonPage";
|
import { ComingSoonPage } from "../pages/Misc/ComingSoonPage";
|
||||||
|
import CollectionPage from "../pages/collections/CollectionPage";
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter(
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
@ -95,6 +96,7 @@ const router = createBrowserRouter(
|
|||||||
{ path: "/activities/reports", element: <Reports /> },
|
{ path: "/activities/reports", element: <Reports /> },
|
||||||
{ path: "/gallary", element: <ComingSoonPage /> },
|
{ path: "/gallary", element: <ComingSoonPage /> },
|
||||||
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
||||||
|
{ path: "/collection", element: <CollectionPage /> },
|
||||||
{ path: "/expenses", element: <ExpensePage /> },
|
{ path: "/expenses", element: <ExpensePage /> },
|
||||||
{ path: "/masters", element: <MasterPage /> },
|
{ path: "/masters", element: <MasterPage /> },
|
||||||
{ path: "/tenants", element: <TenantPage /> },
|
{ 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 THRESH_HOLD = 48; // hours
|
||||||
export const DURATION_TIME = 10; // minutes
|
export const DURATION_TIME = 10; // minutes
|
||||||
export const ITEMS_PER_PAGE = 20;
|
export const ITEMS_PER_PAGE = 20;
|
||||||
export const OTP_EXPIRY_SECONDS = 300; // OTP time
|
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 MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
|
||||||
|
|
||||||
export const VIEW_MASTER = "5ffbafe0-7ab0-48b1-bb50-c1bf76b65f9d";
|
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_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5";
|
||||||
|
|
||||||
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb";
|
export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb";
|
||||||
|
// ========================Finance=========================================================
|
||||||
// -----------------------Expense----------------------------------------
|
// -----------------------Expense----------------------------------------
|
||||||
export const VIEW_SELF_EXPENSE = "385be49f-8fde-440e-bdbc-3dffeb8dd116";
|
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";
|
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 = [
|
export const EXPENSE_REJECTEDBY = [
|
||||||
"d1ee5eec-24b6-4364-8673-a8f859c60729",
|
"d1ee5eec-24b6-4364-8673-a8f859c60729",
|
||||||
"965eda62-7907-4963-b4a1-657fb0b2724b",
|
"965eda62-7907-4963-b4a1-657fb0b2724b",
|
||||||
@ -145,26 +154,4 @@ export const PROJECT_STATUS = [
|
|||||||
label: "Completed",
|
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