Merge pull request 'dev' (#32) from dev into main

Reviewed-on: #32

src/Components/Popups/ConfirmReversalPopups.jsx

@@ -0,0 +1,202 @@
+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.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
+    .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]);
+
+   // Reset the form when the modal closes
+   useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
+  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,133 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React, { useEffect } 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.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
+    .required("Comment is required"),
+});
+
+const InitiateReversalPopup = ({
+  isOpen,
+  onClose,
+  handelApproved,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+    // Reset the form when the modal closes
+    useEffect(() => {
+      if (!isOpen) {
+        reset(); // Clear the form state
+      }
+    }, [isOpen, reset]);
+
+  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,132 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React, { useEffect } 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.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
+    .required("Comment is required"),
+}); 
+
+const RejectReversalPopups = ({
+  isOpen,
+  onClose,
+  handelApproved,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+   // Reset the form when the modal closes
+   useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
+  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";
@@ -29,6 +28,7 @@ import {
 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 {
@@ -54,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";
@@ -65,7 +66,6 @@ import { nav } from "../Routes/Nav";
 import { RouteLink } from "../Routes/Routes";
 import { useProfileQuery } from "../Services/io.service";
 import { useLogoutMutation } from "../Services/token.serivce";
-import { HiOutlineBanknotes } from "react-icons/hi2";
 
 const DashboardLayout = ({ isOnline }) => {
   const navigate = useNavigate();
@@ -259,21 +259,21 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Withdrawal pending request
+            Withdrawal Pending Request
           </span>
         );
       case path.startsWith("/withdraw-history"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Withdrawal request
+            Withdrawal Request
           </span>
         );
       case path.startsWith("/investor-request"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Investor pending request
+            Investor Pending Request
           </span>
         );
       case path.startsWith("/investor-history"):
@@ -287,14 +287,14 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
           </span>
         );
       case path.startsWith("/deletion-history"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Deletion request
+            Deletion Request
           </span>
         );
 
@@ -302,21 +302,21 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiBankLine className="h4 m-0 fw-normal" />
-            Bank Deposit Request
+            Reversal Transaction / 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
+            Reversal Transaction / 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
+            Reversal Transaction / Account Deletion Request
           </span>
         );
 
@@ -366,7 +366,7 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
           </span>
         );
       case path.startsWith("/deletion-history"):
@@ -380,7 +380,7 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
           </span>
         );
       case path.startsWith("/deletion-history"):
@@ -426,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,
@@ -436,6 +446,9 @@ const DashboardLayout = ({ isOnline }) => {
         ),
       };
     }
+    // if (item.title === "REVERSAL TRANSACTION" && item.type === "title") {
+    // }
+
     return item;
   });
 
@@ -720,6 +733,7 @@ const DashboardLayout = ({ isOnline }) => {
                   } else if (type === "single") {
                     return (
                       <Tooltip
+                        isDisabled={isDrawerOpen || openDrawerClick}
                         hasArrow
                         bg={"#fff"}
                         fontSize={"xs"}
@@ -738,7 +752,7 @@ const DashboardLayout = ({ isOnline }) => {
                           to={path}
                         >
                           {Icon && <Icon className="web-text-large ms-2" />}
-                          <Text 
+                          <Text
                             as={"span"}
                             display={
                               isDrawerOpen || openDrawerClick ? "flex" : "none"

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/AccountDeletion/DeletionRequest.jsx

@@ -91,17 +91,17 @@ const DeletionRequest = () => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sr No.",
-    "Requested on",
+    "Requested On",
     "Client ID",
-    "First name",
-    "Last name",
+    "First Name",
+    "Last Name",
     "Country",
-    "Phone number",
+    "Phone Number",
     "Status",
     "Action"
   ];
 
-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = data?.data?.rows?.map((item, index) => ({
     id: item?.id,
     "Sr No.": (
       <Text
@@ -114,7 +114,7 @@ const DeletionRequest = () => {
         {index + 1}.
       </Text>
     ),
-    "Requested on": (
+    "Requested On": (
       <Text
         justifyContent={"left"}
         as={"span"}
@@ -136,7 +136,7 @@ const DeletionRequest = () => {
         {item?.clientId}
       </Text>
     ),
-    "First name": (
+    "First Name": (
       <Text
         justifyContent={"left"}
         as={"span"}
@@ -148,7 +148,7 @@ const DeletionRequest = () => {
         {/* {formatDate(item.charge)} */}
       </Text>
     ),
-    "Last name": (
+    "Last Name": (
       <Text
         justifyContent={"left"}
         as={"span"}
@@ -171,7 +171,7 @@ const DeletionRequest = () => {
       </Text>
     ),
 
-    "Phone number": (
+    "Phone Number": (
       <Text
         justifyContent={"left"}
         as={"span"}

src/Pages/AccountDeletion/DeletionRequestApprove.jsx

@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -21,88 +22,99 @@ import React, { useEffect, useState } from "react";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
-import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../Services/deposit.request.service";
+import {
+  useGetDepositRequestByIdQuery,
+  useGetDepositRequestQuery,
+  useUpdateDepositRequestMutation,
+} from "../../Services/deposit.request.service";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import ToastBox from "../../Components/ToastBox";
 import { useGetDrawalRequestQuery } from "../../Services/drawal.request.service";
-import { useApproveDepositRequestMutation, useGetDeleteRequestByIdQuery } from "../../Services/delete.request.service";
+import {
+  useApproveDepositRequestMutation,
+  useGetDeleteRequestByIdQuery,
+  useGetDeleteRequestQuery,
+} from "../../Services/delete.request.service";
 
 const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
+// export const conformModalSchema = yup.object().shape({
+//   adminComment: yup.string().notRequired(),
+// });
+
 export const conformModalSchema = yup.object().shape({
   adminComment: yup.string().notRequired(),
 });
 
-const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
-  const toast = useToast()
+const DeletionRequestApprove = ({
+  isOpen,
+  onClose,
+  firstField,
+  id,
+  data: requestData,
+}) => {
+  const toast = useToast();
   const [file, setFile] = useState();
-  const [isBtnLoading , setIsBtnLoading] = useState(false)
-  const [isBtnLoadingReject , setIsBtnLoadingReject] = useState(false)
-  const [isReject , setIsReject] = useState(false)
+  const [isBtnLoading, setIsBtnLoading] = useState(false);
+  const [isBtnLoadingReject, setIsBtnLoadingReject] = useState(false);
+  const [isReject, setIsReject] = useState(false);
 
-  const fileredData = requestData?.find((item)=> item?.id === id)
-  const [ updateApproveRequest ] = useApproveDepositRequestMutation()
-    const { data, isLoading } = useGetDeleteRequestByIdQuery(id, {
+  const fileredData = requestData?.find((item) => item?.id === id);
+  const [updateApproveRequest] = useApproveDepositRequestMutation();
+  const { data, isLoading } = useGetDeleteRequestByIdQuery(id, {
     skip: !id,
   });
 
-
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(conformModalSchema),
+    mode: "all",
   });
 
+  const { refetch } = useGetDeleteRequestQuery();
+
   useEffect(() => {
     reset({
-      comment:fileredData?.comment
-    })
-  
-   
-  }, [requestData, id])
-  
-  const onSubmit = async(data) => {
-    setIsBtnLoading(isReject?false:true)
-    setIsBtnLoadingReject(isReject)
+      comment: fileredData?.comment,
+    });
+  }, [requestData, id]);
+
+  const onSubmit = async (data) => {
+    setIsBtnLoading(isReject ? false : true);
+    setIsBtnLoadingReject(isReject);
     const approveReq = {
-      adminComment:data?.adminComment,
-      deletionStatus: isReject?"Reject": "Approved"
+      adminComment: data?.adminComment,
+      deletionStatus: isReject ? "Reject" : "Approved",
+    };
+
+    try {
+      const res = await updateApproveRequest({ id, data: approveReq });
+
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        heandleOnClose();
+      } else if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        refetch();
+        heandleOnClose();
+      }
+    } catch (error) {
+      console.log(error);
     }
-
-  try {
-    const res = await updateApproveRequest({ id ,data:approveReq })
-
-
-    if (res?.error) {
-      toast({
-        render: () => (
-          <ToastBox message={res?.error?.data?.message} status={"error"} />
-        ),
-      });
-      heandleOnClose()
-    }else if(res?.data?.statusCode === 200) {
-      toast({
-        render: () => (
-          <ToastBox message={res?.data?.message} />
-        ),
-      });
-      heandleOnClose()
-    } 
-    
-  } catch (error) {
- 
-  }
-
   };
 
-  const onReject = () => {
-
-  }
-
-
+  const onReject = () => {};
 
   useEffect(() => {
     if (data) {
@@ -112,16 +124,20 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
     }
   }, [data, reset]);
 
-  const heandleOnClose = () =>{
-    reset()
-    onClose()
-    setIsBtnLoading(false)
-    setIsReject(false)
-    setIsBtnLoadingReject(false)
-  }
+  const heandleOnClose = () => {
+    reset();
+    onClose();
+    setIsBtnLoading(false);
+    setIsReject(false);
+    setIsBtnLoadingReject(false);
+  };
 
   return (
-    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+    <Modal
+      isOpen={isOpen}
+      onClose={heandleOnClose}
+      initialFocusRef={firstField}
+    >
       <ModalOverlay />
 
       <ModalContent pb={4}>
@@ -133,7 +149,10 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
           <Box as="form" onSubmit={handleSubmit(onSubmit)}>
             <ModalBody>
               <FormControl mt={6} mb={4}>
-                <FormLabel fontSize="sm">Investor Comment <Badge colorScheme="green">{fileredData?.currencyCode}</Badge></FormLabel>
+                <FormLabel fontSize="sm">
+                  Investor Comment{" "}
+                  <Badge colorScheme="green">{fileredData?.currencyCode}</Badge>
+                </FormLabel>
                 {/* <Textarea
                   focusBorderColor="green.400"
                   name="comment"
@@ -150,8 +169,9 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                   </Text>
                 )} */}
 
-
-                <Text fontSize="sm" fontWeight={500} color={'gray.600'}>{data?.data?.comment}</Text>
+                <Text fontSize="sm" fontWeight={500} color={"gray.600"}>
+                  {data?.data?.comment}
+                </Text>
               </FormControl>
               <FormControl mb={4} isRequired>
                 <FormLabel fontSize="sm">Admin Comment</FormLabel>
@@ -163,14 +183,22 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                   fontSize="sm"
                   type="textarea"
                   size="sm"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                   resize={"none"}
+                  mb={2}
                 />
                 {errors.adminComment && (
                   <Text fontSize="xs" color="red">
                     {errors.adminComment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Text as={"span"} me={2}>
+                    {" "}
+                    Maximum length should be 200 characters. You have entered
+                  </Text>
+                  {watch("adminComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
@@ -180,9 +208,10 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                 type="submit"
                 size={"sm"}
                 rounded={"sm"}
-                variant={'ghost'}
-                onClick={()=> setIsReject(true)}
+                variant={"ghost"}
+                onClick={() => setIsReject(true)}
                 isLoading={isBtnLoadingReject}
+                fontWeight={500}
               >
                 Reject
               </Button>

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

@@ -10,6 +10,7 @@ import {
   useToast,
   useDisclosure,
   Link,
+  useBoolean,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -27,7 +28,13 @@ import { useGetDepositHistoryQuery } from "../../Services/deposit.request.servic
 import Pagination from "../../Components/Pagination";
 import ConfirmModal from "./ConfirmModal";
 import RejectModal from "./RejectModal";
-import { useGetBankDepositMasterQuery } from "../../Services/bankdeposit.request.service";
+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", {
@@ -64,6 +71,12 @@ const BankDepositRequest = () => {
   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(() => {
@@ -104,6 +117,7 @@ const BankDepositRequest = () => {
     "Last Name",
     "Country",
     "Phone Number",
+    "Deposit Amount",
     "Action",
   ];
 
@@ -169,7 +183,7 @@ const BankDepositRequest = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {formatDate(item?.createdAt)}
+        {formatDate(item?.isReversalDate)}
       </Text>
     ),
     "Client ID": (
@@ -199,16 +213,30 @@ const BankDepositRequest = () => {
       </Box>
     ),
     Country: (
-      <Box w={"80px"} isTruncated={true}>
+      <Box  isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
           {item?.countryName}
         </Text>
       </Box>
     ),
     "Phone Number": (
-      <Box w={"80px"} isTruncated={true}>
+      <Box  isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          {item?.mobileNumber}
+          {item?.ISDCode} {item?.mobileNumber}
+          {/* {item?.ISDcode + " " + item?.mobileNumber} */}
+        </Text>
+      </Box>
+    ),
+    "Deposit Amount": (
+      <Box isTruncated={true} display={"flex"} justifyContent={"end"}>
+        <Text as={"span"} color={"teal.900"} textAlign={"right"}>
+          {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
+          </Badge>
         </Text>
       </Box>
     ),
@@ -283,10 +311,98 @@ const BankDepositRequest = () => {
     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} />
-      <RejectModal isOpen={isRejectOpen} onClose={onRejectClose} />
+      {/* <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"}

src/Pages/BankDepositRequest/RejectModal.jsx

@@ -3,7 +3,6 @@ import {
   Button,
   FormControl,
   FormLabel,
-  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -13,48 +12,75 @@ import {
   ModalOverlay,
   Text,
   Textarea,
-  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
-import React from "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({
-    comment: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required"),
 });
 
-const RejectModal = ({ isOpen, onClose, firstField }) => {
+const RejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
   const {
-    register,
+    register, 
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(conformModalSchema),
   });
 
-  const onSubmit = (data) => {
-    setFile(data.document[0]);
+  const [ rejectbankDepositRequest ] = useRejectbankDepositRequestMutation()  
 
-    const newDocument = {
-      ...data,
-      document: data.document[0].name, // Store the document name
-      comment: true,
-      id: uuidv4(),
-      Type: getFileIcon(file.type),
-    };
+  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);
+      
+    }
 
-    setCreate((prevCreate) => [...prevCreate, newDocument]);
-    onClose();
-  }; 
-
-  const handleFileChange = (event) => {
-    const selectedFile = event.target.files[0];
-    setFile(selectedFile);
   };
 
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+    setIsBtnLoading(false)
+  }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
       <ModalOverlay />
       <ModalContent pb={4}>
         <ModalHeader fontSize={"md"}>Reject</ModalHeader>
@@ -63,29 +89,44 @@ const RejectModal = ({ isOpen, onClose, firstField }) => {
           <ModalBody>
             <FormControl mb={4} isRequired>
               <FormLabel fontSize="sm">Comment</FormLabel>
-              <Textarea rows={6} 
-               focusBorderColor='green.400'
-                name="fileName"
-                {...register("fileName")}
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
                 placeholder={"Enter your comments...."}
-                rounded={'md'}
-                resize={'none'}
+                rounded={"md"}
+                resize={"none"}
               />
-              {errors.comment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.comment.message}
+                  {errors.comments.message}
                 </Text>
               )}
             </FormControl>
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
               Cancel
             </Button>
-            <Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+              fontWeight={400}
+            >
               Send
             </Button>
           </ModalFooter>

src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx

@@ -110,7 +110,7 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
         <ModalHeader fontSize={"md"}>Investor Comment</ModalHeader>
         <ModalCloseButton />
         {isLoading ? (
-          <FullscreenLoaders height={"50vh"} /> 
+          <FullscreenLoaders height={"50vh"} />
         ) : (
         <Box as="form" onSubmit={handleSubmit(onSubmit)}>
           <ModalBody>

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,7 +105,7 @@ const DepositHistory = () => {
     "Deposit Date",
     "Status",
     "Supporting's",
-    "Reversal"
+    isMaker() && "Reversal Action",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -162,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": (
@@ -206,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,
@@ -284,45 +276,91 @@ const DepositHistory = () => {
       ) : (
         ""
       ),
-    "Reversal": (
-        <Box isTruncated={true} display={"flex"}>
-          <Badge
-            fontWeight={"500"}
-            textTransform={"none"}
-            color={item?.reversal === false ? "red" : "#FFBB00"}
-            px={2}
-            py={0.5}
-            variant={"ghost"}
-            >
-            {item?.reversal === true ? "Initiate Reversal" : "Under Process"}
-          </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.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"}
@@ -369,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/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/ApproveHistoryChecker.jsx

@@ -37,6 +37,7 @@ const ApproveHistory = () => {
   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);
@@ -60,12 +61,31 @@ const ApproveHistory = () => {
     onClose: onRejectClose,
   } = useDisclosure();
 
+  // 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,
     isLoading: drawalRequestLoading,
     error,
     refetch,
-  } = useGetApproveHistoryQuery();
+  } = useGetApproveHistoryQuery(
+    {
+      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?.data?.rows);
 
@@ -84,6 +104,15 @@ const ApproveHistory = () => {
     return () => clearTimeout(timer);
   }, []);
 
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
   // ====================================================[Table Filter]================================================================
   const filteredData = data?.data?.rows?.filter((item) => {
     // Filter by name (case insensitive)
@@ -117,7 +146,7 @@ const ApproveHistory = () => {
     "Status",
   ];
 
-  const extractedArray = filteredData?.map((item, idx) => ({
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
     // id: item?.id,
     "Sr.no": (
       <Text
@@ -172,11 +201,7 @@ const ApproveHistory = () => {
       </Box>
     ),
     "Deposit Date": (
-      <Box
-        w={"100px"}
-        isTruncated={true}
-        display={"flex"}
-      >
+      <Box w={"100px"} isTruncated={true} display={"flex"}>
         <Text as={"span"} color={"teal.900"}>
           {formatDate(item?.transaction_date)}
         </Text>
@@ -202,28 +227,27 @@ const ApproveHistory = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item?.spportFile_path&&<Badge
-          px={2}
-          py={0.5}
-          textTransform={"inherit"}
-          fontWeight={500}
-          colorScheme={"forestGreen"}
-        >
-          <Link
-            href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
-            isExternal
-            display={"flex"}
-            alignItems={"center"}
+        {item?.spportFile_path && (
+          <Badge
+            px={2}
+            py={0.5}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
           >
-            <Box me={"1px"}
-              as="span"
-              cursor={"pointer"}
+            <Link
+              href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
+              isExternal
+              display={"flex"}
+              alignItems={"center"}
             >
-              View
-            </Box>
-            <ExternalLinkIcon />
-          </Link>
-        </Badge>}
+              <Box me={"1px"} as="span" cursor={"pointer"}>
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+          </Badge>
+        )}
       </Text>
     ),
     Status: (
@@ -236,12 +260,12 @@ const ApproveHistory = () => {
           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
+              ? "green"
+              : item?.transactionStatus === "Pending"
+              ? "yellow"
+              : item?.transactionStatus === "Reject"
+              ? "red"
+              : "gray" // default border color if status doesn't match any condition
           }
         >
           {item.transactionStatus}

src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker.jsx

@@ -1,230 +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",
-      "Reversal",
-    ];
-  
-    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"}
@@ -237,137 +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>
-      ),
-      "Reversal": (
-        <Box isTruncated={true} display={"flex"}>
-          <Badge
-            fontWeight={"500"}
-            textTransform={"none"}
-            color={item?.reversal === false ? "red" : "#FFBB00"}
-            px={2}
-            py={0.5}
-            variant={"ghost"}
-            >
-            {item?.reversal === true ? "Initiate Reversal" : "Under Process"}
-          </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/FawateerChecker/ApproveRequest/RequestApproveModal.jsx

@@ -104,6 +104,12 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
     }
   }, [data, reset]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      reset(); 
+    }
+  }, [isOpen, reset]);
+
   const heandleOnClose = () =>{
     reset()
     onClose() 
@@ -130,11 +136,11 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker Comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
-              />
+              /> 
               {errors.checkerComment && (
                 <Text fontSize="xs" color="red">
                   {errors.checkerComment.message}

src/Pages/FawateerChecker/ApproveRequest/RequestRejectModal.jsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,8 +25,18 @@ import { useDepositRejectMutation } from "../../../Services/deposit.request.serv
 import ToastBox from "../../../Components/ToastBox";
 import { useRejectCommentMutation } from "../../../Services/fawateer.request.service";
 
+// export const conformModalSchema = yup.object().shape({
+//   comments: yup.string().required("Comment is required")
+//   .max(200, "Approve Comment cannot be more than 200 characters"),
+// });
+
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  // checkerComment: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  comments: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -36,12 +47,20 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(conformModalSchema),
   });
 
+  useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
+
   const [ rejectFawateer ] = useRejectCommentMutation()
   
 
@@ -101,7 +120,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
     reset()
     onClose()
   }
-
+ 
   return (
     <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
       <ModalOverlay />
@@ -126,12 +145,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                Maximum length should be 200 characters. You have entered
+                <Text as={'span'} ml={2}>{watch("comments")?.length || 0} </Text>characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>

src/Pages/ReversalAccountDeletion/ReversalAccountDeletion.jsx

@@ -1,323 +1,404 @@
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
 import {
-    Avatar,
-    Badge,
-    Box,
-    Button,
-    HStack,
-    Input,
-    Text,
-    Tooltip,
-    useDisclosure,
-    useToast,
-  } from "@chakra-ui/react";
-  import React, { useContext, useEffect, useState } from "react";
-  import { OPACITY_ON_LOAD } from "../../Layout/animations";
-  import NormalTable from "../../Components/DataTable/NormalTable";
-  import Pagination from "../../Components/Pagination";
-  import GlobalStateContext from "../../Contexts/GlobalStateContext";
-  import CustomAlertDialog from "../../Components/CustomAlertDialog";
-  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";
+  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 { useGetAccountDeletionMasterQuery } from "../../Services/reversal.account.deletion.service";
-  // 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("");
+import RejectReversalPopups from "../../Components/Popups/RejectReversalPopups";
+import ToastBox from "../../Components/ToastBox";
+import ConfirmReversalPopups from "../../Components/Popups/ConfirmReversalPopups";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
 
-    const {
-      isOpen: isConfirmOpen,
-      onOpen: onConfirmOpen,
-      onClose: onConfirmClose,
-    } = useDisclosure();
-    const {
-      isOpen: isRejectOpen,
-      onOpen: onRejectOpen,
-      onClose: onRejectClose,
-    } = useDisclosure();
-  
-    // 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
+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(() => {
+    }
+  );
+
+  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'}
+
+  // ====================================================[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"
         >
-          {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.Requested_on)}
-        </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.clientId}
-        </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.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.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.phoneNumber}
-        </Text>
-      ),
-      "Country": (
-        <Text 
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"gray.600"}
-          className="d-flex align-items-center web-text-small"
-          fontWeight={'500'}
-        >
-          {item.country}
-        </Text>
-      ),
-      "Action": (
-        <Box display={"flex"} justifyContent={"center"} gap={2}>
-          <Tooltip
+          <Button
             rounded={"sm"}
-            fontSize={"xs"}
-            label="Approve"
-            bg="#fff"
-            color={"green.500"}
-            placement="left-start"
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
           >
-            <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
+            <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"}
-            fontSize={"xs"}
-            label="Reject"
-            bg="#fff"
-            color={"red.500"}
-            placement="left-start"
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
           >
-            <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);
-    };
-  
-    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"}>
+            <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}
-        />
-        <ConfirmModal
-          // data={data?.data?.rows}
-          isOpen={isConfirmOpen}
-          onClose={onConfirmClose}
-          id={actionId}
-          // firstField={firstField}
-        />
-        <RejectModal
-          isOpen={isRejectOpen}
-          onClose={onRejectClose}
-          id={actionId}
-        />
+        </HStack>
       </Box>
-    );
-  };
-  
-  export default ReversalAccountDeletion;
-  
+
+      <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/ReversalFawateerDeposit.jsx

@@ -1,346 +1,427 @@
 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";
+  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 } 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 { useGetFawateerDepositMasterQuery } from "../../Services/reversal.fawateer.deposit.service";
-  
-  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 [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();
+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 {
-        data,
-        isLoading: drawalRequestLoading,
-        error,
-        refetch
-      } = useGetFawateerDepositMasterQuery(
-        {
-          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 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();
 
-    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 [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",
     });
-  
-    // ====================================================[Table Setup]================================================================
-    const tableHeadRow = [
-      "Sr.no",
-      "Request Date",
-      "Client ID",
-      "First Name",
-      "Last Name",
-      "Phone Number",
-      "Country",
-      "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?.createdAt)}
-        </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>
-        </Box>
-      ),
-      "Last Name": (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.lastName}
-          </Text>
-        </Box>
-      ),
-      "Country": (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.lastName}
-          </Text>
-        </Box>
-      ),
-      "Phone Number": (
-        <Box w={"100px"} 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 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}
-        />
-        <ConfirmModal
-          // data={data?.data?.rows}
-          isOpen={isConfirmOpen}
-          onClose={onConfirmClose}
-          id={actionId}
-          // firstField={firstField}
-        />
-        <RejectModal
-          isOpen={isRejectOpen}
-          onClose={onRejectClose}
-          id={actionId}
-        />
-      </Box>
-    );
   };
-  
-  export default ReversalFawateerDeposit;
-  
+
+  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",
+    "Deposit Amount (BHD)",
+    "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?.ISDcode} {item?.principal?.mobileNumber} */}
+          {item?.principal?.ISDcode + " " + item?.principal?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "Deposit Amount (BHD)": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} textAlign={"right"}>
+          {parseFloat(item?.transaction_details?.investorAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
+          </Badge>
+        </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/Pages/WithDrawal/DrawalView/ViewHistory.jsx

@@ -133,7 +133,7 @@ const ViewHistory = () => {
     "Status",
   ];
 
-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = data?.data?.rows?.map((item, index) => ({
     // id: item?.id,
     "Sr.no": (
       <Text

src/Routes/Nav.js

@@ -109,7 +109,7 @@ export const nav = [
     title: "Fawateer Deposit",
     submenu: [
       {
-        title: "Aprover Request",
+        title: "Approver Request",
         path: "/fawateer",
         icon: RiMoneyDollarBoxLine,
       },

src/Services/bankdeposit.request.service.js

@@ -1,5 +1,5 @@
 // Need to use the React-specific entry point to import createApi
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./token.serivce";
 
 // Define a service using a base URL and expected endpoints
@@ -11,7 +11,16 @@ export const bankDepositRequestMaster = createApi({
     // ======[Get All]=====
 
     getBankDepositMaster: builder.query({
-      query: () => `/reversal-transactions/bank-transfer/getAll`,
+      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"],
     }),
 
@@ -48,4 +57,5 @@ export const {
   useGetBankDepositMasterQuery,
   useApproveBankDepositRequestMutation,
   useRejectbankDepositRequestMutation,
+  useCreateBankDepositReversalRequestMutation,
 } = bankDepositRequestMaster;

src/Services/fawateer.request.service.js

@@ -9,7 +9,7 @@ import { baseQuery } from "./token.serivce";
 export const fawateerRequest = createApi({
   reducerPath: "fawateerRequest",
   baseQuery: baseQuery,
-  tagTypes: ["getFawateerRequest" ,"getApproveHistory","getApproveComment","getRejectComment","getFawateerMakerRequest"],
+  tagTypes: ["getFawateerRequest", "getApproveHistory", "getApproveComment", "getRejectComment", "getFawateerMakerRequest"],
   endpoints: (builder) => ({
 
 
@@ -37,7 +37,7 @@ export const fawateerRequest = createApi({
     }),
 
 
-    
+
 
     getFawateerForMakerRequest: builder.query({
       query: ({ page, size, searchTerm }) => {
@@ -50,8 +50,19 @@ export const fawateerRequest = createApi({
       providesTags: ["getFawateerMakerRequest"],
     }),
 
+    // getApproveHistory: builder.query({
+    //   query: () => `/fawateer/admin/getAll`,
+    //   providesTags: ["getApproveHistory"],
+    // }),
+
     getApproveHistory: builder.query({
-      query: () => `/fawateer/admin/getAll`,
+      query: ({ page, size, searchTerm }) => {
+        let baseURL = `/fawateer/admin/getAll?search=${searchTerm || ""}`;
+        if (page !== undefined && size !== undefined) {
+          baseURL += `&page=${page}&size=${size}`; // Only add pagination if both are defined
+        }
+        return baseURL;
+      },
       providesTags: ["getApproveHistory"],
     }),
 
@@ -72,16 +83,16 @@ export const fawateerRequest = createApi({
       }),
       invalidatesTags: ["getFawateerRequest"],
     }),
-
+ 
   }),
 });
 
 // Export hooks for usage in functional components
 export const {
-    useGetFawateerRequestQuery,
-    useGetApproveHistoryQuery,
-    useApproveCommentMutation,
-    useRejectCommentMutation,
-    useGetFawateerForMakerRequestQuery,
-    useGetFawateerInvestorsQuery
+  useGetFawateerRequestQuery,
+  useGetApproveHistoryQuery,
+  useApproveCommentMutation,
+  useRejectCommentMutation,
+  useGetFawateerForMakerRequestQuery,
+  useGetFawateerInvestorsQuery
 } = fawateerRequest;

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

@@ -6,17 +6,56 @@ import { baseQuery } from "./token.serivce";
 export const reversalAccountDeletionMaster = createApi({
   reducerPath: "accountDeletion",
   baseQuery: baseQuery,
-  tagTypes: ["getAccountDeletion"],
+  tagTypes: ["getAccountDeletion", "getHistory"],
   endpoints: (builder) => ({
     // ======[Get All]=====
 
     getAccountDeletionMaster: builder.query({
-      query: () => `/reversal-transactions/account-deletion/getAll`,
+      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,
- } = reversalAccountDeletionMaster;
+export const {
+  useGetAccountDeletionMasterQuery,
+  useCreateAccountDeletionReversalRequestMutation,
+  useApproveAccountDeletionRequestMutation,
+  useRejectAccountDeletionRequestMutation
+} = reversalAccountDeletionMaster;

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

@@ -1,22 +1,60 @@
 // Need to use the React-specific entry point to import createApi
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+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"],
+  tagTypes: ["getFawateerDeposit", "getDepositHistory"],
   endpoints: (builder) => ({
     // ======[Get All]=====
 
     getFawateerDepositMaster: builder.query({
-      query: () => `/reversal-transactions/bank-transfer/getAll`,
+      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,
- } = reversalFawateerDepositMaster;
+export const {
+  useGetFawateerDepositMasterQuery,
+  useApproveFawateerRequestMutation,
+  useCreateFawateerReversalRequestMutation,
+  useRejectFawateerRequestMutation,
+} = reversalFawateerDepositMaster;