🌱 Invernadero Front - Sistema de Gestión de Invernaderos

📋 Descripción del Proyecto

Sistema web profesional para la gestión y monitoreo de invernaderos inteligentes. Esta aplicación frontend proporciona una interfaz moderna y responsiva para controlar módulos IoT, visualizar datos en tiempo real, y administrar cultivos de forma eficiente.

🚀 Tecnologías Principales

Core Framework

• React ^19.2.0 - Biblioteca principal para la construcción de interfaces de usuario
• TypeScript ^4.9.5 - Superset tipado de JavaScript para mayor robustez del código
• React Router DOM ^7.9.3 - Enrutamiento y navegación entre vistas

UI/UX Frameworks & Components

Material-UI (MUI)

• @mui/material ^5.18.0 - Componentes de interfaz siguiendo Material Design
• @mui/icons-material ^5.18.0 - Iconografía Material Design
• @emotion/react ^11.14.0 - Biblioteca CSS-in-JS para estilizado
• @emotion/styled ^11.14.1 - API de componentes estilizados para Emotion

Ant Design

• antd ^5.27.4 - Sistema de diseño empresarial con componentes avanzados
• @ant-design/icons ^6.1.0 - Biblioteca de iconos de Ant Design

Visualización de Datos

• Recharts ^3.3.0 - Biblioteca para gráficos y visualizaciones de datos responsivas

Comunicación & Seguridad

• Axios ^1.12.2 - Cliente HTTP para comunicación con APIs
• jwt-decode ^4.0.0 - Decodificación de tokens JWT para autenticación
• crypto-js ^4.2.0 - Biblioteca de criptografía estándar
• js-sha256 ^0.11.1 - Implementación SHA-256 para hashing seguro

Testing

• @testing-library/react ^16.3.0 - Utilidades para testing de componentes React
• @testing-library/jest-dom ^6.9.1 - Matchers personalizados de Jest para el DOM
• @testing-library/user-event ^13.5.0 - Simulación avanzada de eventos de usuario
• @testing-library/dom ^10.4.1 - Utilidades de testing para consultas del DOM
• @types/jest ^27.5.2 - Definiciones TypeScript para Jest

Build & Development Tools

• react-scripts 5.0.1 - Scripts de configuración y build de Create React App
• web-vitals ^2.1.4 - Métricas de rendimiento web

DevDependencies

• @types/react ^19.2.0 - Definiciones TypeScript para React
• @types/react-dom ^19.2.0 - Definiciones TypeScript para React DOM
• @types/node ^16.18.126 - Definiciones TypeScript para Node.js
• @types/crypto-js ^4.2.2 - Definiciones TypeScript para crypto-js

📦 Instalación

Prerrequisitos

• Node.js (versión 16 o superior)
• npm o yarn

Pasos de Instalación

1. Clonar el repositorio

git clone <url-del-repositorio>
cd Invernadero-front

2. Instalar dependencias

npm install

3. Configurar variables de entorno Crear un archivo .env en la raíz del proyecto con las configuraciones necesarias.

4. Iniciar el servidor de desarrollo

npm start

La aplicación estará disponible en http://localhost:3000

🚀 Arquitectura Principal

📄 src/App.tsx

El componente raíz de la aplicación que orquesta la navegación y la configuración global.

Responsabilidades:

1. Providers Globales:

   • AntApp: Proporciona contexto para componentes de Ant Design (modales, mensajes, notificaciones).
   • CssBaseline: Normaliza estilos CSS usando Material-UI.
   • BrowserRouter: Habilita el enrutamiento SPA (Single Page Application).

2. Estructura de Rutas:

   • Rutas Públicas:

     • /*: Landing Page (ResponsiveView) que maneja login/registro y vistas públicas.
     • /terminos: Vista de términos y condiciones.
     • /activar-cuenta: Vista para verificación de cuenta.

   • Rutas Protegidas (/admin):

     • Requiere autenticación y rol de administrador.
     • Layout: AdminLayout.
     • Sub-rutas: Dashboard, Perfil, Gestión de Usuarios.

   • Rutas Protegidas (/user):

     • Requiere autenticación y rol de usuario.
     • Layout: UserLayout.
     • Sub-rutas: Bienvenida, Perfil, Gestión de Invernaderos (Frío/Cálido).

Componentes Clave:

• ProtectedRoute: Wrapper que verifica autenticación antes de renderizar el contenido.
• Navigate: Redirecciones automáticas (ej. /admin -> /admin/dashboard).

---

🌍 Variables de Entorno (.env)

Configuración necesaria para conectar el frontend con los servicios backend.

# URL base de la API Backend (Spring Boot / Node.js)
REACT_APP_API_URL=http://localhost:8080/api/v1

npm start

Inicia la aplicación en modo desarrollo. La página se recargará automáticamente al realizar cambios en el código.

🏗️ Estructura del Proyecto

Invernadero-front/
├── public/              # Archivos estáticos públicos
├── src/
│   ├── components/      # Componentes reutilizables
│   ├── views/          # Vistas/Páginas principales
│   ├── services/       # Servicios y API calls
│   ├── utils/          # Funciones utilitarias
│   ├── types/          # Definiciones TypeScript
│   ├── App.tsx         # Componente raíz
│   └── index.tsx       # Punto de entrada
├── package.json        # Dependencias del proyecto
└── README.md          # Documentación

📁 Detalle de Tipos TypeScript (src/types/)

El proyecto cuenta con una estructura organizada de tipos TypeScript que garantiza type-safety en toda la aplicación:

🔐 Tipos de Autenticación (auth/)

Login (auth/login/auth.ts)

• LoginUserData - Credenciales de inicio de sesión (Mail, Password)
• LoginResponse - Respuesta del servidor con JWT y datos del usuario (token, role, verified)
• DecodedToken - Token JWT decodificado con información del usuario (rol, sub, exp)

Registro (auth/registro/auth.ts)

• RegisterUserData - Datos para registro de nuevo usuario (UserName, Mail, Password)

Verificación (auth/registro/verify/auth.ts)

• VerifyAccountData - Datos para verificar cuenta (userId, VerificationCode)
• ResendCodeData - Solicitud para reenvío de código de verificación (userId)

👤 Tipos de Usuario (user/)

Perfil de Usuario (user/profile/userProfileTypes.ts)

• UserProfileDto - DTO del perfil de usuario (userName, mail)
• UserProfileFormValues - Valores del formulario de perfil con contraseñas opcionales
• PatchProfileRequest - Solicitud de actualización de perfil (UserName, Mail)
• ChangePasswordRequest - Solicitud de cambio de contraseña (CurrentPassword, NewPassword, ConfirmNewPassword)

⚙️ Tipos de Administración (admin/)

Gestión de Usuarios (admin/gestionuser/index.ts)

• GetUsersDTO - DTO para listado de usuarios (id, mail, userName, role)
• UserTableData - Datos formateados para tabla de usuarios (key, nombre, correo, rol, id)
• UpdateUserRequest - Solicitud de actualización de usuario (Mail, UserName)
• UpdatePasswordRequest - Solicitud de cambio de contraseña (CurrentPassword, NewPassword, ConfirmNewPassword)

Tipos de Usuario Completos (admin/user/userTypes.ts)

• Roles - Constantes de roles del sistema (Administrador: 1, User: 2)
• Status - Constantes de estado del usuario (Active: 1, Inactive: 2)
• GetUsersDto - DTO completo de usuario con verificación y estado
• GetUserDto - DTO individual de usuario
• AddUserRequest - Solicitud para agregar nuevo usuario (mail, userName, password, role)
• PatchUserRequest - Solicitud de actualización parcial (mail, userName)
• ResendCodeRequest - Solicitud de reenvío de código (userId)
• UserTableData - Datos completos para tabla (incluye estatus y verificado)

Perfil de Administrador (admin/profile/profileTypes.ts)

• UserProfileDto - DTO completo del perfil (incluye role, status, verified)
• UpdateProfileRequest - Solicitud de actualización (mail, userName)
• ChangePasswordFormValues - Valores del formulario de cambio de contraseña
• ChangePasswordApiRequest - Solicitud API de cambio de contraseña

Invernaderos (admin/greenhouse/greenhouse.ts)

• AddGreenhouseRequest - Solicitud para agregar invernadero (name, location)
• PatchGreenhouseRequest - Solicitud de actualización de invernadero
• GetGreenhouseDto - DTO de invernadero (id, name, location, ownerId)
• SensorReadingDto - DTO de lectura de sensores (timestamp, temperature, humidity)

🛡️ Tipos de Rutas (routes/)

Rutas Protegidas (routes/ProtectedRoute.tsx)

• ProtectedRouteProps - Props para componente de ruta protegida
• ProtectedRoute - Componente que valida autenticación para rutas privadas

🔌 Detalle de Servicios (src/services/)

Los servicios encapsulan toda la lógica de comunicación con el backend mediante Axios, incluyendo interceptores para autenticación y manejo de errores.

🔐 Servicios de Autenticación (auth/)

Login (auth/login/authService.ts)

Gestiona el inicio de sesión y manejo de tokens JWT.

Funciones:

• loginUser(userData: LoginUserData) - Autentica al usuario y retorna JWT y datos del usuario
• saveToken(token: string) - Guarda el token JWT en localStorage
• logoutUser() - Elimina el token de autenticación del almacenamiento local
• decodeToken(token: string) - Decodifica el token JWT para extraer información del usuario

Características:

• Validación de URL base del API
• Logging de errores para debugging
• Decodificación manual de JWT sin dependencias externas

Registro (auth/registro/authService.ts)

Maneja el registro de nuevos usuarios.

Funciones:

• registerUser(userData: RegisterUserData) - Registra un nuevo usuario en el sistema

Características:

• Validación de configuración de URL del API
• Manejo de errores específicos de Axios
• Logging detallado para seguimiento de peticiones

Verificación (auth/verify/verifyService.ts)

Servicios para verificación de cuentas de usuario.

Funciones:

• verifyUserAccount(data: VerifyAccountData) - Verifica la cuenta del usuario con código
• resendVerificationCode(data: ResendCodeData) - Reenvía el código de verificación

Características:

• Interceptor de autorización con token Bearer
• Validación de token en localStorage
• Manejo robusto de errores HTTP

👤 Servicios de Usuario (user/)

Perfil de Usuario (user/profile/userProfileService.ts)

Gestiona el perfil del usuario autenticado.

Funciones:

• getUserById(id: string) - Obtiene información del perfil por ID
• updateProfile(id: string, data: PatchProfileRequest) - Actualiza datos del perfil
• changePassword(id: string, currentPass: string, newPass: string) - Cambia la contraseña del usuario

Características:

• Cliente Axios configurado con baseURL
• Interceptor automático de autenticación Bearer
• Hash SHA-256 de contraseñas usando Web Crypto API
• Hasheo paralelo con Promise.all para eficiencia

⚙️ Servicios de Administración (admin/)

Gestión de Usuarios (admin/gestionuser/userService.ts)

Servicio básico para obtener listado de usuarios.

Funciones:

• getUsers() - Obtiene lista completa de usuarios del sistema

Características:

• Cliente Axios con interceptores de request y response
• Manejo automático de tokens Bearer
• Redirección automática a login en caso de sesión expirada (401)
• Manejo de errores con logging

Administración de Usuarios (admin/user/userAdminService.ts)

Servicio completo de CRUD para gestión administrativa de usuarios.

Funciones:

• getUsers() - Lista todos los usuarios del sistema
• createUser(userData) - Crea un nuevo usuario con hash de contraseña
• patchUser(id, userData) - Actualiza información de un usuario
• deleteUser(id) - Elimina un usuario del sistema
• resendCode(userId) - Reenvía código de verificación a un usuario

Características:

• Hash SHA-256 automático de contraseñas al crear usuarios
• Interceptor de respuesta para manejo de sesiones
• Cliente Axios con autenticación automática
• Separación de contraseña raw y hasheada para seguridad

Perfil de Administrador (admin/profile/adminProfileService.ts)

Gestiona perfiles desde la perspectiva administrativa.

Funciones:

• getProfile(id: string) - Obtiene perfil completo de un usuario
• updateProfile(id: string, data: UpdateProfileRequest) - Actualiza perfil de usuario
• changePassword(id: string, currentPass: string, newPass: string) - Cambia contraseña de usuario

Características:

• Hash SHA-256 con Web Crypto API
• Procesamiento paralelo de hash de contraseñas
• Autenticación automática mediante interceptores

Control de Invernaderos (admin/gestionuser/Invernaderos/GreenhouseController.ts)

Servicio completo para gestión de invernaderos y datos de sensores.

Funciones:

• getGreenhousesByUser() - Obtiene invernaderos del usuario autenticado
• addGreenhouse(greenhouseData) - Agrega un nuevo invernadero
• patchGreenhouse(id, greenhouseData) - Actualiza datos de un invernadero
• deleteGreenhouse(id) - Elimina un invernadero
• getColdDataByGreenhouseId(id) - Obtiene lecturas del sensor de invernadero frío
• getHotDataByGreenhouseId(id) - Obtiene lecturas del sensor de invernadero cálido

Características:

• Cliente Axios dedicado con baseURL específica
• Validación estricta de configuración de URL
• Interceptor de autenticación Bearer
• Manejo centralizado de errores con mensajes del API
• Función checkBaseUrl() pre-llamada para validación
• Extracción de mensajes de error del backend

---

🛡️ Características Comunes de Servicios

Interceptores

• Request Interceptor: Agrega automáticamente el token Bearer de localStorage a todas las peticiones
• Response Interceptor: Maneja errores 401 (sesión expirada) con redirección automática

Seguridad

• Hash SHA-256 implementado con Web Crypto API nativa del navegador
• Tokens JWT almacenados en localStorage
• Validación de URLs del API antes de realizar peticiones

Configuración

• Todos los servicios usan REACT_APP_API_URL del archivo .env
• Cliente Axios centralizado por módulo
• Logging detallado para debugging en desarrollo

---

🎨 Componentes de Layout (src/layout/)

Los layouts proporcionan la estructura visual consistente de la aplicación, organizados por roles (Admin, Usuario, Landing).

📱 Headers (Cabeceras)

Header de Administrador (Header/admin/AdminHeader.tsx)

Cabecera del panel administrativo con navegación y autenticación.

Características:

• Diseño responsive con menu horizontal (desktop) y drawer lateral (mobile)
• Gradiente de fondo personalizado con tema oscuro profesional
• Logo de UTEQ con avatar circular con borde gradiente
• Menú de navegación: Perfil, Gestión de Usuarios
• Botón de cierre de sesión con confirmación modal
• Sticky header con z-index 100 para permanencia en scroll
• Interceptor de breakpoints usando Grid.useBreakpoint()
• Animaciones de hover en botones y menú

Navegación:

• /admin/profile - Perfil del administrador
• /admin/users - Gestión de usuarios
• Modal de confirmación para logout

Estilos destacados:

• Altura: 70px
• Gradiente: linear-gradient(135deg, #2A3A6B, #1C2B4E)
• Box shadow para profundidad
• Texto con gradiente y WebkitBackgroundClip

Header de Usuario (Header/user/UserHeader.tsx)

Cabecera del panel de usuario con acceso a perfil e invernaderos.

Características:

• Estructura similar a AdminHeader con branding consistente
• Menú de navegación específico para usuario
• Avatar de UTEQ con gradiente verde/amarillo
• Drawer móvil con animaciones suaves
• Botón de logout con estilos de advertencia

Navegación:

• /user/profile - Perfil del usuario
• /user/gestion-invernadero - Gestión de invernaderos
• Logout con confirmación

Diferencias con AdminHeader:

• Título: "Panel de Usuario" vs "Admin Panel"
• Opciones de menú orientadas a gestión de invernaderos
• Mismo sistema de theming y responsive

Header Landing (Header/landing/inico/AppHeader.tsx)

Cabecera principal de la página de aterrizaje con navegación pública.

Características:

• Logo clickeable de UTEQ con efecto de escala en hover
• Título "Invernaderos UTEQ" con gradiente de texto
• Navegación condicional basada en la ruta actual
• Delegación de menú a componentes Desktop/Mobile
• Sticky positioning con backdrop-filter blur
• Alturas responsive: 60px (xs), 72px (md), 80px (lg)

Props:

• onRegisterClick - Handler para registro
• onLoginClick - Handler para login
• onAboutClick - Handler para "sobre nosotros"
• onLogoClick - Handler para click en logo
• onHomeClick - Handler para volver a inicio

Componentes hijos:

• DesktopMenu - Menú horizontal para pantallas grandes
• MobileMenu - Drawer lateral para móviles

Menú Desktop Landing (Header/landing/Desktop/DesktopMenu.tsx)

Componente de navegación horizontal para dispositivos grandes.

Características:

• Botones con bordes translúcidos y efectos hover
• Navegación dinámica que oculta botón de página actual
• Botón de "Registrarse" con gradiente destacado (verde/amarillo)
• Transiciones suaves en hover con translateY(-2px)
• Icons de Ant Design para cada opción
• Tamaños adaptativos: large o middle

Botones:

• Inicio (HomeOutlined)
• Sobre Nosotros (TeamOutlined)
• Iniciar Sesión (LoginOutlined)
• Registrarse (UserAddOutlined) - Estilo principal con gradiente

Menú Mobile Landing (Header/landing/mobile/MobileMenu.tsx)

Drawer de navegación para dispositivos móviles.

Características:

• Drawer desde la derecha con ancho de 300px
• Fondo con gradiente del tema principal
• Título "Navegación" con gradiente de texto
• Botones verticales con altura de 56px
• Iconos de 18px con espaciado consistente
• Animación translateX(8px) en hover para botones normales
• Botón de Registrarse con gradiente verde/amarillo destacado
• CloseIcon personalizado con fondo translúcido

Efectos:

• Backdrop filter blur en el overlay
• Transform en hover para feedback visual
• Border y background color changes

📊 Footers (Pies de página)

Footer de Administrador (Footer/admin/AdminFooter.tsx)

Pie de página simple para el panel administrativo.

Características:

• Diseño minimalista con copyright centrado
• Fondo azul oscuro (#003366) consistente con tema
• Texto: "©{año} Invernaderos UTEQ. Todos los derechos reservados."
• Color de texto: rgba(255, 255, 255, 0.65)
• Tipografía de Ant Design con Typography.Text

Footer de Usuario (Footer/user/UserFooter.tsx)

Pie de página simple para el panel de usuario.

Características:

• Fondo gris claro (#f0f2f5) para contraste suave
• Texto secondary de Ant Design
• Copyright dinámico con año actual
• Texto: "Sistema de Gestión de Invernaderos ©{año} UTEQ"
• Alineación centrada

Footer Landing - Inicio (Footer/landing/inicio/AppFooter.tsx)

Contenedor principal del footer con renderizado condicional responsive.

Características:

• Renderiza FooterMobile o FooterDesktop según breakpoint
• Breakpoint de cambio: md (768px)
• Gradiente de fondo: linear-gradient(135deg, #2A3A6B, #1C2B4E)
• Box shadow superior para efecto elevado
• Divider horizontal con opacidad 0.2
• Padding adaptativo: 32px (xs), 40px (sm), 48px (md+)
• Border superior con color translúcido
• Copyright final común para ambas vistas

Delegación:

• Pasa screens a componentes hijos para consistencia responsive

Footer Landing Desktop (Footer/landing/Desktop/FooterDesktop.tsx)

Footer completo con múltiples columnas para pantallas grandes.

Características:

• Layout de 3 columnas con Row y Col de Ant Design
• Responsive gutters: [48, 32]

Columna 1 - Branding:

• Logo de UTEQ (45-40px de altura)
• Descripción del sistema: "Sistema inteligente de control climático..."
• Logo con border-radius y drop-shadow
• Texto con max-width de 280px

Columna 2 - Redes Sociales:

• Título: "Conecta con Nosotros"
• Enlaces a Facebook, Instagram, LinkedIn de UTEQ
• Icons de 20-18px con efectos hover
• Color change a theme.secondary en hover
• Transform translateY(-2px) para elevación

Columna 3 - Contacto y Ubicación:

• Información de contacto:
  • Email: contacto@UTEQ (con MailOutlined)
  • Teléfono: +593 2 123 4567 (con PhoneOutlined)
• Dirección completa de UTEQ en Querétaro
• Icons con colores del tema (secondary, accent)
• EnvironmentOutlined para ubicación

Estilos:

• Títulos con gradiente de texto
• fontSize adaptativo según breakpoint
• Alineación centrada en todas las columnas

Footer Landing Mobile (Footer/landing/mobile/FooterMobile.tsx)

Footer compacto vertical para dispositivos móviles.

Características:

• Layout de una sola columna centrada
• Logo de UTEQ más pequeño (30-35px)
• Secciones apiladas verticalmente con gaps adaptativos

Secciones:

1. Logo - Parte superior
2. Contacto - Email y teléfono con icons
3. Redes Sociales - Título "Síguenos" + enlaces sociales
4. Ubicación - Dirección de UTEQ con max-width 250px

Diseño:

• Space large entre iconos sociales
• fontSize reducido: 14-15px
• Icons de 18-20px
• Mismo sistema de hover que desktop
• Text align center para legibilidad en móvil

---

🎭 Sistema de Theming en Layouts

Paleta de Colores Común

primary: '#2A3A6B'        // Azul oscuro principal
primaryDark: '#1C2B4E'    // Azul oscuro más intenso
secondary: '#8BC34A'      // Verde UTEQ
accent: '#FBC02D'         // Amarillo dorado
text: '#FFFFFF'           // Blanco puro
textLight: '#E0E0E0'      // Gris claro
textMuted: '#A0A0A0'      // Gris apagado

Utilidad hexToRgba

Función helper para convertir colores hex a rgba con opacity:

hexToRgba('#2A3A6B', 0.3) // → 'rgba(42, 58, 107, 0.3)'

Características Comunes de Diseño

• Gradientes: Uso extensivo de linear-gradient(135deg, ...)
• Glassmorphism: Backdrop filters y backgrounds translúcidos
• Shadows: Box shadows con rgba para profundidad
• Animaciones: Transitions de 0.3s ease en hover states
• Typography: Gradientes de texto con WebkitBackgroundClip
• Responsive: Breakpoints de Ant Design (xs, sm, md, lg)

---

⚡ Hooks Personalizados (src/hook/)

Los hooks personalizados encapsulan lógica de negocio reutilizable siguiendo las mejores prácticas de React.

🔐 Hooks de Autenticación (auth/)

useLoginForm (auth/login/useLoginForm.ts)

Hook para manejo completo del formulario de inicio de sesión con protección contra fuerza bruta.

Estado:

• loading - Indicador de petición en curso
• isBlocked - Indica si el formulario está bloqueado por intentos fallidos
• timeLeft - Tiempo restante de bloqueo en formato "MM:SS"
• loginAttempts - Contador de intentos fallidos

Funciones retornadas:

• form - Instancia de formulario de Ant Design
• onFinish(values) - Handler de submit con validación y hasheo SHA-256

Características:

• Protección anti fuerza bruta: Máximo 4 intentos antes de bloqueo
• Bloqueo temporal: 2 minutos de bloqueo tras exceder intentos
• Contador en tiempo real: Actualización cada segundo del tiempo restante
• Hash de contraseña: SHA-256 con crypto-js antes de enviar
• Redirección por rol: Admin (1) → /admin, Usuario (2) → /user
• Verificación de cuenta: Redirige a /activar-cuenta si verified=2
• Reset automático: Limpia intentos tras login exitoso
• Mensajes contextuales: Muestra intento actual y máximo permitido

Constantes:

MAX_LOGIN_ATTEMPTS = 4
BLOCK_DURATION_MINUTES = 2

useRegisterForm (auth/register/RegisterUserData.ts)

Hook para gestión del formulario de registro con validación de campos únicos.

Estado:

• loading - Estado de carga durante registro
• form - Instancia del formulario

Funciones retornadas:

• onFinish(values) - Handler de submit con trimming y hash

Características:

• Trimming automático: Elimina espacios de nombre y email
• Hash SHA-256: Contraseña hasheada con crypto-js
• Validación de duplicados: Manejo específico de errores por campo
  • RepeatedMail - Marca error en campo email
  • RepeatedUserName - Marca error en campo name
• Reset de formulario: Limpia campos tras éxito
• Redirección: Navega a / tras registro exitoso
• Mensajes amigables: Traduce errores del API a español

useVerifyAccountForm (auth/verify/useVerifyAccountForm.ts)

Hook para verificación de cuenta con código enviado por email.

Estado:

• loading - Estado de verificación en curso
• resendLoading - Estado de reenvío de código
• userId - ID extraído del token JWT
• form - Instancia del formulario

Funciones retornadas:

• onFinish(values) - Verifica la cuenta con el código ingresado
• onResendCode() - Reenvía código de verificación al email

Características:

• Extracción de userId: Lee token JWT del localStorage al montar
• Validación de token: Verifica existencia y validez del token
• Logout tras verificación: Elimina authToken tras éxito
• Redirección a login: / para nuevo inicio de sesión
• Manejo de errores específico: VerificationFailed con mensaje customizado
• Protección de ruta: Redirige a / si no hay token válido

Flujo:

1. Monta componente → extrae userId del token
2. Usuario ingresa código
3. Envía userId + código al backend
4. Si exitoso → logout + redirección
5. Opción de reenviar código si expiró

👤 Hooks de Usuario (user/)

useUserProfile (user/profile/useUserProfile.ts)

Hook completo para gestión del perfil de usuario con actualización selectiva.

Estado:

• userData - Datos del perfil actual (UserProfileDto)
• loading - Carga inicial del perfil
• isUpdating - Indicador de actualización en curso
• userId - ID extraído del token JWT
• showPasswordFields - Toggle de campos de contraseña
• form - Formulario con valores iniciales

Funciones retornadas:

• handleUpdate(values) - Actualiza perfil y/o contraseña selectivamente
• setShowPasswordFields - Muestra/oculta campos de contraseña

Características:

• Decodificación de token: Extrae userId de nameid o sub
• Carga automática: useEffect con fetchUser al montar
• Actualización inteligente: Detecta qué cambió (perfil vs contraseña)
• Validación de cambios: No envía si no hay modificaciones
• Actualización dual: Soporta cambio de perfil y contraseña simultáneos
• Reset de password fields: Limpia campos tras cambio exitoso
• Manejo de conflictos: Status 409 para correo/usuario duplicado
• Pre-population: Form.setFieldsValue con datos del perfil

Lógica de actualización:

hasProfileChanged → updateProfile()
isPasswordAttempt → changePassword()
ninguno → message.info('No hay cambios')

⚙️ Hooks de Administración (admin/)

useUserManagement (admin/gestionuser/useUserManagement.ts)

Hook completo para CRUD de usuarios por administrador.

Estado:

• users - Array de usuarios en formato tabla (UserTableData[])
• loading - Estado de carga de operaciones

Funciones retornadas:

• fetchUsers() - Recarga lista de usuarios
• handleCreateUser(values) - Crea nuevo usuario con hash de contraseña
• handleEditUser(id, values) - Actualiza usuario existente
• handleDeleteUser(id) - Inactiva usuario con confirmación modal
• handleResendCode(id) - Reenvía código de verificación

Características:

• Mapeo de datos: Transforma GetUsersDto → UserTableData
• Carga automática: useEffect con fetchUsers al montar
• Confirmación de eliminación: Modal de Ant Design antes de inactivar
• Feedback inmediato: Recarga lista tras cada operación exitosa
• Manejo de errores robusto: Extrae errorMessage del response
• Password raw: Acepta rawPassword para hasheo en servicio
• Mensajes de éxito: message.success tras cada acción

Funciones auxiliares:

• mapToTableData() - Convierte DTOs a formato de tabla con key

useAdminProfile (admin/perfile/useAdminProfile.ts)

Hook para gestión del perfil del administrador.

Estado:

• user - Datos del perfil (UserProfileDto con role, status, verified)
• loading - Estado de carga
• userId - ID extraído del token

Funciones retornadas:

• handleUpdateInfo(values) - Actualiza mail y userName
• handleChangePassword(currentPass, newPass) - Cambia contraseña

Características:

• Parsing de JWT: Función helper parseJwt() local
• Extracción de ID: Lee sub o nameid del token
• useCallback: fetchProfile optimizado con dependencias
• Validación de userId: Retorna early si no existe
• Manejo de errores: Extrae mensaje del backend o usa genérico
• Return boolean: Retorna true/false para feedback en UI
• Recarga automática: fetchProfile tras actualización exitosa

🎨 Hooks de UI (landing/)

useScrollAnimation (landing/invernadero/Hero/useScrollAnimation.ts)

Hook para animaciones basadas en scroll con IntersectionObserver.

Parámetros (opcionales):

{
  threshold?: number        // Porcentaje visible para activar (default: 0.1)
  rootMargin?: string       // Margen del viewport (default: '0px')
  triggerOnce?: boolean     // Animar solo una vez (default: false)
}

Retorna:

• ref - Ref para el elemento a observar (HTMLDivElement)
• isVisible - Boolean que indica si el elemento es visible

Características:

• IntersectionObserver API: Detección nativa de visibilidad
• Optimización de performance: Desconecta observer según config
• Modo una vez: triggerOnce desconecta tras primera activación
• Cleanup automático: useEffect cleanup desconecta observer
• Referencia persistente: useRef para evitar re-renders
• Configuración flexible: threshold y rootMargin personalizables

Uso típico:

const { ref, isVisible } = useScrollAnimation({ 
  threshold: 0.3, 
  triggerOnce: true 
});

<div ref={ref} className={isVisible ? 'fade-in' : 'hidden'}>
  Contenido animado
</div>

Casos de uso:

• Fade-in de secciones al hacer scroll
• Animaciones de entrada para cartas/tarjetas
• Lazy loading de imágenes
• Activación de contadores animados
• Parallax effects

---

🎯 Patrones Comunes en Hooks

Extracción de userId del Token

Todos los hooks de perfil usan este patrón:

const parseJwt = (token: string) => {
  try {
    return JSON.parse(atob(token.split('.')[1]));
  } catch (e) {
    return null;
  }
};

const id = decoded?.nameid || decoded?.sub;

Manejo de Mensajes con Ant Design

const { message } = App.useApp();
message.success('Operación exitosa');
message.error('Error en operación');
message.info('Información');

Patrón de Carga con useCallback

const fetchData = useCallback(async () => {
  setLoading(true);
  try {
    const data = await service.getData();
    setState(data);
  } catch (error) {
    message.error('Error al cargar');
  } finally {
    setLoading(false);
  }
}, [dependencies]);

Return de Funciones

Hooks de formularios retornan boolean en handlers para permitir cierre condicional de modales:

const success = await handleUpdate(values);
if (success) closeModal();

---

🧩 Componentes Reutilizables (src/components/)

Componentes modulares diseñados para ser flexibles, responsivos y visualmente atractivos.

🌿 Landing Page (landing/invernadero/)

HeroSection

Sección principal de la landing page que captura la atención del usuario.

• Características:
  • Animaciones de entrada con useScrollAnimation.
  • Fondo con gradientes y efectos de "glow".
  • Grid animado de fondo.
  • Tarjeta principal con efecto glassmorphism.
  • Previsualización de estadísticas en tiempo real.
  • Botones de llamada a la acción (Demo, Documentación).

FeaturesSection

Muestra las características principales del sistema en un grid responsivo.

• Características:
  • Tarjetas con efectos de hover (elevación y brillo).
  • Iconos animados.
  • Gradientes personalizados para cada característica.
  • Layout adaptable (grid de 1, 2 o 4 columnas).

StatsSection

Sección de prueba social y métricas de rendimiento.

• Características:
  • Contadores animados que suben desde 0 hasta el valor final.
  • Tarjetas de estadísticas con iconos y gradientes.
  • Actualización dinámica basada en la visibilidad (Intersection Observer).

CTASection (Call to Action)

Sección final para convertir visitantes en usuarios.

• Características:
  • Diseño destacado con fondo de alto contraste.
  • Botones grandes para "Solicitar Demo" o "Consultar".
  • Elementos decorativos animados.

📊 Visualización de Datos (user/)

SensorChart / SensorChartCalido

Gráficos de área interactivos para visualizar datos históricos de sensores.

• Librería: Recharts.
• Props:
  • data: Array de datos históricos.
  • tempDataKey, humidityDataKey, etc.: Claves para mapear los datos.
  • optimalTempMin/Max: Rango para sombrear la zona óptima en el gráfico.
• Características:
  • Filtros de Tiempo: Botones para ver 24h, 7 días o 30 días.
  • Tooltip Personalizado: Muestra detalles precisos al pasar el mouse.
  • Zonas de Referencia: Área verde semitransparente indicando valores óptimos.
  • Gradientes: Rellenos de área con desvanecimiento vertical.
  • Responsive: Se adapta al ancho del contenedor.

SensorStatistic / SensorStatisticCalido

Tarjetas de métricas individuales para el dashboard de usuario.

• Props:
  • icon: Icono de Ant Design.
  • value: Valor numérico actual.
  • unit: Unidad de medida (°C, %, etc.).
  • trend: Valor de tendencia (positivo/negativo).
  • color: Color base para el gradiente.
• Características:
  • Indicadores de Tendencia: Flechas arriba/abajo con colores semánticos (verde/rojo).
  • Diseño Visual: Fondos con gradientes basados en el color del sensor (Naranja para temp, Azul para humedad).
  • Interactividad: Efectos de elevación al pasar el mouse.
  • Sombra de Texto: Para mejorar legibilidad sobre fondos coloridos.

---

🌐 Vistas Públicas (Landing)

src/views/landing/

ResponsiveView (Inicio/ResponsiveView.tsx)

Componente contenedor principal para la sección pública de la aplicación.

• Función: Actúa como layout y enrutador para las páginas públicas.
• Características:
  • Layout Adaptativo: Ajusta el estilo del contenido (activeContentStyle) según la ruta actual (ancho completo vs caja centrada).
  • ConfigProvider: Inyecta el tema personalizado de Ant Design (colores, bordes) a todos los componentes hijos.
  • Enrutamiento: Define las rutas para Home, About Us, Login y Register.
  • Header/Footer: Integra AppHeader y AppFooter de forma consistente.

InvernaderoUteqView (invernadero/InvernaderoUteqView.tsx)

Vista principal (Home) de la landing page.

• Composición: Orquesta la visualización de las secciones clave:
  1. HeroSection: Bienvenida e introducción.
  2. FeaturesSection: Características del sistema.
  3. StatsSection: Estadísticas y métricas.
  4. CTASection: Llamada a la acción final.
• Diseño: Fondo oscuro primario (theme.primaryDark) para consistencia visual.

AboutUsView (about/AboutUsView.tsx)

Página "Sobre Nosotros" que comunica la identidad del proyecto.

• Secciones:
  • Intro: Logo y título con animación de entrada.
  • Misión/Visión/Valores: Tarjetas interactivas con iconos y bordes de colores temáticos (Secundario, Acento, Texto Claro).
• Animaciones:
  • useScrollAnimation: Elementos aparecen suavemente al hacer scroll.
  • Hover Effects: Las tarjetas se elevan y proyectan sombra al pasar el mouse.
• Estilo: Fondo con gradientes y elementos decorativos flotantes (círculos radiales).

---

🔐 Vistas de Autenticación (auth/)

LoginView (login/LoginView.tsx)

Interfaz de inicio de sesión segura y moderna.

• Diseño: Layout dividido (Split Screen) con imagen de portada a la izquierda y formulario a la derecha (en desktop).
• Características:
  • Validación en tiempo real: Feedback visual en campos de correo y contraseña.
  • Mecanismo de Bloqueo: Muestra alerta visual con contador regresivo si el usuario está bloqueado (isBlocked).
  • Estética: Uso de glassmorphism en el contenedor del formulario y gradientes sutiles.

RegisterView (register/RegisterView.tsx)

Formulario de registro de nuevos usuarios con validaciones robustas.

• Validaciones:
  • Contraseña Fuerte: Requiere mayúsculas, caracteres especiales y longitud mínima.
  • Confirmación: Verifica que las contraseñas coincidan.
  • Términos: Checkbox obligatorio con enlace a la vista de términos.
• UX: Feedback visual en cada campo (hasFeedback) y transiciones suaves.

VerifyAccountView (Activacioncuenta/VerifyAccountView.tsx)

Vista para la activación de cuenta mediante código OTP (One-Time Password).

• Componentes:
  • Input OTP: Campo especializado de Ant Design para ingresar el código de 8 dígitos.
  • Feedback Visual: Icono de éxito/estado grande y claro.
• Funcionalidad:
  • Botón para validar el código.
  • Opción para reenviar el código si no se recibió.
  • Navegación de retorno al login.

TermsView (terminos/TermsView.tsx)

Vista informativa de Términos y Condiciones y Política de Privacidad.

• Diseño: Tarjeta central con contenido scrolleable para facilitar la lectura de textos largos.
• Estilo: Tipografía legible, secciones claramente separadas y scrollbar personalizado para integrarse con el tema oscuro.
• Navegación: Botón "Volver" que regresa a la página anterior en el historial.

---

🛡️ Panel de Administración (admin/)

AdminLayout (AdminLayout.tsx)

Estructura base para todas las vistas administrativas.

• Componentes:
  • AdminHeader: Barra superior con menú de usuario y navegación.
  • AdminFooter: Pie de página informativo.
  • Drawer: Menú lateral desplegable para navegación móvil.
• Estilo: Fondo gris claro (#f0f2f5) típico de dashboards administrativos.

AdminWelcomeView (page/dashboard/AdminWelcomeView.tsx)

Vista de bienvenida al dashboard.

• Diseño: Minimalista y centrado, ofreciendo un punto de partida claro para el administrador.

UserManagementView (page/gestionuser/UserManagementView.tsx)

Panel principal para la gestión CRUD de usuarios.

• Tabla de Usuarios:
  • Columnas: Usuario, Correo, Rol (Tag coloreado), Estado (Icono + Color), Verificación.
  • Acciones: Editar, Eliminar (Inactivar), Reenviar Código de Verificación.
  • Responsividad: Columnas fijas y scroll horizontal en móviles.
• Funcionalidades:
  • Filtrado/Ordenamiento: Por nombre de usuario.
  • Modales: Integración con UserFormModal para crear y editar.

UserFormModal (formulariomodal/UserFormModal.tsx)

Formulario modal reutilizable para crear y editar usuarios.

• Modos:
  • Creación: Permite definir nombre, correo, contraseña inicial y rol.
  • Edición: Restringido a nombre y correo (muestra alerta informativa).
• Validaciones: Reglas estrictas para correo y longitud de campos.

AdminProfileView (page/perfile/AdminProfileView.tsx)

Vista de perfil personal del administrador.

• Secciones:
  • Tarjeta de Perfil: Avatar, rol (etiqueta dorada) y datos básicos.
  • Acciones: Botones para editar información y cambiar contraseña.
• Modales:
  • Editar Info: Formulario para actualizar nombre y correo.
  • Seguridad: Formulario para cambio de contraseña con validación de la actual.

---

👤 Panel de Usuario (user/)

UserLayout (UserLayout.tsx)

Layout principal para la interfaz de usuario estándar.

• Estructura: Similar al admin pero con opciones limitadas en el menú lateral y header.
• Navegación: Acceso rápido a "Gestión de Invernaderos" y cierre de sesión.

WelcomeUserView (dasbord/WelcomeUserView.tsx)

Dashboard de bienvenida para el usuario.

• Resumen: Muestra tarjetas de acceso rápido a las funcionalidades principales:
  • Monitoreo en Vivo.
  • Historial y Análisis.
  • Configuración.
• Personalización: Saludo personalizado con el nombre del usuario.

GestionInvernaderoView (gestionInvernadero/GestionInvernaderoView.tsx)

Vista central para la administración de los invernaderos del usuario.

• CRUD Completo:
  • Listar: Tabla con nombre, ubicación y acciones.
  • Crear/Editar: Modales con formularios validados.
  • Eliminar: Confirmación de seguridad antes de borrar.
• Navegación a Sensores: Botones directos para ver datos del lado "Frío" (❄️) o "Cálido" (☀️).

Vistas de Monitoreo (climafrio/ y climacalido/)

Vistas detalladas para la visualización de datos de sensores (GestionInvernaderoFrioView y GestionInvernaderoCalidoView).

• Pestañas de Navegación:
  1. Tiempo Real: Tarjetas KPI con actualización automática cada 10s.
  2. Último Mes: Gráficos de tendencia y promedios de los últimos 30 días.
  3. Rango Personalizado: Selectores de fecha/hora para análisis histórico específico.
• Visualización:
  • Gráficos: Líneas de tendencia para Temperatura, Humedad y Luminosidad usando Recharts.
  • KPIs: Tarjetas con valores actuales, promedios y flechas de tendencia.

UserProfileView (profile/UserProfileView.tsx)

Gestión del perfil personal del usuario.

• Edición: Formulario unificado para actualizar nombre y correo.
• Seguridad: Sección desplegable ("Cambiar contraseña") para actualizar credenciales de forma segura.
• Feedback: Indicadores de carga y mensajes de éxito/error.

---

🚀 Despliegue e Infraestructura

Frontend (Vercel)

La aplicación frontend está desplegada en Vercel, aprovechando su red global de Edge Network para una entrega de contenido rápida y segura.

• CI/CD: Integración continua con GitHub para despliegues automáticos en cada push a la rama main.
• Optimización: Compresión de assets y caché inteligente.

Backend (Microsoft Azure)

El backend de la aplicación está construido con ASP.NET Core (C#) y alojado en Azure App Service.

• Base de Datos: Azure SQL Database para almacenamiento relacional seguro y escalable.
• API: RESTful API que sirve los datos al frontend mediante endpoints seguros.