Enhance user and media management with sorting and statistics: add sorting options to user and media listing endpoints, implement media statistics retrieval, and update frontend components for sorting and displaying media processing times. Refactor related query handlers and API types to support new features.

frontend/src/features/admin/users/UsersPanel.tsx

@@ -15,6 +15,7 @@ import {
 import { Input } from '@/shared/ui/input'
 import { Label } from '@/shared/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { SortHeader, useTableSort } from '@/shared/ui/sortable'
 import { toast } from '@/shared/ui/toast-store'
 import type { UserSummaryDto } from '@/shared/api/types'
 import { changeUserRole } from '@/features/admin/roles/api'
@@ -29,6 +30,11 @@ export function UsersPanel() {
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [roleId, setRoleId] = useState<string>('')
+  const { sort, toggle } = useTableSort('created', true)
+  const sortColumn = (key: string) => {
+    setPage(1)
+    toggle(key)
+  }
   const [newUserName, setNewUserName] = useState('')
   const [newPassword, setNewPassword] = useState('')
   const [newRoleId, setNewRoleId] = useState('')
@@ -36,8 +42,16 @@ export function UsersPanel() {
 
   const { data: roles } = useQuery({ queryKey: ['admin', 'roles'], queryFn: listRoles })
   const { data, isLoading } = useQuery({
-    queryKey: ['admin', 'users', page, search, roleId],
-    queryFn: () => listUsers({ page, pageSize: PAGE_SIZE, search: search || undefined, roleId: roleId || undefined }),
+    queryKey: ['admin', 'users', page, search, roleId, sort.key, sort.desc],
+    queryFn: () =>
+      listUsers({
+        page,
+        pageSize: PAGE_SIZE,
+        search: search || undefined,
+        roleId: roleId || undefined,
+        sort: sort.key,
+        desc: sort.desc,
+      }),
   })
 
   const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'users'] })
@@ -167,10 +181,30 @@ export function UsersPanel() {
         <table className="w-full text-sm">
           <thead className="border-b border-border text-left text-muted-foreground">
             <tr>
-              <th className="px-4 py-2 font-medium">{t('admin.users.userName')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.users.role')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.users.status')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.users.createdAt')}</th>
+              <SortHeader
+                label={t('admin.users.userName')}
+                sortKey="username"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.users.role')}
+                sortKey="role"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.users.status')}
+                sortKey="blocked"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.users.createdAt')}
+                sortKey="created"
+                sort={sort}
+                onToggle={sortColumn}
+              />
               <th className="px-4 py-2 font-medium">{t('common.actions')}</th>
             </tr>
           </thead>

frontend/src/features/admin/users/api.ts

@@ -7,6 +7,8 @@ export type ListUsersParams = {
   search?: string
   roleId?: string
   isBlocked?: boolean
+  sort?: string
+  desc?: boolean
 }
 
 export function listUsers(params: ListUsersParams) {
@@ -17,6 +19,8 @@ export function listUsers(params: ListUsersParams) {
   if (params.search) query.set('search', params.search)
   if (params.roleId) query.set('roleId', params.roleId)
   if (params.isBlocked !== undefined) query.set('isBlocked', String(params.isBlocked))
+  if (params.sort) query.set('sort', params.sort)
+  if (params.desc) query.set('desc', 'true')
 
   return apiRequest<PagedList<UserSummaryDto>>(`/admin/users?${query.toString()}`)
 }