← до варіантів

# Аналітика BI — архітектура та логіка (основа побудови, v2)

Мета: **швидкість управління даними + СТАБІЛЬНІСТЬ**. Власник керує таблицею очима,
бачить динаміку по днях за кольорами, відкриває день і фокусується на його оферах/кампаніях.

Джерело логіки: код старої Аналітики (`renderOkup`/`OK_METRICS`/`okHeat`) + Excel-звіт власника.
Логіку зберігаємо, візуал робимо в дизайні живих вкладок Огляд/Замовлення/Товари.

---

## 1. Два звіти, ОБИДВА вкладені Місяць → День → leaf
Перемикач `.chips`: **Оффери | Кампанії**.
```
Місяць  (рядок підсумку за місяць, зверху)
  ▾ 01.08 Пн  (рядок-день = підсумок дня, розкривається)
       leaf-рядки дня (ранг за Окупністю спадно, червона лінія беззбитковості)
  ▸ 02.08 Вт
```
- **Оффери:** день → оффери дня (по домену). Кампаній тут НЕМА.
- **Кампанії:** день → кожна кампанія дня (ВСІ, навіть $1): Кабінет-бейдж + Оффер + Статус (Активна/Пауза).
- НЕ беремо окремий «hero-звіт місяця» карткою (варіант 2 відкинуто). Місяць = просто верхній рядок таблиці.

## 2. СТАБІЛЬНІСТЬ (залізне, найголовніше)
- НІЩО не зміщується ліво-право. Розкриття дня додає рядки ТІЛЬКИ вниз, колонки на фіксованій площині.
- **Excel-консистентність:** один `table-layout:fixed` + один `colgroup` на всі рівні. Формат і позиція
  числа ІДЕНТИЧНі між рядком-днем/місяцем і leaf-рядком. Окупність завжди в одній колонці, одне вирівнювання.
- Дані можуть провалюватись вниз, але не стрибати вбік.

## 3. Вирівнювання
- Перша колонка (Місяць / День / Оффер / Кампанія) = по ЛІВІЙ.
- Усі метричні колонки (Окупність, Бюджет грн, CPL, Оборот, ROAS, Маржа, Марж.прибуток, і решта) +
  їхні числа = по ЦЕНТРУ (і заголовок, і значення).

## 4. ПЕРЕМІННІ КОЛЬОРИ (мігрують — ключова фіча)
Теплові кольори живуть на рівні, який зараз скануєш:
- **Дні згорнуті** → heat на рядках-ДНЯХ (динаміка день-до-дня: який день зелений/червоний).
- **Відкрив день** → heat переходить на leaf-рядки цього дня; сам відкритий день стає нейтральним;
  ІНШІ дні тьмяніють/відступають (фокус на відкритому дні).
- **Згорнув** → heat повертається на дні.
Колонки з heat: Окупність, %апрув, %допродаж, Марж.прибуток. Тон делікатний (rgba ~0.03-0.15).
Окупність з мінібаром. Чітко видно, де ти: день чи оффер (різний рівень, різний відступ назви, heat на правильному рівні).

## 5. ФІЛЬТР ПО ДНЯХ (нова фіча)
- У вкладці Оффери можна вибрати оффер (чи кілька), у Кампаніях — кампанію.
- Кнопка «Відфільтрувати по дням» справа над таблицею.
- Показує обрану сутність у розрізі КОЖНОГО дня: зліва день, справа всі показники САМЕ цього оффера/кампанії.
- День, де сутності не було → прочерк «·». Видно, як сутність рухається по днях (сама себе підсумовує).
- Джерело: `DATA.byMonth[m].days[]` → знайти в `offers`/`campaigns` за ключем (offer=домен, campaign=name).

## 6. Колонки (16, тогл «Усі метрики» 8↔16), сортування
Primary: Окупність · Бюджет грн · CPL · Оборот · ROAS · Маржа · Марж.прибуток.
Всі: + Бюджет $ · Лідів · Апрув · З допом · СМ · %апрув · %допродаж · СЧ.
Кампанії ще: Кабінет · Оффер · Статус. + колонка «Лог» (нотатка).
**Сортування по будь-якій колонці** (клік заголовка), дефолт Окупність спадно. Лінія беззбитковості під Окупність-сорт.

## 7. Дані (data.json)
`DATA.months`, `DATA.monthTotal[m]`, `DATA.byMonth[m].days[] = {day, total, offers[], campaigns[]}`.
Поля: spend(Бюджет $), spend_grn(грн), cpl, leads, approved, upsell(З допом), oborot(Оборот), sm(СМ),
approve_pct, upsell_pct, sch(СЧ), roas, okup(Окупність ×), margin, margin_budget, cr. Campaign: name, cab, dom, status, active. Offer: offer.

## 8. Шапка / прибрати / попап / адреси
- Шапка: місяць-пікер + «Оновити Мета» (мок) + «Усі метрики» + «Відфільтрувати по дням».
- Прибрано: верхній календар, Викуп, Total, №КЦ, сірий мікротекст «акаунт 2994…».
- Статус кампанії = наявний ACTIVE/PAUSED з Meta (не КЦ).
- Оффер зберігається в базі назавжди по FB-витраті (бекенд-логіка живого порту).
- Попап нотатки (колонка «Лог») у стилі попапів Замовлень: аудіо-мок + текст + історія, свій URL.
- Deep-link: `#campaigns/2026-08` · `#offers/2026-08` · `.../day/2026-08-01` · `.../filter/<id>` · `.../note/<id>`.

## 9. Дизайн
Мова живих вкладок (shell.css + ogliad-view.css + pills.css). Білі картки, один system-ui, рівна висота
рядків, tabular-nums, чеврон розгортання. 16 колонок скролять ВСЕРЕДИНІ картки (тільки горизонталь у
контейнері, сторінка не їде і не зсувається). Адаптив 1280+375.

---
**Порядок:** цей файл → 10 агентів роблять 10 варіантів на ЦІЙ логіці (стабільність, центр-метрики,
перемінні кольори, фільтр по днях, сорт, лінія беззбитковості) у нашому дизайні → 10 прев'ю-лінків → вибір → живий порт.