Task

Timetracking addresses a practical need: Timetracking is an application that displays summarized data on employee occupancy within an organization over a selected period. The application includes filters for objects, departments, types, and subtypes of work. It also allows for detailed viewing of occupancy by hours for each day. The application successfully operates within a real, functioning ERP system in the organization.

The project is classified as commercial development and is completed and in use. It is related to services: Full-stack web applications and dashboards, Development and integration of solutions for 1C.

This case study demonstrates the approach to tasks in the area of "Full-stack web applications and dashboards": from task setting to delivery with a clear module structure.

Before starting, readiness criteria were established: a clear first screen, predictable form errors, and the ability to make improvements without rewriting half of the codebase.

Solution

A closed commercial tool has been implemented: the interface and logic are tailored to everyday user scenarios, without unnecessary screens.

The scenarios are designed so that the main actions fit within one or two screens: fewer switches, fewer input errors. Navigation and field labels are aligned with familiar patterns—users do not need to "learn the interface."

Special attention is given to loading states and empty lists: skeleton/spinner where data is received asynchronously, and clear empty-state texts instead of an empty table.

Architecture and stack

UI and client: ag-grid-react, react, react-date-range, react-datepicker, react-dom, react-flatpickr.

Infrastructure and utilities: 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.

Language distribution in the repository: JavaScript (95.7%), CSS (3.8%), HTML (0.5%), Shell (0.1%).

Layers are separated so that the UI does not know the details of transport: API/storage adapters, domain types, presentation components. This simplifies backend replacement and targeted UX adjustments.

Key features

• mui/material — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• mui/x-date-pickers — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• mui/x-data-grid — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• mui/x-date-pickers-pro — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• ag-grid-community — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• ag-grid-enterprise — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• ag-grid-react — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.
• dayjs — used in product logic: reduces the amount of custom code and speeds up the addition of new screens.

Additionally:

• Integration and use of mui/material in product logic and interface.
• Integration and use of mui/x-date-pickers in product logic and interface.
• Integration and use of mui/x-data-grid in product logic and interface.

Result

The project has been brought to a working state: the team/user receives a stable tool instead of manual tables and correspondence. Time for routine operations has been reduced through automation in the interface.

The code is closed per client requirements; architectural solutions and stack are described on this page for transparency of expertise and SEO.

What I would improve

The next step is observability (logs/metrics), regression auto-tests, and API documentation for integrators. For high-load scenarios—profiling bottlenecks and caching reference data.