220 lines
9.4 KiB
TypeScript
220 lines
9.4 KiB
TypeScript
/**
|
|
* Indicador de Status Offline
|
|
*
|
|
* Componente sempre visível que mostra:
|
|
* - Status online/offline
|
|
* - Operações pendentes
|
|
* - Progresso de sincronização
|
|
*/
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Wifi, WifiOff, RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';
|
|
import { syncService, type SyncStatus, type SyncStats } from '../services/syncService';
|
|
|
|
export const OfflineIndicator: React.FC = () => {
|
|
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
|
const [syncStatus, setSyncStatus] = useState<SyncStatus>({
|
|
status: 'idle',
|
|
message: '',
|
|
progress: 0
|
|
});
|
|
const [stats, setStats] = useState<SyncStats>({
|
|
pendingRDOs: 0,
|
|
pendingOperations: 0,
|
|
unresolvedConflicts: 0,
|
|
isOnline: true,
|
|
isSyncing: false
|
|
});
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Atualizar status online/offline
|
|
const handleOnline = () => setIsOnline(true);
|
|
const handleOffline = () => setIsOnline(false);
|
|
|
|
window.addEventListener('online', handleOnline);
|
|
window.addEventListener('offline', handleOffline);
|
|
|
|
// Escutar mudanças de sincronização
|
|
const unsubscribe = syncService.onSyncStatusChange((status) => {
|
|
setSyncStatus(status);
|
|
});
|
|
|
|
// Atualizar estatísticas a cada 5 segundos
|
|
const interval = setInterval(async () => {
|
|
const newStats = await syncService.getSyncStats();
|
|
setStats(newStats);
|
|
}, 5000);
|
|
|
|
// Carregar estatísticas iniciais
|
|
syncService.getSyncStats().then(setStats);
|
|
|
|
return () => {
|
|
window.removeEventListener('online', handleOnline);
|
|
window.removeEventListener('offline', handleOffline);
|
|
unsubscribe();
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
const handleSync = async () => {
|
|
await syncService.forceSync();
|
|
};
|
|
|
|
const hasPendingData = stats.pendingRDOs > 0 || stats.pendingOperations > 0;
|
|
const hasConflicts = stats.unresolvedConflicts > 0;
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50">
|
|
{/* Indicador compacto */}
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-2 rounded-full shadow-lg
|
|
transition-all duration-200 hover:scale-105
|
|
${isOnline
|
|
? 'bg-green-500 hover:bg-green-600'
|
|
: 'bg-orange-500 hover:bg-orange-600'
|
|
}
|
|
text-white font-medium
|
|
`}
|
|
>
|
|
{isOnline ? (
|
|
<Wifi className="w-4 h-4" />
|
|
) : (
|
|
<WifiOff className="w-4 h-4" />
|
|
)}
|
|
|
|
{stats.isSyncing ? (
|
|
<RefreshCw className="w-4 h-4 animate-spin" />
|
|
) : hasPendingData ? (
|
|
<span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
|
|
{stats.pendingRDOs + stats.pendingOperations}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
|
|
{/* Painel expandido */}
|
|
{isExpanded && (
|
|
<div className="absolute bottom-14 right-0 w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden">
|
|
{/* Header */}
|
|
<div className={`
|
|
px-4 py-3 text-white
|
|
${isOnline ? 'bg-green-500' : 'bg-orange-500'}
|
|
`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
{isOnline ? (
|
|
<Wifi className="w-5 h-5" />
|
|
) : (
|
|
<WifiOff className="w-5 h-5" />
|
|
)}
|
|
<span className="font-semibold">
|
|
{isOnline ? 'Online' : 'Offline'}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsExpanded(false)}
|
|
className="hover:bg-white/20 rounded p-1 transition-colors"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conteúdo */}
|
|
<div className="p-4 space-y-3">
|
|
{/* Status de sincronização */}
|
|
{stats.isSyncing && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<RefreshCw className="w-4 h-4 animate-spin text-blue-500" />
|
|
<span>{syncStatus.message}</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
|
style={{ width: `${syncStatus.progress}%` }}
|
|
aria-label={`Progresso: ${syncStatus.progress}%`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Estatísticas */}
|
|
<div className="space-y-2">
|
|
{stats.pendingRDOs > 0 && (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-600">RDOs pendentes</span>
|
|
<span className="font-semibold text-orange-600">
|
|
{stats.pendingRDOs}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{stats.pendingOperations > 0 && (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-600">Operações pendentes</span>
|
|
<span className="font-semibold text-orange-600">
|
|
{stats.pendingOperations}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{hasConflicts && (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-600 flex items-center gap-1">
|
|
<AlertCircle className="w-4 h-4 text-red-500" />
|
|
Conflitos não resolvidos
|
|
</span>
|
|
<span className="font-semibold text-red-600">
|
|
{stats.unresolvedConflicts}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{!hasPendingData && !hasConflicts && isOnline && (
|
|
<div className="flex items-center gap-2 text-sm text-green-600">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span>Tudo sincronizado</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Botão de sincronização manual */}
|
|
{isOnline && hasPendingData && !stats.isSyncing && (
|
|
<button
|
|
onClick={handleSync}
|
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
Sincronizar Agora
|
|
</button>
|
|
)}
|
|
|
|
{/* Mensagem offline */}
|
|
{!isOnline && (
|
|
<div className="bg-orange-50 border border-orange-200 rounded-lg p-3 text-sm text-orange-800">
|
|
<p className="font-medium">Modo Offline</p>
|
|
<p className="text-xs mt-1">
|
|
Seus dados serão sincronizados automaticamente quando a conexão for restabelecida.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Link para logs */}
|
|
{hasConflicts && (
|
|
<a
|
|
href="/sync-logs"
|
|
className="block text-center text-sm text-blue-600 hover:text-blue-700 underline"
|
|
>
|
|
Ver detalhes dos conflitos
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|