perform applications

frontend/src/components/Maps/PropertyMap.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react';
-import { MapContainer, TileLayer, Polygon, Marker, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Polygon, Marker, Polyline, useMapEvents } from 'react-leaflet';
 import { Icon } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
@@ -11,6 +11,28 @@ Icon.Default.mergeOptions({
   shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
 });
 
+// Custom GPS tracking icons
+const currentLocationIcon = new Icon({
+  iconUrl: 'data:image/svg+xml;base64,' + btoa(`
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+      <circle cx="10" cy="10" r="8" fill="#3B82F6" stroke="white" stroke-width="2"/>
+      <circle cx="10" cy="10" r="4" fill="white"/>
+    </svg>
+  `),
+  iconSize: [20, 20],
+  iconAnchor: [10, 10],
+});
+
+const trackPointIcon = new Icon({
+  iconUrl: 'data:image/svg+xml;base64,' + btoa(`
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
+      <circle cx="3" cy="3" r="2" fill="#10B981"/>
+    </svg>
+  `),
+  iconSize: [6, 6],
+  iconAnchor: [3, 3],
+});
+
 // Custom component to handle map clicks for drawing polygons
 const DrawingHandler = ({ isDrawing, onPointAdd, onDrawingComplete }) => {
   useMapEvents({
@@ -64,7 +86,12 @@ const PropertyMap = ({
   onSectionClick,
   selectedSections = [],
   editable = false,
-  className = "h-96 w-full"
+  className = "h-96 w-full",
+  // GPS tracking props
+  mode = "view", // "view", "edit", "execution"
+  gpsTrack = [],
+  currentLocation = null,
+  showTrackPoints = true
 }) => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentPolygon, setCurrentPolygon] = useState([]);
@@ -390,6 +417,41 @@ const PropertyMap = ({
           );
         })}
 
+        {/* GPS Tracking Elements */}
+        {mode === "execution" && (
+          <>
+            {/* GPS Track Polyline */}
+            {gpsTrack.length > 1 && (
+              <Polyline
+                positions={gpsTrack.map(point => [point.lat, point.lng])}
+                pathOptions={{
+                  color: '#10B981',
+                  weight: 4,
+                  opacity: 0.8,
+                }}
+              />
+            )}
+            
+            {/* Track Points (breadcrumbs) */}
+            {showTrackPoints && gpsTrack.map((point, index) => (
+              index % 10 === 0 && ( // Show every 10th point to avoid clutter
+                <Marker
+                  key={`track-${index}`}
+                  position={[point.lat, point.lng]}
+                  icon={trackPointIcon}
+                />
+              )
+            ))}
+            
+            {/* Current Location */}
+            {currentLocation && (
+              <Marker
+                position={[currentLocation.lat, currentLocation.lng]}
+                icon={currentLocationIcon}
+              />
+            )}
+          </>
+        )}
 
         {/* Current polygon being drawn */}
         {currentPolygon.length > 0 && (
@@ -440,8 +502,25 @@ const PropertyMap = ({
         </div>
       )}
       
+      {/* GPS Tracking stats */}
+      {mode === "execution" && gpsTrack.length > 0 && (
+        <div className="absolute bottom-4 left-4 bg-white rounded-lg shadow-lg p-3">
+          <p className="text-sm font-medium text-gray-700">
+            GPS Tracking Active
+          </p>
+          <p className="text-xs text-gray-600">
+            Track Points: {gpsTrack.length}
+          </p>
+          {currentLocation && (
+            <p className="text-xs text-gray-600">
+              Accuracy: ±{Math.round(currentLocation.accuracy || 0)}m
+            </p>
+          )}
+        </div>
+      )}
+
       {/* Section stats */}
-      {sections.length > 0 && !isDrawing && (
+      {sections.length > 0 && !isDrawing && mode !== "execution" && (
         <div className="absolute bottom-4 left-4 bg-white rounded-lg shadow-lg p-3">
           <p className="text-sm font-medium text-gray-700">
             {sections.length} Section{sections.length !== 1 ? 's' : ''}

frontend/src/pages/Applications/Applications.js

@@ -6,7 +6,8 @@ import {
   WrenchScrewdriverIcon,
   CalculatorIcon,
   PencilIcon,
-  TrashIcon
+  TrashIcon,
+  PlayIcon
 } from '@heroicons/react/24/outline';
 import { propertiesAPI, productsAPI, equipmentAPI, applicationsAPI, nozzlesAPI } from '../../services/api';
 import LoadingSpinner from '../../components/UI/LoadingSpinner';
@@ -26,6 +27,14 @@ const Applications = () => {
   const [propertyCache, setPropertyCache] = useState({});
   const [spreaderRecommendation, setSpreaderRecommendation] = useState(null);
   const [loadingRecommendation, setLoadingRecommendation] = useState(false);
+  
+  // Application execution state
+  const [executingApplication, setExecutingApplication] = useState(null);
+  const [showExecutionModal, setShowExecutionModal] = useState(false);
+  const [isTracking, setIsTracking] = useState(false);
+  const [gpsTrack, setGpsTrack] = useState([]);
+  const [currentSpeed, setCurrentSpeed] = useState(0);
+  const [currentLocation, setCurrentLocation] = useState(null);
 
   useEffect(() => {
     fetchApplications();
@@ -129,6 +138,23 @@ const Applications = () => {
     }
   };
 
+  const handleExecuteApplication = async (application) => {
+    try {
+      // Set the executing application and show the modal
+      setExecutingApplication(application);
+      
+      // Also fetch the property details if we don't have them
+      if (!selectedPropertyDetails || selectedPropertyDetails.id !== application.property?.id) {
+        await fetchPropertyDetails(application.property?.id || application.section?.propertyId);
+      }
+      
+      setShowExecutionModal(true);
+    } catch (error) {
+      console.error('Failed to start application execution:', error);
+      toast.error('Failed to start application execution');
+    }
+  };
+
   if (loading) {
     return (
       <div className="p-6">
@@ -364,6 +390,15 @@ const Applications = () => {
                     Created {new Date(application.createdAt).toLocaleDateString()}
                   </p>
                   <div className="flex gap-2 mt-2">
+                    {application.status === 'planned' && (
+                      <button
+                        onClick={() => handleExecuteApplication(application)}
+                        className="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded"
+                        title="Execute application"
+                      >
+                        <PlayIcon className="h-4 w-4" />
+                      </button>
+                    )}
                     <button
                       onClick={() => handleEditPlan(application.id)}
                       className="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
@@ -1366,6 +1401,367 @@ const ApplicationPlanModal = ({
               </div>
             </div>
           )}
+          
+          {/* Application Execution Modal */}
+          {showExecutionModal && executingApplication && (
+            <ApplicationExecutionModal
+              application={executingApplication}
+              propertyDetails={selectedPropertyDetails}
+              onClose={() => {
+                setShowExecutionModal(false);
+                setExecutingApplication(null);
+                setIsTracking(false);
+                setGpsTrack([]);
+                setCurrentLocation(null);
+                setCurrentSpeed(0);
+              }}
+              onComplete={async (logData) => {
+                try {
+                  // Save the application log to the backend
+                  await applicationsAPI.createLog(logData);
+                  toast.success('Application completed successfully');
+                  
+                  // Refresh applications list
+                  fetchApplications();
+                  
+                  // Close modal
+                  setShowExecutionModal(false);
+                  setExecutingApplication(null);
+                  setIsTracking(false);
+                  setGpsTrack([]);
+                  setCurrentLocation(null);
+                  setCurrentSpeed(0);
+                } catch (error) {
+                  console.error('Failed to save application log:', error);
+                  toast.error('Failed to save application log');
+                }
+              }}
+            />
+          )}
+      </div>
+    </div>
+  );
+};
+
+// Application Execution Modal Component  
+const ApplicationExecutionModal = ({ application, propertyDetails, onClose, onComplete }) => {
+  const [isTracking, setIsTracking] = useState(false);
+  const [gpsTrack, setGpsTrack] = useState([]);
+  const [currentLocation, setCurrentLocation] = useState(null);
+  const [currentSpeed, setCurrentSpeed] = useState(0);
+  const [startTime, setStartTime] = useState(null);
+  const [watchId, setWatchId] = useState(null);
+  const [previousLocation, setPreviousLocation] = useState(null);
+  const [previousTime, setPreviousTime] = useState(null);
+  const [totalDistance, setTotalDistance] = useState(0);
+  const [averageSpeed, setAverageSpeed] = useState(0);
+
+  // Calculate target speed for liquid applications
+  const targetSpeed = React.useMemo(() => {
+    if (!application.products || application.products.length === 0) return null;
+    
+    // Find the first liquid product to get equipment specs
+    const firstProduct = application.products[0];
+    if (firstProduct.applicationType !== 'liquid') return null;
+    
+    // This would be calculated based on equipment specs and application rate
+    // For now, return a default target speed - this should be calculated from the plan
+    return 3.0; // 3.0 mph default target
+  }, [application]);
+
+  const speedStatus = React.useMemo(() => {
+    if (!targetSpeed || !currentSpeed) return 'normal';
+    
+    const tolerance = 0.1; // 10% tolerance
+    const lowerBound = targetSpeed * (1 - tolerance);
+    const upperBound = targetSpeed * (1 + tolerance);
+    
+    if (currentSpeed < lowerBound) return 'slow';
+    if (currentSpeed > upperBound) return 'fast';
+    return 'normal';
+  }, [currentSpeed, targetSpeed]);
+
+  // Start GPS tracking
+  const startTracking = () => {
+    if (!navigator.geolocation) {
+      toast.error('GPS not available on this device');
+      return;
+    }
+
+    setIsTracking(true);
+    setStartTime(new Date());
+    setGpsTrack([]);
+    setTotalDistance(0);
+    setPreviousLocation(null);
+    setPreviousTime(null);
+
+    const watchId = navigator.geolocation.watchPosition(
+      (position) => {
+        const { latitude, longitude, accuracy, speed } = position.coords;
+        const timestamp = new Date(position.timestamp);
+        
+        const newLocation = {
+          lat: latitude,
+          lng: longitude,
+          accuracy,
+          timestamp: timestamp.toISOString(),
+          speed: speed || 0
+        };
+
+        setCurrentLocation(newLocation);
+        
+        // Calculate speed if we have a previous location
+        if (previousLocation && previousTime) {
+          const distance = calculateDistance(
+            previousLocation.lat, previousLocation.lng,
+            latitude, longitude
+          );
+          const timeDiff = (timestamp - previousTime) / 1000; // seconds
+          
+          if (timeDiff > 0) {
+            const speedMph = (distance / timeDiff) * 2.237; // Convert m/s to mph
+            setCurrentSpeed(speedMph);
+            
+            setTotalDistance(prev => prev + distance);
+            
+            // Update average speed
+            const totalTime = (timestamp - startTime) / 1000; // seconds
+            if (totalTime > 0) {
+              const avgSpeedMph = (totalDistance + distance) / totalTime * 2.237;
+              setAverageSpeed(avgSpeedMph);
+            }
+          }
+        }
+
+        setPreviousLocation({ lat: latitude, lng: longitude });
+        setPreviousTime(timestamp);
+        
+        setGpsTrack(prev => [...prev, newLocation]);
+      },
+      (error) => {
+        console.error('GPS error:', error);
+        toast.error(`GPS error: ${error.message}`);
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 1000
+      }
+    );
+
+    setWatchId(watchId);
+  };
+
+  // Stop GPS tracking
+  const stopTracking = () => {
+    if (watchId) {
+      navigator.geolocation.clearWatch(watchId);
+      setWatchId(null);
+    }
+    setIsTracking(false);
+  };
+
+  // Complete application
+  const completeApplication = () => {
+    stopTracking();
+    
+    const endTime = new Date();
+    const duration = startTime ? (endTime - startTime) / 1000 : 0; // seconds
+    
+    const logData = {
+      planId: application.id,
+      lawnSectionId: application.sections?.[0]?.id || application.section?.id, // Use first section for multi-area plans
+      equipmentId: application.equipment?.id,
+      applicationDate: endTime.toISOString(),
+      gpsTrack: gpsTrack,
+      averageSpeed: averageSpeed,
+      areaCovered: application.totalSectionArea || application.sectionArea || 0,
+      notes: `Application completed via mobile tracking. Duration: ${Math.round(duration/60)} minutes`,
+      products: application.products?.map(product => ({
+        productId: product.productId,
+        userProductId: product.userProductId,
+        rateAmount: product.rateAmount,
+        rateUnit: product.rateUnit,
+        actualProductAmount: product.actualProductAmount || product.productAmount,
+        actualWaterAmount: product.actualWaterAmount || product.waterAmount,
+        actualSpeedMph: averageSpeed
+      })) || []
+    };
+    
+    onComplete(logData);
+  };
+
+  // Calculate distance between two points in meters
+  const calculateDistance = (lat1, lng1, lat2, lng2) => {
+    const R = 6371e3; // Earth's radius in meters
+    const φ1 = lat1 * Math.PI/180;
+    const φ2 = lat2 * Math.PI/180;
+    const Δφ = (lat2-lat1) * Math.PI/180;
+    const Δλ = (lng2-lng1) * Math.PI/180;
+
+    const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
+              Math.cos(φ1) * Math.cos(φ2) *
+              Math.sin(Δλ/2) * Math.sin(Δλ/2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+
+    return R * c;
+  };
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      if (watchId) {
+        navigator.geolocation.clearWatch(watchId);
+      }
+    };
+  }, [watchId]);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h3 className="text-xl font-semibold">Execute Application</h3>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
+            ✕
+          </button>
+        </div>
+        
+        {/* Application Details */}
+        <div className="bg-gray-50 p-4 rounded-lg mb-6">
+          <h4 className="font-medium mb-2">Application Details</h4>
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="font-medium">Property:</span> {application.propertyName}
+            </div>
+            <div>
+              <span className="font-medium">Areas:</span> {application.sectionNames}
+            </div>
+            <div>
+              <span className="font-medium">Equipment:</span> {application.equipmentName}
+            </div>
+            <div>
+              <span className="font-medium">Area:</span> {Math.round(application.totalSectionArea || application.sectionArea || 0).toLocaleString()} sq ft
+            </div>
+          </div>
+          
+          {/* Products */}
+          <div className="mt-4">
+            <h5 className="font-medium mb-2">Products to Apply:</h5>
+            <div className="space-y-2">
+              {application.products?.map((product, index) => (
+                <div key={index} className="bg-white p-2 rounded border text-sm">
+                  <div className="font-medium">{product.productName}</div>
+                  <div className="text-gray-600">
+                    Rate: {product.rateAmount} {product.rateUnit}
+                    {product.productAmount && ` • Product: ${product.productAmount}`}
+                    {product.waterAmount && ` • Water: ${product.waterAmount}`}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Speed Guidance for Liquid Applications */}
+        {targetSpeed && (
+          <div className={`p-4 rounded-lg mb-6 ${
+            speedStatus === 'normal' ? 'bg-green-50 border border-green-200' :
+            speedStatus === 'slow' ? 'bg-yellow-50 border border-yellow-200' :
+            'bg-red-50 border border-red-200'
+          }`}>
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium">Speed Guidance</h4>
+                <p className="text-sm text-gray-600">
+                  Target: {targetSpeed.toFixed(1)} mph • Current: {currentSpeed.toFixed(1)} mph
+                </p>
+              </div>
+              <div className={`text-lg font-bold ${
+                speedStatus === 'normal' ? 'text-green-600' :
+                speedStatus === 'slow' ? 'text-yellow-600' :
+                'text-red-600'
+              }`}>
+                {speedStatus === 'normal' ? '✓ Good Speed' :
+                 speedStatus === 'slow' ? '↑ Go Faster' :
+                 '↓ Slow Down'}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Map with GPS Track */}
+        <div className="mb-6">
+          <h4 className="font-medium mb-2">Application Area & GPS Track</h4>
+          <div className="h-96 border rounded-lg overflow-hidden">
+            {propertyDetails && (
+              <PropertyMap
+                property={propertyDetails}
+                selectedSections={application.sections?.map(s => s.id) || []}
+                mode="execution"
+                gpsTrack={gpsTrack}
+                currentLocation={currentLocation}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Tracking Stats */}
+        {isTracking && (
+          <div className="bg-blue-50 p-4 rounded-lg mb-6">
+            <h4 className="font-medium mb-2">Tracking Statistics</h4>
+            <div className="grid grid-cols-4 gap-4 text-sm">
+              <div>
+                <span className="font-medium">Duration:</span><br/>
+                {startTime ? Math.round((new Date() - startTime) / 60000) : 0} min
+              </div>
+              <div>
+                <span className="font-medium">Distance:</span><br/>
+                {(totalDistance * 3.28084).toFixed(0)} ft
+              </div>
+              <div>
+                <span className="font-medium">Avg Speed:</span><br/>
+                {averageSpeed.toFixed(1)} mph
+              </div>
+              <div>
+                <span className="font-medium">Track Points:</span><br/>
+                {gpsTrack.length}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="flex gap-3">
+          {!isTracking ? (
+            <button
+              onClick={startTracking}
+              className="btn-primary flex-1"
+            >
+              Start Application
+            </button>
+          ) : (
+            <>
+              <button
+                onClick={stopTracking}
+                className="btn-secondary flex-1"
+              >
+                Pause Tracking
+              </button>
+              <button
+                onClick={completeApplication}
+                className="btn-primary flex-1"
+              >
+                Complete Application
+              </button>
+            </>
+          )}
+          <button
+            onClick={onClose}
+            className="btn-secondary"
+          >
+            Cancel
+          </button>
+        </div>
       </div>
     </div>
   );