ver status de carga de pedimentos

src/pages/Expedientes.jsx

@@ -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">