added panels

src/_nav.js

@@ -46,6 +46,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,7 +14,7 @@ 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.headers = {

src/routes.js

@@ -92,7 +92,6 @@ import EditShippingPolicy from "./views/Content/editShippingPolicy";
 import EditRefundpolicy from "./views/Content/editRefundPolicy";
 import EditAboutUs from "./views/Content/editAboutUs";
 
-import UserTable from "./views/customerDetails/userTable";
 // import EditUserAddress from "./views/customerDetails/editUserAddress";
 // import AddUserAddress from "./views/customerDetails/addUserAddress";
 import viewDetails from "./views/customerDetails/viewDetails";
@@ -127,6 +126,16 @@ import EditPanel1 from "./views/Home/editPanel1";
 import EditPanel2 from "./views/Home/editPanel2";
 import EditPanel3 from "./views/Home/editPanel3";
 import Editpanel4 from "./views/Home/editPanel4";
+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" },
   {
@@ -169,7 +178,12 @@ const routes = [
   {
     path: "/customers-details",
     name: "User Table",
-    element: UserTable,
+    element: CustomerTable,
+  },
+  {
+    path: "/customers-details/:_id",
+    name: "User Table",
+    element: SingleUserAllDetails,
   },
   // {
   //   path: "/users-address/add",
@@ -548,6 +562,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/Products/AddProduct.js

@@ -33,6 +33,7 @@ const AddProduct = () => {
   const [category, setCategoryName] = useState("");
   const [error, setError] = useState("");
   const [selectedTax, setselectedTax] = useState();
+  const [product_Status, setproduct_Status] = useState("");
   const [totalAmt, setTotalAmt] = useState(0);
   const [gst_amount, setGst_amount] = useState(0);
 
@@ -127,6 +128,7 @@ const AddProduct = () => {
       category === "" ||
       selectedTax === "" ||
       gst_amount === "" ||
+      product_Status === "" ||
       price === ""
     ) {
       swal({
@@ -147,6 +149,7 @@ const AddProduct = () => {
     formData.append("category", category);
     formData.append("total_amount", totalAmt);
     formData.append("gst_amount", gst_amount);
+    formData.append("product_Status", product_Status);
 
     formData.append("gst", selectedTax);
 
@@ -525,6 +528,23 @@ const AddProduct = () => {
                   // onChange={(e) => setPrice(e.target.value)}
                 />
               </div>
+
+              <div className=" mb-3">
+                <label htmlFor="title" className="form-label">
+                  Product Status *
+                </label>{" "}
+                <select
+                  className="form-control"
+                  name="product_Status"
+                  id="product_Status"
+                  value={product_Status}
+                  onChange={(e) => setproduct_Status(e.target.value)}
+                >
+                  <option value="">--Select--</option>
+                  <option value="Active">Active</option>
+                  <option value="Inactive">Inactive</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>

src/views/Products/EditProduct.js

@@ -35,6 +35,8 @@ const EditProduct = () => {
   const [error, setError] = useState("");
   const [initTax, setInitTax] = useState();
   const [selectedTax, setselectedTax] = useState();
+  const [product_Status, setproduct_Status] = useState("");
+
   const [totalAmt, setTotalAmt] = useState(0);
   const [gst_amount, setGst_amount] = useState(0);
   const [newUpdatedImages, setNewUpdatedImages] = useState([]);
@@ -49,7 +51,6 @@ const EditProduct = () => {
         },
       })
       .then((res) => {
-        // console.log(res?.data?.product?.gst?._id);
         setName(res?.data?.product.name);
         setDescription(res.data.product.description);
         setProductImages(res.data.product.image);
@@ -59,6 +60,7 @@ const EditProduct = () => {
         setInitTax(res.data.product?.gst?._id);
         setTotalAmt(res.data.product?.total_amount);
         setGst_amount(res.data.product?.gst_amount);
+        setproduct_Status(res.data.product?.product_Status);
       })
       .catch((err) => {
         swal({
@@ -153,6 +155,7 @@ const EditProduct = () => {
       selectedTax === "" ||
       gst_amount === "" ||
       price === "" ||
+      product_Status === "" ||
       totalAmt === "" ||
       gst_amount === "" ||
       (productImages.length == 0 && newUpdatedImages.length == 0)
@@ -175,6 +178,7 @@ const EditProduct = () => {
     formData.append("category", category);
     formData.append("total_amount", totalAmt);
     formData.append("gst_amount", gst_amount);
+    formData.append("product_Status", product_Status);
 
     formData.append("gst", initTax === "" ? selectedTax : initTax);
 
@@ -583,6 +587,22 @@ const EditProduct = () => {
                   // onChange={(e) => setPrice(e.target.value)}
                 />
               </div>
+              <div className=" mb-3">
+                <label htmlFor="title" className="form-label">
+                  Product Status *
+                </label>{" "}
+                <select
+                  className="form-control"
+                  name="product_Status"
+                  id="product_Status"
+                  value={product_Status}
+                  onChange={(e) => setproduct_Status(e.target.value)}
+                >
+                  <option value="">--Select--</option>
+                  <option value="Active">Active</option>
+                  <option value="Inactive">Inactive</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>

src/views/Products/ViewProduct.js

@@ -135,6 +135,10 @@ function ViewProduct() {
                         </tr>
                         {/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
                                                 <tr><th>Location</th><td>{product?.location}</td></tr> */}
+                        <tr>
+                          <th>Product Status</th>
+                          <td>{product?.product_Status}</td>
+                        </tr>
                         <tr>
                           <th>Created On</th>
                           <td>

src/views/customerDetails/customerTable.js

@@ -18,7 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import Fuse from "fuse.js";
 import { Typography } from "@material-ui/core";
 import OrderDetails from "./orderDetails";
-const UserTable = () => {
+const CustomerTable = () => {
   const token = isAutheticated();
   const [query, setQuery] = useState("");
   const navigate = useNavigate();
@@ -313,7 +313,7 @@ const UserTable = () => {
                                       Delete
                                     </button>
                                   </Link> */}
-                                  <Link to={`/users/view/${user._id}`}>
+                                  <Link to={`/customers-details/${user?._id}`}>
                                     <button
                                       type="button"
                                       className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
@@ -435,4 +435,4 @@ const UserTable = () => {
   );
 };
 
-export default UserTable;
+export default CustomerTable;

src/views/customerDetails/singleUserAllDetails.js

@@ -0,0 +1,324 @@
+import { Typography } from "@material-ui/core";
+import { Button } from "@mui/material";
+import axios from "axios";
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { isAutheticated } from "src/auth";
+
+const SingleUserAllDetails = () => {
+  const [user, setUser] = useState();
+  const [userOrder, setUserOrder] = useState();
+  const [userAllAddress, setUserAllAddress] = useState([]);
+  const token = isAutheticated();
+  //   const [loading, setLoading] = useState(true);
+  const _id = useParams()?._id;
+  // Get Shipping address of individual user
+  const getUserAddress = () => {
+    // setLoading(true);
+    axios
+      .get(`/api/shipping/address/user/address/${_id}`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        // console.log(res.data);
+        setUserAllAddress(res.data?.UserShippingAddress || []);
+        // toast.success(res.data.message ? res.data.message : "Address fetch!");
+
+        // setLoading(false);
+      })
+      .catch((error) => {
+        // setLoading(false);
+        swal({
+          title: "Warning",
+          text: error.message,
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+      });
+  };
+
+  const getOrders = async () => {
+    try {
+      const response = await axios.get(`/api/v1/admin/users/orders/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      setUserOrder(response.data.order);
+      // setLoading1(false);
+    } catch (error) {
+      console.error("Error fetching orders:", error);
+      swal({
+        title: "Warning",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      // setLoading1(false);
+    }
+  };
+  const getUserDetails = useCallback(async () => {
+    let resp = await axios.get(`/api/v1/admin/user/${_id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    setUser(resp.data.user);
+  }, [token]);
+
+  // useEffect(() => {
+  //     getUserDetails();
+  // }, [getUserDetails]);
+
+  useEffect(() => {
+    getOrders();
+    getUserAddress();
+    getUserDetails();
+  }, [_id]);
+  console.log(userOrder, " Single user order data ");
+  console.log(userAllAddress, "user all address ");
+  console.log(user, "user ");
+  let totalSpent = 0;
+
+  // Iterate through each order and sum up the total_amount
+  userOrder?.forEach((order) => {
+    totalSpent += order.total_amount;
+  });
+
+  return (
+    <div>
+      {/* SingleUserAllDetails
+      <Link to={`/customers-details`}>
+        <button
+          type="button"
+          className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
+        >
+          back
+        </button>
+      </Link> */}
+      <div className="row">
+        <div className="col-12">
+          <div
+            className="
+                    page-title-box
+                    d-flex
+                    align-items-center
+                    justify-content-between
+                  "
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Single Customer All Details
+            </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
+            </div>
+
+            <div className="page-title-right">
+              <Link to="/customers-details">
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  style={{
+                    fontWeight: "bold",
+                    marginBottom: "1rem",
+                    textTransform: "capitalize",
+                  }}
+                >
+                  Back
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card" style={{ padding: "1rem" }}>
+        <h5 style={{ fontWeight: "bold" }}>&bull; Customer Profile </h5>
+        <div style={{ marginLeft: "1rem", marginTop: "1rem" }}>
+          <Typography style={{ fontWeight: "bold" }}>
+            Customer Name:<b> {user?.name}</b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Customer ID:<b style={{ marginLeft: "1.5rem" }}> {user?._id}</b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Date Registered :
+            <b>
+              {" "}
+              {new Date(user?.createdAt).toLocaleString("en-IN", {
+                weekday: "short",
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                hour12: true,
+              })}
+            </b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Last Purchase:
+            <b style={{ marginLeft: "1.5rem" }}>
+              {userOrder?.length > 0
+                ? new Date(userOrder[0]?.createdAt).toLocaleString("en-IN", {
+                    weekday: "short",
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                    hour: "numeric",
+                    minute: "numeric",
+                    hour12: true,
+                  })
+                : userOrder
+                ? "No Purchase"
+                : "Loading"}
+            </b>
+          </Typography>
+        </div>
+        <div style={{ marginTop: "2rem" }}>
+          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
+            &bull; Addresses{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Addresses : {userAllAddress?.length}{" "}
+          </h5>
+          {userAllAddress?.length > 0 && (
+            <div className="table-responsive table-shoot mt-3">
+              <table
+                className="table table-centered table-nowrap"
+                style={{ border: "1px solid" }}
+              >
+                <thead
+                  className="thead-info"
+                  style={{ background: "rgb(140, 213, 213)" }}
+                >
+                  <tr>
+                    <th>SL No.</th>
+                    <th>Address </th>
+                    {/* <th>Profile Image</th> */}
+                  </tr>
+                </thead>
+                <tbody>
+                  {userAllAddress?.length === 0 && (
+                    <tr className="text-center">
+                      <td colSpan="6">
+                        <h5>No Data Available</h5>
+                      </td>
+                    </tr>
+                  )}
+                  {userAllAddress?.map((address, i) => {
+                    return (
+                      <tr key={i}>
+                        <td className="text-start">{i + 1}</td>
+                        <td style={{ maxWidth: "400px" }}>
+                          <strong>
+                            {address?.first_Name} {address?.last_name},
+                            {address?.phone_Number},{address?.street},
+                            {address?.city},{address?.state},{address?.country},
+                            {address?.postalCode}
+                          </strong>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+        <div style={{ marginTop: "2rem" }}>
+          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
+            &bull; Orders{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Orders : {userOrder?.length}{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Spent : ₹ {totalSpent}{" "}
+          </h5>
+          {userOrder?.length > 0 && (
+            <div className="table-responsive table-shoot mt-3">
+              <table
+                className="table table-centered table-nowrap"
+                style={{ border: "1px solid" }}
+              >
+                <thead
+                  className="thead-info"
+                  style={{ background: "rgb(140, 213, 213)" }}
+                >
+                  <tr>
+                    <th>SL No.</th>
+                    <th>Order Date </th>
+                    <th>Order Id </th>
+                    <th>Items </th>
+                    <th>Order Amount </th>
+                    {/* <th>Profile Image</th> */}
+                  </tr>
+                </thead>
+                <tbody>
+                  {userAllAddress?.length === 0 && (
+                    <tr className="text-center">
+                      <td colSpan="6">
+                        <h5>No Data Available</h5>
+                      </td>
+                    </tr>
+                  )}
+                  {userOrder?.map((order, i) => {
+                    return (
+                      <tr key={i}>
+                        <td className="text-start">{i + 1}</td>
+                        <td>
+                          {" "}
+                          {new Date(order?.createdAt).toLocaleString("en-IN", {
+                            weekday: "short",
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                            hour: "numeric",
+                            minute: "numeric",
+                            hour12: true,
+                          })}
+                        </td>
+                        <td>{order?.orderID}</td>
+                        <td>
+                          {order?.orderItems?.map((item, i) => (
+                            <div
+                              style={{ display: "flex", marginTop: "1rem" }}
+                              key={i}
+                            >
+                              <p>{item?.name}</p>
+                              <div>
+                                {item?.image?.map((img, i) => (
+                                  <img
+                                    style={{
+                                      width: "50px",
+                                      height: "50px",
+                                      marginLeft: "1rem",
+                                    }}
+                                    src={img?.url}
+                                    alt="img not available"
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </td>
+                        <td>₹ {order?.total_amount}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SingleUserAllDetails;

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}
+      />
     </>
   );
 };

src/views/orders/CancelledOrders.js

@@ -155,7 +155,7 @@ function CancelledOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-danger text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/DispatchedOrders.js

@@ -158,7 +158,7 @@ function DispatchedOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-info text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/NewOrders.js

@@ -210,7 +210,7 @@ function NewOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-primary text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/ProcessingOrders.js

@@ -159,7 +159,7 @@ function ProcessingOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-warning text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/ViewOrders.js

@@ -171,6 +171,77 @@ function ViewOrders() {
         //   swal.close(); // Close the popup if canceled
         // }
       });
+    } else if (orderStatus === "cancelled") {
+      swal({
+        title: `Are you sure for ${orderStatus}?`,
+        icon: "warning",
+        content: {
+          element: "div",
+          attributes: {
+            innerHTML:
+              '<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
+          },
+        },
+        buttons: {
+          Yes: { text: "Submit", value: true },
+
+          Cancel: { text: "Cancel", value: "cancel" },
+        },
+      }).then((result) => {
+        if (result === true) {
+          // You have the input values, you can use them in your API call
+          const ReasonforCancellation = document
+            .getElementById("input1")
+            .value.trim();
+
+          // Check if values are entered
+          if (ReasonforCancellation === "") {
+            swal({
+              title: "Warning",
+              text: "Please enter Reason for Cancellation",
+              icon: "warning",
+              button: "Ok",
+              dangerMode: true,
+            });
+          } else {
+            axios
+              .patch(
+                `/api/order/change/status/${id}`,
+                {
+                  status: orderStatus,
+                  ReasonforCancellation,
+                },
+                {
+                  headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    Authorization: `Bearer ${token}`,
+                  },
+                }
+              )
+              .then((res) => {
+                console.log("status");
+                toast.success(
+                  `Order status change ${status} to ${orderStatus}`
+                );
+                // setSuccess((prev) => !prev);
+              })
+              .catch((err) => {
+                swal({
+                  title: "Warning",
+                  text: err.response.data.message
+                    ? err.response.data.message
+                    : "Something went wrong!",
+                  icon: "error",
+                  button: "Retry",
+                  dangerMode: true,
+                });
+              });
+          }
+        }
+        // else {
+        //   swal.close(); // Close the popup if canceled
+        // }
+      });
     } else if (orderStatus === "delivered") {
       swal({
         title: `Are you sure for ${orderStatus}?`,
@@ -451,9 +522,9 @@ function ViewOrders() {
                                           </div>
 
                                           <p className="m-0 mt-3 ms-3">
-                                            <stong> Total Price:</stong> ₹
+                                            <stong> Subtotal:</stong> ₹
                                             {productDetails?.quantity *
-                                              productDetails?.price}
+                                              productDetails?.total_Amount}
                                           </p>
                                         </div>
                                         <div className="col-sm-6">
@@ -461,6 +532,10 @@ function ViewOrders() {
                                             <stong> Price:</stong> ₹
                                             {productDetails?.price}
                                           </p>
+                                          <p className="m-0 mt-3">
+                                            <stong> GST:</stong> ₹
+                                            {productDetails?.gst_amount}
+                                          </p>
                                         </div>
                                       </div>
                                     </div>
@@ -629,9 +704,22 @@ function ViewOrders() {
                   <div className="card">
                     <div className="card-body">
                       <div className="mt-1">
-                        <h6 className="text-success">
+                        {orderDetails?.orderStatus !== "cancelled" ? (
-                          Order Status: {orderDetails?.orderStatus}
+                          <h5 className="text-success">
-                        </h6>
+                            Order Status: {orderDetails?.orderStatus}
+                          </h5>
+                        ) : (
+                          <>
+                            <h5 className="text-danger">
+                              Order Status: {orderDetails?.orderStatus}
+                            </h5>
+                            <p className="text-danger">
+                              {" "}
+                              Order Cancelled Reason:{" "}
+                              {orderDetails?.order_Cancelled_Reason}
+                            </p>
+                          </>
+                        )}
                         {/* order status change  */}{" "}
                         <div className="mb-2">
                           {" "}
@@ -712,7 +800,6 @@ function ViewOrders() {
                                                 <button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
                                             </div> */}
                       </div>
-
                       {orderDetails?.shipingInfo !== null && (
                         <div className="">
                           <div className="row" style={{ fontSize: "14px" }}>
@@ -775,7 +862,39 @@ function ViewOrders() {
                           )}
                         </label>
                       </div>
-                      <div className="mt-1">
+                      <div className="">
+                        <label>
+                          <span className="fw-bold">Payment Mode : </span>
+                          {orderDetails?.paymentMode === "online" ? (
+                            <span className="fw-bold text-success">ONLINE</span>
+                          ) : (
+                            <span className="fw-bold text-primary">
+                              CASH ON DELIVERY
+                            </span>
+                          )}
+                        </label>
+                      </div>
+
+                      <div className="">
+                        <label>
+                          <span className="fw-bold"> Paid At: </span>
+
+                          {orderDetails?.paidAt
+                            ? new Date(orderDetails?.paidAt).toLocaleString(
+                                "en-IN",
+                                {
+                                  month: "short",
+                                  day: "numeric",
+                                  year: "numeric",
+                                  hour: "2-digit",
+                                  minute: "numeric",
+                                  hour12: true,
+                                }
+                              )
+                            : "----"}
+                        </label>
+                      </div>
+                      <div className="">
                         <label>
                           <span className="fw-bold"> Order Created By: </span>
                           {orderDetails?.user?.name}
@@ -783,15 +902,20 @@ function ViewOrders() {
                       </div>
                       <div className="mt-1">
                         <label>
-                          <span className="fw-bold">paypal_payment_id : </span>
+                          <span className="fw-bold">
-                          {orderDetails?.paypal_payment_id}
+                            Razorpay Payment ID :{" "}
+                          </span>
+                          {orderDetails?.razorpay_payment_id
+                            ? orderDetails?.razorpay_payment_id
+                            : "----"}
                         </label>
                       </div>
-
+                      <div className="">
-                      <div className="mt-1">
                         <label>
-                          <span className="fw-bold">paypal_payer_id : </span>
+                          <span className="fw-bold">Razorpay Order ID : </span>
-                          {orderDetails?.paypal_payer_id}
+                          {orderDetails?.razorpay_order_id
+                            ? orderDetails?.razorpay_order_id
+                            : "----"}
                         </label>
                       </div>
                     </div>