Finances V2.0 - Sprint 72 Technical Document

Reference Documents

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: https://lite-farm.atlassian.net/browse/LF-3597

 

Context

Task

Notes

Blocks

 

Context

Task

Notes

Blocks

1

New expense/revenue type defaults have been added

 

 

Create database migration to add new expense/revenue type defaults

https://lite-farm.atlassian.net/browse/LF-3684

Create database migration to add new expense type defaults to farmExpenseType table and new revenue type defaults to revenue_type

Document with table describing how expense types are modified (a bit confusingly named!):

 

2

Expense types now have descriptions

Add new expense type defaults descriptions to translation files

https://lite-farm.atlassian.net/browse/LF-3685

Add expense type descriptions to expense.json translation files, and make sure translations for expense type labels still work.

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 type tiles has changed and now includes a checkbox and a description

 

Update Tiles component to new design with description and checkbox

https://lite-farm.atlassian.net/browse/LF-3686

Since we already have a tileType property, I'd suggest adding a new tileType for this new style and keeping the existing one as is in case we need it for future designs

 

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

https://lite-farm.atlassian.net/browse/LF-3687

 

 

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

https://lite-farm.atlassian.net/browse/LF-3688

 

 

Open questions

Question

Answer

Notes

Question

Answer

Notes

  • Should the entire expense type tile be clickable, or just the checkbox? Seems like entire tile from the prototype.

Answered Oct 6, 2023: Entire tile. @Loic Sans and I discussed this so I’m confident here.

 

  • Do we want to add the expense type description somewhere on add, edit, or read only views for expenses?

Answered Oct 6, 2023 - yes, the short description should be added to the read-only, create, and edit views for custom expense types.

 

  • Revenues don’t allow multi-select currently, should we not show the checkboxes for revenue?

Answered Oct 6, 2023 no change to revenue tiles for now - they remain single select (similar to tasks). We may update it to be a bulk documentation process in the future.

 

  • Why are expense translations in their own file?

No idea!

 

Finances Dashboard

Epic link: https://lite-farm.atlassian.net/browse/LF-3624

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

 

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 CardsCarrousel component.

https://lite-farm.atlassian.net/browse/LF-3740

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

https://lite-farm.atlassian.net/browse/LF-3741

Use the component created above and customize it with the right data.

Clicking on the cards should navigate the user appropriately.

We currently have utilities to display the numbers for revenue/expenses/balance, etc.

 

3

 

Dashboard now displays a list of “transactions”, regardless of them being expenses or revenues

 

Create hook to return list of all farm transactions

https://lite-farm.atlassian.net/browse/LF-3742

 

Hook should whether a transaction is an expense or a revenue, return expense/revenue type and amount.

4, 6

4

Same as above

Create getTransactionSaga

https://lite-farm.atlassian.net/browse/LF-3623

 

 

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 ExpandableItemList component

https://lite-farm.atlassian.net/browse/LF-3744

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:

  • An icon

  • A flexible content component

  • A “expandable content” component

And it shows the chevron icon which on click should show/hide the expandable content.

Expanding one row should collapse the others.

6

5

Same as above

Implement dashboard’s transaction list

https://lite-farm.atlassian.net/browse/LF-3745

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:

  • Don’t group by date or show dates (we’ll do this in a follow up ticket).

  • Don’t handle the “hidden” content for the transaction items (we’ll do this in a follow-up ticket – only show icon, label, description and amount).

6

6

Transactions with the same date should be displayed in a group

Group transactions by date

https://lite-farm.atlassian.net/browse/LF-3746

 

 

 

6

Tables in the dashboard have an updated styling

 

Duplicate current Table component and update styling

https://lite-farm.atlassian.net/browse/LF-3747

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

https://lite-farm.atlassian.net/browse/LF-3748

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

 

Implement other transactions expandable content

https://lite-farm.atlassian.net/browse/LF-3749

Use Table component created in task above.

“View & edit” should navigate appropriately.

 

9

New dashboard includes a Search button

Add search to dashboard

https://lite-farm.atlassian.net/browse/LF-3750

 

 

10

Filters for new dashboard should show up in a “drawer” component sliding up from the bottom

 

Implement generic Drawer component

https://lite-farm.atlassian.net/browse/LF-3751

This should be a generic component with customizable contents.

11

11

Same as above

Implement dashboard filtering

https://lite-farm.atlassian.net/browse/LF-3752

 

 

12

New dashboard features a floating button that when clicked shows options to add a new expense or revenue

Add floating button to add new expense/revenuehttps://lite-farm.atlassian.net/browse/LF-3753

 

 

Open questions

Question

Answer

Notes

Question

Answer

Notes

Do we have any designs for loading state while the dashboard is filtering/searching?

@Loic Sans Yes, I was thinking about skeleton state. If possible we should unravel this across the app

Obviously this requires a small animation. It’s prototypes on figma.

Should searching affect what’s shown in the KPI cards, or are the numbers only affected by filtering?

Answered Oct 6, 2023

Yes - searching should impact the KPIs and what is shown in the transactions list.

In the general case, only transactions returned under the current search, filter, and date constraints feed into the KPIs.

 

Transactions export

Tickets for this feature have already been created.