ParkTrack Admin

Админ-панель и интерфейс разметки ParkTrack. Приложение работает с backend из api-server, управляет пользователями, партнёрами, камерами, зонами, источниками данных и геометрией разметки.

Что есть в приложении

• Auth
  • регистрация
  • логин / logout
  • проверка текущей сессии через API
  • восстановление пароля через отдельную страницу
• Dashboard
  • обзор системы
  • health / version
  • быстрые переходы по основным ресурсам
  • мягкая обработка недоступных необязательных данных
• Users
  • список пользователей
  • создание пользователя
  • просмотр карточки
  • редактирование профиля, роли и активности
  • добавление пользователя в партнёра из карточки пользователя
  • просмотр партнёрских доступов
  • bulk actions: активировать, деактивировать, удалить выбранных пользователей
• Partners
  • список партнёров
  • создание / редактирование / удаление
  • управление участниками партнёра
  • настройка роли и read / write / delete scopes
  • bulk actions: активировать, деактивировать, удалить выбранных партнёров
• Cameras
  • список и фильтры
  • создание / редактирование / удаление
  • автоматическое определение размера изображения при добавлении камеры
  • snapshot preview
  • fullscreen preview для распознанных автомобилей
  • переход в разметку и привязку камеры на карте
  • bulk actions: активировать, деактивировать, удалить выбранные камеры
• Zones
  • список и фильтры
  • создание через интерфейс разметки
  • редактирование атрибутов
  • удаление
  • переход в image geometry и map geometry
  • редактирование точек и линий геометрии на карте
  • bulk actions: активировать, деактивировать, удалить выбранные зоны
• Sources
  • реестр источников данных
  • список, фильтры, detail panel
  • переход к профильной сущности
• Labeler
  • редактирование зон на изображении
  • полноэкранный режим рабочей области
  • перемещение изображения в рабочей области
  • добавление точек поверх существующих зон без случайного выбора старой зоны
  • map entrypoint для геометрии
  • возврат обратно в админский контекст
• Feedback
  • единый слой уведомлений
  • подтверждения опасных действий
  • корректные сообщения для API-ошибок 4xx

Основные маршруты

Приложение использует hash-routing:

• #/ — dashboard
• #/login
• #/register
• #/password-reset
• #/profile
• #/users
• #/partners
• #/cameras
• #/zones
• #/sources
• #/labeler

Раздел Разметка не открывается как отдельный главный модуль из sidebar. В нормальном сценарии в него попадают из конкретной камеры или зоны.

Стек

• React + TypeScript + Vite
• zustand
• react-konva
• Yandex Maps JS API 2.1

Требования

• Node.js 18+
• запущенный backend из api-server
• доступный ParkTrack API

Для локальной разработки backend обычно доступен по адресу:

http://127.0.0.1:8000/api/v1

Локальный запуск

npm install
npm run dev

По умолчанию dev-сервер поднимается на:

http://localhost:5173

API base URL

В production и staging адрес API задаётся через переменную окружения на этапе сборки:

VITE_API_BASE_URL=https://api.dev.parktrack.live/api/v1
VITE_YANDEX_MAPS_API_KEY=your-yandex-maps-api-key

Если переменная не задана:

• на localhost приложение использует http://127.0.0.1:8000/api/v1
• на остальных доменах приложение использует относительный путь /api/v1

Ручного поля API Base в интерфейсе нет: конечный пользователь не должен настраивать backend-адрес внутри UI.

Yandex Maps

Карты камер и геометрии зон работают через Yandex Maps JS API 2.1. Для staging / production нужно передавать ключ на этапе сборки:

VITE_YANDEX_MAPS_API_KEY=your-yandex-maps-api-key

Для совместимости также поддерживается старое имя VITE_YMAPS_API_KEY, но новое значение VITE_YANDEX_MAPS_API_KEY предпочтительнее.

Как приложение работает с backend

Фронтенд ожидает backend ParkTrack API с ресурсами:

• /auth
• /users
• /partners
• /cameras
• /zones
• /sources
• /admin
• /health
• /version

Защищённые ручки вызываются с bearer-токеном текущей сессии. Сессия сохраняется в localStorage, переживает обновление страницы и валидируется через API при входе в приложение.

Типичный сценарий проверки

1. Запустить backend из api-server
2. Запустить frontend labeler
3. Зарегистрироваться или войти
4. Открыть:
   • #/cameras
   • #/zones
   • #/sources
   • #/users
   • #/partners
   • #/profile
5. Проверить создание и редактирование пользователя
6. Проверить создание и редактирование партнёра
7. Проверить добавление пользователя в партнёра
8. Проверить создание / редактирование камеры
9. Проверить snapshot preview и fullscreen
10. Перейти в labeler из камеры или зоны
11. Отредактировать image geometry зоны
12. Отредактировать map geometry зоны
13. Проверить bulk actions на списках камер, зон, пользователей и партнёров
14. Проверить сброс пароля через #/password-reset

Проверка перед push

npm run build

Build должен проходить без TypeScript и Vite ошибок.