Seedlot registration test: UI/UX Issues

[mmarsoleta]

Seedlot details

1 - If user is TSC, then call to action button is to "REVIEW seedlot" (https://www.figma.com/design/ROgZJQezb1DDG4AvEgjtpw/TSC-Reviewer---Seedlot-Registration?node-id=2761-242444&t=3oWS6Dqr4Ydy02Qi-4)

2 - If the users is Orchard manager, then the call to action is to "View your seedlot" - since user can not edit "submitted" seedlots anymore. (https://www.figma.com/design/xOTQWn4xwyIYGJQPo1OXvm/Registration-process-A-class---New-Version?node-id=7168-238200&t=z0ji9uefVuz1iUg2-4)

In app the call to action is to Edit the seedlot form, but the form is all locked and nothing can be edited.

[mmarsoleta]

Seedlot details: Visual QA

There is an extra white margin at the bottom of the page. Page should end with the gray background

[mmarsoleta]

IMPORTANT

Menu:

"Seedlots" menu option should keep its active status when the user is using a "children" screen (Create seedlot, My seedlots, Review seedlot).

How it is now:

Expected:

[mmarsoleta]

Seedlot dashboard:

Table is expected to have HOVER interaction (valid for every table on the system).

now:

expected: https://www.figma.com/design/ROgZJQezb1DDG4AvEgjtpw/TSC-Reviewer---Seedlot-Registration?node-id=2928-405795&t=3oWS6Dqr4Ydy02Qi-4

Visual QA: ALL tables will have the zebra style (this is a minor issue)

[mmarsoleta]

IMPORTANT -- Accessibily: can not have layout break

Client search modal:

1. Button's search Icon and Label are above each other. The button's width should be "hug content" so the layout wont break according to the screen size.

2. Fields should adjust to the container width - Search for client or agency field width is set to "fill container" so there is no layout break even in smaller screen sizes.

now:

expected: (https://www.figma.com/design/rFkWfep2NnJMdXku4GTXTN/Search-flows?node-id=429-391797&t=cCsIfpgzyAgZr068-4)

[mmarsoleta]

Client search modal:

The item that is selected should have a different background color to visually indicate the selection now:

expected: using "layer-selected"

[mmarsoleta]

Client search modal:

1. Tables's background color should be white "layer-02" (https://www.figma.com/design/rFkWfep2NnJMdXku4GTXTN/Search-flows?node-id=429-445954&t=cCsIfpgzyAgZr068-4)

2. Search for client or agency field background should be "field-02" when filled.

3. Remove "To view more information about the client, you can go to client search screen" text since the link is not working. (or fix the link if necessary)

Visual QA: Apply selected client is missing its arrow icon. ->

[mmarsoleta]

Create new A-class seedlot:

For the "Specify A-class source" radio group, the font size is different than the others (bigger)

[mmarsoleta]

Seedlot registration:

The bottom buttons group should be aligned with the bottom of the page, always with 40px margin between the page's end and the buttons. This way buttons will not "move around" when changing the steps.

now:

expected: https://www.figma.com/design/xOTQWn4xwyIYGJQPo1OXvm/Registration-process-A-class---New-Version?node-id=5680-336134&t=1mm4TyowleOskYbL-4

[mmarsoleta]

Seedlot registration: Visual QA

There is an extra margin in both sides of the tab container , leaving a "white strip"on the left and right edges

[mmarsoleta]

Seedlot registration: Visual QA

Show the tooltip for the columns titles only when the title is truncate. (SMP succes...)

[mmarsoleta]

IMPORTANT

Seedlot registration submission:

Loader overflow should be over the enterer screen, not only the "body", so all interactions are blocked until the loading is complete, otherwise user could click on the menu items and go away to other page while the submission is not "loaded" yet.

[mmarsoleta]

Seedlot registration submission:

Submission is failing

Still in pending

[mmarsoleta]

Seedlot registration declaration:

Question: The "go to first step and review the form" should be a link, is it not feasible to implement? I don't remember.

Now:

Expected:

[mmarsoleta]

Global: Reset scroll position when changing pages

[mmarsoleta]

Review seedlot: Editing

Visual QA

"Delete" button on hover should be red, not blue as the primary button. (button-danger-hover)

[mmarsoleta]

IMPORTANT

Seedlot review: editing

TSC users should be able to edit the dates in extraction and temporary storage steps, even if the checkbox is checked (cause they are the ones who should be entering the dates if the checkbox is checked)

[mmarsoleta]

Review seedlot: Visual QA

The buttons "Send back to pending", "Approve seedlot" and "Save edits/Edit form" should be aligned at the bottom of the page (margin 40px)

[mmarsoleta]

Review seedlots table:

When filtering the number of items is returning as not a number

[mmarsoleta]

IMPORTANT

Review seedlot:

Clicking on "go to seedlot" with a blank seedlot field should return an error on the blank field (please, enter a seedlot number first") instead of 404 error.

https://github.com/user-attachments/assets/cf0707a9-0df4-4888-937c-376401a2fd44

[mmarsoleta]

My seedlots table:

Table should indicate hover action on the rows. Color will change to layer-01-hover or layer-02 hover.

[mmarsoleta]

Seedlot details:

Visual QA

Dark mode is a little different on this screen (not a 1x1 relation with the light theme)

Now:

Expected: (layout is outdated)

[mmarsoleta]

Seedlot registration: Visual QA

1. Space between cards are too little and not as expected
2. There is a line/border connecting the cards on the left and right edges
3. The subtitle "100% owner portion" is to big (expected 14px - helper-text) and does use secondary text as color
4. The "xxx% owner portion" should be empty if owner portion is not filled (--% owner portion) as a placeholder. (https://www.figma.com/design/xOTQWn4xwyIYGJQPo1OXvm/Registration-process-A-class---New-Version?node-id=1491-269626&t=z8IakL1UVcfwggda-4)
5. The space/gap between the first (owner agency...) and second row (funding source...)is too big
6. The space between the delete owner button and the field above is not as expected.

now:

expected: https://www.figma.com/design/xOTQWn4xwyIYGJQPo1OXvm/Registration-process-A-class---New-Version?node-id=5680-338544&t=z8IakL1UVcfwggda-4

[mmarsoleta]

Seedlot registration: Visual QA

Not enough space between the add/delete additional orchard button and the new section below it (expected 48px between sections)

now:

expected:

[mmarsoleta]

Seedlot registration: Visual QA

Inside orchard step, there is not enough space between the last item "pollen contamination" radio group and the buttons group below it. Should be 48px between sections.

now:

expected:

[mmarsoleta]

Seedlot registration: Visual QA

Empty tables's background should be white (layer-02)

now:

expected:

[mmarsoleta]

Seedlot registration: Visual QA

Space between table and parent tree contribution is too large (expected 48px)

now:

expected:

[mmarsoleta]

Visual QA: shortcuts

1. Focus The focus should have 2px border and 1px outline/distance from the component (accessibility criteria) (e.g. like the buttons)

Now:

Expected: (https://www.figma.com/design/uYkTMUe6vlzOPmRpsIQCen/Home%2C-Notifications-and-Settings?node-id=1497-66385&t=9rv4cBdHq1e9xnxj-4)

Menu overflow hover (...) inside "highlight" card doesn't have enough contrast between background and icon during hover - could use hover color as "primary-button-hover" or set the icon color to "primary-icon"

now:

[mmarsoleta]

TAB: Tab order is not working on dashboard screens.

expected: Focus should go to the card (It's a clickable component), then to the menu overflow that if clicked (enter), should open the focus on which menu list item individually.

now: skip the cards and go to the menu overflow, that if clicked, doesn't show the focus on its items individually.

[mmarsoleta]

IMPORTANT

The ERROR toasts should not auto-dismiss after a few seconds, but only when the user clicks on the "x"(close) button.

[mmarsoleta]

When reviewing approved seedlot, interface should display a banner saying that this seedlot has already been reviewed and approved before.

now:

expected: (https://www.figma.com/design/ROgZJQezb1DDG4AvEgjtpw/TSC-Reviewer---Seedlot-Registration?node-id=4435-209329&t=TQYHBwjOl9UkmTl6-4)

[mmarsoleta]

QUESTION: We will not be able to send to seedlot back to pending status if seedlot is approved? Current the buttons are missing.

[mmarsoleta]

VISUAL QA:

Review page and seedlot form pages have horizontal scroll. We should not have horizontal scroll in the interface, expect for a few components like tabs, tables, etc.

[mmarsoleta]

IMPORTANT @RMCampos @mgaseta

Approved date seems off, I just approved the seedlot and yet the approved date is Jul 02 - Before creation.

[mmarsoleta]

Submit registration button is enabled for a already submitted or approved seedlot (62103 - SX: ADM acccount)