Dark Fusion Dashboard
Открыть: jakewhite-ui.github.io/kanal — работает сразу, ничего ставить не нужно.
Дашборд для тех, кто продаёт услуги и ведёт контент: воронка сделок с перетаскиванием, клиенты с логом активности, отчёты, публикации, подписчики, журнал работы. Тёмная тема по умолчанию и светлая по кнопке, русский и английский интерфейс, графики, всё настраивается.
Сделано Dark Fusion. Фирменный оранжевый — #FF752A, снят с логотипа.
Ничего не захардкожено. Название, валюта, цель, площадки и рубрики задаются в настройках. Не задал цель — блок прогресса просто не показывается. Это сделано намеренно, чтобы дашборд можно было отдать другому человеку без единой правки в коде.
Два режима
Дашборд сам определяет, есть ли рядом сервер, и подстраивается.
С сервером — на своей машине. Источник правды data.json на диске, его можно держать в приватном репозитории и синкать между компьютерами через git.
cd ~/kanal && node server.js
→ http://localhost:4320
Без сервера — на GitHub Pages или просто открытым файлом. Запроса к /api/data нет, поэтому данные живут в localStorage браузера и никуда не уходят. Это сделано специально: выложить можно код, а суммы и клиенты остаются на устройстве.
Перенос между устройствами — Настройки → Данные → Экспорт / Импорт, один JSON-файл. Импорт отбивает чужой или битый файл и не затирает то, что уже внесено.
⚠️ В режиме без сервера данные привязаны к конкретному браузеру. Чистка истории сайта их стирает — делай экспорт.
Зависимостей нет, нужен только Node. Графики тянут Chart.js с CDN, то есть для них нужен интернет; остальное работает офлайн.
Разделы
| |
|---|
| Обзор | Приветствие с датой, прогресс к цели, четыре показателя: получено, открытый пайплайн, открытых сделок, конверсия лид→оплата. Графики выручки по неделям и здоровья сделок. Ниже — сделки без движения больше 7 дней и сумма под угрозой |
| Воронка | Канбан по шести этапам. Карточку можно перетащить в другую колонку — статус, суммы колонок и показатели обзора пересчитываются сразу |
| Сделки | Клиент, услуга, стоимость, сколько уже получено, статус, дата, ссылка |
| Клиенты | Поиск, карточка клиента с суммами и сделками, лог активности с датами — записи добавляются прямо в карточке |
| Отчёты | Выручка всего, сделок оплачено, средний цикл, win rate, движений в неделю, средний чек, дней до срока, конверсия по этапам, поступления по месяцам, клиенты по выручке, лента движений сделок |
| Контент | Публикации карточками с площадкой, рубрикой, просмотрами и откликами. Снимки подписчиков, рост подписчиков и просмотры по рубрикам |
| Журнал | День, минуты в работе, что сделано, провал дня |
| Настройки | Имя, название, валюта, цель, срок, площадки, рубрики, профиль |
Оформление
Тёмная тема по умолчанию: чёрный фон #0A0A0C, под контентом фиксированный слой размытых оранжевых пятен, поверх — полупрозрачные карточки с backdrop-filter. Акцент — градиент #FF752A → #FFB13D: им залиты кольца прогресса, полосы и главная цифра.
Карточки намеренно заданы в rgba, а не в hex: цвет им даёт слой пятен, просвечивающий сквозь размытие. Уберёшь .orbs — стекло станет грязно-серым.
В светлой теме стекла нет (--glass: none), а пятна приглушены до 12 %: по белому фону размытие даёт грязь, а не глубину.
Этапы сделки
Лид → КП отправлено → Счёт выставлен → Предоплата 50 % → В работе → Оплачено
Перетаскивание меняет не только колонку:
- в Оплачено — «получено» выставляется во всю сумму, иначе касса разошлась бы с воронкой;
- в Предоплату — половина суммы, но только если не записано ничего: реальную частичную оплату перетаскивание не затирает;
- в любой этап — пишется дата входа, из неё считаются «дней в этапе» и средний цикл в отчётах.
Частичная оплата
У сделки два числа: вся сумма и получено. Если работаешь по предоплате, не нужно заводить вторую строку на остаток — один клиент остаётся одной строкой, а в таблице видно дробью: 1 500 / 3 000.
- «Получено» на обзоре складывает то, что реально пришло
- «В работе» — разницу между стоимостью и полученным по всем сделкам
- Поле «получено» можно оставить пустым: тогда статус «получено» означает, что пришла вся сумма
Настройка под себя
- Настройки → Дашборд — название, подзаголовок, валюта (
AED, $, ₽ — что угодно, подставляется рядом с суммами)
- Цель — сумма и срок. Оба поля необязательные: пустая сумма убирает блок прогресса целиком
- Площадки и Рубрики — через запятую, подставляются в выпадающие списки
- Тема и язык переключаются внизу сайдбара и запоминаются в браузере
Перевод интерфейса лежит отдельно в i18n.js — чтобы добавить язык, достаточно дописать туда ещё один блок и кнопку в сайдбар, логику трогать не нужно.
Где живут данные
В репозитории их нет и быть не должно. data.json лежит в .gitignore: репозиторий публичный, а суммы и имена клиентов — нет. Склонируешь к себе — получишь пустой дашборд и заполнишь своим.
С сервером источник правды — data.json на твоей машине. Сервер переписывает его целиком при каждом изменении, через временный файл и rename, так что обрыв не оставит битый JSON.
Без сервера данные лежат в localStorage того браузера, где открыт дашборд. Чистка истории сайта их стирает.
Перенос между устройствами — только через Настройки → Данные → Экспорт / Импорт. Один JSON-файл. Автоматического синка нет намеренно: любой автосинк означал бы, что цифры где-то лежат, а они не должны лежать нигде, кроме твоих устройств.
Старые версии файла подхватываются автоматически: при загрузке данные приводятся к текущей структуре, ничего не теряется. Записи, сделанные до появления частичной оплаты, читаются по-прежнему — статус «получено» у них значит, что пришла вся сумма.
Файлы
server.js zero-dep сервер: статика + GET/PUT api/data
index.html сайдбар и восемь разделов, лого в SVG
app.css две темы на CSS-переменных
i18n.js словарь интерфейса: русский и английский
app.js без ES-модулей: ?v= на <script src> не бустит импорты внутри модуля
data.json твои данные, в репозиторий не попадает
Приложение само определяет, есть ли сервер: запрашивает api/data, и если ответа нет — переключается на localStorage. Поэтому одна и та же сборка работает и локально, и на Pages.
Кэш-бастер ?v=N в index.html поднимать при каждой правке css/js.
