Project Description & Details

Задача

Timetracking решает прикладную задачу: Timetracking — приложение, которое отображает сводные данные занятости сотрудников организации за выбранный период. В приложении присутствуют фильтры по объектам, подразделениям, видам и подвидам работ. Так же возможен поробный просмотр заняости по часам для каждого дня. Приложение успешно работает в реальной функционирующей в организациии ERP-системе.

Проект относится к коммерческий разработке и завершён и используется. Связан с услугами: Full-stack веб-приложения и дашборды, Разработка и интеграция решений для 1С.

Кейс показывает подход к задачам в области «Full-stack веб-приложения и дашборды»: от постановки до сдачи с понятной структурой модулей.

Перед стартом зафиксировали критерии готовности: понятный первый экран, предсказуемые ошибки форм, возможность доработки без переписывания половины кодовой базы.

Решение

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

Сценарии спроектированы так, чтобы основные действия укладывались в один–два экрана: меньше переключений, меньше ошибок при вводе. Навигация и подписи полей согласованы с привычными паттернами — пользователю не нужно «учить интерфейс».

Отдельное внимание — состояния загрузки и пустые списки: skeleton/spinner там, где данные приходят асинхронно, и понятные empty-state тексты вместо пустой таблицы.

Архитектура и стек

UI и клиент: ag-grid-react, react, react-date-range, react-datepicker, react-dom, react-flatpickr.

Инфраструктура и утилиты: mui/material, mui/x-date-pickers, mui/x-data-grid, mui/x-date-pickers-pro, ag-grid-community, ag-grid-enterprise, dayjs, dompurify, ky, zustand.

Распределение языков в репозитории: JavaScript (95.7%), CSS (3.8%), HTML (0.5%), Shell (0.1%).

Слои разделены так, чтобы UI не знал деталей транспорта: адаптеры API/хранилища, доменные типы, компоненты представления. Это упрощает замену бэкенда и точечные UX-правки.

Ключевые функции

• mui/material — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• mui/x-date-pickers — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• mui/x-data-grid — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• mui/x-date-pickers-pro — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• ag-grid-community — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• ag-grid-enterprise — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• ag-grid-react — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• dayjs — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.

Дополнительно:

• Интеграция и использование mui/material в продуктовой логике и интерфейсе.
• Интеграция и использование mui/x-date-pickers в продуктовой логике и интерфейсе.
• Интеграция и использование mui/x-data-grid в продуктовой логике и интерфейсе.

Результат

Проект доведён до рабочего состояния: команда/пользователь получает стабильный инструмент вместо ручных таблиц и переписки. Сокращено время на типовые операции за счёт автоматизации в интерфейсе.

Код закрыт по требованиям заказчика; архитектурные решения и стек описаны на этой странице для прозрачности экспертизы и SEO.

Что бы улучшил

Следующий шаг — observability (логи/метрики), автотесты на регресс и документация API для интеграторов. Для high-load сценариев — профилирование узких мест и кеширование справочников.