diff --git a/index.html b/index.html index 9a34773..7cef13f 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web."; - --> + diff --git a/package-lock.json b/package-lock.json index 49fc502..2219105 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 45d8dba..301f63a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Components/Doughnut/DonutChart.jsx b/src/Components/Doughnut/DonutChart.jsx new file mode 100644 index 0000000..3f4b80f --- /dev/null +++ b/src/Components/Doughnut/DonutChart.jsx @@ -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 ; +}; + +export default DonutChart; diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx index 471f91c..5ab28c1 100644 --- a/src/Components/HeaderMain.jsx +++ b/src/Components/HeaderMain.jsx @@ -35,9 +35,12 @@ const HeaderMain = ({ return ( { 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 ? ( Logo navigate('/')} + cursor={"pointer"} /> ) : ( { }} src={colorMode === "light" ? logoMini : logoMiniDark} alt="Logo" + onClick={()=> navigate('/')} + cursor={"pointer"} /> )} { + 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 ( - - + isSponserLoading || isIoPreLoading || isIoLoading || isInvestorLoading ? : + + - - + navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'} > + Total Investors - 243 + {investorDetails?.data?.totalItems} - - + navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} > + Total IO - 243 + {IO?.data?.totalItems} - - + navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} > + Total sponors - 243 + {data?.data?.sponsor?.length} - - + navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} > + Total Investment Type - 243 + {data?.data?.investmentType?.length} + + + + + + + IO Status + + + + + { + chartData?.labels?.map((item, index)=> {item}) + } + + + ) } diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js index 27ed7b4..b919474 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -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", diff --git a/src/Services/sponser.service.js b/src/Services/sponser.service.js index 173cb46..f4747b5 100644 --- a/src/Services/sponser.service.js +++ b/src/Services/sponser.service.js @@ -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]========