feat: new banking module (#54720)

* feat: initial SPA setup for banking * wip: bring over new banking module * feat: added Espresso design tokens * feat: button styles * fix: add all ink colors * wip: espresso design system changes * feat: button and badge espresso components * fix: button styling for reconcile * feat: Espresso progress bar * feat: Espresso toggle switch * feat: Espresso tabs design * fix: vertical tab support * fix: button sizing across modals * feat: Espresso style table layout * feat: Espresso tooltip * feat: Espresso elevations and checkbox * feat: Dialog with Espresso styles * feat: Espresso textarea * fix: input styles * fix: colors on bank picker * fix: breadcrumb styling * fix: bank picker styling * feat: create doctypes and fields for bank reconciliation * feat: APIs for banking * fix: use date format parser * fix: font styling to match Espresso * wip: settings modal * feat: settings dialog component * fix: icons and invalid requests * feat: preferences tab * fix: adjust icon stroke width to 1.5 * feat: rule configuration in settings * fix: remove sheet component * feat: alert and error banner component * feat: dropdown in Espresso * feat: popover and select in Espresso * fix: cleanup more styles * fix: match size of link fields * feat: command styling * fix: remove unused style tokens * fix: styles for global date picker dropdown * fix: styles for match and reconcile * feat: table Espresso component * feat: remove all other design tokens * fix: remove unused tokens * fix: form elements * fix: remove unused styles and fix filters in bank transaction list * feat: fetch bank rec doctypes for filtering * fix: record payment modal * feat: support for dark mode switching * fix: move bank logos to public folder * feat: add support for RTL * feat: support for RTL * chore: send layout direction in dev boot * fix: make checkbox work in RTL * feat: dark mode support * fix: dark mode style * feat: bank logos in dark mode * feat: dark mode bank logos * chore: use dark mode bank logos everywhere * chore: move rule evaluation to controller * chore: add tests for bank transaction rules * fix: move deps to fix actions errors * fix: move tw-animate-css to deps * fix: remove shadcn * fix: do not open modal if no transactions selected * fix: add translation strings * feat: add banner on existing bank reconciliation tool * feat: bank statement import * fix: translations and layout directions * fix: validation for transaction matching rule * fix: styles * fix: show conflicting transactions in alert * fix: show help text for new banking module forms * feat: show total debits and credits * fix: dark mode colors in automatic config * feat: add keyboard shortcuts help * feat: added keyboard shortcut for settings * fix: decrease size of progress bar * chore: bump packages * feat: add tests for statement import * fix: settings dialog * fix: show banner on small screens * fix: show banner when no bank account set
2026-09-03 08:32:24 +00:00 · 2026-05-09 23:14:58 +05:30
parent 332026fe5e
commit 6de5367f12
262 changed files with 39467 additions and 14 deletions
--- a/banking/src/components/features/BankReconciliation/BankPicker.tsx
+++ b/banking/src/components/features/BankReconciliation/BankPicker.tsx
@@ -0,0 +1,124 @@
+import { useAtom, useSetAtom } from "jotai"
+import { SelectedBank, selectedBankAccountAtom } from "./bankRecAtoms"
+import { useCallback } from "react"
+import { useGetBankAccounts, useGetUnreconciledTransactions } from "./utils"
+import { cn } from "@/lib/utils"
+import { getTimeago } from "@/lib/date"
+import ErrorBanner from "@/components/ui/error-banner"
+import _ from "@/lib/translate"
+import { Badge } from "@/components/ui/badge"
+import { useTheme } from "@/components/ui/theme-provider"
+import BankLogo from "@/components/common/BankLogo"
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
+import { LandmarkIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useCurrentCompany } from "@/hooks/useCurrentCompany"
+
+const BankPicker = ({ className }: { className?: string }) => {
+
+    const setSelectedBank = useSetAtom(selectedBankAccountAtom)
+
+    const onLoadingSuccess = useCallback((data?: SelectedBank[]) => {
+        if (!data) return
+        if (data.length === 1) {
+            setSelectedBank(data[0])
+        } else if (data.length > 1) {
+            const defaultBank = data.find((bank: SelectedBank) => bank.is_default)
+            if (defaultBank) {
+                setSelectedBank(defaultBank)
+            }
+        }
+    }, [setSelectedBank])
+
+    const selectedCompany = useCurrentCompany()
+
+    const { banks, isLoading, error } = useGetBankAccounts(onLoadingSuccess)
+
+    const { themeValue } = useTheme()
+
+    if (isLoading) {
+        return null
+    }
+
+    if (error) {
+        return <ErrorBanner error={error} />
+    }
+
+    if (banks?.length === 0) {
+        return <Empty>
+            <EmptyMedia>
+                <LandmarkIcon />
+            </EmptyMedia>
+            <EmptyHeader>
+                <EmptyTitle>{_("No bank accounts found")}</EmptyTitle>
+                <EmptyDescription>{_("You have not added any bank accounts to your company.")}</EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+                <Button asChild>
+                    <a href={`/desk/bank-account?company=${encodeURIComponent(selectedCompany)}&is_company_account=1`}>
+                        {_("Configure Bank Accounts")}
+                    </a>
+                </Button>
+            </EmptyContent>
+        </Empty>
+    }
+    return (
+        <div
+            className={cn("flex gap-3 items-stretch w-full overflow-x-auto pe-4",
+                banks?.length > 4 ? 'pb-2' : '', className,
+            )}
+            style={{
+                scrollbarWidth: 'thin',
+                scrollbarColor: themeValue === 'Dark' ? 'var(--surface-gray-2) var(--surface-gray-1)' : 'rgb(209 213 219) rgb(243 244 246)',
+            }}
+        >
+            {
+                banks?.map((bank) => (
+                    <BankPickerItem key={bank.name} bank={bank} />
+                ))
+            }
+        </div>
+    )
+}
+
+const BankPickerItem = ({ bank }: { bank: SelectedBank }) => {
+
+    const [selectedBank, setSelectedBank] = useAtom(selectedBankAccountAtom)
+
+    const isSelected = selectedBank?.name === bank.name
+
+    const { mutate } = useGetUnreconciledTransactions()
+
+    const onSelect = () => {
+        setSelectedBank(bank)
+        mutate()
+    }
+
+    return <div
+        role="button"
+        title={`Select ${bank.account_name}`}
+        onClick={onSelect}
+        className={cn('rounded-md border border-outline-gray-1 max-w-60 min-w-60 p-2 overflow-hidden cursor-pointer',
+            isSelected ? 'border-outline-gray-5 bg-surface-gray-1' : 'hover:bg-surface-gray-1'
+        )}
+    >
+
+
+        <BankLogo bank={bank} className="mb-2" />
+
+        <div className="flex flex-col gap-1">
+            <div className="flex gap-2 items-center">
+                <span className={cn("text-sm font-medium line-clamp-1 text-ink-gray-8")}>{bank.account_name}</span>
+                {bank.account_type && <Badge variant='subtle' size='sm' theme='gray'>
+                    {bank.account_type?.slice(0, 24)}
+                </Badge>}
+            </div>
+
+            <span title={_("GL Account")} className={cn("text-ellipsis line-clamp-1 text-sm text-ink-gray-6")}>{bank.account}</span>
+            {bank.last_integration_date && <span className="text-xs text-ink-gray-5">{_("Last Synced Transaction")}: {getTimeago(bank.last_integration_date)}</span>}
+        </div>
+
+    </div >
+}
+
+export default BankPicker