manage order in all stges
This commit is contained in:
pawan-dot
commit
4a2bb5db3a
@ -13,7 +13,7 @@
|
||||
"license": "MIT",
|
||||
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
|
||||
"scripts": {
|
||||
"dev": "react-scripts start",
|
||||
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"build:n17": "react-scripts --openssl-legacy-provider build",
|
||||
"changelog": "auto-changelog --starting-version 4.1.0 --commit-limit false --hide-credit",
|
||||
|
||||
30
src/_nav.js
30
src/_nav.js
@ -66,12 +66,12 @@ const _nav = [
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/orders/new",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Paid",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/orders/returned",
|
||||
},
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: "Paid",
|
||||
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
// to: "/orders/returned",
|
||||
// },
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Processing",
|
||||
@ -109,6 +109,24 @@ const _nav = [
|
||||
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
|
||||
to: "/banner",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Register Image",
|
||||
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
|
||||
to: "/registerImage",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Login Image",
|
||||
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
|
||||
to: "/loginImage",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Shop Page Image",
|
||||
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
|
||||
to: "/shopImage",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Testimonials",
|
||||
|
||||
@ -73,9 +73,9 @@ const AppSidebar = () => {
|
||||
>
|
||||
{/* <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} /> */}
|
||||
|
||||
{HeaderlogoUrl ? (
|
||||
{AdminlogoUrl ? (
|
||||
<Link to="/dashboard">
|
||||
<img src={HeaderlogoUrl} alt="" width="100%" />
|
||||
<img src={AdminlogoUrl} alt="" width="100%" />
|
||||
</Link>
|
||||
) : { AppName } ? (
|
||||
<h2>The Solar Sign </h2>
|
||||
|
||||
@ -13,8 +13,8 @@ import { cibGmail } from "@coreui/icons";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const setupAxios = () => {
|
||||
//axios.defaults.baseURL = 'https://bolo-api.checkapp.one/'
|
||||
// axios.defaults.baseURL = "http://localhost:8000";
|
||||
|
||||
// axios.defaults.baseURL = "https://happy-sombrero-ray.cyclic.app/"; //->latest deployed
|
||||
axios.defaults.baseURL = "https://printsigns.onrender.com/"; //->latest deployed
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ import DispatchedOrders from "./views/orders/DispatchedOrders.js";
|
||||
import DeliveredOrders from "./views/orders/DeliveredOrders.js";
|
||||
import CancelledOrders from "./views/orders/CancelledOrders.js";
|
||||
import ReturnedOrders from "./views/orders/ReturnedOrders.js";
|
||||
import ViewOrder from "./views/orders/ViewOrder";
|
||||
import ViewOdr from "./views/orders/ViewOdr";
|
||||
import AddOrder from "./views/orders/AddOrder";
|
||||
//Taxes
|
||||
import Tax from "./views/configuration/tax/Tax";
|
||||
@ -93,6 +93,10 @@ import AddUserAddress from "./views/UserAddress/addUserAddress";
|
||||
import ViewAddress from "./views/UserAddress/viewAddress";
|
||||
import Design from "./views/Design/design";
|
||||
import Banners from "./views/Banner/banner";
|
||||
import RegisterImage from "./views/Images/RegisterImage";
|
||||
import LoginImage from "./views/Images/LoginImage";
|
||||
import ShopImage from "./views/Images/ShopImage";
|
||||
|
||||
const routes = [
|
||||
{ path: "/", exact: true, name: "Home" },
|
||||
{
|
||||
@ -176,7 +180,7 @@ const routes = [
|
||||
// },
|
||||
// Categories
|
||||
{
|
||||
path: "//categories",
|
||||
path: "/categories",
|
||||
name: "Categories",
|
||||
element: Categories,
|
||||
},
|
||||
@ -253,6 +257,21 @@ const routes = [
|
||||
name: "Banners",
|
||||
element: Banners,
|
||||
},
|
||||
{
|
||||
path: "/registerImage",
|
||||
name: "RegisterImage",
|
||||
element: RegisterImage,
|
||||
},
|
||||
{
|
||||
path: "/loginImage",
|
||||
name: "LoginImage",
|
||||
element: LoginImage,
|
||||
},
|
||||
{
|
||||
path: "/shopImage",
|
||||
name: "ShopImage",
|
||||
element: ShopImage,
|
||||
},
|
||||
{
|
||||
path: "/testimonial/view/:id",
|
||||
name: "ViewTestimonial",
|
||||
@ -271,14 +290,34 @@ const routes = [
|
||||
{ path: "/orders/new", name: "New Orders", element: NewOrders },
|
||||
{ path: "/order/add", name: "add Order", element: AddOrder },
|
||||
{ path: "/orders/edit/:id", name: "Edit Order", element: EditOrder },
|
||||
{ path: "/orders/view/:id", name: "View Order", element: ViewOrders },
|
||||
{ path: "/orders/:status/:id", name: "View Order", element: ViewOrders },
|
||||
|
||||
// { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
|
||||
// { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
|
||||
// { path: '/orders/delivered', name: 'Delivered Orders', element: DeliveredOrders },
|
||||
// { path: '/orders/cancelled', name: 'Cancelled Orders', element: CancelledOrders },
|
||||
// { path: '/orders/returned', name: 'Returned Orders', element: ReturnedOrders },
|
||||
{ path: "/order/:status/:id", name: "View Order", element: ViewOrder },
|
||||
{
|
||||
path: "/orders/processing",
|
||||
name: "Processing Orders",
|
||||
element: ProcessingOrders,
|
||||
},
|
||||
{
|
||||
path: "/orders/dispatched",
|
||||
name: "Dispatched Orders",
|
||||
element: DispatchedOrders,
|
||||
},
|
||||
{
|
||||
path: "/orders/delivered",
|
||||
name: "Delivered Orders",
|
||||
element: DeliveredOrders,
|
||||
},
|
||||
{
|
||||
path: "/orders/cancelled",
|
||||
name: "Cancelled Orders",
|
||||
element: CancelledOrders,
|
||||
},
|
||||
{
|
||||
path: "/orders/returned",
|
||||
name: "Returned Orders",
|
||||
element: ReturnedOrders,
|
||||
},
|
||||
// { path: "/order/:status/:id", name: "View Order", element: ViewOdr },
|
||||
|
||||
//dashboard
|
||||
|
||||
|
||||
@ -83,7 +83,8 @@ const Banners = () => {
|
||||
|
||||
useEffect(() => {
|
||||
getBanner();
|
||||
}, [token, banner]);
|
||||
}, []);
|
||||
// }, [token, banner]);
|
||||
|
||||
const handleEditClick = (_id, bannerName, bannerImage) => {
|
||||
setOpen(true);
|
||||
@ -310,7 +311,7 @@ const Banners = () => {
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
@ -324,7 +325,7 @@ const Banners = () => {
|
||||
// }}
|
||||
>
|
||||
Add New Banner
|
||||
</Button>
|
||||
</Button> */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
|
||||
709
src/views/Images/LoginImage.js
Normal file
709
src/views/Images/LoginImage.js
Normal file
@ -0,0 +1,709 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
IconButton,
|
||||
Modal,
|
||||
Pagination,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { ClipLoader } from "react-spinners";
|
||||
import swal from "sweetalert";
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "0.5rem",
|
||||
boxShadow: 24,
|
||||
width: "500px",
|
||||
};
|
||||
|
||||
const Banners = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [updating, setUpdating] = useState(true); // for loading state
|
||||
// const [isUpdate, setIsUpdate] = useState(false); // for edit state
|
||||
const [saveLoding, setSaveLoading] = useState(true);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [bannerName, setBannerName] = useState("");
|
||||
const [bannerImage, setBannerImage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [bannerId, setBannerId] = useState("");
|
||||
const [banner, setBanner] = useState([]);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [page, setPage] = useState(1);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [olderBannerName, setOlderBaannerName] = useState("");
|
||||
const [olderImage, setOlderImage] = useState("");
|
||||
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
// setUpdating(false);
|
||||
setEdit(false);
|
||||
|
||||
setBannerName("");
|
||||
setBannerId("");
|
||||
setOlderImage("");
|
||||
setBannerImage("");
|
||||
};
|
||||
|
||||
const getBanner = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/loginImage/getImage", {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
// console.log(response);
|
||||
setBanner(response?.data?.image);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
swal({
|
||||
title: error,
|
||||
text: " please login to access the resource ",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getBanner();
|
||||
}, []);
|
||||
// }, [token, banner]);
|
||||
|
||||
const handleEditClick = (_id, bannerImage) => {
|
||||
setOpen(true);
|
||||
console.log("bannerImage", bannerImage);
|
||||
setOlderImage(bannerImage);
|
||||
|
||||
setBannerId(_id);
|
||||
setOlderBaannerName(bannerName);
|
||||
setEdit(true);
|
||||
// setUpdating(false);
|
||||
};
|
||||
// const bannerNamesArray = [];
|
||||
// const setBannerNamesArray = () => {
|
||||
// banner &&
|
||||
// banner.map((banner) => {
|
||||
// bannerNamesArray.push(banner.bannerName.toLowerCase());
|
||||
// });
|
||||
// };
|
||||
// setBannerNamesArray();
|
||||
|
||||
const handleUpdate = () => {
|
||||
// const filteredArrayNames = bannerNamesArray.filter(
|
||||
// (item) => item !== olderBannerName.toLowerCase()
|
||||
// );
|
||||
// console.log(filteredArrayNames, "filter");
|
||||
// const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase());
|
||||
// if (bannerExits) {
|
||||
// swal({
|
||||
// title: "Warning",
|
||||
// text: "Banner already exists ",
|
||||
// icon: "error",
|
||||
// button: "Retry",
|
||||
// dangerMode: true,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
if ((!bannerImage && !olderImage)) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setUpdating(false);
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
formData.append("olderImage", JSON.stringify(olderImage));
|
||||
|
||||
axios
|
||||
.patch(`/api/loginImage/update/${bannerId}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// setUpdating(true);
|
||||
// setIsUpdate(false);
|
||||
handleClose();
|
||||
setBannerId("");
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
setUpdating(true);
|
||||
setEdit(false);
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was updated successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after updating
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
swal({
|
||||
title: "Sorry, please try again",
|
||||
text: err,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
setUpdating(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (_id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
icon: "error",
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/loginImage/delete/${_id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was deleted successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after deleting
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: "",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveBanner = async () => {
|
||||
// const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase());
|
||||
// if (bannerExits) {
|
||||
// swal({
|
||||
// title: "Warning",
|
||||
// text: "Banner Already exits.",
|
||||
// icon: "error",
|
||||
// button: "Retry",
|
||||
// dangerMode: true,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
if (!bannerImage) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSaveLoading(false);
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append("bannerName", bannerName);
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
axios
|
||||
.post("/api/loginImage/add", formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 201) {
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
setSaveLoading(true);
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
swal({
|
||||
title: "Added",
|
||||
text: "New Banner added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after adding
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setSaveLoading(true);
|
||||
swal({
|
||||
title: error,
|
||||
text: "something went wrong",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
// const getPageCount = () => {
|
||||
// return Math.max(1, Math.ceil(banner?.length / itemPerPage));
|
||||
// };
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files[0];
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
if (allowedTypes.includes(files.type)) {
|
||||
setBannerImage(files);
|
||||
}
|
||||
};
|
||||
const handeldeleteImage = () => {
|
||||
setBannerImage("");
|
||||
};
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<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">
|
||||
Login Image
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Banner
|
||||
</Button> */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
{/* <Box p={2} display={"flex"}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="body"
|
||||
component="h2"
|
||||
flex={1}
|
||||
>
|
||||
Banner Name
|
||||
</Typography>
|
||||
<IconButton onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box> */}
|
||||
{/* <hr /> */}
|
||||
{/* <TextField
|
||||
placeholder="Banner name"
|
||||
value={bannerName}
|
||||
fullWidth
|
||||
inputProps={{
|
||||
maxLength: 25,
|
||||
}}
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
onChange={(e) =>
|
||||
setBannerName(
|
||||
e.target.value.charAt(0).toUpperCase() +
|
||||
e.target.value.slice(1)
|
||||
)
|
||||
}
|
||||
/> */}
|
||||
{/* {bannerName ? (
|
||||
<>
|
||||
<small className="charLeft mt-2 ml-3 fst-italic">
|
||||
{25 - bannerName.length} characters left
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)} */}
|
||||
|
||||
<Box
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<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"
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "140px",
|
||||
height: "140px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
{bannerImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={URL.createObjectURL(bannerImage)}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handeldeleteImage()}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{olderImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={olderImage?.secure_url}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => setOlderImage("")}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<p className="pt-1 pl-2 text-secondary">
|
||||
Upload jpg, jpeg and png only*
|
||||
</p>
|
||||
|
||||
<Box
|
||||
p={2}
|
||||
display={"flex"}
|
||||
justifyContent={"right"}
|
||||
// width={"500px"}
|
||||
>
|
||||
{!edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleSaveBanner()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!saveLoding} size={18} />
|
||||
{saveLoding && "Save"}
|
||||
</button>
|
||||
)}
|
||||
{edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleUpdate()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!updating} size={18} />
|
||||
{updating && "update"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
style={{
|
||||
color: "black",
|
||||
marginRight: "1rem",
|
||||
background: "grey",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
{/* <div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
onChange={(e) => setItemPerPage(e.target.value)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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> Image</th>
|
||||
|
||||
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && banner?.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Image
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
banner &&
|
||||
banner
|
||||
.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<img
|
||||
className="me-2"
|
||||
src={item?.image?.secure_url}
|
||||
width="40"
|
||||
alt=""
|
||||
/>
|
||||
{/* {item?.image} */}
|
||||
<h5>{ } </h5>
|
||||
</td>
|
||||
{/* <td>
|
||||
<h5>{item.bannerName} </h5>
|
||||
</td> */}
|
||||
<td className="text-start">
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1 "
|
||||
onClick={() =>
|
||||
handleEditClick(
|
||||
item._id,
|
||||
item.image
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{/* <button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm btn-primary
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
>
|
||||
view
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div style={{ display: "flex", justifyContent: "right" }}>
|
||||
<Pagination
|
||||
style={{ margin: "2rem" }}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
count={getPageCount()}
|
||||
color="primary"
|
||||
onChange={(event, value) => setPage(value)}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banners;
|
||||
709
src/views/Images/RegisterImage.js
Normal file
709
src/views/Images/RegisterImage.js
Normal file
@ -0,0 +1,709 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
IconButton,
|
||||
Modal,
|
||||
Pagination,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { ClipLoader } from "react-spinners";
|
||||
import swal from "sweetalert";
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "0.5rem",
|
||||
boxShadow: 24,
|
||||
width: "500px",
|
||||
};
|
||||
|
||||
const Banners = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [updating, setUpdating] = useState(true); // for loading state
|
||||
// const [isUpdate, setIsUpdate] = useState(false); // for edit state
|
||||
const [saveLoding, setSaveLoading] = useState(true);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [bannerName, setBannerName] = useState("");
|
||||
const [bannerImage, setBannerImage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [bannerId, setBannerId] = useState("");
|
||||
const [banner, setBanner] = useState([]);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [page, setPage] = useState(1);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [olderBannerName, setOlderBaannerName] = useState("");
|
||||
const [olderImage, setOlderImage] = useState("");
|
||||
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
// setUpdating(false);
|
||||
setEdit(false);
|
||||
|
||||
setBannerName("");
|
||||
setBannerId("");
|
||||
setOlderImage("");
|
||||
setBannerImage("");
|
||||
};
|
||||
|
||||
const getBanner = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/registerImage/getImage", {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
// console.log(response);
|
||||
setBanner(response?.data?.image);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
swal({
|
||||
title: error,
|
||||
text: " please login to access the resource ",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getBanner();
|
||||
}, []);
|
||||
// }, [token, banner]);
|
||||
|
||||
const handleEditClick = (_id, bannerImage) => {
|
||||
setOpen(true);
|
||||
console.log("bannerImage", bannerImage);
|
||||
setOlderImage(bannerImage);
|
||||
|
||||
setBannerId(_id);
|
||||
setOlderBaannerName(bannerName);
|
||||
setEdit(true);
|
||||
// setUpdating(false);
|
||||
};
|
||||
// const bannerNamesArray = [];
|
||||
// const setBannerNamesArray = () => {
|
||||
// banner &&
|
||||
// banner.map((banner) => {
|
||||
// bannerNamesArray.push(banner.bannerName.toLowerCase());
|
||||
// });
|
||||
// };
|
||||
// setBannerNamesArray();
|
||||
|
||||
const handleUpdate = () => {
|
||||
// const filteredArrayNames = bannerNamesArray.filter(
|
||||
// (item) => item !== olderBannerName.toLowerCase()
|
||||
// );
|
||||
// console.log(filteredArrayNames, "filter");
|
||||
// const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase());
|
||||
// if (bannerExits) {
|
||||
// swal({
|
||||
// title: "Warning",
|
||||
// text: "Banner already exists ",
|
||||
// icon: "error",
|
||||
// button: "Retry",
|
||||
// dangerMode: true,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
if ((!bannerImage && !olderImage)) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setUpdating(false);
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
formData.append("olderImage", JSON.stringify(olderImage));
|
||||
|
||||
axios
|
||||
.patch(`/api/registerImage/update/${bannerId}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// setUpdating(true);
|
||||
// setIsUpdate(false);
|
||||
handleClose();
|
||||
setBannerId("");
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
setUpdating(true);
|
||||
setEdit(false);
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was updated successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after updating
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
swal({
|
||||
title: "Sorry, please try again",
|
||||
text: err,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
setUpdating(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (_id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
icon: "error",
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/registerImage/delete/${_id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was deleted successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after deleting
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: "",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveBanner = async () => {
|
||||
const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase());
|
||||
if (bannerExits) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Banner Already exits.",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!bannerImage) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSaveLoading(false);
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append("bannerName", bannerName);
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
axios
|
||||
.post("/api/registerImage/add", formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 201) {
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
setSaveLoading(true);
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
swal({
|
||||
title: "Added",
|
||||
text: "New Banner added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after adding
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setSaveLoading(true);
|
||||
swal({
|
||||
title: error,
|
||||
text: "something went wrong",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
// const getPageCount = () => {
|
||||
// return Math.max(1, Math.ceil(banner?.length / itemPerPage));
|
||||
// };
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files[0];
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
if (allowedTypes.includes(files.type)) {
|
||||
setBannerImage(files);
|
||||
}
|
||||
};
|
||||
const handeldeleteImage = () => {
|
||||
setBannerImage("");
|
||||
};
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<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">
|
||||
Register Image
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Banner
|
||||
</Button> */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
{/* <Box p={2} display={"flex"}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="body"
|
||||
component="h2"
|
||||
flex={1}
|
||||
>
|
||||
Banner Name
|
||||
</Typography>
|
||||
<IconButton onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box> */}
|
||||
{/* <hr /> */}
|
||||
{/* <TextField
|
||||
placeholder="Banner name"
|
||||
value={bannerName}
|
||||
fullWidth
|
||||
inputProps={{
|
||||
maxLength: 25,
|
||||
}}
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
onChange={(e) =>
|
||||
setBannerName(
|
||||
e.target.value.charAt(0).toUpperCase() +
|
||||
e.target.value.slice(1)
|
||||
)
|
||||
}
|
||||
/> */}
|
||||
{/* {bannerName ? (
|
||||
<>
|
||||
<small className="charLeft mt-2 ml-3 fst-italic">
|
||||
{25 - bannerName.length} characters left
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)} */}
|
||||
|
||||
<Box
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<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"
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "140px",
|
||||
height: "140px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
{bannerImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={URL.createObjectURL(bannerImage)}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handeldeleteImage()}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{olderImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={olderImage?.secure_url}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => setOlderImage("")}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<p className="pt-1 pl-2 text-secondary">
|
||||
Upload jpg, jpeg and png only*
|
||||
</p>
|
||||
|
||||
<Box
|
||||
p={2}
|
||||
display={"flex"}
|
||||
justifyContent={"right"}
|
||||
// width={"500px"}
|
||||
>
|
||||
{!edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleSaveBanner()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!saveLoding} size={18} />
|
||||
{saveLoding && "Save"}
|
||||
</button>
|
||||
)}
|
||||
{edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleUpdate()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!updating} size={18} />
|
||||
{updating && "update"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
style={{
|
||||
color: "black",
|
||||
marginRight: "1rem",
|
||||
background: "grey",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
{/* <div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
onChange={(e) => setItemPerPage(e.target.value)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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> Image</th>
|
||||
|
||||
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && banner?.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Image
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
banner &&
|
||||
banner
|
||||
.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<img
|
||||
className="me-2"
|
||||
src={item?.image?.secure_url}
|
||||
width="40"
|
||||
alt=""
|
||||
/>
|
||||
{/* {item?.image} */}
|
||||
<h5>{ } </h5>
|
||||
</td>
|
||||
{/* <td>
|
||||
<h5>{item.bannerName} </h5>
|
||||
</td> */}
|
||||
<td className="text-start">
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1 "
|
||||
onClick={() =>
|
||||
handleEditClick(
|
||||
item._id,
|
||||
item.image
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{/* <button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm btn-primary
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
>
|
||||
view
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div style={{ display: "flex", justifyContent: "right" }}>
|
||||
<Pagination
|
||||
style={{ margin: "2rem" }}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
count={getPageCount()}
|
||||
color="primary"
|
||||
onChange={(event, value) => setPage(value)}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banners;
|
||||
709
src/views/Images/ShopImage.js
Normal file
709
src/views/Images/ShopImage.js
Normal file
@ -0,0 +1,709 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
IconButton,
|
||||
Modal,
|
||||
Pagination,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { ClipLoader } from "react-spinners";
|
||||
import swal from "sweetalert";
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "0.5rem",
|
||||
boxShadow: 24,
|
||||
width: "500px",
|
||||
};
|
||||
|
||||
const Banners = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [updating, setUpdating] = useState(true); // for loading state
|
||||
// const [isUpdate, setIsUpdate] = useState(false); // for edit state
|
||||
const [saveLoding, setSaveLoading] = useState(true);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [bannerName, setBannerName] = useState("");
|
||||
const [bannerImage, setBannerImage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [bannerId, setBannerId] = useState("");
|
||||
const [banner, setBanner] = useState([]);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [page, setPage] = useState(1);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [olderBannerName, setOlderBaannerName] = useState("");
|
||||
const [olderImage, setOlderImage] = useState("");
|
||||
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
// setUpdating(false);
|
||||
setEdit(false);
|
||||
|
||||
setBannerName("");
|
||||
setBannerId("");
|
||||
setOlderImage("");
|
||||
setBannerImage("");
|
||||
};
|
||||
|
||||
const getBanner = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/shopImage/getImage", {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
// console.log(response);
|
||||
setBanner(response?.data?.image);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
swal({
|
||||
title: error,
|
||||
text: " please login to access the resource ",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getBanner();
|
||||
}, []);
|
||||
// }, [token, banner]);
|
||||
|
||||
const handleEditClick = (_id, bannerImage) => {
|
||||
setOpen(true);
|
||||
console.log("bannerImage", bannerImage);
|
||||
setOlderImage(bannerImage);
|
||||
|
||||
setBannerId(_id);
|
||||
setOlderBaannerName(bannerName);
|
||||
setEdit(true);
|
||||
// setUpdating(false);
|
||||
};
|
||||
// const bannerNamesArray = [];
|
||||
// const setBannerNamesArray = () => {
|
||||
// banner &&
|
||||
// banner.map((banner) => {
|
||||
// bannerNamesArray.push(banner.bannerName.toLowerCase());
|
||||
// });
|
||||
// };
|
||||
// setBannerNamesArray();
|
||||
|
||||
const handleUpdate = () => {
|
||||
// const filteredArrayNames = bannerNamesArray.filter(
|
||||
// (item) => item !== olderBannerName.toLowerCase()
|
||||
// );
|
||||
// console.log(filteredArrayNames, "filter");
|
||||
// const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase());
|
||||
// if (bannerExits) {
|
||||
// swal({
|
||||
// title: "Warning",
|
||||
// text: "Banner already exists ",
|
||||
// icon: "error",
|
||||
// button: "Retry",
|
||||
// dangerMode: true,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
if ((!bannerImage && !olderImage)) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setUpdating(false);
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
formData.append("olderImage", JSON.stringify(olderImage));
|
||||
|
||||
axios
|
||||
.patch(`/api/shopImage/update/${bannerId}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// setUpdating(true);
|
||||
// setIsUpdate(false);
|
||||
handleClose();
|
||||
setBannerId("");
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
setUpdating(true);
|
||||
setEdit(false);
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was updated successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after updating
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
swal({
|
||||
title: "Sorry, please try again",
|
||||
text: err,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
setUpdating(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (_id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
icon: "error",
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/shopImage/delete/${_id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "The banner was deleted successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after deleting
|
||||
})
|
||||
.catch((err) => {
|
||||
swal({
|
||||
title: "",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveBanner = async () => {
|
||||
// const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase());
|
||||
// if (bannerExits) {
|
||||
// swal({
|
||||
// title: "Warning",
|
||||
// text: "Banner Already exits.",
|
||||
// icon: "error",
|
||||
// button: "Retry",
|
||||
// dangerMode: true,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
if (!bannerImage) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill all the required fields!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSaveLoading(false);
|
||||
setLoading(true);
|
||||
const formData = new FormData();
|
||||
formData.append("bannerName", bannerName);
|
||||
formData.append("bannerImage", bannerImage);
|
||||
|
||||
axios
|
||||
.post("/api/shopImage/add", formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/formdata",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 201) {
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
setSaveLoading(true);
|
||||
setBannerName("");
|
||||
setBannerImage("");
|
||||
setOlderImage("");
|
||||
swal({
|
||||
title: "Added",
|
||||
text: "New Banner added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
// getCategories(); // Refresh the category list after adding
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setSaveLoading(true);
|
||||
swal({
|
||||
title: error,
|
||||
text: "something went wrong",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
// const getPageCount = () => {
|
||||
// return Math.max(1, Math.ceil(banner?.length / itemPerPage));
|
||||
// };
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files[0];
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
if (allowedTypes.includes(files.type)) {
|
||||
setBannerImage(files);
|
||||
}
|
||||
};
|
||||
const handeldeleteImage = () => {
|
||||
setBannerImage("");
|
||||
};
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<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">
|
||||
Shop Page Image
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Banner
|
||||
</Button> */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
{/* <Box p={2} display={"flex"}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="body"
|
||||
component="h2"
|
||||
flex={1}
|
||||
>
|
||||
Banner Name
|
||||
</Typography>
|
||||
<IconButton onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box> */}
|
||||
{/* <hr /> */}
|
||||
{/* <TextField
|
||||
placeholder="Banner name"
|
||||
value={bannerName}
|
||||
fullWidth
|
||||
inputProps={{
|
||||
maxLength: 25,
|
||||
}}
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
onChange={(e) =>
|
||||
setBannerName(
|
||||
e.target.value.charAt(0).toUpperCase() +
|
||||
e.target.value.slice(1)
|
||||
)
|
||||
}
|
||||
/> */}
|
||||
{/* {bannerName ? (
|
||||
<>
|
||||
<small className="charLeft mt-2 ml-3 fst-italic">
|
||||
{25 - bannerName.length} characters left
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)} */}
|
||||
|
||||
<Box
|
||||
style={{
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<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"
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "140px",
|
||||
height: "140px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
{bannerImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={URL.createObjectURL(bannerImage)}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handeldeleteImage()}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{olderImage && (
|
||||
<Box>
|
||||
<img
|
||||
src={olderImage?.secure_url}
|
||||
alt="bannerImage"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: "1rem",
|
||||
marginLeft: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => setOlderImage("")}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<p className="pt-1 pl-2 text-secondary">
|
||||
Upload jpg, jpeg and png only*
|
||||
</p>
|
||||
|
||||
<Box
|
||||
p={2}
|
||||
display={"flex"}
|
||||
justifyContent={"right"}
|
||||
// width={"500px"}
|
||||
>
|
||||
{!edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleSaveBanner()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!saveLoding} size={18} />
|
||||
{saveLoding && "Save"}
|
||||
</button>
|
||||
)}
|
||||
{edit && (
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => handleUpdate()}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
<ClipLoader loading={!updating} size={18} />
|
||||
{updating && "update"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
style={{
|
||||
color: "black",
|
||||
marginRight: "1rem",
|
||||
background: "grey",
|
||||
}}
|
||||
onClick={() => setOpen(false)}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
{/* <div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
onChange={(e) => setItemPerPage(e.target.value)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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> Image</th>
|
||||
|
||||
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && banner?.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
// onClick={() => {
|
||||
// navigate("/testimonial/new", { replace: true });
|
||||
// }}
|
||||
>
|
||||
Add New Image
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
banner &&
|
||||
banner
|
||||
.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<img
|
||||
className="me-2"
|
||||
src={item?.image?.secure_url}
|
||||
width="40"
|
||||
alt=""
|
||||
/>
|
||||
{/* {item?.image} */}
|
||||
<h5>{ } </h5>
|
||||
</td>
|
||||
{/* <td>
|
||||
<h5>{item.bannerName} </h5>
|
||||
</td> */}
|
||||
<td className="text-start">
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1 "
|
||||
onClick={() =>
|
||||
handleEditClick(
|
||||
item._id,
|
||||
item.image
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{/* <button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-sm btn-primary
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mx-1
|
||||
mt-1
|
||||
"
|
||||
onClick={() => handleDelete(item._id)}
|
||||
>
|
||||
view
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* <div style={{ display: "flex", justifyContent: "right" }}>
|
||||
<Pagination
|
||||
style={{ margin: "2rem" }}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
count={getPageCount()}
|
||||
color="primary"
|
||||
onChange={(event, value) => setPage(value)}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banners;
|
||||
@ -18,6 +18,8 @@ function Address() {
|
||||
const [website, setWebsite] = useState("");
|
||||
const [contact, setContact] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [latitude, setLatitude] = useState("");
|
||||
const [longitude, setLongitude] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
async function getConfiguration() {
|
||||
@ -37,6 +39,8 @@ function Address() {
|
||||
setWebsite(el.website);
|
||||
setContact(el.contact);
|
||||
setEmail(el.email);
|
||||
setLatitude(el.latitude);
|
||||
setLongitude(el.longitude);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -61,10 +65,30 @@ function Address() {
|
||||
setContact(e.target.value);
|
||||
} else if (e.target.name.toLowerCase() === "email") {
|
||||
setEmail(e.target.value);
|
||||
} else if (e.target.name.toLowerCase() === "latitude") {
|
||||
setLatitude(e.target.value);
|
||||
} else if (e.target.name.toLowerCase() === "longitude") {
|
||||
setLongitude(e.target.value);
|
||||
}
|
||||
}
|
||||
async function handelSubmit() {
|
||||
setLoading(true);
|
||||
if (
|
||||
!company ||
|
||||
!address ||
|
||||
!city ||
|
||||
!state ||
|
||||
!country ||
|
||||
!pincode ||
|
||||
!website ||
|
||||
!contact ||
|
||||
!email ||
|
||||
!longitude ||
|
||||
!latitude
|
||||
) {
|
||||
setLoading(false);
|
||||
return swal("Fill all the required filed!");
|
||||
}
|
||||
let data = {
|
||||
company,
|
||||
address,
|
||||
@ -75,7 +99,10 @@ function Address() {
|
||||
website,
|
||||
contact,
|
||||
email,
|
||||
longitude,
|
||||
latitude,
|
||||
};
|
||||
|
||||
let res = await axios.post(`/api/config/address`, data, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -85,7 +112,11 @@ function Address() {
|
||||
if (res) {
|
||||
setLoading(false);
|
||||
console.log(res);
|
||||
swal("Success!", res.data.message, res.data.status);
|
||||
|
||||
swal("Success!", res.data.message);
|
||||
} else {
|
||||
setLoading(false);
|
||||
swal("something went wrong!", res.data.message);
|
||||
}
|
||||
}
|
||||
|
||||
@ -233,6 +264,34 @@ function Address() {
|
||||
className="form-control input-field "
|
||||
id="basicpill-phoneno-input"
|
||||
/>
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100 mt-3"
|
||||
>
|
||||
Latitude
|
||||
</label>
|
||||
<input
|
||||
value={latitude}
|
||||
type="text"
|
||||
name="latitude"
|
||||
onChange={(e) => handelChange(e)}
|
||||
className="form-control input-field "
|
||||
id="basicpill-phoneno-input"
|
||||
/>
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100 mt-3"
|
||||
>
|
||||
Longitude
|
||||
</label>
|
||||
<input
|
||||
value={longitude}
|
||||
type="text"
|
||||
name="longitude"
|
||||
onChange={(e) => handelChange(e)}
|
||||
className="form-control input-field "
|
||||
id="basicpill-phoneno-input"
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import swal from 'sweetalert'
|
||||
import ClipLoader from 'react-spinners/ClipLoader'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import swal from "sweetalert";
|
||||
import ClipLoader from "react-spinners/ClipLoader";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
function Logo() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [Headerlogo, setHeaderlogo] = useState('')
|
||||
const [Footerlogo, setFooterlogo] = useState('')
|
||||
const [Adminlogo, setAdminlogo] = useState('')
|
||||
const [display, setDisplay] = useState(true)
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [Headerlogo, setHeaderlogo] = useState("");
|
||||
const [Footerlogo, setFooterlogo] = useState("");
|
||||
const [Adminlogo, setAdminlogo] = useState("");
|
||||
const [display, setDisplay] = useState(true);
|
||||
const token = isAutheticated();
|
||||
|
||||
// urlcreated images
|
||||
|
||||
const [HeaderlogoUrl, setHeaderlogoUrl] = useState('')
|
||||
const [FooterlogoUrl, setFooterlogoUrl] = useState('')
|
||||
const [AdminlogoUrl, setAdminlogoUrl] = useState('')
|
||||
const [HeaderlogoUrl, setHeaderlogoUrl] = useState("");
|
||||
const [FooterlogoUrl, setFooterlogoUrl] = useState("");
|
||||
const [AdminlogoUrl, setAdminlogoUrl] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
async function getConfiguration() {
|
||||
@ -26,16 +26,16 @@ function Logo() {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
configDetails.data.result.map((item) => {
|
||||
setHeaderlogo(item?.logo[0]?.Headerlogo)
|
||||
setFooterlogo(item?.logo[0]?.Footerlogo)
|
||||
setAdminlogo(item?.logo[0]?.Adminlogo)
|
||||
})
|
||||
setHeaderlogo(item?.logo[0]?.Headerlogo);
|
||||
setFooterlogo(item?.logo[0]?.Footerlogo);
|
||||
setAdminlogo(item?.logo[0]?.Adminlogo);
|
||||
});
|
||||
}
|
||||
getConfiguration()
|
||||
}, [])
|
||||
getConfiguration();
|
||||
}, []);
|
||||
|
||||
// async function handelChange(e) {
|
||||
// setDisplay(false);
|
||||
@ -51,26 +51,28 @@ function Logo() {
|
||||
// }
|
||||
|
||||
async function handelSubmit() {
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
|
||||
const formdata = new FormData()
|
||||
formdata.append('Headerlogo', Headerlogo)
|
||||
formdata.append('Footerlogo', Footerlogo)
|
||||
formdata.append('Adminlogo', Adminlogo)
|
||||
const formdata = new FormData();
|
||||
formdata.append("Headerlogo", Headerlogo);
|
||||
formdata.append("Footerlogo", Footerlogo);
|
||||
formdata.append("Adminlogo", Adminlogo);
|
||||
|
||||
await axios.post(`/api/config/logo`, formdata, {
|
||||
await axios
|
||||
.post(`/api/config/logo`, formdata, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
"Content-Type": "multipart/formdata",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
}).then((res) => {
|
||||
setLoading(false)
|
||||
swal('Success!', res.data.message, res.data.status)
|
||||
}
|
||||
).catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.then((res) => {
|
||||
setLoading(false);
|
||||
swal("Success!", res.data.message, res.data.status);
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@ -94,94 +96,122 @@ function Logo() {
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100 mt-3"
|
||||
style={{ fontWeight: "bold" }}
|
||||
>
|
||||
{/* Logo htmlFor Website Header(148 x 48 px) */}
|
||||
Header Logo for user Website <br />
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
name="Logo htmlFor Website Header(148 x 48 px)"
|
||||
onChange={(e) => {
|
||||
setHeaderlogo(e.target.files[0])
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setHeaderlogo(e.target.files[0]);
|
||||
if (
|
||||
e.target.files &&
|
||||
e.target.files[0]
|
||||
) {
|
||||
setHeaderlogoUrl({
|
||||
image: URL.createObjectURL(e.target.files[0]),
|
||||
})
|
||||
console.log(setHeaderlogoUrl)
|
||||
image: URL.createObjectURL(
|
||||
e.target.files[0]
|
||||
),
|
||||
});
|
||||
console.log(setHeaderlogoUrl);
|
||||
}
|
||||
}}
|
||||
className="form-control input-field mb-3 col-md-6 d-inline-block"
|
||||
id="basicpill-phoneno-input"
|
||||
/>
|
||||
{display ? (
|
||||
<img className='ms-1'
|
||||
style={{ width: '100px' }}
|
||||
src={HeaderlogoUrl.image ? HeaderlogoUrl.image : Headerlogo}
|
||||
alt="header logo"
|
||||
<img
|
||||
className="ms-1"
|
||||
style={{ width: "100px" }}
|
||||
src={
|
||||
HeaderlogoUrl.image
|
||||
? HeaderlogoUrl.image
|
||||
: Headerlogo
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100 mt-3"
|
||||
style={{ fontWeight: "bold" }}
|
||||
>
|
||||
{/* Logo htmlFor Website Footer(148 x 48 px) */}
|
||||
Footer logo for user Website <br />
|
||||
</label>
|
||||
<br />
|
||||
<input
|
||||
type="file"
|
||||
name="Logo htmlFor Website Footer(148 x 48 px)"
|
||||
onChange={(e) => {
|
||||
setFooterlogo(e.target.files[0])
|
||||
setFooterlogo(e.target.files[0]);
|
||||
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFooterlogoUrl({
|
||||
image: URL.createObjectURL(e.target.files[0]),
|
||||
})
|
||||
image: URL.createObjectURL(
|
||||
e.target.files[0]
|
||||
),
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="form-control input-field mt-1 col-md-6 d-inline-block"
|
||||
id="basicpill-phoneno-input"
|
||||
/>{' '}
|
||||
/>{" "}
|
||||
{display ? (
|
||||
<img
|
||||
style={{ width: '100px' }}
|
||||
src={FooterlogoUrl.image ? FooterlogoUrl.image : Footerlogo}
|
||||
alt="Footer logo"
|
||||
style={{ width: "100px" }}
|
||||
src={
|
||||
FooterlogoUrl.image
|
||||
? FooterlogoUrl.image
|
||||
: Footerlogo
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
<label
|
||||
htmlFor="basicpill-phoneno-input"
|
||||
className="label-100 mt-2 row ms-1"
|
||||
style={{ fontWeight: "bold" }}
|
||||
>
|
||||
{/* Logo htmlFor Admin Header(148 x 48 px) */}
|
||||
Logo for admin website <br />
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
name="Logo htmlFor Admin Header(148 x 48 px)"
|
||||
onChange={(e) => {
|
||||
setAdminlogo(e.target.files[0])
|
||||
setAdminlogo(e.target.files[0]);
|
||||
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setAdminlogoUrl({
|
||||
image: URL.createObjectURL(e.target.files[0]),
|
||||
})
|
||||
image: URL.createObjectURL(
|
||||
e.target.files[0]
|
||||
),
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="form-control input-field col-md-6 d-inline-block"
|
||||
id="basicpill-phoneno-input"
|
||||
/>{' '}
|
||||
/>{" "}
|
||||
{display ? (
|
||||
<img
|
||||
style={{ width: '100px' }}
|
||||
src={AdminlogoUrl.image ? AdminlogoUrl.image : Adminlogo}
|
||||
alt="Admin logo"
|
||||
style={{ width: "100px" }}
|
||||
src={
|
||||
AdminlogoUrl.image
|
||||
? AdminlogoUrl.image
|
||||
: Adminlogo
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
@ -192,11 +222,16 @@ function Logo() {
|
||||
<div className="form-group text-left">
|
||||
<button
|
||||
type="button"
|
||||
disabled={
|
||||
Adminlogo === "" ||
|
||||
Footerlogo === "" ||
|
||||
Headerlogo === ""
|
||||
}
|
||||
onClick={handelSubmit}
|
||||
className="btn btn-success btn-login waves-effect waves-light mr-3 pt-2 pb-2 pr-4 pl-4"
|
||||
>
|
||||
<ClipLoader loading={loading} size={18} />
|
||||
{!loading && 'Save'}
|
||||
{!loading && "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,7 +251,7 @@ function Logo() {
|
||||
{/* <!-- End Page-content --> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo
|
||||
export default Logo;
|
||||
|
||||
@ -13,7 +13,8 @@ function Socialmedia() {
|
||||
const [instagram, setInstagram] = useState('')
|
||||
const [twitter, setTwitter] = useState('')
|
||||
const [linkedin, setLinkedin] = useState('')
|
||||
|
||||
const [youtube, setYoutube] = useState('')
|
||||
console.log("youtube", youtube);
|
||||
useEffect(() => {
|
||||
async function getConfiguration() {
|
||||
const configDetails = await axios.get(`/api/config`, {
|
||||
@ -21,12 +22,14 @@ function Socialmedia() {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
|
||||
configDetails.data.result.map((item) => {
|
||||
console.log(item.socialMedia)
|
||||
setFacebook(item?.socialMedia[0]?.facebook)
|
||||
setInstagram(item?.socialMedia[0]?.instagram)
|
||||
setTwitter(item?.socialMedia[0]?.twitter)
|
||||
setLinkedin(item?.socialMedia[0]?.linkedin)
|
||||
setYoutube(item?.socialMedia[0]?.youtube)
|
||||
})
|
||||
}
|
||||
getConfiguration()
|
||||
@ -41,6 +44,8 @@ function Socialmedia() {
|
||||
setInstagram(e.target.value)
|
||||
} else if (e.target.name === 'linkedin') {
|
||||
setLinkedin(e.target.value)
|
||||
} else if (e.target.name === 'youtube') {
|
||||
setYoutube(e.target.value)
|
||||
}
|
||||
}
|
||||
async function handelSubmit() {
|
||||
@ -50,6 +55,7 @@ function Socialmedia() {
|
||||
twitter,
|
||||
instagram,
|
||||
linkedin,
|
||||
youtube
|
||||
}
|
||||
let res = await axios.post(`/api/config/social`, data, {
|
||||
headers: {
|
||||
@ -119,6 +125,17 @@ function Socialmedia() {
|
||||
className="form-control input-field "
|
||||
id="basicpill-phoneno-input"
|
||||
/>{' '}
|
||||
<label for="basicpill-phoneno-input" className="label-100 mt-3">
|
||||
Youtube
|
||||
</label>
|
||||
<input
|
||||
value={youtube}
|
||||
type="text"
|
||||
name="youtube"
|
||||
onChange={(e) => handelChange(e)}
|
||||
className="form-control input-field "
|
||||
id="basicpill-phoneno-input"
|
||||
/>{' '}
|
||||
<label for="basicpill-phoneno-input" className="label-100 mt-3">
|
||||
Linkedin
|
||||
</label>
|
||||
|
||||
@ -1,50 +1,52 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
function CancelledOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [cancelledOrdersData, setCancelledOrdersData] = useState([])
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [cancelledOrdersData, setCancelledOrdersData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(cancelledOrdersData)
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(cancelledOrdersData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/cancelled`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
.get(`/api/order/getAll/cancelled`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setCancelledOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
setCancelledOrdersData(res.data.order);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
getProcessingOrder();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, cancelledOrdersData])
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, cancelledOrdersData]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
@ -60,7 +62,7 @@ function CancelledOrders() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Cancelled Orders
|
||||
</div>
|
||||
</div>
|
||||
@ -76,7 +78,7 @@ function CancelledOrders() {
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: '10%' }}
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
@ -99,14 +101,17 @@ function CancelledOrders() {
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: '1px solid' }}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<thead className="thead-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
@ -129,34 +134,44 @@ function CancelledOrders() {
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
${order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.paidAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-success text-white">
|
||||
{order?.status}
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/orders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
@ -164,7 +179,7 @@ function CancelledOrders() {
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
@ -179,9 +194,12 @@ function CancelledOrders() {
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, cancelledOrdersData.length)} of{' '}
|
||||
{cancelledOrdersData.length} entries
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
cancelledOrdersData.length
|
||||
)}{" "}
|
||||
of {cancelledOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -191,13 +209,13 @@ function CancelledOrders() {
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? 'paginate_button page-item previous disabled'
|
||||
: 'paginate_button page-item previous'
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
@ -208,8 +226,10 @@ function CancelledOrders() {
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
@ -217,7 +237,10 @@ function CancelledOrders() {
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
@ -229,9 +252,9 @@ function CancelledOrders() {
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
@ -245,13 +268,13 @@ function CancelledOrders() {
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
cancelledOrdersData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
@ -268,7 +291,7 @@ function CancelledOrders() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default CancelledOrders
|
||||
export default CancelledOrders;
|
||||
|
||||
@ -1,49 +1,52 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
function DeliveredOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [deliveredOrdersData, setDeliveredOrdersData] = useState([])
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [deliveredOrdersData, setDeliveredOrdersData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(deliveredOrdersData)
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(deliveredOrdersData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/delivered`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
.get(`/api/order/getAll/delivered`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setDeliveredOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
setDeliveredOrdersData(res.data.order);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
getProcessingOrder();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, deliveredOrdersData])
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, deliveredOrdersData]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
@ -59,7 +62,7 @@ function DeliveredOrders() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Delivered Orders
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +78,7 @@ function DeliveredOrders() {
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: '10%' }}
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
@ -98,14 +101,17 @@ function DeliveredOrders() {
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: '1px solid' }}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<thead className="thead-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
@ -128,34 +134,44 @@ function DeliveredOrders() {
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
${order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.paidAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-success text-white">
|
||||
{order?.status}
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/orders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
@ -163,7 +179,7 @@ function DeliveredOrders() {
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
@ -178,9 +194,12 @@ function DeliveredOrders() {
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, deliveredOrdersData.length)} of{' '}
|
||||
{deliveredOrdersData.length} entries
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
deliveredOrdersData.length
|
||||
)}{" "}
|
||||
of {deliveredOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -190,13 +209,13 @@ function DeliveredOrders() {
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? 'paginate_button page-item previous disabled'
|
||||
: 'paginate_button page-item previous'
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
@ -207,8 +226,10 @@ function DeliveredOrders() {
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
@ -216,7 +237,10 @@ function DeliveredOrders() {
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
@ -228,9 +252,9 @@ function DeliveredOrders() {
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
@ -244,13 +268,13 @@ function DeliveredOrders() {
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
deliveredOrdersData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
@ -267,7 +291,7 @@ function DeliveredOrders() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default DeliveredOrders
|
||||
export default DeliveredOrders;
|
||||
|
||||
@ -1,50 +1,55 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
function DispatchedOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [dispatchedOrdersData, setDispatchedOrdersData] = useState([])
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [dispatchedOrdersData, setDispatchedOrdersData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(dispatchedOrdersData)
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(dispatchedOrdersData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function getDispatchedOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/dispatched`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
.get(`/api/order/getAll/dispatched`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setDispatchedOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
setDispatchedOrdersData(res.data.order);
|
||||
console.log(res.data.order);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getDispatchedOrder()
|
||||
}, [])
|
||||
getDispatchedOrder();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, dispatchedOrdersData])
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(
|
||||
dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost)
|
||||
);
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, dispatchedOrdersData]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
@ -60,7 +65,7 @@ function DispatchedOrders() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Dispatched Orders
|
||||
</div>
|
||||
</div>
|
||||
@ -76,7 +81,7 @@ function DispatchedOrders() {
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: '10%' }}
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
@ -99,14 +104,17 @@ function DispatchedOrders() {
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: '1px solid' }}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<thead className="thead-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
@ -129,34 +137,44 @@ function DispatchedOrders() {
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
${order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.paidAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-success text-white">
|
||||
{order?.status}
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/orders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
@ -164,7 +182,7 @@ function DispatchedOrders() {
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
@ -179,9 +197,12 @@ function DispatchedOrders() {
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, dispatchedOrdersData.length)} of{' '}
|
||||
{dispatchedOrdersData.length} entries
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
dispatchedOrdersData.length
|
||||
)}{" "}
|
||||
of {dispatchedOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -191,13 +212,13 @@ function DispatchedOrders() {
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? 'paginate_button page-item previous disabled'
|
||||
: 'paginate_button page-item previous'
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
@ -208,8 +229,10 @@ function DispatchedOrders() {
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
@ -217,7 +240,10 @@ function DispatchedOrders() {
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
@ -229,9 +255,9 @@ function DispatchedOrders() {
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
@ -245,13 +271,13 @@ function DispatchedOrders() {
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
dispatchedOrdersData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
@ -268,7 +294,7 @@ function DispatchedOrders() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default DispatchedOrders
|
||||
export default DispatchedOrders;
|
||||
|
||||
@ -23,7 +23,7 @@ function NewOrders() {
|
||||
useEffect(() => {
|
||||
function getNewOrder() {
|
||||
axios
|
||||
.get(`/api/order/getAll/:new`, {
|
||||
.get(`/api/order/getAll/new`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -31,7 +31,6 @@ function NewOrders() {
|
||||
})
|
||||
.then((res) => {
|
||||
setNewOrdersData(res.data.order);
|
||||
console.log(res.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -216,7 +215,9 @@ function NewOrders() {
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link to={`/orders/view/${order._id}`}>
|
||||
<Link
|
||||
to={`/orders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
@ -230,7 +231,7 @@ function NewOrders() {
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/orders/edit/${order._id}`}>
|
||||
{/* <Link to={`/orders/edit/${order._id}`}>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
@ -243,9 +244,9 @@ function NewOrders() {
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
</Link> */}
|
||||
|
||||
<button
|
||||
{/* <button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
@ -257,7 +258,7 @@ function NewOrders() {
|
||||
onClick={() => handleDelete(order._id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
@ -1,50 +1,56 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
function ProcessingOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [processingOrdersData, setProcessingOrdersData] = useState([])
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [processingOrdersData, setProcessingOrdersData] = useState([]);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(processingOrdersData)
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [showData, setShowData] = useState(processingOrdersData);
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
setCurrentPage(1);
|
||||
setItemPerPage(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/processing`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
.get(`/api/order/getAll/processing`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setProcessingOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
console.log(res.data.order);
|
||||
setProcessingOrdersData(res.data.order);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
getProcessingOrder();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(processingOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, processingOrdersData])
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(
|
||||
processingOrdersData.slice(indexOfFirstPost, indexOfLastPost)
|
||||
);
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, processingOrdersData]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
@ -60,7 +66,7 @@ function ProcessingOrders() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Processing Orders
|
||||
</div>
|
||||
</div>
|
||||
@ -76,7 +82,7 @@ function ProcessingOrders() {
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: '10%' }}
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
@ -99,14 +105,17 @@ function ProcessingOrders() {
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: '1px solid' }}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<thead className="thead-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
@ -129,34 +138,44 @@ function ProcessingOrders() {
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
${order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.paidAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-success text-white">
|
||||
{order?.status}
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/orders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
@ -164,7 +183,7 @@ function ProcessingOrders() {
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
@ -179,9 +198,12 @@ function ProcessingOrders() {
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, processingOrdersData.length)} of{' '}
|
||||
{processingOrdersData.length} entries
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
processingOrdersData.length
|
||||
)}{" "}
|
||||
of {processingOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -191,13 +213,13 @@ function ProcessingOrders() {
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? 'paginate_button page-item previous disabled'
|
||||
: 'paginate_button page-item previous'
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
@ -208,8 +230,10 @@ function ProcessingOrders() {
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={(e) => setCurrentPage((prev) => prev - 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
@ -217,7 +241,10 @@ function ProcessingOrders() {
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link" style={{ cursor: 'pointer' }}>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
@ -229,9 +256,9 @@ function ProcessingOrders() {
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
@ -245,13 +272,13 @@ function ProcessingOrders() {
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
processingOrdersData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
@ -268,7 +295,7 @@ function ProcessingOrders() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ProcessingOrders
|
||||
export default ProcessingOrders;
|
||||
|
||||
@ -1,107 +1,111 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import axios from 'axios'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import QRCode from 'react-qr-code'
|
||||
import ReactToPrint from 'react-to-print'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import QRCode from "react-qr-code";
|
||||
import ReactToPrint from "react-to-print";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
import PrintOrderDetails from './PrintOrderDetails.js'
|
||||
import PrintOrderDetails from "./PrintOrderDetails.js";
|
||||
|
||||
function ViewOrder() {
|
||||
const { status, id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const printOrderRef = useRef()
|
||||
const token = isAutheticated()
|
||||
const [orderData, setOrderData] = useState({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [orderStatus, setOrderStatus] = useState('')
|
||||
function ViewOdr() {
|
||||
const { status, id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const printOrderRef = useRef();
|
||||
const token = isAutheticated();
|
||||
const [orderData, setOrderData] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [orderStatus, setOrderStatus] = useState("");
|
||||
const [data, setData] = useState({
|
||||
courier_name: '',
|
||||
tracking_id: '',
|
||||
})
|
||||
courier_name: "",
|
||||
tracking_id: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function getOrderDetails() {
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
axios
|
||||
.get(`/api/order/${id}`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setLoading(false)
|
||||
setOrderData(res.data.data)
|
||||
setLoading(false);
|
||||
console.log(res.data);
|
||||
setOrderData(res.data.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
getBack()
|
||||
})
|
||||
setLoading(false);
|
||||
getBack();
|
||||
});
|
||||
}
|
||||
getOrderDetails()
|
||||
}, [])
|
||||
getOrderDetails();
|
||||
}, []);
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.type === 'text') {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||
if (e.target.type === "text") {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
} else {
|
||||
setOrderStatus(e.target.value)
|
||||
}
|
||||
setOrderStatus(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
function handleSubmit() {
|
||||
if (orderStatus === '') return
|
||||
if (orderData.status === 'processing') {
|
||||
if (data.courier_name.trim() === '' || data.tracking_id.trim() === '') {
|
||||
if (orderStatus === "") return;
|
||||
if (orderData.status === "processing") {
|
||||
if (data.courier_name.trim() === "" || data.tracking_id.trim() === "") {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Enter Courier Name And Tracking ID!',
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
title: "Warning",
|
||||
text: "Enter Courier Name And Tracking ID!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
})
|
||||
return
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
axios
|
||||
.patch(
|
||||
`/api/order/${id}`,
|
||||
{ ...data, status: orderStatus },
|
||||
{
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Updated',
|
||||
text: 'Order updated!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
getBack()
|
||||
title: "Updated",
|
||||
text: "Order updated!",
|
||||
icon: "success",
|
||||
button: "Return",
|
||||
});
|
||||
setLoading(false);
|
||||
getBack();
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Something went wrong!',
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
title: "Warning",
|
||||
text: "Something went wrong!",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getBack() {
|
||||
navigate(`/orders/${status}`, { replace: true })
|
||||
navigate(`/orders/${status}`, { replace: true });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{' '}
|
||||
{" "}
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
@ -115,31 +119,37 @@ function ViewOrder() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Order Details
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
{(orderData?.status === 'new' || orderData?.status === 'processing') && (
|
||||
{(orderData?.status === "new" ||
|
||||
orderData?.status === "processing") && (
|
||||
<ReactToPrint
|
||||
trigger={() => (
|
||||
<button className="btn btn-info text-white me-2">Print</button>
|
||||
<button className="btn btn-info text-white me-2">
|
||||
Print
|
||||
</button>
|
||||
)}
|
||||
content={() => printOrderRef.current}
|
||||
/>
|
||||
)}
|
||||
|
||||
{orderData?.status !== 'cancelled' &&
|
||||
orderData?.status !== 'returned' &&
|
||||
orderData?.status !== 'delivered' && (
|
||||
{orderData?.status !== "cancelled" &&
|
||||
orderData?.status !== "returned" &&
|
||||
orderData?.status !== "delivered" && (
|
||||
<button
|
||||
className="btn btn-success text-white me-2"
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Update'}
|
||||
{loading ? "Loading" : "Update"}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-primary" onClick={() => getBack()}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => getBack()}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
@ -153,12 +163,16 @@ function ViewOrder() {
|
||||
<div className="card-body">
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Order ID: {orderData?.order_id}</span>
|
||||
<span className="fw-bold">
|
||||
Order ID: {orderData?.order_id}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Parent Name: {orderData?.parent?.name}</span>
|
||||
<span className="fw-bold">
|
||||
Parent Name: {orderData?.parent?.name}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
@ -174,15 +188,15 @@ function ViewOrder() {
|
||||
orderData?.items?.length > 0 &&
|
||||
orderData.items.map((e, i) => (
|
||||
<div key={i} className="my-2">
|
||||
<div className="row" style={{ fontSize: '14px' }}>
|
||||
<div className="row" style={{ fontSize: "14px" }}>
|
||||
<div className="col-sm-4">
|
||||
<img
|
||||
src={e.product?.images[0]?.url}
|
||||
alt={e.product.name}
|
||||
style={{
|
||||
width: '100%',
|
||||
objectFit: 'contain',
|
||||
maxHeight: '150px',
|
||||
width: "100%",
|
||||
objectFit: "contain",
|
||||
maxHeight: "150px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -201,7 +215,7 @@ function ViewOrder() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
{' '}
|
||||
{" "}
|
||||
<p className="m-0">
|
||||
<span>Price:</span> Rs.{e.price}
|
||||
</p>
|
||||
@ -237,7 +251,9 @@ function ViewOrder() {
|
||||
<div className="col-lg-5 mt-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
{status !== 'cancelled' && status !== 'returned' && status !== 'delivered' && (
|
||||
{status !== "cancelled" &&
|
||||
status !== "returned" &&
|
||||
status !== "delivered" && (
|
||||
<div className="mt-1">
|
||||
<label className="fw-bold">Status :</label>
|
||||
<select
|
||||
@ -245,20 +261,20 @@ function ViewOrder() {
|
||||
onChange={handleChange}
|
||||
value={orderStatus}
|
||||
>
|
||||
{orderData.status === 'new' && (
|
||||
{orderData.status === "new" && (
|
||||
<>
|
||||
<option value="">New</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</>
|
||||
)}
|
||||
{orderData.status === 'processing' && (
|
||||
{orderData.status === "processing" && (
|
||||
<>
|
||||
<option value="">Processing</option>
|
||||
<option value="dispatched">Dispatch</option>
|
||||
</>
|
||||
)}
|
||||
{orderData.status === 'dispatched' && (
|
||||
{orderData.status === "dispatched" && (
|
||||
<>
|
||||
<option value="">Dispatch</option>
|
||||
<option value="delivered">Delivered</option>
|
||||
@ -272,14 +288,16 @@ function ViewOrder() {
|
||||
<div className="d-flex">
|
||||
<p className="fw-bold me-3">Order ID QR Code:</p>
|
||||
<QRCode
|
||||
value={JSON.stringify({ order_id: orderData?.order_id })}
|
||||
value={JSON.stringify({
|
||||
order_id: orderData?.order_id,
|
||||
})}
|
||||
size={256}
|
||||
style={{ height: '150px', width: '150px' }}
|
||||
style={{ height: "150px", width: "150px" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{orderData.status === 'processing' && (
|
||||
{orderData.status === "processing" && (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<label className="fw-bold">Courier Name* :</label>
|
||||
@ -305,7 +323,8 @@ function ViewOrder() {
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<label>
|
||||
<span className="fw-bold">Amount Paid : </span>Rs.{orderData?.total_amount}
|
||||
<span className="fw-bold">Amount Paid : </span>Rs.
|
||||
{orderData?.total_amount}
|
||||
</label>
|
||||
</div>
|
||||
{orderData?.address && (
|
||||
@ -313,17 +332,24 @@ function ViewOrder() {
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Address : </span>
|
||||
{`${orderData.address?.full_name}, ${orderData.address?.flat_house_no_apartment
|
||||
}, ${orderData.address?.area_street_sector_village}, ${orderData.address?.landmark && orderData.address?.landmark + ', '
|
||||
}${orderData.address?.address_line &&
|
||||
orderData.address?.address_line + ', '
|
||||
}${orderData.address?.city}, ${orderData.address?.state}, ${orderData.address?.pincode
|
||||
}`}
|
||||
{`${orderData.address?.full_name}, ${
|
||||
orderData.address?.flat_house_no_apartment
|
||||
}, ${
|
||||
orderData.address?.area_street_sector_village
|
||||
}, ${
|
||||
orderData.address?.landmark &&
|
||||
orderData.address?.landmark + ", "
|
||||
}${
|
||||
orderData.address?.address_line &&
|
||||
orderData.address?.address_line + ", "
|
||||
}${orderData.address?.city}, ${
|
||||
orderData.address?.state
|
||||
}, ${orderData.address?.pincode}`}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
{' '}
|
||||
{" "}
|
||||
<span className="fw-bold">Contact Number : </span>
|
||||
{orderData.address?.mobile_number}
|
||||
</label>
|
||||
@ -364,7 +390,7 @@ function ViewOrder() {
|
||||
<span className="fw-bold">Razorpay Order ID : </span>
|
||||
{orderData?.razorpay_order_id}
|
||||
</label>
|
||||
</div>{' '}
|
||||
</div>{" "}
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Razorpay Payment ID : </span>
|
||||
@ -379,9 +405,9 @@ function ViewOrder() {
|
||||
<table
|
||||
className="table table-info table-sm m-0"
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
borderCollapse: 'collapse',
|
||||
overflow: 'hidden',
|
||||
borderRadius: "8px",
|
||||
borderCollapse: "collapse",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<tbody>
|
||||
@ -390,22 +416,27 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.new
|
||||
? new Date(orderData?.status_timeline?.new).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.new
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})
|
||||
: new Date(orderData?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
: new Date(orderData?.placed_on).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
@ -413,18 +444,17 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.processing
|
||||
? new Date(orderData?.status_timeline?.processing).toLocaleString(
|
||||
'en-IN',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.processing
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
},
|
||||
)
|
||||
: '-'}
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
@ -432,18 +462,17 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.dispatched
|
||||
? new Date(orderData?.status_timeline?.dispatched).toLocaleString(
|
||||
'en-IN',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.dispatched
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
},
|
||||
)
|
||||
: '-'}
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
@ -451,18 +480,17 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.delivered
|
||||
? new Date(orderData?.status_timeline?.delivered).toLocaleString(
|
||||
'en-IN',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.delivered
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
},
|
||||
)
|
||||
: '-'}
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
@ -470,18 +498,17 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.cancelled
|
||||
? new Date(orderData?.status_timeline?.cancelled).toLocaleString(
|
||||
'en-IN',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.cancelled
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
},
|
||||
)
|
||||
: '-'}
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
@ -489,18 +516,17 @@ function ViewOrder() {
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.returned
|
||||
? new Date(orderData?.status_timeline?.returned).toLocaleString(
|
||||
'en-IN',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
? new Date(
|
||||
orderData?.status_timeline?.returned
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
},
|
||||
)
|
||||
: '-'}
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -512,11 +538,11 @@ function ViewOrder() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'none' }}>
|
||||
<div style={{ display: "none" }}>
|
||||
<PrintOrderDetails orderData={orderData} ref={printOrderRef} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewOrder
|
||||
export default ViewOdr;
|
||||
@ -11,6 +11,7 @@ import Button from "@material-ui/core/Button";
|
||||
|
||||
function ViewOrders() {
|
||||
const { status, id } = useParams();
|
||||
const [success, setSuccess] = useState(true);
|
||||
|
||||
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } =
|
||||
useSelector((state) => state.cart);
|
||||
@ -51,7 +52,7 @@ function ViewOrders() {
|
||||
setLoading(false);
|
||||
setOrderId(res.data?.order?.order_id);
|
||||
setOrderDetails(res.data?.order);
|
||||
console.log(res.data?.order);
|
||||
console.log(res.data);
|
||||
// let options = {
|
||||
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
|
||||
// name: res.data?.order?.shippingInfo?.name,
|
||||
@ -82,6 +83,7 @@ function ViewOrders() {
|
||||
if (e.target.type === "text") {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||
} else {
|
||||
if (e.target.value === "") toast.error("please select status");
|
||||
setOrderStatus(e.target.value);
|
||||
}
|
||||
};
|
||||
@ -92,6 +94,193 @@ function ViewOrders() {
|
||||
total_Price: productDetails?.base_Price * e.target.value,
|
||||
}));
|
||||
};
|
||||
// ------------------------------------------------------
|
||||
|
||||
const handlechangestatus = () => {
|
||||
if (orderStatus === "dispatched") {
|
||||
swal({
|
||||
title: `Are you sure for ${orderStatus}?`,
|
||||
icon: "warning",
|
||||
content: {
|
||||
element: "div",
|
||||
attributes: {
|
||||
innerHTML:
|
||||
'<input id="input1" placeholder="Enter Courier Name" className="swal2-input" style="margin:3px;height:40px;text-align:center;">' +
|
||||
'<input id="input2" placeholder="Courier Tracking ID" 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 courierName = document.getElementById("input1").value.trim();
|
||||
const TrackingID = document.getElementById("input2").value.trim();
|
||||
|
||||
// Check if values are entered
|
||||
if (courierName === "" || TrackingID === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please enter values Courier Name And Tracking ID",
|
||||
icon: "warning",
|
||||
button: "Ok",
|
||||
dangerMode: true,
|
||||
});
|
||||
} else {
|
||||
axios
|
||||
.patch(
|
||||
`/api/order/change/status/${id}`,
|
||||
{
|
||||
status: orderStatus,
|
||||
courierName,
|
||||
TrackingID,
|
||||
},
|
||||
{
|
||||
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}?`,
|
||||
icon: "warning",
|
||||
content: {
|
||||
element: "div",
|
||||
attributes: {
|
||||
innerHTML:
|
||||
'<input id="input1" type="date" placeholder="Delivered ON" className="swal2-input" style="height:40px;text-align:center;">',
|
||||
// '<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px">',
|
||||
},
|
||||
},
|
||||
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 DDate = document.getElementById("input1").value.trim();
|
||||
|
||||
// Check if values are entered
|
||||
if (DDate === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please enter Delivered Date",
|
||||
icon: "warning",
|
||||
button: "Ok",
|
||||
dangerMode: true,
|
||||
});
|
||||
} else {
|
||||
axios
|
||||
.patch(
|
||||
`/api/order/change/status/${id}`,
|
||||
{
|
||||
status: orderStatus,
|
||||
DDate,
|
||||
},
|
||||
{
|
||||
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 {
|
||||
swal({
|
||||
title: `Are you sure for ${orderStatus}?`,
|
||||
icon: "warning",
|
||||
|
||||
buttons: {
|
||||
Yes: { text: "Yes", value: true },
|
||||
Cancel: { text: "Cancel", value: "cancel" },
|
||||
},
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.patch(
|
||||
`/api/order/change/status/${id}`,
|
||||
{ status: orderStatus },
|
||||
{
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function getBack() {
|
||||
navigate(`/orders/${status}`, { replace: true });
|
||||
@ -115,12 +304,36 @@ function ViewOrders() {
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
<p> View Order</p>
|
||||
{orderId && (
|
||||
</div>
|
||||
<div className="m-4">
|
||||
{orderDetails?.orderID && (
|
||||
<span>
|
||||
<small>Order ID : {orderId}</small>{" "}
|
||||
<h6 className="">Order ID : {orderDetails?.orderID}</h6>{" "}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{orderDetails?.courier_name && (
|
||||
<div className="m-4">
|
||||
<span>
|
||||
<h6 className="">
|
||||
Courier Name: {orderDetails?.courier_name}
|
||||
</h6>{" "}
|
||||
<h6 className="">
|
||||
Tracking ID : {orderDetails?.courier_tracking_id}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{orderDetails?.isDelivered && (
|
||||
<div className="m-4">
|
||||
<span>
|
||||
<h6 className="">Delivered: Yes</h6>{" "}
|
||||
<h6 className="">
|
||||
Delivered Date: {orderDetails?.DeliveredDate}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="page-title-right">
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
@ -136,7 +349,8 @@ function ViewOrders() {
|
||||
>
|
||||
{loading ? 'Loading' : 'Edit Now'}
|
||||
</Button> */}
|
||||
<Link to="/orders/new">
|
||||
|
||||
<Link to={`/orders/${status}`}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
@ -154,9 +368,9 @@ function ViewOrders() {
|
||||
</div>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<div className="d-flex justify-content-center">
|
||||
<div className="spinner-border text-info" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@ -305,12 +519,14 @@ function ViewOrders() {
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row">Processing Started</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{productData?.status_timeline?.processing
|
||||
<th scope="row" className="text-warning">
|
||||
Processing Started
|
||||
</th>
|
||||
<td className="text-warning"> : </td>
|
||||
<td className="text-warning">
|
||||
{orderDetails?.status_timeline?.processing
|
||||
? new Date(
|
||||
productData?.status_timeline?.processing
|
||||
orderDetails?.status_timeline?.processing
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -323,12 +539,14 @@ function ViewOrders() {
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row">Dispatched On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{productData?.status_timeline?.dispatched
|
||||
<th scope="row" className="text-primary">
|
||||
Dispatched On
|
||||
</th>
|
||||
<td className="text-primary"> : </td>
|
||||
<td className="text-primary">
|
||||
{orderDetails?.status_timeline?.dispatched
|
||||
? new Date(
|
||||
productData?.status_timeline?.dispatched
|
||||
orderDetails?.status_timeline?.dispatched
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -341,12 +559,14 @@ function ViewOrders() {
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row">Delivered On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{productData?.status_timeline?.delivered
|
||||
<th scope="row" className="text-success">
|
||||
Delivered On
|
||||
</th>
|
||||
<td className="text-success"> : </td>
|
||||
<td className="text-success">
|
||||
{orderDetails?.status_timeline?.delivered
|
||||
? new Date(
|
||||
productData?.status_timeline?.delivered
|
||||
orderDetails?.status_timeline?.delivered
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -358,13 +578,16 @@ function ViewOrders() {
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
{orderDetails?.status_timeline?.cancelled && (
|
||||
<tr className="text-center">
|
||||
<th scope="row">Cancelled On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{productData?.status_timeline?.cancelled
|
||||
<th scope="row" className="text-danger">
|
||||
Cancelled On
|
||||
</th>
|
||||
<td className="text-danger"> : </td>
|
||||
<td className="text-danger">
|
||||
{orderDetails?.status_timeline?.cancelled
|
||||
? new Date(
|
||||
productData?.status_timeline?.cancelled
|
||||
orderDetails?.status_timeline?.cancelled
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -376,13 +599,14 @@ function ViewOrders() {
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
)}
|
||||
{/* <tr className="text-center">
|
||||
<th scope="row">Returned On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{productData?.status_timeline?.returned
|
||||
{orderDetails?.status_timeline?.returned
|
||||
? new Date(
|
||||
productData?.status_timeline?.returned
|
||||
orderDetails?.status_timeline?.returned
|
||||
).toLocaleString("en-IN", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@ -393,7 +617,7 @@ function ViewOrders() {
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
</tr> */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -403,9 +627,72 @@ function ViewOrders() {
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="mt-1">
|
||||
<h5 className="text-success">
|
||||
<h6 className="text-success">
|
||||
Order Status: {orderDetails?.orderStatus}
|
||||
</h5>
|
||||
</h6>
|
||||
{/* order status change */}{" "}
|
||||
<div className="mb-2">
|
||||
{" "}
|
||||
{status !== "cancelled" &&
|
||||
status !== "returned" &&
|
||||
status !== "delivered" && (
|
||||
<div className="mt-1">
|
||||
<label className="fw-bold">
|
||||
Change Status :
|
||||
</label>
|
||||
<div className="row">
|
||||
<div className="col-lg-9">
|
||||
<select
|
||||
className="form-control"
|
||||
onChange={handleChange}
|
||||
value={orderStatus}
|
||||
>
|
||||
{orderDetails?.orderStatus === "new" && (
|
||||
<>
|
||||
<option value="">New</option>
|
||||
<option value="processing">
|
||||
Processing
|
||||
</option>
|
||||
<option value="cancelled">
|
||||
Cancelled
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
{orderDetails?.orderStatus ===
|
||||
"processing" && (
|
||||
<>
|
||||
<option value="">Processing</option>
|
||||
<option value="dispatched">
|
||||
Dispatch
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
{orderDetails?.orderStatus ===
|
||||
"dispatched" && (
|
||||
<>
|
||||
<option value="">Dispatch</option>
|
||||
<option value="delivered">
|
||||
Delivered
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{orderStatus && (
|
||||
<div className="col-lg-3">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={(e) => handlechangestatus(e)}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* */}
|
||||
<label className="fw-bold mt-1">Shipping Info :</label>
|
||||
{/* <div className="d-flex">
|
||||
<select
|
||||
|
||||
Loading…
Reference in New Issue
Block a user