102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { useMutation } from '@tanstack/react-query';
|
||
|
|
import { Calendar, PlayCircle, Loader2 } from 'lucide-react';
|
||
|
|
import { toast } from 'sonner';
|
||
|
|
import { operacionesApi } from '../../services/api';
|
||
|
|
|
||
|
|
interface EjecucionManualProps {
|
||
|
|
onExecute: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EjecucionManual({ onExecute }: EjecucionManualProps) {
|
||
|
|
const [fechaDesde, setFechaDesde] = useState<string>(
|
||
|
|
new Date().toISOString().split('T')[0]
|
||
|
|
);
|
||
|
|
|
||
|
|
const ejecutarMutation = useMutation({
|
||
|
|
mutationFn: () => operacionesApi.ejecutarManual({ fechaDesde }),
|
||
|
|
onSuccess: () => {
|
||
|
|
toast.success('✓ Proceso iniciado correctamente');
|
||
|
|
toast.info('Revisa los eventos para ver el progreso');
|
||
|
|
onExecute();
|
||
|
|
},
|
||
|
|
onError: (error) => {
|
||
|
|
toast.error(`Error al ejecutar: ${error.message}`);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleEjecutar = () => {
|
||
|
|
if (!fechaDesde) {
|
||
|
|
toast.error('Debes seleccionar una fecha');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
ejecutarMutation.mutate();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="card">
|
||
|
|
<h3 className="text-xl font-bold text-gray-900 mb-4">
|
||
|
|
Ejecución Manual
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-sm text-gray-600 mb-6">
|
||
|
|
Ejecuta el proceso inmediatamente sin esperar al cronograma programado.
|
||
|
|
Selecciona la fecha desde la cual buscar facturas.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Selector de fecha */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="fechaDesde" className="label-text">
|
||
|
|
Fecha desde:
|
||
|
|
</label>
|
||
|
|
<div className="relative">
|
||
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
|
|
<Calendar className="w-5 h-5 text-gray-400" />
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="date"
|
||
|
|
id="fechaDesde"
|
||
|
|
value={fechaDesde}
|
||
|
|
onChange={(e) => setFechaDesde(e.target.value)}
|
||
|
|
max={new Date().toISOString().split('T')[0]}
|
||
|
|
className="input-field pl-10"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">
|
||
|
|
Se procesarán todas las facturas desde esta fecha hasta hoy
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Botón de ejecución */}
|
||
|
|
<button
|
||
|
|
onClick={handleEjecutar}
|
||
|
|
disabled={ejecutarMutation.isPending || !fechaDesde}
|
||
|
|
className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
>
|
||
|
|
{ejecutarMutation.isPending ? (
|
||
|
|
<>
|
||
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
||
|
|
Ejecutando proceso...
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<PlayCircle className="w-5 h-5" />
|
||
|
|
Ejecutar Ahora
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Información adicional */}
|
||
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
|
|
<p className="text-sm text-blue-800">
|
||
|
|
<strong>Nota:</strong> El proceso se ejecutará en segundo plano. Los resultados
|
||
|
|
aparecerán en la tabla de eventos más abajo.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|