Versions Compared

Old Version 2

changes.mady.by.user Joyce Sato-Reinhold

Saved on

compared with

New Version 3

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

  • 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 any some data available in on the current finances pagefinance homepage

Dashboard Views

  • Although this rework is visually substantial, for the most part all of the data is already present within the existing summary views

  • We are still waiting for some designs to be confirmed as final, so we will work on the most conservative

Note on the Figma Mockup: we are using the second panel of “Finances homescreen” as our current guide for the main 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

3

Image Added

Create swipeable summary icon tiles component

4

Image AddedImage Added

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

5

Image Added

Update <Finances /> container

Blocked by 1-4

6

7

 

8

 

9

 

10

 

 

 


 

Questions & Answers

...