gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://128.199.30.231/possibillion/smellika-admin

Browse Source
This commit is contained in:
Sibunnayak 2024-04-11 11:25:13 +05:30
commit eb51adde42
19 changed files with 2359 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/_nav.js
View File

@ -23,6 +23,7 @@ import {
cilText,
cilUser,
cilAlarm,
cilFeaturedPlaylist,
} from "@coreui/icons";
import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
@ -212,6 +213,12 @@ const _nav = [
icon: <CIcon icon={cilText} customClassName="nav-icon" />,
to: "/content",
},
{
component: CNavItem,
name: "Home",
icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
to: "/home",
},
],
},
{

2
src/index.js
View File

@ -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 = {

47
src/routes.js
View File

@ -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";
@ -122,6 +121,13 @@ 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 Home from "./views/Home/home";
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";
@ -172,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",
@ -312,6 +323,38 @@ const routes = [
element: EditAboutUs,
},
// Home
{
path: "/home",
name: "Home",
element: Home,
},
{
path: "/home/panel-1",
name: "EditPanel1",
element: EditPanel1,
},
{
path: "/home/panel-2",
name: "EditPanel2",
element: EditPanel2,
},
{
path: "/home/panel-3",
name: "EditPanel3",
element: EditPanel3,
},
{
path: "/home/panel-4",
name: "EditPanel4",
element: Editpanel4,
},
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
//Complaints
{

1
src/views/Content/editPrivacyPolicy.js
View File

@ -36,7 +36,6 @@ export default function EditPrivacyPolicy() {
});
if (response.status === 200) {
// console.log(response);
setContent(response?.data?.privacyAndPolicy[0]?.privacyAndPolicyContent);
setId(response?.data?.privacyAndPolicy[0]?._id);
setOlderContent(

403
src/views/Home/editPanel1.js Normal file
View File

@ -0,0 +1,403 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel1 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState(null);
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel1/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
setTitle(res?.data?.panel1[0]?.title);
setimage(res?.data?.panel1[0]?.image);
setContent(res?.data?.panel1[0]?.content);
setOlderContent(res?.data?.panel1[0]?.content);
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
setId(res?.data?.panel1[0]?._id);
setImg(false);
} catch (err) {
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel1/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 1 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel1/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<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">
Panel 1
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 1 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{ image !== null ? (
<Box marginRight={"2rem"}>
<img
src={image?.url || URL.createObjectURL(newUpdatedImages) || null}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
) : null}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel1;

409
src/views/Home/editPanel2.js Normal file
View File

@ -0,0 +1,409 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel2 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get panel data
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel2/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel2[0]?.title);
setimage(res?.data?.panel2[0]?.image);
setContent(res?.data?.panel2[0]?.content);
setOlderContent(res?.data?.panel2[0]?.content);
setDisplayPanel(res?.data?.panel2[0]?.displayPanel);
setId(res?.data?.panel2[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel2/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 2 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel2/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
console.log(olderContent)
if (olderContent?.length === 0 || olderContent===undefined) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<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">
Panel 2
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 2 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel2;

407
src/views/Home/editPanel3.js Normal file
View File

@ -0,0 +1,407 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel3 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel3/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel3[0]?.title);
setimage(res?.data?.panel3[0]?.image);
setContent(res?.data?.panel3[0]?.content);
setOlderContent(res?.data?.panel3[0]?.content);
setDisplayPanel(res?.data?.panel3[0]?.displayPanel);
setId(res?.data?.panel3[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel3/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 3 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel3/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<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">
Panel 3
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 3 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel3;

409
src/views/Home/editPanel4.js Normal file
View File

@ -0,0 +1,409 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const Editpanel4 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel4/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel4[0]?.title);
if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){
setimage(res?.data?.panel4[0]?.image);
}
setContent(res?.data?.panel4[0]?.content);
setOlderContent(res?.data?.panel4[0]?.content);
setDisplayPanel(res?.data?.panel4[0]?.displayPanel);
setId(res?.data?.panel4[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel4/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 4 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel4/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (!olderContent) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
return (
<div className="container">
<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">
Panel 4
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 4 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default Editpanel4;

165
src/views/Home/home.js Normal file
View File

@ -0,0 +1,165 @@
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { isAutheticated } from "src/auth";
export default function Home() {
const [displayPanel1,setDisplayPanel1] = useState("Not Displayed");
const [displayPanel2,setDisplayPanel2] = useState("Not Displayed");
const [displayPanel3,setDisplayPanel3] = useState("Not Displayed");
const [displayPanel4,setDisplayPanel4] = useState("Not Displayed");
const [loading, setLoading] = useState(false);
let token = isAutheticated();
async function getPanelStatus(){
try {
setLoading(true)
let response1 = await axios.get('/api/panel/panel1/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
})
let response2 = await axios.get('/api/panel/panel2/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response3 = await axios.get('/api/panel/panel3/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response4 = await axios.get('/api/panel/panel4/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
if(response1 && response2 && response3 && response4){
if(response1?.data?.panel1[0]?.displayPanel){
setDisplayPanel1("Displayed")
}
if(response2?.data?.panel2[0]?.displayPanel){
setDisplayPanel2("Displayed");
}
if(response3?.data?.panel3[0]?.displayPanel){
setDisplayPanel3("Displayed");
}
if(response4?.data?.panel4[0]?.displayPanel){
setDisplayPanel4("Displayed");
}
setLoading(false);
}
} catch (error) {
console.error(error);
}
}
useEffect(()=>{
getPanelStatus()
},[])
const pages = [
{
name: "Panel 1",
action: "Edit",
path: "/home/panel-1",
status:displayPanel1
},
{
name: "Panel 2",
action: "Edit",
path: "/home/panel-2",
status:displayPanel2
},
{
name: "Panel 3",
action: "Edit",
path: "/home/panel-3",
status:displayPanel3
},
{
name: "Panel 4",
action: "Edit",
path: "/home/panel-4",
status:displayPanel4
},
];
return (
<div className="main-home">
<Typography variant="h6" fontWeight={"bold"}>
Home
</Typography>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Display Status
</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{pages.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right" sx={{pr:4}}>
{loading ? "loading" : `${row.status}`}
</TableCell>
<TableCell align="right">
{" "}
<Link to={row.path}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
{row.action}
</button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

20
src/views/Products/AddProduct.js
View File

@ -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>

22
src/views/Products/EditProduct.js
View File

@ -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>

4
src/views/Products/ViewProduct.js
View File

@ -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>

6
src/views/customerDetails/userTable.js → src/views/customerDetails/customerTable.js
View File

@ -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
View 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" }}>&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;

2
src/views/orders/CancelledOrders.js
View File

@ -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>

2
src/views/orders/DispatchedOrders.js
View File

@ -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>

2
src/views/orders/NewOrders.js
View File

@ -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>

2
src/views/orders/ProcessingOrders.js
View File

@ -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>

150
src/views/orders/ViewOrders.js
View File

@ -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">
Order Status: {orderDetails?.orderStatus}
</h6>
{orderDetails?.orderStatus !== "cancelled" ? (
<h5 className="text-success">
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>
{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>