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

update dashboard

Browse Source
This commit is contained in:
Siddhesh More
2024-08-09 12:24:18 +05:30
parent 9f6136935d
commit e657409edb
9 changed files with 196 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/Components/Doughnut/DonutChart.jsx Normal file
View File

@@ -0,0 +1,39 @@
// DonutChart.jsx
import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement } from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, ArcElement);
const DonutChart = ({ data, width = 300, height = 250 }) => {
const chartData = {
labels: data.labels,
datasets: [
{
label: 'My Dataset',
data: data.values,
backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
borderColor: ['#FFF'],
borderWidth: 1,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false, // Hide the legend
},
tooltip: {
callbacks: {
label: (tooltipItem) => `${tooltipItem.label}: ${tooltipItem.raw}`,
},
},
},
};
return <Doughnut data={chartData} options={options} width={'100%'} />;
};
export default DonutChart;

5
src/Components/HeaderMain.jsx
View File

@@ -35,9 +35,12 @@ const HeaderMain = ({
return (
<Box
className={` pt-2 pb-2 fw-400 border-bottom d-flex ${
className={` pt-3 pb-2 fw-400 border-bottom d-flex ${
slideDirecttion ? "flex-row-reverse ps-2" : ""
} justify-content-between align-items-center`}
// boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}
zIndex={999}
>
<Text
as={"span"}

10
src/Layout/DefaultLayout.jsx
View File

@@ -400,16 +400,18 @@ const DashboardLayout = ({ isOnline }) => {
isDrawerOpen || openDrawerClick
? "justify-content-start"
: "justify-content-center"
} p-3 pt-3 pb-4 position-relative `}
} p-3 pt-3 pb-3 position-relative `}
height={"10%"}
>
{isDrawerOpen || openDrawerClick ? (
<Image
style={{
width: 120,
width: 110,
}}
src={colorMode === "light" ? logo : logoDark}
alt="Logo"
onClick={()=> navigate('/')}
cursor={"pointer"}
/>
) : (
<Image
@@ -418,12 +420,14 @@ const DashboardLayout = ({ isOnline }) => {
}}
src={colorMode === "light" ? logoMini : logoMiniDark}
alt="Logo"
onClick={()=> navigate('/')}
cursor={"pointer"}
/>
)}
</div>
<Box
className="ps-2 scroll-bar pe-1"
className="ps-2 scroll-bar pe-1 pt-3"
style={{
height: "90%",
overflowY: "scroll",

118
src/Pages/Dashbaord.jsx
View File

@@ -1,45 +1,133 @@
import { Box, Icon, Text } from '@chakra-ui/react'
import { Box, HStack, Icon, 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 { 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'
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: investorDetails, isInvestorLoading } = useGetInvestorsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
console.log(IO?.data?.rows);
const sortArrayByStatus = () => {
const sortedArrays = {
open: [],
closed: [],
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') {
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()
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]
};
return (
<Box>
<Box display={'flex'} gap={6} w={'100%'} pt={3} pe={3} >
isSponserLoading || 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 boxShadow={'lg'} color={"#fff"} p={3} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'} gap={3} >
<Icon as={RiMoneyDollarBoxLine} boxSize={12} />
<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} />
<Text as={'span'} fontSize={'xs'}>Total Investors</Text>
<Text as={'span'} fontSize={'36px'} fontWeight={700}>243</Text>
<Text as={'span'} fontSize={'36px'} fontWeight={700}>{investorDetails?.data?.totalItems}</Text>
</Box>
<Box boxShadow={'lg'} color={"#fff"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} gap={3} >
<Icon as={RiMoneyDollarBoxLine} boxSize={12} />
<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} />
<Text as={'span'} fontSize={'xs'}>Total IO</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>243</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{IO?.data?.totalItems}</Text>
</Box>
<Box boxShadow={'lg'} color={"#fff"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} gap={3} >
<Icon as={RiMoneyDollarBoxLine} boxSize={12} />
<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} />
<Text as={'span'} fontSize={'xs'}>Total sponors</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>243</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.sponsor?.length}</Text>
</Box>
<Box boxShadow={'lg'} color={"#fff"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} gap={3} >
<Icon as={RiMoneyDollarBoxLine} boxSize={12} />
<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} />
<Text as={'span'} fontSize={'xs'}>Total Investment Type</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>243</Text>
<Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.investmentType?.length}</Text>
</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>
<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>
)
}

8
src/Routes/Nav.js
View File

@@ -1,5 +1,5 @@
import { HiOutlineNewspaper } from "react-icons/hi";
import { TbBrandMedium, TbChartHistogram, TbReportMoney } from "react-icons/tb";
import { TbBrandMedium, TbChartHistogram, TbLayoutDashboard, TbReportMoney } from "react-icons/tb";
import {
RiBankLine,
RiFileUserLine,
@@ -26,6 +26,12 @@ import { LiaCrownSolid } from "react-icons/lia";
import { PiCrownDuotone } from "react-icons/pi";
export const nav = [
// {
// title: "Dashboard",
// type: "single",
// path: "/",
// Icon: TbLayoutDashboard,
// },
{
title: "MASTER MENU",
type: "title",

6
src/Services/sponser.service.js
View File

@@ -3,6 +3,7 @@
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// import { api } from "./api.service";
import { baseQuery } from "./token.serivce";
import { ioService } from "./io.service";
// const baseUrl = api?.defaults.baseURL;
@@ -10,6 +11,9 @@ import { baseQuery } from "./token.serivce";
// const baseUrl = `${import.meta.env.VITE_API_BASE_URL}/${import.meta.env.VITE_API_VERSION}`
console.log(ioService);
// Define a service using a base URL and expected endpoints
export const sponserMaster = createApi({
reducerPath: "sponserMaster",
@@ -31,7 +35,6 @@ export const sponserMaster = createApi({
getActiveSponserMaster: builder.query({
query: () => `/sponsor/admin/active`,
providesTags: ["getSponser"],
}),
getSponserMasterActive: builder.query({
@@ -43,7 +46,6 @@ export const sponserMaster = createApi({
getSponserById: builder.query({
query: (id) => `/sponsor/admin/${id}`,
providesTags: ["getSponser"],
}),
// ========[Toggle Status]========