Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

[update] - pagination on investor details

Browse Source
This commit is contained in:
Swapnil Bendal
2024-12-27 15:22:34 +05:30
parent 212f5d4d37
commit 9eca3ae9fc
3 changed files with 84 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/Pagination.jsx
View File

@@ -49,7 +49,7 @@ const Pagination = ({
value={pageSize}
onChange={handlePageSizeChange}
>
{[15, 20, 30]?.map((size) => (
{[15, 20, 30, 500]?.map((size) => (
<option key={size} value={size}>
{size}
</option>

3
src/Constants/Paginations.js
View File

@@ -1,2 +1,3 @@
export const TABLE_PAGINATION = { page: 1, size: 20 }
export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
export const INVESTOR_TABLE_PAGINATION = { page: 1, size: 500 }

168
src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
View File

@@ -1,5 +1,5 @@
import { ViewIcon } from "@chakra-ui/icons";
import {
Avatar,
Badge,
Box,
Button,
@@ -11,23 +11,21 @@ import {
useDisclosure,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState, useRef } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import NormalTable from "../../../Components/DataTable/NormalTable";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
ViewIcon,
} from "@chakra-ui/icons";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "../../Master/Sponser/AddSponser";
import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
import { useGetInvestorsQuery } from "../../../Services/investor.details.service";
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
import { exportToExcel, exportToExcelNew, generateSerialNumber } from "../../../Constants/Constants";
import React, { useContext, useEffect, useRef, useState } from "react";
import { LuFileSpreadsheet } from "react-icons/lu";
import { useNavigate } from "react-router-dom";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import NormalTable from "../../../Components/DataTable/NormalTable";
import Pagination from "../../../Components/Pagination";
import {
exportToExcelNew,
generateSerialNumber,
} from "../../../Constants/Constants";
import { INVESTOR_TABLE_PAGINATION } from "../../../Constants/Paginations";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { useGetInvestorsQuery } from "../../../Services/investor.details.service";
import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -49,10 +47,11 @@ const InvestorDetails = () => {
} = useDisclosure();
const btnRef = React.useRef();
// =========================== [Use State] =============================
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
// =========================== [Use State] =============================
const [pageSize, setPageSize] = useState(INVESTOR_TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(
INVESTOR_TABLE_PAGINATION?.page
);
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
@@ -73,20 +72,19 @@ const InvestorDetails = () => {
data: investorDetails,
isLoading: investorDetailsLoading,
error,
} = useGetInvestorsQuery({
page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search userStatus KYCStatus investorType_xid
search: debouncedSearchTerm,
userStatus: status,
KYCStatus: kyc,
country_xid: country
},
{
skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
}
);
} = useGetInvestorsQuery(
{
page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search userStatus KYCStatus investorType_xid
search: debouncedSearchTerm,
userStatus: status,
KYCStatus: kyc,
country_xid: country,
},
{
skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
}
);
useEffect(() => {
// Simulate loading
@@ -104,43 +102,41 @@ const InvestorDetails = () => {
"Client ID",
"First Name",
"Last Name",
"Country",
"Country",
"Phone Number",
"E-mail ID",
"Type",
"Type",
"KYC Status",
"Status",
"Action",
];
// ====================================================[Table Filter]================================================================
const exportInvestor = investorDetails?.data?.rows?.map((item, idx) => ({
"Id": parseInt(item?.id, 10) || item?.id, // Convert to integer, fallback to string if conversion fails
Id: parseInt(item?.id, 10) || item?.id, // Convert to integer, fallback to string if conversion fails
"Client ID": item?.clientReference_id, // This is likely a string
"First Name": item?.principal?.firstName,
"Last Name": item?.principal?.lastName,
"Country": item?.country?.countryName,
Country: item?.country?.countryName,
"Phone Number": item?.principal?.mobileNumber, // Skipping integer conversion, as this is likely a string
"E-mail ID": item?.principal?.emailAddress,
"Type": item?.investor_type?.investorTypeName,
"Status": item.ioStatus ? "Ban" : "Unban",
"KYC Status": item.KYCStatus ? "Completed" : "Not complete"
Type: item?.investor_type?.investorTypeName,
Status: item.ioStatus ? "Ban" : "Unban",
"KYC Status": item.KYCStatus ? "Completed" : "Not complete",
}));
const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
id: item?.id,
"Sr No": (
<Text
w={'24px'}
w={"24px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center fw-bold web-text-small"
>
{/* {item.id} */}
{generateSerialNumber(idx,currentPage, pageSize )}
{generateSerialNumber(idx, currentPage, pageSize)}
</Text>
),
"Client ID": (
@@ -148,7 +144,7 @@ const InvestorDetails = () => {
<Text as={"span"} color={"teal.900"}>
{item.clientReference_id}
</Text>
</Box>
</Box>
),
"First Name": (
<Box w={"auto"} isTruncated={true}>
@@ -185,39 +181,44 @@ const InvestorDetails = () => {
</Text>
</Box>
),
"Type": (
Type: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} >
<Badge color={"forestGreen.500"} variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
<Text as={"span"}>
<Badge
color={"forestGreen.500"}
variant={"ghost"}
fontWeight={"700"}
px={2}
py={0.5}
>
{item?.investor_type?.investorTypeName}
</Badge>
</Text>
</Box>
),
Status: (
<Box w={"auto"} isTruncated={true}>
<Badge
fontWeight={"700"}
textTransform={"none"}
colorScheme={item.ioStatus ? "red" : "green"}
px={2}
py={0.5}
>
{item.ioStatus ? "Ban" : "Unban"}
</Badge>
</Box>
<Box w={"auto"} isTruncated={true}>
<Badge
fontWeight={"700"}
textTransform={"none"}
colorScheme={item.ioStatus ? "red" : "green"}
px={2}
py={0.5}
>
{item.ioStatus ? "Ban" : "Unban"}
</Badge>
</Box>
),
"KYC Status": (
<Box w={"auto"} display={'flex'} alignItems={'center'} isTruncated={true}>
<Box w={"auto"} display={"flex"} alignItems={"center"} isTruncated={true}>
<Text
as={'span'}
as={"span"}
fontWeight={"700"}
textTransform={"none"}
color={item?.KYCStatus === true ? "green" : "yellow.500"}
px={2}
py={0.5}
variant={'solid'}
variant={"solid"}
>
{/* {item.KYCStatus ? "Completed" : "Not complete"} */}
{item?.KYCStatus === true ? "Completed" : "NotCompleted"}
@@ -235,7 +236,7 @@ const InvestorDetails = () => {
placement="top"
>
<Button
isDisabled={item.ioStatus}
isDisabled={item.ioStatus}
onClick={() => {
navigate(`/investor-details/profile-view/${item.id}`);
}}
@@ -266,7 +267,6 @@ const InvestorDetails = () => {
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
@@ -346,35 +346,29 @@ const InvestorDetails = () => {
</Select>
<Pagination
isLoading={investorDetailsLoading}
isLoading={investorDetailsLoading}
pageSize={pageSize}
setPageSize={setPageSize}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalItems={investorDetails?.data?.totalItems}
/>
</HStack>
<Button
onClick={() =>
exportToExcelNew(exportInvestor, "Investor Details")
}
leftIcon={<LuFileSpreadsheet />}
colorScheme="forestGreen"
size={"sm"}
variant={"outline"}
rounded={"sm"}
fontSize={"xs"}
w={100}
me={2}
isDisabled={exportInvestor?.length === 0}
>
Export xls
</Button>
onClick={() => exportToExcelNew(exportInvestor, "Investor Details")}
leftIcon={<LuFileSpreadsheet />}
colorScheme="forestGreen"
size={"sm"}
variant={"outline"}
rounded={"sm"}
fontSize={"xs"}
w={100}
me={2}
isDisabled={exportInvestor?.length === 0}
>
Export xls
</Button>
</HStack>
<InvestmentDetailsEdit
id={actionId}