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

dashboard update

Browse Source
This commit is contained in:
Siddhesh More
2024-08-09 15:37:52 +05:30
parent 1de2710cd1
commit dce1a09f98
4 changed files with 112 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/Doughnut/DonutChart.jsx
View File

@@ -12,7 +12,7 @@ const DonutChart = ({ data, width = 300, height = 250 }) => {
{
label: 'My Dataset',
data: data.values,
backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
backgroundColor: [ '#3182ce', '#004118', '#D69E2E', '#E53E3E' ],
borderColor: ['#FFF'],
borderWidth: 1,
},

70
src/Components/Doughnut/LineChart.jsx Normal file
View File

@@ -0,0 +1,70 @@
// LineChart.jsx
import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale } from 'chart.js';
// Register the necessary components
ChartJS.register( Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale );
// Sample options for the chart
const options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += `${context.parsed.y}`;
}
return label;
}
}
}
}
};
const Utils = {
numbers: ({ count, min, max }) => Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min),
CHART_COLORS: {
red: 'rgba(255, 99, 132, 1)',
darkGreen: 'rgba(0, 65, 24, 1)' // Added color related to #004118
},
transparentize: (color, opacity) => {
// Use regex to replace the alpha value
return color.replace(/(rgba\(\d+, \d+, \d+, )\d+(\))/, `$1${opacity}$2`);
}
};
const LineChart = ({ width = 300, height = 250 }) => {
const data = {
labels: ['Bahrain', 'Kuwait', 'Oman', 'Qatar', 'Saudi Arabia', 'UAE', 'India'],
datasets: [
{
label: 'Exchange rate',
data: [45.9087, 23.8798, 99.9809, 65.8987, 65.8987, 34.9898, 32.8987],
borderColor: Utils.CHART_COLORS.darkGreen,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.darkGreen, 0.5),
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
}
]
};
console.log(data);
return (
<Line data={data} options={options} />
);
};
export default LineChart;

4
src/Layout/DefaultLayout.jsx
View File

@@ -387,7 +387,7 @@ const DashboardLayout = ({ isOnline }) => {
// onMouseOver={() => setIsDrawerOpen(true)}
// onMouseLeave={() => setIsDrawerOpen(false)}
style={{
width: isDrawerOpen || openDrawerClick ? 232 : 74,
width: isDrawerOpen || openDrawerClick ? 255 : 74,
transition: "width 0.3s ease-in-out", // Smooth transition for width change
// overflow: "hidden",
backgroundColor: "#0041180A",
@@ -631,7 +631,7 @@ const DashboardLayout = ({ isOnline }) => {
<main
className={`h-100 ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
style={{
width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 232 : 74}px)`,
width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 255 : 74}px)`,
transition: "width 0.3s ease-in-out",
}}

112
src/Pages/Dashbaord.jsx
View File

@@ -1,31 +1,24 @@
import { Box, HStack, Icon, Text, VStack } from '@chakra-ui/react'
import { Box, HStack, Icon, Text } 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 { useGetSponserMasterQuery } from '../Services/sponser.service'
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 { BiDotsHorizontal } from 'react-icons/bi'
import { CheckCircleIcon } from '@chakra-ui/icons'
import { GoDotFill } from "react-icons/go";
import { useNavigate } from 'react-router-dom'
import LineChart from '../Components/Doughnut/LineChart'
import { PiChartLineUpDuotone } from 'react-icons/pi'
const Dashbaord = () => {
const navigate = useNavigate()
const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
const { data, isLoading: isIoPreLoading } = useGetIOprepopulateDataQuery();
const { data:IO, isLoading: isIoLoading } = useGetIOsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
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 });
console.log(IO?.data?.rows);
const sortArrayByStatus = () => {
const sortedArrays = {
open: [],
@@ -33,12 +26,9 @@ const Dashbaord = () => {
processing: [],
draft: []
};
IO?.data?.rows.forEach(item => {
const status = item.ioStatus?.statusAdmin;
console.log(status);
if (status === 'Open') {
sortedArrays.open.push(item);
} else if (status === 'Closed') {
@@ -49,87 +39,63 @@ const Dashbaord = () => {
sortedArrays.draft.push(item);
}
});
return sortedArrays;
};
const statusData = sortArrayByStatus()
console.log(statusData);
const chartData = {
labels: [ 'Draft' ,'Open', 'Processing', 'Closed', ],
backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
values: [statusData?.draft?.length ,statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
labels: ['Draft', 'Open', 'Processing', 'Closed',],
backgroundColor: ['#3182ce', '#004118', '#D69E2E', '#E53E3E'],
values: [statusData?.draft?.length, statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
};
return (
isSponserLoading || isIoPreLoading || isIoLoading || isInvestorLoading ?<FullscreenLoaders/> :
<Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0}>
isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
<Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0}>
<Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
<Box border={"#fff solid 1px"} cursor={'pointer'} onClick={()=>navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'} >
<Icon bg={'#fff'} rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
<Box position={'relative'} border={"#fff solid 1px"} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'} >
<Icon bg={'#fff'} rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
<Text as={'span'} fontSize={'xs'}>Total Investors</Text>
<Text as={'span'} fontSize={'36px'} fontWeight={700}>{investorDetails?.data?.totalItems}</Text>
<Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
</Box>
<Box cursor={'pointer'} onClick={()=>navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} 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} />
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} 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'}>Total IO</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{IO?.data?.totalItems}</Text>
<Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
</Box>
<Box cursor={'pointer'} onClick={()=>navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} 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} />
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} 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'}>Total sponors</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.sponsor?.length}</Text>
<Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
</Box>
<Box cursor={'pointer'} onClick={()=>navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} 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} />
<Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} 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'}>Total Investment Type</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.investmentType?.length}</Text>
<Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
</Box>
</Box>
<Box display={'flex'} pe={4}>
<Box w={'77%'} h={440}>
</Box>
<Box boxShadow={'lg'} bg={'#fff'} rounded={'xl'} w={'23%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={420} mt={1} p={4}>
<Text as={'span'} fontSize={'sm'}>IO Status</Text>
<Box h={'90%'}>
<DonutChart data={chartData} />
<Box display={'flex'} pe={4} >
<Box w={'77%'} p={4} pe={6} pt={1} >
<Box position={'relative'} boxShadow={'lg'} rounded={'xl'} p={5}>
<Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text>
<LineChart />
</Box>
</Box>
<Box boxShadow={'lg'} bg={'#fff'} rounded={'xl'} w={'23%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={535} mt={1} p={4}>
<Text as={'span'} fontSize={'sm'}>IO Status</Text>
<Box display={'flex'} alignItems={'center'} h={'90%'} >
<DonutChart data={chartData} />
</Box>
<HStack mt={3}>
{chartData?.labels?.map((item, index) => <Text as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'xs'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={21} />{item}</Text>)}
</HStack>
</Box>
<HStack mt={3}>
{
chartData?.labels?.map((item, index)=> <Text as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'xs'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={21} />{item}</Text>)
}</HStack>
</Box>
</Box>
</Box>
)
)
}
export default Dashbaord