manage order in all stges

package.json

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

src/_nav.js

@@ -66,12 +66,12 @@ const _nav = [
         icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
         to: "/orders/new",
       },
-      {
+      // {
-        component: CNavItem,
+      //   component: CNavItem,
-        name: "Paid",
+      //   name: "Paid",
-        icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+      //   icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-        to: "/orders/returned",
+      //   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",

src/components/AppSidebar.js

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

src/index.js

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

src/routes.js

@@ -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/processing",
-  // { path: '/orders/delivered', name: 'Delivered Orders', element: DeliveredOrders },
+    name: "Processing Orders",
-  // { path: '/orders/cancelled', name: 'Cancelled Orders', element: CancelledOrders },
+    element: ProcessingOrders,
-  // { path: '/orders/returned', name: 'Returned Orders', element: ReturnedOrders },
+  },
-  { path: "/order/:status/:id", name: "View Order", element: ViewOrder },
+  {
+    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
 

src/views/Banner/banner.js

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

src/views/Images/LoginImage.js

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

src/views/Images/RegisterImage.js

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

src/views/Images/ShopImage.js

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

src/views/configuration/Address.js

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

src/views/configuration/Logo.js

@@ -1,222 +1,257 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
 
-import swal from 'sweetalert'
+import swal from "sweetalert";
-import ClipLoader from 'react-spinners/ClipLoader'
+import ClipLoader from "react-spinners/ClipLoader";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import axios from 'axios'
+import axios from "axios";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
 
 function Logo() {
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [Headerlogo, setHeaderlogo] = useState('')
+  const [Headerlogo, setHeaderlogo] = useState("");
-    const [Footerlogo, setFooterlogo] = useState('')
+  const [Footerlogo, setFooterlogo] = useState("");
-    const [Adminlogo, setAdminlogo] = useState('')
+  const [Adminlogo, setAdminlogo] = useState("");
-    const [display, setDisplay] = useState(true)
+  const [display, setDisplay] = useState(true);
-    const token = isAutheticated()
+  const token = isAutheticated();
 
-    // urlcreated images
+  // urlcreated images
 
-    const [HeaderlogoUrl, setHeaderlogoUrl] = useState('')
+  const [HeaderlogoUrl, setHeaderlogoUrl] = useState("");
-    const [FooterlogoUrl, setFooterlogoUrl] = useState('')
+  const [FooterlogoUrl, setFooterlogoUrl] = useState("");
-    const [AdminlogoUrl, setAdminlogoUrl] = useState('')
+  const [AdminlogoUrl, setAdminlogoUrl] = useState("");
 
-    useEffect(() => {
+  useEffect(() => {
-        async function getConfiguration() {
+    async function getConfiguration() {
-            const configDetails = await axios.get(`/api/config`, {
+      const configDetails = await axios.get(`/api/config`, {
-                headers: {
+        headers: {
-                    Authorization: `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
-                },
+        },
-            })
+      });
 
-            configDetails.data.result.map((item) => {
+      configDetails.data.result.map((item) => {
-                setHeaderlogo(item?.logo[0]?.Headerlogo)
+        setHeaderlogo(item?.logo[0]?.Headerlogo);
-                setFooterlogo(item?.logo[0]?.Footerlogo)
+        setFooterlogo(item?.logo[0]?.Footerlogo);
-                setAdminlogo(item?.logo[0]?.Adminlogo)
+        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)
-        })
     }
+    getConfiguration();
+  }, []);
 
-    return (
+  // async function handelChange(e) {
-        <div>
+  //   setDisplay(false);
-            <div className="main-content">
+  //   console.log(e.target.name === "Logo htmlFor Website Header(148 x 48 px)");
-                <div className="page-content">
+  //   if (e.target.name === "Logo htmlFor Website Header(148 x 48 px)") {
-                    <div className="container-fluid">
+  //     console.log(e.target.files[0]);
-                        <div className="row">
+  //     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="form-group">
-                                    <div className="card-body">
+                                <>
-                                        <div className="row">
+                                  <label
-                                            <div className="col-md-12 col-lg-6 col-xl-6">
+                                    htmlFor="basicpill-phoneno-input"
-                                                <h1 className="text-left head-small">Logo</h1>
+                                    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>
+                                      if (e.target.files && e.target.files[0]) {
-                                                    <div className="row">
+                                        setFooterlogoUrl({
-                                                        <div className="col-lg-12">
+                                          image: URL.createObjectURL(
-                                                            <div className="form-group">
+                                            e.target.files[0]
-                                                                <>
+                                          ),
-                                                                    <label
+                                        });
-                                                                        htmlFor="basicpill-phoneno-input"
+                                      }
-                                                                        className="label-100 mt-3"
+                                    }}
-                                                                    >
+                                    className="form-control input-field mt-1 col-md-6 d-inline-block"
-                                                                        {/* Logo htmlFor Website Header(148 x 48 px) */}
+                                    id="basicpill-phoneno-input"
-                                                                    </label>
+                                  />{" "}
-                                                                    <div>
+                                  {display ? (
-                                                                        <input
+                                    <img
-                                                                            type="file"
+                                      style={{ width: "100px" }}
-                                                                            name="Logo  htmlFor Website Header(148 x 48 px)"
+                                      src={
-                                                                            onChange={(e) => {
+                                        FooterlogoUrl.image
-                                                                                setHeaderlogo(e.target.files[0])
+                                          ? FooterlogoUrl.image
-                                                                                if (e.target.files && e.target.files[0]) {
+                                          : Footerlogo
-                                                                                    setHeaderlogoUrl({
+                                      }
-                                                                                        image: URL.createObjectURL(e.target.files[0]),
+                                      alt=""
-                                                                                    })
+                                    />
-                                                                                    console.log(setHeaderlogoUrl)
+                                  ) : (
-                                                                                }
+                                    ""
-                                                                            }}
+                                  )}
-                                                                            className="form-control input-field mb-3 col-md-6 d-inline-block"
+                                  <label
-                                                                            id="basicpill-phoneno-input"
+                                    htmlFor="basicpill-phoneno-input"
-                                                                        />
+                                    className="label-100 mt-2 row ms-1"
-                                                                        {display ? (
+                                    style={{ fontWeight: "bold" }}
-                                                                            <img className='ms-1'
+                                  >
-                                                                                style={{ width: '100px' }}
+                                    {/* Logo htmlFor Admin Header(148 x 48 px) */}
-                                                                                src={HeaderlogoUrl.image ? HeaderlogoUrl.image : Headerlogo}
+                                    Logo for admin website <br />
-                                                                                alt="header logo"
+                                  </label>
-                                                                            />
+                                  <input
-                                                                        ) : (
+                                    type="file"
-                                                                            ''
+                                    name="Logo htmlFor Admin Header(148 x 48 px)"
-                                                                        )}
+                                    onChange={(e) => {
-                                                                    </div>
+                                      setAdminlogo(e.target.files[0]);
-                                                                    <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]) {
+                                      if (e.target.files && e.target.files[0]) {
-                                                                                setFooterlogoUrl({
+                                        setAdminlogoUrl({
-                                                                                    image: URL.createObjectURL(e.target.files[0]),
+                                          image: URL.createObjectURL(
-                                                                                })
+                                            e.target.files[0]
-                                                                            }
+                                          ),
-                                                                        }}
+                                        });
-                                                                        className="form-control input-field mt-1 col-md-6 d-inline-block"
+                                      }
-                                                                        id="basicpill-phoneno-input"
+                                    }}
-                                                                    />{' '}
+                                    className="form-control input-field col-md-6 d-inline-block"
-                                                                    {display ? (
+                                    id="basicpill-phoneno-input"
-                                                                        <img
+                                  />{" "}
-                                                                            style={{ width: '100px' }}
+                                  {display ? (
-                                                                            src={FooterlogoUrl.image ? FooterlogoUrl.image : Footerlogo}
+                                    <img
-                                                                            alt="Footer logo"
+                                      style={{ width: "100px" }}
-                                                                        />
+                                      src={
-                                                                    ) : (
+                                        AdminlogoUrl.image
-                                                                        ''
+                                          ? AdminlogoUrl.image
-                                                                    )}
+                                          : Adminlogo
-                                                                    <label
+                                      }
-                                                                        htmlFor="basicpill-phoneno-input"
+                                      alt=""
-                                                                        className="label-100 mt-2 row ms-1"
+                                    />
-                                                                    >
+                                  ) : (
-                                                                        {/* Logo htmlFor Admin Header(148 x 48 px) */}
+                                    ""
-                                                                    </label>
+                                  )}
-                                                                    <input
+                                </>
-                                                                        type="file"
+                              </div>
-                                                                        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>
                             </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;

src/views/configuration/Socialmedia.js

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

src/views/orders/CancelledOrders.js

@@ -1,50 +1,52 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import axios from 'axios'
+import axios from "axios";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
-
 
 function CancelledOrders() {
-  const token = isAutheticated()
+  const token = isAutheticated();
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [success, setSuccess] = useState(true)
+  const [success, setSuccess] = useState(true);
-  const [cancelledOrdersData, setCancelledOrdersData] = useState([])
+  const [cancelledOrdersData, setCancelledOrdersData] = useState([]);
 
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1);
-  const [itemPerPage, setItemPerPage] = useState(10)
+  const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(cancelledOrdersData)
+  const [showData, setShowData] = useState(cancelledOrdersData);
 
   const handleShowEntries = (e) => {
-    setCurrentPage(1)
+    setCurrentPage(1);
-    setItemPerPage(e.target.value)
+    setItemPerPage(e.target.value);
-  }
+  };
 
   useEffect(() => {
     function getProcessingOrder() {
       axios
-        .get(`/api/order/list/cancelled`, {
+        .get(`/api/order/getAll/cancelled`, {
-          headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
         })
         .then((res) => {
-          setCancelledOrdersData(res.data.data)
+          setCancelledOrdersData(res.data.order);
-          setLoading(false)
+          setLoading(false);
         })
         .catch((err) => {
-          console.log(err)
+          console.log(err);
-          setLoading(false)
+          setLoading(false);
-        })
+        });
     }
-    getProcessingOrder()
+    getProcessingOrder();
-  }, [])
+  }, []);
 
   useEffect(() => {
     const loadData = () => {
-      const indexOfLastPost = currentPage * itemPerPage
+      const indexOfLastPost = currentPage * itemPerPage;
-      const indexOfFirstPost = indexOfLastPost - itemPerPage
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost))
+      setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost));
-    }
+    };
-    loadData()
+    loadData();
-  }, [currentPage, itemPerPage, cancelledOrdersData])
+  }, [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">Customer</th>
-                          <th className="text-start">Amount</th>
+                          <th className="text-start">Order value</th>
-                          <th className="text-start">Placed On</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?.orderID}</td>
-                                <td className="text-start">{order.parent.name}</td>
-                                <td className="text-start">{order?.total_amount}</td>
                                 <td className="text-start">
-                                  {new Date(order?.placed_on).toLocaleString('en-IN', {
+                                  {order?.user?.name}
-                                    month: 'short',
+                                </td>
-                                    day: 'numeric',
+                                <td className="text-start">
-                                    year: 'numeric',
+                                  ${order?.total_amount}
-                                    hour: '2-digit',
+                                </td>
-                                    minute: 'numeric',
+                                <td className="text-start">
-                                    hour12: true,
+                                  {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{' '}
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                        {Math.min(currentPage * itemPerPage, cancelledOrdersData.length)} of{' '}
+                        {Math.min(
-                        {cancelledOrdersData.length} entries
+                          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 disabled"
-                                : 'paginate_button page-item previous'
+                                : "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' }}
+                                style={{ cursor: "pointer" }}
-                                onClick={(e) => setCurrentPage((prev) => prev - 1)}
+                                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 ">
+                            <li className="paginate_button page-item ">
-                                <span
+                              <span
-                                  className="page-link"
+                                className="page-link"
-                                  style={{ cursor: 'pointer' }}
+                                style={{ cursor: "pointer" }}
-                                  onClick={() => {
+                                onClick={() => {
-                                    setCurrentPage((prev) => prev + 1)
+                                  setCurrentPage((prev) => prev + 1);
-                                  }}
+                                }}
-                                >
+                              >
-                                  {currentPage + 1}
+                                {currentPage + 1}
-                                </span>
+                              </span>
-                              </li>
+                            </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"
-                                : 'paginate_button page-item next disabled'
+                                : "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;

src/views/orders/DeliveredOrders.js

@@ -1,49 +1,52 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import axios from 'axios'
+import axios from "axios";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
 
 function DeliveredOrders() {
-  const token = isAutheticated()
+  const token = isAutheticated();
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [success, setSuccess] = useState(true)
+  const [success, setSuccess] = useState(true);
-  const [deliveredOrdersData, setDeliveredOrdersData] = useState([])
+  const [deliveredOrdersData, setDeliveredOrdersData] = useState([]);
 
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1);
-  const [itemPerPage, setItemPerPage] = useState(10)
+  const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(deliveredOrdersData)
+  const [showData, setShowData] = useState(deliveredOrdersData);
 
   const handleShowEntries = (e) => {
-    setCurrentPage(1)
+    setCurrentPage(1);
-    setItemPerPage(e.target.value)
+    setItemPerPage(e.target.value);
-  }
+  };
 
   useEffect(() => {
     function getProcessingOrder() {
       axios
-        .get(`/api/order/list/delivered`, {
+        .get(`/api/order/getAll/delivered`, {
-          headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
         })
         .then((res) => {
-          setDeliveredOrdersData(res.data.data)
+          setDeliveredOrdersData(res.data.order);
-          setLoading(false)
+          setLoading(false);
         })
         .catch((err) => {
-          console.log(err)
+          console.log(err);
-          setLoading(false)
+          setLoading(false);
-        })
+        });
     }
-    getProcessingOrder()
+    getProcessingOrder();
-  }, [])
+  }, []);
 
   useEffect(() => {
     const loadData = () => {
-      const indexOfLastPost = currentPage * itemPerPage
+      const indexOfLastPost = currentPage * itemPerPage;
-      const indexOfFirstPost = indexOfLastPost - itemPerPage
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost))
+      setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost));
-    }
+    };
-    loadData()
+    loadData();
-  }, [currentPage, itemPerPage, deliveredOrdersData])
+  }, [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">Customer</th>
-                          <th className="text-start">Amount</th>
+                          <th className="text-start">Order value</th>
-                          <th className="text-start">Placed On</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?.orderID}</td>
-                                <td className="text-start">{order.parent.name}</td>
-                                <td className="text-start">{order?.total_amount}</td>
                                 <td className="text-start">
-                                  {new Date(order?.placed_on).toLocaleString('en-IN', {
+                                  {order?.user?.name}
-                                    month: 'short',
+                                </td>
-                                    day: 'numeric',
+                                <td className="text-start">
-                                    year: 'numeric',
+                                  ${order?.total_amount}
-                                    hour: '2-digit',
+                                </td>
-                                    minute: 'numeric',
+                                <td className="text-start">
-                                    hour12: true,
+                                  {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{' '}
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                        {Math.min(currentPage * itemPerPage, deliveredOrdersData.length)} of{' '}
+                        {Math.min(
-                        {deliveredOrdersData.length} entries
+                          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 disabled"
-                                : 'paginate_button page-item previous'
+                                : "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' }}
+                                style={{ cursor: "pointer" }}
-                                onClick={(e) => setCurrentPage((prev) => prev - 1)}
+                                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 ">
+                            <li className="paginate_button page-item ">
-                                <span
+                              <span
-                                  className="page-link"
+                                className="page-link"
-                                  style={{ cursor: 'pointer' }}
+                                style={{ cursor: "pointer" }}
-                                  onClick={() => {
+                                onClick={() => {
-                                    setCurrentPage((prev) => prev + 1)
+                                  setCurrentPage((prev) => prev + 1);
-                                  }}
+                                }}
-                                >
+                              >
-                                  {currentPage + 1}
+                                {currentPage + 1}
-                                </span>
+                              </span>
-                              </li>
+                            </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"
-                                : 'paginate_button page-item next disabled'
+                                : "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;

src/views/orders/DispatchedOrders.js

@@ -1,50 +1,55 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import axios from 'axios'
+import axios from "axios";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
-
 
 function DispatchedOrders() {
-  const token = isAutheticated()
+  const token = isAutheticated();
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [success, setSuccess] = useState(true)
+  const [success, setSuccess] = useState(true);
-  const [dispatchedOrdersData, setDispatchedOrdersData] = useState([])
+  const [dispatchedOrdersData, setDispatchedOrdersData] = useState([]);
 
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1);
-  const [itemPerPage, setItemPerPage] = useState(10)
+  const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(dispatchedOrdersData)
+  const [showData, setShowData] = useState(dispatchedOrdersData);
 
   const handleShowEntries = (e) => {
-    setCurrentPage(1)
+    setCurrentPage(1);
-    setItemPerPage(e.target.value)
+    setItemPerPage(e.target.value);
-  }
+  };
 
   useEffect(() => {
     function getDispatchedOrder() {
       axios
-        .get(`/api/order/list/dispatched`, {
+        .get(`/api/order/getAll/dispatched`, {
-          headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
         })
         .then((res) => {
-          setDispatchedOrdersData(res.data.data)
+          setDispatchedOrdersData(res.data.order);
-          setLoading(false)
+          console.log(res.data.order);
+          setLoading(false);
         })
         .catch((err) => {
-          console.log(err)
+          console.log(err);
-          setLoading(false)
+          setLoading(false);
-        })
+        });
     }
-    getDispatchedOrder()
+    getDispatchedOrder();
-  }, [])
+  }, []);
 
   useEffect(() => {
     const loadData = () => {
-      const indexOfLastPost = currentPage * itemPerPage
+      const indexOfLastPost = currentPage * itemPerPage;
-      const indexOfFirstPost = indexOfLastPost - itemPerPage
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost))
+      setShowData(
-    }
+        dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost)
-    loadData()
+      );
-  }, [currentPage, itemPerPage, dispatchedOrdersData])
+    };
+    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">Customer</th>
-                          <th className="text-start">Amount</th>
+                          <th className="text-start">Order value</th>
-                          <th className="text-start">Placed On</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?.orderID}</td>
-                                <td className="text-start">{order.parent.name}</td>
-                                <td className="text-start">{order?.total_amount}</td>
                                 <td className="text-start">
-                                  {new Date(order?.placed_on).toLocaleString('en-IN', {
+                                  {order?.user?.name}
-                                    month: 'short',
+                                </td>
-                                    day: 'numeric',
+                                <td className="text-start">
-                                    year: 'numeric',
+                                  ${order?.total_amount}
-                                    hour: '2-digit',
+                                </td>
-                                    minute: 'numeric',
+                                <td className="text-start">
-                                    hour12: true,
+                                  {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{' '}
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                        {Math.min(currentPage * itemPerPage, dispatchedOrdersData.length)} of{' '}
+                        {Math.min(
-                        {dispatchedOrdersData.length} entries
+                          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 disabled"
-                                : 'paginate_button page-item previous'
+                                : "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' }}
+                                style={{ cursor: "pointer" }}
-                                onClick={(e) => setCurrentPage((prev) => prev - 1)}
+                                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 ">
+                            <li className="paginate_button page-item ">
-                                <span
+                              <span
-                                  className="page-link"
+                                className="page-link"
-                                  style={{ cursor: 'pointer' }}
+                                style={{ cursor: "pointer" }}
-                                  onClick={() => {
+                                onClick={() => {
-                                    setCurrentPage((prev) => prev + 1)
+                                  setCurrentPage((prev) => prev + 1);
-                                  }}
+                                }}
-                                >
+                              >
-                                  {currentPage + 1}
+                                {currentPage + 1}
-                                </span>
+                              </span>
-                              </li>
+                            </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"
-                                : 'paginate_button page-item next disabled'
+                                : "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;

src/views/orders/NewOrders.js

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

src/views/orders/ProcessingOrders.js

@@ -1,50 +1,56 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import axios from 'axios'
+import axios from "axios";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
-
+import toast from "react-hot-toast";
 
 function ProcessingOrders() {
-  const token = isAutheticated()
+  const token = isAutheticated();
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [success, setSuccess] = useState(true)
+  const [success, setSuccess] = useState(true);
-  const [processingOrdersData, setProcessingOrdersData] = useState([])
+  const [processingOrdersData, setProcessingOrdersData] = useState([]);
 
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(1);
-  const [itemPerPage, setItemPerPage] = useState(10)
+  const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(processingOrdersData)
+  const [showData, setShowData] = useState(processingOrdersData);
 
   const handleShowEntries = (e) => {
-    setCurrentPage(1)
+    setCurrentPage(1);
-    setItemPerPage(e.target.value)
+    setItemPerPage(e.target.value);
-  }
+  };
 
   useEffect(() => {
     function getProcessingOrder() {
       axios
-        .get(`/api/order/list/processing`, {
+        .get(`/api/order/getAll/processing`, {
-          headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
         })
         .then((res) => {
-          setProcessingOrdersData(res.data.data)
+          console.log(res.data.order);
-          setLoading(false)
+          setProcessingOrdersData(res.data.order);
+          setLoading(false);
         })
         .catch((err) => {
-          console.log(err)
+          console.log(err);
-          setLoading(false)
+          setLoading(false);
-        })
+        });
     }
-    getProcessingOrder()
+    getProcessingOrder();
-  }, [])
+  }, []);
 
   useEffect(() => {
     const loadData = () => {
-      const indexOfLastPost = currentPage * itemPerPage
+      const indexOfLastPost = currentPage * itemPerPage;
-      const indexOfFirstPost = indexOfLastPost - itemPerPage
+      const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(processingOrdersData.slice(indexOfFirstPost, indexOfLastPost))
+      setShowData(
-    }
+        processingOrdersData.slice(indexOfFirstPost, indexOfLastPost)
-    loadData()
+      );
-  }, [currentPage, itemPerPage, processingOrdersData])
+    };
+    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">Customer</th>
-                          <th className="text-start">Amount</th>
+                          <th className="text-start">Order value</th>
-                          <th className="text-start">Placed On</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?.orderID}</td>
-                                <td className="text-start">{order.parent.name}</td>
-                                <td className="text-start">{order?.total_amount}</td>
                                 <td className="text-start">
-                                  {new Date(order?.placed_on).toLocaleString('en-IN', {
+                                  {order?.user?.name}
-                                    month: 'short',
+                                </td>
-                                    day: 'numeric',
+                                <td className="text-start">
-                                    year: 'numeric',
+                                  ${order?.total_amount}
-                                    hour: '2-digit',
+                                </td>
-                                    minute: 'numeric',
+                                <td className="text-start">
-                                    hour12: true,
+                                  {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{' '}
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                        {Math.min(currentPage * itemPerPage, processingOrdersData.length)} of{' '}
+                        {Math.min(
-                        {processingOrdersData.length} entries
+                          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 disabled"
-                                : 'paginate_button page-item previous'
+                                : "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' }}
+                                style={{ cursor: "pointer" }}
-                                onClick={(e) => setCurrentPage((prev) => prev - 1)}
+                                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 ">
+                            <li className="paginate_button page-item ">
-                                <span
+                              <span
-                                  className="page-link"
+                                className="page-link"
-                                  style={{ cursor: 'pointer' }}
+                                style={{ cursor: "pointer" }}
-                                  onClick={() => {
+                                onClick={() => {
-                                    setCurrentPage((prev) => prev + 1)
+                                  setCurrentPage((prev) => prev + 1);
-                                  }}
+                                }}
-                                >
+                              >
-                                  {currentPage + 1}
+                                {currentPage + 1}
-                                </span>
+                              </span>
-                              </li>
+                            </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"
-                                : 'paginate_button page-item next disabled'
+                                : "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;

src/views/orders/ViewOdr.js

@@ -1,107 +1,111 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from "react";
-import axios from 'axios'
+import axios from "axios";
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from "react-router-dom";
-import QRCode from 'react-qr-code'
+import QRCode from "react-qr-code";
-import ReactToPrint from 'react-to-print'
+import ReactToPrint from "react-to-print";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
 
-import PrintOrderDetails from './PrintOrderDetails.js'
+import PrintOrderDetails from "./PrintOrderDetails.js";
 
-function ViewOrder() {
+function ViewOdr() {
-  const { status, id } = useParams()
+  const { status, id } = useParams();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const printOrderRef = useRef()
+  const printOrderRef = useRef();
-  const token = isAutheticated()
+  const token = isAutheticated();
-  const [orderData, setOrderData] = useState({})
+  const [orderData, setOrderData] = useState({});
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
-  const [orderStatus, setOrderStatus] = useState('')
+  const [orderStatus, setOrderStatus] = useState("");
   const [data, setData] = useState({
-    courier_name: '',
+    courier_name: "",
-    tracking_id: '',
+    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)
+          setLoading(false);
-          setOrderData(res.data.data)
+          console.log(res.data);
+          setOrderData(res.data.data);
         })
         .catch((err) => {
-          setLoading(false)
+          setLoading(false);
-          getBack()
+          getBack();
-        })
+        });
     }
-    getOrderDetails()
+    getOrderDetails();
-  }, [])
+  }, []);
 
   const handleChange = (e) => {
-    if (e.target.type === 'text') {
+    if (e.target.type === "text") {
-      setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
+      setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
     } else {
-      setOrderStatus(e.target.value)
+      setOrderStatus(e.target.value);
     }
-  }
+  };
 
   function handleSubmit() {
-    if (orderStatus === '') return
+    if (orderStatus === "") return;
-    if (orderData.status === 'processing') {
+    if (orderData.status === "processing") {
-      if (data.courier_name.trim() === '' || data.tracking_id.trim() === '') {
+      if (data.courier_name.trim() === "" || data.tracking_id.trim() === "") {
         swal({
-          title: 'Warning',
+          title: "Warning",
-          text: 'Enter Courier Name And Tracking ID!',
+          text: "Enter Courier Name And Tracking ID!",
-          icon: 'error',
+          icon: "error",
-          button: 'Retry',
+          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',
+          title: "Updated",
-          text: 'Order updated!',
+          text: "Order updated!",
-          icon: 'success',
+          icon: "success",
-          button: 'Return',
+          button: "Return",
-        })
+        });
-        setLoading(false)
+        setLoading(false);
-        getBack()
+        getBack();
       })
       .catch((err) => {
-        setLoading(false)
+        setLoading(false);
         swal({
-          title: 'Warning',
+          title: "Warning",
-          text: 'Something went wrong!',
+          text: "Something went wrong!",
-          icon: 'error',
+          icon: "error",
-          button: 'Retry',
+          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 !== "cancelled" &&
-                      orderData?.status !== 'returned' &&
+                      orderData?.status !== "returned" &&
-                      orderData?.status !== 'delivered' && (
+                      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%',
+                                    width: "100%",
-                                    objectFit: 'contain',
+                                    objectFit: "contain",
-                                    maxHeight: '150px',
+                                    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' && (
+                    {status !== "cancelled" &&
-                      <div className="mt-1">
+                      status !== "returned" &&
-                        <label className="fw-bold">Status :</label>
+                      status !== "delivered" && (
-                        <select
+                        <div className="mt-1">
-                          className="form-control"
+                          <label className="fw-bold">Status :</label>
-                          onChange={handleChange}
+                          <select
-                          value={orderStatus}
+                            className="form-control"
-                        >
+                            onChange={handleChange}
-                          {orderData.status === 'new' && (
+                            value={orderStatus}
-                            <>
+                          >
-                              <option value="">New</option>
+                            {orderData.status === "new" && (
-                              <option value="processing">Processing</option>
+                              <>
-                              <option value="cancelled">Cancelled</option>
+                                <option value="">New</option>
-                            </>
+                                <option value="processing">Processing</option>
-                          )}
+                                <option value="cancelled">Cancelled</option>
-                          {orderData.status === 'processing' && (
+                              </>
-                            <>
+                            )}
-                              <option value="">Processing</option>
+                            {orderData.status === "processing" && (
-                              <option value="dispatched">Dispatch</option>
+                              <>
-                            </>
+                                <option value="">Processing</option>
-                          )}
+                                <option value="dispatched">Dispatch</option>
-                          {orderData.status === 'dispatched' && (
+                              </>
-                            <>
+                            )}
-                              <option value="">Dispatch</option>
+                            {orderData.status === "dispatched" && (
-                              <option value="delivered">Delivered</option>
+                              <>
-                            </>
+                                <option value="">Dispatch</option>
-                          )}
+                                <option value="delivered">Delivered</option>
-                        </select>
+                              </>
-                      </div>
+                            )}
-                    )}
+                          </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?.full_name}, ${
-                              }, ${orderData.address?.area_street_sector_village}, ${orderData.address?.landmark && orderData.address?.landmark + ', '
+                              orderData.address?.flat_house_no_apartment
-                              }${orderData.address?.address_line &&
+                            }, ${
-                              orderData.address?.address_line + ', '
+                              orderData.address?.area_street_sector_village
-                              }${orderData.address?.city}, ${orderData.address?.state}, ${orderData.address?.pincode
+                            }, ${
-                              }`}
+                              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',
+                        borderRadius: "8px",
-                        borderCollapse: 'collapse',
+                        borderCollapse: "collapse",
-                        overflow: 'hidden',
+                        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', {
+                              ? new Date(
-                                month: 'short',
+                                  orderData?.status_timeline?.new
-                                day: 'numeric',
+                                ).toLocaleString("en-IN", {
-                                year: 'numeric',
+                                  month: "short",
-                                hour: '2-digit',
+                                  day: "numeric",
-                                minute: 'numeric',
+                                  year: "numeric",
-                                hour12: true,
+                                  hour: "2-digit",
-                              })
+                                  minute: "numeric",
-                              : new Date(orderData?.placed_on).toLocaleString('en-IN', {
+                                  hour12: true,
-                                month: 'short',
+                                })
-                                day: 'numeric',
+                              : new Date(orderData?.placed_on).toLocaleString(
-                                year: 'numeric',
+                                  "en-IN",
-                                hour: '2-digit',
+                                  {
-                                minute: 'numeric',
+                                    month: "short",
-                                hour12: true,
+                                    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(
+                              ? new Date(
-                                'en-IN',
+                                  orderData?.status_timeline?.processing
-                                {
+                                ).toLocaleString("en-IN", {
-                                  month: 'short',
+                                  month: "short",
-                                  day: 'numeric',
+                                  day: "numeric",
-                                  year: 'numeric',
+                                  year: "numeric",
-                                  hour: '2-digit',
+                                  hour: "2-digit",
-                                  minute: 'numeric',
+                                  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(
+                              ? new Date(
-                                'en-IN',
+                                  orderData?.status_timeline?.dispatched
-                                {
+                                ).toLocaleString("en-IN", {
-                                  month: 'short',
+                                  month: "short",
-                                  day: 'numeric',
+                                  day: "numeric",
-                                  year: 'numeric',
+                                  year: "numeric",
-                                  hour: '2-digit',
+                                  hour: "2-digit",
-                                  minute: 'numeric',
+                                  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(
+                              ? new Date(
-                                'en-IN',
+                                  orderData?.status_timeline?.delivered
-                                {
+                                ).toLocaleString("en-IN", {
-                                  month: 'short',
+                                  month: "short",
-                                  day: 'numeric',
+                                  day: "numeric",
-                                  year: 'numeric',
+                                  year: "numeric",
-                                  hour: '2-digit',
+                                  hour: "2-digit",
-                                  minute: 'numeric',
+                                  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(
+                              ? new Date(
-                                'en-IN',
+                                  orderData?.status_timeline?.cancelled
-                                {
+                                ).toLocaleString("en-IN", {
-                                  month: 'short',
+                                  month: "short",
-                                  day: 'numeric',
+                                  day: "numeric",
-                                  year: 'numeric',
+                                  year: "numeric",
-                                  hour: '2-digit',
+                                  hour: "2-digit",
-                                  minute: 'numeric',
+                                  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(
+                              ? new Date(
-                                'en-IN',
+                                  orderData?.status_timeline?.returned
-                                {
+                                ).toLocaleString("en-IN", {
-                                  month: 'short',
+                                  month: "short",
-                                  day: 'numeric',
+                                  day: "numeric",
-                                  year: 'numeric',
+                                  year: "numeric",
-                                  hour: '2-digit',
+                                  hour: "2-digit",
-                                  minute: 'numeric',
+                                  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;

src/views/orders/ViewOrders.js

@@ -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 className="d-flex justify-content-center">
-                <div class="spinner-border  text-info" role="status">
+                <div className="spinner-border  text-info" role="status">
-                  <span class="visually-hidden">Loading...</span>
+                  <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>
+                            <th scope="row" className="text-warning">
-                            <td> : </td>
+                              Processing Started
-                            <td>
+                            </th>
-                              {productData?.status_timeline?.processing
+                            <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>
+                            <th scope="row" className="text-primary">
-                            <td> : </td>
+                              Dispatched On
-                            <td>
+                            </th>
-                              {productData?.status_timeline?.dispatched
+                            <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>
+                            <th scope="row" className="text-success">
-                            <td> : </td>
+                              Delivered On
-                            <td>
+                            </th>
-                              {productData?.status_timeline?.delivered
+                            <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">
+                          {orderDetails?.status_timeline?.cancelled && (
-                            <th scope="row">Cancelled On</th>
+                            <tr className="text-center">
-                            <td> : </td>
+                              <th scope="row" className="text-danger">
-                            <td>
+                                Cancelled On
-                              {productData?.status_timeline?.cancelled
+                              </th>
-                                ? new Date(
+                              <td className="text-danger"> : </td>
-                                    productData?.status_timeline?.cancelled
+                              <td className="text-danger">
-                                  ).toLocaleString("en-IN", {
+                                {orderDetails?.status_timeline?.cancelled
-                                    month: "short",
+                                  ? new Date(
-                                    day: "numeric",
+                                      orderDetails?.status_timeline?.cancelled
-                                    year: "numeric",
+                                    ).toLocaleString("en-IN", {
-                                    hour: "2-digit",
+                                      month: "short",
-                                    minute: "numeric",
+                                      day: "numeric",
-                                    hour12: true,
+                                      year: "numeric",
-                                  })
+                                      hour: "2-digit",
-                                : "-"}
+                                      minute: "numeric",
-                            </td>
+                                      hour12: true,
-                          </tr>
+                                    })
-                          <tr className="text-center">
+                                  : "-"}
+                              </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