--- name: dashboard-tab-rework description: Переработка вкладки дашборда аналитической платформы — разбор оригинала и скриншотов, UX-ревизия, сборка новой версии в local/in-progress/ и обязательная проверка рендером. Использовать, когда просят переделать, пересобрать или отрисовать вкладку любого дашборда из local/Source/ (Affiliate, Trader, Merchant, Retention, Weekly KPI и т.д.). --- # Переработка вкладки дашборда Делаем **по одной вкладке за раз**, каждая — отдельная страница в `local/in-progress/<имя>/`. Объединение в единую платформу — потом, поэтому файлы сразу режем так, чтобы `styles.css` переиспользовался без правок. ## Границы - **Бэкенд не трогаем.** Зона ответственности — UX, вёрстка, дизайн. - Все новые файлы — только в `local/` (она в `.gitignore`). - Инфраструктуру (Caddy, systemd, порты) не меняем — сервер предпросмотра уже поднят. - **Платформа только тёмная.** Светлую тему не делать: ни блока `[data-rh-theme="light"]`, ни переключателя в шапке. Тема — свойство платформы, а не отдельной страницы. - **Только десктоп.** Мобильную и планшетную вёрстку не делать: это рабочий инструмент отдела, им пользуются за монитором. Не тратить время на брейкпоинты под узкие экраны, не сворачивать таблицы в карточки, не прятать колонки. Ориентир — от 1280px и шире. - Если собираешься добавить то, чего не было в оригинале, — сначала проговори с пользователем, а не ставь перед фактом. ## 1. Собрать вход **Оригинал.** Монолит лежит в `local/Source/.html` (2-3 тыс. строк, стили и логика инлайн). Вкладки внутри — блоки `
`. Найти границы нужной: ```bash grep -n 'class="pane\|id="pane' local/Source/.html ``` **Скриншоты.** `local/screenshots/images/`, индекс — `local/screenshots/.md`. **Обязательно посмотреть их через Read.** По коду не видно ни визуальной иерархии, ни того, какие блоки на проде реально пустые, ни что обрезано. Половина выводов — со скриншотов. **Токены платформы.** `local/Source/_files/sidebar.css` — общий для всех отчётов, Базовые переменные (`--bg`, `--card`, `--text`, `--accent`…) брать оттуда, иначе новая страница разъедется с остальными дашбордами. **API.** Эндпоинты видно в оригинале: `grep -oE "fetch\('[^']+" local/Source/.html`. Бэк уже готов — наша задача сделать так, чтобы подмена моков на fetch была однострочной. Дальше выписать инвентарь блоков: KPI-карточки, таблицы, графики, фильтры, текстовые блоки, заглушки. Это основа для разговора с пользователем о том, что оставляем. ## 2. UX-ревизия — на что смотреть Это **наблюдения**, собранные на вкладке «Дашборд» Affiliate, а не обязательные к исполнению правила. Проверь, есть ли они на твоей вкладке, и предложи решение пользователю — он может захотеть иначе. - **Плоская иерархия.** Десяток-полтора KPI одного размера и веса: глазу не за что зацепиться. Помогает группировка по смыслу (деньги / портфель / жизненный цикл) и разный размер значения. - **Произвольная раскраска чисел.** В оригиналах каждое KPI своего цвета, причём цвет ничего не кодирует. Когда всё разноцветное, не выделяется ничего. Вариант: значения носят текстовый токен, цвет остаётся каналом статуса (дельты, «ниже цели», gap). - **Дубли через переключатели.** Блок с режимами, показывающий по частям то, что помещается рядом целиком. - **Заглушки под видом данных.** `N/A`, «потрібна CRM», демо-разделы вперемешку с настоящими цифрами читаются как баг. Отдельный pending-паттерн (пунктирная рамка, «Немає джерела», бейдж с причиной) честнее. - **Техдокументация в навигации.** Вкладки «Методологія» и «Легенда» — внутренний QA-чеклист с открытыми вопросами разработчику. Пользователь, увидев «Churn formula не реалізована», теряет доверие к остальным цифрам. - **Пояснения весом как данные.** Длинные подписи «Як читати…» тем же кеглем, что заголовки. - **Глубокая вложенность навигации.** Вкладка → подвкладка → тумблер: три уровня, чтобы понять, где ты находишься. ## 3. Палитра — валидировать, не смотреть глазами Если на вкладке есть категориальные цвета (сегменты, серии, статусы) — прогнать через валидатор из скилла `dataviz`. На Affiliate он нашёл реальный дефект: Platinum `#e5e4e2` и Silver `#c0c0c0` давали ΔE 11.1 при норме 15 — цвета физически неразличимы. Грабли запуска: скрипт — ES-модуль, а CLI-ветка включается только если имя файла `validate_palette.js`. Поэтому копировать под тем же именем в папку с `package.json`: ```bash SP=/pv && mkdir -p $SP && echo '{"type":"module"}' > $SP/package.json cp /dataviz/scripts/validate_palette.js $SP/ node $SP/validate_palette.js "#hex,#hex,…" --mode dark --surface "#181c25" --pairs all ``` - `--pairs all`, а не только соседние: на Affiliate дефектной была именно несоседняя пара. - **Normal-vision ΔE ≥ 15 — жёсткий порог.** Secondary encoding его не оправдывает. - Поверхность для проверки — тёмная карточка `#181c25` (`--mode dark`). Светлую не проверяем, её нет. - Метафорические палитры (металлы tier) никогда не пройдут chroma floor — серебро серое по определению. Это легально при secondary encoding: 2px гэпы, прямые лейблы, легенда с числами. ## 4. Сборка Раскладка в `local/in-progress/` — папка на дашборд, внутри папка на вкладку, стили общие для всей платформы: ``` local/in-progress/ ├── shared/styles.css ← дизайн-система ВСЕХ дашбордов, общая ├── affiliate-dashboard/ │ ├── index.html ← оглавление вкладок этого дашборда │ ├── dashboard/ ← вкладка: index.html + data.js + app.js │ └── affiliates/ └── trader-scoreboard/ ``` | Файл | Роль | |---|---| | `<вкладка>/index.html` | разметка, статический каркас; стили тянет из `../../shared/styles.css` | | `shared/styles.css` | токены + компоненты — **общий, правится осторожно** | | `<вкладка>/data.js` | моки структурой под API | | `<вкладка>/app.js` | рендер; замена моков на fetch — одна строка в `bootstrap()` | Новую вкладку **добавлять в оглавление** `<дашборд>/index.html` (блок `.toc`), сменив её статус с «в роботі» на ссылку. `shared/styles.css` общий, поэтому после правок в нём **прогнать рендером не только новую вкладку, но и уже готовые** — иначе легко сломать сделанное. Новые компоненты добавлять отдельной секцией, существующие токены не переопределять. **Без ES-модулей и без fetch в прототипе** — страница должна открываться и как файл, и с простого статического сервера. Данные класть в `window.DASHBOARD_DATA`. **Моки — с реальными цифрами со скриншотов.** Если значение на скрине обрезано, поставить правдоподобное и пометить комментарием, что оно условное. Структуру объекта повторять за API, чтобы подмена была бесшовной. Вёрстка — что вылезло на практике: - **Одна единица измерения внутри группы.** Auto-compact даёт `₹3.29B` рядом с `₹452.81M`, и карточки перестают сравниваться на глаз. Единицу задаёт формат (`money-m`), а не величина. - `font-variant-numeric: tabular-nums` — только в колонках чисел. На крупных значениях моноширинные цифры выглядят разреженно. - Stacked bar: **2px зазор цветом поверхности** между сегментами, без обводок. - Подпись внутри сегмента — только если реально влезает (проверять по доле), иначе её несут легенда и тултип. Обрезанный текст хуже отсутствующего. - Цвет подписи на цветной заливке выбирается по светлоте самой заливки (тёмное на светлой, белое на тёмной), а не наследуется от текстовых токенов страницы. - Элемент не должен быть `