ver status de carga de pedimentos
This commit is contained in:
Dulce
@@ -638,6 +638,7 @@ const downloadExpediente = async (pedimentoId, pedimentoName, setSuccess, showMe
|
||||
showMessage(`Error durante la subida: ${error.message}`, 'error');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
fetchPendingBulkUploads();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -671,6 +672,160 @@ const downloadExpediente = async (pedimentoId, pedimentoName, setSuccess, showMe
|
||||
|
||||
// El layout principal y la tabla siempre se renderizan, loader/error/empty solo dentro del área de la tabla
|
||||
|
||||
// En tu componente Reports, agrega este estado y efecto
|
||||
const [pendingBulkUploads, setPendingBulkUploads] = useState([]);
|
||||
|
||||
// Función para obtener tareas pendientes de bulk upload
|
||||
const fetchPendingBulkUploads = async () => {
|
||||
try {
|
||||
const url = `${API_URL}/customs/pedimentos/bulk-upload-status/`;
|
||||
const res = await fetchWithAuth(url);
|
||||
if (!res.ok) throw new Error('Error al obtener tareas pendientes');
|
||||
const data = await res.json();
|
||||
setPendingBulkUploads(data.pending_tasks || []);
|
||||
|
||||
// Si hay tareas en progreso, mostrar notificación
|
||||
const processingTasks = data.pending_tasks?.filter(t => t.status === 'processing') || [];
|
||||
if (processingTasks.length > 0) {
|
||||
console.log(`📊 ${processingTasks.length} tarea(s) de carga en progreso`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching pending bulk uploads:', err);
|
||||
setPendingBulkUploads([]);
|
||||
}
|
||||
};
|
||||
|
||||
// Efecto para ejecutar cada 30 segundos
|
||||
useEffect(() => {
|
||||
// Ejecutar inmediatamente al cargar
|
||||
fetchPendingBulkUploads();
|
||||
|
||||
// Configurar intervalo cada 30 segundos
|
||||
const intervalId = setInterval(fetchPendingBulkUploads, 30000);
|
||||
|
||||
// Limpiar intervalo al desmontar
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
|
||||
// Función para renderizar notificación de tareas pendientes
|
||||
const renderBulkUploadNotifications = () => {
|
||||
if (!pendingBulkUploads || pendingBulkUploads.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const processingTasks = pendingBulkUploads.filter(t => t.status === 'processing');
|
||||
const pendingTasks = pendingBulkUploads.filter(t => t.status === 'pending');
|
||||
// const failedTasks = pendingBulkUploads.filter(t => t.status === 'failed');
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-blue-100 overflow-hidden">
|
||||
<div className="p-4 border-b border-blue-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900">Cargas en Progreso</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{pendingBulkUploads.length} tarea(s) activa(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchPendingBulkUploads}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
{/* Tareas en procesamiento */}
|
||||
{processingTasks.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-green-700 mb-2 flex items-center gap-2">
|
||||
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
En Proceso ({processingTasks.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{processingTasks.map(task => (
|
||||
<div key={task.task_id} className="bg-green-50 border border-green-100 rounded-lg p-3">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{task.task_type === 'bulk_create' ? 'Carga Masiva' : 'Carga Desk'} - {task.contribuyente}
|
||||
</div>
|
||||
<div className="text-xs text-green-700 font-medium">
|
||||
{task.progress.percentage_files.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 mb-2">
|
||||
• Pedimentos Creados: {task.progress.created_pedimentos} • Documentos cargados: {task.progress.created_documents}
|
||||
</div>
|
||||
<div className="w-full bg-green-200 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-green-600 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${task.progress.percentage_files}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Actualización en ~{task.metadata.next_batch_update - task.progress.created_documents} documentos
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tareas pendientes */}
|
||||
{pendingTasks.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-yellow-700 mb-2">Pendientes ({pendingTasks.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{pendingTasks.map(task => (
|
||||
<div key={task.task_id} className="bg-yellow-50 border border-yellow-100 rounded-lg p-3">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{task.task_type === 'bulk_create' ? 'Carga Masiva' : 'Carga Desk'} - {task.contribuyente}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">
|
||||
{task.total_files} archivos • Pendiente de inicio
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tareas fallidas */}
|
||||
{/* {failedTasks.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-red-700 mb-2">Fallidas ({failedTasks.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{failedTasks.map(task => (
|
||||
<div key={task.task_id} className="bg-red-50 border border-red-100 rounded-lg p-3">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{task.task_type === 'bulk_create' ? 'Carga Masiva' : 'Carga Desk'} - {task.contribuyente}
|
||||
</div>
|
||||
<div className="text-xs text-red-600 mt-1">
|
||||
{task.error_message || 'Error desconocido'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-4 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 sm:p-6 lg:p-8">
|
||||
<div ref={focusKeeperRef} tabIndex={-1} style={{position:'absolute',width:0,height:0,overflow:'hidden',outline:'none'}} aria-hidden="true"></div>
|
||||
@@ -734,6 +889,19 @@ const downloadExpediente = async (pedimentoId, pedimentoName, setSuccess, showMe
|
||||
(showAnimation && !hasAnimated ? ' animate-fadein-slideup opacity-0' : '')
|
||||
}
|
||||
style={showAnimation && !hasAnimated ? { animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' } : undefined}>
|
||||
|
||||
</div>
|
||||
{renderBulkUploadNotifications()}
|
||||
|
||||
<div className={
|
||||
"bg-white shadow-2xl rounded-3xl border border-gray-100 overflow-hidden"+
|
||||
(showAnimation && !hasAnimated ? ' animate-fadein-slideup opacity-0' : '')
|
||||
}
|
||||
|
||||
|
||||
|
||||
style={showAnimation && !hasAnimated ? { animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' } : undefined}>
|
||||
|
||||
<div className="px-4 py-4 border-b border-gray-200 sm:px-6 sm:py-6 bg-gradient-to-r from-gray-50 to-blue-50/30">
|
||||
{/* Filtros avanzados */}
|
||||
<div className="mb-4 sm:mb-6">
|
||||
|
||||
Reference in New Issue
Block a user