File size: 4,113 Bytes
4c1e4ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import React, { useState, useEffect } from 'react';
import { Wifi, WifiOff, CheckCircle, AlertCircle, Clock, RefreshCw } from 'lucide-react';
import { caixaAPIOfficial } from '../utils/CaixaAPIOfficial';
export const CaixaAPIStatus: React.FC = () => {
const [status, setStatus] = useState<{
online: boolean;
metodo: string;
tempoResposta: number;
ultimaVerificacao: string;
} | null>(null);
const [loading, setLoading] = useState(false);
const verificarStatus = async () => {
setLoading(true);
try {
const statusAPI = await caixaAPIOfficial.verificarStatusAPI();
setStatus(statusAPI);
} catch (error) {
setStatus({
online: false,
metodo: 'erro',
tempoResposta: 0,
ultimaVerificacao: new Date().toLocaleString('pt-BR')
});
} finally {
setLoading(false);
}
};
useEffect(() => {
verificarStatus();
// Verificar status a cada 2 minutos
const interval = setInterval(verificarStatus, 2 * 60 * 1000);
return () => clearInterval(interval);
}, []);
if (!status) {
return (
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="animate-pulse">
<div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
<div className="h-3 bg-gray-200 rounded w-3/4"></div>
</div>
</div>
);
}
return (
<div className={`p-4 rounded-lg shadow-md border-l-4 ${
status.online
? 'bg-green-50 border-green-500'
: 'bg-red-50 border-red-500'
}`}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{status.online ? (
<Wifi className="w-5 h-5 text-green-600" />
) : (
<WifiOff className="w-5 h-5 text-red-600" />
)}
<div>
<h3 className="font-semibold text-gray-800">
API Oficial da Caixa
</h3>
<p className={`text-sm ${
status.online ? 'text-green-600' : 'text-red-600'
}`}>
{status.online ? 'Online e Funcionando' : 'Temporariamente Indisponível'}
</p>
</div>
</div>
<button
onClick={verificarStatus}
disabled={loading}
className={`p-2 rounded-full transition-colors ${
loading
? 'text-gray-400 cursor-not-allowed'
: 'text-gray-600 hover:text-gray-800 hover:bg-gray-100'
}`}
>
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
</button>
</div>
<div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-blue-500" />
<span className="text-sm text-gray-600">
Método: {status.metodo || 'N/A'}
</span>
</div>
<div className="flex items-center gap-2">
<Clock className="w-4 h-4 text-orange-500" />
<span className="text-sm text-gray-600">
Resposta: {status.tempoResposta}ms
</span>
</div>
<div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-purple-500" />
<span className="text-sm text-gray-600">
Verificado: {status.ultimaVerificacao}
</span>
</div>
</div>
{status.online && (
<div className="mt-3 p-2 bg-green-100 rounded-md">
<p className="text-xs text-green-800">
✅ Conectado à API oficial da Caixa Econômica Federal.
Todos os dados são 100% oficiais e atualizados.
</p>
</div>
)}
{!status.online && (
<div className="mt-3 p-2 bg-red-100 rounded-md">
<p className="text-xs text-red-800">
⚠️ API oficial temporariamente indisponível.
O sistema usará dados de backup ou históricos da Caixa.
</p>
</div>
)}
</div>
);
};
export default CaixaAPIStatus;
|