Page Comparison

1

Preliminary Dashboard Task

Convert the following class-based components into functional components:

• <Finances /> container

• <OtherExpenses /> container

• <DateRangeSelector /> component
  
  

  Jira Legacy
  server System JIRA serverId 815f41e5-e5fb-3402-8587-82eccc3ffab0 key LF-3615

2

Create reusable summary tile component

Low risk (consistent throughout design document)

Ideally, we would change “My balance” to “Profit / loss” and have “Total revenues” on the left and “Total expenses” on the right. I assume (hope ) these are trivial changes.

3

Create/update existing transactions list <Table /> component to new style

Slight risk design might change, particularly the top and bottom table frame

For the homepage (not filtered for a specific expense or revenue type) we would need to display the type as well. Given the horizontal real estate constraints, it might be a good idea to do something like this - where the name is the instance and the email is the type. Thoughts Loic Sans ?

4

Create swipeable summary icon tiles component. Please use the existing icon tile component as your guide / base.

Medium risk –

consistent throughout design document

BUT Duncan doesn’t like it and Loïc may not either

Loic Sans thoughts?

Also, what happens when they are clicked? I can imagine:

1. They are multi-select filters for the rest of the dashboard

2. They take you to a specific page for that type of revenue or expense

5

Update <Finances /> container and components. All data is available.

Blocked by 1

Requires at least one of 2, 3, or 4 - ticket owner should feel free to subtask and apply whichever component(s) are available

6

Update <OtherExpensens /> container and components. All data is available in current container.

Please base visuals on homepage / Revenue below. This needs updating.

Blocked by 1

Requires at least one of 2, 3, or 4 - ticket owner should feel free to subtask and apply whichever component(s) are available

Please do not implement “Last 30 days” filtering before checking in with product (it doesn’t appear on the homescreen tiles)

Has any work on this begun Joyce Sato-Reinhold? If not, I think we may be able to cut scope here.

7

Update <ActualRevenue /> container and components. A new breakdown by Revenue Type is necessary for the summary icon tiles. All other data is available in current container.

Requires at least one of 2, 3, or 4 - ticket owner should feel free to subtask and apply whichever component(s) are available

Please do not implement “Last 30 days” filtering before checking in with product (it doesn’t appear on the homescreen tiles)

Same comment as Expenses screen.

8

Build container and component to filter export report data. Add three-dots menu to Finances homescreen to trigger export.

BLOCKED BY PRODUCT – Older design; I would prefer to get this confirmed before working.

PDF export is not part of scope so that radio button should not exist

Loic Sans and I discussed this and I believe he would like to try a different approach.

9

Export structure / POC

Build saga, API route, controller, and utility function to generate and return an xlsx file

See technical notes above. Only send and write to file three values (revenue, expenses, balance) and trigger download automatically as in current uploaded document functionality.

10

Date Inputs in the <DateRangeSelector /> component are weird – they don’t input manually properly and the validation does not match stylistically to the rest of the app.

Also they are buggy (console warnings appear) when invalid dates are input, and entering an invalid date on the current Finances homescreen and then navigating to Actual Revenue will whitescreen crash (see screenshot below). IF we retain something similar for date filtering in the new design, this needs to be fixed

Image Added

Update the Date inputs used in <DateRangeSelector />

They probably can to be migrated to <Input type={'date'} />

Actual Revenue in the current app might be a good model of the changes required – although it is also a bit buggy