Админ-панель

TL;DR

Админ-панель — это операционный мозг платформы. Около 50 страниц, четыре уровня доступа (Platform Admin, Store Admin, Manager, Dispatcher, Driver), три разных layout-контекста под десктоп владельца, мобильный экран водителя и мобильный экран диспетчера. В одной системе одновременно живут заказы, каталог, инвентарь, промо-механики (от bulk-генерации кодов до QR-кампаний и Mix & Match), отчёты с финансовой сверкой по дню, кошельки клиентов, модерация отзывов и управление флотом. Отдельный пласт — аналитика: воронки регистрации, логина и чекаута, монитор инцидентов, журнал действий с записью пользовательских сессий и аудит-трейл по правкам каталога. Дизайн построен вокруг тёмно-зелёного #0e3814 как основного цвета и плотных табличных интерфейсов с reusable-компонентами: StatCard, DataTable, статус-бэйджи, модалки. Цель раздела ниже — показать, что владелец и его команда могут сделать руками, не открывая базу и не звоня разработчику.

Контекст и роли

Платформа обслуживает доставку регулируемых товаров с возрастной верификацией. Это не обычный e-commerce: каждый заказ может включать наличный расчёт, отдельный сценарий сдачи водителем, привязку к смене, проверку зон доставки, ограничения по ZIP-кодам в час пик. Поэтому за одним «админка» скрывается несколько разных рабочих мест.

Доступ распределён через RoleGuard:

• Platform Admin — единственная роль с доступом к Audit Trail. Видит абсолютно всё.
• Store Admin — управляет магазином: каталог, инвентарь, промо, отчёты, кошельки, настройки.
• Manager — каталог, инвентарь, флот водителей и автомобилей, модерация отзывов.
• Dispatcher — мобильный layout с диспетчерской консолью, картой, инвойсами.
• Driver — мобильный layout с дашбордом водителя, моими заказами, заработком.

Один и тот же URL может выглядеть совершенно по-разному в зависимости от роли. Маршруты, которые недоступны, не отображаются в навигации, а попытка открыть напрямую перебрасывает на разрешённую стартовую страницу.

Дашборд владельца

Dashboard (/)

Это командный центр для собственника. На первом экране — два уровня KPI: lifetime (Collection, Sales, Orders, Users — за всё время) и daily (то же самое за сегодня). Lifetime даёт ощущение масштаба бизнеса, daily — пульс прямо сейчас.

Центральный элемент — Revenue Chart на Recharts BarChart с date range picker, переключателем между Revenue и Orders и кнопкой refresh. Под ним summary-панель сравнивает Lifetime и Today с иконками TrendingUp/Down и процентом изменения, чтобы владелец сразу видел, день оказался выше или ниже среднего.

Отдельно — таблица «Users Sale»: список клиентов с количеством заказов, оборотом, оценкой прибыли/убытка по каждому и колонкой Customer Since. Это уже не просто KPI, а быстрый способ понять, какие клиенты ядро, а какие — единичные.

Operations: заказы, клиенты, флот

Orders (/orders)

Страница со всеми заказами. Сверху — OrderFilters с поиском, выбором диапазона дат, фильтром по статусу и по водителю, плюс кнопка download для выгрузки. Дальше — счётчики Total Orders и Average Delivery Time, и пагинированная OrdersTable. Каждая строка кликабельна и открывает OrderDetailModal.

Внутри модалки оператор делает три вещи: меняет статус заказа по разрешённым транзишенам с обязательной заметкой, назначает водителя из dropdown с доступными исполнителями и обновляет данные. Это ключевой экран для того, кто сидит на телефоне с клиентом.

Customers (/customers) и Customer Detail (/customers/:id)

Список клиентов с поиском и переходом на персональную карточку. Карточка собирает контакты, историю заказов, привязку к плану, баланс кошелька — всё, что нужно operations-менеджеру для разговора с конкретным человеком.

Drivers (/drivers) и Vehicles (/vehicles)

Управление флотом, доступно с роли Manager и выше. Drivers — список курьеров с их статусами и метриками. Vehicles — справочник автомобилей: марка, модель, номер, привязка к водителям, документы.

Reviews (/reviews)

Модерация отзывов на товары и заказы. Manager и выше может одобрить, скрыть или удалить отзыв до того, как он попадёт в публичный каталог.

Каталог

Catalog → Products (/catalog/products)

Основной экран товаровед. ProductFilters даёт поиск, фильтр по категории и по бренду. ProductsTable отображает товары с действиями edit, delete и toggle visibility — последнее особенно важно для регулируемых SKU, которые надо быстро снять без удаления. ProductFormModal — форма создания и редактирования с загрузкой изображений, привязкой к категории, бренду, ценой, себестоимостью и инвентарём.

Catalog → Categories (/catalog/categories)

Иерархия категорий. CRUD: создание, редактирование, удаление, перестановка — для бизнеса это рубрикатор каталога, для SEO — структура URL.

Catalog → Brands (/catalog/brands)

Реестр брендов с CRUD. Используется и в фильтрации, и в карточках товара, и в логотипах баннеров. Отдельная сущность, потому что один бренд может покрывать десятки товаров.

Inventory

Inventory (/inventory)

Самостоятельный модуль с тремя табами и набором компонентов: InventoryStats, InventoryFilters, InventoryTable, StockAdjustmentModal, LowStockAlerts, InventoryLogs.

Первый таб — Inventory List. Фильтрация, корректировка остатков через StockAdjustmentModal (с указанием причины), и кнопка print, которая открывает inventory/print в новом окне для физической сверки со склада.

Второй таб — Stock Alerts. Здесь собраны low-stock и out-of-stock позиции с badge-счётчиком прямо на иконке таба, чтобы оператор видел количество проблем не открывая раздел.

Третий таб — Activity Logs. Полная пагинированная история всех корректировок: кто, что, когда, с какой причиной. Это один из инструментов внутреннего контроля и расследований расхождений.

Promotions

В платформе целый отдельный домен — промо-механики. Их пять:

Promotions (/promotions)

Базовые промо-коды. Поиск по коду, фильтр по статусу, добавление и редактирование через PromoFormModal. CRUD-операции: добавить, обновить, удалить, переключить статус. Это корень всех скидок.

Promo Code Batches (/promotions/promocodes)

Bulk-генерация уникальных кодов под акции и партнёрства. Внутри две вью.

Batches View — таблица групп: название, тип скидки (% или $), прогресс использования, период действия, дата создания.

Generate Modal — мощный инструмент: задаёшь количество (1–1000), префикс, длину кода (4–12 символов), тип и значение скидки, минимальную корзину, максимальный размер скидки, период действия. Отдельные чекбоксы — «First Order Only» (код срабатывает только на первый заказ клиента) и «Cashback to Wallet» с указанием процента, чтобы скидка возвращалась на кошелёк, а не списывалась со счёта в момент заказа. В правой части модалки — code preview, чтобы видеть, как будет выглядеть конкретный код.

Codes View — внутри батча: поиск, фильтр по статусу (Unused / Used), копирование одного кода, Copy All и экспорт в CSV. Маркетолог сгенерил тысячу кодов под кампанию, выгрузил CSV, отдал партнёру — всё.

Campaigns (/promotions/campaigns)

QR-кампании. Сверху четыре StatCard: Active Campaigns, Total Scans, Total Orders, Avg Conversion %. Под ними таблица: name, code, кнопка для QR, привязанный promo code, число сканов, число заказов, конверсия в процентах, выручка и статус (Active / Paused / Ended).

Create/Edit Modal позволяет ввести код вручную или сгенерировать, указать целевой URL, выбрать привязанный промо-код из dropdown, включить auto-apply (промо применяется автоматически при переходе по QR), задать период действия.

QR Modal рендерит QR-код через QRCodeCanvas, его можно скачать как PNG. URL отслеживания — {API}/api/v1/c/{campaignCode} — фиксирует каждый скан и связку со следующим заказом, чтобы конверсия считалась честно.

Banners (/promotions/banners)

Управление баннерами на витрине. Таблица: thumbnail, title, тип (Normal / Category / Promo), целевое устройство (Desktop / Mobile / All), порядок сортировки, переключатель active.

Modal даёт два пути загрузки картинки: drag-and-drop файл (JPEG, PNG, WebP, AVIF, GIF, до 10 МБ) или URL внешнего изображения. Дополнительно — title, target URL, banner type, target device, селектор категории (если выбран type=category), sort order и статус. Хороший пример того, как операционный экран закрывает контент-задачу без отдельной CMS.

Day-wise Discounts (/promotions/daywise)

Скидки по дням недели — по одной на день. Таблица: день, название, размер скидки (% или $), минимальная корзина, информация о бесплатном подарке, размер кэшбэка, статус, кнопки edit и delete.

Modal разбит на тематические секции: Basic Info (день, name, описание), Discount (тип, значение, минимальная корзина), Free Product (чекбокс плюс название и cart limit, при котором подарок выдаётся), Wallet Cashback (сумма и cart limit), Military Discount (чекбокс плюс процент для отдельной категории клиентов) и Status. Один экран — целая стратегия еженедельной активации.

Mix & Match (/promotions/mix-match)

Самый сложный промо-инструмент: ступенчатые скидки за количество. Таблица: name + label, тип правила, default discount, минимальное количество, число тиров, статус.

Modal делится на блоки: Basic Info (name, label, тип правила — category_mix или product_bundle, описание), Discount Settings (тип, default value, минимальная корзина по сумме и по количеству), Tiers (добавление и удаление ступеней — каждая со своим threshold по количеству, значением и типом скидки), Scope (ID базовой категории, список применимых категорий и список применимых товаров через UUID). Так бизнес собирает механики вроде «купи 3 — получи 10%, купи 5 — 20%».

Reports: финансы и операционная отчётность

Самый большой раздел в админке. Здесь живёт всё, что владельцу или бухгалтеру нужно ежедневно, еженедельно и в конце месяца.

Sales Report (/reports/sales)

Recharts BarChart «Sales Over Time» показывает выручку по дням, неделям или месяцам. Над графиком — пресеты периодов: Today, Yesterday, This Week, Last Week, This Month, Last Month, This Year, Custom. Group By задаёт детализацию.

KPI Cards идут с период-к-периоду сравнением, со стрелками вверх и вниз: Total Revenue, Total Orders, Average Order Value, Pending Orders. Под ними Secondary Stats: Discounts, Tax Collected, Delivery Fees, Tips, Cancelled count, Cancelled Value.

Таблицы дополняют картину: Payment Methods (Cash, Zelle, CashApp, Venmo, Split — заказы и сумма по каждому), COD Collection Methods, Top Selling Products (rank, name, qty, revenue), Previous Period Comparison.

Reconciliation Report (/reports/reconciliation)

Финансовая сверка. Это уже не маркетинг, а бухгалтерия. KPI Cards вверху: Gross Revenue, Net Revenue, Total Orders, Cost of Goods, Estimated Profit.

Financial Breakdown раскладывает выручку: Gross, Discounts Applied, Wallet Used, Rewards Used, Net, Tax, Delivery Fees. Таблица Payment Methods показывает структуру оплат.

Cash Flow — отдельный блок про наличные: COD Sales Total, Cash in Envelope, Digital Payments (already on account), Change to Customer Wallets, Cash in Envelope (Net), Owner's Cash Total. Это критично, потому что часть денег физически приходит в конверте от водителя, а часть уходит в кошелёк клиента как сдача.

P&L Summary — тёмно-зелёный баннер: Revenue, Tax, Delivery Fees, COGS, Estimated Profit. Под ним collapsible-секция Order Details, где по каждому заказу: order #, date, customer, items, subtotal, discount, wallet used, cashback, total, payment method, cash received, change to wallet. Когда нужно понять, почему день закрылся именно так — это ключевой экран.

EOD Report (/reports/eod)

End of Day — отчёт за один конкретный день, с CSV и PDF download. Metric Cards: Total Orders, ASAP Orders, Revenue, Collections, Avg Delivery Time, New Customers, Completed, Pending.

Cash Summary разбивает день по способам оплаты: COD Sales, Cash Envelope, Digital Payments, Change to Wallets, Owner's Cash, Card Sales, Crypto. Отдельная таблица Products Sold с превью изображения, количеством, категорией и брендом. Financial Summary закрывает блок налогами, доставкой, чаевыми и скидками. Этот отчёт каждый вечер уходит владельцу как PDF.

Driver Report (/reports/driver)

Производительность водителей. Filters: диапазон дат, конкретный водитель, регион. Таблица: Driver Name, First Delivery, Last Delivery, # Deliveries, Avg Delivery Time, Sales, Cash Collected. Внизу строка с тоталами. На основании этого экрана платится зарплата и принимаются решения о расширении флота.

Cash Drop Report (/reports/cash-drop)

Сверка наличных между водителем и магазином в конце смены. Сверху форма «Record Cash Drop»: селектор водителя, начало и конец периода, кнопка Calculate.

После расчёта появляются ожидаемые суммы: Envelope Orders, Expected Cash, To Wallets, Owner's Cash и отдельный callout про digital payments, чтобы их нельзя было перепутать. Дальше — поле Actual Amount с live-расчётом разницы (Difference), поле Notes и кнопка Record.

Summary Cards: Total Expected, Total Dropped, Difference, Total Drops. История внизу — таблица всех drop'ов: дата, водитель, ожидалось, фактически, разница (color-coded), число заказов, статус (verified / disputed / pending). Один из самых важных финансовых контролов в системе: ровно здесь ловится недостача.

Affiliate Report (/reports/affiliate)

Партнёрская программа. Filters: период, поиск по имени / email / коду. Summary Cards: Total Affiliates, Total Referrals, Total Revenue, Total Commission с указанной ставкой комиссии. Таблица с разбивкой по affiliate и кнопкой Export CSV.

COG Report (/individual/cog)

Cost of Goods, доступен с роли Store Admin и выше. KPI: Revenue, Cost of Goods, Gross Profit, Gross Margin %, Inventory at Cost. Если на каких-то товарах нет себестоимости, сверху висит warning banner. Product Breakdown показывает по каждому SKU: name, qty sold, revenue, cost, profit (зелёный для плюса, красный для минуса), margin % с такой же цветовой кодировкой. Это один из самых полезных аналитических экранов для продакта: он сразу показывает, какие товары делают деньги, а какие просто перекладывают остатки.

Invoices (/reports/invoices)

Инвойсы по заказам. Filters: диапазон дат, чекбоксы New Registration, Min Qty, Next Day Only, кнопка CSV download. Таблица: дата, time slot, телефон, пользователь, email, магазин, водитель, статус, дата создания, grand total, кнопка view.

Invoice Detail Modal — самостоятельный артефакт. Превью shipping label в формате 80×80 мм, кнопка Print Label и PDF download через jsPDF + autoTable. PDF включает: данные магазина, детали заказа, информацию о клиенте, водителе, табличный список позиций и разбивку всех итогов. По сути — это полноценный документ для печати и отчётности.

Daily Orders (/reports/daily-orders)

Заказы по сменам. Smith здесь нюанс: смена начинается в 06:00 по Miami time, и отчёт уважает этот сдвиг, чтобы данные не разрывались по календарной полуночи.

Wallet History (/reports/wallet-history)

История операций по кошелькам клиентов в разрезе отчёта (а не отдельных пользователей).

Settings

Settings → Store (/settings)

Четыре таба:

• Store — общая конфигурация магазина: название, контакты, реквизиты, настройки.
• Time Slots — добавление, редактирование, удаление слотов доставки и переключатель активности каждого.
• Delivery Zones — CRUD по зонам, в которых работает доставка (с правилами по сумме и времени).
• Traffic Windows — ZIP-restrictions для пиковых часов: в час пик можно отключить часть зон, и storefront увидит это.

Roles (/settings/roles)

Управление RBAC-ролями. Таблица: name, description, краткое описание прав, тип (System / Custom), статус, кнопки edit и delete (системные удалить нельзя). Назначение прав — на уровне модулей. Это даёт владельцу гибкость не нанимать разработчика, чтобы добавить новую роль для бухгалтера или кладовщика.

Employees (/settings/employees)

Список сотрудников: имя с аватаром, email, телефон, роль, статус (Active / Inactive плюс отдельный индикатор Online), последний логин, edit, delete. Modal позволяет назначить роль и поменять данные.

Customer Plans (/settings/plans)

Конфигурация premium-уровней клиентов. Каждый план — отдельная карточка с цветным заголовком: Name, color picker, Cashback %, минимальная сумма заказа.

Внутри карточки чекбоксы способов оплаты (COD, Crypto, Wallet) и способов сбора кэша (Cash, Zelle, CashApp, Venmo). Дальше — часы поддержки, часы доставки, окно доставки start/end. Picker бонусных товаров с поиском по slug, описание бонуса, описание для витрины.

Отдельные toggles: показывать план только после первого заказа, разрешить заказы 24/7 в обход часов магазина, разрешить заказы в обход ZIP-restrictions. Это инструмент удержания: клиенту с премиум-планом можно открыть запрещённые для остальных окна.

Кошельки

Wallet List (/wallet)

Поиск по email, таблица: email, баланс, дата создания, кнопка view. Сверху — кнопка Money Transfer, открывающая MoneyTransferModal для перевода между кошельками. И кнопка Download — CSV-экспорт всех балансов.

Wallet Details (/wallet/details/:userId)

Карточка пользователя с балансом и кнопкой Add Balance. Под ней — таблица всех транзакций: email, сумма (color-coded, плюс зелёным, минус красным), кому передано, ID заказа, причина, комментарий, дата.

Wallet Logs (/wallet/logs)

Глобальный журнал по всем кошелькам. Поиск по email, телефону, причине. Таблица: кто перевёл, кому, сумма, причина (Credit / Debit / Refund / Bonus / Order Payment / Cashback), дата создания, view (переход на детальную страницу пользователя). Это один из основных инструментов anti-fraud: подозрительные начисления видно сразу.

Аналитика

Conversion Analytics (/analytics/conversion)

Воронка: Sessions → Product Views → Cart Adds → Checkout → Orders, с процентом перехода на каждом шаге. Под воронкой — Recharts LineChart с тремя сериями: Sessions (тёмно-зелёный), Orders (красный), Cart Adds (жёлтый, dashed). Это первая страница, на которую заходит маркетолог утром.

Activity Log (/activity-log)

Клиентский трекинг с четырьмя табами.

All Events — фильтр по типу события (page_view, product_view, cart_add, cart_remove, checkout_start, checkout_success, api_error, js_error и так далее), по user ID, по session ID. Таблица: время, бэйдж события (color-coded), пользователь, URL, session (clickable, ведёт на User Journey), IP. Каждая строка expandable: показывает raw JSON payload события.

Errors — сгруппированные ошибки: message, type, source, число повторов, first/last seen. Это первая точка диагностики, когда что-то пошло не так на сайте.

Search Analytics — Top Searches и Searches with No Results. Видно, что пользователи ищут и где сайт их подвёл.

User Journey — ввод session ID запускает загрузку всего пути сессии: пронумерованные шаги, бэйджи, временные метки, URL, payload. Кнопка Watch Replay открывает rrweb-player через dynamic import и проигрывает реальную запись клика-в-клик.

Audit Trail (/audit-trail)

Только Platform Admin. Это другой уровень контроля — не клиент, а внутренние пользователи.

Summary Cards: Product Changes Today, Product Changes (7d), Wallet Ops Today, Top Modifier (7d) — кто из админов чаще всего что-то правил за неделю.

Product Changes показан в виде сгруппированных карточек: изменения, сделанные одним пользователем в течение двух секунд, схлопываются в один блок. Каждая карточка показывает action badge (Created / Updated / Deleted / Variant Added / Updated / Deleted), timestamp, performed by и название продукта. Smart change display ставит приоритетные поля впереди: name, price, sale price, cost, inventory, active, featured, category, brand. Остальные правки прячутся под expandable «+N more». Контекст форматирования — цены показываются как $, booleans как Yes/No, ID категорий и брендов резолвятся в человекочитаемые имена, длинные тексты обрезаются. Изменения вариантов — отдельные indented sub-items.

Wallet Operations — таблица: время, имя админа, имя клиента, type badge (credit / bonus / refund / debit), сумма, баланс до и после, причина. Это финальный инструмент против внутреннего фрода: владелец видит каждую копейку, начисленную админом.

Issues Monitor (/analytics/issues)

Карточки инцидентов: Checkout Failures (с топом причин) и JS Errors (с топом сообщений). Пресеты периода: Today, Yesterday, 7d, 30d. Это короткая утренняя сводка для product manager: где сегодня больно.

Registration Funnel (/registration-funnel)

OTP-based воронка регистрации. Этапы: sent (код отправлен), registered (создан пользователь), verified (код подтверждён), abandoned. К ним — конверсии между этапами и тайминг (сколько проходит между шагами). Видно, на каком из этапов теряются клиенты.

Login Funnel (/login-funnel)

То же самое, но для логина: сколько пользователей долетают до успешного входа и где обрываются.

Checkout Funnel (/checkout-funnel)

Воронка чекаута: от начала до успешного заказа, с подсветкой просадок и причин.

Контент витрины

Homepage Manager (/homepage)

Доступно с роли Store Admin. Управление featured-товарами: до 8 слотов на главной. Поиск товара, выбор по категории, расстановка по слотам. Без отдельной CMS, без программистов — это ежедневная работа маркетолога.

Help (/help)

Справочный раздел для любых ролей: как пользоваться разделами, типовые сценарии, ответы на частые вопросы.

Driver Layout

Когда логинится водитель, он видит совершенно другой интерфейс — мобильный, под одну руку, с крупными элементами.

Driver Dashboard (/driver-dashboard)

Welcome header с именем и сегодняшней датой. Главный элемент — Online/Offline toggle: большая зелёная пульсирующая кнопка, при нажатии запрашивает геолокацию и переводит водителя на смену. Под ней — alert banner с pending-заказами, виджеты shift status, active orders, earnings. Вниз — ссылки на My Orders.

My Orders (/my-orders) и My Orders Detail (/my-orders/:id)

Список назначенных заказов. По тапу на заказ — детальная страница с маршрутом, контактом клиента, составом, способом оплаты и кнопками статусных переходов: Pickup, On the way, Delivered.

Dispatcher Layout

Диспетчер тоже видит мобильный интерфейс, но под другую задачу.

Dispatcher Console (/dispatcher)

Главный экран диспетчера. DispatcherStats показывает overview-метрики смены. PendingOrdersList — заказы, ожидающие назначения, со статус-фильтром. DriversList — все доступные водители с индикатором online и числом активных заказов в работе. AssignOrderModal — назначить заказ конкретному водителю. Отдельный блок DispatcherCustomers даёт быстрый доступ к информации о клиенте. Auto-refresh поднимается через React Query invalidation: данные обновляются сами, без F5.

Dispatch Map (/dispatcher/map)

Geographic dispatch view. Карта показывает водителей и заказы географически, чтобы диспетчер видел, кого назначить на заказ исходя из позиции, а не только из имени в списке.

Dispatcher Invoices (/dispatcher/invoices)

Тот же модуль инвойсов, что и в основной админке, но запущен в dispatcher-layout — мобильный, удобный для работы с телефона.

Telegram mini-apps

Помимо основной web-админки и витрины, в платформе есть три отдельных Telegram mini-app: магазин для клиентов, диспетчерская и водительская. Это самостоятельные SPA-приложения на Vite + React, которые запускаются внутри Telegram через WebApp API: пользователь не устанавливает ничего и не регистрируется отдельно — мини-приложение открывается прямо из чата с ботом и сразу узнаёт человека по Telegram.WebApp.initData. Подпись initData проверяется на сервере по HMAC, и при первом заходе в систему создаётся минимальный профиль (телефон в формате tg_{telegram_id}, имя из Telegram). Дальше у клиента, диспетчера и водителя — три абсолютно разных опыта на одной кодовой базе бекенда.

Sales mini-app — магазин в Telegram

Анонимный каталог, открытый по короткому домену через бота. Перед входом — gate возрастной верификации (21+), чтобы соответствовать требованиям платформы и регуляторов. После gate показывается полный каталог: горизонтальный список категорий, секция Featured с карусельными карточками товаров, грид с ценами и потенцией, иконка корзины в шапке.

Корзина живёт в localStorage — никакой серверной синхронизации, чтобы можно было собирать заказ без авторизации. Только в момент оформления через Telegram появляется привязка к профилю клиента: тот же чекаут, что и на витрине, со всеми сценариями (Express, Scheduled, Cash, Wallet), но в плотном мобильном layout, заточенном под одну руку.

Отдельный поток в этом мини-приложении — Affiliate Program: клиент может стать партнёром, получить персональный promo-код и share-ссылку, которой делится с друзьями прямо в Telegram. Оттуда уведомления про новый заказ, его подтверждение, статусы доставки приходят клиенту в чат с ботом — без push-уведомлений и без email.

Dispatcher mini-app — диспетчерская в кармане

Запускается из чата с диспетчерским ботом. Авторизация — через Telegram, привязка к роли dispatcher производится автоматически по telegram_id, который заранее сопоставлен в админке. После входа открывается dispatch-консоль: KPI-полоска сверху (Pending, Ready, Assigned, Delivery, Drivers, Done), четыре таба — Orders, Drivers, Customers, Map.

В табе Orders диспетчер видит активные заказы списком: номер, сумма, тип доставки (EXPRESS / scheduled time slot), дата, имя клиента, адрес и расстояние от склада. По тапу — детальная карточка заказа с возможностью назначить водителя из списка свободных. По умолчанию список фильтруется по Area — диспетчер может ограничить себя своей зоной ответственности.

В табе Drivers — список всех водителей с индикатором онлайн/оффлайн, активным транспортом, числом доставок. Свободные подсвечены зелёным, занятые — серым. Можно нажать на водителя и увидеть его последние доставки.

Таб Customers — быстрый доступ к клиентам: поиск по имени или телефону, кнопка Add Customer для ручного создания профиля при заказе по звонку, у каждой записи — сумма заказов всё-время и контакт.

И, наконец, Map — географическая визуализация: карта зоны доставки (район Майами и его пригородов) с маркерами водителей и точек заказов. Центрация и зум — поверх Leaflet, тайлы — через OpenStreetMap. Это, возможно, самый частый таб у активного диспетчера: он видит, кто из водителей ближе к новому заказу, и за пару тапов назначает.

Все данные обновляются по WebSocket-каналу: новый заказ — приходит в реальном времени, изменение статуса водителя или заказа — тоже. Пуш-уведомления через Pushover дублируют критические события (новый заказ → priority=2, на максимальной громкости), чтобы диспетчер услышал их даже когда телефон в кармане.

Driver mini-app — водитель в Telegram

Запускается из чата с водительским ботом. Telegram-аккаунт водителя привязан к profile в системе через preassigned mapping — водитель не вводит никаких паролей. После входа открывается dashboard.

На главном экране — карточка водителя с именем и текущим статусом смены (Offline / Online), кнопка выбора автомобиля из списка закреплённых, главная зелёная кнопка Go Online. По нажатию запрашивается геолокация, и водитель попадает в active-режим: его координаты начинают передаваться на сервер раз в N секунд, и его аватар становится видимым на карте у диспетчера.

Таб Orders — список заказов, назначенных конкретному водителю. У каждого — статус (Assigned, Picked Up, On the way, Delivered), кнопки переходов и встроенные навигационные ссылки: «открыть в Google Maps» или «позвонить клиенту». При завершении заказа — модалка с подтверждением суммы наличных (если COD) и фотографией для proof-of-delivery.

Таб Earnings — заработок водителя: сегодня, неделя, месяц. Показываются базовая ставка, чаевые отдельно и общее количество доставок. Это закрывает классическую боль гиг-эконом-водителей: «сколько я заработал к этому моменту и стоит ли работать ещё час».

Под капотом все три мини-приложения шарят с web-витриной общий API (NestJS), общие entity клиента и заказа, общую очередь уведомлений (Redis pub/sub), общий формат WebSocket-событий. Различается только UI и набор endpoints, доступных каждой роли. Это позволяет заказу, созданному в Sales mini-app, появиться на dispatcher-карте через секунды, а после назначения — в Driver mini-app у водителя за следующие секунды. Всё внутри одной экосистемы Telegram, без переходов между приложениями.

Login

Login (/login)

Точка входа в админку. Защищён GuestGuard: уже авторизованный пользователь редиректится на свою стартовую страницу, в зависимости от роли.

Дизайн-паттерны и единый язык интерфейса

Чтобы 50 страниц с разной функциональностью не превратились в зоопарк, в админке выдержан общий язык:

• Цвет. Тёмно-зелёный #0e3814 — основной для headers, кнопок, sidebar. Тёмные панели на этом цвете с белым текстом используются в summary-блоках и chart-секциях, чтобы визуально отделить «итоги» от рабочих таблиц.
• StatCard. Универсальный компонент для KPI. Используется в Dashboard, Sales Report, EOD, Campaigns, Activity Log и других — везде с одним и тем же layout: иконка, цифра, подпись, опционально стрелка с процентом изменения.
• DataTable. Reusable-компонент с поддержкой dark-варианта. Все списки — заказы, продукты, баннеры, кошельки, отзывы — построены через него, поэтому пагинация, hover-эффект, выравнивание колонок везде ведут себя одинаково.
• Status badges. Семантическая цветовая схема: зелёный для active и delivered, жёлтый для pending, красный для cancelled, синий для confirmed. Это сразу читается, без необходимости лезть в легенду.
• Modal pattern. Везде один и тот же фиксированный overlay с закрытием по клику на backdrop. Никаких неожиданных «другая модалка работает иначе».
• Toggle switches для статусов (visible / hidden, active / inactive) — компактнее, чем кнопки, и сразу даёт обратную связь.
• Pagination через Previous / Next, без фрагментации на мелкие подходы.
• Loading state — Loader2 из lucide-react с одинаковой анимацией.
• Иконки — исключительно lucide-react, без миксов с другими наборами. Это важно и для визуальной целостности, и для bundle size.

В сумме это даёт ощущение, что 50 страниц — это один продукт, а не пять разных, склеенных скотчем.

Что это значит для бизнеса

Большая часть внешних e-commerce admin-панелей покрывает первые два-три уровня: каталог, заказы, пользователи. Здесь сделана попытка уйти заметно глубже: финансовая сверка дня, контроль наличных от водителя в конверте, audit trail по правкам каталога и кошельков, аналитика воронок отдельно по регистрации, логину и чекауту, запись пользовательских сессий с replay внутри admin, мульти-роль с мобильными layout под водителя и диспетчера.

С точки зрения операций это значит, что владелец и команда могут вести бизнес самостоятельно, без обращения к разработчику для типовых задач. С точки зрения продукта — что в системе есть встроенные инструменты для самодиагностики: где теряются деньги, где падает конверсия, кто из админов что-то меняет по ночам, какие SKU не приносят маржу.

Связанные разделы

• Pharmacy Delivery Platform — бизнес-обзор
• Pharmacy Delivery Platform — техническая архитектура
• Pharmacy Delivery Platform — витрина и mini apps