view and conflicts resolved

src/_nav.js

@@ -45,6 +45,49 @@ const _nav = [
   //   icon: <CIcon icon={cibMaterialDesign} customClassName="nav-icon" />,
   //   to: "/design",
   // },
+  {
+    component: CNavGroup,
+    name: "Charts",
+    icon: <CIcon icon={cilCat} customClassName="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: "new user day wise",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/new-user-day-wise",
+      },
+      {
+        component: CNavItem,
+        name: "Revenue By Product",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/revenue-by-product",
+      },
+      {
+        component: CNavItem,
+        name: "Revenue By State",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/revenue-by-state",
+      },
+      {
+        component: CNavItem,
+        name: "Revenue By City",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/revenue-by-city",
+      },
+      {
+        component: CNavItem,
+        name: "Orders (Day Wise)",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/orders-day-wise",
+      },
+      {
+        component: CNavItem,
+        name: "Revenue (Day Wise)",
+        icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+        to: "/revenue-day-wise",
+      },
+    ],
+  },
 
   {
     component: CNavGroup,

src/index.js

@@ -14,8 +14,8 @@ import { cibGmail } from "@coreui/icons";
 import { createRoot } from "react-dom/client";
 
 const setupAxios = () => {
-  axios.defaults.baseURL = "http://localhost:5000";
+  // axios.defaults.baseURL = "http://localhost:5000";
-  // axios.defaults.baseURL = "https://api.smellika.com";
+  axios.defaults.baseURL = "https://api.smellika.com";
 
   axios.defaults.headers = {
     "Cache-Control": "no-cache,no-store",

src/routes.js

@@ -90,6 +90,7 @@ import EditPrivacyPolicy from "./views/Content/editPrivacyPolicy";
 import EditTermsConditions from "./views/Content/editTermsConditions";
 import EditShippingPolicy from "./views/Content/editShippingPolicy";
 import EditRefundpolicy from "./views/Content/editRefundPolicy";
+import EditAboutUs from "./views/Content/editAboutUs";
 
 // import EditUserAddress from "./views/customerDetails/editUserAddress";
 // import AddUserAddress from "./views/customerDetails/addUserAddress";
@@ -122,6 +123,14 @@ import UpdateBlog from "./views/Blog/EditBlog";
 import ViewBlog from "./views/Blog/ViewBlog";
 import CustomerTable from "./views/customerDetails/customerTable";
 import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
+import Charts from "./views/Charts/RevenueCharts";
+import UserCharts from "./views/Charts/UserChart";
+import ProductrevenueCharts from "./views/Charts/ProductRevenue";
+import StateRevenueCharts from "./views/Charts/Staterevenue";
+import CityRevenueCharts from "./views/Charts/CityRevenue";
+import { element } from "prop-types";
+import OrderdayChart from "./views/Charts/OrderDaywise";
+import RevenueCharts from "./views/Charts/RevenueCharts";
 const routes = [
   { path: "/", exact: true, name: "Home" },
   {
@@ -303,6 +312,11 @@ const routes = [
     name: "Content",
     element: EditRefundpolicy,
   },
+  {
+    path: "/content/about-us",
+    name: "Content",
+    element: EditAboutUs,
+  },
 
   // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
   //Complaints
@@ -511,6 +525,37 @@ const routes = [
     name: "Blogs",
     element: ViewBlog,
   },
+  //Charts
+  {
+    path: "/new-user-day-wise",
+    name: "new user day wise",
+    element: UserCharts,
+  },
+  {
+    path: "/revenue-by-product",
+    name: "Revenue By Product",
+    element: ProductrevenueCharts,
+  },
+  {
+    path: "/revenue-by-state",
+    name: "Revenue By State",
+    element: StateRevenueCharts,
+  },
+  {
+    path: "/revenue-by-city",
+    name: "Revenue By City",
+    element: CityRevenueCharts,
+  },
+  {
+    path: "/orders-day-wise",
+    name: "Orders (Day Wise)",
+    element: OrderdayChart,
+  },
+  {
+    path: "/revenue-day-wise",
+    name: "Revenue (Day Wise)",
+    element: RevenueCharts,
+  },
 ];
 
 export default routes;

src/views/Charts/CityRevenue.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const CityRevenueCharts = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+        <iframe
+        style={{
+          background: "#F1F5F4",
+          border: "none",
+          borderRadius: "2px",
+          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+          width: "80vw",
+          height: "85vh",
+        }}
+        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7447b4d9-2c23-4b85-aa8b-242097a6aafd&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+      ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default CityRevenueCharts;

src/views/Charts/OrderDaywise.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const OrderdayChart = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+        <iframe
+        style={{
+          background: "#F1F5F4",
+          border: "none",
+          borderRadius: "2px",
+          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+          width: "80vw",
+          height: "85vh",
+        }}
+        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=2d28091a-a2f4-4a8b-af87-7bb7d4bb0d56&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+      ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default OrderdayChart;

src/views/Charts/ProductRevenue.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const ProductrevenueCharts = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+        <iframe
+        style={{
+          background: "#F1F5F4",
+          border: "none",
+          borderRadius: "2px",
+          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+          width: "80vw",
+          height: "85vh",
+        }}
+        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7549914d-a34f-4ae6-b535-99cfc1d52fb7&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+      ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default ProductrevenueCharts;

src/views/Charts/RevenueCharts.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const RevenueCharts = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+          <iframe
+            style={{
+              background: "#F1F5F4",
+              border: "none",
+              borderRadius: "2px",
+              boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+              width: "80vw",
+              height: "85vh",
+            }}
+            src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=35dc4a1b-72dd-4ad1-bf2e-78318d261aa0&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+          ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default RevenueCharts;

src/views/Charts/Staterevenue.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const StateRevenueCharts = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+        <iframe
+        style={{
+          background: "#F1F5F4",
+          border: "none",
+          borderRadius: "2px",
+          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+          width: "80vw",
+          height: "85vh",
+        }}
+        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=3c517c32-541f-4bf5-ad2c-3fed5db1d1c9&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+      ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default StateRevenueCharts;

src/views/Charts/UserChart.js

@@ -0,0 +1,27 @@
+import { isAutheticated } from "../../auth.js";
+
+const UserCharts = () => {
+  const token = isAutheticated();
+
+  return (
+    <div className="w-80vw">
+      {token ? (
+        <iframe
+          style={{
+            background: "#F1F5F4",
+            border: "none",
+            borderRadius: "2px",
+            boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            width: "80vw",
+            height: "85vh",
+          }}
+          src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=9ac07f5d-4eec-4d4a-8bbb-3b0f76ab2869&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+        ></iframe>
+      ) : (
+        <h3>No charts available</h3>
+      )}
+    </div>
+  );
+};
+
+export default UserCharts;

src/views/Content/content.js

@@ -34,6 +34,11 @@ export default function Content() {
       action: "Edit",
       path: "/content/refund-policy",
     },
+    {
+      name: "About Us",
+      action: "Edit",
+      path: "/content/about-us",
+    }
   ];
 
   return (

src/views/Content/editAboutUs.js

@@ -0,0 +1,162 @@
+import { Typography } from "@material-ui/core";
+import { Box, Button } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+
+const TOOLBAR_OPTIONS = [
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  [{ font: [] }],
+  [{ list: "ordered" }, { list: "bullet" }],
+  ["bold", "italic", "underline", "strike"], 
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }],
+  [{ script: "super" }, { script: "sub" }], 
+  ["undo", "redo"], 
+];
+
+export default function EditAboutUs() {
+    const [title, setTitle] = useState("About Us");
+    const [content, setContent] = useState("");
+    const [added, setAdded] = useState(false);
+    const [olderContent, setOlderContent] = useState("");
+    const [id, setId] = useState(null);
+  
+    const token = isAutheticated();
+    const handleContentChange = (content, delta, source, editor) => {
+      setContent(editor.getHTML());
+    };
+    const getAboutUs = async () => {
+      const response = await axios.get("/api/content/about-us", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.status === 200) {
+  
+        setContent(response?.data?.aboutUs[0]?.aboutUsContent);
+        setId(response?.data?.aboutUs[0]?._id);
+        setOlderContent(
+            response?.data?.aboutUs[0]?.aboutUsContent
+            );
+      }
+    };
+  
+    const addAboutUs = async () => {
+      const response = await axios.post(
+        "/api/content/about-us",
+        { content },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      if (response.status == 201) {
+        swal({
+          title: "Congratulations!!",
+          text: "About us  added successfully!",
+          icon: "success",
+          button: "OK",
+        });
+      }
+    };
+    const handleCancelClick = () => {
+      setContent(olderContent);
+    };
+    const updateContent = async () => {
+      const response = await axios.patch(
+        "/api/content/about-us-update",
+        { content },
+        {
+          params: { id: id }, 
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      
+      );
+      if (response.status === 200) {
+        swal({
+          title: "Congratulations!",
+          text: "About Us updated successfully!",
+          icon: "success",
+          button: "OK",
+        });
+      } else {
+        swal({
+          title: "Sorry, please try again",
+          text: "Something went wrong!",
+          icon: "error",
+          button: "Retry",
+          dangerMode: true,
+        });
+      }
+    };
+    const handleSaveClick = async () => {
+      if (olderContent === undefined && olderContent.length===0) {
+        await addAboutUs();
+        setAdded(true);
+      } else {
+        setAdded(false);
+        await updateContent();
+      }
+      // // Reload terms and conditions
+      // await getAboutUs();
+    };
+    useEffect(() => {
+      // addTermsandConditions();
+      getAboutUs();
+    }, [added]);
+    return (
+      <div>
+        <div style={{ display: "flex" }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleSaveClick}
+            style={{
+              fontWeight: "bold",
+              marginBottom: "1rem",
+              textTransform: "capitalize",
+              marginRight: "5px",
+            }}
+          >
+            Save
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleCancelClick}
+            style={{
+              fontWeight: "bold",
+              marginBottom: "1rem",
+              textTransform: "capitalize",
+              marginRight: "5px",
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+  
+        <Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
+          <Typography
+            style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
+            variant="h6"
+          >
+            {" "}
+            {title}  :{" "}
+          </Typography>
+          <Typography style={{ margin: "0.5rem 0rem" }}>Body</Typography>
+          <ReactQuill
+            theme="snow"
+            value={content}
+            onChange={handleContentChange}
+            modules={{ toolbar: TOOLBAR_OPTIONS }}
+          />
+        </Box>
+      </div>
+    );
+  }

src/views/Content/editPrivacyPolicy.js

@@ -58,7 +58,7 @@ export default function EditPrivacyPolicy() {
     if (response.status == 201) {
       swal({
         title: "Congratulations!!",
-        text: "Terms and condition  added successfully!",
+        text: "privacy and policy  added successfully!",
         icon: "success",
         button: "OK",
       });

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 
+  //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}`,
-        headers: {
+      },
-          Authorization: `Bearer ${token}`,
+    });
-        },
-      }
-    );
     // console.log(res.data)
-    setUsers(res.data.users)
+    setUsers(res.data.users);
-
+  };
-
+  //2nd
-  }
+  const [category, setCategory] = useState([]);
-  // //2nd 
+  const getAllCategory = async () => {
-  // const [category, setCategory] = useState([])
+    let res = await axios.get(`/api/category/getCategories`, {
-  // const getAllCategory = useCallback(async () => {
+      headers: {
-  //   let res = await axios.get(
+        Authorization: `Bearer ${token}`,
-  //     `/api/category/getAll`,
+      },
-  //     {
+    });
-  //       headers: {
+    // console.log(res.data);
-  //         Authorization: `Bearer ${token}`,
+    setCategory(res?.data?.categories);
-  //       },
+  };
-  //     }
+  //3rd
-  //   );
+  const [product, setProduct] = useState([]);
-  //   // console.log(res.data.category[0].image.url)
+  const getAllProduct = async () => {
-  //   setCategory(res.data.category)
+    let res = await axios.get(`/api/product/getAll/`, {
-  // }, [token]);
+      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);
+  };
 
   // //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,23 @@ 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 (
-    <CRow>
+    <>
-      <CCol sm={6} lg={3}>
+      <h4>Users and Requests</h4>
-        <CWidgetStatsA
+      <CRow>
-          className="mb-4"
+        <CCol sm={6} lg={3}>
-          color="primary"
+          <CWidgetStatsA
-          value={
+            className="mb-4"
-            <>
+            color="primary"
-
+            value={<>{users.length}</>}
-              {users.length}
+            title="Total Users"
-            </>
+          />
-          }
+        </CCol>
-          title="Total Users"
+        <CCol sm={6} lg={3}>
-
+          <CWidgetStatsA
-        />
+            className="mb-4"
-      </CCol>
+            color="primary"
-      {/* <CCol sm={6} lg={3}>
+            value={<>{Requests.length}</>}
-        <CWidgetStatsA
+            title="Contact Requests"
-          className="mb-4"
+          />
-          color="info"
+        </CCol>
-          value={
+        {/* <CCol sm={6} lg={3}>
-            <>
-              {category.length}
-            </>
-          }
-          title="Total Categories"
-
-        />
-      </CCol>
-      <CCol sm={6} lg={3}>
         <CWidgetStatsA
           className="mb-4"
           color="warning"
@@ -100,9 +200,104 @@ const WidgetsDropdown = ({ users }) => {
           title="Total Events"
 
         /> */}
-      {/* </CCol> */}
+        {/* </CCol> */}
-    </CRow>
+      </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;