Переписаны модули, тесты, обработка ошибок

2026-03-10 21:08:25 +03:00
parent 878934e705
commit 144f200781
87 changed files with 4363 additions and 1792 deletions
@@ -1,166 +1,91 @@
 # ✨ Nashel — Frontend

-> **Next.js 15 · TypeScript · React · TailwindCSS · Shadcn/UI**
+> **Next.js 15 (App Router) · TypeScript · Tailwind CSS · Shadcn/UI · Zustand**

-Клиентская часть платформы **Nashel** — маркетплейса для поиска и найма профессиональных исполнителей. Реализован как современное SPA/SSR приложение с тёмной темой, интерактивной картой и богатым UX.
+Клиентская часть платформы **Nashel** — современного маркетплейса для поиска и найма профессиональных исполнителей. Приложение спроектировано как высокопроизводительное SPA/SSR решение с глубокой проработкой пользовательского опыта, адаптивным дизайном и интерактивными картами.

 ---

-## 🎯 Какую проблему решает Nashel
+## 🎯 Преимущества для пользователя

-Клиенты тратят часы на поиск надёжных мастеров. Исполнители теряют заказы из-за отсутствия нормального онлайн-присутствия.
+**Клиент:**
+- **Мгновенный поиск:** Находите мастеров прямо на карте в своем районе.
+- **Инфо-карты:** Подробные страницы услуг с галереями работ, честными ценами и атрибутами.
+- **Безопасный заказ:** Оформляйте сделки и отслеживайте их статус в реальном времени.

-**Nashel** соединяет их мгновенно:
- Ищи мастера прямо на карте рядом с домом
- Смотри фото работ, цены и описание услуги
- Нажми одну кнопку — и выйди на связь с исполнителем
+**Исполнитель:**
+- **Цифровой кабинет:** Удобное управление услугами, расписанием и статусом доступности.
+- **Галереи работ:** Загрузка и управление фотографиями с поддержкой Drag-and-Drop.
+- **Система рейтинга:** Накапливайте отзывы и повышайте доверие клиентов.

 ---

-## 👤 Роли пользователей
-
-| Роль | Возможности |
-|------|-------------|
-| **Клиент** | Поиск услуг, просмотр профилей, карта |
-| **Кандидат в мастера** | Личный кабинет, создание профиля исполнителя |
-| **Мастер** | Полный кабинет: управление услугами, расписание, статус |
-| **Компания** | Расширенный кабинет с представлением от юрлица |
-
---
-
-## 🗂️ Структура проекта
-
-```
-src/
-├── app/                    # Страницы (Next.js App Router)
-│   ├── (auth)/             # Регистрация, вход
-│   ├── dashboard/          # Личный кабинет исполнителя
-│   │   ├── offers/         # Управление услугами: список, создание, редактирование
-│   │   ├── profile/        # Профиль, аватар, локация, расписание, компетенции
-│   │   └── settings/       # Настройки аккаунта
-│   ├── offers/[id]/        # Публичная страница просмотра услуги
-│   ├── search/             # Поиск услуг + карта
-│   └── layout.tsx          # Общий layout с навигацией
-│
-├── components/             # Переиспользуемые компоненты
-│   ├── ui/                 # Shadcn UI компоненты (Button, Card, Dialog и т.д.)
-│   ├── ImageUploader/      # Компонент загрузки, перетаскивания и удаления фото
-│   └── ...
-│
-└── shared/
-    ├── api/                # Функции для обращения к API (catalog, search, auth)
-    └── store/              # Zustand: геолокация пользователя
-```
-
---
-
-## ✅ Что реализовано
-
-### Аутентификация
- Регистрация и вход (JWT в localStorage)
- Защищённые маршруты
- Сохранение сессии
-
-### Карта и поиск
- Интерактивная карта на `React Leaflet` (без SSR)
- Поиск по **названию услуги**, **описанию** и **компетенциям**
- Результаты поиска появляются по мере ввода (от 2 символов)
- Маркеры исполнителей на карте с всплывающими подсказками
- Отображение расстояния до исполнителя (м/км)
- Сортировка: «Идеально подходят», «Ближайшие», «Лучший рейтинг»
- Фильтры поиска: по названию, описанию, компетенциям
- Отображение услуги **приоритетнее** исполнителя (если нашлась услуга — исполнитель отдельно не показывается)
-
-### Карточка услуги в поиске
- Большое фото с hover-анимацией (scale + fade)
- Цена в рублях (₽), расстояние с иконкой
- Краткое описание услуги
- Роль и статус исполнителя (Мастер / Кандидат в мастера / Компания)
- Кнопка «Просмотреть услугу» — открывает страницу в новой вкладке
-
-### Публичная страница услуги (`/offers/[id]`)
- Большой блок с фото-галереей (карусель):
-  - Навигация мышью (стрелки видны при наведении)
-  - Навигация клавишами ← →
-  - Счётчик фото (1/N)
-  - Превью-ряд внизу (миниатюры) с кольцевой подсветкой активного
- Блок описания с аккуратным заголовком
- Блок характеристик услуги (атрибуты ключ-значение) — под описанием
- Правая колонка: карточка исполнителя (имя, роль, рейтинг, документы)
- Блок «Готовы заказать?» с кнопкой «Связаться с исполнителем»
- Блок похожих услуг из категории (заглушка, готовится к наполнению)
- Адаптивная верстка: мобильная → десктопная
-
-### Профиль исполнителя (личный кабинет)
- Загрузка аватара (превью + сохранение)
- Редактирование описания, компетенций (теги с поиском)
- Установка рабочего расписания по дням недели
- Переход в роль исполнителя
- Смена пароля
-
-### Управление услугами
- Список моих услуг с фото-обложкой
- Создание и редактирование услуги:
-  - **Блок загрузки фото** (первым, до 10 шт., каждое ≤ 5 МБ)
-  - Drag-and-drop для перестановки фото мышью
-  - Кнопка удаления под каждым фото
-  - Первое фото = обложка услуги
-  - Название, описание, цена (тип + сумма), атрибуты
- Приостановка услуги (пауза)
- Удаление услуги (soft delete)
- Приостановленные и удалённые услуги не видны в поиске
-
---
-
-## 🚀 Запуск
-
-```bash
-cd nashel-frontend
-
-# Установить зависимости
-npm install
-
-# Запустить dev-сервер
-npm run dev
-```
-
-Приложение доступно по адресу: `http://localhost:3000`
-
-### Переменные окружения
-
-Создать файл `.env.local`:
-
-```env
-NEXT_PUBLIC_API_URL=http://localhost:5000
-```
-
---
-
-## 🔧 Технологии
+## 🛠️ Технологический стек

 | Технология | Назначение |
 |------------|------------|
-| **Next.js 15** (App Router) | SSR/SPA, маршрутизация |
-| **TypeScript** | Типизация |
-| **Tailwind CSS** | Стилизация |
-| **Shadcn/UI** | Готовые UI компоненты |
-| **Zustand** | Глобальное состояние (геолокация) |
-| **React Leaflet** | Карта (с отключённым SSR) |
-| **React Hook Form + Zod** | Формы и валидация |
-| **Axios** | HTTP-запросы к API |
-| **Lucide React** | Иконки |
-| **Sonner** | Тосты/уведомления |
+| **Next.js 15** | Фреймворк для SSR, маршрутизации и SEO-оптимизации |
+| **Tailwind CSS** | Адаптивная верстка и дизайн-система |
+| **Shadcn/UI** | Высококачественные доступные компоненты интерфейса |
+| **Zustand** | Глобальное состояние (геолокация, сессии) |
+| **React Leaflet** | Интерактивная карта (с динамической подгрузкой) |
+| **Axios** | Интеграция с API (авторизация, заказы, репутация) |
+| **React Hook Form** | Комплексная валидация форм (Zod) |
+
+---
+
+## ✅ Текущая реализация
+
+### 1. Поиск и Интерактивность
+- **Карта:** Отображение маркеров исполнителей, расчет дистанции до пользователя в реальном времени.
+- **Smart Search:** Поиск по заголовкам, описаниям и компетенциям с мгновенной фильтрацией.
+- **Сортировка:** По расстоянию, релевантности и качеству предложений.
+
+### 2. Страница Услуги (Offer Page)
+- **Rich Gallery:**
+  - Продвинутая карусель с поддержкой клавиатуры (← →).
+  - Превью-ряд с подсветкой активного фото.
+  - Hover-эффект увеличения и плавные переходы.
+- **Детализация:** Полный список атрибутов услуги, карточка исполнителя, статус верификации.
+
+### 3. Личный кабинет (Dashboard)
+- **Управление Офферами:**
+  - Создание услуг с мультизагрузкой фото (до 10 шт).
+  - Интерактивный порядок фото (Drag-and-Drop).
+  - Пауза и мягкое удаление услуг.
+- **Профиль:** Смена аватара, настройка сложных расписаний, управление компетенциями.
+- **Orders API:** Полная интеграция с бэкенд-модулем заказов (принятие, завершение, споры).
+
+---
+
+## 🚀 Быстрый старт
+
+1. Перейдите в директорию фронтенда:
+   ```bash
+   cd nashel-frontend
+   ```
+2. Установите зависимости:
+   ```bash
+   npm install
+   ```
+3. Создайте `.env.local`:
+   ```env
+   NEXT_PUBLIC_API_URL=http://localhost:5000
+   ```
+4. Запустите в режиме разработки:
+   ```bash
+   npm run dev
+   ```
+
+Приложение будет доступно по адресу `http://localhost:3000`

 ---

 ## 🔮 Планы развития

- [ ] Реальный чат с исполнителем (WebSocket)
- [ ] Страница профиля исполнителя (публичная)
- [ ] Система отзывов и рейтингов (реальные данные)
- [ ] Оформление заказа через платформу
- [ ] Push-уведомления
- [ ] Мобильное приложение (React Native)
- [ ] Полнотекстовый фильтр по категориям и тегам
- [ ] Похожие услуги (реальные данные из той же категории)
- [ ] SEO-оптимизация публичных страниц
+- [ ] **Real-time Chat:** Чат между клиентом и мастером на WebSockets.
+- [ ] **Public Profiles:** Публичные страницы мастеров с портфолио и отзывами.
+- [ ] **SEO Boost:** Гидратация мета-тегов для индексации поисковиками.
+- [ ] **Push Notifications:** Уведомления о новых заказах и сообщениях.
+- [ ] **Mobile App:** Разработка нативного приложения на React Native.
+- [ ] **Verification UI:** Интерфейс загрузки документов для подтверждения статуса.