fix: se crea boton para ejecutar los procesos de consulta a ventanilla unica.
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { fetchWithAuth } from '../fetchWithAuth';
|
import { fetchWithAuth, postWithAuth } from '../fetchWithAuth';
|
||||||
|
|
||||||
// Tipos para la respuesta y registros
|
// Tipos para la respuesta y registros
|
||||||
export interface Task {
|
export interface Task {
|
||||||
@@ -51,3 +51,61 @@ export async function fetchTasks(
|
|||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Interfaz para la respuesta del comando
|
||||||
|
export interface ComandoResponse {
|
||||||
|
message?: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Interfaz para los parámetros de ejecución
|
||||||
|
export interface EjecutarComandoParams {
|
||||||
|
procesamiento?: string;
|
||||||
|
todos?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API para ejecutar comando de procesamiento
|
||||||
|
export async function ejecutarComando(
|
||||||
|
params: EjecutarComandoParams
|
||||||
|
): Promise<ComandoResponse> {
|
||||||
|
try {
|
||||||
|
const API_URL = (import.meta as any).env.VITE_EFC_API_URL;
|
||||||
|
|
||||||
|
console.log('API_URL:', API_URL);
|
||||||
|
// Preparar los datos para la petición POST
|
||||||
|
const requestData: any = {};
|
||||||
|
|
||||||
|
if (params.procesamiento !== undefined) {
|
||||||
|
requestData.procesamiento = params.procesamiento;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.todos !== undefined) {
|
||||||
|
requestData.todos = params.todos;
|
||||||
|
}
|
||||||
|
|
||||||
|
// const res = await fetchWithAuth(`${API_URL}/customs/procesamientopedimentos-ejecutar-comando/`, {
|
||||||
|
// method: 'POST',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/json',
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify(requestData),
|
||||||
|
// });
|
||||||
|
|
||||||
|
const res = await postWithAuth(`${API_URL}/customs/procesamientopedimentos-ejecutar-comando/`, requestData);
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
// Intentar obtener el mensaje de error del servidor
|
||||||
|
try {
|
||||||
|
const errorData = await res.json();
|
||||||
|
throw new Error(errorData.message || errorData.error || `Error ${res.status}: ${res.statusText}`);
|
||||||
|
} catch {
|
||||||
|
throw new Error(`Error ${res.status}: ${res.statusText}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return await res.json();
|
||||||
|
} catch (error) {
|
||||||
|
// console.error('Error in ejecutarComando:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState, useRef } from 'react';
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { fetchTasks } from '../api/procesos.ts';
|
import { fetchTasks, ejecutarComando } from '../api/procesos.ts';
|
||||||
import { fetchWithAuth } from '../fetchWithAuth';
|
import { fetchWithAuth } from '../fetchWithAuth';
|
||||||
|
import { useNotification } from '../context/NotificationContext';
|
||||||
|
|
||||||
// Modal para mostrar detalles del task
|
// Modal para mostrar detalles del task
|
||||||
const TaskDetailsModal = ({ task, onClose }) => {
|
const TaskDetailsModal = ({ task, onClose }) => {
|
||||||
@@ -42,9 +43,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
||||||
<div className="bg-white rounded-2xl p-6 max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
<div className="bg-white rounded-2xl p-6 max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<h3 className="text-xl font-semibold text-gray-900">Detalles de la Tarea</h3>
|
<h3 className="text-xl font-semibold text-gray-900">Detalles de la Tarea</h3>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
@@ -58,20 +59,20 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Información básica de la tarea */}
|
{/* Información básica de la tarea */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h4 className="text-sm font-medium text-gray-500">Task ID</h4>
|
<h4 className="text-sm font-medium text-gray-500">Task ID</h4>
|
||||||
<p className="mt-1 text-sm font-mono text-gray-900">{task.task_id}</p>
|
<p className="mt-1 font-mono text-sm text-gray-900">{task.task_id}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h4 className="text-sm font-medium text-gray-500">Estado</h4>
|
<h4 className="text-sm font-medium text-gray-500">Estado</h4>
|
||||||
<span className={`mt-2 inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border ${getStatusColor(task.status)}`}>
|
<span className={`mt-2 inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold border ${getStatusColor(task.status)}`}>
|
||||||
{task.status}
|
{task.status}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h4 className="text-sm font-medium text-gray-500">Fecha</h4>
|
<h4 className="text-sm font-medium text-gray-500">Fecha</h4>
|
||||||
<p className="mt-1 text-sm text-gray-900">
|
<p className="mt-1 text-sm text-gray-900">
|
||||||
{new Date(task.timestamp).toLocaleString('es-MX', {
|
{new Date(task.timestamp).toLocaleString('es-MX', {
|
||||||
@@ -86,14 +87,14 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h4 className="text-sm font-medium text-gray-500">Progreso</h4>
|
<h4 className="text-sm font-medium text-gray-500">Progreso</h4>
|
||||||
<p className="mt-1 text-sm text-gray-900">{task.progress || 0}%</p>
|
<p className="mt-1 text-sm text-gray-900">{task.progress || 0}%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mensajes y Errores */}
|
{/* Mensajes y Errores */}
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h4 className="text-sm font-medium text-gray-500">Mensaje de la tarea</h4>
|
<h4 className="text-sm font-medium text-gray-500">Mensaje de la tarea</h4>
|
||||||
{(() => {
|
{(() => {
|
||||||
// Intentar parsear el mensaje si contiene un error HTTPException
|
// Intentar parsear el mensaje si contiene un error HTTPException
|
||||||
@@ -104,12 +105,12 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
const detail = JSON.parse(match[1].replace(/'/g, '"'));
|
const detail = JSON.parse(match[1].replace(/'/g, '"'));
|
||||||
return (
|
return (
|
||||||
<div className="mt-2 space-y-3">
|
<div className="mt-2 space-y-3">
|
||||||
<div className="bg-red-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-red-50">
|
||||||
<p className="text-sm text-red-700 font-medium">{detail.message}</p>
|
<p className="text-sm font-medium text-red-700">{detail.message}</p>
|
||||||
</div>
|
</div>
|
||||||
{detail.errors && detail.errors.length > 0 && (
|
{detail.errors && detail.errors.length > 0 && (
|
||||||
<div className="bg-red-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-red-50">
|
||||||
<ul className="list-disc pl-4 space-y-1">
|
<ul className="pl-4 space-y-1 list-disc">
|
||||||
{detail.errors.map((error, idx) => (
|
{detail.errors.map((error, idx) => (
|
||||||
<li key={idx} className="text-sm text-red-600">{error}</li>
|
<li key={idx} className="text-sm text-red-600">{error}</li>
|
||||||
))}
|
))}
|
||||||
@@ -117,14 +118,14 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{detail.data && (
|
{detail.data && (
|
||||||
<div className="bg-orange-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-orange-50">
|
||||||
<h5 className="text-sm font-medium text-orange-700 mb-2">Archivo de Error:</h5>
|
<h5 className="mb-2 text-sm font-medium text-orange-700">Archivo de Error:</h5>
|
||||||
<p className="text-sm text-orange-600 font-mono">{detail.data.error_file}</p>
|
<p className="font-mono text-sm text-orange-600">{detail.data.error_file}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{detail.metadata && (
|
{detail.metadata && (
|
||||||
<div className="bg-blue-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-blue-50">
|
||||||
<h5 className="text-sm font-medium text-blue-700 mb-2">Información Adicional:</h5>
|
<h5 className="mb-2 text-sm font-medium text-blue-700">Información Adicional:</h5>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-2 gap-2">
|
||||||
{Object.entries(detail.metadata).map(([key, value]) => (
|
{Object.entries(detail.metadata).map(([key, value]) => (
|
||||||
<div key={key} className="flex items-start gap-2">
|
<div key={key} className="flex items-start gap-2">
|
||||||
@@ -149,7 +150,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
{/* Mostrar detalles de error si existe */}
|
{/* Mostrar detalles de error si existe */}
|
||||||
{(task.status === 'FAILURE' || task.status === 'FAILED') && task.error && (
|
{(task.status === 'FAILURE' || task.status === 'FAILED') && task.error && (
|
||||||
<div className="mt-4 space-y-4">
|
<div className="mt-4 space-y-4">
|
||||||
<div className="border-t pt-4">
|
<div className="pt-4 border-t">
|
||||||
<h4 className="text-sm font-medium text-red-600">Detalles del Error</h4>
|
<h4 className="text-sm font-medium text-red-600">Detalles del Error</h4>
|
||||||
{(() => {
|
{(() => {
|
||||||
const errorDetail = parseError(task.error);
|
const errorDetail = parseError(task.error);
|
||||||
@@ -158,16 +159,16 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
<div className="mt-3 space-y-4">
|
<div className="mt-3 space-y-4">
|
||||||
{/* Mensaje principal del error */}
|
{/* Mensaje principal del error */}
|
||||||
{errorDetail.detail.message && (
|
{errorDetail.detail.message && (
|
||||||
<div className="bg-red-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-red-50">
|
||||||
<p className="text-sm text-red-700">{errorDetail.detail.message}</p>
|
<p className="text-sm text-red-700">{errorDetail.detail.message}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Lista de errores específicos */}
|
{/* Lista de errores específicos */}
|
||||||
{errorDetail.detail.errors && errorDetail.detail.errors.length > 0 && (
|
{errorDetail.detail.errors && errorDetail.detail.errors.length > 0 && (
|
||||||
<div className="bg-red-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-red-50">
|
||||||
<h5 className="text-sm font-medium text-red-700 mb-2">Errores detectados:</h5>
|
<h5 className="mb-2 text-sm font-medium text-red-700">Errores detectados:</h5>
|
||||||
<ul className="list-disc pl-4 space-y-1">
|
<ul className="pl-4 space-y-1 list-disc">
|
||||||
{errorDetail.detail.errors.map((error, idx) => (
|
{errorDetail.detail.errors.map((error, idx) => (
|
||||||
<li key={idx} className="text-sm text-red-600">{error}</li>
|
<li key={idx} className="text-sm text-red-600">{error}</li>
|
||||||
))}
|
))}
|
||||||
@@ -177,8 +178,8 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
|
|
||||||
{/* Datos adicionales del error */}
|
{/* Datos adicionales del error */}
|
||||||
{errorDetail.detail.data && (
|
{errorDetail.detail.data && (
|
||||||
<div className="bg-orange-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-orange-50">
|
||||||
<h5 className="text-sm font-medium text-orange-700 mb-2">Archivos relacionados:</h5>
|
<h5 className="mb-2 text-sm font-medium text-orange-700">Archivos relacionados:</h5>
|
||||||
<div className="grid grid-cols-1 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
{Object.entries(errorDetail.detail.data).map(([key, value]) => (
|
{Object.entries(errorDetail.detail.data).map(([key, value]) => (
|
||||||
<div key={key} className="flex items-start gap-2">
|
<div key={key} className="flex items-start gap-2">
|
||||||
@@ -192,9 +193,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
|
|
||||||
{/* Metadata */}
|
{/* Metadata */}
|
||||||
{errorDetail.detail.metadata && (
|
{errorDetail.detail.metadata && (
|
||||||
<div className="bg-blue-50 p-3 rounded-lg">
|
<div className="p-3 rounded-lg bg-blue-50">
|
||||||
<h5 className="text-sm font-medium text-blue-700 mb-2">Metadata:</h5>
|
<h5 className="mb-2 text-sm font-medium text-blue-700">Metadata:</h5>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
<div className="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||||
{Object.entries(errorDetail.detail.metadata).map(([key, value]) => (
|
{Object.entries(errorDetail.detail.metadata).map(([key, value]) => (
|
||||||
<div key={key} className="flex items-start gap-2">
|
<div key={key} className="flex items-start gap-2">
|
||||||
<span className="text-sm font-medium text-blue-600">{key}:</span>
|
<span className="text-sm font-medium text-blue-600">{key}:</span>
|
||||||
@@ -208,7 +209,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="bg-red-50 p-3 rounded-lg mt-2">
|
<div className="p-3 mt-2 rounded-lg bg-red-50">
|
||||||
<p className="text-sm text-red-700">{task.error}</p>
|
<p className="text-sm text-red-700">{task.error}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -220,7 +221,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
{/* Mensaje del resultado si existe */}
|
{/* Mensaje del resultado si existe */}
|
||||||
{task.result?.message && (
|
{task.result?.message && (
|
||||||
<>
|
<>
|
||||||
<h4 className="text-sm font-medium text-gray-500 mt-3">Mensaje del resultado</h4>
|
<h4 className="mt-3 text-sm font-medium text-gray-500">Mensaje del resultado</h4>
|
||||||
<p className="mt-1 text-sm text-gray-900">{task.result.message}</p>
|
<p className="mt-1 text-sm text-gray-900">{task.result.message}</p>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -229,13 +230,13 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
{/* Detalles del resultado */}
|
{/* Detalles del resultado */}
|
||||||
{task.result?.data && (
|
{task.result?.data && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h4 className="text-lg font-medium text-gray-700 border-b pb-2">Detalles del Resultado</h4>
|
<h4 className="pb-2 text-lg font-medium text-gray-700 border-b">Detalles del Resultado</h4>
|
||||||
|
|
||||||
{/* Información del documento si existe */}
|
{/* Información del documento si existe */}
|
||||||
{task.result.data.data?.documento && (
|
{task.result.data.data?.documento && (
|
||||||
<div className="bg-blue-50 p-4 rounded-xl">
|
<div className="p-4 bg-blue-50 rounded-xl">
|
||||||
<h5 className="text-sm font-medium text-blue-700 mb-3">Información del Documento</h5>
|
<h5 className="mb-3 text-sm font-medium text-blue-700">Información del Documento</h5>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-medium text-blue-600">Número de Pedimento</p>
|
<p className="text-xs font-medium text-blue-600">Número de Pedimento</p>
|
||||||
<p className="text-sm text-blue-900">{task.result.data.data.documento.pedimento_numero}</p>
|
<p className="text-sm text-blue-900">{task.result.data.data.documento.pedimento_numero}</p>
|
||||||
@@ -258,9 +259,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
|
|
||||||
{/* Información de la partida si existe */}
|
{/* Información de la partida si existe */}
|
||||||
{task.result.data.data?.partida_update_response && (
|
{task.result.data.data?.partida_update_response && (
|
||||||
<div className="bg-indigo-50 p-4 rounded-xl">
|
<div className="p-4 bg-indigo-50 rounded-xl">
|
||||||
<h5 className="text-sm font-medium text-indigo-700 mb-3">Información de la Partida</h5>
|
<h5 className="mb-3 text-sm font-medium text-indigo-700">Información de la Partida</h5>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-medium text-indigo-600">Número de Partida</p>
|
<p className="text-xs font-medium text-indigo-600">Número de Partida</p>
|
||||||
<p className="text-sm text-indigo-900">{task.result.data.data.partida_update_response.numero_partida}</p>
|
<p className="text-sm text-indigo-900">{task.result.data.data.partida_update_response.numero_partida}</p>
|
||||||
@@ -277,9 +278,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
|
|
||||||
{/* Metadata si existe */}
|
{/* Metadata si existe */}
|
||||||
{task.result.data?.metadata && (
|
{task.result.data?.metadata && (
|
||||||
<div className="bg-gray-50 p-4 rounded-xl">
|
<div className="p-4 bg-gray-50 rounded-xl">
|
||||||
<h5 className="text-sm font-medium text-gray-700 mb-3">Metadata</h5>
|
<h5 className="mb-3 text-sm font-medium text-gray-700">Metadata</h5>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
{Object.entries(task.result.data.metadata).map(([key, value]) => (
|
{Object.entries(task.result.data.metadata).map(([key, value]) => (
|
||||||
<div key={key}>
|
<div key={key}>
|
||||||
<p className="text-xs font-medium text-gray-500">{key}</p>
|
<p className="text-xs font-medium text-gray-500">{key}</p>
|
||||||
@@ -298,7 +299,10 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function Procesos() {
|
export default function Procesos() {
|
||||||
|
const { showMessage } = useNotification();
|
||||||
const [procesos, setProcesos] = useState([]);
|
const [procesos, setProcesos] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
@@ -424,8 +428,61 @@ export default function Procesos() {
|
|||||||
fetchData();
|
fetchData();
|
||||||
}, [page, itemsPerPage, pedimentoPedimentoFilter, servicioFilter, statusFilter, sortField, sortOrder]);
|
}, [page, itemsPerPage, pedimentoPedimentoFilter, servicioFilter, statusFilter, sortField, sortOrder]);
|
||||||
|
|
||||||
|
const [showProcesosDropdown, setShowProcesosDropdown] = useState(false);
|
||||||
|
const [ejecutandoProceso, setEjecutandoProceso] = useState(false);
|
||||||
|
|
||||||
|
const handleEjecutarProcesamiento = async (params) => {
|
||||||
|
try {
|
||||||
|
setEjecutandoProceso(true);
|
||||||
|
setShowProcesosDropdown(false);
|
||||||
|
|
||||||
|
const resultado = await ejecutarComando(params);
|
||||||
|
|
||||||
|
if (resultado.message) {
|
||||||
|
// Mostrar mensaje de éxito
|
||||||
|
showMessage(`${resultado.message}`, 'success');
|
||||||
|
|
||||||
|
// Recargar los datos después de 2 segundos
|
||||||
|
setTimeout(() => {
|
||||||
|
// Forzar recarga de datos
|
||||||
|
const currentFilters = {
|
||||||
|
pedimentoPedimentoFilter,
|
||||||
|
servicioFilter,
|
||||||
|
statusFilter,
|
||||||
|
sortField,
|
||||||
|
sortOrder
|
||||||
|
};
|
||||||
|
prevFiltersRef.current = { ...currentFilters };
|
||||||
|
// Esto activará el useEffect para recargar
|
||||||
|
setPage(prev => prev);
|
||||||
|
}, 2000);
|
||||||
|
} else if (resultado.error) {
|
||||||
|
showMessage(`Error: ${resultado.error}`, 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
// console.error('Error al ejecutar procesamiento:', error);
|
||||||
|
showMessage(`Error: ${error.message}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setEjecutandoProceso(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Agrega este efecto para cerrar el dropdown
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event) => {
|
||||||
|
if (showProcesosDropdown && !event.target.closest('.relative')) {
|
||||||
|
setShowProcesosDropdown(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('click', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('click', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [showProcesosDropdown]);
|
||||||
|
|
||||||
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 p-4 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 sm:p-6 lg:p-8">
|
||||||
{/* Modal de detalles del task */}
|
{/* Modal de detalles del task */}
|
||||||
{selectedTask && (
|
{selectedTask && (
|
||||||
<TaskDetailsModal
|
<TaskDetailsModal
|
||||||
@@ -435,45 +492,45 @@ export default function Procesos() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{loadingTask && (
|
{loadingTask && (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
||||||
<div className="bg-white rounded-full p-4">
|
<div className="p-4 bg-white rounded-full">
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
<div className="w-8 h-8 border-b-2 border-blue-600 rounded-full animate-spin"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="mx-auto max-w-7xl">
|
||||||
{/* Header mejorado y responsivo */}
|
{/* 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="relative flex items-center gap-4 p-6 mb-6 overflow-hidden shadow-2xl opacity-0 sm:mb-8 rounded-3xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 sm:p-8 sm:gap-6 animate-fadein-slideup"
|
||||||
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
|
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">
|
<div className="flex-shrink-0 p-3 rounded-full shadow-lg bg-white/20 backdrop-blur-sm sm:p-4 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">
|
<svg className="w-8 h-8 text-white sm:h-10 sm:w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1 flex flex-col sm:flex-row sm:items-center gap-2">
|
<h1 className="flex flex-col gap-2 mb-1 text-2xl font-extrabold tracking-tight text-white sm:text-3xl lg:text-4xl sm:flex-row sm:items-center">
|
||||||
<span>Procesos del Sistema</span>
|
<span>Procesos del Sistema</span>
|
||||||
{count > 0 && (
|
{count > 0 && (
|
||||||
<span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs sm:text-sm font-semibold px-3 py-1 rounded-full shadow-lg animate-fade-in">
|
<span className="inline-block px-3 py-1 text-xs font-semibold text-white rounded-full shadow-lg bg-white/20 backdrop-blur-sm sm:text-sm animate-fade-in">
|
||||||
{count} procesos
|
{count} procesos
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm sm:text-lg text-blue-100 font-medium leading-relaxed">Estado actual de los procesos de la agencia aduanal</p>
|
<p className="text-sm font-medium leading-relaxed text-blue-100 sm:text-lg">Estado actual de los procesos de la agencia aduanal</p>
|
||||||
</div>
|
</div>
|
||||||
{/* Efectos decorativos de fondo modernos */}
|
{/* Efectos decorativos de fondo modernos */}
|
||||||
<div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
|
<div className="absolute pointer-events-none select-none -top-10 -right-10 opacity-20">
|
||||||
<div className="w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
|
<div className="w-32 h-32 rounded-full bg-white/10 blur-xl"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute -bottom-6 -left-6 opacity-15 pointer-events-none select-none">
|
<div className="absolute pointer-events-none select-none -bottom-6 -left-6 opacity-15">
|
||||||
<div className="w-24 h-24 bg-white/10 rounded-full blur-lg"></div>
|
<div className="w-24 h-24 rounded-full bg-white/10 blur-lg"></div>
|
||||||
</div>
|
</div>
|
||||||
{/* Partículas flotantes */}
|
{/* Partículas flotantes */}
|
||||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
<div className="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-ping"></div>
|
<div className="absolute w-2 h-2 rounded-full top-1/4 left-1/4 bg-white/30 animate-ping"></div>
|
||||||
<div className="absolute top-3/4 right-1/3 w-1 h-1 bg-white/40 rounded-full animate-pulse"></div>
|
<div className="absolute w-1 h-1 rounded-full top-3/4 right-1/3 bg-white/40 animate-pulse"></div>
|
||||||
<div className="absolute top-1/2 right-1/4 w-3 h-3 bg-white/20 rounded-full animate-bounce"></div>
|
<div className="absolute w-3 h-3 rounded-full top-1/2 right-1/4 bg-white/20 animate-bounce"></div>
|
||||||
</div>
|
</div>
|
||||||
{/* Animaciones CSS */}
|
{/* Animaciones CSS */}
|
||||||
<style>{`
|
<style>{`
|
||||||
@@ -501,20 +558,20 @@ export default function Procesos() {
|
|||||||
`}</style>
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
{/* Contenido principal */}
|
{/* 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="p-4 bg-white border border-gray-100 shadow-2xl opacity-0 rounded-3xl sm:p-6 lg:p-8 animate-fadein-slideup"
|
||||||
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
|
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
|
<div className="flex flex-col justify-between gap-4 mb-6 sm:flex-row sm:items-center">
|
||||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-3">
|
<h2 className="flex items-center gap-3 text-xl font-bold text-gray-900 sm:text-2xl">
|
||||||
<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-2 shadow-lg">
|
<div className="p-2 shadow-lg bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl">
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
Procesamiento de Pedimentos
|
Procesamiento de Pedimentos
|
||||||
</h2>
|
</h2>
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
{count > 0 && (
|
{count > 0 && (
|
||||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl px-4 py-2 border border-blue-100">
|
<div className="px-4 py-2 border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl">
|
||||||
<span className="text-sm font-medium text-blue-700">Total de registros: </span>
|
<span className="text-sm font-medium text-blue-700">Total de registros: </span>
|
||||||
<span className="text-lg font-bold text-blue-800">{count}</span>
|
<span className="text-lg font-bold text-blue-800">{count}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -525,16 +582,16 @@ export default function Procesos() {
|
|||||||
|
|
||||||
|
|
||||||
{/* Filtros responsivos mejorados */}
|
{/* Filtros responsivos mejorados */}
|
||||||
<div className="mb-6 bg-gradient-to-r from-gray-50 to-slate-50 rounded-2xl p-4 sm:p-6 border border-gray-100">
|
<div className="p-4 mb-6 border border-gray-100 bg-gradient-to-r from-gray-50 to-slate-50 rounded-2xl sm:p-6">
|
||||||
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
<h3 className="flex items-center gap-2 mb-4 text-lg font-semibold text-gray-800">
|
||||||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
||||||
</svg>
|
</svg>
|
||||||
Filtros de búsqueda
|
Filtros de búsqueda
|
||||||
</h3>
|
</h3>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
|
||||||
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||||
Pedimento
|
Pedimento
|
||||||
</label>
|
</label>
|
||||||
@@ -546,12 +603,12 @@ export default function Procesos() {
|
|||||||
setPage(1);
|
setPage(1);
|
||||||
}}
|
}}
|
||||||
placeholder="Buscar por pedimento..."
|
placeholder="Buscar por pedimento..."
|
||||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white shadow-sm transition-all duration-200 hover:shadow-md"
|
className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
|
||||||
<div className="w-2 h-2 bg-purple-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-purple-500 rounded-full"></div>
|
||||||
Estado
|
Estado
|
||||||
</label>
|
</label>
|
||||||
@@ -561,7 +618,7 @@ export default function Procesos() {
|
|||||||
setStatusFilter(e.target.value);
|
setStatusFilter(e.target.value);
|
||||||
setPage(1);
|
setPage(1);
|
||||||
}}
|
}}
|
||||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white shadow-sm transition-all duration-200 hover:shadow-md"
|
className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
|
||||||
>
|
>
|
||||||
<option value="">Todos los estados</option>
|
<option value="">Todos los estados</option>
|
||||||
<option value="submitted">Enviado</option>
|
<option value="submitted">Enviado</option>
|
||||||
@@ -572,7 +629,7 @@ export default function Procesos() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
<label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
|
||||||
<div className="w-2 h-2 bg-orange-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||||
Servicio
|
Servicio
|
||||||
</label>
|
</label>
|
||||||
@@ -582,7 +639,7 @@ export default function Procesos() {
|
|||||||
setServicioFilter(e.target.value);
|
setServicioFilter(e.target.value);
|
||||||
setPage(1);
|
setPage(1);
|
||||||
}}
|
}}
|
||||||
className="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white shadow-sm transition-all duration-200 hover:shadow-md"
|
className="w-full px-4 py-3 text-sm transition-all duration-200 bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:shadow-md"
|
||||||
>
|
>
|
||||||
<option value="">Todos los servicios</option>
|
<option value="">Todos los servicios</option>
|
||||||
<option value="1">Estado de pedimento</option>
|
<option value="1">Estado de pedimento</option>
|
||||||
@@ -598,37 +655,122 @@ export default function Procesos() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/* BOTÓN PARA EJECUTAR PROCESAMIENTOS - AGREGAR AQUÍ */}
|
||||||
|
<div className="flex justify-end mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex items-center gap-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 px-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
|
||||||
|
onClick={() => setShowProcesosDropdown(!showProcesosDropdown)}
|
||||||
|
disabled={ejecutandoProceso}
|
||||||
|
>
|
||||||
|
{ejecutandoProceso ? (
|
||||||
|
<>
|
||||||
|
<div className="w-4 h-4 border-b-2 border-white rounded-full animate-spin"></div>
|
||||||
|
Ejecutando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
Ejecutar Procesamiento
|
||||||
|
<svg
|
||||||
|
className={`w-4 h-4 transition-transform duration-200 ${showProcesosDropdown ? 'rotate-180' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Dropdown de opciones de procesamiento */}
|
||||||
|
{showProcesosDropdown && (
|
||||||
|
<div className="absolute right-0 z-50 w-64 mt-2 overflow-hidden bg-white border border-gray-200 shadow-2xl rounded-2xl animate-fade-in">
|
||||||
|
<div className="p-2">
|
||||||
|
{/* Encabezado del dropdown */}
|
||||||
|
<div className="px-3 py-2 mb-1 rounded-lg bg-gradient-to-r from-green-50 to-emerald-50">
|
||||||
|
<p className="text-sm font-semibold text-green-800">Selecciona un proceso</p>
|
||||||
|
<p className="text-xs text-green-600">Se ejecutará para tu organización</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Opción "Todos" */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleEjecutarProcesamiento({ todos: true })}
|
||||||
|
className="flex items-center w-full gap-3 px-4 py-3 mb-1 font-medium text-left text-gray-700 transition-colors duration-200 hover:bg-green-50 rounded-xl hover:text-green-700 group"
|
||||||
|
>
|
||||||
|
<div className="w-3 h-3 transition-transform duration-200 bg-green-500 rounded-full group-hover:scale-125"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<span className="font-semibold">Todos</span>
|
||||||
|
<p className="text-xs text-gray-500 group-hover:text-green-600">Ejecutar todos los procesos</p>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-400 group-hover:text-green-500"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="my-2 border-t border-gray-100"></div>
|
||||||
|
|
||||||
|
{/* Opciones específicas */}
|
||||||
|
{[
|
||||||
|
{ id: 'procesamiento_pedimento', label: 'Procesamiento Inicial', desc: 'Procemiento Inicial de consulta a VU' },
|
||||||
|
{ id: 'pedimentos_completos', label: 'Pedimento Completo', desc: 'Procesar pedimentos completos' },
|
||||||
|
{ id: 'remesas', label: 'Remesas', desc: 'Procesar remesas' },
|
||||||
|
{ id: 'partidas', label: 'Partidas', desc: 'Procesar partidas' },
|
||||||
|
{ id: 'coves', label: 'Coves', desc: 'Procesar coves' },
|
||||||
|
{ id: 'edocs', label: 'Edocuments', desc: 'Procesar edocuments' },
|
||||||
|
{ id: 'acuse_coves', label: 'Acuses COVE', desc: 'Procesar acuses COVE' },
|
||||||
|
{ id: 'acuses', label: 'Acuses', desc: 'Procesar acuses' }
|
||||||
|
].map((proceso) => (
|
||||||
|
<button
|
||||||
|
key={proceso.id}
|
||||||
|
onClick={() => handleEjecutarProcesamiento({ procesamiento: proceso.id })}
|
||||||
|
className="flex items-center w-full gap-3 px-4 py-3 font-medium text-left text-gray-700 transition-colors duration-200 hover:bg-blue-50 rounded-xl hover:text-blue-700 group"
|
||||||
|
>
|
||||||
|
<div className="w-2 h-2 transition-transform duration-200 bg-blue-500 rounded-full group-hover:scale-125"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<span>{proceso.label}</span>
|
||||||
|
<p className="text-xs text-gray-500 group-hover:text-blue-600">{proceso.desc}</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/* Estados de carga y error mejorados */}
|
{/* Estados de carga y error mejorados */}
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex flex-col items-center justify-center py-12">
|
<div className="flex flex-col items-center justify-center py-12">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600"></div>
|
<div className="w-16 h-16 border-b-2 border-blue-600 rounded-full animate-spin"></div>
|
||||||
<div className="absolute inset-0 bg-blue-500/10 rounded-full blur-xl animate-pulse"></div>
|
<div className="absolute inset-0 rounded-full bg-blue-500/10 blur-xl animate-pulse"></div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-4 text-gray-600 font-medium">Cargando procesos...</p>
|
<p className="mt-4 font-medium text-gray-600">Cargando procesos...</p>
|
||||||
</div>
|
</div>
|
||||||
) : error ? (
|
) : error ? (
|
||||||
<div className="bg-red-50 border border-red-200 rounded-2xl p-6 text-center">
|
<div className="p-6 text-center border border-red-200 bg-red-50 rounded-2xl">
|
||||||
<div className="bg-red-100 rounded-full p-3 w-12 h-12 mx-auto mb-4 flex items-center justify-center">
|
<div className="flex items-center justify-center w-12 h-12 p-3 mx-auto mb-4 bg-red-100 rounded-full">
|
||||||
<svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-red-800 mb-2">Error al cargar</h3>
|
<h3 className="mb-2 text-lg font-semibold text-red-800">Error al cargar</h3>
|
||||||
<p className="text-red-600">{error}</p>
|
<p className="text-red-600">{error}</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{/* Vista de tabla para pantallas grandes */}
|
{/* Vista de tabla para pantallas grandes */}
|
||||||
<div className="hidden lg:block overflow-x-auto bg-white rounded-2xl border border-gray-200 shadow-sm relative pb-20"
|
<div className="relative hidden pb-20 overflow-x-auto bg-white border border-gray-200 shadow-sm lg:block rounded-2xl"
|
||||||
style={{
|
style={{
|
||||||
overflowY: 'visible' // Permitir que los dropdowns se muestren fuera del contenedor
|
overflowY: 'visible' // Permitir que los dropdowns se muestren fuera del contenedor
|
||||||
}}>
|
}}>
|
||||||
<table className="min-w-full divide-y divide-gray-300 relative"
|
<table className="relative min-w-full divide-y divide-gray-300"
|
||||||
style={{ position: 'relative', zIndex: 1 }}>
|
style={{ position: 'relative', zIndex: 1 }}>
|
||||||
<thead className="bg-gray-50 sticky top-0 z-10">
|
<thead className="sticky top-0 z-10 bg-gray-50">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-4 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200"
|
<th className="px-4 py-4 text-xs font-bold tracking-wider text-center text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSortField('task_id');
|
setSortField('task_id');
|
||||||
setSortOrder(sortField === 'task_id' && sortOrder === 'asc' ? 'desc' : 'asc');
|
setSortOrder(sortField === 'task_id' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||||
@@ -638,7 +780,7 @@ export default function Procesos() {
|
|||||||
Task ID {sortField === 'task_id' && (sortOrder === 'asc' ? '▲' : '▼')}
|
Task ID {sortField === 'task_id' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200"
|
<th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSortField('pedimento_app');
|
setSortField('pedimento_app');
|
||||||
setSortOrder(sortField === 'pedimento_app' && sortOrder === 'asc' ? 'desc' : 'asc');
|
setSortOrder(sortField === 'pedimento_app' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||||
@@ -648,7 +790,7 @@ export default function Procesos() {
|
|||||||
Pedimento {sortField === 'pedimento_app' && (sortOrder === 'asc' ? '▲' : '▼')}
|
Pedimento {sortField === 'pedimento_app' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200"
|
<th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSortField('status');
|
setSortField('status');
|
||||||
setSortOrder(sortField === 'status' && sortOrder === 'asc' ? 'desc' : 'asc');
|
setSortOrder(sortField === 'status' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||||
@@ -658,7 +800,7 @@ export default function Procesos() {
|
|||||||
Estado {sortField === 'status' && (sortOrder === 'asc' ? '▲' : '▼')}
|
Estado {sortField === 'status' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200 rounded-tr-2xl"
|
<th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100 rounded-tr-2xl"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSortField('timestamp');
|
setSortField('timestamp');
|
||||||
setSortOrder(sortField === 'timestamp' && sortOrder === 'asc' ? 'desc' : 'asc');
|
setSortOrder(sortField === 'timestamp' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||||
@@ -668,7 +810,7 @@ export default function Procesos() {
|
|||||||
Fecha de creación {sortField === 'timestamp' && (sortOrder === 'asc' ? '▲' : '▼')}
|
Fecha de creación {sortField === 'timestamp' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th className="px-4 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider cursor-pointer select-none hover:bg-gray-100 transition-colors duration-200 rounded-tr-2xl"
|
<th className="px-4 py-4 text-xs font-bold tracking-wider text-left text-gray-600 uppercase transition-colors duration-200 cursor-pointer select-none hover:bg-gray-100 rounded-tr-2xl"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSortField('servicio');
|
setSortField('servicio');
|
||||||
setSortOrder(sortField === 'servicio' && sortOrder === 'asc' ? 'desc' : 'asc');
|
setSortOrder(sortField === 'servicio' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||||
@@ -680,18 +822,18 @@ export default function Procesos() {
|
|||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-100 relative" style={{ position: 'relative' }}>
|
<tbody className="relative bg-white divide-y divide-gray-100" style={{ position: 'relative' }}>
|
||||||
{procesos.length === 0 ? (
|
{procesos.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={5} className="text-center py-12">
|
<td colSpan={5} className="py-12 text-center">
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
<div className="flex items-center justify-center w-16 h-16 p-4 mx-auto mb-4 bg-gray-100 rounded-full">
|
||||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-500 font-medium">No hay procesos disponibles</p>
|
<p className="font-medium text-gray-500">No hay procesos disponibles</p>
|
||||||
<p className="text-gray-400 text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
<p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -701,17 +843,17 @@ export default function Procesos() {
|
|||||||
<td className="px-4 py-4 text-center align-middle whitespace-nowrap">
|
<td className="px-4 py-4 text-center align-middle whitespace-nowrap">
|
||||||
<button
|
<button
|
||||||
onClick={() => handleTaskClick(proc.task_id)}
|
onClick={() => handleTaskClick(proc.task_id)}
|
||||||
className="bg-gray-100 text-gray-800 px-2 py-1 rounded-lg text-sm font-semibold hover:bg-blue-100 hover:text-blue-800 transition-colors duration-200 cursor-pointer"
|
className="px-2 py-1 text-sm font-semibold text-gray-800 transition-colors duration-200 bg-gray-100 rounded-lg cursor-pointer hover:bg-blue-100 hover:text-blue-800"
|
||||||
>
|
>
|
||||||
{proc.task_id}
|
{proc.task_id}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-4 whitespace-nowrap align-middle text-sm font-medium text-gray-900">
|
<td className="px-4 py-4 text-sm font-medium text-gray-900 align-middle whitespace-nowrap">
|
||||||
<Link to={`/expedientes/pedimento/${proc.pedimento}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>
|
<Link to={`/expedientes/pedimento/${proc.pedimento}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>
|
||||||
{proc.pedimento_app || '-'}
|
{proc.pedimento_app || '-'}
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-4 whitespace-nowrap align-middle">
|
<td className="px-4 py-4 align-middle whitespace-nowrap">
|
||||||
{(() => {
|
{(() => {
|
||||||
const estado = proc.status?.toLowerCase() === 'pending' ? { text: 'En Espera', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' }
|
const estado = proc.status?.toLowerCase() === 'pending' ? { text: 'En Espera', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' }
|
||||||
: proc.status?.toLowerCase() === 'running' ? { text: 'Procesando', color: 'bg-blue-100 text-blue-800 border-blue-200' }
|
: proc.status?.toLowerCase() === 'running' ? { text: 'Procesando', color: 'bg-blue-100 text-blue-800 border-blue-200' }
|
||||||
@@ -725,7 +867,7 @@ export default function Procesos() {
|
|||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-4 whitespace-nowrap align-middle text-sm text-gray-600">
|
<td className="px-4 py-4 text-sm text-gray-600 align-middle whitespace-nowrap">
|
||||||
{new Date(proc.timestamp).toLocaleString('es-MX', {
|
{new Date(proc.timestamp).toLocaleString('es-MX', {
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
month: '2-digit',
|
month: '2-digit',
|
||||||
@@ -735,7 +877,7 @@ export default function Procesos() {
|
|||||||
hour12: true
|
hour12: true
|
||||||
})}
|
})}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-4 whitespace-nowrap align-middle">
|
<td className="px-4 py-4 align-middle whitespace-nowrap">
|
||||||
{(() => {
|
{(() => {
|
||||||
const services = {
|
const services = {
|
||||||
'1': 'Estado de pedimento',
|
'1': 'Estado de pedimento',
|
||||||
@@ -763,29 +905,29 @@ export default function Procesos() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Vista de tarjetas para pantallas pequeñas y medianas */}
|
{/* Vista de tarjetas para pantallas pequeñas y medianas */}
|
||||||
<div className="lg:hidden space-y-4">
|
<div className="space-y-4 lg:hidden">
|
||||||
{procesos.length === 0 ? (
|
{procesos.length === 0 ? (
|
||||||
<div className="bg-gray-50 rounded-2xl p-8 text-center">
|
<div className="p-8 text-center bg-gray-50 rounded-2xl">
|
||||||
<div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
<div className="flex items-center justify-center w-16 h-16 p-4 mx-auto mb-4 bg-gray-100 rounded-full">
|
||||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-500 font-medium">No hay procesos disponibles</p>
|
<p className="font-medium text-gray-500">No hay procesos disponibles</p>
|
||||||
<p className="text-gray-400 text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
<p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
procesos.map((proc) => (
|
procesos.map((proc) => (
|
||||||
<div key={proc.task_id} className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-300">
|
<div key={proc.task_id} className="p-4 transition-all duration-300 bg-white border border-gray-200 shadow-lg rounded-2xl hover:shadow-xl">
|
||||||
<div className="flex items-start justify-between mb-4">
|
<div className="flex items-start justify-between mb-4">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
|
||||||
<div className="bg-blue-100 rounded-xl p-2 flex-shrink-0">
|
<div className="flex-shrink-0 p-2 bg-blue-100 rounded-xl">
|
||||||
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">Proceso #{proc.task_id}</h3>
|
<h3 className="text-lg font-semibold text-gray-900">Proceso #{proc.task_id}</h3>
|
||||||
<p className="text-sm text-gray-500">{proc.organizacion_name || 'Sin organización'}</p>
|
<p className="text-sm text-gray-500">{proc.organizacion_name || 'Sin organización'}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -804,10 +946,10 @@ export default function Procesos() {
|
|||||||
})()}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3 mb-4">
|
<div className="mb-4 space-y-3">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm font-medium text-gray-600">Pedimento:</span>
|
<span className="text-sm font-medium text-gray-600">Pedimento:</span>
|
||||||
<span className="text-sm font-mono text-gray-900 bg-gray-100 px-2 py-1 rounded">
|
<span className="px-2 py-1 font-mono text-sm text-gray-900 bg-gray-100 rounded">
|
||||||
{proc.pedimento_app || '-'}
|
{proc.pedimento_app || '-'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -854,7 +996,7 @@ export default function Procesos() {
|
|||||||
|
|
||||||
{/* Paginación compartida mejorada */}
|
{/* Paginación compartida mejorada */}
|
||||||
{count > 0 && (
|
{count > 0 && (
|
||||||
<div className="bg-gradient-to-r from-gray-50 to-slate-50 px-4 sm:px-6 py-4 mt-6 rounded-2xl border border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
|
<div className="flex flex-col items-center justify-between gap-4 px-4 py-4 mt-6 border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 sm:px-6 rounded-2xl sm:flex-row">
|
||||||
{(() => {
|
{(() => {
|
||||||
const totalPages = Math.max(1, Math.ceil(count / itemsPerPage));
|
const totalPages = Math.max(1, Math.ceil(count / itemsPerPage));
|
||||||
const maxPagesToShow = 5;
|
const maxPagesToShow = 5;
|
||||||
@@ -871,12 +1013,12 @@ export default function Procesos() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<label htmlFor="itemsPerPage" className="text-sm text-gray-600 font-medium">Registros por página:</label>
|
<label htmlFor="itemsPerPage" className="text-sm font-medium text-gray-600">Registros por página:</label>
|
||||||
<select
|
<select
|
||||||
id="itemsPerPage"
|
id="itemsPerPage"
|
||||||
value={itemsPerPage}
|
value={itemsPerPage}
|
||||||
onChange={e => { setItemsPerPage(Number(e.target.value)); setPage(1); }}
|
onChange={e => { setItemsPerPage(Number(e.target.value)); setPage(1); }}
|
||||||
className="border border-gray-300 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white shadow-sm"
|
className="px-3 py-2 text-sm bg-white border border-gray-300 shadow-sm rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
>
|
>
|
||||||
{[5, 8, 12, 20, 50, 100].map(size => (
|
{[5, 8, 12, 20, 50, 100].map(size => (
|
||||||
<option key={size} value={size}>{size}</option>
|
<option key={size} value={size}>{size}</option>
|
||||||
|
|||||||
Reference in New Issue
Block a user