Implement dynamic data range interval and notification panel with redirection highlights

src/components/layout/DashboardLayout.tsx

@@ -7,16 +7,48 @@ import { Header } from "./Header";
 export function DashboardLayout({ children }: { children: ReactNode }) {
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [lastUpdate, setLastUpdate] = useState<string>("—");
+  const [intervalText, setIntervalText] = useState<string>("");
+
+  const fetchDataIntervalRange = () => {
+    fetch('/api/dashboard/data-interval')
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.ok && res.data) {
+          const { start, end } = res.data;
+          if (start && end) {
+            const sDate = new Date(start);
+            const eDate = new Date(end);
+            const options: Intl.DateTimeFormatOptions = {
+              day: 'numeric',
+              month: 'short',
+              year: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+              hour12: false
+            };
+            // e.g. "1 Jul 2026 04:57 - 1 Jul 2026 08:42"
+            setIntervalText(`${sDate.toLocaleString('id-ID', options)} - ${eDate.toLocaleString('id-ID', options)}`);
+          }
+        }
+      })
+      .catch(() => {});
+  };
 
   useEffect(() => {
-    setLastUpdate(new Date().toLocaleString('id-ID'));
+    const updateTime = new Date().toLocaleString('id-ID');
+    setLastUpdate(updateTime);
+    fetchDataIntervalRange();
   }, []);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
-    // Simulate API refresh
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    setLastUpdate(new Date().toLocaleString('id-ID'));
+    // Poll updates on backend
+    try {
+      await fetch('/api/dashboard/refresh', { method: 'POST' });
+    } catch {}
+    const updateTime = new Date().toLocaleString('id-ID');
+    setLastUpdate(updateTime);
+    fetchDataIntervalRange();
     setIsRefreshing(false);
   };
 
@@ -27,7 +59,8 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
         <Header 
           lastUpdate={lastUpdate} 
           isRefreshing={isRefreshing} 
-          onRefresh={handleRefresh} 
+          onRefresh={handleRefresh}
+          intervalText={intervalText}
         />
         <main className="flex-1 overflow-y-auto bg-[#0d1117] p-6">
           <div className="mx-auto max-w-7xl space-y-6">