feat(users): add auto refresh

Author: x0sina

dashboard/public/statics/locales/en.json

@@ -1200,6 +1200,19 @@
   "usersTable.noUserMatched": "It seems there is no user matched with what you are looking for",
   "usersTable.status": "Status",
   "usersTable.total": "Total",
+  "autoRefresh": {
+    "label": "Auto refresh",
+    "currentSelection": "Current: {{value}}",
+    "off": "Manual refresh only",
+    "offShort": "Off",
+    "shortSeconds": "{{count}}s",
+    "shortMinutes": "{{count}}m",
+    "15Seconds": "Every 15 seconds",
+    "30Seconds": "Every 30 seconds",
+    "1Minute": "Every minute",
+    "5Minutes": "Every 5 minutes",
+    "refreshNow": "Refresh now"
+  },
   "statistics.system": "System",
   "statistics.totalTraffic": "Total Traffic",
   "statistics.networkSpeed": "Network Speed",

dashboard/public/statics/locales/fa.json

@@ -1041,6 +1041,19 @@
   "usersTable.noUserMatched": "به‌نظر میرسه کاربری که جستجو کردید، وجود ندارد",
   "usersTable.status": "وضعیت",
   "usersTable.total": "مجموع",
+  "autoRefresh": {
+    "label": "به‌روزرسانی خودکار",
+    "currentSelection": "حالت فعلی: {{value}}",
+    "off": "فقط به‌روزرسانی دستی",
+    "offShort": "خاموش",
+    "shortSeconds": "{{count}} ث",
+    "shortMinutes": "{{count}} د",
+    "15Seconds": "هر ۱۵ ثانیه",
+    "30Seconds": "هر ۳۰ ثانیه",
+    "1Minute": "هر ۱ دقیقه",
+    "5Minutes": "هر ۵ دقیقه",
+    "refreshNow": "به‌روزرسانی دستی"
+  },
   "statistics.system": "سیستم",
   "statistics.totalTraffic": "کل ترافیک",
   "statistics.networkSpeed": "سرعت شبکه",

dashboard/public/statics/locales/ru.json

@@ -832,6 +832,19 @@
   "usersTable.noUserMatched": "Похоже, нет пользователя, соответствующего вашему запросу",
   "usersTable.status": "Статус",
   "usersTable.total": "Всего",
+  "autoRefresh": {
+    "label": "Автообновление",
+    "currentSelection": "Текущий режим: {{value}}",
+    "off": "Только ручное обновление",
+    "offShort": "Выкл.",
+    "shortSeconds": "{{count}} с",
+    "shortMinutes": "{{count}} мин",
+    "15Seconds": "Каждые 15 секунд",
+    "30Seconds": "Каждые 30 секунд",
+    "1Minute": "Каждую минуту",
+    "5Minutes": "Каждые 5 минут",
+    "refreshNow": "Обновить сейчас"
+  },
   "statistics.system": "Система",
   "statistics.totalTraffic": "Общий трафик",
   "statistics.networkSpeed": "Скорость сети",

dashboard/public/statics/locales/zh.json

@@ -1148,6 +1148,19 @@
   "usersTable.status": "状态",
   "usersTable.sortByExpire": "按过期时间排序",
   "usersTable.total": "总共",
+  "autoRefresh": {
+    "label": "自动刷新",
+    "currentSelection": "当前：{{value}}",
+    "off": "仅手动刷新",
+    "offShort": "关",
+    "shortSeconds": "{{count}} 秒",
+    "shortMinutes": "{{count}} 分",
+    "15Seconds": "每 15 秒",
+    "30Seconds": "每 30 秒",
+    "1Minute": "每 1 分钟",
+    "5Minutes": "每 5 分钟",
+    "refreshNow": "立即刷新"
+  },
   "statistics.system": "系统",
   "statistics.totalTraffic": "总流量",
   "statistics.networkSpeed": "网络速度",

dashboard/src/components/users/filters.tsx

@@ -8,13 +8,14 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { debounce } from 'es-toolkit'
-import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown } from 'lucide-react'
-import { useState, useRef, useEffect } from 'react'
+import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown, Check } from 'lucide-react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetUsers, UserStatus } from '@/service/api'
 import { RefetchOptions } from '@tanstack/react-query'
 import { LoaderCircle } from 'lucide-react'
 import { UseFormReturn } from 'react-hook-form'
+import { getUsersAutoRefreshIntervalSeconds, setUsersAutoRefreshIntervalSeconds } from '@/utils/userPreferenceStorage'
 
 // Sort configuration to eliminate duplication
 const sortSections = [
@@ -47,6 +48,14 @@ const sortSections = [
   },
 ] as const
 
+const autoRefreshOptions = [
+  { value: 0, labelKey: 'autoRefresh.off' },
+  { value: 15, labelKey: 'autoRefresh.15Seconds' },
+  { value: 30, labelKey: 'autoRefresh.30Seconds' },
+  { value: 60, labelKey: 'autoRefresh.1Minute' },
+  { value: 300, labelKey: 'autoRefresh.5Minutes' },
+] as const
+
 interface FiltersProps {
   filters: {
     search?: string
@@ -69,8 +78,47 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
   const dir = useDirDetection()
   const [search, setSearch] = useState(filters.search || '')
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const userQuery = useGetUsers(filters)
-  const handleRefetch = refetch || userQuery.refetch
+  const [autoRefreshInterval, setAutoRefreshInterval] = useState<number>(() => getUsersAutoRefreshIntervalSeconds())
+  const { refetch: queryRefetch } = useGetUsers(filters, {
+    query: {
+      refetchOnWindowFocus: false,
+    },
+  })
+  const refetchUsers = useCallback(() => {
+    const refetchFn = refetch ?? queryRefetch
+    return refetchFn()
+  }, [refetch, queryRefetch])
+  useEffect(() => {
+    const persistedValue = getUsersAutoRefreshIntervalSeconds()
+    setAutoRefreshInterval(prev => (prev === persistedValue ? prev : persistedValue))
+  }, [])
+  useEffect(() => {
+    if (!autoRefreshInterval) return
+    const intervalId = setInterval(() => {
+      refetchUsers()
+    }, autoRefreshInterval * 1000)
+    return () => clearInterval(intervalId)
+  }, [autoRefreshInterval, refetchUsers])
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible' && autoRefreshInterval > 0) {
+        refetchUsers()
+      }
+    }
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [autoRefreshInterval, refetchUsers])
+  const currentAutoRefreshOption = autoRefreshOptions.find(option => option.value === autoRefreshInterval) ?? autoRefreshOptions[0]
+  const autoRefreshShortLabel =
+    autoRefreshInterval === 0
+      ? t('autoRefresh.offShort')
+      : autoRefreshInterval < 60
+        ? t('autoRefresh.shortSeconds', { count: autoRefreshInterval })
+        : t('autoRefresh.shortMinutes', { count: Math.round(autoRefreshInterval / 60) })
+  const currentAutoRefreshDescription = t(currentAutoRefreshOption.labelKey)
   const onFilterChangeRef = useRef(onFilterChange)
 
   // Keep the ref in sync with the prop
@@ -114,13 +162,18 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
   const handleRefreshClick = async () => {
     setIsRefreshing(true)
     try {
-      await handleRefetch()
+      await refetchUsers()
     } finally {
       // Instant response - no delay
       setIsRefreshing(false)
     }
   }
 
+  const handleAutoRefreshChange = (seconds: number) => {
+    setUsersAutoRefreshIntervalSeconds(seconds)
+    setAutoRefreshInterval(seconds)
+  }
+
   const handleOpenAdvanceSearch = () => {
     advanceSearchOnOpen(true)
   }
@@ -224,10 +277,62 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
         </div>
       )}
       {/* Refresh Button */}
-      <div className="flex h-full items-center gap-2">
-        <Button size="icon-md" onClick={handleRefreshClick} variant="ghost" className="flex items-center gap-2 border" disabled={isRefreshing}>
+      <div className="flex h-full items-center gap-0">
+        <Button
+          size="icon-md"
+          onClick={handleRefreshClick}
+          variant="ghost"
+          className={cn('relative flex items-center gap-2 border', dir === 'rtl' ? 'rounded-l-none border-l-0' : 'rounded-r-none')}
+          aria-label={t('autoRefresh.refreshNow')}
+          title={t('autoRefresh.refreshNow')}
+          disabled={isRefreshing}
+        >
           <RefreshCw className={cn('h-4 w-4', isRefreshing && 'animate-spin')} />
+          {autoRefreshInterval > 0 && <div className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-primary" />}
         </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon-md"
+              variant="ghost"
+              className={cn('relative flex items-center gap-2 border', dir === 'rtl' ? 'rounded-r-none' : 'rounded-l-none border-l-0')}
+              aria-label={t('autoRefresh.label')}
+              title={`${t('autoRefresh.label')} (${autoRefreshShortLabel})`}
+            >
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-52 md:w-56">
+            <DropdownMenuLabel className="flex flex-col gap-0.5 px-2 py-1.5 text-xs text-muted-foreground md:px-3 md:py-2">
+              <span>{t('autoRefresh.label')}</span>
+              <span className="text-[11px] md:text-xs">{t('autoRefresh.currentSelection', { value: currentAutoRefreshDescription })}</span>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => void handleRefreshClick()}
+              disabled={isRefreshing}
+              className="flex items-center gap-2 px-2 py-1.5 text-xs md:px-3 md:py-2"
+            >
+              <RefreshCw className={cn('h-3.5 w-3.5 flex-shrink-0', isRefreshing && 'animate-spin')} />
+              <span className="truncate">{t('autoRefresh.refreshNow')}</span>
+              {isRefreshing && <LoaderCircle className="ml-auto h-3.5 w-3.5 animate-spin" />}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {autoRefreshOptions.map(option => {
+              const isActive = option.value === autoRefreshInterval
+              return (
+                <DropdownMenuItem
+                  key={option.value}
+                  onSelect={() => handleAutoRefreshChange(option.value)}
+                  className={cn('flex items-center gap-2 whitespace-nowrap px-2 py-1.5 text-xs md:px-3 md:py-2', isActive && 'bg-accent')}
+                >
+                  <span>{t(option.labelKey)}</span>
+                  {isActive && <Check className="ml-auto h-3 w-3 flex-shrink-0" />}
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </div>
   )

dashboard/src/utils/userPreferenceStorage.ts

@@ -2,6 +2,9 @@ const NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY = 'pasarguard-num-users-per-page'
 const NUM_ADMINS_PER_PAGE_LOCAL_STORAGE_KEY = 'pasarguard-num-admins-per-page'
 const NUM_ITEMS_PER_PAGE_DEFAULT = 10
 
+const USERS_AUTO_REFRESH_INTERVAL_KEY = 'pasarguard-users-auto-refresh-interval'
+const DEFAULT_USERS_AUTO_REFRESH_INTERVAL_SECONDS = 0
+
 // Generic function for any table type
 export const getItemsPerPageLimitSize = (tableType: 'users' | 'admins' = 'users') => {
   const storageKey = tableType === 'users' ? NUM_USERS_PER_PAGE_LOCAL_STORAGE_KEY : NUM_ADMINS_PER_PAGE_LOCAL_STORAGE_KEY
@@ -20,3 +23,14 @@ export const setUsersPerPageLimitSize = (value: string) => setItemsPerPageLimitS
 
 export const getAdminsPerPageLimitSize = () => getItemsPerPageLimitSize('admins')
 export const setAdminsPerPageLimitSize = (value: string) => setItemsPerPageLimitSize(value, 'admins')
+
+export const getUsersAutoRefreshIntervalSeconds = () => {
+  const storedValue = typeof localStorage !== 'undefined' && localStorage.getItem(USERS_AUTO_REFRESH_INTERVAL_KEY)
+  const parsed = storedValue ? parseInt(storedValue, 10) : DEFAULT_USERS_AUTO_REFRESH_INTERVAL_SECONDS
+  return Number.isNaN(parsed) ? DEFAULT_USERS_AUTO_REFRESH_INTERVAL_SECONDS : parsed
+}
+
+export const setUsersAutoRefreshIntervalSeconds = (seconds: number) => {
+  if (typeof localStorage === 'undefined') return
+  localStorage.setItem(USERS_AUTO_REFRESH_INTERVAL_KEY, seconds.toString())
+}