ZeroDark - это система проектного менеджмента, веб-приложение для управления персоналом и задачами на судостроительной верфи Ophardt Maritim. Это приложение позволяет менеджерам управлять командами и процессами по производству моторных лодок. Есть 3 основные роли пользователя: менеджер, работник и админ системы.
О клиенте
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
На этой вкладке менеджеры могут видеть все свои задачи. Время, необходимое для выполнения задачи, выделено цветом:
- Зеленый означает, что прошло 0-33% времени, задача только запущена
- Оранжевый, 33-66%, еще осталось время на выполнение задачи
- Красный, 66-100%, дедлайн очень близок
У менеджера и пользователя может быть несколько обычных задач и только одна специальная (STC). При нажатии на задачу открывается модальное окно с информацией о ней. Менеджер может изменять статус задачи и оставлять к ней комментарии.
Workers
В разделе «Workers» находится список сотрудников и информация о них: отдел, имя и фамилия, команда, статус задачи и т. д.
Менеджер может создавать новых работников, редактировать их данные, сортировать записи в таблице по всем столбцам, искать работника по имени.
Также он вправе изменить статус работника через контекстное меню.
Также он вправе изменить статус работника или дать ему статус бездействия через контекстное меню, переключить вид и посмотреть только бездействующих работников, нажав кнопку «Inaktive Mitarbeiter anzeigen».
Boards
В этом разделе менеджер видит список команд и Канбан-досок внутри них. Также там видно сколько активных задач выполняется на определенной доске, и можно создать новую доску для команды.
Задачи сгруппированы в зависимости от их статуса. Есть черновики задач, задачи, находящиеся в процессе выполнения, ожидающие проверки и выполненные.
Доска канбан имеет 4 основных и один дополнительный столбец, называемый STC. Столбец STC отображается, если при создании доски была выбрана соответствующая опция.
В одном из двух столбцов — Tätigkeit и Production имеется возможность создать черновик. Здесь же можно выбрать ту задачу, которую менеджер хочет запустить. Достаточно просто переместить её в столбец «In Bearbeitung», и вручную завершить задачу через контекстное меню.
Teams
Администратор может создавать команды в соответствии с их родом деятельности. Одна команда отвечает за тот или иной проект. Он представлен в виде доски, на которой расположены все задачи, относящиеся к этому проекту.
Feedback
Выполняя задачу, сотрудник может распоряжаться временем на ее выполнение по своему усмотрению. Завершив задачу, сотрудник отправляет ее на проверку ответственному менеджеру, который проверяет результаты задачи и может принять или отклонить их. При этом у них есть возможность обмениваться внутри чата советами, дать указания и комментарии к задаче.
Dashboard
На вкладке «Dashboards» 2 панели — Mitarbeiter для списка Workers и Aufgaben для списка задач:
Панель Mitarbeiter показывает сотрудников и их статус - в отпуске, на работе или дома:
Менеджер может изменить вид, чтобы отображались только те сотрудники, которые в данный момент на рабочем месте.
Print card
Здесь видно, как выглядит карточка задач в формате PDF. Основное её преимущество над физической карточкой — автоматически заполненные поля и возможность их редактирования. У сотрудников есть возможность выбрать задачу и распечатать соответствующую карточку.
Заключение
Мы создали отзывчивую, интуитивную и привлекательную CRM систему для отслеживания задач сотрудников и состояние их работ. Решили проблему большого числа бюрократических операции, избавившись от бумажной системы документооборота. Теперь все внутренние процессы на судостроительной верфи отображаются в единой системе.
