MPDX-8318 Financial Accounts Summary and Transactions pages #1127

dr-bizz · 2024-10-10T14:09:53Z

Description

In this PR I add the Financial Accounts Summary and Transactions pages. There is a lot I do in this PR, but there are a lot of files which are just renamed.

Renamed "Responsibility Center" to "Financial Accounts" - The reason is that these pages allow you to view details on a certain Financial Account. Which is what the old Angular version had in the code and URL. "Responsibility Center" is the name by which users know it, but for us devs, it's known as "Financial Accounts", so to keep it consistent for us, I've renamed it.
I added a new context around the Financial Accounts pages since there's a lot of functionality that needs to be passed from parent to component.
Caleb and I created the framework that the two pages would sit on, this includes the Header and reports navigation.
I added the Summary page - This is the simplest of the 2, and shows a table without any filtering. This table should have links to the transaction table, which will be coming today. I haven't had time to build the links, but it should be fairly easy.

This needed a GraphQL query to be built with not much time, so I've built it with GraphQL Proxy.

I added the Transactions page - This page is dynamic; by default, it loads the transactions for the last month, but it also allows you to filter the transactions by date and category. This page features a search inbox, a table which is sortable and filterable and a button that allows you to export the data you see.

This also needs a GQL proxy to fetch the entries (transactions).

Things I still need to do:

As time is running out, since we are putting this live on Friday, I wanted to get this PR up, so people can review it, while I still work on the following items.

Build the links from the summary page to transactions.
Build the tests for the transactions page.

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
I have requested a review from another person on the project

github-actions · 2024-10-10T14:11:54Z

Bundle sizes [mpdx-react]

Compared against 14063e9

Route	Size (gzipped)	Diff
`/accountLists/[accountListId]/reports/financialAccounts/[[...financialAccount]]`	214.71 KB	added
`/accountLists/[accountListId]/tools/appeals/appeal/[[...appealId]]`	219.26 KB	+1.12 KB
`/accountLists/[accountListId]/reports/responsibilityCenters`	no change	removed

Dynamic import	Size (gzipped)	Diff
`../src/components/Reports/FinancialAccountsReport/AccountSummary/DynamicAccountSummary.tsx -> ./AccountSummary`	6.93 KB	added
`../src/components/Reports/FinancialAccountsReport/AccountTransactions/DynamicAccountTransactions.tsx -> ./AccountTransactions`	80.97 KB	added
`../src/components/Reports/FinancialAccountsReport/FinancialAccounts/DynamicFinancialAccounts.tsx -> ./FinancialAccounts`	138.07 KB	added

github-actions · 2024-10-10T18:19:46Z

Preview branch generated at https://MPDX-8318.d3dytjb8adxkk5.amplifyapp.com

canac

This is really great work so far in such a quick time! You might be aware of some of these already, but here are some bugs/discrepancies I noticed. Let me know if I can clarify any of them:

I used the "RUSSIA ALL Ministries RC (local + Europe)" account list in my testing.

The accounts should be sorted alphabetically on the main financial accounts list
Crossroads Samara is unchecked in Angular and checked in React
Last synced dates are in the past in Angular but are all today in React
Graph and average is different for Crescendo in Angular vs React
In Summary, date links in header and category line items aren't clickable links
In Summary for Crescendo, "Nonlocal contr assessments-RUS" numbers are all negative in Angular but are positive in React
In Transactions, oldest transactions are at the bottom in Angular but are at the top in React
In Transactions, search placeholder doesn't match the tooltip
In Transactions CSV export, the transactions are also reversed
In Transactions CSV export, the currency amounts include \xA0 characters instead of regular spaces, which causes those cells to render strangely in Excel
After clicking on an account there's no way to go back to the financial accounts list

src/components/Reports/FinancialAccountsReport/Header/Header.tsx

pages/accountLists/[accountListId]/reports/financialAccounts/[[...financialAccount]].page.tsx

canac

Again, really great work with this! Feel free to push back on any of my comments or wait until later to do them since I know we're trying to get this out this week.

pages/api/Schema/reports/financialAccounts/financialAccounts/financialAccounts.graphql

src/components/Reports/FinancialAccountsReport/Context/FinancialAccount.graphql

canac · 2024-10-10T20:33:38Z

src/components/Reports/FinancialAccountsReport/AccountSummary/AccountSummary.tsx

+                    return (
+                      <StyledTableCell
+                        key={`income-${idx}`}
+                        align="right"


This shouldn't need styles since it's empty, right?

Thi table row (Opening Balance) isn't empty, I assume you mean the Income table row. This table row needs styles and empty rows to go all away across the table

Sorry if my comment showed up in a weird place and wasn't clear. Yes, I meant the income header. I'm asking why we have align="right" on this cell and the expenses cell since the cell doesn't have any content?

canac · 2024-10-10T20:33:53Z

src/components/Reports/FinancialAccountsReport/AccountSummary/AccountSummary.tsx

+                    return (
+                      <StyledTableCell
+                        key={`expenses-${idx}`}
+                        align="right"


This table row needs styles and empty rows to go all away across the table

This table row needs styles and empty rows to go all away across the table

Definitely! I'm just wondering why we have align="right" on an empty cell.

src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx

pages/accountLists/[accountListId]/reports/financialAccounts/[[...financialAccount]].page.tsx

src/components/Reports/FinancialAccountsReport/FinancialAccounts/FinancialAccounts.tsx

dr-bizz · 2024-10-11T14:43:33Z

The accounts should be sorted alphabetically on the main financial accounts list - ✅

Crossroads Samara is unchecked in Angular and checked in React - This is returning active true from the API. - ⚠️ Need API work

Last synced dates are in the past in Angular but are all today in React - ✅

Graph and average is different for Crescendo in Angular vs React - ✅

In Summary, date links in header and category line items aren't clickable links - ✅

dr-bizz · 2024-10-11T15:44:06Z

In Summary for Crescendo, "Nonlocal contr assessments-RUS" numbers are all negative in Angular but are positive in React - ✅

In Transactions, oldest transactions are at the bottom in Angular but are at the top in React - you can sort it by date, so this doesn't really matter. - ✅

In Transactions, search placeholder doesn't match the tooltip . - ✅

In Transactions CSV export, the transactions are also reversed - ✅

In Transactions CSV export, the currency amounts include \xA0 characters instead of regular spaces, which causes those cells to render strangely in Excel - ✅

After clicking on an account there's no way to go back to the financial accounts list - ✅

canac

Incredible work with all of this!

The only other thing I noticed is that the Export CSV button doesn't do anything while the transactions are loading. Can we disable it?

src/components/Reports/FinancialAccountsReport/AccountSummary/AccountSummaryHelper.ts

src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx

canac

There are some failing tests, but this looks really good! Amazing work! 🚀

…d framework

5. Adding links from summary to transactions this will break some tests, but I will fix them tomorrow.

… TRUE before.

dr-bizz · 2024-10-11T19:20:11Z

I will create a new PR which adds all the tests for the Transactions page and components I have missed the tests due to the timeline of getting this out on production.

dr-bizz force-pushed the MPDX-8318 branch 2 times, most recently from 1b95620 to 9299d6b Compare October 10, 2024 14:56

dr-bizz requested review from canac and caleballdrin October 10, 2024 14:56

caleballdrin added the Preview Environment Add this label to create an Amplify Preview label Oct 10, 2024

canac reviewed Oct 10, 2024

View reviewed changes

dr-bizz requested a review from canac October 11, 2024 16:22

canac reviewed Oct 11, 2024

View reviewed changes

dr-bizz requested a review from canac October 11, 2024 17:44

canac reviewed Oct 11, 2024

View reviewed changes

src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx Outdated Show resolved Hide resolved

dr-bizz requested review from canac and removed request for canac October 11, 2024 17:58

canac approved these changes Oct 11, 2024

View reviewed changes

dr-bizz added 7 commits October 11, 2024 14:51

1. Renaming "Responsibility Center" to "Financial Accounts"

590bf4d

2 & 3. Adding context and setting up summary and transaction pages an…

2575687

…d framework

4. Summary page

d2664a8

5. Transactions page

aa0c1c4

5. Adding links from summary to transactions this will break some tests, but I will fix them tomorrow.

fixup! 4. Summary page

c2a7002

6. Fixing the main RC page as it is different from the old MPDX.

683bd24

The server now returns FALSE when the value is null. It was returning…

4c0f66a

… TRUE before.

dr-bizz force-pushed the MPDX-8318 branch from 6d2f5ce to 4c0f66a Compare October 11, 2024 19:05

dr-bizz merged commit 4a2ca6b into main Oct 11, 2024
17 of 18 checks passed

dr-bizz deleted the MPDX-8318 branch October 11, 2024 19:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MPDX-8318 Financial Accounts Summary and Transactions pages #1127

MPDX-8318 Financial Accounts Summary and Transactions pages #1127

dr-bizz commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024

canac left a comment

canac left a comment

canac Oct 10, 2024

dr-bizz Oct 11, 2024

canac Oct 11, 2024

canac Oct 10, 2024

dr-bizz Oct 11, 2024

canac Oct 11, 2024

dr-bizz commented Oct 11, 2024

dr-bizz commented Oct 11, 2024

canac left a comment

canac left a comment

dr-bizz commented Oct 11, 2024

MPDX-8318 Financial Accounts Summary and Transactions pages #1127

MPDX-8318 Financial Accounts Summary and Transactions pages #1127

Conversation

dr-bizz commented Oct 10, 2024 • edited Loading

Description

Things I still need to do:

Checklist:

github-actions bot commented Oct 10, 2024 • edited Loading

Bundle sizes [mpdx-react]

github-actions bot commented Oct 10, 2024

canac left a comment

Choose a reason for hiding this comment

canac left a comment

Choose a reason for hiding this comment

canac Oct 10, 2024

Choose a reason for hiding this comment

dr-bizz Oct 11, 2024

Choose a reason for hiding this comment

canac Oct 11, 2024

Choose a reason for hiding this comment

canac Oct 10, 2024

Choose a reason for hiding this comment

dr-bizz Oct 11, 2024

Choose a reason for hiding this comment

canac Oct 11, 2024

Choose a reason for hiding this comment

dr-bizz commented Oct 11, 2024

dr-bizz commented Oct 11, 2024

canac left a comment

Choose a reason for hiding this comment

canac left a comment

Choose a reason for hiding this comment

dr-bizz commented Oct 11, 2024

dr-bizz commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited

Loading