added Review Feature

frontend/src/pages/Home.jsx

@@ -6,6 +6,7 @@ const Home = () => {
   const navigate = useNavigate();
   const [listings, setListings] = useState([]);
   const [recommended, setRecommended] = useState([]);
+  const [history, sethistory] = useState([]);
   const [error, setError] = useState(null);
 
   useEffect(() => {
@@ -38,7 +39,6 @@ const Home = () => {
               price: product.Price,
               category: product.Category, // Ensure this gets the category name
               image: product.ProductImage, // Use the alias for image URL
-              condition: "New", // Modify based on actual data
               seller: product.SellerName, // Fetch seller name properly
               datePosted: product.DateUploaded, // Use the actual date
               isFavorite: false, // Default state
@@ -73,7 +73,6 @@ const Home = () => {
               price: product.Price,
               category: product.Category, // Ensure this gets the category name
               image: product.ProductImage, // Use the alias for image URL
-              condition: "New", // Modify based on actual data
               seller: product.SellerName, // Fetch seller name properly
               datePosted: product.DateUploaded, // Use the actual date
               isFavorite: false, // Default state
@@ -90,6 +89,49 @@ const Home = () => {
     fetchProducts();
   }, []);
 
+  useEffect(() => {
+    const fetchrecomProducts = async () => {
+      // Get the user's data from localStorage
+      const storedUser = JSON.parse(sessionStorage.getItem("user"));
+      console.log(storedUser);
+      try {
+        const response = await fetch("http://localhost:3030/api/get/history", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            id: storedUser.ID,
+          }),
+        });
+        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) => ({
+              id: product.ProductID,
+              title: product.ProductName, // Use the alias from SQL
+              price: product.Price,
+              category: product.Category, // Ensure this gets the category name
+              image: product.ProductImage, // Use the alias for image URL
+              seller: product.SellerName, // Fetch seller name properly
+              datePosted: product.DateUploaded, // Use the actual date
+              isFavorite: false, // Default state
+            })),
+          );
+        } else {
+          throw new Error(data.message || "Error fetching products");
+        }
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setError(error.message);
+      }
+    };
+    fetchrecomProducts();
+  }, []);
+
   // Toggle favorite status
   const toggleFavorite = (id, e) => {
     e.preventDefault(); // Prevent navigation when clicking the heart icon
@@ -138,26 +180,6 @@ const Home = () => {
         </div>
       </div>
 
-      {/* Categories */}
-      {/* <div className="mb-8">
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">Categories</h2>
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-          {categories.map((category) => (
-            <button
-              key={category.id}
-              className="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 hover:border-green-500 hover:shadow-sm"
-            >
-              <div className="flex items-center justify-center w-12 h-12 bg-green-50 text-green-600 rounded-full mb-2">
-                {category.icon}
-              </div>
-              <span className="text-sm font-medium text-gray-700">
-                {category.name}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div> */}
-
       {/* Recent Listings */}
       <div className="relative py-4">
         <h2 className="text-xl font-semibold text-gray-800 mb-4">
@@ -219,8 +241,6 @@ const Home = () => {
                   <div className="flex items-center text-sm text-gray-500 mt-2">
                     <Tag className="h-4 w-4 mr-1" />
                     <span>{recommended.category}</span>
-                    <span className="mx-2">•</span>
-                    <span>{recommended.condition}</span>
                   </div>
 
                   <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
@@ -311,8 +331,6 @@ const Home = () => {
                   <div className="flex items-center text-sm text-gray-500 mt-2">
                     <Tag className="h-4 w-4 mr-1" />
                     <span>{listing.category}</span>
-                    <span className="mx-2">•</span>
-                    <span>{listing.condition}</span>
                   </div>
 
                   <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
@@ -341,6 +359,94 @@ const Home = () => {
           </button>
         </div>
       </div>
+
+      {/* Recent Listings */}
+      <div className="relative py-4">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">History</h2>
+
+        <div className="relative">
+          {/* Left Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("HistoryContainer")
+                .scrollBy({ left: -400, behavior: "smooth" })
+            }
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ◀
+          </button>
+
+          {/* Scrollable Listings Container */}
+          <div
+            id="HistoryContainer"
+            className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
+          >
+            {history.map((history) => (
+              <Link
+                key={history.id}
+                to={`/product/${history.id}`}
+                className="bg-white border border-gray-200 hover:shadow-md transition-shadow w-70 flex-shrink-0 relative"
+              >
+                <div className="relative">
+                  <img
+                    src={history.image}
+                    alt={history.title}
+                    className="w-full h-48 object-cover"
+                  />
+                  <button
+                    onClick={(e) => toggleFavorite(history.id, e)}
+                    className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm"
+                  >
+                    <Heart
+                      className={`h-6 w-6 ${
+                        history.isFavorite
+                          ? "text-red-500 fill-red-500"
+                          : "text-gray-400"
+                      }`}
+                    />
+                  </button>
+                </div>
+
+                <div className="p-4">
+                  <h3 className="text-lg font-medium text-gray-800 leading-tight">
+                    {history.title}
+                  </h3>
+                  <span className="font-semibold text-green-600 block mt-1">
+                    ${history.price}
+                  </span>
+
+                  <div className="flex items-center text-sm text-gray-500 mt-2">
+                    <Tag className="h-4 w-4 mr-1" />
+                    <span>{history.category}</span>
+                  </div>
+
+                  <div className="flex justify-between items-center pt-2 border-t border-gray-100 mt-3">
+                    <span className="text-xs text-gray-500">
+                      {history.datePosted}
+                    </span>
+                    <span className="text-sm font-medium text-gray-700">
+                      {history.seller}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          {/* Right Button - Overlaid on products */}
+          <button
+            onClick={() =>
+              document
+                .getElementById("HistoryContainer")
+                .scrollBy({ left: 400, behavior: "smooth" })
+            }
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 bg-opacity-70 text-white p-4 rounded-full z-20 hidden md:flex items-center justify-center w-12 h-12"
+          >
+            ▶
+          </button>
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/pages/ProductDetail.jsx

@@ -1,50 +1,145 @@
-import { useState, useEffect } from "react";
-import { useParams, Link } from "react-router-dom";
-import { Heart, ArrowLeft, Tag, User, Calendar } from "lucide-react";
+import { useState, useEffect, setErrors } from "react";
+import { useParams, Link, isSession } from "react-router-dom";
+import { Heart, ArrowLeft, Tag, User, Calendar, Star } from "lucide-react";
 
 const ProductDetail = () => {
   const { id } = useParams();
   const [product, setProduct] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState({
+    product: true,
+    reviews: true,
+  });
+  const [error, setError] = useState({
+    product: null,
+    reviews: null,
+  });
   const [isFavorite, setIsFavorite] = useState(false);
   const [showContactForm, setShowContactForm] = useState(false);
-  const [message, setMessage] = useState("");
   const [currentImage, setCurrentImage] = useState(0);
+  const [reviews, setReviews] = useState([]);
+  const [showReviewForm, setShowReviewForm] = useState(false);
 
-  // Fetch product details
+  const [reviewForm, setReviewForm] = useState({
+    rating: 3,
+    comment: "",
+    name: "",
+  });
+
+  // Add this function to handle review input changes
+  const handleReviewInputChange = (e) => {
+    const { id, value } = e.target;
+    setReviewForm((prev) => ({
+      ...prev,
+      [id]: value,
+    }));
+  };
+
+  // Add this function to handle star rating selection
+  const handleRatingChange = (rating) => {
+    setReviewForm((prev) => ({
+      ...prev,
+      rating,
+    }));
+  };
+
+  const handleSubmitReview = async () => {
+    try {
+      // Ensure userId is present
+      if (!userData.userId) {
+        throw new Error("User ID is missing. Unable to update profile.");
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      const response = await fetch(`http://localhost:3030/api/review/add`, {
+        method: "POST", // or "PUT" if your backend supports it
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(userData),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.error || "Failed to update profile");
+      }
+
+      console.log("Profile updated successfully:", result);
+      alert("Profile updated successfully!");
+    } catch (error) {
+      console.error("Error updating profile:", error);
+      setError(
+        error.message || "An error occurred while updating your profile.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Fetch product data
   useEffect(() => {
     const fetchProduct = async () => {
       try {
-        setLoading(true);
+        setLoading((prev) => ({ ...prev, product: true }));
         const response = await fetch(`http://localhost:3030/api/product/${id}`);
 
         if (!response.ok) {
-          throw new Error("Failed to fetch product");
+          throw new Error(`HTTP error! Status: ${response.status}`);
         }
 
         const result = await response.json();
-        console.log(result);
 
         if (result.success) {
           setProduct(result.data);
-          setError(null);
+          setError((prev) => ({ ...prev, product: null }));
         } else {
           throw new Error(result.message || "Error fetching product");
         }
       } catch (error) {
         console.error("Error fetching product:", error);
-        setError(error.message);
-        setProduct(null);
+        setError((prev) => ({ ...prev, product: error.message }));
       } finally {
-        setLoading(false);
+        setLoading((prev) => ({ ...prev, product: false }));
       }
     };
 
     fetchProduct();
   }, [id]);
 
-  // Handle favorite toggle
+  // Fetch reviews data
+  useEffect(() => {
+    const fetchReviews = async () => {
+      try {
+        setLoading((prev) => ({ ...prev, reviews: true }));
+        const response = await fetch(`http://localhost:3030/api/review/${id}`);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          setReviews(result.data || []);
+          setError((prev) => ({ ...prev, reviews: null }));
+        } else {
+          throw new Error(result.message || "Error fetching reviews");
+        }
+      } catch (error) {
+        console.error("Error fetching reviews:", error);
+        setError((prev) => ({ ...prev, reviews: error.message }));
+        setReviews([]);
+      } finally {
+        setLoading((prev) => ({ ...prev, reviews: false }));
+      }
+    };
+
+    fetchReviews();
+  }, [id]);
+
+  // Handle favorite toggle with error handling
   const toggleFavorite = async () => {
     try {
       const response = await fetch(
@@ -61,28 +156,67 @@ const ProductDetail = () => {
         },
       );
 
+      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}`);
     }
   };
 
-  // Handle message submission
+  // Handle form input changes
+  const handleContactInputChange = (e) => {
+    const { id, value } = e.target;
+    setContactForm((prev) => ({
+      ...prev,
+      [id]: value,
+    }));
+  };
+
+  // Handle message submission with improved validation
   const handleSendMessage = (e) => {
     e.preventDefault();
+
+    // Basic validation
+    if (!contactForm.email || !contactForm.phone) {
+      alert("Please fill in all required fields");
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(contactForm.email)) {
+      alert("Please enter a valid email address");
+      return;
+    }
+
     // TODO: Implement actual message sending logic
-    console.log("Message sent:", message);
-    setMessage("");
-    setShowContactForm(false);
-    alert("Message sent to seller!");
+    try {
+      // Mock API call
+      console.log("Message sent:", contactForm);
+      setContactForm({
+        email: "",
+        phone: "",
+        message: "Hi, is this item still available?",
+      });
+      setShowContactForm(false);
+      alert("Message sent to seller!");
+    } catch (error) {
+      alert(`Failed to send message: ${error.message}`);
+    }
   };
 
   // Image navigation
   const nextImage = () => {
-    if (product && product.images) {
+    if (product?.images?.length > 0) {
       setCurrentImage((prev) =>
         prev === product.images.length - 1 ? 0 : prev + 1,
       );
@@ -90,7 +224,7 @@ const ProductDetail = () => {
   };
 
   const prevImage = () => {
-    if (product && product.images) {
+    if (product?.images?.length > 0) {
       setCurrentImage((prev) =>
         prev === 0 ? product.images.length - 1 : prev - 1,
       );
@@ -101,8 +235,22 @@ const ProductDetail = () => {
     setCurrentImage(index);
   };
 
-  // Render loading state
-  if (loading) {
+  // Function to render stars based on rating
+  const renderStars = (rating) => {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      stars.push(
+        <Star
+          key={i}
+          className={`h-4 w-4 ${i <= rating ? "text-yellow-400 fill-yellow-400" : "text-gray-300"}`}
+        />,
+      );
+    }
+    return stars;
+  };
+
+  // Render loading state for the entire page
+  if (loading.product) {
     return (
       <div className="flex justify-center items-center h-screen">
         <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-green-500"></div>
@@ -110,13 +258,30 @@ const ProductDetail = () => {
     );
   }
 
-  // Render error state
-  if (error) {
+  // Render error state for product
+  if (error.product) {
     return (
       <div className="flex justify-center items-center h-screen">
         <div className="text-center">
           <h2 className="text-2xl text-red-500 mb-4">Error Loading Product</h2>
-          <p className="text-gray-600">{error}</p>
+          <p className="text-gray-600">{error.product}</p>
+          <Link
+            to="/"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
+          >
+            Back to Listings
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Safety check for product
+  if (!product) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="text-center">
+          <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
           <Link
             to="/"
             className="mt-4 inline-block bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
@@ -145,12 +310,35 @@ const ProductDetail = () => {
         <div className="md:w-3/5">
           <div className="bg-white border border-gray-200 mb-4 relative">
             {product.images && product.images.length > 0 ? (
-              <img
-                src={product.images[currentImage]}
-                alt={product.Name}
-                className="w-full h-auto object-contain cursor-pointer"
-                onClick={nextImage}
-              />
+              <>
+                <img
+                  src={product.images[currentImage]}
+                  alt={product.Name}
+                  className="w-full h-auto object-contain cursor-pointer"
+                  onClick={nextImage}
+                  onError={(e) => {
+                    e.target.onerror = null;
+                    e.target.src =
+                      "https://via.placeholder.com/400x300?text=Image+Not+Available";
+                  }}
+                />
+                {product.images.length > 1 && (
+                  <div className="absolute inset-x-0 bottom-0 flex justify-between p-2">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        prevImage();
+                      }}
+                      className="bg-white/70 p-1 rounded-full"
+                    >
+                      <ArrowLeft className="h-5 w-5" />
+                    </button>
+                    <div className="text-sm bg-white/70 px-2 py-1 rounded">
+                      {currentImage + 1}/{product.images.length}
+                    </div>
+                  </div>
+                )}
+              </>
             ) : (
               <div className="w-full h-96 flex items-center justify-center bg-gray-200 text-gray-500">
                 No Image Available
@@ -170,6 +358,11 @@ const ProductDetail = () => {
                     src={image}
                     alt={`${product.Name} - view ${index + 1}`}
                     className="w-full h-auto object-cover"
+                    onError={(e) => {
+                      e.target.onerror = null;
+                      e.target.src =
+                        "https://via.placeholder.com/100x100?text=Error";
+                    }}
                   />
                 </div>
               ))}
@@ -181,11 +374,14 @@ const ProductDetail = () => {
           <div className="bg-white border border-gray-200 p-6 mb-6">
             <div className="flex justify-between items-start mb-4">
               <h1 className="text-2xl font-bold text-gray-800">
-                {product.Name}
+                {product.Name || "Unnamed Product"}
               </h1>
               <button
                 onClick={toggleFavorite}
-                className="p-2 hover:bg-gray-100"
+                className="p-2 hover:bg-gray-100 rounded-full"
+                aria-label={
+                  isFavorite ? "Remove from favorites" : "Add to favorites"
+                }
               >
                 <Heart
                   className={`h-6 w-6 ${isFavorite ? "text-red-500 fill-red-500" : "text-gray-400"}`}
@@ -194,22 +390,31 @@ const ProductDetail = () => {
             </div>
 
             <div className="text-2xl font-bold text-green-600 mb-4">
-              ${product.Price}
+              $
+              {typeof product.Price === "number"
+                ? product.Price.toFixed(2)
+                : product.Price}
             </div>
             <div className="flex flex-wrap gap-x-4 gap-y-2 mb-6 text-sm">
-              <div className="flex items-center text-gray-600">
-                <Tag className="h-4 w-4 mr-1" />
-                <span>{product.Category}</span>
-              </div>
+              {product.Category && (
+                <div className="flex items-center text-gray-600">
+                  <Tag className="h-4 w-4 mr-1" />
+                  <span>{product.Category}</span>
+                </div>
+              )}
 
-              <div className="flex items-center text-gray-600">
-                <Calendar className="h-4 w-4 mr-1" />
-                <span>Posted on {product.Date}</span>
-              </div>
+              {product.Date && (
+                <div className="flex items-center text-gray-600">
+                  <Calendar className="h-4 w-4 mr-1" />
+                  <span>Posted on {product.Date}</span>
+                </div>
+              )}
             </div>
 
             <div className="bg-gray-50 p-4 mb-6 border border-gray-200">
-              <p className="text-gray-700">{product.Description}</p>
+              <p className="text-gray-700">
+                {product.Description || "No description available"}
+              </p>
             </div>
 
             <button
@@ -227,50 +432,61 @@ const ProductDetail = () => {
                 <form onSubmit={handleSendMessage}>
                   <div className="mb-3">
                     <label htmlFor="email" className="block text-gray-700 mb-1">
-                      Email
+                      Email <span className="text-red-500">*</span>
                     </label>
                     <input
                       type="email"
                       id="email"
-                      value={message}
-                      onChange={(e) => setMessage(e.target.value)}
+                      value={contactForm.email}
+                      onChange={handleContactInputChange}
                       className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
                       required
                     />
                   </div>
                   <div className="mb-3">
                     <label htmlFor="phone" className="block text-gray-700 mb-1">
-                      Phone Number
+                      Phone Number <span className="text-red-500">*</span>
                     </label>
                     <input
                       type="tel"
                       id="phone"
+                      value={contactForm.phone}
+                      onChange={handleContactInputChange}
                       className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
                       required
                     />
                   </div>
                   <div className="mb-3">
                     <label
-                      htmlFor="contactMessage"
+                      htmlFor="message"
                       className="block text-gray-700 mb-1"
                     >
-                      Message (Optional)
+                      Message
                     </label>
-                    <input
-                      type="text"
-                      id="contactMessage"
-                      value={message}
-                      onChange={(e) => setMessage(e.target.value)}
+                    <textarea
+                      id="message"
+                      value={contactForm.message}
+                      onChange={handleContactInputChange}
                       placeholder="Hi, is this item still available?"
                       className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
+                      rows="3"
                     />
                   </div>
-                  <button
-                    type="submit"
-                    className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
-                  >
-                    Send Contact Info
-                  </button>
+                  <div className="flex justify-between">
+                    <button
+                      type="submit"
+                      className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+                    >
+                      Send Contact Info
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowContactForm(false)}
+                      className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4"
+                    >
+                      Cancel
+                    </button>
+                  </div>
                 </form>
               </div>
             )}
@@ -287,14 +503,21 @@ const ProductDetail = () => {
                     {product.SellerName || "Unknown Seller"}
                   </h3>
                   <p className="text-sm text-gray-500">
-                    Member since {product.SellerName}
+                    Member since {product.SellerJoinDate || "N/A"}
                   </p>
                 </div>
               </div>
               <div className="text-sm text-gray-600">
                 <div>
                   <span className="font-medium">Rating:</span>{" "}
-                  {product.seller ? `${product.seller.rating}/5` : "N/A"}
+                  {product.seller?.rating ? (
+                    <div className="flex items-center">
+                      {renderStars(product.seller.rating)}
+                      <span className="ml-1">{product.seller.rating}/5</span>
+                    </div>
+                  ) : (
+                    "N/A"
+                  )}
                 </div>
               </div>
             </div>
@@ -302,12 +525,158 @@ const ProductDetail = () => {
         </div>
       </div>
 
-      {/* <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-800 mb-4">Description</h2>
+      {/* Reviews Section */}
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-800 mb-4">Reviews</h2>
+
         <div className="bg-white border border-gray-200 p-6">
-          <div className="text-gray-700">{product.Description}</div>
+          {loading.reviews ? (
+            <div className="flex justify-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-green-500"></div>
+            </div>
+          ) : error.reviews ? (
+            <div className="text-red-500 mb-4">
+              Error loading reviews: {error.reviews}
+            </div>
+          ) : reviews.length === 0 ? (
+            <div className="text-gray-500 text-center py-6">
+              No reviews yet for this product
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {reviews.map((review) => (
+                <div
+                  key={review.id || `review-${Math.random()}`}
+                  className="border-b border-gray-200 pb-6 last:border-0 last:pb-0"
+                >
+                  <div className="flex justify-between mb-2">
+                    <div className="font-medium text-gray-800">
+                      {review.ReviewerName || "Anonymous"}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      {review.ReviewDate
+                        ? new Date(review.ReviewDate).toLocaleDateString()
+                        : "Unknown date"}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center mb-2">
+                    {renderStars(review.Rating || 0)}
+                    <span className="ml-2 text-sm text-gray-600">
+                      {review.Rating || 0}/5
+                    </span>
+                  </div>
+
+                  <div className="text-gray-700">
+                    {review.Comment || "No comment provided"}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
-      </div> */}
+
+        <div className="mt-4">
+          <button
+            onClick={() => setShowReviewForm(true)}
+            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded"
+          >
+            Write a Review
+          </button>
+        </div>
+
+        {/* Review Popup Form */}
+        {showReviewForm && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="text-xl font-bold text-gray-800">
+                  Write a Review
+                </h3>
+                <button
+                  onClick={() => setShowReviewForm(false)}
+                  className="text-gray-500 hover:text-gray-700"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <form onSubmit={handleSubmitReview}>
+                <div className="mb-4">
+                  <label htmlFor="name" className="block text-gray-700 mb-1">
+                    Your Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={reviewForm.name}
+                    onChange={handleReviewInputChange}
+                    className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-500"
+                    required
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <label className="block text-gray-700 mb-1">
+                    Rating <span className="text-red-500">*</span>
+                  </label>
+                  <div className="flex items-center">
+                    {[1, 2, 3, 4, 5].map((star) => (
+                      <button
+                        key={star}
+                        type="button"
+                        onClick={() => handleRatingChange(star)}
+                        className="focus:outline-none mr-1"
+                      >
+                        <Star
+                          className={`h-6 w-6 ${
+                            star <= reviewForm.rating
+                              ? "text-yellow-400 fill-yellow-400"
+                              : "text-gray-300"
+                          }`}
+                        />
+                      </button>
+                    ))}
+                    <span className="ml-2 text-gray-600">
+                      {reviewForm.rating}/5
+                    </span>
+                  </div>
+                </div>
+
+                <div className="mb-4">
+                  <label htmlFor="comment" className="block text-gray-700 mb-1">
+                    Your Review <span className="text-red-500">*</span>
+                  </label>
+                  <textarea
+                    id="comment"
+                    value={reviewForm.comment}
+                    onChange={handleReviewInputChange}
+                    className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-500"
+                    rows="4"
+                    required
+                  ></textarea>
+                </div>
+
+                <div className="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={() => setShowReviewForm(false)}
+                    className="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                  >
+                    Submit Review
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

frontend/src/pages/SearchPage.jsx

@@ -96,12 +96,13 @@ const SearchPage = () => {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex flex-col md:flex-row gap-6">
+        {/* Filter sidebar */}
         <div
           className={`
           fixed inset-0 z-50 bg-white transform transition-transform duration-300
           ${isFilterOpen ? "translate-x-0" : "translate-x-full"}
           md:translate-x-0 md:relative md:block md:w-72
-          overflow-y-auto shadow-lg rounded-lg
+          overflow-y-auto shadow-md
         `}
         >
           <div className="md:hidden flex justify-between items-center p-4 border-b">
@@ -110,9 +111,8 @@ const SearchPage = () => {
               <X className="text-gray-600" />
             </button>
           </div>
-
           <div className="p-4 space-y-4">
-            <div className="bg-gray-50 rounded-lg p-3">
+            <div className="bg-gray-50 p-3">
               <h3 className="font-semibold text-gray-700 mb-3">Price Range</h3>
               <div className="space-y-2">
                 <div className="flex space-x-2">
@@ -126,7 +126,7 @@ const SearchPage = () => {
                         min: Number(e.target.value),
                       }))
                     }
-                    className="w-full p-2 border rounded text-gray-700"
+                    className="w-full p-2 border text-gray-700"
                   />
                   <input
                     type="number"
@@ -138,7 +138,7 @@ const SearchPage = () => {
                         max: Number(e.target.value),
                       }))
                     }
-                    className="w-full p-2 border rounded text-gray-700"
+                    className="w-full p-2 border text-gray-700"
                   />
                 </div>
               </div>
@@ -146,13 +146,13 @@ const SearchPage = () => {
             <div className="flex space-x-2">
               <button
                 onClick={applyFilters}
-                className="w-full bg-green-500 text-white p-3 rounded-lg hover:bg-green-600 transition-colors"
+                className="w-full bg-green-500 text-white p-3 hover:bg-green-600 transition-colors"
               >
                 Apply Filters
               </button>
               <button
                 onClick={resetFilters}
-                className="w-full bg-gray-200 text-gray-700 p-3 rounded-lg hover:bg-gray-300 transition-colors"
+                className="w-full bg-gray-200 text-gray-700 p-3 hover:bg-gray-300 transition-colors"
               >
                 Reset
               </button>
@@ -160,6 +160,7 @@ const SearchPage = () => {
           </div>
         </div>
 
+        {/* Main content */}
         <div className="flex-1 mt-4 md:mt-0">
           <h2 className="text-2xl font-bold text-gray-800">
             {filteredProducts.length} Results
@@ -170,18 +171,17 @@ const SearchPage = () => {
               </span>
             )}
           </h2>
-
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
             {filteredProducts.map((listing) => (
               <Link
                 key={listing.id}
                 to={`/product/${listing.id}`}
-                className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow block"
+                className="bg-white border border-gray-200 hover:shadow-md transition-shadow block"
               >
                 <img
                   src={listing.image}
                   alt={listing.title}
-                  className="w-full h-48 object-cover rounded-t-lg"
+                  className="w-full h-48 object-cover"
                 />
                 <div className="p-4">
                   <h3 className="text-lg font-medium text-gray-800">