From 9b95ead6bad26cb7bf6f5679409d54f139fa559d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Feb 2026 08:24:55 +0100
Subject: [PATCH] feat: implement last updated timestamp display in dashboard
 components for improved data freshness indication

---
 app/share/[id]/page.tsx        | 27 +++++++++----------------
 app/sites/[id]/page.tsx        | 37 ++++++++++++++--------------------
 components/dashboard/Chart.tsx | 16 +++++++++++++--
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 087f558..dae6587 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, getPublicPerformanceByPage, type DashboardData, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
-import { formatUpdatedAgo } from '@/lib/utils/format'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@/lib/utils/authErrors'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
@@ -293,22 +292,15 @@ export default function PublicDashboardPage() {
                     </h1>
                  </div>
 
-                 {/* Realtime Indicator & Polling - Desktop */}
-                 <div className="hidden md:flex items-center gap-3 self-end mb-1">
-                    <div className="flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20">
-                      <span className="relative flex h-2 w-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-                      </span>
-                      <span className="text-sm font-medium text-green-700 dark:text-green-400">
-                        {realtime_visitors} current visitors
-                      </span>
-                    </div>
-                    {lastUpdatedAt !== null && (
-                      <span className="text-xs text-neutral-500 dark:text-neutral-400" title="Data refreshes every 30 seconds">
-                        Updated {formatUpdatedAgo(lastUpdatedAt)}
-                      </span>
-                    )}
+                 {/* Realtime Indicator - Desktop */}
+                 <div className="hidden md:flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20 self-end mb-1">
+                   <span className="relative flex h-2 w-2">
+                     <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
+                     <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                   </span>
+                   <span className="text-sm font-medium text-green-700 dark:text-green-400">
+                     {realtime_visitors} current visitors
+                   </span>
                  </div>
               </div>
             </div>
@@ -388,6 +380,7 @@ export default function PublicDashboardPage() {
             setTodayInterval={setTodayInterval}
             multiDayInterval={multiDayInterval}
             setMultiDayInterval={setMultiDayInterval}
+            lastUpdatedAt={lastUpdatedAt}
           />
         </div>
 
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 676f9d4..ac9bd4c 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -6,7 +6,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getSite, type Site } from '@/lib/api/sites'
 import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getCampaigns, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
-import { formatNumber, formatDuration, formatUpdatedAgo, getDateRange } from '@/lib/utils/format'
+import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@/lib/utils/authErrors'
 import { LoadingOverlay, Button } from '@ciphera-net/ui'
@@ -259,27 +259,19 @@ export default function SiteDashboardPage() {
               </p>
             </div>
             
-            <div className="flex items-center gap-3">
-              {/* Realtime Indicator */}
-              <button
-                onClick={() => router.push(`/sites/${siteId}/realtime`)}
-                className="flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20 hover:bg-green-500/20 transition-colors cursor-pointer"
-              >
-                <span className="relative flex h-2 w-2">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
-                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-                </span>
-                <span className="text-sm font-medium text-green-700 dark:text-green-400">
-                  {realtime} current visitors
-                </span>
-              </button>
-              {/* Polling indicator */}
-              {lastUpdatedAt !== null && (
-                <span className="text-xs text-neutral-500 dark:text-neutral-400" title="Data refreshes every 30 seconds">
-                  Updated {formatUpdatedAgo(lastUpdatedAt)}
-                </span>
-              )}
-            </div>
+            {/* Realtime Indicator */}
+            <button
+              onClick={() => router.push(`/sites/${siteId}/realtime`)}
+              className="flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20 hover:bg-green-500/20 transition-colors cursor-pointer"
+            >
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+              </span>
+              <span className="text-sm font-medium text-green-700 dark:text-green-400">
+                {realtime} current visitors
+              </span>
+            </button>
           </div>
 
             <div className="flex items-center gap-2">
@@ -379,6 +371,7 @@ export default function SiteDashboardPage() {
           setTodayInterval={setTodayInterval}
           multiDayInterval={multiDayInterval}
           setMultiDayInterval={setMultiDayInterval}
+          lastUpdatedAt={lastUpdatedAt}
         />
       </div>
 
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index b0c74ff..b94e468 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -13,7 +13,7 @@ import {
   ReferenceLine,
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
-import { formatNumber, formatDuration } from '@/lib/utils/format'
+import { formatNumber, formatDuration, formatUpdatedAgo } from '@/lib/utils/format'
 import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 
@@ -69,6 +69,8 @@ interface ChartProps {
   setMultiDayInterval: (interval: 'hour' | 'day') => void
   /** Optional: callback when user requests chart export (parent can open ExportModal or handle export) */
   onExportChart?: () => void
+  /** Optional: timestamp of last data fetch for "Live · Xs ago" indicator */
+  lastUpdatedAt?: number | null
 }
 
 type MetricType = 'pageviews' | 'visitors' | 'bounce_rate' | 'avg_duration'
@@ -263,6 +265,7 @@ export default function Chart({
   multiDayInterval,
   setMultiDayInterval,
   onExportChart,
+  lastUpdatedAt,
 }: ChartProps) {
   const [metric, setMetric] = useState<MetricType>('visitors')
   const [showComparison, setShowComparison] = useState(false)
@@ -406,10 +409,19 @@ export default function Chart({
   return (
     <div
       ref={chartContainerRef}
-      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm"
+      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm relative"
       role="region"
       aria-label={`Analytics chart showing ${metricLabel} over time`}
     >
+      {/* * Subtle live/updated indicator in bottom-right corner */}
+      {lastUpdatedAt != null && (
+        <div
+          className="absolute bottom-3 right-6 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
+          title="Data refreshes every 30 seconds"
+        >
+          Live · {formatUpdatedAgo(lastUpdatedAt)}
+        </div>
+      )}
       {/* Stats Header (Interactive Tabs) */}
       <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-neutral-200 dark:divide-neutral-800 border-b border-neutral-200 dark:border-neutral-800">
         {metrics.map((item) => (