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

src/_nav.js

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

src/index.js

@@ -14,7 +14,7 @@ import { cibGmail } from "@coreui/icons";
 import { createRoot } from "react-dom/client";
 
 const setupAxios = () => {
-  // axios.defaults.baseURL = "http://localhost:5000";
+  //axios.defaults.baseURL = "http://localhost:5000";
   axios.defaults.baseURL = "https://api.smellika.com";
 
   axios.defaults.headers = {

src/routes.js

@@ -92,7 +92,6 @@ import EditShippingPolicy from "./views/Content/editShippingPolicy";
 import EditRefundpolicy from "./views/Content/editRefundPolicy";
 import EditAboutUs from "./views/Content/editAboutUs";
 
-import UserTable from "./views/customerDetails/userTable";
 // import EditUserAddress from "./views/customerDetails/editUserAddress";
 // import AddUserAddress from "./views/customerDetails/addUserAddress";
 import viewDetails from "./views/customerDetails/viewDetails";
@@ -122,6 +121,13 @@ import CreateBlog from "./views/Blog/CreateBlog";
 import users from "./views/Users/users";
 import UpdateBlog from "./views/Blog/EditBlog";
 import ViewBlog from "./views/Blog/ViewBlog";
+import Home from "./views/Home/home";
+import EditPanel1 from "./views/Home/editPanel1";
+import EditPanel2 from "./views/Home/editPanel2";
+import EditPanel3 from "./views/Home/editPanel3";
+import Editpanel4 from "./views/Home/editPanel4";
+import CustomerTable from "./views/customerDetails/customerTable";
+import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
 import Charts from "./views/Charts/RevenueCharts";
 import UserCharts from "./views/Charts/UserChart";
 import ProductrevenueCharts from "./views/Charts/ProductRevenue";
@@ -172,7 +178,12 @@ const routes = [
   {
     path: "/customers-details",
     name: "User Table",
-    element: UserTable,
+    element: CustomerTable,
+  },
+  {
+    path: "/customers-details/:_id",
+    name: "User Table",
+    element: SingleUserAllDetails,
   },
   // {
   //   path: "/users-address/add",
@@ -312,6 +323,38 @@ const routes = [
     element: EditAboutUs,
   },
 
+  // Home
+  {
+    path: "/home",
+    name: "Home",
+    element: Home,
+  }, 
+  {
+    path: "/home/panel-1",
+    name: "EditPanel1",
+    element: EditPanel1,
+  }, 
+  {
+    path: "/home/panel-2",
+    name: "EditPanel2",
+    element: EditPanel2,
+  }, 
+  {
+    path: "/home/panel-3",
+    name: "EditPanel3",
+    element: EditPanel3,
+  },
+  {
+    path: "/home/panel-4",
+    name: "EditPanel4",
+    element: Editpanel4,
+  },  
+  
+
+
+
+
+
   // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
   //Complaints
   {

src/views/Content/editPrivacyPolicy.js

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

src/views/Home/editPanel1.js

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

src/views/Home/editPanel2.js

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

src/views/Home/editPanel3.js

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

src/views/Home/editPanel4.js

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

src/views/Home/home.js

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

src/views/Products/AddProduct.js

@@ -33,6 +33,7 @@ const AddProduct = () => {
   const [category, setCategoryName] = useState("");
   const [error, setError] = useState("");
   const [selectedTax, setselectedTax] = useState();
+  const [product_Status, setproduct_Status] = useState("");
   const [totalAmt, setTotalAmt] = useState(0);
   const [gst_amount, setGst_amount] = useState(0);
 
@@ -127,6 +128,7 @@ const AddProduct = () => {
       category === "" ||
       selectedTax === "" ||
       gst_amount === "" ||
+      product_Status === "" ||
       price === ""
     ) {
       swal({
@@ -147,6 +149,7 @@ const AddProduct = () => {
     formData.append("category", category);
     formData.append("total_amount", totalAmt);
     formData.append("gst_amount", gst_amount);
+    formData.append("product_Status", product_Status);
 
     formData.append("gst", selectedTax);
 
@@ -525,6 +528,23 @@ const AddProduct = () => {
                   // onChange={(e) => setPrice(e.target.value)}
                 />
               </div>
+
+              <div className=" mb-3">
+                <label htmlFor="title" className="form-label">
+                  Product Status *
+                </label>{" "}
+                <select
+                  className="form-control"
+                  name="product_Status"
+                  id="product_Status"
+                  value={product_Status}
+                  onChange={(e) => setproduct_Status(e.target.value)}
+                >
+                  <option value="">--Select--</option>
+                  <option value="Active">Active</option>
+                  <option value="Inactive">Inactive</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>

src/views/Products/EditProduct.js

@@ -35,6 +35,8 @@ const EditProduct = () => {
   const [error, setError] = useState("");
   const [initTax, setInitTax] = useState();
   const [selectedTax, setselectedTax] = useState();
+  const [product_Status, setproduct_Status] = useState("");
+
   const [totalAmt, setTotalAmt] = useState(0);
   const [gst_amount, setGst_amount] = useState(0);
   const [newUpdatedImages, setNewUpdatedImages] = useState([]);
@@ -49,7 +51,6 @@ const EditProduct = () => {
         },
       })
       .then((res) => {
-        // console.log(res?.data?.product?.gst?._id);
         setName(res?.data?.product.name);
         setDescription(res.data.product.description);
         setProductImages(res.data.product.image);
@@ -59,6 +60,7 @@ const EditProduct = () => {
         setInitTax(res.data.product?.gst?._id);
         setTotalAmt(res.data.product?.total_amount);
         setGst_amount(res.data.product?.gst_amount);
+        setproduct_Status(res.data.product?.product_Status);
       })
       .catch((err) => {
         swal({
@@ -153,6 +155,7 @@ const EditProduct = () => {
       selectedTax === "" ||
       gst_amount === "" ||
       price === "" ||
+      product_Status === "" ||
       totalAmt === "" ||
       gst_amount === "" ||
       (productImages.length == 0 && newUpdatedImages.length == 0)
@@ -175,6 +178,7 @@ const EditProduct = () => {
     formData.append("category", category);
     formData.append("total_amount", totalAmt);
     formData.append("gst_amount", gst_amount);
+    formData.append("product_Status", product_Status);
 
     formData.append("gst", initTax === "" ? selectedTax : initTax);
 
@@ -583,6 +587,22 @@ const EditProduct = () => {
                   // onChange={(e) => setPrice(e.target.value)}
                 />
               </div>
+              <div className=" mb-3">
+                <label htmlFor="title" className="form-label">
+                  Product Status *
+                </label>{" "}
+                <select
+                  className="form-control"
+                  name="product_Status"
+                  id="product_Status"
+                  value={product_Status}
+                  onChange={(e) => setproduct_Status(e.target.value)}
+                >
+                  <option value="">--Select--</option>
+                  <option value="Active">Active</option>
+                  <option value="Inactive">Inactive</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>

src/views/Products/ViewProduct.js

@@ -135,6 +135,10 @@ function ViewProduct() {
                         </tr>
                         {/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
                                                 <tr><th>Location</th><td>{product?.location}</td></tr> */}
+                        <tr>
+                          <th>Product Status</th>
+                          <td>{product?.product_Status}</td>
+                        </tr>
                         <tr>
                           <th>Created On</th>
                           <td>

src/views/customerDetails/customerTable.js

@@ -18,7 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import Fuse from "fuse.js";
 import { Typography } from "@material-ui/core";
 import OrderDetails from "./orderDetails";
-const UserTable = () => {
+const CustomerTable = () => {
   const token = isAutheticated();
   const [query, setQuery] = useState("");
   const navigate = useNavigate();
@@ -313,7 +313,7 @@ const UserTable = () => {
                                       Delete
                                     </button>
                                   </Link> */}
-                                  <Link to={`/users/view/${user._id}`}>
+                                  <Link to={`/customers-details/${user?._id}`}>
                                     <button
                                       type="button"
                                       className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
@@ -435,4 +435,4 @@ const UserTable = () => {
   );
 };
 
-export default UserTable;
+export default CustomerTable;

src/views/customerDetails/singleUserAllDetails.js

@@ -0,0 +1,324 @@
+import { Typography } from "@material-ui/core";
+import { Button } from "@mui/material";
+import axios from "axios";
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { isAutheticated } from "src/auth";
+
+const SingleUserAllDetails = () => {
+  const [user, setUser] = useState();
+  const [userOrder, setUserOrder] = useState();
+  const [userAllAddress, setUserAllAddress] = useState([]);
+  const token = isAutheticated();
+  //   const [loading, setLoading] = useState(true);
+  const _id = useParams()?._id;
+  // Get Shipping address of individual user
+  const getUserAddress = () => {
+    // setLoading(true);
+    axios
+      .get(`/api/shipping/address/user/address/${_id}`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        // console.log(res.data);
+        setUserAllAddress(res.data?.UserShippingAddress || []);
+        // toast.success(res.data.message ? res.data.message : "Address fetch!");
+
+        // setLoading(false);
+      })
+      .catch((error) => {
+        // setLoading(false);
+        swal({
+          title: "Warning",
+          text: error.message,
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+      });
+  };
+
+  const getOrders = async () => {
+    try {
+      const response = await axios.get(`/api/v1/admin/users/orders/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      setUserOrder(response.data.order);
+      // setLoading1(false);
+    } catch (error) {
+      console.error("Error fetching orders:", error);
+      swal({
+        title: "Warning",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      // setLoading1(false);
+    }
+  };
+  const getUserDetails = useCallback(async () => {
+    let resp = await axios.get(`/api/v1/admin/user/${_id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    setUser(resp.data.user);
+  }, [token]);
+
+  // useEffect(() => {
+  //     getUserDetails();
+  // }, [getUserDetails]);
+
+  useEffect(() => {
+    getOrders();
+    getUserAddress();
+    getUserDetails();
+  }, [_id]);
+  console.log(userOrder, " Single user order data ");
+  console.log(userAllAddress, "user all address ");
+  console.log(user, "user ");
+  let totalSpent = 0;
+
+  // Iterate through each order and sum up the total_amount
+  userOrder?.forEach((order) => {
+    totalSpent += order.total_amount;
+  });
+
+  return (
+    <div>
+      {/* SingleUserAllDetails
+      <Link to={`/customers-details`}>
+        <button
+          type="button"
+          className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
+        >
+          back
+        </button>
+      </Link> */}
+      <div className="row">
+        <div className="col-12">
+          <div
+            className="
+                    page-title-box
+                    d-flex
+                    align-items-center
+                    justify-content-between
+                  "
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Single Customer All Details
+            </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
+            </div>
+
+            <div className="page-title-right">
+              <Link to="/customers-details">
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  style={{
+                    fontWeight: "bold",
+                    marginBottom: "1rem",
+                    textTransform: "capitalize",
+                  }}
+                >
+                  Back
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card" style={{ padding: "1rem" }}>
+        <h5 style={{ fontWeight: "bold" }}>&bull; Customer Profile </h5>
+        <div style={{ marginLeft: "1rem", marginTop: "1rem" }}>
+          <Typography style={{ fontWeight: "bold" }}>
+            Customer Name:<b> {user?.name}</b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Customer ID:<b style={{ marginLeft: "1.5rem" }}> {user?._id}</b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Date Registered :
+            <b>
+              {" "}
+              {new Date(user?.createdAt).toLocaleString("en-IN", {
+                weekday: "short",
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                hour12: true,
+              })}
+            </b>
+          </Typography>
+          <Typography style={{ fontWeight: "bold" }}>
+            Last Purchase:
+            <b style={{ marginLeft: "1.5rem" }}>
+              {userOrder?.length > 0
+                ? new Date(userOrder[0]?.createdAt).toLocaleString("en-IN", {
+                    weekday: "short",
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                    hour: "numeric",
+                    minute: "numeric",
+                    hour12: true,
+                  })
+                : userOrder
+                ? "No Purchase"
+                : "Loading"}
+            </b>
+          </Typography>
+        </div>
+        <div style={{ marginTop: "2rem" }}>
+          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
+            &bull; Addresses{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Addresses : {userAllAddress?.length}{" "}
+          </h5>
+          {userAllAddress?.length > 0 && (
+            <div className="table-responsive table-shoot mt-3">
+              <table
+                className="table table-centered table-nowrap"
+                style={{ border: "1px solid" }}
+              >
+                <thead
+                  className="thead-info"
+                  style={{ background: "rgb(140, 213, 213)" }}
+                >
+                  <tr>
+                    <th>SL No.</th>
+                    <th>Address </th>
+                    {/* <th>Profile Image</th> */}
+                  </tr>
+                </thead>
+                <tbody>
+                  {userAllAddress?.length === 0 && (
+                    <tr className="text-center">
+                      <td colSpan="6">
+                        <h5>No Data Available</h5>
+                      </td>
+                    </tr>
+                  )}
+                  {userAllAddress?.map((address, i) => {
+                    return (
+                      <tr key={i}>
+                        <td className="text-start">{i + 1}</td>
+                        <td style={{ maxWidth: "400px" }}>
+                          <strong>
+                            {address?.first_Name} {address?.last_name},
+                            {address?.phone_Number},{address?.street},
+                            {address?.city},{address?.state},{address?.country},
+                            {address?.postalCode}
+                          </strong>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+        <div style={{ marginTop: "2rem" }}>
+          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
+            &bull; Orders{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Orders : {userOrder?.length}{" "}
+          </h5>
+          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+            &bull; Total Spent : ₹ {totalSpent}{" "}
+          </h5>
+          {userOrder?.length > 0 && (
+            <div className="table-responsive table-shoot mt-3">
+              <table
+                className="table table-centered table-nowrap"
+                style={{ border: "1px solid" }}
+              >
+                <thead
+                  className="thead-info"
+                  style={{ background: "rgb(140, 213, 213)" }}
+                >
+                  <tr>
+                    <th>SL No.</th>
+                    <th>Order Date </th>
+                    <th>Order Id </th>
+                    <th>Items </th>
+                    <th>Order Amount </th>
+                    {/* <th>Profile Image</th> */}
+                  </tr>
+                </thead>
+                <tbody>
+                  {userAllAddress?.length === 0 && (
+                    <tr className="text-center">
+                      <td colSpan="6">
+                        <h5>No Data Available</h5>
+                      </td>
+                    </tr>
+                  )}
+                  {userOrder?.map((order, i) => {
+                    return (
+                      <tr key={i}>
+                        <td className="text-start">{i + 1}</td>
+                        <td>
+                          {" "}
+                          {new Date(order?.createdAt).toLocaleString("en-IN", {
+                            weekday: "short",
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                            hour: "numeric",
+                            minute: "numeric",
+                            hour12: true,
+                          })}
+                        </td>
+                        <td>{order?.orderID}</td>
+                        <td>
+                          {order?.orderItems?.map((item, i) => (
+                            <div
+                              style={{ display: "flex", marginTop: "1rem" }}
+                              key={i}
+                            >
+                              <p>{item?.name}</p>
+                              <div>
+                                {item?.image?.map((img, i) => (
+                                  <img
+                                    style={{
+                                      width: "50px",
+                                      height: "50px",
+                                      marginLeft: "1rem",
+                                    }}
+                                    src={img?.url}
+                                    alt="img not available"
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </td>
+                        <td>₹ {order?.total_amount}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SingleUserAllDetails;

src/views/orders/CancelledOrders.js

@@ -155,7 +155,7 @@ function CancelledOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-danger text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/DispatchedOrders.js

@@ -158,7 +158,7 @@ function DispatchedOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-info text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/NewOrders.js

@@ -210,7 +210,7 @@ function NewOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-primary text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/ProcessingOrders.js

@@ -159,7 +159,7 @@ function ProcessingOrders() {
                                   )}
                                 </td>
                                 <td className="text-start">
-                                  <span className="badge text-bg-success text-white">
+                                  <span className="badge text-bg-warning text-white">
                                     {order?.orderStatus}
                                   </span>
                                 </td>

src/views/orders/ViewOrders.js

@@ -171,6 +171,77 @@ function ViewOrders() {
         //   swal.close(); // Close the popup if canceled
         // }
       });
+    } else if (orderStatus === "cancelled") {
+      swal({
+        title: `Are you sure for ${orderStatus}?`,
+        icon: "warning",
+        content: {
+          element: "div",
+          attributes: {
+            innerHTML:
+              '<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
+          },
+        },
+        buttons: {
+          Yes: { text: "Submit", value: true },
+
+          Cancel: { text: "Cancel", value: "cancel" },
+        },
+      }).then((result) => {
+        if (result === true) {
+          // You have the input values, you can use them in your API call
+          const ReasonforCancellation = document
+            .getElementById("input1")
+            .value.trim();
+
+          // Check if values are entered
+          if (ReasonforCancellation === "") {
+            swal({
+              title: "Warning",
+              text: "Please enter Reason for Cancellation",
+              icon: "warning",
+              button: "Ok",
+              dangerMode: true,
+            });
+          } else {
+            axios
+              .patch(
+                `/api/order/change/status/${id}`,
+                {
+                  status: orderStatus,
+                  ReasonforCancellation,
+                },
+                {
+                  headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    Authorization: `Bearer ${token}`,
+                  },
+                }
+              )
+              .then((res) => {
+                console.log("status");
+                toast.success(
+                  `Order status change ${status} to ${orderStatus}`
+                );
+                // setSuccess((prev) => !prev);
+              })
+              .catch((err) => {
+                swal({
+                  title: "Warning",
+                  text: err.response.data.message
+                    ? err.response.data.message
+                    : "Something went wrong!",
+                  icon: "error",
+                  button: "Retry",
+                  dangerMode: true,
+                });
+              });
+          }
+        }
+        // else {
+        //   swal.close(); // Close the popup if canceled
+        // }
+      });
     } else if (orderStatus === "delivered") {
       swal({
         title: `Are you sure for ${orderStatus}?`,
@@ -451,9 +522,9 @@ function ViewOrders() {
                                           </div>
 
                                           <p className="m-0 mt-3 ms-3">
-                                            <stong> Total Price:</stong> ₹
+                                            <stong> Subtotal:</stong> ₹
                                             {productDetails?.quantity *
-                                              productDetails?.price}
+                                              productDetails?.total_Amount}
                                           </p>
                                         </div>
                                         <div className="col-sm-6">
@@ -461,6 +532,10 @@ function ViewOrders() {
                                             <stong> Price:</stong> ₹
                                             {productDetails?.price}
                                           </p>
+                                          <p className="m-0 mt-3">
+                                            <stong> GST:</stong> ₹
+                                            {productDetails?.gst_amount}
+                                          </p>
                                         </div>
                                       </div>
                                     </div>
@@ -629,9 +704,22 @@ function ViewOrders() {
                   <div className="card">
                     <div className="card-body">
                       <div className="mt-1">
-                        <h6 className="text-success">
+                        {orderDetails?.orderStatus !== "cancelled" ? (
-                          Order Status: {orderDetails?.orderStatus}
+                          <h5 className="text-success">
-                        </h6>
+                            Order Status: {orderDetails?.orderStatus}
+                          </h5>
+                        ) : (
+                          <>
+                            <h5 className="text-danger">
+                              Order Status: {orderDetails?.orderStatus}
+                            </h5>
+                            <p className="text-danger">
+                              {" "}
+                              Order Cancelled Reason:{" "}
+                              {orderDetails?.order_Cancelled_Reason}
+                            </p>
+                          </>
+                        )}
                         {/* order status change  */}{" "}
                         <div className="mb-2">
                           {" "}
@@ -712,7 +800,6 @@ function ViewOrders() {
                                                 <button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
                                             </div> */}
                       </div>
-
                       {orderDetails?.shipingInfo !== null && (
                         <div className="">
                           <div className="row" style={{ fontSize: "14px" }}>
@@ -775,7 +862,39 @@ function ViewOrders() {
                           )}
                         </label>
                       </div>
-                      <div className="mt-1">
+                      <div className="">
+                        <label>
+                          <span className="fw-bold">Payment Mode : </span>
+                          {orderDetails?.paymentMode === "online" ? (
+                            <span className="fw-bold text-success">ONLINE</span>
+                          ) : (
+                            <span className="fw-bold text-primary">
+                              CASH ON DELIVERY
+                            </span>
+                          )}
+                        </label>
+                      </div>
+
+                      <div className="">
+                        <label>
+                          <span className="fw-bold"> Paid At: </span>
+
+                          {orderDetails?.paidAt
+                            ? new Date(orderDetails?.paidAt).toLocaleString(
+                                "en-IN",
+                                {
+                                  month: "short",
+                                  day: "numeric",
+                                  year: "numeric",
+                                  hour: "2-digit",
+                                  minute: "numeric",
+                                  hour12: true,
+                                }
+                              )
+                            : "----"}
+                        </label>
+                      </div>
+                      <div className="">
                         <label>
                           <span className="fw-bold"> Order Created By: </span>
                           {orderDetails?.user?.name}
@@ -783,15 +902,20 @@ function ViewOrders() {
                       </div>
                       <div className="mt-1">
                         <label>
-                          <span className="fw-bold">paypal_payment_id : </span>
+                          <span className="fw-bold">
-                          {orderDetails?.paypal_payment_id}
+                            Razorpay Payment ID :{" "}
+                          </span>
+                          {orderDetails?.razorpay_payment_id
+                            ? orderDetails?.razorpay_payment_id
+                            : "----"}
                         </label>
                       </div>
-
+                      <div className="">
-                      <div className="mt-1">
                         <label>
-                          <span className="fw-bold">paypal_payer_id : </span>
+                          <span className="fw-bold">Razorpay Order ID : </span>
-                          {orderDetails?.paypal_payer_id}
+                          {orderDetails?.razorpay_order_id
+                            ? orderDetails?.razorpay_order_id
+                            : "----"}
                         </label>
                       </div>
                     </div>