LF-5298: Show a 5-day weather forecast with frost-risk warnings on the Home page

packages/api/src/controllers/weatherController.ts

@@ -29,13 +29,12 @@ const weatherController = {
         return res.sendStatus(404);
       }
 
-      const weatherData = await weatherService.getWeather({
+      const weatherForecast = await weatherService.getWeather({
         lat: row.grid_points.lat,
         lon: row.grid_points.lng,
-        units: row.units.measurement,
       });
 
-      res.status(200).send(weatherData);
+      res.status(200).send(weatherForecast);
     } catch (error: unknown) {
       console.error(error);
       res.status((error as HttpError).status || 500).json({ error });

packages/api/src/endPoints.js

@@ -17,7 +17,7 @@ const endPoints = {
   googleMapsAPI: 'https://maps.googleapis.com/maps/api/elevation/json', // for grabbing elevation
   googleMapsAPIGeocode: 'https://maps.googleapis.com/maps/api/geocode/json', // for grabbing elevation
   googleWebRiskAPI: 'https://webrisk.googleapis.com/v1/uris:search',
-  openWeatherAPI: 'https://api.openweathermap.org/data/2.5/weather', // for grabbing weather data
+  openWeatherAPI: 'https://api.openweathermap.org/data/2.5/forecast', // for grabbing 5-day / 3-hour forecast
   openMapsAPI: 'https://nominatim.openstreetmap.org/reverse', // to reverse geocode
   soilGridsAPI: 'https://rest.isric.org/soilgrids/v2.0/properties/query', // for grabbing soil organic matter when no soil analysis is present
   gbifAPI: 'http://api.gbif.org/v1/occurrence/search', // for grabbing species in biodiversity

packages/api/src/services/weatherService.ts

@@ -20,38 +20,64 @@ import endpoints from '../endPoints.js';
 interface WeatherParams {
   lat: number;
   lon: number;
-  units?: string;
 }
 
-interface WeatherData {
+export interface WeatherForecastSlot {
+  dt: number;
+  tempC: number;
+  iconCode: string;
+  pop: number;
+  rainMm3h: number;
+  snowMm3h: number;
+  windMs: number;
   humidity: number;
-  icon: string;
-  date: number;
-  temp: number;
-  wind: number;
-  city: string;
-  measurement: string;
+}
+
+export interface WeatherForecast {
+  city: { name: string; timezoneOffsetSeconds: number };
+  slots: WeatherForecastSlot[];
+}
+
+interface OpenWeatherListEntry {
+  dt: number;
+  main: { temp: number; humidity: number };
+  weather: { icon: string }[];
+  wind: { speed: number };
+  rain?: { '3h'?: number };
+  snow?: { '3h'?: number };
+  pop?: number;
+}
+
+interface OpenWeatherForecastResponse {
+  list: OpenWeatherListEntry[];
+  city: { name: string; timezone: number };
 }
 
 const OPEN_WEATHER_APP_ID = credentials.OPEN_WEATHER_APP_ID;
 const openWeatherAPI = endpoints.openWeatherAPI;
 
 export const weatherService = {
-  async getWeather({ lat, lon, units = 'metric' }: WeatherParams): Promise<WeatherData> {
+  async getWeather({ lat, lon }: WeatherParams): Promise<WeatherForecast> {
     try {
-      const url = `${openWeatherAPI}?units=${units}&lat=${lat}&lon=${lon}&appid=${OPEN_WEATHER_APP_ID}&lang=en&cnt=1`;
-      const response = await axios.get(url);
-
-      const data = await response.data;
+      const url = `${openWeatherAPI}?units=metric&lat=${lat}&lon=${lon}&appid=${OPEN_WEATHER_APP_ID}&lang=en`;
+      const response = await axios.get<OpenWeatherForecastResponse>(url);
+      const data = response.data;
 
       return {
-        humidity: data.main.humidity,
-        icon: data.weather[0].icon,
-        date: data.dt,
-        temp: Math.round(data.main.temp),
-        wind: data.wind.speed,
-        city: data.name,
-        measurement: units,
+        city: {
+          name: data.city.name,
+          timezoneOffsetSeconds: data.city.timezone,
+        },
+        slots: data.list.map((entry) => ({
+          dt: entry.dt,
+          tempC: entry.main.temp,
+          iconCode: entry.weather[0].icon,
+          pop: entry.pop ?? 0,
+          rainMm3h: entry.rain?.['3h'] ?? 0,
+          snowMm3h: entry.snow?.['3h'] ?? 0,
+          windMs: entry.wind.speed,
+          humidity: entry.main.humidity,
+        })),
       };
     } catch (error) {
       const axiosError = error as AxiosError;

packages/webapp/public/locales/en/translation.json

@@ -2216,6 +2216,10 @@
     "UPLOAD_LAB_DOCUMENT": "Upload lab document",
     "WILL_SAVE_ONLINE": "Will save when online"
   },
+  "TIME_STRIP": {
+    "NEXT_TIME_SLOT": "Next time slot",
+    "PREVIOUS_TIME_SLOT": "Previous time slot"
+  },
   "UNIT": {
     "TIME": {
       "DAY": "days",
@@ -2245,7 +2249,11 @@
     "HOURLY_WAGE_TOOLTIP": "This task-specific wage will override the assignee's default wage. Default worker wages can be managed in the People tab."
   },
   "WEATHER": {
+    "FROST_EXPECTED": "⚠️ Frost Expected (Low {{threshold}})",
+    "FROST_RISK": "Frost risk",
     "HUMIDITY": "Humidity",
+    "PRECIPITATION": "Precipitation",
+    "TITLE": "Weather & conditions",
     "WIND": "Wind"
   },
   "WELCOME_SCREEN": {

packages/webapp/src/components/TimeStrip/index.tsx

@@ -0,0 +1,114 @@
+/*
+ *  Copyright 2026 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useRef } from 'react';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import styles from './styles.module.scss';
+
+interface TimeStripProps {
+  slots: { dt: number }[];
+  selectedSlotIndex: number;
+  offsetSeconds: number;
+  locale: string;
+  onSelect: (slotIndex: number) => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+}
+
+const TimeStrip = ({
+  slots,
+  selectedSlotIndex,
+  offsetSeconds,
+  locale,
+  onSelect,
+  onPrev,
+  onNext,
+}: TimeStripProps) => {
+  const { t } = useTranslation();
+  const selectedRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'center',
+      block: 'nearest',
+    });
+  }, [slots, selectedSlotIndex]);
+
+  return (
+    <div className={styles.strip}>
+      <button
+        type="button"
+        className={styles.chevron}
+        onClick={onPrev}
+        disabled={!onPrev}
+        aria-label={t('TIME_STRIP.PREVIOUS_TIME_SLOT')}
+      >
+        <ChevronLeft />
+      </button>
+      <div className={styles.slotsScroll}>
+        <div className={styles.slotsRow}>
+          {slots.map((slot, index) => {
+            const selected = index === selectedSlotIndex;
+            return (
+              <button
+                key={slot.dt}
+                ref={selected ? selectedRef : undefined}
+                type="button"
+                aria-pressed={selected}
+                className={clsx(styles.chip, selected && styles.selected)}
+                onClick={() => onSelect(index)}
+              >
+                {formatTimeChipLabel(slot.dt, offsetSeconds, locale)}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <button
+        type="button"
+        className={styles.chevron}
+        onClick={onNext}
+        disabled={!onNext}
+        aria-label={t('TIME_STRIP.NEXT_TIME_SLOT')}
+      >
+        <ChevronRight />
+      </button>
+    </div>
+  );
+};
+
+export function formatTimeChipLabel(utcMs: number, offsetSeconds: number, locale: string): string {
+  const localMs = (utcMs + offsetSeconds) * 1000;
+  const date = new Date(localMs);
+  const formatter = new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZone: 'UTC',
+  });
+  let label = formatter.format(date);
+  if (date.getUTCMinutes() === 0) {
+    label = label.replace(/:00/, '');
+  }
+  return label
+    .replace(/\s*AM$/i, 'am')
+    .replace(/\s*PM$/i, 'pm')
+    .trim();
+}
+
+export default TimeStrip;

packages/webapp/src/components/TimeStrip/styles.module.scss

@@ -0,0 +1,102 @@
+/*
+ *  Copyright 2026 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  background-color: var(--Colors-Primary-Primary-teal-50);
+  border-radius: 8px;
+}
+
+.chevron {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  color: var(--Colors-Primary-Primary-teal-900);
+  cursor: pointer;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &:disabled {
+    color: var(--Colors-Neutral-Neutral-200);
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--Colors-Primary-Primary-teal-400);
+    outline-offset: 2px;
+  }
+}
+
+.slotsScroll {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.slotsRow {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+}
+
+.chip {
+  flex: 0 0 auto;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--Colors-Primary-Primary-teal-900);
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid var(--Colors-Primary-Primary-teal-400);
+    outline-offset: 2px;
+  }
+}
+
+.selected {
+  background-color: var(--Colors-Primary-Primary-teal-700);
+  color: var(--Colors-Primary-Primary-teal-50);
+  border-color: var(--Colors-Primary-Primary-teal-400);
+  font-weight: 700;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+}