ver status de carga de pedimentos

Reviewed-on: #17

package-lock.json

@@ -15,6 +15,7 @@
         "chart.js": "^4.5.0",
         "highlight.js": "^11.11.1",
         "jszip": "^3.10.1",
+        "lucide-react": "^0.562.0",
         "react": "^19.1.0",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^19.1.0",
@@ -2603,6 +2604,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "chart.js": "^4.5.0",
     "highlight.js": "^11.11.1",
     "jszip": "^3.10.1",
+    "lucide-react": "^0.562.0",
     "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",

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

src/pages/Vucem.jsx

@@ -202,10 +202,13 @@ function RelacionarImportadoresModal({ open, onClose, vucem }) {
 }
 import React, { useEffect, useState } from 'react';
 import { fetchWithAuth, postWithAuth, putWithAuth, deleteWithAuth, putFormDataWithAuth, postFormDataWithAuth, patchWithAuth } from '../fetchWithAuth';
+import { useUser } from '../context/UserContext';
 
 const API_URL = import.meta.env.VITE_EFC_API_URL;
 export default function Vucem() {
   // Estado para modal de relacionar importadores
+
+  const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
   const [showRelacionarModal, setShowRelacionarModal] = useState(false);
   const [selectedVucem, setSelectedVucem] = useState(null);
   const [vucemList, setVucemList] = useState([]);
@@ -216,10 +219,13 @@ export default function Vucem() {
   const [editVucem, setEditVucem] = useState(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteVucem, setDeleteVucem] = useState(null);
-
+  const [organizaciones, setOrganizaciones] = useState([]);
+  const { user: currentUser } = useUser();
+  
   // Estado para formulario de creación/edición
   const initialForm = {
     usuario: '',
+    organizacion: '',
     password: '',
     patente: '',
     efirma: '',
@@ -260,6 +266,22 @@ export default function Vucem() {
     }));
   };
 
+  useEffect(() => {
+    const fetchOrganizaciones = async () => {
+      try {
+        const url = `${import.meta.env.VITE_EFC_API_URL}/organization/organizaciones/`;
+        const res = await fetchWithAuth(url); // ← USA fetchWithAuth
+        if (!res.ok) throw new Error('Error al obtener las organizaciones');
+        const data = await res.json();
+        setOrganizaciones(data);
+      } catch (err) {
+        console.error('Error fetching organizaciones:', err);
+        setOrganizaciones([]); // ← Asegurar que siempre sea un array
+      }
+    };
+    fetchOrganizaciones();
+  }, []);
+
   // Funciones para alternar visibilidad en modal de edición
   const toggleEditPasswordVisibility = () => {
     setShowEditPassword(!showEditPassword);
@@ -358,6 +380,7 @@ export default function Vucem() {
       const res = await fetchWithAuth(`${API_URL}/vucem/vucem/`);
       if (!res.ok) throw new Error('Error al cargar Ventanilla Unica');
       const data = await res.json();
+      // console.log('data > ', data);
       setVucemList(data);
       setError(null);
     } catch (err) {
@@ -1272,12 +1295,13 @@ export default function Vucem() {
                 formData.append('password', form.password);
                 formData.append('patente', form.patente);
                 formData.append('efirma', form.efirma);
-                if (form.key) formData.append('key', form.key);
-                if (form.cer) formData.append('cer', form.cer);
                 formData.append('is_importador', form.is_importador);
+                formData.append('is_active', form.is_active);
                 formData.append('acusecove', form.acusecove);
                 formData.append('acuseedocument', form.acuseedocument);
-                formData.append('is_active', form.is_active);
+                formData.append('organizacion_id', form.organizacion);
+                if (form.key) formData.append('key', form.key);
+                if (form.cer) formData.append('cer', form.cer);
                 try {
                   const res = await postFormDataWithAuth(`${API_URL}/vucem/vucem/`, formData);
                   if (!res.ok) throw new Error('Error al crear');
@@ -1553,6 +1577,54 @@ export default function Vucem() {
                   </div>
                 </div>
 
+                {/* Seccion de organizacion para super_users */}
+                {currentUser.is_superuser ? (
+                  <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                    <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                      <div className="bg-amber-600 rounded-lg p-2 mr-3 shadow-sm">
+                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold text-slate-800">Configuracion de Organizaciones</h4>
+                        <p className="text-xs text-slate-600">Asignar la Organizacion a la que pertenece.</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 lg:grid-cols-1 gap-4">
+                      <div className="space-y-1">
+                        <label className="block text-xs font-semibold text-slate-700">
+                          Seleccionar Organizacion <span className="text-red-600">*</span>
+                        </label>
+                        <div className="relative rounded-lg shadow-sm">
+                          <select
+                            name="organizacion"
+                            value={form.organizacion || ''}
+                            onChange={handleInputChange}
+                            className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
+                              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
+                              transition-all duration-200 bg-white appearance-none"
+                          >
+                            <option value="">Todas las organizaciones</option>
+                            {organizaciones.results && organizaciones.results.map(org => (
+                              <option key={org.id} value={org.id}>
+                                {org.nombre}
+                              </option>
+                            ))}
+                          </select>
+                          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                            <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="bg-slate-50 rounded-lg p-4 border border-slate-200"></div>
+                )}
                 {/* Botones de acción */}
                 <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
                   <button