feat: Implementación de gestión manual y panel de administración
Se introduce una refactorización masiva y se añaden nuevas funcionalidades críticas para la gestión del inventario, incluyendo un panel de administración para la limpieza de datos y un sistema completo para la gestión manual de equipos.
### Nuevas Funcionalidades
*   **Panel de Administración:** Se crea una nueva vista de "Administración" para la gestión de datos maestros. Permite unificar valores inconsistentes (ej: "W10" -> "Windows 10 Pro") y eliminar registros maestros no utilizados (ej: Módulos de RAM) para mantener la base de datos limpia.
*   **Gestión de Sectores (CRUD):** Se añade una vista dedicada para crear, editar y eliminar sectores de la organización.
*   **Diferenciación Manual vs. Automático:** Se introduce una columna `origen` en la base de datos para distinguir entre los datos recopilados automáticamente por el script y los introducidos manualmente por el usuario. La UI ahora refleja visualmente este origen.
*   **CRUD de Equipos Manuales:** Se implementa la capacidad de crear, editar y eliminar equipos de origen "manual" a través de la interfaz de usuario. Se protege la eliminación de equipos automáticos.
*   **Gestión de Componentes Manuales:** Se permite añadir y eliminar componentes (Discos, RAM, Usuarios) a los equipos de origen "manual".
### Mejoras de UI/UX
*   **Refactorización de Estilos:** Se migran todos los estilos en línea del componente `SimpleTable` a un archivo CSS Module (`SimpleTable.module.css`), mejorando la mantenibilidad y el rendimiento.
*   **Notificaciones de Usuario:** Se integra `react-hot-toast` para proporcionar feedback visual inmediato (carga, éxito, error) en todas las operaciones asíncronas, reemplazando los `alert`.
*   **Componentización:** Se extraen todos los modales (`ModalDetallesEquipo`, `ModalAnadirEquipo`, etc.) a sus propios componentes, limpiando y simplificando drásticamente el componente `SimpleTable`.
*   **Paginación en Tabla Principal:** Se implementa paginación completa en la tabla de equipos, con controles para navegar, ir a una página específica y cambiar el número de items por página. Se añade un indicador de carga inicial.
*   **Navegación Mejorada:** Se reemplaza la navegación por botones con un componente `Navbar` estilizado y dedicado, mejorando la estructura visual y de código.
*   **Autocompletado de Datos:** Se introduce un componente `AutocompleteInput` reutilizable para guiar al usuario a usar datos consistentes al rellenar campos como OS, CPU y Motherboard. Se implementa búsqueda dinámica para la asociación de usuarios.
*   **Validación de MAC Address:** Se añade validación de formato en tiempo real y auto-formateo para el campo de MAC Address, reduciendo errores humanos.
*   **Consistencia de Iconos:** Se unifica el icono de eliminación a (🗑️) en toda la aplicación para una experiencia de usuario más coherente.
### Mejoras en el Backend / API
*   **Seguridad de Credenciales:** Las credenciales SSH para la función Wake On Lan se mueven del código fuente a `appsettings.json`.
*   **Nuevo `AdminController`:** Se crea un controlador dedicado para las tareas administrativas, con endpoints para obtener valores únicos de componentes y para ejecutar la lógica de unificación y eliminación.
*   **Endpoints de Gestión Manual:** Se añaden rutas específicas (`/manual/...` y `/asociacion/...`) para la manipulación de datos de origen manual, separando la lógica de la gestión automática.
*   **Protección de Datos Automáticos:** Los endpoints `DELETE` y `PUT` ahora validan el campo `origen` para prevenir la modificación o eliminación no deseada de datos generados automáticamente.
*   **Correcciones y Refinamiento:** Se soluciona el mapeo incorrecto de fechas (`created_at`, `updated_at`), se corrigen errores de compilación y se refinan las consultas SQL para incluir los nuevos campos.
			
			
This commit is contained in:
		
							
								
								
									
										44
									
								
								frontend/src/components/ModalAnadirUsuario.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								frontend/src/components/ModalAnadirUsuario.tsx
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,44 @@ | ||||
| import React, { useState } from 'react'; | ||||
| import styles from './SimpleTable.module.css'; | ||||
| import AutocompleteInput from './AutocompleteInput'; | ||||
|  | ||||
| interface Props { | ||||
|   onClose: () => void; | ||||
|   onSave: (usuario: { username: string }) => void; | ||||
| } | ||||
|  | ||||
| const BASE_URL = 'http://localhost:5198/api'; | ||||
|  | ||||
| const ModalAnadirUsuario: React.FC<Props> = ({ onClose, onSave }) => { | ||||
|   const [username, setUsername] = useState(''); | ||||
|  | ||||
|   const fetchUserSuggestions = async (query: string): Promise<string[]> => { | ||||
|     if (!query) return []; | ||||
|     const response = await fetch(`${BASE_URL}/usuarios/buscar/${query}`); | ||||
|     if (!response.ok) return []; | ||||
|     return response.json(); | ||||
|   }; | ||||
|  | ||||
|   return ( | ||||
|     <div className={styles.modalOverlay}> | ||||
|       <div className={styles.modal}> | ||||
|         <h3>Añadir Usuario Manualmente</h3> | ||||
|         <label>Nombre de Usuario</label> | ||||
|         <AutocompleteInput | ||||
|           name="username" | ||||
|           value={username} | ||||
|           onChange={e => setUsername(e.target.value)} | ||||
|           className={styles.modalInput} | ||||
|           fetchSuggestions={fetchUserSuggestions} | ||||
|           placeholder="Escribe para buscar o crear un nuevo usuario" | ||||
|         /> | ||||
|         <div className={styles.modalActions}> | ||||
|           <button onClick={() => onSave({ username })} className={`${styles.btn} ${styles.btnPrimary}`} disabled={!username.trim()}>Guardar</button> | ||||
|           <button onClick={onClose} className={`${styles.btn} ${styles.btnSecondary}`}>Cancelar</button> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   ); | ||||
| }; | ||||
|  | ||||
| export default ModalAnadirUsuario; | ||||
		Reference in New Issue
	
	Block a user