Add InitiateReversalPopup component and integrate into DepositHistory

src/Components/Popups/InitiateReversalPopups.jsx

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

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -4,39 +4,32 @@ import {
   Button,
   HStack,
   Input,
-  Switch,
-  Text,
-  Tooltip,
-  useToast,
-  useDisclosure,
   Link,
+  Text,
+  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 { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
 import { generateSerialNumber } from "../../../Constants/Constants";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 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 +43,18 @@ 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] ============================= 
+  // =========================== [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();
 
   // Debounce the search term to avoid making a request on every keystroke
   useEffect(() => {
@@ -77,20 +66,21 @@ const DepositHistory = () => {
     };
   }, [searchTerm]);
 
-  
   const {
     data,
     error,
     refetch,
     isLoading: depositHistoryLoading,
-  } = useGetDepositHistoryQuery({
-    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
-    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
-    search: debouncedSearchTerm,
-  },
-  {
-    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
-  });
+  } = useGetDepositHistoryQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
 
   // Use useEffect to refetch data when the component mounts
   useEffect(() => {
@@ -109,6 +99,7 @@ const DepositHistory = () => {
     "Deposit Date",
     "Status",
     "Supporting's",
+    "Reversal Action",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -161,7 +152,7 @@ const DepositHistory = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-      {generateSerialNumber(idx,currentPage, pageSize )}
+        {generateSerialNumber(idx, currentPage, pageSize)}
       </Text>
     ),
     "Client ID": (
@@ -205,11 +196,7 @@ const DepositHistory = () => {
       </Box>
     ),
     "Deposit Amount": (
-      <Box
-        isTruncated={true}
-        display={"flex"}
-        justifyContent={"end"}
-      >
+      <Box isTruncated={true} display={"flex"} justifyContent={"end"}>
         <Text as={"span"} color={"teal.900"} textAlign={"right"}>
           {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
             minimumFractionDigits: 2,
@@ -283,6 +270,35 @@ const DepositHistory = () => {
       ) : (
         ""
       ),
+    "Reversal Action": (
+      <Box w={"120px"} isTruncated={true} cursor={"pointer"}>
+        {item.transactionStatus === "Approved" ? (
+          <Text
+            as={"span"}
+            color={!item.isReversal ? "green.500" : "yellow.500"}
+            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 = () => {
@@ -298,16 +314,13 @@ const DepositHistory = () => {
     setIsLoading(true);
   };
 
+  const handelApproved = async (data) => {
+    console.log(data, reversalId);
+    onCloseInRev();
+  };
+
   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"}
@@ -361,6 +374,12 @@ const DepositHistory = () => {
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
+
+      <InitiateReversalPopup
+        onClose={onCloseInRev}
+        isOpen={isOpenInRev}
+        handelApproved={handelApproved}
+      />
     </Box>
   );
 };