From cd7c0c8f76296724e2b22eca1df32557a9fb55d1 Mon Sep 17 00:00:00 2001 From: Sibunnayak Date: Tue, 2 Apr 2024 17:21:11 +0530 Subject: [PATCH] Dashboard Updated --- src/views/dashboard/Dashboard.js | 89 +++++---- src/views/widgets/WidgetsDropdown.js | 281 +++++++++++++++++++++++---- 2 files changed, 288 insertions(+), 82 deletions(-) diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 0d5c690..88a69c8 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,44 +1,57 @@ -import React, { lazy } from 'react' +import React, { lazy } from "react"; import axios from "axios"; import { useEffect, useState, useCallback, useMemo } from "react"; import { isAutheticated } from "../../auth.js"; -const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) - +const WidgetsDropdown = lazy(() => import("../widgets/WidgetsDropdown.js")); const Dashboard = () => { - //1 st - const [users, setUsers] = useState([]) + //1 st + const [users, setUsers] = useState([]); const token = isAutheticated(); const getAllUsers = async () => { - let res = await axios.get( - `/api/v1/admin/users`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); + let res = await axios.get(`/api/v1/admin/users`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); // console.log(res.data) - setUsers(res.data.users) - - + setUsers(res.data.users); + }; + //2nd + const [category, setCategory] = useState([]); + const getAllCategory = async () => { + let res = await axios.get(`/api/category/getCategories`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setCategory(res?.data?.categories); + }; + //3rd + const [product, setProduct] = useState([]); + const getAllProduct = async () => { + let res = await axios.get(`/api/product/getAll/`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setProduct(res?.data?.product); + }; + // 3rd + const [Requests, setRequests] = useState([]); + const getAllRequests = async () => { + let res = await axios.get(`/api/contact/request/getAll/`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setRequests(res.data.contactRequest); } - // //2nd - // const [category, setCategory] = useState([]) - // const getAllCategory = useCallback(async () => { - // let res = await axios.get( - // `/api/category/getAll`, - // { - // headers: { - // Authorization: `Bearer ${token}`, - // }, - // } - // ); - // // console.log(res.data.category[0].image.url) - // setCategory(res.data.category) - // }, [token]); // //3 requiment // const [requirement, setRequirement] = useState([]) @@ -71,7 +84,6 @@ const Dashboard = () => { // setNews(res.data.news) - // }, [token]); // //5 offers // const [offer, setOffer] = useState([]) @@ -88,7 +100,6 @@ const Dashboard = () => { // // console.log(res.data) // setOffer(res.data.offer) - // }, [token]); // //6 event // const [event, setEvent] = useState([]) @@ -104,18 +115,18 @@ const Dashboard = () => { // // console.log(res.data) // setEvent(res.data.Event) - // }, [token]); useEffect(() => { getAllUsers(); - + getAllCategory(); + getAllProduct(); + getAllRequests(); }, [token]); return ( <> - - + - ) -} + ); +}; -export default Dashboard +export default Dashboard; diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 6f9636d..f73656e 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useState } from "react"; import { CRow, CCol, @@ -7,45 +7,145 @@ import { CDropdownItem, CDropdownToggle, CWidgetStatsA, -} from '@coreui/react' -import { getStyle } from '@coreui/utils' -import { CChartBar, CChartLine } from '@coreui/react-chartjs' -import CIcon from '@coreui/icons-react' -import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons' -import { BeatLoader } from 'react-spinners' -{/* */ } +} from "@coreui/react"; +import { getStyle } from "@coreui/utils"; +import { CChartBar, CChartLine } from "@coreui/react-chartjs"; +import CIcon from "@coreui/icons-react"; +import { cilArrowBottom, cilArrowTop, cilOptions } from "@coreui/icons"; +import { BeatLoader } from "react-spinners"; +import { isAutheticated } from "src/auth"; +import axios from "axios"; +{ + /* */ +} -const WidgetsDropdown = ({ users }) => { +const WidgetsDropdown = ({ users, category, product, Requests }) => { + const token = isAutheticated(); + const [orders, setOrders] = useState([]); + const [todayorders, setTodayOrders] = useState([]); + const [monthorders, setMonthOrders] = useState([]); + const [yearorders, setYearOrders] = useState([]); + const [lastyearorders, setLastYearOrders] = useState([]); + const [processingorders, setProcessingOrders] = useState([]); + const [dispatchedorders, setDispatchedOrders] = useState([]); + const [deliveredorders, setDeliveredOrders] = useState([]); + const [cancelledorders, setCancelledOrders] = useState([]); + const getAllOrder = async () => { + let res = await axios.get(`/api/order/getAll/`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setOrders(res?.data?.order); + setTodayOrders( + res?.data?.order?.filter((order) => { + return ( + new Date(order.createdAt).toDateString() === new Date().toDateString() + ); + }) + ); + setMonthOrders( + res?.data?.order?.filter((order) => { + return new Date(order.createdAt).getMonth() === new Date().getMonth(); + }) + ); + setYearOrders( + res?.data?.order?.filter((order) => { + return ( + new Date(order.createdAt).getFullYear() === new Date().getFullYear() + ); + }) + ); + setLastYearOrders( + res?.data?.order?.filter((order) => { + return ( + new Date(order.createdAt).getFullYear() === + new Date().getFullYear() - 1 + ); + }) + ); + }; + const getProcessingOrder = async () => { + let res = await axios.get(`/api/order/getAll/processing`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setProcessingOrders(res?.data?.order); + } + const getDispatchedOrder = async () => { + let res = await axios.get(`/api/order/getAll/dispatched`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setDispatchedOrders(res?.data?.order); + } + const getDeliveredOrder = async () => { + let res = await axios.get(`/api/order/getAll/delivered`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setDeliveredOrders(res?.data?.order); + } + const getCancelledOrder = async () => { + let res = await axios.get(`/api/order/getAll/cancelled`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + // console.log(res.data); + setCancelledOrders(res?.data?.order); + } + + useEffect(() => { + getAllOrder(); + getProcessingOrder(); + getDispatchedOrder(); + getDeliveredOrder(); + getCancelledOrder(); + }, [token]); + const date = new Date(); + const day = date.getDate(); + const suffix = + day === 1 || day === 21 || day === 31 + ? "st" + : day === 2 || day === 22 + ? "nd" + : day === 3 || day === 23 + ? "rd" + : "th"; + const month = date.toLocaleDateString("en-US", { month: "long" }); + const formattedDate = `${day}${suffix} ${month}`; + // console.log(formattedDate); +const year =date.toLocaleDateString("en-US", { year: "numeric" }); +const formattedmonth = `${month} ${year}`; return ( - - - - - {users.length} - - } - title="Total Users" - - /> - - {/* - - {category.length} - - } - title="Total Categories" - - /> - - + <> +

Users and Requests

+ + + {users.length}} + title="Total Users" + /> + + + {Requests.length}} + title="Contact Requests" + /> + + {/* { title="Total Events" /> */} - {/* */} - - ) -} + {/* */} + +

Products and Categories

+ + + {category.length}} + title="Total Categories" + /> + + + {product.length}} + title="Total products" + /> + + +

Orders

+ + + {orders.length}} + title="Total orders" + /> + + + {todayorders.length}} + title={`Orders for ${formattedDate}`} + /> + + + {monthorders.length}} + title={`Orders for ${formattedmonth}`} + /> + + + {yearorders.length}} + title={`Orders for ${year}`} + /> + + + {lastyearorders.length}} + title={`Orders for ${year - 1}`} + /> + + + {processingorders.length}} + title="Orders - Processing" + /> + + + {dispatchedorders.length}} + title="Orders - Dispatched" + /> + + + {deliveredorders.length}} + title="Orders - Delivered" + /> + + + {cancelledorders.length}} + title="Orders - Cancelled" + /> + + + + ); +}; -export default WidgetsDropdown +export default WidgetsDropdown;