feat: add sorting options for users table and update localization files

MatinDehghanian · MatinDehghanian · commit f389de1bcd8c · 2025-10-11T16:19:24.000+03:30
diff --git a/dashboard/public/statics/locales/en.json b/dashboard/public/statics/locales/en.json
@@ -620,8 +620,24 @@
   "deleteUser.title": "Remove User",
   "disabled": "disabled",
   "expire": "Expire",
+  "expireDate": "Expire Date",
   "expires": "Expires in {{time}}",
   "expired": "Expired {{time}}",
+  "sortOptions": "Sort Options",
+  "sort": {
+    "username": {
+      "asc": "Username (A-Z)",
+      "desc": "Username (Z-A)"
+    },
+    "expire": {
+      "oldest": "Expire Date (Oldest First)",
+      "newest": "Expire Date (Newest First)"
+    },
+    "usage": {
+      "low": "Data Usage (Low to High)",
+      "high": "Data Usage (High to Low)"
+    }
+  },
   "header.donation": "Donation",
   "header.hostSettings": "Host Settings",
   "header.logout": "Log out",
diff --git a/dashboard/public/statics/locales/fa.json b/dashboard/public/statics/locales/fa.json
@@ -508,8 +508,24 @@
   "deleteUser.title": "حذف کاربر",
   "disabled": "غیر فعال",
   "expire": "انقضا",
+  "expireDate": "تاریخ انقضا",
   "expired": "{{time}} منقضی شده",
   "expires": "پایان در {{time}}",
+  "sortOptions": "گزینه‌های مرتب‌سازی",
+  "sort": {
+    "username": {
+      "asc": "نام کاربری (الف-ی)",
+      "desc": "نام کاربری (ی-الف)"
+    },
+    "expire": {
+      "oldest": "تاریخ انقضا (قدیمی‌ترین اول)",
+      "newest": "تاریخ انقضا (جدیدترین اول)"
+    },
+    "usage": {
+      "low": "مصرف داده (کم به زیاد)",
+      "high": "مصرف داده (زیاد به کم)"
+    }
+  },
   "header.donation": "کمک مالی",
   "header.hostSettings": "تنظیمات هاست",
   "header.logout": "خروج",
diff --git a/dashboard/public/statics/locales/ru.json b/dashboard/public/statics/locales/ru.json
@@ -593,8 +593,24 @@
   "deleteUser.title": "Удалить пользователя",
   "disabled": "disabled",
   "expire": "Истекает",
+  "expireDate": "Дата истечения",
   "expired": "Истёк {{time}}",
   "expires": "Истекает через {{time}}",
+  "sortOptions": "Параметры сортировки",
+  "sort": {
+    "username": {
+      "asc": "Имя пользователя (А-Я)",
+      "desc": "Имя пользователя (Я-А)"
+    },
+    "expire": {
+      "oldest": "Дата истечения (сначала старые)",
+      "newest": "Дата истечения (сначала новые)"
+    },
+    "usage": {
+      "low": "Использование данных (от малого к большому)",
+      "high": "Использование данных (от большого к малому)"
+    }
+  },
   "header.donation": "Пожертвование",
   "header.hostSettings": "Настройки хоста",
   "header.logout": "Выйти",
diff --git a/dashboard/public/statics/locales/zh.json b/dashboard/public/statics/locales/zh.json
@@ -619,8 +619,24 @@
   "deleteUser.title": "删除用户",
   "disabled": "禁用",
   "expire": "过期",
+  "expireDate": "到期日期",
   "expired": "{{time}}已过期",
   "expires": "将在 {{time}} 后过期",
+  "sortOptions": "排序选项",
+  "sort": {
+    "username": {
+      "asc": "用户名 (A-Z)",
+      "desc": "用户名 (Z-A)"
+    },
+    "expire": {
+      "oldest": "到期日期 (最旧的优先)",
+      "newest": "到期日期 (最新的优先)"
+    },
+    "usage": {
+      "low": "数据使用量 (从低到高)",
+      "high": "数据使用量 (从高到低)"
+    }
+  },
   "header.donation": "捐赠",
   "header.hostSettings": "设置",
   "header.logout": "退出",
diff --git a/dashboard/src/components/users/columns.tsx b/dashboard/src/components/users/columns.tsx
@@ -17,8 +17,8 @@ export const setupColumns = ({
   t: (key: string) => string
   handleSort: (column: string) => void
   filters: { sort: string; status?: string }
-  handleStatusFilter: (value: any) => void
-  dir: any
+  handleStatusFilter: (value: string) => void
+  dir: string
 }): ColumnDef<UserResponse>[] => [
   {
     accessorKey: 'username',
@@ -59,7 +59,7 @@ export const setupColumns = ({
     accessorKey: 'status',
     header: () => (
       <div className="flex items-center">
-        <Select dir={dir || ''} onValueChange={handleStatusFilter} value={filters.status || '0'}>
+        <Select dir={dir as 'ltr' | 'rtl'} onValueChange={handleStatusFilter} value={filters.status || '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>
@@ -74,6 +74,7 @@ export const setupColumns = ({
             <SelectItem value="expired">{t('hostsDialog.status.expired')}</SelectItem>
           </SelectContent>
         </Select>
+        {/* Desktop expire sorting */}
         <div className="hidden items-center sm:flex">
           <span>/</span>
           <button className="flex w-full items-center gap-1 px-2 py-3" onClick={handleSort.bind(null, 'expire')}>
diff --git a/dashboard/src/components/users/filters.tsx b/dashboard/src/components/users/filters.tsx
@@ -4,10 +4,11 @@ import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuLabel } from '@/components/ui/dropdown-menu'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { debounce } from 'es-toolkit'
-import { RefreshCw, SearchIcon, Filter, X } from 'lucide-react'
+import { RefreshCw, SearchIcon, Filter, X, ArrowUpDown, User, Calendar, ChartPie, ChevronDown } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGetUsers, UserStatus } from '@/service/api'
@@ -29,9 +30,10 @@ interface FiltersProps {
   advanceSearchOnOpen: (status: boolean) => void
   advanceSearchForm?: UseFormReturn<any>
   onClearAdvanceSearch?: () => void
+  handleSort?: (column: string) => void
 }
 
-export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen, advanceSearchForm, onClearAdvanceSearch }: FiltersProps) => {
+export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen, advanceSearchForm, onClearAdvanceSearch, handleSort }: FiltersProps) => {
   const { t } = useTranslation()
   const dir = useDirDetection()
   const [search, setSearch] = useState(filters.search || '')
@@ -132,6 +134,97 @@ export const Filters = ({ filters, onFilterChange, refetch, advanceSearchOnOpen,
           </Popover>
         )}
       </div>
+      {/* Sort Button */}
+      {handleSort && (
+        <div className="flex h-full items-center gap-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button 
+                size="icon-md" 
+                variant="ghost" 
+                className="relative flex items-center gap-2 border"
+                aria-label={t('sortOptions', { defaultValue: 'Sort Options' })}
+              >
+                <ArrowUpDown className="h-4 w-4" />
+                {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-56">
+              {/* Username Section */}
+              <DropdownMenuLabel className="flex items-center gap-2 text-xs text-muted-foreground">
+                <User className="h-3 w-3" />
+                {t('username')}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('username')}
+                className={filters.sort === 'username' ? 'bg-accent' : ''}
+              >
+                <User className="mr-2 h-4 w-4" />
+                {t('sort.username.asc')}
+                {filters.sort === 'username' && <ChevronDown className="ml-auto h-4 w-4 rotate-180" />}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('-username')}
+                className={filters.sort === '-username' ? 'bg-accent' : ''}
+              >
+                <User className="mr-2 h-4 w-4" />
+                {t('sort.username.desc')}
+                {filters.sort === '-username' && <ChevronDown className="ml-auto h-4 w-4" />}
+              </DropdownMenuItem>
+              
+              <DropdownMenuSeparator />
+              
+              {/* Expire Date Section */}
+              <DropdownMenuLabel className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Calendar className="h-3 w-3" />
+                {t('expireDate')}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('expire')}
+                className={filters.sort === 'expire' ? 'bg-accent' : ''}
+              >
+                <Calendar className="mr-2 h-4 w-4" />
+                {t('sort.expire.oldest')}
+                {filters.sort === 'expire' && <ChevronDown className="ml-auto h-4 w-4 rotate-180" />}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('-expire')}
+                className={filters.sort === '-expire' ? 'bg-accent' : ''}
+              >
+                <Calendar className="mr-2 h-4 w-4" />
+                {t('sort.expire.newest')}
+                {filters.sort === '-expire' && <ChevronDown className="ml-auto h-4 w-4" />}
+              </DropdownMenuItem>
+              
+              <DropdownMenuSeparator />
+              
+              {/* Data Usage Section */}
+              <DropdownMenuLabel className="flex items-center gap-2 text-xs text-muted-foreground">
+                <ChartPie className="h-3 w-3" />
+                {t('dataUsage')}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('used_traffic')}
+                className={filters.sort === 'used_traffic' ? 'bg-accent' : ''}
+              >
+                <ChartPie className="mr-2 h-4 w-4" />
+                {t('sort.usage.low')}
+                {filters.sort === 'used_traffic' && <ChevronDown className="ml-auto h-4 w-4 rotate-180" />}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => handleSort && handleSort('-used_traffic')}
+                className={filters.sort === '-used_traffic' ? 'bg-accent' : ''}
+              >
+                <ChartPie className="mr-2 h-4 w-4" />
+                {t('sort.usage.high')}
+                {filters.sort === '-used_traffic' && <ChevronDown className="ml-auto h-4 w-4" />}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </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}>
diff --git a/dashboard/src/components/users/users-table.tsx b/dashboard/src/components/users/users-table.tsx
@@ -253,6 +253,7 @@ const UsersTable = memo(() => {
         advanceSearchOnOpen={setIsAdvanceSearchOpen}
         refetch={handleManualRefresh}
         advanceSearchForm={advanceSearchForm}
+        handleSort={handleSort}
         onClearAdvanceSearch={() => {
           advanceSearchForm.reset({
             is_username: true,
