Компонент-модуль для ReactJS – Расписание на день

Модуль представляет собой интерактивное расписание на один день, разработанное для интеграции в ReactJS приложении. Его основная цель — предоставить пользователям удобный интерфейс для просмотра и управления записями, связанными с сотрудниками и временными промежутками. Модуль должен поддерживать такие функции, как масштабирование временной шкалы, прокрутка содержимого и перемещение записей с помощью Drag-n-Drop. Он должен быть гибким, обеспечивать возможность интеграции с будущей бизнес-логикой для проверки прав доступа и ограничений при управлении записями, а также соответствовать предоставленному макету, который демонстрирует пример реализации интерфейса.
Основные визуально-функциональные требования:
1. Рабочее поле имеет разделение на столбцы. Каждый столбец – сотрудник, к которому относится запись. Заголовок столбца с именем сотрудника – фиксированный при прокрутке.
2. Расписание может прокручиваться, вертикально и горизонтально (при наличии большого количества столбцов). Вместе с основной частью расписания, прокручивается и временная шкала с левой части компонента. Прокрутка должна быть плавной, с фиксированными заголовками столбцов и временной шкалой в видимой области.
3. Метки времени на временной шкале отображаются в зависимости от выбранного масштаба расписания (масштаба времени). Если в расписании появляются записи с меньшей длительностью (например, 15 минут), модуль автоматически адаптирует масштаб, уменьшая шаг до 15 минут для корректного отображения. Переход между масштабами должен быть плавным, с сохранением читаемости и удобства интерфейса
4. Блоки записей в расписании привязаны верхней частью к началу времени записи и нижней частью к концу записи, Блок не может быть растянут на несколько столбцов. Блок можно перетаскивать между столбцами, хватая его за заголовок записи (временную метку начала и завершения)
5. Создание новой записи в свободном месте – это сопровождение курсора пользователя небольшим блоком с индикацией времени начала записи и текстом – «Новая запись»
6. Цвет блока варьируется в зависимости от статуса записи и её типа (группа или индивидуально). Каждый блок содержит основную информацию для идентификации пациента и процедуры, на которую он записан: ФИО, номер телефона и процедура
Технические требования к реализации:
1. Реализовать модуль так, чтобы его можно было использовать в контексте другого окна. (прим. Было расписание работы сотрудников, стало расписание работы кабинетов)
2. Предоставить достаточное количество пропов, параметров для настройки и внешнего управления компонентом.
3. Подготовить тестовую структуру данных для проверки работоспособности модуля и наглядного примера реализации с документацией.
4. Использовать предоставленный набор элементов интерфейса, если чего-то не хватает – сообщить об этом и доработать в соответствии с макетным вариантом.
5. Сводить использование «зоопарка библиотек» к минимуму, чем меньше сторонних реализаций, которые зависят от версий/зависимостей/погоды на марсе – тем лучше.
6. Сохранить плавность прокрутки и свести обновления к минимуму. Например, при добавлении новой записи в расписание, перегружать его один раз, сохраняя положение пользователя на экране. Обновление таймлайна (текущего времени) вообще не должно сказываться на взаимодействии пользователя с данным модулем.
7. Можно и НУЖНО предлагать более рациональные решения, идеи по реализации. Не молчите и активно обсуждайте все аспекты данной задачи 😊 

Интересующимся отправлю макет в Figma для ознакомления с элементами интерфейса продукта.