refactor(pwa): extract shared WorksPickerModal from Create/EditRepairPage

The two repair forms genuinely diverged in UX (inline price-unlock + photos
vs modal override, no photos), so a single merged form would be worse. The
real duplication was the works-catalog picker modal — extracted into one
tested presentational component, removing ~75 duplicated lines.

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

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/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/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/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/CreateRepairPage.tsx

@@ -21,6 +21,8 @@ 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 {
   createRepair,
   getCarContext,
@@ -298,20 +300,8 @@ export default function CreateRepairPage() {
 
   // ── Submit ───────────────────────────────────────────────────────────────
 
-  const canSubmit = () =>
+  const canSubmit = () => repairCanSubmit(photos, works);
-    photos.length > 0 &&
+  const submitWhyDisabled = (): string => repairSubmitWhyDisabled(photos, works);
-    photos.every((p) => p.status === "uploaded") &&
-    works.length > 0 &&
-    works.every((w) => !w.unlocked || w.override_comment.trim().length > 0);
-
-  const submitWhyDisabled = (): string => {
-    if (photos.length === 0) return "Добавьте хотя бы одно фото";
-    if (photos.some((p) => p.status !== "uploaded")) return "Дождитесь окончания загрузки фото";
-    if (works.length === 0) return "Добавьте хотя бы одну работу";
-    const unlockedNoComment = works.find((w) => w.unlocked && !w.override_comment.trim());
-    if (unlockedNoComment) return "Укажите комментарий к ручной правке цены";
-    return "";
-  };
 
   const onSubmit = async () => {
     const reason = submitWhyDisabled();
@@ -709,54 +699,15 @@ export default function CreateRepairPage() {
         </section>
       </main>
 
-      {/* Works picker modal */}
+      {/* Works picker modal — общий компонент (см. WorksPickerModal) */}
       {worksPicker.open && (
-        <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
+        <WorksPickerModal
-          <header className="border-b p-3 flex items-center gap-2">
+          query={worksPicker.q}
-            <Button variant="ghost" size="sm" onClick={() => setWorksPicker({ open: false, q: "", results: [] })}>
+          results={worksPicker.results}
-              Отмена
+          onQuery={queryWorks}
-            </Button>
+          onPick={addWorkFromCatalog}
-            <Input
+          onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
-              autoFocus
-              placeholder="Поиск работы…"
-              value={worksPicker.q}
-              onChange={(e) => queryWorks(e.target.value)}
         />
-          </header>
-          <main className="flex-1 overflow-y-auto">
-            <ul className="divide-y">
-              {worksPicker.results.map((w) => (
-                <li key={w.id}>
-                  <button
-                    type="button"
-                    onClick={() => addWorkFromCatalog(w)}
-                    className="w-full text-left p-3 hover:bg-accent/40 flex items-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',
-                      }}
-                    >
-                      {w.name}
-                    </span>
-                    <span className="text-sm text-muted-foreground font-mono whitespace-nowrap shrink-0 mt-0.5">
-                      {fmtPrice(w.price)} ₽
-                    </span>
-                  </button>
-                </li>
-              ))}
-              {worksPicker.results.length === 0 && (
-                <li className="p-6 text-center text-sm text-muted-foreground">
-                  Нет работ по запросу
-                </li>
-              )}
-            </ul>
-          </main>
-        </div>
       )}
     </div>
   );

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

@@ -17,6 +17,7 @@ import {
   type RepairDetailResponse,
 } from "@/api/repairsFeed";
 import { searchWorks, suggestParts, type MechWork } from "@/api/repairsCreate";
+import WorksPickerModal from "@/components/repairs/WorksPickerModal";
 
 interface WorkRow {
   rowKey: string;
@@ -376,41 +377,15 @@ export default function EditRepairPage() {
         </footer>
       )}
 
-      {/* Works picker modal */}
+      {/* Works picker modal — общий компонент (см. WorksPickerModal) */}
       {worksPicker.open && (
-        <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
+        <WorksPickerModal
-          <header className="border-b p-3 flex items-center gap-2">
+          query={worksPicker.q}
-            <button onClick={() => setWorksPicker({ open: false, q: "", results: [] })}
+          results={worksPicker.results}
-                    className="rounded-full p-2 hover:bg-accent">
+          onQuery={queryWorks}
-              <ChevronLeft className="h-5 w-5" />
+          onPick={pickWork}
-            </button>
+          onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
-            <Input
-              autoFocus
-              placeholder="Поиск работы…"
-              value={worksPicker.q}
-              onChange={(e) => queryWorks(e.target.value)}
         />
-          </header>
-          <div className="flex-1 overflow-auto">
-            {worksPicker.results.map((mw) => (
-              <button
-                key={mw.id}
-                onClick={() => pickWork(mw)}
-                className="w-full text-left p-3 border-b hover:bg-accent/40"
-              >
-                <div className="text-sm font-medium">{mw.name}</div>
-                <div className="text-xs text-muted-foreground font-mono">
-                  {fmt(Number(mw.price))} ₽
-                </div>
-              </button>
-            ))}
-            {worksPicker.results.length === 0 && (
-              <div className="text-center text-muted-foreground p-8 text-sm">
-                Ничего не найдено
-              </div>
-            )}
-          </div>
-        </div>
       )}
 
       {/* Override modal */}

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

@@ -15,6 +15,7 @@ import { Button } from "@/components/ui/button";
 import { useRepairsFeed } from "@/hooks/useRepairsFeed";
 import { formatFeedTimestamp } from "@/lib/timeFormat";
 import { getRepairsMonthStats, type FeedItem } from "@/api/repairsFeed";
+import { groupByLocalDay, formatDayLabel, fmtMoney, pluralRepairs, pluralWorks } from "@/lib/repairsFeed";
 
 export default function RepairsFeedPage() {
   const navigate = useNavigate();
@@ -170,56 +171,8 @@ export default function RepairsFeedPage() {
 }
 
 
-// ── Группировка по локальной дате (Asia/Vladivostok) ────────────────────────
+// Группировка по локальной дате (VLA), форматирование сумм/склонений —
-
+// в @/lib/repairsFeed (покрыто юнит-тестами).
-interface DayGroup {
-  key: string; // YYYY-MM-DD (VLAT)
-  items: FeedItem[];
-  total: number;
-}
-
-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;
-  }
-  // Items already sorted DESC by created_at, so keys naturally come in
-  // newest-first order from the Map.
-  return Array.from(map.values());
-}
-
-function toLocalDateKey(iso: string): string {
-  // ISO → date in Asia/Vladivostok (+10).
-  const d = new Date(iso);
-  // ru-RU sv-style → YYYY-MM-DD via Intl with explicit TZ.
-  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
-}
-
-function formatDayLabel(key: string): string {
-  // key = YYYY-MM-DD → «26 мая» / «Сегодня» / «Вчера»
-  const today = toLocalDateKey(new Date().toISOString());
-  if (key === today) return "Сегодня";
-  // Yesterday in same TZ:
-  const now = new Date();
-  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);
-}
 
 function DaySeparator({ dateKey, total, count }: { dateKey: string; total: number; count: number }) {
   return (
@@ -292,20 +245,6 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
 }
 
 
-function fmtMoney(n: number): string {
-  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
-}
-
-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 "ремонтов";
-}
-
-
 function WorksLine({ works, extra }: { works: string[]; extra: number }) {
   // У40: ellipsis в одну строку. Соединяем имена работ через «·».
   if (works.length === 0) return null;
@@ -319,17 +258,6 @@ function WorksLine({ works, extra }: { works: string[]; extra: number }) {
 }
 
 
-function pluralWorks(n: number): string {
-  // 1 → «работа», 2..4 → «работы», 5+ → «работ»
-  const mod10 = n % 10;
-  const mod100 = n % 100;
-  if (mod100 >= 11 && mod100 <= 14) return "работ";
-  if (mod10 === 1) return "работа";
-  if (mod10 >= 2 && mod10 <= 4) return "работы";
-  return "работ";
-}
-
-
 function EmptyState({ onAdd }: { onAdd: () => void }) {
   return (
     <div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">

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

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

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

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

mechanic-pwa/frontend/tsconfig.app.json

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

mechanic-pwa/frontend/vitest.config.ts

@@ -0,0 +1,20 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+
+// Отдельный конфиг для тестов — без VitePWA-плагина (он не нужен в jsdom и
+// только шумит). Алиас `@` и React-плагин обязательны для компонентных тестов.
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "src") },
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+    css: false,
+    include: ["src/**/*.test.{ts,tsx}"],
+  },
+});