marco.pms.web/src/pages/collections/CollectionPage.jsx

import React, { createContext, useContext, useState } from "react";
import moment from "moment";
import Breadcrumb from "../../components/common/Breadcrumb";
import CollectionList from "../../components/collections/CollectionList";
import { useModal } from "../../hooks/useAuth";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { DateRangePicker1 } from "../../components/common/DateRangePicker";
import { isPending } from "@reduxjs/toolkit";
import ConfirmModal from "../../components/common/ConfirmModal";
import showToast from "../../services/toastService";
import { useMarkedPaymentReceived } from "../../hooks/useCollections";
import 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 (
    <CollectionContext.Provider value={contextMassager}>
      <div className="container-fluid">
        <Breadcrumb
          data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
        />

        <div className="card my-3 py-2 px-sm-4 px-0">
          <div className="row px-3">
            <div className="col-12 col-md-3 mb-1">
              <FormProvider {...methods}>
                <DateRangePicker1 howManyDay={180} />
              </FormProvider>
            </div>
            <div className="col-12 col-md-3 d-flex align-items-center gap-2 ">
              <div className="form-check form-switch text-start align-items-center">
                <input
                  type="checkbox"
                  className="form-check-input"
                  role="switch"
                  id="inactiveEmployeesCheckbox"
                  checked={showPending}
                  onChange={(e) => setShowPending(e.target.checked)}
                />
                <label
                  className="form-check-label ms-0"
                  htmlFor="inactiveEmployeesCheckbox"
                >
                  Show Pending
                </label>
              </div>
            </div>

            <div className="col-12 col-md-6  d-flex justify-content-end gap-4">
              <div className="">
                {" "}
                <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;