feat(pwa): вход для сотрудника, просмотр от лица водителя и вкладка «Отладка»

Приложение обкатывается на боевом контуре, поэтому интерфейс надо проверять на живых данных — а живые данные лежат у настоящих водителей. * «Вход для сотрудника» (/dev) — логин учётки CRM, поддержан второй шаг 2FA; дальше поиск водителя по ФИО/телефону/id и просмотр его экранов. * Плашка «Смотрю как …» над всеми экранами: интерфейс в этом режиме неотличим от водительского, и чужой баланс легко принять за свой. * Вкладка «Отладка» (/debug, водителю недоступна): смена водителя, driver_id, режим, срок токена, адрес API, коммит и время сборки, журнал последних 40 ответивших запросов, сброс кэша сервис-воркера. * Пополнение под просмотром идёт в учебный контур: экран /mock-pay/:orderId выбирает, что «ответит» банк, а настоящий экран оплаты разбирает эти статусы своим боевым кодом. Ни рубля, ни чека 54-ФЗ. Заодно доезжает незакоммиченная работа прошлой сессии: дев-прокси в vite.config.ts, его тест и разобранный .env.example. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
feat(pwa): подтверждение входа, копейки, выбор категории долга
2026-08-18 13:15:02 +10:00 · 2026-08-16 23:54:04 +10:00 · 2026-08-07 18:24:21 +10:00 · 2026-08-06 18:12:13 +10:00 · 2026-06-20 00:59:53 +10:00 · 2026-06-19 23:44:57 +10:00
100 changed files with 17066 additions and 189 deletions
@@ -38,3 +38,4 @@ Thumbs.db
 # IDE
 .idea/
 .vscode/
 .superpowers/
@@ -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 (сделать до/параллельно соответствующим экранам).
@@ -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-ФЗ и реальная проводка в леджере.
@@ -0,0 +1,5 @@
 node_modules
 dist
 .env
 .env.local
 *.tsbuildinfo
@@ -0,0 +1,147 @@
 # Премиум Водитель — 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`.
 ## Обкатка: кто может войти и как смотреть чужой экран
 Приложение выложено на боевой домен, а обкатывается интерфейс. Поэтому на время
 обкатки включены две вещи.
 ### 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-ФЗ не пробивается.
@@ -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");
  });
 });
@@ -0,0 +1,16 @@
 <!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="#F3EEE3" />
    <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>
@@ -0,0 +1,42 @@
 {
  "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"
  }
 }
@@ -0,0 +1 @@
 export default { plugins: { tailwindcss: {}, autoprefixer: {} } };
@@ -0,0 +1,13 @@
 {
  "name": "Премиум Водитель",
  "short_name": "Премиум",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#F3EEE3",
  "theme_color": "#F3EEE3",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
 }
@@ -0,0 +1,76 @@
 // Генерация PWA-иконок «Премиум Водитель» без сторонних либ (zlib PNG-энкодер).
 // Дизайн: кремовый фон #F3EEE3, тёмная скруглённая плитка #1C1B19,
 // внутри белая «карта» #F6F2E9 с тёмной полосой (финансовый мотив). Без жёлтого/текста.
 import zlib from "node:zlib";
 import fs from "node:fs";
 import path from "node:path";
 const CREAM = [243, 238, 227];
 const INK = [28, 27, 25];
 const CARD = [246, 242, 233];
 function crc32(buf) {
  let c = ~0;
  for (let i = 0; i < buf.length; i++) {
    c ^= buf[i];
    for (let k = 0; k < 8; k++) c = (c >>> 1) ^ (0xedb88320 & -(c & 1));
  }
  return (~c) >>> 0;
 }
 function chunk(type, data) {
  const t = Buffer.from(type, "ascii");
  const len = Buffer.alloc(4); len.writeUInt32BE(data.length, 0);
  const body = Buffer.concat([t, data]);
  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(body), 0);
  return Buffer.concat([len, body, crc]);
 }
 function encodePng(N, rgba) {
  const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
  const ihdr = Buffer.alloc(13);
  ihdr.writeUInt32BE(N, 0); ihdr.writeUInt32BE(N, 4); ihdr[8] = 8; ihdr[9] = 6;
  const stride = N * 4;
  const raw = Buffer.alloc(N * (stride + 1));
  for (let y = 0; y < N; y++) {
    raw[y * (stride + 1)] = 0;
    rgba.copy(raw, y * (stride + 1) + 1, y * stride, y * stride + stride);
  }
  return Buffer.concat([sig, chunk("IHDR", ihdr), chunk("IDAT", zlib.deflateSync(raw)), chunk("IEND", Buffer.alloc(0))]);
 }
 function inRoundRect(px, py, x0, y0, x1, y1, r) {
  if (px < x0 || px >= x1 || py < y0 || py >= y1) return false;
  const cx = px < x0 + r ? x0 + r : px >= x1 - r ? x1 - r : px;
  const cy = py < y0 + r ? y0 + r : py >= y1 - r ? y1 - r : py;
  const dx = px - cx, dy = py - cy;
  return dx * dx + dy * dy <= r * r;
 }
 function draw(N) {
  const buf = Buffer.alloc(N * N * 4);
  // tile (centered ~64%)
  const tile = Math.round(N * 0.64), tx0 = Math.round((N - tile) / 2), ty0 = tx0;
  const tx1 = tx0 + tile, ty1 = ty0 + tile, tr = Math.round(tile * 0.24);
  // card inside tile
  const cw = Math.round(tile * 0.62), ch = Math.round(tile * 0.42);
  const cx0 = Math.round((N - cw) / 2), cy0 = Math.round((N - ch) / 2);
  const cx1 = cx0 + cw, cy1 = cy0 + ch, cr = Math.round(ch * 0.18);
  // stripe near top of card
  const sy0 = cy0 + Math.round(ch * 0.22), sy1 = sy0 + Math.round(ch * 0.14);
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      let col = CREAM;
      if (inRoundRect(x, y, tx0, ty0, tx1, ty1, tr)) col = INK;
      if (inRoundRect(x, y, cx0, cy0, cx1, cy1, cr)) col = CARD;
      if (x >= cx0 && x < cx1 && y >= sy0 && y < sy1) col = INK;
      const o = (y * N + x) * 4;
      buf[o] = col[0]; buf[o + 1] = col[1]; buf[o + 2] = col[2]; buf[o + 3] = 255;
    }
  }
  return encodePng(N, buf);
 }
 const dir = path.resolve("public/icons");
 fs.mkdirSync(dir, { recursive: true });
 for (const N of [192, 512]) {
  fs.writeFileSync(path.join(dir, `icon-${N}.png`), draw(N));
  console.log(`wrote icon-${N}.png`);
 }
@@ -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();
  });
 });
@@ -0,0 +1,52 @@
 import type { ReactNode } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useAuth } from "@/store/auth";
 import { useStaff } from "@/store/staff";
 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 { HistoryPage } from "@/pages/HistoryPage";
 import { DevLoginPage } from "@/pages/DevLoginPage";
 import { DebugPage } from "@/pages/DebugPage";
 import { MockPayPage } from "@/pages/MockPayPage";
 function RequireAuth({ children }: { children: ReactNode }) {
  const token = useAuth((s) => s.token);
  return token ? <>{children}</> : <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 />;
 }
 export default function App() {
  return (
    <div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
      {/* Плашка живёт над маршрутами: чей экран открыт, видно на каждом из них,
          а не только там, где про неё вспомнили. Сама решает, показываться ли. */}
      <ImpersonationBar />
      <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="/history" element={<RequireAuth><HistoryPage /></RequireAuth>} />
        <Route path="/debug" element={<RequireAuth><RequireStaff><DebugPage /></RequireStaff></RequireAuth>} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
 }
@@ -0,0 +1,42 @@
 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>();
 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())),
        });
      },
    ],
    beforeError: [
      (error) => {
        if (error.response?.status === 401) useAuth.getState().clear();
        return error;
      },
    ],
  },
 });
@@ -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");
  });
 });
@@ -0,0 +1,111 @@
 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С. В сумму баланса не входит.
  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;
 }
 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") =>
  TopupSchema.parse(await api.post("driver/topup", { json: { bucket, amount, method } }).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(),
 );
@@ -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());
@@ -0,0 +1,7 @@
 export function AppHeader() {
  return (
    <header className="mb-4">
      <span className="text-sm font-bold">Премиум Водитель</span>
    </header>
  );
 }
@@ -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 setSession = useAuth((s) => s.setSession);
  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);
      setSession(r.token, r.driver.id, { impersonated: true, driverName: 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-white">
        <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>
  );
 }
@@ -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 bg-ink text-cream 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>
  );
 }
@@ -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-cream border-ink font-bold" : "bg-surface border-line text-muted"
          }`}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
 }
@@ -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" />;
 }
@@ -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");
  });
 });
@@ -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 };
 }
@@ -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 };
 }
@@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 html, body, #root { height: 100%; }
 body { @apply bg-cream text-ink font-sans antialiased; margin: 0; }
 button { font-family: inherit; }
@layer components {
  .btn-primary { @apply bg-ink text-cream rounded-xl2 py-3.5 px-4 text-sm font-bold text-center w-full active:opacity-90 disabled:opacity-50; }
  .btn-ghost { @apply border border-ink text-ink rounded-xl2 py-3 px-4 text-sm font-semibold text-center w-full; }
  .card { @apply bg-surface border border-line rounded-2xl; }
 }
@@ -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);
  });
 });
@@ -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 };
 }
@@ -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");
  });
 });
@@ -0,0 +1,32 @@
 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("");
 }
@@ -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} мин`;
 }
@@ -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));
 }
@@ -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");
  });
 });
@@ -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];
  }
 }
@@ -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>
 );
@@ -0,0 +1,47 @@
 import { describe, it, expect, vi } 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/driver", () => ({
  getBalance: vi.fn(async () => ({
    accounts: [
      { bucket: "Долг аренда", balance: -3200 },
      { bucket: "Депозит", balance: 5000 },
    ],
  })),
 }));
 import { BalancePage } from "./BalancePage";
 function wrap() {
  const qc = new QueryClient();
  return render(
    <QueryClientProvider client={qc}>
      <MemoryRouter><BalancePage /></MemoryRouter>
    </QueryClientProvider>
  );
 }
 describe("BalancePage", () => {
  it("shows hero total (sum of negatives) and account rows", async () => {
    wrap();
    expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
    expect(screen.getByText("Депозит")).toBeInTheDocument();
    // Appears in both the hero total and the single debt account row.
    expect(screen.getAllByText("−3 200 ₽").length).toBeGreaterThan(0);
    expect(screen.getByRole("button", { name: /Пополнить/i })).toBeInTheDocument();
  });
  it("shows an error state when balance fails to load", async () => {
    const driver = await import("@/api/driver");
    (driver.getBalance as any).mockRejectedValueOnce(new Error("boom"));
    // re-render fresh
    const { QueryClient, QueryClientProvider } = await import("@tanstack/react-query");
    const { MemoryRouter } = await import("react-router-dom");
    const { render, screen } = await import("@testing-library/react");
    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
    render(<QueryClientProvider client={qc}><MemoryRouter><BalancePage /></MemoryRouter></QueryClientProvider>);
    expect(await screen.findByText(/Не удалось загрузить/i)).toBeInTheDocument();
  });
 });
@@ -0,0 +1,69 @@
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 import { History, LogOut } from "lucide-react";
 import { getBalance } from "@/api/driver";
 import { formatMoney } from "@/lib/format";
 import { useAuth } from "@/store/auth";
 import { AppHeader } from "@/components/AppHeader";
 import { Spinner } from "@/components/Spinner";
 export function BalancePage() {
  const nav = useNavigate();
  const clear = useAuth((s) => s.clear);
  const { data, isLoading, isError, refetch } = useQuery({ queryKey: ["balance"], queryFn: getBalance });
  const accounts = data?.accounts ?? [];
  const total = accounts.reduce((s, a) => s + a.balance, 0);
  const pending = data?.pending_topup ?? 0;
  return (
    <div>
      <AppHeader />
      <div className="card p-4 mb-4 text-center">
        <p className="text-muted text-xs mb-1">Баланс</p>
        <p className={`text-2xl font-extrabold ${total < 0 ? "text-neg" : "text-pos"}`}>{formatMoney(total)}</p>
        {pending > 0 && (
          // Платёж принят нами, но 1С его ещё не провела. В сумму баланса он не
          // входит намеренно: сложить оба источника значило бы показать
          // пополнение дважды, как только расчётный лист принесёт тот же платёж.
          <p className="text-muted text-xs mt-2">
            {formatMoney(pending)} зачисляется — учтётся после проведения
          </p>
        )}
      </div>
      {isLoading ? (
        <div className="flex justify-center py-10"><Spinner /></div>
      ) : isError ? (
        <div className="text-center py-8">
          <p className="text-muted text-sm mb-3">Не удалось загрузить баланс</p>
          <button className="btn-ghost" onClick={() => refetch()}>Повторить</button>
        </div>
      ) : (
        <div className="mb-4">
          {accounts.map((a) => (
            <button
              key={a.bucket}
              onClick={() => nav("/topup", { state: { bucket: a.bucket } })}
              className="w-full flex justify-between items-center py-3 border-b border-line last:border-0 text-left"
            >
              <span className="text-sm">{a.bucket}</span>
              <b className={a.balance < 0 ? "text-neg" : "text-pos"}>{formatMoney(a.balance)}</b>
            </button>
          ))}
        </div>
      )}
      <button className="btn-primary" onClick={() => nav("/topup")}>Пополнить</button>
      <div className="flex justify-center gap-6 mt-6 text-muted text-xs">
        <button className="flex items-center gap-1.5" onClick={() => nav("/history")}>
          <History size={15} /> История
        </button>
        <button className="flex items-center gap-1.5" onClick={() => { clear(); nav("/login"); }}>
          <LogOut size={15} /> Выйти
        </button>
      </div>
    </div>
  );
 }
@@ -0,0 +1,67 @@
 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 })),
 }));
 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();
  });
 });
@@ -0,0 +1,127 @@
 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, clear } = 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>
      <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)" : "обычный вход водителя"} />
        <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={() => { clear(); nav(staff.token ? "/dev" : "/login"); }}
      >
        <LogOut size={16} /> {impersonated ? "Выйти из просмотра" : "Выйти"}
      </button>
      {staff.token && (
        <button className="text-muted text-xs w-full mt-4"
                onClick={() => { clear(); staff.clear(); nav("/login"); }}>
          Выйти и из учётки сотрудника
        </button>
      )}
    </div>
  );
 }
@@ -0,0 +1,67 @@
 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");
    await userEvent.click(screen.getByRole("button", { name: "Подтвердить" }));
    expect(staffApi.staffLogin2fa).toHaveBeenCalledWith("partial", "123456");
    expect(useStaff.getState().token).toBe("staff-tok");
  });
 });
@@ -0,0 +1,122 @@
 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() {
    if (!partial || code.length < 6 || busy) return;
    setBusy(true);
    try {
      const r = await staffLogin2fa(partial, code);
      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
            inputMode="numeric"
            value={code}
            onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
            placeholder="000000"
            className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-white"
          />
          <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-white"
          />
          <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-white"
          />
          <button className="btn-primary" disabled={busy || !username || !password} onClick={submit}>
            {busy ? <Spinner /> : "Войти"}
          </button>
          <button className="btn-ghost mt-2" onClick={() => nav("/login")}>Я водитель</button>
        </>
      )}
    </div>
  );
 }
@@ -0,0 +1,25 @@
 import { describe, it, expect, vi } 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/driver", () => ({
  getPayments: vi.fn(async () => ({ payments: [
    { order_id: "o1", bucket: "Долг аренда", amount: 1000, commission: 52, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: "2026-06-18T09:01:00Z" },
  ] })),
 }));
 import { HistoryPage } from "./HistoryPage";
 function wrap() {
  const qc = new QueryClient();
  return render(<QueryClientProvider client={qc}><MemoryRouter><HistoryPage /></MemoryRouter></QueryClientProvider>);
 }
 describe("HistoryPage", () => {
  it("lists payments with amount + status", async () => {
    wrap();
    expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
    expect(screen.getByText("1 000 ₽")).toBeInTheDocument();
    expect(screen.getByText(/Оплачено/i)).toBeInTheDocument();
  });
 });
@@ -0,0 +1,67 @@
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 import { getPayments } from "@/api/driver";
 import { formatMoney } from "@/lib/format";
 import { Spinner } from "@/components/Spinner";
 /**
 * Все статусы, которые может прислать бэкенд. Раньше их было пять из тринадцати,
 * и водитель видел в истории «DEADLINE_EXPIRED» или «ATTEMPTS_EXPIRED» латиницей,
 * а возврат денег выглядел ровно как обычный отказ.
 */
 const STATUS_RU: Record<string, string> = {
  NEW: "Ожидает оплаты",
  FORM: "Ожидает оплаты",
  PAID: "Оплачено",
  CONFIRMED: "Оплачено",
  REJECTED: "Отклонён банком",
  AUTH_FAIL: "Отклонён банком",
  CANCELED: "Отменён",
  DEADLINE_EXPIRED: "Истёк срок оплаты",
  ATTEMPTS_EXPIRED: "Исчерпаны попытки оплаты",
  ERROR: "Ошибка",
  REVERSED: "Деньги возвращены",
  REFUNDED: "Деньги возвращены",
  PARTIAL_REVERSED: "Возвращена часть",
  PARTIAL_REFUNDED: "Возвращена часть",
 };
 const RETURNED = new Set(["REVERSED", "REFUNDED", "PARTIAL_REVERSED", "PARTIAL_REFUNDED"]);
 export function HistoryPage() {
  const nav = useNavigate();
  const { data, isLoading, isError } = useQuery({ queryKey: ["payments"], queryFn: getPayments });
  const rows = data?.payments ?? [];
  return (
    <div className="pt-2">
      <button className="text-muted text-xs mb-3" onClick={() => nav("/")}>‹ Назад</button>
      <h1 className="text-lg font-extrabold mb-4">История пополнений</h1>
      {isLoading ? (
        <div className="flex justify-center py-10"><Spinner /></div>
      ) : isError ? (
        <p className="text-muted text-sm">Не удалось загрузить историю</p>
      ) : rows.length === 0 ? (
        <p className="text-muted text-sm">Пока нет пополнений</p>
      ) : (
        rows.map((p) => {
          const returned = RETURNED.has(p.status) || !!p.reversed_at;
          return (
            <div key={p.order_id} className="flex justify-between items-center py-3 border-b border-line">
              <div>
                <p className="text-sm">{p.bucket}</p>
                <p className="text-muted text-xs">
                  {p.created_at ? new Date(p.created_at).toLocaleDateString("ru-RU") : ""} ·{" "}
                  {STATUS_RU[p.status] ?? p.status}
                </p>
              </div>
              <b className={returned ? "text-muted line-through" : undefined}>
                {formatMoney(p.amount)}
              </b>
            </div>
          );
        })
      )}
    </div>
  );
 }
@@ -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");
  });
 });
@@ -0,0 +1,146 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { apiErrorText, authRequest, authVerify, tgSession } from "@/api/driver";
 import { digitsOnly, formatPhone } from "@/lib/format";
 import { savePairing } from "@/lib/pairing";
 import { useAuth } from "@/store/auth";
 import { Spinner } from "@/components/Spinner";
 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");
  // 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; };
  }, []);
  function startTg() {
    if (!tg) return;
    savePairing(tg);
    nav("/tg-wait");
  }
  async function requestCode() {
    if (phone.length < 10) 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");
    } catch (err: unknown) {
      const status = (err as { response?: { status?: number } })?.response?.status;
      const fallback =
        status === 404 ? "Номер не найден. Обратитесь в парк." :
        status === 429 ? "Слишком часто. Попробуйте позже." :
        "Не удалось отправить код";
      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("/");
    } 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-white"
              />
              <button className="btn-primary" disabled={busy || phone.length < 10} onClick={requestCode}>
                {busy ? <Spinner /> : "Получить код"}
              </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-white"
              />
              <button className="btn-primary" disabled={busy || code.length < 4} onClick={verify}>
                {busy ? <Spinner /> : "Войти"}
              </button>
              <button className="btn-ghost mt-2" onClick={() => setStep("phone")}>Изменить номер</button>
            </>
          )}
        </>
      )}
    </div>
  );
 }
@@ -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();
  });
 });
@@ -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>
  );
 }
@@ -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();
  });
 });
@@ -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>
  );
 }
@@ -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 });
  });
 });
@@ -0,0 +1,130 @@
 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 { 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) 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-cream 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>
  );
 }
@@ -0,0 +1,55 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { usePairPoll } from "@/hooks/usePairPoll";
 import { clearPairing, loadPairing } from "@/lib/pairing";
 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("/", { 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>
  );
 }
@@ -0,0 +1,62 @@
 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 })),
  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");
  });
  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");
  });
  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");
  });
 });
@@ -0,0 +1,115 @@
 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 { 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 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");
      // Учебный платёж (сотрудник смотрит от чужого лица): банка нет, платить
      // негде — сразу на экран выбора исхода, дальше всё как у водителя.
      if (r.mock) {
        nav(`/mock-pay/${r.order_id}`, { state: { total: r.total, bucket, base, method } });
        return;
      }
      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>
      {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>
      )}
      <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>
      <button className="btn-primary" disabled={busy || base <= 0 || !bucket} onClick={pay}>
        {busy ? <Spinner /> : "Оплатить"}
      </button>
    </div>
  );
 }
@@ -0,0 +1,38 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 /** Кем открыт сеанс: сам водитель или сотрудник, смотрящий от его лица.
 * Признак приезжает из токена (claim `imp`), здесь он только продублирован для
 * интерфейса — проверять его на бэкенде по этому полю нельзя и не нужно. */
 export interface ViewAs {
  impersonated: boolean;
  /** ФИО водителя — показывать в плашке. У обычного входа неизвестно и не нужно. */
  driverName: string | null;
 }
 interface AuthState extends ViewAs {
  token: string | null;
  driverId: number | null;
  setSession: (token: string, driverId: number, view?: Partial<ViewAs>) => void;
  clear: () => void;
 }
 export const useAuth = create<AuthState>()(
  persist(
    (set) => ({
      token: null,
      driverId: null,
      impersonated: false,
      driverName: null,
      setSession: (token, driverId, view) =>
        set({
          token,
          driverId,
          impersonated: view?.impersonated ?? false,
          driverName: view?.driverName ?? null,
        }),
      clear: () => set({ token: null, driverId: null, impersonated: false, driverName: null }),
    }),
    { name: "pp-driver-auth" }
  )
 );
@@ -0,0 +1,29 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 /**
 * Сеанс СОТРУДНИКА — учётка CRM, которой берут просмотр от лица водителя.
 *
 * Хранится отдельно от водительского: это два разных токена с разным смыслом.
 * «Перестать смотреть за водителя» обязано оставлять сотрудника залогиненным,
 * иначе смена водителя каждый раз означала бы новый ввод пароля; и наоборот —
 * `clear()` водительского сеанса не должен трогать сотрудника.
 */
 interface StaffState {
  token: string | null;
  username: string | null;
  setStaff: (token: string, username: string) => void;
  clear: () => void;
 }
 export const useStaff = create<StaffState>()(
  persist(
    (set) => ({
      token: null,
      username: null,
      setStaff: (token, username) => set({ token, username }),
      clear: () => set({ token: null, username: null }),
    }),
    { name: "pp-driver-staff" }
  )
 );
@@ -0,0 +1 @@
 import "@testing-library/jest-dom/vitest";
@@ -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;
@@ -0,0 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        cream: "#F3EEE3", surface: "#FBF8F1", line: "#E4DCCB",
        ink: "#1C1B19", muted: "#7C7361", neg: "#C0493A", pos: "#3B6E4A",
      },
      fontFamily: { sans: ["Inter", "system-ui", "sans-serif"] },
      borderRadius: { xl2: "14px" },
    },
  },
  plugins: [],
 };
@@ -0,0 +1,11 @@
 {
  "compilerOptions": {
    "target": "ES2021", "useDefineForClassFields": true, "lib": ["ES2021", "DOM", "DOM.Iterable"],
    "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": ["vitest/globals", "@testing-library/jest-dom"]
  },
  "include": ["src"]
 }
@@ -0,0 +1,4 @@
 {
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./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"]
 }
@@ -0,0 +1,73 @@
 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(),
      VitePWA({ registerType: "autoUpdate", manifest: false, includeAssets: ["icons/*.png"] }),
    ],
    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,
        },
      },
    },
  };
 });
@@ -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"] },
 });
@@ -7,7 +7,9 @@
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
    "test": "vitest run",
    "test:watch": "vitest"
  },
  "dependencies": {
    "@radix-ui/react-label": "^2.1.8",
@@ -29,19 +31,25 @@
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
    "@types/node": "^24.12.4",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
    "@vitest/coverage-v8": "^4.1.8",
    "autoprefixer": "^10.5.0",
    "eslint": "^10.3.0",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.6.0",
    "jsdom": "^29.1.1",
    "postcss": "^8.5.14",
    "tailwindcss": "^3.4.19",
    "typescript": "~6.0.2",
    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
    "vitest": "^4.1.8"
  }
 }
@@ -9,8 +9,11 @@ import InspectionEditor from "@/pages/InspectionEditor";
 import InspectionReview from "@/pages/InspectionReview";
 import TtStateDetail from "@/pages/TtStateDetail";
 import RepairsFeedPage from "@/pages/repairs/RepairsFeedPage";
 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 RepairHistoryPage from "@/pages/repairs/RepairHistoryPage";
 function RequireAuth({ children }: { children: React.ReactNode }) {
  const token = useAuth((s) => s.token);
@@ -37,6 +40,15 @@ export default function App() {
      <Route path="/repairs" element={<RequireAuth><RepairsFeedPage /></RequireAuth>} />
      <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="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
@@ -65,13 +65,35 @@ export interface CreateOilChangePayload {
  sticker_extension: string | null;
 }
 export interface ExternalCarPayload {
  plate: string;
  make: string | null;
 }
 export interface CreateRepairPayload {
-  car_id: number;
+  car_id?: number;
  external_car?: ExternalCarPayload;
  mileage: number | null;
  works: CreateWorkPayload[];
  parts: CreatePartPayload[];
  photos: CreatePhotoPayload[];
  oil_change: CreateOilChangePayload | null;
  // Работавшие механики (делёж 1/N). Если не передан — backend сидит
  // одного создателя. Порядок = sort_order.
  mechanic_ids?: number[];
 }
 // ── Ростер механиков (пикер «Механики») ────────────────────────────────────
 export interface MechanicRosterItem {
  id: number;
  full_name: string;
 }
 export async function getMechanicsRoster(): Promise<MechanicRosterItem[]> {
  // prefixUrl = /api/v1/mechanic, эндпоинт под роутером /v1/mechanic/repairs →
  // путь обязан включать сегмент repairs/ (как и остальные вызовы файла).
  return api.get("repairs/mechanics-roster").json<MechanicRosterItem[]>();
 }
 export interface CreateRepairResponse {
@@ -80,9 +102,19 @@ export interface CreateRepairResponse {
  tg_outbox_status: string;
 }
-export async function searchCars(q: string): Promise<CarBrief[]> {
+export interface SearchCarsOptions {
-  const qs = q ? `?q=${encodeURIComponent(q)}` : "";
+  // Искать по всему парку, а не только по активным машинам. Нужно «Истории
-  return api.get(`cars${qs}`).json<CarBrief[]>();
+  // ремонта»: ремонты выведенной машины никуда не делись, их ищут и после.
  // Создание ремонта этим НЕ пользуется — там годятся только активные.
  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> {
@@ -12,9 +12,14 @@ export interface FeedItem {
  car_model: string | null;
  driver_name: string | null;
  mechanic_name: string;
  is_external: boolean;
  works_preview: FeedWorkBrief[];
  works_extra: number;
  works_total: number; // сумма работ без запчастей
  photo_url: string | null;
  // Пробег на момент ремонта. У старых ремонтов не заполнен — показываем
  // это честно, а не нулём (экран «История ремонта»).
  mileage?: number | null;
 }
 export interface FeedResponse {
@@ -25,14 +30,126 @@ export interface FeedResponse {
 export interface FeedParams {
  limit?: number;
  cursor?: 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);
  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}` : ""}`)
    .json<FeedResponse>();
 }
 export interface RepairsMonthStats {
  total: number;
  count: number;
 }
 export async function getRepairsMonthStats(): Promise<RepairsMonthStats> {
  return api.get("repairs/stats/month").json<RepairsMonthStats>();
 }
 // ── Детальная карточка ремонта ─────────────────────────────────────────────
 export interface RepairDetailWork {
  id: number;
  work_catalog_id: number;
  name: string;
  price_applied: number;
  manual_override: boolean;
  override_comment: string | null;
 }
 export interface RepairDetailPart {
  id: number;
  name: string;
  qty: number;
 }
 export interface RepairDetailPhoto {
  photo_uuid: string;
  thumb_url: string | null;
  orig_url: string | null;
 }
 export interface RepairDetailOil {
  mileage_at_change: number | null;
  next_in_km: number | null;
  has_sticker: boolean;
  sticker_thumb_url: string | null;
  sticker_orig_url: string | null;
 }
 export interface RepairDetailMechanic {
  id: number;
  mechanic_id: number;
  name: string;
 }
 export interface RepairDetailResponse {
  id: number;
  created_at: string;
  car_plate: string | null;
  car_make: string | null;
  car_model: string | null;
  driver_name: string | null;
  mechanic_name: string | null;
  mileage: number | null;
  works: RepairDetailWork[];
  parts: RepairDetailPart[];
  photos: RepairDetailPhoto[];
  oil_change: RepairDetailOil | null;
  total_sum: number;
  // Работавшие механики (делёж 1/N total_sum). Может отсутствовать на
  // старых ответах backend — фронт делает fallback на одного создателя.
  mechanics?: RepairDetailMechanic[];
  edited_in_crm: boolean;
  can_edit: boolean;
  edit_until: string | null;
 }
 export async function getRepairDetail(id: number): Promise<RepairDetailResponse> {
  return api.get(`repairs/${id}`).json<RepairDetailResponse>();
 }
 // ── PATCH (правка в 1-часовом окне У49) ────────────────────────────────────
 export interface PatchWork {
  work_catalog_id: number;
  price_applied: number;
  manual_override: boolean;
  override_comment: string | null;
 }
 export interface PatchPart {
  name: string;
  qty: number;
 }
 export interface PatchOilChange {
  enabled: boolean;
  mileage_at_change: number | null;
  next_in_km: number | null;
 }
 export interface PatchRepairPayload {
  mileage: number | null;
  works: PatchWork[];
  parts: PatchPart[];
  oil_change: PatchOilChange | null;
  // Работавшие механики. Опционально — если не передан, набор не меняется.
  mechanic_ids?: number[];
 }
 export async function patchRepair(id: number, body: PatchRepairPayload): Promise<RepairDetailResponse> {
  return api.patch(`repairs/${id}`, { json: body }).json<RepairDetailResponse>();
 }
@@ -0,0 +1,168 @@
 /**
 * Блок «Механики» формы ремонта — чипы работавших механиков + кнопка
 * «Добавить механика» (пикер из ростера) + удаление чипа.
 *
 * Делёж оплаты — поровну (1/N): доля каждого механика = total_sum / N.
 * Здесь показывается информативно (сумма на чел.), если передан totalSum.
 *
 * Состояние выбора живёт в родителе (как у WorksPickerModal): сюда
 * приходит value + onChange. Ростер компонент тянет сам при первом
 * открытии пикера (лениво) и кэширует на время жизни.
 */
 import { useState } from "react";
 import { Plus, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { fmtMoney } from "@/lib/repairsFeed";
 import { getMechanicsRoster, type MechanicRosterItem } from "@/api/repairsCreate";
 export interface SelectedMechanic {
  mechanic_id: number;
  name: string;
 }
 interface Props {
  value: SelectedMechanic[];
  onChange: (next: SelectedMechanic[]) => void;
  // Если задан и механиков >0 — показываем долю (1/N · totalSum).
  totalSum?: number;
  disabled?: boolean;
 }
 export default function MechanicsField({ value, onChange, totalSum, disabled }: Props) {
  const [pickerOpen, setPickerOpen] = useState(false);
  const [roster, setRoster] = useState<MechanicRosterItem[] | null>(null);
  const [rosterError, setRosterError] = useState<string | null>(null);
  const [q, setQ] = useState("");
  const openPicker = async () => {
    setPickerOpen(true);
    if (roster) return;
    try {
      const list = await getMechanicsRoster();
      setRoster(list);
      setRosterError(null);
    } catch (e) {
      setRosterError((e as Error).message || "Не удалось загрузить список механиков");
    }
  };
  const addMechanic = (m: MechanicRosterItem) => {
    // Дедуп: один механик один раз (UNIQUE на бэке).
    if (!value.some((v) => v.mechanic_id === m.id)) {
      onChange([...value, { mechanic_id: m.id, name: m.full_name }]);
    }
    setPickerOpen(false);
    setQ("");
  };
  const removeMechanic = (mechanicId: number) =>
    onChange(value.filter((v) => v.mechanic_id !== mechanicId));
  const share =
    totalSum != null && value.length > 0 ? Math.round(totalSum / value.length) : null;
  const filtered = (roster ?? []).filter((m) =>
    q.trim() ? m.full_name.toLowerCase().includes(q.trim().toLowerCase()) : true,
  );
  return (
    <section>
      <div className="flex items-baseline justify-between">
        <Label className="text-sm">Механики</Label>
        {!disabled && (
          <Button variant="outline" size="sm" onClick={openPicker}>
            <Plus className="h-3 w-3 mr-1" />
            Добавить механика
          </Button>
        )}
      </div>
      {value.length === 0 ? (
        <div className="text-xs text-muted-foreground mt-2">Минимум один механик</div>
      ) : (
        <div className="mt-2 flex flex-wrap gap-2">
          {value.map((m) => (
            <span
              key={m.mechanic_id}
              className="inline-flex items-center gap-1.5 rounded-full border bg-muted/50 pl-3 pr-1.5 py-1 text-sm"
            >
              <span className="leading-none">{m.name}</span>
              {!disabled && (
                <button
                  type="button"
                  onClick={() => removeMechanic(m.mechanic_id)}
                  className="rounded-full p-0.5 hover:bg-accent text-muted-foreground"
                  aria-label={`Убрать ${m.name}`}
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              )}
            </span>
          ))}
        </div>
      )}
      {share != null && value.length > 1 && (
        <div className="mt-2 text-xs text-muted-foreground">
          Делёж поровну: {fmtMoney(share)} ₽ на каждого ({value.length} мех.)
        </div>
      )}
      {/* Пикер механиков из ростера */}
      {pickerOpen && (
        <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
              type="button"
              onClick={() => {
                setPickerOpen(false);
                setQ("");
              }}
              className="rounded-full px-3 py-2 text-sm hover:bg-accent"
            >
              Закрыть
            </button>
            <Input
              autoFocus
              placeholder="Поиск механика…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </header>
          <div className="flex-1 overflow-auto">
            {rosterError && (
              <div className="text-sm text-destructive bg-destructive/10 m-3 rounded-md p-3">
                {rosterError}
              </div>
            )}
            {roster === null && !rosterError && (
              <div className="text-center text-muted-foreground p-8 text-sm">Загрузка…</div>
            )}
            {filtered.map((m) => {
              const already = value.some((v) => v.mechanic_id === m.id);
              return (
                <button
                  type="button"
                  key={m.id}
                  disabled={already}
                  onClick={() => addMechanic(m)}
                  className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-center justify-between gap-3 disabled:opacity-50"
                >
                  <span className="text-sm">{m.full_name}</span>
                  {already && <span className="text-xs text-muted-foreground">уже добавлен</span>}
                </button>
              );
            })}
            {roster !== null && !rosterError && filtered.length === 0 && (
              <div className="text-center text-muted-foreground p-8 text-sm">
                Ничего не найдено
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
 }
@@ -0,0 +1,43 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
 import WorksPickerModal from "@/components/repairs/WorksPickerModal";
 import type { MechWork } from "@/api/repairsCreate";
 const works: MechWork[] = [
  { id: 1, name: "Замена масла", category_id: 1, price: 1500, norma_hours: null },
  { id: 2, name: "Развал-схождение", category_id: 1, price: "2000", norma_hours: null },
 ];
 test("рендерит работы с ценой и зовёт onPick по клику", async () => {
  const user = userEvent.setup();
  const onPick = vi.fn();
  render(
    <WorksPickerModal query="" results={works} onQuery={() => {}} onPick={onPick} onClose={() => {}} />,
  );
  expect(screen.getByText("Замена масла")).toBeInTheDocument();
  expect(screen.getByText("1 500 ₽")).toBeInTheDocument(); // число из 1500
  expect(screen.getByText("2 000 ₽")).toBeInTheDocument(); // строка "2000" → число
  await user.click(screen.getByText("Развал-схождение"));
  expect(onPick).toHaveBeenCalledWith(works[1]);
 });
 test("пустой список → «Ничего не найдено»", () => {
  render(
    <WorksPickerModal query="x" results={[]} onQuery={() => {}} onPick={() => {}} onClose={() => {}} />,
  );
  expect(screen.getByText("Ничего не найдено")).toBeInTheDocument();
 });
 test("ввод в поиск зовёт onQuery; кнопка назад — onClose", async () => {
  const user = userEvent.setup();
  const onQuery = vi.fn();
  const onClose = vi.fn();
  render(
    <WorksPickerModal query="" results={[]} onQuery={onQuery} onPick={() => {}} onClose={onClose} />,
  );
  await user.type(screen.getByPlaceholderText("Поиск работы…"), "масло");
  expect(onQuery).toHaveBeenCalled();
  await user.click(screen.getByLabelText("Закрыть"));
  expect(onClose).toHaveBeenCalled();
 });
@@ -0,0 +1,74 @@
 /**
 * Модалка выбора работы из каталога. Раньше была продублирована почти один-в-один
 * в CreateRepairPage и EditRepairPage — вынесена в общий презентационный компонент.
 *
 * Состояние (открыта/запрос/результаты) живёт в родителе; здесь только UI +
 * колбэки. Это сознательно: формы создания и правки ремонта разошлись по UX
 * (inline-разблокировка цены против модалки-override, фото против их отсутствия),
 * поэтому единая «форма ремонта» была бы хуже — общим является именно этот пикер.
 */
 import { ChevronLeft } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { fmtMoney } from "@/lib/repairsFeed";
 import type { MechWork } from "@/api/repairsCreate";
 interface Props {
  query: string;
  results: MechWork[];
  onQuery: (q: string) => void;
  onPick: (work: MechWork) => void;
  onClose: () => void;
 }
 export default function WorksPickerModal({ query, results, onQuery, onPick, onClose }: Props) {
  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
          type="button"
          onClick={onClose}
          className="rounded-full p-2 hover:bg-accent"
          aria-label="Закрыть"
        >
          <ChevronLeft className="h-5 w-5" />
        </button>
        <Input
          autoFocus
          placeholder="Поиск работы…"
          value={query}
          onChange={(e) => onQuery(e.target.value)}
        />
      </header>
      <div className="flex-1 overflow-auto">
        {results.map((mw) => (
          <button
            type="button"
            key={mw.id}
            onClick={() => onPick(mw)}
            className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-start justify-between gap-3"
          >
            <span
              className="flex-1 min-w-0 text-sm leading-snug break-words"
              style={{
                display: "-webkit-box",
                WebkitLineClamp: 2,
                WebkitBoxOrient: "vertical",
                overflow: "hidden",
              }}
            >
              {mw.name}
            </span>
            <span className="text-sm text-muted-foreground font-mono whitespace-nowrap shrink-0 mt-0.5">
              {fmtMoney(Number(mw.price))} ₽
            </span>
          </button>
        ))}
        {results.length === 0 && (
          <div className="text-center text-muted-foreground p-8 text-sm">
            Ничего не найдено
          </div>
        )}
      </div>
    </div>
  );
 }
@@ -31,5 +31,29 @@
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground font-sans;
    /* iOS PWA: status bar (status-bar-style=black-translucent) и home-indicator
       перекрывают контент при viewport-fit=cover. Сдвигаем body content вниз
       на высоту safe-area, чтобы шапки/кнопки не уезжали под системные зоны. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
 }
@layer utilities {
  /* iOS PWA: position:sticky + top:0 прилипает к самому верху viewport,
     т.е. под статус-бар (containing-block тут не помогает). Переопределяем
     top у всех Tailwind .top-0, чтобы шапки залипали ниже notch. */
  .sticky.top-0,
  .fixed.top-0 {
    top: env(safe-area-inset-top);
  }
  /* Full-screen page-replacement модалки (fixed inset-0 с app background) —
     поиск работ, аннотация фото, zone-detail, inspection-editor. Шапка внутри
     должна сидеть ниже status-bar, нижние кнопки выше home-indicator.
     bg-black/40·50·90 диалоги/просмотрщики не задеваем — у них inset-0 full-bleed. */
  .fixed.inset-0.bg-background,
  .fixed.inset-0.bg-background\/95 {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
 }
@@ -0,0 +1,18 @@
 import { slotsForType } from "@/lib/inspectionSlots";
 test("Салон перед (ключ interior сохранён) + Салон зад + Багажник", () => {
  const slots = slotsForType("handover");
  expect(slots.find((s) => s.side === "interior")?.label).toBe("Салон перед");
  expect(slots.find((s) => s.side === "interior-rear")?.label).toBe("Салон зад");
  expect(slots.find((s) => s.side === "trunk")?.label).toBe("Багажник");
 });
 test("порядок: Салон перед → Салон зад → Багажник идут подряд", () => {
  const sides = slotsForType("return").map((s) => s.side);
  const i = sides.indexOf("interior");
  expect(sides.slice(i, i + 3)).toEqual(["interior", "interior-rear", "trunk"]);
 });
 test("набор одинаков для всех типов (унифицировано)", () => {
  expect(slotsForType("periodic")).toEqual(slotsForType("handover"));
 });
@@ -0,0 +1,37 @@
 /**
 * Слоты фото осмотра авто. Вынесены из InspectionEditor, чтобы быть покрытыми
 * тестами. Все типы осмотров (приёмка/выдача/плановый/ad-hoc) показывают один
 * набор — фидбек: общее состояние машины фиксируем всегда.
 *
 * ВАЖНО: `side` — стабильный ключ слота (часть S3-ключа фото и значение
 * PhotoSide на бэке). Подпись (`label`) менять можно, ключ — нет, иначе уже
 * снятые фото осиротеют. Поэтому «Салон перед» имеет ключ `interior` (бывш. «Салон»).
 */
 export interface InspectionSlot {
  side: string;
  label: string;
 }
 export const SLOTS_GENERAL: InspectionSlot[] = [
  { side: "front", label: "Перед" },
  { side: "rear", label: "Зад" },
  { side: "left", label: "Левый бок" },
  { side: "right", label: "Правый бок" },
  { side: "vin", label: "VIN" },
  { side: "odometer", label: "Одометр" },
  { side: "interior", label: "Салон перед" },
  { side: "interior-rear", label: "Салон зад" },
  { side: "trunk", label: "Багажник" },
  { side: "free", label: "Свободное" },
 ];
 export const SLOT_JACK: InspectionSlot = { side: "jack", label: "Домкрат" };
 // Шильдик замены масла — отдельный слот при выдаче/приёмке. Фото нужно как для
 // сверки текущего пробега со следующим ТО, так и для контроля что водитель не
 // клеит свой стикер.
 export const SLOT_OIL_STICKER: InspectionSlot = { side: "oil-sticker", label: "Шильдик замены масла" };
 export function slotsForType(_type: string): InspectionSlot[] {
  return [...SLOTS_GENERAL, SLOT_JACK, SLOT_OIL_STICKER];
 }
@@ -0,0 +1,50 @@
 import { repairCanSubmit, repairSubmitWhyDisabled } from "@/lib/repairForm";
 const okPhoto = { status: "uploaded" as const };
 const okWork = { unlocked: false, override_comment: "" };
 describe("repairSubmitWhyDisabled", () => {
  it("нет фото → причина про фото", () => {
    expect(repairSubmitWhyDisabled([], [okWork])).toBe("Добавьте хотя бы одно фото");
  });
  it("фото ещё грузится → причина про загрузку", () => {
    expect(
      repairSubmitWhyDisabled([{ status: "uploading" }], [okWork]),
    ).toBe("Дождитесь окончания загрузки фото");
  });
  it("фото с ошибкой загрузки тоже блокирует", () => {
    expect(
      repairSubmitWhyDisabled([{ status: "error" }], [okWork]),
    ).toBe("Дождитесь окончания загрузки фото");
  });
  it("нет работ → причина про работы", () => {
    expect(repairSubmitWhyDisabled([okPhoto], [])).toBe("Добавьте хотя бы одну работу");
  });
  it("разблокированная цена без комментария → требует комментарий", () => {
    expect(
      repairSubmitWhyDisabled([okPhoto], [{ unlocked: true, override_comment: "  " }]),
    ).toBe("Укажите комментарий к ручной правке цены");
  });
  it("разблокированная цена с комментарием → ок", () => {
    expect(
      repairSubmitWhyDisabled([okPhoto], [{ unlocked: true, override_comment: "скидка" }]),
    ).toBe("");
  });
  it("валидная форма → пустая причина", () => {
    expect(repairSubmitWhyDisabled([okPhoto], [okWork])).toBe("");
  });
 });
 describe("repairCanSubmit", () => {
  it("= (нет причины блокировки)", () => {
    expect(repairCanSubmit([okPhoto], [okWork])).toBe(true);
    expect(repairCanSubmit([], [okWork])).toBe(false);
    expect(repairCanSubmit([{ status: "uploading" }], [okWork])).toBe(false);
  });
 });
@@ -0,0 +1,37 @@
 /**
 * Логика гейтинга сохранения формы ремонта (Create/Edit). Вынесена из
 * CreateRepairPage, чтобы быть единым источником правды и покрытой тестами:
 * `canSubmit` теперь буквально «нет причины блокировки», без расхождения
 * между двумя проверками.
 *
 * Принимает структурные срезы стейта (только нужные поля), поэтому не зависит
 * от конкретных типов страниц.
 */
 export interface RepairFormPhotoLike {
  status: "uploading" | "uploaded" | "error" | string;
 }
 export interface RepairFormWorkLike {
  unlocked: boolean;
  override_comment: string;
 }
 /** Возвращает причину, по которой сохранение заблокировано, или "" если можно. */
 export function repairSubmitWhyDisabled(
  photos: RepairFormPhotoLike[],
  works: RepairFormWorkLike[],
 ): string {
  if (photos.length === 0) return "Добавьте хотя бы одно фото";
  if (photos.some((p) => p.status !== "uploaded")) return "Дождитесь окончания загрузки фото";
  if (works.length === 0) return "Добавьте хотя бы одну работу";
  const unlockedNoComment = works.find((w) => w.unlocked && !w.override_comment.trim());
  if (unlockedNoComment) return "Укажите комментарий к ручной правке цены";
  return "";
 }
 export function repairCanSubmit(
  photos: RepairFormPhotoLike[],
  works: RepairFormWorkLike[],
 ): boolean {
  return repairSubmitWhyDisabled(photos, works) === "";
 }
@@ -0,0 +1,97 @@
 import type { FeedItem } from "@/api/repairsFeed";
 import {
  toLocalDateKey,
  formatDayLabel,
  groupByLocalDay,
  fmtMoney,
  pluralRepairs,
  pluralWorks,
 } from "@/lib/repairsFeed";
 function item(id: number, created_at: string, works_total = 0): FeedItem {
  return {
    id,
    created_at,
    car_plate: "А001АА125",
    car_make: null,
    car_model: null,
    driver_name: null,
    mechanic_name: "M",
    works_preview: [],
    works_extra: 0,
    works_total,
    photo_url: null,
    is_external: false,
  } as FeedItem;
 }
 describe("toLocalDateKey (Asia/Vladivostok)", () => {
  it("маппит UTC-инстант на VLA-сутки (+10)", () => {
    // 2026-05-25 20:00Z == 2026-05-26 06:00 VLA → день 26-го
    expect(toLocalDateKey("2026-05-25T20:00:00Z")).toBe("2026-05-26");
    // 2026-05-25 13:00Z == 2026-05-25 23:00 VLA → ещё 25-е
    expect(toLocalDateKey("2026-05-25T13:00:00Z")).toBe("2026-05-25");
    // 2026-05-25 14:00Z == 2026-05-26 00:00 VLA → уже 26-е (граница суток)
    expect(toLocalDateKey("2026-05-25T14:00:00Z")).toBe("2026-05-26");
  });
 });
 describe("formatDayLabel", () => {
  const now = new Date("2026-05-26T05:00:00Z"); // 15:00 VLA, день 26-го
  it("Сегодня / Вчера относительно VLA-now", () => {
    expect(formatDayLabel("2026-05-26", now)).toBe("Сегодня");
    expect(formatDayLabel("2026-05-25", now)).toBe("Вчера");
  });
  it("прочие даты — «D месяц»", () => {
    expect(formatDayLabel("2026-05-20", now)).toBe("20 мая");
  });
 });
 describe("groupByLocalDay", () => {
  it("группирует по VLA-дню, суммирует works_total, сохраняет порядок", () => {
    const items = [
      item(3, "2026-05-26T01:00:00Z", 100), // 26-е VLA
      item(2, "2026-05-25T20:00:00Z", 50), // тоже 26-е VLA (06:00)
      item(1, "2026-05-25T01:00:00Z", 200), // 25-е VLA
    ];
    const groups = groupByLocalDay(items);
    expect(groups.map((g) => g.key)).toEqual(["2026-05-26", "2026-05-25"]);
    expect(groups[0].total).toBe(150);
    expect(groups[0].items).toHaveLength(2);
    expect(groups[1].total).toBe(200);
  });
  it("пустой вход → пустой массив", () => {
    expect(groupByLocalDay([])).toEqual([]);
  });
 });
 describe("fmtMoney", () => {
  it("округляет и форматирует тысячи (NBSP-разделитель)", () => {
    expect(fmtMoney(91000).replace(/ /g, " ")).toBe("91 000");
    expect(fmtMoney(1499.6).replace(/ /g, " ")).toBe("1 500");
  });
 });
 describe("склонения", () => {
  it.each([
    [1, "ремонт"],
    [2, "ремонта"],
    [4, "ремонта"],
    [5, "ремонтов"],
    [11, "ремонтов"],
    [21, "ремонт"],
    [22, "ремонта"],
  ])("pluralRepairs(%i) = %s", (n, exp) => {
    expect(pluralRepairs(n)).toBe(exp);
  });
  it.each([
    [1, "работа"],
    [3, "работы"],
    [5, "работ"],
    [12, "работ"],
  ])("pluralWorks(%i) = %s", (n, exp) => {
    expect(pluralWorks(n)).toBe(exp);
  });
 });
@@ -0,0 +1,81 @@
 /**
 * Чистые помощники ленты ремонтов: группировка по локальной дате (VLA),
 * форматирование сумм и склонения. Вынесены из RepairsFeedPage, чтобы быть
 * переиспользуемыми и покрытыми юнит-тестами (TZ-логика группировки —
 * частый источник off-by-one багов).
 */
 import type { FeedItem } from "@/api/repairsFeed";
 export interface DayGroup {
  key: string; // YYYY-MM-DD (VLAT)
  items: FeedItem[];
  total: number;
 }
 /** ISO → дата в Asia/Vladivostok (+10) как YYYY-MM-DD. */
 export function toLocalDateKey(iso: string): string {
  const d = new Date(iso);
  const fmt = new Intl.DateTimeFormat("en-CA", {
    timeZone: "Asia/Vladivostok",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
  return fmt.format(d); // 2026-05-26
 }
 /** key = YYYY-MM-DD → «26 мая» / «Сегодня» / «Вчера» (относительно VLA-сегодня). */
 export function formatDayLabel(key: string, now: Date = new Date()): string {
  const today = toLocalDateKey(now.toISOString());
  if (key === today) return "Сегодня";
  const yest = new Date(now.getTime() - 24 * 3600 * 1000);
  if (key === toLocalDateKey(yest.toISOString())) return "Вчера";
  const [y, m, d] = key.split("-").map(Number);
  const dt = new Date(Date.UTC(y, m - 1, d));
  return new Intl.DateTimeFormat("ru-RU", {
    day: "numeric",
    month: "long",
    timeZone: "UTC",
  }).format(dt);
 }
 /** Группирует ленту по локальной дате; items уже отсортированы created_at DESC,
 *  поэтому ключи идут от свежих к старым. total — сумма works_total по дню. */
 export function groupByLocalDay(items: FeedItem[]): DayGroup[] {
  const map = new Map<string, DayGroup>();
  for (const it of items) {
    const key = toLocalDateKey(it.created_at);
    let g = map.get(key);
    if (!g) {
      g = { key, items: [], total: 0 };
      map.set(key, g);
    }
    g.items.push(it);
    g.total += it.works_total || 0;
  }
  return Array.from(map.values());
 }
 export function fmtMoney(n: number): string {
  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
 }
 /** 1 → «ремонт», 2..4 → «ремонта», 5+/11..14 → «ремонтов». */
 export function pluralRepairs(n: number): string {
  const mod10 = n % 10;
  const mod100 = n % 100;
  if (mod100 >= 11 && mod100 <= 14) return "ремонтов";
  if (mod10 === 1) return "ремонт";
  if (mod10 >= 2 && mod10 <= 4) return "ремонта";
  return "ремонтов";
 }
 /** 1 → «работа», 2..4 → «работы», 5+/11..14 → «работ». */
 export function pluralWorks(n: number): string {
  const mod10 = n % 10;
  const mod100 = n % 100;
  if (mod100 >= 11 && mod100 <= 14) return "работ";
  if (mod10 === 1) return "работа";
  if (mod10 >= 2 && mod10 <= 4) return "работы";
  return "работ";
 }
@@ -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,16 +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"),
    },
    {
      key: "repair-history",
      title: "История ремонта",
      description: "Что чинили на машине — поиск по госномеру",
      icon: History,
      onClick: () => navigate("/repairs/history"),
    },
  ];
  return (
@@ -62,7 +72,9 @@ export default function ActionMenu() {
          Что делаем?
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          {tiles.map((t) => (
+          {tiles.map((t) => {
            const Icon = t.icon;
            return (
              <Card
                key={t.key}
                onClick={t.disabled ? undefined : t.onClick}
@@ -74,7 +86,7 @@ export default function ActionMenu() {
                }
              >
                <div className="flex items-start gap-3">
-                <div className="text-3xl leading-none">{t.emoji}</div>
+                  <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>
@@ -90,7 +102,8 @@ export default function ActionMenu() {
                  </div>
                </div>
              </Card>
-          ))}
+            );
          })}
        </div>
      </main>
    </div>
@@ -25,26 +25,8 @@ import { loadZoneLabels } from "@/data/zoneLabels";
 import { damageTypeRuToEnum } from "@/data/damageVocabulary";
 import { ttImageUrl } from "@/api/vehicles";
-const SLOTS_GENERAL: { side: string; label: string }[] = [
+// Слоты фото осмотра — в @/lib/inspectionSlots (покрыто тестами).
-  { side: "front", label: "Перед" },
+import { slotsForType } from "@/lib/inspectionSlots";
  { side: "rear", label: "Зад" },
  { side: "left", label: "Левый бок" },
  { side: "right", label: "Правый бок" },
  { side: "vin", label: "VIN" },
  { side: "odometer", label: "Одометр" },
  { side: "interior", label: "Салон" },
  { side: "free", label: "Свободное" },
 ];
 const SLOT_JACK = { side: "jack", label: "Домкрат" };
 /** Все типы осмотров (выдача/приёмка/плановый/...) показывают одинаковый
 *  набор слотов общих ракурсов + домкрат. Раньше «return» исключал общие
 *  фото в пользу скорости приёмки, но фидбек: при приёмке всё равно надо
 *  фиксировать общее состояние машины, как и при выдаче/осмотре. */
 function slotsForType(_type: string): typeof SLOTS_GENERAL {
  return [...SLOTS_GENERAL, SLOT_JACK];
 }
 const SEVERITY_LABELS: Record<string, string> = {
  cosmetic: "косметика",
@@ -1,14 +1,21 @@
 import { useState } from "react";
-import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import { useParams, useNavigate, useSearchParams, useLocation } from "react-router-dom";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { ChevronRight, Wrench } from "lucide-react";
 import { getVehicle, getTtHistory } from "@/api/vehicles";
 import { createInspection, type InspectionType } from "@/api/inspections";
 import { getRepairsFeed, type FeedItem } from "@/api/repairsFeed";
 import { fmtMoney, pluralWorks } from "@/lib/repairsFeed";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 /** Сколько последних ремонтов показывать прямо в карточке — остальное
 *  за кнопкой «История ремонта». */
 const RECENT_REPAIRS_LIMIT = 3;
 const INSPECTION_TYPE_LABELS: Record<InspectionType, string> = {
  handover: "Выдача",
  return: "Приёмка",
@@ -42,11 +49,16 @@ function timeAgo(iso: string): string {
 export default function VehicleCard() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const vehicleId = Number(id);
  const action = searchParams.get("action") || undefined;
  // Куда вернуть механика с экранов ремонта: сюда же, вместе с ?action —
  // иначе «Назад» уводит в общую ленту парка, и машину ищи заново.
  const backHere = `${location.pathname}${location.search}`;
  const [pendingType, setPendingType] = useState<InspectionType | null>(null);
  const [mileageInput, setMileageInput] = useState("");
  const [mileageSource, setMileageSource] = useState<
@@ -67,6 +79,29 @@ export default function VehicleCard() {
    staleTime: 5 * 60_000,
  });
  // Ремонты именно этой машины (№4439) — самый частый вопрос механика.
  // Берём ту же ленту ремонтов, но с фильтром по машине; в карточке
  // показываем верхушку, вся история — на отдельном экране.
  const repairsQuery = useQuery({
    queryKey: ["vehicle", vehicleId, "repairs"],
    queryFn: () =>
      getRepairsFeed({
        car_id: vehicleId,
        limit: RECENT_REPAIRS_LIMIT,
        // Превью фото здесь не рисуем — не гоняем backend в хранилище
        // (на каждую строку: выборка фото, проверка миниатюры, подпись ссылки).
        with_photos: false,
      }),
    enabled: Number.isFinite(vehicleId),
    staleTime: 60_000,
    // Запись ремонта происходит на другом экране и этот кэш не сбрасывает.
    // Поэтому обновляем на каждый вход в карточку: иначе механик, вернувшись
    // сразу после сохранения, видит блок без своего ремонта — как потерянный.
    // Старые строки при этом остаются на экране, скелетон не мигает.
    refetchOnMount: "always",
  });
  const recentRepairs: FeedItem[] = repairsQuery.data?.items ?? [];
  const startInspection = useMutation({
    mutationFn: (input: { type: InspectionType; mileage: number | undefined }) =>
      createInspection({ vehicle_id: vehicleId, type: input.type, mileage: input.mileage }),
@@ -169,6 +204,86 @@ export default function VehicleCard() {
        </div>
      </div>
      <div>
        <h2 className="text-sm font-semibold text-muted-foreground mb-2">
          Последние ремонты
        </h2>
        {repairsQuery.isLoading ? (
          <div className="space-y-2">
            {Array.from({ length: 2 }).map((_, i) => (
              <div key={i} className="h-16 rounded-lg bg-muted animate-pulse" />
            ))}
          </div>
        ) : recentRepairs.length === 0 ? (
          <Card className="p-4 text-sm text-muted-foreground">
            {repairsQuery.isError
              ? "Не удалось загрузить ремонты."
              : "Ремонтов ещё не было."}
          </Card>
        ) : (
          <div className="space-y-2">
            {recentRepairs.map((r) => {
              const works = r.works_preview.map((w) => w.name).join(" · ");
              return (
                <Card
                  key={r.id}
                  className="p-3 cursor-pointer hover:shadow-md transition-shadow"
                  onClick={() =>
                    navigate(`/repairs/${r.id}`, { state: { from: backHere } })
                  }
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <div className="font-medium truncate">
                        {works || "Ремонт"}
                        {r.works_extra > 0 && (
                          <span className="text-muted-foreground">
                            {" "}
                            · +{r.works_extra} {pluralWorks(r.works_extra)}
                          </span>
                        )}
                      </div>
                      <div className="text-xs text-muted-foreground mt-1 flex items-center gap-2 flex-wrap">
                        <span>
                          {new Date(r.created_at).toLocaleDateString("ru-RU")}
                        </span>
                        {r.mileage != null && (
                          <>
                            <span className="text-muted-foreground/50">·</span>
                            <span>{r.mileage.toLocaleString("ru-RU")} км</span>
                          </>
                        )}
                      </div>
                    </div>
                    <div className="text-xs text-muted-foreground shrink-0 tabular-nums">
                      {fmtMoney(r.works_total || 0)} ₽
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        )}
        {/* Вход в историю оставляем и при ошибке загрузки — на отдельном
            экране механик хотя бы сможет попробовать ещё раз. */}
        {(recentRepairs.length > 0 || repairsQuery.isError) && (
          <Button
            variant="outline"
            size="lg"
            className="w-full mt-2"
            onClick={() =>
              navigate(`/repairs/history/${vehicleId}`, {
                state: { from: backHere },
              })
            }
          >
            <Wrench className="h-4 w-4 mr-2" />
            История ремонта
            <ChevronRight className="h-4 w-4 ml-1" />
          </Button>
        )}
      </div>
      <div>
        <h2 className="text-sm font-semibold text-muted-foreground mb-2">
          Прошлые осмотры
@@ -0,0 +1,51 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
 const { navigate } = vi.hoisted(() => ({ navigate: vi.fn() }));
 vi.mock("react-router-dom", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-router-dom")>();
  return { ...actual, useNavigate: () => navigate };
 });
 vi.mock("@/api/repairsCreate", () => ({
  searchCars: vi.fn().mockResolvedValue([]),
 }));
 import CarSelectPage from "@/pages/repairs/CarSelectPage";
 beforeEach(() => navigate.mockClear());
 test("«Машина не из парка» → ввод номера → navigate в external-режим со state (номер trim'ится)", async () => {
  const user = userEvent.setup();
  render(<CarSelectPage />);
  await user.click(screen.getByText("+ Машина не из парка"));
  await user.type(screen.getByPlaceholderText("Х999ХХ199"), " х999хх199 ");
  await user.type(screen.getByPlaceholderText("Toyota Camry"), "Toyota Camry");
  await user.click(screen.getByText("Продолжить →"));
  expect(navigate).toHaveBeenCalledWith("/repairs/new-external", {
    state: { plate: "х999хх199", make: "Toyota Camry" },
  });
 });
 test("марка опциональна → make=null если поле пустое", async () => {
  const user = userEvent.setup();
  render(<CarSelectPage />);
  await user.click(screen.getByText("+ Машина не из парка"));
  await user.type(screen.getByPlaceholderText("Х999ХХ199"), "А001АА125");
  await user.click(screen.getByText("Продолжить →"));
  expect(navigate).toHaveBeenCalledWith("/repairs/new-external", {
    state: { plate: "А001АА125", make: null },
  });
 });
 test("«Продолжить» заблокирована без номера", async () => {
  const user = userEvent.setup();
  render(<CarSelectPage />);
  await user.click(screen.getByText("+ Машина не из парка"));
  expect(screen.getByText("Продолжить →").closest("button")).toBeDisabled();
 });
@@ -18,6 +18,15 @@ export default function CarSelectPage() {
  const [cars, setCars] = useState<CarBrief[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [extOpen, setExtOpen] = useState(false);
  const [extPlate, setExtPlate] = useState("");
  const [extMake, setExtMake] = useState("");
  const continueExternal = () => {
    const plate = extPlate.trim();
    if (!plate) return;
    navigate("/repairs/new-external", { state: { plate, make: extMake.trim() || null } });
  };
  useEffect(() => {
    let cancelled = false;
@@ -62,6 +71,13 @@ export default function CarSelectPage() {
        </div>
      </header>
      <main className="flex-1 container max-w-2xl py-3">
        <button
          type="button"
          onClick={() => setExtOpen(true)}
          className="w-full mb-3 flex items-center justify-center gap-1 rounded-md border border-dashed bg-card hover:bg-accent/40 transition-colors p-3 text-sm font-medium text-muted-foreground"
        >
          + Машина не из парка
        </button>
        {error && (
          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
            {error}
@@ -96,6 +112,41 @@ export default function CarSelectPage() {
          </ul>
        )}
      </main>
      {extOpen && (
        <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={() => setExtOpen(false)}>
              Отмена
            </Button>
            <h2 className="text-base font-semibold">Машина с улицы</h2>
          </header>
          <main className="flex-1 container max-w-2xl py-4 space-y-4">
            <div>
              <label className="text-sm font-medium">Госномер *</label>
              <Input
                autoFocus
                value={extPlate}
                onChange={(e) => setExtPlate(e.target.value)}
                placeholder="Х999ХХ199"
                className="mt-1"
                onKeyDown={(e) => e.key === "Enter" && continueExternal()}
              />
            </div>
            <div>
              <label className="text-sm font-medium">Марка и модель (необязательно)</label>
              <Input
                value={extMake}
                onChange={(e) => setExtMake(e.target.value)}
                placeholder="Toyota Camry"
                className="mt-1"
              />
            </div>
            <Button className="w-full" disabled={!extPlate.trim()} onClick={continueExternal}>
              Продолжить →
            </Button>
          </main>
        </div>
      )}
    </div>
  );
 }
@@ -15,12 +15,16 @@
 * Сохранение: POST /repairs с `Idempotency-Key` (UUID v4 в state).
 */
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { ChevronLeft, Plus, Trash2, Pencil, Camera } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { repairCanSubmit, repairSubmitWhyDisabled } from "@/lib/repairForm";
 import WorksPickerModal from "@/components/repairs/WorksPickerModal";
 import MechanicsField, { type SelectedMechanic } from "@/components/repairs/MechanicsField";
 import { getMe } from "@/api/me";
 import {
  createRepair,
  getCarContext,
@@ -41,6 +45,10 @@ interface PhotoState {
  tag: "auto" | "part" | "other";
  status: "uploading" | "uploaded" | "error";
  errorMessage?: string;
  // Превью локального файла через URL.createObjectURL — отдаётся в <img>
  // вместо плейсхолдера «Загружено». Освобождается через revokeObjectURL
  // при удалении и при размонтировании страницы.
  previewUrl?: string;
 }
 interface WorkRow {
@@ -50,7 +58,10 @@ interface WorkRow {
  work_catalog_id: number;
  name: string; // снапшот имени из прайса
  price_catalog: number;
-  price_applied: number;
+  // "" допустим в процессе редактирования — иначе React при очистке inputа
  // сразу подставляет "0" и его приходится курсором обходить, см. жалобу
  // механиков. На submit пустое трактуется как 0 (или как ошибка валидации).
  price_applied: number | "";
  unlocked: boolean; // карандашик разблокировал поле
  override_comment: string;
 }
@@ -63,13 +74,19 @@ interface PartRow {
 interface OilChangeState {
  enabled: boolean;
  mileage_at_change: number | null;
  mileage_is_dirty: boolean; // У24: мягкая подписка с шапочным
  next_in_km: number;
  sticker: PhotoState | null;
 }
 // Цены ремонта — целые рубли без копеек. API отдаёт Numeric(10,2)
 // строкой типа "500.00" — пропускаем через округление при отображении.
 function fmtPrice(p: number | string): string {
  const n = Number(p);
  if (Number.isNaN(n)) return String(p);
  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
 }
 function uuid4(): string {
  // crypto.randomUUID требует secure context; mechanic.pptaxi.ru — https.
  return (crypto as any).randomUUID
@@ -81,6 +98,9 @@ function uuid4(): string {
 export default function CreateRepairPage() {
  const navigate = useNavigate();
  const { carId: carIdRaw } = useParams<{ carId: string }>();
  const location = useLocation();
  const isExternal = !carIdRaw;
  const externalState = location.state as { plate: string; make: string | null } | null;
  const carId = carIdRaw ? Number(carIdRaw) : 0;
  // Idempotency-Key для этой формы — стабилен между ре-сабмитами (У20).
@@ -93,10 +113,11 @@ export default function CreateRepairPage() {
  const [photos, setPhotos] = useState<PhotoState[]>([]);
  const [works, setWorks] = useState<WorkRow[]>([]);
  const [parts, setParts] = useState<PartRow[]>([]);
  // Работавшие механики (делёж 1/N). По умолчанию — текущий механик
  // (создатель), подтягивается из /me. Можно убрать/заменить.
  const [mechanics, setMechanics] = useState<SelectedMechanic[]>([]);
  const [oilChange, setOilChange] = useState<OilChangeState>({
    enabled: false,
    mileage_at_change: null,
    mileage_is_dirty: false,
    next_in_km: 10000,
    sticker: null,
  });
@@ -109,6 +130,24 @@ export default function CreateRepairPage() {
  // Initial: подгрузить контекст машины.
  useEffect(() => {
    if (isExternal) {
      if (!externalState) {
        // Прямой заход/рефреш без данных — возвращаем к выбору машины.
        navigate("/repairs/new", { replace: true });
        return;
      }
      setCtx({
        id: 0,
        plate: externalState.plate,
        brand: externalState.make,
        model: null,
        mileage_starline: null,
        driver_id: null,
        driver_name: null,
      });
      setMileage(null);
      return;
    }
    if (!carId) return;
    getCarContext(carId)
      .then((c) => {
@@ -116,15 +155,22 @@ export default function CreateRepairPage() {
        setMileage(c.mileage_starline);
      })
      .catch((e) => setCtxError((e as Error).message || "Не удалось загрузить машину"));
  }, [carId]);
  // У24: мягкая подписка пробега блока масла на шапочный.
  useEffect(() => {
    if (oilChange.enabled && !oilChange.mileage_is_dirty) {
      setOilChange((oc) => ({ ...oc, mileage_at_change: mileage }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mileage, oilChange.enabled]);
+  }, [carId, isExternal]);
  // Дефолтный механик-создатель: подтягиваем себя из /me. Если /me упал —
  // оставляем список пустым (backend всё равно засидит создателя на create).
  useEffect(() => {
    getMe()
      .then((me) => setMechanics([{ mechanic_id: me.id, name: me.name }]))
      .catch(() => {
        /* noop — список останется пустым, backend засидит создателя */
      });
  }, []);
  // У24 упрощено: пробег ввода в форме теперь один — главный «Пробег (км)»
  // в шапке. На submit подставляется и в oil_change.mileage_at_change, чтобы
  // не заставлять механика вводить одно и то же дважды.
  // ── Photo upload ─────────────────────────────────────────────────────────
@@ -132,6 +178,7 @@ export default function CreateRepairPage() {
    if (!files || files.length === 0) return;
    for (const file of Array.from(files)) {
      const ext = (file.name.split(".").pop() || "jpg").toLowerCase();
      const previewUrl = URL.createObjectURL(file);
      const placeholder: PhotoState = {
        presign: {
          photo_uuid: uuid4(),
@@ -143,6 +190,7 @@ export default function CreateRepairPage() {
        },
        tag: "auto",
        status: "uploading",
        previewUrl,
      };
      if (target === "gallery") setPhotos((arr) => [...arr, placeholder]);
      else setOilChange((oc) => ({ ...oc, sticker: { ...placeholder, tag: "auto" } }));
@@ -150,7 +198,7 @@ export default function CreateRepairPage() {
      try {
        const presign = await presignPhoto(ext, placeholder.presign.photo_uuid);
        await uploadPhotoToTmp(file, presign);
-        const updated: PhotoState = { presign, tag: "auto", status: "uploaded" };
+        const updated: PhotoState = { presign, tag: "auto", status: "uploaded", previewUrl };
        if (target === "gallery") {
          setPhotos((arr) =>
            arr.map((p) => (p.presign.photo_uuid === presign.photo_uuid ? updated : p)),
@@ -179,7 +227,11 @@ export default function CreateRepairPage() {
  };
  const removePhoto = (photoUuid: string) =>
-    setPhotos((arr) => arr.filter((p) => p.presign.photo_uuid !== photoUuid));
+    setPhotos((arr) => {
      const target = arr.find((p) => p.presign.photo_uuid === photoUuid);
      if (target?.previewUrl) URL.revokeObjectURL(target.previewUrl);
      return arr.filter((p) => p.presign.photo_uuid !== photoUuid);
    });
  // ── Works picker ─────────────────────────────────────────────────────────
@@ -196,7 +248,7 @@ export default function CreateRepairPage() {
  };
  const addWorkFromCatalog = (w: MechWork) => {
-    const price = Number(w.price);
+    const price = Math.round(Number(w.price));
    setWorks((arr) => [
      ...arr,
      {
@@ -241,7 +293,14 @@ export default function CreateRepairPage() {
    setPartsDraft({ name: q, suggestions: [] });
    if (!q.trim()) return;
    const list = await suggestParts(q);
-    setPartsDraft({ name: q, suggestions: list.map((s) => s.name) });
+    // У43 race-fix: пока запрос для "К" летел, юзер дописал до "Кепу" — поздний
    // ответ не должен перезаписывать .name старым значением (это и есть
    // «текст частично сам стирается»). Применяем suggestions только если
    // ввод не менялся; иначе тихо роняем ответ.
    setPartsDraft((prev) => {
      if (prev.name !== q) return prev;
      return { name: q, suggestions: list.map((s) => s.name) };
    });
  };
  const addPart = (name: string) => {
@@ -256,20 +315,8 @@ export default function CreateRepairPage() {
  // ── Submit ───────────────────────────────────────────────────────────────
-  const canSubmit = () =>
+  const canSubmit = () => repairCanSubmit(photos, works);
-    photos.length > 0 &&
+  const submitWhyDisabled = (): string => repairSubmitWhyDisabled(photos, works);
    photos.every((p) => p.status === "uploaded") &&
    works.length > 0 &&
    works.every((w) => !w.unlocked || w.override_comment.trim().length > 0);
  const submitWhyDisabled = (): string => {
    if (photos.length === 0) return "Добавьте хотя бы одно фото";
    if (photos.some((p) => p.status !== "uploaded")) return "Дождитесь окончания загрузки фото";
    if (works.length === 0) return "Добавьте хотя бы одну работу";
    const unlockedNoComment = works.find((w) => w.unlocked && !w.override_comment.trim());
    if (unlockedNoComment) return "Укажите комментарий к ручной правке цены";
    return "";
  };
  const onSubmit = async () => {
    const reason = submitWhyDisabled();
@@ -287,7 +334,14 @@ export default function CreateRepairPage() {
      }));
      const result = await createRepair(
        {
-          car_id: carId,
+          ...(isExternal
            ? { external_car: { plate: externalState!.plate, make: externalState!.make } }
            : { car_id: carId }),
          // Передаём список работавших механиков; если пуст — backend засидит
          // создателя сам (см. seed_creator_mechanic).
          ...(mechanics.length > 0
            ? { mechanic_ids: mechanics.map((m) => m.mechanic_id) }
            : {}),
          mileage,
          works: works.map((w) => ({
            work_catalog_id: w.work_catalog_id,
@@ -300,7 +354,8 @@ export default function CreateRepairPage() {
          oil_change: oilChange.enabled
            ? {
                enabled: true,
-                mileage_at_change: oilChange.mileage_at_change,
+                // Один источник истины — главный пробег ремонта (см. У24).
                mileage_at_change: mileage,
                next_in_km: oilChange.next_in_km,
                sticker_photo_uuid:
                  oilChange.sticker?.status === "uploaded"
@@ -364,7 +419,11 @@ export default function CreateRepairPage() {
          <div className="font-medium">{ctx.plate}</div>
          <div className="text-muted-foreground">
            {[ctx.brand, ctx.model].filter(Boolean).join(" ")}
-            {ctx.driver_name ? ` · ${ctx.driver_name}` : ` · Без водителя`}
+            {isExternal
              ? " · С улицы"
              : ctx.driver_name
                ? ` · ${ctx.driver_name}`
                : " · Без водителя"}
          </div>
        </div>
      </header>
@@ -395,17 +454,28 @@ export default function CreateRepairPage() {
          <div className="grid grid-cols-3 gap-2 mt-2">
            {photos.map((p) => (
              <div key={p.presign.photo_uuid} className="relative aspect-square border rounded-md bg-muted overflow-hidden">
                {p.previewUrl && (
                  <img
                    src={p.previewUrl}
                    alt=""
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                )}
                {p.status === "uploading" && (
-                  <div className="absolute inset-0 flex items-center justify-center text-xs">Загрузка…</div>
+                  <div className="absolute inset-0 flex items-center justify-center text-xs bg-black/40 text-white">
                    Загрузка…
                  </div>
                )}
                {p.status === "error" && (
-                  <div className="absolute inset-0 flex items-center justify-center text-xs text-destructive p-1 text-center">
+                  <div className="absolute inset-0 flex items-center justify-center text-xs text-destructive p-1 text-center bg-background/85">
                    {p.errorMessage || "Ошибка"}
                  </div>
                )}
                {p.status === "uploaded" && (
-                  <div className="absolute inset-0 flex items-center justify-center text-xs text-muted-foreground">
+                  <div className="absolute bottom-1 right-1 rounded-full bg-green-600 text-white p-1 shadow">
-                    ✓ Загружено
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12l5 5L20 7" />
                    </svg>
                  </div>
                )}
                <button
@@ -449,11 +519,21 @@ export default function CreateRepairPage() {
                  key={w.rowKey}
                  className={`rounded-md border p-2 ${w.unlocked ? "bg-amber-50 border-amber-300" : ""}`}
                >
-                  <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium truncate">{w.name}</div>
+                      <div
-                      <div className="text-xs text-muted-foreground">
+                        className="text-sm font-medium leading-snug break-words"
-                        Прайс: {w.price_catalog} ₽
+                        style={{
                          display: '-webkit-box',
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: 'vertical',
                          overflow: 'hidden',
                        }}
                      >
                        {w.name}
                      </div>
                      <div className="text-xs text-muted-foreground mt-0.5">
                        Прайс: {fmtPrice(w.price_catalog)} ₽
                      </div>
                    </div>
                    <div className="flex items-center gap-1">
@@ -462,15 +542,19 @@ export default function CreateRepairPage() {
                        min={0}
                        value={w.price_applied}
                        disabled={!w.unlocked}
-                        onChange={(e) =>
+                        onChange={(e) => {
                          const v = e.target.value;
                          // Пустое поле остаётся пустым в стейте (не сбрасываем в 0),
                          // чтобы юзер мог сразу набрать новую цену поверх.
                          const next: number | "" = v === "" ? "" : Number(v);
                          setWorks((arr) =>
                            arr.map((row) =>
                              row.rowKey === w.rowKey
-                                ? { ...row, price_applied: Number(e.target.value) }
+                                ? { ...row, price_applied: next }
                                : row,
                            ),
-                          )
+                          );
-                        }
+                        }}
                        className="w-24"
                      />
                      <Button
@@ -505,10 +589,13 @@ export default function CreateRepairPage() {
            </ul>
          )}
          {works.length > 0 && (
-            <div className="mt-3 text-right text-sm font-medium">Итого: {totalSum} ₽</div>
+            <div className="mt-3 text-right text-sm font-medium">Итого: {fmtPrice(totalSum)} ₽</div>
          )}
        </section>
        {/* Механики (делёж 1/N) */}
        <MechanicsField value={mechanics} onChange={setMechanics} totalSum={totalSum} />
        {/* Запчасти */}
        <section>
          <Label className="text-sm">Запчасти и материалы</Label>
@@ -579,21 +666,6 @@ export default function CreateRepairPage() {
          </label>
          {oilChange.enabled && (
            <div className="mt-3 space-y-3">
              <div>
                <Label className="text-sm">Пробег на момент замены</Label>
                <Input
                  type="number"
                  min={0}
                  value={oilChange.mileage_at_change ?? ""}
                  onChange={(e) =>
                    setOilChange((oc) => ({
                      ...oc,
                      mileage_at_change: e.target.value === "" ? null : Number(e.target.value),
                      mileage_is_dirty: true,
                    }))
                  }
                />
              </div>
              <div>
                <Label className="text-sm">Следующая замена через (км)</Label>
                <Input
@@ -607,17 +679,34 @@ export default function CreateRepairPage() {
              </div>
              <div>
                <Label className="text-sm">Фото стикера (одно)</Label>
-                <label className="mt-1 block border-2 border-dashed rounded-md p-4 text-center cursor-pointer hover:bg-accent/40">
+                <label className="mt-1 block border-2 border-dashed rounded-md text-center cursor-pointer hover:bg-accent/40 overflow-hidden relative aspect-video">
-                  {oilChange.sticker == null ? (
+                  {oilChange.sticker?.previewUrl ? (
-                    <span className="text-sm text-muted-foreground">Тап чтобы загрузить</span>
+                    <img
-                  ) : oilChange.sticker.status === "uploading" ? (
+                      src={oilChange.sticker.previewUrl}
-                    "Загрузка…"
+                      alt=""
-                  ) : oilChange.sticker.status === "error" ? (
+                      className="absolute inset-0 w-full h-full object-contain bg-muted"
-                    <span className="text-sm text-destructive">
+                    />
                      Ошибка: {oilChange.sticker.errorMessage}
                    </span>
                  ) : (
-                    <span className="text-sm">✓ Загружено</span>
+                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="text-sm text-muted-foreground">Тап чтобы загрузить</span>
                    </div>
                  )}
                  {oilChange.sticker?.status === "uploading" && (
                    <div className="absolute inset-0 flex items-center justify-center text-xs bg-black/40 text-white">
                      Загрузка…
                    </div>
                  )}
                  {oilChange.sticker?.status === "error" && (
                    <div className="absolute inset-0 flex items-center justify-center text-xs text-destructive p-2 bg-background/85 text-center">
                      Ошибка: {oilChange.sticker.errorMessage}
                    </div>
                  )}
                  {oilChange.sticker?.status === "uploaded" && (
                    <div className="absolute bottom-1 right-1 rounded-full bg-green-600 text-white p-1 shadow">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5 12l5 5L20 7" />
                      </svg>
                    </div>
                  )}
                  <input
                    type="file"
@@ -633,42 +722,15 @@ export default function CreateRepairPage() {
        </section>
      </main>
-      {/* Works picker modal */}
+      {/* Works picker modal — общий компонент (см. WorksPickerModal) */}
      {worksPicker.open && (
-        <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
+        <WorksPickerModal
-          <header className="border-b p-3 flex items-center gap-2">
+          query={worksPicker.q}
-            <Button variant="ghost" size="sm" onClick={() => setWorksPicker({ open: false, q: "", results: [] })}>
+          results={worksPicker.results}
-              Отмена
+          onQuery={queryWorks}
-            </Button>
+          onPick={addWorkFromCatalog}
-            <Input
+          onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
              autoFocus
              placeholder="Поиск работы…"
              value={worksPicker.q}
              onChange={(e) => queryWorks(e.target.value)}
        />
          </header>
          <main className="flex-1 overflow-y-auto">
            <ul className="divide-y">
              {worksPicker.results.map((w) => (
                <li key={w.id}>
                  <button
                    type="button"
                    onClick={() => addWorkFromCatalog(w)}
                    className="w-full text-left p-3 hover:bg-accent/40 flex items-baseline justify-between gap-3"
                  >
                    <span className="flex-1 min-w-0 truncate">{w.name}</span>
                    <span className="text-sm text-muted-foreground">{w.price} ₽</span>
                  </button>
                </li>
              ))}
              {worksPicker.results.length === 0 && (
                <li className="p-6 text-center text-sm text-muted-foreground">
                  Нет работ по запросу
                </li>
              )}
            </ul>
          </main>
        </div>
      )}
    </div>
  );
@@ -0,0 +1,564 @@
 /**
 * Правка ремонта в 1-часовом окне (У49).
 *
 * Минимальная версия: редактируются работы (имя из каталога + цена +
 * ручная правка + комментарий), запчасти, замена масла, пробег. Фото
 * НЕ редактируются — для смены фото нужно дождаться PR-9.
 */
 import { useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { ChevronLeft, Plus, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
  getRepairDetail,
  patchRepair,
  type RepairDetailResponse,
 } from "@/api/repairsFeed";
 import { searchWorks, suggestParts, type MechWork } from "@/api/repairsCreate";
 import WorksPickerModal from "@/components/repairs/WorksPickerModal";
 import MechanicsField, { type SelectedMechanic } from "@/components/repairs/MechanicsField";
 import { hasHistoryToGoBack } from "./RepairDetailPage";
 interface WorkRow {
  rowKey: string;
  work_catalog_id: number;
  name: string;
  price_catalog: number;
  price_applied: number;
  manual_override: boolean;
  override_comment: string | null;
 }
 interface PartRow {
  rowKey: string;
  name: string;
  qty: number;
 }
 interface OilState {
  enabled: boolean;
  next_in_km: number | null;
 }
 function uid(): string {
  return Math.random().toString(36).slice(2, 10);
 }
 function fmt(n: number): string {
  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
 }
 export default function EditRepairPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  const [detail, setDetail] = useState<RepairDetailResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  // Form state.
  const [mileage, setMileage] = useState<number | null>(null);
  const [works, setWorks] = useState<WorkRow[]>([]);
  const [parts, setParts] = useState<PartRow[]>([]);
  const [oil, setOil] = useState<OilState>({ enabled: false, next_in_km: null });
  // Работавшие механики (делёж 1/N).
  const [mechanics, setMechanics] = useState<SelectedMechanic[]>([]);
  const [worksPicker, setWorksPicker] = useState<{ open: boolean; q: string; results: MechWork[] }>(
    { open: false, q: "", results: [] }
  );
  const [overrideModal, setOverrideModal] = useState<{ rowKey: string; comment: string } | null>(null);
  useEffect(() => {
    if (!id) return;
    setLoading(true);
    getRepairDetail(Number(id))
      .then((d) => {
        setDetail(d);
        setMileage(d.mileage);
        setWorks(d.works.map((w) => ({
          rowKey: uid(),
          work_catalog_id: w.work_catalog_id,
          name: w.name,
          price_catalog: w.price_applied,  // в payload мы не знаем catalog price отдельно — фронт хранит applied; PATCH перечитает из БД каталога
          price_applied: w.price_applied,
          manual_override: w.manual_override,
          override_comment: w.override_comment,
        })));
        setParts(d.parts.map((p) => ({
          rowKey: uid(), name: p.name, qty: p.qty,
        })));
        if (d.oil_change) {
          setOil({
            enabled: true,
            next_in_km: d.oil_change.next_in_km,
          });
        }
        // Механики: из списка работавших; fallback — создатель (старые ответы).
        if (d.mechanics && d.mechanics.length > 0) {
          setMechanics(d.mechanics.map((m) => ({ mechanic_id: m.mechanic_id, name: m.name })));
        } else if (d.mechanic_name) {
          // Нет id создателя в payload — оставляем имя без id-сопоставления;
          // если механик ничего не трогает, mechanic_ids не отправим.
          setMechanics([]);
        }
        if (!d.can_edit) {
          setError("Окно правки закрыто. Изменения отправить нельзя.");
        }
      })
      .catch((e: Error) => setError(e.message || "Не удалось загрузить ремонт"))
      .finally(() => setLoading(false));
  }, [id]);
  // Уход с формы — снятие её записи со стека, а не переход на карточку.
  // Раньше «Отмена» и «Сохранить» вели navigate(`/repairs/${id}`): запись
  // формы оставалась в истории, и «Назад» в карточке возвращал обратно в
  // форму правки (или в ту же карточку — нужен был второй тап).
  // Карточка при возврате монтируется заново и перечитывает ремонт, так что
  // после сохранения там свежие данные.
  const leaveForm = () => {
    if (hasHistoryToGoBack(location.key)) navigate(-1);
    // Форму открыли прямой ссылкой — шагать назад некуда, подменяем запись.
    else navigate(id ? `/repairs/${id}` : "/repairs", { replace: true });
  };
  const totalSum = useMemo(() => works.reduce((s, w) => s + (w.price_applied || 0), 0), [works]);
  // Works picker — поиск по каталогу.
  const openWorksPicker = async () => {
    setWorksPicker({ open: true, q: "", results: [] });
    const list = await searchWorks("");
    setWorksPicker((s) => ({ ...s, results: list }));
  };
  const queryWorks = async (q: string) => {
    setWorksPicker((s) => ({ ...s, q }));
    const list = await searchWorks(q);
    setWorksPicker((s) => ({ ...s, results: list }));
  };
  const pickWork = (mw: MechWork) => {
    const p = Math.round(Number(mw.price));
    setWorks((arr) => [...arr, {
      rowKey: uid(),
      work_catalog_id: mw.id,
      name: mw.name,
      price_catalog: p,
      price_applied: p,
      manual_override: false,
      override_comment: null,
    }]);
    setWorksPicker({ open: false, q: "", results: [] });
  };
  // Override-цена: открываем модалку для комментария.
  const startOverride = (rowKey: string) => {
    const cur = works.find((w) => w.rowKey === rowKey);
    setOverrideModal({ rowKey, comment: cur?.override_comment ?? "" });
  };
  const confirmOverride = (newPrice: number) => {
    if (!overrideModal) return;
    setWorks((arr) => arr.map((w) =>
      w.rowKey === overrideModal.rowKey
        ? { ...w, price_applied: newPrice, manual_override: true, override_comment: overrideModal.comment }
        : w
    ));
    setOverrideModal(null);
  };
  const submit = async () => {
    if (!detail) return;
    setError(null);
    // Валидация: каждый manual_override → комментарий.
    for (const w of works) {
      if (w.manual_override && !(w.override_comment || "").trim()) {
        setError(`У работы «${w.name}» включена ручная правка цены, но не указан комментарий`);
        return;
      }
    }
    if (works.length === 0) {
      setError("Минимум одна работа в ремонте");
      return;
    }
    // Механики были загружены, но пользователь убрал всех — backend отклонит
    // пустой список, перехватываем заранее с понятным текстом.
    if ((detail.mechanics?.length ?? 0) > 0 && mechanics.length === 0) {
      setError("Минимум один механик в ремонте");
      return;
    }
    setSaving(true);
    try {
      await patchRepair(detail.id, {
        mileage,
        works: works.map((w) => ({
          work_catalog_id: w.work_catalog_id,
          price_applied: Math.round(w.price_applied),
          manual_override: w.manual_override,
          override_comment: w.manual_override ? (w.override_comment ?? "").trim() : null,
        })),
        parts: parts.filter((p) => p.name.trim().length > 0).map((p) => ({
          name: p.name.trim(),
          qty: p.qty,
        })),
        oil_change: oil.enabled
          // Один источник истины — главный пробег ремонта.
          ? { enabled: true, mileage_at_change: mileage, next_in_km: oil.next_in_km }
          : { enabled: false, mileage_at_change: null, next_in_km: null },
        // Список механиков отправляем, только если он непуст (иначе бэк
        // оставит набор как есть; пустой бы вызвал ValueError).
        ...(mechanics.length > 0
          ? { mechanic_ids: mechanics.map((m) => m.mechanic_id) }
          : {}),
      });
      leaveForm();
    } catch (e) {
      setError((e as Error).message || "Не удалось сохранить");
      setSaving(false);
    }
  };
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">
        <div className="flex items-center gap-3 p-3">
          <button
            onClick={leaveForm}
            className="rounded-full p-2 hover:bg-accent"
            aria-label="Назад"
          >
            <ChevronLeft className="h-5 w-5" />
          </button>
          <h1 className="flex-1 text-base font-semibold truncate">
            Правка ремонта {detail ? `#${detail.id}` : ""}
          </h1>
        </div>
      </header>
      <main className="p-4 space-y-5 pb-32">
        {loading && (
          <div className="text-sm text-muted-foreground text-center py-12">
            Загрузка…
          </div>
        )}
        {error && (
          <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
            {error}
          </div>
        )}
        {detail && (
          <>
            {/* Шапка машины — read-only */}
            <section className="rounded-lg border bg-muted/40 p-4">
              <div className="text-lg font-bold font-mono">{detail.car_plate ?? "—"}</div>
              {(detail.car_make || detail.car_model) && (
                <div className="text-sm text-muted-foreground">{detail.car_make} {detail.car_model}</div>
              )}
              {detail.driver_name && (
                <div className="text-sm mt-1">
                  <span className="text-muted-foreground">Водитель: </span>
                  {detail.driver_name}
                </div>
              )}
            </section>
            {/* Пробег */}
            <section>
              <Label className="text-sm">Пробег, км</Label>
              <Input
                type="number"
                inputMode="numeric"
                value={mileage ?? ""}
                onChange={(e) => setMileage(e.target.value === "" ? null : Number(e.target.value))}
                className="mt-1"
              />
            </section>
            {/* Работы */}
            <section>
              <div className="flex items-baseline justify-between">
                <Label className="text-sm">Работы</Label>
                <span className="text-xs text-muted-foreground">
                  {works.length} {works.length === 1 ? "шт" : "шт"}
                </span>
              </div>
              <div className="mt-2 space-y-2">
                {works.map((w) => (
                  <div key={w.rowKey} className="border rounded-md p-3 bg-card">
                    <div className="flex items-start gap-2">
                      <div className="flex-1 min-w-0">
                        <div className="text-sm font-medium">{w.name}</div>
                        <div className="flex items-baseline gap-2 mt-1">
                          <span className="text-sm font-mono">
                            {fmt(w.price_applied)} ₽
                          </span>
                          {w.manual_override && (
                            <span className="text-xs text-amber-700">
                              ✎ ручная правка
                            </span>
                          )}
                          {w.manual_override && w.price_applied !== w.price_catalog && (
                            <span className="text-xs text-muted-foreground line-through">
                              {fmt(w.price_catalog)}
                            </span>
                          )}
                        </div>
                        {w.manual_override && w.override_comment && (
                          <div className="text-xs text-muted-foreground mt-1">
                            {w.override_comment}
                          </div>
                        )}
                      </div>
                      <button
                        onClick={() => startOverride(w.rowKey)}
                        className="rounded-full p-2 hover:bg-accent text-amber-700"
                        title="Изменить цену"
                      >
                        ✎
                      </button>
                      <button
                        onClick={() => setWorks((arr) => arr.filter((x) => x.rowKey !== w.rowKey))}
                        className="rounded-full p-2 hover:bg-accent text-destructive"
                        title="Удалить"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                ))}
                <button
                  onClick={openWorksPicker}
                  className="w-full border-2 border-dashed rounded-md py-2.5 text-sm hover:bg-accent/40 flex items-center justify-center gap-1.5"
                >
                  <Plus className="h-4 w-4" /> Добавить работу
                </button>
                <div className="flex items-baseline justify-between pt-2 border-t mt-2">
                  <span className="text-sm font-semibold">Итого</span>
                  <span className="text-base font-mono font-bold">{fmt(totalSum)} ₽</span>
                </div>
              </div>
            </section>
            {/* Механики (делёж 1/N) */}
            <MechanicsField value={mechanics} onChange={setMechanics} totalSum={totalSum} />
            {/* Запчасти */}
            <section>
              <div className="flex items-baseline justify-between">
                <Label className="text-sm">Запчасти (опционально)</Label>
                <span className="text-xs text-muted-foreground">{parts.length} шт</span>
              </div>
              <div className="mt-2 space-y-2">
                {parts.map((p) => (
                  <PartEditRow
                    key={p.rowKey}
                    name={p.name}
                    qty={p.qty}
                    onChange={(name, qty) =>
                      setParts((arr) => arr.map((x) => x.rowKey === p.rowKey ? { ...x, name, qty } : x))
                    }
                    onRemove={() => setParts((arr) => arr.filter((x) => x.rowKey !== p.rowKey))}
                  />
                ))}
                <button
                  onClick={() => setParts((arr) => [...arr, { rowKey: uid(), name: "", qty: 1 }])}
                  className="w-full border-2 border-dashed rounded-md py-2.5 text-sm hover:bg-accent/40 flex items-center justify-center gap-1.5"
                >
                  <Plus className="h-4 w-4" /> Добавить запчасть
                </button>
              </div>
            </section>
            {/* Замена масла */}
            <section className="border rounded-md p-3">
              <label className="flex items-center gap-2 text-sm font-medium">
                <input
                  type="checkbox"
                  checked={oil.enabled}
                  onChange={(e) => setOil((o) => ({ ...o, enabled: e.target.checked }))}
                />
                Замена масла
              </label>
              {oil.enabled && (
                <div className="mt-3">
                  <Label className="text-xs">Через, км</Label>
                  <Input
                    type="number"
                    inputMode="numeric"
                    value={oil.next_in_km ?? 10000}
                    onChange={(e) => setOil((o) => ({
                      ...o, next_in_km: e.target.value === "" ? null : Number(e.target.value),
                    }))}
                  />
                </div>
              )}
            </section>
            <div className="text-xs text-muted-foreground">
              Фото и стикер замены масла редактировать пока нельзя — для смены
              нужно создать новый ремонт.
            </div>
          </>
        )}
      </main>
      {/* Sticky footer */}
      {detail && (
        <footer className="fixed bottom-0 left-0 right-0 border-t bg-background p-3 flex gap-2 z-10">
          <Button variant="outline" onClick={leaveForm} disabled={saving} className="flex-1">
            Отмена
          </Button>
          <Button onClick={submit} disabled={saving || !detail.can_edit} className="flex-1">
            {saving ? "Сохранение…" : "Сохранить"}
          </Button>
        </footer>
      )}
      {/* Works picker modal — общий компонент (см. WorksPickerModal) */}
      {worksPicker.open && (
        <WorksPickerModal
          query={worksPicker.q}
          results={worksPicker.results}
          onQuery={queryWorks}
          onPick={pickWork}
          onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
        />
      )}
      {/* Override modal */}
      {overrideModal && (() => {
        const cur = works.find((w) => w.rowKey === overrideModal.rowKey);
        if (!cur) return null;
        return (
          <OverridePriceModal
            workName={cur.name}
            catalogPrice={cur.price_catalog}
            appliedPrice={cur.price_applied}
            initialComment={overrideModal.comment}
            onCancel={() => setOverrideModal(null)}
            onSubmit={(newPrice, comment) => {
              setOverrideModal((m) => m ? { ...m, comment } : m);
              confirmOverride(newPrice);
            }}
          />
        );
      })()}
    </div>
  );
 }
 function PartEditRow({ name, qty, onChange, onRemove }: {
  name: string;
  qty: number;
  onChange: (name: string, qty: number) => void;
  onRemove: () => void;
 }) {
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const [showSugg, setShowSugg] = useState(false);
  const fetchSuggestions = async (q: string) => {
    if (!q.trim()) { setSuggestions([]); return; }
    try {
      const r = await suggestParts(q);
      setSuggestions(r.map((x) => x.name));
    } catch { /* noop */ }
  };
  return (
    <div className="flex gap-2 items-start">
      <div className="flex-1 relative">
        <Input
          placeholder="Название запчасти"
          value={name}
          onChange={(e) => { onChange(e.target.value, qty); fetchSuggestions(e.target.value); setShowSugg(true); }}
          onFocus={() => name && fetchSuggestions(name)}
          onBlur={() => setTimeout(() => setShowSugg(false), 150)}
        />
        {showSugg && suggestions.length > 0 && (
          <div className="absolute top-full left-0 right-0 z-10 mt-1 bg-popover border rounded-md shadow-md max-h-48 overflow-auto">
            {suggestions.map((s) => (
              <button
                key={s}
                onClick={() => { onChange(s, qty); setShowSugg(false); }}
                className="w-full text-left px-3 py-2 text-sm hover:bg-accent"
              >
                {s}
              </button>
            ))}
          </div>
        )}
      </div>
      <Input
        type="number"
        inputMode="numeric"
        min={1}
        value={qty}
        onChange={(e) => onChange(name, Math.max(1, Number(e.target.value) || 1))}
        className="w-20"
      />
      <button onClick={onRemove} className="rounded-full p-2 hover:bg-accent text-destructive">
        <Trash2 className="h-4 w-4" />
      </button>
    </div>
  );
 }
 function OverridePriceModal({ workName, catalogPrice, appliedPrice, initialComment, onCancel, onSubmit }: {
  workName: string;
  catalogPrice: number;
  appliedPrice: number;
  initialComment: string;
  onCancel: () => void;
  onSubmit: (newPrice: number, comment: string) => void;
 }) {
  const [price, setPrice] = useState(String(Math.round(appliedPrice)));
  const [comment, setComment] = useState(initialComment);
  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-end justify-center" onClick={onCancel}>
      <div className="bg-background w-full max-w-md rounded-t-xl p-4 space-y-3" onClick={(e) => e.stopPropagation()}>
        <h3 className="text-base font-semibold">Изменить цену</h3>
        <div className="text-sm">
          <div className="font-medium">{workName}</div>
          <div className="text-xs text-muted-foreground mt-0.5">
            По каталогу: <span className="font-mono">{fmt(catalogPrice)} ₽</span>
          </div>
        </div>
        <div>
          <Label className="text-xs">Применённая цена, ₽</Label>
          <Input
            type="number"
            inputMode="numeric"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
            autoFocus
          />
        </div>
        <div>
          <Label className="text-xs">Причина (обязательно)</Label>
          <textarea
            className="w-full mt-1 border rounded-md px-3 py-2 text-sm"
            rows={2}
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            placeholder="Например: договорились с клиентом"
          />
        </div>
        <div className="flex gap-2 pt-2">
          <Button variant="outline" onClick={onCancel} className="flex-1">Отмена</Button>
          <Button
            disabled={!comment.trim() || !price}
            onClick={() => onSubmit(Number(price), comment.trim())}
            className="flex-1"
          >
            Применить
          </Button>
        </div>
      </div>
    </div>
  );
 }
@@ -0,0 +1,367 @@
 /**
 * Карточка ремонта (PWA): read-only просмотр после клика по строке ленты.
 *
 * Минимальная версия для возможности «открыть и посмотреть». Полноценный
 * вариант с lightbox, копированием госномера, обратным счётчиком и
 * редактированием в 24h-окне — в PR-9 по плану.
 *
 * Endpoint: GET /api/v1/mechanic/repairs/{id}
 */
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { ChevronLeft, Pencil } from "lucide-react";
 import { getRepairDetail, type RepairDetailResponse } from "@/api/repairsFeed";
 /**
 * Есть ли внутри приложения куда шагнуть назад. `idx` — номер записи, который
 * router держит в history.state: 0 значит, что экран открыли прямой ссылкой
 * (standalone-PWA стартует с пустым стеком) и navigate(-1) увёл бы наружу.
 * Под MemoryRouter (тесты) idx нет — там стартовую запись видно по ключу.
 *
 * Экспортируется: тем же вопросом задаётся форма правки перед уходом с неё.
 * Две копии проверки разъедутся при первой же правке.
 */
 export function hasHistoryToGoBack(locationKey: string): boolean {
  const idx = (window.history.state as { idx?: number } | null)?.idx;
  return typeof idx === "number" ? idx > 0 : locationKey !== "default";
 }
 /**
 * Бэкенд отдаёт в карточке `car_id` (null у ремонта «с улицы») — на нём держится
 * фолбэк возврата в историю машины. В общем типе ответа поля пока нет, а
 * api/repairsFeed.ts правится соседней задачей; объявляем локально, чтобы не
 * писать в чужой файл. Появится `car_id` в RepairDetailResponse — алиас убрать.
 */
 type RepairDetail = RepairDetailResponse & { car_id?: number | null };
 function fmt(n: number): string {
  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
 }
 function fmtDateTime(iso: string): string {
  const d = new Date(iso);
  return new Intl.DateTimeFormat("ru-RU", {
    day: "2-digit", month: "long", year: "numeric",
    hour: "2-digit", minute: "2-digit",
  }).format(d);
 }
 export default function RepairDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  const [data, setData] = useState<RepairDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [now, setNow] = useState(() => Date.now());
  // Тикер для обратного счётчика «Осталось X мин». Раз в 30 секунд хватит —
  // окно правки 1 час, точность до минуты допустима.
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 30_000);
    return () => clearInterval(t);
  }, []);
  const editRemaining = useMemo(() => {
    if (!data?.can_edit || !data.edit_until) return null;
    const until = new Date(data.edit_until).getTime();
    const ms = until - now;
    if (ms <= 0) return null;
    const minutes = Math.floor(ms / 60_000);
    if (minutes < 1) return "меньше минуты";
    if (minutes < 60) return `${minutes} мин`;
    const h = Math.floor(minutes / 60);
    const m = minutes - h * 60;
    return `${h} ч ${m} мин`;
  }, [data, now]);
  useEffect(() => {
    if (!id) return;
    setLoading(true);
    getRepairDetail(Number(id))
      .then((r) => { setData(r); setError(null); })
      .catch((e: Error) => setError(e.message || "Не удалось загрузить ремонт"))
      .finally(() => setLoading(false));
  }, [id]);
  // Карточку открывают из трёх мест: лента парка, история машины, карточка
  // авто — и каждое кладёт свой путь в `state.from` при переходе сюда (тем же
  // способом CarSelectPage передаёт данные в CreateRepairPage). Жёсткий
  // /repairs выбрасывал из истории машины в общую ленту: при разборе «что
  // делали за год» механик заново искал госномер на каждый ремонт.
  const fromState = location.state as { from?: string } | null;
  // Только внутренний путь: чужой state не должен уводить из приложения.
  // `//host` браузер считает ссылкой на другой сайт — такой «путь» отвергаем.
  const backTo =
    typeof fromState?.from === "string" &&
    fromState.from.startsWith("/") &&
    !fromState.from.startsWith("//")
      ? fromState.from
      : null;
  // Порядок: явный `from`; иначе шаг назад по стеку; иначе (прямая ссылка,
  // стека нет) — история этой машины: «что с ней делали» ближе к тому, зачем
  // открывали карточку, чем лента всего парка. У ремонта «с улицы» машины
  // парка нет — там остаётся лента. Возврат не наращивает стек, поэтому
  // переходы по адресу идут через replace.
  const goBack = () => {
    if (backTo) navigate(backTo, { replace: true });
    else if (hasHistoryToGoBack(location.key)) navigate(-1);
    else if (data?.car_id != null) navigate(`/repairs/history/${data.car_id}`, { replace: true });
    else navigate("/repairs", { replace: true });
  };
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">
        <div className="flex items-center gap-3 p-3">
          <button
            onClick={goBack}
            className="rounded-full p-2 hover:bg-accent"
            aria-label="Назад"
          >
            <ChevronLeft className="h-5 w-5" />
          </button>
          <div className="flex-1 min-w-0">
            <h1 className="text-base font-semibold truncate">
              {data ? `Ремонт #${data.id}` : "Ремонт"}
            </h1>
            {data && (
              <div className="text-xs text-muted-foreground truncate">
                {fmtDateTime(data.created_at)}
              </div>
            )}
          </div>
        </div>
      </header>
      <main className="p-4 space-y-5 pb-12">
        {loading && (
          <div className="text-sm text-muted-foreground text-center py-12">
            Загрузка…
          </div>
        )}
        {error && (
          <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
            {error}
          </div>
        )}
        {data && (
          <>
            {/* Кнопка правки в 1-часовом окне (У49). */}
            {data.can_edit && editRemaining && (
              <button
                onClick={() => navigate(`/repairs/${data.id}/edit`)}
                className="w-full flex items-center justify-between gap-2 rounded-lg border-2 border-amber-300 bg-amber-50 px-4 py-3 hover:bg-amber-100 transition-colors"
              >
                <span className="flex items-center gap-2 text-sm font-semibold text-amber-900">
                  <Pencil className="h-4 w-4" />
                  Изменить ремонт
                </span>
                <span className="text-xs font-mono text-amber-800">
                  осталось {editRemaining}
                </span>
              </button>
            )}
            {/* Шапка: машина + водитель + механик */}
            <section className="rounded-lg border bg-card p-4 space-y-2">
              <div className="text-xl font-bold font-mono">
                {data.car_plate || "—"}
              </div>
              {(data.car_make || data.car_model) && (
                <div className="text-sm text-muted-foreground">
                  {data.car_make} {data.car_model}
                </div>
              )}
              <div className="pt-2 border-t text-sm space-y-1">
                {data.driver_name && (
                  <div>
                    <span className="text-muted-foreground">Водитель: </span>
                    {data.driver_name}
                  </div>
                )}
                {data.mechanics && data.mechanics.length > 0 ? (
                  <div>
                    <span className="text-muted-foreground">
                      {data.mechanics.length > 1 ? "Механики: " : "Механик: "}
                    </span>
                    <span className="inline-flex flex-wrap gap-1.5 align-top">
                      {data.mechanics.map((m) => (
                        <span
                          key={m.id}
                          className="inline-flex items-center rounded-full border bg-muted/50 px-2.5 py-0.5 text-xs"
                        >
                          {m.name}
                        </span>
                      ))}
                    </span>
                    {data.mechanics.length > 1 && (
                      <div className="text-xs text-muted-foreground mt-1">
                        Делёж поровну: {fmt(data.total_sum / data.mechanics.length)} ₽ на каждого
                      </div>
                    )}
                  </div>
                ) : (
                  <div>
                    <span className="text-muted-foreground">Механик: </span>
                    {data.mechanic_name || "—"}
                  </div>
                )}
                {data.mileage != null && (
                  <div>
                    <span className="text-muted-foreground">Пробег: </span>
                    <span className="font-mono">{fmt(data.mileage)} км</span>
                  </div>
                )}
              </div>
            </section>
            {/* Фото */}
            {data.photos.length > 0 && (
              <section>
                <div className="text-sm font-semibold mb-2">
                  Фото · {data.photos.length}
                </div>
                <div className="grid grid-cols-3 gap-2">
                  {data.photos.map((p) => (
                    <a
                      key={p.photo_uuid}
                      href={p.orig_url ?? "#"}
                      target="_blank"
                      rel="noreferrer"
                      className="block aspect-square overflow-hidden rounded-md border bg-muted"
                    >
                      {p.thumb_url && (
                        <img
                          src={p.thumb_url}
                          alt=""
                          loading="lazy"
                          className="w-full h-full object-cover"
                        />
                      )}
                    </a>
                  ))}
                </div>
              </section>
            )}
            {/* Работы */}
            <section className="rounded-lg border bg-card overflow-hidden">
              <div className="px-4 py-3 border-b bg-muted/40">
                <div className="text-sm font-semibold">
                  Работы · {data.works.length}
                </div>
              </div>
              <div className="divide-y">
                {data.works.map((w, i) => (
                  <div key={i} className="px-4 py-3 flex items-start justify-between gap-3">
                    <div className="text-sm flex-1 min-w-0">
                      <div>
                        {w.name}
                        {w.manual_override && (
                          <span title="Цена изменена вручную" className="ml-2 text-amber-700">
                            ✎
                          </span>
                        )}
                      </div>
                      {w.manual_override && w.override_comment && (
                        <div className="mt-1 text-xs text-amber-800 bg-amber-50 border-l-2 border-amber-300 pl-2 py-0.5 leading-snug">
                          {w.override_comment}
                        </div>
                      )}
                    </div>
                    <div className="text-sm font-mono whitespace-nowrap text-muted-foreground shrink-0 mt-0.5">
                      {fmt(w.price_applied)} ₽
                    </div>
                  </div>
                ))}
                <div className="px-4 py-3 flex items-baseline justify-between bg-muted/30">
                  <div className="text-sm font-semibold">Итого</div>
                  <div className="text-base font-mono font-bold">
                    {fmt(data.total_sum)} ₽
                  </div>
                </div>
              </div>
            </section>
            {/* Запчасти */}
            {data.parts.length > 0 && (
              <section className="rounded-lg border bg-card overflow-hidden">
                <div className="px-4 py-3 border-b bg-muted/40">
                  <div className="text-sm font-semibold">
                    Запчасти · {data.parts.length}
                  </div>
                </div>
                <div className="divide-y">
                  {data.parts.map((p, i) => (
                    <div key={i} className="px-4 py-3 flex items-baseline justify-between gap-3">
                      <div className="text-sm">{p.name}</div>
                      <div className="text-sm font-mono whitespace-nowrap text-muted-foreground">
                        {p.qty} шт
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}
            {/* Замена масла */}
            {data.oil_change && (
              <section className="rounded-lg border bg-card overflow-hidden">
                <div className="px-4 py-3 border-b bg-muted/40">
                  <div className="text-sm font-semibold">Замена масла</div>
                </div>
                <div className="p-4">
                  <div className="flex gap-3 items-start">
                    {data.oil_change.sticker_thumb_url && (
                      <a
                        href={data.oil_change.sticker_orig_url ?? "#"}
                        target="_blank"
                        rel="noreferrer"
                        className="flex-shrink-0"
                      >
                        <img
                          src={data.oil_change.sticker_thumb_url}
                          alt="Стикер замены масла"
                          loading="lazy"
                          className="w-24 h-24 object-cover rounded-md border bg-muted"
                        />
                      </a>
                    )}
                    <div className="flex-1 text-sm space-y-1">
                      {data.oil_change.mileage_at_change != null && (
                        <div>
                          <span className="text-muted-foreground">Пробег при замене: </span>
                          <span className="font-mono">{fmt(data.oil_change.mileage_at_change)} км</span>
                        </div>
                      )}
                      {data.oil_change.next_in_km != null && (
                        <div>
                          <span className="text-muted-foreground">Следующая через: </span>
                          <span className="font-mono">{fmt(data.oil_change.next_in_km)} км</span>
                        </div>
                      )}
                      {data.oil_change.has_sticker && !data.oil_change.sticker_thumb_url && (
                        <div className="text-xs text-muted-foreground pt-1">
                          ✓ фото стикера загружено
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </section>
            )}
            {data.edited_in_crm && (
              <div className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-3">
                Этот ремонт был отредактирован в CRM. Кнопка «Редактировать»
                в PWA для него недоступна.
              </div>
            )}
          </>
        )}
      </main>
    </div>
  );
 }
@@ -0,0 +1,460 @@
 /**
 * «История ремонта» (запрос механиков, задача 4439).
 *
 * Один компонент на два роута:
 *   /repairs/history          — поиск машины по госномеру;
 *   /repairs/history/:carId   — история ремонтов конкретной машины.
 *
 * Лента берётся тем же эндпоинтом, что и общая (`GET repairs`), только с
 * фильтром `car_id`, поэтому курсорная пагинация и порядок `created_at DESC`
 * работают как на главном экране раздела.
 */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { HTTPError } from "ky";
 import { ChevronLeft, ChevronRight, Search, Wrench } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { getCarContext, searchCars, type CarBrief } from "@/api/repairsCreate";
 import { getRepairsFeed, type FeedItem, type FeedResponse } from "@/api/repairsFeed";
 import { FEED_PAGE_SIZE } from "@/hooks/useRepairsFeed";
 import { fmtMoney, pluralWorks, toLocalDateKey } from "@/lib/repairsFeed";
 import { cn } from "@/lib/utils";
 /** ДД.ММ.ГГГГ. Через toLocalDateKey — чтобы день совпадал с группировкой ленты (VLA). */
 function fmtDate(iso: string): string {
  const [y, m, d] = toLocalDateKey(iso).split("-");
  return `${d}.${m}.${y}`;
 }
 export default function RepairHistoryPage() {
  const { carId } = useParams<{ carId?: string }>();
  const id = carId ? Number(carId) : NaN;
  return Number.isFinite(id) && id > 0 ? <CarHistory carId={id} /> : <PlateSearch />;
 }
 // ── Поиск машины по госномеру ──────────────────────────────────────────────
 // Debounce 200 мс и тот же searchCars, что в CarSelectPage (релевантность по
 // номеру считает backend). Отличий два: ищем и по машинам, выведенным из парка
 // (Activity из 1С снялась, а ремонты никуда не делись — в осмотрах такая машина
 // видна, и в истории должна быть), но БЕЗ проданных — парк ими не занимается;
 // и не ходим в сеть, пока номер короче двух символов — на одном символе выдача
 // = почти весь парк, а тянуть его целиком незачем.
 const MIN_QUERY_LEN = 2;
 // Набранный номер переживает уход в историю машины и возврат назад: механик
 // сравнивает две похожие машины и не должен набирать номер заново на каждое
 // сравнение. Живёт в памяти вкладки — после перезапуска приложения поиск
 // открывается чистым.
 let lastQuery = "";
 function PlateSearch() {
  const navigate = useNavigate();
  const [q, setQ] = useState(lastQuery);
  const [cars, setCars] = useState<CarBrief[]>([]);
  const [loading, setLoading] = useState(false);
  // Ошибка — флаг, а не текст: сообщение ky английское и про HTTP, механику
  // оно ничего не объясняет.
  const [failed, setFailed] = useState(false);
  const [retryTick, setRetryTick] = useState(0);
  const query = q.trim();
  const tooShort = query.length < MIN_QUERY_LEN;
  const onQueryChange = (value: string) => {
    lastQuery = value;
    setQ(value);
  };
  useEffect(() => {
    if (tooShort) {
      setCars([]);
      setLoading(false);
      setFailed(false);
      return;
    }
    let cancelled = false;
    setLoading(true);
    setFailed(false);
    const t = setTimeout(async () => {
      try {
        const list = await searchCars(query, { includeInactive: true });
        if (!cancelled) setCars(list);
      } catch {
        // Выдачу прошлого запроса гасим: иначе под сообщением об ошибке
        // остаются кликабельные машины, и тап уводит в историю не той машины.
        if (!cancelled) {
          setCars([]);
          setFailed(true);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }, 200); // debounce
    return () => {
      cancelled = true;
      clearTimeout(t);
    };
  }, [query, tooShort, retryTick]);
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
        <div className="flex items-center gap-2 p-3">
          <Button variant="ghost" size="sm" onClick={() => navigate("/")} className="-ml-2" aria-label="Назад">
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-base font-semibold">История ремонта</h1>
        </div>
        <div className="px-3 pb-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
            <Input
              autoFocus
              placeholder="Госномер…"
              value={q}
              onChange={(e) => onQueryChange(e.target.value)}
              className="h-12 pl-10 text-base"
            />
          </div>
        </div>
      </header>
      {/* Ветки взаимоисключающие: «сеть отвалилась» и «такой машины нет» —
          разные ответы, и рисовать их вместе нельзя. */}
      <main className="flex-1 container max-w-2xl py-3">
        {tooShort ? (
          <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-3">
            <div className="rounded-full bg-muted p-4">
              <Search className="h-8 w-8 text-muted-foreground" />
            </div>
            <h2 className="text-base font-semibold">Найдите машину по госномеру</h2>
            <p className="text-sm text-muted-foreground max-w-xs">
              Введите хотя бы два символа — например, 123 или В45.
            </p>
          </div>
        ) : loading ? (
          <div className="space-y-2">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="h-14 rounded-lg bg-muted animate-pulse" />
            ))}
          </div>
        ) : failed ? (
          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm space-y-3">
            <p>
              Не удалось выполнить поиск — похоже, нет связи. Это сбой сети, а не
              «машины нет»: попробуйте ещё раз.
            </p>
            <Button variant="outline" size="sm" onClick={() => setRetryTick((n) => n + 1)}>
              Повторить
            </Button>
          </div>
        ) : cars.length === 0 ? (
          <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-3">
            <div className="rounded-full bg-muted p-4">
              <Search className="h-8 w-8 text-muted-foreground" />
            </div>
            <h2 className="text-base font-semibold">Ничего не нашли по такому номеру</h2>
            {/* Текст обязан совпадать с фильтром бэкенда: выведенные из парка
                ищутся, проданные — нет. Иначе механик с опечаткой в номере
                сделает неверный вывод о том, есть ли история вообще. */}
            <p className="text-sm text-muted-foreground max-w-xs">
              Проверьте номер — проданные машины в истории не ищутся.
            </p>
          </div>
        ) : (
          <ul className="space-y-2">
            {cars.map((c) => (
              <li key={c.id}>
                <button
                  type="button"
                  onClick={() => navigate(`/repairs/history/${c.id}`)}
                  className="w-full flex items-center gap-3 rounded-lg border bg-card hover:bg-accent/40 active:bg-accent/60 transition-colors p-4 text-left"
                >
                  <div className="flex-1 min-w-0">
                    <div className="text-base font-semibold font-mono">{c.plate}</div>
                    <div className="text-sm text-muted-foreground truncate">
                      {[c.brand, c.model].filter(Boolean).join(" ")}
                    </div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </main>
    </div>
  );
 }
 // ── История ремонтов машины ────────────────────────────────────────────────
 function CarHistory({ carId }: { carId: number }) {
  const navigate = useNavigate();
  const location = useLocation();
  // Экран открывают и по прямой ссылке: из карточки авто, а в standalone-PWA
  // приложение может и перезапуститься прямо на нём. Тогда идти назад некуда
  // (key === "default" — первая запись в стеке), и navigate(-1) молча ничего
  // не делает — механик заперт. В этом случае уводим на поиск по номеру.
  const goBack = () => {
    if (location.key === "default") navigate("/repairs/history", { replace: true });
    else navigate(-1);
  };
  // Карточка авто нужна ради заголовка: если ремонтов ноль, взять госномер
  // из ленты неоткуда.
  const carQuery = useQuery({
    queryKey: ["car-context", carId],
    queryFn: () => getCarContext(carId),
    staleTime: 5 * 60_000,
  });
  const feed = useInfiniteQuery<FeedResponse>({
    queryKey: ["repairs-feed", "car", carId],
    queryFn: ({ pageParam }) =>
      getRepairsFeed({
        limit: FEED_PAGE_SIZE,
        cursor: (pageParam as string | null) ?? null,
        car_id: carId,
        // Превью в строках истории нет — не заставляем backend ходить в
        // хранилище за ссылками на фото.
        with_photos: false,
      }),
    initialPageParam: null as string | null,
    getNextPageParam: (last) => last.next_cursor ?? undefined,
    staleTime: 30_000,
    refetchOnWindowFocus: false, // свой visibilitychange ниже — как в useRepairsFeed
  });
  const items: FeedItem[] = feed.data?.pages.flatMap((p) => p.items) ?? [];
  const { hasNextPage, isFetchingNextPage, fetchNextPage, refetch: refetchFeed } = feed;
  const { refetch: refetchCar } = carQuery;
  // Обновление руками и по возврату в приложение — как в ленте парка
  // (RepairsFeedPage + useRepairsFeed): свой visibilitychange вместо
  // refetchOnWindowFocus. Заголовок перезапрашиваем вместе с лентой — после
  // сбоя сети госномера на экране нет.
  const handleRefresh = useCallback(() => {
    void refetchFeed();
    void refetchCar();
  }, [refetchFeed, refetchCar]);
  useEffect(() => {
    const onVisible = () => {
      if (document.visibilityState === "visible") handleRefresh();
    };
    document.addEventListener("visibilitychange", onVisible);
    return () => document.removeEventListener("visibilitychange", onVisible);
  }, [handleRefresh]);
  // Ретраи ky лежат поверх ретраев react-query, поэтому до ошибки экран может
  // молчать минутами. Через 10 секунд говорим, что всё ещё грузим.
  const [slow, setSlow] = useState(false);
  const feedLoading = feed.isLoading;
  useEffect(() => {
    if (!feedLoading) return;
    const t = setTimeout(() => setSlow(true), 10_000);
    // Сброс — в уборке: загрузка кончилась, признак «долго» больше не наш.
    return () => {
      clearTimeout(t);
      setSlow(false);
    };
  }, [feedLoading]);
  // Догрузка страниц — как в ленте парка (IntersectionObserver, запас 200px).
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    const el = sentinelRef.current;
    if (!el || !hasNextPage) return;
    const io = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting && !isFetchingNextPage) {
          void fetchNextPage();
        }
      },
      { rootMargin: "200px" },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
  const car = carQuery.data;
  const first = items[0];
  // Ссылку на историю открывают из карточки авто и присылают в чат — carId
  // бывает битым. Госномер тогда взять неоткуда: слово «Машина» стояло на его
  // месте и читалось как номер («все ремонты Машина»).
  const plate = car?.plate ?? first?.car_plate ?? null;
  const carGone = carQuery.error instanceof HTTPError && carQuery.error.response.status === 404;
  const model = car
    ? [car.brand, car.model].filter(Boolean).join(" ")
    : [first?.car_make, first?.car_model].filter(Boolean).join(" ");
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
        <div className="flex items-center gap-2 p-3">
          <Button variant="ghost" size="sm" onClick={goBack} className="-ml-2" aria-label="Назад">
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <div className="flex-1 min-w-0">
            {/* Моноширинный — только для настоящего госномера. */}
            <h1 className={cn("text-base font-semibold truncate", plate && "font-mono")}>
              {plate ?? (carGone ? "Машина не найдена" : "История ремонта")}
            </h1>
            {plate && (
              <div className="text-xs text-muted-foreground truncate">
                История ремонта{model ? ` · ${model}` : ""}
              </div>
            )}
          </div>
        </div>
      </header>
      <main className="flex-1 container max-w-2xl py-3 space-y-2">
        {/* Обновить — как в ленте парка: экран держат открытым, а ремонт мог
            записать другой механик. */}
        <div className="flex items-center justify-end">
          <button
            type="button"
            onClick={handleRefresh}
            disabled={feed.isFetching}
            className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
          >
            {feed.isFetching ? "Обновляем…" : "Обновить"}
          </button>
        </div>
        {feed.isLoading && (
          <div className="space-y-2">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="h-28 rounded-lg bg-muted animate-pulse" />
            ))}
            {slow && (
              <p className="text-center text-xs text-muted-foreground py-2">
                Сеть отвечает медленно — история ещё грузится.
              </p>
            )}
          </div>
        )}
        {feed.isError && !feed.isLoading && (
          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm space-y-3">
            <p>Не удалось загрузить историю ремонтов — похоже, нет связи.</p>
            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={feed.isFetching}>
              {feed.isFetching ? "Обновляем…" : "Повторить"}
            </Button>
          </div>
        )}
        {carGone && !feed.isLoading && !feed.isError && items.length === 0 && (
          <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-3">
            <div className="rounded-full bg-muted p-4">
              <Search className="h-8 w-8 text-muted-foreground" />
            </div>
            <h2 className="text-base font-semibold">Такой машины нет</h2>
            <p className="text-sm text-muted-foreground max-w-xs">
              Ссылка ведёт на машину, которой нет в базе. Найдите её по госномеру.
            </p>
            <Button
              variant="outline"
              size="sm"
              onClick={() => navigate("/repairs/history", { replace: true })}
            >
              Искать по номеру
            </Button>
          </div>
        )}
        {/* Ждём и карточку авто: иначе на битой ссылке сначала мигнёт
            «ремонтов пока нет», и только потом придёт 404. */}
        {!feed.isLoading && !feed.isError && !carQuery.isLoading && !carGone && items.length === 0 && (
          <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-3">
            <div className="rounded-full bg-muted p-4">
              <Wrench className="h-8 w-8 text-muted-foreground" />
            </div>
            <h2 className="text-base font-semibold">У этой машины ремонтов пока нет</h2>
            <p className="text-sm text-muted-foreground max-w-xs">
              {plate
                ? `Здесь появятся все ремонты ${plate}, как только их запишут.`
                : "Здесь появятся ремонты этой машины, как только их запишут."}
            </p>
          </div>
        )}
        {items.length > 0 && (
          <ul className="space-y-2">
            {items.map((item) => (
              <li key={item.id}>
                <HistoryRow item={item} onOpen={() => navigate(`/repairs/${item.id}`)} />
              </li>
            ))}
          </ul>
        )}
        <div ref={sentinelRef} aria-hidden="true" />
        {isFetchingNextPage && (
          <div className="text-center text-xs text-muted-foreground py-4">Загружаем ещё…</div>
        )}
        {!hasNextPage && items.length > 0 && !isFetchingNextPage && (
          <div className="text-center text-xs text-muted-foreground py-4">Это вся история.</div>
        )}
      </main>
    </div>
  );
 }
 function HistoryRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
  const model = [item.car_make, item.car_model].filter(Boolean).join(" ");
  const works = item.works_preview.map((w) => w.name);
  return (
    <button
      type="button"
      onClick={onOpen}
      className="w-full flex items-center gap-3 rounded-lg border bg-card hover:bg-accent/40 active:bg-accent/60 transition-colors text-left p-4"
    >
      <div className="flex-1 min-w-0 space-y-1">
        <div className="flex items-baseline justify-between gap-3">
          <span className="text-base font-semibold tabular-nums">{fmtDate(item.created_at)}</span>
          <span className="text-sm font-semibold tabular-nums flex-shrink-0">
            {fmtMoney(item.works_total || 0)} ₽
          </span>
        </div>
        <div className="text-sm text-muted-foreground truncate">
          <span className="font-mono">{item.car_plate}</span>
          {model && ` · ${model}`}
        </div>
        {/* Пробег у старых ремонтов не заполняли — пишем это словами, «0 км» соврало бы. */}
        <div className="text-sm">
          {item.mileage != null ? (
            <>
              <span className="text-muted-foreground">Пробег: </span>
              <span className="font-mono">{fmtMoney(item.mileage)} км</span>
            </>
          ) : (
            <span className="text-muted-foreground">Пробег не записан</span>
          )}
        </div>
        <div className="text-sm leading-snug">
          {works.length > 0 ? (
            <>
              {works.join(" · ")}
              {item.works_extra > 0 && (
                <span className="text-muted-foreground">
                  {" "}
                  · +{item.works_extra} {pluralWorks(item.works_extra)}
                </span>
              )}
            </>
          ) : (
            <span className="text-muted-foreground">Работы не указаны</span>
          )}
        </div>
      </div>
      <ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
    </button>
  );
 }
@@ -7,16 +7,19 @@
 *
 * Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
 */
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronLeft, Plus, Wrench } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRepairsFeed } from "@/hooks/useRepairsFeed";
 import { formatFeedTimestamp } from "@/lib/timeFormat";
-import type { FeedItem } from "@/api/repairsFeed";
+import { getRepairsMonthStats, type FeedItem } from "@/api/repairsFeed";
 import { groupByLocalDay, formatDayLabel, fmtMoney, pluralRepairs, pluralWorks } from "@/lib/repairsFeed";
 export default function RepairsFeedPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const {
    items,
    isLoading,
@@ -28,6 +31,17 @@ export default function RepairsFeedPage() {
    isFetching,
  } = useRepairsFeed();
  // Сумма и количество ремонтов за текущий месяц (отдельный endpoint —
  // не зависит от пагинации ленты).
  const monthStatsQuery = useQuery({
    queryKey: ["repairs-month-stats"],
    queryFn: getRepairsMonthStats,
    staleTime: 60_000,
  });
  // Группировка items по локальной дате (Asia/Vladivostok).
  const grouped = useMemo(() => groupByLocalDay(items), [items]);
  // IntersectionObserver для бесконечной прокрутки.
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
@@ -53,7 +67,11 @@ export default function RepairsFeedPage() {
  }, [refetch]);
  const handleAdd = () => navigate("/repairs/new");
-  const handleOpen = (item: FeedItem) => navigate(`/repairs/${item.id}`);
+  // Куда вернуть механика из карточки ремонта: сюда же. Без этого признака
  // «Назад» в карточке гадает по стеку истории (см. RepairDetailPage).
  const backHere = `${location.pathname}${location.search}`;
  const handleOpen = (item: FeedItem) =>
    navigate(`/repairs/${item.id}`, { state: { from: backHere } });
  return (
    <div className="min-h-screen bg-background flex flex-col">
@@ -83,8 +101,21 @@ export default function RepairsFeedPage() {
      </header>
      <main className="flex-1 container max-w-2xl py-3 space-y-2">
-        {/* Refresh tap-area для не-touch юзкейса; жест pull-to-refresh — в PR-8. */}
+        {/* Итого слева — сумма работ и количество ремонтов за текущий месяц
-        <div className="flex items-center justify-end">
+            (с 1-го числа по now). Обновить справа. */}
        <div className="flex items-center justify-between">
          <div className="text-sm">
            <span className="text-muted-foreground">За этот месяц:</span>{" "}
            <span className="font-semibold tabular-nums">
              {fmtMoney(monthStatsQuery.data?.total ?? 0)} ₽
            </span>
            {(monthStatsQuery.data?.count ?? 0) > 0 && (
              <span className="text-xs text-muted-foreground ml-2">
                ({monthStatsQuery.data!.count}{" "}
                {pluralRepairs(monthStatsQuery.data!.count)})
              </span>
            )}
          </div>
          <button
            type="button"
            onClick={handleRefresh}
@@ -113,12 +144,19 @@ export default function RepairsFeedPage() {
        {items.length > 0 && (
          <ul className="space-y-2">
-            {items.map((item) => (
+            {grouped.map((group) => (
              <li key={group.key}>
                <DaySeparator dateKey={group.key} total={group.total} count={group.items.length} />
                <ul className="space-y-2 mt-2">
                  {group.items.map((item) => (
                    <li key={item.id}>
                      <RepairRow item={item} onOpen={() => handleOpen(item)} />
                    </li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        )}
        <div ref={sentinelRef} aria-hidden="true" />
@@ -138,6 +176,23 @@ export default function RepairsFeedPage() {
 }
 // Группировка по локальной дате (VLA), форматирование сумм/склонений —
 // в @/lib/repairsFeed (покрыто юнит-тестами).
 function DaySeparator({ dateKey, total, count }: { dateKey: string; total: number; count: number }) {
  return (
    <div className="flex items-center gap-2 pt-3 pb-1 text-xs">
      <span className="font-medium text-foreground">{formatDayLabel(dateKey)}</span>
      <div className="flex-1 border-t border-dashed border-border" />
      <span className="tabular-nums text-muted-foreground">
        {fmtMoney(total)} ₽
        <span className="ml-1">({count} {pluralRepairs(count)})</span>
      </span>
    </div>
  );
 }
 function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
  const carLine = [item.car_plate, item.car_make, item.car_model]
    .filter(Boolean)
@@ -163,7 +218,14 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-baseline justify-between gap-2">
-          <div className="font-medium truncate">{carLine}</div>
+          <div className="font-medium truncate">
            {carLine}
            {item.is_external && (
              <span className="ml-1.5 align-middle text-[10px] font-semibold uppercase tracking-wide text-amber-700 bg-amber-100 rounded px-1 py-0.5">
                с улицы
              </span>
            )}
          </div>
          <div className="text-xs text-muted-foreground flex-shrink-0">
            {formatFeedTimestamp(item.created_at)}
          </div>
@@ -176,7 +238,12 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
        <div className="text-xs text-muted-foreground truncate">
          Механик: {item.mechanic_name}
        </div>
        <div className="flex items-baseline justify-between gap-2">
          <WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
          <div className="text-sm font-semibold tabular-nums flex-shrink-0">
            {fmtMoney(item.works_total || 0)} ₽
          </div>
        </div>
      </div>
    </button>
  );
@@ -196,17 +263,6 @@ function WorksLine({ works, extra }: { works: string[]; extra: number }) {
 }
 function pluralWorks(n: number): string {
  // 1 → «работа», 2..4 → «работы», 5+ → «работ»
  const mod10 = n % 10;
  const mod100 = n % 100;
  if (mod100 >= 11 && mod100 <= 14) return "работ";
  if (mod10 === 1) return "работа";
  if (mod10 >= 2 && mod10 <= 4) return "работы";
  return "работ";
 }
 function EmptyState({ onAdd }: { onAdd: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">
@@ -0,0 +1 @@
 import "@testing-library/jest-dom/vitest";
@@ -0,0 +1,6 @@
 import { render, screen } from "@testing-library/react";
 test("vitest + RTL + jsdom harness works", () => {
  render(<div>привет</div>);
  expect(screen.getByText("привет")).toBeInTheDocument();
 });
@@ -29,5 +29,6 @@
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  },
-  "include": ["src"]
+  "include": ["src"],
  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test"]
 }
@@ -0,0 +1,20 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import path from "node:path";
 // Отдельный конфиг для тестов — без VitePWA-плагина (он не нужен в jsdom и
 // только шумит). Алиас `@` и React-плагин обязательны для компонентных тестов.
 export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "src") },
  },
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: ["./src/test/setup.ts"],
    css: false,
    include: ["src/**/*.test.{ts,tsx}"],
  },
 });
		`@@ -0,0 +1 @@`
							`export default { plugins: { tailwindcss: {}, autoprefixer: {} } };`