diff --git a/frontend/src/components/Dashboard/ExecutionCard.tsx b/frontend/src/components/Dashboard/ExecutionCard.tsx index 3b5bcea..45858d7 100644 --- a/frontend/src/components/Dashboard/ExecutionCard.tsx +++ b/frontend/src/components/Dashboard/ExecutionCard.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react'; // Importar useState y useEffect import { Clock, PauseCircle, Hourglass } from 'lucide-react'; import { format, formatDistanceToNow, isPast, addSeconds } from 'date-fns'; import { es } from 'date-fns/locale'; @@ -9,15 +10,28 @@ interface ExecutionCardProps { } export default function ExecutionCard({ ultimaEjecucion, proximaEjecucion, enEjecucion }: ExecutionCardProps) { + // Estado para forzar la actualización de la UI cada X segundos + const [, setTick] = useState(0); + + useEffect(() => { + // Actualizar cada 5 segundos para que el "hace X tiempo" y el estado "En cola" + // se sientan en tiempo real sin esperar al refetch del backend. + const interval = setInterval(() => { + setTick(t => t + 1); + }, 5000); + + return () => clearInterval(interval); + }, []); const formatDate = (dateString: string) => { - return format(new Date(dateString), "dd/MM, HH:mm", { locale: es }); // Formato más corto + return format(new Date(dateString), "dd/MM, HH:mm", { locale: es }); }; const formatRelative = (dateString: string) => { return formatDistanceToNow(new Date(dateString), { addSuffix: true, locale: es }); }; + // Esta lógica se recalculará cada 5 segundos gracias al setTick const isOverdue = proximaEjecucion ? isPast(addSeconds(new Date(proximaEjecucion), -10)) : false; return ( @@ -25,10 +39,10 @@ export default function ExecutionCard({ ultimaEjecucion, proximaEjecucion, enEje {/* Barra de estado */}
-