From 1bd5a76cd81bfba9bfc942a44d208cb8a13c88a9 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Mon, 25 Aug 2025 14:10:28 -0400
Subject: [PATCH] uha

---
 .../src/pages/Applications/Applications.js    | 133 +++++++++---------
 1 file changed, 70 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/Applications/Applications.js b/frontend/src/pages/Applications/Applications.js
index 48d7e7d..aa365f9 100644
--- a/frontend/src/pages/Applications/Applications.js
+++ b/frontend/src/pages/Applications/Applications.js
@@ -265,6 +265,9 @@ const Applications = () => {
           selectedPropertyDetails={selectedPropertyDetails}
           onPropertySelect={fetchPropertyDetails}
           editingPlan={editingPlan}
+          spreaderRecommendation={spreaderRecommendation}
+          loadingRecommendation={loadingRecommendation}
+          loadSpreaderRecommendation={loadSpreaderRecommendation}
           onSubmit={async (planData) => {
             try {
               if (editingPlan) {
@@ -371,68 +374,6 @@ const Applications = () => {
       )}
     </div>
   );
-};
-
-// Application Planning Modal Component
-const ApplicationPlanModal = ({ 
-  onClose, 
-  onSubmit, 
-  properties, 
-  products, 
-  equipment, 
-  nozzles, 
-  selectedPropertyDetails,
-  onPropertySelect,
-  editingPlan 
-}) => {
-  const [loadingProperty, setLoadingProperty] = useState(false);
-  
-  const [planData, setPlanData] = useState({
-    propertyId: '',
-    selectedAreas: [],
-    productId: '',
-    selectedProduct: null,
-    applicationType: '', // 'liquid' or 'granular'
-    equipmentId: '',
-    nozzleId: '',
-    plannedDate: '',
-    notes: ''
-  });
-
-  // Initialize form with editing data
-  useEffect(() => {
-    if (editingPlan && products.length > 0) {
-      const propertyId = editingPlan.section?.propertyId || editingPlan.property?.id;
-      
-      // Find the product from the plans products array
-      const planProduct = editingPlan.products?.[0];
-      let selectedProduct = null;
-      if (planProduct) {
-        if (planProduct.productId) {
-          selectedProduct = products.find(p => p.uniqueId === `shared_${planProduct.productId}`);
-        } else if (planProduct.userProductId) {
-          selectedProduct = products.find(p => p.uniqueId === `user_${planProduct.userProductId}`);
-        }
-      }
-
-      setPlanData({
-        propertyId: propertyId?.toString() || '',
-        selectedAreas: [editingPlan.section?.id],
-        productId: selectedProduct?.uniqueId || '',
-        selectedProduct: selectedProduct,
-        applicationType: planProduct?.applicationType || '',
-        equipmentId: editingPlan.equipment?.id?.toString() || '',
-        nozzleId: editingPlan.nozzle?.id?.toString() || '',
-        plannedDate: editingPlan.plannedDate ? new Date(editingPlan.plannedDate).toISOString().split('T')[0] : '',
-        notes: editingPlan.notes || ''
-      });
-
-      // Only fetch property details if we don't already have them
-      if (propertyId && (!selectedPropertyDetails || selectedPropertyDetails.id !== propertyId)) {
-        onPropertySelect(propertyId);
-      }
-    }
-  }, [editingPlan, products]);
 
   // Load spreader recommendations when granular product and spreader are selected
   const loadSpreaderRecommendation = async (product, equipmentId, selectedAreas) => {
@@ -531,11 +472,76 @@ const ApplicationPlanModal = ({
       setLoadingRecommendation(false);
     }
   };
+};
+
+// Application Planning Modal Component
+const ApplicationPlanModal = ({ 
+  onClose, 
+  onSubmit, 
+  properties, 
+  products, 
+  equipment, 
+  nozzles, 
+  selectedPropertyDetails,
+  onPropertySelect,
+  editingPlan,
+  spreaderRecommendation,
+  loadingRecommendation,
+  loadSpreaderRecommendation 
+}) => {
+  const [loadingProperty, setLoadingProperty] = useState(false);
+  
+  const [planData, setPlanData] = useState({
+    propertyId: '',
+    selectedAreas: [],
+    productId: '',
+    selectedProduct: null,
+    applicationType: '', // 'liquid' or 'granular'
+    equipmentId: '',
+    nozzleId: '',
+    plannedDate: '',
+    notes: ''
+  });
+
+  // Initialize form with editing data
+  useEffect(() => {
+    if (editingPlan && products.length > 0) {
+      const propertyId = editingPlan.section?.propertyId || editingPlan.property?.id;
+      
+      // Find the product from the plans products array
+      const planProduct = editingPlan.products?.[0];
+      let selectedProduct = null;
+      if (planProduct) {
+        if (planProduct.productId) {
+          selectedProduct = products.find(p => p.uniqueId === `shared_${planProduct.productId}`);
+        } else if (planProduct.userProductId) {
+          selectedProduct = products.find(p => p.uniqueId === `user_${planProduct.userProductId}`);
+        }
+      }
+
+      setPlanData({
+        propertyId: propertyId?.toString() || '',
+        selectedAreas: [editingPlan.section?.id],
+        productId: selectedProduct?.uniqueId || '',
+        selectedProduct: selectedProduct,
+        applicationType: planProduct?.applicationType || '',
+        equipmentId: editingPlan.equipment?.id?.toString() || '',
+        nozzleId: editingPlan.nozzle?.id?.toString() || '',
+        plannedDate: editingPlan.plannedDate ? new Date(editingPlan.plannedDate).toISOString().split('T')[0] : '',
+        notes: editingPlan.notes || ''
+      });
+
+      // Only fetch property details if we don't already have them
+      if (propertyId && (!selectedPropertyDetails || selectedPropertyDetails.id !== propertyId)) {
+        onPropertySelect(propertyId);
+      }
+    }
+  }, [editingPlan, products]);
 
   // Load spreader recommendation when relevant fields change
   useEffect(() => {
     loadSpreaderRecommendation(planData.selectedProduct, planData.equipmentId, planData.selectedAreas);
-  }, [planData.selectedProduct, planData.equipmentId, planData.selectedAreas, selectedPropertyDetails, equipment]);
+  }, [planData.selectedProduct, planData.equipmentId, planData.selectedAreas, selectedPropertyDetails, equipment, loadSpreaderRecommendation]);
 
   const handlePropertyChange = async (propertyId) => {
     setPlanData({ ...planData, propertyId, selectedAreas: [] });
@@ -545,6 +551,7 @@ const ApplicationPlanModal = ({
       setLoadingProperty(false);
     }
   };
+
   
   // Filter equipment based on application type
   const availableEquipment = equipment.filter(eq => {