);
}
function SystemStatusWidget() {
// Estados: 'checking', 'online', 'partial', 'offline', 'api-down'
const [systemStatus, setSystemStatus] = React.useState('checking');
const [cacheStats, setCacheStats] = React.useState(null);
React.useEffect(() => {
const checkSystemStatus = async () => {
const token = getJWTFromStorage();
const hasOrg = window.currentOrganizationId || localStorage.getItem('organizationId');
let authOk = !!token;
let orgOk = !!hasOrg;
// Verificar conexión a internet
const isOnline = await CacheManager.checkRealConnection();
// Verificar si el API está funcionando
const apiWorking = await CacheManager.checkAPIStatus();
// Obtener estadísticas de caché
const stats = CacheManager.getStats();
setCacheStats(stats);
// Determinar estado general
if (!isOnline) {
// Sin conexión a internet
setSystemStatus('offline');
} else if (!apiWorking) {
// Internet funciona pero el API no responde
setSystemStatus('api-down');
} else if (authOk && orgOk) {
// Todo funcionando
setSystemStatus('online');
} else {
// API funciona pero hay problemas de sesión
setSystemStatus('partial');
}
};
checkSystemStatus();
// Verificar cada 30 segundos para detectar cambios más rápido
const interval = setInterval(checkSystemStatus, 30000);
return () => clearInterval(interval);
}, []);
const getStatusContent = () => {
switch (systemStatus) {
case 'checking':
return {
emoji: '🔄',
title: 'Verificando...',
message: 'Estamos comprobando el estado del sistema',
textColor: 'text-gray-400'
};
case 'online':
return {
emoji: '😊',
title: '¡Todo funcionando de maravilla!',
message: 'Todos nuestros sistemas están operativos',
textColor: 'text-green-400'
};
case 'partial':
return {
emoji: '😟',
title: 'Problemas de sesión',
message: 'El servidor funciona pero hay problemas con tu sesión',
textColor: 'text-orange-400'
};
case 'api-down':
return {
emoji: 'sad',
title: 'Parece que tenemos problemas graves de nuestra parte',
message: 'Pero no te preocupes, guardaremos localmente lo que hagas hasta que los arreglemos. ¡Lo sentimos!',
textColor: 'text-red-400'
};
case 'offline':
return {
emoji: '📴',
title: 'Sin conexión a internet',
message: 'Usando datos guardados en caché. Los cambios se sincronizarán cuando vuelvas a conectarte.',
textColor: 'text-orange-400'
};
default:
return {
emoji: '🔄',
title: 'Verificando...',
message: '',
textColor: 'text-gray-400'
};
}
};
const status = getStatusContent();
return (