Admin Panel — Full Design

Overview

Расширение админ-панели тремя разделами: дашборд, управление пользователями, CRUD справочников. Реализация в порядке: дашборд → пользователи → справочники.

Navigation

Плоский сайдбар, 4 пункта:

Пункт	Route	Иконка
Дашборд	/admin	i-heroicons-chart-bar-square
Объявления	/admin/products	i-heroicons-shopping-bag + бейдж pending
Пользователи	/admin/users	i-heroicons-users
Справочники	/admin/references	i-heroicons-book-open

Все страницы — SPA (ssr: false), middleware: admin.

Routes

Route	Layout	Описание
/admin	admin	Дашборд (заменяет редирект)
/admin/products	admin	Модерация (существует)
/admin/products/[id]	admin	Детали товара (существует)
/admin/users	admin	Список пользователей
/admin/users/[id]	admin	Профиль пользователя
/admin/references	admin	Справочники с табами

1. Dashboard (/admin)

Data Sources

• GET /admin/stats — total_users, total_products, products_by_status, new_users_today, new_products_today
• GET /admin/stats/users — total, active, verified_email, by_account_type, new_this_week, new_this_month

Без поллинга. Обновление при переходе на страницу.

Layout

Верхний ряд — 4 карточки-счётчика:

1. Всего пользователей (total_users) + подпись "новых сегодня: N"
2. Всего объявлений (total_products) + подпись "новых сегодня: N"
3. На модерации (pending count) — кликабельная → /admin/products?status=pending
4. Черновики (draft count)

Нижний ряд — 2 блока:

Блок "Пользователи":

• Активных: N
• Подтвердили email: N из N
• По типу: personal: N, business: N
• Новых за неделю / за месяц

Блок "Товары по статусам":

• Горизонтальный список кликабельных бейджей (draft, pending, active, ...)
• Клик → /admin/products?status=...

2. User Management

List (/admin/users)

Таблица: Аватар + Имя, Email, Тип (personal/business), Email verified (иконка), Статус (active/blocked), Дата регистрации.

Фильтры (над таблицей):

• Поиск по email/имени (debounce)
• Тип аккаунта (select: все / personal / business)
• Статус (select: все / active / blocked)

Курсорная пагинация, кнопка "Загрузить ещё".

Profile (/admin/users/[id])

• Аватар, имя, email, телефон
• Тип аккаунта, дата регистрации
• Статус email верификации
• Гео (город, район, метро)
• Статистика: объявлений, рейтинг, отзывов
• Business-профиль (company_name, inn, address) — если business

Actions

• Заблокировать / Разблокировать через PUT /admin/users/{id} с { is_active: false/true }
• Модалка подтверждения (без причины — MVP)

3. References (/admin/references)

Одна страница с 3 табами.

Tab: Автомобили

3 колонки (каскад): Марки → Модели → Поколения.

• Клик по марке → загружает модели
• Клик по модели → загружает поколения
• Каждый элемент: строка с названием + edit/delete иконки
• Создание/редактирование через модалку
• Удаление с подтверждением

API:

• GET /store/cars/makes, POST/PUT/DELETE /admin/cars/makes/{id}
• GET /store/cars/makes/{id}/models, POST/PUT/DELETE /admin/cars/models/{id}
• GET /store/cars/models/{id}/generations, POST/PUT/DELETE /admin/cars/generations/{id}

Поля модалок:

• Марка: name, slug, logo_url, is_popular
• Модель: name, slug, make_id
• Поколение: name, code, year_from, year_to, steering

Tab: Категории

Плоский список с отступами по уровню вложенности (через parent_id). Фильтр по типу: part / condition / attribute.

API:

• GET /store/categories, POST/PUT/DELETE /admin/categories/{id}

Поля модалки: name, slug, icon, parent_id (select), category_type, sort_order.

Tab: Гео

Каскад: Регионы → Города → Районы + Метро (подсписок города).

API:

• GET /store/geo/regions, POST/PUT/DELETE /admin/geo/regions/{id}
• GET /store/geo/regions/{id}/cities, POST/PUT/DELETE /admin/geo/cities/{id}
• GET /store/geo/cities/{id}/districts, POST/PUT/DELETE /admin/geo/districts/{id}
• GET /store/geo/cities/{id}/metro, POST/PUT/DELETE /admin/geo/metro-stations/{id}

Поля модалок:

• Регион: name, slug
• Город: name, slug, region_id
• Район: name, slug, city_id
• Метро: name, line, line_color, city_id

Mobile: каскадные колонки → вертикальный стек.

Architecture (FSD)

New Features

features/admin-dashboard/
  composables/useAdminStats.ts
  ui/StatCard.vue

features/admin-users/
  composables/useAdminUsers.ts
  ui/UserBlockAction.vue

features/admin-references/
  composables/useAdminCars.ts
  composables/useAdminCategories.ts
  composables/useAdminGeo.ts
  ui/ReferenceList.vue
  ui/ReferenceFormModal.vue

New Pages

pages/admin/
  index.vue                   # Dashboard (replaces redirect)
  users/
    index.vue
    [id].vue
  references.vue

Imports

• features/admin-* → shared, entities (car, category, geo, user)
• Между admin-фичами импорты запрещены (разные слайсы)
• Переиспользуемые UI-элементы (StatCard, ReferenceList) живут внутри своих фич

UX Details

Загрузка: skeleton для карточек дашборда, overlay-спиннер для таблиц, disabled-кнопки при запросах.

Ошибки: toast через useToast() (зелёный/красный). Inline-ошибки в модалках (Zod-валидация).

Удаление: модалка подтверждения. Ошибка от бэкенда (связанные записи) → toast.

Мобильная адаптация:

• Дашборд: 2 колонки → 1
• Таблица юзеров: карточный вид
• Справочники: вертикальный стек вместо колонок

Сайдбар: active state через NuxtLink exact-active-class.