mobile-app-prototip/SPRINTS.md

# Спринты

Документ для планирования и отслеживания работ по прототипу мобильного приложения Клиники УГН.

## Как вести

- Каждый спринт — отдельный заголовок `## Спринт N · даты`
- Задачи — чекбоксы `- [ ] описание`, ставим `- [x]` когда готово
- По завершении спринта — короткое резюме в блоке **Итоги**
- Нерешённое переносится в следующий спринт

## Правила разработки

- **Документация = часть прототипа.** При любом изменении экрана в `src/screens/*.jsx` — проверить и обновить соответствующую запись в `src/docs.js` (`goal` / `tasks` / `rationale` / `variants`). Эти описания показываются в плашке над телефоном и на экране «Документация», поэтому устаревшие формулировки мешают коллегам на ревью.
- Новый экран → добавить запись в `SCREEN_DOCS`, выбрать категорию из `ORDER` (в `getAllDocs`), для compound-маршрутов (`something:id`) прописать кейс в `resolveRouteForDoc`.
- Мелкие CSS-правки (цвета, отступы, иконки) документировать не нужно — в `docs.js` описывается intent, а не пиксели.
- Варианты экрана с ctx (home cards/list/feed) — отдельная запись на каждый вариант (`home:cards`, `home:list`, `home:feed`).

---

## Спринт 1 · 19 апр 2026

**Цель:** развернуть прототип ЛОР-клиники из дизайн-бандла Claude Design и закрыть базовые пробелы.

### План
- [x] Распаковать дизайн-бандл, перенести на Vite + React (20 экранов)
- [x] iOS / Android рамки + Tweaks-панель (экраны, устройство, компоновка, акцент, шрифт, плотность, масштаб)
- [x] Экран результата эндоскопии: 2×2 снимков, заключение, рекомендации, PDF, полноэкранный просмотр
- [x] Статьи: список с фильтрами по тегам + детальная страница (hero, body-блоки, автор, связанные)
- [x] Главная 2: универсальный поиск, тайлы, статистика клиники
- [x] Поиск: врачи / услуги / симптомы / статьи / приёмы с реальной фильтрацией
- [x] Контакты: телефон, два адреса с мокапами зданий и мини-карт
- [x] Цены: поиск + пиллы-категории, группировка, диапазон
- [ ] Развернуть на публичный URL (surge / netlify) и отправить коллегам
- [ ] Собрать первичный фидбек по прототипу

### Итоги
_заполнить в конце спринта_

---

## Спринт 2 · 19 апр 2026

**Цель:** превратить одиночный чат в центр всех коммуникаций с клиникой — AI-помощник, врач, администратор.

**Итоги.** Закрыт. Чат стал списком из трёх диалогов (AI-помощник, врач, администратор), каждая карточка ведёт в отдельную конверсацию с разными UI-акцентами. Таббар автоматически скрывается в подэкранах `chat:<id>`.

### План
- [x] Экран `chat` — список диалогов: AI-помощник (featured), врач, администратор
- [x] Данные: три чата в `data.js` (kind, участники, сообщения, online, непрочитанные, время последнего сообщения)
- [x] AI-помощник: расширенный диалог с напоминаниями о лекарствах, чипсы с подсказками ответов
- [x] Чат с регистратурой: запросы справок, переносы приёмов, счета
- [x] Экран `chat:<id>` — конверсация: разный аватар/статус/UI-акценты для AI, врача, оператора
- [x] Видеозвонок-кнопка только у врача; suggested replies только у AI
- [x] Переадресация: сурджен в «Восстановлении» → `chat:doctor-syndaev`
- [x] Tweaks: добавить три варианта чата в список экранов

### Задел на Спринт 3
- [ ] Экран онбординга (первый запуск)
- [ ] Пустые состояния для всех вкладок
- [ ] Анимации переходов между экранами
- [ ] Реальные аватары врачей и иконки
- [ ] Сравнение результатов эндоскопии с предыдущим
- [ ] Раздел «Программа лояльности» (бонусы, уровни)
- [ ] Детальная карточка услуги (с описанием и подготовкой)
- [ ] Форма обратной связи / отзыв о враче
- [ ] Тёмная тема

### Итоги
_заполнить в конце спринта_

---

## Спринт 3 · 20 апр 2026

**Цель:** применить новую палитру из дизайн-системы (скрин от 20.04) и добавить её как 4-й вариант в Tweaks.

Входные цвета: `#ffffff #fffde4 #f2fee6 #d4f6f8 #e9e4d4 #ffa39c #63bac3 #29aee3 #93908f` — sky-blue primary + coral accent + warm pastels.

### План
- [x] Расширить схему `ACCENT_OPTIONS`: добавить `accent`, `accentDark`, `accent50` (чтобы палитра меняла и красный акцент, а не только primary + warm)
- [x] Обновить `applyTheme` — устанавливать `--c-accent`, `--c-accent-dark`, `--c-accent-50` из палитры
- [x] Проставить accent-поля в существующих палитрах (тил/терра/марин) → сохранить текущий красный `#E04E44`
- [x] Добавить 4-ю палитру **Лагуна**: primary `#29AEE3`, accent `#FFA39C`, warm `#E9E4D4`
- [x] Пристроить три оставшихся цвета из скрина: `#f2fee6` → `success-50`, `#93908f` → `fg-4`, `#63bac3` → `primary-300` (с видимым применением в бордере Clinic Stats card на Home V2)
- [x] Добавить 5-ю палитру **Бриз** — вариант Лагуны с приглушённым primary `#63BAC3` (яркий `#29AEE3` переехал в p300, warm/accent/success/fg-4 наследуются от Лагуны)
- [ ] Визуальная проверка всех экранов в новой палитре: кнопки, чипы, CTA, прогресс восстановления, успех-галочка, таббар-бейджи

---

## Спринт 4 · 20 апр 2026

**Цель:** служебные экраны для разработчиков — визуализация дизайн-системы прямо в прототипе, чтобы переключая палитру сразу видеть все цвета и их применение.

### План
- [x] Пробросить текущую палитру через `ctx.palette` (чтобы dev-экраны могли прочитать все поля)
- [x] Экран **DEV · Палитра**: таблица всех цветов (primary / warm / accent / status / neutrals / text), у каждой строки — свотч, название роли, CSS-переменная, hex-код, краткое описание применения
- [x] Экран **DEV · Примеры**: реальные компоненты (кнопки, чипы, карточки, текстовая иерархия, статусы) с подписями «какая CSS-переменная используется»
- [x] Добавить оба экрана в SCREEN_OPTIONS Tweaks
- [x] Динамический рендер: при переключении палитры значения hex обновляются автоматически

---

## Спринт 6 · 20 апр 2026

**Цель:** вариант Главной для пациентов с хроническими заболеваниями — поддержание понимания «что со мной происходит», ежедневных задач по здоровью и связи с врачом/AI-помощником. Выведено как **Таймлайн X** (X = «хроник»).

### План
- [x] Добавить в `data.js` блок `chronic` — диагноз, стадия, ключевые метрики (дни без обострений, комплаенс, обострения в году), ежедневные/плановые задачи, рекомендации, история наблюдения (visits)
- [x] Экран `HomeTimelineXScreen` в `screens-home.jsx`: health-status hero, задачи сегодня (daily + scheduled), промо-блок связи (AI + врач), вертикальный таймлайн истории, ближайший приём, рекомендации горизонтально, CTA записи, статьи
- [x] Добавить `timelineX` в `HOME_OPTIONS` (App.jsx) и в HOME map (PhoneApp.jsx)
- [x] Описание в `src/docs.js` под ключом `home:timelineX` (соблюдение конвенции из Спринта 5)

---

## Спринт 9 · 21 апр 2026

**Цель:** ввести переключатель дизайн-системы в Tweaks (раздел **«Дизайн»**: «Клод» / «Прозрачная карточка») и начать перерабатывать экраны в стиле «Светлой плитки» (primary-50 карточки, круглые teal-иконки, крупные h1, тонкие бордеры primary-100, минимум градиентов).

**Идея.** «Клод» — текущий нейтральный дизайн (Spacious gradient + разные tint-карточки). «Прозрачная карточка» — унифицированный стиль на базе «Светлой плитки»: каждая сущность в primary-50 карточке со скруглением 16, шапки — белая кнопка-назад в primary-50 кружке, плитка-первее-списка.

### Инфраструктура
- [x] `TWEAKS_DEFAULT.design = 'claude'` + `DESIGN_OPTIONS` (App.jsx)
- [x] Группа «Дизайн» в TweaksPanel (2 кнопки)
- [x] `ctx.design` прокинут в PhoneApp.renderScreen
- [x] В plate-режиме главная всегда = `HomeSplashScreen` (homeVariant форсится на `splash`)
- [x] Механизм fallback: экраны без plate-версии показываются в Клоде

### Plate-версии экранов
- [x] Главная — `HomeSplashScreen` (уже готов из Спринта 8, базовый эталон)
- [x] Профиль — `ProfilePlateScreen` (паспорт + 2 быстрые кнопки QR/Карта + 4 секции списком plate-карточек)
- [x] Приёмы — `ApptsPlateScreen` (табы как pill-сегмент, карточка приёма с «Активно», чипы даты/времени/адреса)
- [x] Детали приёма — `ApptDetailPlateScreen` (крупное время в plate-hero + заключение с белыми вложенными pane)
- [x] Электронная карта — `MedcardPlateScreen` (паспорт + pill-табы + все 5 табов в plate-стиле)

### Задел на следующий спринт
- [ ] Врачи (список + карточка врача) в plate-стиле
- [ ] Флоу записи (specs/doctor/time/confirm/success) в plate-стиле
- [ ] Чаты (список + конверсация) в plate-стиле
- [ ] Результаты (список + аудио + эндоскопия) в plate-стиле
- [ ] Восстановление, тест слуха — в plate-стиле
- [ ] Уведомления, QR — в plate-стиле
- [ ] Статьи, контакты, цены, поиск — в plate-стиле
- [ ] docs.js — отдельные записи для plate-вариантов если стилистика существенно отличается от Клода

### Итоги
_заполнить в конце спринта_

---

## Спринт 8 · 21 апр 2026

**Цель:** добавить в Tweaks 5-й вариант главной по макету Stitch — приветственный экран с тёплой карточкой записи и плиткой 2×2 «Полезная информация».

**Итоги.** Закрыт. Реализован `HomeSplashScreen` (screens-home.jsx) + вспомогательный `SplashTile`. В процессе название варианта переименовано из «Сплэш» → **«Светлая плитка»** (id=`splash`) — более понятно на русском. Имя пациента тянется из `patient.shortName`, ближайший приём из `appointments`. Доступ: Tweaks → «Главный экран» → «Светлая плитка». Стал базой для дизайн-системы «Прозрачная карточка» в Спринте 9.

### План
- [x] `HomeSplashScreen` в `screens-home.jsx`: шапка (аватар + «Главная» + колокольчик), крупный h1 «Добрый день, {имя}!», поиск врача, секция «Записи на прием» (ближайшая + мои приёмы + warm-CTA записи), «Услуги и консультации» 2×1, «Полезная информация» 2×2
- [x] Вспомогательный компонент `SplashTile` — круглая teal-иконка + sub/main
- [x] Имя пациента — из `patient.shortName` (единый источник правды с Профилем и Медкартой)
- [x] Подключить в `HOME_OPTIONS` (App.jsx) и в HOME-map (PhoneApp.jsx) как `splash` → «Светлая плитка»
- [x] Описание `home:splash` в `src/docs.js` (цель, задачи, design-решения, варианты)

---

## Спринт 7 · 21 апр 2026

**Цель:** превратить экран «Медкарта» в полноценную электронную карту пациента — единую точку правды о здоровье, связанную двусторонне с карточками прошедших приёмов и с Профилем.

### План
- [x] Расширить `data.js`: блок `patient` (ФИО, ДР, полис, СНИЛС, № карты, первый визит, лечащий врач) + блок `medcard` (allergies с severity/reaction, chronicConditions с МКБ-кодом, vaccinations, surgeries, prescriptions active/past)
- [x] Дополнить `appointments` past-визиты полями `diagnosis`, `diagnosisCode`, `conclusion`, `prescriptions[]`, `resultIds[]` + добавить визит `a5` (септопластика Синдяева 12 апр)
- [x] Переписать `MedcardScreen`: hero-паспорт с QR-кнопкой, 5 табов (Общее / Посещения / Назначения / Прививки / Операции), карточки посещений ведут в `appt:<id>`
- [x] `ApptDetailScreen`: блок «Заключение» теперь тянет данные из `a.diagnosis/conclusion/prescriptions/diagnosisCode`, добавлены CTA «В медкарте» и «Результаты обследований»
- [x] `ApptsTabScreen`: на вкладке «Прошедшие» primary-CTA «Электронная карта» (вместо «Записаться»)
- [x] `ProfileTabScreen`: шапка читает `patient`, пункт «Электронная карта» с featured-стилем и счётчиками (посещения / аллергии / диагнозы), новый чип «Карта №XXX» рядом с QR
- [x] Обновить `docs.js`: `medcard` и `appt` — отразить двустороннюю связь и новую структуру карты

### Итоги
_заполнить в конце спринта_

---

## Спринт 5 · 20 апр 2026

**Цель:** документация прототипа внутри самого прототипа — чтобы на ревью с коллегами можно было сразу увидеть цель и design-решения по любому экрану.

### План
- [x] Общий слой данных `src/docs.js` — словарь описаний по screen-id: title, category, goal, tasks[], rationale[], variants
- [x] Helper `getScreenDoc(screenId, ctx)` — резолвит варианты home (cards/list/feed) и compound-экраны
- [x] Toggle «Описания» в Tweaks (вкл/выкл)
- [x] Плашка-описание над телефоном в режиме single (только когда тоггл ON) — category + title + 1 строка goal
- [x] Тап по плашке → модал-оверлей поверх сцены с полным описанием (задачи, design-решения, варианты, CTA «Закрыть»)
- [x] Отдельный экран `docs` (Вариант 4) — список всех экранов по категориям с collapsible-описаниями и кнопкой «Открыть экран»
- [x] Наполнить описаниями все ~30 экранов прототипа

### Итоги
_заполнить в конце спринта_