From 01461d031b22dac50a9fb07499743a5133f77599 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Sun, 19 Oct 2025 02:02:34 -0300
Subject: [PATCH] =?UTF-8?q?Machine=20details:=20live-update=20'=C3=9Altima?=
 =?UTF-8?q?=20atualiza=C3=A7=C3=A3o'=20every=20second?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/machines/admin-machines-overview.tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/machines/admin-machines-overview.tsx b/src/components/admin/machines/admin-machines-overview.tsx
index 7372d4d..3f75ac1 100644
--- a/src/components/admin/machines/admin-machines-overview.tsx
+++ b/src/components/admin/machines/admin-machines-overview.tsx
@@ -993,6 +993,17 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
   const metadata = machine?.inventory ?? null
   const metrics = machine?.metrics ?? null
   const metricsCapturedAt = useMemo(() => getMetricsTimestamp(metrics), [metrics])
+  // Live refresh the relative time label every second when we have a capture timestamp
+  const [relativeTick, setRelativeTick] = useState(0)
+  useEffect(() => {
+    if (!metricsCapturedAt) return
+    const id = setInterval(() => setRelativeTick((t) => t + 1), 1000)
+    return () => clearInterval(id)
+  }, [metricsCapturedAt])
+  const lastUpdateRelative = useMemo(
+    () => (metricsCapturedAt ? formatRelativeTime(metricsCapturedAt) : null),
+    [metricsCapturedAt, relativeTick]
+  )
   const hardware = metadata?.hardware
   const network = metadata?.network ?? null
   const networkInterfaces = Array.isArray(network) ? network : null
@@ -1547,9 +1558,9 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
             <section className="space-y-2">
               <div className="flex flex-wrap items-center gap-2">
                 <h4 className="text-sm font-semibold">Métricas recentes</h4>
-                {metricsCapturedAt ? (
+                {lastUpdateRelative ? (
                   <span className="text-xs font-medium text-muted-foreground">
-                    Última atualização {formatRelativeTime(metricsCapturedAt)}
+                    Última atualização {lastUpdateRelative}
                   </span>
                 ) : null}
               </div>