deposite table api

2024-08-05 17:58:01 +05:30
parent 5ca4dad151
commit d42cdf0a50
5 changed files with 92 additions and 34 deletions
--- 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}
--- 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">
--- 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
--- a/src/Services/deposit.request.service.js
+++ 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;
--- 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,
    ),
 });