successfuuly fetch data and create collection

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

@@ -4,6 +4,7 @@ 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);
@@ -18,6 +19,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
     true,
     searchDebounce
   );
+  const {setProcessedPayment} = useCollectionContext()
 
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
@@ -99,7 +101,10 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
           className="text-truncate d-inline-block"
           style={{ maxWidth: "200px" }}
         >
-          {formatFigure(col?.basicAmount, { type: "currency", currency: "INR" }) ?? 0}
+          {formatFigure(col?.basicAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
         </span>
       ),
       align: "text-end",
@@ -112,7 +117,10 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
           className="text-truncate d-inline-block py-3"
           style={{ maxWidth: "200px" }}
         >
-          {formatFigure(col?.balanceAmount, { type: "currency", currency: "INR" }) ?? 0}
+          {formatFigure(col?.balanceAmount, {
+            type: "currency",
+            currency: "INR",
+          }) ?? 0}
         </span>
       ),
       align: "text-end",
@@ -155,10 +163,48 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
                       className="sticky-action-column text-center"
                       style={{ padding: "12px 8px" }}
                     >
-                      <div className="d-flex justify-content-center gap-2">
+                      <div className="dropdown z-2">
-                        <i className="bx bx-show text-primary cursor-pointer"></i>
+                        <button
-                        <i className="bx bx-edit text-secondary cursor-pointer"></i>
+                          type="button"
-                        <i className="bx bx-trash text-danger cursor-pointer"></i>
+                          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>

src/components/collections/NewCollection.jsx

@@ -11,10 +11,9 @@ import DatePicker from "../common/DatePicker";
 import { useCreateCollection } from "../../hooks/useCollections";
 import { formatFileSize, localToUtc } from "../../utils/appUtils";
 
-const NewCollection = ({ collectionId }) => {
+const NewCollection = ({ collectionId, onClose }) => {
-  const { onClose, onOpen, isOpen } = useModal("newCollection");
+
   const { projectNames, projectLoading } = useProjectName();
-  console.log(projectNames);
   const methods = useForm({
     resolver: zodResolver(newCollection),
     defaultValues: defaultCollection,
@@ -108,12 +107,13 @@ const NewCollection = ({ collectionId }) => {
     onClose();
   };
 
-  const bodyContent = (
+  return (
-    <div className="row">
+    <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-4 px-0">
+          <div className="row px-md-1 px-0">
             <div className="col-12 col-md-6 mb-2">
               <Label required>Title</Label>
               <input
@@ -382,10 +382,11 @@ const NewCollection = ({ collectionId }) => {
         </form>
       </FormProvider>
     </div>
+    
   );
-  return (
+ 
-    <Modal size="lg" isOpen={isOpen} onClose={onClose} body={bodyContent} />
+    
-  );
+ 
 };
 
 export default NewCollection;

src/components/collections/collectionSchema.jsx

@@ -15,8 +15,15 @@ export const newCollection = z.object({
   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"}),
+  invoiceNumber: z
-  eInvoiceNumber: z.string().trim().min(1, { message: "E-Invoice No is required" }),
+    .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",
@@ -25,7 +32,7 @@ export const newCollection = z.object({
     .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
       message: "Amount must have at most 2 decimal places",
     }),
-    basicAmount: z.coerce
+  basicAmount: z.coerce
     .number({
       invalid_type_error: "Amount is required and must be a number",
     })
@@ -61,7 +68,22 @@ export const defaultCollection = {
   invoiceDate: null,
   exceptedPaymentDate: null,
   taxAmount: "",
-  basicAmount:"",
+  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;
     }
-    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"),
       ]);
     }
 
@@ -161,20 +164,19 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
+    if (resetSignal !== undefined) {
-    if (defaultRange) {
+      if (defaultRange) {
-      applyDefaultDates();
+        applyDefaultDates();
-    } else {
+      } else {
-      setValue(startField, "", { shouldValidate: true });
+        setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
+        setValue(endField, "", { shouldValidate: true });
 
-      if (inputRef.current?._flatpickr) {
+        if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
+          inputRef.current._flatpickr.clear();
+        }
       }
     }
-  }
+  }, [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

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CollectionRepository } from "../repositories/ColllectionRepository";
 import showToast from "../services/toastService";
 
@@ -42,16 +42,36 @@ export const useCollections = (
 };
 
 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.message || error.response.data.message || "Something Went wrong"
+        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,4 +1,4 @@
-import React, { useState } from "react";
+import React, { createContext, useContext, useState } from "react";
 import moment from "moment";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import CollectionList from "../../components/collections/CollectionList";
@@ -7,84 +7,135 @@ 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(6, "days").format("DD-MM-YYYY"),
+      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}>
-      <Breadcrumb
+      <div className="container-fluid">
-        data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
+        <Breadcrumb
-      />
+          data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
+        />
 
-      <div className="card my-3 py-2 px-sm-4 px-0">
+        <div className="card my-3 py-2 px-sm-4 px-0">
-        <div className="row">
+          <div className="row px-3">
-          <div className="col-3">
+            <div className="col-12 col-md-3 mb-1">
-            <FormProvider {...methods}>
+              <FormProvider {...methods}>
-              <DateRangePicker1 />
+                <DateRangePicker1 howManyDay={180} />
-            </FormProvider>
+              </FormProvider>
-          </div>
+            </div>
-          <div className="col-3 d-flex align-items-center gap-2 ">
+            <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">
+              <div className="form-check form-switch text-start align-items-center">
-              <input
+                <input
-                type="checkbox"
+                  type="checkbox"
-                className="form-check-input"
+                  className="form-check-input"
-                role="switch"
+                  role="switch"
-                id="inactiveEmployeesCheckbox"
+                  id="inactiveEmployeesCheckbox"
-                checked={showPending}
+                  checked={showPending}
-                onChange={(e) => setShowPending(e.target.checked)}
+                  onChange={(e) => setShowPending(e.target.checked)}
-              />
+                />
-              <label
+                <label
-                className="form-check-label ms-0"
+                  className="form-check-label ms-0"
-                htmlFor="inactiveEmployeesCheckbox"
+                  htmlFor="inactiveEmployeesCheckbox"
+                >
+                  Show Pending
+                </label>
+              </div>
+            </div>
+
+            <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})}
               >
-                Show Pending
+                <i className="bx bx-plus-circle me-2"></i>
-              </label>
+                <span className="d-none d-md-inline-block">
+                  Add New Collection
+                </span>
+              </button>
             </div>
           </div>
-
-          <div className="col-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={onOpen}
-            >
-              <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
+        <CollectionList
-        fromDate={fromDate}
+          fromDate={fromDate}
-        toDate={toDate}
+          toDate={toDate}
-        isPending={showPending}
+          isPending={showPending}
-        searchString={searchText}
+          searchString={searchText}
-      />
+        />
-    </div>
+
+        {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>
   );
 };
 

src/repositories/ColllectionRepository.jsx

@@ -16,5 +16,9 @@ export const CollectionRepository = {
     }
    return api.get(url);
   },
+
+   makeReceivePayment:(data)=> api.post(`/api/Collection/invoice/payment/received`),
+   markPaymentReceived:(invoiceId)=>api.put(`/api/Collection/invoice/marked/completed/${invoiceId}`)
+
 };