Global Control: концепт операционной CRM с живой симуляцией и демо-ИИ-копилотом

VITON¹³ делает продуктовые концепты, чтобы показать, как подходит к программам для бизнеса, а не только к сайтам. Global Control — главный в этой серии: операционная CRM для компаний, которые распределяют людей и заказы по городам, на примере Northstar Logistics, вымышленной компании доставки с хабами в Москве, Дубае, Лондоне и Нью-Йорке. Компания, её люди, клиенты и деньги придуманы, и демо говорит об этом прямо на экране.

Задание — премиальная CRM, в которой руководитель регистрирует сотрудников, раздаёт заказы, отслеживает их, смотрит показатели и графики, выгружает отчёты за месяц и год, получает уведомление, когда кто-то входит в систему, и работает с ИИ, который подстраивается под человека. И это должно быть демо, с которым может играть посторонний человек: нажать на всё, создать свои заказы и сотрудников и посмотреть, как компания отзовётся.

Онбординг спрашивает имя, роль (владелец, менеджер или сотрудник), название компании, отрасль, размер команды от 8 до 30 человек, валюту и акцентный цвет. По ответам генератор с фиксированным зерном собирает пространство: в демо по умолчанию это 18 человек в четырёх хабах, 22 клиента, около 400 заказов за 14 дней и шесть автоматизаций, а за ними — сгенерированная история, чтобы отчётам за месяц и год всегда хватало данных. Отрасль меняет словарь во всём интерфейсе (доставки и курьеры, выезды и мастера или заказы и сборщики), роль меняет главный экран (деньги и рост у владельца, очередь диспетчера у менеджера, «мой день» у сотрудника), а меню само перестраивается под то, чем человек пользуется чаще. Симуляция вводит людей в систему и выводит из неё с уведомлением, приносит новые заказы, ведёт курьеров по маршрутам и закрывает доставки, и у каждого хаба своё местное время.

Заказы — это доска, где карточки перетаскивают между статусами и прямо на людей, у каждой карточки живое кольцо SLA, а в карточке заказа ИИ-диспетчер ранжирует команду по хабу, загрузке, расстоянию, доле доставок в срок и рейтингу и объясняет выбор. В разделе «Команда» сотрудника регистрируют за четыре шага, и в конце появляется голографический бейдж, который наклоняется вслед за курсором; через несколько секунд после приглашения новый человек «входит в систему», и вся команда получает уведомление. Живая карта рисует для каждого хаба процедурный город, по которому едут курьеры, и глобальный вид с настоящей линией дня и ночи. Отчёты за месяц, квартал или год скачиваются в PDF, который собирает наш собственный минимальный генератор PDF, в CSV, который правильно открывается в Excel на обоих языках, и в JSON. Автоматизации работают как живые цепочки узлов, а конструктор превращает правило, написанное по-русски или по-английски, в триггер, условия и действия и прогоняет его на последних 14 днях. У каждого клиента есть объяснимый индекс здоровья.

Копилот — то, что мы называем демо-ИИ, и в продукте он так и подписан: языковой слой на устройстве с распознаванием опечаток на русском и английском, 35 намерениями и извлечением сущностей. Он отвечает живыми цифрами из пространства и действует через те же функции, что и человек, — от раздачи очереди до выгрузки отчёта. Проактивный слой не чаще раза в 45 секунд предлагает в один клик спасти заказ под угрозой срыва, а ⌘K открывает командную палитру.

Приложение написано на чистых JavaScript и CSS без фреймворка и собрано esbuild в статическую папку с относительными адресами, поэтому работает по любому пути; в портфолио оно живёт по адресу /demos/global-control/. Каждый раздел — отдельный лениво загружаемый фрагмент, всего 43 файла, а three.js загружается только для глобуса в заставке, с запасным 2D-холстом, если WebGL недоступен. Одно хранилище держит пространство и сохраняет его в localStorage; любое изменение проходит через небольшой набор действий, которые рассылают события, поэтому разделы, симуляция, уведомления, движок автоматизаций и копилот реагируют на одни и те же факты, не перерисовывая экраны целиком. Симуляция тикает раз в секунду, а циклы отрисовки на холсте засыпают, когда раздел закрыт или вкладка скрыта.

Данные строятся из зерна, поэтому одинаковые ответы дают одну и ту же компанию: подробные заказы за последние 14 дней, генератор истории для более ранних дней с недельными и сезонными колебаниями и хабы, чья активность следует местному рабочему времени. Все цифры считает один набор функций (показатели за любой период, дневные и месячные ряды, прогноз Хольта с недельной сезонностью, оценка исполнителей для диспетчера), поэтому дашборд, отчёты, файлы и копилот всегда сходятся. Генератор PDF — наш собственный: каждая страница отчёта рисуется на холсте и вкладывается как JPEG в файл PDF 1.4 с корректной таблицей перекрёстных ссылок, поэтому кириллица просто работает; CSV начинается с метки порядка байтов, а в русском интерфейсе переходит на точку с запятой и десятичную запятую, как ждёт русский Excel.

Дизайн — тёмная диспетчерская и дневная тема рядом: Unbounded для крупных цифр, Onest для текста и JetBrains Mono для подписей, все шрифты на своём сервере, тонкие линии панелей, один акцентный цвет, который выбирает посетитель, и движение повсюду — от заголовков, собирающихся по буквам, до считающих цифр, рисующихся графиков и подсветки за курсором; тем, кто просит уменьшить движение, изменения показываются мгновенно. Оба языка полные: по 2 045 строк интерфейса, с правилами множественного числа и отраслевым словарём.

Концепт работает по адресу /demos/global-control/: девять модулей, заставка и командная палитра, на русском и английском. 28 сентября 2026 года мы сами проверили его в Chrome в headless-режиме на локальной копии с боевыми заголовками и политикой безопасности контента (CSP) портфолио: 13 маршрутов на ширине компьютера и телефона, три роли, русский интерфейс, заставка с онбордингом и основные действия (ИИ-диспетчер, новый заказ, регистрация до бейджа, шесть вопросов копилоту, ⌘K, правило словами, выгрузка в PDF и CSV) прошли без единой ошибки в консоли, без нарушений CSP и без неудачных запросов. Месячный отчёт выгрузился корректным PDF на три страницы, а дневной CSV — строкой на каждый день.

Первый скрипт, app.js, весит 3,3 КБ в gzip; все 43 файла JavaScript вместе с таблицей стилей — 573 КБ в gzip, из них 138 КБ приходится на three.js для заставки. При первом визите передаётся 528 КБ за 25 запросов. На живом адресе Lighthouse 13.5.0 (по 5 прогонов на устройство, медианы, на MacBook с load average 3–9) дал производительность 79 на телефоне и 97 на компьютере, доступность 100 и лучшие практики 100; на телефоне оценку сдерживает самая крупная отрисовка — подзаголовок заставки, который появляется через 3,7 с, после короткой загрузки.

Global Control — концепт, который VITON¹³ сделал, чтобы показать диапазон, а не заказной проект. Northstar Logistics, её сотрудники, клиенты, заказы и деньги вымышлены и генерируются в браузере посетителя: нет ни клиента, ни пользователей, ни настоящих доставок, ни трафика, ни выручки, и ничего в демо не продаётся. Приглашения, сообщения, письма и входы в систему симулируются, и никакие данные не покидают браузер.

Копилот, ИИ-диспетчер, прогнозы и конструктор правил — это демо-ИИ: разбор намерений, правила и статистика на устройстве, а не языковая модель, поэтому они ничего не доказывают о том, как модель справилась бы с настоящей работой. Время в симуляции сжато. Все цифры — лабораторные замеры в Chrome в headless-режиме на одном компьютере в один день: сценарии проверки шли на локальной копии с боевыми заголовками, Lighthouse — на живом адресе с имитацией телефона; тестирования с пользователями не было. Боевой версии понадобятся сервер, учётные записи и права доступа, настоящие уведомления, интеграции и защита данных.

Как проверить портфолио веб-студии →