[PURIS FOSS] Enhance UI

[tom-rm-meyer-ISST]

Overview

Explain the topic in 2 sentences
UI has been reworked to React but still has some bad user experience. Update UI to follow the updated mockup.

What's the benefit?

• Better overall user experience, ease of use and navigation
• Information information can be better interpreted and contextualized by the user.
• Visual improvements and a modern design make the refeference implementation and the PURIS use case as a whole more appealing for potential users and thus create interest

What are the Risks/Dependencies ?#

• CX Styleguide?

Detailed explanation

Current implementation

• Basic react frontend
• simple and not very appealing presentation of PURIS data
• data is scattered in different views

Proposed improvements

• Follow the design mockup as a guideline
• implement a modern design
• Merge and harmonize different views
• use UI & style elements to make data easier to understand
• inlcude fixes for known bugs from the old UI

Feature Team

Contributors

• @ReneSchroederLJ

Committers

• @tom-rm-meyer-ISST

User Stories

• (Side Bar: Merge Stock View with Dashbaord puris#427)
• Side bar: Show the company name that I am logged in with puris#424
• Dashboard View: Rework concept for freshing data in the frontend after triggering partner update puris#422
• TBD

Acceptance Criteria

• UI has been reworked according to existing mock ups
• Stock View is merged to the other views
• Bugs and known issues from the old UI are fixed
• Automated Test coverage has been created

Test Cases

Test Case: E2E Test_05: Use Dashboard as Customer and Supplier

A supplier updates his data in the dashboard, A customer also updates data in the dashboard. Then both parties update the partner-related data and get the updated information.

Needed Variables:

• Supplier Frontend URL
• Customer Frontend URL

Preconditions

• The Customer PURIS (Frontend, Backend, EDC) is running.
• The Supplier PURIS (Frontend, Backend, EDC) is running.
• Both partners are onboarded to the INT environment.

Step 1

Actions

Open the PURIS FOSS Supplier application.

Expected Result

The application redirects to the INT central IDP instance.

Step 2

Actions

Login with user and password.

Expected Result

User logged in successfully. The user sees at least the following views:

• Stock View
• Supplier Dashboard

Step 3

Actions

1. Open Dashboard
2. Select Supplier Tab
3. Select Material Number "MNR-8101-ID146955.001"
4. Select Production Site "BPNS1234567890ZZ"
5. Update the value for Shipments by clicking the "+ Create Delivery" button.
6. In the resulting popup enter your delivery information.
7. Hit "save" to save your data in the puris database.
8. Repeat the same process for Planned Production
9. Keep the window open for step 7

Data

Delivery Information:

• Partner: "Control Unit Creator Inc."
• Destination: BPNS4444444444XX
• Estimated Time of Departure: Today
• Estimated Time of Arrival: Tomorrow
• Tracking Number: 1Z9829WDE02128
• Incoterm: "EXW"
• Quantity: 37
• Meaurement Unit: pieces
• Customer Order Number: "C-Nbr-1"
• Customer Oder Position: "PositionId-01"
• Supplier Order Number: "S-Nbr-1"

Planned Production:

• Estimated Time of Completion: Today at 18:00
• Quantity: 99
• Measurement Unit: pieces
• Partner: "Control Unit Creator Inc."
• Customer Order Number: "C-Nbr-1"
• Customer Oder Position: "PositionId-01"
• Supplier Order Number: "S-Nbr-1"

Expected Result

The inserted data is saved to the database and appears in the respective table cells

Step 4

Actions

1. Open the PURIS FOSS Customer application.

Expected Result

The application redirects to the INT central IDP instance.

Step 5

Actions

Login with user and password.

Expected Result

User logged in successfully. The user sees at least the following views:

• Stock View
• Supplier Dashboard

Step 6

Actions

1. Open Dashboard
2. Select Customer Tab
3. Select Material Number "MNR-7307-AU340474.002"
4. Select Production Site "BPNS4444444444XX"
5. Update the value for Material Demands by clicking the "+ Create Demand" button.
6. In the resulting popup enter your demand information.
7. Hit "save" to save your data in the puris database.
8. Select the Supplier Site "BPNS1234567890ZZ" from the Supplier Sites dropdown at the top of the page.
9. Click the "Refresh" button to trigger an EDC request for new data from your supplier.
10. Refresh the page and add the filters for Materialnumber, Site and Supplier Site again.
11. Compare the rows for delivery and planned Production with the data entered in step 3. Detailed Data is shown when the individual cells are clicked.

Data

Material Demand:

• Partner: Semiconductor Supplier Inc.
• Expected Supplier Location: "BPNS1234567890ZZ"
• Quantity: 99
• Measurement Unit: pieces
• Day: today
• Demand Category: "Default"

Expected Result

• The added Demand is successfully saved to the database and shown in the table.
• The data from step 3 is shown in the supplier information table.

Step 7

Actions

1. Return to the Puris FOSS Supplier application.
2. Filter by Customer Site "BPNS4444444444XX"
3. Click "Refresh" to request updated data from the customer.
4. Refresh the page and re-add the filters to show the customer information table.
5. Compare the row Demand with the data you entered in Step 6. For detailed information click the respective cell in the table.

Expected Result

The data from step 6 is shown in the customer information table

[stephanbcbauer]

Some hints from Release Management (@ther3sa) and Tractus-X Project Lead (@stephanbcbauer)

• Status currently in Inbox. ⇾ Only features with status backlog are considered in open planning
• Please add missing sections from the feature template, or fill them out
• Please add assignee (overall responsible person who drives the feature)

[Clemens-L-Schwarz]

Overview
Explain the topic in 2 sentences
UI has been reworked to React but still has some bad user experience. Update UI to follow the updated mockup.

What's the benefit?

• Better overall user experience, ease of use and navigation
• Information information can be better interpreted and contextualized by the user.
• Visual improvements and a modern design make the refeference implementation and the PURIS use case as a whole more appealing for potential users and thus create interest

What are the Risks/Dependencies ?

• CX Styleguide?

Detailed explanation
Current implementation

• Basic react frontend
• simple and not very appealing presentation of PURIS data
• data is scattered in different views

Proposed improvements

• Follow the design mockup as a guideline
• implement a modern design
• Merge and harmonize different views
• use UI & style elements to make data easier to understand
• inlcude fixes for known bugs from the old UI

Feature Team
Contributor
@ReneSchroederLJ
Committer
@tom-rm-meyer-ISST
User Stories

• (Side Bar: Merge Stock View with Dashbaord puris#427)
• Side bar: Show the company name that I am logged in with puris#424
• Dashboard View: Rework concept for freshing data in the frontend after triggering partner update puris#422
• TBD

Acceptance Criteria

• UI has been reworked according to existing mock ups
• Stock View is merged to the other views
• Bugs and known issues from the old UI are fixed
• Automated Test coverage has been created

Criteria 3

Test Cases

Test Case: E2E Test_05: Use Dashboard as Customer and Supplier
Assigned Team(proposal){{}}: PURIS FOSS
E2E Test Description: ** A supplier updates his data in the dashboard, A customer also updates data in the dashboard. Then both parties update the partner-related data and get the updated information.
Needed Variables:
-Supplier Frontend URL
-Customer Frontend URL

Preconditions
-The Customer PURIS (Frontend, Backend, EDC) is running.

The Supplier PURIS (Frontend, Backend, EDC) is running.
Both partners are onboarded to the INT environment.
Step 1
Actions
Open the PURIS FOSS Supplier application.

Expected Result
The application redirects to the INT central IDP instance.

Step 2
Actions
Login with user and password.

Expected Result
User logged in successfully. The user sees at least the following views:
-Stock View

Supplier Dashboard
Step 3
Actions
Open Dashboard
Select Supplier Tab
Select Material Number "MNR-8101-ID146955.001"
Select Production Site "BPNS1234567890ZZ"
Update the value for Shipments by clicking the "+ Create Delivery" button.
In the resulting popup enter your delivery information.
Hit "save" to save your data in the puris database.
Repeat the same process for Planned Production
Keep the window open for step 7
Data
Delivery Information:

Partner: "Control Unit Creator Inc."
Destination: BPNS4444444444XX
Estimated Time of Departure: Today
Estimated Time of Arrival: Tomorrow
Tracking Number: 1Z9829WDE02128
Incoterm: "EXW"
Quantity: 37
Meaurement Unit: pieces
Customer Order Number: "C-Nbr-1"
Customer Oder Position: "PositionId-01"
Supplier Order Number: "S-Nbr-1"
Planned Production:

Estimated Time of Completion: Today at 18:00
Quantity: 99
Measurement Unit: pieces
Partner: "Control Unit Creator Inc."
Customer Order Number: "C-Nbr-1"
Customer Oder Position: "PositionId-01"
Supplier Order Number: "S-Nbr-1"

Expected Result
The inserted data is saved to the database and appears in the respective table cells

Step 4
Actions
Open the PURIS FOSS Customer application.

Expected Result
The application redirects to the INT central IDP instance.

Step 5
Actions
Login with user and password.

Expected Result
User logged in successfully. The user sees at least the following views:

Stock View
Supplier Dashboard
Step 6
Actions
Open Dashboard
Select Customer Tab
Select Material Number "MNR-7307-AU340474.002"
Select Production Site "BPNS4444444444XX"
Update the value for Material Demands by clicking the "+ Create Demand" button.
In the resulting popup enter your demand information.
Hit "save" to save your data in the puris database.
Select the Supplier Site "BPNS1234567890ZZ" from the Supplier Sites dropdown at the top of the page.
Click the "Refresh" button to trigger an EDC request for new data from your supplier.
Refresh the page and add the filters for Materialnumber, Site and Supplier Site again.
Compare the rows for delivery and planned Production with the data entered in step 3. Detailed Data is shown when the individual cells are clicked.
Data
Material Demand:

Partner: Semiconductor Supplier Inc.
Expected Supplier Location: "BPNS1234567890ZZ"
Quantity: 99
Measurement Unit: pieces
Day: today
Demand Category: "Default"

Expected Result
The added Demand is successfully saved to the database and shown in the table.
The data from step 3 is shown in the supplier information table.

Step 7
Actions
Return to the Puris FOSS Supplier application.
Filter by Customer Site "BPNS4444444444XX"
Click "Refresh" to request updated data from the customer.
Refresh the page and re-add the filters to show the customer information table.
Compare the row Demand with the data you entered in Step 6. For detailed information click the respective cell in the table.
Expected Result
The data from step 6 is shown in the customer information tableom

[tom-rm-meyer-ISST]

Data

Took over into description and did some formatting