import React, { useEffect, useState } from 'react'; import { fetchProcesamientoPedimentos } from '../api/procesos.ts'; const API_URL = import.meta.env.VITE_EFC_API_URL; const MICROSERVICE_URL = import.meta.env.VITE_EFC_MICROSERVICE_URL; // Estado para loading de ejecución de servicio // y función para ejecutar el servicio según el tipo de proceso export default function Procesos() { const [procesos, setProcesos] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const [page, setPage] = useState(1); const [count, setCount] = useState(0); const [itemsPerPage, setItemsPerPage] = useState(12); // Filtros const [pedimentoPedimentoFilter, setPedimentoPedimentoFilter] = useState(''); const [estadoFilter, setEstadoFilter] = useState(''); const [servicioFilter, setServicioFilter] = useState(''); // Estado para loading de ejecución de servicio const [executingId, setExecutingId] = useState(null); // Dropdown state: id del proceso abierto o null const [openDropdownId, setOpenDropdownId] = useState(null); // Función para ejecutar el servicio según el tipo de proceso const handleEjecutarServicio = async (proc) => { setExecutingId(proc.id); let endpoint = ''; // Determinar endpoint según el tipo de servicio switch (proc.servicio) { case 4: // Partidas endpoint = '/services/partidas'; break; case 5: // Remesas endpoint = '/services/remesas'; break; case 6: // Acuse endpoint = '/services/acuse'; break; case 8: // Acuse Cove endpoint = '/services/acuseCove'; break; default: alert('Servicio no soportado para ejecución directa.'); setExecutingId(null); return; } try { const token = localStorage.getItem('access'); const headers = { 'Content-Type': 'application/json', ...(token ? { 'Authorization': `Bearer ${token}` } : {}), }; const body = JSON.stringify({ pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento, organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId, }); const res = await fetch(`${MICROSERVICE_URL}${endpoint}`, { method: 'POST', headers, body, }); if (!res.ok) throw new Error('Error al ejecutar el servicio'); alert('Servicio ejecutado correctamente'); setOpenDropdownId(null); } catch (err) { alert('Error al ejecutar el servicio: ' + (err instanceof Error ? err.message : String(err))); } finally { setExecutingId(null); } }; // Cierra el dropdown si se hace click fuera useEffect(() => { if (openDropdownId === null) return; function handleClick(e) { const el = document.getElementById(`dropdown-acciones-${openDropdownId}`); if (el && !el.contains(e.target)) { setOpenDropdownId(null); } } document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, [openDropdownId]); useEffect(() => { async function fetchProcesos() { setLoading(true); setError(''); try { const token = localStorage.getItem('access'); // Construir query params const params = new URLSearchParams(); params.append('page', String(page)); params.append('page_size', String(itemsPerPage)); if (pedimentoPedimentoFilter) params.append('pedimento__pedimento', pedimentoPedimentoFilter); if (estadoFilter) params.append('estado', estadoFilter); if (servicioFilter) params.append('servicio', servicioFilter); // ...existing code... const API_URL = import.meta.env.VITE_EFC_API_URL; const headers = token ? { 'Authorization': `Bearer ${token}` } : {}; const res = await fetch(`${API_URL}/customs/procesamientopedimentos/?${params.toString()}`, { headers }); if (!res.ok) throw new Error('Error al obtener procesamiento de pedimentos'); const data = await res.json(); setProcesos(data.results || []); setCount(data.count || 0); } catch (err) { setError(err instanceof Error ? err.message : String(err)); } finally { setLoading(false); } } fetchProcesos(); }, [page, itemsPerPage, pedimentoPedimentoFilter, estadoFilter, servicioFilter]); return (

Procesos del Sistema

Estado actual de los procesos de la agencia aduanal

Procesamiento de Pedimentos

{/* Filtros */}
setPedimentoPedimentoFilter(e.target.value)} placeholder="Buscar por pedimento..." className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" />
{/* ...filtros anteriores... */}
{loading ? (
Cargando procesos...
) : error ? (
{error}
) : (
{procesos.length === 0 ? ( ) : ( procesos.map((proc) => ( )) )}
ID Organización Estado Pedimento Servicio Acciones
No hay registros
{proc.id} {proc.organizacion_name || '-'} { proc.estado === 1 ? 'En Espera' : proc.estado === 2 ? 'Procesando' : proc.estado === 3 ? 'Finalizado' : proc.estado === 4 ? 'Error' : String(proc.estado) } { typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.pedimento || JSON.stringify(proc.pedimento) : proc.pedimento } { proc.servicio === 1 ? 'Estado de pedimento' : proc.servicio === 2 ? 'Listado de pedimentos' : proc.servicio === 3 ? 'Pedimento Completo' : proc.servicio === 4 ? 'Pedimento Partidas' : proc.servicio === 5 ? 'Pedimento Remesas' : proc.servicio === 6 ? 'Acuse' : proc.servicio === 7 ? 'EDocument' : proc.servicio === 8 ? 'Cove' : String(proc.servicio) }
{openDropdownId === proc.id && (
)}
{/* Paginación igual a Documents.jsx */} {count > 0 && (
{(() => { const totalPages = Math.max(1, Math.ceil(count / itemsPerPage)); const maxPagesToShow = 5; let startPage = Math.max(1, page - Math.floor(maxPagesToShow / 2)); let endPage = startPage + maxPagesToShow - 1; if (endPage > totalPages) { endPage = totalPages; startPage = Math.max(1, endPage - maxPagesToShow + 1); } const pageNumbers = []; for (let i = startPage; i <= endPage; i++) { pageNumbers.push(i); } return (
{pageNumbers.map(num => ( ))} Página {page} de {totalPages}
); })()}
)}
)}
); }