Админ-панель для интернет-магазина «Коробки-оптом»

ОПИСАНИЕ

Полноценная админ-панель, надстроенная над уже существующим интернет-магазином картонной упаковки (Next.js 16 / React 19 / PostgreSQL). Это второй этап работы над проектом: к публичному сайту добавлен закрытый управляющий контур, который превращает магазин в полностью самостоятельно администрируемый продукт — владелец управляет каталогом, заказами, отзывами и всем контентом сайта без участия разработчика и без прямого доступа к базе данных. Весь раздел `/admin` закрыт серверным middleware (proxy): на каждый запрос к админке проверяется httpOnly-cookie с токеном; при отсутствии или несовпадении — редирект на страницу входа. Аутентификация — парольная (сравнение с переменной окружения ADMIN_PASSWORD), сессия живёт 7 дней в защищённой cookie с флагами httpOnly и sameSite=lax (защита от XSS и CSRF). Все страницы админки помечены force-dynamic — данные всегда актуальны, без статического кэша. Интерфейс построен как классический CRUD-дэшборд на серверных компонентах App Router с адаптивной боковой навигацией (фиксированный сайдбар на десктопе, выезжающее off-canvas-меню на мобильных). Главная страница-дэшборд параллельно (Promise.all) собирает сводку по всем разделам — количество товаров, заказов, отзывов — и выводит карточки с живыми счётчиками. Рядом с пунктами «Заказы» и «Отзывы» в сайдбаре отображаются бейджи непрочитанного: число новых заказов и отзывов, ожидающих модерации. Управление товарами — полный CRUD с генерацией URL-slug автоматической транслитерацией кириллицы в латиницу. Цены вводятся в рублях и хранятся в копейках (integer). Реализовано продвинутое управление галереей изображений: загрузка нескольких файлов сразу с предварительным сжатием в браузере (canvas, ресайз и перекодировка в JPEG до отправки), серверной нормализацией через sharp (поддержка Apple-формата HEIC/HEIF через heic-convert, авто-поворот по EXIF, mozjpeg) и хранением в БД как BYTEA. Картинками можно управлять прямо в форме — удалять, переупорядочивать стрелками, назначать главную. Лимит тела запроса поднят до 50 МБ для загрузки тяжёлых фото. Раздел заказов даёт ленту со серверной сортировкой (по дате, статусу, сумме) и раскрывающимися карточками. Непрочитанные заказы визуально подсвечиваются; «непрочитанность» вычисляется на стороне БД сложным SQL-условием — заказ считается непрочитанным, если админ его ещё не открывал ИЛИ если покупатель написал новое сообщение после последнего просмотра. При раскрытии карточки заказ автоматически помечается прочитанным. Внутри — состав заказа, контакты получателя, переключатель статуса жизненного цикла (новый → в обработке → отправлен → доставлен / отменён) и встроенный чат с покупателем с поллингом сообщений каждые 4 секунды; ответ админа одновременно помечает заказ прочитанным. Модерация отзывов — отдельная очередь: неодобренные отзывы поднимаются наверх и подсвечиваются, по каждому доступны действия «одобрить», «скрыть» и «удалить» с мгновенной инвалидацией публичных страниц товара. Отдельный пласт — управление контентом сайта без правок кода. Через формы админки редактируются главная страница (hero-заголовки), страница «О нас» (текст, динамические блоки статистики, принципов и контактов в JSON), список FAQ (с добавлением, удалением и переупорядочиванием вопросов) и общие настройки (название, описание, выбор цветовой темы из готовых пресетов). Все эти данные лежат в key-value-таблице настроек и сразу отражаются на публичном сайте. Технически вся запись данных реализована на Server Actions (без отдельного REST API): формы используют типизированное состояние useActionState (React 19), select-поля отправляются автоматически по изменению через requestSubmit, а после каждой мутации идёт точечная инвалидация затронутых маршрутов через revalidatePath, чтобы изменения немедленно появлялись и в админке, и на витрине. Каждое серверное действие повторно проверяет права администратора. Доступ к БД — через тот же пул соединений с параметризованными запросами (защита от SQL-инъекций) в изолированной схеме `corobki`.

ИСПОЛЬЗУЕМЫЕ ИНСТРУМЕНТЫ

• Next.js 16 (App Router)
• React 19
• React Server Components
• Server Actions
• Middleware (proxy)
• useActionState
• TypeScript
• PostgreSQL
• pg (node-postgres)
• SQL
• httpOnly-cookies
• Tailwind CSS v4
• Radix UI
• shadcn/ui
• lucide-react
• sharp
• heic-convert
• Canvas API
• FormData API
• Bun
• Biome
• Husky
• Git

РЕЗУЛЬТАТ

• К готовому интернет-магазину добавлен закрытый управляющий контур — владелец администрирует магазин полностью самостоятельно, без разработчика и без прямого доступа к БД
• Раздел /admin защищён серверным middleware: парольная аутентификация и проверка httpOnly-токена на каждый запрос, сессия на 7 дней с флагами sameSite/httpOnly (защита от XSS и CSRF)
• Реализован полный CRUD товаров с авто-транслитерацией кириллицы в URL-slug и ценами в целочисленных копейках
• Построено управление галереей изображений: мульти-загрузка, сжатие в браузере (Canvas), серверная нормализация через sharp + heic-convert, удаление, переупорядочивание и назначение главного фото
• Создан дэшборд со сводными метриками по всем разделам, собираемыми параллельно (Promise.all)
• Внедрена система бейджей непрочитанного в сайдбаре — новые заказы и отзывы на модерации считаются на стороне БД
• Реализована лента заказов с серверной сортировкой, подсветкой непрочитанных и авто-отметкой о прочтении при открытии
• Логика «непрочитанного заказа» вынесена в SQL-условие, учитывающее новые сообщения покупателя после последнего просмотра админом
• Добавлено управление жизненным циклом статусов заказа и встроенный чат с покупателем (поллинг каждые 4 секунды)
• Сделана очередь модерации отзывов с действиями одобрить / скрыть / удалить и мгновенной инвалидацией публичных страниц
• Реализовано редактирование всего контента сайта из админки (главная, «О нас», FAQ, тема, контакты) через key-value-хранилище настроек без правок кода
• Все мутации построены на типобезопасных Server Actions с проверкой прав и точечной инвалидацией кэша через revalidatePath
• Интерфейс адаптивен: фиксированный сайдбар на десктопе и выезжающее off-canvas-меню на мобильных