feat(tyres): доступ к выдаче резины по праву склада, не только админам

Плитка «Выдача резины» и маршруты /wh/tyres* открываются по признаку
warehouse:tyres из /me (или is_admin) — новый гейт RequireTyres вместо
RequireAdmin. Приёмка/инвентаризация остаются админскими. Бэкенд: право
warehouse.tyres в crm2.

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

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

@@ -1,5 +1,7 @@
 import { Routes, Route, Navigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/store/auth";
+import { getMe } from "@/api/me";
 import { useMeSync } from "@/hooks/useMeSync";
 import Login from "@/pages/Login";
 import ActionMenu from "@/pages/ActionMenu";
@@ -9,8 +11,18 @@ import InspectionEditor from "@/pages/InspectionEditor";
 import InspectionReview from "@/pages/InspectionReview";
 import TtStateDetail from "@/pages/TtStateDetail";
 import RepairsFeedPage from "@/pages/repairs/RepairsFeedPage";
+import RepairDetailPage from "@/pages/repairs/RepairDetailPage";
+import EditRepairPage from "@/pages/repairs/EditRepairPage";
 import CarSelectPage from "@/pages/repairs/CarSelectPage";
 import CreateRepairPage from "@/pages/repairs/CreateRepairPage";
+import ReceivingPage from "@/pages/warehouse/ReceivingPage";
+import ReceivingDraftPage from "@/pages/warehouse/ReceivingDraftPage";
+import ReceiptDetailPage from "@/pages/warehouse/ReceiptDetailPage";
+import StocktakePage from "@/pages/warehouse/StocktakePage";
+import TyresPage from "@/pages/warehouse/TyresPage";
+import TyreSizesPage from "@/pages/warehouse/TyreSizesPage";
+import TyreJournalPage from "@/pages/warehouse/TyreJournalPage";
+import StocktakeSessionPage from "@/pages/warehouse/StocktakeSessionPage";
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const token = useAuth((s) => s.token);
@@ -18,6 +30,36 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
+/**
+ * Складские разделы пока только админам. Сервер и так отдаёт 403, но без
+ * клиентской проверки прямой ссылкой можно было бы открыть пустой экран с
+ * ошибкой — это читается как поломка, а не как «вам сюда нельзя».
+ */
+function RequireAdmin({ children }: { children: React.ReactNode }) {
+  const token = useAuth((s) => s.token);
+  const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
+  if (!token) return <Navigate to="/login" replace />;
+  if (meQuery.isLoading) return null;
+  if (!meQuery.data?.is_admin) return <Navigate to="/" replace />;
+  return <>{children}</>;
+}
+
+/**
+ * Выдача резины — по складскому праву (warehouse:tyres в /me), не только
+ * админам. Приёмка и инвентаризация остаются под RequireAdmin.
+ */
+function RequireTyres({ children }: { children: React.ReactNode }) {
+  const token = useAuth((s) => s.token);
+  const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
+  if (!token) return <Navigate to="/login" replace />;
+  if (meQuery.isLoading) return null;
+  const me = meQuery.data;
+  if (!me?.is_admin && !me?.permissions?.includes("warehouse:tyres")) {
+    return <Navigate to="/" replace />;
+  }
+  return <>{children}</>;
+}
+
 export default function App() {
   // У35: фоновая сверка прав механика раз в 5 минут — выкидывает на /login
   // с сообщением «Доступ отозван», если админ снял can_login_pwa или вывел
@@ -37,6 +79,19 @@ 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="/wh/receiving" element={<RequireAdmin><ReceivingPage /></RequireAdmin>} />
+      <Route path="/wh/receiving/:id" element={<RequireAdmin><ReceivingDraftPage /></RequireAdmin>} />
+      <Route path="/wh/receipts/:id" element={<RequireAdmin><ReceiptDetailPage /></RequireAdmin>} />
+      <Route path="/wh/stocktake" element={<RequireAdmin><StocktakePage /></RequireAdmin>} />
+      <Route path="/wh/stocktake/:id" element={<RequireAdmin><StocktakeSessionPage /></RequireAdmin>} />
+      {/* Сезонная выдача резины — по складскому праву (не только админам). */}
+      <Route path="/wh/tyres" element={<RequireTyres><TyresPage /></RequireTyres>} />
+      <Route path="/wh/tyres/sizes" element={<RequireTyres><TyreSizesPage /></RequireTyres>} />
+      <Route path="/wh/tyres/journal" element={<RequireTyres><TyreJournalPage /></RequireTyres>} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

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

@@ -29,6 +29,18 @@ export interface PartSuggestion {
   name: string;
 }
 
+/** Позиция складского каталога для подбора детали в ремонт. */
+export interface PartCatalogItem {
+  id: number;
+  name: string;
+  article: string | null;
+  brand: string | null;
+  unit: string;
+  in_stock: number;            // суммарный остаток (может быть < 0)
+  price_hint: number | string | null;
+  fits: boolean;               // подходит этой машине
+}
+
 export interface PresignResponse {
   photo_uuid: string;
   extension: string;
@@ -53,25 +65,52 @@ export interface CreateWorkPayload {
 }
 
 export interface CreatePartPayload {
-  name: string;
+  part_id: number;
   qty: number;
+  name?: string;   // снимок имени (сервер возьмёт из каталога, если пусто)
 }
 
 export interface CreateOilChangePayload {
   enabled: boolean;
   mileage_at_change: number | null;
   next_in_km: number;
+  oil_type: string; // engine | cvt | akpp
   sticker_photo_uuid: string | null;
   sticker_extension: string | null;
 }
 
+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 — за один заезд бывает несколько замен (двигатель + коробка).
+  // Пришло на смену одиночному oil_change; бэкенд принимает оба, но новый
+  // клиент шлёт только список.
+  oil_changes: CreateOilChangePayload[];
+  // Работавшие механики (делёж 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 {
@@ -100,6 +139,25 @@ export async function suggestParts(q: string): Promise<PartSuggestion[]> {
     .json<PartSuggestion[]>();
 }
 
+/**
+ * Поиск детали в складском каталоге для конкретной машины.
+ * По умолчанию — только подходящие этой машине + без привязки к марке;
+ * showAll=true снимает фильтр применимости.
+ */
+export async function searchParts(
+  q: string,
+  carId: number | null,
+  showAll = false,
+): Promise<PartCatalogItem[]> {
+  const params = new URLSearchParams();
+  // Без машины (ремонт «с улицы») применимость считать не по чему —
+  // бэкенд отдаст каталог целиком.
+  if (carId) params.set("car_id", String(carId));
+  if (q.trim()) params.set("q", q.trim());
+  if (showAll) params.set("all", "true");
+  return api.get(`parts/search?${params.toString()}`).json<PartCatalogItem[]>();
+}
+
 export async function presignPhoto(extension: string, photo_uuid?: string): Promise<PresignResponse> {
   return api
     .post("repairs/photos/presign", {

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

@@ -12,8 +12,13 @@ export interface FeedItem {
   car_model: string | null;
   driver_name: string | null;
   mechanic_name: string;
+  // Пробег на момент ремонта. Бэкенд отдавал его и раньше, но лента поле не
+  // забирала — чтобы посмотреть, приходилось проваливаться в каждый ремонт.
+  mileage: number | null;
+  is_external: boolean;
   works_preview: FeedWorkBrief[];
   works_extra: number;
+  works_total: number; // сумма работ без запчастей
   photo_url: string | null;
 }
 
@@ -25,14 +30,137 @@ export interface FeedResponse {
 export interface FeedParams {
   limit?: number;
   cursor?: string | null;
+  // Поисковая подстрока: госномер, марка или модель.
+  q?: string | null;
 }
 
 export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedResponse> {
   const search = new URLSearchParams();
   if (params.limit) search.set("limit", String(params.limit));
   if (params.cursor) search.set("cursor", params.cursor);
+  // Пустой/пробельный запрос не шлём — это обычная лента, а не поиск.
+  const q = params.q?.trim();
+  if (q) search.set("q", q);
   const qs = search.toString();
   return api
     .get(`repairs${qs ? `?${qs}` : ""}`)
     .json<FeedResponse>();
 }
+
+export interface RepairsMonthStats {
+  total: number;
+  count: number;
+}
+
+export async function getRepairsMonthStats(): Promise<RepairsMonthStats> {
+  return api.get("repairs/stats/month").json<RepairsMonthStats>();
+}
+
+// ── Детальная карточка ремонта ─────────────────────────────────────────────
+
+export interface RepairDetailWork {
+  id: number;
+  work_catalog_id: number;
+  name: string;
+  price_applied: number;
+  manual_override: boolean;
+  override_comment: string | null;
+}
+
+export interface RepairDetailPart {
+  id: number;
+  name: string;
+  qty: number;
+  // Складская позиция. null у исторических строк, заведённых свободным
+  // текстом до перевода запчастей на каталог — их склад не трогает.
+  part_id: number | null;
+  article: string | null;
+}
+
+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;
+  oil_type: string; // engine | cvt | akpp
+  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;
+  // Машина парка; null у ремонта «с улицы».
+  car_id: number | null;
+  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;   // legacy: первая запись
+  oil_changes: RepairDetailOil[];       // 1:N — двигатель + коробка за заезд
+  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 {
+  // Складская позиция. Без part_id строка остаётся свободным текстом и склад
+  // не трогает (так сохраняются исторические строки).
+  part_id?: number | null;
+  name: string;
+  qty: number;
+}
+
+export interface PatchOilChange {
+  enabled: boolean;
+  mileage_at_change: number | null;
+  next_in_km: number | null;
+  oil_type?: string; // engine | transmission | cvt | akpp
+}
+
+export interface PatchRepairPayload {
+  mileage: number | null;
+  works: PatchWork[];
+  parts: PatchPart[];
+  // Полная замена набора замен масла за заезд (пустой список = замен не было).
+  oil_changes: PatchOilChange[];
+  // Работавшие механики. Опционально — если не передан, набор не меняется.
+  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/api/warehouse.ts

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

mechanic-pwa/frontend/src/components/repairs/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/PartsPickerModal.tsx

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

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

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

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

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

mechanic-pwa/frontend/src/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/hooks/useRepairsFeed.ts

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

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/imageDownscale.ts

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

mechanic-pwa/frontend/src/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/ActionMenu.tsx

@@ -34,6 +34,39 @@ export default function ActionMenu() {
       emoji: "🔧",
       onClick: () => navigate("/repairs"),
     },
+    // Приёмка и инвентаризация правят остатки и деньги — пока только админам
+    // (тот же гейт стоит на сервере, здесь просто не показываем лишнего).
+    ...(meQuery.data?.is_admin
+      ? [
+          {
+            key: "receiving",
+            title: "Приёмка",
+            description: "Снять накладную камерой и оприходовать товар",
+            emoji: "📦",
+            onClick: () => navigate("/wh/receiving"),
+          },
+          {
+            key: "stocktake",
+            title: "Инвентаризация",
+            description: "Пересчитать зону склада и провести расхождения",
+            emoji: "📋",
+            onClick: () => navigate("/wh/stocktake"),
+          },
+        ]
+      : []),
+    // Выдача резины — по складскому праву (не только админам): признак
+    // warehouse:tyres приходит в /me, если у механика есть право склада.
+    ...(meQuery.data?.is_admin || meQuery.data?.permissions?.includes("warehouse:tyres")
+      ? [
+          {
+            key: "tyres",
+            title: "Выдача резины",
+            description: "Сезонная переобувка: выдать комплект и закрыть старый",
+            emoji: "🛞",
+            onClick: () => navigate("/wh/tyres"),
+          },
+        ]
+      : []),
   ];
 
   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 }[] = [
-  { side: "front", label: "Перед" },
-  { 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];
-}
+// Слоты фото осмотра — в @/lib/inspectionSlots (покрыто тестами).
+import { slotsForType } from "@/lib/inspectionSlots";
 
 const SEVERITY_LABELS: Record<string, string> = {
   cosmetic: "косметика",

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

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

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,22 +15,28 @@
  * Сохранение: 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 PartsPickerModal from "@/components/repairs/PartsPickerModal";
+import QtyStepper from "@/components/repairs/QtyStepper";
+import MechanicsField, { type SelectedMechanic } from "@/components/repairs/MechanicsField";
+import { getMe } from "@/api/me";
 import {
   createRepair,
   getCarContext,
   presignPhoto,
   searchWorks,
-  suggestParts,
   uploadPhotoToTmp,
   type CarContext,
   type CreatePhotoPayload,
   type MechWork,
+  type PartCatalogItem,
   type PresignResponse,
 } from "@/api/repairsCreate";
 
@@ -41,6 +47,10 @@ interface PhotoState {
   tag: "auto" | "part" | "other";
   status: "uploading" | "uploaded" | "error";
   errorMessage?: string;
+  // Превью локального файла через URL.createObjectURL — отдаётся в <img>
+  // вместо плейсхолдера «Загружено». Освобождается через revokeObjectURL
+  // при удалении и при размонтировании страницы.
+  previewUrl?: string;
 }
 
 interface WorkRow {
@@ -50,26 +60,44 @@ 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;
 }
 
 interface PartRow {
   rowKey: string;
+  part_id: number;
   name: string;
-  qty: number;
+  article: string | null;
+  in_stock: number;
+  // "" допустимо, пока поле редактируют: иначе стирание единицы мгновенно
+  // возвращало бы её и «4 свечи» было не набрать (см. QtyStepper).
+  qty: number | "";
 }
 
 interface OilChangeState {
   enabled: boolean;
-  mileage_at_change: number | null;
-  mileage_is_dirty: boolean; // У24: мягкая подписка с шапочным
-  next_in_km: number;
+  next_in_km: number; // интервал двигателя
+  // Какие масла меняли за заезд (можно оба сразу).
+  types: { engine: boolean; transmission: boolean };
+  // Пробега здесь нет намеренно: он один на весь ремонт (У24), берётся из
+  // шапки формы — механик не должен вводить одно и то же дважды.
   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 +109,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,11 +124,13 @@ 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,
+    types: { engine: true, transmission: false },
     sticker: null,
   });
 
@@ -109,6 +142,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 +167,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 +190,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 +202,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 +210,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 +239,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 +260,7 @@ export default function CreateRepairPage() {
   };
 
   const addWorkFromCatalog = (w: MechWork) => {
-    const price = Number(w.price);
+    const price = Math.round(Number(w.price));
     setWorks((arr) => [
       ...arr,
       {
@@ -235,20 +299,21 @@ export default function CreateRepairPage() {
 
   // ── Parts ────────────────────────────────────────────────────────────────
 
-  const [partsDraft, setPartsDraft] = useState<{ name: string; suggestions: string[] }>({ name: "", suggestions: [] });
+  const [partsPickerOpen, setPartsPickerOpen] = useState(false);
 
-  const queryPartSuggestions = async (q: string) => {
-    setPartsDraft({ name: q, suggestions: [] });
-    if (!q.trim()) return;
-    const list = await suggestParts(q);
-    setPartsDraft({ name: q, suggestions: list.map((s) => s.name) });
-  };
-
-  const addPart = (name: string) => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setParts((arr) => [...arr, { rowKey: uuid4(), name: trimmed, qty: 1 }]);
-    setPartsDraft({ name: "", suggestions: [] });
+  const addPartFromCatalog = (item: PartCatalogItem) => {
+    setParts((arr) => {
+      // Та же деталь уже в списке — увеличиваем количество, а не плодим строку.
+      const existing = arr.find((p) => p.part_id === item.id);
+      if (existing) {
+        return arr.map((p) => (p.part_id === item.id ? { ...p, qty: Number(p.qty || 0) + 1 } : p));
+      }
+      return [
+        ...arr,
+        { rowKey: uuid4(), part_id: item.id, name: item.name, article: item.article, in_stock: item.in_stock, qty: 1 },
+      ];
+    });
+    setPartsPickerOpen(false);
   };
 
   const removePart = (rowKey: string) =>
@@ -256,20 +321,17 @@ export default function CreateRepairPage() {
 
   // ── Submit ───────────────────────────────────────────────────────────────
 
-  const canSubmit = () =>
-    photos.length > 0 &&
-    photos.every((p) => p.status === "uploaded") &&
-    works.length > 0 &&
-    works.every((w) => !w.unlocked || w.override_comment.trim().length > 0);
-
+  // Общая часть гейтинга живёт в lib/repairForm (покрыта тестами, шарится с
+  // формой правки); здесь добавляется только специфичная для создания проверка
+  // выбранного типа масла.
   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 "Укажите комментарий к ручной правке цены";
+    const base = repairSubmitWhyDisabled(photos, works);
+    if (base) return base;
+    if (oilChange.enabled && !oilChange.types.engine && !oilChange.types.transmission)
+      return "Выберите тип масла (двигатель и/или коробка) или снимите «Была замена масла»";
     return "";
   };
+  const canSubmit = () => repairCanSubmit(photos, works) && submitWhyDisabled() === "";
 
   const onSubmit = async () => {
     const reason = submitWhyDisabled();
@@ -287,7 +349,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,
@@ -295,23 +364,32 @@ export default function CreateRepairPage() {
             manual_override: w.unlocked,
             override_comment: w.unlocked ? w.override_comment.trim() : null,
           })),
-          parts: parts.map((p) => ({ name: p.name, qty: p.qty })),
+          // Пустое поле количества (человек стёр и не дописал) — это 1 штука,
+          // а не ноль: строка в списке есть, значит деталь ставили.
+          parts: parts.map((p) => ({
+            part_id: p.part_id, qty: Math.max(1, Number(p.qty) || 1), name: p.name,
+          })),
           photos: photoPayload,
-          oil_change: oilChange.enabled
-            ? {
-                enabled: true,
-                mileage_at_change: oilChange.mileage_at_change,
-                next_in_km: oilChange.next_in_km,
-                sticker_photo_uuid:
-                  oilChange.sticker?.status === "uploaded"
-                    ? oilChange.sticker.presign.photo_uuid
-                    : null,
-                sticker_extension:
-                  oilChange.sticker?.status === "uploaded"
-                    ? oilChange.sticker.presign.extension
-                    : null,
-              }
-            : null,
+          oil_changes: oilChange.enabled
+            ? (["engine", "transmission"] as const)
+                .filter((t) => oilChange.types[t])
+                .map((t, idx) => ({
+                  enabled: true,
+                  // Один источник истины — главный пробег ремонта (см. У24).
+                  mileage_at_change: mileage,
+                  next_in_km: t === "engine" ? oilChange.next_in_km : 0,
+                  oil_type: t,
+                  // Стикер прикрепляем к первой выбранной замене (обычно двигатель).
+                  sticker_photo_uuid:
+                    idx === 0 && oilChange.sticker?.status === "uploaded"
+                      ? oilChange.sticker.presign.photo_uuid
+                      : null,
+                  sticker_extension:
+                    idx === 0 && oilChange.sticker?.status === "uploaded"
+                      ? oilChange.sticker.presign.extension
+                      : null,
+                }))
+            : [],
         },
         idemKey.current,
       );
@@ -364,7 +442,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 +477,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 +542,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 className="text-xs text-muted-foreground">
-                        Прайс: {w.price_catalog} ₽
+                      <div
+                        className="text-sm font-medium leading-snug break-words"
+                        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 +565,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,30 +612,48 @@ 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>
-          {parts.length > 0 && (
+          <div className="flex items-baseline justify-between">
+            <Label className="text-sm">Запчасти и материалы</Label>
+            <Button variant="outline" size="sm" onClick={() => setPartsPickerOpen(true)}>
+              <Plus className="h-3 w-3 mr-1" />
+              Добавить деталь
+            </Button>
+          </div>
+          {parts.length === 0 ? (
+            <div className="text-xs text-muted-foreground mt-2">
+              Детали выбираются со склада — спишутся при сохранении
+            </div>
+          ) : (
             <ul className="mt-2 space-y-1">
               {parts.map((p) => (
                 <li key={p.rowKey} className="flex items-center gap-2 text-sm">
-                  <span className="flex-1">{p.name}</span>
-                  <Input
-                    type="number"
-                    min={1}
+                  <div className="flex-1 min-w-0">
+                    <div className="truncate">{p.name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {p.article ? `арт. ${p.article} · ` : ""}
+                      {p.in_stock > 0
+                        ? `на складе: ${p.in_stock}`
+                        : p.in_stock < 0
+                          ? `на складе: ${p.in_stock}`
+                          : "нет в наличии"}
+                    </div>
+                  </div>
+                  <QtyStepper
                     value={p.qty}
-                    onChange={(e) =>
+                    onChange={(next) =>
                       setParts((arr) =>
-                        arr.map((row) =>
-                          row.rowKey === p.rowKey ? { ...row, qty: Math.max(1, Number(e.target.value)) } : row,
-                        ),
+                        arr.map((row) => (row.rowKey === p.rowKey ? { ...row, qty: next } : row)),
                       )
                     }
-                    className="w-20"
                   />
                   <Button variant="ghost" size="sm" onClick={() => removePart(p.rowKey)}>
                     <Trash2 className="h-3 w-3" />
@@ -537,32 +662,6 @@ export default function CreateRepairPage() {
               ))}
             </ul>
           )}
-          <div className="mt-2 flex gap-2">
-            <Input
-              value={partsDraft.name}
-              onChange={(e) => queryPartSuggestions(e.target.value)}
-              placeholder="Например, Свеча NGK"
-              onKeyDown={(e) => e.key === "Enter" && addPart(partsDraft.name)}
-            />
-            <Button onClick={() => addPart(partsDraft.name)}>
-              <Plus className="h-4 w-4" />
-            </Button>
-          </div>
-          {partsDraft.suggestions.length > 0 && (
-            <ul className="mt-1 border rounded-md bg-popover divide-y">
-              {partsDraft.suggestions.map((s) => (
-                <li key={s}>
-                  <button
-                    type="button"
-                    className="w-full text-left text-sm px-3 py-2 hover:bg-accent/40"
-                    onClick={() => addPart(s)}
-                  >
-                    {s}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
         </section>
 
         {/* Замена масла */}
@@ -580,44 +679,83 @@ export default function CreateRepairPage() {
           {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
-                  type="number"
-                  min={0}
-                  value={oilChange.next_in_km}
-                  onChange={(e) =>
-                    setOilChange((oc) => ({ ...oc, next_in_km: Number(e.target.value) || 0 }))
-                  }
-                />
+                <Label className="text-sm">Что меняли (можно оба)</Label>
+                <div className="mt-1 grid grid-cols-2 gap-2">
+                  {(
+                    [
+                      ["engine", "Двигатель"],
+                      ["transmission", "Коробка"],
+                    ] as ["engine" | "transmission", string][]
+                  ).map(([v, l]) => (
+                    <button
+                      type="button"
+                      key={v}
+                      onClick={() =>
+                        setOilChange((oc) => ({ ...oc, types: { ...oc.types, [v]: !oc.types[v] } }))
+                      }
+                      className={`rounded-md border px-2 py-2 text-sm ${
+                        oilChange.types[v]
+                          ? "border-primary bg-primary/10 font-medium text-primary"
+                          : "border-input"
+                      }`}
+                    >
+                      {oilChange.types[v] ? "✓ " : ""}
+                      {l}
+                    </button>
+                  ))}
+                </div>
+                {!oilChange.types.engine && !oilChange.types.transmission && (
+                  <p className="mt-1 text-xs text-destructive">Выберите хотя бы один тип масла.</p>
+                )}
               </div>
+              {oilChange.types.engine && (
+                <div>
+                  <Label className="text-sm">Двигатель: следующая замена через (км)</Label>
+                  <Input
+                    type="number"
+                    min={0}
+                    value={oilChange.next_in_km}
+                    onChange={(e) =>
+                      setOilChange((oc) => ({ ...oc, next_in_km: Number(e.target.value) || 0 }))
+                    }
+                  />
+                </div>
+              )}
+              {oilChange.types.transmission && (
+                <p className="text-xs text-muted-foreground">
+                  Интервал коробки задаётся по модели авто в отчёте СТО.
+                </p>
+              )}
               <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">
-                  {oilChange.sticker == null ? (
-                    <span className="text-sm text-muted-foreground">Тап чтобы загрузить</span>
-                  ) : oilChange.sticker.status === "uploading" ? (
-                    "Загрузка…"
-                  ) : oilChange.sticker.status === "error" ? (
-                    <span className="text-sm text-destructive">
-                      Ошибка: {oilChange.sticker.errorMessage}
-                    </span>
+                <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?.previewUrl ? (
+                    <img
+                      src={oilChange.sticker.previewUrl}
+                      alt=""
+                      className="absolute inset-0 w-full h-full object-contain bg-muted"
+                    />
                   ) : (
-                    <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,43 +771,24 @@ 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">
-          <header className="border-b p-3 flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={() => setWorksPicker({ open: false, q: "", results: [] })}>
-              Отмена
-            </Button>
-            <Input
-              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>
+        <WorksPickerModal
+          query={worksPicker.q}
+          results={worksPicker.results}
+          onQuery={queryWorks}
+          onPick={addWorkFromCatalog}
+          onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
+        />
       )}
+
+      {/* Parts picker modal — каталог склада (общий с формой правки) */}
+      <PartsPickerModal
+        open={partsPickerOpen}
+        carId={isExternal ? null : carId}
+        onPick={addPartFromCatalog}
+        onClose={() => setPartsPickerOpen(false)}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,613 @@
+/**
+ * Правка ремонта в 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 PatchOilChange,
+  type RepairDetailResponse,
+} from "@/api/repairsFeed";
+import { searchWorks, type MechWork, type PartCatalogItem } from "@/api/repairsCreate";
+import WorksPickerModal from "@/components/repairs/WorksPickerModal";
+import PartsPickerModal from "@/components/repairs/PartsPickerModal";
+import QtyStepper from "@/components/repairs/QtyStepper";
+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;
+  // null — историческая строка свободным текстом (до перевода на каталог).
+  // Такие строки сохраняются как есть и склад не трогают.
+  part_id: number | null;
+  name: string;
+  article: string | null;
+  in_stock: number | null;
+  // "" — промежуточное состояние ввода, см. QtyStepper.
+  qty: number | "";
+}
+
+interface OilState {
+  enabled: boolean;
+  // За заезд бывает несколько замен (двигатель + коробка) — храним набор
+  // типов, как в форме создания, иначе правка молча схлопнула бы вторую.
+  types: { engine: boolean; transmission: boolean };
+  next_in_km: number | null; // интервал двигателя
+}
+
+// Типы масла коробки бэкенд хранит как cvt/akpp; форме хватает одного
+// переключателя «Коробка» — конкретный тип берётся из уже сохранённого.
+function isGearboxOil(t: string): boolean {
+  return t === "transmission" || t === "cvt" || t === "akpp";
+}
+
+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, types: { engine: true, transmission: false }, next_in_km: null,
+  });
+  // Тип масла коробки как он сохранён (cvt/akpp) — чтобы правка его не меняла.
+  const [gearboxOilType, setGearboxOilType] = useState("transmission");
+  // Работавшие механики (делёж 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);
+  const [partsPickerOpen, setPartsPickerOpen] = useState(false);
+
+  const openPartsPicker = () => setPartsPickerOpen(true);
+
+  const addPartFromCatalog = (item: PartCatalogItem) => {
+    setParts((arr) => {
+      // Та же деталь уже в списке — увеличиваем количество, а не плодим строку.
+      const existing = arr.find((p) => p.part_id === item.id);
+      if (existing) return arr.map((p) => (p.part_id === item.id ? { ...p, qty: Number(p.qty || 0) + 1 } : p));
+      return [...arr, {
+        rowKey: uid(), part_id: item.id, name: item.name,
+        article: item.article, in_stock: item.in_stock, qty: 1,
+      }];
+    });
+    setPartsPickerOpen(false);
+  };
+
+  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(), part_id: p.part_id, name: p.name,
+          article: p.article, in_stock: null, qty: p.qty,
+        })));
+        const oils = d.oil_changes?.length ? d.oil_changes : d.oil_change ? [d.oil_change] : [];
+        if (oils.length > 0) {
+          const engine = oils.find((o) => !isGearboxOil(o.oil_type));
+          const gearbox = oils.find((o) => isGearboxOil(o.oil_type));
+          if (gearbox) setGearboxOilType(gearbox.oil_type);
+          setOil({
+            enabled: true,
+            types: { engine: !!engine, transmission: !!gearbox },
+            next_in_km: engine?.next_in_km ?? null,
+          });
+        }
+        // Механики: из списка работавших; 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;
+    }
+    if (oil.enabled && !oil.types.engine && !oil.types.transmission) {
+      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,
+        })),
+        // part_id обязателен для новых строк — по нему бэкенд сверяет списание
+        // со склада. Исторические строки без part_id уходят как были.
+        parts: parts.filter((p) => p.name.trim().length > 0).map((p) => ({
+          part_id: p.part_id,
+          name: p.name.trim(),
+          // Пустое поле — 1 штука: строка есть, значит деталь ставили.
+          qty: Math.max(1, Number(p.qty) || 1),
+        })),
+        // Полная замена набора: пустой список = замен не было. Пробег —
+        // главный пробег ремонта (один источник истины).
+        oil_changes: oil.enabled
+          ? ([
+              oil.types.engine
+                ? { enabled: true, mileage_at_change: mileage, next_in_km: oil.next_in_km, oil_type: "engine" }
+                : null,
+              oil.types.transmission
+                ? { enabled: true, mileage_at_change: mileage, next_in_km: 0, oil_type: gearboxOilType }
+                : null,
+            ].filter(Boolean) as PatchOilChange[])
+          : [],
+        // Список механиков отправляем, только если он непуст (иначе бэк
+        // оставит набор как есть; пустой бы вызвал 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) => (
+                  <div key={p.rowKey} className="flex items-center gap-2 text-sm">
+                    <div className="flex-1 min-w-0">
+                      <div className="truncate">{p.name}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {p.article ? `арт. ${p.article}` : p.part_id == null ? "вне каталога" : ""}
+                        {p.in_stock != null ? ` · на складе: ${p.in_stock}` : ""}
+                      </div>
+                    </div>
+                    <QtyStepper
+                      value={p.qty}
+                      onChange={(next) =>
+                        setParts((arr) => arr.map((x) => (x.rowKey === p.rowKey ? { ...x, qty: next } : x)))
+                      }
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setParts((arr) => arr.filter((x) => x.rowKey !== p.rowKey))}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+                <button
+                  onClick={openPartsPicker}
+                  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 space-y-3">
+                  <div>
+                    <Label className="text-xs">Что меняли (можно оба)</Label>
+                    <div className="mt-1 grid grid-cols-2 gap-2">
+                      {(
+                        [
+                          ["engine", "Двигатель"],
+                          ["transmission", "Коробка"],
+                        ] as ["engine" | "transmission", string][]
+                      ).map(([v, l]) => (
+                        <button
+                          type="button"
+                          key={v}
+                          onClick={() =>
+                            setOil((o) => ({ ...o, types: { ...o.types, [v]: !o.types[v] } }))
+                          }
+                          className={`rounded-md border px-2 py-2 text-sm ${
+                            oil.types[v]
+                              ? "border-primary bg-primary/10 font-medium text-primary"
+                              : "border-input"
+                          }`}
+                        >
+                          {oil.types[v] ? "✓ " : ""}
+                          {l}
+                        </button>
+                      ))}
+                    </div>
+                    {!oil.types.engine && !oil.types.transmission && (
+                      <p className="mt-1 text-xs text-destructive">Выберите хотя бы один тип масла.</p>
+                    )}
+                  </div>
+                  {oil.types.engine && (
+                    <div>
+                      <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>
+                  )}
+                  {oil.types.transmission && (
+                    <p className="text-xs text-muted-foreground">
+                      Интервал коробки задаётся по модели авто в отчёте СТО.
+                    </p>
+                  )}
+                </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: [] })}
+        />
+      )}
+
+      {/* Parts picker modal — каталог склада (общий с формой создания) */}
+      <PartsPickerModal
+        open={partsPickerOpen}
+        carId={detail?.car_id ?? null}
+        onPick={addPartFromCatalog}
+        onClose={() => setPartsPickerOpen(false)}
+      />
+
+      {/* 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 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,349 @@
+/**
+ * Карточка ремонта (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));
+}
+
+const OIL_TYPE_LABELS: Record<string, string> = {
+  engine: "Двигатель",
+  transmission: "Коробка",
+  cvt: "Вариатор",
+  akpp: "АКПП",
+};
+
+function oilTypeLabel(t: string): string {
+  return OIL_TYPE_LABELS[t] ?? "Двигатель";
+}
+
+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);
+  }, []);
+
+  // 1:N-список замен; старый бэкенд отдавал только одиночный oil_change.
+  const oils = useMemo(
+    () => (data?.oil_changes?.length ? data.oil_changes : data?.oil_change ? [data.oil_change] : []),
+    [data],
+  );
+
+  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="min-w-0">
+                        <div className="text-sm">{p.name}</div>
+                        {p.article && (
+                          <div className="text-xs text-muted-foreground truncate">
+                            арт. {p.article}
+                          </div>
+                        )}
+                      </div>
+                      <div className="text-sm font-mono whitespace-nowrap text-muted-foreground">
+                        {p.qty} шт
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {/* Замена масла — за заезд их может быть несколько (двигатель +
+                коробка). oil_change оставлен для ответов старого бэкенда. */}
+            {oils.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">
+                    Замена масла{oils.length > 1 ? ` · ${oils.length}` : ""}
+                  </div>
+                </div>
+                <div className="divide-y">
+                  {oils.map((oc, i) => (
+                    <div className="p-4" key={i}>
+                      <div className="flex gap-3 items-start">
+                        {oc.sticker_thumb_url && (
+                          <a
+                            href={oc.sticker_orig_url ?? "#"}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="flex-shrink-0"
+                          >
+                            <img
+                              src={oc.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">
+                          <div className="font-medium">{oilTypeLabel(oc.oil_type)}</div>
+                          {oc.mileage_at_change != null && (
+                            <div>
+                              <span className="text-muted-foreground">Пробег при замене: </span>
+                              <span className="font-mono">{fmt(oc.mileage_at_change)} км</span>
+                            </div>
+                          )}
+                          {oc.next_in_km != null && oc.next_in_km > 0 && (
+                            <div>
+                              <span className="text-muted-foreground">Следующая через: </span>
+                              <span className="font-mono">{fmt(oc.next_in_km)} км</span>
+                            </div>
+                          )}
+                          {oc.has_sticker && !oc.sticker_thumb_url && (
+                            <div className="text-xs text-muted-foreground pt-1">
+                              ✓ фото стикера загружено
+                            </div>
+                          )}
+                        </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

@@ -5,37 +5,78 @@
  * `created_at DESC`. Бесконечный скролл по 20. Pull-to-refresh,
  * обновление при возврате в приложение (через useRepairsFeed).
  *
+ * В шапке — поиск по госномеру, марке и модели (отдельного экрана нет:
+ * это фильтр той же ленты, со своим кэшем и своей пагинацией).
+ *
  * Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
  */
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ChevronLeft, Plus, Wrench } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { HTTPError } from "ky";
+import { ChevronLeft, Plus, Search, Wrench, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { useRepairsFeed } from "@/hooks/useRepairsFeed";
 import { formatFeedTimestamp } from "@/lib/timeFormat";
-import type { FeedItem } from "@/api/repairsFeed";
+import { getRepairsMonthStats, type FeedItem } from "@/api/repairsFeed";
+import { groupByLocalDay, formatDayLabel, fmtMoney, pluralRepairs, pluralWorks } from "@/lib/repairsFeed";
 
 export default function RepairsFeedPage() {
   const navigate = useNavigate();
+
+  // Поле ввода и запрос разведены: в сеть уходит только «устоявшееся»
+  // значение, иначе каждая буква — отдельный запрос и отдельный кэш.
+  const [queryInput, setQueryInput] = useState("");
+  const [q, setQ] = useState("");
+  useEffect(() => {
+    const t = setTimeout(() => setQ(queryInput.trim()), 200); // debounce
+    return () => clearTimeout(t);
+  }, [queryInput]);
+  const isSearching = q.length > 0;
+
   const {
     items,
     isLoading,
     isError,
+    error,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    refetch,
+    refresh,
+    isRefreshing,
     isFetching,
-  } = useRepairsFeed();
+    isPreviousResults,
+  } = useRepairsFeed(q);
+
+  const resetSearch = useCallback(() => {
+    setQueryInput("");
+    setQ("");
+  }, []);
+
+  // Сумма и количество ремонтов за текущий месяц (отдельный 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(() => {
     const el = sentinelRef.current;
-    if (!el || !hasNextPage) return;
+    if (!el || !hasNextPage || isRefreshing) return;
     const io = new IntersectionObserver(
       (entries) => {
-        if (entries[0]?.isIntersecting && !isFetchingNextPage) {
+        // Во время обновления не догружаем: refresh схлопывает ленту, скролл
+        // прижимается к новому низу, маркер попадает в кадр — и fetchNextPage
+        // отменил бы летящий запрос обновления. Человек жал бы «Обновить»
+        // сколько угодно, а новые ремонты сверху так и не появлялись бы.
+        if (entries[0]?.isIntersecting && !isFetchingNextPage && !isRefreshing) {
           void fetchNextPage();
         }
       },
@@ -43,14 +84,15 @@ export default function RepairsFeedPage() {
     );
     io.observe(el);
     return () => io.disconnect();
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isRefreshing]);
 
   // Pull-to-refresh: простой UX через тач-скролл сверху.
-  // Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refetch.
+  // Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refresh
+  // (он схлопывает ленту до первой страницы — см. useRepairsFeed).
   // Полноценный pull-to-refresh с жестом — отдельная задача.
   const handleRefresh = useCallback(() => {
-    void refetch();
-  }, [refetch]);
+    void refresh();
+  }, [refresh]);
 
   const handleAdd = () => navigate("/repairs/new");
   const handleOpen = (item: FeedItem) => navigate(`/repairs/${item.id}`);
@@ -80,11 +122,59 @@ export default function RepairsFeedPage() {
             <span className="hidden sm:inline">Добавить</span>
           </Button>
         </div>
+        {/* Поиск по ленте. Без autoFocus: экран открывают ради списка, а не
+            ради поиска — не выдёргиваем клавиатуру на каждом заходе. */}
+        <div className="px-3 pb-3">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Госномер, марка или модель…"
+              aria-label="Поиск по ремонтам"
+              value={queryInput}
+              onChange={(e) => setQueryInput(e.target.value)}
+              // Столько же, сколько принимает сервер. Меньше нельзя: на
+              // «тойота ленд крузер прадо а123вс125» поле молча перестало бы
+              // печатать, и это выглядит как залипшая клавиатура.
+              maxLength={64}
+              className="pl-8 pr-9"
+            />
+            {queryInput && (
+              <button
+                type="button"
+                onClick={resetSearch}
+                aria-label="Очистить поиск"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
       </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">
+          {isSearching ? (
+            <div className="text-sm text-muted-foreground">Результаты поиска</div>
+          ) : (
+            <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}
@@ -103,23 +193,56 @@ export default function RepairsFeedPage() {
           </div>
         )}
 
+        {/* Сбой — отдельная ветка ДО пустого состояния: «не дозвонились»
+            не должно выглядеть как «ничего не нашлось». */}
         {isError && !isLoading && (
-          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
-            Не удалось загрузить ленту ремонтов. Проверьте сеть и попробуйте снова.
+          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm space-y-2">
+            <div>{feedErrorMessage(error, isSearching)}</div>
+            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isFetching}>
+              {isFetching ? "Повторяем…" : "Повторить"}
+            </Button>
           </div>
         )}
 
-        {!isLoading && !isError && items.length === 0 && <EmptyState onAdd={handleAdd} />}
+        {/* Пока летит выдача нового запроса, показываем прошлую — приглушённой.
+            Устарело ≠ пропало: подмена списка скелетонами на каждую букву
+            читается как «всё исчезло» и мешает целиться в нужную строку. */}
+        <div
+          className={`transition-opacity ${isPreviousResults ? "opacity-50" : ""}`}
+          aria-busy={isPreviousResults}
+        >
+          {!isLoading && !isError && items.length === 0 && (
+            isSearching ? (
+              <NothingFoundState query={q} onReset={resetSearch} />
+            ) : (
+              <EmptyState onAdd={handleAdd} />
+            )
+          )}
 
-        {items.length > 0 && (
-          <ul className="space-y-2">
-            {items.map((item) => (
-              <li key={item.id}>
-                <RepairRow item={item} onOpen={() => handleOpen(item)} />
-              </li>
-            ))}
-          </ul>
-        )}
+          {items.length > 0 && (
+            <ul className="space-y-2">
+              {grouped.map((group) => (
+                <li key={group.key}>
+                  <DaySeparator
+                    dateKey={group.key}
+                    total={group.total}
+                    count={group.items.length}
+                    // При поиске дневные итоги молчат: они считаются по строкам
+                    // на экране, а это уже не «итог дня», а «итог совпадений».
+                    showTotals={!isSearching}
+                  />
+                  <ul className="space-y-2 mt-2">
+                    {group.items.map((item) => (
+                      <li key={item.id}>
+                        <RepairRow item={item} onOpen={() => handleOpen(item)} />
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
 
         <div ref={sentinelRef} aria-hidden="true" />
         {isFetchingNextPage && (
@@ -129,7 +252,7 @@ export default function RepairsFeedPage() {
         )}
         {!hasNextPage && items.length > 0 && !isFetchingNextPage && (
           <div className="text-center text-xs text-muted-foreground py-4">
-            Это все ремонты.
+            {isSearching ? "Это все совпадения." : "Это все ремонты."}
           </div>
         )}
       </main>
@@ -138,6 +261,52 @@ export default function RepairsFeedPage() {
 }
 
 
+/**
+ * Текст сбоя. «Проверьте сеть» уместно только когда до сервера не дозвонились:
+ * если сервер ответил 500, этот совет отправляет механика чинить не то —
+ * он перезагружает вайфай, а чинить нечего, надо просто позвать нас.
+ */
+function feedErrorMessage(error: unknown, isSearching: boolean): string {
+  const what = isSearching ? "выполнить поиск" : "загрузить ленту ремонтов";
+  // HTTPError = связь была, ответ пришёл — виноват сервер, а не сеть.
+  if (error instanceof HTTPError) {
+    const code = error.response.status;
+    return `Не удалось ${what}: сервер ответил ошибкой (${code}). Попробуйте позже или сообщите в поддержку.`;
+  }
+  // Всё остальное (обрыв, таймаут, самолётный режим) — ответа не было вовсе.
+  return `Не удалось ${what}: сервер не ответил. Проверьте связь и попробуйте снова.`;
+}
+
+
+// Группировка по локальной дате (VLA), форматирование сумм/склонений —
+// в @/lib/repairsFeed (покрыто юнит-тестами).
+
+function DaySeparator({
+  dateKey,
+  total,
+  count,
+  showTotals,
+}: {
+  dateKey: string;
+  total: number;
+  count: number;
+  showTotals: boolean;
+}) {
+  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" />
+      {showTotals && (
+        <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 +332,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>
@@ -173,10 +349,25 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
             Водитель: {item.driver_name}
           </div>
         )}
-        <div className="text-xs text-muted-foreground truncate">
-          Механик: {item.mechanic_name}
+        {/* Пробег справа на строке механика: так он выстраивается в колонку и
+            историю одной машины можно читать сверху вниз, не открывая каждый
+            ремонт — ровно об этом задача 4386. У импортированного архива
+            пробега почти нет, поэтому пустую подпись не рисуем: строка
+            «пробег не записан» в каждой второй строке — шум, а не польза. */}
+        <div className="flex items-baseline justify-between gap-2 text-xs text-muted-foreground">
+          <span className="truncate">Механик: {item.mechanic_name}</span>
+          {item.mileage != null && (
+            <span className="flex-shrink-0 tabular-nums">
+              {item.mileage.toLocaleString("ru-RU")} км
+            </span>
+          )}
+        </div>
+        <div className="flex items-baseline justify-between gap-2">
+          <WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
+          <div className="text-sm font-semibold tabular-nums flex-shrink-0">
+            {fmtMoney(item.works_total || 0)} ₽
+          </div>
         </div>
-        <WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
       </div>
     </button>
   );
@@ -196,14 +387,26 @@ 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 NothingFoundState({ query, onReset }: { query: string; onReset: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">
+      <div className="rounded-full bg-muted p-4">
+        <Search className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <div className="space-y-1">
+        <h2 className="text-base font-semibold">Ничего не найдено</h2>
+        <p className="text-sm text-muted-foreground max-w-xs">
+          По запросу «{query}» ремонтов нет. Проверьте номер или поищите по марке
+          и модели.
+        </p>
+      </div>
+      <Button variant="outline" onClick={onReset}>
+        Сбросить поиск
+      </Button>
+    </div>
+  );
 }
 
 

mechanic-pwa/frontend/src/pages/warehouse/ReceiptDetailPage.tsx

@@ -0,0 +1,134 @@
+/**
+ * Карточка проведённого прихода — только чтение.
+ *
+ * Накладная — исторический документ: имена и артикулы показываем снимками
+ * на момент приёмки, а не текущими из каталога. Правки нет намеренно:
+ * проведённый приход уже стал партиями и движениями, и «поправить» его
+ * означало бы разъехаться с журналом. Ошиблись — удаление/сторно делается
+ * в CRM, где видно все последствия.
+ *
+ * Единственное, что берётся из «сегодня» — сколько от каждой партии ещё
+ * лежит на складе: по нему сразу видно, что уже разошлось.
+ */
+import { useNavigate, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { fmtMoney } from "@/lib/repairsFeed";
+import { getReceipt } from "@/api/warehouse";
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return new Intl.DateTimeFormat("ru-RU", {
+    day: "2-digit", month: "long", year: "numeric",
+  }).format(d);
+}
+
+export default function ReceiptDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ["wh-receipt", Number(id)],
+    queryFn: () => getReceipt(Number(id)),
+    staleTime: 60_000,
+  });
+
+  const r = query.data;
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={() => navigate("/wh/receiving")} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">Приход</h1>
+          <span className="w-16" />
+        </div>
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-4 space-y-4">
+        {query.isLoading && <div className="h-24 rounded-lg bg-muted animate-pulse" />}
+
+        {query.isError && (
+          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
+            Не удалось загрузить приход.
+          </div>
+        )}
+
+        {r && (
+          <>
+            <section className="rounded-lg border bg-card p-3 space-y-1">
+              <div className="text-base font-semibold">{r.supplier_name || "Поставщик не указан"}</div>
+              <div className="text-sm text-muted-foreground">
+                {r.doc_number ? `Накладная ${r.doc_number} · ` : ""}
+                {fmtDate(r.doc_date)}
+              </div>
+              {r.posted_by_name && (
+                <div className="text-xs text-muted-foreground">Провёл: {r.posted_by_name}</div>
+              )}
+              {r.comment && <div className="text-xs text-muted-foreground italic">{r.comment}</div>}
+              <div className="pt-2 flex items-baseline justify-between border-t mt-2">
+                <span className="text-sm text-muted-foreground">
+                  Позиций: {r.lines.length}
+                </span>
+                <span className="text-lg font-semibold tabular-nums">
+                  {fmtMoney(Number(r.total_amount))} ₽
+                </span>
+              </div>
+            </section>
+
+            <section className="rounded-lg border bg-card overflow-hidden">
+              <div className="px-3 py-2 border-b bg-muted/40 text-sm font-semibold">Состав</div>
+              <ul className="divide-y">
+                {r.lines.map((ln) => (
+                  <li key={ln.batch_id} className="p-3 flex items-start gap-3">
+                    {ln.thumb_url ? (
+                      <img
+                        src={ln.thumb_url}
+                        alt=""
+                        loading="lazy"
+                        className="h-10 w-10 rounded border object-cover flex-shrink-0"
+                      />
+                    ) : (
+                      <div className="h-10 w-10 rounded border bg-muted flex-shrink-0" />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm truncate">{ln.part_name}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {ln.article ? `арт. ${ln.article}` : "без артикула"}
+                        {ln.place_code ? ` · ${ln.place_code}` : ""}
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-0.5">
+                        {ln.qty} × {fmtMoney(Number(ln.unit_price))} ₽
+                        {" · "}
+                        <RemainHint qty={ln.qty} remaining={ln.qty_remaining} />
+                      </div>
+                    </div>
+                    <div className="text-sm font-medium whitespace-nowrap tabular-nums">
+                      {fmtMoney(Number(ln.amount))} ₽
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <p className="text-xs text-muted-foreground px-1">
+              Приход уже проведён — правка и удаление только в CRM, чтобы не
+              разошлись остатки и журнал.
+            </p>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
+
+function RemainHint({ qty, remaining }: { qty: number; remaining: number }) {
+  if (remaining === qty) return <span>лежит целиком</span>;
+  if (remaining <= 0) return <span>разошлось полностью</span>;
+  return <span>осталось {remaining}</span>;
+}

mechanic-pwa/frontend/src/pages/warehouse/ReceivingDraftPage.tsx

@@ -0,0 +1,380 @@
+/**
+ * Проверка распознанной накладной перед проведением.
+ *
+ * Распознавание почти никогда не идеально: путается артикул, съезжает цена,
+ * поставщик может быть новым. Поэтому экран построен как сверка — фото
+ * документа сверху всегда под рукой, а каждая строка правится на месте.
+ *
+ * Приход создаётся только по кнопке «Провести»: до неё черновик ничего не
+ * меняет на складе, и его можно спокойно бросить.
+ */
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { ChevronLeft, Loader2, Plus, Trash2, X } 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 { fmtMoney } from "@/lib/repairsFeed";
+import {
+  addDraftLine,
+  createDraftSupplier,
+  deleteDraftLine,
+  getDraft,
+  getPlaces,
+  getSuppliers,
+  patchDraft,
+  patchDraftLine,
+  postDraft,
+  rejectDraft,
+  type Draft,
+} from "@/api/warehouse";
+
+function lineSum(qty: number, price: number | string): number {
+  return qty * Number(price || 0);
+}
+
+export default function ReceivingDraftPage() {
+  const { id } = useParams<{ id: string }>();
+  const draftId = Number(id);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [placeId, setPlaceId] = useState<number | null>(null);
+  const [lightbox, setLightbox] = useState<string | null>(null);
+
+  const placesQuery = useQuery({ queryKey: ["wh-places"], queryFn: getPlaces, staleTime: 300_000 });
+  const suppliersQuery = useQuery({
+    queryKey: ["wh-suppliers"],
+    queryFn: getSuppliers,
+    staleTime: 300_000,
+  });
+
+  useEffect(() => {
+    if (!draftId) return;
+    setLoading(true);
+    getDraft(draftId)
+      .then(setDraft)
+      .catch((e: Error) => toast.error(e.message || "Не удалось загрузить черновик"))
+      .finally(() => setLoading(false));
+  }, [draftId]);
+
+  // Обёртка над правками: сервер всегда возвращает черновик целиком, поэтому
+  // локально ничего не пересчитываем — берём его ответ как истину.
+  const mutate = async (fn: () => Promise<Draft>) => {
+    setBusy(true);
+    try {
+      setDraft(await fn());
+    } catch (e) {
+      toast.error((e as Error).message || "Не удалось сохранить");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const total = (draft?.lines ?? []).reduce((s, l) => s + lineSum(l.qty, l.unit_price), 0);
+  const unmatched = (draft?.lines ?? []).filter((l) => !l.matched_part_id).length;
+
+  const onPost = async () => {
+    if (!draft) return;
+    if (!draft.supplier_id) {
+      toast.error("Укажите поставщика — без него приход не провести");
+      return;
+    }
+    if (draft.lines.length === 0) {
+      toast.error("В накладной нет позиций");
+      return;
+    }
+    setBusy(true);
+    try {
+      const r = await postDraft(draft.id, { place_id: placeId, doc_date: draft.order_date });
+      toast.success(`Приход проведён · позиций ${r.lines}`);
+      // Списки на входе в раздел кэшируются — после проведения они устарели.
+      await queryClient.invalidateQueries({ queryKey: ["wh-drafts"] });
+      await queryClient.invalidateQueries({ queryKey: ["wh-receipts"] });
+      // Сразу показываем, что получилось, — карточкой прихода.
+      navigate(`/wh/receipts/${r.receipt_id}`, { replace: true });
+    } catch (e) {
+      toast.error((e as Error).message || "Не удалось провести приход");
+      setBusy(false);
+    }
+  };
+
+  const onReject = async () => {
+    if (!draft) return;
+    if (!window.confirm("Отклонить накладную? Остатки не изменятся, черновик уйдёт из списка.")) return;
+    setBusy(true);
+    try {
+      await rejectDraft(draft.id);
+      toast.success("Черновик отклонён");
+      navigate("/wh/receiving", { replace: true });
+    } catch (e) {
+      toast.error((e as Error).message || "Не удалось отклонить");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col pb-24">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={() => navigate("/wh/receiving")} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">Проверка накладной</h1>
+          <span className="w-16" />
+        </div>
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-4 space-y-5">
+        {loading && <div className="h-24 rounded-lg bg-muted animate-pulse" />}
+
+        {draft && (
+          <>
+            {/* Фото документа — сверять глазами по ходу правки */}
+            {draft.photo_urls.length > 0 && (
+              <div className="flex gap-2 overflow-x-auto pb-1">
+                {draft.photo_urls.map((u) => (
+                  <button key={u} type="button" onClick={() => setLightbox(u)} className="flex-shrink-0">
+                    <img
+                      src={u}
+                      alt="Накладная"
+                      loading="lazy"
+                      className="h-28 w-auto rounded-md border bg-muted object-cover"
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Шапка документа */}
+            <section className="rounded-lg border bg-card p-3 space-y-3">
+              <div>
+                <Label className="text-xs">Поставщик</Label>
+                {draft.supplier_id ? (
+                  <select
+                    className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
+                    value={draft.supplier_id}
+                    disabled={busy}
+                    onChange={(e) => void mutate(() =>
+                      patchDraft(draft.id, { supplier_id: Number(e.target.value) }))}
+                  >
+                    {(suppliersQuery.data ?? []).map((s) => (
+                      <option key={s.id} value={s.id}>{s.name}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <div className="mt-1 space-y-2">
+                    <div className="text-sm text-destructive">
+                      Не определён{draft.legal_entity ? ` — в документе «${draft.legal_entity}»` : ""}
+                    </div>
+                    <div className="flex gap-2">
+                      <select
+                        className="flex-1 rounded-md border bg-background px-3 py-2 text-sm"
+                        defaultValue=""
+                        disabled={busy}
+                        onChange={(e) => e.target.value && void mutate(() =>
+                          patchDraft(draft.id, { supplier_id: Number(e.target.value) }))}
+                      >
+                        <option value="" disabled>Выбрать из списка…</option>
+                        {(suppliersQuery.data ?? []).map((s) => (
+                          <option key={s.id} value={s.id}>{s.name}</option>
+                        ))}
+                      </select>
+                      {draft.legal_entity && (
+                        <Button
+                          variant="outline"
+                          disabled={busy}
+                          onClick={() => void mutate(() =>
+                            createDraftSupplier(draft.id, {
+                              name: draft.legal_entity!, legal_entity: draft.legal_entity,
+                            }))}
+                        >
+                          Завести
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-xs">Номер документа</Label>
+                  <Input
+                    defaultValue={draft.ext_order_id}
+                    disabled={busy}
+                    onBlur={(e) => e.target.value !== draft.ext_order_id &&
+                      void mutate(() => patchDraft(draft.id, { doc_number: e.target.value }))}
+                  />
+                </div>
+                <div>
+                  <Label className="text-xs">Дата</Label>
+                  <Input
+                    type="date"
+                    defaultValue={draft.order_date ?? ""}
+                    disabled={busy}
+                    onChange={(e) => void mutate(() =>
+                      patchDraft(draft.id, { order_date: e.target.value || null }))}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Label className="text-xs">Зона хранения (куда кладём)</Label>
+                <select
+                  className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
+                  value={placeId ?? ""}
+                  onChange={(e) => setPlaceId(e.target.value ? Number(e.target.value) : null)}
+                >
+                  <option value="">Без зоны</option>
+                  {(placesQuery.data ?? []).map((p) => (
+                    <option key={p.id} value={p.id}>{p.code} — {p.name}</option>
+                  ))}
+                </select>
+              </div>
+            </section>
+
+            {/* Позиции */}
+            <section className="space-y-2">
+              <div className="flex items-baseline justify-between">
+                <h2 className="text-sm font-semibold">Позиции · {draft.lines.length}</h2>
+                {unmatched > 0 && (
+                  <span className="text-xs text-amber-700">
+                    новых карточек: {unmatched}
+                  </span>
+                )}
+              </div>
+
+              {draft.lines.map((ln) => (
+                <div key={ln.id} className="rounded-lg border bg-card p-3 space-y-2">
+                  <div className="flex items-start gap-2">
+                    {ln.thumb_url && (
+                      <img
+                        src={ln.thumb_url}
+                        alt=""
+                        loading="lazy"
+                        className="h-10 w-10 rounded border object-cover flex-shrink-0"
+                      />
+                    )}
+                    <Input
+                      defaultValue={ln.name}
+                      disabled={busy}
+                      className="flex-1"
+                      onBlur={(e) => e.target.value !== ln.name &&
+                        void mutate(() => patchDraftLine(draft.id, ln.id, { name: e.target.value }))}
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      disabled={busy}
+                      onClick={() => void mutate(() => deleteDraftLine(draft.id, ln.id))}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-3 gap-2">
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">Артикул</Label>
+                      <Input
+                        defaultValue={ln.article ?? ""}
+                        disabled={busy}
+                        onBlur={(e) => (e.target.value || null) !== ln.article &&
+                          void mutate(() => patchDraftLine(draft.id, ln.id, { article: e.target.value || null }))}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">Кол-во</Label>
+                      <Input
+                        type="number"
+                        inputMode="numeric"
+                        min={1}
+                        defaultValue={ln.qty}
+                        disabled={busy}
+                        onBlur={(e) => Number(e.target.value) !== ln.qty &&
+                          void mutate(() => patchDraftLine(draft.id, ln.id, {
+                            qty: Math.max(1, Number(e.target.value) || 1),
+                          }))}
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[11px] text-muted-foreground">Цена</Label>
+                      <Input
+                        type="number"
+                        inputMode="decimal"
+                        min={0}
+                        defaultValue={Number(ln.unit_price)}
+                        disabled={busy}
+                        onBlur={(e) => Number(e.target.value) !== Number(ln.unit_price) &&
+                          void mutate(() => patchDraftLine(draft.id, ln.id, {
+                            unit_price: Number(e.target.value) || 0,
+                          }))}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={ln.matched_part_id ? "text-muted-foreground" : "text-amber-700"}>
+                      {ln.matched_part_id
+                        ? `на складе: ${ln.matched_part_name ?? "карточка найдена"}`
+                        : "новая карточка — заведётся при проведении"}
+                    </span>
+                    <span className="font-medium">
+                      {fmtMoney(lineSum(ln.qty, ln.unit_price))} ₽
+                    </span>
+                  </div>
+                </div>
+              ))}
+
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => void mutate(() =>
+                  addDraftLine(draft.id, { name: "Новая позиция", qty: 1, unit_price: 0 }))}
+                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>
+            </section>
+
+            <Button variant="ghost" onClick={onReject} disabled={busy} className="w-full text-destructive">
+              Отклонить накладную
+            </Button>
+          </>
+        )}
+      </main>
+
+      {/* Итого + проведение */}
+      {draft && (
+        <footer className="fixed bottom-0 left-0 right-0 border-t bg-background p-3 z-10">
+          <div className="container max-w-2xl flex items-center gap-3">
+            <div className="flex-1">
+              <div className="text-xs text-muted-foreground">Итого по накладной</div>
+              <div className="text-lg font-semibold tabular-nums">{fmtMoney(total)} ₽</div>
+            </div>
+            <Button onClick={onPost} disabled={busy || draft.lines.length === 0} className="flex-1">
+              {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : "Провести"}
+            </Button>
+          </div>
+        </footer>
+      )}
+
+      {lightbox && (
+        <div className="fixed inset-0 z-50 bg-black/90 flex flex-col" onClick={() => setLightbox(null)}>
+          <div className="flex justify-end p-3">
+            <button className="text-white p-2" aria-label="Закрыть">
+              <X className="h-6 w-6" />
+            </button>
+          </div>
+          <div className="flex-1 flex items-center justify-center p-3">
+            <img src={lightbox} alt="Накладная" className="max-w-full max-h-full object-contain" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/ReceivingPage.tsx

@@ -0,0 +1,193 @@
+/**
+ * Приёмка товара — точка входа раздела.
+ *
+ * Главное действие вынесено наверх и занимает пол-экрана: снять накладную
+ * камерой. Всё остальное (черновики на проверке, последние приходы) — списки
+ * под ним. Приёмка делается стоя у коробок с телефоном в одной руке, поэтому
+ * кнопки крупные, а информации на строку минимум.
+ */
+import { useCallback, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Camera, ChevronLeft, ChevronRight, FileText, Loader2, PackageCheck } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { downscaleImage } from "@/lib/imageDownscale";
+import { fmtMoney } from "@/lib/repairsFeed";
+import { getDrafts, getReceipts, scanInvoice } from "@/api/warehouse";
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return new Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "long" }).format(d);
+}
+
+export default function ReceivingPage() {
+  const navigate = useNavigate();
+  const [scanning, setScanning] = useState(false);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+
+  const draftsQuery = useQuery({
+    queryKey: ["wh-drafts"],
+    queryFn: () => getDrafts("pending"),
+    staleTime: 15_000,
+  });
+  const receiptsQuery = useQuery({
+    queryKey: ["wh-receipts"],
+    queryFn: () => getReceipts(20),
+    staleTime: 60_000,
+  });
+
+  const onFiles = useCallback(
+    async (files: FileList | null) => {
+      if (!files || files.length === 0) return;
+      setScanning(true);
+      try {
+        // Накладная бывает на 2-3 листа — снимаем всё разом, распознаём как
+        // один документ (модель видит все страницы в одном запросе).
+        const prepared = await Promise.all(
+          Array.from(files).slice(0, 6).map((f) => downscaleImage(f)),
+        );
+        const draft = await scanInvoice(prepared);
+        toast.success(`Распознано позиций: ${draft.lines.length}`);
+        navigate(`/wh/receiving/${draft.id}`);
+      } catch (e) {
+        toast.error((e as Error).message || "Не удалось распознать накладную");
+      } finally {
+        setScanning(false);
+        if (fileRef.current) fileRef.current.value = "";
+      }
+    },
+    [navigate],
+  );
+
+  const drafts = draftsQuery.data?.items ?? [];
+  const receipts = receiptsQuery.data?.items ?? [];
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={() => navigate("/")} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">Приёмка</h1>
+          <span className="w-16" />
+        </div>
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-4 space-y-6">
+        {/* Главное действие */}
+        <label
+          className={`block rounded-xl border-2 border-dashed p-6 text-center ${
+            scanning ? "opacity-60 pointer-events-none" : "cursor-pointer hover:bg-accent/40"
+          }`}
+        >
+          <div className="flex flex-col items-center gap-2">
+            {scanning ? (
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            ) : (
+              <Camera className="h-8 w-8 text-muted-foreground" />
+            )}
+            <div className="font-semibold">
+              {scanning ? "Распознаём накладную…" : "Снять накладную или чек"}
+            </div>
+            <div className="text-xs text-muted-foreground max-w-xs">
+              {scanning
+                ? "Это занимает до минуты — не закрывайте экран"
+                : "Сфотографируйте документ целиком. Несколько листов — снимите подряд, они уйдут одним документом."}
+            </div>
+          </div>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            multiple
+            className="hidden"
+            disabled={scanning}
+            onChange={(e) => void onFiles(e.target.files)}
+          />
+        </label>
+
+        {/* Черновики на проверке */}
+        <section>
+          <h2 className="text-sm font-semibold text-muted-foreground mb-2">
+            На проверке{drafts.length > 0 ? ` · ${drafts.length}` : ""}
+          </h2>
+          {draftsQuery.isLoading ? (
+            <div className="h-16 rounded-lg bg-muted animate-pulse" />
+          ) : drafts.length === 0 ? (
+            <div className="text-sm text-muted-foreground">
+              Нечего проверять — все накладные проведены.
+            </div>
+          ) : (
+            <ul className="space-y-2">
+              {drafts.map((d) => (
+                <li key={d.id}>
+                  <button
+                    type="button"
+                    onClick={() => navigate(`/wh/receiving/${d.id}`)}
+                    className="w-full rounded-lg border bg-card p-3 text-left hover:bg-accent/40 flex items-center gap-3"
+                  >
+                    <FileText className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">
+                        {d.supplier_name || d.legal_entity || "Поставщик не определён"}
+                      </div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {d.ext_order_id} · {fmtDate(d.order_date)} · позиций {d.lines.length}
+                      </div>
+                    </div>
+                    <div className="text-sm font-medium whitespace-nowrap">
+                      {d.total_price != null ? `${fmtMoney(Number(d.total_price))} ₽` : ""}
+                    </div>
+                    <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* Последние приходы */}
+        <section>
+          <h2 className="text-sm font-semibold text-muted-foreground mb-2">Последние приходы</h2>
+          {receiptsQuery.isLoading ? (
+            <div className="h-16 rounded-lg bg-muted animate-pulse" />
+          ) : receipts.length === 0 ? (
+            <div className="text-sm text-muted-foreground">Приходов пока нет.</div>
+          ) : (
+            <ul className="space-y-2">
+              {receipts.map((r) => (
+                <li key={r.id}>
+                  <button
+                    type="button"
+                    onClick={() => navigate(`/wh/receipts/${r.id}`)}
+                    className="w-full rounded-lg border bg-card p-3 text-left hover:bg-accent/40 flex items-center gap-3"
+                  >
+                    <PackageCheck className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{r.supplier_name || "—"}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {r.doc_number ? `${r.doc_number} · ` : ""}
+                        {fmtDate(r.doc_date)} · позиций {r.lines_count}
+                        {r.posted_by_name ? ` · ${r.posted_by_name}` : ""}
+                      </div>
+                    </div>
+                    <div className="text-sm font-medium whitespace-nowrap">
+                      {fmtMoney(Number(r.total_amount))} ₽
+                    </div>
+                    <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/StocktakePage.tsx

@@ -0,0 +1,196 @@
+/**
+ * Инвентаризация — список сессий и запуск новой.
+ *
+ * Пересчёт делают по зонам (стеллаж за стеллажом), поэтому запуск сразу
+ * спрашивает зону: «весь склад одной сессией» — это несколько сотен строк,
+ * которые никто не обойдёт за раз.
+ */
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, ChevronRight, ClipboardList, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { fmtMoney } from "@/lib/repairsFeed";
+import { createStocktake, getPlaces, getStocktakes, type Stocktake } from "@/api/warehouse";
+
+function fmtDateTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return new Intl.DateTimeFormat("ru-RU", {
+    day: "2-digit", month: "long", hour: "2-digit", minute: "2-digit",
+  }).format(d);
+}
+
+export default function StocktakePage() {
+  const navigate = useNavigate();
+  const [creating, setCreating] = useState(false);
+  const [newOpen, setNewOpen] = useState(false);
+  const [placeId, setPlaceId] = useState<number | null>(null);
+
+  const listQuery = useQuery({
+    queryKey: ["wh-stocktakes"],
+    queryFn: getStocktakes,
+    staleTime: 15_000,
+  });
+  const placesQuery = useQuery({ queryKey: ["wh-places"], queryFn: getPlaces, staleTime: 300_000 });
+
+  const start = async () => {
+    setCreating(true);
+    try {
+      const st = await createStocktake({ place_id: placeId });
+      if (st.lines_total === 0) {
+        toast.message("В этой зоне нечего считать — сессия пустая");
+      }
+      navigate(`/wh/stocktake/${st.id}`);
+    } catch (e) {
+      toast.error((e as Error).message || "Не удалось начать инвентаризацию");
+      setCreating(false);
+    }
+  };
+
+  const items = listQuery.data?.items ?? [];
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={() => navigate("/")} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">Инвентаризация</h1>
+          <Button variant="default" size="sm" onClick={() => setNewOpen(true)}>
+            <Plus className="h-4 w-4 mr-1" />
+            Начать
+          </Button>
+        </div>
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-4 space-y-3">
+        {listQuery.isLoading && <div className="h-20 rounded-lg bg-muted animate-pulse" />}
+
+        {!listQuery.isLoading && items.length === 0 && (
+          <div className="text-center py-16 px-4 space-y-3">
+            <div className="inline-flex rounded-full bg-muted p-4">
+              <ClipboardList className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <h2 className="text-base font-semibold">Пересчётов ещё не было</h2>
+            <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+              Начните с одной зоны — приложение соберёт список того, что там числится.
+            </p>
+            <Button onClick={() => setNewOpen(true)}>
+              <Plus className="h-4 w-4 mr-1" /> Начать пересчёт
+            </Button>
+          </div>
+        )}
+
+        <ul className="space-y-2">
+          {items.map((st) => (
+            <li key={st.id}>
+              <button
+                type="button"
+                onClick={() => navigate(`/wh/stocktake/${st.id}`)}
+                className="w-full rounded-lg border bg-card p-3 text-left hover:bg-accent/40"
+              >
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">
+                      {st.place_code ? `Зона ${st.place_code}` : "Весь склад"}
+                      <StatusChip status={st.status} />
+                    </div>
+                    <div className="text-xs text-muted-foreground truncate">
+                      {fmtDateTime(st.started_at)}
+                      {st.author_name ? ` · ${st.author_name}` : ""}
+                    </div>
+                  </div>
+                  <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                </div>
+                <Progress st={st} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      </main>
+
+      {/* Лист выбора зоны */}
+      {newOpen && (
+        <div className="fixed inset-0 z-50 bg-black/50 flex items-end" onClick={() => setNewOpen(false)}>
+          <div
+            className="bg-background w-full rounded-t-xl p-4 space-y-3"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-base font-semibold">Что пересчитываем</h3>
+            <div>
+              <Label className="text-xs">Зона хранения</Label>
+              <select
+                className="mt-1 w-full rounded-md border bg-background px-3 py-2 text-sm"
+                value={placeId ?? ""}
+                onChange={(e) => setPlaceId(e.target.value ? Number(e.target.value) : null)}
+              >
+                <option value="">Весь склад (долго)</option>
+                {(placesQuery.data ?? []).map((p) => (
+                  <option key={p.id} value={p.id}>{p.code} — {p.name}</option>
+                ))}
+              </select>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Список соберётся из того, что числится в зоне. Найденное сверх списка
+                добавляется прямо во время обхода.
+              </p>
+            </div>
+            <div className="flex gap-2 pt-1">
+              <Button variant="outline" onClick={() => setNewOpen(false)} className="flex-1">
+                Отмена
+              </Button>
+              <Button onClick={start} disabled={creating} className="flex-1">
+                {creating ? "Готовим…" : "Начать"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusChip({ status }: { status: string }) {
+  const done = status !== "draft";
+  return (
+    <span
+      className={`ml-2 align-middle rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
+        done ? "bg-muted text-muted-foreground" : "bg-primary/10 text-primary"
+      }`}
+    >
+      {done ? "проведена" : "идёт"}
+    </span>
+  );
+}
+
+function Progress({ st }: { st: Stocktake }) {
+  const pct = st.lines_total > 0 ? Math.round((st.lines_counted / st.lines_total) * 100) : 0;
+  return (
+    <div className="mt-2 space-y-1">
+      <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+        <div className="h-full bg-primary" style={{ width: `${pct}%` }} />
+      </div>
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>
+          посчитано {st.lines_counted} из {st.lines_total}
+        </span>
+        <span className="space-x-2">
+          {st.shortage_qty > 0 && (
+            <span className="text-destructive">
+              −{st.shortage_qty} ({fmtMoney(Number(st.shortage_amount))} ₽)
+            </span>
+          )}
+          {st.surplus_qty > 0 && (
+            <span className="text-emerald-700">
+              +{st.surplus_qty} ({fmtMoney(Number(st.surplus_amount))} ₽)
+            </span>
+          )}
+        </span>
+      </div>
+    </div>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/StocktakeResult.tsx

@@ -0,0 +1,301 @@
+/**
+ * Итоги проведённой инвентаризации — только просмотр.
+ *
+ * Проведённая сессия перестаёт быть рабочим списком и становится документом:
+ * расхождения уже ушли движениями в журнал склада, менять нечего. Раньше на
+ * этом месте показывался рабочий список с фильтром «только непосчитанные» —
+ * то есть ровно то, чего человек НЕ делал, а сам итог был скрыт.
+ *
+ * Вид держим в родстве с карточкой прихода (ReceiptDetailPage): шапка
+ * документа, секции-списки, объяснительная сноска внизу.
+ *
+ * Строки разложены по исходам, а не сплошняком: на пересчёте всего склада их
+ * бывают сотни, и «сошлось» с «не дошли» свёрнуты числом — открываются по
+ * желанию. Группы без строк не показываются вовсе.
+ */
+import { useMemo, useState } from "react";
+import { AlertTriangle, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { fmtMoney } from "@/lib/repairsFeed";
+import type { StocktakeDetail, StocktakeLine } from "@/api/warehouse";
+import {
+  GROUPS,
+  buildSummary,
+  countPhrase,
+  lineAmount,
+  pluralPositions,
+  reasonLabel,
+  type GroupMeta,
+  type MoneyBlock,
+} from "./stocktakeSummary";
+
+function fmtDateTime(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return 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 StocktakeResult({
+  st, onBack,
+}: {
+  st: StocktakeDetail;
+  onBack: () => void;
+}) {
+  const s = useMemo(() => buildSummary(st.lines), [st.lines]);
+  const groups = s.groups;
+  const notCounted = s.walked.left;
+
+  // Счётчики шапки: бэкенд отдаёт только «всего/посчитано», разбивку по
+  // исходам считаем сами.
+  const chips: { label: string; count: number }[] = [
+    { label: "сошлось", count: groups.match.length },
+    { label: "не нашли", count: groups.missing.length },
+    { label: "не хватает", count: groups.shortage.length },
+    { label: "излишек", count: groups.surplus.length },
+    { label: "находок", count: groups.find.length },
+    { label: "не дошли", count: notCounted },
+  ].filter((c) => c.count > 0);
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={onBack} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">Итоги пересчёта</h1>
+          <span className="w-16" />
+        </div>
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-4 space-y-4">
+        <section className="rounded-lg border bg-card p-3 space-y-1">
+          <div className="text-base font-semibold">
+            {st.place_code ? `Зона ${st.place_code}` : "Весь склад"}
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Завершён {fmtDateTime(st.finished_at ?? st.started_at)}
+          </div>
+          {/* author_name — кто ОТКРЫЛ сессию; отдельного «кто провёл» бэкенд не
+              отдаёт, поэтому и подписываем честно. */}
+          {st.author_name && (
+            <div className="text-xs text-muted-foreground">Пересчёт вёл: {st.author_name}</div>
+          )}
+          {st.comment && <div className="text-xs text-muted-foreground italic">{st.comment}</div>}
+
+          <div className="pt-2 border-t mt-2 space-y-2">
+            {/* Считаем по строкам, а не по lines_counted/lines_total: те включают
+                находки и завышают долю обойдённого, противореча чипу «не дошли». */}
+            <div className="text-sm">
+              Обошли <span className="tabular-nums">{s.walked.done}</span> из{" "}
+              <span className="tabular-nums">{s.walked.total}</span> {pluralPositions(s.walked.total)}
+              {s.finds > 0 && (
+                <span className="text-muted-foreground">
+                  {" "}· сверх списка нашли <span className="tabular-nums">{s.finds}</span>
+                </span>
+              )}
+            </div>
+            {chips.length > 0 && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                {chips.map((c) => (
+                  <span key={c.label}>
+                    {c.label} <span className="font-semibold tabular-nums">{c.count}</span>
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <MoneyRow label="Недостача" block={s.shortage} bad />
+            {/* Не просто «Излишек»: ниже есть секция с таким названием, а сюда
+                входят ещё и находки. Одноимённость заставляет сверять шапку
+                с секцией и не сходиться — ровно то, что уже лечили слева. */}
+            <MoneyRow label="Излишек и находки" block={s.surplus} />
+
+            <p className="text-xs text-muted-foreground">
+              Суммы — по закупочной цене партии.
+            </p>
+            {s.unpriced > 0 && (
+              <p className="text-xs text-destructive">
+                У {s.unpriced} {pluralPositions(s.unpriced)} с расхождением нет цены партии —
+                в суммы они не вошли, реальные деньги больше.
+              </p>
+            )}
+          </div>
+        </section>
+
+        {st.lines.length === 0 ? (
+          <div className="py-10 text-center text-sm text-muted-foreground">
+            В этой сессии не было ни одной позиции — считать было нечего.
+          </div>
+        ) : (
+          <>
+            {s.headline && (
+              <div
+                className={`rounded-md border p-3 text-sm flex items-start gap-2 ${
+                  s.headline.tone === "warn"
+                    ? "border-destructive/40 bg-destructive/5"
+                    : "bg-muted/40"
+                }`}
+              >
+                {s.headline.tone === "warn" ? (
+                  <AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0 text-destructive" />
+                ) : (
+                  <CheckCircle2 className="h-4 w-4 mt-0.5 flex-shrink-0 text-muted-foreground" />
+                )}
+                <span>{s.headline.text}</span>
+              </div>
+            )}
+
+            {GROUPS.map((meta) =>
+              groups[meta.key].length > 0 ? (
+                <Group key={meta.key} meta={meta} lines={groups[meta.key]} />
+              ) : null,
+            )}
+
+            {notCounted > 0 && (
+              <p className="text-xs text-muted-foreground px-1">
+                Непосчитанные позиции при проведении пропущены: остатки по ним
+                остались прежними, ничего не списывалось.
+              </p>
+            )}
+          </>
+        )}
+
+        <p className="text-xs text-muted-foreground px-1">
+          Инвентаризация проведена — расхождения уже стали движениями склада.
+          Правка только в CRM, чтобы не разошлись остатки и журнал.
+        </p>
+      </main>
+    </div>
+  );
+}
+
+/**
+ * Строка денег в шапке. Слагаемые подписаны названиями групп с этого же экрана
+ * — человек должен уметь сверить шапку с секциями ниже и сойтись.
+ */
+function MoneyRow({ label, block, bad }: { label: string; block: MoneyBlock; bad?: boolean }) {
+  const parts = block.parts.filter((p) => p.totals.qty > 0);
+
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-baseline justify-between gap-3 text-sm">
+        <span className="text-muted-foreground">{label}</span>
+        <span
+          className={`font-semibold tabular-nums ${bad && block.total.qty ? "text-destructive" : ""}`}
+        >
+          {block.total.qty} шт · {fmtMoney(block.total.amount)} ₽
+        </span>
+      </div>
+      {/* Расшифровку показываем не только когда слагаемых несколько, но и когда
+          единственное называется иначе, чем строка шапки. Иначе самый частый
+          случай — только находки, без обычного излишка — оставался без
+          объяснения: в шапке сумма есть, а секции с таким названием ниже нет. */}
+      {(parts.length > 1 ||
+        (parts.length === 1 && parts[0].title.toLowerCase() !== label.toLowerCase())) && (
+        <div className="text-xs text-muted-foreground text-right">
+          {parts
+            .map((p) => `${p.title.toLowerCase()} ${fmtMoney(p.totals.amount)} ₽`)
+            .join(" + ")}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Сколько строк рисуем за раз — пересчёт всего склада это сотни позиций. */
+const PAGE = 100;
+
+function Group({ meta, lines }: { meta: GroupMeta; lines: StocktakeLine[] }) {
+  // Свёрнутая группа не рендерит строки вовсе — на пересчёте всего склада
+  // «сошлось» это сотни элементов, и открывать их без нужды незачем.
+  const [open, setOpen] = useState(!meta.collapsed);
+  const [limit, setLimit] = useState(PAGE);
+  const shown = lines.slice(0, limit);
+  const rest = lines.length - shown.length;
+
+  return (
+    <section className="rounded-lg border bg-card overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={`w-full px-3 py-2 bg-muted/40 flex items-center gap-2 text-left ${open ? "border-b" : ""}`}
+      >
+        {open
+          ? <ChevronDown className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+          : <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />}
+        <span className="flex-1 min-w-0">
+          <span className="block text-sm font-semibold">
+            {meta.title} · <span className="tabular-nums">{lines.length}</span>
+          </span>
+          {meta.note && (
+            <span className="block text-xs font-normal text-muted-foreground">{meta.note}</span>
+          )}
+        </span>
+      </button>
+
+      {open && (
+        <>
+          <ul className="divide-y">
+            {shown.map((l) => <LineItem key={l.id} line={l} />)}
+          </ul>
+          {rest > 0 && (
+            <button
+              type="button"
+              onClick={() => setLimit((v) => v + PAGE)}
+              className="w-full border-t px-3 py-2 text-sm font-medium text-primary hover:bg-accent/40"
+            >
+              Показать ещё {Math.min(rest, PAGE)} из {rest}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
+function LineItem({ line }: { line: StocktakeLine }) {
+  const reason = reasonLabel(line.reason_code, line.delta > 0);
+  const amount = lineAmount(line);
+
+  return (
+    <li className="p-3 flex items-start gap-3">
+      <div className="flex-1 min-w-0">
+        <div className="text-sm truncate">{line.part_name}</div>
+        <div className="text-xs text-muted-foreground truncate">
+          {line.article ? `арт. ${line.article}` : "без артикула"}
+          {line.place_code ? ` · ${line.place_code}` : ""}
+          {line.condition === "used"
+            ? ` · Б/У${line.seasons_left ? `, ${line.seasons_left} сез.` : ""}`
+            : ""}
+        </div>
+        <div className="text-xs text-muted-foreground mt-0.5">{countPhrase(line)}</div>
+        {reason && (
+          <div className="text-xs text-muted-foreground mt-0.5">Причина: {reason}</div>
+        )}
+        {line.comment && (
+          <div className="text-xs text-muted-foreground italic mt-0.5">{line.comment}</div>
+        )}
+      </div>
+
+      {line.delta !== 0 && (
+        <div className="text-right whitespace-nowrap">
+          <div className={`text-sm font-semibold tabular-nums ${line.delta < 0 ? "text-destructive" : ""}`}>
+            {line.delta > 0 ? `+${line.delta}` : line.delta}
+          </div>
+          {/* Цена партии не проставлена — расхождение настоящее, а денег ноль.
+              Молча пропустить нельзя: шапку примут за полную картину. */}
+          {amount > 0 ? (
+            <div className="text-xs text-muted-foreground tabular-nums">{fmtMoney(amount)} ₽</div>
+          ) : (
+            <div className="text-xs text-destructive">без цены</div>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/StocktakeSessionPage.tsx

@@ -0,0 +1,678 @@
+/**
+ * Обход зоны: ввод факта по строкам + находки.
+ *
+ * Экран рассчитан на «иду вдоль стеллажа с телефоном»: по умолчанию показаны
+ * только непосчитанные строки, посчитанная сразу уходит из списка — видно,
+ * сколько ещё осталось обойти. Переключатель возвращает весь список, если
+ * надо что-то перепроверить.
+ *
+ * Пустое поле — это «ещё не считали», а не ноль. Ноль означает «дошёл и не
+ * нашёл» и превратится в недостачу, поэтому он вводится явной кнопкой.
+ *
+ * Находки живут ОТДЕЛЬНЫМ блоком, а не строками рабочего списка. Причина не
+ * косметическая: у находки количество проставлено с рождения, поэтому фильтр
+ * «только непосчитанные» прятал её сразу после добавления — со стороны это
+ * читалось как «нажал, и оно пропало». Вынести их из-под фильтра исключением
+ * значило бы держать в одном списке две разные сущности: обход («что надо
+ * проверить», и его-то и считает прогресс) и находки («что появилось сверх
+ * списка»). Отдельный блок сохраняет смысл фильтра и прогресса и ставит
+ * находку прямо под кнопкой, которой её добавили.
+ *
+ * Строка, в поле которой стоит курсор, из списка не исчезает, даже если её
+ * значение уже ушло на сервер. Иначе фильтр выдёргивает строку из-под пальца
+ * посреди набора — и в документе остаётся то, что успели напечатать. Отсюда
+ * focusedId на этом уровне: сам фильтр живёт здесь, а знает про фокус строка.
+ *
+ * Проведённая сессия сюда не доходит: она уже не рабочий список, а документ,
+ * и показывается экраном итогов (StocktakeResult). Адрес один на одну сущность
+ * — id до и после проведения тот же, поэтому разводим не роутом, а статусом:
+ * так работает и ссылка из списка, и переход сразу после «Провести».
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ChevronLeft, Loader2, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import PartsPickerModal from "@/components/repairs/PartsPickerModal";
+import QtyStepper from "@/components/repairs/QtyStepper";
+import { fmtMoney } from "@/lib/repairsFeed";
+import {
+  addFind,
+  apiErrorText,
+  applyStocktake,
+  countLine,
+  deleteStocktake,
+  deleteStocktakeLine,
+  getStocktake,
+  patchFind,
+  type StocktakeDetail,
+  type StocktakeLine,
+} from "@/api/warehouse";
+import type { PartCatalogItem } from "@/api/repairsCreate";
+import StocktakeResult from "./StocktakeResult";
+
+export default function StocktakeSessionPage() {
+  const { id } = useParams<{ id: string }>();
+  const stId = Number(id);
+  const navigate = useNavigate();
+
+  const [data, setData] = useState<StocktakeDetail | null>(null);
+  const [onlyPending, setOnlyPending] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  // Выбранная в пикере деталь ждёт количество: сколько нашли, спрашиваем ДО
+  // отправки — иначе коробка из восьми уходит в учёт одной штукой.
+  const [findDraft, setFindDraft] = useState<PartCatalogItem | null>(null);
+  // Строка, в поле которой сейчас курсор: её фильтр не трогает (см. шапку).
+  const [focusedId, setFocusedId] = useState<number | null>(null);
+
+  const query = useQuery({
+    queryKey: ["wh-stocktake", stId],
+    queryFn: () => getStocktake(stId),
+    staleTime: 5_000,
+  });
+
+  // Локальная копия — чтобы строка исчезала из списка сразу после ввода, не
+  // дожидаясь перезапроса всей сессии (их бывает несколько сотен).
+  const st = data ?? query.data ?? null;
+  const isDraft = st?.status === "draft";
+
+  // Обход и находки — разные списки (см. шапку файла). В черновике находка
+  // опознаётся по batch_id = null; после проведения признак затирается, но
+  // проведённая сессия сюда не доходит.
+  const { walk, finds } = useMemo(() => {
+    const walk: StocktakeLine[] = [];
+    const finds: StocktakeLine[] = [];
+    for (const l of st?.lines ?? []) (l.batch_id == null ? finds : walk).push(l);
+    return { walk, finds };
+  }, [st]);
+
+  // Посчитанная строка уходит из списка — но не та, в которой сейчас курсор:
+  // её значение могло уйти на сервер из-под пальца (погас экран), и исчезни
+  // она сейчас — механик дописывал бы вторую цифру в никуда.
+  const visible = useMemo(
+    () => (onlyPending ? walk.filter((l) => l.qty_counted == null || l.id === focusedId) : walk),
+    [walk, onlyPending, focusedId],
+  );
+
+  // Прогресс — про обход: находки в него не входят, иначе доля обойдённого
+  // растёт от того, что человек нашёл лишнего (так же считает экран итогов).
+  const counted = walk.filter((l) => l.qty_counted != null).length;
+  const totalLines = walk.length;
+
+  const totals = useMemo(() => {
+    let shortQty = 0, shortAmt = 0, surQty = 0, surAmt = 0;
+    for (const l of st?.lines ?? []) {
+      if (l.delta < 0) { shortQty += -l.delta; shortAmt += -Number(l.delta_amount || 0); }
+      if (l.delta > 0) { surQty += l.delta; surAmt += Number(l.delta_amount || 0); }
+    }
+    return { shortQty, shortAmt, surQty, surAmt };
+  }, [st]);
+
+  // Дальше — только черновик. Проведённую отдаём экрану итогов: править в ней
+  // нечего, а рабочий список с фильтром «только непосчитанные» показывал бы
+  // ровно то, чего человек НЕ делал.
+  if (st && !isDraft) {
+    return <StocktakeResult st={st} onBack={() => navigate("/wh/stocktake")} />;
+  }
+
+  const applyLine = (updated: StocktakeLine) =>
+    setData((cur) => {
+      const base = cur ?? query.data ?? null;
+      if (!base) return cur;
+      return { ...base, lines: base.lines.map((l) => (l.id === updated.id ? updated : l)) };
+    });
+
+  const dropLine = (lineId: number) =>
+    setData((cur) => {
+      const base = cur ?? query.data ?? null;
+      if (!base) return cur;
+      return { ...base, lines: base.lines.filter((l) => l.id !== lineId) };
+    });
+
+  // Сохранилось или нет — строка обязана знать: после отказа её поле должно
+  // вернуться к тому, что реально лежит в документе.
+  const setCount = async (line: StocktakeLine, value: number | null): Promise<boolean> => {
+    try {
+      applyLine(await countLine(stId, line.id, { qty_counted: value }));
+      return true;
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось сохранить"));
+      return false;
+    }
+  };
+
+  // Количество находки правим её собственной ручкой: она пишет в аудит
+  // «было → стало» — исправление должно быть видно, а не выглядеть так, будто
+  // находку сразу такой и вносили.
+  const setFindQty = async (line: StocktakeLine, qty: number): Promise<boolean> => {
+    try {
+      applyLine(await patchFind(stId, line.id, { qty }));
+      return true;
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось сохранить количество"));
+      return false;
+    }
+  };
+
+  const removeFind = async (line: StocktakeLine) => {
+    if (!window.confirm(`Убрать находку «${line.part_name}» из пересчёта?`)) return;
+    try {
+      await deleteStocktakeLine(stId, line.id);
+      dropLine(line.id);
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось убрать находку"));
+    }
+  };
+
+  const onFind = async (item: PartCatalogItem, qty: number) => {
+    setFindDraft(null);
+    try {
+      const line = await addFind(stId, { part_id: item.id, qty });
+      setData((cur) => {
+        const base = cur ?? query.data ?? null;
+        return base ? { ...base, lines: [...base.lines, line] } : cur;
+      });
+      toast.success(`Находка добавлена: ${item.name}, ${qty} шт`);
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось добавить находку"));
+    }
+  };
+
+  const onApply = async () => {
+    if (!st) return;
+    const notCounted = totalLines - counted;
+    const msg = notCounted > 0
+      ? `Не посчитано строк: ${notCounted}. Они будут пропущены (останутся как есть). Провести?`
+      : "Провести инвентаризацию? Расхождения станут движениями склада.";
+    if (!window.confirm(msg)) return;
+    setBusy(true);
+    try {
+      setData(await applyStocktake(stId));
+      toast.success("Инвентаризация проведена");
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось провести"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async () => {
+    if (!window.confirm("Удалить инвентаризацию? Введённые данные пропадут.")) return;
+    setBusy(true);
+    try {
+      await deleteStocktake(stId);
+      navigate("/wh/stocktake", { replace: true });
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось удалить"));
+      setBusy(false);
+    }
+  };
+
+  const pct = totalLines > 0 ? Math.round((counted / totalLines) * 100) : 0;
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col pb-28">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <Button variant="ghost" size="sm" onClick={() => navigate("/wh/stocktake")} className="-ml-2">
+            <ChevronLeft className="h-5 w-5" />
+            <span className="ml-1">Назад</span>
+          </Button>
+          <h1 className="text-base font-semibold">
+            {st?.place_code ? `Зона ${st.place_code}` : "Весь склад"}
+          </h1>
+          <span className="w-16" />
+        </div>
+        {st && (
+          <div className="px-3 pb-2 space-y-1">
+            <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+              <div className="h-full bg-primary" style={{ width: `${pct}%` }} />
+            </div>
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>
+                посчитано {counted} из {totalLines}
+                {finds.length > 0 && ` · находок ${finds.length}`}
+              </span>
+              {isDraft && (
+                <button
+                  type="button"
+                  onClick={() => setOnlyPending((v) => !v)}
+                  className="font-medium text-primary underline-offset-2 hover:underline"
+                >
+                  {onlyPending ? "Показать все" : "Только непосчитанные"}
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </header>
+
+      <main className="flex-1 container max-w-2xl py-3 space-y-2">
+        {query.isLoading && <div className="h-20 rounded-lg bg-muted animate-pulse" />}
+
+        {/* Обрыв связи — это не «пустая инвентаризация»: показываем отдельно,
+            иначе человек решит, что данные пропали. Повтор кнопкой: жеста
+            «потянуть экран» в приложении нет, без неё в дальнем углу склада
+            остаётся только перезапускать PWA. */}
+        {query.isError && !st && (
+          <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm space-y-2">
+            <div>Не удалось загрузить инвентаризацию — проверьте связь.</div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void query.refetch()}
+              disabled={query.isFetching}
+            >
+              {query.isFetching
+                ? <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                : <RefreshCw className="h-4 w-4 mr-1" />}
+              Повторить
+            </Button>
+          </div>
+        )}
+
+        {st && isDraft && (
+          <Button variant="outline" onClick={() => setPickerOpen(true)} className="w-full">
+            <Plus className="h-4 w-4 mr-1" />
+            Нашёл то, чего нет в списке
+          </Button>
+        )}
+
+        {/* Находки — сразу под кнопкой, которой их добавляют, и вне фильтра
+            обхода (см. шапку файла). */}
+        {st && isDraft && finds.length > 0 && (
+          <section className="space-y-2 pt-1">
+            <div className="flex items-baseline justify-between gap-2 px-1">
+              <h2 className="text-sm font-semibold">Находки · {finds.length}</h2>
+              <span className="text-xs text-muted-foreground">в учёте их не числилось</span>
+            </div>
+            <ul className="space-y-2">
+              {finds.map((l) => (
+                <FindRow
+                  key={l.id}
+                  line={l}
+                  onQty={(qty) => setFindQty(l, qty)}
+                  onRemove={() => void removeFind(l)}
+                />
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {st && visible.length === 0 && (
+          <div className="py-12 text-center text-sm text-muted-foreground">
+            {onlyPending && totalLines > 0
+              ? "Всё обошли. Проверьте итог внизу и проводите."
+              : "В этой зоне ничего не числится — добавьте находки, если что-то лежит."}
+          </div>
+        )}
+
+        <ul className="space-y-2">
+          {visible.map((l) => (
+            <LineRow
+              key={l.id}
+              line={l}
+              editable={!!isDraft}
+              onSet={(v) => setCount(l, v)}
+              onFocusChange={(f) => setFocusedId((cur) => (f ? l.id : cur === l.id ? null : cur))}
+            />
+          ))}
+        </ul>
+
+        {st && isDraft && (
+          <Button variant="ghost" onClick={onDelete} disabled={busy} className="w-full text-destructive">
+            Удалить инвентаризацию
+          </Button>
+        )}
+      </main>
+
+      {st && (
+        <footer className="fixed bottom-0 left-0 right-0 border-t bg-background p-3 z-10">
+          <div className="container max-w-2xl flex items-center gap-3">
+            <div className="flex-1 text-xs space-y-0.5">
+              <div className="text-muted-foreground">Расхождения</div>
+              <div className="flex gap-3">
+                <span className={totals.shortQty ? "text-destructive font-medium" : "text-muted-foreground"}>
+                  недостача {totals.shortQty} · {fmtMoney(totals.shortAmt)} ₽
+                </span>
+                <span className={totals.surQty ? "font-medium" : "text-muted-foreground"}>
+                  излишек {totals.surQty} · {fmtMoney(totals.surAmt)} ₽
+                </span>
+              </div>
+            </div>
+            {isDraft && (
+              // Одни находки — тоже повод провести: обход мог не дать ни одной
+              // посчитанной строки, а найденное уже надо оприходовать.
+              <Button onClick={onApply} disabled={busy || (counted === 0 && finds.length === 0)}>
+                {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : "Провести"}
+              </Button>
+            )}
+          </div>
+        </footer>
+      )}
+
+      {/* Находка выбирается из общего каталога — машины тут нет, фильтр
+          применимости не при чём. */}
+      <PartsPickerModal
+        open={pickerOpen}
+        carId={null}
+        onPick={(item) => { setPickerOpen(false); setFindDraft(item); }}
+        onClose={() => setPickerOpen(false)}
+      />
+
+      {findDraft && (
+        <FindQtyDialog
+          item={findDraft}
+          onCancel={() => setFindDraft(null)}
+          onConfirm={(qty) => void onFind(findDraft, qty)}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Сколько нашли — спрашиваем до отправки, отдельным шагом после выбора детали.
+ *
+ * Раньше находка уходила жёсткой единицей: механик нашёл коробку из восьми, в
+ * учёт попадала одна, и поправить было нечем. Ввод берём тот же, что у деталей
+ * в ремонте (QtyStepper): −/+ нажимаются в перчатках, а пустое поле остаётся
+ * пустым, пока набирают, — иначе «8» не набрать поверх единицы.
+ */
+function FindQtyDialog({
+  item, onCancel, onConfirm,
+}: {
+  item: PartCatalogItem;
+  onCancel: () => void;
+  onConfirm: (qty: number) => void;
+}) {
+  const [qty, setQty] = useState<number | "">(1);
+  const value = qty === "" ? 1 : qty;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-background/95 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm rounded-lg border bg-card p-4 space-y-4">
+        <div className="min-w-0">
+          <div className="text-xs text-muted-foreground">Нашли на полке</div>
+          <div className="text-sm font-medium">{item.name}</div>
+          <div className="text-xs text-muted-foreground truncate">
+            {item.article ? `арт. ${item.article}` : "без артикула"}
+            {item.brand ? ` · ${item.brand}` : ""}
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-sm">Сколько штук</span>
+          <QtyStepper value={qty} onChange={setQty} />
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={onCancel} className="flex-1">
+            Отмена
+          </Button>
+          <Button onClick={() => onConfirm(value)} className="flex-1">
+            Добавить
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Отправка набранного количества: один запрос на весь ввод, и ни одного —
+ * пока в поле стоит курсор.
+ *
+ * Здесь была пауза в 700 мс, и она портила склад. Промежуточное значение
+ * уходило на сервер, строка переставала быть непосчитанной, фильтр «только
+ * непосчитанные» убирал её из списка прямо посреди набора: механик вводил
+ * «12», в документе оставалась «1» — и это уходило в списание недостачи.
+ *
+ * Поэтому hold: пока с полем работают, набранное только удерживается, а на
+ * сервер уходит по завершению ввода (sendNow/flush на уходе с поля). Терять
+ * удержанное нельзя — ровно от этого автосохранение и делалось, — поэтому на
+ * время удержания висят слушатели «страницу прячут»: гашение экрана и
+ * сворачивание приложения дают ровно эти события. Размонтирование строки
+ * (ушли с экрана) отправляет удержанное тем же flush.
+ *
+ * schedule (пауза) остался для правок, у которых нет момента «ушёл с поля», —
+ * это кнопки −/+ у находки на мобильном: они фокус не берут, ждать нечего.
+ *
+ * Слушатели вешаем только пока есть несохранённое значение: на пересчёте всего
+ * склада строк сотни, и постоянный слушатель у каждой — лишний хвост на каждом
+ * сворачивании.
+ */
+function useDeferredSave<T>(commit: (value: T) => void | Promise<void>, delayMs = 700) {
+  const commitRef = useRef(commit);
+  const pending = useRef<{ value: T } | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const unlisten = useRef<(() => void) | null>(null);
+
+  useEffect(() => { commitRef.current = commit; });
+
+  const stopTimer = useCallback(() => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+  }, []);
+
+  const stopListen = useCallback(() => {
+    unlisten.current?.();
+    unlisten.current = null;
+  }, []);
+
+  const flush = useCallback(() => {
+    const p = pending.current;
+    pending.current = null;
+    stopTimer();
+    stopListen();
+    if (p) void commitRef.current(p.value);
+  }, [stopListen, stopTimer]);
+
+  /** Запомнить набранное и ждать — с подстраховкой на случай «экран погас». */
+  const hold = useCallback((value: T) => {
+    stopTimer();
+    pending.current = { value };
+    if (unlisten.current) return;
+    const onHidden = () => { if (document.visibilityState === "hidden") flush(); };
+    document.addEventListener("visibilitychange", onHidden);
+    window.addEventListener("pagehide", flush);
+    unlisten.current = () => {
+      document.removeEventListener("visibilitychange", onHidden);
+      window.removeEventListener("pagehide", flush);
+    };
+  }, [flush, stopTimer]);
+
+  const schedule = useCallback((value: T) => {
+    hold(value);
+    timer.current = setTimeout(flush, delayMs);
+  }, [delayMs, flush, hold]);
+
+  const sendNow = useCallback((value: T) => {
+    pending.current = { value };
+    flush();
+  }, [flush]);
+
+  const cancel = useCallback(() => {
+    pending.current = null;
+    stopTimer();
+    stopListen();
+  }, [stopListen, stopTimer]);
+
+  // Размонтирование (ушли с экрана, список перерисовался) — та же потеря.
+  useEffect(() => flush, [flush]);
+
+  return { hold, schedule, sendNow, flush, cancel };
+}
+
+/**
+ * Что набрано в поле: число, null — «ещё не считали» (пустое поле),
+ * undefined — мусор, отправлять нечего.
+ */
+function parseQty(raw: string): number | null | undefined {
+  const s = raw.trim();
+  if (s === "") return null;
+  const n = Math.floor(Number(s));
+  return Number.isFinite(n) && n >= 0 ? n : undefined;
+}
+
+function LineRow({
+  line, editable, onSet, onFocusChange,
+}: {
+  line: StocktakeLine;
+  editable: boolean;
+  onSet: (v: number | null) => Promise<boolean>;
+  onFocusChange: (focused: boolean) => void;
+}) {
+  const [draft, setDraft] = useState<string>(line.qty_counted?.toString() ?? "");
+  // Сервер отказал — в документе осталось прежнее, и поле обязано показывать
+  // его же: иначе на экране висит количество, которого в базе нет, и строка
+  // выглядит обойдённой.
+  const save = useDeferredSave<number | null>(async (v) => {
+    if (!(await onSet(v))) setDraft(line.qty_counted?.toString() ?? "");
+  });
+
+  const tone =
+    line.resolution === "shortage" ? "border-destructive/40 bg-destructive/5"
+    : line.resolution === "surplus" ? "border-border bg-accent/40"
+    : line.resolution === "match" ? "border-border bg-muted/30"
+    : "border-border bg-card";
+
+  const onType = (raw: string) => {
+    setDraft(raw);
+    const v = parseQty(raw);
+    // Пустое поле посреди набора — ещё не решение «не считали»: стирание
+    // отправляем только когда человек ушёл с поля.
+    if (v == null || v === line.qty_counted) save.cancel();
+    else save.hold(v);
+  };
+
+  const onLeave = () => {
+    onFocusChange(false);
+    const v = parseQty(draft);
+    if (v === undefined || v === line.qty_counted) save.cancel();
+    else save.sendNow(v);
+  };
+
+  const tap = (v: number) => { setDraft(String(v)); save.sendNow(v); };
+
+  return (
+    <li className={`rounded-lg border p-3 ${tone}`}>
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-sm font-medium truncate">{line.part_name}</div>
+          <div className="text-xs text-muted-foreground truncate">
+            {line.article ? `арт. ${line.article} · ` : ""}
+            числится {line.qty_expected}
+            {line.place_code ? ` · ${line.place_code}` : ""}
+          </div>
+        </div>
+        {line.delta !== 0 && (
+          <span
+            className={`text-sm font-semibold whitespace-nowrap tabular-nums ${
+              line.delta < 0 ? "text-destructive" : ""
+            }`}
+          >
+            {line.delta > 0 ? `+${line.delta}` : line.delta}
+          </span>
+        )}
+      </div>
+
+      {editable && (
+        <div className="mt-2 flex items-center gap-2">
+          <Input
+            type="number"
+            inputMode="numeric"
+            min={0}
+            placeholder="сколько нашли"
+            value={draft}
+            onChange={(e) => onType(e.target.value)}
+            onFocus={() => onFocusChange(true)}
+            onBlur={onLeave}
+            className="flex-1"
+          />
+          <Button variant="outline" size="sm" onClick={() => tap(line.qty_expected)}>
+            Сходится
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => tap(0)}>
+            Нет
+          </Button>
+        </div>
+      )}
+    </li>
+  );
+}
+
+/**
+ * Находка в черновике: количество правится, ошибочную строку убирают.
+ *
+ * Кнопок «Сходится»/«Нет» здесь нет намеренно. Сходиться находке не с чем — в
+ * учёте её не числилось, — а «Нет» раньше служил удалением и ставил ноль:
+ * строка навсегда оставалась в документе сошедшейся пустышкой «числилось 0 —
+ * столько и нашли» и завышала счётчик совпавших. Ошибочная находка теперь
+ * удаляется по-настоящему.
+ */
+function FindRow({
+  line, onQty, onRemove,
+}: {
+  line: StocktakeLine;
+  onQty: (qty: number) => Promise<boolean>;
+  onRemove: () => void;
+}) {
+  const [qty, setQty] = useState<number | "">(line.qty_counted ?? 1);
+  // Сервер отказал (например, находку уже провели) — поле возвращается к тому,
+  // что реально лежит в документе, а не остаётся с непринятым числом.
+  const save = useDeferredSave<number>(async (next) => {
+    if (!(await onQty(next))) setQty(line.qty_counted ?? 1);
+  });
+  // Курсор внутри строки: пока правят, число только удерживается. Сервер пишет
+  // каждую правку в аудит «было → стало», и промежуточная «1» из «12» осталась
+  // бы там навсегда.
+  const editing = useRef(false);
+
+  const onChange = (next: number | "") => {
+    setQty(next);
+    // "" — промежуточное состояние ввода (см. QtyStepper), отправлять нечего;
+    // QtyStepper сам вернёт минимум, когда человек уйдёт с поля.
+    if (next === "" || next < 1 || next === line.qty_counted) save.cancel();
+    else if (editing.current) save.hold(next);
+    // Кнопки −/+ на мобильном фокуса не берут: уходить неоткуда, шлём по паузе.
+    else save.schedule(next);
+  };
+
+  return (
+    <li className="rounded-lg border border-border bg-accent/40 p-3">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-sm font-medium truncate">{line.part_name}</div>
+          <div className="text-xs text-muted-foreground truncate">
+            {line.article ? `арт. ${line.article} · ` : ""}
+            находка
+            {line.place_code ? ` · ${line.place_code}` : ""}
+          </div>
+        </div>
+        <span className="text-sm font-semibold whitespace-nowrap tabular-nums">
+          +{line.qty_counted ?? 0}
+        </span>
+      </div>
+
+      <div className="mt-2 flex items-center justify-between gap-2">
+        {/* Границы правки — сам счётчик: переход поле ↔ −/+ её не завершает,
+            а уход из счётчика (в том числе табом на «Убрать») отправляет. */}
+        <div
+          onFocus={() => { editing.current = true; }}
+          onBlur={(e) => {
+            if (e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) return;
+            editing.current = false;
+            save.flush();
+          }}
+        >
+          <QtyStepper value={qty} onChange={onChange} />
+        </div>
+        <Button variant="ghost" size="sm" onClick={onRemove} className="text-destructive">
+          <Trash2 className="h-4 w-4 mr-1" />
+          Убрать
+        </Button>
+      </div>
+    </li>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/TyreJournalPage.tsx

@@ -0,0 +1,115 @@
+/**
+ * Журнал выданных комплектов.
+ *
+ * Отвечает на два вопроса сезона: сколько машин уже переобуто и у кого
+ * комплект до сих пор на руках. Полноценный экран кампании (прогресс по парку,
+ * дефицит размеров) — следующим шагом в CRM, здесь нужен минимум, по которому
+ * кладовщик сверяется прямо у склада.
+ */
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { getTyreSets, TYRE_GRADE_LABEL, type TyreSet } from "@/api/warehouse";
+
+const STATUS_LABEL: Record<TyreSet["status"], string> = {
+  on_car: "На машине",
+  returned: "Вернули на склад",
+  scrapped: "Списан",
+  lost: "Не найден",
+};
+
+const FILTERS: { key: string | undefined; label: string }[] = [
+  { key: "on_car", label: "На машинах" },
+  { key: undefined, label: "Все" },
+];
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? iso
+    : new Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(d);
+}
+
+export default function TyreJournalPage() {
+  const navigate = useNavigate();
+  const [status, setStatus] = useState<string | undefined>("on_car");
+
+  const q = useQuery({
+    queryKey: ["tyre-sets", status],
+    queryFn: () => getTyreSets({ status, limit: 200 }),
+    staleTime: 15_000,
+  });
+
+  const items = q.data?.items ?? [];
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center gap-2 p-3">
+          <Button variant="ghost" size="sm" className="-ml-2" onClick={() => navigate("/wh/tyres")}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <div>
+            <h1 className="text-base font-semibold">Выданные комплекты</h1>
+            <p className="text-xs text-muted-foreground">
+              на машинах: {q.data?.on_car ?? 0} · всего записей: {q.data?.total ?? 0}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2 px-3 pb-3">
+          {FILTERS.map((f) => (
+            <Button
+              key={f.label}
+              size="sm"
+              variant={status === f.key ? "default" : "outline"}
+              onClick={() => setStatus(f.key)}
+            >
+              {f.label}
+            </Button>
+          ))}
+        </div>
+      </header>
+
+      <main className="flex-1 divide-y">
+        {q.isLoading && <p className="p-4 text-sm text-muted-foreground">Загрузка…</p>}
+        {!q.isLoading && items.length === 0 && (
+          <p className="p-4 text-sm text-muted-foreground">Пока ничего не выдавали.</p>
+        )}
+        {items.map((s) => (
+          <div key={s.id} className="p-3">
+            <div className="flex items-baseline gap-2 flex-wrap">
+              <span className="font-mono font-semibold">{s.car_number ?? "—"}</span>
+              <span className="text-sm">{s.size ?? s.part_name}</span>
+              <span className="text-sm text-muted-foreground">{s.qty} шт</span>
+              <span
+                className={`text-xs rounded px-1.5 py-0.5 ${
+                  s.status === "on_car"
+                    ? "bg-primary/10 text-primary"
+                    : "bg-muted text-muted-foreground"
+                }`}
+              >
+                {STATUS_LABEL[s.status]}
+              </span>
+            </div>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {fmtDate(s.issued_at)}
+              {s.grade_out ? ` · ${TYRE_GRADE_LABEL[s.grade_out].toLowerCase()}` : ""}
+              {s.driver_fio ? ` · ${s.driver_fio}` : ""}
+              {s.issued_by ? ` · выдал ${s.issued_by}` : ""}
+            </p>
+            {s.status !== "on_car" && (
+              <p className="text-xs text-muted-foreground">
+                закрыт {fmtDate(s.closed_at)}
+                {s.grade_in ? ` · вернули как «${TYRE_GRADE_LABEL[s.grade_in].toLowerCase()}»` : ""}
+                {s.close_comment ? ` · ${s.close_comment}` : ""}
+              </p>
+            )}
+          </div>
+        ))}
+      </main>
+    </div>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/TyreSizesPage.tsx

@@ -0,0 +1,124 @@
+/**
+ * Штатные размеры резины по моделям парка.
+ *
+ * Заполняется один раз перед сезоном: без размера выдача не подсказывает, что
+ * брать, и кладовщик ищет позицию в номенклатуре руками — на четырёхстах
+ * машинах это заметно. Модели идут по числу машин, чтобы самые ходовые
+ * заполнились первыми и дальше можно было не продолжать.
+ *
+ * В поле — подсказка из тех размеров, что реально лежат на складе: набирать
+ * «225/65/17» с телефона долго и легко ошибиться.
+ */
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ChevronLeft } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  apiErrorText,
+  getTyreSizes,
+  getTyreStock,
+  setTyreSize,
+  type TyreSizeRow,
+} from "@/api/warehouse";
+
+export default function TyreSizesPage() {
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const [savingKey, setSavingKey] = useState<string | null>(null);
+
+  const sizesQuery = useQuery({ queryKey: ["tyre-sizes"], queryFn: getTyreSizes, staleTime: 30_000 });
+  const stockQuery = useQuery({ queryKey: ["tyre-stock"], queryFn: getTyreStock, staleTime: 300_000 });
+
+  const rows = sizesQuery.data ?? [];
+  const filled = useMemo(() => rows.filter((r) => r.tyre_size).length, [rows]);
+  const known = useMemo(
+    () => Array.from(new Set((stockQuery.data ?? []).map((s) => s.size).filter(Boolean))) as string[],
+    [stockQuery.data],
+  );
+
+  const save = async (row: TyreSizeRow, value: string | null) => {
+    const key = `${row.brand}|${row.model}`;
+    setSavingKey(key);
+    try {
+      await setTyreSize({ brand: row.brand ?? "", model: row.model ?? "", tyre_size: value });
+      await qc.invalidateQueries({ queryKey: ["tyre-sizes"] });
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось сохранить размер"));
+    } finally {
+      setSavingKey(null);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center gap-2 p-3">
+          <Button variant="ghost" size="sm" className="-ml-2" onClick={() => navigate("/wh/tyres")}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <div>
+            <h1 className="text-base font-semibold">Штатные размеры</h1>
+            <p className="text-xs text-muted-foreground">
+              заполнено {filled} из {rows.length}
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <datalist id="tyre-sizes-known">
+        {known.map((s) => (
+          <option key={s} value={s} />
+        ))}
+      </datalist>
+
+      <main className="flex-1 divide-y">
+        {sizesQuery.isLoading && <p className="p-4 text-sm text-muted-foreground">Загрузка…</p>}
+        {rows.map((r) => {
+          const key = `${r.brand}|${r.model}`;
+          return <SizeRow key={key} row={r} saving={savingKey === key} onSave={(v) => save(r, v)} />;
+        })}
+      </main>
+    </div>
+  );
+}
+
+function SizeRow({
+  row,
+  saving,
+  onSave,
+}: {
+  row: TyreSizeRow;
+  saving: boolean;
+  onSave: (value: string | null) => void;
+}) {
+  const [draft, setDraft] = useState(row.tyre_size ?? "");
+  const dirty = (draft.trim() || null) !== (row.tyre_size ?? null);
+
+  return (
+    <div className="p-3 flex items-center gap-3">
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">
+          {[row.brand, row.model].filter(Boolean).join(" ") || "—"}
+        </p>
+        <p className="text-xs text-muted-foreground">{row.cars_count} авто</p>
+      </div>
+      <input
+        list="tyre-sizes-known"
+        placeholder="225/65/17"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        className="w-32 rounded-md border border-input bg-background px-2 py-1.5 text-sm"
+      />
+      <Button
+        size="sm"
+        variant={dirty ? "default" : "ghost"}
+        disabled={saving || !dirty}
+        onClick={() => onSave(draft.trim() || null)}
+      >
+        {saving ? "…" : <Check className="h-4 w-4" />}
+      </Button>
+    </div>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/TyresPage.tsx

@@ -0,0 +1,502 @@
+/**
+ * Выдача резины — экран кладовщика у подъёмника.
+ *
+ * Осенью через него проходит весь парк, поэтому всё построено вокруг скорости:
+ * выбрал машину → приложение само подсказало штатный размер и остаток → три
+ * кнопки состояния → выдал. Один запрос за контекстом вместо трёх — телефон у
+ * подъёмника работает по слабой связи.
+ *
+ * Главное правило: пока не сказано, что случилось с предыдущим комплектом,
+ * новый не выдаётся. Сервер это тоже проверяет (409), здесь просто не даём
+ * дойти до отказа.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, Circle, History, Ruler, Search } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { searchCars, type CarBrief } from "@/api/repairsCreate";
+import {
+  apiErrorText,
+  getTyreContext,
+  issueTyres,
+  TYRE_GRADE_LABEL,
+  type TyreClose,
+  type TyreContext,
+  type TyreGrade,
+  type TyreStockRow,
+} from "@/api/warehouse";
+
+const GRADES: TyreGrade[] = ["good", "season", "worn"];
+
+const CLOSE_LABEL: Record<TyreClose["action"], string> = {
+  returned: "Вернули на склад",
+  scrapped: "Списали",
+  lost: "Не найден",
+};
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? iso
+    : new Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(d);
+}
+
+/** Сколько дней комплект отходил — по этому видно, доездил он сезон или месяц. */
+function daysOn(iso: string): number {
+  const d = new Date(iso).getTime();
+  return Number.isNaN(d) ? 0 : Math.max(0, Math.round((Date.now() - d) / 86_400_000));
+}
+
+/** Подпись кнопки выдачи. «Комплект» — только когда колёс действительно четыре:
+ *  с тех пор как выдавать можно поштучно, на одной покрышке эта подпись врала. */
+function issueLabel(qty: number, addToOpen: boolean): string {
+  const noun = qty === 1 ? "покрышку" : "покрышки";
+  if (addToOpen) return `Доложить ${qty} ${noun}`;
+  if (qty === 4) return "Выдать комплект";
+  return `Выдать ${qty} ${noun}`;
+}
+
+export default function TyresPage() {
+  const navigate = useNavigate();
+  const [sp, setSp] = useSearchParams();
+  const carId = sp.get("car") ? Number(sp.get("car")) : null;
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="flex items-center justify-between p-3">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="-ml-2"
+              onClick={() => (carId ? setSp({}, { replace: true }) : navigate("/"))}
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-base font-semibold">Выдача резины</h1>
+          </div>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="sm" onClick={() => navigate("/wh/tyres/sizes")}>
+              <Ruler className="h-4 w-4 mr-1" />
+              Размеры
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => navigate("/wh/tyres/journal")}>
+              <History className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {carId ? (
+        <IssueForm carId={carId} onDone={() => setSp({}, { replace: true })} />
+      ) : (
+        <CarPicker onPick={(id) => setSp({ car: String(id) }, { replace: true })} />
+      )}
+    </div>
+  );
+}
+
+// ── Выбор машины ───────────────────────────────────────────────────────────
+
+function CarPicker({ onPick }: { onPick: (carId: number) => void }) {
+  const [q, setQ] = useState("");
+  const [cars, setCars] = useState<CarBrief[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    const t = setTimeout(async () => {
+      try {
+        const list = await searchCars(q);
+        if (!cancelled) setCars(list);
+      } catch {
+        if (!cancelled) setCars([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }, 200);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [q]);
+
+  return (
+    <>
+      <div className="px-3 py-3 border-b">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            autoFocus
+            placeholder="Госномер…"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+      </div>
+      <main className="flex-1 divide-y">
+        {loading && <p className="p-4 text-sm text-muted-foreground">Загрузка…</p>}
+        {!loading && cars.length === 0 && (
+          <p className="p-4 text-sm text-muted-foreground">Ничего не нашлось</p>
+        )}
+        {cars.map((c) => (
+          <button
+            key={c.id}
+            onClick={() => onPick(c.id)}
+            className="w-full text-left p-3 active:bg-muted flex items-baseline gap-3"
+          >
+            <span className="font-mono font-semibold">{c.plate ?? "—"}</span>
+            <span className="text-sm text-muted-foreground">
+              {[c.brand, c.model].filter(Boolean).join(" ")}
+            </span>
+          </button>
+        ))}
+      </main>
+    </>
+  );
+}
+
+// ── Выдача ─────────────────────────────────────────────────────────────────
+
+function IssueForm({ carId, onDone }: { carId: number; onDone: () => void }) {
+  const ctxQuery = useQuery({
+    queryKey: ["tyre-ctx", carId],
+    queryFn: () => getTyreContext(carId),
+    staleTime: 0,
+  });
+  const ctx: TyreContext | undefined = ctxQuery.data;
+
+  const [partId, setPartId] = useState<number | null>(null);
+  const [qty, setQty] = useState(4);
+  const [grade, setGrade] = useState<TyreGrade>("good");
+  const [closeAction, setCloseAction] = useState<TyreClose["action"] | null>(null);
+  const [closeGrade, setCloseGrade] = useState<TyreGrade>("season");
+  const [comment, setComment] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+  const [addToOpen, setAddToOpen] = useState(false);
+  // Ключ идемпотентности живёт, пока форма открыта: ретрай после обрыва связи
+  // должен попасть в ТУ ЖЕ выдачу, а не создать вторую.
+  const [idemKey] = useState(() => crypto.randomUUID());
+
+  // Подставляем подсказанный размер, как только пришёл контекст.
+  useEffect(() => {
+    if (!ctx || partId !== null) return;
+    const best = ctx.stock.find((s) => (s.fits || s.suggested) && s.qty > 0);
+    if (best) setPartId(best.part_id);
+  }, [ctx, partId]);
+
+  // По умолчанию показываем ТОЛЬКО подходящее этой машине — иначе кладовщик
+  // выбирает размер из девятнадцати позиций глазами. Если применимость по
+  // машине не заполнена, фильтровать нечем: прятать правильную резину по
+  // незнанию хуже, чем показать лишнюю (то же правило, что у подбора запчастей).
+  const fitting = useMemo(
+    () => (ctx ? ctx.stock.filter((s) => s.fits || s.suggested) : []),
+    [ctx],
+  );
+  const visibleStock = showAll || !ctx?.fit_known ? (ctx?.stock ?? []) : fitting;
+
+  if (ctxQuery.isLoading) {
+    return <main className="p-4 text-sm text-muted-foreground">Загрузка…</main>;
+  }
+  if (!ctx) {
+    return <main className="p-4 text-sm text-destructive">Не удалось загрузить машину</main>;
+  }
+
+  const openSet = ctx.open_set;
+  // «Доложить» — когда старые колёса остаются на машине, а добавляется ещё
+  // одно-два. Закрывать комплект ради этого нельзя: «списали» врёт на живой
+  // резине, «вернули» приходует на склад то, что с машины не снимали.
+  const needClose = openSet !== null && !addToOpen && closeAction === null;
+  const chosen = ctx.stock.find((s) => s.part_id === partId) ?? null;
+
+  const submit = async () => {
+    if (partId === null) {
+      toast.error("Выберите размер");
+      return;
+    }
+    setSaving(true);
+    try {
+      await issueTyres(
+        {
+          car_id: carId,
+          part_id: partId,
+          qty,
+          grade,
+          comment: comment.trim() || null,
+          add_to_open: addToOpen,
+          close:
+            !addToOpen && closeAction
+              ? {
+                  action: closeAction,
+                  grade: closeAction === "returned" ? closeGrade : undefined,
+                }
+              : null,
+        },
+        idemKey,
+      );
+      toast.success(
+        `${addToOpen ? "Доложено" : "Выдано"} ${qty} шт · ${ctx.car_number ?? ""}`.trim(),
+      );
+      onDone();
+    } catch (e) {
+      toast.error(await apiErrorText(e, "Не удалось выдать резину"));
+      setSaving(false);
+    }
+  };
+
+  return (
+    <main className="flex-1 pb-28">
+      {/* Машина и арендатор */}
+      <section className="p-3 border-b">
+        <div className="flex items-baseline gap-3">
+          <span className="font-mono text-lg font-semibold">{ctx.car_number ?? "—"}</span>
+          <span className="text-sm text-muted-foreground">
+            {[ctx.brand, ctx.model].filter(Boolean).join(" ")}
+          </span>
+        </div>
+        <p className="text-sm text-muted-foreground mt-0.5">
+          {ctx.driver_fio ? `Арендатор: ${ctx.driver_fio}` : "Арендатор не определён"}
+        </p>
+        {ctx.suggested_size ? (
+          <p className="text-sm mt-1">
+            Штатный размер: <span className="font-semibold">{ctx.suggested_size}</span>
+          </p>
+        ) : (
+          <p className="text-sm text-muted-foreground mt-1">
+            Штатный размер модели не задан — укажите его в разделе «Размеры», и подсказка появится.
+          </p>
+        )}
+      </section>
+
+      {/* Предыдущий комплект — закрыть обязательно */}
+      {openSet && (
+        <section className="p-3 border-b bg-amber-50 dark:bg-amber-950/30">
+          <h2 className="text-sm font-semibold">На машине уже есть комплект</h2>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            {openSet.size ?? openSet.part_name} · {openSet.qty} шт · выдан {fmtDate(openSet.issued_at)}
+            {` (${daysOn(openSet.issued_at)} дн.)`}
+            {openSet.grade_out ? ` · при выдаче ${TYRE_GRADE_LABEL[openSet.grade_out].toLowerCase()}` : ""}
+          </p>
+          {openSet.additions && openSet.additions.length > 0 && (
+            <p className="text-xs text-muted-foreground mt-0.5">
+              из них доложено:{" "}
+              {openSet.additions
+                .map((a) => `${a.qty} шт ${fmtDate(a.created_at)}`)
+                .join(", ")}
+            </p>
+          )}
+
+          {/* Развилка: доложить к тем колёсам или заменить их целиком. */}
+          <div className="grid grid-cols-2 gap-2 mt-2">
+            <Button
+              variant={addToOpen ? "default" : "outline"}
+              size="sm"
+              onClick={() => setAddToOpen(true)}
+            >
+              Доложить
+            </Button>
+            <Button
+              variant={!addToOpen ? "default" : "outline"}
+              size="sm"
+              onClick={() => setAddToOpen(false)}
+            >
+              Заменить
+            </Button>
+          </div>
+
+          {addToOpen ? (
+            <p className="text-xs text-muted-foreground mt-2">
+              Комплект остаётся тем же, колёса добавятся к нему. Размер должен совпадать.
+            </p>
+          ) : (
+            <>
+              <p className="text-sm mt-3 mb-1">Что со старым?</p>
+              <div className="grid grid-cols-3 gap-2">
+                {(Object.keys(CLOSE_LABEL) as TyreClose["action"][]).map((a) => (
+                  <Button
+                    key={a}
+                    variant={closeAction === a ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCloseAction(a)}
+                  >
+                    {CLOSE_LABEL[a]}
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+          {!addToOpen && closeAction === "returned" && (
+            <div className="mt-3">
+              <p className="text-sm mb-1">Состояние снятой резины</p>
+              <GradePicker value={closeGrade} onChange={setCloseGrade} />
+              <p className="text-xs text-muted-foreground mt-1">
+                Вернётся на склад отдельной партией с этой оценкой.
+              </p>
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* Что выдаём */}
+      <section className="p-3 border-b">
+        <div className="flex items-baseline justify-between mb-2">
+          <h2 className="text-sm font-semibold">Что выдаём</h2>
+          {ctx.fit_known && (
+            <span className="text-xs text-muted-foreground">
+              {showAll ? `все размеры (${ctx.stock.length})` : `подходит: ${fitting.length}`}
+            </span>
+          )}
+        </div>
+        {!ctx.fit_known && (
+          <p className="text-xs text-muted-foreground mb-2">
+            Для этой модели не отмечено, какая резина подходит, — показаны все размеры.
+            Отметить можно в карточке позиции на складе.
+          </p>
+        )}
+        <div className="space-y-1">
+          {visibleStock.length === 0 && (
+            <p className="text-sm text-muted-foreground">На складе нет резины.</p>
+          )}
+          {visibleStock.map((s) => (
+            <StockRow
+              key={s.part_id}
+              row={s}
+              selected={partId === s.part_id}
+              onSelect={() => setPartId(s.part_id)}
+            />
+          ))}
+        </div>
+        {ctx.fit_known && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="mt-1"
+            onClick={() => setShowAll((v) => !v)}
+          >
+            {showAll
+              ? `Только подходящие (${fitting.length})`
+              : `Показать все размеры (${ctx.stock.length})`}
+          </Button>
+        )}
+        {chosen && chosen.qty < qty && (
+          <p className="text-sm text-amber-700 dark:text-amber-500 mt-2">
+            На складе {chosen.qty} шт — склад уйдёт в минус на {qty - chosen.qty}. Выдать можно.
+          </p>
+        )}
+      </section>
+
+      {/* Количество и состояние */}
+      <section className="p-3 border-b">
+        <p className="text-sm mb-1">Сколько покрышек</p>
+        {/* Поштучно, а не только комплектом: в переобувку часто уходит одно-два
+            колеса — порезали боковину, поймали грыжу. Раньше выбор был 2/4/5 и
+            под такой случай не подходил (задача 4684). */}
+        <div className="flex gap-2">
+          {[1, 2, 3, 4].map((n) => (
+            <Button
+              key={n}
+              variant={qty === n ? "default" : "outline"}
+              size="sm"
+              className="flex-1"
+              onClick={() => setQty(n)}
+            >
+              {n}
+            </Button>
+          ))}
+        </div>
+        <p className="text-sm mt-3 mb-1">Состояние выдаваемой резины</p>
+        <GradePicker value={grade} onChange={setGrade} />
+        <Input
+          className="mt-3"
+          placeholder="Комментарий (необязательно)"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+      </section>
+
+      {/* Кнопка выдачи */}
+      <div className="fixed bottom-0 left-0 right-0 border-t bg-background p-3">
+        <Button className="w-full" disabled={saving || needClose || partId === null} onClick={submit}>
+          {saving
+            ? "Выдаём…"
+            : needClose
+              ? "Сначала выберите: доложить или заменить"
+              : issueLabel(qty, addToOpen)}
+        </Button>
+      </div>
+    </main>
+  );
+}
+
+function GradePicker({
+  value,
+  onChange,
+}: {
+  value: TyreGrade;
+  onChange: (g: TyreGrade) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-2">
+      {GRADES.map((g) => (
+        <Button
+          key={g}
+          variant={value === g ? "default" : "outline"}
+          size="sm"
+          onClick={() => onChange(g)}
+        >
+          {TYRE_GRADE_LABEL[g]}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function StockRow({
+  row,
+  selected,
+  onSelect,
+}: {
+  row: TyreStockRow;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const grades = (Object.keys(TYRE_GRADE_LABEL) as TyreGrade[])
+    .filter((g) => (row.by_grade[g] ?? 0) > 0)
+    .map((g) => `${TYRE_GRADE_LABEL[g].toLowerCase()}: ${row.by_grade[g]}`);
+  return (
+    <button
+      onClick={onSelect}
+      className={`w-full text-left rounded-md border p-2.5 flex items-start gap-2 ${
+        selected ? "border-primary bg-primary/5" : "border-border"
+      }`}
+    >
+      <Circle
+        className={`h-4 w-4 mt-0.5 shrink-0 ${selected ? "fill-primary text-primary" : "text-muted-foreground"}`}
+      />
+      <span className="flex-1 min-w-0">
+        <span className="flex items-baseline gap-2 flex-wrap">
+          <span className="font-semibold">{row.size ?? row.name}</span>
+          {(row.fits || row.suggested) && (
+            <span className="text-xs rounded px-1.5 py-0.5 bg-primary/10 text-primary">
+              {row.fits ? "подходит" : "штатный"}
+            </span>
+          )}
+          <span className={`text-sm ${row.qty > 0 ? "text-muted-foreground" : "text-destructive"}`}>
+            {row.qty} шт
+          </span>
+        </span>
+        <span className="block text-xs text-muted-foreground truncate">
+          {[grades.join(" · "), row.places.join(", ")].filter(Boolean).join(" — ") || row.name}
+        </span>
+      </span>
+    </button>
+  );
+}

mechanic-pwa/frontend/src/pages/warehouse/stocktakeSummary.test.ts

@@ -0,0 +1,199 @@
+import { describe, expect, it } from "vitest";
+import type { StocktakeLine } from "@/api/warehouse";
+import {
+  buildSummary,
+  countPhrase,
+  groupOf,
+  isFind,
+  isUnpriced,
+  reasonLabel,
+  splitByGroup,
+} from "./stocktakeSummary";
+
+function line(over: Partial<StocktakeLine>): StocktakeLine {
+  return {
+    id: 1,
+    batch_id: 10,
+    part_id: 100,
+    part_name: "Фильтр масляный",
+    article: "C-110",
+    place_id: null,
+    place_code: "А-1",
+    qty_expected: 5,
+    qty_counted: 5,
+    unit_price: "100.00",
+    condition: "new",
+    seasons_left: null,
+    resolution: "match",
+    delta: 0,
+    delta_amount: "0.00",
+    comment: null,
+    reason_code: null,
+    ...over,
+  };
+}
+
+describe("группировка итогов инвентаризации", () => {
+  it("«дошли и не нашли ни одной» — отдельная группа от «нашли меньше»", () => {
+    const none = line({ qty_counted: 0, resolution: "shortage", delta: -5 });
+    const less = line({ qty_counted: 3, resolution: "shortage", delta: -2 });
+    expect(groupOf(none)).toBe("missing");
+    expect(groupOf(less)).toBe("shortage");
+  });
+
+  it("не дошли — это не «сошлось», хотя дельта тоже ноль", () => {
+    expect(groupOf(line({ qty_counted: null, resolution: "not_counted", delta: 0 }))).toBe("skipped");
+    expect(groupOf(line({ resolution: "match", delta: 0 }))).toBe("match");
+  });
+
+  it("находка узнаётся после проведения, когда batch_id уже подставлен", () => {
+    // apply прописывает находке id созданной партии — признак «batch_id === null»
+    // к этому моменту потерян, остаётся только qty_expected === 0.
+    const find = line({ batch_id: 77, qty_expected: 0, qty_counted: 3, resolution: "surplus", delta: 3 });
+    expect(isFind(find)).toBe(true);
+    expect(groupOf(find)).toBe("find");
+  });
+
+  it("обычный излишек находкой не считается", () => {
+    const surplus = line({ qty_expected: 2, qty_counted: 5, resolution: "surplus", delta: 3 });
+    expect(isFind(surplus)).toBe(false);
+    expect(groupOf(surplus)).toBe("surplus");
+  });
+
+  it("splitByGroup раскладывает все строки без потерь", () => {
+    const lines = [
+      line({ id: 1, qty_counted: 0, resolution: "shortage", delta: -5 }),
+      line({ id: 2, qty_counted: 3, resolution: "shortage", delta: -2 }),
+      line({ id: 3, qty_expected: 0, qty_counted: 1, resolution: "surplus", delta: 1 }),
+      line({ id: 4, resolution: "match" }),
+      line({ id: 5, qty_counted: null, resolution: "not_counted" }),
+    ];
+    const g = splitByGroup(lines);
+    expect(g.missing.map((l) => l.id)).toEqual([1]);
+    expect(g.shortage.map((l) => l.id)).toEqual([2]);
+    expect(g.find.map((l) => l.id)).toEqual([3]);
+    expect(g.match.map((l) => l.id)).toEqual([4]);
+    expect(g.skipped.map((l) => l.id)).toEqual([5]);
+    expect(g.surplus).toHaveLength(0);
+  });
+});
+
+describe("формулировки", () => {
+  it("говорят числами, а не терминами", () => {
+    expect(countPhrase(line({ qty_counted: 3, resolution: "shortage", delta: -2 })))
+      .toBe("числилось 5 → нашли 3, не хватает 2");
+    expect(countPhrase(line({ qty_counted: 8, resolution: "surplus", delta: 3 })))
+      .toBe("числилось 5 → нашли 8, лишние 3");
+    expect(countPhrase(line({ qty_counted: 0, resolution: "shortage", delta: -5 })))
+      .toBe("числилось 5 → не нашли");
+  });
+
+  it("причина `resort` подписывается по-разному у излишка и недостачи", () => {
+    expect(reasonLabel("resort", true)).toBe("Лежала не там / из другой зоны");
+    expect(reasonLabel("resort", false)).toBe("Учтено в другой зоне / пересорт");
+    expect(reasonLabel(null, false)).toBeNull();
+    expect(reasonLabel("unknown_code", false)).toBe("unknown_code");
+  });
+});
+
+// Смесь, покрывающая все исходы разом: по ней удобно сверять шапку с группами.
+const MIXED: StocktakeLine[] = [
+  // не нашли, цена есть
+  line({ id: 1, qty_expected: 5, qty_counted: 0, resolution: "shortage", delta: -5, delta_amount: "-500.00" }),
+  // не хватает
+  line({ id: 2, qty_expected: 5, qty_counted: 3, resolution: "shortage", delta: -2, delta_amount: "-200.00" }),
+  // не нашли, но у партии нет цены — расхождение есть, денег нет
+  line({ id: 3, qty_expected: 4, qty_counted: 0, resolution: "shortage", delta: -4, unit_price: "0.00", delta_amount: "0.00" }),
+  // излишек
+  line({ id: 4, qty_expected: 2, qty_counted: 5, resolution: "surplus", delta: 3, delta_amount: "300.00" }),
+  // находка
+  line({ id: 5, qty_expected: 0, qty_counted: 7, resolution: "surplus", delta: 7, delta_amount: "700.00" }),
+  line({ id: 6, resolution: "match" }),
+  line({ id: 7, qty_counted: null, resolution: "not_counted" }),
+];
+
+describe("шапка итогов", () => {
+  it("«всё сошлось» не появляется, пока обойдено не всё", () => {
+    const s = buildSummary([
+      line({ id: 1, resolution: "match" }),
+      line({ id: 2, qty_counted: null, resolution: "not_counted" }),
+    ]);
+    expect(s.hasDiff).toBe(false);
+    expect(s.headline?.tone).toBe("warn");
+    expect(s.headline?.text).toContain("1 позиция из 2");
+    expect(s.headline?.text).not.toContain("Обошли все позиции");
+  });
+
+  it("«всё сошлось» — только когда обойдено всё и расхождений нет", () => {
+    const s = buildSummary([line({ id: 1, resolution: "match" }), line({ id: 2, resolution: "match" })]);
+    expect(s.headline).toEqual({ tone: "ok", text: "Обошли все позиции — расхождений нет." });
+  });
+
+  it("обошли всё, но есть расхождения — плашки нет, говорят группы", () => {
+    const s = buildSummary([
+      line({ id: 1, resolution: "match" }),
+      line({ id: 2, qty_counted: 3, resolution: "shortage", delta: -2, delta_amount: "-200.00" }),
+    ]);
+    expect(s.headline).toBeNull();
+  });
+
+  it("непосчитанные при расхождениях тоже читаются предупреждением", () => {
+    const s = buildSummary(MIXED);
+    expect(s.headline?.tone).toBe("warn");
+    expect(s.headline?.text).toContain("не считали");
+  });
+
+  it("итог шапки сходится с суммой групп", () => {
+    const s = buildSummary(MIXED);
+    const sum = (parts: { totals: { qty: number; amount: number } }[]) =>
+      parts.reduce((a, p) => ({ qty: a.qty + p.totals.qty, amount: a.amount + p.totals.amount }), { qty: 0, amount: 0 });
+
+    expect(s.shortage.parts.map((p) => p.title)).toEqual(["Не нашли", "Не хватает"]);
+    expect(s.surplus.parts.map((p) => p.title)).toEqual(["Излишек", "Находки"]);
+    expect(sum(s.shortage.parts)).toEqual(s.shortage.total);
+    expect(sum(s.surplus.parts)).toEqual(s.surplus.total);
+  });
+
+  it("недостача и излишек считаются по группам с экрана, а не одной кучей", () => {
+    const s = buildSummary(MIXED);
+    // «не нашли» (5 + 4 шт) и «не хватает» (2 шт) разведены, как секции ниже
+    expect(s.shortage.parts[0].totals).toEqual({ qty: 9, amount: 500 });
+    expect(s.shortage.parts[1].totals).toEqual({ qty: 2, amount: 200 });
+    expect(s.shortage.total).toEqual({ qty: 11, amount: 700 });
+    // находки видны отдельным слагаемым, а не растворены в излишке
+    expect(s.surplus.parts[0].totals).toEqual({ qty: 3, amount: 300 });
+    expect(s.surplus.parts[1].totals).toEqual({ qty: 7, amount: 700 });
+    expect(s.surplus.total).toEqual({ qty: 10, amount: 1000 });
+  });
+
+  it("находки не раздувают «обошли X из Y»", () => {
+    const s = buildSummary(MIXED);
+    // 7 строк, из них одна находка: обходили 6 позиций, до одной не дошли
+    expect(s.finds).toBe(1);
+    expect(s.walked).toEqual({ done: 5, total: 6, left: 1 });
+    // «не дошли» из чипов и остаток обхода — одно и то же число
+    expect(s.groups.skipped).toHaveLength(s.walked.left);
+  });
+
+  it("строки без цены партии видны отдельно и не теряются", () => {
+    const s = buildSummary(MIXED);
+    expect(s.unpriced).toBe(1);
+    // штуки в шапку попали, деньги — нет: 9 шт «не нашли» стоят 500 ₽
+    expect(s.shortage.parts[0].totals).toEqual({ qty: 9, amount: 500 });
+  });
+
+  it("«без цены» — про расхождение, а не про сошедшуюся строку", () => {
+    expect(isUnpriced(line({ qty_counted: 0, resolution: "shortage", delta: -5, delta_amount: "0.00" }))).toBe(true);
+    expect(isUnpriced(line({ resolution: "match", delta: 0, delta_amount: "0.00" }))).toBe(false);
+    expect(isUnpriced(line({ qty_counted: 3, resolution: "shortage", delta: -2, delta_amount: "-200.00" }))).toBe(false);
+  });
+
+  it("копейки округляются один раз — слагаемые дают итог", () => {
+    const s = buildSummary([
+      line({ id: 1, qty_counted: 0, resolution: "shortage", delta: -5, delta_amount: "-100.50" }),
+      line({ id: 2, qty_counted: 3, resolution: "shortage", delta: -2, delta_amount: "-100.50" }),
+    ]);
+    expect(s.shortage.parts[0].totals.amount + s.shortage.parts[1].totals.amount)
+      .toBe(s.shortage.total.amount);
+  });
+});

mechanic-pwa/frontend/src/pages/warehouse/stocktakeSummary.ts

@@ -0,0 +1,245 @@
+/**
+ * Разбор проведённой инвентаризации в человеческие итоги.
+ *
+ * Вынесено из экрана отдельным модулем ради двух вещей: логику «во что попала
+ * строка» можно проверить тестом без рендера, а формулировки лежат в одном
+ * месте — их правят чаще, чем вёрстку.
+ *
+ * Бэкенд отдаёт только коды (resolution, reason_code) и голые числа; подписи
+ * для человека живут на клиенте. Словарь причин зеркалит backend
+ * stock_reasons.py — общего пакета между репозиториями нет, поэтому он
+ * продублирован; коды менять синхронно с бэкендом.
+ */
+import type { StocktakeLine } from "@/api/warehouse";
+
+export type ResultGroup =
+  | "missing"   // числилось, на полке пусто
+  | "shortage"  // нашли меньше, чем числилось
+  | "surplus"   // нашли больше, чем числилось
+  | "find"      // нашли то, чего в учёте не было
+  | "match"     // сошлось
+  | "skipped";  // до позиции не дошли
+
+/**
+ * Находка на ПРОВЕДЁННОЙ сессии. Родной признак batch_id === null тут не
+ * работает: при проведении находке создаётся партия и её id прописывается в
+ * строку, после чего находка неотличима от обычного излишка. Единственное, что
+ * остаётся в ответе, — qty_expected: находке он ставится в 0 и больше не
+ * меняется.
+ */
+export function isFind(l: StocktakeLine): boolean {
+  return l.resolution === "surplus" && l.qty_expected === 0;
+}
+
+export function groupOf(l: StocktakeLine): ResultGroup {
+  if (l.resolution === "not_counted") return "skipped";
+  if (l.resolution === "match") return "match";
+  if (l.resolution === "surplus") return isFind(l) ? "find" : "surplus";
+  // shortage: «дошли и не нашли ни одной» читается иначе, чем «нашли меньше»,
+  // поэтому недостача разводится на две группы.
+  return l.qty_counted === 0 ? "missing" : "shortage";
+}
+
+export interface GroupMeta {
+  key: ResultGroup;
+  title: string;
+  /** Пояснение под заголовком — что вообще значит эта группа. */
+  note?: string;
+  /** Свёрнуто по умолчанию: на большом пересчёте это сотни строк. */
+  collapsed?: boolean;
+}
+
+/** Порядок групп на экране: сначала то, из-за чего пересчёт и затевали. */
+export const GROUPS: GroupMeta[] = [
+  { key: "missing", title: "Не нашли", note: "числились на складе, на полке пусто" },
+  { key: "shortage", title: "Не хватает", note: "нашли меньше, чем числилось — разница списана" },
+  { key: "surplus", title: "Излишек", note: "нашли больше, чем числилось" },
+  { key: "find", title: "Находки", note: "лежали на полке, в учёте их не было" },
+  { key: "match", title: "Сошлось", collapsed: true },
+  { key: "skipped", title: "Не дошли", note: "эти позиции не считали — остались как были", collapsed: true },
+];
+
+export type Groups = Record<ResultGroup, StocktakeLine[]>;
+
+export function splitByGroup(lines: StocktakeLine[]): Groups {
+  const out: Groups = { missing: [], shortage: [], surplus: [], find: [], match: [], skipped: [] };
+  for (const l of lines) out[groupOf(l)].push(l);
+  return out;
+}
+
+/** Что стало с позицией — одной строкой, без слов «дельта» и «resolution». */
+export function countPhrase(l: StocktakeLine): string {
+  const expected = l.qty_expected;
+  const counted = l.qty_counted;
+  switch (groupOf(l)) {
+    case "missing":
+      return `числилось ${expected} → не нашли`;
+    case "shortage":
+      return `числилось ${expected} → нашли ${counted}, не хватает ${-l.delta}`;
+    case "surplus":
+      return `числилось ${expected} → нашли ${counted}, лишние ${l.delta}`;
+    case "find":
+      return `нашли ${counted} — в учёте не числилось`;
+    case "match":
+      return `числилось ${expected} — столько и нашли`;
+    default:
+      return `числилось ${expected} — до этой позиции не дошли`;
+  }
+}
+
+// ── Причины расхождения ────────────────────────────────────────────────────
+// Один и тот же код `resort` для излишка и недостачи означает разное, поэтому
+// подписи разведены по знаку расхождения — как в CRM.
+
+const SURPLUS_REASONS: Record<string, string> = {
+  resort: "Лежала не там / из другой зоны",
+  back_from_car: "Сняли с машины / из ремонта, не оприходовали",
+  unrecorded_receipt: "Неучтённый приход",
+  count_fix: "Правка прошлого просчёта",
+  other: "Другое",
+};
+
+const SHORTAGE_REASONS: Record<string, string> = {
+  issued_unposted: "Поставили на машину, не списали",
+  resort: "Учтено в другой зоне / пересорт",
+  lost: "Утеря / не найдено",
+  damaged_unposted: "Выкинули по браку, не провели",
+  other: "Другое",
+};
+
+/** Подпись причины; незнакомый код показываем как есть, чтобы не терять данные. */
+export function reasonLabel(code: string | null | undefined, positive: boolean): string | null {
+  if (!code) return null;
+  const dict = positive ? SURPLUS_REASONS : SHORTAGE_REASONS;
+  return dict[code] ?? SURPLUS_REASONS[code] ?? SHORTAGE_REASONS[code] ?? code;
+}
+
+/** Сколько денег стоит расхождение по строке — всегда положительное число. */
+export function lineAmount(l: StocktakeLine): number {
+  return Math.abs(Number(l.delta_amount || 0));
+}
+
+/**
+ * Расхождение есть, а денег нет: у партии не проставлена цена (фантомные
+ * партии, прошлые находки без закупки). Такую строку нельзя молча ронять из
+ * сумм — иначе шапку принимают за полную картину недостачи.
+ */
+export function isUnpriced(l: StocktakeLine): boolean {
+  return l.delta !== 0 && lineAmount(l) === 0;
+}
+
+/** 1 → «позиция», 2..4 → «позиции», 5+/11..14 → «позиций». */
+export function pluralPositions(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 "позиций";
+}
+
+// ── Итоги для шапки документа ──────────────────────────────────────────────
+//
+// Всё считаем по тем же строкам, что показаны группами ниже, а НЕ берём из
+// шапки ответа бэкенда: там shortage_amount = «не нашли» + «не хватает», а
+// surplus_amount включает находки, вынесенные на экране в отдельную секцию.
+// Сверить такую шапку с группами невозможно — цифры расходятся в разы. Считая
+// по группам, получаем сходимость по определению, а не по совпадению.
+
+/** Итог по группе: сколько штук и на сколько денег. */
+export interface GroupTotals {
+  qty: number;
+  amount: number;
+}
+
+/** Блок денег в шапке: итог и его слагаемые — ровно группы с экрана. */
+export interface MoneyBlock {
+  total: GroupTotals;
+  parts: { key: ResultGroup; title: string; totals: GroupTotals }[];
+}
+
+export interface Headline {
+  /** warn — обойдено не всё; такой документ нельзя читать как «зона чистая». */
+  tone: "ok" | "warn";
+  text: string;
+}
+
+export interface StocktakeSummary {
+  groups: Groups;
+  /**
+   * Обход списка. Находки не в счёт: они появились сверх списка и завышали бы
+   * долю обойдённого (бэкендовые lines_total/lines_counted их включают).
+   */
+  walked: { done: number; total: number; left: number };
+  finds: number;
+  shortage: MoneyBlock;
+  surplus: MoneyBlock;
+  /** Строк с расхождением, которые не дали денег из-за отсутствия цены. */
+  unpriced: number;
+  hasDiff: boolean;
+  /** null — обошли всё и расхождения есть: группы ниже говорят сами за себя. */
+  headline: Headline | null;
+}
+
+function titleOf(key: ResultGroup): string {
+  return GROUPS.find((g) => g.key === key)?.title ?? key;
+}
+
+function totalsOf(lines: StocktakeLine[]): GroupTotals {
+  let qty = 0;
+  let amount = 0;
+  for (const l of lines) {
+    qty += Math.abs(l.delta);
+    amount += lineAmount(l);
+  }
+  // Округляем на уровне группы: иначе слагаемые в шапке округляются каждое
+  // само по себе и визуально не дают итог — та самая «не сходится».
+  return { qty, amount: Math.round(amount) };
+}
+
+function blockOf(groups: Groups, keys: ResultGroup[]): MoneyBlock {
+  const parts = keys.map((key) => ({ key, title: titleOf(key), totals: totalsOf(groups[key]) }));
+  const total = parts.reduce(
+    (acc, p) => ({ qty: acc.qty + p.totals.qty, amount: acc.amount + p.totals.amount }),
+    { qty: 0, amount: 0 },
+  );
+  return { total, parts };
+}
+
+export function buildSummary(lines: StocktakeLine[]): StocktakeSummary {
+  const groups = splitByGroup(lines);
+  const finds = groups.find.length;
+  const total = lines.length - finds;
+  const left = groups.skipped.length;
+
+  const shortage = blockOf(groups, ["missing", "shortage"]);
+  const surplus = blockOf(groups, ["surplus", "find"]);
+  const hasDiff =
+    groups.missing.length + groups.shortage.length + groups.surplus.length + finds > 0;
+
+  // «Всё сошлось» имеет право появиться, только когда обойдено ВСЁ и
+  // расхождений нет. Непосчитанная позиция — это не «сошлось», а неизвестность,
+  // и на самом заметном месте документа она должна читаться предупреждением.
+  const headline: Headline | null =
+    left === 0
+      ? hasDiff
+        ? null
+        : { tone: "ok", text: "Обошли все позиции — расхождений нет." }
+      : {
+          tone: "warn",
+          text: hasDiff
+            ? `Обойдено не всё: ${left} ${pluralPositions(left)} из ${total} не считали. Расхождения ниже — только по тому, что успели посчитать.`
+            : `Среди посчитанного расхождений нет, но обойдено не всё: ${left} ${pluralPositions(left)} из ${total} не считали — что там на полке, неизвестно.`,
+        };
+
+  return {
+    groups,
+    walked: { done: total - left, total, left },
+    finds,
+    shortage,
+    surplus,
+    unpriced: lines.filter(isUnpriced).length,
+    hasDiff,
+    headline,
+  };
+}

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