fix(users-table): url params

x0sina · x0sina · commit f7cdea0c9e00 · 2025-11-22T12:10:51.000+03:30
diff --git a/dashboard/src/components/dialogs/user-subscription-clients-modal.tsx b/dashboard/src/components/dialogs/user-subscription-clients-modal.tsx
@@ -27,21 +27,29 @@ const formatTimeAgo = (timestamp: number, t: (key: string, options?: Record<stri
     return t('justNow', { defaultValue: 'Just now' })
   }
 
-  const duration = dayjs.duration(diffInSeconds, 'seconds')
+  // Use calendar-aware diff methods for accurate calculations
+  // pastTime is always earlier than currentTime
+  const years = Math.abs(currentTime.diff(pastTime, 'year'))
+  const months = Math.abs(currentTime.diff(pastTime.add(years, 'year'), 'month'))
+  const days = Math.abs(currentTime.diff(pastTime.add(years, 'year').add(months, 'month'), 'day'))
+  const hours = Math.abs(currentTime.diff(pastTime.add(years, 'year').add(months, 'month').add(days, 'day'), 'hour'))
+  const minutes = Math.abs(currentTime.diff(pastTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour'), 'minute'))
+  const seconds = Math.abs(currentTime.diff(pastTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour').add(minutes, 'minute'), 'second'))
+
   let timeText = ''
 
-  if (duration.years() > 0) {
-    timeText = `${duration.years()} ${t(`time.${duration.years() !== 1 ? 'years' : 'year'}`)} ${t('time.ago')}`
-  } else if (duration.months() > 0) {
-    timeText = `${duration.months()} ${t(`time.${duration.months() !== 1 ? 'months' : 'month'}`)} ${t('time.ago')}`
-  } else if (duration.days() > 0) {
-    timeText = `${duration.days()} ${t(`time.${duration.days() !== 1 ? 'days' : 'day'}`)} ${t('time.ago')}`
-  } else if (duration.hours() > 0) {
-    timeText = `${duration.hours()} ${t(`time.${duration.hours() !== 1 ? 'hours' : 'hour'}`)} ${t('time.ago')}`
-  } else if (duration.minutes() > 0) {
-    timeText = `${duration.minutes()} ${t(`time.${duration.minutes() !== 1 ? 'mins' : 'min'}`)} ${t('time.ago')}`
+  if (years > 0) {
+    timeText = `${years} ${t(`time.${years !== 1 ? 'years' : 'year'}`)} ${t('time.ago')}`
+  } else if (months > 0) {
+    timeText = `${months} ${t(`time.${months !== 1 ? 'months' : 'month'}`)} ${t('time.ago')}`
+  } else if (days > 0) {
+    timeText = `${days} ${t(`time.${days !== 1 ? 'days' : 'day'}`)} ${t('time.ago')}`
+  } else if (hours > 0) {
+    timeText = `${hours} ${t(`time.${hours !== 1 ? 'hours' : 'hour'}`)} ${t('time.ago')}`
+  } else if (minutes > 0) {
+    timeText = `${minutes} ${t(`time.${minutes !== 1 ? 'mins' : 'min'}`)} ${t('time.ago')}`
   } else {
-    timeText = `${duration.seconds()} ${t(`time.${duration.seconds() !== 1 ? 'seconds' : 'second'}`)} ${t('time.ago')}`
+    timeText = `${seconds} ${t(`time.${seconds !== 1 ? 'seconds' : 'second'}`)} ${t('time.ago')}`
   }
 
   return timeText
diff --git a/dashboard/src/components/users/columns.tsx b/dashboard/src/components/users/columns.tsx
@@ -54,16 +54,26 @@ export const setupColumns = ({
         if (isOnline) {
           return null
         } else {
-          const duration = dayjs.duration(diffInSeconds, 'seconds')
+          // Use calendar-aware diff methods for accurate calculations
+          const years = Math.abs(currentTime.diff(lastOnlineTime, 'year'))
+          const months = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year'), 'month'))
+          const days = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month'), 'day'))
+          const hours = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day'), 'hour'))
+          const minutes = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour'), 'minute'))
+          const seconds = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour').add(minutes, 'minute'), 'second'))
 
-          if (duration.days() > 0) {
-            return `${duration.days()}d`
-          } else if (duration.hours() > 0) {
-            return `${duration.hours()}h`
-          } else if (duration.minutes() > 0) {
-            return `${duration.minutes()}m`
+          if (years > 0) {
+            return `${years}y`
+          } else if (months > 0) {
+            return `${months}mo`
+          } else if (days > 0) {
+            return `${days}d`
+          } else if (hours > 0) {
+            return `${hours}h`
+          } else if (minutes > 0) {
+            return `${minutes}m`
           } else {
-            return `${duration.seconds()}s`
+            return `${seconds}s`
           }
         }
       }
diff --git a/dashboard/src/components/users/filters.tsx b/dashboard/src/components/users/filters.tsx
@@ -9,7 +9,7 @@ import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { useDebouncedSearch } from '@/hooks/use-debounced-search'
 import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown, Check, Clock } from 'lucide-react'
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetUsers, UserStatus } from '@/service/api'
 import { RefetchOptions } from '@tanstack/react-query'
@@ -90,6 +90,7 @@ export const Filters = ({ filters, onFilterChange, refetch, autoRefetch, advance
   const [autoRefreshInterval, setAutoRefreshInterval] = useState<number>(() => getUsersAutoRefreshIntervalSeconds())
   const { refetch: queryRefetch, isFetching } = useGetUsers(filters)
   const { search, debouncedSearch, setSearch } = useDebouncedSearch(filters.search || '', 300)
+  const prevDebouncedSearchRef = useRef<string | undefined>(filters.search || undefined)
   
   const refetchUsers = useCallback(
     async (showLoading = false, isAutoRefresh = false) => {
@@ -142,10 +143,14 @@ export const Filters = ({ filters, onFilterChange, refetch, autoRefetch, advance
 
   // Update filters when debounced search changes
   useEffect(() => {
-    onFilterChange({
-      search: debouncedSearch || '',
-      offset: 0,
-    })
+    // Only update if search actually changed to avoid resetting page on initial load
+    if (debouncedSearch !== prevDebouncedSearchRef.current) {
+      prevDebouncedSearchRef.current = debouncedSearch
+      onFilterChange({
+        search: debouncedSearch || '',
+        offset: 0,
+      })
+    }
   }, [debouncedSearch, onFilterChange])
 
   // Handle input change
diff --git a/dashboard/src/components/users/online-badge.tsx b/dashboard/src/components/users/online-badge.tsx
@@ -25,25 +25,41 @@ export const OnlineBadge: FC<UserStatusProps> = ({ lastOnline }) => {
     if (isOnline) {
       return t('online')
     } else {
-      // Format the time difference for offline status
-      const duration = dayjs.duration(diffInSeconds, 'seconds')
-      let timeText = ''
+      // Format the time difference for offline status using calendar-aware diff methods
+      const years = Math.abs(currentTime.diff(lastOnlineTime, 'year'))
+      const months = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year'), 'month'))
+      const days = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month'), 'day'))
+      const hours = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day'), 'hour'))
+      const minutes = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour'), 'minute'))
+      const seconds = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour').add(minutes, 'minute'), 'second'))
 
-      if (duration.years() > 0) {
-        timeText = `${duration.years()} ${t(`time.${duration.years() !== 1 ? 'years' : 'year'}`)} ${t('time.ago')}`
-      } else if (duration.months() > 0) {
-        timeText = `${duration.months()} ${t(`time.${duration.months() !== 1 ? 'months' : 'month'}`)} ${t('time.ago')}`
-      } else if (duration.days() > 0) {
-        timeText = `${duration.days()} ${t(`time.${duration.days() !== 1 ? 'days' : 'day'}`)} ${t('time.ago')}`
-      } else if (duration.hours() > 0) {
-        timeText = `${duration.hours()} ${t(`time.${duration.hours() !== 1 ? 'hours' : 'hour'}`)} ${t('time.ago')}`
-      } else if (duration.minutes() > 0) {
-        timeText = `${duration.minutes()} ${t(`time.${duration.minutes() !== 1 ? 'mins' : 'min'}`)} ${t('time.ago')}`
-      } else {
-        timeText = `${duration.seconds()} ${t(`time.${duration.seconds() !== 1 ? 'seconds' : 'second'}`)} ${t('time.ago')}`
+      const parts: string[] = []
+
+      if (years > 0) {
+        parts.push(`${years} ${t(`time.${years !== 1 ? 'years' : 'year'}`)}`)
+      }
+      if (months > 0) {
+        parts.push(`${months} ${t(`time.${months !== 1 ? 'months' : 'month'}`)}`)
+      }
+      if (days > 0) {
+        parts.push(`${days} ${t(`time.${days !== 1 ? 'days' : 'day'}`)}`)
+      }
+      if (hours > 0 && parts.length < 2) {
+        parts.push(`${hours} ${t(`time.${hours !== 1 ? 'hours' : 'hour'}`)}`)
+      }
+      if (minutes > 0 && parts.length < 2) {
+        parts.push(`${minutes} ${t(`time.${minutes !== 1 ? 'mins' : 'min'}`)}`)
+      }
+      if (seconds > 0 && parts.length === 0) {
+        parts.push(`${seconds} ${t(`time.${seconds !== 1 ? 'seconds' : 'second'}`)}`)
+      }
+
+      if (parts.length === 0) {
+        return t('time.ago')
       }
 
-      return timeText
+      const timeText = parts.join(', ')
+      return `${timeText} ${t('time.ago')}`
     }
   }
 
diff --git a/dashboard/src/components/users/online-status.tsx b/dashboard/src/components/users/online-status.tsx
@@ -26,22 +26,28 @@ export const OnlineStatus: FC<UserStatusProps> = ({ lastOnline }) => {
   if (isOnline) {
     return <span className={cn('inline-block text-xs font-medium', dir === 'rtl' ? 'mr-0.5 md:mr-2' : 'ml-0.5 md:ml-2', 'text-gray-600 dark:text-gray-400')}>{t('online')}</span>
   } else {
-    // Format the time difference for offline status
-    const duration = dayjs.duration(diffInSeconds, 'seconds')
+    // Format the time difference for offline status using calendar-aware diff methods
+    const years = Math.abs(currentTime.diff(lastOnlineTime, 'year'))
+    const months = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year'), 'month'))
+    const days = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month'), 'day'))
+    const hours = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day'), 'hour'))
+    const minutes = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour'), 'minute'))
+    const seconds = Math.abs(currentTime.diff(lastOnlineTime.add(years, 'year').add(months, 'month').add(days, 'day').add(hours, 'hour').add(minutes, 'minute'), 'second'))
+
     let timeText = ''
 
-    if (duration.years() > 0) {
-      timeText = `${duration.years()} ${t(`time.${duration.years() !== 1 ? 'years' : 'year'}`)} ${t('time.ago')}`
-    } else if (duration.months() > 0) {
-      timeText = `${duration.months()} ${t(`time.${duration.months() !== 1 ? 'months' : 'month'}`)} ${t('time.ago')}`
-    } else if (duration.days() > 0) {
-      timeText = `${duration.days()} ${t(`time.${duration.days() !== 1 ? 'days' : 'day'}`)} ${t('time.ago')}`
-    } else if (duration.hours() > 0) {
-      timeText = `${duration.hours()} ${t(`time.${duration.hours() !== 1 ? 'hours' : 'hour'}`)} ${t('time.ago')}`
-    } else if (duration.minutes() > 0) {
-      timeText = `${duration.minutes()} ${t(`time.${duration.minutes() !== 1 ? 'mins' : 'min'}`)} ${t('time.ago')}`
+    if (years > 0) {
+      timeText = `${years} ${t(`time.${years !== 1 ? 'years' : 'year'}`)} ${t('time.ago')}`
+    } else if (months > 0) {
+      timeText = `${months} ${t(`time.${months !== 1 ? 'months' : 'month'}`)} ${t('time.ago')}`
+    } else if (days > 0) {
+      timeText = `${days} ${t(`time.${days !== 1 ? 'days' : 'day'}`)} ${t('time.ago')}`
+    } else if (hours > 0) {
+      timeText = `${hours} ${t(`time.${hours !== 1 ? 'hours' : 'hour'}`)} ${t('time.ago')}`
+    } else if (minutes > 0) {
+      timeText = `${minutes} ${t(`time.${minutes !== 1 ? 'mins' : 'min'}`)} ${t('time.ago')}`
     } else {
-      timeText = `${duration.seconds()} ${t(`time.${duration.seconds() !== 1 ? 'seconds' : 'second'}`)} ${t('time.ago')}`
+      timeText = `${seconds} ${t(`time.${seconds !== 1 ? 'seconds' : 'second'}`)} ${t('time.ago')}`
     }
 
     return <span className={cn('inline-block text-xs font-medium', dir === 'rtl' ? 'mr-0.5 md:mr-2' : 'ml-0.5 md:ml-2', 'text-gray-600 dark:text-gray-400')}>{timeText}</span>
diff --git a/dashboard/src/components/users/users-table.tsx b/dashboard/src/components/users/users-table.tsx
diff --git a/dashboard/src/utils/dateFormatter.tsx b/dashboard/src/utils/dateFormatter.tsx
