# Анализ структуры вкладок и предложения по UX/UI оптимизации системы Magistr
В данном документе представлен детальный анализ текущей структуры интерфейса административной панели (SPA) и настроек системы Magistr. Выявлены пересекающиеся области функционала, сформулированы предложения по их объединению, переносу в настройки или удалению, а также предложены новые функциональные модули и технические решения для оптимизации UX/UI и производительности.
---
## 1. Анализ текущей структуры и доступности вкладок
На данный момент в основном SPA-интерфейсе администратора (`/admin/`) зарегистрировано **13 вкладок**, а в дополнительном SPA настроек (`/admin/settings/`) — **2 вкладки**.
В зависимости от роли пользователя, сайдбар фильтруется следующим образом:
| Вкладка (ID) | Описание | Доступность по ролям |
| :--- | :--- | :--- |
| `users` | CRUD пользователей и архивирование | `ADMIN` |
| `groups` | CRUD групп, подгрупп и назначений календарей | `ADMIN` |
| `edu-forms` | Справочник форм обучения | `ADMIN` |
| `profiles` | Управление профилями обучения специальностей | `ADMIN` |
| `equipments` | Каталог оборудования | `ADMIN`, `EDUCATION_OFFICE` |
| `classrooms` | Список аудиторий с привязкой оборудования | `ADMIN`, `EDUCATION_OFFICE` |
| `subjects` | CRUD всех дисциплин и привязка преподавателей | `ADMIN` |
| `department-workspace` | Рабочая область кафедры (дисциплины, импорт, нагрузка) | `ADMIN`, `DEPARTMENT` |
| `schedule-view` | Просмотр расписаний (read-only) | `ADMIN`, `EDUCATION_OFFICE`, `DEPARTMENT`, `SCHEDULE_VIEWER` |
| `schedule` | Конструктор правил динамического расписания | `ADMIN`, `EDUCATION_OFFICE` |
| `academic-calendar` | Календарные графики и Excel-редактор сетки | `ADMIN`, `EDUCATION_OFFICE` |
| `auditorium-workload` | Матрицы и таблицы загруженности | `ADMIN`, `EDUCATION_OFFICE` |
| `database` | Управление тенантами (БД клиентов) | `ADMIN` |
| **Settings** (SPA) | Общие настройки, Управление временными слотами | `ADMIN`, `EDUCATION_OFFICE` (ссылка в подвале) |
---
## 2. Пересечения функционала и проблемные зоны
### 2.1. Избыточное дробление академической структуры
Для описания структуры обучения сейчас используются четыре отдельные вкладки:
1. `departments-data` (Создание кафедры/специальности)
2. `profiles` (Профили обучения специальностей)
3. `edu-forms` (Формы обучения)
4. `groups` (В блоке создания группы выбираются форма, кафедра, специальность и профиль)
**В чём проблема:**
* **Разрыв контекста:** Чтобы завести новую специальность с профилями, администратору сначала нужно пойти во вкладку `departments-data`, создать специальность, затем перейти во вкладку `profiles`, выбрать в селекте эту специальность и добавить профили.
* **Перегрузка меню:** 13 вкладок в сайдбаре для роли `ADMIN` — это слишком много. Пользователю трудно ориентироваться визуально.
### 2.2. Дублирование и раздвоение управления дисциплинами
Управление дисциплинами разнесено между вкладками `subjects` (для администратора) и `department-workspace` (для кафедры).
**В чём проблема:**
* Администратор во вкладке `subjects` видит плоскую таблицу всех дисциплин всех кафедр, но не имеет удобных инструментов фильтрации по кафедре.
* Форма создания новой дисциплины во вкладке `subjects` требует ввода **числового ID кафедры вручную** (поле `new-subject-department` типа `number`). Это критическая UX-ошибка: администратор не должен помнить числовые ID БД наизусть.
* Привязка преподавателей к дисциплинам (`teacher_subjects`) находится на вкладке `subjects`. При этом сама нагрузка преподавателей и список преподавателей кафедры отображаются на вкладке `department-workspace`. Логичнее было бы видеть, какие дисциплины ведёт преподаватель, непосредственно при работе с его нагрузкой или в едином справочнике преподавателей/кафедры.
### 2.3. Низкая частота использования справочника оборудования (`equipments`)
Оборудование существует только как подчиненная сущность для аудиторий (чтобы указать, что в аудитории 101 есть 20 ПК и 1 проектор).
**В чём проблема:**
* Выделение целой вкладки под простой список («Проектор», «ПК») не оправдано. Список оборудования меняется раз в несколько лет.
* При этом привязка оборудования к аудиториям происходит на вкладке `classrooms`.
### 2.4. Перегруженность вкладки групп (`groups`)
На вкладке групп на одном экране выводятся сразу три тяжелые формы и три таблицы:
1. Создание/редактирование групп + таблица групп.
2. Создание подгрупп для лабораторных + таблица подгрупп.
3. Назначение календарного графика группе + таблица назначений.
**В чём проблема:**
* Экран перегружен элементами управления.
* Для работы с подгруппами или назначениями графиков конкретной группы пользователю приходится выбирать эту группу из длинного выпадающего списка в отдельной форме, вместо того чтобы выполнять действия в контексте строки этой группы в таблице.
### 2.5. Нахождение системной вкладки «База данных» в общем меню расписания
Вкладка `database` отвечает за управление тенантами (добавление новых вузов-клиентов, создание для них БД и запуск Flyway миграций).
**В чём проблема:**
* Это технический функционал уровня Super-Admin / DevOps. Он не имеет отношения к ежедневному планированию расписания. Нахождение его в одном ряду с расписанием и группами нарушает логику интерфейса.
---
## 3. Рекомендации по оптимизации структуры (Что убрать, объединить и перенести)
```mermaid
graph TD
subgraph Было (13 вкладок в меню ADMIN)
direction TB
T1[database]
T2[edu-forms]
T3[departments-data]
T4[profiles]
T5[equipments]
T6[classrooms]
T7[groups]
T8[users]
T9[subjects]
T10[department-workspace]
T11[schedule]
T12[schedule-view]
T13[academic-calendar]
T14[auditorium-workload]
end
subgraph Стало (Сгруппированное меню + настройки)
direction TB
subgraph Основное меню SPA (Группы вкладок)
direction TB
DASH[1. Дашборд / Главная]
subgraph Модуль: Расписание
SCH_ED[2. Конструктор расписания]
SCH_VI[3. Просмотр расписаний]
CAL[4. Календарный график]
WORK[5. Загруженность]
end
subgraph Модуль: Структура
UNIV[6. Структура вуза
Кафедры, Специальности, Профили]
GRP[7. Группы и подгруппы]
SUBJ[8. Дисциплины]
end
subgraph Модуль: Ресурсы
CLASS[9. Аудиторный фонд
Аудитории + Оборудование]
end
USR[10. Пользователи]
end
subgraph SPA Настройки (Настройки системы)
direction TB
SET_GEN[Общие настройки]
SET_TIME[Временные слоты сетка]
SET_FORM[Формы обучения из edu-forms]
SET_DB[Базы данных / Тенанты из database]
end
end
T1 -->|Перенести| SET_DB
T2 -->|Перенести| SET_FORM
T3 -->|Объединить| UNIV
T4 -->|Объединить| UNIV
T5 -->|Объединить| CLASS
T6 -->|Объединить| CLASS
T7 -->|Оптимизировать| GRP
T8 -->|Оставить| USR
T9 -->|Оптимизировать| SUBJ
T10 -->|Сохранить для роли Кафедра| SUBJ
T11 -->|Оставить| SCH_ED
T12 -->|Оставить| SCH_VI
T13 -->|Оставить| CAL
T14 -->|Оставить| WORK
```
### 3.1. Перенос в настройки (`/admin/settings/`)
1. **База данных (`database`)**: Перенести в SPA настроек в раздел «Управление тенантами». Доступ должен быть только у роли `ADMIN`.
2. **Формы обучения (`edu-forms`)**: Перенести в настройки. Данный справочник заполняется один раз и не требует оперативного доступа из главного меню.
### 3.2. Объединение вкладок
1. **Объединить Кафедры, Специальности и Профили** в одну вкладку **«Структура вуза»** (`university-structure`):
* Интерфейс делится на две вкладки внутри страницы: **«Кафедры»** и **«Специальности»**.
* Управление профилями должно происходить прямо внутри списка специальностей. Например, в строке специальности в таблице добавляется кнопка «Профили», открывающая список профилей этой специальности в раскрывающейся строке (accordion) или модальном окне.
2. **Объединить Аудитории (`classrooms`) и Оборудование (`equipments`)** в одну вкладку **«Аудиторный фонд»**:
* Основной экран показывает список аудиторий.
* Рядом располагается кнопка «Управление каталогом оборудования», которая открывает модальное окно с простым списком (добавить/удалить тип оборудования). Это избавит от необходимости держать под это отдельную вкладку в сайдбаре.
### 3.3. Реорганизация вкладки групп (`groups`)
* **Оставить на вкладке только список групп** с возможностью фильтрации по курсу, кафедре и форме обучения.
* **Вынести подгруппы и назначения календарей из глобальных форм:**
* В строке таблицы для каждой группы добавить действия:
* `[Подгруппы]` — открывает компактное модальное окно для быстрого создания/редактирования подгрупп (лабораторных) именно для этой группы.
* `[Календарь]` — открывает модальное окно назначения календарного учебного графика на учебные годы для этой группы.
* Это уберет лишние тяжелые формы с главной страницы и исключит необходимость выбора группы из селектов вручную.
### 3.4. Оптимизация Дисциплин (`subjects`) и Кабинета кафедры
* **Исправить форму добавления дисциплины:** Заменить ручной числовой ввод ID кафедры (`new-subject-department`) на стандартный выпадающий список (выбор из загруженных кафедр).
* **Связать привязку преподавателей с дисциплинами:** Вместо двух разрозненных таблиц на вкладке `subjects` («Все дисциплины» и «Привязки преподавателей»), объединить их:
* В строке дисциплины выводить список привязанных преподавателей (в виде чипов/badge).
* По клику на кнопку «Преподаватели» в строке дисциплины открывать модальное окно привязки/отвязки преподавателей для этой конкретной дисциплины.
---
## 4. Что необходимо добавить (Новый функционал)
### 4.1. Главная страница / Дашборд (`dashboard`)
При входе в систему администратор и сотрудники учебного отдела должны видеть не сырые таблицы пользователей или расписания, а высокоуровневую аналитическую панель:
* **Информационные карточки (Метрики):**
* Всего активных групп / студентов.
* Количество задействованных преподавателей.
* Процент занятости аудиторного фонда на текущий день.
* Количество запланированных пар на сегодня.
* **Мониторинг расписания в реальном времени:**
* Список идущих прямо сейчас пар (текущий временной слот).
* Ближайшие свободные аудитории.
* **Быстрый переход:** Кнопки быстрого создания правила расписания, добавления переноса/замены.
### 4.2. Центр предупреждений и конфликтов (Red Zone)
В соответствии с планируемой бизнес-логикой (раздел 5 `docs/BUSINESS_LOGIC.md`), система должна автоматически валидировать расписание и предупреждать о коллизиях.
Необходима отдельная вкладка или виджет на дашборде **«Конфликты расписания»**:
* **Критические ошибки (Блокирующие генерацию):**
* *Накладки преподавателей:* Преподаватель назначен в один и тот же временной слот в разные аудитории / к разным группам (кроме потоковых лекций).
* *Накладки аудиторий:* Две разные пары стоят в одной аудитории в один слот.
* **Предупреждения (Мягкие проверки):**
* *Превышение вместимости:* Численность группы (или сумма подгрупп при совмещенных занятиях) превышает физическую вместимость аудитории.
* *Недостаток оборудования:* Дисциплина (например, лабораторная по химии) требует определенного оборудования, которого нет в назначенной аудитории.
* *Превышение нагрузки:* Преподаватель превысил недельный лимит часов.
---
## 5. Концепция новой структуры меню (Сайдбара)
Для уменьшения визуального шума сайдбар предлагается сделать **двухуровневым** (сворачиваемые группы) или четко разделить визуальными разделителями:
```
[ Логотип Magistr ]
---------------------------
👤 Кабинет кафедры <-- (Показывается только для роли DEPARTMENT)
📈 Дашборд <-- (Новый главный экран для ADMIN / EDU_OFFICE)
📁 РАСПИСАНИЕ
🗓 Конструктор правил
🗓 Точечные изменения <-- (Выделенный функционал оверрайдов/переносов)
📅 Календарный график
📊 Загруженность
🔍 Просмотр расписаний
🗂 СУБЪЕКТЫ И РЕСУРСЫ
🏫 Аудиторный фонд <-- (Объединенные Аудитории + Оборудование)
🎓 Группы обучения <-- (Группы + модалки подгрупп/календарей)
🏛 Структура вуза <-- (Кафедры + Специальности + Профили)
📚 Дисциплины <-- (Дисциплины + модалки преподавателей)
⚙️ СИСТЕМА
👥 Пользователи
⚙️ Настройки <-- (Переход в настройки SPA: слоты, БД, формы обучения)
---------------------------
[ Профиль / Выход ]
```
---
## 6. Идеи по оптимизации фронтенда и взаимодействия с API
### 6.1. Кэширование справочников на клиенте
На данный момент при переключении почти каждой вкладки заново запрашиваются списки кафедр, специальностей, учебных годов и т.д.
* **Решение:** Реализовать простой кэш-менеджер во фронтенд-клиенте (`api.js` или отдельный `cache.js`):
```javascript
const cache = new Map();
export async function getCachedData(key, fetchPromise) {
if (!cache.has(key)) {
cache.set(key, await fetchPromise);
}
return cache.get(key);
}
export function clearCache(key) {
if (key) cache.delete(key);
else cache.clear();
}
```
Это позволит избежать десятков дублирующих запросов при переключении между вкладками `groups`, `subjects`, `schedule`.
### 6.2. Ленивая инициализация вкладок (Lazy Loading)
Сейчас в `main.js` импортируются все JS-модули вкладок одновременно при загрузке страницы:
```javascript
import { initUsers } from './views/users.js';
import { initGroups } from './views/groups.js';
// ...еще 10 импортов
```
* **Решение:** Перейти на динамический импорт модулей инициализации при переходе на конкретную вкладку:
```javascript
async function switchTab(tab) {
// ...
const viewModule = await import(`./views/${tab}.js`);
viewModule.init();
// ...
}
```
Это уменьшит размер начального JS-бандла и ускорит первую загрузку страницы.
### 6.3. Единый реестр кастомных выпадающих списков
В проекте реализованы кастомные селекты (выпадающие списки с поддержкой поиска и чекбоксов). При динамической подгрузке HTML-шаблонов часто требуется их повторная инициализация.
* **Решение:** Создать глобальный шину событий (Event Bus) или MutationObserver, который автоматически подхватывает элементы с классами `.custom-select` или атрибутами `data-select` и инициализирует их без вызова ручного кода `initAllCustomDropdowns()` в каждом отдельном скрипте представления.
---
## Резюме
Предложенные изменения позволят:
1. Сократить количество пунктов основного меню с **13** до **8-9** логически сгруппированных разделов.
2. Исключить ручной ввод ID (заменив на селекты) и разгрузить перегруженные интерфейсы (выносом подгрупп и назначений в контекстные модальные окна групп).
3. Повысить отзывчивость интерфейса за счет клиентского кэширования справочников и ленивой загрузки JS-модулей.
4. Добавить полноценный Дашборд и Центр предупреждений о конфликтах, что выведет аналитические возможности системы на уровень премиум-класса.