'use client' import type { MiddlewareStats } from '../types' import { getMiddlewareDescription, getEventTypeColor } from './helpers' interface StatsTabProps { stats: MiddlewareStats[] } export function StatsTab({ stats }: StatsTabProps) { return (
{stats.map(stat => { const info = getMiddlewareDescription(stat.middleware_name) return (

{info.icon} {stat.middleware_name.replace('_', ' ')}

{stat.total_events}
Gesamt
{stat.events_last_hour}
Letzte Stunde
{stat.events_last_24h}
24 Stunden
{stat.top_event_types.length > 0 && (
Top Event-Typen
{stat.top_event_types.slice(0, 3).map(et => ( {et.event_type} ({et.count}) ))}
)} {stat.top_ips.length > 0 && (
Top IPs
{stat.top_ips .slice(0, 3) .map(ip => `${ip.ip_address} (${ip.count})`) .join(', ')}
)}
) })}
) }