push weather

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;