application tracking

frontend/src/pages/Applications/Applications.js

@@ -12,6 +12,7 @@ import {
 import { propertiesAPI, productsAPI, equipmentAPI, applicationsAPI, nozzlesAPI } from '../../services/api';
 import LoadingSpinner from '../../components/UI/LoadingSpinner';
 import PropertyMap from '../../components/Maps/PropertyMap';
+import ApplicationExecutionModal from '../../components/Applications/ApplicationExecutionModal';
 import toast from 'react-hot-toast';
 
 const Applications = () => {
@@ -28,6 +29,7 @@ const Applications = () => {
   const [spreaderRecommendation, setSpreaderRecommendation] = useState(null);
   const [loadingRecommendation, setLoadingRecommendation] = useState(false);
   const [executingApplication, setExecutingApplication] = useState(null);
+  const [showExecutionModal, setShowExecutionModal] = useState(false);
   
 
   useEffect(() => {
@@ -132,9 +134,21 @@ const Applications = () => {
     }
   };
 
-  const handleExecuteApplication = (application) => {
-    setExecutingApplication(application);
-    alert(`Executing application for ${application.propertyName} - ${application.sectionNames}`);
+  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) {
@@ -1385,6 +1399,25 @@ const ApplicationPlanModal = ({
           )}
       
       </div>
+
+      {/* Application Execution Modal */}
+      {showExecutionModal && executingApplication && (
+        <ApplicationExecutionModal
+          application={executingApplication}
+          propertyDetails={selectedPropertyDetails}
+          onClose={() => {
+            setShowExecutionModal(false);
+            setExecutingApplication(null);
+          }}
+          onComplete={() => {
+            // Refresh applications list
+            fetchApplications();
+            // Close modal
+            setShowExecutionModal(false);
+            setExecutingApplication(null);
+          }}
+        />
+      )}
     </div>
   );
 };