; } } function statusBadgeVariant(status: string): 'default' | 'secondary' | 'destructive' { switch (status) { case 'healthy': return 'default'; case 'degraded': return 'secondary'; case 'unhealthy': return 'destructive'; default: return 'secondary'; } } export default function AdminHealth({ health }: AdminHealthProps) { const [autoRefresh, setAutoRefresh] = useState(false); const [refreshInterval, setRefreshInterval] = useState('30'); const [refreshing, setRefreshing] = useState(false); const intervalRef = useRef | null>(null); const isMountedRef = useRef(true); useEffect(() => { isMountedRef.current = true; return () => { isMountedRef.current = false; }; }, []); useEffect(() => { if (autoRefresh) { intervalRef.current = setInterval( () => { if (!isMountedRef.current) return; setRefreshing(true); router.reload({ only: ['health'], onFinish: () => { if (isMountedRef.current) setRefreshing(false); }, }); }, parseInt(refreshInterval) * 1000, ); } return () => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } }; }, [autoRefresh, refreshInterval]); return (

Admin Health {/* Overall status + Controls */}

{capitalize(health.status)} {formatDateTime(health.timestamp)} {refreshing && }

{!autoRefresh && ( )}

Auto-refresh

{autoRefresh && ( )}

{/* Check Cards */} {Object.keys(health.checks).length === 0 ? ( ) : (

{Object.entries(health.checks).map(([name, check]) => ( {name}

{check.status}

{check.message}

Response time: {check.response_time_ms}ms

))}

)}

); }