asdfafsd

frontend/src/components/Applications/ApplicationPlanModal.js

@@ -27,16 +27,9 @@ const ApplicationPlanModal = ({
   const [showSpreaderSettingsForm, setShowSpreaderSettingsForm] = useState(false);
   const [currentProductForSettings, setCurrentProductForSettings] = useState(null);
   const [spreaderFormData, setSpreaderFormData] = useState({
-    setting1: '',
-    setting2: '',
-    setting3: '',
-    setting4: '',
-    setting5: '',
-    setting6: '',
-    setting7: '',
-    setting8: '',
-    setting9: '',
-    setting10: ''
+    setting: '',
+    rateDescription: '',
+    notes: ''
   });
 
   // Calculate map center from property or sections
@@ -277,20 +270,18 @@ const ApplicationPlanModal = ({
   // Save spreader settings
   const saveSpreaderSettings = async () => {
     try {
+      if (!spreaderFormData.setting) {
+        toast.error('Please enter a setting value');
+        return;
+      }
+
       const payload = {
         productId: currentProductForSettings.isShared ? currentProductForSettings.id : null,
         userProductId: !currentProductForSettings.isShared ? currentProductForSettings.id : null,
         equipmentId: parseInt(selectedEquipmentId),
-        setting1: parseFloat(spreaderFormData.setting1) || null,
-        setting2: parseFloat(spreaderFormData.setting2) || null,
-        setting3: parseFloat(spreaderFormData.setting3) || null,
-        setting4: parseFloat(spreaderFormData.setting4) || null,
-        setting5: parseFloat(spreaderFormData.setting5) || null,
-        setting6: parseFloat(spreaderFormData.setting6) || null,
-        setting7: parseFloat(spreaderFormData.setting7) || null,
-        setting8: parseFloat(spreaderFormData.setting8) || null,
-        setting9: parseFloat(spreaderFormData.setting9) || null,
-        setting10: parseFloat(spreaderFormData.setting10) || null
+        setting1: parseFloat(spreaderFormData.setting),
+        rateDescription: spreaderFormData.rateDescription || null,
+        notes: spreaderFormData.notes || null
       };
 
       const response = await fetch('/api/product-spreader-settings', {
@@ -303,12 +294,13 @@ const ApplicationPlanModal = ({
       });
 
       if (response.ok) {
-        toast.success('Spreader settings saved successfully');
+        toast.success('Spreader setting added successfully');
         setShowSpreaderSettingsForm(false);
         setCurrentProductForSettings(null);
         setSpreaderFormData({
-          setting1: '', setting2: '', setting3: '', setting4: '', setting5: '',
-          setting6: '', setting7: '', setting8: '', setting9: '', setting10: ''
+          setting: '',
+          rateDescription: '',
+          notes: ''
         });
       } else {
         throw new Error('Failed to save spreader settings');
@@ -866,32 +858,66 @@ const ApplicationPlanModal = ({
       {/* Spreader Settings Form Modal */}
       {showSpreaderSettingsForm && currentProductForSettings && (
         <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center" style={{zIndex: 9999}}>
-          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
-            <h3 className="text-lg font-semibold mb-4">Add Spreader Settings</h3>
-            <p className="text-sm text-gray-600 mb-4">
-              No spreader settings found for "{currentProductForSettings.name}" with the selected equipment. 
-              Please add the spreader settings for accurate calculations.
-            </p>
+          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
+            <h3 className="text-lg font-semibold mb-4">Add New Setting</h3>
             
-            <div className="grid grid-cols-2 gap-4 mb-6">
-              {Array.from({ length: 10 }, (_, i) => i + 1).map(num => (
-                <div key={num}>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Setting {num}
-                  </label>
-                  <input
-                    type="number"
-                    step="0.1"
-                    value={spreaderFormData[`setting${num}`]}
-                    onChange={(e) => setSpreaderFormData(prev => ({
-                      ...prev,
-                      [`setting${num}`]: e.target.value
-                    }))}
-                    className="w-full border border-gray-300 rounded px-3 py-2"
-                    placeholder={`Setting ${num} value`}
-                  />
-                </div>
-              ))}
+            {/* Equipment Dropdown */}
+            <div className="mb-4">
+              <select
+                disabled
+                value={selectedEquipmentId}
+                className="w-full border border-gray-300 rounded px-3 py-2 bg-gray-100"
+              >
+                {equipment
+                  .filter(eq => eq.id === parseInt(selectedEquipmentId))
+                  .map(eq => (
+                    <option key={eq.id} value={eq.id}>
+                      {eq.customName} ({eq.categoryName?.toLowerCase()})
+                    </option>
+                  ))}
+              </select>
+            </div>
+            
+            {/* Setting Input */}
+            <div className="mb-4">
+              <input
+                type="text"
+                value={spreaderFormData.setting}
+                onChange={(e) => setSpreaderFormData(prev => ({
+                  ...prev,
+                  setting: e.target.value
+                }))}
+                className="w-full border border-green-400 rounded px-3 py-2 focus:outline-none focus:border-green-500"
+                placeholder="Setting (e.g., #14, 2.5)"
+              />
+            </div>
+            
+            {/* Rate Description */}
+            <div className="mb-4">
+              <input
+                type="text"
+                value={spreaderFormData.rateDescription}
+                onChange={(e) => setSpreaderFormData(prev => ({
+                  ...prev,
+                  rateDescription: e.target.value
+                }))}
+                className="w-full border border-gray-300 rounded px-3 py-2"
+                placeholder="Rate description (optional)"
+              />
+            </div>
+            
+            {/* Notes */}
+            <div className="mb-6">
+              <textarea
+                rows={3}
+                value={spreaderFormData.notes}
+                onChange={(e) => setSpreaderFormData(prev => ({
+                  ...prev,
+                  notes: e.target.value
+                }))}
+                className="w-full border border-gray-300 rounded px-3 py-2"
+                placeholder="Notes (optional)"
+              />
             </div>
             
             <div className="flex justify-end gap-3">
@@ -901,20 +927,21 @@ const ApplicationPlanModal = ({
                   setShowSpreaderSettingsForm(false);
                   setCurrentProductForSettings(null);
                   setSpreaderFormData({
-                    setting1: '', setting2: '', setting3: '', setting4: '', setting5: '',
-                    setting6: '', setting7: '', setting8: '', setting9: '', setting10: ''
+                    setting: '',
+                    rateDescription: '',
+                    notes: ''
                   });
                 }}
                 className="px-4 py-2 text-gray-600 hover:text-gray-800"
               >
-                Skip for Now
+                Cancel
               </button>
               <button
                 type="button"
                 onClick={saveSpreaderSettings}
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
               >
-                Save Settings
+                Add Setting
               </button>
             </div>
           </div>