Дашборд доставки: Депо

Задача

«Депо» - городская служба доставки: 12 курьеров на линии, 58 заказов за смену, диспетчер сидит перед одним монитором по 6-12 часов. Дашборд службы доставки должен показывать, где курьеры и какие заказы приближаются к дедлайну, чтобы диспетчер вмешался до срыва срока, а не разбирался после. Это не витрина, а рабочий инструмент: плотность информации и считываемость статуса за долю секунды важнее «воздуха» и иллюстраций. Демо-проект: компания вымышленная, задача типовая и настоящая.

Решение

Формат - SPA на пяти экранах: сводка смены, курьеры, заказы, зоны, аналитика. Next.js 15 со статическим экспортом, состояние в Zustand, бэкенда нет - всё живёт в браузере.

• Данные - детерминированный мок: собственный PRNG с фиксированным зерном, «сейчас» - константа, а не Date.now(). Каждый прогон даёт одну и ту же картинку, скриншоты воспроизводятся.
• Симуляция real-time: тикер раз в 5 секунд двигает курьеров, меняет статусы заказов и дописывает события в ленту. Тумблер в шапке замораживает картинку - для показа и скриншотов.
• Карта зон - ручной SVG без картографических библиотек: цвет точки - статус курьера, насыщенность заливки - загрузка зоны, клик по зоне открывает её карточку.
• Просрочка - вычисляемое состояние, а не отдельный статус заказа: иначе заказ оказался бы одновременно «в пути» и «просрочен», и таблица начала бы врать.
• Три порога срочности вместо бинарного «ок/просрочено»: запас, впритык, тревога. Сигнал - цвет, иконка и текст, а не только цвет.
• Таблицы с сортировкой, фильтрами и поиском; панель курьера, карточка заказа, массовое назначение; каждое действие подтверждается тостом с кнопкой «Отменить действие».

Детали, которые легко не заметить

• Состояния данных проработаны как отдельная работа: загрузка, пустой результат фильтра, экран ошибки, закрытая утренняя и не начавшаяся ночная смены с пустой картой.
• Тикер симуляции ставится на паузу при prefers-reduced-motion и при скрытой вкладке - фоновая вкладка не греет батарею впустую.
• Доступность проверена сценарием: фокус ловится внутри модалки заказа, Escape закрывает выезжающую панель, у сортировки и кнопок закрытия - aria-label, для скринридеров озвучивается «обновлено N секунд назад».
• Вход демонстрационный и честный: экран логина с подсказанными демо-данными, проверка на клиенте, сессия в sessionStorage - панель показывает разграничение доступа, не изображая реальную защиту.
• Юридическая гигиена демо: плашка «материалы носят демонстрационный характер» в сайдбаре, страница-дисклеймер, noindex в метаданных и X-Robots-Tag в заголовках выкладки.
• Отдельной мобильной раскладки нет осознанно: дашборд - десктопный инструмент. На узких экранах таблицы превращаются в карточки, карта уезжает под аккордеон; тёмная и светлая темы сохраняют выбор.

Цифры

Всё посчитано по демо-данным: 5 экранов, 12 курьеров и 58 заказов смоделированной смены, 5 зон на рукописной SVG-карте. Симуляция обновляет картинку каждые 5 секунд, темы - тёмная и светлая, выбор сохраняется.