Dashboard Updated

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([])
+  const [users, setUsers] = useState([]);
   const token = isAutheticated();
 
   const getAllUsers = async () => {
-    let res = await axios.get(
+    let res = await axios.get(`/api/v1/admin/users`, {
-      `/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 (
     <>
-      <WidgetsDropdown users={users} />
+      <WidgetsDropdown users={users} category={category} product={product} Requests={Requests}/>
-
     </>
-  )
+  );
-}
+};
 
-export default Dashboard
+export default Dashboard;

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'
+} from "@coreui/react";
-import { getStyle } from '@coreui/utils'
+import { getStyle } from "@coreui/utils";
-import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+import { CChartBar, CChartLine } from "@coreui/react-chartjs";
-import CIcon from '@coreui/icons-react'
+import CIcon from "@coreui/icons-react";
-import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
+import { cilArrowBottom, cilArrowTop, cilOptions } from "@coreui/icons";
-import { BeatLoader } from 'react-spinners'
+import { BeatLoader } from "react-spinners";
-{/* <BeatLoader color="#36d7b7" /> */ }
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+{
+  /* <BeatLoader color="#36d7b7" /> */
+}
 
-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 (
+    <>
+      <h4>Users and Requests</h4>
       <CRow>
         <CCol sm={6} lg={3}>
           <CWidgetStatsA
             className="mb-4"
             color="primary"
-          value={
+            value={<>{users.length}</>}
-            <>
-
-              {users.length}
-            </>
-          }
             title="Total Users"
-
-        />
-      </CCol>
-      {/* <CCol sm={6} lg={3}>
-        <CWidgetStatsA
-          className="mb-4"
-          color="info"
-          value={
-            <>
-              {category.length}
-            </>
-          }
-          title="Total Categories"
-
           />
         </CCol>
         <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{Requests.length}</>}
+            title="Contact Requests"
+          />
+        </CCol>
+        {/* <CCol sm={6} lg={3}>
         <CWidgetStatsA
           className="mb-4"
           color="warning"
@@ -102,7 +202,102 @@ const WidgetsDropdown = ({ users }) => {
         /> */}
         {/* </CCol> */}
       </CRow>
-  )
+      <h4>Products and Categories</h4>
-}
+      <CRow>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{category.length}</>}
+            title="Total Categories"
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{product.length}</>}
+            title="Total products"
+          />
+        </CCol>
+      </CRow>
+      <h4>Orders</h4>
+      <CRow>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{orders.length}</>}
+            title="Total orders"
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{todayorders.length}</>}
+            title={`Orders for ${formattedDate}`}
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{monthorders.length}</>}
+            title={`Orders for ${formattedmonth}`}
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{yearorders.length}</>}
+            title={`Orders for ${year}`}
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="primary"
+            value={<>{lastyearorders.length}</>}
+            title={`Orders for ${year - 1}`}
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="dark"
+            value={<>{processingorders.length}</>}
+            title="Orders - Processing"
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="warning"
+            value={<>{dispatchedorders.length}</>}
+            title="Orders - Dispatched"
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="success"
+            value={<>{deliveredorders.length}</>}
+            title="Orders - Delivered"
+          />
+        </CCol>
+        <CCol sm={6} lg={3}>
+          <CWidgetStatsA
+            className="mb-4"
+            color="danger"
+            value={<>{cancelledorders.length}</>}
+            title="Orders - Cancelled"
+          />
+        </CCol>
+      </CRow>
+    </>
+  );
+};
 
-export default WidgetsDropdown
+export default WidgetsDropdown;