pagination updat

This commit is contained in:
2024-08-02 13:00:11 +05:30
parent 6cebe90d0d
commit 5077bdbdd0
11 changed files with 257 additions and 155 deletions

View File

@@ -1,20 +1,50 @@
import React from "react";
import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react";
import {
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
Skeleton,
TableCaption,
Tfoot,
} from "@chakra-ui/react";
import EmptySearchList from "../EmptySearchList";
const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
const DataTable = ({
data,
isLoading,
tableHeadRow,
emptyMessage,
centered,
}) => {
const columnWidth =
data && data[0]
? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
: "auto";
return (
<TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
{data?.length === 0 ? (
<EmptySearchList message={emptyMessage} />
) : (
<Table size="sm">
<TableCaption>Rubix v1.0.0</TableCaption>
<Thead backgroundColor="purple.50">
<Table size="sm">
<TableCaption>Tanami v1.0.0</TableCaption>
<Thead backgroundColor="gray.50">
<Tr>
{tableHeadRow.map((heading, index) => (
<Th key={index} p={3} w={columnWidth}>
<Th
width={'fit-content'}
textAlign={
tableHeadRow.length - 1 === index || centered
? "center"
: "left"
}
key={index}
p={3}
w={columnWidth}
>
{isLoading ? <Skeleton height="20px" /> : heading}
{/* {heading} */}
</Th>
@@ -26,7 +56,16 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
? Array.from({ length: 12 }).map((_, index) => (
<Tr key={index}>
{tableHeadRow.map((_, i) => (
<Td key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" w={columnWidth}>
<Td
width={'fit-content'}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
w={columnWidth}
>
<Skeleton height="20px" mb={1} mt={1} />
</Td>
))}
@@ -35,7 +74,20 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
: data?.map((item, index) => (
<Tr key={index}>
{tableHeadRow.map((heading, i) => (
<Td color={"gray.600"} key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" >
<Td
textAlign={
tableHeadRow?.length - 1 === i || centered
? "center"
: "left"
}
color={"gray.600"}
key={i}
style={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
className="web-text-small"
>
{item[heading]}
</Td>
))}

View File

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import { Select, HStack, Text, Box, IconButton } from '@chakra-ui/react';
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
const [pageSize, setPageSize] = useState(itemsPerPageOptions[0]);
const [currentPage, setCurrentPage] = useState(1);
const Pagination = ({ pageSize, setPageSize, totalItems,isLoading, setCurrentPage, currentPage }) => {
// const [] = useState(itemsPerPageOptions[0]);
const totalPages = Math.ceil(totalItems / pageSize);
@@ -34,8 +34,8 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
<HStack d="flex" justifyContent="flex-end" alignItems="center">
{/* <Text className='web-text-small'>Tanami v0.1</Text> */}
<HStack w={150}>
{/* <Select
<HStack>
<Select
className="pointer web-text-small"
width={"90px"}
@@ -44,12 +44,12 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
value={pageSize}
onChange={handlePageSizeChange}
>
{itemsPerPageOptions.map((size) => (
{[ 15, 20, 30]?.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</Select> */}
</Select>
<IconButton
mt={1}
size={'sm'}
@@ -59,8 +59,8 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
className="link pointer"
isDisabled={currentPage === 1}
/>
<Text className="web-text-medium" as={"span"}>
{displayRange.start} - {displayRange.end} of {totalItems}
<Text w={"81px"} display={'flex'} justifyContent={'center'} className="web-text-medium" as={"span"}>
{isLoading ? "0": displayRange?.start} - {isLoading ? "00" :displayRange?.end} of {isLoading ? "00":totalItems}
</Text>
<IconButton
mt={1}

View File

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

View File

@@ -19,7 +19,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 { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
@@ -54,9 +54,9 @@ const ViewIOTable = () => {
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
// ===============================[ Paginations ]
// ===============================[ Paginations ]
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(1);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
// ===============================[ RTK Api calls ]
const {
@@ -288,7 +288,10 @@ const ViewIOTable = () => {
<option value="Exited">Exited</option>
<option value="Closed">Closed</option>
</Select>
<Pagination totalItems={10} />
<Pagination isLoading={isLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={data?.data?.totalItems} />
{/* <Link to={"/create-io"}>
<Button
@@ -307,7 +310,7 @@ const ViewIOTable = () => {
</HStack>
</Box>
<DataTable
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}

View File

@@ -20,7 +20,7 @@ import {
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState, useRef } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import DataTable from "../../../Components/DataTable/DataTable";
import NormalTable from "../../../Components/DataTable/NormalTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
@@ -37,6 +37,7 @@ 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";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -59,11 +60,13 @@ const InvestorDetails = () => {
} = useDisclosure();
const btnRef = React.useRef();
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
const {
data: investorDetails,
isLoading: investorDetailsLoading,
error,
} = useGetInvestorsQuery({ page: 1, size: 10 });
} = useGetInvestorsQuery({ page: currentPage, size: pageSize });
console.log(investorDetails);
@@ -192,11 +195,11 @@ const InvestorDetails = () => {
<Badge
fontWeight={"500"}
textTransform={"none"}
color={item.kycStatus === "Completed" ? "blue" : "red"}
colorScheme={item.kycStatus ? "blue" : "red"}
px={2}
py={0.5}
>
{item.KYCStatus}
{item.KYCStatus ? "Completed" : "Not complete"}
</Badge>
</Box>
),
@@ -209,7 +212,7 @@ const InvestorDetails = () => {
/>
),
Action: (
<Box display={"flex"} justifyContent={"space-between"} gap={2}>
<Box display={"flex"} justifyContent={"center"} gap={2}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
@@ -284,35 +287,7 @@ const InvestorDetails = () => {
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" selected disabled hidden>
Status
</option>
<option value="all">All</option>
<option value="ban">Ban</option>
<option value="unban">UnBan</option>
</Select>
<Select
focusBorderColor="green.500"
size={"sm"}
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" selected disabled hidden>
Status
</option>
<option value="all">All</option>
<option value="ban">Ban</option>
<option value="unban">UnBan</option>
</Select>
<Select
focusBorderColor="green.500"
size={"sm"}
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" selected disabled hidden>
<option value="" defaultValue={"all"} disabled hidden>
Status
</option>
@@ -327,7 +302,37 @@ const InvestorDetails = () => {
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" selected disabled hidden>
<option value="" defaultValue={"all"} disabled hidden>
Status
</option>
<option value="all">All</option>
<option value="ban">Ban</option>
<option value="unban">UnBan</option>
</Select>
<Select
focusBorderColor="green.500"
size={"sm"}
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" defaultValue={"all"} disabled hidden>
Status
</option>
<option value="all">All</option>
<option value="ban">Ban</option>
<option value="unban">UnBan</option>
</Select>
<Select
focusBorderColor="green.500"
size={"sm"}
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" defaultValue={"all"} disabled hidden>
KYC Status
</option>
<option value="all">All</option>
@@ -341,7 +346,7 @@ const InvestorDetails = () => {
fontSize={"xs"}
cursor={"pointer"}
>
<option value="" selected disabled hidden>
<option value="" defaultValue={"all"} disabled hidden>
Country
</option>
<option value="behrain">Behrain</option>
@@ -350,7 +355,15 @@ const InvestorDetails = () => {
<option value="saudi arabia">Saudi arabia</option>
<option value="united arab emirates">United arab emirates</option>
</Select>
<Pagination totalItems={10} />
<Pagination
isLoading={investorDetailsLoading}
pageSize={pageSize}
setPageSize={setPageSize}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalItems={investorDetails?.data?.totalItems}
/>
</HStack>
</HStack>
<InvestmentDetailsEdit
@@ -361,11 +374,12 @@ const InvestorDetails = () => {
/>
</Box>
<DataTable
<NormalTable
// centered={true}
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
isLoading={investorDetailsLoading}
viewActionId={actionId}
setViewActionId={setActionId}
setMouseEnteredId={setMouseEnteredId}

View File

@@ -19,6 +19,8 @@ import FormInputView from "../../../Components/FormInputView";
import ViewInvestorDetails from "./ViewInvestorDetails";
import { LuWallet } from "react-icons/lu";
import Transaction from "./Transaction";
import FullscreenLoaders from '../../../Components/Loaders/FullscreenLoaders'
import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";
const ProfileView = () => {
const navigate = useNavigate();
@@ -27,95 +29,113 @@ const ProfileView = () => {
const { reset } = useForm(); // assuming react-hook-form
const id = params?.id;
const foundObject = InvestorDetails.find(
(item) => item?.id.toString() === id.toString()
);
if (!foundObject) {
return <Box>Loading...</Box>;
}
const { data, isLoading, errors } = useGetInvestorsDetailsByIdQuery(id, {
skip: !id,
});
console.log(data?.data);
const foundObject = data?.data;
const formFields = [
{
label: "Client ID",
value: foundObject.clientId,
value: foundObject?.id,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Full Name",
value: foundObject.fullName,
label: "First Name",
value: foundObject?.principal?.firstName,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Last Name",
value: foundObject?.principal?.lastName,
type: "text",
isRequired: true,
section: "Personal Details",
width: "32%",
},
{
label: "E-mail ID",
value: foundObject.emailID,
value: foundObject?.principal?.emailAddress,
type: "text",
isRequired: true,
arabic: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Phone Number",
value: foundObject.phoneNumber,
type: "text",
value: foundObject?.principal?.mobileNumber,
type: "tel",
isRequired: true,
arabic: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Address",
value: foundObject.address,
label: "Country",
value: foundObject?.country?.countryName,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Bank Name",
value: foundObject.bankName,
label: "Investment type",
value: foundObject?.investor_type?.investorTypeName,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Branch Address",
value: foundObject.branchAddress,
label: "Investor limit",
value: foundObject?.investorLimit,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "IBAN",
value: foundObject.iban,
label: "KYC Status",
value: foundObject?.KYCStatus ? "Completed" : "Not complete",
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "SWIFT/BIC code",
value: foundObject.swiftCode,
label: "Status",
value: foundObject?.userStatus ? "Unban" : "Ban",
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "Reference ID",
value: foundObject.referenceID,
label: "Default language",
value: foundObject?.defaultLanguage_xid === 1 ? "English" : "Arabic" ,
type: "text",
isRequired: true,
section: "",
section: "Personal Details",
width: "32%",
},
{
label: "App Notification",
value: foundObject?.IsAppNotificationEnabled === 1 ? "Yes" : "No" ,
type: "text",
isRequired: true,
section: "Personal Details",
width: "32%",
},
];
@@ -130,6 +150,7 @@ const ProfileView = () => {
}, {});
return (
isLoading? <FullscreenLoaders />:
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
<Box
pt={2}

View File

@@ -208,9 +208,7 @@ const ExchangeRate = () => {
onChange={(e) => setSearchTerm(e.target.value)}
/>
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack>
</HStack>
</Box>

View File

@@ -8,8 +8,9 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "./AddInvestmentType";
import DataTable from "../../../Components/DataTable/DataTable";
import NormalTable from "../../../Components/DataTable/NormalTable";
import {useDeleteInvestmentTypeMutation, useGetInvestmentTypesQuery,} from "../../../Services/investment.type.service";
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -30,7 +31,12 @@ const InvestmentType = () => {
useContext(GlobalStateContext);
const [deleteInvestmentType] = useDeleteInvestmentTypeMutation();
const {data: investmentTypes,isLoading: investmentTypesLoading,error,} = useGetInvestmentTypesQuery({ page: 1, size: 10 });
// =========================== [Use State] =============================
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
const {data: investmentTypes,isLoading: investmentTypesLoading,error,} = useGetInvestmentTypesQuery({ page: currentPage, size: pageSize });
console.log(investmentTypes?.data?.rows);
@@ -63,7 +69,7 @@ const InvestmentType = () => {
// ==================================================== [Table Setup] ================================================================
const tableHeadRow = [
"Sr.no",
// "Sr.no",
"Investment Type",
"Description",
"Status",
@@ -71,32 +77,44 @@ const InvestmentType = () => {
];
const extractedArray = filteredData?.map((item, index) => ({
"Sr.no": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{index + 1}
</Text>
),
// "Sr.no": (
// <Text
// justifyContent={slideFromRight ? "right" : "left"}
// as={"span"}
// color={"teal.900"}
// fontWeight={"500"}
// className="d-flex align-items-center web-text-small"
// >
// {index + 1}
// </Text>
// ),
"Investment Type": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
isTruncated={true}
className="d-flex align-items-center web-text-small"
>
{item.investmentTypeName}
</Text>
),
Description: (
<Text as={"span"} w={'400px'} isTruncated={true} color={"teal.900"} fontWeight={"500"}>
{item.note}
</Text>
<Text
as={"span"}
color={"teal.900"}
fontWeight={"500"}
maxWidth="750px" // Adjust width as needed
display="block" // Ensure block display for proper truncation
overflow="hidden"
isTruncated
textOverflow="ellipsis"
>
{item.note}
</Text>
),
Status: (
<Box isTruncated={true}>
@@ -224,9 +242,10 @@ const InvestmentType = () => {
<HStack display={"flex"} alignItems={"center"}>
{/* ==================== [Pagination] ===================== */}
{/* ====================[Pagination]===================== */}
<Pagination isLoading={investmentTypesLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={investmentTypes?.data?.totalItems} />
<Pagination totalItems={10} />
{/* ===================== [Add Button] ===================== */}
@@ -236,8 +255,9 @@ const InvestmentType = () => {
colorScheme={"forestGreen"}
rounded={"sm"}
size={"sm"}
fontSize={'xs'}
>
Add
Add Investment Type
</Button>
</Link>
</HStack>
@@ -246,7 +266,7 @@ const InvestmentType = () => {
{/* ======================== [Data Table] ======================= */}
<DataTable
<NormalTable
emptyMessage={`We don't have any Investment type `}
tableHeadRow={tableHeadRow}
data={extractedArray}

View File

@@ -1,7 +1,7 @@
import {Badge, Box,Button,HStack,Input,Text,Tooltip,useToast,} 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 { Link, Link as RouterLink } from "react-router-dom";
import {AddIcon,DeleteIcon,EditIcon,} from "@chakra-ui/icons";
import Pagination from "../../../Components/Pagination";
@@ -27,10 +27,13 @@ const Sponser = () => {
const navigate = useNavigate();
const toast = useToast();
// =========================== [Use State] =============================
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(false);
@@ -40,30 +43,12 @@ const Sponser = () => {
const [deleteSponser] = useDeleteSponserMutation();
const { sponser, setSponser, slideFromRight } = useContext(GlobalStateContext);
const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: 1, size: 20 });
// =========================== [Use State] =============================
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: currentPage, size: pageSize });
console.log(sponsors?.data?.rows);
// ========================= [Toggle ToastBox] ==========================
// const handleUpdateStatus = debounce(async (id) => {
// try {
// await toggleStatus({ id }).then((response) => {
// console.log(response);
// if (response?.data?.statusCode) {
// toast({
// render: () => <ToastBox message={response?.data?.message} />,
// });
// } else {
// toast({
// render: () => (
// <ToastBox message={"Something Went Wrong"} status={"error"} />
// ),
// });
// }
// });
// } catch (error) {}
// }, 300);
// console.log(sponsors?.data?.rows);
// ==============================[Table Filter]========================
@@ -71,7 +56,6 @@ const Sponser = () => {
const name = item.sponsorName;
const searchLower = searchTerm?.toLowerCase();
const nameMatches = name?.toLowerCase().includes(searchLower);
return nameMatches;
});
@@ -176,6 +160,8 @@ const Sponser = () => {
} catch (error) {}
};
console.log(isSponserLoading);
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
@@ -206,7 +192,7 @@ const Sponser = () => {
{/* ====================[Pagination]===================== */}
<Pagination totalItems={10} />
<Pagination isLoading={isSponserLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={sponsors?.data?.totalItems} />
{/* =====================[Add Button]===================== */}
@@ -218,7 +204,7 @@ const Sponser = () => {
fontSize={'xs'}
size={"sm"}
>
Add
Add Sponsor
</Button>
</Link>
</HStack>
@@ -227,7 +213,7 @@ const Sponser = () => {
{/* =================== [Data Table] ===================== */}
<DataTable
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}

View File

@@ -16,9 +16,17 @@ export const investorDetails = createApi({
`/investorDetails/admin?page=${page}&size=${size}`,
providesTags: ["getInvestors"],
}),
// =====[get investment details ]
getInvestorsDetailsById: builder.query({
query: (id) => `/investorDetails/admin/${id}`,
providesTags: ["getInvestors"],
}),
}),
});
// Export hooks for usage in functional components
export const { useGetInvestorsQuery } = investorDetails;
export const { useGetInvestorsQuery, useGetInvestorsDetailsByIdQuery } = investorDetails;

View File

@@ -205,7 +205,7 @@ export const ioService = createApi({
method: "PATCH",
body: data,
}),
invalidatesTags: ["getIOById"],
invalidatesTags: ["getIOById", 'getIO'],
}),