# MAPPEX Dashboards

Интерактивный прототип концепта «Межведомственный наблюдательный пункт»: МЧС, МВД, Минздрав и другие службы работают с единой базой, а ИИ-автопилот назначает исполнителей, если оператор не успел отреагировать.

- **Демо:** https://mappex.yappix.ru
- **Код:** https://git.myunion.pro/yappix-samples/mappex
- **Кейс:** https://yappix.ru/eksperimenty/mappex
- **Макет:** [Figma — Government Dashboards](https://www.figma.com/design/lvFq6m1GspPNv5PaDI6pu0/Government-Dashboards?node-id=0-1) (фреймы «Dashboard» и «Dashboard 3D Map», 3840×2160)

![2D-карта](docs/screen-2d.jpg)

## Запуск

```bash
npm install
npm run dev
```

Откройте http://localhost:5173. Сборка: `npm run build`, проверка: `npx tsc -b && npm run lint`.

Нужен интернет: подложка карты — векторные тайлы [OpenFreeMap](https://openfreemap.org) (данные © OpenStreetMap), спутник — Esri World Imagery. Ключи API не нужны.

## Развернуть у себя

Прототип собирается в статическую папку `dist/`, сервер с бэкендом не нужен.

```bash
git clone https://git.myunion.pro/yappix-samples/mappex.git
cd mappex
npm ci
npm run build
```

Папку `dist/` можно выложить на любой статический хостинг: nginx, Vercel, Netlify, GitHub Pages, S3. Для nginx есть готовый конфиг: [`deploy/nginx-mappex.yappix.ru.conf`](deploy/nginx-mappex.yappix.ru.conf). Скрипт [`deploy/publish.sh`](deploy/publish.sh) собирает проект и выкладывает его по rsync: `DEPLOY_HOST=root@ваш-сервер DEPLOY_REMOTE=/var/www/mappex/ bash deploy/publish.sh`.

Воркер MapLibre — ES-модуль (`assets/maplibre-gl-worker-*.mjs`). Сервер должен отдавать `.mjs` с типом `application/javascript`, иначе карта не загрузится. Конфиг nginx выше это учитывает.

![Вид с дрона](docs/screen-3d.jpg)

## Что работает

- **Карта «Пункт наблюдения»** (MapLibre GL):
  - **2D** — регионы РФ с подсветкой при наведении. Клик по региону открывает карточку с камерами городов, а «Статистика по региону» — сводку по смертности.
  - **3D** — вид с дрона: переключение дронов, облёт цели ИИ-пилотом, ручное управление с клавиатуры (WASD/стрелки, Q/E, R/F, Z/X).
  - **Спутник** и **Гибрид**.
  - Слои: Города, Разметки, Дороги, Метки, Регионы, Черно-белое. Кнопка «Здания» включает 3D-здания на 2D-карте.
  - «Глобус» в углу переключает проекцию, стрелки прокручивают карту.
- **Самые важные события** — вызов ведомства в 1 клик. Залитая кнопка значит, что служба уже выехала. «Камера» открывает 3D-вид с ближайшего дрона. На карточке идёт таймер «ИИ через N с».
- **ИИ-автопилот** — переключатель в верхней строке:
  - «Автопилот» назначает исполнителей сразу.
  - «Полуручной» назначает, только если оператор не успел за отведённое время.
  - «Ручной» не вмешивается.

  Исполнителя ИИ выбирает по релевантности, профпригодности, скорости, стрессу и расстоянию до места (`src/store/useStore.ts`, `scoreEmployee`).
- **Журнал действий** — кто, что и когда сделал, статусы «В работе», «Провалил» и время завершения, датчик-рейтинг сотрудника.
- **Мой профиль** — датчики «Стресс» и «Задачи» зависят от текущей нагрузки, плюс столбики по годам и KPI.
- **Радар событий** — следит за ближайшим к центру Москвы происшествием, умеет приближать и открывать его на карте.
- **Статистика и графика** — периоды 1-Д, 1-НЕД, 1-МЕС, 1-ГОД, выбор показателей, три типа графика, курсор с подсказкой.
- **Плитки модулей** скрывают и показывают виджеты. Авиация, Сообщения, Расписания и Задачи открываются боковой панелью.
- **Уведомления ведомств** — «Принять» создаёт задачу, «Отклонить» и «Закрыть всё» убирают уведомления.
- **Экстренный вызов** — кнопка внизу слева: набор 112, 101, 102, 103, 104, окно звонка, радиоканал.
- **Разделы меню**: «Управление задачами» (происшествия, исполнители, канбан, учёт качества сотрудников) и «Настройки системы».

Демо-симуляция каждые 40 секунд добавляет новый сигнал с дрона или камеры. Интервал и время на реакцию настраиваются в «Настройках системы».

## Специальные возможности

По умолчанию включены «Ночное время» и «Плохое зрение», как в макете. В настройках есть ещё «Максимальная контрастность» и дневная тема. Палитра пастельная: на чёрном фоне такие цвета не дают ореолов и «двоения» при астигматизме. Учитывается `prefers-reduced-motion`.

## Устройство

```
src/
  store/useStore.ts      состояние, ИИ-автопилот, симуляция (zustand)
  data/                  моковые происшествия, сотрудники, дроны, статистика
  components/map/        карта, стили MapLibre, HUD дрона, попап региона, глобус
  components/            панели дашборда, шапка, меню, экстренный вызов
  pages/                 «Управление задачами», «Настройки», заглушки разделов
  styles/tokens.css      токены и темы (ночь / день / контраст / плохое зрение)
  assets/figma/          иконки, фото и SVG, выгруженные из Figma
public/data/             границы субъектов РФ (упрощённый GeoJSON)
```

Сетка повторяет макет: при корневом шрифте 16 px 1rem соответствует 32 px макета, поэтому на 1920×1080 раскладка совпадает с Figma в масштабе 1:2. Шрифт масштабируется с шириной экрана. На экранах уже 1100 px панели выстраиваются в колонку.

![Максимальная контрастность](docs/screen-contrast.jpg)

## Отличия от макета

- Шуточные тексты-заглушки заменены нейтральными правдоподобными, опечатки исправлены.
- Фон с гранеными ромбами нарисован на CSS, а не взят из 4K-картинки (1,6 МБ).
- Векторная карта и 3D-вид с дрона — живые (MapLibre), а не статичные картинки.
- Шрифт SF Compact Display используется, если установлен в системе, иначе подставляется Inter.

## Лицензия

Код — [MIT](LICENSE). Фото, эмблема ИФНС, аватары и прочие картинки из макета (`src/assets/figma/`) лежат в репозитории только для демонстрации и под MIT не попадают. Данные карты — © участники OpenStreetMap (через OpenFreeMap), спутниковые снимки — © Esri и партнёры. Границы субъектов РФ (`public/data/`) взяты из [click_that_hood](https://github.com/codeforgermany/click_that_hood) (Code for Germany, MIT).