diff --git a/src/views/Categories/categories.js b/src/views/Categories/categories.js
index 3d5ad4a..5e16b04 100644
--- a/src/views/Categories/categories.js
+++ b/src/views/Categories/categories.js
@@ -34,7 +34,7 @@ const Categories = () => {
   const [saveLoding, setSaveLoading] = useState(true);
   const [edit, setEdit] = useState(false);
   const [categoryName, setCategoryName] = useState("");
-  const [success, setSuccess] = useState(false);
+
   const [categoryId, setCategoryId] = useState("");
   const [category, setCategory] = useState([]);
   const [itemPerPage, setItemPerPage] = useState(10);
diff --git a/src/views/Products/AddProduct.js b/src/views/Products/AddProduct.js
index c412f5d..ed2d730 100644
--- a/src/views/Products/AddProduct.js
+++ b/src/views/Products/AddProduct.js
@@ -1,383 +1,427 @@
-
-
-
-import React, { useEffect, useState } from 'react'
-import Button from '@material-ui/core/Button'
-import { Link, useNavigate } from 'react-router-dom'
-import swal from 'sweetalert'
-import axios from 'axios'
-import { isAutheticated } from 'src/auth'
+import React, { useEffect, useState } from "react";
+import Button from "@material-ui/core/Button";
+import { Link, useNavigate } from "react-router-dom";
+import swal from "sweetalert";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
 // import { WebsiteURL } from '../WebsiteURL'
 
 const AddProduct = () => {
-    const token = isAutheticated()
-    const navigate = useNavigate()
-    const [data, setData] = useState({
-        image: [],
-        imageURL: [],
-        name: '',
-        description: '',
+  const token = isAutheticated();
+  const navigate = useNavigate();
 
-        price: '',
+  const [loading, setLoading] = useState(false);
+  const [allTax, setAllTax] = useState([]);
+  const [categories, setCategoies] = useState([]);
 
+  const [imagesPreview, setImagesPreview] = useState([]);
+  const [allimage, setAllImage] = useState([]);
 
-    })
+  useEffect(() => {
+    const getAllTax = async () => {
+      const res = await axios.get(`/api/tax/view_tax`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (res.data) {
+        setAllTax(res.data);
+      }
+    };
+    getAllTax();
+    getCategories();
+  }, [token]);
+  const [data, setData] = useState({
+    image: [],
+    imageURL: [],
+    name: "",
+    description: "",
 
+    price: "",
+    category: "",
+  });
 
-    const [loading, setLoading] = useState(false)
-    const [allTax, setAllTax] = useState([])
+  const getCategories = async () => {
+    try {
+      const response = await axios.get("/api/category/getCategories", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
-    const [imagesPreview, setImagesPreview] = useState([]);
-    const [allimage, setAllImage] = useState([]);
-
-
-    useEffect(() => {
-        const getAllTax = async () => {
-            const res = await axios.get(`/api/tax/view_tax`, {
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
-            })
-            if (res.data) {
-                setAllTax(res.data)
-            }
-        }
-        getAllTax()
-
-    }, [token])
-
-    const handleChange = (e) => {
-
-        if (e.target.id === 'image') {
-            if (
-                e.target.files[0]?.type === 'image/jpeg' ||
-                e.target.files[0]?.type === 'image/png' ||
-                e.target.files[0]?.type === 'image/jpg'
-            ) {
-                if (imagesPreview.length > 3) {
-                    swal({
-                        title: 'Warning',
-                        text: 'maximum Four image Upload ',
-                        icon: 'error',
-                        button: 'Close',
-                        dangerMode: true,
-                    })
-                    return
-                }
-                // only for file preview------------------------------------
-                const files = Array.from(e.target.files);
-                files.forEach((file) => {
-                    const reader = new FileReader();
-
-                    reader.onload = () => {
-                        if (reader.readyState === 2) {
-                            setImagesPreview((old) => [...old, reader.result]);
-
-                        }
-                    };
-
-                    reader.readAsDataURL(file)
-                });
-                // -----------------------------------------------------------------------------
-
-
-                setData((prev) => ({
-                    ...prev,
-
-
-                    image: [...data.image, ...e.target.files],
-                }))
-                return
-            } else {
-                swal({
-                    title: 'Warning',
-                    text: 'Upload jpg, jpeg, png only.',
-                    icon: 'error',
-                    button: 'Close',
-                    dangerMode: true,
-                })
-                setData((prev) => ({
-                    ...prev,
-                    imageURL: '',
-                    image: '',
-                }))
-                e.target.value = null
-                return
-            }
-        }
-        setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
+      if (response.status === 200) {
+        setCategoies(response?.data?.categories);
+      }
+    } catch (error) {
+      swal({
+        title: error,
+        text: " please login to access the resource ",
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
     }
+  };
 
-
-    const TaxRatechange = async (e) => {
-        let taxDetails = {
-            name: e.target.value.slice(12, 16),
-            rate: Number(e.target.value.slice(4, 6)),
-
-            taxId: e.target.value.slice(24)
-
+  const handleChange = (e) => {
+    if (e.target.id === "image") {
+      if (
+        e.target.files[0]?.type === "image/jpeg" ||
+        e.target.files[0]?.type === "image/png" ||
+        e.target.files[0]?.type === "image/jpg"
+      ) {
+        if (imagesPreview.length > 3) {
+          swal({
+            title: "Warning",
+            text: "maximum Four image Upload ",
+            icon: "error",
+            button: "Close",
+            dangerMode: true,
+          });
+          return;
         }
+        // only for file preview------------------------------------
+        const files = Array.from(e.target.files);
+        files.forEach((file) => {
+          const reader = new FileReader();
 
-        let trRate = taxDetails.rate / 100
-        let PriceWithT = Number(data.price);
-        PriceWithT += +((PriceWithT * trRate).toFixed());
-
-        //price_Level_2_With_Tax
-        let price_Level_2_With_Tax = Number(data.price_Level_2);
-        price_Level_2_With_Tax += +((price_Level_2_With_Tax * trRate).toFixed());
-        //
-        //price_Level_3_With_Tax
-        let price_Level_3_With_Tax = Number(data.price_Level_3);
-        price_Level_3_With_Tax += +((price_Level_3_With_Tax * trRate).toFixed());
-        setData((prev) => ({
-            ...prev,
-            price_With_Tax: PriceWithT,
-
-            price_Level_2_With_Tax: price_Level_2_With_Tax,
-
-
-            price_Level_3_With_Tax: price_Level_3_With_Tax,
-            taxId: taxDetails.taxId
-
-        }))
-    }
-
-    // console.log(data.image.length)
-    const handleSubmit = () => {
-        if (
-            data.name.trim() === '' ||
-
-            data.description.trim() === '' ||
-            data.price === '' ||
-            data.image === ''
-            // data.price_With_Tax === '' ||
-            // data.price_Level_2 === '' ||
-            // data.price_Level_2_With_Tax === '' ||
-            // data.price_Level_3 === '' ||
-            // data.price_Level_3_With_Tax === '' ||
-            // data.imageURL.trim() === ''
-        ) {
-            swal({
-                title: 'Warning',
-                text: 'Fill all mandatory fields',
-                icon: 'error',
-                button: 'Close',
-                dangerMode: true,
-            })
-            return
-        }
-        setLoading(true)
-        const formData = new FormData()
-        formData.append('name', data.name)
-
-        formData.append('description', data.description)
-        formData.append('price', data.price)
-
-
-
-
-        data.image.forEach((Singleimage) => {
-            // console.log(Singleimage)
-            formData.append("image", Singleimage);
+          reader.onload = () => {
+            if (reader.readyState === 2) {
+              setImagesPreview((old) => [...old, reader.result]);
+            }
+          };
 
+          reader.readAsDataURL(file);
         });
+        // -----------------------------------------------------------------------------
 
+        setData((prev) => ({
+          ...prev,
 
-        axios
-            .post(`/api/product/create/`, formData, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    'Content-Type': 'multipart/formdata',
-                    'Access-Control-Allow-Origin': '*',
-                },
-            })
-            .then((res) => {
-                swal({
-                    title: 'Added',
-                    text: 'Product added successfully!',
-                    icon: 'success',
-                    button: 'ok',
-                })
-                setLoading(false)
-                navigate('/products', { replace: true })
-            })
-            .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,
-                })
-            })
+          image: [...data.image, ...e.target.files],
+        }));
+        return;
+      } else {
+        swal({
+          title: "Warning",
+          text: "Upload jpg, jpeg, png only.",
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+        setData((prev) => ({
+          ...prev,
+          imageURL: "",
+          image: "",
+        }));
+        e.target.value = null;
+        return;
+      }
     }
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
 
-    return (
-        <div className="container">
-            <div className="row">
-                <div className="col-12">
-                    <div
-                        className="
+  const TaxRatechange = async (e) => {
+    let taxDetails = {
+      name: e.target.value.slice(12, 16),
+      rate: Number(e.target.value.slice(4, 6)),
+
+      taxId: e.target.value.slice(24),
+    };
+
+    let trRate = taxDetails.rate / 100;
+    let PriceWithT = Number(data.price);
+    PriceWithT += +(PriceWithT * trRate).toFixed();
+
+    //price_Level_2_With_Tax
+    let price_Level_2_With_Tax = Number(data.price_Level_2);
+    price_Level_2_With_Tax += +(price_Level_2_With_Tax * trRate).toFixed();
+    //
+    //price_Level_3_With_Tax
+    let price_Level_3_With_Tax = Number(data.price_Level_3);
+    price_Level_3_With_Tax += +(price_Level_3_With_Tax * trRate).toFixed();
+    setData((prev) => ({
+      ...prev,
+      price_With_Tax: PriceWithT,
+
+      price_Level_2_With_Tax: price_Level_2_With_Tax,
+
+      price_Level_3_With_Tax: price_Level_3_With_Tax,
+      taxId: taxDetails.taxId,
+    }));
+  };
+
+  // console.log(data.image.length)
+  const handleSubmit = () => {
+    if (
+      data.name.trim() === "" ||
+      data.description.trim() === "" ||
+      data.price === "" ||
+      data.image === ""
+      // data.price_With_Tax === '' ||
+      // data.price_Level_2 === '' ||
+      // data.price_Level_2_With_Tax === '' ||
+      // data.price_Level_3 === '' ||
+      // data.price_Level_3_With_Tax === '' ||
+      // data.imageURL.trim() === ''
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
+    }
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("name", data.name);
+
+    formData.append("description", data.description);
+    formData.append("price", data.price);
+    formData.append("category", data.category);
+
+    data.image.forEach((Singleimage) => {
+      // console.log(Singleimage)
+      formData.append("image", Singleimage);
+    });
+
+    axios
+      .post(`/api/product/create/`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Added",
+          text: "Product added successfully!",
+          icon: "success",
+          button: "ok",
+        });
+        setLoading(false);
+        navigate("/products", { replace: true });
+      })
+      .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,
+        });
+      });
+  };
+  console.log(data);
+
+  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">
-                            Add Product
-                        </div>
-                        <div style={{ display: 'flex', gap: '1rem' }}>
-                            <h4 className="mb-0"></h4>
-                        </div>
-
-                        <div className="page-title-right">
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                    marginRight: '5px',
-                                }}
-                                onClick={() => handleSubmit()}
-                                disabled={loading}
-                            >
-                                {loading ? 'Loading' : 'Save'}
-                            </Button>
-                            <Link to="/products">
-                                <Button
-                                    variant="contained"
-                                    color="secondary"
-                                    style={{
-                                        fontWeight: 'bold',
-                                        marginBottom: '1rem',
-                                        textTransform: 'capitalize',
-                                    }}
-                                >
-                                    Back
-                                </Button>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Add Product
             </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">
-                                    Product Name*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="name"
-                                    value={data.name}
-                                    maxLength={25}
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {data.name ? <><small className="charLeft mt-4 fst-italic">
-                                    {25 - data.name.length} characters left
-                                </small></> : <></>
-
-                                }                            </div>
-
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Description*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="description"
-                                    value={data.description}
-                                    maxLength="100"
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {data.description ? <><small className="charLeft mt-4 fst-italic">
-                                    {100 - data.description.length} characters left
-                                </small></> : <></>
-                                }
-                            </div>
-
-
-                            <div className="mb-3">
-                                <label htmlFor="image" className="form-label">
-                                    Product Image*
-                                </label>
-                                <input
-                                    type="file"
-                                    className="form-control"
-                                    id="image"
-                                    accept="image/*"
-                                    multiple
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                <p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
-                            </div>
-                            <div><strong className="fs-6 fst-italic">*Please Upload maximum four images</strong></div>
-
-
-                            <div id="createProductFormImage" className="w-25 d-flex">
-
-                                {imagesPreview.map((image, index) => (
-                                    <img className=" w-50 p-1 " key={index} src={image} alt="Product Preview" />
-                                ))}
-                            </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">
-
-
-                            <div className="mb-3 me-3">
-                                <label htmlFor="title" className="form-label">
-                                    Price (optional)
-                                </label>
-                                <input
-                                    type="number"
-                                    className="form-control"
-                                    id="price"
-                                    value={data.price}
-                                    onChange={(e) => handleChange(e)}
-
-                                />
-                            </div>
-
-
-
-
-
-
-
-
-                            {allTax.length > 0 && <div className=" mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Tax*
-                                </label>  <select className="   form-control" name="" id=""
-                                    onChange={(e) => TaxRatechange(e)}
-                                >
-                                    <option value="" disabled>-----</option>
-
-                                    {allTax.map((t, i) =>
-                                        <option key={i} value={`tax:${t.tax},name:${t.name}  ,taxId:${t._id}`}>{t.tax}% {t.name}</option>
-                                    )}
-                                </select>
-                            </div>
-                            }
-                        </div>
-                    </div>
-                </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
             </div>
+
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="primary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => handleSubmit()}
+                disabled={loading}
+              >
+                {loading ? "Loading" : "Save"}
+              </Button>
+              <Link to="/products">
+                <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">
+                  Product Name*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="name"
+                  value={data.name}
+                  maxLength={25}
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.name ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {25 - data.name.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}{" "}
+              </div>
 
-export default AddProduct
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Description*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="description"
+                  value={data.description}
+                  maxLength="100"
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.description ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {100 - data.description.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+
+              <div className="mb-3">
+                <label htmlFor="image" className="form-label">
+                  Product Image*
+                </label>
+                <input
+                  type="file"
+                  className="form-control"
+                  id="image"
+                  accept="image/*"
+                  multiple
+                  onChange={(e) => handleChange(e)}
+                />
+                <p className="pt-1 pl-2 text-secondary">
+                  Upload jpg, jpeg and png only*
+                </p>
+              </div>
+              <div>
+                <strong className="fs-6 fst-italic">
+                  *Please Upload maximum four images
+                </strong>
+              </div>
+
+              <div id="createProductFormImage" className="w-25 d-flex">
+                {imagesPreview.map((image, index) => (
+                  <img
+                    className=" w-50 p-1 "
+                    key={index}
+                    src={image}
+                    alt="Product Preview"
+                  />
+                ))}
+              </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">
+              <div className="mb-3 me-3">
+                <label htmlFor="title" className="form-label">
+                  Price (optional)
+                </label>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="price"
+                  value={data.price}
+                  onChange={(e) => handleChange(e)}
+                />
+              </div>
+              <div>
+                <label htmlFor="categorySelect">Select a Category:</label>
+                <select
+                  id="category"
+                  style={{ width: "100%" }}
+                  onChange={handleChange}
+                  value={data.category}
+                >
+                  <option value={""}>None</option>
+                  {categories.map((category, index) => (
+                    <option key={index} value={category.categoryName}>
+                      {category.categoryName}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {allTax.length > 0 && (
+                <div className=" mb-3">
+                  <label htmlFor="title" className="form-label">
+                    Tax*
+                  </label>{" "}
+                  <select
+                    className="   form-control"
+                    name=""
+                    id=""
+                    onChange={(e) => TaxRatechange(e)}
+                  >
+                    <option value="" disabled>
+                      -----
+                    </option>
+
+                    {allTax.map((t, i) => (
+                      <option
+                        key={i}
+                        value={`tax:${t.tax},name:${t.name}  ,taxId:${t._id}`}
+                      >
+                        {t.tax}% {t.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddProduct;
diff --git a/src/views/Products/EditProduct.js b/src/views/Products/EditProduct.js
index b6d06da..2a1e94d 100644
--- a/src/views/Products/EditProduct.js
+++ b/src/views/Products/EditProduct.js
@@ -1,414 +1,458 @@
-
-import React, { useEffect, useState } from 'react'
-import Button from '@material-ui/core/Button'
-import { Link, useNavigate, useParams } from 'react-router-dom'
-import swal from 'sweetalert'
-import axios from 'axios'
-import { isAutheticated } from 'src/auth'
+import React, { useEffect, useState } from "react";
+import Button from "@material-ui/core/Button";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import swal from "sweetalert";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
 // import { WebsiteURL } from '../WebsiteURL'
 
 const EditProduct = () => {
-    const id = useParams()?.id
+  const id = useParams()?.id;
 
-    const token = isAutheticated()
-    const navigate = useNavigate()
-    const [data, setData] = useState({
-        image: [],
-        imageURL: [],
-        name: '',
-        description: '',
+  const token = isAutheticated();
+  const navigate = useNavigate();
+  const [data, setData] = useState({
+    image: [],
+    imageURL: [],
+    name: "",
+    description: "",
+    category: "",
 
-        price: '',
+    price: "",
+  });
 
+  const [loading, setLoading] = useState(false);
+  const [allTax, setAllTax] = useState([]);
+  const [categories, setCatgories] = useState([]);
+  const [imagesPreview, setImagesPreview] = useState([]);
 
-    })
+  //get Productdata
+  const getProduct = async () => {
+    axios
+      .get(`/api/product/getOne/${id}`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        // console.log(res.data?.product?.image)
+        // if (res.data?.product?.image) {
+        //     res.data?.product?.image.map(item => {
+        //     })
 
+        // }
 
-    const [loading, setLoading] = useState(false)
-    const [allTax, setAllTax] = useState([])
-
-    const [imagesPreview, setImagesPreview] = useState([]);
-    //get Productdata
-    const getProduct = async () => {
-
-        axios
-            .get(`/api/product/getOne/${id}`, {
-                headers: {
-                    'Access-Control-Allow-Origin': '*',
-                    Authorization: `Bearer ${token}`,
-                },
-            })
-            .then((res) => {
-                // console.log(res.data?.product?.image)
-                // if (res.data?.product?.image) {
-                //     res.data?.product?.image.map(item => {
-                //     })
-
-                // }
-
-                // setImagesPreview(res.data?.product?.image)
-                setData((prev) => ({
-                    ...prev,
-                    ...res.data?.product,
-                    imageURL: res.data?.product?.image?.url,
-                }))
-            })
-            .catch((err) => { })
-    }
-    // console.log(imagesPreview)
-    useEffect(() => {
-        getProduct()
-    }, [])
-
-
-
-    useEffect(() => {
-        const getAllTax = async () => {
-            const res = await axios.get(`/api/tax/view_tax`, {
-                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
-            })
-            if (res.data) {
-                setAllTax(res.data)
-            }
-        }
-        getAllTax()
-
-    }, [token])
-
-    const handleChange = (e) => {
-
-        if (e.target.id === 'image') {
-            if (
-                e.target.files[0]?.type === 'image/jpeg' ||
-                e.target.files[0]?.type === 'image/png' ||
-                e.target.files[0]?.type === 'image/jpg'
-            ) {
-                if (imagesPreview.length > 3) {
-                    swal({
-                        title: 'Warning',
-                        text: 'maximum Four image Upload ',
-                        icon: 'error',
-                        button: 'Close',
-                        dangerMode: true,
-                    })
-                    return
-                }
-                // only for file preview------------------------------------
-                const files = Array.from(e.target.files);
-                files.forEach((file) => {
-                    const reader = new FileReader();
-
-                    reader.onload = () => {
-                        if (reader.readyState === 2) {
-                            setImagesPreview((old) => [...old, reader.result]);
-
-                        }
-                    };
-
-                    reader.readAsDataURL(file)
-                });
-                // -----------------------------------------------------------------------------
-
-
-                setData((prev) => ({
-                    ...prev,
-
-
-                    image: [...data.image, ...e.target.files],
-                }))
-                return
-            } else {
-                swal({
-                    title: 'Warning',
-                    text: 'Upload jpg, jpeg, png only.',
-                    icon: 'error',
-                    button: 'Close',
-                    dangerMode: true,
-                })
-                setData((prev) => ({
-                    ...prev,
-                    imageURL: '',
-                    image: '',
-                }))
-                e.target.value = null
-                return
-            }
-        }
-        setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
-    }
-
-
-    const TaxRatechange = async (e) => {
-        let taxDetails = {
-            name: e.target.value.slice(12, 16),
-            rate: Number(e.target.value.slice(4, 6)),
-
-            taxId: e.target.value.slice(24)
-
-        }
-
-        let trRate = taxDetails.rate / 100
-        let PriceWithT = Number(data.price);
-        PriceWithT += +((PriceWithT * trRate).toFixed());
-
-        //price_Level_2_With_Tax
-        let price_Level_2_With_Tax = Number(data.price_Level_2);
-        price_Level_2_With_Tax += +((price_Level_2_With_Tax * trRate).toFixed());
-        //
-        //price_Level_3_With_Tax
-        let price_Level_3_With_Tax = Number(data.price_Level_3);
-        price_Level_3_With_Tax += +((price_Level_3_With_Tax * trRate).toFixed());
+        // setImagesPreview(res.data?.product?.image)
         setData((prev) => ({
-            ...prev,
-            price_With_Tax: PriceWithT,
+          ...prev,
+          ...res.data?.product,
+          imageURL: res.data?.product?.image?.url,
+        }));
+      })
+      .catch((err) => {});
+  };
+  // console.log(imagesPreview)
 
-            price_Level_2_With_Tax: price_Level_2_With_Tax,
+  const getCategories = async () => {
+    try {
+      const response = await axios.get("/api/category/getCategories", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
-
-            price_Level_3_With_Tax: price_Level_3_With_Tax,
-            taxId: taxDetails.taxId
-
-        }))
+      if (response.status === 200) {
+        setCatgories(response?.data?.categories);
+      }
+    } catch (error) {
+      swal({
+        title: error,
+        text: " please login to access the resource ",
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
     }
+  };
+  useEffect(() => {
+    getProduct();
+    getCategories();
+  }, []);
 
-    // console.log(data.image.length)
-    const handleSubmit = () => {
-        if (
-            data.name.trim() === '' ||
+  useEffect(() => {
+    const getAllTax = async () => {
+      const res = await axios.get(`/api/tax/view_tax`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (res.data) {
+        setAllTax(res.data);
+      }
+    };
+    getAllTax();
+  }, [token]);
 
-            data.description.trim() === '' ||
-            data.price === '' ||
-            data.image === ''
-            // data.price_With_Tax === '' ||
-            // data.price_Level_2 === '' ||
-            // data.price_Level_2_With_Tax === '' ||
-            // data.price_Level_3 === '' ||
-            // data.price_Level_3_With_Tax === '' ||
-            // data.imageURL.trim() === ''
-        ) {
-            swal({
-                title: 'Warning',
-                text: 'Fill all mandatory fields',
-                icon: 'error',
-                button: 'Close',
-                dangerMode: true,
-            })
-            return
+  const handleChange = (e) => {
+    if (e.target.id === "image") {
+      if (
+        e.target.files[0]?.type === "image/jpeg" ||
+        e.target.files[0]?.type === "image/png" ||
+        e.target.files[0]?.type === "image/jpg"
+      ) {
+        if (imagesPreview.length > 3) {
+          swal({
+            title: "Warning",
+            text: "maximum Four image Upload ",
+            icon: "error",
+            button: "Close",
+            dangerMode: true,
+          });
+          return;
         }
-        setLoading(true)
-        const formData = new FormData()
-        formData.append('name', data.name)
+        // only for file preview------------------------------------
+        const files = Array.from(e.target.files);
+        files.forEach((file) => {
+          const reader = new FileReader();
 
-        formData.append('description', data.description)
-        formData.append('price', data.price)
-
-
-
-
-        data.image.forEach((Singleimage) => {
-            formData.append("image", Singleimage);
+          reader.onload = () => {
+            if (reader.readyState === 2) {
+              setImagesPreview((old) => [...old, reader.result]);
+            }
+          };
 
+          reader.readAsDataURL(file);
         });
+        // -----------------------------------------------------------------------------
 
+        setData((prev) => ({
+          ...prev,
 
-        axios
-            .put(`/api/product/update/${id}`, formData, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    'Content-Type': 'multipart/formdata',
-                    'Access-Control-Allow-Origin': '*',
-                },
-            })
-            .then((res) => {
-                swal({
-                    title: 'Updated',
-                    text: 'Product Updated successfully!',
-                    icon: 'success',
-                    button: 'ok',
-                })
-                setLoading(false)
-                navigate('/products', { replace: true })
-            })
-            .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,
-                })
-            })
+          image: [...data.image, ...e.target.files],
+        }));
+        return;
+      } else {
+        swal({
+          title: "Warning",
+          text: "Upload jpg, jpeg, png only.",
+          icon: "error",
+          button: "Close",
+          dangerMode: true,
+        });
+        setData((prev) => ({
+          ...prev,
+          imageURL: "",
+          image: "",
+        }));
+        e.target.value = null;
+        return;
+      }
     }
+    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  };
 
-    return (
-        <div className="container">
-            <div className="row">
-                <div className="col-12">
-                    <div
-                        className="
+  const TaxRatechange = async (e) => {
+    let taxDetails = {
+      name: e.target.value.slice(12, 16),
+      rate: Number(e.target.value.slice(4, 6)),
+
+      taxId: e.target.value.slice(24),
+    };
+
+    let trRate = taxDetails.rate / 100;
+    let PriceWithT = Number(data.price);
+    PriceWithT += +(PriceWithT * trRate).toFixed();
+
+    //price_Level_2_With_Tax
+    let price_Level_2_With_Tax = Number(data.price_Level_2);
+    price_Level_2_With_Tax += +(price_Level_2_With_Tax * trRate).toFixed();
+    //
+    //price_Level_3_With_Tax
+    let price_Level_3_With_Tax = Number(data.price_Level_3);
+    price_Level_3_With_Tax += +(price_Level_3_With_Tax * trRate).toFixed();
+    setData((prev) => ({
+      ...prev,
+      price_With_Tax: PriceWithT,
+
+      price_Level_2_With_Tax: price_Level_2_With_Tax,
+
+      price_Level_3_With_Tax: price_Level_3_With_Tax,
+      taxId: taxDetails.taxId,
+    }));
+  };
+
+  // console.log(data.image.length)
+  const handleSubmit = () => {
+    if (
+      data.name.trim() === "" ||
+      data.description.trim() === "" ||
+      data.price === "" ||
+      data.image === ""
+      // data.price_With_Tax === '' ||
+      // data.price_Level_2 === '' ||
+      // data.price_Level_2_With_Tax === '' ||
+      // data.price_Level_3 === '' ||
+      // data.price_Level_3_With_Tax === '' ||
+      // data.imageURL.trim() === ''
+    ) {
+      swal({
+        title: "Warning",
+        text: "Fill all mandatory fields",
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+      return;
+    }
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("name", data.name);
+
+    formData.append("description", data.description);
+    formData.append("price", data.price);
+    formData.append("category", data.category);
+
+    data.image.forEach((Singleimage) => {
+      formData.append("image", Singleimage);
+    });
+
+    axios
+      .put(`/api/product/update/${id}`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/formdata",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        swal({
+          title: "Updated",
+          text: "Product Updated successfully!",
+          icon: "success",
+          button: "ok",
+        });
+        setLoading(false);
+        navigate("/products", { replace: true });
+      })
+      .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,
+        });
+      });
+  };
+
+  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">
-                            Edit Product
-                        </div>
-                        <div style={{ display: 'flex', gap: '1rem' }}>
-                            <h4 className="mb-0"></h4>
-                        </div>
-
-                        <div className="page-title-right">
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                style={{
-                                    fontWeight: 'bold',
-                                    marginBottom: '1rem',
-                                    textTransform: 'capitalize',
-                                    marginRight: '5px',
-                                }}
-                                onClick={() => handleSubmit()}
-                                disabled={loading}
-                            >
-                                {loading ? 'Loading' : 'Edit'}
-                            </Button>
-                            <Link to="/products">
-                                <Button
-                                    variant="contained"
-                                    color="secondary"
-                                    style={{
-                                        fontWeight: 'bold',
-                                        marginBottom: '1rem',
-                                        textTransform: 'capitalize',
-                                    }}
-                                >
-                                    Back
-                                </Button>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Edit Product
             </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">
-                                    Product Name*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="name"
-                                    value={data.name}
-                                    maxLength={25}
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {data.name ? <><small className="charLeft mt-4 fst-italic">
-                                    {25 - data.name.length} characters left
-                                </small></> : <></>
-
-                                }                            </div>
-
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Description*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="description"
-                                    value={data.description}
-                                    maxLength="100"
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                {data.description ? <><small className="charLeft mt-4 fst-italic">
-                                    {100 - data.description.length} characters left
-                                </small></> : <></>
-                                }
-                            </div>
-
-
-                            <div className="mb-3">
-                                <label htmlFor="image" className="form-label">
-                                    Product Image*
-                                </label>
-                                <input
-                                    type="file"
-                                    className="form-control"
-                                    id="image"
-                                    accept="image/*"
-                                    multiple
-                                    onChange={(e) => handleChange(e)}
-                                />
-                                <p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
-                            </div>
-                            <div><strong className="fs-6 fst-italic">*Please Upload maximum four images</strong></div>
-
-
-                            {imagesPreview.length > 0 && <div id="createProductFormImage" className="w-25 d-flex">
-
-                                {imagesPreview.map((image, index) => (
-                                    <img className=" w-50 p-1 " key={index} src={image} alt="Product Preview" />
-                                ))}
-                            </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">
-
-
-                            <div className="mb-3 me-3">
-                                <label htmlFor="title" className="form-label">
-                                    Price (optional)
-                                </label>
-                                <input
-                                    type="number"
-                                    className="form-control"
-                                    id="price"
-                                    value={data.price}
-                                    onChange={(e) => handleChange(e)}
-
-                                />
-                            </div>
-
-
-
-
-
-
-
-
-                            {allTax.length > 0 && <div className=" mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Tax*
-                                </label>  <select className="   form-control" name="" id=""
-                                    onChange={(e) => TaxRatechange(e)}
-                                >
-                                    <option value="" disabled>-----</option>
-
-                                    {allTax.map((t, i) =>
-                                        <option key={i} value={`tax:${t.tax},name:${t.name}  ,taxId:${t._id}`}>{t.tax}% {t.name}</option>
-                                    )}
-                                </select>
-                            </div>
-                            }
-                        </div>
-                    </div>
-                </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
             </div>
+
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="primary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => handleSubmit()}
+                disabled={loading}
+              >
+                {loading ? "Loading" : "Edit"}
+              </Button>
+              <Link to="/products">
+                <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">
+                  Product Name*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="name"
+                  value={data.name}
+                  maxLength={25}
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.name ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {25 - data.name.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}{" "}
+              </div>
 
-export default EditProduct
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Description*
+                </label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="description"
+                  value={data.description}
+                  maxLength="100"
+                  onChange={(e) => handleChange(e)}
+                />
+                {data.description ? (
+                  <>
+                    <small className="charLeft mt-4 fst-italic">
+                      {100 - data.description.length} characters left
+                    </small>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
 
+              <div className="mb-3">
+                <label htmlFor="image" className="form-label">
+                  Product Image*
+                </label>
+                <input
+                  type="file"
+                  className="form-control"
+                  id="image"
+                  accept="image/*"
+                  multiple
+                  onChange={(e) => handleChange(e)}
+                />
+                <p className="pt-1 pl-2 text-secondary">
+                  Upload jpg, jpeg and png only*
+                </p>
+              </div>
+              <div>
+                <strong className="fs-6 fst-italic">
+                  *Please Upload maximum four images
+                </strong>
+              </div>
+
+              {imagesPreview.length > 0 && (
+                <div id="createProductFormImage" className="w-25 d-flex">
+                  {imagesPreview.map((image, index) => (
+                    <img
+                      className=" w-50 p-1 "
+                      key={index}
+                      src={image}
+                      alt="Product Preview"
+                    />
+                  ))}
+                </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">
+              <div className="mb-3 me-3">
+                <label htmlFor="title" className="form-label">
+                  Price (optional)
+                </label>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="price"
+                  value={data.price}
+                  onChange={(e) => handleChange(e)}
+                />
+              </div>
+              <div>
+                <label htmlFor="categorySelect">Select a Category:</label>
+                <select
+                  id="category"
+                  style={{ width: "100%" }}
+                  value={data.category}
+                  onChange={handleChange}
+                >
+                  <option value={""}>None</option>
+                  {categories.map((category, index) => (
+                    <option key={index} value={category.categoryName}>
+                      {category.categoryName}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {allTax.length > 0 && (
+                <div className=" mb-3">
+                  <label htmlFor="title" className="form-label">
+                    Tax*
+                  </label>{" "}
+                  <select
+                    className="   form-control"
+                    name=""
+                    id=""
+                    onChange={(e) => TaxRatechange(e)}
+                  >
+                    <option value="" disabled>
+                      -----
+                    </option>
+
+                    {allTax.map((t, i) => (
+                      <option
+                        key={i}
+                        value={`tax:${t.tax},name:${t.name}  ,taxId:${t._id}`}
+                      >
+                        {t.tax}% {t.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditProduct;
diff --git a/src/views/Products/ViewProduct.js b/src/views/Products/ViewProduct.js
index f7bc654..4ea6287 100644
--- a/src/views/Products/ViewProduct.js
+++ b/src/views/Products/ViewProduct.js
@@ -1,64 +1,60 @@
-
-
 import axios from "axios";
 import React, { useEffect, useState, useCallback, useMemo } from "react";
-import swal from 'sweetalert';
+import swal from "sweetalert";
 
 import { Link, useParams } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 
 function ViewProduct() {
-    const [product, setProduct] = useState([])
-    const { id } = useParams();
-    const token = isAutheticated();
+  const [product, setProduct] = useState([]);
+  const { id } = useParams();
+  const token = isAutheticated();
 
-    const getProduct = useCallback(async () => {
-        let res = await axios.get(
-            `/api/product/getOne/${id}`,
-            {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                },
-            }
-        );
-        console.log(res.data.product)
-        setProduct(res.data.product)
+  const getProduct = useCallback(async () => {
+    let res = await axios.get(`/api/product/getOne/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
 
+    setProduct(res.data.product);
+  }, [token]);
 
-    }, [token]);
+  useEffect(() => {
+    getProduct();
+  }, [getProduct]);
 
-    useEffect(() => {
-        getProduct();
-    }, [getProduct]);
+  //change time formate
+  function formatAMPM(date) {
+    var hours = new Date(date).getHours();
+    var minutes = new Date(date).getMinutes();
+    var ampm = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    var strTime = hours + ":" + minutes + " " + ampm;
+    return strTime;
+  }
 
-
-
-
-
-    //change time formate
-    function formatAMPM(date) {
-        var hours = new Date(date).getHours();
-        var minutes = new Date(date).getMinutes();
-        var ampm = hours >= 12 ? 'PM' : 'AM';
-        hours = hours % 12;
-        hours = hours ? hours : 12; // the hour '0' should be '12'
-        minutes = minutes < 10 ? '0' + minutes : minutes;
-        var strTime = hours + ':' + minutes + ' ' + ampm;
-        return strTime;
-    }
-
-
-    return (
-        <div className=" main-content">
-            <div className="  my-3 page-content">
-                <div className="container-fluid">
-                    {/* <!-- start page title --> */}
-                    <div className="row">
-                        <div className="col-12">
-                            <div className="page-title-box d-flex align-items-center justify-content-between">
-                                <h4 className="mb-3">Product</h4>
-                                <Link to="/product/add"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Product</button></Link>
-                                {/* <div className="page-title-right">
+  return (
+    <div className=" main-content">
+      <div className="  my-3 page-content">
+        <div className="container-fluid">
+          {/* <!-- start page title --> */}
+          <div className="row">
+            <div className="col-12">
+              <div className="page-title-box d-flex align-items-center justify-content-between">
+                <h4 className="mb-3">Product</h4>
+                <Link to="/product/add">
+                  <button
+                    type="button"
+                    className="btn btn-info float-end mb-3 ml-4"
+                  >
+                    {" "}
+                    + Add Product
+                  </button>
+                </Link>
+                {/* <div className="page-title-right">
                   <ol className="breadcrumb m-0">
                     <li className="breadcrumb-item">
                       <Link to="/dashboard">CMD-App</Link>
@@ -66,63 +62,99 @@ function ViewProduct() {
                     <li className="breadcrumb-item">CMD-Category</li>
                   </ol>
                 </div> */}
-                            </div>
-                        </div>
-                    </div>
-                    {/* <!-- end page title --> */}
-
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="card">
-                                <div className="card-body">
-                                    <div className="row ml-0 mr-0  mb-10">
-
-                                    </div>
-                                    <div className="table-responsive table-shoot">
-                                        <table className="table table-centered table-nowrap mb-0">
-                                            <thead className="thead-light">
-
-                                                <tr><th>Id</th> <td><h5>{product?._id}</h5></td></tr>
-                                                <tr><th>Name</th>                                                        <td>{product?.name}</td></tr>
-
-                                                {product.image && <tr><th>image</th><td>
-                                                    {product.image.map(i =>
-                                                        <img className="me-2" src={`${i?.url}`} width="70" alt="" />
-                                                    )}
-                                                </td></tr>}
-                                                <tr><th>Description</th><td>{product?.description}</td></tr>
-                                                <tr><th>Base Price</th><td>₹{product?.price}</td></tr>
-
-
-                                                {/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
-                                                <tr><th>Location</th><td>{product?.location}</td></tr> */}
-                                                <tr><th>Created On</th><td>
-                                                    {new Date(`${product?.createdAt}`).toDateString()}<span> , {`${formatAMPM(product?.createdAt)}`}</span>
-                                                </td></tr>
-                                                <tr><th>Updated At</th>
-                                                    <td>
-                                                        {new Date(`${product?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(product?.updatedAt)}`}</span>
-                                                    </td>
-                                                </tr>
-
-                                            </thead>
-                                            <tbody>
-
-                                            </tbody>
-                                        </table>
-                                    </div>
-
-
-                                    {/* <!-- end table-responsive --> */}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {/* <!-- container-fluid --> */}
+              </div>
             </div>
+          </div>
+          {/* <!-- end page title --> */}
+
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="card">
+                <div className="card-body">
+                  <div className="row ml-0 mr-0  mb-10"></div>
+                  <div className="table-responsive table-shoot">
+                    <table className="table table-centered table-nowrap mb-0">
+                      <thead className="thead-light">
+                        <tr>
+                          <th>Id</th>{" "}
+                          <td>
+                            <h5>{product?._id}</h5>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th>Name</th> <td>{product?.name}</td>
+                        </tr>
+
+                        {product.image && (
+                          <tr>
+                            <th>image</th>
+                            <td>
+                              {product.image.map((i) => (
+                                <img
+                                  className="me-2"
+                                  src={`${i?.url}`}
+                                  width="70"
+                                  alt=""
+                                />
+                              ))}
+                            </td>
+                          </tr>
+                        )}
+                        <tr>
+                          <th>Description</th>
+                          <td>{product?.description}</td>
+                        </tr>
+                        <tr>
+                          <th>Base Price</th>
+                          <td>₹{product?.price}</td>
+                        </tr>
+
+                        {/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
+                                                <tr><th>Location</th><td>{product?.location}</td></tr> */}
+                        <tr>
+                          <th>Created On</th>
+                          <td>
+                            {new Date(`${product?.createdAt}`).toDateString()}
+                            <span>
+                              {" "}
+                              , {`${formatAMPM(product?.createdAt)}`}
+                            </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th>Updated At</th>
+                          <td>
+                            {new Date(`${product?.updatedAt}`).toDateString()}
+                            <span>
+                              {" "}
+                              , {`${formatAMPM(product?.updatedAt)}`}
+                            </span>
+                          </td>
+                        </tr>
+
+                        <tr>
+                          <th>Category </th>
+                          <td>
+                            {product.category !== ""
+                              ? product.category
+                              : "Category not selected "}
+                          </td>
+                        </tr>
+                      </thead>
+                      <tbody></tbody>
+                    </table>
+                  </div>
+
+                  {/* <!-- end table-responsive --> */}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-    );
+        {/* <!-- container-fluid --> */}
+      </div>
+    </div>
+  );
 }
 
 export default ViewProduct;