AC-258 dashboard, station's popup and footer updated

src/src/components/footer/Footer.css

@@ -1,7 +1,8 @@
-.item-footer {
+.item-footer > a {
   transition: all 0.3s ease-in-out;
+  width: fit-content;
 }
 
-.item-footer:hover {
+.item-footer > a:hover {
   text-decoration: underline;
 }

src/src/components/footer/Footer.js

@@ -34,10 +34,10 @@ function Footer() {
               <ul className="nav flex-column">
                 <li className="nav-item mb-2 item-footer">
                   <a
-                    href="mailto: J.R.Villegas@cgiar.org"
+                    href="mailto: a.i.martinez@cgiar.org"
                     className="nav-link text-light"
                   >
-                    J.R.Villegas@cgiar.org
+                    A.i.martinez@cgiar.org
                   </a>
                 </li>
               </ul>

src/src/components/stationPopup/StationPopup.js

@@ -52,7 +52,7 @@ function StationPopup({ station, lastData }) {
             aria-label="Data"
           >
             <IconChartDonut stroke={2} className="me-2" />
-            Data
+            Datos
           </Link>
         </div>
       </Popup>

src/src/pages/dashboard/Dashboard.js

@@ -22,6 +22,7 @@ const Dashboard = () => {
   const [isChartLoading, setIsChartLoading] = useState(false);
   const [startDate, setStartDate] = useState();
   const [endDate, setEndDate] = useState();
+  const [endDataDate, setEndDataDate] = useState();
   const { idWS } = useParams();
   const navigate = useNavigate();
 
@@ -64,6 +65,7 @@ const Dashboard = () => {
           .toISOString()
           .split("T")[0];
         setEndDate(formattedEndDate);
+        setEndDataDate(formattedEndDate);
 
         const startDate = new Date(lastDataAvailable[0].date);
         startDate.setDate(startDate.getDate() - 7);
@@ -155,6 +157,11 @@ const Dashboard = () => {
     setStartDate(newStartDate);
   };
 
+  const handleEndDateChange = (e) => {
+    const newEndDate = e.target.value;
+    setEndDate(newEndDate);
+  };
+
   const chartConfig = (label, data, color) => ({
     labels: data.map((item) => item.label),
     datasets: [
@@ -238,7 +245,9 @@ const Dashboard = () => {
                       type="date"
                       aria-label="Fecha de fin"
                       value={endDate}
-                      disabled
+                      onChange={handleEndDateChange}
+                      min={startDate}
+                      max={endDataDate}
                     />
                   </div>
                 </Form.Group>