feat(monitor): integração Beszel/Stack Observer, tickets do observer e novos sites no uptime

src/pages/StackObserver.tsx

@@ -0,0 +1,309 @@
+import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  TrendingUp,
+  Zap,
+  RefreshCw,
+  AlertCircle,
+} from 'lucide-react'
+
+interface Evaluation {
+  id: number
+  source: string
+  entity_id: string
+  result_real: string
+  result_nominal: string
+  confidence: number
+  evaluated_at: number
+  category: string
+  judge_method: string
+}
+
+interface DivergenceStats {
+  total_divergences: number
+  by_category: Record<string, number>
+  by_judge: Record<string, number>
+  recent_24h: number
+  high_confidence: number
+}
+
+interface DivergenceData {
+  divergences: Evaluation[]
+  stats: DivergenceStats
+  generated_at: string
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4 },
+  },
+}
+
+const StatusBadge = ({ status }: { status: string }) => {
+  const styles: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
+    'automation-liveness': {
+      bg: 'bg-red-500/10',
+      text: 'text-red-400',
+      icon: <AlertTriangle className="w-4 h-4" />,
+    },
+    'automation-failure': {
+      bg: 'bg-orange-500/10',
+      text: 'text-orange-400',
+      icon: <AlertCircle className="w-4 h-4" />,
+    },
+  }
+
+  const style = styles[status] || styles['automation-failure']
+
+  return (
+    <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${style.bg} text-sm ${style.text}`}>
+      {style.icon}
+      {status.replace('-', ' ')}
+    </div>
+  )
+}
+
+const StatCard = ({
+  label,
+  value,
+  icon: Icon,
+  color = 'text-blue-400',
+}: {
+  label: string
+  value: number | string
+  icon: React.ElementType
+  color?: string
+}) => (
+  <motion.div
+    variants={itemVariants}
+    className="glass-card p-4 rounded-xl flex items-center gap-4"
+  >
+    <div className={`${color} p-3 rounded-lg bg-white/5`}>
+      <Icon className="w-6 h-6" />
+    </div>
+    <div>
+      <p className="text-sm text-white/60">{label}</p>
+      <p className="text-2xl font-bold text-white">{value}</p>
+    </div>
+  </motion.div>
+)
+
+const DivergenceRow = ({ div }: { div: Evaluation }) => {
+  const timestamp = new Date(div.evaluated_at * 1000).toLocaleString('pt-PT')
+  const confidenceColor = div.confidence >= 0.95 ? 'bg-green-500' : div.confidence >= 0.9 ? 'bg-yellow-500' : 'bg-orange-500'
+
+  return (
+    <motion.tr
+      variants={itemVariants}
+      className="border-b border-white/10 hover:bg-white/[0.03] transition-colors"
+    >
+      <td className="px-4 py-3 text-sm text-white/80 font-mono">{div.id}</td>
+      <td className="px-4 py-3 text-sm">
+        <code className="bg-white/5 px-2 py-1 rounded text-white/90">{div.entity_id}</code>
+      </td>
+      <td className="px-4 py-3 text-sm">
+        <StatusBadge status={div.category} />
+      </td>
+      <td className="px-4 py-3 text-sm">
+        <span className="text-red-400">{div.result_real}</span>
+      </td>
+      <td className="px-4 py-3 text-sm text-white/60">{div.result_nominal}</td>
+      <td className="px-4 py-3 text-sm">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${confidenceColor}`} />
+          <span className="text-white/80">{(div.confidence * 100).toFixed(0)}%</span>
+        </div>
+      </td>
+      <td className="px-4 py-3 text-xs text-white/40">{timestamp}</td>
+    </motion.tr>
+  )
+}
+
+export default function StackObserver() {
+  const [data, setData] = useState<DivergenceData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null)
+
+  const fetchData = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const response = await fetch('/api/stack-observer')
+      if (!response.ok) throw new Error(`API error: ${response.status}`)
+      const result = await response.json() as DivergenceData
+      setData(result)
+      setLastUpdate(new Date())
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch divergences'
+      setError(message)
+      console.error('Stack Observer error:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchData, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const refreshTime = lastUpdate
+    ? lastUpdate.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    : 'nunca'
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6"
+    >
+      {/* Header */}
+      <motion.div variants={itemVariants} className="mb-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-3 rounded-lg bg-red-500/10">
+              <Zap className="w-6 h-6 text-red-400" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-white">Stack Observer</h1>
+              <p className="text-white/60">Monitorização de divergências de automações</p>
+            </div>
+          </div>
+          <button
+            onClick={fetchData}
+            disabled={loading}
+            className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            Actualizar
+          </button>
+        </div>
+        <p className="text-sm text-white/40">
+          Última actualização: {refreshTime} • Auto-refresh a cada 30s
+        </p>
+      </motion.div>
+
+      {error && (
+        <motion.div
+          variants={itemVariants}
+          className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 flex items-center gap-3"
+        >
+          <AlertCircle className="w-5 h-5 flex-shrink-0" />
+          {error}
+        </motion.div>
+      )}
+
+      {loading && !data ? (
+        <motion.div variants={itemVariants} className="text-center py-12">
+          <div className="inline-block">
+            <div className="animate-spin">
+              <Zap className="w-8 h-8 text-blue-400" />
+            </div>
+          </div>
+          <p className="mt-4 text-white/60">Carregando divergências...</p>
+        </motion.div>
+      ) : data ? (
+        <>
+          {/* Stats Grid */}
+          <motion.div variants={containerVariants} className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
+            <StatCard
+              label="Total Divergências"
+              value={data.stats.total_divergences}
+              icon={AlertTriangle}
+              color="text-red-400"
+            />
+            <StatCard
+              label="Últimas 24h"
+              value={data.stats.recent_24h}
+              icon={TrendingUp}
+              color="text-orange-400"
+            />
+            <StatCard
+              label="Alta Confiança (>90%)"
+              value={data.stats.high_confidence}
+              icon={CheckCircle2}
+              color="text-yellow-400"
+            />
+            <StatCard
+              label="Por Método"
+              value={Object.keys(data.stats.by_judge).length}
+              icon={Zap}
+              color="text-blue-400"
+            />
+            <StatCard
+              label="Por Categoria"
+              value={Object.keys(data.stats.by_category).length}
+              icon={Clock}
+              color="text-purple-400"
+            />
+          </motion.div>
+
+          {/* Divergences Table */}
+          <motion.div variants={itemVariants} className="glass-card rounded-lg overflow-hidden">
+            <div className="px-6 py-4 border-b border-white/10">
+              <h2 className="text-xl font-bold text-white">Divergências Detectadas</h2>
+            </div>
+
+            {data.divergences.length === 0 ? (
+              <div className="px-6 py-12 text-center">
+                <CheckCircle2 className="w-12 h-12 text-green-400 mx-auto mb-4 opacity-60" />
+                <p className="text-white/60">Nenhuma divergência detectada</p>
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-white/5 border-b border-white/10">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">ID</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Entidade</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Categoria</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Real</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Resultado Nominal</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Confiança</th>
+                      <th className="px-4 py-3 text-left text-xs font-semibold text-white/60">Timestamp</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <motion.td
+                      variants={containerVariants}
+                      initial="hidden"
+                      animate="visible"
+                    >
+                      {data.divergences.slice(0, 20).map((div) => (
+                        <DivergenceRow key={div.id} div={div} />
+                      ))}
+                    </motion.td>
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {data.divergences.length > 20 && (
+              <div className="px-6 py-3 bg-white/5 border-t border-white/10 text-xs text-white/40">
+                Mostrando 20 de {data.divergences.length} divergências
+              </div>
+            )}
+          </motion.div>
+        </>
+      ) : null}
+    </motion.div>
+  )
+}