fav product from prodDetail page

frontend/src/components/Navbar.jsx

@@ -47,8 +47,8 @@ const Navbar = ({ onLogout, userName }) => {
               <div className="relative">
                 <input
                   type="text"
-                  placeholder="Search for books, electronics, furniture..."
-                  className="w-full p-2 pl-10 pr-4 border border-gray-300 rounded-md focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                  placeholder="Search for anything..."
+                  className="w-full p-2 pl-10 pr-4 border border-gray-300 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                   value={searchQuery}
                   onChange={handleSearchChange}
                 />

frontend/src/pages/Home.jsx

@@ -34,7 +34,6 @@ const Home = () => {
     if (data.success) {
       setShowAlert(true);
     }
-    console.log(response);
     console.log(`Add Product -> History: ${id}`);
   };
 
@@ -82,7 +81,6 @@ const Home = () => {
         if (!response.ok) throw new Error("Failed to fetch products");
 
         const data = await response.json();
-        console.log(data);
         if (data.success) {
           setRecommended(
             data.data.map((product) => ({
@@ -145,7 +143,6 @@ const Home = () => {
   useEffect(() => {
     const fetchrecomProducts = async () => {
       // Get the user's data from localStorage
-      console.log(storedUser);
       try {
         const response = await fetch(
           "http://localhost:3030/api/history/getHistory",
@@ -162,7 +159,6 @@ const Home = () => {
         if (!response.ok) throw new Error("Failed to fetch products");
 
         const data = await response.json();
-        console.log(data);
         if (data.success) {
           sethistory(
             data.data.map((product) => ({

frontend/src/pages/ProductDetail.jsx

@@ -10,6 +10,8 @@ import {
   Phone,
   Mail,
 } from "lucide-react";
+import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
+
 
 const ProductDetail = () => {
   const { id } = useParams();
@@ -29,8 +31,32 @@ const ProductDetail = () => {
   const [currentImage, setCurrentImage] = useState(0);
   const [reviews, setReviews] = useState([]);
   const [showReviewForm, setShowReviewForm] = useState(false);
+  const [showAlert, setShowAlert] = useState(false);
   const storedUser = JSON.parse(sessionStorage.getItem("user"));
 
+
+    const toggleFavorite = async (id) => {
+      const response = await fetch(
+        "http://localhost:3030/api/product/addFavorite",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userID: storedUser.ID,
+            productID: id,
+          }),
+        },
+      );
+      const data = await response.json();
+      if (data.success) {
+        setShowAlert(true);
+      }
+      console.log(`Add Product -> History: ${id}`);
+    };
+
+
   const [reviewForm, setReviewForm] = useState({
     rating: 3,
     comment: "",
@@ -68,7 +94,7 @@ const ProductDetail = () => {
         userId: storedUser.ID,
       };
 
-      const response = await fetch(`http://localhost:3030/api/review/add`, {
+      const response = await fetch(`http://localhost:3030/api/review/addReview`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(reviewData),
@@ -182,38 +208,6 @@ const ProductDetail = () => {
     fetchReviews();
   }, [id]);
 
-  // Handle favorite toggle with error handling
-  const toggleFavorite = async () => {
-    try {
-      const response = await fetch(
-        "http://localhost:3030/api/product/add_to_favorite",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            userID: 1, // Replace with actual user ID
-            productsID: id,
-          }),
-        },
-      );
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const result = await response.json();
-      if (result.success) {
-        setIsFavorite(!isFavorite);
-      } else {
-        throw new Error(result.message || "Failed to toggle favorite");
-      }
-    } catch (error) {
-      console.error("Error toggling favorite:", error);
-      alert(`Failed to add to favorites: ${error.message}`);
-    }
-  };
 
   // Image navigation
   const nextImage = () => {
@@ -296,6 +290,7 @@ const ProductDetail = () => {
 
   // Render product details
   return (
+
     <div className="max-w-6xl mx-auto px-4 py-8">
       <div className="mb-6">
         <Link
@@ -306,6 +301,12 @@ const ProductDetail = () => {
           <span>Back</span>
         </Link>
       </div>
+      {showAlert && (
+        <FloatingAlert
+          message="Product added to favorites!"
+          onClose={() => setShowAlert(false)}
+        />
+      )}
 
       <div className="flex flex-col md:flex-row gap-8">
         <div className="md:w-3/5">
@@ -370,7 +371,6 @@ const ProductDetail = () => {
             </div>
           )}
         </div>
-
         <div className="md:w-2/5">
           <div className="bg-white border border-gray-200 p-6 mb-6">
             <div className="flex justify-between items-start mb-4">
@@ -378,7 +378,7 @@ const ProductDetail = () => {
                 {product.Name || "Unnamed Product"}
               </h1>
               <button
-                onClick={toggleFavorite}
+                onClick={() => toggleFavorite(product.ProductID)}
                 className="p-2 hover:bg-gray-100 rounded-full"
                 aria-label={
                   isFavorite ? "Remove from favorites" : "Add to favorites"

frontend/src/pages/SearchPage.jsx

@@ -17,6 +17,9 @@ const SearchPage = () => {
   const [priceRange, setPriceRange] = useState({ min: 0, max: 1000 });
   const [isFilterOpen, setIsFilterOpen] = useState(false);
 
+
+
+
   useEffect(() => {
     fetchProducts(initialSearchQuery);
   }, [initialSearchQuery]);