integrated editcollection and vew douments
This commit is contained in:
parent
0052fed1e6
commit
76df08e921
@ -4,7 +4,7 @@ import OrganizationModal from "./components/Organization/OrganizationModal";
|
||||
import { useAuthModal, useModal } from "./hooks/useAuth";
|
||||
import SwitchTenant from "./pages/authentication/SwitchTenant";
|
||||
import ChangePasswordPage from "./pages/authentication/ChangePassword";
|
||||
import NewCollection from "./components/collections/NewCollection";
|
||||
import NewCollection from "./components/collections/ManageCollection";
|
||||
|
||||
const ModalProvider = () => {
|
||||
const { isOpen, onClose } = useOrganizationModal();
|
||||
|
||||
@ -78,7 +78,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
{formatUTCToLocalTime(col.createdAt)}
|
||||
</span>
|
||||
),
|
||||
align: "text-start",
|
||||
align: "text-center",
|
||||
},
|
||||
{
|
||||
key: "expectedSubmittedDate",
|
||||
@ -91,7 +91,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
{formatUTCToLocalTime(col.exceptedPaymentDate) ?? "-"}
|
||||
</span>
|
||||
),
|
||||
align: "text-start",
|
||||
align: "text-center",
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
|
||||
@ -9,7 +9,7 @@ import moment from "moment";
|
||||
|
||||
const Comment = ({ invoice }) => {
|
||||
const {
|
||||
register,
|
||||
register,reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
@ -17,7 +17,7 @@ const Comment = ({ invoice }) => {
|
||||
defaultValues: { comment: "" },
|
||||
});
|
||||
|
||||
const { mutate: AddComment, isPending } = useAddComment(() => {});
|
||||
const { mutate: AddComment, isPending } = useAddComment(() => {reset()});
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const payload = { ...formData, invoiceId: invoice?.id };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { useModal } from "../../hooks/useAuth";
|
||||
import Modal from "../common/Modal";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
@ -8,11 +8,17 @@ import { defaultCollection, newCollection } from "./collectionSchema";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { useCreateCollection } from "../../hooks/useCollections";
|
||||
import {
|
||||
useCollection,
|
||||
useCreateCollection,
|
||||
useUpdateCollection,
|
||||
} from "../../hooks/useCollections";
|
||||
import { formatFileSize, localToUtc } from "../../utils/appUtils";
|
||||
import { useCollectionContext } from "../../pages/collections/CollectionPage";
|
||||
import { formatDate } from "../../utils/dateUtils";
|
||||
|
||||
const NewCollection = ({ collectionId, onClose }) => {
|
||||
|
||||
const ManageCollection = ({ collectionId, onClose }) => {
|
||||
const { data, isError, isLoading, error } = useCollection(collectionId);
|
||||
const { projectNames, projectLoading } = useProjectName();
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(newCollection),
|
||||
@ -28,8 +34,11 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const { mutate: createNewCollection, isPending } = useCreateCollection(()=>{
|
||||
handleClose()
|
||||
const { mutate: createNewCollection, isPending } = useCreateCollection(() => {
|
||||
handleClose();
|
||||
});
|
||||
const { mutate: UpdateCollection } = useUpdateCollection(() => {
|
||||
handleClose();
|
||||
});
|
||||
|
||||
const files = watch("attachments");
|
||||
@ -100,17 +109,58 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
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,
|
||||
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">New Collection</div>
|
||||
<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">
|
||||
@ -170,7 +220,6 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
name="exceptedPaymentDate"
|
||||
control={control}
|
||||
minDate={watch("invoiceDate")}
|
||||
|
||||
/>
|
||||
{errors.exceptedPaymentDate && (
|
||||
<small className="danger-text">
|
||||
@ -183,7 +232,6 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
<DatePicker
|
||||
name="clientSubmitedDate"
|
||||
control={control}
|
||||
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.exceptedPaymentDate && (
|
||||
@ -282,9 +330,7 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
<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()
|
||||
}
|
||||
onClick={() => document.getElementById("attachments").click()}
|
||||
>
|
||||
<i className="bx bx-cloud-upload d-block bx-lg "> </i>
|
||||
<span className="text-muted d-block">
|
||||
@ -382,11 +428,7 @@ const NewCollection = ({ collectionId, onClose }) => {
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
export default NewCollection;
|
||||
export default ManageCollection;
|
||||
@ -9,7 +9,6 @@ const PaymentHistoryTable = ({data}) => {
|
||||
|
||||
{data?.receivedInvoicePayments?.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<p className="fw-semibold fs-6">Received Payments</p>
|
||||
<table className="table table-bordered mt-2">
|
||||
<thead className="table-light">
|
||||
<tr>
|
||||
|
||||
@ -2,16 +2,23 @@ import React from "react";
|
||||
import { useCollectionContext } from "../../pages/collections/CollectionPage";
|
||||
import { useCollection } from "../../hooks/useCollections";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
import { formatFigure, getIconByFileType } from "../../utils/appUtils";
|
||||
import Avatar from "../common/Avatar";
|
||||
import PaymentHistoryTable from "./PaymentHistoryTable";
|
||||
import Comment from "./Comment";
|
||||
|
||||
const ViewCollection = () => {
|
||||
const { viewCollection } = useCollectionContext();
|
||||
const ViewCollection = ({ onClose }) => {
|
||||
const { viewCollection, setCollection , setDocumentView} = useCollectionContext();
|
||||
const { data, isLoading, isError, error } = useCollection(viewCollection);
|
||||
|
||||
const handleEdit = () => {
|
||||
setCollection({ isOpen: true, invoiceId: viewCollection });
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (isLoading) return <div>isLoading...</div>;
|
||||
if (isError) return <div>{error.message}</div>;
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<p className="fs-5 fw-semibold">Collection Details</p>
|
||||
@ -21,19 +28,26 @@ const ViewCollection = () => {
|
||||
<p className="mb-1 fs-6">{data?.title}</p>
|
||||
</div>
|
||||
<div className="col-2">
|
||||
<span class="badge bg-label-primary">
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
data?.isActive ? "primary" : "danger"
|
||||
}`}
|
||||
>
|
||||
{data?.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
{!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="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 d-flex ">
|
||||
<p className="m-0 fw-semibold me-1">Project:</p>{" "}
|
||||
{data?.project?.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 mb-3 d-flex">
|
||||
<p className="m-0 fw-semibold me-1">Invoice Number:</p>{" "}
|
||||
{data?.invoiceNumber}
|
||||
</div>
|
||||
@ -44,7 +58,7 @@ const ViewCollection = () => {
|
||||
</div>
|
||||
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 mb-3 d-flex">
|
||||
<p className="m-0 fw-semibold me-1">Invoice Date:</p>{" "}
|
||||
{formatUTCToLocalTime(data?.invoiceDate)}
|
||||
</div>
|
||||
@ -55,7 +69,7 @@ const ViewCollection = () => {
|
||||
</div>
|
||||
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 mb-3 d-flex">
|
||||
<p className="m-0 fw-semibold me-1">Expected Payment Date:</p>{" "}
|
||||
{formatUTCToLocalTime(data?.exceptedPaymentDate)}
|
||||
</div>
|
||||
@ -66,7 +80,7 @@ const ViewCollection = () => {
|
||||
</div>
|
||||
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 mb-3 d-flex">
|
||||
<p className="m-0 fw-semibold me-1">Basic Amount:</p>{" "}
|
||||
{formatFigure(data?.basicAmount, {
|
||||
type: "currency",
|
||||
@ -83,7 +97,7 @@ const ViewCollection = () => {
|
||||
</div>
|
||||
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex">
|
||||
<div className="col-md-6 mb-3 d-flex">
|
||||
<p className="m-0 fw-semibold me-1">Balance Amount:</p>{" "}
|
||||
{formatFigure(data?.balanceAmount, {
|
||||
type: "currency",
|
||||
@ -97,7 +111,7 @@ const ViewCollection = () => {
|
||||
</div>
|
||||
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6 d-flex align-items-center">
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<p className="m-0 fw-semibold">Created By:</p>{" "}
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
@ -114,6 +128,47 @@ const ViewCollection = () => {
|
||||
{data?.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label 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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container px-1 ">
|
||||
{/* Tabs Navigation */}
|
||||
@ -127,7 +182,8 @@ const ViewCollection = () => {
|
||||
type="button"
|
||||
role="tab"
|
||||
>
|
||||
Comments ({data?.comments?.length ?? '0'})
|
||||
<i className="bx bx-message-dots bx-sm me-2"></i> Comments (
|
||||
{data?.comments?.length ?? "0"})
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
@ -139,7 +195,7 @@ const ViewCollection = () => {
|
||||
type="button"
|
||||
role="tab"
|
||||
>
|
||||
Payments History
|
||||
<i className="bx bx-history bx-sm me-1"></i> Payments History
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@ -150,8 +206,7 @@ const ViewCollection = () => {
|
||||
id="details"
|
||||
role="tabpanel"
|
||||
>
|
||||
|
||||
<Comment invoice={data}/>
|
||||
<Comment invoice={data} />
|
||||
</div>
|
||||
|
||||
{/* Payments History Tab Content */}
|
||||
|
||||
@ -129,3 +129,21 @@ export const useAddComment = (onSuccessCallBack) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateCollection =(onSuccessCallBack)=>{
|
||||
const client = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn:async({collectionId,payload})=> await CollectionRepository.updateCollection(collectionId,payload),
|
||||
onSuccess: () => {
|
||||
client.invalidateQueries({ queryKey: ["collections"] });
|
||||
client.invalidateQueries({ queryKey: ["collection"] });
|
||||
showToast("Collection Updated Successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error?.response?.data?.message || error.message || "Something Went wrong"
|
||||
);
|
||||
},
|
||||
})
|
||||
}
|
||||
@ -10,10 +10,11 @@ import { isPending } from "@reduxjs/toolkit";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useMarkedPaymentReceived } from "../../hooks/useCollections";
|
||||
import NewCollection from "../../components/collections/NewCollection";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import AddPayment from "../../components/collections/AddPayment";
|
||||
import ViewCollection from "../../components/collections/ViewCollection";
|
||||
import ManageCollection from "../../components/collections/ManageCollection";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
|
||||
const CollectionContext = createContext();
|
||||
export const useCollectionContext = () => {
|
||||
@ -30,6 +31,10 @@ const CollectionPage = () => {
|
||||
isOpen: false,
|
||||
invoiceId: null,
|
||||
});
|
||||
const [ViewDocument, setDocumentView] = useState({
|
||||
IsOpen: false,
|
||||
Image: null,
|
||||
});
|
||||
const [processedPayment, setProcessedPayment] = useState(null);
|
||||
const [addPayment, setAddPayment] = useState({
|
||||
isOpen: false,
|
||||
@ -49,10 +54,12 @@ const CollectionPage = () => {
|
||||
|
||||
const contextMassager = {
|
||||
setProcessedPayment,
|
||||
setCollection,
|
||||
setAddPayment,
|
||||
addPayment,
|
||||
setViewCollection,
|
||||
viewCollection
|
||||
viewCollection,
|
||||
setDocumentView
|
||||
};
|
||||
const { mutate: MarkedReceived, isPending } = useMarkedPaymentReceived(() => {
|
||||
setProcessedPayment(null);
|
||||
@ -129,8 +136,8 @@ const CollectionPage = () => {
|
||||
size="lg"
|
||||
closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
|
||||
>
|
||||
<NewCollection
|
||||
collectionId={null}
|
||||
<ManageCollection
|
||||
collectionId={makeCollection?.invoiceId ?? null}
|
||||
onClose={() => setCollection({ isOpen: false, invoiceId: null })}
|
||||
/>
|
||||
</GlobalModel>
|
||||
@ -154,6 +161,16 @@ const CollectionPage = () => {
|
||||
</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"
|
||||
|
||||
@ -4,6 +4,9 @@ import { DirectoryRepository } from "./DirectoryRepository";
|
||||
export const CollectionRepository = {
|
||||
createNewCollection: (data) =>
|
||||
api.post(`/api/Collection/invoice/create`, data),
|
||||
updateCollection:(id,data)=>{
|
||||
api.put(`/api/Collection/invoice/edit/${id}`,data)
|
||||
},
|
||||
getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive, searchString) => {
|
||||
let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user