Merge pull request #7 from bert27/refactor/architecture-cleanup-and-irrigation-unification

1. Domain-Driven Refactoring (Irrigation Module)

Renamed IMockState to IIrrigationData to decouple domain logic from simulation implementation.
Improved task typing by using actual Day objects instead of primitive strings.
Unified service architecture to be source-agnostic (Hardware vs. Simulation).
2. Interface Standardization & Prefixing (Drinks Module)

Implemented I prefix for core interfaces: 
Cocktail
 → ICocktail, Bottle → IBottle.
Updated all child components, hooks, and services to utilize these standardized types.
3. Mock Data Reorganization

Moved all simulation data from data/ to a dedicated mocks/ directory.
Renamed constants for clarity: availableCocktails → MOCK_COCKTAILS, initialBottles → MOCK_BOTTLES.
4. Connectivity & Build Fixes

Vite Migration: Updated 
.env
 variables from REACT_APP_ to VITE_ prefix to ensure they are correctly loaded in the new build system.
UX Improvements: Added a "Retry Connection" button in the 
SimulationAlert
 component to allow users to manually exit reactive mock mode.
Path Aliases: Fixed broken relative imports by standardizing the use of @/ path aliases across the car and drinks modules.
5. Testing & Quality Assurance

Resolved 16/16 tests in the drinks module (fixing JSDOM navigation errors and 
act()
 warnings).
Verified production build success (npm run build).

Author: bert27

client/.env

@@ -1,6 +1,6 @@
-REACT_APP_REMOTE_IP=http://192.168.1.96
-REACT_APP_ROBOT_IP=http://192.168.1.97
-REACT_APP_DRINKS_IP=http://192.168.1.83
-REACT_APP_IRRIGATION_IP=http://192.168.1.145
+VITE_REMOTE_IP=http://192.168.1.96
+VITE_ROBOT_IP=http://192.168.1.97
+VITE_DRINKS_IP=http://192.168.1.83
+VITE_IRRIGATION_IP=http://192.168.1.145
 WDS_SOCKET_PORT=0
 VITE_MOCK_SERVER=false

client/src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./i18n";
 import "./styles.css";
-import { Plant } from "@/pages/plant/plant-page-index";
+import { Irrigation } from "@/pages/irrigation/irrigation-page-index";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { DrinksPage } from "@/pages/drinks/drinks-page";
 import { SideNavBar } from "@/components/Menu/sidenavbar";
@@ -20,10 +20,10 @@ export const App: React.FC = () => {
             <Box component="main" sx={{ flexGrow: 1, overflowX: "hidden" }}>
               <Routes>
                 <Route path="/" element={<CarPage />} />
-                <Route path="/irrigation" element={<Plant />} />
+                <Route path="/irrigation" element={<Irrigation />} />
                 <Route path="/drinks" element={<DrinksPage />} />
                 <Route path="/drinks/:tabRouter" element={<DrinksPage />} />
-                <Route path="*" element={<Plant />} />
+                <Route path="*" element={<Irrigation />} />
               </Routes>
             </Box>
           </Box>

client/src/components/Task/Task.tsx

@@ -24,19 +24,19 @@ export const Task = ({
     minutes: 30,
   },
   index = 0,
-  eliminateTask = () => {},
+  eliminateTask = () => { },
 }: IPropsTask) => {
   const { t } = useTranslation();
   return (
     <div
-      className="cardTask_plant"
+      className="cardTask_irrigation"
       key={index}
       data-testid={"task"}
     >
       <div className="delete-btn-container">
-        <Tooltip title={t('plant.task.delete')}>
-          <IconButton 
-            onClick={() => eliminateTask(index)} 
+        <Tooltip title={t('irrigation.task.delete')}>
+          <IconButton
+            onClick={() => eliminateTask(index)}
             className="delete-task-btn"
             aria-label="delete"
             size="medium"
@@ -46,13 +46,13 @@ export const Task = ({
         </Tooltip>
       </div>
       <div className="title_cardtask">
-        {t('plant.task.at')} {taskData?.hour}:{taskData?.minutes}
+        {t('irrigation.task.at')} {taskData?.hour}:{taskData?.minutes}
       </div>
-      <div className="daysTask_plant">
+      <div className="daysTask_irrigation">
         {taskData?.days.map((taskdatac, index) => (
           <div key={index}>
             {taskdatac?.state && (
-              <div className="day_task">{t(`plant.days.${taskdatac?.name}`)}</div>
+              <div className="day_task">{t(`irrigation.days.${taskdatac?.name}`)}</div>
             )}
           </div>
         ))}

client/src/components/Task/task.css

@@ -1,4 +1,4 @@
-.tasksList_plant {
+.tasksList_irrigation {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -7,21 +7,21 @@
   padding-right: 0.5rem;
 }
 
-.tasksList_plant::-webkit-scrollbar {
+.tasksList_irrigation::-webkit-scrollbar {
   width: 6px;
 }
 
-.tasksList_plant::-webkit-scrollbar-track {
+.tasksList_irrigation::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 10px;
 }
 
-.tasksList_plant::-webkit-scrollbar-thumb {
+.tasksList_irrigation::-webkit-scrollbar-thumb {
   background: var(--primary);
   border-radius: 10px;
 }
 
-.cardTask_plant {
+.cardTask_irrigation {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -34,7 +34,7 @@
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.cardTask_plant:hover {
+.cardTask_irrigation:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-premium);
 }
@@ -49,7 +49,7 @@
   align-items: center;
 }
 
-.daysTask_plant {
+.daysTask_irrigation {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;

client/src/components/days/DaySelector.tsx

@@ -18,12 +18,12 @@ export const DaySelector: React.FC<DaySelectorProps> = ({ day, saveChoose, index
   };
 
   return (
-    <div 
-      className={`days_plant_child ${isActive ? 'active' : ''}`} 
+    <div
+      className={`days_irrigation_child ${isActive ? 'active' : ''}`}
       onClick={toggleDay}
     >
       <div>{day?.name}</div>
-      <div className="checkBox_plant_child">
+      <div className="checkBox_irrigation_child">
         {isActive && <CheckIcon className="buttonsvg" />}
       </div>
     </div>

client/src/components/days/Days.tsx

@@ -9,7 +9,7 @@ interface DaysProps {
 
 export const Days: React.FC<DaysProps> = ({ saveDays, days }) => {
   return (
-    <div className="days_plant">
+    <div className="days_irrigation">
       {days.map((day, index) => (
         <DaySelector
           day={day}

client/src/components/days/days.css

@@ -1,4 +1,4 @@
-.days_plant {
+.days_irrigation {
   display: flex;
   width: 100%;
   justify-content: space-around;
@@ -11,7 +11,7 @@
   gap: 0.5rem;
 }
 
-.days_plant_child {
+.days_irrigation_child {
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -22,18 +22,18 @@
   flex: 1;
 }
 
-.days_plant_child:hover {
+.days_irrigation_child:hover {
   transform: translateY(-3px);
 }
 
-.days_plant_child div:first-child {
+.days_irrigation_child div:first-child {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
 }
 
-.checkBox_plant_child {
+.checkBox_irrigation_child {
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, 0.05);
@@ -45,12 +45,13 @@
   transition: all 0.3s ease;
 }
 
-.days_plant_child.active .checkBox_plant_child {
+.days_irrigation_child.active .checkBox_irrigation_child {
   background: var(--primary-glow);
   border-color: var(--primary);
   box-shadow: 0 0 10px var(--primary-glow);
 }
 
+
 .buttonsvg {
   width: 18px;
   height: 18px;

client/src/components/simulation-alert/simulation-alert.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Alert, SxProps, Theme } from '@mui/material';
-import { SIMULATION_MESSAGE } from '@/utils/simulation';
+import { Alert, Box, Button, SxProps, Theme } from '@mui/material';
+import { SIMULATION_MESSAGE, resetSimulationMode } from '@/utils/simulation';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 interface SimulationAlertProps {
     isMock: boolean;
@@ -13,6 +14,17 @@ export const SimulationAlert: React.FC<SimulationAlertProps> = ({ isMock, sx })
     return (
         <Alert
             severity="info"
+            action={
+                <Button
+                    color="inherit"
+                    size="small"
+                    startIcon={<RefreshIcon />}
+                    onClick={resetSimulationMode}
+                    sx={{ fontWeight: 700, textTransform: 'none' }}
+                >
+                    Reintentar Conexión
+                </Button>
+            }
             sx={{
                 mb: 2,
                 background: "rgba(2, 136, 209, 0.1)",