workspace/projects/gamilit/docs/frontend/admin/pages/AdminAlertsPage-Specification.md

Especificacion: AdminAlertsPage

Version: 1.0.0 Fecha: 2025-12-18 Ubicacion: apps/frontend/src/apps/admin/pages/AdminAlertsPage.tsx

---

PROPOSITO

Pagina de administracion para gestionar alertas del sistema, incluyendo visualizacion, filtrado, reconocimiento y resolucion.

---

ESTRUCTURA DE PAGINA

┌─────────────────────────────────────────────────────────┐
│                      HEADER                              │
│  [AlertTriangle Icon] Alertas del Sistema               │
│  [Refrescar]                                            │
└─────────────────────────────────────────────────────────┘
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                AlertsStats                       │   │
│  │ [Abiertas] [Reconocidas] [Resueltas] [Avg Time] │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                AlertFilters                      │   │
│  │ [Severidad v] [Estado v] [Tipo v] [Desde] [Hasta]│   │
│  │ [Limpiar Filtros] [Refrescar]                   │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │                AlertsList                        │   │
│  │  ┌─────────────┐ ┌─────────────┐                │   │
│  │  │ AlertCard   │ │ AlertCard   │                │   │
│  │  └─────────────┘ └─────────────┘                │   │
│  │  [< Prev]  1 2 3 4 5  [Next >]                  │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

---

COMPONENTES INTEGRADOS

Componente	Proposito
AlertsStats	4 cards de estadisticas
AlertFilters	Panel de filtros
AlertsList	Grid de AlertCards con paginacion
AlertCard	Card individual de alerta
AlertDetailsModal	Modal de detalles completos
AcknowledgeAlertModal	Modal para reconocer
ResolveAlertModal	Modal para resolver

---

FLUJO DE ALERTAS

┌──────────┐     ┌─────────────┐     ┌──────────┐
│   OPEN   │────►│ ACKNOWLEDGED│────►│ RESOLVED │
└──────────┘     └─────────────┘     └──────────┘
      │                                    ▲
      │                                    │
      └────────────────────────────────────┘
                 (direct resolve)

      │
      ▼
┌──────────────┐
│  SUPPRESSED  │ (ignorar alerta)
└──────────────┘

---

ESTADO DE LA PAGINA

State Management

const [modalState, setModalState] = useState({
  details: { isOpen: false, alert: null },
  acknowledge: { isOpen: false, alert: null },
  resolve: { isOpen: false, alert: null }
});

Handlers

const handleViewDetails = (alert: SystemAlert) => {
  setModalState(prev => ({
    ...prev,
    details: { isOpen: true, alert }
  }));
};

const handleAcknowledge = async (note?: string) => {
  await acknowledgeAlert(alert.id, note);
  closeModal('acknowledge');
};

const handleResolve = async (note: string) => {
  await resolveAlert(alert.id, note);
  closeModal('resolve');
};

const handleSuppress = async (alert: SystemAlert) => {
  await suppressAlert(alert.id);
};

---

FILTROS DISPONIBLES

Filtro	Tipo	Opciones
Severidad	select	critical, high, medium, low
Estado	select	open, acknowledged, resolved, suppressed
Tipo	select	performance_degradation, high_error_rate, etc.
Desde	date	ISO date
Hasta	date	ISO date

---

PAGINACION

• Items por pagina: 12
• Grid: 3 columnas (responsive)
• Navegacion: anterior/siguiente + numeros

---

ESTADISTICAS

Metrica	Descripcion	Fuente
Abiertas	Alertas sin resolver	stats.open_alerts
Reconocidas	En proceso	stats.acknowledged_alerts
Resueltas	Completadas	stats.resolved_alerts
Tiempo Promedio	Horas hasta resolucion	stats.avg_resolution_time_hours

---

ACCIONES POR ESTADO

Estado Actual	Acciones Disponibles
open	Ver, Reconocer, Resolver, Suprimir
acknowledged	Ver, Resolver, Suprimir
resolved	Ver
suppressed	Ver

---

PERMISOS

Accion	Roles Permitidos
Ver alertas	admin, super_admin
Reconocer	admin, super_admin
Resolver	admin, super_admin
Suprimir	super_admin

---

FEEDBACK VISUAL

Evento	Indicador
Loading	Spinner en boton refresh
Error	Banner de error
Exito en accion	Toast success
Alerta critica	Borde rojo pulsante

---

HOOKS UTILIZADOS

Hook	Proposito
useAlerts	Queries, mutations, pagination

---

REFERENCIAS

• ALERT-COMPONENTS-ARCHITECTURE.md
• Frontend-Alert-System-Guide.md

---

Ultima actualizacion: 2025-12-18