feat(user): add sort by online_at

x0sina · x0sina · commit 4b87265b69ec · 2025-11-08T19:50:08.000+03:30
diff --git a/dashboard/public/statics/locales/en.json b/dashboard/public/statics/locales/en.json
@@ -690,6 +690,7 @@
   "disabled": "disabled",
   "expire": "Expire",
   "expireDate": "Expire Date",
+  "lastOnline": "Last Online",
   "expires": "Expires in {{time}}",
   "expired": "Expired {{time}}",
   "sortOptions": "Sort Options",
@@ -705,6 +706,10 @@
     "usage": {
       "low": "Data Usage (Low to High)",
       "high": "Data Usage (High to Low)"
+    },
+    "online": {
+      "oldest": "Last Online (Oldest First)",
+      "newest": "Last Online (Newest First)"
     }
   },
   "header.donation": "Donation",
diff --git a/dashboard/public/statics/locales/fa.json b/dashboard/public/statics/locales/fa.json
@@ -576,6 +576,7 @@
   "disabled": "غیر فعال",
   "expire": "انقضا",
   "expireDate": "تاریخ انقضا",
+  "lastOnline": "آخرین آنلاین",
   "expired": "{{time}} منقضی شده",
   "expires": "پایان در {{time}}",
   "sortOptions": "گزینه‌های مرتب‌سازی",
@@ -591,6 +592,10 @@
     "usage": {
       "low": "مصرف داده (کم به زیاد)",
       "high": "مصرف داده (زیاد به کم)"
+    },
+    "online": {
+      "oldest": "آخرین آنلاین (قدیمی‌ترین اول)",
+      "newest": "آخرین آنلاین (جدیدترین اول)"
     }
   },
   "header.donation": "کمک مالی",
diff --git a/dashboard/public/statics/locales/ru.json b/dashboard/public/statics/locales/ru.json
@@ -676,6 +676,7 @@
   "disabled": "disabled",
   "expire": "Истекает",
   "expireDate": "Дата истечения",
+  "lastOnline": "Последний онлайн",
   "expired": "Истёк {{time}}",
   "expires": "Истекает через {{time}}",
   "sortOptions": "Параметры сортировки",
@@ -691,6 +692,10 @@
     "usage": {
       "low": "Использование данных (от малого к большому)",
       "high": "Использование данных (от большого к малому)"
+    },
+    "online": {
+      "oldest": "Последний онлайн (сначала старые)",
+      "newest": "Последний онлайн (сначала новые)"
     }
   },
   "header.donation": "Пожертвование",
diff --git a/dashboard/public/statics/locales/zh.json b/dashboard/public/statics/locales/zh.json
@@ -689,6 +689,7 @@
   "disabled": "禁用",
   "expire": "过期",
   "expireDate": "到期日期",
+  "lastOnline": "最后在线",
   "expired": "{{time}}已过期",
   "expires": "将在 {{time}} 后过期",
   "sortOptions": "排序选项",
@@ -704,6 +705,10 @@
     "usage": {
       "low": "数据使用量 (从低到高)",
       "high": "数据使用量 (从高到低)"
+    },
+    "online": {
+      "oldest": "最后在线 (最旧的优先)",
+      "newest": "最后在线 (最新的优先)"
     }
   },
   "header.donation": "捐赠",
diff --git a/dashboard/src/components/users/columns.tsx b/dashboard/src/components/users/columns.tsx
@@ -1,4 +1,4 @@
-import { UserResponse } from '@/service/api'
+import { UserResponse, UserStatus } from '@/service/api'
 import { ColumnDef } from '@tanstack/react-table'
 import { ChevronDown } from 'lucide-react'
 import ActionButtons from '../ActionButtons'
@@ -16,8 +16,8 @@ export const setupColumns = ({
 }: {
   t: (key: string) => string
   handleSort: (column: string, fromDropdown?: boolean) => void
-  filters: { sort: string; status?: string }
-  handleStatusFilter: (value: string) => void
+  filters: { sort: string; status?: UserStatus | null; [key: string]: unknown }
+  handleStatusFilter: (value: string | UserStatus) => void
   dir: string
 }): ColumnDef<UserResponse>[] => [
   {
@@ -59,7 +59,7 @@ export const setupColumns = ({
     accessorKey: 'status',
     header: () => (
       <div className="flex items-center">
-        <Select dir={dir as 'ltr' | 'rtl'} onValueChange={handleStatusFilter} value={filters.status || '0'}>
+        <Select dir={dir as 'ltr' | 'rtl'} onValueChange={handleStatusFilter} value={(filters.status as string) || '0'}>
           <SelectTrigger icon={false} className="ring-none w-fit max-w-28 border-none p-0 sm:px-1">
             <span className="px-0 text-xs capitalize">{t('usersTable.status')}</span>
           </SelectTrigger>
diff --git a/dashboard/src/components/users/filters.tsx b/dashboard/src/components/users/filters.tsx
@@ -8,7 +8,7 @@ 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, Check } from 'lucide-react'
+import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown, Check, Clock } from 'lucide-react'
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetUsers, UserStatus } from '@/service/api'
@@ -24,26 +24,35 @@ const sortSections = [
     icon: User,
     label: 'username',
     items: [
-      { value: 'username', label: 'sort.username.asc' },
       { value: '-username', label: 'sort.username.desc' },
+      { value: 'username', label: 'sort.username.asc' },
     ],
   },
   {
     key: 'expire',
     icon: Calendar,
     label: 'expireDate',
     items: [
-      { value: 'expire', label: 'sort.expire.oldest' },
       { value: '-expire', label: 'sort.expire.newest' },
+      { value: 'expire', label: 'sort.expire.oldest' },
     ],
   },
   {
     key: 'usage',
     icon: ChartPie,
     label: 'dataUsage',
     items: [
-      { value: 'used_traffic', label: 'sort.usage.low' },
       { value: '-used_traffic', label: 'sort.usage.high' },
+      { value: 'used_traffic', label: 'sort.usage.low' },
+    ],
+  },
+  {
+    key: 'onlineAt',
+    icon: Clock,
+    label: 'lastOnline',
+    items: [
+      { value: '-online_at', label: 'sort.online.newest' },
+      { value: 'online_at', label: 'sort.online.oldest' },
     ],
   },
 ] as const
@@ -242,25 +251,24 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
                 {filters.sort && filters.sort !== '-created_at' && <div className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-primary" />}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-52 md:w-56">
+            <DropdownMenuContent align="end" className="w-44">
               {sortSections.map((section, sectionIndex) => (
                 <div key={section.key}>
                   {/* Section Label */}
-                  <DropdownMenuLabel className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground md:gap-2 md:px-3 md:py-2">
-                    <section.icon className="h-3 w-3" />
-                    <span className="text-xs md:text-sm">{t(section.label)}</span>
+                  <DropdownMenuLabel className="flex items-center gap-1 px-1.5 py-1 text-[10px] text-muted-foreground">
+                    <section.icon className="h-2.5 w-2.5" />
+                    <span className="text-[10px]">{t(section.label)}</span>
                   </DropdownMenuLabel>
 
                   {/* Section Items */}
                   {section.items.map(item => (
                     <DropdownMenuItem
                       key={item.value}
                       onClick={() => handleSort && handleSort(item.value, true)}
-                      className={`whitespace-nowrap px-2 py-1.5 text-xs md:px-3 md:py-2 ${filters.sort === item.value ? 'bg-accent' : ''}`}
+                      className={`whitespace-nowrap px-1.5 py-1 text-[11px] ${filters.sort === item.value ? 'bg-accent' : ''}`}
                     >
-                      <section.icon className="mr-1.5 h-3 w-3 flex-shrink-0 md:mr-2 md:h-4 md:w-4" />
                       <span className="truncate">{t(item.label)}</span>
-                      {filters.sort === item.value && <ChevronDown className={`ml-auto h-3 w-3 flex-shrink-0 md:h-4 md:w-4 ${item.value.startsWith('-') ? '' : 'rotate-180'}`} />}
+                      {filters.sort === item.value && <ChevronDown className={`ml-auto h-2.5 w-2.5 flex-shrink-0 ${item.value.startsWith('-') ? '' : 'rotate-180'}`} />}
                     </DropdownMenuItem>
                   ))}
 
@@ -298,20 +306,20 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
               <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">
+          <DropdownMenuContent align="end" className="w-44">
+            <DropdownMenuLabel className="flex flex-col gap-0.5 px-1.5 py-1 text-[10px] text-muted-foreground">
               <span>{t('autoRefresh.label')}</span>
-              <span className="text-[11px] md:text-xs">{t('autoRefresh.currentSelection', { value: currentAutoRefreshDescription })}</span>
+              <span className="text-[9px]">{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"
+              className="flex items-center gap-1.5 px-1.5 py-1 text-[11px]"
             >
-              <RefreshCw className={cn('h-3.5 w-3.5 flex-shrink-0', isRefreshing && 'animate-spin')} />
+              <RefreshCw className={cn('h-2.5 w-2.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" />}
+              {isRefreshing && <LoaderCircle className="ml-auto h-2.5 w-2.5 animate-spin" />}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             {autoRefreshOptions.map(option => {
@@ -320,10 +328,10 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
                 <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')}
+                  className={cn('flex items-center gap-1.5 whitespace-nowrap px-1.5 py-1 text-[11px]', isActive && 'bg-accent')}
                 >
                   <span>{t(option.labelKey)}</span>
-                  {isActive && <Check className="ml-auto h-3 w-3 flex-shrink-0" />}
+                  {isActive && <Check className="ml-auto h-2.5 w-2.5 flex-shrink-0" />}
                 </DropdownMenuItem>
               )
             })}
diff --git a/dashboard/src/components/users/users-table.tsx b/dashboard/src/components/users/users-table.tsx
@@ -3,7 +3,7 @@ import { DataTable } from '@/components/users/data-table'
 import { Filters } from '@/components/users/filters'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { UseEditFormValues } from '@/pages/_dashboard.users'
-import { useGetUsers, UserResponse } from '@/service/api'
+import { useGetUsers, UserResponse, UserStatus } from '@/service/api'
 import { useAdmin } from '@/hooks/use-admin'
 import { getUsersPerPageLimitSize, setUsersPerPageLimitSize } from '@/utils/userPreferenceStorage'
 import { useQueryClient } from '@tanstack/react-query'
@@ -28,14 +28,28 @@ const UsersTable = memo(() => {
   const { admin } = useAdmin()
   const isSudo = admin?.is_sudo || false
 
-  const [filters, setFilters] = useState({
+  const [filters, setFilters] = useState<{
+    limit: number
+    sort: string
+    load_sub: boolean
+    offset: number
+    search?: string
+    proxy_id?: string
+    is_protocol: boolean
+    status?: UserStatus | null
+    admin?: string[]
+    group?: number[]
+  }>({
     limit: itemsPerPage,
     sort: '-created_at',
     load_sub: true,
     offset: 0,
-    search: undefined as string | undefined,
-    proxy_id: undefined as string | undefined, // add proxy_id
-    is_protocol: false, // add is_protocol
+    search: undefined,
+    proxy_id: undefined,
+    is_protocol: false,
+    status: undefined,
+    admin: undefined,
+    group: undefined,
   })
 
   const advanceSearchForm = useForm<AdvanceSearchFormValue>({
@@ -108,6 +122,15 @@ const UsersTable = memo(() => {
     }))
   }, [currentPage, itemsPerPage])
 
+  // Sync advance search form with current filters when modal opens
+  useEffect(() => {
+    if (isAdvanceSearchOpen) {
+      advanceSearchForm.setValue('status', filters.status || '0')
+      advanceSearchForm.setValue('admin', filters.admin || [])
+      advanceSearchForm.setValue('group', filters.group || [])
+    }
+  }, [isAdvanceSearchOpen, filters.status, filters.admin, filters.group, advanceSearchForm])
+
   const {
     data: usersData,
     refetch,
@@ -180,6 +203,9 @@ const UsersTable = memo(() => {
   )
 
   const handleStatusFilter = useCallback((value: any) => {
+    // Sync with advance search form
+    advanceSearchForm.setValue('status', value || '0')
+    
     // If value is '0' or empty, set status to undefined to remove it from the URL
     if (value === '0' || value === '') {
       setFilters(prev => ({
@@ -196,7 +222,7 @@ const UsersTable = memo(() => {
     }
 
     setCurrentPage(0) // Reset current page
-  }, [])
+  }, [advanceSearchForm])
 
   const handleFilterChange = useCallback((newFilters: Partial<typeof filters>) => {
     setFilters(prev => {
@@ -263,7 +289,7 @@ const UsersTable = memo(() => {
     t,
     dir,
     handleSort,
-    filters,
+    filters: filters as { sort: string; status?: UserStatus | null; [key: string]: unknown },
     handleStatusFilter,
   })
 
