fix(pwa): onboarding deep_links — make tg/max optional (MAX not configured in prod)

Backend omits channels without a configured username; strict zod schema
threw on missing 'max', surfacing as 'Не удалось отправить код' instead of
routing to the onboarding screen. Make both optional + regression test.

Co-Authored-By: claude-flow <ruv@ruv.net>

.gitignore

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

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

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

driver-pwa/frontend/.env.example

@@ -0,0 +1 @@
+VITE_API_BASE=https://crm.pptaxi.ru/api

driver-pwa/frontend/.gitignore

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

driver-pwa/frontend/index.html

@@ -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>

driver-pwa/frontend/package.json

@@ -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"
+  }
+}

driver-pwa/frontend/postcss.config.js

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

driver-pwa/frontend/public/manifest.webmanifest

@@ -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" }
+  ]
+}

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

@@ -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`);
+}

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

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

driver-pwa/frontend/src/App.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { useAuth } from "@/store/auth";
+import { LoginPage } from "@/pages/LoginPage";
+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";
+
+function RequireAuth({ children }: { children: ReactNode }) {
+  const token = useAuth((s) => s.token);
+  return token ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+export default function App() {
+  return (
+    <div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <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="/history" element={<RequireAuth><HistoryPage /></RequireAuth>} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import ky, { type KyInstance } from "ky";
+import { useAuth } from "@/store/auth";
+
+const API_BASE = import.meta.env.VITE_API_BASE ?? "https://crm.pptaxi.ru/api";
+
+export const api: KyInstance = ky.create({
+  prefixUrl: API_BASE,
+  timeout: 30_000,
+  retry: { limit: 2, methods: ["get"] },
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        const token = useAuth.getState().token;
+        if (token) request.headers.set("Authorization", `Bearer ${token}`);
+      },
+    ],
+    beforeError: [
+      (error) => {
+        if (error.response?.status === 401) useAuth.getState().clear();
+        return error;
+      },
+    ],
+  },
+});

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

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { BalanceSchema, TopupSchema, PaymentsSchema, AuthRequestSchema } 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 o = AuthRequestSchema.parse({ status: "onboarding", deep_links: { tg: "t", max: "m" } });
+    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" } });
+    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");
+  });
+});

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

@@ -0,0 +1,40 @@
+import { z } from "zod";
+import { api } from "./client";
+
+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() }) }),
+]);
+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() })),
+});
+export const TopupSchema = z.object({
+  order_id: z.string(), pay_url: z.string(), commission: z.number(), total: z.number(),
+});
+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(),
+  })),
+});
+
+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 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());

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

@@ -0,0 +1,7 @@
+export function AppHeader() {
+  return (
+    <header className="mb-4">
+      <span className="text-sm font-bold">Премиум Водитель</span>
+    </header>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPaymentState } from "@/api/driver";
+
+const TERMINAL = new Set(["PAID", "CONFIRMED", "REJECTED", "REVERSED", "REFUNDED", "CANCELED", "AUTH_FAIL"]);
+
+export function usePaymentStatus(orderId: string) {
+  return useQuery({
+    queryKey: ["payment", orderId],
+    queryFn: () => getPaymentState(orderId),
+    refetchInterval: (q) => (q.state.data && TERMINAL.has(q.state.data.status) ? false : 1500),
+  });
+}

driver-pwa/frontend/src/index.css

@@ -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; }
+}

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

@@ -0,0 +1,19 @@
+import { describe, it, expect } from "vitest";
+import { keypadReduce, 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 });
+  });
+});

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

@@ -0,0 +1,16 @@
+const MAX_DIGITS = 6;
+
+export function keypadReduce(current: string, key: string): string {
+  if (key === "back") return current.slice(0, -1);
+  if (!/^\d$/.test(key)) return current;
+  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;
+}
+
+export function withCommission(base: number, rate: number): { commission: number; total: number } {
+  const commission = Math.round(base * rate * 100) / 100;
+  const total = Math.round((base + commission) * 100) / 100;
+  return { commission, total };
+}

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

@@ -0,0 +1,17 @@
+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("digitsOnly strips non-digits", () => {
+    expect(digitsOnly("+7 (914) 305-44-00")).toBe("79143054400");
+  });
+  it("formatPhone renders +7 mask progressively", () => {
+    expect(formatPhone("9143054400")).toBe("+7 914 305-44-00");
+    expect(formatPhone("914305")).toBe("+7 914 305");
+  });
+});

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

@@ -0,0 +1,21 @@
+export function digitsOnly(s: string): string {
+  return (s || "").replace(/\D/g, "");
+}
+
+export function formatMoney(rub: number): string {
+  const neg = rub < 0;
+  const abs = Math.abs(Math.round(rub));
+  const grouped = abs.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return `${neg ? "−" : ""}${grouped} ₽`;
+}
+
+/** 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("");
+}

driver-pwa/frontend/src/main.tsx

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

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

@@ -0,0 +1,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();
+  });
+});

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

@@ -0,0 +1,60 @@
+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 totalDebt = accounts.filter((a) => a.balance < 0).reduce((s, a) => s + a.balance, 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 ${totalDebt < 0 ? "text-neg" : ""}`}>{formatMoney(totalDebt)}</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>
+  );
+}

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

@@ -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();
+  });
+});

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

@@ -0,0 +1,41 @@
+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";
+
+const STATUS_RU: Record<string, string> = {
+  PAID: "Оплачено", NEW: "Ожидает", FORM: "Ожидает", CONFIRMED: "Оплачено", REJECTED: "Отклонён",
+};
+
+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) => (
+          <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>{formatMoney(p.amount)}</b>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+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 })),
+}));
+
+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.type(screen.getByPlaceholderText(/телефон/i), "9143054400");
+    await userEvent.click(screen.getByRole("button", { name: /Получить код/i }));
+    expect(driver.authRequest).toHaveBeenCalledWith("79143054400");
+    const codeInput = await screen.findByPlaceholderText(/код/i);
+    await userEvent.type(codeInput, "123456");
+    await userEvent.click(screen.getByRole("button", { name: /Войти/i }));
+    expect(driver.authVerify).toHaveBeenCalledWith("79143054400", "123456");
+  });
+});

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

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { authRequest, authVerify } from "@/api/driver";
+import { digitsOnly, formatPhone } from "@/lib/format";
+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 e164 = "7" + phone;
+
+  async function requestCode() {
+    if (phone.length < 10) return;
+    setBusy(true);
+    try {
+      const r = await authRequest(e164);
+      if (r.status === "onboarding") {
+        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 msg =
+        status === 404 ? "Номер не найден. Обратитесь в парк." :
+        status === 429 ? "Слишком часто. Попробуйте позже." :
+        "Не удалось отправить код";
+      toast.error(msg);
+    } 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 {
+      toast.error("Неверный или просроченный код");
+    } 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>
+
+      {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>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { OnboardingPage } from "./OnboardingPage";
+
+describe("OnboardingPage", () => {
+  beforeEach(() =>
+    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-code action", () => {
+    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();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { useNavigate } from "react-router-dom";
+
+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;
+  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">
+        Чтобы получать код входа, откройте бот и нажмите «Старт». Затем вернитесь и запросите код снова.
+      </p>
+      {data.tg && (
+        <a href={data.tg} target="_blank" rel="noopener" className="btn-primary mb-3 no-underline block">
+          Подключить Telegram
+        </a>
+      )}
+      {data.max && (
+        <a href={data.max} target="_blank" rel="noopener" className="btn-ghost mb-6 no-underline block">
+          Подключить MAX
+        </a>
+      )}
+      <button className="btn-ghost" onClick={() => nav("/login")}>
+        Я подключил — запросить код
+      </button>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { Check } from "lucide-react";
+import { formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+import { usePaymentStatus } from "@/hooks/usePaymentStatus";
+
+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 } | null) ?? {};
+  const { data } = usePaymentStatus(orderId);
+  const paid = data?.status === "PAID";
+
+  useEffect(() => {
+    if (paid) qc.invalidateQueries({ queryKey: ["balance"] });
+  }, [paid, qc]);
+
+  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.bucket} пополнен на {formatMoney(st.base ?? 0)}</p>
+        <button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-10 flex flex-col items-center text-center">
+      <span className="w-12 h-12 rounded-xl2 bg-ink text-cream flex items-center justify-center font-extrabold mb-4">СБП</span>
+      <p className="text-lg font-extrabold">{formatMoney(st.total ?? 0)}</p>
+      <p className="text-muted text-xs mb-6">{st.bucket}</p>
+      <a className="btn-primary no-underline" href={st.payUrl} target="_blank" rel="noopener">Оплатить</a>
+      <p className="text-muted text-xs mt-2">Откроется ваше приложение банка</p>
+      <div className="flex items-center gap-2 mt-6 text-muted text-xs"><Spinner /> Ожидаем оплату…</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+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 })),
+}));
+import { TopupPage } from "./TopupPage";
+import * as driver from "@/api/driver";
+
+const wrap = () => {
+  const qc = new QueryClient();
+  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");
+  });
+});

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

@@ -0,0 +1,84 @@
+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 { topup, getCommission } from "@/api/driver";
+import { keypadReduce, 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 bucket = (loc.state as { bucket?: string } | null)?.bucket ?? "Долг аренда";
+  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 = raw ? parseInt(raw, 10) : 0;
+  const { commission: fee, total } = withCommission(base, rate);
+
+  function press(k: string) {
+    if (k === "·") return;
+    setRaw((r) => keypadReduce(r, k));
+  }
+
+  async function pay() {
+    if (base <= 0) return;
+    setBusy(true);
+    try {
+      const r = await topup(bucket, base, method as "qr" | "card");
+      nav(`/pay/${r.order_id}`, { state: { payUrl: r.pay_url, total: r.total, bucket, base } });
+    } catch {
+      toast.error("Не удалось создать платёж");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav(-1)}>‹ {bucket}</button>
+      <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} onClick={pay}>
+        {busy ? <Spinner /> : "Оплатить"}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface AuthState {
+  token: string | null;
+  driverId: number | null;
+  setSession: (token: string, driverId: number) => void;
+  clear: () => void;
+}
+
+export const useAuth = create<AuthState>()(
+  persist(
+    (set) => ({
+      token: null,
+      driverId: null,
+      setSession: (token, driverId) => set({ token, driverId }),
+      clear: () => set({ token: null, driverId: null }),
+    }),
+    { name: "pp-driver-auth" }
+  )
+);

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

driver-pwa/frontend/tailwind.config.js

@@ -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: [],
+};

driver-pwa/frontend/tsconfig.app.json

@@ -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"]
+}

driver-pwa/frontend/tsconfig.json

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

driver-pwa/frontend/tsconfig.node.json

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

driver-pwa/frontend/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
+import path from "path";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({ registerType: "autoUpdate", manifest: false, includeAssets: ["icons/*.png"] }),
+  ],
+  resolve: { alias: { "@": path.resolve(__dirname, "src") } },
+  server: { port: 5174 },
+});

driver-pwa/frontend/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: { alias: { "@": path.resolve(__dirname, "src") } },
+  test: { globals: true, environment: "jsdom", setupFiles: ["./src/test/setup.ts"] },
+});

mechanic-pwa/frontend/package.json

@@ -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"
   }
 }

mechanic-pwa/frontend/src/App.tsx

@@ -9,6 +9,8 @@ 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";
 
@@ -37,6 +39,9 @@ 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>} />
+      <Route path="/repairs/:id" element={<RequireAuth><RepairDetailPage /></RequireAuth>} />
+      <Route path="/repairs/:id/edit" element={<RequireAuth><EditRepairPage /></RequireAuth>} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

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

@@ -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 {

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

@@ -12,8 +12,10 @@ 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;
 }
 
@@ -36,3 +38,108 @@ export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedRespo
     .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>();
+}

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

@@ -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>
+  );
+}

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

@@ -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();
+});

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

@@ -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>
+  );
+}

mechanic-pwa/frontend/src/index.css

@@ -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);
   }
 }

mechanic-pwa/frontend/src/lib/inspectionSlots.test.ts

@@ -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"));
+});

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

@@ -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];
+}

mechanic-pwa/frontend/src/lib/repairForm.test.ts

@@ -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);
+  });
+});

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

@@ -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) === "";
+}

mechanic-pwa/frontend/src/lib/repairsFeed.test.ts

@@ -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);
+  });
+});

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

@@ -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 "работ";
+}

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

@@ -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: "косметика",

mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.test.tsx

@@ -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();
+});

mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.tsx

@@ -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>
   );
 }

mechanic-pwa/frontend/src/pages/repairs/CreateRepairPage.tsx

@@ -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>
   );

mechanic-pwa/frontend/src/pages/repairs/EditRepairPage.tsx

@@ -0,0 +1,550 @@
+/**
+ * Правка ремонта в 1-часовом окне (У49).
+ *
+ * Минимальная версия: редактируются работы (имя из каталога + цена +
+ * ручная правка + комментарий), запчасти, замена масла, пробег. Фото
+ * НЕ редактируются — для смены фото нужно дождаться PR-9.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { 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";
+
+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 [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]);
+
+  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) }
+          : {}),
+      });
+      navigate(`/repairs/${detail.id}`, { replace: true });
+    } 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={() => navigate(-1)}
+            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={() => navigate(`/repairs/${detail.id}`)} 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>
+  );
+}

mechanic-pwa/frontend/src/pages/repairs/RepairDetailPage.tsx

@@ -0,0 +1,317 @@
+/**
+ * Карточка ремонта (PWA): read-only просмотр после клика по строке ленты.
+ *
+ * Минимальная версия для возможности «открыть и посмотреть». Полноценный
+ * вариант с lightbox, копированием госномера, обратным счётчиком и
+ * редактированием в 24h-окне — в PR-9 по плану.
+ *
+ * Endpoint: GET /api/v1/mechanic/repairs/{id}
+ */
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ChevronLeft, Pencil } from "lucide-react";
+import { getRepairDetail, type RepairDetailResponse } from "@/api/repairsFeed";
+
+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 [data, setData] = useState<RepairDetailResponse | 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]);
+
+  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={() => navigate("/repairs")}
+            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>
+  );
+}

mechanic-pwa/frontend/src/pages/repairs/RepairsFeedPage.tsx

@@ -7,13 +7,15 @@
  *
  * Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
  */
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { 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();
@@ -28,6 +30,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(() => {
@@ -83,8 +96,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,9 +139,16 @@ export default function RepairsFeedPage() {
 
         {items.length > 0 && (
           <ul className="space-y-2">
-            {items.map((item) => (
+            {grouped.map((group) => (
-              <li key={item.id}>
+              <li key={group.key}>
-                <RepairRow item={item} onOpen={() => handleOpen(item)} />
+                <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>
@@ -138,6 +171,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 +213,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 +233,12 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
         <div className="text-xs text-muted-foreground truncate">
           Механик: {item.mechanic_name}
         </div>
-        <WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
+        <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 +258,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">

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

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

mechanic-pwa/frontend/src/test/smoke.test.tsx

@@ -0,0 +1,6 @@
+import { render, screen } from "@testing-library/react";
+
+test("vitest + RTL + jsdom harness works", () => {
+  render(<div>привет</div>);
+  expect(screen.getByText("привет")).toBeInTheDocument();
+});

mechanic-pwa/frontend/tsconfig.app.json

@@ -29,5 +29,6 @@
     "baseUrl": ".",
     "paths": { "@/*": ["./src/*"] }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test"]
 }

mechanic-pwa/frontend/vitest.config.ts

@@ -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}"],
+  },
+});