AR 15 M4
e9a8171252
- Sprint 7: Electronic patient card (MedcardScreen rewritten with hero passport, 5 tabs, bidirectional links with past appointments) - Sprint 8: 5th home variant "Светлая плитка" (HomeSplashScreen) - Sprint 9: Tweaks "Дизайн" section (Клод / Прозрачная карточка) with plate versions of Profile, Appts, Appt details and Medcard in screens-plate.jsx; fallback to Клод for other screens Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
682 lines
39 KiB
React
682 lines
39 KiB
React
import React from 'react';
|
||
import { I } from '../icons.jsx';
|
||
import { CLINIC_DATA } from '../data.js';
|
||
import { Avatar, AppointmentCard, SectionHeader } from '../components.jsx';
|
||
|
||
export function HomeCardsScreen({ nav }) {
|
||
const { doctors, appointments, specializations, clinic, articles } = CLINIC_DATA;
|
||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||
return (
|
||
<div style={{ paddingBottom: 100 }}>
|
||
<div style={{ padding: '8px 20px 16px', background: 'linear-gradient(180deg,#F5EDDF 0%,transparent 100%)' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
|
||
<div>
|
||
<div className="sub" style={{ marginBottom: 2 }}>Добрый день,</div>
|
||
<div style={{ fontSize: 22, fontWeight: 700, color: 'var(--c-fg-1)' }}>Анна Сергеевна</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button onClick={() => nav.push('notifications')} className="press" style={{ width: 42, height: 42, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
|
||
<I.bell size={20} style={{ color: 'var(--c-fg-1)' }} />
|
||
<span style={{ position: 'absolute', top: 7, right: 9, width: 8, height: 8, borderRadius: 999, background: 'var(--c-accent)' }} />
|
||
</button>
|
||
<button onClick={() => nav.push('qr')} className="press" style={{ width: 42, height: 42, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.qr size={20} style={{ color: 'var(--c-fg-1)' }} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button onClick={() => nav.push('booking-specs')} className="press" style={{
|
||
width: '100%', textAlign: 'left',
|
||
background: 'var(--c-primary-darker)', color: '#fff',
|
||
borderRadius: 20, padding: 18,
|
||
display: 'flex', alignItems: 'center', gap: 14,
|
||
boxShadow: '0 10px 30px rgba(22,107,99,.25)',
|
||
}}>
|
||
<div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.plus size={26} />
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontSize: 16, fontWeight: 700, marginBottom: 2 }}>Записаться на приём</div>
|
||
<div style={{ fontSize: 13, opacity: .8 }}>К ЛОР-врачу · сегодня или завтра</div>
|
||
</div>
|
||
<I.arrow size={22} />
|
||
</button>
|
||
</div>
|
||
|
||
{upcoming && upDoc && (
|
||
<div style={{ padding: '16px 20px 8px' }}>
|
||
<SectionHeader title="Ближайший приём" pad="0 0 0 0" action="Все" onAction={() => nav.set('appts')} />
|
||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a => a.id === upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} />
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ padding: '16px 20px 8px' }}>
|
||
<SectionHeader title="Специализации" pad="0 0 0 0" />
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
|
||
{specializations.map(s => {
|
||
const icons = { ear: I.ear, hear: I.hearing, leaf: I.heart, mic: I.mic, baby: I.profile, scalpel: I.stetho };
|
||
const Ic = icons[s.icon];
|
||
return (
|
||
<button key={s.id} onClick={() => nav.push('doctors')} className="press card" style={{ padding: 14, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
|
||
<div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<Ic size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 1 }}>{s.label}</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>{s.count} врачей</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: '16px 20px 8px' }}>
|
||
<SectionHeader title="Быстрые действия" pad="0 0 0 0" />
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
|
||
<button onClick={() => nav.push('telemed')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-accent-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.video size={20} style={{ color: 'var(--c-accent)' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700 }}>Телемедицина</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>Видео с врачом</div>
|
||
</div>
|
||
</button>
|
||
<button onClick={() => nav.push('audiotest')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.hearing size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700 }}>Тест слуха</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>За 3 минуты</div>
|
||
</div>
|
||
</button>
|
||
<button onClick={() => nav.push('results')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-warm-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.doc size={20} style={{ color: 'var(--c-warm-text)' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700 }}>Анализы</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>5 результатов</div>
|
||
</div>
|
||
</button>
|
||
<button onClick={() => nav.push('recovery')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-success-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.shield size={20} style={{ color: 'var(--c-success)' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700 }}>Восстановление</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>День 6 из 14</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: '16px 0 8px' }}>
|
||
<SectionHeader title="Статьи врачей" action="Все" onAction={() => nav.push('articles')} />
|
||
<div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px 8px' }} className="noscroll">
|
||
{articles.map((a, i) => (
|
||
<button key={a.id} onClick={() => nav.push('article:' + a.id)} className="press card" style={{
|
||
flexShrink: 0, width: 220, padding: 0, overflow: 'hidden', textAlign: 'left',
|
||
}}>
|
||
<div style={{
|
||
height: 90, background: a.hero || ['#F5EDDF','#E3F4F2','#FDF8E6','#FCF1F0'][i % 4],
|
||
display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: 12,
|
||
}}>
|
||
<span className="chip chip-warm" style={{ background: 'rgba(255,255,255,0.85)' }}>{a.tag}</span>
|
||
<span style={{ fontSize: 28, lineHeight: 1 }}>{a.emoji}</span>
|
||
</div>
|
||
<div style={{ padding: 12 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', lineHeight: 1.3, marginBottom: 6, minHeight: 34 }}>{a.title}</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>{a.author} · {a.mins} мин</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function HomeListScreen({ nav }) {
|
||
const { doctors, appointments, clinic } = CLINIC_DATA;
|
||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||
const items = [
|
||
{ id: 'book', icon: I.plus, title: 'Записаться на приём', sub: 'ЛОР, сурдолог, фониатр', tint: 'var(--c-primary-darker)', bg: 'var(--c-primary-100)', cta: true, go: 'booking-specs' },
|
||
{ id: 'appt', icon: I.calendar, title: 'Мои приёмы', sub: `${appointments.filter(a=>a.status==='upcoming').length} предстоящих · ${appointments.filter(a=>a.status==='past').length} прошедших`, go: 'appts' },
|
||
{ id: 'card', icon: I.file, title: 'Медицинская карта', sub: 'История, результаты, заключения', go: 'medcard' },
|
||
{ id: 'results', icon: I.doc, title: 'Анализы и обследования', sub: '5 результатов · 1 в работе', go: 'results' },
|
||
{ id: 'telemed', icon: I.video, title: 'Видеоконсультация', sub: 'Онлайн с ЛОР-врачом', go: 'telemed' },
|
||
{ id: 'audio', icon: I.hearing, title: 'Тест слуха', sub: 'Аудиограмма за 3 минуты', go: 'audiotest' },
|
||
{ id: 'recovery', icon: I.shield, title: 'Восстановление', sub: 'Септопластика · день 6', go: 'recovery' },
|
||
{ id: 'chat', icon: I.chat, title: 'Чат с врачом', sub: '2 непрочитанных', badge: 2, go: 'chat' },
|
||
];
|
||
return (
|
||
<div style={{ paddingBottom: 100 }}>
|
||
<div style={{ padding: '8px 20px 16px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
||
<div>
|
||
<div className="sub">Здравствуйте,</div>
|
||
<div style={{ fontSize: 20, fontWeight: 700 }}>Анна Сергеевна</div>
|
||
</div>
|
||
<button onClick={() => nav.push('notifications')} className="press" style={{ width: 40, height: 40, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.bell size={18} />
|
||
</button>
|
||
</div>
|
||
{upcoming && upDoc && (
|
||
<div style={{ marginBottom: 18 }}>
|
||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a=>a.id===upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} compact />
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="card" style={{ margin: '0 16px', padding: 0, overflow: 'hidden' }}>
|
||
{items.map((it, i) => (
|
||
<React.Fragment key={it.id}>
|
||
<button onClick={() => nav.push(it.go)} className="press" style={{
|
||
width: '100%', display: 'flex', alignItems: 'center', gap: 14,
|
||
padding: '14px 16px', textAlign: 'left',
|
||
background: it.cta ? 'var(--c-primary-50)' : 'transparent',
|
||
}}>
|
||
<div style={{
|
||
width: 40, height: 40, borderRadius: 10,
|
||
background: it.bg || 'var(--c-primary-100)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
|
||
}}>
|
||
{React.createElement(it.icon, { size: 20, style: { color: it.tint || 'var(--c-primary-darker)' } })}
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 2 }}>{it.title}</div>
|
||
<div className="sub" style={{ fontSize: 12 }}>{it.sub}</div>
|
||
</div>
|
||
{it.badge && <span style={{ background: 'var(--c-accent)', color: '#fff', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 999 }}>{it.badge}</span>}
|
||
<I.chev size={16} style={{ color: 'var(--c-fg-4)' }} />
|
||
</button>
|
||
{i < items.length - 1 && <div style={{ height: 1, background: 'var(--c-divider)', marginLeft: 70 }} />}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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 (
|
||
<div style={{ paddingBottom: 100 }}>
|
||
{/* Greeting header */}
|
||
<div style={{ padding: '8px 20px 14px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<div className="sub">20 апреля, понедельник</div>
|
||
<div style={{ fontSize: 22, fontWeight: 700 }}>Здравствуйте, Анна</div>
|
||
</div>
|
||
<button onClick={() => nav.push('profile')} className="press">
|
||
<Avatar init="АС" size={42} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Health status hero */}
|
||
<div style={{ padding: '0 16px 16px' }}>
|
||
<div className="card" style={{
|
||
padding: 18,
|
||
background: 'linear-gradient(135deg, var(--c-primary-100), var(--c-warm-100))',
|
||
border: '1px solid var(--c-primary-200)',
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||
<span style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: .8, color: 'var(--c-primary-darker)', fontWeight: 700 }}>Ваше состояние</span>
|
||
<span style={{
|
||
padding: '4px 10px', borderRadius: 999,
|
||
background: 'rgba(255,255,255,0.75)', color: 'var(--c-success)',
|
||
fontSize: 11, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 5,
|
||
}}>
|
||
<span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--c-success)' }} />
|
||
{chronic.stage}
|
||
</span>
|
||
</div>
|
||
<div style={{ fontSize: 19, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 4 }}>{chronic.condition}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--c-fg-3)', marginBottom: 16 }}>
|
||
Наблюдение с {chronic.diagnosed} · {myDoctor.name.split(' ').slice(0, 2).join(' ')}
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.6)' }}>
|
||
<div>
|
||
<div style={{ fontFamily: 'var(--font-narrow)', fontSize: 26, fontWeight: 700, lineHeight: 1, color: 'var(--c-primary-darker)' }}>{chronic.daysSinceLastFlareup}</div>
|
||
<div style={{ fontSize: 10, color: 'var(--c-fg-3)', marginTop: 3 }}>дней без обострений</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontFamily: 'var(--font-narrow)', fontSize: 26, fontWeight: 700, lineHeight: 1, color: 'var(--c-primary-darker)' }}>{chronic.complianceScore}%</div>
|
||
<div style={{ fontSize: 10, color: 'var(--c-fg-3)', marginTop: 3 }}>комплаенс</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontFamily: 'var(--font-narrow)', fontSize: 26, fontWeight: 700, lineHeight: 1, color: 'var(--c-primary-darker)' }}>{chronic.flareupsThisYear}</div>
|
||
<div style={{ fontSize: 10, color: 'var(--c-fg-3)', marginTop: 3 }}>обострение в году</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Current tasks */}
|
||
<div style={{ padding: '0 20px 18px' }}>
|
||
<SectionHeader title="Задачи сегодня" pad="0 0 8px 0" action="История" onAction={() => nav.push('medcard')} />
|
||
<div className="card" style={{ padding: 0 }}>
|
||
{chronic.currentTasks.map((t, i, a) => {
|
||
const isDaily = t.type === 'daily';
|
||
return (
|
||
<React.Fragment key={t.id}>
|
||
<div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 14px' }}>
|
||
{isDaily ? (
|
||
<div style={{
|
||
width: 28, height: 28, borderRadius: 999, flexShrink: 0,
|
||
background: t.done ? 'var(--c-primary-darker)' : '#fff',
|
||
border: t.done ? 0 : '2px solid var(--c-border-strong)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
{t.done && <I.check size={16} style={{ color: '#fff' }} sw={3} />}
|
||
</div>
|
||
) : (
|
||
<div style={{
|
||
width: 28, height: 28, borderRadius: 8, flexShrink: 0,
|
||
background: 'var(--c-primary-100)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
<I.calendar size={14} style={{ color: 'var(--c-primary-darker)' }} />
|
||
</div>
|
||
)}
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{
|
||
fontSize: 14, fontWeight: 600,
|
||
color: isDaily && t.done ? 'var(--c-fg-3)' : 'var(--c-fg-1)',
|
||
textDecoration: isDaily && t.done ? 'line-through' : 'none',
|
||
}}>{t.text}</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>
|
||
{isDaily ? (t.streak > 0 ? `Серия: ${t.streak} дней` : 'Ежедневно') : `До ${t.nextDate}`}
|
||
</div>
|
||
</div>
|
||
{isDaily && t.streak > 0 && <span style={{ fontSize: 18 }}>🔥</span>}
|
||
{!isDaily && <I.chev size={15} style={{ color: 'var(--c-fg-4)' }} />}
|
||
</div>
|
||
{i < a.length - 1 && <div style={{ height: 1, background: 'var(--c-divider)', marginLeft: 54 }} />}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Promotion: ask AI or doctor */}
|
||
<div style={{ padding: '0 20px 18px' }}>
|
||
<SectionHeader title="Есть вопрос?" pad="0 0 8px 0" />
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||
<button onClick={() => nav.push('chat:ai')} className="press" style={{
|
||
padding: 14, borderRadius: 16,
|
||
background: 'linear-gradient(135deg, var(--c-primary-darker), var(--c-primary-dark))',
|
||
color: '#fff', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6,
|
||
}}>
|
||
<div style={{ fontSize: 26 }}>✨</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, marginBottom: 2 }}>Спросить помощника</div>
|
||
<div style={{ fontSize: 11, opacity: .85, lineHeight: 1.4 }}>Быстрый ответ круглосуточно</div>
|
||
</div>
|
||
</button>
|
||
<button onClick={() => nav.push('chat:doctor-syndaev')} className="press card" style={{
|
||
padding: 14, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6,
|
||
}}>
|
||
<Avatar init={myDoctor.init} size={32} />
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, marginBottom: 2 }}>Написать врачу</div>
|
||
<div className="sub" style={{ fontSize: 11, lineHeight: 1.4 }}>{myDoctor.name.split(' ').slice(0, 2).join(' ')}</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* History timeline */}
|
||
<div style={{ padding: '0 20px 18px' }}>
|
||
<SectionHeader title="История наблюдения" pad="0 0 8px 0" action="Вся карта" onAction={() => nav.push('medcard')} />
|
||
<div className="card" style={{ padding: '8px 0' }}>
|
||
{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 (
|
||
<div key={v.id} style={{ display: 'flex', gap: 14, padding: '10px 14px', alignItems: 'flex-start', position: 'relative' }}>
|
||
{!isLast && (
|
||
<div style={{
|
||
position: 'absolute', left: 27, top: 32, bottom: -6,
|
||
width: 2, background: 'var(--c-divider)',
|
||
}} />
|
||
)}
|
||
<div style={{
|
||
width: 28, height: 28, borderRadius: 999, flexShrink: 0,
|
||
background: c.bg, color: c.fg,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 11, fontWeight: 700,
|
||
position: 'relative', zIndex: 1,
|
||
}}>
|
||
{d.init}
|
||
</div>
|
||
<div style={{ flex: 1, paddingBottom: 4, minWidth: 0 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 2, lineHeight: 1.35 }}>{v.title}</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>{v.date} · {d.name.split(' ').slice(0, 2).join(' ')}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Upcoming appointment */}
|
||
{upcoming && upDoc && (
|
||
<div style={{ padding: '0 20px 18px' }}>
|
||
<SectionHeader title="Ближайший приём" pad="0 0 8px 0" />
|
||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a => a.id === upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} />
|
||
</div>
|
||
)}
|
||
|
||
{/* Recommendations */}
|
||
<div style={{ padding: '0 0 18px' }}>
|
||
<SectionHeader title="Рекомендации" />
|
||
<div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 20px 8px' }} className="noscroll">
|
||
{chronic.recommendations.map((r, i) => (
|
||
<div key={i} className="card" style={{
|
||
flexShrink: 0, width: 170, padding: 14,
|
||
}}>
|
||
<div style={{ fontSize: 28, marginBottom: 8, lineHeight: 1 }}>{r.icon}</div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, marginBottom: 3, lineHeight: 1.3 }}>{r.title}</div>
|
||
<div className="sub" style={{ fontSize: 11, lineHeight: 1.4 }}>{r.sub}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Book CTA */}
|
||
<div style={{ padding: '0 20px 18px' }}>
|
||
<button onClick={() => nav.push('booking-specs')} className="btn-p block">
|
||
<I.plus size={18} /> Записаться на осмотр
|
||
</button>
|
||
</div>
|
||
|
||
{/* Articles */}
|
||
<div style={{ padding: '0 0 8px' }}>
|
||
<SectionHeader title="Полезное чтение" action="Все" onAction={() => nav.push('articles')} />
|
||
<div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px 8px' }} className="noscroll">
|
||
{articles.slice(0, 3).map(a => (
|
||
<button key={a.id} onClick={() => nav.push('article:' + a.id)} className="press card" style={{
|
||
flexShrink: 0, width: 200, padding: 0, overflow: 'hidden', textAlign: 'left',
|
||
}}>
|
||
<div style={{
|
||
height: 80, background: a.hero,
|
||
display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: 10,
|
||
}}>
|
||
<span className="chip chip-warm" style={{ background: 'rgba(255,255,255,0.85)' }}>{a.tag}</span>
|
||
<span style={{ fontSize: 24, lineHeight: 1 }}>{a.emoji}</span>
|
||
</div>
|
||
<div style={{ padding: 12 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.3, marginBottom: 6, minHeight: 34 }}>{a.title}</div>
|
||
<div className="sub" style={{ fontSize: 11 }}>{a.mins} мин</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function HomeSplashScreen({ nav }) {
|
||
const { patient, doctors, appointments, articles } = CLINIC_DATA;
|
||
const firstName = patient.shortName.split(' ')[0];
|
||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||
const article = articles[0];
|
||
|
||
return (
|
||
<div style={{ paddingBottom: 100 }}>
|
||
<div style={{ padding: '8px 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<button onClick={() => nav.push('profile')} className="press" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<div style={{ width: 34, height: 34, borderRadius: 999, background: 'var(--c-primary-200)' }} />
|
||
<span style={{ fontSize: 16, fontWeight: 600, color: 'var(--c-fg-1)' }}>Главная</span>
|
||
</button>
|
||
<button onClick={() => nav.push('notifications')} className="press" style={{ width: 40, height: 40, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.bell size={22} style={{ color: 'var(--c-primary-darker)' }} />
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ padding: '4px 20px 14px' }}>
|
||
<h1 style={{ fontSize: 28, fontWeight: 800, lineHeight: 1.15, color: 'var(--c-fg-1)', margin: 0 }}>Добрый день, {firstName}!</h1>
|
||
</div>
|
||
|
||
<div style={{ padding: '0 20px 20px' }}>
|
||
<button onClick={() => nav.push('search')} className="press" style={{
|
||
width: '100%', display: 'flex', alignItems: 'center', gap: 12,
|
||
padding: '14px 16px', background: '#fff',
|
||
border: '1px solid var(--c-border)', borderRadius: 14,
|
||
textAlign: 'left',
|
||
}}>
|
||
<I.search size={18} style={{ color: 'var(--c-fg-3)' }} />
|
||
<span style={{ color: 'var(--c-fg-3)', fontSize: 15 }}>Поиск врача...</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ padding: '0 20px 8px' }}>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 10 }}>Записи на прием</div>
|
||
|
||
{upcoming && upDoc && (
|
||
<button onClick={() => nav.push('appt:' + upcoming.id)} className="press" style={{
|
||
width: '100%', textAlign: 'left',
|
||
background: 'var(--c-primary-50)',
|
||
border: '1px solid var(--c-primary-100)',
|
||
borderRadius: 16, padding: 16, marginBottom: 10,
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: .7, color: 'var(--c-primary-darker)' }}>
|
||
<span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--c-primary-darker)' }} />
|
||
БЛИЖАЙШАЯ ЗАПИСЬ
|
||
</span>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--c-primary-darker)', fontWeight: 700 }}>
|
||
<I.star size={12} /> Активно
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 10 }}>
|
||
<Avatar init={upDoc.init} size={48} />
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-fg-1)' }}>{upDoc.name}</div>
|
||
<div style={{ fontSize: 13, color: 'var(--c-primary-darker)', marginTop: 2 }}>{upDoc.spec.split(' · ')[0]}</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: '#fff', border: '1px solid var(--c-primary-100)', borderRadius: 10, fontSize: 13, fontWeight: 600 }}>
|
||
<I.calendar size={14} style={{ color: 'var(--c-primary-darker)' }} /> {upcoming.date}
|
||
</span>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: '#fff', border: '1px solid var(--c-primary-100)', borderRadius: 10, fontSize: 13, fontWeight: 600 }}>
|
||
<I.clock size={14} style={{ color: 'var(--c-primary-darker)' }} /> {upcoming.time}
|
||
</span>
|
||
</div>
|
||
<I.pin size={16} style={{ color: 'var(--c-primary-darker)', opacity: .6 }} />
|
||
</button>
|
||
)}
|
||
|
||
<button onClick={() => nav.set('appts')} className="press" style={{
|
||
width: '100%', textAlign: 'left',
|
||
background: 'var(--c-primary-50)',
|
||
border: '1px solid var(--c-primary-100)',
|
||
borderRadius: 16, padding: 16, marginBottom: 10,
|
||
display: 'flex', gap: 14, alignItems: 'center',
|
||
}}>
|
||
<div style={{ width: 54, height: 54, borderRadius: 999, background: 'var(--c-primary-darker)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||
<I.calendar size={24} style={{ color: '#fff' }} />
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: .7, color: 'var(--c-primary-darker)', marginBottom: 4 }}>МОИ ПРИЕМЫ</div>
|
||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 2 }}>Ближайшие приемы</div>
|
||
<div style={{ fontSize: 12, color: 'var(--c-fg-3)', lineHeight: 1.35 }}>Просмотрите ваши предстоящие прием</div>
|
||
</div>
|
||
</button>
|
||
|
||
<button onClick={() => nav.push('booking-specs')} className="press" style={{
|
||
width: '100%', textAlign: 'left', position: 'relative', overflow: 'hidden',
|
||
background: 'var(--c-warm-100)',
|
||
borderRadius: 16, padding: 16, marginBottom: 18,
|
||
}}>
|
||
<div style={{ position: 'absolute', top: -20, right: -20, width: 90, height: 90, borderRadius: 999, background: 'rgba(255,255,255,0.35)' }} />
|
||
<div style={{ position: 'absolute', top: 30, right: 30, width: 40, height: 40, borderRadius: 999, background: 'rgba(255,255,255,0.25)' }} />
|
||
<div style={{ position: 'relative', display: 'flex', gap: 14, alignItems: 'center', marginBottom: 14 }}>
|
||
<div style={{ width: 48, height: 48, borderRadius: 999, background: 'var(--c-warm-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||
<I.calendar size={22} style={{ color: '#fff' }} />
|
||
</div>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: 'var(--c-fg-1)' }}>Записаться на прием</div>
|
||
</div>
|
||
<div style={{ position: 'relative', padding: 12, background: '#fff', borderRadius: 12, textAlign: 'center', fontSize: 14, fontWeight: 600, color: 'var(--c-fg-1)' }}>
|
||
Выбрать удобное время
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ padding: '0 20px 8px' }}>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 10 }}>Услуги и консультации</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10, marginBottom: 18 }}>
|
||
<SplashTile icon={I.calendar} sub="Записаться на прием" main="К врачу" onClick={() => nav.push('booking-specs')} />
|
||
<SplashTile icon={I.chat} sub="Связаться с врачом в" main="Чате" onClick={() => nav.set('chat')} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: '0 20px 20px' }}>
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 10 }}>Полезная информация</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
|
||
<SplashTile icon={I.doc} sub="Статья" main={article.title.split(' ').slice(0,2).join(' ')} onClick={() => nav.push('article:' + article.id)} />
|
||
<SplashTile icon={I.file} sub="Все" main="Статьи" onClick={() => nav.push('articles')} />
|
||
<SplashTile icon={I.shield} sub="Информация" main="Цены" onClick={() => nav.push('prices')} />
|
||
<SplashTile icon={I.phone} sub="Информация" main="Контакты" onClick={() => nav.push('contacts')} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SplashTile({ icon: Ic, sub, main, onClick }) {
|
||
return (
|
||
<button onClick={onClick} className="press" style={{
|
||
background: 'var(--c-primary-50)',
|
||
border: '1px solid var(--c-primary-100)',
|
||
borderRadius: 16, padding: 16,
|
||
textAlign: 'left', minHeight: 120,
|
||
display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 12,
|
||
}}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--c-primary-darker)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<Ic size={20} style={{ color: '#fff' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 12, color: 'var(--c-primary-darker)', marginBottom: 2 }}>{sub}</div>
|
||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-fg-1)' }}>{main}</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function HomeFeedScreen({ nav }) {
|
||
const { doctors, appointments, clinic, articles, recovery } = CLINIC_DATA;
|
||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||
return (
|
||
<div style={{ paddingBottom: 100 }}>
|
||
<div style={{ padding: '8px 20px 12px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<div className="sub">18 апреля, суббота</div>
|
||
<div style={{ fontSize: 24, fontWeight: 700 }}>Как Ваше самочувствие?</div>
|
||
</div>
|
||
<button onClick={() => nav.push('profile')} className="press">
|
||
<Avatar init="АС" size={42} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ padding: '0 16px' }}>
|
||
<button onClick={() => nav.push('recovery')} className="press card" style={{
|
||
width: '100%', textAlign: 'left', padding: 18, marginBottom: 14,
|
||
background: 'linear-gradient(135deg,#E3F4F2,#F2FAF9)',
|
||
border: '1px solid var(--c-primary-200)',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-primary-darker)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.shield size={18} style={{ color: '#fff' }} />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontWeight: 700, fontSize: 14 }}>Восстановление</div>
|
||
<div className="sub" style={{ fontSize: 12 }}>{recovery.op}</div>
|
||
</div>
|
||
</div>
|
||
<span className="chip">День {recovery.dayNow} из {recovery.totalDays}</span>
|
||
</div>
|
||
<div style={{ height: 6, background: 'rgba(255,255,255,0.7)', borderRadius: 999, overflow: 'hidden', marginBottom: 12 }}>
|
||
<div style={{ width: `${recovery.dayNow/recovery.totalDays*100}%`, height: '100%', background: 'var(--c-primary-darker)', borderRadius: 999 }} />
|
||
</div>
|
||
<div style={{ fontSize: 13, color: 'var(--c-fg-2)' }}>
|
||
Сегодня: <strong>осмотр хирурга, снятие корочек</strong>
|
||
</div>
|
||
</button>
|
||
|
||
<div className="card" style={{ padding: 14, marginBottom: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
|
||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-warning-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<I.pill size={20} style={{ color: 'var(--c-warning)' }} />
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontSize: 14, fontWeight: 700 }}>Амоксиклав 625 мг</div>
|
||
<div className="sub" style={{ fontSize: 12 }}>Принять в 20:00 — через 2 часа</div>
|
||
</div>
|
||
<button className="btn-s" style={{ padding: '8px 12px', fontSize: 13 }}>Принял</button>
|
||
</div>
|
||
|
||
{upcoming && upDoc && (
|
||
<>
|
||
<SectionHeader title="Ближайший приём" pad="4px 4px 8px" />
|
||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a=>a.id===upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} />
|
||
</>
|
||
)}
|
||
|
||
<button onClick={() => nav.push('booking-specs')} className="press" style={{
|
||
width: '100%', marginTop: 14, padding: '14px 18px', borderRadius: 16,
|
||
background: 'var(--c-accent)', color: '#fff', fontWeight: 700, fontSize: 15,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
|
||
}}>
|
||
<I.plus size={20} /> Записаться на приём
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ padding: '18px 20px 8px' }}>
|
||
<SectionHeader title="Полезно прочитать" action="Все" onAction={() => nav.push('articles')} pad="0 0 0 0" />
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
{articles.slice(0,3).map((a)=>(
|
||
<button key={a.id} onClick={() => nav.push('article:' + a.id)} className="press card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 14, textAlign: 'left' }}>
|
||
<div style={{ width: 56, height: 56, borderRadius: 12, background: a.hero, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>
|
||
{a.emoji}
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontSize: 11, color: 'var(--c-primary-dark)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, marginBottom: 3 }}>{a.tag}</div>
|
||
<div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.3, marginBottom: 3 }}>{a.title}</div>
|
||
<div className="sub" style={{ fontSize: 12 }}>{a.author} · {a.mins} мин</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|