From 16f24991a48f1fd1f985b14da347ef034ef0d7b3 Mon Sep 17 00:00:00 2001
From: Matthias Meister <meister.matthias86@gmail.com>
Date: Fri, 3 Apr 2026 18:01:16 +0200
Subject: [PATCH] fix(dashboard): make recent transaction time formatting pure

---
 components/dashboard/recent-transactions.tsx | 21 ++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/recent-transactions.tsx b/components/dashboard/recent-transactions.tsx
index 589e5a1..70fd0c8 100644
--- a/components/dashboard/recent-transactions.tsx
+++ b/components/dashboard/recent-transactions.tsx
@@ -3,6 +3,7 @@
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useFormatter } from "next-intl";
 import { Activity, Coins } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { api } from "@/convex/_generated/api";
@@ -46,16 +47,32 @@ function truncatedDescription(text: string, maxLen = 40) {
 
 export function RecentTransactions() {
   const format = useFormatter();
+  const [now, setNow] = useState<number | null>(null);
   const transactions = useAuthQuery(api.credits.getRecentTransactions, {
     limit: 10,
   });
 
+  useEffect(() => {
+    const updateNow = () => {
+      setNow(Date.now());
+    };
+
+    const initialTimeout = window.setTimeout(updateNow, 0);
+
+    const interval = window.setInterval(updateNow, 60_000);
+
+    return () => {
+      window.clearTimeout(initialTimeout);
+      window.clearInterval(interval);
+    };
+  }, []);
+
   const formatEurFromCents = (cents: number) =>
     format.number(cents / 100, { style: "currency", currency: "EUR" });
 
   const formatRelativeTime = (timestamp: number) => {
-    const now = Date.now();
-    const diff = now - timestamp;
+    const referenceNow = now ?? timestamp;
+    const diff = referenceNow - timestamp;
     const minutes = Math.floor(diff / 60000);
     const hours = Math.floor(diff / 3600000);
     const days = Math.floor(diff / 86400000);