Задача

Timetracking вирішує практичну задачу: Timetracking — це додаток, який відображає зведені дані про зайнятість співробітників організації за вибраний період. У додатку є фільтри за об'єктами, підрозділами, видами та підвидами робіт. Також можливий детальний перегляд зайнятості за годинами для кожного дня. Додаток успішно працює в реальній функціонуючій ERP-системі організації.

Проект відноситься до комерційної розробки і завершено, і використовується. Він пов'язаний з послугами: Full-stack веб-додатки та дашборди, Розробка та інтеграція рішень для 1С.

Цей кейс демонструє підхід до завдань у сфері "Full-stack веб-додатків та дашбордів": від постановки завдання до здачі з чіткою структурою модулів.

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

Рішення

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

Сценарії спроектовані так, щоб основні дії укладалися в один-два екрани: менше перемикань, менше помилок при введенні. Навігація та підписи полів узгоджені з звичними паттернами — користувачеві не потрібно "вчити інтерфейс."

Окрему увагу — станам завантаження та порожнім спискам: skeleton/spinner там, де дані приходять асинхронно, і зрозумілі тексти для порожнього стану замість порожньої таблиці.

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

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 для інтеграторів. Для сценаріїв з високим навантаженням — профілювання вузьких місць та кешування довідників.