Fix ExecutionCard Refresh

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 */}
       <div className={`h-1 w-full ${enEjecucion ? 'bg-green-500' : 'bg-gray-300'}`} />
 
-      <div className="p-4 flex-1 flex flex-col"> {/* Padding reducido a p-4 */}
+      <div className="p-4 flex-1 flex flex-col">
 
         {/* Encabezado Compacto */}
-        <div className="flex justify-between items-center mb-3"> {/* Margin reducido */}
+        <div className="flex justify-between items-center mb-3">
           <div className="flex items-center gap-2">
             <Clock className="w-4 h-4 text-gray-400" />
             <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">
@@ -37,14 +51,14 @@ export default function ExecutionCard({ ultimaEjecucion, proximaEjecucion, enEje
           </div>
 
           <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${enEjecucion
-              ? 'bg-green-50 text-green-700 border-green-200'
-              : 'bg-gray-50 text-gray-600 border-gray-200'
+            ? 'bg-green-50 text-green-700 border-green-200'
+            : 'bg-gray-50 text-gray-600 border-gray-200'
             }`}>
             {enEjecucion ? 'AUTO' : 'MANUAL'}
           </span>
         </div>
 
-        <div className="space-y-4 pl-1 flex-1 flex flex-col justify-center"> {/* Espaciado reducido a space-y-4 */}
+        <div className="space-y-4 pl-1 flex-1 flex flex-col justify-center">
 
           {/* ÚLTIMA EJECUCIÓN */}
           <div className="relative pl-5 border-l-2 border-gray-100">