deposite reject

src/Components/Loaders/FullscreenLoaders.jsx

@@ -1,7 +1,7 @@
 import { Box, Spinner, Text } from "@chakra-ui/react";
 import React from "react";
 
-const FullscreenLoaders = () => {
+const FullscreenLoaders = ({height}) => {
   return (
     <Box
       display={"flex"}
@@ -9,7 +9,7 @@ const FullscreenLoaders = () => {
       flexDirection={'column'}
       alignItems={"center"}
       w={"100%"}
-      h={"100vh"}
+      h={height ? height: "100vh"}
       gap={4}
     ><Spinner
     thickness='3px'

src/Pages/Deposit/DepositRequest/DepositRequest.jsx

@@ -46,7 +46,7 @@ const DepositRequest = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
-  const [actionId, setActionId] = useState(false);
+  const [actionId, setActionId] = useState("");
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   const {
@@ -126,130 +126,138 @@ const DepositRequest = () => {
     return nameMatches;
   });
 
-  const extractedArray=
-    filteredData?.map((item, index) => ({
-      // id: item?.id,
-      "Sr.no": (
-        <Text
-          w={"30px"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {index + 1}
+  const extractedArray = filteredData?.map((item, index) => ({
+    // id: item?.id,
+    "Sr.no": (
+      <Text
+        w={"30px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {index + 1}
+      </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={"70px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.principal?.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?.principal?.investor_details?.clientReference_id}
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.principal?.lastName}
         </Text>
-      ),
-      "First Name": (
-        <Box isTruncated={true} w={"70px"}>
-          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            {item?.principal?.firstName}
-          </Text>
-        </Box>
-      ),
-      "Last Name": (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.principal?.lastName}
-          </Text>
-        </Box>
-      ),
-      Country: (
-        <Box w={"100px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.principal?.investor_details?.country?.countryName}
-          </Text>
-        </Box>
-      ),
-      "Phone Number": (
-        <Box w={"80px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.principal?.mobileNumber}
-          </Text>
-        </Box>
-      ),
-      "Amount in Investor currency": (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.investorAmount}
-          </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)}
+      </Box>
+    ),
+    Country: (
+      <Box w={"100px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.principal?.investor_details?.country?.countryName}
         </Text>
-      ),
-      Action: (
-        <Box display={"flex"} justifyContent={"center"} gap={2}>
-          <Tooltip
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.principal?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "Amount in Investor currency": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.investorAmount}
+        </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>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
             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"}
           >
-            <Badge
-              colorScheme="forestGreen"
-              color="green.500"
-              rounded={"sm"}
-              size={"xs"}
-              textTransform={"inherit"}
-              fontWeight={500}
-              px={2}
-              py={1}
-              onClick={onConfirmOpen}
-            >
-              <CheckIcon fontSize={"12px"} />
-            </Badge>
-          </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"}
           >
-            <Badge
-              colorScheme="red"
-              color="red.500"
-              rounded={"sm"}
-              size={"xs"}
-              textTransform={"inherit"}
-              fontWeight={500}
-              px={2}
-              onClick={onRejectOpen}
-              py={1}
-            >
-              <CloseIcon fontSize={"10px"} />
-            </Badge>
-          </Tooltip>
-        </Box>
-      ),
-    }))
-
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
 
   const handleDelete = () => {
     const IOtype = investmentType.filter(
@@ -263,7 +271,6 @@ const DepositRequest = () => {
     }, 100);
     setIsLoading(true);
   };
-  
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
@@ -324,9 +331,14 @@ const DepositRequest = () => {
       <DepositRequestApprove
         isOpen={isConfirmOpen}
         onClose={onConfirmClose}
+        id={actionId}
         // firstField={firstField}
       />
-      <DepositRequestReject isOpen={isRejectOpen} onClose={onRejectClose} />
+      <DepositRequestReject
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
     </Box>
   );
 };

src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx

@@ -14,126 +14,198 @@ import {
   Text,
   Textarea,
   useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
-import React from "react";
+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, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
+import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
+import ToastBox from "../../../Components/ToastBox";
+
+const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
-  fees: yup.string().required("File name is required"),
-  totalAmount: yup.string().required("File name is required"),
+  investorAmount: yup.string().required("Investor amount is required"),
+  comment: yup.string().required("Comment is required"),
+  supporting_FileName: yup.mixed().required("File is required"),
+  // .test("fileType", "Unsupported File Format", (value) => {
+  //   return value && FILE_TYPES.includes(value.type);
+  // }),
 });
 
-const DepositRequestApprove = ({ isOpen, onClose, firstField }) => {
+const DepositRequestApprove = ({ isOpen, onClose, firstField, id }) => {
+  const toast = useToast()
+  const [file, setFile] = useState();
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const [ updateDepositRequest ] = useUpdateDepositRequestMutation()
+
   const {
     register,
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(conformModalSchema),
   });
 
-  const onSubmit = (data) => {
-    setFile(data.document[0]);
+  const onSubmit = async(data) => {
+    setIsBtnLoading(true)
+    const formData = new FormData();
 
-    const newDocument = {
-      ...data,
-      document: data.document[0].name, // Store the document name
-      status: true,
-      id: uuidv4(),
-      createdAt: new Date().toISOString(),
-      Type: getFileIcon(file.type),
-    };
+    formData.append("investorAmount", data.investorAmount);
+    formData.append("comment", data.comment);
+    const file = data.supporting_FileName["0"];
+    formData.append("supporting_FileName", file);
 
-    setCreate((prevCreate) => [...prevCreate, newDocument]);
-    onClose();
+
+  try {
+    const res = await updateDepositRequest({ id ,data: formData})
+    console.log(res);
+
+    if (res?.error) {
+      toast({
+        render: () => (
+          <ToastBox message={res?.error?.data?.message} status={"error"} />
+        ),
+      });
+      setIsBtnLoading(false)
+    }else if(res?.data?.statusCode === 200) {
+      toast({
+        render: () => (
+          <ToastBox message={res?.data?.message} />
+        ),
+      });
+      setIsBtnLoading(false)
+    } 
+    
+  } catch (error) {
+    
+  }
+
+  heandleOnClose();
+    console.log(data);
   };
 
   const handleFileChange = (event) => {
     const selectedFile = event.target.files[0];
     setFile(selectedFile);
+    console.log(file);
   };
 
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
       <ModalOverlay />
+
       <ModalContent pb={4}>
         <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
         <ModalCloseButton />
-        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
-          <ModalBody>
-            <FormControl mb={4}>
-              <FormLabel fontSize="sm">Deposit Amount (SAR)</FormLabel>
-              <Input
-                focusBorderColor="green.400"
-                name="fileName"
-                {...register("fileName")}
-                fontSize="sm"
-                type="text"
-                size="sm"
-                placeholder={"$100,000"}
-                readOnly
-              />
-            </FormControl>
-            <FormControl mb={4}>
-              <FormLabel fontSize="sm">Upload Supporting*</FormLabel>
-              <Input
-                focusBorderColor="green.400"
-                name="fileName"
-                {...register("fileName")}
-                fontSize="sm"
-                type="file"
-                size="sm"
-                placeholder={"$100,000"}
-                className="form-control"
-              />
-              {errors.fees && (
-                <Text fontSize="xs" color="red">
-                  {errors.fees.message}
-                </Text>
-              )}
-            </FormControl>
-            <FormControl mb={4}>
-              <FormLabel fontSize="sm">Comments</FormLabel>
-              <Textarea
-                rows={5}
-                focusBorderColor="green.400"
-                name="fileName"
-                {...register("fileName")}
-                fontSize="sm"
-                type="textarea"
-                size="sm"
-                placeholder={"Enter your comments...."}
-                resize={"none"}
-              />
-              {errors.totalAmount && (
-                <Text fontSize="xs" color="red">
-                  {errors.totalAmount.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"}
-            >
-              Confirm
-            </Button>
-          </ModalFooter>
-        </Box>
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Deposit Amount (SAR)</FormLabel>
+                <Input
+                  focusBorderColor="green.400"
+                  name="investorAmount"
+                  {...register("investorAmount")}
+                  fontSize="sm"
+                  type="number"
+                  size="sm"
+                  placeholder={"100,000"}
+                  textAlign={"right"}
+                  // readOnly
+                />
+                {errors.investorAmount && (
+                  <Text fontSize="xs" color="red">
+                    {errors.investorAmount.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Upload Supporting*</FormLabel>
+                <Input
+                  focusBorderColor="green.400"
+                  name="supporting_FileName"
+                  {...register("supporting_FileName")}
+                  fontSize="sm"
+                  type="file"
+                  size="sm"
+                  placeholder={"$100,000"}
+                  className="form-control"
+                  accept="image/*"
+                />
+                {errors.supporting_FileName && (
+                  <Text fontSize="xs" color="red">
+                    {errors.supporting_FileName.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Comments</FormLabel>
+                <Textarea
+                  rows={5}
+                  focusBorderColor="green.400"
+                  name="comment"
+                  {...register("comment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="sm"
+                  placeholder={"Enter your comments...."}
+                  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"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Confirm
+              </Button>
+            </ModalFooter>
+          </Box>
+        )}
       </ModalContent>
     </Modal>
   );

src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx

@@ -1,99 +1,164 @@
 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"),
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useDepositRejectMutation } from "../../../Services/deposit.request.service";
+import ToastBox from "../../../Components/ToastBox";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
   });
+
+  const [ depositReject ] = useDepositRejectMutation()
   
-  const DepositRequestReject = ({ isOpen, onClose, firstField }) => {
-    const {
-      register,
-      handleSubmit,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(conformModalSchema),
-    });
+
+  const onSubmit = async(data) => {
+    setIsBtnLoading(true)
+    try {
+      const res = await depositReject({ id ,data})
+      console.log(res?.data?.statusCode);
   
-    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}>
-                <FormLabel fontSize="sm">Comment</FormLabel>
-                <Textarea rows={6} 
-                focusBorderColor='green.400'
-                  name="fileName"
-                  {...register("fileName")}
-                  fontSize="sm"
-                  type="textarea"
-                  size="md"
-                  placeholder={"$100,000"}
-                  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>
-    );
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsBtnLoading(false)
+        onClose();
+        
+      }else if(res?.data?.statusCode === 200) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+        onClose();
+        
+      } 
+      
+    } catch (error) {
+      console.log(error);
+      
+    }
+
   };
-  
-  export default DepositRequestReject;
-  
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DepositRequestReject;

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -8,7 +8,7 @@ import {
   Text,
   Tooltip,
   useToast,
-  useDisclosure
+  useDisclosure,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { HiDotsVertical } from "react-icons/hi";
@@ -19,9 +19,15 @@ import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 import ConfirmModal from "./ConfirmModal";
 import RejectModal from "./RejectModal";
+import {
+  useDepositRejectMutation,
+  useGetDepositHistoryQuery,
+} from "../../../Services/deposit.request.service";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -36,16 +42,27 @@ 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();
+
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
   const {
-    isOpen: isConfirmOpen,
-    onOpen: onConfirmOpen,
-    onClose: onConfirmClose,
-  } = useDisclosure();
-  const {
-    isOpen: isRejectOpen,
-    onOpen: onRejectOpen,
-    onClose: onRejectClose,
-  } = useDisclosure();
+    data,
+    error,
+    isLoading: depositHistoryLoading,
+  } = useGetDepositHistoryQuery({ page: currentPage, size: pageSize });
+
+  console.log(data?.data?.rows);
 
   useEffect(() => {
     // Simulate loading
@@ -60,14 +77,15 @@ const DepositHistory = () => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sr.no",
-    "Deposit Date",
     "Client ID",
     "First Name",
     "Last Name",
     "Country",
     "Phone Number",
     "Amount in Investor currency",
+    "Deposit Date",
     "Status",
+    "Supporting's",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -84,9 +102,9 @@ const DepositHistory = () => {
   }, 300);
 
   // ====================================================[Table Filter]================================================================
-  const filteredData = depositHistory.filter((item) => {
+  const filteredData = data?.data?.rows.filter((item) => {
     // Filter by name (case insensitive)
-    const name = item.clientId;
+    const name = item.createdAt;
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
 
@@ -98,7 +116,7 @@ const DepositHistory = () => {
   //   onViewOpen();
   // };
 
-  const [extractedArray, setExtractedArray] = useState(
+  const extractedArray = 
     filteredData?.map((item, index) => ({
       "Sr.no": (
         <Text
@@ -112,18 +130,6 @@ const DepositHistory = () => {
           {index + 1}
         </Text>
       ),
-      "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"
-        >
-          {item.date}
-        </Text>
-      ),
       "Client ID": (
         <Text
           w={"60px"}
@@ -133,48 +139,60 @@ const DepositHistory = () => {
           fontWeight={"500"}
           className="d-flex align-items-center web-text-small"
         >
-          {item.clientId}
+          {item?.principal?.investor_details?.clientReference_id}
         </Text>
       ),
       "First Name": (
         <Box isTruncated={true} w={"60px"}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            {item.firstName}
+            {item?.principal?.firstName}
           </Text>
         </Box>
       ),
       "Last Name": (
         <Box w={"70px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            {item.lastName}
+            {item?.principal?.lastName}
           </Text>
         </Box>
       ),
       Country: (
         <Box w={"80px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            {item.country}
+            {item?.principal?.investor_details?.country?.countryName}
           </Text>
         </Box>
       ),
       "Phone Number": (
         <Box w={"80px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            {item.phoneNumber}
+            {item?.principal?.mobileNumber}
           </Text>
         </Box>
       ),
       "Amount in Investor currency": (
-        <Box w={"50px"} isTruncated={true}>
+        <Box w={"60px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            <Badge px={2} py={1}>
-              {item.currency}
-            </Badge>
+            {/* <Badge px={2} py={1}> */}
+              {item?.investorAmount}
+            {/* </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'}>
+        <Box w={"70px"} isTruncated={true} cursor={"pointer"}>
           <Text
             // onClick={() => {
             //   setActionId(item.id);
@@ -189,14 +207,47 @@ const DepositHistory = () => {
               }
             }}
             as={"span"}
-            color={item.status === "Approved" ? "green" : "red"}
+            color={item.transactionStatus === "Approved" ? "green" : "red"}
           >
-            {item.status}
+            {item.transactionStatus}
           </Text>
         </Box>
       ),
+      "Supporting's": (
+        <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={"https://tanami.betadelivery.com/" + item?.supporting_FileName}
+            isExternal
+          >
+            <Box
+              as="span"
+              cursor={"pointer"}
+            >
+              View
+            </Box>
+            <ExternalLinkIcon />
+          </Link>
+        </Badge>
+        </Text>
+      ),
     }))
-  );
 
   const handleDelete = () => {
     const IOtype = investmentType.filter(
@@ -213,15 +264,14 @@ const DepositHistory = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
-      <ConfirmModal
+      {/* <ConfirmModal
         isOpen={isConfirmOpen}
         onClose={onConfirmClose}
-        // firstField={firstField}
       />
       <RejectModal
         isOpen={isRejectOpen}
         onClose={onRejectClose}
-      />
+      /> */}
       <Box bg="white.500">
         <HStack
           display={"flex"}
@@ -244,15 +294,22 @@ const DepositHistory = () => {
           />
 
           <HStack display={"flex"} alignItems={"center"}>
-            <Pagination totalItems={10} />
+          <Pagination
+              isLoading={depositHistoryLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
           </HStack>
         </HStack>
       </Box>
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Investment type `}
         tableHeadRow={tableHeadRow}
-        setData={setExtractedArray}
+        // setData={setExtractedArray}
         data={extractedArray}
         isLoading={isLoading}
         viewActionId={actionId}

src/Services/deposit.request.service.js

@@ -10,23 +10,45 @@ export const depositRequest = createApi({
   baseQuery: fetchBaseQuery({ baseUrl }),
   tagTypes: ["getDepositRequest"],
   endpoints: (builder) => ({
-
     getDepositRequest: builder.query({
-      query: ({ page, size }) =>
-        `/deposit/admin/getAll`,
+      query: () => `/deposit/admin/getAll`,
       providesTags: ["getDepositRequest"],
     }),
 
+    getDepositRequestById: builder.query({
+      query: (id) => `/deposit/admin/getById/${id}`,
+    }),
 
-        // =====[get investment details ]
-        // getDepositRequestById: builder.query({
-        //   query: (id) => `/deposit/admin/getById/${id}`,
-        //   providesTags: ["getRequest"],
-        // }),
-    
-    
+    updateDepositRequest: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/deposit/admin/updateApprove/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getDepositRequest"],
+    }),
+
+    depositReject: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/deposit/admin/updateReject/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getDepositRequest"],
+    }),
+
+    getDepositHistory: builder.query({
+      query: () => `/deposit/admin/getAllHistory`,
+      // providesTags: ["getDepositHistory"],
+    }),
   }),
 });
 
 // Export hooks for usage in functional components
-export const { useGetDepositRequestQuery } = depositRequest;
+export const {
+  useGetDepositRequestQuery,
+  useGetDepositRequestByIdQuery,
+  useUpdateDepositRequestMutation,
+  useDepositRejectMutation,
+  useGetDepositHistoryQuery,
+} = depositRequest;