Add admin configs endpoint and related UI components

- Introduced a new endpoint to list all admin configs, enhancing the admin interface for better management. - Updated API documentation to include the new `/configs` endpoint with pagination and search capabilities. - Added routing and UI elements for the configs section in the admin panel, improving navigation and accessibility. - Enhanced localization for the configs feature in both Russian and English, ensuring a user-friendly experience.
2026-07-13 16:08:50 +03:00
parent 7fce5ef181
commit 39a8b30b03
12 changed files with 442 additions and 0 deletions
@@ -9,6 +9,7 @@ const TABS = [
  { to: '/admin', key: 'overview' },
  { to: '/admin/activation', key: 'activation' },
  { to: '/admin/users', key: 'users' },
+  { to: '/admin/configs', key: 'configs' },
  { to: '/admin/roles', key: 'roles' },
  { to: '/admin/nodes', key: 'nodes' },
  { to: '/admin/apps', key: 'apps' },
@@ -0,0 +1,165 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { Trash2 } from 'lucide-react'
+import { toast } from '@/shared/ui/toast-store'
+import { Input } from '@/shared/ui/input'
+import { Button } from '@/shared/ui/button'
+import { Badge } from '@/shared/ui/badge'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
+import { formatBytes } from '@/shared/lib/format'
+import { listAllConfigs } from '@/features/admin/configs/api'
+import { forceRevokeConfig } from '@/features/admin/users/api'
+import type { ConfigStatus } from '@/shared/api/types'
+
+export const Route = createFileRoute('/admin/configs')({ component: AdminConfigsPage })
+
+const PAGE_SIZE = 20
+
+const STATUS_VARIANT: Record<ConfigStatus, 'success' | 'warning' | 'destructive'> = {
+  Active: 'success',
+  Disabled: 'warning',
+  Expired: 'destructive',
+  LimitReached: 'destructive',
+  Revoked: 'destructive',
+}
+
+function AdminConfigsPage() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const [search, setSearch] = useState('')
+  const [status, setStatus] = useState<ConfigStatus | 'all'>('all')
+  const [page, setPage] = useState(1)
+
+  const statusFilter = status === 'all' ? undefined : status
+
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ['admin-configs', page, search, statusFilter],
+    queryFn: () => listAllConfigs(page, PAGE_SIZE, search || undefined, statusFilter),
+  })
+
+  const revokeMutation = useMutation({
+    mutationFn: (configId: string) => forceRevokeConfig(configId),
+    onSuccess: async () => {
+      toast.success(t('configs.revoked'))
+      await queryClient.invalidateQueries({ queryKey: ['admin-configs'] })
+    },
+    onError: () => toast.error(t('auth.genericError')),
+  })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-2">
+        <Input
+          placeholder={t('admin.configs.searchPlaceholder')}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value)
+            setPage(1)
+          }}
+          className="max-w-sm"
+        />
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value as ConfigStatus | 'all')
+            setPage(1)
+          }}
+        >
+          <SelectTrigger className="w-48">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('admin.configs.allStatuses')}</SelectItem>
+            {(['Active', 'Disabled', 'Expired', 'LimitReached', 'Revoked'] satisfies ConfigStatus[]).map((s) => (
+              <SelectItem key={s} value={s}>
+                {t(`configs.status.${s}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {isLoading && <p className="text-sm text-muted-foreground">…</p>}
+
+      {isError && (
+        <div className="flex items-center gap-2">
+          <p className="text-sm text-muted-foreground">{t('auth.genericError')}</p>
+          <Button variant="outline" size="sm" onClick={() => void refetch()}>
+            {t('activation.retry')}
+          </Button>
+        </div>
+      )}
+
+      {data && (
+        <>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-border text-muted-foreground">
+                  <th className="py-2 font-medium">{t('admin.configs.owner')}</th>
+                  <th className="py-2 font-medium">{t('admin.users.configs')}</th>
+                  <th className="py-2 font-medium">{t('admin.configs.protocol')}</th>
+                  <th className="py-2 font-medium">{t('admin.configs.node')}</th>
+                  <th className="py-2 font-medium">{t('admin.configs.traffic')}</th>
+                  <th className="py-2 font-medium">{t('admin.configs.statusLabel')}</th>
+                  <th className="py-2" />
+                </tr>
+              </thead>
+              <tbody>
+                {data.items.map((config) => (
+                  <tr key={config.id} className="border-b border-border align-top">
+                    <td className="py-2">{config.userName}</td>
+                    <td className="py-2">
+                      <div>{config.label ?? config.clientEmail}</div>
+                      <div className="font-mono text-xs text-muted-foreground/60">{config.clientEmail}</div>
+                    </td>
+                    <td className="py-2">
+                      <Badge variant="outline">{config.protocol}</Badge>
+                    </td>
+                    <td className="py-2">
+                      {config.nodeName} · {config.location}
+                    </td>
+                    <td className="py-2 text-muted-foreground">
+                      ↑ {formatBytes(config.usedUpBytes)} ↓ {formatBytes(config.usedDownBytes)}
+                    </td>
+                    <td className="py-2">
+                      <Badge variant={STATUS_VARIANT[config.status]}>{t(`configs.status.${config.status}`)}</Badge>
+                    </td>
+                    <td className="py-2 text-right">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={config.status === 'Revoked' || revokeMutation.isPending}
+                        onClick={() => {
+                          if (confirm(t('configs.confirmRevoke'))) revokeMutation.mutate(config.id)
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {data.items.length === 0 && <p className="text-sm text-muted-foreground">{t('admin.configs.empty')}</p>}
+
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">{t('admin.configs.total', { count: data.total })}</span>
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+                {t('admin.prev')}
+              </Button>
+              <Button variant="outline" size="sm" disabled={page * PAGE_SIZE >= data.total} onClick={() => setPage((p) => p + 1)}>
+                {t('admin.next')}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}