From 3fcc8bf98832f4c90d09df5d2b3fa1c5741cad38 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Tue, 2 Sep 2025 13:08:38 -0500
Subject: [PATCH] mowing

---
 frontend/src/components/Maps/PropertyMap.js            | 8 ++++----
 frontend/src/components/Mowing/MowingExecutionModal.js | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Maps/PropertyMap.js b/frontend/src/components/Maps/PropertyMap.js
index 081df01..f7d3565 100644
--- a/frontend/src/components/Maps/PropertyMap.js
+++ b/frontend/src/components/Maps/PropertyMap.js
@@ -533,8 +533,8 @@ const PropertyMap = ({
                 });
                 return (
                   <>
-                    <Polyline positions={points} pathOptions={{ color: '#10B981', weight: 3, dashArray: '8,6', opacity: 0.8 }} />
-                    <div className="absolute top-4 left-4 bg-white rounded shadow px-2 py-1 text-xs text-gray-700">Direction: Circular</div>
+                    <Polyline positions={points} pathOptions={{ color: '#A855F7', weight: 3, dashArray: '8,6', opacity: 0.9 }} />
+                    <div className="absolute top-4 left-4 bg-white rounded shadow px-2 py-1 text-xs text-gray-900 border border-purple-200">Direction: Circular</div>
                   </>
                 );
               }
@@ -570,9 +570,9 @@ const PropertyMap = ({
             return (
               <>
                 {parallelLines.map((line, idx) => (
-                  <Polyline key={`dir-${idx}`} positions={line} pathOptions={{ color: '#10B981', weight: idx === 0 ? 4 : 2, dashArray: '8,6', opacity: 0.9 }} />
+                  <Polyline key={`dir-${idx}`} positions={line} pathOptions={{ color: '#A855F7', weight: idx === 0 ? 4 : 2, dashArray: '8,6', opacity: 0.95 }} />
                 ))}
-                <div className="absolute top-4 left-4 bg-white rounded shadow px-2 py-1 text-xs text-gray-700">Direction: {directionLabelMap[(direction || '').toUpperCase()] || direction}</div>
+                <div className="absolute top-4 left-4 bg-white rounded shadow px-2 py-1 text-xs text-gray-900 border border-purple-200">Direction: {directionLabelMap[(direction || '').toUpperCase()] || direction}</div>
               </>
             );
           })()}
diff --git a/frontend/src/components/Mowing/MowingExecutionModal.js b/frontend/src/components/Mowing/MowingExecutionModal.js
index 1e66cb0..9759f97 100644
--- a/frontend/src/components/Mowing/MowingExecutionModal.js
+++ b/frontend/src/components/Mowing/MowingExecutionModal.js
@@ -151,12 +151,14 @@ const MowingExecutionModal = ({ plan, onClose, onComplete }) => {
           <h3 className="text-xl font-semibold">Execute Mowing</h3>
           <button onClick={onClose} className="text-gray-500 hover:text-gray-700">✕</button>
         </div>
-        <div className="grid grid-cols-4 gap-4 text-sm mb-4">
+        <div className="grid grid-cols-5 gap-4 text-sm mb-2">
           <div><span className="font-medium">Property:</span> {plan.property_name}</div>
           <div><span className="font-medium">Areas:</span> {plan.section_names}</div>
           <div><span className="font-medium">Mower:</span> {plan.equipment_name}</div>
           <div><span className="font-medium">Cut Height:</span> {plan.cut_height_inches}"</div>
+          <div><span className="font-medium">Direction:</span> {plan.direction}</div>
         </div>
+        <div className="text-xs text-gray-600 mb-2">Tip: Follow the dashed purple guideline on the map.</div>
         <div className="h-80 border rounded mb-4 overflow-hidden">
           <PropertyMap
             property={null}
@@ -166,7 +168,7 @@ const MowingExecutionModal = ({ plan, onClose, onComplete }) => {
             gpsTrack={gpsTrack}
             currentLocation={currentLocation}
             center={center || [39.8283, -98.5795]}
-            zoom={center ? 16 : 15}
+            zoom={center ? 19 : 15}
             direction={plan.direction}
             className="h-80 w-full"
           />