pagination updat
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -208,9 +208,7 @@ const ExchangeRate = () => {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Pagination totalItems={10} />
|
||||
</HStack>
|
||||
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -205,7 +205,7 @@ export const ioService = createApi({
|
||||
method: "PATCH",
|
||||
body: data,
|
||||
}),
|
||||
invalidatesTags: ["getIOById"],
|
||||
invalidatesTags: ["getIOById", 'getIO'],
|
||||
}),
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user