Company Registration Management Board Update

[jjeroch]

Summary:

Implement UI updates to the company registration management board as per new design specifications. https://www.figma.com/file/pcHZWXTQJUguIT75QSk9KW/Portal-Designs?type=design&node-id=10264-91921&mode=design&t=crdTqWqhlypgtwRS-0

Description:

This ticket involves several UI changes to the company registration management board. The updates include removal of certain elements, design changes, and enhanced error handling. The goal is to improve the user experience and provide clearer information regarding the registration process.

Requirements:

1. Redesign List of Records:

   • Update the list of records to match the provided design image.
   • Remove the "Documents" column from the list. Documents will be accessible via the detail overlay.

2. Rearrange Column Order:

   • Implement the new column order as specified in the design image.

3. Age Calculation:

   • Replace the display of the dateCreated with the calculated age of the registration.
   • Age should be calculated from the dateCreated to the current date.

4. Progress Circle Implementation:

   • Remove the current progress bar from the UI.
   • Introduce a new progress circle to represent the status of checks.
   • The progress circle should be red if any status is "failed", otherwise it should be green.
   • Display the number of closed checks out of the total number of checks in the center of the progress circle.

5. Status and Cancel Option Display:

   • Next to the progress circle, display the actual status of the registration.
   • Include a cancel option that turns red on hover.
   • The cancel option should be clickable only when the application state is "SUBMITTED".

Acceptance Criteria:

• The company registration status accurately reflects the backend state.
• Error messages are displayed appropriately and clearly.
• The list of records matches the new design and the column order is correct.
• The age is calculated correctly and displayed where the dateCreated was previously shown.
• The progress bar is replaced with a progress circle that changes color based on the status.
• The number of closed checks is correctly displayed in the center of the progress circle.
• The actual status and cancel option are displayed as per the new design.
• The cancel option changes color on hover and is only interactive when conditions are met.

Design References:

Result list element

Different stages

Possible Process Step status as per DB:

• "TO_DO"
• "IN_PROGRESS"
• "DONE"
• "FAILED"

Stage coloring & calculation

Overlay 01

Overlay 02

not yet existing

Technical Notes:

• Ensure that the frontend changes are compatible with the current backend API.
• Implement responsive design to accommodate different screen sizes.

Deployment Plan:

• Merge the feature branch into the release branch upon approval
• Deploy to the rc.dev environment for QA testing

Linked tickets

• [ ] https://github.com/eclipse-tractusx/portal-backend/issues/685

[jjeroch]

Hi @nidhigarg-bmw can you please make the following button clickable: