Refactor HistoryCharts and PollutionMap components for improved date handling; update SummaryCards data mapping and Card component prop types.

frontend/src/components/HistoryCharts.jsx

@@ -23,7 +23,7 @@ const HistoryCharts = ({ groupId, deviceId }) => {
   const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_HISTORY;
   const endp = ENDPOINT
     .replace(':groupId', groupId)
-    .replace(':deviceId', deviceId); // si tu endpoint lo necesita
+    .replace(':deviceId', deviceId);
 
   const reqConfig = {
     baseUrl: `${BASE}${endp}`,
@@ -56,22 +56,14 @@ const HistoryChartsContent = () => {
     carbonMonoxide: []
   };
 
-  const threeDaysAgo = new Date();
+  const threeDaysAgo = Date.now() - (3 * 24 * 60 * 60 * 1000); // hace 3 días en ms
-  threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
+  const isRecent = (timestamp) => (timestamp * 1000) >= threeDaysAgo;
-  const isToday = (timestamp) => {
-    const date = new Date(timestamp * 1000);
-    return (
-      date.getUTCFullYear() >= threeDaysAgo.getUTCFullYear() &&
-      date.getUTCMonth() >= threeDaysAgo.getUTCMonth() &&
-      date.getUTCDate() >= threeDaysAgo.getUTCDate()
-    );
-  };
 
   data?.forEach(sensor => {
     if (
       sensor.value != null &&
       grouped[sensor.valueType] &&
-      isToday(sensor.timestamp)
+      isRecent(sensor.timestamp)
     ) {
       grouped[sensor.valueType].push({
         timestamp: sensor.timestamp * 1000,
@@ -81,6 +73,8 @@ const HistoryChartsContent = () => {
   });
 
 
+  console.log("Grouped data:", grouped);
+
   const sortAndExtract = (entries) => {
     const sorted = entries.sort((a, b) => a.timestamp - b.timestamp);
 

frontend/src/components/PollutionMap.jsx

@@ -11,57 +11,71 @@ import "leaflet.heat";
 import { useEffect } from 'react';
 
 const PollutionMap = ({ groupId, deviceId }) => {
-    const { config, configLoading, configError } = useConfig();
+  const { config, configLoading, configError } = useConfig();
 
-    if (configLoading) return <p>Cargando configuración...</p>;
+  if (configLoading) return <p>Cargando configuración...</p>;
-    if (configError) return <p>Error al cargar configuración: {configError}</p>;
+  if (configError) return <p>Error al cargar configuración: {configError}</p>;
-    if (!config) return <p>Configuración no disponible.</p>;
+  if (!config) return <p>Configuración no disponible.</p>;
 
-    const BASE = config.appConfig.endpoints.LOGIC_URL;
+  const BASE = config.appConfig.endpoints.LOGIC_URL;
-    const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_POLLUTION_MAP;
+  const ENDPOINT = config.appConfig.endpoints.GET_DEVICE_POLLUTION_MAP;
-    const endp = ENDPOINT
+  const endp = ENDPOINT
-        .replace(':groupId', groupId)
+    .replace(':groupId', groupId)
-        .replace(':deviceId', deviceId);
+    .replace(':deviceId', deviceId);
 
-    const reqConfig = {
+  const reqConfig = {
-        baseUrl: `${BASE}${endp}`,
+    baseUrl: `${BASE}${endp}`,
-        params: {}
+    params: {}
-    };
+  };
 
-    return (
+  return (
-        <DataProvider config={reqConfig}>
+    <DataProvider config={reqConfig}>
-            <PollutionMapContent />
+      <PollutionMapContent />
-        </DataProvider>
+    </DataProvider>
-    );
+  );
 };
 
 const PollutionMapContent = () => {
   const { config, configLoading, configError } = useConfig();
   const { data, dataLoading, dataError } = useDataContext();
-  
+
   useEffect(() => {
-  if (!data || !config) return;
+    if (!data || !config) return;
 
-  const mapContainer = document.getElementById("map");
+    const isToday = (timestamp) => {
-  if (!mapContainer) return;
+      const today = new Date();
+      const date = new Date(timestamp * 1000); // si viene en segundos
 
-  const SEVILLA = config.userConfig.city;
+      return (
+        today.getFullYear() === date.getFullYear() &&
+        today.getMonth() === date.getMonth() &&
+        today.getDate() === date.getDate()
+      );
+    };
 
-  const map = L.map(mapContainer).setView(SEVILLA, 12);
 
-  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    const mapContainer = document.getElementById("map");
-    attribution:
+    if (!mapContainer) return;
-      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-  }).addTo(map);
 
-  const points = data.map((p) => [p.lat, p.lon, p.carbonMonoxide]);
+    const SEVILLA = config.userConfig.city;
 
-  L.heatLayer(points, { radius: 25 }).addTo(map);
+    const map = L.map(mapContainer).setView(SEVILLA, 12);
 
-  return () => {
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    map.remove();
+      attribution:
-  };
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-}, [data, config]);
+    }).addTo(map);
+
+    const points = data
+      .filter(p => isToday(p.timestamp))
+      .map(p => [p.lat, p.lon, p.carbonMonoxide]);
+
+    L.heatLayer(points, { radius: 25 }).addTo(map);
+
+    return () => {
+      map.remove();
+    };
+  }, [data, config]);
 
   if (configLoading) return <p>Cargando configuración...</p>;
   if (configError) return <p>Error al cargar configuración: {configError}</p>;

frontend/src/components/SummaryCards.jsx

@@ -86,8 +86,8 @@ const SummaryCardsContent = () => {
 
 
     if (data) {
-        let coData = data[2];
+        let coData = data[1];
-        let tempData = data[1];
+        let tempData = data[2];
 
         CardsData[0].content = tempData.temperature + "°C";
         CardsData[0].status = "Temperatura actual";

frontend/src/components/layout/Card.jsx

@@ -82,15 +82,7 @@ Card.propTypes = {
     link: PropTypes.bool,
     to: PropTypes.string,
     text: PropTypes.bool,
-};
+    marquee: PropTypes.bool,
-
-Card.defaultProps = {
-    styleMode: "",
-    className: "",
-    style: {},
-    link: false,
-    to: "",
-    text: false,
 };
 
 export default Card;

frontend/src/pages/GroupView.jsx

@@ -110,7 +110,7 @@ const GroupViewContent = () => {
                     link: gpsSensor != undefined,
                     text: gpsSensor == undefined,
                     marquee: gpsSensor == undefined,
-                    content: gpsSensor == undefined ? "SOLO VEHICULOS ELECTRICOS" : mapPreview,
+                    content: gpsSensor == undefined ? "TODO TIPO DE VEHICULOS" : mapPreview,
                     to: `/groups/${groupId}/devices/${device.deviceId}`,
                     className: `col-12 col-md-6 col-lg-4 ${gpsSensor == undefined ? "led" : ""}`,
                 };