ZeroDark — Responsive Project Management System

ZeroDark is a project management system, a web-based HR and task management application at the Ophardt Maritim shipyard. This app allows managers to control the teams and processes of motorboat production. There are 3 main user roles: manager, employee and system administrator.

About the client

Ophardt Maritim is part of the international OPHARDT group of companies. The company creates durable, reliable, and affordable aluminum boats for mass production, develops new hulls and boat designs.

Our task

At the time of the contact, the client wanted to replace the paper workflow system with an electronic CRM system, in which the number of employees and the state of their tasks would be clearly displayed. In such a system, all internal processes and their interconnection should be displayed, and its management should be responsive, intuitive, and aesthetically pleasing.

Tools:

Backend: Node / NestJS / TypeScript, MariaDB

Frontend: React / TypeScript

Docker, Git, NGINX

Technical solutions

We have developed a Trello-like kanban board specifically for this app.

The kanban board is implemented using several technologies. Drag’n’drop gives smoothly drag items between columns. With the help of WebSocket, the board members can monitor its changes in real-time.

Responsive images are used to support modern image formats such as WebP. Images are loaded in different sizes depending on the screen resolution. At high resolution — small size, at low — large. This helps to save traffic, since the system does not overload it, choosing the quality of each image based on the screen resolution.

With Cropper implemented user photo editor before upload. Before loading, he can scale it, crop it, and select the displayed area. A trifle, but useful. Smooth animations of transitions and other actions are made with React-Flip-Toolkit.

Due to the means of building projects and the capabilities of React + WebPack, phased loading is implemented. That is, all screens are loaded quickly since only the area that is currently needed for work is loaded.

Sections

My tasks

On this tab, managers can see all of their tasks. The time required to complete the task is highlighted in color:

• Green means that 0–33%, the task has just started
• Orange, 33–66%, there is still time to complete the task
• Red, 66–100% of the time has passed, the deadline is very close

A manager and a user can have several common tasks and only one special task (STC). Clicking on a task opens a modal window with information about it. The manager can change the status of the task and leave comments on it.

Workers

The “Workers” section contains a list of employees and information about them: department, first and last name, team, task status, and so on.

The manager can create new employees, edit their data, sort records in the table by all columns, search for an employee by name.

He also can change the status of an employee or give him the status of inaction through the context menu, switch the view and see only inactive workers by clicking the button “Inaktive Mitarbeiter anzeigen”.

Boards

In this section, the manager sees a list of teams and Kanban boards within them. It also shows how many active tasks are performed on a specific board, and you can create a new board for the team.

A kanban board has 4 main columns and one additional column called STC. The STC column is displayed if the corresponding option was selected when creating the board.

In one of the two columns, Tätigkeit and Production, you can create a draft. Here you can also select the task that the manager wants to start. You just need to move it to the “In Bearbeitung” column and manually complete the task via the context menu.

Teams

The administrator can create teams according to their occupation. One team is responsible for a particular project. It is presented in the form of a board on which all tasks related to this project are located.

Feedback

When completing a task, an employee can use the time to complete it at his own discretion. After completing the task, the employee sends it for review to the responsible manager, who checks the task results and can accept or reject them. At the same time, they have the opportunity to exchange advice within the chat, give instructions and comments on the task.

Dashboard

On the “Dashboards” tab there are 2 panels — Mitarbeiter for the list of Workers and Aufgaben for the list of tasks:

The Mitarbeiter panel shows employees and their status — on vacation, at work, or home:

The manager can change the view so that only those employees who are currently at the workplace are displayed.

Print card

Here you can see what the task card looks like in PDF format. Its main advantage over a physical card is automatically filled in fields and the ability to edit them. Employees have the opportunity to select a task and print the corresponding card.

Conclusion

We have created a responsive, intuitive, and attractive CRM system for tracking employee tasks and the status of their work. We solved the problem of a large number of bureaucratic operations, getting rid of the paper system of document circulation. Now all internal processes at the shipyard are displayed in a single system.

Originally published at https://cimpleo.com.