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

30
src/api/procesos.ts
View File

@@ -1,31 +1,29 @@
import { fetchWithAuth } from '../fetchWithAuth'; import { fetchWithAuth } from '../fetchWithAuth';
// Tipos para la respuesta y registros // Tipos para la respuesta y registros
export interface ProcesamientoPedimento { export interface Task {
id: number; task_id: string;
created_at: string; timestamp: string;
updated_at: string; message: string;
organizacion: string; status: string;
organizacion_name: string;
estado: number;
tipo_procesamiento: number;
pedimento: string; pedimento: string;
organizacion: string;
servicio: number; servicio: number;
} }
export interface ProcesamientoPedimentosResponse { export interface TasksResponse {
count: number; count: number;
next: string | null; next: string | null;
previous: string | null; previous: string | null;
results: ProcesamientoPedimento[]; results: Task[];
} }
// API para customs/procesamientopedimentos/ // API para tasks/tasks/
export async function fetchProcesamientoPedimentos( export async function fetchTasks(
page: number = 1, page: number = 1,
pageSize: number = 20, pageSize: number = 20,
filters: Record<string, any> = {} filters: Record<string, any> = {}
): Promise<ProcesamientoPedimentosResponse> { ): Promise<TasksResponse> {
try { try {
const API_URL = (import.meta as any).env.VITE_EFC_API_URL; const API_URL = (import.meta as any).env.VITE_EFC_API_URL;
@@ -41,15 +39,15 @@ export async function fetchProcesamientoPedimentos(
} }
}); });
const res = await fetchWithAuth(`${API_URL}/customs/procesamientopedimentos/?${params.toString()}`); const res = await fetchWithAuth(`${API_URL}/tasks/tasks/?${params.toString()}`);
if (!res.ok) { if (!res.ok) {
throw new Error('Error al obtener procesamiento de pedimentos'); throw new Error('Error al obtener tareas');
} }
return await res.json(); return await res.json();
} catch (error) { } catch (error) {
console.error('Error in fetchProcesamientoPedimentos:', error); console.error('Error in fetchTasks:', error);
throw error; throw error;
} }
} }

36
src/api/taskStatus.js Normal file
View File

@@ -0,0 +1,36 @@
// Helper functions for task status display
export const getTaskStatusLabel = (status) => {
const statuses = {
'submitted': 'Enviado',
'pending': 'Pendiente',
'processing': 'Procesando',
'completed': 'Completado',
'failed': 'Error',
'cancelled': 'Cancelado'
};
return statuses[status] || `Estado ${status}`;
};
export const getTaskStatusColor = (status) => {
const colors = {
'submitted': 'bg-blue-100 text-blue-800',
'pending': 'bg-yellow-100 text-yellow-800',
'processing': 'bg-indigo-100 text-indigo-800',
'completed': 'bg-green-100 text-green-800',
'failed': 'bg-red-100 text-red-800',
'cancelled': 'bg-gray-100 text-gray-800'
};
return colors[status] || 'bg-gray-100 text-gray-800';
};
// Ayuda a determinar si el estado permite ciertas acciones
export const isTaskActionable = (status) => {
const nonActionableStatuses = ['processing', 'completed', 'cancelled'];
return !nonActionableStatuses.includes(status);
};
export const isTaskFinal = (status) => {
const finalStatuses = ['completed', 'failed', 'cancelled'];
return finalStatuses.includes(status);
};

287
src/pages/Auditor.jsx
View File

@@ -1,4 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { getWithAuth, postWithAuth } from '../fetchWithAuth'; import { getWithAuth, postWithAuth } from '../fetchWithAuth';
const API_URL = import.meta.env.VITE_EFC_API_URL; const API_URL = import.meta.env.VITE_EFC_API_URL;
@@ -15,6 +17,85 @@ function Auditor() {
const [auditandoRemesas, setAuditandoRemesas] = useState(false); const [auditandoRemesas, setAuditandoRemesas] = useState(false);
const [procesandoPedimento, setProcesandoPedimento] = useState(null); const [procesandoPedimento, setProcesandoPedimento] = useState(null);
const [procesandoRemesa, setProcesandoRemesa] = 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) => { const handleAuditarRemesaPedimento = async (pedimentoId) => {
if (procesandoRemesa) return; if (procesandoRemesa) return;
@@ -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(() => { useEffect(() => {
const fetchPedimentos = async () => { const fetchPedimentos = async () => {
setLoading(true); setLoading(true);
try { 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'); if (!response.ok) throw new Error('Error al cargar los pedimentos');
const data = await response.json(); const data = await response.json();
setPedimentos(data.results); setPedimentos(data.results);
@@ -174,8 +298,14 @@ function Auditor() {
setLoading(false); setLoading(false);
} }
}; };
// Aplicar debounce al fetchPedimentos
const timeoutId = setTimeout(() => {
fetchPedimentos(); fetchPedimentos();
}, [page, itemsPerPage]); }, 300);
return () => clearTimeout(timeoutId);
}, [page, itemsPerPage, pedimentoFilter]);
return ( 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="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
@@ -247,6 +377,7 @@ function Auditor() {
) : ( ) : (
<div className="space-y-6"> <div className="space-y-6">
<div className="bg-white rounded-2xl p-4 sm:p-6 border border-gray-200 shadow-sm"> <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"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2"> <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"> <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> </svg>
Servicios de Auditoría Servicios de Auditoría
</h3> </h3>
<div className="flex gap-4"> <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 <button
onClick={handleAuditarTodos} onClick={handleAuditarTodos}
disabled={auditando || auditandoPartidas || pedimentos.length === 0} disabled={auditando || auditandoPartidas || pedimentos.length === 0}
@@ -342,6 +556,39 @@ function Auditor() {
</div> </div>
</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 */} {/* Tabla de pedimentos */}
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-300"> <table className="min-w-full divide-y divide-gray-300">
@@ -384,7 +631,7 @@ function Auditor() {
{pedimentos.map((pedimento) => ( {pedimentos.map((pedimento) => (
<tr key={pedimento.id} className="hover:bg-gray-50"> <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"> <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> </td>
{/* PC - Pedimento Completo */} {/* PC - Pedimento Completo */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center"> <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
@@ -444,18 +691,46 @@ function Auditor() {
</td> </td>
{/* AC - Acuse */} {/* AC - Acuse */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center"> <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"> <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"> <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> </svg>
)}
</button> </button>
</td> </td>
{/* COVE */} {/* COVE */}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center"> <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"> <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"> <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> </svg>
)}
</button> </button>
</td> </td>
{/* AC_COVE */} {/* AC_COVE */}

244
src/pages/PedimentoDetail.jsx
View File

@@ -17,9 +17,10 @@ import 'highlight.js/styles/github.css';
hljs.registerLanguage('xml', xml); hljs.registerLanguage('xml', xml);
import { fetchPedimentoDocuments } from '../api/pedimentoDocuments'; import { fetchPedimentoDocuments } from '../api/pedimentoDocuments';
import { fetchWithAuth, postWithAuth, putWithAuth } from '../fetchWithAuth'; import { fetchWithAuth, postWithAuth, putWithAuth } from '../fetchWithAuth';
import { fetchProcesamientoPedimentos } from '../api/procesos.ts'; import { fetchTasks } from '../api/procesos.ts';
import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves'; import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves';
import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments'; import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments';
import { getTaskStatusLabel, getTaskStatusColor, isTaskActionable, isTaskFinal } from '../api/taskStatus';
import { useParams, Link } from 'react-router-dom'; import { useParams, Link } from 'react-router-dom';
import { useNotification } from '../context/NotificationContext'; import { useNotification } from '../context/NotificationContext';
@@ -370,12 +371,22 @@ export default function PedimentoDetail() {
const [procesosPage, setProcesosPage] = useState(1); const [procesosPage, setProcesosPage] = useState(1);
const [procesosPageSize, setProcesosPageSize] = useState(10); const [procesosPageSize, setProcesosPageSize] = useState(10);
const [procesosFilters, setProcesosFilters] = useState({}); const [procesosFilters, setProcesosFilters] = useState({});
const [sortField, setSortField] = useState('');
const [sortOrder, setSortOrder] = useState('asc');
const [selectedProcesos, setSelectedProcesos] = useState([]);
const [isSelectAll, setIsSelectAll] = useState(false);
// Estados para las acciones de procesos // Estados para las acciones de procesos
const [executingId, setExecutingId] = useState(null); const [executingId, setExecutingId] = useState(null);
const [changingStateId, setChangingStateId] = useState(null); const [changingStateId, setChangingStateId] = useState(null);
const [creatingService, setCreatingService] = useState(null); const [creatingService, setCreatingService] = useState(null);
// Ref para rastrear valores previos de filtros
const prevFiltersRef = useRef({
sortField: '',
sortOrder: 'asc'
});
// Estados para modal de preview // Estados para modal de preview
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewUrl, setPreviewUrl] = useState(''); const [previewUrl, setPreviewUrl] = useState('');
@@ -448,7 +459,7 @@ export default function PedimentoDetail() {
setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]); setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
}; };
const handleSelectAll = () => { const handleSelectAllDocs = () => {
if (allSelected) setSelected([]); if (allSelected) setSelected([]);
else setSelected(allDocIds); else setSelected(allDocIds);
}; };
@@ -824,10 +835,22 @@ export default function PedimentoDetail() {
}, [edocsFilters]); }, [edocsFilters]);
// Funciones para acciones de Procesos // Funciones para acciones de Procesos
// Map legacy estado values to new status values
const mapEstadoToStatus = (estado) => {
const mapping = {
1: 'pending', // Pendiente
2: 'processing', // En Proceso
3: 'completed', // Completado
4: 'failed', // Error
5: 'cancelled' // Cancelado
};
return mapping[estado] || 'pending';
};
const updateProcesoEstado = (procId, nuevoEstado) => { const updateProcesoEstado = (procId, nuevoEstado) => {
setProcesos(procesos => setProcesos(procesos =>
procesos.map(proc => procesos.map(proc =>
proc.id === procId ? { ...proc, estado: nuevoEstado } : proc proc.id === procId ? { ...proc, status: mapEstadoToStatus(nuevoEstado) } : proc
) )
); );
}; };
@@ -850,7 +873,7 @@ export default function PedimentoDetail() {
organizacion: pedimentoData?.organizacion || 1 // Usar la organización del pedimento o default organizacion: pedimentoData?.organizacion || 1 // Usar la organización del pedimento o default
}; };
const res = await postWithAuth(`${API_URL}/customs/procesamientopedimentos/`, body); const res = await postWithAuth(`${API_URL}/tasks/tasks/`, body);
if (!res.ok) { if (!res.ok) {
throw new Error(`Error al crear el servicio: ${nombreServicio}`); throw new Error(`Error al crear el servicio: ${nombreServicio}`);
@@ -871,7 +894,7 @@ export default function PedimentoDetail() {
...procesosFilters, ...procesosFilters,
pedimento: id pedimento: id
}; };
fetchProcesamientoPedimentos(procesosPage, procesosPageSize, filters) fetchTasks(procesosPage, procesosPageSize, filters)
.then((data) => { .then((data) => {
setProcesos(data.results); setProcesos(data.results);
setProcesosCount(data.count); setProcesosCount(data.count);
@@ -893,33 +916,33 @@ export default function PedimentoDetail() {
setChangingStateId(proc.id); setChangingStateId(proc.id);
// Cambiar estado visual a "Procesando" inmediatamente // Cambiar estado visual a "Procesando" inmediatamente
updateProcesoEstado(proc.id, 2); // 2 = Procesando updateProcesoEstado(proc.id, 'processing');
try { try {
const body = { const body = {
estado: 1, // Cambiar a En Espera status: 'pending', // Cambiar a Pendiente
tipo_procesamiento: 2, tipo_procesamiento: 2,
pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento, pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
servicio: proc.servicio, servicio: proc.servicio,
organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId
}; };
const res = await putWithAuth(`${API_URL}/customs/procesamientopedimentos/${proc.id}/`, body); const res = await putWithAuth(`${API_URL}/tasks/tasks/${proc.task_id}/`, body);
if (!res.ok) { if (!res.ok) {
// Si falla, revertir a estado Error // Si falla, cambiar a estado Error
updateProcesoEstado(proc.id, 4); // 4 = Error updateProcesoEstado(proc.id, 'failed'); // Failed
throw new Error('Error al cambiar el estado del proceso'); throw new Error('Error al cambiar el estado del proceso');
} }
// Cambiar estado visual a "En Espera" si fue exitoso // Cambiar estado visual a "En Espera" si fue exitoso
updateProcesoEstado(proc.id, 1); // 1 = En Espera updateProcesoEstado(proc.id, 'pending');
showMessage('Estado cambiado a "En Espera" correctamente', 'success'); showMessage('Estado cambiado a "En Espera" correctamente', 'success');
} catch (err) { } catch (err) {
console.error('Error cambiando estado:', err); console.error('Error cambiando estado:', err);
updateProcesoEstado(proc.id, 4); // 4 = Error updateProcesoEstado(proc.id, 'failed');
showMessage('Error al cambiar el estado del proceso: ' + err.message, 'error'); showMessage('Error al cambiar el estado del proceso: ' + err.message, 'error');
} finally { } finally {
setChangingStateId(null); setChangingStateId(null);
@@ -930,7 +953,7 @@ export default function PedimentoDetail() {
setExecutingId(proc.id); setExecutingId(proc.id);
// Cambiar estado visual a "Procesando" inmediatamente // Cambiar estado visual a "Procesando" inmediatamente
updateProcesoEstado(proc.id, 2); // 2 = Procesando updateProcesoEstado(proc.id, 'processing');
let endpoint = ''; let endpoint = '';
// Determinar endpoint según el tipo de servicio // Determinar endpoint según el tipo de servicio
@@ -958,7 +981,7 @@ export default function PedimentoDetail() {
break; break;
default: default:
// Revertir estado si el servicio no es soportado // Revertir estado si el servicio no es soportado
updateProcesoEstado(proc.id, proc.estado); // Revertir al estado original updateProcesoEstado(proc.id, proc.status); // Revertir al estado original
showMessage('Este servicio no es compatible para ejecución directa.', 'error'); showMessage('Este servicio no es compatible para ejecución directa.', 'error');
setExecutingId(null); setExecutingId(null);
return; return;
@@ -974,17 +997,17 @@ export default function PedimentoDetail() {
if (!res.ok) { if (!res.ok) {
// Si falla, cambiar estado a Error // Si falla, cambiar estado a Error
updateProcesoEstado(proc.id, 4); // 4 = Error updateProcesoEstado(proc.id, 'failed');
throw new Error('Error al ejecutar el servicio'); throw new Error('Error al ejecutar el servicio');
} }
// Si es exitoso, cambiar estado a Finalizado // Si es exitoso, cambiar estado a Finalizado
updateProcesoEstado(proc.id, 3); // 3 = Finalizado updateProcesoEstado(proc.id, 'completed');
showMessage('El servicio se ha ejecutado correctamente', 'success'); showMessage('El servicio se ha ejecutado correctamente', 'success');
} catch (err) { } catch (err) {
// Cambiar estado a Error en caso de excepción // Cambiar estado a Error en caso de excepción
updateProcesoEstado(proc.id, 4); // 4 = Error updateProcesoEstado(proc.id, 'failed');
if (err.message === 'SESSION_EXPIRED') { if (err.message === 'SESSION_EXPIRED') {
showMessage('Tu sesión ha expirado. Por favor, inicia sesión nuevamente.', 'error'); showMessage('Tu sesión ha expirado. Por favor, inicia sesión nuevamente.', 'error');
@@ -1258,6 +1281,57 @@ export default function PedimentoDetail() {
} }
}; };
// Funciones de manejo de procesos
// Removed duplicate definitions
// Handle select all process checkboxes
const handleSelectAllProcesos = (e) => {
if (e.target.checked) {
const availableProcesos = procesos
.filter(proc => proc.status !== 'running' && proc.status !== 'completed')
.map(proc => proc.task_id);
setSelectedProcesos(availableProcesos);
setIsSelectAll(true);
} else {
setSelectedProcesos([]);
setIsSelectAll(false);
}
};
// Handle select individual process checkbox
const handleSelectProceso = (id, checked) => {
if (checked) {
setSelectedProcesos(prev => [...prev, id]);
} else {
setSelectedProcesos(prev => prev.filter(i => i !== id));
}
// Update isSelectAll
const availableProcesos = procesos
.filter(proc => proc.status !== 'running' && proc.status !== 'completed')
.map(proc => proc.task_id);
setIsSelectAll(availableProcesos.length === selectedProcesos.length + (checked ? 1 : -1));
};
const handlePasarPaginaAEspera = async () => {
const failedProcesses = procesos.filter(proc => proc.status === 'failed');
if (failedProcesses.length === 0) return;
for (const proceso of failedProcesses) {
await handlePasarAEspera(proceso);
}
};
const handlePasarSeleccionadosAEspera = async () => {
const failedSelectedProcesses = procesos.filter(
proc => selectedProcesos.includes(proc.task_id) && proc.status === 'failed'
);
if (failedSelectedProcesses.length === 0) return;
for (const proceso of failedSelectedProcesses) {
await handlePasarAEspera(proceso);
}
};
// Función para verificar servicios creados // Función para verificar servicios creados
const handleVerificarServiciosCreados = async () => { const handleVerificarServiciosCreados = async () => {
try { try {
@@ -1348,16 +1422,47 @@ export default function PedimentoDetail() {
useEffect(() => { useEffect(() => {
if (!id || activeTab !== 'procesos') return; if (!id || activeTab !== 'procesos') return;
// Detectar si algún filtro cambió
const currentFilters = {
sortField,
sortOrder
};
const filtersChanged = Object.keys(currentFilters).some(
key => currentFilters[key] !== prevFiltersRef.current[key]
);
// Si los filtros cambiaron y no estamos en la página 1, resetear página
if (filtersChanged && procesosPage !== 1) {
setProcesosPage(1);
// Actualizar ref con valores actuales
prevFiltersRef.current = { ...currentFilters };
return; // Salir temprano, el efecto se ejecutará de nuevo con page = 1
}
// Actualizar ref con valores actuales
prevFiltersRef.current = { ...currentFilters };
setProcesosLoading(true); setProcesosLoading(true);
setProcesosError(''); setProcesosError('');
// Crear filtros incluyendo el pedimento // Construir filtros
const filters = { const filters = {
...procesosFilters, ...procesosFilters,
pedimento: id // Filtrar por el pedimento actual pedimento: id // Filtrar por el pedimento actual
}; };
fetchProcesamientoPedimentos(procesosPage, procesosPageSize, filters) if (sortField) {
const fieldMapping = {
'id': 'task_id',
'estado': 'status',
'pedimento': 'pedimento_app'
};
const mappedField = fieldMapping[sortField] || sortField;
filters['ordering'] = (sortOrder === 'desc' ? '-' : '') + mappedField;
}
fetchTasks(procesosPage, procesosPageSize, filters)
.then((data) => { .then((data) => {
setProcesos(data.results); setProcesos(data.results);
setProcesosCount(data.count); setProcesosCount(data.count);
@@ -1372,7 +1477,7 @@ export default function PedimentoDetail() {
} }
setProcesosLoading(false); setProcesosLoading(false);
}); });
}, [id, activeTab, procesosPage, procesosPageSize, showMessage]); }, [id, activeTab, procesosPage, procesosPageSize, sortField, sortOrder, procesosFilters, showMessage]);
// Resetear página de Procesos cuando cambie el pedimento // Resetear página de Procesos cuando cambie el pedimento
useEffect(() => { useEffect(() => {
@@ -3610,7 +3715,18 @@ export default function PedimentoDetail() {
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{procesos.map((proceso, index) => ( {procesos.map((proceso, index) => (
<tr key={`${proceso.id}-${index}`} className="hover:bg-gray-50"> <tr key={`${proceso.task_id}-${index}`} className={`hover:bg-gray-50 ${selectedProcesos.includes(proceso.task_id) ? 'bg-blue-50' : ''}`}>
<td className="px-3 py-4">
<div className="flex items-center justify-center">
<input
type="checkbox"
checked={selectedProcesos.includes(proceso.task_id)}
onChange={(e) => handleSelectProceso(proceso.task_id, e.target.checked)}
disabled={proceso.status === 'running' || proceso.status === 'completed'}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded disabled:opacity-50"
/>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10"> <div className="flex-shrink-0 h-10 w-10">
@@ -3622,7 +3738,10 @@ export default function PedimentoDetail() {
</div> </div>
<div className="ml-4"> <div className="ml-4">
<div className="text-sm font-medium text-gray-900"> <div className="text-sm font-medium text-gray-900">
#{proceso.id} #{proceso.task_id}
</div>
<div className="text-sm text-gray-500">
{proceso.pedimento_app}
</div> </div>
</div> </div>
</div> </div>
@@ -3633,9 +3752,17 @@ export default function PedimentoDetail() {
</span> </span>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getEstadoColor(proceso.estado)}`}> <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getTaskStatusColor(proceso.status)}`}>
{getEstadoLabel(proceso.estado)} {getTaskStatusLabel(proceso.status)}
</span> </span>
{proceso.status === 'running' && (
<span className="ml-2 inline-flex items-center">
<svg className="animate-spin h-4 w-4 text-blue-600" 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>
</span>
)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{proceso.organizacion_name || 'N/A'} {proceso.organizacion_name || 'N/A'}
@@ -3649,81 +3776,58 @@ export default function PedimentoDetail() {
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium"> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{/* Botón Play (Ejecutar Servicio) */} {/* Botón Play (Ejecutar Servicio) */}
{isTaskActionable(proceso.status) && (
<button <button
onClick={() => handleEjecutarServicio(proceso)} onClick={() => handleEjecutarProceso(proceso)}
disabled={ disabled={executingId === proceso.task_id || proceso.status === 'running'}
executingId === proceso.id || className={`group inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
proceso.estado === 2 || // En Proceso executingId === proceso.task_id || proceso.status === 'running'
proceso.estado === 3 || // Completado ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
proceso.estado === 5 // Cancelado : 'text-green-700 bg-green-100 hover:bg-green-200 hover:text-green-800'
}
className={`inline-flex items-center p-2 border border-transparent rounded-md transition-colors duration-200 ${
executingId === proceso.id ||
proceso.estado === 2 ||
proceso.estado === 3 ||
proceso.estado === 5
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
: 'bg-green-100 text-green-700 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500'
}`} }`}
title={ title={
executingId === proceso.id ? 'Ejecutando...' : executingId === proceso.task_id ? 'Ejecutando...' :
proceso.estado === 2 ? 'No disponible - En proceso' : proceso.status === 'running' ? 'En proceso...' :
proceso.estado === 3 ? 'No disponible - Completado' :
proceso.estado === 5 ? 'No disponible - Cancelado' :
'Ejecutar servicio' 'Ejecutar servicio'
} }
> >
{executingId === proceso.id ? ( {executingId === proceso.task_id ? (
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"> <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <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> <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>
) : ( ) : (
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"> <svg className="h-4 w-4 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/> <path d="M8 5v14l11-7z"/>
</svg> </svg>
)} )}
</button> </button>
)}
{/* Botón Refresh (Pasar a Espera) */} {/* Botón Retry (Reintentar) */}
{proceso.status === 'failed' && (
<button <button
onClick={() => handlePasarAEspera(proceso)} onClick={() => handlePasarAEspera(proceso)}
disabled={ disabled={changingStateId === proceso.task_id}
changingStateId === proceso.id || className={`group inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
proceso.estado === 1 || // Pendiente changingStateId === proceso.task_id
proceso.estado === 2 || // En Proceso ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
proceso.estado === 3 || // Completado : 'text-yellow-700 bg-yellow-100 hover:bg-yellow-200 hover:text-yellow-800'
proceso.estado === 5 // Cancelado
}
className={`inline-flex items-center p-2 border border-transparent rounded-md transition-colors duration-200 ${
changingStateId === proceso.id ||
proceso.estado === 1 ||
proceso.estado === 2 ||
proceso.estado === 3 ||
proceso.estado === 5
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
: 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'
}`} }`}
title={ title={changingStateId === proceso.task_id ? 'Reiniciando...' : 'Reintentar proceso'}
changingStateId === proceso.id ? 'Cambiando estado...' :
proceso.estado === 1 ? 'No disponible - Use Play para ejecutar' :
proceso.estado === 2 ? 'No disponible - En proceso' :
proceso.estado === 3 ? 'No disponible - Completado' :
proceso.estado === 5 ? 'No disponible - Cancelado' :
'Pasar a espera'
}
> >
{changingStateId === proceso.id ? ( {changingStateId === proceso.task_id ? (
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"> <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <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> <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>
) : ( ) : (
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-4 w-4 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" /> <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> </svg>
)} )}
</button> </button>
)}
</div> </div>
</td> </td>
</tr> </tr>

1710
src/pages/Procesos.jsx
View File

File diff suppressed because it is too large Load Diff