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/shows/ShowsPanel.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/shared/ui/button'
 import { Input } from '@/shared/ui/input'
 import { Pager } from '@/shared/ui/pager'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { SortHeader, sortRows, useTableSort } from '@/shared/ui/sortable'
 import { toast } from '@/shared/ui/toast-store'
 import { createShow, deleteShow, listShows } from './api'
 
@@ -22,19 +23,31 @@ export function ShowsPanel() {
   const [kind, setKind] = useState<ShowKind>('Series')
   const [query, setQuery] = useState('')
   const [page, setPage] = useState(1)
+  const { sort, toggle } = useTableSort('name', false)
+  const sortColumn = (key: string) => {
+    setPage(1)
+    toggle(key)
+  }
 
   const { data, isLoading } = useQuery({ queryKey: ['admin', 'shows'], queryFn: listShows })
 
-  // Список шоу обычно умещается в одну загрузку — фильтруем и листаем на клиенте (пикеры берут всё).
+  // Список шоу обычно умещается в одну загрузку — фильтруем, сортируем и листаем на клиенте.
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
     const all = data ?? []
-    if (!q) return all
-    return all.filter(
-      (s) =>
-        s.name.toLowerCase().includes(q) || (s.originalName ?? '').toLowerCase().includes(q),
-    )
-  }, [data, query])
+    const matched = q
+      ? all.filter(
+          (s) =>
+            s.name.toLowerCase().includes(q) || (s.originalName ?? '').toLowerCase().includes(q),
+        )
+      : all
+    return sortRows(matched, sort, {
+      name: (s) => s.name.toLowerCase(),
+      kind: (s) => s.kind,
+      seasons: (s) => s.seasonCount,
+      episodes: (s) => s.episodeCount,
+    })
+  }, [data, query, sort])
   const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
   const pageItems = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
   const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'shows'] })
@@ -102,10 +115,30 @@ export function ShowsPanel() {
         <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.shows.name')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.shows.kind')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.shows.seasons')}</th>
-              <th className="px-4 py-2 font-medium">{t('admin.shows.episodes')}</th>
+              <SortHeader
+                label={t('admin.shows.name')}
+                sortKey="name"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.shows.kind')}
+                sortKey="kind"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.shows.seasons')}
+                sortKey="seasons"
+                sort={sort}
+                onToggle={sortColumn}
+              />
+              <SortHeader
+                label={t('admin.shows.episodes')}
+                sortKey="episodes"
+                sort={sort}
+                onToggle={sortColumn}
+              />
               <th className="px-4 py-2 font-medium">{t('common.actions')}</th>
             </tr>
           </thead>