asdf

frontend/src/components/Applications/ApplicationExecutionModal.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { applicationsAPI } from '../../services/api';
+import { applicationsAPI, propertiesAPI } from '../../services/api';
 import PropertyMap from '../Maps/PropertyMap';
 import toast from 'react-hot-toast';
 
@@ -14,6 +14,72 @@ const ApplicationExecutionModal = ({ application, propertyDetails, onClose, onCo
   const [previousTime, setPreviousTime] = useState(null);
   const [totalDistance, setTotalDistance] = useState(0);
   const [averageSpeed, setAverageSpeed] = useState(0);
+  const [sections, setSections] = useState([]);
+  const [mapCenter, setMapCenter] = useState(null);
+
+  // Debug: Log the application data to understand structure
+  useEffect(() => {
+    console.log('ApplicationExecutionModal - Application data:', application);
+    console.log('ApplicationExecutionModal - Property details:', propertyDetails);
+  }, [application, propertyDetails]);
+
+  // Fetch section details for the application
+  useEffect(() => {
+    const fetchSectionData = async () => {
+      if (!propertyDetails || !application.sections?.length) {
+        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);
+          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);
+      }
+    };
+
+    fetchSectionData();
+  }, [application, propertyDetails]);
 
   // Calculate target speed for liquid applications
   const targetSpeed = useMemo(() => {
@@ -262,10 +328,13 @@ const ApplicationExecutionModal = ({ application, propertyDetails, onClose, onCo
           <div className="h-96 border rounded-lg overflow-hidden">
             <PropertyMap
               property={propertyDetails}
+              sections={sections}
               selectedSections={application.sections?.map(s => s.id) || []}
               mode="execution"
               gpsTrack={gpsTrack}
               currentLocation={currentLocation}
+              center={mapCenter}
+              zoom={mapCenter ? 16 : 15}
             />
           </div>
         </div>