drawar history

2024-08-23 12:23:44 +05:30
parent 97cfd45545
commit 129a79c669
12 changed files with 354 additions and 416 deletions
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -962,112 +962,14 @@ const GlobalStateProvider = ({ children }) => {
  ]);
  const [deleteHistory, setDeleteHistory] = useState([
    {
-      id: uuidv4(),
-      date: "2024-01-15",
-      Distribution: "Office supplies",
-      charge: "200.50",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-02-10",
-      Distribution: "Marketing expenses",
-      charge: "450.00",
-      year: "2024",
-      quarter: "Q1",
-      amount: 2000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-03-05",
-      Distribution: "Software subscription",
-      charge: "300.75",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-04-18",
-      Distribution: "Travel expenses",
-      charge: "600.30",
-      year: "2024",
-      quarter: "Q2",
-      amount: 2500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-05-22",
-      Distribution: "Consulting fees",
-      charge: "800.00",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-06-14",
-      Distribution: "Office rent",
-      charge: "1200.25",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-07-09",
-      Distribution: "Utilities",
-      charge: "150.40",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-08-29",
-      Distribution: "Employee training",
-      charge: "500.00",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1800,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-09-13",
-      Distribution: "Website maintenance",
-      charge: "350.65",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1400,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
+      id: 1,
+      firstName: "satyam",
+      lastName: "Bendal",
+      clientId: "QA00000003", 
+      RequestedOn: "2024-08-21T08:12:08.000Z",
+      phoneNumber: "6387524874",
+      country: "Qatar",
+      status: "Approved",
    },
  ]);
  const [investorRequest, setInvestorRequest] = useState([
@@ -1182,112 +1084,14 @@ const GlobalStateProvider = ({ children }) => {
  ]);
  const [deleteRequest, setDeleteRequest] = useState([
    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
+      id: 1,
+      firstName: "satyam",
+      lastName: "Bendal",
+      clientId: "QA00000003", 
+      RequestedOn: "2024-08-21T08:12:08.000Z",
+      phoneNumber: "6387524874",
+      country: "Qatar",
+      // status: "Approved",
    },
  ]);
  const [viewIO, setViewIO] = useState([
--- a/src/Pages/AccountDeletion/DeletionHistory.jsx
+++ b/src/Pages/AccountDeletion/DeletionHistory.jsx
@@ -36,38 +36,30 @@ const DeletionHistory = () => {
      setIsLoading(false);
    }, 1500);

-    // Cleanup the timer on component unmount
+    // Cleanup the timer on component unmount 
    return () => clearTimeout(timer);
  }, []);

  // ====================================================[Table Filter]================================================================
  const filteredData = deleteHistory.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.Distribution;
+    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.",
-    "Date",
-    "Distribution Amount",
-    "Charges (USD)",
-    "Year",
-    "Quater",
-    "Action",
+    "Request On",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "Status"
  ];

  const extractedArray = filteredData?.map((item, index) => ({
@@ -83,7 +75,7 @@ const DeletionHistory = () => {
        {index + 1}.
      </Text>
    ),
-    "Date": (
+    "Request On": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -94,7 +86,7 @@ const DeletionHistory = () => {
        {formatDate(item.date)}
      </Text>
    ),
-    "Distribution Amount": (
+    "Client ID": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -102,10 +94,10 @@ const DeletionHistory = () => {
        className="d-flex align-items-center  web-text-small"
        fontWeight={'500'}
      >
-        {item.Distribution}
+        {item.clientId}
      </Text>
    ),
-    "Charges (USD)": (
+    "First Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -113,11 +105,11 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.charge}
+        {item.firstName}
        {/* {formatDate(item.charge)} */}
      </Text>
    ),
-    Year: (
+    "Last Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -125,10 +117,10 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.year}
+        {item.lastName}
      </Text>
    ),
-    Quater: (
+    "Country": (
      <Text 
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -136,18 +128,30 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.quarter}
+        {item.country}
      </Text>
    ),
-    Action: (
-      <Box display={'flex'} justifyContent={'space-around'}>
-        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Accept' bg='#fff' color={'green.500'} placement="left-start">
-        <Button color="green.500"   rounded={'sm'} size={'xs'}>
-        <CheckIcon /></Button></Tooltip>
-        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Reject' bg='#fff' color={'red.500'} placement="left-start">
-        <Button color="red.500" rounded={'sm'} size={'xs'}>
-        <CloseIcon /></Button></Tooltip>
-      </Box>
+    "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>
+    ),
+    "Status": (
+      <Text 
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.status}
+      </Text>
    ),
  }));

--- a/src/Pages/AccountDeletion/DeletionRequest.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequest.jsx
@@ -6,6 +6,7 @@ import {
  HStack,
  Input,
  Text,
+  useDisclosure,
  useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -15,6 +16,7 @@ import Pagination from "../../Components/Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import { formatDate } from "../../Components/Functions/UTCConvertor";
+import InvestorComment from "./InvestorComment";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";

 const DeletionRequest = () => {
@@ -28,6 +30,12 @@ const DeletionRequest = () => {
  const [mouseEntered, setMouseEntered] = useState(false);
  const [mouseEnteredId, setMouseEnteredId] = useState("");

+  const {
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onClose: onClose,
+  } = useDisclosure();
+
  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
@@ -41,7 +49,7 @@ const DeletionRequest = () => {
  // ====================================================[Table Filter]================================================================
  const filteredData = deleteRequest.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.Distribution;
+    const name = item.firstName;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

@@ -60,12 +68,13 @@ const DeletionRequest = () => {
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
-    "Date",
-    "Distribution Amount",
-    "Charges (USD)",
-    "Year",
-    "Quater",
-    "Amount",
+    "Request On",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "Status"
  ];

  const extractedArray = filteredData?.map((item, index) => ({
@@ -81,7 +90,7 @@ const DeletionRequest = () => {
        {index + 1}.
      </Text>
    ),
-    "Date": (
+    "Request On": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -92,18 +101,18 @@ const DeletionRequest = () => {
        {formatDate(item.date)}
      </Text>
    ),
-    "Distribution Amount": (
+    "Client ID": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"gray.600"}
-        className="d-flex align-items-center web-text-small"
+        className="d-flex align-items-center  web-text-small"
        fontWeight={'500'}
      >
-        {item.Distribution}
+        {item.clientId}
      </Text>
    ),
-    "Charges (USD)": (
+    "First Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -111,11 +120,11 @@ const DeletionRequest = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.charge}
+        {item.firstName}
        {/* {formatDate(item.charge)} */}
      </Text>
    ),
-    Year: (
+    "Last Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -123,30 +132,41 @@ const DeletionRequest = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.year}
+        {item.lastName}
      </Text>
    ),
-    Quater: (
-      <Text
+    "Country": (
+      <Text 
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.quater}
+        {item.country}
      </Text>
    ),
-
-    Amount: (
-      <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.amount}
+        {item.phoneNumber}
+      </Text>
+    ),
+    "Status": (
+      <Text 
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        cursor={"pointer"}
+        onClick={onOpen}
+      >
+        <Badge ms={1} p={1} px={2} colorScheme="green" fontWeight={'600'}>Review</Badge>
      </Text>
    ),
  }));
@@ -213,6 +233,10 @@ const DeletionRequest = () => {
        alertHandler={handleDelete}
        isLoading={isLoading}
      />
+      <InvestorComment
+        isOpen={isOpen}
+        onClose={onClose}
+      />
    </Box>
  );
 };
--- a/src/Pages/AccountDeletion/InvestorComment.jsx
+++ b/src/Pages/AccountDeletion/InvestorComment.jsx
@@ -0,0 +1,85 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Textarea,
+} from "@chakra-ui/react";
+import React from "react";
+
+const InvestorComment = ({ isOpen, onClose }) => {
+  return (
+    <div>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"md"}></ModalHeader>
+          <ModalCloseButton />
+          <Box as="form">
+            <ModalBody>
+              <FormControl mb={5}>
+                <FormLabel fontSize="sm">Investor Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="fileName"
+                  // {...register("fileName")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"The amount of investment is not updated... "}
+                  rounded={"md"}
+                  resize={"none"}
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Admin Commment</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"}
+                />
+              </FormControl>
+            </ModalBody>
+            <ModalFooter pb={8}>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Reject
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                fontWeight={500}
+              >
+                Approve
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};
+
+export default InvestorComment;
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -24,7 +24,6 @@ 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";
-import { useGetDrawalRequestQuery } from "../../../Services/drawal.request.service";

 const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];

@@ -45,13 +44,7 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
  const fileredData = requestData?.find((item)=> item?.id === id)
  console.log(fileredData);

-  const {
-    data,
-    isLoading: drawalRequestLoading,
-    error,
-  } = useGetDrawalRequestQuery();

-  console.log(data?.data?.rows);

  const [ updateDepositRequest ] = useUpdateDepositRequestMutation()

@@ -114,10 +107,10 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
    setFile(selectedFile);
  };

-  // const { data, isLoading } = 
-  // (id, {
-  //   skip: !id,
-  // });
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });

  useEffect(() => {
    if (data) {
--- a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
@@ -101,10 +101,10 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
  }

  return (
-    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
      <ModalOverlay />
      <ModalContent pb={4}>
-        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalHeader fontSize={"md"}>Investor Comment</ModalHeader>
        <ModalCloseButton />
        {isLoading ? (
          <FullscreenLoaders height={"50vh"} />
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -88,7 +88,7 @@ const InvestorDetails = () => {
    "Country", 
    "Phone Number",
    "E-mail ID",
-    "Investor Type",
+    "Investor Type", 
    "KYC Status",
    "Status",
    "Action",
--- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
@@ -146,6 +146,14 @@ const ProfileView = () => {
      section: "Personal Details",
      width: "32%",
    },
+    {
+      label: "App Notification",
+      value: foundObject?.IsAppNotificationEnabled === 1 ? "Yes" : "No",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+      width: "32%",
+    },
  ];

  const groupedFields = formFields.reduce((groups, field) => {
--- a/src/Pages/WithDrawal/DrawalRequest/PendingRequest.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/PendingRequest.jsx
@@ -18,12 +18,11 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import { formatDate } from "../../../Components/Functions/UTCConvertor";
 import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
-import DrawalRequestApprove from "./DrawalRequestApprove";
 import DrawalRequestReject from "./DrawalRequestReject";
 import { useGetDrawalRequestQuery } from "../../../Services/drawal.request.service";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-import NormalTable from "../../../Components/DataTable/NormalTable";
-// import DrawalRequestApprove from "./DrawalRequestApprove";
+import NormalTable from "../../../Components/DataTable/NormalTable"
+import DrawalRequestApprove from "./DrawalRequestApprove";

 const PendingRequest = () => {
  const toast = useToast();
--- a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
+++ b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
@@ -12,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
@@ -20,28 +20,42 @@ import { formatDate } from "../../../Components/Functions/UTCConvertor";
 import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
 import ConfirmModal from "./ConfirmModal";
 import RejectModal from "./RejectModal";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { useGetDepositHistoryQuery } from "../../../Services/deposit.request.service";
+import { useGetDrawalHistoryQuery } from "../../../Services/drawal.request.service";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";

 const ViewHistory = () => {
  const toast = useToast();
  const { slideFromRight, viewHistory, setViewHistory } =
    useContext(GlobalStateContext);
-  const [searchTerm, setSearchTerm] = useState(""); 
+  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 {
+  //   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: drawalHistoryLoading,
+  } = useGetDrawalHistoryQuery({ page: currentPage, size: pageSize });
+
+  console.log(data?.data?.rows);

  useEffect(() => {
    // Simulate loading
@@ -54,9 +68,9 @@ const ViewHistory = () => {
  }, []);

  // ====================================================[Table Filter]================================================================
-  const filteredData = viewHistory.filter((item) => {
+  const filteredData = data?.data?.rows.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.clientId;
+    const name = item.firstName;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

@@ -86,116 +100,115 @@ const ViewHistory = () => {
    "Amount in Investor currency",
    "Status",
  ];
-  

-  const [extractedArray, setExtractedArray] = useState(
-    filteredData?.map((item, index) => ({
-      // 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"
-        >
-          {index + 1}
+  const extractedArray = filteredData?.map((item, index) => ({
+    // 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"
+      >
+        {index + 1}
+      </Text>
+    ),
+    Date: (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item?.createdAt)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"50px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.firstName}
        </Text>
-      ),
-      "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}
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"50px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.lastName}
        </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.clientId}
+      </Box>
+    ),
+    Country: (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.countryName}
        </Text>
-      ),
-      "First Name": (
-        <Box isTruncated={true} w={'50px'}>
-          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            {item.firstName}
-          </Text>
-        </Box>
-      ),
-      "Last Name": (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.lastName}
-          </Text>
-        </Box>
-      ),
-      Country: (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.country}
-          </Text>
-        </Box>
-      ),
-      "Phone Number": (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.phoneNumber}
-          </Text>
-        </Box>
-      ),
-      Currency: (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            <Badge px={2} py={1}>{item.currency}</Badge>
-          </Text>
-        </Box>
-      ),
-      "Withdrawal Amount": (
-        <Box w={"50px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.withDrawalAmount}
-          </Text>
-        </Box>
-      ),
-      "Amount in Investor currency": (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item.amountcurrency}
-          </Text>
-        </Box>
-      ),
-      Status: (
-        <Box w={"70px"} isTruncated={true}>
-          <Text
-            // onClick={() => {
-            //   setActionId(item.id);
-            //   if (item.status === "Approved") {
-            //     onConfirmOpen();
-            //   } else {
-            //     onRejectOpen();
-            //   }
-            // }}
-            as={"span"}
-            color={item.status === "Approved" ? "green" : "red"}
-          >
-            {item.status}
-          </Text>
-        </Box>
-      ),
-    }))
-  );
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    Currency: (
+      <Box w={"50px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+         <Badge ms={1} colorScheme="green">
+            {item.currencyCode}
+          </Badge>
+        </Text>
+      </Box>
+    ),
+    "Withdrawal Amount": (
+      <Box w={"50px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.USDAmount}
+        </Text>
+      </Box>
+    ),
+    "Amount in Investor currency": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.investorAmount}
+        </Text>
+      </Box>
+    ),
+    Status: (
+      <Box w={"70px"} isTruncated={true}>
+        <Text
+          // onClick={() => {
+          //   setActionId(item.id);
+          //   if (item.status === "Approved") {
+          //     onConfirmOpen();
+          //   } else {
+          //     onRejectOpen();
+          //   }
+          // }}
+          as={"span"}
+          color={item.transactionStatus === "Approved" ? "green" : "red"}
+        >
+          {item.transactionStatus}
+        </Text>
+      </Box>
+    ),
+  }));

  const handleDelete = () => {
    const updatedSponsors = sponser.filter(
@@ -205,14 +218,14 @@ const ViewHistory = () => {
    setTimeout(() => {
      setSponser(updatedSponsors);
      setDeleteAlert(false);
-      setIsLoading(false); 
+      setIsLoading(false);
    }, 100);
    setIsLoading(true);
  };

  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
-      <ConfirmModal
+      {/* <ConfirmModal
        isOpen={isConfirmOpen}
        onClose={onConfirmClose}
        // firstField={firstField}
@@ -220,7 +233,7 @@ const ViewHistory = () => {
      <RejectModal
        isOpen={isRejectOpen}
        onClose={onRejectClose}
-      />
+      /> */}
      <Box bg="white.500">
        <HStack
          display={"flex"}
@@ -242,12 +255,19 @@ const ViewHistory = () => {
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <HStack display={"flex"} alignItems={"center"}>
-            <Pagination totalItems={10} />
+            <Pagination
+              isLoading={drawalHistoryLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
          </HStack>
        </HStack>
      </Box>

-      <DataTable
+      <NormalTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -87,9 +87,9 @@ export const RouteLink = [

  // ===============[ Deletion]===============
  // { path: "/deletion-request", Component: DeletionRequest },
-  { path: "/deletion-request", Component: UnderConstruction },
+  { path: "/deletion-request", Component: DeletionRequest },
  // { path: "/deletion-history", Component: DeletionHistory },
-  { path: "/deletion-history", Component: UnderConstruction },
+  { path: "/deletion-history", Component: DeletionHistory },

  // ===============[ Admin]===============
  // { path: "/bank-investor", Component: BankInvestor },
--- a/src/Services/drawal.request.service.js
+++ b/src/Services/drawal.request.service.js
@@ -39,10 +39,10 @@ export const drawalRequest = createApi({
    //   invalidatesTags: ["getDepositRequest", "getDepositHistory"],
    // }),

-    // getDepositHistory: builder.query({
-    //   query: () => `/deposit/admin/history`,
-    //   providesTags: ["getDepositHistory"],
-    // }),
+    getDrawalHistory: builder.query({
+      query: () => `/withdrawal/admin/history`,
+      providesTags: ["getDrawalHistory"],
+    }),
  }),
 });

@@ -50,4 +50,5 @@ export const drawalRequest = createApi({
 export const {
  useGetDrawalRequestQuery,
  useUpdateDrawalRequestMutation,
+  useGetDrawalHistoryQuery
 } = drawalRequest;