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

manage order in all stges

Browse Source
This commit is contained in:
pawan-dot 2023-12-12 18:03:59 +05:30
commit 4a2bb5db3a
19 changed files with 3502 additions and 792 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

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

4
src/components/AppSidebar.js
View File

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

4
src/index.js
View File

@ -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 = "http://localhost:8000";
// axios.defaults.baseURL = "https://happy-sombrero-ray.cyclic.app/"; //->latest deployed
axios.defaults.baseURL = "https://printsigns.onrender.com/"; //->latest deployed

57
src/routes.js
View File

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

13
src/views/Banner/banner.js
View File

@ -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}
@ -359,7 +360,7 @@ const Banners = () => {
onChange={(e) =>
setBannerName(
e.target.value.charAt(0).toUpperCase() +
e.target.value.slice(1)
e.target.value.slice(1)
)
}
/>
@ -482,7 +483,7 @@ const Banners = () => {
p={2}
display={"flex"}
justifyContent={"right"}
// width={"500px"}
// width={"500px"}
>
{!edit && (
<button
@ -626,7 +627,7 @@ const Banners = () => {
width="40"
alt=""
/>
<h5>{} </h5>
<h5>{ } </h5>
</td>
<td>
<h5>{item.bannerName} </h5>

709
src/views/Images/LoginImage.js Normal file
View 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
View 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
View 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;

61
src/views/configuration/Address.js
View File

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

441
src/views/configuration/Logo.js
View File

@ -1,222 +1,257 @@
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
// 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() {
const configDetails = await axios.get(`/api/config`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
useEffect(() => {
async function getConfiguration() {
const configDetails = await axios.get(`/api/config`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
configDetails.data.result.map((item) => {
setHeaderlogo(item?.logo[0]?.Headerlogo)
setFooterlogo(item?.logo[0]?.Footerlogo)
setAdminlogo(item?.logo[0]?.Adminlogo)
})
}
getConfiguration()
}, [])
// async function handelChange(e) {
// setDisplay(false);
// console.log(e.target.name === "Logo htmlFor Website Header(148 x 48 px)");
// if (e.target.name === "Logo htmlFor Website Header(148 x 48 px)") {
// console.log(e.target.files[0]);
// setHeaderlogo(e.target.files[0]);
// } else if (e.target.name === "Logo htmlFor Website Footer(148 x 48 px)") {
// setFooterlogo(e.target.files[0]);
// } else if (e.target.name === "Logo htmlFor Admin Header(148 x 48 px)") {
// setAdminlogo(e.target.files[0]);
// }
// }
async function handelSubmit() {
setLoading(true)
const formdata = new FormData()
formdata.append('Headerlogo', Headerlogo)
formdata.append('Footerlogo', Footerlogo)
formdata.append('Adminlogo', Adminlogo)
await axios.post(`/api/config/logo`, formdata, {
headers: {
Authorization: `Bearer ${token}`,
'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)
})
configDetails.data.result.map((item) => {
setHeaderlogo(item?.logo[0]?.Headerlogo);
setFooterlogo(item?.logo[0]?.Footerlogo);
setAdminlogo(item?.logo[0]?.Adminlogo);
});
}
getConfiguration();
}, []);
return (
<div>
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
// async function handelChange(e) {
// setDisplay(false);
// console.log(e.target.name === "Logo htmlFor Website Header(148 x 48 px)");
// if (e.target.name === "Logo htmlFor Website Header(148 x 48 px)") {
// console.log(e.target.files[0]);
// setHeaderlogo(e.target.files[0]);
// } else if (e.target.name === "Logo htmlFor Website Footer(148 x 48 px)") {
// setFooterlogo(e.target.files[0]);
// } else if (e.target.name === "Logo htmlFor Admin Header(148 x 48 px)") {
// setAdminlogo(e.target.files[0]);
// }
// }
async function handelSubmit() {
setLoading(true);
const formdata = new FormData();
formdata.append("Headerlogo", Headerlogo);
formdata.append("Footerlogo", Footerlogo);
formdata.append("Adminlogo", Adminlogo);
await axios
.post(`/api/config/logo`, formdata, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
setLoading(false);
swal("Success!", res.data.message, res.data.status);
})
.catch((error) => {
setLoading(false);
});
}
return (
<div>
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-12 col-lg-6 col-xl-6">
<h1 className="text-left head-small">Logo</h1>
<form>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-12 col-lg-6 col-xl-6">
<h1 className="text-left head-small">Logo</h1>
<div className="form-group">
<>
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-3"
style={{ fontWeight: "bold" }}
>
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]
) {
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=""
/>
) : (
""
)}
</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]);
<form>
<div className="row">
<div className="col-lg-12">
<div className="form-group">
<>
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-3"
>
{/* Logo htmlFor Website Header(148 x 48 px) */}
</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]) {
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"
/>
) : (
''
)}
</div>
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-3"
>
{/* Logo htmlFor Website Footer(148 x 48 px) */}
</label>
<input
type="file"
name="Logo htmlFor Website Footer(148 x 48 px)"
onChange={(e) => {
setFooterlogo(e.target.files[0])
if (e.target.files && e.target.files[0]) {
setFooterlogoUrl({
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=""
/>
) : (
""
)}
<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]);
if (e.target.files && e.target.files[0]) {
setFooterlogoUrl({
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"
/>
) : (
''
)}
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-2 row ms-1"
>
{/* Logo htmlFor Admin Header(148 x 48 px) */}
</label>
<input
type="file"
name="Logo htmlFor Admin Header(148 x 48 px)"
onChange={(e) => {
setAdminlogo(e.target.files[0])
if (e.target.files && e.target.files[0]) {
setAdminlogoUrl({
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"
/>
) : (
''
)}
</>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="form-group text-left">
<button
type="button"
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'}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
{/* <!-- end table-responsive --> */}
</div>
</div>
if (e.target.files && e.target.files[0]) {
setAdminlogoUrl({
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=""
/>
) : (
""
)}
</>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<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"}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
{/* <!-- container-fluid --> */}
{/* <!-- end table-responsive --> */}
</div>
</div>
{/* <!-- End Page-content --> */}
</div>
</div>
</div>
{/* <!-- container-fluid --> */}
</div>
)
{/* <!-- End Page-content --> */}
</div>
</div>
);
}
export default Logo
export default Logo;

19
src/views/configuration/Socialmedia.js
View File

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

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

@ -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',
hour12: true,
})}
{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>
@ -226,18 +249,18 @@ function CancelledOrders() {
(currentPage + 1) * itemPerPage - itemPerPage >
cancelledOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => {
setCurrentPage((prev) => prev + 1)
}}
>
{currentPage + 1}
</span>
</li>
)}
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
@ -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;

180
src/views/orders/DeliveredOrders.js
View File

@ -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',
hour12: true,
})}
{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>
@ -225,18 +249,18 @@ function DeliveredOrders() {
(currentPage + 1) * itemPerPage - itemPerPage >
deliveredOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => {
setCurrentPage((prev) => prev + 1)
}}
>
{currentPage + 1}
</span>
</li>
)}
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
@ -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;

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

@ -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',
hour12: true,
})}
{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>
@ -226,18 +252,18 @@ function DispatchedOrders() {
(currentPage + 1) * itemPerPage - itemPerPage >
dispatchedOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => {
setCurrentPage((prev) => prev + 1)
}}
>
{currentPage + 1}
</span>
</li>
)}
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
@ -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;

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

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

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

@ -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',
hour12: true,
})}
{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>
@ -226,18 +253,18 @@ function ProcessingOrders() {
(currentPage + 1) * itemPerPage - itemPerPage >
processingOrdersData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => {
setCurrentPage((prev) => prev + 1)
}}
>
{currentPage + 1}
</span>
</li>
)}
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
@ -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;

412
src/views/orders/ViewOrder.js → src/views/orders/ViewOdr.js
View File

@ -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,49 +251,53 @@ function ViewOrder() {
<div className="col-lg-5 mt-3">
<div className="card">
<div className="card-body">
{status !== 'cancelled' && status !== 'returned' && status !== 'delivered' && (
<div className="mt-1">
<label className="fw-bold">Status :</label>
<select
className="form-control"
onChange={handleChange}
value={orderStatus}
>
{orderData.status === 'new' && (
<>
<option value="">New</option>
<option value="processing">Processing</option>
<option value="cancelled">Cancelled</option>
</>
)}
{orderData.status === 'processing' && (
<>
<option value="">Processing</option>
<option value="dispatched">Dispatch</option>
</>
)}
{orderData.status === 'dispatched' && (
<>
<option value="">Dispatch</option>
<option value="delivered">Delivered</option>
</>
)}
</select>
</div>
)}
{status !== "cancelled" &&
status !== "returned" &&
status !== "delivered" && (
<div className="mt-1">
<label className="fw-bold">Status :</label>
<select
className="form-control"
onChange={handleChange}
value={orderStatus}
>
{orderData.status === "new" && (
<>
<option value="">New</option>
<option value="processing">Processing</option>
<option value="cancelled">Cancelled</option>
</>
)}
{orderData.status === "processing" && (
<>
<option value="">Processing</option>
<option value="dispatched">Dispatch</option>
</>
)}
{orderData.status === "dispatched" && (
<>
<option value="">Dispatch</option>
<option value="delivered">Delivered</option>
</>
)}
</select>
</div>
)}
<div className="mt-3">
{orderData?.order_id && (
<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',
hour12: true,
})
: new Date(orderData?.placed_on).toLocaleString('en-IN', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
})}
? 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",
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;

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

@ -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,31 +578,35 @@ function ViewOrders() {
: "-"}
</td>
</tr>
<tr className="text-center">
<th scope="row">Cancelled On</th>
<td> : </td>
<td>
{productData?.status_timeline?.cancelled
? new Date(
productData?.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">
{orderDetails?.status_timeline?.cancelled && (
<tr className="text-center">
<th scope="row" className="text-danger">
Cancelled On
</th>
<td className="text-danger"> : </td>
<td className="text-danger">
{orderDetails?.status_timeline?.cancelled
? new Date(
orderDetails?.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">
<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