fix(login): обратный отсчёт кода + возврат на оплату после входа

Жалоба: по ссылке на оплату жмёшь «получить код» — «слишком часто».
- на шаге кода кнопка «отправить ещё раз» с отсчётом (60с, синхронно с
  бэкендом); на 429 ведём отсчёт по Retry-After и не пугаем
- кнопка «Получить код» блокируется на время кулдауна
- RequireAuth запоминает путь (ссылку на оплату); после входа по коду и
  через Telegram возвращаем туда, а не на баланс

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitignore

@@ -38,3 +38,4 @@ Thumbs.db
 # IDE
 .idea/
 .vscode/
+.superpowers/

docs/superpowers/specs/2026-06-18-premium-driver-pwa-design.md

@@ -0,0 +1,68 @@
+# Премиум Водитель — PWA (дизайн)
+
+**Дата:** 2026-06-18
+**Статус:** дизайн согласован (брейншторм + визуальный компаньон). Код не начат.
+**Цель:** PWA-приложение водителя «Премиум Водитель» — вход по телефону (код через TG/MAX), просмотр баланса (счета из CRM-леджера), пополнение через Т-Банк (СБП/карта), история пополнений. Поверхность для уже построенного бэкенда (Фаза 1 платежей + авторизация водителя в `crm2/app/modules/payments`).
+
+## Размещение и стек
+- Новый PWA — **сиблинг** `PremiumDriverApp/driver-pwa/frontend/` (рядом с `mechanic-pwa/`), на том же стеке: **React + Vite + vite-plugin-pwa + TypeScript + Tailwind + @tanstack/react-query + ky + zod + react-router-dom + react-hook-form + zustand + sonner (тосты) + lucide-react + vitest**. Структура `src/{api,components,pages,hooks,lib,store}` как у mechanic-pwa.
+- Хостинг: **app.pptaxi.ru** (статика + Caddy; деплой как у mechanic — build → dist → tar/rsync, см. mechanic deploy flow).
+- Имя приложения (везде в UI, манифест PWA, заголовок): **«Премиум Водитель»**.
+
+## Визуальный язык — Cream Minimal
+- Палитра (без жёлтого): фон `#F3EEE3` (cream), карточка/поверхность `#FBF8F1`, линия-разделитель `#E4DCCB`, чернила `#1C1B19`, вторичный текст `#7C7361`/opacity. Кнопки primary — тёмные `#1C1B19` с текстом `#F3EEE3`. Долг (минус) `#C0493A`, плюс/депозит `#3B6E4A`.
+- Типографика: **Inter** (один шрифт), без эмодзи. Иконки — lucide (тонкие, монохром).
+- Скругления 12–16px, тонкие 1px-границы, мягкие тени минимально. Крупные тап-таргеты (мобайл-фёрст). App-like / edit-first: минимум лишних кнопок, экран сам реагирует.
+
+## Экраны (MVP)
+1. **Вход.**
+   - Шаг 1: поле телефона `+7 ___ ___-__-__` → «Получить код». → `POST /api/driver/auth/request {phone}`.
+   - Если ответ `code_sent` → шаг 2: ввод кода (свой цифровой кейпад) → `POST /api/driver/auth/verify {phone, code}` → сохраняем driver JWT → на «Баланс».
+   - Если ответ `onboarding` → экран «Подключите бота»: две кнопки **Telegram** / **MAX** (открывают `deep_links.tg`/`.max`); подсказка «нажмите Старт у бота, затем вернитесь и запросите код снова». Кнопка «Я подключил — запросить код».
+2. **Баланс** (компоновка B: hero + список).
+   - Шапка: «Премиум Водитель» + инициалы водителя.
+   - **Hero-блок «Общий долг»** — крупная сумма (сумма отрицательных счетов).
+   - **Список счетов** (bucket из `/api/driver/balance`): название + подпись (марка/госномер для аренды, «N неоплаченных» для штрафов) + значение (минус — красный, плюс — зелёный).
+   - Кнопка **«Пополнить»** (primary). Тап по счёту/кнопке → «Пополнение» с предвыбранным счётом.
+   - Внизу/в меню: «История», «Выйти».
+3. **Пополнение** (компоновка C: свой кейпад).
+   - Заголовок «Пополнить · <счёт>». Крупная сумма. Строка «к оплате X ₽ (комиссия Y ₽)» — пересчёт на лету по ставке (получаем из ответа `/topup` или показываем оценку и уточняем).
+   - **Свой цифровой кейпад** (1–9, 0, ·, ⌫) — без системной клавиатуры; крупные клавиши. Быстрые суммы 500/1000/2000 (чипы).
+   - Сегмент **СБП / Картой**.
+   - Кнопка **«Оплатить»** → `POST /api/driver/topup {bucket, amount, method}` → получаем `{order_id, pay_url}`.
+4. **Оплата / статус** (вариант A: авто-статус, без QR).
+   - Иконка «СБП», сумма к оплате, кнопка **«Оплатить через СБП»** (или «Оплатить картой») → открывает `pay_url` (СБП deep-link `qr.nspk.ru/...` → приложение банка; карта → форма `pay.tbank.ru`). **QR не показываем, «оплата с другого устройства» убрана** — водитель платит на том же телефоне через приложение банка.
+   - Под кнопкой — авто-статус «Ожидаем оплату…» (спиннер). Приложение **опрашивает статус** платежа; при `PAID` → экран **«Оплачено»** (зелёная галочка, «<счёт> пополнен на N ₽») → кнопка «На главную» (баланс перезапрашивается).
+5. **История пополнений.**
+   - Список из `driver_payments` водителя: дата, счёт, сумма, статус (Оплачено/Ожидает/Отклонён), способ. Пусто → «Пока нет пополнений».
+6. **Выход** — очистка JWT, возврат на «Вход».
+
+## Поток данных / API (crm2 BFF, префикс `/api`)
+Готово (Фаза 1 + авторизация):
+- `POST /driver/auth/request {phone}` → `{status:"code_sent",channel}` | `{status:"onboarding",deep_links:{tg,max}}`
+- `POST /driver/auth/verify {phone, code}` → `{token, driver_id}`
+- `GET  /driver/balance` (Bearer) → `{accounts:[{bucket, balance}]}`
+- `POST /driver/topup {bucket, amount, method}` (Bearer) → `{order_id, pay_url, commission, total}`
+
+**Нужно добавить на бэкенде (зависимость этого PWA — отдельные backend-задачи):**
+- `GET /driver/payments` (Bearer) → история пополнений водителя (из `driver_payments`: order_id, bucket, amount, commission, method, status, created_at, paid_at).
+- `GET /driver/payment/{order_id}` (Bearer) → `{status}` для авто-опроса статуса оплаты (NEW/FORM/PAID/REJECTED). (Альтернатива: опрашивать `/driver/balance` и сравнивать — но явный статус надёжнее и показывает «Оплачено».)
+- (Опц.) В `/driver/topup` вернуть и `commission_rate`, чтобы кейпад считал «к оплате» локально до запроса.
+
+## Сессия / клиент
+- driver JWT (typ='driver', 30 дн) хранится в `localStorage`; `ky`-инстанс добавляет `Authorization: Bearer`. На 401 → разлогин (на «Вход»).
+- `@tanstack/react-query` для balance/history (кэш + рефетч); `zod` валидирует ответы; `zustand` — сессия (token, driver_id). Тосты ошибок — `sonner`.
+- База API из env (`VITE_API_BASE`, по умолчанию `https://crm.pptaxi.ru/api`). CORS: бэкенд должен разрешить origin `https://app.pptaxi.ru` для `/api/driver/*` (backend-задача).
+
+## PWA
+- `vite-plugin-pwa`: manifest (name «Премиум Водитель», cream theme `#F3EEE3`, иконки 192/512, standalone, портрет), service worker (precache оболочки, network-first для API). Устанавливается на телефон без сторов (по ссылке app.pptaxi.ru → «На экран Домой»).
+
+## Обработка ошибок
+- Телефон не найден (404) → «Номер не найден. Обратитесь в парк.» Неверный код (401) → «Неверный или просроченный код» + повтор. Платёж не создан → тост + остаёмся на «Пополнении». Авто-опрос: таймаут N минут → «Не дождались оплаты» + кнопка «Проверить ещё раз»/«Вернуться».
+
+## Тестирование
+- vitest + @testing-library/react: рендер экранов, кейпад (ввод/⌫/быстрые суммы, пересчёт «к оплате»), форма телефона/кода, маппинг ответов API (zod-схемы), guard приватных роутов (нет токена → «Вход»), авто-статус (мок таймера/опроса → success). API мокается (msw или ky-mock), без сети.
+
+## Скоуп / порядок
+MVP-экраны: Вход (+онбординг) · Баланс · Пополнение · Оплата/статус · История · Выход. **Вне MVP:** push-уведомления, вывод средств, профиль/настройки, мультиязычность.
+Порядок сборки (для плана): каркас приложения+PWA+API-клиент+сессия → Вход/онбординг → Баланс → Пополнение(кейпад) → Оплата/авто-статус → История → деплой app.pptaxi.ru. Бэкенд-зависимости (`/driver/payments`, `/driver/payment/{order_id}`, CORS) — отдельные мелкие задачи в crm2 (сделать до/параллельно соответствующим экранам).

driver-pwa/frontend/.env.example

@@ -0,0 +1,26 @@
+# Премиум Водитель (PWA) — переменные сборки.
+# Как поднять фронт локально — README.md рядом с этим файлом.
+
+# --- VITE_API_BASE: база API для ky (src/api/client.ts) ----------------------
+#
+# Боевой сборке задавать её НЕ обязательно: если переменной нет, client.ts
+# подставляет https://crm.pptaxi.ru/api. Поэтому строка ниже закомментирована
+# намеренно — скопированный в .env боевой адрес сборке ничего не добавляет,
+# а локальную разработку ломает: значение из файла приоритетнее дев-дефолта,
+# и `npm run dev` начнёт бить в боевой терминал вместо локального бэкенда.
+#
+#VITE_API_BASE=https://crm.pptaxi.ru/api
+
+# --- Локальная разработка ----------------------------------------------------
+#
+# Копировать этот файл в .env не нужно. `npm run dev` сам ставит
+# VITE_API_BASE=/api и проксирует /api на локальный бэкенд (vite.config.ts),
+# то есть запрос идёт с того же origin, что и страница, и CORS не участвует —
+# CORS_ALLOW_LOCALHOST в backend/.env для этого фронта не нужен.
+#
+# Свой адрес бэкенда, поход в API мимо прокси, PowerShell-вариант команд —
+# в README.md. Рецепты держим в одном месте: разъедутся — поверят не тому.
+#
+# ВНИМАНИЕ: crm.pptaxi.ru — боевой терминал Т-Банка и боевая касса АТОЛ.
+# Пополнение, сделанное «просто посмотреть», — это реальные деньги водителя,
+# реальный чек 54-ФЗ и реальная проводка в леджере.

driver-pwa/frontend/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.env
+.env.local
+*.tsbuildinfo

driver-pwa/frontend/README.md

@@ -0,0 +1,148 @@
+# Премиум Водитель — PWA водителя
+
+React + Vite + TypeScript. Прод: **https://app.pptaxi.ru**.
+Бэкенд — модуль `payments` в Premium CRM (`https://crm.pptaxi.ru/api`,
+репозиторий `crm2`, `backend/app/modules/payments/`).
+
+## Как поднять локально
+
+```bash
+npm install
+npm run dev            # http://localhost:5174
+```
+
+Отдельно поднимается бэкенд `crm2` на **127.0.0.1:8000** (тот же порт, что в
+`backend/Dockerfile`). Больше настраивать нечего: dev-сервер сам подставляет
+`VITE_API_BASE=/api` и проксирует `/api` на бэкенд — см. `vite.config.ts`.
+
+**Почему через прокси, а не «разрешить localhost в CORS бэкенда».** Прокси
+делает запрос ОДНОГО происхождения со страницей (`http://localhost:5174/api/…`),
+поэтому CORS в разработке не участвует вообще. Боевой список origin'ов на
+бэкенде остаётся закрытым, а `CORS_ALLOW_LOCALHOST=true` в `backend/.env` для
+этого фронта включать не надо. (Раньше рецепт с `CORS_ALLOW_LOCALHOST` тут и не
+работал: прокси не было, и фронт по умолчанию уходил на боевой домен, а не на
+локальный бэкенд.)
+
+Сервис-воркер в режиме разработки не регистрируется (`devOptions` у
+`vite-plugin-pwa` по умолчанию выключены) — старый кэш прод-версии в дев не
+лезет.
+
+### Бэкенд не на `127.0.0.1:8000`
+
+```bash
+VITE_API_TARGET=http://127.0.0.1:8090 npm run dev
+```
+
+В PowerShell инлайн-префикса `VAR=... команда` нет — переменную ставят отдельно:
+
+```powershell
+$env:VITE_API_TARGET="http://127.0.0.1:8090"; npm run dev
+```
+
+Имя переменной то же, что в CRM (`crm2/frontend/vite.config.ts`), — рецепт один
+на оба фронта.
+
+### Ходить в API напрямую, мимо прокси
+
+`.env.local` (в git не попадает):
+
+```
+VITE_API_BASE=http://127.0.0.1:8000/api
+```
+
+Своя настройка приоритетнее дев-дефолта — специально, чтобы `npm run dev` её не
+перебивал. Для похода в чужой origin бэкенду понадобится
+`CORS_ALLOW_LOCALHOST=true` в `backend/.env` и рестарт.
+
+> ⚠️ `crm.pptaxi.ru` — боевой терминал Т-Банка и боевая касса АТОЛ. Пополнение,
+> сделанное «просто посмотреть», — это реальные деньги водителя, реальный чек
+> 54-ФЗ и реальная проводка в леджере. Поэтому прокси по умолчанию смотрит в
+> локальный бэкенд, а не в прод.
+
+## Проверки
+
+```bash
+npx tsc -b             # типы
+npm test               # vitest run
+```
+
+`npx tsc --noEmit` **без `-b`** здесь всегда зелёный и ничего не значит:
+корневой `tsconfig.json` — solution-файл (`files: []` + `references`), под него
+не попадает ни один файл (`tsc --noEmit --listFiles` печатает пустоту). Типы
+живут в `tsconfig.app.json` (`src`) и `tsconfig.node.json` (конфиги +
+`dev-proxy.test.ts`), и до обоих добирается только `tsc -b`.
+
+## Сборка
+
+```bash
+npm run build          # tsc -b && vite build → dist/
+```
+
+Дев-дефолт `VITE_API_BASE=/api` подставляется только при запущенном dev-сервере
+и в бандл не попадает: в собранном `assets/index-*.js` лежит
+`https://crm.pptaxi.ru/api` (проверено сборкой). Поэтому `VITE_API_BASE` боевой
+сборке задавать не обязательно — без неё `src/api/client.ts` подставляет ровно
+этот адрес.
+
+> ⚠️ `npm run preview` поднимает **уже собранный** бандл, а база в нём
+> абсолютная: запросы уходят на боевой `crm.pptaxi.ru` мимо прокси dev-сервера.
+> Смотреть локальные правки — только `npm run dev`.
+
+Куда выкладывается `dist/` — в плане проекта:
+`../../docs/superpowers/plans/2026-06-18-premium-driver-pwa.md`, раздел
+«Deployment notes»: статика на `app.pptaxi.ru`, Caddy с фолбэком на `index.html`.
+
+## Кто может войти и как смотреть чужой экран
+
+> **Запущено 22.08.2026: вход открыт всем водителям.** Список номеров ниже пуст,
+> то есть гейт выключен. Раздел оставлен как инструкция на случай, если вход
+> снова понадобится сузить — например под обкатку следующей крупной правки.
+
+### 1. Вход только по списку номеров (сейчас выключено)
+
+Переменная бэкенда (`crm2/backend/.env`, читается в `app/config.py`):
+
+```
+DRIVER_APP_ALLOWED_PHONES=+7 (914) 123-45-67, 79990001122
+```
+
+Разделители — запятая, точка с запятой, перенос строки (пробел разделителем не
+считается: номер вписывают в привычном виде). Сверяются последние 10 цифр.
+**Пусто — гейт выключен, вход открыт всем водителям.**
+
+Проверка стоит в единственной воронке выдачи токена
+(`modules/payments/driver_auth.create_driver_token_for`), поэтому закрыты сразу
+все пять путей входа: код в бот, кнопка «Войти через Telegram», колбэки своего
+бота и два аварийных отката на n8n. Бот отвечает человеку текстом, остальные
+пути — 403. Логика гейта: `modules/payments/login_gate.py`.
+
+### 2. Просмотр от лица водителя (сотрудник)
+
+На экране входа внизу — «Вход для сотрудника» (`/dev`): логин и пароль **учётки
+CRM**, при включённой двухфакторке спросит код. Дальше поиск по ФИО, телефону
+или id — и приложение открывается от лица выбранного водителя.
+
+* Токен помечен claim'ом `imp`, живёт 8 часов (обычный водительский — 30 дней).
+* Гейт — `is_admin` в CRM. Каждая выдача пишется в аудит (`driver_app.impersonate`).
+* Кнопка «Отозвать доступ» в CRM гасит и просмотр сотрудника — поколение общее.
+* Гейт обкатки на этот путь не распространяется: смотреть надо как раз на
+  водителей, которых в allowlist нет.
+
+Пока просмотр действует, сверху на всех экранах висит плашка «Смотрю как …» со
+ссылкой на вкладку **«Отладка»** (`/debug`, водителю недоступна):
+
+* от чьего лица открыт экран и кнопка сменить водителя;
+* `driver_id`, режим, сотрудник, когда истекает токен, адрес API, коммит и время
+  сборки, состояние сети;
+* журнал последних 40 ответивших запросов (метод, путь, статус, миллисекунды);
+* сброс кэша сервис-воркера с перезагрузкой — лечит «правка не приехала»;
+* выходы: из просмотра, из учётки сотрудника.
+
+### Деньги под просмотром: учебный платёж
+
+Пополнение под `imp`-токеном **не идёт в банк**. Проверки суммы, категории и
+расчёт комиссии настоящие, а вместо Init на терминале заводится учебный заказ в
+Redis (`modules/payments/mock_pay.py`, префикс `mock-`, час жизни). Экран
+`/mock-pay/:orderId` даёт выбрать, что «ответит» банк — оплачено, отказ,
+истёкший счёт, возврат, — и настоящий экран оплаты разбирает эти статусы своим
+боевым кодом. В `driver_payments` не попадает ни строки, чек 54-ФЗ не пробивается.

driver-pwa/frontend/dev-proxy.test.ts

@@ -0,0 +1,103 @@
+// @vitest-environment node
+/**
+ * Локальная разработка PWA водителя.
+ *
+ * Гейт CORS на бэкенде (CORS_ALLOW_LOCALHOST, по умолчанию выключен) закрыл
+ * дыру, но заодно оставил этот фронт без рабочего дева: прокси не было, а
+ * client.ts по умолчанию уходит на боевой https://crm.pptaxi.ru/api — то есть
+ * «включи CORS_ALLOW_LOCALHOST» тут не помогало, запрос вообще не доходил до
+ * локального бэкенда.
+ *
+ * Тесты держат обе половины договорённости:
+ *   1) `npm run dev` доводит фронт до локального бэкенда сам, без правки .env;
+ *   2) боевая сборка от этого не меняется — относительная дев-база в бандл
+ *      попасть не может (в проде он живёт на app.pptaxi.ru, где /api нет).
+ *
+ * Конфиг резолвится по-настоящему (resolveConfig читает vite.config.ts и
+ * env-файлы) — иначе тест проверял бы не то, что увидит vite.
+ *
+ * Файл лежит рядом с vite.config.ts и НЕ называется vite.config.test.ts:
+ * в дефолтном exclude vitest есть `**\/{...,vite,...}.config.*`, под который
+ * такое имя попадает целиком — тест молча не запускался бы.
+ */
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import path from "path";
+import { fileURLToPath } from "url";
+import { resolveConfig } from "vite";
+
+const ROOT = path.dirname(fileURLToPath(import.meta.url));
+
+/** Обе переменные — process.env, и dev-дефолт их же и трогает: сохраняем. */
+const SAVED = {
+  base: process.env.VITE_API_BASE,
+  target: process.env.VITE_API_TARGET,
+};
+
+function restore(key: "VITE_API_BASE" | "VITE_API_TARGET", value: string | undefined): void {
+  if (value === undefined) delete process.env[key];
+  else process.env[key] = value;
+}
+
+beforeEach(() => {
+  delete process.env.VITE_API_BASE;
+  delete process.env.VITE_API_TARGET;
+});
+
+afterEach(() => {
+  restore("VITE_API_BASE", SAVED.base);
+  restore("VITE_API_TARGET", SAVED.target);
+});
+
+const resolve = (command: "serve" | "build", mode: "development" | "production") =>
+  resolveConfig({ root: ROOT, configFile: path.join(ROOT, "vite.config.ts"), logLevel: "silent" },
+                command, mode, mode);
+
+describe("dev-сервер доводит фронт до локального бэкенда", () => {
+  it("подставляет относительную базу — запрос идёт со своего origin, CORS не участвует", async () => {
+    const cfg = await resolve("serve", "development");
+    expect(cfg.env.VITE_API_BASE).toBe("/api");
+  });
+
+  it("проксирует /api на локальный бэкенд, а не на боевой домен", async () => {
+    const cfg = await resolve("serve", "development");
+    const proxy = cfg.server.proxy?.["/api"];
+    expect(typeof proxy === "object" && proxy.target).toBe("http://127.0.0.1:8000");
+  });
+
+  it("цель прокси переопределяется VITE_API_TARGET (стенд, тайлнет)", async () => {
+    process.env.VITE_API_TARGET = "http://127.0.0.1:8090";
+    const cfg = await resolve("serve", "development");
+    const proxy = cfg.server.proxy?.["/api"];
+    expect(typeof proxy === "object" && proxy.target).toBe("http://127.0.0.1:8090");
+  });
+
+  it("база и путь прокси — одно и то же", async () => {
+    // Две половины рецепта живут в разных местах конфига: базу подставляем в
+    // env, путь перечисляем в server.proxy. Разъедутся (например, база станет
+    // "/backend") — dev-сервер отдаст на этот путь index.html вместо ответа
+    // бэкенда, и падать будет уже в разборе JSON, далеко от причины.
+    const cfg = await resolve("serve", "development");
+    expect(Object.keys(cfg.server.proxy ?? {})).toContain(cfg.env.VITE_API_BASE);
+  });
+
+  it("не перебивает базу, заданную разработчиком", async () => {
+    process.env.VITE_API_BASE = "https://stand.example/api";
+    const cfg = await resolve("serve", "development");
+    expect(cfg.env.VITE_API_BASE).toBe("https://stand.example/api");
+  });
+});
+
+describe("боевая сборка остаётся боевой", () => {
+  it("дев-дефолт в сборку не течёт: base пустая → client.ts берёт прод-адрес", async () => {
+    const cfg = await resolve("build", "production");
+    expect(cfg.env.VITE_API_BASE).toBeUndefined();
+    expect(process.env.VITE_API_BASE).toBeUndefined();
+  });
+
+  it("ни один env-файл не подсовывает сборке относительную базу", async () => {
+    // Относительный /api в проде означал бы app.pptaxi.ru/api — такого нет.
+    // Ловит и коммит .env с дев-значением, и локальный .env на машине сборки.
+    const cfg = await resolve("build", "production");
+    expect(cfg.env.VITE_API_BASE).not.toBe("/api");
+  });
+});

driver-pwa/frontend/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#EEF1F5" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png" />
+    <!-- iOS манифест не читает: иконку «на экран Домой» он берёт только отсюда. -->
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <!-- iOS берёт подпись под иконкой отсюда, а не из манифеста. -->
+    <meta name="apple-mobile-web-app-title" content="Водитель" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
+    <title>Премиум Водитель</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

driver-pwa/frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "driver-pwa",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.51.0",
+    "ky": "^1.7.2",
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "sonner": "^1.5.0",
+    "zod": "^3.23.8",
+    "zustand": "^4.5.5"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^2.0.5",
+    "workbox-core": "^7.4.1",
+    "workbox-precaching": "^7.4.1"
+  }
+}

driver-pwa/frontend/postcss.config.js

@@ -0,0 +1 @@
+export default { plugins: { tailwindcss: {}, autoprefixer: {} } };

driver-pwa/frontend/public/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "Премиум Водитель",
+  "short_name": "Водитель",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#EEF1F5",
+  "theme_color": "#EEF1F5",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

driver-pwa/frontend/scripts/gen-icons.py

@@ -0,0 +1,63 @@
+"""Иконки приложения — тот же значок, что у сайта pptaxi.ru.
+
+Сайт отдаёт `favicon.svg`: красная скруглённая плитка --s-accent и белая «П».
+Повторяем её здесь, чтобы значок в браузере, на экране телефона и на сайте был
+один и тот же.
+
+Рисуем сами (Pillow), потому что тянуть растеризатор SVG ради одной плитки с
+буквой незачем. Сглаживание — сверхдискретизацией ×4.
+
+Запуск (нужен Pillow):
+    python scripts/gen-icons.py
+"""
+from pathlib import Path
+
+from PIL import Image, ImageDraw, ImageFont
+
+OUT = Path(__file__).resolve().parent.parent / "public" / "icons"
+ACCENT = (220, 38, 38, 255)   # --s-accent сайта
+PAPER = (255, 255, 255, 255)  # --s-paper
+SS = 4
+
+# Шрифт ищем среди системных: у сайта заголовки набраны Manrope, но ради одной
+# буквы тащить файл шрифта в репозиторий не стоит — берём ближайший гротеск.
+FONT_CANDIDATES = [
+    r"C:\Windows\Fonts\segoeuib.ttf",
+    r"C:\Windows\Fonts\arialbd.ttf",
+    "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+]
+
+
+def _font(size: int) -> ImageFont.FreeTypeFont:
+    for path in FONT_CANDIDATES:
+        if Path(path).exists():
+            return ImageFont.truetype(path, size)
+    raise SystemExit("не нашёл жирный шрифт для буквы")
+
+
+def compose(size: int, inset: float, radius_ratio: float = 0.22) -> Image.Image:
+    """inset — доля стороны под плитку. У maskable она меньше: Android режет
+    иконку по кругу, и плитка без запаса теряет углы."""
+    big = size * SS
+    img = Image.new("RGBA", (big, big), PAPER)
+    draw = ImageDraw.Draw(img)
+    pad = big * (1 - inset) / 2
+    box = (pad, pad, big - pad, big - pad)
+    draw.rounded_rectangle(box, radius=(box[2] - box[0]) * radius_ratio, fill=ACCENT)
+
+    letter = "П"
+    font = _font(int((box[3] - box[1]) * 0.72))
+    l, t, r, b = draw.textbbox((0, 0), letter, font=font)
+    draw.text(((box[0] + box[2] - (r - l)) / 2 - l,
+               (box[1] + box[3] - (b - t)) / 2 - t), letter, font=font, fill=PAPER)
+    return img.resize((size, size), Image.LANCZOS)
+
+
+if __name__ == "__main__":
+    OUT.mkdir(parents=True, exist_ok=True)
+    for name, size, inset in (("icon-192.png", 192, 1.0),
+                              ("icon-512.png", 512, 1.0),
+                              ("icon-maskable-512.png", 512, 0.72),
+                              ("apple-touch-icon.png", 180, 1.0)):
+        compose(size, inset).save(OUT / name)
+        print("собрано", name)

driver-pwa/frontend/src/App.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "./App";
+import { useAuth } from "@/store/auth";
+
+function renderAt(path: string) {
+  const qc = new QueryClient();
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("routing guard", () => {
+  beforeEach(() => useAuth.getState().clear());
+  it("redirects to login when no token", () => {
+    renderAt("/");
+    expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/App.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { useAuth } from "@/store/auth";
+import { useStaff } from "@/store/staff";
+import { setReturnTo } from "@/lib/returnTo";
+import { ImpersonationBar } from "@/components/ImpersonationBar";
+import { LoginPage } from "@/pages/LoginPage";
+import { TgWaitPage } from "@/pages/TgWaitPage";
+import { OnboardingPage } from "@/pages/OnboardingPage";
+import { BalancePage } from "@/pages/BalancePage";
+import { TopupPage } from "@/pages/TopupPage";
+import { PaymentPage } from "@/pages/PaymentPage";
+import { DevLoginPage } from "@/pages/DevLoginPage";
+import { DebugPage } from "@/pages/DebugPage";
+import { MockPayPage } from "@/pages/MockPayPage";
+import { FineDetailPage } from "@/pages/FineDetailPage";
+import { NotificationsPage } from "@/pages/NotificationsPage";
+import { markNotificationsRead } from "@/api/driver";
+
+function RequireAuth({ children }: { children: ReactNode }) {
+  const token = useAuth((s) => s.token);
+  const loc = useLocation();
+  if (token) return <>{children}</>;
+  // Запоминаем, куда шёл водитель (напр. ссылку на оплату), чтобы вернуть его
+  // туда после входа, а не на баланс.
+  setReturnTo(loc.pathname + loc.search);
+  return <Navigate to="/login" replace />;
+}
+
+/** Отладка существует только для сотрудника: либо он вошёл учёткой CRM, либо
+ * прямо сейчас смотрит от лица водителя. Обычному водителю адрес /debug ничего
+ * не даёт — его уводит на главную. */
+function RequireStaff({ children }: { children: ReactNode }) {
+  const impersonated = useAuth((s) => s.impersonated);
+  const staffToken = useStaff((s) => s.token);
+  return impersonated || staffToken ? <>{children}</> : <Navigate to="/" replace />;
+}
+
+/**
+ * Нажатие по пушу — единственный честный признак, что уведомление увидели.
+ * Сам воркер отметить его не может: токен водителя лежит в хранилище страницы,
+ * ему недоступном. Поэтому воркер добавляет к адресу `?n=<номер>`, а отмечает
+ * страница — и тут же убирает параметр, чтобы он не остался в истории.
+ */
+function MarkPushRead() {
+  const loc = useLocation();
+  const nav = useNavigate();
+
+  useEffect(() => {
+    const params = new URLSearchParams(loc.search);
+    const raw = params.get("n");
+    if (!raw) return;
+    const id = Number(raw);
+    if (Number.isFinite(id) && id > 0) void markNotificationsRead([id], "push");
+    params.delete("n");
+    const rest = params.toString();
+    nav(loc.pathname + (rest ? `?${rest}` : ""), { replace: true });
+  }, [loc.search, loc.pathname, nav]);
+
+  return null;
+}
+
+export default function App() {
+  return (
+    <div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
+      {/* Плашка живёт над маршрутами: чей экран открыт, видно на каждом из них,
+          а не только там, где про неё вспомнили. Сама решает, показываться ли. */}
+      <ImpersonationBar />
+      <MarkPushRead />
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/dev" element={<DevLoginPage />} />
+        <Route path="/tg-wait" element={<TgWaitPage />} />
+        <Route path="/onboarding" element={<OnboardingPage />} />
+        <Route path="/" element={<RequireAuth><BalancePage /></RequireAuth>} />
+        <Route path="/topup" element={<RequireAuth><TopupPage /></RequireAuth>} />
+        <Route path="/pay/:orderId" element={<RequireAuth><PaymentPage /></RequireAuth>} />
+        <Route path="/mock-pay/:orderId" element={<RequireAuth><MockPayPage /></RequireAuth>} />
+        <Route path="/fines/:fineId" element={<RequireAuth><FineDetailPage /></RequireAuth>} />
+        <Route path="/notifications" element={<RequireAuth><NotificationsPage /></RequireAuth>} />
+        <Route path="/debug" element={<RequireAuth><RequireStaff><DebugPage /></RequireStaff></RequireAuth>} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </div>
+  );
+}

driver-pwa/frontend/src/api/client.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { api } from "./client";
+import { useAuth } from "@/store/auth";
+
+/**
+ * Продление сеанса: бэкенд кладёт свежий токен в заголовок `X-Driver-Token`,
+ * приложение обязано молча его подменить. Без этого 30 дней жизни токена
+ * считались бы от входа, и раз в месяц водителя выкидывало бы на экран входа —
+ * при том, что пароля у него нет и «войти» означает сходить в бота за кодом.
+ */
+function answer(headers: Record<string, string> = {}) {
+  return vi.fn(async () =>
+    new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: { "Content-Type": "application/json", ...headers },
+    }));
+}
+
+describe("продление токена водителя", () => {
+  beforeEach(() => {
+    useAuth.setState({ token: "OLD", driverId: 7, impersonated: false, driverName: null, own: null });
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("подменяет токен, когда ответ принёс свежий", async () => {
+    vi.stubGlobal("fetch", answer({ "X-Driver-Token": "NEW" }));
+    await api.get("driver/balance").json();
+    expect(useAuth.getState().token).toBe("NEW");
+    expect(useAuth.getState().driverId).toBe(7);
+  });
+
+  it("без заголовка ничего не трогает", async () => {
+    vi.stubGlobal("fetch", answer());
+    await api.get("driver/balance").json();
+    expect(useAuth.getState().token).toBe("OLD");
+  });
+
+  it("не продлевает просмотр от лица водителя", async () => {
+    // Восемь часов просмотра — сознательный предел для чужого баланса на чужом
+    // ноутбуке. Бэкенд заголовок и не пришлёт, но полагаться на это нельзя:
+    // ответ на запрос, ушедший ДО начала просмотра, может прийти уже после.
+    useAuth.setState({ token: "IMP", driverId: 9, impersonated: true, driverName: "Петров" });
+    vi.stubGlobal("fetch", answer({ "X-Driver-Token": "NEW" }));
+    await api.get("driver/balance").json();
+    expect(useAuth.getState().token).toBe("IMP");
+  });
+
+  it("не воскрешает сеанс, закрытый пока запрос был в пути", async () => {
+    vi.stubGlobal("fetch", vi.fn(async () => {
+      useAuth.getState().clear();          // водитель нажал «выйти»
+      return new Response("{}", { status: 200, headers: { "X-Driver-Token": "NEW" } });
+    }));
+    await api.get("driver/balance").json();
+    expect(useAuth.getState().token).toBeNull();
+  });
+});

driver-pwa/frontend/src/api/client.ts

@@ -0,0 +1,66 @@
+import ky, { type KyInstance } from "ky";
+import { pushEntry, shortPath } from "@/lib/reqlog";
+import { useAuth } from "@/store/auth";
+
+export const API_BASE = import.meta.env.VITE_API_BASE ?? "https://crm.pptaxi.ru/api";
+
+/** Засечка времени на конкретный запрос. WeakMap — чтобы не держать Request'ы. */
+const started = new WeakMap<Request, number>();
+
+/**
+ * Заголовок, которым бэкенд отдаёт ПРОДЛЁННЫЙ токен водителя (см. driver_auth.py).
+ *
+ * Токен живёт 30 дней, и без продления они считались бы от входа: раз в месяц
+ * водителя выкидывало бы на экран входа, а «войти» для него означает сходить в
+ * бота за кодом. Начиная с пятого дня жизни токена бэкенд кладёт в ответ свежий,
+ * мы его молча подменяем — и 30 дней начинают считаться от последнего захода.
+ */
+const RENEWED_TOKEN_HEADER = "X-Driver-Token";
+
+/** Подменить токен на продлённый, если ответ его принёс. */
+function adoptRenewedToken(request: Request, response: Response): void {
+  const fresh = response.headers.get(RENEWED_TOKEN_HEADER);
+  if (!fresh) return;
+  const auth = useAuth.getState();
+  // Сеанс мог смениться, пока запрос был в пути: водитель вышел, сотрудник начал
+  // просмотр от чужого лица. Подменяем только тот токен, с которым сами ушли, —
+  // иначе продление чужого ответа вернёт закрытый сеанс к жизни.
+  if (auth.impersonated || auth.driverId == null) return;
+  if (request.headers.get("Authorization") !== `Bearer ${auth.token}`) return;
+  auth.setSession(fresh, auth.driverId);
+}
+
+export const api: KyInstance = ky.create({
+  prefixUrl: API_BASE,
+  timeout: 30_000,
+  retry: { limit: 2, methods: ["get"] },
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        started.set(request, performance.now());
+        const token = useAuth.getState().token;
+        if (token) request.headers.set("Authorization", `Bearer ${token}`);
+      },
+    ],
+    // В журнал попадают ОТВЕТИВШИЕ запросы, включая 4xx/5xx. Запрос, оборвавшийся
+    // без ответа (таймаут, пропавшая сеть), ky сюда не приносит — на экране
+    // отладки об этом сказано прямо, чтобы пустая строка не читалась как «дошло».
+    afterResponse: [
+      (request, _options, response) => {
+        pushEntry({
+          method: request.method,
+          path: shortPath(request.url),
+          status: response.status,
+          ms: Math.round(performance.now() - (started.get(request) ?? performance.now())),
+        });
+        adoptRenewedToken(request, response);
+      },
+    ],
+    beforeError: [
+      (error) => {
+        if (error.response?.status === 401) useAuth.getState().clear();
+        return error;
+      },
+    ],
+  },
+});

driver-pwa/frontend/src/api/driver.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { BalanceSchema, TopupSchema, PaymentsSchema, AuthRequestSchema, TgSessionSchema, TgPollSchema } from "./driver";
+
+describe("driver api schemas", () => {
+  it("parses balance", () => {
+    const v = BalanceSchema.parse({ accounts: [{ bucket: "Долг аренда", balance: -3200 }] });
+    expect(v.accounts[0].bucket).toBe("Долг аренда");
+  });
+  it("parses topup", () => {
+    const v = TopupSchema.parse({ order_id: "o1", pay_url: "https://x", commission: 52, total: 1052 });
+    expect(v.pay_url).toBe("https://x");
+  });
+  it("parses auth request onboarding + code_sent", () => {
+    expect(AuthRequestSchema.parse({ status: "code_sent", channel: "tg" }).status).toBe("code_sent");
+    const pair = { pair_session: "S", poll_secret: "SEC", confirm_code: "4217" };
+    const o = AuthRequestSchema.parse({ status: "onboarding", deep_links: { tg: "t", max: "m" }, ...pair });
+    expect(o.status === "onboarding" && o.deep_links.tg).toBe("t");
+    // prod: MAX bot not configured → backend omits `max`, must still parse (regression guard)
+    const tgOnly = AuthRequestSchema.parse({ status: "onboarding", deep_links: { tg: "t" }, ...pair });
+    expect(tgOnly.status === "onboarding" && tgOnly.deep_links.tg).toBe("t");
+  });
+  it("parses payments history", () => {
+    const v = PaymentsSchema.parse({ payments: [{ order_id: "o1", bucket: "b", amount: 100,
+      commission: 5.2, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: null }] });
+    expect(v.payments[0].status).toBe("PAID");
+  });
+});
+
+describe("tg verified-login schemas", () => {
+  it("parses tg session", () => {
+    const v = TgSessionSchema.parse({ pair_session: "S", poll_secret: "SEC", confirm_code: "4217",
+                                     deep_link: "https://t.me/x?start=S" });
+    expect(v.pair_session).toBe("S");
+    expect(v.poll_secret).toBe("SEC");
+    // вторая половина ключа в deep-link не уходит
+    expect(v.deep_link).not.toContain("SEC");
+  });
+  it("parses tg poll states", () => {
+    expect(TgPollSchema.parse({ status: "pending" }).status).toBe("pending");
+    expect(TgPollSchema.parse({ status: "expired" }).status).toBe("expired");
+    const a = TgPollSchema.parse({ status: "authenticated", token: "T", driver_id: 7 });
+    expect(a.status === "authenticated" && a.token).toBe("T");
+  });
+});

driver-pwa/frontend/src/api/driver.ts

@@ -0,0 +1,238 @@
+import { HTTPError } from "ky";
+import { z } from "zod";
+import { api } from "./client";
+
+/** Pairing-сессия входа. `poll_secret` не покидает приложение (в deep-link уходит
+ * только `pair_session`), `confirm_code` человек сверяет с сообщением бота. */
+export const TgSessionSchema = z.object({
+  pair_session: z.string(),
+  poll_secret: z.string(),
+  confirm_code: z.string(),
+  deep_link: z.string().nullable(),
+});
+
+export const AuthRequestSchema = z.union([
+  z.object({ status: z.literal("code_sent"), channel: z.string() }),
+  z.object({
+    status: z.literal("onboarding"),
+    deep_links: z.object({ tg: z.string().optional(), max: z.string().optional() }),
+    pair_session: z.string(),
+    poll_secret: z.string(),
+    confirm_code: z.string(),
+  }),
+]);
+export type AuthRequest = z.infer<typeof AuthRequestSchema>;
+
+export const VerifySchema = z.object({ token: z.string(), driver_id: z.number() });
+export const BalanceSchema = z.object({
+  accounts: z.array(z.object({
+    bucket: z.string(),
+    balance: z.number(),
+    // Можно ли платить в эту статью. «Страховка» приходит из 1С, но платежом не
+    // закрывается — строку показываем, нажатие не предлагаем.
+    payable: z.boolean().default(true),
+  })),
+  // Итог берём с сервера, а не суммой строк: 1С округляет статьи до рублей, а итог
+  // держит с копейками, и сумма строк с ним не сходится (−8 976 против −8 976,25).
+  total: z.number().nullable().default(null),
+  synced_at: z.string().nullable().default(null),
+  // Принято нами, но ещё не проведено в 1С. В сумму баланса не входит.
+  pending_topup: z.number().default(0),
+});
+export const BucketsSchema = z.object({
+  buckets: z.array(z.string()),
+  with_debt: z.array(z.string()),
+});
+export const TopupSchema = z.object({
+  order_id: z.string(), pay_url: z.string(), commission: z.number(), total: z.number(),
+  // Учебный платёж: сотрудник смотрит от лица водителя, банка в этой ветке нет
+  // (см. backend modules/payments/mock_pay.py). У обычного водителя всегда false.
+  mock: z.boolean().default(false),
+});
+export const PaymentStateSchema = z.object({ order_id: z.string(), status: z.string() });
+export const CommissionSchema = z.object({ rate: z.number() });
+export const PaymentsSchema = z.object({
+  payments: z.array(z.object({
+    order_id: z.string(), bucket: z.string(), amount: z.number(), commission: z.number(),
+    method: z.string(), status: z.string(),
+    created_at: z.string().nullable(), paid_at: z.string().nullable(),
+    reversed_at: z.string().nullable().default(null),
+  })),
+});
+
+export const TgPollSchema = z.union([
+  z.object({ status: z.literal("pending") }),
+  z.object({ status: z.literal("expired") }),
+  z.object({ status: z.literal("authenticated"), token: z.string(), driver_id: z.number() }),
+]);
+
+/**
+ * Текст ошибки от бэкенда.
+ *
+ * Раньше все отказы схлопывались в «Не удалось создать платёж», и осмысленные
+ * сообщения — про минимум СБП, про потолок суммы, про неизвестную категорию —
+ * до водителя не доходили: экран просто не реагировал.
+ */
+export async function apiErrorText(err: unknown, fallback: string): Promise<string> {
+  if (err instanceof HTTPError) {
+    try {
+      const body = await err.response.json();
+      const detail = (body as { detail?: unknown })?.detail;
+      if (typeof detail === "string" && detail.trim()) return detail;
+    } catch {
+      /* тело не JSON — отдадим запасной текст */
+    }
+  }
+  return fallback;
+}
+
+/**
+ * Сколько секунд ждать перед повторным запросом кода. Берём из заголовка
+ * Retry-After ответа 429; если его нет — null (вызывающий решит сам).
+ */
+export function retryAfterSeconds(err: unknown): number | null {
+  if (err instanceof HTTPError) {
+    const raw = err.response.headers.get("Retry-After");
+    const n = raw ? parseInt(raw, 10) : NaN;
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return null;
+}
+
+export const tgSession = async () =>
+  TgSessionSchema.parse(await api.post("driver/auth/tg/session").json());
+/** POST, а не GET: в query-параметре pair_session оседал в access-логах. */
+export const tgPoll = async (pairSession: string, pollSecret: string) =>
+  TgPollSchema.parse(
+    await api.post("driver/auth/tg/poll", {
+      json: { pair_session: pairSession, poll_secret: pollSecret },
+    }).json(),
+  );
+
+export const authRequest = async (phone: string) =>
+  AuthRequestSchema.parse(await api.post("driver/auth/request", { json: { phone } }).json());
+export const authVerify = async (phone: string, code: string) =>
+  VerifySchema.parse(await api.post("driver/auth/verify", { json: { phone, code } }).json());
+export const getBalance = async () =>
+  BalanceSchema.parse(await api.get("driver/balance").json());
+export const getBuckets = async () =>
+  BucketsSchema.parse(await api.get("driver/buckets").json());
+export const topup = async (bucket: string, amount: number, method: "qr" | "card",
+                            live = false) =>
+  TopupSchema.parse(await api.post("driver/topup", {
+    json: { bucket, amount, method, live },
+  }).json());
+export const getPaymentState = async (orderId: string) =>
+  PaymentStateSchema.parse(await api.get(`driver/payment/${orderId}`).json());
+export const getPayments = async () =>
+  PaymentsSchema.parse(await api.get("driver/payments").json());
+export const getCommission = async () =>
+  CommissionSchema.parse(await api.get("driver/commission").json());
+
+/** Исход учебного платежа. Работает только под просмотром сотрудника. */
+export const mockPayOutcome = async (
+  orderId: string, outcome: "paid" | "rejected" | "expired" | "reversed",
+) => PaymentStateSchema.parse(
+  await api.post(`driver/mock-pay/${orderId}`, { json: { outcome } }).json(),
+);
+
+export const StatementSchema = z.object({
+  items: z.array(z.object({
+    date: z.string().nullable(),
+    title: z.string(),
+    description: z.string().default(""),
+    amount: z.number(),
+    kind: z.enum(["charges", "payments", "fines"]),
+    // Карточка штрафа, если постановление у нас есть. null — строка не ссылка.
+    fine_id: z.number().nullable().default(null),
+  })),
+  from: z.string(),
+  to: z.string(),
+  kind: z.string(),
+});
+export type StatementKind = "all" | "charges" | "payments" | "fines";
+
+/** Выписка по счёту за период. Даты — ISO (ГГГГ-ММ-ДД), как их понимает бэкенд. */
+export const getStatement = async (from: string, to: string, kind: StatementKind) =>
+  StatementSchema.parse(await api.get("driver/statement", {
+    searchParams: { from, to, kind },
+  }).json());
+
+const FineBriefSchema = z.object({
+  id: z.number(),
+  number: z.string(),
+  date: z.string().nullable(),
+  article: z.string(),
+  address: z.string().default(""),
+  car_number: z.string().default(""),
+  // Сумма, начисленная ВОДИТЕЛЮ. Номинала постановления, скидки и расчётов парка
+  // с ГИБДД в приложении нет намеренно — водителю нужен факт штрафа и сумма.
+  amount: z.number(),
+  // Погашен ли штраф водителем перед парком. Постановление парк гасит авансом,
+  // и на этот признак его расчёты не влияют.
+  settled: z.enum(["owed", "paid", "not_charged", "cancelled", "unknown"]),
+  cancelled: z.boolean().default(false),
+  has_photo: z.boolean().default(false),
+});
+export type FineBrief = z.infer<typeof FineBriefSchema>;
+
+export const FinesSchema = z.object({
+  items: z.array(FineBriefSchema),
+  open_count: z.number(),
+  // Долг по штрафам из 1С — тот же, что на главном экране (отрицательный).
+  debt: z.number(),
+});
+
+export const FineDetailSchema = FineBriefSchema.extend({
+  post_date: z.string().nullable().default(null),
+  speed: z.number().nullable().default(null),
+  speed_limit: z.number().nullable().default(null),
+  speed_excess: z.number().nullable().default(null),
+  camera: z.string().default(""),
+  // Ссылки подписанные и живут час — держать их в кэше дольше нет смысла.
+  photos: z.array(z.string()).default([]),
+  document: z.string().nullable().default(null),
+});
+
+export const getFines = async (status: "all" | "open") =>
+  FinesSchema.parse(await api.get("driver/fines", { searchParams: { status } }).json());
+
+export const getFine = async (id: number) =>
+  FineDetailSchema.parse(await api.get(`driver/fines/${id}`).json());
+
+export const NotificationSchema = z.object({
+  id: z.number(),
+  kind: z.string(),
+  title: z.string(),
+  body: z.string(),
+  url: z.string().nullable().default(null),
+  created_at: z.string().nullable().default(null),
+  read_at: z.string().nullable().default(null),
+});
+export type DriverNotification = z.infer<typeof NotificationSchema>;
+
+export const NotificationsSchema = z.object({
+  items: z.array(NotificationSchema),
+  unread: z.number(),
+});
+
+export const getNotifications = async () =>
+  NotificationsSchema.parse(await api.get("driver/notifications").json());
+
+/** Отметить прочитанным. Без списка — «всё»: так отмечает открытие ленты. */
+export const markNotificationsRead = async (ids?: number[], source: "app" | "push" = "app") =>
+  api.post("driver/notifications/read", { json: { ids: ids ?? null, source } }).json();
+
+export const PushKeySchema = z.object({ key: z.string(), enabled: z.boolean() });
+
+export const getPushKey = async () =>
+  PushKeySchema.parse(await api.get("driver/push/key").json());
+
+export const subscribePush = async (sub: { endpoint: string; p256dh: string; auth: string }) =>
+  api.post("driver/push/subscribe", { json: sub }).json();
+
+export const unsubscribePush = async (endpoint: string) =>
+  api.post("driver/push/unsubscribe", { json: { endpoint } }).json();
+
+/** Пробное уведомление себе. Доступно только при просмотре сотрудником. */
+export const sendTestPush = async () => api.post("driver/push/test").json();

driver-pwa/frontend/src/api/staff.ts

@@ -0,0 +1,85 @@
+import ky from "ky";
+import { z } from "zod";
+import { pushEntry, shortPath } from "@/lib/reqlog";
+import { API_BASE } from "./client";
+import { useStaff } from "@/store/staff";
+
+/**
+ * Учётка CRM внутри приложения водителя — только ради просмотра от чужого лица.
+ *
+ * Свой экземпляр ky, а не общий `api`: тот подставляет ВОДИТЕЛЬСКИЙ токен, и на
+ * запросе к /driver/staff/* заголовок оказался бы чужим. Плюс 401 здесь означает
+ * «протух сеанс сотрудника», а не «водителя выкинуло».
+ */
+const started = new WeakMap<Request, number>();
+
+const staffApi = ky.create({
+  prefixUrl: API_BASE,
+  timeout: 30_000,
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        started.set(request, performance.now());
+        const token = useStaff.getState().token;
+        if (token) request.headers.set("Authorization", `Bearer ${token}`);
+      },
+    ],
+    afterResponse: [
+      (request, _o, response) => {
+        pushEntry({
+          method: request.method, path: shortPath(request.url), status: response.status,
+          ms: Math.round(performance.now() - (started.get(request) ?? performance.now())),
+        });
+      },
+    ],
+    beforeError: [
+      (error) => {
+        if (error.response?.status === 401) useStaff.getState().clear();
+        return error;
+      },
+    ],
+  },
+});
+
+export const LoginSchema = z.object({
+  access_token: z.string().nullable().default(null),
+  requires_2fa: z.boolean().default(false),
+  partial_token: z.string().nullable().default(null),
+});
+
+export const DriverBriefSchema = z.object({
+  id: z.number(),
+  fio: z.string(),
+  phone: z.string(),
+  status: z.string(),
+  driver_kind: z.string(),
+});
+export type DriverBrief = z.infer<typeof DriverBriefSchema>;
+
+export const DriversSchema = z.object({ drivers: z.array(DriverBriefSchema) });
+export const ImpersonateSchema = z.object({
+  token: z.string(),
+  driver: DriverBriefSchema,
+});
+
+/** Логин CRM. Форма, а не JSON: эндпоинт принимает OAuth2PasswordRequestForm. */
+export const staffLogin = async (username: string, password: string) => {
+  const body = new URLSearchParams({ username, password });
+  return LoginSchema.parse(await staffApi.post("auth/login", { body }).json());
+};
+
+/** Второй шаг, если у учётки включена двухфакторка. */
+export const staffLogin2fa = async (partialToken: string, code: string) =>
+  LoginSchema.parse(await staffApi.post("auth/2fa", {
+    json: { partial_token: partialToken, code, remember_device: false },
+  }).json());
+
+export const searchDrivers = async (q: string) =>
+  DriversSchema.parse(await staffApi.get("driver/staff/drivers", {
+    searchParams: { q, limit: 30 },
+  }).json());
+
+export const impersonate = async (driverId: number) =>
+  ImpersonateSchema.parse(await staffApi.post("driver/staff/impersonate", {
+    json: { driver_id: driverId },
+  }).json());

driver-pwa/frontend/src/components/AppHeader.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom";
+import { useRef } from "react";
+
+import { NotificationsBell } from "@/pages/NotificationsPage";
+
+/** Долгое нажатие, после которого открывается вход для сотрудника. */
+const LONG_PRESS_MS = 1500;
+
+/** Колокольчик по умолчанию выключен: он тянет счётчик уведомлений, а шапка
+ *  стоит на каждом экране — незачем ходить за ним с оплаты или из штрафа.
+ *  Включается там, откуда водитель и правда пойдёт читать: на главной. */
+export function AppHeader({ bell = false }: { bell?: boolean } = {}) {
+  const nav = useNavigate();
+  const timer = useRef<number | null>(null);
+
+  // Ссылки «для сотрудника» на экранах водителя нет намеренно: водителю она
+  // ничего не даёт, а место занимает. Но сотруднику, уже вошедшему водителем,
+  // адрес /dev иначе приходится набирать руками — отсюда долгий тап по названию.
+  const start = () => {
+    timer.current = window.setTimeout(() => nav("/dev"), LONG_PRESS_MS);
+  };
+  const cancel = () => {
+    if (timer.current) window.clearTimeout(timer.current);
+    timer.current = null;
+  };
+
+  return (
+    <header className="mb-4 flex items-center justify-between">
+      <span
+        className="text-sm font-bold select-none"
+        onPointerDown={start}
+        onPointerUp={cancel}
+        onPointerLeave={cancel}
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        Премиум Водитель
+      </span>
+      {bell && <NotificationsBell />}
+    </header>
+  );
+}

driver-pwa/frontend/src/components/DriverPicker.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+import { toast } from "sonner";
+import { apiErrorText } from "@/api/driver";
+import { impersonate, searchDrivers, type DriverBrief } from "@/api/staff";
+import { useAuth } from "@/store/auth";
+import { Spinner } from "@/components/Spinner";
+
+/**
+ * Выбор водителя, от лица которого смотреть. Один компонент на два места:
+ * первый вход сотрудника (/dev) и смена водителя на вкладке «Отладка».
+ */
+export function DriverPicker({ onPicked }: { onPicked: (d: DriverBrief) => void }) {
+  const startImpersonation = useAuth((s) => s.startImpersonation);
+  const [q, setQ] = useState("");
+  const [list, setList] = useState<DriverBrief[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [busyId, setBusyId] = useState<number | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    // Пауза перед запросом: иначе поиск уходит на каждую букву, и ответы
+    // возвращаются вперемешку — список прыгает.
+    const t = setTimeout(() => {
+      searchDrivers(q)
+        .then((r) => { if (alive) setList(r.drivers); })
+        .catch(async (e) => { if (alive) toast.error(await apiErrorText(e, "Не удалось найти водителей")); })
+        .finally(() => { if (alive) setLoading(false); });
+    }, 300);
+    return () => { alive = false; clearTimeout(t); };
+  }, [q]);
+
+  async function pick(d: DriverBrief) {
+    setBusyId(d.id);
+    try {
+      const r = await impersonate(d.id);
+      startImpersonation(r.token, r.driver.id, r.driver.fio);
+      onPicked(r.driver);
+    } catch (e: unknown) {
+      toast.error(await apiErrorText(e, "Не удалось открыть приложение за водителя"));
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  return (
+    <div>
+      <div className="card flex items-center gap-2 px-3 py-2.5 mb-3 bg-surface">
+        <Search size={16} className="text-muted shrink-0" />
+        <input
+          autoFocus
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="ФИО, телефон или id"
+          className="w-full text-base bg-transparent outline-none"
+        />
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-8"><Spinner /></div>
+      ) : list.length === 0 ? (
+        <p className="text-muted text-sm text-center py-8">Никого не нашли</p>
+      ) : (
+        <div className="card divide-y divide-line">
+          {list.map((d) => (
+            <button
+              key={d.id}
+              disabled={busyId !== null}
+              onClick={() => pick(d)}
+              className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 disabled:opacity-50"
+            >
+              <span className="min-w-0">
+                <span className="block text-sm font-semibold truncate">{d.fio}</span>
+                <span className="block text-muted text-xs truncate">
+                  #{d.id}{d.phone ? ` · ${d.phone}` : ""}{d.status ? ` · ${d.status}` : ""}
+                </span>
+              </span>
+              {busyId === d.id ? <Spinner /> : <span className="text-muted text-xs shrink-0">смотреть</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/components/ImpersonationBar.tsx

@@ -0,0 +1,34 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { Eye } from "lucide-react";
+import { useAuth } from "@/store/auth";
+
+/**
+ * Плашка «вы смотрите чужой экран». Видна на каждом экране и всегда, пока
+ * действует токен просмотра.
+ *
+ * Она не украшение: интерфейс в этом режиме неотличим от водительского — те же
+ * суммы, те же долги, та же история. Без постоянного напоминания легко принять
+ * чужой баланс за свой и, например, позвонить водителю с чужими цифрами.
+ */
+export function ImpersonationBar() {
+  const nav = useNavigate();
+  const loc = useLocation();
+  const { impersonated, driverName, driverId } = useAuth();
+  if (!impersonated) return null;
+  const onDebug = loc.pathname === "/debug";
+
+  return (
+    <div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-xl2 border border-warn/40 bg-warn/10 text-warn text-xs">
+      <Eye size={14} className="shrink-0" />
+      <span className="min-w-0 truncate">
+        Смотрю как <b>{driverName ?? `водитель #${driverId}`}</b>
+      </span>
+      <button
+        className="ml-auto shrink-0 underline underline-offset-2"
+        onClick={() => nav(onDebug ? "/" : "/debug")}
+      >
+        {onDebug ? "к приложению" : "отладка"}
+      </button>
+    </div>
+  );
+}

driver-pwa/frontend/src/components/NotificationsPrompt.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+vi.mock("@/lib/push", () => ({
+  currentState: vi.fn(async () => "off"),
+  enable: vi.fn(async () => "on"),
+  installed: vi.fn(() => true),
+}));
+
+import { NotificationsPrompt } from "./NotificationsPrompt";
+import * as push from "@/lib/push";
+
+describe("предложение включить уведомления", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+    vi.mocked(push.installed).mockReturnValue(true);
+    vi.mocked(push.currentState).mockResolvedValue("off");
+  });
+
+  it("установленному приложению предлагаем — своей карточкой, а не системным окном", async () => {
+    render(<NotificationsPrompt />);
+    expect(await screen.findByText("Сообщать о новом?")).toBeInTheDocument();
+    // Системное окно вызывается только по кнопке: оно показывается один раз за
+    // установку, и отказ браузер запоминает навсегда.
+    expect(push.enable).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole("button", { name: "Включить" }));
+    expect(push.enable).toHaveBeenCalled();
+  });
+
+  it("во вкладке браузера не предлагаем: на iPhone это всё равно не работает", async () => {
+    vi.mocked(push.installed).mockReturnValue(false);
+    render(<NotificationsPrompt />);
+    expect(screen.queryByText("Сообщать о новом?")).not.toBeInTheDocument();
+  });
+
+  it("«не сейчас» откладывает на неделю, а не отказывает навсегда", async () => {
+    render(<NotificationsPrompt />);
+    await userEvent.click(await screen.findByRole("button", { name: "Не сейчас" }));
+    expect(screen.queryByText("Сообщать о новом?")).not.toBeInTheDocument();
+    const until = Number(localStorage.getItem("pp-push-prompt-later"));
+    const days = (until - Date.now()) / 86400_000;
+    expect(days).toBeGreaterThan(6.5);
+    expect(days).toBeLessThan(7.5);
+
+    // Пока срок не вышел — не показываем повторно.
+    render(<NotificationsPrompt />);
+    expect(screen.queryByText("Сообщать о новом?")).not.toBeInTheDocument();
+  });
+
+  it("уже включено — карточки нет", async () => {
+    vi.mocked(push.currentState).mockResolvedValue("on");
+    render(<NotificationsPrompt />);
+    expect(screen.queryByText("Сообщать о новом?")).not.toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/components/NotificationsPrompt.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { Bell } from "lucide-react";
+import { toast } from "sonner";
+import { currentState, enable, installed, type PushState } from "@/lib/push";
+
+/**
+ * Предложение включить уведомления — после установки приложения.
+ *
+ * Почему своя карточка, а не сразу системное окно. Системное показывается ОДИН
+ * раз за установку: отказ браузер запоминает навсегда, и переспросить нельзя.
+ * Своё предложение отказа не стоит — «не сейчас» просто откладывает его на
+ * неделю, и вернуться к разговору можно.
+ *
+ * Почему после установки, а не на входе. На iPhone уведомления работают только в
+ * установленном приложении, а человеку, который ещё не решил, нужен ли ему этот
+ * сайт вообще, вопрос про уведомления мешает.
+ */
+const DELAY_KEY = "pp-push-prompt-later";
+const REMIND_AFTER_DAYS = 7;
+
+function postponed(): boolean {
+  const raw = localStorage.getItem(DELAY_KEY);
+  if (!raw) return false;
+  const until = Number(raw);
+  return Number.isFinite(until) && Date.now() < until;
+}
+
+export function NotificationsPrompt() {
+  const [state, setState] = useState<PushState | null>(null);
+  const [hidden, setHidden] = useState(postponed());
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    const refresh = () => currentState().then((s) => { if (alive) setState(s); });
+    refresh();
+    // Приложение только что поставили на домашний экран — самое время спросить,
+    // человек как раз занят настройкой.
+    const onInstalled = () => { setHidden(false); refresh(); };
+    window.addEventListener("appinstalled", onInstalled);
+    return () => { alive = false; window.removeEventListener("appinstalled", onInstalled); };
+  }, []);
+
+  // Показываем только установленному приложению и только пока разрешение не
+  // спрашивали: «включить» для остальных живёт строкой внизу экрана.
+  if (hidden || state !== "off" || !installed()) return null;
+
+  async function turnOn() {
+    setBusy(true);
+    try {
+      const next = await enable();
+      setState(next);
+      if (next !== "on") toast.error("Уведомления не включились");
+    } catch {
+      toast.error("Не удалось включить уведомления");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function later() {
+    localStorage.setItem(DELAY_KEY, String(Date.now() + REMIND_AFTER_DAYS * 86400_000));
+    setHidden(true);
+  }
+
+  return (
+    <div className="card p-4 mb-3">
+      <div className="flex items-start gap-3">
+        <Bell size={18} strokeWidth={1.5} className="text-muted shrink-0 mt-0.5" />
+        <div className="min-w-0">
+          <p className="text-sm font-semibold mb-1">Сообщать о новом?</p>
+          <p className="text-muted text-xs">
+            Пришлём уведомление, когда появится новый штраф или когда пополнение
+            дойдёт до баланса.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2 mt-3">
+        <button className="btn-primary" disabled={busy} onClick={turnOn}>Включить</button>
+        <button className="btn-ghost" disabled={busy} onClick={later}>Не сейчас</button>
+      </div>
+    </div>
+  );
+}

driver-pwa/frontend/src/components/NotificationsRow.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+vi.mock("@/lib/push", () => ({
+  currentState: vi.fn(async () => "off"),
+  enable: vi.fn(async () => "on"),
+}));
+
+import { NotificationsRow } from "./NotificationsRow";
+import * as push from "@/lib/push";
+
+describe("строка уведомлений", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(push.currentState).mockResolvedValue("off");
+  });
+
+  it("выключенные уведомления предлагает включить", async () => {
+    render(<NotificationsRow />);
+    await userEvent.click(await screen.findByRole("button", { name: /Включить уведомления/ }));
+    expect(push.enable).toHaveBeenCalled();
+  });
+
+  it("включённые — строки нет: отказаться от них мы не предлагаем", async () => {
+    // Отключение остаётся системным (настройки телефона или сайта в браузере) —
+    // рядом с балансом кнопка «выключить» только подталкивала бы к отказу.
+    vi.mocked(push.currentState).mockResolvedValue("on");
+    const { container } = render(<NotificationsRow />);
+    await vi.waitFor(() => expect(container.textContent).toBe(""));
+    expect(screen.queryByText(/Выключить/)).not.toBeInTheDocument();
+  });
+
+  it("запрещённые в браузере — объясняем, а не предлагаем кнопку", async () => {
+    vi.mocked(push.currentState).mockResolvedValue("denied");
+    render(<NotificationsRow />);
+    expect(await screen.findByText(/запрещены в настройках браузера/)).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/components/NotificationsRow.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { Bell } from "lucide-react";
+import { toast } from "sonner";
+import { currentState, enable, type PushState } from "@/lib/push";
+
+/**
+ * Включение уведомлений — одной строкой на главном экране.
+ *
+ * Не всплывающим окном на входе: разрешение спрашивается один раз за установку,
+ * и потраченная впустую попытка закрывает канал навсегда. Здесь водитель жмёт
+ * сам, увидев, ради чего.
+ *
+ * Выключения здесь НЕТ намеренно (решение владельца 19.08.2026). Включённые
+ * уведомления — это ровно те два события, ради которых приложение и открывают;
+ * кнопка «выключить» рядом с балансом только предлагает от них отказаться.
+ * Способ отключить остаётся системный: настройки уведомлений телефона или
+ * настройки сайта в браузере — там же, где человек управляет всеми остальными
+ * приложениями.
+ */
+export function NotificationsRow() {
+  const [state, setState] = useState<PushState | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    currentState().then((s) => { if (alive) setState(s); });
+    return () => { alive = false; };
+  }, []);
+
+  // Включено — строки нет: предлагать нечего.
+  if (state === null || state === "unsupported" || state === "on") return null;
+
+  async function turnOn() {
+    setBusy(true);
+    try {
+      setState(await enable());
+    } catch {
+      toast.error("Не удалось включить уведомления");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (state === "needs-install") {
+    return (
+      <p className="text-muted text-xs text-center mt-6">
+        Чтобы получать уведомления о штрафах и платежах, добавьте приложение на домашний экран.
+      </p>
+    );
+  }
+
+  if (state === "denied") {
+    return (
+      <p className="text-muted text-xs text-center mt-6">
+        Уведомления запрещены в настройках браузера — включить их можно только там.
+      </p>
+    );
+  }
+
+  return (
+    <button
+      className="flex items-center justify-center gap-1.5 text-muted text-xs mt-6 w-full"
+      disabled={busy}
+      onClick={turnOn}
+    >
+      <Bell size={15} /> Включить уведомления
+    </button>
+  );
+}

driver-pwa/frontend/src/components/Segment.tsx

@@ -0,0 +1,19 @@
+interface Props { value: string; options: { value: string; label: string }[]; onChange: (v: string) => void; }
+export function Segment({ value, options, onChange }: Props) {
+  return (
+    <div className="flex gap-1.5">
+      {options.map((o) => (
+        <button
+          key={o.value}
+          type="button"
+          onClick={() => onChange(o.value)}
+          className={`flex-1 py-2.5 rounded-xl2 text-xs border ${
+            value === o.value ? "bg-ink text-white border-ink font-bold" : "bg-surface border-line text-muted"
+          }`}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}

driver-pwa/frontend/src/components/Sheet.tsx

@@ -0,0 +1,52 @@
+import { useEffect, type ReactNode } from "react";
+
+/**
+ * Шторка снизу — выбор, который не уводит с экрана.
+ *
+ * Отдельным экраном такой выбор стоит дороже, чем кажется: человек теряет из
+ * виду то, ради чего пришёл (баланс), и возвращается кнопкой «назад», которой на
+ * телефоне ещё надо попасть. Здесь выбор происходит поверх экрана, а закрывается
+ * тапом мимо, кнопкой и клавишей Escape.
+ */
+export function Sheet({ open, onClose, title, children }: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", onKey);
+    // Фон не должен уезжать под шторкой: иначе список категорий листает страницу.
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center">
+      <button
+        aria-label="Закрыть"
+        className="absolute inset-0 bg-ink/40"
+        onClick={onClose}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className="relative w-full max-w-md bg-surface rounded-t-2xl pb-6 pt-2 max-h-[80vh] overflow-y-auto"
+      >
+        {/* Полоска-ручка: на телефоне она объясняет, что панель тянется, лучше любой подписи. */}
+        <div className="mx-auto mb-3 h-1 w-10 rounded-full bg-line" />
+        <p className="px-5 pb-2 text-sm font-bold">{title}</p>
+        {children}
+      </div>
+    </div>
+  );
+}

driver-pwa/frontend/src/components/Spinner.tsx

@@ -0,0 +1,3 @@
+export function Spinner() {
+  return <span className="inline-block w-3.5 h-3.5 border-2 border-line border-t-ink rounded-full animate-spin" />;
+}

driver-pwa/frontend/src/components/Statement.tsx

@@ -0,0 +1,153 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { ChevronRight, Image as ImageIcon } from "lucide-react";
+import { getFines, getStatement, type StatementKind } from "@/api/driver";
+import { fineStatusText, isOwed } from "@/lib/fineStatus";
+import { formatDate, formatMoney } from "@/lib/format";
+import { OperationIcon } from "@/components/operationIcon";
+import { Spinner } from "@/components/Spinner";
+
+const FILTERS: { key: StatementKind; label: string }[] = [
+  { key: "all", label: "Все операции" },
+  { key: "charges", label: "Начисления" },
+  { key: "payments", label: "Пополнения" },
+  { key: "fines", label: "Штрафы" },
+];
+
+/**
+ * Нижняя половина главного экрана: за что списаны деньги.
+ *
+ * Три фильтра показывают проводки 1С, а «Штрафы» — сами постановления, а не
+ * проводки по ним. Разница существенная: штраф, который водитель оплатил сам,
+ * парк не выставлял, проводки по нему нет, и в выписке он бы не появился вовсе.
+ * Отдельного экрана штрафов нет намеренно — два списка одного и того же в разных
+ * местах сбивают с толку.
+ */
+export function Statement({ from, to, kind, onFrom, onTo, onKind }: {
+  from: string;
+  to: string;
+  kind: StatementKind;
+  onFrom: (v: string) => void;
+  onTo: (v: string) => void;
+  onKind: (k: StatementKind) => void;
+}) {
+  const nav = useNavigate();
+  const showFines = kind === "fines";
+
+  const ops = useQuery({
+    queryKey: ["statement", from, to, kind],
+    queryFn: () => getStatement(from, to, kind),
+    enabled: !showFines,
+  });
+  const fines = useQuery({
+    queryKey: ["fines"],
+    queryFn: () => getFines("all"),
+    enabled: showFines,
+  });
+
+  const active = showFines ? fines : ops;
+  // Период распространяется и на штрафы: иначе календарь над списком стоял бы,
+  // ничего не меняя, — это хуже, чем его отсутствие.
+  const fineRows = (fines.data?.items ?? []).filter(
+    (f) => !f.date || (f.date >= from && f.date <= to),
+  );
+  const opRows = ops.data?.items ?? [];
+  const isEmpty = showFines ? fineRows.length === 0 : opRows.length === 0;
+  const rowCls = "w-full flex items-center gap-3 py-2.5 border-b border-line last:border-0 text-left";
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        {/* Нативный date-input: календарь телефона знакомее любого нашего. */}
+        <input type="date" value={from} max={to} onChange={(e) => onFrom(e.target.value)}
+               aria-label="Начало периода"
+               className="card flex-1 px-3 py-2 text-xs bg-surface" />
+        <span className="text-muted text-xs">—</span>
+        <input type="date" value={to} min={from} onChange={(e) => onTo(e.target.value)}
+               aria-label="Конец периода"
+               className="card flex-1 px-3 py-2 text-xs bg-surface" />
+      </div>
+
+      <div className="flex gap-1.5 mb-3 overflow-x-auto">
+        {FILTERS.map((f) => (
+          <button
+            key={f.key}
+            onClick={() => onKind(f.key)}
+            className={`shrink-0 px-3 py-2 rounded-xl2 text-xs border ${
+              f.key === kind ? "border-ink bg-surface font-semibold" : "border-line text-muted"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {active.isLoading ? (
+        <div className="flex justify-center py-8"><Spinner /></div>
+      ) : active.isError ? (
+        <div className="text-center py-6">
+          <p className="text-muted text-sm mb-3">Не удалось загрузить операции</p>
+          <button className="btn-ghost" onClick={() => active.refetch()}>Повторить</button>
+        </div>
+      ) : isEmpty ? (
+        <p className="text-muted text-sm text-center py-8">
+          {showFines ? "Штрафов за период нет" : "Нет операций за выбранный период"}
+        </p>
+      ) : showFines ? (
+        <div>
+          {fineRows.map((f) => (
+            // Штраф ведёт в карточку: там фотография с камеры, место и скорость.
+            <button key={f.id} className={rowCls} onClick={() => nav(`/fines/${f.id}`)}>
+              <OperationIcon title="Штраф" />
+              <span className="min-w-0 flex-1">
+                <span className="flex items-center gap-1.5 text-xs font-semibold">
+                  {formatDate(f.date)}
+                  {f.has_photo && <ImageIcon size={12} strokeWidth={1.5} className="text-muted" />}
+                </span>
+                <span className="block text-sm truncate">{f.article}</span>
+                <span className="block text-muted text-xs">
+                  {fineStatusText(f)}{f.car_number ? ` · ${f.car_number}` : ""}
+                </span>
+              </span>
+              <b className={`shrink-0 ${isOwed(f) ? "text-neg" : "text-muted"}`}>
+                {formatMoney(f.amount)}
+              </b>
+              <ChevronRight size={16} className="text-muted shrink-0" />
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div>
+          {opRows.map((op, idx) => {
+            const row = (
+              <>
+                <OperationIcon title={op.title} />
+                <span className="min-w-0 flex-1">
+                  {/* Дата — первой строкой: в выписке ищут «что было 12-го», а не
+                      название операции. */}
+                  <span className="block text-xs font-semibold">{formatDate(op.date)}</span>
+                  <span className="block text-sm">{op.title}</span>
+                  {op.description && (
+                    <span className="block text-muted text-xs truncate">{op.description}</span>
+                  )}
+                </span>
+                <b className={`shrink-0 ${op.amount < 0 ? "text-neg" : "text-pos"}`}>
+                  {formatMoney(op.amount)}
+                </b>
+              </>
+            );
+            return op.fine_id != null ? (
+              <button key={`${op.date}-${idx}`} className={rowCls}
+                      onClick={() => nav(`/fines/${op.fine_id}`)}>
+                {row}
+                <ChevronRight size={16} className="text-muted shrink-0" />
+              </button>
+            ) : (
+              <div key={`${op.date}-${idx}`} className={rowCls}>{row}</div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/components/operationIcon.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest";
+import { operationIcon } from "./operationIcon";
+
+/** Названия — настоящие теги 1С из выписки (finance_ledger_entries.tag). */
+describe("значок операции", () => {
+  it("разные виды операций различаются", () => {
+    const names = [
+      "Аренда автомобиля",
+      "Пени",
+      "Штраф ГИБДД",
+      "Пополнение баланса через мобильное приложение",
+      "ДТП",
+      "Перевод с депозита на баланс",
+    ].map((t) => operationIcon(t));
+    expect(new Set(names).size).toBe(names.length);
+  });
+
+  it("штраф ГИБДД и штраф компании — один значок: для водителя это одно и то же", () => {
+    expect(operationIcon("Штраф ГИБДД")).toBe(operationIcon("Штраф компании"));
+  });
+
+  it("незнакомый тег получает нейтральный значок, а не пустоту", () => {
+    expect(operationIcon("Списание за что-то новое")).toBeTruthy();
+  });
+});

driver-pwa/frontend/src/components/operationIcon.tsx

@@ -0,0 +1,53 @@
+import {
+  Banknote, Car, Flag, Gavel, Gift, HandCoins, Percent, PiggyBank, Receipt,
+  RefreshCcw, ShieldAlert, TriangleAlert, Wrench, type LucideIcon,
+} from "lucide-react";
+
+/**
+ * Значок операции в выписке — по тегу 1С, а не по знаку суммы.
+ *
+ * Список сливается в стену текста: за неделю у активного водителя два десятка
+ * строк, и половина из них — одинаковая по виду «аренда автомобиля». Значок
+ * даёт зацепку для глаза, чтобы взгляд находил нужное, не читая каждую строку.
+ *
+ * Общий компонент, а не иконка на месте применения: тот же приём, что в складе
+ * CRM (modules/warehouse/categoryIcons.tsx). Разложены по местам — и размеры с
+ * толщиной линии разъезжаются при первой же правке.
+ *
+ * Монохромные намеренно: цвет в этом списке уже занят и означает направление
+ * денег (красное — списали, зелёное — пришло). Цветной значок спорил бы с ним.
+ */
+const BY_TAG: [RegExp, LucideIcon][] = [
+  [/аренда/i, Car],
+  [/пени/i, Percent],
+  [/штраф/i, Gavel],
+  [/дтп|повреждени/i, TriangleAlert],
+  [/депозит/i, PiggyBank],
+  [/пополнение|оплата/i, Banknote],
+  [/ремонт|запчаст/i, Wrench],
+  [/компенсац/i, HandCoins],
+  [/акци|бонус|подар/i, Gift],
+  [/коррекц|сторно|перерасч/i, RefreshCcw],
+  [/страхов/i, ShieldAlert],
+  [/остаток|opening/i, Flag],
+];
+
+export function operationIcon(title: string): LucideIcon {
+  for (const [re, icon] of BY_TAG) {
+    if (re.test(title)) return icon;
+  }
+  return Receipt;
+}
+
+/** Значок в рамке — как в списке склада: одинаковый размер у всех строк. */
+export function OperationIcon({ title }: { title: string }) {
+  const Icon = operationIcon(title);
+  return (
+    <span
+      aria-hidden
+      className="shrink-0 w-8 h-8 rounded-xl2 border border-line bg-canvas flex items-center justify-center text-muted"
+    >
+      <Icon size={16} strokeWidth={1.5} />
+    </span>
+  );
+}

driver-pwa/frontend/src/hooks/usePairPoll.test.tsx

@@ -0,0 +1,43 @@
+// src/hooks/usePairPoll.test.tsx
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { usePairPoll } from "./usePairPoll";
+import * as driver from "@/api/driver";
+import { useAuth } from "@/store/auth";
+
+beforeEach(() => { useAuth.getState().clear(); vi.restoreAllMocks(); });
+
+describe("usePairPoll", () => {
+  it("sets session on authenticated", async () => {
+    vi.spyOn(driver, "tgPoll").mockResolvedValue({ status: "authenticated", token: "T", driver_id: 7 } as any);
+    const { result } = renderHook(() => usePairPoll("SESS", "SEC"));
+    await waitFor(() => expect(result.current.status).toBe("authenticated"));
+    expect(useAuth.getState().token).toBe("T");
+    expect(useAuth.getState().driverId).toBe(7);
+  });
+  it("stays pending then expired", async () => {
+    vi.spyOn(driver, "tgPoll").mockResolvedValue({ status: "expired" } as any);
+    const { result } = renderHook(() => usePairPoll("SESS", "SEC"));
+    await waitFor(() => expect(result.current.status).toBe("expired"));
+  });
+  it("does nothing when session is null", () => {
+    const spy = vi.spyOn(driver, "tgPoll");
+    const { result } = renderHook(() => usePairPoll(null, "SEC"));
+    expect(result.current.status).toBe("pending");
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it("does not poll without the secret half of the key", () => {
+    // pair_session уходит боту в deep-link и оседает в логах; одной его половины
+    // для получения токена быть недостаточно.
+    const spy = vi.spyOn(driver, "tgPoll");
+    const { result } = renderHook(() => usePairPoll("SESS", null));
+    expect(result.current.status).toBe("pending");
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it("sends both halves to the backend", async () => {
+    const spy = vi.spyOn(driver, "tgPoll").mockResolvedValue({ status: "expired" } as any);
+    const { result } = renderHook(() => usePairPoll("SESS", "SEC"));
+    await waitFor(() => expect(result.current.status).toBe("expired"));
+    expect(spy).toHaveBeenCalledWith("SESS", "SEC");
+  });
+});

driver-pwa/frontend/src/hooks/usePairPoll.ts

@@ -0,0 +1,49 @@
+// src/hooks/usePairPoll.ts
+import { useEffect, useRef, useState } from "react";
+import { tgPoll } from "@/api/driver";
+import { useAuth } from "@/store/auth";
+
+type Status = "pending" | "authenticated" | "expired";
+const INTERVAL_MS = 2000;
+const TIMEOUT_MS = 5 * 60 * 1000;
+
+/**
+ * Опрос pairing-сессии. Нужны ОБЕ половины ключа: `pairSession` уходит боту в
+ * deep-link, `pollSecret` остаётся только здесь — знать одну сессию (например,
+ * подсмотрев её в access-логе) для получения токена уже недостаточно.
+ */
+export function usePairPoll(pairSession: string | null,
+                            pollSecret: string | null): { status: Status } {
+  const [status, setStatus] = useState<Status>("pending");
+  const setSession = useAuth((s) => s.setSession);
+  const startedAt = useRef<number>(0);
+
+  useEffect(() => {
+    if (!pairSession || !pollSecret) return;
+    let alive = true;
+    let timer: ReturnType<typeof setTimeout>;
+    startedAt.current = Date.now();
+
+    const tick = async () => {
+      if (!alive) return;
+      try {
+        const r = await tgPoll(pairSession, pollSecret);
+        if (!alive) return;
+        if (r.status === "authenticated") {
+          setSession(r.token, r.driver_id);
+          setStatus("authenticated");
+          return;
+        }
+        if (r.status === "expired") { setStatus("expired"); return; }
+      } catch {
+        // transient — keep polling until timeout
+      }
+      if (Date.now() - startedAt.current > TIMEOUT_MS) { setStatus("expired"); return; }
+      timer = setTimeout(tick, INTERVAL_MS);
+    };
+    tick();
+    return () => { alive = false; clearTimeout(timer); };
+  }, [pairSession, pollSecret, setSession]);
+
+  return { status };
+}

driver-pwa/frontend/src/hooks/usePaymentStatus.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getPaymentState } from "@/api/driver";
+
+// финальные статусы: дальше опрашивать нечего, экран показывает итог —
+// оплачено, отказ, истёкший срок или ошибка
+const TERMINAL = new Set([
+  "PAID", "CONFIRMED", "REJECTED", "REVERSED", "REFUNDED",
+  "PARTIAL_REVERSED", "PARTIAL_REFUNDED",
+  "CANCELED", "AUTH_FAIL", "DEADLINE_EXPIRED", "ATTEMPTS_EXPIRED", "ERROR",
+]);
+
+export function usePaymentStatus(orderId: string) {
+  const query = useQuery({
+    queryKey: ["payment", orderId],
+    queryFn: () => getPaymentState(orderId),
+    refetchInterval: (q) => (q.state.data && TERMINAL.has(q.state.data.status) ? false : 1500),
+    // повтором здесь работает сам опрос через 1.5 с, а внутренние ретраи с backoff
+    // только оттягивают момент, когда сбой станет виден на экране
+    retry: false,
+  });
+
+  // серию неудач считаем сами: failureCount обнуляется в начале каждого опроса
+  // и о том, сколько раз подряд не ответил бэкенд, ничего не говорит
+  const [failStreak, setFailStreak] = useState(0);
+  useEffect(() => {
+    if (query.errorUpdatedAt) setFailStreak((n) => n + 1);
+  }, [query.errorUpdatedAt]);
+  useEffect(() => {
+    if (query.dataUpdatedAt) setFailStreak(0);
+  }, [query.dataUpdatedAt]);
+
+  // пока ни одного удачного ответа не было, на время запроса isError снова гаснет
+  // (react-query возвращает статус в pending) — экран бы моргал ожиданием на каждом опросе.
+  // отметки времени такого провала не дают и гаснут ровно тогда, когда пришли данные
+  const lastFailed = query.errorUpdatedAt > query.dataUpdatedAt;
+
+  return { ...query, failStreak, lastFailed };
+}

driver-pwa/frontend/src/index.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, #root { height: 100%; }
+body { @apply bg-canvas text-ink font-sans antialiased; margin: 0; }
+button { font-family: inherit; }
+
+@layer components {
+  /* Кнопки повторяют сайт: действие — фирменным красным с белым текстом
+     (.s-btn--accent), второстепенное — белым с чернильным текстом и рамкой
+     (.s-btn--ghost). */
+  .btn-primary { @apply bg-accent text-white rounded-xl2 py-3.5 px-4 text-sm font-bold text-center w-full active:bg-accent-press disabled:opacity-50; }
+  .btn-ghost { @apply bg-surface border border-line text-ink rounded-xl2 py-3 px-4 text-sm font-semibold text-center w-full active:bg-canvas-soft; }
+  .card { @apply bg-surface border border-line rounded-2xl; }
+}

driver-pwa/frontend/src/lib/amount.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { keypadReduce, parseAmount, withCommission } from "./amount";
+
+describe("amount keypad", () => {
+  it("appends digits, ignores leading zero, caps length", () => {
+    expect(keypadReduce("0", "5")).toBe("5");
+    expect(keypadReduce("100", "0")).toBe("1000");
+    expect(keypadReduce("", "0")).toBe("");
+    expect(keypadReduce("999999", "9")).toBe("999999");
+  });
+  it("backspace removes last digit", () => {
+    expect(keypadReduce("105", "back")).toBe("10");
+    expect(keypadReduce("", "back")).toBe("");
+  });
+  it("withCommission computes total at given rate", () => {
+    expect(withCommission(1000, 0.052)).toEqual({ commission: 52, total: 1052 });
+    expect(withCommission(333, 0.052)).toEqual({ commission: 17.32, total: 350.32 });
+  });
+  it("separator key builds kopecks — раньше клавиша была нарисована, но не работала", () => {
+    expect(keypadReduce("100", ",")).toBe("100,");
+    expect(keypadReduce("100,", "5")).toBe("100,5");
+    expect(keypadReduce("100,5", "2")).toBe("100,52");
+    expect(keypadReduce("100,52", "9")).toBe("100,52");   // копеек ровно две
+    expect(keypadReduce("100,52", ",")).toBe("100,52");   // второй разделитель не нужен
+    expect(keypadReduce("", ",")).toBe("0,");
+    expect(keypadReduce("100,5", "back")).toBe("100,");
+  });
+  it("parseAmount reads the keypad string", () => {
+    expect(parseAmount("100,52")).toBe(100.52);
+    expect(parseAmount("100,")).toBe(100);
+    expect(parseAmount("")).toBe(0);
+  });
+});

driver-pwa/frontend/src/lib/amount.ts

@@ -0,0 +1,40 @@
+const MAX_DIGITS = 6;   // целая часть
+const SEP = ",";        // русский разделитель — как на клавише
+
+/**
+ * Одно нажатие клавиатуры суммы.
+ *
+ * Разделитель раньше был нарисован на клавише, но ничего не делал: `press`
+ * молча игнорировал его, а `keypadReduce` принимал только цифры. Заплатить
+ * точный долг вроде 1234,56 было нечем.
+ */
+export function keypadReduce(current: string, key: string): string {
+  if (key === "back") return current.slice(0, -1);
+  if (key === SEP || key === "." || key === "·") {
+    if (current.includes(SEP)) return current;      // второй разделитель не нужен
+    return current === "" ? "0" + SEP : current + SEP;
+  }
+  if (!/^\d$/.test(key)) return current;
+  const [whole, frac] = current.split(SEP);
+  if (frac !== undefined) {
+    if (frac.length >= 2) return current;           // копеек ровно две
+    return `${whole}${SEP}${frac}${key}`;
+  }
+  if (current === "0") return key === "0" ? "0" : key;  // replace leading zero
+  if (current === "" && key === "0") return "";          // no leading zero from empty
+  if (current.length >= MAX_DIGITS) return current;
+  return current + key;
+}
+
+/** Строка с клавиатуры → число рублей. Незавершённое «100,» читается как 100. */
+export function parseAmount(raw: string): number {
+  if (!raw) return 0;
+  const n = parseFloat(raw.replace(SEP, "."));
+  return Number.isFinite(n) ? Math.round(n * 100) / 100 : 0;
+}
+
+export function withCommission(base: number, rate: number): { commission: number; total: number } {
+  const commission = Math.round(base * rate * 100) / 100;
+  const total = Math.round((base + commission) * 100) / 100;
+  return { commission, total };
+}

driver-pwa/frontend/src/lib/fineStatus.ts

@@ -0,0 +1,30 @@
+import type { FineBrief } from "@/api/driver";
+
+/**
+ * Что написать водителю о штрафе.
+ *
+ * Ключевое различие, которое интерфейс обязан удерживать: постановление в ГИБДД
+ * гасит ПАРК, обычно авансом и со скидкой, — и с этого момента штраф закрыт для
+ * государства, но не для водителя. Водитель возвращает деньги парку, и это видно
+ * только по балансу «Долг по штрафам». Поэтому слово «оплачен» здесь не
+ * используется вовсе: оно означало бы для человека «я ничего не должен».
+ */
+export function fineStatusText(f: Pick<FineBrief, "settled">): string {
+  switch (f.settled) {
+    case "owed":
+      return "не погашен";
+    case "paid":
+      return "погашен";
+    case "not_charged":
+      return "не выставлялся";
+    case "cancelled":
+      return "отменён";
+    default:
+      return "уточняется";
+  }
+}
+
+/** Долг именно этого штрафа перед парком — по нему красим сумму. */
+export function isOwed(f: Pick<FineBrief, "settled">): boolean {
+  return f.settled === "owed";
+}

driver-pwa/frontend/src/lib/format.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { formatMoney, formatPhone, digitsOnly } from "./format";
+
+describe("format", () => {
+  it("formatMoney groups thousands and adds ₽", () => {
+    expect(formatMoney(1000)).toBe("1 000 ₽");
+    expect(formatMoney(-3200)).toBe("−3 200 ₽");
+    expect(formatMoney(0)).toBe("0 ₽");
+  });
+  it("formatMoney keeps kopecks — раньше Math.round() показывал не ту сумму, что спишет банк", () => {
+    expect(formatMoney(350.32)).toBe("350,32 ₽");
+    expect(formatMoney(1052)).toBe("1 052 ₽");
+    expect(formatMoney(10.5)).toBe("10,50 ₽");
+    expect(formatMoney(-350.32)).toBe("−350,32 ₽");
+  });
+  it("digitsOnly strips non-digits", () => {
+    expect(digitsOnly("+7 (914) 305-44-00")).toBe("79143054400");
+  });
+  it("formatPhone renders +7 mask progressively", () => {
+    expect(formatPhone("9143054400")).toBe("+7 914 305-44-00");
+    expect(formatPhone("914305")).toBe("+7 914 305");
+  });
+});

driver-pwa/frontend/src/lib/format.ts

@@ -0,0 +1,50 @@
+export function digitsOnly(s: string): string {
+  return (s || "").replace(/\D/g, "");
+}
+
+/**
+ * Деньги для показа. Копейки печатаем ТОЛЬКО когда они есть.
+ *
+ * Раньше здесь было Math.round(), и водителю показывали одну сумму, а банк
+ * списывал другую: комиссия 5.2% почти всегда даёт копейки (1000 → 1052,00, но
+ * 333 → 350,32), и «к оплате 350 ₽» расходилось и со списанием, и с чеком.
+ */
+export function formatMoney(rub: number): string {
+  const neg = rub < 0;
+  const abs = Math.abs(rub);
+  const kop = Math.round(abs * 100);
+  const whole = Math.floor(kop / 100);
+  const rest = kop % 100;
+  const grouped = whole.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  const tail = rest ? `,${rest.toString().padStart(2, "0")}` : "";
+  return `${neg ? "−" : ""}${grouped}${tail} ₽`;
+}
+
+/** Render a Russian mobile from up-to-10 national digits as +7 914 305-44-00. */
+export function formatPhone(national10: string): string {
+  const d = digitsOnly(national10).slice(0, 10);
+  const p: string[] = ["+7"];
+  if (d.length > 0) p.push(" " + d.slice(0, 3));
+  if (d.length > 3) p.push(" " + d.slice(3, 6));
+  if (d.length > 6) p.push("-" + d.slice(6, 8));
+  if (d.length > 8) p.push("-" + d.slice(8, 10));
+  return p.join("");
+}
+
+/** Дата человеку — ДД.ММ.ГГГГ. На проводе и в <input type="date"> остаётся ISO. */
+export function formatDate(iso: string | null): string {
+  if (!iso) return "";
+  const [y, m, d] = iso.split("-");
+  return y && m && d ? `${d}.${m}.${y}` : iso;
+}
+
+/** ISO-дата на N дней назад от сегодня — для периода выписки по умолчанию. */
+export function isoDaysAgo(days: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - days);
+  return d.toISOString().slice(0, 10);
+}
+
+export function isoToday(): string {
+  return new Date().toISOString().slice(0, 10);
+}

driver-pwa/frontend/src/lib/jwt.ts

@@ -0,0 +1,40 @@
+/**
+ * Чтение полезной нагрузки JWT без проверки подписи — для экрана отладки.
+ *
+ * Проверять подпись здесь нечем и не нужно: решение о доступе принимает бэкенд,
+ * а приложению эти поля нужны ровно для того, чтобы показать человеку, чем он
+ * сейчас держится — до какого времени живёт токен и чей это сеанс.
+ */
+export interface TokenInfo {
+  sub: string | null;
+  exp: number | null;
+  impersonated: boolean;
+}
+
+export function readToken(token: string | null): TokenInfo | null {
+  if (!token) return null;
+  const part = token.split(".")[1];
+  if (!part) return null;
+  try {
+    const json = atob(part.replace(/-/g, "+").replace(/_/g, "/"));
+    const claims = JSON.parse(json) as Record<string, unknown>;
+    return {
+      sub: typeof claims.sub === "string" ? claims.sub : null,
+      exp: typeof claims.exp === "number" ? claims.exp : null,
+      impersonated: claims.imp === true,
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** «через 7 ч 20 мин» / «истёк» — человеку, а не в секундах. */
+export function expiresIn(exp: number | null): string {
+  if (exp == null) return "—";
+  const left = exp * 1000 - Date.now();
+  if (left <= 0) return "истёк";
+  const h = Math.floor(left / 3_600_000);
+  const m = Math.floor((left % 3_600_000) / 60_000);
+  if (h >= 24) return `через ${Math.floor(h / 24)} дн ${h % 24} ч`;
+  return h > 0 ? `через ${h} ч ${m} мин` : `через ${m} мин`;
+}

driver-pwa/frontend/src/lib/pairing.ts

@@ -0,0 +1,45 @@
+/**
+ * Pairing-сессия входа через Telegram, пока приложение ждёт бота.
+ *
+ * Держим в sessionStorage: экран ожидания переживает уход в Telegram и возврат,
+ * но сессия не должна пережить закрытие вкладки — это половина ключа к JWT.
+ * Раньше ключи раскладывались по три штуки в каждом экране; теперь одно место,
+ * чтобы `poll_secret` нельзя было забыть положить или забыть стереть.
+ */
+const K_SESSION = "pp-pair-session";
+const K_SECRET = "pp-pair-secret";
+const K_CONFIRM = "pp-pair-confirm";
+const K_LINK = "pp-pair-deeplink";
+
+export interface Pairing {
+  pairSession: string;
+  pollSecret: string;
+  confirmCode: string;
+  deepLink: string | null;
+}
+
+export function savePairing(p: {
+  pair_session: string; poll_secret: string; confirm_code: string; deep_link?: string | null;
+}): void {
+  sessionStorage.setItem(K_SESSION, p.pair_session);
+  sessionStorage.setItem(K_SECRET, p.poll_secret);
+  sessionStorage.setItem(K_CONFIRM, p.confirm_code);
+  if (p.deep_link) sessionStorage.setItem(K_LINK, p.deep_link);
+  else sessionStorage.removeItem(K_LINK);
+}
+
+export function loadPairing(): Pairing | null {
+  const pairSession = sessionStorage.getItem(K_SESSION);
+  const pollSecret = sessionStorage.getItem(K_SECRET);
+  if (!pairSession || !pollSecret) return null;
+  return {
+    pairSession,
+    pollSecret,
+    confirmCode: sessionStorage.getItem(K_CONFIRM) ?? "",
+    deepLink: sessionStorage.getItem(K_LINK),
+  };
+}
+
+export function clearPairing(): void {
+  [K_SESSION, K_SECRET, K_CONFIRM, K_LINK].forEach((k) => sessionStorage.removeItem(k));
+}

driver-pwa/frontend/src/lib/paymentWatch.ts

@@ -0,0 +1,51 @@
+/**
+ * Отметка «водитель только что платил» — общая для экранов пополнения и баланса.
+ *
+ * Зачем она нужна, если экран баланса и так опрашивает себя, пока висит
+ * «Зачисляется» (pending_topup > 0). У опроса по одному этому признаку два
+ * слепых пятна, и оба приходятся ровно на сбойные сценарии:
+ *
+ * 1. Водитель ушёл с экрана оплаты жестом «назад» ДО прихода вебхука банка
+ *    (СБП подтверждается и через 10–60 секунд). Баланс на тот момент отвечает
+ *    pending_topup=0 — опрос не взводится, и когда вебхук наконец ставит PAID,
+ *    перезапросить баланс уже некому: экран оплаты размонтирован вместе со
+ *    своим опросом. Старый итог висит без строки «Зачисляется» бессрочно.
+ *
+ * 2. «Зачисляется» гаснет в момент записи платежа в 1С, и в норме итог в том же
+ *    ответе уже новый. Но точечное обновление снимка — не гарантия (1С может
+ *    не ответить, тогда снимок догонит общий синк за ≤2 минуты): опрос,
+ *    выключившийся по pending_topup=0, этот догон уже не увидит — деньги
+ *    «пропадают» с экрана до смены фокуса.
+ *
+ * Поэтому платёжная активность (создание платежа, факт оплаты) оставляет
+ * отметку, и баланс продолжает опрашиваться ещё WATCH_MS после неё — окно с
+ * запасом накрывает и лаг вебхука, и полный цикл общего синка.
+ *
+ * sessionStorage, а не переменная модуля: PWA на телефоне перезагружает
+ * страницу охотно (нехватка памяти, возврат из банковского приложения), и
+ * отметка в памяти не пережила бы ровно тот переход, ради которого заведена.
+ */
+
+const KEY = "pp-payment-activity-at";
+
+/** Окно опроса после платёжной активности: лаг вебхука (до минуты) + запись в
+ * 1С (≤15 с) + общий синк снимка (≤2 мин) — с запасом. */
+export const WATCH_MS = 5 * 60_000;
+
+export function markPaymentActivity(): void {
+  try {
+    sessionStorage.setItem(KEY, String(Date.now()));
+  } catch {
+    // Приватный режим или отключённое хранилище: без отметки остаётся опрос по
+    // «Зачисляется» — деградация до прежнего поведения, а не поломка.
+  }
+}
+
+export function paymentActivityWithin(ms: number = WATCH_MS): boolean {
+  try {
+    const t = Number(sessionStorage.getItem(KEY) || 0);
+    return t > 0 && Date.now() - t < ms;
+  } catch {
+    return false;
+  }
+}

driver-pwa/frontend/src/lib/push.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+vi.mock("@/api/driver", () => ({
+  getPushKey: vi.fn(async () => ({ key: "BIIh_RELLY", enabled: true })),
+  subscribePush: vi.fn(async () => ({ ok: true })),
+  unsubscribePush: vi.fn(async () => ({ ok: true })),
+}));
+
+import { currentState, enable, supported } from "./push";
+import * as api from "@/api/driver";
+
+const SUB = {
+  endpoint: "https://fcm.googleapis.com/fcm/send/abc",
+  toJSON: () => ({
+    endpoint: "https://fcm.googleapis.com/fcm/send/abc",
+    keys: { p256dh: "p256", auth: "auth" },
+  }),
+  unsubscribe: vi.fn(async () => true),
+};
+
+function stubBrowser(opts: {
+  permission?: NotificationPermission;
+  existing?: unknown;
+  ios?: boolean;
+  standalone?: boolean;
+} = {}) {
+  const perm = opts.permission ?? "default";
+  const registration = {
+    pushManager: {
+      getSubscription: vi.fn(async () => opts.existing ?? null),
+      subscribe: vi.fn(async () => SUB),
+    },
+  };
+  vi.stubGlobal("navigator", {
+    serviceWorker: {
+      getRegistration: vi.fn(async () => registration),
+      ready: Promise.resolve(registration),
+    },
+    userAgent: opts.ios ? "iPhone" : "Android Chrome",
+    standalone: opts.standalone,
+  });
+  const notification = {
+    permission: perm,
+    requestPermission: vi.fn(async () => (opts.permission === "denied" ? "denied" : "granted")),
+  };
+  // Notification обязан лежать И в window: supported() проверяет именно его —
+  // так же, как это делает браузер.
+  vi.stubGlobal("window", {
+    PushManager: function () {},
+    Notification: notification,
+    matchMedia: () => ({ matches: !!opts.standalone }),
+  });
+  vi.stubGlobal("Notification", notification);
+  return registration;
+}
+
+describe("уведомления в приложении", () => {
+  beforeEach(() => vi.clearAllMocks());
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("iPhone без установки на экран: объясняем, а не молчим", async () => {
+    vi.stubGlobal("navigator", { userAgent: "iPhone", standalone: false });
+    vi.stubGlobal("window", { matchMedia: () => ({ matches: false }) });
+    expect(supported()).toBe(false);
+    expect(await currentState()).toBe("needs-install");
+  });
+
+  it("разрешение отклонено — переспросить нечем", async () => {
+    stubBrowser({ permission: "denied" });
+    expect(await currentState()).toBe("denied");
+  });
+
+  it("подписка уходит на сервер с ключами из браузера", async () => {
+    stubBrowser();
+    expect(await enable()).toBe("on");
+    expect(api.subscribePush).toHaveBeenCalledWith({
+      endpoint: "https://fcm.googleapis.com/fcm/send/abc",
+      p256dh: "p256",
+      auth: "auth",
+    });
+  });
+
+  it("сервер не настроен — разрешение НЕ спрашиваем", async () => {
+    // Единственная попытка на установку: потратить её впустую нельзя.
+    vi.mocked(api.getPushKey).mockResolvedValueOnce({ key: "", enabled: false });
+    stubBrowser();
+    expect(await enable()).toBe("off");
+    expect(Notification.requestPermission).not.toHaveBeenCalled();
+    expect(api.subscribePush).not.toHaveBeenCalled();
+  });
+});

driver-pwa/frontend/src/lib/push.ts

@@ -0,0 +1,92 @@
+import { getPushKey, subscribePush, unsubscribePush } from "@/api/driver";
+
+/**
+ * Включение уведомлений в приложении.
+ *
+ * Главное правило экрана вокруг этого кода: разрешение спрашивается ОДИН раз за
+ * всю жизнь установки. Отказ браузер запоминает, переспросить нельзя — только
+ * руками в настройках сайта, куда водитель не пойдёт. Поэтому запрос идёт
+ * строго по нажатию и только когда сервер подтвердил, что уведомления настроены.
+ */
+export type PushState =
+  | "unsupported"   // браузер не умеет (или iOS без установки на домашний экран)
+  | "needs-install" // iOS: умеет, но только когда приложение добавлено на экран
+  | "denied"        // разрешение отклонено — переспросить нечем
+  | "off"           // можно включить
+  | "on";           // подписка есть
+
+/** Приложение открыто как установленное (с домашнего экрана), а не вкладкой. */
+export function installed(): boolean {
+  return isStandalone();
+}
+
+function isStandalone(): boolean {
+  return window.matchMedia("(display-mode: standalone)").matches ||
+    // iOS до 17 не поддерживает display-mode: standalone в matchMedia
+    (navigator as { standalone?: boolean }).standalone === true;
+}
+
+function isIos(): boolean {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent);
+}
+
+export function supported(): boolean {
+  return "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
+}
+
+export async function currentState(): Promise<PushState> {
+  if (!supported()) return isIos() && !isStandalone() ? "needs-install" : "unsupported";
+  if (Notification.permission === "denied") return "denied";
+  const reg = await navigator.serviceWorker.getRegistration();
+  const sub = await reg?.pushManager.getSubscription();
+  return sub ? "on" : "off";
+}
+
+/** base64url → байты: ключ VAPID браузер принимает только так.
+ * Возвращаем ArrayBuffer, а не Uint8Array: типы DOM ждут BufferSource. */
+function keyToBytes(base64: string): ArrayBuffer {
+  const padded = base64.replace(/-/g, "+").replace(/_/g, "/") +
+    "=".repeat((4 - (base64.length % 4)) % 4);
+  const raw = atob(padded);
+  const bytes = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes.buffer;
+}
+
+/** Включить уведомления. Возвращает новое состояние. */
+export async function enable(): Promise<PushState> {
+  if (!supported()) return currentState();
+  const { key, enabled } = await getPushKey();
+  // Ключа нет — сервер уведомления не отправляет. Разрешение не спрашиваем:
+  // потратить единственную попытку впустую нельзя.
+  if (!enabled || !key) return "off";
+
+  const permission = await Notification.requestPermission();
+  if (permission !== "granted") return permission === "denied" ? "denied" : "off";
+
+  const reg = await navigator.serviceWorker.ready;
+  const sub = await reg.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: keyToBytes(key),
+  });
+  const json = sub.toJSON() as { endpoint?: string; keys?: { p256dh?: string; auth?: string } };
+  await subscribePush({
+    endpoint: json.endpoint ?? sub.endpoint,
+    p256dh: json.keys?.p256dh ?? "",
+    auth: json.keys?.auth ?? "",
+  });
+  return "on";
+}
+
+/** Выключить: снимаем подписку и в браузере, и на сервере. */
+export async function disable(): Promise<PushState> {
+  const reg = await navigator.serviceWorker.getRegistration();
+  const sub = await reg?.pushManager.getSubscription();
+  if (sub) {
+    // Сначала сервер: не сумеем достучаться — подписка останется живой, и
+    // уведомления продолжат приходить, а это лучше «выключил, а они идут».
+    await unsubscribePush(sub.endpoint);
+    await sub.unsubscribe();
+  }
+  return "off";
+}

driver-pwa/frontend/src/lib/reqlog.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { clearLog, getLog, pushEntry, shortPath, subscribe } from "./reqlog";
+
+describe("журнал запросов", () => {
+  beforeEach(() => clearLog());
+
+  it("новые записи сверху, старые вытесняются", () => {
+    for (let i = 0; i < 45; i++) pushEntry({ method: "GET", path: `/api/${i}`, status: 200, ms: 1 });
+    const log = getLog();
+    expect(log.length).toBe(40);
+    expect(log[0].path).toBe("/api/44");
+  });
+
+  it("подписчик узнаёт о записи — на этом держится экран отладки", () => {
+    let calls = 0;
+    const off = subscribe(() => { calls += 1; });
+    pushEntry({ method: "GET", path: "/api/x", status: 200, ms: 1 });
+    expect(calls).toBe(1);
+    off();
+    pushEntry({ method: "GET", path: "/api/y", status: 200, ms: 1 });
+    expect(calls).toBe(1);
+  });
+
+  it("query отбрасывается: в нём ездят идентификаторы", () => {
+    expect(shortPath("https://crm.pptaxi.ru/api/driver/payment/x?token=secret"))
+      .toBe("/api/driver/payment/x");
+  });
+});

driver-pwa/frontend/src/lib/reqlog.ts

@@ -0,0 +1,55 @@
+/**
+ * Кольцевой журнал запросов приложения — для вкладки «Отладка».
+ *
+ * Зачем он, если есть DevTools: приложение живёт на телефоне, и половина
+ * интересных случаев (протухший токен, отвалившийся Wi-Fi, 429 от лимита) видна
+ * только там, где DevTools нет. Журнал даёт те же четыре факта — метод, путь,
+ * статус, длительность — прямо на экране.
+ *
+ * Живёт в памяти и умирает вместе с вкладкой: это отладочный след, а не история.
+ * В нём НЕТ ни тел запросов, ни заголовков — токен водителя в отладочный экран
+ * попасть не должен.
+ */
+export interface ReqEntry {
+  id: number;
+  method: string;
+  path: string;
+  status: number | null;
+  ms: number;
+  at: number;
+}
+
+const LIMIT = 40;
+let seq = 0;
+let entries: ReqEntry[] = [];
+const listeners = new Set<() => void>();
+
+export function pushEntry(e: Omit<ReqEntry, "id" | "at">): void {
+  seq += 1;
+  entries = [{ ...e, id: seq, at: Date.now() }, ...entries].slice(0, LIMIT);
+  listeners.forEach((l) => l());
+}
+
+export function clearLog(): void {
+  entries = [];
+  listeners.forEach((l) => l());
+}
+
+/** Снимок для useSyncExternalStore: ссылка меняется только при новой записи. */
+export function getLog(): ReqEntry[] {
+  return entries;
+}
+
+export function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/** Путь без origin и без query: в query ездят идентификаторы, а экран публичный. */
+export function shortPath(url: string): string {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url.split("?")[0];
+  }
+}

driver-pwa/frontend/src/lib/returnTo.ts

@@ -0,0 +1,32 @@
+/**
+ * Куда вернуть водителя после входа.
+ *
+ * Ссылки на оплату (`/pay/:id`) открываются под RequireAuth: незалогиненного
+ * бросает на /login. Раньше после входа он попадал на баланс, а не на оплату,
+ * ради которой пришёл. Запоминаем нужный путь тут (переживает переход через
+ * /tg-wait и онбординг), после любого успешного входа — забираем и очищаем.
+ */
+const KEY = "pp-return-to";
+
+/** Путь для сохранения — только внутренние маршруты приложения. */
+export function setReturnTo(path: string | null | undefined): void {
+  try {
+    if (path && path.startsWith("/") && !path.startsWith("//") && path !== "/login") {
+      sessionStorage.setItem(KEY, path);
+    }
+  } catch {
+    /* приватный режим/недоступный storage — не критично */
+  }
+}
+
+/** Забрать сохранённый путь (и очистить). По умолчанию — на главную. */
+export function takeReturnTo(): string {
+  try {
+    const v = sessionStorage.getItem(KEY);
+    sessionStorage.removeItem(KEY);
+    if (v && v.startsWith("/") && !v.startsWith("//")) return v;
+  } catch {
+    /* см. выше */
+  }
+  return "/";
+}

driver-pwa/frontend/src/main.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "sonner";
+import App from "./App";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: 1, staleTime: 15_000 } },
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+        <Toaster richColors position="top-center" />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>
+);

driver-pwa/frontend/src/pages/BalancePage.test.tsx

@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeAll, afterAll } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// Ответ как у настоящего водителя: статьи 1С, итог отдельным числом.
+vi.mock("@/api/driver", () => ({
+  // Колокольчик в шапке главного экрана спрашивает счётчик непрочитанного.
+  getNotifications: vi.fn(async () => ({ items: [], unread: 0 })),
+  markNotificationsRead: vi.fn(async () => ({ marked: 0 })),
+  getBalance: vi.fn(async () => ({
+    accounts: [
+      { bucket: "Долг аренда", balance: -3050, payable: true },
+      { bucket: "Долг по штрафам", balance: -5156, payable: true },
+      { bucket: "Страховка", balance: 200, payable: false },
+    ],
+    total: -8976.25,
+    synced_at: null,
+    pending_topup: 1500,
+  })),
+  getFines: vi.fn(async () => ({
+    items: [{
+      id: 12, number: "18810525260813035846", date: "2026-08-13",
+      article: "12.09.2 - Превышение скорости", address: "", car_number: "А947УТ125",
+      amount: 618.75, settled: "owed" as const, cancelled: false, has_photo: true,
+    }],
+    open_count: 1, debt: -5156,
+  })),
+  getStatement: vi.fn(async () => ({
+    items: [
+      { date: "2026-08-17", title: "Аренда автомобиля", description: "ТС А947УТ125",
+        amount: -2600, kind: "charges" },
+      { date: "2026-08-17", title: "Пополнение баланса", description: "", amount: 1000,
+        kind: "payments" },
+    ],
+    from: "2026-08-11", to: "2026-08-18", kind: "all",
+  })),
+}));
+
+// Экран режет постановления по периоду «последние 7 дней от сегодня», а даты в
+// моках фиксированные: без замороженных часов штраф от 13.08 выпадает из окна,
+// как только настоящее «сегодня» уходит за 20.08. Морозим только Date — таймеры
+// остаются настоящими, иначе userEvent и waitFor зависнут.
+beforeAll(() => {
+  vi.useFakeTimers({ toFake: ["Date"] });
+  vi.setSystemTime(new Date("2026-08-18T12:00:00Z"));
+});
+afterAll(() => vi.useRealTimers());
+
+import { BalancePage, balancePollMs } from "./BalancePage";
+import { markPaymentActivity } from "@/lib/paymentWatch";
+import * as driver from "@/api/driver";
+
+function wrap() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter>
+        <Routes>
+          <Route path="/" element={<BalancePage />} />
+          <Route path="/topup" element={<p>экран пополнения</p>} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("главный экран", () => {
+  it("опрос баланса: пока висит «зачисляется» или водитель недавно платил", () => {
+    // Водитель после оплаты смотрит на экран и ждёт новый итог — экран обязан
+    // обновиться сам. Вне платёжных окон опроса быть не должно.
+    sessionStorage.clear();
+    expect(balancePollMs({ pending_topup: 1500 })).toBe(4000);
+    expect(balancePollMs({ pending_topup: 0 })).toBe(false);
+    expect(balancePollMs(undefined)).toBe(false);
+    // Свежая платёжная активность держит опрос и без «зачисляется»: вебхук
+    // банка может запаздывать (опрос обязан застать появление строки), а снимок
+    // баланса — догонять платёж общим синком уже после её погашения.
+    markPaymentActivity();
+    expect(balancePollMs({ pending_topup: 0 })).toBe(4000);
+    sessionStorage.clear();
+  });
+
+  it("сверху деньги: итог с сервера и строка «зачисляется»", async () => {
+    wrap();
+    // Сумма статей дала бы −8 006, а в CRM у водителя −8 976,25. Показываем её.
+    expect(await screen.findByText("−8 976,25 ₽")).toBeInTheDocument();
+    expect(screen.getByText("Зачисляется")).toBeInTheDocument();
+    expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
+  });
+
+  it("снизу выписка за период", async () => {
+    wrap();
+    expect(await screen.findByText("Аренда автомобиля")).toBeInTheDocument();
+    expect(screen.getAllByText(/17\.08\.2026/).length).toBe(2);  // обе операции того дня
+    expect(screen.getByRole("button", { name: "Все операции" })).toBeInTheDocument();
+    expect(driver.getStatement).toHaveBeenCalled();
+  });
+
+  it("фильтр перезапрашивает операции выбранного вида", async () => {
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: "Начисления" }));
+    const calls = vi.mocked(driver.getStatement).mock.calls;
+    expect(calls[calls.length - 1][2]).toBe("charges");
+  });
+
+  it("фильтр «Штрафы» показывает постановления, а не проводки", async () => {
+    // Штраф, оплаченный водителем самостоятельно, парк не выставлял — проводки по
+    // нему нет, и в выписке он бы не появился вовсе (Морозов, 18.08.2026).
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: "Штрафы" }));
+    expect(await screen.findByText(/Превышение скорости/)).toBeInTheDocument();
+    expect(driver.getFines).toHaveBeenCalled();
+  });
+
+  it("аренда и штрафы видны сразу, остальные статьи — нет", async () => {
+    wrap();
+    await screen.findByText("−8 976,25 ₽");
+    // Эти две водитель проверяет каждый день — они на экране.
+    expect(screen.getByText("Долг аренда")).toBeInTheDocument();
+    expect(screen.getByText("Долг по штрафам")).toBeInTheDocument();
+    expect(screen.getByText("−3 050 ₽")).toBeInTheDocument();
+    // Редкие статьи на экран не лезут: для них есть шторка.
+    expect(screen.queryByText("Страховка")).not.toBeInTheDocument();
+  });
+
+  it("аренда ведёт к оплате, а штрафы — в свой список", async () => {
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: /Долг аренда/ }));
+    expect(await screen.findByText("экран пополнения")).toBeInTheDocument();
+  });
+
+  it("строка штрафов включает фильтр внизу, а не уводит на другой экран", async () => {
+    wrap();
+    await userEvent.click(await screen.findByRole("button", { name: /Долг по штрафам/ }));
+    expect(await screen.findByText(/Превышение скорости/)).toBeInTheDocument();
+    expect(driver.getFines).toHaveBeenCalled();
+  });
+
+  it("категории для выбора живут в шторке «Пополнить»", async () => {
+    wrap();
+    await screen.findByText("−8 976,25 ₽");
+    await userEvent.click(screen.getByRole("button", { name: /^Пополнить$/ }));
+    const sheet = await screen.findByRole("dialog", { name: "Куда пополнить" });
+    const inSheet = within(sheet);
+    expect(inSheet.getByText("Долг аренда")).toBeInTheDocument();
+    expect(inSheet.getByText("Долг по штрафам")).toBeInTheDocument();
+    // «Страховка» платежом не закрывается — в списке выбора ей делать нечего.
+    expect(inSheet.queryByText("Страховка")).not.toBeInTheDocument();
+  });
+
+  it("шторка закрывается тапом мимо", async () => {
+    wrap();
+    await screen.findByText("−8 976,25 ₽");
+    await userEvent.click(screen.getByRole("button", { name: /^Пополнить$/ }));
+    await userEvent.click(await screen.findByRole("button", { name: "Закрыть" }));
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("отдельного раздела пополнений нет — они в выписке", async () => {
+    // Раздел «Мои пополнения» показывал наши платежи и у большинства водителей был
+    // пуст: 1С проводит пополнения сама, и они уже видны фильтром в выписке.
+    wrap();
+    await screen.findByText("−8 976,25 ₽");
+    expect(screen.queryByText(/Мои пополнения/)).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Пополнения" })).toBeInTheDocument();
+  });
+
+  it("баланс не загрузился — экран говорит об этом, а не рисует ноль", async () => {
+    vi.mocked(driver.getBalance).mockRejectedValueOnce(new Error("boom"));
+    wrap();
+    expect(await screen.findByRole("button", { name: /Обновить баланс/ })).toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/pages/BalancePage.tsx

@@ -0,0 +1,167 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { ArrowUp, ChevronRight, LogOut } from "lucide-react";
+import { getBalance, type StatementKind } from "@/api/driver";
+import { formatMoney, isoDaysAgo, isoToday } from "@/lib/format";
+import { paymentActivityWithin } from "@/lib/paymentWatch";
+import { useAuth } from "@/store/auth";
+import { AppHeader } from "@/components/AppHeader";
+import { NotificationsPrompt } from "@/components/NotificationsPrompt";
+import { NotificationsRow } from "@/components/NotificationsRow";
+import { Sheet } from "@/components/Sheet";
+import { Spinner } from "@/components/Spinner";
+import { Statement } from "@/components/Statement";
+
+// Две статьи, которые водитель проверяет каждый день: за них он платит и из-за
+// них ему звонят. Остальные (депозит, повреждения, прочее) — редкие, им хватает
+// шторки «Пополнить», иначе экран снова превращается в столбик из шести строк.
+const MAIN_BUCKETS = ["Долг аренда", "Долг по штрафам"];
+
+// Пока висит «Зачисляется» ЛИБО водитель недавно платил, экран опрашивает
+// баланс сам: платёж доезжает до 1С за секунды, и новый итог должен появиться
+// на глазах — водитель после оплаты смотрит именно сюда, а перезапускать
+// приложение он не обязан. Одного «зачисляется» мало: опрос по нему не
+// взводится, пока вебхук банка запаздывает, и гаснет раньше, чем снимок
+// баланса догонит платёж при сбое точечного обновления (см. lib/paymentWatch).
+// Вне этих окон опрос не нужен: остальные движения баланса водитель не
+// караулит у экрана.
+export const balancePollMs = (d?: { pending_topup?: number }): number | false =>
+  (d?.pending_topup ?? 0) > 0 || paymentActivityWithin() ? 4000 : false;
+
+/**
+ * Главный экран из двух половин: сверху деньги, снизу — за что они списаны.
+ *
+ * Разбивка по статьям живёт в шторке «Пополнить», а не на экране: водителю она
+ * нужна ровно в момент, когда он решает, куда платить, а всё остальное время
+ * это шесть строк, отодвигающих выписку за нижний край телефона.
+ */
+export function BalancePage() {
+  const nav = useNavigate();
+  const clear = useAuth((s) => s.clear);
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["balance"],
+    queryFn: getBalance,
+    refetchInterval: (q) => balancePollMs(q.state.data),
+  });
+  const [sheet, setSheet] = useState(false);
+  // Неделя — тот же период, что у вендора: столько человек помнит свои поездки.
+  const [from, setFrom] = useState(isoDaysAgo(7));
+  const [to, setTo] = useState(isoToday());
+  const [kind, setKind] = useState<StatementKind>("all");
+
+  const accounts = data?.accounts ?? [];
+  const total = data?.total ?? accounts.reduce((s, a) => s + a.balance, 0);
+  const pending = data?.pending_topup ?? 0;
+  const noData = !isLoading && !isError && accounts.length === 0;
+  const payable = accounts.filter((a) => a.payable);
+  const main = MAIN_BUCKETS.map((b) => accounts.find((a) => a.bucket === b)).filter(
+    (a): a is NonNullable<typeof a> => a != null,
+  );
+
+  function pick(bucket?: string) {
+    setSheet(false);
+    nav("/topup", { state: bucket ? { bucket } : undefined });
+  }
+
+  return (
+    <div>
+      <AppHeader bell />
+
+      <NotificationsPrompt />
+
+      {/* ── Деньги ─────────────────────────────────────────────── */}
+      <div className="card p-4 mb-3">
+        <div className="flex justify-between items-baseline">
+          <span className="text-muted text-xs">Баланс в парке</span>
+          {isLoading ? (
+            <Spinner />
+          ) : noData ? (
+            <span className="text-sm font-semibold">уточняется</span>
+          ) : (
+            <b className={`text-2xl ${total < 0 ? "text-neg" : "text-pos"}`}>{formatMoney(total)}</b>
+          )}
+        </div>
+        {main.length > 0 && (
+          <div className="mt-3 pt-3 border-t border-line">
+            {main.map((a) => (
+              // Аренда ведёт к оплате — за тем её и открывают. Штрафы включают
+              // фильтр в списке ниже: «−5 156 ₽» не отвечает на вопрос «за что»,
+              // а отдельного экрана штрафов нет — два списка одного и того же в
+              // разных местах сбивали с толку.
+              <button
+                key={a.bucket}
+                disabled={!a.payable}
+                onClick={() =>
+                  a.bucket === "Долг по штрафам"
+                    ? setKind("fines")
+                    : nav("/topup", { state: { bucket: a.bucket } })
+                }
+                className="w-full flex justify-between items-baseline py-1.5 text-left disabled:opacity-100"
+              >
+                <span className="text-muted text-xs">{a.bucket}</span>
+                <span className={`text-sm ${a.balance < 0 ? "text-neg" : a.balance > 0 ? "text-pos" : ""}`}>
+                  {formatMoney(a.balance)}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+        {pending > 0 && (
+          // Платёж принят нами, но 1С его ещё не провела. В сумму не входит: сложить
+          // оба источника значило бы показать пополнение дважды после проведения.
+          <div className="flex justify-between items-baseline mt-3 pt-3 border-t border-line">
+            <span className="text-muted text-xs">Зачисляется</span>
+            <span className="text-sm">{formatMoney(pending)}</span>
+          </div>
+        )}
+        {isError && (
+          <button className="btn-ghost mt-3" onClick={() => refetch()}>Обновить баланс</button>
+        )}
+      </div>
+
+      <button className="btn-primary flex items-center justify-center gap-2 mb-5"
+              onClick={() => setSheet(true)}>
+        <ArrowUp size={18} /> Пополнить
+      </button>
+
+      {/* ── За что списано ─────────────────────────────────────── */}
+      <Statement from={from} to={to} kind={kind}
+                 onFrom={setFrom} onTo={setTo} onKind={setKind} />
+
+      <NotificationsRow />
+
+      <div className="flex justify-center mt-6 text-muted text-xs">
+        {/* Отдельного раздела «Мои пополнения» нет намеренно: пополнения видны в
+            выписке выше по фильтру, а дублирующий пустой экран сбивал с толку. */}
+        <button className="flex items-center gap-1.5" onClick={() => { clear(); nav("/login"); }}>
+          <LogOut size={15} /> Выйти
+        </button>
+      </div>
+
+      <Sheet open={sheet} onClose={() => setSheet(false)} title="Куда пополнить">
+        {payable.length === 0 ? (
+          <p className="text-muted text-sm px-5 py-4">
+            Категории пока не загрузились. Попробуйте ещё раз через минуту.
+          </p>
+        ) : (
+          payable.map((a) => (
+            <button
+              key={a.bucket}
+              onClick={() => pick(a.bucket)}
+              className="w-full flex justify-between items-center gap-3 px-5 py-3.5 border-b border-line last:border-0 text-left"
+            >
+              <span className="text-sm">{a.bucket}</span>
+              <span className="flex items-center gap-2 shrink-0">
+                <b className={a.balance < 0 ? "text-neg" : a.balance > 0 ? "text-pos" : "text-muted"}>
+                  {formatMoney(a.balance)}
+                </b>
+                <ChevronRight size={16} className="text-muted" />
+              </span>
+            </button>
+          ))
+        )}
+      </Sheet>
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/DebugPage.test.tsx

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("@/api/staff", () => ({
+  searchDrivers: vi.fn(async () => ({ drivers: [] })),
+  impersonate: vi.fn(),
+}));
+// Экран баланса, на который уводит редирект, тянет свои запросы — отдаём пустышки.
+vi.mock("@/api/driver", () => ({
+  apiErrorText: vi.fn(async (_e: unknown, f: string) => f),
+  getBalance: vi.fn(async () => ({ accounts: [], pending_topup: 0 })),
+  // Тесты доходят до главного экрана, а у него в шапке колокольчик.
+  getNotifications: vi.fn(async () => ({ items: [], unread: 0 })),
+  markNotificationsRead: vi.fn(async () => ({ marked: 0 })),
+}));
+
+import App from "@/App";
+import { DebugPage } from "./DebugPage";
+import { clearLog, pushEntry } from "@/lib/reqlog";
+import { useAuth } from "@/store/auth";
+import { useStaff } from "@/store/staff";
+
+function renderAt(path: string) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={[path]}><App /></MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("вкладка отладки", () => {
+  beforeEach(() => { useAuth.getState().clear(); useStaff.getState().clear(); clearLog(); });
+
+  it("водителя на /debug не пускает — уводит в приложение", () => {
+    useAuth.getState().setSession("t", 42);
+    renderAt("/debug");
+    expect(screen.queryByRole("heading", { name: "Отладка" })).not.toBeInTheDocument();
+  });
+
+  it("сотруднику показывает, от чьего лица открыт экран", () => {
+    useAuth.getState().setSession("t", 42, { impersonated: true, driverName: "Петров Пётр" });
+    renderAt("/debug");
+    expect(screen.getByRole("heading", { name: "Отладка" })).toBeInTheDocument();
+    // Плашка живёт над маршрутами и видна на любом экране, включая этот.
+    expect(screen.getByText(/Смотрю как/)).toBeInTheDocument();
+    expect(screen.getAllByText(/Петров Пётр/).length).toBeGreaterThan(0);
+  });
+
+  it("плашки нет у обычного водителя", () => {
+    useAuth.getState().setSession("t", 42);
+    renderAt("/");
+    expect(screen.queryByText(/Смотрю как/)).not.toBeInTheDocument();
+  });
+
+  it("журнал запросов виден со статусами и временем", () => {
+    useAuth.getState().setSession("t", 42, { impersonated: true, driverName: "Петров" });
+    pushEntry({ method: "GET", path: "/api/driver/balance", status: 401, ms: 123 });
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter><DebugPage /></MemoryRouter>
+      </QueryClientProvider>
+    );
+    expect(screen.getByText("/api/driver/balance")).toBeInTheDocument();
+    expect(screen.getByText("401")).toBeInTheDocument();
+    expect(screen.getByText("123 мс")).toBeInTheDocument();
+  });
+});
+
+describe("возврат к своему аккаунту", () => {
+  beforeEach(() => { useAuth.getState().clear(); useStaff.getState().clear(); clearLog(); });
+
+  it("свой вход не теряется при просмотре чужого экрана", () => {
+    useAuth.getState().setSession("мой-токен", 91);
+    useAuth.getState().startImpersonation("чужой-токен", 6866, "Тест Тестовый тестович");
+    let s = useAuth.getState();
+    expect([s.token, s.driverId, s.impersonated]).toEqual(["чужой-токен", 6866, true]);
+
+    // смена водителя внутри просмотра не должна подменять отложенный свой вход
+    useAuth.getState().startImpersonation("третий-токен", 2869, "Тестик Николай");
+    expect(useAuth.getState().own).toEqual({ token: "мой-токен", driverId: 91 });
+
+    expect(useAuth.getState().stopImpersonation()).toBe(true);
+    s = useAuth.getState();
+    expect([s.token, s.driverId, s.impersonated, s.own]).toEqual(["мой-токен", 91, false, null]);
+  });
+
+  it("если своего входа не было — просмотр просто заканчивается выходом", () => {
+    useAuth.getState().startImpersonation("чужой-токен", 6866, "Тест");
+    expect(useAuth.getState().stopImpersonation()).toBe(false);
+    expect(useAuth.getState().token).toBeNull();
+  });
+
+  it("кнопка предлагает вернуться к себе, когда есть куда", async () => {
+    useAuth.getState().setSession("мой-токен", 91);
+    useAuth.getState().startImpersonation("чужой-токен", 6866, "Тест Тестовый тестович");
+    renderAt("/debug");
+    expect(screen.getByRole("button", { name: /Вернуться к своему аккаунту/ })).toBeInTheDocument();
+  });
+});

driver-pwa/frontend/src/pages/DebugPage.tsx

@@ -0,0 +1,154 @@
+import { useState, useSyncExternalStore } from "react";
+import { useNavigate } from "react-router-dom";
+import { LogOut, RefreshCw, Trash2, UserCog } from "lucide-react";
+import { toast } from "sonner";
+import { API_BASE } from "@/api/client";
+import { clearLog, getLog, subscribe } from "@/lib/reqlog";
+import { expiresIn, readToken } from "@/lib/jwt";
+import { useAuth } from "@/store/auth";
+import { useStaff } from "@/store/staff";
+import { DriverPicker } from "@/components/DriverPicker";
+
+function Row({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="flex justify-between gap-3 py-2 border-b border-line last:border-0">
+      <span className="text-muted text-xs shrink-0">{k}</span>
+      <span className="text-xs text-right break-all">{v}</span>
+    </div>
+  );
+}
+
+/**
+ * Вкладка «Отладка» — то, чего в приложении водителя нет и быть не должно:
+ * от чьего лица открыт экран, куда ходят запросы, чем они отвечают.
+ *
+ * Показывается только сотруднику (есть учётка CRM или действует просмотр). У
+ * водителя маршрут ведёт на главную — см. App.
+ */
+export function DebugPage() {
+  const nav = useNavigate();
+  const { token, driverId, driverName, impersonated, own, clear, stopImpersonation } = useAuth();
+  const staff = useStaff();
+  const log = useSyncExternalStore(subscribe, getLog);
+  const [switching, setSwitching] = useState(false);
+  const info = readToken(token);
+
+  async function hardReload() {
+    // Кэш сервис-воркера переживает деплой и показывает вчерашний бандл — на
+    // отладке это стоит часа «почему правка не приехала».
+    try {
+      const regs = await navigator.serviceWorker?.getRegistrations?.();
+      await Promise.all((regs ?? []).map((r) => r.unregister()));
+      const keys = await caches?.keys?.();
+      await Promise.all((keys ?? []).map((k) => caches.delete(k)));
+      toast.success("Кэш сброшен, перезагружаю");
+    } catch {
+      toast.error("Не удалось сбросить кэш");
+    }
+    location.reload();
+  }
+
+  return (
+    <div className="pt-3">
+      <h1 className="text-lg font-extrabold mb-4">Отладка</h1>
+
+      <div className="card p-4 mb-4">
+        <p className="text-muted text-xs mb-1">Сейчас смотрю</p>
+        <p className="text-sm font-bold mb-3">
+          {impersonated ? (driverName ?? `Водитель #${driverId}`) : "Свой аккаунт водителя"}
+        </p>
+        <button className="btn-ghost flex items-center justify-center gap-2"
+                onClick={() => setSwitching((s) => !s)}>
+          <UserCog size={16} /> {switching ? "Свернуть" : "Сменить водителя"}
+        </button>
+        {switching && (
+          <div className="mt-4">
+            <DriverPicker onPicked={(d) => { setSwitching(false); toast.success(`Смотрю как ${d.fio}`); }} />
+          </div>
+        )}
+      </div>
+
+      {impersonated && (
+        <div className="card p-4 mb-4">
+          <p className="text-sm font-semibold mb-1">Боевая оплата</p>
+          <p className="text-muted text-xs mb-3">
+            Выключено — пополнение открывает учебный экран, деньги не двигаются.
+            Включено — платёж уходит в банк по-настоящему: спишется с вашей карты,
+            чек уйдёт на телефон водителя, сумма зачислится ему в 1С.
+          </p>
+          <button
+            className={staff.livePay ? "btn-primary" : "btn-ghost"}
+            onClick={() => staff.setLivePay(!staff.livePay)}
+          >
+            {staff.livePay ? "Боевая оплата включена — выключить" : "Включить боевую оплату"}
+          </button>
+        </div>
+      )}
+
+      <div className="card p-4 mb-4">
+        <p className="text-muted text-xs mb-2">Сведения</p>
+        <Row k="driver_id" v={String(driverId ?? "—")} />
+        <Row k="режим" v={impersonated ? "просмотр сотрудником (imp)" : "обычный вход водителя"} />
+        {impersonated && (
+          <Row k="оплата" v={staff.livePay ? "боевая — деньги двигаются" : "учебная"} />
+        )}
+        <Row k="сотрудник" v={staff.username ?? "не входил"} />
+        <Row k="токен истекает" v={expiresIn(info?.exp ?? null)} />
+        <Row k="API" v={API_BASE} />
+        <Row k="сборка" v={`${__BUILD_COMMIT__} · ${__BUILD_TIME__}`} />
+        <Row k="сеть" v={navigator.onLine ? "онлайн" : "офлайн"} />
+      </div>
+
+      <div className="card p-4 mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <p className="text-muted text-xs">Последние запросы</p>
+          <button className="text-muted text-xs flex items-center gap-1" onClick={clearLog}>
+            <Trash2 size={12} /> очистить
+          </button>
+        </div>
+        {log.length === 0 ? (
+          <p className="text-muted text-xs py-2">Пока пусто</p>
+        ) : (
+          <div className="font-mono text-[11px] leading-5">
+            {log.map((e) => (
+              <div key={e.id} className="flex gap-2 border-b border-line last:border-0 py-1">
+                <span className={e.status && e.status >= 400 ? "text-neg" : "text-pos"}>
+                  {e.status ?? "—"}
+                </span>
+                <span className="text-muted">{e.method}</span>
+                <span className="truncate">{e.path}</span>
+                <span className="ml-auto text-muted shrink-0">{e.ms} мс</span>
+              </div>
+            ))}
+          </div>
+        )}
+        <p className="text-muted text-[11px] mt-2">
+          Запрос, оборвавшийся без ответа, сюда не попадает.
+        </p>
+      </div>
+
+      <button className="btn-ghost flex items-center justify-center gap-2 mb-2" onClick={hardReload}>
+        <RefreshCw size={16} /> Сбросить кэш и перезагрузить
+      </button>
+      <button
+        className="btn-ghost flex items-center justify-center gap-2"
+        onClick={() => {
+          // Свой вход, отложенный на время просмотра, возвращаем на место: иначе
+          // «посмотреть чужой экран» означало бы заново входить через Telegram.
+          if (impersonated && stopImpersonation()) { nav("/"); return; }
+          clear();
+          nav(staff.token ? "/dev" : "/login");
+        }}
+      >
+        <LogOut size={16} />{" "}
+        {impersonated ? (own ? "Вернуться к своему аккаунту" : "Выйти из просмотра") : "Выйти"}
+      </button>
+      {staff.token && (
+        <button className="text-muted text-xs w-full mt-4"
+                onClick={() => { clear(); staff.clear(); nav("/login"); }}>
+          Выйти и из учётки сотрудника
+        </button>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/DevLoginPage.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+
+vi.mock("@/api/staff", () => ({
+  staffLogin: vi.fn(async () => ({ access_token: "staff-tok", requires_2fa: false, partial_token: null })),
+  staffLogin2fa: vi.fn(async () => ({ access_token: "staff-tok", requires_2fa: false, partial_token: null })),
+  searchDrivers: vi.fn(async () => ({
+    drivers: [{ id: 42, fio: "Петров Пётр", phone: "+79141234567", status: "Работает", driver_kind: "park" }],
+  })),
+  impersonate: vi.fn(async () => ({
+    token: "driver-tok",
+    driver: { id: 42, fio: "Петров Пётр", phone: "+79141234567", status: "Работает", driver_kind: "park" },
+  })),
+}));
+vi.mock("@/api/driver", () => ({ apiErrorText: vi.fn(async (_e: unknown, f: string) => f) }));
+
+import { DevLoginPage } from "./DevLoginPage";
+import * as staffApi from "@/api/staff";
+import { useAuth } from "@/store/auth";
+import { useStaff } from "@/store/staff";
+
+const wrap = () => render(<MemoryRouter><DevLoginPage /></MemoryRouter>);
+
+describe("DevLoginPage", () => {
+  beforeEach(() => {
+    useAuth.getState().clear();
+    useStaff.getState().clear();
+    vi.clearAllMocks();
+  });
+
+  it("логин учёткой CRM, выбор водителя — и сеанс помечен как просмотр", async () => {
+    wrap();
+    await userEvent.type(screen.getByPlaceholderText("Логин"), "vlad");
+    await userEvent.type(screen.getByPlaceholderText("Пароль"), "secret");
+    await userEvent.click(screen.getByRole("button", { name: "Войти" }));
+
+    expect(staffApi.staffLogin).toHaveBeenCalledWith("vlad", "secret");
+    expect(useStaff.getState().token).toBe("staff-tok");
+
+    await userEvent.click(await screen.findByRole("button", { name: /Петров Пётр/ }));
+    expect(staffApi.impersonate).toHaveBeenCalledWith(42);
+    const auth = useAuth.getState();
+    // Метка просмотра — то, на чём держатся и плашка, и запрет боевой оплаты.
+    expect(auth.token).toBe("driver-tok");
+    expect(auth.driverId).toBe(42);
+    expect(auth.impersonated).toBe(true);
+    expect(auth.driverName).toBe("Петров Пётр");
+  });
+
+  it("двухфакторка: пароль сам по себе сеанса не открывает", async () => {
+    vi.mocked(staffApi.staffLogin).mockResolvedValueOnce({
+      access_token: null, requires_2fa: true, partial_token: "partial",
+    });
+    wrap();
+    await userEvent.type(screen.getByPlaceholderText("Логин"), "vlad");
+    await userEvent.type(screen.getByPlaceholderText("Пароль"), "secret");
+    await userEvent.click(screen.getByRole("button", { name: "Войти" }));
+    expect(useStaff.getState().token).toBeNull();
+
+    // Шестая цифра отправляет код сама: раньше форма ждала нажатия, а «Готово» на
+    // клавиатуре телефона ничего не делало — выглядело как «код не принят».
+    await userEvent.type(await screen.findByPlaceholderText("000000"), "123456");
+    expect(staffApi.staffLogin2fa).toHaveBeenCalledWith("partial", "123456");
+    expect(useStaff.getState().token).toBe("staff-tok");
+  });
+});

driver-pwa/frontend/src/pages/DevLoginPage.tsx

@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { apiErrorText } from "@/api/driver";
+import { staffLogin, staffLogin2fa } from "@/api/staff";
+import { useStaff } from "@/store/staff";
+import { DriverPicker } from "@/components/DriverPicker";
+import { Spinner } from "@/components/Spinner";
+
+/**
+ * Вход сотрудника — тот же логин и пароль, что в CRM.
+ *
+ * Экран нужен, пока приложение обкатывается: интерфейс проверяется на живых
+ * данных, а живые данные лежат у настоящих водителей. Отдельного входа «за
+ * водителя» здесь нет: сотрудник входит СОБОЙ, а дальше выбирает, чей экран
+ * смотреть, — и это записывается в аудит CRM.
+ */
+export function DevLoginPage() {
+  const nav = useNavigate();
+  const { token: staffToken, username: staffName, setStaff, clear } = useStaff();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [partial, setPartial] = useState<string | null>(null);
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    if (!username || !password || busy) return;
+    setBusy(true);
+    try {
+      const r = await staffLogin(username, password);
+      if (r.requires_2fa && r.partial_token) {
+        setPartial(r.partial_token);
+        return;
+      }
+      if (!r.access_token) throw new Error("no token");
+      setStaff(r.access_token, username);
+    } catch (e: unknown) {
+      toast.error(await apiErrorText(e, "Неверный логин или пароль"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function submit2fa(value = code) {
+    if (!partial || value.length < 6 || busy) return;
+    setBusy(true);
+    try {
+      const r = await staffLogin2fa(partial, value);
+      if (!r.access_token) throw new Error("no token");
+      setStaff(r.access_token, username);
+      setPartial(null);
+    } catch (e: unknown) {
+      toast.error(await apiErrorText(e, "Код не подошёл"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (staffToken) {
+    return (
+      <div className="pt-10">
+        <h1 className="text-lg font-extrabold mb-1">Кого смотрим</h1>
+        <p className="text-muted text-xs mb-5">
+          Сотрудник: {staffName}. Приложение откроется от лица выбранного водителя,
+          деньги в этом режиме не двигаются.
+        </p>
+        <DriverPicker onPicked={() => nav("/")} />
+        <button className="btn-ghost mt-5" onClick={clear}>Выйти из учётки сотрудника</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-16">
+      <h1 className="text-xl font-extrabold mb-1">Вход для сотрудника</h1>
+      <p className="text-muted text-sm mb-8">Учётная запись Premium CRM</p>
+
+      {partial ? (
+        <>
+          <p className="text-sm mb-2">Код из приложения-аутентификатора.</p>
+          <input
+            autoFocus
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={code}
+            onChange={(e) => {
+              const next = e.target.value.replace(/\D/g, "").slice(0, 6);
+              setCode(next);
+              // Шесть цифр — код собран, ждать нажатия нечего: у TOTP всё равно
+              // остаётся секунд тридцать. Раньше отправки не было ни по Enter, ни
+              // по «Готово» на клавиатуре телефона, и это выглядело как «код не принят».
+              if (next.length === 6) void submit2fa(next);
+            }}
+            onKeyDown={(e) => { if (e.key === "Enter") void submit2fa(); }}
+            placeholder="000000"
+            className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-surface"
+          />
+          <button className="btn-primary" disabled={busy || code.length < 6} onClick={() => submit2fa()}>
+            {busy ? <Spinner /> : "Подтвердить"}
+          </button>
+          <button className="btn-ghost mt-2" onClick={() => { setPartial(null); setCode(""); }}>
+            Назад
+          </button>
+        </>
+      ) : (
+        <>
+          <input
+            autoCapitalize="none"
+            autoCorrect="off"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Логин"
+            className="card w-full px-4 py-3 mb-2 text-base bg-surface"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
+            placeholder="Пароль"
+            className="card w-full px-4 py-3 mb-3 text-base bg-surface"
+          />
+          <button className="btn-primary" disabled={busy || !username || !password} onClick={submit}>
+            {busy ? <Spinner /> : "Войти"}
+          </button>
+          <button className="btn-ghost mt-2" onClick={() => nav("/login")}>Я водитель</button>
+        </>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/FineDetailPage.tsx

@@ -0,0 +1,115 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import { FileText, Gauge } from "lucide-react";
+import { getFine } from "@/api/driver";
+import { fineStatusText, isOwed } from "@/lib/fineStatus";
+import { formatDate, formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+
+function Row({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="flex justify-between gap-3 py-2 border-b border-line last:border-0">
+      <span className="text-muted text-xs shrink-0">{k}</span>
+      <span className="text-xs text-right">{v}</span>
+    </div>
+  );
+}
+
+/**
+ * Карточка штрафа. Главное здесь — фотография с камеры: по ней водитель узнаёт
+ * свою машину и свою поездку либо понимает, что штраф не его. Поэтому она стоит
+ * первой, до реквизитов, и открывается в полный размер по нажатию.
+ *
+ * Что парк заплатил ГИБДД, со скидкой ли и какой номинал у постановления — здесь
+ * не показывается: водителю нужен факт штрафа и сумма к возврату, а разбор
+ * расчётов парка уводит разговор от долга к внутренней кухне.
+ */
+export function FineDetailPage() {
+  const { fineId = "" } = useParams();
+  const nav = useNavigate();
+  const { data: f, isLoading, isError } = useQuery({
+    queryKey: ["fine", fineId],
+    queryFn: () => getFine(Number(fineId)),
+  });
+
+  if (isLoading) return <div className="flex justify-center py-16"><Spinner /></div>;
+  if (isError || !f) {
+    return (
+      <div className="pt-16 text-center">
+        <p className="text-sm font-semibold mb-1">Штраф не найден</p>
+        <p className="text-muted text-xs mb-6">Возможно, он больше не числится за вами.</p>
+        <button className="btn-ghost" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-2 pb-4">
+      <button className="text-muted text-xs mb-3" onClick={() => nav("/")}>‹ Назад</button>
+
+      {f.photos.length > 0 ? (
+        <div className="mb-4 space-y-2">
+          {f.photos.map((src, i) => (
+            <a key={src} href={src} target="_blank" rel="noopener noreferrer" className="block">
+              <img
+                src={src}
+                alt={`Фото нарушения ${i + 1}`}
+                loading="lazy"
+                className="w-full rounded-xl2 border border-line"
+              />
+            </a>
+          ))}
+          <p className="text-muted text-[11px]">Нажмите на фото, чтобы открыть в полном размере</p>
+        </div>
+      ) : (
+        <p className="text-muted text-xs mb-4">
+          Фотографии по этому постановлению нет — её присылают не по всем нарушениям.
+        </p>
+      )}
+
+      <h1 className="text-base font-extrabold mb-1">{f.article}</h1>
+      <p className="text-muted text-xs mb-4">
+        {formatDate(f.date)}{f.address ? ` · ${f.address}` : ""}
+      </p>
+
+      <div className="card p-4 mb-4 text-center">
+        <p className="text-muted text-xs mb-1">Начислено вам</p>
+        <p className={`text-2xl font-extrabold ${isOwed(f) ? "text-neg" : ""}`}>
+          {formatMoney(f.amount)}
+        </p>
+        <p className="text-muted text-xs mt-1">{fineStatusText(f)}</p>
+      </div>
+
+      {f.speed != null && f.speed_limit != null && (
+        <div className="card p-4 mb-4 flex items-center gap-3">
+          <Gauge size={20} strokeWidth={1.5} className="text-muted shrink-0" />
+          <p className="text-sm">
+            {f.speed} км/ч при разрешённых {f.speed_limit}
+            {f.speed_excess ? ` — превышение на ${f.speed_excess}` : ""}
+          </p>
+        </div>
+      )}
+
+      <div className="card p-4 mb-4">
+        <Row k="Постановление" v={f.number} />
+        {f.post_date && <Row k="Дата постановления" v={formatDate(f.post_date)} />}
+        {f.car_number && <Row k="Автомобиль" v={f.car_number} />}
+        {f.camera && <Row k="Камера" v={f.camera} />}
+      </div>
+
+      {f.document && (
+        <a href={f.document} target="_blank" rel="noopener noreferrer"
+           className="btn-ghost flex items-center justify-center gap-2 no-underline mb-2">
+          <FileText size={16} /> Открыть постановление
+        </a>
+      )}
+
+      {isOwed(f) && (
+        <button className="btn-primary"
+                onClick={() => nav("/topup", { state: { bucket: "Долг по штрафам" } })}>
+          Оплатить штрафы
+        </button>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/LoginPage.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+
+vi.mock("@/api/driver", () => ({
+  authRequest: vi.fn(async () => ({ status: "code_sent", channel: "tg" })),
+  authVerify: vi.fn(async () => ({ token: "T", driver_id: 7 })),
+  tgSession: vi.fn(async () => ({ pair_session: "sess123", deep_link: null })),
+}));
+
+import { LoginPage } from "./LoginPage";
+import * as driver from "@/api/driver";
+import { useAuth } from "@/store/auth";
+
+const wrap = () => render(<MemoryRouter><LoginPage /></MemoryRouter>);
+
+describe("LoginPage", () => {
+  beforeEach(() => useAuth.getState().clear());
+  it("requests code then verifies and stores session", async () => {
+    wrap();
+    expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /Войти по коду/i }));
+    await userEvent.type(screen.getByPlaceholderText(/телефон/i), "9143054400");
+    await userEvent.click(screen.getByRole("button", { name: /Получить код/i }));
+    expect(driver.authRequest).toHaveBeenCalledWith("79143054400");
+    const codeInput = await screen.findByPlaceholderText(/код/i);
+    await userEvent.type(codeInput, "123456");
+    await userEvent.click(screen.getByRole("button", { name: /Войти/i }));
+    expect(driver.authVerify).toHaveBeenCalledWith("79143054400", "123456");
+  });
+});

driver-pwa/frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { apiErrorText, authRequest, authVerify, retryAfterSeconds, tgSession } from "@/api/driver";
+import { digitsOnly, formatPhone } from "@/lib/format";
+import { savePairing } from "@/lib/pairing";
+import { takeReturnTo } from "@/lib/returnTo";
+import { useAuth } from "@/store/auth";
+import { Spinner } from "@/components/Spinner";
+
+// Кулдаун повторной отправки кода — синхронно с бэкендом (60с). Точное значение
+// приходит в Retry-After на 429; это дефолт после успешной отправки.
+const RESEND_COOLDOWN_SEC = 60;
+
+function fmtMMSS(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export function LoginPage() {
+  const nav = useNavigate();
+  const setSession = useAuth((s) => s.setSession);
+  const [phone, setPhone] = useState("");          // national 10 digits
+  const [code, setCode] = useState("");
+  const [step, setStep] = useState<"phone" | "code">("phone");
+  const [channel, setChannel] = useState<string>("");
+  const [busy, setBusy] = useState(false);
+  const [mode, setMode] = useState<"choose" | "code">("choose");
+  // Секунды до разрешённой повторной отправки кода (0 — можно отправлять).
+  const [cooldown, setCooldown] = useState(0);
+  // Prefetched pairing session so the «Войти через Telegram» control is a real
+  // <a href> the OS opens in Telegram (a synchronous user gesture) WITHOUT
+  // navigating the PWA away — the app stays mounted on /tg-wait and polls.
+  const [tg, setTg] = useState<{ pair_session: string; poll_secret: string;
+                                 confirm_code: string; deep_link: string | null } | null>(null);
+  const e164 = "7" + phone;
+
+  useEffect(() => {
+    let alive = true;
+    tgSession().then((r) => { if (alive) setTg(r); }).catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  // Тик обратного отсчёта повторной отправки.
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const t = setTimeout(() => setCooldown((s) => Math.max(0, s - 1)), 1000);
+    return () => clearTimeout(t);
+  }, [cooldown]);
+
+  function startTg() {
+    if (!tg) return;
+    savePairing(tg);
+    nav("/tg-wait");
+  }
+
+  async function requestCode() {
+    if (phone.length < 10 || cooldown > 0) return;
+    setBusy(true);
+    try {
+      const r = await authRequest(e164);
+      if (r.status === "onboarding") {
+        // Онбординг теперь идёт той же pairing-сессией: бот попросит поделиться
+        // контактом, Telegram подтвердит номер, приложение заберёт токен опросом.
+        // Второй раз номер вводить не нужно.
+        savePairing({ ...r, deep_link: r.deep_links.tg ?? null });
+        sessionStorage.setItem("pp-onboarding", JSON.stringify({ ...r.deep_links, phone }));
+        nav("/onboarding");
+        return;
+      }
+      setChannel(r.channel);
+      setStep("code");
+      // Запускаем отсчёт до повторной отправки — чтобы водитель не жал повторно
+      // раньше времени и не упирался в «слишком часто».
+      setCooldown(RESEND_COOLDOWN_SEC);
+    } catch (err: unknown) {
+      const status = (err as { response?: { status?: number } })?.response?.status;
+      if (status === 429) {
+        // Точный остаток — из Retry-After; ведём по нему отсчёт и не пугаем.
+        const wait = retryAfterSeconds(err) ?? RESEND_COOLDOWN_SEC;
+        setCooldown(wait);
+        if (step === "phone") setStep("code");  // код мог уйти ранее — дать ввести
+        toast.info(await apiErrorText(err, `Код уже отправляли. Повторить можно через ${wait} сек.`));
+      } else {
+        const fallback =
+          status === 404 ? "Номер не найден. Обратитесь в парк." :
+          "Не удалось отправить код";
+        toast.error(await apiErrorText(err, fallback));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function verify() {
+    if (code.length < 4) return;
+    setBusy(true);
+    try {
+      const r = await authVerify(e164, code);
+      setSession(r.token, r.driver_id);
+      // Возврат туда, откуда пришёл (напр. ссылка на оплату), иначе на баланс.
+      nav(takeReturnTo(), { replace: true });
+    } catch (err: unknown) {
+      toast.error(await apiErrorText(err, "Неверный или просроченный код"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="pt-16">
+      <h1 className="text-xl font-extrabold mb-1">Премиум Водитель</h1>
+      <p className="text-muted text-sm mb-8">Вход в приложение</p>
+
+      {mode === "choose" ? (
+        <>
+          {tg?.deep_link ? (
+            <a
+              href={tg.deep_link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-primary block text-center"
+              onClick={startTg}
+            >
+              Войти через Telegram
+            </a>
+          ) : (
+            <button className="btn-primary" disabled>
+              <Spinner />
+            </button>
+          )}
+          <p className="text-muted text-xs mt-3">Telegram подтвердит ваш номер автоматически.</p>
+          <button className="btn-ghost mt-4" onClick={() => setMode("code")}>Войти по коду</button>
+          {/* Пока идёт обкатка, сотруднику надо попадать внутрь без карточки
+              водителя и без бота — учёткой CRM. Ссылка неприметная намеренно. */}
+          <button className="text-muted text-xs w-full mt-6" onClick={() => nav("/dev")}>
+            Вход для сотрудника
+          </button>
+        </>
+      ) : (
+        <>
+          {step === "phone" ? (
+            <>
+              <input
+                inputMode="numeric"
+                placeholder="Номер телефона"
+                value={phone ? formatPhone(phone) : ""}
+                onChange={(e) => setPhone(digitsOnly(e.target.value).replace(/^7/, "").slice(0, 10))}
+                className="card w-full px-4 py-3 mb-3 text-base bg-surface"
+              />
+              <button className="btn-primary" disabled={busy || phone.length < 10 || cooldown > 0} onClick={requestCode}>
+                {busy ? <Spinner /> : cooldown > 0 ? `Повторить через ${fmtMMSS(cooldown)}` : "Получить код"}
+              </button>
+              <p className="text-muted text-xs mt-3">Код придёт в Telegram или MAX.</p>
+            </>
+          ) : (
+            <>
+              <p className="text-sm mb-2">Код отправлен в {channel === "max" ? "MAX" : "Telegram"}.</p>
+              <input
+                inputMode="numeric"
+                placeholder="Код из сообщения"
+                value={code}
+                onChange={(e) => setCode(digitsOnly(e.target.value).slice(0, 6))}
+                className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-surface"
+              />
+              <button className="btn-primary" disabled={busy || code.length < 4} onClick={verify}>
+                {busy ? <Spinner /> : "Войти"}
+              </button>
+              {/* Повторная отправка прямо здесь: не пришёл код — не надо
+                  возвращаться к номеру и упираться в «слишком часто». Кнопка
+                  ждёт кулдаун и показывает, сколько осталось. */}
+              <button
+                className="btn-ghost mt-2"
+                disabled={busy || cooldown > 0}
+                onClick={requestCode}
+              >
+                {cooldown > 0 ? `Отправить ещё раз через ${fmtMMSS(cooldown)}` : "Отправить код ещё раз"}
+              </button>
+              <button className="btn-ghost mt-1" onClick={() => setStep("phone")}>Изменить номер</button>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/MockPayPage.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+vi.mock("@/api/driver", () => ({
+  mockPayOutcome: vi.fn(async () => ({ order_id: "mock-1", status: "PAID" })),
+  apiErrorText: vi.fn(async (_e: unknown, f: string) => f),
+}));
+
+import { MockPayPage } from "./MockPayPage";
+import * as driver from "@/api/driver";
+import { useAuth } from "@/store/auth";
+
+const wrap = () =>
+  render(
+    <MemoryRouter initialEntries={["/mock-pay/mock-1"]}>
+      <Routes>
+        <Route path="/mock-pay/:orderId" element={<MockPayPage />} />
+        <Route path="/pay/:orderId" element={<p>экран оплаты</p>} />
+      </Routes>
+    </MemoryRouter>
+  );
+
+describe("MockPayPage", () => {
+  beforeEach(() => { useAuth.getState().clear(); vi.clearAllMocks(); });
+
+  it("исход уходит на бэкенд и возвращает на настоящий экран оплаты", async () => {
+    useAuth.getState().setSession("t", 42, { impersonated: true, driverName: "Петров" });
+    wrap();
+    await userEvent.click(screen.getByRole("button", { name: /Банк отклонил/ }));
+    expect(driver.mockPayOutcome).toHaveBeenCalledWith("mock-1", "rejected");
+    expect(await screen.findByText("экран оплаты")).toBeInTheDocument();
+  });
+
+  it("водителю тут делать нечего", async () => {
+    useAuth.getState().setSession("t", 42);
+    wrap();
+    expect(screen.getByText(/Учебная оплата недоступна/)).toBeInTheDocument();
+    expect(driver.mockPayOutcome).not.toHaveBeenCalled();
+  });
+});

driver-pwa/frontend/src/pages/MockPayPage.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { apiErrorText, mockPayOutcome } from "@/api/driver";
+import { useAuth } from "@/store/auth";
+import { Spinner } from "@/components/Spinner";
+
+/**
+ * Учебная «касса»: чем закончится платёж, который сотрудник создал под просмотром.
+ *
+ * Это подмена банка, а не экрана приложения. Настоящий экран оплаты
+ * (`/pay/:orderId`) остаётся тем же самым и разбирает те же статусы — иначе
+ * отладка проверяла бы поведение, которого у водителя не будет.
+ */
+const OUTCOMES = [
+  { key: "paid", label: "Оплата прошла", hint: "PAID — экран «Оплачено»" },
+  { key: "rejected", label: "Банк отклонил", hint: "REJECTED — «Оплата не прошла»" },
+  { key: "expired", label: "Счёт протух", hint: "DEADLINE_EXPIRED — «Срок оплаты истёк»" },
+  { key: "reversed", label: "Деньги вернулись", hint: "REVERSED — «Платёж возвращён»" },
+] as const;
+
+export function MockPayPage() {
+  const { orderId = "" } = useParams();
+  const nav = useNavigate();
+  const impersonated = useAuth((s) => s.impersonated);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  async function choose(outcome: (typeof OUTCOMES)[number]["key"]) {
+    setBusy(outcome);
+    try {
+      await mockPayOutcome(orderId, outcome);
+      nav(`/pay/${orderId}`, { replace: true });
+    } catch (e: unknown) {
+      toast.error(await apiErrorText(e, "Не удалось разыграть исход"));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (!impersonated) {
+    return (
+      <div className="pt-24 text-center">
+        <p className="text-sm font-semibold mb-1">Учебная оплата недоступна</p>
+        <p className="text-muted text-xs mb-6">Этот экран работает только при просмотре сотрудником.</p>
+        <button className="btn-ghost" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-8">
+      <button className="text-muted text-xs mb-3" onClick={() => nav(-1)}>‹ Назад</button>
+      <h1 className="text-lg font-extrabold mb-1">Учебная оплата</h1>
+      <p className="text-muted text-xs mb-5">
+        Банка в этом платеже нет: ни списания, ни чека, ни проводки. Выберите, что
+        «ответит» банк — приложение покажет ровно то же, что увидел бы водитель.
+      </p>
+      <div className="card divide-y divide-line">
+        {OUTCOMES.map((o) => (
+          <button
+            key={o.key}
+            disabled={busy !== null}
+            onClick={() => choose(o.key)}
+            className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 disabled:opacity-50"
+          >
+            <span>
+              <span className="block text-sm font-semibold">{o.label}</span>
+              <span className="block text-muted text-xs">{o.hint}</span>
+            </span>
+            {busy === o.key && <Spinner />}
+          </button>
+        ))}
+      </div>
+      <p className="text-muted text-xs mt-4">Заказ: {orderId}</p>
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/NotificationsPage.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+vi.mock("@/api/driver", () => ({
+  getNotifications: vi.fn(async () => ({
+    items: [
+      { id: 2, kind: "fine", title: "Новый штраф", body: "Постановление от 18.08.2026.",
+        url: "/fines/12", created_at: "2026-08-18T10:15:00+10:00", read_at: null },
+      { id: 1, kind: "topup", title: "Платёж получен", body: "Пополнение принято.",
+        url: "/", created_at: "2026-08-17T09:00:00+10:00", read_at: "2026-08-17T09:05:00+10:00" },
+    ],
+    unread: 1,
+  })),
+  markNotificationsRead: vi.fn(async () => ({ marked: 1 })),
+}));
+
+import { NotificationsPage } from "./NotificationsPage";
+import * as api from "@/api/driver";
+
+const show = () => render(<MemoryRouter><NotificationsPage /></MemoryRouter>);
+
+describe("лента уведомлений", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("показывает, что мы писали водителю", async () => {
+    show();
+    expect(await screen.findByText("Новый штраф")).toBeInTheDocument();
+    expect(screen.getByText("Платёж получен")).toBeInTheDocument();
+    // Дата человеку — ДД.ММ.ГГГГ, не ISO (текст постановления содержит её же).
+    expect(screen.getByText("18.08.2026 10:15")).toBeInTheDocument();
+  });
+
+  it("открытие ленты отмечает непрочитанное", async () => {
+    show();
+    await screen.findByText("Новый штраф");
+    // Это единственный честный источник отметки: пуш живёт до смахивания, а
+    // сообщение в боте тонет в переписке — там прочтения не видно вовсе.
+    expect(api.markNotificationsRead).toHaveBeenCalled();
+  });
+
+  it("без непрочитанного лишний запрос не делаем", async () => {
+    vi.mocked(api.getNotifications).mockResolvedValueOnce({ items: [], unread: 0 });
+    show();
+    expect(await screen.findByText(/Пока ничего не приходило/)).toBeInTheDocument();
+    expect(api.markNotificationsRead).not.toHaveBeenCalled();
+  });
+});

driver-pwa/frontend/src/pages/NotificationsPage.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Bell } from "lucide-react";
+
+import { getNotifications, markNotificationsRead, type DriverNotification } from "@/api/driver";
+import { AppHeader } from "@/components/AppHeader";
+import { Spinner } from "@/components/Spinner";
+import { OperationIcon } from "@/components/operationIcon";
+
+// Значок берём тем же подбором, что и в выписке: событие приложения переводим
+// в тег 1С, чтобы штраф в ленте выглядел так же, как штраф в списке операций.
+const ICON_BY_KIND: Record<string, string> = {
+  fine: "Штраф ГИБДД",
+  topup: "Пополнение баланса",
+};
+
+/**
+ * Лента уведомлений водителя.
+ *
+ * Нужна не только водителю. Пуш живёт до первого смахивания, сообщение в боте
+ * тонет в переписке — и разговор «мне ничего не приходило» упирался в слово
+ * против слова. Здесь у водителя есть место, куда посмотреть, а у парка —
+ * честная отметка «прочитано»: она ставится ровно тогда, когда человек открыл
+ * этот экран или нажал на само уведомление, и ниоткуда больше.
+ *
+ * Отмечаем прочитанным ПОСЛЕ показа, а не при загрузке: иначе счётчик гаснет у
+ * того, кто просто мазнул по экрану и ушёл.
+ */
+export function NotificationsPage() {
+  const nav = useNavigate();
+  const [items, setItems] = useState<DriverNotification[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    getNotifications()
+      .then((r) => {
+        if (!alive) return;
+        setItems(r.items);
+        if (r.unread > 0) void markNotificationsRead();
+      })
+      .catch(() => alive && setError("Не удалось загрузить уведомления"));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return (
+    <div className="p-4">
+      <AppHeader />
+      <h1 className="text-lg font-bold mb-3">Уведомления</h1>
+
+      {error && <div className="text-sm text-muted">{error}</div>}
+      {!items && !error && <Spinner />}
+
+      {items && items.length === 0 && (
+        <div className="text-sm text-muted">
+          Пока ничего не приходило. Здесь будут появляться сообщения о штрафах и платежах.
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        {items?.map((n) => (
+          <button
+            key={n.id}
+            type="button"
+            className="flex gap-3 items-start text-left bg-surface border border-line rounded-xl p-3"
+            onClick={() => n.url && nav(n.url)}
+          >
+            <OperationIcon title={ICON_BY_KIND[n.kind] ?? ""} />
+            <span className="flex-1 min-w-0">
+              <span className="flex items-baseline gap-2">
+                <span className="font-semibold text-sm">{n.title}</span>
+                {!n.read_at && <span className="w-2 h-2 rounded-full bg-accent shrink-0" />}
+              </span>
+              <span className="block text-sm text-muted mt-0.5">{n.body}</span>
+              <span className="block text-xs text-muted mt-1">{when(n.created_at)}</span>
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Дата человеку — ДД.ММ.ГГГГ и время, без ISO. */
+function when(ts: string | null): string {
+  if (!ts) return "";
+  const d = new Date(ts);
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${p(d.getDate())}.${p(d.getMonth() + 1)}.${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** Колокольчик со счётчиком непрочитанного — для шапки главного экрана. */
+export function NotificationsBell() {
+  const nav = useNavigate();
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    let alive = true;
+    getNotifications()
+      .then((r) => alive && setUnread(r.unread))
+      // Молча: колокольчик — не тот элемент, ради которого стоит показывать ошибку.
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return (
+    <button type="button" className="relative p-1 -m-1" aria-label="Уведомления"
+            onClick={() => nav("/notifications")}>
+      <Bell size={22} strokeWidth={1.5} />
+      {unread > 0 && (
+        <span className="absolute -top-0.5 -right-0.5 min-w-4 h-4 px-1 rounded-full bg-accent
+                         text-white text-[10px] leading-4 text-center">
+          {unread > 9 ? "9+" : unread}
+        </span>
+      )}
+    </button>
+  );
+}

driver-pwa/frontend/src/pages/OnboardingPage.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { OnboardingPage } from "./OnboardingPage";
+import { savePairing, clearPairing } from "@/lib/pairing";
+
+describe("OnboardingPage", () => {
+  beforeEach(() => {
+    clearPairing();
+    sessionStorage.setItem("pp-onboarding", JSON.stringify({ tg: "https://t.me/b?start=x", max: "https://max.ru/b?start=x", phone: "9143054400" }));
+  });
+
+  it("shows both bot links + back to login", () => {
+    render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
+    expect(screen.getByText(/Подключите бот/i)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Telegram/i })).toHaveAttribute("href", "https://t.me/b?start=x");
+    expect(screen.getByRole("link", { name: /MAX/i })).toHaveAttribute("href", "https://max.ru/b?start=x");
+    expect(screen.getByRole("button", { name: /Назад ко входу/i })).toBeInTheDocument();
+  });
+
+  it("renders only Telegram when max is absent", () => {
+    sessionStorage.setItem("pp-onboarding", JSON.stringify({ tg: "https://t.me/ppdriver_bot?start=x", phone: "9143054400" }));
+    render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
+    expect(screen.getByRole("link", { name: /Telegram/i })).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /MAX/i })).toBeNull();
+  });
+
+  it("shows the confirm code the bot must repeat", () => {
+    // Защита от фишинга: если ссылку прислал посторонний, у человека этого числа
+    // на экране нет — значит и делиться номером не нужно.
+    savePairing({ pair_session: "S", poll_secret: "SEC", confirm_code: "4217", deep_link: "https://t.me/b?start=S" });
+    render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
+    expect(screen.getByText("4217")).toBeInTheDocument();
+  });
+
+  it("no longer asks the driver to come back for a code", () => {
+    // Онбординг идёт той же pairing-сессией: Telegram подтверждает номер, и
+    // приложение забирает токен опросом — второй раз номер вводить не нужно.
+    render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
+    expect(screen.queryByRole("button", { name: /запросить код/i })).toBeNull();
+  });
+});

driver-pwa/frontend/src/pages/OnboardingPage.tsx

@@ -0,0 +1,48 @@
+import { useNavigate } from "react-router-dom";
+import { loadPairing } from "@/lib/pairing";
+
+export function OnboardingPage() {
+  const nav = useNavigate();
+  const raw = sessionStorage.getItem("pp-onboarding");
+  const data = raw ? (JSON.parse(raw) as { tg?: string; max?: string; phone: string }) : null;
+  const pairing = loadPairing();
+  if (!data) return null;
+
+  return (
+    <div className="pt-16">
+      <h1 className="text-xl font-extrabold mb-1">Подключите бот</h1>
+      <p className="text-muted text-sm mb-8">
+        Откройте бот и поделитесь своим номером — Telegram подтвердит его, и вход
+        произойдёт автоматически. Возвращаться за кодом не нужно.
+      </p>
+      {pairing?.confirmCode && (
+        <div className="card p-4 mb-6 text-center">
+          <p className="text-muted text-xs mb-1">Код подтверждения</p>
+          <p className="text-2xl font-extrabold tracking-widest">{pairing.confirmCode}</p>
+          <p className="text-muted text-xs mt-2">
+            Бот назовёт это число. Не совпало — закройте бот и не делитесь номером.
+          </p>
+        </div>
+      )}
+      {data.tg && (
+        <a
+          href={data.tg}
+          target="_blank"
+          rel="noopener"
+          className="btn-primary mb-3 no-underline block"
+          onClick={() => nav("/tg-wait")}
+        >
+          Подключить Telegram
+        </a>
+      )}
+      {data.max && (
+        <a href={data.max} target="_blank" rel="noopener" className="btn-ghost mb-6 no-underline block">
+          Подключить MAX
+        </a>
+      )}
+      <button className="btn-ghost" onClick={() => nav("/login")}>
+        Назад ко входу
+      </button>
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/PaymentPage.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Routes, Route } from "react-router-dom";
+
+const states = ["FORM", "PAID"];
+vi.mock("@/api/driver", () => ({
+  getPaymentState: vi.fn(async () => ({ order_id: "o9", status: states.shift() ?? "PAID" })),
+}));
+import { PaymentPage } from "./PaymentPage";
+
+function wrap() {
+  const qc = new QueryClient();
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={[{ pathname: "/pay/o9", state: { payUrl: "https://qr.nspk.ru/x", total: 1052, bucket: "Долг аренда", base: 1000 } }]}>
+        <Routes><Route path="/pay/:orderId" element={<PaymentPage />} /></Routes>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe("PaymentPage", () => {
+  it("shows pay button and flips to success on PAID", async () => {
+    wrap();
+    expect(screen.getByRole("link", { name: /Оплатить/i })).toHaveAttribute("href", "https://qr.nspk.ru/x");
+    await waitFor(() => expect(screen.getByText(/Оплачено/i)).toBeInTheDocument(), { timeout: 3000 });
+  });
+});

driver-pwa/frontend/src/pages/PaymentPage.tsx

@@ -0,0 +1,136 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { Check, Clock, Undo2, WifiOff, X } from "lucide-react";
+import { formatMoney } from "@/lib/format";
+import { markPaymentActivity } from "@/lib/paymentWatch";
+import { Spinner } from "@/components/Spinner";
+import { usePaymentStatus } from "@/hooks/usePaymentStatus";
+
+// платёж не состоялся, деньги не ушли — помогает только новая попытка.
+// ATTEMPTS_EXPIRED — исчерпаны попытки ввода на форме банка, тот же исход для водителя
+const FAILED = new Set(["REJECTED", "AUTH_FAIL", "ERROR", "CANCELED", "ATTEMPTS_EXPIRED"]);
+// деньги дошли и вернулись обратно — новая попытка тут ни при чём, человеку нужен другой текст
+const RETURNED = new Set(["REVERSED", "REFUNDED", "PARTIAL_REVERSED", "PARTIAL_REFUNDED"]);
+// сколько неудач подряд терпим, прежде чем сказать вслух, что связи нет: ~15 секунд опроса.
+// одиночный сбой пережидаем молча — следующий опрос обычно всё чинит
+const FAIL_LIMIT = 10;
+
+export function PaymentPage() {
+  const { orderId = "" } = useParams();
+  const nav = useNavigate();
+  const qc = useQueryClient();
+  const st = (useLocation().state as
+    { payUrl?: string; total?: number; bucket?: string; base?: number; method?: string } | null) ?? {};
+  const { data, lastFailed, failStreak, refetch } = usePaymentStatus(orderId);
+  // Учебный платёж узнаётся по номеру заказа, а не по state роутера: state
+  // теряется при перезагрузке, а префикс — нет (см. backend mock_pay).
+  const mock = orderId.startsWith("mock-");
+  const status = data?.status ?? "";
+  const paid = status === "PAID";
+  // пока метод не передан в state — узнаём по ссылке: СБП отдаёт платёжку qr.nspk.ru, карта — форму банка
+  const card = st.method ? st.method === "card" : !!st.payUrl && !st.payUrl.includes("qr.nspk.ru");
+
+  useEffect(() => {
+    if (paid) {
+      // Отметка продлевает окно опроса баланса от ФАКТА оплаты: путь до нового
+      // итога (запись в 1С + снимок) начинается только теперь.
+      markPaymentActivity();
+      qc.invalidateQueries({ queryKey: ["balance"] });
+    }
+  }, [paid, qc]);
+
+  const retry = (
+    <button className="btn-primary mt-8" onClick={() => nav("/topup", { state: { bucket: st.bucket }, replace: true })}>
+      Пополнить ещё раз
+    </button>
+  );
+
+  if (paid) {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-pos text-white flex items-center justify-center mb-3"><Check size={28} /></span>
+        <p className="text-lg font-extrabold">Оплачено</p>
+        <p className="text-muted text-xs mt-1">
+          {st.base != null ? `${st.bucket ?? "Баланс"} пополнен на ${formatMoney(st.base)}` : "Баланс пополнен"}
+        </p>
+        <button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  // без этих веток человек оставался на «Ожидаем оплату…» навсегда: опрос уже остановлен
+  if (status === "DEADLINE_EXPIRED") {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><Clock size={28} /></span>
+        <p className="text-lg font-extrabold">Срок оплаты истёк</p>
+        <p className="text-muted text-xs mt-1">Счёт больше не действует. Деньги не списаны — создайте новый.</p>
+        {retry}
+      </div>
+    );
+  }
+
+  if (FAILED.has(status)) {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><X size={28} /></span>
+        <p className="text-lg font-extrabold">Оплата не прошла</p>
+        <p className="text-muted text-xs mt-1">Банк не провёл перевод. Деньги не списаны — попробуйте ещё раз.</p>
+        {retry}
+      </div>
+    );
+  }
+
+  if (RETURNED.has(status)) {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><Undo2 size={28} /></span>
+        <p className="text-lg font-extrabold">Платёж возвращён</p>
+        <p className="text-muted text-xs mt-1">Деньги вернулись на счёт, с которого платили. Баланс пересчитаем.</p>
+        <button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  // раньше упавший бэкенд выглядел ровно как честное ожидание оплаты — крутился спиннер.
+  // сам опрос не прекращаем: как только бэкенд ответит, экран вернётся к оплате
+  if (lastFailed && failStreak >= FAIL_LIMIT) {
+    return (
+      <div className="pt-24 flex flex-col items-center text-center">
+        <span className="w-14 h-14 rounded-full bg-muted text-white flex items-center justify-center mb-3"><WifiOff size={28} /></span>
+        <p className="text-lg font-extrabold">Не удаётся проверить оплату</p>
+        <p className="text-muted text-xs mt-1">Похоже, пропала связь. Если вы уже оплатили, деньги дойдут.</p>
+        <button className="btn-primary mt-8" onClick={() => refetch()}>Проверить ещё раз</button>
+        <button className="btn-ghost mt-3" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-10 flex flex-col items-center text-center">
+      <span className="px-4 py-2.5 rounded-xl2 bg-ink text-white text-sm font-extrabold mb-4">{card ? "Картой" : "СБП"}</span>
+      <div className="mb-6">
+        {/* после перезагрузки суммы в state нет: лучше не показать ничего, чем показать 0 ₽ */}
+        {st.total != null && <p className="text-lg font-extrabold">{formatMoney(st.total)}</p>}
+        {st.bucket && <p className="text-muted text-xs">{st.bucket}</p>}
+      </div>
+      {mock ? (
+        <>
+          <button className="btn-primary" onClick={() => nav(`/mock-pay/${orderId}`)}>
+            Выбрать исход
+          </button>
+          <p className="text-muted text-xs mt-2">Учебный платёж — банк не задействован</p>
+        </>
+      ) : st.payUrl ? (
+        <>
+          <a className="btn-primary no-underline" href={st.payUrl} target="_blank" rel="noopener">Оплатить</a>
+          <p className="text-muted text-xs mt-2">Откроется ваше приложение банка</p>
+        </>
+      ) : (
+        <p className="text-muted text-xs">Завершите оплату в приложении банка — экран обновится сам</p>
+      )}
+      <div className="flex items-center gap-2 mt-6 text-muted text-xs"><Spinner /> Ожидаем оплату…</div>
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/TgWaitPage.tsx

@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { usePairPoll } from "@/hooks/usePairPoll";
+import { clearPairing, loadPairing } from "@/lib/pairing";
+import { takeReturnTo } from "@/lib/returnTo";
+import { Spinner } from "@/components/Spinner";
+
+export function TgWaitPage() {
+  const nav = useNavigate();
+  const pairing = loadPairing();
+  const { status } = usePairPoll(pairing?.pairSession ?? null, pairing?.pollSecret ?? null);
+
+  useEffect(() => {
+    if (!pairing) { nav("/login", { replace: true }); }
+  }, [pairing, nav]);
+
+  useEffect(() => {
+    if (status === "authenticated") {
+      clearPairing();
+      // Возврат туда, откуда пришёл (напр. ссылка на оплату), иначе на баланс.
+      nav(takeReturnTo(), { replace: true });
+    }
+    if (status === "expired") {
+      clearPairing();
+      nav("/login", { replace: true, state: { expired: true } });
+    }
+  }, [status, nav]);
+
+  return (
+    <div className="pt-16 text-center">
+      <h1 className="text-xl font-extrabold mb-2">Премиум Водитель</h1>
+      <p className="text-muted text-sm mb-6">
+        Бот назовёт число ниже и попросит подтвердить вход — нажмите «Это я, войти»
+        (или поделитесь номером, если входите впервые). Затем вернитесь сюда, вход
+        произойдёт автоматически.
+      </p>
+      {pairing?.confirmCode && (
+        // Число сверки: бот называет его в своём сообщении. Если человек попал в
+        // бот по чужой ссылке, у него на экране этого числа нет — подтверждать
+        // нечего, и токен не выдаётся.
+        <div className="card p-4 mb-6">
+          <p className="text-muted text-xs mb-1">Код подтверждения</p>
+          <p className="text-2xl font-extrabold tracking-widest">{pairing.confirmCode}</p>
+          <p className="text-muted text-xs mt-2">
+            Это же число должен назвать бот. Не совпало — нажмите в боте «Это не я».
+          </p>
+        </div>
+      )}
+      {pairing?.deepLink && (
+        <a href={pairing.deepLink} target="_blank" rel="noopener noreferrer" className="btn-primary block text-center mb-6">
+          Открыть Telegram
+        </a>
+      )}
+      <Spinner />
+    </div>
+  );
+}

driver-pwa/frontend/src/pages/TopupPage.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("@/api/driver", () => ({
+  topup: vi.fn(async () => ({ order_id: "o9", pay_url: "https://qr.nspk.ru/x", commission: 52,
+                              total: 1052, mock: false })),
+  getCommission: vi.fn(async () => ({ rate: 0.052 })),
+  getBuckets: vi.fn(async () => ({
+    buckets: ["Долг аренда", "Долг по штрафам"], with_debt: ["Долг аренда"],
+  })),
+  apiErrorText: vi.fn(async (_e: unknown, fallback: string) => fallback),
+}));
+import { TopupPage } from "./TopupPage";
+import * as driver from "@/api/driver";
+
+const wrap = () => {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter><TopupPage /></MemoryRouter>
+    </QueryClientProvider>
+  );
+};
+
+describe("TopupPage", () => {
+  it("keypad builds amount, shows total, and submits topup", async () => {
+    wrap();
+    await userEvent.click(screen.getByRole("button", { name: "1" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    expect(screen.getByTestId("amount").textContent).toBe("1 000 ₽");
+    expect(screen.getByTestId("total").textContent).toContain("1 052");
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenCalledWith("Долг аренда", 1000, "qr", false);
+  });
+
+  it("decimal key builds kopecks and they reach the backend", async () => {
+    // Клавиша разделителя была нарисована, но ничего не делала: заплатить точный
+    // долг вроде 1234,56 было нечем.
+    wrap();
+    for (const k of ["1", "0", "0", ",", "5", "2"]) {
+      await userEvent.click(screen.getByRole("button", { name: k }));
+    }
+    expect(screen.getByTestId("amount").textContent).toBe("100,52 ₽");
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenCalledWith("Долг аренда", 100.52, "qr", false);
+  });
+
+  it("lets the driver choose the debt category instead of hardcoding rent", async () => {
+    wrap();
+    await screen.findByRole("button", { name: "Долг по штрафам" });
+    await userEvent.click(screen.getByRole("button", { name: "Долг по штрафам" }));
+    await userEvent.click(screen.getByRole("button", { name: "5" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenCalledWith("Долг по штрафам", 500, "qr", false);
+  });
+});
+
+describe("боевая оплата под просмотром", () => {
+  it("по умолчанию платёж учебный — флаг в запрос уходит выключенным", async () => {
+    const { useStaff } = await import("@/store/staff");
+    useStaff.getState().clear();
+    wrap();
+    await userEvent.click(screen.getByRole("button", { name: "5" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenLastCalledWith("Долг аренда", 500, "qr", false);
+  });
+
+  it("включённая боевая оплата предупреждает и уходит с флагом", async () => {
+    const { useStaff } = await import("@/store/staff");
+    useStaff.getState().setLivePay(true);
+    wrap();
+    expect(screen.getByText(/деньги спишутся по-настоящему/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "5" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: "0" }));
+    await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
+    expect(driver.topup).toHaveBeenLastCalledWith("Долг аренда", 500, "qr", true);
+    useStaff.getState().clear();
+  });
+});

driver-pwa/frontend/src/pages/TopupPage.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Delete } from "lucide-react";
+import { toast } from "sonner";
+import { apiErrorText, topup, getCommission, getBuckets } from "@/api/driver";
+import { keypadReduce, parseAmount, withCommission } from "@/lib/amount";
+import { formatMoney } from "@/lib/format";
+import { markPaymentActivity } from "@/lib/paymentWatch";
+import { useStaff } from "@/store/staff";
+import { Segment } from "@/components/Segment";
+import { Spinner } from "@/components/Spinner";
+
+const QUICK = ["500", "1000", "2000"];
+const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ",", "0", "back"];
+
+export function TopupPage() {
+  const nav = useNavigate();
+  const livePay = useStaff((s) => s.livePay);
+  const loc = useLocation();
+  const fromBalance = (loc.state as { bucket?: string } | null)?.bucket;
+  // Список категорий приходит с сервера — там же он и проверяется. Хардкод
+  // «Долг аренда» отправлял платёж в аренду даже тем, у кого её нет.
+  const { data: bucketData } = useQuery({ queryKey: ["buckets"], queryFn: getBuckets });
+  const options = bucketData?.buckets ?? (fromBalance ? [fromBalance] : []);
+  const [picked, setPicked] = useState<string | null>(null);
+  const bucket = picked ?? fromBalance ?? bucketData?.with_debt[0] ?? options[0] ?? "";
+
+  const [raw, setRaw] = useState("");
+  const [method, setMethod] = useState("qr");
+  const [busy, setBusy] = useState(false);
+  const { data: commission } = useQuery({ queryKey: ["commission"], queryFn: getCommission });
+  const rate = commission?.rate ?? 0.052; // fallback only while loading
+
+  const base = parseAmount(raw);
+  const { commission: fee, total } = withCommission(base, rate);
+
+  function press(k: string) {
+    setRaw((r) => keypadReduce(r, k));
+  }
+
+  async function pay() {
+    if (base <= 0 || !bucket || busy) return;
+    setBusy(true);
+    try {
+      const r = await topup(bucket, base, method as "qr" | "card", livePay);
+      // Учебный платёж (сотрудник смотрит от чужого лица): банка нет, платить
+      // негде — сразу на экран выбора исхода, дальше всё как у водителя.
+      if (r.mock) {
+        nav(`/mock-pay/${r.order_id}`, { state: { total: r.total, bucket, base, method } });
+        return;
+      }
+      // Отметка ДО ухода на оплату: вернись водитель на баланс жестом «назад»
+      // раньше вебхука банка, экран обязан опрашивать себя и подхватить платёж.
+      markPaymentActivity();
+      nav(`/pay/${r.order_id}`, { state: { payUrl: r.pay_url, total: r.total, bucket, base, method } });
+    } catch (err: unknown) {
+      // Текст с сервера, а не глухое «не удалось»: минимум СБП, потолок суммы и
+      // неизвестная категория объясняются словами, иначе экран молча не реагирует.
+      toast.error(await apiErrorText(err, "Не удалось создать платёж"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav(-1)}>‹ Назад</button>
+
+      {/* Категорию выбирают в шторке на главном экране. Пришли оттуда — показываем
+          выбранное строкой, а не рядом чипов: второй выбор того же самого сбивает
+          с толку. Чипы остаются для входа сюда напрямую (кнопка «Пополнить» без
+          категории, возврат «пополнить ещё раз» с экрана оплаты). */}
+      {fromBalance ? (
+        <p className="text-muted text-xs mb-3">Пополняем: <b className="text-ink">{bucket}</b></p>
+      ) : options.length > 1 ? (
+        <div className="flex gap-1.5 mb-3 overflow-x-auto">
+          {options.map((b) => (
+            <button
+              key={b}
+              onClick={() => setPicked(b)}
+              className={`shrink-0 px-3 py-2 rounded-xl2 text-xs border ${
+                b === bucket ? "border-line bg-surface font-semibold" : "border-line text-muted"
+              }`}
+            >
+              {b}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <p data-testid="amount" className="text-3xl font-extrabold text-center mt-2">{formatMoney(base)}</p>
+      <p data-testid="total" className="text-muted text-xs text-center mb-3">
+        к оплате {formatMoney(total)} (комиссия {formatMoney(fee)})
+      </p>
+
+      <div className="flex gap-1.5 mb-3">
+        {QUICK.map((q) => (
+          <button key={q} className="flex-1 py-2 rounded-xl2 text-xs bg-surface border border-line" onClick={() => setRaw(q)}>
+            {q}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-3 gap-2 mb-4">
+        {KEYS.map((k) => (
+          <button
+            key={k}
+            aria-label={k}
+            className="bg-surface border border-line rounded-xl2 py-3 text-lg font-semibold flex items-center justify-center"
+            onClick={() => press(k)}
+          >
+            {k === "back" ? <Delete size={18} /> : k}
+          </button>
+        ))}
+      </div>
+
+      <div className="mb-4">
+        <Segment value={method} onChange={setMethod} options={[{ value: "qr", label: "СБП" }, { value: "card", label: "Картой" }]} />
+      </div>
+
+      {livePay && (
+        // Предупреждение прямо над кнопкой: под чужим лицом ошибиться легко, а
+        // отыграть боевой платёж — это возврат в банке и правка в 1С.
+        <p className="text-neg text-xs mb-2 text-center">
+          Боевая оплата: деньги спишутся по-настоящему и зачислятся водителю
+        </p>
+      )}
+      <button className="btn-primary" disabled={busy || base <= 0 || !bucket} onClick={pay}>
+        {busy ? <Spinner /> : "Оплатить"}
+      </button>
+    </div>
+  );
+}

driver-pwa/frontend/src/store/auth.ts

@@ -0,0 +1,79 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/** Кем открыт сеанс: сам водитель или сотрудник, смотрящий от его лица.
+ * Признак приезжает из токена (claim `imp`), здесь он только продублирован для
+ * интерфейса — проверять его на бэкенде по этому полю нельзя и не нужно. */
+export interface ViewAs {
+  impersonated: boolean;
+  /** ФИО водителя — показывать в плашке. У обычного входа неизвестно и не нужно. */
+  driverName: string | null;
+}
+
+/** Собственный сеанс, отложенный на время просмотра чужого. */
+interface OwnSession {
+  token: string;
+  driverId: number | null;
+}
+
+interface AuthState extends ViewAs {
+  token: string | null;
+  driverId: number | null;
+  /** Сеанс, к которому вернёт «выйти из просмотра». null — возвращаться некуда. */
+  own: OwnSession | null;
+  setSession: (token: string, driverId: number, view?: Partial<ViewAs>) => void;
+  /** Начать просмотр от лица водителя, отложив собственный вход. */
+  startImpersonation: (token: string, driverId: number, driverName: string) => void;
+  /** Вернуться к себе. true — вернулись, false — своего входа не было. */
+  stopImpersonation: () => boolean;
+  clear: () => void;
+}
+
+export const useAuth = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      token: null,
+      driverId: null,
+      impersonated: false,
+      driverName: null,
+      own: null,
+      setSession: (token, driverId, view) =>
+        set({
+          token,
+          driverId,
+          impersonated: view?.impersonated ?? false,
+          driverName: view?.driverName ?? null,
+        }),
+      startImpersonation: (token, driverId, driverName) => {
+        const s = get();
+        // Свой вход откладываем ОДИН раз — при переходе из обычного сеанса. Смена
+        // водителя внутри просмотра не должна затирать отложенное собственным
+        // чужим токеном, иначе «вернуться к себе» вернёт к предыдущему водителю.
+        const own = s.impersonated
+          ? s.own
+          : s.token
+            ? { token: s.token, driverId: s.driverId }
+            : null;
+        set({ token, driverId, impersonated: true, driverName, own });
+      },
+      stopImpersonation: () => {
+        const own = get().own;
+        if (!own) {
+          set({ token: null, driverId: null, impersonated: false, driverName: null });
+          return false;
+        }
+        set({
+          token: own.token,
+          driverId: own.driverId,
+          impersonated: false,
+          driverName: null,
+          own: null,
+        });
+        return true;
+      },
+      clear: () =>
+        set({ token: null, driverId: null, impersonated: false, driverName: null, own: null }),
+    }),
+    { name: "pp-driver-auth" }
+  )
+);

driver-pwa/frontend/src/store/staff.ts

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * Сеанс СОТРУДНИКА — учётка CRM, которой берут просмотр от лица водителя.
+ *
+ * Хранится отдельно от водительского: это два разных токена с разным смыслом.
+ * «Перестать смотреть за водителя» обязано оставлять сотрудника залогиненным,
+ * иначе смена водителя каждый раз означала бы новый ввод пароля; и наоборот —
+ * `clear()` водительского сеанса не должен трогать сотрудника.
+ */
+interface StaffState {
+  token: string | null;
+  username: string | null;
+  /** Боевая оплата под просмотром: платёж уходит в банк и зачисляется водителю.
+   *  Выключено по умолчанию — под чужим лицом легко забыть, кого пополняешь. */
+  livePay: boolean;
+  setStaff: (token: string, username: string) => void;
+  setLivePay: (on: boolean) => void;
+  clear: () => void;
+}
+
+export const useStaff = create<StaffState>()(
+  persist(
+    (set) => ({
+      token: null,
+      username: null,
+      livePay: false,
+      setStaff: (token, username) => set({ token, username }),
+      setLivePay: (livePay) => set({ livePay }),
+      // Выход сотрудника гасит и боевой режим: следующий раз он включается осознанно.
+      clear: () => set({ token: null, username: null, livePay: false }),
+    }),
+    { name: "pp-driver-staff" }
+  )
+);

driver-pwa/frontend/src/sw.ts

@@ -0,0 +1,76 @@
+/// <reference lib="webworker" />
+import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";
+import { clientsClaim } from "workbox-core";
+
+/**
+ * Сервис-воркер приложения.
+ *
+ * Свой, а не сгенерированный: `generateSW` умеет только кэш, а нам нужны
+ * обработчики `push` и `notificationclick` — уведомления показывает именно
+ * воркер, страница для этого может быть закрыта.
+ *
+ * Кэш остаётся прежним (precache от workbox), поведение обновления тоже:
+ * `skipWaiting` + `clientsClaim`, как было при registerType: "autoUpdate".
+ */
+declare const self: ServiceWorkerGlobalScope;
+
+precacheAndRoute(self.__WB_MANIFEST);
+cleanupOutdatedCaches();
+self.skipWaiting();
+clientsClaim();
+
+interface PushPayload {
+  title?: string;
+  body?: string;
+  url?: string;
+  tag?: string;
+  /** Номер уведомления в журнале — по нему отмечается прочтение. */
+  id?: number;
+}
+
+self.addEventListener("push", (event: PushEvent) => {
+  let data: PushPayload = {};
+  try {
+    data = event.data ? (event.data.json() as PushPayload) : {};
+  } catch {
+    // Пуш без разбираемой нагрузки: показать что-то всё равно надо — молчание
+    // выглядит как «уведомления не работают».
+    data = {};
+  }
+  const title = data.title || "Премиум Водитель";
+  event.waitUntil(
+    self.registration.showNotification(title, {
+      body: data.body || "",
+      icon: "/icons/icon-192.png",
+      badge: "/icons/icon-192.png",
+      // tag схлопывает однотипные: пять штрафов подряд не завалят шторку.
+      tag: data.tag,
+      data: { url: data.url || "/", id: data.id },
+    }),
+  );
+});
+
+self.addEventListener("notificationclick", (event: NotificationEvent) => {
+  event.notification.close();
+  const url = (event.notification.data?.url as string) || "/";
+  const id = event.notification.data?.id as number | undefined;
+  // Нажатие — единственный честный признак, что уведомление увидели. Отметить
+  // его прямо отсюда нельзя: токен водителя лежит в хранилище страницы, а
+  // воркеру оно недоступно. Поэтому номер едет параметром, а отмечает страница.
+  const target = id ? `${url}${url.includes("?") ? "&" : "?"}n=${id}` : url;
+  event.waitUntil(
+    (async () => {
+      const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+      // Уже открытое окно приложения переиспользуем: второй экземпляр рядом с
+      // первым сбивает с толку, и водитель теряет то, что было на экране.
+      for (const client of all) {
+        if ("focus" in client) {
+          await client.focus();
+          if ("navigate" in client) await client.navigate(target);
+          return;
+        }
+      }
+      await self.clients.openWindow(target);
+    })(),
+  );
+});

driver-pwa/frontend/src/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

driver-pwa/frontend/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+// Подставляются на сборке (vite.config.ts → define). Нужны экрану отладки:
+// показывают, какой именно бандл сейчас открыт.
+declare const __BUILD_COMMIT__: string;
+declare const __BUILD_TIME__: string;

driver-pwa/frontend/tailwind.config.js

@@ -0,0 +1,38 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      /**
+       * Палитра сайта pptaxi.ru — снята с ЖИВОГО сайта (переменные --s-* в его
+       * инлайн-CSS), а не из локального чекаута: тот отстал на редизайн и
+       * предлагал тёмно-синюю тему, которой на сайте давно нет.
+       *
+       * Имена — роли, а не краски: «canvas» останется фоном страницы, даже если
+       * однажды перестанет быть светлым.
+       */
+      colors: {
+        canvas: "#EEF1F5",       // --s-bg — фон страницы
+        "canvas-soft": "#F5F7FA", // --s-bg-soft — подложка под блоками
+        surface: "#FFFFFF",      // --s-paper — карточки, поля ввода
+        line: "#DDE3EC",         // --s-line — границы и разделители
+        "line-soft": "#E5EAF1",
+        ink: "#0F172A",          // --s-ink — основной текст
+        "ink-soft": "#475569",   // --s-ink-soft — вторичный текст
+        muted: "#94A3B8",        // --s-ink-mute — подписи
+        accent: "#DC2626",       // --s-accent — фирменный красный, кнопка действия
+        "accent-press": "#B91C1C",
+        "accent-soft": "#FEF2F2",
+        warn: "#D97706",         // --s-warn
+        // Деньги: приход зелёным (--s-ok), долг — фирменным красным. Свой оттенок
+        // тут заводить не стали: у долга и главного действия один цвет намеренно,
+        // это то, ради чего экран открывают.
+        pos: "#059669",
+        neg: "#DC2626",
+      },
+      fontFamily: { sans: ["Inter", "system-ui", "sans-serif"] },
+      borderRadius: { xl2: "12px" },  // --s-radius-md
+    },
+  },
+  plugins: [],
+};

driver-pwa/frontend/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2021", "useDefineForClassFields": true, "lib": ["ES2021", "DOM", "DOM.Iterable", "WebWorker"],
+    "module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true,
+    "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true,
+    "noUnusedParameters": true, "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "types": ["vite-plugin-pwa/client", "vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src"]
+}

driver-pwa/frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

driver-pwa/frontend/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true,
+    "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true,
+    "noEmit": true, "strict": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts", "dev-proxy.test.ts"]
+}

driver-pwa/frontend/vite.config.ts

@@ -0,0 +1,83 @@
+import { execSync } from "child_process";
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
+import path from "path";
+
+/**
+ * Что именно сейчас открыто — видно на вкладке «Отладка».
+ *
+ * Без этого «правка не приехала» и «приехала, но кэш старый» выглядят
+ * одинаково, а проверяются по-разному. Коммит берём из git; вне репозитория
+ * (сборка из архива, CI без .git) — честный «unknown», а не падение сборки.
+ */
+function buildCommit(): string {
+  try {
+    return execSync("git rev-parse --short HEAD", { stdio: ["ignore", "pipe", "ignore"] })
+      .toString().trim() || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+/**
+ * Локальная разработка ходит в бэкенд ЧЕРЕЗ ПРОКСИ dev-сервера, а не напрямую.
+ *
+ * Почему не «разрешить localhost в CORS бэкенда»: через прокси запрос уходит с
+ * того же origin, что и страница (http://localhost:5174/api/...), поэтому CORS
+ * в разработке не участвует вообще — ни preflight, ни credentials. Боевой
+ * список origin'ов на бэкенде остаётся закрытым, и CORS_ALLOW_LOCALHOST ради
+ * этого фронта включать не нужно.
+ *
+ * Дефолтная цель прокси — ЛОКАЛЬНЫЙ бэкенд, а не crm.pptaxi.ru. Контур боевой:
+ * «по умолчанию проксировать в прод» означало бы, что первый же тычок в
+ * «Пополнить» на машине разработчика создаёт платёж на живом терминале и живой
+ * чек 54-ФЗ. Другой адрес задаётся VITE_API_TARGET — тем же именем, что в CRM
+ * (crm2/frontend/vite.config.ts), чтобы рецепт был один на оба фронта.
+ */
+export default defineConfig(({ command, mode }) => {
+  // База для ky (src/api/client.ts): в dev — свой же origin, дальше прокси.
+  // Ставим ТОЛЬКО если разработчик не задал базу сам (.env.local, .env,
+  // VITE_API_BASE=... перед командой): loadEnv отдаёт и файлы, и process.env,
+  // причём process.env приоритетнее файлов — без этой проверки собственная
+  // настройка молча перебивалась бы нашим дефолтом.
+  // В сборку (command === "build") не лезем никогда: там база остаётся боевой —
+  // из .env, либо из дефолта в client.ts.
+  if (command === "serve" && !loadEnv(mode, __dirname, "VITE_").VITE_API_BASE) {
+    process.env.VITE_API_BASE = "/api";
+  }
+
+  return {
+    define: {
+      __BUILD_COMMIT__: JSON.stringify(buildCommit()),
+      __BUILD_TIME__: JSON.stringify(new Date().toISOString().slice(0, 16).replace("T", " ")),
+    },
+    plugins: [
+      react(),
+      // injectManifest, а не generateSW: воркер свой, потому что уведомления
+      // показывает он (см. src/sw.ts), а сгенерированный умеет только кэш.
+      VitePWA({
+        strategies: "injectManifest",
+        srcDir: "src",
+        filename: "sw.ts",
+        registerType: "autoUpdate",
+        manifest: false,
+        includeAssets: ["icons/*.png"],
+        injectManifest: { globPatterns: ["**/*.{js,css,html,png,svg,webmanifest}"] },
+      }),
+    ],
+    resolve: { alias: { "@": path.resolve(__dirname, "src") } },
+    server: {
+      port: 5174,
+      proxy: {
+        "/api": {
+          // secure: false нужен только для VITE_API_TARGET на https-цель с
+          // самоподписанным сертификатом; на дефолтную http-цель не влияет.
+          target: process.env.VITE_API_TARGET || "http://127.0.0.1:8000",
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+  };
+});

driver-pwa/frontend/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  // Те же подстановки, что и в боевой сборке (vite.config.ts): без них модуль с
+  // __BUILD_COMMIT__ падает в тестах на ReferenceError, хотя в приложении работает.
+  define: {
+    __BUILD_COMMIT__: JSON.stringify("test"),
+    __BUILD_TIME__: JSON.stringify("test"),
+  },
+  plugins: [react()],
+  resolve: { alias: { "@": path.resolve(__dirname, "src") } },
+  test: { globals: true, environment: "jsdom", setupFiles: ["./src/test/setup.ts"] },
+});

mechanic-pwa/frontend/src/App.tsx

@@ -1,7 +1,5 @@
 import { Routes, Route, Navigate } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/store/auth";
-import { getMe } from "@/api/me";
 import { useMeSync } from "@/hooks/useMeSync";
 import Login from "@/pages/Login";
 import ActionMenu from "@/pages/ActionMenu";
@@ -15,14 +13,7 @@ import RepairDetailPage from "@/pages/repairs/RepairDetailPage";
 import EditRepairPage from "@/pages/repairs/EditRepairPage";
 import CarSelectPage from "@/pages/repairs/CarSelectPage";
 import CreateRepairPage from "@/pages/repairs/CreateRepairPage";
-import ReceivingPage from "@/pages/warehouse/ReceivingPage";
-import ReceivingDraftPage from "@/pages/warehouse/ReceivingDraftPage";
-import ReceiptDetailPage from "@/pages/warehouse/ReceiptDetailPage";
-import StocktakePage from "@/pages/warehouse/StocktakePage";
-import TyresPage from "@/pages/warehouse/TyresPage";
-import TyreSizesPage from "@/pages/warehouse/TyreSizesPage";
-import TyreJournalPage from "@/pages/warehouse/TyreJournalPage";
-import StocktakeSessionPage from "@/pages/warehouse/StocktakeSessionPage";
+import RepairHistoryPage from "@/pages/repairs/RepairHistoryPage";
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const token = useAuth((s) => s.token);
@@ -30,20 +21,6 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
-/**
- * Складские разделы пока только админам. Сервер и так отдаёт 403, но без
- * клиентской проверки прямой ссылкой можно было бы открыть пустой экран с
- * ошибкой — это читается как поломка, а не как «вам сюда нельзя».
- */
-function RequireAdmin({ children }: { children: React.ReactNode }) {
-  const token = useAuth((s) => s.token);
-  const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
-  if (!token) return <Navigate to="/login" replace />;
-  if (meQuery.isLoading) return null;
-  if (!meQuery.data?.is_admin) return <Navigate to="/" replace />;
-  return <>{children}</>;
-}
-
 export default function App() {
   // У35: фоновая сверка прав механика раз в 5 минут — выкидывает на /login
   // с сообщением «Доступ отозван», если админ снял can_login_pwa или вывел
@@ -64,18 +41,14 @@ export default function App() {
       <Route path="/repairs/new" element={<RequireAuth><CarSelectPage /></RequireAuth>} />
       <Route path="/repairs/new/:carId" element={<RequireAuth><CreateRepairPage /></RequireAuth>} />
       <Route path="/repairs/new-external" element={<RequireAuth><CreateRepairPage /></RequireAuth>} />
+      {/* «История ремонта». Держим выше /repairs/:id по тому же принципу, что и
+          /repairs/new: react-router ранжирует (статический сегмент весит больше
+          динамического), так что перехвата не будет и при другом порядке, но
+          глазами читается сразу — статика раньше :id. */}
+      <Route path="/repairs/history" element={<RequireAuth><RepairHistoryPage /></RequireAuth>} />
+      <Route path="/repairs/history/:carId" element={<RequireAuth><RepairHistoryPage /></RequireAuth>} />
       <Route path="/repairs/:id" element={<RequireAuth><RepairDetailPage /></RequireAuth>} />
       <Route path="/repairs/:id/edit" element={<RequireAuth><EditRepairPage /></RequireAuth>} />
-      {/* Склад — приёмка и инвентаризация с телефона (пока только админы). */}
-      <Route path="/wh/receiving" element={<RequireAdmin><ReceivingPage /></RequireAdmin>} />
-      <Route path="/wh/receiving/:id" element={<RequireAdmin><ReceivingDraftPage /></RequireAdmin>} />
-      <Route path="/wh/receipts/:id" element={<RequireAdmin><ReceiptDetailPage /></RequireAdmin>} />
-      <Route path="/wh/stocktake" element={<RequireAdmin><StocktakePage /></RequireAdmin>} />
-      <Route path="/wh/stocktake/:id" element={<RequireAdmin><StocktakeSessionPage /></RequireAdmin>} />
-      {/* Сезонная выдача резины — тот же круг, что приёмка и инвентаризация. */}
-      <Route path="/wh/tyres" element={<RequireAdmin><TyresPage /></RequireAdmin>} />
-      <Route path="/wh/tyres/sizes" element={<RequireAdmin><TyreSizesPage /></RequireAdmin>} />
-      <Route path="/wh/tyres/journal" element={<RequireAdmin><TyreJournalPage /></RequireAdmin>} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

mechanic-pwa/frontend/src/api/repairsCreate.ts

@@ -29,18 +29,6 @@ export interface PartSuggestion {
   name: string;
 }
 
-/** Позиция складского каталога для подбора детали в ремонт. */
-export interface PartCatalogItem {
-  id: number;
-  name: string;
-  article: string | null;
-  brand: string | null;
-  unit: string;
-  in_stock: number;            // суммарный остаток (может быть < 0)
-  price_hint: number | string | null;
-  fits: boolean;               // подходит этой машине
-}
-
 export interface PresignResponse {
   photo_uuid: string;
   extension: string;
@@ -65,16 +53,14 @@ export interface CreateWorkPayload {
 }
 
 export interface CreatePartPayload {
-  part_id: number;
+  name: string;
   qty: number;
-  name?: string;   // снимок имени (сервер возьмёт из каталога, если пусто)
 }
 
 export interface CreateOilChangePayload {
   enabled: boolean;
   mileage_at_change: number | null;
   next_in_km: number;
-  oil_type: string; // engine | cvt | akpp
   sticker_photo_uuid: string | null;
   sticker_extension: string | null;
 }
@@ -91,10 +77,7 @@ export interface CreateRepairPayload {
   works: CreateWorkPayload[];
   parts: CreatePartPayload[];
   photos: CreatePhotoPayload[];
-  // 1:N — за один заезд бывает несколько замен (двигатель + коробка).
-  // Пришло на смену одиночному oil_change; бэкенд принимает оба, но новый
-  // клиент шлёт только список.
-  oil_changes: CreateOilChangePayload[];
+  oil_change: CreateOilChangePayload | null;
   // Работавшие механики (делёж 1/N). Если не передан — backend сидит
   // одного создателя. Порядок = sort_order.
   mechanic_ids?: number[];
@@ -119,9 +102,19 @@ export interface CreateRepairResponse {
   tg_outbox_status: string;
 }
 
-export async function searchCars(q: string): Promise<CarBrief[]> {
-  const qs = q ? `?q=${encodeURIComponent(q)}` : "";
-  return api.get(`cars${qs}`).json<CarBrief[]>();
+export interface SearchCarsOptions {
+  // Искать по всему парку, а не только по активным машинам. Нужно «Истории
+  // ремонта»: ремонты выведенной машины никуда не делись, их ищут и после.
+  // Создание ремонта этим НЕ пользуется — там годятся только активные.
+  includeInactive?: boolean;
+}
+
+export async function searchCars(q: string, opts: SearchCarsOptions = {}): Promise<CarBrief[]> {
+  const search = new URLSearchParams();
+  if (q) search.set("q", q);
+  if (opts.includeInactive) search.set("include_inactive", "true");
+  const qs = search.toString();
+  return api.get(`cars${qs ? `?${qs}` : ""}`).json<CarBrief[]>();
 }
 
 export async function getCarContext(carId: number): Promise<CarContext> {
@@ -139,25 +132,6 @@ export async function suggestParts(q: string): Promise<PartSuggestion[]> {
     .json<PartSuggestion[]>();
 }
 
-/**
- * Поиск детали в складском каталоге для конкретной машины.
- * По умолчанию — только подходящие этой машине + без привязки к марке;
- * showAll=true снимает фильтр применимости.
- */
-export async function searchParts(
-  q: string,
-  carId: number | null,
-  showAll = false,
-): Promise<PartCatalogItem[]> {
-  const params = new URLSearchParams();
-  // Без машины (ремонт «с улицы») применимость считать не по чему —
-  // бэкенд отдаст каталог целиком.
-  if (carId) params.set("car_id", String(carId));
-  if (q.trim()) params.set("q", q.trim());
-  if (showAll) params.set("all", "true");
-  return api.get(`parts/search?${params.toString()}`).json<PartCatalogItem[]>();
-}
-
 export async function presignPhoto(extension: string, photo_uuid?: string): Promise<PresignResponse> {
   return api
     .post("repairs/photos/presign", {

mechanic-pwa/frontend/src/api/repairsFeed.ts

@@ -12,14 +12,14 @@ export interface FeedItem {
   car_model: string | null;
   driver_name: string | null;
   mechanic_name: string;
-  // Пробег на момент ремонта. Бэкенд отдавал его и раньше, но лента поле не
-  // забирала — чтобы посмотреть, приходилось проваливаться в каждый ремонт.
-  mileage: number | null;
   is_external: boolean;
   works_preview: FeedWorkBrief[];
   works_extra: number;
   works_total: number; // сумма работ без запчастей
   photo_url: string | null;
+  // Пробег на момент ремонта. У старых ремонтов не заполнен — показываем
+  // это честно, а не нулём (экран «История ремонта»).
+  mileage?: number | null;
 }
 
 export interface FeedResponse {
@@ -30,17 +30,19 @@ export interface FeedResponse {
 export interface FeedParams {
   limit?: number;
   cursor?: string | null;
-  // Поисковая подстрока: госномер, марка или модель.
-  q?: string | null;
+  // Фильтр по машине — лента становится историей ремонтов одного авто.
+  car_id?: number;
+  // Превью-фото. false — экран превью не рисует, и backend не ходит за
+  // ссылками в хранилище. По умолчанию (не передаём) фото приходят.
+  with_photos?: boolean;
 }
 
 export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedResponse> {
   const search = new URLSearchParams();
   if (params.limit) search.set("limit", String(params.limit));
   if (params.cursor) search.set("cursor", params.cursor);
-  // Пустой/пробельный запрос не шлём — это обычная лента, а не поиск.
-  const q = params.q?.trim();
-  if (q) search.set("q", q);
+  if (params.car_id) search.set("car_id", String(params.car_id));
+  if (params.with_photos === false) search.set("with_photos", "false");
   const qs = search.toString();
   return api
     .get(`repairs${qs ? `?${qs}` : ""}`)
@@ -71,10 +73,6 @@ export interface RepairDetailPart {
   id: number;
   name: string;
   qty: number;
-  // Складская позиция. null у исторических строк, заведённых свободным
-  // текстом до перевода запчастей на каталог — их склад не трогает.
-  part_id: number | null;
-  article: string | null;
 }
 
 export interface RepairDetailPhoto {
@@ -86,7 +84,6 @@ export interface RepairDetailPhoto {
 export interface RepairDetailOil {
   mileage_at_change: number | null;
   next_in_km: number | null;
-  oil_type: string; // engine | cvt | akpp
   has_sticker: boolean;
   sticker_thumb_url: string | null;
   sticker_orig_url: string | null;
@@ -101,8 +98,6 @@ export interface RepairDetailMechanic {
 export interface RepairDetailResponse {
   id: number;
   created_at: string;
-  // Машина парка; null у ремонта «с улицы».
-  car_id: number | null;
   car_plate: string | null;
   car_make: string | null;
   car_model: string | null;
@@ -112,8 +107,7 @@ export interface RepairDetailResponse {
   works: RepairDetailWork[];
   parts: RepairDetailPart[];
   photos: RepairDetailPhoto[];
-  oil_change: RepairDetailOil | null;   // legacy: первая запись
-  oil_changes: RepairDetailOil[];       // 1:N — двигатель + коробка за заезд
+  oil_change: RepairDetailOil | null;
   total_sum: number;
   // Работавшие механики (делёж 1/N total_sum). Может отсутствовать на
   // старых ответах backend — фронт делает fallback на одного создателя.
@@ -137,9 +131,6 @@ export interface PatchWork {
 }
 
 export interface PatchPart {
-  // Складская позиция. Без part_id строка остаётся свободным текстом и склад
-  // не трогает (так сохраняются исторические строки).
-  part_id?: number | null;
   name: string;
   qty: number;
 }
@@ -148,15 +139,13 @@ export interface PatchOilChange {
   enabled: boolean;
   mileage_at_change: number | null;
   next_in_km: number | null;
-  oil_type?: string; // engine | transmission | cvt | akpp
 }
 
 export interface PatchRepairPayload {
   mileage: number | null;
   works: PatchWork[];
   parts: PatchPart[];
-  // Полная замена набора замен масла за заезд (пустой список = замен не было).
-  oil_changes: PatchOilChange[];
+  oil_change: PatchOilChange | null;
   // Работавшие механики. Опционально — если не передан, набор не меняется.
   mechanic_ids?: number[];
 }

mechanic-pwa/frontend/src/api/warehouse.ts

@@ -1,486 +0,0 @@
-/**
- * Склад в PWA — приёмка и инвентаризация (эндпоинты /v1/mechanic/wh/*).
- *
- * Разделы админские: сервер отдаёт 403 всем остальным, поэтому клиент
- * дополнительно прячет плитки по me.is_admin — чтобы механик не упирался в
- * ошибку там, куда ему не надо.
- */
-import { HTTPError } from "ky";
-import { api } from "./client";
-
-/**
- * Текст отказа, который сервер написал для человека.
- *
- * ky кладёт в Error.message служебное «Request failed with status code 409», а
- * понятную причину бэкенд пишет в detail («Удалить находку нельзя: деталь
- * выдали после пересчёта»). Механику у стеллажа нужна именно она: по номеру
- * статуса он не поймёт, что делать дальше, и повторит то же действие.
- *
- * Запасной текст обязателен: тело читается один раз (при повторном вызове поток
- * уже пуст), у прокси-ошибок его может не быть вовсе, а валидационный 422 от
- * pydantic кладёт в detail список объектов — человеку он ничего не говорит.
- * Не-HTTP ошибка (связь отвалилась, таймаут) тоже уходит в запасной: у ky там
- * английское «Failed to fetch».
- */
-export async function apiErrorText(e: unknown, fallback: string): Promise<string> {
-  if (!(e instanceof HTTPError)) return fallback;
-  try {
-    const { detail } = (await e.response.json()) as { detail?: unknown };
-    if (typeof detail === "string" && detail.trim()) return detail.trim();
-  } catch {
-    // тело не JSON или уже прочитано — остаётся запасной текст
-  }
-  return fallback;
-}
-
-// ── Справочники ────────────────────────────────────────────────────────────
-
-export interface WhRef {
-  id: number;
-  code: string;
-  name: string;
-}
-
-export async function getPlaces(): Promise<WhRef[]> {
-  return api.get("wh/places").json<WhRef[]>();
-}
-
-export async function getSuppliers(): Promise<WhRef[]> {
-  return api.get("wh/suppliers").json<WhRef[]>();
-}
-
-// ── Приёмка ────────────────────────────────────────────────────────────────
-
-export interface DraftLine {
-  id: number;
-  brand: string | null;
-  article: string | null;
-  name: string;
-  qty: number;
-  unit_price: number | string;
-  matched_part_id: number | null;
-  matched_part_name: string | null;
-  thumb_url: string | null;
-}
-
-export interface Draft {
-  id: number;
-  source: string;
-  ext_order_id: string;
-  supplier_id: number | null;
-  supplier_name: string | null;
-  legal_entity: string | null;
-  order_date: string | null;
-  total_price: number | string | null;
-  status: string;
-  receipt_id: number | null;
-  created_at: string;
-  photo_urls: string[];
-  lines: DraftLine[];
-}
-
-export interface DraftListResponse {
-  items: Draft[];
-  total: number;
-}
-
-/** Фото накладной/чека → распознавание → черновик (приход НЕ создаётся). */
-export async function scanInvoice(files: Blob[]): Promise<Draft> {
-  const fd = new FormData();
-  files.forEach((f, i) => fd.append("files", f, `page${i + 1}.jpg`));
-  // Распознавание идёт на vision-модели и занимает десятки секунд —
-  // клиентский таймаут по умолчанию (30 с) её не дожидается.
-  return api.post("wh/receiving/scan", { body: fd, timeout: 240_000 }).json<Draft>();
-}
-
-export async function getDrafts(status = "pending"): Promise<DraftListResponse> {
-  return api.get(`wh/receiving/drafts?status=${status}`).json<DraftListResponse>();
-}
-
-export async function getDraft(id: number): Promise<Draft> {
-  return api.get(`wh/receiving/drafts/${id}`).json<Draft>();
-}
-
-export interface DraftPatch {
-  supplier_id?: number | null;
-  order_date?: string | null;
-  doc_number?: string | null;
-  comment?: string | null;
-}
-
-export async function patchDraft(id: number, body: DraftPatch): Promise<Draft> {
-  return api.patch(`wh/receiving/drafts/${id}`, { json: body }).json<Draft>();
-}
-
-export async function createDraftSupplier(
-  id: number,
-  body: { name: string; legal_entity?: string | null },
-): Promise<Draft> {
-  return api.post(`wh/receiving/drafts/${id}/supplier`, { json: body }).json<Draft>();
-}
-
-export interface DraftLinePatch {
-  article?: string | null;
-  name?: string | null;
-  qty?: number;
-  unit_price?: number;
-  matched_part_id?: number | null;
-}
-
-export async function addDraftLine(id: number, body: DraftLinePatch): Promise<Draft> {
-  return api.post(`wh/receiving/drafts/${id}/lines`, { json: body }).json<Draft>();
-}
-
-export async function patchDraftLine(
-  id: number,
-  lineId: number,
-  body: DraftLinePatch,
-): Promise<Draft> {
-  return api.patch(`wh/receiving/drafts/${id}/lines/${lineId}`, { json: body }).json<Draft>();
-}
-
-export async function deleteDraftLine(id: number, lineId: number): Promise<Draft> {
-  return api.delete(`wh/receiving/drafts/${id}/lines/${lineId}`).json<Draft>();
-}
-
-export interface PostDraftResult {
-  ok: boolean;
-  receipt_id: number;
-  lines: number;
-}
-
-export async function postDraft(
-  id: number,
-  body: { place_id: number | null; doc_date?: string | null; exclude_line_ids?: number[] },
-): Promise<PostDraftResult> {
-  return api.post(`wh/receiving/drafts/${id}/post`, { json: body }).json<PostDraftResult>();
-}
-
-export async function rejectDraft(id: number): Promise<{ ok: boolean }> {
-  return api.post(`wh/receiving/drafts/${id}/reject`).json<{ ok: boolean }>();
-}
-
-export interface ReceiptPreviewLine {
-  part_id: number;
-  name: string;
-  article: string | null;
-  qty: number;
-  thumb_url: string | null;
-}
-
-export interface Receipt {
-  id: number;
-  supplier_name: string | null;
-  doc_number: string | null;
-  doc_date: string;
-  total_amount: number | string;
-  lines_count: number;
-  posted_by_name: string | null;
-  preview_lines: ReceiptPreviewLine[];
-}
-
-export interface ReceiptListResponse {
-  items: Receipt[];
-  total: number;
-  total_sum: number | string;
-  month_total: number | string;
-  month_label: string;
-}
-
-export async function getReceipts(limit = 30): Promise<ReceiptListResponse> {
-  return api.get(`wh/receipts?limit=${limit}`).json<ReceiptListResponse>();
-}
-
-export interface ReceiptLine {
-  batch_id: number;
-  part_id: number;
-  /** Снимок имени на момент прихода — накладная исторический документ. */
-  part_name: string;
-  article: string | null;
-  qty: number;
-  /** Сколько от этой партии ещё лежит на складе (может быть < 0). */
-  qty_remaining: number;
-  unit_price: number | string;
-  amount: number | string;
-  place_code: string | null;
-  thumb_url: string | null;
-}
-
-export interface ReceiptDetail extends Receipt {
-  supplier_id: number;
-  comment: string | null;
-  created_at: string | null;
-  lines: ReceiptLine[];
-}
-
-export async function getReceipt(id: number): Promise<ReceiptDetail> {
-  return api.get(`wh/receipts/${id}`).json<ReceiptDetail>();
-}
-
-// ── Инвентаризация ─────────────────────────────────────────────────────────
-
-export interface Stocktake {
-  id: number;
-  /** Статусов ровно два — сужаем до union, чтобы «проведена» проверялась типом. */
-  status: "draft" | "done";
-  place_id: number | null;
-  place_code: string | null;
-  author_name: string | null;
-  started_at: string;
-  finished_at: string | null;
-  comment: string | null;
-  lines_total: number;
-  lines_counted: number;
-  shortage_qty: number;
-  shortage_amount: number | string;
-  surplus_qty: number;
-  surplus_amount: number | string;
-}
-
-export interface StocktakeLine {
-  id: number;
-  /**
-   * null = находка, но ТОЛЬКО до проведения: apply создаёт находке партию и
-   * прописывает её id сюда. На проведённой сессии находку узнаём иначе —
-   * см. isFind() в pages/warehouse/stocktakeSummary.ts.
-   */
-  batch_id: number | null;
-  part_id: number;
-  part_name: string;
-  article: string | null;
-  place_id: number | null;
-  place_code: string | null;
-  qty_expected: number;
-  qty_counted: number | null;
-  unit_price: number | string | null;
-  condition: "new" | "used";
-  seasons_left: number | null;
-  resolution: "not_counted" | "match" | "shortage" | "surplus";
-  delta: number;
-  delta_amount: number | string;
-  comment: string | null;
-  /** Код причины расхождения (курируемый список, зеркалит stock_reasons.py). */
-  reason_code: string | null;
-}
-
-export interface StocktakeDetail extends Stocktake {
-  lines: StocktakeLine[];
-}
-
-export interface StocktakeListResponse {
-  items: Stocktake[];
-  total: number;
-}
-
-export async function getStocktakes(): Promise<StocktakeListResponse> {
-  return api.get("wh/stocktakes").json<StocktakeListResponse>();
-}
-
-export async function getStocktake(id: number): Promise<StocktakeDetail> {
-  return api.get(`wh/stocktakes/${id}`).json<StocktakeDetail>();
-}
-
-export async function createStocktake(body: {
-  place_id: number | null;
-  comment?: string | null;
-}): Promise<StocktakeDetail> {
-  return api.post("wh/stocktakes", { json: body }).json<StocktakeDetail>();
-}
-
-export async function countLine(
-  stocktakeId: number,
-  lineId: number,
-  body: { qty_counted: number | null; comment?: string | null },
-): Promise<StocktakeLine> {
-  return api
-    .patch(`wh/stocktakes/${stocktakeId}/lines/${lineId}`, { json: body })
-    .json<StocktakeLine>();
-}
-
-export async function addFind(
-  stocktakeId: number,
-  body: { part_id: number; qty: number; place_id?: number | null; comment?: string | null },
-): Promise<StocktakeLine> {
-  return api.post(`wh/stocktakes/${stocktakeId}/finds`, { json: body }).json<StocktakeLine>();
-}
-
-/**
- * Поправить находку в черновике.
- *
- * Отдельная ручка, а не countLine: сервер пишет в аудит «было → стало» и не
- * даёт свести количество к нулю — от находки отказываются удалением строки,
- * иначе она остаётся в документе пустышкой «числилось 0 — столько и нашли».
- * Поля опциональны: шлём только то, что правим.
- */
-export async function patchFind(
-  stocktakeId: number,
-  lineId: number,
-  body: {
-    qty?: number;
-    unit_price?: number;
-    condition?: "new" | "used";
-    seasons_left?: number | null;
-    comment?: string | null;
-    reason_code?: string | null;
-  },
-): Promise<StocktakeLine> {
-  return api
-    .patch(`wh/stocktakes/${stocktakeId}/finds/${lineId}`, { json: body })
-    .json<StocktakeLine>();
-}
-
-/**
- * Убрать строку из черновика. Сервер разрешает только находку: обычную строку
- * не заводил человек — она означает «эту позицию надо обойти», и её удаление
- * молча вычеркнуло бы позицию из пересчёта.
- */
-export async function deleteStocktakeLine(
-  stocktakeId: number,
-  lineId: number,
-): Promise<{ ok: boolean }> {
-  return api
-    .delete(`wh/stocktakes/${stocktakeId}/lines/${lineId}`)
-    .json<{ ok: boolean }>();
-}
-
-export async function applyStocktake(id: number): Promise<StocktakeDetail> {
-  return api.post(`wh/stocktakes/${id}/apply`).json<StocktakeDetail>();
-}
-
-export async function deleteStocktake(id: number): Promise<{ ok: boolean }> {
-  return api.delete(`wh/stocktakes/${id}`).json<{ ok: boolean }>();
-}
-
-// ── Сезонная выдача резины ─────────────────────────────────────────────────
-//
-// Комплект живёт на машине от осени до следующей осени, поэтому выдача — не
-// разовое списание, а документ со статусом. Закрыть предыдущий комплект
-// (вернули / списали / не найден) обязательно, иначе сервер отвечает 409.
-
-/** Три градации состояния. На сервере это «сколько сезонов осталось»: 2/1/0. */
-export type TyreGrade = "good" | "season" | "worn";
-
-export const TYRE_GRADE_LABEL: Record<TyreGrade, string> = {
-  good: "Хорошая",
-  season: "На сезон",
-  worn: "Под списание",
-};
-
-export interface TyreStockRow {
-  part_id: number;
-  name: string;
-  size: string | null;
-  condition: string;
-  qty: number;
-  by_grade: Partial<Record<TyreGrade, number>>;
-  places: string[];
-  suggested: boolean;
-  /** Подтверждённая применимость к выбранной машине. */
-  fits: boolean;
-}
-
-export interface TyreSet {
-  id: number;
-  car_id: number | null;
-  car_number: string | null;
-  driver_id: number | null;
-  driver_fio: string | null;
-  part_id: number;
-  part_name: string | null;
-  size: string | null;
-  season: string;
-  qty: number;
-  place_name: string | null;
-  issued_at: string;
-  issued_by: string | null;
-  grade_out: TyreGrade | null;
-  status: "on_car" | "returned" | "scrapped" | "lost";
-  closed_at: string | null;
-  closed_by: string | null;
-  grade_in: TyreGrade | null;
-  close_comment: string | null;
-  comment: string | null;
-}
-
-export interface TyreContext {
-  car_id: number;
-  car_number: string | null;
-  brand: string | null;
-  model: string | null;
-  driver_id: number | null;
-  driver_fio: string | null;
-  suggested_size: string | null;
-  open_set: TyreSet | null;
-  stock: TyreStockRow[];
-  /** Известно ли, что подходит машине. false — фильтровать нечем, показываем всё. */
-  fit_known: boolean;
-}
-
-export interface TyreClose {
-  action: "returned" | "scrapped" | "lost";
-  grade?: TyreGrade;
-  place_id?: number | null;
-  comment?: string | null;
-}
-
-export async function getTyreContext(carId: number): Promise<TyreContext> {
-  return api.get(`wh/tyres/context?car_id=${carId}`).json<TyreContext>();
-}
-
-export async function issueTyres(
-  body: {
-    car_id: number;
-    part_id: number;
-    qty: number;
-    grade: TyreGrade;
-    season?: "winter" | "summer";
-    place_id?: number | null;
-    comment?: string | null;
-    close?: TyreClose | null;
-  },
-  idempotencyKey: string,
-): Promise<TyreSet> {
-  // Ключ идемпотентности обязателен: телефон у подъёмника теряет связь и
-  // ретраит, а повтор — это ещё четыре покрышки со склада.
-  return api
-    .post("wh/tyres/issue", { json: body, headers: { "Idempotency-Key": idempotencyKey } })
-    .json<TyreSet>();
-}
-
-export interface TyreSetsResponse {
-  items: TyreSet[];
-  total: number;
-  on_car: number;
-}
-
-export async function getTyreSets(params?: { status?: string; limit?: number }): Promise<TyreSetsResponse> {
-  const qs = new URLSearchParams();
-  if (params?.status) qs.set("status", params.status);
-  if (params?.limit) qs.set("limit", String(params.limit));
-  const s = qs.toString();
-  return api.get(`wh/tyres/sets${s ? `?${s}` : ""}`).json<TyreSetsResponse>();
-}
-
-export interface TyreSizeRow {
-  brand: string | null;
-  model: string | null;
-  tyre_size: string | null;
-  cars_count: number;
-}
-
-export async function getTyreSizes(): Promise<TyreSizeRow[]> {
-  return api.get("wh/tyres/sizes").json<TyreSizeRow[]>();
-}
-
-export async function setTyreSize(body: {
-  brand: string;
-  model: string;
-  tyre_size: string | null;
-}): Promise<TyreSizeRow> {
-  return api.put("wh/tyres/sizes", { json: body }).json<TyreSizeRow>();
-}
-
-/** Вся резина в наличии — подсказка размеров в справочнике. */
-export async function getTyreStock(): Promise<TyreStockRow[]> {
-  return api.get("wh/tyres/stock").json<TyreStockRow[]>();
-}

mechanic-pwa/frontend/src/components/repairs/PartsPickerModal.tsx

@@ -1,133 +0,0 @@
-/**
- * Пикер детали из складского каталога — общий для формы создания и формы
- * правки ремонта (по образцу WorksPickerModal: состояние поиска живёт внутри,
- * наружу отдаётся только выбранная позиция).
- *
- * Свободного ввода нет намеренно: деталь ремонта — это реальная складская
- * позиция, которая списывается с остатка. Нет в каталоге → сначала карточка
- * на складе.
- *
- * По умолчанию показываем только то, что подходит этой машине ИЛИ вообще не
- * привязано к марке; «Показать все» снимает фильтр (страховка, пока
- * применимость не набита). У ремонта «с улицы» машины парка нет — carId=null,
- * и бэкенд отдаёт каталог целиком.
- */
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { searchParts, type PartCatalogItem } from "@/api/repairsCreate";
-
-interface Props {
-  open: boolean;
-  carId: number | null;
-  onPick: (item: PartCatalogItem) => void;
-  onClose: () => void;
-}
-
-export default function PartsPickerModal({ open, carId, onPick, onClose }: Props) {
-  const [q, setQ] = useState("");
-  const [showAll, setShowAll] = useState(false);
-  const [results, setResults] = useState<PartCatalogItem[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const load = async (query: string, all: boolean) => {
-    setLoading(true);
-    try {
-      setResults(await searchParts(query, carId, all));
-    } catch {
-      setResults([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Открытие = свежий поиск с чистого листа: прошлый запрос механика к этому
-  // моменту уже неактуален, а его остатки на экране читаются как «не нашлось».
-  useEffect(() => {
-    if (!open) return;
-    setQ("");
-    setShowAll(false);
-    void load("", false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, carId]);
-
-  if (!open) return null;
-
-  const toggleShowAll = () => {
-    const next = !showAll;
-    setShowAll(next);
-    void load(q, next);
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
-      <header className="border-b p-3 flex items-center gap-2">
-        <Button variant="ghost" size="sm" onClick={onClose}>
-          Отмена
-        </Button>
-        <Input
-          autoFocus
-          placeholder="Поиск детали — название или артикул…"
-          value={q}
-          onChange={(e) => {
-            setQ(e.target.value);
-            void load(e.target.value, showAll);
-          }}
-        />
-      </header>
-      {carId != null && (
-        <div className="border-b px-3 py-2 flex items-center justify-between">
-          <span className="text-xs text-muted-foreground">
-            {showAll ? "Все детали каталога" : "Подходящие этой машине"}
-          </span>
-          <button
-            type="button"
-            onClick={toggleShowAll}
-            className="text-xs font-medium text-primary underline-offset-2 hover:underline"
-          >
-            {showAll ? "← Только подходящие" : "Показать все →"}
-          </button>
-        </div>
-      )}
-      <main className="flex-1 overflow-y-auto">
-        <ul className="divide-y">
-          {results.map((p) => (
-            <li key={p.id}>
-              <button
-                type="button"
-                onClick={() => onPick(p)}
-                className="w-full text-left p-3 hover:bg-accent/40 flex items-center justify-between gap-3"
-              >
-                <span className="flex-1 min-w-0">
-                  <span className="block truncate">
-                    {p.fits && <span className="text-primary mr-1">✓</span>}
-                    {p.name}
-                  </span>
-                  <span className="block text-xs text-muted-foreground truncate">
-                    {p.article ? `арт. ${p.article}` : "без артикула"}
-                    {p.brand ? ` · ${p.brand}` : ""}
-                  </span>
-                </span>
-                <span
-                  className={`text-sm whitespace-nowrap ${
-                    p.in_stock < 0 ? "text-destructive" : "text-muted-foreground"
-                  }`}
-                >
-                  {p.in_stock === 0 ? "нет" : `${p.in_stock} шт`}
-                </span>
-              </button>
-            </li>
-          ))}
-          {!loading && results.length === 0 && (
-            <li className="p-6 text-center text-sm text-muted-foreground">
-              {q
-                ? "Ничего не найдено. Если детали нет в каталоге — заведите карточку на складе."
-                : "Нет подходящих деталей. Нажмите «Показать все» или заведите карточку на складе."}
-            </li>
-          )}
-          {loading && <li className="p-6 text-center text-sm text-muted-foreground">Загрузка…</li>}
-        </ul>
-      </main>
-    </div>
-  );
-}

mechanic-pwa/frontend/src/components/repairs/QtyStepper.test.tsx

@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import QtyStepper from "@/components/repairs/QtyStepper";
-
-/** Обёртка с реальным стейтом — баг был именно в связке ввод↔стейт. */
-function Harness({ start = 1 }: { start?: number | "" }) {
-  const [qty, setQty] = useState<number | "">(start);
-  return (
-    <>
-      <QtyStepper value={qty} onChange={setQty} />
-      <span data-testid="out">{qty === "" ? "empty" : qty}</span>
-    </>
-  );
-}
-
-test("количество можно стереть и набрать заново (жалоба «4 свечи»)", async () => {
-  const user = userEvent.setup();
-  render(<Harness start={1} />);
-  const input = screen.getByRole("spinbutton");
-
-  await user.clear(input);
-  // Ключевой момент: пустое поле ОСТАЁТСЯ пустым. Раньше сюда мгновенно
-  // возвращалась единица, и «4» превращалось в «14».
-  expect(screen.getByTestId("out")).toHaveTextContent("empty");
-
-  await user.type(input, "4");
-  expect(screen.getByTestId("out")).toHaveTextContent("4");
-});
-
-test("пустое поле на blur превращается в 1, а не в 0", async () => {
-  const user = userEvent.setup();
-  render(<Harness start={3} />);
-  const input = screen.getByRole("spinbutton");
-  await user.clear(input);
-  await user.tab();
-  expect(screen.getByTestId("out")).toHaveTextContent("1");
-});
-
-test("кнопки −/+ меняют количество и не уводят ниже минимума", async () => {
-  const user = userEvent.setup();
-  render(<Harness start={1} />);
-  const minus = screen.getByLabelText("Меньше");
-  const plus = screen.getByLabelText("Больше");
-
-  expect(minus).toBeDisabled(); // на единице уменьшать нечего
-  await user.click(plus);
-  await user.click(plus);
-  await user.click(plus);
-  expect(screen.getByTestId("out")).toHaveTextContent("4");
-
-  await user.click(minus);
-  expect(screen.getByTestId("out")).toHaveTextContent("3");
-});
-
-test("тап по полю выделяет значение — цифра заменяет его, а не дописывается", async () => {
-  const user = userEvent.setup();
-  const onChange = vi.fn();
-  render(<QtyStepper value={1} onChange={onChange} />);
-  await user.type(screen.getByRole("spinbutton"), "2");
-  // 2, а не 12: без select-on-focus набор поверх единицы давал бы «12»,
-  // и это ровно тот сорт сюрприза, на который жаловались механики.
-  expect(onChange).toHaveBeenCalledWith(2);
-  // Число, а не строка — иначе qty уехал бы в payload строкой.
-  expect(typeof onChange.mock.calls[0][0]).toBe("number");
-});

mechanic-pwa/frontend/src/components/repairs/QtyStepper.tsx

@@ -1,66 +0,0 @@
-/**
- * Количество детали в ремонте: −/+ и поле ввода.
- *
- * Почему не просто <input type="number">. Пустое поле обязано ОСТАВАТЬСЯ
- * пустым, пока человек печатает. Если на каждый onChange приводить значение
- * к минимуму (`Math.max(1, Number(v))`), то стирание единицы мгновенно
- * возвращает единицу — и набрать «4» становится невозможно: цифра
- * дописывается к ней («14»). Ровно на это пожаловались механики, и ровно так
- * же однажды залипал ноль в цене работы.
- *
- * Поэтому "" — легальное промежуточное состояние стейта, а к разумному
- * значению приводим на blur (и ещё раз на отправке формы).
- *
- * Кнопки −/+ здесь не украшение: 4 свечи набираются в перчатках одним
- * пальцем, а мобильная цифровая клавиатура для этого слишком долгая.
- */
-import { Minus, Plus } from "lucide-react";
-import { Input } from "@/components/ui/input";
-
-interface Props {
-  value: number | "";
-  onChange: (next: number | "") => void;
-  min?: number;
-  disabled?: boolean;
-}
-
-export default function QtyStepper({ value, onChange, min = 1, disabled }: Props) {
-  const current = value === "" ? min : value;
-
-  return (
-    <div className="flex items-center gap-1">
-      <button
-        type="button"
-        disabled={disabled || current <= min}
-        onClick={() => onChange(Math.max(min, current - 1))}
-        aria-label="Меньше"
-        className="h-9 w-9 rounded-md border flex items-center justify-center disabled:opacity-40 active:bg-accent"
-      >
-        <Minus className="h-4 w-4" />
-      </button>
-      <Input
-        type="number"
-        inputMode="numeric"
-        min={min}
-        value={value}
-        disabled={disabled}
-        onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))}
-        onFocus={(e) => e.currentTarget.select()}
-        onBlur={() => {
-          const n = value === "" ? min : Math.floor(Number(value));
-          onChange(Number.isFinite(n) && n >= min ? n : min);
-        }}
-        className="w-14 text-center"
-      />
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => onChange(current + 1)}
-        aria-label="Больше"
-        className="h-9 w-9 rounded-md border flex items-center justify-center disabled:opacity-40 active:bg-accent"
-      >
-        <Plus className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}

mechanic-pwa/frontend/src/hooks/useRepairsFeed.ts

@@ -3,122 +3,42 @@
  *
  * Использует `useInfiniteQuery` для бесконечной пагинации по 20 (У38).
  * На `visibilitychange` (когда вкладка/приложение получают фокус) —
- * автоматическое обновление через `refresh()`. Кнопка «Обновить» в шапке
- * вызывает тот же `refresh()`.
- *
- * Поддерживает поиск по подстроке (госномер/марка/модель): `q` уходит
- * в каждый запрос страницы и входит в ключ кэша. При смене запроса на
- * экране остаётся прошлая выдача (`keepPreviousData`), а не скелетоны.
+ * автоматический рефреш первой страницы. Pull-to-refresh вызывается
+ * напрямую из компонента через `refetch()`.
  *
  * SWR-кэш живёт в react-query (память + localStorage persist уже
  * сконфигурирован в QueryClient на уровне приложения, если такого нет —
  * первая отрисовка идёт без кэша, но дальше работает).
  */
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  keepPreviousData,
-  useInfiniteQuery,
-  useQueryClient,
-  type InfiniteData,
-  type QueryKey,
-} from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useInfiniteQuery, type QueryKey } from "@tanstack/react-query";
 import { getRepairsFeed, type FeedItem, type FeedResponse } from "@/api/repairsFeed";
 
 export const FEED_QUERY_KEY: QueryKey = ["repairs-feed"];
 export const FEED_PAGE_SIZE = 20;
 
-/**
- * Ключ кэша ленты. Поисковый запрос обязан входить в ключ: иначе страницы
- * разных запросов лягут в один кэш и в списке перемешаются чужие ремонты.
- */
-export function feedQueryKey(q?: string | null): QueryKey {
-  return [...FEED_QUERY_KEY, q?.trim() || null];
-}
-
-/** Что лежит в кэше ленты: загруженные страницы и курсоры, по которым их брали. */
-type FeedPages = InfiniteData<FeedResponse, string | null>;
-
-export function useRepairsFeed(q?: string | null) {
-  // Нормализуем один раз: и ключ, и запрос должны видеть одно и то же
-  // значение, иначе кэш и фильтр разъедутся на пробелах.
-  const search = q?.trim() || null;
-  const queryClient = useQueryClient();
-
-  const query = useInfiniteQuery<FeedResponse, Error, FeedPages, QueryKey, string | null>({
-    queryKey: feedQueryKey(search),
+export function useRepairsFeed() {
+  const query = useInfiniteQuery<FeedResponse>({
+    queryKey: FEED_QUERY_KEY,
     queryFn: ({ pageParam }) =>
-      // q передаём на КАЖДОЙ странице — иначе догрузка вернёт нефильтрованный
-      // хвост и подмешает в результаты поиска чужие ремонты.
-      getRepairsFeed({
-        limit: FEED_PAGE_SIZE,
-        cursor: pageParam,
-        q: search,
-      }),
-    initialPageParam: null,
+      getRepairsFeed({ limit: FEED_PAGE_SIZE, cursor: (pageParam as string | null) ?? null }),
+    initialPageParam: null as string | null,
     getNextPageParam: (last) => last.next_cursor ?? undefined,
     staleTime: 30_000, // 30 секунд считаем «свежим» — потом фон обновляет
     refetchOnWindowFocus: false, // делаем свой visibilitychange-листенер ниже
-    // Каждая буква в поиске — новый ключ, а у нового ключа данных ещё нет.
-    // Без этого список на каждое нажатие подменялся бы скелетонами и мигал.
-    // Держим прошлую выдачу до прихода актуальной; что она устарела —
-    // показываем через isPreviousResults.
-    placeholderData: keepPreviousData,
   });
 
-  // Листенер вешаем один раз, а refetch держим в ref — после смены поискового
-  // запроса обновлять надо актуальную выдачу, а не ту, что была на монтировании.
-  const refetchRef = useRef(query.refetch);
-  useEffect(() => {
-    refetchRef.current = query.refetch;
-  }, [query.refetch]);
-
-  /**
-   * Обновление ленты. `refetch()` у бесконечного запроса перезапрашивает ВСЕ
-   * загруженные страницы, причём последовательно (курсор следующей приходит
-   * из предыдущей). У механика, пролиставшего ленту вглубь, это десяток
-   * запросов на слабой сети и десять шансов словить ошибку вместо одного.
-   * Поэтому сначала схлопываем ленту до первой страницы, а потом обновляем —
-   * ровно один запрос. Плата: догруженный хвост сбрасывается, лента
-   * возвращается к началу (как у обычного pull-to-refresh).
-   */
-  // Пока обновление летит, догрузка следующей страницы обязана молчать.
-  // Схлопывание укорачивает список, браузер прижимает скролл к новому низу, и
-  // маркер бесконечной прокрутки попадает в зону видимости. Его fetchNextPage
-  // по умолчанию ОТМЕНЯЕТ запрос в полёте — обновление не доезжает вовсе, а
-  // вместо него подтягивается вторая страница по старому курсору. Новых
-  // ремонтов сверху человек так и не увидит, сколько ни жми.
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  const refresh = useCallback(async () => {
-    setIsRefreshing(true);
-    try {
-      queryClient.setQueryData<FeedPages>(feedQueryKey(search), (old) =>
-        old && old.pages.length > 1
-          ? { pages: old.pages.slice(0, 1), pageParams: old.pageParams.slice(0, 1) }
-          : old,
-      );
-      await refetchRef.current();
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, [queryClient, search]);
-
-  // Тот же приём с ref: refresh меняется вместе с поисковым запросом,
-  // а листенер ниже вешается один раз.
-  const refreshRef = useRef(refresh);
-  useEffect(() => {
-    refreshRef.current = refresh;
-  }, [refresh]);
-
   // У38: обновление при возврате в приложение/вкладку.
   useEffect(() => {
     const onVisible = () => {
       if (document.visibilityState === "visible") {
-        void refreshRef.current();
+        // Рефрешим только первую страницу, бесконечный скролл сбрасывается.
+        void query.refetch();
       }
     };
     document.addEventListener("visibilitychange", onVisible);
     return () => document.removeEventListener("visibilitychange", onVisible);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Удобный flatten для рендера в одну ленту.
@@ -128,15 +48,11 @@ export function useRepairsFeed(q?: string | null) {
     items,
     isLoading: query.isLoading,
     isFetching: query.isFetching,
-    // На экране выдача предыдущего запроса, актуальная ещё летит —
-    // повод приглушить список, но не повод его прятать.
-    isPreviousResults: query.isPlaceholderData,
     isError: query.isError,
     error: query.error,
     fetchNextPage: query.fetchNextPage,
     hasNextPage: !!query.hasNextPage,
     isFetchingNextPage: query.isFetchingNextPage,
-    refresh,
-    isRefreshing,
+    refetch: query.refetch,
   };
 }

mechanic-pwa/frontend/src/lib/imageDownscale.ts

@@ -1,43 +0,0 @@
-/**
- * Ужать снимок перед отправкой на распознавание.
- *
- * Телефон отдаёт кадр на 4000+ px и 3–5 МБ, а сервер всё равно приводит
- * накладную к 2200 px по длинной стороне — значит всё, что выше, это чистые
- * секунды загрузки на мобильном интернете в гараже. Ужимаем на клиенте до
- * того же предела: качество распознавания не меняется, отправка ускоряется
- * в разы.
- *
- * 2200 — именно то, на чём работает vision-модель (см. invoice_ocr.py).
- * Мельче нельзя: текст накладной и так на грани читаемости.
- */
-const MAX_EDGE = 2200;
-const QUALITY = 0.9;
-
-export async function downscaleImage(file: File, maxEdge = MAX_EDGE): Promise<Blob> {
-  // Если что-то в цепочке не поддержано (старый WebView) — шлём оригинал:
-  // медленно, но рабочее лучше, чем ошибка.
-  try {
-    const bitmap = await createImageBitmap(file);
-    const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
-    if (scale >= 1) {
-      bitmap.close();
-      return file;
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.round(bitmap.width * scale);
-    canvas.height = Math.round(bitmap.height * scale);
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      bitmap.close();
-      return file;
-    }
-    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-    bitmap.close();
-    const blob = await new Promise<Blob | null>((resolve) =>
-      canvas.toBlob(resolve, "image/jpeg", QUALITY),
-    );
-    return blob ?? file;
-  } catch {
-    return file;
-  }
-}

mechanic-pwa/frontend/src/pages/ActionMenu.tsx

@@ -1,5 +1,7 @@
+import type { ComponentType } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { ClipboardCheck, History, Wrench } from "lucide-react";
 import { getMe } from "@/api/me";
 import { logout } from "@/api/auth";
 import { Card } from "@/components/ui/card";
@@ -9,7 +11,8 @@ interface ActionTile {
   key: string;
   title: string;
   description: string;
-  emoji: string;
+  // Иконка из lucide-react (пак всего PWA); эмодзи в интерфейсе не используем.
+  icon: ComponentType<{ className?: string }>;
   onClick: () => void;
   disabled?: boolean;
   comingSoon?: boolean;
@@ -24,43 +27,23 @@ export default function ActionMenu() {
       key: "inspect",
       title: "Осмотр",
       description: "Создать или продолжить осмотр машины",
-      emoji: "🔍",
+      icon: ClipboardCheck,
       onClick: () => navigate("/vehicles?action=inspect"),
     },
     {
       key: "repair",
       title: "Ремонт",
       description: "Лента ремонтов парка + создать новый",
-      emoji: "🔧",
+      icon: Wrench,
       onClick: () => navigate("/repairs"),
     },
-    // Складские разделы правят остатки и деньги — пока только админам
-    // (тот же гейт стоит на сервере, здесь просто не показываем лишнего).
-    ...(meQuery.data?.is_admin
-      ? [
-          {
-            key: "receiving",
-            title: "Приёмка",
-            description: "Снять накладную камерой и оприходовать товар",
-            emoji: "📦",
-            onClick: () => navigate("/wh/receiving"),
-          },
-          {
-            key: "stocktake",
-            title: "Инвентаризация",
-            description: "Пересчитать зону склада и провести расхождения",
-            emoji: "📋",
-            onClick: () => navigate("/wh/stocktake"),
-          },
-          {
-            key: "tyres",
-            title: "Выдача резины",
-            description: "Сезонная переобувка: выдать комплект и закрыть старый",
-            emoji: "🛞",
-            onClick: () => navigate("/wh/tyres"),
-          },
-        ]
-      : []),
+    {
+      key: "repair-history",
+      title: "История ремонта",
+      description: "Что чинили на машине — поиск по госномеру",
+      icon: History,
+      onClick: () => navigate("/repairs/history"),
+    },
   ];
 
   return (
@@ -89,35 +72,38 @@ export default function ActionMenu() {
           Что делаем?
         </h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          {tiles.map((t) => (
-            <Card
-              key={t.key}
-              onClick={t.disabled ? undefined : t.onClick}
-              className={
-                "p-5 transition-shadow " +
-                (t.disabled
-                  ? "opacity-50 cursor-not-allowed"
-                  : "cursor-pointer hover:shadow-md active:shadow-sm")
-              }
-            >
-              <div className="flex items-start gap-3">
-                <div className="text-3xl leading-none">{t.emoji}</div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-semibold text-base">{t.title}</h3>
-                    {t.comingSoon && (
-                      <span className="text-[10px] uppercase tracking-wide bg-muted text-muted-foreground rounded px-1.5 py-0.5">
-                        скоро
-                      </span>
-                    )}
+          {tiles.map((t) => {
+            const Icon = t.icon;
+            return (
+              <Card
+                key={t.key}
+                onClick={t.disabled ? undefined : t.onClick}
+                className={
+                  "p-5 transition-shadow " +
+                  (t.disabled
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer hover:shadow-md active:shadow-sm")
+                }
+              >
+                <div className="flex items-start gap-3">
+                  <Icon className="h-8 w-8 shrink-0 text-muted-foreground" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-base">{t.title}</h3>
+                      {t.comingSoon && (
+                        <span className="text-[10px] uppercase tracking-wide bg-muted text-muted-foreground rounded px-1.5 py-0.5">
+                          скоро
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {t.description}
+                    </p>
                   </div>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    {t.description}
-                  </p>
                 </div>
-              </div>
-            </Card>
-          ))}
+              </Card>
+            );
+          })}
         </div>
       </main>
     </div>

mechanic-pwa/frontend/src/pages/InspectionReview.tsx

@@ -14,7 +14,6 @@ import { AuthImg } from "@/components/AuthImg";
 import { ttImageUrl } from "@/api/vehicles";
 import { VendorVehicleScheme } from "@/components/vehicle-scheme/VendorVehicleScheme";
 import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { loadZoneLabels } from "@/data/zoneLabels";
 
 const STATUS_LABELS: Record<string, string> = {
@@ -139,19 +138,6 @@ export default function InspectionReview() {
     onError: () => toast.error("Не удалось сохранить заметку"),
   });
 
-  // Осмотр закрыт не механиком, а автоматикой — вернуть в работу и дать
-  // доснять. Без этой кнопки механик, вернувшийся через три часа, упирается в
-  // заблокированную карточку и вынужден заводить осмотр заново.
-  const reopenMutation = useMutation({
-    mutationFn: () => patchInspection(insId, { status: "in_progress" }),
-    onSuccess: (updated) => {
-      queryClient.setQueryData(["inspection", insId], updated);
-      queryClient.invalidateQueries({ queryKey: ["vehicle"] });
-      navigate(`/inspections/${insId}/edit`);
-    },
-    onError: () => toast.error("Не удалось вернуть осмотр в работу"),
-  });
-
   if (isLoading) return <div className="p-8 text-muted-foreground">Загружаю…</div>;
   if (isError || !ins)
     return <div className="p-8 text-destructive">Осмотр не найден.</div>;
@@ -247,27 +233,6 @@ export default function InspectionReview() {
         )}
       </Card>
 
-      {ins.meta?.auto_completed === true && (
-        <Card className="p-4 space-y-3 border-amber-500/40 bg-amber-500/10">
-          <div className="text-sm">
-            <div className="font-semibold">Закрыт автоматически</div>
-            <p className="mt-1 text-muted-foreground leading-relaxed">
-              Осмотр несколько часов никто не открывал, поэтому система завершила
-              его сама — чтобы фотографии не пропали из отчётов. Если работа не
-              доделана, верните осмотр в работу и продолжите.
-            </p>
-          </div>
-          <Button
-            variant="outline"
-            className="w-full"
-            onClick={() => reopenMutation.mutate()}
-            disabled={reopenMutation.isPending}
-          >
-            {reopenMutation.isPending ? "Открываю…" : "Продолжить осмотр"}
-          </Button>
-        </Card>
-      )}
-
       <Card className="p-4 space-y-2">
         <h2 className="text-sm font-semibold text-muted-foreground">
           Заметки механика