EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

se modifico auditor y pagina de procesos

Browse Source
This commit is contained in:
Kevin Rosales
2025-10-12 07:52:06 -06:00
parent c924aab9c1
commit 03a9f793b1
5 changed files with 1049 additions and 1384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/pages/Auditor.jsx
View File

@@ -1,4 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { getWithAuth, postWithAuth } from '../fetchWithAuth';
const API_URL = import.meta.env.VITE_EFC_API_URL;
@@ -15,13 +17,92 @@ function Auditor() {
const [auditandoRemesas, setAuditandoRemesas] = useState(false);
const [procesandoPedimento, setProcesandoPedimento] = useState(null);
const [procesandoRemesa, setProcesandoRemesa] = useState(null);
const [procesandoAcuse, setProcesandoAcuse] = useState(null);
const [procesandoCove, setProcesandoCove] = useState(null);
const [auditandoAcusesCove, setAuditandoAcusesCove] = useState(false);
const [pedimentoFilter, setPedimentoFilter] = useState('');
const [auditandoEDocuments, setAuditandoEDocuments] = useState(false);
const [auditandoAcuses, setAuditandoAcuses] = useState(false);
// Handler para auditar acuses (general)
const handleAuditarAcuses = async () => {
if (auditandoAcuses) return;
try {
setAuditandoAcuses(true);
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/`, {
organizacion_id: organizacionId
});
if (!response.ok) {
throw new Error('Error al iniciar la auditoría de acuses');
}
alert('La auditoría de acuses se ha iniciado correctamente');
} catch (error) {
console.error('Error:', error);
alert(error.message);
} finally {
setAuditandoAcuses(false);
}
};
// Handler para auditar EDocuments (general)
const handleAuditarEDocuments = async () => {
if (auditandoEDocuments) return;
try {
setAuditandoEDocuments(true);
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-edocuments/`, {
organizacion_id: organizacionId
});
if (!response.ok) {
throw new Error('Error al iniciar la auditoría de EDocuments');
}
alert('La auditoría de EDocuments se ha iniciado correctamente');
} catch (error) {
console.error('Error:', error);
alert(error.message);
} finally {
setAuditandoEDocuments(false);
}
};
// Handler para auditar acuses cove (general)
const handleAuditarAcusesCove = async () => {
if (auditandoAcusesCove) return;
try {
setAuditandoAcusesCove(true);
// Obtener el organizacion_id del primer pedimento
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse-cove/`, {
organizacion_id: organizacionId
});
if (!response.ok) {
throw new Error('Error al iniciar la auditoría de acuses cove');
}
alert('La auditoría de acuses cove se ha iniciado correctamente');
} catch (error) {
console.error('Error:', error);
alert(error.message);
} finally {
setAuditandoAcusesCove(false);
}
};
const handleAuditarRemesaPedimento = async (pedimentoId) => {
if (procesandoRemesa) return;
try {
setProcesandoRemesa(pedimentoId);
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-procesamiento-remesa/pedimento/`, {
pedimento_id: pedimentoId
});
@@ -43,12 +124,12 @@ function Auditor() {
const handleAuditarRemesas = async () => {
if (auditandoRemesas) return;
try {
setAuditandoRemesas(true);
// Obtener el organizacion_id del primer pedimento
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
@@ -74,10 +155,10 @@ function Auditor() {
const handleAuditarPartidasPedimento = async (pedimentoId) => {
if (procesandoPedimento) return;
try {
setProcesandoPedimento(pedimentoId);
const response = await postWithAuth(`${API_URL}/customs/auditor/crear-partidas/pedimento/`, {
pedimento_id: pedimentoId
});
@@ -99,12 +180,12 @@ function Auditor() {
const handleAuditarPartidas = async () => {
if (auditandoPartidas) return;
try {
setAuditandoPartidas(true);
// Obtener el organizacion_id del primer pedimento
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
@@ -130,12 +211,12 @@ function Auditor() {
const handleAuditarTodos = async () => {
if (auditando) return;
try {
setAuditando(true);
// Obtener el organizacion_id del primer pedimento
const organizacionId = pedimentos[0]?.organizacion;
if (!organizacionId) {
throw new Error('No hay organización disponible para auditar');
}
@@ -159,11 +240,54 @@ function Auditor() {
}
};
const handleAuditarAcusePedimento = async (pedimentoId) => {
if (procesandoAcuse) return;
try {
setProcesandoAcuse(pedimentoId);
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/pedimento/`, {
pedimento_id: pedimentoId
});
if (!response.ok) {
throw new Error('Error al auditar acuse del pedimento');
}
alert('El acuse del pedimento se está auditando');
} catch (error) {
console.error('Error:', error);
alert(error.message);
} finally {
setProcesandoAcuse(null);
}
};
const handleAuditarCovePedimento = async (pedimentoId) => {
if (procesandoCove) return;
try {
setProcesandoCove(pedimentoId);
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-cove/pedimento/`, {
pedimento_id: pedimentoId
});
if (!response.ok) {
throw new Error('Error al auditar COVE del pedimento');
}
alert('El COVE del pedimento se está auditando');
} catch (error) {
console.error('Error:', error);
alert(error.message);
} finally {
setProcesandoCove(null);
}
};
useEffect(() => {
const fetchPedimentos = async () => {
setLoading(true);
try {
const response = await getWithAuth(`${API_URL}/customs/pedimentos/?page=${page}&page_size=${itemsPerPage}`);
const queryParams = new URLSearchParams({
page: page.toString(),
page_size: itemsPerPage.toString(),
...(pedimentoFilter && { pedimento_app: pedimentoFilter })
});
const response = await getWithAuth(`${API_URL}/customs/pedimentos/?${queryParams}`);
if (!response.ok) throw new Error('Error al cargar los pedimentos');
const data = await response.json();
setPedimentos(data.results);
@@ -174,14 +298,20 @@ function Auditor() {
setLoading(false);
}
};
fetchPedimentos();
}, [page, itemsPerPage]);
// Aplicar debounce al fetchPedimentos
const timeoutId = setTimeout(() => {
fetchPedimentos();
}, 300);
return () => clearTimeout(timeoutId);
}, [page, itemsPerPage, pedimentoFilter]);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
<div className="max-w-7xl mx-auto">
{/* Header mejorado y responsivo */}
<div className="mb-6 sm:mb-8 relative overflow-hidden rounded-3xl shadow-2xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 p-6 sm:p-8 flex items-center gap-4 sm:gap-6 animate-fadein-slideup opacity-0"
<div className="mb-6 sm:mb-8 relative overflow-hidden rounded-3xl shadow-2xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 p-6 sm:p-8 flex items-center gap-4 sm:gap-6 animate-fadein-slideup opacity-0"
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
<div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-3 sm:p-4 shadow-lg animate-bounce-slow">
<svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -223,9 +353,9 @@ function Auditor() {
</div>
{/* Contenido principal */}
<div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 lg:p-8 animate-fadein-slideup opacity-0"
<div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 lg:p-8 animate-fadein-slideup opacity-0"
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
{loading ? (
<div className="flex flex-col items-center justify-center py-12">
<div className="relative">
@@ -247,6 +377,7 @@ function Auditor() {
) : (
<div className="space-y-6">
<div className="bg-white rounded-2xl p-4 sm:p-6 border border-gray-200 shadow-sm">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -254,8 +385,91 @@ function Auditor() {
</svg>
Servicios de Auditoría
</h3>
<div className="flex gap-4">
<button
onClick={handleAuditarAcusesCove}
disabled={auditandoAcusesCove || pedimentos.length === 0}
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
${auditandoAcusesCove
? 'bg-gray-400 cursor-not-allowed'
: 'bg-pink-600 hover:bg-pink-700 hover:shadow-md transform hover:scale-105'
}
`}
>
{auditandoAcusesCove ? (
<>
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Auditando Acuses Cove...
</>
) : (
<>
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Auditar Acuses Cove
</>
)}
</button>
<button
onClick={handleAuditarEDocuments}
disabled={auditandoEDocuments || pedimentos.length === 0}
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
${auditandoEDocuments
? 'bg-gray-400 cursor-not-allowed'
: 'bg-yellow-600 hover:bg-yellow-700 hover:shadow-md transform hover:scale-105'
}
`}
>
{auditandoEDocuments ? (
<>
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Auditando EDocuments...
</>
) : (
<>
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Auditar EDocuments
</>
)}
</button>
<button
onClick={handleAuditarAcuses}
disabled={auditandoAcuses || pedimentos.length === 0}
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
${auditandoAcuses
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700 hover:shadow-md transform hover:scale-105'
}
`}
>
{auditandoAcuses ? (
<>
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Auditando Acuses...
</>
) : (
<>
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Auditar Acuses
</>
)}
</button>
<button
onClick={handleAuditarTodos}
disabled={auditando || auditandoPartidas || pedimentos.length === 0}
@@ -342,6 +556,39 @@ function Auditor() {
</div>
</div>
{/* Sección de Filtros */}
<div className="mt-6 bg-white rounded-lg border border-gray-200 p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Contenedor para los filtros - esperando instrucciones */}
<div className="col-span-full">
<h3 className="text-lg font-medium text-gray-900 mb-4">
Filtros de Búsqueda
</h3>
</div>
<div className="col-span-1">
<label htmlFor="pedimento" className="block text-sm font-medium text-gray-700 mb-2">
Número de Pedimento
</label>
<div className="relative rounded-md shadow-sm">
<input
type="text"
name="pedimento"
id="pedimento"
value={pedimentoFilter}
onChange={(e) => setPedimentoFilter(e.target.value)}
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"
placeholder="Buscar por pedimento..."
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
</div>
</div>
</div>
{/* Tabla de pedimentos */}
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-300">
@@ -384,23 +631,23 @@ function Auditor() {
{pedimentos.map((pedimento) => (
<tr key={pedimento.id} className="hover:bg-gray-50">
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">
{pedimento.pedimento_app}
<Link to={`/expedientes/pedimento/${pedimento.id}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>{pedimento.pedimento_app}</Link>
</td>
{/* PC - Pedimento Completo */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
<path d="M8 5v14l11-7z" />
</svg>
</button>
</td>
{/* RM - Remesas */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button
<button
onClick={() => handleAuditarRemesaPedimento(pedimento.id)}
disabled={procesandoRemesa === pedimento.id}
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200
${procesandoRemesa === pedimento.id
${procesandoRemesa === pedimento.id
? 'opacity-50 cursor-not-allowed'
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
}
@@ -413,18 +660,18 @@ function Auditor() {
</svg>
) : (
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
<path d="M8 5v14l11-7z" />
</svg>
)}
</button>
</td>
{/* PT - Partidas */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button
<button
onClick={() => handleAuditarPartidasPedimento(pedimento.id)}
disabled={procesandoPedimento === pedimento.id}
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200
${procesandoPedimento === pedimento.id
${procesandoPedimento === pedimento.id
? 'opacity-50 cursor-not-allowed'
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
}
@@ -437,32 +684,60 @@ function Auditor() {
</svg>
) : (
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
<path d="M8 5v14l11-7z" />
</svg>
)}
</button>
</td>
{/* AC - Acuse */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
<button
onClick={() => handleAuditarAcusePedimento(pedimento.id)}
disabled={procesandoAcuse === pedimento.id}
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoAcuse === pedimento.id
? 'opacity-50 cursor-not-allowed'
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
}`}
>
{procesandoAcuse === pedimento.id ? (
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
) : (
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
)}
</button>
</td>
{/* COVE */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
<button
onClick={() => handleAuditarCovePedimento(pedimento.id)}
disabled={procesandoCove === pedimento.id}
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoCove === pedimento.id
? 'opacity-50 cursor-not-allowed'
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
}`}
>
{procesandoCove === pedimento.id ? (
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
) : (
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
)}
</button>
</td>
{/* AC_COVE */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
<path d="M8 5v14l11-7z" />
</svg>
</button>
</td>
@@ -470,7 +745,7 @@ function Auditor() {
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
<path d="M8 5v14l11-7z" />
</svg>
</button>
</td>