From d42cdf0a507278d533b82909dcc9635eb73386b5 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:58:01 +0530
Subject: [PATCH] deposite table api

---
 .../Deposit/DepositRequest/DepositRequest.jsx | 72 ++++++++++++-------
 .../DepositRequest/DepositRequestApprove.jsx  | 17 +++--
 .../InvestorDetails/InvestorDetails.jsx       |  2 +-
 src/Services/deposit.request.service.js       | 32 +++++++++
 src/Store/Store.js                            |  3 +
 5 files changed, 92 insertions(+), 34 deletions(-)
 create mode 100644 src/Services/deposit.request.service.js

diff --git a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
index fff3b23..edba71b 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
@@ -32,6 +32,9 @@ import DataTable from "../../../Components/DataTable/DataTable";
 import DepositRequestApprove from "./DepositRequestApprove";
 import DepositRequestReject from "./DepositRequestReject";
 import NormalTable from "../../../Components/DataTable/NormalTable";
+import { useGetDepositRequestQuery } from "../../../Services/deposit.request.service";
+import { current } from "@reduxjs/toolkit";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -57,6 +60,17 @@ const DepositRequest = () => {
     onClose: onRejectClose,
   } = useDisclosure();
 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const {
+    data,
+    isLoading: depositRequestLoading,
+    error,
+  } = useGetDepositRequestQuery({ page: currentPage, size: pageSize });
+
+  console.log(data?.data?.rows);
+
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -70,13 +84,13 @@ const DepositRequest = () => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     // "Sr.no",
-    "Deposit Date",
     "Client ID",
     "First Name",
     "Last Name",
     "Country",
     "Phone Number",
     "Amount in Investor currency",
+    "Deposit Date",
     "Action",
   ];
 
@@ -94,9 +108,9 @@ const DepositRequest = () => {
   }, 300);
 
   // ====================================================[Table Filter]================================================================
-  const filteredData = depositRequest.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);
 
@@ -112,7 +126,7 @@ const DepositRequest = () => {
     return nameMatches;
   });
 
-  const [extractedArray, setExtractedArray] = useState(
+  const extractedArray=
     filteredData?.map((item, index) => ({
       // id: item?.id,
       "Sr.no": (
@@ -127,18 +141,6 @@ const DepositRequest = () => {
           {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"}
@@ -148,44 +150,56 @@ const DepositRequest = () => {
           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={"70px"}>
           <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={"100px"} 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={"70px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
-            {item.amountcurrency}
+            {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={"space-around"} gap={2}>
           <Tooltip
@@ -235,7 +249,7 @@ const DepositRequest = () => {
         </Box>
       ),
     }))
-  );
+
 
   const handleDelete = () => {
     const IOtype = investmentType.filter(
@@ -274,15 +288,21 @@ const DepositRequest = () => {
           />
 
           <HStack display={"flex"} alignItems={"center"}>
-            <Pagination totalItems={10} />
+            <Pagination
+              isLoading={depositRequestLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={depositRequest?.data?.totalItems}
+            />
           </HStack>
         </HStack>
       </Box>
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Investment type `}
         tableHeadRow={tableHeadRow}
-        setData={setExtractedArray}
         data={extractedArray}
         isLoading={isLoading}
         viewActionId={actionId}
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
index 5aff06e..888d886 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -12,6 +12,7 @@ import {
     ModalHeader,
     ModalOverlay,
     Text,
+    Textarea,
     useDisclosure,
   } from "@chakra-ui/react";
   import React from "react";
@@ -63,7 +64,7 @@ import {
           <Box as="form" onSubmit={handleSubmit(onSubmit)}>
             <ModalBody>
               <FormControl mb={4}>
-                <FormLabel fontSize="sm">Deposit Amount</FormLabel>
+                <FormLabel fontSize="sm">Deposit Amount (SAR)</FormLabel>
                 <Input
                 focusBorderColor='green.400'
                   name="fileName"
@@ -76,15 +77,16 @@ import {
                 />
               </FormControl>
               <FormControl mb={4}>
-                <FormLabel fontSize="sm">Fees</FormLabel>
+                <FormLabel fontSize="sm">Upload Supporting*</FormLabel>
                 <Input 
                 focusBorderColor='green.400'
                   name="fileName"
                   {...register("fileName")}
                   fontSize="sm"
-                  type="text"
+                  type="file"
                   size="sm"
                   placeholder={"$100,000"}
+                  className="form-control"
                 />
                 {errors.fees && (
                   <Text fontSize="xs" color="red">
@@ -93,15 +95,16 @@ import {
                 )}
               </FormControl>
               <FormControl mb={4}>
-                <FormLabel fontSize="sm">Total Amount</FormLabel>
-                <Input 
+                <FormLabel fontSize="sm">Comments</FormLabel>
+                <Textarea  rows={5} 
                 focusBorderColor='green.400'
                   name="fileName"
                   {...register("fileName")}
                   fontSize="sm"
-                  type="text"
+                  type="textarea"
                   size="sm"
-                  placeholder={"$100,000"}
+                  placeholder={"Enter your comments...."}
+                  resize={'none'}
                 />
                 {errors.totalAmount && (
                   <Text fontSize="xs" color="red">
diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 8006148..a1f903f 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -68,7 +68,7 @@ const InvestorDetails = () => {
     error,
   } = useGetInvestorsQuery({ page: currentPage, size: pageSize });
 
-  console.log(investorDetails);
+  console.log(investorDetails); 
 
   useEffect(() => {
     // Simulate loading
diff --git a/src/Services/deposit.request.service.js b/src/Services/deposit.request.service.js
new file mode 100644
index 0000000..6a44aa2
--- /dev/null
+++ b/src/Services/deposit.request.service.js
@@ -0,0 +1,32 @@
+// investorDetails.service.js
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { api } from "./api.service";
+
+const baseUrl = api?.defaults.baseURL;
+
+// Define a service using a base URL and expected endpoints
+export const depositRequest = createApi({
+  reducerPath: "depositRequest",
+  baseQuery: fetchBaseQuery({ baseUrl }),
+  tagTypes: ["getDepositRequest"],
+  endpoints: (builder) => ({
+
+    getDepositRequest: builder.query({
+      query: ({ page, size }) =>
+        `/deposit/admin/getAll`,
+      providesTags: ["getDepositRequest"],
+    }),
+
+
+        // =====[get investment details ]
+        // getDepositRequestById: builder.query({
+        //   query: (id) => `/deposit/admin/getById/${id}`,
+        //   providesTags: ["getRequest"],
+        // }),
+    
+    
+  }),
+});
+
+// Export hooks for usage in functional components
+export const { useGetDepositRequestQuery } = depositRequest;
diff --git a/src/Store/Store.js b/src/Store/Store.js
index e0399f6..39a2f72 100644
--- a/src/Store/Store.js
+++ b/src/Store/Store.js
@@ -10,6 +10,7 @@ import { api } from "../Services/api.service";
 import { keyMerits } from "../Services/Key.merits.service";
 import { bankDetails } from "../Services/bank.details.service";
 import { contact } from "../Services/contact.service";
+import { depositRequest } from "../Services/deposit.request.service";
 
 export const store = configureStore({
   reducer: {
@@ -21,6 +22,7 @@ export const store = configureStore({
     [investorTransaction.reducerPath]: investorTransaction.reducer,
     [bankDetails.reducerPath]: bankDetails.reducer,
     [contact.reducerPath]: contact.reducer,
+    [depositRequest.reducerPath]: depositRequest.reducer,
     // Add other reducers as needed
   },
   middleware: (getDefaultMiddleware) =>
@@ -37,6 +39,7 @@ export const store = configureStore({
       investorTransaction.middleware,
       bankDetails.middleware,
       contact.middleware,
+      depositRequest.middleware,
     ),
 });