ZeroDark — менеджмент проектов

Reading time: 4 minutes.

26 February 2021

ZeroDark - это система проектного менеджмента, веб-приложение для управления персоналом и задачами на судостроительной верфи Ophardt Maritim. Это приложение позволяет менеджерам управлять командами и процессами по производству моторных лодок. Есть 3 основные роли пользователя: менеджер, работник и админ системы.

1

О клиенте

Ophardt Maritim — это часть международной группы компаний OPHARDT. Компания создает прочные, надежные и доступные алюминиевые лодки для серийного производства, разрабатывает новые корпуса и проекты лодок.

Наша задача

На момент обращения, клиент хотел заменить бумажную систему документооборота на электронную CRM систему, в которой будет четко и понятно отображаться количество сотрудников и состояние их задач. В такой системе должны отображаться все внутренние процессы и их взаимосвязь, а управление ей должно быть отзывчивым, интуитивным и эстетически привлекательным.

Инструменты:

  • React.js
  • MariaDB
  • Docker
  • Node.js
  • Nest.js

Backend: Node / NestJS / TypeScript, MariaDB

Frontend: React / TypeScript

Docker, Git, NGINX

Технические решения

Мы разработали канбан доску, аналог Trello, специально для этого приложения.

Канбан-доска реализована при помощи нескольких технологий. Drag’n’drop позволяет плавно перетаскивать элементы между колонками. С помощью WebSocket реализовано наблюдение участниками доски за её изменениями в режиме реального времени.

Responsive images используется для поддержки современных форматов изображений, например, WebP. В зависимости от разрешения экрана, изображения загружаются в разных размерах. При высоком разрешении - в маленьком размере, при низком - в большом. Это способствует экономии трафика, так как система не перегружает его, выбирая качество каждого изображения, исходя из разрешения экрана.

С помощью Cropper реализован редактор фотографий пользователя перед загрузкой. Прежде чем загрузить, он может масштабировать её, обрезать и выбрать отображаемую область. Мелочь, но полезно.

Плавные анимации переходов и других действий сделаны на React-Flip-Toolkit.

За счет средств сборки проектов и возможностей React + WebPack реализована поэтапная подгрузка. То есть, все экраны грузятся быстро, так как подгружается только та область, которая необходима в данный момент для работы.

Разделы

My tasks

1

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

  • Зеленый означает, что прошло 0-33% времени, задача только запущена
  • Оранжевый, 33-66%, еще осталось время на выполнение задачи
  • Красный, 66-100%, дедлайн очень близок

У менеджера и пользователя может быть несколько обычных задач и только одна специальная (STC). При нажатии на задачу открывается модальное окно с информацией о ней. Менеджер может изменять статус задачи и оставлять к ней комментарии.

Workers

2

В разделе «Workers» находится список сотрудников и информация о них: отдел, имя и фамилия, команда, статус задачи и т. д.

Менеджер может создавать новых работников, редактировать их данные, сортировать записи в таблице по всем столбцам, искать работника по имени.

Также он вправе изменить статус работника через контекстное меню.

3

Также он вправе изменить статус работника или дать ему статус бездействия через контекстное меню, переключить вид и посмотреть только бездействующих работников, нажав кнопку «Inaktive Mitarbeiter anzeigen».

Boards

4

В этом разделе менеджер видит список команд и Канбан-досок внутри них. Также там видно сколько активных задач выполняется на определенной доске, и можно создать новую доску для команды.

Задачи сгруппированы в зависимости от их статуса. Есть черновики задач, задачи, находящиеся в процессе выполнения, ожидающие проверки и выполненные.

Доска канбан имеет 4 основных и один дополнительный столбец, называемый STC. Столбец STC отображается, если при создании доски была выбрана соответствующая опция.

В одном из двух столбцов — Tätigkeit и Production имеется возможность создать черновик. Здесь же можно выбрать ту задачу, которую менеджер хочет запустить. Достаточно просто переместить её в столбец «In Bearbeitung», и вручную завершить задачу через контекстное меню.

Teams

Администратор может создавать команды в соответствии с их родом деятельности. Одна команда отвечает за тот или иной проект. Он представлен в виде доски, на которой расположены все задачи, относящиеся к этому проекту.

4

Feedback

Выполняя задачу, сотрудник может распоряжаться временем на ее выполнение по своему усмотрению. Завершив задачу, сотрудник отправляет ее на проверку ответственному менеджеру, который проверяет результаты задачи и может принять или отклонить их. При этом у них есть возможность обмениваться внутри чата советами, дать указания и комментарии к задаче.

4

Dashboard

5

На вкладке «Dashboards» 2 панели — Mitarbeiter для списка Workers и Aufgaben для списка задач:

Панель Mitarbeiter показывает сотрудников и их статус - в отпуске, на работе или дома:

Менеджер может изменить вид, чтобы отображались только те сотрудники, которые в данный момент на рабочем месте.

6

Здесь видно, как выглядит карточка задач в формате PDF. Основное её преимущество над физической карточкой — автоматически заполненные поля и возможность их редактирования. У сотрудников есть возможность выбрать задачу и распечатать соответствующую карточку.

Заключение

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