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

6
index.html
View File

@@ -22,7 +22,7 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web.";
</script>
<script type="text/javascript">
<!-- <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
@@ -30,8 +30,8 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web.";
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</script> -->
<!-- <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

27
package-lock.json generated
View File

@@ -16,11 +16,13 @@
"@reduxjs/toolkit": "^2.2.3",
"axios": "^1.7.2",
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"js-cookie": "^3.0.5",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",
@@ -1964,6 +1966,11 @@
"integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
"dev": true
},
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2934,6 +2941,17 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/chart.js": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
"integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -5167,6 +5185,15 @@
"@babel/runtime": "^7.9.2"
}
},
"node_modules/react-chartjs-2": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
"integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
"peerDependencies": {
"chart.js": "^4.1.1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-clientside-effect": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",

2
package.json
View File

@@ -18,11 +18,13 @@
"@reduxjs/toolkit": "^2.2.3",
"axios": "^1.7.2",
"bootstrap": "5.3.3",
"chart.js": "^4.4.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.5",
"js-cookie": "^3.0.5",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.51.3",
"react-icons": "^5.1.0",

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]========