Админ-панель магазина: TemplateForge

Задача

TemplateForge - магазин Notion-шаблонов из соседнего демо: десять шаблонов, витрина, корзина, оплата. Эта панель - тот же магазин с другой стороны прилавка. Владелец открывает её утром и хочет за минуту понять, сколько заработал, что покупают, кто вернулся за второй покупкой и не пора ли поменять цену. Компания вымышленная, задача типовая. Это рабочий инструмент, а не витрина: плотность цифр и читаемость статуса важнее «воздуха».

Отдельное требование: панель обязана сойтись с витриной. Это два независимых статических демо, общего кода и общего сервера между ними нет - сходятся они данными. Каталог, названия, категории и цены скопированы из проекта магазина дословно: если здесь Focus OS стоит $29, на витрине он тоже $29. Каталог закреплён тестом: десять id, названий, цен и категорий проверяются построчно.

Решение

Пять рабочих экранов - сводка, товары, заказы, покупатели, настройки - плюс вход и страница-дисклеймер. Next.js 15 со статическим экспортом, состояние в Zustand, бэкенда нет: всё считается в браузере.

• Сводка: восемь показателей за период - выручка, заказы, средний чек, конверсия, чистая выручка, посещения витрины, возвраты, покупатели. У каждого мини-диаграмма, у семи из восьми - ещё и сравнение с предыдущим периодом такой же длины. Если сравнивать не с чем, панель так и пишет, а не рисует «+100%».
• Период отчёта переключается в шапке: 7, 30 или 90 дней. Пересчитывается всё - от графика выручки до сегментов покупателей.
• Заказы: 1263 записи в наборе за 90 дней, фильтр по статусу со счётчиками, поиск по номеру, имени и почте, сортировка колонок, страницы по 20 строк. В карточке заказа - состав, история статуса по шагам и кнопка возврата.
• Возврат работает по правилу магазина: оплаченный заказ не старше 14 дней. Вне окна кнопка выключена, и рядом написана причина.
• Товары: каталог из десяти шаблонов с продажами и выручкой за период, фильтр по категории, карточка с двумя метками: редакторской (BESTSELLER, NEW) и вычисляемой «Новинкой».
• Покупатели: сегменты по числу заказов, недельные когорты возврата, разбор возвратов по шаблонам, таблица с поиском и сортировкой.
• Настройки: правка цен, справочник категорий, промокоды - включение, выключение и добавление нового кода с проверкой формата и размера скидки.
• Любое изменение подтверждается уведомлением с кнопкой «Отменить действие»: цена, метка, возврат и промокод откатываются одним кликом.

Детали, которые легко не заметить

• Данные детерминированы: собственный генератор с фиксированным зерном, «сейчас» - константа, а не текущее время. Тест сверяет набор данных побайтово - по длине и по sha256, поэтому скриншоты воспроизводятся точно.
• Последний столбец графика выручки подписан как неполный день: фиксированное «сейчас» - полдень, продаж в этом дне только за двенадцать часов. Без подписи график читался бы как обвал.
• Шаблон не попадает в заказ раньше своего появления в каталоге: Study Hub встречается с 15 июля, Thesis Track - с 8 августа.
• Сегменты покупателей считаются внутри выбранного периода, а не за всю историю магазина. При смене периода они пересчитываются, и это проговорено в интерфейсе.
• У недельных когорт доля вернувшихся падает к правому краю: у свежих покупателей было меньше времени вернуться. Подпись объясняет это под диаграммой, иначе график читался бы как падение удержания.
• Кнопка отката всегда ровно одна. Ревью нашло дефект: после двух действий подряд висели два уведомления с «Отменить», но обе кнопки откатывали только последнее. Теперь новое действие снимает кнопку со старых.
• Загрузка, пустота и ошибка вызываются параметром в адресе - чтобы состояния можно было снять и проверить. На сводке пустой период обнуляет KPI-плитки, а не только таблицу. Автопрогоном эти три состояния пока закрыты на экране настроек, остальные экраны - в ручных пунктах.
• Вход честно демонстрационный: логин и пароль подставлены в форму, проверка на клиенте, сессия живёт во вкладке. Панель показывает разграничение доступа, не изображая защиту.
• Юридическая гигиена демо: строка о демонстрационном характере в меню, отдельная страница-дисклеймер, запрет индексации в метаданных и в заголовках выкладки.
• Тема одна, тёмная - осознанно: мир этого магазина существует только в ней. Отдельной мобильной раскладки нет: панель рассчитана на 1440, 1024 и 768 пикселей, на этих ширинах и снята.

Что осталось

Автоматическая часть проверок пройдена целиком: сборка, типы, тесты и сценарный прогон по всем экранам. Четыре пункта тест-плана помечены как ручные и остаются за человеком: визуальная оценка кадров, форма добавления промокода, неверный пароль и выход из сессии, обход демо-состояний на остальных четырёх экранах.