UI: FECFile Online Dashboard

[AureliaKhorsand]

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 –

• 558w by 404h div
• border-radius: 4px
• #E8E8E8
• Header: "In-progress reports"; 24px; Gandhi-serif bold; #212121
• Placeholder Card: White; 518x308; with 20px padding left and right
• Hyperlink: "Start a different report"; points to create report

Cash-on-hand –

• 558w by 154h div
• border-radius: 4px
• #E8E8E8
• Header: "Cash-on-hand"; 24px; Gandhi-serif bold; #212121
• Placeholder Card: White; 518x86: with 20px padding left and right

Recently submitted reports –

• 558w by 578h div
• border-radius: 4px
• #E8E8E8
• Header: "Recently submitted reports"; 24px; Gandhi-serif bold; #212121
• Placeholder Card: White; 518x482; with 20px padding left and right
• Hyperlink: "Manage reports"; points to create report

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

• BA/Design Quality Checklist complete

DEV Notes

the fixed div width inside each breakpoint

• 1400xxl = 1136px
• 1200xl = 928px
• 992lg = 704px
• 768md = 512px
• 576sm = 512px

Design

Wireframes
1400xxl
–

1200xl
–

992lg
–

768md
–

576sm
–

FECFILE-400

[MitchellTCG]

@JonellaCulmer please review

[JonellaCulmer]

@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]

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

[MitchellTCG]

@MitchellTCG remove tips for treasurers

[AureliaKhorsand]

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

[MitchellTCG]

@JonellaCulmer
Tips for treasurers removed from mocks

[sasha-dresden]

Development done. Need to code review with @MitchellTCG

[sasha-dresden]

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]

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.

Sending ticket back to In Progress.

[sasha-dresden]

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]

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

[mjtravers]

Passes CR. Sending to QA.

[WiseQA]

@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]

@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]

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

---

---

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

---

---

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

---

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

---

Verify "Manage reports" page is displayed.

---

QA Review Completed. Moved to Stage Ready.

[exalate-issue-sync]

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