fix: se agrega nueva pestaña para visualizar los archivos de error que devuelve vucem en detalle pedimento.

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

@@ -594,6 +594,7 @@ const downloadExpediente = async (pedimentoId, pedimentoName, setSuccess, showMe
 
       const fileCount = uploadType === 'folders' ? filesToUpload.length : selectedFiles.length;
       showMessage(`Subiendo ${fileCount} archivo(s)...`, 'info');
+      let alertMessage = '';
 
       const uploadEndpoint = `${API_URL}/customs/pedimentos/bulk-create/`;
       const result = await postFormDataWithAuth(uploadEndpoint, formData);
@@ -610,10 +611,38 @@ const downloadExpediente = async (pedimentoId, pedimentoName, setSuccess, showMe
         }
         showMessage(errorMsg, 'error');
       }else{
-        showMessage(
-          `${result.uploaded_count || fileCount} archivo(s) subido(s) exitosamente`,
-          'success'
-        );
+        const data = await result.json();
+        console.log(data);
+        if(data.already_existing_count > 0){
+          // Crear una cadena con todos los pedimentos
+          const existingList = data.already_existing
+              .map(pedimento => `${pedimento.pedimento_app}`)
+              .join('\n');
+          showMessage(
+            `${data.message}\n\nPedimentos ya existentes:\n${existingList}`,
+            'warning'
+          );
+        }
+        else if(data.failed_files && data.failed_files.length > 0) {
+            // Sección de archivos fallidos
+            alertMessage += `ARCHIVOS CON ERRORES (${data.failed_files.length}):\n`;
+            data.failed_files.forEach((file, index) => {
+              alertMessage += `\n${index + 1}. ${file.archivo_original}`;
+              alertMessage += `\n  Error: ${file.error}`;
+            });
+
+          showMessage(
+            `${alertMessage}`,
+            'warning'
+          );
+        }
+        else{
+          showMessage(
+            `${result.uploaded_count || fileCount} archivo(s) subido(s) exitosamente`,
+            'success'
+          );
+        }
+
       }
 
       // showMessage(

src/pages/Reports.jsx

@@ -67,7 +67,7 @@ const handleDownloadReport = async (reportId) => {
 export default function Reports() {
   // Estado para organizacion_id
   const [organizacionId, setOrganizacionId] = useState('');
-
+  
   useEffect(() => {
     async function fetchOrgId() {
       try {
@@ -81,6 +81,7 @@ export default function Reports() {
     }
     fetchOrgId();
   }, []);
+
   // Handler for Generar Reporte in Cumplimiento tab
   const handleGenerarReporteCumplimiento = async () => {
     if (!organizacionId) {
@@ -196,6 +197,7 @@ export default function Reports() {
   const [tourStep, setTourStep] = useState(0);
 
   const [organizaciones, setOrganizaciones] = useState([]);
+  const [importadores, setImportadores] = useState([]);
 
   useEffect(() => {
     const fetchOrganizaciones = async () => {
@@ -213,6 +215,23 @@ export default function Reports() {
     fetchOrganizaciones();
   }, []);
 
+  useEffect(() => {
+    const fetchImportadores = async () => {
+      try {
+        const res = await fetch(
+          `${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`, 
+          { method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('access')}` } 
+        });
+        const data = await res.json();
+        setImportadores(data);
+      } catch {
+        console.error('Error fetching importadores:', err);
+        setImportadores([]);
+      }
+    };
+    fetchImportadores();
+  }, []);
+
   const [globalFilters, setGlobalFilters] = useState({
     rfc: '',
     fecha_pago_desde: '',
@@ -240,13 +259,45 @@ export default function Reports() {
         </div>
         <div className="p-4">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {/* Filtro por Organización */}
+            <div className="group">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Organización
+              </label>
+              <div className="relative rounded-lg shadow-sm">
+                <select
+                  value={globalFilters.organizacion || ''}
+                  onChange={(e) => setGlobalFilters(prev => ({
+                    ...prev,
+                    organizacion: e.target.value
+                  }))}
+                  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} {/* Usar el campo 'nombre' que sí existe */}
+                    </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>
+
             {/* Filtro por RFC */}
             <div className="group">
               <label className="block text-sm font-medium text-gray-700 mb-1">
                 RFC
               </label>
+              {/* modificar de input a select */}
               <div className="relative rounded-lg shadow-sm">
-                <input
+                {/* <input
                   type="text"
                   value={globalFilters.rfc || ''}
                   onChange={(e) => setGlobalFilters(prev => ({
@@ -257,7 +308,25 @@ export default function Reports() {
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                     transition-all duration-200 bg-white"
                   placeholder="Ej: ABC123456789"
-                />
+                /> */}
+                <select
+                  name="rfc"
+                  value={globalFilters.rfc || ''}
+                  onChange={(e) => setGlobalFilters(prev => ({
+                    ...prev,
+                    rfc: e.target.value
+                  }))}
+                  className="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 text-sm font-mono uppercase"
+                  style={{ textTransform: 'uppercase' }}
+                >
+                  <option value="" >Selecciona un RFC</option>
+                  {importadores.filter(imp => {
+                    if (!globalFilters.organizacion) return true;
+                    return imp.organizacion === globalFilters.organizacion;
+                  }).map(imp => (
+                    <option key={imp.rfc} value={imp.rfc}>{imp.rfc}</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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -367,37 +436,6 @@ export default function Reports() {
                 </div>
               </div>
             </div>
-
-            {/* Filtro por Organización */}
-            <div className="group">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Organización
-              </label>
-              <div className="relative rounded-lg shadow-sm">
-                <select
-                  value={globalFilters.organizacion || ''}
-                  onChange={(e) => setGlobalFilters(prev => ({
-                    ...prev,
-                    organizacion: e.target.value
-                  }))}
-                  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} {/* Usar el campo 'nombre' que sí existe */}
-                    </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>
 
           {/* Botón para limpiar filtros globales */}

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