integrated editcollection and vew douments

src/ModalProvider.jsx

@@ -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();

src/components/collections/CollectionList.jsx

@@ -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",

src/components/collections/Comment.jsx

@@ -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 };

src/components/collections/ManageCollection.jsx

@@ -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(()=>{
+  const { mutate: createNewCollection, isPending } = useCreateCollection(() => {
-    handleClose()
+    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),
     };
-    createNewCollection(payload);
+
+    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">
-      <div className="text-black fs-5 mb-2">New Collection</div>
+        {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={() =>
+                onClick={() => document.getElementById("attachments").click()}
-                  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;

src/components/collections/PaymentHistoryTable.jsx

@@ -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>

src/components/collections/ViewCollection.jsx

@@ -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 = ({ onClose }) => {
-  const { viewCollection } = useCollectionContext();
+  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 */}

src/hooks/useCollections.js

@@ -128,4 +128,22 @@ 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"
+      );
+    },
+  })
+}

src/pages/collections/CollectionPage.jsx

@@ -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
+            <ManageCollection
-              collectionId={null}
+              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"

src/repositories/ColllectionRepository.jsx

@@ -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}`;