view is done

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

@@ -91,7 +91,6 @@ import EditTermsConditions from "./views/Content/editTermsConditions";
 import EditShippingPolicy from "./views/Content/editShippingPolicy";
 import EditRefundpolicy from "./views/Content/editRefundPolicy";
 
-import UserTable from "./views/customerDetails/userTable";
 // import EditUserAddress from "./views/customerDetails/editUserAddress";
 // import AddUserAddress from "./views/customerDetails/addUserAddress";
 import viewDetails from "./views/customerDetails/viewDetails";
@@ -121,6 +120,8 @@ 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 CustomerTable from "./views/customerDetails/customerTable";
+import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
 const routes = [
   { path: "/", exact: true, name: "Home" },
   {
@@ -163,7 +164,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",

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;