Перейти к основному содержимому

Архитектура 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 Слои

СлойСодержимое
appproviders, router, telemetry, auth bootstrap, global styles.
pagesroute-level composition: users, KYC, games, settings.
widgetsбольшие блоки страниц: user summary, KYC queue, provider restrictions.
featuresдействия: approve KYC, reject withdrawal, archive game, update rule set.
entitiesUI представления доменных сущностей: UserRow, GameRow, IncentiveStatusBadge.
sharedAPI 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.
  • 409 optimistic concurrency предлагает refresh и показывает актуальный статус.
  • Offline/timeout состояния не позволяют выполнять money/KYC mutations.