setShowDeleteModal(false)} onConfirm={handleDelete} message="¿Seguro que deseas eliminar este datastage?" confirmText="Eliminar" cancelText="Cancelar" />
+
+ {/* Modal de edición - estilo Users/Importers */}
+ {showEditModal && (
+
+ )}
+
+
+ {/* Modal de eliminación - estilo Users/Importers */}
+ {showDeleteModal && (
+
+
+ {/* Header */}
+
+
+
+
+
+
Eliminar Datastage
+
Esta acción no se puede deshacer.
+
+
+
setShowDeleteModal(false)} className="text-red-100 hover:text-white hover:bg-red-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-red-500 border-opacity-30">
+
+
+
+
+
+ {/* Content */}
+
+
+
¿Eliminar este datastage?
+
¿Seguro que deseas eliminar este datastage? Esta acción no se puede deshacer.
+
+ setShowDeleteModal(false)} className="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar
+ Eliminar
+
+
+
+
Contribuyente
CURP Apoderado
Partidas
- Saldo disponible
- Importe pedimento
+ Fecha de Carga
+ Tipo Operacion
+ Clave
+ No. Archivos
+ Peso Total
Expediente
@@ -462,8 +465,11 @@ export default function Documents() {
{ped.contribuyente}
{ped.curp_apoderado}
{ped.numero_partidas}
- ${ped.saldo_disponible}
- ${ped.importe_pedimento_app}
+ {ped.created_at ? ped.created_at.slice(0, 10) : ''}
+ {ped.tipo_operacion}
+ {ped.clave_pedimento}
+ {ped.documentos_count}
+ {ped.documentos_peso_total}
)}
+
+ Tipo Operacion
+ {ped.tipo_operacion}
+
Partidas
- ${ped.numero_partidas}
+ {ped.numero_partidas}
- Saldo disponible:
- ${ped.saldo_disponible}
+ Fecha de Carga
+ {ped.created_at ? ped.created_at.slice(0, 10) : ''}
- Importe pedimento:
- ${ped.importe_pedimento_app}
+ Clave
+ {ped.clave_pedimento}
+
+
+ No. Archivos
+
+
+ Peso Total
+ Peso total
-
-
-
-
Cargando información de importadores...
-
-
+
+
- {/* Header */}
-
-
-
- Importadores
+ {/* Header animado y decorativo */}
+
+
+
+
+ Importadores
+ {totalImporters > 0 && (
+
+ {totalImporters} registros
+
+ )}
-
Gestiona y supervisa las empresas importadoras registradas en el sistema.
+
Gestiona y supervisa las empresas importadoras registradas en el sistema.
+
+ {/* Efectos decorativos de fondo modernos */}
+
+
+ {/* Partículas flotantes */}
+
-
-
-
-
-
-
- Total Importadores
- {importers.length}
-
-
+ {/* Filtros y acciones */}
+
+
+
+
+
+
+
+ Filtros de búsqueda
+
+
{ setModalMode('create'); setModalData({ rfc: '', nombre: '', organizacion: '' }); setErrorMsg(''); setModalOpen(true); }}
+ className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold text-xs sm:text-sm shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+ >
+
+
+ Crear importador
+
-
-
-
-
-
-
-
-
-
- Activos
-
- {importers.filter(i => i.status === 'Activo').length}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inactivos
-
- {importers.filter(i => i.status === 'Inactivo').length}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Total Documentos
-
- {importers.reduce((sum, i) => sum + i.documentsCount, 0)}
-
-
-
-
-
-
-
-
- {/* Search and Actions */}
-
-
-
-
-
-
+
-
-
-
-
- Nuevo Importador
-
-
- {/* Table */}
-
-
+ {/* Tabla de importadores */}
+
+
-
- Importador
-
-
- RFC
-
-
- Estado
-
-
- Documentos
-
-
- Última Actividad
-
-
- Acciones
-
+ RFC
+ Nombre
+ Organización
+ Creado
+ Actualizado
+ Acciones
{currentImporters.map((importer, index) => (
-
-
-
-
-
-
-
+
+ {importer.rfc}
+ {importer.nombre || Sin nombre }
+ {importer.organizacion}
+ {importer.created_at ? new Date(importer.created_at).toLocaleString() : ''}
+ {importer.updated_at ? new Date(importer.updated_at).toLocaleString() : ''}
+
+
+
openViewModal(importer)}
+ >
+
+
+
+
openEditModal(importer)}
+ >
+
+
+
+
openDeleteModal(importer)}
+ >
+
+
+
+ {/* Modal moved outside table for valid JSX and Users.jsx style will be applied below */}
+ {/* MODALS: Styled like Users.jsx, rendered outside the table for valid JSX */}
+ {modalOpen && (
+
+
+ {/* Modal Header */}
+
+
+
+
+ {modalMode === 'delete' ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {modalMode === 'delete' ? 'Eliminar Importador' : modalMode === 'edit' ? 'Editar Importador' : 'Ver Importador'}
+
+
+ {modalMode === 'delete' ? 'Esta acción no se puede deshacer.' : 'Sistema de Gestión de Importadores'}
+
+
+
+
+
+
+
+
+
+
+ {/* Modal Content */}
+
+ {modalMode === 'delete' ? (
+
+
+
¿Eliminar Importador?
+
+
+ ¿Estás seguro que deseas eliminar el importador {modalData.nombre} (RFC: {modalData.rfc} )?
+
+
+
+
+
+
{modalData.nombre}
+
RFC: {modalData.rfc}
+
+
+
+ {errorMsg &&
{errorMsg}
}
+
+
+
Cancelar
+
{modalLoading ? (
) : null}{modalLoading ? 'Eliminando...' : 'Eliminar Importador'}
+
+
+ ) : (
+
+ )}
+
+
-
-
{importer.name}
-
{importer.email}
-
-
- {importer.rfc}
-
-
-
- {importer.status}
-
-
-
-
- {importer.documentsCount}
-
- docs
-
-
-
-
- {new Date(importer.lastActivity).toLocaleDateString()}
-
-
-
-
- Ver
-
-
- Editar
-
-
- Eliminar
-
+ )}
@@ -321,19 +468,18 @@ export default function Importers() {
handleItemsPerPageChange(Number(e.target.value))}
- className="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-navy-500 focus:border-navy-500"
+ onChange={e => handleItemsPerPageChange(Number(e.target.value))}
+ className="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
10 por página
15 por página
20 por página
-
{totalPages > 1 && (
handlePageChange(currentPage - 1)}
+ onClick={e => handlePageChange(currentPage - 1, e)}
disabled={currentPage === 1}
className="relative inline-flex items-center px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -342,47 +488,35 @@ export default function Importers() {
Anterior
-
{[...Array(totalPages)].map((_, index) => {
const page = index + 1;
const isCurrentPage = page === currentPage;
const isNearCurrentPage = Math.abs(page - currentPage) <= 2;
const isFirstOrLast = page === 1 || page === totalPages;
-
if (totalPages <= 7 || isNearCurrentPage || isFirstOrLast) {
return (
handlePageChange(page)}
- className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md transition-colors ${
- isCurrentPage
- ? 'z-10 bg-navy-600 border-navy-600 text-white'
- : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
- }`}
+ onClick={e => handlePageChange(page, e)}
+ className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md transition-colors ${isCurrentPage ? 'z-10 bg-blue-600 border-blue-600 text-white' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'}`}
>
{page}
);
} else if (page === currentPage - 3 || page === currentPage + 3) {
return (
-
- ...
-
+ ...
);
}
return null;
})}
-
-
- Página {currentPage} de {totalPages}
-
+ Página {currentPage} de {totalPages}
-
handlePageChange(currentPage + 1)}
+ onClick={e => handlePageChange(currentPage + 1, e)}
disabled={currentPage === totalPages}
className="relative inline-flex items-center px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -397,22 +531,20 @@ export default function Importers() {
)}
- {/* Empty state */}
+ {/* Estado vacío */}
{currentImporters.length === 0 && !loading && (
-
+
-
-
+
- No se encontraron importadores
-
- {searchTerm ? 'Intenta con otros términos de búsqueda.' : 'Comienza agregando un nuevo importador.'}
-
+ No se encontraron importadores
+ {searchTerm ? 'Intenta con otros términos de búsqueda.' : 'Comienza agregando un nuevo importador.'}
{!searchTerm && (
-
-
+
+
Agregar primer importador
diff --git a/src/pages/Vucem.jsx b/src/pages/Vucem.jsx
index def3220..ecf0642 100644
--- a/src/pages/Vucem.jsx
+++ b/src/pages/Vucem.jsx
@@ -1,8 +1,213 @@
+// Modal para relacionar importadores a una credencial VUCEM
+function RelacionarImportadoresModal({ open, onClose, vucem }) {
+ const [importadoresDisponibles, setImportadoresDisponibles] = React.useState([]);
+ const [importadoresSeleccionados, setImportadoresSeleccionados] = React.useState([]);
+
+ React.useEffect(() => {
+ if (!open || !vucem) return;
+ // Obtener ambos listados en paralelo
+ Promise.all([
+ fetchWithAuth(import.meta.env.VITE_EFC_API_URL + '/customs/importadores/').then(res => res.json()),
+ fetchWithAuth(import.meta.env.VITE_EFC_API_URL + `/vucem/usuario-importador/?vucem=${vucem.id}`).then(res => res.json())
+ ]).then(([importadoresAll, relaciones]) => {
+ // Agrupar relaciones por RFC, tomar la más reciente (última) para cada RFC
+ const relacionesPorRfc = {};
+ relaciones.results.forEach(rel => {
+ relacionesPorRfc[rel.rfc] = rel; // sobrescribe, así queda la última
+ });
+ const seleccionados = Object.values(relacionesPorRfc).map(rel => {
+ const base = importadoresAll.find(i => i.rfc === rel.rfc) || {};
+ return {
+ ...rel,
+ nombre: base.nombre || rel.rfc,
+ organizacion: base.organizacion || rel.organizacion
+ };
+ });
+ setImportadoresSeleccionados(seleccionados);
+ // Disponibles = todos menos los seleccionados (por RFC)
+ const seleccionadosRFC = new Set(seleccionados.map(i => i.rfc));
+ setImportadoresDisponibles(importadoresAll.filter(i => !seleccionadosRFC.has(i.rfc)));
+ });
+ }, [open, vucem]);
+
+ if (!open || !vucem) return null;
+
+ // Mover importador de disponibles a seleccionados
+ const seleccionarImportador = async (imp) => {
+ // POST para crear la relación
+ try {
+ // Usar siempre la organización del registro vucem
+ const body = {
+ vucem: vucem.id,
+ rfc: imp.rfc,
+ organizacion: vucem.organizacion
+ };
+ const res = await fetchWithAuth(
+ import.meta.env.VITE_EFC_API_URL + '/vucem/usuario-importador/',
+ {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body)
+ }
+ );
+ if (!res.ok) throw new Error('Error al relacionar importador');
+ const data = await res.json();
+ // Guardar el id de la relación en el importador seleccionado
+ const impConRelacion = {
+ ...imp,
+ id: data.id, // para que el botón de quitar funcione correctamente
+ usuario_importador_id: data.id
+ };
+ setImportadoresDisponibles(importadoresDisponibles.filter(i => i.rfc !== imp.rfc));
+ setImportadoresSeleccionados([...importadoresSeleccionados, impConRelacion]);
+ } catch (err) {
+ alert('No se pudo relacionar el importador.');
+ }
+ };
+ // Mover importador de seleccionados a disponibles
+ const quitarImportador = async (imp) => {
+ // DELETE para eliminar la relación usando el id de la relación
+ try {
+ // Buscar el id de la relación usuario-importador en el objeto importador
+ const relacionId = imp.usuario_importador_id || imp.id_relacion || imp.id;
+ if (!relacionId) {
+ alert('No se encontró el id de la relación usuario-importador.');
+ return;
+ }
+ const url = `${import.meta.env.VITE_EFC_API_URL}/vucem/usuario-importador/${relacionId}/`;
+ const res = await fetchWithAuth(url, { method: 'DELETE' });
+ if (!res.ok) throw new Error('Error al eliminar relación');
+ setImportadoresSeleccionados(importadoresSeleccionados.filter(i => i.rfc !== imp.rfc));
+ setImportadoresDisponibles([...importadoresDisponibles, imp]);
+ } catch (err) {
+ alert('No se pudo eliminar la relación del importador.');
+ }
+ };
+
+ return (
+
+
+ {/* Header formal en escala de azules */}
+
+
+
+
+
+
Relacionar Importadores
+
Asocia importadores a la credencial seleccionada
+
+
+
+
+
+
+
+
+ {/* Contenido del modal */}
+
+
+
+ Usuario:
+ {vucem.usuario}
+
+
+ Patente:
+ {vucem.patente}
+
+
+
+ {/* Importadores disponibles */}
+
+
Disponibles
+
+ {importadoresDisponibles.length === 0 && (
+ Sin importadores
+ )}
+ {importadoresDisponibles.map(imp => (
+ seleccionarImportador(imp)}
+ >
+
+
+ {imp.rfc}
+
+ {imp.nombre}
+
+
+ Agregar
+
+
+ ))}
+
+
+ {/* Importadores seleccionados */}
+
+
Seleccionados
+
+ {importadoresSeleccionados.length === 0 && (
+ Sin seleccionados
+ )}
+ {importadoresSeleccionados.map(imp => (
+ quitarImportador(imp)}
+ >
+
+ Quitar
+
+
+
+ {imp.rfc}
+
+ {imp.nombre}
+
+
+ ))}
+
+
+
+
+
+ Cerrar
+
+
+
+
+
+
+ {/* Modal Relacionar Importadores */}
+ {showRelacionarModal && selectedVucem && (
+
setShowRelacionarModal(false)}
+ vucem={selectedVucem}
+ />
+ )}
{/* Header modernizado con gradientes azules */}
@@ -638,6 +851,18 @@ export default function Vucem() {
+
{
+ setSelectedVucem(vucem);
+ setShowRelacionarModal(true);
+ }}
+ className="inline-flex items-center p-1 border border-purple-300 shadow-sm rounded text-purple-600 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-200 transition-all duration-200"
+ title="Relacionar importadores"
+ >
+
+
+
{ setEditVucem(vucem); setShowEditModal(true); }}
className="inline-flex items-center p-2 border border-blue-300 shadow-sm font-medium rounded-lg text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 transform hover:scale-105"
@@ -736,6 +961,16 @@ export default function Vucem() {
+
handleAbrirRelacion(vucem)}
+ className="inline-flex items-center justify-center p-2 border border-purple-300 shadow-sm font-medium rounded-lg text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200"
+ title="Relacionar importadores"
+ >
+
+
+ Relacionar
+
{ setEditVucem(vucem); setShowEditModal(true); }}
className="inline-flex items-center justify-center p-2 border border-blue-300 shadow-sm font-medium rounded-lg text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
@@ -745,6 +980,7 @@ export default function Vucem() {
+
toggleVucemStatus(vucem.id, vucem.is_active)}
className={`inline-flex items-center justify-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 ${vucem.is_active