feat: alerts page and alert components (AlertCard, AlertsSection, AlertsTabs)

src/app/(dashboard)/alerts/page.tsx

@@ -0,0 +1,61 @@
+'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>
+  )
+}