Merge pull request 'collection_dev' (#482) from collection_dev into Collection_Management

Reviewed-on: #482
merged

src/ModalProvider.jsx

@@ -4,17 +4,20 @@ import OrganizationModal from "./components/Organization/OrganizationModal";
 import { useAuthModal, useModal } from "./hooks/useAuth";
 import SwitchTenant from "./pages/authentication/SwitchTenant";
 import ChangePasswordPage from "./pages/authentication/ChangePassword";
+import NewCollection from "./components/collections/NewCollection";
 
 const ModalProvider = () => {
   const { isOpen, onClose } = useOrganizationModal();
   const { isOpen: isAuthOpen } = useAuthModal();
   const {isOpen:isChangePass}  = useModal("ChangePassword")
+  const {isOpen:isCollectionNew}  = useModal("newCollection");
 
   return (
     <>
       {isOpen && <OrganizationModal />}
       {isAuthOpen && <SwitchTenant />}
       {isChangePass && <ChangePasswordPage /> }
+      {isCollectionNew && <NewCollection/>}
     </>
   );
 };

src/components/collections/AddPayment.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AddPayment = () => {
+  return (
+    <div className='row'>
+      
+    </div>
+  )
+}
+
+export default AddPayment

src/components/collections/CollectionList.jsx

@@ -1,11 +1,239 @@
-import React from 'react'
+import React, { useState } from "react";
+import { useCollections } from "../../hooks/useCollections";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { formatFigure, localToUtc, useDebounce } from "../../utils/appUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Pagination from "../common/Pagination";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+
+const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const searchDebounce = useDebounce(searchString, 500);
+
+  const { data, isLoading, isError, error } = useCollections(
+    ITEMS_PER_PAGE,
+    currentPage,
+    localToUtc(fromDate),
+    localToUtc(toDate),
+    isPending,
+    true,
+    searchDebounce
+  );
+  const {setProcessedPayment} = useCollectionContext()
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  const collectionColumns = [
+    {
+      key: "invoiceDate",
+      label: "Invoice Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.invoiceDate)}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "invoiceId",
+      label: "Invoice Id",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {col?.invoiceNumber ?? "-"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "project",
+      label: "Project",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {col?.project?.name ?? "-"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "submittedDate",
+      label: "Submitted Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.createdAt)}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "expectedSubmittedDate",
+      label: "Expected Payment Date",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatUTCToLocalTime(col.exceptedPaymentDate) ?? "-"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatFigure(col?.basicAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
+        </span>
+      ),
+      align: "text-end",
+    },
+    {
+      key: "balance",
+      label: "Balance",
+      getValue: (col) => (
+        <span
+          className="text-truncate d-inline-block py-3"
+          style={{ maxWidth: "200px" }}
+        >
+          {formatFigure(col?.balanceAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
+        </span>
+      ),
+      align: "text-end",
+    },
+  ];
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>{error.message}</p>;
 
-const CollectionList = () => {
   return (
-    <div>
+    <div className="card ">
+      <div
+        className="card-datatable table-responsive page-min-h"
+        id="horizontal-example"
+      >
+        <div className="dataTables_wrapper no-footer mx-5 pb-2">
+          <table className="table dataTable text-nowrap">
+            <thead>
+              <tr className="table_header_border">
+                {collectionColumns.map((col) => (
+                  <th key={col.key} className={col.align}>
+                    {col.label}
+                  </th>
+                ))}
+                <th className="sticky-action-column bg-white text-center">
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {Array.isArray(data?.data) && data.data.length > 0 ? (
+                data.data.map((row, i) => (
+                  <tr key={i}>
+                    {collectionColumns.map((col) => (
+                      <td key={col.key} className={col.align}>
+                        {col.getValue(row)}
+                      </td>
+                    ))}
+                    <td
+                      className="sticky-action-column text-center"
+                      style={{ padding: "12px 8px" }}
+                    >
+                      <div className="dropdown z-2">
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i
+                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                            data-bs-toggle="tooltip"
+                            data-bs-offset="0,8"
+                            data-bs-placement="top"
+                            data-bs-custom-class="tooltip-dark"
+                            title="More Action"
+                          ></i>
+                        </button>
 
+                        <ul className="dropdown-menu dropdown-menu-end">
+                          {/* View */}
+                          <li>
+                            <a className="dropdown-item cursor-pointer">
+                              <i className="bx bx-show me-2 text-primary"></i>
+                              <span>View</span>
+                            </a>
+                          </li>
+
+                          {/* Add Payment */}
+                          <li>
+                            <a className="dropdown-item cursor-pointer">
+                              <i className="bx bx-wallet me-2 text-warning"></i>
+                              <span>Add Payment</span>
+                            </a>
+                          </li>
+
+                          {/* Mark Payment */}
+                          <li>
+                            <a className="dropdown-item cursor-pointer" onClick={()=>setProcessedPayment({isOpen:true,invoiceId:row.id})}>
+                              <i className="bx bx-check-circle me-2 text-success"></i>
+                              <span>Mark Payment</span>
+                            </a>
+                          </li>
+                        </ul>
                       </div>
-  )
+                    </td>
-}
+                  </tr>
+                ))
+              ) : (
+                <tr style={{ height: "200px" }}>
+                  <td
+                    colSpan={collectionColumns.length + 1}
+                    className="text-center border-0 align-middle"
+                  >
+                    No Collections Found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          {data?.data?.length > 0 && (
+            <div className="d-flex justify-content-start mt-2">
+              <Pagination
+                currentPage={currentPage}
+                totalPages={data?.totalPages}
+                onPageChange={paginate}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default CollectionList
+export default CollectionList;

src/components/collections/NewCollection.jsx

@@ -0,0 +1,392 @@
+import React from "react";
+import { useModal } from "../../hooks/useAuth";
+import Modal from "../common/Modal";
+import { FormProvider, useForm } from "react-hook-form";
+import Label from "../common/Label";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultCollection, newCollection } from "./collectionSchema";
+import SelectMultiple from "../common/SelectMultiple";
+import { useProjectName } from "../../hooks/useProjects";
+import DatePicker from "../common/DatePicker";
+import { useCreateCollection } from "../../hooks/useCollections";
+import { formatFileSize, localToUtc } from "../../utils/appUtils";
+
+const NewCollection = ({ collectionId, onClose }) => {
+
+  const { projectNames, projectLoading } = useProjectName();
+  const methods = useForm({
+    resolver: zodResolver(newCollection),
+    defaultValues: defaultCollection,
+  });
+  const {
+    control,
+    watch,
+    register,
+    setValue,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const { mutate: createNewCollection, isPending } = useCreateCollection(()=>{
+    handleClose()
+  });
+
+  const files = watch("billAttachments");
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
+
+    const existingFiles = watch("billAttachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+          isActive: true,
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("billAttachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const removeFile = (index) => {
+    if (collectionId) {
+      const newFiles = files.map((file, i) => {
+        if (file.documentId !== index) return file;
+        return {
+          ...file,
+          isActive: false,
+        };
+      });
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+    } else {
+      const newFiles = files.filter((_, i) => i !== index);
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+    }
+  };
+
+  const onSubmit = (formData) => {
+    const payload = {
+      ...formData,
+      clientSubmitedDate: localToUtc(formData.clientSubmitedDate),
+      invoiceDate: localToUtc(formData.invoiceDate),
+      exceptedPaymentDate: localToUtc(formData.exceptedPaymentDate),
+    };
+    createNewCollection(payload);
+  };
+  const handleClose = () => {
+    reset(defaultCollection);
+    onClose();
+  };
+
+  return (
+    <div className="container pb-3">
+
+      <div className="text-black fs-5 mb-2">New Collection</div>
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
+          <div className="row px-md-1 px-0">
+            <div className="col-12 col-md-6 mb-2">
+              <Label required>Title</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("title")}
+              />
+              {errors.title && (
+                <small className="danger-text">{errors.title.message}</small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Invoice Number</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("invoiceNumber")}
+              />
+              {errors.invoiceId && (
+                <small className="danger-text">
+                  {errors.invoiceId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>E-Invoice Number</Label>
+              <input
+                type="text"
+                className="form-control form-control-sm"
+                {...register("eInvoiceNumber")}
+              />
+              {errors.invoiceId && (
+                <small className="danger-text">
+                  {errors.invoiceId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Invoice Date</Label>
+              <DatePicker
+                name="invoiceDate"
+                control={control}
+                maxDate={new Date()}
+              />
+              {errors.invoiceDate && (
+                <small className="danger-text">
+                  {errors.invoiceDate.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Expected Date</Label>
+              <DatePicker
+                name="exceptedPaymentDate"
+                control={control}
+                minDate={watch("invoiceDate")}
+                
+              />
+              {errors.exceptedPaymentDate && (
+                <small className="danger-text">
+                  {errors.exceptedPaymentDate.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label required>Submission Date (Client)</Label>
+              <DatePicker
+                name="clientSubmitedDate"
+                control={control}
+                
+                maxDate={new Date()}
+              />
+              {errors.exceptedPaymentDate && (
+                <small className="danger-text">
+                  {errors.exceptedPaymentDate.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label className="form-label" required>
+                Select Project
+              </Label>
+              <select
+                className="form-select form-select-sm"
+                {...register("projectId")}
+              >
+                <option value="">Select Project</option>
+                {projectLoading ? (
+                  <option>Loading...</option>
+                ) : (
+                  projectNames?.map((project) => (
+                    <option key={project.id} value={project.id}>
+                      {project.name}
+                    </option>
+                  ))
+                )}
+              </select>
+              {errors.projectId && (
+                <small className="danger-text">
+                  {errors.projectId.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label htmlFor="basicAmount" className="form-label" required>
+                Amount
+              </Label>
+              <input
+                type="number"
+                id="basicAmount"
+                className="form-control form-control-sm"
+                min="1"
+                step="0.01"
+                inputMode="decimal"
+                {...register("basicAmount", { valueAsNumber: true })}
+              />
+              {errors.basicAmount && (
+                <small className="danger-text">
+                  {errors.basicAmount.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 col-md-6  mb-2">
+              <Label htmlFor="taxAmount" className="form-label" required>
+                Tax Amount
+              </Label>
+              <input
+                type="number"
+                id="taxAmount"
+                className="form-control form-control-sm"
+                min="1"
+                step="0.01"
+                inputMode="decimal"
+                {...register("taxAmount", { valueAsNumber: true })}
+              />
+              {errors.taxAmount && (
+                <small className="danger-text">
+                  {errors.taxAmount.message}
+                </small>
+              )}
+            </div>
+            <div className="col-12 my-2 text-start  mb-2">
+              <div className="col-md-12">
+                <Label htmlFor="description" className="form-label" required>
+                  Description
+                </Label>
+                <textarea
+                  id="description"
+                  className="form-control form-control-sm"
+                  {...register("description")}
+                  rows="2"
+                ></textarea>
+                {errors.description && (
+                  <small className="danger-text">
+                    {errors.description.message}
+                  </small>
+                )}
+              </div>
+            </div>
+
+            <div className="col-12">
+              <Label className="form-label" required>
+                Upload Bill{" "}
+              </Label>
+
+              <div
+                className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative text-black"
+                style={{ cursor: "pointer" }}
+                onClick={() =>
+                  document.getElementById("billAttachments").click()
+                }
+              >
+                <i className="bx bx-cloud-upload d-block bx-lg "> </i>
+                <span className="text-muted d-block">
+                  Click to select or click here to browse
+                </span>
+                <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
+
+                <input
+                  type="file"
+                  id="billAttachments"
+                  accept=".pdf,.jpg,.jpeg,.png"
+                  multiple
+                  style={{ display: "none" }}
+                  {...register("billAttachments")}
+                  onChange={(e) => {
+                    onFileChange(e);
+                    e.target.value = "";
+                  }}
+                />
+              </div>
+              {errors.billAttachments && (
+                <small className="danger-text">
+                  {errors.billAttachments.message}
+                </small>
+              )}
+              {files.length > 0 && (
+                <div className="d-block">
+                  {files
+                    .filter((file) => {
+                      if (collectionId) {
+                        return file.isActive;
+                      }
+                      return true;
+                    })
+                    .map((file, idx) => (
+                      <a
+                        key={idx}
+                        className="d-flex justify-content-between text-start p-1"
+                        href={file.preSignedUrl || "#"}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <div>
+                          <span className="mb-0 text-secondary small d-block">
+                            {file.fileName}
+                          </span>
+                          <span className="text-body-secondary small d-block">
+                            {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                          </span>
+                        </div>
+                        <i
+                          className="bx bx-trash bx-sm cursor-pointer text-danger"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            removeFile(collectionId ? file.documentId : idx);
+                          }}
+                        ></i>
+                      </a>
+                    ))}
+                </div>
+              )}
+
+              {Array.isArray(errors.billAttachments) &&
+                errors.billAttachments.map((fileError, index) => (
+                  <div key={index} className="danger-text small mt-1">
+                    {
+                      (fileError?.fileSize?.message ||
+                        fileError?.contentType?.message ||
+                        fileError?.base64Data?.message,
+                      fileError?.documentId?.message)
+                    }
+                  </div>
+                ))}
+            </div>
+
+            <div className="d-flex justify-content-end gap-3">
+              {" "}
+              <button
+                type="reset"
+                className="btn btn-label-secondary btn-sm mt-3"
+                onClick={handleClose}
+                disabled={isPending}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm mt-3"
+                disabled={isPending}
+              >
+                {isPending ? "Please Wait..." : "Submit"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+    
+  );
+ 
+    
+ 
+};
+
+export default NewCollection;

src/components/collections/collectionSchema.jsx

@@ -0,0 +1,89 @@
+import { z } from "zod";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+];
+
+export const newCollection = z.object({
+  title: z.string().trim().min(1, { message: "Title is required" }),
+  projectId: z.string().trim().min(1, { message: "Project is required" }),
+  invoiceDate: z.string().min(1, { message: "Date is required" }),
+  description: z.string().trim().optional(),
+  clientSubmitedDate: z.string().min(1, { message: "Date is required" }),
+  exceptedPaymentDate: z.string().min(1, { message: "Date is required" }),
+  invoiceNumber: z
+    .string()
+    .trim()
+    .min(1, { message: "Invoice is required" })
+    .max(17, { message: "Invalid Number" }),
+  eInvoiceNumber: z
+    .string()
+    .trim()
+    .min(1, { message: "E-Invoice No is required" }),
+  taxAmount: z.coerce
+    .number({
+      invalid_type_error: "Amount is required and must be a number",
+    })
+    .min(1, "Amount must be Enter")
+    .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+      message: "Amount must have at most 2 decimal places",
+    }),
+  basicAmount: z.coerce
+    .number({
+      invalid_type_error: "Amount is required and must be a number",
+    })
+    .min(1, "Amount must be Enter")
+    .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
+      message: "Amount must have at most 2 decimal places",
+    }),
+  billAttachments: z
+    .array(
+      z.object({
+        fileName: z.string().min(1, { message: "Filename is required" }),
+        base64Data: z.string().nullable(),
+        contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+          message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+        }),
+        documentId: z.string().optional(),
+        fileSize: z.number().max(MAX_FILE_SIZE, {
+          message: "File size must be less than or equal to 5MB",
+        }),
+        description: z.string().optional(),
+        isActive: z.boolean().default(true),
+      })
+    )
+    .nonempty({ message: "At least one file attachment is required" }),
+});
+
+export const defaultCollection = {
+  projectId: "",
+  invoiceNumber: " ",
+  eInvoiceNumber: "",
+  title: "",
+  clientSubmitedDate: null,
+  invoiceDate: null,
+  exceptedPaymentDate: null,
+  taxAmount: "",
+  basicAmount: "",
+  description: "",
+  billAttachments: [],
+};
+
+export const paymentSchema = z.object({
+  invoiceId: z.string().min(1, { message: "Invoice Id required" }),
+  paymentReceivedDate: z.string().datetime(),
+  transactionId: z.string().min(1, "Transaction ID is required"),
+  amount: z.number().min(1, "Amount must be greater than zero"),
+});
+
+// Default Value
+export const defaultPayment = {
+  invoiceId: "",
+  paymentReceivedDate: null,
+  transactionId: "",
+  amount: 0,
+};

src/components/common/ConfirmModal.jsx

@@ -13,19 +13,18 @@ const ConfirmModal = ({
   if (!isOpen) return null;
 
   const TypeofIcon = () => {
-    if (type === "delete") {
+    switch (type) {
-      return (
+      case "delete":
-        <i
+        return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
-          className="bx bx-x-circle text-danger"
+      case "success":
-          style={{ fontSize: "60px" }}
+        return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
-        ></i>
+      case "warning":
-      );
+        return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
-    }
+      default:
         return null;
+    }
   };
 
-  const modalSize = type === "delete" ? "sm" : "md";
-
   return (
     <div
       className="modal fade show"
@@ -33,22 +32,24 @@ const ConfirmModal = ({
       role="dialog"
       aria-modal="true"
     >
-      <div className={`modal-dialog modal-${modalSize} modal-dialog-top`}>
+      <div className="modal-dialog modal-sm modal-dialog-top">
         <div className="modal-content">
           <div className="modal-body py-1 px-2">
             <div className="d-flex justify-content-between mb-4 pt-2">
               {header && <strong className="mb-0">{header}</strong>}
               <button
                 type="button"
-                className="btn-close "
+                className="btn-close"
                 aria-label="Close"
                 onClick={onClose}
               />
             </div>
 
             <div className="row">
-              <div className="col-4 col-sm-2">{TypeofIcon()}</div>
+              <div className="col-4 col-sm-3 d-flex justify-content-center align-items-start">
-              <div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
+                {TypeofIcon()}
+              </div>
+              <div className="col-8 col-sm-9 py-sm-2 py-1 text-sm-start">
                 <span className="fs-6">{message}</span>
                 <div className="d-flex justify-content-end mt-4">
                   <button
@@ -59,7 +60,7 @@ const ConfirmModal = ({
                     {loading ? "Please Wait..." : "Yes"}
                   </button>
                   <button
-                    className="btn btn-secondary ms-4 btn-sm"
+                    className="btn btn-secondary ms-3 btn-sm"
                     onClick={onClose}
                     disabled={loading}
                   >
@@ -68,6 +69,7 @@ const ConfirmModal = ({
                 </div>
               </div>
             </div>
+
           </div>
         </div>
       </div>

src/components/common/DateRangePicker.jsx

@@ -88,7 +88,6 @@ export default DateRangePicker;
 
 
 
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -98,6 +97,7 @@ export const DateRangePicker1 = ({
   resetSignal,
   defaultRange = true,
   maxDate = null,
+  howManyDay = 6,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -107,12 +107,13 @@ export const DateRangePicker1 = ({
     field: { ref },
   } = useController({ name: startField, control });
 
+  // Apply default range
   const applyDefaultDates = () => {
     const today = new Date();
-    const past = new Date();
+    const past = new Date(today.getTime());
-    past.setDate(today.getDate() - 6);
+    past.setDate(today.getDate() - howManyDay);
 
-    const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+    const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
     const formattedStart = format(past);
     const formattedEnd = format(today);
 
@@ -127,15 +128,19 @@ export const DateRangePicker1 = ({
   useEffect(() => {
     if (!inputRef.current || inputRef.current._flatpickr) return;
 
-    const instance = flatpickr(inputRef.current, {
+    if (defaultRange && !getValues(startField) && !getValues(endField)) {
+      applyDefaultDates();
+    }
+
+    const instance = window.flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
-          const format = (d) => flatpickr.formatDate(d, "d-m-Y");
+          const format = (d) => window.flatpickr.formatDate(d, "d-m-Y");
           setValue(startField, format(start), { shouldValidate: true });
           setValue(endField, format(end), { shouldValidate: true });
         } else {
@@ -148,12 +153,10 @@ export const DateRangePicker1 = ({
 
     const currentStart = getValues(startField);
     const currentEnd = getValues(endField);
-    if (defaultRange && !currentStart && !currentEnd) {
+    if (currentStart && currentEnd) {
-      applyDefaultDates();
-    } else if (currentStart && currentEnd) {
       instance.setDate([
-        flatpickr.parseDate(currentStart, "d-m-Y"),
+        window.flatpickr.parseDate(currentStart, "d-m-Y"),
-        flatpickr.parseDate(currentEnd, "d-m-Y"),
+        window.flatpickr.parseDate(currentEnd, "d-m-Y"),
       ]);
     }
 
@@ -173,8 +176,7 @@ export const DateRangePicker1 = ({
         }
       }
     }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
-
 
   const start = getValues(startField);
   const end = getValues(endField);
@@ -186,7 +188,7 @@ export const DateRangePicker1 = ({
         type="text"
         className="form-control form-control-sm"
         placeholder={placeholder}
-        defaultValue={formattedValue}
+        value={formattedValue}
         ref={(el) => {
           inputRef.current = el;
           ref(el);

src/hooks/useCollections.js

@@ -0,0 +1,78 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CollectionRepository } from "../repositories/ColllectionRepository";
+import showToast from "../services/toastService";
+
+export const useCollections = (
+  pageSize,
+  pageNumber,
+  fromDate,
+  toDate,
+  isPending,
+  isActive,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "collections",
+      pageSize,
+      pageNumber,
+      fromDate,
+      toDate,
+      isPending,
+      isActive,
+      searchString,
+    ],
+
+    queryFn: async () => {
+      const response = await CollectionRepository.getCollections(
+        pageSize,
+        pageNumber,
+        fromDate,
+        toDate,
+        isPending,
+        isActive,
+        searchString
+      );
+      return response.data;
+    },
+
+    keepPreviousData: true,
+    staleTime: 1000 * 60 * 1,
+  });
+};
+
+export const useCreateCollection = (onSuccessCallBack) => {
+  const clinent = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) =>
+      await CollectionRepository.createNewCollection(payload),
+    onSuccess: (_, variables) => {
+      showToast("New Collection created Successfully", "success");
+      clinent.invalidateQueries({ queryKey: ["collections"] });
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};
+
+export const useMarkedPaymentReceived = (onSuccessCallBack) => {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload) =>
+      await CollectionRepository.markPaymentReceived(payload),
+    onSuccess: async () => {
+      client.invalidateQueries({ queryKey: ["collections"] });
+      showToast("Payment Received marked Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message || error.message || "Something Went wrong"
+      );
+    },
+  });
+};

src/pages/collections/CollectionPage.jsx

@@ -1,21 +1,142 @@
-import React from 'react'
+import React, { createContext, useContext, useState } from "react";
-import Breadcrumb from '../../components/common/Breadcrumb'
+import moment from "moment";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import CollectionList from "../../components/collections/CollectionList";
+import { useModal } from "../../hooks/useAuth";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DateRangePicker1 } from "../../components/common/DateRangePicker";
+import { isPending } from "@reduxjs/toolkit";
+import ConfirmModal from "../../components/common/ConfirmModal";
+import showToast from "../../services/toastService";
+import { useMarkedPaymentReceived } from "../../hooks/useCollections";
+import NewCollection from "../../components/collections/NewCollection";
+import GlobalModel from "../../components/common/GlobalModel";
 
+const CollectionContext = createContext();
+export const useCollectionContext = () => {
+  const context = useContext(CollectionContext);
+  if (!context) {
+    window.location = "/dashboard";
+    showToast("Out of Context Happend inside Collection Context", "warning");
+  }
+  return context;
+};
 const CollectionPage = () => {
+  const { onOpen } = useModal("newCollection");
+  const [makeCollection, setCollection] = useState({
+    isOpen: false,
+    invoiceId: null,
+  });
+  const [processedPayment, setProcessedPayment] = useState(null);
+  const [showPending, setShowPending] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const methods = useForm({
+    defaultValues: {
+      fromDate: moment().subtract(180, "days").format("DD-MM-YYYY"),
+      toDate: moment().format("DD-MM-YYYY"),
+    },
+  });
+  const { watch } = methods;
+  const [fromDate, toDate] = watch(["fromDate", "toDate"]);
+  const handleToggleActive = (e) => setShowPending(e.target.checked);
+
+  const contextMassager = {
+    setProcessedPayment,
+  };
+  const { mutate: MarkedReceived, isPending } = useMarkedPaymentReceived(() => {
+    setProcessedPayment(null);
+  });
+  const handleMarkedPayment = () => {};
   return (
-    <div className='container-fluid'>
+    <CollectionContext.Provider value={contextMassager}>
+      <div className="container-fluid">
         <Breadcrumb
           data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
         />
-      <div className='card px-2 py-1'>
-         <div className='row'>
-            <div className='col-12'>
 
+        <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>
-    </div>
-  )
-}
 
-export default CollectionPage
+            <div className="col-12 col-md-6  d-flex justify-content-end gap-4">
+              <div className="">
+                {" "}
+                <input
+                  type="search"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  placeholder="search Collection"
+                  className="form-control form-control-sm"
+                />
+              </div>
+              <button
+                className="btn btn-sm btn-primary"
+                type="button"
+                onClick={()=>setCollection({isOpen:true,invoiceId:null})}
+              >
+                <i className="bx bx-plus-circle me-2"></i>
+                <span className="d-none d-md-inline-block">
+                  Add New Collection
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <CollectionList
+          fromDate={fromDate}
+          toDate={toDate}
+          isPending={showPending}
+          searchString={searchText}
+        />
+
+        {makeCollection.isOpen && (
+          <GlobalModel
+            isOpen={makeCollection.isOpen} size="lg"
+            closeModal={() => setCollection({ isOpen: false, invoiceId: null })}
+          >
+            <NewCollection
+              collectionId={null}
+              onClose={()=>setCollection({ isOpen: false, invoiceId: null })}
+            />
+          </GlobalModel>
+        )}
+
+        <ConfirmModal
+          type="success"
+          header="Payment Successful Received"
+          message="Your payment has been processed successfully. Do you want to continue?"
+          isOpen={processedPayment?.isOpen}
+          loading={isPending}
+          onSubmit={handleMarkedPayment}
+          onClose={() => setProcessedPayment(null)}
+        />
+      </div>
+    </CollectionContext.Provider>
+  );
+};
+
+export default CollectionPage;

src/repositories/ColllectionRepository.jsx

@@ -0,0 +1,24 @@
+import { api } from "../utils/axiosClient";
+import { DirectoryRepository } from "./DirectoryRepository";
+
+export const CollectionRepository = {
+  createNewCollection: (data) =>
+    api.post(`/api/Collection/invoice/create`, data),
+  getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive, searchString) => {
+    let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
+
+    const params = [];
+    if (fromDate) params.push(`fromDate=${fromDate}`);
+    if (toDate) params.push(`toDate=${toDate}`);
+
+    if (params.length > 0) {
+      url += `&${params.join("&")}`;
+    }
+   return api.get(url);
+  },
+
+   makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`),
+   markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`)
+
+};
+