Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
39176d2694 | ||
|
|
58c9a2ca1e | ||
|
|
3cc9ffb3e6 | ||
|
|
5a65f8f1ca | ||
|
|
b7302c23d6 | ||
|
|
bbaef9bc7d | ||
|
|
4c1df109ca | ||
|
|
26c0261784 | ||
|
|
2c02d15a10 | ||
|
|
226b1ca6c1 | ||
|
|
ce4b50109a | ||
|
|
3c27b794dd |
Generated
+1345
-1
File diff suppressed because it is too large
Load Diff
@@ -7,7 +7,9 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc -b && vite build",
|
"build": "tsc -b && vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
@@ -29,19 +31,25 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@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/node": "^24.12.4",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"@vitest/coverage-v8": "^4.1.8",
|
||||||
"autoprefixer": "^10.5.0",
|
"autoprefixer": "^10.5.0",
|
||||||
"eslint": "^10.3.0",
|
"eslint": "^10.3.0",
|
||||||
"eslint-plugin-react-hooks": "^7.1.1",
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
"globals": "^17.6.0",
|
"globals": "^17.6.0",
|
||||||
|
"jsdom": "^29.1.1",
|
||||||
"postcss": "^8.5.14",
|
"postcss": "^8.5.14",
|
||||||
"tailwindcss": "^3.4.19",
|
"tailwindcss": "^3.4.19",
|
||||||
"typescript": "~6.0.2",
|
"typescript": "~6.0.2",
|
||||||
"typescript-eslint": "^8.59.2",
|
"typescript-eslint": "^8.59.2",
|
||||||
"vite": "^8.0.12"
|
"vite": "^8.0.12",
|
||||||
|
"vitest": "^4.1.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import { Routes, Route, Navigate } from "react-router-dom";
|
import { Routes, Route, Navigate } from "react-router-dom";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { useAuth } from "@/store/auth";
|
import { useAuth } from "@/store/auth";
|
||||||
|
import { getMe } from "@/api/me";
|
||||||
import { useMeSync } from "@/hooks/useMeSync";
|
import { useMeSync } from "@/hooks/useMeSync";
|
||||||
import Login from "@/pages/Login";
|
import Login from "@/pages/Login";
|
||||||
import ActionMenu from "@/pages/ActionMenu";
|
import ActionMenu from "@/pages/ActionMenu";
|
||||||
@@ -9,8 +11,15 @@ import InspectionEditor from "@/pages/InspectionEditor";
|
|||||||
import InspectionReview from "@/pages/InspectionReview";
|
import InspectionReview from "@/pages/InspectionReview";
|
||||||
import TtStateDetail from "@/pages/TtStateDetail";
|
import TtStateDetail from "@/pages/TtStateDetail";
|
||||||
import RepairsFeedPage from "@/pages/repairs/RepairsFeedPage";
|
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 CarSelectPage from "@/pages/repairs/CarSelectPage";
|
||||||
import CreateRepairPage from "@/pages/repairs/CreateRepairPage";
|
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 StocktakeSessionPage from "@/pages/warehouse/StocktakeSessionPage";
|
||||||
|
|
||||||
function RequireAuth({ children }: { children: React.ReactNode }) {
|
function RequireAuth({ children }: { children: React.ReactNode }) {
|
||||||
const token = useAuth((s) => s.token);
|
const token = useAuth((s) => s.token);
|
||||||
@@ -18,6 +27,20 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
|
|||||||
return <>{children}</>;
|
return <>{children}</>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Складские разделы пока только админам. Сервер и так отдаёт 403, но без
|
||||||
|
* клиентской проверки прямой ссылкой можно было бы открыть пустой экран с
|
||||||
|
* ошибкой — это читается как поломка, а не как «вам сюда нельзя».
|
||||||
|
*/
|
||||||
|
function RequireAdmin({ children }: { children: React.ReactNode }) {
|
||||||
|
const token = useAuth((s) => s.token);
|
||||||
|
const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
|
||||||
|
if (!token) return <Navigate to="/login" replace />;
|
||||||
|
if (meQuery.isLoading) return null;
|
||||||
|
if (!meQuery.data?.is_admin) return <Navigate to="/" replace />;
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
// У35: фоновая сверка прав механика раз в 5 минут — выкидывает на /login
|
// У35: фоновая сверка прав механика раз в 5 минут — выкидывает на /login
|
||||||
// с сообщением «Доступ отозван», если админ снял can_login_pwa или вывел
|
// с сообщением «Доступ отозван», если админ снял can_login_pwa или вывел
|
||||||
@@ -37,6 +60,15 @@ export default function App() {
|
|||||||
<Route path="/repairs" element={<RequireAuth><RepairsFeedPage /></RequireAuth>} />
|
<Route path="/repairs" element={<RequireAuth><RepairsFeedPage /></RequireAuth>} />
|
||||||
<Route path="/repairs/new" element={<RequireAuth><CarSelectPage /></RequireAuth>} />
|
<Route path="/repairs/new" element={<RequireAuth><CarSelectPage /></RequireAuth>} />
|
||||||
<Route path="/repairs/new/:carId" element={<RequireAuth><CreateRepairPage /></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="*" element={<Navigate to="/" replace />} />
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -29,6 +29,18 @@ export interface PartSuggestion {
|
|||||||
name: string;
|
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 {
|
export interface PresignResponse {
|
||||||
photo_uuid: string;
|
photo_uuid: string;
|
||||||
extension: string;
|
extension: string;
|
||||||
@@ -53,25 +65,52 @@ export interface CreateWorkPayload {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface CreatePartPayload {
|
export interface CreatePartPayload {
|
||||||
name: string;
|
part_id: number;
|
||||||
qty: number;
|
qty: number;
|
||||||
|
name?: string; // снимок имени (сервер возьмёт из каталога, если пусто)
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CreateOilChangePayload {
|
export interface CreateOilChangePayload {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
mileage_at_change: number | null;
|
mileage_at_change: number | null;
|
||||||
next_in_km: number;
|
next_in_km: number;
|
||||||
|
oil_type: string; // engine | cvt | akpp
|
||||||
sticker_photo_uuid: string | null;
|
sticker_photo_uuid: string | null;
|
||||||
sticker_extension: string | null;
|
sticker_extension: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ExternalCarPayload {
|
||||||
|
plate: string;
|
||||||
|
make: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
export interface CreateRepairPayload {
|
export interface CreateRepairPayload {
|
||||||
car_id: number;
|
car_id?: number;
|
||||||
|
external_car?: ExternalCarPayload;
|
||||||
mileage: number | null;
|
mileage: number | null;
|
||||||
works: CreateWorkPayload[];
|
works: CreateWorkPayload[];
|
||||||
parts: CreatePartPayload[];
|
parts: CreatePartPayload[];
|
||||||
photos: CreatePhotoPayload[];
|
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 {
|
export interface CreateRepairResponse {
|
||||||
@@ -100,6 +139,25 @@ export async function suggestParts(q: string): Promise<PartSuggestion[]> {
|
|||||||
.json<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> {
|
export async function presignPhoto(extension: string, photo_uuid?: string): Promise<PresignResponse> {
|
||||||
return api
|
return api
|
||||||
.post("repairs/photos/presign", {
|
.post("repairs/photos/presign", {
|
||||||
|
|||||||
@@ -12,8 +12,13 @@ export interface FeedItem {
|
|||||||
car_model: string | null;
|
car_model: string | null;
|
||||||
driver_name: string | null;
|
driver_name: string | null;
|
||||||
mechanic_name: string;
|
mechanic_name: string;
|
||||||
|
// Пробег на момент ремонта. Бэкенд отдавал его и раньше, но лента поле не
|
||||||
|
// забирала — чтобы посмотреть, приходилось проваливаться в каждый ремонт.
|
||||||
|
mileage: number | null;
|
||||||
|
is_external: boolean;
|
||||||
works_preview: FeedWorkBrief[];
|
works_preview: FeedWorkBrief[];
|
||||||
works_extra: number;
|
works_extra: number;
|
||||||
|
works_total: number; // сумма работ без запчастей
|
||||||
photo_url: string | null;
|
photo_url: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -25,14 +30,137 @@ export interface FeedResponse {
|
|||||||
export interface FeedParams {
|
export interface FeedParams {
|
||||||
limit?: number;
|
limit?: number;
|
||||||
cursor?: string | null;
|
cursor?: string | null;
|
||||||
|
// Поисковая подстрока: госномер, марка или модель.
|
||||||
|
q?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedResponse> {
|
export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedResponse> {
|
||||||
const search = new URLSearchParams();
|
const search = new URLSearchParams();
|
||||||
if (params.limit) search.set("limit", String(params.limit));
|
if (params.limit) search.set("limit", String(params.limit));
|
||||||
if (params.cursor) search.set("cursor", params.cursor);
|
if (params.cursor) search.set("cursor", params.cursor);
|
||||||
|
// Пустой/пробельный запрос не шлём — это обычная лента, а не поиск.
|
||||||
|
const q = params.q?.trim();
|
||||||
|
if (q) search.set("q", q);
|
||||||
const qs = search.toString();
|
const qs = search.toString();
|
||||||
return api
|
return api
|
||||||
.get(`repairs${qs ? `?${qs}` : ""}`)
|
.get(`repairs${qs ? `?${qs}` : ""}`)
|
||||||
.json<FeedResponse>();
|
.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>();
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,352 @@
|
|||||||
|
/**
|
||||||
|
* Склад в 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 }>();
|
||||||
|
}
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
/**
|
||||||
|
* Блок «Механики» формы ремонта — чипы работавших механиков + кнопка
|
||||||
|
* «Добавить механика» (пикер из ростера) + удаление чипа.
|
||||||
|
*
|
||||||
|
* Делёж оплаты — поровну (1/N): доля каждого механика = total_sum / N.
|
||||||
|
* Здесь показывается информативно (сумма на чел.), если передан totalSum.
|
||||||
|
*
|
||||||
|
* Состояние выбора живёт в родителе (как у WorksPickerModal): сюда
|
||||||
|
* приходит value + onChange. Ростер компонент тянет сам при первом
|
||||||
|
* открытии пикера (лениво) и кэширует на время жизни.
|
||||||
|
*/
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Plus, X } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { fmtMoney } from "@/lib/repairsFeed";
|
||||||
|
import { getMechanicsRoster, type MechanicRosterItem } from "@/api/repairsCreate";
|
||||||
|
|
||||||
|
export interface SelectedMechanic {
|
||||||
|
mechanic_id: number;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value: SelectedMechanic[];
|
||||||
|
onChange: (next: SelectedMechanic[]) => void;
|
||||||
|
// Если задан и механиков >0 — показываем долю (1/N · totalSum).
|
||||||
|
totalSum?: number;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MechanicsField({ value, onChange, totalSum, disabled }: Props) {
|
||||||
|
const [pickerOpen, setPickerOpen] = useState(false);
|
||||||
|
const [roster, setRoster] = useState<MechanicRosterItem[] | null>(null);
|
||||||
|
const [rosterError, setRosterError] = useState<string | null>(null);
|
||||||
|
const [q, setQ] = useState("");
|
||||||
|
|
||||||
|
const openPicker = async () => {
|
||||||
|
setPickerOpen(true);
|
||||||
|
if (roster) return;
|
||||||
|
try {
|
||||||
|
const list = await getMechanicsRoster();
|
||||||
|
setRoster(list);
|
||||||
|
setRosterError(null);
|
||||||
|
} catch (e) {
|
||||||
|
setRosterError((e as Error).message || "Не удалось загрузить список механиков");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addMechanic = (m: MechanicRosterItem) => {
|
||||||
|
// Дедуп: один механик один раз (UNIQUE на бэке).
|
||||||
|
if (!value.some((v) => v.mechanic_id === m.id)) {
|
||||||
|
onChange([...value, { mechanic_id: m.id, name: m.full_name }]);
|
||||||
|
}
|
||||||
|
setPickerOpen(false);
|
||||||
|
setQ("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeMechanic = (mechanicId: number) =>
|
||||||
|
onChange(value.filter((v) => v.mechanic_id !== mechanicId));
|
||||||
|
|
||||||
|
const share =
|
||||||
|
totalSum != null && value.length > 0 ? Math.round(totalSum / value.length) : null;
|
||||||
|
|
||||||
|
const filtered = (roster ?? []).filter((m) =>
|
||||||
|
q.trim() ? m.full_name.toLowerCase().includes(q.trim().toLowerCase()) : true,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className="flex items-baseline justify-between">
|
||||||
|
<Label className="text-sm">Механики</Label>
|
||||||
|
{!disabled && (
|
||||||
|
<Button variant="outline" size="sm" onClick={openPicker}>
|
||||||
|
<Plus className="h-3 w-3 mr-1" />
|
||||||
|
Добавить механика
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{value.length === 0 ? (
|
||||||
|
<div className="text-xs text-muted-foreground mt-2">Минимум один механик</div>
|
||||||
|
) : (
|
||||||
|
<div className="mt-2 flex flex-wrap gap-2">
|
||||||
|
{value.map((m) => (
|
||||||
|
<span
|
||||||
|
key={m.mechanic_id}
|
||||||
|
className="inline-flex items-center gap-1.5 rounded-full border bg-muted/50 pl-3 pr-1.5 py-1 text-sm"
|
||||||
|
>
|
||||||
|
<span className="leading-none">{m.name}</span>
|
||||||
|
{!disabled && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => removeMechanic(m.mechanic_id)}
|
||||||
|
className="rounded-full p-0.5 hover:bg-accent text-muted-foreground"
|
||||||
|
aria-label={`Убрать ${m.name}`}
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{share != null && value.length > 1 && (
|
||||||
|
<div className="mt-2 text-xs text-muted-foreground">
|
||||||
|
Делёж поровну: {fmtMoney(share)} ₽ на каждого ({value.length} мех.)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Пикер механиков из ростера */}
|
||||||
|
{pickerOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
|
||||||
|
<header className="border-b p-3 flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setPickerOpen(false);
|
||||||
|
setQ("");
|
||||||
|
}}
|
||||||
|
className="rounded-full px-3 py-2 text-sm hover:bg-accent"
|
||||||
|
>
|
||||||
|
Закрыть
|
||||||
|
</button>
|
||||||
|
<Input
|
||||||
|
autoFocus
|
||||||
|
placeholder="Поиск механика…"
|
||||||
|
value={q}
|
||||||
|
onChange={(e) => setQ(e.target.value)}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{rosterError && (
|
||||||
|
<div className="text-sm text-destructive bg-destructive/10 m-3 rounded-md p-3">
|
||||||
|
{rosterError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{roster === null && !rosterError && (
|
||||||
|
<div className="text-center text-muted-foreground p-8 text-sm">Загрузка…</div>
|
||||||
|
)}
|
||||||
|
{filtered.map((m) => {
|
||||||
|
const already = value.some((v) => v.mechanic_id === m.id);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={m.id}
|
||||||
|
disabled={already}
|
||||||
|
onClick={() => addMechanic(m)}
|
||||||
|
className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-center justify-between gap-3 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span className="text-sm">{m.full_name}</span>
|
||||||
|
{already && <span className="text-xs text-muted-foreground">уже добавлен</span>}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{roster !== null && !rosterError && filtered.length === 0 && (
|
||||||
|
<div className="text-center text-muted-foreground p-8 text-sm">
|
||||||
|
Ничего не найдено
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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");
|
||||||
|
});
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import { vi } from "vitest";
|
||||||
|
import WorksPickerModal from "@/components/repairs/WorksPickerModal";
|
||||||
|
import type { MechWork } from "@/api/repairsCreate";
|
||||||
|
|
||||||
|
const works: MechWork[] = [
|
||||||
|
{ id: 1, name: "Замена масла", category_id: 1, price: 1500, norma_hours: null },
|
||||||
|
{ id: 2, name: "Развал-схождение", category_id: 1, price: "2000", norma_hours: null },
|
||||||
|
];
|
||||||
|
|
||||||
|
test("рендерит работы с ценой и зовёт onPick по клику", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
const onPick = vi.fn();
|
||||||
|
render(
|
||||||
|
<WorksPickerModal query="" results={works} onQuery={() => {}} onPick={onPick} onClose={() => {}} />,
|
||||||
|
);
|
||||||
|
expect(screen.getByText("Замена масла")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("1 500 ₽")).toBeInTheDocument(); // число из 1500
|
||||||
|
expect(screen.getByText("2 000 ₽")).toBeInTheDocument(); // строка "2000" → число
|
||||||
|
await user.click(screen.getByText("Развал-схождение"));
|
||||||
|
expect(onPick).toHaveBeenCalledWith(works[1]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("пустой список → «Ничего не найдено»", () => {
|
||||||
|
render(
|
||||||
|
<WorksPickerModal query="x" results={[]} onQuery={() => {}} onPick={() => {}} onClose={() => {}} />,
|
||||||
|
);
|
||||||
|
expect(screen.getByText("Ничего не найдено")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("ввод в поиск зовёт onQuery; кнопка назад — onClose", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
const onQuery = vi.fn();
|
||||||
|
const onClose = vi.fn();
|
||||||
|
render(
|
||||||
|
<WorksPickerModal query="" results={[]} onQuery={onQuery} onPick={() => {}} onClose={onClose} />,
|
||||||
|
);
|
||||||
|
await user.type(screen.getByPlaceholderText("Поиск работы…"), "масло");
|
||||||
|
expect(onQuery).toHaveBeenCalled();
|
||||||
|
await user.click(screen.getByLabelText("Закрыть"));
|
||||||
|
expect(onClose).toHaveBeenCalled();
|
||||||
|
});
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
/**
|
||||||
|
* Модалка выбора работы из каталога. Раньше была продублирована почти один-в-один
|
||||||
|
* в CreateRepairPage и EditRepairPage — вынесена в общий презентационный компонент.
|
||||||
|
*
|
||||||
|
* Состояние (открыта/запрос/результаты) живёт в родителе; здесь только UI +
|
||||||
|
* колбэки. Это сознательно: формы создания и правки ремонта разошлись по UX
|
||||||
|
* (inline-разблокировка цены против модалки-override, фото против их отсутствия),
|
||||||
|
* поэтому единая «форма ремонта» была бы хуже — общим является именно этот пикер.
|
||||||
|
*/
|
||||||
|
import { ChevronLeft } from "lucide-react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { fmtMoney } from "@/lib/repairsFeed";
|
||||||
|
import type { MechWork } from "@/api/repairsCreate";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
query: string;
|
||||||
|
results: MechWork[];
|
||||||
|
onQuery: (q: string) => void;
|
||||||
|
onPick: (work: MechWork) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WorksPickerModal({ query, results, onQuery, onPick, onClose }: Props) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
|
||||||
|
<header className="border-b p-3 flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="rounded-full p-2 hover:bg-accent"
|
||||||
|
aria-label="Закрыть"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<Input
|
||||||
|
autoFocus
|
||||||
|
placeholder="Поиск работы…"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => onQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{results.map((mw) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={mw.id}
|
||||||
|
onClick={() => onPick(mw)}
|
||||||
|
className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-start justify-between gap-3"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="flex-1 min-w-0 text-sm leading-snug break-words"
|
||||||
|
style={{
|
||||||
|
display: "-webkit-box",
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: "vertical",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{mw.name}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-muted-foreground font-mono whitespace-nowrap shrink-0 mt-0.5">
|
||||||
|
{fmtMoney(Number(mw.price))} ₽
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{results.length === 0 && (
|
||||||
|
<div className="text-center text-muted-foreground p-8 text-sm">
|
||||||
|
Ничего не найдено
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,42 +3,122 @@
|
|||||||
*
|
*
|
||||||
* Использует `useInfiniteQuery` для бесконечной пагинации по 20 (У38).
|
* Использует `useInfiniteQuery` для бесконечной пагинации по 20 (У38).
|
||||||
* На `visibilitychange` (когда вкладка/приложение получают фокус) —
|
* На `visibilitychange` (когда вкладка/приложение получают фокус) —
|
||||||
* автоматический рефреш первой страницы. Pull-to-refresh вызывается
|
* автоматическое обновление через `refresh()`. Кнопка «Обновить» в шапке
|
||||||
* напрямую из компонента через `refetch()`.
|
* вызывает тот же `refresh()`.
|
||||||
|
*
|
||||||
|
* Поддерживает поиск по подстроке (госномер/марка/модель): `q` уходит
|
||||||
|
* в каждый запрос страницы и входит в ключ кэша. При смене запроса на
|
||||||
|
* экране остаётся прошлая выдача (`keepPreviousData`), а не скелетоны.
|
||||||
*
|
*
|
||||||
* SWR-кэш живёт в react-query (память + localStorage persist уже
|
* SWR-кэш живёт в react-query (память + localStorage persist уже
|
||||||
* сконфигурирован в QueryClient на уровне приложения, если такого нет —
|
* сконфигурирован в QueryClient на уровне приложения, если такого нет —
|
||||||
* первая отрисовка идёт без кэша, но дальше работает).
|
* первая отрисовка идёт без кэша, но дальше работает).
|
||||||
*/
|
*/
|
||||||
import { useEffect } from "react";
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import { useInfiniteQuery, type QueryKey } from "@tanstack/react-query";
|
import {
|
||||||
|
keepPreviousData,
|
||||||
|
useInfiniteQuery,
|
||||||
|
useQueryClient,
|
||||||
|
type InfiniteData,
|
||||||
|
type QueryKey,
|
||||||
|
} from "@tanstack/react-query";
|
||||||
import { getRepairsFeed, type FeedItem, type FeedResponse } from "@/api/repairsFeed";
|
import { getRepairsFeed, type FeedItem, type FeedResponse } from "@/api/repairsFeed";
|
||||||
|
|
||||||
export const FEED_QUERY_KEY: QueryKey = ["repairs-feed"];
|
export const FEED_QUERY_KEY: QueryKey = ["repairs-feed"];
|
||||||
export const FEED_PAGE_SIZE = 20;
|
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 }) =>
|
queryFn: ({ pageParam }) =>
|
||||||
getRepairsFeed({ limit: FEED_PAGE_SIZE, cursor: (pageParam as string | null) ?? null }),
|
// q передаём на КАЖДОЙ странице — иначе догрузка вернёт нефильтрованный
|
||||||
initialPageParam: null as string | null,
|
// хвост и подмешает в результаты поиска чужие ремонты.
|
||||||
|
getRepairsFeed({
|
||||||
|
limit: FEED_PAGE_SIZE,
|
||||||
|
cursor: pageParam,
|
||||||
|
q: search,
|
||||||
|
}),
|
||||||
|
initialPageParam: null,
|
||||||
getNextPageParam: (last) => last.next_cursor ?? undefined,
|
getNextPageParam: (last) => last.next_cursor ?? undefined,
|
||||||
staleTime: 30_000, // 30 секунд считаем «свежим» — потом фон обновляет
|
staleTime: 30_000, // 30 секунд считаем «свежим» — потом фон обновляет
|
||||||
refetchOnWindowFocus: false, // делаем свой visibilitychange-листенер ниже
|
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: обновление при возврате в приложение/вкладку.
|
// У38: обновление при возврате в приложение/вкладку.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onVisible = () => {
|
const onVisible = () => {
|
||||||
if (document.visibilityState === "visible") {
|
if (document.visibilityState === "visible") {
|
||||||
// Рефрешим только первую страницу, бесконечный скролл сбрасывается.
|
void refreshRef.current();
|
||||||
void query.refetch();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
document.addEventListener("visibilitychange", onVisible);
|
document.addEventListener("visibilitychange", onVisible);
|
||||||
return () => document.removeEventListener("visibilitychange", onVisible);
|
return () => document.removeEventListener("visibilitychange", onVisible);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Удобный flatten для рендера в одну ленту.
|
// Удобный flatten для рендера в одну ленту.
|
||||||
@@ -48,11 +128,15 @@ export function useRepairsFeed() {
|
|||||||
items,
|
items,
|
||||||
isLoading: query.isLoading,
|
isLoading: query.isLoading,
|
||||||
isFetching: query.isFetching,
|
isFetching: query.isFetching,
|
||||||
|
// На экране выдача предыдущего запроса, актуальная ещё летит —
|
||||||
|
// повод приглушить список, но не повод его прятать.
|
||||||
|
isPreviousResults: query.isPlaceholderData,
|
||||||
isError: query.isError,
|
isError: query.isError,
|
||||||
error: query.error,
|
error: query.error,
|
||||||
fetchNextPage: query.fetchNextPage,
|
fetchNextPage: query.fetchNextPage,
|
||||||
hasNextPage: !!query.hasNextPage,
|
hasNextPage: !!query.hasNextPage,
|
||||||
isFetchingNextPage: query.isFetchingNextPage,
|
isFetchingNextPage: query.isFetchingNextPage,
|
||||||
refetch: query.refetch,
|
refresh,
|
||||||
|
isRefreshing,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,5 +31,29 @@
|
|||||||
* { @apply border-border; }
|
* { @apply border-border; }
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground font-sans;
|
@apply bg-background text-foreground font-sans;
|
||||||
|
/* iOS PWA: status bar (status-bar-style=black-translucent) и home-indicator
|
||||||
|
перекрывают контент при viewport-fit=cover. Сдвигаем body content вниз
|
||||||
|
на высоту safe-area, чтобы шапки/кнопки не уезжали под системные зоны. */
|
||||||
|
padding-top: env(safe-area-inset-top);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
/* iOS PWA: position:sticky + top:0 прилипает к самому верху viewport,
|
||||||
|
т.е. под статус-бар (containing-block тут не помогает). Переопределяем
|
||||||
|
top у всех Tailwind .top-0, чтобы шапки залипали ниже notch. */
|
||||||
|
.sticky.top-0,
|
||||||
|
.fixed.top-0 {
|
||||||
|
top: env(safe-area-inset-top);
|
||||||
|
}
|
||||||
|
/* Full-screen page-replacement модалки (fixed inset-0 с app background) —
|
||||||
|
поиск работ, аннотация фото, zone-detail, inspection-editor. Шапка внутри
|
||||||
|
должна сидеть ниже status-bar, нижние кнопки выше home-indicator.
|
||||||
|
bg-black/40·50·90 диалоги/просмотрщики не задеваем — у них inset-0 full-bleed. */
|
||||||
|
.fixed.inset-0.bg-background,
|
||||||
|
.fixed.inset-0.bg-background\/95 {
|
||||||
|
padding-top: env(safe-area-inset-top);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { slotsForType } from "@/lib/inspectionSlots";
|
||||||
|
|
||||||
|
test("Салон перед (ключ interior сохранён) + Салон зад + Багажник", () => {
|
||||||
|
const slots = slotsForType("handover");
|
||||||
|
expect(slots.find((s) => s.side === "interior")?.label).toBe("Салон перед");
|
||||||
|
expect(slots.find((s) => s.side === "interior-rear")?.label).toBe("Салон зад");
|
||||||
|
expect(slots.find((s) => s.side === "trunk")?.label).toBe("Багажник");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("порядок: Салон перед → Салон зад → Багажник идут подряд", () => {
|
||||||
|
const sides = slotsForType("return").map((s) => s.side);
|
||||||
|
const i = sides.indexOf("interior");
|
||||||
|
expect(sides.slice(i, i + 3)).toEqual(["interior", "interior-rear", "trunk"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("набор одинаков для всех типов (унифицировано)", () => {
|
||||||
|
expect(slotsForType("periodic")).toEqual(slotsForType("handover"));
|
||||||
|
});
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Слоты фото осмотра авто. Вынесены из InspectionEditor, чтобы быть покрытыми
|
||||||
|
* тестами. Все типы осмотров (приёмка/выдача/плановый/ad-hoc) показывают один
|
||||||
|
* набор — фидбек: общее состояние машины фиксируем всегда.
|
||||||
|
*
|
||||||
|
* ВАЖНО: `side` — стабильный ключ слота (часть S3-ключа фото и значение
|
||||||
|
* PhotoSide на бэке). Подпись (`label`) менять можно, ключ — нет, иначе уже
|
||||||
|
* снятые фото осиротеют. Поэтому «Салон перед» имеет ключ `interior` (бывш. «Салон»).
|
||||||
|
*/
|
||||||
|
export interface InspectionSlot {
|
||||||
|
side: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SLOTS_GENERAL: InspectionSlot[] = [
|
||||||
|
{ side: "front", label: "Перед" },
|
||||||
|
{ side: "rear", label: "Зад" },
|
||||||
|
{ side: "left", label: "Левый бок" },
|
||||||
|
{ side: "right", label: "Правый бок" },
|
||||||
|
{ side: "vin", label: "VIN" },
|
||||||
|
{ side: "odometer", label: "Одометр" },
|
||||||
|
{ side: "interior", label: "Салон перед" },
|
||||||
|
{ side: "interior-rear", label: "Салон зад" },
|
||||||
|
{ side: "trunk", label: "Багажник" },
|
||||||
|
{ side: "free", label: "Свободное" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const SLOT_JACK: InspectionSlot = { side: "jack", label: "Домкрат" };
|
||||||
|
|
||||||
|
// Шильдик замены масла — отдельный слот при выдаче/приёмке. Фото нужно как для
|
||||||
|
// сверки текущего пробега со следующим ТО, так и для контроля что водитель не
|
||||||
|
// клеит свой стикер.
|
||||||
|
export const SLOT_OIL_STICKER: InspectionSlot = { side: "oil-sticker", label: "Шильдик замены масла" };
|
||||||
|
|
||||||
|
export function slotsForType(_type: string): InspectionSlot[] {
|
||||||
|
return [...SLOTS_GENERAL, SLOT_JACK, SLOT_OIL_STICKER];
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { repairCanSubmit, repairSubmitWhyDisabled } from "@/lib/repairForm";
|
||||||
|
|
||||||
|
const okPhoto = { status: "uploaded" as const };
|
||||||
|
const okWork = { unlocked: false, override_comment: "" };
|
||||||
|
|
||||||
|
describe("repairSubmitWhyDisabled", () => {
|
||||||
|
it("нет фото → причина про фото", () => {
|
||||||
|
expect(repairSubmitWhyDisabled([], [okWork])).toBe("Добавьте хотя бы одно фото");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("фото ещё грузится → причина про загрузку", () => {
|
||||||
|
expect(
|
||||||
|
repairSubmitWhyDisabled([{ status: "uploading" }], [okWork]),
|
||||||
|
).toBe("Дождитесь окончания загрузки фото");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("фото с ошибкой загрузки тоже блокирует", () => {
|
||||||
|
expect(
|
||||||
|
repairSubmitWhyDisabled([{ status: "error" }], [okWork]),
|
||||||
|
).toBe("Дождитесь окончания загрузки фото");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("нет работ → причина про работы", () => {
|
||||||
|
expect(repairSubmitWhyDisabled([okPhoto], [])).toBe("Добавьте хотя бы одну работу");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("разблокированная цена без комментария → требует комментарий", () => {
|
||||||
|
expect(
|
||||||
|
repairSubmitWhyDisabled([okPhoto], [{ unlocked: true, override_comment: " " }]),
|
||||||
|
).toBe("Укажите комментарий к ручной правке цены");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("разблокированная цена с комментарием → ок", () => {
|
||||||
|
expect(
|
||||||
|
repairSubmitWhyDisabled([okPhoto], [{ unlocked: true, override_comment: "скидка" }]),
|
||||||
|
).toBe("");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("валидная форма → пустая причина", () => {
|
||||||
|
expect(repairSubmitWhyDisabled([okPhoto], [okWork])).toBe("");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("repairCanSubmit", () => {
|
||||||
|
it("= (нет причины блокировки)", () => {
|
||||||
|
expect(repairCanSubmit([okPhoto], [okWork])).toBe(true);
|
||||||
|
expect(repairCanSubmit([], [okWork])).toBe(false);
|
||||||
|
expect(repairCanSubmit([{ status: "uploading" }], [okWork])).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Логика гейтинга сохранения формы ремонта (Create/Edit). Вынесена из
|
||||||
|
* CreateRepairPage, чтобы быть единым источником правды и покрытой тестами:
|
||||||
|
* `canSubmit` теперь буквально «нет причины блокировки», без расхождения
|
||||||
|
* между двумя проверками.
|
||||||
|
*
|
||||||
|
* Принимает структурные срезы стейта (только нужные поля), поэтому не зависит
|
||||||
|
* от конкретных типов страниц.
|
||||||
|
*/
|
||||||
|
export interface RepairFormPhotoLike {
|
||||||
|
status: "uploading" | "uploaded" | "error" | string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RepairFormWorkLike {
|
||||||
|
unlocked: boolean;
|
||||||
|
override_comment: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Возвращает причину, по которой сохранение заблокировано, или "" если можно. */
|
||||||
|
export function repairSubmitWhyDisabled(
|
||||||
|
photos: RepairFormPhotoLike[],
|
||||||
|
works: RepairFormWorkLike[],
|
||||||
|
): string {
|
||||||
|
if (photos.length === 0) return "Добавьте хотя бы одно фото";
|
||||||
|
if (photos.some((p) => p.status !== "uploaded")) return "Дождитесь окончания загрузки фото";
|
||||||
|
if (works.length === 0) return "Добавьте хотя бы одну работу";
|
||||||
|
const unlockedNoComment = works.find((w) => w.unlocked && !w.override_comment.trim());
|
||||||
|
if (unlockedNoComment) return "Укажите комментарий к ручной правке цены";
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function repairCanSubmit(
|
||||||
|
photos: RepairFormPhotoLike[],
|
||||||
|
works: RepairFormWorkLike[],
|
||||||
|
): boolean {
|
||||||
|
return repairSubmitWhyDisabled(photos, works) === "";
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import type { FeedItem } from "@/api/repairsFeed";
|
||||||
|
import {
|
||||||
|
toLocalDateKey,
|
||||||
|
formatDayLabel,
|
||||||
|
groupByLocalDay,
|
||||||
|
fmtMoney,
|
||||||
|
pluralRepairs,
|
||||||
|
pluralWorks,
|
||||||
|
} from "@/lib/repairsFeed";
|
||||||
|
|
||||||
|
function item(id: number, created_at: string, works_total = 0): FeedItem {
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
created_at,
|
||||||
|
car_plate: "А001АА125",
|
||||||
|
car_make: null,
|
||||||
|
car_model: null,
|
||||||
|
driver_name: null,
|
||||||
|
mechanic_name: "M",
|
||||||
|
works_preview: [],
|
||||||
|
works_extra: 0,
|
||||||
|
works_total,
|
||||||
|
photo_url: null,
|
||||||
|
is_external: false,
|
||||||
|
} as FeedItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("toLocalDateKey (Asia/Vladivostok)", () => {
|
||||||
|
it("маппит UTC-инстант на VLA-сутки (+10)", () => {
|
||||||
|
// 2026-05-25 20:00Z == 2026-05-26 06:00 VLA → день 26-го
|
||||||
|
expect(toLocalDateKey("2026-05-25T20:00:00Z")).toBe("2026-05-26");
|
||||||
|
// 2026-05-25 13:00Z == 2026-05-25 23:00 VLA → ещё 25-е
|
||||||
|
expect(toLocalDateKey("2026-05-25T13:00:00Z")).toBe("2026-05-25");
|
||||||
|
// 2026-05-25 14:00Z == 2026-05-26 00:00 VLA → уже 26-е (граница суток)
|
||||||
|
expect(toLocalDateKey("2026-05-25T14:00:00Z")).toBe("2026-05-26");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("formatDayLabel", () => {
|
||||||
|
const now = new Date("2026-05-26T05:00:00Z"); // 15:00 VLA, день 26-го
|
||||||
|
it("Сегодня / Вчера относительно VLA-now", () => {
|
||||||
|
expect(formatDayLabel("2026-05-26", now)).toBe("Сегодня");
|
||||||
|
expect(formatDayLabel("2026-05-25", now)).toBe("Вчера");
|
||||||
|
});
|
||||||
|
it("прочие даты — «D месяц»", () => {
|
||||||
|
expect(formatDayLabel("2026-05-20", now)).toBe("20 мая");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("groupByLocalDay", () => {
|
||||||
|
it("группирует по VLA-дню, суммирует works_total, сохраняет порядок", () => {
|
||||||
|
const items = [
|
||||||
|
item(3, "2026-05-26T01:00:00Z", 100), // 26-е VLA
|
||||||
|
item(2, "2026-05-25T20:00:00Z", 50), // тоже 26-е VLA (06:00)
|
||||||
|
item(1, "2026-05-25T01:00:00Z", 200), // 25-е VLA
|
||||||
|
];
|
||||||
|
const groups = groupByLocalDay(items);
|
||||||
|
expect(groups.map((g) => g.key)).toEqual(["2026-05-26", "2026-05-25"]);
|
||||||
|
expect(groups[0].total).toBe(150);
|
||||||
|
expect(groups[0].items).toHaveLength(2);
|
||||||
|
expect(groups[1].total).toBe(200);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("пустой вход → пустой массив", () => {
|
||||||
|
expect(groupByLocalDay([])).toEqual([]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("fmtMoney", () => {
|
||||||
|
it("округляет и форматирует тысячи (NBSP-разделитель)", () => {
|
||||||
|
expect(fmtMoney(91000).replace(/ /g, " ")).toBe("91 000");
|
||||||
|
expect(fmtMoney(1499.6).replace(/ /g, " ")).toBe("1 500");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("склонения", () => {
|
||||||
|
it.each([
|
||||||
|
[1, "ремонт"],
|
||||||
|
[2, "ремонта"],
|
||||||
|
[4, "ремонта"],
|
||||||
|
[5, "ремонтов"],
|
||||||
|
[11, "ремонтов"],
|
||||||
|
[21, "ремонт"],
|
||||||
|
[22, "ремонта"],
|
||||||
|
])("pluralRepairs(%i) = %s", (n, exp) => {
|
||||||
|
expect(pluralRepairs(n)).toBe(exp);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[1, "работа"],
|
||||||
|
[3, "работы"],
|
||||||
|
[5, "работ"],
|
||||||
|
[12, "работ"],
|
||||||
|
])("pluralWorks(%i) = %s", (n, exp) => {
|
||||||
|
expect(pluralWorks(n)).toBe(exp);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
/**
|
||||||
|
* Чистые помощники ленты ремонтов: группировка по локальной дате (VLA),
|
||||||
|
* форматирование сумм и склонения. Вынесены из RepairsFeedPage, чтобы быть
|
||||||
|
* переиспользуемыми и покрытыми юнит-тестами (TZ-логика группировки —
|
||||||
|
* частый источник off-by-one багов).
|
||||||
|
*/
|
||||||
|
import type { FeedItem } from "@/api/repairsFeed";
|
||||||
|
|
||||||
|
export interface DayGroup {
|
||||||
|
key: string; // YYYY-MM-DD (VLAT)
|
||||||
|
items: FeedItem[];
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ISO → дата в Asia/Vladivostok (+10) как YYYY-MM-DD. */
|
||||||
|
export function toLocalDateKey(iso: string): string {
|
||||||
|
const d = new Date(iso);
|
||||||
|
const fmt = new Intl.DateTimeFormat("en-CA", {
|
||||||
|
timeZone: "Asia/Vladivostok",
|
||||||
|
year: "numeric",
|
||||||
|
month: "2-digit",
|
||||||
|
day: "2-digit",
|
||||||
|
});
|
||||||
|
return fmt.format(d); // 2026-05-26
|
||||||
|
}
|
||||||
|
|
||||||
|
/** key = YYYY-MM-DD → «26 мая» / «Сегодня» / «Вчера» (относительно VLA-сегодня). */
|
||||||
|
export function formatDayLabel(key: string, now: Date = new Date()): string {
|
||||||
|
const today = toLocalDateKey(now.toISOString());
|
||||||
|
if (key === today) return "Сегодня";
|
||||||
|
const yest = new Date(now.getTime() - 24 * 3600 * 1000);
|
||||||
|
if (key === toLocalDateKey(yest.toISOString())) return "Вчера";
|
||||||
|
const [y, m, d] = key.split("-").map(Number);
|
||||||
|
const dt = new Date(Date.UTC(y, m - 1, d));
|
||||||
|
return new Intl.DateTimeFormat("ru-RU", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
timeZone: "UTC",
|
||||||
|
}).format(dt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Группирует ленту по локальной дате; items уже отсортированы created_at DESC,
|
||||||
|
* поэтому ключи идут от свежих к старым. total — сумма works_total по дню. */
|
||||||
|
export function groupByLocalDay(items: FeedItem[]): DayGroup[] {
|
||||||
|
const map = new Map<string, DayGroup>();
|
||||||
|
for (const it of items) {
|
||||||
|
const key = toLocalDateKey(it.created_at);
|
||||||
|
let g = map.get(key);
|
||||||
|
if (!g) {
|
||||||
|
g = { key, items: [], total: 0 };
|
||||||
|
map.set(key, g);
|
||||||
|
}
|
||||||
|
g.items.push(it);
|
||||||
|
g.total += it.works_total || 0;
|
||||||
|
}
|
||||||
|
return Array.from(map.values());
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fmtMoney(n: number): string {
|
||||||
|
return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 1 → «ремонт», 2..4 → «ремонта», 5+/11..14 → «ремонтов». */
|
||||||
|
export function pluralRepairs(n: number): string {
|
||||||
|
const mod10 = n % 10;
|
||||||
|
const mod100 = n % 100;
|
||||||
|
if (mod100 >= 11 && mod100 <= 14) return "ремонтов";
|
||||||
|
if (mod10 === 1) return "ремонт";
|
||||||
|
if (mod10 >= 2 && mod10 <= 4) return "ремонта";
|
||||||
|
return "ремонтов";
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 1 → «работа», 2..4 → «работы», 5+/11..14 → «работ». */
|
||||||
|
export function pluralWorks(n: number): string {
|
||||||
|
const mod10 = n % 10;
|
||||||
|
const mod100 = n % 100;
|
||||||
|
if (mod100 >= 11 && mod100 <= 14) return "работ";
|
||||||
|
if (mod10 === 1) return "работа";
|
||||||
|
if (mod10 >= 2 && mod10 <= 4) return "работы";
|
||||||
|
return "работ";
|
||||||
|
}
|
||||||
@@ -34,6 +34,26 @@ export default function ActionMenu() {
|
|||||||
emoji: "🔧",
|
emoji: "🔧",
|
||||||
onClick: () => navigate("/repairs"),
|
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"),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -25,26 +25,8 @@ import { loadZoneLabels } from "@/data/zoneLabels";
|
|||||||
import { damageTypeRuToEnum } from "@/data/damageVocabulary";
|
import { damageTypeRuToEnum } from "@/data/damageVocabulary";
|
||||||
import { ttImageUrl } from "@/api/vehicles";
|
import { ttImageUrl } from "@/api/vehicles";
|
||||||
|
|
||||||
const SLOTS_GENERAL: { side: string; label: string }[] = [
|
// Слоты фото осмотра — в @/lib/inspectionSlots (покрыто тестами).
|
||||||
{ side: "front", label: "Перед" },
|
import { slotsForType } from "@/lib/inspectionSlots";
|
||||||
{ side: "rear", label: "Зад" },
|
|
||||||
{ side: "left", label: "Левый бок" },
|
|
||||||
{ side: "right", label: "Правый бок" },
|
|
||||||
{ side: "vin", label: "VIN" },
|
|
||||||
{ side: "odometer", label: "Одометр" },
|
|
||||||
{ side: "interior", label: "Салон" },
|
|
||||||
{ side: "free", label: "Свободное" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const SLOT_JACK = { side: "jack", label: "Домкрат" };
|
|
||||||
|
|
||||||
/** Все типы осмотров (выдача/приёмка/плановый/...) показывают одинаковый
|
|
||||||
* набор слотов общих ракурсов + домкрат. Раньше «return» исключал общие
|
|
||||||
* фото в пользу скорости приёмки, но фидбек: при приёмке всё равно надо
|
|
||||||
* фиксировать общее состояние машины, как и при выдаче/осмотре. */
|
|
||||||
function slotsForType(_type: string): typeof SLOTS_GENERAL {
|
|
||||||
return [...SLOTS_GENERAL, SLOT_JACK];
|
|
||||||
}
|
|
||||||
|
|
||||||
const SEVERITY_LABELS: Record<string, string> = {
|
const SEVERITY_LABELS: Record<string, string> = {
|
||||||
cosmetic: "косметика",
|
cosmetic: "косметика",
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import { AuthImg } from "@/components/AuthImg";
|
|||||||
import { ttImageUrl } from "@/api/vehicles";
|
import { ttImageUrl } from "@/api/vehicles";
|
||||||
import { VendorVehicleScheme } from "@/components/vehicle-scheme/VendorVehicleScheme";
|
import { VendorVehicleScheme } from "@/components/vehicle-scheme/VendorVehicleScheme";
|
||||||
import { Card } from "@/components/ui/card";
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
import { loadZoneLabels } from "@/data/zoneLabels";
|
import { loadZoneLabels } from "@/data/zoneLabels";
|
||||||
|
|
||||||
const STATUS_LABELS: Record<string, string> = {
|
const STATUS_LABELS: Record<string, string> = {
|
||||||
@@ -138,6 +139,19 @@ export default function InspectionReview() {
|
|||||||
onError: () => toast.error("Не удалось сохранить заметку"),
|
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 (isLoading) return <div className="p-8 text-muted-foreground">Загружаю…</div>;
|
||||||
if (isError || !ins)
|
if (isError || !ins)
|
||||||
return <div className="p-8 text-destructive">Осмотр не найден.</div>;
|
return <div className="p-8 text-destructive">Осмотр не найден.</div>;
|
||||||
@@ -233,6 +247,27 @@ export default function InspectionReview() {
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</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">
|
<Card className="p-4 space-y-2">
|
||||||
<h2 className="text-sm font-semibold text-muted-foreground">
|
<h2 className="text-sm font-semibold text-muted-foreground">
|
||||||
Заметки механика
|
Заметки механика
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import { vi } from "vitest";
|
||||||
|
|
||||||
|
const { navigate } = vi.hoisted(() => ({ navigate: vi.fn() }));
|
||||||
|
|
||||||
|
vi.mock("react-router-dom", async (importOriginal) => {
|
||||||
|
const actual = await importOriginal<typeof import("react-router-dom")>();
|
||||||
|
return { ...actual, useNavigate: () => navigate };
|
||||||
|
});
|
||||||
|
vi.mock("@/api/repairsCreate", () => ({
|
||||||
|
searchCars: vi.fn().mockResolvedValue([]),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import CarSelectPage from "@/pages/repairs/CarSelectPage";
|
||||||
|
|
||||||
|
beforeEach(() => navigate.mockClear());
|
||||||
|
|
||||||
|
test("«Машина не из парка» → ввод номера → navigate в external-режим со state (номер trim'ится)", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(<CarSelectPage />);
|
||||||
|
|
||||||
|
await user.click(screen.getByText("+ Машина не из парка"));
|
||||||
|
await user.type(screen.getByPlaceholderText("Х999ХХ199"), " х999хх199 ");
|
||||||
|
await user.type(screen.getByPlaceholderText("Toyota Camry"), "Toyota Camry");
|
||||||
|
await user.click(screen.getByText("Продолжить →"));
|
||||||
|
|
||||||
|
expect(navigate).toHaveBeenCalledWith("/repairs/new-external", {
|
||||||
|
state: { plate: "х999хх199", make: "Toyota Camry" },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("марка опциональна → make=null если поле пустое", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(<CarSelectPage />);
|
||||||
|
|
||||||
|
await user.click(screen.getByText("+ Машина не из парка"));
|
||||||
|
await user.type(screen.getByPlaceholderText("Х999ХХ199"), "А001АА125");
|
||||||
|
await user.click(screen.getByText("Продолжить →"));
|
||||||
|
|
||||||
|
expect(navigate).toHaveBeenCalledWith("/repairs/new-external", {
|
||||||
|
state: { plate: "А001АА125", make: null },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("«Продолжить» заблокирована без номера", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(<CarSelectPage />);
|
||||||
|
await user.click(screen.getByText("+ Машина не из парка"));
|
||||||
|
expect(screen.getByText("Продолжить →").closest("button")).toBeDisabled();
|
||||||
|
});
|
||||||
@@ -18,6 +18,15 @@ export default function CarSelectPage() {
|
|||||||
const [cars, setCars] = useState<CarBrief[]>([]);
|
const [cars, setCars] = useState<CarBrief[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
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(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -62,6 +71,13 @@ export default function CarSelectPage() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main className="flex-1 container max-w-2xl py-3">
|
<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 && (
|
{error && (
|
||||||
<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">
|
||||||
{error}
|
{error}
|
||||||
@@ -96,6 +112,41 @@ export default function CarSelectPage() {
|
|||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</main>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,22 +15,28 @@
|
|||||||
* Сохранение: POST /repairs с `Idempotency-Key` (UUID v4 в state).
|
* Сохранение: POST /repairs с `Idempotency-Key` (UUID v4 в state).
|
||||||
*/
|
*/
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
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 { ChevronLeft, Plus, Trash2, Pencil, Camera } from "lucide-react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Label } from "@/components/ui/label";
|
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 {
|
import {
|
||||||
createRepair,
|
createRepair,
|
||||||
getCarContext,
|
getCarContext,
|
||||||
presignPhoto,
|
presignPhoto,
|
||||||
searchWorks,
|
searchWorks,
|
||||||
suggestParts,
|
|
||||||
uploadPhotoToTmp,
|
uploadPhotoToTmp,
|
||||||
type CarContext,
|
type CarContext,
|
||||||
type CreatePhotoPayload,
|
type CreatePhotoPayload,
|
||||||
type MechWork,
|
type MechWork,
|
||||||
|
type PartCatalogItem,
|
||||||
type PresignResponse,
|
type PresignResponse,
|
||||||
} from "@/api/repairsCreate";
|
} from "@/api/repairsCreate";
|
||||||
|
|
||||||
@@ -41,6 +47,10 @@ interface PhotoState {
|
|||||||
tag: "auto" | "part" | "other";
|
tag: "auto" | "part" | "other";
|
||||||
status: "uploading" | "uploaded" | "error";
|
status: "uploading" | "uploaded" | "error";
|
||||||
errorMessage?: string;
|
errorMessage?: string;
|
||||||
|
// Превью локального файла через URL.createObjectURL — отдаётся в <img>
|
||||||
|
// вместо плейсхолдера «Загружено». Освобождается через revokeObjectURL
|
||||||
|
// при удалении и при размонтировании страницы.
|
||||||
|
previewUrl?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface WorkRow {
|
interface WorkRow {
|
||||||
@@ -50,26 +60,44 @@ interface WorkRow {
|
|||||||
work_catalog_id: number;
|
work_catalog_id: number;
|
||||||
name: string; // снапшот имени из прайса
|
name: string; // снапшот имени из прайса
|
||||||
price_catalog: number;
|
price_catalog: number;
|
||||||
price_applied: number;
|
// "" допустим в процессе редактирования — иначе React при очистке inputа
|
||||||
|
// сразу подставляет "0" и его приходится курсором обходить, см. жалобу
|
||||||
|
// механиков. На submit пустое трактуется как 0 (или как ошибка валидации).
|
||||||
|
price_applied: number | "";
|
||||||
unlocked: boolean; // карандашик разблокировал поле
|
unlocked: boolean; // карандашик разблокировал поле
|
||||||
override_comment: string;
|
override_comment: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PartRow {
|
interface PartRow {
|
||||||
rowKey: string;
|
rowKey: string;
|
||||||
|
part_id: number;
|
||||||
name: string;
|
name: string;
|
||||||
qty: number;
|
article: string | null;
|
||||||
|
in_stock: number;
|
||||||
|
// "" допустимо, пока поле редактируют: иначе стирание единицы мгновенно
|
||||||
|
// возвращало бы её и «4 свечи» было не набрать (см. QtyStepper).
|
||||||
|
qty: number | "";
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OilChangeState {
|
interface OilChangeState {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
mileage_at_change: number | null;
|
next_in_km: number; // интервал двигателя
|
||||||
mileage_is_dirty: boolean; // У24: мягкая подписка с шапочным
|
// Какие масла меняли за заезд (можно оба сразу).
|
||||||
next_in_km: number;
|
types: { engine: boolean; transmission: boolean };
|
||||||
|
// Пробега здесь нет намеренно: он один на весь ремонт (У24), берётся из
|
||||||
|
// шапки формы — механик не должен вводить одно и то же дважды.
|
||||||
sticker: PhotoState | null;
|
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 {
|
function uuid4(): string {
|
||||||
// crypto.randomUUID требует secure context; mechanic.pptaxi.ru — https.
|
// crypto.randomUUID требует secure context; mechanic.pptaxi.ru — https.
|
||||||
return (crypto as any).randomUUID
|
return (crypto as any).randomUUID
|
||||||
@@ -81,6 +109,9 @@ function uuid4(): string {
|
|||||||
export default function CreateRepairPage() {
|
export default function CreateRepairPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { carId: carIdRaw } = useParams<{ carId: string }>();
|
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;
|
const carId = carIdRaw ? Number(carIdRaw) : 0;
|
||||||
|
|
||||||
// Idempotency-Key для этой формы — стабилен между ре-сабмитами (У20).
|
// Idempotency-Key для этой формы — стабилен между ре-сабмитами (У20).
|
||||||
@@ -93,11 +124,13 @@ export default function CreateRepairPage() {
|
|||||||
const [photos, setPhotos] = useState<PhotoState[]>([]);
|
const [photos, setPhotos] = useState<PhotoState[]>([]);
|
||||||
const [works, setWorks] = useState<WorkRow[]>([]);
|
const [works, setWorks] = useState<WorkRow[]>([]);
|
||||||
const [parts, setParts] = useState<PartRow[]>([]);
|
const [parts, setParts] = useState<PartRow[]>([]);
|
||||||
|
// Работавшие механики (делёж 1/N). По умолчанию — текущий механик
|
||||||
|
// (создатель), подтягивается из /me. Можно убрать/заменить.
|
||||||
|
const [mechanics, setMechanics] = useState<SelectedMechanic[]>([]);
|
||||||
const [oilChange, setOilChange] = useState<OilChangeState>({
|
const [oilChange, setOilChange] = useState<OilChangeState>({
|
||||||
enabled: false,
|
enabled: false,
|
||||||
mileage_at_change: null,
|
|
||||||
mileage_is_dirty: false,
|
|
||||||
next_in_km: 10000,
|
next_in_km: 10000,
|
||||||
|
types: { engine: true, transmission: false },
|
||||||
sticker: null,
|
sticker: null,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -109,6 +142,24 @@ export default function CreateRepairPage() {
|
|||||||
|
|
||||||
// Initial: подгрузить контекст машины.
|
// Initial: подгрузить контекст машины.
|
||||||
useEffect(() => {
|
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;
|
if (!carId) return;
|
||||||
getCarContext(carId)
|
getCarContext(carId)
|
||||||
.then((c) => {
|
.then((c) => {
|
||||||
@@ -116,15 +167,22 @@ export default function CreateRepairPage() {
|
|||||||
setMileage(c.mileage_starline);
|
setMileage(c.mileage_starline);
|
||||||
})
|
})
|
||||||
.catch((e) => setCtxError((e as Error).message || "Не удалось загрузить машину"));
|
.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
|
// 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 ─────────────────────────────────────────────────────────
|
// ── Photo upload ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -132,6 +190,7 @@ export default function CreateRepairPage() {
|
|||||||
if (!files || files.length === 0) return;
|
if (!files || files.length === 0) return;
|
||||||
for (const file of Array.from(files)) {
|
for (const file of Array.from(files)) {
|
||||||
const ext = (file.name.split(".").pop() || "jpg").toLowerCase();
|
const ext = (file.name.split(".").pop() || "jpg").toLowerCase();
|
||||||
|
const previewUrl = URL.createObjectURL(file);
|
||||||
const placeholder: PhotoState = {
|
const placeholder: PhotoState = {
|
||||||
presign: {
|
presign: {
|
||||||
photo_uuid: uuid4(),
|
photo_uuid: uuid4(),
|
||||||
@@ -143,6 +202,7 @@ export default function CreateRepairPage() {
|
|||||||
},
|
},
|
||||||
tag: "auto",
|
tag: "auto",
|
||||||
status: "uploading",
|
status: "uploading",
|
||||||
|
previewUrl,
|
||||||
};
|
};
|
||||||
if (target === "gallery") setPhotos((arr) => [...arr, placeholder]);
|
if (target === "gallery") setPhotos((arr) => [...arr, placeholder]);
|
||||||
else setOilChange((oc) => ({ ...oc, sticker: { ...placeholder, tag: "auto" } }));
|
else setOilChange((oc) => ({ ...oc, sticker: { ...placeholder, tag: "auto" } }));
|
||||||
@@ -150,7 +210,7 @@ export default function CreateRepairPage() {
|
|||||||
try {
|
try {
|
||||||
const presign = await presignPhoto(ext, placeholder.presign.photo_uuid);
|
const presign = await presignPhoto(ext, placeholder.presign.photo_uuid);
|
||||||
await uploadPhotoToTmp(file, presign);
|
await uploadPhotoToTmp(file, presign);
|
||||||
const updated: PhotoState = { presign, tag: "auto", status: "uploaded" };
|
const updated: PhotoState = { presign, tag: "auto", status: "uploaded", previewUrl };
|
||||||
if (target === "gallery") {
|
if (target === "gallery") {
|
||||||
setPhotos((arr) =>
|
setPhotos((arr) =>
|
||||||
arr.map((p) => (p.presign.photo_uuid === presign.photo_uuid ? updated : p)),
|
arr.map((p) => (p.presign.photo_uuid === presign.photo_uuid ? updated : p)),
|
||||||
@@ -179,7 +239,11 @@ export default function CreateRepairPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const removePhoto = (photoUuid: string) =>
|
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 ─────────────────────────────────────────────────────────
|
// ── Works picker ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -196,7 +260,7 @@ export default function CreateRepairPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const addWorkFromCatalog = (w: MechWork) => {
|
const addWorkFromCatalog = (w: MechWork) => {
|
||||||
const price = Number(w.price);
|
const price = Math.round(Number(w.price));
|
||||||
setWorks((arr) => [
|
setWorks((arr) => [
|
||||||
...arr,
|
...arr,
|
||||||
{
|
{
|
||||||
@@ -235,20 +299,21 @@ export default function CreateRepairPage() {
|
|||||||
|
|
||||||
// ── Parts ────────────────────────────────────────────────────────────────
|
// ── Parts ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
const [partsDraft, setPartsDraft] = useState<{ name: string; suggestions: string[] }>({ name: "", suggestions: [] });
|
const [partsPickerOpen, setPartsPickerOpen] = useState(false);
|
||||||
|
|
||||||
const queryPartSuggestions = async (q: string) => {
|
const addPartFromCatalog = (item: PartCatalogItem) => {
|
||||||
setPartsDraft({ name: q, suggestions: [] });
|
setParts((arr) => {
|
||||||
if (!q.trim()) return;
|
// Та же деталь уже в списке — увеличиваем количество, а не плодим строку.
|
||||||
const list = await suggestParts(q);
|
const existing = arr.find((p) => p.part_id === item.id);
|
||||||
setPartsDraft({ name: q, suggestions: list.map((s) => s.name) });
|
if (existing) {
|
||||||
};
|
return arr.map((p) => (p.part_id === item.id ? { ...p, qty: Number(p.qty || 0) + 1 } : p));
|
||||||
|
}
|
||||||
const addPart = (name: string) => {
|
return [
|
||||||
const trimmed = name.trim();
|
...arr,
|
||||||
if (!trimmed) return;
|
{ rowKey: uuid4(), part_id: item.id, name: item.name, article: item.article, in_stock: item.in_stock, qty: 1 },
|
||||||
setParts((arr) => [...arr, { rowKey: uuid4(), name: trimmed, qty: 1 }]);
|
];
|
||||||
setPartsDraft({ name: "", suggestions: [] });
|
});
|
||||||
|
setPartsPickerOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const removePart = (rowKey: string) =>
|
const removePart = (rowKey: string) =>
|
||||||
@@ -256,20 +321,17 @@ export default function CreateRepairPage() {
|
|||||||
|
|
||||||
// ── Submit ───────────────────────────────────────────────────────────────
|
// ── Submit ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
const canSubmit = () =>
|
// Общая часть гейтинга живёт в lib/repairForm (покрыта тестами, шарится с
|
||||||
photos.length > 0 &&
|
// формой правки); здесь добавляется только специфичная для создания проверка
|
||||||
photos.every((p) => p.status === "uploaded") &&
|
// выбранного типа масла.
|
||||||
works.length > 0 &&
|
|
||||||
works.every((w) => !w.unlocked || w.override_comment.trim().length > 0);
|
|
||||||
|
|
||||||
const submitWhyDisabled = (): string => {
|
const submitWhyDisabled = (): string => {
|
||||||
if (photos.length === 0) return "Добавьте хотя бы одно фото";
|
const base = repairSubmitWhyDisabled(photos, works);
|
||||||
if (photos.some((p) => p.status !== "uploaded")) return "Дождитесь окончания загрузки фото";
|
if (base) return base;
|
||||||
if (works.length === 0) return "Добавьте хотя бы одну работу";
|
if (oilChange.enabled && !oilChange.types.engine && !oilChange.types.transmission)
|
||||||
const unlockedNoComment = works.find((w) => w.unlocked && !w.override_comment.trim());
|
return "Выберите тип масла (двигатель и/или коробка) или снимите «Была замена масла»";
|
||||||
if (unlockedNoComment) return "Укажите комментарий к ручной правке цены";
|
|
||||||
return "";
|
return "";
|
||||||
};
|
};
|
||||||
|
const canSubmit = () => repairCanSubmit(photos, works) && submitWhyDisabled() === "";
|
||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
const reason = submitWhyDisabled();
|
const reason = submitWhyDisabled();
|
||||||
@@ -287,7 +349,14 @@ export default function CreateRepairPage() {
|
|||||||
}));
|
}));
|
||||||
const result = await createRepair(
|
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,
|
mileage,
|
||||||
works: works.map((w) => ({
|
works: works.map((w) => ({
|
||||||
work_catalog_id: w.work_catalog_id,
|
work_catalog_id: w.work_catalog_id,
|
||||||
@@ -295,23 +364,32 @@ export default function CreateRepairPage() {
|
|||||||
manual_override: w.unlocked,
|
manual_override: w.unlocked,
|
||||||
override_comment: w.unlocked ? w.override_comment.trim() : null,
|
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,
|
photos: photoPayload,
|
||||||
oil_change: oilChange.enabled
|
oil_changes: oilChange.enabled
|
||||||
? {
|
? (["engine", "transmission"] as const)
|
||||||
enabled: true,
|
.filter((t) => oilChange.types[t])
|
||||||
mileage_at_change: oilChange.mileage_at_change,
|
.map((t, idx) => ({
|
||||||
next_in_km: oilChange.next_in_km,
|
enabled: true,
|
||||||
sticker_photo_uuid:
|
// Один источник истины — главный пробег ремонта (см. У24).
|
||||||
oilChange.sticker?.status === "uploaded"
|
mileage_at_change: mileage,
|
||||||
? oilChange.sticker.presign.photo_uuid
|
next_in_km: t === "engine" ? oilChange.next_in_km : 0,
|
||||||
: null,
|
oil_type: t,
|
||||||
sticker_extension:
|
// Стикер прикрепляем к первой выбранной замене (обычно двигатель).
|
||||||
oilChange.sticker?.status === "uploaded"
|
sticker_photo_uuid:
|
||||||
? oilChange.sticker.presign.extension
|
idx === 0 && oilChange.sticker?.status === "uploaded"
|
||||||
: null,
|
? oilChange.sticker.presign.photo_uuid
|
||||||
}
|
: null,
|
||||||
: null,
|
sticker_extension:
|
||||||
|
idx === 0 && oilChange.sticker?.status === "uploaded"
|
||||||
|
? oilChange.sticker.presign.extension
|
||||||
|
: null,
|
||||||
|
}))
|
||||||
|
: [],
|
||||||
},
|
},
|
||||||
idemKey.current,
|
idemKey.current,
|
||||||
);
|
);
|
||||||
@@ -364,7 +442,11 @@ export default function CreateRepairPage() {
|
|||||||
<div className="font-medium">{ctx.plate}</div>
|
<div className="font-medium">{ctx.plate}</div>
|
||||||
<div className="text-muted-foreground">
|
<div className="text-muted-foreground">
|
||||||
{[ctx.brand, ctx.model].filter(Boolean).join(" ")}
|
{[ctx.brand, ctx.model].filter(Boolean).join(" ")}
|
||||||
{ctx.driver_name ? ` · ${ctx.driver_name}` : ` · Без водителя`}
|
{isExternal
|
||||||
|
? " · С улицы"
|
||||||
|
: ctx.driver_name
|
||||||
|
? ` · ${ctx.driver_name}`
|
||||||
|
: " · Без водителя"}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -395,17 +477,28 @@ export default function CreateRepairPage() {
|
|||||||
<div className="grid grid-cols-3 gap-2 mt-2">
|
<div className="grid grid-cols-3 gap-2 mt-2">
|
||||||
{photos.map((p) => (
|
{photos.map((p) => (
|
||||||
<div key={p.presign.photo_uuid} className="relative aspect-square border rounded-md bg-muted overflow-hidden">
|
<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" && (
|
{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" && (
|
{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 || "Ошибка"}
|
{p.errorMessage || "Ошибка"}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{p.status === "uploaded" && (
|
{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>
|
</div>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
@@ -449,11 +542,21 @@ export default function CreateRepairPage() {
|
|||||||
key={w.rowKey}
|
key={w.rowKey}
|
||||||
className={`rounded-md border p-2 ${w.unlocked ? "bg-amber-50 border-amber-300" : ""}`}
|
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="flex-1 min-w-0">
|
||||||
<div className="text-sm font-medium truncate">{w.name}</div>
|
<div
|
||||||
<div className="text-xs text-muted-foreground">
|
className="text-sm font-medium leading-snug break-words"
|
||||||
Прайс: {w.price_catalog} ₽
|
style={{
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{w.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground mt-0.5">
|
||||||
|
Прайс: {fmtPrice(w.price_catalog)} ₽
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
@@ -462,15 +565,19 @@ export default function CreateRepairPage() {
|
|||||||
min={0}
|
min={0}
|
||||||
value={w.price_applied}
|
value={w.price_applied}
|
||||||
disabled={!w.unlocked}
|
disabled={!w.unlocked}
|
||||||
onChange={(e) =>
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
// Пустое поле остаётся пустым в стейте (не сбрасываем в 0),
|
||||||
|
// чтобы юзер мог сразу набрать новую цену поверх.
|
||||||
|
const next: number | "" = v === "" ? "" : Number(v);
|
||||||
setWorks((arr) =>
|
setWorks((arr) =>
|
||||||
arr.map((row) =>
|
arr.map((row) =>
|
||||||
row.rowKey === w.rowKey
|
row.rowKey === w.rowKey
|
||||||
? { ...row, price_applied: Number(e.target.value) }
|
? { ...row, price_applied: next }
|
||||||
: row,
|
: row,
|
||||||
),
|
),
|
||||||
)
|
);
|
||||||
}
|
}}
|
||||||
className="w-24"
|
className="w-24"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
@@ -505,30 +612,48 @@ export default function CreateRepairPage() {
|
|||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
{works.length > 0 && (
|
{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>
|
</section>
|
||||||
|
|
||||||
{/* Запчасти */}
|
{/* Механики (делёж 1/N) */}
|
||||||
|
<MechanicsField value={mechanics} onChange={setMechanics} totalSum={totalSum} />
|
||||||
|
|
||||||
|
{/* Запчасти — из складского каталога (списываются со склада) */}
|
||||||
<section>
|
<section>
|
||||||
<Label className="text-sm">Запчасти и материалы</Label>
|
<div className="flex items-baseline justify-between">
|
||||||
{parts.length > 0 && (
|
<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">
|
<ul className="mt-2 space-y-1">
|
||||||
{parts.map((p) => (
|
{parts.map((p) => (
|
||||||
<li key={p.rowKey} className="flex items-center gap-2 text-sm">
|
<li key={p.rowKey} className="flex items-center gap-2 text-sm">
|
||||||
<span className="flex-1">{p.name}</span>
|
<div className="flex-1 min-w-0">
|
||||||
<Input
|
<div className="truncate">{p.name}</div>
|
||||||
type="number"
|
<div className="text-xs text-muted-foreground">
|
||||||
min={1}
|
{p.article ? `арт. ${p.article} · ` : ""}
|
||||||
|
{p.in_stock > 0
|
||||||
|
? `на складе: ${p.in_stock}`
|
||||||
|
: p.in_stock < 0
|
||||||
|
? `на складе: ${p.in_stock}`
|
||||||
|
: "нет в наличии"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<QtyStepper
|
||||||
value={p.qty}
|
value={p.qty}
|
||||||
onChange={(e) =>
|
onChange={(next) =>
|
||||||
setParts((arr) =>
|
setParts((arr) =>
|
||||||
arr.map((row) =>
|
arr.map((row) => (row.rowKey === p.rowKey ? { ...row, qty: next } : row)),
|
||||||
row.rowKey === p.rowKey ? { ...row, qty: Math.max(1, Number(e.target.value)) } : row,
|
|
||||||
),
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-20"
|
|
||||||
/>
|
/>
|
||||||
<Button variant="ghost" size="sm" onClick={() => removePart(p.rowKey)}>
|
<Button variant="ghost" size="sm" onClick={() => removePart(p.rowKey)}>
|
||||||
<Trash2 className="h-3 w-3" />
|
<Trash2 className="h-3 w-3" />
|
||||||
@@ -537,32 +662,6 @@ export default function CreateRepairPage() {
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</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>
|
</section>
|
||||||
|
|
||||||
{/* Замена масла */}
|
{/* Замена масла */}
|
||||||
@@ -580,44 +679,83 @@ export default function CreateRepairPage() {
|
|||||||
{oilChange.enabled && (
|
{oilChange.enabled && (
|
||||||
<div className="mt-3 space-y-3">
|
<div className="mt-3 space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-sm">Пробег на момент замены</Label>
|
<Label className="text-sm">Что меняли (можно оба)</Label>
|
||||||
<Input
|
<div className="mt-1 grid grid-cols-2 gap-2">
|
||||||
type="number"
|
{(
|
||||||
min={0}
|
[
|
||||||
value={oilChange.mileage_at_change ?? ""}
|
["engine", "Двигатель"],
|
||||||
onChange={(e) =>
|
["transmission", "Коробка"],
|
||||||
setOilChange((oc) => ({
|
] as ["engine" | "transmission", string][]
|
||||||
...oc,
|
).map(([v, l]) => (
|
||||||
mileage_at_change: e.target.value === "" ? null : Number(e.target.value),
|
<button
|
||||||
mileage_is_dirty: true,
|
type="button"
|
||||||
}))
|
key={v}
|
||||||
}
|
onClick={() =>
|
||||||
/>
|
setOilChange((oc) => ({ ...oc, types: { ...oc.types, [v]: !oc.types[v] } }))
|
||||||
</div>
|
}
|
||||||
<div>
|
className={`rounded-md border px-2 py-2 text-sm ${
|
||||||
<Label className="text-sm">Следующая замена через (км)</Label>
|
oilChange.types[v]
|
||||||
<Input
|
? "border-primary bg-primary/10 font-medium text-primary"
|
||||||
type="number"
|
: "border-input"
|
||||||
min={0}
|
}`}
|
||||||
value={oilChange.next_in_km}
|
>
|
||||||
onChange={(e) =>
|
{oilChange.types[v] ? "✓ " : ""}
|
||||||
setOilChange((oc) => ({ ...oc, next_in_km: Number(e.target.value) || 0 }))
|
{l}
|
||||||
}
|
</button>
|
||||||
/>
|
))}
|
||||||
|
</div>
|
||||||
|
{!oilChange.types.engine && !oilChange.types.transmission && (
|
||||||
|
<p className="mt-1 text-xs text-destructive">Выберите хотя бы один тип масла.</p>
|
||||||
|
)}
|
||||||
</div>
|
</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>
|
<div>
|
||||||
<Label className="text-sm">Фото стикера (одно)</Label>
|
<Label className="text-sm">Фото стикера (одно)</Label>
|
||||||
<label className="mt-1 block border-2 border-dashed rounded-md p-4 text-center cursor-pointer hover:bg-accent/40">
|
<label className="mt-1 block border-2 border-dashed rounded-md text-center cursor-pointer hover:bg-accent/40 overflow-hidden relative aspect-video">
|
||||||
{oilChange.sticker == null ? (
|
{oilChange.sticker?.previewUrl ? (
|
||||||
<span className="text-sm text-muted-foreground">Тап чтобы загрузить</span>
|
<img
|
||||||
) : oilChange.sticker.status === "uploading" ? (
|
src={oilChange.sticker.previewUrl}
|
||||||
"Загрузка…"
|
alt=""
|
||||||
) : oilChange.sticker.status === "error" ? (
|
className="absolute inset-0 w-full h-full object-contain bg-muted"
|
||||||
<span className="text-sm text-destructive">
|
/>
|
||||||
Ошибка: {oilChange.sticker.errorMessage}
|
|
||||||
</span>
|
|
||||||
) : (
|
) : (
|
||||||
<span className="text-sm">✓ Загружено</span>
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span className="text-sm text-muted-foreground">Тап чтобы загрузить</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{oilChange.sticker?.status === "uploading" && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center text-xs bg-black/40 text-white">
|
||||||
|
Загрузка…
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{oilChange.sticker?.status === "error" && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center text-xs text-destructive p-2 bg-background/85 text-center">
|
||||||
|
Ошибка: {oilChange.sticker.errorMessage}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{oilChange.sticker?.status === "uploaded" && (
|
||||||
|
<div className="absolute bottom-1 right-1 rounded-full bg-green-600 text-white p-1 shadow">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M5 12l5 5L20 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
@@ -633,43 +771,24 @@ export default function CreateRepairPage() {
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Works picker modal */}
|
{/* Works picker modal — общий компонент (см. WorksPickerModal) */}
|
||||||
{worksPicker.open && (
|
{worksPicker.open && (
|
||||||
<div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
|
<WorksPickerModal
|
||||||
<header className="border-b p-3 flex items-center gap-2">
|
query={worksPicker.q}
|
||||||
<Button variant="ghost" size="sm" onClick={() => setWorksPicker({ open: false, q: "", results: [] })}>
|
results={worksPicker.results}
|
||||||
Отмена
|
onQuery={queryWorks}
|
||||||
</Button>
|
onPick={addWorkFromCatalog}
|
||||||
<Input
|
onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
|
||||||
autoFocus
|
/>
|
||||||
placeholder="Поиск работы…"
|
|
||||||
value={worksPicker.q}
|
|
||||||
onChange={(e) => queryWorks(e.target.value)}
|
|
||||||
/>
|
|
||||||
</header>
|
|
||||||
<main className="flex-1 overflow-y-auto">
|
|
||||||
<ul className="divide-y">
|
|
||||||
{worksPicker.results.map((w) => (
|
|
||||||
<li key={w.id}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => addWorkFromCatalog(w)}
|
|
||||||
className="w-full text-left p-3 hover:bg-accent/40 flex items-baseline justify-between gap-3"
|
|
||||||
>
|
|
||||||
<span className="flex-1 min-w-0 truncate">{w.name}</span>
|
|
||||||
<span className="text-sm text-muted-foreground">{w.price} ₽</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
{worksPicker.results.length === 0 && (
|
|
||||||
<li className="p-6 text-center text-sm text-muted-foreground">
|
|
||||||
Нет работ по запросу
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Parts picker modal — каталог склада (общий с формой правки) */}
|
||||||
|
<PartsPickerModal
|
||||||
|
open={partsPickerOpen}
|
||||||
|
carId={isExternal ? null : carId}
|
||||||
|
onPick={addPartFromCatalog}
|
||||||
|
onClose={() => setPartsPickerOpen(false)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,37 +5,78 @@
|
|||||||
* `created_at DESC`. Бесконечный скролл по 20. Pull-to-refresh,
|
* `created_at DESC`. Бесконечный скролл по 20. Pull-to-refresh,
|
||||||
* обновление при возврате в приложение (через useRepairsFeed).
|
* обновление при возврате в приложение (через useRepairsFeed).
|
||||||
*
|
*
|
||||||
|
* В шапке — поиск по госномеру, марке и модели (отдельного экрана нет:
|
||||||
|
* это фильтр той же ленты, со своим кэшем и своей пагинацией).
|
||||||
|
*
|
||||||
* Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
|
* Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
|
||||||
*/
|
*/
|
||||||
import { useCallback, useEffect, useRef } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
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 { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
import { useRepairsFeed } from "@/hooks/useRepairsFeed";
|
import { useRepairsFeed } from "@/hooks/useRepairsFeed";
|
||||||
import { formatFeedTimestamp } from "@/lib/timeFormat";
|
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() {
|
export default function RepairsFeedPage() {
|
||||||
const navigate = useNavigate();
|
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 {
|
const {
|
||||||
items,
|
items,
|
||||||
isLoading,
|
isLoading,
|
||||||
isError,
|
isError,
|
||||||
|
error,
|
||||||
fetchNextPage,
|
fetchNextPage,
|
||||||
hasNextPage,
|
hasNextPage,
|
||||||
isFetchingNextPage,
|
isFetchingNextPage,
|
||||||
refetch,
|
refresh,
|
||||||
|
isRefreshing,
|
||||||
isFetching,
|
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 для бесконечной прокрутки.
|
// IntersectionObserver для бесконечной прокрутки.
|
||||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const el = sentinelRef.current;
|
const el = sentinelRef.current;
|
||||||
if (!el || !hasNextPage) return;
|
if (!el || !hasNextPage || isRefreshing) return;
|
||||||
const io = new IntersectionObserver(
|
const io = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
if (entries[0]?.isIntersecting && !isFetchingNextPage) {
|
// Во время обновления не догружаем: refresh схлопывает ленту, скролл
|
||||||
|
// прижимается к новому низу, маркер попадает в кадр — и fetchNextPage
|
||||||
|
// отменил бы летящий запрос обновления. Человек жал бы «Обновить»
|
||||||
|
// сколько угодно, а новые ремонты сверху так и не появлялись бы.
|
||||||
|
if (entries[0]?.isIntersecting && !isFetchingNextPage && !isRefreshing) {
|
||||||
void fetchNextPage();
|
void fetchNextPage();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -43,14 +84,15 @@ export default function RepairsFeedPage() {
|
|||||||
);
|
);
|
||||||
io.observe(el);
|
io.observe(el);
|
||||||
return () => io.disconnect();
|
return () => io.disconnect();
|
||||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
}, [hasNextPage, isFetchingNextPage, fetchNextPage, isRefreshing]);
|
||||||
|
|
||||||
// Pull-to-refresh: простой UX через тач-скролл сверху.
|
// Pull-to-refresh: простой UX через тач-скролл сверху.
|
||||||
// Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refetch.
|
// Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refresh
|
||||||
|
// (он схлопывает ленту до первой страницы — см. useRepairsFeed).
|
||||||
// Полноценный pull-to-refresh с жестом — отдельная задача.
|
// Полноценный pull-to-refresh с жестом — отдельная задача.
|
||||||
const handleRefresh = useCallback(() => {
|
const handleRefresh = useCallback(() => {
|
||||||
void refetch();
|
void refresh();
|
||||||
}, [refetch]);
|
}, [refresh]);
|
||||||
|
|
||||||
const handleAdd = () => navigate("/repairs/new");
|
const handleAdd = () => navigate("/repairs/new");
|
||||||
const handleOpen = (item: FeedItem) => navigate(`/repairs/${item.id}`);
|
const handleOpen = (item: FeedItem) => navigate(`/repairs/${item.id}`);
|
||||||
@@ -80,11 +122,59 @@ export default function RepairsFeedPage() {
|
|||||||
<span className="hidden sm:inline">Добавить</span>
|
<span className="hidden sm:inline">Добавить</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</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>
|
</header>
|
||||||
|
|
||||||
<main className="flex-1 container max-w-2xl py-3 space-y-2">
|
<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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleRefresh}
|
onClick={handleRefresh}
|
||||||
@@ -103,23 +193,56 @@ export default function RepairsFeedPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Сбой — отдельная ветка ДО пустого состояния: «не дозвонились»
|
||||||
|
не должно выглядеть как «ничего не нашлось». */}
|
||||||
{isError && !isLoading && (
|
{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>
|
</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 && (
|
{items.length > 0 && (
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
{items.map((item) => (
|
{grouped.map((group) => (
|
||||||
<li key={item.id}>
|
<li key={group.key}>
|
||||||
<RepairRow item={item} onOpen={() => handleOpen(item)} />
|
<DaySeparator
|
||||||
</li>
|
dateKey={group.key}
|
||||||
))}
|
total={group.total}
|
||||||
</ul>
|
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" />
|
<div ref={sentinelRef} aria-hidden="true" />
|
||||||
{isFetchingNextPage && (
|
{isFetchingNextPage && (
|
||||||
@@ -129,7 +252,7 @@ export default function RepairsFeedPage() {
|
|||||||
)}
|
)}
|
||||||
{!hasNextPage && items.length > 0 && !isFetchingNextPage && (
|
{!hasNextPage && items.length > 0 && !isFetchingNextPage && (
|
||||||
<div className="text-center text-xs text-muted-foreground py-4">
|
<div className="text-center text-xs text-muted-foreground py-4">
|
||||||
Это все ремонты.
|
{isSearching ? "Это все совпадения." : "Это все ремонты."}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</main>
|
</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 }) {
|
function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
|
||||||
const carLine = [item.car_plate, item.car_make, item.car_model]
|
const carLine = [item.car_plate, item.car_make, item.car_model]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
@@ -163,7 +332,14 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-baseline justify-between gap-2">
|
<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">
|
<div className="text-xs text-muted-foreground flex-shrink-0">
|
||||||
{formatFeedTimestamp(item.created_at)}
|
{formatFeedTimestamp(item.created_at)}
|
||||||
</div>
|
</div>
|
||||||
@@ -173,10 +349,25 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
|
|||||||
Водитель: {item.driver_name}
|
Водитель: {item.driver_name}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</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;
|
function NothingFoundState({ query, onReset }: { query: string; onReset: () => void }) {
|
||||||
const mod100 = n % 100;
|
return (
|
||||||
if (mod100 >= 11 && mod100 <= 14) return "работ";
|
<div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">
|
||||||
if (mod10 === 1) return "работа";
|
<div className="rounded-full bg-muted p-4">
|
||||||
if (mod10 >= 2 && mod10 <= 4) return "работы";
|
<Search className="h-8 w-8 text-muted-foreground" />
|
||||||
return "работ";
|
</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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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>;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
import "@testing-library/jest-dom/vitest";
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
|
||||||
|
test("vitest + RTL + jsdom harness works", () => {
|
||||||
|
render(<div>привет</div>);
|
||||||
|
expect(screen.getByText("привет")).toBeInTheDocument();
|
||||||
|
});
|
||||||
@@ -29,5 +29,6 @@
|
|||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": { "@/*": ["./src/*"] }
|
"paths": { "@/*": ["./src/*"] }
|
||||||
},
|
},
|
||||||
"include": ["src"]
|
"include": ["src"],
|
||||||
|
"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
/// <reference types="vitest/config" />
|
||||||
|
import { defineConfig } from "vitest/config";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import path from "node:path";
|
||||||
|
|
||||||
|
// Отдельный конфиг для тестов — без VitePWA-плагина (он не нужен в jsdom и
|
||||||
|
// только шумит). Алиас `@` и React-плагин обязательны для компонентных тестов.
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: { "@": path.resolve(__dirname, "src") },
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
environment: "jsdom",
|
||||||
|
globals: true,
|
||||||
|
setupFiles: ["./src/test/setup.ts"],
|
||||||
|
css: false,
|
||||||
|
include: ["src/**/*.test.{ts,tsx}"],
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user