From f7143bdc9db41991663e2d5228c1732f723c1781 Mon Sep 17 00:00:00 2001
From: pawan-dot <71133473+pawan-dot@users.noreply.github.com>
Date: Thu, 18 Apr 2024 17:48:54 +0530
Subject: [PATCH] change product and razorpay

---
 src/index.js                   |    2 +-
 src/views/Products/Products.js | 1340 ++++++++++++++++++++++----------
 src/views/orders/ViewOrders.js |    3 +-
 3 files changed, 921 insertions(+), 424 deletions(-)

diff --git a/src/index.js b/src/index.js
index 466639c..3e4516a 100644
--- a/src/index.js
+++ b/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 = {
diff --git a/src/views/Products/Products.js b/src/views/Products/Products.js
index f7f11c1..4cb6d68 100644
--- a/src/views/Products/Products.js
+++ b/src/views/Products/Products.js
@@ -1,57 +1,782 @@
-import React, { useState, useEffect } from "react";
+// import React, { useState, useEffect } from "react";
+// import { Link } from "react-router-dom";
+// import Button from "@material-ui/core/Button";
+// import { useNavigate } from "react-router-dom";
+// import axios from "axios";
+// import { isAutheticated } from "src/auth";
+// import swal from "sweetalert";
+// import {
+//   Box,
+//   FormControl,
+//   IconButton,
+//   InputLabel,
+//   MenuItem,
+//   Select,
+//   TextField,
+// } from "@mui/material";
+// import SearchIcon from "@mui/icons-material/Search";
+// import Fuse from "fuse.js";
+// import { Typography } from "@material-ui/core";
+// const Products = () => {
+//   const token = isAutheticated();
+//   const [query, setQuery] = useState("");
+//   const navigate = useNavigate();
+//   const [loading, setLoading] = useState(true);
+//   const [success, setSuccess] = useState(true);
+//   const [productsData, setProductsData] = useState([]);
+//   const [filterData, setFilterData] = useState([]);
+//   const [queryData, setQueryData] = useState([]);
+
+//   const [currentPage, setCurrentPage] = useState(1);
+//   const [itemPerPage, setItemPerPage] = useState(10);
+//   const [showData, setShowData] = useState(productsData);
+
+//   const handleShowEntries = (e) => {
+//     setCurrentPage(1);
+//     setItemPerPage(e.target.value);
+//   };
+
+//   const getProductsData = async () => {
+//     axios
+//       .get(`/api/product/getAll/`, {
+//         headers: {
+//           Authorization: `Bearer ${token}`,
+//         },
+//       })
+//       .then((res) => {
+//         setProductsData(res.data?.product);
+//         setLoading(false);
+//       })
+//       .catch((error) => {
+//         const msg = error?.response?.data?.message || "Something went wrong!";
+
+//         swal({
+//           title: error,
+//           text: msg,
+//           icon: "error",
+//           button: "Retry",
+//           dangerMode: true,
+//         });
+//         setLoading(false);
+//       });
+//   };
+
+//   useEffect(() => {
+//     getProductsData();
+//   }, [success]);
+
+//   useEffect(() => {
+//     const loadData = () => {
+//       const indexOfLastPost = currentPage * itemPerPage;
+//       const indexOfFirstPost = indexOfLastPost - itemPerPage;
+//       setShowData(productsData.slice(indexOfFirstPost, indexOfLastPost));
+//     };
+//     loadData();
+//   }, [currentPage, itemPerPage, productsData]);
+
+//   const handleDelete = (id) => {
+//     swal({
+//       title: "Are you sure?",
+//       icon: "error",
+//       buttons: {
+//         Yes: { text: "Yes", value: true },
+//         Cancel: { text: "Cancel", value: "cancel" },
+//       },
+//     }).then((value) => {
+//       if (value === true) {
+//         axios
+//           .delete(`/api/product/delete/${id}`, {
+//             headers: {
+//               "Access-Control-Allow-Origin": "*",
+//               Authorization: `Bearer ${token}`,
+//             },
+//           })
+//           .then((res) => {
+//             swal({
+//               title: "Deleted",
+//               text: "Product Deleted successfully!",
+//               icon: "success",
+//               button: "ok",
+//             });
+//             setSuccess((prev) => !prev);
+//           })
+//           .catch((err) => {
+//             const msg = err?.response?.data?.message || "Something went wrong!";
+
+//             swal({
+//               title: "Warning",
+//               text: msg,
+//               icon: "error",
+//               button: "Retry",
+//               dangerMode: true,
+//             });
+//           });
+//       }
+//     });
+//   };
+//   const [filterCategory, setFilterCategory] = useState("");
+
+//   const handleSearchClick = (query) => {
+//     const option = {
+//       isCaseSensitive: true,
+//       includeScore: false,
+//       shouldSort: true,
+//       includeMatches: false,
+//       findAllMatches: false,
+//       minMatchCharLength: 1,
+//       location: 0,
+//       threshold: 0.6,
+//       distance: 100,
+//       useExtendedSearch: true,
+//       ignoreLocation: false,
+//       ignoreFieldNorm: false,
+//       fieldNormWeight: 1,
+//       keys: ["name"],
+//     };
+
+//     const fuse = new Fuse(productsData, option);
+//     const result = fuse.search(query);
+
+//     const searchedResult = result.map((result) => result.item);
+//     console.log(searchedResult);
+//     setQueryData(searchedResult);
+//   };
+//   useEffect(() => {
+//     if (query !== "") {
+//       setFilterCategory("");
+//     }
+//     setTimeout(() => handleSearchClick(query), 100);
+//   }, [query]);
+//   const uniqueCategoryNames = [
+//     ...new Set(showData?.map((product) => product?.category?.categoryName)),
+//   ];
+//   useEffect(() => {
+//     setTimeout(() => {
+//       if (filterCategory !== "") {
+//         const filteredProducts = productsData.filter(
+//           (product) => product.category?.categoryName === filterCategory
+//         );
+
+//         setFilterData(filteredProducts);
+//       } else {
+//         // If no category is selected, show all products
+//         setShowData(productsData);
+//         // setFilterData(filteredProducts);
+//       }
+//     }, 100);
+//   }, [filterCategory, productsData]);
+//   return (
+//     <div className="main-content">
+//       <div className="page-content">
+//         <div className="container-fluid">
+//           <div className="row">
+//             <div className="col-12">
+//               <div
+//                 className="
+//                     page-title-box
+//                     d-flex
+//                     align-items-center
+//                     justify-content-between
+//                   "
+//               >
+//                 <div style={{ fontSize: "22px" }} className="fw-bold">
+//                   Products
+//                 </div>
+
+//                 <div className="page-title-right">
+//                   <Button
+//                     variant="contained"
+//                     color="primary"
+//                     style={{
+//                       fontWeight: "bold",
+//                       marginBottom: "1rem",
+//                       textTransform: "capitalize",
+//                     }}
+//                     onClick={() => {
+//                       navigate("/product/add", { replace: true });
+//                     }}
+//                   >
+//                     Add Product
+//                   </Button>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+
+//           <div className="row">
+//             <div className="col-lg-12">
+//               <div className="card">
+//                 <div className="card-body">
+//                   <div className="row ml-0 mr-0 mb-10">
+//                     <div className="col-lg-1">
+//                       <div className="dataTables_length">
+//                         <label className="w-100">
+//                           Show
+//                           <select
+//                             onChange={(e) => {
+//                               setItemPerPage(e.target.value);
+//                               setCurrentPage(1);
+//                             }}
+//                             className="form-control"
+//                             disabled={loading}
+//                           >
+//                             <option value="10">10</option>
+//                             <option value="25">25</option>
+//                             <option value="50">50</option>
+//                             <option value="100">100</option>
+//                           </select>
+//                           entries
+//                         </label>
+//                       </div>
+//                     </div>
+//                     <div className="col-lg-3">
+//                       <label>Product Name:</label>
+//                       <input
+//                         type="text"
+//                         placeholder="product name"
+//                         className="form-control"
+//                         ref={nameRef}
+//                         disabled={loading}
+//                       />
+//                     </div>
+//                     <div className="col-lg-3">
+//                       <label>Filter by Category:</label>
+//                       <select
+//                         className="form-control"
+//                         ref={categoryRef}
+//                         disabled={loading}
+//                       >
+//                         <option value="">All</option>
+//                         {categories?.map((e, i) => (
+//                           <option key={i} value={e._id}>
+//                             {e?.name}
+//                           </option>
+//                         ))}
+//                       </select>
+//                     </div>
+//                     <div className="col-lg-2">
+//                       <button
+//                         className="btn btn-primary ms-1 mt-4"
+//                         onClick={() => {
+//                           getProductsData();
+//                           setCurrentPage(1);
+//                         }}
+//                         disabled={loading}
+//                       >
+//                         Filter
+//                       </button>
+//                     </div>
+//                   </div>
+
+//                   <div className="table-responsive table-shoot mt-3">
+//                     <table
+//                       className="table table-centered table-nowrap"
+//                       style={{ border: "1px solid" }}
+//                     >
+//                       <thead
+//                         className="thead-info"
+//                         style={{ background: "rgb(140, 213, 213)" }}
+//                       >
+//                         <tr>
+//                           <th className="text-start">Image</th>
+//                           <th className="text-start">Product</th>
+//                           <th className="text-start">Category</th>
+
+//                           <th className="text-start">Price</th>
+//                           <th className="text-start">Added On</th>
+//                           <th className="text-start">Actions</th>
+//                         </tr>
+//                       </thead>
+//                       <tbody>
+//                         {!loading && showData.length === 0 && (
+//                           <tr className="text-center">
+//                             <td colSpan="6">
+//                               <h5>No Data Available</h5>
+//                             </td>
+//                           </tr>
+//                         )}
+//                         {loading ? (
+//                           <tr>
+//                             <td className="text-center" colSpan="6">
+//                               Loading...
+//                             </td>
+//                           </tr>
+//                         ) : query === "" && filterCategory == "" ? (
+//                           showData.map((product, i) => {
+//                             return (
+//                               <tr key={i}>
+//                                 <th>
+//                                   {product.image &&
+//                                     product.image.map((i, j) => (
+//                                       <img
+//                                         key={j}
+//                                         className="me-2"
+//                                         src={`${i?.url}`}
+//                                         width="40"
+//                                         alt=""
+//                                       />
+//                                     ))}
+//                                 </th>
+//                                 <td className="text-start">{product.name}</td>
+//                                 <td className="text-start">
+//                                   {product.category?.categoryName !== ""
+//                                     ? product.category?.categoryName
+//                                     : "Category Not selected "}
+//                                 </td>
+//                                 <th className="text-start">
+//                                   ₹
+//                                   {product?.total_amount
+//                                     ? product?.total_amount
+//                                     : product?.variants[0]?.price}
+//                                 </th>
+//                                 <td className="text-start">
+//                                   {new Date(product.createdAt).toLocaleString(
+//                                     "en-IN",
+//                                     {
+//                                       weekday: "short",
+//                                       month: "short",
+//                                       day: "numeric",
+//                                       year: "numeric",
+//                                       hour: "numeric",
+//                                       minute: "numeric",
+//                                       hour12: true,
+//                                     }
+//                                   )}
+//                                 </td>
+//                                 <td className="text-start">
+//                                   <Link to={`/product/view/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-primary btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mx-1
+//                                     mt-1
+//                                   "
+//                                     >
+//                                       View
+//                                     </button>
+//                                   </Link>
+//                                   <Link to={`/product/edit/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-info btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+//                                   "
+//                                     >
+//                                       Edit
+//                                     </button>
+//                                   </Link>
+//                                   <Link
+//                                     to={"#"}
+//                                     style={{
+//                                       marginRight: "1rem",
+//                                     }}
+//                                   >
+//                                     <button
+//                                       style={{ color: "white" }}
+//                                       type="button"
+//                                       className="
+//                                     btn btn-danger btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+
+//                                   "
+//                                       onClick={() => {
+//                                         handleDelete(product._id);
+//                                       }}
+//                                     >
+//                                       Delete
+//                                     </button>
+//                                   </Link>
+//                                 </td>
+//                               </tr>
+//                             );
+//                           })
+//                         ) : query !== "" ? (
+//                           queryData.map((product, i) => {
+//                             return (
+//                               <tr key={i}>
+//                                 <th>
+//                                   {product.image &&
+//                                     product.image.map((i, j) => (
+//                                       <img
+//                                         key={j}
+//                                         className="me-2"
+//                                         src={`${i?.url}`}
+//                                         width="40"
+//                                         alt=""
+//                                       />
+//                                     ))}
+//                                 </th>
+//                                 <td className="text-start">{product.name}</td>
+//                                 <td className="text-start">
+//                                   {product.category !== ""
+//                                     ? product.category?.categoryName
+//                                     : "Category Not selected "}
+//                                 </td>
+//                                 <th className="text-start">₹{product.price}</th>
+//                                 <td className="text-start">
+//                                   {new Date(product.createdAt).toLocaleString(
+//                                     "en-IN",
+//                                     {
+//                                       weekday: "short",
+//                                       month: "short",
+//                                       day: "numeric",
+//                                       year: "numeric",
+//                                       hour: "numeric",
+//                                       minute: "numeric",
+//                                       hour12: true,
+//                                     }
+//                                   )}
+//                                 </td>
+//                                 <td className="text-start">
+//                                   <Link to={`/product/view/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-primary btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mx-1
+//                                     mt-1
+//                                   "
+//                                     >
+//                                       View
+//                                     </button>
+//                                   </Link>
+//                                   <Link to={`/product/edit/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-info btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+//                                   "
+//                                     >
+//                                       Edit
+//                                     </button>
+//                                   </Link>
+//                                   <Link
+//                                     to={"#"}
+//                                     style={{
+//                                       marginRight: "1rem",
+//                                     }}
+//                                   >
+//                                     <button
+//                                       style={{ color: "white" }}
+//                                       type="button"
+//                                       className="
+//                                     btn btn-danger btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+
+//                                   "
+//                                       onClick={() => {
+//                                         handleDelete(product._id);
+//                                       }}
+//                                     >
+//                                       Delete
+//                                     </button>
+//                                   </Link>
+//                                 </td>
+//                               </tr>
+//                             );
+//                           })
+//                         ) : (
+//                           query == "" &&
+//                           filterData.map((product, i) => {
+//                             return (
+//                               <tr key={i}>
+//                                 <th>
+//                                   {product.image &&
+//                                     product.image.map((i, j) => (
+//                                       <img
+//                                         key={j}
+//                                         className="me-2"
+//                                         src={`${i?.url}`}
+//                                         width="40"
+//                                         alt=""
+//                                       />
+//                                     ))}
+//                                 </th>
+//                                 <td className="text-start">{product.name}</td>
+//                                 <td className="text-start">
+//                                   {product.category?.categoryName}
+//                                 </td>
+//                                 <th className="text-start">₹{product.price}</th>
+//                                 <td className="text-start">
+//                                   {new Date(product.createdAt).toLocaleString(
+//                                     "en-IN",
+//                                     {
+//                                       weekday: "short",
+//                                       month: "short",
+//                                       day: "numeric",
+//                                       year: "numeric",
+//                                       hour: "numeric",
+//                                       minute: "numeric",
+//                                       hour12: true,
+//                                     }
+//                                   )}
+//                                 </td>
+//                                 <td className="text-start">
+//                                   <Link to={`/product/view/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-primary btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mx-1
+//                                     mt-1
+//                                   "
+//                                     >
+//                                       View
+//                                     </button>
+//                                   </Link>
+//                                   <Link to={`/product/edit/${product._id}`}>
+//                                     <button
+//                                       style={{
+//                                         color: "white",
+//                                         marginRight: "1rem",
+//                                       }}
+//                                       type="button"
+//                                       className="
+//                                       btn btn-info btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+//                                   "
+//                                     >
+//                                       Edit
+//                                     </button>
+//                                   </Link>
+//                                   <Link
+//                                     to={"#"}
+//                                     style={{
+//                                       marginRight: "1rem",
+//                                     }}
+//                                   >
+//                                     <button
+//                                       style={{ color: "white" }}
+//                                       type="button"
+//                                       className="
+//                                     btn btn-danger btn-sm
+//                                     waves-effect waves-light
+//                                     btn-table
+//                                     mt-1
+//                                     mx-1
+
+//                                   "
+//                                       onClick={() => {
+//                                         handleDelete(product._id);
+//                                       }}
+//                                     >
+//                                       Delete
+//                                     </button>
+//                                   </Link>
+//                                 </td>
+//                               </tr>
+//                             );
+//                           })
+//                         )}
+//                       </tbody>
+//                     </table>
+//                   </div>
+
+//                   <div className="row mt-20">
+//                     <div className="col-sm-12 col-md-6 mb-20">
+//                       <div
+//                         className="dataTables_info"
+//                         id="datatable_info"
+//                         role="status"
+//                         aria-live="polite"
+//                       >
+//                         Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
+//                         {Math.min(
+//                           currentPage * itemPerPage,
+//                           productsData.length
+//                         )}{" "}
+//                         of {productsData.length} entries
+//                       </div>
+//                     </div>
+
+//                     <div className="col-sm-12 col-md-6">
+//                       <div className="d-flex">
+//                         <ul className="pagination ms-auto">
+//                           <li
+//                             className={
+//                               currentPage === 1
+//                                 ? "paginate_button page-item previous disabled"
+//                                 : "paginate_button page-item previous"
+//                             }
+//                           >
+//                             <span
+//                               className="page-link"
+//                               style={{ cursor: "pointer" }}
+//                               onClick={() => setCurrentPage((prev) => prev - 1)}
+//                             >
+//                               Previous
+//                             </span>
+//                           </li>
+
+//                           {!(currentPage - 1 < 1) && (
+//                             <li className="paginate_button page-item">
+//                               <span
+//                                 className="page-link"
+//                                 style={{ cursor: "pointer" }}
+//                                 onClick={(e) =>
+//                                   setCurrentPage((prev) => prev - 1)
+//                                 }
+//                               >
+//                                 {currentPage - 1}
+//                               </span>
+//                             </li>
+//                           )}
+
+//                           <li className="paginate_button page-item active">
+//                             <span
+//                               className="page-link"
+//                               style={{ cursor: "pointer" }}
+//                             >
+//                               {currentPage}
+//                             </span>
+//                           </li>
+
+//                           {!(
+//                             (currentPage + 1) * itemPerPage - itemPerPage >
+//                             productsData.length - 1
+//                           ) && (
+//                             <li className="paginate_button page-item ">
+//                               <span
+//                                 className="page-link"
+//                                 style={{ cursor: "pointer" }}
+//                                 onClick={() => {
+//                                   setCurrentPage((prev) => prev + 1);
+//                                 }}
+//                               >
+//                                 {currentPage + 1}
+//                               </span>
+//                             </li>
+//                           )}
+
+//                           <li
+//                             className={
+//                               !(
+//                                 (currentPage + 1) * itemPerPage - itemPerPage >
+//                                 productsData.length - 1
+//                               )
+//                                 ? "paginate_button page-item next"
+//                                 : "paginate_button page-item next disabled"
+//                             }
+//                           >
+//                             <span
+//                               className="page-link"
+//                               style={{ cursor: "pointer" }}
+//                               onClick={() => setCurrentPage((prev) => prev + 1)}
+//                             >
+//                               Next
+//                             </span>
+//                           </li>
+//                         </ul>
+//                       </div>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Products;
+
+import React, { useState, useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
+import axios from "axios";
 import Button from "@material-ui/core/Button";
 import { useNavigate } from "react-router-dom";
-import axios from "axios";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
-import {
-  Box,
-  FormControl,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-} from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import Fuse from "fuse.js";
-import { Typography } from "@material-ui/core";
 const Products = () => {
   const token = isAutheticated();
-  const [query, setQuery] = useState("");
   const navigate = useNavigate();
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(true);
   const [productsData, setProductsData] = useState([]);
-  const [filterData, setFilterData] = useState([]);
-  const [queryData, setQueryData] = useState([]);
+  const [categories, setCategories] = useState([]);
+
+  const nameRef = useRef();
+  const categoryRef = useRef();
 
   const [currentPage, setCurrentPage] = useState(1);
   const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(productsData);
-
-  const handleShowEntries = (e) => {
-    setCurrentPage(1);
-    setItemPerPage(e.target.value);
-  };
-
+  const [totalData, setTotalData] = useState(0);
+  // const {
+  //   edit,
+  //   add,
+  //   delete: deletepermission,
+  // } = checkPermission("Product Master");
   const getProductsData = async () => {
+    setLoading(true);
+
     axios
-      .get(`/api/product/getAll/`, {
+      .get(`/api/product/getAll/admin/`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
+        params: {
+          page: currentPage,
+          show: itemPerPage,
+          name: nameRef.current.value,
+          category: categoryRef.current.value,
+        },
       })
       .then((res) => {
+        console.log("res.data?.data", res.data?.product);
         setProductsData(res.data?.product);
+        setTotalData(res.data?.total_data);
         setLoading(false);
       })
-      .catch((error) => {
-        const msg = error?.response?.data?.message || "Something went wrong!";
-
+      .catch((err) => {
+        const msg = err?.response?.data?.message || "Something went wrong!";
         swal({
-          title: error,
+          title: err,
           text: msg,
           icon: "error",
           button: "Retry",
@@ -59,20 +784,30 @@ const Products = () => {
         });
         setLoading(false);
       });
+
+    setLoading(false);
+  };
+
+  const getCatagories = () => {
+    axios
+      .get(`/api/category/getCategories`, {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        setCategories(res?.data?.categories);
+      });
   };
 
   useEffect(() => {
-    getProductsData();
-  }, [success]);
+    getCatagories();
+  }, []);
 
   useEffect(() => {
-    const loadData = () => {
-      const indexOfLastPost = currentPage * itemPerPage;
-      const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(productsData.slice(indexOfFirstPost, indexOfLastPost));
-    };
-    loadData();
-  }, [currentPage, itemPerPage, productsData]);
+    getProductsData();
+  }, [success, itemPerPage, currentPage]);
 
   const handleDelete = (id) => {
     swal({
@@ -101,11 +836,9 @@ const Products = () => {
             setSuccess((prev) => !prev);
           })
           .catch((err) => {
-            const msg = err?.response?.data?.message || "Something went wrong!";
-
             swal({
               title: "Warning",
-              text: msg,
+              text: "Something went wrong!",
               icon: "error",
               button: "Retry",
               dangerMode: true,
@@ -114,57 +847,44 @@ const Products = () => {
       }
     });
   };
-  const [filterCategory, setFilterCategory] = useState("");
-
-  const handleSearchClick = (query) => {
-    const option = {
-      isCaseSensitive: true,
-      includeScore: false,
-      shouldSort: true,
-      includeMatches: false,
-      findAllMatches: false,
-      minMatchCharLength: 1,
-      location: 0,
-      threshold: 0.6,
-      distance: 100,
-      useExtendedSearch: true,
-      ignoreLocation: false,
-      ignoreFieldNorm: false,
-      fieldNormWeight: 1,
-      keys: ["name"],
-    };
-
-    const fuse = new Fuse(productsData, option);
-    const result = fuse.search(query);
-
-    const searchedResult = result.map((result) => result.item);
-    console.log(searchedResult);
-    setQueryData(searchedResult);
-  };
-  useEffect(() => {
-    if (query !== "") {
-      setFilterCategory("");
-    }
-    setTimeout(() => handleSearchClick(query), 100);
-  }, [query]);
-  const uniqueCategoryNames = [
-    ...new Set(showData?.map((product) => product?.category?.categoryName)),
-  ];
-  useEffect(() => {
-    setTimeout(() => {
-      if (filterCategory !== "") {
-        const filteredProducts = productsData.filter(
-          (product) => product.category?.categoryName === filterCategory
-        );
-
-        setFilterData(filteredProducts);
-      } else {
-        // If no category is selected, show all products
-        setShowData(productsData);
-        // setFilterData(filteredProducts);
+  const handleStatus = (id) => {
+    swal({
+      title: "Are you sure?",
+      icon: "warning",
+      buttons: {
+        Yes: { text: "Yes", value: true },
+        Cancel: { text: "Cancel", value: "cancel" },
+      },
+    }).then((value) => {
+      if (value === true) {
+        axios
+          .patch(`/api/product/admin/status/${id}`, {
+            headers: {
+              "Access-Control-Allow-Origin": "*",
+              Authorization: `Bearer ${token}`,
+            },
+          })
+          .then((res) => {
+            swal({
+              title: "Chenged",
+              text: "Product status changed successfully!",
+              icon: "success",
+              button: "ok",
+            });
+            setSuccess((prev) => !prev);
+          })
+          .catch((err) => {
+            swal({
+              title: "Warning",
+              text: "Something went wrong!",
+              icon: "error",
+              button: "Retry",
+              dangerMode: true,
+            });
+          });
       }
-    }, 100);
-  }, [filterCategory, productsData]);
+    });
+  };
   return (
     <div className="main-content">
       <div className="page-content">
@@ -182,7 +902,6 @@ const Products = () => {
                 <div style={{ fontSize: "22px" }} className="fw-bold">
                   Products
                 </div>
-
                 <div className="page-title-right">
                   <Button
                     variant="contained"
@@ -207,20 +926,18 @@ const Products = () => {
             <div className="col-lg-12">
               <div className="card">
                 <div className="card-body">
-                  <div className="row ml-0 mr-0 mb-10 ">
-                    <div className="col-sm-12 col-md-12">
+                  <div className="row ml-0 mr-0 mb-10">
+                    <div className="col-lg-1">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
                           <select
-                            style={{ width: "10%" }}
-                            name=""
-                            onChange={(e) => handleShowEntries(e)}
-                            className="
-                                select-w
-                                custom-select custom-select-sm
-                                form-control form-control-sm
-                              "
+                            onChange={(e) => {
+                              setItemPerPage(e.target.value);
+                              setCurrentPage(1);
+                            }}
+                            className="form-control"
+                            disabled={loading}
                           >
                             <option value="10">10</option>
                             <option value="25">25</option>
@@ -229,106 +946,45 @@ const Products = () => {
                           </select>
                           entries
                         </label>
-                        <div style={{ display: "flex" }}>
-                          <div
-                            style={{
-                              flex: "1",
-                              display: "flex",
-                              margin: "1rem 1rem 1rem 0rem",
-                            }}
-                          >
-                            <Typography
-                              style={{
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                fontWeight: "bold",
-                                marginRight: "1rem",
-                              }}
-                            >
-                              Search by product name :
-                            </Typography>
-                            <TextField
-                              style={{
-                                background: "#ECECEC",
-                                padding: "0.2rem 0.5rem",
-                                borderRadius: "8px",
-                                flex: "1",
-                                border: " 1px solid #EEF2F6",
-                                marginRight: "2rem",
-                              }}
-                              placeholder="Search here..."
-                              variant="standard"
-                              color="white"
-                              value={query}
-                              onChange={(e) => setQuery(e.target.value)}
-                              InputProps={{
-                                endAdornment: (
-                                  <IconButton
-                                    sx={{
-                                      background: "blue",
-                                      color: "white",
-                                      marginTop: "0.1rem",
-                                    }}
-                                    onClick={() => handleSearchClick(query)}
-                                  >
-                                    <SearchIcon fontSize="small" />
-                                  </IconButton>
-                                ),
-                                disableUnderline: true,
-                              }}
-                            />
-                          </div>
-                          <div
-                            style={{
-                              flex: "1",
-                              display: "flex",
-                              margin: "1rem 0rem",
-                            }}
-                          >
-                            <Typography
-                              style={{
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                fontWeight: "bold",
-                                marginRight: "1rem",
-                              }}
-                            >
-                              Filter by Category name :
-                            </Typography>
-
-                            <FormControl style={{ flex: "1" }}>
-                              <Select
-                                labelId="demo-simple-select-label"
-                                id="demo-simple-select"
-                                fullWidth
-                                value={filterCategory}
-                                onChange={(e) =>
-                                  setFilterCategory(e.target.value)
-                                }
-                              >
-                                {uniqueCategoryNames.map((categoryName, i) => (
-                                  <MenuItem
-                                    key={i}
-                                    style={{
-                                      width: "100%",
-                                      display: "flex",
-                                      justifyContent: "left",
-                                      textAlign: "left",
-                                      padding: "0.5rem",
-                                    }}
-                                    value={categoryName}
-                                  >
-                                    {categoryName}
-                                  </MenuItem>
-                                ))}
-                              </Select>
-                            </FormControl>
-                          </div>
-                        </div>
                       </div>
                     </div>
+                    <div className="col-lg-3">
+                      <label>Product Name:</label>
+                      <input
+                        type="text"
+                        placeholder="product name"
+                        className="form-control"
+                        ref={nameRef}
+                        disabled={loading}
+                      />
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Filter by Category:</label>
+                      <select
+                        className="form-control"
+                        ref={categoryRef}
+                        disabled={loading}
+                      >
+                        <option value="">All</option>
+                        {categories?.map((e, i) => (
+                          <option key={i} value={e._id}>
+                            {e?.categoryName}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="col-lg-2">
+                      <button
+                        className="btn btn-primary ms-1 mt-4"
+                        onClick={() => {
+                          getProductsData();
+                          setCurrentPage(1);
+                        }}
+                        disabled={loading}
+                      >
+                        {loading ? "Searching.." : "Filter"}
+                      </button>
+                    </div>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">
@@ -337,21 +993,22 @@ const Products = () => {
                       style={{ border: "1px solid" }}
                     >
                       <thead
-                        className="thead-info"
-                        style={{ background: "rgb(140, 213, 213)" }}
+                        className="thead-light"
+                        style={{ background: "#ecdddd" }}
                       >
                         <tr>
                           <th className="text-start">Image</th>
                           <th className="text-start">Product</th>
                           <th className="text-start">Category</th>
-
                           <th className="text-start">Price</th>
+                          <th className="text-start">Status</th>
+
                           <th className="text-start">Added On</th>
                           <th className="text-start">Actions</th>
                         </tr>
                       </thead>
                       <tbody>
-                        {!loading && showData.length === 0 && (
+                        {!loading && productsData?.length === 0 && (
                           <tr className="text-center">
                             <td colSpan="6">
                               <h5>No Data Available</h5>
@@ -364,21 +1021,30 @@ const Products = () => {
                               Loading...
                             </td>
                           </tr>
-                        ) : query === "" && filterCategory == "" ? (
-                          showData.map((product, i) => {
+                        ) : (
+                          productsData?.map((product, i) => {
                             return (
                               <tr key={i}>
                                 <th>
-                                  {product.image &&
-                                    product.image.map((i, j) => (
+                                  {product?.image &&
+                                  product?.image?.length !== 0 ? (
+                                    <>
                                       <img
-                                        key={j}
-                                        className="me-2"
-                                        src={`${i?.url}`}
-                                        width="40"
-                                        alt=""
+                                        src={product?.image[0]?.url}
+                                        width="50"
+                                        alt="preview"
                                       />
-                                    ))}
+                                    </>
+                                  ) : (
+                                    <div
+                                      className=""
+                                      style={{ fontSize: "13px" }}
+                                    >
+                                      <p className="m-0">No</p>
+                                      <p className="m-0">image</p>
+                                      <p className="m-0">uploaded!</p>
+                                    </div>
+                                  )}
                                 </th>
                                 <td className="text-start">{product.name}</td>
                                 <td className="text-start">
@@ -393,208 +1059,21 @@ const Products = () => {
                                     : product?.variants[0]?.price}
                                 </th>
                                 <td className="text-start">
-                                  {new Date(product.createdAt).toLocaleString(
-                                    "en-IN",
-                                    {
-                                      weekday: "short",
-                                      month: "short",
-                                      day: "numeric",
-                                      year: "numeric",
-                                      hour: "numeric",
-                                      minute: "numeric",
-                                      hour12: true,
-                                    }
-                                  )}
-                                </td>
-                                <td className="text-start">
-                                  <Link to={`/product/view/${product._id}`}>
-                                    <button
-                                      style={{
-                                        color: "white",
-                                        marginRight: "1rem",
-                                      }}
-                                      type="button"
-                                      className="
-                                      btn btn-primary btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mx-1
-                                    mt-1
-                                  "
-                                    >
-                                      View
-                                    </button>
-                                  </Link>
-                                  <Link to={`/product/edit/${product._id}`}>
-                                    <button
-                                      style={{
-                                        color: "white",
-                                        marginRight: "1rem",
-                                      }}
-                                      type="button"
-                                      className="
-                                      btn btn-info btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mt-1
-                                    mx-1
-                                  "
-                                    >
-                                      Edit
-                                    </button>
-                                  </Link>
-                                  <Link
-                                    to={"#"}
-                                    style={{
-                                      marginRight: "1rem",
+                                  <span className=""></span>
+                                  <button
+                                    type="button"
+                                    className={`badge  text-white ${
+                                      product?.product_Status === "Active"
+                                        ? "text-bg-success"
+                                        : "text-bg-danger"
+                                    }`}
+                                    onClick={() => {
+                                      handleStatus(product._id);
                                     }}
                                   >
-                                    <button
-                                      style={{ color: "white" }}
-                                      type="button"
-                                      className="
-                                    btn btn-danger btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mt-1
-                                    mx-1
-                                    
-                                  "
-                                      onClick={() => {
-                                        handleDelete(product._id);
-                                      }}
-                                    >
-                                      Delete
-                                    </button>
-                                  </Link>
+                                    {product?.product_Status}
+                                  </button>
                                 </td>
-                              </tr>
-                            );
-                          })
-                        ) : query !== "" ? (
-                          queryData.map((product, i) => {
-                            return (
-                              <tr key={i}>
-                                <th>
-                                  {product.image &&
-                                    product.image.map((i, j) => (
-                                      <img
-                                        key={j}
-                                        className="me-2"
-                                        src={`${i?.url}`}
-                                        width="40"
-                                        alt=""
-                                      />
-                                    ))}
-                                </th>
-                                <td className="text-start">{product.name}</td>
-                                <td className="text-start">
-                                  {product.category !== ""
-                                    ? product.category?.categoryName
-                                    : "Category Not selected "}
-                                </td>
-                                <th className="text-start">₹{product.price}</th>
-                                <td className="text-start">
-                                  {new Date(product.createdAt).toLocaleString(
-                                    "en-IN",
-                                    {
-                                      weekday: "short",
-                                      month: "short",
-                                      day: "numeric",
-                                      year: "numeric",
-                                      hour: "numeric",
-                                      minute: "numeric",
-                                      hour12: true,
-                                    }
-                                  )}
-                                </td>
-                                <td className="text-start">
-                                  <Link to={`/product/view/${product._id}`}>
-                                    <button
-                                      style={{
-                                        color: "white",
-                                        marginRight: "1rem",
-                                      }}
-                                      type="button"
-                                      className="
-                                      btn btn-primary btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mx-1
-                                    mt-1
-                                  "
-                                    >
-                                      View
-                                    </button>
-                                  </Link>
-                                  <Link to={`/product/edit/${product._id}`}>
-                                    <button
-                                      style={{
-                                        color: "white",
-                                        marginRight: "1rem",
-                                      }}
-                                      type="button"
-                                      className="
-                                      btn btn-info btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mt-1
-                                    mx-1
-                                  "
-                                    >
-                                      Edit
-                                    </button>
-                                  </Link>
-                                  <Link
-                                    to={"#"}
-                                    style={{
-                                      marginRight: "1rem",
-                                    }}
-                                  >
-                                    <button
-                                      style={{ color: "white" }}
-                                      type="button"
-                                      className="
-                                    btn btn-danger btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mt-1
-                                    mx-1
-                                    
-                                  "
-                                      onClick={() => {
-                                        handleDelete(product._id);
-                                      }}
-                                    >
-                                      Delete
-                                    </button>
-                                  </Link>
-                                </td>
-                              </tr>
-                            );
-                          })
-                        ) : (
-                          query == "" &&
-                          filterData.map((product, i) => {
-                            return (
-                              <tr key={i}>
-                                <th>
-                                  {product.image &&
-                                    product.image.map((i, j) => (
-                                      <img
-                                        key={j}
-                                        className="me-2"
-                                        src={`${i?.url}`}
-                                        width="40"
-                                        alt=""
-                                      />
-                                    ))}
-                                </th>
-                                <td className="text-start">{product.name}</td>
-                                <td className="text-start">
-                                  {product.category?.categoryName}
-                                </td>
-                                <th className="text-start">₹{product.price}</th>
                                 <td className="text-start">
                                   {new Date(product.createdAt).toLocaleString(
                                     "en-IN",
@@ -609,7 +1088,23 @@ const Products = () => {
                                     }
                                   )}
                                 </td>
+
                                 <td className="text-start">
+                                  {/* <Link to={`/products/variants/${product._id}`}>
+                                    <button
+                                      style={{ color: 'white', marginRight: '1rem' }}
+                                      type="button"
+                                      className="
+                                      btn btn-primary btn-sm
+                                    waves-effect waves-light
+                                    btn-table
+                                    mx-1
+                                    mt-1
+                                  "
+                                    >
+                                      Variants
+                                    </button>
+                                  </Link> */}
                                   <Link to={`/product/view/${product._id}`}>
                                     <button
                                       style={{
@@ -628,6 +1123,7 @@ const Products = () => {
                                       View
                                     </button>
                                   </Link>
+
                                   <Link to={`/product/edit/${product._id}`}>
                                     <button
                                       style={{
@@ -646,6 +1142,7 @@ const Products = () => {
                                       Edit
                                     </button>
                                   </Link>
+
                                   <Link
                                     to={"#"}
                                     style={{
@@ -688,11 +1185,8 @@ const Products = () => {
                         aria-live="polite"
                       >
                         Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
-                        {Math.min(
-                          currentPage * itemPerPage,
-                          productsData.length
-                        )}{" "}
-                        of {productsData.length} entries
+                        {Math.min(currentPage * itemPerPage, totalData)} of{" "}
+                        {totalData} entries
                       </div>
                     </div>
 
@@ -710,6 +1204,7 @@ const Products = () => {
                               className="page-link"
                               style={{ cursor: "pointer" }}
                               onClick={() => setCurrentPage((prev) => prev - 1)}
+                              disabled={loading}
                             >
                               Previous
                             </span>
@@ -723,6 +1218,7 @@ const Products = () => {
                                 onClick={(e) =>
                                   setCurrentPage((prev) => prev - 1)
                                 }
+                                disabled={loading}
                               >
                                 {currentPage - 1}
                               </span>
@@ -740,7 +1236,7 @@ const Products = () => {
 
                           {!(
                             (currentPage + 1) * itemPerPage - itemPerPage >
-                            productsData.length - 1
+                            totalData - 1
                           ) && (
                             <li className="paginate_button page-item ">
                               <span
@@ -749,6 +1245,7 @@ const Products = () => {
                                 onClick={() => {
                                   setCurrentPage((prev) => prev + 1);
                                 }}
+                                disabled={loading}
                               >
                                 {currentPage + 1}
                               </span>
@@ -759,7 +1256,7 @@ const Products = () => {
                             className={
                               !(
                                 (currentPage + 1) * itemPerPage - itemPerPage >
-                                productsData.length - 1
+                                totalData - 1
                               )
                                 ? "paginate_button page-item next"
                                 : "paginate_button page-item next disabled"
@@ -769,6 +1266,7 @@ const Products = () => {
                               className="page-link"
                               style={{ cursor: "pointer" }}
                               onClick={() => setCurrentPage((prev) => prev + 1)}
+                              disabled={loading}
                             >
                               Next
                             </span>
diff --git a/src/views/orders/ViewOrders.js b/src/views/orders/ViewOrders.js
index 81a6f8a..345ceca 100644
--- a/src/views/orders/ViewOrders.js
+++ b/src/views/orders/ViewOrders.js
@@ -523,8 +523,7 @@ function ViewOrders() {
 
                                           <p className="m-0 mt-3 ms-3">
                                             <stong> Subtotal:</stong> ₹
-                                            {productDetails?.quantity *
-                                              productDetails?.total_Amount}
+                                            {productDetails?.product_Subtotal}
                                           </p>
                                         </div>
                                         <div className="col-sm-6">