156 lines
7.3 KiB
JavaScript
156 lines
7.3 KiB
JavaScript
import { Box, HStack, Icon, position, Text, VStack } from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import { HiOutlineChartSquareBar } from 'react-icons/hi'
|
|
import { RiMoneyDollarBoxLine } from 'react-icons/ri'
|
|
import { TbTransactionDollar } from 'react-icons/tb'
|
|
import { VscSymbolClass } from 'react-icons/vsc'
|
|
import { TABLE_PAGINATION } from '../Constants/Paginations'
|
|
import FullscreenLoaders from '../Components/Loaders/FullscreenLoaders'
|
|
import { useGetIOprepopulateDataQuery, useGetIOsQuery } from '../Services/io.service'
|
|
import { useGetInvestorsQuery } from '../Services/investor.details.service'
|
|
import DonutChart from '../Components/Doughnut/DonutChart'
|
|
import { GoDotFill } from "react-icons/go";
|
|
import { useNavigate } from 'react-router-dom'
|
|
import LineChart from '../Components/Doughnut/LineChart'
|
|
import { PiChartLineUpDuotone } from 'react-icons/pi'
|
|
import ApexChart from '../Components/Doughnut/ApexDonut'
|
|
import ApexLine from '../Components/Doughnut/ApexLine'
|
|
import ReactApexChart from 'react-apexcharts'
|
|
import { BsGraphUpArrow } from "react-icons/bs";
|
|
|
|
|
|
const Dashbaord = () => {
|
|
const navigate = useNavigate()
|
|
const { data, isLoading: isIoPreLoading } = useGetIOprepopulateDataQuery();
|
|
const { data: IO, isLoading: isIoLoading } = useGetIOsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
|
|
const { data: investorDetails, isInvestorLoading } = useGetInvestorsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
|
|
const sortArrayByStatus = () => {
|
|
const sortedArrays = {
|
|
open: [],
|
|
closed: [],
|
|
processing: [],
|
|
draft: []
|
|
};
|
|
|
|
IO?.data?.rows.forEach(item => {
|
|
const status = item.ioStatus?.statusAdmin;
|
|
if (status === 'Open') {
|
|
sortedArrays.open.push(item);
|
|
} else if (status === 'Closed') {
|
|
sortedArrays.closed.push(item);
|
|
} else if (status === 'Processing') {
|
|
sortedArrays.processing.push(item);
|
|
} else if (status === 'Draft') {
|
|
sortedArrays.draft.push(item);
|
|
}
|
|
});
|
|
return sortedArrays;
|
|
};
|
|
const statusData = sortArrayByStatus()
|
|
const chartData = {
|
|
labels: ['Draft', 'Open', 'Processing', 'Closed',],
|
|
backgroundColor: ['#3182ce', '#004118', '#D69E2E', '#E53E3E'],
|
|
values: [statusData?.draft?.length, statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
|
|
};
|
|
|
|
|
|
|
|
const series1= [{
|
|
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54]
|
|
}]
|
|
const options1= {
|
|
chart: {
|
|
type: 'line',
|
|
position:"absolute",
|
|
right:0,
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
|
|
<Box height={'100vh'} bg={'#fff'} roundedTop={0} pt={5} overflowX={"hidden"}>
|
|
<Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
|
|
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#004118"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#f5f8f6'} flexDirection={'column'} alignItems={'start'} >
|
|
<Icon left={"10px"} bg={'#004118'} rounded={9} p={2} color={"#fff"} as={TbTransactionDollar} mb={6} boxSize={12} />
|
|
<Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investors</Text>
|
|
<Text as={'span'} fontSize={'32px'} fontWeight={600}>{investorDetails?.data?.totalItems}</Text>
|
|
<Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
|
|
{/* <ReactApexChart position={'absolute'} right={6} bottom={6} options={options1} series={series1} type="line" height={35} width={100} /> */}
|
|
</Box>
|
|
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
|
|
<Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar} mb={6} boxSize={12} />
|
|
<Text as={'span'} fontSize={'xs'} fontWeight={500}>Total IO</Text>
|
|
<Text as={'span'} fontSize={'32px'} fontWeight={600}>{IO?.data?.totalItems}</Text>
|
|
<Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
|
|
</Box>
|
|
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
|
|
<Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
|
|
<Text as={'span'} fontSize={'xs'} fontWeight={500}>Total sponors</Text>
|
|
<Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.sponsor?.length}</Text>
|
|
<Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
|
|
</Box>
|
|
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
|
|
<Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
|
|
<Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investment Type</Text>
|
|
<Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.investmentType?.length}</Text>
|
|
<Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
|
|
</Box>
|
|
</Box>
|
|
<Box h={'70%'} w={"100%"} display={'flex'} pe={4} mt={2}>
|
|
<Box w={'60%'} h={'100%'} p={4} pe={6} pt={1} >
|
|
<Box position={'relative'} h={'100%'} boxShadow={'lg'} display={'flex'} justifyContent={'center'} rounded={'xl'} p={5} ps={0} pe={0}>
|
|
{/* <Text position={'absolute'} top={0} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text> */}
|
|
{/* <LineChart /> */}
|
|
<ApexLine/>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box boxShadow={'lg'} position={"relative"} bg={'#fff'} rounded={'xl'} w={'40%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
|
|
<Text as={'span'} fontSize={'sm'}>IO Status</Text>
|
|
<Box display={'flex'} w={'100%'} h={'100%'} alignItems={'center'} justifyContent={'space-around'} >
|
|
{/* <Box display={'flex'} w={'70%'} alignItems={'center'} h={325} p={6}> */}
|
|
{/* <DonutChart data={chartData} /> */}
|
|
|
|
<ApexChart data={chartData} />
|
|
{/* </Box> */}
|
|
<VStack alignItems={'start'} justifyContent={'center'} flexWrap={'wrap'}>
|
|
{chartData?.labels?.map((item, index) => <Text key={index} as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'sm'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={30} />{item}</Text>)}
|
|
</VStack>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Dashbaord |