925 lines
48 KiB
JavaScript
925 lines
48 KiB
JavaScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { getWithAuth, postWithAuth } from '../fetchWithAuth';
|
|
const API_URL = import.meta.env.VITE_EFC_API_URL;
|
|
|
|
function Auditor() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [pedimentos, setPedimentos] = useState([]);
|
|
const [showInstructions, setShowInstructions] = useState(false);
|
|
const [count, setCount] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [itemsPerPage] = useState(10);
|
|
const [auditando, setAuditando] = useState(false);
|
|
const [auditandoPartidas, setAuditandoPartidas] = useState(false);
|
|
const [auditandoRemesas, setAuditandoRemesas] = useState(false);
|
|
const [procesandoPedimento, setProcesandoPedimento] = useState(null);
|
|
const [procesandoRemesa, setProcesandoRemesa] = useState(null);
|
|
const [procesandoAcuse, setProcesandoAcuse] = useState(null);
|
|
const [procesandoCove, setProcesandoCove] = useState(null);
|
|
const [auditandoAcusesCove, setAuditandoAcusesCove] = useState(false);
|
|
const [pedimentoFilter, setPedimentoFilter] = useState('');
|
|
const [auditandoEDocuments, setAuditandoEDocuments] = useState(false);
|
|
const [auditandoAcuses, setAuditandoAcuses] = useState(false);
|
|
|
|
// Handler para auditar acuses (general)
|
|
const handleAuditarAcuses = async () => {
|
|
if (auditandoAcuses) return;
|
|
try {
|
|
setAuditandoAcuses(true);
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría de acuses');
|
|
}
|
|
alert('La auditoría de acuses se ha iniciado correctamente');
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditandoAcuses(false);
|
|
}
|
|
};
|
|
|
|
// Handler para auditar EDocuments (general)
|
|
const handleAuditarEDocuments = async () => {
|
|
if (auditandoEDocuments) return;
|
|
try {
|
|
setAuditandoEDocuments(true);
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-edocuments/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría de EDocuments');
|
|
}
|
|
alert('La auditoría de EDocuments se ha iniciado correctamente');
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditandoEDocuments(false);
|
|
}
|
|
};
|
|
|
|
// Handler para auditar acuses cove (general)
|
|
const handleAuditarAcusesCove = async () => {
|
|
if (auditandoAcusesCove) return;
|
|
try {
|
|
setAuditandoAcusesCove(true);
|
|
// Obtener el organizacion_id del primer pedimento
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse-cove/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría de acuses cove');
|
|
}
|
|
alert('La auditoría de acuses cove se ha iniciado correctamente');
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditandoAcusesCove(false);
|
|
}
|
|
};
|
|
|
|
const handleAuditarRemesaPedimento = async (pedimentoId) => {
|
|
if (procesandoRemesa) return;
|
|
|
|
try {
|
|
setProcesandoRemesa(pedimentoId);
|
|
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-procesamiento-remesa/pedimento/`, {
|
|
pedimento_id: pedimentoId
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al procesar las remesas del pedimento');
|
|
}
|
|
|
|
// Mostrar mensaje de éxito
|
|
alert('Las remesas del pedimento se están procesando');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setProcesandoRemesa(null);
|
|
}
|
|
};
|
|
|
|
const handleAuditarRemesas = async () => {
|
|
if (auditandoRemesas) return;
|
|
|
|
try {
|
|
setAuditandoRemesas(true);
|
|
// Obtener el organizacion_id del primer pedimento
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-procesamiento-remesas/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría de remesas');
|
|
}
|
|
|
|
// Mostrar mensaje de éxito
|
|
alert('La auditoría de remesas se ha iniciado correctamente');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditandoRemesas(false);
|
|
}
|
|
};
|
|
|
|
const handleAuditarPartidasPedimento = async (pedimentoId) => {
|
|
if (procesandoPedimento) return;
|
|
|
|
try {
|
|
setProcesandoPedimento(pedimentoId);
|
|
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/crear-partidas/pedimento/`, {
|
|
pedimento_id: pedimentoId
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al procesar las partidas del pedimento');
|
|
}
|
|
|
|
// Mostrar mensaje de éxito
|
|
alert('Las partidas del pedimento se están procesando');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setProcesandoPedimento(null);
|
|
}
|
|
};
|
|
|
|
const handleAuditarPartidas = async () => {
|
|
if (auditandoPartidas) return;
|
|
|
|
try {
|
|
setAuditandoPartidas(true);
|
|
// Obtener el organizacion_id del primer pedimento
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/crear-partidas/organizacion/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría de partidas');
|
|
}
|
|
|
|
// Mostrar mensaje de éxito
|
|
alert('La auditoría de partidas se ha iniciado correctamente');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditandoPartidas(false);
|
|
}
|
|
};
|
|
|
|
const handleAuditarTodos = async () => {
|
|
if (auditando) return;
|
|
|
|
try {
|
|
setAuditando(true);
|
|
// Obtener el organizacion_id del primer pedimento
|
|
const organizacionId = pedimentos[0]?.organizacion;
|
|
|
|
if (!organizacionId) {
|
|
throw new Error('No hay organización disponible para auditar');
|
|
}
|
|
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-pedimentos/`, {
|
|
organizacion_id: organizacionId
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Error al iniciar la auditoría');
|
|
}
|
|
|
|
// Mostrar mensaje de éxito
|
|
alert('La auditoría se ha iniciado correctamente');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setAuditando(false);
|
|
}
|
|
};
|
|
|
|
const handleAuditarAcusePedimento = async (pedimentoId) => {
|
|
if (procesandoAcuse) return;
|
|
try {
|
|
setProcesandoAcuse(pedimentoId);
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/pedimento/`, {
|
|
pedimento_id: pedimentoId
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Error al auditar acuse del pedimento');
|
|
}
|
|
alert('El acuse del pedimento se está auditando');
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setProcesandoAcuse(null);
|
|
}
|
|
};
|
|
|
|
const handleAuditarCovePedimento = async (pedimentoId) => {
|
|
if (procesandoCove) return;
|
|
try {
|
|
setProcesandoCove(pedimentoId);
|
|
const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-cove/pedimento/`, {
|
|
pedimento_id: pedimentoId
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Error al auditar COVE del pedimento');
|
|
}
|
|
alert('El COVE del pedimento se está auditando');
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert(error.message);
|
|
} finally {
|
|
setProcesandoCove(null);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchPedimentos = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const queryParams = new URLSearchParams({
|
|
page: page.toString(),
|
|
page_size: itemsPerPage.toString(),
|
|
...(pedimentoFilter && { pedimento_app: pedimentoFilter })
|
|
});
|
|
const response = await getWithAuth(`${API_URL}/customs/pedimentos/?${queryParams}`);
|
|
if (!response.ok) throw new Error('Error al cargar los pedimentos');
|
|
const data = await response.json();
|
|
setPedimentos(data.results);
|
|
setCount(data.count);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Aplicar debounce al fetchPedimentos
|
|
const timeoutId = setTimeout(() => {
|
|
fetchPedimentos();
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
}, [page, itemsPerPage, pedimentoFilter]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header mejorado y responsivo */}
|
|
<div className="mb-6 sm:mb-8 relative overflow-hidden rounded-3xl shadow-2xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 p-6 sm:p-8 flex items-center gap-4 sm:gap-6 animate-fadein-slideup opacity-0"
|
|
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">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</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">
|
|
Panel de Auditoría
|
|
</h1>
|
|
<div className="flex items-center gap-4">
|
|
<p className="text-sm sm:text-lg text-blue-100 font-medium leading-relaxed">
|
|
Monitoreo y control de operaciones
|
|
</p>
|
|
<button
|
|
onClick={() => setShowInstructions(true)}
|
|
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
|
|
>
|
|
<svg className="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Instrucciones
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Efectos decorativos de fondo */}
|
|
<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>
|
|
<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>
|
|
{/* 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>
|
|
</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"
|
|
style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
|
|
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-12">
|
|
<div className="relative">
|
|
<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>
|
|
<p className="mt-4 text-gray-600 font-medium">Cargando datos...</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">
|
|
<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>
|
|
<p className="text-red-600">{error}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-2xl p-4 sm:p-6 border border-gray-200 shadow-sm">
|
|
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
Servicios de Auditoría
|
|
</h3>
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={handleAuditarAcusesCove}
|
|
disabled={auditandoAcusesCove || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditandoAcusesCove
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-pink-600 hover:bg-pink-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditandoAcusesCove ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando Acuses Cove...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Auditar Acuses Cove
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleAuditarEDocuments}
|
|
disabled={auditandoEDocuments || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditandoEDocuments
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-yellow-600 hover:bg-yellow-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditandoEDocuments ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando EDocuments...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Auditar EDocuments
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleAuditarAcuses}
|
|
disabled={auditandoAcuses || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditandoAcuses
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-blue-600 hover:bg-blue-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditandoAcuses ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando Acuses...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Auditar Acuses
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleAuditarTodos}
|
|
disabled={auditando || auditandoPartidas || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditando || auditandoPartidas
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-emerald-600 hover:bg-emerald-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditando ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
Auditar Todos los Pedimentos
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleAuditarPartidas}
|
|
disabled={auditando || auditandoPartidas || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditando || auditandoPartidas
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-indigo-600 hover:bg-indigo-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditandoPartidas ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando Partidas...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Auditar Partidas
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleAuditarRemesas}
|
|
disabled={auditando || auditandoRemesas || pedimentos.length === 0}
|
|
className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200
|
|
${auditando || auditandoRemesas
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-purple-600 hover:bg-purple-700 hover:shadow-md transform hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{auditandoRemesas ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Auditando Remesas...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
Auditar Remesas
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sección de Filtros */}
|
|
<div className="mt-6 bg-white rounded-lg border border-gray-200 p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{/* Contenedor para los filtros - esperando instrucciones */}
|
|
<div className="col-span-full">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
|
Filtros de Búsqueda
|
|
</h3>
|
|
</div>
|
|
<div className="col-span-1">
|
|
<label htmlFor="pedimento" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Número de Pedimento
|
|
</label>
|
|
<div className="relative rounded-md shadow-sm">
|
|
<input
|
|
type="text"
|
|
name="pedimento"
|
|
id="pedimento"
|
|
value={pedimentoFilter}
|
|
onChange={(e) => setPedimentoFilter(e.target.value)}
|
|
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"
|
|
placeholder="Buscar por pedimento..."
|
|
/>
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabla de pedimentos */}
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-300">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
|
Pedimento
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 group">
|
|
PC
|
|
<span className="block text-xs text-gray-500">Pedimento Completo</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
RM
|
|
<span className="block text-xs text-gray-500">Remesas</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
PT
|
|
<span className="block text-xs text-gray-500">Partidas</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
AC
|
|
<span className="block text-xs text-gray-500">Acuse</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
COVE
|
|
<span className="block text-xs text-gray-500">Cove</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
AC_COVE
|
|
<span className="block text-xs text-gray-500">Acuse de Cove</span>
|
|
</th>
|
|
<th scope="col" className="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">
|
|
EDoc
|
|
<span className="block text-xs text-gray-500">EDocument</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
{pedimentos.map((pedimento) => (
|
|
<tr key={pedimento.id} className="hover:bg-gray-50">
|
|
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">
|
|
<Link to={`/expedientes/pedimento/${pedimento.id}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>{pedimento.pedimento_app}</Link>
|
|
</td>
|
|
{/* PC - Pedimento Completo */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
{/* RM - Remesas */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button
|
|
onClick={() => handleAuditarRemesaPedimento(pedimento.id)}
|
|
disabled={procesandoRemesa === pedimento.id}
|
|
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200
|
|
${procesandoRemesa === pedimento.id
|
|
? 'opacity-50 cursor-not-allowed'
|
|
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
|
|
}
|
|
`}
|
|
>
|
|
{procesandoRemesa === pedimento.id ? (
|
|
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</td>
|
|
{/* PT - Partidas */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button
|
|
onClick={() => handleAuditarPartidasPedimento(pedimento.id)}
|
|
disabled={procesandoPedimento === pedimento.id}
|
|
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200
|
|
${procesandoPedimento === pedimento.id
|
|
? 'opacity-50 cursor-not-allowed'
|
|
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
|
|
}
|
|
`}
|
|
>
|
|
{procesandoPedimento === pedimento.id ? (
|
|
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</td>
|
|
{/* AC - Acuse */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button
|
|
onClick={() => handleAuditarAcusePedimento(pedimento.id)}
|
|
disabled={procesandoAcuse === pedimento.id}
|
|
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoAcuse === pedimento.id
|
|
? 'opacity-50 cursor-not-allowed'
|
|
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
|
|
}`}
|
|
>
|
|
{procesandoAcuse === pedimento.id ? (
|
|
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</td>
|
|
{/* COVE */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button
|
|
onClick={() => handleAuditarCovePedimento(pedimento.id)}
|
|
disabled={procesandoCove === pedimento.id}
|
|
className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoCove === pedimento.id
|
|
? 'opacity-50 cursor-not-allowed'
|
|
: 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
|
|
}`}
|
|
>
|
|
{procesandoCove === pedimento.id ? (
|
|
<svg className="h-4 w-4 text-gray-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</td>
|
|
{/* AC_COVE */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
{/* EDoc */}
|
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
|
|
<button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
|
|
<svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Paginación */}
|
|
{count > 0 && (
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<div className="flex-1 flex justify-between sm:hidden">
|
|
<button
|
|
onClick={() => setPage(page => Math.max(1, page - 1))}
|
|
disabled={page === 1}
|
|
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Anterior
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(page => page + 1)}
|
|
disabled={page >= Math.ceil(count / itemsPerPage)}
|
|
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Siguiente
|
|
</button>
|
|
</div>
|
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-700">
|
|
Mostrando <span className="font-medium">{((page - 1) * itemsPerPage) + 1}</span> a{' '}
|
|
<span className="font-medium">{Math.min(page * itemsPerPage, count)}</span> de{' '}
|
|
<span className="font-medium">{count}</span> resultados
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
|
<button
|
|
onClick={() => setPage(1)}
|
|
disabled={page === 1}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
>
|
|
<span className="sr-only">Primera</span>
|
|
««
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(page => Math.max(1, page - 1))}
|
|
disabled={page === 1}
|
|
className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
>
|
|
<span className="sr-only">Anterior</span>
|
|
«
|
|
</button>
|
|
<span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
Página {page}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(page => page + 1)}
|
|
disabled={page >= Math.ceil(count / itemsPerPage)}
|
|
className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
>
|
|
<span className="sr-only">Siguiente</span>
|
|
»
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(Math.ceil(count / itemsPerPage))}
|
|
disabled={page >= Math.ceil(count / itemsPerPage)}
|
|
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
>
|
|
<span className="sr-only">Última</span>
|
|
»»
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal de Instrucciones */}
|
|
{showInstructions && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-white rounded-lg max-w-2xl w-full shadow-xl transform transition-all">
|
|
<div className="border-b px-6 py-4 flex items-center justify-between">
|
|
<h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Instrucciones de Auditoría
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowInstructions(false)}
|
|
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
|
>
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="px-6 py-4 space-y-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
|
|
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
Auditar Todos los Pedimentos
|
|
</h4>
|
|
<p className="text-gray-600 ml-7">Este proceso revisará uno a uno cada XML del pedimento completo y agregará los campos restantes en nuestra tabla de pedimentos. Si el documento tiene COVEs y E-Docs, también los subirá a nuestra base de datos.</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
|
|
<svg className="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Auditar Partidas
|
|
</h4>
|
|
<p className="text-gray-600 ml-7">Creará todas las partidas de cada uno de los pedimentos, extrayendo la información detallada de cada una.</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-medium text-gray-900 flex items-center gap-2 mb-2">
|
|
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
Auditar Remesas
|
|
</h4>
|
|
<p className="text-gray-600 ml-7">Obtendrá y agregará todos los COVEs existentes en el documento a nuestra base de datos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 px-6 py-4 rounded-b-lg">
|
|
<button
|
|
onClick={() => setShowInstructions(false)}
|
|
className="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Entendido
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Animaciones CSS */}
|
|
<style>{`
|
|
@keyframes bounce-slow {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-8px) scale(1.05); }
|
|
}
|
|
.animate-bounce-slow {
|
|
animation: bounce-slow 3s infinite;
|
|
}
|
|
@keyframes fadein-slideup {
|
|
0% { opacity: 0; transform: translateY(40px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fadein-slideup {
|
|
animation: fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards;
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: scale(0.9) translateY(10px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fade-in 0.8s ease-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Auditor;
|