[Feature] My space - Employee POV - Ladder

[skorekm]

Requirements:

• According to the designs.
• The Leeder is the main view of the My Space
• At the top of My Space, the user's card displays basic details and information about the current and next levels:
  • Personal details: Avatar, full name and role
  • Current level: Band and score
  • Next level: Band and threshold
• Available tabs: Ladder, Score Card, Goals, Projects, Activity. Each tab is clickable and features a hover effect
  The user's ladder for the given role is displayed vertically, showing the user's progress:
  • Completed, active, and next bands have different icons, which can be found here
• In the center of the page, information about the current band is displayed:
  • Current band details: Name, salary range, threshold.
  • Buckets that the user needs to complete the current band include hard skills and soft skills:
    • Each skill features a title, short description, and information about the user's level for that skill.
    • Each skill has three advancement levels.
    • The current level that the user is attempting to complete is indicated by the number of green dots.
    • Once the skill is completed, the level indicators turn into the green label "Completed."
    • Each skill is clickable and redirects to a detailed view of the given skill (hard skill, soft skill)
    • The structure of the details of each skill is similar to that found in the CPF library here and here
    • Each advancement level and category is expandable. The completion of the skills in a given category is indicated by icons: link
      • Green: Completed
      • Red: Failed
      • Yellow: In progress
      • White: Pending
    • In the details of each skill, there is information about the current level or completion status of the given skill.
  • Users can navigate through completed, current, and next bands to check the required skills and thresholds.

Tasks:

• FE
• BE

Link to designs:

Figma