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">

frontend/src/pages/Weather/Weather.js

@@ -1,14 +1,83 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { propertiesAPI, weatherAPI } from '../../services/api';
 
 const Weather = () => {
+  const [properties, setProperties] = useState([]);
+  const [weatherMap, setWeatherMap] = useState({}); // propertyId -> weather
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        setLoading(true);
+        const resp = await propertiesAPI.getAll();
+        const props = resp.data?.data?.properties || [];
+        setProperties(props);
+
+        // Fetch current weather for each property with coordinates
+        const ids = props
+          .filter(p => p.latitude && p.longitude)
+          .map(p => p.id);
+
+        const results = await Promise.allSettled(ids.map(id => weatherAPI.getCurrent(id)));
+        const map = {};
+        results.forEach((r, idx) => {
+          const id = ids[idx];
+          if (r.status === 'fulfilled') {
+            map[id] = r.value.data.data.weather;
+          }
+        });
+        setWeatherMap(map);
+        setError(null);
+      } catch (e) {
+        console.error('Failed to load weather:', e);
+        setError('Failed to load weather');
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
   return (
     <div className="p-6">
       <h1 className="text-2xl font-bold text-gray-900 mb-6">Weather</h1>
-      <div className="card">
-        <p className="text-gray-600">Weather information coming soon...</p>
-      </div>
+
+      {loading ? (
+        <div className="card">Loading…</div>
+      ) : error ? (
+        <div className="card text-red-700">{error}</div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          {properties.map(p => (
+            <div key={p.id} className="bg-white rounded-lg shadow p-4">
+              <div className="flex justify-between items-center mb-2">
+                <div className="font-semibold">{p.name}</div>
+                <div className="text-xs text-gray-500">{p.address}</div>
+              </div>
+              {!p.latitude || !p.longitude ? (
+                <div className="text-sm text-gray-600">No coordinates set</div>
+              ) : weatherMap[p.id] ? (
+                <div className="flex items-center">
+                  <img alt="icon" src={`https://openweathermap.org/img/wn/${weatherMap[p.id].current.icon}@2x.png`} />
+                  <div className="ml-3">
+                    <div className="text-xl font-bold">{weatherMap[p.id].current.temperature}°F</div>
+                    <div className="text-sm text-gray-700">{weatherMap[p.id].current.conditions}</div>
+                    <div className="text-xs text-gray-500 mt-1">
+                      Humidity {weatherMap[p.id].current.humidity}% • Wind {Math.round(weatherMap[p.id].current.windSpeed)} mph
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-sm text-gray-600">Loading weather…</div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
 
-export default Weather;
+export default Weather;