From e42377dcd8e400e80acdc818992326561b93faf9 Mon Sep 17 00:00:00 2001
From: jeevan-aj <ambrahamjeevan@gmail.com>
Date: Thu, 9 May 2024 20:18:32 +0530
Subject: [PATCH] sort filter done for vehicleVaiant page, AddProduct page ui
 updated, AddProduct toast updated

---
 client/src/App.jsx                            |   2 +
 client/src/components/Filter.jsx              |  24 +-
 client/src/components/Sort.jsx                |   6 +-
 .../admin/components/AddProductModal.jsx      |  25 +-
 .../pages/admin/components/Addproductcopy.jsx | 453 -----------
 client/src/pages/admin/pages/AllVehicles.jsx  |  77 +-
 .../src/pages/user/AllVehiclesofSameModel.jsx | 216 +++---
 .../user/AvailableVehiclesAfterSearch.jsx     |   2 +
 client/src/pages/user/Vehicles.jsx            | 332 ++++----
 .../Components/VendorAddVehilceModal.jsx      | 734 ++++++++++--------
 .../Components/VendorDeleteVehicleModal.jsx   |   4 +-
 .../pages/vendor/Components/VendorHeader.jsx  |  41 +
 .../vendor/Dashboard/VendorDashboard.jsx      |   2 +-
 .../vendor/data/vendorSidebarContents.jsx     |   2 +-
 .../pages/vendor/pages/VendorAllVehicles.jsx  |   7 +-
 .../adminDashboardSlice/StatusSlice.jsx       |  20 +-
 client/src/redux/user/sortfilterSlice.jsx     |  54 +-
 17 files changed, 872 insertions(+), 1129 deletions(-)
 delete mode 100644 client/src/pages/admin/components/Addproductcopy.jsx
 create mode 100644 client/src/pages/vendor/Components/VendorHeader.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 74bcf60..88b23a9 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -29,6 +29,7 @@ import CheckoutPage from "./pages/user/CheckoutPage";
 import Razorpay from "./pages/user/Razorpay";
 import AllVehiclesofSameModel from "./pages/user/AllVehiclesofSameModel";
 import AddProductModal from "./pages/admin/components/AddProductModal";
+import VendorAddProductModal from "./pages/vendor/Components/VendorAddVehilceModal";
 
 
 function App() {
@@ -76,6 +77,7 @@ function App() {
                 element={<VendorEditProductComponent />}
               />
             <Route    path="/vendorDashboard/vendorDeleteVehicleModal" element={<VendorDeleteVehicleModal/>} />
+            <Route path="vendorDashboard/vendorAddProduct" element={<VendorAddProductModal />} />
           </Route>
 
           {/* admin private routes */}
diff --git a/client/src/components/Filter.jsx b/client/src/components/Filter.jsx
index 2bc41d3..ab021e5 100644
--- a/client/src/components/Filter.jsx
+++ b/client/src/components/Filter.jsx
@@ -5,18 +5,19 @@ import { GoPlus } from "react-icons/go";
 
 import { Controller, useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
-// import { setFilter, setfilterData } from "../redux/user/sortfilterSlice";
 import { setFilteredData } from "../redux/user/sortfilterSlice";
 
 const Filter = () => {
   const { control, handleSubmit } = useForm();
-  const { userAllVehicles } = useSelector((state) => state.userListVehicles);
+  const { userAllVehicles, allVariants } = useSelector(
+    (state) => state.userListVehicles
+  );
+  const { variantMode } = useSelector((state) => state.sortfilterSlice);
 
   const dispatch = useDispatch();
   let transformedData = [];
 
   const handleData = async (data) => {
-    console.log(data)
     const typeMapping = {
       suv: "car_type",
       sedan: "car_type",
@@ -31,7 +32,7 @@ const Filter = () => {
       .filter(([key, value]) => value == true)
       .map(([key, value]) => ({ [key]: value, type: typeMapping[key] }));
 
-    if (transformedData && transformedData.length<=0 ) {
+    if (transformedData && transformedData.length <= 0 && !variantMode) {
       dispatch(setFilteredData(userAllVehicles));
     } else if (transformedData && transformedData.length > 0) {
       try {
@@ -46,6 +47,19 @@ const Filter = () => {
         if (res.ok) {
           const data = await res.json();
           const filtData = data.data.filteredVehicles;
+
+          //from filtData filtering vehicles that are available allVariants currently
+          //this is done when we have allVariants which means we are searching for available vehicles in Homepage and is redirected
+          if (allVariants) {
+            const filteredData = filtData.filter((data) =>
+              allVariants.some((variant) => variant._id === data._id)
+            );
+            dispatch(setFilteredData(filteredData));
+            return;
+          }
+
+          //this is in the other case when we are filtering from AllVehicles
+          //when we use filter from  Vehicles in Navbar
           dispatch(setFilteredData(filtData));
         }
       } catch (error) {
@@ -108,9 +122,7 @@ const Filter = () => {
                                   {...field}
                                   checked={field["value"] ?? false}
                                 />
-                                
                               )}
-                             
                             />
                           }
                           label="Suv"
diff --git a/client/src/components/Sort.jsx b/client/src/components/Sort.jsx
index 884b674..9612691 100644
--- a/client/src/components/Sort.jsx
+++ b/client/src/components/Sort.jsx
@@ -7,7 +7,7 @@ import { useEffect } from "react";
 import { setData, setFilteredData, setPriceHightoLow, setPriceLowtoHigh, setYearAscending, setYearDecending } from "../redux/user/sortfilterSlice";
 
 const Sort = () => {
-  const {userAllVehicles} = useSelector(state => state.userListVehicles)
+  const {userAllVehicles,allVariants} = useSelector(state => state.userListVehicles)
   const dispatch = useDispatch();
   const { handleSubmit, control  } = useForm();
 
@@ -31,7 +31,9 @@ const Sort = () => {
   };
 
   useEffect(()=> {
-    dispatch(setFilteredData(userAllVehicles))
+    if(!allVariants){
+      dispatch(setFilteredData(userAllVehicles))
+    }
   },[])
 
   return (
diff --git a/client/src/pages/admin/components/AddProductModal.jsx b/client/src/pages/admin/components/AddProductModal.jsx
index 6969a07..f395aef 100644
--- a/client/src/pages/admin/components/AddProductModal.jsx
+++ b/client/src/pages/admin/components/AddProductModal.jsx
@@ -20,6 +20,7 @@ import { IoMdClose } from "react-icons/io";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import {  setLoading, setadminAddVehicleSuccess, setadminCrudError } from "../../../redux/adminSlices/adminDashboardSlice/StatusSlice";
 
 export const fetchModelData = async (dispatch) => {
   try {
@@ -74,13 +75,14 @@ export const fetchModelData = async (dispatch) => {
 };
 
 const AddProductModal = () => {
-  const { register, handleSubmit, control } = useForm();
+  const { register, handleSubmit, control , reset } = useForm();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { isAddVehicleClicked } = useSelector((state) => state.addVehicle);
   const { modelData, companyData, locationData, districtData } = useSelector(
     (state) => state.modelDataSlice
   );
+  const {loading} = useSelector(state => state.statusSlice)
 
   useEffect(() => {
     fetchModelData(dispatch);
@@ -88,7 +90,7 @@ const AddProductModal = () => {
   }, []);
 
   const onSubmit = async (addData) => {
-    console.log(addData.Registeration_end_date.$d)
+   
     try {
       const img = [];
       for (let i = 0; i < addData.image.length; i++) {
@@ -117,16 +119,12 @@ const AddProductModal = () => {
       formData.append("location", addData.vehicleLocation);
       formData.append("district", addData.vehicleDistrict
       );
-    
-
-
-
-    
-    console.log(formData)
+   
 
       let tostID;
       if (formData) {
         tostID = toast.loading("saving...", { position: "bottom-center" });
+        dispatch(setLoading(true))
       }
       const res = await fetch("/api/admin/addProduct", {
         method: "POST",
@@ -136,14 +134,17 @@ const AddProductModal = () => {
       if (!res.ok) {
         toast.error("error");
         toast.dismiss(tostID);
+        dispatch(setLoading(false))
       }
       if (res.ok) {
-        toast.success("added");
-        toast.dismiss(tostID);
+        dispatch(setadminAddVehicleSuccess(true));
+        toast.dismiss(tostID)
+        dispatch(setLoading(false))
       }
 
-      // reset();
+      reset();
     } catch (error) {
+      dispatch(setadminCrudError(true))
       console.log(error);
     }
     dispatch(addVehicleClicked(false));
@@ -156,7 +157,7 @@ const AddProductModal = () => {
 
   return (
     <>
-      <Toaster />
+    {loading  ? <Toaster/> : null }
       {isAddVehicleClicked && (
         <div>
           <button onClick={handleClose} className="relative left-10 top-5">
diff --git a/client/src/pages/admin/components/Addproductcopy.jsx b/client/src/pages/admin/components/Addproductcopy.jsx
deleted file mode 100644
index fbb4425..0000000
--- a/client/src/pages/admin/components/Addproductcopy.jsx
+++ /dev/null
@@ -1,453 +0,0 @@
-import { Button } from "flowbite-react";
-import Modal from "../../../components/CustomModal";
-import { useDispatch, useSelector } from "react-redux";
-import {
-  addVehicleClicked,
-  // setEditData,
-} from "../../../redux/adminSlices/actions";
-import { useForm, Controller } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import toast, { Toaster } from "react-hot-toast";
-import { useEffect } from "react";
-import {
-  setModelData,
-  setCompanyData,
-  setLocationData,
-  setDistrictData,
-} from "../../../redux/adminSlices/adminDashboardSlice/CarModelDataSlice";
-import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
-import { setWholeData } from "../../../redux/user/selectRideSlice";
-
-export const fetchModelData = async (dispatch) => {
-  try {
-    const res = await fetch("/api/admin/getVehicleModels", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    if (res.ok) {
-      const data = await res.json();
-
-      //getting models from data
-      const models = data
-        .filter((cur) => cur.type === "car")
-        .map((cur) => cur.model);
-      dispatch(setModelData(models));
-
-      //getting comapnys from data
-      const brand = data
-        .filter((cur) => cur.type === "car")
-        .map((cur) => cur.brand);
-      const uniqueBrand = brand.filter((cur, index) => {
-        return brand.indexOf(cur) === index;
-      });
-      dispatch(setCompanyData(uniqueBrand));
-
-      //getting locations from data
-      const locations = data
-        .filter((cur) => cur.type === "location")
-        .map((cur) => cur.location);
-      dispatch(setLocationData(locations));
-
-      //getting districts from data
-      const districts = data
-        .filter((cur) => cur.type === "location")
-        .map((cur) => cur.district);
-      const uniqueDistricts = districts.filter((cur, idx) => {
-        return districts.indexOf(cur) === idx;
-      });
-      dispatch(setDistrictData(uniqueDistricts));
-
-      //setting whole data
-      const wholeData = data.filter((cur) => cur.type === "location");
-      dispatch(setWholeData(wholeData));
-    } else {
-      return "no data found";
-    }
-  } catch (error) {
-    console.log(error);
-  }
-};
-
-const AddProductModalcopy = () => {
-  const { register, handleSubmit, reset, control } = useForm();
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const { isAddVehicleClicked } = useSelector((state) => state.addVehicle);
-  const { modelData, companyData, locationData, districtData } = useSelector(
-    (state) => state.modelDataSlice
-  );
-
-  useEffect(() => {
-    fetchModelData(dispatch);
-    // dispatch(addVehicleClicked(true))
-  }, []);
-
-  const onSubmit = async (data) => {
-    try {
-      const formData = new FormData();
-
-      formData.append("registeration_number", data.registeration_number);
-      formData.append("company", data.company);
-      formData.append("image", data.image[0]);
-      formData.append("name", data.name);
-      formData.append("model", data.model);
-      formData.append("title", data.title);
-      formData.append("base_package", data.base_package);
-      formData.append("price", data.price);
-      formData.append("description", data.description);
-      formData.append("year_made", data.year_made);
-      formData.append("fuel_type", data.fuel_type);
-      formData.append("seat", data.seat);
-      formData.append("transmition_type", data.transmition_type);
-      formData.append("insurance_end_date", data.insurance_end_date);
-      formData.append("registeration_end_date", data.registeration_end_date);
-      formData.append("polution_end_date", data.polution_end_date);
-      formData.append("car_type", data.car_type);
-      formData.append("location", data.location);
-      formData.append("district", data.districts);
-
-      let tostID;
-      if (formData) {
-        tostID = toast.loading("saving...", { position: "bottom-center" });
-      }
-      const res = await fetch("/api/admin/addProduct", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (!res.ok) {
-        toast.error("error");
-        toast.dismiss(tostID);
-      }
-      if (res.ok) {
-        toast.success("added");
-        toast.dismiss(tostID);
-      }
-
-      reset();
-    } catch (error) {
-      console.log(error);
-    }
-    dispatch(addVehicleClicked(false));
-    navigate("/adminDashboard/allProduct");
-  };
-
-  return (
-    <>
-      <Toaster />
-      {isAddVehicleClicked && (
-        <Modal
-          isOpen={isAddVehicleClicked}
-          onClose={() => dispatch(addVehicleClicked(false))}
-          className="bg-white mt-10 rounded-md max-w-[600px] min-w-[360px]"
-        >
-          <div className="px-2">
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="">
-                <div>
-                  <input
-                    className="p-2"
-                    type="file"
-                    multiple
-                    id="image"
-                    {...register("image")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="registeration_number"
-                    id="registeration_number"
-                    {...register("registeration_number")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="company">company</label>
-                  <Controller
-                    name="company"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="company" className="p-2">
-                        {companyData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <FormControl fullWidth>
-                    <InputLabel htmlFor="districts">districts</InputLabel>
-                    <Controller
-                      name="districts"
-                      control={control}
-                      render={({ field }) => (
-                        <Select {...field} id="districts" className="p-2">
-                          {districtData.map((cur, idx) => (
-                            <MenuItem value={cur} key={idx}>
-                              {cur}
-                            </MenuItem>
-                          ))}
-                        </Select>
-                      )}
-                    />
-                  </FormControl>
-                </div>
-
-                <div>
-                  <label htmlFor="location">location</label>
-                  <Controller
-                    name="location"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="location" className="p-2">
-                        {locationData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="name"
-                    id="name"
-                    {...register("name")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="model">Model</label>
-                  <Controller
-                    name="model"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="model" className="p-2">
-                        {modelData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="Title"
-                    id="title"
-                    {...register("title")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="Base package"
-                    id="base_package"
-                    {...register("base_package")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Number"
-                    placeholder="Price"
-                    id="price"
-                    {...register("price")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Number"
-                    placeholder="Year Made"
-                    id="year_made"
-                    {...register("year_made")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="fuel_type">Fuel type</label>
-                  <Controller
-                    name="fuel_type"
-                    control={control}
-                    defaultValue={"petrol"}
-                    render={({ field }) => (
-                      <select {...field} id="fuel_type" className="p-2">
-                        <option value="petrol">Petrol</option>
-                        <option value="diesel">Disel</option>
-                        <option value="electric">Electric</option>
-                        <option value="hybrid">Hybrid</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="seats">Number of seats</label>
-                  <Controller
-                    name="seat"
-                    control={control}
-                    defaultValue={"5"}
-                    render={({ field }) => (
-                      <select {...field} id="seats" className="p-2">
-                        <option value="5">5</option>
-                        <option value="7">7</option>
-                        <option value="8">8</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="transmittion_type">Transmission Type</label>
-                  <Controller
-                    name="transmition_type"
-                    control={control}
-                    defaultValue={"manual"}
-                    render={({ field }) => (
-                      <select {...field} id="transmittion_type" className="p-2">
-                        <option value="automatic">automatic</option>
-                        <option value="manual">manual</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="car_type">Select car type:</label>
-                  <Controller
-                    name="car_type"
-                    control={control}
-                    defaultValue="sedan"
-                    render={({ field }) => (
-                      <select {...field} id="car_type" className="p-2">
-                        <option value="sedan">sedan</option>
-                        <option value="suv">suv </option>
-                        <option value="hatchback">hatchback </option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <textarea
-                    className="mx-auto px-5 py-3 rounded-md"
-                    placeholder="Description"
-                    id="description"
-                    {...register("description")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="insurance_end_date">Insurance end date</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Insurance End date"
-                    id="insurance_end_date"
-                    {...register("insurance_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="registeration_end_date">
-                    Registeration end date
-                  </label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Registeration End date"
-                    id="registeration_end_date"
-                    {...register("registeration_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="polution_end_date">Polution end date</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Poltion End date"
-                    id="polution_end_date"
-                    {...register("polution_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="insurance_image">Insurance Image</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    placeholder="Insurance Image"
-                    id="insurance_image"
-                    {...register("insurance_image")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="rc_book_image">Rc book Image</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    placeholder="Rc book Image"
-                    id="rc_book_image"
-                    {...register("rc_book_image")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="polution_image">
-                    Polution certificate image
-                  </label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    id="polution_image"
-                    {...register("polution_image")}
-                  />
-                </div>
-              </div>
-              <div className="flex justify-end w-full gap-2">
-                <Button
-                  onClick={() => dispatch(addVehicleClicked(false))}
-                  className="bg-red-500 text-white px-3 py-1"
-                >
-                  Cancel
-                </Button>
-                <button
-                  type="submit"
-                  className="bg-blue-700 rounded-md text-white px-3 py-1"
-                >
-                  Submit
-                </button>
-              </div>
-            </form>
-          </div>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-export default AddProductModalcopy;
diff --git a/client/src/pages/admin/pages/AllVehicles.jsx b/client/src/pages/admin/pages/AllVehicles.jsx
index 8c13e93..93da34b 100644
--- a/client/src/pages/admin/pages/AllVehicles.jsx
+++ b/client/src/pages/admin/pages/AllVehicles.jsx
@@ -4,19 +4,16 @@ import { useEffect, useState } from "react";
 import { setEditData } from "../../../redux/adminSlices/actions";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import ModeEditOutlineIcon from "@mui/icons-material/ModeEditOutline";
-import {
-  Button,
-} from "@mui/material";
+import { Button } from "@mui/material";
 import { Header } from "../components";
-import toast, { Toaster} from "react-hot-toast";
+import toast, { Toaster } from "react-hot-toast";
 import { DataGrid } from "@mui/x-data-grid";
 
 import Box from "@mui/material/Box";
 import { showVehicles } from "../../../redux/user/listAllVehicleSlice";
-import { setadminEditVehicleSuccess } from "../../../redux/adminSlices/adminDashboardSlice/StatusSlice";
-
-
-
+import {
+  clearAdminVehicleToast,
+} from "../../../redux/adminSlices/adminDashboardSlice/StatusSlice";
 
 function AllVehicles() {
   const navigate = useNavigate();
@@ -25,8 +22,8 @@ function AllVehicles() {
   const { isAddVehicleClicked } = useSelector((state) => state.addVehicle);
 
   const [allVehicles, setVehicles] = useState([]);
- const {adminEditVehicleSuccess} = useSelector(state => state.statusSlice)
-  
+  const { adminEditVehicleSuccess, adminAddVehicleSuccess, adminCrudError } =
+    useSelector((state) => state.statusSlice);
 
   //show vehicles
   useEffect(() => {
@@ -38,7 +35,7 @@ function AllVehicles() {
         if (res.ok) {
           const data = await res.json();
           setVehicles(data);
-          dispatch(showVehicles(data))
+          dispatch(showVehicles(data));
         }
       } catch (error) {
         console.log(error);
@@ -90,7 +87,6 @@ function AllVehicles() {
             objectFit: "cover",
           }}
           alt="vehicle"
-          
         />
       ),
     },
@@ -106,7 +102,6 @@ function AllVehicles() {
       headerName: "Edit",
       width: 100,
       renderCell: (params) => (
-       
         <Button onClick={() => handleEditVehicle(params.row.id)}>
           <ModeEditOutlineIcon />
         </Button>
@@ -122,11 +117,12 @@ function AllVehicles() {
         </Button>
       ),
     },
-    
   ];
 
   const rows = allVehicles
-    .filter((vehicle) => vehicle.isDeleted === "false")
+    .filter(
+      (vehicle) => vehicle.isDeleted === "false" && vehicle.isAdminApproved
+    )
     .map((vehicle) => ({
       id: vehicle._id,
       image: vehicle.image[0],
@@ -135,24 +131,37 @@ function AllVehicles() {
       name: vehicle.name,
     }));
 
-//edit success
-    useEffect(()=> {
-      if(adminEditVehicleSuccess){
-        toast.success('success')
-        dispatch(setadminEditVehicleSuccess(false))
-      }
-    },[adminEditVehicleSuccess])
+  //edit success
+  useEffect(() => {
+    if (adminEditVehicleSuccess) {
+      toast.success("success");
+    }
+    else if (adminAddVehicleSuccess) {
+      toast.success("success");
+    }
+    else if(adminCrudError){
+     toast.error("error")
+    }
+  }, [adminEditVehicleSuccess, adminAddVehicleSuccess,adminCrudError,dispatch]);
+
+  useEffect(() => {
+    const clearNotificationsTimeout = setTimeout(() => {
+      dispatch(clearAdminVehicleToast());
+    }, 3000);
+  
+    return () => clearTimeout(clearNotificationsTimeout);
+  }, [adminEditVehicleSuccess, adminAddVehicleSuccess, adminCrudError, dispatch]);
 
- 
   return (
     <>
-    
+
+      {adminEditVehicleSuccess ? <Toaster /> : ''} 
+        {adminAddVehicleSuccess ? <Toaster /> : ''}
+        {adminCrudError ? <Toaster/> : ""}     
+        
+        
       <div className="max-w-[1000px]  d-flex   justify-end text-start items-end p-10">
         <Header title="AllVehicles" />
-        <Toaster/>
-        {adminEditVehicleSuccess ? <Toaster /> : ''}
-       
-
         <Box sx={{ height: "100%", width: "100%" }}>
           <DataGrid
             rows={rows}
@@ -167,16 +176,12 @@ function AllVehicles() {
             pageSizeOptions={[5]}
             checkboxSelection
             disableRowSelectionOnClick
-            
             sx={{
-              '.MuiDataGrid-columnSeparator': {
-                display: 'none',
-                
+              ".MuiDataGrid-columnSeparator": {
+                display: "none",
               },
-              '&.MuiDataGrid-root': {
-                border: 'none',
-               
-
+              "&.MuiDataGrid-root": {
+                border: "none",
               },
             }}
           />
diff --git a/client/src/pages/user/AllVehiclesofSameModel.jsx b/client/src/pages/user/AllVehiclesofSameModel.jsx
index fe85ae8..02315c1 100644
--- a/client/src/pages/user/AllVehiclesofSameModel.jsx
+++ b/client/src/pages/user/AllVehiclesofSameModel.jsx
@@ -1,4 +1,3 @@
-
 import { useDispatch, useSelector } from "react-redux";
 import { FaCarSide } from "react-icons/fa";
 import { BsFillFuelPumpFill } from "react-icons/bs";
@@ -6,113 +5,128 @@ import { MdAirlineSeatReclineNormal } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
 import { onVehicleDetail } from "./Vehicles";
 import CarNotFound from "./CarNotFound";
+import Filter from "../../components/Filter";
+import Sort from "../../components/Sort";
+import Header from "../../components/Header";
+import {  setVariantModeOrNot } from "../../redux/user/sortfilterSlice";
 
 const AllVehiclesofSameModel = () => {
-  const {allVariants} = useSelector(state => state.userListVehicles)
-  const dispatch = useDispatch()
-  const navigate = useNavigate()
-  return (
-    <div>
-      {allVariants && allVariants.length>0 && <div className="text-center flex flex-col  mt-10 justify-center items-center sm:max-w-[500px] mx-auto">
-      <h2 className="text-[18px] lg:text-[24px]">Choose From Options</h2>
-      <p className="text-center text-[8px] px-6  lg:text-[12px]  lg:w-[550px]">
-        Choose from our modern variety vehicles colllection . Feel like home
-        just like your own car Our clients have experienced our service and
-        results, and they are eager to share their positive experiences with
-        you.
-      </p>
-    </div>}
-    
-  
-    <div className=" mx-auto flex sm:flex-row  w-full  lg:grid lg:max-w-[1000px]  lg:grid-cols-3 justify-center items-center gap-5 flex-wrap mt-10">
-      {allVariants && allVariants.map(
-        (cur, idx) =>
-          cur.isDeleted === "false" && (
-            <div
-              className="bg-white box-shadow rounded-lg  drop-shadow "
-              key={idx}
-            >
-              <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
-                <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
-                  <img
-                    src={`${cur.image[0]}`}
-                    alt={`cur.name`}
-                    className=" w-full object-contain object-center lg:h-full lg:w-full"
-                  />
-                </div>
-                <div className="flex justify-between items-start">
-                  <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
-                    <span></span>
-                    {cur.name}
-                  </h2>
+  const { allVariants } = useSelector((state) => state.userListVehicles);
+  const {filterdData} = useSelector((state) => state.sortfilterSlice)
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
-                  <div className="text-[14px]  flex flex-col items-end">
-                    <p className="font-semibold">{cur.price}</p>
-                    <div className="text-[6px] relative bottom-[3px]">
-                      Per Day
-                    </div>
-                  </div>
-                </div>
+  //i made this allVariant state to show is filter currently used by search from home page or by AllListed Vehicles in Navbar
+  if(allVariants)dispatch(setVariantModeOrNot(true))
+ 
+  return (
+    <>
+    <Header/>
+      <div className=" lg:grid lg:grid-cols-12 gap-x-10 mx-28 justify-between">
+        <div className=" mt-10 col-span-3   relative box-shadow-xl drop-shadow-xl ">
+          <Filter />
+        </div>
+        <div className="col-span-9">
+          <div className="mt-10  bg-blend-overlay  backdrop-blur-xl opacity-1 box-shadow-xl  top-5 z-40 drop-shadow-lg ">
+            <Sort />
+          </div>
 
-                <div className="my-2 font-mono">
-                  <div className="flex justify-between items-center mb-5 mt-5">
-                    <h3 className="text-[12px] flex justify-between items-center gap-1 ">
-                      <span>
-                        <FaCarSide />
-                      </span>
-                      {cur.company}
-                    </h3>
-                    <p className=" text-end text-[12px] flex justify-between items-center gap-1">
-                      <span>
-                        <MdAirlineSeatReclineNormal />
-                      </span>
-                      {cur.seats}
-                    </p>
-                  </div>
-                  <div className="flex justify-between items-center text-[12px] mb-5 ">
-                    <p className="flex items-center justify-center gap-1">
-                      <FaCarSide />
-                      {cur.car_type}
-                    </p>
-                    <p className="flex justify-between items-center gap-1">
-                      <span>
-                        <BsFillFuelPumpFill />
-                      </span>
-                      {cur.fuel_type}
-                    </p>
-                  </div>
+          <div
+            className=" mx-auto flex sm:flex-row  w-full  lg:grid lg:max-w-[1000px]  lg:grid-cols-3 justify-center items-center gap-5 
+    flex-wrap mt-10"
+          >
+            {filterdData && 
+              filterdData.map(
+                (cur, idx) =>
+                  cur.isDeleted === "false" && (
+                    <div
+                      className="bg-white box-shadow rounded-lg  drop-shadow "
+                      key={idx}
+                    >
+                      <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
+                        <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
+                          <img
+                            src={`${cur.image[0]}`}
+                            alt={`cur.name`}
+                            className=" w-full object-contain object-center lg:h-full lg:w-full"
+                          />
+                        </div>
+                        <div className="flex justify-between items-start">
+                          <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
+                            <span></span>
+                            {cur.name}
+                          </h2>
 
-                  <hr />
+                          <div className="text-[14px]  flex flex-col items-end">
+                            <p className="font-semibold">{cur.price}</p>
+                            <div className="text-[6px] relative bottom-[3px]">
+                              Per Day
+                            </div>
+                          </div>
+                        </div>
 
-                  <div className="flex justify-center items-center gap-x-5  my-3">
-                   
-                      <button
-                        className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
-                        onClick={() => onVehicleDetail(cur._id,dispatch,navigate)}
-                      >
-                        <div className="text-[12px] ">Book Ride</div>
-                      </button>
-              
+                        <div className="my-2 font-mono">
+                          <div className="flex justify-between items-center mb-5 mt-5">
+                            <h3 className="text-[12px] flex justify-between items-center gap-1 ">
+                              <span>
+                                <FaCarSide />
+                              </span>
+                              {cur.company}
+                            </h3>
+                            <p className=" text-end text-[12px] flex justify-between items-center gap-1">
+                              <span>
+                                <MdAirlineSeatReclineNormal />
+                              </span>
+                              {cur.seats}
+                            </p>
+                          </div>
+                          <div className="flex justify-between items-center text-[12px] mb-5 ">
+                            <p className="flex items-center justify-center gap-1">
+                              <FaCarSide />
+                              {cur.car_type}
+                            </p>
+                            <p className="flex justify-between items-center gap-1">
+                              <span>
+                                <BsFillFuelPumpFill />
+                              </span>
+                              {cur.fuel_type}
+                            </p>
+                          </div>
 
-                    
-                      <button
-                        className="bg-black px-4 py-2 w-[100px] rounded-sm"
-                        onClick={() => onVehicleDetail(cur._id,dispatch,navigate)}
-                      >
-                        <div className="text-[12px] text-white">Details</div>
-                      </button>
-                   
-                  </div>
-                </div>
-              </div>
-            </div>
-          )
-      )}
-    </div>{!allVariants || allVariants.length==0 && <CarNotFound/>}
+                          <hr />
 
+                          <div className="flex justify-center items-center gap-x-5  my-3">
+                            <button
+                              className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
+                              onClick={() =>
+                                onVehicleDetail(cur._id, dispatch, navigate)
+                              }
+                            >
+                              <div className="text-[12px] ">Book Ride</div>
+                            </button>
 
-  </div>
-  )
-}
+                            <button
+                              className="bg-black px-4 py-2 w-[100px] rounded-sm"
+                              onClick={() =>
+                                onVehicleDetail(cur._id, dispatch, navigate)
+                              }
+                            >
+                              <div className="text-[12px] text-white">
+                                Details
+                              </div>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )
+              )}
+          </div>
+          {!allVariants || (allVariants.length == 0 && <CarNotFound />)}
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default AllVehiclesofSameModel
\ No newline at end of file
+export default AllVehiclesofSameModel;
diff --git a/client/src/pages/user/AvailableVehiclesAfterSearch.jsx b/client/src/pages/user/AvailableVehiclesAfterSearch.jsx
index cababc8..50eaea3 100644
--- a/client/src/pages/user/AvailableVehiclesAfterSearch.jsx
+++ b/client/src/pages/user/AvailableVehiclesAfterSearch.jsx
@@ -6,6 +6,7 @@ import CarNotFound from "./CarNotFound";
 import { useNavigate } from "react-router-dom";
 
 import { setVariants } from "../../redux/user/listAllVehicleSlice";
+import { setFilteredData } from "../../redux/user/sortfilterSlice";
 
 const AvailableVehiclesAfterSearch = () => {
   const { availableCars } = useSelector((state) => state.selectRideSlice);
@@ -36,6 +37,7 @@ const AvailableVehiclesAfterSearch = () => {
       if (res.ok) {
         const data = await res.json();
         dispatch(setVariants(data));
+        dispatch(setFilteredData(data));
         navigate("/allVariants");
       }
     } catch (error) {
diff --git a/client/src/pages/user/Vehicles.jsx b/client/src/pages/user/Vehicles.jsx
index 2dfcc56..e6c85c2 100644
--- a/client/src/pages/user/Vehicles.jsx
+++ b/client/src/pages/user/Vehicles.jsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
+  setVariants,
   setVehicleDetail,
   showVehicles,
 } from "../../redux/user/listAllVehicleSlice";
@@ -11,7 +12,7 @@ import { Link, useNavigate } from "react-router-dom";
 import Filter from "../../components/Filter";
 import Sort from "../../components/Sort";
 
-export const onVehicleDetail = async (id, dispatch,navigate) => {
+export const onVehicleDetail = async (id, dispatch, navigate) => {
   try {
     const res = await fetch("/api/user/showVehicleDetails", {
       method: "POST",
@@ -22,7 +23,7 @@ export const onVehicleDetail = async (id, dispatch,navigate) => {
     });
     const data = await res.json();
     dispatch(setVehicleDetail(data));
-    navigate('/vehicleDetails')
+    navigate("/vehicleDetails");
   } catch (error) {
     console.log(error);
   }
@@ -30,10 +31,13 @@ export const onVehicleDetail = async (id, dispatch,navigate) => {
 
 const Vehicles = () => {
   const { userAllVehicles } = useSelector((state) => state.userListVehicles);
-const {data,filterdData} = useSelector((state)=> state.sortfilterSlice)
+  const { data, filterdData } = useSelector((state) => state.sortfilterSlice);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
+  //allVariants are set to null when we enter AllVehicles from navbar
+  dispatch(setVariants(null));
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -50,7 +54,7 @@ const {data,filterdData} = useSelector((state)=> state.sortfilterSlice)
       }
     };
     fetchData();
-  }, [dispatch ,data]);
+  }, [dispatch, data]);
 
   return (
     <div className=" lg:grid lg:grid-cols-12 gap-x-10 mx-28 justify-between">
@@ -62,176 +66,188 @@ const {data,filterdData} = useSelector((state)=> state.sortfilterSlice)
           <Sort />
         </div>
         <div className=" flex  sm:flex-row  w-full  lg:grid lg:max-w-[1000px]  lg:grid-cols-3 justify-center items-center gap-5 flex-wrap mt-5">
-          {filterdData && filterdData.length >0 ? 
-            filterdData.map(
-              (cur, idx) =>
-                cur.isDeleted === "false" && (
-                  <div
-                    className="bg-white box-shadow rounded-lg  drop-shadow "
-                    key={idx}
-                  >
-                    <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
-                      <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
-                        <img
-                          src={`${cur.image[0]}`}
-                          alt={`cur.name`}
-                          className=" w-full object-contain object-center lg:h-full lg:w-full"
-                        />
-                      </div>
-                      <div className="flex justify-between items-start">
-                        <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
-                          <span></span>
-                          {cur.name}
-                        </h2>
-
-                        <div className="text-[14px]  flex flex-col items-end">
-                          <p className="font-semibold">{cur.price}</p>
-                          <div className="text-[6px] relative bottom-[3px]">
-                            Per Day
+          {filterdData && filterdData.length > 0
+            ? filterdData.map(
+                (cur, idx) =>
+                  cur.isDeleted === "false" &&
+                  cur.isAdminApproved && (
+                    <div
+                      className="bg-white box-shadow rounded-lg  drop-shadow "
+                      key={idx}
+                    >
+                      <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
+                        <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
+                          <img
+                            src={`${cur.image[0]}`}
+                            alt={`cur.name`}
+                            className=" w-full object-contain object-center lg:h-full lg:w-full"
+                          />
+                        </div>
+                        <div className="flex justify-between items-start">
+                          <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
+                            <span></span>
+                            {cur.name}
+                          </h2>
+
+                          <div className="text-[14px]  flex flex-col items-end">
+                            <p className="font-semibold">{cur.price}</p>
+                            <div className="text-[6px] relative bottom-[3px]">
+                              Per Day
+                            </div>
                           </div>
                         </div>
-                      </div>
 
-                      <div className="my-2 font-mono">
-                        <div className="flex justify-between items-center mb-5 mt-5">
-                          <h3 className="text-[12px] flex justify-between items-center gap-1 ">
-                            <span>
+                        <div className="my-2 font-mono">
+                          <div className="flex justify-between items-center mb-5 mt-5">
+                            <h3 className="text-[12px] flex justify-between items-center gap-1 ">
+                              <span>
+                                <FaCarSide />
+                              </span>
+                              {cur.company}
+                            </h3>
+                            <p className=" text-end text-[12px] flex justify-between items-center gap-1">
+                              <span>
+                                <MdAirlineSeatReclineNormal />
+                              </span>
+                              {cur.seats}
+                            </p>
+                          </div>
+                          <div className="flex justify-between items-center text-[12px] mb-5 ">
+                            <p className="flex items-center justify-center gap-1">
                               <FaCarSide />
-                            </span>
-                            {cur.company}
-                          </h3>
-                          <p className=" text-end text-[12px] flex justify-between items-center gap-1">
-                            <span>
-                              <MdAirlineSeatReclineNormal />
-                            </span>
-                            {cur.seats}
-                          </p>
-                        </div>
-                        <div className="flex justify-between items-center text-[12px] mb-5 ">
-                          <p className="flex items-center justify-center gap-1">
-                            <FaCarSide />
-                            {cur.car_type}
-                          </p>
-                          <p className="flex justify-between items-center gap-1">
-                            <span>
-                              <BsFillFuelPumpFill />
-                            </span>
-                            {cur.fuel_type}
-                          </p>
-                        </div>
+                              {cur.car_type}
+                            </p>
+                            <p className="flex justify-between items-center gap-1">
+                              <span>
+                                <BsFillFuelPumpFill />
+                              </span>
+                              {cur.fuel_type}
+                            </p>
+                          </div>
 
-                        <hr />
-
-                        <div className="flex justify-center items-center gap-x-5  my-3">
-                          <Link to={"/vehicleDetails"}>
-                            <button
-                              className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
-                              onClick={() => onVehicleDetail(cur._id, dispatch,navigate)}
-                            >
-                              <div className="text-[12px] ">Book Ride</div>
-                            </button>
-                          </Link>
-
-                          <Link to={"/vehicleDetails"}>
-                            <button
-                              className="bg-black px-4 py-2 w-[100px] rounded-sm"
-                              onClick={() => onVehicleDetail(cur._id, dispatch,navigate)}
-                            >
-                              <div className="text-[12px] text-white">
-                                Details
-                              </div>
-                            </button>
-                          </Link>
+                          <hr />
+
+                          <div className="flex justify-center items-center gap-x-5  my-3">
+                            <Link to={"/vehicleDetails"}>
+                              <button
+                                className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
+                                onClick={() =>
+                                  onVehicleDetail(cur._id, dispatch, navigate)
+                                }
+                              >
+                                <div className="text-[12px] ">Book Ride</div>
+                              </button>
+                            </Link>
+
+                            <Link to={"/vehicleDetails"}>
+                              <button
+                                className="bg-black px-4 py-2 w-[100px] rounded-sm"
+                                onClick={() =>
+                                  onVehicleDetail(cur._id, dispatch, navigate)
+                                }
+                              >
+                                <div className="text-[12px] text-white">
+                                  Details
+                                </div>
+                              </button>
+                            </Link>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                )
-            ):userAllVehicles && userAllVehicles.map(
-              (cur, idx) =>
-                cur.isDeleted === "false" && (
-                  <div
-                    className="bg-white box-shadow rounded-lg  drop-shadow "
-                    key={idx}
-                  >
-                    <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
-                      <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
-                        <img
-                          src={`${cur.image[0]}`}
-                          alt={`cur.name`}
-                          className=" w-full object-contain object-center lg:h-full lg:w-full"
-                        />
-                      </div>
-                      <div className="flex justify-between items-start">
-                        <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
-                          <span></span>
-                          {cur.name}
-                        </h2>
-
-                        <div className="text-[14px]  flex flex-col items-end">
-                          <p className="font-semibold">{cur.price}</p>
-                          <div className="text-[6px] relative bottom-[3px]">
-                            Per Day
+                  )
+              )
+            : userAllVehicles &&
+              userAllVehicles.map(
+                (cur, idx) =>
+                  cur.isDeleted === "false" &&
+                  cur.isAdminApproved && (
+                    <div
+                      className="bg-white box-shadow rounded-lg  drop-shadow "
+                      key={idx}
+                    >
+                      <div className="mx-auto max-w-[320px] px-4 py-2 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
+                        <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden object-contain rounded-md bg-white lg:aspect-none group-hover:opacity-75 lg:h-80 mb-3">
+                          <img
+                            src={`${cur.image[0]}`}
+                            alt={`cur.name`}
+                            className=" w-full object-contain object-center lg:h-full lg:w-full"
+                          />
+                        </div>
+                        <div className="flex justify-between items-start">
+                          <h2 className="text-[14px] capitalize font-semibold tracking-tight text-gray-900">
+                            <span></span>
+                            {cur.name}
+                          </h2>
+
+                          <div className="text-[14px]  flex flex-col items-end">
+                            <p className="font-semibold">{cur.price}</p>
+                            <div className="text-[6px] relative bottom-[3px]">
+                              Per Day
+                            </div>
                           </div>
                         </div>
-                      </div>
 
-                      <div className="my-2 font-mono">
-                        <div className="flex justify-between items-center mb-5 mt-5">
-                          <h3 className="text-[12px] flex justify-between items-center gap-1 ">
-                            <span>
+                        <div className="my-2 font-mono">
+                          <div className="flex justify-between items-center mb-5 mt-5">
+                            <h3 className="text-[12px] flex justify-between items-center gap-1 ">
+                              <span>
+                                <FaCarSide />
+                              </span>
+                              {cur.company}
+                            </h3>
+                            <p className=" text-end text-[12px] flex justify-between items-center gap-1">
+                              <span>
+                                <MdAirlineSeatReclineNormal />
+                              </span>
+                              {cur.seats}
+                            </p>
+                          </div>
+                          <div className="flex justify-between items-center text-[12px] mb-5 ">
+                            <p className="flex items-center justify-center gap-1">
                               <FaCarSide />
-                            </span>
-                            {cur.company}
-                          </h3>
-                          <p className=" text-end text-[12px] flex justify-between items-center gap-1">
-                            <span>
-                              <MdAirlineSeatReclineNormal />
-                            </span>
-                            {cur.seats}
-                          </p>
-                        </div>
-                        <div className="flex justify-between items-center text-[12px] mb-5 ">
-                          <p className="flex items-center justify-center gap-1">
-                            <FaCarSide />
-                            {cur.car_type}
-                          </p>
-                          <p className="flex justify-between items-center gap-1">
-                            <span>
-                              <BsFillFuelPumpFill />
-                            </span>
-                            {cur.fuel_type}
-                          </p>
-                        </div>
+                              {cur.car_type}
+                            </p>
+                            <p className="flex justify-between items-center gap-1">
+                              <span>
+                                <BsFillFuelPumpFill />
+                              </span>
+                              {cur.fuel_type}
+                            </p>
+                          </div>
+
+                          <hr />
 
-                        <hr />
-
-                        <div className="flex justify-center items-center gap-x-5  my-3">
-                          <Link to={"/vehicleDetails"}>
-                            <button
-                              className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
-                              onClick={() => onVehicleDetail(cur._id, dispatch)}
-                            >
-                              <div className="text-[12px] ">Book Ride</div>
-                            </button>
-                          </Link>
-
-                          <Link to={"/vehicleDetails"}>
-                            <button
-                              className="bg-black px-4 py-2 w-[100px] rounded-sm"
-                              onClick={() => onVehicleDetail(cur._id, dispatch)}
-                            >
-                              <div className="text-[12px] text-white">
-                                Details
-                              </div>
-                            </button>
-                          </Link>
+                          <div className="flex justify-center items-center gap-x-5  my-3">
+                            <Link to={"/vehicleDetails"}>
+                              <button
+                                className="bg-green-500 px-4 py-2 w-[100px] rounded-sm"
+                                onClick={() =>
+                                  onVehicleDetail(cur._id, dispatch)
+                                }
+                              >
+                                <div className="text-[12px] ">Book Ride</div>
+                              </button>
+                            </Link>
+
+                            <Link to={"/vehicleDetails"}>
+                              <button
+                                className="bg-black px-4 py-2 w-[100px] rounded-sm"
+                                onClick={() =>
+                                  onVehicleDetail(cur._id, dispatch)
+                                }
+                              >
+                                <div className="text-[12px] text-white">
+                                  Details
+                                </div>
+                              </button>
+                            </Link>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                )
-            )}
+                  )
+              )}
         </div>
       </div>
     </div>
diff --git a/client/src/pages/vendor/Components/VendorAddVehilceModal.jsx b/client/src/pages/vendor/Components/VendorAddVehilceModal.jsx
index 6a7e9b3..9602530 100644
--- a/client/src/pages/vendor/Components/VendorAddVehilceModal.jsx
+++ b/client/src/pages/vendor/Components/VendorAddVehilceModal.jsx
@@ -1,4 +1,4 @@
-import { Button, Modal } from "flowbite-react";
+
 import { useDispatch, useSelector } from "react-redux";
 import {
   addVehicleClicked,
@@ -8,10 +8,21 @@ import { useForm, Controller } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import toast, { Toaster } from "react-hot-toast";
 
-import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
+import { MenuItem, } from "@mui/material";
 import { fetchModelData } from "../../admin/components/AddProductModal";
 import { useEffect } from "react";
 
+import Button from "@mui/material/Button";
+
+
+
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import { IoMdClose } from "react-icons/io";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+
 
 const VendorAddProductModal = () => {
   const { register, handleSubmit, reset, control } = useForm();
@@ -28,35 +39,36 @@ const VendorAddProductModal = () => {
     fetchModelData(dispatch);
   }, []);
 
-  const onSubmit = async (data) => {
+  const onSubmit = async (addData) => {
     try {
       const img = [];
-      for (let i = 0; i < data.image.length; i++) {
-        img.push(data.image[i]);
+      for (let i = 0; i < addData.image.length; i++) {
+        img.push(addData.image[i]);
       }
       const formData = new FormData();
-      formData.append("registeration_number", data.registeration_number);
-      formData.append("company", data.company);
+      formData.append("registeration_number", addData.registeration_number);
+      formData.append("company", addData.company);
       img.forEach((file) => {
         formData.append(`image`, file); // Append each file with a unique key
       });
-      formData.append("name", data.name);
-      formData.append("model", data.model);
-      formData.append("title", data.title);
-      formData.append("base_package", data.base_package);
-      formData.append("price", data.price);
-      formData.append("description", data.description);
-      formData.append("year_made", data.year_made);
-      formData.append("fuel_type", data.fuel_type);
-      formData.append("seat", data.seat);
-      formData.append("transmition_type", data.transmition_type);
-      formData.append("insurance_end_date", data.insurance_end_date);
-      formData.append("registeration_end_date", data.registeration_end_date);
-      formData.append("polution_end_date", data.polution_end_date);
-      formData.append("car_type", data.car_type);
-      formData.append("location", data.location);
-      formData.append("district", data.districts);
-      formData.append("addedBy", _id);
+      formData.append("name", addData.name);
+      formData.append("model", addData.model);
+      formData.append("title", addData.title);
+      formData.append("base_package", addData.base_package);
+      formData.append("price", addData.price);
+      formData.append("description", addData.description);
+      formData.append("year_made", addData.year_made);
+      formData.append("fuel_type", addData.fuelType);
+      formData.append("seat", addData.Seats);
+      formData.append("transmition_type", addData.transmitionType);
+      formData.append("insurance_end_date", addData.insurance_end_date.$d);
+      formData.append("registeration_end_date", addData.Registeration_end_date.$d);
+      formData.append("polution_end_date", addData.polution_end_date.$d);
+      formData.append("car_type", addData.carType);
+      formData.append("location", addData.vehicleLocation);
+      formData.append("district", addData.vehicleDistrict);
+      formData.append("addedBy", _id); 
+      
 
       let tostID;
       if (formData) {
@@ -82,324 +94,388 @@ const VendorAddProductModal = () => {
     } catch (error) {
       console.log(error);
     }
-    navigate("/vendorDashboard/vendorAddProduct");
+    navigate("/vendorDashboard/vendorAllVeihcles");
     dispatch(addVehicleClicked(false));
   };
 
+  const handleClose = () => {
+    navigate("/vendorDashboard/vendorAllVeihcles");
+  };
+
   return (
     <>
       <Toaster />
       {isAddVehicleClicked && (
-        <Modal
-          show={isAddVehicleClicked}
-          onClose={() => dispatch(addVehicleClicked(false))}
-          className="w-full backdrop-blur-md     p-20"
-        >
-          <Modal.Header className=" bg-blue-50 rounded-t-md ">
-            Add Vehicle Details
-          </Modal.Header>
-          <Modal.Body className="bg-blue-100 px-2">
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="">
-                <div>
-                  <input
-                    className="p-2"
-                    type="file"
-                    multiple
-                    id="image"
-                    {...register("image")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="registeration_number"
-                    id="registeration_number"
-                    {...register("registeration_number")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="company">company</label>
-                  <Controller
-                    name="company"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="company" className="p-2">
-                        {companyData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
+        <div>
+        <button onClick={handleClose} className="relative left-10 top-5">
+          <div className="padding-5 padding-2 rounded-full bg-slate-100 drop-shadow-md hover:shadow-lg hover:bg-blue-200 hover:translate-y-1 hover:translate-x-1 ">
+            <IoMdClose style={{ fontSize: "30" }} />
+          </div>
+        </button>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="bg-white -z-10 max-w-[1000px] mx-auto">
+            <Box
+              sx={{
+                "& .MuiTextField-root": {
+                  m: 4,
+                  width: "25ch",
+                  color: "black", // Set text color to black
+                  "& .MuiOutlinedInput-notchedOutline": {
+                    borderColor: "black", // Set outline color to black
+                  },
+                  "@media (max-width: 640px)": {
+                    width: "30ch",
+                  },
+                },
+              }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  required
+                  id="registeration_number"
+                  label="registeration_number"
+                  {...register("registeration_number")}
+                />
+
+                <Controller
+                  control={control}
+                  name="company"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="company"
+                      select
+                      label="Company"
+                      error={Boolean(field.value == "")}
+                    >
+                      {companyData.map((cur, idx) => (
+                        <MenuItem value={cur} key={idx}>
+                          {cur}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <TextField
+                  required
+                  id="name"
+                  label="name"
+                  {...register("name")}
+                />
+
+                <Controller
+                  control={control}
+                  name="model"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="model"
+                      select
+                      label="Model"
+                      error={Boolean(field.value == "")}
+                    >
+                      {modelData.map((cur, idx) => (
+                        <MenuItem value={cur} key={idx}>
+                          {cur}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <TextField id="title" label="title" {...register("title")} />
+                <TextField
+                  id="base_package"
+                  label="base_package"
+                  {...register("base_package")}
+                />
+                <TextField
+                  id="price"
+                  type="number"
+                  label="Price"
+                  {...register("price")}
+                />
+
+                <TextField
+                  required
+                  id="year_made"
+                  type="number"
+                  label="year_made"
+                  {...register("year_made")}
+                />
+                <Controller
+                  control={control}
+                  name="fuelType"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="fuel_type"
+                      select
+                      label="Fuel type"
+                      error={Boolean(field.value == "")}
+                    >
+                      <MenuItem value={"petrol"}>petrol</MenuItem>
+                      <MenuItem value={"diesel"}>diesel</MenuItem>
+                      <MenuItem value={"electirc"}>electric</MenuItem>
+                      <MenuItem value={"hybrid"}>hybrid</MenuItem>
+                    </TextField>
+                  )}
+                ></Controller>
+              </div>
 
-                <div>
-                  <FormControl fullWidth>
-                    <InputLabel htmlFor="districts">districts</InputLabel>
-                    <Controller
-                      name="districts"
-                      control={control}
-                      render={({ field }) => (
-                        <Select {...field} id="districts" className="p-2">
-                          {districtData.map((cur, idx) => (
-                            <MenuItem value={cur} key={idx}>
-                              {cur}
-                            </MenuItem>
-                          ))}
-                        </Select>
-                      )}
+              <div>
+                <Controller
+                  name="carType"
+                  control={control}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="car_type"
+                      select
+                      label="Car Type"
+                      error={Boolean(field.value === "")} // Add error handling for empty value
+                    >
+                      <MenuItem value="sedan">Sedan</MenuItem>
+                      <MenuItem value="suv">SUV</MenuItem>
+                      <MenuItem value="hatchback">Hatchback</MenuItem>
+                    </TextField>
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="Seats"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="seats"
+                      select
+                      label="Seats"
+                      error={Boolean(field.value === "")}
+                    >
+                      <MenuItem value={"5"}>5</MenuItem>
+                      <MenuItem value={"7"}>7</MenuItem>
+                      <MenuItem value={"8"}>8</MenuItem>
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <Controller
+                  control={control}
+                  name="transmitionType"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="transmittion_type"
+                      select
+                      label="transmittion_type"
+                      error={Boolean(field.value == "")}
+                    >
+                      <MenuItem value={"automatic"}>automatic</MenuItem>
+                      <MenuItem value={"manual"}>manual</MenuItem>
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <Controller
+                  control={control}
+                  name="vehicleLocation"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="vehicleLocation"
+                      select
+                      label="vehicleLocation"
+                      error={Boolean(field.value == "")}
+                    >
+                      {locationData.map((cur, idx) => (
+                        <MenuItem value={cur} key={idx}>
+                          {cur}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <Controller
+                  control={control}
+                  name="vehicleDistrict"
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      required
+                      id="vehicleDistrict"
+                      select
+                      label="vehicleDistrict"
+                      error={Boolean(field.value == "")}
+                    >
+                      {districtData.map((cur, idx) => (
+                        <MenuItem value={cur} key={idx}>
+                          {cur}
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  )}
+                ></Controller>
+
+                <TextField
+                  id="description"
+                  label="description"
+                  multiline
+                  rows={4}
+                  sx={{
+                    width: "100%",
+                    "@media (min-width: 1280px)": {
+                      // for large screens (lg)
+                      minWidth: 565,
+                    },
+                  }}
+                  {...register("description")}
+                />
+              </div>
+              <div>
+                <Controller
+                  name="insurance_end_date"
+                  control={control}
+                  render={({ field }) => (
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                      <DatePicker
+                        {...field}
+                        label="Insurance end Date"
+                        inputFormat="MM/dd/yyyy" // Customize the date format as per your requirement
+                        value={field.value || null} // Ensure value is null if empty string or undefined
+                        onChange={(date) => field.onChange(date)}
+                        textField={(props) => <TextField {...props} />}
+                      />
+                    </LocalizationProvider>
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="Registeration_end_date"
+                  render={({ field }) => (
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                      <DatePicker
+                        {...field}
+                        label="registeration end Date"
+                        inputFormat="MM/dd/yyyy" // Customize the date format as per your requirement
+                        value={field.value || null} // Ensure value is null if empty string or undefined
+                        onChange={(date) => field.onChange(date)}
+                        textField={(props) => <TextField {...props} />}
+                      />
+                    </LocalizationProvider>
+                  )}
+                ></Controller>
+
+                <Controller
+                  control={control}
+                  name="polution_end_date"
+                  render={({ field }) => (
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                      <DatePicker
+                        {...field}
+                        label="polution end Date "
+                        inputFormat="MM/dd/yyyy" // Customize the date format as per your requirement
+                        value={field.value || null} // Ensure value is null if empty string or undefined
+                        onChange={(date) => field.onChange(date)}
+                        textField={(props) => <TextField {...props} />}
+                      />
+                    </LocalizationProvider>
+                  )}
+                ></Controller>
+
+                {/* editing for image is not done yet , default value for image is also not done yet */}
+
+                {/* file upload section */}
+                <div className="flex flex-col items-start justify-center lg:flex-row gap-10 lg:justify-between lg:items-start   ml-7 mt-10">
+                  <div className="max-w-[300px] sm:max-w-[600px]">
+                    <label
+                      className="block mb-2 text-sm font-medium text-gray-900 "
+                      htmlFor="insurance_image"
+                    >
+                      Upload insurance image
+                    </label>
+                    <input
+                      className="block w-full p-2 text-sm text-gray-50 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-black focus:outline-none dark:bg-gray-200 dark:border-gray-600 dark:placeholder-gray-400"
+                      aria-describedby="user_avatar_help"
+                      id="insurance_image"
+                      type="file"
+                      multiple
+                      {...register("insurance_image")}
                     />
-                  </FormControl>
-                </div>
-
-                <div>
-                  <label htmlFor="location">location</label>
-                  <Controller
-                    name="location"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="location" className="p-2">
-                        {locationData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="name"
-                    id="name"
-                    {...register("name")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="model">Model</label>
-                  <Controller
-                    name="model"
-                    control={control}
-                    render={({ field }) => (
-                      <select {...field} id="model" className="p-2">
-                        {modelData.map((cur, idx) => (
-                          <option value={cur} key={idx}>
-                            {cur}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="Title"
-                    id="title"
-                    {...register("title")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="text"
-                    placeholder="Base package"
-                    id="base_package"
-                    {...register("base_package")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Number"
-                    placeholder="Price"
-                    id="price"
-                    {...register("price")}
-                  />
-                </div>
-
-                <div>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Number"
-                    placeholder="Year Made"
-                    id="year_made"
-                    {...register("year_made")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="fuel_type">Fuel type</label>
-                  <Controller
-                    name="fuel_type"
-                    control={control}
-                    defaultValue={"petrol"}
-                    render={({ field }) => (
-                      <select {...field} id="fuel_type" className="p-2">
-                        <option value="petrol">Petrol</option>
-                        <option value="diesel">Disel</option>
-                        <option value="electric">Electric</option>
-                        <option value="hybrid">Hybrid</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="seats">Number of seats</label>
-                  <Controller
-                    name="seat"
-                    control={control}
-                    defaultValue={"5"}
-                    render={({ field }) => (
-                      <select {...field} id="seats" className="p-2">
-                        <option value="5">5</option>
-                        <option value="7">7</option>
-                        <option value="8">8</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="transmittion_type">Transmission Type</label>
-                  <Controller
-                    name="transmition_type"
-                    control={control}
-                    defaultValue={"manual"}
-                    render={({ field }) => (
-                      <select {...field} id="transmittion_type" className="p-2">
-                        <option value="automatic">automatic</option>
-                        <option value="manual">manual</option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="car_type">Select car type:</label>
-                  <Controller
-                    name="car_type"
-                    control={control}
-                    defaultValue="sedan"
-                    render={({ field }) => (
-                      <select {...field} id="car_type" className="p-2">
-                        <option value="sedan">sedan</option>
-                        <option value="suv">suv </option>
-                        <option value="hatchback">hatchback </option>
-                      </select>
-                    )}
-                  />
-                </div>
-
-                <div>
-                  <textarea
-                    className="mx-auto px-5 py-3 rounded-md"
-                    placeholder="Description"
-                    id="description"
-                    {...register("description")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="insurance_end_date">Insurance end date</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Insurance End date"
-                    id="insurance_end_date"
-                    {...register("insurance_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="registeration_end_date">
-                    Registeration end date
-                  </label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Registeration End date"
-                    id="registeration_end_date"
-                    {...register("registeration_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="polution_end_date">Polution end date</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="Date"
-                    placeholder="Poltion End date"
-                    id="polution_end_date"
-                    {...register("polution_end_date")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="insurance_image">Insurance Image</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    placeholder="Insurance Image"
-                    id="insurance_image"
-                    {...register("insurance_image")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="rc_book_image">Rc book Image</label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    placeholder="Rc book Image"
-                    id="rc_book_image"
-                    {...register("rc_book_image")}
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="polution_image">
-                    Polution certificate image
-                  </label>
-                  <input
-                    className="mx-auto px-10 py-3 rounded-md"
-                    type="file"
-                    id="polution_image"
-                    {...register("polution_image")}
-                  />
+                  </div>
+
+                  <div className="max-w-[300px] sm:max-w-[600px]">
+                    <label
+                      className="block mb-2 text-sm font-medium text-gray-900 "
+                      htmlFor="rc_book_image"
+                    >
+                      Upload rc book image
+                    </label>
+                    <input
+                      className="block w-full p-2  text-sm text-gray-50 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-black focus:outline-none dark:bg-gray-200 dark:border-gray-600 dark:placeholder-gray-400"
+                      aria-describedby="user_avatar_help"
+                      id="rc_book_image"
+                      type="file"
+                      multiple
+                      {...register("rc_book_image")}
+                    />
+                  </div>
+                  <div className="max-w-[300px] sm:max-w-[600px]">
+                    <label
+                      className="block mb-2 text-sm font-medium text-gray-900 "
+                      htmlFor="polution_image"
+                    >
+                      Upload polution image
+                    </label>
+                    <input
+                      className="block w-full p-2 text-sm text-gray-50 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-black focus:outline-none dark:bg-gray-200 dark:border-gray-600 dark:placeholder-gray-900"
+                      aria-describedby="user_avatar_help"
+                      id="polution_image"
+                      type="file"
+                      multiple
+                      {...register("polution_image")}
+                    />
+                  </div>
+
+                  <div className="max-w-[300px] sm:max-w-[600px]">
+                    <label
+                      className="block mb-2 text-sm font-medium text-gray-900 "
+                      htmlFor="image"
+                    >
+                      Upload vehicle image
+                    </label>
+                    <input
+                      className="block w-full p-2 text-sm text-gray-50 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-black focus:outline-none dark:bg-gray-200 dark:border-gray-600 dark:placeholder-gray-900"
+                      aria-describedby="user_avatar_help"
+                      id="image"
+                      type="file"
+                      multiple
+                      {...register("image")}
+                    />
+                  </div>
                 </div>
               </div>
-              <div className="flex justify-end w-full gap-2">
-                <Button
-                  onClick={() => dispatch(addVehicleClicked(false))}
-                  className="bg-red-500 text-white px-3 py-1"
-                >
-                  Cancel
-                </Button>
-                <button
-                  type="submit"
-                  className="bg-blue-700 rounded-md text-white px-3 py-1"
-                >
+              <div className="mt-10 flex justify-start items-center ml-7 mb-10">
+                <Button variant="contained"  type="submit">
                   Submit
-                </button>
+                </Button>
               </div>
-            </form>
-          </Modal.Body>
-        </Modal>
+            </Box>
+          </div>
+        </form>
+      </div>
       )}
     </>
   );
diff --git a/client/src/pages/vendor/Components/VendorDeleteVehicleModal.jsx b/client/src/pages/vendor/Components/VendorDeleteVehicleModal.jsx
index b6debae..a8e48de 100644
--- a/client/src/pages/vendor/Components/VendorDeleteVehicleModal.jsx
+++ b/client/src/pages/vendor/Components/VendorDeleteVehicleModal.jsx
@@ -93,7 +93,7 @@ const VendorDeleteVehicleModal = () => {
                 type="button"
                 className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"
                 onClick={() => {
-                  navigate("/vendorDashboard/vendorAddProduct");
+                  navigate("/vendorDashboard/vendorAllVeihcles");
                   vendorHandleDelete(vehicle_id);
                 }}
               >
@@ -103,7 +103,7 @@ const VendorDeleteVehicleModal = () => {
                 data-modal-hide="popup-modal"
                 type="button"
                 className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-                onClick={() => navigate("/vendorDashboard/vendorAddProduct")}
+                onClick={() => navigate("/vendorDashboard/vendorAllVeihcles")}
               >
                 No, cancel
               </button>
diff --git a/client/src/pages/vendor/Components/VendorHeader.jsx b/client/src/pages/vendor/Components/VendorHeader.jsx
new file mode 100644
index 0000000..fa35faa
--- /dev/null
+++ b/client/src/pages/vendor/Components/VendorHeader.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { addVehicleClicked } from '../../../redux/adminSlices/actions';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+
+
+const VendorHeader = ({category,title}) => {
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+
+  //Vendor add Vehicle
+  const handleAddVehicle = () => {
+    dispatch(addVehicleClicked(true));
+    navigate('/vendorDashboard/vendorAddProduct')
+  };
+
+  return (
+    <div className="mb-10 flex justify-between items-center ">
+      <div>
+      <p className="text-gray-400">
+        {category}
+      </p>
+      <p className="text-slate--900 text-3xl font-extrabold tracking-tight ">
+        {title}
+      </p>
+      </div>
+      <button className='bg-blue-600 rounded-lg '>
+        <div className='text-white px-5 py-2 font-bold ' onClick={handleAddVehicle}>Add+</div>
+      </button>
+      
+        
+    </div>
+  )
+}
+VendorHeader.propTypes = {
+  category:PropTypes.string,
+  title: PropTypes.string.isRequired,
+};
+
+export default VendorHeader
\ No newline at end of file
diff --git a/client/src/pages/vendor/Dashboard/VendorDashboard.jsx b/client/src/pages/vendor/Dashboard/VendorDashboard.jsx
index 33ce11e..fff3168 100644
--- a/client/src/pages/vendor/Dashboard/VendorDashboard.jsx
+++ b/client/src/pages/vendor/Dashboard/VendorDashboard.jsx
@@ -49,7 +49,7 @@ function VendorDashboard() {
             <Routes>
               <Route path="/" element={<AdminHomeMain />} />
               <Route path="/adminHome" element={<AdminHomeMain />} />
-              <Route path="/vendorAddProduct" element={<VendorAllVehicles />} />
+              <Route path="/vendorAllVeihcles" element={<VendorAllVehicles />} />
             </Routes>
           </div>
         </div>
diff --git a/client/src/pages/vendor/data/vendorSidebarContents.jsx b/client/src/pages/vendor/data/vendorSidebarContents.jsx
index 8396571..5e99eeb 100644
--- a/client/src/pages/vendor/data/vendorSidebarContents.jsx
+++ b/client/src/pages/vendor/data/vendorSidebarContents.jsx
@@ -17,7 +17,7 @@ export const links = [
           icon:<IoHomeOutline />,
         },
         {
-          name: 'vendorAddProduct',
+          name: 'vendorAllVeihcles',
           icon: <FiShoppingBag />,
         },
         
diff --git a/client/src/pages/vendor/pages/VendorAllVehicles.jsx b/client/src/pages/vendor/pages/VendorAllVehicles.jsx
index 3f0ce73..5c7b63f 100644
--- a/client/src/pages/vendor/pages/VendorAllVehicles.jsx
+++ b/client/src/pages/vendor/pages/VendorAllVehicles.jsx
@@ -5,7 +5,6 @@ import { useEffect } from "react";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import ModeEditOutlineIcon from "@mui/icons-material/ModeEditOutline";
 import { Button } from "@mui/material";
-import { Header } from "../../admin/components";
 import { DataGrid } from "@mui/x-data-grid";
 import toast, { Toaster } from "react-hot-toast";
 
@@ -16,10 +15,10 @@ import {
   setVendorError,
   setVenodrVehilces,
 } from "../../../redux/vendor/vendorDashboardSlice";
-import VendorAddProductModal from "../Components/VendorAddVehilceModal";
 
 import { GrStatusGood } from "react-icons/gr";
 import { MdOutlinePending } from "react-icons/md";
+import VendorHeader from "../Components/VendorHeader";
 
 
 const VendorAllVehicles = () => {
@@ -180,7 +179,7 @@ const VendorAllVehicles = () => {
       {vendorEditSuccess && <Toaster />}
       {vendorDeleteSuccess && <Toaster/>}
 
-      <Header title="AllVehicles" />
+      <VendorHeader title="AllVehicles" />
       {isVendorVehiclesEmpty ? (
         <p>No requests yet</p>
       ) : (
@@ -210,8 +209,6 @@ const VendorAllVehicles = () => {
         </Box>
       )}
 
-      {/* addProduct modal */}
-      <VendorAddProductModal />
     </div>
   );
 };
diff --git a/client/src/redux/adminSlices/adminDashboardSlice/StatusSlice.jsx b/client/src/redux/adminSlices/adminDashboardSlice/StatusSlice.jsx
index d70abc8..d27966a 100644
--- a/client/src/redux/adminSlices/adminDashboardSlice/StatusSlice.jsx
+++ b/client/src/redux/adminSlices/adminDashboardSlice/StatusSlice.jsx
@@ -5,6 +5,9 @@ const initialState = {
     adminEditVehicleSuccess:false,
     adminEditVehicleError:false,
     adminEditVehicleLoading:false,
+    adminAddVehicleSuccess:false,
+    adminCrudError:false,
+    loading:false
 }
 
 export const StatusSlice = createSlice({
@@ -14,14 +17,25 @@ export const StatusSlice = createSlice({
       setadminEditVehicleSuccess: (state, action) => {
         state.adminEditVehicleSuccess = action.payload;
       },
+      setadminAddVehicleSuccess:(state,action) => {
+        state.adminAddVehicleSuccess = action.payload;
+      },
+      setadminCrudError:(state,action) => {
+        state.adminCrudError = action.payload;
+      },
+      setLoading:(state,action) => {
+        state.loading = action.payload
+      },
       clearAdminVehicleToast: (state) => {
-        state.adminEditVehicleSuccess = false;
-        state.adminEditVehicleError = false;
+        state.adminEditVehicleSuccess = false
+        state.adminEditVehicleError = false
+        state.adminCrudError = false
+        state.loading = false
       },
      
     },
   });
   
-  export const {setadminEditVehicleSuccess,clearAdminVehicleToast } = StatusSlice.actions;
+  export const {setadminEditVehicleSuccess,clearAdminVehicleToast ,setadminAddVehicleSuccess,setadminCrudError,setLoading} = StatusSlice.actions;
   export default StatusSlice.reducer;
   
\ No newline at end of file
diff --git a/client/src/redux/user/sortfilterSlice.jsx b/client/src/redux/user/sortfilterSlice.jsx
index 809246e..d1e6253 100644
--- a/client/src/redux/user/sortfilterSlice.jsx
+++ b/client/src/redux/user/sortfilterSlice.jsx
@@ -1,38 +1,52 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-    price:0,
-    data:null,
-    filterdData:[]
-}
-
+  price: 0,
+  data: null,
+  filterdData: [],
+  variantMode: false,
+  //this variant mode desiced are we in filtering Searched Data form home page ro are we filtering from allVehicles data from Navbar to filter component
+};
 
 const sortfilterSlice = createSlice({
   name: "sortfilterSlice",
   initialState,
   reducers: {
-    setData:(state,action)=> {
-        state.data = action.payload
+    setData: (state, action) => {
+      state.data = action.payload;
     },
     setPriceLowtoHigh: (state) => {
-      state.filterdData = state.filterdData.sort((a,b)=> a.price - b.price)
+      state.filterdData = state.filterdData.sort((a, b) => a.price - b.price);
     },
-    setPriceHightoLow:(state) => {
-        state.filterdData = state.filterdData.sort((a,b) => b.price - a.price)
+    setPriceHightoLow: (state) => {
+      state.filterdData = state.filterdData.sort((a, b) => b.price - a.price);
     },
-    setYearAscending:(state) => {
-        state.filterdData = state.filterdData.sort((a,b)=> a.year_made - b.year_made)
+    setYearAscending: (state) => {
+      state.filterdData = state.filterdData.sort(
+        (a, b) => a.year_made - b.year_made
+      );
     },
-    setYearDecending:(state) => {
-        state.filterdData = state.filterdData.sort((a,b)=> b.year_made - a.year_made)
+    setYearDecending: (state) => {
+      state.filterdData = state.filterdData.sort(
+        (a, b) => b.year_made - a.year_made
+      );
+    },
+    setFilteredData: (state, action) => {
+      state.filterdData = action.payload;
+    },
+    setVariantModeOrNot: (state, action) => {
+      state.variantMode = action.payload;
     },
-    setFilteredData : (state,action) => {
-      state.filterdData = action.payload
-    }
-
   },
 });
 
-
-export const { setPriceLowtoHigh,setPriceHightoLow,setYearAscending,setYearDecending,setData,setFilteredData } = sortfilterSlice.actions;
+export const {
+  setPriceLowtoHigh,
+  setPriceHightoLow,
+  setYearAscending,
+  setYearDecending,
+  setData,
+  setFilteredData,
+  setVariantModeOrNot,
+} = sortfilterSlice.actions;
 export default sortfilterSlice.reducer;