Versions Compared

Old Version 3

changes.mady.by.user Joyce Sato-Reinhold

Saved on

compared with

New Version 4

changes.mady.by.user Joyce Sato-Reinhold

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • I suggest we use the package ExcelJS (https://github.com/exceljs/exceljs) to generate our xlxs document. It is a popular packages with close to 1 million weekly downloads (npm), has a readable API and the generated spreadsheet is fully styleable

    • The most popular alternative, SheetJS, has recently moved off of GitHub,

  • It is a large package, 1.1MB minified and 259.1kB minified and gzipped according to Bundlephobia

  • As a point of comparison, a single sheet xlsx file as we generate in certification export is 8-9kB. This suggests we should be creating the xlsx file on the server and sending via API to the frontend. However there are some other considerations we can keep in mind.

    • We don’t yet know the specifications of the file we will be generating (e.g. I believe they will be more highly styled than the certification documents) and they may end up larger

    • The client can cache the library code, making the difference in data sent to the client less noticeable as more documents are exported

    • This might be worth testing on different devices in terms of responsiveness

  • Folder structure: I suggest generating the Excel document in a function in packages/api/util that can be used by the controller or, if we decide to restructure, the frontend

  • We don’t yet have the exact specification for this document (data content or visuals), but we can set up the framework (saga → controller → document generation → download) now with some data available on the current finance homepage

    • There is a mockup of the filtering page (the page that selects which data will be exported) which I would like to get confirmed before we start work on it

Dashboard Views

  • Although this rework is visually substantial, for the most part all of the data is already present within three existing components, accessed via Finances, Actual Revenue, and Other Expenses

    • Note as revenue types is a new concept in Finances 2.0 we do not have organization by type in Actual Revenue. Other Expenses already contains this breakdown by type

  • Date filtering already works correctly via the <DateRangeSelector /> “component” which controls the date_range within the existing summary viewsthe financesReducer slice of the store

  • Here and elsewhere you might notice that the container + pure component architecture is not always followed. It is preferred but not required for the dashboard tickets.

  • Please continue to use the old Redux architecture as it is functional

  • We are still waiting for some designs to be confirmed as final, so we will work on the most conservativethere is some risk of the visuals changing (noted below)

    • Note on the Figma Mockup: we are using the second panel of “Finances homescreen” as our current guide for the main homepage dashboard, with the addition of the date filtering from the third panel

 

tasks

 notes

1

Preliminary Dashboard Task

Convert the following class-based components into functional components:

  • <Finances /> container

  • <OtherExpenses /> container

  • <DateRangeSelector /> component

2

Image Removed		Image RemovedImage AddedImage Added

Create reusable summary tile component

Low risk (consistent throughout design document)

3

Image Removed

Create swipeable summary icon tiles component

4

Image RemovedImage RemovedImage AddedImage Added

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

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

4

Image Added

Create swipeable summary icon tiles component

Low risk (consistent throughout design document)

5

Image RemovedImage Added

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

Image Added

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

Blocked by 1

Requires at least one of 2, 3, or 4

6

7

 

8

 

9

 

10- 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)

7

Image Added

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)

8

Image AddedImage Added

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

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.

 

 

 

 

 


 

Questions & Answers

For product team

  • What’s the relationship between the old Labour view and the new Labour expense tile? Is there a migration covering this? For now is the old Labour summary view removed?

  • Is estimated revenue removed?

  • Does document export need to be recorded somewhere (e.g. in the database)?