1 Дизайн-система

1.1. Візуальна мова обох панелей — дизайн-система адмінки Otack CMS (сама CMS не використовується): темний сайдбар (navy), верхній тулбар із пошуком і діями, картки, KPI-плитки (stat-grid), таблиці з серверною пагінацією, бейджі статусів, модальні вікна і тости. Основа верстки — готова сітка адмін-макетів OTACK (admin.css).

1.2. Шрифти: e-Ukraine (текст) та e-Ukraine Head (заголовки), self-hosted. Мова інтерфейсів — українська, єдина.

1.3. Кольорова база: navy #1B2350, акцент gold #C99A00, статуси ok/warn/danger — як у цьому документі. Бейджі статусів інтерв'ю: зараховано (ok), відхилено (danger), у перевірці (warn), анульовано (muted).

1.4. Загальні правила: усі списки — з серверною пагінацією і фільтрами; порожні стани з поясненням і дією; деструктивні дії — через підтвердження; час — у локальній зоні вузла; числа — з розрядними пробілами.

1.5. PWA інтерв'юера — адаптивна верстка для трьох класів пристроїв: телефон (первинний: портрет, одна колонка, цілі дотику ≥44px, робота одною рукою), планшет (дві колонки), десктоп (робоче місце у штабі: горизонтальна навігація, багатоколонкова розкладка). Панелі координатора і замовника — десктопна верстка ≥1280px з адаптивом до планшета.

1.6. Горизонтальний скрол заборонений на всіх екранах усіх застосунків за будь-якої підтримуваної ширини: сітки колапсують, таблиці ущільнюються або ховають другорядні колонки.

1.7. Розрізнення систем кольором рами: рама (сайдбар і службові зони) панелі вузла — navy #1B2350; рама панелі хаба — димчасто-чорна #1B1815 із золотим акцентом #C99A00. Контентна зона світла в обох системах.

1.8. Мобільний і планшетний PWA: контент-шар зі скругленими верхніми кутами, що наїжджає на шапку при скролі (шапка ховається під контентом); нижня навігація фіксована. Виняток — екран інтерв'ю: без нижньої навігації (розд. 2).

2 PWA інтерв'юера — екрани

Файли макетів: demo/pwa/. Основні екрани без повторів; типові списки (пагінація, фільтри) макетуються один раз.

Екран · макет	Призначення	Склад і поведінка
Вхід pwa-login	Автентифікація	Логін, пароль, поле TOTP; помилка «активна сесія на іншому пристрої» з підказкою звернутися до координатора; стан «пристрій заблоковано». Перший вхід — крок запису еталона голосу (~30 с): інструкція, індикатор запису, підтвердження
Головна / зміна pwa-home	Робочий стан дня	Картка активного завдання (район на міні-карті, квота, анкета); кнопка відкриття/закриття зміни (керування зміною — саме тут); лічильники за зміну (проведено / у черзі / відправлено); індикатор синхронізації та мережі; поточний індекс доброчесності (число + стрілка динаміки); кнопка «Почати інтерв'ю» веде на екран підготовки pwa-precheck
Підготовка до інтерв'ю pwa-precheck	Контроль готовності	Чек-лист готовності: гео в районі, мікрофон, місце на пристрої, стан зміни, активна анкета; квота зміни; кнопка старту інтерв'ю активна лише після проходження всіх перевірок — старт інтерв'ю можливий лише з цього екрана
Інтерв'ю pwa-interview	Головний робочий екран	Екран бачить респондент: нейтральна шапка (лише назва «Інтерв'ю» — без логотипа, імені інтерв'юера, завдання і службової інформації), без нижньої навігації. Крок 0: чекбокс згоди респондента (без нього старт неможливий); далі анкета по одному питанню на екран, прогрес, індикатор запису (пульсуючий) і таймер; логіка переходів; фініш — підсумок і підтвердження. Кнопка завершення (скасування без збереження) — з модальним підтвердженням. Переривання (дзвінок/згортання) — повноекранне повідомлення «інтерв'ю анульовано, почніть заново»
Черга відправлення pwa-queue	Офлайн-синхронізація	Список пакетів зі статусами (в черзі / відправляється з прогресом / відправлено / помилка з повтором); зайнятість сховища браузера; попередження при заповненні
Історія pwa-history	Мої інтерв'ю і вердикти	Список за днями: час, тривалість, статус-бейдж; причина відхилення; кнопка «оскаржити» → форма апеляції та її статус
Мій індекс pwa-index	Прозорість оцінки	Значення 0–100, графік за тижнями, спрощений розбір за групами (гео / темп / голос / стабільність) без розкриття порогів; пояснювальні тексти
До оплати pwa-payable	Кількісний облік	Періоди: зараховано / відхилено / коригування / разом до оплати (кількість інтерв'ю). Без сум і ставок

3 Панель координатора міста — екрани

Файли макетів: demo/node/. Каркас: сайдбар (Огляд · Інтерв'ю · Інтерв'юери · Завдання · Анкети · Скринінг · До оплати · Журнали) + тулбар із пошуком.

Екран · макет	Призначення	Склад і поведінка
Огляд міста node-dashboard	Стан дня одним поглядом	KPI-плитки: інтерв'ю сьогодні, активні інтерв'юери, у черзі перевірки, відхилено за тиждень; стрічка останніх маркерів із хаба; міні-карта активності; блок «потребують уваги» (інтерв'юери з маркерами)
Інтерв'ю (реєстр) node-interviews	Усі інтерв'ю міста	Таблиця: дата/час, інтерв'юер, завдання, тривалість, статус-бейдж, маркери (іконки), бал; фільтри за всім переліченим; масові дії відсутні (вердикти — лише хаб)
Картка інтерв'ю node-interview	Деталі одного інтерв'ю	Дві колонки: ліворуч анкета з відповідями і таймлайн статусів; праворуч карта старт/фініш із радіусом завдання, сигнали з значеннями, плеєр аудіо (в межах 3-денного вікна; прослуховування журналюється), маркери і вердикт хаба
Інтерв'юери node-interviewers	Реєстр людей	Таблиця: фото, ПІБ, статус, індекс (кольорова шкала), інтерв'ю за тиждень, скринінг (увімк/вимк), маркери; фільтри; дії: створити, призупинити, скинути сесію
Картка інтерв'юера node-interviewer	Профіль і історія	Шапка: фото, контакти, статус, пристрій (+кнопка зміни), стан скринінгу з історією; вкладки: індекс із розбором і графіком · інтерв'ю · зміни · події сесій (спроби паралельного входу — підсвічені) · збої запису
Завдання і карта node-assignments	Планування поля	Vue-сторінка: карта міста на весь екран; малювання району (полігон/радіус); список завдань поруч зі статусами і квотами; призначення інтерв'юерів чек-списком; шар точок інтерв'ю за день із підсвіткою кластерів
Анкети міста node-questionnaires	Черга анкет	Листинг анкет міста: активна анкета (прогрес квоти, дедлайн), черга з позиціями (зміна порядку), завершені та архівні; статуси (чернетка / у черзі / активна / завершена / архів); статистика анкети (агрегати відповідей, когортні зрізи) — і під час збору, і після завершення; перехід у конструктор
Конструктор анкет node-questionnaire	Створення анкети	Vue-сторінка: список питань із перетягуванням; редактор питання (тип, текст, опції, обов'язковість, логіка показу); панель версій (чернетка → публікація, незмінність опублікованих); кнопка тестового проходження
Скринінг node-screening	Керування записом аудіо (Д-12)	Таблиця інтерв'юерів зі станом скринінгу, статистичною довідкою (перевірено інтерв'ю, індекс, маркери) і історією змін; дія «вимкнути/увімкнути» з обов'язковою підставою; масова дія за фільтром; банер «N контрольних увімкнень активно за командою хаба»
До оплати node-payable	Періоди обліку	Список періодів зі статусом; всередині — таблиця за інтерв'юерами: зараховано / відхилено / коригування / разом; кнопка закриття періоду з підтвердженням; експорт CSV/XLSX; закриті періоди — лише читання
Журнали node-journals	Незмінний журнал подій вузла	Хронологія подій: доступ до записів (прослуховування/завантаження), дії користувачів, події сесій, зміни скринінгу, видалення аудіо; фільтри за типом, користувачем, датою; лише читання — записи не редагуються і не видаляються

Журнали виконуються окремим макетом node-journals (див. таблицю); інші типові табличні екрани збираються з компонентів дизайн-системи без окремих макетів.

4 Панель замовника (обласний хаб) — екрани

Файли макетів: demo/hub/. Каркас: сайдбар (Огляд області · Черга аудиту · Індекси · Міста · Анкети · Нагляд · Аналітика · Користувачі · Налаштування) + тулбар.

Екран · макет	Призначення	Склад і поведінка
Огляд області hub-dashboard	Головний екран замовника	KPI: інтерв'ю за день, активні інтерв'юери, перевірено %, відхилено %, глибина черги аудиту; таблиця міст (вузол, стан online/offline, інтерв'ю, відставання, диск); графік динаміки за 30 днів; топ підозрілих інтерв'юерів за маркерами
Черга аудиту hub-audit-queue	Робота аудиторів	Таблиця: пріоритет, місто, інтерв'юер (індекс поруч), причина (маркер/випадкова/апеляція/контроль), дедлайн 3-денного вікна (таймер, підсвітка спливаючих), статус, аудитор; кнопка «взяти наступне» — бере верхнє за пріоритетом
Картка аудиту hub-audit-card	Ключовий екран продукту	Vue-сторінка, три зони: (1) плеєр-хвиля зі стрімом із вузла, розмітка сегментів голосів із діаризації, швидкості 1×/1.5×/2×; (2) маркери з поясненнями і внесками в бал, гео-карта старт/фініш, метадані; (3) анкета з відповідями. Праворуч знизу — панель вердикта: зараховано / відхилено (причина з довідника + коментар), ескалація. Уся активність журналюється
Індекси області hub-indexes	Рейтинг доброчесності	Таблиця інтерв'юерів області: місто, індекс із кольоровою шкалою, динаміка, інтерв'ю у вікні, маркери за групами (іконки), скринінг; фільтри; перехід у розбір індексу (модал із breakdown)
Міста (вузли) hub-nodes	Реєстр і стан вузлів	Картки міст: стан, версія протоколу, останній зв'язок, черги, диск; майстер реєстрації нового вузла (генерація ключів, інструкція підключення); дії: вимкнути вузол, ротація токенів
Анкети міст hub-questionnaires	Черги анкет по області	По кожному місту: активна анкета (прогрес квоти, дедлайн), черга з позиціями, завершені та архівні; статистика збору за анкетою — агрегати відповідей і когортні зрізи — і під час збору, і після завершення
Нагляд за координаторами hub-oversight	Контроль контролерів (Д-10, Д-12)	Vue-сторінка. Зведення по кожному місту: інтерв'юерів зі скринінгом / без; список вимкнень із оцінкою хаба (обґрунтовано / без статистики / погана статистика — підсвітка danger); маркери координаторам зі статусами реагування; кнопка «контрольне увімкнення» з вибором частки; графік черги аудиту міста
Аналітика області hub-analytics	Зведення і експорти	Зведення за періодами в розрізах місто / завдання / інтерв'юер; графіки динаміки; когортні зрізи анкет; експорт CSV/XLSX без персональних даних респондентів
Користувачі хаба hub-users	Ролі та координатори вузлів	Реєстр користувачів хаба (адміністратор, оператор замовника, аудитор); окремий реєстр координаторів вузлів зі станом облікового запису (запрошення надіслано / активний / замінений / деактивований); дії: створення облікового запису, запрошення, заміна координатора, скидання пароля і сесії, деактивація — усі дії журналюються
Налаштування ваг hub-weights	Конфігурація індексу	Таблиця сигналів за групами: вага (слайдер/число), пороги, активність; попередній перегляд «як зміниться розподіл балів» на останніх N інтерв'ю; історія змін із датами застосування

Аналітика (hub-analytics) і користувачі (hub-users) виконуються окремими макетами (див. таблицю); типові CRUD-екрани збираються на стандартних компонентах Filament.

5 Перелік макетів до виконання

Група	Макети (29)
PWA (8)	pwa-login · pwa-home · pwa-precheck · pwa-interview · pwa-queue · pwa-history · pwa-index · pwa-payable
Вузол (11)	node-dashboard · node-interviews · node-interview · node-interviewers · node-interviewer · node-assignments · node-questionnaires · node-questionnaire · node-screening · node-payable · node-journals
Хаб (10)	hub-dashboard · hub-audit-queue · hub-audit-card · hub-indexes · hub-nodes · hub-questionnaires · hub-oversight · hub-analytics · hub-users · hub-weights

Разом 29 макетів (PWA 8 · вузол 11 · хаб 10). Типові CRUD-екрани окремо не макетуються — вони збираються з тих самих компонентів дизайн-системи. Кожен макет — статичний HTML на спільному admin.css з реалістичними даними Полтавської області.