refactor: optimize data loading and auto-refresh logic in dashboard components, and enhance performance with useCallback for better efficiency

app/sites/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getSite, type Site } from '@/lib/api/sites'
@@ -128,15 +128,13 @@ export default function SiteDashboardPage() {
   }, [todayInterval, multiDayInterval, isSettingsLoaded]) // dateRange is handled in saveSettings/onChange
 
   useEffect(() => {
-    if (isSettingsLoaded) {
-      loadData()
-    }
+    if (isSettingsLoaded) loadData()
     const interval = setInterval(() => {
       loadData(true)
       loadRealtime()
-    }, 30000) // * Chart, KPIs, and realtime count update every 30 seconds
+    }, 30000)
     return () => clearInterval(interval)
-  }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded])
+  }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded, loadData, loadRealtime])
 
   // * Tick every 1s so "Live · Xs ago" counts in real time
   useEffect(() => {
@@ -144,31 +142,20 @@ export default function SiteDashboardPage() {
     return () => clearInterval(interval)
   }, [])
 
-  const getPreviousDateRange = (start: string, end: string) => {
+  const getPreviousDateRange = useCallback((start: string, end: string) => {
     const startDate = new Date(start)
     const endDate = new Date(end)
     const duration = endDate.getTime() - startDate.getTime()
-    
-    // * If duration is 0 (Today), set previous range to yesterday
     if (duration === 0) {
       const prevEnd = new Date(startDate.getTime() - 24 * 60 * 60 * 1000)
-      const prevStart = prevEnd
-      return {
-        start: prevStart.toISOString().split('T')[0],
-        end: prevEnd.toISOString().split('T')[0]
-      }
+      return { start: prevEnd.toISOString().split('T')[0], end: prevEnd.toISOString().split('T')[0] }
     }
-
     const prevEnd = new Date(startDate.getTime() - 24 * 60 * 60 * 1000)
     const prevStart = new Date(prevEnd.getTime() - duration)
-    
-    return {
-      start: prevStart.toISOString().split('T')[0],
-      end: prevEnd.toISOString().split('T')[0]
-    }
-  }
+    return { start: prevStart.toISOString().split('T')[0], end: prevEnd.toISOString().split('T')[0] }
+  }, [])
 
-  const loadData = async (silent = false) => {
+  const loadData = useCallback(async (silent = false) => {
     try {
       if (!silent) setLoading(true)
       const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
@@ -217,16 +204,16 @@ export default function SiteDashboardPage() {
     } finally {
       if (!silent) setLoading(false)
     }
-  }
+  }, [siteId, dateRange, todayInterval, multiDayInterval])
 
-  const loadRealtime = async () => {
+  const loadRealtime = useCallback(async () => {
     try {
       const data = await getRealtime(siteId)
       setRealtime(data.visitors)
     } catch (error) {
       // Silently fail for realtime updates
     }
-  }
+  }, [siteId])
 
   if (loading) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" />