EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reporte de cumplimiento

Browse Source
This commit is contained in:
Kevin Rosales
2025-10-21 21:32:37 -06:00
parent e69fca99c0
commit 5e50d6bac0
3 changed files with 425 additions and 834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

406
src/pages/Reports.jsx
View File

@@ -1,4 +1,12 @@
import React, { useState, useEffect } from 'react';
import { getCurrentUser } from '../api/users';
// Helper to get current user with fetchWithAuth
const fetchCurrentUserWithAuth = async () => {
const url = `${API_URL}/user/users/me/`;
const res = await fetchWithAuth(url);
if (!res.ok) throw new Error('No se pudo obtener el usuario actual');
return res.json();
};
import { fetchWithAuth } from '../fetchWithAuth';
import { useNotification } from '../context/NotificationContext';
import datastageModelsData from '../data/datastageModels.json';
@@ -34,18 +42,120 @@ if (typeof document !== 'undefined' && !document.getElementById('reports-animati
document.head.appendChild(style);
}
const handleDownloadReport = async (reportId) => {
try {
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-download/${reportId}/`;
const res = await fetchWithAuth(url);
if (!res.ok) throw new Error('Error al descargar el reporte');
const blob = await res.blob();
let filename = `reporte_${reportId}.csv`;
const disposition = res.headers.get('Content-Disposition');
if (disposition && disposition.includes('filename=')) {
filename = disposition.split('filename=')[1].replace(/"/g, '').trim();
}
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (err) {
alert('No se pudo descargar el reporte.');
}
};
export default function Reports() {
// Estado para organizacion_id
const [organizacionId, setOrganizacionId] = useState('');
useEffect(() => {
async function fetchOrgId() {
try {
const user = await fetchCurrentUserWithAuth();
if (user && user.organizacion) {
setOrganizacionId(user.organizacion);
}
} catch (err) {
setOrganizacionId('');
}
}
fetchOrgId();
}, []);
// Handler for Generar Reporte in Cumplimiento tab
const handleGenerarReporteCumplimiento = async () => {
if (!organizacionId) {
alert('No se pudo obtener el organizacion_id. Intenta de nuevo más tarde.');
return;
}
// Build query params from filtersCumplimiento and add organizacion_id
const paramsObj = { ...filtersCumplimiento, organizacion_id: organizacionId };
const params = Object.entries(paramsObj)
.filter(([_, v]) => v)
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
.join('&');
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/table-summary/${params ? `?${params}` : ''}`;
console.log('Cumplimiento Report Request:', url);
try {
const res = await fetchWithAuth(url);
const data = await res.json();
console.log('Cumplimiento Report Response:', data);
if (!res.ok) throw new Error('Error al generar el reporte');
alert('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.');
} catch (err) {
alert('No se pudo generar el reporte.');
}
};
// Filtros replicados de TableroAlmacenamiento
const initialFiltersCumplimiento = {
pedimento_app: '',
aduana: '',
patente: '',
regimen: '',
agente_aduanal: '',
tipo_operacion: '',
fecha_pago_gte: '',
fecha_pago_lte: '',
contribuyente__rfc: '',
};
const [filtersCumplimiento, setFiltersCumplimiento] = useState(initialFiltersCumplimiento);
const handleFilterChangeCumplimiento = (e) => {
setFiltersCumplimiento({ ...filtersCumplimiento, [e.target.name]: e.target.value });
};
const [summaryData, setSummaryData] = useState(null);
// Fetch summary data for dashboard/cards
const fetchSummary = async () => {
try {
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/dashboard/summary/`;
const res = await fetch(url, {
method: 'GET',
credentials: 'include',
mode: 'cors',
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Accept': '*/*',
},
referrer: window.location.href,
});
if (!res.ok) throw new Error('Error al obtener el resumen');
const data = await res.json();
setSummaryData(data);
} catch (err) {
setSummaryData(null);
}
};
const [reports, setReports] = useState([]);
// Leer DEBUG_MODE desde variables de entorno
const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
const { showMessage } = useNotification();
const [isExporting, setIsExporting] = useState(false);
const [exportFormat, setExportFormat] = useState('excel');
const [showExportSuccess, setShowExportSuccess] = useState(false);
const [showHelp, setShowHelp] = useState(false);
const [showTour, setShowTour] = useState(false);
const [tourStep, setTourStep] = useState(0);
// Estado para formato de exportación personalizado
const [showFormatSelector, setShowFormatSelector] = useState(false);
@@ -55,7 +165,7 @@ export default function Reports() {
// Efecto para manejar el cambio de pestaña cuando isDebugMode cambia
useEffect(() => {
// Si no está en modo debug y la pestaña activa es una pestaña de debug, cambiar a 'pedimentos'
if (!isDebugMode && (activeTab === 'minimos' || activeTab === 'coves')) {
if (!isDebugMode && (activeTab === 'Cumplimiento' || activeTab === 'coves')) {
setActiveTab('pedimentos');
}
}, [isDebugMode, activeTab]);
@@ -70,7 +180,7 @@ export default function Reports() {
// Estado para modelo seleccionado
const [selectedModel, setSelectedModel] = useState(defaultModel.model);
// Estado para campos seleccionados
const [selectedFields, setSelectedFields] = useState(defaultModel.fields);
@@ -86,7 +196,7 @@ export default function Reports() {
// Al cambiar de pestaña, seleccionar el primer modelo de la pestaña actual
const newModel = models[0]?.model || '';
setSelectedModel(newModel);
const modelObj = models.find(m => m.model === newModel);
if (modelObj) {
setSelectedFields(modelObj.fields);
@@ -108,7 +218,7 @@ export default function Reports() {
// Obtener los modelos según la pestaña activa
const models = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;
// Encontrar el modelo actual dentro de los modelos de la pestaña activa
const currentModel = models.find(m => m.model === selectedModel) || defaultModel;
@@ -201,6 +311,25 @@ export default function Reports() {
setTourStep(0);
};
// Fetch report list from API
useEffect(() => {
const fetchReports = async () => {
try {
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-list/`;
const res = await fetchWithAuth(url);
if (!res.ok) throw new Error('Error al obtener el historial de reportes');
const data = await res.json();
setReports(data);
} catch (err) {
setReports([]);
}
};
fetchReports();
}, []);
useEffect(() => {
fetchSummary();
}, []);
// Función para manejar la exportación del modelo
const handleExportModel = async () => {
if (selectedFields.length === 0) {
@@ -262,15 +391,15 @@ export default function Reports() {
`;
const blob = await response.blob();
const contentType = exportFormat === 'excel'
const contentType = exportFormat === 'excel'
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
: 'text/csv';
const url = window.URL.createObjectURL(new Blob([blob], { type: contentType }));
const link = document.createElement('a');
const extension = exportFormat === 'excel' ? 'xlsx' : 'csv';
const fileName = `${currentModel.model}_${new Date().toISOString().split('T')[0]}.${extension}`;
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
@@ -367,11 +496,10 @@ export default function Reports() {
key={field}
onClick={() => setAvailableSelected(field)}
onDoubleClick={() => addField(field)}
className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${
availableSelected === field
className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${availableSelected === field
? 'bg-blue-50 text-blue-700'
: 'hover:bg-gray-100'
}`}
}`}
>
<span className="text-sm font-medium">{formatFieldName(field)}</span>
<button
@@ -420,11 +548,10 @@ export default function Reports() {
{selectedFields.map(field => (
<div
key={field}
className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${
includedSelected === field
className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${includedSelected === field
? 'bg-red-50 text-red-700'
: 'hover:bg-gray-100'
}`}
}`}
onClick={() => setIncludedSelected(field)}
onDoubleClick={() => removeField(field)}
>
@@ -449,7 +576,7 @@ export default function Reports() {
</div>
</div>
</div>
<style jsx>{`
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
@@ -489,12 +616,12 @@ export default function Reports() {
<div className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{Object.entries(currentModel.filters).map(([key, value]) => {
const label = key.split('_').map(word =>
const label = key.split('_').map(word =>
word.charAt(0).toUpperCase() + word.slice(1)
).join(' ');
const isDate = key.toLowerCase().includes('fecha');
return (
<div key={key} className="group">
<label className="block text-sm font-medium text-gray-700 mb-1">
@@ -555,16 +682,15 @@ export default function Reports() {
<div className="flex gap-3">
<button
onClick={() => setExportFormat('excel')}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
exportFormat === 'excel'
? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
>
<div className="flex items-center justify-center gap-2">
<svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
</svg>
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
</div>
@@ -572,16 +698,15 @@ export default function Reports() {
<button
onClick={() => setExportFormat('csv')}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
exportFormat === 'csv'
? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
>
<div className="flex items-center justify-center gap-2">
<svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
</svg>
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
</div>
@@ -597,29 +722,26 @@ export default function Reports() {
<h3 className="text-md font-bold text-blue-800 mb-3">Filtros</h3>
{renderFilters()}
</div>
<button
<button
onClick={handleExportModel}
disabled={isExporting}
className={`group relative w-full py-3 text-lg font-semibold ${
isExporting
className={`group relative w-full py-3 text-lg font-semibold ${isExporting
? 'bg-gray-400 cursor-not-allowed'
: exportFormat === 'excel'
? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
} text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${
exportFormat === 'excel'
? 'shadow-green-500/20 hover:shadow-green-500/30'
} text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
? 'shadow-green-500/20 hover:shadow-green-500/30'
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
} overflow-hidden`}
} overflow-hidden`}
>
<div className={`absolute inset-0 w-full h-full ${
isExporting
<div className={`absolute inset-0 w-full h-full ${isExporting
? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
: exportFormat === 'excel'
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
} skeleton-animation`}></div>
} skeleton-animation`}></div>
<span className="relative inline-flex items-center justify-center gap-2 px-4">
{isExporting ? (
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -677,16 +799,15 @@ export default function Reports() {
<div className="flex gap-3">
<button
onClick={() => setExportFormat('excel')}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
exportFormat === 'excel'
? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
>
<div className="flex items-center justify-center gap-2">
<svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
</svg>
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
</div>
@@ -694,16 +815,15 @@ export default function Reports() {
<button
onClick={() => setExportFormat('csv')}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
exportFormat === 'csv'
? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
: 'bg-white border-gray-200 hover:bg-gray-50'
}`}
>
<div className="flex items-center justify-center gap-2">
<svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
</svg>
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
</div>
@@ -719,28 +839,25 @@ export default function Reports() {
<h3 className="text-md font-bold text-blue-800 mb-3">Filtros</h3>
{renderFilters()}
</div>
<button
<button
onClick={handleExportModel}
disabled={isExporting}
className={`group relative w-full py-3 text-lg font-semibold ${
isExporting
className={`group relative w-full py-3 text-lg font-semibold ${isExporting
? 'bg-gray-400 cursor-not-allowed'
: exportFormat === 'excel'
? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
} text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${
exportFormat === 'excel'
? 'shadow-green-500/20 hover:shadow-green-500/30'
} text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
? 'shadow-green-500/20 hover:shadow-green-500/30'
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
} overflow-hidden`}
} overflow-hidden`}
>
<div className={`absolute inset-0 w-full h-full ${
isExporting
<div className={`absolute inset-0 w-full h-full ${isExporting
? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
: exportFormat === 'excel'
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
} skeleton-animation`}></div>
} skeleton-animation`}></div>
<span className="relative inline-flex items-center justify-center gap-2 px-4">
{isExporting ? (
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -755,7 +872,7 @@ export default function Reports() {
<span>{isExporting ? 'Generando archivo...' : `Generar y descargar ${exportFormat.toUpperCase()}`}</span>
</span>
</button>
<style>{`
.skeleton-animation {
animation: shimmer 2s linear infinite;
@@ -768,11 +885,94 @@ export default function Reports() {
`}</style>
</div>
),
minimos: (
Cumplimiento: (
<div className="p-6">
<h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Mínimos</h2>
<p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Mínimos.</p>
{/* Aquí va la lógica y UI específica para mínimos */}
<h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Cumplimiento</h2>
<p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Cumplimiento.</p>
{/* Filtros replicados */}
<div className="max-w-7xl mx-auto mt-6 mb-4 px-4">
<form onSubmit={(e) => {
e.preventDefault();
fetchSummary();
}} className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
{Object.keys(initialFiltersCumplimiento).map((key) => (
<div key={key}>
<label className="block text-xs font-medium text-slate-600 mb-1" htmlFor={key}>
{key.replace(/_/g, ' ').replace('gte', 'desde').replace('lte', 'hasta')}
</label>
<input
type={key.includes('fecha') ? 'date' : 'text'}
name={key}
id={key}
value={filtersCumplimiento[key]}
onChange={handleFilterChangeCumplimiento}
className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
/>
</div>
))}
</div>
<div className="flex justify-end">
<div className="flex gap-2">
<button
type="button"
className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
onClick={handleGenerarReporteCumplimiento}
>
Generar Reporte
</button>
</div>
</div>
</form>
</div>
{/* Aquí va la lógica y UI específica para Cumplimiento */}
{/* Tabla de reportes debajo de las tarjetas */}
<div className="mt-10">
<h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
<div className="overflow-x-auto">
<table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
<thead>
<tr className="bg-slate-100">
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
</tr>
</thead>
<tbody>
{reports.length > 0 ? (
reports.map((r) => (
<tr key={r.report_id}>
<td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
<td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
<td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
<td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
<td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
<td className="px-4 py-2 text-xs">
{r.status === 'ready' ? (
<button
className="text-blue-600 hover:underline"
onClick={() => handleDownloadReport(r.report_id)}
>
Descargar
</button>
) : (
<span className="text-slate-400">-</span>
)}
</td>
</tr>
))
) : (
<tr>
<td colSpan={6} className="px-4 py-2 text-center text-slate-400">No hay reportes disponibles.</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
),
coves: (
@@ -788,7 +988,7 @@ export default function Reports() {
<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 decorativo */}
<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="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">
@@ -801,7 +1001,7 @@ export default function Reports() {
Consulta, genera y descarga reportes relacionados con el sistema aduanero
</p>
</div>
{/* Botones de ayuda */}
<div className="flex gap-2">
<button
@@ -823,7 +1023,7 @@ export default function Reports() {
</svg>
</button>
</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>
@@ -898,11 +1098,10 @@ export default function Reports() {
<div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100">
<div className="flex flex-col sm:flex-row border-b border-blue-200/50 p-1 gap-1">
<button
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
activeTab === 'pedimentos'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'pedimentos'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
onClick={() => setActiveTab('pedimentos')}
>
<div className="flex items-center justify-center gap-2">
@@ -913,11 +1112,10 @@ export default function Reports() {
</div>
</button>
<button
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
activeTab === 'datastage'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'datastage'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
onClick={() => setActiveTab('datastage')}
>
<div className="flex items-center justify-center gap-2">
@@ -929,28 +1127,26 @@ export default function Reports() {
</button>
{isDebugMode && (
<button
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
activeTab === 'minimos'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
onClick={() => setActiveTab('minimos')}
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'Cumplimiento'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
onClick={() => setActiveTab('Cumplimiento')}
>
<div className="flex items-center justify-center gap-2">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<span>Mínimos</span>
<span>Cumplimiento</span>
</div>
</button>
)}
{isDebugMode && (
<button
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
activeTab === 'coves'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'coves'
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
: 'text-gray-700 hover:bg-blue-50/80'
}`}
onClick={() => setActiveTab('coves')}
>
<div className="flex items-center justify-center gap-2">
@@ -967,14 +1163,14 @@ export default function Reports() {
</div>
</div>
</div>
{/* Tour Overlay */}
<TourOverlay
show={showTour}
step={tourStep}
steps={tourSteps}
onNext={nextTourStep}
onSkip={skipTour}
<TourOverlay
show={showTour}
step={tourStep}
steps={tourSteps}
onNext={nextTourStep}
onSkip={skipTour}
/>
</div>
);