Reference Documents
Product Scope: Finances V1.5 Finances dashboard Introduce the ability to export a filtered list of transactions
Sprint Planning: Sprint 72
Figma for this sprint: https://www.figma.com/file/96NZ02oYe3jpet1roUp0s0/Mockups?type=design&node-id=4432-38280&mode=design&t=Wt3Cg1o8HATWoPxl-0
Previous sprint technical documents:
Sprint 68: Manage custom expense types tasks
Sprint 70: Finances V2.0 - Sprint 70 Technical Document
Scope
Three main goals for the sprint:
Update the “Add expense” screen to new design, which includes descriptions and checkboxes for expense types, handling the “Miscellaneous” option as a separate type visually and adding dates per expense.
Start working on the Finances dashboard with updated designs.
Continue work on the filtered transaction list export.
For this breakdown I’ve left out the “nice to haves” for now, as I think there’ll be enough work on the core goals for these features for us to work on during the sprint. We could tackle these nice to haves in an upcoming sprint if we have the time.
Changes to “Add expense” screen
Epic link: - LF-3543Getting issue details... STATUS
| Context | Task | Notes | Blocks |
---|---|---|---|---|
1 | New expense/revenue type defaults have been added | Create database migration to add new expense/revenue type defaults - LF-3684Getting issue details... STATUS | Create database migration to add new expense type defaults to Document with table describing how expense types are modified (a bit confusingly named!): | |
2 | Expense types and revenue types now have descriptions | Add new expense/revenue type defaults descriptions to translation files - LF-3685Getting issue details... STATUS | Add expense type descriptions to My suggestion would be to reuse the existing translation keys and update them to be something like { "EQUIPMENT": { label: "Equipment", description: "Expenses related to...", }, ... | |
3 | Styling for the expense/revenue type tiles has changed and now includes a checkbox and a description | Update Tiles component to new design with description and checkbox - LF-3686Getting issue details... STATUS | Since we already have a | |
4 | Icons for default expense/revenue types have changed (designs for these are not yet final, will be updated during the course of the sprint) | Update expense types icons - LF-3687Getting issue details... STATUS | ||
5 | “Miscellaneous” is now displayed visually as a separate option, and there are some styling changes to the “manage custom expenses” portion of the screen | Filter out “Miscellaneous” from default expense type list and update “Manage custom expenses” block - LF-3688Getting issue details... STATUS |
Open questions
Should the entire expense type tile be clickable, or just the checkbox? Seems like entire tile from the prototype.
Do we want to add the expense type description somewhere on add, edit, or read only views for expenses?
Revenues don’t allow multi-select currently, should we not show the checkboxes for revenue?
Why are expense translations in their own file?
Finances Dashboard
Epic link: - LF-3624Getting issue details... STATUS
Notes
I’ve split up the work by considering 5 different “sub-features” to the dashboard:
KPIs cards
Transactions list
Transactions details (expanded transactions)
Search
Filtering
Add new expense button
Bulk of the work is on the FE, visual changes and new components to display the new interactions
There will however need to be some BE changes here to
Return a list of both expenses and revenues to the FE (we currently do one or the other)
Allow pagination, filtering and searching on that list
| Context | Task | Notes | Blocks |
---|---|---|---|---|
1 | The KPIs in the dashboard are shown in a “cards carrousel” that isn’t similar to any existing component that we have today | Create new generic | This component shouldn’t be specific to the Finances domain or to any of the contents we’ll be showing in the dashboard, so that we can reuse it in the future for other domains. Since it seems we need to keep the contents of the card somewhat flexible, I’d suggest for this component to receive a spec of the cards, each card with a specified icon, background color and a child component for when the card is active. The component should take care of “switching” the cards when clicking on one of them, displaying the “hidden” card state with the icon and displaying the child component for the card that’s in the “active” state. | 2 |
2 | Same as above | Display KPIs cards in Finances dashboard | Use the component created above and customize it with the right data. I think we should already have the data we need from the BE, but we should double-check this. Clicking on the cards should navigate the user appropriately. | |
3 | Dashboard now displays a list of “transactions”, regardless of them being expenses or revenues | Create endpoint to return list of all farm transactions | Endpoint should support:
Endpoint should also return the KPIs based on filtering applied. | 4, 5, 9, 11 |
4 | Same as above | Create | ||
5 | We don’t currently have a component for a list with expendable items such as the one used in the transactions list | Create new generic | This component shouldn’t be specific to the Finances domain or any contents displayed in the transactions list, but something we can reuse in other portions of the app. Contents will likely need to be flexible, so I’d suggest we maybe set it up so that it receives, for each item:
And it shows the chevron icon which on click should show/hide the expandable content. Expanding one row should collapse the others. | 5 |
5 | Same as above | Implement dashboard’s transaction list | Pull in transaction data from the new BE endpoint, and customize the component built above to display the list. The list should pull in paginated results and display a “Load more” button to get more results. For this first iteration:
| 6 |
6 | Transactions with the same date should be displayed in a group | Group transactions by date | ||
6 | Tables in the dashboard have an updated styling | Duplicate current | I think our current table also doesn’t manage showing the footer with the totals? If so, bake this into the new component. | 7, 8 |
7 | Labour transactions should be able to be expanded and show a table with the details | Implement Labour type transaction expandable content | Use Table component created in task above. “View details” should navigate appropriately. | |
8 | Other transactions also need to be able to be expanded and show a table with the details, although formatting and content will be different from Labour | Use Table component created in task above. “View & edit” should navigate appropriately. | ||
9 | New dashboard includes a Search button | Add search to dashboard | Implement searching using the transactions endpoint built above. | |
10 | Filters for new dashboard should show up in a “drawer” component sliding up from the bottom | Implement generic | This should be a generic component with customizable contents. | 11 |
11 | Same as above | Implement dashboard filtering |
Open questions
Do we have any designs for loading state while the dashboard is filtering/searching?
Should searching affect what’s shown in the KPI cards, or are the numbers only affected by filtering?
Transactions export
Tickets for this feature have already been created.