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} value={pageSize}
onChange={handlePageSizeChange} onChange={handlePageSizeChange}
> >
{[15, 20, 30]?.map((size) => ( {[15, 20, 30, 500]?.map((size) => (
<option key={size} value={size}> <option key={size} value={size}>
{size} {size}
</option> </option>

3
src/Constants/Paginations.js
View File

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