Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Веб-приложение · Recharts · RBAC · аудит

SaaS-дашборд

Руководителю выручки нужно за минуту понять, откуда вырос MRR, кто из клиентов вот-вот уйдёт и что поменялось в доступах. Здесь 40 клиентов и 53 недели истории: KPI с дельтами к прошлому периоду, разложение MRR на новые, апгрейды, даунгрейды и отток, сводка с рисками и таблица со здоровьем каждого клиента. Роли «Админ», «Аналитик» и «Наблюдатель» режут меню, кнопки и действия — без настоящего логина, чтобы демо можно было потрогать сразу.

Сценарий: SaaS «Обзор» — вымышленный сервис аналитики по подписке; панель — внутренний кабинет его команды выручки.

Скриншот демо: SaaS-дашборд

Открыть демо

Открыть приложение

Изменения хранятся в браузере; «Сбросить демо» в меню возвращает исходную историю.

Приложение работает в браузере: на сервер ничего не отправляется.

Что показывает демо

  • KPI с дельтами и спарклайнами: MRR, платящие клиенты, отток MRR, ARPA — за 8 недель, квартал или полгода

  • MRR по тарифам, движение выручки по неделям и доля тарифов

  • Сводка за период с рисками и список клиентов, которым нужно внимание

  • Таблица: поиск, фильтры, сортировка, пагинация, карточка клиента со здоровьем 0–100 и его причинами

  • Смена тарифа в карточке пересчитывает графики и попадает в журнал действий

  • Выгрузка CSV: выборка, колонки, предпросмотр; «;» и BOM — русский Excel открывает без мастера

  • RBAC на шесть прав, журнал действий, оповещения о падении MRR и команда с ролями

Как попробовать

  1. Посмотрите обзор

    Переключите период на «Полгода» — KPI, графики и сводка пересчитаются.

  2. Откройте клиента в зоне риска

    В блоке «Требуют внимания» — карточка покажет, за что снижено здоровье.

  3. Смените тариф

    Переведите клиента на Business — MRR на обзоре вырастет, запись появится в «Журнале».

  4. Станьте наблюдателем

    «Выгрузка», «Журнал» и «Настройки» закроются, а смена тарифа станет недоступна.

Без платных нейросетей

Клиенты и история синтетические, роли переключаются в UI без серверной сессии, журнал и настройки живут в localStorage. Сводку в рабочем проекте пишет LLM по тем же цифрам — здесь правила на JS, без платных запросов. В рабочем проекте роли идут из JWT/SSO, права проверяет API, а данные приходят из биллинга и CRM.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Права и журнал действий на сервере, 403 вместо скрытых кнопок
  • Данные из биллинга и CRM, пересчёт метрик по расписанию
  • Оповещения в почту и Telegram, еженедельная сводка
  • Сохранённые представления таблицы на пользователя

Стек

  • React 19
  • TypeScript
  • Recharts
  • Vite
  • Tailwind CSS

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Видно, из чего сложился рост MRR: новые клиенты, апгрейды и потери — отдельно.
  • Клиенты в зоне риска всплывают сами, с причиной: пустые места, тикеты, просрочка.
  • Журнал отвечает на «кто поменял тариф» без расследования в чатах.

Для разработчиков

  • Один генератор истории за год — все графики, таблица и сводка считаются из него.
  • RBAC — права-возможности, проверяются и в UI, и в редьюсере; покрыто тестами.
  • CSV с «;», BOM и CRLF — открывается в русском Excel двойным щелчком.

Советы

  • Совет 01

    Роли проверяйте и в меню, и на действиях: спрятанная кнопка — не авторизация.

  • Совет 02

    Показывайте не только MRR, но и его движение — по одной цифре не видно, что клиенты уходят.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Веб-приложение · OCR · проверка реквизитов

    работает

    Распознавание документов

    Загрузите счёт или акт — фото, скан или PDF. Приложение распознаёт текст, вытаскивает реквизиты и строки таблицы и проверяет их: контрольные суммы ИНН и счетов, итог и НДС.

    • React
    • TypeScript
    • Нейросеть в браузере

  • Веб-приложение · диалоги · сделки · аналитика

    работает

    Панель оператора

    Рабочее место оператора, которому бот передаёт сложные обращения: очередь с таймером, резюме диалога, черновик ответа, сделки на канбане и аналитика — на живом потоке клиентов.

    • React
    • TypeScript

  • Веб-приложение · Laravel · PostgreSQL

    работает

    Складской контур на Laravel

    Учёт склада, где остаток — сумма проводок, а не «поле qty--»: заказы с резервом «всё или ничего», сборка по ячейкам, приёмка с импортом CSV, инвентаризация и журнал. Гонка двух настоящих процессов PHP в PostgreSQL показывает, зачем нужна блокировка строки.

    • PHP

  • Веб-приложение · метрики · оповещения

    работает

    Мониторинг бота

    Как следят за ботом, когда он уже работает с клиентами: сколько запросов, как быстро он отвечает, как часто ошибается или не знает ответа. Журнал запросов с трассой каждого ответа и правила, которые пишут дежурному в Telegram, если что-то пошло не так.

    • React
    • TypeScript

  • Парсер на Python · работает в браузере

    работает

    Мониторинг цен конкурентов

    Парсер на Python каждый день обходит сайты трёх конкурентов магазина электроники: HTML-каталог с пагинацией, sitemap с JSON-LD и SPA с API. Сопоставляет товары с каталогом, присылает уведомления об изменениях, рекомендует цену по правилам и выгружает отчёт в Excel. Python работает прямо в браузере.

    • Python
    • React
    • TypeScript

  • Веб-приложение · PWA · нативный JS

    работает

    Офлайн-приложение курьера

    Рабочий день курьера: заказы, звонок клиенту, вручение с фото и подписью. Приложение открывается и работает без сети, а изменения уходят в диспетчерскую, когда связь вернётся. Если диспетчер за это время изменил тот же заказ — курьер выбирает, чья версия верная.

    • Нативный JS