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.
Requirements:
Tasks:
Link to designs:
Figma