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.
This commit is contained in:
Leonid Pershin
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user