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.

frontend/src/components/Dashboard.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { dashboardService } from '../services/apiService';
+import type { DashboardStats } from '../types/interfaces';
+import OsChart from './OsChart';
+import SectorChart from './SectorChart';
+import CpuChart from './CpuChart';
+import RamChart from './RamChart'; // <-- 1. Importar el nuevo gráfico
+import styles from './Dashboard.module.css';
+
+const Dashboard = () => {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    setIsLoading(true);
+    dashboardService.getStats()
+      .then(data => {
+        setStats(data);
+      })
+      .catch(() => {
+        toast.error('No se pudieron cargar las estadísticas del dashboard.');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+  if (isLoading) {
+    return (
+      <div className={styles.dashboardHeader}>
+        <h2>Cargando estadísticas...</h2>
+      </div>
+    );
+  }
+  if (!stats) {
+    return (
+      <div className={styles.dashboardHeader}>
+        <h2>No hay datos disponibles para mostrar.</h2>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <div className={styles.dashboardHeader}>
+        <h2>Dashboard de Inventario</h2>
+      </div>
+      <div className={styles.statsGrid}>
+        {/* Fila 1, Columna 1 */}
+        <div className={styles.chartContainer}>
+          <OsChart data={stats.osStats} />
+        </div>
+
+        {/* Fila 1, Columna 2 */}
+        <div className={styles.chartContainer}>
+          <RamChart data={stats.ramStats} />
+        </div>
+
+        {/* Fila 2, Columna 1 */}
+        <div className={`${styles.chartContainer} ${styles.scrollableChartContainer}`}>
+          <CpuChart data={stats.cpuStats} />
+        </div>
+
+        {/* Fila 2, Columna 2 */}
+        <div className={`${styles.chartContainer} ${styles.scrollableChartContainer}`}>
+          <SectorChart data={stats.sectorStats} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;