feat(web): screens from docs/mock — focus flow, today, meds, doctor, profile

- /flow renders the dialog engine's current step as a mock screen (consent, age, onboarding and scales with progress, mood 0–10, free text, dose reminder, crisis with hotlines and breathing, safety plan), so every engine scenario gets the design without duplicating its logic - today / meds / doctor / profile / messages tabs; navy sidebar and emergency rail on desktop, emergency block and tab bar on phones - API: GET /me/{token}/today (today's doses, week marks, next visit, demo clock time); demo ЕМИАС sign-in seeds the persona's synthetic profile and prescription from the dashboard fixtures Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 08:11:45 +03:00
parent b8a93ce9d4
commit b4b1bc51c8
28 changed files with 3795 additions and 1770 deletions
@@ -0,0 +1,73 @@
+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>
+        ) : (
+          <>
+            <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>
+    </AppShell>
+  );
+}