Fix minimum length message for comment validation in reversal popups

src/Components/Popups/ConfirmReversalPopups.jsx

@@ -0,0 +1,194 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useBoolean,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ReactQuill from "react-quill";
+
+export const conformModalSchema = yup.object().shape({
+  comment: yup
+    .string()
+    .min(2, "Minimum length should be 2 characters.")
+    .max(150, "Maximum length should be 150 characters.")
+    .required("Comment is required"),
+  subject: yup.string().notRequired(),
+  emailTemplate: yup.string().notRequired(),
+});
+
+const ConfirmReversalPopups = ({
+  isOpen,
+  onClose,
+  handleConfirm,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+  const [richTextValue, setRichTextValue] = useState("");
+
+  useEffect(() => {
+    setValue("emailTemplate", richTextValue);
+  }, [richTextValue]);
+
+  const [emailApproval, setEmailApproval] = useBoolean(false);
+
+  const modules = {
+    toolbar: [
+      //   [{ header: "1" }, { header: "2" },
+      //   // { font: [] }
+      // ],
+      // [{ size: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["clean"],
+    ],
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve</ModalHeader>
+        <ModalCloseButton />
+        <Box
+          as="form"
+          onSubmit={handleSubmit((data) => {
+            handleConfirm(data);
+            reset();
+            onClose();
+          })}
+        >
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comment"
+                {...register("comment")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comment...."}
+                rounded={"md"}
+                resize={"none"}
+                mb={2}
+              />
+              {errors.comment ? (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              ) : (
+                <Text fontSize="xs" color="gray.500">
+                  Maximum length should be 150 characters. You have entered{" "}
+                  {watch()?.comment?.length || 0} characters.
+                </Text>
+              )}
+            </FormControl>
+            <Checkbox
+              colorScheme="forestGreen"
+              onChange={setEmailApproval.toggle}
+              defaultChecked={emailApproval}
+            >
+              <Text mb={0} fontSize={"sm"}>
+                Send an email to the user upon approval
+              </Text>
+            </Checkbox>
+            {emailApproval && (
+              <Box className="messageBox">
+                <FormControl mb={4}>
+                  <FormLabel fontSize="sm" mb={1}>
+                    Subject
+                  </FormLabel>
+                  <Input
+                    focusBorderColor="green.400"
+                    name="fileName"
+                    {...register("subject")}
+                    fontSize="sm"
+                    type="text"
+                    size="sm"
+                  />
+                </FormControl>
+                <FormControl mb={12}>
+                  <FormLabel fontSize="sm" mb={1}>
+                    Message
+                  </FormLabel>
+                  <ReactQuill
+                    theme="snow"
+                    style={{
+                      height: 150,
+                    }}
+                    value={richTextValue}
+                    onChange={setRichTextValue}
+                    modules={modules}
+                    placeholder="Start typing here..."
+                  />
+                </FormControl>
+              </Box>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              type="submit"
+              fontWeight={400}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+ConfirmReversalPopups.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  handelApproved: PropTypes.func.isRequired,
+  isLoading: PropTypes.func.isRequired,
+  richTextValue: PropTypes.any.isRequired,
+  setRichTextValue: PropTypes.any.isRequired,
+};
+
+export default ConfirmReversalPopups;

src/Components/Popups/InitiateReversalPopups.jsx

@@ -0,0 +1,125 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React from "react";
+import PropTypes from "prop-types";
+
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+
+export const conformModalSchema = yup.object().shape({
+  comment: yup
+    .string()
+    .min(2, "Minimum length should be 2 characters.")
+    .max(150, "Maximum length should be 150 characters.")
+    .required("Comment is required"),
+});
+
+const InitiateReversalPopup = ({
+  isOpen,
+  onClose,
+  handelApproved,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reversal Reason</ModalHeader>
+        <ModalCloseButton />
+        <Box
+          as="form"
+          onSubmit={handleSubmit((data) => {
+            handelApproved(data);
+            reset();
+            onClose();
+          })}
+        >
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="fileName"
+                {...register("comment")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comment...."}
+                rounded={"md"}
+                resize={"none"}
+                mb={2}
+              />
+
+              {errors.comment ? (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              ) : (
+                <Text fontSize="xs" color="gray.500">
+                  Maximum length should be 150 characters. You have entered{" "}
+                  {watch()?.comment?.length || 0} characters.
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              type={"submit"}
+              isDisabled={isLoading}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+InitiateReversalPopup.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  handelApproved: PropTypes.func.isRequired,
+};
+
+export default InitiateReversalPopup;

src/Components/Popups/RejectReversalPopups.jsx

@@ -0,0 +1,124 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React from "react";
+import PropTypes from "prop-types";
+
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+
+export const conformModalSchema = yup.object().shape({
+  comment: yup
+    .string()
+    .min(2, "Minimum length should be 2 characters.")
+    .max(150, "Maximum length should be 150 characters.")
+    .required("Comment is required"),
+});
+
+const RejectReversalPopups = ({
+  isOpen,
+  onClose,
+  handelApproved,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        <Box
+          as="form"
+          onSubmit={handleSubmit((data) => {
+            handelApproved(data);
+            reset();
+            onClose();
+          })}
+        >
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comment"
+                {...register("comment")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comment...."}
+                rounded={"md"}
+                resize={"none"}
+                mb={2}
+              />
+              {errors.comment ? (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              ) : (
+                <Text fontSize="xs" color="gray.500">
+                  Maximum length should be 150 characters. You have entered{" "}
+                  {watch()?.comment?.length || 0} characters.
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              type="submit"
+              fontWeight={400}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+RejectReversalPopups.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  handelApproved: PropTypes.func.isRequired,
+  isLoading: PropTypes.func.isRequired,
+};
+
+export default RejectReversalPopups;

src/Layout/DefaultLayout.jsx

@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
 import { CgProfile } from "react-icons/cg";
-import { useDispatch } from "react-redux";
 import logoMiniDark from "../assets/favicon.png";
 import logoMini from "../assets/logo-min.png";
 import logoDark from "../assets/logo.png";
@@ -24,14 +23,16 @@ import {
   Button,
   Image,
   Text,
-  Tooltip
+  Tooltip,
 } from "@chakra-ui/react";
 import Cookies from "js-cookie"; // Import the Cookies library
 import { GrManual } from "react-icons/gr";
 import { HiOutlineChartSquareBar } from "react-icons/hi";
+import { HiOutlineBanknotes } from "react-icons/hi2";
 import { LuContact } from "react-icons/lu";
 import { MdNotificationsNone, MdOutlineAddChart } from "react-icons/md";
 import {
+  RiAccountBoxLine,
   RiBankLine,
   RiExchangeBoxLine,
   RiFileUserLine,
@@ -41,7 +42,7 @@ import {
   TbLayoutDashboard,
   TbListDetails,
   TbReportMoney,
-  TbTransactionDollar
+  TbTransactionDollar,
 } from "react-icons/tb";
 import { VscSymbolClass } from "react-icons/vsc";
 import {
@@ -53,6 +54,7 @@ import {
   useNavigate,
 } from "react-router-dom";
 import HeaderMain from "../Components/HeaderMain";
+import { isMaker } from "../Constants/Constants";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import CreateRequest from "../Pages/Fawateer/CreateRequest";
 import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
@@ -141,19 +143,20 @@ const DashboardLayout = ({ isOnline }) => {
       case "/":
         return "👋🏻 Hi, Admin";
 
-        case path.startsWith("/"):
-          return (
-            <span className="d-flex align-items-end gap-2">
-              <TbLayoutDashboard className="h4 m-0" />Dashboard
-            </span>
-          );
+      // case path.startsWith("/"):
+      //   return (z
+      //     <span className="d-flex align-items-end gap-2">
+      //       <TbLayoutDashboard className="h4 m-0" />Dashboard
+      //     </span>
+      //   );
 
       case path.startsWith("/investment-opportunities"):
-      return (
-        <span className="d-flex align-items-end gap-2">
-          <TbLayoutDashboard className="h4 m-0" />dashboard / Open Opportunities
-        </span>
-      );
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <TbLayoutDashboard className="h4 m-0" />
+            dashboard / Open Opportunities
+          </span>
+        );
       case path.startsWith("/sponser"):
         return (
           <span className="d-flex align-items-end gap-2">
@@ -294,6 +297,29 @@ const DashboardLayout = ({ isOnline }) => {
             Deletion request
           </span>
         );
+
+      case path.startsWith("/bank-deposit-request"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiBankLine className="h4 m-0 fw-normal" />
+            Bank Deposit Request
+          </span>
+        );
+      case path.startsWith("/reversal-fawateer-deposit"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <HiOutlineBanknotes className="h4 m-0 fw-normal" />
+            Fawateer Deposit
+          </span>
+        );
+      case path.startsWith("/account-deletion-request"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiAccountBoxLine className="h4 m-0 fw-normal" />
+            Account Deletion Request
+          </span>
+        );
+
       case path.startsWith("/bank-investor"):
         return (
           <span className="d-flex align-items-end gap-2">
@@ -312,7 +338,7 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <MdNotificationsNone className="h4 m-0 fw-normal" />
-            Push Notification 
+            Push Notification
           </span>
         );
       case path.startsWith("/contact"):
@@ -364,7 +390,7 @@ const DashboardLayout = ({ isOnline }) => {
             Deletion request
           </span>
         );
-        case path.startsWith("/subadmin"):
+      case path.startsWith("/subadmin"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
@@ -400,7 +426,17 @@ const DashboardLayout = ({ isOnline }) => {
     return <SplashScreen />;
   }
 
-  const filteredNav = nav.map((item) => {
+  const _filteredNav = isMaker()
+    ? nav.filter(
+        (item) =>
+          item.title !== "REVERSAL TRANSACTION" &&
+          item.path !== "/bank-deposit-request" &&
+          item.path !== "/reversal-fawateer-deposit" &&
+          item.path !== "/account-deletion-request"
+      )
+    : nav;
+
+  const filteredNav = _filteredNav.map((item) => {
     if (item.submenu) {
       return {
         ...item,
@@ -410,6 +446,9 @@ const DashboardLayout = ({ isOnline }) => {
         ),
       };
     }
+    // if (item.title === "REVERSAL TRANSACTION" && item.type === "title") {
+    // }
+
     return item;
   });
 
@@ -530,12 +569,170 @@ const DashboardLayout = ({ isOnline }) => {
               index={openIndex}
               onChange={handleAccordionChange}
             >
-              {filteredNav.map(({ title, type, Icon, submenu, path }, index) => {
-                if (type === "accordion") {
-                  return (
-                    <AccordionItem key={index} border={"none"}>
+              {filteredNav.map(
+                ({ title, type, Icon, submenu, path }, index) => {
+                  if (type === "accordion") {
+                    return (
+                      <AccordionItem key={index} border={"none"}>
+                        <Tooltip
+                          isDisabled={isDrawerOpen || openDrawerClick}
+                          hasArrow
+                          bg={"#fff"}
+                          fontSize={"xs"}
+                          label={title}
+                          placement="top-start"
+                          color={"blue.800"}
+                        >
+                          <AccordionButton
+                            style={{ height: "auto" }}
+                            className={`${
+                              isDrawerOpen || openDrawerClick
+                                ? "p-2 web-text-medium ps-3 justify-content-between"
+                                : "p-2 ps-1 web-text-xlarge justify-content-center"
+                            } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
+                          >
+                            <Box
+                              as="span"
+                              display={"flex"}
+                              gap={2}
+                              alignItems={"center"}
+                            >
+                              {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
+                              {Icon && (
+                                <Icon
+                                  fontSize={title === "Admin" ? "18px" : "15px"}
+                                />
+                              )}
+
+                              <Text
+                                as={"span"}
+                                display={
+                                  isDrawerOpen || openDrawerClick
+                                    ? "flex"
+                                    : "none"
+                                }
+                                alignItems="center"
+                                overflow="hidden"
+                                textAlign={"left"}
+                              >
+                                {title}
+                              </Text>
+                            </Box>
+                            <AccordionIcon />
+                          </AccordionButton>
+                        </Tooltip>
+                        <AccordionPanel
+                          p={0}
+                          pb={1}
+                          display={"flex"}
+                          flexDirection={"column"}
+                          gap={1}
+                        >
+                          {submenu?.map(
+                            (
+                              {
+                                title: subMenuTitle,
+                                path: link,
+                                icon: SubIcon,
+                              },
+                              i
+                            ) => (
+                              <Tooltip
+                                isDisabled={isDrawerOpen || openDrawerClick}
+                                hasArrow
+                                bg={"#fff"}
+                                fontSize={"xs"}
+                                label={subMenuTitle}
+                                placement="right"
+                                color={"blue.800"}
+                              >
+                                <Box
+                                  key={i}
+                                  style={{
+                                    height: "auto",
+                                    position: "relative",
+                                  }}
+                                  className={`${
+                                    isDrawerOpen || openDrawerClick
+                                      ? " web-text-medium ps-4"
+                                      : " web-text-xlarge  justify-content-center"
+                                  }  d-flex align-items-center  p-0`}
+                                >
+                                  <Box
+                                    backgroundColor={"gray.300"}
+                                    style={{
+                                      position: "absolute",
+                                      top: 0,
+                                      width: 2,
+                                      left: 22,
+                                      height:
+                                        i === submenu?.length - 1
+                                          ? "55%"
+                                          : "120%",
+                                      borderRadius: "0 0 10px 10px",
+                                    }}
+                                  />
+                                  <Box
+                                    backgroundColor={"gray.300"}
+                                    style={{
+                                      position: "absolute",
+                                      width: 10,
+                                      left: 22,
+                                      height: 2,
+                                    }}
+                                  />
+
+                                  <NavLink
+                                    className={`${
+                                      isDrawerOpen || openDrawerClick
+                                        ? "p-2 ps-1 ms-2 web-text-medium "
+                                        : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
+                                    } rounded-1 link d-flex align-items-center gap-2 w-100 `}
+                                    to={link}
+                                  >
+                                    {SubIcon && (
+                                      <SubIcon
+                                        className="web-text-large ms-2"
+                                        style={{ zIndex: 111 }}
+                                      />
+                                    )}
+                                    <Text
+                                      as={"span"}
+                                      display={
+                                        isDrawerOpen || openDrawerClick
+                                          ? "flex"
+                                          : "none"
+                                      }
+                                      alignItems="center"
+                                      overflow="hidden"
+                                    >
+                                      {subMenuTitle === "Aprover Request"
+                                        ? data?.data?.role === "Maker"
+                                          ? "Create Request"
+                                          : "Aprover Request"
+                                        : subMenuTitle}
+                                    </Text>
+                                  </NavLink>
+                                </Box>
+                              </Tooltip>
+                            )
+                          )}
+                        </AccordionPanel>
+                      </AccordionItem>
+                    );
+                  } else if (type === "title") {
+                    return (
+                      <Text
+                        as={"span"}
+                        key={index}
+                        className="web-text-xxsmall fw-600  text-secondary fw-bold"
+                      >
+                        {title}
+                      </Text>
+                    );
+                  } else if (type === "single") {
+                    return (
                       <Tooltip
-                        isDisabled={isDrawerOpen || openDrawerClick}
                         hasArrow
                         bg={"#fff"}
                         fontSize={"xs"}
@@ -543,184 +740,35 @@ const DashboardLayout = ({ isOnline }) => {
                         placement="top-start"
                         color={"blue.800"}
                       >
-                        <AccordionButton
-                          style={{ height: "auto" }}
+                        <NavLink
+                          key={index}
+                          style={{ height: "auto", position: "relative" }}
                           className={`${
                             isDrawerOpen || openDrawerClick
-                              ? "p-2 web-text-medium ps-3 justify-content-between"
-                              : "p-2 ps-1 web-text-xlarge justify-content-center"
-                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
+                              ? "p-2 web-text-medium"
+                              : "p-2 ps-0 web-text-xlarge justify-content-start"
+                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
+                          to={path}
                         >
-                          <Box
-                            as="span"
-                            display={"flex"}
-                            gap={2}
-                            alignItems={"center"}
+                          {Icon && <Icon className="web-text-large ms-2" />}
+                          <Text
+                            as={"span"}
+                            display={
+                              isDrawerOpen || openDrawerClick ? "flex" : "none"
+                            }
+                            alignItems="center"
+                            overflow="hidden"
                           >
-                            {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
-                            {Icon && (
-                              <Icon
-                                fontSize={title === "Admin" ? "18px" : "15px"}
-                              />
-                            )}
-
-                            <Text
-                              as={"span"}
-                              display={
-                                isDrawerOpen || openDrawerClick
-                                  ? "flex"
-                                  : "none"
-                              }
-                              alignItems="center"
-                              overflow="hidden"
-                              textAlign={"left"}
-                            >
-                              {title}
-                            </Text>
-                          </Box>
-                          <AccordionIcon />
-                        </AccordionButton>
+                            {title}
+                          </Text>
+                        </NavLink>
                       </Tooltip>
-                      <AccordionPanel
-                        p={0}
-                        pb={1}
-                        display={"flex"}
-                        flexDirection={"column"}
-                        gap={1}
-                      >
-                        {submenu?.map(
-                          (
-                            { title: subMenuTitle, path: link, icon: SubIcon },
-                            i
-                          ) => (
-                            <Tooltip
-                              isDisabled={isDrawerOpen || openDrawerClick}
-                              hasArrow
-                              bg={"#fff"}
-                              fontSize={"xs"}
-                              label={subMenuTitle}
-                              placement="right"
-                              color={"blue.800"}
-                            >
-                              <Box
-                                key={i}
-                                style={{ height: "auto", position: "relative" }}
-                                className={`${
-                                  isDrawerOpen || openDrawerClick
-                                    ? " web-text-medium ps-4"
-                                    : " web-text-xlarge  justify-content-center"
-                                }  d-flex align-items-center  p-0`}
-                              >
-                                <Box
-                                  backgroundColor={"gray.300"}
-                                  style={{
-                                    position: "absolute",
-                                    top: 0,
-                                    width: 2,
-                                    left: 22,
-                                    height:
-                                      i === submenu?.length - 1
-                                        ? "55%"
-                                        : "120%",
-                                    borderRadius: "0 0 10px 10px",
-                                  }}
-                                />
-                                <Box
-                                  backgroundColor={"gray.300"}
-                                  style={{
-                                    position: "absolute",
-                                    width: 10,
-                                    left: 22,
-                                    height: 2,
-                                  }}
-                                />
-
-                                <NavLink
-                                  className={`${
-                                    isDrawerOpen || openDrawerClick
-                                      ? "p-2 ps-1 ms-2 web-text-medium "
-                                      : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
-                                  } rounded-1 link d-flex align-items-center gap-2 w-100 `}
-                                  to={link}
-                                >
-                                  {SubIcon && (
-                                    <SubIcon
-                                      className="web-text-large ms-2"
-                                      style={{ zIndex: 111 }}
-                                    />
-                                  )}
-                                  <Text
-                                    as={"span"}
-                                    display={
-                                      isDrawerOpen || openDrawerClick
-                                        ? "flex"
-                                        : "none"
-                                    }
-                                    alignItems="center"
-                                    overflow="hidden"
-                                  >
-                                    {subMenuTitle === "Aprover Request"
-                                      ? data?.data?.role === "Maker"
-                                        ? "Create Request"
-                                        : "Aprover Request"
-                                      : subMenuTitle}
-                                  </Text>
-                                </NavLink>
-                              </Box>
-                            </Tooltip>
-                          )
-                        )}
-                      </AccordionPanel>
-                    </AccordionItem>
-                  );
-                } else if (type === "title") {
-                  return (
-                    <Text
-                      as={"span"}
-                      key={index}
-                      className="web-text-xxsmall fw-600  text-secondary fw-bold"
-                    >
-                      {title}
-                    </Text>
-                  );
-                } else if (type === "single") {
-                  return (
-                    <Tooltip
-                      hasArrow
-                      bg={"#fff"}
-                      fontSize={"xs"}
-                      label={title}
-                      placement="top-start"
-                      color={"blue.800"}
-                    >
-                      <NavLink
-                        key={index}
-                        style={{ height: "auto", position: "relative" }}
-                        className={`${
-                          isDrawerOpen || openDrawerClick
-                            ? "p-2 web-text-medium"
-                            : "p-2 ps-0 web-text-xlarge justify-content-start"
-                        } rounded-1 link d-flex align-items-center gap-2 w-100`}
-                        to={path}
-                      >
-                        {Icon && <Icon className="web-text-large ms-2" />}
-                        <Text
-                          as={"span"}
-                          display={
-                            isDrawerOpen || openDrawerClick ? "flex" : "none"
-                          }
-                          alignItems="center"
-                          overflow="hidden"
-                        >
-                          {title}
-                        </Text>
-                      </NavLink>
-                    </Tooltip>
-                  );
-                } else {
-                  return null;
+                    );
+                  } else {
+                    return null;
+                  }
                 }
-              })}
+              )}
             </Accordion>
           </Box>
 

src/Pages/AccountDeletion/DeletionHistory.jsx

@@ -7,6 +7,8 @@ import {
   Input,
   Text,
   Tooltip,
+  useBoolean,
+  useDisclosure,
   useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -19,25 +21,37 @@ import { formatDate } from "../../Components/Functions/UTCConvertor";
 import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
 import { useGetDeleteHistoryQuery } from "../../Services/delete.request.service";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import InitiateReversalPopup from "../../Components/Popups/InitiateReversalPopups";
+import ToastBox from "../../Components/ToastBox";
+import { useCreateAccountDeletionReversalRequestMutation } from "../../Services/reversal.account.deletion.service";
+import { isMaker } from "../../Constants/Constants";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";
 
 const DeletionHistory = () => {
   const toast = useToast();
-  const { slideFromRight, setDeleteHistory } =
-    useContext(GlobalStateContext);
+  const { slideFromRight, setDeleteHistory } = useContext(GlobalStateContext);
   const [deleteAlert, setDeleteAlert] = useState(false);
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
-
-
-  // =========================== [Use State] ============================= 
+  // =========================== [Use State] =============================
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   const [searchTerm, setSearchTerm] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
 
+  const [reversalId, setReversalId] = useState();
+  const {
+    isOpen: isOpenInRev,
+    onOpen: onOpenInRev,
+    onClose: onCloseInRev,
+  } = useDisclosure();
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
+
+  const [createAccountDeletionReversalRequest] =
+    useCreateAccountDeletionReversalRequestMutation();
+
   // Debounce the search term to avoid making a request on every keystroke
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -48,33 +62,33 @@ const DeletionHistory = () => {
     };
   }, [searchTerm]);
 
-
   const {
     data: deleteHistory,
     isLoading,
-    refetch
-  } = useGetDeleteHistoryQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  })
+    refetch,
+  } = useGetDeleteHistoryQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
 
   const formatDate = (date) => {
-    return new Date(date).toLocaleDateString('en-GB', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
     });
   };
 
- // Use useEffect to refetch data when the component mounts
- useEffect(() => {
-  refetch();
-}, [refetch]);
-
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
 
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
@@ -85,7 +99,8 @@ const DeletionHistory = () => {
     "Last Name",
     "Country",
     "Phone Number",
-    "Status"
+    "Status",
+    isMaker() && "Reversal Action",
   ];
 
   const extractedArray = deleteHistory?.data?.rows?.map((item, index) => ({
@@ -96,7 +111,7 @@ const DeletionHistory = () => {
         as={"span"}
         color={"gray.800"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {index + 1}.
       </Text>
@@ -107,7 +122,7 @@ const DeletionHistory = () => {
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {formatDate(item.Requested_on)}
       </Text>
@@ -118,7 +133,7 @@ const DeletionHistory = () => {
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center  web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {item.clientId}
       </Text>
@@ -129,7 +144,7 @@ const DeletionHistory = () => {
         as={"span"}
         color={"gray.800"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {item.firstName}
         {/* {formatDate(item.charge)} */}
@@ -141,51 +156,77 @@ const DeletionHistory = () => {
         as={"span"}
         color={"gray.800"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {item.lastName}
       </Text>
     ),
-    "Country": (
-      <Text 
+    Country: (
+      <Text
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {item.country}
       </Text>
     ),
     "Phone Number": (
-      <Text 
+      <Text
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center web-text-small"
-        fontWeight={'500'}
+        fontWeight={"500"}
       >
         {item.phoneNumber}
       </Text>
     ),
-    "Status": (
-      <Text 
+    Status: (
+      <Text
         justifyContent={slideFromRight ? "right" : "center"}
         as={"span"}
-        color={item?.deletionStatus? "red.500": "blue.500"}
+        color={item?.deletionStatus === "Approved" ? "red.500" : "blue.500"}
         className="d-flex align-items-center web-text-small"
-
-        fontWeight={'600'}
+        fontWeight={"600"}
       >
         {item.deletionStatus}
       </Text>
     ),
+    "Reversal Action": (
+      <Box w={"120px"} isTruncated={true} cursor={"pointer"}>
+        {item.deletionStatus === "Approved" ? (
+          <Text
+            as={"span"}
+            color={!item.isReversal ? "green.500" : "#FFBB00"}
+            fontWeight={700}
+          >
+            {!item.isReversal ? (
+              <Button
+                onClick={() => {
+                  onOpenInRev(); // Call the function
+                  setReversalId(item.id);
+                }}
+                colorScheme="teal"
+                size="xs"
+                variant="outline"
+              >
+                Initiate Reversal
+              </Button>
+            ) : (
+              "Under process"
+            )}
+          </Text>
+        ) : (
+          ""
+        )}
+      </Box>
+    ),
   }));
 
   const handleDelete = () => {
-    const deleteHistory = sponser.filter(
-      (sponsor) => sponsor.id !== actionId
-    );
+    const deleteHistory = sponser.filter((sponsor) => sponsor.id !== actionId);
 
     setTimeout(() => {
       setSponser(deleteHistory);
@@ -195,6 +236,45 @@ const DeletionHistory = () => {
     setIsLoading(true);
   };
 
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } =
+        await createAccountDeletionReversalRequest({
+          id: reversalId,
+          data,
+        });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onCloseInRev();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -244,6 +324,12 @@ const DeletionHistory = () => {
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
+      <InitiateReversalPopup
+        onClose={onCloseInRev}
+        isOpen={isOpenInRev}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
+      />
     </Box>
   );
 };

src/Pages/Admin/Investor/UnbanInvestor/ReasonBanModal.jsx

@@ -34,7 +34,7 @@ import { useUpdateBanMutation, useUpdateUnbanMutation } from "../../../../Servic
     const toast = useToast()
   
     const {
-      register,
+      register, 
       reset,
       handleSubmit,
       formState: { errors },

src/Pages/BankDepositRequest/BankDepositRequest.jsx

@@ -0,0 +1,448 @@
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Switch,
+  Text,
+  Tooltip,
+  useToast,
+  useDisclosure,
+  Link,
+  useBoolean,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import { debounce } from "../Admin/Contact";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { generateSerialNumber } from "../../Constants/Constants";
+import { useGetDepositHistoryQuery } from "../../Services/deposit.request.service";
+import Pagination from "../../Components/Pagination";
+import ConfirmModal from "./ConfirmModal";
+import RejectModal from "./RejectModal";
+import {
+  useApproveBankDepositRequestMutation,
+  useGetBankDepositMasterQuery,
+  useRejectbankDepositRequestMutation,
+} from "../../Services/bankdeposit.request.service";
+import RejectReversalPopups from "../../Components/Popups/RejectReversalPopups";
+import ConfirmReversalPopups from "../../Components/Popups/ConfirmReversalPopups";
+
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}; // Simple date formatter
+
+const BankDepositRequest = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { depositHistory, setDepositHistory, slideFromRight } =
+    useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  const [rejectbankDepositRequest] = useRejectbankDepositRequestMutation();
+
+  const [approveBankDepositRequest] = useApproveBankDepositRequestMutation();
+
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data,
+    error,
+    refetch,
+    isLoading: depositHistoryLoading,
+  } = useGetBankDepositMasterQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr.no",
+    "Request Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setDepositHistory((prevDepositHistory) =>
+      prevDepositHistory.map((depositHistory) =>
+        depositHistory.id === id
+          ? { ...depositHistory, status: !depositHistory.status }
+          : depositHistory
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  const filteredData = data?.data?.rows
+    .filter((item) => {
+      // Filter by name (case insensitive)
+      const name = [item.firstName, item.lastName, item.countryName]
+        .filter(Boolean)
+        .join(" ");
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+
+      // Filter by status (Uncomment and use if needed)
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";
+
+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);
+
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
+
+  // const handleView = (id) => {
+  //   setActionId(id);
+  //   onViewOpen();
+  // };
+
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
+    "Sr.no": (
+      <Text
+        w={"10px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "Request Date": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item?.isReversalDate)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"60px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.countryName}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const IOtype = investmentType.filter(
+      (investmentType) => investmentType.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestmentType(IOtype);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await rejectbankDepositRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  const handleConfirm = async (data) => {
+    
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await approveBankDepositRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      {/* <ConfirmModal isOpen={isConfirmOpen} onClose={onConfirmClose} /> */}
+      <RejectReversalPopups
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
+      />
+      <ConfirmReversalPopups
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        handleConfirm={handleConfirm}
+        isLoading={isReversalLoading}
+      />
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Pagination
+              isLoading={depositHistoryLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Investment type `}
+        tableHeadRow={tableHeadRow}
+        // setData={setExtractedArray}
+        data={extractedArray}
+        isLoading={depositHistoryLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default BankDepositRequest;

src/Pages/BankDepositRequest/ConfirmModal.jsx

@@ -0,0 +1,149 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ReactQuill from "react-quill";
+
+export const conformModalSchema = yup.object().shape({
+  fees: yup.string().required("File name is required"),
+  totalAmount: yup.string().required("File name is required"),
+});
+
+const ConfirmModal = ({ isOpen, onClose, firstField }) => {
+
+  const [emailApproval,setEmailApproval] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const onSubmit = (data) => {
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      status: true,
+      id: uuidv4(),
+      createdAt: new Date().toISOString(),
+      Type: getFileIcon(file.type),
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    onClose();
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };  
+
+  const modules = {
+    toolbar: [
+      //   [{ header: "1" }, { header: "2" },
+      //   // { font: [] }
+      // ],
+      // [{ size: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["clean"],
+    ],
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+          <FormControl mb={4} isRequired>
+            <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea rows={5} 
+               focusBorderColor='green.400'
+                name="fileName"
+                {...register("fileName")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={'md'}
+                resize={'none'}
+              />
+              {errors.comment && (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              )}
+            </FormControl>
+            
+            <Checkbox colorScheme='forestGreen'
+             onChange={(e) =>setEmailApproval(e.target.checked)}
+            >
+              <Text mb={0} fontSize={'sm'}>Send an email to the user upon approval</Text>
+            </Checkbox>
+            {emailApproval && <Box className="messageBox">
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm" mb={1}>Subject</FormLabel>
+                <Input 
+                  focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                />
+              </FormControl>
+              <FormControl mb={12}>
+                <FormLabel fontSize="sm" mb={1}>Message</FormLabel>
+                <ReactQuill
+                  theme="snow"
+                  style={{
+                    height: 150,
+                  }}
+                  // value={value}
+                  // onChange={setValue}
+                  modules={modules}
+                  placeholder="Start typing here..."
+                />
+              </FormControl>
+            </Box>}
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+              Cancel
+            </Button>
+            <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
+              Confirm
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

src/Pages/BankDepositRequest/RejectModal.jsx

@@ -0,0 +1,139 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useRejectbankDepositRequestMutation } from "../../Services/bankdeposit.request.service";
+import ToastBox from "../../Components/ToastBox";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const RejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register, 
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectbankDepositRequest ] = useRejectbankDepositRequestMutation()  
+
+  const onSubmit = async(data) => {
+    console.log(id);
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectbankDepositRequest({ id ,data})
+      console.log(res);
+  
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        heandleOnClose()
+        
+      }else if(res?.data) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.success} />
+          ),
+        });
+        heandleOnClose()
+      } 
+      
+    } catch (error) {
+      console.log(error);
+      
+    }
+
+  };
+
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+    setIsBtnLoading(false)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+              fontWeight={400}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RejectModal;

src/Pages/Dashboard/InvestmentOpportunities.jsx

@@ -60,7 +60,7 @@ const InvestmentOpportunities = ({ showSearch = true, selectStyle = {} }) => {
       </Box>
     ),
     "Amount Remaining %": (
-      <Box w={"110px"} textAlign={'end'} isTruncated>
+      <Box w={"90px"} textAlign={'end'} isTruncated>
         <Text as={"span"} color={"teal.900"}>
           {parseFloat(item?.Amount_remaining_per || 0).toLocaleString(
             undefined,

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -4,39 +4,34 @@ import {
   Button,
   HStack,
   Input,
-  Switch,
-  Text,
-  Tooltip,
-  useToast,
-  useDisclosure,
   Link,
+  Text,
+  useBoolean,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
-import { HiDotsVertical } from "react-icons/hi";
 import { useNavigate } from "react-router-dom";
-import { debounce } from "../../Master/Sponser/AddSponser";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import Pagination from "../../../Components/Pagination";
-import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
-import ToastBox from "../../../Components/ToastBox";
 import NormalTable from "../../../Components/DataTable/NormalTable";
-import ConfirmModal from "./ConfirmModal";
-import RejectModal from "./RejectModal";
-import {
-  useDepositRejectMutation,
-  useGetDepositHistoryQuery,
-} from "../../../Services/deposit.request.service";
+import Pagination from "../../../Components/Pagination";
+import ToastBox from "../../../Components/ToastBox";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { useGetDepositHistoryQuery } from "../../../Services/deposit.request.service";
+import { debounce } from "../../Master/Sponser/AddSponser";
 
 import { ExternalLinkIcon } from "@chakra-ui/icons";
+import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
+import { generateSerialNumber, isMaker } from "../../../Constants/Constants";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-import { generateSerialNumber } from "../../../Constants/Constants";
+import { useCreateBankDepositReversalRequestMutation } from "../../../Services/bankdeposit.request.service";
 
 const formatDate = (date) => {
-  return new Date(date).toLocaleDateString('en-GB', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
+  return new Date(date).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
   });
 }; // Simple date formatter
 
@@ -50,22 +45,22 @@ const DepositHistory = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
-  // const {
-  //   isOpen: isConfirmOpen,
-  //   onOpen: onConfirmOpen,
-  //   onClose: onConfirmClose,
-  // } = useDisclosure();
-  // const {
-  //   isOpen: isRejectOpen,
-  //   onOpen: onRejectOpen,
-  //   onClose: onRejectClose,
-  // } = useDisclosure();
 
-  // =========================== [Use State] ============================= 
+  const [createBankDepositReversalRequest] =
+    useCreateBankDepositReversalRequestMutation();
+
+  // =========================== [Use State] =============================
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   const [searchTerm, setSearchTerm] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [reversalId, setReversalId] = useState();
+  const {
+    isOpen: isOpenInRev,
+    onOpen: onOpenInRev,
+    onClose: onCloseInRev,
+  } = useDisclosure();
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
 
   // Debounce the search term to avoid making a request on every keystroke
   useEffect(() => {
@@ -77,20 +72,21 @@ const DepositHistory = () => {
     };
   }, [searchTerm]);
 
-  
   const {
     data,
     error,
     refetch,
     isLoading: depositHistoryLoading,
-  } = useGetDepositHistoryQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  });
+  } = useGetDepositHistoryQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
 
   // Use useEffect to refetch data when the component mounts
   useEffect(() => {
@@ -109,6 +105,7 @@ const DepositHistory = () => {
     "Deposit Date",
     "Status",
     "Supporting's",
+    isMaker() && "Reversal Action",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -161,7 +158,7 @@ const DepositHistory = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-      {generateSerialNumber(idx,currentPage, pageSize )}
+        {generateSerialNumber(idx, currentPage, pageSize)}
       </Text>
     ),
     "Client ID": (
@@ -205,11 +202,7 @@ const DepositHistory = () => {
       </Box>
     ),
     "Deposit Amount": (
-      <Box
-        isTruncated={true}
-        display={"flex"}
-        justifyContent={"end"}
-      >
+      <Box isTruncated={true} display={"flex"} justifyContent={"end"}>
         <Text as={"span"} color={"teal.900"} textAlign={"right"}>
           {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
@@ -283,31 +276,91 @@ const DepositHistory = () => {
       ) : (
         ""
       ),
+    "Reversal Action": (
+      <Box w={"120px"} isTruncated={true} cursor={"pointer"}>
+        {item.transactionStatus === "Approved" ? (
+          <Text
+            as={"span"}
+            color={!item.isReversal ? "green.500" : "#FFBB00"}
+            fontWeight={700}
+          >
+            {!item.isReversal ? (
+              <Button
+                onClick={() => {
+                  onOpenInRev(); // Call the function
+                  setReversalId(item.id);
+                }}
+                colorScheme="teal"
+                size="xs"
+                variant="outline"
+              >
+                Initiate Reversal
+              </Button>
+            ) : (
+              "Under process"
+            )}
+          </Text>
+        ) : (
+          ""
+        )}
+      </Box>
+    ),
   }));
 
-  const handleDelete = () => {
-    const IOtype = investmentType.filter(
-      (investmentType) => investmentType.id !== actionId
-    );
+  // const handleDelete = () => {
+  //   const IOtype = investmentType.filter(
+  //     (investmentType) => investmentType.id !== actionId
+  //   );
 
-    setTimeout(() => {
-      setInvestmentType(IOtype);
-      setDeleteAlert(false);
-      setIsLoading(false);
-    }, 100);
-    setIsLoading(true);
+  //   setTimeout(() => {
+  //     setInvestmentType(IOtype);
+  //     setDeleteAlert(false);
+  //     setIsLoading(false);
+  //   }, 100);
+  //   setIsLoading(true);
+  // };
+
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } =
+        await createBankDepositReversalRequest({
+          id: reversalId,
+          data,
+        });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onCloseInRev();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
   };
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
-      {/* <ConfirmModal
-        isOpen={isConfirmOpen}
-        onClose={onConfirmClose}
-      />
-      <RejectModal
-        isOpen={isRejectOpen}
-        onClose={onRejectClose}
-      /> */}
       <Box bg="white.500">
         <HStack
           display={"flex"}
@@ -354,12 +407,19 @@ const DepositHistory = () => {
         setMouseEntered={setMouseEntered}
       />
 
-      <CustomAlertDialog
+      {/* <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         message={"Are you sure you want to delete sponers?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
+      /> */}
+
+      <InitiateReversalPopup
+        onClose={onCloseInRev}
+        isOpen={isOpenInRev}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
       />
     </Box>
   );

src/Pages/EmailNotification/EmailNotification.jsx

@@ -277,7 +277,7 @@ const EmailNotification = () => {
 
         <FormControl minH={400} isRequired mb={3} p={1}>
           <FormLabel fontSize={"sm"}>Create Custom body</FormLabel>
-          <ReactQuill
+          <ReactQuill 
             theme="snow"
             style={{
               height: 300,

src/Pages/Fawateer/FawateerRequest.jsx

@@ -1,46 +1,25 @@
 import {
-  Avatar,
   Badge,
   Box,
-  Button,
   HStack,
   Input,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Select,
-  Switch,
-  Tag,
   Text,
-  Tooltip,
   useDisclosure,
-  useToast,
+  useToast
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState, useRef } from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import NormalTable from "../../Components/DataTable/NormalTable";
-import { HiDotsVertical } from "react-icons/hi";
-import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
-import {
-  AddIcon,
-  DeleteIcon,
-  EditIcon,
-  EmailIcon,
-  ViewIcon,
-} from "@chakra-ui/icons";
-import Pagination from "../../Components/Pagination";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import Pagination from "../../Components/Pagination";
 import ToastBox from "../../Components/ToastBox";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { debounce } from "../Master/Sponser/AddSponser";
 // import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
-import { useGetInvestorsQuery } from "../../Services/investor.details.service";
+import { generateSerialNumber } from "../../Constants/Constants";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
-import { exportToExcel, generateSerialNumber } from "../../Constants/Constants";
-import { LuFileSpreadsheet } from "react-icons/lu";
-
+import { useGetInvestorsQuery } from "../../Services/investor.details.service";
 
 const FawateerRequest = () => {
   const navigate = useNavigate();
@@ -60,8 +39,7 @@ const FawateerRequest = () => {
   } = useDisclosure();
   const btnRef = React.useRef();
 
-
-  // =========================== [Use State] ============================= 
+  // =========================== [Use State] =============================
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   const [searchTerm, setSearchTerm] = useState("");
@@ -77,21 +55,20 @@ const FawateerRequest = () => {
     };
   }, [searchTerm]);
 
-  
   const {
     data: investorDetails,
     isLoading: investorDetailsLoading,
     error,
-  } = useGetInvestorsQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  }
-);
-
+  } = useGetInvestorsQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
 
   useEffect(() => {
     // Simulate loading
@@ -109,10 +86,10 @@ const FawateerRequest = () => {
     "Client ID",
     "First Name",
     "Last Name",
-    "Country", 
+    "Country",
     "Phone Number",
     "E-mail ID",
-    // "Type", 
+    // "Type",
     // "KYC Status",
     "Approval Status",
   ];
@@ -131,7 +108,15 @@ const FawateerRequest = () => {
   // ====================================================[Table Filter]================================================================
   const filteredData = investorDetails?.data?.rows?.filter((item) => {
     // Filter by name (case insensitive)
-  const name = [item?.principal?.firstName, item?.principal?.lastName, item?.country?.countryName, item?.principal?.mobileNumber, item?.principal?.emailAddress].filter(Boolean).join(' ');
+    const name = [
+      item?.principal?.firstName,
+      item?.principal?.lastName,
+      item?.country?.countryName,
+      item?.principal?.mobileNumber,
+      item?.principal?.emailAddress,
+    ]
+      .filter(Boolean)
+      .join(" ");
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name?.toLowerCase().includes(searchLower);
 
@@ -147,35 +132,31 @@ const FawateerRequest = () => {
     return nameMatches;
   });
 
-
-
   const customHeaders = [
     { label: "ID", key: "id" },
     { label: "Client ID", key: "clientReference_id" },
-    { label: "First Name", key: "principal.firstName" },  // Nested property
-    { label: "Last Name", key: "principal.lastName" },    // Nested property
-    { label: "Country", key: "country.countryName" },     // Nested property
+    { label: "First Name", key: "principal.firstName" }, // Nested property
+    { label: "Last Name", key: "principal.lastName" }, // Nested property
+    { label: "Country", key: "country.countryName" }, // Nested property
     { label: "Phone Number", key: "principal.mobileNumber" }, // Nested property
-    { label: "E-mail ID", key: "principal.emailAddress" },    // Nested property
+    { label: "E-mail ID", key: "principal.emailAddress" }, // Nested property
     { label: "Type", key: "investor_type.investorTypeName" }, // Nested property
-    { label: "Status", key: "ioStatus" },                     // Simple property
-    { label: "KYC Status", key: "KYCStatus" },                // Simple property
+    { label: "Status", key: "ioStatus" }, // Simple property
+    { label: "KYC Status", key: "KYCStatus" }, // Simple property
   ];
-  
 
   const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
     id: item?.id,
     "Sr No": (
       <Text
-      w={'24px'}
+        w={"24px"}
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center fw-bold web-text-small"
       >
         {/* {item.id} */}
-        {generateSerialNumber(idx,currentPage, pageSize )}
-        
+        {generateSerialNumber(idx, currentPage, pageSize)}
       </Text>
     ),
     "Client ID": (
@@ -183,7 +164,7 @@ const FawateerRequest = () => {
         <Text as={"span"} color={"teal.900"}>
           {item.clientReference_id}
         </Text>
-      </Box> 
+      </Box>
     ),
     "First Name": (
       <Box w={"auto"} isTruncated={true}>
@@ -220,27 +201,33 @@ const FawateerRequest = () => {
         </Text>
       </Box>
     ),
-    "Type": (
+    Type: (
       <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} >
-          <Badge color={"forestGreen.500"}    variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
+        <Text as={"span"}>
+          <Badge
+            color={"forestGreen.500"}
+            variant={"ghost"}
+            fontWeight={"700"}
+            px={2}
+            py={0.5}
+          >
             {item?.investor_type?.investorTypeName}
           </Badge>
         </Text>
       </Box>
     ),
     "Approval Status": (
-    <Box w={"auto"} isTruncated={true}>
-      <Badge
-        fontWeight={"700"}
-        textTransform={"none"}
-        colorScheme={item.ioStatus ? "red" : "purple"}
-        px={2}
-        py={0.5}
-      >
-        Approved
-      </Badge>
-    </Box>
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"700"}
+          textTransform={"none"}
+          colorScheme={item.ioStatus ? "red" : "purple"}
+          px={2}
+          py={0.5}
+        >
+          Approved
+        </Badge>
+      </Box>
     ),
   }));
 
@@ -264,8 +251,6 @@ const FawateerRequest = () => {
 
   console.log(investorDetails?.data?.totalItems);
 
-  
-
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -290,23 +275,17 @@ const FawateerRequest = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
 
-          
-
           <HStack display={"flex"} alignItems={"center"}>
-
-
             <Pagination
-              isLoading={investorDetailsLoading} 
+              isLoading={investorDetailsLoading}
               pageSize={pageSize}
               setPageSize={setPageSize}
               currentPage={currentPage}
               setCurrentPage={setCurrentPage}
               totalItems={investorDetails?.data?.totalItems}
-              
             />
 
-
-{/* 
+            {/* 
           <Button
               leftIcon={<AddIcon />}
               colorScheme="forestGreen"
@@ -317,7 +296,6 @@ const FawateerRequest = () => {
             >
               Create request
             </Button> */}
-
           </HStack>
         </HStack>
       </Box>
@@ -345,4 +323,4 @@ const FawateerRequest = () => {
   );
 };
 
-export default FawateerRequest
+export default FawateerRequest;

src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker.jsx

@@ -1,229 +1,239 @@
 import {
-    Avatar,
-    Badge,
-    Box,
-    Button,
-    HStack,
-    Input,
-    Link,
-    Text,
-    Tooltip,
-    useDisclosure,
-    useToast,
-  } from "@chakra-ui/react";
-  import React, { useContext, useEffect, useState } from "react";
-  import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
-  import Pagination from "../../../Components/Pagination";
-  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
-  import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
-  import NormalTable from "../../../Components/DataTable/NormalTable";
-  import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
-  import { generateSerialNumber } from "../../../Constants/Constants";
-  import {
-    useGetApproveHistoryQuery,
-    useGetFawateerForMakerRequestQuery,
-    useGetFawateerRequestQuery,
-  } from "../../../Services/fawateer.request.service";
-  import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-  import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-  
-  const ApproveHistoryMaker = () => {
-    const toast = useToast();
-    const { slideFromRight, approveHistory, setApproveHistory } =
-      useContext(GlobalStateContext);
-    const [searchTerm, setSearchTerm] = useState("");
-    const [isLoading, setIsLoading] = useState(true);
-    const [deleteAlert, setDeleteAlert] = useState(false);
-    const [actionId, setActionId] = useState(false);
-    const [mouseEntered, setMouseEntered] = useState(false);
-    const [mouseEnteredId, setMouseEnteredId] = useState("");
-    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-  
-    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
-  
-    const formatDate = (date) => {
-      return new Date(date).toLocaleDateString("en-GB", {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-      });
-    };
-  
-    const {
-      isOpen: isConfirmOpen,
-      onOpen: onConfirmOpen,
-      onClose: onConfirmClose,
-    } = useDisclosure();
-    const {
-      isOpen: isRejectOpen,
-      onOpen: onRejectOpen,
-      onClose: onRejectClose,
-    } = useDisclosure();
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Link,
+  Text,
+  Tooltip,
+  useBoolean,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
+import { generateSerialNumber, isMaker } from "../../../Constants/Constants";
+import {
+  useGetApproveHistoryQuery,
+  useGetFawateerForMakerRequestQuery,
+  useGetFawateerRequestQuery,
+} from "../../../Services/fawateer.request.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
+import ToastBox from "../../../Components/ToastBox";
+import { useCreateFawateerReversalRequestMutation } from "../../../Services/reversal.fawateer.deposit.service";
 
-    const {
-        data,
-        isLoading: drawalRequestLoading,
-        error,
-        refetch
-      } = useGetFawateerForMakerRequestQuery(
-        {
-          page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-          size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-          searchTerm: debouncedSearchTerm,
-        },
-        {
-          skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-        }
-      );
-  
-    console.log(data);
+const ApproveHistoryMaker = () => {
+  const toast = useToast();
+  const { slideFromRight, approveHistory, setApproveHistory } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
 
-    useEffect(() => {
-        const handler = setTimeout(() => {
-          setDebouncedSearchTerm(searchTerm);
-        }, 500); // Adjust delay as needed
-        return () => {
-          clearTimeout(handler);
-        };
-      }, [searchTerm]);
-  
-    // Use useEffect to refetch data when the component mounts
-    useEffect(() => {
-      refetch();
-    }, [refetch]);
-  
-    useEffect(() => {
-      // Simulate loading
-      const timer = setTimeout(() => {
-        setIsLoading(false);
-      }, 1500);
-  
-      // Cleanup the timer on component unmount
-      return () => clearTimeout(timer);
-    }, []);
-  
-    // ====================================================[Table Filter]================================================================
-    const filteredData = data?.data?.rows?.filter((item) => {
-      // Filter by name (case insensitive)
-      const name = item.firstName;
-      const searchLower = searchTerm.toLowerCase();
-      const nameMatches = name.toLowerCase().includes(searchLower);
-  
-      // Filter by status
-      // const status = item.status;
-      // const statusLower = status ? "active" : "inactive";
-  
-      // const statusMatches =
-      //   statusFilter === "all" ||
-      //   (statusFilter === "active" && status === true) ||
-      //   (statusFilter === "inactive" && status === false);
-  
-      return nameMatches;
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const [createFawateerReversalRequest] =
+    useCreateFawateerReversalRequestMutation();
+
+  const [reversalId, setReversalId] = useState();
+  const {
+    isOpen: isOpenInRev,
+    onOpen: onOpenInRev,
+    onClose: onCloseInRev,
+  } = useDisclosure();
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
     });
-  
-    // ====================================================[Table Setup]================================================================
-    const tableHeadRow = [
-      "Sr.no",
-      "Client ID",
-      "First Name",
-      "Last Name",
-      "E-mail ID",
-      "Phone Number",
-      "Deposit Date",
-      "Deposit Amount (BHD)",
-      "Support Image",
-      "Status",
-    ];
-  
-    const extractedArray = data?.data?.rows?.map((item, idx) => ({
-      
-      // id: item?.id,
-      "Sr.no": (
-        <Text
-          w={"auto"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {generateSerialNumber(idx, currentPage, pageSize)}
+  };
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const {
+    data,
+    isLoading: drawalRequestLoading,
+    error,
+    refetch,
+  } = useGetFawateerForMakerRequestQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      searchTerm: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.firstName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr.no",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "E-mail ID",
+    "Phone Number",
+    "Deposit Date",
+    "Deposit Amount (BHD)",
+    "Support Image",
+    "Status",
+    isMaker() && "Reversal Action",
+  ];
+
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
+    // id: item?.id,
+    "Sr.no": (
+      <Text
+        w={"auto"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"80px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.firstName}
         </Text>
-      ),
-      "Client ID": (
-        <Text
-          w={"60px"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {item.clientReference_id}
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"50px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.lastName}
         </Text>
-      ),
-      "First Name": (
-        <Box isTruncated={true} w={"80px"}>
-          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            {item.firstName}
-          </Text>
-        </Box>
-      ),
-      "Last Name": (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.lastName}
-          </Text>
-        </Box>
-      ),
-      "E-mail ID": (
-        <Box isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.emailAddress}
-          </Text>
-        </Box>
-      ),
-      "Phone Number": (
-        <Box w={"100px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.mobileNumber}
-          </Text>
-        </Box>
-      ),
-      "Deposit Date": (
-        <Box
-          w={"100px"}
-          isTruncated={true}
-          display={"flex"}
-        >
-          <Text as={"span"} color={"teal.900"}>
-            {formatDate(item?.transaction_date)}
-          </Text>
-        </Box>
-      ),
-      "Deposit Amount (BHD)": (
-        <Box w={"130px"} isTruncated={true} display={"flex"}>
-          <Text as={"span"} color={"teal.900"}>
-            {/* {item.investorAmount} */}
-            {parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}
-            {/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge>   */}
-          </Text>
-        </Box>
-      ),
-      "Support Image": (
-        <Text
-          color={"green.500"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-        {item?.spportFile_path&&<Badge
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"100px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "Deposit Date": (
+      <Box w={"100px"} isTruncated={true} display={"flex"}>
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.transaction_date)}
+        </Text>
+      </Box>
+    ),
+    "Deposit Amount (BHD)": (
+      <Box w={"130px"} isTruncated={true} display={"flex"}>
+        <Text as={"span"} color={"teal.900"}>
+          {/* {item.investorAmount} */}
+          {parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          {/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge>   */}
+        </Text>
+      </Box>
+    ),
+    "Support Image": (
+      <Text
+        color={"green.500"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.spportFile_path && (
+          <Badge
             px={2}
             py={0.5}
             textTransform={"inherit"}
@@ -236,123 +246,197 @@ import {
               display={"flex"}
               alignItems={"center"}
             >
-              <Box me={"1px"}
-                as="span"
-                cursor={"pointer"}
-              >
+              <Box me={"1px"} as="span" cursor={"pointer"}>
                 View
               </Box>
               <ExternalLinkIcon />
             </Link>
-          </Badge>}
-        </Text>
-      ),
-      Status: (
-        <Box isTruncated={true} display={"flex"}>
-          <Badge
-            my={1}
-            fontWeight={500}
-            px={2}
-            py={"2px"}
-            rounded={4}
-            colorScheme={
-              item?.transactionStatus === "Approved"
+          </Badge>
+        )}
+      </Text>
+    ),
+    Status: (
+      <Box isTruncated={true} display={"flex"}>
+        <Badge
+          my={1}
+          fontWeight={500}
+          px={2}
+          py={"2px"}
+          rounded={4}
+          colorScheme={
+            item?.transactionStatus === "Approved"
               ? "green"
               : item?.transactionStatus === "Pending"
               ? "yellow"
               : item?.transactionStatus === "Reject"
               ? "red"
               : "gray" // default border color if status doesn't match any condition
-            }
-          >
-            {item.transactionStatus}
-          </Badge>
-        </Box>
-      ),
-    }));
-  
-    const handleDelete = () => {
-      const updatedSponsors = sponser.filter(
-        (sponsor) => sponsor.id !== actionId
-      );
-  
-      setTimeout(() => {
-        setSponser(updatedSponsors);
-        setDeleteAlert(false);
-        setIsLoading(false);
-      }, 100);
-      setIsLoading(true);
-    };
-  
-    return (
-      <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
-        <Box bg="white.500">
-          <HStack
-            display={"flex"}
-            justifyContent={"space-between"}
-            ps={1}
-            pe={1}
-            pb={4}
-            pt={4}
-            spacing="24px"
-          >
-            <Input
-              type="search"
-              width={300}
-              placeholder="Search..."
-              size="sm"
-              rounded="sm"
-              focusBorderColor="green.500"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-  
-            <Pagination
-              isLoading={drawalRequestLoading}
-              pageSize={pageSize}
-              setPageSize={setPageSize}
-              currentPage={currentPage}
-              setCurrentPage={setCurrentPage}
-              totalItems={data?.data?.totalItems}
-            />
-          </HStack>
-        </Box>
-  
-        <NormalTable
-          isLoading={drawalRequestLoading}
-          emptyMessage={`We don't have any Sponers `}
-          tableHeadRow={tableHeadRow}
-          data={extractedArray}
-          viewActionId={actionId}
-          setViewActionId={setActionId}
-          // totalPages={10}
-  
-          setMouseEnteredId={setMouseEnteredId}
-          setMouseEntered={setMouseEntered}
-        />
-  
-        <CustomAlertDialog
-          onClose={() => setDeleteAlert(false)}
-          isOpen={deleteAlert}
-          message={"Are you sure you want to delete sponers?"}
-          alertHandler={handleDelete}
-          isLoading={isLoading}
-        />
-        <DrawalRequestApprove
-          // data={data?.data?.rows}
-          isOpen={isConfirmOpen}
-          onClose={onConfirmClose}
-          id={actionId}
-          // firstField={firstField}
-        />
-        <DrawalRequestReject
-          isOpen={isRejectOpen}
-          onClose={onRejectClose}
-          id={actionId}
-        />
+          }
+        >
+          {item.transactionStatus}
+        </Badge>
       </Box>
+    ),
+    "Reversal Action": (
+      <Box w={"120px"} isTruncated={true} cursor={"pointer"}>
+        {item.transactionStatus === "Approved" ? (
+          <Text
+            as={"span"}
+            color={!item.isReversal ? "green.500" : "#FFBB00"}
+            fontWeight={700}
+          >
+            {!item.isReversal ? (
+              <Button
+                onClick={() => {
+                  onOpenInRev(); // Call the function
+                  // setReversalId(item.transaction_xid);
+                  setReversalId(item.id);
+                }}
+                colorScheme="teal"
+                size="xs"
+                variant="outline"
+              >
+                Initiate Reversal
+              </Button>
+            ) : (
+              "Under process"
+            )}
+          </Text>
+        ) : (
+          ""
+        )}
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
     );
+
+    setTimeout(() => {
+      setSponser(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
   };
-  
-  export default ApproveHistoryMaker;
-  
+
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await createFawateerReversalRequest(
+        {
+          id: reversalId,
+          data,
+        }
+      );
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onCloseInRev();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <Pagination
+            isLoading={drawalRequestLoading}
+            pageSize={pageSize}
+            setPageSize={setPageSize}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            totalItems={data?.data?.totalItems}
+          />
+        </HStack>
+      </Box>
+
+      <NormalTable
+        isLoading={drawalRequestLoading}
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <DrawalRequestApprove
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <DrawalRequestReject
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+
+      <InitiateReversalPopup
+        onClose={onCloseInRev}
+        isOpen={isOpenInRev}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
+      />
+    </Box>
+  );
+};
+
+export default ApproveHistoryMaker;

src/Pages/ReversalAccountDeletion/ConfirmModal.jsx

@@ -0,0 +1,149 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ReactQuill from "react-quill";
+
+export const conformModalSchema = yup.object().shape({
+  fees: yup.string().required("File name is required"),
+  totalAmount: yup.string().required("File name is required"),
+});
+
+const ConfirmModal = ({ isOpen, onClose, firstField }) => {
+
+  const [emailApproval,setEmailApproval] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const onSubmit = (data) => {
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      status: true,
+      id: uuidv4(),
+      createdAt: new Date().toISOString(),
+      Type: getFileIcon(file.type),
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    onClose();
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };  
+
+  const modules = {
+    toolbar: [
+      //   [{ header: "1" }, { header: "2" },
+      //   // { font: [] }
+      // ],
+      // [{ size: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["clean"],
+    ],
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+          <FormControl mb={4} isRequired>
+            <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea rows={5} 
+               focusBorderColor='green.400'
+                name="fileName"
+                {...register("fileName")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={'md'}
+                resize={'none'}
+              />
+              {errors.comment && (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              )}
+            </FormControl>
+            
+            <Checkbox colorScheme='forestGreen'
+             onChange={(e) =>setEmailApproval(e.target.checked)}
+            >
+              <Text mb={0} fontSize={'sm'}>Send an email to the user upon approval</Text>
+            </Checkbox>
+            {emailApproval && <Box className="messageBox">
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm" mb={1}>Subject</FormLabel>
+                <Input 
+                  focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                />
+              </FormControl>
+              <FormControl mb={12}>
+                <FormLabel fontSize="sm" mb={1}>Message</FormLabel>
+                <ReactQuill
+                  theme="snow"
+                  style={{
+                    height: 150,
+                  }}
+                  // value={value}
+                  // onChange={setValue}
+                  modules={modules}
+                  placeholder="Start typing here..."
+                />
+              </FormControl>
+            </Box>}
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+              Cancel
+            </Button>
+            <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
+              Confirm
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

src/Pages/ReversalAccountDeletion/RejectModal.jsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+
+export const conformModalSchema = yup.object().shape({
+    comment: yup.string().required("Comment is required"),
+});
+
+const RejectModal = ({ isOpen, onClose, firstField }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const onSubmit = (data) => {
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      comment: true,
+      id: uuidv4(),
+      Type: getFileIcon(file.type),
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    onClose();
+  }; 
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea rows={6} 
+               focusBorderColor='green.400'
+                name="fileName"
+                {...register("fileName")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={'md'}
+                resize={'none'}
+              />
+              {errors.comment && (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+              Cancel
+            </Button>
+            <Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RejectModal;

src/Pages/ReversalAccountDeletion/ReversalAccountDeletion.jsx

@@ -0,0 +1,404 @@
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useBoolean,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  useApproveAccountDeletionRequestMutation,
+  useGetAccountDeletionMasterQuery,
+  useRejectAccountDeletionRequestMutation,
+} from "../../Services/reversal.account.deletion.service";
+import ConfirmModal from "./ConfirmModal";
+import RejectModal from "./RejectModal";
+import RejectReversalPopups from "../../Components/Popups/RejectReversalPopups";
+import ToastBox from "../../Components/ToastBox";
+import ConfirmReversalPopups from "../../Components/Popups/ConfirmReversalPopups";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
+
+const ReversalAccountDeletion = () => {
+  const toast = useToast();
+  const { slideFromRight, setDeleteHistory } = useContext(GlobalStateContext);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const [rejectAccountDeletionRequest] = useRejectAccountDeletionRequestMutation();
+
+  const [approveAccountDeletionRequest] = useApproveAccountDeletionRequestMutation();
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data: deleteHistory,
+    isLoading,
+    refetch,
+  } = useGetAccountDeletionMasterQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Request Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Phone Number",
+    "Country",
+    "Action",
+  ];
+
+  const extractedArray = deleteHistory?.data?.rows?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Request Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {formatDate(item.isReversalDate)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center  web-text-small"
+        fontWeight={"500"}
+      >
+        {item?.iamPrincipal?.investor_details?.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {item?.iamPrincipal?.firstName}
+        {/* {formatDate(item.charge)} */}
+      </Text>
+    ),
+    "Last Name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {item?.iamPrincipal?.lastName}
+      </Text>
+    ),
+    "Phone Number": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {item?.iamPrincipal?.ISDcode + " " + item?.iamPrincipal?.mobileNumber}
+      </Text>
+    ),
+    Country: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={"500"}
+      >
+        {item?.iamPrincipal?.investor_details?.country?.countryName}
+      </Text>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const deleteHistory = sponser.filter((sponsor) => sponsor.id !== actionId);
+
+    setTimeout(() => {
+      setSponser(deleteHistory);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await rejectAccountDeletionRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  const handleConfirm = async (data) => {
+    
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await approveAccountDeletionRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          {/* <HStack display={"flex"} alignItems={"center"}>
+              <Pagination totalItems={10} />
+            </HStack> */}
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <ConfirmReversalPopups
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        handleConfirm={handleConfirm}
+        isLoading={isReversalLoading}
+      />
+      <RejectReversalPopups
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
+      />
+    </Box>
+  );
+};
+
+export default ReversalAccountDeletion;

src/Pages/ReversalFawateerDeposit/ConfirmModal.jsx

@@ -0,0 +1,149 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ReactQuill from "react-quill";
+
+export const conformModalSchema = yup.object().shape({
+  fees: yup.string().required("File name is required"),
+  totalAmount: yup.string().required("File name is required"),
+});
+
+const ConfirmModal = ({ isOpen, onClose, firstField }) => {
+
+  const [emailApproval,setEmailApproval] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const onSubmit = (data) => {
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      status: true,
+      id: uuidv4(),
+      createdAt: new Date().toISOString(),
+      Type: getFileIcon(file.type),
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    onClose();
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  }; 
+  
+  const modules = {
+    toolbar: [
+      //   [{ header: "1" }, { header: "2" },
+      //   // { font: [] }
+      // ],
+      // [{ size: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["clean"],
+    ],
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+          <FormControl mb={4} isRequired>
+            <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea rows={5} 
+               focusBorderColor='green.400'
+                name="fileName"
+                {...register("fileName")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={'md'}
+                resize={'none'}
+              />
+              {errors.comment && (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              )}
+            </FormControl>
+            
+            <Checkbox colorScheme='forestGreen'
+             onChange={(e) =>setEmailApproval(e.target.checked)}
+            >
+              <Text mb={0} fontSize={'sm'}>Send an email to the user upon approval</Text>
+            </Checkbox>
+            {emailApproval && <Box className="messageBox">
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm" mb={1}>Subject</FormLabel>
+                <Input 
+                  focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                />
+              </FormControl>
+              <FormControl mb={12}>
+                <FormLabel fontSize="sm" mb={1}>Message</FormLabel>
+                <ReactQuill
+                  theme="snow"
+                  style={{
+                    height: 150,
+                  }}
+                  // value={value}
+                  // onChange={setValue}
+                  modules={modules}
+                  placeholder="Start typing here..."
+                />
+              </FormControl>
+            </Box>}
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+              Cancel
+            </Button>
+            <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
+              Confirm
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmModal;

src/Pages/ReversalFawateerDeposit/RejectModal.jsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+
+export const conformModalSchema = yup.object().shape({
+    comment: yup.string().required("Comment is required"),
+});
+
+const RejectModal = ({ isOpen, onClose, firstField }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const onSubmit = (data) => {
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      comment: true,
+      id: uuidv4(),
+      Type: getFileIcon(file.type),
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    onClose();
+  }; 
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea rows={6} 
+               focusBorderColor='green.400'
+                name="fileName"
+                {...register("fileName")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={'md'}
+                resize={'none'}
+              />
+              {errors.comment && (
+                <Text fontSize="xs" color="red">
+                  {errors.comment.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+              Cancel
+            </Button>
+            <Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RejectModal;

src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx

@@ -0,0 +1,412 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Link,
+  Text,
+  Tooltip,
+  useBoolean,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { generateSerialNumber } from "../../Constants/Constants";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useGetFawateerForMakerRequestQuery } from "../../Services/fawateer.request.service";
+import ConfirmModal from "./ConfirmModal";
+import RejectModal from "./RejectModal";
+import {
+  useApproveFawateerRequestMutation,
+  useGetFawateerDepositMasterQuery,
+  useRejectFawateerRequestMutation,
+} from "../../Services/reversal.fawateer.deposit.service";
+import RejectReversalPopups from "../../Components/Popups/RejectReversalPopups";
+import ToastBox from "../../Components/ToastBox";
+import ConfirmReversalPopups from "../../Components/Popups/ConfirmReversalPopups";
+
+const ReversalFawateerDeposit = () => {
+  const toast = useToast();
+  const { slideFromRight, approveHistory, setApproveHistory } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
+
+  const [rejectFawateerRequest] = useRejectFawateerRequestMutation();
+
+  const [approveFawateerRequest] = useApproveFawateerRequestMutation();
+
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const {
+    data,
+    isLoading: drawalRequestLoading,
+    error,
+    refetch,
+  } = useGetFawateerDepositMasterQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.principal?.firstName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr.no",
+    "Request Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Phone Number",
+    "Action",
+  ];
+
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
+    // id: item?.id,
+    "Sr.no": (
+      <Text
+        w={"auto"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "Request Date": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item?.transaction_details?.isReversalDate)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.principal?.investor_details?.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"80px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.principal?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.principal?.lastName}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"100px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.principal?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleApproved = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await rejectFawateerRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  const handleConfirm = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await approveFawateerRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <Pagination
+            isLoading={drawalRequestLoading}
+            pageSize={pageSize}
+            setPageSize={setPageSize}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            totalItems={data?.data?.totalItems}
+          />
+        </HStack>
+      </Box>
+
+      <NormalTable
+        isLoading={drawalRequestLoading}
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <ConfirmReversalPopups
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        handleConfirm={handleConfirm}
+        isLoading={isReversalLoading}
+      />
+      <RejectReversalPopups
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        handelApproved={handleApproved}
+        isLoading={isReversalLoading}
+      />
+    </Box>
+  );
+};
+
+export default ReversalFawateerDeposit;

src/Routes/Nav.js

@@ -7,6 +7,7 @@ import {
   TbReportMoney,
 } from "react-icons/tb";
 import {
+  RiAccountBoxLine,
   RiBankLine,
   RiFileUserLine,
   RiMoneyDollarBoxLine,
@@ -189,6 +190,34 @@ export const nav = [
     type: "accordion",
     Icon: AiOutlineUserDelete,
   },
+
+
+
+  {
+    title: "REVERSAL TRANSACTION",
+    type: "title",
+  },
+  {
+    title: "Bank Deposit Request",
+    type: "single",
+    path: "/bank-deposit-request",
+    Icon: RiBankLine,
+  },
+  {
+    title: "Fawateer Deposit",
+    type: "single",
+    path: "/reversal-fawateer-deposit",
+    Icon: HiOutlineBanknotes,
+  },
+  {
+    title: "Account Deletion Request",
+    type: "single",
+    path: "/account-deletion-request",
+    Icon: RiAccountBoxLine,
+  },
+
+
+
   {
     title: "MANAGE ADMIN",
     type: "title",

src/Routes/Routes.js

@@ -49,6 +49,9 @@ import Profile from "../Pages/Profile/Profile";
 import SubAdmin from "../Pages/SubAdmin/SubAdmin";
 import SubAdminUpdateCreate from "../Pages/SubAdmin/SubAdminUpdateCreate";
 import InvestmentOpportunities from "../Pages/Dashboard/InvestmentOpportunities";
+import BankDepositRequest from "../Pages/BankDepositRequest/BankDepositRequest";
+import ReversalFawateerDeposit from "../Pages/ReversalFawateerDeposit/ReversalFawateerDeposit";
+import ReversalAccountDeletion from "../Pages/ReversalAccountDeletion/ReversalAccountDeletion";
 
 export const RouteLink = [
   // =============[ Tanami ]================
@@ -130,7 +133,12 @@ export const RouteLink = [
   { path: "/subadmin", Component: SubAdmin },
   { path: "/subadmin/subadmin-update/:id", Component: SubAdminUpdateCreate },
   { path: "/subadmin/subadmin-update", Component: SubAdminUpdateCreate },
+   
+    // ===============[ REVERSAL TRANSACTION ]===============
 
+  { path: "/bank-deposit-request", Component: BankDepositRequest },
+  { path: "/reversal-fawateer-deposit", Component: ReversalFawateerDeposit },
+  { path: "/account-deletion-request", Component: ReversalAccountDeletion },
 
 
   // ===============[ fawateer ]===============

src/Services/bankdeposit.request.service.js

@@ -0,0 +1,61 @@
+// Need to use the React-specific entry point to import createApi
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+// Define a service using a base URL and expected endpoints
+export const bankDepositRequestMaster = createApi({
+  reducerPath: "BankDeposit",
+  baseQuery: baseQuery,
+  tagTypes: ["getBankDeposit"],
+  endpoints: (builder) => ({
+    // ======[Get All]=====
+
+    getBankDepositMaster: builder.query({
+      query: ({ size, search, page }) => {
+        let baseURL = `/reversal-transactions/bank-transfer/getAll?search=${search || ""}`
+
+        // Conditionally append page and size parameters if they are defined
+        if (page !== undefined && size !== undefined) {
+          baseURL += `&page=${page}&size=${size}`;
+        }
+
+        return baseURL;
+      },
+      providesTags: ["getBankDeposit"],
+    }),
+
+    approveBankDepositRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/bank-transfer/approve/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getDepositRequest", "getDepositHistory"],
+    }),
+
+    createBankDepositReversalRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/bank-transfer/create/${id}`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getDepositRequest", "getDepositHistory"],
+    }),
+
+    rejectbankDepositRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/bank-transfer/reject/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getDepositRequest", "getDepositHistory"],
+    }),
+  }),
+});
+
+export const {
+  useGetBankDepositMasterQuery,
+  useApproveBankDepositRequestMutation,
+  useRejectbankDepositRequestMutation,
+  useCreateBankDepositReversalRequestMutation,
+} = bankDepositRequestMaster;

src/Services/deposit.request.service.js

@@ -88,7 +88,7 @@ export const depositRequest = createApi({
 // Export hooks for usage in functional components
 export const {
   useGetDepositRequestQuery,
-  useGetDepositRequestByIdQuery,
+  useGetDepositRequestByIdQuery, 
   useUpdateDepositRequestMutation,
   useDepositRejectMutation,
   useGetDepositHistoryQuery,

src/Services/reversal.account.deletion.service.js

@@ -0,0 +1,61 @@
+// Need to use the React-specific entry point to import createApi
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+// Define a service using a base URL and expected endpoints
+export const reversalAccountDeletionMaster = createApi({
+  reducerPath: "accountDeletion",
+  baseQuery: baseQuery,
+  tagTypes: ["getAccountDeletion", "getHistory"],
+  endpoints: (builder) => ({
+    // ======[Get All]=====
+
+    getAccountDeletionMaster: builder.query({
+      query: ({ page, size, search, }) => {
+        let baseURL = `/reversal-transactions/account-deletion/getAll?search=${search || ""}`
+
+        // Conditionally append page and size parameters if they are defined
+        if (page !== undefined && size !== undefined) {
+          baseURL += `&page=${page}&size=${size}`;
+        }
+
+        return baseURL;
+      },
+      providesTags: ["getAccountDeletion"],
+    }),
+
+    approveAccountDeletionRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/account-deletion/approve/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getAccountDeletion", "getHistory"],
+    }),
+
+    createAccountDeletionReversalRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/account-deletion/create/${id}`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getAccountDeletion", "getHistory"],
+    }),
+
+    rejectAccountDeletionRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/account-deletion/reject/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getAccountDeletion", "getHistory"],
+    }),
+  }),
+});
+
+export const {
+  useGetAccountDeletionMasterQuery,
+  useCreateAccountDeletionReversalRequestMutation,
+  useApproveAccountDeletionRequestMutation,
+  useRejectAccountDeletionRequestMutation
+} = reversalAccountDeletionMaster;

src/Services/reversal.fawateer.deposit.service.js

@@ -0,0 +1,60 @@
+// Need to use the React-specific entry point to import createApi
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+// Define a service using a base URL and expected endpoints
+export const reversalFawateerDepositMaster = createApi({
+  reducerPath: "FawateerDeposit",
+  baseQuery: baseQuery,
+  tagTypes: ["getFawateerDeposit", "getDepositHistory"],
+  endpoints: (builder) => ({
+    // ======[Get All]=====
+
+    getFawateerDepositMaster: builder.query({
+      query: ({ search, page, size }) => {
+        let baseURL = `/reversal-transactions/fawateer/getAll?search=${search || ""}`
+        // Conditionally append page and size parameters if they are defined
+        if (page !== undefined && size !== undefined) {
+          baseURL += `&page=${page}&size=${size}`;
+        }
+
+        return baseURL;
+      },
+      providesTags: ["getFawateerDeposit"],
+    }),
+
+    approveFawateerRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/fawateer/approve/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
+    }),
+
+    createFawateerReversalRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/fawateer/create/${id}`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
+    }),
+
+    rejectFawateerRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/reversal-transactions/fawateer/reject/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
+    }),
+  }),
+});
+
+export const {
+  useGetFawateerDepositMasterQuery,
+  useApproveFawateerRequestMutation,
+  useCreateFawateerReversalRequestMutation,
+  useRejectFawateerRequestMutation,
+} = reversalFawateerDepositMaster;

src/Store/Store.js

@@ -21,6 +21,9 @@ import { sabAdminMaster } from "../Services/subadmin.service";
 import { changePasswordMake } from "../Services/change.password.service";
 import { forgetPasswordMake } from "../Services/forget.password.service";
 import { dashboardMaster } from "../Services/dashboard.service";
+import { bankDepositRequestMaster } from "../Services/bankdeposit.request.service";
+import { reversalFawateerDepositMaster } from "../Services/reversal.fawateer.deposit.service";
+import { reversalAccountDeletionMaster } from "../Services/reversal.account.deletion.service";
 
 export const store = configureStore({
   reducer: {
@@ -43,6 +46,9 @@ export const store = configureStore({
     [changePasswordMake.reducerPath]: changePasswordMake.reducer,
     [forgetPasswordMake.reducerPath]: forgetPasswordMake.reducer,
     [dashboardMaster.reducerPath]: dashboardMaster.reducer,
+    [bankDepositRequestMaster.reducerPath]: bankDepositRequestMaster.reducer,
+    [reversalFawateerDepositMaster.reducerPath]: reversalFawateerDepositMaster.reducer,
+    [reversalAccountDeletionMaster.reducerPath]: reversalAccountDeletionMaster.reducer,
 
     // Add other reducers as needed
   },
@@ -71,6 +77,9 @@ export const store = configureStore({
       changePasswordMake.middleware,
       forgetPasswordMake.middleware,
       dashboardMaster.middleware,
+      bankDepositRequestMaster.middleware,
+      reversalFawateerDepositMaster.middleware,
+      reversalAccountDeletionMaster.middleware,
     ),
 });