diff --git a/apps/web/src/components/users/user-share-links.tsx b/apps/web/src/components/users/user-share-links.tsx
new file mode 100644
index 0000000..7a74332
--- /dev/null
+++ b/apps/web/src/components/users/user-share-links.tsx
@@ -0,0 +1,98 @@
+'use no memo'
+
+import { CopyIcon, ExternalLinkIcon } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { Badge } from '@/components/reui/badge'
+import { Button } from '@telemt/ui/components/button'
+import type { UserShareLink } from '@/lib/telemt'
+
+interface UserShareLinksProps {
+ links: UserShareLink[]
+}
+
+/** Proxy share links after create — tg:// and https://t.me/proxy. */
+export function UserShareLinks({ links }: UserShareLinksProps) {
+ if (links.length === 0) {
+ return (
+
+ Ссылки подключения не вернулись из API. Откройте карточку пользователя
+ позже или проверьте конфиг Telemt.
+
+ )
+ }
+
+ return (
+
+
Ссылки для Telegram
+
+ {links.map((link) => (
+ -
+
+
+ {link.label}
+
+
+
+ {link.http}
+
+ {link.tg !== link.http ? (
+
+ {link.tg}
+
+ ) : null}
+
+
+
+
+ }
+ >
+
+ Открыть
+
+
+ ))}
+
+
+ )
+}
diff --git a/apps/web/src/components/users/users-columns.tsx b/apps/web/src/components/users/users-columns.tsx
index f98632d..d8c56f7 100644
--- a/apps/web/src/components/users/users-columns.tsx
+++ b/apps/web/src/components/users/users-columns.tsx
@@ -1,142 +1,548 @@
-import { useMemo } from 'react'
+'use no memo'
+
+import { memo, useMemo, useState } from 'react'
import { type ColumnDef, type Row } from '@tanstack/react-table'
-import { EyeIcon, MoreHorizontalIcon } from 'lucide-react'
+import {
+ CopyIcon,
+ EyeIcon,
+ MoreHorizontalIcon,
+ Pin,
+ PinOffIcon,
+ Trash2Icon,
+} from 'lucide-react'
+import { toast } from 'sonner'
import { Badge } from '@/components/reui/badge'
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DataGridTableRowPin } from '@/components/reui/data-grid/data-grid-table'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { cn } from '@telemt/ui/lib/utils'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from '@telemt/ui/components/alert-dialog'
+import { Avatar, AvatarFallback } from '@telemt/ui/components/avatar'
import { Button } from '@telemt/ui/components/button'
import {
DropdownMenu,
DropdownMenuContent,
+ DropdownMenuGroup,
DropdownMenuItem,
+ DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@telemt/ui/components/dropdown-menu'
-import { formatBytes, formatNumber, type UserInfo } from '@/lib/telemt'
+import {
+ Progress,
+ ProgressLabel,
+ ProgressValue,
+} from '@telemt/ui/components/progress'
+import { Skeleton } from '@telemt/ui/components/skeleton'
+import {
+ formatBytes,
+ formatNumber,
+ type UserInfo,
+} from '@/lib/telemt'
+
+export function EnabledBadge({ enabled }: { enabled: boolean }) {
+ return (
+
+
+ {enabled ? 'Вкл' : 'Выкл'}
+
+ )
+}
+
+function ConnectionsCell({ user }: { user: UserInfo }) {
+ const current = Number(user.current_connections ?? 0)
+ const hasMax =
+ typeof user.max_tcp_conns === 'number' && user.max_tcp_conns > 0
+ const cap = hasMax ? user.max_tcp_conns! : Math.max(current, 10)
+ const score = Math.min(100, Math.round((current / cap) * 100))
+ const indicatorClass =
+ score >= 75
+ ? '**:data-[slot=progress-indicator]:bg-emerald-500'
+ : score >= 40
+ ? '**:data-[slot=progress-indicator]:bg-amber-500'
+ : '**:data-[slot=progress-indicator]:bg-red-500'
+ const label = hasMax
+ ? `${formatNumber(current)} / ${formatNumber(user.max_tcp_conns)}`
+ : `${formatNumber(current)} / ∞`
+
+ return (
+
+
+
+ )
+}
+
+function IpListCell({ user }: { user: UserInfo }) {
+ const ips = user.active_unique_ips_list ?? []
+ if (ips.length === 0) {
+ return
—
+ }
+ const shown = ips.slice(0, 2)
+ const rest = ips.length - shown.length
+ return (
+
+ {shown.map((ip) => (
+
+ {ip}
+
+ ))}
+ {rest > 0 ? (
+
+ +{rest}
+
+ ) : null}
+
+ )
+}
+
+function QuotaCell({ user }: { user: UserInfo }) {
+ const used = Number(user.total_octets ?? 0)
+ const quota =
+ typeof user.data_quota_bytes === 'number' && user.data_quota_bytes > 0
+ ? user.data_quota_bytes
+ : null
+ if (quota == null) {
+ return (
+
+ {formatBytes(used)} · без квоты
+
+ )
+ }
+ const pct = Math.min(100, Math.round((used / quota) * 100))
+ const indicatorClass =
+ pct >= 90
+ ? '**:data-[slot=progress-indicator]:bg-red-500'
+ : pct >= 70
+ ? '**:data-[slot=progress-indicator]:bg-amber-500'
+ : '**:data-[slot=progress-indicator]:bg-emerald-500'
+
+ return (
+
+
+
+ {formatBytes(used)} / {formatBytes(quota)}
+
+
+ )
+}
+
+const UserCell = memo(function UserCell({ row }: { row: Row
}) {
+ const o = row.original
+ const enabled = o.enabled !== false
+ const initials = o.username.slice(0, 2).toUpperCase()
+
+ return (
+
+
+
+
{o.username}
+
+ {formatBytes(o.total_octets)} · {formatNumber(o.active_unique_ips)} IP
+
+
+
+
+
+
+ ),
+ },
+ },
+ {
+ id: 'ips',
+ accessorFn: (row) =>
+ [...(row.active_unique_ips_list ?? []), ...(row.recent_unique_ips_list ?? [])].join(
+ ' ',
+ ),
+ header: ({ column }) => (
+
),
- size: 120,
+ cell: ({ row }) => ,
+ size: 200,
+ enableSorting: false,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: (
+
+
+
+
+ ),
+ },
},
{
id: 'active_unique_ips',
accessorKey: 'active_unique_ips',
header: ({ column }) => (
-
+
),
cell: ({ row }) => (
-
+
{formatNumber(row.original.active_unique_ips)}
),
size: 120,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: ,
+ },
},
{
id: 'recent_unique_ips',
accessorKey: 'recent_unique_ips',
header: ({ column }) => (
-
+
),
cell: ({ row }) => (
-
+
{formatNumber(row.original.recent_unique_ips)}
),
size: 120,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: ,
+ },
+ },
+ {
+ id: 'data_quota_bytes',
+ accessorKey: 'data_quota_bytes',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => ,
+ size: 160,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: (
+
+
+
+
+ ),
+ },
},
{
id: 'total_octets',
accessorKey: 'total_octets',
header: ({ column }) => (
-
+
),
cell: ({ row }) => (
- {formatBytes(row.original.total_octets)}
+
+ {formatBytes(row.original.total_octets)}
+
),
size: 120,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: ,
+ },
+ },
+ {
+ id: 'max_tcp_conns',
+ accessorKey: 'max_tcp_conns',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => (
+
+ {row.original.max_tcp_conns != null
+ ? formatNumber(row.original.max_tcp_conns)
+ : '∞'}
+
+ ),
+ size: 110,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: ,
+ },
+ },
+ {
+ id: 'expiration_rfc3339',
+ accessorKey: 'expiration_rfc3339',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => (
+
+ {row.original.expiration_rfc3339
+ ? new Date(row.original.expiration_rfc3339).toLocaleString('ru-RU')
+ : '—'}
+
+ ),
+ size: 160,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ skeleton: ,
+ },
},
{
id: 'actions',
+ header: '',
+ cell: ({ row }) => (
+
+ ),
enableSorting: false,
enableHiding: false,
- header: () => Действия,
- cell: ({ row }) => ,
- size: 56,
+ enableResizing: false,
+ size: 52,
+ meta: {
+ skeleton: ,
+ },
},
]
}
-function UserRowActions({
- row,
- onOpen,
-}: {
- row: Row
- onOpen: (user: UserInfo) => void
-}) {
- return (
-
-
- }
- >
-
-
-
- onOpen(row.original)}>
-
- Открыть карточку
-
-
-
- )
-}
-
export function useUsersFilterFields() {
return useMemo(
() => [
@@ -144,18 +550,31 @@ export function useUsersFilterFields() {
key: 'username',
label: 'Имя',
type: 'text' as const,
- className: 'w-44',
+ className: 'w-40',
placeholder: 'Поиск…',
},
+ {
+ key: 'ip',
+ label: 'IP',
+ type: 'text' as const,
+ className: 'w-44',
+ placeholder: '1.2.3.4…',
+ },
{
key: 'enabled',
label: 'Статус',
type: 'select' as const,
- className: 'w-36',
+ searchable: false,
+ className: 'w-[140px]',
options: [
{ value: 'on', label: 'Вкл' },
{ value: 'off', label: 'Выкл' },
],
+ customValueRenderer: (values: unknown[]) => {
+ if (values.length === 0) return 'Выберите…'
+ if (values.length > 1) return `${values.length} выбрано`
+ return
+ },
},
],
[],
diff --git a/apps/web/src/components/users/users-grid-view.tsx b/apps/web/src/components/users/users-grid-view.tsx
new file mode 100644
index 0000000..1433ab7
--- /dev/null
+++ b/apps/web/src/components/users/users-grid-view.tsx
@@ -0,0 +1,605 @@
+'use no memo'
+
+import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+ type PaginationState,
+ type RowPinningState,
+ type SortingState,
+ type VisibilityState,
+} from '@tanstack/react-table'
+import {
+ CircleDotIcon,
+ FileDownIcon,
+ FilterIcon,
+ FilterXIcon,
+ MoreHorizontalIcon,
+ PinOffIcon,
+ SettingsIcon,
+ UserIcon,
+ UserPlusIcon,
+} from 'lucide-react'
+import { toast } from 'sonner'
+
+import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import {
+ createFilter,
+ Filters,
+ type Filter,
+} from '@/components/reui/filters'
+import {
+ Frame,
+ FrameDescription,
+ FrameFooter,
+ FrameHeader,
+ FramePanel,
+ FrameTitle,
+} from '@/components/reui/frame'
+import {
+ applyFiltersToData,
+ getActiveFilters,
+} from '@/components/reui-kit/filter-utils'
+import { UserDetailSheet } from '@/components/users/user-detail-sheet'
+import { UserShareLinks } from '@/components/users/user-share-links'
+import {
+ createUsersColumns,
+ useUsersFilterFields,
+} from '@/components/users/users-columns'
+import { Button } from '@telemt/ui/components/button'
+import {
+ ButtonGroup,
+ ButtonGroupText,
+} from '@telemt/ui/components/button-group'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@telemt/ui/components/dialog'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@telemt/ui/components/dropdown-menu'
+import { Field, FieldGroup, FieldLabel } from '@telemt/ui/components/field'
+import { Input } from '@telemt/ui/components/input'
+import { Separator } from '@telemt/ui/components/separator'
+import { TooltipProvider } from '@telemt/ui/components/tooltip'
+import { api, ApiError } from '@/lib/api-client'
+import {
+ collectUserShareLinks,
+ normalizeUsers,
+ unwrapData,
+ type CreateUserResponse,
+ type UserInfo,
+ type UserShareLink,
+} from '@/lib/telemt'
+
+function serializeActiveFiltersKey(active: Filter[]) {
+ return JSON.stringify(
+ active.map((f) => ({
+ field: f.field,
+ operator: f.operator,
+ values: f.values,
+ })),
+ )
+}
+
+function createDefaultUserFilters(): Filter[] {
+ return [createFilter('username', 'contains', [''])]
+}
+
+/**
+ * Users grid — 1:1 DNA of ReUI data-grid-base-2.
+ * Preview: https://reui.io/preview/base/data-grid-base-2
+ * Docs: https://reui.io/blocks
+ */
+export function UsersGridView() {
+ const qc = useQueryClient()
+ const [selectedUsername, setSelectedUsername] = useState(null)
+ const [sheetOpen, setSheetOpen] = useState(false)
+ const [createOpen, setCreateOpen] = useState(false)
+ const [username, setUsername] = useState('')
+ const [secret, setSecret] = useState('')
+ const [createdSecret, setCreatedSecret] = useState(null)
+ const [createdLinks, setCreatedLinks] = useState([])
+
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: 5,
+ })
+ const [sorting, setSorting] = useState([
+ { id: 'username', desc: false },
+ ])
+ const [columnVisibility, setColumnVisibility] = useState({
+ max_tcp_conns: false,
+ expiration_rfc3339: false,
+ recent_unique_ips: false,
+ active_unique_ips: false,
+ total_octets: false,
+ })
+ const [rowPinning, setRowPinning] = useState({
+ top: [],
+ bottom: [],
+ })
+ const [filters, setFilters] = useState(createDefaultUserFilters)
+
+ const usersQuery = useQuery({
+ queryKey: ['telemt', 'users'],
+ queryFn: () => api('/api/telemt/users'),
+ refetchInterval: 10_000,
+ })
+
+ const rows = useMemo(
+ () => normalizeUsers(usersQuery.data),
+ [usersQuery.data],
+ )
+
+ const [filteredData, setFilteredData] = useState([])
+ const isInitialLoad = useRef(true)
+ const lastAppliedActiveKey = useRef(
+ serializeActiveFiltersKey(getActiveFilters(createDefaultUserFilters())),
+ )
+
+ const resolvedRowPinning = useMemo(() => {
+ const availableIds = new Set(filteredData.map((u) => u.username))
+ return {
+ top: (rowPinning.top ?? []).filter((id) => availableIds.has(id)),
+ bottom: (rowPinning.bottom ?? []).filter((id) => availableIds.has(id)),
+ }
+ }, [filteredData, rowPinning.bottom, rowPinning.top])
+
+ const filterFields = useUsersFilterFields()
+
+ const applyFilters = useCallback(
+ (source: UserInfo[], nextFilters: Filter[]) => {
+ return applyFiltersToData(source, nextFilters, (item, field) => {
+ if (field === 'enabled') return item.enabled === false ? 'off' : 'on'
+ if (field === 'ip') {
+ return [
+ ...(item.active_unique_ips_list ?? []),
+ ...(item.recent_unique_ips_list ?? []),
+ ].join(' ')
+ }
+ return (item as unknown as Record)[field]
+ })
+ },
+ [],
+ )
+
+ const handleFiltersChange = useCallback(
+ (newFilters: Filter[]) => {
+ setFilters(newFilters)
+ const newActive = getActiveFilters(newFilters)
+ const nextKey = serializeActiveFiltersKey(newActive)
+ if (nextKey === lastAppliedActiveKey.current) return
+ lastAppliedActiveKey.current = nextKey
+ setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+ setFilteredData(applyFilters(rows, newFilters))
+ },
+ [applyFilters, rows],
+ )
+
+ useEffect(() => {
+ setFilteredData(applyFilters(rows, filters))
+ if (isInitialLoad.current) isInitialLoad.current = false
+ }, [rows, filters, applyFilters])
+
+ const handleOpen = useCallback((user: UserInfo) => {
+ setSelectedUsername(user.username)
+ setSheetOpen(true)
+ }, [])
+
+ const removeUser = useMutation({
+ mutationFn: async (user: UserInfo) => {
+ await api(`/api/telemt/users/${encodeURIComponent(user.username)}`, {
+ method: 'DELETE',
+ })
+ },
+ onSuccess: () => {
+ void qc.invalidateQueries({ queryKey: ['telemt', 'users'] })
+ toast.success('Пользователь удалён')
+ },
+ onError: (err) => {
+ toast.error(err instanceof ApiError ? err.message : 'Не удалось удалить')
+ },
+ })
+
+ const columns = useMemo(
+ () =>
+ createUsersColumns({
+ onOpen: handleOpen,
+ onDelete: (user) => removeUser.mutate(user),
+ }),
+ [handleOpen, removeUser],
+ )
+
+ const [columnOrder, setColumnOrder] = useState(() =>
+ columns.map((c) => c.id as string),
+ )
+
+ const table = useReactTable({
+ columns,
+ data: filteredData,
+ pageCount: Math.ceil(filteredData.length / pagination.pageSize) || 1,
+ getRowId: (row) => row.username,
+ state: {
+ pagination,
+ sorting,
+ columnOrder,
+ columnVisibility,
+ rowPinning: resolvedRowPinning,
+ },
+ enableRowPinning: true,
+ keepPinnedRows: true,
+ onColumnOrderChange: setColumnOrder,
+ onColumnVisibilityChange: setColumnVisibility,
+ onPaginationChange: setPagination,
+ onSortingChange: setSorting,
+ onRowPinningChange: setRowPinning,
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ })
+
+ const create = useMutation({
+ mutationFn: async () => {
+ const body: { username: string; secret?: string } = {
+ username: username.trim(),
+ }
+ if (secret.trim()) body.secret = secret.trim()
+ return api('/api/telemt/users', {
+ method: 'POST',
+ body: JSON.stringify(body),
+ })
+ },
+ onSuccess: async (res) => {
+ const nested = unwrapData(res)
+ const data =
+ nested ??
+ (res && typeof res === 'object' && 'secret' in res
+ ? (res as CreateUserResponse)
+ : null)
+ const createdName = data?.user?.username ?? username.trim()
+ let links = collectUserShareLinks(data?.user?.links)
+ if (links.length === 0 && createdName) {
+ try {
+ const detail = await api(
+ `/api/telemt/users/${encodeURIComponent(createdName)}`,
+ )
+ const user =
+ unwrapData(detail) ?? (detail as UserInfo | undefined)
+ links = collectUserShareLinks(user?.links)
+ } catch {
+ // links optional if Telemt omits them
+ }
+ }
+ setCreatedSecret(data?.secret ?? null)
+ setCreatedLinks(links)
+ setUsername('')
+ setSecret('')
+ void qc.invalidateQueries({ queryKey: ['telemt', 'users'] })
+ toast.success('Пользователь создан')
+ if (!data?.secret && links.length === 0) {
+ setCreateOpen(false)
+ }
+ },
+ onError: (err) => {
+ toast.error(err instanceof ApiError ? err.message : 'Не удалось создать')
+ },
+ })
+
+ function handleCreateSubmit(e: FormEvent) {
+ e.preventDefault()
+ if (!username.trim()) return
+ create.mutate()
+ }
+
+ function handleCreateOpenChange(next: boolean) {
+ setCreateOpen(next)
+ if (!next) {
+ setCreatedSecret(null)
+ setCreatedLinks([])
+ setUsername('')
+ setSecret('')
+ }
+ }
+
+ const showClearButton = filters.length > 0
+ const showCreated = Boolean(createdSecret) || createdLinks.length > 0
+
+ return (
+ <>
+
+ handleOpen(row)}
+ emptyMessage={
+ !usersQuery.isLoading && filteredData.length === 0
+ ? 'Нет пользователей по фильтрам. Сбросьте фильтры или создайте аккаунт.'
+ : undefined
+ }
+ tableLayout={{
+ rowsPinnable: true,
+ columnsPinnable: true,
+ columnsResizable: true,
+ columnsMovable: true,
+ columnsVisibility: true,
+ dense: true,
+ }}
+ >
+
+
+
+
+ Пользователи
+
+
+ {usersQuery.isLoading
+ ? 'Загрузка…'
+ : `${rows.length} аккаунтов Telemt`}
+
+
+
+
+
+
+
+
+ Filters
+
+ }
+ />
+
+ {(resolvedRowPinning.top?.length ?? 0) > 0 && (
+
+
+
+ {resolvedRowPinning.top?.length}{' '}
+ {resolvedRowPinning.top?.length === 1
+ ? 'user'
+ : 'users'}{' '}
+ pinned
+
+
+ )}
+ {showClearButton && (
+
+ )}
+
+
+
+ Actions
+
+ }
+ />
+
+
+ {
+ const lines = [
+ 'username,enabled,connections,active_ips,traffic',
+ ...filteredData.map(
+ (u) =>
+ `${u.username},${u.enabled !== false},${u.current_connections ?? 0},${u.active_unique_ips ?? 0},${u.total_octets ?? 0}`,
+ ),
+ ]
+ const blob = new Blob([lines.join('\n')], {
+ type: 'text/csv;charset=utf-8',
+ })
+ const url = URL.createObjectURL(blob)
+ const a = document.createElement('a')
+ a.href = url
+ a.download = 'telemt-users.csv'
+ a.click()
+ URL.revokeObjectURL(url)
+ toast.success('CSV экспортирован')
+ }}
+ >
+
+ Export CSV
+
+
+ toast.message('Фильтр по статусу', {
+ description: 'Используйте Filters → Статус.',
+ })
+ }
+ >
+
+ По статусу
+
+
+
+ toast.info('Настройки колонок', {
+ description:
+ 'В заголовках таблицы можно показать или скрыть поля.',
+ })
+ }
+ >
+
+ Column settings
+
+
+
+
+
+
+
+ Не удалось загрузить пользователей.
+
+
@@ -78,7 +98,7 @@ function RuntimePage() {
label="ME runtime"
value={
- {String(gateData.me_runtime_ready ?? pool.status ?? '—')}
+ {String(gateData.me_runtime_ready ?? pool.status ?? (meReady ? 'ready' : '—'))}
}
/>
@@ -102,7 +122,15 @@ function RuntimePage() {
/>
+
+
+
+
(null)
- const [sheetOpen, setSheetOpen] = useState(false)
- const [createOpen, setCreateOpen] = useState(false)
- const [username, setUsername] = useState('')
- const [secret, setSecret] = useState('')
- const [createdSecret, setCreatedSecret] = useState(null)
-
- const [pagination, setPagination] = useState({
- pageIndex: 0,
- pageSize: 10,
- })
- const [sorting, setSorting] = useState([
- { id: 'username', desc: false },
- ])
- const [filters, setFilters] = useState(() => [
- createFilter('username', 'contains', ['']),
- ])
-
- const usersQuery = useQuery({
- queryKey: ['telemt', 'users'],
- queryFn: () => api('/api/telemt/users'),
- refetchInterval: 10_000,
- })
-
- const rows = useMemo(
- () => normalizeUsers(usersQuery.data),
- [usersQuery.data],
- )
-
- const filteredData = useMemo(() => {
- return applyFiltersToData(rows, filters, (item, field) => {
- if (field === 'enabled') return item.enabled === false ? 'off' : 'on'
- return (item as unknown as Record)[field]
- })
- }, [rows, filters])
-
- useEffect(() => {
- setPagination((prev) => ({ ...prev, pageIndex: 0 }))
- }, [filters])
-
- const handleOpen = (user: UserInfo) => {
- setSelectedUsername(user.username)
- setSheetOpen(true)
- }
-
- const columns = useMemo(
- () => createUsersColumns({ onOpen: handleOpen }),
- [],
- )
- const filterFields = useUsersFilterFields()
- const activeFilters = getActiveFilters(filters)
-
- const table = useReactTable({
- data: filteredData,
- columns,
- state: { pagination, sorting },
- onPaginationChange: setPagination,
- onSortingChange: setSorting,
- getRowId: (row) => row.username,
- getCoreRowModel: getCoreRowModel(),
- getFilteredRowModel: getFilteredRowModel(),
- getSortedRowModel: getSortedRowModel(),
- getPaginationRowModel: getPaginationRowModel(),
- })
-
- const create = useMutation({
- mutationFn: async () => {
- const body: { username: string; secret?: string } = {
- username: username.trim(),
- }
- if (secret.trim()) body.secret = secret.trim()
- return api('/api/telemt/users', {
- method: 'POST',
- body: JSON.stringify(body),
- })
- },
- onSuccess: (res) => {
- const nested = unwrapData(res)
- const data =
- nested ??
- (res && typeof res === 'object' && 'secret' in res
- ? (res as CreateUserResponse)
- : null)
- setCreatedSecret(data?.secret ?? null)
- setUsername('')
- setSecret('')
- void qc.invalidateQueries({ queryKey: ['telemt', 'users'] })
- toast.success('Пользователь создан')
- if (!data?.secret) setCreateOpen(false)
- },
- onError: (err) => {
- toast.error(err instanceof ApiError ? err.message : 'Не удалось создать')
- },
- })
-
- function handleCreateSubmit(e: FormEvent) {
- e.preventDefault()
- if (!username.trim()) return
- create.mutate()
- }
-
- function handleCreateOpenChange(next: boolean) {
- setCreateOpen(next)
- if (!next) {
- setCreatedSecret(null)
- setUsername('')
- setSecret('')
- }
- }
-
- return (
-
-
setCreateOpen(true)}>
-
- Создать
-
- }
- />
-
-
- handleOpen(row)}
- tableLayout={{
- dense: true,
- width: 'auto',
- headerSticky: true,
- }}
- >
-
-
-
- Список пользователей
-
- {usersQuery.isLoading
- ? 'Загрузка…'
- : `${filteredData.length} из ${rows.length}`}
-
-
- {activeFilters.length > 0 ? (
-
- ) : null}
-
-
-
-
-
-
-
-
- {usersQuery.isError ? (
-
-
- Не удалось загрузить пользователей.
-
-
- setCreateOpen(true)}>
- Создать пользователя
-
- }
- />
-
- ) : (
- <>
-
-
-
-
-
-
- Клик по строке открывает карточку
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-