Архитектура Admin Panel
Назначение
Admin Panel — плотная операционная SPA для поддержки, compliance, finance, content, marketing, risk и platform operations. Интерфейс ориентирован на таблицы, фильтры, быстрые detail drawers, audit comments и повторяющиеся действия.
Технический Стек
- React + Vite 8.
- TanStack Router для route tree и guards.
- TanStack Query для server state.
- TanStack Table для сложных таблиц.
- Zustand только для client-only state.
- Zod для URL params, фильтров, форм и mutation payload.
- HeroUI 3 и Tailwind CSS 4.
FSD Слои
| Слой | Содержимое |
|---|---|
app | providers, router, telemetry, auth bootstrap, global styles. |
pages | route-level composition: users, KYC, games, settings. |
widgets | большие блоки страниц: user summary, KYC queue, provider restrictions. |
features | действия: approve KYC, reject withdrawal, archive game, update rule set. |
entities | UI представления доменных сущностей: UserRow, GameRow, IncentiveStatusBadge. |
shared | API client, query keys, UI primitives, guards, i18n, lib. |
Data Loading
- Каждая страница использует typed query key factory.
- Server-side pagination, sorting и filtering обязательны для больших списков.
DynamicContentоборачивает TanStack Query состояния.- Детальная страница игрока загружает блоки параллельно и показывает частичные ошибки внутри вкладок.
- Mutations инвалидируют точные query keys и обновляют counters только после backend success.
Guards
AdminAuthGuard: администратор авторизован.TenantScopeGuard: выбран tenant/brand scope.PermissionGuard: есть operation-level permission.MfaRequiredGuard: свежая privileged session для опасных действий.CrossTenantGuard: явная индикация global admin режима.
UX Принципы
- Первый экран страницы — рабочая таблица или detail view, не landing.
- Таблицы компактные, со sticky header, saved columns и density.
- Разрушительные действия идут через confirmation modal.
- Финансовые и KYC actions требуют audit comment/reason, если policy включена.
- PII показывается только при permission; sensitive blocks могут быть masked by default.
- Lookup controls используют
ResultEntryи не знают detail DTO.
Ошибки И Offline
401ведет к re-auth.403показывает permission fallback и не скрывает факт существования route.404на detail page показывает безопасное сообщение без утечки tenant data.409optimistic concurrency предлагает refresh и показывает актуальный статус.- Offline/timeout состояния не позволяют выполнять money/KYC mutations.