Реализация стороннего компонента для визуализации отсутствия сотрудников

Предпосылки

В современной рабочей среде одной из важных задач является оперативное получение информации об отсутствии коллег по различным причинам: отпуск, временная нетрудоспособность или служебные командировки. Особенно это важно для проектных команд, где прозрачность доступности участников напрямую влияет на планирование задач, соблюдение сроков и общую эффективность взаимодействия.

На момент реализации решения в нашей организации используется версия системы Directum RX 4.12. Все процессы, связанные с оформлением отпусков, командировок и отсутствий по болезни, уже ранее быи реализованы нами в системе. Но по мере их внедрения от пользователей все чаще стали поступать вопросы: а как быстро увидеть, кто из коллег отсутствует и в какие периоды.

Различные реестры и справочники позволяют вести учет данных, но нет удобного и наглядного инструмента визуализации. Это и стало отправной точкой для создания собственного компонента, который позволил бы сделать работу с такими данными более прозрачной и эффективной для пользователей. Тем более что с версии 4.9 у нас есть возможность добавлять сторонние контролы для развития пользовательского интерфейса.

Выбор реализации: используем готовую библиотеку или пишем свою?

Первоначальной идеей было использовать open-source библиотеку react-big-calendar, с которой ранее имели дело. C помощью данного стороннего контрола у нас реализован календарь бронирования в заявке на эксплуатацию служебного автомобиля.

Но столкнулись с рядом проблем:

1. Масштабирование. При большом количестве отсутствий в конкретный день приходилось бы совершать лишние действия для просмотра полной картины.
2. Локализация. По умолчанию календарь локализован под американского пользователя с американскими метриками дня, недели и часами. С аналогичными трудностями мы столкнулись в «недельном» календаре в заявке на эксплуатацию авто. Однако его было проще адаптировать из-за меньшей сетки под российские стандарты.
3. Неудобная работа с данными. Фильтрация или сортировка данных в big-react-calendar была бы проблематичной из-за отсутствия чёткой структуры данных.

Дизайн big-react-calendar, настройка «Месяц»

Из-за совокупности проблем было принято решение разработать свою собственную библиотеку с оригинальным дизайном для удобной работы с информацией об отсутствующих сотрудниках.

Прототипирование и разработка дизайна с помощью ИИ

Так как в нашей команде нет UI/UX-дизайнера, задачу проработки пользовательского опыта я взяла на себя. Сформировала и проанализировала требования, изучила существующие референсы – так появился скетч интерфейса.

Скетч на коленке нашего будущего календаря отсутствий

Отрисовку полноценного макета делегировали ИИ, а именно Figma AI. Мой коллега Ярослав, разработчик, подготовил необходимый промпт. На основе эскиза и промпта Figma AI разработала дизайн, который с каждым новым запросом обновлялся, пока мы не достигли конечного результата. Всего было создано 10 версий дизайна.

Первая версия UI

Финальная версия UI

Помимо дизайна календаря Figma AI сгенерировала скрипты и разметку, которые в последствии были использованы как источник кодовой базы для последующего переноса в сторонний компонент Directum RX.

Разработка календаря. Frontend

В виду того, что мой коллега Ярослав – разработчик на C# и не имеет большого опыта в разработке фронта, а опыта с фрэймворками JS (в частности с react, который нам нужен для стороннего компонента) нет, то разработку клиентской части также делегировали ИИ. Инструментом, которым пользовался разработчик для написания кода, был Cursor на настройке Auto.

За основу разработки был взят официальный пример компании Директум из репозитория «sungero-remote-component-example-react». 

Этапы работ:

1. Cursor был использован для очистки проекта от примеров сторонних контролов и создания собственного компонента absence-control по их архитектурным принципам.

2. Внедрена система Git: сформированы рабочие ветки и инициализирован репозиторий.

3. Разработка с помощью ИИ с использованием кодовой базы из Figma. При переносе дизайна учитывались ограничения Directum RX, связанные с автоматической сменой темы в системе и невозможностью корректно загрузить иконки. Перед внесением изменений нейросеть по запросу «проговаривала» предполагаемые места правок, а также использовала комментарии к коду, чтобы процесс оставался контролируемым. Все уточнения учитывались в последующих итерациях.

4. Реализована логика формирования данных для таблицы. В основу легли 6 полей: «ФИО сотрудника», «Дата с», «Дата по», «Причина», «Подразделение», «Последняя дата запуска». Значения полей объединяются в строку вида, где каждый объект в фигурных скобках соответствует одному интервалу отсутствия Компонент absence-control обрабатывает эту строку и на её основе строит таблицу сотрудников, отображает интервалы отсутствий, формирует содержимое подсказок, а также обеспечивает сортировку и фильтрацию.

5. Разработана интеграция front‑части с Directum RX: создан API‑метод, возвращающий данные в необходимом формате. В front‑части выполняется вызов метода, осуществляется обработка ответа и передача строки в компонент для последующего отображения.

Разработка backend и загрузка календаря в систему

Для формирования данных использовались внутренние документы и справочник. В качестве хранилища используется БД с таблицей для хранения информации об отсутствиях сотрудников. Заполнение таблицы выполняется фоновым процессом, а API-метод извлекает данные из БД и формирует строку ответа для отрисовки календаря.

Итоговый результат

С помощью no-code создала отдельный модуль для размещения спец.контрола для максимально быстрого доступа к отсутствиям.

Интерфейс календаря отсутствий – это таблица с легендой, панелью фильтров, сортировкой и навигацией по месяцам, позволяющая быстро просматривать информацию об отсутствующих сотрудниках. Текущий день выделяется цветом в нашем корпоративном стиле.

При нажатии на заголовок таблицы (месяц, год) открывается всплывающее окно для быстрого перехода к нужному месяцу.

Также для перемещения по месяцам предусмотрено меню перемещений: можно перемещаться на месяц вперёд, на месяц назад и на актуальный календарный месяц.

Для пользователей, предпочитающих тёмную тему, поддержали отображение компонента в ночном режиме системы.

При наведении курсора на интервал внутри календаря появляется подсказка, в которой хранится информация о ФИО сотрудника, периоде и причине отсутствия.

Каждая ячейка с датой обладает собственным функционалом. При наведении курсора на дату появляется подсказка с точным количеством отсутствующих в этот день. А при нажатии на неё срабатывает фильтр, который показывает все интервалы отсутствий, которые пересекаются с выбранным днём. При повторном нажатии фильтрация сбрасывается.

Дополнительно для более удобной работы с информацией была реализована фильтрация списков по причине отсутствия и сотрудникам. Вызывается из выпадающего списка «Фильтр», при активации любого из фильтров дополнительно к двум основным разделам появляется действие «Сбросить фильтр», которое возвращает вид по умолчанию.

Фильтрация «По причине отсутствия» отвечает за отображения основных причин отсутствия: Отпуск, Больничный и Командировка. По умолчанию все причины активны, можно отфильтровать список по интересующему типу отсутствия.

Фильтрация «По сотрудникам» отвечает за отображение конкретных сотрудников или подразделений. Поиск реализован путем ввода имени подразделения или сотрудника в текстовые поля. Тип поиска – по совпадению в строке (по вхождению), что позволяет искать по частичным данным: не требуется вводить ФИО или название подразделения целиком.

Фильтрация поддерживает множественный выбор сотрудников и подразделений. При выборе и сотрудников, и подразделений они учитываются совместно по логике «ИЛИ»: в календарь попадают сотрудники, которые относятся к выбранным подразделениям, или явно выбраны пользователем. Такой подход обеспечивает корректное отображение всех интервалов отсутствий и избавляет от необходимости строго соотносить сотрудников с подразделениями.

При активации фильтров в разделе «По сотрудникам» появляется навигационное меню по месяцам. Меню формируется автоматически и содержит только те месяцы текущего года, где есть интервалы отсутствий для выбранных сотрудников и подразделений. Доступен быстрый переход к нужному месяцу. При сбрасывании фильтров панель пропадает.

Также список сотрудников поддерживает сортировку двумя режимами: А–Я и Я–А. При необходимости можно вернуться к отображению по умолчанию: в порядке приоритета сначала командировки, затем отпуска, далее больничные.

Срок реализации задачи – 2 недели. Ввод в эксплуатацию – март 2026.

Данное решение масштабируемо: подход легко расширяется на другие типы событий, например, графики дежурств, обучение или внутренние мероприятия.

Тандем, реализовавший задачу

• Мария Никишева – аналитик-консультант.
• Ярослав Малышкин – разработчик.