From 179b0ee055a40b891086860dd8909693fdb24e05 Mon Sep 17 00:00:00 2001
From: romysaputrasihananda <romysaputrasihanandaa@gmail.com>
Date: Thu, 11 Jun 2026 15:55:45 +0700
Subject: [PATCH] feat(web/trades): force-dynamic + auto-refresh every 30s

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/app/trades/page.tsx            |  7 ++++++-
 web/components/TradesRefresher.tsx | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 web/components/TradesRefresher.tsx

diff --git a/web/app/trades/page.tsx b/web/app/trades/page.tsx
index e80d945..b0dd83f 100644
--- a/web/app/trades/page.tsx
+++ b/web/app/trades/page.tsx
@@ -1,8 +1,9 @@
 import { getAccount, getDeals, type Deal } from "@/lib/mt5";
 import { formatCurrency, formatDate } from "@/lib/format";
 import EquityChart from "@/components/EquityChart";
+import TradesRefresher from "@/components/TradesRefresher";
 
-export const revalidate = 60;
+export const dynamic = "force-dynamic";
 const MAGIC = 19730;
 
 export default async function TradesPage() {
@@ -42,6 +43,10 @@ export default async function TradesPage() {
         <p className="text-[15px] text-ink-sub">
           All closed trades from ARES · magic {MAGIC}
         </p>
+        <div className="mt-3 flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-bull pulse-dot" />
+          <TradesRefresher />
+        </div>
       </section>
 
       {error ? (
diff --git a/web/components/TradesRefresher.tsx b/web/components/TradesRefresher.tsx
new file mode 100644
index 0000000..a147f39
--- /dev/null
+++ b/web/components/TradesRefresher.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function TradesRefresher() {
+  const router = useRouter();
+  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      router.refresh();
+      setLastUpdated(new Date());
+    }, 30_000);
+    return () => clearInterval(id);
+  }, [router]);
+
+  return (
+    <span className="text-xs text-ink-ter font-mono">
+      Updated {lastUpdated.toLocaleTimeString()}
+    </span>
+  );
+}