added panels
This commit is contained in:
syedmujahidahmed
commit
e596065709
43
src/_nav.js
43
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,
|
||||
|
||||
@ -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;
|
||||
|
||||
27
src/views/Charts/CityRevenue.js
Normal file
27
src/views/Charts/CityRevenue.js
Normal file
@ -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;
|
||||
27
src/views/Charts/OrderDaywise.js
Normal file
27
src/views/Charts/OrderDaywise.js
Normal file
@ -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;
|
||||
27
src/views/Charts/ProductRevenue.js
Normal file
27
src/views/Charts/ProductRevenue.js
Normal file
@ -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;
|
||||
27
src/views/Charts/RevenueCharts.js
Normal file
27
src/views/Charts/RevenueCharts.js
Normal file
@ -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;
|
||||
27
src/views/Charts/Staterevenue.js
Normal file
27
src/views/Charts/Staterevenue.js
Normal file
@ -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;
|
||||
27
src/views/Charts/UserChart.js
Normal file
27
src/views/Charts/UserChart.js
Normal file
@ -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;
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
324
src/views/customerDetails/singleUserAllDetails.js
Normal file
324
src/views/customerDetails/singleUserAllDetails.js
Normal file
@ -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" }}>• 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" }}>
|
||||
• Addresses{" "}
|
||||
</h5>
|
||||
<h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
|
||||
• 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" }}>
|
||||
• Orders{" "}
|
||||
</h5>
|
||||
<h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
|
||||
• Total Orders : {userOrder?.length}{" "}
|
||||
</h5>
|
||||
<h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
|
||||
• 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;
|
||||
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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" ? (
|
||||
<h5 className="text-success">
|
||||
Order Status: {orderDetails?.orderStatus}
|
||||
</h6>
|
||||
</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>
|
||||
{orderDetails?.paypal_payment_id}
|
||||
<span className="fw-bold">
|
||||
Razorpay Payment ID :{" "}
|
||||
</span>
|
||||
{orderDetails?.razorpay_payment_id
|
||||
? orderDetails?.razorpay_payment_id
|
||||
: "----"}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-1">
|
||||
<div className="">
|
||||
<label>
|
||||
<span className="fw-bold">paypal_payer_id : </span>
|
||||
{orderDetails?.paypal_payer_id}
|
||||
<span className="fw-bold">Razorpay Order ID : </span>
|
||||
{orderDetails?.razorpay_order_id
|
||||
? orderDetails?.razorpay_order_id
|
||||
: "----"}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user