[Feature] People - Manager POV - main view

[skorekm]

Requirements:

• According to the designs.
• There 3 Tabs available in the People section:
  • Active
  • Drafts
  • Deactivated
• Each tab contains users with a particular status assigned to them
• The "+ Employee" button in the top right corner of the page redirects to the new employee profile creator when clicked.
• The button has a hover effect link
• The list of the employees is a table containing different columns for each tab:
  • Active:
    • Employee - avatar, name, and surname of the employee, their role, and current seniority (it could contain more than one role)
    • Ladder - role ladder that an employee is currently assigned to (it could contain more than one ladder)
    • Current Band - number of the current band
    • Active Goal - this row shows a green tick when a given employee has an active goal
    • Goal Progress - percentage of completion of the goal displayed on the progress bar
    • Latest Activity - number of the latest activities performed by a given employee
    • "3 Dots" - clicking it shows available options - "Manage account" link
  • Drafts:
    • Employee - avatar, name, and surname of the employee, their role, and current seniority (it could contain more than one role)
    • Ladder - role ladder that an employee is currently assigned to (it could contain more than one ladder)
    • Current Band - number of the current band
    • Action - actions available for a given draft of the employee profile: Resume - allows to continue editing the profile, Activate employee - activates account in the system (user will be visible in Active tab)
    • "3 Dots"- clicking it shows available options - "Delete user" link
  • Deactivated:
    • Employee - avatar, name, and surname of the employee, their role, and current seniority (it could contain more than one role)
    • Ladder - role ladder that an employee is currently assigned to (it could contain more than one ladder)
    • Current Band - number of the current band
    • "3 Dots" - clicking it shows available options - "Manage account", "Activate employee" link
• The height of the table is fixed and determined by the size of 10 rows.
• The table can be filtered out by:
  • The current band dropdown allows the user to choose the desired band number for the searched employee. Clicking on the dropdown shows available options. All filters are single-select. When any option is selected, it can be clear by clicking the "X" button or choosing another option from the dropdown. The selected filter has a hover effect link
• At the bottom of the page:
  • in the left corner, there is an indicator showing the number of displayed records
  • in the right corner, there is the page indicator showing 3 numbers of pages:
    • The current page and 2 following pages(when the user is on the 1st page)/ previous and next pages/ 2 previous pages (when the user is on the last page). Each number is clickable and redirects the user to the given page
    • On the left and right, there are arrows that allow you to change the page by clicking on them. The left arrow is for the previous page, and the right arrow is for the next page.

Tasks:

• FE
• BE

Link to designs:

Figma