Merge branch 'Sprint-10' into sprint10/reversal

src/Pages/Admin/Notification.jsx

@@ -26,7 +26,10 @@ import ToastBox from "../../Components/ToastBox";
 import NormalTable from "../../Components/DataTable/NormalTable";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { useGetInvestorsQuery } from "../../Services/investor.details.service";
-import { INVESTOR_TABLE_PAGINATION, TABLE_PAGINATION } from "../../Constants/Paginations";
+import {
+  INVESTOR_TABLE_PAGINATION,
+  TABLE_PAGINATION,
+} from "../../Constants/Paginations";
 import { formatDate, generateSerialNumber } from "../../Constants/Constants";
 import { ViewIcon } from "@chakra-ui/icons";
 import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";
@@ -49,7 +52,7 @@ export const notification = yup.object().shape({
 
 export const notificationNew = yup.object().shape({
   title: yup.string().required("Notification Header is required"),
-  message: yup.string().required("Message is required"),
+  message: yup.string().notRequired(),
 });
 
 const Notification = () => {
@@ -59,7 +62,9 @@ const Notification = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [selectedRadio, setSelectedRadio] = useState([]);
   const [pageSize, setPageSize] = useState(INVESTOR_TABLE_PAGINATION?.size);
-  const [currentPage, setCurrentPage] = useState(INVESTOR_TABLE_PAGINATION?.page);
+  const [currentPage, setCurrentPage] = useState(
+    INVESTOR_TABLE_PAGINATION?.page
+  );
   const [searchTerm, setSearchTerm] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
   const [country, setCountry] = useState("");
@@ -108,16 +113,18 @@ const Notification = () => {
     }, 300);
     return () => clearTimeout(handler);
   }, [searchTerm]);
-  
 
-  const { data: investorDetails, isLoading: investorDetailsLoading, refetch } =
-  useGetUnbanInvestorQuery(
+  const {
+    data: investorDetails,
+    isLoading: investorDetailsLoading,
+    refetch,
+  } = useGetUnbanInvestorQuery(
     {
       page: 1, // Omit pagination for search
       size: 10000, // Omit pagination for search
       // page: debouncedSearchTerm ? undefined : currentPage, // Disable pagination for search
       // size: debouncedSearchTerm ? undefined : 10000 || pageSize || 500,    // Disable pagination for search
-      search: debouncedSearchTerm,                        // Pass search term
+      search: debouncedSearchTerm, // Pass search term
       country_xid: country,
       KYCStatus: kyc,
     },
@@ -131,10 +138,6 @@ const Notification = () => {
   //   console.log("Debounced Search Term:", debouncedSearchTerm);
   //   console.log("Investor Details:", investorDetails);
   // }, [searchTerm, debouncedSearchTerm, investorDetails]);
-  
-
-
-  console.log(investorDetails);
 
   const [sendNotification] = useSendNotificationMutation();
 
@@ -190,7 +193,6 @@ const Notification = () => {
     setIsLoading(true);
     try {
       const res = await sendNotification(dataToPass);
-      console.log(res);
 
       if (res?.error) {
         toast({
@@ -313,7 +315,6 @@ const Notification = () => {
       </Box>
     ),
   }));
-  
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>

src/Pages/BankDepositRequest/BankDepositRequest.jsx

@@ -0,0 +1,413 @@
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Switch,
+  Text,
+  Tooltip,
+  useToast,
+  useDisclosure,
+  Link,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import { debounce } from "../Admin/Contact";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { generateSerialNumber } from "../../Constants/Constants";
+import { useGetDepositHistoryQuery } from "../../Services/deposit.request.service";
+import Pagination from "../../Components/Pagination";
+import ConfirmModal from "./ConfirmModal";
+import RejectModal from "./RejectModal";
+
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}; // Simple date formatter
+
+const BankDepositRequest = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { depositHistory, setDepositHistory, slideFromRight } =
+    useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data,
+    error,
+    refetch,
+    isLoading: depositHistoryLoading,
+  } = 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(() => {
+    refetch();
+  }, [refetch]);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr.no",
+    "Request Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "Deposit Amount",
+    "Deposit Date",
+    "Status",
+    "Supporting's",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setDepositHistory((prevDepositHistory) =>
+      prevDepositHistory.map((depositHistory) =>
+        depositHistory.id === id
+          ? { ...depositHistory, status: !depositHistory.status }
+          : depositHistory
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  const filteredData = data?.data?.rows
+    .filter((item) => {
+      // Filter by name (case insensitive)
+      const name = [item.firstName, item.lastName, item.countryName]
+        .filter(Boolean)
+        .join(" ");
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+
+      // Filter by status (Uncomment and use if needed)
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";
+
+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);
+
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
+
+  // const handleView = (id) => {
+  //   setActionId(id);
+  //   onViewOpen();
+  // };
+
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
+    "Sr.no": (
+      <Text
+        w={"10px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"60px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.countryName}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "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>
+    ),
+    "Deposit 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>
+    ),
+    Status: (
+      <Box w={"70px"} isTruncated={true} cursor={"pointer"}>
+        <Text
+          as={"span"}
+          color={
+            item.transactionStatus === "Approved" ? "green.500" : "red.500"
+          }
+          fontWeight={700}
+        >
+          {item.transactionStatus}
+        </Text>
+      </Box>
+    ),
+    "Supporting's":
+      item.transactionStatus === "Approved" ? (
+        <Text
+          w={"60px"}
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {/* {item?.supporting_FileName} */}
+          <Badge
+            px={2}
+            py={0.5}
+            display={"flex"}
+            alignItems={"center"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
+          >
+            <Link
+              href={import.meta.env.VITE_IMAGE_URL + item?.supporting_FileName}
+              isExternal
+            >
+              <Box as="span" cursor={"pointer"}>
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+            {/* <Link to="www.google.com" isExternal>
+                <Box as="span">View</Box> <ExternalLinkIcon />
+              </Link> */}
+          </Badge>
+        </Text>
+      ) : (
+        ""
+      ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const IOtype = investmentType.filter(
+      (investmentType) => investmentType.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestmentType(IOtype);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  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"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Pagination
+              isLoading={depositHistoryLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Investment type `}
+        tableHeadRow={tableHeadRow}
+        // setData={setExtractedArray}
+        data={extractedArray}
+        isLoading={depositHistoryLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default BankDepositRequest;

src/Pages/BankDepositRequest/ConfirmModal.jsx

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

src/Pages/BankDepositRequest/RejectModal.jsx

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

src/Pages/Dashboard/InvestmentOpportunities.jsx

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

src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx

@@ -57,7 +57,7 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
       setError("Please select status");
       return;
     }
-    if (!message) {
+    if (selectedStatusId == 6 && !message) {
       return setMessageError("message is required");
     }
     setError("");

src/Pages/ReversalAccountDeletion/ConfirmModal.jsx

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

src/Pages/ReversalAccountDeletion/RejectModal.jsx

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

src/Pages/ReversalAccountDeletion/ReversalAccountDeletion.jsx

@@ -0,0 +1,322 @@
+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";
+import ConfirmModal from "./ConfirmModal";
+import RejectModal from "./RejectModal";
+  // import { formatDate } from "../../Components/Functions/UTCConvertor";
+  
+  const ReversalAccountDeletion = () => {
+    const toast = useToast();
+    const { slideFromRight, setDeleteHistory } =
+      useContext(GlobalStateContext);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+  
+  
+    // =========================== [Use State] ============================= 
+    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+    const {
+      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
+    } = 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',
+      });
+    };
+  
+   // Use useEffect to refetch data when the component mounts
+   useEffect(() => {
+    refetch();
+  }, [refetch]);
+  
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+      "Sr No.",
+      "Request On",
+      "Client ID",
+      "First Name",
+      "Last Name",
+      "Country",
+      "Phone Number",
+      "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 On": (
+        <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>
+      ),
+      "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>
+      ),
+      "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>
+      ),
+      "Action": (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Approve"
+            bg="#fff"
+            color={"green.500"}
+            placement="left-start"
+          >
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              py={1}
+              onClick={() => {
+                setActionId(item.id);
+                onConfirmOpen();
+              }}
+              colorScheme="green"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              <CheckIcon fontSize={"12px"} />
+            </Button>
+          </Tooltip>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Reject"
+            bg="#fff"
+            color={"red.500"}
+            placement="left-start"
+          >
+            <Button
+              colorScheme="red"
+              // color="red.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              onClick={() => {
+                setActionId(item.id);
+                onRejectOpen();
+              }}
+              py={1}
+              // variant={"solid"}
+            >
+              <CloseIcon fontSize={"10px"} />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const deleteHistory = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setSponser(deleteHistory);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    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}
+        />
+      </Box>
+    );
+  };
+  
+  export default ReversalAccountDeletion;
+  

src/Pages/ReversalFawateerDeposit/ConfirmModal.jsx

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

src/Pages/ReversalFawateerDeposit/RejectModal.jsx

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

src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx

@@ -0,0 +1,390 @@
+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 { 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";
+  
+  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();
+
+    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);
+
+    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",
+      "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>
+        </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
+            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"}
+            >
+              <Box me={"1px"}
+                as="span"
+                cursor={"pointer"}
+              >
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+          </Badge>}
+        </Text>
+      ),
+      Action: (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Approve"
+            bg="#fff"
+            color={"green.500"}
+            placement="left-start"
+          >
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              py={1}
+              onClick={() => {
+                setActionId(item.id);
+                onConfirmOpen();
+              }}
+              colorScheme="green"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              <CheckIcon fontSize={"12px"} />
+            </Button>
+          </Tooltip>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Reject"
+            bg="#fff"
+            color={"red.500"}
+            placement="left-start"
+          >
+            <Button
+              colorScheme="red"
+              // color="red.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              onClick={() => {
+                setActionId(item.id);
+                onRejectOpen();
+              }}
+              py={1}
+              // variant={"solid"}
+            >
+              <CloseIcon fontSize={"10px"} />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const 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;
+  

src/Routes/Nav.js

@@ -189,6 +189,34 @@ export const nav = [
     type: "accordion",
     Icon: AiOutlineUserDelete,
   },
+
+
+
+  {
+    title: "REVERSAL TRANSACTION",
+    type: "title",
+  },
+  {
+    title: "Bank Deposit Request",
+    type: "single",
+    path: "/bank-deposit-request",
+    Icon: RiBankLine,
+  },
+  {
+    title: "Fawateer Deposit",
+    type: "single",
+    path: "/fawateer-deposit",
+    Icon: TbLayoutDashboard,
+  },
+  {
+    title: "Account Deletion Request",
+    type: "single",
+    path: "/account-deletion-request",
+    Icon: TbLayoutDashboard,
+  },
+
+
+
   {
     title: "MANAGE ADMIN",
     type: "title",

src/Routes/Routes.js

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