Learn_System/plans/admin-redesign/phase-6-deep-pages.md

Phase 6: Deep entity pages

Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend

Objective

Заменить выезжающую .user-panel overlay на полноценную страницу с URL #users/123. Аналогично для session: #sessions/456 = full detail page. Это самая комплексная фаза — она ломает совместимость с старым overlay UI (удаляет код), потому идёт ПОСЛЕ всех остальных.

Tasks

• User detail page (frontend/js/admin/sections/user-detail.js):
  • Реагирует на route #users/:id
  • Layout:
    • Header: avatar, name, role badge, email, action buttons (ban/edit/perms/delete), back-link to #users
    • Tabs (sub-nav в странице):
      • Overview — статистика (тестов, средний %, регистрация, посл вход)
      • Sessions — таблица последних 20 сессий с pagination
      • Classes — список классов где он состоит
      • Audit — журнал действий (если есть audit log с user_id)
    • Graphs (опционально, можно отдельным таб'ом):
      • Простой SVG-чарт: успеваемость по неделям
      • Mini-bar chart: avg % по предметам
• Session detail page (frontend/js/admin/sections/session-detail.js):
  • Реагирует на route #sessions/:id
  • Layout: header (user, subject, score, дата) + список вопросов/ответов (правильно/нет, текст), back-link
• Router updates (frontend/js/admin/router.js если ещё не поддерживает):
  • #users/123 → emit { route: 'users', params: ['123'] }
  • #sessions/456 → emit { route: 'sessions', params: ['456'] }
• Admin.js dispatch:
  • При route с params → init detail-section вместо list-section
  • При route без params → init list-section (как раньше)
• Удалить overlay-код:
  • В frontend/admin.html удалить <div class="user-panel" id="user-panel"> блок
  • В sections/users.js удалить openUserPanel, closeUserPanel, reloadUserPanel
  • В sections/users.js поменять onclick: onclick="openUserPanel(event,${u.id},'${u.role}')" → onclick="AdminRouter.navigate('#users/${u.id}')"
• Replace в Phase 5 quick action "Sessions" — теперь AdminRouter.navigate('#users/${uid}/sessions'):
  • Парсить sub-tab из route
  • Открывать user-detail page с активным Sessions tab
• Глоссарий routes после фазы:
  • #overview — dashboard (Phase 3)
  • #users — list
  • #users/123 — user detail (overview tab default)
  • #users/123/sessions — user detail with sessions sub-tab
  • #sessions — list
  • #sessions/456 — session detail
  • … остальные без params — как было

Files to Modify/Create

• frontend/js/admin/sections/user-detail.js — новый, ~400-600L
• frontend/js/admin/sections/session-detail.js — новый, ~200-300L
• frontend/admin.html — удалить .user-panel overlay, добавить <div id="tab-user-detail"> и <div id="tab-session-detail">, добавить <script> теги
• frontend/js/admin/sections/users.js — удалить overlay-функции (~100-150L удаления)
• frontend/js/admin/router.js — улучшения parsing для sub-routes (если нужно)
• frontend/js/admin/admin.js — dispatch logic для routes с params

Acceptance Criteria

• Click на user row → URL становится #users/123, открывается deep page
• F5 на #users/123 восстанавливает страницу
• Back navigation → возврат на #users list
• Header содержит все action-кнопки (ban, edit, perms, delete)
• Sub-tabs (overview, sessions, classes, audit) переключаются, URL обновляется
• Старая .user-panel overlay полностью удалена из HTML и JS
• Click на session id (в любом контексте) → #sessions/456 → detail page
• Нет console errors
• Графики (если делаются) рендерятся корректно

Notes

Backward compat

После Phase 6 старые ссылки/onclick типа openUserPanel(...) УЖЕ НЕ работают. Это intentional — мы их удалили. Но onclick="AdminRouter.navigate('#users/N')" работает везде.

Если есть external links на админку user-panel — они продолжат работать как #users/N через router.

Графики

Можно использовать chart.js (CDN ~50KB), но проще — inline SVG bar/line chart на нескольких десятках строк. У нас уже есть .perf-bar для процентов — можно расширить.

Не обязательно делать графики в этой фазе — можно сделать MVP без них и добавить чартами позже. В acceptance criteria графики помечены опционально.

Audit log

Если в БД есть таблица audit_log с user_id — sub-tab Audit показывает её. Если нет — sub-tab скрывается или показывает empty state "Audit logging не активирован".

Session detail

Сейчас session detail открывается через adminGetSessionDetail → возвращает массив answers. Используем тот же endpoint, рендерим в полноценную страницу вместо modal.

Удаление overlay-кода (опасный шаг)

Делать в КОНЦЕ фазы, после того как deep page работает. Сначала добавить deep page, протестировать, потом удалить overlay. Можно даже сделать отдельным коммитом ("remove overlay").

Что НЕ делать

• Не делать realtime updates (Phase 7+)
• Не делать collaborative cursors
• Не оптимизировать графики до production-grade (chart.js or similar OK)

Review Checklist

• Deep pages работают: F5, back/forward
• Sub-tabs URL-обновляемы
• Old overlay code fully removed
• No regressions: ban/edit/delete user работают из deep page
• Mobile-friendly: tabs scrollable, layout не ломается
• Build passes
• Final smoke test: пройти полный сценарий — открыть админку, найти пользователя через Cmd+K, перейти на deep page, выдать монеты, посмотреть сессии, забанить, разбанить, вернуться в overview

Handoff to Next Phase