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

Se agregaron datos del ticker 2025-08-046

Browse Source
This commit is contained in:
Kevin Rosales
2025-08-20 09:15:59 -06:00
parent 2bc70fc3c2
commit 3e498c57ad
7 changed files with 889 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/pages/Datastage.jsx
View File

@@ -60,8 +60,10 @@ function RegistrosCargadosModal({ open, onClose, registros }) {
}
// Procesar datastage (adaptado para mostrar registros cargados)
async function procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal) {
// Recibe setEnProcesoId como argumento para manejar el estado desde el componente
async function procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal, setEnProcesoId) {
try {
setEnProcesoId(item.id);
const url = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${item.id}/procesar/`;
const body = {
organizacion: item.organizacion,
@@ -88,6 +90,8 @@ async function procesarDatastage(item, setDatastages, setSuccess, setError, setR
}
} catch (e) {
setError('No se pudo procesar el datastage');
} finally {
setEnProcesoId(null);
}
}
// Descarga autenticada de archivos datastage
@@ -128,6 +132,8 @@ export default function Datastage() {
// Animación header
const [showAnimation, setShowAnimation] = useState(false);
const [hasAnimated, setHasAnimated] = useState(false);
// Estado para mostrar mensaje "En proceso" por cada datastage
const [enProcesoId, setEnProcesoId] = useState(null);
useLayoutEffect(() => { setShowAnimation(true); }, []);
useEffect(() => { if (showAnimation && !hasAnimated) setTimeout(() => setHasAnimated(true), 800); }, [showAnimation, hasAnimated]);
@@ -180,46 +186,6 @@ export default function Datastage() {
setLoading(false);
};
// Editar
const handleEdit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
const fd = new FormData();
fd.append('contribuyente', form.contribuyente);
if (form.archivo) fd.append('archivo', form.archivo);
await patchFormDataWithAuth(`${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/${editingId}/`, fd);
setForm({ archivo: null, contribuyente: '' });
setEditingId(null);
setShowEditModal(false);
setSuccess('Datastage actualizado exitosamente');
setShowSuccessModal(true);
load();
} catch (e) {
setError(e.message);
}
setLoading(false);
};
// Eliminar
const handleDelete = async () => {
if (!deleteId) return;
setLoading(true);
setError(null);
try {
await deleteDatastage(deleteId);
if (selected && selected.id === deleteId) setSelected(null);
setShowDeleteModal(false);
setSuccess('Datastage eliminado exitosamente');
setShowSuccessModal(true);
load();
} catch (e) {
setError(e.message);
}
setLoading(false);
};
// Abrir modal de edición
const openEditModal = (item) => {
setForm({ archivo: null, contribuyente: item.contribuyente });
@@ -403,14 +369,18 @@ export default function Datastage() {
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<button
onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal)}
className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
title={item.procesado ? 'Ya procesado' : 'Procesar'}
disabled={item.procesado}
onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal, setEnProcesoId)}
className={`inline-flex items-center justify-center w-24 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 text-sm font-semibold ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : enProcesoId === item.id ? 'bg-yellow-50 border-yellow-200 text-yellow-700 cursor-wait' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
title={item.procesado ? 'Ya procesado' : enProcesoId === item.id ? 'En proceso' : 'Procesar'}
disabled={item.procesado || enProcesoId === item.id}
>
<svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
{item.procesado ? (
<span className="flex items-center gap-1"><svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Procesado</span>
) : enProcesoId === item.id ? (
<span className="flex items-center gap-1"><svg className="w-5 h-5 animate-spin text-yellow-500" fill="none" stroke="currentColor" 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-8v8z"></path></svg>En proceso...</span>
) : (
<span className="flex items-center gap-1"><svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Procesar</span>
)}
</button>
</td>
</tr>
@@ -480,14 +450,18 @@ export default function Datastage() {
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<button
onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal)}
className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
title={item.procesado ? 'Ya procesado' : 'Procesar'}
disabled={item.procesado}
onClick={() => procesarDatastage(item, setDatastages, setSuccess, setError, setRegistrosCargados, setShowRegistrosModal, setEnProcesoId)}
className={`inline-flex items-center justify-center w-24 h-9 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 text-sm font-semibold ${item.procesado ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50' : enProcesoId === item.id ? 'bg-yellow-50 border-yellow-200 text-yellow-700 cursor-wait' : 'bg-green-50 border-green-200 hover:bg-green-100 hover:border-green-300 focus:ring-green-500 cursor-pointer'}`}
title={item.procesado ? 'Ya procesado' : enProcesoId === item.id ? 'En proceso' : 'Procesar'}
disabled={item.procesado || enProcesoId === item.id}
>
<svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
{item.procesado ? (
<span className="flex items-center gap-1"><svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Procesado</span>
) : enProcesoId === item.id ? (
<span className="flex items-center gap-1"><svg className="w-5 h-5 animate-spin text-yellow-500" fill="none" stroke="currentColor" 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-8v8z"></path></svg>En proceso...</span>
) : (
<span className="flex items-center gap-1"><svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Procesar</span>
)}
</button>
</div>
</div>
@@ -497,44 +471,141 @@ export default function Datastage() {
</div>
{/* Modales */}
{/* Modal de creación */}
{showCreateModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
<form onSubmit={handleCreate} className="bg-white rounded-xl shadow-2xl border border-blue-200 p-8 max-w-sm w-full flex flex-col animate-fade-in">
<h2 className="text-xl font-bold text-blue-700 mb-4">Nuevo Datastage</h2>
{error && <div className="text-red-500 mb-2">{error}</div>}
<label className="block text-xs font-semibold text-gray-700 mb-1">Archivo (.zip)</label>
<input type="file" accept=".zip" className="mb-3 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 transition-all" onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))} required />
<label className="block text-xs font-semibold text-gray-700 mb-1">Contribuyente</label>
<input className="mb-3 w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 transition-all" value={form.contribuyente} onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))} required />
<div className="flex gap-2 mt-2 justify-end">
<button type="button" onClick={() => setShowCreateModal(false)} className="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg font-semibold shadow hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400">Cancelar</button>
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">Crear</button>
</div>
</form>
</div>
)}
{/* Modal de edición */}
{showEditModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
<form onSubmit={handleEdit} className="bg-white rounded-xl shadow-2xl border border-yellow-200 p-8 max-w-sm w-full flex flex-col animate-fade-in">
<h2 className="text-xl font-bold text-yellow-700 mb-4">Editar Datastage</h2>
{error && <div className="text-red-500 mb-2">{error}</div>}
<label className="block text-xs font-semibold text-gray-700 mb-1">Archivo (.zip)</label>
<input type="file" accept=".zip" className="mb-3 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-gray-50 transition-all" onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))} />
<label className="block text-xs font-semibold text-gray-700 mb-1">Contribuyente</label>
<input className="mb-3 w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 bg-gray-50 transition-all" value={form.contribuyente} onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))} required />
<div className="flex gap-2 mt-2 justify-end">
<button type="button" onClick={handleCancelEdit} className="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg font-semibold shadow hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400">Cancelar</button>
<button type="submit" className="px-4 py-2 bg-yellow-600 text-white rounded-lg font-semibold shadow hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-400">Actualizar</button>
</div>
</form>
</div>
)}
{/* Modal de creación - estilo Users/Importers */}
{showCreateModal && (
<div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
<form onSubmit={handleCreate} className="relative mx-auto w-full max-w-xl bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
{/* Header */}
<div className="bg-gradient-to-r from-blue-700 to-blue-900 rounded-t-2xl p-4 text-white border-b-2 border-blue-500">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="bg-blue-500 bg-opacity-30 rounded-xl p-2 border border-blue-400 border-opacity-30">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
<div>
<h3 className="text-lg font-semibold tracking-wide">Nuevo Datastage</h3>
<p className="text-blue-200 text-xs font-medium">Carga un archivo .zip y asigna un contribuyente</p>
</div>
</div>
<button type="button" onClick={() => setShowCreateModal(false)} className="text-blue-100 hover:text-white hover:bg-blue-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-blue-500 border-opacity-30">
<svg className="w-5 h-5" 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>
{/* Content */}
<div className="p-6 space-y-4">
{error && <div className="text-red-500 mb-2">{error}</div>}
<div>
<label className="block text-xs font-semibold text-slate-700 mb-1">Archivo (.zip)</label>
<input type="file" accept=".zip" className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))} required />
</div>
<div>
<label className="block text-xs font-semibold text-slate-700 mb-1">Contribuyente</label>
<input className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" value={form.contribuyente} onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))} required />
</div>
<div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
<button type="button" onClick={() => setShowCreateModal(false)} className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar</button>
<button type="submit" className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2">Crear</button>
</div>
</div>
</form>
</div>
)}
{/* Modal de confirmación para eliminar */}
<ConfirmModal open={showDeleteModal} onClose={() => setShowDeleteModal(false)} onConfirm={handleDelete} message="¿Seguro que deseas eliminar este datastage?" confirmText="Eliminar" cancelText="Cancelar" />
{/* Modal de edición - estilo Users/Importers */}
{showEditModal && (
<div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
<form onSubmit={handleEdit} className="relative mx-auto w-full max-w-xl bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
{/* Header */}
<div className="bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-t-2xl p-4 text-white border-b-2 border-yellow-400">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="bg-yellow-500 bg-opacity-30 rounded-xl p-2 border border-yellow-400 border-opacity-30">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536M9 13l6-6 3.536 3.536a2 2 0 010 2.828l-7.072 7.072a2 2 0 01-2.828 0l-3.536-3.536a2 2 0 010-2.828l7.072-7.072z" />
</svg>
</div>
<div>
<h3 className="text-lg font-semibold tracking-wide">Editar Datastage</h3>
<p className="text-yellow-200 text-xs font-medium">Actualiza el archivo o el contribuyente</p>
</div>
</div>
<button type="button" onClick={handleCancelEdit} className="text-yellow-100 hover:text-white hover:bg-yellow-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-yellow-400 border-opacity-30">
<svg className="w-5 h-5" 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>
{/* Content */}
<div className="p-6 space-y-4">
{error && <div className="text-red-500 mb-2">{error}</div>}
<div>
<label className="block text-xs font-semibold text-slate-700 mb-1">Archivo (.zip)</label>
<input type="file" accept=".zip" className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" onChange={e => setForm(f => ({ ...f, archivo: e.target.files[0] }))} />
</div>
<div>
<label className="block text-xs font-semibold text-slate-700 mb-1">Contribuyente</label>
<input className="w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-all duration-200 bg-white text-slate-900 placeholder-slate-400 text-sm" value={form.contribuyente} onChange={e => setForm(f => ({ ...f, contribuyente: e.target.value }))} required />
</div>
<div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
<button type="button" onClick={handleCancelEdit} className="w-full sm:w-auto px-6 py-2 border border-slate-300 rounded-md shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar</button>
<button type="submit" className="w-full sm:w-auto px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-yellow-600 to-yellow-800 hover:from-yellow-700 hover:to-yellow-900 focus:ring-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2">Actualizar</button>
</div>
</div>
</form>
</div>
)}
{/* Modal de eliminación - estilo Users/Importers */}
{showDeleteModal && (
<div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
<div className="relative mx-auto w-full max-w-md bg-white rounded-2xl shadow-2xl transform transition-all duration-300 animate-in slide-in-from-bottom-4">
{/* Header */}
<div className="bg-gradient-to-r from-red-700 to-red-900 rounded-t-2xl p-4 text-white border-b-2 border-red-500">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="bg-red-500 bg-opacity-30 rounded-xl p-2 border border-red-400 border-opacity-30">
<svg className="w-5 h-5" 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 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<div>
<h3 className="text-lg font-semibold tracking-wide">Eliminar Datastage</h3>
<p className="text-red-200 text-xs font-medium">Esta acción no se puede deshacer.</p>
</div>
</div>
<button type="button" onClick={() => setShowDeleteModal(false)} className="text-red-100 hover:text-white hover:bg-red-600 transition-colors p-2 hover:bg-opacity-50 rounded-lg border border-red-500 border-opacity-30">
<svg className="w-5 h-5" 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>
{/* Content */}
<div className="p-6 text-center">
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
<svg className="h-6 w-6 text-red-600" 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 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">¿Eliminar este datastage?</h3>
<p className="text-sm text-gray-500 mb-4">¿Seguro que deseas eliminar este datastage? Esta acción no se puede deshacer.</p>
<div className="flex justify-center space-x-3 pt-4">
<button type="button" onClick={() => setShowDeleteModal(false)} className="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 transition-all duration-200">Cancelar</button>
<button type="button" onClick={handleDelete} className="px-6 py-2 border border-transparent rounded-md shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-red-700 to-red-900 hover:from-red-800 hover:to-red-950 focus:ring-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 flex items-center justify-center space-x-2">Eliminar</button>
</div>
</div>
</div>
</div>
)}
{/* Modal de detalle */}
{showDetailModal && selected && (