5 Commits

2 changed files with 166 additions and 113 deletions

View File

@@ -365,6 +365,19 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
}
};
// Función para obtener el nombre de pestaña legible
const getTabName = (tabKey) => {
const tabNames = {
'pedimento': 'Pedimento',
'partidas': 'Partida',
'coves': 'COVE',
'edocs': 'EDoc',
'documentos': 'Documentos',
'auditor': 'Auditor'
};
return tabNames[tabKey] || tabKey;
};
// Función para obtener el resumen del dashboard
const fetchDashboardSummary = async () => {
try {
@@ -2555,7 +2568,7 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<h3 className="text-lg font-semibold text-gray-900 sm:text-xl">
Documentos Generales del Pedimento
Documentos Generales
</h3>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 w-fit">
{docsCount} documentos
@@ -3039,7 +3052,7 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<h3 className="text-lg font-semibold text-gray-900 sm:text-xl">
Documentos del Pedimento
Pedimento Completo VU
</h3>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 w-fit">
{peddocsCount} documentos
@@ -3518,7 +3531,7 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<h3 className="text-lg font-semibold text-gray-900 sm:text-xl">
Partidas del Pedimento
Partidas VU del Pedimento
</h3>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 w-fit">
{partidasCount} partidas
@@ -3921,7 +3934,7 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<h3 className="text-lg font-semibold text-gray-900 sm:text-xl">
COVEs del Pedimento
COVEs VU del Pedimento
</h3>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 w-fit">
{covesCount} COVEs
@@ -4302,7 +4315,7 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center space-x-4">
<h3 className="text-lg font-semibold text-gray-900">
EDocs del Pedimento
EDocs VU del Pedimento
</h3>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
{edocsCount} EDocs
@@ -5485,13 +5498,86 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
</div>
</div>
)}
{/* Modal para mostrar documentos */}
{/* Modal de confirmación para eliminación */}
{showDeleteModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
<div className="w-full max-w-md mx-4 transition-all duration-300 transform scale-100 bg-white shadow-2xl rounded-2xl">
{/* Header del modal */}
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center gap-3">
<div className="p-3 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900">
Confirmar eliminación
</h3>
<p className="text-sm text-gray-600">Esta acción no se puede deshacer</p>
</div>
</div>
</div>
{/* Contenido del modal */}
<div className="px-6 py-4">
<div className="mb-4">
<p className="mb-3 text-gray-700">
¿Estás seguro de que deseas eliminar{' '}
<span className="font-semibold text-red-600">
{selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
</span>
?
</p>
<div className="p-3 border border-red-200 rounded-lg bg-red-50">
<div className="flex items-start gap-2">
<svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
<div>
<p className="text-sm font-medium text-red-800">Advertencia importante</p>
<p className="mt-1 text-sm text-red-700">
Los documentos eliminados no podrán ser recuperados. Asegúrate de que realmente deseas proceder con esta acción.
</p>
</div>
</div>
</div>
</div>
</div>
{/* Botones del modal */}
<div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200">
<button
onClick={() => setShowDeleteModal(false)}
className="px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Cancelar
</button>
<button
onClick={confirmDeleteDocuments}
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Eliminar {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
</button>
</div>
</div>
</div>
)}
{/* Modal para mostrar documentos */}
{showDocumentsModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 animate-fade-in">
<div className="w-full max-w-md p-6 scale-95 bg-white rounded-lg shadow-xl animate-modal-slide-up">
<div className="flex items-center justify-between mb-4">
<h3 className="mb-2 text-lg font-semibold text-blue-900">Documentos VU: {selectedVUNumber}</h3>
<h3 className="mb-2 text-lg font-semibold text-blue-900">
Documentos VU - {getTabName(activeTab)}: {selectedVUNumber}
</h3>
</div>
<div className="mb-4">
<p className="mb-2 text-sm text-gray-600">
@@ -5585,77 +5671,6 @@ const handleDeleteSelectedPedimentoDocuments = async () => {
</div>
)}
{/* Modal de confirmación para eliminación */}
{showDeleteModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
<div className="w-full max-w-md mx-4 transition-all duration-300 transform scale-100 bg-white shadow-2xl rounded-2xl">
{/* Header del modal */}
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center gap-3">
<div className="p-3 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900">
Confirmar eliminación
</h3>
<p className="text-sm text-gray-600">Esta acción no se puede deshacer</p>
</div>
</div>
</div>
{/* Contenido del modal */}
<div className="px-6 py-4">
<div className="mb-4">
<p className="mb-3 text-gray-700">
¿Estás seguro de que deseas eliminar{' '}
<span className="font-semibold text-red-600">
{selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
</span>
?
</p>
<div className="p-3 border border-red-200 rounded-lg bg-red-50">
<div className="flex items-start gap-2">
<svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
<div>
<p className="text-sm font-medium text-red-800">Advertencia importante</p>
<p className="mt-1 text-sm text-red-700">
Los documentos eliminados no podrán ser recuperados. Asegúrate de que realmente deseas proceder con esta acción.
</p>
</div>
</div>
</div>
</div>
</div>
{/* Botones del modal */}
<div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200">
<button
onClick={() => setShowDeleteModal(false)}
className="px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Cancelar
</button>
<button
onClick={confirmDeleteDocuments}
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Eliminar {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
</button>
</div>
</div>
</div>
)}
</div>
);
}

View File

@@ -67,7 +67,7 @@ const handleDownloadReport = async (reportId) => {
export default function Reports() {
// Estado para organizacion_id
const [organizacionId, setOrganizacionId] = useState('');
useEffect(() => {
async function fetchOrgId() {
try {
@@ -81,6 +81,7 @@ export default function Reports() {
}
fetchOrgId();
}, []);
// Handler for Generar Reporte in Cumplimiento tab
const handleGenerarReporteCumplimiento = async () => {
if (!organizacionId) {
@@ -196,6 +197,7 @@ export default function Reports() {
const [tourStep, setTourStep] = useState(0);
const [organizaciones, setOrganizaciones] = useState([]);
const [importadores, setImportadores] = useState([]);
useEffect(() => {
const fetchOrganizaciones = async () => {
@@ -213,6 +215,23 @@ export default function Reports() {
fetchOrganizaciones();
}, []);
useEffect(() => {
const fetchImportadores = async () => {
try {
const res = await fetch(
`${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`,
{ method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('access')}` }
});
const data = await res.json();
setImportadores(data);
} catch {
console.error('Error fetching importadores:', err);
setImportadores([]);
}
};
fetchImportadores();
}, []);
const [globalFilters, setGlobalFilters] = useState({
rfc: '',
fecha_pago_desde: '',
@@ -240,13 +259,45 @@ export default function Reports() {
</div>
<div className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Filtro por Organización */}
<div className="group">
<label className="block text-sm font-medium text-gray-700 mb-1">
Organización
</label>
<div className="relative rounded-lg shadow-sm">
<select
value={globalFilters.organizacion || ''}
onChange={(e) => setGlobalFilters(prev => ({
...prev,
organizacion: e.target.value
}))}
className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
transition-all duration-200 bg-white appearance-none"
>
<option value="">Todas las organizaciones</option>
{organizaciones.results && organizaciones.results.map(org => (
<option key={org.id} value={org.id}>
{org.nombre} {/* Usar el campo 'nombre' que sí existe */}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
</div>
{/* Filtro por RFC */}
<div className="group">
<label className="block text-sm font-medium text-gray-700 mb-1">
RFC
</label>
{/* modificar de input a select */}
<div className="relative rounded-lg shadow-sm">
<input
{/* <input
type="text"
value={globalFilters.rfc || ''}
onChange={(e) => setGlobalFilters(prev => ({
@@ -257,7 +308,25 @@ export default function Reports() {
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
transition-all duration-200 bg-white"
placeholder="Ej: ABC123456789"
/>
/> */}
<select
name="rfc"
value={globalFilters.rfc || ''}
onChange={(e) => setGlobalFilters(prev => ({
...prev,
rfc: e.target.value
}))}
className="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 text-sm font-mono uppercase"
style={{ textTransform: 'uppercase' }}
>
<option value="" >Selecciona un RFC</option>
{importadores.filter(imp => {
if (!globalFilters.organizacion) return true;
return imp.organizacion === globalFilters.organizacion;
}).map(imp => (
<option key={imp.rfc} value={imp.rfc}>{imp.rfc}</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -367,37 +436,6 @@ export default function Reports() {
</div>
</div>
</div>
{/* Filtro por Organización */}
<div className="group">
<label className="block text-sm font-medium text-gray-700 mb-1">
Organización
</label>
<div className="relative rounded-lg shadow-sm">
<select
value={globalFilters.organizacion || ''}
onChange={(e) => setGlobalFilters(prev => ({
...prev,
organizacion: e.target.value
}))}
className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
transition-all duration-200 bg-white appearance-none"
>
<option value="">Todas las organizaciones</option>
{organizaciones.results && organizaciones.results.map(org => (
<option key={org.id} value={org.id}>
{org.nombre} {/* Usar el campo 'nombre' que sí existe */}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
</div>
</div>
{/* Botón para limpiar filtros globales */}