Reference Documents
Product Scope: Finances V2.0
Figma for Finances 2.0: https://www.figma.com/file/96NZ02oYe3jpet1roUp0s0/Mockups?type=design&node-id=1712%3A37203&mode=design&t=TZv4RspCOzxhLiVQ-1
Previous sprint technical documents:
Sprint 68: Manage custom expense types tasks
...
This sprint will primarily be concerned with wrapping up custom revenue and custom expenses
Expenses readonly / edit / delete & Sale API + saga update – DESIGNS EXIST; tickets needed
Revenue needs readonly / edit (non-crop type) / delete (= update to new modal) designs David Trapp – but we have a newly refactored edit view to work off of
We also want to prepare for these new requirements + user stories which remain in Finances 2.0 and will the the focus of our next sprint.
Generate income statement: “As a farmer I want to be able to generate an income statement so that I can understand if my farm has been profitable over a set timeframe”. Should include revenues, expenses, and gross profit (Priority: Highest)
Finances dashboard: “As a farmer I want to be able to understand my financial position at a glance when landing on the finances page so that I can quickly understand the financial footing of my operation” (Priority Medium)
Remaining revenue and expense flow tasks
Epic Link:
Jira Legacy | ||||||
---|---|---|---|---|---|---|
|
| tasks | notes | Kevin’s comments | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Update the “edit individual expense” flow
| Readonly view is disabled inputs | ||||||||||
2 | Update the “edit individual revenue” flow
| Readonly view is disabled inputs | ||||||||||
Number Input bugs (3): | ||||||||||||
3 | The onChange handler (as far as I can tell) on AddExpense is buggy in Portuguese. This is the situation in which David Trapp was not able to enter a comma and the decimal cleared the whole input. This is specific to that Input and not the others. | Fix AddExpense value Input for Portuguese
| Please test in Spanish and other comma-based decimal languages as well | |||||||||
4 | Validation messages are not displaying when valueAsNumber is set to true (image from the new GeneralRevenue) Relatedly the minimum validation for the current AddSale total field is flakey (sometimes the error message displays onBlur and sometimes doesn’t) | Fix validation messages for currency inputs
| As below, the behaviour of the Unit (e.g. the Harvest Quantity of Edit Expense) is correct | |||||||||
5 | The handling of decimals in Add Sale and Edit Expense is mediocre. The behaviour of the Harvest Quantity component is ideal: decimals should become commas (when appropriate in that language) and rounding to two decimals should occur onBlur | Update finance currency Inputs to share the internationalization behaviour of Harvest Quantity (a
| Getting ideal behaviour may or may not involve refactoring from an Input to a Unit From an initial look into the code, I think it’s actually an inherent behaviour of the (native) input once we’ve applied |
Technical Notes
https://docs.google.com/spreadsheets/d/1gxdVJieGehQDLbI08WKExoH95yNDgfVcC3xR6n5x0fs/edit?usp=sharing
Generate income statement
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,
has security vulnerabilities, and requires a pro account to style. We had actually previously imported SheetJS into our codebase, but it was not used and removed this year in a package cleanup PR
ExcelJS 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 frontendWe 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
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
This rework is considerable but should happen entirely on the frontend (no full-stack tickets)Although this rework is visually substantial, most 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 thedate_range
within thefinancesReducer
slice of the storeHere 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 conservative parts of the design this sprint
...
...
M: must have N: nice to have
...
tasks
...
...
1
...
2
...
3
...
...
4
...
...
5
...
6
...
7
...
...
8
...
...
9
...
...
10
there 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
Epic Links:
Jira Legacy server System JIRA serverId 815f41e5-e5fb-3402-8587-82eccc3ffab0 key LF-3624 Jira Legacy server System JIRA serverId 815f41e5-e5fb-3402-8587-82eccc3ffab0 key LF-3625
| tasks | notes | Kevin’s Comments | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Preliminary Dashboard Task | Convert the following class-based components into functional components:
| ||||||||||
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
| 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:
| |||||||||
5 | Update
| 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
| 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
| 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 | Update the Date inputs used in
| They probably can to be migrated to | |||||||||
| ||||||||||||
| ||||||||||||
|
|
Questions & Answers
For product team
Question | Answer | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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? Related comment:
| Good question! Ideally they could be shown on the same table as other expenses and just be filtered by clicking on the labour category.
All completed tasks for a given day should be aggregated into one row as “Labour expenses”, e.g. “Labour expenses (22 hours) | 25 Jun '23 | $940” Ideally, this would be expandable to something like this: or link to the existing labour page for details like this: Open question on whether ☝️ should be pre-filtered for that specific date (Kevin is in favour, Joyce prefers the prior date filters to take precedence) | ||||||||||||||||
Is estimated revenue removed? Where should it go now?? David Trapp | It should still exist (it’s removal was an oversight) and be incorporated in some manner into the top level KPIs (Profit / Loss, Total Revenue / Total Expenses). It might make sense to have a toggle for “Current vs Projected” or show both numbers on the same card with different styles. Thoughts Loic Sans ? A few examples how current and projected could work on the same visualization (current is the red, projected is the remainder of the bar - both would need numerical values) Simple stacked bar graph: Also relevant is “Current profit / loss” an “Projected profit / loss” Horizontal bar graph showing “Current revenue” and “Projected revenue” by crop. For all ☝️ it is for the filter criteria. | ||||||||||||||||
Are tooltips on the current finance page being carried over? Not in designs David Trapp | They will be updated with new tooltips that align with the new designs. I assume this will be small-ish change, but correct me if this isn’t the case. | ||||||||||||||||
Does document export need to be recorded somewhere (e.g. in the database)? | Like a record that it was exported or should it be persisted after generation? I assume no on both counts but I’m open to being shown the error of my ways. | ||||||||||||||||
Still need the following aspects of the Excel report:
| Loic Sans is investigating! Here is a rough guide for the income statement export: https://docs.google.com/spreadsheets/d/1gxdVJieGehQDLbI08WKExoH95yNDgfVcC3xR6n5x0fs/edit?usp=sharing David Trapp any way you could translate this and show it to the partners on for feedback? Not needed. If it simplifies to reuse this flow I’m all for it! Ability to see “Export” interaction - whatever that eventually looks like - and hit the export API are limited to FO / FM / EO. |