04Tour del dashboard
Anatomía general
Tras iniciar sesión, el usuario llega a la ruta /dashboard, que constituye el panel principal de AuditX. La interfaz se divide en tres zonas estables, presentes en todas las pantallas del módulo autenticado:
- Barra lateral (sidebar) en el costado izquierdo, con la navegación principal.
- Barra superior (topbar) con el título de la sección actual, el atajo de notificaciones y el avatar del usuario.
- Zona de contenido centrada, donde se renderiza cada sección.
Nota. La barra lateral se contrae a un menú hamburguesa por debajo de 1024 px de ancho.
Secciones disponibles
La barra lateral conduce a las siguientes rutas, todas protegidas por la cookie de sesión:
| p{10cm}} Sección | Propósito |
|---|---|
| Dashboard | Vista de bienvenida con resumen del estado global. |
| Servidores | Lista de servidores registrados, alta, edición, detalle, terminal SSH, reglas. |
| Macros | Comandos guardados reutilizables que se ejecutan vía SSH. |
| Schemas | Plantillas (blueprints) de reglas de diagnóstico importables. |
| Notificaciones | Bandeja de alertas con filtros por severidad. |
| Perfil | Datos personales, preferencias de notificación, plan. |
Cada sección se describe en detalle en los capítulos siguientes.
Identidad visual
AuditX ofrece una escala de brillo de cinco pasos —negro, oscuro, grafito, papel y blanco— más un modo automático que sigue la preferencia del sistema. El valor por defecto es oscuro, y la elección se recuerda en el propio dispositivo: no viaja con la cuenta, porque la luz de la habitación es del aparato y no de la persona. La paleta gira en torno a dos colores corporativos: azul eléctrico (#2C74B3) para llamadas a la acción y enlaces, y verde terminal (#53E88B) para datos técnicos, métricas y elementos del CLI. El tipo GeistMono se utiliza en valores numéricos, hosts e IPs; Geist en el resto de la interfaz weichbroth2024usability, iso9241.
Cómo se actualizan los datos
Las páginas que muestran información de servidores se suscriben en tiempo real a la base de datos del producto. Cuando el backend escribe nuevas métricas o crea una notificación, los componentes se re-renderizan automáticamente sin necesidad de recargar la página.