EventHub/EventHubFrontAdmin
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P1: Редизайн Admin UI — Control Center (Inbox-first) #32

New Issue
Closed
opened 2026-07-14 11:07:44 +03:00 by cursor-ai · 12 comments
cursor-ai commented 2026-07-14 11:07:44 +03:00
Owner
Copy Link
Copy Source

Проблема

Текущая админка — набор CRUD-страниц на Ant Design по умолчанию. Moderator и support живут в продукте целый день, но UX построен вокруг таблиц БД, а не вокруг очереди задач. Сайдбар неудобен, профиль спрятан в футере, статистика давит таблицы, нет операторского inbox для жалоб и тикетов.

Цель продукта: админка как Control Center, в котором moderator/support проводят смену, а admin/superadmin исследуют сущности и наблюдают систему.

Влияние

  • Медленная модерация и поддержка (лишние клики, нет split-view очереди)
  • Плохая discoverability профиля и навигации на типичных разрешениях
  • Несогласованные паттерны list/detail (в т.ч. падение UserDetail при object children)
  • Админка не ощущается как продукт EventHub

Ожидаемый результат

Admin SPA как операторская консоль с режимами:

  1. Inbox — очередь жалоб (moderator) и тикетов (support): split-view, быстрые действия, WS-счётчики
  2. Explore — сущности (users/events/…) с KPI ≤4, фильтрами, кликом по ряду / slide-over
  3. Observe — мониторинг + аудит
  4. Dashboard — обзор по роли

Новый shell: группы навигации, профиль всегда в шапке. Интерактивный концепт — canvas admin-control-center-mock.

Критерии приёмки

  • Новый shell: профиль в header, стабильный sider (скролл/collapse), группы навигации по ролям
  • ErrorBoundary вокруг content + fix падения UserDetail (object/array поля)
  • Inbox жалоб (moderator) и Inbox тикетов (support): split-view список↔detail, действия из панели
  • Единый шаблон ListPage для пилотных Explore-экранов (Users + ещё 1): ≤4 KPI, фильтры, onRow/actions
  • Dashboard по роли без дублирования длинных графиков на каждом list
  • Работа в ветке feature/control-center-redesign до раскатки; маршруты и RBAC сохранены
  • Ручной прогон stage: login moderator/support/admin; inbox workflow; профиль доступен
  • Спека EventHubFrontAdminSpec обновлена после тестов

Вне скоупа (отдельные задачи при необходимости)

  • Полный переход на headless (shadcn/TanStack) вместо hybrid Ant
  • Drag-resize виджеты dashboard
  • Полный command palette со всеми сущностями
  • Mobile-native приложение

Файлы (подсказка)

  • src/layouts/AdminLayout.tsx
  • src/config/adminAccess.ts
  • src/pages/reports/, src/pages/tickets/
  • src/pages/users/, src/pages/dashboard/
  • src/App.tsx

Приоритет

P1 (продуктовый редизайн; P0-crash UserDetail входит в критерии фазы shell)

Ветка

feature/control-center-redesign

## Проблема Текущая админка — набор CRUD-страниц на Ant Design по умолчанию. Moderator и support живут в продукте целый день, но UX построен вокруг таблиц БД, а не вокруг очереди задач. Сайдбар неудобен, профиль спрятан в футере, статистика давит таблицы, нет операторского inbox для жалоб и тикетов. Цель продукта: админка как Control Center, в котором moderator/support проводят смену, а admin/superadmin исследуют сущности и наблюдают систему. ## Влияние - Медленная модерация и поддержка (лишние клики, нет split-view очереди) - Плохая discoverability профиля и навигации на типичных разрешениях - Несогласованные паттерны list/detail (в т.ч. падение UserDetail при object children) - Админка не ощущается как продукт EventHub ## Ожидаемый результат Admin SPA как операторская консоль с режимами: 1. Inbox — очередь жалоб (moderator) и тикетов (support): split-view, быстрые действия, WS-счётчики 2. Explore — сущности (users/events/…) с KPI ≤4, фильтрами, кликом по ряду / slide-over 3. Observe — мониторинг + аудит 4. Dashboard — обзор по роли Новый shell: группы навигации, профиль всегда в шапке. Интерактивный концепт — canvas admin-control-center-mock. ## Критерии приёмки - [ ] Новый shell: профиль в header, стабильный sider (скролл/collapse), группы навигации по ролям - [ ] ErrorBoundary вокруг content + fix падения UserDetail (object/array поля) - [ ] Inbox жалоб (moderator) и Inbox тикетов (support): split-view список↔detail, действия из панели - [ ] Единый шаблон ListPage для пилотных Explore-экранов (Users + ещё 1): ≤4 KPI, фильтры, onRow/actions - [ ] Dashboard по роли без дублирования длинных графиков на каждом list - [ ] Работа в ветке feature/control-center-redesign до раскатки; маршруты и RBAC сохранены - [ ] Ручной прогон stage: login moderator/support/admin; inbox workflow; профиль доступен - [ ] Спека EventHubFrontAdminSpec обновлена после тестов ## Вне скоупа (отдельные задачи при необходимости) - Полный переход на headless (shadcn/TanStack) вместо hybrid Ant - Drag-resize виджеты dashboard - Полный command palette со всеми сущностями - Mobile-native приложение ## Файлы (подсказка) - src/layouts/AdminLayout.tsx - src/config/adminAccess.ts - src/pages/reports/*, src/pages/tickets/* - src/pages/users/*, src/pages/dashboard/* - src/App.tsx ## Приоритет P1 (продуктовый редизайн; P0-crash UserDetail входит в критерии фазы shell) ## Ветка feature/control-center-redesign
cursor-ai added the Epic label 2026-07-14 11:07:44 +03:00
cursor-ai self-assigned this 2026-07-14 11:07:44 +03:00
cursor-ai commented 2026-07-14 11:08:32 +03:00
Author
Owner
Copy Link
Copy Source

Беру в работу. Ветка: feature/control-center-redesign.

Интерактивный концепт уже есть (canvas admin-control-center-mock). По процессу — варианты решения до кода. Нужно выбрать один.

Вариант A (рекомендую) — Hybrid Ant + Control Center shell, Inbox-first

Что делаем в рамках #32

  1. P0: ErrorBoundary + fix UserDetail (object/array)
  2. Новый shell: профиль в header, группы меню, стабильный sider/drawer
  3. Report Inbox + Ticket Inbox (split-view) для moderator/support
  4. ListPage template на Users (+1 пилот)
  5. Dashboard по роли без KPI-лавины на list

Стек: остаёмся на Ant Design (Table/Form/Modal), свой layout + patterns.

Плюсы: доставляем продукт для смены модератора/саппорта быстрее; низкий риск поломки форм; RBAC/маршруты почти без изменений.
Минусы: визуально не «с нуля»; не все 12 экранов сразу в новом Explore.

Оценка: 2–3 недели итерациями в этой ветке.

Вариант B — Icon rail + полная смена IA с первой недели

Как A, но сразу двухколоночная навигация (icon rail → context nav) и Explore slide-over на всех entity pages.

Плюсы: ближе к mock canvas «как в конце».
Минусы: больше перелома навигации; дольше до usable Inbox.

Оценка: 3–4 недели.

Вариант C — Deep tech: shadcn / TanStack вместо Ant

Полная замена UI-kit + Control Center.

Плюсы: максимальный контроль UX.
Минусы: 2+ недели только таблицы/формы; высокий риск регрессий; не нужно для цели «8-часовой смены».

Оценка: 6–8 недель. Не рекомендую как первый шаг #32.

Рекомендация: вариант A.
Первый коммит после апрува: ErrorBoundary + UserDetail fix, затем shell, затем Inbox.

Жду подтверждение варианта (A / B / C или правки скоупа).

Беру в работу. Ветка: `feature/control-center-redesign`. Интерактивный концепт уже есть (canvas admin-control-center-mock). По процессу — варианты решения **до кода**. Нужно выбрать один. --- ## Вариант A (рекомендую) — Hybrid Ant + Control Center shell, Inbox-first **Что делаем в рамках #32** 1. P0: ErrorBoundary + fix UserDetail (object/array) 2. Новый shell: профиль в header, группы меню, стабильный sider/drawer 3. Report Inbox + Ticket Inbox (split-view) для moderator/support 4. ListPage template на Users (+1 пилот) 5. Dashboard по роли без KPI-лавины на list **Стек:** остаёмся на Ant Design (Table/Form/Modal), свой layout + patterns. **Плюсы:** доставляем продукт для смены модератора/саппорта быстрее; низкий риск поломки форм; RBAC/маршруты почти без изменений. **Минусы:** визуально не «с нуля»; не все 12 экранов сразу в новом Explore. **Оценка:** 2–3 недели итерациями в этой ветке. --- ## Вариант B — Icon rail + полная смена IA с первой недели Как A, но сразу двухколоночная навигация (icon rail → context nav) и Explore slide-over на всех entity pages. **Плюсы:** ближе к mock canvas «как в конце». **Минусы:** больше перелома навигации; дольше до usable Inbox. **Оценка:** 3–4 недели. --- ## Вариант C — Deep tech: shadcn / TanStack вместо Ant Полная замена UI-kit + Control Center. **Плюсы:** максимальный контроль UX. **Минусы:** 2+ недели только таблицы/формы; высокий риск регрессий; не нужно для цели «8-часовой смены». **Оценка:** 6–8 недель. **Не рекомендую** как первый шаг #32. --- **Рекомендация:** вариант **A**. Первый коммит после апрува: ErrorBoundary + UserDetail fix, затем shell, затем Inbox. Жду подтверждение варианта (A / B / C или правки скоупа).
cursor-ai commented 2026-07-14 11:43:09 +03:00
Author
Owner
Copy Link
Copy Source

Выбран вариант C: shadcn/ui + TanStack Table как UI-платформа для Control Center и будущих client/mobile UI.

Начинаю в ветке feature/control-center-redesign:

  • фундамент Tailwind + shadcn primitives
  • новый shell (ControlCenterLayout)
  • Inbox жалоб/тикетов (split-view)
  • ErrorBoundary + fix UserDetail
  • постепенная миграция экранов с Ant; antd остаётся временно на немигрированных list pages
Выбран вариант C: shadcn/ui + TanStack Table как UI-платформа для Control Center и будущих client/mobile UI. Начинаю в ветке `feature/control-center-redesign`: - фундамент Tailwind + shadcn primitives - новый shell (ControlCenterLayout) - Inbox жалоб/тикетов (split-view) - ErrorBoundary + fix UserDetail - постепенная миграция экранов с Ant; antd остаётся временно на немигрированных list pages
cursor-ai commented 2026-07-14 11:50:18 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 1 (ветка feature/control-center-redesign):

  • Tailwind v4 + shadcn/ui primitives (button, card, table, dialog, …)
  • TanStack Table dep добавлен; inbox пока на кастомном split-view
  • ControlCenterLayout: группы навигации, профиль в header, sonner toast
  • /inbox/reports и /inbox/tickets — split-view для moderator/support
  • Login + Forbidden на shadcn; UserDetail fix (object/array)
  • ErrorBoundary вокруг content
  • tsc -b проходит; vite build нужен Node 20+

Ant Design временно на list/detail страницах — следующая фаза: миграция таблиц на DataTable (TanStack) и удаление antd.

Фаза 1 (ветка feature/control-center-redesign): - Tailwind v4 + shadcn/ui primitives (button, card, table, dialog, …) - TanStack Table dep добавлен; inbox пока на кастомном split-view - ControlCenterLayout: группы навигации, профиль в header, sonner toast - /inbox/reports и /inbox/tickets — split-view для moderator/support - Login + Forbidden на shadcn; UserDetail fix (object/array) - ErrorBoundary вокруг content - tsc -b проходит; vite build нужен Node 20+ Ant Design временно на list/detail страницах — следующая фаза: миграция таблиц на DataTable (TanStack) и удаление antd.
cursor-ai commented 2026-07-14 12:07:21 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 2:

  • Node: .nvmrc 22.12.0, engines.node >=20.19.0 (Vite 8), CI → node 22
  • DataTable (TanStack) — server-side sort/pagination, шаблон для list-страниц
  • ListPageHeader + KPI cards (≤4)
  • UI: select, textarea, alert
  • Миграция на shadcn: Dashboard, Profile, UserList
  • Chart cards без antd Card
  • npm run build OK на Node 22.12

Следующее: остальные list/detail страницы, затем удаление antd.

Фаза 2: - Node: `.nvmrc` 22.12.0, `engines.node >=20.19.0` (Vite 8), CI → node 22 - `DataTable` (TanStack) — server-side sort/pagination, шаблон для list-страниц - `ListPageHeader` + KPI cards (≤4) - UI: select, textarea, alert - Миграция на shadcn: Dashboard, Profile, UserList - Chart cards без antd Card - `npm run build` OK на Node 22.12 Следующее: остальные list/detail страницы, затем удаление antd.
cursor-ai commented 2026-07-14 12:31:27 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 3 завершена:

  • Все list/detail страницы на shadcn + DataTable (TanStack)
  • Хуки: antd message → notify (sonner)
  • Удалён legacy AdminLayout
  • Из package.json убраны antd и @ant-design/icons
  • Bundle: ~1.2 MB JS (было ~2.1 MB с antd)
  • tsc -b + vite build OK на Node 22

Осталось для закрытия #32: stage E2E (inbox, профиль, UserDetail), обновление EventHubFrontAdminSpec.

Фаза 3 завершена: - Все list/detail страницы на shadcn + DataTable (TanStack) - Хуки: antd message → notify (sonner) - Удалён legacy AdminLayout - Из package.json убраны antd и @ant-design/icons - Bundle: ~1.2 MB JS (было ~2.1 MB с antd) - tsc -b + vite build OK на Node 22 Осталось для закрытия #32: stage E2E (inbox, профиль, UserDetail), обновление EventHubFrontAdminSpec.
cursor-ai commented 2026-07-14 14:37:24 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 4 (UX shell polish):

  • Command palette ⌘K / Ctrl+K — переход по разделам по роли
  • Breadcrumbs + PageHeader на detail-страницах
  • Плотность таблиц (компакт/обычно) — toggle в header, localStorage
  • Collapsed sidebar: только иконки + title
  • Убран дубль «Настройки» в меню профиля
  • tsc + vite build OK

Осталось к закрытию #32: stage/dev E2E smoke, обновление EventHubFrontAdminSpec, коммит.

Фаза 4 (UX shell polish): - Command palette ⌘K / Ctrl+K — переход по разделам по роли - Breadcrumbs + PageHeader на detail-страницах - Плотность таблиц (компакт/обычно) — toggle в header, localStorage - Collapsed sidebar: только иконки + title - Убран дубль «Настройки» в меню профиля - tsc + vite build OK Осталось к закрытию #32: stage/dev E2E smoke, обновление EventHubFrontAdminSpec, коммит.
cursor-ai commented 2026-07-14 15:14:07 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 5 (deep UX):

  • EntitySlideOver (sheet справа): preview user/event/calendar/report
  • Explore: клик по нику/названию в Users/Events/Calendars → slide-over; Info → полная страница
  • Inbox жалоб: j/k, 1=рассмотрено, 2=отклонено, auto-next после действия, preview по ссылкам
  • Inbox тикетов: фильтр «Мои», j/k, 1=решено, 2=в работу, auto-next
  • tsc OK

Тесты/коммит — позже по договорённости.

Фаза 5 (deep UX): - EntitySlideOver (sheet справа): preview user/event/calendar/report - Explore: клик по нику/названию в Users/Events/Calendars → slide-over; Info → полная страница - Inbox жалоб: j/k, 1=рассмотрено, 2=отклонено, auto-next после действия, preview по ссылкам - Inbox тикетов: фильтр «Мои», j/k, 1=решено, 2=в работу, auto-next - tsc OK Тесты/коммит — позже по договорённости.
cursor-ai commented 2026-07-14 15:18:54 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 6 (deep UX cont.):

  • Inbox: Enter → полная карточка (reports/tickets)
  • Dashboard composer: WorkCard (Inbox CTA) по ролям; admin — work queue + quick explore + KPI/charts
  • Login: brand EventHub + атмосфера (grid/gradient), не flat card
  • Shell main: лёгкий radial surface
  • Explore search: Users и Events (параметр q)
  • tsc OK

Ещё можно: calendar search, Observe polish, density persistence UX. Тесты/коммит — когда скажешь «всё готово».

Фаза 6 (deep UX cont.): - Inbox: Enter → полная карточка (reports/tickets) - Dashboard composer: WorkCard (Inbox CTA) по ролям; admin — work queue + quick explore + KPI/charts - Login: brand EventHub + атмосфера (grid/gradient), не flat card - Shell main: лёгкий radial surface - Explore search: Users и Events (параметр q) - tsc OK Ещё можно: calendar search, Observe polish, density persistence UX. Тесты/коммит — когда скажешь «всё готово».
cursor-ai commented 2026-07-14 15:26:18 +03:00
Author
Owner
Copy Link
Copy Source

Фаза 7:

  • Календари: поиск в том же UX, что Users/Events (иконка + «Найти»), описание про slide-over
  • Observe/Monitoring polish:
    • заголовок Observe · Мониторинг + badge health
    • chip-диапазоны 5/15/30/60 мин
    • KPI: online nodes / CPU peak / memory avg
    • вкладки нод с MetricIndicator
    • empty-state телеметрии
    • для superadmin — CTA в Аудит
  • tsc OK
Фаза 7: - Календари: поиск в том же UX, что Users/Events (иконка + «Найти»), описание про slide-over - Observe/Monitoring polish: - заголовок Observe · Мониторинг + badge health - chip-диапазоны 5/15/30/60 мин - KPI: online nodes / CPU peak / memory avg - вкладки нод с MetricIndicator - empty-state телеметрии - для superadmin — CTA в Аудит - tsc OK
cursor-ai commented 2026-07-14 15:50:38 +03:00
Author
Owner
Copy Link
Copy Source

Phase 8 — Explore dual view (вариант B)

Списки Explore переведены на общий shell + переключатель Таблица / Строки (persisted в admin.ui.exploreView).

Каркас

  • ExploreListShell — заголовок, тонкие stats (без KPI-карточек), toolbar, toggle вида
  • ExploreSearch, RowActionsMenu (⋯), DenseRowList, ExploreDataView
  • Общий TablePaginationBar

Страницы

Users, Events, Calendars, Reviews, Subscriptions, Admins, Reports, Tickets

UX

  • Действия в ⋯-меню вместо ряда иконок
  • Клик по сущности → preview (где уже было)
  • Reports/Tickets: баннер CTA на Inbox (оперативка vs архив/поиск)

tsc -b — ок. Коммит позже по запросу.

## Phase 8 — Explore dual view (вариант B) Списки Explore переведены на общий shell + переключатель **Таблица / Строки** (persisted в `admin.ui.exploreView`). ### Каркас - `ExploreListShell` — заголовок, тонкие stats (без KPI-карточек), toolbar, toggle вида - `ExploreSearch`, `RowActionsMenu` (⋯), `DenseRowList`, `ExploreDataView` - Общий `TablePaginationBar` ### Страницы Users, Events, Calendars, Reviews, Subscriptions, Admins, Reports, Tickets ### UX - Действия в ⋯-меню вместо ряда иконок - Клик по сущности → preview (где уже было) - Reports/Tickets: баннер CTA на Inbox (оперативка vs архив/поиск) `tsc -b` — ок. Коммит позже по запросу.
cursor-ai commented 2026-07-14 18:03:12 +03:00
Author
Owner
Copy Link
Copy Source

Залито на master (fd2c1f1). CI + Deploy IFT admin должны накатить образ sha-fd2c1f1…. Ветка feature/control-center-redesign тоже на remote. Секреты/tmp в коммит не входили.

Залито на master (fd2c1f1). CI + Deploy IFT admin должны накатить образ sha-fd2c1f1…. Ветка feature/control-center-redesign тоже на remote. Секреты/tmp в коммит не входили.
cursor-ai commented 2026-07-14 23:45:13 +03:00
Author
Owner
Copy Link
Copy Source

Control Center в master: Inbox-first shell, explore pages, RBAC, ErrorBoundary, shadcn UI.
Дальнейшие доработки — отдельными задачами. Закрываю как выполненное.

Control Center в master: Inbox-first shell, explore pages, RBAC, ErrorBoundary, shadcn UI. Дальнейшие доработки — отдельными задачами. Закрываю как выполненное.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Bug
Дефект или ошибка
 Epic
Крупная инициатива / эпик
 Future
Отложенная работа
 Story
Пользовательская история
 Task
Техническая задача
No Label Epic
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
aleksey ci-builder cursor-ai
No Assignees cursor-ai
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: EventHub/EventHubFrontAdmin#32
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?