wefasdf

frontend/src/pages/Products/Products.js

@@ -136,7 +136,35 @@ const Products = () => {
     }
   };
 
-  const ProductCard = ({ product, isUserProduct = false }) => (
+  const handleAddToMyProducts = async (sharedProduct) => {
+    try {
+      // Create a custom product based on the shared product
+      const productData = {
+        productId: sharedProduct.id, // Link to the shared product
+        customName: sharedProduct.name, // Use the shared product's name as default
+        customBrand: sharedProduct.brand,
+        categoryId: null, // Will use the shared product's category
+        customProductType: sharedProduct.productType,
+        customActiveIngredients: sharedProduct.activeIngredients,
+        customDescription: sharedProduct.description,
+        // Set default rate if available
+        customRateAmount: sharedProduct.rates?.[0]?.rateAmount || '',
+        customRateUnit: sharedProduct.rates?.[0]?.rateUnit || (sharedProduct.productType === 'granular' ? 'lbs/1000 sq ft' : 'oz/1000 sq ft'),
+        notes: `Added from shared product: ${sharedProduct.name}`
+      };
+
+      const response = await productsAPI.createUserProduct(productData);
+      toast.success(`"${sharedProduct.name}" added to your products!`);
+      
+      // Refresh the data to show the new custom product
+      fetchData();
+    } catch (error) {
+      console.error('Failed to add product to my products:', error);
+      toast.error('Failed to add product to your collection');
+    }
+  };
+
+  const ProductCard = ({ product, isUserProduct = false, onAddToMyProducts }) => (
     <div className="card">
       <div className="flex justify-between items-start mb-3">
         <div className="flex items-start gap-3">
@@ -229,7 +257,7 @@ const Products = () => {
       {!isUserProduct && (
         <div className="mt-3 pt-3 border-t border-gray-200">
           <button 
-            onClick={() => {/* Handle add to custom products */}}
+            onClick={() => onAddToMyProducts(product)}
             className="text-blue-600 hover:text-blue-700 text-sm font-medium"
           >
             Add to My Products →
@@ -358,7 +386,11 @@ const Products = () => {
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {sharedProducts.map((product) => (
-              <ProductCard key={product.id} product={product} />
+              <ProductCard 
+                key={product.id} 
+                product={product} 
+                onAddToMyProducts={handleAddToMyProducts}
+              />
             ))}
           </div>
         )