# Онбординг-туры для платформы Контекстные подсказки при первом посещении страниц для менторов, студентов и родителей. Используется библиотека **Driver.js**. ## Архитектура ### Backend - **Поле User.onboarding_tours_seen** (JSONField): `{"mentor-dashboard": true, "mentor-schedule": false, ...}` — какие туры уже просмотрены. - **API**: - `GET /profile/settings/` — возвращает `onboarding_tours_seen` в ответе. - `PATCH /profile/update_settings/` — принимает `onboarding_tours_seen` и сливает с текущим состоянием. ### Frontend - **OnboardingProvider** (`contexts/OnboardingContext.tsx`): при смене страницы проверяет, нужен ли тур для текущей роли. Если тур ещё не просмотрен — запускает Driver.js. - **Шаги** (`lib/onboarding-steps.ts`): определения шагов по страницам и ролям (MENTOR_ONBOARDING, CLIENT_ONBOARDING, PARENT_ONBOARDING). - **data-tour** атрибуты: элементы с `data-tour="..."` используются как цели для подсветки (например, `mentor-income`, `schedule-calendar`, `client-lessons`). ## Страницы и шаги ### Ментор - dashboard — Динамика доходов, Ближайшие занятия, Недавние сдачи, Навигация - schedule — Календарь, форма создания занятия - students, materials, homework, feedback, analytics, payment, profile ### Студент (client) - dashboard — Ближайшие занятия, Навигация - schedule, materials, homework, my-progress, request-mentor, profile ### Родитель - dashboard — Выбор ребёнка, Занятия ребёнка, Навигация - homework, my-progress, profile ## Добавление новых шагов 1. Добавить шаги в `lib/onboarding-steps.ts` в нужный объект (MENTOR_ONBOARDING, CLIENT_ONBOARDING, PARENT_ONBOARDING). 2. Добавить `data-tour="уникальный-id"` на целевой элемент в компоненте. 3. Шаги без `element` или с несуществующим селектором отображаются как overlay по центру. ## Ручной запуск тура ```ts const { runTourManually } = useOnboarding(); runTourManually('dashboard'); // для текущей роли ```