Page Comparison

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.

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.

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 endpoint to return list of all farm transactions

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

4, 6

4

Same as above

Create getTransactionSaga

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

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

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

6

Tables in the dashboard have an updated styling

Duplicate current Table component and update styling

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

Implement other transactions expandable content

Use Table component created in task above.

“View & edit” should navigate appropriately.

9

New dashboard includes a Search button

Add search to dashboard

10

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

Implement generic Drawer component

This should be a generic component with customizable contents.

11

11

Same as above

Implement dashboard filtering

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/revenue