84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
// frontend/src/components/Dashboard.tsx
|
|
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';
|
|
import styles from './Dashboard.module.css';
|
|
import skeletonStyles from './Skeleton.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>
|
|
<div className={styles.dashboardHeader}>
|
|
<h2>Dashboard de Inventario</h2>
|
|
</div>
|
|
<div className={styles.statsGrid}>
|
|
{/* Replicamos la estructura de la grilla con esqueletos */}
|
|
<div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
|
|
<div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
|
|
<div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
|
|
<div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
|
|
</div>
|
|
</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; |