From bf1c78ff1463984c31da3b27e0db73b7e2a3be3c Mon Sep 17 00:00:00 2001 From: Aleksey Razorvin Date: Mon, 20 Apr 2026 20:01:24 +0500 Subject: [PATCH] =?UTF-8?q?Sprint=206:=20=D0=A2=D0=B0=D0=B9=D0=BC=D0=BB?= =?UTF-8?q?=D0=B0=D0=B9=D0=BD=20X=20home=20variant=20for=20chronic=20patie?= =?UTF-8?q?nts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fourth home variant alongside Карточки / Лента / Таймлайн, labeled "Таймлайн X" in Tweaks "Главный экран". Designed for patients with chronic conditions (not post-op). data.js: new `chronic` object — condition, stage, doctor, metrics (days since last flare-up, compliance %, flare-ups this year), daily + scheduled tasks, lifestyle recommendations, and 5-visit observation history. HomeTimelineXScreen sections: - Health status hero with soft gradient primary-100 → warm-100, success-tinted stable-state chip (green dot), three narrow-font metrics - Today's tasks card: daily habits with streak + 🔥, scheduled procedures with dates - Ask-a-question promotion: AI card (teal gradient) + doctor card (with avatar) side by side - Vertical observation timeline: 5 past visits with doctor initial, color-coded by type (diagnosis/procedure/therapy/flareup/checkup) - Upcoming appointment, lifestyle recommendations carousel with emoji, book CTA, article carousel Softened hero from dark teal gradient with white text to light primary-100 → warm-100 gradient with dark text — stable-state signal, not clinical verdict. Following Sprint 5 convention: matching entry in src/docs.js under key `home:timelineX` with title, category, goal, tasks, rationale. Co-Authored-By: Claude Opus 4.7 (1M context) --- SPRINTS.md | 12 ++ src/App.jsx | 7 +- src/PhoneApp.jsx | 4 +- src/data.js | 28 +++++ src/docs.js | 20 +++ src/screens/screens-home.jsx | 236 +++++++++++++++++++++++++++++++++++ 6 files changed, 302 insertions(+), 5 deletions(-) diff --git a/SPRINTS.md b/SPRINTS.md index d3c7607..f64ce3d 100644 --- a/SPRINTS.md +++ b/SPRINTS.md @@ -101,6 +101,18 @@ _заполнить в конце спринта_ --- +## Спринт 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) + +--- + ## Спринт 5 · 20 апр 2026 **Цель:** документация прототипа внутри самого прототипа — чтобы на ревью с коллегами можно было сразу увидеть цель и design-решения по любому экрану. diff --git a/src/App.jsx b/src/App.jsx index 6962c62..2f59285 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -26,9 +26,10 @@ const SCALE_OPTIONS = [ ]; const HOME_OPTIONS = [ - { id: 'cards', lb: 'Карточки' }, - { id: 'list', lb: 'Лента' }, - { id: 'feed', lb: 'Таймлайн' }, + { id: 'cards', lb: 'Карточки' }, + { id: 'list', lb: 'Лента' }, + { id: 'feed', lb: 'Таймлайн' }, + { id: 'timelineX', lb: 'Таймлайн X' }, ]; const DOC_OPTIONS = [ { id: 'rich', lb: 'Карточки+' }, diff --git a/src/PhoneApp.jsx b/src/PhoneApp.jsx index 53a36e4..320cae9 100644 --- a/src/PhoneApp.jsx +++ b/src/PhoneApp.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import { TabBar } from './components.jsx'; -import { HomeCardsScreen, HomeListScreen, HomeFeedScreen } from './screens/screens-home.jsx'; +import { HomeCardsScreen, HomeListScreen, HomeFeedScreen, HomeTimelineXScreen } from './screens/screens-home.jsx'; import { BookingSpecsScreen, BookingDoctorScreen, BookingTimeScreen, BookingConfirmScreen, BookingSuccessScreen, @@ -22,7 +22,7 @@ import { DocsScreen } from './screens/screens-docs.jsx'; function renderScreen(screenId, nav, ctx) { const parts = screenId.split(':'); const id = parts[0]; - const HOME = { cards: HomeCardsScreen, list: HomeListScreen, feed: HomeFeedScreen }[ctx.homeVariant] || HomeCardsScreen; + const HOME = { cards: HomeCardsScreen, list: HomeListScreen, feed: HomeFeedScreen, timelineX: HomeTimelineXScreen }[ctx.homeVariant] || HomeCardsScreen; switch (id) { case 'home': return ; case 'home-v2': return ; diff --git a/src/data.js b/src/data.js index 3f3cdc0..94de649 100644 --- a/src/data.js +++ b/src/data.js @@ -226,6 +226,34 @@ export const CLINIC_DATA = { ], }, ], + chronic: { + condition: 'Хронический тонзиллит', + stage: 'Компенсированная форма', + diagnosed: '2022', + doctorId: 'makarova', + daysSinceLastFlareup: 118, + complianceScore: 87, + flareupsThisYear: 1, + currentTasks: [ + { id: 't1', text: 'Полоскание горла (утро/вечер)', type: 'daily', done: true, streak: 12 }, + { id: 't2', text: 'Витамин D 2000 МЕ', type: 'daily', done: false, streak: 0 }, + { id: 't3', text: 'Промывание миндалин в клинике', type: 'scheduled', nextDate: '23 апр' }, + { id: 't4', text: 'Плановый ЛОР-осмотр', type: 'scheduled', nextDate: 'Июль 2026' }, + ], + recommendations: [ + { icon: '❄️', title: 'Избегать переохлаждения', sub: 'Особенно горла и шеи' }, + { icon: '💧', title: 'Пить 1.5–2 л воды в день', sub: 'Увлажнение слизистой' }, + { icon: '🏃', title: 'Умеренные физнагрузки', sub: 'Укрепление иммунитета' }, + { icon: '🥦', title: 'Витамин C + цинк', sub: 'В рационе ежедневно' }, + ], + pastVisits: [ + { id: 'v1', date: '15 окт 2023', title: 'Диагноз подтверждён', doctorId: 'makarova', type: 'diagnosis' }, + { id: 'v2', date: '12 дек 2023', title: 'Первое промывание миндалин', doctorId: 'makarova', type: 'procedure' }, + { id: 'v3', date: '8 мар 2024', title: 'Курс физиотерапии · 10 сеансов', doctorId: 'makarova', type: 'therapy' }, + { id: 'v4', date: '14 дек 2024', title: 'Обострение — курс антибиотиков', doctorId: 'makarova', type: 'flareup' }, + { id: 'v5', date: '8 апр 2026', title: 'Плановый осмотр', doctorId: 'makarova', type: 'checkup' }, + ], + }, recovery: { op: 'Септопластика', surgeon: 'syndaev', diff --git a/src/docs.js b/src/docs.js index d227735..09ccdb4 100644 --- a/src/docs.js +++ b/src/docs.js @@ -55,6 +55,26 @@ export const SCREEN_DOCS = { 'Accent-CTA (красная) для записи — выделяется на фоне тёплых карточек', ], }, + 'home:timelineX': { + title: 'Главная 1 · Таймлайн X', + category: 'Главная', + goal: 'Для пациентов с хроническими заболеваниями: поддержание общего понимания «что со мной происходит», ежедневные задачи по здоровью, история наблюдения и лёгкий вход в связь с врачом или AI-помощником.', + tasks: [ + 'Увидеть текущее состояние: диагноз, стадия, ключевые метрики (дни без обострений, комплаенс)', + 'Отметить выполненные ежедневные задачи (полоскание, витамины)', + 'Увидеть запланированные процедуры и осмотры с датами', + 'Быстро спросить AI-помощника или написать лечащему врачу', + 'Пролистать историю наблюдения (визиты, обострения, курсы)', + 'Записаться на следующий осмотр', + ], + rationale: [ + 'Светлый health-status hero (primary-100 → warm-100) — спокойная справка о состоянии, не клинический приговор. Статус «Компенсированная форма» с зелёной точкой + success-цветом сигнализирует «всё стабильно».', + 'Задачи разделены на daily (с streak-счётчиком и огнём 🔥) и scheduled (с датой) — разная природа действий', + 'Промо-блок связи (AI + врач) вынесен отдельным блоком с градиентной AI-карточкой — снять психологический барьер обращения', + 'Вертикальный таймлайн визитов с инициалами врача и цветовой семантикой по типу (диагноз/процедура/терапия/обострение/осмотр) — continuity of care одним взглядом', + 'Рекомендации emoji-карточками горизонтально — лёгкое lifestyle-чтение, не давит на верхние задачи', + ], + }, 'home-v2': { title: 'Главная 2', category: 'Главная', diff --git a/src/screens/screens-home.jsx b/src/screens/screens-home.jsx index eed61e4..410266c 100644 --- a/src/screens/screens-home.jsx +++ b/src/screens/screens-home.jsx @@ -202,6 +202,242 @@ export function HomeListScreen({ nav }) { ); } +export function HomeTimelineXScreen({ nav }) { + const { doctors, appointments, clinic, articles, chronic } = CLINIC_DATA; + const upcoming = appointments.find(a => a.status === 'upcoming'); + const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor); + const myDoctor = doctors.find(d => d.id === chronic.doctorId); + + const typeColors = { + diagnosis: { bg: 'var(--c-primary-100)', fg: 'var(--c-primary-darker)' }, + procedure: { bg: 'var(--c-primary-100)', fg: 'var(--c-primary-darker)' }, + therapy: { bg: 'var(--c-warm-100)', fg: 'var(--c-warm-text)' }, + flareup: { bg: 'var(--c-accent-50)', fg: 'var(--c-accent)' }, + checkup: { bg: 'var(--c-success-50)', fg: 'var(--c-success)' }, + }; + + return ( +
+ {/* Greeting header */} +
+
+
+
20 апреля, понедельник
+
Здравствуйте, Анна
+
+ +
+
+ + {/* Health status hero */} +
+
+
+ Ваше состояние + + + {chronic.stage} + +
+
{chronic.condition}
+
+ Наблюдение с {chronic.diagnosed} · {myDoctor.name.split(' ').slice(0, 2).join(' ')} +
+ +
+
+
{chronic.daysSinceLastFlareup}
+
дней без обострений
+
+
+
{chronic.complianceScore}%
+
комплаенс
+
+
+
{chronic.flareupsThisYear}
+
обострение в году
+
+
+
+
+ + {/* Current tasks */} +
+ nav.push('medcard')} /> +
+ {chronic.currentTasks.map((t, i, a) => { + const isDaily = t.type === 'daily'; + return ( + +
+ {isDaily ? ( +
+ {t.done && } +
+ ) : ( +
+ +
+ )} +
+
{t.text}
+
+ {isDaily ? (t.streak > 0 ? `Серия: ${t.streak} дней` : 'Ежедневно') : `До ${t.nextDate}`} +
+
+ {isDaily && t.streak > 0 && 🔥} + {!isDaily && } +
+ {i < a.length - 1 &&
} + + ); + })} +
+
+ + {/* Promotion: ask AI or doctor */} +
+ +
+ + +
+
+ + {/* History timeline */} +
+ nav.push('medcard')} /> +
+ {chronic.pastVisits.map((v, i, a) => { + const d = doctors.find(x => x.id === v.doctorId); + const c = typeColors[v.type] || typeColors.checkup; + const isLast = i === a.length - 1; + return ( +
+ {!isLast && ( +
+ )} +
+ {d.init} +
+
+
{v.title}
+
{v.date} · {d.name.split(' ').slice(0, 2).join(' ')}
+
+
+ ); + })} +
+
+ + {/* Upcoming appointment */} + {upcoming && upDoc && ( +
+ + a.id === upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} /> +
+ )} + + {/* Recommendations */} +
+ +
+ {chronic.recommendations.map((r, i) => ( +
+
{r.icon}
+
{r.title}
+
{r.sub}
+
+ ))} +
+
+ + {/* Book CTA */} +
+ +
+ + {/* Articles */} +
+ nav.push('articles')} /> +
+ {articles.slice(0, 3).map(a => ( + + ))} +
+
+
+ ); +} + export function HomeFeedScreen({ nav }) { const { doctors, appointments, clinic, articles, recovery } = CLINIC_DATA; const upcoming = appointments.find(a => a.status === 'upcoming');