Dashboard

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

Навигация

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

Resources (сайдбар)

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

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

Уведомления (v1.1.14)

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

Live-режим

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

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

Таблицы (DataTable)

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

Возможности

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

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

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

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

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

Крупные журналы (двухуровневая загрузка)

На страницах с очень большим объёмом данных используется два уровня загрузки:

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

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

Обзор (/)

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

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

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

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

Справочник объектов: название, описание, адрес, дата создания, облако. Колонка «Количество постов».

Посты (/posts)

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

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

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

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

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

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

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

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

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

Карты (/cards)

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

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

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

• Использование — до/после инкассации, категории regular/service/unlimited.
• Финансы — наличные, безнал, скидочные, выручка.
• Архивирование — политики по группам данных, журнал операций.

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

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

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

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

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

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

Двухколоночный layout (как PyOrchestrator): слева брендинг с SVG-фоном (волны/SCADA), справа форма. Переключатель темы в правом верхнем углу. Авто-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