Chart Update

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/routes.js

@@ -121,6 +121,14 @@ import CreateBlog from "./views/Blog/CreateBlog";
 import users from "./views/Users/users";
 import UpdateBlog from "./views/Blog/EditBlog";
 import ViewBlog from "./views/Blog/ViewBlog";
+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" },
   {
@@ -505,6 +513,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/dashboard/Dashboard.js

@@ -51,7 +51,7 @@ const Dashboard = () => {
     });
     // console.log(res.data);
     setRequests(res.data.contactRequest);
-  }
+  };
 
   // //3 requiment
   // const [requirement, setRequirement] = useState([])
@@ -124,7 +124,12 @@ const Dashboard = () => {
   }, [token]);
   return (
     <>
-      <WidgetsDropdown users={users} category={category} product={product} Requests={Requests}/>
+      <WidgetsDropdown
+        users={users}
+        category={category}
+        product={product}
+        Requests={Requests}
+      />
     </>
   );
 };