fix: UI/UX issues in new banking module (#54824)

* fix: enforce user permissions on bank account get_list

* feat: auto-select last used bank account

* fix: skeleton loaders in bank balance

* fix: show empty state for no bank transactions

* chore: add Stripe and PayPal logos

* fix: alignment of header text in list-view

* fix: wrap words in transaction description

* fix: change file-dropzone color on hover

banking/src/components/features/BankReconciliation/BankPicker.tsx

@@ -1,4 +1,4 @@
-import { useAtom, useSetAtom } from "jotai"
+import { useAtom } from "jotai"
 import { SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
 import { useCallback } from "react"
 import { useGetBankAccounts, useGetUnreconciledTransactions } from "./utils"
@@ -16,9 +16,16 @@ import { useCurrentCompany } from "@/hooks/useCurrentCompany"
 
 const BankPicker = ({ className }: { className?: string }) => {
 
-    const setSelectedBank = useSetAtom(selectedBankAccountAtom)
+    const [selectedBank, setSelectedBank] = useAtom(selectedBankAccountAtom)
 
     const onLoadingSuccess = useCallback((data?: SelectedBank[]) => {
+        // If the bank is already selected, then don't set it again
+        if (selectedBank) {
+            // Check if selected bank is in the data
+            if (data?.some((bank: SelectedBank) => bank.name === selectedBank.name)) {
+                return
+            }
+        }
         if (!data) return
         if (data.length === 1) {
             setSelectedBank(data[0])
@@ -26,9 +33,12 @@ const BankPicker = ({ className }: { className?: string }) => {
             const defaultBank = data.find((bank: SelectedBank) => bank.is_default)
             if (defaultBank) {
                 setSelectedBank(defaultBank)
+            } else {
+                // Select the first available bank account
+                setSelectedBank(data[0])
             }
         }
-    }, [setSelectedBank])
+    }, [setSelectedBank, selectedBank])
 
     const selectedCompany = useCurrentCompany()