Project Description & Details

Задача

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

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

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

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

Решение

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

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

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

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

UI и клиент: @emotion/react, @fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/react, @fullcalendar/timegrid, ag-grid-react, react, react-dom, react-flatpickr, react-icons, react-pro-sidebar, react-toastify.

Инфраструктура и утилиты: @emotion/styled, @mui/icons-material, @mui/lab, @mui/material, @mui/system, ag-grid-community, ag-grid-enterprise, chalk, date-fns, flatpickr, fontawesome-4.7, fs, fs-extra, ky, material-ui-popup-state, playwright, zustand.

Распределение языков в репозитории: TypeScript (85.3%), JavaScript (11.9%), CSS (2.6%), HTML (0.1%).

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

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

• @emotion/react — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @emotion/styled — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @fullcalendar/core — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @fullcalendar/daygrid — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @fullcalendar/react — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @fullcalendar/timegrid — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @mui/icons-material — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.
• @mui/lab — использован в продуктовой логике: снижает количество самописного кода и ускоряет добавление новых экранов.

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

• Интеграция и использование @emotion/react в продуктовой логике и интерфейсе.
• Интеграция и использование @emotion/styled в продуктовой логике и интерфейсе.
• Интеграция и использование @fullcalendar/core в продуктовой логике и интерфейсе.

Результат

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

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

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

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