rmm-openwrt/UI_CHECKLIST.md

# UI/UX Checklist

Обозначения:

- `[x]` — уже реализовано.
- `[ ]` — требуется сделать.
- `[~]` — реализовано частично, требуется переработка.

## Текущее состояние

- [x] Авторизация оператора.
- [x] Список устройств.
- [x] Просмотр состояния устройства.
- [x] Метрики и предупреждения.
- [x] DHCP- и Wi-Fi-клиенты.
- [x] Команды и история выполнения.
- [x] UCI-конфигурация и staged apply.
- [x] Управление пакетами.
- [x] Удаленный SSH-доступ и LuCI.
- [x] Аудит действий.
- [~] Обзор устройства понятен оператору.
- [~] История метрик пригодна для быстрого анализа.
- [~] Удаленный доступ запускается простым сценарием.
- [ ] Основные и экспертные функции визуально разделены.

## Этап 0. UX-аудит

- [ ] Составить полный список текущих экранов, панелей и кнопок.
- [ ] Для каждого элемента назначить действие: оставить, перенести, объединить или скрыть.
- [ ] Зафиксировать терминологию для оператора.
- [ ] Зафиксировать набор статусов и цветов.
- [ ] Определить основные пользовательские сценарии.
- [ ] Определить структуру навигации и маршруты страниц.
- [ ] Определить desktop и mobile макеты.

## Этап 1. Каркас и объекты

- [x] Добавить постоянную основную навигацию.
- [x] Добавить верхнюю панель с глобальным обновлением.
- [x] Создать полноширинную таблицу объектов.
- [x] Добавить статус объекта с текстом и индикатором.
- [x] Показывать имя, модель, группу, WAN, клиентов, проблемы и последний контакт.
- [x] Добавить поиск по имени, модели, ID, WAN-адресу, группе и тегам.
- [x] Добавить фильтр по статусу.
- [x] Добавить фильтр по группе.
- [x] Добавить фильтр по наличию проблем.
- [ ] Добавить сортировку колонок.
- [x] Открывать объект кликом по строке.
- [ ] Показывать массовые действия только после выбора объектов.
- [ ] Добавить loading, empty и error states таблицы.
- [ ] Проверить таблицу на 1366 px и 1920 px.
- [ ] Сделать мобильное представление списка объектов.

## Этап 2. Карточка и обзор объекта

- [x] Создать верхнюю панель объекта.
- [x] Добавить хлебную крошку возврата к объектам.
- [x] Добавить вкладки «Обзор», «Клиенты и сеть», «Операции», «Сведения», «Эксперт».
- [x] Показать статус и время последнего контакта.
- [ ] Показать WAN и доступность сервера.
- [x] Показать load, память, uptime и число клиентов.
- [x] Убрать дублирующиеся и технические метрики.
- [ ] Показать активные предупреждения с приоритетами.
- [x] Добавить компактные графики метрик.
- [ ] Добавить выбор периода графиков.
- [x] Добавить основную кнопку открытия LuCI.
- [x] Добавить кнопку перехода к диагностике.
- [ ] Перенести перезагрузку и опасные действия в отдельное меню.
- [x] Убрать raw inventory с обзорной страницы.
- [x] Убрать произвольные команды с обзорной страницы.
- [x] Убрать редактирование группы и тегов с обзорной страницы.

## Этап 3. Клиенты

- [x] Объединить DHCP leases и Wi-Fi stations в единую модель клиента.
- [x] Создать таблицу клиентов.
- [~] Показывать online/offline состояние.
- [x] Показывать имя, IP, MAC и тип подключения.
- [~] Для Wi-Fi показывать сеть, сигнал и скорость.
- [ ] Для Ethernet показывать интерфейс или порт, если доступно.
- [x] Добавить поиск по имени, IP и MAC.
- [~] Добавить фильтры по состоянию и типу подключения.
- [x] Добавить понятное состояние отсутствия клиентов.
- [x] Проверить длинные имена и неизвестные значения.

## Этап 3. Сеть

- [x] Создать сводку WAN-подключения.
- [x] Показывать состояние интернет-доступа и внешний IP.
- [x] Создать список LAN/WAN/Wi-Fi/VPN интерфейсов.
- [~] Показывать адреса, состояние и счетчики трафика.
- [~] Показать основные маршруты.
- [ ] Показывать Wi-Fi сети и подключенных клиентов.
- [ ] Спрятать низкоуровневые детали в раскрываемые блоки.
- [~] Добавить loading, empty и error states.

## Этап 4. Операции

- [x] Объединить отдельные диагностические кнопки в один сценарий.
- [~] Показывать прогресс диагностики.
- [~] Показывать итог диагностики понятным языком.
- [ ] Добавить рекомендации по найденным проблемам.
- [x] Упростить создание удаленной сессии до выбора длительности.
- [x] Спрятать host, порты и параметры туннеля в дополнительные настройки.
- [x] Добавить действия «Открыть LuCI» и «Скопировать SSH».
- [ ] Показывать оставшееся время удаленной сессии.
- [x] Добавить понятное закрытие удаленной сессии.
- [x] Объединить Preview и Stage в сценарий «Проверить → Применить».
- [x] Показывать изменения перед применением.
- [x] Понятно объяснять commit confirmed и автоматический откат.
- [x] Добавить безопасные пресеты настроек.
- [ ] Перенести низкоуровневое управление пакетами в экспертный режим.
- [ ] Добавить подтверждение опасных операций.

## Этап 5. Сведения

- [x] Показать модель, плату и версию OpenWrt.
- [x] Показать hostname и идентификатор устройства.
- [x] Показать группу и теги.
- [x] Добавить редактирование группы и тегов.
- [x] Показать даты регистрации и последнего контакта.
- [ ] Показать версию агента, когда она будет доступна.
- [x] Добавить копирование технических идентификаторов.

## Этап 5. Экспертный режим

- [x] Перенести raw inventory.
- [x] Перенести произвольные команды.
- [x] Перенести raw UCI show/set/commit/revert.
- [x] Перенести низкоуровневое управление пакетами.
- [x] Перенести полную историю команд.
- [x] Сократить основные фильтры истории до «Все», «Выполняются», «Ошибка».
- [x] Перенести дополнительные фильтры в меню.
- [x] Перенести аудит.
- [x] Добавить предупреждение перед опасными действиями.
- [ ] Подготовить экспертный режим к разграничению прав.

## Убираем и объединяем

- [x] Убрать локальные Reload / Refresh из отдельных панелей.
- [x] Добавить автообновление данных.
- [x] Оставить одну глобальную кнопку обновления на экране объектов.
- [x] Убрать постоянный выбор массовой команды.
- [ ] Показывать массовые действия только при выбранных объектах.
- [ ] Объединить дублирующие блоки состояния и метрик.
- [ ] Объединить диагностические действия.
- [x] Объединить Preview и Stage.
- [ ] Спрятать технические поля удаленного доступа.
- [ ] Спрятать raw JSON и raw UCI от оператора.
- [ ] Убрать опасные действия из основных кнопок.

## Общие состояния и качество

- [ ] Добавить skeleton loading.
- [~] Добавить единый компонент пустого состояния.
- [ ] Добавить единый компонент ошибки.
- [ ] Добавить toast-уведомления.
- [ ] Добавить единые диалоги подтверждения.
- [ ] Показывать request ID в раскрываемых деталях ошибки.
- [ ] Добавить tooltips для непонятных иконок.
- [ ] Проверить навигацию клавиатурой.
- [ ] Проверить видимый focus state.
- [ ] Проверить контраст текста и статусов.
- [ ] Проверить отсутствие наложений элементов.
- [ ] Проверить отсутствие обрезанного текста.
- [ ] Проверить преднамеренность горизонтального скролла таблиц.
- [ ] Проверить интерфейс на desktop, tablet и mobile.
- [ ] Сделать браузерные скриншоты ключевых экранов.

## Требования к API

- [~] Нормализовать данные клиентов.
- [ ] Нормализовать состояние интерфейсов.
- [ ] Подготовить временные ряды для графиков.
- [ ] Добавить операторские операции поверх сырых команд.
- [ ] Добавить серверную пагинацию списка объектов при необходимости.
- [ ] Добавить серверный поиск и сортировку при необходимости.

## Приемка редизайна

- [ ] За 10 секунд видно, какие объекты требуют внимания.
- [ ] Причина проблемы понятна без raw JSON.
- [ ] LuCI открывается максимум за два клика.
- [ ] Диагностика запускается максимум за три клика.
- [ ] Обычный оператор не видит raw UCI и произвольные команды.
- [ ] Опасные действия требуют явного подтверждения.
- [ ] Основные сценарии работают на ширине 1366 px.
- [ ] Основные сценарии работают на ширине 1920 px.
- [ ] Основные сценарии доступны на мобильном экране.
- [ ] Ошибки API показываются понятным языком.