[FE] Project flow

[r1skz3ro]

Requirements:

• According to the designs.
• The Create project flow can be accessed by clicking the "+ Create project" buttons on the Project tab of My space
• The Create project flow has 2 stages:
  • Project details - users fill up the following details:
    • Project title: text input
    • Project type: dropdown, allows user to select only one option from the list:
      • Course
      • Kellton project
      • Proof of concept
      • Case study
      • Other - if this opinion is selected, the "Please clarify" text input appears under the Project type
    • Project details - rich text input
      The 'Continue' button in the bottom right corner becomes active ONLY when all fields are filled out. The button has a hover effect Figma. When users click it, they are redirected to the next stage.
  • Project scope:
    • The first step is to select the bucket to which the project should apply.
    • The user selects a bucket from the dropdown. In MVP, there are no limitations when selecting a scope. dropdown displays all buckets, including soft skills.
    • When the bucket is selected from the dropdown, the list of advancement levels is displayed below. Only advanced levels/categories/skills that have yet to be completed are displayed. The user can select the advancement level it refers to by clicking the checkbox next to it; more than one checkbox can be selected.
    • The trash bin icon is displayed in the top right corner of the frame. It allows the deletion of the selected bucket, which disappears from the list. When only one bucket is selected, the page returns to the initial state of the Project scope stage.
    • Each advancement level can be expanded, and the user can select a particular skill the given project refers to. There is a Select All checkbox that marks all skills when selected.
    • More than one bucket can be selected for a given project. When the user selects the advancement level for the first bucket, the "+ Bucket" button becomes active, and another tile with the bucket selections appears.
    • Soft skills:
      • When selecting soft skill buckets from the dropdown - Display all soft skill buckets per each band (even when they are duplicating).
      • When clicked on any soft skill bucket (eg “Time management” show all skills from that bucket divided by bands.
      • Allow select skills from any band.
      • When selected at least 1 soft skill from that bucket disable that bucket on a drop down list > a user would have to navigate to the previously selected bucket container with previously selected skills from different bands.
      • When the project is submitted, in scope, display one container per each soft skill bucket (even if they are from different bands), and underneath the bucket title, display “Bucket numbers & the # of skills (e.g., “Band 3, 4, 5, 6 - 63 skills”)
  • The top section of the page contains the following buttons:
    • Cancel - cancels the whole process no matter what stage the user was on. No changes are saved. It is always active. The pop-up is displayed
    • Save as a draft saves the progress no matter what stage the user is on. It's always active. It closes the project creation flow and returns the user to the Projects tab. The project appears in the Pending column with the status 'Draft' link
    • Submit to manager - it's only active when the project details and scope are fully filled (all details and at least one bucket properly chosen). The pop-up is displayed.
    • ... - There is a Delete option in the context menu. When it is clicked, the pop-up is displayed. When it is confirmed, the progress is deleted, and the project isn't visible on the Projects tab

Link to designs:

https://www.figma.com/design/B8kHltTqt6HZ8jR98qcPAe/CPF-(Full-version)?node-id=629-72163&t=bvSIvBBQjBAHQOyt-0