From ac6f6857b020ee497411b0de6be14a2a26e0b027 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Wed, 27 Aug 2025 13:47:54 -0400
Subject: [PATCH] planning fixes

---
 .../Applications/ApplicationPlanModal.js      | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/frontend/src/components/Applications/ApplicationPlanModal.js b/frontend/src/components/Applications/ApplicationPlanModal.js
index d940963..fffc8c2 100644
--- a/frontend/src/components/Applications/ApplicationPlanModal.js
+++ b/frontend/src/components/Applications/ApplicationPlanModal.js
@@ -23,6 +23,47 @@ const ApplicationPlanModal = ({
   const [notes, setNotes] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Calculate map center from property or sections
+  const mapCenter = React.useMemo(() => {
+    // First try to use property coordinates
+    if (selectedPropertyDetails?.latitude && selectedPropertyDetails?.longitude) {
+      return [selectedPropertyDetails.latitude, selectedPropertyDetails.longitude];
+    }
+    
+    // Fall back to calculating center from sections
+    if (selectedPropertyDetails?.sections?.length > 0) {
+      let totalLat = 0;
+      let totalLng = 0;
+      let pointCount = 0;
+      
+      selectedPropertyDetails.sections.forEach(section => {
+        let polygonData = section.polygonData;
+        if (typeof polygonData === 'string') {
+          try {
+            polygonData = JSON.parse(polygonData);
+          } catch (e) {
+            return;
+          }
+        }
+        
+        if (polygonData?.coordinates?.[0]) {
+          polygonData.coordinates[0].forEach(([lat, lng]) => {
+            totalLat += lat;
+            totalLng += lng;
+            pointCount++;
+          });
+        }
+      });
+      
+      if (pointCount > 0) {
+        return [totalLat / pointCount, totalLng / pointCount];
+      }
+    }
+    
+    // Default center
+    return [39.8283, -98.5795];
+  }, [selectedPropertyDetails]);
+
   // Initialize form with editing data if provided
   useEffect(() => {
     if (editingPlan) {
@@ -46,6 +87,13 @@ const ApplicationPlanModal = ({
     }
   };
 
+  // Debug logging
+  React.useEffect(() => {
+    console.log('ApplicationPlanModal - selectedPropertyDetails:', selectedPropertyDetails);
+    console.log('ApplicationPlanModal - mapCenter:', mapCenter);
+    console.log('ApplicationPlanModal - sections:', selectedPropertyDetails?.sections);
+  }, [selectedPropertyDetails, mapCenter]);
+
   // Handle area selection on map
   const handleAreaClick = (area) => {
     setSelectedAreas(prev => {
@@ -336,6 +384,8 @@ const ApplicationPlanModal = ({
               <div className="h-96 border rounded-lg overflow-hidden">
                 {selectedPropertyDetails ? (
                   <PropertyMap
+                    center={mapCenter}
+                    zoom={16}
                     property={selectedPropertyDetails}
                     sections={selectedPropertyDetails.sections || []}
                     selectedSections={selectedAreas}