Админ-панель

Один React SPA на обе поверхности: админка — /admin/*, кабинет — /portal/* (Кабинет клиента). Разделение — на уровне роутов и scope токена, не отдельных сборок. Работает с REST API; типы и клиент генерируются из OpenAPI.

Навигация

Dashboard
Nodes        └ [нода] → Overview / Inbounds / Logs
Profiles
Chains
Certificates └ DNS Providers / ACME Accounts
Access Groups
Clients      └ [клиент] → Subscriptions
Billing      └ Plans / Providers / Payments
Audit Log
Settings     └ Admins

Разделы

Dashboard — GET /stats/overview: ноды (online/offline, отставание ревизий), активные подписки, трафик за период. Плитки ведут в разделы.

Nodes — список: связность, applied/desired ревизии, версии. Создание → показ enrollment-токена и команды установки (Развёртывание). Страница ноды:

• Overview — статус, системные метрики из StatusReport, applied_error при расхождении ревизий, переключатель торрент-блокировки, кнопка рестарта Xray.
• Inbounds — инбаунды ноды (GET /inbounds?node_id=): профиль, порт, сертификат, цепочка; создание привязки.
• Logs — хвост и live-tail (SSE) логов агента/Xray.

Profiles — конструктор профилей: протокол → транспорт → безопасность → параметры (Инбаунды и профили). У профиля виден список его инбаундов.

Chains — состав цепочки как упорядоченный список нод с портами; статус выводится из связности участников (Мультихоп). Редактирование заменяет состав целиком.

Certificates — сертификаты со сроками и статусом продления, выпуск ACME / загрузка PEM; подразделы — DNS-провайдеры (с кнопкой проверки) и ACME-аккаунты (Сертификаты).

Access Groups — состав групп: чекбокс-список инбаундов, сгруппированных по нодам.

Clients — клиенты и их подписки: статус, срок, расход трафика с прогрессом, перевыпуск ключей, ссылка подписки, ручное продление (Клиенты и подписки). В режиме регистрации application — очередь заявок (?status=pending) с approve/reject; бейдж числа заявок в навигации.

Billing — виден при настроенных провайдерах: тарифы, провайдеры (креденшелы write-only), история платежей.

Audit Log — фильтры по актору, сущности, периоду; diff из payload.

Settings — админы, роли, привязка OAuth (Аутентификация).

Паттерны

• Состояние сервера — TanStack Query поверх сгенерированного клиента; глобального стора для серверных данных нет.
• Ошибки RFC 9457 маппятся на поля форм по errors{}.
• Живые данные (связность нод, ревизии) — поллинг Query с коротким интервалом; выделенный realtime-канал в MVP не вводится.
• Стили — CSS Modules (camelCase-классы) на семантических токенах; Tailwind-утилиты — точечно, по правилам из стека.