edit fixes

frontend/src/pages/Products/Products.js

@@ -583,26 +583,68 @@ const EditProductModal = ({ product, onSubmit, onCancel, sharedProducts, categor
     customName: product.customName || '',
     customRateAmount: product.customRateAmount || '',
     customRateUnit: product.customRateUnit || 'lbs/1000 sq ft',
-    notes: product.notes || ''
+    notes: product.notes || '',
+    // Add fields for full editing capability
+    brand: product.brand || '',
+    categoryId: product.categoryId || '',
+    productType: product.productType || '',
+    activeIngredients: product.activeIngredients || '',
+    description: product.description || ''
   });
 
+  const [editMode, setEditMode] = useState('basic'); // 'basic' or 'advanced'
+
   const handleSubmit = (e) => {
     e.preventDefault();
     
-    if (!formData.productId && !formData.customName) {
-      toast.error('Please select a base product or enter a custom name');
-      return;
+    if (editMode === 'basic') {
+      // Basic mode validation
+      if (!formData.productId && !formData.customName) {
+        toast.error('Please select a base product or enter a custom name');
+        return;
+      }
+
+      const submitData = {
+        productId: formData.productId ? parseInt(formData.productId) : null,
+        customName: formData.customName || null,
+        customRateAmount: formData.customRateAmount ? parseFloat(formData.customRateAmount) : null,
+        customRateUnit: formData.customRateUnit || null,
+        notes: formData.notes || null
+      };
+
+      onSubmit(submitData);
+    } else {
+      // Advanced mode validation and submission
+      if (!formData.customName) {
+        toast.error('Product name is required');
+        return;
+      }
+      if (!formData.categoryId) {
+        toast.error('Category is required');
+        return;
+      }
+      if (!formData.productType) {
+        toast.error('Product type is required');
+        return;
+      }
+
+      const submitData = {
+        productId: formData.productId ? parseInt(formData.productId) : null,
+        customName: formData.customName,
+        customRateAmount: formData.customRateAmount ? parseFloat(formData.customRateAmount) : null,
+        customRateUnit: formData.customRateUnit || null,
+        notes: formData.notes || null,
+        // Additional fields for advanced mode
+        brand: formData.brand || null,
+        categoryId: formData.categoryId ? parseInt(formData.categoryId) : null,
+        productType: formData.productType || null,
+        activeIngredients: formData.activeIngredients || null,
+        description: formData.description || null,
+        isAdvancedEdit: true // Flag to indicate this is an advanced edit
+      };
+
+      onSubmit(submitData);
     }
-
-    const submitData = {
-      productId: formData.productId ? parseInt(formData.productId) : null,
-      customName: formData.customName || null,
-      customRateAmount: formData.customRateAmount ? parseFloat(formData.customRateAmount) : null,
-      customRateUnit: formData.customRateUnit || null,
-      notes: formData.notes || null
-    };
-
-    onSubmit(submitData);
   };
 
   return (
@@ -610,73 +652,228 @@ const EditProductModal = ({ product, onSubmit, onCancel, sharedProducts, categor
       <div className="bg-white rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto">
         <h3 className="text-lg font-semibold mb-4">Edit Product</h3>
         
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="label">Base Product (Optional)</label>
-            <select
-              className="input"
-              value={formData.productId}
-              onChange={(e) => setFormData({ ...formData, productId: e.target.value })}
+        {/* Edit Mode Toggle */}
+        <div className="mb-4">
+          <div className="flex bg-gray-100 rounded-lg p-1">
+            <button
+              type="button"
+              onClick={() => setEditMode('basic')}
+              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                editMode === 'basic'
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
             >
-              <option value="">Select a base product...</option>
-              {sharedProducts.map((sharedProduct) => (
-                <option key={sharedProduct.id} value={sharedProduct.id}>
-                  {sharedProduct.name} {sharedProduct.brand && `- ${sharedProduct.brand}`}
-                </option>
-              ))}
-            </select>
+              Basic Edit
+            </button>
+            <button
+              type="button"
+              onClick={() => setEditMode('advanced')}
+              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                editMode === 'advanced'
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              Advanced Edit
+            </button>
           </div>
+        </div>
 
-          <div>
-            <label className="label">Custom Name</label>
-            <input
-              type="text"
-              className="input"
-              value={formData.customName}
-              onChange={(e) => setFormData({ ...formData, customName: e.target.value })}
-              placeholder="e.g., My 24-0-11 Blend, Custom Herbicide Mix"
-            />
-          </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {editMode === 'basic' ? (
+            // Basic editing - existing functionality
+            <>
+              <div>
+                <label className="label">Base Product (Optional)</label>
+                <select
+                  className="input"
+                  value={formData.productId}
+                  onChange={(e) => setFormData({ ...formData, productId: e.target.value })}
+                >
+                  <option value="">Select a base product...</option>
+                  {sharedProducts.map((sharedProduct) => (
+                    <option key={sharedProduct.id} value={sharedProduct.id}>
+                      {sharedProduct.name} {sharedProduct.brand && `- ${sharedProduct.brand}`}
+                    </option>
+                  ))}
+                </select>
+              </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="label">Application Rate</label>
-              <input
-                type="number"
-                step="0.01"
-                className="input"
-                value={formData.customRateAmount}
-                onChange={(e) => setFormData({ ...formData, customRateAmount: e.target.value })}
-                placeholder="2.5"
-              />
-            </div>
-            <div>
-              <label className="label">Rate Unit</label>
-              <select
-                className="input"
-                value={formData.customRateUnit}
-                onChange={(e) => setFormData({ ...formData, customRateUnit: e.target.value })}
-              >
-                <option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
-                <option value="oz/1000 sq ft">oz/1000 sq ft</option>
-                <option value="gal/acre">gal/acre</option>
-                <option value="fl oz/1000 sq ft">fl oz/1000 sq ft</option>
-                <option value="ml/1000 sq ft">ml/1000 sq ft</option>
-                <option value="tbsp/1000 sq ft">tbsp/1000 sq ft</option>
-              </select>
-            </div>
-          </div>
+              <div>
+                <label className="label">Custom Name</label>
+                <input
+                  type="text"
+                  className="input"
+                  value={formData.customName}
+                  onChange={(e) => setFormData({ ...formData, customName: e.target.value })}
+                  placeholder="e.g., My 24-0-11 Blend, Custom Herbicide Mix"
+                />
+              </div>
 
-          <div>
-            <label className="label">Notes</label>
-            <textarea
-              className="input"
-              rows="3"
-              value={formData.notes}
-              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
-              placeholder="Special mixing instructions, storage notes, etc."
-            />
-          </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">Application Rate</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    className="input"
+                    value={formData.customRateAmount}
+                    onChange={(e) => setFormData({ ...formData, customRateAmount: e.target.value })}
+                    placeholder="2.5"
+                  />
+                </div>
+                <div>
+                  <label className="label">Rate Unit</label>
+                  <select
+                    className="input"
+                    value={formData.customRateUnit}
+                    onChange={(e) => setFormData({ ...formData, customRateUnit: e.target.value })}
+                  >
+                    <option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
+                    <option value="oz/1000 sq ft">oz/1000 sq ft</option>
+                    <option value="gal/acre">gal/acre</option>
+                    <option value="fl oz/1000 sq ft">fl oz/1000 sq ft</option>
+                    <option value="ml/1000 sq ft">ml/1000 sq ft</option>
+                    <option value="tbsp/1000 sq ft">tbsp/1000 sq ft</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="label">Notes</label>
+                <textarea
+                  className="input"
+                  rows="3"
+                  value={formData.notes}
+                  onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                  placeholder="Special mixing instructions, storage notes, etc."
+                />
+              </div>
+            </>
+          ) : (
+            // Advanced editing - all fields
+            <>
+              <div>
+                <label className="label">Product Name *</label>
+                <input
+                  type="text"
+                  className="input"
+                  value={formData.customName}
+                  onChange={(e) => setFormData({ ...formData, customName: e.target.value })}
+                  placeholder="Product name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="label">Brand</label>
+                <input
+                  type="text"
+                  className="input"
+                  value={formData.brand}
+                  onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
+                  placeholder="Manufacturer or brand name"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">Category *</label>
+                  <select
+                    className="input"
+                    value={formData.categoryId}
+                    onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
+                    required
+                  >
+                    <option value="">Select category...</option>
+                    {categories.map((category) => (
+                      <option key={category.id} value={category.id}>
+                        {category.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="label">Product Type *</label>
+                  <select
+                    className="input"
+                    value={formData.productType}
+                    onChange={(e) => setFormData({ ...formData, productType: e.target.value })}
+                    required
+                  >
+                    <option value="">Select type...</option>
+                    <option value="liquid">Liquid</option>
+                    <option value="granular">Granular</option>
+                    <option value="seed">Seed</option>
+                    <option value="powder">Powder</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="label">Active Ingredients</label>
+                <input
+                  type="text"
+                  className="input"
+                  value={formData.activeIngredients}
+                  onChange={(e) => setFormData({ ...formData, activeIngredients: e.target.value })}
+                  placeholder="e.g., 2,4-D 38.3%, Dicamba 2.77%"
+                />
+              </div>
+
+              <div>
+                <label className="label">Description</label>
+                <textarea
+                  className="input"
+                  rows="3"
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Product description and usage information"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">Default Application Rate</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    className="input"
+                    value={formData.customRateAmount}
+                    onChange={(e) => setFormData({ ...formData, customRateAmount: e.target.value })}
+                    placeholder="2.5"
+                  />
+                </div>
+                <div>
+                  <label className="label">Rate Unit</label>
+                  <select
+                    className="input"
+                    value={formData.customRateUnit}
+                    onChange={(e) => setFormData({ ...formData, customRateUnit: e.target.value })}
+                  >
+                    <option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
+                    <option value="oz/1000 sq ft">oz/1000 sq ft</option>
+                    <option value="gal/acre">gal/acre</option>
+                    <option value="fl oz/1000 sq ft">fl oz/1000 sq ft</option>
+                    <option value="ml/1000 sq ft">ml/1000 sq ft</option>
+                    <option value="tbsp/1000 sq ft">tbsp/1000 sq ft</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="label">Notes</label>
+                <textarea
+                  className="input"
+                  rows="3"
+                  value={formData.notes}
+                  onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                  placeholder="Special mixing instructions, storage notes, etc."
+                />
+              </div>
+            </>
+          )}
 
           <div className="flex gap-3 pt-4">
             <button type="submit" className="btn-primary flex-1">