TL;DR

Админка Jusmila — отдельный SPA на Vite + React 18, доступный только сотрудникам склада и менеджеру. Управляет каталогом из 10 000+ деталей, очередью заказов, импортами от поставщиков, зонами доставки на карте, и встроенным session replay для разбора UX-проблем.

Обзор админки

Админка — это вторая половина системы. На витрине покупатель видит каталог и оформляет заказ. В админке сотрудник склада обрабатывает заказы и держит каталог в актуальном состоянии. Между ними — общий API на NestJS.

Каталог

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

У каждой детали — таблица fitment (совместимость): какие модели мотоциклов подходят, с какого года. Эта таблица нужна для фильтра «по модели» на витрине. Без неё клиент не сможет понять подойдёт ли деталь к его мотоциклу.

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

Заказы

Очередь заказов — основной операционный экран. Сотрудник видит все новые заказы в реальном времени (Socket.IO). У каждого заказа — позиции с артикулами и количеством, адрес доставки, способ оплаты, статус.

Жизненный цикл заказа: new → confirmed → picking → packed → shipped → delivered. На каждом переходе клиент получает уведомление.

Если на складе не оказалось всех позиций (расхождение остатков), сотрудник переводит заказ в partial: указывает что недостаёт, клиенту приходит письмо с вариантами — ждать, заменить, отменить.

Импорты

Отдельный раздел под скрипты импорта. На текущий момент работают пайплайны для mototex и anjese — это поставщики, у которых есть свой каталог в публичном вебе. Импорт запускается из админки кнопкой; результат — лог в реальном времени через Socket.IO: какие SKU обновлены, какие добавлены, какие пропущены из-за конфликтов.

Под капотом — chrome-devtools MCP: открывается реальный браузер, парсятся карточки товаров, артикулы и цены, после чего идут в очередь обновления через API.

Карты и зоны

Интегрирован Leaflet — оператор может видеть зоны доставки как полигоны на карте Литвы. Внутри каждой зоны — правила: минимальная сумма заказа, время доставки, наценка за расстояние. Менеджер может перерисовать границы зоны, не лезя в код.

При оформлении заказа клиент вводит адрес, тот геокодируется в координаты, и система проверяет в какой зоне он находится. Если ни в одной — «доставка не покрывает ваш район».

Session replay

Самое необычное в админке — встроенный rrweb-player. Когда клиент сообщает о баге («не могу добавить в корзину», «оплата не прошла»), оператор открывает сессию этого клиента, прокручивает запись и видит точную последовательность кликов и состояния DOM.

rrweb пишет события на клиенте (с маскировкой паролей и платёжных данных), отправляет на бэкенд, тот хранит их в Postgres. В админке плеер показывает сессию как мини-видео: можно перематывать, ставить на паузу, фильтровать по событиям.

Это критично для UX-доработки: вместо «у меня не работает» оператор видит конкретный паттерн поведения, и инженер получает воспроизводимый отчёт.

Аналитика

Recharts рисует базовые графики: продажи по дням, топ-категорий, конверсия по зонам доставки. Это не BI-уровень, а оперативная сводка — менеджер открывает админку, видит график за неделю, принимает решение «нужно добавить водителей в эту зону» или «расширить ассортимент в этой категории».

Экспорт и отчёты

jsPDF генерирует накладные, акты и отчёты прямо в браузере. Сотрудник склада печатает накладную при сборке заказа; менеджер выгружает месячный отчёт по продажам в PDF.

Доступ и роли

Аутентификация — JWT через NestJS Passport. Две основные роли: manager (всё, включая ценообразование) и warehouse (только заказы, остатки и сборка). Если завтра появится диспетчер или маркетолог — добавление новой роли это правка таблицы permissions, а не рефакторинг.