asdf

frontend/src/components/Applications/ApplicationExecutionModal.js

@@ -21,58 +21,71 @@ const ApplicationExecutionModal = ({ application, propertyDetails, onClose, onCo
   useEffect(() => {
     console.log('ApplicationExecutionModal - Application data:', application);
     console.log('ApplicationExecutionModal - Property details:', propertyDetails);
-  }, [application, propertyDetails]);
+    console.log('ApplicationExecutionModal - Application sections:', application.sections);
+    console.log('ApplicationExecutionModal - Application areas:', application.areas);
+    console.log('ApplicationExecutionModal - Sections state:', sections);
+    console.log('ApplicationExecutionModal - Map center:', mapCenter);
+  }, [application, propertyDetails, sections, mapCenter]);
 
   // Fetch section details for the application
   useEffect(() => {
     const fetchSectionData = async () => {
-      if (!propertyDetails || !application.sections?.length) {
+      if (!application?.id) {
         return;
       }
 
       try {
-        // If we have property details, get the sections from the property
-        // The property should already contain all sections
-        if (propertyDetails.sections) {
-          const applicationSectionIds = application.sections.map(s => s.id);
+        // First try to get detailed plan information from the API
+        const planResponse = await applicationsAPI.getPlan(application.id);
+        const planDetails = planResponse.data.data.plan;
+        
+        console.log('Fetched plan details:', planDetails);
+        console.log('Plan details areas:', planDetails.areas);
+        
+        if (planDetails.areas && planDetails.areas.length > 0) {
+          setSections(planDetails.areas);
+          
+          // Calculate center from section coordinates
+          let totalLat = 0;
+          let totalLng = 0;
+          let pointCount = 0;
+          
+          planDetails.areas.forEach(area => {
+            let polygonData = area.polygonData;
+            if (typeof polygonData === 'string') {
+              try {
+                polygonData = JSON.parse(polygonData);
+              } catch (e) {
+                console.error('Failed to parse polygon data:', e);
+                return;
+              }
+            }
+            
+            if (polygonData?.coordinates?.[0]) {
+              polygonData.coordinates[0].forEach(([lat, lng]) => {
+                totalLat += lat;
+                totalLng += lng;
+                pointCount++;
+              });
+            }
+          });
+          
+          if (pointCount > 0) {
+            const avgLat = totalLat / pointCount;
+            const avgLng = totalLng / pointCount;
+            setMapCenter([avgLat, avgLng]);
+          }
+        }
+        
+        // Fallback: If we have property details, use those sections
+        if ((!planDetails.areas || planDetails.areas.length === 0) && propertyDetails?.sections) {
+          const applicationSectionIds = application.sections?.map(s => s.id) || [];
           const relevantSections = propertyDetails.sections.filter(section => 
             applicationSectionIds.includes(section.id)
           );
           setSections(relevantSections);
-          
-          // Calculate center from section coordinates
-          if (relevantSections.length > 0) {
-            let totalLat = 0;
-            let totalLng = 0;
-            let pointCount = 0;
-            
-            relevantSections.forEach(section => {
-              let polygonData = section.polygonData;
-              if (typeof polygonData === 'string') {
-                try {
-                  polygonData = JSON.parse(polygonData);
-                } catch (e) {
-                  console.error('Failed to parse polygon data:', e);
-                  return;
-                }
-              }
-              
-              if (polygonData?.coordinates?.[0]) {
-                polygonData.coordinates[0].forEach(([lat, lng]) => {
-                  totalLat += lat;
-                  totalLng += lng;
-                  pointCount++;
-                });
-              }
-            });
-            
-            if (pointCount > 0) {
-              const avgLat = totalLat / pointCount;
-              const avgLng = totalLng / pointCount;
-              setMapCenter([avgLat, avgLng]);
-            }
-          }
         }
+        
       } catch (error) {
         console.error('Failed to fetch section data:', error);
       }
@@ -329,7 +342,7 @@ const ApplicationExecutionModal = ({ application, propertyDetails, onClose, onCo
             <PropertyMap
               property={propertyDetails}
               sections={sections}
-              selectedSections={application.sections?.map(s => s.id) || []}
+              selectedSections={sections.map(s => s.id) || []}
               mode="execution"
               gpsTrack={gpsTrack}
               currentLocation={currentLocation}