food-market/docs/sprint7-progress.md

Sprint 7 — UX-полировка stage + демо-данные

Цель: https://test.admin.food-market.kz открывается → наполненные модули видны сразу, UI удобен (confirm на destructive, toast'ы, скелеты, empty-states, breadcrumbs, shortcuts).

Старт: 2026-05-29. Исполнитель: Claude Opus 4.7 (автономный режим).

Принципы

• Каждый пункт: build + тесты + ~/deploy-stage.sh + Playwright-скриншот retest на стенде + коммит + [x] в этом доке.
• НЕ трогать: global.json, прод-стек (admin.food-market.kz), POS WPF.
• Команды для теста UI на стенде: cd src/food-market.web && pnpm dev локально к API; либо Playwright против https://test.admin.food-market.kz после деплоя.

Чек-лист

• 1. Demo-data seeder для stage — POST /api/admin/seed-demo + admin-кнопка «Заполнить демо-данными». 50 товаров / 5 групп / 10 контрагентов / 5 приёмок / 30 продаж / 1 опт / 1 списание / 1 перемещение / 1 инвентаризация. Идемпотентно (маркер DEMO-). E2E 5/5 ✓ на стейдже.
• 2. ConfirmDialog на destructive actions — общий <ConfirmDialog> + хук useConfirm(). Применён к 17 страницам + ProductImageGallery. Esc=cancel, focus-on-Cancel, tone='danger'|'warning'. Org-archive уже использует Modal с confirmation-name (не трогали). 2FA UI ещё не существует в web — пропущено. Скриншот стейджа: tests/e2e/reports/confirm-dialog-1780119970286.png.
• 3. Toast-система ошибок — собственная lib/toast.ts + <Toaster>. Axios interceptor: 4xx/5xx → error toast (humanizeError() читает ProblemDetails: errors.X[0] / detail / message / title). 401 — refresh-flow, без toast. Success — глобальный mutation onSuccess (через meta.successMessage): useCatalogMutations + 36 мутаций на doc-edit pages. Top-right, autoclose 5s, дедуп, ручное закрытие X. Скриншот: tests/e2e/reports/toast-error-*.png.
• 4. Loading skeletons — Skeleton.tsx экспортирует <Skeleton variant>, <TableSkeleton>, <FormSkeleton>. DataTable рендерит TableSkeleton при isLoading. 9 doc-edit pages + OrganizationSettingsPage показывают FormSkeleton пока тащат документ. DashboardPage график → Skeleton block. Скриншот: tests/e2e/reports/skeleton-table-*.png.
• 5. Empty states с CTA — EmptyState.tsx (icon + title + description + action/secondary). Применён к 14 list-страницам (Products/Counterparties/Enters/Losses/Transfers/Inventories/Demands/SupplierReturns/Supplies/RetailSales + 4 отчёта). Показывается только когда нет поиска/фильтров. Скриншот: tests/e2e/reports/empty-state-products-*.png.
• 6. Breadcrumbs — Reusable <Breadcrumbs items={[{label, to?}]}> (ChevronRight разделитель, последний item — semibold). Применён к 9 edit-страницам (Product + Supply/Enter/Loss/Transfer/Inventory/SupplierReturn/Demand/RetailSale). Дублирующая subtitle убрана. Скриншот: tests/e2e/reports/breadcrumbs-product-*.png.
• 7. Keyboard shortcuts — useShortcuts(map, enabled?) хук + <ShortcutsOverlay> (открывается клавишей ?). Поддерживает mod+s, одиночные клавиши скипают input/textarea. Edit (9 страниц): mod+s=save (через canSave), Esc=back-to-list. Гард !dialogProps.open чтобы Esc не воровал у ConfirmDialog. List (10 страниц): /=focus search (SearchBar теперь forwardRef), n=create new. ShortcutsOverlay смонтирован в AppLayout, ? всегда доступен.

Журнал

2026-05-29 — старт

• Stage-testing спринта 6 закрыт (docs/stage-testing-progress.md, 13 сценариев / 94/94 шага ✓).
• Создан этот файл, перехожу к пункту 1.

2026-05-30 — пункт 1 ✓

• DemoTenantSeeder + DemoSeedController + UI-секция «Демо-данные» в OrganizationSettingsPage.
• Идемпотентность через маркер Article startsWith "DEMO-".
• E2E stage-demo-seed (5 шагов) — green локально + на test.admin.food-market.kz (после deploy-stage.sh).
• Коммит: ad09b56 feat(stage): demo-data seeder для test.admin.food-market.kz.

2026-05-30 — пункт 2 ✓

• <ConfirmDialog> + хук useConfirm(). Button переведён на forwardRef.
• Применил к ProductEdit + 6 doc-edit + RetailSaleEdit + 8 list-pages + EmployeesPage + ProductImageGallery (всего 18 файлов).
• Esc=cancel, фокус на Cancel (Enter не подтверждает). Tone='danger'/'warning'.
• Скриншот стейджа: tests/e2e/reports/confirm-dialog-*.png — диалог рендерится, Esc-закрытие работает.
• Коммит: 17a6da2 feat(web): ConfirmDialog компонент + useConfirm hook.

2026-05-30 — пункт 3 ✓

• lib/toast.ts + <Toaster>: top-right, autoclose 5s, дедуп, ручное закрытие, role=alert.
• Axios interceptor (src/lib/api.ts): 4xx/5xx → toast.error c humanizeError (ProblemDetails-aware), 401 — refresh-flow без шума.
• Global mutation onSuccess (App.tsx) подтягивает meta.successMessage.
• useCatalogMutations: create/update/remove получили дефолтные тексты — автоматически работает на всех list-pages, использующих хук.
• Doc-edit pages: 36 мутаций (save/post/unpost/remove) получили meta.
• Скриншот: tests/e2e/reports/toast-error-1780120703501.png — toast «Не найдено / Not Found» рендерится top-right.
• Коммит: 27ce8dd feat(web): toast-система.

2026-05-30 — пункт 4 ✓

• Skeleton.tsx: базовый <Skeleton variant='line'|'block'|'circle'> + готовые шаблоны <TableSkeleton>, <FormSkeleton>.
• DataTable: при isLoading рендерит 8 строк скелета по числу колонок (псевдослучайная ширина для естественности).
• Edit-pages: 9 doc-форм + OrganizationSettingsPage показывают <FormSkeleton /> при existing.isLoading.
• DashboardPage: график выручки — Skeleton block h-72.
• Скриншот: tests/e2e/reports/skeleton-table-1780121234164.png — shimmer на /catalog/products при искусственной 3-сек задержке через page.route().
• Коммит: faa1352 feat(web): loading skeletons.

2026-05-30 — пункт 5 ✓

• EmptyState.tsx: 16×16 круглая иконка из Lucide, заголовок, описание, основная кнопка + secondary link.
• 10 list-страниц + 4 reports: Products / Counterparties / Enters / Losses / Transfers / Inventories / Demands / SupplierReturns / Supplies / RetailSales + 4 отчёта (Sales / Stock / Profit / Abc).
• Тексты — объясняют что за сущность («Списания фиксируют выбытие — просрочка, брак»). CTA на навигацию /sales/demands/new, на Counterparties — открыть create-modal.
• Гард: показываем только когда !search && filters.empty. На фильтрованном результате — обычный «Нет данных».
• Скриншот: tests/e2e/reports/empty-state-products-1780122048413.png.
• Коммит: 8d53292 feat(web): Empty states с CTA.

2026-05-30 — пункт 6 ✓

• Breadcrumbs.tsx: ChevronRight разделитель, последний item — semibold/не кликабельный.
• 9 edit-страниц: Product (Каталог / Товары / ), Supply (Закупки / Приёмки / ), Enter/Loss/Transfer/Inventory (Остатки / ...), SupplierReturn (Закупки / Возвраты поставщикам / ), Demand (Продажи / Оптовые отгрузки / ), RetailSale (Продажи / Чеки / ).
• Дублирующая subtitle «Черновик — товар не списан…» убрана; зелёный бейдж «Проведён <дата>» остаётся.
• Скриншот: tests/e2e/reports/breadcrumbs-product-*.png.
• Коммит: 821bc4e feat(web): Breadcrumbs на edit-страницах.

2026-05-30 — пункт 7 ✓

• useShortcuts(map, enabled?): 'mod+s' (Ctrl/Cmd), бэр-клавиши скипают input/textarea/contenteditable, preventDefault автоматический.
  • Фикс: бэр-клавиши матчатся только по e.key, без проверки модификаторов — это нужно для '?' (вводится через Shift+/).
• 9 edit-pages: mod+s = save (через canSave + !save.isPending), Escape = navigate(list); guard !dialogProps.open чтобы не конфликтовать с ConfirmDialog.
• 10 list-pages: '/' = focus search (SearchBar теперь forwardRef), 'n' = create new.
• <ShortcutsOverlay> смонтирован в AppLayout — '?' открывает модал со списком всех шорткатов.
• Скриншот overlay: tests/e2e/reports/shortcuts-overlay-1780123856118.png.
• Коммиты: 76cbe78 feat(web): keyboard shortcuts, c2ebbcc fix(web): useShortcuts — бэр-клавиши.

Итог

Все 7 пунктов ✓. После последнего деплоя:

• tests/e2e/run.sh stage-smoke --api-only → 5/5 ✓
• tests/e2e/run.sh stage-demo-seed --api-only → 5/5 ✓
• Скриншоты подтверждают визуально: ConfirmDialog, Toaster, Skeleton, EmptyState, Breadcrumbs, ShortcutsOverlay.

Stage URL: https://test.admin.food-market.kz. Свежий signup → нажать «Заполнить демо-данными» в Настройках орги → все модули наполнены.