Files
Inventario-IT/backend/Controllers/DashboardController.cs

86 lines
3.0 KiB
C#
Raw Normal View History

feat: Implementa Dashboard de estadísticas visuales del inventario Se añade una nueva sección "Dashboard" para proporcionar una visión general y analítica del inventario de IT. Esta vista transforma los datos brutos en gráficos interactivos, facilitando la toma de decisiones y la comprensión del estado del parque informático. La implementación se realizó de forma iterativa, refinando tanto la obtención de datos como la presentación visual para una mejor experiencia de usuario. **Principales Cambios:** **1. Backend:** - Se crea un nuevo `DashboardController` con el endpoint `GET /api/dashboard/stats`. - Se implementan consultas SQL agregadas para obtener estadísticas por: - Sistema Operativo. - Cantidad de equipos por Sector (mostrando todos los sectores). - Modelos de CPU (mostrando todos los modelos). - Cantidad de Memoria RAM instalada (GB). **2. Frontend:** - Se integran las librerías `chart.js` y `react-chartjs-2` para la visualización de datos. - Se añade una nueva vista "Dashboard" accesible desde la barra de navegación principal. - Se crean componentes reutilizables para cada tipo de gráfico: `OsChart`, `RamChart`, `CpuChart` y `SectorChart`. - Se diseña un layout responsivo en formato de grilla 2x2 para una visualización equilibrada de los cuatro gráficos. **3. Mejoras de Experiencia de Usuario (UX):** - Se utilizan gráficos de barras horizontales (`indexAxis: 'y'`) para mejorar la legibilidad de etiquetas largas, como los modelos de CPU y nombres de sectores. - Se implementan contenedores con scroll vertical (`overflow-y: auto`) para los gráficos de CPU y Sectores. Esto permite mostrar la totalidad de los datos sin comprometer el diseño ni crear gráficos excesivamente grandes. - Se calcula una altura dinámica para los gráficos de barras para que se adapten a la cantidad de datos que contienen, mejorando la presentación.
2025-10-09 13:29:29 -03:00
using Dapper;
using Inventario.API.Data;
using Microsoft.AspNetCore.Mvc;
feat: Sistema de autenticación por JWT ste commit introduce un sistema completo de autenticación basado en JSON Web Tokens (JWT) para proteger los endpoints de la API y gestionar el acceso de los usuarios a la aplicación. **Cambios en el Backend (ASP.NET Core):** - Se ha creado un nuevo `AuthController` con un endpoint `POST /api/auth/login` para validar las credenciales del usuario. - Implementada la generación de tokens JWT con una clave secreta y emisor/audiencia configurables desde `appsettings.json`. - Se ha añadido una lógica de expiración dinámica para los tokens: - **6 horas** para sesiones temporales (si el usuario no marca "Mantener sesión"). - **1 año** para sesiones persistentes. - Se han protegido todos los controladores existentes (`EquiposController`, `SectoresController`, etc.) con el atributo `[Authorize]`, requiriendo un token válido para su acceso. - Actualizada la configuración de Swagger para incluir un campo de autorización "Bearer Token", facilitando las pruebas de los endpoints protegidos desde la UI. **Cambios en el Frontend (React):** - Se ha creado un componente `Login.tsx` que actúa como la puerta de entrada a la aplicación. - Implementado un `AuthContext` para gestionar el estado global de autenticación (`isAuthenticated`, `token`, `isLoading`). - Añadida la funcionalidad "Mantener sesión iniciada" a través de un checkbox en el formulario de login. - Si está marcado, el token se guarda en `localStorage`. - Si está desmarcado, el token se guarda en `sessionStorage` (la sesión se cierra al cerrar el navegador/pestaña). - La función `request` en `apiService.ts` ha sido refactorizada para inyectar automáticamente el `Authorization: Bearer <token>` en todas las peticiones a la API. - Se ha añadido un botón de "Cerrar Sesión" en la barra de navegación que limpia el token y redirige al login. - Corregido un bug que provocaba un bucle de recarga infinito después de un inicio de sesión exitoso debido a una condición de carrera.
2025-10-13 10:40:20 -03:00
using Microsoft.AspNetCore.Authorization;
feat: Implementa Dashboard de estadísticas visuales del inventario Se añade una nueva sección "Dashboard" para proporcionar una visión general y analítica del inventario de IT. Esta vista transforma los datos brutos en gráficos interactivos, facilitando la toma de decisiones y la comprensión del estado del parque informático. La implementación se realizó de forma iterativa, refinando tanto la obtención de datos como la presentación visual para una mejor experiencia de usuario. **Principales Cambios:** **1. Backend:** - Se crea un nuevo `DashboardController` con el endpoint `GET /api/dashboard/stats`. - Se implementan consultas SQL agregadas para obtener estadísticas por: - Sistema Operativo. - Cantidad de equipos por Sector (mostrando todos los sectores). - Modelos de CPU (mostrando todos los modelos). - Cantidad de Memoria RAM instalada (GB). **2. Frontend:** - Se integran las librerías `chart.js` y `react-chartjs-2` para la visualización de datos. - Se añade una nueva vista "Dashboard" accesible desde la barra de navegación principal. - Se crean componentes reutilizables para cada tipo de gráfico: `OsChart`, `RamChart`, `CpuChart` y `SectorChart`. - Se diseña un layout responsivo en formato de grilla 2x2 para una visualización equilibrada de los cuatro gráficos. **3. Mejoras de Experiencia de Usuario (UX):** - Se utilizan gráficos de barras horizontales (`indexAxis: 'y'`) para mejorar la legibilidad de etiquetas largas, como los modelos de CPU y nombres de sectores. - Se implementan contenedores con scroll vertical (`overflow-y: auto`) para los gráficos de CPU y Sectores. Esto permite mostrar la totalidad de los datos sin comprometer el diseño ni crear gráficos excesivamente grandes. - Se calcula una altura dinámica para los gráficos de barras para que se adapten a la cantidad de datos que contienen, mejorando la presentación.
2025-10-09 13:29:29 -03:00
namespace Inventario.API.Controllers
{
feat: Sistema de autenticación por JWT ste commit introduce un sistema completo de autenticación basado en JSON Web Tokens (JWT) para proteger los endpoints de la API y gestionar el acceso de los usuarios a la aplicación. **Cambios en el Backend (ASP.NET Core):** - Se ha creado un nuevo `AuthController` con un endpoint `POST /api/auth/login` para validar las credenciales del usuario. - Implementada la generación de tokens JWT con una clave secreta y emisor/audiencia configurables desde `appsettings.json`. - Se ha añadido una lógica de expiración dinámica para los tokens: - **6 horas** para sesiones temporales (si el usuario no marca "Mantener sesión"). - **1 año** para sesiones persistentes. - Se han protegido todos los controladores existentes (`EquiposController`, `SectoresController`, etc.) con el atributo `[Authorize]`, requiriendo un token válido para su acceso. - Actualizada la configuración de Swagger para incluir un campo de autorización "Bearer Token", facilitando las pruebas de los endpoints protegidos desde la UI. **Cambios en el Frontend (React):** - Se ha creado un componente `Login.tsx` que actúa como la puerta de entrada a la aplicación. - Implementado un `AuthContext` para gestionar el estado global de autenticación (`isAuthenticated`, `token`, `isLoading`). - Añadida la funcionalidad "Mantener sesión iniciada" a través de un checkbox en el formulario de login. - Si está marcado, el token se guarda en `localStorage`. - Si está desmarcado, el token se guarda en `sessionStorage` (la sesión se cierra al cerrar el navegador/pestaña). - La función `request` en `apiService.ts` ha sido refactorizada para inyectar automáticamente el `Authorization: Bearer <token>` en todas las peticiones a la API. - Se ha añadido un botón de "Cerrar Sesión" en la barra de navegación que limpia el token y redirige al login. - Corregido un bug que provocaba un bucle de recarga infinito después de un inicio de sesión exitoso debido a una condición de carrera.
2025-10-13 10:40:20 -03:00
[Authorize]
feat: Implementa Dashboard de estadísticas visuales del inventario Se añade una nueva sección "Dashboard" para proporcionar una visión general y analítica del inventario de IT. Esta vista transforma los datos brutos en gráficos interactivos, facilitando la toma de decisiones y la comprensión del estado del parque informático. La implementación se realizó de forma iterativa, refinando tanto la obtención de datos como la presentación visual para una mejor experiencia de usuario. **Principales Cambios:** **1. Backend:** - Se crea un nuevo `DashboardController` con el endpoint `GET /api/dashboard/stats`. - Se implementan consultas SQL agregadas para obtener estadísticas por: - Sistema Operativo. - Cantidad de equipos por Sector (mostrando todos los sectores). - Modelos de CPU (mostrando todos los modelos). - Cantidad de Memoria RAM instalada (GB). **2. Frontend:** - Se integran las librerías `chart.js` y `react-chartjs-2` para la visualización de datos. - Se añade una nueva vista "Dashboard" accesible desde la barra de navegación principal. - Se crean componentes reutilizables para cada tipo de gráfico: `OsChart`, `RamChart`, `CpuChart` y `SectorChart`. - Se diseña un layout responsivo en formato de grilla 2x2 para una visualización equilibrada de los cuatro gráficos. **3. Mejoras de Experiencia de Usuario (UX):** - Se utilizan gráficos de barras horizontales (`indexAxis: 'y'`) para mejorar la legibilidad de etiquetas largas, como los modelos de CPU y nombres de sectores. - Se implementan contenedores con scroll vertical (`overflow-y: auto`) para los gráficos de CPU y Sectores. Esto permite mostrar la totalidad de los datos sin comprometer el diseño ni crear gráficos excesivamente grandes. - Se calcula una altura dinámica para los gráficos de barras para que se adapten a la cantidad de datos que contienen, mejorando la presentación.
2025-10-09 13:29:29 -03:00
[ApiController]
[Route("api/[controller]")]
public class DashboardController : ControllerBase
{
private readonly DapperContext _context;
public DashboardController(DapperContext context)
{
_context = context;
}
public class StatItemDto
{
// Cambiamos el tipo de Label a string para que Dapper no tenga problemas
// al leer el ram_installed (que es un int). Lo formatearemos en el frontend.
public string Label { get; set; } = "";
public int Count { get; set; }
}
public class DashboardStatsDto
{
public IEnumerable<StatItemDto> OsStats { get; set; } = new List<StatItemDto>();
public IEnumerable<StatItemDto> SectorStats { get; set; } = new List<StatItemDto>();
public IEnumerable<StatItemDto> CpuStats { get; set; } = new List<StatItemDto>();
public IEnumerable<StatItemDto> RamStats { get; set; } = new List<StatItemDto>(); // <-- 1. Añadir propiedad para RAM
}
[HttpGet("stats")]
public async Task<IActionResult> GetDashboardStats()
{
var osQuery = @"
SELECT Os AS Label, COUNT(Id) AS Count
FROM dbo.equipos
WHERE Os IS NOT NULL AND Os != ''
GROUP BY Os
ORDER BY Count DESC;";
var sectorQuery = @"
SELECT s.Nombre AS Label, COUNT(e.Id) AS Count
FROM dbo.equipos e
JOIN dbo.sectores s ON e.sector_id = s.id
GROUP BY s.Nombre
ORDER BY Count DESC;";
var cpuQuery = @"
SELECT Cpu AS Label, COUNT(Id) AS Count
FROM dbo.equipos
WHERE Cpu IS NOT NULL AND Cpu != ''
GROUP BY Cpu
ORDER BY Count DESC;";
var ramQuery = @"
SELECT CAST(ram_installed AS VARCHAR) AS Label, COUNT(Id) AS Count
FROM dbo.equipos
WHERE ram_installed > 0
GROUP BY ram_installed
ORDER BY ram_installed ASC;";
using (var connection = _context.CreateConnection())
{
var osStats = await connection.QueryAsync<StatItemDto>(osQuery);
var sectorStats = await connection.QueryAsync<StatItemDto>(sectorQuery);
var cpuStats = await connection.QueryAsync<StatItemDto>(cpuQuery);
var ramStats = await connection.QueryAsync<StatItemDto>(ramQuery);
var result = new DashboardStatsDto
{
OsStats = osStats,
SectorStats = sectorStats,
CpuStats = cpuStats,
RamStats = ramStats
};
return Ok(result);
}
}
}
}