# Спринты Документ для планирования и отслеживания работ по прототипу мобильного приложения Клиники УГН. ## Как вести - Каждый спринт — отдельный заголовок `## Спринт 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:`. ### План - [x] Экран `chat` — список диалогов: AI-помощник (featured), врач, администратор - [x] Данные: три чата в `data.js` (kind, участники, сообщения, online, непрочитанные, время последнего сообщения) - [x] AI-помощник: расширенный диалог с напоминаниями о лекарствах, чипсы с подсказками ответов - [x] Чат с регистратурой: запросы справок, переносы приёмов, счета - [x] Экран `chat:` — конверсация: разный аватар/статус/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:` - [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 экранов прототипа ### Итоги _заполнить в конце спринта_