# UI/UX Roadmap

## Цель

Сделать RMM-интерфейс удобным для оператора, который обслуживает роутеры, но не обязан знать OpenWrt, UCI и внутренние команды агента.

Главный экран должен за несколько секунд отвечать на три вопроса:

1. Какие роутеры требуют внимания?
2. Что именно не работает?
3. Какое безопасное действие можно выполнить?

Скриншоты Netcraze используются как ориентир по плотности, навигации и представлению данных, без копирования бренда и интерфейса один в один.

## Роли

### Оператор

- Видит состояние объектов, клиентов, сети и предупреждений.
- Запускает готовые диагностики и безопасные операции.
- Открывает удаленный доступ и LuCI.
- Не работает с raw JSON, UCI-командами и техническими параметрами туннеля.

### Эксперт

- Имеет доступ ко всем существующим низкоуровневым функциям.
- Просматривает raw inventory, историю команд и аудит.
- Выполняет произвольные команды, UCI-операции и управление пакетами.

На первом этапе экспертный режим будет отдельным разделом интерфейса. Разграничение прав можно добавить позже.

## Принципы интерфейса

- Плотный рабочий интерфейс без маркетинговых блоков и декоративных карточек.
- Единая навигация и предсказуемые вкладки.
- Статусы читаются по тексту и цвету: норма, внимание, ошибка, недоступен.
- Основные действия доступны сразу, редкие и опасные спрятаны в меню.
- Одна глобальная кнопка обновления вместо кнопок обновления в каждом блоке.
- Автообновление данных с понятным временем последнего контакта.
- Русские операторские названия; технические термины остаются в экспертном режиме.
- Любая опасная операция требует подтверждения и объясняет последствия.
- Ошибки показывают понятное описание; request ID доступен в раскрываемых деталях.

## Целевая структура

### 1. Объекты

Первый экран после входа: полноширинная таблица всех роутеров.

Основные колонки:

- Статус.
- Имя объекта.
- Модель и группа.
- WAN / интернет.
- Клиенты.
- Проблемы.
- Последний контакт.

Доступные действия:

- Поиск.
- Фильтры по статусу, группе и проблемам.
- Открытие объекта кликом по строке.
- Массовые действия появляются только после выбора объектов.

### 2. Карточка объекта

Верхняя часть содержит имя, статус, последний контакт и основные действия.

Вкладки:

- **Обзор** — здоровье роутера, предупреждения, основные метрики и графики.
- **Клиенты** — единый список DHCP- и Wi-Fi-клиентов.
- **Сеть** — WAN, интерфейсы, Wi-Fi, маршруты и счетчики.
- **Операции** — диагностика, удаленный доступ, обновления и безопасные настройки.
- **Сведения** — модель, прошивка, группа, теги и идентификаторы.
- **Эксперт** — raw inventory, команды, UCI, пакеты, история и аудит.

## Что меняем в текущем UI

| Сейчас | После редизайна |
| --- | --- |
| Список устройств в узкой боковой панели | Полноширинная таблица объектов |
| Длинная страница со всеми функциями | Карточка объекта с вкладками |
| Много кнопок Reload / Refresh | Автообновление и одна глобальная кнопка |
| Raw Inventory на обзорной странице | Раздел «Эксперт» |
| Выбор произвольной команды на обзорной странице | Раздел «Эксперт» |
| Пять отдельных кнопок диагностики | Единый сценарий «Запустить диагностику» |
| Raw UCI и множество кнопок | Пошаговое применение безопасных настроек; raw UCI в «Эксперт» |
| Preview и Stage как отдельные действия | Сценарий «Проверить изменения → Применить» |
| Технические поля SSH-туннеля | Выбор длительности и кнопки «Открыть LuCI» / «Скопировать SSH» |
| Редактирование группы и тегов в обзоре | Вкладка «Сведения» |
| Все статусы истории команд отдельными кнопками | Основные фильтры и меню дополнительных фильтров |
| Опасные действия рядом с обычными | Отдельное меню с подтверждением |

## Этапы реализации

### Этап 0. UX-аудит и фундамент

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

### Этап 1. Навигация и список объектов

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

### Этап 2. Обзор объекта

- Добавить верхнюю панель объекта и вкладки.
- Собрать компактную строку состояния.
- Показать WAN, загрузку, память, uptime, клиентов и предупреждения.
- Добавить основные графики за выбранный период.
- Оставить только главные действия: LuCI, диагностика и меню операций.

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

- Объединить DHCP leases и Wi-Fi stations в таблицу клиентов.
- Добавить поиск и фильтры клиентов.
- Создать отдельный экран интерфейсов и подключений.
- Показать понятные состояния WAN, LAN и Wi-Fi.

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

- Сделать пошаговую диагностику с прогрессом и итогом.
- Упростить создание удаленной сессии.
- Добавить безопасные формы настроек вместо raw UCI.
- Представить обновления и пакеты как понятные операции.
- Показывать ход, результат и рекомендации после операции.

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

- Перенести существующие технические возможности без потери функциональности.
- Разместить raw inventory, команды, UCI, пакеты, историю и аудит.
- Отделить опасные операции и добавить явные подтверждения.
- Подготовить интерфейс к будущему разграничению прав.

### Этап 6. Состояния и полировка

- Добавить skeleton, empty, loading, offline и error states.
- Добавить toast-уведомления и единый стиль подтверждений.
- Проверить навигацию клавиатурой и фокус.
- Проверить таблицы, переносы текста и отсутствие наложений.
- Проверить desktop, tablet и mobile.

### Этап 7. Недостающие данные API

- Нормализовать запись клиента из DHCP и Wi-Fi.
- Нормализовать состояние интерфейсов и подключений.
- Подготовить временные ряды для графиков.
- Добавить операторские операции поверх сырых команд.
- При необходимости добавить серверную пагинацию, поиск и сортировку.

## Приоритет первой итерации

1. Новый layout и полноширинный список объектов.
2. Карточка объекта с вкладками.
3. Новый обзор объекта.
4. Упрощенный удаленный доступ и LuCI.
5. Перенос технических функций в «Эксперт».

## Критерии готовности

- Оператор за 10 секунд понимает, какие объекты требуют внимания.
- Состояние объекта понятно без просмотра JSON и истории команд.
- LuCI открывается не более чем за два клика.
- Диагностика запускается не более чем за три клика.
- В обычном режиме нет raw UCI, произвольных команд и параметров туннеля.
- Опасные операции всегда требуют явного подтверждения.
- Интерфейс корректно работает на ширине 1366, 1920 и на мобильном экране.
- Нет случайного горизонтального скролла, наложений и обрезанного текста.
- Ошибки API отображаются понятно и позволяют раскрыть технические детали.