Compare commits

45 Commits
Author SHA1 Message Date
tremble7681andClaude Opus 5 1dca1fe3c9 feat(pwa): экран оплаты честно показывает отказ, таймаут и возврат
Экран успеха рисовался только при PAID. При любом другом финальном статусе
опрос останавливался, а человек навсегда оставался на «Ожидаем оплату…» со
спиннером — то есть два из трёх тестовых сценариев СБП глазами не проверить.

- ветки отказа (в том числе исчерпанных попыток), истёкшего срока и возврата
  средств: у возврата свой текст, новая попытка там ни при чём;
- ошибка запроса больше не выглядит как честное ожидание: после серии неудач
  подряд экран говорит, что не может проверить оплату, и даёт повторить.
  Раньше 404, 500 и рестарт бэкенда были неотличимы от «ждём оплату»;
- плашка способа оплаты показывала «СБП» и при оплате картой;
- после перезагрузки страницы сумма бралась из пустого router state и
  показывалась как 0 ₽ — лучше не показать ничего, чем показать неправду.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-06 18:12:13 +10:00
tremble7681 9742da439a feat(pwa): balance hero shows net «Баланс» (was «Общий долг» of negatives) 2026-06-20 00:59:53 +10:00
tremble7681andclaude-flow d2cd7632a5 fix(pwa): keep PWA alive during TG login (anchor opens Telegram, app polls on /tg-wait)
window.location.href=deep_link navigated the whole PWA to t.me, destroying the
/tg-wait polling screen -> the authenticated token was never fetched. Prefetch
the pairing session and open Telegram via an <a href> (OS app-switch, PWA stays
mounted polling); add an Open-Telegram fallback link on the wait screen.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-19 23:44:57 +10:00
tremble7681andclaude-flow 5ab4e9e74e fix(pwa): TgWaitPage redirects to login when no pairing session
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-19 23:07:06 +10:00
tremble7681 01c36ce935 feat(pwa): Telegram login primary + code fallback + TgWaitPage 2026-06-19 23:00:31 +10:00
tremble7681 0ec8f0b540 feat(pwa): usePairPoll hook (polls tg pairing, sets session) 2026-06-19 22:56:26 +10:00
tremble7681 bd1a4a31bd feat(pwa): tg verified-login api (tgSession/tgPoll) + schemas 2026-06-19 22:52:52 +10:00
tremble7681andclaude-flow b419a456fe fix(pwa): onboarding deep_links — make tg/max optional (MAX not configured in prod)
Backend omits channels without a configured username; strict zod schema
threw on missing 'max', surfacing as 'Не удалось отправить код' instead of
routing to the onboarding screen. Make both optional + regression test.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 23:05:12 +10:00
tremble7681andclaude-flow 08ebc09814 docs(pwa): plan fix (keypad reduce) + gitignore tsbuildinfo
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 22:23:32 +10:00
tremble7681andclaude-flow e5a2874ba7 feat(driver-pwa): onboarding renders only configured bot channels
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 22:05:08 +10:00
tremble7681andclaude-flow adad929769 feat(driver-pwa): friendly toast on 429 (rate-limited code request)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 20:33:46 +10:00
tremble7681andclaude-flow 479b9699ea feat(driver-pwa): top-up fetches commission rate from backend (no hardcoded rate)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 20:27:39 +10:00
tremble7681andclaude-flow b7dc826f0f feat(driver-pwa): real MVP PWA icons (192/512, cream+card motif) + generator
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 20:10:33 +10:00
tremble7681andclaude-flow 15d7f34689 polish(driver-pwa): error states, typed catch, drop dead avatar, terminal poll
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:59:38 +10:00
tremble7681andclaude-flow 0fba967cd8 feat(driver-pwa): PWA manifest + placeholder icons
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:42:18 +10:00
tremble7681andclaude-flow 66ef403bc0 feat(driver-pwa): payments history screen
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:39:58 +10:00
tremble7681andclaude-flow 0a164634f8 feat(driver-pwa): payment screen + auto status polling
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:36:49 +10:00
tremble7681andclaude-flow 372dc0ede7 feat(driver-pwa): top-up with custom keypad
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:34:00 +10:00
tremble7681andclaude-flow d769845d88 feat(driver-pwa): balance screen (hero total + accounts)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:30:59 +10:00
tremble7681andclaude-flow 6f76809e9e feat(driver-pwa): onboarding (connect TG/MAX bot)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:27:21 +10:00
tremble7681andclaude-flow 9a116ad94e feat(driver-pwa): login (phone -> TG/MAX code)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:24:37 +10:00
tremble7681andclaude-flow f74f3688ae feat(driver-pwa): shared UI + router with auth guard
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:21:10 +10:00
tremble7681andclaude-flow a7032692f1 feat(driver-pwa): auth store + ky client + typed driver API (zod)
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:17:12 +10:00
tremble7681andclaude-flow 34d3554f72 feat(driver-pwa): pure money/phone/amount helpers + tests
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:13:16 +10:00
tremble7681andclaude-flow 19b91d65c8 feat(driver-pwa): design tokens, entry, test setup
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:10:48 +10:00
tremble7681andclaude-flow 54ba4edb94 chore(driver-pwa): scaffold Vite+PWA+Tailwind project
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:08:41 +10:00
tremble7681andclaude-flow 19dc1b31a6 docs(driver-pwa): Премиум Водитель PWA implementation plan
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 18:58:30 +10:00
tremble7681andclaude-flow cc76cc5698 docs(driver-pwa): Премиум Водитель PWA design spec
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 18:47:04 +10:00
tremble7681andclaude-flow 100a29f8c7 fix(repairs): ростер механиков по пути repairs/mechanics-roster
prefixUrl=/api/v1/mechanic, эндпоинт под роутером /v1/mechanic/repairs →
путь обязан включать repairs/ (иначе 404, пикер механиков не грузился). Код-ревью #1.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-10 20:07:52 +03:00
tremble7681andclaude-flow f7ccc7ce77 feat(repairs): блок «Механики» — несколько механиков на ремонт, делёж 1/N
MechanicsField (чипы + пикер ростера) в Create/Edit; mechanic_ids в payload;
RepairDetail показывает работавших + долю 1/N. Ростер: GET /v1/mechanic/mechanics-roster.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-10 19:39:36 +03:00
tremble7681andclaude-flow 416ea3391b feat(pwa): rename Салон→Салон перед, add Салон зад + Багажник slots
Extract photo slots to tested lib/inspectionSlots; rename interior label,
add interior-rear + trunk slots (all inspection types). 3 new tests.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 18:49:31 +03:00
tremble7681andclaude-flow b2969f36c3 refactor(pwa): extract shared WorksPickerModal from Create/EditRepairPage
The two repair forms genuinely diverged in UX (inline price-unlock + photos
vs modal override, no photos), so a single merged form would be worse. The
real duplication was the works-catalog picker modal — extracted into one
tested presentational component, removing ~75 duplicated lines.

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 17:32:11 +03:00
tremble7681andclaude-flow fab8b4496b test(pwa): add vitest+RTL harness and extract tested lib helpers
- vitest + @testing-library + jsdom; `npm test`; test files excluded from tsc build
- extract date-grouping/format (lib/repairsFeed) and submit-gating (lib/repairForm)
  out of RepairsFeedPage/CreateRepairPage into tested modules
- 29 tests: VLA day-grouping, plural/money format, repair-form validation,
  CarSelectPage external-car entry flow

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 17:28:49 +03:00
tremble7681andclaude-flow 8c9caedb03 feat(repairs): 'с улицы' badge in PWA feed
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 14:14:27 +03:00
tremble7681andclaude-flow d0ebd9ddf5 feat(repairs): external mode in create form + /repairs/new-external route
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 14:12:57 +03:00
tremble7681andclaude-flow 7e6817b3ff feat(repairs): street-car entry button + sheet on car select
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 14:11:03 +03:00
tremble7681andclaude-flow 3d875642f8 feat(repairs): external_car in create payload type
Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-05 14:09:45 +03:00
tremble7681 10492e52a4 feat(repairs): month-to-date header + per-day separators
Header 'Итого' (sum of loaded items) -> 'За этот месяц' (sum + count
from 1st VLAT to now) via new /v1/mechanic/repairs/stats/month endpoint.

List now grouped by local day with a dashed separator showing date
('Сегодня' / 'Вчера' / '26 мая') + day total + repair count.

Bundle: index-BKRX_okx.js
2026-05-26 23:27:54 +10:00
tremble7681 fd0ec64da9 feat(pwa/repairs): show price per row + total sum header
В каждой карточке ленты ремонтов справа от строки работ выводим сумму
работ (works_total из бэка, без запчастей). Шапка над лентой переехала:
слева «Итого: NNN ₽ (X ремонтов)», справа кнопка «Обновить» (раньше
была одна сверху-справа).
2026-05-25 21:52:24 +10:00
tremble7681 3b7b2ae56d fix(pwa/repairs): allow clearing price input without sticky 0
В CreateRepairPage поле «Цена применённая» хранило цифру через
price_applied: number. При удалении символов React сразу подставлял 0
и его нельзя было стереть — приходилось каретку перед нулём ставить
руками. Поменяли тип на number | "" в WorkRow и в onChange оставляем
пустую строку в стейте, пока юзер не ввёл новую цифру. На submit и в
сумму "" трактуется как 0 (Number("") === 0).

EditRepairPage не задет — там цена правится через модалку, цена там
уже жила как string (useState(String(...))) и пустое было допустимо.
2026-05-25 21:43:07 +10:00
tremble7681 205078c5ce fix(pwa/repairs): drop duplicate mileage input under «Замена масла»
При создании/редактировании ремонта в форме был отдельный «Пробег на
момент замены» внутри блока замены масла — auto-sync от шапочного с
soft-dirty флагом по У24. На практике это всё равно заставляло механика
вводить значение дважды, если шапочный пробег вводился вручную (StarLine
недоступен): момент включения галочки случался после ручного ввода,
soft-sync не успевал отработать или механик не понимал что поле
автозаполнилось.

Упростили: единственный пробег — «Пробег (км)» в шапке формы. На submit
он же подставляется в oil_change.mileage_at_change. Поле «Следующая через»
оставили — это интервал, а не значение пробега.

Бэкенд не трогаем — схема та же (mileage_at_change всё ещё в payload).
2026-05-25 21:29:26 +10:00
tremble7681 8eac0b74fc fix(pwa): drop stale parts-suggestion responses to stop input self-erasing
В CreateRepairPage queryPartSuggestions после await перезаписывал
partsDraft.name значением q из момента старта запроса. При быстром вводе
("К" → "Ке" → "Кеп" → "Кепу") поздно вернувшийся ответ для "К" откатывал
поле обратно на "К" — пользователи это видели как «текст частично сам
стирается». Делаем функциональный setState и роняем ответ если name уже
другой. EditRepairPage не задет (там корректный паттерн).
2026-05-25 12:44:41 +10:00
tremble7681 9642eb6e45 fix(pwa): safe-area padding for full-screen page-replacement modals
Юзер обнаружил, что при поиске работ (worksPicker в Create/EditRepairPage)
шапка с инпутом всё ещё уезжает под status-bar. Эти модалки и аналоги
(PhotoAnnotateStep, ZoneDetailView, InspectionEditor) используют
fixed inset-0 — моё прежнее правило для .fixed.top-0 их не покрывало.
Добавил отдельный селектор для .fixed.inset-0.bg-background[/\95];
bg-black/40·50·90 (диалоги, фото-вьюверы) намеренно не задеты.
2026-05-25 12:13:30 +10:00
tremble7681 087693877d fix(pwa): respect iOS safe-area-inset on body + sticky/fixed headers
В iOS PWA при viewport-fit=cover и apple-mobile-web-app-status-bar-style=
black-translucent статус-бар прозрачно накладывается на шапки страниц
(пользователи жаловались скринами с overlap «11:37» поверх «Ремонт #12»).

Body теперь имеет padding-top/bottom env(safe-area-inset-*) — fix initial-
рендер и нижних кнопок. Для sticky/fixed .top-0 хедеров отдельно overrid'им
top: env(safe-area-inset-top), т.к. sticky прилипает к top:0 viewport, а
не к содержимому body. Селектор узкий (.sticky.top-0 / .fixed.top-0) —
не задевает .fixed.inset-0 полноэкранные модалки.
2026-05-25 12:04:08 +10:00
tremble7681 85f3a5c682 wip(local): repairs Edit+Detail snapshot 2026-05-25
Untracked: EditRepairPage, RepairDetailPage
Modified: App.tsx, repairsFeed.ts, InspectionEditor.tsx, CreateRepairPage.tsx
+ public/icons docx files (oferta, 1032_*)

Snapshot to prevent loss; main untouched at a5bd730.
2026-05-25 00:18:41 +10:00
81 changed files with 11667 additions and 4725 deletions
+1
View File
@@ -38,3 +38,4 @@ Thumbs.db
# IDE
.idea/
.vscode/
.superpowers/
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,68 @@
# Премиум Водитель — PWA (дизайн)
**Дата:** 2026-06-18
**Статус:** дизайн согласован (брейншторм + визуальный компаньон). Код не начат.
**Цель:** PWA-приложение водителя «Премиум Водитель» — вход по телефону (код через TG/MAX), просмотр баланса (счета из CRM-леджера), пополнение через Т-Банк (СБП/карта), история пополнений. Поверхность для уже построенного бэкенда (Фаза 1 платежей + авторизация водителя в `crm2/app/modules/payments`).
## Размещение и стек
- Новый PWA — **сиблинг** `PremiumDriverApp/driver-pwa/frontend/` (рядом с `mechanic-pwa/`), на том же стеке: **React + Vite + vite-plugin-pwa + TypeScript + Tailwind + @tanstack/react-query + ky + zod + react-router-dom + react-hook-form + zustand + sonner (тосты) + lucide-react + vitest**. Структура `src/{api,components,pages,hooks,lib,store}` как у mechanic-pwa.
- Хостинг: **app.pptaxi.ru** (статика + Caddy; деплой как у mechanic — build → dist → tar/rsync, см. mechanic deploy flow).
- Имя приложения (везде в UI, манифест PWA, заголовок): **«Премиум Водитель»**.
## Визуальный язык — Cream Minimal
- Палитра (без жёлтого): фон `#F3EEE3` (cream), карточка/поверхность `#FBF8F1`, линия-разделитель `#E4DCCB`, чернила `#1C1B19`, вторичный текст `#7C7361`/opacity. Кнопки primary — тёмные `#1C1B19` с текстом `#F3EEE3`. Долг (минус) `#C0493A`, плюс/депозит `#3B6E4A`.
- Типографика: **Inter** (один шрифт), без эмодзи. Иконки — lucide (тонкие, монохром).
- Скругления 12–16px, тонкие 1px-границы, мягкие тени минимально. Крупные тап-таргеты (мобайл-фёрст). App-like / edit-first: минимум лишних кнопок, экран сам реагирует.
## Экраны (MVP)
1. **Вход.**
- Шаг 1: поле телефона `+7 ___ ___-__-__` → «Получить код». → `POST /api/driver/auth/request {phone}`.
- Если ответ `code_sent` → шаг 2: ввод кода (свой цифровой кейпад) → `POST /api/driver/auth/verify {phone, code}` → сохраняем driver JWT → на «Баланс».
- Если ответ `onboarding` → экран «Подключите бота»: две кнопки **Telegram** / **MAX** (открывают `deep_links.tg`/`.max`); подсказка «нажмите Старт у бота, затем вернитесь и запросите код снова». Кнопка «Я подключил — запросить код».
2. **Баланс** (компоновка B: hero + список).
- Шапка: «Премиум Водитель» + инициалы водителя.
- **Hero-блок «Общий долг»** — крупная сумма (сумма отрицательных счетов).
- **Список счетов** (bucket из `/api/driver/balance`): название + подпись (марка/госномер для аренды, «N неоплаченных» для штрафов) + значение (минус — красный, плюс — зелёный).
- Кнопка **«Пополнить»** (primary). Тап по счёту/кнопке → «Пополнение» с предвыбранным счётом.
- Внизу/в меню: «История», «Выйти».
3. **Пополнение** (компоновка C: свой кейпад).
- Заголовок «Пополнить · <счёт>». Крупная сумма. Строка «к оплате X ₽ (комиссия Y ₽)» — пересчёт на лету по ставке (получаем из ответа `/topup` или показываем оценку и уточняем).
- **Свой цифровой кейпад** (1–9, 0, ·, ⌫) — без системной клавиатуры; крупные клавиши. Быстрые суммы 500/1000/2000 (чипы).
- Сегмент **СБП / Картой**.
- Кнопка **«Оплатить»** → `POST /api/driver/topup {bucket, amount, method}` → получаем `{order_id, pay_url}`.
4. **Оплата / статус** (вариант A: авто-статус, без QR).
- Иконка «СБП», сумма к оплате, кнопка **«Оплатить через СБП»** (или «Оплатить картой») → открывает `pay_url` (СБП deep-link `qr.nspk.ru/...` → приложение банка; карта → форма `pay.tbank.ru`). **QR не показываем, «оплата с другого устройства» убрана** — водитель платит на том же телефоне через приложение банка.
- Под кнопкой — авто-статус «Ожидаем оплату…» (спиннер). Приложение **опрашивает статус** платежа; при `PAID` → экран **«Оплачено»** (зелёная галочка, «<счёт> пополнен на N ₽») → кнопка «На главную» (баланс перезапрашивается).
5. **История пополнений.**
- Список из `driver_payments` водителя: дата, счёт, сумма, статус (Оплачено/Ожидает/Отклонён), способ. Пусто → «Пока нет пополнений».
6. **Выход** — очистка JWT, возврат на «Вход».
## Поток данных / API (crm2 BFF, префикс `/api`)
Готово (Фаза 1 + авторизация):
- `POST /driver/auth/request {phone}``{status:"code_sent",channel}` | `{status:"onboarding",deep_links:{tg,max}}`
- `POST /driver/auth/verify {phone, code}``{token, driver_id}`
- `GET /driver/balance` (Bearer) → `{accounts:[{bucket, balance}]}`
- `POST /driver/topup {bucket, amount, method}` (Bearer) → `{order_id, pay_url, commission, total}`
**Нужно добавить на бэкенде (зависимость этого PWA — отдельные backend-задачи):**
- `GET /driver/payments` (Bearer) → история пополнений водителя (из `driver_payments`: order_id, bucket, amount, commission, method, status, created_at, paid_at).
- `GET /driver/payment/{order_id}` (Bearer) → `{status}` для авто-опроса статуса оплаты (NEW/FORM/PAID/REJECTED). (Альтернатива: опрашивать `/driver/balance` и сравнивать — но явный статус надёжнее и показывает «Оплачено».)
- (Опц.) В `/driver/topup` вернуть и `commission_rate`, чтобы кейпад считал «к оплате» локально до запроса.
## Сессия / клиент
- driver JWT (typ='driver', 30 дн) хранится в `localStorage`; `ky`-инстанс добавляет `Authorization: Bearer`. На 401 → разлогин (на «Вход»).
- `@tanstack/react-query` для balance/history (кэш + рефетч); `zod` валидирует ответы; `zustand` — сессия (token, driver_id). Тосты ошибок — `sonner`.
- База API из env (`VITE_API_BASE`, по умолчанию `https://crm.pptaxi.ru/api`). CORS: бэкенд должен разрешить origin `https://app.pptaxi.ru` для `/api/driver/*` (backend-задача).
## PWA
- `vite-plugin-pwa`: manifest (name «Премиум Водитель», cream theme `#F3EEE3`, иконки 192/512, standalone, портрет), service worker (precache оболочки, network-first для API). Устанавливается на телефон без сторов (по ссылке app.pptaxi.ru → «На экран Домой»).
## Обработка ошибок
- Телефон не найден (404) → «Номер не найден. Обратитесь в парк.» Неверный код (401) → «Неверный или просроченный код» + повтор. Платёж не создан → тост + остаёмся на «Пополнении». Авто-опрос: таймаут N минут → «Не дождались оплаты» + кнопка «Проверить ещё раз»/«Вернуться».
## Тестирование
- vitest + @testing-library/react: рендер экранов, кейпад (ввод/⌫/быстрые суммы, пересчёт «к оплате»), форма телефона/кода, маппинг ответов API (zod-схемы), guard приватных роутов (нет токена → «Вход»), авто-статус (мок таймера/опроса → success). API мокается (msw или ky-mock), без сети.
## Скоуп / порядок
MVP-экраны: Вход (+онбординг) · Баланс · Пополнение · Оплата/статус · История · Выход. **Вне MVP:** push-уведомления, вывод средств, профиль/настройки, мультиязычность.
Порядок сборки (для плана): каркас приложения+PWA+API-клиент+сессия → Вход/онбординг → Баланс → Пополнение(кейпад) → Оплата/авто-статус → История → деплой app.pptaxi.ru. Бэкенд-зависимости (`/driver/payments`, `/driver/payment/{order_id}`, CORS) — отдельные мелкие задачи в crm2 (сделать до/параллельно соответствующим экранам).
+1
View File
@@ -0,0 +1 @@
VITE_API_BASE=https://crm.pptaxi.ru/api
+5
View File
@@ -0,0 +1,5 @@
node_modules
dist
.env
.env.local
*.tsbuildinfo
+16
View File
@@ -0,0 +1,16 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#F3EEE3" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
<title>Премиум Водитель</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
File diff suppressed because it is too large Load Diff
+42
View File
@@ -0,0 +1,42 @@
{
"name": "driver-pwa",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview",
"lint": "eslint .",
"test": "vitest run",
"test:watch": "vitest"
},
"dependencies": {
"@tanstack/react-query": "^5.51.0",
"ky": "^1.7.2",
"lucide-react": "^0.454.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.0",
"sonner": "^1.5.0",
"zod": "^3.23.8",
"zustand": "^4.5.5"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/node": "^22.5.0",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"jsdom": "^25.0.0",
"postcss": "^8.4.45",
"tailwindcss": "^3.4.10",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vite-plugin-pwa": "^0.20.5",
"vitest": "^2.0.5"
}
}
+1
View File
@@ -0,0 +1 @@
export default { plugins: { tailwindcss: {}, autoprefixer: {} } };
Binary file not shown.

After

Width:  |  Height:  |  Size: 909 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,13 @@
{
"name": "Премиум Водитель",
"short_name": "Премиум",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#F3EEE3",
"theme_color": "#F3EEE3",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
+76
View File
@@ -0,0 +1,76 @@
// Генерация PWA-иконок «Премиум Водитель» без сторонних либ (zlib PNG-энкодер).
// Дизайн: кремовый фон #F3EEE3, тёмная скруглённая плитка #1C1B19,
// внутри белая «карта» #F6F2E9 с тёмной полосой (финансовый мотив). Без жёлтого/текста.
import zlib from "node:zlib";
import fs from "node:fs";
import path from "node:path";
const CREAM = [243, 238, 227];
const INK = [28, 27, 25];
const CARD = [246, 242, 233];
function crc32(buf) {
let c = ~0;
for (let i = 0; i < buf.length; i++) {
c ^= buf[i];
for (let k = 0; k < 8; k++) c = (c >>> 1) ^ (0xedb88320 & -(c & 1));
}
return (~c) >>> 0;
}
function chunk(type, data) {
const t = Buffer.from(type, "ascii");
const len = Buffer.alloc(4); len.writeUInt32BE(data.length, 0);
const body = Buffer.concat([t, data]);
const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(body), 0);
return Buffer.concat([len, body, crc]);
}
function encodePng(N, rgba) {
const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
const ihdr = Buffer.alloc(13);
ihdr.writeUInt32BE(N, 0); ihdr.writeUInt32BE(N, 4); ihdr[8] = 8; ihdr[9] = 6;
const stride = N * 4;
const raw = Buffer.alloc(N * (stride + 1));
for (let y = 0; y < N; y++) {
raw[y * (stride + 1)] = 0;
rgba.copy(raw, y * (stride + 1) + 1, y * stride, y * stride + stride);
}
return Buffer.concat([sig, chunk("IHDR", ihdr), chunk("IDAT", zlib.deflateSync(raw)), chunk("IEND", Buffer.alloc(0))]);
}
function inRoundRect(px, py, x0, y0, x1, y1, r) {
if (px < x0 || px >= x1 || py < y0 || py >= y1) return false;
const cx = px < x0 + r ? x0 + r : px >= x1 - r ? x1 - r : px;
const cy = py < y0 + r ? y0 + r : py >= y1 - r ? y1 - r : py;
const dx = px - cx, dy = py - cy;
return dx * dx + dy * dy <= r * r;
}
function draw(N) {
const buf = Buffer.alloc(N * N * 4);
// tile (centered ~64%)
const tile = Math.round(N * 0.64), tx0 = Math.round((N - tile) / 2), ty0 = tx0;
const tx1 = tx0 + tile, ty1 = ty0 + tile, tr = Math.round(tile * 0.24);
// card inside tile
const cw = Math.round(tile * 0.62), ch = Math.round(tile * 0.42);
const cx0 = Math.round((N - cw) / 2), cy0 = Math.round((N - ch) / 2);
const cx1 = cx0 + cw, cy1 = cy0 + ch, cr = Math.round(ch * 0.18);
// stripe near top of card
const sy0 = cy0 + Math.round(ch * 0.22), sy1 = sy0 + Math.round(ch * 0.14);
for (let y = 0; y < N; y++) {
for (let x = 0; x < N; x++) {
let col = CREAM;
if (inRoundRect(x, y, tx0, ty0, tx1, ty1, tr)) col = INK;
if (inRoundRect(x, y, cx0, cy0, cx1, cy1, cr)) col = CARD;
if (x >= cx0 && x < cx1 && y >= sy0 && y < sy1) col = INK;
const o = (y * N + x) * 4;
buf[o] = col[0]; buf[o + 1] = col[1]; buf[o + 2] = col[2]; buf[o + 3] = 255;
}
}
return encodePng(N, buf);
}
const dir = path.resolve("public/icons");
fs.mkdirSync(dir, { recursive: true });
for (const N of [192, 512]) {
fs.writeFileSync(path.join(dir, `icon-${N}.png`), draw(N));
console.log(`wrote icon-${N}.png`);
}
+25
View File
@@ -0,0 +1,25 @@
import { describe, it, expect, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";
import { useAuth } from "@/store/auth";
function renderAt(path: string) {
const qc = new QueryClient();
return render(
<QueryClientProvider client={qc}>
<MemoryRouter initialEntries={[path]}>
<App />
</MemoryRouter>
</QueryClientProvider>
);
}
describe("routing guard", () => {
beforeEach(() => useAuth.getState().clear());
it("redirects to login when no token", () => {
renderAt("/");
expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
});
});
+32
View File
@@ -0,0 +1,32 @@
import type { ReactNode } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { useAuth } from "@/store/auth";
import { LoginPage } from "@/pages/LoginPage";
import { TgWaitPage } from "@/pages/TgWaitPage";
import { OnboardingPage } from "@/pages/OnboardingPage";
import { BalancePage } from "@/pages/BalancePage";
import { TopupPage } from "@/pages/TopupPage";
import { PaymentPage } from "@/pages/PaymentPage";
import { HistoryPage } from "@/pages/HistoryPage";
function RequireAuth({ children }: { children: ReactNode }) {
const token = useAuth((s) => s.token);
return token ? <>{children}</> : <Navigate to="/login" replace />;
}
export default function App() {
return (
<div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/tg-wait" element={<TgWaitPage />} />
<Route path="/onboarding" element={<OnboardingPage />} />
<Route path="/" element={<RequireAuth><BalancePage /></RequireAuth>} />
<Route path="/topup" element={<RequireAuth><TopupPage /></RequireAuth>} />
<Route path="/pay/:orderId" element={<RequireAuth><PaymentPage /></RequireAuth>} />
<Route path="/history" element={<RequireAuth><HistoryPage /></RequireAuth>} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</div>
);
}
+24
View File
@@ -0,0 +1,24 @@
import ky, { type KyInstance } from "ky";
import { useAuth } from "@/store/auth";
const API_BASE = import.meta.env.VITE_API_BASE ?? "https://crm.pptaxi.ru/api";
export const api: KyInstance = ky.create({
prefixUrl: API_BASE,
timeout: 30_000,
retry: { limit: 2, methods: ["get"] },
hooks: {
beforeRequest: [
(request) => {
const token = useAuth.getState().token;
if (token) request.headers.set("Authorization", `Bearer ${token}`);
},
],
beforeError: [
(error) => {
if (error.response?.status === 401) useAuth.getState().clear();
return error;
},
],
},
});
@@ -0,0 +1,39 @@
import { describe, it, expect } from "vitest";
import { BalanceSchema, TopupSchema, PaymentsSchema, AuthRequestSchema, TgSessionSchema, TgPollSchema } from "./driver";
describe("driver api schemas", () => {
it("parses balance", () => {
const v = BalanceSchema.parse({ accounts: [{ bucket: "Долг аренда", balance: -3200 }] });
expect(v.accounts[0].bucket).toBe("Долг аренда");
});
it("parses topup", () => {
const v = TopupSchema.parse({ order_id: "o1", pay_url: "https://x", commission: 52, total: 1052 });
expect(v.pay_url).toBe("https://x");
});
it("parses auth request onboarding + code_sent", () => {
expect(AuthRequestSchema.parse({ status: "code_sent", channel: "tg" }).status).toBe("code_sent");
const o = AuthRequestSchema.parse({ status: "onboarding", deep_links: { tg: "t", max: "m" } });
expect(o.status === "onboarding" && o.deep_links.tg).toBe("t");
// prod: MAX bot not configured → backend omits `max`, must still parse (regression guard)
const tgOnly = AuthRequestSchema.parse({ status: "onboarding", deep_links: { tg: "t" } });
expect(tgOnly.status === "onboarding" && tgOnly.deep_links.tg).toBe("t");
});
it("parses payments history", () => {
const v = PaymentsSchema.parse({ payments: [{ order_id: "o1", bucket: "b", amount: 100,
commission: 5.2, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: null }] });
expect(v.payments[0].status).toBe("PAID");
});
});
describe("tg verified-login schemas", () => {
it("parses tg session", () => {
const v = TgSessionSchema.parse({ pair_session: "S", deep_link: "https://t.me/x?start=S" });
expect(v.pair_session).toBe("S");
});
it("parses tg poll states", () => {
expect(TgPollSchema.parse({ status: "pending" }).status).toBe("pending");
expect(TgPollSchema.parse({ status: "expired" }).status).toBe("expired");
const a = TgPollSchema.parse({ status: "authenticated", token: "T", driver_id: 7 });
expect(a.status === "authenticated" && a.token).toBe("T");
});
});
+55
View File
@@ -0,0 +1,55 @@
import { z } from "zod";
import { api } from "./client";
export const AuthRequestSchema = z.union([
z.object({ status: z.literal("code_sent"), channel: z.string() }),
z.object({ status: z.literal("onboarding"), deep_links: z.object({ tg: z.string().optional(), max: z.string().optional() }) }),
]);
export type AuthRequest = z.infer<typeof AuthRequestSchema>;
export const VerifySchema = z.object({ token: z.string(), driver_id: z.number() });
export const BalanceSchema = z.object({
accounts: z.array(z.object({ bucket: z.string(), balance: z.number() })),
});
export const TopupSchema = z.object({
order_id: z.string(), pay_url: z.string(), commission: z.number(), total: z.number(),
});
export const PaymentStateSchema = z.object({ order_id: z.string(), status: z.string() });
export const CommissionSchema = z.object({ rate: z.number() });
export const PaymentsSchema = z.object({
payments: z.array(z.object({
order_id: z.string(), bucket: z.string(), amount: z.number(), commission: z.number(),
method: z.string(), status: z.string(),
created_at: z.string().nullable(), paid_at: z.string().nullable(),
})),
});
export const TgSessionSchema = z.object({
pair_session: z.string(),
deep_link: z.string().nullable(),
});
export const TgPollSchema = z.union([
z.object({ status: z.literal("pending") }),
z.object({ status: z.literal("expired") }),
z.object({ status: z.literal("authenticated"), token: z.string(), driver_id: z.number() }),
]);
export const tgSession = async () =>
TgSessionSchema.parse(await api.post("driver/auth/tg/session").json());
export const tgPoll = async (pairSession: string) =>
TgPollSchema.parse(await api.get("driver/auth/tg/poll", { searchParams: { pair_session: pairSession } }).json());
export const authRequest = async (phone: string) =>
AuthRequestSchema.parse(await api.post("driver/auth/request", { json: { phone } }).json());
export const authVerify = async (phone: string, code: string) =>
VerifySchema.parse(await api.post("driver/auth/verify", { json: { phone, code } }).json());
export const getBalance = async () =>
BalanceSchema.parse(await api.get("driver/balance").json());
export const topup = async (bucket: string, amount: number, method: "qr" | "card") =>
TopupSchema.parse(await api.post("driver/topup", { json: { bucket, amount, method } }).json());
export const getPaymentState = async (orderId: string) =>
PaymentStateSchema.parse(await api.get(`driver/payment/${orderId}`).json());
export const getPayments = async () =>
PaymentsSchema.parse(await api.get("driver/payments").json());
export const getCommission = async () =>
CommissionSchema.parse(await api.get("driver/commission").json());
@@ -0,0 +1,7 @@
export function AppHeader() {
return (
<header className="mb-4">
<span className="text-sm font-bold">Премиум Водитель</span>
</header>
);
}
@@ -0,0 +1,19 @@
interface Props { value: string; options: { value: string; label: string }[]; onChange: (v: string) => void; }
export function Segment({ value, options, onChange }: Props) {
return (
<div className="flex gap-1.5">
{options.map((o) => (
<button
key={o.value}
type="button"
onClick={() => onChange(o.value)}
className={`flex-1 py-2.5 rounded-xl2 text-xs border ${
value === o.value ? "bg-ink text-cream border-ink font-bold" : "bg-surface border-line text-muted"
}`}
>
{o.label}
</button>
))}
</div>
);
}
@@ -0,0 +1,3 @@
export function Spinner() {
return <span className="inline-block w-3.5 h-3.5 border-2 border-line border-t-ink rounded-full animate-spin" />;
}
@@ -0,0 +1,29 @@
// src/hooks/usePairPoll.test.tsx
import { renderHook, waitFor } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { usePairPoll } from "./usePairPoll";
import * as driver from "@/api/driver";
import { useAuth } from "@/store/auth";
beforeEach(() => { useAuth.getState().clear(); vi.restoreAllMocks(); });
describe("usePairPoll", () => {
it("sets session on authenticated", async () => {
vi.spyOn(driver, "tgPoll").mockResolvedValue({ status: "authenticated", token: "T", driver_id: 7 } as any);
const { result } = renderHook(() => usePairPoll("SESS"));
await waitFor(() => expect(result.current.status).toBe("authenticated"));
expect(useAuth.getState().token).toBe("T");
expect(useAuth.getState().driverId).toBe(7);
});
it("stays pending then expired", async () => {
vi.spyOn(driver, "tgPoll").mockResolvedValue({ status: "expired" } as any);
const { result } = renderHook(() => usePairPoll("SESS"));
await waitFor(() => expect(result.current.status).toBe("expired"));
});
it("does nothing when session is null", () => {
const spy = vi.spyOn(driver, "tgPoll");
const { result } = renderHook(() => usePairPoll(null));
expect(result.current.status).toBe("pending");
expect(spy).not.toHaveBeenCalled();
});
});
@@ -0,0 +1,43 @@
// src/hooks/usePairPoll.ts
import { useEffect, useRef, useState } from "react";
import { tgPoll } from "@/api/driver";
import { useAuth } from "@/store/auth";
type Status = "pending" | "authenticated" | "expired";
const INTERVAL_MS = 2000;
const TIMEOUT_MS = 5 * 60 * 1000;
export function usePairPoll(pairSession: string | null): { status: Status } {
const [status, setStatus] = useState<Status>("pending");
const setSession = useAuth((s) => s.setSession);
const startedAt = useRef<number>(0);
useEffect(() => {
if (!pairSession) return;
let alive = true;
let timer: ReturnType<typeof setTimeout>;
startedAt.current = Date.now();
const tick = async () => {
if (!alive) return;
try {
const r = await tgPoll(pairSession);
if (!alive) return;
if (r.status === "authenticated") {
setSession(r.token, r.driver_id);
setStatus("authenticated");
return;
}
if (r.status === "expired") { setStatus("expired"); return; }
} catch {
// transient — keep polling until timeout
}
if (Date.now() - startedAt.current > TIMEOUT_MS) { setStatus("expired"); return; }
timer = setTimeout(tick, INTERVAL_MS);
};
tick();
return () => { alive = false; clearTimeout(timer); };
}, [pairSession, setSession]);
return { status };
}
@@ -0,0 +1,39 @@
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { getPaymentState } from "@/api/driver";
// финальные статусы: дальше опрашивать нечего, экран показывает итог —
// оплачено, отказ, истёкший срок или ошибка
const TERMINAL = new Set([
"PAID", "CONFIRMED", "REJECTED", "REVERSED", "REFUNDED",
"PARTIAL_REVERSED", "PARTIAL_REFUNDED",
"CANCELED", "AUTH_FAIL", "DEADLINE_EXPIRED", "ATTEMPTS_EXPIRED", "ERROR",
]);
export function usePaymentStatus(orderId: string) {
const query = useQuery({
queryKey: ["payment", orderId],
queryFn: () => getPaymentState(orderId),
refetchInterval: (q) => (q.state.data && TERMINAL.has(q.state.data.status) ? false : 1500),
// повтором здесь работает сам опрос через 1.5 с, а внутренние ретраи с backoff
// только оттягивают момент, когда сбой станет виден на экране
retry: false,
});
// серию неудач считаем сами: failureCount обнуляется в начале каждого опроса
// и о том, сколько раз подряд не ответил бэкенд, ничего не говорит
const [failStreak, setFailStreak] = useState(0);
useEffect(() => {
if (query.errorUpdatedAt) setFailStreak((n) => n + 1);
}, [query.errorUpdatedAt]);
useEffect(() => {
if (query.dataUpdatedAt) setFailStreak(0);
}, [query.dataUpdatedAt]);
// пока ни одного удачного ответа не было, на время запроса isError снова гаснет
// (react-query возвращает статус в pending) — экран бы моргал ожиданием на каждом опросе.
// отметки времени такого провала не дают и гаснут ровно тогда, когда пришли данные
const lastFailed = query.errorUpdatedAt > query.dataUpdatedAt;
return { ...query, failStreak, lastFailed };
}
+13
View File
@@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body, #root { height: 100%; }
body { @apply bg-cream text-ink font-sans antialiased; margin: 0; }
button { font-family: inherit; }
@layer components {
.btn-primary { @apply bg-ink text-cream rounded-xl2 py-3.5 px-4 text-sm font-bold text-center w-full active:opacity-90 disabled:opacity-50; }
.btn-ghost { @apply border border-ink text-ink rounded-xl2 py-3 px-4 text-sm font-semibold text-center w-full; }
.card { @apply bg-surface border border-line rounded-2xl; }
}
@@ -0,0 +1,19 @@
import { describe, it, expect } from "vitest";
import { keypadReduce, withCommission } from "./amount";
describe("amount keypad", () => {
it("appends digits, ignores leading zero, caps length", () => {
expect(keypadReduce("0", "5")).toBe("5");
expect(keypadReduce("100", "0")).toBe("1000");
expect(keypadReduce("", "0")).toBe("");
expect(keypadReduce("999999", "9")).toBe("999999");
});
it("backspace removes last digit", () => {
expect(keypadReduce("105", "back")).toBe("10");
expect(keypadReduce("", "back")).toBe("");
});
it("withCommission computes total at given rate", () => {
expect(withCommission(1000, 0.052)).toEqual({ commission: 52, total: 1052 });
expect(withCommission(333, 0.052)).toEqual({ commission: 17.32, total: 350.32 });
});
});
+16
View File
@@ -0,0 +1,16 @@
const MAX_DIGITS = 6;
export function keypadReduce(current: string, key: string): string {
if (key === "back") return current.slice(0, -1);
if (!/^\d$/.test(key)) return current;
if (current === "0") return key === "0" ? "0" : key; // replace leading zero
if (current === "" && key === "0") return ""; // no leading zero from empty
if (current.length >= MAX_DIGITS) return current;
return current + key;
}
export function withCommission(base: number, rate: number): { commission: number; total: number } {
const commission = Math.round(base * rate * 100) / 100;
const total = Math.round((base + commission) * 100) / 100;
return { commission, total };
}
@@ -0,0 +1,17 @@
import { describe, it, expect } from "vitest";
import { formatMoney, formatPhone, digitsOnly } from "./format";
describe("format", () => {
it("formatMoney groups thousands and adds ₽", () => {
expect(formatMoney(1000)).toBe("1 000 ₽");
expect(formatMoney(-3200)).toBe("3 200 ₽");
expect(formatMoney(0)).toBe("0 ₽");
});
it("digitsOnly strips non-digits", () => {
expect(digitsOnly("+7 (914) 305-44-00")).toBe("79143054400");
});
it("formatPhone renders +7 mask progressively", () => {
expect(formatPhone("9143054400")).toBe("+7 914 305-44-00");
expect(formatPhone("914305")).toBe("+7 914 305");
});
});
+21
View File
@@ -0,0 +1,21 @@
export function digitsOnly(s: string): string {
return (s || "").replace(/\D/g, "");
}
export function formatMoney(rub: number): string {
const neg = rub < 0;
const abs = Math.abs(Math.round(rub));
const grouped = abs.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return `${neg ? "" : ""}${grouped}`;
}
/** Render a Russian mobile from up-to-10 national digits as +7 914 305-44-00. */
export function formatPhone(national10: string): string {
const d = digitsOnly(national10).slice(0, 10);
const p: string[] = ["+7"];
if (d.length > 0) p.push(" " + d.slice(0, 3));
if (d.length > 3) p.push(" " + d.slice(3, 6));
if (d.length > 6) p.push("-" + d.slice(6, 8));
if (d.length > 8) p.push("-" + d.slice(8, 10));
return p.join("");
}
+22
View File
@@ -0,0 +1,22 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "sonner";
import App from "./App";
import "./index.css";
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: 1, staleTime: 15_000 } },
});
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<App />
<Toaster richColors position="top-center" />
</BrowserRouter>
</QueryClientProvider>
</React.StrictMode>
);
@@ -0,0 +1,47 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
vi.mock("@/api/driver", () => ({
getBalance: vi.fn(async () => ({
accounts: [
{ bucket: "Долг аренда", balance: -3200 },
{ bucket: "Депозит", balance: 5000 },
],
})),
}));
import { BalancePage } from "./BalancePage";
function wrap() {
const qc = new QueryClient();
return render(
<QueryClientProvider client={qc}>
<MemoryRouter><BalancePage /></MemoryRouter>
</QueryClientProvider>
);
}
describe("BalancePage", () => {
it("shows hero total (sum of negatives) and account rows", async () => {
wrap();
expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
expect(screen.getByText("Депозит")).toBeInTheDocument();
// Appears in both the hero total and the single debt account row.
expect(screen.getAllByText("3 200 ₽").length).toBeGreaterThan(0);
expect(screen.getByRole("button", { name: /Пополнить/i })).toBeInTheDocument();
});
it("shows an error state when balance fails to load", async () => {
const driver = await import("@/api/driver");
(driver.getBalance as any).mockRejectedValueOnce(new Error("boom"));
// re-render fresh
const { QueryClient, QueryClientProvider } = await import("@tanstack/react-query");
const { MemoryRouter } = await import("react-router-dom");
const { render, screen } = await import("@testing-library/react");
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
render(<QueryClientProvider client={qc}><MemoryRouter><BalancePage /></MemoryRouter></QueryClientProvider>);
expect(await screen.findByText(/Не удалось загрузить/i)).toBeInTheDocument();
});
});
@@ -0,0 +1,60 @@
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { History, LogOut } from "lucide-react";
import { getBalance } from "@/api/driver";
import { formatMoney } from "@/lib/format";
import { useAuth } from "@/store/auth";
import { AppHeader } from "@/components/AppHeader";
import { Spinner } from "@/components/Spinner";
export function BalancePage() {
const nav = useNavigate();
const clear = useAuth((s) => s.clear);
const { data, isLoading, isError, refetch } = useQuery({ queryKey: ["balance"], queryFn: getBalance });
const accounts = data?.accounts ?? [];
const total = accounts.reduce((s, a) => s + a.balance, 0);
return (
<div>
<AppHeader />
<div className="card p-4 mb-4 text-center">
<p className="text-muted text-xs mb-1">Баланс</p>
<p className={`text-2xl font-extrabold ${total < 0 ? "text-neg" : "text-pos"}`}>{formatMoney(total)}</p>
</div>
{isLoading ? (
<div className="flex justify-center py-10"><Spinner /></div>
) : isError ? (
<div className="text-center py-8">
<p className="text-muted text-sm mb-3">Не удалось загрузить баланс</p>
<button className="btn-ghost" onClick={() => refetch()}>Повторить</button>
</div>
) : (
<div className="mb-4">
{accounts.map((a) => (
<button
key={a.bucket}
onClick={() => nav("/topup", { state: { bucket: a.bucket } })}
className="w-full flex justify-between items-center py-3 border-b border-line last:border-0 text-left"
>
<span className="text-sm">{a.bucket}</span>
<b className={a.balance < 0 ? "text-neg" : "text-pos"}>{formatMoney(a.balance)}</b>
</button>
))}
</div>
)}
<button className="btn-primary" onClick={() => nav("/topup")}>Пополнить</button>
<div className="flex justify-center gap-6 mt-6 text-muted text-xs">
<button className="flex items-center gap-1.5" onClick={() => nav("/history")}>
<History size={15} /> История
</button>
<button className="flex items-center gap-1.5" onClick={() => { clear(); nav("/login"); }}>
<LogOut size={15} /> Выйти
</button>
</div>
</div>
);
}
@@ -0,0 +1,25 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
vi.mock("@/api/driver", () => ({
getPayments: vi.fn(async () => ({ payments: [
{ order_id: "o1", bucket: "Долг аренда", amount: 1000, commission: 52, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: "2026-06-18T09:01:00Z" },
] })),
}));
import { HistoryPage } from "./HistoryPage";
function wrap() {
const qc = new QueryClient();
return render(<QueryClientProvider client={qc}><MemoryRouter><HistoryPage /></MemoryRouter></QueryClientProvider>);
}
describe("HistoryPage", () => {
it("lists payments with amount + status", async () => {
wrap();
expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
expect(screen.getByText("1 000 ₽")).toBeInTheDocument();
expect(screen.getByText(/Оплачено/i)).toBeInTheDocument();
});
});
@@ -0,0 +1,41 @@
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { getPayments } from "@/api/driver";
import { formatMoney } from "@/lib/format";
import { Spinner } from "@/components/Spinner";
const STATUS_RU: Record<string, string> = {
PAID: "Оплачено", NEW: "Ожидает", FORM: "Ожидает", CONFIRMED: "Оплачено", REJECTED: "Отклонён",
};
export function HistoryPage() {
const nav = useNavigate();
const { data, isLoading, isError } = useQuery({ queryKey: ["payments"], queryFn: getPayments });
const rows = data?.payments ?? [];
return (
<div className="pt-2">
<button className="text-muted text-xs mb-3" onClick={() => nav("/")}> Назад</button>
<h1 className="text-lg font-extrabold mb-4">История пополнений</h1>
{isLoading ? (
<div className="flex justify-center py-10"><Spinner /></div>
) : isError ? (
<p className="text-muted text-sm">Не удалось загрузить историю</p>
) : rows.length === 0 ? (
<p className="text-muted text-sm">Пока нет пополнений</p>
) : (
rows.map((p) => (
<div key={p.order_id} className="flex justify-between items-center py-3 border-b border-line">
<div>
<p className="text-sm">{p.bucket}</p>
<p className="text-muted text-xs">
{p.created_at ? new Date(p.created_at).toLocaleDateString("ru-RU") : ""} · {STATUS_RU[p.status] ?? p.status}
</p>
</div>
<b>{formatMoney(p.amount)}</b>
</div>
))
)}
</div>
);
}
@@ -0,0 +1,32 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
vi.mock("@/api/driver", () => ({
authRequest: vi.fn(async () => ({ status: "code_sent", channel: "tg" })),
authVerify: vi.fn(async () => ({ token: "T", driver_id: 7 })),
tgSession: vi.fn(async () => ({ pair_session: "sess123", deep_link: null })),
}));
import { LoginPage } from "./LoginPage";
import * as driver from "@/api/driver";
import { useAuth } from "@/store/auth";
const wrap = () => render(<MemoryRouter><LoginPage /></MemoryRouter>);
describe("LoginPage", () => {
beforeEach(() => useAuth.getState().clear());
it("requests code then verifies and stores session", async () => {
wrap();
expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
await userEvent.click(screen.getByRole("button", { name: /Войти по коду/i }));
await userEvent.type(screen.getByPlaceholderText(/телефон/i), "9143054400");
await userEvent.click(screen.getByRole("button", { name: /Получить код/i }));
expect(driver.authRequest).toHaveBeenCalledWith("79143054400");
const codeInput = await screen.findByPlaceholderText(/код/i);
await userEvent.type(codeInput, "123456");
await userEvent.click(screen.getByRole("button", { name: /Войти/i }));
expect(driver.authVerify).toHaveBeenCalledWith("79143054400", "123456");
});
});
+136
View File
@@ -0,0 +1,136 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import { authRequest, authVerify, tgSession } from "@/api/driver";
import { digitsOnly, formatPhone } from "@/lib/format";
import { useAuth } from "@/store/auth";
import { Spinner } from "@/components/Spinner";
export function LoginPage() {
const nav = useNavigate();
const setSession = useAuth((s) => s.setSession);
const [phone, setPhone] = useState(""); // national 10 digits
const [code, setCode] = useState("");
const [step, setStep] = useState<"phone" | "code">("phone");
const [channel, setChannel] = useState<string>("");
const [busy, setBusy] = useState(false);
const [mode, setMode] = useState<"choose" | "code">("choose");
// Prefetched pairing session so the «Войти через Telegram» control is a real
// <a href> the OS opens in Telegram (a synchronous user gesture) WITHOUT
// navigating the PWA away — the app stays mounted on /tg-wait and polls.
const [tg, setTg] = useState<{ pair_session: string; deep_link: string | null } | null>(null);
const e164 = "7" + phone;
useEffect(() => {
let alive = true;
tgSession().then((r) => { if (alive) setTg(r); }).catch(() => {});
return () => { alive = false; };
}, []);
function startTg() {
if (!tg) return;
sessionStorage.setItem("pp-pair-session", tg.pair_session);
if (tg.deep_link) sessionStorage.setItem("pp-pair-deeplink", tg.deep_link);
nav("/tg-wait");
}
async function requestCode() {
if (phone.length < 10) return;
setBusy(true);
try {
const r = await authRequest(e164);
if (r.status === "onboarding") {
sessionStorage.setItem("pp-onboarding", JSON.stringify({ ...r.deep_links, phone }));
nav("/onboarding");
return;
}
setChannel(r.channel);
setStep("code");
} catch (err: unknown) {
const status = (err as { response?: { status?: number } })?.response?.status;
const msg =
status === 404 ? "Номер не найден. Обратитесь в парк." :
status === 429 ? "Слишком часто. Попробуйте позже." :
"Не удалось отправить код";
toast.error(msg);
} finally {
setBusy(false);
}
}
async function verify() {
if (code.length < 4) return;
setBusy(true);
try {
const r = await authVerify(e164, code);
setSession(r.token, r.driver_id);
nav("/");
} catch {
toast.error("Неверный или просроченный код");
} finally {
setBusy(false);
}
}
return (
<div className="pt-16">
<h1 className="text-xl font-extrabold mb-1">Премиум Водитель</h1>
<p className="text-muted text-sm mb-8">Вход в приложение</p>
{mode === "choose" ? (
<>
{tg?.deep_link ? (
<a
href={tg.deep_link}
target="_blank"
rel="noopener noreferrer"
className="btn-primary block text-center"
onClick={startTg}
>
Войти через Telegram
</a>
) : (
<button className="btn-primary" disabled>
<Spinner />
</button>
)}
<p className="text-muted text-xs mt-3">Telegram подтвердит ваш номер автоматически.</p>
<button className="btn-ghost mt-4" onClick={() => setMode("code")}>Войти по коду</button>
</>
) : (
<>
{step === "phone" ? (
<>
<input
inputMode="numeric"
placeholder="Номер телефона"
value={phone ? formatPhone(phone) : ""}
onChange={(e) => setPhone(digitsOnly(e.target.value).replace(/^7/, "").slice(0, 10))}
className="card w-full px-4 py-3 mb-3 text-base bg-white"
/>
<button className="btn-primary" disabled={busy || phone.length < 10} onClick={requestCode}>
{busy ? <Spinner /> : "Получить код"}
</button>
<p className="text-muted text-xs mt-3">Код придёт в Telegram или MAX.</p>
</>
) : (
<>
<p className="text-sm mb-2">Код отправлен в {channel === "max" ? "MAX" : "Telegram"}.</p>
<input
inputMode="numeric"
placeholder="Код из сообщения"
value={code}
onChange={(e) => setCode(digitsOnly(e.target.value).slice(0, 6))}
className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-white"
/>
<button className="btn-primary" disabled={busy || code.length < 4} onClick={verify}>
{busy ? <Spinner /> : "Войти"}
</button>
<button className="btn-ghost mt-2" onClick={() => setStep("phone")}>Изменить номер</button>
</>
)}
</>
)}
</div>
);
}
@@ -0,0 +1,23 @@
import { describe, it, expect, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { OnboardingPage } from "./OnboardingPage";
describe("OnboardingPage", () => {
beforeEach(() =>
sessionStorage.setItem("pp-onboarding", JSON.stringify({ tg: "https://t.me/b?start=x", max: "https://max.ru/b?start=x", phone: "9143054400" }))
);
it("shows both bot links + back-to-code action", () => {
render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
expect(screen.getByText(/Подключите бот/i)).toBeInTheDocument();
expect(screen.getByRole("link", { name: /Telegram/i })).toHaveAttribute("href", "https://t.me/b?start=x");
expect(screen.getByRole("link", { name: /MAX/i })).toHaveAttribute("href", "https://max.ru/b?start=x");
expect(screen.getByRole("button", { name: /запросить код/i })).toBeInTheDocument();
});
it("renders only Telegram when max is absent", () => {
sessionStorage.setItem("pp-onboarding", JSON.stringify({ tg: "https://t.me/ppdriver_bot?start=x", phone: "9143054400" }));
render(<MemoryRouter><OnboardingPage /></MemoryRouter>);
expect(screen.getByRole("link", { name: /Telegram/i })).toBeInTheDocument();
expect(screen.queryByRole("link", { name: /MAX/i })).toBeNull();
});
});
@@ -0,0 +1,30 @@
import { useNavigate } from "react-router-dom";
export function OnboardingPage() {
const nav = useNavigate();
const raw = sessionStorage.getItem("pp-onboarding");
const data = raw ? (JSON.parse(raw) as { tg?: string; max?: string; phone: string }) : null;
if (!data) return null;
return (
<div className="pt-16">
<h1 className="text-xl font-extrabold mb-1">Подключите бот</h1>
<p className="text-muted text-sm mb-8">
Чтобы получать код входа, откройте бот и нажмите «Старт». Затем вернитесь и запросите код снова.
</p>
{data.tg && (
<a href={data.tg} target="_blank" rel="noopener" className="btn-primary mb-3 no-underline block">
Подключить Telegram
</a>
)}
{data.max && (
<a href={data.max} target="_blank" rel="noopener" className="btn-ghost mb-6 no-underline block">
Подключить MAX
</a>
)}
<button className="btn-ghost" onClick={() => nav("/login")}>
Я подключил запросить код
</button>
</div>
);
}
@@ -0,0 +1,29 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { MemoryRouter, Routes, Route } from "react-router-dom";
const states = ["FORM", "PAID"];
vi.mock("@/api/driver", () => ({
getPaymentState: vi.fn(async () => ({ order_id: "o9", status: states.shift() ?? "PAID" })),
}));
import { PaymentPage } from "./PaymentPage";
function wrap() {
const qc = new QueryClient();
return render(
<QueryClientProvider client={qc}>
<MemoryRouter initialEntries={[{ pathname: "/pay/o9", state: { payUrl: "https://qr.nspk.ru/x", total: 1052, bucket: "Долг аренда", base: 1000 } }]}>
<Routes><Route path="/pay/:orderId" element={<PaymentPage />} /></Routes>
</MemoryRouter>
</QueryClientProvider>
);
}
describe("PaymentPage", () => {
it("shows pay button and flips to success on PAID", async () => {
wrap();
expect(screen.getByRole("link", { name: /Оплатить/i })).toHaveAttribute("href", "https://qr.nspk.ru/x");
await waitFor(() => expect(screen.getByText(/Оплачено/i)).toBeInTheDocument(), { timeout: 3000 });
});
});
@@ -0,0 +1,120 @@
import { useEffect } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useQueryClient } from "@tanstack/react-query";
import { Check, Clock, Undo2, WifiOff, X } from "lucide-react";
import { formatMoney } from "@/lib/format";
import { Spinner } from "@/components/Spinner";
import { usePaymentStatus } from "@/hooks/usePaymentStatus";
// платёж не состоялся, деньги не ушли — помогает только новая попытка.
// ATTEMPTS_EXPIRED — исчерпаны попытки ввода на форме банка, тот же исход для водителя
const FAILED = new Set(["REJECTED", "AUTH_FAIL", "ERROR", "CANCELED", "ATTEMPTS_EXPIRED"]);
// деньги дошли и вернулись обратно — новая попытка тут ни при чём, человеку нужен другой текст
const RETURNED = new Set(["REVERSED", "REFUNDED", "PARTIAL_REVERSED", "PARTIAL_REFUNDED"]);
// сколько неудач подряд терпим, прежде чем сказать вслух, что связи нет: ~15 секунд опроса.
// одиночный сбой пережидаем молча — следующий опрос обычно всё чинит
const FAIL_LIMIT = 10;
export function PaymentPage() {
const { orderId = "" } = useParams();
const nav = useNavigate();
const qc = useQueryClient();
const st = (useLocation().state as
{ payUrl?: string; total?: number; bucket?: string; base?: number; method?: string } | null) ?? {};
const { data, lastFailed, failStreak, refetch } = usePaymentStatus(orderId);
const status = data?.status ?? "";
const paid = status === "PAID";
// пока метод не передан в state — узнаём по ссылке: СБП отдаёт платёжку qr.nspk.ru, карта — форму банка
const card = st.method ? st.method === "card" : !!st.payUrl && !st.payUrl.includes("qr.nspk.ru");
useEffect(() => {
if (paid) qc.invalidateQueries({ queryKey: ["balance"] });
}, [paid, qc]);
const retry = (
<button className="btn-primary mt-8" onClick={() => nav("/topup", { state: { bucket: st.bucket }, replace: true })}>
Пополнить ещё раз
</button>
);
if (paid) {
return (
<div className="pt-24 flex flex-col items-center text-center">
<span className="w-14 h-14 rounded-full bg-pos text-white flex items-center justify-center mb-3"><Check size={28} /></span>
<p className="text-lg font-extrabold">Оплачено</p>
<p className="text-muted text-xs mt-1">
{st.base != null ? `${st.bucket ?? "Баланс"} пополнен на ${formatMoney(st.base)}` : "Баланс пополнен"}
</p>
<button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
</div>
);
}
// без этих веток человек оставался на «Ожидаем оплату…» навсегда: опрос уже остановлен
if (status === "DEADLINE_EXPIRED") {
return (
<div className="pt-24 flex flex-col items-center text-center">
<span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><Clock size={28} /></span>
<p className="text-lg font-extrabold">Срок оплаты истёк</p>
<p className="text-muted text-xs mt-1">Счёт больше не действует. Деньги не списаны создайте новый.</p>
{retry}
</div>
);
}
if (FAILED.has(status)) {
return (
<div className="pt-24 flex flex-col items-center text-center">
<span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><X size={28} /></span>
<p className="text-lg font-extrabold">Оплата не прошла</p>
<p className="text-muted text-xs mt-1">Банк не провёл перевод. Деньги не списаны попробуйте ещё раз.</p>
{retry}
</div>
);
}
if (RETURNED.has(status)) {
return (
<div className="pt-24 flex flex-col items-center text-center">
<span className="w-14 h-14 rounded-full bg-neg text-white flex items-center justify-center mb-3"><Undo2 size={28} /></span>
<p className="text-lg font-extrabold">Платёж возвращён</p>
<p className="text-muted text-xs mt-1">Деньги вернулись на счёт, с которого платили. Баланс пересчитаем.</p>
<button className="btn-primary mt-8" onClick={() => nav("/")}>На главную</button>
</div>
);
}
// раньше упавший бэкенд выглядел ровно как честное ожидание оплаты — крутился спиннер.
// сам опрос не прекращаем: как только бэкенд ответит, экран вернётся к оплате
if (lastFailed && failStreak >= FAIL_LIMIT) {
return (
<div className="pt-24 flex flex-col items-center text-center">
<span className="w-14 h-14 rounded-full bg-muted text-white flex items-center justify-center mb-3"><WifiOff size={28} /></span>
<p className="text-lg font-extrabold">Не удаётся проверить оплату</p>
<p className="text-muted text-xs mt-1">Похоже, пропала связь. Если вы уже оплатили, деньги дойдут.</p>
<button className="btn-primary mt-8" onClick={() => refetch()}>Проверить ещё раз</button>
<button className="btn-ghost mt-3" onClick={() => nav("/")}>На главную</button>
</div>
);
}
return (
<div className="pt-10 flex flex-col items-center text-center">
<span className="px-4 py-2.5 rounded-xl2 bg-ink text-cream text-sm font-extrabold mb-4">{card ? "Картой" : "СБП"}</span>
<div className="mb-6">
{/* после перезагрузки суммы в state нет: лучше не показать ничего, чем показать 0 ₽ */}
{st.total != null && <p className="text-lg font-extrabold">{formatMoney(st.total)}</p>}
{st.bucket && <p className="text-muted text-xs">{st.bucket}</p>}
</div>
{st.payUrl ? (
<>
<a className="btn-primary no-underline" href={st.payUrl} target="_blank" rel="noopener">Оплатить</a>
<p className="text-muted text-xs mt-2">Откроется ваше приложение банка</p>
</>
) : (
<p className="text-muted text-xs">Завершите оплату в приложении банка экран обновится сам</p>
)}
<div className="flex items-center gap-2 mt-6 text-muted text-xs"><Spinner /> Ожидаем оплату</div>
</div>
);
}
@@ -0,0 +1,43 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { usePairPoll } from "@/hooks/usePairPoll";
import { Spinner } from "@/components/Spinner";
export function TgWaitPage() {
const nav = useNavigate();
const pairSession = sessionStorage.getItem("pp-pair-session");
const deepLink = sessionStorage.getItem("pp-pair-deeplink");
const { status } = usePairPoll(pairSession);
useEffect(() => {
if (!pairSession) { nav("/login", { replace: true }); }
}, [pairSession, nav]);
useEffect(() => {
if (status === "authenticated") {
sessionStorage.removeItem("pp-pair-session");
sessionStorage.removeItem("pp-pair-deeplink");
nav("/", { replace: true });
}
if (status === "expired") {
sessionStorage.removeItem("pp-pair-session");
sessionStorage.removeItem("pp-pair-deeplink");
nav("/login", { replace: true, state: { expired: true } });
}
}, [status, nav]);
return (
<div className="pt-16 text-center">
<h1 className="text-xl font-extrabold mb-2">Премиум Водитель</h1>
<p className="text-muted text-sm mb-6">
В Telegram нажмите «Поделиться номером для входа», затем вернитесь сюда вход произойдёт автоматически.
</p>
{deepLink && (
<a href={deepLink} target="_blank" rel="noopener noreferrer" className="btn-primary block text-center mb-6">
Открыть Telegram
</a>
)}
<Spinner />
</div>
);
}
@@ -0,0 +1,35 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
vi.mock("@/api/driver", () => ({
topup: vi.fn(async () => ({ order_id: "o9", pay_url: "https://qr.nspk.ru/x", commission: 52, total: 1052 })),
getCommission: vi.fn(async () => ({ rate: 0.052 })),
}));
import { TopupPage } from "./TopupPage";
import * as driver from "@/api/driver";
const wrap = () => {
const qc = new QueryClient();
return render(
<QueryClientProvider client={qc}>
<MemoryRouter><TopupPage /></MemoryRouter>
</QueryClientProvider>
);
};
describe("TopupPage", () => {
it("keypad builds amount, shows total, and submits topup", async () => {
wrap();
await userEvent.click(screen.getByRole("button", { name: "1" }));
await userEvent.click(screen.getByRole("button", { name: "0" }));
await userEvent.click(screen.getByRole("button", { name: "0" }));
await userEvent.click(screen.getByRole("button", { name: "0" }));
expect(screen.getByTestId("amount").textContent).toBe("1 000 ₽");
expect(screen.getByTestId("total").textContent).toContain("1 052");
await userEvent.click(screen.getByRole("button", { name: /Оплатить/i }));
expect(driver.topup).toHaveBeenCalledWith("Долг аренда", 1000, "qr");
});
});
@@ -0,0 +1,84 @@
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { Delete } from "lucide-react";
import { toast } from "sonner";
import { topup, getCommission } from "@/api/driver";
import { keypadReduce, withCommission } from "@/lib/amount";
import { formatMoney } from "@/lib/format";
import { Segment } from "@/components/Segment";
import { Spinner } from "@/components/Spinner";
const QUICK = ["500", "1000", "2000"];
const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "·", "0", "back"];
export function TopupPage() {
const nav = useNavigate();
const loc = useLocation();
const bucket = (loc.state as { bucket?: string } | null)?.bucket ?? "Долг аренда";
const [raw, setRaw] = useState("");
const [method, setMethod] = useState("qr");
const [busy, setBusy] = useState(false);
const { data: commission } = useQuery({ queryKey: ["commission"], queryFn: getCommission });
const rate = commission?.rate ?? 0.052; // fallback only while loading
const base = raw ? parseInt(raw, 10) : 0;
const { commission: fee, total } = withCommission(base, rate);
function press(k: string) {
if (k === "·") return;
setRaw((r) => keypadReduce(r, k));
}
async function pay() {
if (base <= 0) return;
setBusy(true);
try {
const r = await topup(bucket, base, method as "qr" | "card");
nav(`/pay/${r.order_id}`, { state: { payUrl: r.pay_url, total: r.total, bucket, base } });
} catch {
toast.error("Не удалось создать платёж");
} finally {
setBusy(false);
}
}
return (
<div className="pt-2">
<button className="text-muted text-xs mb-3" onClick={() => nav(-1)}> {bucket}</button>
<p data-testid="amount" className="text-3xl font-extrabold text-center mt-2">{formatMoney(base)}</p>
<p data-testid="total" className="text-muted text-xs text-center mb-3">
к оплате {formatMoney(total)} (комиссия {formatMoney(fee)})
</p>
<div className="flex gap-1.5 mb-3">
{QUICK.map((q) => (
<button key={q} className="flex-1 py-2 rounded-xl2 text-xs bg-surface border border-line" onClick={() => setRaw(q)}>
{q}
</button>
))}
</div>
<div className="grid grid-cols-3 gap-2 mb-4">
{KEYS.map((k) => (
<button
key={k}
aria-label={k}
className="bg-surface border border-line rounded-xl2 py-3 text-lg font-semibold flex items-center justify-center"
onClick={() => press(k)}
>
{k === "back" ? <Delete size={18} /> : k}
</button>
))}
</div>
<div className="mb-4">
<Segment value={method} onChange={setMethod} options={[{ value: "qr", label: "СБП" }, { value: "card", label: "Картой" }]} />
</div>
<button className="btn-primary" disabled={busy || base <= 0} onClick={pay}>
{busy ? <Spinner /> : "Оплатить"}
</button>
</div>
);
}
+21
View File
@@ -0,0 +1,21 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
interface AuthState {
token: string | null;
driverId: number | null;
setSession: (token: string, driverId: number) => void;
clear: () => void;
}
export const useAuth = create<AuthState>()(
persist(
(set) => ({
token: null,
driverId: null,
setSession: (token, driverId) => set({ token, driverId }),
clear: () => set({ token: null, driverId: null }),
}),
{ name: "pp-driver-auth" }
)
);
+1
View File
@@ -0,0 +1 @@
import "@testing-library/jest-dom/vitest";
+9
View File
@@ -0,0 +1,9 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_BASE?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
+15
View File
@@ -0,0 +1,15 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
cream: "#F3EEE3", surface: "#FBF8F1", line: "#E4DCCB",
ink: "#1C1B19", muted: "#7C7361", neg: "#C0493A", pos: "#3B6E4A",
},
fontFamily: { sans: ["Inter", "system-ui", "sans-serif"] },
borderRadius: { xl2: "14px" },
},
},
plugins: [],
};
+11
View File
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"target": "ES2021", "useDefineForClassFields": true, "lib": ["ES2021", "DOM", "DOM.Iterable"],
"module": "ESNext", "skipLibCheck": true, "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true,
"noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noFallthroughCasesInSwitch": true,
"baseUrl": ".", "paths": { "@/*": ["src/*"] }, "types": ["vitest/globals", "@testing-library/jest-dom"]
},
"include": ["src"]
}
+4
View File
@@ -0,0 +1,4 @@
{
"files": [],
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}
+8
View File
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true,
"moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true,
"noEmit": true, "strict": true
},
"include": ["vite.config.ts", "vitest.config.ts"]
}
+13
View File
@@ -0,0 +1,13 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";
import path from "path";
export default defineConfig({
plugins: [
react(),
VitePWA({ registerType: "autoUpdate", manifest: false, includeAssets: ["icons/*.png"] }),
],
resolve: { alias: { "@": path.resolve(__dirname, "src") } },
server: { port: 5174 },
});
+9
View File
@@ -0,0 +1,9 @@
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
plugins: [react()],
resolve: { alias: { "@": path.resolve(__dirname, "src") } },
test: { globals: true, environment: "jsdom", setupFiles: ["./src/test/setup.ts"] },
});
-50
View File
@@ -1,7 +1,5 @@
import { Routes, Route, Navigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "@/store/auth";
import { getMe } from "@/api/me";
import { useMeSync } from "@/hooks/useMeSync";
import Login from "@/pages/Login";
import ActionMenu from "@/pages/ActionMenu";
@@ -15,14 +13,6 @@ import RepairDetailPage from "@/pages/repairs/RepairDetailPage";
import EditRepairPage from "@/pages/repairs/EditRepairPage";
import CarSelectPage from "@/pages/repairs/CarSelectPage";
import CreateRepairPage from "@/pages/repairs/CreateRepairPage";
import ReceivingPage from "@/pages/warehouse/ReceivingPage";
import ReceivingDraftPage from "@/pages/warehouse/ReceivingDraftPage";
import ReceiptDetailPage from "@/pages/warehouse/ReceiptDetailPage";
import StocktakePage from "@/pages/warehouse/StocktakePage";
import TyresPage from "@/pages/warehouse/TyresPage";
import TyreSizesPage from "@/pages/warehouse/TyreSizesPage";
import TyreJournalPage from "@/pages/warehouse/TyreJournalPage";
import StocktakeSessionPage from "@/pages/warehouse/StocktakeSessionPage";
function RequireAuth({ children }: { children: React.ReactNode }) {
const token = useAuth((s) => s.token);
@@ -30,36 +20,6 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
return <>{children}</>;
}
/**
* Складские разделы пока только админам. Сервер и так отдаёт 403, но без
* клиентской проверки прямой ссылкой можно было бы открыть пустой экран с
* ошибкой — это читается как поломка, а не как «вам сюда нельзя».
*/
function RequireAdmin({ children }: { children: React.ReactNode }) {
const token = useAuth((s) => s.token);
const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
if (!token) return <Navigate to="/login" replace />;
if (meQuery.isLoading) return null;
if (!meQuery.data?.is_admin) return <Navigate to="/" replace />;
return <>{children}</>;
}
/**
* Выдача резины — по складскому праву (warehouse:tyres в /me), не только
* админам. Приёмка и инвентаризация остаются под RequireAdmin.
*/
function RequireTyres({ children }: { children: React.ReactNode }) {
const token = useAuth((s) => s.token);
const meQuery = useQuery({ queryKey: ["me"], queryFn: getMe, staleTime: 60_000, enabled: !!token });
if (!token) return <Navigate to="/login" replace />;
if (meQuery.isLoading) return null;
const me = meQuery.data;
if (!me?.is_admin && !me?.permissions?.includes("warehouse:tyres")) {
return <Navigate to="/" replace />;
}
return <>{children}</>;
}
export default function App() {
// У35: фоновая сверка прав механика раз в 5 минут — выкидывает на /login
// с сообщением «Доступ отозван», если админ снял can_login_pwa или вывел
@@ -82,16 +42,6 @@ export default function App() {
<Route path="/repairs/new-external" element={<RequireAuth><CreateRepairPage /></RequireAuth>} />
<Route path="/repairs/:id" element={<RequireAuth><RepairDetailPage /></RequireAuth>} />
<Route path="/repairs/:id/edit" element={<RequireAuth><EditRepairPage /></RequireAuth>} />
{/* Склад — приёмка и инвентаризация с телефона (пока только админы). */}
<Route path="/wh/receiving" element={<RequireAdmin><ReceivingPage /></RequireAdmin>} />
<Route path="/wh/receiving/:id" element={<RequireAdmin><ReceivingDraftPage /></RequireAdmin>} />
<Route path="/wh/receipts/:id" element={<RequireAdmin><ReceiptDetailPage /></RequireAdmin>} />
<Route path="/wh/stocktake" element={<RequireAdmin><StocktakePage /></RequireAdmin>} />
<Route path="/wh/stocktake/:id" element={<RequireAdmin><StocktakeSessionPage /></RequireAdmin>} />
{/* Сезонная выдача резины — по складскому праву (не только админам). */}
<Route path="/wh/tyres" element={<RequireTyres><TyresPage /></RequireTyres>} />
<Route path="/wh/tyres/sizes" element={<RequireTyres><TyreSizesPage /></RequireTyres>} />
<Route path="/wh/tyres/journal" element={<RequireTyres><TyreJournalPage /></RequireTyres>} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
);
+2 -38
View File
@@ -29,18 +29,6 @@ export interface PartSuggestion {
name: string;
}
/** Позиция складского каталога для подбора детали в ремонт. */
export interface PartCatalogItem {
id: number;
name: string;
article: string | null;
brand: string | null;
unit: string;
in_stock: number; // суммарный остаток (может быть < 0)
price_hint: number | string | null;
fits: boolean; // подходит этой машине
}
export interface PresignResponse {
photo_uuid: string;
extension: string;
@@ -65,16 +53,14 @@ export interface CreateWorkPayload {
}
export interface CreatePartPayload {
part_id: number;
name: string;
qty: number;
name?: string; // снимок имени (сервер возьмёт из каталога, если пусто)
}
export interface CreateOilChangePayload {
enabled: boolean;
mileage_at_change: number | null;
next_in_km: number;
oil_type: string; // engine | cvt | akpp
sticker_photo_uuid: string | null;
sticker_extension: string | null;
}
@@ -91,10 +77,7 @@ export interface CreateRepairPayload {
works: CreateWorkPayload[];
parts: CreatePartPayload[];
photos: CreatePhotoPayload[];
// 1:N — за один заезд бывает несколько замен (двигатель + коробка).
// Пришло на смену одиночному oil_change; бэкенд принимает оба, но новый
// клиент шлёт только список.
oil_changes: CreateOilChangePayload[];
oil_change: CreateOilChangePayload | null;
// Работавшие механики (делёж 1/N). Если не передан — backend сидит
// одного создателя. Порядок = sort_order.
mechanic_ids?: number[];
@@ -139,25 +122,6 @@ export async function suggestParts(q: string): Promise<PartSuggestion[]> {
.json<PartSuggestion[]>();
}
/**
* Поиск детали в складском каталоге для конкретной машины.
* По умолчанию — только подходящие этой машине + без привязки к марке;
* showAll=true снимает фильтр применимости.
*/
export async function searchParts(
q: string,
carId: number | null,
showAll = false,
): Promise<PartCatalogItem[]> {
const params = new URLSearchParams();
// Без машины (ремонт «с улицы») применимость считать не по чему —
// бэкенд отдаст каталог целиком.
if (carId) params.set("car_id", String(carId));
if (q.trim()) params.set("q", q.trim());
if (showAll) params.set("all", "true");
return api.get(`parts/search?${params.toString()}`).json<PartCatalogItem[]>();
}
export async function presignPhoto(extension: string, photo_uuid?: string): Promise<PresignResponse> {
return api
.post("repairs/photos/presign", {
+2 -23
View File
@@ -12,9 +12,6 @@ export interface FeedItem {
car_model: string | null;
driver_name: string | null;
mechanic_name: string;
// Пробег на момент ремонта. Бэкенд отдавал его и раньше, но лента поле не
// забирала — чтобы посмотреть, приходилось проваливаться в каждый ремонт.
mileage: number | null;
is_external: boolean;
works_preview: FeedWorkBrief[];
works_extra: number;
@@ -30,17 +27,12 @@ export interface FeedResponse {
export interface FeedParams {
limit?: number;
cursor?: string | null;
// Поисковая подстрока: госномер, марка или модель.
q?: string | null;
}
export async function getRepairsFeed(params: FeedParams = {}): Promise<FeedResponse> {
const search = new URLSearchParams();
if (params.limit) search.set("limit", String(params.limit));
if (params.cursor) search.set("cursor", params.cursor);
// Пустой/пробельный запрос не шлём — это обычная лента, а не поиск.
const q = params.q?.trim();
if (q) search.set("q", q);
const qs = search.toString();
return api
.get(`repairs${qs ? `?${qs}` : ""}`)
@@ -71,10 +63,6 @@ export interface RepairDetailPart {
id: number;
name: string;
qty: number;
// Складская позиция. null у исторических строк, заведённых свободным
// текстом до перевода запчастей на каталог — их склад не трогает.
part_id: number | null;
article: string | null;
}
export interface RepairDetailPhoto {
@@ -86,7 +74,6 @@ export interface RepairDetailPhoto {
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;
@@ -101,8 +88,6 @@ export interface RepairDetailMechanic {
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;
@@ -112,8 +97,7 @@ export interface RepairDetailResponse {
works: RepairDetailWork[];
parts: RepairDetailPart[];
photos: RepairDetailPhoto[];
oil_change: RepairDetailOil | null; // legacy: первая запись
oil_changes: RepairDetailOil[]; // 1:N — двигатель + коробка за заезд
oil_change: RepairDetailOil | null;
total_sum: number;
// Работавшие механики (делёж 1/N total_sum). Может отсутствовать на
// старых ответах backend — фронт делает fallback на одного создателя.
@@ -137,9 +121,6 @@ export interface PatchWork {
}
export interface PatchPart {
// Складская позиция. Без part_id строка остаётся свободным текстом и склад
// не трогает (так сохраняются исторические строки).
part_id?: number | null;
name: string;
qty: number;
}
@@ -148,15 +129,13 @@ 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[];
oil_change: PatchOilChange | null;
// Работавшие механики. Опционально — если не передан, набор не меняется.
mechanic_ids?: number[];
}
-502
View File
@@ -1,502 +0,0 @@
/**
* Склад в PWA — приёмка и инвентаризация (эндпоинты /v1/mechanic/wh/*).
*
* Разделы админские: сервер отдаёт 403 всем остальным, поэтому клиент
* дополнительно прячет плитки по me.is_admin — чтобы механик не упирался в
* ошибку там, куда ему не надо.
*/
import { HTTPError } from "ky";
import { api } from "./client";
/**
* Текст отказа, который сервер написал для человека.
*
* ky кладёт в Error.message служебное «Request failed with status code 409», а
* понятную причину бэкенд пишет в detail («Удалить находку нельзя: деталь
* выдали после пересчёта»). Механику у стеллажа нужна именно она: по номеру
* статуса он не поймёт, что делать дальше, и повторит то же действие.
*
* Запасной текст обязателен: тело читается один раз (при повторном вызове поток
* уже пуст), у прокси-ошибок его может не быть вовсе, а валидационный 422 от
* pydantic кладёт в detail список объектов — человеку он ничего не говорит.
* Не-HTTP ошибка (связь отвалилась, таймаут) тоже уходит в запасной: у ky там
* английское «Failed to fetch».
*/
export async function apiErrorText(e: unknown, fallback: string): Promise<string> {
if (!(e instanceof HTTPError)) return fallback;
try {
const { detail } = (await e.response.json()) as { detail?: unknown };
if (typeof detail === "string" && detail.trim()) return detail.trim();
} catch {
// тело не JSON или уже прочитано — остаётся запасной текст
}
return fallback;
}
// ── Справочники ────────────────────────────────────────────────────────────
export interface WhRef {
id: number;
code: string;
name: string;
}
export async function getPlaces(): Promise<WhRef[]> {
return api.get("wh/places").json<WhRef[]>();
}
export async function getSuppliers(): Promise<WhRef[]> {
return api.get("wh/suppliers").json<WhRef[]>();
}
// ── Приёмка ────────────────────────────────────────────────────────────────
export interface DraftLine {
id: number;
brand: string | null;
article: string | null;
name: string;
qty: number;
unit_price: number | string;
matched_part_id: number | null;
matched_part_name: string | null;
thumb_url: string | null;
}
export interface Draft {
id: number;
source: string;
ext_order_id: string;
supplier_id: number | null;
supplier_name: string | null;
legal_entity: string | null;
order_date: string | null;
total_price: number | string | null;
status: string;
receipt_id: number | null;
created_at: string;
photo_urls: string[];
lines: DraftLine[];
}
export interface DraftListResponse {
items: Draft[];
total: number;
}
/** Фото накладной/чека → распознавание → черновик (приход НЕ создаётся). */
export async function scanInvoice(files: Blob[]): Promise<Draft> {
const fd = new FormData();
files.forEach((f, i) => fd.append("files", f, `page${i + 1}.jpg`));
// Распознавание идёт на vision-модели и занимает десятки секунд —
// клиентский таймаут по умолчанию (30 с) её не дожидается.
return api.post("wh/receiving/scan", { body: fd, timeout: 240_000 }).json<Draft>();
}
export async function getDrafts(status = "pending"): Promise<DraftListResponse> {
return api.get(`wh/receiving/drafts?status=${status}`).json<DraftListResponse>();
}
export async function getDraft(id: number): Promise<Draft> {
return api.get(`wh/receiving/drafts/${id}`).json<Draft>();
}
export interface DraftPatch {
supplier_id?: number | null;
order_date?: string | null;
doc_number?: string | null;
comment?: string | null;
}
export async function patchDraft(id: number, body: DraftPatch): Promise<Draft> {
return api.patch(`wh/receiving/drafts/${id}`, { json: body }).json<Draft>();
}
export async function createDraftSupplier(
id: number,
body: { name: string; legal_entity?: string | null },
): Promise<Draft> {
return api.post(`wh/receiving/drafts/${id}/supplier`, { json: body }).json<Draft>();
}
export interface DraftLinePatch {
article?: string | null;
name?: string | null;
qty?: number;
unit_price?: number;
matched_part_id?: number | null;
}
export async function addDraftLine(id: number, body: DraftLinePatch): Promise<Draft> {
return api.post(`wh/receiving/drafts/${id}/lines`, { json: body }).json<Draft>();
}
export async function patchDraftLine(
id: number,
lineId: number,
body: DraftLinePatch,
): Promise<Draft> {
return api.patch(`wh/receiving/drafts/${id}/lines/${lineId}`, { json: body }).json<Draft>();
}
export async function deleteDraftLine(id: number, lineId: number): Promise<Draft> {
return api.delete(`wh/receiving/drafts/${id}/lines/${lineId}`).json<Draft>();
}
export interface PostDraftResult {
ok: boolean;
receipt_id: number;
lines: number;
}
export async function postDraft(
id: number,
body: { place_id: number | null; doc_date?: string | null; exclude_line_ids?: number[] },
): Promise<PostDraftResult> {
return api.post(`wh/receiving/drafts/${id}/post`, { json: body }).json<PostDraftResult>();
}
export async function rejectDraft(id: number): Promise<{ ok: boolean }> {
return api.post(`wh/receiving/drafts/${id}/reject`).json<{ ok: boolean }>();
}
export interface ReceiptPreviewLine {
part_id: number;
name: string;
article: string | null;
qty: number;
thumb_url: string | null;
}
export interface Receipt {
id: number;
supplier_name: string | null;
doc_number: string | null;
doc_date: string;
total_amount: number | string;
lines_count: number;
posted_by_name: string | null;
preview_lines: ReceiptPreviewLine[];
}
export interface ReceiptListResponse {
items: Receipt[];
total: number;
total_sum: number | string;
month_total: number | string;
month_label: string;
}
export async function getReceipts(limit = 30): Promise<ReceiptListResponse> {
return api.get(`wh/receipts?limit=${limit}`).json<ReceiptListResponse>();
}
export interface ReceiptLine {
batch_id: number;
part_id: number;
/** Снимок имени на момент прихода — накладная исторический документ. */
part_name: string;
article: string | null;
qty: number;
/** Сколько от этой партии ещё лежит на складе (может быть < 0). */
qty_remaining: number;
unit_price: number | string;
amount: number | string;
place_code: string | null;
thumb_url: string | null;
}
export interface ReceiptDetail extends Receipt {
supplier_id: number;
comment: string | null;
created_at: string | null;
lines: ReceiptLine[];
}
export async function getReceipt(id: number): Promise<ReceiptDetail> {
return api.get(`wh/receipts/${id}`).json<ReceiptDetail>();
}
// ── Инвентаризация ─────────────────────────────────────────────────────────
export interface Stocktake {
id: number;
/** Статусов ровно два — сужаем до union, чтобы «проведена» проверялась типом. */
status: "draft" | "done";
place_id: number | null;
place_code: string | null;
author_name: string | null;
started_at: string;
finished_at: string | null;
comment: string | null;
lines_total: number;
lines_counted: number;
shortage_qty: number;
shortage_amount: number | string;
surplus_qty: number;
surplus_amount: number | string;
}
export interface StocktakeLine {
id: number;
/**
* null = находка, но ТОЛЬКО до проведения: apply создаёт находке партию и
* прописывает её id сюда. На проведённой сессии находку узнаём иначе —
* см. isFind() в pages/warehouse/stocktakeSummary.ts.
*/
batch_id: number | null;
part_id: number;
part_name: string;
article: string | null;
place_id: number | null;
place_code: string | null;
qty_expected: number;
qty_counted: number | null;
unit_price: number | string | null;
condition: "new" | "used";
seasons_left: number | null;
resolution: "not_counted" | "match" | "shortage" | "surplus";
delta: number;
delta_amount: number | string;
comment: string | null;
/** Код причины расхождения (курируемый список, зеркалит stock_reasons.py). */
reason_code: string | null;
}
export interface StocktakeDetail extends Stocktake {
lines: StocktakeLine[];
}
export interface StocktakeListResponse {
items: Stocktake[];
total: number;
}
export async function getStocktakes(): Promise<StocktakeListResponse> {
return api.get("wh/stocktakes").json<StocktakeListResponse>();
}
export async function getStocktake(id: number): Promise<StocktakeDetail> {
return api.get(`wh/stocktakes/${id}`).json<StocktakeDetail>();
}
export async function createStocktake(body: {
place_id: number | null;
comment?: string | null;
}): Promise<StocktakeDetail> {
return api.post("wh/stocktakes", { json: body }).json<StocktakeDetail>();
}
export async function countLine(
stocktakeId: number,
lineId: number,
body: { qty_counted: number | null; comment?: string | null },
): Promise<StocktakeLine> {
return api
.patch(`wh/stocktakes/${stocktakeId}/lines/${lineId}`, { json: body })
.json<StocktakeLine>();
}
export async function addFind(
stocktakeId: number,
body: { part_id: number; qty: number; place_id?: number | null; comment?: string | null },
): Promise<StocktakeLine> {
return api.post(`wh/stocktakes/${stocktakeId}/finds`, { json: body }).json<StocktakeLine>();
}
/**
* Поправить находку в черновике.
*
* Отдельная ручка, а не countLine: сервер пишет в аудит «было → стало» и не
* даёт свести количество к нулю — от находки отказываются удалением строки,
* иначе она остаётся в документе пустышкой «числилось 0 — столько и нашли».
* Поля опциональны: шлём только то, что правим.
*/
export async function patchFind(
stocktakeId: number,
lineId: number,
body: {
qty?: number;
unit_price?: number;
condition?: "new" | "used";
seasons_left?: number | null;
comment?: string | null;
reason_code?: string | null;
},
): Promise<StocktakeLine> {
return api
.patch(`wh/stocktakes/${stocktakeId}/finds/${lineId}`, { json: body })
.json<StocktakeLine>();
}
/**
* Убрать строку из черновика. Сервер разрешает только находку: обычную строку
* не заводил человек — она означает «эту позицию надо обойти», и её удаление
* молча вычеркнуло бы позицию из пересчёта.
*/
export async function deleteStocktakeLine(
stocktakeId: number,
lineId: number,
): Promise<{ ok: boolean }> {
return api
.delete(`wh/stocktakes/${stocktakeId}/lines/${lineId}`)
.json<{ ok: boolean }>();
}
export async function applyStocktake(id: number): Promise<StocktakeDetail> {
return api.post(`wh/stocktakes/${id}/apply`).json<StocktakeDetail>();
}
export async function deleteStocktake(id: number): Promise<{ ok: boolean }> {
return api.delete(`wh/stocktakes/${id}`).json<{ ok: boolean }>();
}
// ── Сезонная выдача резины ─────────────────────────────────────────────────
//
// Комплект живёт на машине от осени до следующей осени, поэтому выдача — не
// разовое списание, а документ со статусом. Закрыть предыдущий комплект
// (вернули / списали / не найден) обязательно, иначе сервер отвечает 409.
/** Три градации состояния. На сервере это «сколько сезонов осталось»: 2/1/0. */
export type TyreGrade = "good" | "season" | "worn";
export const TYRE_GRADE_LABEL: Record<TyreGrade, string> = {
good: "Хорошая",
season: "На сезон",
worn: "Под списание",
};
export interface TyreStockRow {
part_id: number;
name: string;
size: string | null;
condition: string;
qty: number;
by_grade: Partial<Record<TyreGrade, number>>;
places: string[];
suggested: boolean;
/** Подтверждённая применимость к выбранной машине. */
fits: boolean;
}
/** Докладка в выданный комплект — ещё колесо на ту же машину. */
export interface TyreAddition {
id: number;
part_id: number;
part_name: string | null;
qty: number;
grade: TyreGrade | null;
created_at: string;
created_by: string | null;
comment: string | null;
}
export interface TyreSet {
id: number;
car_id: number | null;
car_number: string | null;
driver_id: number | null;
driver_fio: string | null;
part_id: number;
part_name: string | null;
size: string | null;
season: string;
qty: number;
place_name: string | null;
issued_at: string;
issued_by: string | null;
grade_out: TyreGrade | null;
status: "on_car" | "returned" | "scrapped" | "lost";
closed_at: string | null;
closed_by: string | null;
grade_in: TyreGrade | null;
close_comment: string | null;
comment: string | null;
/** Докладки. `qty` выше их уже включает: это все колёса на машине. */
additions?: TyreAddition[];
}
export interface TyreContext {
car_id: number;
car_number: string | null;
brand: string | null;
model: string | null;
driver_id: number | null;
driver_fio: string | null;
suggested_size: string | null;
open_set: TyreSet | null;
stock: TyreStockRow[];
/** Известно ли, что подходит машине. false — фильтровать нечем, показываем всё. */
fit_known: boolean;
}
export interface TyreClose {
action: "returned" | "scrapped" | "lost";
grade?: TyreGrade;
place_id?: number | null;
comment?: string | null;
}
export async function getTyreContext(carId: number): Promise<TyreContext> {
return api.get(`wh/tyres/context?car_id=${carId}`).json<TyreContext>();
}
export async function issueTyres(
body: {
car_id: number;
part_id: number;
qty: number;
grade: TyreGrade;
season?: "winter" | "summer";
place_id?: number | null;
comment?: string | null;
close?: TyreClose | null;
/** Доложить в открытый комплект вместо выдачи нового (тогда close не нужен). */
add_to_open?: boolean;
},
idempotencyKey: string,
): Promise<TyreSet> {
// Ключ идемпотентности обязателен: телефон у подъёмника теряет связь и
// ретраит, а повтор — это ещё четыре покрышки со склада.
return api
.post("wh/tyres/issue", { json: body, headers: { "Idempotency-Key": idempotencyKey } })
.json<TyreSet>();
}
export interface TyreSetsResponse {
items: TyreSet[];
total: number;
on_car: number;
}
export async function getTyreSets(params?: { status?: string; limit?: number }): Promise<TyreSetsResponse> {
const qs = new URLSearchParams();
if (params?.status) qs.set("status", params.status);
if (params?.limit) qs.set("limit", String(params.limit));
const s = qs.toString();
return api.get(`wh/tyres/sets${s ? `?${s}` : ""}`).json<TyreSetsResponse>();
}
export interface TyreSizeRow {
brand: string | null;
model: string | null;
tyre_size: string | null;
cars_count: number;
}
export async function getTyreSizes(): Promise<TyreSizeRow[]> {
return api.get("wh/tyres/sizes").json<TyreSizeRow[]>();
}
export async function setTyreSize(body: {
brand: string;
model: string;
tyre_size: string | null;
}): Promise<TyreSizeRow> {
return api.put("wh/tyres/sizes", { json: body }).json<TyreSizeRow>();
}
/** Вся резина в наличии — подсказка размеров в справочнике. */
export async function getTyreStock(): Promise<TyreStockRow[]> {
return api.get("wh/tyres/stock").json<TyreStockRow[]>();
}
@@ -1,133 +0,0 @@
/**
* Пикер детали из складского каталога — общий для формы создания и формы
* правки ремонта (по образцу 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>
);
}
@@ -1,67 +0,0 @@
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");
});
@@ -1,66 +0,0 @@
/**
* Количество детали в ремонте: −/+ и поле ввода.
*
* Почему не просто <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>
);
}
@@ -3,122 +3,42 @@
*
* Использует `useInfiniteQuery` для бесконечной пагинации по 20 (У38).
* На `visibilitychange` (когда вкладка/приложение получают фокус) —
* автоматическое обновление через `refresh()`. Кнопка «Обновить» в шапке
* вызывает тот же `refresh()`.
*
* Поддерживает поиск по подстроке (госномер/марка/модель): `q` уходит
* в каждый запрос страницы и входит в ключ кэша. При смене запроса на
* экране остаётся прошлая выдача (`keepPreviousData`), а не скелетоны.
* автоматический рефреш первой страницы. Pull-to-refresh вызывается
* напрямую из компонента через `refetch()`.
*
* SWR-кэш живёт в react-query (память + localStorage persist уже
* сконфигурирован в QueryClient на уровне приложения, если такого нет —
* первая отрисовка идёт без кэша, но дальше работает).
*/
import { useCallback, useEffect, useRef, useState } from "react";
import {
keepPreviousData,
useInfiniteQuery,
useQueryClient,
type InfiniteData,
type QueryKey,
} from "@tanstack/react-query";
import { useEffect } from "react";
import { useInfiniteQuery, type QueryKey } from "@tanstack/react-query";
import { getRepairsFeed, type FeedItem, type FeedResponse } from "@/api/repairsFeed";
export const FEED_QUERY_KEY: QueryKey = ["repairs-feed"];
export const FEED_PAGE_SIZE = 20;
/**
* Ключ кэша ленты. Поисковый запрос обязан входить в ключ: иначе страницы
* разных запросов лягут в один кэш и в списке перемешаются чужие ремонты.
*/
export function 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),
export function useRepairsFeed() {
const query = useInfiniteQuery<FeedResponse>({
queryKey: FEED_QUERY_KEY,
queryFn: ({ pageParam }) =>
// q передаём на КАЖДОЙ странице — иначе догрузка вернёт нефильтрованный
// хвост и подмешает в результаты поиска чужие ремонты.
getRepairsFeed({
limit: FEED_PAGE_SIZE,
cursor: pageParam,
q: search,
}),
initialPageParam: null,
getRepairsFeed({ limit: FEED_PAGE_SIZE, cursor: (pageParam as string | null) ?? null }),
initialPageParam: null as string | null,
getNextPageParam: (last) => last.next_cursor ?? undefined,
staleTime: 30_000, // 30 секунд считаем «свежим» — потом фон обновляет
refetchOnWindowFocus: false, // делаем свой visibilitychange-листенер ниже
// Каждая буква в поиске — новый ключ, а у нового ключа данных ещё нет.
// Без этого список на каждое нажатие подменялся бы скелетонами и мигал.
// Держим прошлую выдачу до прихода актуальной; что она устарела —
// показываем через isPreviousResults.
placeholderData: keepPreviousData,
});
// Листенер вешаем один раз, а refetch держим в ref — после смены поискового
// запроса обновлять надо актуальную выдачу, а не ту, что была на монтировании.
const refetchRef = useRef(query.refetch);
useEffect(() => {
refetchRef.current = query.refetch;
}, [query.refetch]);
/**
* Обновление ленты. `refetch()` у бесконечного запроса перезапрашивает ВСЕ
* загруженные страницы, причём последовательно (курсор следующей приходит
* из предыдущей). У механика, пролиставшего ленту вглубь, это десяток
* запросов на слабой сети и десять шансов словить ошибку вместо одного.
* Поэтому сначала схлопываем ленту до первой страницы, а потом обновляем —
* ровно один запрос. Плата: догруженный хвост сбрасывается, лента
* возвращается к началу (как у обычного pull-to-refresh).
*/
// Пока обновление летит, догрузка следующей страницы обязана молчать.
// Схлопывание укорачивает список, браузер прижимает скролл к новому низу, и
// маркер бесконечной прокрутки попадает в зону видимости. Его fetchNextPage
// по умолчанию ОТМЕНЯЕТ запрос в полёте — обновление не доезжает вовсе, а
// вместо него подтягивается вторая страница по старому курсору. Новых
// ремонтов сверху человек так и не увидит, сколько ни жми.
const [isRefreshing, setIsRefreshing] = useState(false);
const refresh = useCallback(async () => {
setIsRefreshing(true);
try {
queryClient.setQueryData<FeedPages>(feedQueryKey(search), (old) =>
old && old.pages.length > 1
? { pages: old.pages.slice(0, 1), pageParams: old.pageParams.slice(0, 1) }
: old,
);
await refetchRef.current();
} finally {
setIsRefreshing(false);
}
}, [queryClient, search]);
// Тот же приём с ref: refresh меняется вместе с поисковым запросом,
// а листенер ниже вешается один раз.
const refreshRef = useRef(refresh);
useEffect(() => {
refreshRef.current = refresh;
}, [refresh]);
// У38: обновление при возврате в приложение/вкладку.
useEffect(() => {
const onVisible = () => {
if (document.visibilityState === "visible") {
void refreshRef.current();
// Рефрешим только первую страницу, бесконечный скролл сбрасывается.
void query.refetch();
}
};
document.addEventListener("visibilitychange", onVisible);
return () => document.removeEventListener("visibilitychange", onVisible);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Удобный flatten для рендера в одну ленту.
@@ -128,15 +48,11 @@ export function useRepairsFeed(q?: string | null) {
items,
isLoading: query.isLoading,
isFetching: query.isFetching,
// На экране выдача предыдущего запроса, актуальная ещё летит —
// повод приглушить список, но не повод его прятать.
isPreviousResults: query.isPlaceholderData,
isError: query.isError,
error: query.error,
fetchNextPage: query.fetchNextPage,
hasNextPage: !!query.hasNextPage,
isFetchingNextPage: query.isFetchingNextPage,
refresh,
isRefreshing,
refetch: query.refetch,
};
}
@@ -1,43 +0,0 @@
/**
* Ужать снимок перед отправкой на распознавание.
*
* Телефон отдаёт кадр на 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;
}
}
@@ -34,39 +34,6 @@ export default function ActionMenu() {
emoji: "🔧",
onClick: () => navigate("/repairs"),
},
// Приёмка и инвентаризация правят остатки и деньги — пока только админам
// (тот же гейт стоит на сервере, здесь просто не показываем лишнего).
...(meQuery.data?.is_admin
? [
{
key: "receiving",
title: "Приёмка",
description: "Снять накладную камерой и оприходовать товар",
emoji: "📦",
onClick: () => navigate("/wh/receiving"),
},
{
key: "stocktake",
title: "Инвентаризация",
description: "Пересчитать зону склада и провести расхождения",
emoji: "📋",
onClick: () => navigate("/wh/stocktake"),
},
]
: []),
// Выдача резины — по складскому праву (не только админам): признак
// warehouse:tyres приходит в /me, если у механика есть право склада.
...(meQuery.data?.is_admin || meQuery.data?.permissions?.includes("warehouse:tyres")
? [
{
key: "tyres",
title: "Выдача резины",
description: "Сезонная переобувка: выдать комплект и закрыть старый",
emoji: "🛞",
onClick: () => navigate("/wh/tyres"),
},
]
: []),
];
return (
@@ -14,7 +14,6 @@ import { AuthImg } from "@/components/AuthImg";
import { ttImageUrl } from "@/api/vehicles";
import { VendorVehicleScheme } from "@/components/vehicle-scheme/VendorVehicleScheme";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { loadZoneLabels } from "@/data/zoneLabels";
const STATUS_LABELS: Record<string, string> = {
@@ -139,19 +138,6 @@ export default function InspectionReview() {
onError: () => toast.error("Не удалось сохранить заметку"),
});
// Осмотр закрыт не механиком, а автоматикой — вернуть в работу и дать
// доснять. Без этой кнопки механик, вернувшийся через три часа, упирается в
// заблокированную карточку и вынужден заводить осмотр заново.
const reopenMutation = useMutation({
mutationFn: () => patchInspection(insId, { status: "in_progress" }),
onSuccess: (updated) => {
queryClient.setQueryData(["inspection", insId], updated);
queryClient.invalidateQueries({ queryKey: ["vehicle"] });
navigate(`/inspections/${insId}/edit`);
},
onError: () => toast.error("Не удалось вернуть осмотр в работу"),
});
if (isLoading) return <div className="p-8 text-muted-foreground">Загружаю</div>;
if (isError || !ins)
return <div className="p-8 text-destructive">Осмотр не найден.</div>;
@@ -247,27 +233,6 @@ export default function InspectionReview() {
)}
</Card>
{ins.meta?.auto_completed === true && (
<Card className="p-4 space-y-3 border-amber-500/40 bg-amber-500/10">
<div className="text-sm">
<div className="font-semibold">Закрыт автоматически</div>
<p className="mt-1 text-muted-foreground leading-relaxed">
Осмотр несколько часов никто не открывал, поэтому система завершила
его сама чтобы фотографии не пропали из отчётов. Если работа не
доделана, верните осмотр в работу и продолжите.
</p>
</div>
<Button
variant="outline"
className="w-full"
onClick={() => reopenMutation.mutate()}
disabled={reopenMutation.isPending}
>
{reopenMutation.isPending ? "Открываю…" : "Продолжить осмотр"}
</Button>
</Card>
)}
<Card className="p-4 space-y-2">
<h2 className="text-sm font-semibold text-muted-foreground">
Заметки механика
@@ -23,8 +23,6 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { repairCanSubmit, repairSubmitWhyDisabled } from "@/lib/repairForm";
import WorksPickerModal from "@/components/repairs/WorksPickerModal";
import PartsPickerModal from "@/components/repairs/PartsPickerModal";
import QtyStepper from "@/components/repairs/QtyStepper";
import MechanicsField, { type SelectedMechanic } from "@/components/repairs/MechanicsField";
import { getMe } from "@/api/me";
import {
@@ -32,11 +30,11 @@ import {
getCarContext,
presignPhoto,
searchWorks,
suggestParts,
uploadPhotoToTmp,
type CarContext,
type CreatePhotoPayload,
type MechWork,
type PartCatalogItem,
type PresignResponse,
} from "@/api/repairsCreate";
@@ -70,22 +68,13 @@ interface WorkRow {
interface PartRow {
rowKey: string;
part_id: number;
name: string;
article: string | null;
in_stock: number;
// "" допустимо, пока поле редактируют: иначе стирание единицы мгновенно
// возвращало бы её и «4 свечи» было не набрать (см. QtyStepper).
qty: number | "";
qty: number;
}
interface OilChangeState {
enabled: boolean;
next_in_km: number; // интервал двигателя
// Какие масла меняли за заезд (можно оба сразу).
types: { engine: boolean; transmission: boolean };
// Пробега здесь нет намеренно: он один на весь ремонт (У24), берётся из
// шапки формы — механик не должен вводить одно и то же дважды.
next_in_km: number;
sticker: PhotoState | null;
}
@@ -130,7 +119,6 @@ export default function CreateRepairPage() {
const [oilChange, setOilChange] = useState<OilChangeState>({
enabled: false,
next_in_km: 10000,
types: { engine: true, transmission: false },
sticker: null,
});
@@ -299,21 +287,27 @@ export default function CreateRepairPage() {
// ── Parts ────────────────────────────────────────────────────────────────
const [partsPickerOpen, setPartsPickerOpen] = useState(false);
const [partsDraft, setPartsDraft] = useState<{ name: string; suggestions: string[] }>({ name: "", suggestions: [] });
const addPartFromCatalog = (item: PartCatalogItem) => {
setParts((arr) => {
// Та же деталь уже в списке — увеличиваем количество, а не плодим строку.
const existing = arr.find((p) => p.part_id === item.id);
if (existing) {
return arr.map((p) => (p.part_id === item.id ? { ...p, qty: Number(p.qty || 0) + 1 } : p));
}
return [
...arr,
{ rowKey: uuid4(), part_id: item.id, name: item.name, article: item.article, in_stock: item.in_stock, qty: 1 },
];
const queryPartSuggestions = async (q: string) => {
setPartsDraft({ name: q, suggestions: [] });
if (!q.trim()) return;
const list = await suggestParts(q);
// У43 race-fix: пока запрос для "К" летел, юзер дописал до "Кепу" — поздний
// ответ не должен перезаписывать .name старым значением (это и есть
// «текст частично сам стирается»). Применяем suggestions только если
// ввод не менялся; иначе тихо роняем ответ.
setPartsDraft((prev) => {
if (prev.name !== q) return prev;
return { name: q, suggestions: list.map((s) => s.name) };
});
setPartsPickerOpen(false);
};
const addPart = (name: string) => {
const trimmed = name.trim();
if (!trimmed) return;
setParts((arr) => [...arr, { rowKey: uuid4(), name: trimmed, qty: 1 }]);
setPartsDraft({ name: "", suggestions: [] });
};
const removePart = (rowKey: string) =>
@@ -321,17 +315,8 @@ export default function CreateRepairPage() {
// ── Submit ───────────────────────────────────────────────────────────────
// Общая часть гейтинга живёт в lib/repairForm (покрыта тестами, шарится с
// формой правки); здесь добавляется только специфичная для создания проверка
// выбранного типа масла.
const submitWhyDisabled = (): string => {
const base = repairSubmitWhyDisabled(photos, works);
if (base) return base;
if (oilChange.enabled && !oilChange.types.engine && !oilChange.types.transmission)
return "Выберите тип масла (двигатель и/или коробка) или снимите «Была замена масла»";
return "";
};
const canSubmit = () => repairCanSubmit(photos, works) && submitWhyDisabled() === "";
const canSubmit = () => repairCanSubmit(photos, works);
const submitWhyDisabled = (): string => repairSubmitWhyDisabled(photos, works);
const onSubmit = async () => {
const reason = submitWhyDisabled();
@@ -364,32 +349,24 @@ export default function CreateRepairPage() {
manual_override: w.unlocked,
override_comment: w.unlocked ? w.override_comment.trim() : null,
})),
// Пустое поле количества (человек стёр и не дописал) — это 1 штука,
// а не ноль: строка в списке есть, значит деталь ставили.
parts: parts.map((p) => ({
part_id: p.part_id, qty: Math.max(1, Number(p.qty) || 1), name: p.name,
})),
parts: parts.map((p) => ({ name: p.name, qty: p.qty })),
photos: photoPayload,
oil_changes: oilChange.enabled
? (["engine", "transmission"] as const)
.filter((t) => oilChange.types[t])
.map((t, idx) => ({
enabled: true,
// Один источник истины — главный пробег ремонта (см. У24).
mileage_at_change: mileage,
next_in_km: t === "engine" ? oilChange.next_in_km : 0,
oil_type: t,
// Стикер прикрепляем к первой выбранной замене (обычно двигатель).
sticker_photo_uuid:
idx === 0 && oilChange.sticker?.status === "uploaded"
? oilChange.sticker.presign.photo_uuid
: null,
sticker_extension:
idx === 0 && oilChange.sticker?.status === "uploaded"
? oilChange.sticker.presign.extension
: null,
}))
: [],
oil_change: oilChange.enabled
? {
enabled: true,
// Один источник истины — главный пробег ремонта (см. У24).
mileage_at_change: mileage,
next_in_km: oilChange.next_in_km,
sticker_photo_uuid:
oilChange.sticker?.status === "uploaded"
? oilChange.sticker.presign.photo_uuid
: null,
sticker_extension:
oilChange.sticker?.status === "uploaded"
? oilChange.sticker.presign.extension
: null,
}
: null,
},
idemKey.current,
);
@@ -619,41 +596,26 @@ export default function CreateRepairPage() {
{/* Механики (делёж 1/N) */}
<MechanicsField value={mechanics} onChange={setMechanics} totalSum={totalSum} />
{/* Запчасти — из складского каталога (списываются со склада) */}
{/* Запчасти */}
<section>
<div className="flex items-baseline justify-between">
<Label className="text-sm">Запчасти и материалы</Label>
<Button variant="outline" size="sm" onClick={() => setPartsPickerOpen(true)}>
<Plus className="h-3 w-3 mr-1" />
Добавить деталь
</Button>
</div>
{parts.length === 0 ? (
<div className="text-xs text-muted-foreground mt-2">
Детали выбираются со склада спишутся при сохранении
</div>
) : (
<Label className="text-sm">Запчасти и материалы</Label>
{parts.length > 0 && (
<ul className="mt-2 space-y-1">
{parts.map((p) => (
<li 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">
{p.article ? `арт. ${p.article} · ` : ""}
{p.in_stock > 0
? `на складе: ${p.in_stock}`
: p.in_stock < 0
? `на складе: ${p.in_stock}`
: "нет в наличии"}
</div>
</div>
<QtyStepper
<span className="flex-1">{p.name}</span>
<Input
type="number"
min={1}
value={p.qty}
onChange={(next) =>
onChange={(e) =>
setParts((arr) =>
arr.map((row) => (row.rowKey === p.rowKey ? { ...row, qty: next } : row)),
arr.map((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)}>
<Trash2 className="h-3 w-3" />
@@ -662,6 +624,32 @@ export default function CreateRepairPage() {
))}
</ul>
)}
<div className="mt-2 flex gap-2">
<Input
value={partsDraft.name}
onChange={(e) => queryPartSuggestions(e.target.value)}
placeholder="Например, Свеча NGK"
onKeyDown={(e) => e.key === "Enter" && addPart(partsDraft.name)}
/>
<Button onClick={() => addPart(partsDraft.name)}>
<Plus className="h-4 w-4" />
</Button>
</div>
{partsDraft.suggestions.length > 0 && (
<ul className="mt-1 border rounded-md bg-popover divide-y">
{partsDraft.suggestions.map((s) => (
<li key={s}>
<button
type="button"
className="w-full text-left text-sm px-3 py-2 hover:bg-accent/40"
onClick={() => addPart(s)}
>
{s}
</button>
</li>
))}
</ul>
)}
</section>
{/* Замена масла */}
@@ -679,53 +667,16 @@ export default function CreateRepairPage() {
{oilChange.enabled && (
<div className="mt-3 space-y-3">
<div>
<Label className="text-sm">Что меняли (можно оба)</Label>
<div className="mt-1 grid grid-cols-2 gap-2">
{(
[
["engine", "Двигатель"],
["transmission", "Коробка"],
] as ["engine" | "transmission", string][]
).map(([v, l]) => (
<button
type="button"
key={v}
onClick={() =>
setOilChange((oc) => ({ ...oc, types: { ...oc.types, [v]: !oc.types[v] } }))
}
className={`rounded-md border px-2 py-2 text-sm ${
oilChange.types[v]
? "border-primary bg-primary/10 font-medium text-primary"
: "border-input"
}`}
>
{oilChange.types[v] ? "✓ " : ""}
{l}
</button>
))}
</div>
{!oilChange.types.engine && !oilChange.types.transmission && (
<p className="mt-1 text-xs text-destructive">Выберите хотя бы один тип масла.</p>
)}
<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.engine && (
<div>
<Label className="text-sm">Двигатель: следующая замена через (км)</Label>
<Input
type="number"
min={0}
value={oilChange.next_in_km}
onChange={(e) =>
setOilChange((oc) => ({ ...oc, next_in_km: Number(e.target.value) || 0 }))
}
/>
</div>
)}
{oilChange.types.transmission && (
<p className="text-xs text-muted-foreground">
Интервал коробки задаётся по модели авто в отчёте СТО.
</p>
)}
<div>
<Label className="text-sm">Фото стикера (одно)</Label>
<label className="mt-1 block border-2 border-dashed rounded-md text-center cursor-pointer hover:bg-accent/40 overflow-hidden relative aspect-video">
@@ -781,14 +732,6 @@ export default function CreateRepairPage() {
onClose={() => setWorksPicker({ open: false, q: "", results: [] })}
/>
)}
{/* Parts picker modal — каталог склада (общий с формой правки) */}
<PartsPickerModal
open={partsPickerOpen}
carId={isExternal ? null : carId}
onPick={addPartFromCatalog}
onClose={() => setPartsPickerOpen(false)}
/>
</div>
);
}
@@ -14,13 +14,10 @@ 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 { searchWorks, suggestParts, type MechWork } 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 {
@@ -35,28 +32,13 @@ interface WorkRow {
interface PartRow {
rowKey: string;
// null — историческая строка свободным текстом (до перевода на каталог).
// Такие строки сохраняются как есть и склад не трогают.
part_id: number | null;
name: string;
article: string | null;
in_stock: number | null;
// "" — промежуточное состояние ввода, см. QtyStepper.
qty: number | "";
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";
next_in_km: number | null;
}
function uid(): string {
@@ -79,11 +61,7 @@ export default function EditRepairPage() {
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");
const [oil, setOil] = useState<OilState>({ enabled: false, next_in_km: null });
// Работавшие механики (делёж 1/N).
const [mechanics, setMechanics] = useState<SelectedMechanic[]>([]);
@@ -91,22 +69,6 @@ export default function EditRepairPage() {
{ 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;
@@ -125,18 +87,12 @@ export default function EditRepairPage() {
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,
rowKey: uid(), name: p.name, 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);
if (d.oil_change) {
setOil({
enabled: true,
types: { engine: !!engine, transmission: !!gearbox },
next_in_km: engine?.next_in_km ?? null,
next_in_km: d.oil_change.next_in_km,
});
}
// Механики: из списка работавших; fallback — создатель (старые ответы).
@@ -218,10 +174,6 @@ export default function EditRepairPage() {
setError("Минимум один механик в ремонте");
return;
}
if (oil.enabled && !oil.types.engine && !oil.types.transmission) {
setError("Выберите тип масла (двигатель и/или коробка) или снимите «Замена масла»");
return;
}
setSaving(true);
try {
@@ -233,26 +185,14 @@ export default function EditRepairPage() {
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),
qty: p.qty,
})),
// Полная замена набора: пустой список = замен не было. Пробег —
// главный пробег ремонта (один источник истины).
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[])
: [],
oil_change: oil.enabled
// Один источник истины — главный пробег ремонта.
? { enabled: true, mileage_at_change: mileage, next_in_km: oil.next_in_km }
: { enabled: false, mileage_at_change: null, next_in_km: null },
// Список механиков отправляем, только если он непуст (иначе бэк
// оставит набор как есть; пустой бы вызвал ValueError).
...(mechanics.length > 0
@@ -390,7 +330,7 @@ export default function EditRepairPage() {
{/* Механики (делёж 1/N) */}
<MechanicsField value={mechanics} onChange={setMechanics} totalSum={totalSum} />
{/* Запчасти — из складского каталога (списываются со склада) */}
{/* Запчасти */}
<section>
<div className="flex items-baseline justify-between">
<Label className="text-sm">Запчасти (опционально)</Label>
@@ -398,34 +338,21 @@ export default function EditRepairPage() {
</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>
<PartEditRow
key={p.rowKey}
name={p.name}
qty={p.qty}
onChange={(name, qty) =>
setParts((arr) => arr.map((x) => x.rowKey === p.rowKey ? { ...x, name, qty } : x))
}
onRemove={() => setParts((arr) => arr.filter((x) => x.rowKey !== p.rowKey))}
/>
))}
<button
onClick={openPartsPicker}
onClick={() => setParts((arr) => [...arr, { rowKey: uid(), name: "", qty: 1 }])}
className="w-full border-2 border-dashed rounded-md py-2.5 text-sm hover:bg-accent/40 flex items-center justify-center gap-1.5"
>
<Plus className="h-4 w-4" /> Добавить деталь
<Plus className="h-4 w-4" /> Добавить запчасть
</button>
</div>
</section>
@@ -441,55 +368,16 @@ export default function EditRepairPage() {
Замена масла
</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 className="mt-3">
<Label className="text-xs">Через, км</Label>
<Input
type="number"
inputMode="numeric"
value={oil.next_in_km ?? 10000}
onChange={(e) => setOil((o) => ({
...o, next_in_km: e.target.value === "" ? null : Number(e.target.value),
}))}
/>
</div>
)}
</section>
@@ -525,14 +413,6 @@ export default function EditRepairPage() {
/>
)}
{/* 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);
@@ -556,6 +436,63 @@ export default function EditRepairPage() {
}
function PartEditRow({ name, qty, onChange, onRemove }: {
name: string;
qty: number;
onChange: (name: string, qty: number) => void;
onRemove: () => void;
}) {
const [suggestions, setSuggestions] = useState<string[]>([]);
const [showSugg, setShowSugg] = useState(false);
const fetchSuggestions = async (q: string) => {
if (!q.trim()) { setSuggestions([]); return; }
try {
const r = await suggestParts(q);
setSuggestions(r.map((x) => x.name));
} catch { /* noop */ }
};
return (
<div className="flex gap-2 items-start">
<div className="flex-1 relative">
<Input
placeholder="Название запчасти"
value={name}
onChange={(e) => { onChange(e.target.value, qty); fetchSuggestions(e.target.value); setShowSugg(true); }}
onFocus={() => name && fetchSuggestions(name)}
onBlur={() => setTimeout(() => setShowSugg(false), 150)}
/>
{showSugg && suggestions.length > 0 && (
<div className="absolute top-full left-0 right-0 z-10 mt-1 bg-popover border rounded-md shadow-md max-h-48 overflow-auto">
{suggestions.map((s) => (
<button
key={s}
onClick={() => { onChange(s, qty); setShowSugg(false); }}
className="w-full text-left px-3 py-2 text-sm hover:bg-accent"
>
{s}
</button>
))}
</div>
)}
</div>
<Input
type="number"
inputMode="numeric"
min={1}
value={qty}
onChange={(e) => onChange(name, Math.max(1, Number(e.target.value) || 1))}
className="w-20"
/>
<button onClick={onRemove} className="rounded-full p-2 hover:bg-accent text-destructive">
<Trash2 className="h-4 w-4" />
</button>
</div>
);
}
function OverridePriceModal({ workName, catalogPrice, appliedPrice, initialComment, onCancel, onSubmit }: {
workName: string;
catalogPrice: number;
@@ -16,17 +16,6 @@ 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", {
@@ -50,12 +39,6 @@ export default function RepairDetailPage() {
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();
@@ -263,14 +246,7 @@ export default function RepairDetailPage() {
<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">{p.name}</div>
<div className="text-sm font-mono whitespace-nowrap text-muted-foreground">
{p.qty} шт
</div>
@@ -280,57 +256,49 @@ export default function RepairDetailPage() {
</section>
)}
{/* Замена масла — за заезд их может быть несколько (двигатель +
коробка). oil_change оставлен для ответов старого бэкенда. */}
{oils.length > 0 && (
{/* Замена масла */}
{data.oil_change && (
<section className="rounded-lg border bg-card overflow-hidden">
<div className="px-4 py-3 border-b bg-muted/40">
<div className="text-sm font-semibold">
Замена масла{oils.length > 1 ? ` · ${oils.length}` : ""}
</div>
<div className="text-sm font-semibold">Замена масла</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 className="p-4">
<div className="flex gap-3 items-start">
{data.oil_change.sticker_thumb_url && (
<a
href={data.oil_change.sticker_orig_url ?? "#"}
target="_blank"
rel="noreferrer"
className="flex-shrink-0"
>
<img
src={data.oil_change.sticker_thumb_url}
alt="Стикер замены масла"
loading="lazy"
className="w-24 h-24 object-cover rounded-md border bg-muted"
/>
</a>
)}
<div className="flex-1 text-sm space-y-1">
{data.oil_change.mileage_at_change != null && (
<div>
<span className="text-muted-foreground">Пробег при замене: </span>
<span className="font-mono">{fmt(data.oil_change.mileage_at_change)} км</span>
</div>
</div>
)}
{data.oil_change.next_in_km != null && (
<div>
<span className="text-muted-foreground">Следующая через: </span>
<span className="font-mono">{fmt(data.oil_change.next_in_km)} км</span>
</div>
)}
{data.oil_change.has_sticker && !data.oil_change.sticker_thumb_url && (
<div className="text-xs text-muted-foreground pt-1">
фото стикера загружено
</div>
)}
</div>
))}
</div>
</div>
</section>
)}
@@ -5,18 +5,13 @@
* `created_at DESC`. Бесконечный скролл по 20. Pull-to-refresh,
* обновление при возврате в приложение (через useRepairsFeed).
*
* В шапке — поиск по госномеру, марке и модели (отдельного экрана нет:
* это фильтр той же ленты, со своим кэшем и своей пагинацией).
*
* Пустая лента — плейсхолдер «В парке пока нет ремонтов» (У41).
*/
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { HTTPError } from "ky";
import { ChevronLeft, Plus, Search, Wrench, X } from "lucide-react";
import { ChevronLeft, Plus, Wrench } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useRepairsFeed } from "@/hooks/useRepairsFeed";
import { formatFeedTimestamp } from "@/lib/timeFormat";
import { getRepairsMonthStats, type FeedItem } from "@/api/repairsFeed";
@@ -24,35 +19,16 @@ import { groupByLocalDay, formatDayLabel, fmtMoney, pluralRepairs, pluralWorks }
export default function RepairsFeedPage() {
const navigate = useNavigate();
// Поле ввода и запрос разведены: в сеть уходит только «устоявшееся»
// значение, иначе каждая буква — отдельный запрос и отдельный кэш.
const [queryInput, setQueryInput] = useState("");
const [q, setQ] = useState("");
useEffect(() => {
const t = setTimeout(() => setQ(queryInput.trim()), 200); // debounce
return () => clearTimeout(t);
}, [queryInput]);
const isSearching = q.length > 0;
const {
items,
isLoading,
isError,
error,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
refresh,
isRefreshing,
refetch,
isFetching,
isPreviousResults,
} = useRepairsFeed(q);
const resetSearch = useCallback(() => {
setQueryInput("");
setQ("");
}, []);
} = useRepairsFeed();
// Сумма и количество ремонтов за текущий месяц (отдельный endpoint —
// не зависит от пагинации ленты).
@@ -69,14 +45,10 @@ export default function RepairsFeedPage() {
const sentinelRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const el = sentinelRef.current;
if (!el || !hasNextPage || isRefreshing) return;
if (!el || !hasNextPage) return;
const io = new IntersectionObserver(
(entries) => {
// Во время обновления не догружаем: refresh схлопывает ленту, скролл
// прижимается к новому низу, маркер попадает в кадр — и fetchNextPage
// отменил бы летящий запрос обновления. Человек жал бы «Обновить»
// сколько угодно, а новые ремонты сверху так и не появлялись бы.
if (entries[0]?.isIntersecting && !isFetchingNextPage && !isRefreshing) {
if (entries[0]?.isIntersecting && !isFetchingNextPage) {
void fetchNextPage();
}
},
@@ -84,15 +56,14 @@ export default function RepairsFeedPage() {
);
io.observe(el);
return () => io.disconnect();
}, [hasNextPage, isFetchingNextPage, fetchNextPage, isRefreshing]);
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
// Pull-to-refresh: простой UX через тач-скролл сверху.
// Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refresh
// (он схлопывает ленту до первой страницы — см. useRepairsFeed).
// Делаем минимально-инвазивно: на тап-кнопку «обновить» вызываем refetch.
// Полноценный pull-to-refresh с жестом — отдельная задача.
const handleRefresh = useCallback(() => {
void refresh();
}, [refresh]);
void refetch();
}, [refetch]);
const handleAdd = () => navigate("/repairs/new");
const handleOpen = (item: FeedItem) => navigate(`/repairs/${item.id}`);
@@ -122,59 +93,24 @@ export default function RepairsFeedPage() {
<span className="hidden sm:inline">Добавить</span>
</Button>
</div>
{/* Поиск по ленте. Без autoFocus: экран открывают ради списка, а не
ради поиска — не выдёргиваем клавиатуру на каждом заходе. */}
<div className="px-3 pb-3">
<div className="relative">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Госномер, марка или модель…"
aria-label="Поиск по ремонтам"
value={queryInput}
onChange={(e) => setQueryInput(e.target.value)}
// Столько же, сколько принимает сервер. Меньше нельзя: на
// «тойота ленд крузер прадо а123вс125» поле молча перестало бы
// печатать, и это выглядит как залипшая клавиатура.
maxLength={64}
className="pl-8 pr-9"
/>
{queryInput && (
<button
type="button"
onClick={resetSearch}
aria-label="Очистить поиск"
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
<X className="h-4 w-4" />
</button>
)}
</div>
</div>
</header>
<main className="flex-1 container max-w-2xl py-3 space-y-2">
{/* Итого слева — сумма работ и количество ремонтов за текущий месяц
(с 1-го числа по now). Обновить справа.
При активном поиске месячный итог прячем: он считается по всему
месяцу и к отфильтрованному списку отношения не имеет — рядом с
выдачей поиска читался бы как «итог найденного». */}
(с 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)}
<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>
{(monthStatsQuery.data?.count ?? 0) > 0 && (
<span className="text-xs text-muted-foreground ml-2">
({monthStatsQuery.data!.count}{" "}
{pluralRepairs(monthStatsQuery.data!.count)})
</span>
)}
</div>
)}
)}
</div>
<button
type="button"
onClick={handleRefresh}
@@ -193,56 +129,30 @@ export default function RepairsFeedPage() {
</div>
)}
{/* Сбой — отдельная ветка ДО пустого состояния: «не дозвонились»
не должно выглядеть как «ничего не нашлось». */}
{isError && !isLoading && (
<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 className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
Не удалось загрузить ленту ремонтов. Проверьте сеть и попробуйте снова.
</div>
)}
{/* Пока летит выдача нового запроса, показываем прошлую — приглушённой.
Устарело ≠ пропало: подмена списка скелетонами на каждую букву
читается как «всё исчезло» и мешает целиться в нужную строку. */}
<div
className={`transition-opacity ${isPreviousResults ? "opacity-50" : ""}`}
aria-busy={isPreviousResults}
>
{!isLoading && !isError && items.length === 0 && (
isSearching ? (
<NothingFoundState query={q} onReset={resetSearch} />
) : (
<EmptyState onAdd={handleAdd} />
)
)}
{!isLoading && !isError && items.length === 0 && <EmptyState onAdd={handleAdd} />}
{items.length > 0 && (
<ul className="space-y-2">
{grouped.map((group) => (
<li key={group.key}>
<DaySeparator
dateKey={group.key}
total={group.total}
count={group.items.length}
// При поиске дневные итоги молчат: они считаются по строкам
// на экране, а это уже не «итог дня», а «итог совпадений».
showTotals={!isSearching}
/>
<ul className="space-y-2 mt-2">
{group.items.map((item) => (
<li key={item.id}>
<RepairRow item={item} onOpen={() => handleOpen(item)} />
</li>
))}
</ul>
</li>
))}
</ul>
)}
</div>
{items.length > 0 && (
<ul className="space-y-2">
{grouped.map((group) => (
<li key={group.key}>
<DaySeparator dateKey={group.key} total={group.total} count={group.items.length} />
<ul className="space-y-2 mt-2">
{group.items.map((item) => (
<li key={item.id}>
<RepairRow item={item} onOpen={() => handleOpen(item)} />
</li>
))}
</ul>
</li>
))}
</ul>
)}
<div ref={sentinelRef} aria-hidden="true" />
{isFetchingNextPage && (
@@ -252,7 +162,7 @@ export default function RepairsFeedPage() {
)}
{!hasNextPage && items.length > 0 && !isFetchingNextPage && (
<div className="text-center text-xs text-muted-foreground py-4">
{isSearching ? "Это все совпадения." : "Это все ремонты."}
Это все ремонты.
</div>
)}
</main>
@@ -261,47 +171,18 @@ 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;
}) {
function DaySeparator({ dateKey, total, count }: { dateKey: string; total: number; count: number }) {
return (
<div className="flex items-center gap-2 pt-3 pb-1 text-xs">
<span className="font-medium text-foreground">{formatDayLabel(dateKey)}</span>
<div className="flex-1 border-t border-dashed border-border" />
{showTotals && (
<span className="tabular-nums text-muted-foreground">
{fmtMoney(total)}
<span className="ml-1">({count} {pluralRepairs(count)})</span>
</span>
)}
<span className="tabular-nums text-muted-foreground">
{fmtMoney(total)}
<span className="ml-1">({count} {pluralRepairs(count)})</span>
</span>
</div>
);
}
@@ -349,18 +230,8 @@ function RepairRow({ item, onOpen }: { item: FeedItem; onOpen: () => void }) {
Водитель: {item.driver_name}
</div>
)}
{/* Пробег справа на строке механика: так он выстраивается в колонку и
историю одной машины можно читать сверху вниз, не открывая каждый
ремонт — ровно об этом задача 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 className="text-xs text-muted-foreground truncate">
Механик: {item.mechanic_name}
</div>
<div className="flex items-baseline justify-between gap-2">
<WorksLine works={item.works_preview.map((w) => w.name)} extra={item.works_extra} />
@@ -387,29 +258,6 @@ function WorksLine({ works, extra }: { works: string[]; extra: number }) {
}
// Пустой поиск — это НЕ пустая лента: тут не «ремонтов ещё нет», а
// «под фильтр ничего не попало», и выход отсюда — сбросить поиск.
function NothingFoundState({ query, onReset }: { query: string; onReset: () => void }) {
return (
<div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">
<div className="rounded-full bg-muted p-4">
<Search className="h-8 w-8 text-muted-foreground" />
</div>
<div className="space-y-1">
<h2 className="text-base font-semibold">Ничего не найдено</h2>
<p className="text-sm text-muted-foreground max-w-xs">
По запросу «{query}» ремонтов нет. Проверьте номер или поищите по марке
и модели.
</p>
</div>
<Button variant="outline" onClick={onReset}>
Сбросить поиск
</Button>
</div>
);
}
function EmptyState({ onAdd }: { onAdd: () => void }) {
return (
<div className="flex flex-col items-center justify-center text-center py-16 px-4 space-y-4">
@@ -1,134 +0,0 @@
/**
* Карточка проведённого прихода — только чтение.
*
* Накладная — исторический документ: имена и артикулы показываем снимками
* на момент приёмки, а не текущими из каталога. Правки нет намеренно:
* проведённый приход уже стал партиями и движениями, и «поправить» его
* означало бы разъехаться с журналом. Ошиблись — удаление/сторно делается
* в 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>;
}
@@ -1,380 +0,0 @@
/**
* Проверка распознанной накладной перед проведением.
*
* Распознавание почти никогда не идеально: путается артикул, съезжает цена,
* поставщик может быть новым. Поэтому экран построен как сверка — фото
* документа сверху всегда под рукой, а каждая строка правится на месте.
*
* Приход создаётся только по кнопке «Провести»: до неё черновик ничего не
* меняет на складе, и его можно спокойно бросить.
*/
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>
);
}
@@ -1,193 +0,0 @@
/**
* Приёмка товара — точка входа раздела.
*
* Главное действие вынесено наверх и занимает пол-экрана: снять накладную
* камерой. Всё остальное (черновики на проверке, последние приходы) — списки
* под ним. Приёмка делается стоя у коробок с телефоном в одной руке, поэтому
* кнопки крупные, а информации на строку минимум.
*/
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>
);
}
@@ -1,196 +0,0 @@
/**
* Инвентаризация — список сессий и запуск новой.
*
* Пересчёт делают по зонам (стеллаж за стеллажом), поэтому запуск сразу
* спрашивает зону: «весь склад одной сессией» — это несколько сотен строк,
* которые никто не обойдёт за раз.
*/
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>
);
}
@@ -1,301 +0,0 @@
/**
* Итоги проведённой инвентаризации — только просмотр.
*
* Проведённая сессия перестаёт быть рабочим списком и становится документом:
* расхождения уже ушли движениями в журнал склада, менять нечего. Раньше на
* этом месте показывался рабочий список с фильтром «только непосчитанные» —
* то есть ровно то, чего человек НЕ делал, а сам итог был скрыт.
*
* Вид держим в родстве с карточкой прихода (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>
);
}
@@ -1,678 +0,0 @@
/**
* Обход зоны: ввод факта по строкам + находки.
*
* Экран рассчитан на «иду вдоль стеллажа с телефоном»: по умолчанию показаны
* только непосчитанные строки, посчитанная сразу уходит из списка — видно,
* сколько ещё осталось обойти. Переключатель возвращает весь список, если
* надо что-то перепроверить.
*
* Пустое поле — это «ещё не считали», а не ноль. Ноль означает «дошёл и не
* нашёл» и превратится в недостачу, поэтому он вводится явной кнопкой.
*
* Находки живут ОТДЕЛЬНЫМ блоком, а не строками рабочего списка. Причина не
* косметическая: у находки количество проставлено с рождения, поэтому фильтр
* «только непосчитанные» прятал её сразу после добавления — со стороны это
* читалось как «нажал, и оно пропало». Вынести их из-под фильтра исключением
* значило бы держать в одном списке две разные сущности: обход («что надо
* проверить», и его-то и считает прогресс) и находки («что появилось сверх
* списка»). Отдельный блок сохраняет смысл фильтра и прогресса и ставит
* находку прямо под кнопкой, которой её добавили.
*
* Строка, в поле которой стоит курсор, из списка не исчезает, даже если её
* значение уже ушло на сервер. Иначе фильтр выдёргивает строку из-под пальца
* посреди набора — и в документе остаётся то, что успели напечатать. Отсюда
* 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>
);
}
@@ -1,115 +0,0 @@
/**
* Журнал выданных комплектов.
*
* Отвечает на два вопроса сезона: сколько машин уже переобуто и у кого
* комплект до сих пор на руках. Полноценный экран кампании (прогресс по парку,
* дефицит размеров) — следующим шагом в CRM, здесь нужен минимум, по которому
* кладовщик сверяется прямо у склада.
*/
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getTyreSets, TYRE_GRADE_LABEL, type TyreSet } from "@/api/warehouse";
const STATUS_LABEL: Record<TyreSet["status"], string> = {
on_car: "На машине",
returned: "Вернули на склад",
scrapped: "Списан",
lost: "Не найден",
};
const FILTERS: { key: string | undefined; label: string }[] = [
{ key: "on_car", label: "На машинах" },
{ key: undefined, label: "Все" },
];
function fmtDate(iso: string | null): string {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime())
? iso
: new Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(d);
}
export default function TyreJournalPage() {
const navigate = useNavigate();
const [status, setStatus] = useState<string | undefined>("on_car");
const q = useQuery({
queryKey: ["tyre-sets", status],
queryFn: () => getTyreSets({ status, limit: 200 }),
staleTime: 15_000,
});
const items = q.data?.items ?? [];
return (
<div className="min-h-screen bg-background flex flex-col">
<header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
<div className="flex items-center gap-2 p-3">
<Button variant="ghost" size="sm" className="-ml-2" onClick={() => navigate("/wh/tyres")}>
<ChevronLeft className="h-5 w-5" />
</Button>
<div>
<h1 className="text-base font-semibold">Выданные комплекты</h1>
<p className="text-xs text-muted-foreground">
на машинах: {q.data?.on_car ?? 0} · всего записей: {q.data?.total ?? 0}
</p>
</div>
</div>
<div className="flex gap-2 px-3 pb-3">
{FILTERS.map((f) => (
<Button
key={f.label}
size="sm"
variant={status === f.key ? "default" : "outline"}
onClick={() => setStatus(f.key)}
>
{f.label}
</Button>
))}
</div>
</header>
<main className="flex-1 divide-y">
{q.isLoading && <p className="p-4 text-sm text-muted-foreground">Загрузка</p>}
{!q.isLoading && items.length === 0 && (
<p className="p-4 text-sm text-muted-foreground">Пока ничего не выдавали.</p>
)}
{items.map((s) => (
<div key={s.id} className="p-3">
<div className="flex items-baseline gap-2 flex-wrap">
<span className="font-mono font-semibold">{s.car_number ?? "—"}</span>
<span className="text-sm">{s.size ?? s.part_name}</span>
<span className="text-sm text-muted-foreground">{s.qty} шт</span>
<span
className={`text-xs rounded px-1.5 py-0.5 ${
s.status === "on_car"
? "bg-primary/10 text-primary"
: "bg-muted text-muted-foreground"
}`}
>
{STATUS_LABEL[s.status]}
</span>
</div>
<p className="text-xs text-muted-foreground mt-0.5">
{fmtDate(s.issued_at)}
{s.grade_out ? ` · ${TYRE_GRADE_LABEL[s.grade_out].toLowerCase()}` : ""}
{s.driver_fio ? ` · ${s.driver_fio}` : ""}
{s.issued_by ? ` · выдал ${s.issued_by}` : ""}
</p>
{s.status !== "on_car" && (
<p className="text-xs text-muted-foreground">
закрыт {fmtDate(s.closed_at)}
{s.grade_in ? ` · вернули как «${TYRE_GRADE_LABEL[s.grade_in].toLowerCase()}»` : ""}
{s.close_comment ? ` · ${s.close_comment}` : ""}
</p>
)}
</div>
))}
</main>
</div>
);
}
@@ -1,124 +0,0 @@
/**
* Штатные размеры резины по моделям парка.
*
* Заполняется один раз перед сезоном: без размера выдача не подсказывает, что
* брать, и кладовщик ищет позицию в номенклатуре руками — на четырёхстах
* машинах это заметно. Модели идут по числу машин, чтобы самые ходовые
* заполнились первыми и дальше можно было не продолжать.
*
* В поле — подсказка из тех размеров, что реально лежат на складе: набирать
* «225/65/17» с телефона долго и легко ошибиться.
*/
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, ChevronLeft } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
apiErrorText,
getTyreSizes,
getTyreStock,
setTyreSize,
type TyreSizeRow,
} from "@/api/warehouse";
export default function TyreSizesPage() {
const navigate = useNavigate();
const qc = useQueryClient();
const [savingKey, setSavingKey] = useState<string | null>(null);
const sizesQuery = useQuery({ queryKey: ["tyre-sizes"], queryFn: getTyreSizes, staleTime: 30_000 });
const stockQuery = useQuery({ queryKey: ["tyre-stock"], queryFn: getTyreStock, staleTime: 300_000 });
const rows = sizesQuery.data ?? [];
const filled = useMemo(() => rows.filter((r) => r.tyre_size).length, [rows]);
const known = useMemo(
() => Array.from(new Set((stockQuery.data ?? []).map((s) => s.size).filter(Boolean))) as string[],
[stockQuery.data],
);
const save = async (row: TyreSizeRow, value: string | null) => {
const key = `${row.brand}|${row.model}`;
setSavingKey(key);
try {
await setTyreSize({ brand: row.brand ?? "", model: row.model ?? "", tyre_size: value });
await qc.invalidateQueries({ queryKey: ["tyre-sizes"] });
} catch (e) {
toast.error(await apiErrorText(e, "Не удалось сохранить размер"));
} finally {
setSavingKey(null);
}
};
return (
<div className="min-h-screen bg-background flex flex-col">
<header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
<div className="flex items-center gap-2 p-3">
<Button variant="ghost" size="sm" className="-ml-2" onClick={() => navigate("/wh/tyres")}>
<ChevronLeft className="h-5 w-5" />
</Button>
<div>
<h1 className="text-base font-semibold">Штатные размеры</h1>
<p className="text-xs text-muted-foreground">
заполнено {filled} из {rows.length}
</p>
</div>
</div>
</header>
<datalist id="tyre-sizes-known">
{known.map((s) => (
<option key={s} value={s} />
))}
</datalist>
<main className="flex-1 divide-y">
{sizesQuery.isLoading && <p className="p-4 text-sm text-muted-foreground">Загрузка</p>}
{rows.map((r) => {
const key = `${r.brand}|${r.model}`;
return <SizeRow key={key} row={r} saving={savingKey === key} onSave={(v) => save(r, v)} />;
})}
</main>
</div>
);
}
function SizeRow({
row,
saving,
onSave,
}: {
row: TyreSizeRow;
saving: boolean;
onSave: (value: string | null) => void;
}) {
const [draft, setDraft] = useState(row.tyre_size ?? "");
const dirty = (draft.trim() || null) !== (row.tyre_size ?? null);
return (
<div className="p-3 flex items-center gap-3">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">
{[row.brand, row.model].filter(Boolean).join(" ") || "—"}
</p>
<p className="text-xs text-muted-foreground">{row.cars_count} авто</p>
</div>
<input
list="tyre-sizes-known"
placeholder="225/65/17"
value={draft}
onChange={(e) => setDraft(e.target.value)}
className="w-32 rounded-md border border-input bg-background px-2 py-1.5 text-sm"
/>
<Button
size="sm"
variant={dirty ? "default" : "ghost"}
disabled={saving || !dirty}
onClick={() => onSave(draft.trim() || null)}
>
{saving ? "…" : <Check className="h-4 w-4" />}
</Button>
</div>
);
}
@@ -1,502 +0,0 @@
/**
* Выдача резины — экран кладовщика у подъёмника.
*
* Осенью через него проходит весь парк, поэтому всё построено вокруг скорости:
* выбрал машину → приложение само подсказало штатный размер и остаток → три
* кнопки состояния → выдал. Один запрос за контекстом вместо трёх — телефон у
* подъёмника работает по слабой связи.
*
* Главное правило: пока не сказано, что случилось с предыдущим комплектом,
* новый не выдаётся. Сервер это тоже проверяет (409), здесь просто не даём
* дойти до отказа.
*/
import { useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { ChevronLeft, Circle, History, Ruler, Search } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { searchCars, type CarBrief } from "@/api/repairsCreate";
import {
apiErrorText,
getTyreContext,
issueTyres,
TYRE_GRADE_LABEL,
type TyreClose,
type TyreContext,
type TyreGrade,
type TyreStockRow,
} from "@/api/warehouse";
const GRADES: TyreGrade[] = ["good", "season", "worn"];
const CLOSE_LABEL: Record<TyreClose["action"], string> = {
returned: "Вернули на склад",
scrapped: "Списали",
lost: "Не найден",
};
function fmtDate(iso: string | null): string {
if (!iso) return "—";
const d = new Date(iso);
return Number.isNaN(d.getTime())
? iso
: new Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(d);
}
/** Сколько дней комплект отходил — по этому видно, доездил он сезон или месяц. */
function daysOn(iso: string): number {
const d = new Date(iso).getTime();
return Number.isNaN(d) ? 0 : Math.max(0, Math.round((Date.now() - d) / 86_400_000));
}
/** Подпись кнопки выдачи. «Комплект» — только когда колёс действительно четыре:
* с тех пор как выдавать можно поштучно, на одной покрышке эта подпись врала. */
function issueLabel(qty: number, addToOpen: boolean): string {
const noun = qty === 1 ? "покрышку" : "покрышки";
if (addToOpen) return `Доложить ${qty} ${noun}`;
if (qty === 4) return "Выдать комплект";
return `Выдать ${qty} ${noun}`;
}
export default function TyresPage() {
const navigate = useNavigate();
const [sp, setSp] = useSearchParams();
const carId = sp.get("car") ? Number(sp.get("car")) : null;
return (
<div className="min-h-screen bg-background flex flex-col">
<header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
<div className="flex items-center justify-between p-3">
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
className="-ml-2"
onClick={() => (carId ? setSp({}, { replace: true }) : navigate("/"))}
>
<ChevronLeft className="h-5 w-5" />
</Button>
<h1 className="text-base font-semibold">Выдача резины</h1>
</div>
<div className="flex gap-1">
<Button variant="ghost" size="sm" onClick={() => navigate("/wh/tyres/sizes")}>
<Ruler className="h-4 w-4 mr-1" />
Размеры
</Button>
<Button variant="ghost" size="sm" onClick={() => navigate("/wh/tyres/journal")}>
<History className="h-4 w-4" />
</Button>
</div>
</div>
</header>
{carId ? (
<IssueForm carId={carId} onDone={() => setSp({}, { replace: true })} />
) : (
<CarPicker onPick={(id) => setSp({ car: String(id) }, { replace: true })} />
)}
</div>
);
}
// ── Выбор машины ───────────────────────────────────────────────────────────
function CarPicker({ onPick }: { onPick: (carId: number) => void }) {
const [q, setQ] = useState("");
const [cars, setCars] = useState<CarBrief[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
let cancelled = false;
setLoading(true);
const t = setTimeout(async () => {
try {
const list = await searchCars(q);
if (!cancelled) setCars(list);
} catch {
if (!cancelled) setCars([]);
} finally {
if (!cancelled) setLoading(false);
}
}, 200);
return () => {
cancelled = true;
clearTimeout(t);
};
}, [q]);
return (
<>
<div className="px-3 py-3 border-b">
<div className="relative">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
autoFocus
placeholder="Госномер…"
value={q}
onChange={(e) => setQ(e.target.value)}
className="pl-8"
/>
</div>
</div>
<main className="flex-1 divide-y">
{loading && <p className="p-4 text-sm text-muted-foreground">Загрузка</p>}
{!loading && cars.length === 0 && (
<p className="p-4 text-sm text-muted-foreground">Ничего не нашлось</p>
)}
{cars.map((c) => (
<button
key={c.id}
onClick={() => onPick(c.id)}
className="w-full text-left p-3 active:bg-muted flex items-baseline gap-3"
>
<span className="font-mono font-semibold">{c.plate ?? "—"}</span>
<span className="text-sm text-muted-foreground">
{[c.brand, c.model].filter(Boolean).join(" ")}
</span>
</button>
))}
</main>
</>
);
}
// ── Выдача ─────────────────────────────────────────────────────────────────
function IssueForm({ carId, onDone }: { carId: number; onDone: () => void }) {
const ctxQuery = useQuery({
queryKey: ["tyre-ctx", carId],
queryFn: () => getTyreContext(carId),
staleTime: 0,
});
const ctx: TyreContext | undefined = ctxQuery.data;
const [partId, setPartId] = useState<number | null>(null);
const [qty, setQty] = useState(4);
const [grade, setGrade] = useState<TyreGrade>("good");
const [closeAction, setCloseAction] = useState<TyreClose["action"] | null>(null);
const [closeGrade, setCloseGrade] = useState<TyreGrade>("season");
const [comment, setComment] = useState("");
const [saving, setSaving] = useState(false);
const [showAll, setShowAll] = useState(false);
const [addToOpen, setAddToOpen] = useState(false);
// Ключ идемпотентности живёт, пока форма открыта: ретрай после обрыва связи
// должен попасть в ТУ ЖЕ выдачу, а не создать вторую.
const [idemKey] = useState(() => crypto.randomUUID());
// Подставляем подсказанный размер, как только пришёл контекст.
useEffect(() => {
if (!ctx || partId !== null) return;
const best = ctx.stock.find((s) => (s.fits || s.suggested) && s.qty > 0);
if (best) setPartId(best.part_id);
}, [ctx, partId]);
// По умолчанию показываем ТОЛЬКО подходящее этой машине — иначе кладовщик
// выбирает размер из девятнадцати позиций глазами. Если применимость по
// машине не заполнена, фильтровать нечем: прятать правильную резину по
// незнанию хуже, чем показать лишнюю (то же правило, что у подбора запчастей).
const fitting = useMemo(
() => (ctx ? ctx.stock.filter((s) => s.fits || s.suggested) : []),
[ctx],
);
const visibleStock = showAll || !ctx?.fit_known ? (ctx?.stock ?? []) : fitting;
if (ctxQuery.isLoading) {
return <main className="p-4 text-sm text-muted-foreground">Загрузка</main>;
}
if (!ctx) {
return <main className="p-4 text-sm text-destructive">Не удалось загрузить машину</main>;
}
const openSet = ctx.open_set;
// «Доложить» — когда старые колёса остаются на машине, а добавляется ещё
// одно-два. Закрывать комплект ради этого нельзя: «списали» врёт на живой
// резине, «вернули» приходует на склад то, что с машины не снимали.
const needClose = openSet !== null && !addToOpen && closeAction === null;
const chosen = ctx.stock.find((s) => s.part_id === partId) ?? null;
const submit = async () => {
if (partId === null) {
toast.error("Выберите размер");
return;
}
setSaving(true);
try {
await issueTyres(
{
car_id: carId,
part_id: partId,
qty,
grade,
comment: comment.trim() || null,
add_to_open: addToOpen,
close:
!addToOpen && closeAction
? {
action: closeAction,
grade: closeAction === "returned" ? closeGrade : undefined,
}
: null,
},
idemKey,
);
toast.success(
`${addToOpen ? "Доложено" : "Выдано"} ${qty} шт · ${ctx.car_number ?? ""}`.trim(),
);
onDone();
} catch (e) {
toast.error(await apiErrorText(e, "Не удалось выдать резину"));
setSaving(false);
}
};
return (
<main className="flex-1 pb-28">
{/* Машина и арендатор */}
<section className="p-3 border-b">
<div className="flex items-baseline gap-3">
<span className="font-mono text-lg font-semibold">{ctx.car_number ?? "—"}</span>
<span className="text-sm text-muted-foreground">
{[ctx.brand, ctx.model].filter(Boolean).join(" ")}
</span>
</div>
<p className="text-sm text-muted-foreground mt-0.5">
{ctx.driver_fio ? `Арендатор: ${ctx.driver_fio}` : "Арендатор не определён"}
</p>
{ctx.suggested_size ? (
<p className="text-sm mt-1">
Штатный размер: <span className="font-semibold">{ctx.suggested_size}</span>
</p>
) : (
<p className="text-sm text-muted-foreground mt-1">
Штатный размер модели не задан укажите его в разделе «Размеры», и подсказка появится.
</p>
)}
</section>
{/* Предыдущий комплект — закрыть обязательно */}
{openSet && (
<section className="p-3 border-b bg-amber-50 dark:bg-amber-950/30">
<h2 className="text-sm font-semibold">На машине уже есть комплект</h2>
<p className="text-sm text-muted-foreground mt-0.5">
{openSet.size ?? openSet.part_name} · {openSet.qty} шт · выдан {fmtDate(openSet.issued_at)}
{` (${daysOn(openSet.issued_at)} дн.)`}
{openSet.grade_out ? ` · при выдаче ${TYRE_GRADE_LABEL[openSet.grade_out].toLowerCase()}` : ""}
</p>
{openSet.additions && openSet.additions.length > 0 && (
<p className="text-xs text-muted-foreground mt-0.5">
из них доложено:{" "}
{openSet.additions
.map((a) => `${a.qty} шт ${fmtDate(a.created_at)}`)
.join(", ")}
</p>
)}
{/* Развилка: доложить к тем колёсам или заменить их целиком. */}
<div className="grid grid-cols-2 gap-2 mt-2">
<Button
variant={addToOpen ? "default" : "outline"}
size="sm"
onClick={() => setAddToOpen(true)}
>
Доложить
</Button>
<Button
variant={!addToOpen ? "default" : "outline"}
size="sm"
onClick={() => setAddToOpen(false)}
>
Заменить
</Button>
</div>
{addToOpen ? (
<p className="text-xs text-muted-foreground mt-2">
Комплект остаётся тем же, колёса добавятся к нему. Размер должен совпадать.
</p>
) : (
<>
<p className="text-sm mt-3 mb-1">Что со старым?</p>
<div className="grid grid-cols-3 gap-2">
{(Object.keys(CLOSE_LABEL) as TyreClose["action"][]).map((a) => (
<Button
key={a}
variant={closeAction === a ? "default" : "outline"}
size="sm"
onClick={() => setCloseAction(a)}
>
{CLOSE_LABEL[a]}
</Button>
))}
</div>
</>
)}
{!addToOpen && closeAction === "returned" && (
<div className="mt-3">
<p className="text-sm mb-1">Состояние снятой резины</p>
<GradePicker value={closeGrade} onChange={setCloseGrade} />
<p className="text-xs text-muted-foreground mt-1">
Вернётся на склад отдельной партией с этой оценкой.
</p>
</div>
)}
</section>
)}
{/* Что выдаём */}
<section className="p-3 border-b">
<div className="flex items-baseline justify-between mb-2">
<h2 className="text-sm font-semibold">Что выдаём</h2>
{ctx.fit_known && (
<span className="text-xs text-muted-foreground">
{showAll ? `все размеры (${ctx.stock.length})` : `подходит: ${fitting.length}`}
</span>
)}
</div>
{!ctx.fit_known && (
<p className="text-xs text-muted-foreground mb-2">
Для этой модели не отмечено, какая резина подходит, показаны все размеры.
Отметить можно в карточке позиции на складе.
</p>
)}
<div className="space-y-1">
{visibleStock.length === 0 && (
<p className="text-sm text-muted-foreground">На складе нет резины.</p>
)}
{visibleStock.map((s) => (
<StockRow
key={s.part_id}
row={s}
selected={partId === s.part_id}
onSelect={() => setPartId(s.part_id)}
/>
))}
</div>
{ctx.fit_known && (
<Button
variant="ghost"
size="sm"
className="mt-1"
onClick={() => setShowAll((v) => !v)}
>
{showAll
? `Только подходящие (${fitting.length})`
: `Показать все размеры (${ctx.stock.length})`}
</Button>
)}
{chosen && chosen.qty < qty && (
<p className="text-sm text-amber-700 dark:text-amber-500 mt-2">
На складе {chosen.qty} шт склад уйдёт в минус на {qty - chosen.qty}. Выдать можно.
</p>
)}
</section>
{/* Количество и состояние */}
<section className="p-3 border-b">
<p className="text-sm mb-1">Сколько покрышек</p>
{/* Поштучно, а не только комплектом: в переобувку часто уходит одно-два
колеса — порезали боковину, поймали грыжу. Раньше выбор был 2/4/5 и
под такой случай не подходил (задача 4684). */}
<div className="flex gap-2">
{[1, 2, 3, 4].map((n) => (
<Button
key={n}
variant={qty === n ? "default" : "outline"}
size="sm"
className="flex-1"
onClick={() => setQty(n)}
>
{n}
</Button>
))}
</div>
<p className="text-sm mt-3 mb-1">Состояние выдаваемой резины</p>
<GradePicker value={grade} onChange={setGrade} />
<Input
className="mt-3"
placeholder="Комментарий (необязательно)"
value={comment}
onChange={(e) => setComment(e.target.value)}
/>
</section>
{/* Кнопка выдачи */}
<div className="fixed bottom-0 left-0 right-0 border-t bg-background p-3">
<Button className="w-full" disabled={saving || needClose || partId === null} onClick={submit}>
{saving
? "Выдаём…"
: needClose
? "Сначала выберите: доложить или заменить"
: issueLabel(qty, addToOpen)}
</Button>
</div>
</main>
);
}
function GradePicker({
value,
onChange,
}: {
value: TyreGrade;
onChange: (g: TyreGrade) => void;
}) {
return (
<div className="grid grid-cols-3 gap-2">
{GRADES.map((g) => (
<Button
key={g}
variant={value === g ? "default" : "outline"}
size="sm"
onClick={() => onChange(g)}
>
{TYRE_GRADE_LABEL[g]}
</Button>
))}
</div>
);
}
function StockRow({
row,
selected,
onSelect,
}: {
row: TyreStockRow;
selected: boolean;
onSelect: () => void;
}) {
const grades = (Object.keys(TYRE_GRADE_LABEL) as TyreGrade[])
.filter((g) => (row.by_grade[g] ?? 0) > 0)
.map((g) => `${TYRE_GRADE_LABEL[g].toLowerCase()}: ${row.by_grade[g]}`);
return (
<button
onClick={onSelect}
className={`w-full text-left rounded-md border p-2.5 flex items-start gap-2 ${
selected ? "border-primary bg-primary/5" : "border-border"
}`}
>
<Circle
className={`h-4 w-4 mt-0.5 shrink-0 ${selected ? "fill-primary text-primary" : "text-muted-foreground"}`}
/>
<span className="flex-1 min-w-0">
<span className="flex items-baseline gap-2 flex-wrap">
<span className="font-semibold">{row.size ?? row.name}</span>
{(row.fits || row.suggested) && (
<span className="text-xs rounded px-1.5 py-0.5 bg-primary/10 text-primary">
{row.fits ? "подходит" : "штатный"}
</span>
)}
<span className={`text-sm ${row.qty > 0 ? "text-muted-foreground" : "text-destructive"}`}>
{row.qty} шт
</span>
</span>
<span className="block text-xs text-muted-foreground truncate">
{[grades.join(" · "), row.places.join(", ")].filter(Boolean).join(" — ") || row.name}
</span>
</span>
</button>
);
}
@@ -1,199 +0,0 @@
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);
});
});
@@ -1,245 +0,0 @@
/**
* Разбор проведённой инвентаризации в человеческие итоги.
*
* Вынесено из экрана отдельным модулем ради двух вещей: логику «во что попала
* строка» можно проверить тестом без рендера, а формулировки лежат в одном
* месте — их правят чаще, чем вёрстку.
*
* Бэкенд отдаёт только коды (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,
};
}