🚀 Add bank account transaction integration #132

alexanderwassbjer · 2024-10-26T11:38:09Z

Implemented an integration that uses GoCardless api to fetch bank account transactions. Then when you want to add an expense you can either fill it manually or you can pick from your transactions and it will automatically be added as an expense. There is also a function to "multi add" multiple transactions at the same time.
If a transaction already has been added to a group you cant add it once again.
GoCardless page

Other changes:

Added a clear field button to add expense page.
Changed to on addExpense function redirect link.
Added the new feature to start page.
Added information about the new feature to readme.
Made it easy to implement other ob api providers in the future.

Screenshots:

alexanderwassbjer · 2024-10-26T11:41:31Z

@KMKoushik :)

alexanderwassbjer · 2024-10-26T13:01:33Z

I have also added i18n support for this feature in another PR that is based on this PR: #89. If this gets merged I can open a PR with i18n support for this aswell.

https://github.com/alexanderwassbjer/split-pro/tree/feature/i18n-support

KMKoushik

this looks good overall with some comments. please lemme know what you think!

tysm for this PR really appreciate it. this is really awesome!

think it's best to merge in v2, test thoroughly and release it with other features! (i'll create a new branch)

.env.example

KMKoushik · 2024-10-26T19:35:42Z

.env.example


+# GoCardless options
+NEXT_PUBLIC_GOCARDLESS_ENABLED=
+NEXT_PUBLIC_GOCARDLESS_COUNTRY=


so it will work on one specific country alone?

No, it should work world wide. The bank provider picker in the settings page fetch all bank providers. It works with either one country or undefined which then returns all the bank providers.
But because the list can be long in that case, I added the env to have a option to only fetch some.

If you have another approach to this, feel free to tell me.
One way is to have a country picker first and then the providers but it feels a bit weird..

we have default currency option, we can get the country from that currency!

I can't find the default currency? If you mean the currency that is set by the user when they try to add a expense it feels a bit weird to use that because it can change?

So for now, it only works with one country in the package I use. https://github.com/nordigen/nordigen-node/blob/9d535ca9d788115d4e199c749432733be3ea6cdd/lib/api/institutions.js#L23

That can be fixed, either in the package or that we have a country picker first.
But if we think of the user case, will it be necessary to have multiple countries at the same instance?

If we want to stick with the env and use it either with no value to fetch all bank providers or filter it based on the env. I have created a PR on the Nordigen-node package and hoping for a merge so we can use it.
nordigen/nordigen-node#63

Can you submit this PR to my fork? :)

Dockerfile

docker-compose.yml

docker/Dockerfile

src/pages/_app.tsx

KMKoushik · 2024-10-26T19:50:00Z

@alexanderwassbjer changed the base to v2!

alexanderwassbjer · 2024-10-26T21:17:03Z

this looks good overall with some comments. please lemme know what you think!

tysm for this PR really appreciate it. this is really awesome!

think it's best to merge in v2, test thoroughly and release it with other features! (i'll create a new branch)

Awesome! Iam happy you liked it.
I will go over it again, check your comments and fix some other stuff.

It would be nice if it was released in v2!

KMKoushik · 2024-10-26T21:38:47Z

Awesome! Iam happy you liked it. I will go over it again, check your comments and fix some other stuff.

It would be nice if it was released in v2!

ofcourse this is going to be star feature!

Co-authored-by: Fredrik Olsson <[email protected]>

src/components/AddExpense/GoCardlessTransactions.tsx

src/server/api/routers/nordigen-node.d.ts

src/server/api/routers/gocardless.ts

Fix bug with floating numbers on exact split calculator

alexanderwassbjer · 2024-10-29T11:23:34Z

@alexanderwassbjer
Some other improvement ideas:

Encrypt the cache for the transactions.
Add multiple bank accounts for different providers.

krokosik · 2025-09-20T17:35:41Z

@alexanderwassbjer awesome! Feel free to add me on Discord #_krokosik

.env.example

README.md

docker/dev/Dockerfile

package.json

prisma/pg_cron_setup.sql

src/server/bankTransactionsController/goCardless/constants.ts

src/server/bankTransactionsController/plaid/utils.ts

src/server/api/routers/bankTransactions.ts

src/components/Expense/ExpenseDetails.tsx

krokosik · 2025-09-21T11:18:50Z

src/components/AddExpense/BankTransactions/BankTransactionItem.tsx

+        <Checkbox
+          checked={multipleTransactions?.some(
+            (cItem) => cItem.transactionId === item.transactionId,
+          )}
+          disabled={alreadyAdded}
+          onCheckedChange={createCheckboxHandler(item)}
+          className="h-6 w-6 md:h-4 md:w-4"
+        />
+        <Button className="flex items-center gap-4" variant="ghost" disabled={alreadyAdded}>


This is not very intuitive to me. With such a list, especially on mobile you just see checkboxes and may not be aware that it is possible to fill in the expense details using just a single transaction.

On the other hand, given a list of things to select, I would expect that clicking a row will toggle the checkbox and it selects a single transaction instead.

I will take the opportunity to lay out in this comment my main user flow icks:

the new UI is nice but it severely cluttters the previously minimal add expense UI

it kind of behaves like a separate entity to the original flow, especially with multiple transactions. This is especially bad since it is not obvious that the split outlined above is actually applied

when selecting multiple transactions, there is no way to see the total sum and the fact that there are multiple expenses created is surprising to me.

the add container gets expanded and overflows the screen, putting either the sponsor button or the transaction selection

Here are some loose thoughts I have on next steps, which are up to debate of course:

the transaction selection should stay out of the user's way - I would propose putting it into an AppDrawer triggered by a landmark icon to the right of the sponsor button

inside of it, the user can select multiple transactions. You may want to consider the scroll-area component from shadcn, but maybe the appdrawer handles that already

regarding multiple transactions, in the current flow, you cannot modify them individually, which implies to me that you are creating one expense out of multiple transactions (for example buying groceries in several stores). So instead of creating multiple expenses, I would just update the add page with the total sum AND a title that concatenates all the transaction name. As I doubt it will be a sensible name, we can focus the title input after closing the modal.

Let me know what do you think about it.

I’ve updated the flow so that transaction selection is now moved out of the main form — there’s a button next to the Sponsor button which opens an AppDrawer. Inside the drawer you can select one or multiple transactions (either by clicking the checkbox or the entire row). When you’re done, there’s a submit button that adds them. This should make the main add expense view feel less cluttered and more focused.

But I actually think that the transaction button next to the sponsor button does not feel like a function button. I think it should be redesigned so it easier to understand that it's a feature.

Regarding the multiple transactions flow: I don’t agree with the idea of merging them into a single expense. In my implementation, each selected transaction is added as its own expense. The reason is that it allows you to later review, edit, or remove individual expenses. If we instead created a combined expense, that granularity would be lost.

From my perspective (and the way I use this in my own household finances with my partner), the ability to keep the transactions separate is essential. For example, if we mistakenly add the wrong transaction, it’s very easy to spot and remove the specific one. If everything were merged into a single expense, we would no longer use the feature since we couldn’t make such corrections without removing the whole combined expense.

I understand your point about the total sum not being visible at the moment — that’s a valid concern, and I think we could address it by showing a summary of the selected transactions somewhere in the AppDrawer before submitting in either this version of the feature or in v2 of it.

My proposal for the trigger button design:

On top of that, it should turn green when a transaction is selected and display an X to clear the selected transition, instead of the current clear button.

Regarding multiple transactions:
I agree that creating multiple separate expenses would be nice, but this is the component for adding a single expense and I believe it should stay that way for consistent user experience. In my opinion, if you want granularity, you should just add them one by one, since the way you described, you still need to go over each individual expense.

I strongly feel that this page should primarily support adding a single expense. The button is now at a very convenient position for a finger to do it fast and the added convenience, especially that cancelling its consequences when done by mistake (very easy now) is quite tedious, should be possible in some other way.

Perhaps we could have a checkbox/dialog asking whether we want to merge the selected transactions into the edit form or submit seperately. The latter should show some clear information that it is going to happen (multiple expenses with the current split settings will be created). Another issue is that users can submit the expenses even without getting to the split type selection.

All in all, I just can't accept the multiple transaction in the current state and I don't have a good idea for its implementation. I propose first merging a singular transactions as the PR is vast and then we can iterate once we get a good idea on how to implement that.

src/server/api/services/dbCache.ts

src/components/AddExpense/AddExpensePage.tsx

src/components/Account/BankAccount/PlaidLink.tsx

src/components/AddExpense/BankTransactions/BankingTransactionList.tsx

src/components/AddExpense/BankTransactions/BankTransactionItem.tsx

src/components/AddExpense/BankTransactions/BankingTransactionList.tsx

prisma/migrations/20250922183043_add_cached_bank_data_relation/migration.sql

src/components/AddExpense/AddExpensePage.tsx

src/components/AddExpense/BankTransactions/BankTransactionItem.tsx

src/components/AddExpense/AddExpensePage.tsx

krokosik

More UI comments. Especially that we have a responsiveness regression. Here is the comparison with the main branch

screenrecording-2025-10-02_20-57-10.mp4

.env.example

src/components/AddExpense/AddExpensePage.tsx

krokosik · 2025-10-04T16:17:52Z

@alexanderwassbjer thank you for all the hard work! I think that feature wise the branch is now ready to merge and we will polish it out+add multiple transactions as other developments in 1.6! Once the CI checks pass, we can go ahead and finally merge this.

alexanderwassbjer added 2 commits October 26, 2024 13:26

Add bank account transaction integration

2f63ff3

Fixup indent

11b877e

alexanderwassbjer added 3 commits October 26, 2024 15:32

Correct types

37a3235

Refactor some new code

f920861

Add missing env in docker compose file

5bfae3a

KMKoushik requested changes Oct 26, 2024

View reviewed changes

KMKoushik changed the base branch from main to v2 October 26, 2024 19:49

alexanderwassbjer and others added 6 commits October 27, 2024 10:07

Remove duplicates of docker files

a1caeed

Update env to not use NEXT_PUBLIC

25fc9fa

Revert the country code in getInstitutions

88133e9

Refactor a on transaction row click function

b1c45b1

Remove unused imports/consts to make lint happy

269e169

Fixed some comments from Fredrik

be23003

Co-authored-by: Fredrik Olsson <[email protected]>

frdrkolsson reviewed Oct 27, 2024

View reviewed changes

Revert theme support

2c5fb1f

alexanderwassbjer requested review from KMKoushik and frdrkolsson October 27, 2024 10:43

Fix bug with floating numbers on exact split calculator

45d23ba

alexanderwassbjer changed the title ~~Add bank account transaction integration~~ 🚀 Add bank account transaction integration Oct 27, 2024

Merge pull request #1 from alexanderwassbjer/bugfix/floating-numbers

12cb87d

Fix bug with floating numbers on exact split calculator

KMKoushik added the hacktoberfest-accepted label Oct 29, 2024

alexanderwassbjer added 2 commits October 29, 2024 12:20

Add verified transaction label

0bccdc8

Merge branch 'main' of github.com:alexanderwassbjer/split-pro

421b40e

alexanderwassbjer force-pushed the main branch from 94bc6d7 to 421b40e Compare October 29, 2024 16:03

Whitespace and locale key regression fixes

d039681

krokosik requested changes Sep 21, 2025

View reviewed changes

krokosik added this to the 1.6 milestone Sep 21, 2025

alexanderwassbjer added 4 commits September 22, 2025 20:28

Changes according to review

524cf6a

Merge branch 'main' of github.com:alexanderwassbjer/split-pro

6519788

Add migration

82afc12

Update cache from migration

b8d8a85

krokosik requested changes Sep 23, 2025

View reviewed changes

alexanderwassbjer added 4 commits October 1, 2025 11:53

Update according to review

ba6c49a

Merge branch 'main' of github.com:oss-apps/split-pro

2bbba1b

Fix missing translation

77eca22

Comment out multiple transactions

68a7cbf

alexanderwassbjer requested a review from krokosik October 1, 2025 10:09

krokosik requested changes Oct 1, 2025

View reviewed changes

Merge migrations, setup the cron jobs

cf14954

alexanderwassbjer requested a review from krokosik October 2, 2025 10:27

Add check for db url

edd0620

krokosik requested changes Oct 2, 2025

View reviewed changes

.env.example Outdated Show resolved Hide resolved

src/components/AddExpense/AddExpensePage.tsx Outdated Show resolved Hide resolved

src/components/AddExpense/AddExpensePage.tsx Outdated Show resolved Hide resolved

Changes after review

82677d2

alexanderwassbjer requested a review from krokosik October 4, 2025 07:01

krokosik added 2 commits October 4, 2025 18:00

UI fixes and optional transactionId

39c45b1

Hide clear button when its disabled

42d3c4c

krokosik approved these changes Oct 4, 2025

View reviewed changes

Fix peer dep issues and next runtime check

6c0a226

alexanderwassbjer added 3 commits October 6, 2025 09:14

Fix build

bc38a6e

Merge branch 'main' of github.com:alexanderwassbjer/split-pro

25c136f

Fix lint

4879d8d

krokosik merged commit db04a78 into oss-apps:main Oct 6, 2025
1 check passed

Uh oh!

🚀 Add bank account transaction integration #132

🚀 Add bank account transaction integration #132

Uh oh!

Conversation

alexanderwassbjer commented Oct 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexanderwassbjer commented Oct 26, 2024

Uh oh!

alexanderwassbjer commented Oct 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KMKoushik left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KMKoushik commented Oct 26, 2024

Uh oh!

alexanderwassbjer commented Oct 26, 2024

Uh oh!

KMKoushik commented Oct 26, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexanderwassbjer commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krokosik commented Sep 20, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krokosik Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexanderwassbjer commented Oct 26, 2024 •

edited

Loading

alexanderwassbjer commented Oct 26, 2024 •

edited

Loading

alexanderwassbjer commented Oct 29, 2024 •

edited

Loading

krokosik Sep 23, 2025 •

edited

Loading