# ✨ Nashel — Frontend

> **Next.js 15 · TypeScript · React · TailwindCSS · Shadcn/UI**

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

---

## 🎯 Какую проблему решает Nashel

Клиенты тратят часы на поиск надёжных мастеров. Исполнители теряют заказы из-за отсутствия нормального онлайн-присутствия.

**Nashel** соединяет их мгновенно:
- Ищи мастера прямо на карте рядом с домом
- Смотри фото работ, цены и описание услуги
- Нажми одну кнопку — и выйди на связь с исполнителем

---

## 👤 Роли пользователей

| Роль | Возможности |
|------|-------------|
| **Клиент** | Поиск услуг, просмотр профилей, карта |
| **Кандидат в мастера** | Личный кабинет, создание профиля исполнителя |
| **Мастер** | Полный кабинет: управление услугами, расписание, статус |
| **Компания** | Расширенный кабинет с представлением от юрлица |

---

## 🗂️ Структура проекта

```
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** | Тосты/уведомления |

---

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

- [ ] Реальный чат с исполнителем (WebSocket)
- [ ] Страница профиля исполнителя (публичная)
- [ ] Система отзывов и рейтингов (реальные данные)
- [ ] Оформление заказа через платформу
- [ ] Push-уведомления
- [ ] Мобильное приложение (React Native)
- [ ] Полнотекстовый фильтр по категориям и тегам
- [ ] Похожие услуги (реальные данные из той же категории)
- [ ] SEO-оптимизация публичных страниц