Files
MSP-CAS/src/app/(dashboard)/alerts/page.tsx

62 lines
1.7 KiB
TypeScript

'use client'
import { useMemo } from 'react'
import AlertsSection from '@/components/alerts/AlertsSection'
import type { AlertCardData } from '@/components/alerts/AlertCard'
import { trpc } from '@/lib/trpc-client'
export default function AlertsPage() {
const utils = trpc.useUtils()
const alertsQuery = trpc.alertas.list.useQuery(
{ page: 1, limit: 100 },
{ refetchOnWindowFocus: false }
)
const acknowledgeMutation = trpc.alertas.reconocer.useMutation({
onSuccess: () => {
utils.alertas.list.invalidate()
utils.alertas.conteoActivas.invalidate()
utils.clientes.dashboardStats.invalidate()
},
})
const resolveMutation = trpc.alertas.resolver.useMutation({
onSuccess: () => {
utils.alertas.list.invalidate()
utils.alertas.conteoActivas.invalidate()
utils.clientes.dashboardStats.invalidate()
},
})
const alerts: AlertCardData[] = useMemo(() => {
const list = alertsQuery.data?.alertas ?? []
return list.map((a) => ({
id: a.id,
title: a.titulo,
device: a.dispositivo?.nombre ?? '—',
description: a.mensaje,
severity: a.severidad,
timestamp: a.createdAt instanceof Date ? a.createdAt : new Date(a.createdAt),
status: a.estado,
}))
}, [alertsQuery.data])
const handleAcknowledge = (id: string) => {
acknowledgeMutation.mutate({ id })
}
const handleResolve = (id: string) => {
resolveMutation.mutate({ id })
}
return (
<div className="min-h-full">
<AlertsSection
alerts={alerts}
isLoading={alertsQuery.isLoading}
onAcknowledge={handleAcknowledge}
onResolve={handleResolve}
/>
</div>
)
}