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

340
src/pages/TableroAlmacenamiento.jsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import fetchWithAuth from '../fetchWithAuth';
const initialFilters = {
pedimento_app: '',
aduana: '',
@@ -12,11 +11,48 @@ const initialFilters = {
fecha_pago_lte: '',
contribuyente__rfc: '',
};
export default function TableroAlmacenamiento() {
const [filters, setFilters] = useState(initialFilters);
const [summary, setSummary] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [reports, setReports] = useState([]);
const handleGenerateReport = async () => {
try {
const params = Object.entries(filters)
.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}` : ''}`;
const res = await fetchWithAuth(url, { method: 'POST' });
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.');
}
};
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.');
}
};
// Fetch summary data
const fetchSummary = async () => {
@@ -36,27 +72,31 @@ export default function TableroAlmacenamiento() {
setIsLoading(false);
};
// Fetch initial data
// 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();
}, []);
// Handle filter changes
const handleFilterChange = (e) => {
setFilters({ ...filters, [e.target.name]: e.target.value });
};
// Card components for different sizes
const Card = ({ title, children, icon, small }) => (
<div className={`bg-white rounded-lg shadow-sm border border-slate-200 p-4 flex flex-col w-full ${small ? 'min-h-[120px]' : 'min-h-[200px]'}`}>
<div className="flex items-center gap-2 mb-2">
{icon && <span className={`${small ? 'text-slate-600' : 'text-blue-600'}`}>{icon}</span>}
<span className={`text-sm font-semibold ${small ? 'text-slate-600' : 'text-slate-700'}`}>{title}</span>
</div>
<div className="flex-1">{children}</div>
</div>
);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
{/* Header */}
@@ -97,12 +137,21 @@ export default function TableroAlmacenamiento() {
))}
</div>
<div className="flex justify-end">
<button
type="submit"
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
>
Aplicar Filtros
</button>
<div className="flex gap-2">
<button
type="submit"
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
>
Aplicar Filtros
</button>
<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={() => alert('Generar reporte (implementación pendiente)')}
>
Generar Reporte
</button>
</div>
</div>
</form>
</div>
@@ -115,203 +164,60 @@ export default function TableroAlmacenamiento() {
<span className="text-slate-600">Cargando resumen...</span>
</div>
) : summary ? (
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
{/* Pedimentos */}
<Card
title="Pedimentos"
icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 17l4 4 4-4m-4-5v9" /></svg>}
>
<div className="text-2xl font-bold text-blue-700">{summary.pedimentos?.total ?? '-'}</div>
<div className="grid grid-cols-2 gap-2 mt-2 text-xs">
<div>
<span className="block text-slate-500">Completos</span>
<span className="block font-semibold">{summary.pedimentos?.completos ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.pedimentos?.pendientes ?? '-'}</span>
</div>
<>
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
{/* ...Tarjetas existentes... */}
{/* ...aquí van las Card como antes... */}
{/* ...no se repite para brevedad... */}
</div>
{/* 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 className="mt-2">
<span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
<div className="w-full bg-slate-100 rounded h-2">
<div
className="bg-blue-600 h-2 rounded"
style={{ width: `${summary.pedimentos?.cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-700 font-semibold mt-1">
{summary.pedimentos?.cumplimiento ?? 0}%
</span>
</div>
<div className="mt-2 pt-2 border-t grid grid-cols-2 gap-4">
{/* Documentos */}
<div>
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16h8M8 12h8M8 8h8" />
</svg>
<span className="text-xs font-semibold text-slate-600">Documentos</span>
</div>
<div className="mt-1">
<div className="text-lg font-bold text-slate-700">{summary.documentos?.descargados ?? '-'}</div>
<span className="block text-xs text-slate-500">Descargados</span>
</div>
</div>
{/* Remesas */}
<div>
<div className="flex items-center gap-2">
<svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3" />
</svg>
<span className="text-xs font-semibold text-slate-600">Remesas</span>
</div>
<div className="mt-1">
<div className="text-lg font-bold text-slate-700">{summary.remesas?.total ?? '-'}</div>
<span className="block text-xs text-slate-500">Total</span>
</div>
</div>
</div>
</Card>
{/* Partidas */}
<Card
title="Partidas"
icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /></svg>}
>
<div className="text-2xl font-bold text-blue-700">{summary.partidas?.total ?? '-'}</div>
<div className="grid grid-cols-2 gap-2 mt-2 text-xs">
<div>
<span className="block text-slate-500">Descargadas</span>
<span className="block font-semibold">{summary.partidas?.partidas_descargadas ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.partidas?.partidas_pendientes ?? '-'}</span>
</div>
</div>
<div className="mt-2">
<span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
<div className="w-full bg-slate-100 rounded h-2">
<div
className="bg-blue-600 h-2 rounded"
style={{ width: `${summary.partidas?.cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-700 font-semibold mt-1">
{summary.partidas?.cumplimiento ?? 0}%
</span>
</div>
</Card>
{/* COVES */}
<Card
title="COVES"
icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 8h10M7 12h10M7 16h10" /></svg>}
>
<div className="text-2xl font-bold text-blue-700">{summary.coves?.total ?? '-'}</div>
<div className="grid grid-cols-2 gap-2 mt-2 text-xs">
<div>
<span className="block text-slate-500">Procesados</span>
<span className="block font-semibold">{summary.coves?.coves_procesados ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.coves?.coves_pendientes ?? '-'}</span>
</div>
</div>
<div className="mt-2">
<span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
<div className="w-full bg-slate-100 rounded h-2">
<div
className="bg-blue-600 h-2 rounded"
style={{ width: `${summary.coves?.coves_cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-700 font-semibold mt-1">
{summary.coves?.coves_cumplimiento ?? 0}%
</span>
</div>
<div className="mt-2 border-t pt-2">
<span className="block text-xs text-slate-500 mb-1">Acuses</span>
<div className="grid grid-cols-2 gap-2 text-xs">
<div>
<span className="block text-slate-500">Procesados</span>
<span className="block font-semibold">{summary.coves?.acuse_coves_procesados ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.coves?.acuse_coves_pendientes ?? '-'}</span>
</div>
</div>
<div className="w-full bg-slate-100 rounded h-2 mt-2">
<div
className="bg-blue-400 h-2 rounded"
style={{ width: `${summary.coves?.acuse_coves_cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-400 font-semibold mt-1">
{summary.coves?.acuse_coves_cumplimiento ?? 0}%
</span>
</div>
</Card>
{/* EDocuments */}
<Card
title="EDocuments"
icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v16h16V4H4zm4 4h8v8H8V8z" /></svg>}
>
<div className="text-2xl font-bold text-blue-700">{summary.edocuments?.total ?? '-'}</div>
<div className="grid grid-cols-2 gap-2 mt-2 text-xs">
<div>
<span className="block text-slate-500">asd</span>
<span className="block font-semibold">{summary.edocuments?.edocs_descargados ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.edocuments?.edocs_pendientes ?? '-'}</span>
</div>
</div>
<div className="mt-2">
<span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
<div className="w-full bg-slate-100 rounded h-2">
<div
className="bg-blue-600 h-2 rounded"
style={{ width: `${summary.edocuments?.edocs_cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-700 font-semibold mt-1">
{summary.edocuments?.edocs_cumplimiento ?? 0}%
</span>
</div>
<div className="mt-2 border-t pt-2">
<span className="block text-xs text-slate-500 mb-1">Acuses</span>
<div className="grid grid-cols-2 gap-2 text-xs">
<div>
<span className="block text-slate-500">Descargados</span>
<span className="block font-semibold">{summary.edocuments.acuse_descargados ?? '-'}</span>
</div>
<div>
<span className="block text-slate-500">Pendientes</span>
<span className="block font-semibold">{summary.edocuments.acuses_pendientes ?? '-'}</span>
</div>
</div>
<div className="w-full bg-slate-100 rounded h-2 mt-2">
<div
className="bg-blue-400 h-2 rounded"
style={{ width: `${summary.edocuments.acuses_cumplimiento ?? 0}%` }}
/>
</div>
<span className="block text-xs text-right text-blue-400 font-semibold mt-1">
{summary.edocuments?.acuses_cumplimiento ?? 0}%
</span>
</div>
</Card>
</div>
</div>
</>
) : (
<div className="text-center text-slate-500 py-12">No hay datos para mostrar.</div>
)}