RS-Clone

[Buffik]

1. Task: https://github.com/rolling-scopes-school/tasks/blob/master/tasks/rsclone/rsclone.md

2. Screenshot:
   

3. Deploy: https://rs-crm-sales.netlify.app/
   Для авторизации можно использовать:

• логин b@gmail.com (Руководитель);
• логин d@gmail.com (Продавец);
• логины других пользователей, которых вы увидите, зайдя под профилем руководителя;
• логины пользователей, которых вы создадите, зайдя под профилем руководителя.
  У существующих пользователей пароли 123321123, просим их не менять.

5. Done 27.02.2023 / deadline 28.02.2023
6. Score: 620 / 620

CRM-Sales

CRM-Sales - это инструмент для управления и контроля рабочего процесса внутри небольшой компании, занимающейся продажами товаров и услуг. Он помогает планировать и управлять продажами и коммуникацией с лидами и клиентами.

Основной функционал приложения

Для реализации управления внутренних бизнес-процессов компании были созданы три основные сущности:

• Продавец (работник компании на должности специалиста по работе с клиентами)
• Руководитель
• Администратор
  В зависимости от текущей роли авторизованного пользователя доступный функционал будет отличаться.
  Администратор и Руководитель могут создавать новых Продавцов и Руководителей, а также удалять их и восстанавливать. Пользователь не имеет доступа к вкладке с управлением пользователями "Сотрудники / Employees"

В качестве инструментов для работы используется три вида данных:

• Клиенты. Это сторонние компании, с которыми сотрудники ведут деловые отношения. За каждым клиентом должен быть закреплен свой специалист по работе с клиентами и / или руководитель (данный функционал реализован на странице "Клиенты / Clients" и доступен пользователям с ролями Администратор и Руководитель).

  • Клиент содержит в себе следующие поля:
    • Наименование (обязательное поле)
    • e-mail (необязательное поле)
    • телефон (обязательное поле)
    • ИНН (обязательное поле)
    • адрес (необязательное поле)
    • привязка активного сотрудника (только для Администратора и Руководителя)
  • Доступные действия с клиентами:
    • Создание (могут все пользователи)
    • Привязка Продавца к компании: если компанию создает пользователь с правами Продавца, то он привязывается к созданной компании автоматически, если компанию создает пользователь с правами Администратора и Руководителя, то ему доступно поле с множественным выбором возможных активных Продавцов.
    • Редактирование: Продавцу доступны для редактирования компании, привязанные именно к нему, Администратор и Руководитель видят все созданные компании, имеют возможность отвязать и / или привязать новых Продавцов к выбранным клиентам
    • Удаление: Администратор и Руководитель могут удалить компанию - компании присваивается дезактивирующий флаг и она убирается из пулла данных, отправляемых сервером
    • Восстановление: Администратор и Руководитель могут восстановить компанию. Для этого реализован специальный селект на странице с клиентами

• Задачи. При помощи задач Продавцы и Руководители ведут хронологию взаимодействия с клиентом. Особенности задач

  • Разделяются на 4 типа: звонок, расчет, встреча, задача (подразумевается обобщенный тип)
  • Имеют 3 состояния: просрочены, выполнены и в процессе выполнения
  • Задача содержит в себе следующие поля:
    • время старта задачи (обязательное поле)
    • время окончания задачи (обязательное поле)
    • дату (день, месяц, год) (обязательное поле)
    • заголовок (обязательное поле)
    • описание (необязательное поле)
    • вид задачи (обязательное поле)
    • компанию, к которой привязана задача (обязательное поле)
    • селект, который меняет состояние задачи (необязательное поле)
  • Доступные действия с задачами:
    • Создание - доступно всем пользователям
    • Редактирование: пользователи с ролью Продавец могут видеть только те задачи, которые привязаны к непосредственно их клиентам, Администратор и Руководитель видят все задачи, созданные пользователями
  • Основной функционал с темплейтом и различные особенности отображения на разных страницах более подробно описан в блоке с баллами

• Контакты. Это список контактов сотрудников компаний-клиентов, с которыми пользователи ведут взаимодействие

  • Контакт содержит следующие поля:
    • ФИО
    • e-mail
    • телефон
    • дата рождения
    • после с привязкой к компании (доступно только в момент создания контакта)
  • Контакты доступны только со страницы "Контакты / Contacts".
  • Доступные действия с контактами:
    • Создание: пользователи с ролью Продавец могут создавать контакты и привязывать их только к своим компаниям, Администратор и Руководитель могут создавать любые контакты
    • Редактирование: пользователи с ролью Продавец могут редактировать контакты только у своих компаний, Администратор и Руководитель могут редактировать любые контакты. Отсутствует возможность привязать контакт к другой компании для всех пользователей
    • Удаление: пользователи с ролью Продавец могут удалять контакты только у своих компаний, Администратор и Руководитель могу удалять любые контакты. Контакты удаляются безвозвратно (без возможности восстановления, как у Клиентов)

Различия, фичи и особенности поведения / рендера приложения описаны ниже по пунктам: backend + отдельно по каждой странице.

Backend 180 баллов:

Репозиторий

• Сервер написан с помощью фреймворка Express.JS, с разделением кода на сервисы, контроллеры и миддлвары (+10 баллов)
• Используется REST API (варианты запросов в README сервера выше по ссылке) (+20 баллов)
• Используется база данных MongoDB и ODM Mongoose:
  • Созданы коллекции "Пользователи", "Компании", "Задачи", связанные друг с другом с помощью виртуальных полей. Также создана коллекция "Токены", не связанная с остальными (+20 баллов)
  • Написано несколько десятков запросов к БД на получение, создание, изменение, удаление данных, в том числе сложных запросов на получение, где данные объединяются, фильтруются, группируются**(+15 баллов)**
• Реализована авторизация пользователей (JWT-токены, refresh-токены). JWT-токены записываются в localStorage пользователя и действуют 15 минут. Refresh-токены хранятся на сервере, а также записываются в cookie у пользователя. Refresh-токен нужен для получения нового JWT-токена по истечении 15 минут. Максимальный срок действия refresh-токена 15 дней. Хранение refresh-токенов реализовано таким образом, что один пользователь может оставаться авторизованным одновременно с разных устройств (+35 баллов)
• Контролируется доступ пользователя к данным в зависимости от его роли (можно проверить с помощью запросов через Postman. Варианты запросов описаны в README сервера) (+15 баллов)
• Валидируются входные данные при создании/редактировании сущностей (также можно проверить с помощью запросов через Postman) (+15 баллов)
• Реализованы Server-Sent Events:
  • Фронтенд поддерживает постоянное соединение с сервером; при создании, изменении или удалении клиентов, контактов, пользователей сервер отправляет на фронтенд обновленные данные. Например, пользователь меняет номер телефона у себя в профиле, у руководителя на странице пользователей это изменение тут же отображается (+40 баллов)
  • При сбросе соединения происходит происходит запрос новых токенов и переподключение (+10 баллов)

Страница авторизации 20 баллов:

• является стартовой страницей
• реализована возможность смены языка во всем приложении (+10 баллов)
• выбор языка сохраняется в localStorage и запоминается при обновлении страницы (+5 баллов)
• содержит футер согласно ТЗ (+5 баллов)

Панель навигации 45 баллов:

• недоступна неавторизованным пользователям (+5 баллов)
• рендер ссылок зависит от роли авторизованного пользователя (+5 баллов)
• есть кнопка LogOut'а (+5 баллов)
• есть кнопка для переключения языка. Для авторизованного пользователя настройки языка берутся из настроек его профиля, а если в его профиле еще не указан язык, то из localStorage. При изменении языка он сохраняется в профиле пользователя на сервере и в localStorage (+10 баллов)
• при клике на аватар пользователя открывается модальное окно для изменения данных текущего пользователя. Продавцы могут менять строго ограниченные поля: почту, пароль, телефон. Администратор и Руководитель могут менять все поля (+10 баллов)
• в модальном окне изменения данных пользователя есть валидация полей (также валидация полей есть в модальных окнах для добавления и редактирования сотрудников, клиентов, контактов) (+10 баллов)

Главная страница с календарной сеткой 85 баллов

Основной функционал

• после того как пользователь успешно проходит авторизацию, его перенаправляет на стартовую страницу с календарной стекой текущего месяца с выделением текущего дня (+10 баллов)
• реализована возможность выбора месяца и года (+10 баллов)
• на темплейте каждого дня выбранного месяца показываются задачи, которые были созданы в этот конкретный день (+10 баллов)
• дни месяца (+15 баллов)
  • задачи разбиваются на три разных вида: просроченные, завершенные, в процессе выполнения. Тип задачи выделяется цветом (+10 баллов)
  • каждый день является ссылкой для перехода на страницу с задачами, где будут отображаться задачи, созданные конкретно в этом дне (+5 баллов)
• реализовано переключение на вид с отображением недельного промежутка (+10 баллов)
• неделя (+37 баллов)
  • присутствует progress bar, отображающий количество выполненных задач для выбранного дня (+10 баллов)
  • присутствует возможность навигации по неделям, реализована возможность перехода на страницу с задачами выбранного дня (текстовая ссылка "К задачам / To tasks") (+10 баллов)
  • показываются задачи выбранного дня (+5 баллов)
  • реализована возможность редактирования конкретной задачи по кнопке с иконкой карандаша. При клике на кнопку открывается модальное окно с данными выбранной задачи (+15 баллов)

Различие у разных авторизованных пользователей

• Обычные пользователи видят только задания, которые они создавали самостоятельно (баллы учтены в секции Backend)
• Администратор и Руководители видят задания всех пользователей (баллы учтены в секции Backend)

Страница с задачами 165 баллов

Основной функционал

• в шапке страницы отображается день, который был выбран на странице Календаря, если пользователь впервые перешел на эту страницу, будет отображаться текущий день. Создана легенда, показывающая пользователю соотношение цвета темплейта задачи с его типом или статусом (+5 баллов)
• На странице реализована область с временной шкалой: сутки разбиты на 48 равных частей по 30 минут каждая. При начальном рендере страницы происходит скролл к временной шкале 8:00. Каждая область кликабельна, при клике на эту область открывается модальное окно с созданием задачи с уже предустановленным временем старта задачи. Время устанавливается согласно значению, указанному в области. (+10 баллов)
• Отображение задач на временной области (+20 баллов):
  • Если текущий день содержит какие-либо задачи, то они рендерятся на временной области и занимают определенное положение согласно времени старта и окончания задачи (+10 баллов)
  • Задачи сортируются, им задается ширина в зависимости от пересечения времени начала и окончания и располагаются в таком порядке, чтобы была возможность взаимодействия с ними (+10 баллов)
• Возможные манипуляции с задачами (реализовано без использования сторонних библиотек на нативном React) (130 баллов):
  • Задачи могут перемещаться по временному полю только в вертикальной плоскости (+10 баллов)
  • Высота темплейта задач может быть увеличена или уменьшена по нажатию на верхнюю или нижнюю часть и перетаскиванию мыши с зажатой кнопкой (+ 10 баллов)
  • Задачи автоматически "прилипают" к ближайшему временному отрезку как при перемещении, так и при изменении размеров (+10 баллов)
  • После перемещения задачи или изменения её размеров происходит процесс сравнения: если задача осталась на своем месте, то ничего не происходит, если текущее положение отлично от изначального, то собираются данные по изменненому состоянию, происходит калькуляция изменившегося времени начала и окончания задачи, данные отправляются на сервер (в этот момент и до получения обновленных данных с сервера взаимодействие со страницей перекрывает кастомный спиннер), с сервера запрашиваются новые данные, обновляется расположение задач на временном поле а также время начала и окончания у измененной задачи (+50 баллов)
  • Положение задачи валидируется: её невозможно вынести за пределы временного поля или изменить размер, если мышь в процессе переноса задачи покидает область темплейта этой задачи, то дублируется логика перемещения (задача прилипает к ближайшей временной шкале, запускается процесс сравнения и т.д.) (+30 баллов)
  • Реализована возможность корректировки уже созданной задачи (+10 баллов)
  • Поля внутри модального окна редактирования / создания задачи валидируются: невозможно скорректировать / создать задачу с невалидными полями со временем, пустым заголовком и привязанной компанией (+10 баллов)

Различие у разных авторизованных пользователей

• Обычные пользователи видят только задания, которые они создавали самостоятельно (баллы учтены в секции Backend)
• Администратор и Руководители видят задания всех пользователей (баллы учтены в секции Backend)

Клиенты 60 баллов

Основной функционал

• На странице находится список клиентов с возможностью редактирования, создания нового клиента и поиска (+30 баллов)

Различие у разных авторизованных пользователей

• Обычные пользователи при создании клиента автоматически к нему привязываются (+10 баллов)
• Администратор и Руководители видят дополнительное поле с выпадающим списком всех активных пользователей и могут произвести множественную привязку пользователей к создаваемому или редактируемому клиенту (+10 баллов)
• Администратор и Руководители могут удалять любых клиентов. Удаление означает перевод статуса компании в неактивное состояние: все задачи, связанные с этой компанией не будут отправляться сервером, она исчезнет у Продавцов из списка доступных компаний. Также есть возможность восстановления компании (+10 баллов)

Контакты 15 баллов

Основной функционал

• На странице находится список контактов с возможностью редактирования, создания нового контакта и поиска (учтено в клиентах)

Различие у разных авторизованных пользователей

• Создание: пользователи с ролью Продавец могут создавать контакты и привязывать их только к своим компаниям, Администратор и Руководитель могут создавать любые контакты (+5 баллов)
  • Редактирование: пользователи с ролью Продавец могут редактировать контакты только у своих компаний, Администратор и Руководитель могут редактировать любые контакты. Отсутствует возможность привязать контакт к другой компании для всех пользователей (+5 баллов)
  • Удаление: пользователи с ролью Продавец могут удалять контакты только у своих компаний, Администратор и Руководитель могу удалять любые контакты. Контакты удаляются безвозвратно (без возможности восстановления, как у Клиентов) (+5 баллов)

Сотрудники20 баллов

Основной функционал

• Данная страница видна только пользователям с ролью Администратор или Руководитель (+5 баллов)
• Реализована возможность редактирования всех полей пользователей. Единственный, кто не доступен для просмотра и редактирования из этой страницы - Администратор: этого пользователя невозможно удалить или переназначить ему роль. (+10 баллов)
• Пользователя невозможно удалить, если есть компании к которым он привязан (+5 баллов)
• Удаленный пользователь не сможет больше войти в систему (баллы учтены в секции Backend)
• Реализована возможность восстановления пользователя (баллы учтены в Клиентах)

Общий вид и функционал 30 баллов

• Приложение имеет общий стиль благодаря использованию библиотеки компонентов MaterialUI (+10 баллов)
• Взаимодействие с сервером (в том числе работа с токенами авторизации) реализовано через библиотеку Axios (+10 баллов)
• В качестве использования общего хранилища данных используется библиотека Redux Toolkit. Взаимодействие с хранилищем и сервером реализовано при помощи Redux AsyncThunk. (+10 баллов)

Используемые библиотеки

Фронтенд:

• React
• Redux Toolkit
• Redux AsyncThunk
• Axios
• MaterialUI
• Sass

Бэкенд:

• Express.JS
• MongoDB
• Mongoose
• bcryptjs
• cookie-parser
• cors
• express-validator
• jsonwebtoken