- focus screens: question and context on the left, answers on the right in one wide card; consent text and the 0–10 scale in one wide column - today: dashboard with tasks, this week's doses and quick actions side by side; meds / doctor / profile in two-column grids; welcome gets «Как это работает» steps - fix: 0–10 scale no longer overflows narrow containers Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
|
|
import { AppShell, Notice } from "../components/AppShell";
|
|
import { Icon, type IconName } from "../components/Icon";
|
|
import { ru } from "../content/ru";
|
|
import { useDialog } from "../dialog/DialogContext";
|
|
import { humanDate, useToday } from "./useToday";
|
|
|
|
// F1 / F2 · Врач: следующий визит и связь с врачом (действия выполняет движок диалога)
|
|
export function Doctor() {
|
|
const t = ru.doctor;
|
|
const navigate = useNavigate();
|
|
const dialog = useDialog();
|
|
const { plan } = useToday();
|
|
|
|
const go = (button: string, label: string) =>
|
|
void dialog.send({ type: "button", button }, label).then((ok) => ok && navigate("/flow"));
|
|
|
|
const actions: { button: string; label: string; icon: IconName }[] = [
|
|
{ button: "menu:contact_doctor", label: t.write, icon: "message" },
|
|
{ button: "menu:visit", label: t.earlier, icon: "calendar" },
|
|
{ button: "safety_plan", label: t.plan, icon: "shield" },
|
|
];
|
|
|
|
return (
|
|
<AppShell>
|
|
<div className="stack">
|
|
<header className="head">
|
|
<h1 className="h1">{t.title}</h1>
|
|
</header>
|
|
|
|
{plan && !plan.has_doctor ? (
|
|
<Notice>{t.noDoctor}</Notice>
|
|
) : (
|
|
<div className="cols">
|
|
<section className="card-list" aria-label={t.visit}>
|
|
<div className="card-list__row">
|
|
<span className="tile-icon tile-icon--blue">
|
|
<Icon name="calendar" />
|
|
</span>
|
|
<span>
|
|
<span className="row-card__sub">{t.visit}</span>
|
|
<span className="row-card__title">{plan?.next_visit ? humanDate(plan.next_visit) : t.visitNone}</span>
|
|
</span>
|
|
</div>
|
|
<div className="card-list__row">
|
|
<span className="tile-icon tile-icon--blue">
|
|
<Icon name="doctor" />
|
|
</span>
|
|
<span className="row-card__title">{t.attending}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="stack stack--sm">
|
|
{actions.map((a) => (
|
|
<button key={a.button} type="button" className="row-card" onClick={() => go(a.button, a.label)} disabled={dialog.busy}>
|
|
<span className="tile-icon">
|
|
<Icon name={a.icon} />
|
|
</span>
|
|
<span className="row-card__text">
|
|
<span className="row-card__title">{a.label}</span>
|
|
</span>
|
|
<Icon name="chevronRight" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Notice>{t.writeNote}</Notice>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|