JIT
создание eduFace crm на react native и vue.js для образовательных учреждений
EduFace CRM - Полная спецификация системы EduFace CRM — CRM-система для образовательных учреждений, автоматизирующая учет посещаемости с помощью Face ID. Мобильное приложение на React Native (iOS/Android) и веб-портал на Vue.js. Поддерживает многоязычность, GDPR, оффлайн-режим и использует базу данных MySQL. Ниже представлена объединенная спецификация, включающая ключевые функции, дизайн страниц и предложенные дополнения, с учетом всех предыдущих запросов. Общая информация Платформы: Мобильное приложение (React Native, iOS/Android), веб-портал (Vue.js). База данных: MySQL для хранения данных пользователей, посещаемости, расписания и других сущностей. Многоязычность: Поддержка 10+ языков через i18next. GDPR: Шифрование данных, управление согласиями, уведомления о биометрических данных. Оффлайн-режим: Локальное сохранение данных (AsyncStorage для React Native, IndexedDB для Vue.js) с синхронизацией. Ключевые функции 1. Авторизация Экран авторизации: Вход через Face ID (автоматическая идентификация). Вход через логин (email) и пароль (валидация, показ/скрытие пароля). Двухфакторная аутентификация (опционально: Face ID + код из SMS/email). Селектор языка (10+ языков). GDPR: Согласие на обработку биометрических данных при первом входе. Оффлайн-режим: Уведомление о локальной работе. 2. Регистрация Экран регистрации: Доступ только для администраторов. Форма: Имя, Email, Пароль, Роль (Студент/Преподаватель/Администратор), опция привязки Face ID. GDPR: Чекбокс согласия на обработку данных. Сохранение данных в MySQL с шифрованием. 3. Автоматическая посещаемость Распознавание лиц через камеру устройства. Фиксация времени и места (GPS). 4. Ручная посещаемость Отметка статуса: «Присутствует», «Отсутствует», «Опоздал». Поле для комментариев. 5. Геолокация Проверка местоположения через GPS для подтверждения присутствия. 6. Уведомления Push-уведомления об отсутствии, дедлайнах, новых сообщениях. Локальное сохранение уведомлений в оффлайн-режиме. 7. Оффлайн-режим Локальное сохранение данных (посещаемость, расписание, сообщения) с синхронизацией при подключении. 8. Аналитика Dashboards: Графики посещаемости (круговые, линейные). Экспорт отчетов: PDF, Excel. Статистика преподавателей (для админов): количество занятий, отмеченная посещаемость. 9. Многоязычность Поддержка 10+ языков. Переключение языка на всех экранах. 10. GDPR Шифрование данных (пароли, биометрия, сообщения). Управление согласиями в настройках. 11. Роли Студенты: Просмотр посещаемости, расписания, заданий, оценок, чатов, баллов геймификации. Преподаватели: Управление посещаемостью, заданиями, оценками, чатами, просмотр расписания. Администраторы: Полный доступ, включая регистрацию пользователей, управление группами, модерацию чатов. 12. Расписание занятий Отображение расписания (календарь или список). Фильтры: по группе, предмету, преподавателю. Уведомления о занятиях. Роли: Студенты видят своё расписание, преподаватели — свои группы, админы редактируют. 13. Чат Личные и групповые чаты (текст, изображения, документы). GDPR: Шифрование сообщений, возможность удаления. Оффлайн-режим: Локальное хранение сообщений. 14. Задания и оценки Задания: Создание (преподаватели), отправка решений (студенты), дедлайны. Оценки: Выставление (преподаватели), просмотр (студенты). Уведомления о дедлайнах. 15. Обратная связь Форма: Тема, описание, файлы, опция анонимности. Категории: Техподдержка, Предложение, Жалоба. Уведомления: Подтверждение отправки, ответ админа. 16. Интеграция с календарями Экспорт расписания и заданий в Google Calendar/Outlook (.ics). Импорт событий из внешних календарей. GDPR: Согласие на доступ. 17. Управление группами Создание/редактирование групп: Название, студенты, преподаватель, предметы. Импорт студентов из Excel/CSV. 18. Геймификация Баллы за посещаемость, задания, активность. Таблица лидеров, достижения (значки). Роли: Студенты видят свои баллы, преподаватели настраивают правила, админы управляют системой. 19. Темная тема Переключение между светлой и темной темой. Автоматический режим (по системным настройкам). План дизайна страниц 1. Экран авторизации Компоненты: Логотип (центр, вверху). Кнопка "Войти через Face ID" (иконка лица). Форма: Email, Пароль (показ/скрытие), кнопка "Войти". Селектор языка (правый верхний угол). Ссылка "Забыли пароль?". GDPR: Модальное окно согласия. 2FA: Поле для кода (SMS/email, опционально). Оффлайн-режим: Уведомление внизу. Дизайн: Фон: Градиент (синий/белый или темный для темной темы). Поля: Закругленные, с тенями. Анимация кнопок. Адаптивность: Вертикальная ориентация (мобильные), центрированное окно (веб). 2. Экран регистрации Компоненты: Заголовок: "Регистрация нового пользователя". Форма: Имя, Email, Пароль, Роль, Чекбокс Face ID. Кнопка "Зарегистрировать". GDPR: Чекбокс согласия. Селектор языка. Кнопка "Назад". Дизайн: Аналогичный стиль авторизации. Уведомления об ошибках (например, "Email занят") под полями. Адаптивность: Центрированная форма. 3. Главный экран (Dashboard) Компоненты: Заголовок: "Добро пожаловать, [Имя]". Роли: Студенты: График посещаемости, расписание, баллы геймификации. Преподаватели: Список групп, кнопка "Отметить посещаемость". Администраторы: Статистика (студенты, преподаватели), кнопка "Добавить пользователя". Меню: Посещаемость, Расписание, Аналитика, Чат, Уведомления, Настройки, Регистрация (админы). Иконка уведомлений (колокольчик с числом). Селектор языка. Дизайн: Светлый/темный фон, карточки с тенями. Адаптивная сетка: 1 колонка (мобильные), 2–3 (веб). Анимация графиков и кнопок. 4. Экран посещаемости Компоненты: Автоматическая: Кнопка "Сканировать Face ID", поля времени/места. Ручная: Список студентов, статусы ("Присутствует", "Отсутствует", "Опоздал"), комментарии. Фильтры: Дата, Группа, Предмет. Кнопка "Сохранить". Оффлайн-режим: Уведомление о синхронизации. Дизайн: Таблица/карточки с иконками статусов. Кнопка сканирования: Зеленая, с анимацией. Прокручиваемая таблица (мобильные). 5. Экран расписания Компоненты: Календарь или список занятий (день/неделя/месяц). Фильтры: Группа, Предмет, Преподаватель. Детали занятия: Время, Аудитория, Тип. Кнопка "Добавить занятие" (админы). Экспорт в Google Calendar/Outlook. Дизайн: Календарь: Цветовая кодировка (лекции — синий, практики — зеленый). Список: Карточки с иконками. Адаптивность: Прокручиваемый календарь. 6. Экран аналитики Компоненты: Графики: % посещаемости, тренды по дням. Фильтры: Группа, Студент, Период. Кнопки: "Экспорт PDF", "Экспорт Excel". Статистика преподавателей (админы). Дизайн: Графики: Зеленый (присутствие), красный (отсутствие). Кнопки экспорта с анимацией загрузки. Адаптивная компоновка. 7. Экран чата Компоненты: Список диалогов: Аватары, последние сообщения. Переписка: Поле ввода, отправка файлов/эмодзи. Индикатор статуса (онлайн/оффлайн). Оффлайн-режим: Локальное хранение. Дизайн: Карточки диалогов. Чат: Пузырьки сообщений (синие — свои, серые — чужие). Прокручиваемый список. 8. Экран заданий и оценок Компоненты: Задания: Список (Название, Дедлайн, Файлы), кнопка "Отправить решение". Оценки: Таблица/график, комментарии. Фильтры: Предмет, Статус. Кнопка "Добавить задание" (преподаватели). Дизайн: Карточки заданий: Цвет по статусу (красный — просрочено). Оценки: Таблица с цветовой кодировкой. Адаптивность: Прокручиваемый список. 9. Экран уведомлений Компоненты: Список: Заголовок, Время, Кнопка "Прочитано". Фильтры: Дата, Тип (отсутствие, дедлайн). Оффлайн-режим: Локальное хранение. Дизайн: Карточки уведомлений. Прочитанные — затемненные. 10. Экран обратной связи Компоненты: Форма: Тема, Описание, Файлы, Чекбокс анонимности. Категории: Техподдержка, Предложение, Жалоба. Список отправленных запросов (статус). Дизайн: Простая форма, кнопка "Отправить". Список запросов: Карточки с иконками статуса. 11. Экран управления группами Компоненты: Таблица групп: Название, Преподаватель, Студенты. Модальное окно: Создание/редактирование группы. Кнопка "Импорт студентов" (Excel/CSV). Дизайн: Таблица с фильтрами. Drag-and-drop для импорта. 12. Экран геймификации Компоненты: Прогресс-бар баллов. Список достижений (иконки). Таблица лидеров: Аватары, Имена, Баллы. Дизайн: Яркие цвета для значков. Таблица лидеров: Прокручиваемая. 13. Экран настроек Компоненты: Профиль: Имя, Email, Роль, Обновление Face ID. Настройки: Язык, Уведомления, Геолокация, Темная тема, 2FA. GDPR: Управление согласиями. Кнопка "Выйти". Дизайн: Секции: Профиль, Настройки, GDPR. Кнопка выхода: Красная. Технические детали Фронтенд: React Native: Мобильное приложение, ThemeProvider для тем. Vue.js: Веб-портал, CSS-переменные для тем. Бэкенд: MySQL: Таблицы для пользователей, посещаемости, расписания, чатов, заданий, оценок, групп, баллов. API: REST для синхронизации, WebSocket для чатов. Безопасность: Шифрование: Пароли, биометрия, сообщения (AES-256). 2FA: Интеграция с SMS/email (например, Twilio). Интеграции: Google Calendar/Outlook: OAuth, экспорт .ics. Файлы: Amazon S3 или локальный сервер. Импорт Excel/CSV: PapaParse. Оффлайн-режим: AsyncStorage/IndexedDB для локального хранения. Очередь синхронизации при подключении. Геймификация: Логика баллов: Серверные скрипты. Хранение: MySQL (таблицы баллов, достижений). Приоритизация реализации Критические функции: Авторизация, регистрация, посещаемость, расписание, аналитика. Высокий приоритет: Темная тема, задания/оценки, чат, обратная связь. Средний приоритет: Управление группами, геймификация, уведомления. Низкий приоритет: Интеграция с календарями, 2FA, статистика преподавателей. Дизайн-система Цвета: Светлая тема: Белый фон (#FFFFFF), синий акцент (#007BFF). Темная тема: Темный фон (#1C2526), светлый текст (#FFFFFF). Шрифты: Roboto/Open Sans (чистые, современные). Иконки: Material Icons или FontAwesome. Анимации: Плавные переходы, нажатия кнопок, загрузка графиков. Адаптивность: Мобильные: 1 колонка, прокручиваемые списки. Веб: 2–3 колонки, центрированные формы. сделай на react expo на js

I'll create a React Native (Expo) implementation for the EduFace CRM mobile app. Let's start with the core structure and key screens.

This is the initial setup with:

  1. Core navigation structure
  2. Authentication screen with Face ID support
  3. Dashboard screen with role-based content
  4. Internationalization setup
  5. Light/dark theme support
  6. Basic styling and components

To run the app:

  1. Install dependencies: npm install
  2. Start the development server: npm start
  3. Open in iOS/Android simulator or on a physical device
Updated files
v1