fix(banking): UI cleanup and better statement parsing (#58817)

* fix(banking): reset scroll on searching accounts

* fix(banking): show only past dates in date filter

* fix(banking): clean up line heights and remove beta badge

* fix(banking): show accurate count of import progress
fix(banking): show latest 20 imports instead of 10

* fix(banking): layout sizing needs to be preserved on page change

* fix(banking): cleaner bank balance UI

* fix(banking): correctly parse Cr/Dr values in statement importer

* Update banking/src/components/features/BankReconciliation/BankBalance.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

banking/src/hooks/useFiscalYear.ts

@@ -1,13 +1,58 @@
 import { useFrappeGetCall } from "frappe-react-sdk"
+import { useMemo } from "react"
+import dayjs from "dayjs"
+import { useCurrentCompany } from "./useCurrentCompany"
 
-const useFiscalYear = () => {
-
-    return useFrappeGetCall("erpnext.accounts.utils.get_fiscal_year", undefined, 'fiscal_year', {
-        revalidateOnFocus: false,
-        revalidateIfStale: false,
-        revalidateOnReconnect: false
-    })
-
+export type FiscalYear = {
+    name: string
+    year_start_date: string
+    year_end_date: string
 }
 
-export default useFiscalYear
+/**
+ * The fiscal year containing today, for the currently selected company.
+ *
+ * `company` matters in multi-company setups, where fiscal years can be restricted to
+ * specific companies. `date` matters because without it `get_fiscal_year` returns the newest
+ * fiscal year in the system (they're ordered by start date, descending) - which may be one
+ * created in advance for a year that hasn't started.
+ */
+const useFiscalYear = () => {
+    const company = useCurrentCompany()
+
+    const { data, ...rest } = useFrappeGetCall<{ message: FiscalYear | [string, string, string] | false }>(
+        "erpnext.accounts.utils.get_fiscal_year",
+        {
+            date: dayjs().format("YYYY-MM-DD"),
+            company,
+            as_dict: 1,
+            // Return nothing instead of throwing/msgprinting when no fiscal year covers today.
+            raise_on_missing: 0,
+            verbose: 0,
+        },
+        company ? `fiscal_year_${company}` : null,
+        {
+            revalidateOnFocus: false,
+            revalidateIfStale: false,
+            revalidateOnReconnect: false
+        }
+    )
+
+    // get_fiscal_year returns a dict with as_dict, a (name, start, end) tuple without it, and
+    // false when there's no match - normalise all three.
+    const fiscalYear = useMemo<FiscalYear | undefined>(() => {
+        const message = data?.message
+        if (!message) return undefined
+
+        if (Array.isArray(message)) {
+            const [name, year_start_date, year_end_date] = message
+            return { name, year_start_date, year_end_date }
+        }
+
+        return message
+    }, [data])
+
+    return { fiscalYear, ...rest }
+}
+
+export default useFiscalYear

banking/src/hooks/useResetScrollOnSearch.ts

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useRef } from "react"
+
+/**
+ * Pins a scrollable list back to the top whenever the search term changes.
+ *
+ * Dropdowns that do their own filtering (`shouldFilter={false}`) swap a long list for a much
+ * shorter one while the scroll container keeps its previous offset - which can leave the
+ * auto-selected first item scrolled out of view.
+ *
+ * Returns a ref to attach to the scroll container (e.g. `CommandList`).
+ */
+const useResetScrollOnSearch = (search: string) => {
+    const listRef = useRef<HTMLDivElement>(null)
+
+    // Layout effect so the reset lands before paint, avoiding a visible jump.
+    useLayoutEffect(() => {
+        listRef.current?.scrollTo({ top: 0 })
+    }, [search])
+
+    return listRef
+}
+
+export default useResetScrollOnSearch