@@ -50,13 +52,7 @@ export function AnalyticsDashboardSkeleton() {
}
export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
- return (
-
- {Array.from({ length: count }).map((_, i) => (
-
- ))}
-
- )
+ return
}
export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
diff --git a/apps/web/src/hooks/use-file-upload.ts b/apps/web/src/hooks/use-file-upload.ts
new file mode 100644
index 0000000..dc31bca
--- /dev/null
+++ b/apps/web/src/hooks/use-file-upload.ts
@@ -0,0 +1,415 @@
+import type React from "react"
+import {
+ useCallback,
+ useRef,
+ useState,
+ type ChangeEvent,
+ type DragEvent,
+ type InputHTMLAttributes,
+} from "react"
+
+export type FileMetadata = {
+ name: string
+ size: number
+ type: string
+ url: string
+ id: string
+}
+
+export type FileWithPreview = {
+ file: File | FileMetadata
+ id: string
+ preview?: string
+}
+
+export type FileUploadOptions = {
+ maxFiles?: number // Only used when multiple is true, defaults to Infinity
+ maxSize?: number // in bytes
+ accept?: string
+ multiple?: boolean // Defaults to false
+ initialFiles?: FileMetadata[]
+ onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change
+ onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added
+ onError?: (errors: string[]) => void
+}
+
+export type FileUploadState = {
+ files: FileWithPreview[]
+ isDragging: boolean
+ errors: string[]
+}
+
+export type FileUploadActions = {
+ addFiles: (files: FileList | File[]) => void
+ removeFile: (id: string) => void
+ clearFiles: () => void
+ clearErrors: () => void
+ handleDragEnter: (e: DragEvent
) => void
+ handleDragLeave: (e: DragEvent) => void
+ handleDragOver: (e: DragEvent) => void
+ handleDrop: (e: DragEvent) => void
+ handleFileChange: (e: ChangeEvent) => void
+ openFileDialog: () => void
+ getInputProps: (
+ props?: InputHTMLAttributes
+ ) => InputHTMLAttributes & {
+ ref: React.Ref
+ }
+}
+
+export const useFileUpload = (
+ options: FileUploadOptions = {}
+): [FileUploadState, FileUploadActions] => {
+ const {
+ maxFiles = Number.POSITIVE_INFINITY,
+ maxSize = Number.POSITIVE_INFINITY,
+ accept = "*",
+ multiple = false,
+ initialFiles = [],
+ onFilesChange,
+ onFilesAdded,
+ onError,
+ } = options
+
+ const [state, setState] = useState({
+ files: initialFiles.map((file) => ({
+ file,
+ id: file.id,
+ preview: file.url,
+ })),
+ isDragging: false,
+ errors: [],
+ })
+
+ const inputRef = useRef(null)
+
+ const validateFile = useCallback(
+ (file: File | FileMetadata): string | null => {
+ if (file instanceof File) {
+ if (file.size > maxSize) {
+ return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
+ }
+ } else {
+ if (file.size > maxSize) {
+ return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`
+ }
+ }
+
+ if (accept !== "*") {
+ const acceptedTypes = accept.split(",").map((type) => type.trim())
+ const fileType = file instanceof File ? file.type || "" : file.type
+ const fileExtension = `.${file instanceof File ? file.name.split(".").pop() : file.name.split(".").pop()}`
+
+ const isAccepted = acceptedTypes.some((type) => {
+ if (type.startsWith(".")) {
+ return fileExtension.toLowerCase() === type.toLowerCase()
+ }
+ if (type.endsWith("/*")) {
+ const baseType = type.split("/")[0]
+ return fileType.startsWith(`${baseType}/`)
+ }
+ return fileType === type
+ })
+
+ if (!isAccepted) {
+ return `File "${file instanceof File ? file.name : file.name}" is not an accepted file type.`
+ }
+ }
+
+ return null
+ },
+ [accept, maxSize]
+ )
+
+ const createPreview = useCallback(
+ (file: File | FileMetadata): string | undefined => {
+ if (file instanceof File) {
+ return URL.createObjectURL(file)
+ }
+ return file.url
+ },
+ []
+ )
+
+ const generateUniqueId = useCallback((file: File | FileMetadata): string => {
+ if (file instanceof File) {
+ return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+ }
+ return file.id
+ }, [])
+
+ const clearFiles = useCallback(() => {
+ setState((prev) => {
+ // Clean up object URLs
+ for (const file of prev.files) {
+ if (
+ file.preview &&
+ file.file instanceof File &&
+ file.file.type.startsWith("image/")
+ ) {
+ URL.revokeObjectURL(file.preview)
+ }
+ }
+
+ if (inputRef.current) {
+ inputRef.current.value = ""
+ }
+
+ const newState = {
+ ...prev,
+ files: [],
+ errors: [],
+ }
+
+ onFilesChange?.(newState.files)
+ return newState
+ })
+ }, [onFilesChange])
+
+ const addFiles = useCallback(
+ (newFiles: FileList | File[]) => {
+ if (!newFiles || newFiles.length === 0) return
+
+ const newFilesArray = Array.from(newFiles)
+ const errors: string[] = []
+
+ // Clear existing errors when new files are uploaded
+ setState((prev) => ({ ...prev, errors: [] }))
+
+ // In single file mode, clear existing files first
+ if (!multiple) {
+ clearFiles()
+ }
+
+ // Check if adding these files would exceed maxFiles (only in multiple mode)
+ if (
+ multiple &&
+ maxFiles !== Number.POSITIVE_INFINITY &&
+ state.files.length + newFilesArray.length > maxFiles
+ ) {
+ errors.push(`You can only upload a maximum of ${maxFiles} files.`)
+ onError?.(errors)
+ setState((prev) => ({ ...prev, errors }))
+ return
+ }
+
+ const validFiles: FileWithPreview[] = []
+
+ for (const file of newFilesArray) {
+ // Only check for duplicates if multiple files are allowed
+ if (multiple) {
+ const isDuplicate = state.files.some(
+ (existingFile) =>
+ existingFile.file.name === file.name &&
+ existingFile.file.size === file.size
+ )
+
+ // Skip duplicate files silently
+ if (isDuplicate) {
+ return
+ }
+ }
+
+ // Check file size
+ if (file.size > maxSize) {
+ errors.push(
+ multiple
+ ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`
+ : `File exceeds the maximum size of ${formatBytes(maxSize)}.`
+ )
+ continue
+ }
+
+ const error = validateFile(file)
+ if (error) {
+ errors.push(error)
+ } else {
+ validFiles.push({
+ file,
+ id: generateUniqueId(file),
+ preview: createPreview(file),
+ })
+ }
+ }
+
+ // Only update state if we have valid files to add
+ if (validFiles.length > 0) {
+ // Call the onFilesAdded callback with the newly added valid files
+ onFilesAdded?.(validFiles)
+
+ setState((prev) => {
+ const newFiles = !multiple
+ ? validFiles
+ : [...prev.files, ...validFiles]
+ onFilesChange?.(newFiles)
+ return {
+ ...prev,
+ files: newFiles,
+ errors,
+ }
+ })
+ } else if (errors.length > 0) {
+ onError?.(errors)
+ setState((prev) => ({
+ ...prev,
+ errors,
+ }))
+ }
+
+ // Reset input value after handling files
+ if (inputRef.current) {
+ inputRef.current.value = ""
+ }
+ },
+ [
+ state.files,
+ maxFiles,
+ multiple,
+ maxSize,
+ validateFile,
+ createPreview,
+ generateUniqueId,
+ clearFiles,
+ onFilesChange,
+ onFilesAdded,
+ ]
+ )
+
+ const removeFile = useCallback(
+ (id: string) => {
+ setState((prev) => {
+ const fileToRemove = prev.files.find((file) => file.id === id)
+ if (
+ fileToRemove &&
+ fileToRemove.preview &&
+ fileToRemove.file instanceof File &&
+ fileToRemove.file.type.startsWith("image/")
+ ) {
+ URL.revokeObjectURL(fileToRemove.preview)
+ }
+
+ const newFiles = prev.files.filter((file) => file.id !== id)
+ onFilesChange?.(newFiles)
+
+ return {
+ ...prev,
+ files: newFiles,
+ errors: [],
+ }
+ })
+ },
+ [onFilesChange]
+ )
+
+ const clearErrors = useCallback(() => {
+ setState((prev) => ({
+ ...prev,
+ errors: [],
+ }))
+ }, [])
+
+ const handleDragEnter = useCallback((e: DragEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setState((prev) => ({ ...prev, isDragging: true }))
+ }, [])
+
+ const handleDragLeave = useCallback((e: DragEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+
+ if (e.currentTarget.contains(e.relatedTarget as Node)) {
+ return
+ }
+
+ setState((prev) => ({ ...prev, isDragging: false }))
+ }, [])
+
+ const handleDragOver = useCallback((e: DragEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+ }, [])
+
+ const handleDrop = useCallback(
+ (e: DragEvent) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setState((prev) => ({ ...prev, isDragging: false }))
+
+ // Don't process files if the input is disabled
+ if (inputRef.current?.disabled) {
+ return
+ }
+
+ if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+ // In single file mode, only use the first file
+ if (!multiple) {
+ const file = e.dataTransfer.files[0]
+ addFiles([file])
+ } else {
+ addFiles(e.dataTransfer.files)
+ }
+ }
+ },
+ [addFiles, multiple]
+ )
+
+ const handleFileChange = useCallback(
+ (e: ChangeEvent) => {
+ if (e.target.files && e.target.files.length > 0) {
+ addFiles(e.target.files)
+ }
+ },
+ [addFiles]
+ )
+
+ const openFileDialog = useCallback(() => {
+ if (inputRef.current) {
+ inputRef.current.click()
+ }
+ }, [])
+
+ const getInputProps = useCallback(
+ (props: InputHTMLAttributes = {}) => {
+ return {
+ ...props,
+ type: "file" as const,
+ onChange: handleFileChange,
+ accept: props.accept || accept,
+ multiple: props.multiple !== undefined ? props.multiple : multiple,
+ ref: inputRef,
+ }
+ },
+ [accept, multiple, handleFileChange]
+ )
+
+ return [
+ state,
+ {
+ addFiles,
+ removeFile,
+ clearFiles,
+ clearErrors,
+ handleDragEnter,
+ handleDragLeave,
+ handleDragOver,
+ handleDrop,
+ handleFileChange,
+ openFileDialog,
+ getInputProps,
+ },
+ ]
+}
+
+// Helper function to format bytes to human-readable format
+export const formatBytes = (bytes: number, decimals = 2): string => {
+ if (bytes === 0) return "0 Bytes"
+
+ const k = 1024
+ const dm = decimals < 0 ? 0 : decimals
+ const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+ return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i]
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/ui-surface.ts b/apps/web/src/lib/ui-surface.ts
index c0f58b1..76d5e57 100644
--- a/apps/web/src/lib/ui-surface.ts
+++ b/apps/web/src/lib/ui-surface.ts
@@ -1,27 +1,26 @@
/**
* EvoBGP UI surface contract (ReUI Pro).
*
- * Primary surface: **Card** via `PanelCard` / `DataGridCard`.
- * All route-level panels, KPI tiles, charts and data grids use shadcn Card —
- * not ReUI Frame — for visual consistency across screens.
+ * KPI tiles: **stats-12** pattern via `KpiStatGrid` / `SectionCards` (Frame + icon tile + badge).
+ * Panels and data grids: shadcn Card via `PanelCard` / `DataGridCard`.
*
- * ReUI Frame blocks from registry are adapted into Card composition when installed.
- *
- * @see https://reui.io/blocks — card category
+ * @see https://reui.io/blocks — stats-12, dashboard-1
* @see `.agents/skills/shadcn-react/SKILL.md`
*/
export const UI_SURFACE = 'card' as const
-/** Shared padding for KPI / metric tiles inside PanelCard. */
-export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
+/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
+export const kpiStatGridClassName = '@container w-full'
-/** Compact 6-tile KPI row on dashboard overview. */
-export const dashboardKpiGridClassName =
- 'grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6'
+/** @deprecated Use kpiStatGridClassName — kept for legacy imports. */
+export const dashboardKpiGridClassName = kpiStatGridClassName
-/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
+/** @deprecated Sparkline KPI row replaced by stats-12 grid. */
export const kpiGridClassName =
- 'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
+ 'grid grid-cols-1 gap-5 @3xl:grid-cols-2 @6xl:grid-cols-4'
+
+/** @deprecated */
+export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
/** Two-column chart panel row (monitoring / network overview). */
export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
diff --git a/apps/web/src/routes/_auth.tsx b/apps/web/src/routes/_auth.tsx
index 91ab327..03229ed 100644
--- a/apps/web/src/routes/_auth.tsx
+++ b/apps/web/src/routes/_auth.tsx
@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_auth')({
const raw =
typeof window !== 'undefined' ? window.localStorage.getItem(TOKEN_STORAGE_KEY) : null
if (!raw || !normalizeApiToken(raw)) {
- throw redirect({ to: '/settings', search: { reason: 'token-required' } })
+ throw redirect({ to: '/settings', search: { tab: 'connection', reason: 'token-required' } })
}
},
component: AuthLayout,
diff --git a/apps/web/src/routes/_auth/access.tsx b/apps/web/src/routes/_auth/access.tsx
index 03394aa..74ea51b 100644
--- a/apps/web/src/routes/_auth/access.tsx
+++ b/apps/web/src/routes/_auth/access.tsx
@@ -8,6 +8,7 @@ import { PanelCard } from '@/components/panel-card'
import { AccessApiKeysCard } from '@/components/access/access-api-keys-card'
import { PageHeader } from '@/components/page-header'
+import { Badge } from '@/components/reui/badge'
import { SectionCards, type SectionCardItem } from '@/components/section-cards'
import { SectionCardsSkeleton } from '@/components/skeletons'
import { authSessionQueryOptions } from '@/queries/auth'
@@ -39,20 +40,32 @@ function AccessComponent() {
label: 'Всего ключей',
value: keys.length,
icon: ,
- hint: 'в tenant',
+ badge: (
+
+ в tenant
+
+ ),
},
{
label: 'Активных',
value: activeCount,
icon: ,
- hint: 'не отозваны',
+ badge: (
+
+ не отозваны
+
+ ),
},
{
label: 'Отозванных',
value: revokedCount,
icon: ,
- hint: 'revoked',
variant: revokedCount > 0 ? 'warning' : 'default',
+ badge: (
+ 0 ? 'warning-light' : 'outline'} size="sm">
+ revoked
+
+ ),
},
],
[keys.length, activeCount, revokedCount],
@@ -96,7 +109,11 @@ function AccessComponent() {
) : (
Не удалось определить сессию. Укажите токен в{' '}
-
+
настройках
{' '}
(для dev-окружения — dev при включённом demo-seed).
diff --git a/apps/web/src/routes/_auth/directories.tsx b/apps/web/src/routes/_auth/directories.tsx
index 15a9715..aa84716 100644
--- a/apps/web/src/routes/_auth/directories.tsx
+++ b/apps/web/src/routes/_auth/directories.tsx
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
import { BookText, Globe, RefreshCw, Tags } from 'lucide-react'
import { Button } from '@evobgp/ui/components/button'
+import { Badge } from '@/components/reui/badge'
import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
import { DataGridCard } from '@/components/data-grid-shell'
import { DirectoriesCommunitiesGrid } from '@/components/directories/directories-communities-grid'
@@ -30,19 +31,31 @@ function DirectoriesComponent() {
label: 'Сообщества BGP',
value: communities.length,
icon: ,
- hint: 'теги префиксов в AS- и CDN-модулях',
+ badge: (
+
+ теги префиксов
+
+ ),
},
{
label: 'DoH профили',
value: dohProfiles.length,
icon: ,
- hint: 'резолвинг доменных модулей',
+ badge: (
+
+ резолвинг доменов
+
+ ),
},
{
label: 'Справочники',
value: 'Общие',
icon: ,
- hint: 'используются всеми модулями tenant',
+ badge: (
+
+ все модули tenant
+
+ ),
},
]
diff --git a/apps/web/src/routes/_auth/schedule.tsx b/apps/web/src/routes/_auth/schedule.tsx
index 1ba95dd..4f3a68c 100644
--- a/apps/web/src/routes/_auth/schedule.tsx
+++ b/apps/web/src/routes/_auth/schedule.tsx
@@ -2,9 +2,10 @@ import { createFileRoute } from '@tanstack/react-router'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { AlertTriangle, Clock, ListTodo, RefreshCw } from 'lucide-react'
import { toast } from 'sonner'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
import { Button } from '@evobgp/ui/components/button'
+import { Badge } from '@/components/reui/badge'
import { DataGridCard } from '@/components/data-grid-shell'
import { ScheduleAgendaPanel } from '@/components/schedule/schedule-agenda-panel'
import { ScheduleJobsCard } from '@/components/schedule/schedule-jobs-card'
@@ -36,39 +37,37 @@ function ScheduleComponent() {
['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
).length
- // #region agent log
- useEffect(() => {
- fetch('http://127.0.0.1:7311/ingest/6b35c3ae-1bcd-4c9c-81eb-f157c9347393', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'ce85d7' },
- body: JSON.stringify({
- sessionId: 'ce85d7',
- runId: 'pre-fix',
- hypothesisId: 'C',
- location: 'schedule.tsx:mount',
- message: 'schedule page data loaded',
- data: {
- modules: modules.length,
- jobs: jobs.length,
- loading,
- modulesError: modulesQ.isError,
- jobsError: jobsQ.isError,
- },
- timestamp: Date.now(),
- }),
- }).catch(() => {})
- }, [modules.length, jobs.length, loading, modulesQ.isError, jobsQ.isError])
- // #endregion
-
const items: SectionCardItem[] = [
- { label: 'Всего задач', value: jobs.length, icon: , hint: 'в выборке' },
- { label: 'В работе', value: running, icon: , hint: 'в очереди и выполняются' },
+ {
+ label: 'Всего задач',
+ value: jobs.length,
+ icon: ,
+ badge: (
+
+ в выборке
+
+ ),
+ },
+ {
+ label: 'В работе',
+ value: running,
+ icon: ,
+ badge: (
+ 0 ? 'info-light' : 'outline'} size="sm">
+ очередь и выполнение
+
+ ),
+ },
{
label: 'С ошибкой',
value: failed,
icon: ,
- hint: failed > 0 ? 'требуют внимания' : 'без ошибок',
variant: failed > 0 ? 'warning' : 'default',
+ badge: (
+ 0 ? 'warning-light' : 'success-light'} size="sm">
+ {failed > 0 ? 'требуют внимания' : 'без ошибок'}
+
+ ),
},
]
diff --git a/apps/web/src/routes/_auth/settings.tsx b/apps/web/src/routes/_auth/settings.tsx
index 20b8ef2..99bbac4 100644
--- a/apps/web/src/routes/_auth/settings.tsx
+++ b/apps/web/src/routes/_auth/settings.tsx
@@ -1,213 +1,51 @@
-import { createFileRoute, Link, useNavigate, useRouterState } from '@tanstack/react-router'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Moon, Save, Sun, SunMoon } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
+import { createFileRoute } from '@tanstack/react-router'
+import { z } from 'zod'
-import { Badge } from '@/components/reui/badge'
-import { LoadingButton } from '@/components/loading-button'
import { PageHeader } from '@/components/page-header'
-import { PanelCard } from '@/components/panel-card'
-import { SettingsSettingField } from '@/components/settings/settings-setting-field'
-import { DEV_API_TOKEN, normalizeApiToken, setToken, TOKEN_STORAGE_KEY } from '@/lib/api-client'
-import { authKeys, authSessionQueryOptions } from '@/queries/auth'
-import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
-import { Button } from '@evobgp/ui/components/button'
-import { FieldGroup } from '@evobgp/ui/components/field'
-import { Input } from '@evobgp/ui/components/input'
+import { SettingsPageShell } from '@/components/settings/settings-page-shell'
import {
- ToggleGroup,
- ToggleGroupItem,
-} from '@evobgp/ui/components/toggle-group'
+ type SettingsTab,
+} from '@/components/settings/settings-tabs-data'
+
+const settingsSearchSchema = z.object({
+ tab: z
+ .enum(['connection', 'session', 'appearance', 'sections'])
+ .catch('connection'),
+ reason: z.enum(['token-required']).optional(),
+})
export const Route = createFileRoute('/_auth/settings')({
component: SettingsComponent,
+ validateSearch: (search) => settingsSearchSchema.parse(search),
})
-const THEME_OPTIONS = [
- { value: 'light', label: 'Светлая', icon: Sun },
- { value: 'dark', label: 'Тёмная', icon: Moon },
- { value: 'system', label: 'Система', icon: SunMoon },
-] as const
-
function SettingsComponent() {
- const navigate = useNavigate()
- const tokenRequired = useRouterState({
- select: (s) => new URLSearchParams(s.location.search).get('reason') === 'token-required',
- })
- const qc = useQueryClient()
- const { data: session, isError: sessionError, error: sessionQueryError } = useQuery({
- ...authSessionQueryOptions(),
- enabled: Boolean(
- typeof window !== 'undefined' && window.localStorage.getItem(TOKEN_STORAGE_KEY)?.trim(),
- ),
- })
- const { theme, setTheme } = useTheme()
- const [token, setTokenValue] = useState('')
+ const navigate = Route.useNavigate()
+ const { tab, reason } = Route.useSearch()
+ const tokenRequired = reason === 'token-required'
- useEffect(() => {
- const t = window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''
- setTokenValue(t)
- }, [])
-
- async function applyToken(raw: string) {
- const normalized = normalizeApiToken(raw)
- setToken(normalized || null)
- setTokenValue(normalized)
- await qc.invalidateQueries({ queryKey: authKeys.all })
- toast.success('Токен сохранён')
- if (normalized) {
- void navigate({ to: '/dashboard' })
- }
+ function handleTabChange(nextTab: SettingsTab) {
+ void navigate({
+ search: (prev) => ({
+ ...prev,
+ tab: nextTab,
+ }),
+ replace: true,
+ })
}
- function saveTokenHandler() {
- void applyToken(token)
- }
-
- function useDevToken() {
- void applyToken(DEV_API_TOKEN)
- }
-
- const showSessionRow = Boolean(session || sessionError)
- const sessionErrorMessage =
- sessionQueryError instanceof Error
- ? sessionQueryError.message
- : 'Не удалось проверить сессию'
-
return (
-
+
- {tokenRequired ? (
-
-
- Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
- dev».
-
-
- ) : null}
-
-
-
-
-
- Сохранить токен
-
-
- }
- >
-
-
- Ключ для заголовка Authorization. Управление
- ключами tenant — в разделе{' '}
-
- Права доступа
-
- .
-
- }
- badge={{ label: 'localStorage', variant: 'outline' }}
- labelFor="token"
- last={!showSessionRow}
- >
- setTokenValue(e.target.value)}
- placeholder="dev или API-ключ"
- />
-
-
- {showSessionRow ? (
-
- {session ? (
-
-
- Tenant:{' '}
- {session.tenant_id}
-
-
- Роль: {session.role}
-
-
- {sessionErrorMessage}. Для токена dev нужен
- demo-seed (EVOBGP_SEED_DEMO ≠ 0) и запущенный
- API.
-
- )}
-
- ) : null}
-
-
-
-
-
-
- {
- if (value.length > 0) setTheme(value[0])
- }}
- variant="outline"
- size="sm"
- aria-label="Тема интерфейса"
- className="w-full sm:w-auto"
- >
- {THEME_OPTIONS.map((option) => {
- const Icon = option.icon
- return (
-
-
- {option.label}
-
- )
- })}
-
-
-
-
+