search

fecgov / fecfile-web-app

Other
7 stars 4 forks source link

UI: FECFile Online Dashboard #1908

Closed AureliaKhorsand closed 2 months ago

AureliaKhorsand commented 5 months ago

Business Reason As the UX Principal, I would like to start iterating on the dashboard so it will more closely match the original intend of the page.

Acceptance Criteria

Create placeholders for 3 different sections:

  1. in-progress reports
  2. Cash-on-hand
  3. Recently submitted reports

In-progress –

Cash-on-hand –

Recently submitted reports –

1400xxl

  1. In-progress reports Grey box = w558 x h404 White box = w518
  2. Cash on-hand Grey box = w558 x h154 White box = w518 x h86
  3. Recently submitted reports Grey box = w558 x h578 White box = w518 x 482

1200xl

  1. In-progress reports Grey box = w454 x h404 White box = w414
  2. Cash on-hand Grey box = w454 x h154 White box = w414 x h86
  3. Recently submitted reports Grey box = w454 x h578 White box = w414 x 482

992lg

  1. In-progress reports Grey box = w704 x h404 White box = w664
  2. Cash on-hand Grey box = w704 x h154 White box = w664 x h86
  3. Recently submitted reports Grey box = w704 x h578 White box = w664 x 482

768md

  1. In-progress reports Grey box = w512 x h404 White box = w472
  2. Cash on-hand Grey box = w512 x h154 White box = w472 x h86
  3. Recently submitted reports Grey box = w512 x h578 White box = w472 x 482

576sm

  1. In-progress reports Grey box = w512 x h404 White box = w472
  2. Cash on-hand Grey box = w512 x h154 White box = w472 x h86
  3. Recently submitted reports Grey box = w512 x h578 White box = w472 x 482

QA Notes

DEV Notes

the fixed div width inside each breakpoint

Design

Wireframes 1400xxl – Image

1200xl – Image

992lg – Image

768md – Image

576sm – Image

FECFILE-400

MitchellTCG commented 4 months ago

@JonellaCulmer please review

JonellaCulmer commented 4 months ago

@MitchellTCG Do we want to reconsider the appearance if we're dropping the gray background elsewhere? I'm wondering if we should also drop the tips for treasurers now until we have a method to populate that section.

MitchellTCG commented 4 months ago

@GreggMoreland please review this ticket and place into ADTQR if it looks good to you

MitchellTCG commented 4 months ago

@MitchellTCG remove tips for treasurers

AureliaKhorsand commented 4 months ago

@MitchellTCG are you able to remove the tips for treasurers so this can be ready for the next sprint?

MitchellTCG commented 3 months ago

@JonellaCulmer Tips for treasurers removed from mocks

sasha-dresden commented 3 months ago

Development done. Need to code review with @MitchellTCG

sasha-dresden commented 3 months ago

Reviewed with @MitchellTCG and made some minor tweaks for centering the dashboard, font updates and spacing. And made the "Start a different report" open the "Create a Report" dialog on this page, rather than redirecting to the report page. Fixes in and PR created.

mjtravers commented 3 months ago

From CR:

The "Manage reports" link is going to the "Security notifications" page.

Should this ticket be populating the "In-progress Reports" section? If so, some of the report types are not displaying in the list.

Image

Sending ticket back to In Progress.

sasha-dresden commented 3 months ago

Ah, I see the issue. It only happens when you have not chosen to confirm for a year. I changed it from an href to angular's routerLink and it works as expected for that situation now.

As for the "In-progress Reports" section that's more of a work in progress. There will be a later ticket for building that out which will provide how that will function fully. All I wanted to do was make sure that when there are multiple reports the white boxes that will eventually be filled with data, are arranged properly. The screenshots showed 2 but the AC mentioned the total area, so I built this out as a placeholder till we get the official version.

mjtravers commented 3 months ago

@sasha-dresden Thanks for the clarification about the wireframes. That make sense.

mjtravers commented 3 months ago

Passes CR. Sending to QA.

WiseQA commented 3 months ago

@MitchellTCG @AureliaKhorsand the Acceptance Criteria states 4 different sections. Verifying that there should only be 3 and not 4 sections. Thanks

Create placeholders for 4 different sections:

  1. in-progress reports
  2. Cash-on-hand
  3. Recently submitted reports
WiseQA commented 3 months ago

@MitchellTCG verified states should be changed from 4 different sections to 3 different sections. Per our review and discussion updated ticket as such. Thanks !

WiseQA commented 3 months ago

QA review verified FECFile Online Dashboard updated with the current UX / Functionality only documented in this ticket.

Verified the following section placeholder's have been added to the dashboard.

  1. in-progress reports
  2. Cash-on-hand
  3. Recently submitted reports

Image

Select the "Start a different report >" link in the "In-progress reports" section.

Image

Verify "Create a new report" popup window is displayed and selecting a "Form Type" functionality is working.

Image

Select the "Manage reports >" link in the "Recently submitted reports" section.

Image

Verify "Manage reports" page is displayed.

Image

QA Review Completed. Moved to Stage Ready.

exalate-issue-sync[bot] commented 2 months ago

akhorsand commented: Accepted during PI Planning Sprint Review on 7/8/2024