PAGES_DOCUMENTATION.md

Новые страницы для Dashboard психолога

Созданные страницы

1. Analytics.jsx (/psychologist/analytics)

Цель: Страница аналитики и статистики по пациентам

Функционал:

• Выбор пациента из списка
• Основная статистика (всего записей, средний показатель, тренд)
• График динамики настроения (Area Chart)
• Круговая диаграмма распределения эмоций (Pie Chart)
• Столбчатая диаграмма сравнения недель (Bar Chart)
• Расчет трендов и процентных изменений

Компоненты:

• Recharts для визуализации данных
• lucide-react иконки (TrendingUp, TrendingDown, Activity, Users)
• Glass-card стили для UI

2. Journal.jsx (/psychologist/journal)

Цель: Журнал записей эмоций пациентов с поиском и фильтрацией

Функционал:

• Выбор пациента из списка
• Поиск по заметкам (по тексту)
• Фильтрация по типу эмоции
• Хронологический список записей (новые сверху)
• Отображение деталей каждой записи:
  • Тип эмоции с эмодзи и цветом
  • Дата и время
  • Интенсивность (визуальный индикатор)
  • Заметка пациента
• Статистика по записям (всего, найдено, средний показатель)

Компоненты:

• lucide-react иконки (MessageSquare, Search, Filter, Calendar, Clock)
• Glass-input для поиска и фильтров
• Цветовая кодировка эмоций

3. Chats.jsx (/psychologist/chats)

Цель: Мессенджер для общения психолога с пациентами

Функционал:

• Выбор пациента из списка чатов
• Индикатор онлайн статуса
• Непрочитанные сообщения (badge с количеством)
• Окно чата с историей сообщений
• Отправка новых сообщений
• Визуальное разделение сообщений (свои/чужие)
• Временные метки для каждого сообщения

Компоненты:

• lucide-react иконки (MessageCircle, Send, User, Users)
• Автопрокрутка к новым сообщениям (useRef)
• Mock данные для демонстрации (в реальном приложении требуется подключение WebSocket/API)

Обновленные файлы

App.jsx

Добавлены новые роуты:

• /psychologist/analytics → Analytics
• /psychologist/journal → Journal
• /psychologist/chats → Chats

Все роуты защищены через ProtectedRoute с ролью psychologist.

DashboardHeader.jsx

Добавлена навигация между страницами:

• Кнопки табов теперь активны (onClick)
• Навигация через useNavigate()
• Активная вкладка подсвечивается фиолетовым цветом
• Tabs: Главная, Аналитика, Журнал, Чат

Технические детали

Используемые библиотеки:

• React Router для навигации
• Recharts для графиков (AreaChart, PieChart, BarChart)
• lucide-react для иконок
• date-fns для форматирования дат
• emotionsAPI для загрузки данных

Стили:

• glass-card - основные карточки с glassmorphism эффектом
• glass-button - кнопки с прозрачным фоном
• glass-input - поля ввода с прозрачным фоном
• Цветовая схема: фиолетовые оттенки (#8b5cf6, #c4a7e7)
• Эмоции имеют свои цвета (красный → зеленый → фиолетовый)

API методы:

• emotionsAPI.getMyPatients() - получить список пациентов
• emotionsAPI.getPatientEmotions(patientId) - получить эмоции пациента

Запуск

cd front
npm install
npm run dev

Маршруты

• http://localhost:5173/psychologist - Главная (список пациентов, графики)
• http://localhost:5173/psychologist/analytics - Аналитика
• http://localhost:5173/psychologist/journal - Журнал записей
• http://localhost:5173/psychologist/chats - Чаты

Будущие улучшения

1. Chats.jsx:

   • Интеграция с WebSocket для real-time сообщений
   • Загрузка истории сообщений из API
   • Отправка файлов и изображений
   • Push-уведомления о новых сообщениях

2. Analytics.jsx:

   • Экспорт отчетов (PDF, Excel)
   • Настраиваемые диапазоны дат
   • Сравнение нескольких пациентов
   • Предиктивная аналитика

3. Journal.jsx:

   • Добавление заметок психолога к записям
   • Категоризация записей (теги)
   • Экспорт журнала
   • Расширенный поиск (по дате, интенсивности)

4. Общее:

   • Адаптивная версия для мобильных устройств
   • Темная/светлая тема
   • Локализация (мультиязычность)
   • Оптимизация производительности (виртуализация списков)