On screen, one to many mapping and then many to many mapping is present,so I want to enforce the user to complete flow. Need better UX for it

We are working on a web application where we need to create a screen which will have number of attributes. The screen has one to many mapping and then many to many mapping due to which the design of screen is becoming complicated and need your suggestion. We have an item which is associated with a Group and Group in turn is associated with Category as my attributes. For example: We want to purchase a mouse [Item] that is associated with a Group and that have multiple features or specification which is linked to Category.

Scenario: We need a screen for adding an invoice which contains the following: 1. Number of elements 2. Add items like Mouse1, Mouse2, Keyboard2 3. For adding an item, a select group of that item. 4. As you select group then your attributes for that will be selected. 5. Give the values to all attributes and add items. 6. After adding items, Add invoice

Approach 1: On the invoice, we first update the elements required for Invoice generation like No, Date, Address, etc. While adding the items, select the Group from the drop-down and after selecting the Group, the associated category attributes will be displayed for entry. We can have multiple items on an invoice as inline unique attributes with button to add, update, delete, Save items, etc. [Refer Screen 1]

Problem: Looking for a good UX design by which multiple items can be added on a single screen and save all the data once the SAVE button is pressed.

enter image description here

Approach 2: On the invoice, we first update the elements required for Invoice generation like No, Date, Address, etc. While adding the items, select the Group from the drop-down and after selecting the Group, the associated category attributes will be displayed for entry. Here we are having quantity as fixed attributes. As we will give values to quantity and then click on “GO” then pop will open which will have insert template. Insert template count will depend on the quantity. Fill the unique attributes values and click on save.

Problem: Click on "go" to display pop up is also not good UX. enter image description here Can you please suggest me better UX for this flow.

Tags: