Merge pull request #813 from haseebzaki-07/new_branch_5

Add RentProduct details

frontend/src/AgroRentAI/NavigateProducts.jsx

@@ -2,29 +2,41 @@ import React, { useState, useEffect } from 'react';
 import { Search, ShoppingCart, ChevronDown, Star } from 'lucide-react';
 import img1 from "../assets/116.jpg";
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
 
 // Assuming the categories list is the same
 const categories = ['All', 'Farming Technology', 'Farming Equipment', 'Agriculture'];
 
-const ProductCard = ({ product }) => (
-  <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">
-    <img src={product.image} alt={product.name} className="w-full h-48 object-cover" />
-    <div className="p-4">
-      <h3 className="text-lg font-semibold mb-2">{product.name}</h3>
-      <p className="text-gray-600 text-sm mb-2">{product.description}</p>
-      <div className="flex justify-between items-center">
-        <span className="text-lg font-bold text-green-700">${product.price}/day</span>
-        <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors">
-          Rent Now
-        </button>
-      </div>
-      <div className="flex items-center mt-2">
-        <Star className="w-4 h-4 text-yellow-400 fill-current" />
-        <span className="ml-1 text-sm text-gray-600">{product.rating}</span>
+const ProductCard = ({ product }) => {
+  const navigate = useNavigate();
+
+  const handleRentNowClick = () => {
+    navigate(`/RentProductDetails/${product._id}`); // Assuming product.id uniquely identifies the product
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">
+      <img src={product.image} alt={product.name} className="w-full h-48 object-cover" />
+      <div className="p-4">
+        <h3 className="text-lg font-semibold mb-2">{product.name}</h3>
+        <p className="text-gray-600 text-sm mb-2">{product.description}</p>
+        <div className="flex justify-between items-center">
+          <span className="text-lg font-bold text-green-700">${product.price}/day</span>
+          <button
+            onClick={handleRentNowClick}
+            className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
+          >
+            Rent Now
+          </button>
+        </div>
+        <div className="flex items-center mt-2">
+          <Star className="w-4 h-4 text-yellow-400 fill-current" />
+          <span className="ml-1 text-sm text-gray-600">{product.rating}</span>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 const FilterSidebar = ({ selectedCategory, setSelectedCategory, priceRange, setPriceRange }) => (
   <div className="w-64 bg-green-50 p-4 rounded-lg">
@@ -82,11 +94,14 @@ const RentalMarketplace = () => {
   const [filteredProducts, setFilteredProducts] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All');
   const [priceRange, setPriceRange] = useState({ min: 0, max: 100 });
+  const ApiUrl = process.env.NODE_ENV === 'production'
+    ? 'https://agrotech-ai-11j3.onrender.com'
+    : 'http://localhost:8080';
 
   useEffect(() => {
     const fetchProducts = async () => {
       try {
-        const response = await fetch(`https://agrotech-ai-11j3.onrender.com/api/rent-products`);
+        const response = await fetch(`${ApiUrl}/api/rent-products`);
         const data = await response.json();
         setProducts(data);
         setFilteredProducts(data); // Initialize filteredProducts

frontend/src/AgroRentAI/RentProductDetails.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { Star } from 'lucide-react';
+import { useParams } from 'react-router-dom';
+
+const RentProductDetails = () => {
+  const [product, setProduct] = useState(null);
+  const [quantity, setQuantity] = useState(1);
+  const ApiUrl = process.env.NODE_ENV === 'production'
+  ? 'https://agrotech-ai-11j3.onrender.com'
+  : 'http://localhost:8080';
+
+  const {productId} = useParams()
+  // Fetch product details by product ID
+  useEffect(() => {
+    const fetchProductDetails = async () => {
+
+      const response = await fetch(`${ApiUrl}/api/rent-products/${productId}`);
+      const data = await response.json();
+      setProduct(data);
+    };
+
+    fetchProductDetails();
+  }, [productId]);
+
+  const handleAddToCart = () => {
+    // Implement the add-to-cart functionality here
+    console.log(`Added ${quantity} of ${product.name} to cart`);
+  };
+
+  const handleProceedToCheckout = () => {
+    // Redirect to checkout page or handle checkout logic
+    console.log('Proceeding to checkout');
+  };
+
+  if (!product) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-8">
+  {/* Heading */}
+  <h2 className="text-4xl font-extrabold text-green-900 mb-8 ">Product Details</h2>
+
+  <div className="max-w-5xl bg-white rounded-lg shadow-lg p-6 w-full">
+    <div className="flex flex-col lg:flex-row items-center">
+      {/* Product Image */}
+      <div className="lg:w-1/2 flex justify-center items-center p-6">
+        <img
+          src={product.image}
+          alt={product.name}
+          className="rounded-lg w-full max-w-sm object-cover"
+        />
+      </div>
+
+      {/* Product Details */}
+      <div className="lg:w-1/2 p-6">
+        <h1 className="text-3xl font-bold text-green-900 mb-4">{product.name}</h1>
+        <div className="flex items-center mb-4">
+          <Star className="w-5 h-5 text-yellow-400" />
+          <span className="ml-2 text-green-600">{product.rating} / 5</span>
+        </div>
+        <p className="text-lg text-green-700 mb-4">{product.description}</p>
+
+        {/* Category */}
+        <div className="flex space-x-2 mb-4">
+          {product.category.map((cat, index) => (
+            <span key={index} className="inline-block bg-green-200 text-green-700 rounded-full px-3 py-1 text-sm">
+              {cat}
+            </span>
+          ))}
+        </div>
+
+        {/* Price */}
+        <p className="text-2xl font-semibold text-green-800 mb-4">${product.price} / day</p>
+
+        {/* Quantity Selector */}
+        <div className="flex items-center mb-6">
+          <label className="text-green-700 mr-4">Quantity:</label>
+          <input
+            type="number"
+            value={quantity}
+            onChange={(e) => setQuantity(Math.max(1, e.target.value))}
+            className="w-16 text-center border border-green-300 rounded-md"
+          />
+        </div>
+
+        {/* Add to Cart and Checkout Buttons */}
+        <div className="flex space-x-4">
+          <button
+            onClick={handleAddToCart}
+            className="bg-green-600 text-white px-6 py-3 rounded-md hover:bg-green-500 transition-colors duration-300"
+          >
+            Add to Cart
+          </button>
+          <button
+            onClick={handleProceedToCheckout}
+            className="bg-green-800 text-white px-6 py-3 rounded-md hover:bg-green-700 transition-colors duration-300"
+          >
+            Proceed to Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+  );
+};
+
+export default RentProductDetails;

frontend/src/MainContent.jsx

@@ -46,7 +46,11 @@ import ElectricalElectronicsShops from './components/ElectricalElectronicsShops'
 import HeroSectionRent from './AgroRentAI/HeroSectionRent';
 import NavigateProducts from './AgroRentAI/NavigateProducts';
 import RentUserDashboard from './AgroRentAI/RentUserDashboard';
+
+import RentProductDetails from './AgroRentAI/RentProductDetails';
+
 import RentAdminDashboard from './AgroRentAI/RentAdminDashboard';
+
 //AgroShopAI
 import HomeShop from './AgroShopAI/pages/HomeShop';
 import ShopFooter from './AgroShopAI/components/ShopFooter';
@@ -145,8 +149,11 @@ const MainContent = () => {
                 <Route path="/HeroSectionRent" element={<HeroSectionRent />} />
                 <Route path="/NavigateProducts" element={<NavigateProducts />} />
                 <Route path="/AgriProducts" element={<AgriProductListing/>} />
-                <Route path="/RentUserDashboard" element={<RentUserDashboard/>} />
+
+                <Route path="/RentProductDetails/:productId" element={<RentProductDetails/>} />
+
                 <Route path="/RentAdminDashboard" element={<RentAdminDashboard/>} />
+
                 <Route path="*" element={<NotFound />} />
                 {/* AgroShopAI Routes */}
                 <Route path="/AgroShop" element={<HomeShop/>} />