fix: se crea boton para ejecutar los procesos de consulta a ventanilla unica. #20
@@ -1,4 +1,4 @@
|
||||
import { fetchWithAuth } from '../fetchWithAuth';
|
||||
import { fetchWithAuth, postWithAuth } from '../fetchWithAuth';
|
||||
|
||||
// Tipos para la respuesta y registros
|
||||
export interface Task {
|
||||
@@ -51,3 +51,61 @@ export async function fetchTasks(
|
||||
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 { Link } from 'react-router-dom';
|
||||
import { fetchTasks } from '../api/procesos.ts';
|
||||
import { fetchTasks, ejecutarComando } from '../api/procesos.ts';
|
||||
import { fetchWithAuth } from '../fetchWithAuth';
|
||||
import { useNotification } from '../context/NotificationContext';
|
||||
|
||||
// Modal para mostrar detalles del task
|
||||
const TaskDetailsModal = ({ task, onClose }) => {
|
||||
@@ -42,9 +43,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
};
|
||||
|
||||
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="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>
|
||||
<button
|
||||
onClick={onClose}
|
||||
@@ -58,20 +59,20 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Información básica de la tarea */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-gray-50 p-4 rounded-xl">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="p-4 bg-gray-50 rounded-xl">
|
||||
<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 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>
|
||||
<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}
|
||||
</span>
|
||||
</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>
|
||||
<p className="mt-1 text-sm text-gray-900">
|
||||
{new Date(task.timestamp).toLocaleString('es-MX', {
|
||||
@@ -86,14 +87,14 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
</p>
|
||||
</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>
|
||||
<p className="mt-1 text-sm text-gray-900">{task.progress || 0}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{(() => {
|
||||
// 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, '"'));
|
||||
return (
|
||||
<div className="mt-2 space-y-3">
|
||||
<div className="bg-red-50 p-3 rounded-lg">
|
||||
<p className="text-sm text-red-700 font-medium">{detail.message}</p>
|
||||
<div className="p-3 rounded-lg bg-red-50">
|
||||
<p className="text-sm font-medium text-red-700">{detail.message}</p>
|
||||
</div>
|
||||
{detail.errors && detail.errors.length > 0 && (
|
||||
<div className="bg-red-50 p-3 rounded-lg">
|
||||
<ul className="list-disc pl-4 space-y-1">
|
||||
<div className="p-3 rounded-lg bg-red-50">
|
||||
<ul className="pl-4 space-y-1 list-disc">
|
||||
{detail.errors.map((error, idx) => (
|
||||
<li key={idx} className="text-sm text-red-600">{error}</li>
|
||||
))}
|
||||
@@ -117,14 +118,14 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
</div>
|
||||
)}
|
||||
{detail.data && (
|
||||
<div className="bg-orange-50 p-3 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-orange-700 mb-2">Archivo de Error:</h5>
|
||||
<p className="text-sm text-orange-600 font-mono">{detail.data.error_file}</p>
|
||||
<div className="p-3 rounded-lg bg-orange-50">
|
||||
<h5 className="mb-2 text-sm font-medium text-orange-700">Archivo de Error:</h5>
|
||||
<p className="font-mono text-sm text-orange-600">{detail.data.error_file}</p>
|
||||
</div>
|
||||
)}
|
||||
{detail.metadata && (
|
||||
<div className="bg-blue-50 p-3 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-blue-700 mb-2">Información Adicional:</h5>
|
||||
<div className="p-3 rounded-lg bg-blue-50">
|
||||
<h5 className="mb-2 text-sm font-medium text-blue-700">Información Adicional:</h5>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.entries(detail.metadata).map(([key, value]) => (
|
||||
<div key={key} className="flex items-start gap-2">
|
||||
@@ -149,7 +150,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
{/* Mostrar detalles de error si existe */}
|
||||
{(task.status === 'FAILURE' || task.status === 'FAILED') && task.error && (
|
||||
<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>
|
||||
{(() => {
|
||||
const errorDetail = parseError(task.error);
|
||||
@@ -158,16 +159,16 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
<div className="mt-3 space-y-4">
|
||||
{/* Mensaje principal del error */}
|
||||
{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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lista de errores específicos */}
|
||||
{errorDetail.detail.errors && errorDetail.detail.errors.length > 0 && (
|
||||
<div className="bg-red-50 p-3 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-red-700 mb-2">Errores detectados:</h5>
|
||||
<ul className="list-disc pl-4 space-y-1">
|
||||
<div className="p-3 rounded-lg bg-red-50">
|
||||
<h5 className="mb-2 text-sm font-medium text-red-700">Errores detectados:</h5>
|
||||
<ul className="pl-4 space-y-1 list-disc">
|
||||
{errorDetail.detail.errors.map((error, idx) => (
|
||||
<li key={idx} className="text-sm text-red-600">{error}</li>
|
||||
))}
|
||||
@@ -177,8 +178,8 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
|
||||
{/* Datos adicionales del error */}
|
||||
{errorDetail.detail.data && (
|
||||
<div className="bg-orange-50 p-3 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-orange-700 mb-2">Archivos relacionados:</h5>
|
||||
<div className="p-3 rounded-lg bg-orange-50">
|
||||
<h5 className="mb-2 text-sm font-medium text-orange-700">Archivos relacionados:</h5>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{Object.entries(errorDetail.detail.data).map(([key, value]) => (
|
||||
<div key={key} className="flex items-start gap-2">
|
||||
@@ -192,9 +193,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
|
||||
{/* Metadata */}
|
||||
{errorDetail.detail.metadata && (
|
||||
<div className="bg-blue-50 p-3 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-blue-700 mb-2">Metadata:</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<div className="p-3 rounded-lg bg-blue-50">
|
||||
<h5 className="mb-2 text-sm font-medium text-blue-700">Metadata:</h5>
|
||||
<div className="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||
{Object.entries(errorDetail.detail.metadata).map(([key, value]) => (
|
||||
<div key={key} className="flex items-start gap-2">
|
||||
<span className="text-sm font-medium text-blue-600">{key}:</span>
|
||||
@@ -208,7 +209,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
);
|
||||
}
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
@@ -220,7 +221,7 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
{/* Mensaje del resultado si existe */}
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
@@ -229,13 +230,13 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
{/* Detalles del resultado */}
|
||||
{task.result?.data && (
|
||||
<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 */}
|
||||
{task.result.data.data?.documento && (
|
||||
<div className="bg-blue-50 p-4 rounded-xl">
|
||||
<h5 className="text-sm font-medium text-blue-700 mb-3">Información del Documento</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-blue-50 rounded-xl">
|
||||
<h5 className="mb-3 text-sm font-medium text-blue-700">Información del Documento</h5>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<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>
|
||||
@@ -258,9 +259,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
|
||||
{/* Información de la partida si existe */}
|
||||
{task.result.data.data?.partida_update_response && (
|
||||
<div className="bg-indigo-50 p-4 rounded-xl">
|
||||
<h5 className="text-sm font-medium text-indigo-700 mb-3">Información de la Partida</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-indigo-50 rounded-xl">
|
||||
<h5 className="mb-3 text-sm font-medium text-indigo-700">Información de la Partida</h5>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<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>
|
||||
@@ -277,9 +278,9 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
|
||||
{/* Metadata si existe */}
|
||||
{task.result.data?.metadata && (
|
||||
<div className="bg-gray-50 p-4 rounded-xl">
|
||||
<h5 className="text-sm font-medium text-gray-700 mb-3">Metadata</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gray-50 rounded-xl">
|
||||
<h5 className="mb-3 text-sm font-medium text-gray-700">Metadata</h5>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{Object.entries(task.result.data.metadata).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<p className="text-xs font-medium text-gray-500">{key}</p>
|
||||
@@ -298,7 +299,10 @@ const TaskDetailsModal = ({ task, onClose }) => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
export default function Procesos() {
|
||||
const { showMessage } = useNotification();
|
||||
const [procesos, setProcesos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
@@ -424,8 +428,61 @@ export default function Procesos() {
|
||||
fetchData();
|
||||
}, [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 (
|
||||
<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 */}
|
||||
{selectedTask && (
|
||||
<TaskDetailsModal
|
||||
@@ -435,45 +492,45 @@ export default function Procesos() {
|
||||
)}
|
||||
|
||||
{loadingTask && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-full p-4">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<div className="p-4 bg-white rounded-full">
|
||||
<div className="w-8 h-8 border-b-2 border-blue-600 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{/* 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' }}>
|
||||
<div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-3 sm:p-4 shadow-lg animate-bounce-slow">
|
||||
<svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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="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" />
|
||||
</svg>
|
||||
</div>
|
||||
<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>
|
||||
{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
|
||||
</span>
|
||||
)}
|
||||
</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>
|
||||
{/* Efectos decorativos de fondo modernos */}
|
||||
<div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
|
||||
<div className="w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
|
||||
<div className="absolute pointer-events-none select-none -top-10 -right-10 opacity-20">
|
||||
<div className="w-32 h-32 rounded-full bg-white/10 blur-xl"></div>
|
||||
</div>
|
||||
<div className="absolute -bottom-6 -left-6 opacity-15 pointer-events-none select-none">
|
||||
<div className="w-24 h-24 bg-white/10 rounded-full blur-lg"></div>
|
||||
<div className="absolute pointer-events-none select-none -bottom-6 -left-6 opacity-15">
|
||||
<div className="w-24 h-24 rounded-full bg-white/10 blur-lg"></div>
|
||||
</div>
|
||||
{/* Partículas flotantes */}
|
||||
<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 top-3/4 right-1/3 w-1 h-1 bg-white/40 rounded-full 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-2 h-2 rounded-full top-1/4 left-1/4 bg-white/30 animate-ping"></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 w-3 h-3 rounded-full top-1/2 right-1/4 bg-white/20 animate-bounce"></div>
|
||||
</div>
|
||||
{/* Animaciones CSS */}
|
||||
<style>{`
|
||||
@@ -501,20 +558,20 @@ export default function Procesos() {
|
||||
`}</style>
|
||||
</div>
|
||||
{/* Contenido principal */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 lg:p-8 animate-fadein-slideup opacity-0"
|
||||
<div className="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' }}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-3">
|
||||
<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-2 shadow-lg">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div className="flex flex-col justify-between gap-4 mb-6 sm:flex-row sm:items-center">
|
||||
<h2 className="flex items-center gap-3 text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
<div className="p-2 shadow-lg bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl">
|
||||
<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" />
|
||||
</svg>
|
||||
</div>
|
||||
Procesamiento de Pedimentos
|
||||
</h2>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
{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-lg font-bold text-blue-800">{count}</span>
|
||||
</div>
|
||||
@@ -525,16 +582,16 @@ export default function Procesos() {
|
||||
|
||||
|
||||
{/* 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">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
||||
<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="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">
|
||||
<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>
|
||||
Filtros de búsqueda
|
||||
</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">
|
||||
<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>
|
||||
Pedimento
|
||||
</label>
|
||||
@@ -546,12 +603,12 @@ export default function Procesos() {
|
||||
setPage(1);
|
||||
}}
|
||||
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 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>
|
||||
Estado
|
||||
</label>
|
||||
@@ -561,7 +618,7 @@ export default function Procesos() {
|
||||
setStatusFilter(e.target.value);
|
||||
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="submitted">Enviado</option>
|
||||
@@ -572,7 +629,7 @@ export default function Procesos() {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
Servicio
|
||||
</label>
|
||||
@@ -582,7 +639,7 @@ export default function Procesos() {
|
||||
setServicioFilter(e.target.value);
|
||||
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="1">Estado de pedimento</option>
|
||||
@@ -598,37 +655,122 @@ export default function Procesos() {
|
||||
</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 */}
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600"></div>
|
||||
<div className="absolute inset-0 bg-blue-500/10 rounded-full blur-xl animate-pulse"></div>
|
||||
<div className="w-16 h-16 border-b-2 border-blue-600 rounded-full animate-spin"></div>
|
||||
<div className="absolute inset-0 rounded-full bg-blue-500/10 blur-xl animate-pulse"></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>
|
||||
) : error ? (
|
||||
<div className="bg-red-50 border border-red-200 rounded-2xl p-6 text-center">
|
||||
<div className="bg-red-100 rounded-full p-3 w-12 h-12 mx-auto mb-4 flex items-center justify-center">
|
||||
<div className="p-6 text-center border border-red-200 bg-red-50 rounded-2xl">
|
||||
<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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</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>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 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={{
|
||||
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 }}>
|
||||
<thead className="bg-gray-50 sticky top-0 z-10">
|
||||
<thead className="sticky top-0 z-10 bg-gray-50">
|
||||
<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={() => {
|
||||
setSortField('task_id');
|
||||
setSortOrder(sortField === 'task_id' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
@@ -638,7 +780,7 @@ export default function Procesos() {
|
||||
Task ID {sortField === 'task_id' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</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={() => {
|
||||
setSortField('pedimento_app');
|
||||
setSortOrder(sortField === 'pedimento_app' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
@@ -648,7 +790,7 @@ export default function Procesos() {
|
||||
Pedimento {sortField === 'pedimento_app' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</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={() => {
|
||||
setSortField('status');
|
||||
setSortOrder(sortField === 'status' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
@@ -658,7 +800,7 @@ export default function Procesos() {
|
||||
Estado {sortField === 'status' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</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={() => {
|
||||
setSortField('timestamp');
|
||||
setSortOrder(sortField === 'timestamp' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
@@ -668,7 +810,7 @@ export default function Procesos() {
|
||||
Fecha de creación {sortField === 'timestamp' && (sortOrder === 'asc' ? '▲' : '▼')}
|
||||
</div>
|
||||
</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={() => {
|
||||
setSortField('servicio');
|
||||
setSortOrder(sortField === 'servicio' && sortOrder === 'asc' ? 'desc' : 'asc');
|
||||
@@ -680,18 +822,18 @@ export default function Procesos() {
|
||||
</th>
|
||||
</tr>
|
||||
</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 ? (
|
||||
<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="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">
|
||||
<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>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium">No hay procesos disponibles</p>
|
||||
<p className="text-gray-400 text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
<p className="font-medium text-gray-500">No hay procesos disponibles</p>
|
||||
<p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -701,17 +843,17 @@ export default function Procesos() {
|
||||
<td className="px-4 py-4 text-center align-middle whitespace-nowrap">
|
||||
<button
|
||||
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}
|
||||
</button>
|
||||
</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'>
|
||||
{proc.pedimento_app || '-'}
|
||||
</Link>
|
||||
</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' }
|
||||
: 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 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', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
@@ -735,7 +877,7 @@ export default function Procesos() {
|
||||
hour12: true
|
||||
})}
|
||||
</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap align-middle">
|
||||
<td className="px-4 py-4 align-middle whitespace-nowrap">
|
||||
{(() => {
|
||||
const services = {
|
||||
'1': 'Estado de pedimento',
|
||||
@@ -763,29 +905,29 @@ export default function Procesos() {
|
||||
</div>
|
||||
|
||||
{/* 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 ? (
|
||||
<div className="bg-gray-50 rounded-2xl p-8 text-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="p-8 text-center bg-gray-50 rounded-2xl">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium">No hay procesos disponibles</p>
|
||||
<p className="text-gray-400 text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
<p className="font-medium text-gray-500">No hay procesos disponibles</p>
|
||||
<p className="mt-1 text-sm text-gray-400">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
) : (
|
||||
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-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">
|
||||
<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>
|
||||
</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>
|
||||
<p className="text-sm text-gray-500">{proc.organizacion_name || 'Sin organización'}</p>
|
||||
</div>
|
||||
@@ -804,10 +946,10 @@ export default function Procesos() {
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="mb-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<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 || '-'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -854,7 +996,7 @@ export default function Procesos() {
|
||||
|
||||
{/* Paginación compartida mejorada */}
|
||||
{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 maxPagesToShow = 5;
|
||||
@@ -871,12 +1013,12 @@ export default function Procesos() {
|
||||
return (
|
||||
<>
|
||||
<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
|
||||
id="itemsPerPage"
|
||||
value={itemsPerPage}
|
||||
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 => (
|
||||
<option key={size} value={size}>{size}</option>
|
||||
|
||||
Reference in New Issue
Block a user