push weather

frontend/src/components/Applications/ApplicationViewModal.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import * as turf from '@turf/turf';
-import { applicationsAPI } from '../../services/api';
+import { applicationsAPI, weatherAPI } from '../../services/api';
 import PropertyMap from '../Maps/PropertyMap';
 import { XMarkIcon, ClockIcon, MapPinIcon, WrenchScrewdriverIcon, BeakerIcon } from '@heroicons/react/24/outline';
 
@@ -9,6 +9,8 @@ const ApplicationViewModal = ({ application, propertyDetails, onClose }) => {
   const [sections, setSections] = useState([]);
   const [planDetails, setPlanDetails] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [weather, setWeather] = useState(null);
+  const [weatherError, setWeatherError] = useState(null);
 
   // Haversine distance between two lat/lng in meters
   const haversineMeters = (lat1, lng1, lat2, lng2) => {
@@ -135,6 +137,19 @@ const ApplicationViewModal = ({ application, propertyDetails, onClose }) => {
           console.log('No application logs found:', error);
         }
 
+        // Fetch current weather for this plan's property
+        try {
+          const propId = fetchedPlanDetails.property_id || application.propertyId;
+          if (propId) {
+            const wx = await weatherAPI.getCurrent(propId);
+            setWeather(wx.data.data.weather);
+            setWeatherError(null);
+          }
+        } catch (e) {
+          console.warn('Weather fetch failed:', e?.response?.data || e.message);
+          setWeatherError('Weather unavailable');
+        }
+
       } catch (error) {
         console.error('Failed to fetch application data:', error);
       } finally {
@@ -242,6 +257,29 @@ const ApplicationViewModal = ({ application, propertyDetails, onClose }) => {
           </div>
         </div>
 
+        {/* Weather */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+          <div className="bg-blue-50 p-4 rounded-lg col-span-1">
+            <h3 className="font-semibold text-blue-900 mb-3">Current Weather</h3>
+            {weather ? (
+              <div className="text-sm text-blue-900">
+                <div className="flex items-center mb-2">
+                  <img alt="icon" src={`https://openweathermap.org/img/wn/${weather.current.icon}@2x.png`} />
+                  <div className="ml-2 text-2xl font-bold">{weather.current.temperature}°F</div>
+                </div>
+                <div>{weather.current.conditions}</div>
+                <div className="mt-1">Humidity: {weather.current.humidity}%</div>
+                <div>Wind: {Math.round(weather.current.windSpeed)} mph</div>
+              </div>
+            ) : weatherError ? (
+              <div className="text-sm text-blue-700">{weatherError}</div>
+            ) : (
+              <div className="text-sm text-blue-700">Loading weather…</div>
+            )}
+          </div>
+        
+        </div>
+
         {/* Products */}
         {planDetails?.products && planDetails.products.length > 0 && (
           <div className="mb-6">