Dashboard

React-приложение со светлой, тёмной и системной темой (следует настройкам ОС без перезагрузки), фиксированным боковым меню, live-обновлением данных и двухколоночной страницей входа (макет как у PyOrchestrator, свой фон).

Навигация

Разделы с пометкой admin доступны только Administrator (manage_users или view_logs в JWT).
Профиль — ссылка в шапке (/profile). Мастер настройки — /setup (при первом входе или ?restart=1).

Встроенная справка (v1.1.22, размещение v1.1.28)

Хлебные крошки (v1.1.22)

Над контентом страницы — цепочка группа меню → раздел (те же названия, что в боковом меню).

Группа не является ссылкой; промежуточные разделы (например «Посты» на карточке поста) кликабельны.

Resources (сайдбар)

Подробнее о встроенных платформах: Встроенные сервисы.

Язык интерфейса (v1.1.13+)

Структура файлов i18n (v1.1.37+)

Базовые строки — dashboard/src/i18n/messages/{en,ru}.ts. Feature-модули вынесены отдельно:

См. README i18n в репозитории.

Уведомления (v1.1.14, пагинация v1.1.52)

На странице Уведомления и в виджете на Обзоре отображаются локализованные шаблоны по типу события (mqtt_credit, user_login, wash_created и др.), а не сырой текст из БД. Параметры (сумма, логин, имя объекта) извлекаются из старых записей. Метки severity и CSV-экспорт следуют выбранному языку интерфейса.

Полная страница уведомлений (/notifications) — v1.1.52

Тот же паттерн серверной пагинации, что и в журнале MQTT:

Виджет на Обзоре — компактное превью (10 строк), отдельно от полной страницы.

Обновления ПО и модули (v1.1.34)

Дополнительные типы событий (шаблоны EN/RU в notifications-features.{en,ru}.ts):

• Обновления ПО — запуск, успех, ошибка (CRM, Dynamic API, PyOrchestrator)
• Модули — установка, удаление, запуск, остановка, обновление, ошибки

Каналы web и Telegram настраиваются на Обзоре или в Уведомлениях.

Live-режим

Оперативные данные обновляются автоматически (usePolling). В шапке — индикатор live-режима.

На странице Текущее состояние время режима тикает в реальном времени (LiveModeTimer).

Таблицы (DataTable)

Все основные таблицы CRM используют общий компонент DataTable с единой пагинацией.

Возможности

• поиск по текстовым полям;
• сортировку по клику на заголовок;
• фильтры (выпадающие списки);
• выбор видимых колонок (иконка настроек таблицы);
• пагинацию (см. ниже);
• массовые действия (экспорт CSV, удаление — где доступно).

Пагинация (v1.1.5+)

В подвале каждой таблицы:

Подпись в подвале: N записей · стр. X из Y · загружено M — если есть ещё не показанные строки в текущем наборе данных.

При смене размера страницы, поиске или фильтрах счётчик сбрасывается на первую страницу.

Крупные журналы (серверная «Загрузить ещё»)

На страницах с очень большим объёмом данных используется серверная пагинация (кнопка над таблицей). Пагинация DataTable в подвале (20–100 строк) — только по уже загруженным строкам; второй «Загрузить ещё» в подвале на этих страницах нет.

Виджет «Последние уведомления» на Обзоре — компактное превью (10 строк).

Разделы подробно

Обзор (/)

KPI-карточки до инкассации: наличная / безналичная / общая выручка / сумма скидок / активные ошибки.

Суммы по финансам и использованию — сумма последних записей каждого поста (не всех исторических строк).

Графики (Recharts): статус постов, круговые диаграммы «Использование» (клиенты / сервис / VIP) и доли оплаты (наличные / безнал / скидки), выручка по датам, загруженность по датам (v1.1.15). Таблица последних уведомлений (кнопка «Удалить все» на полной странице уведомлений).

Автомойки (/washes)

Справочник объектов: название, описание, адрес, дата создания, облако, UUID (mapsExternalId) для внешних площадок. Колонка «Количество постов».

UUID (mapsExternalId): назначается автоматически при создании (и при init-seed для существующих моек без поля). Модуль Автомойки рядом отправляет его на сайт «Автомойки рядом» как Owner API external_id — так площадка понимает, какая это мойка, без знания внутреннего Mongo id CRM и без числового id сайта.

Посты (/posts)

Посты с привязкой к автомойке: статус онлайн/оффлайн, номер, название, серийный номер, MQTT-логин, объект. Каскадное удаление связанных данных.

В колонке действий — иконка ⚙ (настройки устройства) → страница поста. При создании/редактировании — логин и пароль MQTT для панели поста.

Онлайн — если lastMessageAt не старше 30 секунд (как на Обзоре).

Карточка поста (/posts/:id)

Якорь #device-settings прокручивает к блоку настроек устройства.

Текущее состояние (/states)

Все посты всех объектов. Колонка Статус (онлайн/оффлайн), фильтр по статусу.

Интерактивный график на всю ширину (Recharts): переключение метрик (время режима / баланс / бесплатная пауза), tooltip с деталями, brush при большом числе постов, live-обновление времени режима.

Таблица: адрес, номер поста, баланс, пауза, скидка, live-таймер режима, название режима, дата последнего сообщения.

Информация (/system) — v1.1.16, v1.1.22

Страница состояния платформы в группе «Система» (пункт «Информация»). Не путать с группой меню «Система» в целом и с «Публикациями» в автоматизации.

Live-обновление каждые 30 с (GET /api/dashboard/system через Dynamic API).

Целостность и исправление (/settings) — v1.1.21

Секция в Настройках (перед «Обновления ПО»). Только администраторы (manage_users / manage_api).

DATA_DIR (v1.1.19+): абсолютные пути на хосте (/mnt/hdd/data, /var/lib/wash-pro-crm) — корректны; предупреждение только при DATA_DIR внутри /deploy.

Git (v1.1.21+): /deploy — bind mount проекта; проверка регистрирует git safe.directory (dubious ownership). Без .git на хосте автообновление недоступно.

API: GET/POST /api/crm/updates/repair (update-bridge).

Обновления ПО (/settings#updates) — v1.1.20

Секция «Обновления ПО» в Настройках и баннер в шапке. Только администраторы.

Шаг pull CRM (v1.1.20+): git fetch + git reset --hard origin/main — сбрасывает только отслеживаемые файлы; .env, DATA_DIR, docker-compose.override.yml, local/ сохраняются.

Сборка (v1.1.20+): scripts/compose-files.sh — те же -f, что у scripts/start.sh (override, Redis, PyOrchestrator).

Поведение v1.1.18+: загрузка страницы и опрос прогресса job не обращаются к GitHub — только кэш update-bridge. GITHUB_TOKEN в .env опционален (release notes, лимит API).

v1.1.50+: баннер больше не крутит спиннер на зависшей задаче queued, если целевая версия уже установлена; update-bridge закрывает такие задачи и запускает следующую в очереди.

v1.1.51+: перед новым обновлением update-bridge снимает зависшую активную задачу (та же логика, что в проверке целостности).

Состояние: DATA_DIR/update-bridge/state.json. API: GET /api/crm/updates/status, POST /api/crm/updates/check, POST /api/crm/updates/apply/{component}.

Карты (/cards)

Журнал применений: каждое событие NFC (state/card с поста) создаёт новую строку. Активная сессия обновляется по данным state/process (баланс, скидка).

Тип скидки — номер 1–5 из справочника. Статусы: success, rejected. Инкассация (cardType: collection на устройстве) — уведомление в CRM, без строки в разделе карт.

Аналитика (/usage, /finance, /archive)

• Использование — до/после инкассации, категории regular/service/unlimited.
• Финансы — наличные, безнал, скидочные, выручка.
• Архивирование — политики по группам данных (в т.ч. срок хранения MQTT-телеметрии), журнал с колонкой Результат, счётчик проверенных записей, понятное отображение «0 записей», ручная очистка телеметрии (v1.1.49).

Система и автоматизация

Стабильность навигации (v1.1.12)

• повторная загрузка JS-чанков при сбое сети (lazyPage);
• RouteErrorBoundary вместо серого экрана;
• таймаут polling 60 с; на Обзоре — сообщение об ошибке вместо бесконечного Loading.

Переключатели в шапке (v1.1.14)

• переключатель языка — одна иконка с флагом текущей локали (на всех экранах);
• Live/Static — одна иконка (радио / пауза) на всех экранах.

Диалоги и обратная связь (v1.1.44)

• Toast — сообщения success/error/info (справа внизу), автоскрытие
• Модальное подтверждение — удаление пользователя/группы, бэкап, обновления, исправления целостности — без confirm браузера

Встроенная справка (v1.1.44)

В сайдбаре справки: Мастер настройки, Приветствие, Профиль. Ссылка на полную документацию GitHub Pages (с учётом локали).

Страница входа (/login)

Двухколоночный layout (как PyOrchestrator): слева брендинг с SVG-фоном (волны/SCADA), справа форма. Название и слоган — из Настройки → Брендинг (v1.1.44). Переключатель темы в правом верхнем углу. Авто-refresh JWT; при истечении сессии — перенаправление на /login.

Роли пользователей

Управление пользователями: Dashboard → Пользователи / Группы и права или Dynamic API Panel → Users / Groups.

Прокси Dashboard (nginx)

Демо-данные

./scripts/generate-demo-data.sh
./scripts/generate-demo-cards.sh

Сборка

cd dashboard && npm install && npm run dev    # :5173
npm run build                                  # dist/ → Docker

Технологии

React 18 · TypeScript · Vite · Tailwind · Lucide · Recharts · usePolling / LiveModeContext